:root{--color-primary:#2563eb;--color-text:#1f2933;--color-muted:#6b7280;--color-bg:#ffffff;--color-surface:#f7f8fa;--color-border:#e5e7eb;--container:72rem}
*,::before,::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--color-text);background:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.25rem}
.site-header{border-bottom:1px solid var(--color-border);position:relative}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand img{height:2rem;width:auto}
.brand span{font-weight:600;font-size:1.125rem;color:var(--color-text)}
.nav-links{display:flex;align-items:center;gap:1.25rem}
.nav-links a{color:var(--color-text)}
.nav-links .lang{display:flex;gap:.5rem;margin-left:.5rem}
.nav-links .current{font-weight:600}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--color-text)}
.hero{padding:5rem 0;text-align:center;background:var(--color-surface)}
.hero .overline{text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);font-size:.8rem;margin:0 0 .5rem}
.hero h1{font-size:2.5rem}
.hero .lead{color:var(--color-muted);font-size:1.125rem;max-width:40rem;margin:1rem auto 0}
.btn{display:inline-block;margin-top:1.5rem;padding:.75rem 1.5rem;background:var(--color-primary);color:#fff;border-radius:.5rem;font-weight:500}
.btn:hover{opacity:.92;text-decoration:none}
.features{padding:4rem 0}
.features h2{text-align:center;margin-bottom:2rem}
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{padding:1.5rem;border:1px solid var(--color-border);border-radius:.75rem;background:#fff}
.card-icon{font-size:1.75rem;margin-bottom:.5rem}
.content{padding:3rem 0}
.error-page{padding:6rem 0;text-align:center}
.narrow{max-width:34rem}
.product-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));margin-top:1.5rem}
.product-card{display:block;border:1px solid var(--color-border);border-radius:.75rem;overflow:hidden;color:var(--color-text);background:#fff}
.product-card:hover{text-decoration:none;border-color:var(--color-primary)}
.product-card img{width:100%;aspect-ratio:1;object-fit:cover}
.product-card-placeholder{width:100%;aspect-ratio:1;background:var(--color-surface)}
.product-card-body{padding:.9rem 1rem}
.product-card-body h3{font-size:1rem;margin:0 0 .25rem}
.product-card-price{margin:0;font-weight:600}
.product-card-price s{color:var(--color-muted);font-weight:400;margin-left:.4rem}
.pdp-layout{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:1.5rem}
.pdp-media img{width:100%;border-radius:.75rem}
.pdp-price{font-size:1.5rem;font-weight:700;margin:.5rem 0 0}
.pdp-compare{color:var(--color-muted)}
.pdp-group{margin:1.25rem 0}
.pdp-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.pdp-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--color-border);border-radius:2rem;padding:.4rem .9rem;cursor:pointer}
.pdp-chip:has(input:checked){border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,#fff)}
.pdp-chip input{accent-color:var(--color-primary)}
.pdp-swatch{width:.9rem;height:.9rem;border-radius:50%;border:1px solid var(--color-border);display:inline-block}
.pdp-qty{max-width:6rem}
.pdp-description{margin-top:2rem;color:var(--color-muted)}
.cart-table td{vertical-align:middle}
.cart-line-media img{width:56px;height:56px;object-fit:cover;border-radius:.5rem}
.cart-qty-form{display:inline-flex;align-items:center;gap:.6rem}
.cart-qty-btn{border:1px solid var(--color-border);background:#fff;border-radius:.4rem;width:1.75rem;height:1.75rem;cursor:pointer}
.cart-remove{border:0;background:none;font-size:1.2rem;color:var(--color-muted);cursor:pointer}
.cart-subtotal{font-size:1.1rem;margin-top:1rem}
.checkout-summary{border:1px solid var(--color-border);border-radius:.75rem;padding:1rem 1.25rem;margin:1.25rem 0;background:var(--color-surface)}
.checkout-summary p{margin:.25rem 0}
.checkout-total{font-size:1.15rem}
/* Delivery picker. Radios are reset to their natural size on purpose: the blanket
   input{width:100%;padding:…} rule these prototype-derived themes carry turns a radio into a full-width
   empty panel with the label stranded beside it — the same bug the checkout consent checkbox hit. */
.delivery-options{margin:1.25rem 0}
.delivery-option{display:flex;align-items:center;gap:.75rem;border:1px solid var(--color-border);border-radius:.6rem;padding:.75rem 1rem;margin:.4rem 0;cursor:pointer}
.delivery-option:hover{border-color:var(--color-accent,#888)}
.delivery-option input[type=radio]{width:auto;padding:0;margin:0;flex:0 0 auto}
.delivery-option-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.delivery-option-label{font-weight:600}
.delivery-option-desc{font-size:.85rem;opacity:.7}
.delivery-option-desc:empty{display:none}
.delivery-option-price{flex:0 0 auto;font-weight:600;white-space:nowrap}
.delivery-option-price:empty::before{content:"—";opacity:.5}
.checkout-coupon .field-row{grid-template-columns:1fr auto;align-items:end}
.checkout-result{text-align:center;padding:5rem 0}
@media(max-width:720px){.pdp-layout{grid-template-columns:1fr}}
.account-page h1{font-size:1.75rem}
.account-form{display:flex;flex-direction:column;gap:.5rem;margin:1.25rem 0}
.label{font-size:.85rem;font-weight:600;color:var(--color-muted)}
.input{padding:.65rem .8rem;border:1px solid var(--color-border);border-radius:.5rem;font:inherit;width:100%}
.input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:transparent}
.field-row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--color-muted);margin:.25rem 0}
.account-form .btn{margin-top:.75rem;border:0;cursor:pointer;font:inherit}
.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}
.account-divider{text-align:center;color:var(--color-muted);margin:1.5rem 0;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.account-alt{color:var(--color-muted);font-size:.9rem;margin-top:1.5rem}
.account-greeting{color:var(--color-muted)}
.account-tiles{margin:1.5rem 0}
.account-tiles .card{color:var(--color-text)}
.account-tiles .card:hover{text-decoration:none;border-color:var(--color-primary)}
.account-tiles p{color:var(--color-muted);font-size:.9rem;margin:0}
.account-logout{margin-top:1rem}
.account-logout .btn{border:1px solid var(--color-border);cursor:pointer;font:inherit;margin-top:0}
.account-subhead{margin-top:2.5rem;font-size:1.15rem}
.account-table{width:100%;border-collapse:collapse;margin:1rem 0}
.account-table th,.account-table td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--color-border);font-size:.95rem}
.account-table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted)}
.alert{background:#fef3cd;border:1px solid #e6d9a8;color:#664d03;padding:.75rem 1rem;border-radius:.5rem;margin:1rem 0}
.site-footer{padding:3rem 0;background:var(--color-surface);color:var(--color-muted);text-align:center;font-size:.9rem}
.site-footer p{margin:.25rem 0}
.site-footer .brand{font-weight:600;color:var(--color-text)}
.site-footer .credit{margin-top:1rem}
@media(max-width:640px){
    .nav-toggle{display:block}
    .nav-links{display:none;position:absolute;top:4rem;left:0;right:0;flex-direction:column;align-items:flex-start;background:#fff;padding:1rem 1.25rem;border-bottom:1px solid var(--color-border);z-index:20}
    .nav-links.open{display:flex}
    .hero h1{font-size:2rem}
}


/* ── Kidoo brand ───────────────────────────────────────────────────────────────
   THE PALETTE AND THE FONTS ARE DESIGN TOKENS, NOT CSS. They live on the site's `design`
   settings (Settings → Design), so `<style>{{ design_css }}</style>` emits them ABOVE this
   file — and emits the @import that actually loads Barlow Condensed and Inter. Re-declaring
   --sl-primary here would win the cascade and silently detach the site from that editor,
   which is exactly what this file used to do.

   What is left here is what a token cannot say: the brand green that is NOT the button
   colour, the heading treatment, and the components kidoo wears differently.
   ------------------------------------------------------------------------------------- */
:root{
  /* The bright brand green of the logo. It is 1.9:1 on white, so it is an ACCENT and never a
     button or a link — the retired app drew exactly this distinction (--kidoo-primary vs
     --kidoo-primary-dark), and --sl-primary is the dark one. */
  --kidoo-brand:#0AC959;
  --sl-primary-hover:#086829;
  --sl-accent:#f5a623;
  --sl-star:#f5a623;
  /* The starter sheet's own variables, kept in step with the tokens so the components it
     styles (checkout form, delivery picker, account pages) wear the same palette. */
  --color-primary:#0a7d37;
  --color-text:#1a1a1a;
  --color-muted:#6c757d;
  --color-border:#e6e6e6;
  --color-surface:#f6f8f7;
}

/* Headings are the brand's signature: Barlow Condensed, upper case, widely tracked. Without
   this the site reads as the platform default in a condensed face, which is not the same
   design at all. */
h1,h2,h3,h4,h5,h6,
.sl-heading,.sl-feature__title,.sl-hero__heading{
  font-family:var(--sl-font-heading);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
}
.sl-hero__heading{letter-spacing:.08em}
.sl-eyebrow,.sl-feature__overline{
  font-family:var(--sl-font-heading);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--sl-primary);
  font-weight:600;
}

/* Buttons: condensed, upper case, pill — and they lift on hover, as the app's did. */
.sl-btn,.btn{
  font-family:var(--sl-font-heading);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  border-radius:999px;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.sl-btn--primary:hover,.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(10,125,55,.3);
}

/* ── Header ────────────────────────────────────────────────────────────────────
   MATCHED TO THE SHIPPED SITE, NOT TO ITS STYLESHEET. The retired app's site.css carried a
   `.kidoo-nav` block -- Barlow Condensed, upper case, .08em tracking, a softer shadow -- and the
   <nav> it shipped NEVER CARRIED THAT CLASS. The string `kidoo-nav` occurs zero times in the
   archived page. Those rules were dead: what the owner actually looked at every day was Bootstrap's
   `navbar navbar-light bg-light px-3 shadow-sm`, i.e. Inter at 15px in sentence case on a #F8F9FA
   bar. The first migration of this header implemented the dead intent, which is why it read as a
   different site rather than as a restyle. Every value below is measured off the original. */
.sl-header{
  background:#f8f9fa;                              /* Bootstrap .bg-light */
  backdrop-filter:none;
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);    /* Bootstrap .shadow-sm */
}
/* The original was FULL BLEED with 16px gutters -- `px-3` on the nav, no container. Boxing it into
   the 1200px content container moved the logo 128px inboard on a 1440 screen, which is the single
   most visible difference after the typography. */
