/* ============================================
   MAZI GENERAL TRADE — store styles
   Palette derived from brand logo
============================================ */
:root{
  --green-900:#0F3A2E;
  --green-800:#164B3B;
  --green-700:#1C5E48;
  --green-600:#237259;
  --green-500:#2E8C6C;
  --green-100:#E4F0EA;
  --cream:#F8F7F2;
  --white:#FFFFFF;
  --ink:#16211C;
  --ink-soft:#5C6B63;
  --line:#E6E4DC;
  --red:#D5473C;
  --red-bg:#FBE7E5;
  --nav-dark:#0C1F17;
  --nav-dark-2:#132E22;
  --nav-line:rgba(255,255,255,.10);
  --nav-ink:#EAF3EE;
  --nav-ink-soft:rgba(234,243,238,.62);
  --radius:0;
  --radius-sm:0;
  --shadow-sm:0 1px 0 rgba(15,58,46,.08);
  --shadow-md:0 2px 0 rgba(15,58,46,.10);
  --font-display:'Montserrat', sans-serif;
  --font-body:'Montserrat', sans-serif;
  --side-pad:clamp(24px, 3vw, 56px);

  /* Glass surfaces */
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.6);
  --glass-shadow:0 10px 34px rgba(15,58,46,.10), 0 1px 0 rgba(255,255,255,.7) inset;
  --glass-shadow-lg:0 18px 48px rgba(15,58,46,.16), 0 1px 0 rgba(255,255,255,.7) inset;
  --ease-glass:cubic-bezier(.22,1,.36,1);

  /* White glass — for primary action buttons */
  --glass-dark-bg:rgba(255,255,255,.55);
  --glass-dark-bg-strong:rgba(255,255,255,.78);
  --glass-dark-border:rgba(255,255,255,.85);
  --glass-dark-shadow:0 8px 22px rgba(22,75,59,.14), inset 0 1px 0 rgba(255,255,255,.6);
  --glass-dark-blur:blur(14px) saturate(180%);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
html,body{
  /* Stops the whole page from rubber-banding/bouncing past its own edges —
     the elastic overscroll reads as "buggy" once the site is installed as
     an app rather than viewed as a normal webpage. Panels that need their
     own scroll (drawers, modals) opt back in individually. */
  overscroll-behavior-y:none;
}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom:0;
  /* Kills the default gray flash Android/iOS draw on every tap — with it
     on, every button/card looked like it was lagging or mis-firing. */
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent;}
ul{list-style:none;}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;}
input{font-family:inherit;}

/* ============ Navbar ============ */
.navbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;
  transition:transform .28s ease;
}
.navbar.nav-hidden{
  transform:translateY(-100%);
}
.navbar-inner{
  max-width:none;margin:0;
  padding:12px clamp(24px, 3vw, 56px);
  display:flex;flex-direction:column;gap:2px;
}
.navbar-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
}
.brand{display:flex;align-items:center;flex-shrink:0;margin-right:4px;order:1;}
.brand-logo{
  height:clamp(80px, 9vw, 128px);width:auto;display:block;
}

.navbar-search-row{order:2;flex:1 1 260px;min-width:180px;display:flex;align-items:center;}
.nav-actions{order:3;}
.search-wrap{
  width:100%;max-width:none;min-height:36px;
  display:flex;align-items:center;gap:10px;
  padding:0 16px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--cream);
  transition:border-color .15s, background .15s;
}
.search-wrap:focus-within{
  border-color:var(--green-500);background:var(--white);
}
.search-wrap input{
  flex:1;min-width:0;
  padding:clamp(6px,0.8vw,9px) 0;
  border:none;background:transparent;
  font-size:clamp(13px,1vw,15px);color:var(--ink);
  line-height:1.2;
}
.search-wrap input:focus{outline:none;}
.search-wrap input::placeholder{color:var(--ink-soft);}
.search-icon{
  flex-shrink:0;display:block;
  width:17px;height:17px;color:var(--ink-soft);pointer-events:none;
}

.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
#mobileSearchBtn{display:none;}
.icon-btn{
  position:relative;
  width:clamp(38px,3.2vw,46px);height:clamp(38px,3.2vw,46px);
  display:flex;align-items:center;justify-content:center;
  border:none;
  border-radius:50%;
  color:var(--green-800);
  transition:background .15s, width .28s ease, height .28s ease;
}
.icon-btn:hover{background:var(--green-100);}
.icon-btn svg{width:19px;height:19px;}
.icon-btn svg path,.icon-btn svg circle{stroke-width:1.7;}
.cart-count{
  position:absolute;top:-2px;right:-2px;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:700;
  min-width:16px;height:16px;
  border:2px solid #fff;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.nav-offers-btn{color:var(--green-800);}
.nav-viber-btn{
  background:transparent;
  width:auto;height:auto;
  border-radius:0;
}
.nav-viber-icon{width:60px;height:60px;object-fit:contain;display:block;border-radius:50%;}
.nav-viber-btn:hover{background:var(--green-100);}
.login-btn{
  display:flex;align-items:center;justify-content:center;
  width:clamp(38px,3.2vw,46px);height:clamp(38px,3.2vw,46px);
  border:none;
  border-radius:50%;
  background:transparent;color:var(--green-800);
  cursor:pointer;
  transition:background .15s;
  margin-left:0;
}
.login-btn svg{width:19px;height:19px;}
.login-btn svg path,.login-btn svg circle{stroke-width:1.7;}
.login-btn:hover{background:var(--green-100);}
.login-btn[hidden]{display:none;}
/* Product detail page: no login icon for guests (logged-in users still get the profile menu) */
#productView .login-btn{display:none;}

.currency-toggle{
  position:relative;
  display:flex;align-items:center;
  /* Solid (not translucent) so it looks the same dark navy everywhere —
     it used to blend with whatever sat behind it (dark on the mobile
     hero photo, washed-out grey on the white profile dropdown). */
  background:linear-gradient(155deg, #1d3c54, #0a1a26);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  min-width:134px;height:34px;
  padding:3px;gap:2px;
  flex-shrink:0;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    inset 0 -1px 3px rgba(0,0,0,.3),
    0 4px 10px rgba(6,20,30,.22);
}
.currency-toggle-thumb{
  position:absolute;
  top:3px;left:0;bottom:3px;
  width:0;
  border-radius:7px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.02) 55%), var(--green-800);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -3px 5px rgba(0,0,0,.28),
    0 3px 10px rgba(0,0,0,.32);
  transition:left .45s cubic-bezier(.34,1.56,.64,1), width .45s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
  z-index:0;
}
.currency-toggle-btn{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:5px;
  min-width:55px;height:26px;
  padding:0 9px;
  border-radius:7px;
  font-size:11px;font-weight:400;color:#fff;
  letter-spacing:.02em;line-height:1;
  background:transparent;
  transition:color .3s ease;
  white-space:nowrap;
}
.currency-toggle-icon{flex-shrink:0;display:block;transition:transform .45s cubic-bezier(.34,1.56,.64,1);filter:brightness(0) invert(1);height:0.8em;}
.currency-toggle-usd-icon{width:.8em;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;line-height:1;color:#fff;filter:none;}
.currency-toggle-btn.active{color:#fff;font-weight:800;}
.currency-toggle-btn:not(.active){font-weight:400;}
.currency-toggle-btn.active .currency-toggle-icon{transform:rotate(-8deg) scale(1.05);}
.currency-toggle-usd-icon{transform:rotate(-8deg);}
.currency-toggle-btn.active .currency-toggle-usd-icon{transform:rotate(0deg) scale(1.05);}
.currency-toggle-btn:not(.active):hover{color:#fff;}
@media (max-width:640px){
  .currency-toggle{min-width:134px;height:32px;}
  .currency-toggle-btn{min-width:52px;height:24px;padding:0 8px;font-size:10.5px;}
  .currency-toggle-icon{height:.8em;}
}
/* Web pills (navbar guest switch + profile dropdown switch) use the exact
   same base .currency-toggle / .currency-toggle-btn sizing as the mobile
   currency dropdown — no separate padding here, so they stay identical. */

.profile-wrap{position:relative;flex-shrink:0;}
.profile-wrap[hidden]{display:none;}
.profile-view-topbar .profile-wrap{display:none;} /* already inside the profile page — no need for the account icon here */
.profile-btn{
  display:flex;align-items:center;justify-content:center;
  width:clamp(38px,3.2vw,46px);height:clamp(38px,3.2vw,46px);
  border:none;
  border-radius:50%;
  background:transparent;color:var(--green-800);
  cursor:pointer;
  transition:background .15s;
}
.profile-btn:hover{background:var(--glass-bg);}
.profile-btn svg{width:25px;height:25px;}
.profile-btn svg path,.profile-btn svg circle{stroke-width:1.7;}
.profile-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:180px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:16px;
  box-shadow:var(--glass-shadow-lg);
  overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:200;
}
.profile-dropdown.open{opacity:1;visibility:visible;transform:translateY(0);}
.profile-dropdown button{
  display:block;width:100%;text-align:left;
  padding:11px 16px;
  background:none;border:none;
  font-size:13.5px;font-weight:400;color:var(--ink);
  cursor:pointer;
  transition:background .12s;
}
.profile-dropdown button:hover{background:var(--glass-bg);}
.profile-dropdown-currency{
  display:flex;justify-content:center;
  padding:10px 16px;
  border-top:1px solid var(--glass-border);
  border-bottom:1px solid var(--glass-border);
}
.profile-dropdown-currency .currency-toggle{margin:0 auto;}
.profile-dropdown-currency .currency-toggle-btn{
  display:flex;
  align-items:center;
  width:auto;
  flex:1 1 0;
  height:26px;
  padding:0 9px!important;
  justify-content:center;
  text-align:center;
  line-height:1;
  color:#fff!important;
}
.profile-dropdown-currency .currency-toggle-icon{
  display:block;
  filter:brightness(0) invert(1);
  vertical-align:middle;
}
.profile-dropdown-currency .currency-toggle-usd-icon{filter:none;}
/* Intentionally no width:100% / flex:1 here — this pill should read as
   the same compact size as the mobile currency-dropdown switch (base
   .currency-toggle-btn size), not stretched to fill the dropdown. */
.js-profile-orders-btn{position:relative;}
.js-profile-orders-btn.has-notif::after{
  content:'';
  position:absolute;top:50%;right:14px;
  transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.js-profile-logout-btn{
  border-top:1px solid var(--glass-border);
  color:var(--red);
}
.js-profile-logout-btn:hover{background:rgba(213,71,60,.1)!important;}
.profile-dropdown-label{
  padding:9px 16px 5px;
  font-size:11.5px;font-weight:700;color:var(--ink-soft);
  border-top:1px solid var(--glass-border);
}

/* ============ Layout ============ */
.layout{
  max-width:none;margin:0;
  padding:24px var(--side-pad);
  display:grid;
  grid-template-columns:230px 1fr;
  gap:24px;
  align-items:stretch;
  position:relative;
}
.sidebar{
  grid-column:1;
  align-self:stretch;
  position:relative;
}
.sidebar-inner{
  box-sizing:border-box;
  position:sticky;
  top:var(--nav-offset, 10px);
  z-index:5;
  padding:0 6px 4px 0;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  transition:top .28s ease;
}
.sidebar-title{
  font-family:var(--font-display);
  font-size:12.5px;font-weight:700;letter-spacing:.1em;
  color:var(--ink-soft);margin-bottom:14px;padding:0;text-transform:uppercase;
}
.sidebar-body{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.sidebar-scrollwrap{
  flex:1;
  min-width:0;
  /* Grow with the screen: only scroll when the list really doesn't fit in the
     viewport. Uses the navbar's CURRENT offset (it shrinks / hides while you
     scroll down), so the list takes all the room that's actually free.
     52px = title + its margin + bottom breathing room. */
  max-height:calc(100vh - var(--nav-offset, 10px) - 52px);
  max-height:calc(100dvh - var(--nav-offset, 10px) - 52px);
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sidebar-scrollwrap::-webkit-scrollbar{display:none;width:0;height:0;}
.sidebar-list{
  position:relative;
  /* Roomier rows on tall screens: 2px on short screens (<=720px tall), growing
     with the window height up to 10px so the categories aren't cramped. */
  display:flex;flex-direction:column;gap:clamp(2px, calc(2px + (100vh - 720px) * 0.02), 10px);
}
.sidebar-rail{
  flex-shrink:0;
  width:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.sidebar-rail[hidden]{display:none;} /* .sidebar-rail's display:flex was overriding the hidden attribute */
.sidebar-rail-btn{
  width:100%;
  padding:3px 0 6px;
  background:none;border:none;
  color:var(--ink-soft);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s ease;
}
.sidebar-rail-btn svg{width:14px;height:14px;}
.sidebar-rail-btn:hover{color:var(--ink-soft);}
.sidebar-rail-btn:disabled{color:#c7d2ca;cursor:default;}
.sidebar-rail-track{
  position:relative;
  flex:1;
  width:3px;
  min-height:40px;
  background:#e3e7e3;
  border-radius:2px;
  margin:2px 0;
}
.sidebar-rail-thumb{
  position:absolute;
  left:0;top:0;
  width:100%;
  background:var(--ink-soft);
  border-radius:2px;
  transition:top .15s ease;
}
.sidebar-highlight{
  display:none;
}
.sidebar-list li{position:relative;z-index:1;}
.sidebar-list li button{
  width:100%;text-align:left;
  /* 9px on short screens, up to 16px top/bottom on tall ones. */
  padding:clamp(9px, calc(9px + (100vh - 720px) * 0.03), 16px) 0 clamp(9px, calc(9px + (100vh - 720px) * 0.03), 16px) 14px;
  border-radius:0;
  font-size:13px;color:var(--ink);font-weight:400;
  letter-spacing:.03em;text-transform:uppercase;
  border:none;background:none;
  position:relative;
  transition:color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), padding-left .25s cubic-bezier(.22,1,.36,1);
}
.sidebar-list li button::before{
  content:'';
  position:absolute;left:0;top:50%;
  width:3px;height:16px;
  background:var(--ink-soft);
  border-radius:2px;
  transform:translateY(-50%) scaleY(0);
  opacity:0;
  transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.sidebar-list li button:hover{color:var(--ink-soft);transform:translateX(4px);}
/* Short laptop screens: tighten the rows a little before ever resorting to a
   scrollbar (toggled from updateSidebarRail() only when it makes the list fit). */
.sidebar-inner.compact .sidebar-list{gap:0;}
.sidebar-inner.compact .sidebar-list li button{padding-top:5px;padding-bottom:5px;}
.sidebar-list li button.active{color:var(--ink-soft);font-weight:700;padding-left:16px;}
.sidebar-list li button.active::before{transform:translateY(-50%) scaleY(1);opacity:1;}

.content{min-width:0;}

/* ============ Hero slideshow ============ */
.hero{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:21/9;
  background:var(--ink);
  margin-bottom:22px;
}
.hero-track{
  display:flex;
  height:100%;
  transition:transform .6s cubic-bezier(.65,0,.35,1);
}
.hero-slide{
  min-width:100%;height:100%;
  display:flex;align-items:center;
  padding:0 56px;
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.hero-slide.has-responsive-img{background-image:var(--hero-bg-mobile);}
@media (min-width: 721px){
  .hero-slide.has-responsive-img{background-image:var(--hero-bg-web);}
}
.hero-slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.32) 25%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 62%);
  z-index:1;
}

/* Photo hero slides render with no text on top of them (see renderHero()
   in script.js — hasImg slides skip the eyebrow/title/desc entirely), so
   the darkening gradient that used to protect that text just muddies the
   photo now. Leave image slides at full brightness/color. */
.hero-slide.has-img::after{
  background:none;
}

/* Glow switch — soft dot that breathes out into an elongated glowing pill,
   like a toggle switching on, then eases back. Loops smoothly. */
.hero-slide-content{position:relative;z-index:2;max-width:460px;}

.hero-eyebrow{
  color:var(--line);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.4);
}
.hero-title{
  font-family:var(--font-display);
  color:#fff;font-size:clamp(22px,3.4vw,38px);font-weight:700;
  line-height:1.12;margin-bottom:10px;
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 4px 20px rgba(0,0,0,.45);
  text-wrap:balance;
}
.hero-desc{color:rgba(255,255,255,.95);font-size:14px;margin-bottom:18px;max-width:380px;text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.4);}
.hero-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  color:var(--ink);
  border:1px solid var(--glass-border);
  border-radius:999px;
  padding:9px 18px;font-weight:700;font-size:11.5px;
  box-shadow:var(--glass-shadow);
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.hero-cta:hover{background:#fff;box-shadow:var(--glass-shadow-lg);}
.hero-cta:active{transform:scale(.96);}
.hero-visual{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  font-size:180px;opacity:.5;z-index:0;
}
.hero-dots{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:11px;z-index:3;
}
.hero-dots button{
  width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.45);
  transition:background .3s ease;
  position:relative;z-index:1;
}
.hero-dots button.active{background:rgba(255,255,255,.9);}
.hero-dot-highlight{
  position:absolute;
  top:50%;left:0;
  height:7px;width:17px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 5px 1px rgba(255,255,255,.55), 0 0 9px 2px rgba(255,255,255,.2);
  transform:translate(0,-50%);
  transition:transform .6s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
  z-index:2;
}
@media (prefers-reduced-motion: reduce){
  .hero-dot-highlight{transition:none;}

}

/* ============ Brands ticker (auto-scroll, swipeable on touch) ============ */
.brands-ticker{
  margin-top:22px;
  padding:22px 0 20px;
  border-bottom:1px solid var(--line);
}
.brands-ticker-eyebrow{
  text-align:center;
  font-size:11.5px;font-weight:700;color:var(--ink-soft);
  letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:18px;
}
.brands-ticker-viewport{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.brands-ticker-track{
  display:flex;align-items:center;
  width:max-content;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.brands-ticker-track:active{cursor:grabbing;}
.brands-ticker-item{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  height:104px;
  margin-right:clamp(36px,6vw,72px);
  pointer-events:none;
}
.brands-ticker-item img{
  height:100%;max-height:104px;width:auto;
  max-width:300px;
  object-fit:contain;
  -webkit-user-drag:none;
}
.brands-ticker-item.img-missing{
  width:96px;height:34px;
  background:var(--cream);border:1px dashed var(--line);
  border-radius:4px;
}
.brands-ticker-item.img-missing img{display:none;}
@media (max-width:640px){
  .brands-ticker{margin-top:16px;padding:18px 0 16px;}
  .brands-ticker-item{height:80px;}
  .brands-ticker-item img{max-height:80px;max-width:220px;}
  .brands-ticker-viewport{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }
}

/* ============ Categories toggle (mobile only) — frosted glass ============ */
.cat-toggle-btn{
  display:none;
  align-items:center;gap:6px;
  padding:8px 15px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  color:var(--ink);
  border:1px solid var(--glass-border);
  border-radius:999px;
  box-shadow:var(--glass-shadow);
  font-size:11.5px;font-weight:700;
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.cat-toggle-btn:hover{background:var(--glass-bg);box-shadow:var(--glass-shadow-lg);}
.cat-toggle-btn:active{transform:scale(.96);}
.cat-toggle-btn svg{width:14px;height:14px;flex-shrink:0;}

.cat-offers-btn{
  display:none;
  align-items:center;gap:6px;
  padding:8px 15px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  color:var(--ink);
  border:1px solid var(--glass-border);
  border-radius:999px;
  box-shadow:var(--glass-shadow);
  font-size:11.5px;font-weight:700;
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.cat-offers-btn:hover{background:var(--glass-bg);box-shadow:var(--glass-shadow-lg);}
.cat-offers-btn:active{transform:scale(.96);}
.cat-offers-btn svg{width:14px;height:14px;flex-shrink:0;}

.cat-toggle-bar{display:none;}
@media (max-width: 980px){
  .cat-toggle-bar{
    display:flex;
    align-items:center;justify-content:space-between;gap:10px;
    position:sticky;
    top:var(--nav-flush, 70px);
    z-index:55;
    background:transparent;
    border-bottom:none;
    padding:12px var(--side-pad);
    margin:0 calc(-1 * var(--side-pad)) 16px;
  }
  .cat-toggle-btn,.cat-offers-btn{display:inline-flex;}
}
@media (max-width: 720px){
  /* Phone: Categories lives in the bottom nav + header menu, so this bar is removed */
  .cat-toggle-bar{display:none;}
}

/* ============ Section head ============ */
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-top:24px;
  margin-bottom:14px;
}
.section-head h2{
  font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);
}
.result-count{font-size:12.5px;color:var(--ink-soft);}

/* ============ Product grid ============ */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px;
}
.product-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1), border-color .25s ease;
  will-change:transform;
}
.product-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 32px rgba(15,58,46,.12), 0 3px 10px rgba(15,58,46,.06);
}
.product-card:active{
  transition-duration:.12s;
  transform:translateY(-1px) scale(.98);
  box-shadow:0 6px 16px rgba(15,58,46,.10);
}

.card-media{
  position:relative;
  aspect-ratio:1/0.82;
  display:flex;align-items:center;justify-content:center;
  font-size:52px;
  overflow:hidden;
}
.card-media .card-img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .card-media .card-img{transform:scale(1.07);}
.card-media .card-img.img-missing{visibility:hidden;}
.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;}

/* ============ Stock indicator (dot + text) ============ */
.stock-indicator{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:400;letter-spacing:.01em;
  margin-bottom:5px;
}
.stock-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.stock-indicator.low-stock .stock-dot{
  background:var(--amber, #E0A526);
  animation:stock-pulse-amber 1.6s infinite;
}
.stock-indicator.low-stock .stock-text{color:#B8860B;}
.stock-indicator.in-stock .stock-dot{
  background:var(--ink-soft);
  animation:stock-pulse-green 1.6s infinite;
}
.stock-indicator.in-stock .stock-text{color:var(--ink-soft);}
.stock-indicator.out-stock .stock-dot{
  background:var(--red);
  animation:stock-pulse-red 1.6s infinite;
}
.stock-indicator.out-stock .stock-text{color:var(--red);}

@keyframes stock-pulse-red{
  0%{box-shadow:0 0 0 0 rgba(213,71,60,.45);}
  70%{box-shadow:0 0 0 5px rgba(213,71,60,0);}
  100%{box-shadow:0 0 0 0 rgba(213,71,60,0);}
}
@keyframes stock-pulse-amber{
  0%{box-shadow:0 0 0 0 rgba(224,165,38,.45);}
  70%{box-shadow:0 0 0 5px rgba(224,165,38,0);}
  100%{box-shadow:0 0 0 0 rgba(224,165,38,0);}
}
@keyframes stock-pulse-green{
  0%{box-shadow:0 0 0 0 rgba(22,140,80,.4);}
  70%{box-shadow:0 0 0 5px rgba(22,140,80,0);}
  100%{box-shadow:0 0 0 0 rgba(22,140,80,0);}
}

.card-title{
  font-size:13px;font-weight:400;color:var(--ink);line-height:1.35;
  min-height:35px;margin-bottom:2px;
}
.card-code{font-size:11px;color:var(--ink-soft);margin-bottom:6px;}
.card-meta{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px dashed var(--line);padding-top:9px;margin-top:auto;
}
.card-unit{font-size:11px;color:var(--ink-soft);}
.card-unit strong{display:block;color:var(--ink);font-size:12.5px;font-weight:400;}
.packing-label{display:flex;align-items:center;gap:4px;}
.packing-icon{width:12px;height:12px;color:var(--green-600);flex-shrink:0;}
.card-price{
  font-family:var(--font-display);font-weight:400;font-size:12.5px;color:var(--ink);
  white-space:nowrap;
}
.card-price small{font-size:20px;font-weight:700;color:var(--ink-soft);}
.cur-icon{height:0.85em;width:auto;vertical-align:-0.05em;display:inline-block;margin:0 1px 0 0;}
/* ============ Skeleton loading state ============ */
.skeleton-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.skeleton-media{
  aspect-ratio:1/0.82;
  background:var(--line);
}
.skeleton-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;}
.skeleton-line{
  height:11px;
  background:var(--line);
  width:80%;
}
.skeleton-line.short{width:45%;}
.skeleton-media,
.skeleton-line{
  position:relative;
  overflow:hidden;
}
.skeleton-media::after,
.skeleton-line::after{
  content:"";
  position:absolute;inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:skeleton-shimmer 1.3s ease-in-out infinite;
}
@keyframes skeleton-shimmer{
  100%{transform:translateX(100%);}
}
@media (prefers-reduced-motion: reduce){
  .skeleton-media::after,.skeleton-line::after{animation:none;}
}

/* Centers the Add-to-cart button's horizontal space so that when it shrinks
   into the small round loading spinner, the spinner lands centered in the
   row instead of stuck against the left edge (a block-level default). */
.card-action-slot{display:flex;justify-content:center;}
.card-add{
  margin-top:10px;width:100%;
  align-self:center;
  background:var(--glass-dark-bg);color:var(--ink);
  backdrop-filter:var(--glass-dark-blur);-webkit-backdrop-filter:var(--glass-dark-blur);
  border:1px solid var(--glass-dark-border);border-radius:0;
  padding:7px;font-size:6.5px;font-weight:700;
  box-shadow:var(--glass-dark-shadow);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .15s, color .15s, transform .15s,
    width .35s var(--ease-glass), border-radius .35s var(--ease-glass),
    padding .35s var(--ease-glass), gap .35s var(--ease-glass);
}
.card-add:hover{background:var(--glass-dark-bg-strong);}
.card-add:active{transform:scale(.96);}
.card-add svg{width:13px;height:13px;flex-shrink:0;color:var(--ink);}
.card-add.added{background:var(--glass-dark-bg-strong);color:var(--ink);}
.card-add.card-add-disabled{
  background:var(--line);color:var(--ink-soft);
  box-shadow:none;cursor:not-allowed;
}
.card-add.card-add-disabled:hover{background:var(--line);}

/* Success state — "Added to cart" confirmation, shown briefly after adding, and
   permanently on the "done" card state (tapping it opens the cart to adjust qty). */
.card-add-success{
  display:none;align-items:center;gap:5px;
}
.card-add.success,
.card-add.card-add-done{
  background:#fff;color:var(--ink);
  border:1.5px solid var(--line);
  box-shadow:none;
}
.card-add.success{cursor:default;pointer-events:none;}
.card-add.success .card-add-label,
.card-add.success .card-add-icon,
.card-add.success .card-add-dots,
.card-add.card-add-done .card-add-label,
.card-add.card-add-done .card-add-icon,
.card-add.card-add-done .card-add-dots{display:none;}
.card-add.success .card-add-success,
.card-add.card-add-done .card-add-success{display:flex;}
.card-add-success-icon{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:var(--green-800);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.card-add-success-icon svg{width:9px;height:9px;color:#fff;}
.card-add-success-icon svg path{stroke-width:3.2;}

/* Loading state — same shrink-to-circle + spinner pattern as login */
.card-add.loading{
  width:34px;height:34px;padding:0;gap:0;
  border-radius:50%;
  background:var(--glass-dark-bg-strong);
  color:var(--ink);
  cursor:default;
  pointer-events:none;
}
.card-add.loading .card-add-label,
.card-add.loading .card-add-icon{display:none;}
.card-add-dots{
  display:none;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;height:100%;
}
.card-add.loading .card-add-dots{display:flex;}
.card-add-dots span{
  width:5px;height:5px;border-radius:50%;
  background:var(--ink);
  animation:cardAddDotBounce 1s var(--ease-glass) infinite;
}
.card-add-dots span:nth-child(2){animation-delay:.15s;opacity:.85;}
.card-add-dots span:nth-child(3){animation-delay:.3s;opacity:.7;}
@keyframes cardAddDotBounce{
  0%, 80%, 100%{transform:translateY(0) scale(.8);opacity:.5;}
  40%{transform:translateY(-4px) scale(1);opacity:1;}
}

.card-qty{
  margin-top:10px;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--line);
  border-radius:0;
  padding:2px;
}
.card-qty .qty-btn{
  width:19px;height:19px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;
  border-radius:0;
  font-size:11px;font-weight:700;line-height:1;
  transition:background .15s;
}
.card-qty .qty-btn:hover{background:var(--ink-soft);}
.card-qty .qty-val{
  font-family:var(--font-display);font-size:10.5px;font-weight:700;color:var(--ink);
}
.swap-in{animation:cardSwapIn .28s var(--ease-glass);}

.card-remove-link{
  display:block;width:100%;margin-top:5px;
  background:none;border:none;padding:2px;
  font-size:9.5px;color:var(--ink-soft);
  text-align:center;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
  transition:color .15s;
}
.card-remove-link:hover{color:var(--red);}
@keyframes cardSwapIn{
  from{opacity:0;transform:scale(.9);}
  to{opacity:1;transform:scale(1);}
}

.empty-state{padding:60px 0;text-align:center;color:var(--ink-soft);font-size:14px;}

/* ============ Cart drawer ============ */
.drawer-backdrop, .menu-backdrop, .mobile-search-backdrop{
  position:fixed;inset:0;background:rgba(15,25,20,.32);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-glass);z-index:290;
  will-change:opacity;
}
.drawer-backdrop.show, .menu-backdrop.show, .mobile-search-backdrop.show{opacity:1;pointer-events:auto;}
.drawer-backdrop{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(15,25,20,.42);
  transition:opacity var(--drawer-backdrop-ms,.4s) ease;
}

.cart-drawer{
  --drawer-ms:.5s;
  --drawer-ease:cubic-bezier(.32,.72,0,1);
  position:fixed;top:0;right:0;height:100%;width:480px;max-width:92vw;
  /* Solid-ish panel instead of a live 26px backdrop blur: blurring the whole
     page on every frame of the slide is what made the drawer lag. */
  background:rgba(255,255,255,.97);
  border-left:1px solid var(--glass-border);
  z-index:300;
  display:flex;flex-direction:column;
  transform:translate3d(100%,0,0);
  visibility:hidden;
  transition:transform var(--drawer-ms) var(--drawer-ease), visibility 0s linear var(--drawer-ms);
  will-change:transform;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:-8px 0 40px rgba(15,58,46,.14);
}
.cart-drawer.open{
  transform:translate3d(0,0,0);
  visibility:visible;
  transition:transform var(--drawer-ms) var(--drawer-ease), visibility 0s linear 0s;
}

.mobile-menu{
  position:fixed;top:0;left:0;height:100%;width:300px;max-width:88vw;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-right:1px solid var(--glass-border);
  z-index:295; /* was 100 — sat BEHIND .menu-backdrop (290), same bug as .profile-menu */
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .4s var(--ease-glass);
  box-shadow:8px 0 40px rgba(15,58,46,.14);
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-body{
  position:relative;
  flex:1;overflow-y:auto;
  padding:12px 10px;
}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 26px;border-bottom:1px solid var(--line);
}
.drawer-head h3{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);}
.drawer-head .cart-item-count{font-family:var(--font-body,inherit);font-size:13px;font-weight:500;color:var(--ink-soft);}
.drawer-head button{font-size:26px;color:var(--ink-soft);line-height:1;}

