/* ==========================================================================
   Fernwrap — components
   ========================================================================== */

/* --- Home hero — 2-up cards on warm stage, §1.3 --- */
.hero{background:var(--hero-stage);padding-block:var(--s6)}
.hero__grid{display:grid;gap:6px}
.hero__card{
  position:relative;overflow:hidden;border-radius:0;aspect-ratio:6/5;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__copy{position:relative;padding:var(--s6);display:grid;gap:var(--s3);justify-items:start}
.hero__title{
  font-size:24px;line-height:1.375;font-weight:600;letter-spacing:normal;color:#fff;max-width:24ch;
}
.hero__body{font-size:16px;line-height:1.5;color:rgba(255,255,255,.94);max-width:46ch}

/* --- Trust marquee — constant 106px, §1.4 --- */
.marquee{height:106px;display:flex;align-items:center;overflow:hidden;background:var(--pebble)}
.marquee__track{display:flex;gap:var(--s3);align-items:center;white-space:nowrap;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Category cards — §1.5 --- */
.cat-grid{display:grid;gap:var(--s5)}
.cat{position:relative;overflow:hidden;border-radius:0;aspect-ratio:6/5;display:flex;align-items:flex-end}
.cat__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat__copy{position:relative;padding:var(--s6) 36px;display:grid;gap:var(--s1)}
.cat__title{font-size:22px;line-height:1.5;font-weight:700;letter-spacing:var(--track);color:#fff}
.cat__support{font-size:14px;line-height:21px;color:rgba(255,255,255,.9)}

/* --- Editorial split — §1.6 --- */
.split{display:grid;gap:var(--s6);align-items:center}
.split__media{overflow:hidden;border-radius:var(--r-card)}
.split__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.split--flip .split__media{order:2}
.split__copy{display:grid;gap:var(--s4);justify-items:start}

/* --- Product cards — §3.3 --- */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s2)}
.prod{
  display:flex;flex-direction:column;background:var(--white);border-radius:20px;
  padding:10px;overflow:hidden;height:100%;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.prod__media{display:block;background:var(--core-lightest);border-radius:12px;overflow:hidden}
.prod__img{width:100%;aspect-ratio:1/1;object-fit:contain}
.prod__body{display:grid;gap:var(--s1);padding:var(--s3) var(--s1) var(--s2)}
.prod__title{font-size:18px;line-height:24px;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.prod__price{font-size:14px;line-height:20px;font-weight:600;color:var(--brand-ink)}
.prod__meta{font-size:14px;line-height:20px;color:var(--ui-ink)}
.prod__add{
  margin-top:auto;width:100%;padding:var(--s3) var(--s4);border-radius:var(--r-pill);
  background:var(--brand-ink);color:#fff;font-size:14px;font-weight:600;letter-spacing:normal;
  transition:background-color var(--t-base) var(--ease);
}
.prod__add:hover{background:var(--brand)}

/* --- Long-form trust + stat tiles — §1.8 --- */
.trust{display:grid;gap:var(--s8)}
.stat{
  background:var(--core-lightest);border-radius:var(--r-card);
  padding:var(--s7) var(--s6);display:grid;gap:var(--s2);justify-items:center;text-align:center;
}
.stat__value{font-size:32px;line-height:44px;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.stat__label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:var(--track);color:var(--ui-ink)}

/* --- Dark CTA band — §4.8 --- */
.cta-band{background:var(--brand-ink);color:#fff;padding:var(--s9) var(--s6)}
.cta-band__inner{display:grid;gap:var(--s4);justify-items:start;max-width:1360px;margin-inline:auto}
.cta-band__title{font-size:32px;line-height:44px;font-weight:600;letter-spacing:var(--track);color:#fff}
.cta-band__body{font-size:16px;line-height:24px;color:rgba(255,255,255,.92);max-width:60ch}

/* --- Newsletter + footer — §4.7 --- */
.news{padding:var(--s10) 0 var(--s7)}
.news__grid{display:grid;gap:var(--s4);align-items:center}
.news__title{font-size:24px;line-height:33px;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.news__form{display:flex;flex-wrap:wrap;gap:var(--s3)}
.news__input{
  flex:1 1 200px;min-width:0;height:54px;border-radius:var(--r-pill);
  border:1px solid var(--border);padding:var(--s3) var(--s6);background:var(--white);
  transition:border-color var(--t-base) var(--ease);
}
.news__input:focus{border-color:var(--brand)}
.news__btn{flex:0 0 auto;min-height:56px;padding:var(--s4) var(--s10);font-size:15px}
.news__form[hidden]{display:none}

.footer{background:var(--white);padding:var(--s8) 0 100px}
.footer__cols{display:grid;gap:0}
.footer__col{border-bottom:1px solid var(--pebble)}
.footer__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;
  padding:var(--s4) 0;font-size:16px;font-weight:600;letter-spacing:normal;
  color:var(--brand-ink);text-align:left;
}
.footer__head::after{
  content:"";width:8px;height:8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);
  transition:transform var(--t-base) var(--ease);flex:none;
}
.footer__col[data-open="true"] .footer__head::after{transform:rotate(-135deg)}
.footer__links{padding:0 0 var(--s5);display:none}
.footer__col[data-open="true"] .footer__links{display:grid;gap:var(--s3)}
.footer__links a{font-size:18.75px;line-height:22.5px;font-weight:700;letter-spacing:normal;color:var(--brand-ink)}
.footer__links a:hover{text-decoration:underline}
.footer__links a[aria-current="page"]{text-decoration:underline}
.footer__brand{padding:var(--s4) 0 var(--s6)}
.footer__blurb{font-size:16px;line-height:24px;color:var(--ink);max-width:34ch;margin-top:var(--s2)}
.footer__legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
  padding-top:var(--s6);font-size:12px;line-height:16px;color:#111;
}
.footer__legal a{text-decoration:none;color:var(--ui-ink)}
.footer__legal a:hover{text-decoration:underline}
.footer__partner{
  width:110px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--r-pill);
  font-size:10px;font-weight:700;letter-spacing:normal;color:var(--muted);
}
.footer__social{display:flex;gap:var(--s3);padding-top:var(--s5)}
.footer__social a{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--pebble);transition:background-color var(--t-base) var(--ease);
}
.footer__social a:hover{background:var(--eco-light-green)}
.footer__social svg{width:20px;height:20px;color:var(--brand-ink);fill:currentColor}

/* --- Page hero banners --- */
.page-hero{background:var(--sand)}
.page-hero__media{width:100%;aspect-ratio:16/9;object-fit:cover}
.page-hero__copy{padding-block:var(--s9);display:grid;gap:var(--s4);justify-items:start;max-width:70ch}

/* --- Compact page head — §3.1 --- */
.page-head{padding-block:var(--s10);display:grid;gap:var(--s4);max-width:70ch}

/* --- Filter row — §3.2 --- */
.filters{display:flex;flex-wrap:nowrap;gap:var(--s2);align-items:center;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--s2);-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{height:0}
.filter{
  flex:none;scroll-snap-align:start;height:28px;padding:0 var(--s3);border-radius:var(--r-pill);
  background:var(--eco-dark-green);color:#fff;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:normal;display:inline-flex;align-items:center;
  transition:background-color var(--t-base) var(--ease);
}
.filter:hover{background:var(--brand)}
.filter[aria-pressed="true"]{background:var(--brand-ink)}
.filters-bar{display:flex;flex-direction:column;gap:var(--s4)}
.filters-bar__right{display:flex;align-items:center;gap:var(--s3);justify-content:space-between}
.sort{
  height:34px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--white);
  padding:var(--s1) var(--s5);font-size:12px;font-weight:600;color:var(--ui-ink);
}
.count{font-size:14px;line-height:21px;color:var(--muted)}

