/* === 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;
}

/* 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) === */
@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;
    bottom: -100vh;
  }

  /* 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; }
}

/* 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; }
}

/* 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: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  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: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.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: none; overscroll-behavior: none; }
  .nav-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.28); backdrop-filter: blur(6px); 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: blur(4px); }
  .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:none; overscroll-behavior:none; }
  .nav-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    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: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .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;
  }
}



/* === 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 === */
@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; }
}
\n
/* === 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; }
}


/* v3: Final compact mobile Add to Cart button */
@media (max-width: 480px){
  .card-actions .btn{
    display:block !important;
    width:78% !important;
    margin:8px auto !important;
    border-radius:16px !important;
    padding:9px 0 !important;
    font-weight:700 !important;
  }
  .card-actions{ gap:6px !important; }
}


/* v4: strongest mobile fix for Add to Cart golden button */
@media (max-width: 480px){
  .shop-grid .card-actions .btn,
  .content.shop-grid .card-actions .btn,
  .card .card-actions .btn,
  .card-actions .btn-add{
    display:flex; !important;
    width:10% !important;
    margin:10px auto !important;
    border-radius:30px !important;
    padding:5px 0 !important;
    font-weight:700 !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.08) !important;
  }
  .shop-grid .card-actions,
  .content.shop-grid .card-actions,
  .card .card-actions{
    gap:8px !important;
  }
}