/* ==========================================================================
   Good Play Shop, shared design system
   Headings: VAG Rounded (self hosted). Body: Mulish (Google Fonts).
   Teal #00a4cc = primary / consumer. Red #da0d15 = precision accent / retailer.
   ========================================================================== */

@font-face{
  font-family:'VAG Rounded';
  src:url('fonts/VAG Rounded Std Bold.otf') format('opentype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --teal:#00a4cc;
  --teal-dark:#0a7ea0;
  --teal-tint:#e3f4f9;
  --red:#da0d15;
  --red-dark:#ad0a10;
  --red-tint:#fbe6e6;
  --ink:#171a1c;
  --muted:#5b6266;
  --line:#e7e0d4;
  --paper:#faf7f2;
  --card:#ffffff;
  --accent:var(--teal);
  --accent-dark:var(--teal-dark);
  --accent-tint:var(--teal-tint);

  --shadow-sm:0 1px 2px rgba(23,26,28,.06), 0 2px 6px rgba(23,26,28,.05);
  --shadow-md:0 4px 14px rgba(23,26,28,.08), 0 2px 4px rgba(23,26,28,.05);
  --shadow-lg:0 18px 40px rgba(23,26,28,.14), 0 6px 16px rgba(23,26,28,.08);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;

  --container:1160px;
  --container-narrow:760px;

  font-size:16px;
}

body[data-section="retailer"]{
  --accent:var(--red);
  --accent-dark:var(--red-dark);
  --accent-tint:var(--red-tint);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

body{
  margin:0;
  font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'VAG Rounded','Mulish',system-ui,sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4vw + 1rem,3rem)}
h2{font-size:clamp(1.5rem,2.4vw + 1rem,2.1rem)}
h3{font-size:1.2rem}
h4{font-size:1.02rem}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:var(--accent);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s ease}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:2px;
  border-radius:4px;
}

img,svg{max-width:100%;display:block}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 24px}

.skip-link{
  position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:8px;z-index:200;font-weight:700;
  transition:top .15s ease;
}
.skip-link:focus{top:12px}

