/*
 * Style-page UI/UX 2026-09 (D1c) - C1, C2, C3, C5, C7.
 * All new classes are prefixed `boc-sp-`. This file is loaded only on the
 * catalog_category_view_f_layout_1 layout handle (confirmed: it is the only
 * layout XML that references this stylesheet), so nothing here leaks onto
 * other page types regardless of selector scope - but every rule is still
 * written against a real ancestor for correctness and to avoid accidentally
 * matching some other page's own reuse of a plain class name.
 *
 * Two different real ancestors are in play, NOT one shared `.f-layout-container`:
 * - C3/C4/C5/C7 target the product grid (list.phtml), which genuinely is
 *   rendered inside `.f-layout-container` (via SSR adoption/AJAX into
 *   furniture-layout.phtml's accordion) - `.f-layout-container <selector>` is
 *   correct there and is left as-is.
 * - C1/C2 target gallery.phtml's output (price block / CTA row / shipping /
 *   chips), which furniture-layout.phtml renders at line 509 - BEFORE the
 *   `.f-layout-container` div opens at line 510. Those elements are never
 *   descendants of `.f-layout-container`; `.f-layout-container <selector>`
 *   silently matched nothing for any of them (found via the C1 price-now
 *   staging bug, then confirmed to be the same root cause for every other
 *   C1/C2 rule). They are scoped instead to gallery.phtml's own real
 *   ancestors: `.category-info-top` (gallery.phtml:81, the single top-level
 *   wrapper for the whole block) or a nearer `.boc-sp-*` ancestor where one
 *   exists (`.boc-sp-price`, `.boc-sp-cta-group`, `.boc-sp-chips`).
 *
 * Reference: docs/design/lp-style-page-2026-09/design-notes.md (token scale
 * 12/14/16/18/22/28/32, spacing 4/8/12/16/24/32, radius 6/8, target 44px,
 * focus 3px + 2px offset) and this repo's docs/design/uiux-2026-09/style-page/CHANGES.md.
 */

/* ---- shared tokens (local custom properties, not global - avoids touching Tailwind config) ----
 * On :root, not `.f-layout-container`: gallery.phtml's C1/C2 elements (see
 * above) are not descendants of `.f-layout-container`, so a declaration
 * scoped there is invisible to their var() lookups (this was a second,
 * related bug - the ancestor-selector fix alone would still have left
 * every var(--boc-sp-*) consumer below resolving to nothing). :root is a
 * property declaration only, not a style rule matched against elements -
 * it does not widen which elements get styled, so this does not weaken the
 * "does not leak to other page types" property established by this file's
 * conditional loading above. */
:root {
    --boc-sp-primary: #C2410C;
    --boc-sp-primary-hover: #9A3412;
    --boc-sp-ink: #111111;
    --boc-sp-muted: #6B7280;
    --boc-sp-line-strong: #8A8F98;
}

/* ---- C1: price block ----
 * Scoped to gallery.phtml's own real ancestors, not `.f-layout-container`
 * (see the file-header comment): `.category-info-top` is the single
 * top-level wrapper (gallery.phtml:81) around the whole block including
 * `.boc-sp-price` itself (gallery.phtml:101); `.boc-sp-price` in turn is
 * the real ancestor of everything nested inside it (eyebrow/bkp-toggle/
 * bkp-panel/price-reg/price-now/badge, gallery.phtml:102-121). */
