/* ============================================================================
   eStorePoint — main stylesheet (eco design system)
   ============================================================================ */

/* ---- Design tokens (palette derived from the eStorePoint logo) ----------- */
:root {
  /* Greens — anchored on logo green #1D9941 (primary) */
  --green-900:#0a3718;
  --green-800:#0e4e22;
  --green-700:#146e2f;
  --green-600:#1d9941;   /* ← logo green (primary brand) */
  --green-500:#2db452;
  --green-400:#5acd78;
  --green-100:#d6f0de;
  --green-50:#eef8f1;

  /* Blues — from logo blue #2454FF (accent) */
  --blue-800:#123099;
  --blue-700:#1c46d6;
  --blue-600:#2454ff;    /* ← logo blue (accent) */
  --blue-400:#6a86ff;
  --blue-100:#dfe5ff;
  --blue-50:#eef1ff;

  /* Lime — from logo lime #E5FC54 (highlight; use sparingly, as fills not text) */
  --lime:#e5fc54;
  --lime-dark:#b9d400;
  --lime-100:#f4fcd0;

  /* Earth accents (kept subtle) */
  --earth-600:#8a6d3b;
  --earth-500:#b08954;
  --earth-100:#f6efe3;

  --cream:#fbfaf6;
  --white:#ffffff;
  --ink:#1c2a22;
  --muted:#667168;
  --line:#e2ebe4;

  --danger:#d64545;
  --warn:#e0a500;
  --info:#2454ff;

  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 2px 8px rgba(29,153,65,.08);
  --shadow:0 10px 30px rgba(29,153,65,.12);
  --shadow-lg:0 20px 50px rgba(10,55,24,.18);
  /* ---- Type ----------------------------------------------------------------
     One family for everything: Inter.

     Chosen for being unobtrusive — a tall x-height, even colour at small
     sizes, and a strong 800 weight that carries a heading on its own. That
     last part is the point: hierarchy here comes from SIZE and WEIGHT, not
     from swapping in a second typeface. One family is simpler to maintain,
     costs less to load, and keeps headings and body copy in the same voice.

     Inter also ships true tabular numerals (see `.tnum` below), which a shop
     needs — proportional digits make "₹1,299" and "₹1,099" different widths,
     so a column of prices wobbles by a pixel or two per row.
     ------------------------------------------------------------------------ */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Tracking, per role. Heavy sans type sets loose by default, so the larger
     sizes need pulling back or the gaps between letters read as weakness. */
  --tracking-tight:-.02em;    /* h1, h2              */
  --tracking-snug:-.006em;    /* card titles, h3/h4  */
  --tracking-wide:.08em;      /* uppercase labels — the value `.kicker` was
                                 already using, so tokenising it changes
                                 nothing on screen but removes a magic number */
  --tracking-wider:.14em;     /* micro eyebrows      */

  --leading-heading:1.18;
  --leading-body:1.65;
  --nav-h:72px;
}

/* ---- Reset & base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--cream);
  line-height:var(--leading-body);-webkit-font-smoothing:antialiased;font-size:16px;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--green-700);text-decoration:none;}
a:hover{color:var(--green-600);}

/* Headings are the same family as the body — only bolder and tighter.

   The SIZES are deliberately unchanged from the original scale. No heading
   wraps differently than it did before, so everything that was tuned to the
   pixel stays put.

   h1 runs at 800 and everything below at 700. The brief was bold, and doing
   it through weight rather than a second face keeps the whole page in one
   voice. Tracking is pulled IN for the same reason: at display sizes a bold
   sans leaves gaps between letters that read as weakness. */
h1,h2,h3,h4{
  font-weight:700;letter-spacing:var(--tracking-tight);
  line-height:var(--leading-heading);color:var(--green-900);margin:0 0 .5em;
  text-wrap:balance;                 /* Chrome 114+; older engines ignore it */
}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.026em;
  line-height:1.1;}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);line-height:1.15;}
h3{font-size:1.3rem;letter-spacing:var(--tracking-snug);}
h4{font-size:1.0625rem;letter-spacing:var(--tracking-snug);}
h5,h6{font-weight:600;font-size:1rem;letter-spacing:var(--tracking-snug);
  color:var(--green-900);margin:0 0 .5em;}
p{margin:0 0 1em;}
.container{width:min(1200px,92%);margin-inline:auto;}
.section{padding:72px 0;}
.section-sm{padding:48px 0;}
.muted{color:var(--muted);}
.center{text-align:center;}

/* ---- Tabular figures -------------------------------------------------------
   Anywhere two numbers should stack on the same column. Proportional digits
   make "₹1,299" and "₹1,099" different widths, so a column of prices
   staggers by a pixel or two per row — small, but it reads as sloppiness.

   Listed across every surface that renders a rupee figure on purpose: the
   same amount appears in a card, on the product page, in the cart, in the
   checkout summary and in the admin order, and it should be the same width
   in all five. */
.tnum,.price,.money,td.num,th.num,
.pdp-price,.pdp-sticky-price,.ord-item-total,.co-line-price,.done-item-price{
  font-variant-numeric:tabular-nums;
}

/* ---- SVG icons (custom, replace emoji) ------------------------------------ */
.ico-svg{display:inline-block;vertical-align:-.15em;flex:none;}
.feature .ico,.cat-pill .ico{color:var(--green-600);}
.empty .big{color:var(--green-500);line-height:1;}

/* ---- Google sign-in button ------------------------------------------------ */
.btn-google{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  background:#fff;color:#3c4043;border:1px solid #dadce0;font-weight:600;font-size:.95rem;
  padding:.72rem 1rem;border-radius:12px;cursor:pointer;transition:.2s;text-decoration:none;font-family:inherit;}
.btn-google:hover{background:#f8f9fa;border-color:#c6c6c6;box-shadow:0 3px 10px rgba(0,0,0,.08);transform:translateY(-1px);}
.divider-or{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-size:.78rem;margin:1.2rem 0;text-transform:uppercase;letter-spacing:.04em;}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  padding:.8rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;
  font-weight:600;font-size:.95rem;font-family:inherit;transition:.25s transform,.25s box-shadow,.25s background;
  will-change:transform;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--green-600);color:#fff;box-shadow:0 8px 20px rgba(29,153,65,.30);}
.btn-primary:hover{background:var(--green-700);color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(29,153,65,.38);}
.btn-outline{border-color:var(--blue-600);color:var(--blue-700);background:transparent;}
.btn-outline:hover{background:var(--blue-600);color:#fff;}
.btn-light{background:#fff;color:var(--green-800);}
.btn-light:hover{background:var(--green-50);color:var(--green-800);transform:translateY(-2px);}
.btn-sm{padding:.5rem 1rem;font-size:.85rem;}
.btn-block{width:100%;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}

/* ---- Navbar --------------------------------------------------------------- */
.navbar{
  position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s;
}
.navbar.scrolled{box-shadow:var(--shadow-sm);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(1200px,92%);margin-inline:auto;}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.25rem;color:var(--green-800);}
.brand svg{width:30px;height:30px;}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0;}
.nav-links a{color:var(--ink);font-weight:500;position:relative;padding:.3rem 0;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--green-600);transition:width .28s;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-actions{display:flex;align-items:center;gap:1rem;}
.cart-link{position:relative;display:flex;align-items:center;color:var(--green-800);}
.cart-badge{
  position:absolute;top:-8px;right:-10px;background:var(--blue-600);color:#fff;
  font-size:.7rem;font-weight:700;min-width:19px;height:19px;border-radius:999px;
  display:grid;place-items:center;padding:0 4px;transition:transform .25s;
}
.cart-badge.pop{animation:pop .4s ease;}
.nav-toggle{display:none;background:none;border:0;padding:0;line-height:0;font-size:1.6rem;color:var(--green-800);cursor:pointer;}

/* ---- Hero ----------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(1000px 520px at 86% -12%,rgba(36,84,255,.40),transparent 55%),
  radial-gradient(760px 420px at 6% 114%,rgba(229,252,84,.22),transparent 55%),
  linear-gradient(135deg,var(--green-800),var(--green-600));
}
.hero::before{content:"";position:absolute;inset:0;background-image:url("../images/hero-leaf.svg");background-repeat:no-repeat;background-position:right -60px bottom -40px;background-size:520px;opacity:.18;pointer-events:none;}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;padding:84px 0;}
.hero h1{color:#fff;}
.hero p.lead{font-size:1.15rem;max-width:34ch;opacity:.95;}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.16);padding:.4rem .9rem;border-radius:999px;font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1.1rem;}
.hero-visual{position:relative;}
.hero-visual img{border-radius:24px;box-shadow:var(--shadow-lg);}


/* ---- Impact counters ------------------------------------------------------ */
.impact{background:var(--green-900);color:#fff;}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center;}
.impact-item .num{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--green-400);line-height:1;}
.impact-item .label{opacity:.85;font-size:.95rem;margin-top:.4rem;}

/* ---- Section headers ------------------------------------------------------ */
.section-head{text-align:center;max-width:640px;margin:0 auto 2.8rem;}
.section-head .kicker{color:var(--green-600);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;font-size:.8rem;}
.section-head p{color:var(--muted);}

/* ---- Product grid & cards ------------------------------------------------- */
.grid{display:grid;gap:1.6rem;}
.grid-products{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.grid-posts{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
/* Pinned rather than auto-fill. auto-fill re-counts columns as the window
   changes (6 cols at a 1200px container, 5 at 1047px) and 8 categories divide
   cleanly only into 4/2/1, so any auto value could still strand a pill alone
   on the last row. Capped at 790px so the cards keep their ~178px
   proportions instead of stretching, and centered to match .section-head. */
.grid-cats{grid-template-columns:repeat(4,minmax(0,1fr));max-width:790px;margin-inline:auto;}
@media (max-width:820px){.grid-cats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px;}}

.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  border:1px solid var(--line);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--green-50);}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.card:hover .card-media img{transform:scale(1.07);}
.eco-badge{position:absolute;top:.7rem;left:.7rem;background:var(--lime);color:var(--green-900);
  font-size:.72rem;font-weight:600;padding:.32rem .7rem;border-radius:999px;display:flex;align-items:center;gap:.3rem;max-width:90%;}
/* Featured sits bottom-right, not top-right: the eco pill is max-width:90% and
   its copy runs to 44 chars, so sharing the top row made the two collide
   (measured 46px of overlap on a 302px card). Opposite corners cannot overlap
   at any width, and the eco string keeps its full length instead of being
   truncated to make room. The homepage rail renders no feat-badge, so it is
   unaffected either way. */
