/* =====================================================================
   Smelloff — soft form language  (v1, 2026-07-28)
   =====================================================================
   The site was built on a hard-edged brutalist form language: 90° corners,
   3px borders, hard offset shadows. This layer replaces that with the soft
   squircle language modelled on wimpdecaf.com's product page — generous
   corner radii, hairline outlines, no offset shadows, pill buttons with
   uppercase wide-tracked labels and a bounce on hover.

   Palette and type are unchanged: still #080808 / #B8FF57 / Fraunces.
   Only the *shapes* change.

   HOW THIS LOADS
   Most pages in this repo are self-contained: their CSS lives in an inline
   <style> in <head>. An inline <style> beats a <link> that precedes it at
   equal specificity, so this file is linked *after* each page's <style>
   block on purpose. That lets one file restyle every component across
   ~24 pages without rewriting each page's rules — and makes the change
   trivially reversible by removing one <link>.

   Reference for the radii/button spec: wimpdecaf's _base.css
   (.btn radius .6875rem, uppercase, letter-spacing .07em) and _cmp-faqs.css
   (details radius 32px, 3px outline, rotating icon, max-height answer).
   ===================================================================== */

:root{
  /* Squircle scale. 32px on cards is wimpdecaf's number; the rest are
     proportional steps so nested shapes stay visually concentric. */
  --sq-xs:8px;
  --sq-sm:11px;    /* buttons — .6875rem */
  --sq-md:18px;
  --sq-lg:28px;    /* cards */
  --sq-xl:36px;    /* large panels, gallery tiles */
  --sq-pill:999px;

  /* Hairline outline replaces the old 3px hard border. */
  --hair:1px;
  --hair-strong:2px;
}

/* ---------------------------------------------------------------------
   1 · BUTTONS
   One spec everywhere: pill-ish radius, uppercase, wide tracking, acid
   fill, and a bounce on hover. The old hard offset shadow is removed —
   it fought the rounded corners.
   --------------------------------------------------------------------- */
@keyframes sf-bounce{
  0%,100%{transform:translateY(0)}
  30%{transform:translateY(-3px)}
  60%{transform:translateY(-1px)}
}

.btn,.nb-btn,.buy-btn,.buy-pill,.cta,a.cta,button.cta,
.product-form__submit,.nav-cta,.nav-links a.nav-cta,
.b-buy-btn,.end-cta .btn,.write-review-btn,
/* The /odorstrike CTAs. They were the only square-cornered buttons left on
   the site — the page names them .hero-cta / .fix-cta / .mb-btn rather than
   .btn, so the list above never reached them. */
.hero-cta,.fix-cta,.mb-btn,.final button,.price-card button,
.cart-checkout,.email-form button,.ec-form button{
  border-radius:var(--sq-sm) !important;
  border:0 !important;
  box-shadow:none !important;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.07em;
  line-height:1.4;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover,.nb-btn:hover,.buy-btn:hover,.buy-pill:hover,.cta:hover,
.product-form__submit:hover,.nav-cta:hover,.nav-links a.nav-cta:hover,
.hero-cta:hover,.fix-cta:hover,.mb-btn:hover,.final button:hover,
.price-card button:hover,.cart-checkout:hover{
  box-shadow:none !important;
  transform:none;
}
@media (prefers-reduced-motion: no-preference){
  .btn:hover,.buy-btn:hover,.buy-pill:hover,.cta:hover,.nav-cta:hover,
  .hero-cta:hover,.fix-cta:hover,.final button:hover,.price-card button:hover{
    animation:sf-bounce .6s ease;
  }
}
/* Stragglers found by sweeping every page for controls still rendering at
   radius 0: the consent-bar buttons, the /faq footer CTAs and the blog's
   in-article buy button. They keep their own colour and size — only the
   corners join the rest of the site. */
.cb-accept,.cb-reject,.faq-cta,.wa-strip,.bc-cta,.nf-btn,.c-btn{
  border-radius:var(--sq-sm) !important;
}
.faq-cta,.wa-strip{
  border-radius:var(--sq-md) !important;
}

/* Ghost/secondary: hairline outline instead of the old 3px slab. */
.btn-ghost,.nb-btn--ghost{
  background:transparent !important;
  border:var(--hair-strong) solid var(--rule-strong) !important;
  color:var(--text) !important;
}
.btn-ghost:hover,.nb-btn--ghost:hover{
  border-color:var(--acid) !important;
  color:var(--acid) !important;
}

/* ---------------------------------------------------------------------
   2 · CARDS / PANELS
   Every slab on the site becomes a squircle with a hairline edge and a
   slightly raised fill. Hover lifts instead of throwing a hard shadow.
   --------------------------------------------------------------------- */
/* NOTE: `.use-card` does NOT belong in this list. The /odorstrike "when to
   use it" cells are a rule-separated grid — hairlines between the columns,
   no box — and boxing them turned four columns of an editorial table into
   four floating cards. Same reasoning as `.benefits-strip` and
   `.ingredients`: when cells sit flush and share their dividers, the shape
   belongs to the band, not the cell. (`.layer` and `.proof-card` were in
   here too and match nothing on the site.) */
.zone,.voice,.faq-item,.trust-row li,.product-visual,
.b-card,.guide-card,.card,.rv-card,.review,.price-card,
.end-cta,.read-next,.b-buy-card,.nf-card,.contact-card,.track-card{
  border-radius:var(--sq-lg) !important;
  border:var(--hair) solid var(--rule) !important;
  box-shadow:none !important;
  background:var(--surface);
  overflow:hidden;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease);
}
/* …except cards that deliberately hang a badge over their own top edge.
   `overflow:hidden` above was clipping the "ONE SKU. NO BUNDLES." ribbon on
   the /odorstrike price card in half. Clipping is only there to keep media
   inside the curve, and these cards hold no media. */
