/* FluffyAudio storefront UI, tuned to the site's dark chrome:
   surfaces #181818/#101010 over the #262626 content ground, hairlines in
   translucent white, accent #0089f7, Metropolis/Archivo inherited from the
   theme. Two CSS vars set by cart.js:
     --fluffy-header-offset  live bottom edge of the header (drawer top)
     --fluffy-header-pad     header height (top padding for full pages)      */

/* ---------- cart drawer ---------- */

.fluffy-cart-overlay {
  position: fixed; left: 0; right: 0; bottom: 0;
  top: var(--fluffy-header-offset, 0px);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 9998;
}
body.fluffy-cart-open .fluffy-cart-overlay { opacity: 1; pointer-events: auto; }

.fluffy-cart-drawer {
  position: fixed; right: 0; width: min(400px, 100vw);
  top: var(--fluffy-header-offset, 0px);
  height: calc(100% - var(--fluffy-header-offset, 0px));
  background: #181818; color: #f2f3f5; z-index: 9999;
  font-family: inherit;
  transform: translateX(105%); transition: transform .28s ease;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
}
body.fluffy-cart-open .fluffy-cart-drawer { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .fluffy-cart-drawer, .fluffy-cart-overlay { transition: none; }
}
@media (max-width: 600px) {
  .fluffy-cart-drawer { width: 100vw; }
}

