/* ══════════════════════════════════════════════════════════
   SINGLE PRODUCT 2026 — mobile conversion affordances
   Sticky add-to-cart bar (includes/sticky-atc.php + assets/js/sticky-atc.js)
   and the collapsed Product Add-Ons block
   (includes/product-addons-collapse.php).
   Desktop already puts the real button ~930px up the page, so this is
   mobile-only. Literal hex here to match homepage-2026.css, not the
   oklch tokens in WindPress main.css.
   ══════════════════════════════════════════════════════════ */

.pu-atc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* .pu-nav is position:sticky at z-index 50 — sit above it */
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
    background: #2D2D2D;
    border-top: 3px solid #DA291C;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28);
    transform: translateY(0);
    transition: transform 0.22s ease;
}

/* JS adds this once the real button scrolls into view, so the two
   never sit on screen together. */
.pu-atc.is-stowed {
    transform: translateY(120%);
}

.pu-atc__price {
    /* Takes the leftover room. Needs an explicit 0 basis, not auto, or the
       qty + buy controls shrink it away to nothing. */
    flex: 1 1 0;
    min-width: 0;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.1;
    white-space: nowrap;
}

/* Colour and family need the extra class. _base.css carries
   `.woocommerce span:not(:where(#brx-header *, #brx-footer *))` with
   color: var(--color-gray-700) and font-family: var(--font-body). :where()
   contributes no specificity, so that rule lands at (0,1,1) and beats a bare
   `.pu-atc__price` (0,1,0) — the price rendered as near-black Source Sans on
   a near-black bar. The inner amount/currency spans get caught by the same
   rule, hence the descendant selector. */
.pu-atc span.pu-atc__price,
.pu-atc .pu-atc__price ins,
.pu-atc .pu-atc__price span {
    color: #FFFFFF;
    font-family: 'Barlow Condensed', system-ui, sans-serif;
}

/* WooCommerce wraps prices in its own markup — flatten it here.
   This theme disables WooCommerce's default stylesheet, so .screen-reader-text
   is NOT hidden for us; without the clip below, a sale price renders as
   "Original price was: $60.00. $50.00 Current price is: $50.00." in the bar. */
.pu-atc__price del { display: none; }
.pu-atc__price ins { text-decoration: none; }

.pu-atc__price .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pu-atc__qty {
    display: flex;
    align-items: center;
    /* flex-shrink:0 matters here — <input type="number"> has a wide intrinsic
       size, so without it the browser shrinks the +/- buttons instead. */
    flex: 0 0 auto;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 4px;
    overflow: hidden;
}

