#toast {
        position: fixed;
        top: 20px;
        right: 20px;
        background: #0f1722;
        color: #fff;
        padding: 15px 20px;
        border-radius: 10px;
        font-size: 15px;
        font-family: 'DM Sans', sans-serif;
        font-weight: 500;
        box-shadow: 0 10px 40px rgba(15,23,34,0.25);
        opacity: 0;
        transform: translateY(-20px);
        transition: 0.3s ease;
        z-index: 99999;
        pointer-events: none;
      }
      #toast.show { opacity: 1; transform: translateY(0); }
      #toast.success { background: #16a34a; }
      #toast.error   { background: #dc2626; }
      #toast.warning { background: #d97706; }

      /* ── Cart Overlay ── */
      .cart-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15,23,34,0.45); opacity: 0; visibility: hidden;
        transition: .3s; z-index: 1999;
      }
      .cart-overlay.active { opacity: 1; visibility: visible; }

      /* ── Cart Drawer ── */
      .cart-drawer {
        position: fixed; top: 0; right: -100%;
        width: 400px; max-width: 100%; height: 100%;
        background: #fff; z-index: 2000;
        display: flex; flex-direction: column;
        box-shadow: -10px 0 40px rgba(15,23,34,0.18);
        transition: right .4s cubic-bezier(0.4,0,0.2,1);
      }
      .cart-drawer.active { right: 0; }

      .cart-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 22px 24px; border-bottom: 1px solid #e6eaf0;
      }
      .cart-header h2 {
        font-family: 'Syne', sans-serif;
        font-size: 20px; font-weight: 700; margin: 0;
        color: #0f1722;
      }
      .close-cart {
        background: #f4f6f9; border: none; cursor: pointer;
        color: #6b7384; width: 38px; height: 38px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        transition: background .2s, color .2s;
      }
      .close-cart:hover { background: #fee2e2; color: #dc2626; }

      .cart-items { flex: 1; overflow-y: auto; padding: 22px 24px; }

      .cart-item { display: flex; gap: 14px; margin-bottom: 22px; }
      .cart-item img {
        width: 66px; height: 66px; object-fit: contain;
        border-radius: 10px; border: 1px solid #e6eaf0; background: #f4f6f9;
        flex-shrink: 0;
      }
      .cart-item-info { flex: 1; min-width: 0; }
      .cart-item-info h4 {
        font-size: 15px; margin: 0 0 5px; font-family: 'DM Sans', sans-serif;
        font-weight: 600; color: #0f1722; line-height: 1.3;
      }
      .cart-item-info > span {
        color: #0092ad; font-weight: 700; font-size: 15px;
        font-family: 'DM Sans', sans-serif;
      }

      .cart-qty { display: flex; gap: 0; align-items: center; margin-top: 10px; width: fit-content; border: 1px solid #e6eaf0; border-radius: 8px; overflow: hidden; }
      .cart-qty button {
        width: 32px; height: 32px; border: none; background: #f4f6f9;
        cursor: pointer; font-size: 17px; font-weight: 600; color: #0f1722;
        transition: background .15s;
      }
      .cart-qty button:hover { background: #e6eaf0; }
      .cart-qty span {
        min-width: 38px; text-align: center; font-size: 15px;
        font-weight: 600; font-family: 'DM Sans', sans-serif; color: #0f1722;
      }

      .remove-btn {
        display: block; background: none; border: none; color: #dc2626;
        cursor: pointer; font-size: 13px; margin-top: 8px; padding: 0;
        font-family: 'DM Sans', sans-serif; font-weight: 500;
      }
      .remove-btn:hover { text-decoration: underline; }

      .cart-footer { padding: 22px 24px; border-top: 1px solid #e6eaf0; background: #fff; }
      .cart-total {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 16px; font-family: 'DM Sans', sans-serif; font-size: 16px;
        color: #3a4252;
      }
      .cart-total strong {
        font-family: 'Syne', sans-serif; font-size: 22px; color: #0f1722;
      }

      .checkout-btn {
        width: 100%; padding: 15px; background: #00b6d6;
        color: white; border: none; border-radius: 100px; cursor: pointer;
        font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 16px;
        transition: background .2s, transform .15s;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        box-shadow: 0 6px 20px rgba(0,182,214,0.35);
      }
      .checkout-btn:hover { background: #0092ad; transform: translateY(-1px); }

      .add-cart.added { background: #16a34a; }

      .cart-empty {
        text-align: center; padding: 60px 20px;
        font-family: 'DM Sans', sans-serif; color: #6b7384; font-size: 15px;
      }
      .cart-empty svg { margin-bottom: 14px; opacity: .35; color: #6b7384; }
      .cart-empty p { margin: 0; }

      /* ── Cart icon badge + fly-to-cart animation ── */
      .cart-wrapper { position: relative; display: inline-flex; }
      .free-shipping-info{
        width: 100%;
        padding: 1rem;
        font-size: small;
        font-style: oblique;
        color: #ff6b2b;
      }
      #cart-count {
        position: absolute;
        top: -6px; right: -8px;
        background: #ff6b2b;
        color: #fff;
        font-family: 'DM Sans', sans-serif;
        font-size: 11px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        transition: transform .25s cubic-bezier(.34,1.56,.64,1);
      }
      #cart-count.bump { transform: scale(1.5); }

      .fly-dot {
        position: fixed;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: #00b6d6;
        z-index: 99998;
        pointer-events: none;
        box-shadow: 0 2px 10px rgba(0,182,214,0.6);
        transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s ease;
      }

      
/* ════════════════════════════════════════
   PROFILE ICON
════════════════════════════════════════ */
.profile-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  padding: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  transition: transform .2s;
}
.profile-wrapper:hover { transform: scale(1.05); }

/* ════════════════════════════════════════
   USER SIDEBAR (dropdown)
════════════════════════════════════════ */
.user-sidebar {
  position: absolute;
  top: 72px;
  right: 20px;
  width: 270px;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15,23,34,0.18);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: 0.3s;
  z-index: 1500;
  overflow: hidden;
}
.user-sidebar.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* HEADER */
.sidebar-header {
  padding: 18px;
  border-bottom: 1px solid #eef1f5;
  background: #f4f6f9;
}
.sidebar-header h4 {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  color: #0f1722;
  font-family: var(--font-body), sans-serif;
}
.sidebar-header small {
  color: #6b7384;
  font-size: 13px;
}

/* LINKS */
.sidebar-links a,
.sidebar-links .sidebar-logout-form button {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  text-decoration: none;
  color: #3a4252;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-body), sans-serif;
  transition: 0.2s;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.sidebar-links a:hover,
.sidebar-links .sidebar-logout-form button:hover {
  background: #f4f6f9;
  color: var(--primary-color);
}
.sidebar-logout-form { margin: 0; }

/* ICONS */
.sidebar-links .icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-links svg {
  width: 20px;
  height: 20px;
  color: var(--primary-color);
}

/* ════════════════════════════════════════
   MEGA TOGGLE arrow alignment
════════════════════════════════════════ */
.mega-toggle {
  display: inline-flex;
  align-items: center;
}

/* MOBILE FIX */
@media(max-width:768px){
  .user-sidebar {
    right: 10px;
    width: calc(100% - 20px);
    max-width: 320px;
  }
}
      @media (max-width: 500px) { .cart-drawer { width: 100%; } }