.category-info-top .boc-sp-price {
    /* ponytail: fixed min-height as a CLS placeholder, not a pixel-exact layout system -
       revisit if the eyebrow/toggle/price row wraps differently on a given viewport. */
    min-height: 96px;
}
@media (min-width: 768px) {
    .category-info-top .boc-sp-price {
        min-height: 110px;
    }
}
.boc-sp-price .boc-sp-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--boc-sp-muted);
}
.boc-sp-price .boc-sp-bkp-toggle {
    background: none;
    border: 0;
    padding: 2px 4px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--boc-sp-primary);
    text-decoration: underline;
    cursor: pointer;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.boc-sp-price .boc-sp-bkp-toggle:hover {
    color: var(--boc-sp-primary-hover);
}
.boc-sp-price .boc-sp-bkp-toggle:focus-visible {
    outline: 3px solid var(--boc-sp-primary-hover);
    outline-offset: 2px;
}
.boc-sp-price .boc-sp-bkp-panel {
    margin: 4px 0 8px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.boc-sp-price .boc-sp-price-now {
    font-weight: 800;
}
@media (min-width: 768px) {
    .boc-sp-price .boc-sp-price-now {
        font-size: 32px;
    }
}
.boc-sp-price .boc-sp-price-reg {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.boc-sp-price .boc-sp-price-reg,
.boc-sp-price .boc-sp-price-reg > s {
    font-size: 16px;
    font-weight: 400;
}
.boc-sp-price .boc-sp-price-reg > s {
    text-decoration-thickness: 1px;
}
.boc-sp-price .boc-sp-badge {
    vertical-align: middle;
}

/* ---- C2: three-tier CTA + shipping/trust ----
 * Same fix as C1 above, applied to gallery.phtml's other real ancestors:
 * `.boc-sp-cta-group` is the other class already on the CTA row's own
 * wrapper div (gallery.phtml:144, alongside `.boc-style-cta`) and is the
 * direct parent of `.boc-sp-cta-primary`/`-call`/`-sample`
 * (gallery.phtml:145/146/150). `.boc-sp-chips` is the direct parent of
 * `.boc-sp-chip` (gallery.phtml:156-162) - no outer wrapper needed there.
 * `.boc-sp-ship` (gallery.phtml:139) and `.boc-sp-chips` itself
 * (gallery.phtml:156) have no nearer `.boc-sp-*` ancestor of their own, so
 * both use `.category-info-top` (gallery.phtml:81), same as C1's
 * `.boc-sp-price`. */
.boc-sp-cta-group .boc-sp-cta-primary,
.boc-sp-cta-group .boc-sp-cta-call,
.boc-sp-cta-group .boc-sp-cta-sample {
    min-height: 44px;
    min-width: 44px;
}
.boc-sp-cta-group .boc-sp-cta-sample {
    padding: 0 8px;
    color: var(--boc-sp-primary);
    font-weight: 600;
    text-decoration: underline;
}
.boc-sp-cta-group .boc-sp-cta-sample:hover {
    color: var(--boc-sp-primary-hover);
}
.boc-sp-cta-group .boc-sp-cta-primary:focus-visible,
.boc-sp-cta-group .boc-sp-cta-call:focus-visible,
.boc-sp-cta-group .boc-sp-cta-sample:focus-visible {
    outline: 3px solid var(--boc-sp-primary-hover);
    outline-offset: 2px;
}
.category-info-top .boc-sp-ship {
    line-height: 1.4;
}
.category-info-top .boc-sp-chips {
    margin-left: 0;
}
.boc-sp-chips .boc-sp-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--boc-sp-muted);
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}
/* chip #1 carries a second, smaller line (the shipping threshold) */
.boc-sp-chips .boc-sp-chip span:last-child:not(:only-child) {
    font-size: 11px;
    font-weight: 400;
}

/* ---- C3: product block container ---- */
.f-layout-container .boc-sp-card {
    border-color: var(--boc-sp-line-strong);
    border-width: 1px;
    border-radius: 8px;
}
@media (min-width: 768px) {
    .f-layout-container .boc-sp-card {
        margin-bottom: 32px;
    }
}

/* ---- C5: total price ---- */
.f-layout-container .boc-sp-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--boc-sp-ink);
}
@media (min-width: 768px) {
    .f-layout-container .boc-sp-total {
        font-size: 22px;
    }
}