/* ============ Mobile profile menu ============ */
.profile-menu{
  position:fixed;top:0;right:0;height:100%;width:100%;
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(46,140,108,.16), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(22,75,59,.10), transparent 55%),
    var(--glass-bg-strong);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  z-index:295; /* was 100 — sat BEHIND .menu-backdrop (290), which washed out the whole panel */
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s var(--ease-glass);
  box-shadow:-8px 0 40px rgba(15,58,46,.14);
}
.profile-menu.open{transform:translateX(0);}
.profile-menu-handle{display:none;} /* unused on the full-screen panel */
.profile-menu-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
  padding:28px 20px 20px;border-bottom:1px solid var(--glass-border);
}
.profile-menu-logo{height:320px;width:auto;display:block;}
.profile-menu-back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink-soft);font-size:13px;font-weight:700;
  padding:8px 14px 8px 10px;border-radius:999px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  transition:color .15s, background .15s, box-shadow .15s;flex-shrink:0;
}
.profile-menu-back:hover, .profile-menu-back:active{color:var(--ink);background:var(--glass-bg-strong);box-shadow:var(--glass-shadow-lg);}
.profile-menu-back svg{width:15px;height:15px;}
.profile-menu-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.profile-menu-body button{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:16px 18px;border-radius:16px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  font-size:15px;font-weight:700;color:var(--ink);
  transition:background .18s, box-shadow .18s, transform .18s;
}
.profile-menu-body button:active{background:var(--glass-bg-strong);box-shadow:var(--glass-shadow-lg);transform:scale(.98);}
.pm-row-icon{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;border-radius:12px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  color:var(--green-700);
}
.pm-row-icon svg{width:19px;height:19px;}
.pm-row-label{flex:1;}
.pm-row-chevron{width:16px;height:16px;color:var(--ink-soft);flex-shrink:0;}
#pmLogoutBtn{color:var(--red);}
#pmLogoutBtn .pm-row-icon{color:var(--red);}
#pmOrdersBtn{position:relative;}
#pmOrdersBtn.has-notif::after{
  content:'';
  position:absolute;top:16px;right:18px;
  width:8px;height:8px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.profile-menu-label{
  padding:11px 20px 7px;
  font-size:13px;color:var(--ink-soft);
  border-bottom:1px solid var(--glass-border);
}
@media (min-width:721px){
  .profile-menu, #profileMenuBackdrop{display:none;}
}

.mobile-search-backdrop{
  z-index:55; /* stays below the navbar (60) so the dropdown, which lives inside the navbar, is never covered */
}
/* ============ Mobile search panel (dropdown attached to navbar) ============ */
.mobile-search-panel{
  position:absolute;top:100%;left:0;right:0;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  z-index:70;
  box-shadow:var(--glass-shadow-lg);
  border-top:1px solid var(--glass-border);
  transform:translateY(-8px);opacity:0;
  transition:transform .26s var(--ease-glass), opacity .22s ease;
  pointer-events:none;
  display:flex;flex-direction:column;
  max-height:min(60vh,480px);
}
.mobile-search-panel.open{transform:translateY(0);opacity:1;pointer-events:auto;}
.mobile-search-bar{
  display:flex;align-items:center;gap:10px;
  padding:14px;border-bottom:1px solid var(--glass-border);
}
.mobile-search-pill{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--line);background:var(--cream);
  border-radius:999px;
  padding:0 16px;
  transition:border-color .15s, background .15s;
}
.mobile-search-pill:focus-within{border-color:var(--ink-soft);background:var(--white);}
.mobile-search-bar .search-icon{
  position:static;display:block;width:18px;height:18px;color:var(--ink-soft);flex-shrink:0;
}
.mobile-search-bar input{
  flex:1;min-width:0;border:none;background:transparent;
  padding:11px 0;font-size:16px;color:var(--ink);line-height:1.2;
}
.mobile-search-bar input:focus{outline:none;}
.mobile-search-close{font-size:24px;color:var(--ink-soft);line-height:1;flex-shrink:0;}

@media (max-width:720px){
  .mobile-search-panel{
    position:fixed;top:0;left:0;right:0;
    max-height:100vh; /* fallback for browsers without dvh support */
    max-height:100dvh; /* tracks the real visible area as mobile browser chrome shows/hides */
  }
}

.mobile-search-body{
  max-height:min(70vh,520px);overflow-y:auto;
  overscroll-behavior:contain;
  padding:6px 14px 18px;
}
@media (max-width:720px){
  .mobile-search-body{max-height:calc(100vh - 70px);} /* fallback */
  .mobile-search-body{max-height:calc(100dvh - 70px);}
}
.ms-section-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 2px 8px;
}
.ms-section-head span{font-size:12px;font-weight:700;color:var(--ink-soft);letter-spacing:.03em;text-transform:uppercase;}
.ms-clear-all{font-size:12px;font-weight:700;color:var(--ink-soft);}
.ms-clear-all:hover{color:var(--ink);text-decoration:underline;}

.ms-suggest-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 2px;
  border-bottom:1px solid var(--line);
}
.ms-suggest-row:last-child{border-bottom:none;}
.ms-row-icon{width:16px;height:16px;color:var(--ink-soft);flex-shrink:0;}
.ms-row-text{flex:1;font-size:13.5px;color:var(--ink);text-align:left;}
.ms-suggest-row .ms-row-icon{font-size:16px;width:20px;height:20px;overflow:hidden;border-radius:4px;}
.ms-suggest-row .ms-row-icon img{width:100%;height:100%;object-fit:cover;display:block;}
.ms-suggest-row .ms-row-icon img.img-missing{visibility:hidden;}
.ms-empty{padding:24px 2px;text-align:center;color:var(--ink-soft);font-size:13px;}

/* Recent searches — pill / tag layout */
.ms-recent-tags{
  display:flex;flex-wrap:wrap;gap:9px;
  padding:4px 2px 8px;
}
.ms-recent-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--cream);
  font-size:13px;font-weight:400;color:var(--ink);
  line-height:1;
  /* long terms truncate with an ellipsis instead of overflowing/clipping
     against the search panel's edge - see .ms-recent-tag-label below */
  max-width:min(280px, 78vw);
  transition:background .15s ease, border-color .15s ease;
}
.ms-recent-tag:hover{background:var(--green-100);border-color:var(--green-500);}
.ms-recent-tag-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0; /* required inside a flex item for text-overflow to kick in */
}
.ms-recent-tag-remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex-shrink:0;
  color:var(--ink-soft);font-size:15px;line-height:1;
}
.ms-recent-tag-remove:hover{color:var(--red);}

.drawer-body{flex:1;min-height:0;overflow-y:auto;padding:12px 24px;}
.cart-row{
  display:flex;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line);
}
.cart-row-media{
  width:84px;height:84px;background:var(--line);
  display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;
  overflow:hidden;
}
.cart-row-media .cart-row-img{width:100%;height:100%;object-fit:cover;display:block;}
.cart-row-media .cart-row-img.img-missing{visibility:hidden;}
.cart-row-info{flex:1;min-width:0;}
.cart-row-title{font-size:14px;font-weight:700;line-height:1.35;margin-bottom:6px;}
.cart-row-price{font-size:14px;color:var(--ink-soft);font-weight:700;}
.cart-row-qty{
  display:flex;align-items:center;gap:10px;margin-top:10px;
}
.cart-row-qty button{
  width:28px;height:28px;background:var(--cream);
  border:1px solid var(--line);font-size:13px;display:flex;align-items:center;justify-content:center;
}
.cart-row-qty span{font-size:14px;font-weight:700;min-width:20px;text-align:center;}
.cart-row-remove{color:var(--red);font-size:11px;font-weight:700;margin-top:4px;}
.cart-row-delete{
  align-self:center;flex-shrink:0;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);background:transparent;border:none;
  transition:color .15s ease;
}
.cart-row-delete svg{width:17px;height:17px;}
.cart-row-delete:hover,
.cart-row-delete:focus-visible{color:var(--red);}
.cart-empty{padding:50px 10px;text-align:center;color:var(--ink-soft);font-size:13.5px;}

.drawer-foot{padding:20px 26px calc(26px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.drawer-subtotal{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;font-size:15px;
}
.drawer-subtotal strong{font-family:var(--font-display);font-size:21px;color:var(--ink);}
.checkout-btn{
  width:100%;background:var(--green-800);color:var(--cream);
  border:1px solid var(--green-800);box-shadow:none;
  padding:15px;font-weight:700;font-size:15px;
  transition:background .15s, color .15s;
}
.checkout-btn:hover,
.checkout-btn:focus-visible,
.checkout-btn:active{background:var(--green-900);color:var(--cream);}

/* ============ Install App banner ============ */
.install-banner{
  position:fixed;right:20px;bottom:20px;left:auto;
  display:flex;align-items:center;gap:12px;
  width:min(380px, calc(100vw - 40px));
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 18px 44px rgba(15,58,46,.18), 0 1px 0 rgba(255,255,255,.7) inset;
  /* Must sit BELOW the cart drawer (300) / backdrops (290) / modals, otherwise
     it covers the drawer's Subtotal + Checkout button. */
  z-index:280;
  animation:installBannerIn .35s var(--ease-glass);
}
.install-banner[hidden]{display:none;}
.install-banner-icon{
  width:40px;height:40px;flex-shrink:0;
  border-radius:11px;object-fit:cover;
  background:var(--green-100);
  border:1px solid var(--line);
}
.install-banner-text{
  display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;
}
.install-banner-text strong{font-size:13.5px;font-weight:700;color:var(--ink);}
.install-banner-text span{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.install-banner-cta{
  flex-shrink:0;
  background:var(--green-700);color:var(--white);
  border:none;border-radius:0;
  padding:9px 16px;font-size:12.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:background .15s;
}
.install-banner-cta:hover,
.install-banner-cta:focus-visible{background:var(--green-900);}
.install-banner-close{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;margin-left:2px;
  background:none;border:none;color:var(--ink-soft);cursor:pointer;
  border-radius:50%;transition:background .15s,color .15s;
}
.install-banner-close:hover,
.install-banner-close:focus-visible{background:var(--green-100);color:var(--ink);}
.install-banner-close svg{width:15px;height:15px;}

@keyframes installBannerIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* Mobile: full-width bar pinned to the bottom instead of a floating card */
@media (max-width:560px){
  .install-banner{
    left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
    width:auto;padding:10px 10px 10px 12px;
  }
  .install-banner-text span{white-space:normal;}
}

/* Phones/tablets ≤720px show the bottom tab bar (Home / Categories / Orders /
   Profile) — lift the banner above it so it doesn't cover the tabs. */
@media (max-width:720px){
  body.has-bottom-nav .install-banner{
    bottom:calc(86px + env(safe-area-inset-bottom));
  }
}

/* ============ Toast (glass) ============ */
.toast{
  position:fixed;top:calc(20px + env(safe-area-inset-top));bottom:auto;left:50%;
  transform:translateX(-50%) translateY(-18px) scale(.95);
  display:flex;align-items:center;gap:10px;
  width:max-content;
  max-width:calc(100vw - 40px);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:999px;
  color:var(--ink);
  padding:11px 18px 11px 13px;font-size:12.5px;font-weight:600;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-glass), transform .3s var(--ease-glass);
  z-index:1300;
  box-shadow:0 14px 34px rgba(15,58,46,.16), 0 1px 0 rgba(255,255,255,.7) inset;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
.toast-icon{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg, var(--green-500), var(--green-700));
  color:#fff;
  box-shadow:0 4px 10px rgba(46,140,108,.35);
}
.toast[data-toast-type="error"] .toast-icon{
  background:linear-gradient(145deg, #e05a4e, #b3261e);
  box-shadow:0 4px 10px rgba(179,38,30,.35);
}
.toast[data-toast-type="info"] .toast-icon{
  background:linear-gradient(145deg, #8a9199, #5f6368);
  box-shadow:0 4px 10px rgba(95,99,104,.3);
}
.toast-icon svg{width:13px;height:13px;}
.toast-icon.pop{animation:toastIconPop .4s var(--ease-glass);}
@keyframes toastIconPop{
  0%{transform:scale(0) rotate(-16deg);}
  60%{transform:scale(1.22) rotate(5deg);}
  100%{transform:scale(1) rotate(0);}
}

.toast-msg{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.toast-text{display:flex;flex-direction:column;gap:1px;text-align:left;min-width:0;}
.toast-title{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.toast-sub{font-size:11px;font-weight:500;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media (max-width:720px){
  .toast{top:calc(14px + env(safe-area-inset-top));bottom:auto;}
}

/* ============ Login success animation ============ */
.login-success{
  position:fixed;inset:0;z-index:1600;
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;pointer-events:none;
}
.login-success.show{visibility:visible;pointer-events:auto;cursor:pointer;}
.ls-backdrop{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 42%, rgba(46,140,108,.28), rgba(10,28,21,.62) 72%);
  opacity:0;
  transition:opacity .45s ease;
}
.login-success.show .ls-backdrop{
  opacity:1;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
.login-success.leaving .ls-backdrop{opacity:0;}

.ls-card{
  position:relative;overflow:hidden;
  width:min(330px, calc(100vw - 48px));
  padding:40px 28px 34px;
  text-align:center;
  background:linear-gradient(165deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:30px;
  box-shadow:0 34px 90px rgba(6,26,19,.38), 0 1px 0 rgba(255,255,255,.9) inset;
  opacity:0;transform:translateY(26px) scale(.9);
}
/* soft light sweep across the card */
.ls-card::before{
  content:'';position:absolute;top:-40%;left:-60%;width:50%;height:180%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(12deg) translateX(0);
  opacity:0;pointer-events:none;
}
.login-success.show .ls-card{animation:lsCardIn .65s var(--ease-glass) .05s forwards;}
.login-success.show .ls-card::before{animation:lsSweep 1.1s ease-out .95s forwards;}
.login-success.leaving .ls-card{animation:lsCardOut .42s cubic-bezier(.5,0,.9,.4) forwards;}
@keyframes lsCardIn{
  0%{opacity:0;transform:translateY(26px) scale(.9);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes lsCardOut{
  0%{opacity:1;transform:translateY(0) scale(1);}
  100%{opacity:0;transform:translateY(-14px) scale(.94);}
}
@keyframes lsSweep{
  0%{opacity:0;transform:rotate(12deg) translateX(0);}
  25%{opacity:1;}
  100%{opacity:0;transform:rotate(12deg) translateX(560%);}
}

/* ---- badge: disc + drawn ring + drawn tick ---- */
.ls-badge{position:relative;width:104px;height:104px;margin:0 auto 22px;}
.ls-svg{position:relative;z-index:2;width:100%;height:100%;overflow:visible;}
.ls-disc{
  transform-box:fill-box;transform-origin:center;
  transform:scale(0);
  filter:drop-shadow(0 10px 18px rgba(22,75,59,.35));
}
.login-success.show .ls-disc{animation:lsDisc .6s cubic-bezier(.34,1.56,.64,1) .2s forwards;}
@keyframes lsDisc{0%{transform:scale(0);}100%{transform:scale(1);}}

.ls-ring{
  stroke:#2E8C6C;stroke-width:2.6;stroke-linecap:round;fill:none;
  stroke-dasharray:1;stroke-dashoffset:1;
  transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);
}
.login-success.show .ls-ring{animation:lsDraw .8s cubic-bezier(.65,0,.35,1) .3s forwards;}

.ls-tick{
  stroke:#fff;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;fill:none;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.login-success.show .ls-tick{animation:lsDraw .45s cubic-bezier(.65,0,.35,1) .72s forwards;}
@keyframes lsDraw{to{stroke-dashoffset:0;}}

/* expanding pulse rings behind the badge */
.ls-pulse{
  position:absolute;inset:8px;border-radius:50%;
  border:2px solid rgba(46,140,108,.55);
  opacity:0;transform:scale(.7);
}
.login-success.show .ls-pulse-1{animation:lsPulse 1.3s ease-out .75s forwards;}
.login-success.show .ls-pulse-2{animation:lsPulse 1.3s ease-out .98s forwards;}
@keyframes lsPulse{
  0%{opacity:.7;transform:scale(.8);}
  100%{opacity:0;transform:scale(1.9);}
}

/* confetti burst */
.ls-particles{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;}
.ls-particle{
  position:absolute;left:0;top:0;
  width:var(--size);height:var(--size);
  margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius:50%;
  opacity:0;transform:translate(0,0) scale(0);
}
.ls-particle.is-bar{border-radius:2px;height:calc(var(--size) * .45);}
.login-success.show .ls-particle{animation:lsBurst 1.05s cubic-bezier(.16,.84,.3,1) var(--delay) forwards;}
@keyframes lsBurst{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(0);}
  15%{opacity:1;}
  70%{opacity:1;}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1);}
}

/* ---- text ---- */
.ls-title{
  font-family:var(--font-display);
  font-size:22px;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);
  opacity:0;transform:translateY(12px);
}
.ls-sub{
  margin-top:6px;
  font-size:14px;font-weight:500;color:var(--ink-soft);
  opacity:0;transform:translateY(12px);
}
.login-success.show .ls-title{animation:lsUp .55s var(--ease-glass) .85s forwards;}
.login-success.show .ls-sub{animation:lsUp .55s var(--ease-glass) 1s forwards;}
@keyframes lsUp{to{opacity:1;transform:translateY(0);}}

/* auto-dismiss countdown bar */
.ls-progress{
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background:rgba(22,75,59,.08);
}
.ls-progress span{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg, #2E8C6C, #3FA57F, #E9C46A);
  transform-origin:left center;transform:scaleX(1);
}
.login-success.show .ls-progress span{animation:lsCountdown 2.1s linear .7s forwards;}
@keyframes lsCountdown{to{transform:scaleX(0);}}

@media (prefers-reduced-motion: reduce){
  .login-success .ls-card,
  .login-success .ls-card::before,
  .login-success .ls-disc,
  .login-success .ls-ring,
  .login-success .ls-tick,
  .login-success .ls-title,
  .login-success .ls-sub,
  .login-success .ls-progress span{animation:none!important;}
  .ls-card{opacity:1;transform:none;transition:opacity .2s;}
  .ls-disc{transform:none;}
  .ls-ring,.ls-tick{stroke-dashoffset:0;}
  .ls-title,.ls-sub{opacity:1;transform:none;}
  .ls-pulse,.ls-particles,.ls-progress{display:none;}
}

/* ============ Order status notifications (glass popups) ============ */
.order-notif-stack{
  position:fixed;
  top:calc(16px + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  width:min(380px, calc(100vw - 32px));
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:600;
  pointer-events:none;
}
.order-notif{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--glass-shadow-lg);
  cursor:pointer;
  opacity:0;
  transform:translateY(-16px) scale(.96);
  transition:opacity .38s var(--ease-glass), transform .38s var(--ease-glass);
}
.order-notif.show{opacity:1;transform:translateY(0) scale(1);}
.order-notif.hide{opacity:0;transform:translateY(-10px) scale(.97);}
.order-notif-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.order-notif-icon svg{width:19px;height:19px;}
.order-notif-icon.processing{background:#C68A00;}
.order-notif-icon.delivery{background:#1B5EAE;}
.order-notif-icon.delivered{background:var(--green-600);}
.order-notif-body{flex:1;min-width:0;}
.order-notif-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.order-notif-title{font-size:13.5px;font-weight:700;color:var(--ink);}
.order-notif-close{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);background:transparent;transition:background .15s;
}
.order-notif-close svg{width:12px;height:12px;}
.order-notif-close:hover{background:rgba(0,0,0,.06);}
.order-notif-sub{display:block;font-size:12.5px;font-weight:500;color:var(--ink-soft);margin-top:2px;line-height:1.4;}
.order-notif-id{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);margin-top:6px;letter-spacing:.02em;}

@media (max-width:720px){
  .order-notif-stack{
    top:calc(14px + env(safe-area-inset-top));
    width:calc(100vw - 24px);
  }
}
@media (prefers-reduced-motion:reduce){
  .order-notif{transition:opacity .2s linear;}
}

/* ============ "Enable device notifications" prompt ============ */
.notif-prompt{
  display:flex;align-items:center;gap:12px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:13px 14px;
  margin-bottom:16px;
  box-shadow:var(--glass-shadow);
  text-align:left;
}
.notif-prompt[hidden]{display:none;}
.notif-prompt-icon{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:var(--line);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
}
.notif-prompt-icon svg{width:17px;height:17px;}
.notif-prompt-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.notif-prompt-text strong{font-size:12.5px;font-weight:700;color:var(--ink);}
.notif-prompt-text span{font-size:11.5px;font-weight:500;color:var(--ink-soft);line-height:1.35;}
.notif-prompt-btn{
  flex-shrink:0;padding:9px 16px;
  background:var(--glass-dark-bg);color:var(--ink);
  backdrop-filter:var(--glass-dark-blur);-webkit-backdrop-filter:var(--glass-dark-blur);
  border:1px solid var(--glass-dark-border);box-shadow:var(--glass-dark-shadow);
  font-size:12px;font-weight:700;
  border-radius:999px;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .15s, width .3s var(--ease-glass), height .3s var(--ease-glass),
    border-radius .3s var(--ease-glass), padding .3s var(--ease-glass);
}
.notif-prompt-btn:hover{background:var(--ink-soft);}
.notif-prompt-btn:disabled{background:var(--line);color:var(--ink-soft);cursor:default;}

/* Loading state — same shrink-to-circle + bouncing dots as Add to Cart */
.notif-btn-dots,.notif-btn-success{display:none;align-items:center;gap:5px;}
.notif-prompt-btn.loading{
  width:34px;height:34px;padding:0;border-radius:50%;
  cursor:default;pointer-events:none;
}
.notif-prompt-btn.loading .notif-btn-label{display:none;}
.notif-prompt-btn.loading .notif-btn-dots{display:flex;}
.notif-btn-dots span{
  width:5px;height:5px;border-radius:50%;background:var(--ink);
  animation:cardAddDotBounce 1s var(--ease-glass) infinite;
}
.notif-btn-dots span:nth-child(2){animation-delay:.15s;opacity:.85;}
.notif-btn-dots span:nth-child(3){animation-delay:.3s;opacity:.7;}

/* Success state — brief "Enabled" confirmation before morphing into the toggle */
.notif-prompt-btn.success{
  background:#fff;color:var(--ink);
  border:1.5px solid var(--ink-soft);
  cursor:default;pointer-events:none;
}
.notif-prompt-btn.success .notif-btn-label,
.notif-prompt-btn.success .notif-btn-dots{display:none;}
.notif-prompt-btn.success .notif-btn-success{display:flex;}
.notif-btn-success-icon{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(145deg, var(--green-500), var(--green-700));color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.notif-btn-success-icon svg{width:8px;height:8px;}

/* Persistent on/off toggle shown inline once notifications are granted */
.notif-prompt-action{flex-shrink:0;}
.notif-inline-toggle-wrap{
  display:flex;align-items:center;gap:8px;
  animation:notifTogglePop .28s var(--ease-glass);
}
.notif-toggle-caption{
  font-size:11.5px;font-weight:700;color:var(--ink-soft);
  min-width:20px;text-align:right;
}
/* Loading state — same shrink-to-circle + bouncing dots as Add to Cart,
   shown briefly while a toggle change is "processing". */
.notif-toggle-dots{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(145deg, var(--green-500), var(--green-700));
  display:flex;align-items:center;justify-content:center;gap:5px;
  box-shadow:0 4px 10px rgba(46,140,108,.35);
  animation:notifTogglePop .28s var(--ease-glass);
}
.notif-toggle-dots span{
  width:5px;height:5px;border-radius:50%;background:#fff;
  animation:cardAddDotBounce 1s var(--ease-glass) infinite;
}
.notif-toggle-dots span:nth-child(2){animation-delay:.15s;opacity:.85;}
.notif-toggle-dots span:nth-child(3){animation-delay:.3s;opacity:.7;}
@keyframes notifTogglePop{
  0%{transform:scale(.5);opacity:0;}
  60%{transform:scale(1.08);opacity:1;}
  100%{transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .notif-inline-toggle-wrap,.notif-toggle-dots{animation:none;}
}
@media (max-width:520px){
  .notif-prompt{flex-wrap:wrap;}
  .notif-prompt-btn{width:100%;}
}

/* ============ Auth modal (Login / Register) ============ */
.auth-backdrop{
  position:fixed;inset:0;background:rgba(15,25,20,.4);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-glass);z-index:390;
}
.auth-backdrop.show{opacity:1;pointer-events:auto;}

.auth-modal{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-glass);
}
.auth-modal.open{opacity:1;pointer-events:auto;}

.auth-card{
  position:relative;width:100%;max-width:400px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:0;
  box-shadow:var(--glass-shadow-lg);
  transform:translateY(14px) scale(.97);
  transition:transform .38s var(--ease-glass), max-width .3s ease;
}
.auth-card-scroll{
  max-height:94vh;overflow-y:auto;
  padding:clamp(18px,3.4vh,32px) 28px clamp(14px,2.6vh,26px);
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* old Edge/IE */
}
.auth-card-scroll::-webkit-scrollbar{display:none;width:0;height:0;} /* Chrome/Safari */
.auth-modal.open .auth-card{transform:translateY(0) scale(1);}

@media (min-width: 721px){
  /* Slightly wider card on desktop (padding stays on .auth-card-scroll — no double padding) */
  .auth-card-login{max-width:460px;}
}

/* Only go for the bigger desktop type scale when there's also enough vertical
   room — on short/laptop windows this stays compact so nothing overflows. */
@media (min-width: 721px) and (min-height: 720px){
  .auth-card-login .auth-head h2{font-size:25px;}
  .auth-card-login .auth-head p{font-size:14px;}
  .auth-card-login .auth-field input{padding:13px 15px;font-size:14.5px;}
  .auth-card-login .auth-submit-btn{padding:15px;font-size:15px;}
}

.auth-card-wrap{position:relative;width:100%;display:flex;justify-content:center;}
.auth-close{
  position:absolute;top:-14px;right:-14px;z-index:6;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  background:var(--white);
  border-radius:50%;
  box-shadow:0 4px 14px rgba(15,25,20,.2);
  transition:background .15s, color .15s;
}
.auth-close svg{display:block;flex-shrink:0;}
.auth-close:hover{background:var(--green-100);}
@media (max-width:520px){
  .auth-close{top:-10px;right:-10px;width:28px;height:28px;}
  .auth-close svg{width:14px;height:14px;}
}

.auth-head{margin-bottom:clamp(14px,2.6vh,24px);text-align:left;}
.auth-head-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.auth-head-icon{
  display:flex;align-items:center;justify-content:center;
  color:var(--green-800);flex-shrink:0;
}
.auth-head-icon svg[hidden]{display:none;}
.auth-head h2{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);}
.auth-head p{font-size:13px;color:var(--ink-soft);}

/* Fade + rise the form content in whenever it switches from hidden -> visible,
   so the mobile-number <-> OTP step change feels intentional, not just a
   card resize. */
#mobileForm:not([hidden]),
#otpForm:not([hidden]){
  animation:authFormIn .38s var(--ease-glass);
}
@keyframes authFormIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  #mobileForm:not([hidden]),
  #otpForm:not([hidden]){animation:none;}
}

.auth-form{display:flex;flex-direction:column;gap:clamp(9px,1.6vh,14px);}
.auth-form[hidden]{display:none;}

.auth-terms{
  font-size:12px;line-height:1.6;color:var(--ink-soft);text-align:center;
  margin:2px 0 0;padding:0 6px;
}
.auth-terms a{color:var(--ink-soft);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.auth-terms a:hover{color:var(--ink);}
.auth-terms-links{white-space:nowrap;}

.auth-mobile-wrap{
  display:flex;align-items:stretch;
  border:1.5px solid var(--glass-border);
  background:rgba(255,255,255,.6);
  border-radius:0;
  transition:border-color .15s, background .15s;
}
.auth-mobile-wrap:focus-within{border-color:var(--ink-soft);background:#fff;}
.auth-mobile-prefix{
  display:flex;align-items:center;
  padding:clamp(8px,1.4vh,11px) 12px;
  font-size:16px;font-weight:700;color:var(--ink-soft);
  border-right:1.5px solid var(--glass-border);
  white-space:nowrap;
}
@media (min-width: 721px) and (min-height: 720px){
  .auth-mobile-prefix{font-size:13.5px;}
}
.auth-mobile-wrap input{
  flex:1;min-width:0;
  border:none;background:transparent;
  padding:clamp(8px,1.4vh,11px) 13px;
  font-size:16px;color:var(--ink);
}
@media (min-width: 721px) and (min-height: 720px){
  .auth-mobile-wrap input{font-size:13.5px;}
}
.auth-mobile-wrap input:focus{outline:none;}
.auth-field.has-error .auth-mobile-wrap{border-color:var(--red);background:var(--red-bg);}
.auth-field.has-error .auth-mobile-wrap:focus-within{background:#fff;}

.auth-password-wrap{position:relative;}
.auth-password-wrap input{width:100%;padding-right:42px;}
.auth-eye-btn{
  position:absolute;top:50%;right:10px;transform:translateY(-50%);
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:11px;font-weight:700;
}
.auth-eye-btn:hover{color:var(--ink);}
.auth-eye-btn svg{width:19px;height:19px;}
.auth-eye-btn .eye-open{display:block;}
.auth-eye-btn .eye-closed{display:none;}
.auth-eye-btn.showing .eye-open{display:none;}
.auth-eye-btn.showing .eye-closed{display:block;}
.auth-field{display:flex;flex-direction:column;gap:6px;}
.auth-field[hidden]{display:none;} /* display:flex was overriding the hidden attribute, so the mobile field showed on Sign In */
.auth-field span{font-size:12px;font-weight:700;color:var(--ink-soft);}
.auth-field input{
  padding:clamp(8px,1.4vh,11px) 13px;
  border:1.5px solid var(--glass-border);
  background:rgba(255,255,255,.6);
  border-radius:0;
  font-size:16px;color:var(--ink);
  transition:border-color .15s, background .15s;
}
@media (min-width: 721px) and (min-height: 720px){
  .auth-field input{font-size:13.5px;}
}
.auth-field input:focus{outline:none;border-color:var(--ink-soft);background:#fff;}

.field-error{
  color:var(--red);font-size:11.5px;font-weight:700;margin-top:-2px;
}
.auth-field.has-error input,
.auth-field.has-error select{
  border-color:var(--red);background:var(--red-bg);
}
.auth-field.has-error input:focus,
.auth-field.has-error select:focus{background:#fff;}

.auth-submit-btn{
  margin-top:4px;
  padding:clamp(9px,1.8vh,13px);
  background:var(--green-800);
  color:var(--cream);
  border:1px solid var(--green-800);
  box-shadow:none;
  border-radius:0;
  font-size:14px;font-weight:700;
  transition:background .15s ease;
}
.auth-submit-btn:hover{background:var(--green-900);color:var(--cream);}
.auth-submit-btn:active{background:var(--green-900);}

.auth-google-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:clamp(9px,1.8vh,13px);
  background:var(--white);color:var(--ink);
  border:1px solid var(--line);
  border-radius:0;
  font-size:14px;font-weight:600;
  transition:background .15s ease, border-color .15s ease;
  margin-bottom:2px;
}
.auth-google-btn:hover{background:var(--cream);border-color:var(--line-strong,var(--line));}
.auth-google-btn:active{background:var(--cream);}
.auth-or-divider{
  display:flex;align-items:center;gap:10px;
  margin:2px 0 4px;
  color:var(--ink-soft);font-size:12px;
}
.auth-or-divider::before,
.auth-or-divider::after{content:'';flex:1;height:1px;background:var(--line);}

.auth-switch{
  margin-top:2px;text-align:center;font-size:12.5px;color:var(--ink-soft);
}
.auth-switch button{
  color:var(--green-700);font-weight:700;text-decoration:underline;
  text-underline-offset:2px;padding:2px;
}
.auth-switch button:hover{color:var(--green-900);}

.auth-otp-demo{
  font-size:12px;font-weight:700;color:var(--green-700);
  background:var(--green-100);border:1px dashed var(--green-500);
  padding:9px 11px;margin:0;
}
.auth-otp-demo.is-error{
  color:#b3261e;background:#fdecea;border-color:#f3a29c;
}
.otp-boxes{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(6px,1.6vw,10px);
}
.otp-box{
  width:100%;
  height:clamp(44px,9vh,54px);
  padding:0;
  border:1.5px solid var(--glass-border);
  background:rgba(255,255,255,.6);
  border-radius:0;
  font-size:19px;font-weight:800;color:var(--ink);text-align:center;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.otp-box:focus{
  outline:none;
  border-color:var(--green-700);
  background:#fff;
  box-shadow:0 0 0 3px rgba(35,114,89,.15);
}
.otp-box.filled{animation:otpPop .22s var(--ease-glass);}
.otp-box.error{border-color:var(--red);background:var(--red-bg);}
@keyframes otpPop{
  0%{transform:scale(1);}
  45%{transform:scale(1.14);border-color:var(--green-700);}
  100%{transform:scale(1);}
}
.otp-boxes.shake{animation:otpShake .42s ease;}
@keyframes otpShake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-5px);}
  40%,60%{transform:translateX(5px);}
}
@media (prefers-reduced-motion: reduce){
  .otp-box.filled{animation:none;}
  .otp-boxes.shake{animation:none;}
}

.auth-otp-links{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:4px;text-align:center;
  font-size:12.5px;color:var(--ink-soft);
}
.auth-otp-links button{
  color:var(--ink-soft);font-weight:700;
  text-decoration:underline;text-underline-offset:2px;
  padding:2px;
}
.auth-otp-links button:hover{color:var(--ink);}
.auth-otp-dot{color:var(--glass-border);}

/* ============ Onboarding modal (first login setup) ============ */
.onboard-backdrop{
  position:fixed;inset:0;background:rgba(15,25,20,.4);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-glass);z-index:390;
}
.onboard-backdrop.show{opacity:1;pointer-events:auto;}

.onboard-modal{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;
  overflow-y:auto;
  padding:40px 20px;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-glass);
}
.onboard-modal.open{opacity:1;pointer-events:auto;}

.onboard-card{
  margin:auto;
  position:relative;width:100%;max-width:520px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:18px;
  box-shadow:var(--glass-shadow-lg);
  padding:36px 40px 40px;
  transform:translateY(14px) scale(.98);
  transition:transform .38s var(--ease-glass);
}
.onboard-modal.open .onboard-card{transform:translateY(0) scale(1);}

.onboard-close-btn{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:var(--ink-soft);
  border-radius:50%;transition:background .15s;
}
.onboard-close-btn:hover{background:rgba(15,58,46,.08);}

.cd-address-input{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--glass-border);
  background:rgba(255,255,255,.6);
  font-size:16px;color:var(--ink);
  transition:border-color .15s, background .15s;
}
.cd-address-input:focus{outline:none;border-color:var(--ink-soft);background:#fff;}
#cdLocationField.address-error .cd-address-input{border-color:var(--red);background:var(--red-bg);}
#cdLocationField.address-error .cd-address-input:focus{background:#fff;}

.onboard-title{
  font-family:var(--font-display);
  font-size:22px;font-weight:700;color:var(--ink);
  text-align:center;margin-bottom:8px;
}
.onboard-sub{
  font-size:13.5px;color:var(--ink-soft);text-align:center;
  max-width:400px;margin:0 auto 26px;line-height:1.5;
}

.onboard-form{display:flex;flex-direction:column;gap:16px;}
.onboard-form select{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:0;
  background:#fff;
  font-size:16px;color:var(--ink);
  appearance:auto;
}
.onboard-form select:focus{outline:none;border-color:var(--ink);}
.onboard-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.onboard-submit-btn{
  margin-top:6px;
  padding:14px;
  background:var(--green-800);color:#fff;
  font-size:14.5px;font-weight:700;
  transition:background .15s;
}
.onboard-submit-btn:hover{background:var(--green-900);}

@media (max-width:560px){
  .onboard-card{padding:28px 22px 30px;}
  .onboard-row{grid-template-columns:1fr;}
}

/* ============ Delivery Details modal — fullscreen sheet (web + mobile) ============ */
.onboard-modal.cd-fullscreen{
  padding:0;
  align-items:stretch;justify-content:stretch;
}
.onboard-modal.cd-fullscreen .cd-fullscreen-card{
  margin:0;
  width:100%;max-width:none;
  height:100dvh;min-height:100dvh;
  border-radius:0;border:none;box-shadow:none;
  padding:0;
  display:flex;flex-direction:column;
  overflow-y:auto;
  transform:translateY(22px);
}
.onboard-modal.cd-fullscreen.open .cd-fullscreen-card{transform:translateY(0);}

.cd-fullscreen-header{
  position:sticky;top:0;z-index:3;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  padding:18px 56px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
}
.cd-fullscreen-header .onboard-title{margin:0;font-size:18px;}
.cd-fullscreen-header .onboard-close-btn{position:absolute;left:14px;top:50%;transform:translateY(-50%);}

.cd-fullscreen-form{flex:1;display:flex;flex-direction:column;min-height:0;gap:0;}

.cd-fullscreen-body{flex:1;padding:24px 24px 8px;}
.cd-fullscreen-inner{max-width:520px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:16px;}
.cd-fullscreen-body .onboard-sub{text-align:left;margin:0;max-width:none;}

.cd-fullscreen-footer{
  position:sticky;bottom:0;flex-shrink:0;
  padding:16px 24px calc(16px + env(safe-area-inset-bottom));
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-top:1px solid var(--glass-border);
}
.cd-fullscreen-footer .onboard-submit-btn{margin-top:0;width:100%;}

@media (min-width:900px){
  .cd-fullscreen-inner{max-width:560px;}
}
.cd-fullscreen-inner.ck-layout{max-width:560px;}

@media (min-width:1000px){
  .cd-fullscreen-inner.ck-layout{
    max-width:960px;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:32px;
  }
  .ck-main{flex:1;min-width:0;}
  .ck-side{
    width:340px;flex-shrink:0;
    position:sticky;top:24px;
    display:flex;flex-direction:column;gap:16px;
  }
}

/* ============ Checkout sections (contact / items / summary / delivery / payment) ============ */
.ck-main{display:flex;flex-direction:column;}
.ck-side{margin-top:22px;}
.ck-side .ck-section{margin-top:0;padding-top:0;border-top:none;}
.ck-side-head{
  font-family:var(--font-display);font-size:16px;font-weight:700;
  color:var(--ink);margin-bottom:14px;
}
.ck-secure-box{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--line);border-radius:10px;padding:14px 16px;
}
.ck-secure-icon{width:20px;height:20px;flex-shrink:0;color:var(--ink-soft);margin-top:1px;}
.ck-secure-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.ck-secure-sub{font-size:11.5px;color:var(--ink-soft);line-height:1.5;}
.ck-section{padding-top:4px;border-top:1px solid var(--line);}
.ck-section:first-child{padding-top:0;border-top:none;}
.ck-section + .ck-section{margin-top:22px;padding-top:22px;}

.ck-section-head{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:15px;font-weight:700;color:var(--ink);
  margin-bottom:14px;
}
.ck-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--line);color:var(--ink);
  font-size:12px;font-weight:800;flex-shrink:0;
}
.ck-item-count{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-soft);}

