/* =====================================================================
   Sabuj Rekha — Premium Storefront Stylesheet
   ===================================================================== */

:root{
  --green:#49993e;
  --green-d:#006838;
  --green-50:#f1f8ee;
  --green-100:#e3f1de;
  --bg:#f8faf8;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#dfe7df;
  --border-soft:#eef3ee;
  --warn:#f59e0b;
  --danger:#dc2626;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow:0 4px 14px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -16px rgba(15,23,42,.12);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --container:1280px;
  --transition:.25s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Nothing may push the page sideways on small screens */
html,body{overflow-x:hidden;max-width:100%}
img,video,svg,table{max-width:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:80px; /* space for mobile bottom nav */
}
@media(min-width:992px){ body{ padding-bottom:0; } }

h1,h2,h3,h4,h5,h6{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{font-size:clamp(28px,4vw,44px);line-height:1.15}
h2{font-size:clamp(22px,2.6vw,32px);line-height:1.2}
h3{font-size:clamp(18px,1.8vw,22px)}
a{color:var(--green-d);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--green)}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 12px;width:100%}
@media(min-width:768px){.container{padding:0 24px}}

.muted{color:var(--muted)}
.bg-soft{background:var(--green-50)}

/* ---------- Bootstrap overrides ---------- */
.btn{
  border-radius:var(--radius-sm);
  font-weight:600;
  padding:11px 22px;
  min-height:44px; /* iOS/Android minimum touch target */
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:all var(--transition);
  letter-spacing:.01em;
}
.btn-lg{padding:14px 28px;font-size:15px;border-radius:12px;min-height:48px}
.btn-primary{background:var(--green);border-color:var(--green);box-shadow:0 4px 14px -2px rgba(73,153,62,.35)}
.btn-primary:hover,.btn-primary:focus{background:var(--green-d);border-color:var(--green-d);box-shadow:0 8px 22px -4px rgba(0,104,56,.4);transform:translateY(-1px)}
.btn-outline-primary{color:var(--green-d);border-color:var(--green);border-width:1.5px}
.btn-outline-primary:hover{background:var(--green);border-color:var(--green)}
.btn-dark{background:var(--text);border-color:var(--text)}
.btn-icon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border);background:#fff;border-radius:12px;transition:all var(--transition)}
.btn-icon:hover{border-color:var(--green);color:var(--green)}