.pu-atc__step {
    flex: 0 0 auto;
    /* explicit centring — the glyphs sat high in the 44px box on inherited
       line-height */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    /* system-ui, not Barlow Condensed: U+2212 renders reliably here and the
       symbols read crisper than the condensed face at this size */
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.pu-atc__step:active { background: rgba(255, 255, 255, 0.12); }

/* Compound selector on purpose. woocommerce/_forms.css carries
   `.woocommerce input[type="number"] { width: 100% }` at (0,2,1), and body
   has the bare .woocommerce class on single product pages, so a plain
   `.pu-atc__qtyinput` (0,1,0) loses and the input blows out to 259px —
   which shoves the + button underneath the buy button. WindPress's bundle
   also loads after this file, so matching specificity isn't enough. */
.pu-atc input.pu-atc__qtyinput[type="number"] {
    flex: 0 0 auto;
    width: 40px;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    border-right: 1px solid rgba(255, 255, 255, 0.28);
    /* _forms.css also hands this input border-radius: var(--radius-md) (8px)
       and a gray background. Without the reset the input paints its own
       rounded box *inside* the group's border and reads as a nested field. */
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    color: #FFFFFF;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.0625rem;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.pu-atc__qtyinput::-webkit-outer-spin-button,
.pu-atc__qtyinput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pu-atc__buy {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 1rem;
    border: 0;
    border-radius: 4px;
    background: #DA291C;
    color: #FFFFFF;
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.pu-atc__buy:active { background: #B92117; }
.pu-atc__buy[disabled] { opacity: 0.55; cursor: default; }

/* Keep the bar from covering the last of the page content. */
body.has-pu-atc {
    padding-bottom: 76px;
}

@media (min-width: 1024px) {
    .pu-atc { display: none; }
    body.has-pu-atc { padding-bottom: 0; }
}

/* Variable product with no size chosen yet — the button stays tappable
   (it scrolls to the picker) but reads as not-yet-ready. */
.pu-atc__buy.is-pending {
    background: #6B6B6B;
}


/* ══════════════════════════════════════════════════════════
   COLLAPSED PRODUCT ADD-ONS
   Moved below the Add to Cart button by
   includes/product-addons-collapse.php. Closed by default: on the Titanium
   both fields are optional, and asking about a keying system before someone
   can reach the button cost more than it earned.
   ══════════════════════════════════════════════════════════ */

.pu-addons {
    /* form.cart is display:grid, so without this the details lands in a
       column beside the Add to Cart button instead of below it. */
    grid-column: 1 / -1;
    width: 100%;
    margin: 1rem 0 0;
    border-top: 1px solid var(--color-gray-200, #E5E5E5);
}

.pu-addons__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 44px minimum tap target */
    min-height: 44px;
    padding: 0.5rem 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--pu-power-red, #DA291C);
    cursor: pointer;
    list-style: none;
}

.pu-addons__summary::-webkit-details-marker { display: none; }

/* Chevron, rotated when open */
.pu-addons__summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
}

.pu-addons[open] .pu-addons__summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.pu-addons__body {
    padding-bottom: 0.75rem;
}

/* The plugin's checkbox renders at 22px, under the 44px tap minimum. */
.pu-addons__body input[type="checkbox"],
.pu-addons__body input[type="radio"] {
    width: 22px;
    height: 22px;
    margin-right: 0.5rem;
}

.pu-addons__body label {
    display: flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
}


/* ══════════════════════════════════════════════════════════
   PRODUCT PROOF (includes/product-proof.php)
   Four shortcode-rendered blocks placed into template 208 by
   scripts/add-product-page-proof.php:
     .pu-sp-why       three lines under the price, inside the buy stack
     .pu-sp-comments  dark band of real YouTube comments (titanium + bundle)
     .pu-sp-salt      the 1,000-hour ASTM B117 result (titanium + bundle)
     .pu-sp-faq       <details> Q&A per product family
   Each section carries its own __inner wrapper on the 2026 contract
   (1400px / clamp gutter) and does not rely on .brxe-container.

   Specificity note: homepage-2026.css resets `.woocommerce [class*="pu-"]
   p / span / li / h2` to `color: inherit` at (0,3,1), so a plain two-class
   selector never wins on colour. Rules that set a colour on one of those
   elements use `body.single-product … el.class` (0,3,2); everything else
   leans on inheritance from the section. Literal hex to match
   homepage-2026.css.
   ══════════════════════════════════════════════════════════ */

/* A shortcode that returns '' still leaves Bricks' wrapper div behind.
   With no content it has no height, but the buy stack's `> * + *` margin
   would still stack on it, so remove it outright. */
.single-product .brxe-shortcode:empty { display: none; }

/* ── Shared kicker: mono, red, leading slash comes from the markup ── */
body.single-product .pu-sp-why li.pu-sp-why__kicker,
body.single-product .pu-sp-comments p.pu-sp-comments__kicker,
body.single-product .pu-sp-salt p.pu-sp-salt__kicker,
body.single-product .pu-sp-faq p.pu-sp-faq__kicker {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #DA291C;
    margin: 0;
    padding: 0;
}
body.single-product .pu-sp-comments p.pu-sp-comments__kicker { color: #FF4233; }

/* ── .pu-sp-why: under the price, keep it tight ─────────────── */
.pu-sp-buy__stack > .pu-sp-buy__why { margin-top: 1rem; }

.pu-sp-why {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #2D2D2D; /* lines inherit this */
}

.pu-sp-why .pu-sp-why__kicker { margin-bottom: 6px; }

.pu-sp-why .pu-sp-why__line {
    position: relative;
    margin: 0;
    padding: 0 0 0 18px;
    font-family: 'IBM Plex Sans', 'Source Sans 3', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.35;
    color: #2D2D2D;
}

.pu-sp-why .pu-sp-why__line + .pu-sp-why__line { margin-top: 4px; }

/* Two of the three lines wrap at phone widths; tighten so the block stays
   a glance, not a paragraph, between the price and the button. */
@media (max-width: 480px) {
    .pu-sp-why .pu-sp-why__kicker { margin-bottom: 4px; }
    .pu-sp-why .pu-sp-why__line {
        font-size: 14px;
        line-height: 1.25;
    }
    .pu-sp-why .pu-sp-why__line + .pu-sp-why__line { margin-top: 2px; }
}

/* red dash bullet */
.pu-sp-why .pu-sp-why__line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 2px;
    background: #DA291C;
}

/* ── .pu-sp-comments: dark band, 1 col mobile / 2 col ≥768px ── */
.pu-sp-comments {
    background: #16181B;
    color: #D6D7DA;
    padding: clamp(56px, 7vw, 96px) 0;
    border-top: 1px solid rgba(214, 215, 218, 0.08);
}

.pu-sp-comments__inner,
.pu-sp-salt__inner,
.pu-sp-faq__inner {
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 56px);
    box-sizing: border-box;
}

.pu-sp-comments__header {
    max-width: 60ch;
    margin: 0 0 clamp(28px, 4vw, 48px);
}

body.single-product .pu-sp-comments h2.pu-sp-comments__h2 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 1.75rem + 3vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0.5rem 0 0;
}

body.single-product .pu-sp-comments p.pu-sp-comments__sub {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(214, 215, 218, 0.6);
    margin: 14px 0 0;
}

.pu-sp-comments__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .pu-sp-comments__grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

.pu-sp-comments .pu-sp-comments__card {
    margin: 0;
    padding: clamp(24px, 3vw, 36px);
    background: #1E2125;
    border: 1px solid rgba(214, 215, 218, 0.1);
    border-left: 3px solid #FF4233;
    color: #D6D7DA;
}

.pu-sp-comments .pu-sp-comments__bq {
    margin: 0;
    padding: 0;
    border: 0;
}

.pu-sp-comments .pu-sp-comments__quote {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(22px, 1.1rem + 1vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: #D6D7DA;
    margin: 0;
}

.pu-sp-comments .pu-sp-comments__quote::before {
    content: '\201C';
    color: #FF4233;
    font-style: normal;
    margin-right: 4px;
}

.pu-sp-comments .pu-sp-comments__handle {
    display: block;
    margin-top: 18px;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(214, 215, 218, 0.6);
}

/* ── .pu-sp-salt: paper band, mega numeral + photo ────────── */
.pu-sp-salt {
    background: #F2EDE1;
    color: #2D2D2D;
    padding: clamp(56px, 7vw, 96px) 0;
}

.pu-sp-salt__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

@media (min-width: 900px) {
    .pu-sp-salt__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
}

.pu-sp-salt .pu-sp-salt__kicker { margin-bottom: 16px; }

/* Scaled-down version of the homepage .pu-saltbath__mega device: the HR
   unit sits in red on the numeral's bottom-right, skewed like a stamp. */
.pu-sp-salt .pu-sp-salt__mega {
    position: relative;
    display: inline-block;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 800;
    font-size: clamp(72px, 12vw, 160px);
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: #16181B;
    margin: 0 0 24px;
    padding-right: 0.5em;
}

body.single-product .pu-sp-salt span.pu-sp-salt__unit {
    position: absolute;
    right: 0;
    bottom: -0.04em;
    font-family: inherit;
    font-size: 0.42em;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #DA291C;
    transform: skewX(-6deg);
}

.pu-sp-salt .pu-sp-salt__h2 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #2D2D2D;
    margin: 0 0 20px;
    max-width: 18ch;
}

body.single-product .pu-sp-salt p.pu-sp-salt__body {
    font-family: 'IBM Plex Sans', 'Source Sans 3', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #3A3A3A;
    margin: 0 0 20px;
    max-width: 52ch;
}

body.single-product .pu-sp-salt p.pu-sp-salt__note {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    line-height: 1.6;
    text-transform: uppercase;
    color: #6B6B6B;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(45, 45, 45, 0.15);
    max-width: 52ch;
}

.pu-sp-salt .pu-sp-salt__media { margin: 0; padding: 0; }

.pu-sp-salt .pu-sp-salt__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35);
}