/* --- Breadcrumb — §4.1 --- */
.crumbs{padding-top:var(--s6);font-size:14px;line-height:21px;color:var(--ui-ink)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center}
.crumbs li:not(:last-child)::after{content:" /";color:var(--muted);margin-left:var(--s1)}
.crumbs a:hover{text-decoration:underline}

/* --- PDP — §4.2 / §4.3 --- */
.pdp{display:grid;gap:var(--s7)}
.pdp__media{background:var(--core-lightest);border-radius:var(--r-card);overflow:hidden}
.pdp__main{width:100%;aspect-ratio:1/1;object-fit:contain}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s3)}
.thumb{
  aspect-ratio:1/1;border-radius:var(--r-pill);overflow:hidden;background:var(--core-lightest);
  border:2px solid transparent;padding:0;
  transition:border-color var(--t-base) var(--ease);
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-pressed="true"]{border-color:var(--brand-ink)}

.buybox{display:grid;gap:var(--s4);align-content:start}
.buybox__price{font-size:32px;line-height:44px;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.rating{display:flex;align-items:center;gap:var(--s2);font-size:16px;line-height:24px;color:var(--ui-ink)}
.rating__stars{color:var(--eco-dark-green);letter-spacing:2px;font-size:14px}
.field{display:grid;gap:var(--s2)}
.field__label{font-size:14px;font-weight:600;color:var(--ui-ink)}
.opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.opt{
  height:36px;padding:0 var(--s4);border-radius:var(--r-pill);border:2px solid var(--border);
  background:var(--white);font-size:14px;font-weight:600;letter-spacing:normal;color:var(--ui-ink);
  transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.opt[aria-pressed="true"]{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}

.stepper{display:flex;align-items:center;gap:var(--s3)}
.stepper__btn{
  width:54px;height:54px;flex:none;border-radius:50%;border:1px solid var(--border);
  background:var(--white);font-size:20px;line-height:1;color:var(--ui-ink);
  transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.stepper__btn:hover{border-color:var(--brand)}
.stepper__val{min-width:56px;text-align:center;font-size:18px;font-weight:600}
.stepper__hint{font-size:14px;line-height:21px;color:var(--muted)}

.input{
  width:100%;height:54px;border-radius:var(--r-pill);border:1px solid var(--border);
  padding:var(--s3) var(--s6);background:var(--white);
  transition:border-color var(--t-base) var(--ease);
}
.input:focus{border-color:var(--brand)}
.input:user-invalid{border-color:var(--error)}
textarea.input{height:auto;min-height:140px;padding:var(--s4) var(--s6);border-radius:var(--r-card);resize:vertical}
select.input{
  border-radius:var(--r-pill);appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A29FA8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 24px center;padding-right:56px;
}
.reassure{display:grid;gap:var(--s2);padding-top:var(--s2)}
.reassure li{display:flex;align-items:center;gap:var(--s2);font-size:14px;line-height:21px;color:var(--ui-ink)}
.reassure svg{width:16px;height:16px;fill:var(--eco-dark-green);flex:none}

/* --- Accordion — §4.4 --- */
.acc{border-top:1px solid var(--border)}
.acc__item{border-bottom:1px solid var(--border)}
.acc__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  width:100%;min-height:64px;padding:var(--s4) 0;text-align:left;
  font-size:16px;font-weight:600;letter-spacing:normal;color:var(--brand-ink);
}
.acc__head svg{width:16px;height:16px;flex:none;stroke:var(--muted);fill:none;stroke-width:2;transition:transform var(--t-base) var(--ease)}
.acc__item[data-open="true"] .acc__head svg{transform:rotate(180deg)}
.acc__panel{display:none;padding:0 0 var(--s6);font-size:16px;line-height:24px;color:var(--ui-ink);max-width:80ch}
.acc__item[data-open="true"] .acc__panel{display:block}

/* --- Cart — §5 --- */
.cart{display:grid;gap:var(--s7)}
.cart__rows{display:grid;gap:var(--s5)}
.line{display:grid;grid-template-columns:96px 1fr;gap:var(--s4);align-items:start}
.line__media{width:96px;height:96px;border-radius:12px;background:var(--core-lightest);overflow:hidden}
.line__media img{width:100%;height:100%;object-fit:contain}
.line__body{display:grid;gap:var(--s2)}
.line__top{display:flex;gap:var(--s3);align-items:baseline;justify-content:space-between}
.line__title{font-size:18px;line-height:24px;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.line__price{font-size:16px;line-height:20px;font-weight:600;color:var(--brand-ink);white-space:nowrap}
.line__variant{font-size:14px;line-height:21px;color:var(--ui-ink)}
.line__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);justify-content:space-between}
.line__remove{font-size:14px;line-height:21px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.line__remove:hover{color:var(--error)}
.stepper--sm .stepper__btn{width:36px;height:36px;font-size:16px;border-radius:50%}
.stepper--sm .stepper__val{min-width:40px;font-size:14px}

.summary{background:var(--white);border-radius:var(--r-card);padding:var(--s6);display:grid;gap:var(--s4)}
.sumrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:40px}
.sumrow__label{font-size:14px;line-height:20px;color:var(--ui-ink)}
.sumrow__val{font-size:16px;line-height:20px;font-weight:600;color:var(--brand-ink)}
.sumrow--total{border-top:1px solid var(--border);padding-top:var(--s4);margin-top:var(--s1)}
.sumrow--total .sumrow__label{font-size:16px;font-weight:600}
.sumrow--total .sumrow__val{font-size:32px;line-height:44px}
.sumnote{font-size:14px;line-height:21px;color:var(--ui-ink)}

.cart-empty{display:grid;gap:var(--s5);justify-items:start;padding-block:var(--s8)}
.cart-empty__media{width:100%;max-width:717px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-card)}