/* Contact */
.ck-contact-box{
  background:var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:14px;
}
.ck-contact-name{font-size:14px;font-weight:700;color:var(--ink);}
.ck-contact-mobile{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}

/* Items */
.ck-items{display:flex;flex-direction:column;gap:12px;}
.ck-item-row{display:flex;gap:12px;align-items:center;}
.ck-item-media{
  width:48px;height:48px;flex-shrink:0;border-radius:8px;
  background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ck-item-media img{width:100%;height:100%;object-fit:cover;}
.ck-item-media img.img-missing{display:none;}
.ck-item-info{flex:1;min-width:0;}
.ck-item-name{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;}
.ck-item-meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.ck-item-qty{display:flex;align-items:center;gap:8px;margin-top:6px;}
.ck-item-qty button{
  width:24px;height:24px;border-radius:6px;border:1px solid var(--line);
  background:#fff;font-size:14px;line-height:1;color:var(--ink);font-weight:700;
}
.ck-item-qty span{font-size:13px;font-weight:700;min-width:16px;text-align:center;}
.ck-item-remove{margin-left:6px;font-size:11px;color:var(--red);text-decoration:underline;}
.ck-item-price{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;flex-shrink:0;}
.ck-items-empty{font-size:13px;color:var(--ink-soft);padding:8px 0;}

/* Order summary */
.ck-summary-box{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.ck-summary-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink);margin-bottom:8px;}
.ck-summary-row.ck-muted{color:var(--ink-soft);font-size:12.5px;}
.ck-summary-row .ck-complimentary{color:var(--ink-soft);font-weight:700;}
.ck-summary-divider{border-top:1px dashed var(--line);margin:10px 0;}
.ck-summary-row.ck-total{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.ck-price-note{font-size:11px;color:var(--ink-soft);margin:0 0 12px;}
.ck-coupon-row{display:flex;gap:8px;margin-bottom:8px;}
.ck-coupon-row input{
  flex:1;padding:10px 12px;border:1.5px solid var(--line);background:#fff;
  font-size:16px;color:var(--ink);
}
.ck-coupon-row input:focus{outline:none;border-color:var(--ink-soft);}
.ck-coupon-btn{padding:0 16px;background:var(--glass-dark-bg);color:var(--ink);backdrop-filter:var(--glass-dark-blur);-webkit-backdrop-filter:var(--glass-dark-blur);border:1px solid var(--glass-dark-border);font-size:12.5px;font-weight:700;}
.ck-coupon-btn:hover{background:var(--glass-dark-bg-strong);}
.ck-loyalty-note{font-size:11.5px;color:var(--ink-soft);margin-top:6px;}

/* Delivery tabs */
.ck-tabs{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.ck-tab{
  flex:1;min-width:130px;text-align:left;
  border:1.5px solid var(--line);border-radius:0;
  padding:12px 14px;background:#fff;
  display:flex;flex-direction:column;gap:3px;
  transition:border-color .15s, background .15s;
}
.ck-tab.active{border-color:var(--ink);border-width:2px;background:#fff;}
.ck-tab-title{font-size:13px;font-weight:600;color:var(--ink);}
.ck-tab-sub{font-size:11px;color:var(--ink-soft);line-height:1.3;}
.ck-tab.active .ck-tab-title{color:var(--ink);}

.ck-method-panel{display:flex;flex-direction:column;gap:14px;}
.ck-method-panel[hidden]{display:none;}
.ck-pickup-store{
  font-size:13px;font-weight:600;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--ink);border-radius:0;padding:10px 14px;
  text-align:center;
}
.ck-pickup-label{font-size:12px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.ck-pickup-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.ck-pickup-day{
  flex-shrink:0;padding:9px 13px;border:1.5px solid var(--line);border-radius:0;
  font-size:12px;font-weight:600;color:var(--ink);background:#fff;white-space:nowrap;
}
.ck-pickup-day.active{background:var(--glass-dark-bg);border-color:var(--glass-dark-border);backdrop-filter:var(--glass-dark-blur);-webkit-backdrop-filter:var(--glass-dark-blur);color:var(--ink);}
.ck-pickup-slot{
  border:1.5px solid var(--line);border-radius:0;padding:12px 14px;
  display:flex;flex-direction:column;gap:2px;
}
.ck-pickup-slot.active{border-color:var(--ink);border-width:2px;background:#fff;}
.ck-pickup-slot span:first-child{font-size:13.5px;font-weight:600;color:var(--ink);}
.ck-slot-sub{font-size:11px;color:var(--ink-soft);}
.ck-hours-box{background:var(--cream);border-radius:0;padding:12px 14px;}
.ck-hours-row{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);margin-bottom:4px;}
.ck-hours-row:last-child{margin-bottom:0;}
.ck-estimate-box{padding:14px;}
.ck-estimate-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.ck-estimate-row > span{display:flex;flex-direction:column;gap:3px;}
.ck-estimate-value{align-items:flex-end;text-align:right;}
.ck-estimate-title{font-size:13.5px;font-weight:600;color:var(--ink);}
.ck-estimate-sub{font-size:11px;color:var(--ink-soft);}
.ck-estimate-value .ck-complimentary{font-size:13.5px;font-weight:600;color:var(--ink);}
.ck-estimate-value .ck-tbc{font-size:13.5px;font-weight:600;color:var(--ink);}
.ck-textarea{
  width:100%;min-height:80px;resize:vertical;
  padding:11px 13px;border:1.5px solid var(--line);border-radius:0;background:#fff;
  font-size:16px;color:var(--ink);font-family:inherit;
}
.ck-textarea:focus{outline:none;border-color:var(--ink);}

/* Payment */
.ck-payment-box{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.ck-payment-label{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.ck-bank-name{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.ck-bank-accounts{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.ck-bank-accounts div{font-size:12.5px;color:var(--ink-soft);}
.ck-bank-tag{display:inline-block;width:34px;font-weight:700;color:var(--ink);}
.ck-qr-box{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:16px;text-align:center;margin-bottom:12px;
}
.ck-qr-label{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:10px;text-transform:uppercase;}
.ck-qr-img{width:140px;height:140px;margin:0 auto;object-fit:contain;}
.ck-qr-img.img-missing{display:none;}
.ck-qr-fallback{display:none;width:140px;height:140px;margin:0 auto;background:var(--line);align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ink-soft);letter-spacing:.05em;}
.ck-qr-img.img-missing + .ck-qr-fallback{display:flex;}
.ck-payment-note{font-size:12px;color:var(--ink-soft);line-height:1.5;margin-bottom:14px;}
.ck-upload-label{font-size:11.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.ck-upload{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1.5px dashed var(--line);border-radius:10px;
  padding:22px 14px;background:#fff;cursor:pointer;
  font-size:12.5px;color:var(--ink-soft);transition:border-color .15s, background .15s;
}
.ck-upload:hover{border-color:var(--ink-soft);}
.ck-upload.has-file{border-color:var(--ink-soft);background:var(--line);color:var(--ink);font-weight:700;}
.ck-upload input[type="file"]{display:none;}
#ckLocationField.error .ck-upload,
.ck-upload.error{border-color:var(--red);}

/* ============ Logout confirm modal ============ */
.confirm-backdrop{
  position:fixed;inset:0;background:rgba(15,25,20,.4);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-glass);z-index:430;
}
.confirm-backdrop.show{opacity:1;pointer-events:auto;}

.confirm-modal{
  position:fixed;inset:0;z-index:440;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-glass);
}
.confirm-modal.open{opacity:1;pointer-events:auto;}

.confirm-card{
  position:relative;width:100%;max-width:360px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:18px;
  box-shadow:var(--glass-shadow-lg);
  padding:30px 26px 24px;
  text-align:center;
  transform:translateY(14px) scale(.96);
  transition:transform .38s var(--ease-glass);
}
.confirm-modal.open .confirm-card{transform:translateY(0) scale(1);}

.confirm-title{
  font-family:var(--font-display);
  font-size:17px;font-weight:700;color:var(--ink);
  margin-bottom:8px;line-height:1.35;
}
.confirm-sub{
  font-size:13px;color:var(--ink-soft);line-height:1.5;
  margin-bottom:22px;
}
.confirm-note{
  display:flex;align-items:flex-start;gap:8px;
  text-align:left;
  background:#FFF3D6;color:#8A6300;
  border-radius:10px;
  padding:10px 12px;
  font-size:12px;line-height:1.5;font-weight:500;
  margin:-8px 0 20px;
}
.confirm-note[hidden]{display:none;}
.confirm-note::before{
  content:"!";
  flex-shrink:0;
  width:16px;height:16px;
  border-radius:50%;
  background:#8A6300;color:#fff;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.confirm-actions{display:flex;gap:10px;}
.confirm-cancel-btn, .confirm-ok-btn{
  flex:1;padding:12px;
  border-radius:12px;
  font-size:13.5px;font-weight:700;
  transition:background .15s, color .15s, border-color .15s;
}
.confirm-cancel-btn{
  border:1.5px solid var(--glass-border);
  background:rgba(255,255,255,.45);color:var(--ink);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.confirm-cancel-btn:hover{background:rgba(255,255,255,.8);}
.confirm-ok-btn{
  background:var(--red);color:#fff;
  box-shadow:0 8px 20px rgba(213,71,60,.28);
}
.confirm-ok-btn:hover{background:#b8382e;}

/* ============ Auth loading overlay (3-dot) ============ */
.auth-loading{
  position:fixed;inset:0;z-index:460;
  display:flex;align-items:center;justify-content:center;
  background:rgba(248,247,242,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease-glass);
}
.auth-loading.show{opacity:1;pointer-events:auto;}
.auth-loading-dots{display:flex;gap:9px;}
.auth-loading-dots span{
  width:11px;height:11px;border-radius:50%;
  background:var(--ink-soft);
  animation:authDotBounce 1s var(--ease-glass) infinite;
}
.auth-loading-dots span:nth-child(2){animation-delay:.15s;background:var(--ink-soft);}
.auth-loading-dots span:nth-child(3){animation-delay:.3s;background:var(--ink-soft);}
@keyframes authDotBounce{
  0%, 80%, 100%{transform:translateY(0) scale(.8);opacity:.5;}
  40%{transform:translateY(-10px) scale(1);opacity:1;}
}

/* ============ Profile page ============ */
.profile-view{
  position:fixed;inset:0;z-index:210;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(46,140,108,.14), transparent 55%),
    radial-gradient(100% 60% at 0% 100%, rgba(22,75,59,.08), transparent 55%),
    var(--cream);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .4s var(--ease-glass);
}
.profile-view.open{transform:translateX(0);}
.profile-view-topbar{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
  position:sticky;top:0;z-index:5;
  padding:16px clamp(20px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.profile-view-close{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--ink-soft);
  padding:8px 14px 8px 10px;border-radius:999px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  transition:color .15s, background .15s, box-shadow .15s;flex-shrink:0;
}
.profile-view-close:hover{color:var(--ink);background:var(--glass-bg-strong);box-shadow:var(--glass-shadow-lg);}
.profile-view-close svg{width:17px;height:17px;}
.profile-view-topbar .nav-actions{flex-shrink:0;}

@media (max-width:640px){
  .profile-view-close span{display:none;}
  .profile-view-topbar{padding:10px 14px;gap:6px;}
  .profile-view-close{font-size:12px;gap:5px;}
  .profile-view-close svg{width:14px;height:14px;}
  .profile-view-topbar .nav-actions{gap:8px;}
  .profile-view-topbar .icon-btn,
  .profile-view-topbar .profile-btn{width:30px;height:30px;}
  .profile-view-topbar .login-btn{width:30px;height:30px;margin-left:2px;}
  .profile-view-topbar .login-btn svg{width:16px;height:16px;}
  /* Cart badge is sized for the bigger 44px navbar button — on this
     30px topbar button it overflows toward the profile icon right
     next to it, so shrink and push it out to the corner here. */
  .profile-view-topbar .js-cart-btn .cart-count{
    min-width:14px;height:14px;font-size:8.5px;
    top:-2px;right:-2px;border-width:1.5px;
  }

  /* Product detail page keeps the full desktop-style topbar on mobile too */
  .product-view .profile-view-close span{display:inline;}
  /* Push Back / Cart / Profile lower so they aren't crowding the top edge */
  .product-view .profile-view-topbar{padding:18px 14px;}
  .product-view .profile-view-topbar .js-cart-btn{display:flex;}
  /* Profile icon stays hidden here (cart is enough on this topbar) — it's
     one tap away from the bottom nav already. */
  .product-view .profile-view-topbar .profile-wrap{display:none;}

  /* Orders view: keep the "Back to store" label visible on mobile too */
  .orders-view .profile-view-close span{display:inline;}
}

.profile-view-wrap{
  max-width:900px;margin:0 auto;
  padding:32px clamp(20px,4vw,56px) 60px;
  display:flex;flex-direction:column;gap:20px;
}
.profile-view-heading{margin-bottom:-4px;}
.profile-view-heading h2{
  font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);
  margin-bottom:4px;
}
.profile-view-heading p{font-size:13.5px;color:var(--ink-soft);}
.profile-view-card{
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:20px;
  padding:28px;
  display:flex;flex-direction:column;gap:20px;
}
.profile-view-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.pv-business-section{
  display:flex;flex-direction:column;gap:16px;
  padding:16px;
  background:var(--green-100);
  border:1px solid var(--line);
}
.pv-business-section[hidden]{display:none;}
.pv-business-grid{
  display:grid;grid-template-columns:1fr;gap:16px;
}
@media (min-width:721px){
  .pv-business-grid{grid-template-columns:1.3fr 1fr 1fr;}
}
.pv-business-section .field-hint{margin-top:-6px;}
.field-hint{font-size:12px;color:var(--ink-soft);margin-top:-2px;}
.profile-view-card .auth-field input{
  background:var(--glass-bg-strong);
  border:1.5px solid var(--glass-border);
  border-radius:10px;
}
.profile-view-card .auth-field input:focus{background:#fff;border-color:var(--green-600);}
.profile-view-card .auth-field input[readonly]{
  color:var(--ink-soft);
  background:var(--surface-100, #f1f2f4);
  cursor:not-allowed;
}
.profile-view-card .auth-field input[readonly]:focus{background:var(--surface-100, #f1f2f4);border-color:var(--glass-border);}
.profile-view-card .auth-mobile-wrap{
  background:var(--glass-bg-strong);
  border:1.5px solid var(--glass-border);
  border-radius:10px;
}
.profile-view-card .auth-mobile-wrap:focus-within{background:#fff;border-color:var(--green-600);}

.pv-currency-toggle{
  display:inline-flex;gap:3px;
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:0;
  padding:4px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 3px rgba(0,0,0,.04);
}
.pv-currency-btn{
  padding:8px 20px;
  border:1px solid transparent;
  background:transparent;
  border-radius:0;
  font-size:13px;font-weight:700;color:var(--ink-soft);
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.pv-currency-btn:hover:not(.active){color:var(--ink);background:rgba(255,255,255,.5);}
.pv-currency-btn.active{
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), var(--green-800);
  color:#fff;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    0 4px 12px rgba(15,58,46,.28);
}
.pv-currency-btn .currency-toggle-icon{display:inline-flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1);}
.pv-currency-btn.active .currency-toggle-icon{transform:rotate(-8deg) scale(1.05);}
.pv-currency-btn .currency-toggle-usd-icon{color:currentColor;filter:none;}
.pv-currency-btn .currency-toggle-usd-icon{transform:rotate(-8deg);}
.pv-currency-btn.active .currency-toggle-usd-icon{transform:rotate(0deg) scale(1.05);}
.pv-currency-btn.active .cur-icon{filter:brightness(0) invert(1);}

.profile-view-save-row{display:flex;justify-content:flex-end;}
.profile-view-save-btn{
  padding:12px 30px;
  border-radius:0;
  border:1px solid var(--green-800);
  background:linear-gradient(155deg, var(--green-700), var(--green-900));
  color:var(--cream);
  font-size:13.5px;font-weight:700;
  box-shadow:0 8px 18px rgba(15,58,46,.2);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.profile-view-save-btn:hover{
  background:linear-gradient(155deg, var(--green-700), var(--green-800));
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(15,58,46,.26);
}
.profile-view-save-btn:active{transform:translateY(0) scale(.98);}

.notif-settings-card{
  padding:20px 28px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:20px;
}
.pv-toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.pv-toggle-info{display:flex;flex-direction:column;gap:2px;}
.pv-toggle-info strong{font-size:13.5px;font-weight:700;color:var(--ink);}
.pv-toggle-info span{font-size:12px;font-weight:500;color:var(--ink-soft);line-height:1.4;}
.pv-toggle-switch{
  position:relative;flex-shrink:0;
  width:44px;height:26px;
}
.pv-toggle-switch input{
  position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;
}
.pv-toggle-slider{
  position:absolute;inset:0;
  background:var(--line);
  border-radius:999px;
  transition:background .18s;
}
.pv-toggle-slider::before{
  content:'';position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .18s;
}
.pv-toggle-switch input:checked + .pv-toggle-slider{background:var(--green-700);}
.pv-toggle-switch input:checked + .pv-toggle-slider::before{transform:translateX(18px);}

@media (max-width:640px){
  .notif-settings-card{padding:18px 20px;}
}

.profile-view-delete-bar{
  text-align:center;
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:16px;
  padding:14px;
  font-size:13.5px;color:var(--ink);
}
.profile-view-delete-bar a{
  color:var(--red);font-weight:700;
  text-decoration:underline;text-underline-offset:2px;
}

.profile-view-logout-btn{
  display:block;
  width:100%;
  margin-top:14px;
  padding:13px;
  background:rgba(213,71,60,.08);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1.5px solid rgba(213,71,60,.4);
  color:var(--red);
  font-size:13.5px;font-weight:700;
  border-radius:14px;
  cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s;
}
.profile-view-logout-btn:hover{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(213,71,60,.28);}

@media (max-width:640px){
  .profile-view-grid{grid-template-columns:1fr;}
  .profile-view-card{padding:20px;}
}

/* ============ Product detail page ============ */
.product-view .profile-view-topbar{
  position:sticky;top:0;z-index:20;
}
.product-view-wrap{max-width:none;padding-top:0!important;padding-left:0!important;padding-right:0!important;}
.product-view-wrap .product-detail-card{border-left:none;border-right:none;}
.product-detail-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  padding:clamp(24px,3vw,48px);
  display:grid;
  grid-template-columns:minmax(0,420px) 1fr;
  gap:clamp(24px,3vw,48px);
}
.pd-media,
.card-media{
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(155deg, var(--line) 0%, #D7EBE1 100%);
}
.pd-media::before,
.card-media::before{
  content:'';
  position:absolute;inset:0;
  z-index:0;
  background-image:radial-gradient(var(--ink-soft) 1.2px, transparent 1.2px);
  background-size:20px 20px;
  opacity:.08;
  pointer-events:none;
}
.pd-media::after,
.card-media::after{
  content:'';
  position:absolute;
  z-index:0;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:34%;aspect-ratio:1/1;
  background:var(--ink-soft);
  opacity:.10;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}
.pd-media img,
.card-media .card-img{position:relative;z-index:1;}
.pd-media{
  position:relative;
  aspect-ratio:1/0.9;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.pd-media img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}
.pd-media img.img-missing{visibility:hidden;}

/* ============ Image Quick View (full, uncropped image) ============ */
.image-view{z-index:230;background:#fff;}
.image-view .profile-view-topbar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;}
.image-view .profile-view-close{padding:8px;background:transparent;border:none;box-shadow:none;}
.image-view .profile-view-close svg{width:22px;height:22px;}
.image-view-wrap{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - 60px);padding:24px;
  overflow:hidden;touch-action:none;
}
.image-view-wrap img{
  max-width:100%;max-height:78vh;object-fit:contain;display:block;
  cursor:zoom-in;user-select:none;-webkit-user-drag:none;
  transform-origin:center center;
}
.image-view-wrap img.iv-animate{transition:transform .2s ease;}
.image-view.is-zoomed .image-view-wrap img{cursor:grab;}

.pd-info{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.6vw,22px);}
.pd-title{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--ink);line-height:1.3;}
.pd-code{font-size:12.5px;font-weight:400;color:var(--ink-soft);}
.pd-info .stock-indicator{font-size:12px;margin-bottom:6px;}
.pd-info .stock-dot{width:8px;height:8px;}
.pd-divider{border-top:1px dashed var(--line);}
.pd-meta{display:flex;align-items:center;gap:28px;}
.pd-unit small{display:block;font-size:11.5px;font-weight:400;color:var(--ink-soft);}
.pd-unit strong{display:block;font-size:14px;font-weight:400;color:var(--ink);}
.pd-unit .packing-icon{width:13px;height:13px;}
.pd-price{font-family:var(--font-display);font-weight:400;font-size:26px;color:var(--ink);margin-left:auto;}
.pd-actions{margin-top:8px;}
.pd-actions .card-add{margin-top:0;padding:13px;font-size:14px;}
.pd-actions .card-qty{margin-top:0;padding:8px;border-radius:10px;}
.pd-actions .card-qty .qty-btn{width:34px;height:34px;font-size:16px;border-radius:7px;}
.pd-actions .card-qty .qty-val{font-size:15px;}
.pd-actions .card-remove-link{font-size:11px;margin-top:8px;}

.pd-qty-select{margin-bottom:12px;}
.pd-qty-label{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--ink-soft);text-transform:uppercase;margin-bottom:6px;
}
.pd-actions .card-qty.pd-qty{
  width:100%;max-width:170px;
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:4px;
}
.pd-actions .card-qty.pd-qty .qty-btn{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:transparent;color:var(--ink);
  font-size:17px;font-weight:400;line-height:1;
  transition:background-color .18s ease, transform .12s ease, color .18s ease;
}
.pd-actions .card-qty.pd-qty .qty-btn:hover{background:var(--line);color:var(--ink);}
.pd-actions .card-qty.pd-qty .qty-btn:active{transform:scale(.86);}
.pd-actions .card-qty.pd-qty .qty-btn:disabled{opacity:.3;cursor:default;background:transparent;color:var(--ink);transform:none;}
.pd-actions .card-qty.pd-qty .qty-val{
  flex:1;text-align:center;
  font-size:16px;font-weight:600;color:var(--ink);
  animation:qtyPop .22s var(--ease-glass);
}
@keyframes qtyPop{
  0%{transform:scale(.65);opacity:.3;}
  60%{transform:scale(1.15);opacity:1;}
  100%{transform:scale(1);}
}

.similar-products-section{margin-top:32px;padding:0 clamp(20px,4vw,56px) 40px;}
.similar-products-title{
  font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);
  margin-bottom:14px;
}
.similar-products-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.similar-products-head .similar-products-title{margin-bottom:0;}
.carousel-nav{display:flex;gap:8px;}
.carousel-arrow{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid var(--line);border-radius:50%;
  color:var(--ink);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.carousel-arrow svg{width:16px;height:16px;}
.carousel-arrow:hover{background:var(--line);border-color:var(--ink-soft);}
.carousel-arrow:disabled{opacity:.35;cursor:default;}
.carousel-arrow:disabled:hover{background:#fff;border-color:var(--line);}
.carousel-track{
  display:flex;gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track .product-card{
  flex:0 0 210px;
  scroll-snap-align:start;
}
@media (min-width:721px){
  .carousel-nav{display:flex;}
}
@media (max-width:720px){
  .carousel-nav{display:none;}
  .carousel-track .product-card{flex:0 0 78%;max-width:230px;}
}
.see-all-row{display:flex;justify-content:center;margin-top:18px;}
.see-all-btn{
  padding:11px 32px;
  background:#fff;
  border:1.5px solid var(--ink-soft);
  color:var(--ink-soft);
  font-size:13px;font-weight:700;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.see-all-btn:hover{background:var(--ink-soft);color:#fff;}

/* Full-screen, edge-to-edge layout on phones/small tablets */
@media (max-width:720px){
  .product-view-wrap{padding-left:0;padding-right:0;}
  .product-detail-card{
    grid-template-columns:1fr;
    gap:0;
    padding:0;
    border:none;
    box-shadow:none;
  }
  .pd-media{
    aspect-ratio:auto;
    height:min(58vh,460px);
    border-radius:0;
  }
  .pd-info{padding:22px 20px 28px;gap:16px;}
  .pd-title{font-size:20px;}
  .pd-price{font-size:24px;}
  .pd-actions{
    position:sticky;bottom:0;
    background:#fff;
    margin:0 -20px -28px;
    padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  }
  .similar-products-section{padding:0 20px 32px;margin-top:8px;}
}

/* ============ Orders page ============ */
.orders-view-wrap{max-width:760px;}
.orders-card{
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:20px;
  overflow:hidden;
}
.orders-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:22px 26px;border-bottom:1px solid var(--glass-border);
}
.orders-card-head h1{font-family:var(--font-display);font-size:16.5px;font-weight:600;color:var(--ink);}
.orders-count{font-size:11px;font-weight:500;color:var(--ink-soft);}

.orders-empty{text-align:center;padding:64px 24px 60px;}
.orders-empty-icon{
  width:72px;height:72px;margin:0 auto 20px;
  border-radius:50%;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--glass-shadow);
}
.orders-empty-icon svg{width:30px;height:30px;color:var(--ink-soft);}
.orders-empty p{color:var(--ink);font-weight:500;font-size:14.5px;}
.orders-empty-cta{
  margin-top:22px;display:inline-flex;align-items:center;justify-content:center;
  padding:13px 32px;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.02) 55%), var(--green-800);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  color:var(--cream);
  border:1px solid rgba(255,255,255,.3);
  border-radius:0;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(0,0,0,.18),
    0 10px 24px rgba(15,58,46,.22);
  font-weight:600;font-size:13.5px;letter-spacing:.01em;
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.orders-empty-cta:hover{background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.02) 55%), var(--green-900);color:var(--cream);box-shadow:
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(0,0,0,.18),
    0 14px 30px rgba(15,58,46,.28);}
.orders-empty-cta:active{transform:scale(.97);}

.orders-list{padding:20px;display:flex;flex-direction:column;gap:16px;}
.orders-load-more-btn{
  display:block;
  width:calc(100% - 40px);
  margin:0 20px 20px;
  padding:12px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1.5px solid var(--glass-border);
  border-radius:12px;
  color:var(--green-700);
  font-size:13px;font-weight:700;
  cursor:pointer;
  box-shadow:var(--glass-shadow);
  transition:background .15s,color .15s,box-shadow .15s;
}
.orders-load-more-btn:hover{background:var(--green-700);color:#fff;box-shadow:var(--glass-shadow-lg);}
@media (max-width:720px){
  .orders-load-more-btn{width:calc(100% - 28px);margin:0 14px 14px;}
}
.order-card{
  border:1px solid var(--glass-border);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-radius:16px;
  box-shadow:var(--glass-shadow);
  overflow:hidden;
}
.order-card-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--glass-border);
}
.order-card-id{font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--ink);}
.order-card-date{font-size:10.5px;color:var(--ink-soft);margin-top:2px;}
.order-status-badge{
  font-size:9.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 9px;white-space:nowrap;
  border-radius:999px;
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid transparent;
}
.order-status-badge.placed{background:rgba(92,107,99,.12);color:var(--ink-soft);border-color:rgba(92,107,99,.18);}
.order-status-badge.processing{background:rgba(255,196,26,.16);color:#8A6300;border-color:rgba(138,99,0,.15);}
.order-status-badge.delivery{background:rgba(27,94,174,.14);color:#1B5EAE;border-color:rgba(27,94,174,.18);}
.order-status-badge.delivered{background:rgba(46,140,108,.16);color:var(--green-700);border-color:rgba(46,140,108,.2);}
.order-status-badge.cancelled{background:rgba(213,71,60,.12);color:var(--red);border-color:rgba(213,71,60,.18);}

.order-items{padding:14px 18px;display:flex;flex-direction:column;gap:12px;}
.order-item-row{display:flex;align-items:center;gap:12px;}
.order-item-media{
  width:40px;height:40px;flex-shrink:0;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.order-item-media img{width:100%;height:100%;object-fit:cover;display:block;}
.order-item-media img.img-missing{visibility:hidden;}
.order-item-info{flex:1;min-width:0;}
.order-item-name{font-size:11.5px;font-weight:500;color:var(--ink);line-height:1.3;}
.order-item-meta{font-size:10px;color:var(--ink-soft);margin-top:2px;}
.order-item-price{font-size:11.5px;font-weight:500;color:var(--ink);white-space:nowrap;}
.order-items-hidden{display:none;flex-direction:column;gap:12px;}
.order-items-hidden.show{display:flex;}
.order-see-more-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  margin-top:2px;
  padding:9px 0 0;
  background:transparent;
  border:none;
  border-top:1px dashed var(--glass-border);
  color:var(--ink-soft);
  font-size:11px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:color .15s ease;
}
.order-see-more-btn:hover{color:var(--ink);}
.order-see-more-icon{width:13px;height:13px;transition:transform .2s ease;flex-shrink:0;}
.order-see-more-btn.expanded .order-see-more-icon{transform:rotate(180deg);}

.order-total-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;border-top:1px dashed var(--glass-border);
}
.order-total-row .label{font-size:11px;color:var(--ink-soft);font-weight:500;}
.order-total-row .value{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--ink);}

.order-steps{
  display:flex;padding:20px 14px 22px;border-top:1px solid var(--glass-border);
}
.order-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:0 4px;}
.order-step:not(:last-child)::after{
  content:'';position:absolute;top:11px;left:50%;width:100%;height:2px;background:var(--glass-border);z-index:0;
}
.order-step.done:not(:last-child)::after{background:linear-gradient(90deg, var(--green-500), var(--green-600));}
.order-step-dot{
  width:21px;height:21px;border-radius:50%;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border:2px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:7px;
  font-size:9.5px;font-weight:600;color:var(--ink-soft);
}
.order-step-dot svg{width:11px;height:11px;}
.order-step.done .order-step-dot{border-color:var(--green-600);background:linear-gradient(145deg, var(--green-500), var(--green-700));color:#fff;box-shadow:0 3px 8px rgba(46,140,108,.32);}
.order-step.active .order-step-dot{border-color:var(--green-600);color:var(--green-700);animation:orderStepPulse 1.4s ease-in-out infinite;}
.order-step-label{font-size:9px;font-weight:500;color:var(--ink-soft);line-height:1.3;}
.order-step.done .order-step-label, .order-step.active .order-step-label{color:var(--ink);}
@keyframes orderStepPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(46,140,108,.35);}
  50%{box-shadow:0 0 0 5px rgba(46,140,108,0);}
}

.order-cancelled-note{
  padding:12px 18px;
  color:var(--red);font-size:11.5px;font-weight:500;
  border-top:1px solid var(--glass-border);
}
.order-cancel-row{padding:0 18px 18px;}
.order-cancel-btn{
  display:block;width:100%;
  padding:10px;
  background:rgba(213,71,60,.06);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1.5px solid rgba(213,71,60,.4);
  border-radius:12px;
  color:var(--red);
  font-size:11.5px;font-weight:600;
  cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s;
}
.order-cancel-btn:hover{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(213,71,60,.24);}
.order-cancel-btn:disabled{
  border-color:var(--glass-border);
  color:var(--ink-soft);
  background:rgba(255,255,255,.15);
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}
.order-cancel-btn:disabled:hover{background:rgba(255,255,255,.15);color:var(--ink-soft);box-shadow:none;}
@media (max-width:640px){
  .orders-card-head{padding:16px 18px;}
  .orders-list{padding:14px;}
  .order-step-label{font-size:8px;}
}

/* ============ Orders page — refreshed card UI (white bg) ============ */
.orders-view .order-card{
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
}
.orders-view .order-card-head{background:#fff;border-bottom:1px solid var(--line);}
.orders-view .order-status-badge{border-radius:999px;}

/* ============ Orders page — green gradient "order history" skin ============ */



/* ============ Footer ============ */
.site-footer{
  background:var(--green-900);color:rgba(255,255,255,.82);
  margin-top:32px;
}
.footer-inner{
  max-width:none;margin:0;
  padding:52px var(--side-pad) 0;
}
.footer-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;
  gap:32px;
  padding-bottom:40px;
}
.footer-brand{grid-column:1;}
.footer-logo{height:56px;width:auto;margin-bottom:14px;opacity:.95;}
.footer-tagline{
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);
  max-width:280px;margin-bottom:18px;
}
.footer-viber-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  padding:10px 16px;
  font-size:12.5px;font-weight:700;color:#fff;
  transition:background .15s, border-color .15s;
}
.footer-viber-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);}
.footer-viber-icon{width:18px;height:18px;border-radius:4px;}