.sl-header .sl-container{max-width:none;padding-inline:16px}
.sl-header__inner{min-height:93px;gap:16px}
.sl-header__brand img{height:67px;max-width:none}
.sl-header__nav a{
  font-family:var(--sl-font-body);
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
  font-size:.9375rem;                              /* site.css body { font-size: .9375rem } */
  color:rgba(0,0,0,.65);                           /* Bootstrap .navbar-light .nav-link */
  padding:8px;
}
.sl-header__nav a:hover{background:transparent;color:rgba(0,0,0,.8)}
/* The original had NO active state -- the current page's link looked like every other link. */
.sl-header__nav a.is-active{color:rgba(0,0,0,.65);font-weight:400}
.sl-header__cart-count{background:#dc3545}
.sl-lang>summary{border:1px solid var(--sl-border);border-radius:999px;padding:5px 10px;font-size:.8125rem}

@media(max-width:720px){
  .sl-header__inner{min-height:83px}
  .sl-header__brand img{height:67px}
  .sl-header__nav a{font-size:1rem;padding:10px 4px}
}

/* ── Sections ────────────────────────────────────────────────────────────────────
   NO BARE `.sl-section` PADDING RULE HERE. The header is a `.sl-section` too, and the platform
   exempts it (`.sl-section--site-header{padding-block:0}`) -- but a bare `.sl-section` rule in THIS
   sheet ties on specificity and wins on load order, which gave the header a full band's padding above
   and below its 76px bar: 220px tall, 144px of empty white around the logo. Section spacing is a
   DESIGN TOKEN (`section_padding`, Settings -> Design); the platform applies it and already scales it
   down on small screens. */
.sl-section--hero{padding-block:0}
.sl-card{
  border-radius:var(--sl-radius);
  border:1px solid var(--sl-border);
  background:#fff;
  box-shadow:0 .125rem .5rem rgba(0,0,0,.06);
}
.sl-card:hover{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.09)}

