/* ═══════════════════════════════════════════════════════════
   DR.SHROOMS — POLISH LAYER (aesthetics pass, Sept 2026)
   Loaded LAST on every page, after each page's own <style>.
   Layout / spacing / alignment / type only — no content.
   ═══════════════════════════════════════════════════════════ */

/* ── 0. ONE TYPE SYSTEM ─────────────────────────────────────
   Catalogue pages defined --fd/--fm/--fj as Cormorant / DM Mono /
   Jost, none of which were ever loaded (visitors saw Times /
   Courier / Arial). Map them to the fonts the site actually loads. */
:root{
  --fd:"Lato",sans-serif;
  --fm:"Lato",sans-serif;
  --fj:"Lato",sans-serif;
  --fb:"Cinzel",serif;
}
h1,h2,h3{line-height:1.12;}              /* stop headings inheriting body 1.75 */
html{font-variant-numeric:lining-nums;}  /* Raleway defaults to old-style figures (£30 looked like £3o) */
img{max-width:100%;}

/* Tiny inline labels (7–8px) → readable 10.5px */
[style*="font-size:.44rem"],
[style*="font-size:.46rem"],
[style*="font-size:.48rem"],
[style*="font-size:.5rem"]{font-size:10.5px!important;}
.policy-kicker{font-size:10.5px!important;}
/* ── 1. NAVIGATION ─────────────────────────────────────────
   Between 900–1200px the links wrapped to 2–3 lines and the
   Instagram icon fell off-screen; at 901–1000px links AND the
   burger showed together. Collapse below 1200, tighten above. */
.nav-links a{white-space:nowrap;}
@media(max-width:1199px){
  .nav{padding:0 1.4rem;}
  .nav-links{gap:0;margin-left:auto;margin-right:.35rem;}
  .nav-links li:not(.nav-cart-item){display:none!important;}
  .nav-ham{display:flex!important;}
}
@media(min-width:1200px){
  .nav-ham,.nav-mobile,.nav-mobile.open{display:none!important;}
}
@media(min-width:1200px) and (max-width:1399px){
  .nav{padding:0 2rem;}
  .nav-links{gap:.15rem;}
  .nav-links a{padding:.5rem .72rem;letter-spacing:.13em;}
}
.nav-mobile{max-height:100svh;overflow-y:auto;}

/* ── 2. PAGE HEADERS ─────────────────────────────────────── */
/* Policy pages: eyebrow + intro sat left while the title was centred */
.page-header-inner{text-align:center;}
.page-header .page-eyebrow{text-align:center;}
.page-header .page-sub{margin-left:auto;margin-right:auto;text-wrap:pretty;}
.page-title{text-wrap:balance;}
@media(max-width:700px){
  .page-title{line-height:1.02!important;}
}

/* ── 3. SECTION HEADINGS ─────────────────────────────────── */
.h2,.section-display-title{line-height:1.06!important;text-wrap:balance;}

/* ── 4. BUTTONS ──────────────────────────────────────────── */
.btn{justify-content:center;text-align:center;}
@media(max-width:600px){
  /* button groups stack to one tidy, equal-width column */
  .hero-cta,
  .ws-cta-btns,
  [style*="display:flex"][style*="flex-wrap:wrap"]:has(> .btn){
    flex-direction:column;align-items:stretch;
  }
  .hero-cta{width:100%;max-width:320px;margin-left:auto;margin-right:auto;}
  .hero-cta .btn,
  .ws-cta-btns .btn,
  [style*="display:flex"][style*="flex-wrap:wrap"] > .btn,
  .s .btn{width:100%;}
}

@media(min-width:601px) and (max-width:900px){
  .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:560px;margin:0 auto;}
  .hero-cta .btn{width:100%;}
}

/* ── 5. FOOTER (all pages, incl. catalogue) ──────────────── */
/* 4 columns were squeezed into a 3-col grid, so "Connect" dropped
   to an orphan row on its own. */