.price-card,.b-buy-card{overflow:visible !important}
@media(hover:hover){
  .zone:hover,.voice:hover,.faq-item:hover,.b-card:hover,.guide-card:hover,
  .card:hover,.rv-card:hover,.product-visual:hover{
    transform:translateY(-3px) !important;
    border-color:var(--rule-strong) !important;
    box-shadow:none !important;
    background:var(--surface-2);
  }
}
/* Media inside a squircle card has to be clipped to the same curve. */
.b-card img,.product-visual img,.card img,.b-card-thumb,.b-card-thumb--img{
  border-radius:0;
}
.b-card-thumb,.b-card-thumb--img{overflow:hidden}

/* The benefits strip cells sit flush inside one band, so they get the
   radius on the band rather than each cell. */
.benefits-strip{
  border-radius:var(--sq-xl);
  border:var(--hair) solid var(--rule) !important;
  overflow:hidden;
  margin-inline:auto;
  max-width:var(--maxw);
  width:calc(100% - var(--gutter) * 2);
}
.benefits-strip .trust-row li{
  border-radius:0 !important;
  border:0 !important;
  border-right:var(--hair) solid var(--rule) !important;
  background:transparent;
}
.benefits-strip .trust-row li:last-child{border-right:0 !important}
.benefits-strip .trust-row li:hover{transform:none !important}

/* Same idea for the /odorstrike 4-layer band. Its cells sit flush with 1px
   hairlines between them, so the radius belongs to the band — rounding each
   cell would open gaps in the hairlines and break the strip. It was the last
   hard-cornered block on the page. */
.ingredients{
  border-radius:var(--sq-lg);
  overflow:hidden;
  border-top:0 !important;
  border-bottom:0 !important;
}

/* ---------------------------------------------------------------------
   3 · FAQ ACCORDION — one spec, every page
   wimpdecaf collapses FAQs into <details> with a rotating + icon and a
   max-height answer transition. Pages here that still render FAQs as
   always-open blocks keep working; those upgraded to <details> pick this up.

   THE RULE: the <details> owns the shape, the <summary> owns the padding.
   Getting this wrong is what made the accordions balloon — soft.css put
   clamp(20px,3vw,34px) on the <details> while the page ALSO padded its own
   <summary>, so every row carried two sets of padding and each question sat
   in a box roughly twice as tall as its text. Rows are now a consistent
   ~64px closed at every width, on the homepage, /faq, /odorstrike and the
   blog alike.

   `!important` is deliberate on the padding and radius: `blog.css` loads on
   the post pages and re-declares both (`border-radius:0`, `padding:18px 20px`
   on the summary) at the same specificity. Load order alone left the blog
   with square, double-padded rows while the rest of the site was round and
   compact.
   --------------------------------------------------------------------- */