.footer-col h4{
  font-family:var(--font-display);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;margin-bottom:16px;
}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col li a, .footer-col li{
  font-size:13.5px;color:rgba(255,255,255,.62);
  transition:color .15s;
}
.footer-col li a:hover{color:#fff;}
.footer-contact li{line-height:1.5;}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:rgba(255,255,255,.55);
}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{color:rgba(255,255,255,.55);transition:color .15s;}
.footer-bottom-links a:hover{color:#fff;}

@media (max-width:980px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}
@media (max-width:560px){
  .footer-inner{padding:26px 18px 0;}
  .footer-top{grid-template-columns:1fr 1fr;gap:18px;}
  .footer-logo{height:36px;margin-bottom:8px;}
  .footer-tagline{font-size:10px;margin-bottom:11px;line-height:1.45;}
  .footer-viber-btn{font-size:9.5px;padding:6px 10px;gap:6px;}
  .footer-viber-icon{width:12px;height:12px;}
  .footer-col h4{font-size:9px;margin-bottom:8px;}
  .footer-col ul{gap:6px;}
  .footer-col li a, .footer-col li{font-size:10.5px;}
  .footer-bottom{font-size:9.5px;padding:11px 0;}
  .footer-bottom-links{gap:11px;}
}

/* ============ Bottom nav (mobile) — white bg, dark green icons/text, rounded top ============ */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:#FFFFFF;
  border-radius:24px 24px 0 0;
  z-index:80;
  padding:10px 6px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 28px rgba(15,58,46,.14), 0 -1px 0 rgba(15,58,46,.06);
}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--green-800);font-size:11px;font-weight:600;position:relative;
  padding:4px 0;
  transition:color .18s ease, transform .18s ease;
}
.bn-item:active{transform:scale(.94);}
.bn-item svg{width:24px;height:24px;}
.bn-item svg path,.bn-item svg circle,.bn-item svg rect{stroke-width:1.8;}
.bn-item.active{color:var(--green-900);font-weight:700;}
.bn-item[data-action="home"].active svg path{fill:currentColor;}
.bn-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.bn-badge{
  position:absolute;top:-5px;right:-9px;
  background:var(--red);color:#fff;font-size:9px;font-weight:700;
  min-width:15px;height:15px;
  border:2px solid #fff;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.bn-badge[hidden]{display:none;}


/* ============ Legal pages (Terms / Privacy) — flat, Amazon-style ============ */
.legal-header{
  background:#fff;color:var(--ink);
  padding:28px var(--side-pad) 20px;
  border-bottom:1px solid var(--line);
}
.legal-header-inner{max-width:none;}
.legal-header-top{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:18px;
  min-height:auto;
}
.legal-back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink-soft);font-size:12.5px;font-weight:600;
  transition:color .15s, transform .15s;flex-shrink:0;
}
.legal-back:hover{color:var(--ink);}
.legal-back:active{transform:scale(.96);}
.legal-back svg{width:13px;height:13px;transition:transform .25s cubic-bezier(.22,1,.36,1);}
.legal-back:hover svg{transform:translateX(-3px);}
.legal-eyebrow{display:none;}
.legal-title{
  font-family:var(--font-body);font-size:22px;font-weight:700;color:var(--ink);
  margin-bottom:4px;
}
.legal-updated{color:var(--ink-soft);font-size:12px;}

.legal-body{
  padding:26px var(--side-pad) 70px;
}
.legal-body-inner{max-width:none;}
.legal-section{margin-bottom:18px;}
.legal-section:last-child{margin-bottom:0;}
.legal-section h2{
  font-family:var(--font-body);font-size:14.5px;font-weight:700;color:var(--ink);
  margin-bottom:6px;display:block;
}
.legal-section h2 .legal-num{display:none;}
.legal-section p{font-size:13px;line-height:1.55;color:var(--ink);margin-bottom:8px;max-width:none;}
.legal-section p:last-child{margin-bottom:0;}
.legal-section ul{padding-left:18px;margin:6px 0;}
.legal-section li{font-size:13px;line-height:1.55;color:var(--ink);list-style:disc;margin-bottom:4px;}
.legal-contact{
  background:none;border:none;
  padding:0;margin-top:4px;
}
.legal-contact p{margin-bottom:2px;font-weight:400;color:var(--ink);}
.legal-contact p:first-child{font-weight:700;}
.legal-contact a{color:var(--ink);font-weight:400;text-decoration:underline;text-underline-offset:2px;}

@media (max-width:560px){
  .legal-header{padding:18px 18px 16px;}
  .legal-body{padding:20px 18px 60px;}
  .legal-back span{display:inline;}
}
@media (max-width: 980px){
  .layout{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .cat-toggle-btn{display:inline-flex;}
  .navbar{border-bottom:none;} /* avoids a doubled hairline once the categories bar sticks flush underneath it */
}

@media (max-width: 720px){
  .navbar-inner{padding:2px 14px;gap:2px;transition:padding .28s ease;}
  .brand-logo{height:80px;transition:height .28s ease;}
  .navbar-search-row{order:4;flex-basis:100%;min-width:0;}
  .navbar .login-btn{display:none;}
  .navbar .profile-wrap{display:none;}
  .profile-view-topbar .profile-wrap{display:none;}
  .profile-view-topbar .js-cart-btn{display:none;}
  .navbar .nav-offers-btn{display:none;}
  .navbar .nav-viber-btn{display:none;}
  #cartBtn{display:none;}
  #mobileSearchBtn{display:none;}

  .navbar.nav-compact .navbar-inner{padding:8px 14px;}
  .navbar.nav-compact .icon-btn{width:44px;height:44px;}

  .layout{padding:14px;gap:14px;}
  .hero{aspect-ratio:16/10;}
  .hero-slide{padding:20px 24px;background-position:top center;}
  .hero-slide-content{max-width:78%;}
  .hero-visual{display:none;}
  .hero-desc{display:none;}
  .hero-eyebrow{margin-bottom:12px;}
  .hero-title{margin-bottom:18px;}

  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .card-media{font-size:38px;}
  .card-body{padding:10px;}
  .card-title{font-size:12px;min-height:32px;}

  .bottom-nav{display:flex;}
  body.has-bottom-nav{padding-bottom:calc(78px + env(safe-area-inset-bottom));}
  .cart-drawer{width:100%;max-width:100%;}
}

@media (max-width: 400px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
}
/* ============ Order receipt button (orders list) ============ */
.order-receipt-row{padding:0 18px 14px;}
.order-cancel-row + .order-receipt-row{padding-top:0;}
.order-receipt-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:10px;
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1.5px solid var(--glass-border);
  border-radius:12px;
  color:var(--green-700);
  font-size:11.5px;font-weight:600;
  cursor:pointer;
  box-shadow:var(--glass-shadow);
  transition:background .15s,color .15s,box-shadow .15s;
}
.order-receipt-btn svg{width:14px;height:14px;flex-shrink:0;}
.order-receipt-btn:hover{background:var(--green-700);color:#fff;box-shadow:var(--glass-shadow-lg);}

/* ============ Receipt modal ============ */
.receipt-backdrop{
  position:fixed;inset:0;background:rgba(15,25,20,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-glass);z-index:520;
}
.receipt-backdrop.show{opacity:1;pointer-events:auto;}

.receipt-modal{
  position:fixed;inset:0;z-index:530;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-glass);
}
.receipt-modal.open{opacity:1;pointer-events:auto;}

.receipt-modal-card{
  position:relative;width:100%;max-width:clamp(420px, 32vw, 600px);max-height:90vh;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow-lg);
  display:flex;flex-direction:column;
  transform:translateY(14px) scale(.97);
  transition:transform .35s var(--ease-glass), max-width .25s ease;
  border-radius:14px;overflow:hidden;
}
.receipt-modal.open .receipt-modal-card{transform:translateY(0) scale(1);}

.receipt-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);
}
.receipt-modal-head h3{font-family:var(--font-display);font-size:15.5px;font-weight:700;color:var(--ink);}
.receipt-close-btn{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink-soft);font-size:22px;line-height:1;
  border-radius:50%;transition:background .15s,color .15s;
}
.receipt-close-btn:hover{background:var(--line);color:var(--ink);}

.receipt-preview-scroll{
  flex:1;overflow:auto;padding:24px 18px;background:var(--cream);
  display:flex;justify-content:center;align-items:flex-start;
  min-height:280px;
}
.receipt-paper-wrap{
  position:relative;width:100%;margin:auto 0;
  display:flex;justify-content:center;
}
.receipt-paper{
  background:#fff;
  width:80mm;flex-shrink:0;
  box-shadow:0 2px 10px rgba(15,58,46,.14);
  padding:18px 16px;
  font-family:'Courier New',Courier,monospace;
  color:var(--ink);
  transform-origin:top center;
}

.receipt-store-name{font-size:14px;font-weight:700;text-align:center;letter-spacing:.02em;}
.receipt-store-addr{font-size:10.5px;text-align:center;color:var(--ink-soft);margin-top:2px;}
.receipt-divider{border-top:1px dashed #b9b6a9;margin:10px 0;}
.receipt-meta-row{display:flex;justify-content:space-between;font-size:11px;margin-bottom:3px;}
.receipt-items{display:flex;flex-direction:column;gap:8px;}
.receipt-item-name{font-size:11.5px;font-weight:700;}
.receipt-item-sub{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft);margin-top:1px;}
.receipt-total-row{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;}
.receipt-footer{font-size:11.5px;text-align:center;font-weight:700;margin-top:2px;}
.receipt-footer-small{font-size:9.5px;text-align:center;color:var(--ink-soft);margin-top:3px;}