/* --- Contact — §6 --- */
.contact{display:grid;gap:var(--s8)}
.form-card{background:var(--white);border-radius:var(--r-card);padding:var(--s7);display:grid;gap:var(--s4)}
.check{display:flex;align-items:flex-start;gap:var(--s3);font-size:16px;line-height:24px;color:var(--ui-ink)}
.check input{width:16px;height:16px;flex:none;margin-top:4px;accent-color:var(--brand)}
.form-ok[hidden]{display:none}
.form-ok{font-size:16px;line-height:24px;color:var(--brand-ink);font-weight:600}
.contacts{display:grid;gap:var(--s6)}
.crow{display:grid;gap:var(--s1);grid-template-columns:20px 1fr;column-gap:var(--s3)}
.crow svg{width:20px;height:20px;fill:var(--eco-dark-green);grid-row:span 2;margin-top:3px}
.crow__label{font-size:14px;font-weight:600;color:var(--muted)}
.crow__val{font-size:16px;line-height:24px;color:var(--ui-ink)}
.mapband{height:320px;display:grid;place-content:center;text-align:center;gap:var(--s2);padding:var(--s6)}
.mapband__title{font-size:16px;font-weight:600;color:var(--ui-ink)}
.mapband__sub{font-size:14px;line-height:21px;color:var(--ui-ink)}
.faq{display:grid;gap:var(--s6)}
.faq__item{display:grid;gap:var(--s2)}
.faq__q{font-size:18px;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.faq__a{font-size:14px;line-height:21px;color:var(--ui-ink)}

/* --- About extras — §2.3/§2.4 --- */
.values{display:grid;gap:var(--s7)}
.value{display:grid;gap:var(--s3);justify-items:start}
.value__media{width:100%;border-radius:var(--r-card);overflow:hidden}
.value__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.value__title{font-size:18px;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.value__body{font-size:14px;line-height:21px;color:var(--ui-ink)}

.matband{background:var(--brand-ink);color:#fff;padding-block:var(--s11)}
.matband .h2{color:#fff}
.matband__grid{display:grid;gap:var(--s5);margin-top:var(--s7)}
.mat{background:rgba(255,255,255,.08);border-radius:var(--r-card);padding:var(--s6);display:grid;gap:var(--s2)}
.mat__name{font-size:18px;font-weight:600;letter-spacing:var(--track);color:#fff}
.mat__time{font-size:32px;line-height:44px;font-weight:600;letter-spacing:var(--track);color:#fff}
.mat__note{font-size:14px;line-height:21px;color:rgba(255,255,255,.86)}

.pull{display:grid;gap:var(--s1);padding:var(--s6);background:var(--eco-light-green);border-radius:var(--r-card)}
.pull__value{font-size:32px;line-height:44px;font-weight:600;letter-spacing:var(--track);color:var(--brand-ink)}
.pull__label{font-size:12px;line-height:16px;font-weight:600;color:var(--ui-ink)}

.centred{max-width:70ch;margin-inline:auto;text-align:center;display:grid;gap:var(--s4);justify-items:center}
.centred__media{width:100%;border-radius:var(--r-card);overflow:hidden}
.centred__media img{width:100%;aspect-ratio:3/2;object-fit:cover}