/* ── .pu-sp-faq: white, <details> list with red plus/minus ── */
.pu-sp-faq {
    background: #FFFFFF;
    color: #2D2D2D;
    padding: clamp(56px, 7vw, 96px) 0;
}

@media (min-width: 1024px) {
    .pu-sp-faq__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: clamp(32px, 5vw, 80px);
        align-items: start;
    }
}

.pu-sp-faq__header { margin: 0 0 clamp(24px, 4vw, 40px); }

.pu-sp-faq .pu-sp-faq__h2 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 1.75rem + 3vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #2D2D2D;
    margin: 0.5rem 0 0;
}

.pu-sp-faq__list { border-top: 1px solid rgba(45, 45, 45, 0.15); }

.pu-sp-faq__item { border-bottom: 1px solid rgba(45, 45, 45, 0.15); }

.pu-sp-faq .pu-sp-faq__q {
    position: relative;
    display: block;
    min-height: 44px;
    padding: 18px 40px 18px 0;
    list-style: none;
    cursor: pointer;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: #2D2D2D;
}

.pu-sp-faq .pu-sp-faq__q::-webkit-details-marker { display: none; }

/* Plus sign: ::after is the horizontal bar, ::before the vertical one.
   Open rotates the vertical bar onto the horizontal so it reads as minus. */
