/* FINAL COMPACT MOBILE ADD TO CART BUTTON (Desktop unchanged) */
@media (max-width: 768px){
  .btn-cart, button.add-to-cart, .product .add-to-cart{
    font-weight:800;
    background: linear-gradient(180deg, #f3d37c, #d4af37 60%, #b78628);
    color:#fff;
    border:0;
    border-radius:12px;
    width: 65%;
    max-width:200px;
    padding:8px 0;
    margin:10px auto 0;
    line-height:1;
    font-size:13px;
    text-align:center;
    box-shadow:0 4px 12px rgba(212,175,55,.3), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .btn-cart span{ white-space:nowrap; }

  }

/* =====================
   Header + Nav fixes
   ===================== */

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

/* 2) Remove the pink gradient strip under header */
.site-header::after{ display:none !important; }

/* 3) Keep auth buttons clean + inline */
.account-area{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.account-area .btn.mini{ padding:9px 16px; border-radius:999px; border:1.8px solid #C69214; box-shadow:0 10px 24px rgba(198,146,20,.12); }
.account-area .btn.mini{ background:#fff; color:#B38310; }
.account-area .btn.mini:hover{ transform: translateY(-1px); }
.account-area .btn.mini.outline{ background: linear-gradient(180deg, #f7d88b, #C69214); color:#fff; border-color:transparent; }

/* 4) Mobile menu: show search inside menu panel */
@media (max-width: 1023px){
  nav.main-nav#mainNav{ padding-top:14px; }
  nav.main-nav#mainNav .mobile-search{ width:100%; margin:6px 0 14px; }
  nav.main-nav#mainNav .mobile-search input{ width:100%; border-radius:999px; padding:12px 14px; border:1.5px solid rgba(198,146,20,.25); }
}

/* =====================
   Product page variations (professional look)
   ===================== */

.pd-variants{ background:#fff; border:1px solid rgba(198,146,20,.16); border-radius:18px; padding:16px; box-shadow:0 16px 40px rgba(198,146,20,.08); }
.pd-variants .v-row{ display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:start; margin:10px 0; }
.pd-variants .v-label{ font-weight:700; color:#2a2228; }
.pd-variants .v-values{ display:flex; flex-wrap:wrap; gap:10px; }

.pd-variants .var-pill{ border:1.6px solid rgba(255, 219, 227, 1); background:#fff; border-radius:999px; padding:9px 12px; cursor:pointer; font-weight:600; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pd-variants .var-pill:hover{ transform: translateY(-1px); box-shadow:0 12px 26px rgba(148,87,128,.12); border-color: rgba(198,146,20,.45); }
.pd-variants .var-pill.active{ border-color: rgba(198,146,20,.9); box-shadow:0 14px 30px rgba(198,146,20,.18); }
.pd-variants .var-pill[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* Color swatches as circles */
.pd-variants .swatch-pill{ padding:7px 12px 7px 10px; display:flex; align-items:center; gap:10px; }
.pd-variants .swatch{ width:22px; height:22px; border-radius:50%; border:2px solid #fff; outline:1px solid rgba(0,0,0,.12); box-shadow:0 8px 18px rgba(0,0,0,.08) inset; }
.pd-variants .swatch-label{ font-size:14px; }

.pd-variants .v-hint{ margin-top:10px; color:#8c7680; font-size:12px; }

@media (max-width: 768px){
  .card .card-actions a.btn{ background:#fff; color:#333; border:1px solid rgba(0,0,0,.12); }
}

/* =====================
   MOBILE MENU: must stay clickable
   Fix: overlay was stacking above the panel on some pages (click anywhere => menu closes).
   Force a clean stacking order: panel above overlay.
   ===================== */

@media (max-width: 1023px){
  /* overlay behind the panel */
  #navOverlay.nav-overlay,
  .nav-overlay{
    z-index: 9998 !important;
  }
  body.nav-open #navOverlay.nav-overlay,
  body.nav-open .nav-overlay{
    pointer-events: auto !important;
  }

  /* menu panel always above overlay and clickable */
  nav.main-nav#mainNav{
    z-index: 9999 !important;
    pointer-events: auto !important;
  }
  nav.main-nav#mainNav *{ pointer-events: auto !important; }
}