.feat-badge{position:absolute;bottom:.7rem;right:.7rem;background:var(--earth-500);color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;}
.card-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.card-cat{font-size:.75rem;color:var(--green-600);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.card-title{font-size:1.05rem;margin:0;color:var(--green-900);}
.card-title a{color:inherit;}
.card-title a:hover{color:var(--green-600);}
.card-text{color:var(--muted);font-size:.9rem;margin:0;}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.6rem;}
.price{font-weight:800;color:var(--green-800);font-size:1.15rem;}
.price .old{font-size:.85rem;color:var(--muted);text-decoration:line-through;font-weight:500;margin-left:.35rem;}

/* ---- Category pill -------------------------------------------------------- */
.cat-pill{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1rem;text-align:center;transition:.25s;display:block;color:var(--ink);}
.cat-pill:hover{border-color:var(--green-500);background:var(--green-50);transform:translateY(-4px);}
.cat-pill .ico{font-size:1.8rem;}
.cat-pill .name{font-weight:600;margin-top:.4rem;font-size:.95rem;}

/* ---- Post (blog) card ----------------------------------------------------- */
.post-card .card-media{aspect-ratio:16/10;}
.post-meta{display:flex;gap:.6rem;align-items:center;font-size:.78rem;color:var(--muted);}
.tag{background:var(--blue-100);color:var(--blue-800);font-size:.72rem;padding:.15rem .55rem;border-radius:999px;font-weight:600;text-decoration:none;display:inline-block;transition:.2s;}
/* .tag rendered as a real link — blog category chips on the listing and the
   post page. Lives here, not in post.css, because blog.php links them too. */
a.tag-link:hover{background:var(--blue-200);}
a.tag:hover{background:var(--blue-600);color:#fff;}

/* ---- Feature / value props ------------------------------------------------ */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.3rem;text-align:center;transition:.3s;}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.feature .ico{width:56px;height:56px;margin:0 auto .8rem;border-radius:14px;background:var(--green-100);display:grid;place-items:center;font-size:1.6rem;}
.feature h3{font-size:1.05rem;}
.feature p{color:var(--muted);font-size:.88rem;margin:0;}

/* ---- CTA band ------------------------------------------------------------- */
.cta-band{background:linear-gradient(120deg,var(--green-700),var(--blue-600));color:#fff;border-radius:24px;padding:3rem;text-align:center;position:relative;overflow:hidden;}
.cta-band h2{color:#fff;}
.cta-band p{opacity:.92;max-width:52ch;margin-inline:auto;}

/* ---- Banners / page headers ----------------------------------------------- */
.page-hero{background:linear-gradient(120deg,var(--green-800),var(--green-600));color:#fff;padding:56px 0;}
.page-hero h1{color:#fff;margin-bottom:.3rem;}
.page-hero .crumbs{opacity:.85;font-size:.9rem;}
.page-hero .crumbs a{color:#dff3e6;}
/* The account banner wears the footer's surface — the same fine SVG grain over
   a green base with a blue glow bleeding in from one corner and a lime one
   from the other, plus the two decorative rings — so the signed-in screen
   opens on material rather than a flat gradient.

   Scoped to this class instead of .page-hero on purpose: every other page
   banner stays a plain gradient, and only this one is asked to match the
   footer. The layering (and the overflow clip the rings need) mirrors the
   footer rule further down this file. */
.page-hero-textured{position:relative;isolation:isolate;overflow:hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    radial-gradient(1000px 430px at 106% -10%,rgba(36,84,255,.40),transparent 62%),
    radial-gradient(860px 400px at -12% 112%,rgba(229,252,84,.18),transparent 62%),
    linear-gradient(165deg,#0a3718 0%,#0f5426 52%,#0a3718 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
.page-hero-textured::before,.page-hero-textured::after{content:"";position:absolute;z-index:-1;border-radius:50%;}
.page-hero-textured::before{left:-96px;top:-150px;width:330px;height:330px;border:1.5px solid rgba(229,252,84,.17);}
.page-hero-textured::after{right:-130px;bottom:-190px;width:440px;height:440px;background:rgba(255,255,255,.04);}

/* ── Breadcrumb band (shared) ────────────────────────────────────────────
   Used by the article, product, cart and checkout pages. These live here
   rather than in post.css because product.php loads only style.css and
   product.css — leaving them in the per-page article sheet meant that page's
   breadcrumb rendered as unstyled inline text. */
.post-crumb-band{padding:34px 0 0;}
.post-crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.85rem;}
.post-crumbs a{color:var(--muted);}
.crumb-current{color:var(--ink);font-weight:500;max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Standfirst under a page-hero <h1>. Shared by Our Mission and Contact, which
   both used to carry the same three declarations inline. */
.page-hero-lead{max-width:60ch;margin:.7rem 0 0;opacity:.92;line-height:1.65;}

/* ── Photo banner behind a page hero (Privacy, Terms, FAQ, About, Blog) ──
   The image sits behind the copy; ::after keeps a scrim over it so the white
   text never lands on a bright patch. The container is lifted with z-index
   because it must paint above an absolutely positioned <img>. */
.page-hero-photo{position:relative;overflow:hidden;}
.page-hero-photo > .page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.page-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(11,45,27,.90),rgba(29,153,65,.68));}
.page-hero-photo > .container{position:relative;z-index:1;}

/* ── Shop hero — the site's most prominent banner ─────────────────────────
   A flat photo would sit dead here, so this one is layered: brand gradient
   base → photo (slow Ken Burns drift) → colour scrim → content, with floating
   leaf accents and a glass strip of live facts on top. It collapses back to
   the plain green header when no image is configured.
   Negative z-indexes are safe because .shop-hero isolates its own stacking
   context — they paint above its background but below the copy. */
.shop-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:72px 0 60px;
  background:linear-gradient(104deg,#0b2e1c 0%,#14663a 46%,#1d9941 100%);}
.shop-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(115% 130% at 88% 8%,rgba(36,84,255,.34),transparent 58%);}
.shop-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;
  transform:scale(1.08);animation:shopKen 26s ease-in-out infinite alternate;}
@keyframes shopKen{from{transform:scale(1.08) translate3d(0,0,0);}to{transform:scale(1.18) translate3d(-2.5%,-1.5%,0);}}
.shop-hero.has-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,32,20,.94) 0%,rgba(13,58,33,.82) 44%,rgba(29,153,65,.52) 100%);}
.shop-hero .container{position:relative;z-index:2;}
.shop-hero h1{color:#fff;margin-bottom:.35rem;font-size:clamp(2.1rem,4.6vw,3.3rem);letter-spacing:-.02em;line-height:1.08;}
.shop-hero .crumbs{opacity:.85;font-size:.9rem;margin-bottom:.7rem;}
.shop-hero .crumbs a{color:#dff3e6;}
.shop-hero-lead{max-width:58ch;opacity:.94;font-size:1.02rem;}

/* Floating leaves — pinned right so they never sit behind the copy. */
.shop-hero .sh-leaf{position:absolute;z-index:0;color:var(--lime);opacity:.13;pointer-events:none;display:block;}
.shop-hero .sh-leaf.a{right:7%;top:14%;transform:rotate(-16deg);animation:float 7s ease-in-out infinite;}
.shop-hero .sh-leaf.b{right:22%;bottom:16%;transform:rotate(24deg);animation:float 8.5s ease-in-out infinite reverse;}

/* Glass strip of live facts */
.shop-hero-stats{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.7rem;}
.shop-hero-stats span{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:999px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.86rem;color:#eafff2;white-space:nowrap;}
.shop-hero-stats b{color:var(--lime);font-weight:800;font-size:.95rem;}

@media (max-width:900px){
  .shop-hero{padding:56px 0 46px;}
  .shop-hero .sh-leaf{display:none;}
}
@media (max-width:560px){
  .shop-hero-stats{gap:.45rem;}
  .shop-hero-stats span{font-size:.76rem;padding:.45rem .75rem;}
  .shop-hero-stats b{font-size:.84rem;}
}
@media (prefers-reduced-motion:reduce){
  .shop-hero-bg{animation:none;transform:scale(1.02);}
  .shop-hero .sh-leaf{animation:none;}
}

/* Our Mission: text + story card. Fixed at the markup level (was an inline
   style, which no media query could ever override) so it stacks on phones. */
.about-why{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.about-story-img{width:100%;height:300px;object-fit:cover;display:block;border-radius:var(--radius);box-shadow:var(--shadow-lg);margin-bottom:1.2rem;}

/* Category card — a photo and the plain icon occupy the same footprint, so
   the grid never goes ragged while categories are being filled in. */
.cat-pill .cat-media{height:76px;display:flex;align-items:center;justify-content:center;}
.cat-pill .cat-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;display:block;border:3px solid #fff;box-shadow:0 6px 18px rgba(16,45,28,.16);transition:transform .25s;}
.cat-pill:hover .cat-photo{transform:scale(1.06);}
/* Soft gradient card for the homepage category grid. Scoped via .grid-cats
   because post.php reuses .cat-pill for related posts, which stay flat white.
   The hover rule is written at (0,3,0) so it outranks the generic
   .cat-pill:hover background rather than being overridden by it.

   The section sits on var(--green-50) = #eef8f1. Two near-white values cannot
   separate by tint — an end stop of #e9f6ee measured a 1.035 contrast ratio
   against it and dissolved. So the tint runs DEEPER than the section instead,
   starting from pure white: the card reads as an object with direction, and
   the shadow supplies the float. Hover deepens further, where the lift and
   green border read as "active" rather than blending. */
.grid-cats .cat-pill{
  background:linear-gradient(150deg,#ffffff 0%,#f2faf6 38%,#dcefe4 100%);
  border-color:rgba(29,153,65,.22);
  box-shadow:0 14px 28px -16px rgba(16,45,28,.28),0 3px 8px rgba(16,45,28,.05);
}
.grid-cats .cat-pill:hover{
  background:linear-gradient(150deg,#ffffff 0%,#e9f6ee 32%,#c9e7d4 100%);
  border-color:var(--green-500);
  box-shadow:0 20px 36px -16px rgba(16,45,28,.34);
}
/* An icon-only category (one with no photo uploaded yet) keeps the exact
   76px circular footprint of the photo pills, so a missing image reads as an
   empty slot in the same design rather than a card that shrank. */
.cat-pill:not(.has-photo) .cat-media .ico{
  width:76px;height:76px;border-radius:50%;background:var(--green-50);
  border:3px solid #fff;box-shadow:0 6px 18px rgba(16,45,28,.16);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s;}
.cat-pill:hover:not(.has-photo) .cat-media .ico{transform:scale(1.06);}
@media (max-width:900px){.about-why{grid-template-columns:minmax(0,1fr);gap:2rem;}}


/* ---- Shop toolbar --------------------------------------------------------- */
/* Visually hidden, still announced by screen readers. For labels whose purpose
   the surrounding layout already makes obvious on screen — a sort <select> next
   to a product grid — so the visible text would be redundant. Without this the
   label simply renders: on the shop toolbar it was adding 24px + 4.8px margin of
   stray text above the dropdown. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;}

.toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:2rem;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.85rem;font-weight:500;color:var(--ink);transition:.2s;}
.chip:hover{border-color:var(--green-500);}
/* Weight + lift added so the selected chip is unmistakable against the white
   siblings — background colour alone flattened out at small sizes. */
.chip.active{background:var(--green-600);color:#fff;border-color:var(--green-600);font-weight:700;box-shadow:0 4px 12px rgba(29,153,65,.30);}
select,input,textarea{
  font-family:inherit;font-size:.95rem;padding:.6rem .8rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;color:var(--ink);width:100%;transition:border-color .2s,box-shadow .2s;
}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(36,84,255,.18);}
label{font-weight:500;font-size:.9rem;display:block;margin-bottom:.3rem;color:var(--green-900);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.field{margin-bottom:1rem;}

/* ---- Product detail ------------------------------------------------------- */
.product-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start;}
.product-detail .gallery{border-radius:var(--radius);overflow:hidden;background:var(--green-50);border:1px solid var(--line);}
.product-detail .gallery img{width:100%;object-fit:cover;}

/* ---- Product image gallery ------------------------------------------------ */
.gal-main{position:relative;overflow:hidden;background:var(--green-50);}
.gal-main>img{display:block;aspect-ratio:4/3;transition:opacity .22s ease,transform .5s ease;}
.gal-main>img.is-fading{opacity:0;}
.gal-main:hover>img{transform:scale(1.03);}
.gal-count{position:absolute;top:.8rem;right:.8rem;background:rgba(10,55,24,.72);color:#fff;
  font-size:.76rem;font-weight:600;padding:.28rem .6rem;border-radius:999px;letter-spacing:.03em;
  backdrop-filter:blur(4px);pointer-events:none;}
.gal-count b{font-weight:700;}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);color:var(--green-800);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(10,55,24,.18);opacity:0;transition:opacity .2s,background .2s,transform .2s;}
.gal-prev{left:.8rem;} .gal-next{right:.8rem;}
.gal-main:hover .gal-nav,.gal-nav:focus-visible{opacity:1;}
.gal-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
.gal-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.5rem;
  padding:.6rem;background:#fff;border-top:1px solid var(--line);}
.gal-thumb{position:relative;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;
  background:var(--green-50);cursor:pointer;aspect-ratio:4/3;transition:border-color .2s,transform .2s;}
.gal-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.gal-thumb:hover{border-color:var(--green-400);}
.gal-thumb:hover img{transform:scale(1.06);}
.gal-thumb.is-active{border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-100);}
.gal-thumb:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.qty button{width:40px;height:42px;border:0;background:#fff;font-size:1.2rem;cursor:pointer;color:var(--green-800);}
.qty button:hover{background:var(--green-50);}
.qty input{width:56px;border:0;text-align:center;font-weight:700;}
.spec{border-top:1px solid var(--line);padding:.7rem 0;display:flex;gap:1rem;}
.spec b{min-width:120px;color:var(--green-800);}

/* ---- Cart & tables -------------------------------------------------------- */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.table th,.table td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;}
.table th{background:var(--green-50);color:var(--green-800);font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;}
.table tr:last-child td{border-bottom:0;}
.cart-item-img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--green-50);}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);position:sticky;top:calc(var(--nav-h) + 1rem);}
/* The gap keeps a long item name from running straight into its price when
   the row has no slack left to space-between. */
.summary .row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.45rem 0;}
.summary .row>span:first-child{min-width:0;}
/* [hidden] alone loses to .summary .row{display:flex}, so the COD row would
   stay visible while "Pay Online" is selected. */