/* ---- C7: sticky sub-category headers + mobile anchor nav ----
 * 2026-09-18 sticky-clearance fix: `top` used to be a bare `120px`, on the
 * theory that the site header was ~120px tall -- that theory was wrong on
 * desktop (the real fixed `#header` is 174.625px there, only 112.75px on
 * mobile; see header-uiux-2026-09.css's `--boc-header-height` comment for
 * the measurement), so the sticky header landed 54.625px UNDER the fixed
 * site header (fully hidden) on desktop instead of just below it. `top` now
 * reads `--boc-header-height` (the single source of truth defined in
 * header-uiux-2026-09.css, loaded site-wide including on this layout --
 * see that file's own header comment) minus 1px, so the sticky header's top
 * edge sits flush against the fixed header's bottom edge with a 1px overlap
 * to cover sub-pixel rounding gaps. `120px` survives only as the var()
 * fallback for the (currently hypothetical) case where the variable is
 * unavailable, not as a real header-height claim.
 * `scroll-margin-top` mirrors the same variable so that jumping to a
 * `#sub-cat-sec-*` anchor also clears the fixed header -- this selector
 * (specificity 0,2,0) intentionally overrides the lower-specificity
 * `.sub-cat-header{scroll-margin-top:120px}` rule inlined in
 * furniture-layout.phtml (specificity 0,1,0) purely via specificity, no
 * `!important` needed. */
.f-layout-container .sub-cat-header {
    position: sticky;
    top: calc(var(--boc-header-height, 120px) - 1px);
    scroll-margin-top: var(--boc-header-height, 120px);
    z-index: 10;
    background: #fff;
}
.f-layout-container .boc-sp-anchors {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 12px;
    margin-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
.f-layout-container .boc-sp-anchors a {
    flex: 0 0 auto;
    padding: 6px 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--boc-sp-ink);
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
}
.f-layout-container .boc-sp-anchors a:hover {
    color: var(--boc-sp-primary);
}
.f-layout-container .boc-sp-anchors a:focus-visible {
    outline: 3px solid var(--boc-sp-primary-hover);
    outline-offset: 2px;
}

/* ---- C4: size selection buttons (see C4-C6-implementation-plan.md §2.1) ---- */
.f-layout-container .boc-sp-sizes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
@media (max-width: 480px) {
    .f-layout-container .boc-sp-sizes {
        grid-template-columns: 1fr;
    }
}
.f-layout-container .boc-sp-size {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 10px 34px 10px 12px;
    border: 1px solid var(--boc-sp-line-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--boc-sp-ink);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
}
.f-layout-container .boc-sp-size:hover:not([disabled]) {
    background: #FFFAF7;
    border-color: var(--boc-sp-primary);
}
.f-layout-container .boc-sp-size:focus-visible {
    outline: 3px solid var(--boc-sp-primary-hover);
    outline-offset: 2px;
}
.f-layout-container .boc-sp-size__price {
    font-weight: 700;
    font-size: 16px;
    color: var(--boc-sp-ink);
}
.f-layout-container .boc-sp-size__price-reg {
    font-weight: 400;
    font-size: 12px;
    color: var(--boc-sp-muted);
}
.f-layout-container .boc-sp-size[aria-pressed="true"] {
    border: 2px solid var(--boc-sp-primary);
    background: #FFF7F1;
    padding: 9px 33px 9px 11px;
}
.f-layout-container .boc-sp-size__check {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 18px;
    height: 18px;
    color: var(--boc-sp-primary);
    display: none;
}
.f-layout-container .boc-sp-size[aria-pressed="true"] .boc-sp-size__check {
    display: block;
}
.f-layout-container .boc-sp-size[aria-disabled="true"] {
    border-style: dashed;
    color: var(--boc-sp-muted);
    background: #F9FAFB;
    cursor: not-allowed;
}
.f-layout-container .boc-sp-size__price--oos {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--boc-sp-muted);
}

/* C6 mobile-cta-bar CSS lives inline in boc-mobile-cta-bar.phtml, not here:
 * that template is shared with catalog_category_view_custom_content.xml
 * (any category with the "Custom Content Block" attribute on, unrelated to
 * f-layout-1 style pages), and this stylesheet is only loaded by
 * catalog_category_view_f_layout_1.xml. A rule here would silently not
 * apply on those other pages, leaving the new cart-state button visible
 * and non-functional there. See boc-mobile-cta-bar.phtml's own <style>. */