.pu-sp-faq .pu-sp-faq__q::before,
.pu-sp-faq .pu-sp-faq__q::after {
    content: "";
    position: absolute;
    top: 50%;
    background: #DA291C;
}

.pu-sp-faq .pu-sp-faq__q::after {
    right: 0;
    width: 16px;
    height: 2px;
    transform: translateY(-50%);
}

.pu-sp-faq .pu-sp-faq__q::before {
    right: 7px;
    width: 2px;
    height: 16px;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.pu-sp-faq .pu-sp-faq__item[open] .pu-sp-faq__q::before {
    transform: translateY(-50%) rotate(90deg);
}

.pu-sp-faq .pu-sp-faq__q:hover { color: #DA291C; }

.pu-sp-faq .pu-sp-faq__a {
    padding: 0 40px 22px 0;
    max-width: 64ch;
}

body.single-product .pu-sp-faq div.pu-sp-faq__a p {
    font-family: 'IBM Plex Sans', 'Source Sans 3', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #3A3A3A;
    margin: 0;
}

body.single-product .pu-sp-faq div.pu-sp-faq__a p + p { margin-top: 10px; }

.pu-sp-faq .pu-sp-faq__link {
    color: #DA291C;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .pu-sp-faq .pu-sp-faq__q::before { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   LEAD-TIME NOTICE (includes/stock-notice.php)
   Under the Add to Cart button, inside form.cart, on the SKUs that
   sold out after the Dirt Monkey video. Same full-row trick as the
   quantity presets: form.cart is an `auto 1fr 1fr` grid on simple
   products and a flex-wrap row on variable ones.
   ══════════════════════════════════════════════════════════ */
.brxe-product-add-to-cart form.cart > .pu-ship-notice {
    grid-column: 1 / -1;
}

.brxe-product-add-to-cart .woocommerce-variation-add-to-cart .pu-ship-notice {
    flex: 0 0 100%;
}

body.single-product form.cart p.pu-ship-notice {
    margin: 0.75rem 0 0;
    padding: 0 0 0 14px;
    border-left: 3px solid #DA291C;
    font-family: 'IBM Plex Sans', 'Source Sans 3', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #2D2D2D;
}

body.single-product form.cart p.pu-ship-notice strong.pu-ship-notice__lead {
    display: block;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #DA291C;
}

body.single-product form.cart p.pu-ship-notice span.pu-ship-notice__detail {
    color: #3A3A3A;
}