/* === Responsive & header/menu/footer fixes (preserve pink+gold theme) === */

/* Make header edge-to-edge and remove boxed look */
.site-header, header.site-header {
  width: 100% !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 12px 18px !important;
  border-radius: 0 !important;
}

/* === 2026-01-01 HOTFIX: product-card sizing + mobile menu clickability === */

/* A) Mobile product cards: stop huge squares, keep equal heights, keep CTA aligned */
@media (max-width: 768px){
  .product-grid .card{ display:flex !important; flex-direction:column !important; height:100% !important; }
  .product-grid .card-img{ aspect-ratio: auto !important; height: 130px !important; }
  .product-grid .card-img img{ height:100% !important; width:100% !important; object-fit:cover !important; }
  .product-grid .card-body{ flex: 1 1 auto !important; display:flex !important; flex-direction:column !important; }
  .product-grid .card-title{
    display:-webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow:hidden !important;
    line-height:1.25 !important;
    min-height: 2.5em !important; /* two lines */
    margin: 8px 0 6px !important;
  }
  .product-grid .card-actions{ margin-top:auto !important; }
}

/* -------------------- Tracking page (mobile-first) -------------------- */
.track-form{max-width:720px;margin:18px auto;display:flex;gap:10px;align-items:center;background:#fff;border:1px solid rgba(212,175,55,.35);border-radius:16px;padding:14px;box-shadow:0 14px 30px rgba(0,0,0,.08)}
.track-form input{flex:1 1 auto;padding:12px 14px;border:1px solid rgba(255,59,143,.35);border-radius:999px;outline:none}
.track-card{max-width:720px;margin:18px auto;padding:14px 14px 12px;background:#fff;border:1px solid rgba(212,175,55,.35);border-radius:16px;box-shadow:0 14px 30px rgba(0,0,0,.08)}
.track-card .oid{font-weight:900;margin:2px 0 10px;color:#5a2d82}
.track-card .progress{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 10px}
.track-card .step{padding:10px 12px;border-radius:14px;border:1px solid rgba(212,175,55,.35);background:#fff;font-weight:800;text-transform:capitalize;font-size:13px}
.track-card .step.done{background:rgba(255,59,143,.12);border-color:rgba(255,59,143,.25)}
.track-card .timeline{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.track-card .timeline li{line-height:1.35}
.track-card .small{opacity:.75;font-weight:700;margin-top:10px}
@media (max-width: 480px){
  .track-form{flex-direction:column;align-items:stretch}
  .track-card .step{width:100%;text-align:center}
}

/* B) Mobile menu: enforce one overlay/panel stacking order and pointer events */
@media (max-width: 1023px){
  /* Overlay: visible only when open */
  #navOverlay.nav-overlay{ display:block !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; background: rgba(0,0,0,.35) !important; }
  body.nav-open #navOverlay.nav-overlay{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }

  /* Panel always above overlay and clickable */
  nav#mainNav.main-nav{ z-index: 2147483646 !important; pointer-events:auto !important; opacity:1 !important; }
  nav#mainNav.main-nav, body.nav-open nav#mainNav.main-nav{ position: fixed !important; top:0 !important; right:0 !important; bottom:0 !important; width: min(86vw, 340px) !important; max-width:340px !important; height: 100dvh !important; background:#fff !important; box-shadow: 0 24px 60px rgba(0,0,0,.18) !important; border-radius: 0 !important; }
  nav#mainNav.main-nav:not(.active){ transform: translateX(100%) !important; display:block !important; }
  nav#mainNav.main-nav.active{ transform: translateX(0) !important; }
  nav#mainNav.main-nav *{ pointer-events:auto !important; }
}


/* ============================
   v5: Purchase history + order details + thank-you polish
   ============================ */

.orders-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin: 18px 0 12px; }
.orders-title{ font-family: "Playfair Display", serif; font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); color: #2a2228; }
.orders-sub{ margin-top:6px; color: #5b4a55; max-width: 62ch; }

.orders-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
@media (max-width: 980px){ .orders-grid{ grid-template-columns: 1fr; } }

.order-card.pro{
  border-radius: 22px;
  border: 1px solid rgba(198,146,20,.18);
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
  overflow: hidden;
}
.order-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; padding: 16px 16px 10px; }
.order-top .oid{ font-weight: 900; font-size: 18px; color:#2a2228; }
.order-top .time{ color:#6b5a64; margin-top: 4px; }
.order-right{ text-align:right; }
.order-right .amount{ font-weight: 900; color:#b78628; margin-top: 6px; }

.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-weight: 800; font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,246,248,.95);
  border: 1px solid rgba(198,146,20,.25);
  color: #5f3b5f;
  text-transform: capitalize;
}
.status-pill::before{ content:""; width:8px; height:8px; border-radius:99px; background: #d4af37; box-shadow: 0 0 0 4px rgba(212,175,55,.18); }
.status-paid::before{ background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.14); }
.status-pending::before{ background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.status-delivered::before{ background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.14); }
.status-cancelled::before{ background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.14); }
.status-payment_failed::before{ background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.14); }

.order-mid{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; padding: 0 16px 14px; }
.order-mid .meta{ display:grid; gap: 8px; }
.mrow{ display:flex; gap:10px; align-items:baseline; }
.mrow span{ color:#6b5a64; min-width: 92px; }
.mrow b{ color:#2a2228; }
.muted{ color:#8a7b85; font-weight: 600; }

.copy-btn{
  margin-left:10px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(198,146,20,.32);
  background: rgba(255,255,255,.92);
  color: #b78628;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.copy-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 20px rgba(183,134,40,.12); }
.copy-btn:active{ transform: translateY(0px); }

.order-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

/* Tight mobile: prevent order cards CTAs from overflowing */
@media (max-width: 480px){
  .order-top{ flex-direction:column; align-items:flex-start; }
  .order-right{ text-align:left; }
  .order-mid{ flex-direction:column; }
  .order-actions{ justify-content:flex-start; width:100%; }
  .order-actions .btn{ flex: 1 1 auto; text-align:center; }
  .mrow span{ min-width: 84px; }
}

/* Footer mobile: Quick Links (left) + Support (right) side-by-side */
@media (max-width: 600px){
  .footer-grid{ grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .footer-grid > div:nth-child(1){ grid-column: 1 / -1; }
  .footer-grid > div:nth-child(4){ grid-column: 1 / -1; }
}

.order-items{ padding: 12px 16px 16px; border-top: 1px solid rgba(198,146,20,.12); background: linear-gradient(180deg, rgba(255,246,248,.75), rgba(255,255,255,.75)); }
.items-skeleton{ color:#7b6c75; }
.items-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
.item-chip{
  display:flex; gap:10px; align-items:center;
  min-width: min(320px, 100%);
  flex: 1 1 320px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(198,146,20,.18);
  background: rgba(255,255,255,.85);
  text-decoration:none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.item-chip:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.item-chip img{ width: 46px; height: 46px; border-radius: 14px; object-fit: cover; background: #fff; border: 1px solid rgba(0,0,0,.06); }
.item-chip .nm{ font-weight: 800; color:#2a2228; }
.item-chip .sub{ color:#6b5a64; font-size: 13px; margin-top: 2px; }
.order-items .more{ padding: 10px 12px; border-radius: 16px; border: 1px dashed rgba(198,146,20,.35); color:#6b5a64; font-weight: 800; }

/* Order Details */
.od-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin: 18px 0 12px; }
.od-title{ font-family: "Playfair Display", serif; font-weight: 900; font-size: clamp(22px, 2.4vw, 32px); color:#2a2228; }
.od-sub{ margin-top:6px; color:#5b4a55; }
.od-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.od-grid{ display:grid; grid-template-columns: 1.35fr .85fr; gap: 16px; margin-bottom: 26px; }
@media (max-width: 980px){ .od-grid{ grid-template-columns: 1fr; } }

.od-card{
  border-radius: 22px;
  border: 1px solid rgba(198,146,20,.18);
  background: rgba(255,255,255,.88);
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
  padding: 14px;
}
.od-card h2{ margin: 0 0 10px; font-size: 16px; font-weight: 900; color:#2a2228; }

.od-items{ display:flex; flex-direction:column; gap: 10px; }
.od-item{
  display:grid;
  grid-template-columns: 54px 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(198,146,20,.16);
  background: rgba(255,255,255,.85);
  text-decoration:none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.od-item:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.od-item img{ width:54px; height:54px; border-radius: 16px; object-fit: cover; border: 1px solid rgba(0,0,0,.06); background: #fff; }
.od-item .nm{ font-weight: 900; color:#2a2228; }
.od-item .sub{ margin-top: 2px; color:#6b5a64; font-size: 13px; }
.od-item-total{ font-weight: 900; color:#b78628; }

.od-summary .srow{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; padding: 8px 0; }
.od-summary .srow span{ color:#6b5a64; }
.od-summary .srow b{ color:#2a2228; }
.od-summary .sep{ height:1px; background: rgba(198,146,20,.14); margin: 8px 0; }

.od-ship{ color:#2a2228; }
.od-empty{ text-align:center; padding: 28px 0; }
.od-empty .od-title{ margin-bottom: 6px; }
.od-empty .od-sub{ margin-bottom: 14px; }

/* Thank you page hero */
.thanks-wrap{ padding: 42px 0 16px; }
.thanks-card{
  max-width: 900px;
  margin: 0 auto;
  border-radius: 26px;
  padding: 26px;
  border: 1px solid rgba(198,146,20,.18);
  background: rgba(255,255,255,.86);
  box-shadow: 0 28px 90px rgba(0,0,0,.12);
  position: relative;
  overflow:hidden;
}
.thanks-card::before{
  content:"";
  position:absolute;
  inset:-80px;
  background: radial-gradient(circle at 20% 15%, rgba(212,175,55,.28), transparent 55%),
              radial-gradient(circle at 85% 25%, rgba(255,105,180,.18), transparent 55%),
              radial-gradient(circle at 50% 90%, rgba(106,63,103,.12), transparent 55%);
  filter: blur(1px);
}
.thanks-card > *{ position: relative; }
.thanks-title{ display:flex; align-items:center; justify-content:center; gap:10px; font-family: "Playfair Display", serif; font-weight: 900; font-size: clamp(28px, 3vw, 42px); color:#2a2228; }
.thanks-title .spark{ filter: drop-shadow(0 10px 22px rgba(212,175,55,.28)); }
.thanks-msg{ text-align:center; color:#5b4a55; margin-top: 10px; font-size: 16px; }
.thanks-actions{ display:flex; justify-content:center; gap: 12px; flex-wrap:wrap; margin-top: 16px; }
.thanks-actions .btn{ min-width: 180px; }


/* =========================================================
   FINAL OVERRIDES (2026-01-01)
   - Fix huge mobile product cards (keep buttons aligned)
   - Fix mobile menu dim/unclickable issues by enforcing a single z-index + offcanvas behavior
   ========================================================= */

@media (max-width: 768px){
  /* Product cards: smaller image, consistent title height, actions pinned to bottom */
  .product-grid{ align-items: stretch !important; }
  .product-grid .card{ display:flex !important; flex-direction:column !important; height:100% !important; }
  .product-grid .card-img{ aspect-ratio: auto !important; height:130px !important; }
  .product-grid .card-img img{ width:100% !important; height:100% !important; object-fit:cover !important; }
  .product-grid .card-body{ display:flex !important; flex-direction:column !important; gap:6px !important; flex:1 1 auto !important; }
  .product-grid .card-title{
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    line-height:1.25 !important;
    min-height:2.5em !important; /* two lines */
  }
  .product-grid .card-actions{ margin-top:auto !important; }
}

@media (max-width: 1023px){
  /* Mobile menu: make it always clickable and never covered by overlay */
  #navOverlay, .nav-overlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.35) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 99990 !important;
  }
  body.nav-open #navOverlay,
  body.nav-open .nav-overlay{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  nav#mainNav.main-nav{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 360px) !important;
    max-width: 360px !important;
    background: #fff !important;
    transform: translateX(105%) !important;
    transition: transform .22s ease !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }
  nav#mainNav.main-nav.active{ transform: translateX(0) !important; }
  nav#mainNav .nav-head{ position: sticky !important; top: 0 !important; z-index: 2 !important; }
  nav#mainNav .nav-scroll{ overflow-y:auto !important; max-height: calc(100dvh - 58px) !important; -webkit-overflow-scrolling:touch; }
  nav#mainNav *{ pointer-events: auto !important; }

  /* --- Requested: hover/transition/animations inside mobile menu --- */
  nav#mainNav.main-nav{ transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease !important; }
  body.nav-open nav#mainNav.main-nav{ box-shadow: 0 28px 70px rgba(0,0,0,.22) !important; }

  nav#mainNav .nav-scroll a,
  nav#mainNav .nav-scroll button{
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    will-change: transform;
  }
  nav#mainNav .nav-scroll a:hover,
  nav#mainNav .nav-scroll a:focus-visible,
  nav#mainNav .nav-scroll button:hover,
  nav#mainNav .nav-scroll button:focus-visible{
    background: rgba(255, 230, 240, .85) !important;
    transform: translateX(6px) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
    outline: none !important;
  }
  nav#mainNav .nav-scroll a:active,
  nav#mainNav .nav-scroll button:active{ transform: translateX(3px) scale(.98) !important; }

  /* Stagger-in animation (looks like pro e-com offcanvas) */
  @keyframes kr_nav_item_in{ from{ opacity:0; transform: translateX(16px);} to{ opacity:1; transform: translateX(0);} }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *{ opacity:0; animation: kr_nav_item_in .28s ease forwards; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(1){ animation-delay:.02s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(2){ animation-delay:.04s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(3){ animation-delay:.06s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(4){ animation-delay:.08s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(5){ animation-delay:.10s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(6){ animation-delay:.12s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(7){ animation-delay:.14s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(8){ animation-delay:.16s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(9){ animation-delay:.18s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(10){ animation-delay:.20s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(11){ animation-delay:.22s; }
  body.nav-open nav#mainNav.main-nav.active .nav-scroll > *:nth-child(12){ animation-delay:.24s; }

  /* Stop body scrolling when menu is open */
  body.nav-open{ overflow: hidden !important; }
}


/* =============================================================
   FINAL OVERRIDES (Jan 2026) – requested fixes
   -------------------------------------------------------------
   Product card CTAs:
   - Home + Shop (desktop): pill "Add to Cart" + simple "View" text in ONE ROW
   - Home + Shop (mobile): same layout, smaller sizes, still ONE ROW
   ------------------------------------------------------------- */

/* Desktop + tablet */
.product-grid .card-actions,
.shop-grid .card-actions,
#productGrid .card-actions,
#featuredTrack .card-actions,
.featured-page .card-actions{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 16px 16px !important;
}

/* Add to cart = premium pill */
.product-grid .card-actions .btn-add,
.shop-grid .card-actions .btn-add,
#productGrid .card-actions .btn-add,
#featuredTrack .card-actions .btn-add,
.featured-page .card-actions .btn-add{
  flex: 0 0 auto !important;
  min-width: 140px !important;
  height: 46px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 6px !important;
  line-height: 1 !important;
  box-shadow: 0 12px 26px rgba(212,175,55,.18) !important;
}

/* Keep "Add to Cart" on one line on desktop */
@media (min-width: 769px){
  .card-actions .btn-add span{ display:inline !important; }
}

/* View = simple text link aligned right */
.product-grid .card-actions a.btn,
.shop-grid .card-actions a.btn,
#productGrid .card-actions a.btn,
#featuredTrack .card-actions a.btn,
.featured-page .card-actions a.btn{
  flex: 0 0 auto !important;
  margin-left: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 6px !important;
  height: auto !important;
  min-width: 0 !important;
  font-weight: 800 !important;
  color: #2f2650 !important;
  text-decoration: none !important;
}
.card-actions a.btn:hover{ text-decoration: underline !important; }

/* Mobile: smaller but SAME one-row layout */
@media (max-width: 768px){
  .product-grid .card-actions,
  .shop-grid .card-actions,
  #productGrid .card-actions,
  #featuredTrack .card-actions,
  .featured-page .card-actions{
    gap: 10px !important;
    padding: 10px 12px 12px !important;
  }

  .product-grid .card-actions .btn-add,
  .shop-grid .card-actions .btn-add,
  #productGrid .card-actions .btn-add,
  #featuredTrack .card-actions .btn-add,
  .featured-page .card-actions .btn-add{
    min-width: 112px !important;
    height: 42px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Mobile can keep 2-line inside pill if needed */
  .card-actions .btn-add span{ display:block !important; }
}


/* =============================================================
   Mobile menu (RIGHT slide-in) – fully clickable, no accidental close
   ============================================================= */
@media (max-width: 1023px){
  /* Overlay */
  #navOverlay,
  .nav-overlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(24, 18, 30, .35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .22s ease, visibility .22s ease !important;
    z-index: 9998 !important;
    display: block !important;
  }
  body.nav-open #navOverlay,
  body.nav-open .nav-overlay{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Panel */
  #mainNav,
  nav.main-nav{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 100dvh !important;
    width: min(86vw, 360px) !important;
    max-width: 360px !important;
    padding: 16px 14px !important;
    background: linear-gradient(180deg, rgba(255, 239, 246, .98), rgba(255, 255, 255, .96)) !important;
    border-left: 1px solid rgba(212,175,55,.25) !important;
    box-shadow: -18px 0 46px rgba(0,0,0,.18) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(110%) !important;
    transition: transform .28s cubic-bezier(.2,.9,.2,1) !important;
    z-index: 9999 !important;
    pointer-events: none !important;
  }
  body.nav-open #mainNav,
  body.nav-open nav.main-nav{
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Make menu items look premium + clickable */
  #mainNav > a,
  nav.main-nav > a{
    display: block !important;
    padding: 14px 14px !important;
    border-radius: 18px !important;
    background: #fff !important;
    border: 1px solid rgba(212,175,55,.28) !important;
    color: #4b2a73 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(212,175,55,.10) !important;
    transition: transform .16s ease, box-shadow .16s ease !important;
  }
  #mainNav > a:hover,
  nav.main-nav > a:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 30px rgba(212,175,55,.16) !important;
  }

  /* Search bar inside menu */
  #mainNav form#mobileSearch,
  nav.main-nav form#mobileSearch,
  #mainNav form.mobile-search,
  nav.main-nav form.mobile-search{
    display: block !important;
    margin: 4px 0 8px !important;
  }

  /* Account area inside menu */
  #mainNav .account-area,
  nav.main-nav .account-area{
    margin-top: 4px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #mainNav .account-area .btn,
  nav.main-nav .account-area .btn{
    height: 44px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    justify-content: center !important;
  }
}


/* ==============================
   PATCH v5 (2026-01-01)
   - Mobile product grid 2x2 (Home + Shop)
   - Mobile menu: right off-canvas, LEFT-aligned buttons, working links
   - Fix Add-to-Cart button overflow/size inside cards
   NOTE: This block is intentionally placed at the end to override earlier experiments.
================================ */

/* 1) 2-by-2 products on mobile (Home featured pages + Shop grid) */
@media (max-width: 768px){
  .product-grid,
  #productGrid.product-grid,
  .featured-page .product-grid{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* 2) Card actions containment (prevents Add-to-Cart escaping the card) */
.card{ display:flex; flex-direction:column; overflow:hidden !important; }
.card-actions{ margin-top:auto !important; position:relative; }
@media (max-width: 768px){
  .card-actions{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    padding: 12px 14px 14px !important;
    align-items:stretch !important;
    justify-content:space-between !important;
  }
  .card-actions .btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    border-radius: 999px !important;
    min-height: 46px !important;
  }
  .card-actions .btn-add{
    width: auto !important;
    min-width: 120px !important;
    height: auto !important;
    padding: 10px 12px !important;
  }
  .card-actions a.btn{ text-decoration:none !important; }
}

/* 3) Mobile off-canvas menu (RIGHT) – keep desktop untouched */
@media (max-width: 1023px){
  /* Ensure menu remains clickable even if older CSS disables pointer events */
  body.nav-open nav.main-nav#mainNav{ pointer-events:auto !important; }
  header.site-header.open nav.main-nav#mainNav{ pointer-events:auto !important; }

  /* Panel layout */
  nav.main-nav#mainNav{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(86vw, 360px) !important;
    transform: translateX(110%) !important;
    transition: transform .25s ease !important;
    border-radius: 0 !important;
    padding: 14px 14px 18px !important;
    overflow-y: auto !important;
    z-index: 10001 !important;
  }
  nav.main-nav#mainNav.active{ transform: translateX(0) !important; }
  body.nav-open nav.main-nav#mainNav{ transform: translateX(0) !important; }

  /* Links: left aligned (NOT centered) */
  nav.main-nav#mainNav > a{
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 10px 0 !important;
  }
  nav.main-nav#mainNav .cart-link{
    justify-content: space-between !important;
  }

  /* Search bar sits at the top inside the panel */
  nav.main-nav#mainNav form.mobile-search{
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: rgba(255,246,250,.98) !important;
    padding: 10px 0 12px !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid rgba(198,146,20,.14) !important;
  }

  /* Login/Signup: separate style & aligned row */
  nav.main-nav#mainNav .account-area{
    display:flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items:center !important;
    justify-content: space-between !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(198,146,20,.18) !important;
  }
  nav.main-nav#mainNav .account-area .btn.mini{
    flex: 1 1 0 !important;
    text-align:center !important;
    padding: 12px 14px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }
}

/* ==============================
   FINAL OVERRIDES (do not remove)
   These rules fix the exact issues reported:
   1) Mobile menu buttons not clickable (pointer-events)
   2) Menu alignment + search bar layout
   3) Home + Shop products forced 2x2 on mobile
   4) Add-to-Cart button stays inside the card
================================ */

/* 1) Links must remain clickable whenever menu is open */
@media (max-width: 1023px){
  body.nav-open nav.main-nav#mainNav{ pointer-events: auto !important; }
  body.nav-open nav.main-nav#mainNav *{ pointer-events: auto !important; }
  /* If for any reason .active is not applied, still allow clicks when header has .open */
  header.site-header.open nav.main-nav#mainNav{ pointer-events: auto !important; }
}

/* 2) Mobile menu: left aligned buttons + neat spacing */
@media (max-width: 1023px){
  nav.main-nav#mainNav{ gap: 10px !important; }
  nav.main-nav#mainNav > a{ justify-content: flex-start !important; }
  nav.main-nav#mainNav > a.cart-link{ justify-content: space-between !important; }

  /* Account buttons: remove from main list feel, keep as a separate row */
  nav.main-nav#mainNav .account-area{ display:flex !important; flex-direction: row !important; gap: 10px !important; }
  nav.main-nav#mainNav .account-area .btn.mini{ width: 50% !important; }
}

/* 3) Mobile products: ALWAYS 2 columns on Home + Shop */
@media (max-width: 768px){
  .product-grid,
  #productGrid.product-grid,
  .featured-page .product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* 4) Add-to-Cart containment: stop escaping card */
@media (max-width: 768px){
  .card{ overflow: hidden !important; display:flex !important; flex-direction: column !important; }
  .card-actions{ margin-top:auto !important; padding: 12px 12px 14px !important; flex-wrap: nowrap !important; }
  .card-actions .btn{ flex: 1 1 0 !important; min-width: 0 !important; }
  .card-actions .btn-add{ width: auto !important; min-height: 46px !important; }
}


/* Ensure main nav is neat and mobile friendly */
.navbar, .main-nav, .site-nav, nav {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: flex-end;
}

/* Mobile menu: neat card-like dropdown centered, smooth animation */
.mobile-nav, .mobile-menu, .site-header .mobile-nav {
  display: none;
  position: absolute;
  top: 70px;
  right: 12px;
  width: calc(100% - 48px);
  max-width: 360px;
  background: rgba(255,255,255,0.98);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 18px;
  transform-origin: top right;
  transform: scale(0.95);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .28s ease;
  z-index: 1200;
}

/* When open */
.site-header.open .mobile-nav,
.site-header .mobile-nav.open {
  display: block;
  transform: scale(1);
  opacity: 1;
}

/* Mobile nav items neat */
.mobile-nav a, .mobile-menu a {
  display: block;
  padding: 12px 14px;
  text-align: center;
  border-radius: 8px;
  color: #3b2b2b;
  text-decoration: none;
  font-weight: 500;
}

/* Compact footer layout on mobile, horizontal on desktop */
.site-footer, footer.site-footer {
  padding: 28px 18px;
  background: transparent;
}
.footer-grid, .footer-cols {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.footer-grid .col {
  flex: 1 1 200px;
}

/* Support to the right of Quick Links on larger screens */
@media (min-width: 900px) {
  .footer-grid {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  /* Assume .quick-links and .support exist */
  .quick-links { order: 1; }
  .support { order: 2; margin-left: 12px; }
}

/* Compact on mobile */
@media (max-width: 768px) {
  .mobile-nav, .site-header.open .mobile-nav { left: 8px; left: 8px; width: auto; max-width: none; top: 64px; }
  .footer-grid { flex-direction: column; gap: 12px; }
  .hero { padding-left: 12px; padding-right: 12px; }
}

/* Tidy up headings & text that appear misaligned */
.hero h1, .hero h2, .hero .title {
  text-align: center;
  margin: 0 auto 14px;
  line-height: 1.05;
  max-width: 90%;
}

/* Keep theme colors accessible via variables if not present */
:root {
  --brand-pink: #ffd6de;
  --brand-gold: #d19b2b;
  --accent-dark: #3b2b2b;
}

/* Simple animation for about page box */
.box-animate {
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

/* Ensure search overlays hidden (we will also remove via JS) */
/* removed global search overlay hide to allow per-page control */


/* === Animated Mobile Sidebar Nav (pink + golden) === */


/* =============================
   v20 FINAL OVERRIDES (DO NOT REMOVE)
   Fix: mobile products/grid, desktop menu toggle, login/signup pills,
   and professional variant swatches.
   ============================= */

/* 1) Desktop: hide mobile toggles (main site) */
@media (min-width: 1024px){
  #menuToggle, .menu-toggle, #searchToggle, .search-toggle,
  .mobile-search, #mobileSearch{ display:none !important; }
}

/* 2) Mobile product cards: always visible and well-sized */
@media (max-width: 768px){
  .product-grid,
  #productGrid.product-grid,
  .featured-page .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .card{ border-radius: 18px !important; overflow: hidden !important; }
  .card-img{ background: rgba(255,255,255,.8); }
  .card-img img{ width:100% !important; height:auto !important; aspect-ratio: 1/1 !important; object-fit: cover !important; }
  .card-body{ padding: 12px 12px 6px !important; }
  .card-title{ font-size: 14px !important; line-height: 1.25 !important; margin: 0 0 6px !important; }
  .card-price{ font-size: 14px !important; font-weight: 700 !important; }
  .card-actions{ padding: 10px 12px 12px !important; }
  .card-actions .btn-add{ width: 96px !important; height: 46px !important; }
}

/* Very small phones: 1 column so nothing clips */
@media (max-width: 360px){
  .product-grid,
  #productGrid.product-grid,
  .featured-page .product-grid{ grid-template-columns: 1fr !important; }
}

/* 3) Login/Signup pill buttons (keep like old design) */
.account-area{ display:flex; align-items:center; gap:10px; }
.account-area .btn.mini{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  border: 1.5px solid rgba(200,146,20,.55) !important;
  background: rgba(255,255,255,.9) !important;
  color: #5a0040 !important;
  text-decoration: none !important;
}
.account-area .btn.mini.outline{
  background: linear-gradient(180deg, #ffd88a 0%, #c69114 100%) !important;
  border-color: rgba(200,146,20,.9) !important;
  color: #5a0040 !important;
}
.account-area .btn.mini:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(200,146,20,.18); }

/* 4) Product page: professional swatches + size pills */
.kr-variants{ margin-top: 14px; display:flex; flex-direction:column; gap:12px; }
.kr-vrow{ display:flex; flex-direction:column; gap:8px; }
.kr-vrow label{ font-weight: 800; color:#8a2a6c; }
.kr-swatch-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.kr-swatch{
  width: 30px; height: 30px; border-radius: 999px;
  border: 2px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  cursor:pointer; position:relative; overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kr-swatch:hover{ transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0,0,0,.10); }
.kr-swatch.is-selected{ border-color: rgba(200,146,20,.95); box-shadow: 0 18px 40px rgba(200,146,20,.20); }
.kr-swatch::after{ content:""; position:absolute; inset:0; border-radius:999px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }

.kr-pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.kr-pill{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(200,146,20,.45);
  background: rgba(255,255,255,.85);
  color: #3b2b2b;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.kr-pill:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(200,146,20,.12); }
.kr-pill.is-selected{ background: linear-gradient(180deg, #ffd88a 0%, #c69114 100%); border-color: rgba(200,146,20,.95); color:#5a0040; }

.kr-variant-note{ font-size: 12px; color: rgba(31,31,31,.62); }
@media (max-width: 1023px){
  header .search-toggle{ display:none !important; }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; box-shadow:none; padding:8px; }

  .nav-overlay{ 
    position: fixed; inset: 0; background: rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; transition: opacity .25s ease;
    z-index: 80;
  }
  body.nav-open .nav-overlay{ opacity: 1; visibility: visible; }

  nav.main-nav{
    position: fixed; top: 74px; right: 0; bottom: 0;
    width: 78vw; max-width: 360px;
    background: var(--pink-50);
    border-left: 2px solid var(--gold-300);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    border-radius: 16px 0 0 16px;
    padding: 16px 18px;
    transform: translateX(100%);
    transition: transform .32s ease;
    z-index: 99;
    overflow-y: auto;
  }
  nav.main-nav a{
    display:block; padding:12px 8px; margin: 2px 0;
    font-weight: 500;
  }
  nav.main-nav a:hover{
    text-decoration: none;
    background: rgba(218,165,32, .10);
    border-radius: 10px;
  }
  nav.main-nav.active{ transform: translateX(0); }

  /* Desktop search hidden on mobile */
  header form.site-search.desktop{ display:none !important; }
  /* Mobile search (if any) spacing */
  .mobile-search{ display:block; margin-top:6px; }
}


/* === Mobile Sidebar Polished (no white strip, hover animations, search bar) === */
@media (max-width: 1023px){
  /* Hide any header search toggle */
  header .search-toggle{ display:none !important; }

  /* Base (closed) state: invisible & non-interactive */
  nav.main-nav{
    position: fixed; top: 74px; right: 0; bottom: 0;
    width: 78vw; max-width: 360px;
    transform: translateX(100%);
    background: transparent; border:0; box-shadow:none;
    padding: 0; margin: 0;
    transition: transform .32s ease, box-shadow .2s ease;
    z-index: 99; pointer-events: none; overflow-y: auto;
  }

  /* Open state */
  nav.main-nav.active{
    transform: translateX(0);
    background: var(--pink-50);
    border-left: 2px solid var(--gold-300);
    box-shadow: 0 14px 40px rgba(0,0,0,.18);
    border-radius: 16px 0 0 16px;
    padding: 16px 18px;
    pointer-events: auto;
    /* keep panel fully within viewport so top items are reachable */
    bottom: 0;
  }

  /* Ensure menu content scrolls (top items won't get hidden) */
  nav.main-nav,
  nav.main-nav.active{
    height: calc(100vh - 74px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Keep menu header visible while scrolling */
  nav.main-nav .nav-head{
    position: sticky;
    top: 0;
    background: var(--pink-50);
    padding: 6px 0 10px;
    z-index: 2;
  }

  /* Overlay */
  .nav-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity:0; visibility:hidden; transition: opacity .25s ease; z-index:80; }
  body.nav-open .nav-overlay{ opacity:1; visibility:visible; }

  /* Search bar inside menu */
  .menu-search{ padding: 6px 4px 14px; }
  .menu-search input{
    width:100%; padding:11px 14px; border-radius: 26px;
    border:2px solid var(--gold-200); outline:none;
    background:#fff; font-size:15px;
  }
  .menu-search input:focus{ border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(218,165,32,.15); }

  /* Links */
  nav.main-nav a{
    display:block; padding:12px 10px; margin: 4px 0; font-weight:600; position:relative;
  }
  nav.main-nav a::after{
    content:""; position:absolute; left:10px; right:auto; bottom:8px;
    height:2px; width:0; background: var(--gold-400); transition: width .25s ease;
  }
  nav.main-nav a:hover{ transform: translateX(2px); }
  nav.main-nav a:hover::after{ width: calc(100% - 20px); }

  /* Auth buttons tidy */
  nav.main-nav .btn{ display:block; width:100%; margin:8px 0; border-radius: 28px; padding:10px 14px; border:2px solid var(--gold-400); background:transparent; color:var(--gold-600); font-weight:700; }
  nav.main-nav .btn:hover{ background:var(--gold-500); color:#fff; }
}


/* === Product image uniform sizing (square, responsive) === */
.products-grid .product-card img,
.product-grid .product-card img,
.grid .product-card img,
.product-card img,
.shop-grid .item img,
.card .product-img img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 12px;
}



/* v3 pin buttons bottom without resizing card */
.product-card{display:flex;flex-direction:column}
.product-card h3{min-height:2.4em;line-height:1.3;margin:.4rem 0}
.product-card .price{margin:.25rem 0 .5rem;font-weight:600}
.product-card .actions{margin-top:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}


/* === Auto fixes added by ChatGPT on 2025-10-02 === */
.shop-grid .card{display:flex;flex-direction:column;min-height:420px}
.shop-grid .card-body{flex:1 1 auto}
.shop-grid .card-actions{margin-top:auto;display:flex;gap:10px;align-items:center}
/* Ensure images don't stretch card height inconsistently */
.shop-grid .card-img img{width:100%;height:220px;object-fit:cover;display:block;border-radius:18px 18px 0 0}
/* Make left filter area sticky so it doesn't scroll out of view */
.filters-col{position:sticky;top:88px;align-self:flex-start}


/* === Requested fixes (2025-10-03) === */

/* 1) MOBILE: remove big top gap on shop page and tighten spacing */
@media (max-width: 768px){
  main#shopMain .content.shop-grid,
  .content.shop-grid{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* compact the top filter block on mobile */
  .top-filters{ margin-top: 8px !important; margin-bottom: 12px !important; }
}


/* =============================================================
   FINAL PATCH v6 (Jan 2026)
   - Guaranteed mobile menu scrolling (independent scroll wrapper)
   - Desktop Login/Signup buttons match reference (outline pills)
   - Add to Cart text clean (single-line, centered)
   ============================================================= */

/* Clean Add-to-Cart button typography everywhere */
.btn-add,
.card-actions .btn-add{
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
  text-transform: none !important;
}

/* Make "Add to Cart" look clean like reference (no cramped lines) */
.card-actions .btn-add{
  font-size: 14px !important;
}

/* Desktop header auth buttons: outline pills like screenshot */
@media (min-width: 1024px){
  header .account-area{
    display: inline-flex !important;
    gap: 18px !important;
    align-items: center !important;
  }
  header .account-area a.btn.mini.outline{
    background: transparent !important;
    border: 2px solid rgba(212,175,55,.85) !important;
    color: #5a2d82 !important;
    padding: 10px 18px !important;
    height: auto !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }
  header .account-area a.btn.mini.outline:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 34px rgba(212,175,55,.16) !important;
    background: rgba(212,175,55,.08) !important;
  }
}

/* Mobile menu: rely on .nav-scroll for scrolling, keep header sticky */
@media (max-width: 1023px){
  /* Prevent the nav itself from fighting scroll */
  #mainNav,
  nav.main-nav{
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #mainNav .nav-head,
  nav.main-nav .nav-head{
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: linear-gradient(180deg, rgba(255, 239, 246, .98), rgba(255, 255, 255, .96)) !important;
  }
  #mainNav .nav-scroll,
  nav.main-nav .nav-scroll{
    flex: 1 1 auto !important;
    min-height: 0 !important; /* critical for flex scroll */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-bottom: 18px !important;
  }
}

/* Global button micro-interactions (fast + clean) */
.btn, button{
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease !important;
}
.btn:hover, button:hover{ transform: translateY(-1px); }

/* 2) MOBILE: fix 'Add to Cart' showing as odd round circle */
.card-actions{ display:flex; gap:10px; align-items:center; }
.card-actions .btn{ flex:1 1 0; width:auto !important; min-height:44px; padding:10px 16px !important; border-radius:28px !important; }
.card-actions .btn-add{ font-weight:600; }
@media (max-width: 768px){
  .card-actions{ padding-bottom: 12px; }
}

/* MOBILE: remove 'View' button completely (Home + Shop) */
@media (max-width: 768px){
  .card-actions a.btn{ display:none !important; }
  .card-actions{ gap: 0 !important; }
  .card-actions .btn-add{ width: 100% !important; }
}

/* 3) DESKTOP: make filter box sticky at the top and style like the reference */
@media (min-width: 992px){
  aside.filters-col .top-filters{
    position: sticky;
    top: 90px; /* below header */
  }
}
/* Stylish filter card */
aside.filters-col .top-filters,
.filters-card{
  background:#ffffff;
  border-radius:20px;
  box-shadow: 0 8px 24px rgba(212,175,55,.12);
  border:1px solid #f4cfe1;
  padding:16px;
}
aside.filters-col .top-filters h3,
.filters-card h3{ margin:0 0 10px; font-weight:700; color:#2b1143; }
aside.filters-col .price-label{ color:#5a2d82; font-weight:700; }
aside.filters-col #catChips .chip{ border:1px solid #d4af37; background:#fff; }
aside.filters-col #catChips .chip.active{ background:#ffdca8; }

/* 4) Keep products aligned right under 'Our Collection' */
.sec-head + .product-grid{ margin-top: 10px; }


/* Mobile gap tighten */
@media (max-width: 520px){
  .container { padding-left: 12px; padding-right: 12px; }
  .product-grid{ gap:14px; }
  .card{ margin:0; }
}


/* === Filter visual polish === */
.sidebar{ background: linear-gradient(180deg, rgba(255,238,245,0.9), #fff); border:1px solid #f4dbe4; }
.filter-block label{ color:#5a2d82; }
.chip{ border:1.5px solid #e8c6cf; background:#fff; transition: all .2s ease; }
.chip:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(212,175,55,.12); }
.chip.active{ background: linear-gradient(180deg, #ffdca8, #f2c56f); color:#4a2a00; border-color:#d4af37; box-shadow: 0 8px 20px rgba(212,175,55,.18); }
.range-val{ color:#5a2d82; }


/* ensure grid sits right under section head on desktop */
@media (min-width: 992px){
  .product-grid{ margin-top: 0; }
}

/* ==== PRO: Account Dropdown + Mobile Sheet Menu (pink+golden) ==== */

/* Dropdown menu polish */
.dropdown .menu,
.user-menu,
.account-menu{
  position:absolute;
  top:100%;
  right:0;
  background:#fff6fa;
  border:1px solid #f4c2d7;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  overflow:hidden; z-index:1100;
  transform-origin: top right;
  opacity:0; transform:scale(.96) translateY(-6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.dropdown.open .menu,
.user-pill.open + .user-menu,
.account-pill.open + .account-menu{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }

.dropdown .menu a, .dropdown .menu button,
.user-menu a, .user-menu button,
.account-menu a, .account-menu button{
  display:block; width:100%; box-sizing:border-box;
  padding:10px 18px; background:transparent; border-radius:0;
  color:#4b2c63; font-weight:500; transition:background .2s ease, transform .15s ease;
}
.dropdown .menu a:hover, .dropdown .menu button:hover,
.user-menu a:hover, .user-menu button:hover,
.account-menu a:hover, .account-menu button:hover{
  background:#ffe6f0; transform:translateX(2px);
}
.dropdown .menu hr, .user-menu hr, .account-menu hr{ border:none; border-top:1px solid #f7c9e2; margin:6px 0; }

/* Mobile sheet menu */
.site-header{ position:sticky; top:0; z-index:1000; }

.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.25);
  backdrop-filter:saturate(120%) blur(2px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.site-header.open + .nav-overlay{ opacity:1; pointer-events:auto; }

nav.main-nav#mainNav{
  position:fixed; left:50%; top:88px; transform:translateX(-50%) translateY(-6px) scale(.98);
  width:min(92vw, 560px);
  background:#fff5f8; border:1px solid rgba(212,175,55,.35); border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
  padding:18px 22px; opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.7,.2,1.1), opacity .22s ease;
}
.site-header.open nav.main-nav#mainNav{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }

nav.main-nav#mainNav a{
  display:flex; align-items:center; justify-content:center;
  padding:14px 10px; margin:8px 0; border-radius:14px;
  font:600 18px/1.2 "Poppins", system-ui; color:#4b2c63;
  transition:background .2s ease, transform .15s ease;
}
nav.main-nav#mainNav a:hover{ background:#ffe6f0; transform:translateY(-1px); }

nav.main-nav#mainNav .cart-link .badge{
  position:static; margin-left:8px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background:#d4af37; color:#fff; font:600 12px/1 "Poppins";
}

nav.main-nav#mainNav .account-area{
  margin-top:10px; padding-top:10px; border-top:1px solid #f4cfe0;
  display:flex; justify-content:center;
}
nav.main-nav#mainNav .account-area .btn.mini{
  background:#fff; border:1px solid #d4af37; color:#4b2c63;
  padding:8px 12px; border-radius:999px; margin:0 6px;
}

/* Desktop fallback */
@media (min-width:1024px){
  .nav-overlay{ display:none !important; }
  nav.main-nav#mainNav{ position:static; transform:none; opacity:1; pointer-events:auto; box-shadow:none; width:auto; padding:0; background:transparent; border:none; }
}


/* ==== PRO v2: Left Off-canvas Mobile Menu + Searchbar ==== */
@media (max-width:1023px){
  nav.main-nav#mainNav{
    left: 14px;
    right: auto;
    width: min(92vw, 560px);
    transform: translateX(calc(-100% - 14px));
    border-radius: 0 18px 18px 0;
  }
  .site-header.open nav.main-nav#mainNav{ transform: translateX(0); }
}
  .nav-overlay{ position:fixed; inset:0; }
  nav.main-nav#mainNav .mobile-searchbar{ margin:2px 0 12px; }
  nav.main-nav#mainNav .mobile-searchbar form{
    display:flex; gap:8px; padding:8px 10px; background:#fff; border:1px solid #f4cfe0; border-radius:12px;
  }
  nav.main-nav#mainNav .mobile-searchbar input[type="search"]{
    flex:1; border:none; outline:none; font:500 15px/1 "Poppins";
  }
  nav.main-nav#mainNav .mobile-searchbar button{
    border:1px solid #d4af37; background:#d4af37; color:#fff; border-radius:10px; padding:8px 12px; font-weight:600;
  }
}
/* Dropdown visibility via .menu.open (matches JS) */
.dropdown .menu{ padding:6px; }
.dropdown .menu.open{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
.dropdown .menu a, .dropdown .menu button{
  display:block; width:100%; box-sizing:border-box;
  padding:10px 14px; margin:6px 4px;
  background:transparent; border-radius:10px;
}
/* hard clamp: no visual overflow */
.dropdown{ position:relative; }
.dropdown .menu{ overflow:hidden; clip-path: inset(0 round 12px); }
.dropdown .menu a:hover, .dropdown .menu button:hover{ background:#ffe6f0; transform:none; }


/* Cart thumbnails */
table .prodcell .prodwrap{ display:flex; align-items:center; gap:10px; }
table .prodcell .thumb{ width:54px; height:54px; object-fit:cover; border-radius:10px; border:1px solid #f0cbd6; background:#fff; }

/* dropdown width lock */
.dropdown .menu{ max-width: 280px; }


/* z-index layering fix: keep sheet above toggle */
@media (max-width:1023px){
  nav.main-nav#mainNav{ z-index: 1200; }
  .nav-overlay{ z-index: 1100; }
  .site-header.open #menuToggle{ opacity:0; pointer-events:none; }
}

/* PRO v3 right inset */
@media (max-width:1023px){
  nav.main-nav#mainNav{
    left: 14px;
    right: auto;
    width: min(92vw, 560px);
    transform: translateX(calc(-100% - 14px));
    border-radius: 0 18px 18px 0;
  }
  .site-header.open nav.main-nav#mainNav{ transform: translateX(0); }
}
}
/* PRO v3 dropdown hover clamp */
.dropdown{ position:relative; }
.dropdown .menu{ overflow:hidden; clip-path: inset(0 round 12px); }
.dropdown .menu a, .dropdown .menu button{ max-width:100%; box-sizing:border-box; margin:6px 6px; border-radius:10px; }
.dropdown .menu a:hover, .dropdown .menu button:hover{ background:#ffe6f0; transform:none !important; }
/* Newsletter alignment fix */
footer .newsletter form,
.newsletter form{
  display:flex; gap:12px; align-items:center; flex-wrap:nowrap;
}
footer .newsletter input[type="email"],
.newsletter input[type="email"],
footer .newsletter input[type="text"],
.newsletter input[type="text"]{ flex:1; min-width:0; }
footer .newsletter button,
.newsletter button{ margin-left:0 !important; flex:0 0 auto; }
@media (max-width: 520px){
  footer .newsletter form, .newsletter form{ flex-wrap:wrap; }
  footer .newsletter button, .newsletter button{ width:100%; }
}

/* PRO v4 right inset + handle */
@media (max-width:1023px){
  nav.main-nav#mainNav{
    left: 14px;
    right: auto;
    width: min(92vw, 560px);
    transform: translateX(calc(-100% - 14px));
    border-radius: 0 18px 18px 0;
  }
  .site-header.open nav.main-nav#mainNav{ transform: translateX(0); }
}
  /* Close handle (arrow) that sits in the open space */
  .nav-handle{
    position: fixed;
    top: 90px;
    left: 8px;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: #d4af37;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    display: none; align-items: center; justify-content: center;
    color:#fff; font-weight:800; font-size:18px; line-height:1;
    z-index: 1250; cursor: pointer;
    transform: translateX(0);
  }
  .site-header.open + .nav-overlay + .nav-handle{ display:flex; }
}
/* Ensure overlay click area covers the gap fully */
.nav-overlay{ position:fixed; inset:0; z-index:1100; }
nav.main-nav#mainNav{ z-index:1200; }
/* Newsletter sizing: big input, small button */
footer .newsletter form, .newsletter form{
  display:flex; gap:12px; align-items:center; flex-wrap:nowrap;
  max-width: 560px;
}
footer .newsletter input[type="email"], .newsletter input[type="email"],
footer .newsletter input[type="text"], .newsletter input[type="text"]{
  flex: 1 1 auto; min-width: 240px; height: 44px;
  padding: 10px 14px; font-size: 15px;
}
footer .newsletter button, .newsletter button{
  height: 44px; padding: 0 16px; font-size: 14px; font-weight:700;
  width: auto !important; /* never stretch full width */
}
@media (max-width: 420px){
  footer .newsletter form, .newsletter form{ flex-wrap:wrap; }
  footer .newsletter button, .newsletter button{ width:auto !important; }
}

/* PRO v5 newsletter robust */
footer .newsletter, .newsletter{
  display:flex; gap:12px; align-items:center; flex-wrap:nowrap; max-width:560px;
}
footer .newsletter input[type="email"], .newsletter input[type="email"],
footer .newsletter input[type="text"], .newsletter input[type="text"]{
  flex:1 1 auto; min-width:220px; height:44px; padding:10px 14px; font-size:15px;
}
footer .newsletter .btn-subscribe, .newsletter .btn-subscribe{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; white-space:nowrap; flex:0 0 auto;
}


/* PRO v6: left sheet close button + newsletter final sizing */
@media (max-width:1023px){
  nav.main-nav#mainNav{ position:fixed; }
  nav.main-nav#mainNav .btn-close-nav{
    position:absolute; top:10px; right:10px;
    width:36px; height:36px; border-radius:999px;
    background:#d4af37; color:#fff; font-weight:800; font-size:20px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    border:none; cursor:pointer;
  }
}
/* Newsletter input big, button compact & always visible */
footer .newsletter, .newsletter{ display:flex; gap:12px; align-items:center; max-width:560px; }
footer .newsletter input[type="email"], .newsletter input[type="email"],
footer .newsletter input[type="text"], .newsletter input[type="text"]{
  flex:1 1 auto; min-width:220px; height:44px; padding:10px 14px; font-size:15px;
}
footer .newsletter .btn-subscribe, .newsletter .btn-subscribe{
  display:inline-flex; align-items:center; justify-content:center;
  position:static !important; height:44px; padding:0 16px; white-space:nowrap; flex:0 0 auto;
}
@media (max-width:520px){
  footer .newsletter, .newsletter{ flex-wrap:wrap; }
  footer .newsletter .btn-subscribe, .newsletter .btn-subscribe{ order:2; }
}


/* PRO v7: Menu scrollable, toggle visible, right-side back button */
@media (max-width:1023px){
  nav.main-nav#mainNav{
    height: calc(100vh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* keep hamburger visible while open */
  .site-header.open #menuToggle{ opacity:1 !important; pointer-events:auto !important; }
}
/* Right-side back handle shown in open area */
.back-handle{
  position: fixed;
  top: 90px;
  right: 10px;
  width: 40px; height: 40px;
  display: none; align-items: center; justify-content: center;
  background: #d4af37; color:#fff; border-radius:999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  z-index: 1250; cursor: pointer; font-weight:800; font-size:20px; line-height:1;
}
.site-header.open + .nav-overlay + .back-handle{ display:flex; }


/* PRO v8: menu not fixed; scrolls with page */
@media (max-width:1023px){
  nav.main-nav#mainNav{
    position: absolute;       /* was fixed */
    left: 14px;
    right: auto;
    top: 88px;                /* below header */
    height: auto;             /* let it size naturally */
    max-height: unset;
    overflow: visible;        /* panel moves with page; no inner scroll */
  }
  /* overlay visual only; don't block scroll */
  .site-header.open + .nav-overlay{
    pointer-events: none;
    opacity: .12;
  }
}


/* === Mobile Offcanvas: make menu scrollable internally === */
.offcanvas{position:fixed;inset:0;pointer-events:none;z-index:9999;}
.offcanvas[aria-hidden="false"]{pointer-events:auto;}
.offcanvas__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s ease;}
.offcanvas[aria-hidden="false"] .offcanvas__backdrop{opacity:1;}
.offcanvas__panel{position:absolute;left:0;top:0;width:86vw;max-width:420px;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#fff6fa;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.15);transform:translateX(-100%);transition:transform .25s ease;padding:18px 16px 28px;}
.offcanvas[aria-hidden="false"] .offcanvas__panel{transform:translateX(0);}
.offcanvas__close{position:sticky;top:6px;float:right;border:0;background:#f3e4ff;padding:8px 10px;border-radius:999px;font-size:16px;line-height:1;}
body.menu-open{overflow:hidden;}
/* Defensive: if any existing menu was fixed and unscrollable, override */
.mobile-menu,.mobile-nav,.menu-drawer,.side-menu{max-height:100dvh!important;overflow-y:auto!important;}



/* === FLOW MODE (menu scrolls with the page; not fixed with header) === */
body[data-menu-mode="flow"] .offcanvas{ position: static !important; inset: auto !important; pointer-events: auto !important; }
body[data-menu-mode="flow"] .offcanvas__backdrop{ display: none !important; }
body[data-menu-mode="flow"] .offcanvas__panel{
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 75vh !important;   /* scroll area inside the sheet */
  overflow-y: auto !important;
  transform: none !important;
  border-radius: 20px !important;
  margin: 10px auto !important;
}
/* Hide panel when closed in flow mode */
body[data-menu-mode="flow"] .offcanvas[aria-hidden="true"] .offcanvas__panel{ display: none !important; }
body[data-menu-mode="flow"] .offcanvas[aria-hidden="false"] .offcanvas__panel{ display: block !important; }



/* === Flow Mode with Blur Overlay & Back Button === */
body[data-menu-mode="flow"] .offcanvas{ position: static !important; inset: auto !important; pointer-events: auto !important; }
body[data-menu-mode="flow"] .offcanvas__backdrop{
  position: fixed !important; inset: 0 !important;
  backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,.18);
  opacity: 0; transition: opacity .25s ease;
}
body[data-menu-mode="flow"] .offcanvas[aria-hidden="false"] .offcanvas__backdrop{ opacity: 1; }
body[data-menu-mode="flow"] .offcanvas__panel{
  position: static !important; z-index: 2;
  width: min(92vw, 460px) !important;
  margin: 12px auto !important;
  border-radius: 20px !important;
  max-height: 76vh !important;
  overflow-y: auto !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
body[data-menu-mode="flow"] .offcanvas__head{
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: rgba(255, 246, 250, .9);
  border-bottom: 1px solid #f0dbe6;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.offcanvas__back{
  appearance: none; border: 1px solid #e9d1a6; background: #fff;
  border-radius: 999px; padding: 8px 12px; font-weight: 600;
  color: #7a5a78; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.offcanvas__title{
  font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: #6b5b73;
}
/* Keep last menu items accessible */
.offcanvas__panel::after{ content: ''; display:block; height: 18px; }



/* === Only-Menu-Scroll Overlay (final) === */
@media (max-width: 1023px){
  body.nav-open{ overflow: hidden !important; height: 100%; touch-action: auto; overscroll-behavior: none; }
  .nav-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.28); backdrop-filter: none; opacity:0; visibility:hidden; transition:.25s ease; z-index: 80; }
  body.nav-open .nav-overlay{ opacity:1; visibility:visible; }
  nav.main-nav{
    position: fixed; top: 74px; right: 0; bottom: 0;
    width: 78vw; max-width: 360px;
    background: var(--pink-50);
    border-left: 2px solid rgba(198,146,20,.25);
    box-shadow: var(--shadow);
    transform: translateX(100%);
    transition: transform .32s ease;
    z-index: 99;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 18px;
    border-radius: 16px 0 0 16px;
  }
  nav.main-nav.active{ transform: translateX(0); }

  /* Sticky head with back button inside panel */
  nav.main-nav .nav-head{ position: sticky; top: 0; z-index: 2; display:flex; align-items:center; gap:10px; padding:10px 12px; margin:-16px -18px 10px; background: rgba(255,246,250,.9); border-bottom:1px solid #f0dbe6; backdrop-filter: none; }
  .nav-head .back-btn{ appearance:none; border:1px solid #e9d1a6; background:#fff; border-radius:999px; padding:8px 12px; font-weight:600; color:#7a5a78; }
}



/* === OVERLAY (final v6): only menu scrolls, panel full-height, higher z-index === */
@media (max-width: 1023px){
  body.nav-open{ overflow:hidden !important; height:100%; touch-action:auto; overscroll-behavior:none; }
  .nav-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.28);
    backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 0; visibility: hidden; transition: opacity .25s ease;
    z-index: 9990;
  }
  body.nav-open .nav-overlay{ opacity:1; visibility:visible; }

  nav.main-nav{
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(82vw, 400px);
    background: var(--pink-50, #fff6fa);
    border-left: 2px solid rgba(198,146,20,.18);
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .32s ease;
    z-index: 10000;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 16px 18px;
    border-radius: 0 0 0 0;
  }
  nav.main-nav.active{ transform: translateX(0); }

  /* Clean sticky header inside panel */
  nav.main-nav .nav-head{
    position: sticky; top: 0; z-index: 2;
    display:flex; align-items:center; gap:10px;
    padding: 10px 6px 10px 6px; margin: 0 0 8px 0;
    background: rgba(255,246,250,.92);
    border-bottom: 1px solid #f0dbe6;
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-head .back-btn{
    appearance:none; border:1px solid #e9d1a6; background:#fff;
    border-radius:999px; padding:8px 12px; font-weight:600; color:#7a5a78;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
  }
  .nav-head .ttl{
    font: 600 16px/1.2 'Poppins',system-ui; color:#6b5b73;
  }
}



/* === Safety rule: if overlay is open, force panel visible === */
@media (max-width: 1023px){
  body.nav-open nav.main-nav{
    transform: translateX(0) !important;
    position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    display: block !important;
    z-index: 10001 !important;
  }
}


/* =============================================================
   2026-01-01 – UI FIX PACK (requested)
   - Product card CTAs: keep Add + View in ONE line (mobile + desktop)
   - Mobile menu: keep on RIGHT, buttons clickable (overlay/z-index/pointer-events)
   - Desktop auth buttons: side-by-side pill buttons (Login / Signup)
   NOTE: Placed at end to override older duplicate rules above.
============================================================= */

/* ---- Product cards: Add + View in one row, compact size ---- */
.card-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap: nowrap !important;
}

.card-actions .btn{
  flex:1 1 0 !important;
  min-width:0 !important;
  width:auto !important;
  border-radius: 999px !important;
}

.card-actions .btn-add{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  height:44px !important;
  padding:8px 10px !important;
  white-space:normal !important;
}
.card-actions .btn-add span{ display:block; }

.card-actions a.btn{
  text-decoration:none !important;
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 12px !important;
  white-space:nowrap !important;
}

/* Mobile: keep row tight so it doesn't stack */
@media (max-width: 520px){
  .card-actions{ gap:8px !important; padding: 10px 10px 12px !important; }
  .card-actions .btn-add{ height:40px !important; font-size:12px !important; }
  .card-actions a.btn{ height:40px !important; font-size:12px !important; }
}

/* ---- Mobile menu: right-side panel + clickable links ---- */
@media (max-width: 1023px){
  /* Fix an older buggy rule that pushed the menu out of view */
  nav.main-nav.active{ bottom: 0 !important; }

  /* Ensure overlay never sits above the panel */
  .nav-overlay{ z-index: 9990 !important; }
  nav.main-nav{ z-index: 10000 !important; pointer-events: none !important; right: 0 !important; left: auto !important; }
  nav.main-nav.active{ pointer-events: auto !important; transform: translateX(0) !important; }

  /* Keep all controls clickable inside menu */
  nav.main-nav *{ pointer-events: auto !important; }

  /* Search bar inside the menu (works with JS moving #mobileSearch into nav) */
  nav.main-nav form.site-search.mobile,
  nav.main-nav #mobileSearch{
    display:block !important;
    margin: 6px 0 12px !important;
  }
  nav.main-nav input[type="search"]{
    width:100% !important;
    padding:12px 14px !important;
    border-radius: 28px !important;
  }
}

/* ---- Desktop auth buttons: side-by-side like reference ---- */
@media (min-width: 1024px){
  .main-nav .account-area{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
  }
  .main-nav .account-area .btn.mini{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:40px !important;
    padding: 0 18px !important;
    margin:0 !important;
    white-space:nowrap !important;
  }
  /* Make Signup look like the golden filled button from theme */
  .main-nav .account-area .btn.mini.outline{
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color:#fff !important;
  }
}


/* =============================================================
   FINAL OVERRIDES (Jan 2026) – requested fixes
   1) Product card CTAs: match HOME style everywhere (Home/Shop, desktop/mobile)
   2) Mobile menu: recreate as RIGHT slide-in panel, fully clickable
   ============================================================= */

/* --- Product cards: HOME-like CTA layout everywhere --- */
.card-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 14px !important;
  padding: 14px 16px 16px !important;
}

/* Add to Cart = premium pill */
.card-actions .btn-add{
  flex: 0 0 auto !important;
  min-width: 140px !important;
  height: 46px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  display:inline-flex !important;
  flex-direction: column !important;
  align-items:center !important;
  justify-content:center !important;
  line-height: 1.05 !important;
}

/* View = clean text button (like Home) */
.card-actions a.btn{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 72px !important;
  height: 46px !important;
  padding: 0 10px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  color: #3b2d4d !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration: none !important;
}
.card-actions a.btn:hover{
  text-decoration: underline !important;
  transform: translateY(-1px) !important;
}

/* Mobile: same layout, just smaller sizes */
@media (max-width: 768px){
  .card-actions{ gap: 10px !important; padding: 10px 12px 12px !important; }
  .card-actions .btn-add{ min-width: 118px !important; height: 40px !important; padding: 8px 12px !important; }
  .card-actions a.btn{ height: 40px !important; min-width: 64px !important; padding: 0 8px !important; font-size: 12px !important; }
  .card-actions .btn-add span{ font-size: 12px !important; }
}


/* --- Mobile menu: RIGHT slide-in panel (fully clickable) --- */
@media (max-width: 1023px){
  /* Overlay */
  #navOverlay, .nav-overlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .22s ease, visibility .22s ease !important;
    z-index: 10000 !important;
    pointer-events: none !important;
  }
  body.nav-open #navOverlay,
  body.nav-open .nav-overlay{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Panel */
  #mainNav, nav.main-nav{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 100dvh !important;
    width: min(86vw, 380px) !important;
    padding: 18px 16px !important;
    background: linear-gradient(180deg, rgba(255,231,244,.98), rgba(255,255,255,.98)) !important;
    border-left: 1px solid rgba(212,175,55,.25) !important;
    box-shadow: -14px 0 40px rgba(0,0,0,.16) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(110%) !important;
    transition: transform .26s ease !important;
    z-index: 10001 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: none !important;
  }
  body.nav-open #mainNav,
  body.nav-open nav.main-nav{
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Menu links (big rounded blocks like your screenshot, but clickable) */
  #mainNav > a,
  nav.main-nav > a{
    display:block !important;
    padding: 14px 14px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 2px solid rgba(212,175,55,.25) !important;
    color: #5a2d82 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  }
  #mainNav > a:hover,
  nav.main-nav > a:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.10) !important;
    border-color: rgba(212,175,55,.55) !important;
  }

  /* Ensure Cart badge stays aligned */
  #mainNav .cart-link, nav.main-nav .cart-link{ display:flex !important; align-items:center !important; justify-content:space-between !important; }

  /* Search inside menu */
  #mainNav form#mobileSearch,
  nav.main-nav form#mobileSearch,
  #mainNav form.mobile-search,
  nav.main-nav form.mobile-search{
    display:block !important;
    margin: 4px 0 10px !important;
  }
}



/* === v8: kill mobile collapse constraints from base CSS when overlay is open === */
@media (max-width: 1023px){
  body.nav-open nav.main-nav{
    max-height: 100dvh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}



/* === v9: put menu above blur overlay on all pages === */

/* === v10: clean offcanvas menu (no blur), professional hover + spacing === */
.offcanvas__backdrop{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.nav-overlay{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
nav.main-nav .nav-head{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

@media (max-width: 768px){
  /* Mobile menu list styling */
  nav.main-nav{ padding:10px 12px !important; }
  nav.main-nav a{ display:flex; align-items:center; justify-content:center; padding:14px 14px; border-radius:14px; margin:8px 8px; border:1px solid rgba(200,146,20,.18); background:rgba(255,255,255,.65); font-weight:800; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
  nav.main-nav a:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(200,146,20,.14); border-color:rgba(200,146,20,.35); background:rgba(255,255,255,.88); }
  nav.main-nav .account-area{ display:flex !important; flex-direction:column; gap:10px; margin:10px 8px 0; }
}

/* Header bottom line fix (soft gradient) */
.site-header{ border-bottom:none !important; box-shadow:0 18px 40px rgba(200,146,20,.08); }
.site-header::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:16px; background:linear-gradient(to bottom, rgba(255,246,250,0), rgba(255,246,250,1)); pointer-events:none; }

/* Desktop: keep Login/Sign Up side-by-side and neat */
@media (min-width: 769px){
  .main-nav{ flex-wrap:nowrap !important; }
  .account-area{ display:flex !important; flex-direction:row !important; gap:10px !important; align-items:center !important; }
  .account-area .btn.mini{ padding:10px 16px !important; border-radius:999px !important; white-space:nowrap; }
}

/* Shop + Home product cards: consistent 2x2 mobile grid + action alignment */
@media (max-width: 768px){
  .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:12px !important; }
  .product-card{ overflow:hidden; }
  .product-card img{ width:100%; height:170px; object-fit:cover; }
  .card-actions, .product-card .actions{ display:flex !important; gap:10px !important; justify-content:space-between !important; align-items:center !important; }
  .card-actions .btn, .product-card .actions .btn{ flex:1; min-width:0; text-align:center; }
}
@media (max-width: 1023px){
  /* Overlay below */
  .nav-overlay{
    z-index: 2147483000 !important;   /* below panel */
    pointer-events: auto;
  }
  /* Panel above everything */
  nav.main-nav,
  body.nav-open nav.main-nav{
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    transform: translateX(0) !important;
    z-index: 2147483646 !important;   /* higher than overlay */
    display: block !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}



/* === v10: hide Back header on desktop; mobile-only UI === */
@media (min-width: 1024px){
  nav.main-nav .nav-head{ display: none !important; }
}



@media (max-width: 1023px){
  nav.main-nav * { pointer-events: auto; } /* ensure controls clickable */
}



/* === v12: nav/overlay not clickable when closed (mobile only) === */
@media (max-width: 1023px){
  .nav-overlay{ pointer-events: none !important; }
  body.nav-open .nav-overlay{ pointer-events: auto !important; }
  nav.main-nav:not(.active){ pointer-events: none !important; }
}



/* === v13 Mobile: nav/overlay fully hidden when closed === */
@media (max-width: 1023px){
  #navOverlay{ display: none; opacity: 0; }
  body.nav-open #navOverlay{ display: block; }
  nav.main-nav:not(.active){
    display: none !important;
    visibility: hidden !important;
    position: static !important;
    transform: translateX(100%) !important;
    width: auto !important; height: auto !important; max-height: 0 !important; overflow: visible !important;
  }
}



/* === v13 Account page responsive === */
@media (max-width: 768px){
  .account-wrap{ margin: 90px auto 60px !important; padding: 0 12px !important; }
  .account-body{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .account-card{ border-radius: 14px !important; }
  .two{ grid-column: auto !important; }
  .account-actions{ flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .row, .form-row{ display: block !important; }
  .row > *, .form-row > *{ width: 100% !important; }
  .flag-input select{ max-width: 40% !important; }
}



/* === v14 Account page: strong mobile responsiveness (<=768px) === */
@media (max-width: 768px){
  .account-wrap{ max-width: 100% !important; margin: 84px auto 60px !important; padding: 0 12px !important; }
  .account-head{ flex-wrap: wrap !important; gap: 8px !important; }
  .account-head h1{ font-size: 18px !important; }
  .account-body{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; padding: 16px !important; }
  .two{ grid-column: auto !important; }
  .account-actions{ display:flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 14px 16px !important; }
  .account-row, .form-row, .row{ display:block !important; }
  .account-row > *, .form-row > *, .row > *{ width: 100% !important; }
  .flag-input{ display:flex !important; gap:8px !important; align-items:center !important; }
  .flag-input select{ max-width: 40% !important; }
}



/* v15: hide mobile-only account links on desktop */
@media (min-width: 1024px){
  nav.main-nav .m-account-links{ display: none !important; }
}


/* === Product card hardening for perfect alignment on all screens === */
.card{display:flex;flex-direction:column;min-height:100%;border-radius:18px;overflow:hidden}
.card-img img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.card-body{flex:1 1 auto;display:flex;flex-direction:column}
.card-actions{margin-top:auto;display:flex;gap:.6rem;align-items:center;justify-content:space-between}
.card-actions .btn{flex:1 1 50%;padding:.7rem 1rem;border-radius:999px;font-weight:600}
.card-actions a.btn{text-align:center;text-decoration:none}

/* Grid uses auto-fit + minmax so tablet/iPad/phones look clean */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px}
@media (min-width:480px){.product-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
@media (min-width:768px){.product-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media (min-width:1024px){.product-grid{grid-template-columns:repeat(3,1fr)}}
/* Home cards: keep CTA row inside card */
.home .product-grid .card{height:100%}


/* Force 2-up cards on phones for Featured Products */
@media (max-width: 768px){
  .home .product-grid,
  .featured .product-grid,
  #featuredGrid.product-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}


/* === CTA row polish: keep text on one line, proper spacing === */
.card-actions{margin-top:auto;display:flex;gap:12px;align-items:center;justify-content:flex-start}
.card-actions .btn{flex:0 0 auto;display:inline-block;white-space:nowrap;padding:10px 14px;border-radius:28px;font-weight:600}
.card-actions .btn-add{min-width:122px} /* prevents Add to Cart from breaking */
.card-actions a.btn{margin-left:auto;text-align:center;text-decoration:none}

/* Tighter circular feel but not oversized */
.card-actions .btn{line-height:1.1}

/* Ensure "View" never wraps/overlaps */
.card-actions a{white-space:nowrap}

/* 2-up mobile grid on Shop too */
@media (max-width: 768px){
  .home .product-grid,
  .featured .product-grid,
  #featuredGrid.product-grid,
  .shop-grid,
  #productGrid.product-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}


/* === CTA v2: compact add button (2-line), 'View' on right === */
.card{overflow:visible}
.card-actions{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:14px;
}
.card-actions .btn{
  display:inline-block;
  font-weight:600;
  line-height:1.1;
  border-radius:999px;
  text-align:center;
}
.card-actions .btn-add{
  width:96px;
  height:48px;
  padding:8px 10px;
  white-space:normal;
  word-break:keep-all;
}
.card-actions a.btn{
  padding:8px 12px;
  white-space:nowrap;
  min-width:auto;
}


/* === Button two-line layout & containment fix (2025-10-08) === */
.card { position: relative; overflow: hidden; }

.card-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:auto;
  padding:.75rem .9rem 1rem;
}

.card-actions .btn-add{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width: 96px;
  height: 48px;
  line-height:1.1;
  padding: 8px 10px;
  white-space: normal;
  text-align: center;
}

.card-actions .btn-add span{ display:block; }

/* Prevent buttons from escaping the card on any zoom/size */
.card, .card * { max-width: 100%; }

/* Mobile & tablet ensure buttons wrap nicely */
@media (max-width: 768px){
  .card-actions{ flex-wrap: wrap; }
}


/* === Alignment polish (2025-10-08, pass 2) === */

/* Keep cards contained and balanced */
.shop-grid .card{
  display:flex;
  flex-direction:column;
  border-radius:18px;
  overflow:hidden;
}
.shop-grid .card-img img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

/* Actions row: centered, not hugging edges */
.shop-grid .card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:.9rem 1.1rem 1.1rem;
}

/* Make both CTAs visually balanced */
.shop-grid .card-actions .btn{
  flex:0 0 auto;
  text-align:center;
}

/* Add-to-Cart two-line layout: "Add to" + "Cart" */
.shop-grid .card-actions .btn-add{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:110px;
  height:52px;
  padding:8px 10px;
  line-height:1.05;
  white-space:normal;
  text-align:center;
}
.shop-grid .card-actions .btn-add span{display:block}

/* Prevent any accidental overflow */
.shop-grid .card *{max-width:100%}

/* Desktop: avoid buttons touching right edge visually */
@media (min-width: 1024px){
  .shop-grid .card-actions{padding:1rem 1.25rem 1.25rem}
}

/* Mobile: stack neatly and center */
@media (max-width: 640px){
  .shop-grid .card-img img{height:220px}
  .shop-grid .card-actions{
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
  }
}


/* === Featured slider (home) – shows 4 per view on desktop, responsive down) === */
.featured-wrap{ position: relative; }
.featured-track{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.featured-track::-webkit-scrollbar{ height:8px }
.featured-track::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 8px }
.featured-card{
  flex: 0 0 calc((100% - 3*20px)/4); /* 4 per view with 20px gaps */
  scroll-snap-align: start;
}
/* Tablet: 3 per */
@media (max-width: 1100px){
  .featured-card{ flex-basis: calc((100% - 2*20px)/3); }
}
/* Large phones / small tablets: 2 per */
@media (max-width: 820px){
  .featured-card{ flex-basis: calc((100% - 1*20px)/2); }
}
/* Phones: 1 per */
@media (max-width: 520px){
  .featured-card{ flex-basis: 100%; }
}

/* Arrows */
.featured-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  border:none; width:42px; height:42px; border-radius:50%;
  background:#fff; box-shadow: var(--shadow); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.featured-arrow:disabled{ opacity:.4; cursor:default }
.featured-arrow.left{ left: -8px; }
.featured-arrow.right{ right: -8px; }

/* Slightly smaller add-to-cart on phones */
@media (max-width: 520px){
  .card-actions .btn-add{
    height: 44px;
    width: 100px;
    padding: 6px 8px;
  }
  .card-actions .btn-add span{ font-size: 12px; }
}


/* === Pass 3 polish (2025-10-08) === */

/* Card actions: center things perfectly on mobile */
@media (max-width: 640px){
  .shop-grid .card-actions{ justify-content:center; gap:10px; flex-wrap:wrap; }
  .card-actions a.btn{ text-align:center; }
}

/* Smaller golden box + text on narrow phones */
@media (max-width: 380px){
  .card-actions .btn-add{
    width: 90px;
    height: 40px;
    padding: 4px 6px;
  }
  .card-actions .btn-add span{ font-size: 11px; line-height: 1.05; }
}

/* Keep "View" centered in its own pill */
.card-actions a.btn{ display:inline-flex; align-items:center; justify-content:center; min-width:86px; }

/* HOME: featured slider visibility + arrows on top */
.featured-wrap{ position:relative; }
.featured-track{ overflow-x:auto; }
.featured-arrow{ z-index: 5; }

/* Mobile Nav search: keep button inside input group */
.mobile-nav .site-search{ position:relative; display:block; }
.mobile-nav .site-search input[type="search"]{ width:100%; padding-right:100px; }
.mobile-nav .site-search .search-btn,
.mobile-nav .site-search button{ 
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  margin:0; 
}

/* Prevent sticky hover indicator on menu on touch */
.mobile-nav a, .mobile-nav button, .mobile-nav .nav-link{
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav a.is-hover, .mobile-nav a:hover{ background: rgba(255, 192, 203, .25); }
.mobile-nav a.active{ background: rgba(255, 192, 203, .35); }


/* === v5: Paged Featured Slider + premium arrows === */

/* Track contains pages */
.featured-track{
  display:flex;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.featured-page{
  flex:0 0 100%;
  padding:0 4px;
  scroll-snap-align:start;
}
/* Page uses grid so layout adapts by width */
.featured-page .product-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4, 1fr);
}
@media (max-width: 1100px){
  .featured-page .product-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 820px){
  .featured-page .product-grid{ grid-template-columns:repeat(2, 1fr); }
}
/* Phones: 2x2 (4 items visible) */
@media (max-width: 520px){
  .featured-page .product-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Cards inside slider pages */
.featured-page .card{ height:100%; display:flex; flex-direction:column; }

/* Arrows - premium golden round buttons */
.featured-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#ffd88a,#c69114);
  color:#5a0040; font-size:22px; font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.15), 0 4px 10px rgba(198,145,20,.35);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:9;
  outline:none;
}
.featured-arrow:hover{ filter:brightness(.98); transform:translateY(-50%) scale(1.03); }
.featured-arrow:active{ transform:translateY(-50%) scale(.98); }
.featured-arrow.left{ left:-12px; }
.featured-arrow.right{ right:-12px; }

/* Make arrows visible but smaller on phones */
@media (max-width: 520px){
  .featured-arrow{ width:42px; height:42px; font-size:20px; }
  .featured-arrow.left{ left:-6px; }
  .featured-arrow.right{ right:-6px; }
}

/* Ensure arrows never hide behind images */
.featured-wrap{ position:relative; z-index:1; }


/* v6: enforce grid columns inside slider pages (avoid global overrides) */
.featured-page > .product-grid{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:20px !important;
}
@media (max-width:1100px){
  .featured-page > .product-grid{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:820px){
  .featured-page > .product-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:520px){
  .featured-page > .product-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

/* === v8 mobile add-to-cart sizing === */
@media (max-width: 520px){
  .card-actions .btn-add{
    height: 46px;
    width: 106px;
    padding: 6px 10px;
  }
  .card-actions .btn-add span{
    font-size: 13px;
    font-weight: 600;
    line-height: 1.05;
  }
  .card-actions{ justify-content:center; gap:12px; }
}

/* v8 cart responsive */
.cart-table .prodwrap{ display:flex; align-items:center; gap:12px; }
.cart-table img.thumb{ width:54px; height:54px; object-fit:cover; border-radius:8px; background:#f4f4f4 }
@media (max-width: 640px){
  .cart-table th:nth-child(3), .cart-table td:nth-child(3){ display:none } /* hide unit price on small */
  .cart-table th:nth-child(5), .cart-table td:nth-child(5){ text-align:right }
  .cart-summary{ gap:12px }
}

/* v10 bump add-to-cart */
@media (max-width: 520px){
  .card-actions .btn-add span{ font-size: 14px; }
}

/* === Mobile: tighten Add to Cart button === */
@media (max-width: 430px){
  .card-actions .btn{ 
    width: 84% !important;
    max-width: 280px;
    margin: 0 auto 8px auto;
    display: block;
  }
  .card-actions .btn-add span{ 
    font-weight: 700 !important;
  }
}

/* === 2025-10-15: Fix Add to Cart golden box hugging edges on mobile === */
@media (max-width: 480px){
  .card-actions .btn{
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto !important;
    border-radius: 16px !important;
  }
  .card-actions .btn-add{
    padding: 8px 12px !important;
    min-width: 124px !important;
  }
  .card-actions .btn + .btn{ margin-left: 10px; }
}



/* === Mobile: tighter golden buttons so they don't touch edges === */
@media (max-width: 480px){
  .card-actions{ gap: 8px !important; }
  .card-actions .btn{
    width: 82% !important;
    margin: 6px auto !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
  }
  .card-actions .btn-add{ font-weight:700 !important; }
}


/* --- Clean mobile CTA buttons + cart responsiveness (stable) --- */
@media (max-width: 480px){
  /* Product cards: keep buttons neat (no edge-touch / no crazy widths) */
  .card-actions{ gap:10px !important; }
  .card-actions .btn,
  .card-actions .btn-add{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:140px !important;
    padding:10px 16px !important;
    border-radius:22px !important;
    font-weight:700 !important;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  }
  .card-actions .btn:active{ transform:scale(.98) !important; }

  /* Cart table -> stacked rows on small screens */
  .cart-table{ display:block !important; width:100% !important; overflow-x:auto !important; }
  .cart-table table{ width:100% !important; border-collapse:collapse !important; }
  .cart-table thead{ display:none !important; }
  .cart-table tbody, .cart-table tr, .cart-table td{ display:block !important; width:100% !important; }
  .cart-table tr{ background:#fff !important; border:1px solid #f6dfe7 !important; border-radius:16px !important; padding:10px !important; margin:10px 0 !important; box-shadow:0 6px 18px rgba(212,175,55,.08) !important; }
  .cart-table td{ border:none !important; padding:8px 6px !important; }
  .cart-table td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:12px;
    color:#777;
    margin-bottom:4px;
  }
  .cart-table .qty-input{ width:78px !important; }

  /* Remove the extra "grey card behind card" effect on cart page mobile.
     The wrapper already contains stacked row cards, so the outer shadow looks like a second grey layer. */
  .cart-table{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
  .cart-table table{ background:transparent !important; }
}

/* Qty stepper (used on cart page, desktop + mobile) */
.qty-stepper{ display:inline-flex; align-items:center; gap:8px; }
.qty-stepper .qty-btn{
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.45);
  background:#fff;
  color:#6b3b55;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.qty-stepper .qty-btn:hover{ box-shadow:0 6px 16px rgba(212,175,55,.14); background:#fff7fb; }
.qty-stepper .qty-btn:active{ transform:scale(.96); }
.qty-stepper .qty-input{
  width:54px;
  height:34px;
  text-align:center;
  border:1px solid #f0d7df;
  border-radius:12px;
  background:#fff;
  font-weight:600;
}

/* Header auth buttons: keep Login + Sign Up side-by-side on desktop */
@media (min-width: 1024px){
  .account-area{ display:flex !important; align-items:center !important; }
  .account-area .auth-links{ display:flex !important; gap:10px !important; align-items:center !important; flex-direction:row !important; }
  .account-area .auth-links a{ white-space:nowrap !important; }
}

/* Make Login button look clean with border, and Sign Up gold */
.auth-links .btn.btn-outline{ border:1px solid rgba(212,175,55,.7) !important; }
.auth-links .btn.btn-outline:hover{ background:#fff7fb !important; box-shadow:0 10px 24px rgba(212,175,55,.14) !important; }

/* Search bar double-glitch protection: show only one search on small screens */
@media (max-width: 768px){
  .site-search.desktop{ display:none !important; }
  .site-search.mobile{ display:block !important; }
  .site-search.mobile:not(.active){ display:none !important; }
}



/* === Premium header blend (remove bottom hard line) === */
.site-header{
  position: sticky !important;
  top: 0;
  z-index: 999;
  background: rgba(255, 246, 248, .72) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 14px 40px rgba(148,87,128,.12) !important;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:22px;
  background: linear-gradient(to bottom, rgba(255,246,248,0), rgba(255,246,248,.92), rgba(255,246,248,1));
  pointer-events:none;
}
.nav-wrap{ position: relative; }

/* Remove any accidental hairline borders/lines near auth buttons */
.site-header *{ -webkit-tap-highlight-color: transparent; }
.auth-area, #authArea, #accountArea{ border:0 !important; }

/* === Account pill + dropdown (restore username menu) === */
.auth-menu{ position: relative; display:flex; align-items:center; }
.auth-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(198,146,20,.35);
  background: rgba(255,255,255,.72);
  backdrop-filter: none; box-shadow: 0 10px 26px rgba(148,87,128,.10);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.auth-pill:hover{ transform: translateY(-1px); box-shadow: 0 16px 38px rgba(148,87,128,.16); border-color: rgba(198,146,20,.6); }
.auth-pill .dot{
  width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--gold));
  box-shadow: 0 0 0 4px rgba(198,146,20,.12);
}
.auth-dropdown{
  position:absolute;
  right:0; top: calc(100% + 10px);
  min-width: 210px;
  padding:10px;
  border-radius:16px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(198,146,20,.25);
  box-shadow: 0 24px 60px rgba(16,12,14,.18);
  opacity:0; transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
}
.auth-dropdown.open{ opacity:1; transform: translateY(0); pointer-events:auto; }
.auth-dropdown a{
  display:flex; align-items:center;
  padding:10px 10px;
  border-radius:12px;
  color: var(--ink);
  font-weight: 600;
  transition: background .16s ease, transform .16s ease;
}
.auth-dropdown a:hover{ background: rgba(255, 219, 227, .55); transform: translateX(2px); }
.auth-dropdown .sep{ height:1px; background: rgba(140,118,128,.25); margin:8px 6px; }

/* === Featured slider: premium arrows + subtle edge fades === */
.featured-wrap{ position: relative; }
.featured-wrap::before,
.featured-wrap::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:42px;
  pointer-events:none;
  z-index:3;
}
.featured-wrap::before{ left:0; background: linear-gradient(to right, var(--pink-50), rgba(255,246,248,0)); }
.featured-wrap::after{ right:0; background: linear-gradient(to left, var(--pink-50), rgba(255,246,248,0)); }

/* === User-requested: remove blur/gradient edges from slider (normal left/right) === */
.featured-wrap::before,
.featured-wrap::after{ display:none !important; }

.featured-arrow{
  width:46px; height:46px;
  border-radius: 999px;
  border: 1px solid rgba(198,146,20,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255, 236, 239, .86));
  box-shadow: 0 18px 40px rgba(16,12,14,.16);
  font-size: 22px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
  z-index: 4;
}
.featured-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 26px 70px rgba(16,12,14,.22);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,219,227,.9));
}
.featured-arrow:active{ transform: translateY(-50%) scale(.98); }
.featured-arrow:disabled{ opacity:.28 !important; }

/* === Cards: upscale hover + image zoom + micro-interactions === */
.card{
  border:1px solid rgba(255,219,227,.9);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(198,146,20,.35);
  box-shadow: 0 22px 60px rgba(148,87,128,.18);
}
.card-img{ overflow:hidden; border-bottom: 1px solid rgba(255,219,227,.7); }
.card-img img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .38s ease;
}
.card:hover .card-img img{ transform: scale(1.08); }

.btn, .btn-gold, .btn-outline, .btn-subscribe{
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

/* Smooth section reveal (lightweight) */
@media (prefers-reduced-motion: no-preference){
  .section{ animation: kcFadeUp .42s ease both; }
  @keyframes kcFadeUp{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }
}

/* Mobile: keep header readable on hero images */
@media (max-width: 768px){
  .site-header{ background: rgba(255,246,248,.82) !important; }
  .site-header::after{ height:18px; }
}


/* =============================
   UI POLISH v5 (Pink + Gold)
   - Header bottom clean
   - Premium auth buttons
   - Hide featured slider scrollbar
   - Mobile menu nicer hover/animation
================================ */

/* Header: glass + clean bottom */
.site-header{
  background: rgba(255,246,248,.78) !important;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(198,146,20,.18) !important;
  box-shadow: 0 14px 40px rgba(148,87,128,.14) !important;
}
.site-header::after{
  content:"";
  display:block;
  height: 10px;
  background: linear-gradient(180deg, rgba(255,246,248,0), rgba(255,246,248,.92));
}

/* Login / Signup buttons: look like real ecommerce */
.account-area{ gap:12px !important; }
.account-area .btn.mini{
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  border: 1.5px solid rgba(198,146,20,.55) !important;
  background: rgba(255,255,255,.92) !important;
  color: #b38310 !important;
  box-shadow: 0 10px 26px rgba(198,146,20,.14);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.account-area .btn.mini:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(198,146,20,.20);
}
.account-area .btn.mini.outline{
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(180deg, #f3d37c, #d4af37 60%, #b78628) !important;
  box-shadow: 0 16px 40px rgba(212,175,55,.26);
}
.account-area .btn.mini.outline:hover{ filter: brightness(.98) saturate(1.05); }

/* Featured slider: remove ugly grey scrollbar */
.featured-track{
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.featured-track::-webkit-scrollbar{ display:none; }

/* Keep featured arrows consistent */
.featured-arrow{
  border: 1px solid rgba(198,146,20,.35) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.10) !important;
}
.featured-arrow:hover{
  background: rgba(255,236,239,.92) !important;
  transform: translateY(-1px);
}

/* Mobile nav: smooth + consistent sizing */
@media (max-width: 1023px){
  nav.main-nav#mainNav{
    border: 1px solid rgba(198,146,20,.18) !important;
    border-radius: 18px !important;
    padding: 14px !important;
  }
  nav.main-nav#mainNav a{
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
  }
  nav.main-nav#mainNav a::after{ display:none !important; }
  nav.main-nav#mainNav a:hover{ background: rgba(255,236,239,.95) !important; }
}

/* Global responsive typography to avoid random sizes */
html{ font-size: 16px; }
@media (max-width: 420px){ html{ font-size: 15px; } }


/* =============================
   UI POLISH v5 (Pink + Gold)
================================ */

.site-header{
  background: rgba(255,246,248,.78) !important;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(198,146,20,.18) !important;
  box-shadow: 0 14px 40px rgba(148,87,128,.14) !important;
}
.site-header .nav-wrap{ height: 84px !important; }
@media (max-width:1023px){ .site-header .nav-wrap{ height: 72px !important; } }

/* Auth buttons: Login outline, Signup gold gradient */
.account-area .btn.mini{
  border-radius: 999px !important;
  padding: 9px 16px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.account-area .btn.mini:not(.outline){
  background: #fff !important;
  border: 1.8px solid rgba(198,146,20,.65) !important;
  color: #b38310 !important;
  box-shadow: 0 10px 22px rgba(198,146,20,.12);
}
.account-area .btn.mini.outline{
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(180deg, #f3d37c, #d4af37 60%, #b78628) !important;
  box-shadow: 0 14px 30px rgba(212,175,55,.26);
}
.account-area .btn.mini:hover{ transform: translateY(-1px); }
.account-area .btn.mini:active{ transform: translateY(0); }

/* DESKTOP ONLY: make Signup same style as Login and keep side-by-side */
@media (min-width: 1024px){
  .site-header .account-area{ display:flex !important; flex-direction:row !important; gap:10px !important; align-items:center !important; flex-wrap: nowrap !important; }
  .site-header .account-area .btn.mini{ white-space: nowrap; }
  .site-header .account-area .btn.mini.outline{
    background: #fff !important;
    border: 1.8px solid rgba(198,146,20,.65) !important;
    color: #b38310 !important;
    box-shadow: 0 10px 22px rgba(198,146,20,.12);
  }
}


/* Hide grey scrollbar on featured slider */
.featured-track{
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}
.featured-track::-webkit-scrollbar{ height:0; width:0; display:none; }

/* Make featured arrows nicer */
.featured-arrow{
  width:44px !important;
  height:44px !important;
  border-radius:999px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(198,146,20,.25) !important;
  box-shadow: 0 14px 30px rgba(148,87,128,.14) !important;
  transition: transform .16s ease, box-shadow .16s ease;
}
.featured-arrow:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px rgba(148,87,128,.18) !important; }

/* Mobile nav: consistent padding + subtle animations */
@media (max-width:1023px){
  #menuToggle{ cursor:pointer; user-select:none; border-radius:12px; padding:8px 10px; }
  #menuToggle:hover{ background: rgba(255,236,239,.75); }
  nav.main-nav#mainNav{
    border-radius: 18px !important;
    overflow: hidden;
  }
  nav.main-nav#mainNav a{
    position: relative;
  }
  nav.main-nav#mainNav a::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:8px;
    height:2px;
    background: linear-gradient(90deg, rgba(255,59,143,.35), rgba(212,175,55,.6));
    opacity:0;
    transform: scaleX(.7);
    transition: opacity .16s ease, transform .16s ease;
    border-radius: 999px;
  }
  nav.main-nav#mainNav a:hover::after{ opacity:1; transform: scaleX(1); }
}

/* Typography: keep sizes consistent on mobile (fix random scaling) */
@media (max-width:768px){
  body{ font-size: 15px; }
  h1{ font-size: 28px; }
  h2{ font-size: 22px; }
  .card-title, .title{ font-size: 15px; }
}

/* Mobile nav: smoother + less "basic" */
@media (max-width:1023px){
  #menuToggle{
    width:42px; height:42px;
    display:grid; place-items:center;
    border-radius:12px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(198,146,20,.22);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    transition: transform .16s ease, box-shadow .16s ease;
  }
  #menuToggle:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }

  /* menu panel */
  nav.main-nav#mainNav{
    border-radius: 20px !important;
    overflow: hidden;
  }
  nav.main-nav#mainNav a{
    position: relative;
  }
  nav.main-nav#mainNav a::after{
    content:"";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(198,146,20,.75), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
    opacity: .9;
  }
  nav.main-nav#mainNav a:hover::after{ transform: scaleX(1); }
}

/* Responsive typography consistency */
@media (max-width:768px){
  h1{ font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.1rem); }
  h2{ font-size: clamp(1.25rem, 1.1rem + 1.2vw, 1.6rem); }
  .hero{ height: auto !important; padding: 56px 14px !important; }
}

/* Responsive consistency (prevents random sizes on mobile) */
:root{
  --kc-h1: clamp(1.7rem, 1.2rem + 2.4vw, 3rem);
  --kc-h2: clamp(1.25rem, 1.0rem + 1.4vw, 2rem);
  --kc-body: clamp(0.95rem, 0.9rem + 0.4vw, 1.05rem);
}
body{ font-size: var(--kc-body); }
.hero-content h1{ font-size: var(--kc-h1) !important; }
.section h2, .sec-head h2{ font-size: var(--kc-h2) !important; }

/* Product cards: tighter, equal height feel */
.card{ border:1px solid rgba(255,59,143,.08); }
.card .card-body{ min-height: 86px; }
.card-actions{ display:grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.card-actions .btn{ width:100%; text-align:center; border-radius: 16px; }


/* Product variations (color/size selectors) */
.pd-variants{ margin: 12px 0 14px; display:grid; gap:12px; padding:12px; border-radius:16px; background: rgba(255,236,239,.65); border:1px solid rgba(198,146,20,.18); }
.pd-variants .v-row{ display:grid; grid-template-columns: 90px 1fr; gap:12px; align-items:center; }
.pd-variants label{ font-weight:700; color:#7a004b; }
.pd-variants select{ width:100%; padding:10px 12px; border-radius:14px; border:1px solid rgba(255,59,143,.18); background:#fff; }
.pd-variants .v-hint{ font-size:12px; color: rgba(74,63,69,.75); }
@media (max-width:520px){ .pd-variants .v-row{ grid-template-columns:1fr; } }



/* ===== KridhaStore v2 - Final polish overrides (2025-12-30) ===== */

/* Header bottom: remove harsh line, use soft gradient fade */
.site-header{
  border-bottom: none !important;
  box-shadow: 0 10px 26px rgba(148,87,128,.10) !important;
  position: sticky !important;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:18px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,246,248,0) 0%, rgba(255,246,248,.95) 55%, rgba(255,246,248,1) 100%);
}

/* Account buttons: consistent, premium */
.account-area{
  display:flex !important;
  align-items:center;
  gap:12px;
  margin-left: 10px;
}
.account-area .btn.mini{
  padding:10px 16px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  min-width: 92px;
  text-align:center;
  font-weight: 700;
  letter-spacing:.2px;
}
.account-area .btn.mini.outline{
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(198,146,20,.40) !important;
  color: var(--gold-700, #a46f10) !important;
}
.account-area .btn.mini:not(.outline){
  background: linear-gradient(180deg, rgba(218,171,66,.95), rgba(198,146,20,.95)) !important;
  color:#fff !important;
  border: 1px solid rgba(198,146,20,.65) !important;
}
.account-area .btn.mini:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(198,146,20,.18);
}

/* Mobile: keep buttons side-by-side inside drawer */
@media (max-width: 768px){
  nav.main-nav .account-area{ display:flex !important; gap:10px; }
  nav.main-nav .account-area .btn{ width: calc(50% - 5px) !important; margin: 0 !important; }
}

/* Premium nav open/close animation + overlay */
nav.main-nav{
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
  will-change: transform;
}
nav.main-nav a{
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
body.nav-open nav.main-nav a{
  animation: kcNavItem .36s ease both;
}
body.nav-open nav.main-nav a:nth-child(1){ animation-delay: .02s; }
body.nav-open nav.main-nav a:nth-child(2){ animation-delay: .04s; }
body.nav-open nav.main-nav a:nth-child(3){ animation-delay: .06s; }
body.nav-open nav.main-nav a:nth-child(4){ animation-delay: .08s; }
body.nav-open nav.main-nav a:nth-child(5){ animation-delay: .10s; }
@keyframes kcNavItem{
  from{ opacity:0; transform: translateX(-10px); }
  to{ opacity:1; transform: translateX(0); }
}

/* === Better hamburger alignment (mobile) === */
#menuToggle.menu-toggle{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid rgba(198,146,20,.45);
  background:rgba(255,255,255,.65);
  box-shadow:0 10px 24px rgba(148,87,128,.12);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#menuToggle.menu-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:rgba(198,146,20,.95);
  border-radius:2px;
  margin:3px 0;
  transition:transform .2s ease, opacity .2s ease;
}
#menuToggle.menu-toggle{ flex-direction:column; gap:0; }
body.nav-open #menuToggle.menu-toggle span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
body.nav-open #menuToggle.menu-toggle span:nth-child(2){ opacity:0; }
body.nav-open #menuToggle.menu-toggle span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Fix hero empty space on some screens */
.hero{ min-height: 520px; }
@media (max-width: 768px){
  .hero{ min-height: 420px; }
}

/* =============================
   v21 LAST-WINS PATCH (must be last)
   ============================= */

/* Desktop: never show mobile toggles */
@media (min-width: 1024px){
  #menuToggle, #searchToggle, .menu-toggle, .search-toggle{ display: none !important; }
  .mobile-search{ display:none !important; }
}

/* Mobile products: always visible and aligned (Home + Shop) */
@media (max-width: 768px){
  .featured-track, .featured-page{ overflow: visible !important; }
  .featured-page{ padding: 0 !important; }
  .featured-page .product-grid,
  #featuredGrid.product-grid,
  #productGrid.product-grid,
  .shop-grid,
  .home .product-grid{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .card{ border-radius: 18px !important; }
  .card-img{ width:100% !important; }
  .card-img img{ width:100% !important; height:auto !important; aspect-ratio: 1/1 !important; object-fit: cover !important; display:block !important; }
  .card-title{ font-size: 14px !important; line-height: 1.25 !important; }
  .card-price{ font-size: 14px !important; }
  .card-actions{ padding: 10px 12px 14px !important; }
}

@media (max-width: 380px){
  .featured-page .product-grid,
  #featuredGrid.product-grid,
  #productGrid.product-grid,
  .shop-grid,
  .home .product-grid{ grid-template-columns: 1fr !important; }
}

/* Variations: swatches/pills */
.variant-group{ margin: 10px 0 !important; }
.variant-label{ font-weight: 800 !important; color:#7a004b !important; display:block !important; margin-bottom: 8px !important; }
.swatch-row{ display:flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.swatch{ width: 34px !important; height: 34px !important; border-radius: 999px !important; border: 2px solid rgba(0,0,0,.12) !important; box-shadow: 0 10px 22px rgba(198,146,20,.10) !important; cursor:pointer !important; position:relative !important; }
.swatch.is-selected{ outline: 3px solid rgba(198,146,20,.65) !important; border-color: rgba(198,146,20,.65) !important; }
.swatch[aria-disabled="true"]{ opacity:.45 !important; cursor:not-allowed !important; }
.pill-row{ display:flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.pill{ padding: 10px 14px !important; border-radius: 999px !important; border: 1.5px solid rgba(198,146,20,.35) !important; background: rgba(255,255,255,.7) !important; font-weight: 700 !important; cursor:pointer !important; }
.pill.is-selected{ background: linear-gradient(180deg, rgba(218,171,66,.95), rgba(198,146,20,.95)) !important; color:#fff !important; border-color: rgba(198,146,20,.75) !important; }

/* v2 variant class aliases used by assets/js/product.js */
.pd-variant-group{ margin: 10px 0 !important; }
.pd-variant-label{ font-weight: 800 !important; color:#7a004b !important; display:block !important; margin-bottom: 8px !important; }
.opt-grid{ display:flex !important; flex-wrap: wrap !important; gap: 10px !important; }
/* (alias styles duplicated below; no CSS modules) */
.opt-color{ width: 34px !important; height: 34px !important; border-radius: 999px !important; border: 2px solid rgba(0,0,0,.12) !important; box-shadow: 0 10px 22px rgba(198,146,20,.10) !important; cursor:pointer !important; position:relative !important; }
.opt-color.is-selected{ outline: 3px solid rgba(198,146,20,.65) !important; border-color: rgba(198,146,20,.65) !important; }
.opt-pill{ padding: 10px 14px !important; border-radius: 999px !important; border: 1.5px solid rgba(198,146,20,.35) !important; background: rgba(255,255,255,.7) !important; font-weight: 700 !important; cursor:pointer !important; }
.opt-pill.is-selected{ background: linear-gradient(180deg, rgba(218,171,66,.95), rgba(198,146,20,.95)) !important; color:#fff !important; border-color: rgba(198,146,20,.75) !important; }

/* Header account buttons: always side-by-side on desktop */
.account-area{ flex-wrap: nowrap !important; }
.account-area .btn{ white-space: nowrap !important; }

/* =============================
   v5 Requested fixes
   - Login/Signup always small + clean + side-by-side
   - Remove pink/blur gradients from header bottom and slider edges
   ============================= */

/* Header: remove bottom gradient/line effect (keep solid themed background) */
.site-header{
  background: #ffeef5 !important; /* same pink theme, no transparent blend line */
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Ensure auth buttons never stack (desktop + mobile) */
.account-area{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
.account-area .btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Remove slider edge blur/fade (user requested normal left/right) */
.featured-wrap::before,
.featured-wrap::after{
  display: none !important;
  content: none !important;
}

/* Keep menu toggle as old ☰ button (mobile only) */
@media (max-width: 1023px){
  #menuToggle{
    line-height: 1 !important;
    font-size: 22px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(198,146,20,.40) !important;
    background: rgba(255,255,255,.80) !important;
  }
}

/* Desktop: hide mobile toggles (force) */
@media (min-width: 992px){
  #menuToggle, #searchToggle, #mobileSearch,
  .menu-toggle, .search-toggle, .mobile-search{ display:none !important; }
}

/* Desktop: auth buttons always inline like reference */
.account-area{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.account-area .btn.mini{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  min-height:40px !important;
}

/* Mobile: Shop + Home product grids are 2x2 (force display grid too) */
@media (max-width: 768px){
  #productGrid.product-grid,
  .product-grid,
  .home .product-grid{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Home featured: remove horizontal slider; show normal grid */
  .featured-arrow{ display:none !important; }
  .featured-wrap{ padding: 0 !important; }
  .featured-track{
    display:block !important;
    overflow: visible !important;
  }
  .featured-page{
    width:auto !important;
    flex:none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .featured-page .product-grid{ margin-top: 10px !important; }

  /* Shop: keep layout stacked, but grid inside should be 2 columns */
  .shop-grid{ display:block !important; }
}

/* Mobile offcanvas menu redesign */
@media (max-width: 1023px){
  nav.main-nav#mainNav{
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    width: min(360px, calc(100vw - 24px)) !important;
    background: rgba(255,247,251,.96) !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(198,146,20,.22) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.16) !important;
    padding: 14px !important;
    transform: translateX(120%) !important;
    transition: transform .28s ease, opacity .28s ease !important;
    opacity: 0 !important;
    display:flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 9999 !important;
  }
  body.nav-open nav.main-nav#mainNav,
  nav.main-nav#mainNav.active{
    transform: translateX(0) !important;
    opacity: 1 !important;
  }

  /* Search inside menu */
  nav.main-nav#mainNav form.mobile-search{ margin: 0 0 8px !important; }
  nav.main-nav#mainNav form.mobile-search input{
    width: 100% !important;
    border-radius: 999px !important;
    padding: 12px 14px !important;
    border: 1.5px solid rgba(198,146,20,.25) !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(198,146,20,.10) !important;
  }

  /* Menu links as pro buttons */
  nav.main-nav#mainNav > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding: 14px 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(198,146,20,.20) !important;
    background: rgba(255,255,255,.72) !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  }
  nav.main-nav#mainNav > a:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 32px rgba(198,146,20,.14) !important;
    border-color: rgba(198,146,20,.45) !important;
  }
  nav.main-nav#mainNav .cart-link{ justify-content: space-between !important; }

  /* Auth area inside menu */
  nav.main-nav#mainNav .account-area{
    margin-top: 6px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(198,146,20,.18) !important;
    justify-content: center !important;
  }
  nav.main-nav#mainNav .account-area .btn.mini{ flex:1 1 auto !important; }
}

/* ==============================
   FINAL OVERRIDES (do not remove)
   Fixes reported:
   - Mobile menu links not working
   - Menu alignment + search bar
   - Home/Shop products 2x2 on mobile
   - Add-to-Cart button stays inside the card
============================== */

/* 1) Ensure menu is clickable whenever it is visible */
@media (max-width: 1023px){
  body.nav-open nav.main-nav#mainNav,
  header.site-header.open nav.main-nav#mainNav,
  nav.main-nav#mainNav.active{
    pointer-events: auto !important;
  }
}

/* 2) Menu button alignment: left aligned, not centered */
@media (max-width: 1023px){
  nav.main-nav#mainNav > a{
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  nav.main-nav#mainNav .cart-link{ justify-content: space-between !important; }

  /* Keep search at top inside panel */
  nav.main-nav#mainNav form.mobile-search{ order: -10 !important; }

  /* Login/Signup: separate style + aligned row */
  nav.main-nav#mainNav .account-area{
    display:flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: space-between !important;
    margin-top: auto !important; /* pushes to bottom */
    padding-top: 14px !important;
  }
  nav.main-nav#mainNav .account-area .btn.mini{
    flex: 1 1 0 !important;
    border-radius: 999px !important;
    padding: 12px 14px !important;
  }
}

/* 3) Force 2x2 products on mobile everywhere (Home + Shop) */
@media (max-width: 768px){
  .product-grid,
  #productGrid.product-grid,
  .featured-page .product-grid,
  main#shopMain .product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* 4) Add-to-Cart containment + sizing */
@media (max-width: 768px){
  .card{ display:flex !important; flex-direction:column !important; overflow:hidden !important; }
  .card-body{ padding-bottom: 6px !important; }
  .card-actions{
    margin-top: auto !important;
    padding: 12px 12px 14px !important;
    display:flex !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .card-actions .btn{ flex: 1 1 0 !important; min-width: 0 !important; }
  .card-actions .btn-add{ width: auto !important; min-height: 46px !important; }
  .card-actions a.btn{ width: auto !important; }
}

/* ==============================
   FINAL OVERRIDES (do not remove)
   Fixes reported:
   - Mobile menu links not working
   - Menu alignment + search bar
   - Home/Shop products 2x2 on mobile
   - Add-to-Cart button stays inside the card
============================== */

/* 1) Ensure menu is clickable whenever it is visible */
@media (max-width: 1023px){
  body.nav-open nav.main-nav#mainNav,
  header.site-header.open nav.main-nav#mainNav{
    pointer-events: auto !important;
  }
  /* Some older rules disabled clicks unless .active is present */
  nav.main-nav#mainNav{ pointer-events:auto !important; }
}

/* 2) Right-side menu layout + LEFT aligned buttons (as requested) */
@media (max-width: 1023px){
  nav.main-nav#mainNav{ align-items: stretch !important; }
  nav.main-nav#mainNav > a{
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  nav.main-nav#mainNav .cart-link{ justify-content: space-between !important; }

  /* Put auth buttons in a separate row (not mixed with nav buttons) */
  nav.main-nav#mainNav .account-area{
    display:flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  nav.main-nav#mainNav .account-area .btn.mini{
    flex: 1 1 0 !important;
    min-height: 44px !important;
    border-radius: 999px !important;
  }

  /* Search bar always on TOP inside menu */
  nav.main-nav#mainNav form.mobile-search{ order: -1 !important; }
}

/* 3) Force 2x2 product grids on mobile (home + shop) */
@media (max-width: 768px){
  .product-grid,
  #productGrid.product-grid,
  .featured-page .product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* 4) Add-to-Cart alignment + containment */
@media (max-width: 768px){
  .card{ overflow: hidden !important; }
  .card-actions{
    display:flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 12px 14px 14px !important;
    margin-top: auto !important;
  }
  .card-actions .btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 46px !important;
  }
  .card-actions .btn-add{
    width: auto !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
  }
  .card-actions a.btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* ==============================
   FINAL OVERRIDES (do not remove)
============================== */

/* 1) Make sure menu links are always clickable on mobile */
@media (max-width: 1023px){
  body.nav-open nav.main-nav#mainNav,
  header.site-header.open nav.main-nav#mainNav,
  nav.main-nav#mainNav.active{
    pointer-events: auto !important;
  }

  /* Left align menu buttons (not centered) */
  nav.main-nav#mainNav > a{ justify-content: flex-start !important; }
  nav.main-nav#mainNav .cart-link{ justify-content: space-between !important; }

  /* Put Login/Signup as a separate bottom row inside menu */
  nav.main-nav#mainNav .account-area{
    display:flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: space-between !important;
    margin-top: auto !important;
  }
  nav.main-nav#mainNav .account-area .btn.mini{
    flex: 1 1 0 !important;
    justify-content: center !important;
  }
}

/* 2) Force Home + Shop products to show 2x2 on mobile (even if earlier rules set 1 column) */
@media (max-width: 768px){
  .featured-page .product-grid,
  #productGrid.product-grid,
  .product-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* 3) Add-to-Cart button must never escape the product card */
@media (max-width: 768px){
  .card{ overflow: hidden !important; }
  .card-actions{
    flex-wrap: nowrap !important;
    padding: 12px 12px 14px !important;
    gap: 10px !important;
  }
  .card-actions .btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .card-actions .btn-add{
    width: auto !important;
    height: auto !important;
    min-height: 46px !important;
  }
}


/* =============================================================
   2026-01-01 – Requested fixes
   - Product card CTAs in ONE ROW (Add + View), smaller and aligned
   - Mobile menu: RIGHT side panel, clickable links, working search
   - Desktop auth buttons: remove stacked look → side-by-side pills
   Notes: Rules are intentionally placed at the bottom to override
   earlier experimental blocks in this file.
   ============================================================= */

/* --- Product cards: keep CTAs in 1 line (Home + Shop) --- */
@media (max-width: 768px){
  .product-grid .card-actions,
  .shop-grid .card-actions,
  #productGrid .card-actions,
  #featuredTrack .card-actions{
    display:flex !important;
    flex-wrap: nowrap !important;
    align-items:center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 10px 12px !important;
  }

  .product-grid .card-actions .btn,
  .shop-grid .card-actions .btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }

  /* Compact two-line "Add to / Cart" */
  .product-grid .card-actions .btn-add,
  .shop-grid .card-actions .btn-add{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    line-height: 1.05 !important;
    height: 42px !important;
  }
  .product-grid .card-actions .btn-add span,
  .shop-grid .card-actions .btn-add span{ display:block !important; }
}

@media (max-width: 420px){
  .product-grid .card-actions .btn,
  .shop-grid .card-actions .btn{ height: 40px !important; font-size: 11.5px !important; }
}


/* --- Mobile menu: ensure panel is on TOP and clickable --- */
@media (max-width: 1023px){
  /* Some older blocks set crazy bottom:-100vh; force a sane layout */
  body.nav-open nav.main-nav.active,
  nav.main-nav.active{
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    pointer-events: auto !important;
  }

  /* Overlay must be BELOW the panel, and never cover it */
  .nav-overlay{ z-index: 9990 !important; }
  nav.main-nav{ z-index: 10000 !important; }

  /* Links & buttons must receive clicks */
  nav.main-nav, nav.main-nav *{ pointer-events: auto !important; }

  /* Mobile search bar inside panel (moved by JS) */
  nav.main-nav form#mobileSearch,
  nav.main-nav form.mobile-search{
    display:block !important;
    margin: 6px 0 14px !important;
  }
  nav.main-nav form#mobileSearch input,
  nav.main-nav form.mobile-search input{
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(212,175,55,.35) !important;
    background: #fff !important;
  }
}


/* --- Desktop: login/signup should be SIDE-BY-SIDE (not stacked) --- */
@media (min-width: 1024px){
  .main-nav .account-area{
    display:flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    align-items:center !important;
  }

  /* Undo mobile block styles that sometimes leak */
  .main-nav .account-area .btn{
    width: auto !important;
    margin: 0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }

  /* Make both look like clean pills (pink+gold theme) */
  .main-nav .account-area .btn.mini{
    background: #fff !important;
    border: 2px solid rgba(212,175,55,.85) !important;
    color: #5a2d82 !important;
    box-shadow: 0 8px 18px rgba(212,175,55,.12) !important;
  }
  .main-nav .account-area .btn.mini:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 26px rgba(212,175,55,.18) !important;
  }
  .main-nav .account-area .btn.mini.outline{
    background: linear-gradient(135deg, rgba(255,231,244,.9), rgba(255,255,255,.95)) !important;
  }
}


/* =============================================================
   FINAL OVERRIDES (Jan 2026) – Requested by user
   ============================================================= */

/* --- 1) Product cards: HOME-style actions everywhere (desktop + mobile) --- */
/* Desktop/tablet: pill Add-to-Cart, simple View text, always 1 row */
.card-actions{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.card-actions .btn-add{
  flex: 0 0 auto !important;
  min-width: 140px !important;
  height: 46px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  line-height: 1.05 !important;
  box-shadow: 0 10px 24px rgba(212,175,55,.14) !important;
}

/* Keep "Add to Cart" readable (no circle) */
.card-actions .btn-add span{ display:block !important; }

/* View: text-style like HOME */
.card-actions a.btn{
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 6px !important;
  height: 46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight: 700 !important;
  color: #3b2d4d !important;
  text-decoration: none !important;
  margin-left: auto !important;
}
.card-actions a.btn:hover{ text-decoration: underline !important; transform: translateY(-1px) !important; }

/* Mobile: same 1-row layout but smaller */
@media (max-width: 768px){
  .product-grid .card-actions,
  .shop-grid .card-actions,
  #productGrid .card-actions,
  #featuredTrack .card-actions{
    gap: 10px !important;
    padding: 10px 10px 12px !important;
  }
  .product-grid .card-actions .btn-add,
  .shop-grid .card-actions .btn-add{
    min-width: 108px !important;
    height: 42px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .product-grid .card-actions a.btn,
  .shop-grid .card-actions a.btn{
    height: 42px !important;
    font-size: 12px !important;
  }
}


/* --- 2) Mobile menu: recreate as RIGHT slide-in panel (clickable) --- */
@media (max-width: 1023px){
  /* Overlay behind panel */
  #navOverlay,
  .nav-overlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .25s ease, visibility .25s ease !important;
    z-index: 10000 !important;
    display: block !important;
  }
  body.nav-open #navOverlay,
  body.nav-open .nav-overlay{ opacity: 1 !important; visibility: visible !important; }

  /* Panel */
  #mainNav,
  nav.main-nav{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    height: 100dvh !important;
    width: min(86vw, 380px) !important;
    transform: translateX(110%) !important;
    transition: transform .28s ease !important;
    z-index: 10001 !important;
    padding: 16px 14px 18px !important;
    background: linear-gradient(180deg, rgba(255,244,250,.98), rgba(255,255,255,.98)) !important;
    border-left: 2px solid rgba(212,175,55,.22) !important;
    box-shadow: -18px 0 50px rgba(0,0,0,.16) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: auto !important;
  }
  body.nav-open #mainNav,
  body.nav-open nav.main-nav{ transform: translateX(0) !important; }
  nav.main-nav.active{ transform: translateX(0) !important; }

  /* Links as premium blocks */
  #mainNav > a,
  nav.main-nav > a{
    display:block !important;
    padding: 14px 14px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1.5px solid rgba(212,175,55,.22) !important;
    box-shadow: 0 10px 24px rgba(212,175,55,.10) !important;
    font-weight: 800 !important;
    color: #5a2d82 !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  }
  #mainNav > a:hover,
  nav.main-nav > a:hover{ transform: translateY(-1px) !important; box-shadow: 0 14px 30px rgba(212,175,55,.14) !important; border-color: rgba(212,175,55,.35) !important; }

  /* Cart badge inside */
  nav.main-nav .badge{ margin-left: 8px !important; }

  /* Search inside panel should be visible and styled */
  nav.main-nav form#mobileSearch,
  nav.main-nav form.mobile-search{
    display:block !important;
    margin: 6px 0 12px !important;
  }
  nav.main-nav form#mobileSearch input,
  nav.main-nav form.mobile-search input{
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(212,175,55,.28) !important;
    background: #fff !important;
  }
}



/* =============================================================
   Mobile menu (pro) – top bar + search button, no blur overlay
   ============================================================= */
@media (max-width: 1023px){
  /* Ensure panel is ABOVE overlay (prevents blurred menu) */
  #navOverlay,.nav-overlay{ z-index: 9998 !important; }
  #mainNav,nav.main-nav{ z-index: 9999 !important; }

  /* Header inside off-canvas */
  #mainNav .nav-head, nav.main-nav .nav-head{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding: 6px 2px 10px !important;
    border-bottom: 1px solid rgba(212,175,55,.22) !important;
    margin-bottom: 10px !important;
  }
  #mainNav .nav-back, nav.main-nav .nav-back{
    border:1px solid rgba(140,110,170,.35) !important;
    background: rgba(255,255,255,.8) !important;
    color:#4a2b66 !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    font-weight: 700 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    cursor:pointer !important;
    user-select:none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  }
  #mainNav .nav-back:active, nav.main-nav .nav-back:active{ transform: scale(.98) !important; }
  #mainNav .nav-title, nav.main-nav .nav-title{
    font-size: 18px !important;
    font-weight: 800 !important;
    color:#3a2350 !important;
  }

  /* Search inside menu (with button) */
  #mainNav form.site-search, nav.main-nav form.site-search{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding: 10px !important;
    border:1px solid rgba(212,175,55,.22) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  }
  #mainNav form.site-search input[type="search"], nav.main-nav form.site-search input[type="search"]{
    flex:1 !important;
    width:100% !important;
    border:0 !important;
    outline:0 !important;
    background: transparent !important;
    padding: 10px 10px !important;
    font-size: 14px !important;
  }
  #mainNav form.site-search button, nav.main-nav form.site-search button{
    border:0 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, #d4af37, #f2d77e) !important;
    color:#fff !important;
    font-weight: 800 !important;
    cursor:pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(212,175,55,.25) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }
  #mainNav form.site-search button:active, nav.main-nav form.site-search button:active{ transform: scale(.98) !important; }

  /* Menu links – center like pro e-com */
  #mainNav > a, nav.main-nav > a{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    color:#3a2350 !important;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
  }
  #mainNav > a:hover, nav.main-nav > a:hover{
    background: rgba(212,175,55,.10) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
    transform: translateY(-1px) !important;
  }
  #mainNav > a:active, nav.main-nav > a:active{ transform: translateY(0) scale(.99) !important; }

  /* Login/Signup pills */
  #mainNav .account-area, nav.main-nav .account-area{
    display:flex !important;
    gap: 12px !important;
    justify-content:center !important;
    padding-top: 8px !important;
  }
  #mainNav .account-area .btn, nav.main-nav .account-area .btn{
    flex: 1 1 0 !important;
    max-width: 160px !important;
    border-radius: 999px !important;
    padding: 10px 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }
}

/* =============================================================
   Product cards – show Add to Cart + View in one line on mobile
   ============================================================= */
@media (max-width: 768px){
  .card .card-actions{
    display:flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .card .card-actions .btn,
  .card .card-actions a.btn{
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 10px !important;
    border-radius: 14px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .card .card-actions .btn-add{
    min-width: 0 !important;
    font-size: 13px !important;
  }
}


/* === MOBILE MENU (copied from reference zip) === */
.offcanvas{position:fixed;inset:0;pointer-events:none;z-index:9999;}
.offcanvas[aria-hidden="false"]{pointer-events:auto;}
.offcanvas__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s ease;}
.offcanvas[aria-hidden="false"] .offcanvas__backdrop{opacity:1;}
.offcanvas__panel{position:absolute;left:0;top:0;width:86vw;max-width:420px;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#fff6fa;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.15);transform:translateX(-100%);transition:transform .25s ease;padding:18px 16px 28px;}
.offcanvas[aria-hidden="false"] .offcanvas__panel{transform:translateX(0);}
.offcanvas__close{position:sticky;top:6px;float:right;border:0;background:#f3e4ff;padding:8px 10px;border-radius:999px;font-size:16px;line-height:1;}
body.menu-open{overflow:hidden;}

body[data-menu-mode="flow"] .offcanvas{ position: static !important; inset: auto !important; pointer-events: auto !important; }
body[data-menu-mode="flow"] .offcanvas__backdrop{ display: none !important; }
body[data-menu-mode="flow"] .offcanvas__panel{
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 75vh !important;   /* scroll area inside the sheet */
  overflow-y: auto !important;
  transform: none !important;
  border-radius: 20px !important;
  margin: 10px auto !important;
}
/* Hide panel when closed in flow mode */
body[data-menu-mode="flow"] .offcanvas[aria-hidden="true"] .offcanvas__panel{ display: none !important; }
body[data-menu-mode="flow"] .offcanvas[aria-hidden="false"] .offcanvas__panel{ display: block !important; }




/* === END MOBILE MENU COPY === */

/* ==============================
   FINAL OVERRIDES (2026-01-01)
   - Mobile menu scroll fix (no touch-action block)
   - Mobile: remove View everywhere (wins over old experiments)
   - Desktop: Login + Sign Up side-by-side
================================ */

/* 1) Mobile menu scroll: allow pan inside menu while keeping background locked */
@media (max-width: 1023px){
  body.nav-open{ touch-action: auto !important; }
  body.nav-open #mainNav,
  body.nav-open nav.main-nav{ touch-action: pan-y !important; overscroll-behavior: contain !important; }
}

/* 2) MOBILE: kill View button completely (Home + Shop) — strongest rule */
@media (max-width: 768px){
  .card-actions > a.btn,
  .card-actions a.btn,
  .product-card .actions a,
  .product-card .actions a.btn,
  .product-card .actions .btn.view,
  a.btn.view,
  a.view{ display: none !important; }

  /* make Add button full width after hiding View */
  .card-actions{ gap:0 !important; }
  .card-actions .btn-add{ width:100% !important; flex: 1 1 100% !important; }
}

/* 3) DESKTOP: keep Login + Sign Up in one row, same style */
@media (min-width: 1024px){
  nav.main-nav .account-area{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px !important;
    margin-left: 8px !important;
  }
  nav.main-nav .account-area .btn{
    width:auto !important;
    height:40px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight: 700 !important;
  }
}


/* === Desktop Auth Buttons (Login/Signup) === */
@media (min-width: 769px){
  .site-header .account-area,
  header.site-header .account-area{
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-left: 10px !important;
  }
  .site-header .account-area .btn.mini,
  header.site-header .account-area .btn.mini{
    background: transparent !important;
    color: #4b2a73 !important;
    border: 2px solid rgba(212,175,55,.9) !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
  }
  .site-header .account-area .btn.mini:hover,
  header.site-header .account-area .btn.mini:hover{
    transform: translateY(-1px) !important;
    background: rgba(212,175,55,.10) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.06) !important;
  }
}


/* === FINAL PATCH v6 (menu scroll + clean CTAs) === */
@media (max-width: 1023px){
  /* Make the nav a column shell and let the inner .nav-scroll handle scrolling */
  body.nav-open #mainNav,
  body.nav-open nav.main-nav{
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #mainNav .nav-scroll,
  nav.main-nav .nav-scroll{
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-bottom: 24px !important;
  }
}

/* Clean Add to Cart text like reference (single line, centered) */
.card-actions .btn-add{
  white-space: nowrap !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
}


/* =============================================================
   2026-01-01 – NAV CLEANUP (mobile only) + DESKTOP RESTORE
   Fixes:
   - Desktop menu got ruined by mobile offcanvas rules
   - Back button not styled / clickable due to selector mismatch
   - Add hover + transition polish
============================================================= */

/* Desktop: force the header/nav back to normal (no offcanvas) */
@media (min-width: 1024px){
  body.nav-open{ overflow: auto !important; height: auto !important; }
  .nav-overlay{ display:none !important; opacity:0 !important; visibility:hidden !important; }

  /* Keep the desktop nav inline and clean */
  nav.main-nav, nav.main-nav#mainNav{
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
  }

  /* No sticky mobile header/scroll wrappers on desktop */
  nav.main-nav .nav-head{ display:none !important; }
  nav.main-nav .nav-scroll{ display: contents !important; overflow: visible !important; }

  /* Hide the hamburger on desktop */
  #menuToggle{ display:none !important; }
}

/* Mobile: style the injected Back + title header (supports both class names) */
@media (max-width: 1023px){
  nav.main-nav .nav-head{
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    margin: -14px -16px 12px;
    background: rgba(255,246,250,.94);
    border-bottom: 1px solid rgba(198,146,20,.18);
  }
  nav.main-nav .nav-back,
  nav.main-nav .back-btn{
    appearance:none;
    border: 1px solid rgba(198,146,20,.35);
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    color: #6b4f6a;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  nav.main-nav .nav-back:hover,
  nav.main-nav .back-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
  }
  nav.main-nav .nav-title,
  nav.main-nav .ttl{
    font: 700 16px/1.2 'Poppins',system-ui;
    color:#5b4a62;
  }

  /* Menu items hover / active polish */
  nav.main-nav a,
  nav.main-nav button{
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  }
  nav.main-nav a:hover{
    transform: translateY(-1px);
  }

  /* Auth buttons in menu: keep nice spacing */
  .auth-links--mobile{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .auth-links--mobile a{ width:100%; justify-content:center; }
  .auth-links--mobile a:last-child{ grid-column: span 2; }
}

/* =====================
   LAST OVERRIDES (keep at file end)
   ===================== */

@media (max-width: 768px){
  /* Product cards: smaller media + equal heights */
  .product-grid .card{ display:flex !important; flex-direction:column !important; height:100% !important; }
  .product-grid .card-img{ aspect-ratio:auto !important; height:130px !important; }
  .product-grid .card-img img{ width:100% !important; height:100% !important; object-fit:cover !important; }
  .product-grid .card-body{ flex:1 1 auto !important; display:flex !important; flex-direction:column !important; gap:6px !important; padding:12px 12px 10px !important; }
  .product-grid .card-title{ 
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    min-height:2.6em !important; /* keeps buttons aligned */
    line-height:1.3 !important;
  }
  .product-grid .card-actions{ margin-top:auto !important; padding:0 12px 12px !important; }
}

@media (max-width: 1023px){
  /* Mobile menu: enforce clickability and stacking (single source of truth) */
  #navOverlay, .nav-overlay{ 
    position: fixed !important; inset:0 !important;
    background: rgba(0,0,0,.35) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
    z-index: 99990 !important;
  }
  body.nav-open #navOverlay,
  body.nav-open .nav-overlay{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  nav#mainNav.main-nav,
  nav.main-nav#mainNav{
    position: fixed !important;
    top:0 !important; right:0 !important; bottom:0 !important;
    width: min(86vw, 340px) !important;
    max-width: 340px !important;
    background: #fff !important;
    border-left: 1px solid rgba(198,146,20,.18) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.22) !important;
    transform: translateX(100%) !important;
    transition: transform .22s ease !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  nav#mainNav.main-nav.active,
  nav.main-nav#mainNav.active{ transform: translateX(0) !important; }

  /* Make sure inner scroll works */
  nav#mainNav .nav-scroll,
  nav.main-nav#mainNav .nav-scroll{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Clicking inside menu should not get blocked */
  nav#mainNav * , nav.main-nav#mainNav *{ pointer-events:auto !important; }
}

/* =============================================================
   ABSOLUTE FINAL NAV FIX (Jan 2026)
   Problem seen: an extra overlay sits above the menu, so any tap hits
   the overlay -> menu closes instantly and links never fire.
   Fix: force overlay BELOW the panel, always.
   ============================================================= */
@media (max-width: 1023px){
  #navOverlay, .nav-overlay{
    z-index: 5000 !important;
    pointer-events: none !important;
  }
  body.nav-open #navOverlay,
  body.nav-open .nav-overlay{
    pointer-events: auto !important;
  }
  nav#mainNav, nav#mainNav.main-nav,
  nav.main-nav#mainNav{
    z-index: 6000 !important;
    pointer-events: auto !important;
  }
  nav#mainNav *, nav.main-nav#mainNav *{ pointer-events:auto !important; }
}


/* === vFIX v3: Mobile drawer search + auth buttons polish (mobile only) === */
@media (max-width: 1023px){
  nav.main-nav .nav-search{
    margin: 10px 14px 6px;
  }
  nav.main-nav .nav-search-row{
    display:flex;
    gap:10px;
    align-items:center;
  }
  nav.main-nav .nav-search input[type="search"]{
    flex:1;
    height: 42px;
    border-radius: 999px;
    border: 2px solid rgba(119, 63, 160, 0.35);
    padding: 0 14px;
    outline: none;
    background: #fff;
  }
  nav.main-nav .nav-search button{
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 2px solid rgba(119, 63, 160, 0.35);
    background: #fff;
    font-weight: 700;
    cursor: pointer;
  }

  /* Make auth links not look like tiny circles */
  .auth-links--mobile{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 14px 6px;
  }
  .auth-links--mobile a{
    display:flex;
    justify-content:center;
    align-items:center;
    height: 42px;
    border-radius: 999px !important;
    padding: 0 14px !important;
    border: 2px solid rgba(119, 63, 160, 0.30) !important;
    background: rgba(255,255,255,0.85) !important;
    box-shadow: 0 10px 22px rgba(208,165,76,0.25);
    font-weight: 700;
    text-decoration:none;
  }
}




/* === v4 mobile menu polish: remove header line + improve account buttons === */
@media (max-width: 1023px){
  /* Remove that extra white line under the menu header */
  nav.main-nav .nav-head{
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Make account links look like proper menu buttons (not tiny chips) */
  nav.main-nav .auth-links--mobile{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }
  nav.main-nav .auth-links--mobile a.btn{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid rgba(198,146,20,.35) !important;
    color: #6a3f67 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.06) !important;
  }
  nav.main-nav .auth-links--mobile a.btn:hover{
    transform: translateY(-1px);
  }
  /* Logout should span full width like a primary action */
  nav.main-nav .auth-links--mobile a.btn[href*="logout"]{
    grid-column: 1 / -1 !important;
    border-width: 2px !important;
  }
}

/* -------- Order Details / Tracking pages (mobile friendly) -------- */
.od-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin: 18px 0; }
.od-title{ font-size:28px; font-weight:800; color:#3a2a1a; }
.od-sub{ color: rgba(58,42,26,.72); margin-top:6px; }
.od-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.od-grid{ display:grid; grid-template-columns: 1.4fr .9fr; gap:16px; align-items:start; }
.od-card{ background:#fff; border:1px solid rgba(198,146,20,.25); border-radius:18px; padding:16px; box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.od-card h2{ margin: 0 0 12px; font-size:18px; }
.od-items{ display:flex; flex-direction:column; gap:10px; }
.od-item{ display:grid; grid-template-columns: 56px 1fr auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid rgba(198,146,20,.18); border-radius:14px; text-decoration:none; color:inherit; background:#fff; }
.od-item img{ width:56px; height:56px; border-radius:12px; object-fit:cover; background:#fff7e6; }
.od-item-info .nm{ font-weight:700; }
.od-item-info .sub{ color: rgba(58,42,26,.72); font-size:13px; margin-top:2px; }
.od-item-total{ font-weight:800; white-space:nowrap; }
.od-summary .srow{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin: 8px 0; }
.od-summary .sep{ height:1px; background: rgba(198,146,20,.18); margin: 10px 0; }
.od-summary .tracking{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.copy-btn{ padding:6px 10px; border-radius:999px; border:1px solid rgba(198,146,20,.35); background:#fff; cursor:pointer; font-weight:700; }
.copy-btn:hover{ transform: translateY(-1px); }
.od-empty{ background:#fff; border:1px solid rgba(198,146,20,.25); border-radius:18px; padding:18px; }

@media (max-width: 768px){
  .od-grid{ grid-template-columns:1fr; }
  .od-head{ flex-direction:column; align-items:flex-start; }
  .od-actions{ justify-content:flex-start; width:100%; }
  .od-item{ grid-template-columns: 52px 1fr; grid-auto-rows:auto; }
  .od-item-total{ grid-column: 2; justify-self:start; }
}


/* --- Product page: sale price + extras + reviews (v1) --- */
.pd-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pd-price-now{font-weight:800;font-size:28px;color:#8a4b00}
.pd-price-was{text-decoration:line-through;opacity:.55;font-size:18px}
.pd-price-off{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,70,120,.10);border:1px solid rgba(255,70,120,.25);color:#b01249;font-weight:700;letter-spacing:.4px}
.pd-extras{margin-top:26px;display:grid;gap:18px}
.pd-block{background:#fff;border:1px solid rgba(198,146,20,.18);border-radius:18px;padding:18px;box-shadow:0 20px 55px rgba(198,146,20,.08)}
.pd-block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px}
.pd-block-head h3{margin:0;font-size:20px}
.pd-block-head p{margin:0;opacity:.65}
.pd-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width: 900px){.pd-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pd-card{display:block;border:1px solid rgba(198,146,20,.18);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s ease, box-shadow .18s ease}
.pd-card:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(198,146,20,.16)}
.pd-card-img{aspect-ratio: 1/1;background:#faf7f0}
.pd-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.pd-card-body{padding:10px 12px}
.pd-card-title{font-weight:700;line-height:1.25}
.pd-card-price{margin-top:6px;font-weight:800;color:#8a4b00}

.pd-review-layout{display:grid;grid-template-columns: 360px 1fr;gap:14px}
@media(max-width: 900px){.pd-review-layout{grid-template-columns:1fr}}
.pd-review-form{border:1px dashed rgba(198,146,20,.30);border-radius:16px;padding:14px;background:linear-gradient(180deg, rgba(255,225,240,.22), rgba(255,255,255,.75))}
.pd-form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.pd-form-row input,.pd-form-row textarea{border-radius:12px;border:1px solid rgba(198,146,20,.25);padding:10px 12px;outline:none}
.pd-form-row input:focus,.pd-form-row textarea:focus{box-shadow:0 0 0 4px rgba(255,70,120,.12)}
.pd-rating{display:flex;gap:6px}
.pd-rate-btn{width:40px;height:40px;border-radius:12px;border:1px solid rgba(198,146,20,.25);background:#fff;color:#d3a400;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.pd-rate-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(198,146,20,.16)}
.pd-rate-btn.is-on{background:rgba(255,210,80,.25)}
.pd-review-list{display:grid;gap:10px}
.pd-review{border:1px solid rgba(198,146,20,.16);border-radius:16px;padding:12px;background:#fff}
.pd-review-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pd-review-name{font-weight:800}
.pd-stars{color:#d3a400;letter-spacing:1px}
.pd-review-text{margin-top:8px;opacity:.9;white-space:pre-wrap}
.pd-review-media{margin-top:10px;max-width:100%;border-radius:14px;border:1px solid rgba(0,0,0,.06)}
.pd-review-date{margin-top:8px;font-size:12px;opacity:.55}
.pd-form-msg{margin-top:10px;font-weight:700;color:#b01249}
.pd-empty{opacity:.65;padding:10px}

/* Desktop sanity: keep off-canvas mobile nav rules from leaking into desktop.
   This prevents weird right-side white bars on wide screens. */
@media (min-width: 1024px){
  nav#mainNav.main-nav{
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .nav-overlay{display:none !important;}
  body.nav-open{overflow:auto !important;}
}



/* ---- Desktop safety: prevent any off-canvas remnants (white pill on right) ---- */
@media (min-width: 1024px){
  #navOverlay, .nav-overlay{ display:none !important; }
  nav#mainNav, nav#mainNav.main-nav, nav.main-nav#mainNav{
    position: static !important;
    top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    width:auto !important; height:auto !important;
    transform:none !important;
    box-shadow:none !important;
    background: transparent !important;
  }
}