/* G3-02/G3-04: cart control sizing and feedback. Primary colors come from T3. */
.f-layout-container .boc-lp-atc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 260px;
    min-width: 260px;
    height: 50px;
    padding: 0 20px;
}
.f-layout-container .boc-lp-atc-label { white-space: nowrap; }
.f-layout-container .boc-lp-atc-cart {
    width: 20px;
    height: 20px;
    fill: #fff;
    stroke: #fff;
}
.f-layout-container .boc-lp-atc-spin,
.f-layout-container .boc-lp-atc-check { display: none; }
.f-layout-container .boc-lp-atc-check { width: 20px; height: 20px; }
.f-layout-container .boc-lp-atc-spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
}
.f-layout-container .boc-lp-atc[data-state="adding"] { cursor: wait; }
.f-layout-container .boc-lp-atc[data-state="adding"] .boc-lp-atc-spin {
    display: inline-block;
    animation: boc-lp-atc-rotate .8s linear infinite;
}
.f-layout-container .boc-lp-atc[data-state="added"] .boc-lp-atc-check { display: inline-block; }
.f-layout-container .boc-lp-atc[data-state="adding"] .boc-lp-atc-cart,
.f-layout-container .boc-lp-atc[data-state="added"] .boc-lp-atc-cart { display: none; }
@keyframes boc-lp-atc-rotate { to { transform: rotate(360deg); } }
.f-layout-container .boc-lp-atc-live {
    flex-basis: 100%;
    text-align: right;
    font-size: 14px;
}
.f-layout-container .boc-lp-atc-viewcart,
.f-layout-container .boc-lp-atc-error { display: inline-block; margin-top: 8px; }
.f-layout-container .boc-lp-atc-viewcart { text-decoration: underline; text-underline-offset: 2px; }
.f-layout-container .boc-lp-atc-error { color: #991b1b; }
.category-info-top .boc-lp-sample-form { display: flex; min-height: 52px; }
.category-info-top .boc-lp-sample-btn { width: 100%; height: 100%; min-height: 52px; }
@media (max-width:767px) {
    /* B2: flatten the two existing columns into a compact header and full-width sizes. */
    .f-layout-container .boc-sp-card .product-item-top {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 12px;
    }
    .f-layout-container .boc-sp-card .product-item-top > div {
        display: contents;
    }
    .f-layout-container .boc-sp-card .product-image-wrapper {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
        aspect-ratio: 1;
        padding-bottom: 0;
    }
    .f-layout-container .boc-sp-card .product-image-photo {
        height: auto;
    }
    .f-layout-container .boc-sp-card .product-item-top h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding-top: 0;
    }
    .f-layout-container .boc-sp-card .product-item-top .child-col {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
    }
    .f-layout-container .boc-sp-card .child-col > p {
        padding-bottom: 0;
    }
    .f-layout-container .boc-sp-card .product-item-top > div:first-child > div {
        grid-column: 2;
        grid-row: 3;
        padding-top: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .f-layout-container .boc-sp-card .product-item-top > div:last-child > .w-full {
        grid-column: 1 / -1;
        grid-row: 4;
        min-width: 0;
        margin-top: 12px;
    }
    .f-layout-container .boc-sp-card .boc-sp-sizes {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
    .f-layout-container .boc-sp-card .boc-sp-size {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 8px;
        align-items: center;
        padding-block: 8px;
        min-height: 44px;
    }
    .f-layout-container .boc-sp-card .boc-sp-size[aria-pressed="true"] {
        padding-block: 7px;
    }
    .f-layout-container .boc-sp-card .boc-sp-size__label {
        grid-column: 1;
        grid-row: 1 / 3;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .f-layout-container .boc-sp-card .boc-sp-size__price {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        white-space: nowrap;
    }
    .f-layout-container .boc-sp-card .boc-sp-size__price-reg {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        white-space: nowrap;
    }
    .f-layout-container .boc-lp-atc { flex: 1; width: auto; min-width: 0; height: 48px; padding: 0 8px; }
    .f-layout-container .boc-sp-card .quantity-box > div:first-child { width: 90px; min-width: 90px; }
    .f-layout-container .boc-sp-card .quantity-box .numeric-input,
    .f-layout-container .boc-sp-card .quantity-box > div:first-child > span { height: 48px; min-height: 48px; }
    .category-info-top .boc-lp-sample-form { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
    .f-layout-container .boc-lp-atc[data-state="adding"] .boc-lp-atc-spin { animation: none; }
}
@media (min-width:768px) {
    .f-layout-container .boc-sp-anchors { display: none; }
}