/* A feature card that carries a photograph: the picture is the point, so the caption sits
   under it and the icon disc is not drawn. */
.sl-feature__media{aspect-ratio:4/3}
.sl-feature h3{font-size:1.05rem}

/* Reviews: the stars are the brand's amber, and a reviewer's photo is round. */
.sl-stars,.sl-quote__stars{color:var(--sl-star)}
.sl-quote-avatar--photo img{border-radius:50%;width:48px;height:48px;object-fit:cover}

/* Footer -- MEASURED OFF THE ORIGINAL, which used `.kidoo-footer` and, unlike `.kidoo-nav`, really
   did ship it, so those rules were live. It was NEUTRAL NEAR-BLACK, never green: a #1a1a1a ground,
   #e6e6e6 body text (the source comment records it being lightened from #ccc to clear AA on that
   ground), white headings at 1rem with .08em tracking, links #e6e6e6 turning white and underlined on
   hover, 3rem/1.5rem vertical padding. The first migration of this footer invented a dark green and a
   brand-green hover; the site never had either. */
/* TWO classes, because the platform's own chrome exemption is now `.sl-section.sl-section--site-footer
   { padding-block: 0 }` at (0,2,0) -- a single-class rule here loses to it and the footer collapses to
   zero padding. The original was 3rem top, 1.5rem bottom. */
