/* ==========================================================================
   FreshGrocer — grocery skin
   Loaded only when store_skin = freshgrocer, after theme.css and store.css.

   Adapted from the FreshGrocer template (lumitoonstudios.com). Photos there
   are Unsplash, fonts are SIL OFL, and the icons and marks were drawn for the
   project — see assets/fonts/OFL-*.txt. Nothing proprietary is carried over;
   this file is the design language, rewritten against our own markup.

   HOW IT WORKS — the same trick as serichoice.css and levania.css. Almost
   everything is done by re-pointing the shared tokens in theme.css onto a
   grocery palette, so every component that already reads --brand, --line or
   --radius reskins without being touched. Only the handful of things with a
   genuinely different shape — pill buttons, the product card, badges — get
   rules of their own.

   Consequence worth knowing: nothing below may write a brand colour as a
   literal. Go through a token, or a shop that later re-themes gets a page
   that is half green.
   ========================================================================== */

/* ---------- Fonts. Self-hosted: no Google CDN call, and they still work
     on a shop with no outbound internet. Variable, so one file covers
     400-800 and there is no faux-bold. ---------- */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1 · Tokens
   ========================================================================== */

[data-skin="freshgrocer"] {
  /* The grocery palette */
  --fg-green:#1f9d55; --fg-green-600:#188a49; --fg-green-700:#0f6b37;
  --fg-forest:#0f3b28;
  --fg-accent:#ffb627;            /* warm yellow — "new", highlights */
  --fg-orange:#ff7043;            /* hot / urgent */
  --fg-red:#ef4d5e;               /* wishlist active */
  --fg-mint:#eef9f2; --fg-mint-2:#d8f0e1; --fg-cream:#fff8ec;

  /* rgb channels, because rgba() cannot take a hex apart */
  --fg-green-rgb:31,157,85;
  --fg-forest-rgb:15,59,40;

  --fg-head:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
  --fg-body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;

  /* ---- remap the shared tokens → grocery, so existing components follow ---- */
  --bg:#ffffff; --surface:#ffffff; --surface-2:var(--fg-mint);
  --ink:#1a2b22; --ink-soft:#3d5247; --muted:#6c7d74;
  --line:#e4ece6; --line-strong:var(--fg-mint-2);

  --brand:var(--fg-green); --brand-2:var(--fg-green-700);
  --brand-ink:#fff; --brand-soft:var(--fg-mint);
  --grad:linear-gradient(120deg,var(--fg-green) 0%,var(--fg-green-600) 60%,var(--fg-green-700) 100%);

  /* Rounder than the default, which is most of the friendliness */
  --radius:18px; --radius-sm:12px; --radius-lg:28px;

  /* Shadows tinted forest rather than grey — grey on a warm page reads dirty */
  --shadow-sm:0 2px 10px rgba(var(--fg-forest-rgb),.06);
  --shadow:0 12px 30px -14px rgba(var(--fg-forest-rgb),.22);
  --shadow-lg:0 26px 50px -20px rgba(var(--fg-forest-rgb),.32);

  --good:#1f9d55; --good-bg:var(--fg-mint);
  --warn:#b4700c;  --warn-bg:var(--fg-cream);
}

/* ==========================================================================
   2 · Typography
   ========================================================================== */

[data-skin="freshgrocer"] body,
body[data-skin="freshgrocer"] { font-family:var(--fg-body); background:var(--bg); color:var(--ink) }

[data-skin="freshgrocer"] h1,
[data-skin="freshgrocer"] h2,
[data-skin="freshgrocer"] h3,
[data-skin="freshgrocer"] h4,
[data-skin="freshgrocer"] .price,
[data-skin="freshgrocer"] .btn,
[data-skin="freshgrocer"] .section-title{
  font-family:var(--fg-head); letter-spacing:-.015em;
}
[data-skin="freshgrocer"] h1,
[data-skin="freshgrocer"] h2{ font-weight:800; text-wrap:balance }
[data-skin="freshgrocer"] h3,
[data-skin="freshgrocer"] h4{ font-weight:700 }

/* The template's section lead-in: a small green kicker over the heading. */
[data-skin="freshgrocer"] .section-kicker,
[data-skin="freshgrocer"] .eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--fg-head); font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--fg-green-700); background:var(--fg-mint);
  padding:6px 12px; border-radius:999px;
}

/* ==========================================================================
   3 · Buttons — pills, and a lift on hover
   ========================================================================== */