.faq details,details.faq-item,details.faq-q,.faq-list details{
  border-radius:var(--sq-lg) !important;
  border:var(--hair) solid var(--rule) !important;
  background:var(--surface);
  padding:0 !important;
  overflow:hidden;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
details.faq-item[open],.faq details[open],.faq-list details[open]{
  background:var(--surface-2);
  border-color:var(--rule-strong) !important;
}
details.faq-item > summary,.faq details > summary,.faq-list details > summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  display:block;
  padding:18px 56px 18px 22px !important;
  /* The question's type lives here, on the <summary>, so every FAQ on the
     site reads at one size in one face. The homepage set Fraunces on its
     nested <h3> instead, which is why its questions came out in the display
     face at 25px while everyone else's were 19px. */
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(16px,2.2vw,19px);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--text);
  -webkit-user-select:none;user-select:none;
}
details.faq-item > summary::-webkit-details-marker,
.faq details > summary::-webkit-details-marker,
.faq-list details > summary::-webkit-details-marker{display:none}
/* Some pages wrap the question in a heading for document outline (the
   homepage uses <summary><h3>…</h3></summary>). The heading must not bring
   its own size along or that page's questions render larger than everyone
   else's — the homepage's were 25px against 19px everywhere else. The
   <summary> sets the size; the heading only carries semantics. */
details.faq-item > summary :is(h2,h3,h4),
.faq details > summary :is(h2,h3,h4),
.faq-list details > summary :is(h2,h3,h4){
  font-size:inherit;
  line-height:inherit;
  font-family:inherit;
  font-weight:900;
  letter-spacing:-.01em;
  margin:0;
  display:inline;
}
/* Answers: same inline padding as the question, so the two align. */
.faq details > .faq-a,.faq details > .faq-answer,
.faq-list .faq-answer,details.faq-item .faq-answer-wrap > div{
  padding:0 22px 18px !important;
  border-top:0 !important;
}
.faq details > .faq-a > p:first-child,
.faq details > .faq-answer > p:first-child{margin-top:0}

/* The + that becomes a −. Two bars, so it can rotate into a minus rather
   than swapping a glyph (which reflows the row). */
details.faq-item > summary::after,.faq details > summary::after,
.faq-list details > summary::after{
  content:'' !important;
  position:absolute;right:20px;top:50%;
  width:16px;height:2px;
  background:var(--acid);
  transform:translateY(-50%);
  transition:none;
}
details.faq-item > summary::before,.faq details > summary::before,
.faq-list details > summary::before{
  content:'';
  position:absolute;right:27px;top:50%;
  width:2px;height:16px;
  background:var(--acid);
  transform:translateY(-50%);
  transition:transform .3s var(--ease),opacity .2s ease;
}
details.faq-item[open] > summary::before,.faq details[open] > summary::before,
.faq-list details[open] > summary::before{
  transform:translateY(-50%) rotate(90deg);
  opacity:0;
}
details.faq-item > summary:focus-visible,.faq details > summary:focus-visible,
.faq-list details > summary:focus-visible{
  outline:3px solid var(--acid);outline-offset:-3px;border-radius:var(--sq-lg);
}
/* Rows sit in a tight stack rather than floating 18-22px apart. */
.faq details,.faq-list details,details.faq-item{margin:0 !important}

/* One FAQ layout everywhere: a single column on phones, two on desktop.
   The homepage and /faq each pinned their list to a ~760-800px column on
   the left, so on a wide screen half the section was empty while the list
   ran twice as long as it needed to. `align-content:start` keeps rows their
   natural height instead of stretching them to fill the track. */
.faq-list,.faq .faq-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  align-content:start;
  max-width:var(--maxw);
  margin-inline:auto;
}
@media(min-width:900px){
  .faq-list,.faq .faq-list{grid-template-columns:1fr 1fr;gap:12px 20px}
}
.faq-list details{height:fit-content}
.faq-answer-wrap{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease);
}
details[open] .faq-answer-wrap{grid-template-rows:1fr}
.faq-answer-wrap > *{overflow:hidden}

/* ---------------------------------------------------------------------
   4 · NAV + CART DRAWER
   --------------------------------------------------------------------- */
header.site,nav.site-nav,.b-nav{
  border-bottom:var(--hair) solid var(--rule) !important;
}
.nav-links a,.b-nav a{border-radius:var(--sq-sm)}
.cart-btn,.nav-toggle,.b-nav-btn{border-radius:var(--sq-pill)}
.cart-btn .cart-count{border-radius:var(--sq-pill)}