.sl-section.sl-section--site-footer{
  background:#1a1a1a;
  color:#e6e6e6;
  padding-block:3rem 1.5rem;
}
.sl-section--site-footer a{color:#e6e6e6;text-decoration:none}
.sl-section--site-footer a:hover{color:#fff;text-decoration:underline}
.sl-section--site-footer a:focus-visible{color:#fff;text-decoration:underline;outline:2px solid #fff;outline-offset:2px}
.sl-section--site-footer h2,.sl-section--site-footer h3,.sl-section--site-footer h4,.sl-section--site-footer .sl-footer__heading{
  color:#fff;
  font-size:1rem;
  margin-bottom:1rem;
  letter-spacing:.08em;
}
/* 24px minimum tap target on footer nav links, as the original set (WCAG 2.5.8). */
.sl-section--site-footer li a{display:inline-block;padding:6px 0;min-height:24px;line-height:1.5}

/* Checkout: keep the seed's structure, wear kidoo's colours. */
.delivery-option{border-radius:var(--sl-radius)}
.delivery-option:has(input:checked){border-color:var(--sl-primary);background:rgba(10,125,55,.06)}
.checkout-total strong{color:var(--sl-primary)}

/* A BUTTON IS A LINK, and the platform sheet colours links with `.sl-body a` -- one class and one
   element, which out-specifies `.btn` above and repaints this label in the primary colour. Since that
   is also the button's BACKGROUND, the words become invisible: a solid pill with nothing written on it.
   The empty-cart "keep shopping" button is where a shopper meets it. */
.sl-body a.btn{color:#fff}
.sl-body a.btn-secondary{color:var(--color-text)}

/* ── Content width ──────────────────────────────────────────────────────────────
   The retired app laid every page out in a BOOTSTRAP container, which is stepped, not a single
   max-width. The managed site uses a flat 1200px, so every page on the site was a different width
   from the one it replaced -- 1320 vs 1200 at 1440, but 960 vs 1100 at 1100, where the live page is
   WIDER. Measured at five viewports against the running original; these five steps are Bootstrap 5's
   own and reproduce it exactly. */
.sl-container{width:100%;max-width:none;padding-inline:12px;margin-inline:auto}
@media(min-width:576px){.sl-container{max-width:540px}}
@media(min-width:768px){.sl-container{max-width:720px}}
@media(min-width:992px){.sl-container{max-width:960px}}
@media(min-width:1200px){.sl-container{max-width:1140px}}
@media(min-width:1400px){.sl-container{max-width:1320px}}
/* The header was full-bleed with 16px gutters (`px-3` on the navbar, no container) -- restated after
   the block above so it still wins. */
.sl-header .sl-container{max-width:none;padding-inline:16px}

/* ── Footer detail ──────────────────────────────────────────────────────────────
   Measured against the original: three equal columns, a white condensed uppercase brand at 1rem, the
   about paragraph in the footer's own body colour at Bootstrap's .small, and a CENTRED bottom line. */
/* Bootstrap's `.row` pulls its columns 12px outside the container's padding, so the first column's
   box starts at the container EDGE, not 12px in. Without the negative margin the three columns land
   at 72/504/936 against the original's 60/500/940. */
.sl-section--site-footer .sl-footer__inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  padding-block:0;
  margin-inline:-12px;
}
.sl-section--site-footer .sl-footer__inner > *{padding-inline:12px}
/* The original's body was .9375rem, so Bootstrap's `.small` resolved to 13.125px, not the 14px an
   em of the 16px root gives. Setting the footer's own base restores the whole scale, not one label. */
.sl-section--site-footer{font-size:.9375rem}
.sl-section--site-footer .sl-footer__brand{
  color:#fff;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  margin-bottom:1rem;
}
.sl-section--site-footer .sl-footer__about{
  color:#e6e6e6;
  font-size:.875em;
  max-width:none;
}
.sl-section--site-footer .sl-footer__group{padding-inline:12px}
.sl-section--site-footer .sl-footer__bottom{
  display:block;
  text-align:center;
  color:rgba(255,255,255,.85);
  border-top-color:rgba(255,255,255,.1);
  margin-top:2rem;
}
.sl-section--site-footer .sl-footer__note{
  text-align:center;
  color:rgba(255,255,255,.75);
  font-size:.75rem;
  opacity:1;
  margin-top:.25rem;
}
@media(max-width:768px){
  .sl-section--site-footer .sl-footer__inner{grid-template-columns:1fr;gap:24px}
}


/* page-title band -- the brand-green strip the retired app put at the top of every page. The platform
   default is a pale grey, which is right for a site that has not said otherwise and was never kidoo's.
   Values copied from the old site.css: #078a3a under a 135deg green gradient, a second top-to-bottom
   wash, 3.5rem of vertical padding and a white heading. */
.sl-section--page-header{
  position:relative;
  padding-block:3.5rem;
  background-color:#078a3a;
  background-image:linear-gradient(to bottom,rgba(10,201,89,.82),rgba(10,201,89,.92));
  background-size:cover;
  background-position:center 30%;
}
.sl-section--page-header .sl-container{position:relative;z-index:2}
.sl-section--page-header h1,
.sl-section--page-header .sl-heading{color:#fff}
.sl-section--page-header p,
.sl-section--page-header .sl-subheading,
.sl-section--page-header .sl-eyebrow{color:rgba(255,255,255,.92)}
.sl-section--page-header .sl-crumbs,
.sl-section--page-header .sl-crumbs a{color:rgba(255,255,255,.85)}