.summary .row[hidden]{display:none;}
.summary .total{border-top:2px solid var(--line);margin-top:.6rem;padding-top:.8rem;font-size:1.2rem;font-weight:800;color:var(--green-800);}

/* ---- Checkout: grid + payment method picker -------------------------------- */
/* minmax(0,…) on the form column so long product names cannot widen the grid
   and push the summary off-screen. */
.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2rem;align-items:start;}
/* minmax(0,1fr) is what lets the column shrink below the table's min-content
   width; a bare 1fr refuses to, and the table then widens the whole page. */
@media (max-width:900px){.checkout-grid{grid-template-columns:minmax(0,1fr);}}

.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2rem;align-items:start;}
@media (max-width:900px){.cart-layout{grid-template-columns:minmax(0,1fr);}}
@media (max-width:640px){
  /* A long product name in the breadcrumb is ellipsised on a desktop; on a
     phone it should wrap instead of being cut mid-word. */
  .crumb-current{max-width:100%;white-space:normal;}
}

/* The badge strip gets its own row. Inline (beside the text) it steals ~420px
   and crushes the description to 68px / 7 lines; below the text the wording
   always keeps the full column, and the badges still read as one group. */
.pay-methods{border:0;padding:0;margin:0;display:grid;gap:.7rem;}
.pay-method{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:.25rem .85rem;align-items:start;padding:1rem 1.1rem;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s;}
.pay-method:hover{border-color:var(--green-300);background:var(--green-50);}
.pay-method input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.pay-method-body{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:.18rem;min-width:0;}
.pay-method-title{font-weight:800;color:var(--green-800);line-height:1.2;}
.pay-method-desc{font-size:.84rem;color:#64748b;line-height:1.4;}
.pay-method-note{font-size:.78rem;font-weight:700;}
.pay-method-icons{grid-column:2;grid-row:2;display:flex;align-items:center;margin-top:.3rem;}
.pay-method::before{content:"";grid-column:1;grid-row:1;width:20px;height:20px;border-radius:50%;border:2px solid #cbd5e1;background:#fff;box-shadow:inset 0 0 0 3px #fff;transition:border-color .18s,background .18s;}
.pay-method.is-active{border-color:var(--green-500);background:var(--green-50);box-shadow:0 0 0 3px rgba(29,153,65,.13);}
.pay-method.is-active::before{border-color:var(--green-500);background:var(--green-500);}
/* A disabled online option still needs to read as a real choice, not a ghost. */
.pay-method input[type=radio]:disabled ~ .pay-method-body{opacity:.6;}

/* ---- Payment icon strip ----------------------------------------------------
   Always ONE line of badges — they shrink to fit the container rather than
   wrapping into rows. A "we accept" strip reads as a single reassuring row,
   and nothing is hidden behind a scroll.

   Badges are flex:1 1 0 capped at their designed 46px, so they are full size
   wherever there is room and only get smaller when the container is tight.
   min-width:30px is the floor: it is what makes the LABEL wrap onto its own
   line instead of the badges ever becoming unreadably narrow, because
   .pay-strip has flex-wrap:wrap and the badge row's min-content
   (8x30 + 7x5.6 = 280px) no longer fits beside it. */
.pay-strip{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;width:100%;}
.pay-strip-label{flex:none;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;}
/* nowrap is the whole point — the row itself never breaks. */
.pay-strip-badges{display:flex;flex-wrap:nowrap;gap:.35rem;align-items:center;min-width:0;}
/* aspect-ratio keeps the SVG's proportions as the badge narrows; without it
   the box would stay 30px tall and the art would letterbox inside it. */
.pay-badge{flex:1 1 0;min-width:30px;max-width:46px;aspect-ratio:48/30;height:auto;
  padding:0 2px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:6px;}
.pay-badge svg{width:100%;height:100%;display:block;}
.pay-strip.on-dark .pay-strip-label{color:#94a3b8;}
.pay-strip.on-dark .pay-badge{background:#fff;}

/* ---- Blog / post ---------------------------------------------------------- */
.post-body{background:#fff;border-radius:var(--radius);padding:2.2rem;box-shadow:var(--shadow-sm);border:1px solid var(--line);}
.post-body h2{margin-top:1.6em;font-size:1.5rem;}
.post-body p{font-size:1.05rem;color:#33463b;}
.post-cover{border-radius:var(--radius);overflow:hidden;margin-bottom:2rem;box-shadow:var(--shadow);}
.comment{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line);}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--green-600);color:#fff;display:grid;place-items:center;font-weight:700;flex-shrink:0;}

/* ---- Alerts / flash ------------------------------------------------------- */
.alert{padding:.9rem 1.2rem;border-radius:var(--radius-sm);margin-bottom:1.2rem;font-weight:500;border:1px solid transparent;}
.alert-success{background:var(--green-100);color:var(--green-800);border-color:var(--green-400);}
.alert-error{background:#fdeaea;color:#9b2c2c;border-color:#f3b4b4;}
.alert-info{background:#e7f1fc;color:#1f5fa5;border-color:#b9d6f5;}

/* ---- Auth cards ----------------------------------------------------------- */
.auth-wrap{max-width:440px;margin:3rem auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem;box-shadow:var(--shadow);}
.auth-wrap h1{font-size:1.6rem;text-align:center;}

/* ---- Public auth pages (login / register) --------------------------------
   A branded panel on the left, the form on the right. The panel carries the
   <h1>, the form an <h2>, so heading order matches reading order.           */
.auth-page{max-width:1020px;margin:2.5rem auto;background:#fff;border:1px solid var(--line);
  border-radius:24px;overflow:hidden;box-shadow:0 26px 60px rgba(10,55,24,.14);
  display:grid;grid-template-columns:1.03fr .97fr;min-height:590px;}

.auth-aside{position:relative;isolation:isolate;overflow:hidden;padding:3rem 2.7rem;color:#fff;
  display:flex;flex-direction:column;gap:1.15rem;
  background:
    radial-gradient(720px 420px at 112% -12%,rgba(36,84,255,.55),transparent 60%),
    radial-gradient(560px 380px at -14% 114%,rgba(229,252,84,.30),transparent 60%),
    linear-gradient(150deg,#0e4e22,#1d9941 72%);}
.auth-aside::before,.auth-aside::after{content:"";position:absolute;z-index:-1;border-radius:50%;}
.auth-aside::before{left:-52px;top:-58px;width:190px;height:190px;border:1.5px solid rgba(229,252,84,.4);}
.auth-aside::after{right:-76px;bottom:-84px;width:300px;height:300px;background:rgba(255,255,255,.07);}
.auth-aside>*{position:relative;}

.auth-eyebrow{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
  padding:.35rem .85rem;border-radius:999px;font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;}
.auth-aside h1{font-size:2.15rem;line-height:1.14;margin:.15rem 0 0;color:#fff;letter-spacing:-.01em;}
.auth-aside .lead{font-size:1rem;max-width:33ch;margin:0;opacity:.92;}

.auth-perks{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.95rem;}
.auth-perks li{display:flex;gap:.8rem;align-items:flex-start;}
.auth-perks .pk{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);color:var(--lime);}
.auth-perks .pt{display:block;font-weight:600;font-size:.94rem;line-height:1.3;}
.auth-perks .px{display:block;font-size:.85rem;opacity:.82;line-height:1.4;margin-top:.1rem;}

.auth-trust{margin-top:auto;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;gap:.6rem;font-size:.86rem;opacity:.9;margin-bottom:0;}

.auth-panel{padding:3rem 2.8rem;display:flex;flex-direction:column;justify-content:center;}
.auth-panel h2{font-size:1.85rem;margin:0 0 .4rem;letter-spacing:-.01em;}
.auth-panel .sub{color:var(--muted);margin:0 0 1.5rem;font-size:.96rem;}
.auth-panel .divider-or{margin:1.3rem 0;}
.auth-panel .switch{margin-top:1.5rem;text-align:center;font-size:.9rem;color:var(--muted);}
.auth-panel .switch a b{color:var(--green-700);}

/* Reveal the password (custom SVG, no emoji) */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:3rem;}
.pw-toggle{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;
  border-radius:9px;transition:color .2s,background .2s;}
.pw-toggle:hover{color:var(--green-700);background:var(--green-50);}
.pw-toggle .eye-off{display:none;}
.pw-toggle.is-on .eye-on{display:none;}
.pw-toggle.is-on .eye-off{display:block;}

@media (max-width:860px){
  .auth-page{grid-template-columns:1fr;min-height:0;margin:1.4rem auto;border-radius:20px;}
  .auth-aside{padding:2rem 1.5rem 1.7rem;gap:.75rem;}
  .auth-aside h1{font-size:1.55rem;}
  .auth-aside .lead{max-width:none;font-size:.94rem;}
  .auth-perks{display:none;}          /* keep the banner compact — form stays high */
  .auth-trust{margin-top:.4rem;padding-top:.9rem;font-size:.8rem;}
  .auth-panel{padding:1.8rem 1.4rem 2.2rem;}
  .auth-panel h2{font-size:1.5rem;}
}

/* ---- Footer --------------------------------------------------------------- */
/* The footer carries the same layered character as the login page's left panel
   — a green base with a blue glow bleeding in from one corner and a lime one
   from the other — plus a fine SVG grain so the surface reads as material
   rather than a flat swatch.

   The base stays darker than the auth panel: this surface carries a lot of
   small text, links and legal copy, so it needs the contrast. The noise is
   baked into the first background layer at very low opacity; anything stronger
   starts to look dirty rather than textured.

   overflow:hidden is load-bearing — the two decorative rings are deliberately
   larger than the band and bleed past its edges, and without the clip they
   would add real horizontal scroll to every page on the site. */
.footer{position:relative;isolation:isolate;overflow:hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    radial-gradient(1000px 430px at 106% -10%,rgba(36,84,255,.40),transparent 62%),
    radial-gradient(860px 400px at -12% 112%,rgba(229,252,84,.18),transparent 62%),
    linear-gradient(165deg,#0a3718 0%,#0f5426 52%,#0a3718 100%);
  color:#cfe6d7;margin-top:72px;padding:56px 0 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
.footer::before,.footer::after{content:"";position:absolute;z-index:-1;border-radius:50%;}
.footer::before{left:-96px;top:-150px;width:330px;height:330px;border:1.5px solid rgba(229,252,84,.17);}
.footer::after{right:-130px;bottom:-190px;width:440px;height:440px;background:rgba(255,255,255,.04);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;}
.footer h4{color:#fff;font-size:1rem;margin-bottom:.9rem;}
.footer a{color:#cfe6d7;display:block;padding:.22rem 0;font-size:.92rem;}
.footer a:hover{color:#fff;}
.footer .brand{color:#fff;margin-bottom:.6rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.4rem;padding-top:1.4rem;text-align:center;font-size:.85rem;opacity:.8;}

/* ---- Back to top ---------------------------------------------------------- */
.to-top{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:50%;background:var(--green-600);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s;z-index:90;font-size:1.2rem;}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}

/* ---- Toast ---------------------------------------------------------------- */
.toast-wrap{position:fixed;top:84px;right:20px;z-index:200;display:flex;flex-direction:column;gap:.6rem;}
.toast{background:var(--green-800);color:#fff;padding:.8rem 1.2rem;border-radius:var(--radius-sm);box-shadow:var(--shadow);font-weight:500;animation:slideIn .35s ease;}

/* ---- Utilities ------------------------------------------------------------ */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.badge-status{font-size:.75rem;font-weight:700;padding:.25rem .7rem;border-radius:999px;text-transform:capitalize;line-height:1.35;white-space:nowrap;}
.st-pending{background:#fdf3d7;color:#8a6d00;}
.st-rejected,.st-failed{background:#fdeaea;color:#9b2c2c;}
.st-paid,.st-approved{background:var(--green-100);color:var(--green-800);}
.st-failed,.st-spam{background:#fdeaea;color:#9b2c2c;}
.st-shipped{background:#e7f1fc;color:#1f5fa5;}
.st-delivered{background:#e4f7ea;color:#14532d;}
.st-cancelled{background:#eee;color:#5a5a5a;}
.st-returned{background:#efe7fd;color:#5b21b6;}
.st-draft{background:#f4f5f6;color:#4b5563;border:1px solid #e3e6e9;}
/* Sign-in method on the Customers list is an identity fact, not a moderation
   state — it was reusing the order palette (blue "shipped", pale green
   "approved"), which reads as something needing action. Neutral outline.
   #41506a on #f2f5f8 is 7.44:1. */
.st-provider{background:#f2f5f8;color:#41506a;border:1px solid #dde3ea;}
/* Solid "live" variant — the state an editor scans for. Solid fill, white text
   and a status dot so it outranks the pale tints used for informational
   states. #146e2f rather than --green-600: white on #1d9941 measures 3.69:1,
   under the 4.5 AA threshold for text at this size; white on #146e2f is 6.36:1. */
.badge-status.is-live{background:var(--green-700);color:#fff;border-color:var(--green-800);box-shadow:0 2px 7px rgba(20,110,47,.32);padding-left:.62rem;}
.badge-status.is-live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.26);margin-right:.42rem;vertical-align:baseline;}
/* pages.php renders a badge as a <button>; that needs a pointer, unlike the
   plain status labels elsewhere. */
button.badge-status{cursor:pointer;}

/* How an order was paid — COD vs PayU. */
.pay-tag{display:inline-block;margin-top:.25rem;padding:.1rem .42rem;border-radius:5px;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.5;}
.pay-tag-cod{background:#fef3c7;color:#92400e;}
.pay-tag-online{background:#e0e7ff;color:#3730a3;}

/* Orders: return + refund read-outs printed under the status badge. */
.ret-line{font-size:.72rem;font-weight:700;margin-top:.3rem;line-height:1.4;}
.ret-requested{color:#8a6d00;}
.ret-approved{color:var(--green-700);}
.ret-rejected{color:#9b2c2c;}
.ret-refund{color:var(--blue-700,#1f5fa5);}
.ret-sub{font-size:.7rem;line-height:1.45;}
/* Evidence photos the customer attached to a return. Kept small so the
   Status column does not balloon; each opens full-size in a new tab. */
.ret-pics{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem;}
.ret-pic{display:block;width:44px;height:44px;border-radius:7px;overflow:hidden;
  border:1px solid var(--line);background:var(--green-50);flex:none;}
.ret-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s;}
.ret-pic:hover{border-color:var(--green-500);}
.ret-pic:hover img{transform:scale(1.08);}
/* The detail page shows the evidence larger — this is where you actually
   inspect a damage photo, not skim it in a list row. */
.ret-pic-lg{width:82px;height:82px;border-radius:10px;}

/* ---- Admin: order detail (order_view.php) --------------------------------- */
/* Two columns on a wide screen: the record on the left, the actions on the
   right so a status change is always in view while reading the order. */
.ord-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.2rem;align-items:start;}
.ord-detail-main,.ord-detail-side{display:flex;flex-direction:column;gap:1.2rem;min-width:0;}
@media (max-width:1000px){ .ord-detail{grid-template-columns:minmax(0,1fr);} }

.ord-items{display:flex;flex-direction:column;}
.ord-item{display:flex;align-items:center;gap:.8rem;padding:.65rem 0;border-bottom:1px dashed var(--line);}
.ord-item:last-child{border-bottom:0;}
.ord-item-img{width:46px;height:46px;border-radius:9px;overflow:hidden;flex:none;background:var(--green-50);
  display:grid;place-items:center;color:var(--green-700);}
.ord-item-img img{width:100%;height:100%;object-fit:cover;display:block;}
.ord-item-img svg{width:20px;height:20px;}
.ord-item-body{flex:1;min-width:0;}
.ord-item-name{font-size:.9rem;font-weight:600;line-height:1.35;}
.ord-item-name a{color:var(--ink);}
.ord-item-name a:hover{color:var(--green-700);}
.ord-item-total{font-weight:700;white-space:nowrap;font-size:.9rem;}

.ord-totals{margin-top:.9rem;padding-top:.8rem;border-top:2px solid var(--line);
  display:flex;flex-direction:column;gap:.35rem;font-size:.88rem;}
.ord-totals>div{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);}
.ord-totals-grand{padding-top:.5rem;margin-top:.2rem;border-top:1px solid var(--line);
  font-size:1.02rem;font-weight:800;color:var(--ink)!important;}

.ord-cust{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;font-size:.9rem;line-height:1.55;}
.ord-cust a{color:var(--green-700);word-break:break-all;}

/* Orders: the Actions column stacks status / return / refund controls. */
.ord-act{display:flex;flex-direction:column;gap:.55rem;min-width:190px;}
.ord-act-row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;}
.ord-act-box{display:flex;flex-direction:column;gap:.5rem;padding:.55rem;
  border:1px dashed var(--line);border-radius:8px;background:rgba(0,0,0,.015);}
.ord-note{width:100%;padding:.4rem .55rem;font-size:.78rem;border:1px solid var(--line);
  border-radius:8px;background:#fff;}
.ord-note:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(45,180,82,.12);}
/* Shipment details: the courier + tracking pair revealed by "Shipped".
   display:flex would otherwise win over the UA's [hidden]{display:none},
   so the hidden state is re-stated explicitly here. */
.ord-ship{flex:0 0 100%;display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem;
  padding-top:.45rem;border-top:1px dashed var(--line);}
.ord-ship[hidden]{display:none;}
.ord-track-echo{font-size:.7rem;color:#7a8496;word-break:break-all;}

/* ---- Admin: customers list ------------------------------------------------ */
.u-cell{display:flex;align-items:center;gap:.7rem;min-width:0;}
.u-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;background:var(--green-100);}
.u-av-fb{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--green-100);color:var(--green-800);font-weight:700;font-size:.95rem;}

/* ---- Admin layout --------------------------------------------------------- */
.admin-body{display:grid;grid-template-columns:230px 1fr;min-height:100vh;background:#f4f7f5;}
/* Compact item spacing so the full menu fits a short window; overflow-y:auto is
   the safety net — on very short screens the rail scrolls instead of pushing
   Logout (and everything after it) off the bottom. */
.admin-side{background:var(--green-900);color:#cfe6d7;padding:.9rem .8rem;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(207,230,215,.35) transparent;}
.admin-side .brand{color:#fff;margin-bottom:.9rem;padding:0 .4rem;}
.admin-side a{color:#cfe6d7;display:flex;align-items:center;gap:.55rem;padding:.45rem .7rem;border-radius:10px;font-size:.9rem;transition:.2s;}
.admin-side a:hover,.admin-side a.active{background:var(--green-800);color:#fff;}
.admin-main{padding:2rem 2.4rem;}
.admin-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.8rem;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:2rem;}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow-sm);}
.stat .n{font-size:2rem;font-weight:800;color:var(--green-700);}
.stat .l{color:var(--muted);font-size:.85rem;}

/* ---- Customer account area ------------------------------------------------ */
.page-hero-sm{padding:44px 0;}
.acc-hero{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;}
.acc-hero-txt{min-width:0;}
.acc-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;opacity:.78;margin:0 0 .2rem;}
.acc-hero h1{margin:0;color:#fff;}
.acc-hero-sub{margin:.25rem 0 0;font-size:.92rem;opacity:.9;word-break:break-all;}
.acc-hero-cta{margin-left:auto;}

/* Default avatar sits on white cards, so it is tinted green with dark text;
   only the hero version is white-on-green. */
.acc-av{position:relative;display:block;overflow:hidden;border-radius:50%;flex:none;
  background:var(--green-100);color:var(--green-800);font-weight:800;line-height:1;}
.acc-av-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.acc-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.acc-hero .acc-av{background:rgba(255,255,255,.2);color:#fff;
  border:3px solid rgba(255,255,255,.55);box-shadow:0 8px 22px rgba(0,0,0,.18);}

.acc-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:2rem;align-items:start;}
.acc-side{position:sticky;top:calc(var(--nav-h) + 1rem);display:flex;flex-direction:column;gap:1.1rem;min-width:0;}
.acc-main{min-width:0;display:flex;flex-direction:column;gap:1.1rem;}

.acc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.5rem;}
.acc-card h3{margin:0 0 .9rem;font-size:1rem;}
.acc-card-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem;}
.acc-card-head h3{margin:0;}
.acc-more{font-size:.85rem;font-weight:600;color:var(--green-600);}
.acc-more:hover{text-decoration:underline;}
.acc-card-wide{max-width:760px;}

.acc-usercard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;padding:1.4rem 1.2rem;}
.acc-usercard-txt{min-width:0;max-width:100%;}
.acc-usercard strong{display:block;font-size:1.02rem;}
.acc-mail{display:block;font-size:.8rem;color:var(--muted);word-break:break-all;}

.acc-nav{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.5rem;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.15rem;}
.acc-nav a{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:10px;color:var(--ink);
  font-size:.93rem;font-weight:500;transition:background .2s,color .2s,transform .2s,box-shadow .2s;}
.acc-nav a svg{flex:none;color:var(--green-600);transition:color .2s;}
.acc-nav a:hover{background:var(--green-100);color:var(--green-800);transform:translateX(3px);}
.acc-nav a:hover svg{color:var(--green-700);}
.acc-nav a.active{background:var(--green-600);color:#fff;box-shadow:0 8px 18px rgba(29,153,65,.25);transform:none;}
.acc-nav a.active svg{color:#fff;}
.acc-count{margin-left:auto;flex:none;background:var(--green-100);color:var(--green-800);font-size:.72rem;font-weight:800;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;line-height:1;}
.acc-count.txt{height:auto;padding:.2rem .55rem;}
.acc-count.warn{background:#fdf3d7;color:#8a6d00;}
.acc-nav a.active .acc-count{background:rgba(255,255,255,.22);color:#fff;}
.acc-nav a.active .acc-count.warn{background:#fff;color:#8a6d00;}
.acc-nav-foot{margin-top:auto;}
.acc-nav-foot a.acc-danger{color:#9b2c2c;}
.acc-nav-foot a.acc-danger svg{color:#9b2c2c;}
.acc-nav-foot a.acc-danger:hover{background:#fdeaea;color:#9b2c2c;transform:none;}

.acc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.acc-head h2{margin:0 0 .15rem;}
.acc-head .muted{margin:0;}
.acc-stats{margin-bottom:0;grid-template-columns:repeat(4,minmax(0,1fr));}
.acc-stats .stat{min-width:0;}
.acc-stats .stat .n{font-size:1.7rem;}
.acc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;align-items:start;}
.acc-two > *{min-width:0;}

.acc-mini-empty{text-align:center;padding:1.2rem .5rem;color:var(--muted);}
.acc-mini-empty svg{color:var(--green-500);line-height:1;}
.acc-mini-empty p{margin:.7rem 0 .9rem;font-size:.9rem;line-height:1.6;}
.acc-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;
  font-size:.9rem;border-bottom:1px dashed var(--line);}
.acc-row:last-child{border-bottom:0;}
.acc-row > span:first-child{color:var(--muted);}
.acc-row.acc-total{font-size:1.05rem;}
.acc-row.acc-total strong{color:var(--green-800);}
.acc-note{font-size:.82rem;margin:.6rem 0 0;line-height:1.6;}
/* Cancel / return forms shown under the progress timeline. */
.acc-actions{margin-top:1.1rem;padding-top:1.1rem;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;}
.acc-actions .field{width:100%;}
.acc-addr{font-style:normal;font-size:.92rem;line-height:1.75;color:var(--ink);margin:0;}
.acc-addr-lg{font-size:1rem;line-height:1.85;}
.acc-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;}

.acc-chips{margin:0;}
.acc-table{overflow-x:auto;border:1px solid var(--line);border-radius:10px;}
.acc-items{width:100%;border-collapse:collapse;font-size:.9rem;min-width:440px;}
.acc-items th{text-align:left;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:.7rem .9rem;background:#f7faf8;border-bottom:1px solid var(--line);}
.acc-items td{padding:.75rem .9rem;border-bottom:1px solid var(--line);}
.acc-items tbody tr:last-child td{border-bottom:0;}
.acc-items tfoot td{padding:.8rem .9rem;background:#f7faf8;font-weight:600;border-top:1px solid var(--line);}
.acc-items .r{text-align:right;}
.acc-items a{color:var(--green-700);font-weight:600;}

.acc-steps{list-style:none;display:flex;margin:0;padding:0;}
.acc-steps li{flex:1;position:relative;text-align:center;font-size:.76rem;color:var(--muted);}
.acc-steps li::after{content:"";position:absolute;top:7px;left:-50%;width:100%;height:3px;background:var(--line);}
.acc-steps li:first-child::after{display:none;}
.acc-steps .dot{position:relative;z-index:1;display:block;width:16px;height:16px;border-radius:50%;
  background:#dbe5df;margin:0 auto .5rem;box-shadow:0 0 0 4px #fff;}
.acc-steps li.done::after{background:var(--green-600);}
.acc-steps li.done .dot{background:var(--green-600);box-shadow:0 0 0 4px #fff,0 0 0 9px rgba(29,153,65,.14);}
.acc-steps li.done span:last-child{color:var(--green-800);font-weight:700;}
.acc-steps li.fail .dot{background:#c0392b;}
.acc-steps li.fail span:last-child{color:#9b2c2c;font-weight:700;}

/* Shipment card under the progress steps: courier + a copyable tracking no. */
.acc-track{display:flex;align-items:center;gap:.8rem;margin-top:1rem;padding:.75rem .9rem;
  border:1px solid rgba(29,153,65,.22);border-radius:12px;
  background:linear-gradient(135deg,rgba(29,153,65,.06),rgba(36,84,255,.04));}
.acc-track-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-600);color:#fff;}
.acc-track-ic svg{width:19px;height:19px;}
.acc-track-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1;font-size:.85rem;}
.acc-track-txt strong{color:var(--green-800);}
.acc-track-txt span{color:var(--muted);font-size:.8rem;}
.acc-track-txt code{background:rgba(0,0,0,.05);padding:.12rem .4rem;border-radius:6px;
  font-size:.78rem;color:var(--ink);user-select:all;}

/* Required marker on a label — matches the form's validation, which refuses
   to submit without a reason. */
.req{color:#c0392b;font-weight:700;}

/* Photo picker on the return form: previews the chosen files straight away
   via object URLs, so nothing is uploaded until the form is submitted. */
.acc-thumbs{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.55rem;}
.acc-thumbs[hidden]{display:none;}
.acc-thumb{width:62px;height:62px;border-radius:9px;overflow:hidden;border:1px solid var(--line);
  background:var(--green-50);display:block;flex:none;}
.acc-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
a.acc-thumb{position:relative;}
a.acc-thumb::after{content:"";position:absolute;inset:0;background:rgba(15,23,42,.42);opacity:0;transition:opacity .2s;}
a.acc-thumb:hover::after{opacity:1;}

/* The photos the customer already attached, echoed back on the order. */
.acc-ret-pics{margin-top:.8rem;}
.acc-ret-pics-h{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.45rem;}

.acc-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.2rem;align-items:start;}
.acc-sidecol{display:flex;flex-direction:column;gap:1.2rem;min-width:0;}
.acc-back{display:inline-block;font-size:.85rem;font-weight:600;color:var(--green-700);margin-bottom:.35rem;}
.acc-back:hover{text-decoration:underline;}

.acc-review-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}
.acc-review-head{display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.acc-review-body{font-size:.93rem;line-height:1.75;color:var(--ink);margin:.8rem 0 0;}
.acc-review-foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.83rem;
  margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--line);}
.acc-review-foot a{color:var(--green-700);font-weight:600;}

.btn-light{background:#fff;color:var(--green-800);box-shadow:0 8px 20px rgba(0,0,0,.16);}
.btn-light:hover{background:var(--lime);color:var(--green-900);}
/* Below 1200px the main column is too narrow for a 4-up stat row and a
   side-by-side order detail — stack them instead of squeezing the table. */
@media (max-width:1200px){
  .acc-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .acc-detail{grid-template-columns:1fr;}
}
@media (max-width:960px){
  .acc-layout{grid-template-columns:1fr;}
  .acc-side{position:relative;top:0;}
  .acc-two,.acc-detail{grid-template-columns:1fr;}
  .acc-hero-cta{margin-left:0;}
}
@media (max-width:640px){
  .acc-hero{flex-direction:column;text-align:center;align-items:center;}
  .acc-hero-cta{margin-left:0;width:100%;}
  .acc-hero-cta .btn{width:100%;}
  .acc-nav-foot{margin-top:0;}
  .acc-card{padding:1.2rem;}
  .acc-steps li{font-size:.66rem;}
  .acc-head{align-items:flex-start;}
}

.admin-table-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:auto;border:1px solid var(--line);}

/* ---- Admin product gallery editor --------------------------------------- */
.gal-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.7rem;margin:.2rem 0 .7rem;}
.gal-admin-item{background:var(--green-50);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.5rem;display:flex;flex-direction:column;gap:.45rem;transition:border-color .2s;}
.gal-admin-item:hover{border-color:var(--green-400);}
.gal-admin-img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#fff;}
.gal-admin-img img{width:100%;height:100%;object-fit:cover;display:block;}
.gal-admin-ord{display:flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--muted);}
.gal-admin-ord input{width:100%;min-width:0;padding:.28rem .4rem;font-size:.82rem;text-align:center;
  border:1px solid var(--line);border-radius:8px;background:#fff;}
.gal-admin-del{display:flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--danger);cursor:pointer;}
.gal-admin-del input{width:auto;margin:0;accent-color:var(--danger);}

/* ---- Admin category icon preview ---------------------------------------- */
.cat-icon-preview{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:15px;background:var(--green-50);border:1px solid var(--line);color:var(--green-600);}
.cat-icon-preview > span{display:inline-flex;align-items:center;justify-content:center;}

/* ---- Reply composer modal (Messages inbox) ------------------------------ */
.msg-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);}
.msg-modal[hidden]{display:none;}
.msg-modal-card{background:#fff;width:min(680px,100%);max-height:calc(100vh - 3rem);display:flex;flex-direction:column;border-radius:var(--radius);box-shadow:0 24px 60px rgba(15,23,42,.32);overflow:hidden;}
/* The form is the card's only child, so it must carry the column layout
   itself — otherwise head/body/foot never see flex-direction and the footer
   is clipped away below the card instead of staying pinned. */
.msg-modal-card>form{flex:1;display:flex;flex-direction:column;min-height:0;}
.msg-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);}
.msg-modal-head h3{margin:0;font-size:1.02rem;line-height:1.3;}
.msg-modal-x{border:0;background:var(--green-50);border-radius:8px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--green-700);flex:none;}
.msg-modal-x:hover{background:var(--green-100);}
.msg-modal-body{padding:1.3rem;overflow:auto;flex:1 1 auto;min-height:0;}
.msg-modal-label{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin:0 0 .45rem;}
.msg-quote{background:#f6f7f9;border-left:3px solid var(--green-100);border-radius:0 8px 8px 0;padding:.85rem 1rem;margin:0 0 1.1rem;white-space:pre-wrap;font-size:.85rem;color:#475569;max-height:190px;overflow:auto;line-height:1.55;}
.msg-modal-foot{display:flex;justify-content:flex-end;gap:.6rem;padding:.95rem 1.3rem;border-top:1px solid var(--line);background:#fafbfc;}
@media (max-width:520px){.msg-modal{padding:0;}.msg-modal-card{max-height:100vh;height:100%;border-radius:0;}}

/* ---- Rich text editor ----------------------------------------------------- */
.editor-toolbar{display:flex;flex-wrap:wrap;gap:.3rem;background:var(--green-50);border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;padding:.4rem;}
.editor-toolbar button{border:0;background:#fff;border-radius:6px;padding:.35rem .6rem;cursor:pointer;font-size:.9rem;color:var(--green-800);min-width:34px;}
.editor-toolbar button:hover{background:var(--green-100);}
.rte{min-height:260px;padding:1rem;border:1px solid var(--line);border-radius:0 0 var(--radius-sm) var(--radius-sm);background:#fff;overflow:auto;}
.rte:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(36,84,255,.18);}
.rte h2{font-size:1.4rem;}.rte img{border-radius:10px;}

/* ---- Structured built-in page editor (Home / Our Mission) -------------- */
.bp-section{border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem .4rem;margin:0 0 1.2rem;background:#fff;}
.bp-section legend{font-weight:700;font-size:.95rem;padding:0 .5rem;color:var(--green-700);background:var(--green-50);border-radius:6px;}
.bp-section .field:last-child{margin-bottom:.6rem;}
.bp-section label{font-size:.85rem;}
.bp-section textarea{resize:vertical;}
.bp-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1.2rem;}
.bp-nav a{font-size:.78rem;padding:.3rem .65rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);text-decoration:none;}
.bp-nav a:hover{border-color:var(--green-500);color:var(--green-700);background:var(--green-50);}

/* ---- Empty state ---------------------------------------------------------- */
.empty{text-align:center;padding:64px 20px;color:var(--muted);}
.empty .big{font-size:3rem;}

/* ---- Pagination ----------------------------------------------------------- */
.pagination{display:flex;gap:.4rem;justify-content:center;margin-top:2.4rem;}
.pagination a,.pagination span{padding:.5rem .9rem;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);}
.pagination .active{background:var(--green-600);color:#fff;border-color:var(--green-600);}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;text-align:center;padding:64px 0;}
  .hero p.lead{margin-inline:auto;}
  .hero-cta{justify-content:center;}
  .impact-grid{grid-template-columns:repeat(2,1fr);gap:2rem;}
  .features{grid-template-columns:repeat(2,1fr);}
  .product-detail{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .admin-body{grid-template-columns:1fr;}
  .admin-side{position:relative;height:auto;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;}
  .admin-side .brand{margin:0;width:100%;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;background:#fff;gap:0;
    padding:.5rem 0;box-shadow:var(--shadow);transform:translateY(-140%);transition:transform .3s;border-bottom:1px solid var(--line);}
  .nav-links.open{transform:translateY(0);}
  .nav-links li{width:100%;}
  .nav-links a{display:block;padding:.9rem 6%;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .impact-grid{grid-template-columns:1fr 1fr;}
  .features{grid-template-columns:1fr;}
  .section{padding:52px 0;}
  .post-body{padding:1.3rem;}
}

/* ===========================================================================
   SEO — admin panels, score meters, SERP preview, chips
   ======================================================================== */
.seo-card{padding:1.6rem;margin-bottom:1.4rem;}
.seo-h2{font-size:1.05rem;margin:0 0 .3rem;display:flex;align-items:center;gap:.5rem;color:var(--ink);}
.seo-h2 .ico-svg{color:var(--green-600);}
.seo-h2-cta{margin-left:auto;font-size:.78rem;padding:.35rem .8rem;}
.seo-help{font-size:.85rem;margin:.2rem 0 1rem;line-height:1.6;}
.seo-card .field small{display:block;margin-top:.3rem;font-size:.78rem;line-height:1.45;}
.seo-card .field code{background:var(--green-50);padding:.05rem .3rem;border-radius:4px;color:var(--blue-700);}
.seo-actions{display:flex;gap:.7rem;margin:0 0 1.4rem;flex-wrap:wrap;}
.seo-todo{margin:.4rem 0 0;padding-left:1.1rem;font-size:.87rem;color:var(--muted);line-height:1.95;}
.seo-todo b{color:var(--ink);}
.seo-todo code{background:var(--green-50);padding:.1rem .35rem;border-radius:5px;color:var(--blue-700);}
.seo-two{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}

.char-count{font-weight:600;}
.cc-good{color:var(--green-600);} .cc-ok{color:#c98a00;} .cc-bad{color:#d64545;}

.seo-img-preview{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.5rem;display:inline-block;background:var(--green-50);}
.seo-img-preview img{width:120px;height:63px;object-fit:cover;border-radius:6px;display:block;}
.seo-preview-label{display:block;font-weight:600;margin:1rem 0 .4rem;font-size:.9rem;}

/* Google SERP preview */
.serp{border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.1rem;background:#fff;font-family:Arial,Helvetica,sans-serif;}
.serp-url{color:#202124;font-size:.8rem;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.serp-title{color:#1a0dab;font-size:1.15rem;line-height:1.3;margin-bottom:.25rem;}
.serp-desc{color:#4d5156;font-size:.85rem;line-height:1.5;}

/* stats */
.seo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.4rem;}
.seo-stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.25rem;}
.seo-stat-n{font-size:1.7rem;font-weight:800;line-height:1;color:var(--ink);}
.seo-stat span:last-child{font-size:.8rem;color:var(--muted);}

/* shared score colours */
.seo-good{color:var(--green-600);} .seo-ok{color:#c98a00;} .seo-bad{color:#d64545;}

/* filter chips */
.seo-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem;}
.seo-chip{border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-size:.8rem;color:var(--muted);text-decoration:none;transition:.2s;background:#fff;}
.seo-chip b{color:var(--ink);}
.seo-chip:hover{border-color:var(--green-400);color:var(--green-700);}
.seo-chip.active{background:var(--green-600);border-color:var(--green-600);color:#fff;}
.seo-chip.active b{color:#fff;}

/* audit table */
.seo-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line);}
.seo-table td{padding:.75rem .8rem;border-bottom:1px solid var(--line);font-size:.86rem;vertical-align:middle;}
.seo-table tr:last-child td{border-bottom:0;}
.seo-title-link{font-weight:600;color:var(--ink);text-decoration:none;}
.seo-title-link:hover{color:var(--green-700);}

/* score meter */
.seo-score{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;min-width:76px;}
.seo-bar{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden;min-width:34px;}
.seo-bar span{display:block;height:100%;border-radius:99px;background:currentColor;}

/* completeness dots */
.seo-chips-mini{display:flex;gap:.3rem;}
.mini{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;border:1px solid transparent;}
.mini.on{background:var(--green-50);color:var(--green-600);border-color:var(--green-100);}
.mini.off{background:#f4f5f4;color:#bcc4be;border-color:var(--line);}
.mini.warn{background:#fff6e6;color:#c98a00;border-color:#f2dfb0;}

/* SEO metabox inside product/post forms */
.seo-panel{border:1px solid var(--line);border-radius:var(--radius-sm);margin:1.6rem 0 1rem;background:#fbfdfc;}
.seo-panel-head{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;cursor:pointer;font-weight:700;color:var(--ink);font-size:.95rem;user-select:none;}
.seo-panel-head .ico-svg{color:var(--green-600);}
.seo-panel-head .chev{margin-left:auto;transition:transform .25s;color:var(--muted);}
.seo-panel.open .chev{transform:rotate(180deg);}
.seo-panel-body{display:none;padding:0 1.1rem 1.1rem;}
.seo-panel.open .seo-panel-body{display:block;}
.seo-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;padding:.25rem .7rem;border-radius:999px;border:1px solid transparent;}
.seo-badge.seo-good{background:var(--green-50);border-color:var(--green-100);}
.seo-badge.seo-ok{background:#fff6e6;border-color:#f2dfb0;}
.seo-badge.seo-bad{background:#fdeaea;border-color:#f3b4b4;}
.seo-live{display:flex;align-items:center;gap:.8rem;margin:.2rem 0 1rem;}
.seo-checks{list-style:none;margin:0;padding:0;font-size:.85rem;}
.seo-checks li{display:flex;align-items:flex-start;gap:.5rem;padding:.32rem 0;color:var(--muted);line-height:1.5;}
.seo-checks li::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;margin-top:.42rem;}
.seo-checks li.good::before{background:var(--green-500);}
.seo-checks li.ok::before{background:#e8b13c;}
.seo-checks li.bad::before{background:#d64545;}
.seo-checks li.neutral::before{background:#c4ccc6;}
.seo-score-ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;border:4px solid currentColor;flex:none;}

@media (max-width:980px){
  .seo-stats{grid-template-columns:1fr 1fr;}
  .seo-two{grid-template-columns:1fr;}
  .seo-chips-mini{flex-wrap:wrap;}
}
@media (max-width:560px){ .seo-stats{grid-template-columns:1fr;} }

/* ============================================================================
   Essential pages — CMS article, contact, footer legal bar, admin extras
   ========================================================================== */

/* ── CMS page article (Terms, Privacy, FAQ…) ─────────────────────────── */
.container-narrow{max-width:820px;margin-inline:auto;}
.page-lead{font-size:1.06rem;color:var(--muted);margin-bottom:1.6rem;}
.page-body{line-height:1.75;color:var(--ink);font-size:.98rem;animation:pageIn .5s ease both;}
.page-body h2{font-size:1.55rem;margin:2rem 0 .7rem;color:var(--green-800);}
.page-body h3{font-size:1.16rem;margin:1.9rem 0 .55rem;color:var(--ink);position:relative;padding-left:1rem;}
.page-body h3::before{content:"";position:absolute;left:0;top:.32em;width:5px;height:1.05em;border-radius:3px;background:linear-gradient(var(--green-500),var(--lime-dark));}
.page-body p{margin:.7rem 0;color:#3c4a41;}
.page-body ul,.page-body ol{margin:.8rem 0 .8rem 1.2rem;padding-left:.8rem;}
.page-body li{margin:.35rem 0;color:#3c4a41;}
.page-body li::marker{color:var(--green-600);}
.page-body a{color:var(--blue-600);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--blue-100);transition:.2s;}
.page-body a:hover{color:var(--green-600);text-decoration-color:var(--green-400);}
.page-body strong{color:var(--green-800);}
.page-body blockquote{margin:1.2rem 0;padding:.8rem 1.2rem;border-left:4px solid var(--green-500);background:var(--green-50);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--muted);}
.page-body img{max-width:100%;border-radius:var(--radius);margin:.8rem 0;}
.page-body hr{border:none;border-top:1px solid var(--line);margin:1.8rem 0;}
@keyframes pageIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.page-help{display:flex;gap:1rem;align-items:flex-start;margin-top:2.6rem;padding:1.3rem 1.5rem;border-radius:var(--radius);background:var(--green-50);border:1px solid var(--green-100);}
.page-help .ico-svg{color:var(--green-600);flex:none;margin-top:.2rem;}

/* ── Contact page ────────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:2.4rem;align-items:start;}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:2rem;}
.contact-card .field input:focus,.contact-card .field textarea:focus{border-color:var(--green-500);box-shadow:0 0 0 4px rgba(45,180,82,.12);}
.contact-side{display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:96px;}
.contact-info{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}
.contact-row{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.2rem;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.92rem;line-height:1.5;transition:background .2s;}
.contact-row:last-child{border-bottom:0;}
a.contact-row:hover{background:var(--green-50);}
.contact-row:last-child:hover{background:transparent;}
.contact-row strong{color:var(--green-800);font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;}
.ci-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--green-50);color:var(--green-600);flex:none;transition:.25s;}
a.contact-row:hover .ci-ico{background:var(--green-600);color:#fff;transform:translateY(-2px);}
.contact-legal{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;font-size:.88rem;color:var(--muted);}
.contact-legal strong{display:flex;align-items:center;gap:.45rem;color:var(--ink);margin-bottom:.45rem;}
.contact-legal p{margin:.25rem 0;}
.contact-map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);line-height:0;}
.contact-map iframe{width:100%;height:230px;border:0;}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* ── Footer: legal / seller-disclosure bar ───────────────────────────── */
.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;}
.footer-pay{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:center;}
.footer-pay .pay-strip-label{color:#8fb79f;}
.footer-pay .pay-badge{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.22);}
.footer-legal{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:center;align-items:center;border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.2rem;font-size:.8rem;}
.footer-legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;}
.footer-legal-links a{display:inline!important;padding:0 .1rem!important;font-size:.8rem!important;color:#a9cbb6!important;}
.footer-legal-links a:hover{color:#fff!important;text-decoration:underline;text-underline-offset:2px;}
.footer-legal .dot-sep{opacity:.45;padding:0 .3rem;}
.footer-legal-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;opacity:.75;}
@media (max-width:980px){ .footer-legal{flex-direction:column;align-items:center;} }

/* ── Admin: unread-messages badge + sidebar layout ───────────────────── */
.admin-side{display:flex;flex-direction:column;}
.nav-badge{margin-left:auto;background:var(--lime);color:var(--green-900);font-size:.7rem;font-weight:800;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;line-height:1;box-shadow:0 0 0 3px rgba(229,252,84,.15);animation:badgePop .35s ease;}
@keyframes badgePop{0%{transform:scale(.4);opacity:0;}100%{transform:scale(1);opacity:1;}}
/* Reset UA button chrome only. This rule previously read
   `.badge-status{cursor:default;border:0;font:inherit}` — the `font:inherit`
   silently overrode the font-size/weight set at line 541 (equal specificity,
   later source), rendering every status badge in the admin at full size and
   normal weight. Scoped to <button> now, and font-size/weight are preserved. */
button.badge-status{border:0;font-family:inherit;appearance:none;-webkit-appearance:none;}

/* ── Admin Products: compact status pill ──────────────────────────────
   Layout helpers only (.ps-cell/.ps-actions/.ps-eco). The state pill itself
   uses the SHARED .badge-status / .st-* / .is-live system at line 541, so the
   products list is styled identically to Posts, Comments, Reviews and Pages. */
/* Every admin list has an Actions column. In auto table layout a `width` on
   <th> is only a suggestion, so stacked buttons wrap onto separate lines and
   stretch every row — measured at 151px on Products before this. nowrap keeps
   them on one line and lets .admin-table-wrap scroll instead. */
.tbl-actions{white-space:nowrap;}
.tbl-actions .btn{padding:.36rem .7rem;font-size:.8rem;}

/* ── Admin Products: list layout ─────────────────────────────────────
   Column shaping only. The state pill is the SHARED .badge-status / .st-* /
   .is-live system at line 541, so this list now matches Posts, Comments,
   Reviews and Pages exactly.                                               */
.ps-cell{white-space:nowrap;}
/* The eco-impact line is decorative context, not data — full text lives on the
   product page. Left free to wrap it ran 2–4 lines at 112–171px name widths and
   set the row height on its own; clamped to one line the row sizes to the name
   (144px -> 93.6px). */
.ps-eco{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Admin lists: bounded preview cells ────────────────────────────────
   Auto table layout sizes a cell from its own content, so a long comment or
   review sets the row height on its own: measured 270–350px at a 1047px
   window and still 138–165px at 1600px, against 72–94px for lists with no
   free-text column. The min-width is the floor that stops the auto layout
   squeezing this cell to ~120px (leaving it unreadable); the 3-line clamp
   makes row height a property of the ROW rather than of whichever comment
   happens to be longest. Full text lives on the detail / public view.
   min-width works only on a block INSIDE the cell — a td's own min-width is
   not honoured in auto layout, but the cell's min-content is driven by it. */
.tbl-clamp{min-width:260px;max-width:440px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:break-word;}

/* ── Contact page responsive ─────────────────────────────────────────── */
@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-side{position:static;}
}
/* These override the earlier responsive block (same specificity, later source) */
@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .admin-side{flex-direction:row;flex-wrap:wrap;align-items:center;}
}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr;}
  .contact-card{padding:1.4rem;}
  .page-body h3{padding-left:.85rem;}
}

/* ============================================================================
   Category intro (description + image on /category/<slug>)
   ============================================================================ */
.cat-intro{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);}
.cat-intro.has-media{grid-template-columns:260px 1fr;}   /* photo beside the description */
.cat-intro-media{max-width:260px;}   /* never let the photo become a full-width square */
.cat-intro-media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-sm);}
.cat-intro-body{color:var(--muted);line-height:1.75;}
.cat-intro-body h2,.cat-intro-body h3{color:var(--ink);margin:1rem 0 .5rem;}
.cat-intro-body h2{font-size:1.25rem;}.cat-intro-body h3{font-size:1.05rem;}
.cat-intro-body p{margin:.5rem 0;}
.cat-intro-body ul{margin:.5rem 0;padding-left:1.2rem;}
.cat-intro-body a{color:var(--blue-600);}
/* Below 820px both variants stack; .cat-intro.has-media is listed explicitly
   because a media query adds no specificity, so the single-class rule alone
   would lose to it and keep the 260px column on phones. */
@media (max-width:820px){ .cat-intro, .cat-intro.has-media{grid-template-columns:1fr;} .cat-intro-media{max-width:none;} .cat-intro-media img{aspect-ratio:16/9;} }

/* ============================================================================
   Product tags + detailed specs
   ============================================================================ */
.tag-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem;}
.tag-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border-radius:999px;background:var(--green-50);border:1px solid var(--green-100);color:var(--green-800);font-size:.78rem;font-weight:600;text-decoration:none;transition:.2s;}
.tag-pill:hover{background:var(--green-600);border-color:var(--green-600);color:#fff;transform:translateY(-1px);}
.specs-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.specs-table th,.specs-table td{text-align:left;padding:.6rem .2rem;border-bottom:1px solid var(--line);vertical-align:top;}
.specs-table th{color:var(--green-800);font-weight:600;width:42%;}
.specs-table td{color:var(--muted);}
.specs-table tr:last-child th,.specs-table tr:last-child td{border-bottom:0;}

/* ============================================================================
   Product reviews (rating summary, list, submission form)
   ============================================================================ */
.rev-summary{display:grid;grid-template-columns:200px 1fr;gap:2rem;align-items:center;background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--radius);padding:1.5rem;}
.rev-avg{text-align:center;}
.rev-avg .num{font-size:3rem;font-weight:800;line-height:1;color:var(--green-800);}
.rev-avg .count{color:var(--muted);font-size:.85rem;margin-top:.35rem;}
.rev-bars{display:grid;gap:.4rem;}
.rev-bar{display:grid;grid-template-columns:52px 1fr 42px;gap:.7rem;align-items:center;font-size:.82rem;color:var(--muted);}
.rev-bar .track{height:8px;background:#fff;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.rev-bar .fill{height:100%;background:linear-gradient(90deg,var(--green-500),var(--green-600));border-radius:999px;}
.stars{display:inline-flex;gap:2px;color:#f2b01e;vertical-align:middle;}
.stars .off{color:#d9e2db;}
.stars-lg svg{width:22px;height:22px;}
.review{padding:1.2rem 0;border-bottom:1px solid var(--line);}
.review:last-child{border-bottom:0;}
.review-head{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:.35rem;}
.review-head strong{font-size:.98rem;}
.review-head .when{color:var(--muted);font-size:.8rem;}
.review h4{margin:.2rem 0 .35rem;font-size:1rem;}
.review p{margin:0;color:var(--muted);line-height:1.7;}
.review-form .rating-input{display:flex;gap:.25rem;align-items:center;flex-direction:row-reverse;justify-content:flex-end;}
.review-form .rating-input input{position:absolute;opacity:0;pointer-events:none;}
.review-form .rating-input label{cursor:pointer;color:#d9e2db;transition:color .15s,transform .15s;line-height:1;}
/* DOM is 5→1 and row-reverse shows 1→5, so "later sibling" = lower star:
   the checked input lights itself + every star to its left. */
.review-form .rating-input input:checked ~ label,
.review-form .rating-input label:hover,
.review-form .rating-input label:hover ~ label{color:#f2b01e;}
.review-form .rating-input label:hover{transform:scale(1.12);}
@media (max-width:760px){
  .rev-summary{grid-template-columns:1fr;}
}

/* ============================================================================
   Site search — header trigger, slide-down panel, live suggestions
   ============================================================================ */
.search-toggle{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--green-800);cursor:pointer;transition:background .2s,color .2s,transform .2s;}
.search-toggle:hover{background:var(--green-50);color:var(--green-600);transform:translateY(-1px);}
.search-toggle[aria-expanded="true"]{background:var(--green-600);color:#fff;}
.search-toggle .ico-svg{pointer-events:none;}

.search-backdrop{position:fixed;inset:0;background:rgba(9,32,18,.42);z-index:98;opacity:0;transition:opacity .35s ease;}
.search-backdrop.is-open{opacity:1;}

.search-panel{position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 18px 40px -22px rgba(6,45,22,.45);
  max-height:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .28s ease,box-shadow .3s;}
.search-panel.is-open{max-height:min(74vh,660px);opacity:1;pointer-events:auto;}
.navbar.shrunk ~ .search-panel{top:60px;}
.search-panel-clip{padding:1rem 0 1.1rem;}

.search-form{position:relative;max-width:780px;margin-inline:auto;}
.search-field{display:flex;align-items:center;gap:.5rem;background:var(--green-50);
  border:1px solid var(--green-100);border-radius:999px;padding:.3rem .3rem .3rem .95rem;
  transition:border-color .2s,box-shadow .2s,background .2s;}
.search-field:focus-within{border-color:var(--green-600);background:#fff;box-shadow:0 0 0 4px rgba(29,153,65,.13);}
.search-field-icon{display:flex;color:var(--green-600);flex:none;}
.search-field input[type="search"]{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1rem;line-height:1.4;color:var(--ink);padding:.55rem .6rem .55rem .25rem;outline:none;}
.search-field input[type="search"]::placeholder{color:#8aa795;}
.search-field input[type="search"]::-webkit-search-cancel-button,
.search-field input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}
/* Compact action button: the site-wide .btn sizing would make the field 66px tall. */
.search-field .btn{padding:.55rem 1.2rem;font-size:.87rem;line-height:1.2;min-height:38px;box-shadow:none;}
.search-close{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,transform .3s;}
.search-close:hover{background:#fff;color:var(--danger);transform:rotate(90deg);}

/* Live suggestions --------------------------------------------------------- */
.search-suggest{margin-top:.55rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:none;max-height:min(52vh,440px);overflow-y:auto;}
.search-suggest.is-visible{display:block;animation:fadeUp .24s ease both;}
.sug-group + .sug-group{border-top:1px solid var(--line);}
.sug-label{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-600);padding:.65rem 1.1rem .3rem;}
.sug-item{display:flex;align-items:center;gap:.85rem;padding:.6rem 1.1rem;text-decoration:none;color:var(--ink);transition:background .15s;}
.sug-item:hover,.sug-item.is-active{background:var(--green-50);}
.sug-item.is-active{box-shadow:inset 3px 0 0 var(--green-600);}
.sug-thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;background:var(--green-50);flex:none;}
.sug-ico{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:var(--green-50);color:var(--green-600);flex:none;}
.sug-body{min-width:0;flex:1;}
.sug-title{display:block;font-weight:600;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sug-meta{display:block;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sug-all{display:block;padding:.7rem 1.1rem;font-size:.88rem;font-weight:600;color:var(--green-700);text-align:center;background:var(--green-50);text-decoration:none;transition:.2s;}
.sug-all:hover,.sug-all:focus{background:var(--green-600);color:#fff;}
.sug-empty{padding:.95rem 1.1rem;color:var(--muted);font-size:.9rem;}

/* ============================================================================
   Search results page
   ============================================================================ */
.search-hits{font-size:.92rem;color:var(--muted);margin:0;}
.search-group{margin-bottom:2.6rem;}
.search-group-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);}
.search-group-head h2{font-size:1.15rem;margin:0;display:flex;align-items:center;gap:.55rem;}
.search-group-head h2 .ico-svg{color:var(--green-600);}
.search-group-head .count{font-size:.75rem;font-weight:700;background:var(--green-50);color:var(--green-800);padding:.2rem .6rem;border-radius:999px;}
.page-list{display:grid;gap:.9rem;}
.page-row{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;text-decoration:none;color:var(--ink);transition:border-color .22s,box-shadow .22s,transform .22s;}
.page-row:hover{border-color:var(--green-500);box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.page-row .pi{width:46px;height:46px;border-radius:11px;background:var(--green-50);color:var(--green-600);display:grid;place-items:center;flex:none;}
.page-row h3{margin:0 0 .15rem;font-size:1rem;}
.page-row p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.5;}
.page-row .arrow{margin-left:auto;color:var(--green-600);flex:none;}

/* ============================================================================
   Admin search — global top-bar box, per-list filters, grouped results
   ============================================================================ */
.admin-top{gap:1rem;flex-wrap:wrap;}
/* Grid items default to min-width:auto, so long nowrap result text would push the
   whole 1fr track past the viewport (horizontal scroll + clipped "View all").
   min-width:0 lets the track shrink; the rows below then ellipsize instead. */
.admin-main{min-width:0;}
.admin-top-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.admin-search-global{display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.3rem .3rem .3rem .95rem;width:min(360px,42vw);transition:border-color .2s,box-shadow .2s;}
.admin-search-global:focus-within{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(29,153,65,.13);}
.admin-search-global input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.88rem;color:var(--ink);outline:none;padding:.35rem 0;}
.admin-search-global input::placeholder{color:#93a89a;}
.admin-search-global button{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:var(--green-600);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s;}
.admin-search-global button:hover{background:var(--green-800);transform:scale(1.06);}
.admin-search-global button .ico-svg{pointer-events:none;}

.admin-search{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.admin-search-field{display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.28rem .28rem .28rem .95rem;min-width:270px;transition:border-color .2s,box-shadow .2s;}
.admin-search-field:focus-within{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(29,153,65,.12);}
.admin-search-field .ico-svg{color:var(--muted);flex:none;pointer-events:none;}
.admin-search-field input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.88rem;color:var(--ink);outline:none;padding:.3rem 0;}
.admin-search-field button[type="submit"]{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:var(--green-600);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s;}
.admin-search-field button[type="submit"]:hover{background:var(--green-800);}
.admin-search-field button[type="submit"] .ico-svg{pointer-events:none;}
.admin-search-clear{font-size:.8rem;color:var(--muted);text-decoration:none;padding:.32rem .6rem;border-radius:999px;border:1px solid var(--line);background:#fff;transition:.2s;}
.admin-search-clear:hover{background:#fff5f5;color:var(--danger);border-color:#f3c9c9;}
.admin-search-count{font-size:.83rem;color:var(--muted);}

.admin-search-group{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;margin-bottom:1.1rem;box-shadow:var(--shadow-sm);}
.admin-search-group h3{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.95rem;margin:0 0 .8rem;color:var(--green-800);}
.admin-search-group h3 .ico-svg{color:var(--green-600);}
.admin-search-group h3 .count{font-size:.72rem;font-weight:700;background:var(--green-50);color:var(--green-800);padding:.14rem .55rem;border-radius:999px;}
.admin-search-group h3 .more{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--blue-600);text-decoration:none;}
.admin-search-group h3 .more:hover{text-decoration:underline;}
.asr-row{display:flex;min-width:0;align-items:center;gap:.9rem;padding:.6rem .2rem;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .15s;border-radius:8px;}
.asr-row:first-of-type{border-top:0;}
.asr-row:hover{background:var(--green-50);}
.asr-main{min-width:0;flex:1;overflow:hidden;}
.asr-title{display:block;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.asr-sub{display:block;font-size:.79rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.asr-end{flex:none;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.7rem;}

@media (max-width:640px){
  .search-toggle{width:34px;height:34px;}
  .search-field{flex-wrap:wrap;border-radius:var(--radius);padding:.5rem .5rem .5rem .9rem;}
  .search-field input[type="search"]{width:100%;flex:1 1 40%;}
  .search-field .btn{flex:1 1 auto;padding:.55rem .85rem;min-height:38px;}
  /* The close button stays in flow: absolutely positioning it above the field
     pushed it under .search-panel's overflow:hidden, where it was clipped away. */
  .search-close{flex:none;}
  .admin-search-field{min-width:0;width:100%;}
  .admin-search-global{width:100%;}
}