.receipt-modal-actions{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:10px;}
.receipt-action-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;
  font-size:13px;font-weight:700;border-radius:10px;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s;
}
.receipt-action-btn svg{width:16px;height:16px;}
.receipt-download-btn{
  background:var(--green-100);color:var(--green-900);
  border:1.5px solid var(--green-500);
  box-shadow:0 4px 12px rgba(46,140,108,.14);
}
.receipt-download-btn:hover{background:var(--green-500);color:#fff;border-color:var(--green-500);box-shadow:0 6px 16px rgba(46,140,108,.24);}
.receipt-print-btn{
  background:var(--green-700);color:#fff;border:1.5px solid var(--green-700);
  box-shadow:0 4px 12px rgba(15,58,46,.22);
}
.receipt-print-btn:hover{background:var(--green-900);border-color:var(--green-900);box-shadow:0 6px 16px rgba(15,58,46,.3);}
.receipt-action-btn:focus-visible{outline:3px solid rgba(46,140,108,.35);outline-offset:2px;}
.receipt-action-btn:active{transform:translateY(1px);}
@media (max-width:360px){
  .receipt-modal-actions{flex-direction:column;}
}

@media (max-width:640px){
  .receipt-modal{padding:0;}
  .receipt-modal-card{
    max-width:100%;width:100%;height:100%;max-height:100dvh;
    border-radius:0;
  }
  .receipt-modal-head{
    flex-shrink:0;
    padding:16px 16px calc(16px + env(safe-area-inset-top));
  }
}

/* ============ Print — receipt only ============ */
@media print{
  body *{visibility:hidden;}
  .receipt-modal, .receipt-modal *{visibility:visible;}
  .receipt-modal{
    position:absolute;inset:0;padding:0;background:#fff;
    display:block;opacity:1;
  }
  .receipt-modal-card{
    max-width:none;max-height:none;box-shadow:none;border:none;border-radius:0;
    display:block;transform:none;
  }
  .receipt-modal-head, .receipt-modal-actions{display:none;}
  .receipt-preview-scroll{padding:0;overflow:visible;background:#fff;display:block;}
  .receipt-paper-wrap{height:auto !important;}
  .receipt-paper{box-shadow:none;margin:0 auto;transform:none !important;}
}

/* ============ Order Confirmation (ticket-style) ============ */
.oc-backdrop{
  position:fixed;inset:0;background:rgba(15,25,20,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-glass);z-index:540;
}
.oc-backdrop.show{opacity:1;pointer-events:auto;}

.oc-modal{
  position:fixed;inset:0;z-index:550;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-glass);
}
.oc-modal.open{opacity:1;pointer-events:auto;}
.oc-scroll{
  width:100%;max-width:400px;max-height:92vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  transform:translateY(18px) scale(.97);
  transition:transform .38s var(--ease-glass);
}
.oc-modal.open .oc-scroll{transform:translateY(0) scale(1);}

.oc-ticket{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:18px;
  box-shadow:var(--glass-shadow-lg);
  overflow:hidden;
}
.oc-top{position:relative;padding:30px 26px 22px;}
.oc-close-btn{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:var(--line);color:var(--ink);font-size:20px;line-height:1;
  border-radius:50%;transition:background .15s;
}
.oc-close-btn:hover{background:var(--ink-soft);color:#fff;}
.oc-check{
  width:52px;height:52px;border-radius:50%;
  background:var(--ink-soft);color:#fff;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.oc-check svg{width:26px;height:26px;}
.oc-title{
  font-family:var(--font-display);font-size:22px;font-weight:700;
  color:var(--ink);margin-bottom:8px;
}
.oc-sub{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-bottom:22px;}

.oc-items-box{background:var(--line);border-radius:14px;padding:18px;}
.oc-items-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:12px;}
.oc-items{display:flex;flex-direction:column;gap:12px;}
.oc-item-row{display:flex;align-items:center;gap:12px;}
.oc-item-media{
  width:42px;height:42px;flex-shrink:0;background:#fff;border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.oc-item-media img{width:100%;height:100%;object-fit:cover;display:block;}
.oc-item-media img.img-missing{visibility:hidden;}
.oc-item-info{flex:1;min-width:0;}
.oc-item-name{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;}
.oc-item-meta{font-size:11px;color:var(--ink-soft);margin-top:2px;}
.oc-item-price{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;}
.oc-item-divider{border-top:1px solid rgba(15,58,46,.1);}
.oc-items-hidden{display:none;flex-direction:column;gap:12px;}
.oc-items-hidden.show{display:flex;}
.oc-see-more-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  margin-top:12px;
  padding:9px 0 0;
  background:transparent;
  border:none;
  border-top:1px dashed rgba(15,58,46,.22);
  color:var(--ink-soft);
  font-size:12px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:color .15s ease;
}
.oc-see-more-btn:hover{color:var(--ink);}
.oc-see-more-icon{width:14px;height:14px;transition:transform .2s ease;flex-shrink:0;}
.oc-see-more-btn.expanded .oc-see-more-icon{transform:rotate(180deg);}

.oc-totals{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(15,58,46,.22);display:flex;flex-direction:column;gap:6px;}
.oc-total-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);}
.oc-total-row.oc-grand{
  margin-top:4px;padding-top:8px;border-top:1px solid rgba(15,58,46,.18);
  font-size:15px;font-weight:700;color:var(--ink);
}

.oc-perforation{position:relative;height:0;}
.oc-notch{
  position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;
  background:rgba(15,25,20,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
}
.oc-notch-left{left:-11px;}
.oc-notch-right{right:-11px;}
.oc-perforation-line{
  position:absolute;top:-1px;left:16px;right:16px;
  border-top:2px dashed var(--line);
}

.oc-bottom{padding:22px 26px 26px;}
.oc-details-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:14px;}
.oc-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;margin-bottom:22px;}
.oc-detail-key{font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;}
.oc-detail-val{font-size:12.5px;color:var(--ink);font-weight:700;line-height:1.4;}
.oc-map-link{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;}
.oc-map-link:hover{color:var(--ink);}
.oc-thanks{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.oc-help{font-size:12px;color:var(--ink-soft);}
.oc-help a{color:var(--ink-soft);font-weight:700;text-decoration:underline;}

.oc-orders-btn{
  width:100%;padding:14px;background:var(--ink-soft);color:#fff;
  font-size:13.5px;font-weight:700;border-radius:12px;
  box-shadow:var(--glass-shadow);
  transition:background .15s;
}
.oc-orders-btn:hover{background:var(--glass-dark-bg-strong);}

@media (max-width:420px){
  .oc-modal{align-items:flex-end;padding:0;}
  .oc-scroll{max-width:100%;max-height:94vh;}
  .oc-ticket{border-radius:20px 20px 0 0;}
}

/* ============================================
   Checkout page (standalone) — simple, flat,
   Amazon-style two-column layout that scales
   with the viewport on larger screens
============================================ */
.co-page{min-height:100vh;min-height:100dvh;background:var(--cream);}

.co-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.co-header-inner{max-width:1180px;margin:0 auto;padding:14px var(--side-pad);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.co-header-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.co-header-logo img{height:36px;display:block;}
.co-back{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink-soft);transition:color .15s, transform .15s;}
.co-back:hover{color:var(--ink);}
.co-back:active{transform:scale(.96);}
.co-back svg{width:15px;height:15px;transition:transform .25s cubic-bezier(.22,1,.36,1);}
.co-back:hover svg{transform:translateX(-3px);}
.co-secure-note{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-soft);flex-shrink:0;}
.co-secure-note svg{width:14px;height:14px;color:var(--ink-soft);flex-shrink:0;}
.co-header-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.co-profile-btn{flex-shrink:0;}
.co-profile-btn:hover{background:var(--green-100);}

.co-wrap{max-width:1180px;margin:0 auto;padding:0 var(--side-pad) 90px;}
@media (min-width:1440px){ .co-header-inner,.co-wrap{max-width:1320px;} }

.co-title-row{padding:26px 0 4px;}
.co-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);}
.co-title-sub{font-size:13px;color:var(--ink-soft);margin-top:4px;}

.co-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px;align-items:start;}
@media (min-width:960px){ .co-grid{grid-template-columns:minmax(0,1fr) 380px;gap:40px;} }
@media (min-width:1440px){ .co-grid{grid-template-columns:minmax(0,1fr) 440px;gap:56px;} }

.co-main{display:flex;flex-direction:column;min-width:0;}
.co-section{background:#fff;border:1px solid var(--line);padding:24px clamp(18px,3vw,32px);margin-bottom:18px;}
.co-section-head{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:18px;}
.co-section-icon{width:16px;height:16px;flex-shrink:0;color:var(--ink);}
.co-num{width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.co-item-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-soft);}

.co-contact-box{background:var(--cream);border:1px solid var(--line);padding:12px 16px;margin-bottom:14px;}
.co-contact-name{font-size:12.5px;font-weight:700;color:var(--ink);}
.co-contact-mobile{font-size:11px;color:var(--ink-soft);margin-top:2px;}

.co-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.co-field:last-child{margin-bottom:0;}
.co-field span{font-size:10px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}
.co-field input,.co-field select,.co-field textarea{
  width:100%;padding:9px 11px;border:1.5px solid var(--line);background:#fff;
  font-size:16px;color:var(--ink);font-family:inherit;
}
.co-field input:focus,.co-field select:focus,.co-field textarea:focus{outline:none;border-color:var(--ink-soft);}
.co-field.has-error input,.co-field.has-error select{border-color:var(--red);background:var(--red-bg);}
.co-field-error{display:none;font-size:11.5px;color:var(--red);}
.co-field.has-error .co-field-error{display:block;}
.co-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){ .co-row-2{gap:8px;} }
.co-textarea{resize:vertical;min-height:64px;}