.fluffy-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.fluffy-cart-head h3 { margin: 0; font-size: 1.15rem; color: #ffffff; }
.fluffy-cart-close {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; font-size: 1.7rem; line-height: 1;
  cursor: pointer; color: #a9adb4; padding: 0 .25rem; margin: 0;
}
.fluffy-cart-close:hover { color: #ffffff; }
.fluffy-cart-close:focus-visible, .fluffy-cart-fab:focus-visible,
.fluffy-cart-remove:focus-visible { outline: 2px solid #0089f7; outline-offset: 2px; }

.fluffy-cart-items { flex: 1; overflow-y: auto; padding: .6rem 1.4rem; }
.fluffy-cart-empty { color: #a9adb4; padding: .8rem 0; }
.fluffy-cart-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.fluffy-cart-row:last-child { border-bottom: none; }
img.fluffy-cart-row-thumb, span.fluffy-cart-row-thumb {
  width: 46px; height: 46px; flex: none; border-radius: 6px;
  object-fit: cover; display: block; background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.fluffy-cart-row-name { flex: 1; font-weight: 600; color: #f2f3f5; line-height: 1.3; }
.fluffy-cart-row-price {
  white-space: nowrap; font-variant-numeric: tabular-nums; color: #f2f3f5;
  display: flex; flex-direction: column; align-items: flex-end; gap: .05rem;
}
.fluffy-cart-row-price s { color: #767b83; font-size: .8em; }
.fluffy-cart-remove {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; color: #767b83; font-size: 1.2rem;
  cursor: pointer; padding: 0 .2rem; margin: 0; line-height: 1;
}
.fluffy-cart-remove:hover { color: #ff6b6b; }

.fluffy-cart-foot {
  padding: 1.1rem 1.4rem 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09); background: #101010;
}
.fluffy-cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .9rem; font-size: 1.02rem; color: #a9adb4;
}
.fluffy-cart-total strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; color: #ffffff; }
a.fluffy-cart-checkout {
  display: block; text-align: center; background: #0089f7; color: #fff !important;
  border-radius: 4px; padding: .85rem 1rem; font-weight: 700; text-decoration: none;
}
a.fluffy-cart-checkout:hover { background: #33a1ff; }
.fluffy-cart-note { margin: .7rem 0 0; font-size: .78rem; color: #767b83; text-align: center; }

/* ---------- floating cart button (ALWAYS visible) ---------- */

button.fluffy-cart-fab {
  appearance: none; -webkit-appearance: none;
  position: fixed; right: 1.25rem; bottom: 5.75rem; z-index: 9997;
  width: 56px; height: 56px; min-width: 0; min-height: 0;
  margin: 0; padding: 0; line-height: 0; text-transform: none;
  border: 0; border-radius: 50%; box-sizing: border-box; cursor: pointer;
  background: #181818; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
  overflow: visible; /* the count badge sits OUTSIDE the circle */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
button.fluffy-cart-fab:hover { background: #0089f7; border-color: #0089f7; }
button.fluffy-cart-fab svg { display: block; width: 22px; height: 22px; flex: none; }
.fluffy-cart-count {
  position: absolute; top: -7px; right: -7px; background: #0089f7; color: #fff;
  min-width: 22px; height: 22px; border-radius: 11px;
  font-size: .75rem; font-weight: 700; line-height: 1;
  font-family: inherit; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.fluffy-cart-count.fluffy-cart-count-empty { display: none; }
/* On /checkout/ the order summary IS the cart — no second view of it. */
body.fluffy-checkout-page button.fluffy-cart-fab { display: none; }

/* ---------- checkout page (dark, header-aware) ---------- */

.fluffy-checkout {
  max-width: 960px; margin: 0 auto;
  padding: calc(var(--fluffy-header-pad, 0px) + 2.5rem) 1rem 4rem;
  color: #f2f3f5;
  display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start;
}
@media (max-width: 860px) { .fluffy-checkout { grid-template-columns: 1fr; gap: 1.8rem; } }

.fluffy-checkout h2 { font-size: 1.35rem; margin: 0 0 1rem; color: #ffffff; }
.fluffy-checkout-form { display: flex; flex-direction: column; gap: 1rem; }
.fluffy-field { display: flex; flex-direction: column; gap: .3rem; }
.fluffy-field label { font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: #cfd3d9; }
.fluffy-field input, .fluffy-field select {
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px; padding: .65rem .75rem;
  font-size: .95rem; background: #1c1c1c; color: #f2f3f5; font-family: inherit;
}
.fluffy-field input::placeholder { color: #767b83; }
/* Browser autofill paints inputs light blue with UA-forced colors; on this dark
 * theme that meant white-on-light-blue. The inset box-shadow trick repaints the
 * field dark blue (the background itself cannot be overridden while the UA
 * :autofill style is active) and -webkit-text-fill-color restores the text. */
.fluffy-field input:-webkit-autofill,
.fluffy-field input:-webkit-autofill:hover,
.fluffy-field input:-webkit-autofill:focus,
.fluffy-field select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0d2a45 inset;
  box-shadow: 0 0 0 1000px #0d2a45 inset;
  -webkit-text-fill-color: #f2f3f5;
  caret-color: #f2f3f5;
}
.fluffy-field input:autofill, .fluffy-field select:autofill {
  box-shadow: 0 0 0 1000px #0d2a45 inset;
  -webkit-text-fill-color: #f2f3f5;
  caret-color: #f2f3f5;
}
.fluffy-field input:focus, .fluffy-field select:focus {
  outline: 2px solid #0089f7; outline-offset: 0; border-color: #0089f7;
}
.fluffy-field-row { display: flex; gap: 1rem; }
.fluffy-field-row .fluffy-field { flex: 1; }

.fluffy-summary {
  background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px; padding: 1.3rem 1.4rem; color: #f2f3f5;
}
.fluffy-summary h3 { margin: 0 0 .9rem; font-size: 1.05rem; color: #ffffff; }
.fluffy-summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .45rem 0; font-size: .93rem;
}
.fluffy-summary-row .amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fluffy-summary-row.subtle { color: #a9adb4; font-size: .85rem; }
.fluffy-summary-row.total {
  border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: .6rem; padding-top: .85rem;
  font-weight: 700; font-size: 1.08rem; color: #ffffff;
}
.fluffy-summary-row s { color: #767b83; margin-right: .3rem; }
img.fluffy-summary-thumb {
  width: 40px; height: 40px; flex: none; border-radius: 5px; object-fit: cover;
  background: #262626; border: 1px solid rgba(255, 255, 255, 0.07); display: block;
}
.fluffy-summary-row .fluffy-summary-name { flex: 1; }

.fluffy-pay-button {
  background: #0089f7; color: #fff; border: 0; border-radius: 4px;
  padding: .9rem 1rem; font-size: 1rem; font-weight: 700; cursor: pointer; width: 100%;
  font-family: inherit;
}
.fluffy-pay-button:hover { background: #33a1ff; }
.fluffy-pay-button:disabled { background: #3a3f46; color: #a9adb4; cursor: not-allowed; }
.fluffy-pay-button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.fluffy-checkout-error {
  background: #331313; border: 1px solid #7a2e2e; color: #ffb4b4;
  border-radius: 6px; padding: .7rem .9rem; font-size: .9rem;
}
.fluffy-checkout-empty {
  text-align: center; color: #f2f3f5;
  padding: calc(var(--fluffy-header-pad, 0px) + 4rem) 1rem 4rem;
}
.fluffy-checkout-empty h2 { color: #ffffff; }
.fluffy-checkout-empty a { color: #33a1ff; }
.fluffy-muted { color: #a9adb4; font-size: .85rem; }
.fluffy-muted a { color: #33a1ff; }

/* ---------- account page (dark, header-aware) ---------- */

.fluffy-account {
  max-width: 900px; margin: 0 auto;
  padding: calc(var(--fluffy-header-pad, 0px) + 2.5rem) 1rem 4rem;
  color: #f2f3f5;
}
.fluffy-account h2, .fluffy-account h3 { color: #ffffff; }
.fluffy-login { max-width: 460px; margin: 2rem auto; display: flex; flex-direction: column; gap: 1rem; }
.fluffy-account-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.fluffy-account-user { color: #a9adb4; font-size: .88rem; }
.fluffy-signout {
  appearance: none; -webkit-appearance: none;
  background: none; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px;
  padding: .45rem .9rem; cursor: pointer; color: #f2f3f5; font-size: .85rem; font-family: inherit;
}
.fluffy-signout:hover { border-color: #0089f7; color: #33a1ff; }
.fluffy-signout:focus-visible { outline: 2px solid #0089f7; outline-offset: 2px; }
/* Library as a LIST — one row per product (2.11.0). */
.fluffy-lib { margin-top: 2.5rem; }
.fluffy-lib h3 { margin: 0 0 .6rem; }
.fluffy-lib-list { border-top: 1px solid rgba(255, 255, 255, 0.09); }
.fluffy-lib-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
img.fluffy-lib-thumb, span.fluffy-lib-thumb {
  width: 48px; height: 48px; flex: none; border-radius: 6px;
  object-fit: cover; display: block; background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
span.fluffy-lib-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  color: #767b83; font-weight: 700; font-size: 1.1rem;
}
.fluffy-lib-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.fluffy-lib-row-body h4 { margin: 0; font-size: .98rem; color: #ffffff; line-height: 1.3; }
.fluffy-lib-meta { color: #767b83; font-size: .8rem; }
button.fluffy-lib-dl, button.fluffy-lib-file-dl {
  appearance: none; -webkit-appearance: none; flex: none; cursor: pointer;
  background: #262626; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px; padding: .5rem .95rem; font-weight: 600; font-size: .85rem;
  font-family: inherit;
}
button.fluffy-lib-dl:hover, button.fluffy-lib-file-dl:hover { background: #0089f7; border-color: #0089f7; }
button.fluffy-lib-dl:disabled, button.fluffy-lib-file-dl:disabled {
  background: #1c1c1c; color: #767b83; cursor: default; border-color: rgba(255, 255, 255, 0.07);
}
.fluffy-lib-files {
  padding: .5rem .5rem .7rem 3.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02);
}
.fluffy-lib-file {
  display: flex; align-items: center; gap: .8rem; padding: .35rem 0; font-size: .87rem;
}
.fluffy-lib-file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #cfd3d9; }
.fluffy-lib-file-size { flex: none; color: #767b83; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .fluffy-lib-row { flex-wrap: wrap; }
  .fluffy-lib-row-body { flex: 1 1 60%; }
  button.fluffy-lib-dl { flex: 1 1 100%; padding: .65rem; }
  .fluffy-lib-files { padding-left: .5rem; }
}

/* Sign-in: the "check your email" screen (2.11.0). */
.fluffy-poll-status { color: #a9adb4; font-size: .9rem; display: flex; align-items: center; gap: .55rem; }
.fluffy-poll-status a { color: #33a1ff; }
.fluffy-spinner {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: #0089f7;
  animation: fluffy-spin 0.9s linear infinite;
}
@keyframes fluffy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fluffy-spinner { animation: none; } }
/* The code entry is the FALLBACK: present, but visually second. */
.fluffy-code-fallback { margin-top: .4rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.fluffy-code-fallback label { color: #a9adb4; font-weight: 500; }
.fluffy-code-fallback input { font-size: 16px; letter-spacing: .12em; }
button.fluffy-code-button { padding: .65rem 1rem; font-size: .9rem; font-weight: 600; }

/* Account controls (email change etc.) */
.fluffy-account-controls { margin-top: 2.5rem; }
.fluffy-account-controls h3 { margin: 0 0 .6rem; }

.fluffy-lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem;
}
.fluffy-lib-card {
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; overflow: hidden;
  background: #1c1c1c; display: flex; flex-direction: column;
}
.fluffy-lib-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #262626; }
.fluffy-lib-card-body { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.fluffy-lib-card-body h4 { margin: 0; font-size: .98rem; color: #ffffff; }
.fluffy-chip {
  align-self: flex-start; background: rgba(0, 137, 247, 0.18); color: #4db2ff;
  border-radius: 999px; font-size: .7rem; font-weight: 700; padding: .18em .7em; letter-spacing: .04em;
}
.fluffy-redeem { margin-top: 2.5rem; }
.fluffy-redeem h3, .fluffy-vault-dl h3 { margin: 0 0 .6rem; }
.fluffy-vault-dl {
  margin-top: 2.5rem; background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 1.3rem 1.4rem;
}
.fluffy-vault-dl p { margin: 0 0 .9rem; color: #a9adb4; }
.fluffy-vault-buttons { display: flex; flex-wrap: wrap; gap: .7rem; }
.fluffy-vault-buttons .button {
  background: #262626; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px; padding: .6rem 1rem; text-decoration: none; font-weight: 600;
}
.fluffy-vault-buttons .button:hover { background: #0089f7; border-color: #0089f7; }

/* ---------- newsletter consent (checkout) ---------- */

label.fluffy-consent {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .85rem; color: #cfd3d9; cursor: pointer; line-height: 1.45;
}
label.fluffy-consent input {
  width: 16px; height: 16px; margin-top: .15rem; flex: none;
  accent-color: #0089f7; cursor: pointer;
}

/* ---------- static pages: thank-you + vault download (dark, header-aware) ---------- */

.fluffy-static-page {
  max-width: 680px; margin: 0 auto;
  padding: calc(var(--fluffy-header-pad, 0px) + 2.5rem) 1rem 4rem;
  color: #f2f3f5; text-align: center;
}
.fluffy-static-page h2 { color: #ffffff; font-size: 1.5rem; margin: 0 0 .8rem; }
.fluffy-static-page .fluffy-lead { font-size: 1.1rem; color: #cfd3d9; }
.fluffy-static-page p { margin: 0 0 1rem; }
.fluffy-static-page a { color: #33a1ff; }
.fluffy-static-page .fluffy-vault-dl { margin-top: 2rem; text-align: center; }
.fluffy-static-page .fluffy-vault-buttons { justify-content: center; }

/* ---------- mobile checkout refinements ---------- */

@media (max-width: 860px) {
  /* Order summary FIRST on mobile — the buyer confirms what they're paying
     before the form, then scrolls once, top to bottom, to pay. */
  .fluffy-checkout { display: flex; flex-direction: column; }
  .fluffy-checkout .fluffy-summary { order: -1; }
  .fluffy-checkout { padding-top: calc(var(--fluffy-header-pad, 0px) + 1.2rem); }
}
@media (max-width: 600px) {
  .fluffy-checkout { padding-left: .9rem; padding-right: .9rem; gap: 1.3rem; }
  .fluffy-summary { padding: 1rem 1.1rem; }
  /* 16px inputs: anything smaller makes iOS Safari zoom the page on focus. */
  .fluffy-field input, .fluffy-field select { font-size: 16px; padding: .7rem .8rem; }
  .fluffy-field-row { flex-wrap: wrap; }
  .fluffy-field-row .fluffy-field { flex: 1 1 45%; min-width: 9rem; }
  .fluffy-pay-button { padding: 1rem; font-size: 1.05rem; }
}

/* ---------- checkout discounts ---------- */
.fluffy-summary-discount .amount { color: #7ee2a8; }
.fluffy-summary-discount .fluffy-summary-name { color: #7ee2a8; font-size: 0.88rem; }
.fluffy-coupon-note, .fluffy-field-note { color: #ffb4b4; font-size: 0.82rem; margin-top: 0.3rem; }

/* Not sellable yet (no archive in the Vault) — keep the tile, disable the action. */
a.fluffy-coming-soon { opacity: .55; cursor: default; pointer-events: none; }

/* ---- SALE corner ribbon (CSS replica of the historical *-SALE.png band) ---- */
.fluffy-sale-ribbon { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.fluffy-sale-ribbon-band {
  position:absolute; top:8%; right:-22%; width:60%; transform:rotate(45deg); transform-origin:center;
  background:linear-gradient(180deg,#ef2222 0%,#d90f0f 100%);
  color:#fff; font:700 clamp(10px, 0.8vw + 7px, 14px)/2.1 -apple-system,system-ui,'Segoe UI',sans-serif;
  letter-spacing:.14em; text-align:center; text-transform:uppercase;
  box-shadow:0 0 16px rgba(224,21,21,.55), 0 1px 4px rgba(0,0,0,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* savings summary lines (drawer + checkout) */
.fluffy-cart-savings { color:#3dd68c; font-size:12.5px; padding:2px 0 6px; text-align:right; }
.fluffy-summary-savings { color:#2fbf7a; font-weight:600; border-top:1px dashed rgba(127,127,127,.35); padding-top:8px; margin-top:4px; }

/* ── Site fixes 2026-08-26 (Olmo's review + owner) ───────────────────────── */
/* The Products dropdown outgrows short screens and could not be scrolled:
 * cap it to the viewport and scroll inside. Covers BOTH header systems (the
 * BeBuilder header's .mfn-header-menu and the legacy #Top_bar); desktop only
 * (the mobile menu is an accordion and scrolls the page itself). */
/* (Products-dropdown scroll cap removed 2026-08-27: the categorized menu is
 * short, and the overflow rule was clipping the nested category flyouts.) */

/* Dropdown/submenu ground #1a1a1a (owner ask 2026-08-26). The first selector
 * mirrors the theme rule's exact specificity (and we load after the theme, so
 * we win); the rest catch every submenu level and the legacy header. */
.mcb-section .mcb-wrap .mcb-item-85566948d .mfn-header-menu li.mfn-menu-li > ul.mfn-submenu,
.mfn-header-menu ul.mfn-submenu,
#Top_bar .menu li ul {
  background-color: #1a1a1a;
}
/* Cookie-policy page: the first lines rendered under the fixed header.
 * Blunt on purpose — the earlier :first-child selector missed this page's
 * actual wrapper structure (owner re-report 2026-08-26). */
body.page-id-29855 #Content { padding-top: 120px !important; }

/* ── FluffyAudio Vault landing (/download-vault/) 2026-08-27 ─────────────── */
.fluffy-vault-landing { max-width: 1040px; margin: 0 auto; padding-bottom: 4rem; }
.fv-hero { text-align: center; padding: 2.5rem 1rem 1rem;
  /* flex-centered so the sub block centers even when the theme's column
   * styles fight margin:auto (owner report 2026-08-27). */
  display: flex; flex-direction: column; align-items: center; }
.fv-eyebrow { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: #8a8a86; margin: 0 0 .8rem; }
.fv-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 1rem; color: #fff; }
.fv-sub { width: 100%; max-width: 620px; margin: 0 auto 1.6rem; color: #cfd3d9; font-size: 1.08rem; line-height: 1.6; text-align: center; }
.fv-buttons { justify-content: center; }
.fv-req { margin-top: 1rem; }
.fv-shot { margin: 2.2rem auto; text-align: center; }
.fv-shot img { max-width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.fv-shot figcaption { margin-top: .8rem; color: #8a8a86; font-size: .88rem; }
.fv-shot-hero { max-width: 920px; }
.fv-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin: 2.5rem 0; }
.fv-feat { background: #181818; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 1.3rem 1.4rem; }
.fv-feat h3 { margin: 0 0 .5rem; font-size: 1.02rem; color: #fff; }
.fv-feat p { margin: 0; color: #a9adb4; font-size: .92rem; line-height: 1.55; }
.fv-shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 760px) { .fv-shot-row { grid-template-columns: 1fr; } }
.fv-foot { text-align: center; margin-top: 2.5rem; }
.fv-foot .fluffy-muted { margin-top: 1rem; }


/* ── END OF SALE OFFER toast (owner-approved preview, 2026-08-27) ─────────── */
.fluffy-promo-toast {
  position: fixed; left: 20px; bottom: 20px; z-index: 9996;
  width: min(340px, calc(100vw - 40px));
  background: #181818; color: #f2f3f5;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px; padding: 16px 40px 16px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  font-size: 14px; line-height: 1.55;
  animation: fluffy-promo-in .4s ease;
}
@keyframes fluffy-promo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fluffy-promo-toast { animation: none; } }
.fluffy-promo-toast .eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a86; margin: 0 0 6px; }
.fluffy-promo-toast p { margin: 0 0 10px; color: #cfd3d9; }
.fluffy-promo-code {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 15px;
  background: #101010; border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 6px;
  padding: 7px 12px; color: #ffffff; cursor: pointer; user-select: all;
}
.fluffy-promo-code:hover, .fluffy-promo-code:focus-visible { border-color: #0089f7; outline: none; }
.fluffy-promo-code .hint { font-family: inherit; font-weight: 400; font-size: 11px; color: #767b83; }
.fluffy-promo-close {
  position: absolute; top: 2px; right: 2px; background: none; border: 0;
  color: #767b83; font-size: 22px; line-height: 1; cursor: pointer;
  /* a real tap target — 40px square (mobile-close complaint, 2026-08-27) */
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
}
.fluffy-promo-close:hover { color: #fff; }
/* Mobile: centered via equal insets (no transform, so the slide-in animation
 * stays intact), full-width minus margins, and lifted ABOVE the cookie banner
 * (cart.js measures the Complianz banner and raises the toast when present). */
@media (max-width: 600px) {
  /* bottom clears the floating cart button (fab: bottom 5.75rem + 56px circle),
   * so the toast sits fully ABOVE it (owner report 2026-08-27). */
  .fluffy-promo-toast { left: 16px; right: 16px; width: auto; bottom: calc(5.75rem + 68px); text-align: center;
    padding: 12px 38px 12px 14px; font-size: 13px; }
  .fluffy-promo-toast .eyebrow { font-size: 10px; margin-bottom: 4px; }
  .fluffy-promo-toast p { margin-bottom: 8px; }
  .fluffy-promo-toast .fluffy-promo-code { margin: 0 auto; font-size: 13px; padding: 6px 10px; }
}


/* ── Cart-drawer coupon (2026-08-27) ─────────────────────────────────────── */
.fluffy-cart-coupon { display: flex; gap: .5rem; margin-bottom: .8rem; align-items: stretch; }
.fluffy-cart-coupon-input {
  flex: 1; min-width: 0; height: 40px; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.16); border-radius: 4px;
  padding: 0 .7rem; font-size: .9rem; background: #1c1c1c; color: #f2f3f5; font-family: inherit;
}
.fluffy-cart-coupon-input::placeholder { color: #767b83; }
.fluffy-cart-coupon-input:focus { outline: 2px solid #0089f7; outline-offset: 0; border-color: #0089f7; }
/* Un-themed on purpose (no .button class): the theme's button chrome brought
 * its own height and casing and misaligned against the input (owner report). */
button.fluffy-cart-coupon-apply {
  appearance: none; -webkit-appearance: none; margin: 0; line-height: 1;
  height: 40px; box-sizing: border-box; flex: none;
  background: #242424; color: #f2f3f5; border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px; padding: 0 1rem; font-size: .85rem; font-weight: 600;
  font-family: inherit; text-transform: none; cursor: pointer;
}
button.fluffy-cart-coupon-apply:hover { background: #0089f7; border-color: #0089f7; color: #fff; }
button.fluffy-cart-coupon-apply:focus-visible { outline: 2px solid #0089f7; outline-offset: 2px; }
.fluffy-cart-coupon-note { font-size: .82rem; margin: -.3rem 0 .7rem; }
.fluffy-cart-coupon-note.is-good { color: #6fd08c; }
.fluffy-cart-coupon-note.is-bad { color: #ff9c8a; }

/* ── Mobile cart-open polish (2026-08-27) ────────────────────────────────── */
/* The header goes SOLID dark while the drawer is open (it is normally
 * semi-transparent over the page), animated both ways. Scoped to mobile. */
@media (max-width: 768px) {
  .mfn-header-tmpl, .mcb-header-section { transition: background-color .3s ease; }
  body.fluffy-cart-open .mfn-header-tmpl,
  body.fluffy-cart-open .mcb-header-section {
    background-color: #171a21 !important;
    background-image: none !important;
  }
}

/* Mobile, cart open: the hamburger has no job while the drawer covers the
 * page — hide it, restore on close (owner ask 2026-08-27). */
@media (max-width: 768px) {
  .mfn-header-menu-toggle { transition: opacity .25s ease; }
  body.fluffy-cart-open .mfn-header-menu-toggle { opacity: 0; pointer-events: none; }
}