/* ---------- Topbar ---------- */
.topbar{
  background:linear-gradient(90deg,var(--green-d),var(--green));
  color:#fff;
  font-size:13px;
  padding:8px 0;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar a{color:#fff;opacity:.92}
.topbar a:hover{opacity:1}
.topbar .sep{margin:0 8px;opacity:.5}
.topbar i{margin-right:4px}

/* ---------- Header ---------- */
.site-header{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-soft);
  position:sticky;
  top:0;
  z-index:1020;
  transition:box-shadow var(--transition);
}
.site-header.scrolled{box-shadow:0 6px 24px -12px rgba(15,23,42,.18);border-bottom-color:transparent}
.header-inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 0;
}
.hamburger{
  background:transparent;border:1px solid var(--border);width:42px;height:42px;
  border-radius:10px;font-size:20px;color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
/* explicit height forces small source images to scale up; margin keeps header height in check */
.brand-logo{height:64px;width:auto;max-width:300px;object-fit:contain;display:block;margin:-8px 0}
.brand-mark{
  width:42px;height:42px;
  background:linear-gradient(135deg,var(--green),var(--green-d));
  color:#fff;font-weight:800;font-size:16px;
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px -2px rgba(73,153,62,.4);
  font-family:'Poppins',sans-serif;
  flex-shrink:0;
}
.brand-name{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;
  color:var(--green-d);line-height:1;display:block;
}
.brand-tag{color:var(--muted);font-size:11px;letter-spacing:.05em;text-transform:uppercase;margin-top:3px}

/* Search bar */
/* Search wrapper centers the bar between logo and actions */
.search-wrap{position:relative;flex:1 1 auto;max-width:620px;margin:0 auto}
/* Equal side columns (logo | search | actions) so search sits dead-center on desktop */
@media(min-width:992px){
  .header-inner .brand{flex:1 1 0;min-width:0}
  .header-inner .search-wrap{flex:0 0 auto;width:min(620px,42vw);margin:0}
  .header-inner .header-actions{flex:1 1 0;justify-content:flex-end;margin-left:0}
}
.search-bar{
  width:100%;
  background:var(--green-50);
  border:1.5px solid var(--border-soft);
  border-radius:999px;
  display:flex;align-items:center;
  padding:0 6px 0 18px;
  transition:all var(--transition);
}
.search-bar:focus-within{background:#fff;border-color:var(--green);box-shadow:0 0 0 4px rgba(73,153,62,.12)}

/* Live-search suggestions dropdown */
.search-suggest{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:1200;
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;max-height:70vh;overflow-y:auto;
}
.ss-item{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border-soft)}
.ss-item:last-child{border-bottom:0}
.ss-item:hover,.ss-item.active{background:var(--green-50)}
.ss-item img{width:44px;height:44px;border-radius:9px;object-fit:cover;background:var(--green-50);flex-shrink:0}
.ss-meta{flex:1;min-width:0}
.ss-name{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-price{font-size:13px;font-weight:700;color:var(--green-d)}
.ss-price .was{font-weight:400;color:var(--muted);text-decoration:line-through;margin-left:6px}
.ss-price .unit{font-weight:400;color:var(--muted);margin-left:4px}
.ss-foot{display:block;padding:11px 14px;text-align:center;font-size:13px;font-weight:600;color:var(--green-d);text-decoration:none;background:var(--green-50)}
.ss-foot:hover{background:var(--green-100)}
.ss-empty{padding:18px 14px;text-align:center;color:var(--muted);font-size:14px}
.search-bar i.bi-search{color:var(--green);font-size:19px}
.search-bar input{
  flex:1;background:transparent;border:0;outline:0;padding:13px 12px;
  font-size:14.5px;color:var(--text);
}
.search-bar input::placeholder{color:var(--muted)}
.search-bar button{
  background:var(--green);color:#fff;border:0;padding:11px 26px;border-radius:999px;
  font-weight:600;font-size:14px;cursor:pointer;transition:.2s;
  box-shadow:0 4px 12px -3px rgba(73,153,62,.5);
}
.search-bar button:hover{background:var(--green-d);box-shadow:0 6px 16px -3px rgba(0,104,56,.5)}

/* Header action icons */
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.action-btn{
  position:relative;
  width:46px;height:46px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:50%;
  color:var(--text);font-size:21px;text-decoration:none;
  transition:all var(--transition);
}
.action-btn:hover{background:var(--green-50);color:var(--green-d);transform:translateY(-1px)}
.action-btn .action-label{display:none}
@media(min-width:1100px){
  .action-btn{width:auto;min-width:58px;padding:6px 12px;flex-direction:column;height:auto;font-size:20px;gap:3px;border-radius:14px}
  .action-btn .action-label{display:block;font-size:11px;font-weight:500;letter-spacing:.02em}
}
.cart-btn:hover{background:var(--green);color:#fff}

/* Ringed header icons (WhatsApp / Track / Deals / Cart) */
.ring-btn{
  width:42px;height:42px;flex-direction:row;
  border:2px solid var(--green);border-radius:50%;
  color:var(--green-d);background:#fff;font-size:18px;
  padding:0;min-width:0;
  transition:background var(--transition),color var(--transition),transform var(--transition);
}
.ring-btn:hover{transform:translateY(-2px)}
.ring-btn .action-label{display:none!important} /* icon-only, even on wide screens */

/* Filled icons — solid colour circle, white glyph, one hue each (no gradient) */
.ring-wa      {background:#25D366;border-color:#25D366;color:#fff}
.ring-wa:hover{background:#1da851;border-color:#1da851;color:#fff}
.ring-track      {background:#1c7ed6;border-color:#1c7ed6;color:#fff}
.ring-track:hover{background:#1866ad;border-color:#1866ad;color:#fff}
.ring-account      {background:var(--green);border-color:var(--green);color:#fff}
.ring-account:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
.ring-cart      {background:#f08c00;border-color:#f08c00;color:#fff}
.ring-cart:hover{background:#d17c00;border-color:#d17c00;color:#fff}
.ring-btn .action-badge{top:-3px;right:-3px}
.dropdown-toggle-noarrow::after{display:none}
@media(min-width:1100px){
  .ring-btn{width:44px;height:44px;padding:0;border-radius:50%;font-size:19px}
}
@media(max-width:575.98px){
  .ring-btn{width:38px;height:38px;font-size:16px;border-width:1.5px}
  .header-actions{gap:8px} /* tighter on phones so 4 icons still fit */
}
.action-badge{
  position:absolute;top:2px;right:2px;
  background:var(--danger);color:#fff;
  font-size:10px;font-weight:700;line-height:1;
  min-width:19px;height:19px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;border:2px solid #fff;
  box-shadow:0 2px 5px -1px rgba(0,0,0,.25);
}
@media(min-width:1100px){.action-badge{top:0;right:8px}}

/* ---------- Mobile menu offcanvas ---------- */
.mobile-menu{width:88%;max-width:340px}
.mobile-account{
  display:flex;gap:12px;align-items:center;
  padding:14px;background:var(--green-50);
  border-radius:var(--radius);text-decoration:none;color:var(--text);
  margin-bottom:18px;
}
.mobile-account i{font-size:32px;color:var(--green-d)}
.mobile-account strong{display:block;color:var(--green-d)}
.mobile-account small{color:var(--muted)}
.mobile-nav-list{list-style:none;padding:0;margin:0}
.mobile-nav-list li{border-bottom:1px solid var(--border-soft)}
.mobile-nav-list li.divider{border:0;height:8px;background:var(--bg);margin:8px -16px;width:calc(100% + 32px)}
.mobile-nav-list a{display:flex;gap:12px;align-items:center;padding:14px 4px;color:var(--text);font-weight:500}
.mobile-nav-list a i{color:var(--green);font-size:18px;width:24px}

.mobile-search .search-bar{margin-bottom:14px}
.mobile-search .search-bar.mobile button.close{background:transparent;color:var(--muted)}
.trending-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.trending-tags small{color:var(--muted);margin-right:4px}
.trending-tags a{
  padding:6px 14px;background:var(--green-50);color:var(--green-d);
  border-radius:20px;font-size:13px;
}

/* ---------- Hero ---------- */
.hero{margin-top:0}
.hero .carousel-item{transition:transform .8s ease}
.hero-banner{display:block}
.hero-banner img{width:100%;height:auto;display:block;object-fit:cover;max-height:560px}
/* Tall mobile banner (4:5 / 1:1) — cap so it doesn't swallow the fold */
@media (max-width:767.98px){.hero-banner img{max-height:75vh}}
.carousel-control-prev,.carousel-control-next{width:auto;padding:0 12px;opacity:.6}
.carousel-control-prev:hover,.carousel-control-next:hover{opacity:1}
.carousel-control-prev-icon,.carousel-control-next-icon{
  background-color:rgba(0,0,0,.4);border-radius:50%;padding:22px;
}
.carousel-indicators [data-bs-target]{
  width:32px;height:4px;border-radius:2px;background:rgba(0,0,0,.3);border:0;margin:0 4px;
}
.carousel-indicators .active{background:var(--green-d)}


/* ---------- Section common ---------- */
/* Mobile-first vertical rhythm. Two stacked sections each add padding, so the
   visible gap is double these values — keep them modest. */
.section{padding:32px 0}
@media(min-width:768px){.section{padding:40px 0}}
@media(min-width:992px){.section{padding:48px 0}}

/* Mobile only: close the gap between category circles and the next section.
   Desktop keeps the normal .section rhythm. */
@media(max-width:767.98px){
  .cats-section{padding-bottom:0}
  .trending-section{padding-top:20px}
}
/* Mobile: centred stack, no "view all" link (products are right below anyway).
   Desktop (768px+): title left, link right. */
.section-head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;margin-bottom:22px;
}
.section-head .eyebrow{justify-content:center}
.section-head .section-link{display:none}
@media(min-width:768px){
  .section-head{
    flex-direction:row;justify-content:space-between;align-items:flex-end;
    text-align:left;flex-wrap:wrap;gap:16px;margin-bottom:24px;
  }
  .section-head .eyebrow{justify-content:flex-start}
  .section-head .section-link{display:inline-flex}
}
.section-head.text-center{justify-content:center;text-align:center}
.eyebrow{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-d);
  margin-bottom:8px;
}
.section-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--green-d);
}
.section-link:hover{gap:10px}

/* ---------- Marquee (hero → categories) ---------- */
.marquee{
  --mq-bg:#00381f; /* deep green by default; overridable in admin */
  background:var(--mq-bg);
  overflow:hidden;
  position:relative;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Fade the edges so items appear/vanish smoothly (follows the chosen bg) */
.marquee::before,.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--mq-bg),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--mq-bg),transparent)}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{
  display:flex;align-items:center;
  list-style:none;margin:0;padding:0;
  flex-shrink:0;
}
.marquee-group li{
  display:flex;align-items:center;gap:9px;
  color:#fff;font-size:13.5px;font-weight:500;white-space:nowrap;
  padding:0 26px;letter-spacing:.02em;
}
/* Thin divider between claims */
.marquee-group li + li{box-shadow:inset 1px 0 0 rgba(255,255,255,.12)}
/* Flat colour per icon — set inline from PHP. No gradients.
   Tinted disc derived from the icon's own colour, so it works for solid and
   outline glyphs alike (a knockout would mangle the outline ones). */
.mq-ico{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;flex-shrink:0;
  background:color-mix(in srgb, currentColor 20%, transparent);
}
/* Two identical groups scroll -50% for a seamless loop */
@keyframes marquee-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(max-width:575.98px){
  .marquee{padding:9px 0}
  .marquee-group li{font-size:12.5px;padding:0 16px;gap:7px}
  .marquee::before,.marquee::after{width:28px}
  .marquee-track{animation-duration:22s}
}
/* Respect users who disable animation */
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee{overflow-x:auto}
}

/* ---------- Categories (circular badges) ---------- */
/* Mobile-first: single row on phones -> centered row on larger screens */
.category-circles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.cat-circle{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:var(--text);
  min-width:0;transition:transform var(--transition);
}
.cat-ring{
  width:100%;max-width:64px;aspect-ratio:1/1;border-radius:50%;
  border:2px solid var(--green);
  background:#fff;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--green-d);
  transition:transform var(--transition),box-shadow var(--transition);
}
.cat-ring img{width:100%;height:100%;object-fit:cover}
.cat-circle:hover .cat-ring{
  transform:translateY(-4px);
  box-shadow:0 12px 26px -8px rgba(73,153,62,.45);
}
.cat-circle h4{
  margin:0;font-size:11px;font-weight:600;text-align:center;line-height:1.25;
  overflow-wrap:anywhere;hyphens:auto;
}
.cat-circle:hover h4{color:var(--green-d)}
@media(min-width:400px){
  .category-circles{gap:10px}
  .cat-ring{max-width:74px;font-size:28px}
  .cat-circle h4{font-size:12px}
}
@media(min-width:576px){
  .category-circles{gap:18px}
  .cat-ring{max-width:84px;border-width:2.5px;font-size:34px}
  .cat-circle h4{font-size:13.5px}
}
@media(min-width:768px){
  .category-circles{display:flex;flex-wrap:wrap;justify-content:center;gap:40px}
  .cat-circle{min-width:150px;gap:12px}
  .cat-ring{width:96px;max-width:none;height:96px;border-width:3px;font-size:40px}
  .cat-circle h4{font-size:15px;white-space:nowrap}
}

/* ---------- Product grid + card ---------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:6px; /* phones: small gap between the two cards */
  row-gap:14px;   /* keep breathing room between stacked rows */
}
@media(min-width:768px){.product-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(min-width:992px){.product-grid{grid-template-columns:repeat(3,1fr);gap:26px}}

.product-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:18px;overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  display:flex;flex-direction:column;position:relative;
}
.product-card:hover{
  border-color:var(--green-100);
  box-shadow:0 20px 44px -18px rgba(0,104,56,.38);
  transform:translateY(-5px);
}

/* --- Media --- */
.pc-image{
  position:relative;
  aspect-ratio:1/1;
  background:linear-gradient(160deg,var(--green-50) 0%,#fff 70%);
  overflow:hidden;flex-shrink:0;
}
.pc-image::after{ /* subtle scrim so any photo sits well against the body */
  content:'';position:absolute;inset:auto 0 0 0;height:36%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55));
  opacity:0;transition:opacity var(--transition);pointer-events:none;
}
.product-card:hover .pc-image::after{opacity:1}
.pc-image-link{display:block;width:100%;height:100%}
.pc-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.product-card:hover .pc-image img{transform:scale(1.07)}