.co-items{display:flex;flex-direction:column;}
.co-item-row{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);}
.co-item-row:first-child{padding-top:0;}
.co-item-row:last-child{border-bottom:none;padding-bottom:0;}
.co-item-media{width:60px;height:60px;border:1px solid var(--line);background:var(--cream);flex-shrink:0;}
.co-item-media img{width:100%;height:100%;object-fit:cover;}
.co-item-media img.img-missing{display:none;}
.co-item-info{flex:1;min-width:0;}
.co-item-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.35;}
.co-item-meta{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.co-item-qty{display:flex;align-items:center;gap:10px;margin-top:8px;}
.co-item-qty button{width:24px;height:24px;border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;}
.co-item-qty button:hover{border-color:var(--ink);}
.co-item-qty span{font-size:13px;font-weight:700;min-width:16px;text-align:center;}
.co-item-remove{margin-left:4px;font-size:11.5px;color:var(--red);text-decoration:underline;font-weight:600;}
.co-item-price{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;flex-shrink:0;}
.co-items-empty{font-size:13px;color:var(--ink-soft);padding:6px 0;}

.co-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.co-tab{flex:1;min-width:150px;text-align:left;border:1.5px solid var(--line);background:#fff;padding:11px 13px;transition:border-color .15s;}
.co-tab.active{border-color:var(--ink);border-width:2px;}
.co-tab-title{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--ink);}
.co-tab.active .co-tab-title{font-weight:700;}
.co-tab-icon{width:15px;height:15px;flex-shrink:0;color:var(--ink-soft);}
.co-tab.active .co-tab-icon{color:var(--ink);}
.co-tab-sub{display:block;font-size:10.5px;color:var(--ink-soft);margin-top:2px;line-height:1.3;margin-left:22px;}

.co-panel{display:flex;flex-direction:column;gap:14px;}
.co-panel[hidden]{display:none;}
.co-store-name{font-size:12.5px;font-weight:700;color:var(--ink);}
.co-label-sm{font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
.co-label-sm.co-icon-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink);text-transform:none;letter-spacing:normal;}
.co-inline-icon{width:15px;height:15px;flex-shrink:0;color:var(--ink);}
.co-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.co-day{flex-shrink:0;padding:8px 12px;border:1.5px solid var(--line);font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;background:#fff;}
.co-day.active{background:var(--ink);border-color:var(--ink);color:#fff;}
.co-slot{border:1.5px solid var(--line);padding:11px 13px;display:flex;flex-direction:column;gap:2px;}
.co-slot.active{border-color:var(--ink);border-width:2px;}
.co-slot-main{font-size:12px;font-weight:700;color:var(--ink);}
.co-slot-sub{font-size:10px;color:var(--ink-soft);}
.co-hours-box{background:var(--cream);padding:11px 13px;}
.co-hours-row{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft);margin-bottom:4px;}
.co-hours-row:last-child{margin-bottom:0;}
.co-estimate-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.co-estimate-row>span{display:flex;flex-direction:column;gap:3px;}
.co-estimate-value{align-items:flex-end;text-align:right;}
.co-complimentary{color:var(--ink-soft);font-weight:700;}
.co-tbc{color:var(--ink);font-weight:700;}

.co-payment-box{background:var(--cream);border:1px solid var(--line);padding:18px 20px;}
.co-payment-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.co-bank-name{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.co-bank-accounts{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.co-bank-accounts div{font-size:11.5px;color:var(--ink-soft);}
.co-bank-tag{display:inline-block;width:36px;font-weight:700;color:var(--ink);}
.co-qr-box{background:#fff;border:1px solid var(--line);padding:16px;text-align:center;margin-bottom:14px;max-width:200px;}
.co-qr-label{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:10px;text-transform:uppercase;}
.co-qr-img{width:140px;height:140px;margin:0 auto;object-fit:contain;}
.co-qr-img.img-missing{display:none;}
.co-qr-fallback{display:none;width:140px;height:140px;margin:0 auto;background:var(--line);align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink-soft);}
.co-qr-img.img-missing + .co-qr-fallback{display:flex;}
.co-payment-note{font-size:11px;color:var(--ink-soft);line-height:1.55;margin-bottom:14px;}
.co-upload-label{font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.co-upload{display:flex;align-items:center;justify-content:center;text-align:center;border:1.5px dashed var(--line);background:#fff;padding:20px 16px;font-size:12px;color:var(--ink-soft);cursor:pointer;transition:border-color .15s;}
.co-upload:hover{border-color:var(--ink-soft);}
.co-upload.has-file{border-color:var(--ink-soft);border-style:solid;background:var(--line);color:var(--ink);font-weight:700;}
.co-upload.error{border-color:var(--red);}
.co-upload input[type="file"]{display:none;}

.co-aside{display:flex;flex-direction:column;gap:16px;min-width:0;}
@media (min-width:960px){ .co-aside{position:sticky;top:88px;} }
.co-summary-card{background:#fff;border:1px solid var(--line);padding:22px 24px;}
.co-summary-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:16px;}
.co-summary-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink);margin-bottom:9px;}
.co-summary-row.co-muted{color:var(--ink-soft);font-size:11.5px;}
.co-summary-divider{border-top:1px dashed var(--line);margin:12px 0;}
.co-summary-row.co-total{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.co-price-note{font-size:10.5px;color:var(--ink-soft);margin:0 0 16px;}
.co-coupon-row{display:flex;gap:8px;margin-bottom:8px;}
.co-coupon-row input{flex:1;padding:10px 12px;border:1.5px solid var(--line);font-size:16px;font-family:inherit;}
.co-coupon-row input:focus{outline:none;border-color:var(--ink-soft);}
.co-coupon-btn{padding:0 16px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;}
.co-coupon-btn:hover{background:var(--ink);}
.co-loyalty-note{font-size:11.5px;color:var(--ink-soft);margin-top:8px;margin-bottom:18px;}

.co-terms-check{
  display:flex;align-items:center;gap:10px;
  margin:0 0 14px;cursor:pointer;user-select:none;
}
.co-terms-check input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.co-terms-box{
  width:18px;height:18px;flex-shrink:0;
  border:1.6px solid var(--line);border-radius:4px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.co-terms-box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.6);transition:opacity .12s ease, transform .12s ease;}
.co-terms-check input:checked ~ .co-terms-box{background:var(--ink-soft);border-color:var(--ink-soft);}
.co-terms-check input:checked ~ .co-terms-box svg{opacity:1;transform:scale(1);}
.co-terms-check input:focus-visible ~ .co-terms-box{outline:2px solid var(--ink-soft);outline-offset:2px;}
.co-terms-check span:last-child{font-size:12.5px;font-weight:700;color:var(--ink);}
.co-terms-check a{color:var(--ink-soft);text-decoration:underline;}
.co-terms-check a:hover{color:var(--ink);}
#coTermsField.has-error .co-terms-box{border-color:var(--red);}
#coTermsError{margin:-8px 0 14px;display:block;}

.co-place-btn{width:100%;padding:15px;background:var(--ink-soft);color:#fff;font-size:14.5px;font-weight:700;transition:background .15s;}
.co-place-btn:hover{background:var(--ink);}
.co-place-btn:disabled{opacity:.6;cursor:default;}
.co-secure-box{display:flex;gap:12px;align-items:flex-start;background:var(--line);padding:14px 16px;}
.co-secure-icon{width:19px;height:19px;flex-shrink:0;color:var(--ink-soft);margin-top:1px;}
.co-secure-title{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.co-secure-sub{font-size:11px;color:var(--ink-soft);line-height:1.5;}

/* success view */
.co-success{display:none;max-width:640px;margin:0 auto;text-align:center;padding:70px var(--side-pad) 100px;}
.co-success.show{display:block;}
.co-check-badge{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(145deg, var(--green-500), var(--green-700));
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  box-shadow:0 10px 26px rgba(46,140,108,.38), 0 0 0 8px rgba(46,140,108,.12);
  animation:coCheckPop .6s var(--ease-glass) both;
}
.co-check-badge svg{width:30px;height:30px;stroke:#fff;}
@keyframes coCheckPop{
  0%{transform:scale(.4);opacity:0;}
  60%{transform:scale(1.08);opacity:1;}
  100%{transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .co-check-badge{animation:none;}
}
.co-success-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.co-success-sub{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:26px;}
.co-success-box{border:1px solid var(--line);background:#fff;padding:20px 24px;text-align:left;margin-bottom:26px;}
.co-success-details{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);}
.co-success-k{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:3px;}
.co-success-v{font-size:13.5px;font-weight:700;color:var(--ink);}
.co-success-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.co-btn{padding:13px 24px;font-size:13.5px;font-weight:700;border:1.5px solid var(--ink);border-radius:10px;transition:background .2s ease, box-shadow .2s ease, transform .15s ease;}
.co-btn:active{transform:scale(.97);}
.co-btn-primary{background:var(--glass-dark-bg);color:var(--ink);border-color:var(--glass-dark-border);backdrop-filter:var(--glass-dark-blur);-webkit-backdrop-filter:var(--glass-dark-blur);box-shadow:var(--glass-dark-shadow);}
.co-btn-primary:hover{background:var(--glass-dark-bg-strong);}
.co-btn-ghost{
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  color:var(--ink);border-color:var(--ink);
  box-shadow:var(--glass-shadow);
}
.co-btn-ghost:hover{background:var(--glass-bg-strong);box-shadow:var(--glass-shadow-lg);}

.co-page.co-placing .co-content{opacity:.5;pointer-events:none;}

@media (max-width:640px){
  .co-header-inner{padding:12px 18px;}
  .co-wrap{padding:0 18px 70px;}
  .co-back span{display:none;}
  .co-secure-note span{display:none;}
}


/* ============ Cart + checkout polish ============ */
.cart-row{
  align-items:center;
  padding:14px 4px;
  transition:opacity .22s ease, transform .22s ease, background .22s ease;
}
.cart-row:hover{background:rgba(232,242,235,.42);}
.cart-row-qty button,
.co-item-qty button{
  border-radius:8px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.cart-row-qty button:hover,
.co-item-qty button:hover{
  background:var(--line);
  border-color:var(--ink-soft);
  color:var(--ink);
  transform:translateY(-1px);
}
.cart-row-qty button:active,
.co-item-qty button:active{transform:scale(.92);}
.cart-row-title{padding-right:8px;}
.checkout-btn{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 8px 18px rgba(15,58,46,.16);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.checkout-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.2) 48%, transparent 75%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.checkout-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,58,46,.22);}
.checkout-btn:hover::after{transform:translateX(120%);}
.checkout-btn:active{transform:translateY(0) scale(.985);}
.checkout-btn:disabled{opacity:.72;cursor:wait;}
body.is-checkout-leaving .cart-drawer{transform:translateX(105%);}
body.is-checkout-leaving .drawer-backdrop{opacity:0;}
body.is-checkout-leaving .cart-drawer,
body.is-checkout-leaving .drawer-backdrop{transition-duration:.34s;}

.co-content,
#coContent{
  animation:checkoutContentIn .5s var(--ease-glass) both;
}
.co-section{
  border-radius:16px;
  box-shadow:0 8px 24px rgba(15,58,46,.045);
  transition:transform .22s ease, box-shadow .22s ease;
}
.co-section:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,58,46,.075);}
.co-item-row{
  border:1px solid transparent;
  border-radius:12px;
  padding:14px 10px;
  margin:0 -10px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.co-item-row:first-child{padding-top:14px;}
.co-item-row:last-child{padding-bottom:14px;}
.co-item-row:hover{background:var(--line);border-color:rgba(94,157,119,.22);transform:translateX(2px);}
.co-item-media{border-radius:12px;overflow:hidden;box-shadow:0 3px 10px rgba(15,58,46,.08);}
.co-item-price{font-variant-numeric:tabular-nums;}
.co-place-btn{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 8px 18px rgba(15,58,46,.16);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.co-place-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.2) 48%, transparent 75%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.co-place-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,58,46,.22);}
.co-place-btn:hover::after{transform:translateX(120%);}
.co-place-btn:active{transform:scale(.985);}
.co-page.co-placing #coContent{opacity:.45;transform:translateY(6px);transition:opacity .25s ease, transform .25s ease;}
@keyframes checkoutContentIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
@media (max-width:640px){
  .co-item-row{gap:10px;margin:0 -4px;padding-left:4px;padding-right:4px;}
  .co-item-name{font-size:12px;}
  .co-item-price{font-size:11.5px;}
}


/* ============ Flat checkout refinement ============ */
.co-page{background:#fff;}
.co-header{background:#fff;border-top:0;border-bottom:1px solid #d5d9d9;box-shadow:none;}
.co-header-inner{padding:18px var(--side-pad);}
.co-header-logo img{height:30px;}
.co-secure-note{color:#565959;font-weight:600;}
.co-secure-note svg{color:#5f6b6d;}
.co-wrap{padding-top:0;}
.co-title-row{padding:28px 0 2px;border-bottom:0;}
.co-title{font-size:22px;font-weight:600;color:#172e25;}
.co-title-sub{color:#5f6b6d;font-size:12px;}
.co-grid{margin-top:18px;gap:24px;}
@media (min-width:960px){.co-grid{grid-template-columns:minmax(0,1fr) 360px;gap:32px;}}
.co-section{border:1px solid #d5d9d9;border-radius:0;background:#fff;box-shadow:none;margin-bottom:16px;padding:22px 26px;}
.co-section:hover{transform:none;box-shadow:none;}
.co-section-head{font-size:14px;font-weight:600;color:#172e25;margin-bottom:18px;}
.co-num{width:20px;height:20px;border-radius:50%;background:#eef0f0;color:#172e25;font-size:11px;}
.co-contact-box{background:#f7f8f8;border:1px solid #eaeded;padding:14px 16px;}
.co-field input,.co-field select,.co-field textarea{border:1px solid #a6a6a6;border-radius:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,.08);}
.co-field input:focus,.co-field select:focus,.co-field textarea:focus{border-color:#007185;box-shadow:0 0 0 2px rgba(0,113,133,.16);}
.co-items{gap:0;}
.co-item-row,
.co-item-row:first-child,
.co-item-row:last-child{
  margin:0;
  padding:18px 0;
  border:0;
  border-bottom:1px solid #eaeded;
  border-radius:0;
  background:#fff;
  transform:none;
  transition:none;
}
.co-item-row:first-child{padding-top:4px;}
.co-item-row:last-child{padding-bottom:4px;border-bottom:0;}
.co-item-row:hover{background:#fff;border-color:#eaeded;transform:none;}
.co-item-media{width:64px;height:64px;border:1px solid #eaeded;border-radius:4px;background:#f7f8f8;box-shadow:none;}
.co-item-name{font-size:12.5px;font-weight:600;color:#172e25;}
.co-item-meta{color:#5f6b6d;font-size:11px;}
.co-item-qty{gap:8px;margin-top:8px;}
.co-item-qty button,
.co-item-qty button:hover,
.co-item-qty button:active{
  width:24px;height:24px;border:1px solid #c7cccc;border-radius:3px;background:#fff;color:#172e25;
  transform:none;transition:none;box-shadow:none;
}
.co-item-qty button:hover{background:#f7f8f8;border-color:#a6a6a6;color:#172e25;}
.co-item-qty span{font-size:12px;font-weight:600;color:#172e25;}
.co-item-price{font-size:12.5px;font-weight:600;color:#172e25;}
.co-tabs{gap:8px;}
.co-tab{border:1px solid #c7cccc;border-radius:0;background:#fff;transition:none;}
.co-tab:hover{background:#f7f8f8;}
.co-tab.active{border:2px solid #172e25;background:#fff;}
.co-day,.co-slot{border:1px solid #c7cccc;border-radius:3px;}
.co-day.active,.co-slot.active{border-color:#172e25;background:#f7f8f8;color:#172e25;}
.co-payment-box,.co-hours-box{background:#f7f8f8;border:1px solid #eaeded;border-radius:0;}
.co-upload{border:1px dashed #a6a6a6;border-radius:3px;transition:none;}
.co-upload:hover{border-color:#007185;background:#f7f8f8;}
.co-aside{gap:14px;}
.co-summary-card{border:1px solid #d5d9d9;border-radius:0;padding:20px 22px;box-shadow:none;}
.co-summary-title{font-size:15px;font-weight:600;color:#172e25;}
.co-summary-row.co-total{font-size:15px;color:#172e25;}
.co-coupon-row input{border:1px solid #a6a6a6;border-radius:3px;}
.co-coupon-btn{border-radius:3px;background:#e7e9e9;color:#172e25;border:1px solid #a6a6a6;}
.co-coupon-btn:hover{background:#d5d9d9;}
.co-place-btn{
  border-radius:3px;background:#ffd814;color:#172e25;box-shadow:none;transition:none;
}
.co-place-btn::after{display:none;}
.co-place-btn:hover{background:#f7ca00;transform:none;box-shadow:none;}
.co-place-btn:active{transform:none;}
.co-secure-box{background:#f7f8f8;border:1px solid #eaeded;border-radius:0;}
.co-content,#coContent{animation:none;}
.co-page.co-placing #coContent{opacity:.6;transform:none;transition:none;}
@media (max-width:640px){
  .co-header-inner{padding:16px 18px;}
  .co-wrap{padding-left:18px;padding-right:18px;}
  .co-title{font-size:19px;}
  .co-section{padding:18px;}
}


/* ============ Checkout header final adjustment ============ */
.co-header-inner{justify-content:space-between;}
.co-back{display:flex;align-items:center;gap:7px;color:#565959;font-size:13px;font-weight:600;text-decoration:none;transition:color .15s, transform .15s;}
.co-back:hover{color:#007185;}
.co-back:active{transform:scale(.96);}
.co-back svg{width:16px;height:16px;transition:transform .25s cubic-bezier(.22,1,.36,1);}
.co-back:hover svg{transform:translateX(-3px);}
@media (max-width:640px){
  .co-back span{display:inline;}
  .co-header-inner{padding:16px 18px;}
}


/* ============ Payment QR + bank details layout ============ */
.co-payment-box{padding:22px 24px 24px;}
.co-payment-label{font-size:13px;margin-bottom:16px;}
.co-payment-grid{display:grid;grid-template-columns:minmax(230px, .95fr) minmax(0, 1.25fr);gap:16px;align-items:stretch;}
.co-qr-panel,.co-bank-panel{border:1px solid #d5d9d9;background:#fff;min-height:270px;padding:18px;}
.co-qr-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f7f8f8;}
.co-qr-label,.co-bank-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#565959;margin-bottom:12px;}
.co-qr-box{width:220px;height:220px;max-width:100%;background:#fff;border:1px solid #d5d9d9;display:flex;align-items:center;justify-content:center;padding:12px;margin:0 auto 12px;}
.co-qr-img{width:100%;height:100%;max-width:190px;max-height:190px;object-fit:contain;}
.co-qr-img.img-missing{display:none;}
.co-qr-fallback{display:none;width:100%;height:100%;align-items:center;justify-content:center;background:#eef5f1;color:#565959;font-size:12px;font-weight:700;letter-spacing:.05em;}
.co-qr-img.img-missing + .co-qr-fallback{display:flex;}
.co-qr-caption{font-size:11.5px;line-height:1.45;color:#5f6b6d;max-width:240px;}
.co-bank-panel{display:flex;flex-direction:column;justify-content:center;}
.co-bank-label{color:#007185;margin-bottom:18px;}
.co-bank-name{font-size:18px;font-weight:700;color:#172e25;margin-bottom:4px;}
.co-bank-company{font-size:13px;font-weight:600;color:#565959;margin-bottom:20px;}
.co-bank-accounts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.co-bank-accounts div{display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 10px;background:#f7f8f8;border:1px solid #eaeded;font-size:14px;color:#172e25;}
.co-bank-accounts strong{font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.co-bank-tag{display:inline-flex;align-items:center;justify-content:center;width:38px;color:#565959;font-size:11px;font-weight:800;letter-spacing:.04em;}
/* Highlights the bank account that matches the shopper's chosen currency
   (MVR or USD) so it's clear which one to pay into. */
.co-bank-accounts div.co-bank-match{background:var(--green-100);border-color:var(--green-500);}
.co-bank-accounts div.co-bank-match .co-bank-tag{color:var(--green-700);}
.co-bank-note{border-top:1px solid #eaeded;padding-top:14px;font-size:11.5px;line-height:1.5;color:#5f6b6d;}
.co-payment-note{margin:16px 0 18px;padding:12px 14px;background:#f7f8f8;border-left:3px solid #aab7b3;line-height:1.5;}
.co-upload-label{margin-bottom:8px;}
.co-upload{min-height:58px;}
@media (max-width:700px){
  .co-payment-grid{grid-template-columns:1fr;}
  .co-qr-panel,.co-bank-panel{min-height:0;}
  .co-qr-box{width:min(260px,100%);height:min(260px,70vw);}
}


/* ============ Mobile horizontal scrolling for long checkout rows ============ */
.co-days{
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap;
  justify-content:flex-start;
  padding:2px 2px 10px;
  margin-right:-2px;
  scrollbar-width:thin;
  scrollbar-color:#aab7b3 transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
}
.co-days::-webkit-scrollbar{height:7px;}
.co-days::-webkit-scrollbar-track{background:#eef0f0;border-radius:10px;}
.co-days::-webkit-scrollbar-thumb{background:#aab7b3;border-radius:10px;}
.co-days .co-day{flex:0 0 auto;white-space:nowrap;}
@media (max-width:700px){
  .co-days{margin-left:-2px;margin-right:-2px;padding-left:2px;padding-right:12px;}
  .co-days .co-day{padding-left:12px;padding-right:12px;}
}

/* ============ Delivery method tabs: stacked (portrait) layout on mobile, ============
   no horizontal scroll needed — tabs stay full-width whether phone is upright or rotated. */
@media (max-width:900px){
  .co-tabs{
    flex-direction:column;
    flex-wrap:nowrap;
    overflow-x:visible;
  }
  .co-tabs .co-tab{
    flex:1 1 auto;
    width:100%;
    min-width:0;
  }
}


/* ============ Smooth page-to-page transitions (rise up) ============ */
@view-transition{
  navigation:auto;
}
::view-transition-old(root){
  animation:page-fade-out .3s cubic-bezier(.4,0,.6,1) both;
}
::view-transition-new(root){
  animation:page-rise-in 1.5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes page-rise-in{
  from{opacity:0;transform:translateY(28px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes page-fade-out{
  from{opacity:1;}
  to{opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important;}
}
/* Fallback for browsers without the View Transitions API */
body.page-enter{animation:page-rise-in 1.5s cubic-bezier(.22,1,.36,1) both;}
body.page-leaving{animation:page-fade-out .22s ease both;}
@media (prefers-reduced-motion:reduce){
  body.page-enter,body.page-leaving{animation:none!important;}
}

/* ============ Page loader (splash shown on refresh/full load) ============ */
#pageLoader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);
  transition:opacity .6s cubic-bezier(.4,0,.2,1), visibility .6s cubic-bezier(.4,0,.2,1);
}
#pageLoader[hidden]{display:none;} /* author display:flex was overriding the hidden attribute */
#pageLoader.loader-hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader-inner{
  display:flex;flex-direction:column;align-items:center;gap:30px;
}
.loader-logo{
  height:clamp(168px,24vw,252px);width:auto;
  opacity:0;
  animation:loader-logo-in 1.5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes loader-logo-in{
  0%{opacity:0;transform:scale(.86) translateY(10px);}
  55%{opacity:1;transform:scale(1.015) translateY(0);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.loader-dots{display:flex;gap:9px;}
.loader-dots span{
  width:11px;height:11px;border-radius:50%;
  background:var(--ink-soft);
  animation:loaderDotBounce 1s var(--ease-glass,cubic-bezier(.4,0,.2,1)) infinite;
}
.loader-dots span:nth-child(2){animation-delay:.15s;}
.loader-dots span:nth-child(3){animation-delay:.3s;}
@keyframes loaderDotBounce{
  0%, 80%, 100%{transform:translateY(0) scale(.8);opacity:.5;}
  40%{transform:translateY(-10px) scale(1);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  #pageLoader{transition:opacity .01s linear;}
  .loader-logo{animation:none;opacity:1;}
  .loader-dots span{animation:none;opacity:1;transform:none;}
}


/* ============ Payment layout refinement ============ */
.co-payment-grid{display:flex;flex-direction:column;gap:14px;}
.co-bank-panel,.co-qr-panel{width:100%;}
.co-qr-panel,.co-bank-panel{min-height:310px;padding:22px;}
.co-qr-box{width:260px;height:260px;padding:14px;margin-bottom:14px;}
.co-qr-img{max-width:228px;max-height:228px;}
.co-qr-caption{max-width:270px;}
.co-bank-panel{justify-content:flex-start;padding-top:28px;}
.co-bank-name{font-size:15px;}
.co-bank-company{font-size:11px;margin-bottom:24px;}
.co-bank-accounts div{min-height:46px;padding:10px 12px;font-size:clamp(11px,1.15vw,14px);gap:8px;}
.co-bank-accounts strong{min-width:0;white-space:nowrap;letter-spacing:0;font-size:1em;}
.co-bank-tag{flex:0 0 34px;width:34px;}
.co-payment-note{margin-top:20px;margin-bottom:20px;}
@media (max-width:700px){
  .co-payment-grid{flex-direction:column;gap:14px;}
  .co-qr-panel,.co-bank-panel{min-height:0;}
  .co-qr-box{width:min(280px,100%);height:min(280px,72vw);}
  .co-qr-img{max-width:calc(100% - 24px);max-height:calc(100% - 24px);}
}

/* ============================================================
   INSTALL APP PROMPT — "How to Install on Your Device"
   Shown once, right after a successful login.
============================================================ */
.install-backdrop{
  position:fixed;inset:0;z-index:480;
  background:rgba(12,31,23,.46);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease-glass);
}
.install-backdrop.show{opacity:1;pointer-events:auto;}

.install-modal{
  position:fixed;inset:0;z-index:490;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;justify-content:center;
  padding:24px 20px;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-glass);
}
.install-modal.open{opacity:1;pointer-events:auto;}

.install-card{
  position:relative;width:100%;max-width:min(92vw, 400px);
  margin:auto;
  display:flex;flex-direction:column;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:26px;
  box-shadow:var(--glass-shadow-lg);
  text-align:center;
  transform:translateY(28px) scale(.92);
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s var(--ease-glass);
}
.install-modal.open .install-card{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Content just flows naturally now — the page/modal itself slides down
   on both web and mobile instead of scrolling inside a clipped box. */
.install-scroll{
  padding:34px 28px 26px;
}

.install-close-btn{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;color:var(--ink-soft);
  background:rgba(255,255,255,.5);
  border:1px solid var(--glass-border);
  transition:background .15s, color .15s, transform .15s;
}
.install-close-btn:hover{background:rgba(255,255,255,.9);color:var(--ink);transform:rotate(90deg);}

/* ---- icon stack ---- */
.install-icon-wrap{
  position:relative;
  width:100px;height:100px;
  margin:2px auto 20px;
  display:flex;align-items:center;justify-content:center;
}
.install-icon-glow{
  position:absolute;inset:-14px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(46,140,108,.38) 0%, rgba(46,140,108,0) 70%);
  animation:installGlowPulse 2.6s ease-in-out infinite;
}
.install-icon-ring{
  position:absolute;inset:0;
  border-radius:50%;
  border:1.5px dashed rgba(22,75,59,.28);
  animation:installRingSpin 14s linear infinite;
}
.install-icon-frame{
  position:relative;z-index:1;
  width:76px;height:76px;border-radius:22px;
  background:var(--white);
  border:1px solid var(--glass-border);
  box-shadow:0 10px 26px rgba(15,58,46,.22);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  animation:installIconFloat 3.4s ease-in-out infinite;
}
.install-icon-img{width:100%;height:100%;object-fit:cover;display:block;}
.install-icon-badge{
  position:absolute;bottom:-6px;right:-6px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:var(--green-800);color:#fff;
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--cream);
  box-shadow:0 4px 10px rgba(15,58,46,.35);
  animation:installBadgeBounce 2.2s ease-in-out infinite;
}
.install-icon-badge svg{width:16px;height:16px;}

@keyframes installGlowPulse{
  0%,100%{opacity:.55;transform:scale(1);}
  50%{opacity:1;transform:scale(1.12);}
}
@keyframes installRingSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes installIconFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}
@keyframes installBadgeBounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(3px);}
}

/* ---- copy ---- */
.install-title{
  font-family:var(--font-display);
  font-size:19px;font-weight:700;color:var(--ink);
  line-height:1.3;margin-bottom:8px;
  animation:installFadeUp .45s var(--ease-glass) both;
  animation-delay:.05s;
}
.install-sub{
  font-size:13px;color:var(--ink-soft);line-height:1.55;
  margin-bottom:18px;
  animation:installFadeUp .45s var(--ease-glass) both;
  animation-delay:.1s;
}
.install-sub-break{display:none;}
.install-native-note{
  font-size:12.5px;font-weight:600;color:var(--green-700);
  background:var(--green-100);
  border-radius:12px;
  padding:10px 14px;
  margin-bottom:20px;
  animation:installFadeUp .45s var(--ease-glass) both;
  animation-delay:.12s;
}
.install-native-note[hidden]{display:none;}

@keyframes installFadeUp{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---- device tabs (Android / iOS / Windows) ---- */
.install-tabs{
  display:flex;gap:6px;
  background:var(--green-100);
  border-radius:14px;
  padding:4px;
  margin-bottom:16px;
  opacity:0;animation:installFadeUp .45s var(--ease-glass) both;
  animation-delay:.14s;
}
.install-tab{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 6px;border-radius:11px;
  font-size:12.5px;font-weight:700;color:var(--green-700);
  transition:background .18s var(--ease-glass), color .18s var(--ease-glass), box-shadow .18s var(--ease-glass);
}
.install-tab svg{width:15px;height:15px;flex-shrink:0;}
.install-tab.active{
  background:var(--white);color:var(--green-900);
  box-shadow:0 4px 12px rgba(15,58,46,.14);
}
.install-tab:hover:not(.active){color:var(--green-900);}
.install-modal.install-native .install-tabs{display:none;}

/* ---- guide screenshot (swap the <img> src in index.html with your own
   1080×1350 screenshot — see #installGuideGallery-android/-ios/-windows) ---- */
.install-guide-panels{position:relative;}
.install-guide-gallery{margin:0 0 18px;}
.install-guide-gallery[hidden]{display:none;}
.install-guide-slide{
  opacity:0;animation:installFadeUp .45s var(--ease-glass) both;
  animation-delay:.16s;
}
.install-guide-img-wrap{
  position:relative;
  aspect-ratio:1080/1350;
  width:70%;
  max-width:240px;
  margin:0 auto;
  border-radius:16px;overflow:hidden;
  background:var(--green-100);
  border:1px solid var(--glass-border);
}
.install-guide-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;}

/* Tap-to-view affordance on each guide screenshot */
.install-guide-img-wrap.zoomable{cursor:pointer;}
.install-guide-zoom-hint{
  position:absolute;right:8px;bottom:8px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  pointer-events:none;
  transition:transform .18s ease, background .18s ease;
}
.install-guide-zoom-hint svg{width:15px;height:15px;}
.install-guide-img-wrap.zoomable:hover .install-guide-zoom-hint,
.install-guide-img-wrap.zoomable:active .install-guide-zoom-hint{
  background:rgba(0,0,0,.68);transform:scale(1.08);
}
.install-guide-img-wrap.img-missing .install-guide-zoom-hint{display:none;}

/* ---- fullscreen screenshot viewer ---- */
.install-lightbox{
  position:fixed;inset:0;z-index:1200;
  background:rgba(10,20,17,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.install-lightbox.show{opacity:1;visibility:visible;}
.install-lightbox-back{
  position:absolute;top:18px;left:18px;z-index:2;
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:9px 16px 9px 12px;
  font-size:13px;font-weight:700;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .18s ease;
}
.install-lightbox-back:hover{background:rgba(255,255,255,.2);}
.install-lightbox-back svg{width:18px;height:18px;}
.install-lightbox-stage{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:70px 20px 30px;
  overflow:hidden;
  touch-action:none;
}
.install-lightbox-stage img{
  max-width:100%;max-height:100%;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0;transform:scale(.96);
  transition:opacity .22s ease .05s, transform .22s ease .05s;
  cursor:zoom-in;
  touch-action:none;
  user-select:none;-webkit-user-select:none;
}
.install-lightbox.show .install-lightbox-stage img{opacity:1;transform:scale(1);}
.install-lightbox-stage img.is-zoomed{cursor:zoom-out;}

/* Shown until you drop in a real screenshot — the onerror handler on the
   <img> adds this class, so there's never a broken-image icon. */
.install-guide-img-wrap.img-missing{
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px;
  border:1.5px dashed rgba(22,75,59,.35);
  background:repeating-linear-gradient(135deg, rgba(22,75,59,.05) 0 10px, rgba(22,75,59,.02) 10px 20px);
}
.install-guide-img-wrap.img-missing img{display:none;}
.install-guide-img-wrap.img-missing::before{
  content:attr(data-placeholder);
  font-size:11.5px;font-weight:600;color:var(--green-700);
  line-height:1.5;
}

.install-guide-steps{
  list-style:none;
  counter-reset:install-step;
  margin-top:16px;
  display:flex;flex-direction:column;gap:10px;
  opacity:0;animation:installFadeUp .45s var(--ease-glass) both;
  animation-delay:.24s;
}
.install-guide-steps li{
  counter-increment:install-step;
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;color:var(--ink);
  text-align:left;
  white-space:nowrap;
}
.install-guide-steps li::before{
  content:counter(install-step);
  flex-shrink:0;
  width:20px;height:20px;border-radius:50%;
  background:var(--green-100);color:var(--green-800);
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.install-guide-steps strong{color:var(--green-800);}

/* ---- desktop: screenshot + steps sit side-by-side instead of stacked ---- */
@media (min-width:860px){
  .install-card{max-width:600px;}
  .install-scroll{padding:40px 40px 32px;}
  .install-guide-gallery{
    display:flex;align-items:center;gap:28px;
    text-align:left;
  }
  .install-guide-slide{flex-shrink:0;}
  .install-guide-img-wrap{width:180px;max-width:180px;margin:0;}
  .install-guide-steps{margin-top:0;flex:1;}
}

/* ---- actions ---- */
.install-cta-btn{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px;border-radius:16px;
  background:linear-gradient(135deg, var(--green-700), var(--green-900));
  color:#fff;font-size:14.5px;font-weight:700;
  box-shadow:0 12px 26px rgba(15,58,46,.32);
  transition:transform .18s var(--ease-glass), box-shadow .18s var(--ease-glass), filter .15s;
  animation:installFadeUp .45s var(--ease-glass) both;
  animation-delay:.38s;
}
.install-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,58,46,.38);filter:brightness(1.05);}
.install-cta-btn:active,
.install-cta-btn.install-cta-pop{transform:scale(.96);}
.install-cta-check{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.install-cta-check svg{width:13px;height:13px;}
.install-cta-btn.install-cta-pop .install-cta-check{
  transform:scale(1.35) rotate(-8deg);
  background:rgba(255,255,255,.4);
}

/* Native one-tap variant (beforeinstallprompt available) skips the
   screenshot guide — the note above the button explains why. */
.install-modal.install-native .install-guide-gallery{display:none;}

@media (max-width:640px){
  .install-card{border-radius:22px;}
  .install-modal{padding:12px;}
  .install-scroll{padding:30px 20px 20px;}
  .install-icon-wrap{width:88px;height:88px;margin-bottom:16px;}
  .install-icon-frame{width:68px;height:68px;border-radius:19px;}
  .install-title{font-size:17.5px;}
  .install-sub{font-size:12.5px;}
  .install-sub-break{display:inline;}
  .install-guide-slide{flex-basis:82%;}
  .install-tab{font-size:11.5px;padding:8px 4px;gap:4px;}
  .install-tab svg{width:13px;height:13px;}
}

/* Extra headroom on very narrow phones so the one-line steps never
   crowd or overflow their row. */
@media (max-width:360px){
  .install-guide-steps li{font-size:12px;gap:8px;}
}

/* ============ Unified "Back" buttons ============
   One look everywhere: plain arrow + regular-weight (not bold) label, no pill / border / shadow.
   Applies to: profile menu, profile / orders / product views (Back to store),
   checkout header, and the legal pages (privacy / terms).
   (The dark full-screen screenshot viewer keeps its own white-on-dark button.) */
.profile-menu-back,
.profile-view-close,
.co-back,
.legal-back{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 4px 6px 0;margin:0;
  background:none;border:none;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:#4B5563;
  font-family:'Montserrat',sans-serif;font-size:16px;font-weight:400;line-height:1.2;
  text-decoration:none;
  transition:color .15s, transform .15s;
  flex-shrink:0;
}
.profile-menu-back:hover, .profile-menu-back:active,
.profile-view-close:hover, .profile-view-close:active,
.co-back:hover, .co-back:active,
.legal-back:hover, .legal-back:active{
  color:var(--ink);background:none;box-shadow:none;
}
.profile-menu-back:active,
.profile-view-close:active,
.co-back:active,
.legal-back:active{transform:scale(.97);}
.profile-menu-back svg,
.profile-view-close svg,
.co-back svg,
.legal-back svg{
  width:20px;height:20px;flex-shrink:0;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.profile-menu-back:hover svg,
.profile-view-close:hover svg,
.co-back:hover svg,
.legal-back:hover svg{transform:translateX(-3px);}
/* always show the label (it used to be hidden on small screens) */
.profile-menu-back span,
.profile-view-close span,
.co-back span,
.legal-back span{display:inline;}
@media (max-width:640px){
  .profile-menu-back,
  .profile-view-close,
  .co-back,
  .legal-back{font-size:15px;gap:8px;}
  .profile-menu-back svg,
  .profile-view-close svg,
  .co-back svg,
  .legal-back svg{width:18px;height:18px;}
}

/* ============ Order status notifications — single line ============
   Icon · status label · order number · close, all on ONE line (pill).
   The longer description line is hidden. */
.order-notif-stack{
  width:max-content;
  max-width:calc(100vw - 24px);
  align-items:center;
}
.order-notif{
  align-items:center;
  gap:10px;
  max-width:100%;
  padding:9px 12px 9px 10px;
  border-radius:999px;
}
.order-notif-icon{width:26px;height:26px;}
.order-notif-icon svg{width:14px;height:14px;}
.order-notif-body{
  display:flex;align-items:center;gap:8px;
  flex:0 1 auto;min-width:0;
}
.order-notif-top{display:contents;}        /* title + close become items of the body row */
.order-notif-title{
  font-size:13px;font-weight:700;line-height:1.3;
  white-space:nowrap;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
}
.order-notif-sub{display:none;}
.order-notif-id{
  order:2;margin:0;
  font-size:12px;font-weight:600;letter-spacing:0;line-height:1.3;
  white-space:nowrap;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
}
.order-notif-close{order:3;margin-left:2px;}

/* ============ Product detail page — full-screen layout (tablet / desktop) ============
   The product section now fills the whole screen under the top bar:
   big product photo on the left, larger title / price / quantity / button on the right.
   (Phones keep the existing edge-to-edge layout above.) */
@media (min-width:721px){
  .product-detail-card{
    min-height:calc(100vh - 80px);
    min-height:calc(100dvh - 80px);
    box-sizing:border-box;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:clamp(32px,5vw,96px);
    align-items:center;
    padding:clamp(32px,4vw,72px) clamp(24px,5vw,88px);
  }

  /* big product photo */
  .pd-media{
    aspect-ratio:auto;
    width:100%;
    height:min(74vh,780px);
    min-height:380px;
    border-radius:20px;
  }
  .pd-media img{
    object-fit:contain;
    padding:clamp(16px,3vw,48px);
    box-sizing:border-box;
    mix-blend-mode:multiply;            /* white photo backgrounds blend into the tile */
  }

  /* info column */
  .pd-info{
    width:100%;max-width:640px;
    justify-self:start;
    gap:clamp(18px,2vw,28px);
  }
  .pd-info .stock-indicator{font-size:14px;margin-bottom:10px;}
  .pd-info .stock-dot{width:10px;height:10px;}
  .pd-title{
    font-size:clamp(21px,1.8vw,27px);
    line-height:1.28;
    letter-spacing:-.01em;
    overflow-wrap:anywhere;
  }
  .pd-code{font-size:14px;margin-top:8px;letter-spacing:.02em;}
  .pd-meta{gap:32px;align-items:flex-end;}
  .pd-unit small{font-size:13px;margin-bottom:2px;}
  .pd-unit strong{font-size:18px;font-weight:600;}
  .pd-price{font-size:clamp(26px,2.2vw,32px);}

  /* quantity + add to cart */
  .pd-actions{margin-top:4px;}
  .pd-qty-label{font-size:12.5px;}
  .pd-actions .card-qty.pd-qty{max-width:220px;padding:6px;border-radius:14px;}
  .pd-actions .card-qty.pd-qty .qty-btn{width:44px;height:44px;font-size:20px;border-radius:10px;}
  .pd-actions .card-qty.pd-qty .qty-val{font-size:18px;}
  .pd-actions .card-add{padding:19px 24px;font-size:16px;border-radius:14px;}
  .pd-actions .card-remove-link{font-size:13px;margin-top:12px;}

  /* similar / other products line up with the card's side padding */
  .similar-products-section{
    margin-top:0;
    padding:clamp(28px,4vw,56px) clamp(24px,5vw,88px) 56px;
  }
}

/* ============ Product detail photo — no box, bigger, square corners ============ */
.pd-media{
  background:#fff;                 /* plain — no gradient tile */
  border-radius:0;
}
.pd-media::before,
.pd-media::after{display:none;}    /* remove the dotted pattern + the cube icon behind the photo */
/* keep the cube placeholder ONLY when the product has no photo */
.pd-media:has(img.img-missing)::after{display:block;}
.pd-media img{
  padding:0;
  border-radius:0;
  object-fit:contain;
  transform:scale(1.45);           /* product fills the tile (source photos have lots of white margin) */
  transform-origin:center;
}
@media (min-width:721px){
  .pd-media{border-radius:0;height:min(78vh,840px);}
  .pd-media img{padding:0;}
}
@media (max-width:720px){
  .pd-media img{transform:scale(1.3);}
}

/* ============================================================
   HOME REDESIGN — header logo placement + hero/quick-cats/promo/
   popular-products/Viber CTA, styled after the app-style reference
   mockup (rounded cards, centered logo, hamburger + cart header).
   Scoped to its own classes so it doesn't touch --radius or any
   token shared with checkout/legal/other pages.
   ============================================================ */

/* ---- Header: currency dropdown (mobile only, replaces the old hamburger) + centered logo + cart ---- */
.navbar-currency-wrap{display:none;}

/* Desktop guests use the same compact currency-change icon as mobile. The
   logged-in view keeps currency selection inside the profile menu instead. */
@media (min-width:721px){
  .navbar-top{position:relative;}
  /* Leaves a clear gap between the search bar and the currency icon
     (which is absolutely positioned to the right of the search). */
  body:not(.is-authenticated) .navbar-search-row{
    padding-right:60px;
  }
  body:not(.is-authenticated) .navbar-currency-wrap{
    display:flex;
    position:absolute;
    right:112px;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
  }
  body:not(.is-authenticated) .navbar-currency-wrap .navbar-currency-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:50%;
    min-width:158px;
    padding:9px;
    background:var(--glass-bg-strong);
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    border:1px solid var(--glass-border);
    border-radius:16px;
    box-shadow:var(--glass-shadow-lg);
    opacity:0;
    visibility:hidden;
    transform:translate(50%,-6px);
    transition:opacity .15s, transform .15s, visibility .15s;
  }
  body:not(.is-authenticated) .navbar-currency-wrap.open .navbar-currency-dropdown{
    opacity:1;
    visibility:visible;
    transform:translate(50%,0);
  }
  body:not(.is-authenticated) .navbar-currency-dropdown .currency-toggle{
    width:100%;
  }
  body:not(.is-authenticated) .navbar-currency-dropdown .currency-toggle-btn{
    flex:1;
    justify-content:center;
  }
}

@media (max-width:720px){
  .navbar-top{
    display:grid;
    grid-template-columns:44px 1fr auto;
    align-items:center;
    column-gap:6px;
    /* The centered logo is absolutely positioned, so reserve the same
       vertical space it used to contribute to the header layout. */
    min-height:80px;
  }
  .navbar-currency-wrap{
    display:flex;
    grid-column:1;
    position:relative;
  }
  .navbar-hamburger-btn{
    background:none;
  }
  .navbar-currency-dropdown{
    position:absolute;top:calc(100% + 10px);left:0;
    min-width:150px;
    background:var(--glass-bg-strong);
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    border:1px solid var(--glass-border);
    border-radius:16px;
    box-shadow:var(--glass-shadow-lg);
    padding:10px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .15s, transform .15s, visibility .15s;
    z-index:200;
  }
  .navbar-currency-wrap.open .navbar-currency-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .navbar-currency-dropdown .currency-toggle{width:100%;}
  .navbar-currency-dropdown .currency-toggle-btn{flex:1;justify-content:center;}
  /* Keep the change-currency icon and its MVR/USD switch available in the
     same top menu for both guests and authenticated shoppers. */
  .navbar-top .brand{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    margin-right:0;
  }
  .navbar-top .brand-logo{height:80px;transform:scale(1.25);}
  .navbar.nav-compact .navbar-hamburger-btn{width:38px;height:38px;}

  /* Search moves down into the hero pill on the redesigned home — the
     inline header search row is no longer shown on mobile. */
  .navbar-top .navbar-search-row{display:none;}

  .navbar-top .nav-actions{grid-column:3;gap:6px;}
  .navbar-top .nav-actions .currency-toggle{display:none;}
  .navbar-top #cartBtn{display:flex;}
  .navbar.nav-compact .navbar-top #cartBtn{width:38px;height:38px;}
}

/* ---- Hero: rounded card to match the reference banner ---- */
.hero{border-radius:26px;}
@media (max-width:720px){
  .hero{border-radius:22px;}
}

/* ---- Hero search pill ---- */
.hero-search-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  padding:13px 18px;
  margin:-20px 0 20px;
  box-shadow:0 10px 26px rgba(15,58,46,.12);
  color:var(--ink-soft);
  font-size:14px;
  cursor:pointer;
  position:relative;
  z-index:2;
  max-width:520px;
}
.hero-search-bar .search-icon{width:18px;height:18px;flex-shrink:0;color:var(--ink-soft);}
.hero-search-bar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-search-bar span.has-query{color:var(--ink);font-weight:600;}
.hero-search-clear{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;
  border-radius:50%;
  border:none;
  background:var(--cream);
  color:var(--ink-soft);
  font-size:17px;line-height:1;
  cursor:pointer;
}
.hero-search-clear:hover{background:var(--green-100);color:var(--red);}
.hero-search-clear[hidden]{display:none;}
@media (max-width:720px){
  .hero-search-bar{margin:16px auto 18px;width:100%;max-width:none;}
}
@media (min-width:721px){
  .hero-search-bar{display:none;} /* desktop already has the full search bar in the header */
}

/* ---- Quick category cards ---- */
.quick-cats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:22px;
}
.quick-cat-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--green-800);
  color:#fff;
  border-radius:18px;
  padding:16px 12px 14px;
  text-align:left;
  position:relative;
  transition:transform .15s ease, background .15s ease;
}
.quick-cat-card:hover{background:var(--green-700);}
.quick-cat-card:active{transform:scale(.97);}
.quick-cat-card:first-child{background:var(--green-900);}
.quick-cat-card .qc-icon{display:block;width:44px;height:44px;flex-shrink:0;font-size:0;line-height:0;color:transparent;overflow:hidden;background:center/contain no-repeat;pointer-events:none;-webkit-user-drag:none;}
.quick-cat-card .qc-label{font-size:13px;font-weight:600;line-height:1.25;}
.quick-cat-card .qc-chevron{
  position:absolute;right:10px;bottom:12px;
  width:16px;height:16px;opacity:.75;
}
@media (max-width:720px){
  /* One compact row of 4 small cards (icon on top, label + chevron below) */
  .quick-cats{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px;}
  .quick-cat-card,
  .quick-cat-card:first-child{
    justify-content:space-between;align-items:flex-start;gap:8px;
    min-height:92px;
    padding:10px 7px 9px 8px;
    border-radius:14px;
    background:linear-gradient(160deg,#1C5E48 0%,#134536 100%);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 4px 12px rgba(15,58,46,.16), inset 0 1px 0 rgba(255,255,255,.08);
    overflow:hidden;
  }
  .quick-cat-card .qc-icon{width:38px;height:38px;}
  .quick-cat-card .qc-label{
    font-size:10px;font-weight:700;line-height:1.2;
    padding-right:9px;width:100%;
    overflow-wrap:break-word;
  }
  .quick-cat-card .qc-chevron{right:5px;bottom:8px;width:11px;height:11px;opacity:.85;}
}
@media (max-width:370px){
  .quick-cats{gap:5px;}
  .quick-cat-card,
  .quick-cat-card:first-child{padding:9px 5px 8px 7px;}
  .quick-cat-card .qc-icon{width:34px;height:34px;}
  .quick-cat-card .qc-label{font-size:9px;}
}

/* ---- Quick category cards: one colour + one illustrated icon each ---- */
.quick-cat-card[data-cat],
.quick-cat-card[data-cat]:first-child{
  background:linear-gradient(155deg,var(--qc-a) 0%,var(--qc-b) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 18px var(--qc-sh), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.quick-cat-card[data-cat]:hover{filter:brightness(1.1);transform:translateY(-2px);}
.quick-cat-card[data-cat]:active{transform:scale(.97);filter:none;}
.quick-cat-card[data-cat="all"]      {--qc-a:#3A4158;--qc-b:#1E2233;--qc-sh:rgba(30,34,51,.28);}
.quick-cat-card[data-cat="dairy"]    {--qc-a:#3F86E0;--qc-b:#2359B5;--qc-sh:rgba(35,89,181,.28);}
.quick-cat-card[data-cat="beverages"]{--qc-a:#8A4FD6;--qc-b:#5A2E9E;--qc-sh:rgba(90,46,158,.28);}
.quick-cat-card[data-cat="household"]{--qc-a:#E0407A;--qc-b:#B01F55;--qc-sh:rgba(176,31,85,.28);}
.quick-cat-card[data-cat="all"] .qc-icon      {background-image:url("img/cat-all.svg");}
.quick-cat-card[data-cat="dairy"] .qc-icon    {background-image:url("img/cat-dairy.svg");}
.quick-cat-card[data-cat="beverages"] .qc-icon{background-image:url("img/cat-beverages.svg");}
.quick-cat-card[data-cat="household"] .qc-icon{background-image:url("img/cat-household.svg");}
@media (max-width:720px){
  .quick-cat-card[data-cat]{box-shadow:0 5px 12px var(--qc-sh), inset 0 1px 0 rgba(255,255,255,.16);}
}

/* Icons centred in the free space above the label */
.quick-cat-card .qc-icon{width:100%;background-position:center;}
@media (min-width:721px){
  .quick-cat-card[data-cat]{min-height:150px;}
  .quick-cat-card .qc-icon{flex:1 1 auto;height:auto;min-height:60px;background-size:contain;}
}
@media (max-width:720px){
  .quick-cat-card .qc-icon{height:42px;}
}
@media (max-width:370px){
  .quick-cat-card .qc-icon{height:36px;}
}

/* ---- Special offers promo banner ---- */
.promo-banner{
  --pb-1:#361046; --pb-2:#68206F; --pb-3:#B23A7A;
  --pb-gold:#FFC857; --pb-gold-2:#FFE29A;
  border-radius:26px;
  background:
    radial-gradient(520px 260px at 6% 0%, rgba(255,160,205,.30) 0%, rgba(255,160,205,0) 70%),
    radial-gradient(420px 240px at 38% 115%, rgba(255,200,87,.20) 0%, rgba(255,200,87,0) 70%),
    linear-gradient(120deg, var(--pb-1) 0%, var(--pb-2) 52%, var(--pb-3) 100%);
  padding:34px 32px;
  margin-bottom:26px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  min-height:250px;
  display:flex;align-items:center;
  box-shadow:0 18px 40px rgba(104,32,111,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
/* soft "suds" bubbles — a nod to the cleaning / laundry products */
.promo-banner::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 78%, rgba(255,255,255,.16) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 70%, rgba(255,255,255,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 20%, rgba(255,255,255,.14) 0 4px, transparent 5px),
    radial-gradient(circle 46px at 40% 92%, rgba(255,255,255,.07) 0 44px, transparent 46px),
    radial-gradient(circle 30px at 48% 10%, rgba(255,255,255,.07) 0 28px, transparent 30px);
}
.promo-banner-text{position:relative;z-index:2;max-width:440px;}
.promo-banner-img{
  position:absolute;top:0;right:0;
  width:52%;height:100%;
  object-fit:cover;object-position:center;
  z-index:1;
  /* long, soft fade into the banner colour so the photo melts in */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
  filter:saturate(1.08) contrast(1.04);
}
/* gentle plum tint over the photo so it matches the banner */
.promo-banner::after{
  content:"";position:absolute;top:0;right:0;width:52%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(200deg, rgba(178,58,122,0) 40%, rgba(104,32,111,.32) 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 45%);
}
@media (max-width:640px){
  .promo-banner{padding:26px 22px;min-height:0;border-radius:22px;}
  /* photo stays as a faint backdrop instead of disappearing on phones */
  .promo-banner-img{display:block;width:100%;opacity:.16;object-position:80% center;
    -webkit-mask-image:linear-gradient(270deg, #000 0%, transparent 62%);
    mask-image:linear-gradient(270deg, #000 0%, transparent 62%);}
  .promo-banner::after{display:none;}
}
.promo-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:#FFD3E6;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  margin-bottom:12px;
  padding:6px 14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.promo-banner h2{
  color:#fff;font-size:clamp(24px,3.4vw,36px);line-height:1.14;font-weight:800;margin-bottom:12px;
  letter-spacing:-.01em;text-shadow:0 2px 14px rgba(40,8,50,.35);
}
.promo-banner h2 span{
  background:linear-gradient(90deg, var(--pb-gold-2), var(--pb-gold));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--pb-gold);
  text-shadow:none;
}
.promo-banner p{color:rgba(255,255,255,.86);font-size:15px;margin-bottom:22px;}
.promo-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg, #FFE08A 0%, #FFC24A 100%);
  color:#4A1450;
  border-radius:999px;
  padding:13px 22px;
  font-weight:800;font-size:14px;
  box-shadow:0 8px 20px rgba(255,194,74,.32), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.promo-cta:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 12px 26px rgba(255,194,74,.42), inset 0 1px 0 rgba(255,255,255,.6);}
.promo-cta:active{transform:scale(.97);}
.promo-cta svg{width:16px;height:16px;transition:transform .15s ease;}
.promo-cta:hover svg{transform:translateX(3px);}

/* ---- Popular products preview ---- */
.popular-products{margin-bottom:26px;}
.popular-head{margin-bottom:12px;}
.popular-head h2{font-size:18px;}
.view-all-link{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--green-700);font-weight:700;font-size:13px;
}
.view-all-link svg{width:15px;height:15px;}
.popular-grid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(160px,200px);
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x proximity;
}
.popular-grid .product-card{scroll-snap-align:start;}
.popular-grid::-webkit-scrollbar{height:0;}
@media (min-width:721px){
  .popular-grid{grid-auto-columns:minmax(200px,220px);}
}

/* ---- Viber CTA banner (long single-row style, web + mobile) ---- */
.viber-cta-banner{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#6A3FC8 0%,#7C55E0 55%,#8B5CF6 100%);
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:26px;
  color:#fff;
  box-shadow:0 10px 26px rgba(106,63,200,.28);
}
.viber-cta-icon{
  position:relative;z-index:1;
  width:46px;height:46px;flex-shrink:0;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.viber-cta-icon svg{width:100%;height:100%;display:block;}
.viber-cta-text{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.viber-cta-text strong{font-size:15px;font-weight:700;line-height:1.25;}
.viber-cta-text span{font-size:12px;line-height:1.4;color:rgba(255,255,255,.8);}
.viber-cta-break{display:none;}
.viber-cta-btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  background:#fff;color:#5B37B8;
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;font-size:13px;
  box-shadow:0 4px 12px rgba(30,10,80,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.viber-cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(30,10,80,.24);}
.viber-cta-btn:active{transform:scale(.96);}
.viber-cta-btn svg{width:14px;height:14px;}
.viber-cta-actions{position:relative;z-index:1;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.viber-cta-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.28);border-radius:1px;}
.viber-cta-btn-secondary{
  background:rgba(255,255,255,.1);color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:none;
}
.viber-cta-btn-secondary:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.8);box-shadow:none;}

/* faint chat-bubble decorations behind the button */
.viber-cta-deco{
  position:absolute;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:3px;
  background:rgba(255,255,255,.13);
  border-radius:14px;
}
.viber-cta-deco i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.55);display:block;}
.viber-cta-deco-1{width:38px;height:30px;right:118px;top:-6px;}
.viber-cta-deco-2{width:34px;height:26px;right:14px;bottom:-8px;}

@media (max-width:640px){
  /* Two buttons no longer fit beside the icon+text on a phone-width
     banner, so wrap onto a second row and let each button share the
     width instead of squeezing both into the original single row. */
  .viber-cta-banner{gap:11px 0;flex-wrap:wrap;padding:14px 12px 14px 14px;border-radius:14px;}
  .viber-cta-icon{width:40px;height:40px;}
  .viber-cta-text strong{font-size:14.5px;}
  .viber-cta-text span{font-size:12.5px;}
  .viber-cta-break{display:inline;}
  .viber-cta-actions{width:100%;margin-top:12px;gap:8px;}
  .viber-cta-divider{display:none;}
  .viber-cta-btn{padding:9px 10px;font-size:11.5px;gap:5px;flex:1;justify-content:center;}
  .viber-cta-btn svg{width:13px;height:13px;flex-shrink:0;}
  .viber-cta-deco-1{right:96px;}
}

/* ---- Extra breathing room below the (now taller) navbar + soft
   separation so content doesn't look like it's touching the header ---- */
.navbar{box-shadow:0 2px 10px rgba(15,58,46,.05);}
@media (max-width:720px){
  .layout{padding-top:24px;}
}

/* ============================================================
   FLAT WHITE — mobile profile menu, Profile page and Orders page.
   No glass / blur / tinted gradients here. Only the order-status
   notification popups (.order-notif) keep the liquid-glass look.
   Scoped by id so the product page and everything else is untouched.
   ============================================================ */
#profileMenu,
#profileView,
#ordersView{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
#profileMenu{box-shadow:-8px 0 30px rgba(15,58,46,.10);}

/* top bars */
#profileView .profile-view-topbar,
#ordersView .profile-view-topbar,
#profileMenu .profile-menu-head{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--line);
}

/* back buttons */
#profileView .profile-view-close,
#ordersView .profile-view-close,
#profileMenu .profile-menu-back{
  background:transparent;
  border:none;
  box-shadow:none;
}
#profileView .profile-view-close:hover,
#ordersView .profile-view-close:hover,
#profileMenu .profile-menu-back:hover,
#profileMenu .profile-menu-back:active{
  background:none;box-shadow:none;
}

/* profile menu rows (Profile / My Orders / Logout) */
#profileMenu .profile-menu-body button{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:none;
}
#profileMenu .profile-menu-body button:active{background:var(--cream);box-shadow:none;}
#profileMenu .pm-row-icon{
  background:var(--green-100);
  border:none;
}
#profileMenu #pmLogoutBtn .pm-row-icon{background:var(--red-bg);}
#profileMenu #pmOrdersBtn.has-notif::after{box-shadow:0 0 0 2px #fff;}

/* Profile page cards + form controls */
#profileView .profile-view-card,
#profileView .notif-settings-card,
#profileView .profile-view-delete-bar{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--line);
  box-shadow:none;
}
#profileView .profile-view-card .auth-field input,
#profileView .profile-view-card .auth-mobile-wrap{
  background:#fff;
  border:1.5px solid var(--line);
}
#profileView .profile-view-card .auth-field input:focus,
#profileView .profile-view-card .auth-mobile-wrap:focus-within{
  background:#fff;border-color:var(--green-600);
}
#profileView .pv-currency-toggle{
  background:var(--cream);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--line);
}
#profileView .pv-currency-btn:hover:not(.active){background:#fff;}
#profileView .profile-view-logout-btn{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1.5px solid rgba(213,71,60,.45);
}
#profileView .profile-view-logout-btn:hover{background:var(--red);color:#fff;box-shadow:none;}

/* Orders page */
#ordersView .orders-card,
#ordersView .notif-prompt{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--line);
  box-shadow:none;
}
#ordersView .orders-card-head{border-bottom:1px solid var(--line);}
#ordersView .order-card{box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
#ordersView .orders-load-more-btn{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1.5px solid var(--line);
  box-shadow:none;
}
#ordersView .orders-load-more-btn:hover{background:var(--green-700);color:#fff;box-shadow:none;}
#ordersView .order-cancel-btn{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
#ordersView .order-cancel-btn:hover{background:var(--red);color:#fff;box-shadow:none;}
#ordersView .order-cancel-btn:disabled,
#ordersView .order-cancel-btn:disabled:hover{background:#fff;color:var(--ink-soft);box-shadow:none;}
#ordersView .order-receipt-btn{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1.5px solid var(--line);
  box-shadow:none;
}
#ordersView .order-receipt-btn:hover{background:var(--green-700);color:#fff;box-shadow:none;}

/* mobile-number field on the Profile page: one border (on the wrapper), not two */
#profileView .profile-view-card .auth-mobile-wrap input{
  background:transparent;border:none;box-shadow:none;
}

/* ============ Header bars — same as the checkout header ============
   White bar, no glass/blur/shadow, clear 1px line underneath.
   Applies to the Profile, Orders and Product pages, the mobile profile
   menu head, and the Terms / Privacy header. */
#profileView .profile-view-topbar,
#ordersView .profile-view-topbar,
#productView .profile-view-topbar{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid #d5d9d9;
  box-shadow:none;
}
#profileMenu .profile-menu-head{border-bottom:1px solid #d5d9d9;}
.legal-header{border-bottom:1px solid #d5d9d9;}

/* ============ Back buttons — icon only (no "Back to store" text) ============
   The label is still there for screen readers (aria-label / visually hidden). */
.profile-menu-back span,
.profile-view-close span,
.co-back span,
.legal-back span,
.product-view .profile-view-close span,
.orders-view .profile-view-close span{
  position:absolute !important;
  width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  display:inline !important;
}
.profile-menu-back,
.profile-view-close,
.co-back,
.legal-back{
  position:relative;
  gap:0;
  padding:8px 14px 8px 0;
}
.profile-menu-back svg,
.profile-view-close svg,
.co-back svg,
.legal-back svg{width:24px;height:24px;}
@media (max-width:640px){
  .profile-menu-back,
  .profile-view-close,
  .co-back,
  .legal-back{gap:0;}
  .profile-menu-back svg,
  .profile-view-close svg,
  .co-back svg,
  .legal-back svg{width:24px;height:24px;}
}

/* Header bars: icons vertically centred in the bar (equal space above and below),
   same height on Profile / Orders / Product pages. */
@media (max-width:640px){
  #profileView .profile-view-topbar,
  #ordersView .profile-view-topbar,
  #productView .profile-view-topbar{
    padding:calc(14px + env(safe-area-inset-top)) 14px 14px;
    align-items:center;
  }
}

/* ============ Mobile: search bar stays pinned while scrolling ============
   The wrapper sticks just under the navbar (top follows --nav-flush, so it
   slides up to the very top when the navbar hides on scroll-down and drops
   back below it when the navbar returns on scroll-up). */
.hero-search-sticky{display:none;}
@media (max-width:720px){
  .hero-search-sticky{
    display:block;
    position:sticky;
    top:var(--nav-flush, 0px);
    z-index:50;                       /* below the navbar (60) */
    background:var(--cream);
    margin:4px -14px 6px;
    padding:12px 14px;
    transition:top .28s ease;
  }
  .hero-search-sticky .hero-search-bar{margin:0;}
}
@media (min-width:721px){
  .hero-search-sticky{display:none;}
}

/* ============ Mobile header buttons (currency + cart) — icon only, no background ============
   Bigger, bolder modern SVG icons; the button itself stays transparent
   (44px tap area, no box / border / shadow). */
@media (max-width:720px){
  .navbar-top .navbar-hamburger-btn,
  .navbar-top #cartBtn{
    width:44px;height:44px;
    border-radius:0;
    background:none;
    border:none;
    box-shadow:none;
    color:var(--green-800);
    transition:transform .15s ease, opacity .15s ease, width .28s ease, height .28s ease;
  }
  .navbar-top .navbar-hamburger-btn:hover,
  .navbar-top #cartBtn:hover{background:none;}
  .navbar-top .navbar-hamburger-btn:active,
  .navbar-top #cartBtn:active{transform:scale(.9);opacity:.7;background:none;box-shadow:none;}
  .navbar-top .navbar-hamburger-btn svg,
  .navbar-top #cartBtn svg{width:25px;height:25px;}
  .navbar-top .navbar-hamburger-btn svg path,
  .navbar-top #cartBtn svg path,
  .navbar-top #cartBtn svg circle{stroke-width:1.5;}
  .navbar-top #cartBtn .cart-count{top:6px;right:0px;}
  /* keep both buttons the same size when the header shrinks on scroll */
  .navbar.nav-compact .navbar-top .navbar-hamburger-btn,
  .navbar.nav-compact .navbar-top #cartBtn{width:40px;height:40px;}
}

/* ============ Cart icon — grid-basket cart with wheel rings + round red badge ============ */
.icon-btn svg.cart-ico{width:25px;height:25px;}
.cart-ico path,.cart-ico circle{stroke-width:1.7 !important;fill:none;}
.cart-ico circle{stroke-width:1.5 !important;}
.cart-ico .cart-grid{stroke-width:1.1 !important;}

/* Round red count badge, overlapping the top-right of the basket with a white ring */
.js-cart-btn .cart-count{
  top:6px;right:0px;
  min-width:19px;height:19px;
  padding:0 4px;
  font-size:11px;font-weight:700;line-height:1;
  background:#E8262B;color:#fff;
  border:2px solid #fff;
  box-shadow:none;
}

/* ============ Bottom nav — no active/pressed highlight, regular-weight text ============
   Every tab looks the same (dark green, not bold) whether it is active, pressed or focused. */
.bottom-nav .bn-item,
.bottom-nav .bn-item.active,
.bottom-nav .bn-item:hover,
.bottom-nav .bn-item:active,
.bottom-nav .bn-item:focus,
.bottom-nav .bn-item:focus-visible{
  color:var(--green-800);
  font-weight:400;
  background:none;
  outline:none;
  box-shadow:none;
  transform:none;
  opacity:1;
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav .bn-item[data-action="home"].active svg path{fill:none;}
.bottom-nav .bn-item svg{transition:none;}

/* ============================================================
   PERFORMANCE + RESPONSIVE POLISH
   Keeps the glass design, but lowers mobile repaint cost and avoids
   layout work for product cards that are still below the fold.
   ============================================================ */
@media (max-width:720px){
  /* Smaller blur radius is substantially cheaper to repaint on mobile GPUs. */
  .navbar-currency-dropdown,
  .profile-dropdown,
  .mobile-search-panel,
  .profile-menu,
  .profile-view-card,
  .orders-card,
  .auth-card,
  .cart-panel,
  .product-detail-card,
  .checkout-card{
    backdrop-filter:blur(10px) saturate(135%);
    -webkit-backdrop-filter:blur(10px) saturate(135%);
  }

  /* Promote only continuously animated surfaces; this avoids unnecessary
     layer allocation across the whole page. */
  .hero-track,
  .brands-ticker-track,
  .currency-toggle-thumb,
  .currency-toggle-icon,
  .pv-currency-btn .currency-toggle-icon{
    will-change:transform;
  }

  /* Product cards are independent responsive units and can be skipped until
     they approach the viewport, reducing initial layout and paint work. */
  .product-card,
  .similar-products-grid .product-card{
    content-visibility:auto;
    contain-intrinsic-size:320px 420px;
  }

  /* Popular Products is a horizontal-scroll row, not a vertical grid —
     content-visibility:auto doesn't reliably detect visibility inside a
     horizontally scrolling container, which was causing the cards to
     render squished before recalculating. Render these normally instead. */
  .popular-grid .product-card{
    content-visibility:visible;
  }

  /* Prevent long labels from forcing horizontal overflow on narrow screens. */
  .navbar-top,
  .hero-search-bar,
  .viber-cta-banner,
  .section-head{
    min-width:0;
  }
  .viber-cta-text{min-width:0;}
}

/* Respect device accessibility settings and eliminate animation-induced lag
   when the user has requested reduced motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ============================================================
   PROFESSIONAL FOOTER REDESIGN
   ============================================================ */
.site-footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(46,140,108,.22), transparent 30%),
    linear-gradient(145deg,#09261d 0%,#0f3a2e 54%,#0b2c23 100%);
  color:rgba(255,255,255,.78);
  margin-top:64px;
  border-top:1px solid rgba(255,255,255,.10);
}
.site-footer::before{
  content:'';
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.035) 50%,transparent 100%);
}
.footer-inner{
  /* Full width, with the same side padding as the page (.layout), so the footer
     lines up with the sidebar/content edges on big screens instead of being
     squeezed into a narrow centred box. */
  width:auto;max-width:none;
  margin:0;
  padding:64px var(--side-pad) 0;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) repeat(3,minmax(130px,1fr)) minmax(190px,1.15fr);
  gap:42px clamp(24px,4vw,64px);
  padding-bottom:50px;
}
.footer-brand{grid-column:1;}
.footer-logo{
  height:52px;width:auto;margin-bottom:18px;opacity:1;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.18));
}
.footer-tagline{
  max-width:300px;margin-bottom:24px;
  font-size:13px;line-height:1.75;color:rgba(255,255,255,.68);
}
.footer-viber-btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:42px;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  box-shadow:0 8px 20px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
  color:#fff;font-size:12px;font-weight:700;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.footer-viber-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.34);
}
.footer-viber-icon{width:20px;height:20px;border-radius:6px;}
.footer-col h4{
  position:relative;
  width:max-content;
  padding-bottom:11px;margin-bottom:18px;
  font-family:var(--font-display);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
}
.footer-col h4::after{
  content:'';position:absolute;left:0;bottom:0;
  width:24px;height:2px;border-radius:2px;background:var(--green-500);
}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col li a,.footer-col li{
  font-size:13px;line-height:1.45;color:rgba(255,255,255,.62);
  transition:color .18s ease,transform .18s ease;
}
.footer-col li a{display:inline-block;}
.footer-col li a:hover{color:#fff;transform:translateX(3px);}
.footer-contact{gap:10px!important;}
.footer-contact li:first-child{color:rgba(255,255,255,.82);font-weight:600;}
.footer-contact li:last-child a{color:var(--green-100);font-weight:600;overflow-wrap:anywhere;}
.footer-contact li:last-child a:hover{color:#fff;}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:20px 0 23px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:11.5px;letter-spacing:.01em;color:rgba(255,255,255,.48);
}
.footer-bottom-links{display:flex;align-items:center;gap:22px;}
.footer-bottom-links a{color:rgba(255,255,255,.58);transition:color .18s ease;}
.footer-bottom-links a:hover{color:#fff;}
@media (max-width:1100px){
  .footer-top{grid-template-columns:1.5fr repeat(3,1fr);gap:34px 24px;}
  .footer-brand{grid-column:1/-1;}
  .footer-tagline{max-width:440px;}
}
@media (max-width:640px){
  .site-footer{margin-top:42px;}
  .footer-inner{padding:42px 20px 0;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px 20px;padding-bottom:34px;}
  .footer-brand{grid-column:1/-1;}
  .footer-logo{height:42px;margin-bottom:13px;}
  .footer-tagline{max-width:330px;margin-bottom:18px;font-size:12px;line-height:1.65;}
  .footer-viber-btn{min-height:38px;padding:8px 12px;font-size:11px;}
  .footer-viber-icon{width:18px;height:18px;}
  .footer-col h4{font-size:10px;padding-bottom:9px;margin-bottom:13px;}
  .footer-col ul{gap:9px;}
  .footer-col li a,.footer-col li{font-size:11.5px;}
  .footer-bottom{align-items:flex-start;flex-direction:column;gap:10px;padding:16px 0 19px;font-size:10px;}
  .footer-bottom-links{gap:17px;}
}
@media (max-width:360px){
  .footer-inner{padding-left:16px;padding-right:16px;}
  .footer-top{column-gap:14px;}
  .footer-col li a,.footer-col li{font-size:10.5px;}
}

/* Footer brand refinement: large responsive logo + social icon row */
.footer-logo{
  height:156px;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}
.footer-col h4{
  padding-bottom:0;
}
.footer-col h4::after{display:none;}
.footer-socials{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
}
.footer-social-link{
  width:38px;height:38px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.20);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.footer-social-link svg{width:18px;height:18px;display:block;}
.footer-social-link:hover{
  transform:translateY(-2px);
  background:var(--green-500);
  border-color:var(--green-500);
  color:#fff;
}
@media (max-width:640px){
  .footer-logo{height:108px;}
  .footer-social-link{width:34px;height:34px;border-radius:9px;}
  .footer-social-link svg{width:16px;height:16px;}
}
@media (max-width:360px){
  .footer-logo{height:92px;}
}

/* Product detail matches the mobile preview: keep only Back and Cart in its topbar. */
.product-view .profile-view-topbar .profile-wrap{display:none!important;}

/* Mobile product topbar: give the cart breathing room from the screen edge. */
@media (max-width:640px){
  .product-view .profile-view-topbar{
    padding-left:14px;
    padding-right:22px;
  }
  .product-view .profile-view-topbar .nav-actions{
    gap:10px;
    margin-left:auto;
    padding-right:2px;
  }
  .product-view .profile-view-topbar .js-cart-btn{
    width:36px;height:36px;
    flex-shrink:0;
  }
  .product-view .profile-view-topbar .js-cart-btn svg{width:21px;height:21px;}
  .product-view .profile-view-topbar .js-cart-btn .cart-count{
    top:0;right:-1px;
  }
}

/* Preferred Currency — match the compact MVR/USD selector used across the store. */
.pv-currency-toggle{
  width:min(100%,230px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:3px;
  background:linear-gradient(155deg,#1d3c54,#0a1a26);
  border:1px solid rgba(255,255,255,.16);
  border-radius:0;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),inset 0 -1px 3px rgba(0,0,0,.3),0 5px 14px rgba(6,20,30,.18);
}
.pv-currency-btn{
  flex:1 1 0;
  min-width:0;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:11px;
  font-weight:400;
  letter-spacing:.02em;
  line-height:1;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1);
}
.pv-currency-btn .currency-toggle-icon{
  width:.9em;height:.9em;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  filter:brightness(0) invert(1);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.pv-currency-btn .currency-toggle-usd-icon{filter:none;color:#fff;font-style:normal;font-weight:800;}
.pv-currency-btn.active{
  color:#fff;
  font-weight:800;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.02) 55%),var(--green-800);
  border-color:rgba(255,255,255,.32);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -3px 5px rgba(0,0,0,.24),0 3px 10px rgba(0,0,0,.24);
}
.pv-currency-btn:not(.active){font-weight:400;color:rgba(255,255,255,.82);}
.pv-currency-btn:hover:not(.active){background:rgba(255,255,255,.10);color:#fff;}
.pv-currency-btn.active .currency-toggle-icon{transform:rotate(-8deg) scale(1.05);}
.pv-currency-btn.active .currency-toggle-usd-icon{transform:rotate(0deg) scale(1.05);}
@media (max-width:640px){
  .pv-currency-toggle{width:100%;max-width:230px;}
  .pv-currency-btn{height:28px;font-size:10.5px;padding:0 8px;gap:5px;}
}

/* Preferred Currency text must stay white in every profile state. */
#profileView .pv-currency-btn,
#profileView .pv-currency-btn:not(.active),
#profileView .pv-currency-btn:hover:not(.active),
#profileView .pv-currency-btn.active{
  color:#fff!important;
}

/* Profile Preferred Currency now uses the exact index currency-toggle geometry. */
.profile-view .pv-currency-toggle{
  width:134px;
  min-width:134px;
  height:34px;
  padding:3px;
  gap:2px;
}
.profile-view .pv-currency-toggle .pv-currency-btn{
  min-width:55px;
  height:26px;
  padding:0 9px;
  border:1px solid transparent;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#fff!important;
  font-size:11px;
  font-weight:400;
}
.profile-view .pv-currency-toggle .pv-currency-btn.active{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:#fff!important;
  font-weight:800;
}
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active){font-weight:400;color:#fff!important;}
.profile-view .pv-currency-toggle .pv-currency-btn:hover:not(.active){background:transparent;color:#fff!important;}
@media (max-width:640px){
  .profile-view .pv-currency-toggle{width:134px;min-width:134px;height:32px;}
  .profile-view .pv-currency-toggle .pv-currency-btn{min-width:52px;height:24px;padding:0 8px;font-size:10.5px;}
}

/* Selected Preferred Currency labels stay pure white, including nested spans. */
.profile-view .pv-currency-toggle .pv-currency-btn.active,
.profile-view .pv-currency-toggle .pv-currency-btn.active span,
.profile-view .pv-currency-toggle .pv-currency-btn.active .currency-toggle-usd-icon{
  color:#fff!important;
}
.profile-view .pv-currency-toggle .pv-currency-btn.active .currency-toggle-icon{
  filter:brightness(0) invert(1);
}

/* Inactive currency icons are black; selected icons stay white. */
.currency-toggle-btn:not(.active) .currency-toggle-icon{
  filter:brightness(0)!important;
}
.currency-toggle-btn:not(.active) .currency-toggle-usd-icon{
  color:#000!important;
  filter:none!important;
}
.pv-currency-btn:not(.active) .currency-toggle-icon{
  filter:brightness(0)!important;
}
.pv-currency-btn:not(.active) .currency-toggle-usd-icon{
  color:#000!important;
  filter:none!important;
}

/* Inactive currency state: icon and label share the same muted gray tone. */
.currency-toggle-btn:not(.active),
.currency-toggle-btn:not(.active) span{
  color:rgba(255,255,255,.62)!important;
}
.currency-toggle-btn:not(.active) .currency-toggle-icon{
  filter:brightness(0) invert(1) opacity(.62)!important;
}
.currency-toggle-btn:not(.active) .currency-toggle-usd-icon{
  color:rgba(255,255,255,.62)!important;
  filter:none!important;
}
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active),
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active) span{
  color:rgba(255,255,255,.62)!important;
}
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active) .currency-toggle-icon{
  filter:brightness(0) invert(1) opacity(.62)!important;
}
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active) .currency-toggle-usd-icon{
  color:rgba(255,255,255,.62)!important;
  filter:none!important;
}

/* Final inactive currency tone: dark gray, clearly distinct from selected white. */
.currency-toggle-btn:not(.active),
.currency-toggle-btn:not(.active) span,
.currency-toggle-btn:not(.active) .currency-toggle-usd-icon,
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active),
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active) span,
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active) .currency-toggle-usd-icon{
  color:#8f9b98!important;
}
.currency-toggle-btn:not(.active) .currency-toggle-icon,
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active) .currency-toggle-icon{
  filter:invert(60%) sepia(5%) saturate(250%) hue-rotate(110deg) brightness(87%) contrast(88%)!important;
}
.currency-toggle-btn:not(.active) .currency-toggle-usd-icon,
.profile-view .pv-currency-toggle .pv-currency-btn:not(.active) .currency-toggle-usd-icon{
  filter:none!important;
}

/* ---- Forgot password link + reset panels ---- */
.auth-forgot-row{display:flex;justify-content:flex-end;margin-top:-4px;}
.auth-forgot-row[hidden]{display:none;}
.auth-forgot-btn{
  font-size:12px;font-weight:700;color:var(--green-700);
  text-decoration:underline;text-underline-offset:2px;padding:2px 0;
}
.auth-forgot-btn:hover{color:var(--green-900);}
.auth-panel-form{
  width:100%;display:flex;flex-direction:column;
  gap:clamp(9px,1.6vh,14px);text-align:left;margin-top:6px;
}
/* Sign In / Create Account / Send reset link while a rate-limit cooldown runs */
.auth-submit-btn:disabled,
.auth-submit-btn.is-cooldown{
  opacity:.7;cursor:not-allowed;transform:none;
  font-variant-numeric:tabular-nums;
}

/* ---- Email confirmation panel (inside the auth modal) ---- */
.auth-verify{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 0 2px;}
.auth-verify[hidden]{display:none;}
.auth-verify-in{animation:authVerifyIn .4s cubic-bezier(.2,.8,.2,1) both;}
@keyframes authVerifyIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.auth-verify-icon{
  width:70px;height:70px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green-100);color:var(--green-800);
  box-shadow:0 0 0 9px rgba(46,140,108,.10);
  margin-bottom:8px;
}
.auth-verify[data-state="confirmed"] .auth-verify-icon{
  background:var(--green-800);color:var(--cream);
  box-shadow:0 0 0 9px rgba(22,75,59,.12);
  animation:authVerifyPop .55s cubic-bezier(.2,1.4,.4,1) both;
}
.auth-verify[data-state="expired"] .auth-verify-icon{
  background:var(--red-bg);color:var(--red);
  box-shadow:0 0 0 9px rgba(213,71,60,.10);
}
@keyframes authVerifyPop{0%{transform:scale(.4);opacity:0;}100%{transform:scale(1);opacity:1;}}
.auth-verify-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);margin:0;}
.auth-verify-text{font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:340px;margin:0;word-break:break-word;}
.auth-verify-text strong{color:var(--ink);font-weight:700;}
.auth-verify-primary{width:100%;margin-top:12px;}
.auth-verify-resend{
  font-size:12.5px;font-weight:700;color:var(--green-700);
  text-decoration:underline;text-underline-offset:2px;padding:4px 6px;
}
.auth-verify-resend[hidden]{display:none;}
.auth-verify-resend:hover:not(:disabled){color:var(--green-900);}
.auth-verify-resend:disabled{color:var(--ink-soft);text-decoration:none;cursor:default;}
.auth-verify-status{font-size:12.5px;font-weight:600;color:var(--green-700);margin:0;}
.auth-verify-status.is-error{color:var(--red);}
.auth-verify-status[hidden]{display:none;}
.auth-verify-hint{
  width:100%;margin:2px 0 0;padding:10px 12px;
  font-size:12px;color:var(--ink-soft);
  background:var(--cream);border:1px dashed var(--line);
}
.auth-verify-hint[hidden]{display:none;}
@media (prefers-reduced-motion:reduce){
  .auth-verify-in,.auth-verify[data-state="confirmed"] .auth-verify-icon{animation:none;}
}

/* ============================================================
   FOOTER ALIGNMENT — even columns, top-aligned brand block,
   matching row rhythm and text style across all columns
   ============================================================ */
.footer-top{
  grid-template-columns:minmax(240px,1.5fr) repeat(4,minmax(130px,1fr));
  align-items:start;
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;}
/* The logo file has transparent space above/below the artwork. Trim it so the
   logo top lines up with the column headings and its left edge with the text. */
.footer-logo{
  --fl-h:156px;
  height:var(--fl-h);
  margin:calc(var(--fl-h) * -.35) 0 calc(var(--fl-h) * -.35 + 16px) calc(var(--fl-h) * -.058);
}
/* Get in Touch: same look and row spacing as the link columns */
.footer-contact{gap:12px!important;}
.footer-contact li:first-child,
.footer-contact li:last-child a{color:rgba(255,255,255,.62);font-weight:400;}
.footer-contact li:last-child a:hover{color:#fff;}
@media (max-width:1100px){
  .footer-top{grid-template-columns:repeat(4,1fr);}
  .footer-brand{grid-column:1/-1;}
}
@media (max-width:640px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-logo{--fl-h:108px;}
  .footer-contact{gap:9px!important;}
}
@media (max-width:360px){
  .footer-logo{--fl-h:92px;}
}


/* ============================================================
   Product photos — plain white background (no green gradient,
   no dotted pattern). The cube placeholder still shows behind
   a card ONLY when the product has no photo yet.
   ============================================================ */
.card-media,
.cart-row-media,
.order-item-media,
.co-item-media{
  background:#fff;
}
.card-media::before{display:none;}       /* remove the dotted pattern */
.card-media::after{display:none;}        /* remove the cube icon behind the photo */
.card-media:has(.card-img.img-missing)::after{display:block;}


/* ============================================================
   Button hover highlight — buttons visibly change to gray when the
   cursor is on them. Mouse/trackpad only, so phones don't get a
   "stuck" highlight after a tap.
   ============================================================ */
.card-add{
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s,
    width .35s var(--ease-glass), border-radius .35s var(--ease-glass),
    padding .35s var(--ease-glass), gap .35s var(--ease-glass);
}
.co-btn{
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

@media (hover:hover){

  /* Add to Cart — product cards + product page */
  .card-add:not(.card-add-disabled):not(.success):not(.loading):not(.card-add-done):hover{
    background:#E4E6E5;
    border-color:#C9CDCB;
    box-shadow:0 6px 16px rgba(0,0,0,.10);
  }

  /* Quantity  –  /  +  on the product cards (dark button -> gray) */
  .card-qty .qty-btn:not(:disabled):hover{background:#6B716E;color:#fff;}

  /* Quantity  –  /  +  on the product page */
  .pd-actions .card-qty.pd-qty .qty-btn:not(:disabled):hover{
    background:#E4E6E5;
    color:var(--ink);
  }

  /* Other white buttons (checkout, coupon, notifications) */
  .co-btn-primary:not(:disabled):hover,
  .co-btn-ghost:not(:disabled):hover,
  .ck-coupon-btn:not(:disabled):hover,
  .notif-prompt-btn:not(:disabled):not(.loading):not(.success):hover{
    background:#E4E6E5;
    border-color:#C9CDCB;
    color:var(--ink);
  }
}

/* ---- Custom dropdown for the Atoll / Island selects (opens DOWN when there is room) ---- */
.co-dd{position:relative;width:100%;}
.co-dd-native{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;}
.co-dd-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border:1px solid #a6a6a6;border-radius:3px;background:#fff;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
  font:inherit;font-size:16px;color:var(--ink);text-align:left;cursor:pointer;
}
.co-dd-btn:focus{outline:none;border-color:#007185;box-shadow:0 0 0 2px rgba(0,113,133,.16);}
.co-dd.open .co-dd-btn{border-color:#007185;}
.co-dd-label{font-weight:400;font-size:inherit;text-transform:none;letter-spacing:0;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.co-dd-chev{width:16px;height:16px;flex-shrink:0;color:var(--ink-soft);transition:transform .18s ease;}
.co-dd.open .co-dd-chev{transform:rotate(180deg);}
.co-dd-list{
  position:absolute;left:0;top:calc(100% + 4px);z-index:60;
  min-width:100%;width:max-content;max-width:calc(100vw - 24px);
  background:#fff;border:1px solid #a6a6a6;border-radius:6px;
  box-shadow:0 14px 34px rgba(15,25,20,.18);
  padding:4px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.co-dd-list[hidden]{display:none;}
.co-dd.up .co-dd-list{top:auto;bottom:calc(100% + 4px);}
.co-dd-opt{
  display:block;width:100%;padding:9px 10px;border:0;border-radius:4px;background:none;
  font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;white-space:nowrap;
}
.co-dd-opt:hover,.co-dd-opt.active{background:var(--green-100);}
.co-dd-opt[aria-selected="true"]{font-weight:700;}
.co-field.has-error .co-dd-btn{border-color:var(--red);background:var(--red-bg);}

/* ============ "Complete your profile" onboarding — flat/default look ============
   Scoped to #onboardModal only, so the glassy Sign In / Create Account modal
   elsewhere is untouched. Plain white card, boxed inputs, no blur/gradients —
   closer to a plain form (Google Forms-style) than the rest of the site. */
#onboardModal .auth-card{
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid #dadce0;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
}
#onboardModal .auth-head-icon{
  background:var(--green-500);color:#fff;
  width:32px;height:32px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
#onboardModal .auth-head h2{font-size:19px;font-weight:600;color:#202124;}
#onboardModal .auth-head p{color:#5f6368;font-size:13px;}
#onboardModal .auth-field span{font-size:12.5px;font-weight:600;color:#202124;}
#onboardModal .auth-field input,
#onboardModal .auth-field select{
  background:#fff;
  border:1px solid #dadce0;
  border-radius:4px;
  box-shadow:none;
  transition:border-color .15s ease;
}
#onboardModal .auth-field input:focus,
#onboardModal .auth-field select:focus{
  border-color:var(--green-500);
  outline:2px solid var(--green-100);
  outline-offset:0;
}
#onboardModal .auth-field.has-error input,
#onboardModal .auth-field.has-error select{
  border-color:var(--red);
}
#onboardModal .auth-mobile-wrap{border:1px solid #dadce0;border-radius:4px;background:#fff;box-shadow:none;}
#onboardModal .auth-mobile-wrap input{border:0;}
#onboardModal .auth-mobile-prefix{color:#5f6368;}

/* Account-type choice — plain radio-style cards instead of the glossy co-tab look */
#onboardModal .co-tabs{margin-bottom:0;}
#onboardModal .co-tab{
  background:#fff;border:1px solid #dadce0;border-radius:4px;
  box-shadow:none;transition:border-color .15s ease,background .15s ease;
}
#onboardModal .co-tab:hover{border-color:#b0b3b8;}
#onboardModal .co-tab.active{
  border:1.5px solid var(--green-500);
  background:var(--green-100);
}
#onboardModal .co-tab-title{color:#202124;font-weight:500;}
#onboardModal .co-tab.active .co-tab-title{color:var(--green-500);font-weight:700;}
#onboardModal .co-tab-icon{color:#5f6368;}
#onboardModal .co-tab.active .co-tab-icon{color:var(--green-500);}
#onboardModal .co-tab-sub{color:#5f6368;}

/* Flat submit button — solid fill, no gradient/inset glow */
#onboardModal .auth-submit-btn{
  background:var(--green-500);color:#fff;
  box-shadow:none;border-radius:4px;
  transition:background .15s ease;
}
#onboardModal .auth-submit-btn:hover{
  background:var(--green-600, var(--green-500));
  box-shadow:none;
  transform:none;
}
#onboardModal .auth-submit-btn:active{transform:none;}

/* ============ Checkout header: same as Profile / Product pages in the store ============
   Back arrow sits at the far left edge of a full-width white bar; no account icon. */
.co-header .co-header-inner{
  max-width:none;
  padding:16px clamp(20px,4vw,56px);
  justify-content:flex-start;
}
@media (max-width:640px){
  .co-header .co-header-inner{padding:calc(14px + env(safe-area-inset-top)) 14px 14px;}
}

/* ============ Checkout: company / wholesaler details in Contact box ============ */
.co-contact-business{margin-top:10px;padding-top:10px;border-top:1px solid #e3e6e6;}
.co-contact-business[hidden]{display:none;}
.co-contact-bname{font-size:12.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.co-contact-btin{font-size:11px;color:var(--ink-soft);margin-top:2px;}
.co-biz-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.02em;}
.co-biz-badge.is-verified{background:#e6f4ea;color:#1e7e34;}
.co-biz-badge.is-pending{background:#fff4e0;color:#a06100;}

/* ============ Profile page: personal details / password cards (BHM-style) ============ */
#profileView .profile-view-wrap{gap:20px;}
.pv-password-card .auth-field input{width:100%;}
.pv-password-card .auth-password-wrap input{width:100%;padding-right:44px;}
.pv-password-card .pv-pass-ok{color:#1e7e34;font-weight:600;font-size:12.5px;}
.pv-password-card .field-error[hidden],.pv-password-card .pv-pass-ok[hidden]{display:none;}
.profile-view-save-btn:disabled{opacity:.6;cursor:default;}

/* ============ My Accounts page ============ */
.ma-page{background:#f7f8f8;}
.ma-wrap{max-width:1180px;margin:0 auto;padding:28px clamp(16px,4vw,56px) 80px;}
.ma-panel{background:#fff;border:1px solid #e3e6e6;padding:28px;}
.ma-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ma-title{font-size:20px;font-weight:700;color:var(--ink);margin:0;}
.ma-sub{font-size:12.5px;color:var(--ink-soft);margin:6px 0 18px;}
.ma-add-btn{background:none;border:0;color:var(--green-700,#1f7a5a);font-weight:700;font-size:13px;cursor:pointer;padding:8px 0;}
.ma-add-btn:hover{text-decoration:underline;}
.ma-edit-btn{background:none;border:0;color:var(--green-700,#1f7a5a);font-weight:600;font-size:11.5px;cursor:pointer;padding:0;}
.ma-edit-btn:hover{text-decoration:underline;}
.ma-msg{font-size:12.5px;padding:10px 14px;margin-bottom:16px;border:1px solid #e3e6e6;background:#f7f8f8;}
.ma-msg.ok{background:#e6f4ea;border-color:#c5e4cd;color:#1e7e34;}
.ma-msg.error{background:#fdecec;border-color:#f5c6c6;color:#b3261e;}
.ma-msg[hidden]{display:none;}
.ma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.ma-card{background:#f4f6f6;border:1.5px solid transparent;padding:14px 16px;display:flex;flex-direction:column;gap:6px;}
.ma-card.is-usable{cursor:pointer;}
.ma-card.is-usable:hover{border-color:#c9d3d0;}
.ma-card.is-active{border-color:var(--green-600,#2a9d74);background:#eef8f3;}
.ma-name{font-size:14px;font-weight:700;color:var(--ink);}
.ma-type{align-self:flex-start;font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 6px;background:#fff;border:1px solid #e3e6e6;color:var(--ink-soft);}
.ma-place{font-size:12px;color:var(--ink-soft);}
.ma-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:8px;}
.ma-status{font-size:10.5px;padding:2px 8px;border:1px solid;border-radius:3px;}
.ma-status.approved{background:#e6f4ea;border-color:#b9dcc3;color:#1e7e34;}
.ma-status.pending{background:#fff4e0;border-color:#f0d9a8;color:#a06100;}
.ma-status.rejected{background:#fdecec;border-color:#f5c6c6;color:#b3261e;}
.ma-selected{font-size:11.5px;font-weight:700;color:var(--green-700,#1f7a5a);}
.ma-use,.ma-wait{font-size:11px;color:var(--ink-soft);}
body.ma-modal-open{overflow:hidden;}
.ma-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto;z-index:200;}
.ma-modal[hidden]{display:none;}
.ma-modal-card{background:#fff;width:100%;max-width:420px;padding:26px 28px;display:flex;flex-direction:column;gap:14px;}
.ma-modal-card h2{font-size:16px;text-align:center;margin:0 0 4px;color:var(--ink);}
.ma-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
.ma-field[hidden],.ma-switch[hidden]{display:none;}
.ma-field>span{font-size:12px;font-weight:600;color:var(--ink);}
.ma-field input,.ma-field select{height:42px;padding:0 12px;border:1px solid #d5d9d9;background:#fff;font:inherit;font-size:13px;width:100%;}
.ma-field input:focus,.ma-field select:focus{outline:none;border-color:var(--green-600,#2a9d74);}
.ma-row{display:flex;gap:12px;}
.ma-switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:12px;color:var(--ink-soft);}
.ma-switch input{position:absolute;opacity:0;pointer-events:none;}
.ma-switch-slider{width:38px;height:20px;border-radius:999px;background:#cfd4d4;position:relative;flex-shrink:0;transition:background .18s;}
.ma-switch-slider::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s;}
.ma-switch input:checked+.ma-switch-slider{background:var(--green-600,#2a9d74);}
.ma-switch input:checked+.ma-switch-slider::after{transform:translateX(18px);}
.ma-error{color:#b3261e;font-size:12px;}
.ma-error[hidden]{display:none;}
.ma-submit{height:44px;border:0;background:var(--green-600,#2a9d74);color:#fff;font-weight:700;font-size:14px;cursor:pointer;margin-top:4px;}
.ma-submit:disabled{opacity:.6;cursor:default;}
.ma-cancel{background:none;border:0;color:var(--ink-soft);font-size:12.5px;cursor:pointer;}
@media (max-width:640px){
  .ma-panel{padding:20px 16px;}
  .ma-row{flex-direction:column;}
}

/* account picker inside the profile dropdown */
.pd-accounts{border-top:1px solid #e3e6e6;margin-top:4px;padding:8px 14px 4px;}
.pd-accounts[hidden]{display:none;}
.pd-accounts-label{font-size:11px;color:var(--ink-soft);margin-bottom:6px;}
.pd-acc{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;color:var(--ink);cursor:pointer;}
.pd-acc input{accent-color:var(--green-600,#2a9d74);margin:0;}

/* ============ My Accounts inside the Profile page ============ */
.ma-modal{z-index:5000;}
.pv-accounts-card{gap:12px;}
.pv-accounts-card .ma-sub{margin:0 0 4px;}
.pv-accounts-card .ma-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
@media (max-width:640px){ .pv-accounts-card .ma-grid{grid-template-columns:1fr;} }

/* ============ Profile page — clean layout ============ */
#profileView .profile-view-wrap{max-width:760px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:20px;padding-top:24px;padding-bottom:60px;}
#profileView .profile-view-card{border-radius:0;padding:28px;gap:18px;}
.pv-card-title,
.pv-accounts-card .ma-title{font-size:16px;font-weight:700;color:var(--ink);margin:0;line-height:1.3;}
.pv-card-title{padding-bottom:12px;border-bottom:1px solid var(--line);}
.pv-accounts-card .ma-head{padding-bottom:12px;border-bottom:1px solid var(--line);}
.pv-accounts-card .ma-sub{margin:0;}
#profileView .profile-view-save-row{padding-top:4px;}
#profileView .profile-view-delete-bar{border-radius:0;}
#profileView .profile-view-logout-btn{margin-top:0;border-radius:0;}
#profileView .pv-details-card .pv-currency-toggle{align-self:flex-start;}
@media (max-width:640px){
  #profileView .profile-view-wrap{gap:14px;padding-top:16px;}
  #profileView .profile-view-card{padding:20px 16px;}
}

/* ============ Profile page — full-width layout ============ */
#profileView .profile-view-wrap{
  max-width:none;width:100%;
  padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px);
  box-sizing:border-box;
}
@media (min-width:1000px){
  #profileView .pv-details-card .profile-view-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .pv-accounts-card .ma-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
  #profileView .pv-password-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px;align-items:start;}
  #profileView .pv-password-card .profile-view-grid{display:contents;}
  #profileView .pv-password-card>.pv-card-title,
  #profileView .pv-password-card>.field-error,
  #profileView .pv-password-card>.pv-pass-ok,
  #profileView .pv-password-card>.profile-view-save-row{grid-column:1 / -1;}
}
@media (min-width:641px) and (max-width:999px){
  #profileView .pv-details-card .profile-view-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* account picker in the dropdown: real buttons (reliable clicks) with a dot indicator */
.profile-dropdown .pd-acc{display:flex;align-items:center;gap:10px;width:100%;padding:7px 0;background:none;border:0;text-align:left;font-size:12.5px;color:var(--ink);cursor:pointer;}
.profile-dropdown .pd-acc:hover{background:none;color:var(--green-700,#1f7a5a);}
.pd-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid #9aa5a1;flex-shrink:0;box-sizing:border-box;position:relative;}
.pd-acc.is-active .pd-dot{border-color:var(--green-600,#2a9d74);}
.pd-acc.is-active .pd-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--green-600,#2a9d74);}
.pd-acc.is-active .pd-acc-name{font-weight:700;}

/* checkout: list of all accounts in the Contact box */
.co-contact-business .co-biz-item + .co-biz-item{margin-top:10px;padding-top:10px;border-top:1px dashed #e3e6e6;}

/* ============ Checkout — full-width layout (matches Profile page) ============ */
.co-wrap{
  max-width:none;width:100%;box-sizing:border-box;
  padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px);
}
@media (min-width:960px){
  .co-grid{grid-template-columns:minmax(0,1fr) 400px;gap:32px;}
}
@media (min-width:1440px){
  .co-grid{grid-template-columns:minmax(0,1fr) 460px;gap:40px;}
}
/* Full Name + Mobile Number side by side on wide screens */
@media (min-width:760px){
  .co-section:has(#coNameField){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:start;}
  .co-section:has(#coNameField)>.co-section-head,
  .co-section:has(#coNameField)>.co-contact-box{grid-column:1 / -1;}
}
@media (max-width:640px){
  .co-wrap{padding-left:18px;padding-right:18px;}
}

/* ============ My Orders — full-width layout (matches Profile / Checkout) ============ */
#ordersView .profile-view-wrap,
#ordersView .orders-view-wrap{max-width:none;width:100%;box-sizing:border-box;}
#ordersView .orders-card{border-radius:0;}
@media (min-width:1000px){
  #ordersView .orders-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(440px,1fr));
    gap:20px;align-items:start;
  }
}

/* Profile page: don't let late-loading content (My Accounts, saved values) shift the scroll position */
#profileView{overflow-anchor:none;-webkit-overflow-scrolling:touch;}

/* ===== Product photos: show the whole product, centered (no cropping) =====
   Photos in img/household&cleaning/ are trimmed and centered on a square canvas
   with the same margin around every product, so object-fit: contain keeps all
   products the same size and position. (Was object-fit: cover, which cut off tall bottles.) */
.card-media .card-img,
.pd-media img,
.cart-row-media .cart-row-img,
.co-item-media img,
.ck-item-media img,
.order-item-media img,
.oc-item-media img,
.ms-suggest-row .ms-row-icon img{
  object-fit:contain;
  object-position:center;
}
.card-media .card-img,
.pd-media img{
  mix-blend-mode:multiply;   /* white photo backgrounds blend into the tile */
}

/* Product detail photo — the rule above (transform:scale(1.45)) zoomed the photo because the old
   source photos had big white margins. The new photos are already trimmed, so no zoom; and on
   desktop the photo is capped at 600px so the small supplier photos are not blown up (blurry). */
.pd-media img{
  transform:none;
}
@media (min-width:721px){
  .pd-media img{
    width:min(100%,600px);
    height:auto;
    max-height:100%;
    aspect-ratio:1/1;
  }
}

/* ============================================================
   PRODUCT DETAIL — Add to Cart / Quantity / Share
   Flat, line-based, square-cornered — matches the plain catalogue
   look (BHM-style: thin dividers, quiet type, no filled pills).
   Scoped to .pd-actions only, so grid/carousel product cards keep
   their existing compact "glass" look untouched.
   ============================================================ */
/* .card-action-slot is shared with grid/carousel cards, where it's just a
   single centered button (display:flex;justify-content:center, meant for a
   row of one). On the product detail page that same class also sits on
   .pd-actions, which wraps TWO stacked sections (qty stepper, then the
   add-to-cart/share row) — the inherited flex-row was squeezing both of
   them onto one line instead of stacking them, cramming everything
   together on mobile and desktop alike. Force it back to a column here. */
.pd-actions.card-action-slot{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
}
.pd-action-row{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  min-height:56px;
}
.pd-action-row .card-add{
  flex:1;
  margin-top:0;
}
/* Loading state shrinks to a fixed-size circle. Positioned absolutely and
   centered against the row itself, so it lands dead-center no matter what
   else (share button, its own flex sizing) is doing. */
.pd-action-row .card-add.loading{
  flex:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
}
/* While loading, the add button leaves flow (above), so the share button
   becomes the row's only flex child and its border-left ends up floating
   next to the centered dots as a stray vertical line. Fade it out with the
   same motion instead of leaving it sitting there. */
.pd-action-row:has(.card-add.loading) .pd-share-btn{
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.pd-action-row .card-remove-link{width:auto;}

/* Quantity stepper — flat row, square corners, thin rule only */
.pd-qty-select{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:12px;
}
.pd-qty-label{
  font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-soft);text-transform:uppercase;margin-bottom:0;
}
.pd-actions .card-qty.pd-qty{
  width:auto;
  max-width:none;
  height:auto;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  gap:18px;
  box-sizing:border-box;
}
.pd-actions .card-qty.pd-qty .qty-btn{
  flex:none;
  width:26px;
  height:26px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  font-size:15px;
  font-weight:400;
  border-radius:0;
  line-height:1;
}
.pd-actions .card-qty.pd-qty .qty-val{
  flex:none;
  min-width:18px;
  text-align:center;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
}

/* Add to Cart — flat text/icon row, brand-green accent, no fill or shadow */
.pd-actions .card-add:not(.card-add-disabled):not(.card-add-done){
  background:transparent;
  color:var(--green-800);
  border:none;
  border-radius:0;
  padding:14px 0;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:none;
  justify-content:center;
  gap:8px;
}
.pd-actions .card-add:not(.card-add-disabled):not(.card-add-done) svg{
  color:var(--green-800);
  width:15px;height:15px;
}
.pd-actions .card-add.card-add-disabled{
  border-radius:0;
  background:transparent;
  color:var(--ink-soft);
  padding:14px 0;
}
.pd-actions .card-add.card-add-done{
  border-radius:0;
  background:transparent;
  color:var(--green-800);
  padding:14px 0;
  justify-content:center;
}

/* Share button — plain icon, same quiet line language, no filled box */
.pd-share-btn{
  flex:0 0 auto;
  width:auto;
  padding-left:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-left:1px solid var(--line);
  border-radius:0;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .15s ease, transform .12s ease;
}
.pd-share-btn svg{width:17px;height:17px;}
.pd-share-btn:active{transform:scale(.92);}

@media (min-width:721px){
  .pd-action-row{max-width:460px;}
  .pd-actions .card-add:not(.card-add-disabled):not(.card-add-done){
    padding:16px 0;font-size:14.5px;
  }
  .pd-actions .card-add.card-add-disabled,
  .pd-actions .card-add.card-add-done{padding:16px 0;}
  .pd-share-btn{padding-left:18px;}
  .pd-share-btn svg{width:18px;height:18px;}
}

@media (hover:hover){
  .pd-actions .card-add:not(.card-add-disabled):not(.success):not(.loading):not(.card-add-done):hover{
    color:var(--green-900);
  }
  .pd-actions .card-qty.pd-qty .qty-btn:hover{background:var(--line);}
  .pd-share-btn:hover{color:var(--ink);}
}