/* Minicart / overlay panels become a rounded sheet rather than a hard slab. */
.cart-drawer,.overlay-panel,.minicart,#cartDrawer,.drawer,
.b-drawer,.checkout-panel{
  border-radius:var(--sq-xl) 0 0 var(--sq-xl);
  border-left:var(--hair) solid var(--rule);
}
@media(max-width:640px){
  .cart-drawer,.overlay-panel,.minicart,#cartDrawer,.drawer,
  .b-drawer,.checkout-panel{
    border-radius:var(--sq-xl) var(--sq-xl) 0 0;
    border-left:0;
    border-top:var(--hair) solid var(--rule);
  }
}
.cart-item,.cart-line,.mc-item{border-radius:var(--sq-md);overflow:hidden}
.cart-line-img,.mc-item img{border-radius:var(--sq-xs);overflow:hidden}
.cart-checkout,.cart-empty .btn{border-radius:var(--sq-sm) !important;box-shadow:none !important}
.cart-close,.b-drawer-close,.overlay-close{border-radius:var(--sq-pill)}
.cart-stepper,.cart-qty{border-radius:var(--sq-pill);overflow:hidden;border:var(--hair) solid var(--rule)}
.b-drawer-cat,.filter-chip,.b-jump-pill{
  border-radius:var(--sq-pill) !important;
  border:var(--hair) solid var(--rule) !important;
}
.b-drawer-cat.active,.filter-chip.active{
  background:var(--acid) !important;color:var(--on-acid) !important;border-color:var(--acid) !important;
}

/* ---------------------------------------------------------------------
   5 · FORMS
   --------------------------------------------------------------------- */
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],
input[type="number"],textarea,select,.b-search,.field input,.form-input{
  border-radius:var(--sq-sm) !important;
  border:var(--hair) solid var(--rule) !important;
  background:var(--surface) !important;
  color:var(--text);
  transition:border-color .2s var(--ease);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--acid) !important;
  outline:none;
}
.pay-opt,.qty,.qty-btn,.quantity{border-radius:var(--sq-sm) !important}
.qty-btn{border-radius:var(--sq-pill) !important}

/* ---------------------------------------------------------------------
   6 · ODDS AND ENDS
   The hero hook and the acid price chip were hard rectangles with an
   offset shadow; they become soft chips. Tickers and the hinglish band
   stay full-bleed and square — they're meant to read as a cut across the
   page, and rounding them would weaken that.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   7 · BARE FOOTERS + TAP TARGETS
   contact / reviews / track-order use a <footer> of inline <a>s separated by
   horizontal margins. At 390px that produced 16px of horizontal scroll on
   /contact ("Partner Program" couldn't break cleanly against its own margin),
   and every link was ~18px tall — well under the 44px minimum for a
   navigation target. A wrapping flex row with gap fixes both.
   The grid footers on / and /odorstrike are untouched: they have no direct
   <a> children, so :has(> a) doesn't match them.
   --------------------------------------------------------------------- */
footer:has(> a){
  display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;
  gap:2px 10px;
}
footer:has(> a) > a{
  margin:0;
  padding:11px 6px;
  min-height:44px;
  display:inline-flex;align-items:center;
}
/* Nav and footer-column links are navigation, not prose — give them a real
   touch area. Inline links inside body copy are deliberately excluded
   (WCAG 2.5.8 exempts links in a sentence, and padding them would break
   the line rhythm). */
.nav-links a,#navMenu a,footer ul a,.footer-col > a,.b-drawer-nav a,
.p-nav a,.p-footer-links > a,.p-footer-guides > a,.p-footer-policy > a,.nf-links a,.b-nav a,
.blog-nav a,.footer-links > a,.footer-guides > a,.footer-policy > a{
  min-height:44px;
  display:inline-flex;align-items:center;
}
/* The policy-page footers are inline runs, so the flex boxes above need to
   wrap and keep a readable gap once each link is 44px tall. */
.p-footer-links,.p-footer-guides,.p-footer-policy,.nf-links,
.footer-links,.footer-guides,.footer-policy{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:0 14px;
}
.socials a,.blog-footer .socials a{min-width:44px;min-height:44px}

.hero-hook,.chip,.tag,.badge,.b-thumb-cat,.b-card-cat,.v-tag,.pill{
  border-radius:var(--sq-pill);
  box-shadow:none !important;
}
.hero-hook{padding:8px 16px}
img.rounded,.post-hero img,.article-hero img,.b-hero img{border-radius:var(--sq-lg)}
.pull-quote{border-radius:var(--sq-md);padding:20px 24px;border-left:3px solid var(--acid)}