.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr!important;gap:3rem!important;}
.footer-brand-name{
  font-family:var(--fb)!important;font-size:12px;letter-spacing:.45em;
  color:var(--gold);display:block;margin-bottom:.8rem;
}
.footer-links a{font-family:var(--fm)!important;font-weight:500!important;}
.footer-disclaimer{
  margin:1.8rem auto 0;padding-top:1.6rem;border-top:1px solid var(--edge);
  font-family:var(--fj)!important;font-size:11.5px;line-height:1.75;
  color:var(--cream-3);text-align:center;max-width:780px;
}
@media(max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:2.4rem 2rem!important;}
}
@media(max-width:768px){
  footer{padding:3rem 1.4rem 2rem!important;}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:2.2rem 1.6rem!important;}
  .footer-grid > div:first-child,
  .footer-grid > div:last-child{grid-column:1 / -1;}
  .footer-links{gap:.7rem!important;}
  .footer-bottom{flex-direction:column;text-align:center;gap:.5rem!important;}
  .footer-disclaimer{font-size:11px;}
}

/* ── 6. HOMEPAGE ─────────────────────────────────────────── */
@media(max-width:900px){
  .hero-estate{max-width:320px;justify-content:center;}
  .hero-estate .estate-line{display:none;}
  .estate-text{letter-spacing:.24em;line-height:1.9;text-align:center;text-wrap:balance;}
  .hero-tagline.hero-mobile-only{line-height:1.5;letter-spacing:.08em!important;margin-bottom:14px;}
  .hero-sub{line-height:1.8;max-width:300px;margin-left:auto;margin-right:auto;}
  .hero-scroll{display:none;}
}
.stacking-intro{margin-bottom:22px!important;}
.stacking-editorial-cta{margin-top:30px;}
@media(max-width:768px){.stacking-editorial-cta{margin-top:24px;}}

/* ── 7. STACKS ───────────────────────────────────────────── */
.featured-protocol-media{border-bottom:0!important;}
.featured-protocol-media::after{
  background:linear-gradient(180deg,rgba(6,10,5,.05) 0%,rgba(6,10,5,.15) 45%,rgb(22,33,17) 100%),
             linear-gradient(90deg,rgba(8,14,7,.55) 0%,transparent 30%)!important;
}
.featured-protocol-buy{background:linear-gradient(180deg,rgba(200,168,74,.07),rgba(0,0,0,0) 40%),var(--surface)!important;}
.featured-protocol-title{font-weight:600;}
@media(max-width:600px){
  .featured-protocol-badge{top:14px;left:14px;}
  .featured-protocol-days{top:52px;left:14px;right:auto;}
}
.stack-maxim-text{font-family:var(--fj)!important;font-weight:300!important;}

/* ── 8. POLICY PAGES ─────────────────────────────────────── */
.policy-layout{background:var(--surface)!important;}
.policy-main{border-left:1px solid var(--edge);}
.policy-section p + p,
.policy-section p + ul,
.policy-section ul + p{margin-top:.75rem;}
.policy-section a{
  color:var(--gold-2);text-decoration:underline;
  text-decoration-color:rgba(232,200,112,.35);text-underline-offset:3px;
  word-break:break-word;
}
.policy-section a:hover{text-decoration-color:var(--gold-2);}
.policy-section{padding:1.6rem 0!important;}
.policy-section:first-child{padding-top:0!important;}
@media(min-width:901px){
  .policy-side{position:sticky;top:calc(var(--offset) + 1.5rem);align-self:start;}
  .policy-main{padding:2.4rem 2.6rem!important;}
}
@media(max-width:900px){
  .policy-main{border-left:0;border-top:1px solid var(--edge);}
}

/* ── 9. ABOUT / CONTACT / WHOLESALE / REVIEWS ────────────── */
.ws-cta h2{line-height:1.12;}
.ws-cta h2 em{color:var(--gold-2)!important;}
.about-sticky{align-self:start;}