/* --- Badges (stacked, top-left) --- */
.pc-tags{
  position:absolute;top:10px;left:10px;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;
}
.pc-badge{
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:5px 10px;border-radius:7px;line-height:1;
  display:inline-flex;align-items:center;gap:4px;
}
.pc-badge-discount{background:var(--danger);color:#fff}
/* Product badge. Colours come from Settings → Appearance (inline), so keep them
   out of here. The wrapper owns the layout (own line on phones, right-aligned on
   desktop) so the badge itself can stay shrink-wrapped to its text. */
.pc-vwrap{
  flex-basis:100%;   /* forces its own line on phones */
  display:flex;
  margin-top:3px;
}
.pc-verified{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:700;line-height:1;white-space:nowrap;
  padding:5px 9px;border-radius:6px;
}
.pc-verified i{font-size:13px;color:inherit} /* inherit so the admin colour applies */

/* --- Out of stock --- */
.pc-stock{
  position:absolute;inset:0;z-index:3;
  background:rgba(255,255,255,.78);backdrop-filter:blur(1px);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;color:var(--text);letter-spacing:.03em;text-transform:uppercase;
}
.product-card.is-oos .pc-image img{filter:grayscale(.6)}

/* --- Hover action icons (top-right) --- */
.pc-overlay{
  position:absolute;top:10px;right:10px;z-index:2;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateX(10px);
  transition:opacity var(--transition),transform var(--transition);
}
.product-card:hover .pc-overlay,
.product-card:focus-within .pc-overlay{opacity:1;transform:translateX(0)}
.pc-icon-btn{
  width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:#fff;color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;cursor:pointer;text-decoration:none;
  box-shadow:0 2px 10px -2px rgba(15,23,42,.28);
  transition:background var(--transition),color var(--transition),transform var(--transition);
}
.pc-icon-btn:hover{background:var(--green-d);color:#fff;transform:scale(1.1)}

/* --- Body --- */
.pc-body{padding:11px 11px 13px;display:flex;flex-direction:column;gap:4px;flex:1}
.pc-cat{color:var(--green);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;line-height:1}
.pc-title{font-size:13px;font-weight:600;margin:0;line-height:1.35;font-family:'Poppins',sans-serif}
.pc-title a{
  color:var(--text);text-decoration:none;
  /* no text-transform — show the product name exactly as entered in admin */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em; /* keeps card heights even across 1- and 2-line names */
}
.pc-title a:hover{color:var(--green-d)}
.pc-rating{display:flex;align-items:center;gap:2px;color:var(--warn);font-size:11px;line-height:1}
.pc-rating small{color:var(--muted);margin-left:5px;font-size:10.5px}
.pc-price{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  margin-top:auto;padding-top:5px;
}
.pc-price .now{font-size:15.5px;font-weight:800;color:var(--green-d);font-family:'Poppins',sans-serif;letter-spacing:-.02em;line-height:1.1}
.pc-price .was{font-size:10.5px;color:var(--muted);text-decoration:line-through}
.pc-price .off{
  /* Hidden on phones: the image already carries a "N% OFF" badge, and the card
     is only ~137px wide inside — repeating it forces the row to wrap. */
  display:none;
  font-size:11px;font-weight:700;line-height:1;
  color:var(--green-d);background:var(--green-100);
  padding:5px 8px;border-radius:6px;white-space:nowrap;
}
.pc-price .unit{font-size:10.5px;color:var(--muted)}
.pc-add{
  margin-top:9px;width:100%;
  background:var(--green-d);color:#fff;border:0;
  padding:9px 12px;border-radius:10px;
  font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:0 6px 16px -8px rgba(0,104,56,.9);
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
}
.pc-add:hover:not(:disabled){background:var(--green);transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(0,104,56,.95)}
.pc-add:active:not(:disabled){transform:translateY(0)}
.pc-add:disabled{background:var(--border);color:var(--muted);cursor:not-allowed;box-shadow:none}
@media(min-width:768px){
  .pc-body{padding:16px 16px 18px;gap:7px}
  .pc-title{font-size:17px}
  .pc-price{gap:8px;padding-top:8px}
  .pc-price .now{font-size:21px}
  .pc-price .was{font-size:12.5px}
  .pc-price .off{display:inline-block}      /* room for it here */
  .pc-vwrap{                                 /* back to the right of the price row */
    flex-basis:auto;margin-left:auto;margin-top:0;
  }
  .pc-verified{font-size:13px;padding:7px 11px;gap:5px;border-radius:7px}
  .pc-verified i{font-size:15px}
  .pc-add{font-size:13.5px;padding:12px}
}

/* ---------- Flash sale ---------- */
.flash-section{background:linear-gradient(135deg,#fef9f4,#fff5e6)}
.flash-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;margin-bottom:32px}
.flash-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#f97316,#dc2626);color:#fff;
  padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;
}
.countdown{display:flex;gap:8px}
.countdown>div{
  background:#fff;border-radius:10px;padding:10px 14px;
  min-width:62px;text-align:center;box-shadow:var(--shadow);
}
.countdown span{font-size:22px;font-weight:700;color:var(--text);font-family:'Poppins',sans-serif;display:block;line-height:1}
.countdown small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ---------- Brand story ---------- */
/* ---------- Promo image banners (admin-managed) — mobile first ---------- */
.promo-banners-section{padding:32px 0}
.promo-banners{display:grid;grid-template-columns:1fr;gap:16px}
.promo-banner{
  display:block;border-radius:14px;overflow:hidden;
  background:var(--green-50);line-height:0;
  transition:transform var(--transition),box-shadow var(--transition);
}
.promo-banner img{width:100%;height:auto;display:block;object-fit:cover}
a.promo-banner:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(15,23,42,.28)}
@media(min-width:768px){
  .promo-banners-section{padding:44px 0}
  .promo-banners{grid-template-columns:repeat(2,1fr);gap:22px}
}

/* ---------- Why us (honest stand-in until real testimonials exist) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.why-card{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;
  padding:16px 14px;text-align:center;
  transition:border-color var(--transition),transform var(--transition);
}
.why-card:hover{border-color:var(--green-100);transform:translateY(-2px)}
.why-ico{
  width:44px;height:44px;border-radius:50%;margin:0 auto 10px;
  background:var(--green-50);color:var(--green-d);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.why-card strong{display:block;font-size:13.5px;margin-bottom:5px;color:var(--text)}
.why-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
@media(min-width:768px){
  .why-grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .why-card{padding:24px 18px;border-radius:16px}
  .why-ico{width:52px;height:52px;font-size:23px;margin-bottom:14px}
  .why-card strong{font-size:15px}
  .why-card p{font-size:13.5px}
}

/* ---------- Testimonials ---------- */
.testimonial-section{background:linear-gradient(180deg,var(--green-50),#fff)}
.testimonial-grid{
  display:grid;grid-template-columns:1fr;gap:20px;
}
@media(min-width:640px){.testimonial-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.testimonial-grid{grid-template-columns:repeat(3,1fr)}}
.testimonial-card{
  background:#fff;border-radius:var(--radius);padding:28px;
  border:1px solid var(--border-soft);
  transition:all var(--transition);
}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.t-rating{color:var(--warn);margin-bottom:14px}
.testimonial-card p{font-size:15px;color:var(--text);line-height:1.6;margin-bottom:20px;font-style:italic}
.t-user{display:flex;align-items:center;gap:12px}
.t-user img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.t-user strong{display:block;font-size:14px}
.t-user small{color:var(--muted);font-size:12px}

/* ---------- Instagram ---------- */
.ig-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);gap:8px;
}
@media(min-width:640px){.ig-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:992px){.ig-grid{grid-template-columns:repeat(6,1fr)}}
.ig-item{
  position:relative;display:block;aspect-ratio:1/1;
  border-radius:var(--radius-sm);overflow:hidden;
}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ig-overlay{
  position:absolute;inset:0;background:rgba(73,153,62,.85);
  color:#fff;font-size:28px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--transition);
}
.ig-item:hover .ig-overlay{opacity:1}
.ig-item:hover img{transform:scale(1.1)}

/* ---------- Blog ---------- */
.blog-grid{
  display:grid;
  grid-template-columns:1fr;gap:24px;
}
@media(min-width:768px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border-soft);
  display:flex;flex-direction:column;
  transition:all var(--transition);
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.blog-img{display:block;aspect-ratio:16/10;overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.blog-card:hover .blog-img img{transform:scale(1.06)}
.blog-body{padding:20px}
.blog-meta{color:var(--muted);font-size:12px}
.blog-body h3{font-size:18px;margin:8px 0 10px}
.blog-body h3 a{color:var(--text)}
.blog-body h3 a:hover{color:var(--green-d)}
.blog-body p{color:var(--muted);font-size:14px;margin-bottom:14px}
.read-more{font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:4px}

/* ---------- Footer ---------- */
.site-footer{background:#0e2a16;color:#cfdbcf;padding:60px 0 0;margin-top:60px}
.site-footer h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
/* Newsletter — mobile first: stacked, full-width field then full-width button.
   Desktop (768px+): text left, form right on one row. */
.footer-cta{
  display:flex;flex-direction:column;gap:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  padding:22px 18px;border-radius:16px;margin-bottom:36px;
}
.footer-cta-text{max-width:520px}
.footer-cta-badge{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
  padding:4px 11px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:#d8f5cf;background:rgba(73,153,62,.25);border:1px solid rgba(73,153,62,.45);
}
.footer-cta h3{color:#fff;margin:0 0 6px;font-size:19px}
.footer-cta p{margin:0;opacity:.75;font-size:14px;line-height:1.55}
.newsletter-form{display:flex;flex-direction:column;gap:10px;width:100%}
.newsletter-form input{
  width:100%;padding:13px 16px;border-radius:11px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);
  color:#fff;font-size:15px; /* 15px+ stops iOS zooming the page on focus */
  min-height:48px;
}
.newsletter-form input::placeholder{color:#8aa28e}
.newsletter-form input:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.1)}
.newsletter-form button{
  width:100%;min-height:48px;
  background:var(--green);color:#fff;border:0;padding:13px 24px;
  border-radius:11px;font-weight:600;font-size:15px;cursor:pointer;transition:.2s;
  white-space:nowrap;
}
.newsletter-form button:hover{background:#5fb154}
@media(min-width:768px){
  .footer-cta{
    flex-direction:row;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:24px;padding:30px;border-radius:var(--radius-lg);margin-bottom:60px;
  }
  .footer-cta h3{font-size:22px}
  .newsletter-form{flex-direction:row;gap:8px;min-width:280px;flex:1;max-width:480px;width:auto}
  .newsletter-form input{flex:1;width:auto;padding:14px 18px;border-radius:12px;font-size:14px}
  .newsletter-form button{width:auto;padding:14px 24px;border-radius:12px;font-size:14px}
}

.footer-grid{
  display:grid;grid-template-columns:1fr;gap:32px;
  padding-bottom:40px;
}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr 1fr}}
.footer-brand p{font-size:14px;opacity:.7;margin:14px 0 18px;max-width:320px}
.footer-brand .brand-name{color:#fff}
/* Logo sits on the dark footer — cap its height and let it breathe */
.footer-logo{height:56px;width:auto;max-width:220px;object-fit:contain;display:block;margin:0}
.footer-logo-link{display:inline-flex;align-items:center;gap:10px}
@media(min-width:768px){.footer-logo{height:64px;max-width:240px}}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:10px}
.footer-col a{color:#cfdbcf;font-size:14px;opacity:.85}
.footer-col a:hover{color:var(--green);opacity:1}
.social{display:flex;gap:8px}
.social a{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;
  transition:all var(--transition);
}
.social a:hover{background:var(--green);transform:translateY(-2px)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;
  font-size:13px;opacity:.75;
}
.footer-bottom p{margin:0}
.payments{display:flex;gap:10px;align-items:center;font-size:22px;color:#cfdbcf;flex-wrap:wrap}
.payments .pay-tag{font-size:11px;font-weight:700;letter-spacing:.05em;background:rgba(255,255,255,.08);padding:5px 9px;border-radius:5px;line-height:1}

/* ---------- Mobile bottom nav ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:1030;
  background:#fff;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-around;
  box-shadow:0 -4px 20px rgba(15,23,42,.06);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom));
}
.bn-item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 4px;color:var(--muted);font-size:10px;font-weight:500;
  text-decoration:none;
  position:relative;
  transition:color var(--transition);
}
.bn-item i{font-size:20px}
.bn-item.active,.bn-item:hover{color:var(--green-d)}
.bn-item.active i{color:var(--green)}
.bn-cart i{color:var(--green-d)}
.bn-badge{
  position:absolute;top:0;right:calc(50% - 22px);
  background:var(--danger);color:#fff;
  font-size:9px;font-weight:700;font-style:normal;
  min-width:16px;height:16px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{background:#fff;border-bottom:1px solid var(--border-soft);padding:14px 0;font-size:13px}
.breadcrumb-bar ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;color:var(--muted)}
.breadcrumb-bar li:not(:last-child)::after{content:'/';margin-left:8px;opacity:.5}
.breadcrumb-bar a{color:var(--muted)}
.breadcrumb-bar a:hover{color:var(--green-d)}
.breadcrumb-bar [aria-current=page]{color:var(--text);font-weight:500}

/* ---------- Listing page ---------- */
.listing-section{padding:32px 0 60px}
.listing-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:16px;margin-bottom:24px;
}
.listing-head h1{font-size:clamp(22px,3vw,30px);margin-bottom:4px}
.listing-actions{display:flex;align-items:center;gap:10px}
.sort-form{display:flex;align-items:center;gap:8px}
.sort-form label{font-size:13px;color:var(--muted)}
.sort-form select{
  padding:8px 32px 8px 12px;border-radius:8px;
  border:1px solid var(--border);background:#fff;
  font-size:13px;font-weight:500;color:var(--text);cursor:pointer;
}
.listing-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:992px){.listing-grid{grid-template-columns:260px 1fr;gap:32px}}

/* Filter sidebar */
.filter-sidebar{position:sticky;top:140px;align-self:start;max-height:calc(100vh - 160px);overflow-y:auto;padding-right:8px}
.filter-block{padding:18px 0;border-bottom:1px solid var(--border-soft)}
.filter-block h6{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;color:var(--text)}
.filter-list{list-style:none;padding:0;margin:0}
.filter-list a{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;color:var(--text);font-size:14px;
  border-radius:8px;transition:all var(--transition);
}
.filter-list a:hover{background:var(--green-50)}
.filter-list a.active{background:var(--green);color:#fff;font-weight:600}
.filter-list a.active i{color:#fff}
.filter-list i{color:var(--green);width:16px}
.price-inputs{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.price-inputs input{
  width:100%;padding:8px 12px;border:1px solid var(--border);
  border-radius:8px;font-size:13px;
}
.price-inputs span{color:var(--muted)}
.filter-checks{list-style:none;padding:0;margin:0}
.filter-checks li{margin-bottom:6px}
.filter-checks label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--text);padding:4px 0}
.filter-checks input{accent-color:var(--green)}
.filter-checks i{color:var(--warn);font-size:14px}
.check-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.check-toggle input{width:18px;height:18px;accent-color:var(--green)}
.filter-actions{margin-top:18px;display:grid;gap:6px}

/* Pagination */
.pagination-bar{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:40px;flex-wrap:wrap}
.page-item{
  min-width:40px;height:40px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:#fff;color:var(--text);
  border-radius:10px;font-weight:500;font-size:14px;
  transition:all var(--transition);
}
.page-item:hover:not(.disabled):not(.active){border-color:var(--green);color:var(--green-d)}
.page-item.active{background:var(--green);border-color:var(--green);color:#fff}
.page-item.disabled{opacity:.4;pointer-events:none}
.page-ellipsis{color:var(--muted);padding:0 4px}

.empty-state{
  text-align:center;padding:60px 20px;
  background:#fff;border-radius:var(--radius);border:1px dashed var(--border);
}
.empty-state i{font-size:54px;color:var(--border);margin-bottom:14px}
.empty-state h3{margin-bottom:6px}
.empty-state p{color:var(--muted);margin-bottom:18px}

/* ---------- PDP ---------- */
/* ============ PDP — mobile first ============ */
.pdp{padding:16px 0 44px;background:linear-gradient(180deg,var(--green-50) 0%,var(--bg) 340px)}
.pdp-grid{display:grid;grid-template-columns:1fr;gap:24px}

/* --- Gallery --- */
.pdp-main{
  position:relative;background:#fff;
  border-radius:16px;overflow:hidden;
  aspect-ratio:1/1;
  box-shadow:0 12px 34px -18px rgba(15,23,42,.3);
}
.pdp-main img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.pdp-main:hover img{transform:scale(1.04)}
.pdp-flags{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:2}
.pdp-flag{
  font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1;
  padding:6px 11px;border-radius:7px;
  display:inline-flex;align-items:center;gap:4px;
}
.pdp-flag-off{background:var(--danger);color:#fff;box-shadow:0 4px 12px -3px rgba(220,38,38,.5)}
/* Colours set inline from Settings → Appearance */
.pdp-flag-verified{box-shadow:0 3px 10px -2px rgba(0,0,0,.18)}
.pdp-fav{
  position:absolute;top:12px;right:12px;z-index:2;
  width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;
  box-shadow:0 3px 12px -2px rgba(15,23,42,.28);transition:all var(--transition);
}
.pdp-fav:hover{background:var(--danger);color:#fff;transform:scale(1.08)}
.pdp-thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.pdp-thumbs::-webkit-scrollbar{display:none}
.pdp-thumb{
  flex:0 0 62px;width:62px;height:62px;
  border:2px solid transparent;border-radius:12px;overflow:hidden;
  background:#fff;padding:0;cursor:pointer;
  box-shadow:0 2px 8px -3px rgba(15,23,42,.25);
  transition:border-color var(--transition),transform var(--transition);
}
.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-thumb:hover{transform:translateY(-2px)}
.pdp-thumb.active{border-color:var(--green)}

/* --- Info --- */
.pdp-brand{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--green-100);color:var(--green-d);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;
}
.pdp-info h1{font-size:24px;font-weight:700;margin:10px 0 10px;line-height:1.22;letter-spacing:-.02em}
.pdp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;font-size:13px;color:var(--muted)}
.pdp-rating{color:var(--warn);display:inline-flex;align-items:center;gap:2px;font-size:12px}
.pdp-rating span{color:var(--text);margin-left:5px;font-weight:600;font-size:13px}
.pdp-revlink{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.pdp-revlink:hover{color:var(--text)}
.pdp-dot{opacity:.4}
.pdp-desc{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0 0 18px}

/* --- Price panel --- */
.pdp-pricebox{
  background:#fff;border:1px solid var(--green-100);
  border-radius:14px;padding:16px 18px;margin-bottom:16px;
  box-shadow:0 6px 20px -14px rgba(0,104,56,.4);
}
.pdp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pdp-price .now{font-size:32px;font-weight:800;color:var(--green-d);font-family:'Poppins',sans-serif;letter-spacing:-.03em;line-height:1.05}
.pdp-price .was{font-size:15px;color:var(--muted);text-decoration:line-through}
.pdp-price .save{
  font-size:11.5px;color:#fff;font-weight:700;letter-spacing:.02em;
  background:var(--danger);padding:4px 9px;border-radius:6px;
}
.pdp-subline{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.pdp-tax{color:var(--muted);font-size:12px;display:inline-flex;align-items:center;gap:5px}
.pdp-stock{font-size:12.5px;display:inline-flex;align-items:center;gap:5px;font-weight:600}
.pdp-stock.in{color:var(--green-d)}
.pdp-stock.out{color:var(--danger)}

/* --- Actions: qty | add, then Buy Now full width --- */
.pdp-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-bottom:12px}
.qty-stepper{
  display:inline-flex;align-items:center;
  border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;
}
.qty-stepper button{
  width:40px;height:52px;background:transparent;border:0;
  font-size:17px;cursor:pointer;color:var(--text);transition:background var(--transition);
}
.qty-stepper button:hover{background:var(--green-50);color:var(--green-d)}
.qty-stepper input{width:36px;height:52px;border:0;text-align:center;font-weight:700;font-size:15px;outline:0;background:transparent}
.pdp-add{
  height:52px;background:#fff;color:var(--green-d);border:1.5px solid var(--green-d);border-radius:12px;
  font-size:14.5px;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:all var(--transition);
}
.pdp-add:hover:not(:disabled){background:var(--green-50);color:var(--green-d)}
.pdp-buy{
  grid-column:1/-1;height:54px;width:100%;
  background:var(--green-d);color:#fff;border:0;border-radius:12px;
  font-size:15px;font-weight:700;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 10px 24px -10px rgba(0,104,56,.75);
  transition:all var(--transition);
}
.pdp-buy:hover:not(:disabled){background:var(--green);transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(0,104,56,.8)}
.pdp-buy:active:not(:disabled){transform:translateY(0)}
.pdp-add:disabled,.pdp-buy:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* --- Delivery --- */
.pdp-delivery{
  display:flex;gap:6px;align-items:center;margin-top:14px;
  border:1.5px dashed var(--border);border-radius:12px;padding:4px 4px 4px 12px;background:#fff;
}
.pdp-delivery i{color:var(--green-d);font-size:15px}
.pdp-delivery input{flex:1;min-width:0;border:0;outline:0;padding:11px 6px;font-size:14px;background:transparent}
.pdp-check{
  border:0;background:var(--green-50);color:var(--green-d);
  font-weight:700;font-size:13px;padding:10px 16px;border-radius:9px;cursor:pointer;
  transition:all var(--transition);
}
.pdp-check:hover{background:var(--green-d);color:#fff}

/* --- Trust tiles --- */
.pdp-trust{
  list-style:none;margin:20px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.pdp-trust li{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:11px 12px;
  transition:border-color var(--transition),transform var(--transition);
}
.pdp-trust li:hover{border-color:var(--green-100);transform:translateY(-2px)}
.pdp-trust .t-ico{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--green-50);color:var(--green-d);
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;
}
.pdp-trust .t-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.pdp-trust .t-txt strong{font-size:12.5px;font-weight:600;color:var(--text)}
.pdp-trust .t-txt small{font-size:11px;color:var(--muted)}

/* --- Tabs --- */
.pdp-tabs{margin-top:40px;background:#fff;border-radius:12px;border:1px solid var(--border-soft);overflow:hidden}
.pdp-tabs .nav-tabs{border-bottom:1px solid var(--border-soft);padding:0 16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pdp-tabs .nav-tabs::-webkit-scrollbar{display:none}
.pdp-tabs .nav-link{
  border:0;color:var(--muted);font-weight:600;font-size:14px;
  padding:14px 2px;margin-right:22px;
  border-bottom:2px solid transparent;border-radius:0;
  white-space:nowrap;
}
.pdp-tabs .nav-link:hover{color:var(--text)}
.pdp-tabs .nav-link.active{color:var(--text);border-bottom-color:var(--green-d);background:transparent}
.pdp-tabs .tab-content{padding:20px 16px;font-size:14.5px;line-height:1.7;color:var(--text)}
.pdp-tabs .tab-content p{margin-bottom:12px}
.pdp-tabs .tab-content p:last-child{margin-bottom:0}

/* ---- Tablet ---- */
@media(min-width:560px){
  .pdp-info h1{font-size:27px}
  .pdp-price .now{font-size:35px}
  .pdp-actions{grid-template-columns:auto 1fr 1fr}
  .pdp-buy{grid-column:auto;height:52px}
}

/* ---- Desktop ---- */
@media(min-width:992px){
  .pdp{padding:28px 0 64px;background:linear-gradient(180deg,var(--green-50) 0%,var(--bg) 420px)}
  .pdp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
  .pdp-gallery{position:sticky;top:96px}
  .pdp-info h1{font-size:31px;margin:12px 0 12px}
  .pdp-price .now{font-size:38px}
  .pdp-pricebox{padding:18px 20px}
  .pdp-thumb{flex:0 0 70px;width:70px;height:70px}
  .pdp-tabs{margin-top:64px}
  .pdp-tabs .nav-tabs{padding:0 24px}
  .pdp-tabs .nav-link{font-size:14.5px;padding:16px 4px;margin-right:28px}
  .pdp-tabs .tab-content{padding:26px 24px;font-size:15px}
}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th,.spec-table td{padding:13px 14px;border-bottom:1px solid var(--border-soft);text-align:left;font-size:14px}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{width:32%;color:var(--muted);font-weight:500}
.review-item{padding:18px 0;border-bottom:1px solid var(--border-soft)}
.review-item:last-child{border-bottom:0}
.rev-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.rev-stars{color:var(--warn)}
.rev-head small{color:var(--muted)}

/* ---------- Page hero & contact ---------- */
.page-hero{background:linear-gradient(135deg,var(--green-50),#fff);padding:60px 0 40px;text-align:center;border-bottom:1px solid var(--border-soft)}
.page-hero p{color:var(--muted);font-size:17px;max-width:600px;margin:0 auto}
.prose{max-width:760px;margin:0 auto;font-size:16px;line-height:1.75}
.prose h2{margin-top:32px;margin-bottom:14px}
.prose ul{padding-left:20px}
.contact-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.contact-grid{grid-template-columns:1fr 1.5fr;gap:48px}}
.contact-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--border-soft)}
.contact-item i{font-size:22px;color:var(--green-d);margin-top:4px}
.contact-item strong{display:block;margin-bottom:4px}
.contact-item p{margin:0;color:var(--muted);font-size:14px}
.contact-form .form-control{padding:13px 16px;border-radius:10px;border:1px solid var(--border);font-size:14px}
.contact-form .form-control:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(73,153,62,.15)}

/* ---------- Error page ---------- */
.error-page{padding:80px 0;display:flex;align-items:center;justify-content:center;min-height:60vh}
.error-card{text-align:center;max-width:520px;margin:0 auto}
.error-code{font-size:120px;font-weight:800;background:linear-gradient(135deg,var(--green),var(--green-d));-webkit-background-clip:text;background-clip:text;color:transparent;font-family:'Poppins',sans-serif;line-height:1}
.error-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* ---------- Misc utility ---------- */
::selection{background:var(--green-100);color:var(--green-d)}

/* Scrollbar polish */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--green)}

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
.auth-body {
  background: linear-gradient(135deg, #f1f8ee 0%, #f8faf8 100%);
  min-height: 100vh;
  font-family: 'Poppins', sans-serif;
}

.auth-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
@media (min-width: 992px) {
  .auth-shell { grid-template-columns: 5fr 6fr; }
}

/* ----- Brand panel (left) ----- */
.auth-brand-panel {
  display: none;
  position: relative;
  background: linear-gradient(160deg, var(--green-d) 0%, var(--green) 60%, #6ab85a 100%);
  color: #fff;
  padding: 48px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.auth-brand-panel::before,
.auth-brand-panel::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.auth-brand-panel::before { width: 380px; height: 380px; top: -120px; right: -120px; }
.auth-brand-panel::after  { width: 260px; height: 260px; bottom: -80px; left: -80px; }
@media (min-width: 992px) { .auth-brand-panel { display: flex; } }

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  position: relative;
  z-index: 1;
}
.auth-brand .brand-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  display: grid; place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
}
.auth-brand .brand-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #fff; /* override global .brand-name (deep green) — unreadable on this panel */
}
.auth-brand .brand-logo { height: 44px; width: auto; max-width: 190px; object-fit: contain; margin: 0; }

.auth-brand-content { position: relative; z-index: 1; max-width: 460px; }
.auth-brand-content h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
  color: #fff; /* override global h1 colour (dark navy) */
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}
.auth-brand-content p {
  color: #fff;
  opacity: .92;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.auth-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.auth-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.auth-feature-list i {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18);
  border-radius: 10px;
  font-size: 18px;
}

.auth-brand-footer { position: relative; z-index: 1; opacity: .8; }

/* ----- Form panel (right) ----- */
.auth-form-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 80px;
}
@media (min-width: 768px) { .auth-form-panel { padding: 40px; } }

.auth-back {
  align-self: flex-start;
  text-decoration: none;
  color: var(--green-d);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auth-form-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: 0 8px 30px -12px rgba(0,104,56,.12);
}
@media (min-width: 480px) { .auth-form-card { padding: 40px 36px; } }

.auth-form-header { text-align: center; margin-bottom: 28px; }
.auth-form-header h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--text);
  margin: 0 0 6px;
}
.auth-form-header p {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}