[data-skin="freshgrocer"] .btn{
  border-radius:999px; font-family:var(--fg-head); font-weight:600; letter-spacing:0;
  transition:background-color .25s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, color .25s;
}
[data-skin="freshgrocer"] .btn:hover{ transform:translateY(-2px) }
[data-skin="freshgrocer"] .btn-primary{ background:var(--fg-green); border-color:transparent; color:#fff }
[data-skin="freshgrocer"] .btn-primary:hover{
  background:var(--fg-green-700); box-shadow:0 10px 20px -10px rgba(var(--fg-green-rgb),.75);
}
[data-skin="freshgrocer"] .btn-ghost:hover{ background:var(--fg-mint) }

/* "Add to cart" on a card is a soft mint chip until you hover it, which keeps
   a grid of twenty cards from being a wall of solid green. */
[data-skin="freshgrocer"] .prod-card .btn-primary{
  background:var(--fg-mint); color:var(--fg-green-700); box-shadow:none;
}
[data-skin="freshgrocer"] .prod-card .btn-primary:hover{ background:var(--fg-green); color:#fff }
[data-skin="freshgrocer"] .prod-card .btn-primary:active{ transform:scale(.96) }
[data-skin="freshgrocer"] .prod-card .btn-primary[disabled]{
  background:var(--surface-2); color:var(--muted); transform:none;
}

/* ==========================================================================
   4 · Product card
   ========================================================================== */

[data-skin="freshgrocer"] .prod-card{
  border:1px solid var(--line); border-radius:22px; background:#fff; padding:14px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
[data-skin="freshgrocer"] .prod-card:hover{
  transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:var(--fg-mint-2);
}
/* A tinted well behind the shot, the way a grocery shows produce.
   The template blends its images into this tint with mix-blend-mode:multiply,
   which looks superb — on ITS photos, which are cut-outs on pure white. Our
   shops upload real photographs with real backgrounds, and multiply turns a
   bottle shot on a red cloth into mud. Tint the well, leave the photo alone. */
[data-skin="freshgrocer"] .prod-thumb{
  border-radius:16px; background:var(--fg-mint); overflow:hidden;
}
[data-skin="freshgrocer"] .thumb-ph{ background:var(--fg-mint); color:var(--fg-green) }
[data-skin="freshgrocer"] .prod-name{ font-family:var(--fg-head); font-weight:600 }
[data-skin="freshgrocer"] .price{ color:var(--fg-green-700); font-weight:800 }
[data-skin="freshgrocer"] .strike{ color:var(--muted) }

/* Badges: the template's one-corner-square pill. */
[data-skin="freshgrocer"] .sale-badge,
[data-skin="freshgrocer"] .out-badge{
  font-family:var(--fg-head); font-size:12px; font-weight:700; letter-spacing:.03em; line-height:1;
  padding:7px 11px; border-radius:999px 999px 999px 4px; color:#fff;
}
[data-skin="freshgrocer"] .sale-badge{ background:var(--fg-orange) }
[data-skin="freshgrocer"] .out-badge{ background:var(--fg-forest) }

[data-skin="freshgrocer"] .wish-heart{ border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); color:var(--muted) }
[data-skin="freshgrocer"] .wish-heart:hover{ color:var(--fg-red) }
[data-skin="freshgrocer"] .wish-heart.active{ color:var(--fg-red) }

/* ==========================================================================
   4b · The FreshGrocer card proper

   Values taken from the template's own .pcard rules so the object matches:
   22px radius, 14px padding, a square mint media well, a 7px lift, the
   two-line clamped title, and the actions revealed from the middle on hover.
   ========================================================================== */

[data-skin="freshgrocer"] .fg-pcard{
  position:relative;display:flex;flex-direction:column;gap:14px;padding:14px;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
[data-skin="freshgrocer"] .fg-pcard:hover{
  transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:var(--fg-mint-2);
}
[data-skin="freshgrocer"] .fg-pcard.is-out{ opacity:.85 }

[data-skin="freshgrocer"] .fg-media{
  position:relative;border-radius:16px;overflow:hidden;background:var(--fg-mint);aspect-ratio:1/1;
}
[data-skin="freshgrocer"] .fg-img,
[data-skin="freshgrocer"] .fg-img img{ display:block;width:100%;height:100% }
[data-skin="freshgrocer"] .fg-img img{ object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1) }
[data-skin="freshgrocer"] .fg-pcard:hover .fg-img img{ transform:scale(1.09) }
[data-skin="freshgrocer"] .fg-img-ph{
  display:grid;place-items:center;width:100%;height:100%;font-size:34px;color:var(--fg-green);
}

/* Badge: the template's pill with one squared corner. */
[data-skin="freshgrocer"] .fg-badge{
  position:absolute;z-index:2;top:12px;left:12px;
  font-family:var(--fg-head);font-size:12px;font-weight:700;letter-spacing:.03em;line-height:1;
  padding:7px 11px;border-radius:999px 999px 999px 4px;color:#fff;
}
[data-skin="freshgrocer"] .fg-badge-sale{ background:var(--fg-orange) }
[data-skin="freshgrocer"] .fg-badge-out{ background:var(--fg-forest) }

/* Actions rise from the middle of the photo. focus-within keeps them reachable
   from the keyboard, which a hover-only reveal would not. */
[data-skin="freshgrocer"] .fg-actions{
  position:absolute;left:50%;top:50%;z-index:3;display:flex;gap:8px;
  opacity:0;transform:translate(-50%,-20%);
  transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1);
}
[data-skin="freshgrocer"] .fg-pcard:hover .fg-actions,
[data-skin="freshgrocer"] .fg-pcard:focus-within .fg-actions{ opacity:1;transform:translate(-50%,-50%) }
[data-skin="freshgrocer"] .fg-ico{
  position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#fff;color:var(--fg-forest);border:none;cursor:pointer;font-size:15px;
  box-shadow:var(--shadow-sm);transition:background-color .2s,color .2s;
}
[data-skin="freshgrocer"] .fg-ico:hover{ background:var(--fg-green);color:#fff }
[data-skin="freshgrocer"] .fg-ico.active{ color:var(--fg-red) }
[data-skin="freshgrocer"] .fg-ico.active:hover{ background:var(--fg-red);color:#fff }
[data-skin="freshgrocer"] .fg-ico::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translate(-50%,4px);background:var(--fg-forest);color:#fff;
  font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
[data-skin="freshgrocer"] .fg-ico:hover::after{ opacity:1;transform:translate(-50%,0) }

[data-skin="freshgrocer"] .fg-body{
  display:flex;flex-direction:column;gap:6px;flex:1;padding:0 4px 2px;
}
[data-skin="freshgrocer"] .fg-cat{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
/* Clamped to two lines with the height reserved, so a grid of cards keeps one
   baseline whether a name runs to one line or three. */
[data-skin="freshgrocer"] .fg-title{
  margin:0;font-family:var(--fg-head);font-size:17px;font-weight:600;line-height:1.3;
  min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
[data-skin="freshgrocer"] .fg-title a{ color:var(--ink);transition:color .2s }
[data-skin="freshgrocer"] .fg-title a:hover{ color:var(--fg-green) }
[data-skin="freshgrocer"] .fg-meta{ margin:0;font-size:13px;color:var(--muted) }
[data-skin="freshgrocer"] .fg-desc{
  margin:0;font-size:13px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

[data-skin="freshgrocer"] .fg-foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin-top:auto;padding-top:8px;
}
[data-skin="freshgrocer"] .fg-price .price{ font-family:var(--fg-head);font-size:17px;font-weight:800;color:var(--fg-green-700) }
[data-skin="freshgrocer"] .fg-price .strike{ margin-left:6px;font-size:13px;color:var(--muted);text-decoration:line-through }

[data-skin="freshgrocer"] .fg-add{
  display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:12px;border:none;
  background:var(--fg-mint);color:var(--fg-green-700);cursor:pointer;
  font-family:var(--fg-head);font-weight:700;font-size:14px;
  transition:background-color .25s,color .25s,transform .25s cubic-bezier(.2,.7,.2,1);
}
[data-skin="freshgrocer"] .fg-add:hover{ background:var(--fg-green);color:#fff }
[data-skin="freshgrocer"] .fg-add:active{ transform:scale(.94) }
[data-skin="freshgrocer"] .fg-add[disabled]{ background:var(--surface-2);color:var(--muted);cursor:default;transform:none }

@media(max-width:560px){
  [data-skin="freshgrocer"] .fg-pcard{ padding:10px;border-radius:18px;gap:10px }
  [data-skin="freshgrocer"] .fg-title{ font-size:15px }
  [data-skin="freshgrocer"] .fg-desc{ display:none }
  [data-skin="freshgrocer"] .fg-foot{ gap:6px }
}

/* ==========================================================================
   5 · Header, nav, footer
   ========================================================================== */

[data-skin="freshgrocer"] .topbar-note{ background:var(--fg-forest); color:#fff }
[data-skin="freshgrocer"] .topbar-note a{ color:var(--fg-accent) }

[data-skin="freshgrocer"] .site-header{ background:rgba(255,255,255,.9); border-bottom:1px solid var(--line) }
[data-skin="freshgrocer"] .site-header.scrolled{ box-shadow:0 4px 20px -8px rgba(var(--fg-forest-rgb),.18) }
[data-skin="freshgrocer"] .search .input{ background:var(--fg-mint); border-color:transparent; border-radius:999px }
[data-skin="freshgrocer"] .search .input:focus{
  background:#fff; border-color:var(--fg-green); box-shadow:0 0 0 3px var(--fg-mint-2);
}
[data-skin="freshgrocer"] .search-btn{ background:var(--fg-green) }
[data-skin="freshgrocer"] .site-nav a:hover,
[data-skin="freshgrocer"] .site-nav a.active{ color:var(--fg-green-700) }

[data-skin="freshgrocer"] .site-footer{ background:var(--fg-forest); color:#cfe3d8 }
[data-skin="freshgrocer"] .site-footer a{ color:#cfe3d8 }
[data-skin="freshgrocer"] .site-footer a:hover{ color:var(--fg-accent) }
[data-skin="freshgrocer"] .site-footer h4{ color:#fff }

/* The trust strip under the footer: mint tiles rather than plain rows */
[data-skin="freshgrocer"] .ft-item{
  background:var(--fg-mint); border-radius:var(--radius); padding:14px 16px;
}
[data-skin="freshgrocer"] .ft-ic{ color:var(--fg-green-700) }

/* ==========================================================================
   6 · Sections and cards
   ========================================================================== */

[data-skin="freshgrocer"] .card{ border-radius:var(--radius); border-color:var(--line) }
[data-skin="freshgrocer"] .badge.b-brand{ background:var(--fg-mint); color:var(--fg-green-700) }
[data-skin="freshgrocer"] .badge.b-good{ background:var(--fg-mint); color:var(--fg-green-700) }
[data-skin="freshgrocer"] .badge.b-warn{ background:var(--fg-cream); color:#8a5d0c }

/* Alternating section grounds are most of the template's rhythm. */
[data-skin="freshgrocer"] .section--mint{ background:var(--fg-mint) }
[data-skin="freshgrocer"] .section--cream{ background:var(--fg-cream) }

/* Category tiles: photo over a soft tint, name underneath. */
[data-skin="freshgrocer"] .cat-tile{
  background:var(--fg-mint); border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
[data-skin="freshgrocer"] .cat-tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }

/* ==========================================================================
   6b · Homepage — hero, promos, category tiles

   The base hero paints a saturated gradient and sets every word on it to
   white. FreshGrocer does the opposite: a pale mint-to-cream wash with dark
   text on it, which is what makes the produce photography the loudest thing
   on the page rather than the background.

   That means this block cannot just change a background — flipping the ground
   to light without also flipping the text leaves white words on cream. So the
   slide, the heading, the lead, the badge, the button, the arrows and the dots
   all move together. Miss one and the hero is unreadable.
   ========================================================================== */

[data-skin="freshgrocer"] .hs-slide,
[data-skin="freshgrocer"] .hs-slide.hs-brand,
[data-skin="freshgrocer"] .hs-slide.hs-sunset,
[data-skin="freshgrocer"] .hs-slide.hs-ocean,
[data-skin="freshgrocer"] .hs-slide.hs-forest,
[data-skin="freshgrocer"] .hs-slide.hs-dark{
  color:var(--ink);
  background:
    radial-gradient(circle at 85% 20%, #fff3cf 0, transparent 38%),
    linear-gradient(120deg, #e3f5ea 0%, #f3fbf4 55%, #fdf6e4 100%);
}
/* Two more grounds so consecutive slides are not identical — the shop picks a
   slide style per slide, and every one of them now lands in this palette. */
[data-skin="freshgrocer"] .hs-slide.hs-sunset{
  background:
    radial-gradient(circle at 80% 80%, #e2f5e7 0, transparent 40%),
    linear-gradient(120deg, #fff4e0 0%, #fff9ef 55%, #fdeee8 100%);
}
[data-skin="freshgrocer"] .hs-slide.hs-ocean{
  background:
    radial-gradient(circle at 15% 85%, #fff1d2 0, transparent 38%),
    linear-gradient(120deg, #e8f4ff 0%, #f1f9f4 60%, #e4f5ea 100%);
}

[data-skin="freshgrocer"] .hs-text h1{ color:var(--fg-forest); font-family:var(--fg-head); font-weight:800 }
[data-skin="freshgrocer"] .hs-text p{ color:var(--ink-soft) }
[data-skin="freshgrocer"] .hs-badge{
  background:#fff; border:1px solid var(--line); color:var(--fg-green-700);
  box-shadow:var(--shadow-sm);
}
[data-skin="freshgrocer"] .hs-cta{ background:var(--fg-green); color:#fff }
[data-skin="freshgrocer"] .hs-cta:hover{ background:var(--fg-green-700); color:#fff }

/* The floating photo sat on a translucent white panel, which vanishes on a
   pale ground. Give it a real card instead. */
[data-skin="freshgrocer"] .hs-photo{
  background:#fff; border:1px solid var(--line);
  box-shadow:0 30px 60px -24px rgba(var(--fg-forest-rgb),.35);
}

/* Controls were white-on-dark; they need to be dark-on-light now. */
[data-skin="freshgrocer"] .hs-arrow{ background:#fff; color:var(--fg-forest); border:1px solid var(--line) }
[data-skin="freshgrocer"] .hs-dots button{ background:rgba(var(--fg-forest-rgb),.25) }
[data-skin="freshgrocer"] .hs-dots button.active{ background:var(--fg-green) }

/* ---- The hero proper ----
   Rebuilt from the template: a rounded slide with a pale wash, copy on the
   left, and the photo in a blob that slowly morphs. Numbers are the
   template's — 34px slider radius, 560px minimum height, the 8px white ring
   around the photo, the 14s morph. */

[data-skin="freshgrocer"] .fg-hero{ padding-top:26px }
[data-skin="freshgrocer"] .fg-hero-slider{
  position:relative;display:grid;border-radius:34px;overflow:hidden;isolation:isolate;
}
[data-skin="freshgrocer"] .fg-slide{
  grid-area:1/1;position:relative;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:40px;
  padding:60px 72px 76px;min-height:560px;
  background:
    radial-gradient(circle at 85% 20%,#fff3cf 0,transparent 38%),
    linear-gradient(120deg,#e3f5ea 0%,#f3fbf4 55%,#fdf6e4 100%);
  opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s;
}
[data-skin="freshgrocer"] .fg-slide.is-active{ opacity:1;visibility:visible;z-index:1;transition:opacity .9s ease,visibility 0s }
/* Alternate grounds so consecutive slides are not the same wash. */
[data-skin="freshgrocer"] .fg-slide:nth-child(2){
  background:radial-gradient(circle at 80% 80%,#e2f5e7 0,transparent 40%),
             linear-gradient(120deg,#fff4e0 0%,#fff9ef 55%,#fdeee8 100%);
}
[data-skin="freshgrocer"] .fg-slide:nth-child(3){
  background:radial-gradient(circle at 15% 85%,#fff1d2 0,transparent 38%),
             linear-gradient(120deg,#e8f4ff 0%,#f1f9f4 60%,#e4f5ea 100%);
}

/* Halloween. The one slide colour this hero honours by name, because it is the
   one a shop picks on purpose for a month of the year -- the rest are grounds,
   and alternating them by position reads better than obeying a dropdown.

   It retints rather than repaints: the six tokens below are the skin's own, so
   overriding them here carries the pumpkin through the eyebrow pill, the title,
   the marker stroke under the highlighted word, the button, the leaf ring and
   the blob's shadow in one move, with nothing else on the page touched.

   Still a pale ground with dark text, for the reason written at the top of this
   section: flip the ground to a spooky violet without flipping every piece of
   copy on it and the hero is unreadable. Halloween here is the accent, not the
   background. */
[data-skin="freshgrocer"] .fg-slide.fg-bg-halloween{
  --fg-green:#c2410c;             /* pumpkin, matching the admin swatch */
  --fg-green-700:#9a3412;
  --fg-green-rgb:194,65,12;
  --fg-forest:#3b0764;            /* deep violet, for the heading */
  --fg-forest-rgb:59,7,100;
  --fg-accent:#d8b4fe;            /* the marker stroke turns lilac */
  --fg-mint:#f6f0ff;              /* pill and empty-blob ground */
  background:
    radial-gradient(circle at 82% 18%,#ede9fe 0,transparent 40%),
    linear-gradient(120deg,#fff1e4 0%,#fdf6ef 55%,#f5f0fe 100%);
}

/* The soft leaf ring in the corner. */
[data-skin="freshgrocer"] .fg-slide::before{
  content:"";position:absolute;left:-120px;bottom:-160px;width:380px;height:380px;
  border-radius:50%;border:40px solid rgba(var(--fg-green-rgb),.06);pointer-events:none;
}

[data-skin="freshgrocer"] .fg-hero-content{
  position:relative;display:grid;justify-items:start;gap:22px;max-width:620px;
}
/* Copy rises in, staggered, once the slide becomes the active one. */
[data-skin="freshgrocer"] .fg-hero-content > *{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-skin="freshgrocer"] .fg-slide.is-active .fg-hero-content > *{ opacity:1;transform:none }
[data-skin="freshgrocer"] .fg-slide.is-active .fg-hero-content > :nth-child(1){ transition-delay:.15s }
[data-skin="freshgrocer"] .fg-slide.is-active .fg-hero-content > :nth-child(2){ transition-delay:.28s }
[data-skin="freshgrocer"] .fg-slide.is-active .fg-hero-content > :nth-child(3){ transition-delay:.41s }
[data-skin="freshgrocer"] .fg-slide.is-active .fg-hero-content > :nth-child(4){ transition-delay:.54s }

[data-skin="freshgrocer"] .fg-eyebrow{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--fg-head);
  font-size:13px;font-weight:700;color:var(--fg-green-700);background:var(--fg-mint);
  padding:6px 12px;border-radius:999px;
}
[data-skin="freshgrocer"] .fg-hero-title{
  margin:0;font-family:var(--fg-head);font-weight:800;letter-spacing:-.03em;color:var(--fg-forest);
  font-size:clamp(2.1rem,1.1rem + 3.2vw,3.9rem);line-height:1.05;
}
/* The highlighted word: green text over an amber marker stroke that draws
   itself in once the slide lands. */
[data-skin="freshgrocer"] .fg-hl{ position:relative;color:var(--fg-green);white-space:nowrap }
[data-skin="freshgrocer"] .fg-hl::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.22em;border-radius:99px;
  background:var(--fg-accent);opacity:.55;z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) .7s;
}
[data-skin="freshgrocer"] .fg-slide.is-active .fg-hl::after{ transform:scaleX(1) }
[data-skin="freshgrocer"] .fg-hero-text{ margin:0;font-size:18px;color:var(--ink-soft);max-width:520px }

[data-skin="freshgrocer"] .fg-hero-visual{ position:relative;justify-self:center;width:100%;max-width:520px }
[data-skin="freshgrocer"] .fg-blob{
  position:relative;aspect-ratio:1/.94;overflow:hidden;border:8px solid #fff;
  border-radius:58% 42% 55% 45%/48% 55% 45% 52%;box-shadow:var(--shadow-lg);
  animation:fgBlob 14s ease-in-out infinite alternate;
  display:grid;place-items:center;background:var(--fg-mint);font-size:72px;color:var(--fg-green);
}
[data-skin="freshgrocer"] .fg-blob-alt{ border-radius:44% 56% 40% 60%/58% 44% 56% 42% }
[data-skin="freshgrocer"] .fg-blob img{ width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) }
[data-skin="freshgrocer"] .fg-slide.is-active .fg-blob img{ transform:scale(1) }
@keyframes fgBlob{
  0%{ border-radius:58% 42% 55% 45%/48% 55% 45% 52% }
  50%{ border-radius:45% 55% 42% 58%/56% 42% 58% 44% }
  100%{ border-radius:52% 48% 60% 40%/44% 58% 42% 56% }
}

[data-skin="freshgrocer"] .fg-chip{
  position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  background:#fff;border-radius:16px;box-shadow:var(--shadow);font-size:14px;white-space:nowrap;
  animation:fgFloat 5s ease-in-out infinite;
}
[data-skin="freshgrocer"] .fg-chip b{ font-family:var(--fg-head);color:var(--fg-forest) }
[data-skin="freshgrocer"] .fg-chip i{ color:var(--fg-green) }
[data-skin="freshgrocer"] .fg-chip-a{ left:-26px;top:16% }
[data-skin="freshgrocer"] .fg-chip-b{ right:-10px;bottom:12%;background:var(--fg-accent);animation-delay:-2.5s }
@keyframes fgFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

[data-skin="freshgrocer"] .fg-hero-nav{
  position:absolute;right:28px;top:28px;z-index:2;display:flex;gap:8px;
}
[data-skin="freshgrocer"] .fg-round{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--fg-forest);cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow-sm);transition:background-color .2s,color .2s;
}
[data-skin="freshgrocer"] .fg-round:hover{ background:var(--fg-green);color:#fff;border-color:transparent }
[data-skin="freshgrocer"] .fg-hero-dots{
  position:absolute;left:72px;bottom:34px;z-index:2;display:flex;gap:8px;
}
[data-skin="freshgrocer"] .fg-dot{
  width:26px;height:6px;padding:0;border:none;border-radius:99px;cursor:pointer;
  background:rgba(var(--fg-forest-rgb),.18);transition:background-color .25s,width .25s;
}
[data-skin="freshgrocer"] .fg-dot.is-active{ background:var(--fg-green);width:34px }

@media(max-width:900px){
  [data-skin="freshgrocer"] .fg-slide{
    grid-template-columns:1fr;gap:28px;padding:40px 28px 64px;min-height:0;text-align:center;
  }
  [data-skin="freshgrocer"] .fg-hero-content{ justify-items:center }
  [data-skin="freshgrocer"] .fg-hero-visual{ max-width:340px;order:-1 }
  [data-skin="freshgrocer"] .fg-chip-a{ left:-10px }
  [data-skin="freshgrocer"] .fg-chip-b{ right:-4px }
  [data-skin="freshgrocer"] .fg-hero-dots{ left:50%;transform:translateX(-50%);bottom:22px }
  [data-skin="freshgrocer"] .fg-hero-nav{ display:none }
}
@media(max-width:560px){
  [data-skin="freshgrocer"] .fg-hero-slider{ border-radius:24px }
  [data-skin="freshgrocer"] .fg-hero-text{ font-size:15.5px }
  [data-skin="freshgrocer"] .fg-chip{ font-size:12.5px;padding:8px 12px }
}
@media(prefers-reduced-motion:reduce){
  [data-skin="freshgrocer"] .fg-blob{ animation:none }
  [data-skin="freshgrocer"] .fg-chip{ animation:none }
  [data-skin="freshgrocer"] .fg-hero-content > *{ opacity:1;transform:none;transition:none }
  [data-skin="freshgrocer"] .fg-hl::after{ transform:scaleX(1);transition:none }
}

/* ---- Promo strip ----
   Three saturated gradients in orange, indigo and cyan, directly under a mint
   hero. Same shape, grocery colours, and dark text so they read as shelf
   signage rather than three banner ads. */
[data-skin="freshgrocer"] .promo-card{ color:var(--fg-forest); box-shadow:none; border:1px solid var(--line) }
[data-skin="freshgrocer"] .promo-card b{ font-family:var(--fg-head) }
[data-skin="freshgrocer"] .promo-card span{ opacity:1; color:var(--ink-soft) }
[data-skin="freshgrocer"] .promo-card .pc-ic{ background:#fff; color:var(--fg-green-700) }
[data-skin="freshgrocer"] .promo-card.p1{ background:var(--fg-cream); border-color:#f4e3c4 }
[data-skin="freshgrocer"] .promo-card.p2{ background:var(--fg-mint); border-color:var(--fg-mint-2) }
[data-skin="freshgrocer"] .promo-card.p3{ background:#eaf3ff; border-color:#d6e6fa }
[data-skin="freshgrocer"] .promo-card:hover{ box-shadow:var(--shadow) }

/* ---- Section heads, the aisle carousel and the stats band ---- */

[data-skin="freshgrocer"] .fg-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px;
}
[data-skin="freshgrocer"] .fg-kicker{
  display:inline-block;font-family:var(--fg-head);font-size:13px;font-weight:700;
  letter-spacing:.02em;color:var(--fg-green-700);
}
[data-skin="freshgrocer"] .fg-section-title{
  margin:4px 0 0;font-family:var(--fg-head);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.45rem,1.1rem + 1.2vw,2.1rem);color:var(--fg-forest);
}
[data-skin="freshgrocer"] .fg-head-tools{ display:flex;align-items:center;gap:12px }
[data-skin="freshgrocer"] .fg-seeall{
  font-family:var(--fg-head);font-weight:700;font-size:14px;color:var(--fg-green-700);white-space:nowrap;
}
[data-skin="freshgrocer"] .fg-seeall:hover{ color:var(--fg-green) }
[data-skin="freshgrocer"] .fg-arrows{ display:flex;gap:8px }
[data-skin="freshgrocer"] .fg-round-sm{ width:36px;height:36px;font-size:13px }

/* Scroll-snapped track. Eight across on a wide screen like the template,
   stepping down so a tile never becomes a stamp. */
[data-skin="freshgrocer"] .fg-track{
  --n:8;
  display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:10px 4px 20px;margin:-10px -4px -20px;
}
[data-skin="freshgrocer"] .fg-track::-webkit-scrollbar{ display:none }
[data-skin="freshgrocer"] .fg-track-item{
  flex:0 0 calc((100% - (var(--n) - 1) * 20px) / var(--n));
  scroll-snap-align:start;min-width:0;display:flex;
}
[data-skin="freshgrocer"] .fg-track-item > *{ flex:1 }

[data-skin="freshgrocer"] .fg-tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:22px 12px 18px;border-radius:24px;background:var(--tile);border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
[data-skin="freshgrocer"] .fg-tile:hover{
  transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(var(--fg-green-rgb),.25);
}
[data-skin="freshgrocer"] .fg-tile-img{
  width:92px;height:92px;border-radius:50%;overflow:hidden;margin-bottom:8px;
  border:5px solid #fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;background:#fff;
}
[data-skin="freshgrocer"] .fg-tile-img img{
  width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
[data-skin="freshgrocer"] .fg-tile:hover .fg-tile-img img{ transform:scale(1.15) rotate(4deg) }
[data-skin="freshgrocer"] .fg-tile-emoji{ font-size:38px;line-height:1 }
[data-skin="freshgrocer"] .fg-tile-name{
  font-family:var(--fg-head);font-weight:600;font-size:16px;line-height:1.25;color:var(--fg-forest);
}
[data-skin="freshgrocer"] .fg-tile-count{ font-size:13px;color:var(--muted) }

@media(max-width:1200px){ [data-skin="freshgrocer"] .fg-track{ --n:6 } }
@media(max-width:900px){  [data-skin="freshgrocer"] .fg-track{ --n:4 } }
@media(max-width:560px){
  [data-skin="freshgrocer"] .fg-track{ --n:2.4;gap:14px }
  [data-skin="freshgrocer"] .fg-track-item{ flex-basis:calc((100% - 1.4 * 14px) / 2.4) }
  [data-skin="freshgrocer"] .fg-tile-img{ width:72px;height:72px;border-width:4px }
  [data-skin="freshgrocer"] .fg-head-tools .fg-arrows{ display:none }
}

/* ---- The four short lists ---- */
[data-skin="freshgrocer"] .fg-mini-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px 34px;
}
[data-skin="freshgrocer"] .fg-mini-head{
  margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--fg-mint-2);
  font-family:var(--fg-head);font-weight:700;font-size:17px;color:var(--fg-forest);
}
[data-skin="freshgrocer"] .fg-mini-list{ list-style:none;margin:0;padding:0;display:grid;gap:14px }
[data-skin="freshgrocer"] .fg-mini{ display:flex;gap:12px;align-items:center }
[data-skin="freshgrocer"] .fg-mini-img{
  flex:none;width:72px;height:72px;border-radius:16px;overflow:hidden;background:var(--fg-mint);
  display:grid;place-items:center;font-size:22px;color:var(--fg-green);
}
[data-skin="freshgrocer"] .fg-mini-img img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
[data-skin="freshgrocer"] .fg-mini:hover .fg-mini-img img{ transform:scale(1.08) }
[data-skin="freshgrocer"] .fg-mini-body{ min-width:0 }
[data-skin="freshgrocer"] .fg-mini-name{
  margin:0;font-family:var(--fg-head);font-size:14.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
[data-skin="freshgrocer"] .fg-mini-name a{ color:var(--ink) }
[data-skin="freshgrocer"] .fg-mini-name a:hover{ color:var(--fg-green) }
[data-skin="freshgrocer"] .fg-mini-price{ margin:3px 0 0;font-size:14px }
[data-skin="freshgrocer"] .fg-mini-price strong{ font-family:var(--fg-head);color:var(--fg-green-700) }
[data-skin="freshgrocer"] .fg-mini-price del{ margin-left:6px;font-size:12.5px;color:var(--muted) }

@media(max-width:560px){
  [data-skin="freshgrocer"] .fg-mini-grid{ gap:22px }
  [data-skin="freshgrocer"] .fg-mini-img{ width:60px;height:60px;border-radius:14px }
}

/* ---- Stats band ---- */
[data-skin="freshgrocer"] .fg-statsband{ background:var(--fg-cream) }
[data-skin="freshgrocer"] .fg-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;
}
[data-skin="freshgrocer"] .fg-stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 18px;text-align:center;
}
[data-skin="freshgrocer"] .fg-stat b{
  display:block;font-family:var(--fg-head);font-weight:800;font-size:30px;line-height:1.1;
  color:var(--fg-green-700);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
[data-skin="freshgrocer"] .fg-stat small{ display:block;margin-top:5px;font-size:13.5px;color:var(--muted) }

/* ---- Category tiles (the older grid, kept for any section still using it) ---- */
[data-skin="freshgrocer"] .cat-card{
  background:var(--fg-mint); border:1px solid transparent; border-radius:var(--radius-lg);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
[data-skin="freshgrocer"] .cat-card:hover{
  transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--fg-mint-2);
}
[data-skin="freshgrocer"] .cat-card span,
[data-skin="freshgrocer"] .cat-card b{ font-family:var(--fg-head); font-weight:600; color:var(--fg-forest) }
[data-skin="freshgrocer"] .cat-emoji{ background:#fff; border-radius:50%; box-shadow:var(--shadow-sm) }
[data-skin="freshgrocer"] .cat-emoji.has-img{ background:#fff }

/* ==========================================================================
   7 · The things FreshGrocer has no screens for
   The template is a delivery-only shop. Everything below is ours, and would
   otherwise sit on this page in the default purple.
   ========================================================================== */

/* ---- Pickup / curbside ---- */
[data-skin="freshgrocer"] .pickup-panel,
[data-skin="freshgrocer"] .bank-box{
  background:var(--fg-mint); border:1px dashed var(--fg-mint-2); border-radius:var(--radius);
}
[data-skin="freshgrocer"] .arrived-btn{ background:var(--fg-accent); color:var(--fg-forest) }
[data-skin="freshgrocer"] .arrived-btn:hover{ background:#ffc85a; color:var(--fg-forest) }

/* ---- Order tracking steps ---- */
[data-skin="freshgrocer"] .track-step.done .ts-dot{ background:var(--fg-green); border-color:transparent }
[data-skin="freshgrocer"] .track-step.current .ts-dot{
  animation:fgPulse 1.6s infinite;
}
@keyframes fgPulse{
  0%{ box-shadow:0 0 0 0 rgba(var(--fg-green-rgb),.45) }
  70%{ box-shadow:0 0 0 10px rgba(var(--fg-green-rgb),0) }
  100%{ box-shadow:0 0 0 0 rgba(var(--fg-green-rgb),0) }
}
[data-skin="freshgrocer"] .track-eta{ background:var(--fg-mint) }
[data-skin="freshgrocer"] .track-ship{ background:var(--fg-cream) }

/* The status banner's tones are hard-coded indigo, cyan and emerald in
   store.css, so no skin reaches them through a token — they have to be named
   here or a pending order shows an indigo slab on a green page.

   The states still have to be told apart at a glance, so they progress warm →
   fresh → deep: waiting, on its way, done. Cancelled stays slate, because
   neutral is the right answer for an order that stopped. All four keep white
   text, so every gradient below stays dark enough to carry it. */
[data-skin="freshgrocer"] .tb-pending,
[data-skin="freshgrocer"] .tb-processing{ background:linear-gradient(120deg,#b4700c,#e8a020) }
[data-skin="freshgrocer"] .tb-shipped{ background:linear-gradient(120deg,#0f6b37,#1f9d55) }
[data-skin="freshgrocer"] .tb-delivered,
[data-skin="freshgrocer"] .tb-completed{ background:linear-gradient(120deg,#0f3b28,#188a49) }

/* ---- Order confirmation (order-success.php) ---- */
[data-skin="freshgrocer"] .os-check{
  background:linear-gradient(135deg,var(--fg-green),var(--fg-green-700));
  box-shadow:0 12px 30px -8px rgba(var(--fg-green-rgb),.5);
}
[data-skin="freshgrocer"] .os-ref{ background:var(--fg-mint); border-color:transparent }
[data-skin="freshgrocer"] .os-fact{ border-radius:var(--radius); border-color:var(--line) }
[data-skin="freshgrocer"] .os-fact .of-k{ color:var(--fg-green-700) }
[data-skin="freshgrocer"] .of-paid{ background:var(--fg-mint); color:var(--fg-green-700) }
[data-skin="freshgrocer"] .of-due{ background:var(--fg-cream); color:#8a5d0c }

/* ---- Substitutes: the out-of-stock panel. This is the feature the shop is
     sold on, so it gets the warm ground rather than the neutral one — it is
     an offer, not an error. ---- */
[data-skin="freshgrocer"] .sub-panel{
  background:var(--fg-cream); border:1px solid #f4e3c4; border-radius:var(--radius-lg);
}
[data-skin="freshgrocer"] .sub-panel h3,
[data-skin="freshgrocer"] .sub-panel h4{ color:var(--fg-forest) }
[data-skin="freshgrocer"] .sub-reason{
  background:#fff; color:var(--fg-green-700); border-radius:999px;
  font-family:var(--fg-head); font-size:11.5px; font-weight:700;
  padding:3px 9px; letter-spacing:.02em;
}

/* ---- The AI assistant widget ---- */
[data-skin="freshgrocer"] .chat-fab{
  background:var(--fg-green); box-shadow:0 14px 30px -12px rgba(var(--fg-green-rgb),.7);
}
[data-skin="freshgrocer"] .chat-fab:hover{ background:var(--fg-green-700) }
[data-skin="freshgrocer"] .chat-panel{ border-radius:var(--radius-lg); border-color:var(--line) }
[data-skin="freshgrocer"] .chat-head{ background:var(--fg-forest); color:#fff }
[data-skin="freshgrocer"] .chat-msg.me{ background:var(--fg-green); color:#fff }
[data-skin="freshgrocer"] .chat-msg.bot{ background:var(--fg-mint); color:var(--ink) }

/* ---- Loyalty ---- */
[data-skin="freshgrocer"] .points-badge,
[data-skin="freshgrocer"] .badge.b-info{ background:var(--fg-cream); color:#8a5d0c }

/* ==========================================================================
   7b · CMS pages — About, FAQ, policies (page.php)

   The template has hand-built about.html and faq.html. Ours are rows in
   `pages`, written by the shop, so there is no fixed markup to style — only
   the shape admin's editor produces: an <h2> per section, then one <p> per
   question with the question in <b> and the answer after a <br>.
   ========================================================================== */

[data-skin="freshgrocer"] .cms-hero{
  background:linear-gradient(120deg,var(--fg-mint) 0%,#f3fbf4 55%,var(--fg-cream) 100%);
  border-bottom:1px solid var(--line);
}
[data-skin="freshgrocer"] .cms-ic{ background:#fff; box-shadow:var(--shadow-sm) }
[data-skin="freshgrocer"] .crumbs a{ color:var(--fg-green-700) }
[data-skin="freshgrocer"] .cms-content h2{
  font-family:var(--fg-head); color:var(--fg-forest);
  border-left:4px solid var(--fg-green); padding-left:12px;
}

/* Each question becomes a card. :has() is the whole trick — it picks the
   paragraphs that OPEN with a bold question and leaves ordinary prose alone,
   so a policy page of flowing text is not chopped into boxes. Browsers
   without :has() simply keep the plain paragraph, which reads fine. */
[data-skin="freshgrocer"] .cms-content p:has(> b:first-child){
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin:10px 0;
  transition:border-color .25s, box-shadow .25s;
}
[data-skin="freshgrocer"] .cms-content p:has(> b:first-child):hover{
  border-color:var(--fg-mint-2); box-shadow:var(--shadow-sm);
}
[data-skin="freshgrocer"] .cms-content p > b:first-child{
  font-family:var(--fg-head); color:var(--fg-forest); font-size:15.5px;
}
[data-skin="freshgrocer"] .cms-cta{
  background:var(--fg-cream); border:1px solid #f4e3c4; border-radius:var(--radius-lg);
}

/* ==========================================================================
   8 · Phones
   ========================================================================== */

@media(max-width:560px){
  [data-skin="freshgrocer"] .prod-card{ border-radius:18px; padding:10px }
  [data-skin="freshgrocer"] h1{ font-size:26px }
  [data-skin="freshgrocer"] .cat-tile{ border-radius:var(--radius) }
}

/* ==========================================================================
   9 · Motion
   The template hides sections until they scroll into view and restores them
   for anyone who asked not to have that. We keep the second half only —
   content that is invisible until JS runs is content a search engine and a
   reader with JS off never see.
   ========================================================================== */

@media(prefers-reduced-motion:reduce){
  [data-skin="freshgrocer"] .prod-card:hover,
  [data-skin="freshgrocer"] .cat-tile:hover,
  [data-skin="freshgrocer"] .btn:hover{ transform:none }
  [data-skin="freshgrocer"] .track-step.current .ts-dot{ animation:none }
}