/* ── 10. PRODUCT GUIDE (catalogue index) ─────────────────── */
.stat-num{font-weight:500!important;letter-spacing:-.01em;}
.search-input{letter-spacing:.06em!important;font-family:var(--fj)!important;font-size:15px!important;}
.filter-btn{font-weight:500;}
.section-header .section-label{font-weight:600;letter-spacing:-.01em;}
.prod-card-inner{padding:1.9rem 1.7rem!important;}
.prod-card-name{font-weight:600!important;font-size:1.3rem!important;letter-spacing:-.015em!important;margin-bottom:.45rem!important;}
.prod-card-headline{font-family:var(--fj)!important;font-style:italic;font-weight:400!important;font-size:.95rem!important;}
.prod-card-price{font-weight:500!important;font-size:1.35rem!important;}
.prod-card-link,
.prod-card-link:visited{
  font-family:var(--fm)!important;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage-2)!important;text-decoration:none!important;
  padding:.55rem 0;transition:color .25s;
}
.prod-card-link::after{content:"→";font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1;letter-spacing:0;margin-left:.45em;transition:transform .25s;display:inline-block;}
.prod-card-link:hover{color:var(--cream)!important;text-decoration:none!important;}
.prod-card-link:hover::after{transform:translateX(3px);}

/* ── 11. PRODUCT PAGES ───────────────────────────────────── */
.prod-name{
  font-weight:600!important;letter-spacing:-.025em!important;line-height:1.02!important;
  font-size:clamp(2.3rem,5.4vw,4.2rem)!important;margin-bottom:1rem!important;text-wrap:balance;
}
.prod-seo-intro{
  font-family:var(--fj)!important;font-size:1rem!important;line-height:1.8!important;
  color:var(--cream-2)!important;max-width:62ch;margin:0 0 1rem!important;font-weight:300;
}
.prod-latin{font-family:var(--fj)!important;font-size:13px!important;letter-spacing:.06em!important;font-style:italic;margin-bottom:1.1rem!important;}
.prod-headline{font-family:var(--fj)!important;font-weight:300!important;font-size:clamp(1.15rem,2.2vw,1.45rem)!important;color:var(--gold-2)!important;}
.big-price{font-weight:500!important;font-size:2.5rem!important;letter-spacing:-.02em;}
.price-cta{row-gap:1rem;}
.problem-box p{font-family:var(--fj)!important;font-weight:300!important;font-size:1.05rem!important;}
.solution-box p{font-family:var(--fj)!important;font-weight:400!important;font-size:1.02rem!important;}
.section-label{font-weight:500;}
.related h2{font-size:11px!important;}
.related-link{font-weight:500;}
.disclaimer{font-family:var(--fj)!important;font-size:11.5px!important;letter-spacing:.02em!important;line-height:1.75!important;}
details.science-box summary{font-weight:500;}
@media(max-width:768px){
  .price-cta{gap:1rem!important;}
  .bag-btn{width:100%;justify-content:center;}
  .problem-box,.solution-box,.why-box,.expect-box{padding:1.25rem 1.3rem!important;}
  .two-col-item{padding:1.3rem 1.3rem!important;}
}

/* ── 12. CART BUTTON IN NAV (IONOS widget, every page) ───────
   Skin only; html/body prefix outranks IONOS's own theme CSS. */