.auth-icon-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1f8ee, #d4ecca);
  color: var(--green-d);
  display: grid; place-items: center;
  font-size: 28px;
  margin: 0 auto 16px;
  border: 1px solid #d4ecca;
}

/* Bootstrap floating-label tweaks */
.auth-form .form-control {
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 1rem .9rem;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.auth-form .form-control:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 .2rem rgba(73,153,62,.15);
}
.auth-form .form-floating > label {
  color: #6b7280;
  font-size: 14px;
}
.auth-form .form-check-input:checked {
  background-color: var(--green);
  border-color: var(--green);
}
.auth-form .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(73,153,62,.15);
  border-color: var(--green);
}

.password-field { position: relative; }
.password-toggle {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  width: 38px; height: 38px;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: grid; place-items: center;
}
.password-toggle:hover { background: #f1f8ee; color: var(--green-d); }

.password-strength { margin-top: -4px; }
.strength-bar {
  height: 5px;
  background: #eef2ee;
  border-radius: 99px;
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  width: 0%;
  background: #dc3545;
  border-radius: 99px;
  transition: width .25s, background .25s;
}
.strength-label {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 12px;
}

.auth-submit {
  background: var(--green);
  border-color: var(--green);
  font-weight: 600;
  border-radius: 10px;
  padding: .9rem 1rem;
  transition: background .15s, transform .05s;
}
.auth-submit:hover, .auth-submit:focus {
  background: var(--green-d);
  border-color: var(--green-d);
}
.auth-submit:active { transform: translateY(1px); }

.auth-link {
  color: var(--green-d);
  text-decoration: none;
  font-weight: 600;
}
.auth-link:hover { color: var(--green); text-decoration: underline; }

.btn-link-plain {
  background: none; border: 0; padding: 0;
  color: var(--green-d);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.btn-link-plain:hover { color: var(--green); }

.auth-divider {
  text-align: center;
  margin: 24px 0;
  position: relative;
  color: #9ca3af;
  font-size: 13px;
}
.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.auth-divider span {
  background: #fff;
  padding: 0 14px;
  position: relative;
  z-index: 1;
}

.auth-form-footer {
  margin-top: 24px;
  font-size: 13px;
  color: #6b7280;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.auth-form-footer a {
  color: #6b7280;
  text-decoration: none;
}
.auth-form-footer a:hover { color: var(--green-d); }

/* ----- OTP boxes ----- */
.otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.otp-box {
  width: clamp(40px, 13vw, 56px);
  height: clamp(48px, 14vw, 64px);
  text-align: center;
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  color: var(--green-d);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #f8faf8;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
.otp-box:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 .2rem rgba(73,153,62,.15);
  transform: translateY(-1px);
}

/* ----- Flash alerts ----- */
.flash-container {
  position: fixed;
  top: 16px;
  right: 16px;
  left: 16px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
@media (min-width: 576px) {
  .flash-container { left: auto; max-width: 420px; }
}
.flash-alert {
  pointer-events: auto;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.15);
  font-size: 14px;
  padding: 14px 40px 14px 16px;
}

/* ==========================================================================
   ACCOUNT DASHBOARD
   ========================================================================== */
.account-page { background: #f8faf8; min-height: calc(100vh - 200px); }

.account-sidebar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  top: 90px;
}

.account-user {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.account-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-d));
  color: #fff;
  display: grid; place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}