/* ---------- Header / Nav ---------- */
header.site{
  background:rgba(250,247,242,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.brand-mark img{height:44px;width:auto;display:block;border-radius:8px}
.brand-mark svg{width:26px;height:26px;stroke:#fff}
.brand-text{line-height:1.15}
.brand-text b{display:block;font-family:'VAG Rounded','Mulish',sans-serif;font-weight:700;font-size:1.02rem;color:var(--ink)}
.brand-text span{display:block;font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.brand-logo{height:44px;width:auto;display:block}

nav.main{display:flex;align-items:center;gap:4px}
nav.main a{
  color:var(--ink);font-weight:700;font-size:.92rem;text-decoration:none;
  padding:10px 14px;border-radius:10px;transition:background .15s ease,color .15s ease;
}
nav.main a:hover{background:var(--accent-tint)}
nav.main a.active{color:var(--accent-dark);background:var(--accent-tint)}
nav.main a.retailer-link{color:var(--red-dark)}

.nav-cta{margin-left:6px}

.menu-btn{
  display:none;background:none;border:2px solid var(--line);border-radius:10px;
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;
}
.menu-btn svg{width:22px;height:22px;stroke:var(--ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;cursor:pointer;font-family:'Mulish',sans-serif;font-weight:700;font-size:.95rem;
  padding:14px 24px;border-radius:12px;text-decoration:none;line-height:1.2;
  transition:transform .1s ease,box-shadow .18s ease,background .15s ease;
  box-shadow:var(--shadow-sm);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark);box-shadow:var(--shadow-md)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);box-shadow:var(--shadow-md)}
.btn-ghost{background:#fff;color:var(--accent-dark);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-tint)}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.8)}
.btn-outline-white:hover{background:rgba(255,255,255,.15)}
.btn-sm{padding:9px 16px;font-size:.85rem;border-radius:9px}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn svg{width:18px;height:18px;stroke:currentColor;flex:0 0 auto}

/* ---------- Sections & layout helpers ---------- */
section{padding:64px 0}
.section-tight{padding:40px 0}
/* .eyebrow (pill/chip section label) deprecated at the client's request, it read
   as a generic template tell. Kept here only so any stray markup does not break
   visually; plain heading hierarchy is used instead. New markup should not add
   .eyebrow spans. Prefer .kicker for a plain-text, non-pill label if needed. */
.eyebrow{display:none}
.kicker{
  display:block;font-size:.86rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--accent-dark);margin-bottom:10px;
}
.section-head{max-width:640px;margin:0 auto 40px;text-align:center}
.section-head p{color:var(--muted);font-size:1.05rem}
.section-head.left{text-align:left;margin-left:0}

/* ---------- Breadcrumb navigation ---------- */
.breadcrumb{margin:18px 0 8px}
.breadcrumb ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:.86rem;color:var(--muted);
}
.breadcrumb li{display:flex;align-items:center;gap:6px}
.breadcrumb li:not(:last-child)::after{
  content:"/";color:var(--line);font-weight:700;
}
.breadcrumb a{color:var(--muted);text-decoration:none;font-weight:600}
.breadcrumb a:hover{color:var(--accent-dark);text-decoration:underline}
.breadcrumb li[aria-current="page"]{color:var(--ink);font-weight:700}

.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-tint{background:var(--accent-tint)}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:26px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;
}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.icon-badge{
  width:52px;height:52px;border-radius:14px;background:var(--accent-tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.icon-badge svg{width:26px;height:26px;stroke:var(--accent-dark);fill:none;stroke-width:1.7}

.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* ---------- Hero ---------- */
.hero{padding:72px 0 64px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:2}
.hero h1{margin-bottom:18px}
.hero .lede{font-size:1.15rem;color:var(--muted);max-width:520px;margin-bottom:28px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero-illustration{width:100%;height:auto}

/* ---------- Tags / chips / badges ---------- */
.tag{
  font-size:.76rem;font-weight:700;background:#f2ede3;color:#5c5346;border-radius:99px;
  padding:5px 12px;display:inline-block;
}
.chip{
  border:1.5px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-weight:700;
  font-size:.85rem;padding:9px 16px;border-radius:99px;cursor:pointer;transition:all .15s ease;
}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

.badge{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;padding:5px 11px;border-radius:99px;
}
.badge svg{width:13px;height:13px;stroke:currentColor}
.badge.registered{background:var(--teal-tint);color:var(--teal-dark)}
.badge.display{background:#fff1e6;color:#b1560f}
.badge.flagship{background:#fbe6e6;color:var(--red-dark)}

/* ---------- Forms ---------- */
label.f{display:block;font-size:.82rem;font-weight:700;color:#463f38;margin-bottom:6px}
label.f .req{color:var(--red)}
input,select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:.96rem;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
textarea{min-height:90px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field-row.one{grid-template-columns:1fr}
.field-error{color:var(--red-dark);font-size:.82rem;margin-top:5px;display:none}
.field-error.show{display:block}
.checks{display:flex;flex-direction:column;gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:#39332c}
.check input{width:19px;height:19px;margin-top:2px;flex:0 0 auto}

/* ---------- Footer ---------- */
footer.site{background:#1e2426;color:#dfe4e5;margin-top:0;padding:48px 0 28px}
footer.site .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
footer.site h4{color:#fff;font-size:.95rem;margin-bottom:14px}
footer.site a{color:#b9c3c5;text-decoration:none;display:block;padding:4px 0;font-size:.92rem}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .foot-bottom{border-top:1px solid #333c3e;padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.82rem;color:#8b9598}
footer.site small{color:#8b9598}

/* ---------- Utility ---------- */
.center{text-align:center}
.mt-0{margin-top:0}
.text-muted{color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.fade-up{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.fade-up.in-view{opacity:1;transform:translateY(0)}

.empty-state{text-align:center;color:var(--muted);padding:44px 20px;background:#fff;border:1px dashed var(--line);border-radius:var(--radius-md)}

/* Small brand accent image, reused across empty states and closing cards
   sitewide to reinforce branding without competing with page content. */
.brand-accent-img{width:100px;height:auto;opacity:.85;margin:0 auto 14px;display:block}
.brand-accent-img.inline{margin:0 14px 0 0;display:inline-block;vertical-align:middle}
@media(max-width:760px){
  .brand-accent-img{width:80px}
}

.skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr;text-align:left}
  footer.site .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  nav.main{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:fixed;top:73px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    padding:10px 20px 18px;box-shadow:var(--shadow-md);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
  }
  nav.main.open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}
  nav.main a{margin-left:0;padding:14px 12px;border-bottom:1px solid var(--line)}
  nav.main a:last-child{border-bottom:none}
  .menu-btn{display:flex}
  .nav-cta{display:block;margin:10px 0 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  section{padding:44px 0}
  footer.site .foot-grid{grid-template-columns:1fr}
}

@media (max-width:480px){
  .field-row{grid-template-columns:1fr}
}

/* ---------- Hero illustration blobs ---------- */
.hero-blob-wrap{position:relative}
.hero-illustration .blob{opacity:.9}

/* Static Good Play Guide logo, overlaid centred at the bottom of the hero
   illustration. This sits on top of the animated SVG but does not itself
   animate or scroll-fade, it stays fixed in place as a brand anchor. */
.hero-logo-overlay{
  position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);
  width:21%;max-width:105px;height:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.08));
}
@media(max-width:760px){
  .hero-logo-overlay{width:26%;max-width:90px;top:53%}
}

/* ---------- Search panel (find a retailer) ---------- */
/* Panel sits in normal flow below the hero, no negative margin, so the hero's
   own bottom padding is the only thing separating headline text from the
   panel. This avoids the overlap the client flagged in review, where a
   floating panel with a large negative top margin collided with hero copy
   at narrower widths. */
.panel{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:26px;margin-top:0;position:relative;z-index:5;border:1px solid var(--line);
}
.controls{display:grid;grid-template-columns:1.5fr 1fr auto;gap:14px;align-items:end}
.btnrow{display:flex;gap:10px}
.subrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.count{font-size:.88rem;color:var(--muted);font-weight:700}
.msg{
  font-size:.88rem;color:var(--teal-dark);background:var(--teal-tint);border:1px solid #c9e9f2;
  border-radius:10px;padding:10px 14px;margin-top:12px;display:none;
}
.msg.show{display:block}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.view-toggle{display:flex;gap:6px;background:var(--paper);border-radius:11px;padding:4px;border:1px solid var(--line)}
.view-toggle button{
  border:none;background:transparent;font-family:inherit;font-weight:700;font-size:.85rem;
  padding:8px 16px;border-radius:8px;cursor:pointer;color:var(--muted);
}
.view-toggle button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}

/* ---------- Filter row: category + age popovers, replaces long chip rows ---------- */
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.filter-popover{position:relative}
.filter-trigger{
  display:flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink);font-family:inherit;font-weight:700;font-size:.86rem;padding:9px 14px;
  border-radius:11px;cursor:pointer;transition:border-color .15s ease;
}
.filter-trigger:hover{border-color:var(--accent)}
.filter-trigger[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-dark);background:var(--accent-tint)}
.filter-trigger svg{transition:transform .15s ease}
.filter-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.filter-trigger-count{
  background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;min-width:18px;height:18px;
  border-radius:99px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}
.filter-panel{
  position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:16px;z-index:30;min-width:280px;
}
.filter-panel[hidden]{display:none}
.filter-panel-options{display:flex;flex-wrap:wrap;gap:8px;max-width:340px}
.filter-panel-options label{
  display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:99px;
  padding:7px 13px;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .15s ease;color:var(--ink);
}
.filter-panel-options label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.filter-panel-options input{position:absolute;opacity:0;width:0;height:0}
.filter-panel-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.link-btn{background:none;border:none;font-family:inherit;font-weight:700;font-size:.85rem;color:var(--muted);cursor:pointer;padding:6px}
.link-btn:hover{color:var(--ink);text-decoration:underline}
.btn-sm{padding:8px 16px;font-size:.85rem;border-radius:9px}

.active-filter-pills{display:flex;flex-wrap:wrap;gap:8px}
.active-filter-pill{
  display:inline-flex;align-items:center;gap:6px;background:var(--accent-tint);color:var(--accent-dark);
  font-size:.8rem;font-weight:700;padding:6px 10px 6px 12px;border-radius:99px;
}
.active-filter-pill button{
  background:rgba(0,0,0,.08);border:none;border-radius:50%;width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;padding:0;
}

/* Age dual-handle slider, replaces four separate age chips */
.filter-panel-slider{min-width:260px}
.age-slider-value{font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:14px;text-align:center}
.age-slider{position:relative;height:32px;margin:0 4px}
.age-slider-track{position:absolute;top:50%;left:0;right:0;height:4px;background:var(--line);border-radius:99px;transform:translateY(-50%)}
.age-slider-range{position:absolute;top:50%;height:4px;background:var(--accent);border-radius:99px;transform:translateY(-50%)}
.age-slider input[type="range"]{
  position:absolute;top:0;left:0;width:100%;height:32px;margin:0;background:none;
  -webkit-appearance:none;appearance:none;pointer-events:none;
}
.age-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);box-shadow:var(--shadow-sm);cursor:pointer;margin-top:0;
}
.age-slider input[type="range"]::-moz-range-thumb{
  pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;
  border:3px solid var(--accent);box-shadow:var(--shadow-sm);cursor:pointer;
}
.age-slider input[type="range"]::-webkit-slider-runnable-track{background:transparent}
.age-slider-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:6px;font-weight:600}

.subrow-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.sort-inline{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);font-weight:700}
.sort-inline select{
  width:auto;padding:8px 12px;font-size:.85rem;font-weight:600;color:var(--ink);
  border-radius:9px;border:1.5px solid var(--line);
}

@media(max-width:640px){
  .subrow{flex-direction:column;align-items:stretch}
  .subrow-right{margin-left:0;justify-content:space-between}
  .filter-panel{left:50%;transform:translateX(-50%)}
}

#map{width:100%;height:460px;border-radius:var(--radius-md);border:1px solid var(--line);z-index:1}
#retailerMap{width:100%;height:280px;border-radius:var(--radius-md);border:1px solid var(--line);z-index:1}

.retailer-card{display:flex;flex-direction:column;gap:10px}
.retailer-card .addr{font-size:.9rem;color:var(--muted)}
.retailer-card .dist{font-size:.82rem;font-weight:800;color:var(--accent-dark)}
.retailer-card .links{margin-top:auto;padding-top:10px;display:flex;gap:16px;font-size:.88rem;font-weight:700;border-top:1px solid var(--line)}

.email-capture{
  background:#fff;border:1px dashed var(--accent);border-radius:var(--radius-md);
  padding:22px;margin-top:22px;text-align:center;
}
.email-capture form{display:flex;gap:10px;max-width:420px;margin:14px auto 0;flex-wrap:wrap;justify-content:center}
.email-capture input{flex:1;min-width:220px}
.thankyou{display:none;color:var(--teal-dark);font-weight:700;margin-top:10px}
.thankyou.show{display:block}

.dl-secondary{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.85rem;color:var(--muted);
}

/* ---------- Steps / tiers / testimonials ---------- */
.steps{counter-reset:s}
.step{position:relative}
.step-num{
  counter-increment:s;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;
  margin-bottom:12px;font-family:'VAG Rounded','Mulish',sans-serif;
}
.step-num::before{content:counter(s)}

.tier-card{display:flex;flex-direction:column;position:relative}
.tier-card.featured{border:2px solid var(--accent)}
.tier-card .pill{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;
  font-size:.7rem;font-weight:800;padding:5px 14px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em;
}
.tier-card .price{font-family:'VAG Rounded','Mulish',sans-serif;font-size:1.5rem;font-weight:700;margin:8px 0 2px}
.tier-card .price small{font-size:.78rem;color:var(--muted);font-weight:600;font-family:'Mulish',sans-serif}
.tier-card .who-for{font-size:.86rem;color:var(--muted);margin-bottom:14px;font-style:italic}
.tier-card ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.tier-card li{padding:8px 0 8px 28px;position:relative;font-size:.92rem}
.tier-card li::before{
  content:"";position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;
  background:var(--teal-tint);
}
.tier-card li::after{
  content:"";position:absolute;left:4px;top:13px;width:10px;height:6px;border-left:2px solid var(--teal-dark);
  border-bottom:2px solid var(--teal-dark);transform:rotate(-45deg);
}

.quote-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px}
.quote-card p.quote{font-size:1.02rem;color:var(--ink);margin-bottom:16px}
.quote-card .who{font-size:.85rem;color:var(--muted);font-weight:700}

/* ---------- Product tool ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm)}
.filter-bar .field{flex:1;min-width:160px}
.product-card{position:relative}
.product-card .stock-icon{width:100%;aspect-ratio:4/3;border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden}

/* ---------- Accreditation stamp ---------- */
/* Sits on the upper left corner of a product's image, on any card that shows
   an accredited product. Kept small but legible, never covering the product
   name or key details. Only rendered on accredited products, not products
   that have not yet passed accreditation. */
.product-media{position:relative;display:block;text-decoration:none}
a.product-media:hover .prod-image{opacity:.92}
.product-title-link{color:inherit;text-decoration:none}
.product-title-link:hover{text-decoration:underline}
.accreditation-btn{width:100%;margin-top:10px;text-align:center}
.accreditation-stamp{
  position:absolute;top:10px;left:10px;width:72px;height:72px;z-index:2;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.22));
}
@media(max-width:520px){
  .accreditation-stamp{width:58px;height:58px}
}
.accreditation-stamp img{width:100%;height:100%;display:block}
.accreditation-link{font-size:.78rem;font-weight:700;color:var(--accent-dark)}
.accreditation-link:hover{text-decoration:underline}
.product-card .meta{font-size:.8rem;color:var(--muted);margin-bottom:6px}
.product-card .stock-check{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.85rem;font-weight:700}
.product-card .stock-check input{width:18px;height:18px}

.action-bar{
  position:sticky;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(23,26,28,.08);padding:16px 0;z-index:50;margin-top:32px;
}
.action-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.action-bar .count-live{font-weight:800}
.action-bar .actions{display:flex;gap:10px;flex-wrap:wrap}
.save-note{font-size:.78rem;color:var(--muted);max-width:260px}

/* ---------- FAQ ---------- */
.faq-group{margin-bottom:36px}
details.faq{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden}
details.faq summary{
  padding:18px 20px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:12px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"";width:11px;height:11px;border-right:2px solid var(--accent-dark);border-bottom:2px solid var(--accent-dark);
  transform:rotate(45deg);transition:transform .18s ease;flex:0 0 auto;
}
details.faq[open] summary::after{transform:rotate(-135deg)}
details.faq .faq-a{padding:0 20px 20px;color:var(--muted)}

/* ---------- Multi-step form (join.html) ---------- */
.progress{display:flex;gap:8px;margin-bottom:32px}
.progress .seg{flex:1;height:6px;border-radius:99px;background:var(--line)}
.progress .seg.done,.progress .seg.active{background:var(--accent)}
.step-label{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:10px}
.step-label .current{color:var(--accent-dark)}
.form-step{display:none}
.form-step.active{display:block}
.step-nav{display:flex;justify-content:space-between;margin-top:26px;gap:12px}
.declaration{background:var(--accent-tint);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px}
.success-box{
  display:none;background:#e9f7f0;border:1px solid #bde6d2;color:#1f7a54;border-radius:var(--radius-sm);
  padding:20px;font-weight:600;margin-top:20px;
}
.success-box.show{display:block}
.error-box{
  display:none;background:#fdecec;border:1px solid #f5c2c2;color:#a12525;border-radius:var(--radius-sm);
  padding:16px;margin-top:16px;font-weight:600;
}
.error-box.show{display:block}

/* ---------- Trust strip / retailer profile ---------- */
.trust-strip{
  display:flex;align-items:center;gap:16px;background:var(--teal-tint);border-radius:var(--radius-md);
  padding:20px 24px;margin:28px 0;
}
.trust-strip .icon-badge{margin-bottom:0;background:#fff}
.trust-strip p{margin:0;font-size:.92rem}

.profile-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap}

.not-found{text-align:center;padding:80px 20px}

/* ---------- Opening hours ---------- */
.hours-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.hours-table tr{border-bottom:1px solid var(--line)}
.hours-table tr:last-child{border-bottom:none}
.hours-table td{padding:11px 18px;font-size:.92rem}
.hours-table td:first-child{font-weight:700;width:40%}
.hours-table tr.is-today{background:var(--accent-tint)}
.hours-table tr.is-today td:first-child{color:var(--accent-dark)}

/* ---------- Consumer product search (find-products.html) ---------- */
.product-result-card{display:flex;flex-direction:column;gap:8px}
.product-result-card .prod-image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);background:var(--paper);margin-bottom:10px}
.product-result-card .stockists{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.product-result-card .stockists a{font-weight:700}
.price-tag{font-weight:800;color:var(--accent-dark);font-size:.92rem}

/* ---------- Headline entrance animation ---------- */
/* Word-by-word fade and rise, capped at ~600ms total, clean ease-out, no bounce.
   Disabled entirely for prefers-reduced-motion via the global rule near the top
   of this file, and again explicitly here for belt-and-braces clarity. */
.headline-animated .headline-word{
  display:inline-block;
  opacity:0;
  transform:translateY(.4em);
  animation:headline-word-in .5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--word-i, 0) * 45ms);
}
@keyframes headline-word-in{
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .headline-animated .headline-word{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}