:is(html,#ecwid_html) :is(body,#ecwid_body) .nav-cart-item :is(.ec-minicart,.ecwid-minicart){
  color:var(--cream)!important;background:transparent!important;
  border:1px solid rgba(240,235,224,.3)!important;border-radius:999px!important;box-shadow:none!important;
}
:is(html,#ecwid_html) :is(body,#ecwid_body) .nav-cart-item :is(.ec-minicart,.ecwid-minicart) :is(svg,svg *,.ec-minicart__icon){color:inherit!important;}
:is(html,#ecwid_html) :is(body,#ecwid_body) .nav-cart-item :is(.ec-minicart,.ecwid-minicart):hover{border-color:var(--gold)!important;background:rgba(200,168,74,.08)!important;}
:is(html,#ecwid_html) :is(body,#ecwid_body) .nav-cart-item :is(.ec-minicart__counter,.ecwid-minicart-count,.ecwid-badge){
  background:var(--gold)!important;color:#080E07!important;border:0!important;
}
:is(html,#ecwid_html) :is(body,#ecwid_body) :is(.nav.scrolled,.nav.nav-solid) .nav-cart-item :is(.ec-minicart,.ecwid-minicart){
  color:#2A5C1E!important;border-color:rgba(42,92,30,.45)!important;
}
/* the stray second cart widget at the end of <body> — keep it from rendering a loose icon */
body > .ec-cart-widget{display:none!important;}

/* ═══════════════════════════════════════════════════════════
   13. PROFESSIONAL PASS (v5, 29 Sept 2026)
   Clarity + consistency. Every rule here is additive; delete
   this block to return to v4 styling.
   ═══════════════════════════════════════════════════════════ */

/* 13.1 Keyboard focus — product pages don't load site.css, so
   the global focus ring never reached them. One ring, everywhere. */
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:2px;}
.btn:focus-visible,.nav-links a:focus-visible{outline-offset:4px;}

/* 13.2 Links inside text are identifiable without colour (WCAG 1.4.1) */
.breadcrumb a{text-decoration:underline;text-decoration-color:rgba(143,186,122,.4);text-underline-offset:3px;}
.breadcrumb a:hover{text-decoration-color:currentColor;}

/* 13.3 Hero CTA hierarchy — 1 primary, 1 secondary, 2 quiet links
   (four equal boxes read as a menu, not a call to action). */
.hero-cta .btn-ghost:nth-child(n+3){
  border-color:transparent!important;background:transparent!important;
  color:var(--cream-2)!important;text-decoration:underline;
  text-decoration-color:rgba(240,235,224,.25);text-underline-offset:6px;
  padding-left:1rem;padding-right:1rem;
}
.hero-cta .btn-ghost:nth-child(n+3):hover{color:var(--cream)!important;text-decoration-color:var(--gold-2);}
@media(max-width:600px){
  .hero-cta{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;}
  .hero-cta .btn:nth-child(-n+2){grid-column:1 / -1;}
  .hero-cta .btn-ghost:nth-child(n+3){min-height:44px;padding:.6rem .4rem;}
}
@media(min-width:601px) and (max-width:900px){
  .hero-cta .btn-ghost:nth-child(n+3){min-height:44px;}
}

/* 13.4 Homepage stacking section — copy + image, no dead half-screen */
.stacking-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;}
.stacking-copy .stacking-editorial-p{max-width:56ch;}
.stacking-figure{display:block;border:1px solid var(--edge-l);overflow:hidden;background:var(--surface);}
.stacking-figure img{display:block;width:100%;height:auto;aspect-ratio:960/630;object-fit:cover;transition:transform .8s var(--ease);}
.stacking-figure:hover img{transform:scale(1.03);}
@media(min-width:960px){
  .stacking-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4.5rem;}
}

/* 13.5 Product Guide cards — full sentences clamped to 3 lines
   (was hard-cut mid-word: "syst…", "Ot…"); empty grid cells no
   longer show as a lighter block. */
.prod-card-desc{flex:0 0 auto!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}
.prod-grid{background:transparent!important;}
.prod-card{box-shadow:0 0 0 1px var(--edge);}
.prod-card:hover{background:var(--panel)!important;}

/* 13.6 Feature icons (About / Wholesale) — line icons replace emoji */
.feat-ico{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(200,168,74,.35);border-radius:50%;color:var(--gold-2);margin-bottom:1rem;}

/* 13.7 Stacks page */
.stack-title{letter-spacing:-.01em;}
.stack-price-before{color:var(--cream-3)!important;}

/* 13.8 Contact cards — actions sit on one baseline, full width */
.contact-card{display:flex;flex-direction:column;}
.contact-actions{margin-top:auto;display:flex!important;flex-direction:column;gap:.7rem!important;}
.contact-actions .btn{width:100%;}

/* 13.9 Reviews / testimonial quotes — Light italic was hard to read */
.hero-t-quote,.review-text,.review-card p{font-weight:400!important;}

/* 13.10 Readable measure for long body copy */
.policy-section p,.policy-section li{max-width:72ch;}
@media(max-width:600px){.hero-cta .btn-ghost:nth-child(n+3){white-space:nowrap;letter-spacing:.12em!important;font-size:10.5px!important;}}
.stack-maxim-text a{text-decoration:underline;text-decoration-color:rgba(143,186,122,.5);text-underline-offset:3px;}