.account-user strong { font-size: 14px; }
.account-user small { font-size: 12px; word-break: break-all; }

.account-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.account-nav a:hover { background: #f1f8ee; color: var(--green-d); }
.account-nav li.active a { background: #f1f8ee; color: var(--green-d); font-weight: 600; }
.account-nav a i { font-size: 16px; }

.account-welcome {
  background: linear-gradient(135deg, var(--green-d), var(--green));
  color: #fff;
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.account-welcome h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  margin: 0 0 4px;
}
.account-welcome p { color: rgba(255,255,255,.85) !important; }
.account-welcome .btn {
  background: #fff;
  border-color: #fff;
  color: var(--green-d);
}
.account-welcome .btn:hover {
  background: rgba(255,255,255,.9);
  color: var(--green-d);
}

.stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}
.stat-card small { color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.stat-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 4px 0 0;
  color: var(--text);
}
.stat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.bg-soft-green  { background: #e6f3e0; color: var(--green-d); }
.bg-soft-pink   { background: #fde4ec; color: #be185d; }
.bg-soft-yellow { background: #fef3c7; color: #b45309; }
.bg-soft-blue   { background: #dbeafe; color: #1e40af; }

.account-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}
.empty-state i { font-size: 48px; color: #cbd5e1; display: block; margin-bottom: 12px; }

/* ----- Header account dropdown ----- */
.dropdown-toggle-noarrow::after { display: none !important; }
.account-dropdown { min-width: 240px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 0; }
.account-dropdown .dropdown-header { padding: 10px 16px; }
.account-dropdown .dropdown-item { padding: 10px 16px; font-size: 14px; }
.account-dropdown .dropdown-item:hover { background: #f1f8ee; color: var(--green-d); }
.account-dropdown form button.dropdown-item { width: 100%; text-align: left; border: 0; background: transparent; }

.mobile-nav-link-btn {
  background: transparent;
  border: 0;
  padding: 12px 16px;
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.mobile-nav-link-btn:hover { background: #f1f8ee; }

/* ==========================================================
   PHASE 5 + 6 � Cart, Checkout, Account
   ========================================================== */

/* ---- Empty states ---- */
.empty-state{padding:48px 16px;text-align:center;color:#6b7280}
.empty-state i{font-size:3.2rem;color:var(--green);opacity:.4;display:block;margin-bottom:.75rem}
.empty-state h4{margin-bottom:.5rem}

/* ==========================================================
   CART
   ========================================================== */
.cart-page .page-title{font-weight:700;font-size:1.6rem}
.free-ship-bar{
  background:#f0fbef;border:1px dashed var(--green);border-radius:var(--radius);
  padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap
}
.free-ship-bar i{color:var(--green);font-size:1.25rem}
.free-ship-bar .progress{min-width:140px}

.cart-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cart-item{
  display:grid;grid-template-columns:90px 1fr auto auto;gap:16px;
  padding:16px;border-bottom:1px solid var(--border);align-items:center
}
.cart-item:last-child{border-bottom:0}
.ci-image img{width:90px;height:90px;border-radius:10px;object-fit:cover;background:#f3f4f6}
.ci-name{display:block;font-weight:600;color:var(--text);text-decoration:none;line-height:1.3;margin-bottom:.15rem}
.ci-name:hover{color:var(--green)}
.ci-price{margin-top:.25rem}
.ci-price strong{color:var(--green-d);font-size:1rem}
.ci-price small{margin-left:.4rem}
.ci-qty .qty-form{
  display:inline-flex;align-items:center;border:1px solid var(--border);
  border-radius:999px;padding:2px;background:#fff
}
.qty-btn{
  width:30px;height:30px;border-radius:999px;border:none;background:transparent;
  font-size:1.1rem;line-height:1;color:var(--text);cursor:pointer
}
.qty-btn:hover{background:#f0fbef;color:var(--green-d)}
.qty-input{width:42px;border:0;text-align:center;font-weight:600;background:transparent;outline:none;-moz-appearance:textfield}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ci-subtotal{text-align:right}
.ci-subtotal strong{display:block;color:var(--text);font-size:1.05rem;margin-bottom:.25rem}

@media (max-width:575px){
  .cart-item{grid-template-columns:80px 1fr;grid-template-areas:"img info" "qty sub"}
  .ci-image{grid-area:img}.ci-info{grid-area:info}.ci-qty{grid-area:qty}.ci-subtotal{grid-area:sub}
  .ci-image img{width:80px;height:80px}
}

.cart-summary{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  position:sticky;top:90px
}
.summary-row{display:flex;justify-content:space-between;padding:.4rem 0;color:#475569}
.summary-row.total-row{font-size:1.15rem;color:var(--text)}
.summary-row.total-row strong{color:var(--green-d)}
.coupon-form{display:flex;gap:8px}
.coupon-form .form-control{flex:1}
.coupon-applied{
  background:#eaf6e8;border:1px dashed var(--green);border-radius:10px;
  padding:.5rem .75rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem
}

/* ==========================================================
   CHECKOUT
   ========================================================== */
.checkout-steps{
  list-style:none;padding:0;margin:0 0 28px;display:flex;gap:0;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden
}
.checkout-steps li{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:14px;color:#9ca3af;font-weight:500;position:relative;font-size:.95rem
}
.checkout-steps li:not(:last-child)::after{
  content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border-left:14px solid #fff;border-top:24px solid transparent;border-bottom:24px solid transparent;z-index:2
}
.checkout-steps li.done{background:#eaf6e8;color:var(--green-d)}
.checkout-steps li.done:not(:last-child)::after{border-left-color:#eaf6e8}
.checkout-steps li.active{background:var(--green);color:#fff;font-weight:700}
.checkout-steps li.active:not(:last-child)::after{border-left-color:var(--green)}
.checkout-steps .step-num{
  display:inline-flex;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.08);
  align-items:center;justify-content:center;font-size:.85rem;font-weight:700
}
.checkout-steps li.active .step-num{background:rgba(255,255,255,.25)}
@media (max-width:575px){.checkout-steps .step-label{display:none}.checkout-steps li{padding:10px}}

/* Address radio cards */
.address-radio-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.address-radio{
  display:flex;gap:12px;padding:14px;border:1.5px solid var(--border);
  border-radius:12px;cursor:pointer;transition:all .15s;background:#fff
}
.address-radio input{margin-top:4px;accent-color:var(--green)}
.address-radio:has(input:checked){border-color:var(--green);background:#f6fbf5;box-shadow:0 0 0 3px rgba(73,153,62,.1)}

/* Payment method cards */
.payment-methods{display:flex;flex-direction:column;gap:10px}
.payment-method{
  display:grid;grid-template-columns:48px 1fr 24px;gap:14px;align-items:center;
  padding:14px 16px;border:1.5px solid var(--border);border-radius:12px;
  cursor:pointer;transition:all .15s;background:#fff
}
.payment-method input{display:none}
.pm-icon{
  width:48px;height:48px;border-radius:10px;background:#f0fbef;
  display:inline-flex;align-items:center;justify-content:center;color:var(--green-d);font-size:1.4rem
}
.pm-info strong{display:block;font-size:1rem}
.pm-check{color:var(--green);opacity:0;font-size:1.25rem}
.payment-method:has(input:checked){border-color:var(--green);background:#f6fbf5;box-shadow:0 0 0 3px rgba(73,153,62,.1)}
.payment-method:has(input:checked) .pm-check{opacity:1}

/* Mini items */
.checkout-mini-items{max-height:240px;overflow:auto}
.mini-item{display:flex;gap:10px;padding:.5rem 0;border-bottom:1px dashed var(--border);align-items:center}
.mini-item:last-child{border-bottom:0}
.mini-item img{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#f3f4f6}

/* Success */
.success-check{
  width:84px;height:84px;border-radius:50%;background:var(--green);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:2.6rem;
  box-shadow:0 10px 30px rgba(73,153,62,.3)
}

/* ==========================================================
   ACCOUNT
   ========================================================== */
.account-page{background:#f5f8f5;min-height:60vh}
.account-title{font-weight:700;font-size:1.5rem}
.account-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px}

.account-sidebar{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  position:sticky;top:90px
}
.account-user{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:14px}
.account-avatar{
  width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem
}
.account-user-meta strong{display:block;line-height:1.2}
.account-nav{list-style:none;padding:0;margin:0}
.account-nav li{margin-bottom:2px}
.account-nav a,.account-nav-btn{
  display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:10px;
  color:#374151;text-decoration:none;font-weight:500;width:100%;background:transparent;border:0;text-align:left;font-size:.95rem
}
.account-nav a:hover,.account-nav-btn:hover{background:#f0fbef;color:var(--green-d)}
.account-nav li.active a{background:var(--green);color:#fff}
.account-nav li.active a .badge{background:rgba(255,255,255,.2)!important;color:#fff!important}
.account-nav i{font-size:1.05rem;width:20px;text-align:center}

/* Welcome / stats */
.account-welcome{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-d) 100%);
  color:#fff;border-radius:var(--radius);padding:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px
}
.account-welcome h1{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}
.account-stats .stat-card{
  display:flex;gap:14px;align-items:center;padding:18px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s
}
.account-stats .stat-card-link:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.stat-icon{width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.bg-soft-green{background:#e7f5e3;color:var(--green-d)}
.bg-soft-pink{background:#ffe3ec;color:#e91e63}
.bg-soft-yellow{background:#fff4cc;color:#b78900}
.bg-soft-blue{background:#dbeafe;color:#1e40af}
.stat-card h3{font-size:1.4rem;font-weight:700;margin:0;color:var(--text)}
.stat-card small{color:#6b7280}

/* Order table */
.order-table th{font-size:.8rem;text-transform:uppercase;color:#6b7280;font-weight:600;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.status-pill{
  display:inline-block;padding:.25rem .65rem;border-radius:999px;font-size:.78rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.03em
}
.status-pending{background:#fff4cc;color:#b78900}
.status-processing{background:#dbeafe;color:#1e40af}
.status-packed{background:#e0e7ff;color:#3730a3}
.status-shipped{background:#cffafe;color:#155e75}
.status-delivered{background:#d1fae5;color:#065f46}
.status-cancelled,.status-returned,.status-refunded{background:#fee2e2;color:#991b1b}

/* Order detail */
.order-item{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--border)}
.order-item:last-child{border-bottom:0}
.order-item-image img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:#f3f4f6}
.order-item-info{flex:1;min-width:0}
.order-item-name{display:block;font-weight:600;color:var(--text);text-decoration:none;line-height:1.3}
.order-item-name:hover{color:var(--green)}
.order-item-info small{display:block}

.order-timeline{
  list-style:none;padding:0;margin:0;display:flex;justify-content:space-between;
  position:relative;gap:.5rem;flex-wrap:wrap
}
.order-timeline::before{
  content:"";position:absolute;top:18px;left:18px;right:18px;height:2px;background:#e5e7eb;z-index:0
}
.order-timeline li{flex:1;text-align:center;position:relative;z-index:1;min-width:80px}
.order-timeline .t-icon{
  display:inline-flex;width:38px;height:38px;border-radius:50%;background:#fff;
  border:2px solid #e5e7eb;color:#9ca3af;align-items:center;justify-content:center;font-size:1rem
}
.order-timeline .t-label{display:block;font-size:.75rem;margin-top:.4rem;color:#6b7280;font-weight:500}
.order-timeline li.done .t-icon{background:var(--green);border-color:var(--green);color:#fff}
.order-timeline li.done .t-label{color:var(--text)}
.order-timeline li.active .t-icon{transform:scale(1.1);box-shadow:0 0 0 4px rgba(73,153,62,.18)}

/* Wishlist */
.wishlist-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:all .15s}
.wishlist-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.06);transform:translateY(-2px)}
.wl-image{display:block;position:relative;aspect-ratio:1/1;background:#f3f4f6}
.wl-image img{width:100%;height:100%;object-fit:cover}
.wl-badge{position:absolute;top:8px;left:8px;background:var(--green);color:#fff;padding:.15rem .5rem;border-radius:6px;font-size:.7rem;font-weight:700;text-transform:uppercase}
.wl-badge.out{background:#6b7280}
.wl-badge.sale{background:#ef4444}
.wl-remove{position:absolute;top:8px;right:8px;margin:0}
.wl-remove button{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);border:0;color:#ef4444;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.wl-remove button:hover{background:#ef4444;color:#fff}
.wl-body{padding:12px;display:flex;flex-direction:column;gap:.5rem;flex:1}
.wl-name{color:var(--text);text-decoration:none;font-weight:500;line-height:1.3;font-size:.9rem;flex:1}
.wl-name:hover{color:var(--green)}
.wl-price strong{color:var(--green-d)}

/* Address cards */
.address-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:16px;height:100%;transition:all .15s}
.address-card.default{border-color:var(--green);background:#f6fbf5}
.address-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.05)}

@media (max-width:991.98px){
  .account-sidebar,.cart-summary{position:static}
}
/* ---- Toast (cart/wishlist) ---- */
.sr-toast{
  position:fixed;left:50%;bottom:80px;transform:translate(-50%, 20px);
  background:#1f2937;color:#fff;padding:.65rem 1.1rem;border-radius:999px;
  font-weight:500;font-size:.92rem;display:inline-flex;align-items:center;gap:.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:all .25s ease;z-index:10000;
  max-width:90vw
}
.sr-toast.show{opacity:1;transform:translate(-50%, 0)}
.sr-toast-success{background:var(--green-d)}
.sr-toast-error{background:#b91c1c}
.sr-toast i{font-size:1.05rem}
@media (max-width:575px){ .sr-toast{ bottom:90px } }
/* ============================================================
   ORDER TRACKING (/track)
   ============================================================ */
.track-page { background: #f7f9f7; min-height: 60vh; }
.track-title { font-size: 1.5rem; font-weight: 700; color: var(--green-d); margin-bottom: .35rem; }
.track-sub   { font-size: .9rem; color: #6b7280; margin: 0; }

.track-form { max-width: 560px; }
.track-input-wrap {
  position: relative; display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 2px solid #e3e8e3; border-radius: 14px; padding: .35rem .35rem .35rem 2.5rem;
  transition: border-color .15s;
}
.track-input-wrap:focus-within { border-color: var(--green); }
.track-input-wrap > .bi-search { position: absolute; left: .9rem; color: #9aa39a; font-size: 1rem; }
.track-input {
  border: 0; box-shadow: none !important; padding: .55rem .25rem;
  font-size: .95rem; background: transparent; flex: 1; min-width: 0;
}
.btn-track {
  background: var(--green-d); color: #fff; border: 0; border-radius: 10px;
  padding: .55rem 1.25rem; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.btn-track:hover { background: var(--green); color: #fff; }

.track-alert {
  max-width: 560px; background: #fff4e5; border: 1px solid #ffd9a8; color: #8a5a00;
  border-radius: 12px; padding: .8rem 1rem; font-size: .875rem;
}

.track-result { max-width: 900px; }

.track-card {
  background: #fff; border: 1px solid #e8ece8; border-radius: 14px; padding: 1.1rem;
}

.track-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: #fff; border: 1px solid #e8ece8; border-radius: 12px;
  padding: .85rem 1rem; margin-bottom: .6rem;
}
.track-row-main { display: flex; flex-direction: column; flex: 1; min-width: 140px; }
.track-row-main strong { font-size: .9rem; }
.track-row-main small { font-size: .78rem; }

.track-courier {
  display: flex; align-items: center; gap: .6rem;
  background: #eaf6ea; border: 1px solid #cfe8cf; color: var(--green-d);
  border-radius: 12px; padding: .75rem 1rem; font-size: .875rem;
}
.track-courier .bi-truck { font-size: 1.15rem; }

@media (min-width: 768px) {
  .track-title { font-size: 2rem; }
  .track-sub   { font-size: 1rem; }
  .track-input { font-size: 1rem; }
  .track-card  { padding: 1.35rem; }
}