/* Custom display font for the greeting. Drop the font file in a /fonts folder
   at your project root:  fonts/Hellowine.ttf  (and Hellowine.woff2 if you have it).
   Until then, it falls back to the handwritten "Caveat" web font. */
@font-face{
  font-family:'Hellowine';
  src: url('../fonts/Hellowine.woff2') format('woff2'),
       url('../fonts/Hellowine.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0
}
  html{
    scroll-behavior:smooth;
    scrollbar-width:none;        /* Firefox: hide scrollbar */
    -ms-overflow-style:none;     /* IE/old Edge */
}
  html::-webkit-scrollbar{ display:none; }   /* Chrome/Safari/Edge */

 body{
    font-family:"Plus Jakarta Sans",system-ui,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(900px 500px at 88% -8%, rgba(255,122,60,.10), transparent 60%),
      radial-gradient(1000px 620px at 6% 108%, rgba(15,164,127,.14), transparent 60%),
      var(--bg);
    min-height:100vh;line-height:1.55;-webkit-font-smoothing:antialiased;
  }     
/* NOT FOR NOW
   a{color:inherit;text-decoration:none}
  svg{display:block}
  h1,h2,h3{font-family:"Outfit",sans-serif;line-height:1.05;letter-spacing:-.02em}
  :focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}
  */

:root{
    --bg:#EEF4EF;
    --bg2:#c1cec3cb;
    --surface:#FFFFFF;
     --ink:#0F231C;
    --muted:#5E7268;
    --line:#DEE7E1;
    --brand:#0FA47F;
    --brand-deep:#0A7B60;
    --brand-soft:#E4F5EF;
    --r:22px;
    --r-sm:14px;
    --shadow:0 22px 50px -26px rgba(15,35,28,.45);
    --shadow-sm:0 10px 24px -14px rgba(15,35,28,.4);
    
}

/*-------------------------------------------------------TOP BAR-------------------------------------------------*/
.topbar{
    position: sticky;
    top:0;
    z-index: 100;
    padding: 16px 24px 0;
}
/*-------------------------------------------------------TOP BAR ENDS-------------------------------------------------*/

.nav{
    max-width: 1480px;
    margin: 0 auto;
    backdrop-filter: blur(12px);
    background: transparent;/*--------------------------------------------------------adjustable-----------------------------*/
    border: 1px solid var(--line) ;
    border-radius: var(--r);
    box-shadow:var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0px;
}

.logo{
    display: flex;
    align-items: center;
    padding: 1px 8px;
    text-decoration: none;
}

.logo .mk{
    width: 140px;
    height: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo .mk img{
    width: 120%;
    height: 120%;
    object-fit: contain;
    display: block;
}


/*--------------------------------- center: list of brands and categories  ---------------------------------------*/
.nav-spacer{ flex:1; min-width:0; }

/* Greeting shown in the navbar's middle space for signed-in customers */
.nav-greet{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:12px;
  padding:0 10px; margin-left:36px;      /* gap between the logo and the greeting */
  line-height:1.2;
}
.nav-greet-text{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.nav-greet b{
  font-family:'Hellowine','Caveat',cursive;   /* handwritten greeting font */
  color:var(--ink); font-size:clamp(34px, 3vw, 52px); font-weight:700; letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-greet small{ color:var(--muted); font-size:clamp(15px, 1.15vw, 19px); font-weight:600; }

/* Avatar circle — hidden on desktop (the handwritten greeting is enough there),
   shown only in the compact mobile header. */
.nav-avatar{
  display:none; flex:none; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:700; font-size:16px;
  text-transform:uppercase;
}

.cats{
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg2);
    border-radius:var(--r-sm);
    padding:6px;
    overflow-x:auto;
    scrollbar-width:none;
}

 .cats::-webkit-scrollbar{
    display:none
}

.cats a{
    white-space: nowrap;
    text-decoration: none;
    font-weight:600;
    font-size:14.5px;
    color:var(--muted);
    padding:8px 14px;
    border-radius:10px;transition:.18s

}

.cats a:hover{
    background:var(--surface);
    color:var(--ink);
    box-shadow:var(--shadow-sm)
}

.cats a.all{
    margin-left:auto;
    color:var(--brand-deep);
    font-weight:700;
}

.cats a.all svg{
    display:inline-block;
    width:12px;
    height:12px;
    margin-left:4px;
    vertical-align:-1px
}



.delivery{
    position: relative;
    /*flex: none*/
}
.delivery-toggle {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:11px;
    background:var(--ink);
    color:#fff;
    padding:11px 16px;
    border-radius:var(--r-sm);
    font-weight:600;font-size:14px;
    user-select:none;
    transition:.2s;
    }

.delivery-toggle:hover {
  background:#16342a;
}

/* the pin icon */
.delivery-toggle .pin {
  width: 17px;
  height: 17px;
  color:var(--brand);
}

/* the "Deliver to / Cebu" text stack */
.delivery-toggle .lbl {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.delivery-toggle .lbl small {
  font-size: 11px;
  color: #9fb6ad;
  font-weight:600
}
.delivery-toggle .lbl b {
  font-size: 14px;
  font-weight: 700;
}

/* the caret */
.delivery-toggle .caret {
  width: 14px;
  height: 14px;
  color: #9fb6ad;
  transition:transform .2s;}
.delivery.open .caret{ transform:rotate(180deg); }





/*----------------------DELIVERY DROPDOWN PANEL----------------------*/
.delivery-panel{
    position:absolute;
    top:100%;
    right:0;
    margin-top:10px;
    min-width:300px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:0 20px 45px -18px rgba(15,35,28,.45);
    padding:20px;
    z-index:60;
    display:none;
}
.delivery.open .delivery-panel{ display:block; }

.delivery-panel h4{
    text-transform:uppercase;
    letter-spacing:.09em;
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    margin-bottom:12px;
    padding:0 4px;
}

.city{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border-radius:14px;
    cursor:pointer;
    transition:.15s;
}
.city:hover{ background:var(--bg); }

.city .name{
    flex:1;
    font-weight:700;
    font-size:16px;
    color:var(--ink);
}

/* hide the radio circle */
.city input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

/* selected row */
.city:has(input:checked){ background:var(--brand-soft); }
.city:has(input:checked) .name{ color:var(--brand-deep); }

/* disabled rows */
.city.disabled{ cursor:not-allowed; }
.city.disabled .name{ color:var(--muted); }

/* badges */
.badge{
    font-size:12px;
    font-weight:700;
    padding:5px 12px;
    border-radius:999px;
    white-space:nowrap;
}
.st-ok{   background:var(--brand-soft); color:var(--brand-deep); }
.st-soon{ background:#FBE7C9;          color:#C97A0F; }
.st-no{   background:#E9EDEB;          color:#9AA7A0; }

.city:has(input:checked) .badge.st-ok{
    background:transparent;
    padding:5px 4px;
}
/*----------------------DELIVERY DROPDOWN PANEL ENDS----------------------*/

/* ============ FLOATING LEFT CLUSTER (search + sign in) ============ */
  /* ===== LEFT SIDEBAR COLUMN (sits beside the home stage) ===== */
  .shell{
    max-width:1528px;                 /* 1480 nav width + 2x24px inset, aligns edges with the navbar */
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:flex-start;
    gap:14px;
  }
  .float-left{
    position: sticky;
    top: 150px;
    align-self: flex-start;
    margin-top: 22px;
    width: 250px;
    flex: none;
    height: calc(100vh - 182px);
    z-index: 70;
    display: flex;
    flex-direction:column;
    gap:12px;
  }

  .search{
    display: flex;
    align-items: center;
    gap: 10px;
    background:var(--surface);
    border: 1px solid var(--line);
    border-radius:100px;
    box-shadow:var(--shadow);
    padding:12px 18px;
    width:300px;
    min-height:44px;
    box-sizing:border-box;
  }

  .search svg{width:18px;height:18px;color:var(--muted);flex:none}
  .search input{border:0;outline:0;background:transparent;font:inherit;font-size:14.5px;width:100%;color:var(--ink)}
  .search input::placeholder{color:#9aa8a0}
  .signin{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration: none;
    gap:9px;
    align-self:flex-start;
    background:var(--ink);
    color:#fff;
    border-radius:100px;
    padding:11px 20px;
    min-height:44px;
    box-sizing:border-box;
    font-weight:700;
    font-size:14px;
    box-shadow:var(--shadow);
    transition:.2s;
  }
  .signin:hover{background:#16342a;transform:translateY(-1px)}
  .signin svg{width:16px;height:16px}
  .float-top-row{ display:flex; flex-direction:column; gap:12px; }
  .signin-avatar{ display:none; }
/* ============ FLOATING LEFT CLUSTER (search + sign in) ENDS ============ */

/* ===================== MOBILE MENU (hamburger + drawer) =====================
   Above ~960px the sidebar (search, sign-in, categories) sits fixed beside
   the page. Below that it has nowhere to shrink to, so it becomes an
   off-canvas drawer instead: hidden off-screen, opened by the hamburger
   button, and dismissed by the overlay / close button / Escape key. */
.hamburger-btn{
  display:none; flex:none; align-items:center; justify-content:center;
  width:40px; height:40px; border:none; border-radius:10px;
  background:transparent; color:var(--ink); cursor:pointer;
}
.hamburger-btn:hover{ background:var(--bg2); }
.hamburger-btn svg{ width:22px; height:22px; }

.sidebar-close{
  display:none; align-items:center; justify-content:center;
  position:absolute; top:8px; right:8px; z-index:1;
  width:40px; height:40px; border:none; border-radius:50%; background:transparent;
  color:var(--muted); font-size:20px; line-height:1; cursor:pointer;
}
.sidebar-close:hover{ background:var(--bg2); }

.sidebar-overlay{
  display:none; position:fixed; inset:0; z-index:190;
  background:rgba(15,35,28,.5); opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.sidebar-overlay.show{ opacity:1; pointer-events:auto; }

@media(max-width:960px){
  /* The nav bar only ever holds the hamburger on mobile now (logo and
     delivery both moved into the sidebar) — it sits as a normal, visible
     bar instead of the page's old floating/transparent treatment. */
  .topbar{ padding:12px 16px 0; }
  .nav{ background:var(--surface); padding:6px; justify-content:flex-start; }
  .hamburger-btn{ display:flex; }
  /* Home page only: this whole bar is replaced by the combined
     hamburger+marquee row below, so it's hidden here entirely. */
  .topbar.hb-home-hidden{ display:none; }
  .sidebar-overlay{ display:block; }
  .sidebar-close{ display:flex; }

  .shell{ flex-direction:column; padding:0; }

  .float-left{
    position:fixed; top:0; left:0; z-index:200;
    width:300px; max-width:82vw;
    height:100dvh;
    margin-top:0; padding:24px 16px 20px;
    background:var(--surface); border-radius:0 16px 16px 0; box-shadow:var(--shadow);
    overflow-y:auto; overflow-x:hidden;
    box-sizing:border-box;
    transform:translateX(-100%); transition:transform .3s ease;
  }
  .float-left.show{ transform:translateX(0); }

  .float-top-row{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; }
  .float-left .search{ flex:0 0 100%; order:3; width:auto; height:44px; padding:0 12px; gap:8px; border-radius:100px; box-shadow:none; box-sizing:border-box; }
  .float-left .search svg{ width:18px; height:18px; }
  .float-left .search input{ font-size:14px; }

  /* Delivery/location: scoped to desktop-only (min-width:961px) elsewhere,
     so it's re-enabled here, beside Sign In, matching the desktop sidebar.
     The old navbar version (#delivery in .topbar) is hidden below so the
     control exists in exactly one place instead of two. */
  .delivery-compact{ display:flex !important; order:2; flex:none; margin-left:auto; }
  .topbar #delivery{ display:none; }

  /* Logged-in: collapse the sign-in pill into a circular avatar (first initial only) */
  .account-menu{ flex:0 0 auto !important; width:auto !important; }
  .account-menu .signin{
    flex:0 0 28px !important; width:28px !important; height:28px !important;
    min-width:28px !important; max-width:28px !important;
    min-height:28px !important; max-height:28px !important;
    aspect-ratio:1 / 1 !important;
    padding:0 !important; margin:0 !important; line-height:28px !important;
    border-radius:50% !important; justify-content:center !important; align-items:center !important; gap:0 !important;
    box-sizing:border-box !important; overflow:hidden !important;
    background:var(--brand) !important;
  }
  .account-menu .signin svg{ display:none !important; }
  .account-menu .signin .signin-name{ display:none !important; }
  .account-menu .signin .signin-avatar{
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:100% !important; height:100% !important;
    background:transparent !important; border-radius:0 !important;
    color:#fff !important; font-weight:700 !important; font-size:13px !important; text-transform:uppercase !important;
  }

  /* Guest sign-in: was a 32px icon-only circle squeezed beside the search
     box — no visible label. Now a proper labeled pill (icon + "Sign in"
     text), stacked in its own row above search instead of sharing one row
     with it, matching the sidebar's Sign In -> Search order. The logged-in
     avatar chip (.account-menu .signin, just above) is untouched — that's
     a distinct, already-compact identity chip, not a call-to-action button. */
  .float-top-row:has(> .signin){
    flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important;
  }
  .float-top-row > .signin{
    all: unset !important;
    box-sizing:border-box !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:9px !important; flex:1 1 0% !important; min-width:0 !important; height:auto !important;
    min-height:46px !important; padding:12px 20px !important;
    margin:0 !important;
    border-radius:100px !important;
    background:var(--ink) !important; color:#fff !important;
    font-weight:700 !important; font-size:14.5px !important;
    box-shadow:var(--shadow) !important;
    cursor:pointer !important;
  }
  .float-top-row > .signin svg{
    flex:none !important; width:17px !important; height:17px !important;
    margin:0 !important; color:#fff !important;
  }

  .stage{ --stage-pad:0px; max-width:100%; padding:0; margin:8px 0 0; border-radius:14px; overflow:hidden; }
}

/* ===================== DESKTOP SIDEBAR HEADER RELOCATION =====================
   Per the sidebar redesign: on desktop the persistent top header collapses
   away entirely — logo, sign-in, and delivery area all live in the sidebar
   instead. Mobile is completely untouched: the topbar (hamburger, logo,
   delivery) and the drawer above both keep working exactly as before, since
   everything here is scoped to min-width:961px (just above the existing
   960px drawer breakpoint) and targets only the new .sidebar-logo /
   .delivery-compact elements, which are hidden by default below and never
   present in the mobile drawer's own path. ================================= */
.sidebar-logo{ display:none; }
.delivery-compact{ display:none; }

@media(min-width:961px){
  .topbar{ display:none; }

  .float-left{
    top:24px;
    height:calc(100vh - 48px);
  }

  .sidebar-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    box-sizing:border-box;
    padding:10px 4px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:var(--shadow);
  }

  .float-top-row{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .float-top-row > .signin,
  .float-top-row > .account-menu{ flex:1 1 0%; min-width:0; }
  .float-top-row > .search{ flex:0 0 100%; width:100%; order:3; }

  .delivery-compact{
    display:flex; position:relative; flex:none; order:2;
  }
  .delivery-toggle-compact{
    width:44px; height:44px; padding:0;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
    color:var(--brand-deep);
  }
  .delivery-toggle-compact:hover{ background:var(--brand-soft); }
  .delivery-toggle-compact .pin{ width:19px; height:19px; color:var(--brand-deep); }
}

/* Very small Android widths (320-360px): trim the drawer width a bit further */
@media(max-width:374px){
  .float-left{ width:280px; }
}

@media(max-width:760px){
  .nav{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .hamburger-btn{ width:44px; height:44px; border-radius:12px; }
  .hamburger-btn svg{ width:24px; height:24px; }
  .logo{ display:none; }

  .nav-greet{
    display:flex; align-items:center; justify-content:flex-start; margin-left:0; padding:0; min-width:0;
  }
  .nav-greet-text{ text-align:left; min-width:0; gap:2px; }
  .nav-greet b{ font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nav-greet small{
    font-size:14.5px; font-weight:600; line-height:1.3;
    white-space:normal; overflow-wrap:break-word;
  }
  .nav-avatar{ display:none; }

  .delivery-toggle{
    width:50px; height:50px; padding:0; justify-content:center;
    background:transparent; color:var(--ink); border-radius:50%;
    border:1.5px solid var(--line);
  }
  .delivery-toggle:hover{ background:var(--bg2); }
  .delivery-toggle .lbl,.delivery-toggle .caret{ display:none; }
  .delivery-toggle .pin{ width:21px; height:21px; color:var(--ink); }

  .delivery-panel{
    right:0; left:auto;
    width:min(240px, 78vw); min-width:0;
    padding:14px;
  }
  .delivery-panel h4{ font-size:11px; margin-bottom:8px; }
  .city{ padding:9px 10px; gap:8px; }
  .city .name{ font-size:13.5px; }
  .badge{ font-size:10.5px; padding:4px 9px; }
}

/* Narrowest Android phones: trim the greeting text a bit more so it can
   never run into the location button. */
@media(max-width:350px){
  .nav-greet b{ font-size:17px; }
  .nav-greet small{ font-size:13px; }
}

@media(max-width:600px){
  .shell{ padding:0; }
  .stage{ --stage-pad:0px; max-width:100%; padding:0; margin:8px 0 0; border-radius:14px; overflow:hidden; }
}

/* Fixed-position popups (delivery, category flyout, all-categories mega
   panel, live search) are positioned from JS using getBoundingClientRect,
   so they can't respond to a media query directly — cap their width so
   they can never run past the edge of a narrow screen. */
.delivery-panel,.cat-flyout,.allcats-panel,.search-suggest{ max-width:92vw; }
@media(max-width:600px){
  .allcats-panel{ grid-template-columns:1fr 1fr; }
}

/* 
  
  */




/* =====================================================================
   HOME PAGE STYLES  (stage container + hero + carousel + categories
   + promo strip + product grid).  Appended fix.
   ===================================================================== */

/* --pop accent vars (were missing) */
:root{ --pop:#FF7A3C; --pop-soft:#FFE7D9; }

/* ---- STAGE: plain vertical container (NOT a 2-col grid) ---- */
.stage{
  --stage-pad:44px;
  flex:1; min-width:0; max-width:none; margin:22px 0 24px; padding:44px;
  min-height:calc(100vh - 150px);
  background:
    radial-gradient(700px 380px at 82% 20%, rgba(255,122,60,.10), transparent 60%),
    radial-gradient(680px 420px at 12% 110%, rgba(15,164,127,.12), transparent 60%),
    var(--surface);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}

/* ============================ HOME HERO ============================
   Single clean banner — was a 2-column grid with a phone/app-download
   card on the right; that's gone, so this is just the text card now,
   full width, with the busy decorative glow removed for a plainer,
   more "storefront banner" look instead of a flashy marketing panel. */
.home-hero{ margin-bottom:34px; position:relative; z-index:1; }
.home-hero-text{
  background:linear-gradient(135deg, rgba(27,37,54,.92), rgba(20,29,43,.92));
  border:1px solid rgba(207,247,236,.08); border-radius:22px;
  padding:34px 36px; box-shadow:0 12px 36px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
}
.home-hero-text > *{ position:relative; z-index:1; }

.hero-tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--brand);
  background:rgba(29,184,122,.12); border:1px solid rgba(29,184,122,.25);
  padding:6px 14px; border-radius:100px; margin-bottom:18px;
}
.home-hero-text h1{ color:#fff; font-size:clamp(30px,3.2vw,42px); font-weight:800; line-height:1.12; margin-bottom:14px; }
.home-hero-text h1 span{ color:var(--brand); }
.home-hero-text p{ color:#b8c6d0; font-size:16px; max-width:440px; margin-bottom:24px; }

.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.btn-primary,.btn-ghost{
  display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14.5px;
  padding:13px 22px; border-radius:100px; text-decoration:none; cursor:pointer; transition:.2s;
}
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:#eaf5f0; border:1px solid rgba(255,255,255,.22); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }

.hero-bullets{ list-style:none; display:flex; flex-wrap:wrap; gap:18px; padding:0; margin:0; }
.hero-bullets li{ display:flex; align-items:center; gap:8px; color:#b8c6d0; font-size:13.5px; font-weight:600; }
.hero-bullets i{ color:var(--brand); }

@media(max-width:760px){
  .home-hero-text{ padding:20px 18px; }
  .hero-tag{ font-size:10px; padding:5px 11px; margin-bottom:12px; }
  .home-hero-text h1{ font-size:22px; margin-bottom:10px; }
  .home-hero-text p{ font-size:13px; margin-bottom:16px; }
  .hero-ctas{ gap:8px; margin-bottom:16px; flex-wrap:nowrap; }
  .btn-primary,.btn-ghost{ font-size:11.5px; padding:10px 8px; gap:5px; flex:1; min-width:0; justify-content:center; white-space:nowrap; }
  .hero-bullets{ gap:12px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .hero-bullets::-webkit-scrollbar{ display:none; }
  .hero-bullets li{ font-size:10.5px; gap:4px; white-space:nowrap; flex:none; }
}

/* ============================ TRUST MARQUEE STRIP ============================
   Slim, auto-scrolling strip of trust phrases between the hero and the
   carousel. .trust-seq is duplicated in the markup (second copy
   aria-hidden) so translateX(-50%) loops seamlessly; each sequence is
   `display:contents` so both stay flat children of the flex track and
   share one consistent gap. */
.trust-marquee{
  /* Breaks out of .stage's own padding (--stage-pad, set alongside each
     .stage padding declaration) so the strip is flush with the card edges
     instead of floating in the middle of the top padding. .stage's own
     overflow:hidden + border-radius then clips it back to the rounded
     corners, so it still reads as "inside" the card, just edge-to-edge. */
  width:calc(100% + var(--stage-pad, 44px) * 2);
  margin-left:calc(var(--stage-pad, 44px) * -1);
  margin-right:calc(var(--stage-pad, 44px) * -1);
  margin-top:calc(var(--stage-pad, 44px) * -1);
  margin-bottom:34px;
  overflow:hidden;
  background:#f6f4f4;
  border-top:1px solid #F1F5F9;
  border-bottom:1px solid #F1F5F9;
}
/* Mobile/tablet: the sidebar hamburger sits as a solid-backed notch over the
   marquee's left edge (scrolling text simply passes behind it), matching
   the plain .topbar hamburger's height instead of floating over the page. */
@media(max-width:960px){
  .trust-marquee{ position:relative; }
  .hamburger-btn.marquee-hamburger{
    position:absolute; top:0; left:0; height:100%; width:56px; z-index:2;
    background:#f6f4f4; border-right:1px solid #F1F5F9; border-radius:0;
  }
}
.trust-marquee-track{
  display:flex;
  align-items:center;
  gap:48px;
  width:max-content;
  padding:20px 0;
  animation:trust-marquee-scroll 40s linear infinite;
}
/* Pause-on-hover is a mouse-only convenience (so desktop users can pause it
   to read). Scoped to real pointer devices — on touchscreens, tapping the
   hamburger button (a descendant of .trust-marquee) left the strip stuck in
   a lingering :hover state with no mouse-leave to clear it, permanently
   pausing the scroll after a single accidental tap. */
@media (hover: hover) and (pointer: fine) {
  .trust-marquee:hover .trust-marquee-track{
    animation-play-state:paused;
  }
}
.trust-seq{
  display:contents;
}
.trust-item{
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
  font-size:19px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#3ac7ea;
  white-space:nowrap;
}
.trust-dot{
  width:6px; height:6px; flex:none;
  border-radius:50%;
  background:#10B981;
}
@keyframes trust-marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media(prefers-reduced-motion:reduce){
  .trust-marquee-track{ animation:none; }
}


/* ======================= SECTIONS / HEADINGS ======================= */
.home-section{ margin-bottom:34px; position:relative; z-index:1; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.section-head h2{ font-size:22px; font-weight:800; color:var(--ink); }
.see-all{ display:inline-flex; align-items:center; gap:7px; color:var(--brand-deep); font-weight:700; font-size:14px; text-decoration:none; }
.see-all:hover{ gap:11px; }

/* ======================= PRODUCT GRID ======================= */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  overflow:hidden; transition:.2s; display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.product-media{ position:relative; }
.product-img{ height:190px; background-size:cover; background-position:center; background-color:#f2f2f2; }
.product-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px; color:#fff;
}
.product-tag.hot{ background:#E4483B; }
.product-tag.new{ background:var(--brand); }
.wishlist-btn{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--muted); font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.wishlist-btn:hover{ color:#E4483B; }
.add-cart-btn{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink); color:#fff; border:none; border-radius:100px;
  padding:11px; font-weight:700; font-size:13.5px; cursor:pointer;
  opacity:0; transform:translateY(8px); transition:.25s;
}
.product-card:hover .add-cart-btn{ opacity:1; transform:translateY(0); }
.product-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; }
.product-cat{ color:var(--brand-deep); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.product-body h4{ color:var(--ink); font-size:15.5px; font-weight:700; line-height:1.3; }
.product-price{ display:flex; align-items:baseline; gap:9px; margin-top:2px; }
.p-new{ color:var(--ink); font-size:19px; font-weight:800; }
.p-old{ color:var(--muted); text-decoration:line-through; font-size:14px; }
.product-pack{ font-size:11px; font-weight:700; color:var(--pop); background:var(--pop-soft); padding:2px 8px; border-radius:100px; }

/* ======================= RESPONSIVE ======================= */
@media(max-width:1050px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .shell{ padding:0 8px; }
  .stage{ --stage-pad:8px; max-width:100%; padding:8px; margin:8px 0 0; border-radius:14px; overflow:hidden; }
}
/* ===================== CATEGORY NAV + SUBCATEGORY FLYOUT ===================== */
.cats a.cat-link{ cursor:pointer; }
.cats a.cat-link.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }

.cat-flyout{
  position:fixed; z-index:210; min-width:230px; max-width:280px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:8px; display:none;
}
.cat-flyout.open{ display:block; }
.cat-flyout .flyout-item{
  display:block; padding:10px 14px; border-radius:10px;
  color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; transition:.15s;
}
.cat-flyout .flyout-item:hover{ background:var(--brand-soft); color:var(--brand-deep); }
.cat-flyout .flyout-empty{ padding:12px 14px; color:var(--muted); font-size:13.5px; }

@media(max-width:960px){
  .cat-flyout{ min-width:160px; max-width:200px; padding:6px; }
  .cat-flyout .flyout-item{
    box-sizing:border-box;
    min-height:40px;
    padding:8px 12px 8px 28px;
    margin-bottom:2px;
    border-radius:7px;
    font-size:14px; font-weight:500; line-height:1.4;
    overflow-wrap:anywhere;
  }
  .cat-flyout .flyout-item:last-child{ margin-bottom:0; }
  .cat-flyout .flyout-empty{ padding:8px 10px; font-size:12px; }
}

/* ===================== PRODUCTS PAGE (by subcategory) ===================== */
.products-page{ position:relative; z-index:1; }
@media(max-width:960px){
  /* .stage (this page's parent container) drops its own padding to 0 at
     narrower widths, so this page needs its own horizontal breathing room
     — and a hard guard against anything inside it causing sideways scroll. */
  .products-page{ padding:0 14px; box-sizing:border-box; max-width:100%; overflow-x:hidden; }
}
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-bottom:16px; flex-wrap:wrap; }

@media(max-width:960px){
  .breadcrumb{
    font-size:14px;
    gap:7px;
    padding:0 14px;
    margin:8px 0 12px;
    min-height:44px;
    box-sizing:border-box;
    overflow-wrap:anywhere;
  }
}
.breadcrumb a{ color:var(--brand-deep); text-decoration:none; font-weight:600; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb span{ color:var(--muted); }
.breadcrumb .crumb-current{ color:var(--ink); font-weight:700; }

.products-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:22px; }
.products-head h1{ font-size:26px; font-weight:800; color:var(--ink); }
.products-count{ color:var(--muted); font-size:14px; font-weight:600; }

.products-empty{ color:var(--muted); font-size:15px; padding:30px 0; }

@media(max-width:960px){
  .products-head{ margin-bottom:14px; }
  .products-head h1{ font-size:13px; }
}

/* image placeholder when a product has no image */
.product-img.noimg{ display:flex; align-items:center; justify-content:center; color:#b0b0b0; font-size:34px; background:#f2f2f2; }

/* out-of-stock tag reuses product-tag but red-muted */
.product-tag.out{ background:#8a9a92; }

/* ===================== PRODUCT DETAIL PAGE ===================== */
.product-link{ display:block; }
.product-title-link{ color:inherit; text-decoration:none; }
.product-title-link:hover{ color:var(--brand-deep); }

.product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:start; margin-top:6px; }
.pd-media{ position:relative; }
.pd-img{ width:100%; max-width:440px; max-height:440px; aspect-ratio:1/1; border-radius:20px; background-size:cover; background-position:center; background-color:#f2f2f2; border:1px solid var(--line); }
.pd-img.noimg{ display:flex; align-items:center; justify-content:center; color:#b9c8c1; font-size:60px; }

.pd-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; max-width:440px; }
.pd-thumb{ width:72px; height:72px; border-radius:10px; background-size:cover; background-position:center; background-color:#f2f2f2; border:2px solid var(--line); cursor:pointer; }
.pd-thumb.active{ border-color:var(--brand-deep); }

.pd-size-btn{ min-width:44px; padding:8px 14px; border-radius:9px; font-weight:700; font-size:13px; font-family:inherit; }

@media(max-width:850px){
  /* Percentage-based (was a fixed 280px cap) so it scales proportionally
     across 320–430px phones instead of being one fixed size for all of
     them; background-size:contain (was cover) so the image is never
     cropped/distorted to fill the square, matching object-fit:contain. */
  .pd-img{ width:82%; max-width:340px; max-height:none; margin:0 auto 4px; background-size:contain; background-repeat:no-repeat; }
  .pd-thumbs{ max-width:340px; margin:12px auto 0; justify-content:center; }
  .pd-thumb{ width:58px; height:58px; }
  .product-detail{ gap:18px; }
}

.pd-info{ padding-top:6px; }
.pd-cat{ color:var(--brand-deep); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

@media(max-width:960px){
  .pd-cat{ font-size:12px; }
}
.pd-name{ font-size:24px; font-weight:800; color:var(--ink); margin:8px 0 14px; line-height:1.2; }
.pd-price{ font-size:32px; font-weight:800; color:var(--pop); margin-bottom:12px; }

@media(max-width:960px){
  .pd-name{ font-size:16px; font-weight:700; line-height:1.45; margin:8px 0 10px; }
  .pd-price{ font-size:20px; margin-bottom:10px; }
}
.pd-pack-badge{ display:inline-block; font-size:13px; font-weight:700; padding:6px 14px; border-radius:100px; margin-bottom:12px; background:var(--pop-soft); color:var(--pop); }

.pd-stock{ display:inline-block; font-size:13px; font-weight:700; padding:6px 14px; border-radius:100px; margin-bottom:20px; }
.pd-stock.in{ background:var(--brand-soft); color:var(--brand-deep); }
.pd-stock.out{ background:#E9EDEB; color:#8a9a92; }

@media(max-width:960px){
  /* Was display:none (fully hidden) — kept visible per spec as a
     touch-friendly pill instead of removing the stock indicator. */
  .pd-stock{ font-size:13px; padding:8px 14px; margin-bottom:16px; }
}
.pd-desc{ color:var(--muted); font-size:15px; line-height:1.6; margin-bottom:26px; max-width:520px; }
.pd-desc-empty{ font-style:italic; }

/* Collapsible "Product details" panel — wraps the description in an
   Amazon-style expand/collapse row instead of showing it as a bare block. */
.pd-details{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:520px; margin-bottom:22px; }
.pd-details-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 2px; background:none; border:none; cursor:pointer;
  font-size:15px; font-weight:800; color:var(--ink); font-family:inherit; text-align:left;
}
.pd-details-chevron{ width:20px; height:20px; color:var(--muted); flex:none; transition:transform .2s ease; }
.pd-details-toggle.open .pd-details-chevron{ transform:rotate(180deg); }
.pd-details-panel{ padding:0 2px 18px; }
.pd-details-panel .pd-desc{ margin-bottom:0; max-width:none; }
.pd-about-heading{ font-size:15px; font-weight:800; color:var(--ink); margin:0 0 10px; }
.pd-about-list{ margin:0; padding-left:20px; color:var(--muted); font-size:14.5px; line-height:1.6; }
.pd-about-list li{ margin-bottom:8px; }
.pd-about-list li:last-child{ margin-bottom:0; }

@media(max-width:960px){
  .pd-size-btn{ min-width:40px; padding:8px 13px; font-size:13px; }
  /* 14px / 1.6 line-height for comfortable Android reading, not shrunk to fit more content. */
  .pd-desc{ font-size:14px; line-height:1.6; margin-bottom:20px; }
}

.pd-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.pd-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:100px; overflow:hidden; }
.pd-qty .qty-btn{ width:40px; height:44px; border:none; background:var(--surface); color:var(--ink); font-size:18px; cursor:pointer; }
.pd-qty .qty-btn:hover{ background:var(--bg); }
.pd-qty input{ width:54px; height:44px; text-align:center; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); font:inherit; font-weight:700; color:var(--ink); }
.pd-qty input::-webkit-outer-spin-button,.pd-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.pd-add{ display:inline-flex; align-items:center; gap:9px; background:var(--brand); color:#fff; border:none; border-radius:100px; padding:13px 26px; font-weight:700; font-size:14.5px; cursor:pointer; transition:.2s; }
.pd-add:hover{ background:var(--brand-deep); transform:translateY(-2px); }
.pd-add.disabled{ background:#c3cec8; cursor:not-allowed; transform:none; }

.pd-back{ display:inline-flex; align-items:center; gap:8px; color:var(--brand-deep); font-weight:700; font-size:14px; text-decoration:none; }
.pd-back:hover{ gap:12px; }

@media(max-width:960px){
  /* Touch targets brought up to ~40-44px (were 26-28px) per Android usability guidance. */
  .pd-actions{ gap:10px; margin-bottom:18px; }
  .pd-qty .qty-btn{ width:38px; height:42px; font-size:15px; }
  .pd-qty input{ width:40px; height:42px; font-size:14px; }
  .pd-add{ padding:11px 20px; font-size:13.5px; gap:7px; }
  .pd-back{ display:none; }
}

@media(max-width:850px){ .product-detail{ grid-template-columns:1fr; } }

/* ===================== LIVE SEARCH SUGGESTIONS ===================== */
.search-suggest{
  position:fixed; z-index:210; display:none;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:8px; max-height:420px; overflow-y:auto;
  overscroll-behavior:contain;               /* keep scroll inside the panel */
  scrollbar-width:none;                       /* Firefox: hide scrollbar */
}
.search-suggest::-webkit-scrollbar{ display:none; }   /* Chrome/Safari/Edge */
.search-suggest.open{ display:block; }
.search-item{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px;
  text-decoration:none; transition:.15s;
}
.search-item:hover{ background:var(--brand-soft); }
.si-thumb{
  width:44px; height:44px; border-radius:10px; flex:none;
  background:#eef4f1 center/cover no-repeat; border:1px solid var(--line);
}
.si-thumb.noimg{ background:#eef4f1; }
.si-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.si-name{ color:var(--ink); font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-sub{ color:var(--muted); font-size:12px; }
.si-price{ color:var(--pop); font-weight:800; font-size:14px; flex:none; }
.search-empty{ padding:14px 16px; color:var(--muted); font-size:13.5px; }

/* ===================== ALL CATEGORIES BUTTON + MEGA PANEL ===================== */
.all-btn{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; cursor:pointer; border:none; background:transparent;
  color:var(--brand-deep); font-weight:700; font-size:14.5px; font-family:inherit;
  padding:8px 14px; border-radius:10px; transition:.18s;
}
.all-btn:hover{ background:var(--surface); box-shadow:var(--shadow-sm); }
.all-btn svg{ width:12px; height:12px; transition:transform .2s; }
.all-btn.active svg{ transform:rotate(180deg); }

.allcats-panel{
  position:fixed; z-index:210; display:none;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:20px 22px; max-width:760px;
  grid-template-columns:repeat(3,minmax(180px,1fr)); gap:22px 30px;
  max-height:70vh; overflow-y:auto;
}
.allcats-panel.open{ display:grid; }
.allcats-cat{ color:var(--ink); font-weight:800; font-size:14px; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.allcats-sub{ display:block; color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600; padding:5px 0; transition:.15s; }
.allcats-sub:hover{ color:var(--brand-deep); padding-left:4px; }
.allcats-none{ color:#aab7b0; font-size:12.5px; font-style:italic; }

@media(max-width:960px){
  .allcats-panel{ padding:14px 16px; gap:14px 18px; grid-template-columns:1fr 1fr; }
  .allcats-cat{ font-size:11px; margin-bottom:5px; padding-bottom:4px; }
  .allcats-sub{ font-size:10.5px; padding:4px 0; }
  .allcats-none{ font-size:10px; }
}

/* ===================== SITE FOOTER ===================== */
.site-footer{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--ink) 0%,#123227 55%,#15352a 100%);
  color:#cfe0d8; margin-top:40px;
}
/* soft organic radial-light shapes, decorative only */
.foot-glow{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; }
.foot-glow-a{ width:420px; height:420px; top:-180px; left:-120px; background:radial-gradient(circle,rgba(15,164,127,.22),transparent 70%); }
.foot-glow-b{ width:380px; height:380px; bottom:-160px; right:-100px; background:radial-gradient(circle,rgba(15,164,127,.14),transparent 70%); }

.foot-inner{
  position:relative; z-index:1; max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:32px;
  padding:56px 34px 34px;
}
.foot-logo{font-size:25px;font-weight:800;color:#fff;margin-bottom:14px;letter-spacing:.01em}
.foot-logo span{color:var(--brand)}
.foot-brand p{color:#9fc0b3;font-size:14px;max-width:300px;line-height:1.65}
.foot-col h5{color:#fff;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.foot-col a{display:block;color:#9fc0b3;text-decoration:none;font-size:14px;font-weight:500;padding:6px 0;transition:.15s}
.foot-col a:hover{color:#5eead4;padding-left:4px}

.foot-trust{
  position:relative; z-index:1; max-width:1320px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:12px; padding:0 34px 34px;
}
.foot-trust-item{
  display:flex; align-items:center; gap:9px; flex:1 1 220px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 16px; color:#cfe0d8; font-size:13px; font-weight:600;
}
.foot-trust-item i{color:var(--brand);font-size:15px}

.foot-bar{border-top:1px solid rgba(255,255,255,.1);max-width:1320px;margin:0 auto;position:relative;z-index:1;
  padding:20px 34px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:#8fb0a3}
.staff-login-link{display:inline-flex;align-items:center;gap:8px;color:#cfe0d8;text-decoration:none;
  font-weight:700;font-size:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  padding:9px 16px;border-radius:100px;transition:.18s}
.staff-login-link:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.foot-bar-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-bar-links a{color:#8fb0a3;text-decoration:none;transition:.15s}
.foot-bar-links a:hover{color:#5eead4}
.foot-dot{color:#4a6a5e}

@media(max-width:1080px){
  .foot-inner{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:820px){.foot-inner{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .foot-inner{grid-template-columns:1fr; gap:28px; padding:40px 20px 24px; text-align:left}
  .foot-brand p{max-width:100%}
  .foot-col h5{ font-size:12px; margin-bottom:10px; }
  .foot-col a{ font-size:13.5px; padding:7px 0; }
  .foot-trust{padding:0 20px 28px; gap:10px}
  .foot-trust-item{flex:1 1 100%}
  .foot-bar{padding:16px 20px; flex-direction:column; align-items:flex-start; gap:10px}
  .foot-bar-links{gap:8px; font-size:12.5px}
}
/* =====================================================================
   RELOCATED CATEGORIES  (left sidebar float box)
   - The box itself is fixed (part of .float-left, which is position:fixed)
     and does NOT scroll with the page.
   - Only the inner list (.cat-float-list) scrolls when there are many
     categories. Uses existing design tokens only (no new colors/styles).
   ===================================================================== */
.cat-float{
  width:100%;
  flex:1; min-height:0;                 /* fills remaining sidebar height */
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;                     /* outer frame never scrolls */
}
.cat-float-head{
  padding:14px 18px;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  flex:none;
}
.cat-float-list{
  flex:1; min-height:0;
  overflow-y:auto;                     /* ONLY the inside scrolls */
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  scrollbar-width:thin;
}
.cat-float-list::-webkit-scrollbar{ width:8px; }
.cat-float-list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:100px; }
.cat-float-list a{
  display:flex;
  align-items:center;
  min-height:42px;
  box-sizing:border-box;
  white-space:nowrap;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  line-height:1.4;
  color:var(--muted);
  padding:9px 12px;
  border-radius:10px;
  transition:.15s;
  cursor:pointer;
}
.cat-float-list a:hover{ background:var(--brand-soft); color:var(--brand-deep); }
.cat-float-list a:active{ background:var(--brand-soft); color:var(--brand-deep); }
.cat-float-list a.cat-link.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }

/* All-categories button used as the sidebar box header */
.cat-float .cat-head-btn{
  width:100%; justify-content:space-between; border-radius:0;
  padding:14px 18px; min-height:44px; box-sizing:border-box;
  border-bottom:1px solid var(--line); flex:none;
}
.cat-float .cat-head-btn:hover{ background:var(--brand-soft); box-shadow:none; }

@media(max-width:960px){
  .cat-float{ flex:0 1 auto; }
  .cat-float .cat-head-btn{ padding:12px 14px; font-size:16px; font-weight:700; }
  .cat-float-list{ flex:0 1 auto; gap:2px; }
  .cat-float-list a{
    display:flex; align-items:center;
    min-height:44px;
    padding:10px 12px;
    font-size:15px; font-weight:600; line-height:1.4;
    border-radius:8px;
  }
}

/* ===================== FLOATING CART BUTTON ===================== */
.cart-float{
  /* top clears the full-height desktop nav (logo makes it ~133px tall)
     so the cart doesn't sit blurred underneath the sticky header */
  position:fixed; top:145px; right:40px; z-index:80;
  width:42px; height:42px; border-radius:0;
  background:transparent; color:var(--brand);
  display:none; align-items:center; justify-content:center;   /* hidden until .show */
  font-size:30px; text-decoration:none; box-shadow:none;
  transition:transform .2s;
}
.cart-float.show{ display:flex; }
.cart-float:hover{ transform:translateY(-2px) scale(1.06); }
.cart-count{
  position:absolute; top:-6px; right:-10px;
  min-width:20px; height:20px; padding:0 5px;
  background:var(--pop); color:#fff; border-radius:100px;
  font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--surface);
}
.cart-float.bump{ animation:cartBump .3s ease; }
@media(max-width:760px){
  /* nav switches to the compact icon-only header here, so the header is
     much shorter than the desktop logo header above */
  .cart-float{ top:100px; }
}
@media(max-width:600px){
  /* Touch target matches .hamburger-btn's mobile size (44px box) so the
     cart sits visually balanced with the hamburger and location controls
     in the compact header — the icon itself stays small (24px) inside it. */
  .cart-float{ top:95px; right:14px; width:44px; height:44px; font-size:24px; }
  .cart-count{ min-width:17px; height:17px; font-size:10px; top:3px; right:1px; }
}
@keyframes cartBump{ 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }


/* ===================== CART DRAWER + TOAST ===================== */
.cart-overlay{
  position:fixed; inset:0; background:rgba(15,35,28,.45);
  opacity:0; visibility:hidden; transition:.25s; z-index:200;
}
.cart-overlay.show{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw;
  background:var(--surface); box-shadow:-24px 0 60px -24px rgba(15,35,28,.5);
  border-radius:0;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:201; display:flex; flex-direction:column; overflow:hidden;
}
.cart-drawer.show{ transform:translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; justify-content:center; position:relative;
  padding:22px 24px; border-bottom:1px solid var(--line);
}
.cart-drawer-head h3{ font-size:19px; font-weight:800; color:var(--ink); text-align:center; }
.cart-head-count{ color:var(--muted); font-weight:600; font-size:16px; }
.cart-edit-toggle{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--brand-deep); font-weight:700; font-size:13.5px;
  cursor:pointer; padding:8px 10px; border-radius:10px; transition:.15s;
}
.cart-edit-toggle:hover{ background:var(--bg); }
.cart-close{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  background:none; border:none; font-size:18px; line-height:1; color:var(--muted);
  cursor:pointer; width:38px; height:38px; border-radius:10px; transition:.15s;
  display:flex; align-items:center; justify-content:center;
}
.cart-close:hover{ background:var(--bg); color:var(--ink); }
.cart-close-x{ display:none; }
.cart-close-back{ display:inline-block; }

.cart-drawer-body{ flex:1; overflow-y:auto; padding:8px 16px; scrollbar-width:none; }
.cart-drawer-body::-webkit-scrollbar{ display:none; }

.cart-line{ display:flex; align-items:flex-start; gap:14px; padding:16px 8px; border-bottom:1px solid var(--line); }
.cart-line.flash{ animation:cartLineFlash .9s ease; }
@keyframes cartLineFlash{
  0%{ background:var(--brand-soft); }
  100%{ background:transparent; }
}
.cart-line-check{
  flex:none; width:15px; height:15px; margin-top:4px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  color:transparent; font-size:7.5px; cursor:pointer; transition:.15s;
}
.cart-line-check i{ pointer-events:none; }
.cart-line-check.checked{ background:var(--brand); border-color:var(--brand); color:#fff; }
.cart-line-img{
  width:92px; height:92px; border-radius:12px; flex:none;
  background:#eef4f1 center/cover no-repeat; border:1px solid var(--line);
}
.cart-line-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.cart-line-name{ font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.3; }
.cart-line-price{ color:var(--pop); font-weight:800; font-size:14px; }
.cart-qty-row{ display:flex; align-items:center; gap:9px; }
.cart-qty-label{ color:var(--muted); font-weight:600; font-size:11.5px; }
.cart-qty{
  display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:100px; overflow:hidden;
}
.cart-qty button{ width:28.8px; height:28.8px; border:none; background:var(--surface); color:var(--ink); font-size:15.4px; cursor:pointer; }
.cart-qty button:hover{ background:var(--bg); }
.cart-qty button:disabled{ opacity:.35; cursor:not-allowed; }
.cart-qty button:disabled:hover{ background:var(--surface); }
.cart-qty span{ min-width:30.7px; text-align:center; font-weight:700; font-size:13.4px; }

/* ---------- Skeleton loading ---------- */
@keyframes skeleton-shimmer{
  0%{ background-position: -200px 0; }
  100%{ background-position: calc(200px + 100%) 0; }
}
.skel{
  background: linear-gradient(90deg, var(--line) 25%, var(--surface) 37%, var(--line) 63%);
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
.skel-cart-line{ display:flex; gap:14px; padding:16px 8px; border-bottom:1px solid var(--line); }
.skel-cart-line .skel-img{ width:66px; height:66px; border-radius:12px; flex:none; }
.skel-cart-line .skel-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; justify-content:center; }
.skel-cart-line .skel-name{ height:14px; width:75%; }
.skel-cart-line .skel-price{ height:12px; width:35%; }

.skel-search-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; }
.skel-search-item .skel-thumb{ width:36px; height:36px; border-radius:8px; flex:none; }
.skel-search-item .skel-info{ flex:1; display:flex; flex-direction:column; gap:6px; }
.skel-search-item .skel-line{ height:11px; }
.skel-search-item .skel-line.w70{ width:70%; }
.skel-search-item .skel-line.w40{ width:40%; }

.skel-product-card{ border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.skel-product-card .skel-thumb{ width:100%; aspect-ratio:1/1; border-radius:0; }
.skel-product-card .skel-body{ padding:10px; display:flex; flex-direction:column; gap:8px; }
.skel-product-card .skel-line{ height:12px; }

.skel-line.w80{ width:80%; }
.skel-line.w70{ width:70%; }
.skel-line.w60{ width:60%; }
.skel-line.w40{ width:40%; }

.skel-flyout{ padding:12px 14px; display:flex; flex-direction:column; gap:12px; }
.skel-flyout .skel-line{ height:13px; }

.skel-checkout{ display:flex; flex-direction:column; gap:16px; padding:8px; }
.skel-checkout .skel-line{ height:14px; }
.skel-checkout .skel-block{ height:80px; border-radius:12px; }

.cart-empty{ text-align:center; color:var(--muted); padding:70px 20px; font-size:15px; }
.cart-empty i{ font-size:42px; color:var(--line); display:block; margin-bottom:16px; }

.cart-drawer-foot{ border-top:1px solid var(--line); padding:20px 24px; }

.cart-order-summary{ max-height:0; opacity:0; overflow:hidden; transition:max-height .25s ease, opacity .2s, margin .25s; }
.cart-drawer-foot.summary-open .cart-order-summary{ max-height:50px; opacity:1; margin-bottom:12px; }
.cart-order-summary-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted); font-weight:600; padding:4px 2px; }
.cart-order-summary-row b{ color:var(--ink); font-weight:700; }

.cart-bar{ display:flex; align-items:center; gap:12px; }
.cart-bar-price{
  flex:1; min-width:0; color:var(--ink); font-size:19px; font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cart-summary-toggle{
  flex:none; background:none; border:none; color:var(--muted); cursor:pointer;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
}
.cart-summary-toggle svg{ width:16px; height:16px; transition:transform .2s; }
.cart-drawer-foot.summary-open .cart-summary-toggle svg{ transform:rotate(180deg); }
.cart-checkout{
  flex:none; width:144px; background:var(--brand); color:#fff; border:none; border-radius:12px;
  padding:12.5px 21px; font-weight:800; font-size:13.9px; cursor:pointer; transition:.2s; white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
}
.cart-checkout:hover{ background:var(--brand-deep); transform:translateY(-1px); }

.cart-edit-foot{ display:none; align-items:center; justify-content:space-between; }
.cart-drawer.editing .cart-edit-foot{ display:flex; }
.cart-drawer.editing .cart-bar,
.cart-drawer.editing .cart-order-summary{ display:none; }
.cart-select-all{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-weight:700; font-size:14.5px; color:var(--ink); user-select:none;
}
.cart-remove-btn{
  background:#E4483B; color:#fff; border:none; border-radius:12px;
  padding:12px 22px; font-weight:800; font-size:14.5px; cursor:pointer; transition:.2s;
}
.cart-remove-btn:hover{ background:#c93b2f; }
.cart-remove-btn:disabled{ opacity:.4; cursor:not-allowed; }

.cart-toast{
  position:fixed; bottom:28px; left:50%; transform:translate(-50%, 20px);
  background:var(--ink); color:#fff; font-weight:600; font-size:14px;
  padding:13px 22px; border-radius:100px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transition:.25s; z-index:210;
}
.cart-toast.show{ opacity:1; visibility:visible; transform:translate(-50%, 0); }

.checkout-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000;
  overflow-y:auto; padding:30px 16px;
}
.checkout-modal-card{
  background:#EDEAE2; border-radius:18px; max-width:1000px;
  margin:0 auto; position:relative; min-height:200px;
}
.checkout-modal-close{
  position:absolute; top:16px; right:20px; background:none; border:none;
  font-size:26px; color:#9aa7bd; cursor:pointer; z-index:2;
}
.checkout-modal-body{ padding:28px; }
.checkout-modal-head{ display:none; }

@media(max-width:600px){
  .checkout-modal-overlay{ padding:0; }
  .checkout-modal-card{ max-width:100%; min-height:100vh; border-radius:0; margin:0; }
  .checkout-modal-close{ display:none; }
  .checkout-modal-head{
    display:flex; align-items:center; justify-content:center; position:sticky;
    top:0; z-index:3; background:#EDEAE2; min-height:60px; padding:0 64px; border-bottom:1px solid var(--line);
  }
  .checkout-modal-head h3{ color:var(--ink); font-size:18px; font-weight:800; text-align:center; }
  .checkout-modal-back{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--ink); font-size:19px; cursor:pointer;
    width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  }
  .checkout-modal-back:hover{ background:rgba(0,0,0,.06); }
  /* .products-page (the checkout content root) already contributes its own
     14px horizontal padding on mobile — zero this out here instead of
     stacking both, which was doubling the side gutters to ~42px. */
  .checkout-modal-body{
    padding:12px 0 calc(16px + env(safe-area-inset-bottom));
  }

  .cart-drawer{ width:100vw; max-width:100vw; top:0; bottom:0; border-radius:0; }
  .cart-drawer-head{ padding:0 16px; min-height:60px; }
  .cart-drawer-head h3{ font-size:17px; }
  .cart-head-count{ font-size:13.5px; }
  .cart-close{ width:42px; height:42px; }
  .cart-edit-toggle{
    right:10px; font-size:14.5px; min-height:40px; padding:0 12px;
    display:flex; align-items:center;
  }

  .cart-line{ gap:12px; padding:14px 12px; }
  .cart-line-img{ width:90px; height:90px; border-radius:12px; }
  .cart-line-info{ gap:5px; }
  .cart-line-name{ font-size:15.5px; }
  .cart-line-price{ font-size:14.5px; }
  /* Extra gap above the qty control on top of .cart-line-info's own 5px,
     so product-info -> qty spacing (~10px) reads as a bigger break than
     name -> price (~5px) without needing two different gap values. */
  .cart-qty-row{ margin-top:5px; }
  .cart-qty-label{ font-size:11px; }
  .cart-qty button{ width:40px; height:40px; font-size:17px; }
  .cart-qty span{ min-width:34px; font-size:14.5px; }

  /* Selection/removal checkbox: the visible dot stays the same small size,
     but the clickable box grows to ~40px via a centered ::before, so the
     tap target is comfortable without the icon looking oversized. Applies
     everywhere .cart-line-check is used (cart lines + both "All" toggles). */
  .cart-line-check{
    position:relative; width:40px; height:40px; margin-top:0;
    border:none; background:none;
    display:flex; align-items:center; justify-content:center;
  }
  .cart-line-check::before{
    content:''; width:16px; height:16px; border-radius:50%;
    border:1.5px solid var(--line); background:var(--surface); transition:.15s;
  }
  .cart-line-check.checked::before{ background:var(--brand); border-color:var(--brand); }
  .cart-line-check i{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

  .cart-drawer-foot{
    padding:14px 16px 14px; padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
  .cart-bar{ gap:8px; }
  .cart-select-all{ gap:6px; font-size:13.5px; }
  .cart-bar-price{ font-size:17px; }
  .cart-summary-toggle{ width:32px; height:32px; }
  .cart-checkout{
    width:auto; flex:none; height:46px; padding:0 18px; font-size:15px; border-radius:10px;
  }
  .cart-remove-btn{
    padding:0 18px; font-size:14px; min-height:40px; display:flex; align-items:center;
  }
}


.terms-body{ max-height:58vh; overflow-y:auto; font-size:13.5px; line-height:1.65; color:#0F231C; }
.terms-body h4{ font-size:13.5px; font-weight:800; margin:16px 0 6px; color:#0F231C; }
.terms-body h4:first-child{ margin-top:0; }
.terms-body p{ margin:0 0 8px; color:#5E7268; }

/* ═══════════════ PRODUCT CARDS — used on home, categories, and search ═══════════════ */

/* 5 across instead of 4, tighter gaps */
.product-grid{
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

/* Section title centered, See all pinned right (home page rows only) */
.section-head{
  position:relative;
  justify-content:center;
  margin-bottom:22px;
}
.section-head h2{
  font-size:21px;
  font-weight:600;
  letter-spacing:-.01em;
}
.section-head .see-all{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
}

/* Flatter, lighter card */
.product-card{
  border-radius:12px;
  border:1px solid #EDF1EF;
  box-shadow:none;
}
.product-card:hover{
  transform:none;
  box-shadow:0 6px 20px -8px rgba(15,35,28,.18);
  border-color:#DCE6E1;
}

/* Product photo sits on a soft grey, contained — not cropped */
.product-img{
  height:168px;
  background-color:#f2f2f2;
  background-size:contain;
  background-repeat:no-repeat;
}

/* Badge: small square chip, top-left */
.product-tag{
  top:8px;
  left:8px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  padding:4px 9px;
  border-radius:5px;
}
.product-tag.out{ background:#96A29C; }

/* ADD TO CART: always visible, full width, sits under the card */
.add-cart-btn{
  position:static;
  opacity:1;
  transform:none;
  width:100%;
  border-radius:0;
  padding:12px;
  background:var(--brand-deep,#0A7B60);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  order:2;
}
.add-cart-btn:hover{ background:#0FA47F; }
.product-card:hover .add-cart-btn{ opacity:1; transform:none; }

/* Card body above the button */
.product-card{ position:relative; }
.product-media{ display:flex; flex-direction:column; }
.product-media .product-link{ order:1; }
.product-body{
  order:1;
  padding:12px 12px 14px;
  gap:3px;
  flex:1;
}
.product-cat{
  display:block;
  font-size:10px;
  letter-spacing:.05em;
  color:#8FA69C;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Name: 2 lines max, then ellipsis — keeps every card the same height */
.product-body h4{
  font-size:13.5px;
  font-weight:500;
  line-height:1.35;
  min-height:37px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-title-link{ color:inherit; text-decoration:none; }
.product-title-link:hover{ color:var(--brand-deep,#0A7B60); }

.product-sold{ font-size:12px; color:#8a95a8; }

.p-new{ font-size:16px; font-weight:800; }
.p-old{ font-size:12.5px; }

/* Reorder so the button ends up at the very bottom of the card */
.product-card{ display:flex; flex-direction:column; }

/* ── Responsive ── */
@media(max-width:1200px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:1050px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:720px){
  /* 2 cards per row (was 4) — matches standard mobile storefront layouts
     and gives each card roughly double the room, so text/images don't
     need to be shrunk down to near-unreadable sizes to fit. */
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .product-img{ width:100%; height:auto; aspect-ratio:1 / 1; }
  .section-head{ justify-content:space-between; }
  .section-head .see-all{ position:static; transform:none; }

  .product-body{ padding:10px 10px 12px; gap:4px; }
  .product-cat{ font-size:11px; }
  .product-body h4{ font-size:14px; min-height:36px; line-height:1.3; }
  .product-sold{ font-size:12px; }
  .p-new{ font-size:17px; }
  .p-old{ font-size:12.5px; }
  .product-tag{ font-size:10px; padding:3px 7px; top:6px; left:6px; }
  .wishlist-btn{ width:28px; height:28px; font-size:12px; }
  .add-cart-btn{ padding:10px; font-size:13px; }
}

/* The old "SIGN IN / REGISTER MODALS — mobile" !important block that used
   to live here (targeting #loginModal > div etc.) was written for the
   original inline-styled dark modals and forced width:250px on phones.
   It was silently overriding every later responsive fix made to the
   rebuilt .auth-card modals in index.php, since an !important rule in an
   external stylesheet beats even a JS-set inline style. Removed — the
   current responsive sizing lives entirely in index.php's own
   .auth-card / @media(max-width:768px) rules and mobile-sizing script. */