/*
Theme Name: Kolivita
Description: A classic (non-block) WooCommerce theme for the Kolivita storefront.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.5
WC requires at least: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kolivita
*/

@import "./css/checkout.css";

/* =====================
   COMMON RESET & VARIABLES
===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --ink: #2c2c2c;
    --muted: #6b6b6b;          /* AA on cream (5.0:1) */
    --blue: #2e4a62;
    --blue-soft: #2f5f8f;      /* AA links on cream (6.3:1) */
    --blue-cta: #2f5f8f;
    --blue-cta-hover: #244a6b;
    --orange: #ea7a3b;         /* brand accent — decorative only */
    --orange-ink: #b54d18;     /* orange TEXT/icons — AA on cream (4.9:1) */
    --danger: #a3331a;         /* destructive hover — AA on cream */
    --green: #2f6b46;          /* in-stock dot / free-shipping "unlocked" — AA on cream */
    --orange-deep: #c2531a;    /* white text on this — AA (4.6:1) */
    --orange-tint: color-mix(in srgb, var(--orange) 14%, var(--surface)); /* soft orange tile/chip bg */
    --border: #eae6e1;
    --bg-home: #f7f5f2;
    --bg-product: #faf8f5;
    --surface: #fff;
    --bg: #faf8f5;
    --radius: 10px;
    --shadow-sm: 0 1px 3px rgba(44,44,44,0.06);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.12);
    --content-width: 1600px;
    --product-width: 1600px;
    --content-narrow: 1200px;    /* cart columns: keep line items readable */
}

fieldset {
    border: none;
}

.hidden {
    visibility: hidden;
}

.no-display {
    display: none !important;
}

html, body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

h1, h2, h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--blue);
}

a { color: var(--blue-soft); }

/* Visible, consistent focus state for keyboard users */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--blue-soft);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =====================
   ANNOUNCEMENT
===================== */
#announcement {
    background: var(--orange-deep);
    color: #fff;
    text-align: center;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    padding: 10px 16px;
    font-weight: 600;
}

/* =====================
   HEADER / NAV
===================== */
.nav {
    z-index: 10;

    & .inner {
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Visual size/text is unchanged -- padding + min-height/width only
       expand the tappable box to >=44x44 (was 98x26). */
    & .logo {
        font-weight: 600;
        letter-spacing: 2px;
        color: #fff; /* home overlay */
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    & .links {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;

        /* Visual size/text unchanged -- padding pads the hit area to
           >=44x44 (Shop link measured 35x48 at 375px). */
        a {
            text-decoration: none;
            font-size: 14px;
            color: #fff; /* home overlay default */
            transition: all 0.3s ease;
            border-bottom: 2px solid transparent;
            display: inline-flex;
            align-items: center;
            padding: 12px 10px;
            min-height: 44px;
        }
    }
}


#nav-product {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);

    & .logo {
        color: var(--ink);
        text-decoration: none;
        transition: transform 0.3s ease;
        &:hover {
            transform: scale(1.05);
        }
    }

    & .links a {
        color: var(--blue);
        &:hover {
            color: var(--blue-cta);
            transform: scale(1.05);
        }
    }
}

/* Descendant (not child) combinator: #nav-product now sits inside the
   <header role="banner"> banner landmark, one level deeper than before. */
.admin-bar #nav-product {
    top: 32px !important;
}

/* =====================
   HERO (HOME)
===================== */
#hero {
    position: relative;
    background: #f3efe9;
    overflow: hidden; /* clips the parallax .media layer to the section */

    & .media {
        position: absolute;
        inset: 0;
        will-change: transform; /* translateY'd on scroll by ParallaxHero (parallax-hero.js) */
        opacity: 0;
        /* No-JS / failed-module fallback: if ParallaxHero never runs (main.js
           blocked, errors, or never loads) the photo would otherwise stay
           invisible forever. The keyframe only declares the "to" state, so
           its implicit start is whatever opacity the element already has --
           a no-op if .is-visible's own animation already applied it, a
           safety fade-in if not. See @keyframes hero-media-fallback below.
           Deliberately an "animation", not a "transition": a property can
           only run one or the other at a time, and .is-visible below needs
           the animation slot to drive its own fade (see that rule for why
           it can't just be a plain "transition: opacity"). */
        animation: hero-media-fallback 700ms ease 4s forwards;

        /* ParallaxHero (parallax-hero.js) adds this once it has
           initialized -- fades the photo in rather than popping it in
           the instant the module loads. This MUST be a second, differently
           -named animation rather than "transition: opacity" or an
           "animation-delay" tweak on the fallback above: a CSS transition
           on a property is silently suppressed for as long as that same
           property also has a CSS animation associated with it (even one
           still in its delay phase), so a transition here would never
           fire -- it would just snap. Swapping animation-name instead
           starts a brand new, independent animation from time zero. */
        &.is-visible {
            animation: hero-media-reveal 700ms ease forwards;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 78% center;
            display: block;
            /* Static overscan so ParallaxHero has room to translate .media
               without ever exposing the section edge. Keep in sync with
               SCALE in js/components/parallax-hero.js. */
            transform: scale(1.12);
        }
    }

    /* Legibility scrim — cream gradient anchored top-left so dark-teal
       headline passes AA over any part of the photo at every viewport.
       Do not remove when swapping hero images — re-check contrast instead. */
    & .scrim {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(115deg,
                rgba(250,248,245,0.96) 0%,
                rgba(250,248,245,0.80) 30%,
                rgba(250,248,245,0.32) 52%,
                rgba(250,248,245,0.00) 72%),
            linear-gradient(180deg,
                rgba(250,248,245,0.55) 0%,
                rgba(250,248,245,0.00) 35%);
    }

    & .inner {
        position: relative;
        z-index: 2;
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 84px 40px 0;
        min-height: 600px;
        display: flex;
        flex-direction: column;
    }

    & .text {
        max-width: 30rem;
    }

    & h1 {
        font-size: 60px;
        line-height: 1.06;
        letter-spacing: -0.5px;
        margin-bottom: 20px;
        max-width: 12ch;
        text-wrap: balance;
    }

    & .text p {
        font-size: 18px;
        line-height: 1.6;
        color: var(--ink);
        max-width: 32ch;
        margin-bottom: 30px;
    }

    /* CTA inherits .btn/.btn-primary but overrides to inline */
    & .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        text-decoration: none;
        padding: 16px 34px;
    }
}

/* Fallback reveal for #hero .media -- see the "animation:" declaration
   above. Deliberately has no "from": an omitted keyframe falls back to
   the element's current computed value, so this is a no-op once
   ParallaxHero has already swapped in hero-media-reveal via .is-visible,
   and a safety fade-in to 1 if it never ran. */
@keyframes hero-media-fallback {
    to { opacity: 1; }
}

/* JS-driven reveal for #hero .media (applied via .is-visible, above).
   Identical keyframe to hero-media-fallback, but must be a distinct
   animation-name -- that's what makes swapping to it a fresh, from-time-
   zero animation instead of a recalculated offset into the fallback's
   still-pending 4s delay. */
@keyframes hero-media-reveal {
    to { opacity: 1; }
}

/* =====================
   FEATURED CARDS (HOME)
===================== */
/* Featured "shelf": spans the content width and overlaps the hero lower edge
   (deliberate, to hold an enticement above the fold). auto-fit keeps it a full,
   even row whether the query returns 2, 3, or 4 products — no right-side void. */
#peek {
    position: relative;
    z-index: 5;
    max-width: var(--content-width);
    margin: -140px auto 0;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    align-items: stretch;
}

.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: transform .22s ease, box-shadow .22s ease;

    &:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 60px rgba(44,44,44,0.22);
    }

    & .media {
        position: relative;
        height: 190px;
        overflow: hidden;
        border-bottom: 1px solid var(--border);
        background: radial-gradient(120% 90% at 50% 22%, #f4ece1 0%, #e9ddcc 70%, #ddcfba 100%);
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }

    & .body {
        padding: 16px 18px 18px;
    }

    & .name {
        font-family: Georgia, serif;
        font-size: 17px;
        color: var(--blue);
        line-height: 1.25;
        margin-bottom: 4px;
    }
}

.card-price {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--orange-ink);

    & .was {
        color: var(--muted);
        font-weight: 400;
        text-decoration: line-through;
        margin-right: 6px;
    }

    & .now {
        color: var(--orange-ink);
    }
}

#breadcrumbs {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 1em 0;

    & .woocommerce-breadcrumb {
        margin: 0;
    }
}

/* =====================
   INTRO (HOME)
===================== */
#intro {
    padding: 72px 32px 96px;
    text-align: center;

    & .inner {
        max-width: 620px;
        margin: 0 auto;
    }

    & p {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 23px;
        line-height: 1.6;
        color: var(--blue);
        margin-bottom: 26px;
    }

    & .shop-all {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--blue-soft);
        text-decoration: none;
        border-bottom: 2px solid var(--blue-soft);
        padding-bottom: 3px;

        &:hover {
            color: var(--blue-cta-hover);
            border-color: var(--blue-cta-hover);
        }
    }
}

/* =====================
   NEWSLETTER SIGNUP (GLOBAL)
===================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* =====================
   SKIP LINK (GLOBAL)
===================== */
.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 10000;
    background: var(--blue);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 8px 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: top .15s ease;
}

.skip-link:focus {
    top: 0;
}

#signup {
    padding: 76px 32px;
    border-top: 1px solid var(--border);
    background: rgba(46,74,98,0.045);
    text-align: center;

    & .inner {
        max-width: 540px;
        margin: 0 auto;
    }

    & h2 {
        font-size: 30px;
        margin-bottom: 12px;
    }

    & .lede {
        font-size: 16px;
        color: var(--muted);
        margin-bottom: 24px;
    }
}

.signup-form {
    display: flex;
    gap: 12px;

    input[type="email"] {
        flex: 1;
        min-width: 0;
        min-height: 52px;
        padding: 14px 16px;
        font-size: 15.5px;
        color: var(--ink);
        background: var(--surface);
        border: 1.5px solid #d8cfc4;
        border-radius: 8px;
        font-family: inherit;

        &::placeholder { color: #9b9389; }

        &:focus-visible {
            outline: 2px solid var(--blue-soft);
            outline-offset: 2px;
            border-color: var(--blue-soft);
        }
    }

    & .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        flex-shrink: 0;
        text-decoration: none;
    }
}

.fineprint {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 14px;
    min-height: 1.4em;

    a { color: var(--muted); }

    &.error { color: #c00; }
}

.fineprint-static {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 6px;

    a { color: var(--muted); }
}

/* =====================
   PRODUCT PAGE
===================== */
#product {
    padding: 48px 32px;
    background: var(--bg);

    & .inner {
        max-width: var(--product-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 56px;
    }
}

/* ---------- Gallery ---------- */
#product .media {
    display: grid;
    grid-template-columns: 1fr 6fr;
    grid-template-rows: 700px;
    gap: 14px;
    align-items: start;
}

#product .thumbnails {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;

    li {
        border: 1.5px solid var(--border);
        border-radius: 8px;
        padding: 3px;
        cursor: pointer;
        overflow: hidden;
        transition: border-color .2s ease;

        &:hover { border-color: #b9c3cb; }
        &.active { border-color: var(--blue); }

        img { display: block; width: 100%; height: auto; }
    }
}

#product-image {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    align-self: center;      /* center the box vertically in the 700px row */
    max-height: 700px;       /* cap portrait images at 700px */
    display: flex;
    flex-direction: column;
    justify-content: center; /* portrait overflow splits equally top+bottom before clip */

    a { display: none; }
    a:first-of-type { display: block; flex-shrink: 0; } /* no shrink = overflow splits equally */

    img {
        width: 100%;
        height: auto;
        display: block;
    }
}

.sale-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: var(--orange-deep);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 11px;
    border-radius: 999px;
    pointer-events: none;
}

/* ---------- Details ---------- */
.details {
    padding-top: 4px;

    & h1 {
        font-size: 34px;
        line-height: 1.18;
        letter-spacing: -0.3px;
        margin-bottom: 10px;
    }
}

.rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;

    & .stars {
        display: inline-flex;
        gap: 2px;
    }

    & .stars svg {
        width: 16px;
        height: 16px;
    }

    & a {
        font-size: 13px;
        color: var(--muted);
        text-decoration: none;

        &:hover {
            color: var(--blue-soft);
            text-decoration: underline;
        }
    }
}

.price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);

    & .price-now {
        font-size: 26px;
        font-weight: 700;
        color: var(--orange-ink);
    }

    & .price-was {
        font-size: 16px;
        color: var(--muted);
        text-decoration: line-through;
    }

    & .price-save {
        font-size: 12px;
        font-weight: 700;
        color: var(--orange-deep);
        background: rgba(194,83,26,.10);
        padding: 3px 8px;
        border-radius: 4px;
    }
}

.short-description {
    font-size: 15.5px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 24px;
    max-width: 46ch;
}

/* ---------- Variant chips ----------
   Each attribute is a <fieldset><legend> (native accessible name) rather
   than a <label>; the fieldset is itself the flex row so the legend can
   sit inline with .opt-selected exactly as the old .opt-head div did --
   a <legend> must be a fieldset's direct first child to act as its name. */
.opt-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;

    & legend {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 0;
        float: none;
    }

    & .opt-selected {
        font-size: 13px;
        color: var(--ink);
    }

    & .chips {
        width: 100%;
        order: 3;
        margin-top: 10px;
    }

    & .variation-error {
        width: 100%;
        order: 4;
        color: #c00;
        font-size: 14px;
        margin-top: 8px;
    }
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.chip {
    min-width: 56px;
    min-height: 46px;
    padding: 0 18px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;

    &:hover { border-color: #b9c3cb; }

    &.active {
        border-color: var(--blue);
        background: var(--blue);
        color: #fff;
    }
}

/* ---------- Quantity stepper ---------- */
.qty-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;

    & > label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
    }
}

.stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;

    & button {
        width: 46px;
        height: 46px;
        border: none;
        background: var(--surface);
        font-size: 20px;
        color: var(--blue);
        cursor: pointer;
        line-height: 1;

        &:hover { background: #f1ece6; }
    }

    & input {
        width: 48px;
        height: 46px;
        text-align: center;
        border: none;
        border-left: 1.5px solid var(--border);
        border-right: 1.5px solid var(--border);
        font-size: 15px;
        color: var(--ink);
        -moz-appearance: textfield;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }
}

/* ---------- CTAs ---------- */
.cta { margin-bottom: 24px; }

.btn {
    display: block;
    width: 100%;
    border-radius: 8px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    padding: 17px 24px;
    min-height: 52px;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    border: 1.5px solid transparent;
    text-align: center;
    font-family: inherit;
    /* .btn is a button-styled affordance even when rendered as <a> --
       an underlined label inside a filled button reads as both a button
       and a link at once. */
    text-decoration: none;
}

.btn-primary {
    background: var(--blue-cta);
    color: #fff;
    border-color: var(--blue-cta);

    &:hover {
        background: var(--blue-cta-hover);
        border-color: var(--blue-cta-hover);
    }
}

.btn-secondary {
    background: var(--surface);
    color: var(--blue);
    border-color: #cdd6dd;
    margin-top: 12px;

    &:hover { border-color: var(--blue); }
}

.go-to-cart {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    color: var(--blue-soft);
    text-decoration: underline;
}

/* ---------- Fulfillment block (order-specific facts at the CTA) ----------
   Replaces the old .trust badge strip, which duplicated the rail's evergreen
   shipping/returns/warranty promises. This carries stock, a computed delivery
   window + dispatch-cutoff countdown, free-shipping progress, and the only
   "secure checkout" mention on the page. */
.fulfill {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.stock {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ink);
    font-weight: 700;

    & .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--green);
        flex: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 15%, transparent);
    }

    & .sub {
        font-weight: 400;
        color: var(--muted);
        font-size: 13px;
    }

    &.oos .dot {
        background: var(--danger);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent);
    }
}

.deliver {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: var(--orange-tint);
    border: 1px solid color-mix(in srgb, var(--orange) 25%, var(--surface));
    border-radius: 10px;
    padding: 14px 15px;

    & .ic {
        flex: none;
        width: 38px;
        height: 38px;
        border-radius: 9px;
        background: var(--surface);
        border: 1px solid color-mix(in srgb, var(--orange) 25%, var(--surface));
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--orange-ink);

        svg { width: 20px; height: 20px; }
    }

    & .arrive {
        font-size: 15px;
        color: var(--ink);

        b { color: var(--orange-ink); }
    }

    & .cut {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 3px;

        .clock {
            font-weight: 700;
            color: var(--ink);
            font-variant-numeric: tabular-nums;
        }
    }
}

.freeship {
    display: flex;
    flex-direction: column;
    gap: 7px;

    & .fs-top {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--ink);

        svg { width: 16px; height: 16px; color: var(--green); flex: none; }

        b { color: var(--green); }
    }
}

.fs-track {
    height: 7px;
    border-radius: 6px;
    background: #ece7e1;
    overflow: hidden;

    & i {
        display: block;
        height: 100%;
        border-radius: 6px;
        background: var(--green);
        width: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .fs-track i { transition: width .6s cubic-bezier(.2,.7,.2,1); }
}

.pay {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);

    & .lock {
        display: inline-flex;
        align-items: center;
        gap: 5px;

        svg { width: 13px; height: 13px; color: var(--muted); }
    }

    & .cards {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;

        span {
            padding: 0 6px;
            height: 22px;
            border-radius: 4px;
            border: 1px solid var(--border);
            background: var(--surface);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 700;
            color: var(--muted);
        }
    }
}

/* =====================
   INFO SECTIONS (accordion ≤900 / tabs ≥901)
===================== */
#info {
    border-top: 1px solid var(--border);
    background: var(--surface);

    & .inner {
        max-width: var(--product-width);
        margin: 0 auto;
        padding: 56px 32px 80px;
    }
}

/* Two-column editorial grid (desktop): tabbed content + sticky details rail */
#info .grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr);
    gap: 64px;
    align-items: start;
}

/* Desktop tab bar */
.tabbar {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 36px;
    scroll-margin-top: 96px; /* clears the sticky #nav-product bar when jumped to */

    & button {
        background: none;
        border: none;
        padding: 18px 28px;
        font-size: 15.5px;
        letter-spacing: .01em;
        color: #5a5650;            /* AA on white (7.2:1) */
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: color .2s ease, border-color .2s ease;
        font-family: inherit;

        &:hover { color: var(--blue); }

        &.active {
            color: var(--blue);
            border-bottom-color: var(--blue);
            border-bottom-width: 3px;
            margin-bottom: -3px;
            font-weight: 700;
        }
    }

    & .count {
        font-size: 12px;
        font-weight: 700;
        color: var(--orange-ink);
        background: var(--orange-tint);
        border-radius: 20px;
        padding: 1px 8px;
        margin-left: 6px;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align: middle;
    }
}

/* Content panels */
.panel {
    display: none;
    max-width: 64ch;
    font-size: 15.5px;
    line-height: 1.8;
    color: #444;

    & p + p { margin-top: 14px; }

    &.active { display: block; }
}

/* Specs panel — dl grid layout */
.panel .specs-list {
    display: none;
    max-width: 560px;
    font-size: 15px;

    dt {
        font-weight: 700;
        color: var(--ink);
    }

    dd { color: #444; }
}

.panel.active .specs-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 24px;
}

/* Accordion header — hidden on desktop */
.acc-head { display: none; }

/* Reviews — WC comment template styles (scoped to #info) */
#info .panel #reviews,
#info .panel .woocommerce-Reviews {
    & h2 {
        font-size: 24px;
        margin-bottom: 24px;
    }

    & .comment-text {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;

        & .woocommerce-review__author {
            font-weight: 600;
            font-size: 14px;
        }

        & .woocommerce-review__dash,
        & .woocommerce-review__published-date {
            font-size: 13px;
            color: #888;
        }
    }

    & #review_form {
        margin-top: 48px;
        padding-top: 32px;
        border-top: 1px solid var(--border);

        & h3 {
            font-size: 20px;
            margin-bottom: 24px;
        }

        & .comment-form-rating {
            margin-bottom: 16px;

            label {
                display: block;
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 6px;
            }
        }

        & .stars a {
            color: var(--orange);
            text-decoration: none;
        }

        /* Interactive star rating input (ReviewRatingInput) — fills on hover,
           locks on click. Buttons are ~44px tap targets on touch. */
        & .stars-input {
            display: inline-flex;
            align-items: center;
        }

        & .star-input {
            background: none;
            border: 0;
            padding: 8px;
            margin: 0;
            line-height: 0;
            cursor: pointer;
            border-radius: 6px;
            -webkit-tap-highlight-color: transparent;
        }

        & .star-input svg {
            display: block;
            width: 28px;
            height: 28px;
        }

        & .star-input svg path {
            fill: #e7ddc9;
            transition: fill .12s ease;
        }

        & .star-input.filled svg path {
            fill: var(--orange-ink);
        }

        & .star-input:focus-visible {
            outline: 2px solid var(--blue-cta);
            outline-offset: -2px;
        }

        & p {
            margin-bottom: 16px;

            label {
                display: block;
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 6px;
            }

            input[type="text"],
            input[type="email"],
            textarea {
                width: 100%;
                max-width: 480px;
                padding: 10px 12px;
                border: 1px solid var(--border);
                border-radius: 4px;
                font-size: 14px;
                font-family: inherit;
            }

            textarea {
                max-width: 100%;
                min-height: 120px;
            }
        }

        & input[type="submit"] {
            background: var(--blue-cta);
            color: #fff;
            border: none;
            padding: 12px 32px;
            border-radius: 6px;
            font-size: 15px;
            cursor: pointer;

            &:hover { background: var(--blue); }
        }
    }
}

/* ---------- Star rating component ----------
   Two-layer fill: base (cream) + clipped fill (orange).
   Spacing via padding NOT gap — gap is excluded from the clipped edge
   and causes fractional fills to drift. flex: 0 0 auto is mandatory so
   filled stars never shrink into the clipped width.
*/
.star-rating {
    position: relative;
    display: inline-flex;
    line-height: 1;
    vertical-align: middle;

    & .stars-base,
    & .stars-fill {
        display: flex;
        align-items: center;
    }

    & .stars-fill {
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
        /* width set via inline style="width:X%" per rating */
    }

    & svg {
        flex: 0 0 auto;
        width: 17px;
        height: 17px;
        padding: 0 1px;
        box-sizing: content-box;
    }
}

/* ---------- Review summary row ---------- */
.review-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);

    & .review-avg {
        font-family: Georgia, serif;
        font-size: 28px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1;
    }

    & .review-count {
        font-size: 13px;
        color: var(--muted);
    }
}

/* Specs — WC table fallback */
#info .panel table.shop_attributes {
    width: 100%;
    border-collapse: collapse;

    th, td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border);
        font-size: 14px;
    }

    th {
        width: 200px;
        color: var(--blue);
        font-weight: 600;
    }

    td p { margin: 0; }
}

/* =====================
   INFO RIGHT RAIL — "Why you'll love it" + "At a glance"
   (folds in the former #values band)
===================== */
.rail {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rail-card {
    background: var(--bg-product);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 24px 26px;
    box-shadow: var(--shadow-sm);

    /* h2, not h3 -- nothing at h2 precedes these in the document outline
       (the h1 product title is the only heading before the rail). */
    & h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 700;
        margin-bottom: 16px;
    }
}

/* value rows: icon tile + heading + one-line description */
.value-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;

    & + .value-row { border-top: 1px solid var(--border); }

    & .ic {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        border-radius: 9px;
        background: var(--orange-tint);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--orange-ink);

        svg { width: 20px; height: 20px; }
    }

    & .vh {
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: var(--blue);
        font-size: 16px;
    }

    & .vp {
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.55;
        margin-top: 2px;
    }
}

/* "Order with confidence" trust rows (card 2) — mirrors .value-row's icon-tile
   system at a slightly smaller scale so the two rail cards read as one system. */
.assure-row {
    display: flex;
    gap: 13px;
    padding: 13px 0;
    align-items: flex-start;

    & + .assure-row { border-top: 1px solid var(--border); }

    & .ic {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--orange-tint);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--orange-ink);

        svg { width: 18px; height: 18px; }
    }

    & .at {
        font-size: 14px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.35;
    }

    & .ap {
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.5;
        margin-top: 1px;
    }
}

/* "See full specifications" jump link */
.rail-jump {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);

    & a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--blue-soft);
        text-decoration: none;

        &:hover { text-decoration: underline; }

        svg { width: 14px; height: 14px; }
    }
}

#story {
    padding: 96px 32px;
    text-align: center;

    .inner {
        max-width: 720px;
        margin: 0 auto;

        h2 {
            color: var(--blue);
            margin-bottom: 24px;
        }
    }
}

/* =====================
   STICKY CTA
===================== */
#sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    padding: 12px 32px;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);

    &.show { transform: translateY(0); }

    & .sticky-inner {
        max-width: var(--product-width);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    & .sticky-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    & .sticky-name {
        font-weight: 700;
        font-size: 15px;
        color: var(--blue);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & .sticky-price {
        font-size: 13px;
        font-weight: 700;
        color: var(--orange-ink);
    }

    & .sticky-actions {
        display: flex;
        gap: 12px;
        flex-shrink: 0;

        .btn {
            width: auto;
            min-height: 46px;
            padding: 12px 30px;
            margin-top: 0;
        }
    }
}

/* =====================
   CALLOUT (HOME)
===================== */
#callout {
    background: var(--blue);
    color: #fff;
    padding: 120px 32px;
    text-align: center;

    & .cta {
        display: inline-block;
        margin-top: 32px;
        padding: 14px 36px;
        background: #fff;
        color: var(--blue);
        text-decoration: none;
        border-radius: 6px;
    }
}

/* =========================
   OVERLAY
========================= */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 999;
}

.cart-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Error modal */
.error-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1001; /* above overlay (999) and cart drawer (1000) */
}

.error-modal.active {
    opacity: 1;
    pointer-events: all;
}

.error-modal-content {
    background: var(--surface);
    border-radius: 12px;
    padding: 32px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

.error-modal-content h2 {
    color: var(--danger);
    margin: 0 0 12px;
    font-size: 20px;
}

.error-modal-content p {
    color: var(--ink);
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
}

.error-modal-content .btn {
    width: auto;
    min-width: 100px;
}

/* =========================
   DRAWER
========================= */

#cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100%;
  background: var(--surface);
  box-shadow: -10px 0 40px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  display: flex;
  flex-direction: column;
  z-index: 1000;

    &.active {
        transform: translateX(0);
    }

    & .header {
        padding: 18px 20px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
    }

    & .header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    & .header-top h2 {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 21px;
        font-weight: 400;
        color: var(--blue);
        margin: 0;
        display: flex;
        align-items: baseline;
        gap: 9px;
    }

    & .header-top h2 .count {
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        background: var(--orange-deep);
        border-radius: 20px;
        padding: 2px 9px;
        line-height: 1.5;
        transform: translateY(-2px);
    }

    /* Visual glyph stays ~20px; the button itself is a 44x44 hit area. */
    & .close {
        font-size: 0;
        background: none;
        border: none;
        cursor: pointer;
        width: 44px;
        height: 44px;
        margin: -8px -8px -8px 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: background .15s ease;

        &:hover {
            background: rgba(0,0,0,.05);
        }

        & svg {
            width: 20px;
            height: 20px;
            stroke: var(--ink);
        }

        &:focus-visible {
            outline: 2px solid var(--blue-soft);
            outline-offset: 2px;
        }
    }

    /* ---- Free-shipping meter (signature element) ---- */
    & .ship-meter {
        margin-top: 14px;

        & .msg {
            font-size: 12.5px;
            color: var(--muted);
            margin: 0 0 7px;
            display: flex;
            align-items: center;
            gap: 6px;

            & b {
                color: var(--orange-ink);
            }

            & svg {
                width: 15px;
                height: 15px;
                flex: 0 0 auto;
                color: var(--orange-ink);
            }
        }

        &.done .msg {
            color: var(--orange-ink);
            font-weight: 700;
        }

        & .track {
            height: 7px;
            border-radius: 20px;
            background: #efe7dc;
            overflow: hidden;
        }

        & .fill {
            height: 100%;
            border-radius: 20px;
            background: linear-gradient(90deg, var(--orange), var(--orange-deep));
            width: 0;
            transition: width .8s cubic-bezier(.22,.61,.36,1);
        }
    }

    & #cart-items {
        flex: 1;
        overflow-y: auto;
        padding: 6px 20px;

        & .cart-item {
            display: grid;
            grid-template-columns: 64px 1fr auto;
            grid-template-areas:
                "media body  price"
                "media stepper remove";
            column-gap: 14px;
            row-gap: 12px;
            padding: 18px 0;
            border-bottom: 1px solid var(--border);
            animation: fadeIn .3s ease;

            &:last-child {
                border-bottom: none;
            }

            & .ci-media {
                grid-area: media;
                width: 64px;
                height: 64px;
                border-radius: 8px;
                overflow: hidden;
                border: 1px solid var(--border);
                background: radial-gradient(120% 90% at 50% 22%, #f4ece1, #e9ddcc 70%, #ddcfba);

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }

            & .ci-body {
                grid-area: body;
                min-width: 0;
            }

            & .ci-name {
                font-family: Georgia, serif;
                font-size: 15.5px;
                line-height: 1.3;
                color: var(--ink);
                margin: 0 0 2px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            & .ci-variation {
                font-size: 12.5px;
                color: var(--muted);
            }

            & .ci-price {
                grid-area: price;
                text-align: right;
                font-weight: 700;
                font-size: 15px;
                color: var(--orange-ink);
                white-space: nowrap;
            }

            & .qty {
                grid-area: stepper;
                align-self: end;
            }

            & .remove-cart-item {
                grid-area: remove;
                align-self: end;
                justify-self: end;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                height: 40px;
                padding: 0 4px;
                background: none;
                border: none;
                cursor: pointer;
                color: var(--muted);
                font-size: 12.5px;
                transition: color .15s ease;

                & svg {
                    width: 15px;
                    height: 15px;
                }

                &:hover {
                    color: var(--danger);
                }

                &:focus-visible {
                    outline: 2px solid var(--blue-soft);
                    outline-offset: 2px;
                    border-radius: 6px;
                }
            }
        }
    }

    /* ---- Empty state ----
       display:none is the base state so the [hidden] attribute (toggled from
       cart-drawer.js) actually hides this — an unconditional display:flex
       here would out-specificity the UA default "[hidden] { display:none }"
       and the empty state would show even when hidden was set. */
    & .cart-empty {
        display: none;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 32px 28px;

        &:not([hidden]) {
            display: flex;
        }

        & .bag {
            width: 60px;
            height: 60px;
            color: #cabfb0;
            margin-bottom: 18px;
        }

        & h3 {
            font-family: Georgia, serif;
            font-size: 20px;
            color: var(--ink);
            margin: 0 0 8px;
            font-weight: 400;
        }

        & p {
            font-size: 13.5px;
            color: var(--muted);
            max-width: 32ch;
            margin: 0 0 22px;
            line-height: 1.5;
        }

        & .shop-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0 30px;
            background: var(--blue-cta);
            color: #fff;
            font-weight: 700;
            border-radius: 8px;
            border: none;
            text-decoration: none;
            cursor: pointer;
            font-size: 14px;
            transition: background .2s ease;

            &:hover {
                background: var(--blue-cta-hover);
            }
        }
    }

    & .footer {
        border-top: 1px solid var(--border);
        background: var(--bg);
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom));

        & .cart-checkout-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 14px;
            min-height: 52px;
            background: var(--blue-cta);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            border-radius: 8px;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: background .2s ease, transform .06s ease;

            &:hover {
                background: var(--blue-cta-hover);
            }

            &:active {
                transform: translateY(1px);
            }

            & svg {
                width: 16px;
                height: 16px;
            }

            &:focus-visible {
                outline: 2px solid var(--blue-soft);
                outline-offset: 2px;
            }
        }

        & .continue {
            display: block;
            text-align: center;
            margin-top: 12px;
            font-size: 13px;
            color: var(--blue-soft);
            background: none;
            border: none;
            cursor: pointer;
            width: 100%;

            &:hover {
                text-decoration: underline;
            }

            &:focus-visible {
                outline: 2px solid var(--blue-soft);
                outline-offset: 2px;
            }
        }

        & .secure {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 12px;
            font-size: 11.5px;
            color: var(--muted);

            & svg {
                width: 13px;
                height: 13px;
            }
        }
    }

    & .subtotal {
        display: flex;
        justify-content: space-between;
        align-items: baseline;

        & .lbl {
            font-family: Georgia, serif;
            font-size: 16px;
            color: var(--blue);
        }

        & .amt {
            font-size: 19px;
            font-weight: 700;
            color: var(--ink);
        }
    }

    & .tax-note {
        font-size: 11.5px;
        color: var(--muted);
        margin: 2px 0 0;
        text-align: right;
    }

    /* Quantity stepper — unified pill, 40px tall (>=44 not required: the
       row already clears 44px including the row's own vertical padding). */
    & .qty {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 22px;
        background: #fff;
        overflow: hidden;
        height: 40px;
        width: max-content;

        & button {
            width: 40px;
            height: 40px;
            border: none;
            background: #fff;
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
            color: var(--blue);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease;

            &:hover {
                background: var(--orange-tint);
            }

            &:active {
                background: #efe7dc;
            }

            &:disabled {
                color: #c9c2b8;
                cursor: not-allowed;
            }

            &:focus-visible {
                outline: 2px solid var(--blue-soft);
                outline-offset: -2px;
            }

            &.clicked {
                background: var(--orange-tint);
            }
        }

        & .quantity {
            min-width: 30px;
            text-align: center;
            font-weight: 700;
            font-size: 14px;
        }
    }
}

@media (max-width: 900px) {
    #cart-drawer { width: min(430px, 100vw); }
}

@media (max-width: 600px) {
    #cart-drawer { width: 100vw; }
}

/* =========================
    Cart
========================= */

/* =========================
   CART PAGE
   ========================= */
#cart {
    background: var(--bg);
    min-height: 100%;
    padding: 44px 32px 80px;
}
#cart .inner { max-width: var(--content-narrow); margin: 0 auto; }

.cart-head { margin-bottom: 26px; }
.cart-head h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.3px; }
.cart-head h1 .count { font-family: Arial, sans-serif; font-size: 17px; font-weight: 400; color: var(--muted); letter-spacing: 0; }

.cart-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: start; }

/* ---------- Items panel ---------- */
.items { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 6px 28px; }

.item {
    display: grid;
    grid-template-columns: 104px 1fr auto;
    grid-template-areas: "media body price";
    column-gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid var(--border);
    align-items: start;
}
.item:last-child { border-bottom: none; }

.item .media {
    grid-area: media;
    align-self: start;
    width: 104px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: radial-gradient(120% 90% at 50% 22%, #f4ece1 0%, #e9ddcc 70%, #ddcfba 100%);
}
.item .media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.item .body { grid-area: body; min-width: 0; }
.item .name { font-family: Georgia, serif; font-size: 18px; line-height: 1.3; margin-bottom: 4px; }
.item .name a { color: var(--blue); text-decoration: none; }
.item .name a:hover { text-decoration: underline; }
.item .meta { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

.item .controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Remove — explicit, spaced from the stepper, destructive affordance */
.item .remove { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 13px; transition: color .15s ease; }
.item .remove svg { width: 16px; height: 16px; }
.item .remove:hover { color: var(--danger); }

.item .line-price { grid-area: price; text-align: right; font-size: 16px; font-weight: 700; color: var(--orange-ink); white-space: nowrap; }

/* ---------- Order summary ---------- */
.summary { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 28px; position: sticky; top: 92px; height: fit-content; }
.summary h2 { font-size: 22px; margin-bottom: 18px; }

.sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; padding: 9px 0; color: var(--ink); }
.sum-row .label { color: var(--muted); }
.sum-row .free { color: var(--orange-ink); font-weight: 700; }

.ship-note { font-size: 12.5px; color: var(--orange-ink); margin: -2px 0 6px; display: flex; align-items: center; gap: 6px; }
.ship-note svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ship-progress { font-size: 12.5px; color: var(--muted); margin: -2px 0 6px; }

.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.sum-total .label { font-family: Georgia, serif; font-size: 18px; color: var(--blue); }
.sum-total .amount { font-size: 22px; font-weight: 700; color: var(--ink); }
.sum-total .tax-note { display: block; font-size: 12px; font-weight: 400; color: var(--muted); text-align: right; }

.summary .btn { margin-top: 20px; }

.secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.secure svg { width: 14px; height: 14px; }

.continue { display: block; text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--blue-soft); text-decoration: none; }
.continue:hover { text-decoration: underline; }

.summary-trust { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.summary-trust .t { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.summary-trust .t svg { width: 20px; height: 20px; color: var(--blue); flex: 0 0 auto; }

/* ---------- Empty state ---------- */
.empty { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 72px 32px; text-align: center; max-width: 540px; margin: 8px auto 0; }
.empty .bag { width: 64px; height: 64px; margin: 0 auto 22px; color: #c8bdb0; }
.empty h1 { font-size: 26px; margin-bottom: 10px; }
.empty p { font-size: 15.5px; color: var(--muted); max-width: 38ch; margin: 0 auto 26px; }
.empty .btn { display: inline-flex; width: auto; padding: 16px 40px; }

@media (max-width: 900px) {
    #cart { padding: 32px 20px 64px; }
    .cart-grid { grid-template-columns: 1fr; gap: 24px; max-width: 620px; }
    .summary { position: static; }
}

@media (max-width: 600px) {
    #cart { padding: 24px 16px 56px; }
    .cart-head h1 { font-size: 28px; }
    .items { padding: 4px 18px; }
    .item {
        grid-template-columns: 76px 1fr;
        grid-template-areas:
            "media body"
            "media price";
        column-gap: 16px;
        row-gap: 12px;
    }
    .item .media { width: 76px; }
    .item .line-price { text-align: left; align-self: end; }
    .item .controls { gap: 12px; }
    .summary { padding: 22px; }
    .empty { padding: 56px 22px; }
}

/* =====================
   SHOP (PRODUCT ARCHIVE)
===================== */

#shop {
    background-color: var(--bg);
    min-height: 100%;
}

#shop .inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 40px 32px 64px;
}

/* Page header */
#shop .page-header {
    margin-bottom: 22px;
}

#shop .page-header h1 {
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    margin-bottom: 8px;
}

#shop .page-header .subhead {
    font-size: 16px;
    color: var(--muted);
}

/* Category pills */
.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.category-pills a {
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 9px 18px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    transition: border-color .18s, color .18s, background .18s;
}

.category-pills a:hover {
    border-color: var(--blue-soft);
    color: var(--blue-soft);
}

.category-pills a.active {
    background: var(--blue-cta);
    border-color: var(--blue-cta);
    color: #fff;
}

/* Shop toolbar: result count + sort control */
.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}

.woocommerce-result-count {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

.woocommerce-ordering {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.woocommerce-ordering label {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: .02em;
    white-space: nowrap;
}

.woocommerce-ordering select {
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 10px 38px 10px 14px;
    min-height: 44px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232e4a62' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color .18s;
}

.woocommerce-ordering select:hover {
    border-color: var(--blue-soft);
}

/* Product grid — wrapping auto-fill, never overflows */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 26px;
    align-items: stretch;
}

/* Product card */
.product-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.product-card:focus-within {
    box-shadow: var(--shadow-md);
}

/* Card link wraps image + info but NOT the quick-add button */
.product-card .card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Image well */
.product-card .image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #efe9e1;
}

.product-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.product-card:hover .image img {
    transform: scale(1.04);
}

/* Sale badge */
.product-card .badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--orange-deep);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 6px;
}

/* Info area */
.product-card .info {
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* Name: wraps to two lines then clamps — never mid-word ellipsis */
.product-card .name {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--blue);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* Price — scoped tightly so the global .price rule doesn't bleed in */
.product-card .price {
    margin: 0;
    margin-top: auto;
    padding: 0;
    border: none;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.product-card .price .sale {
    font-size: 16px;
    font-weight: 700;
    color: var(--orange-ink);
    text-decoration: none;
}

.product-card .price .orig {
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: line-through;
}

.product-card .price .from {
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
}

/* Quick-add: always visible so every card ends on the same CTA slot (no
   hover-only reveal, no empty white gap mid-card, equal heights preserved). */
.product-card .quick-add {
    display: block;
    margin: 0 16px 16px;
    margin-top: auto;
    padding: 12px 16px;
    min-height: 46px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: var(--blue-cta);
    border: 1.5px solid var(--blue-cta);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    transition: background .18s ease;
}

.product-card .quick-add:hover {
    background: var(--blue-cta-hover);
    border-color: var(--blue-cta-hover);
}

.product-card .quick-add.options {
    background: transparent;
    color: var(--blue-cta);
}

.product-card .quick-add.options:hover {
    background: rgba(47, 95, 143, .08);
}

/* Empty / no-results state */
.shop-empty {
    text-align: center;
    padding: 64px 32px;
    color: var(--muted);
}

.shop-empty p {
    font-size: 18px;
    margin-bottom: 16px;
}

.shop-empty a {
    color: var(--blue-cta);
    font-weight: 600;
    text-decoration: none;
}

.shop-empty a:hover {
    text-decoration: underline;
}

/* WooCommerce pagination */
.woocommerce-pagination {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.woocommerce-pagination ul.page-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
}

.woocommerce-pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    padding: 0 8px;
    transition: border-color .18s, color .18s;
}

.woocommerce-pagination .page-numbers:hover {
    border-color: var(--blue-soft);
    color: var(--blue-soft);
}

.woocommerce-pagination .page-numbers.current {
    background: var(--blue-cta);
    border-color: var(--blue-cta);
    color: #fff;
}

.woocommerce-pagination .page-numbers.dots {
    border: none;
    background: none;
    color: var(--muted);
    min-width: auto;
}

@media (max-width:900px){
    .checkout-container{
        grid-template-columns:1fr;
    }
}

/* =========================
   FLY ANIMATION
========================= */

.fly-item {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  transition: transform .7s cubic-bezier(.22,.61,.36,1),
              opacity .7s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px);}
  to { opacity: 1; transform: translateY(0);}
}

/* =====================
   FOOTER
===================== */
#footer {
    background: #223a4e;
    color: rgba(255,255,255,0.80);

    & .cols {
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 64px 40px 40px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 48px;
    }

    & .brand {
        /* Visual size unchanged -- inline-flex + min-height pads the hit
           area to >=44px tall without changing the rendered text size. */
        & .logo {
            color: #fff;
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            margin-bottom: 14px;
            text-decoration: none;
            font-weight: 700;
            letter-spacing: 3px;
            font-size: 19px;
        }

        & p {
            font-size: 14px;
            line-height: 1.7;
            max-width: 34ch;
            margin-bottom: 16px;
            color: rgba(255,255,255,0.80);
        }

        & a.contact {
            color: #fff;
            font-size: 14px;
            text-decoration: none;
            border-bottom: 1px solid rgba(255,255,255,0.4);
            display: inline-flex;
            align-items: center;
            min-height: 44px;

            &:hover { border-color: #fff; }
        }
    }

    /* Not a heading -- a visual label for the link group only. Using h4 here
       broke heading-order on every page (nothing at h2/h3 preceded it). */
    & .footer-heading {
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    & ul {
        list-style: none;
    }

    & li {
        margin-bottom: 0;
    }

    /* Visual text size is unchanged -- min-height + vertical padding pad the
       hit area to >=44px tall (was ~16px); li margin moved onto the link's
       own padding so link spacing looks the same as before. */
    & ul a {
        color: rgba(255,255,255,0.80);
        font-size: 14px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 5px 0;

        &:hover { color: #fff; }
    }

    & .bar {
        border-top: 1px solid rgba(255,255,255,0.14);
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 13px;
        letter-spacing: .03em;
    }
}

/* =====================
   RESPONSIVE
===================== */

/* Hold two-column product layout down to 900px so tablet feels intentional */
@media (max-width: 900px) {
    /* Hero */
    #hero .inner { padding: 68px 28px 0; min-height: 540px; }
    #hero h1 { font-size: 46px; }

    /* Featured shelf still spans the content width; overlap eased slightly */
    #peek { padding: 0 28px; margin-top: -120px; }

    /* Footer */
    #footer .cols { gap: 40px 32px; padding: 56px 28px 36px; }
    #footer .bar { padding: 20px 28px; }

    /* Shop */
    #shop .inner { padding: 32px 24px 56px; }
    #shop .page-header h1 { font-size: 32px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

    /* Product layout */
    #product { padding: 32px 20px; }
    #product .inner { grid-template-columns: 1fr; gap: 36px; max-width: 560px; }

    /* Gallery: stack thumbnail strip below image on mobile */
    #product .media { grid-template-columns: 1fr; grid-template-rows: auto; gap: 10px; }
    #product .thumbnails { flex-direction: row; flex-wrap: wrap; gap: 6px; order: 2; }
    #product .thumbnails li { width: 58px; }
    #product-image { order: 1; max-height: 420px; }

    .details h1 { font-size: 27px; }
    .price .price-now { font-size: 24px; }

    /* Info sections become accordions */
    .tabbar { display: none; }

    .acc-head {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border);
        padding: 18px 2px;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 17px;
        color: var(--blue);
        cursor: pointer;
        text-align: left;
        scroll-margin-top: 96px; /* clears the sticky #nav-product bar when jumped to */
    }

    .acc-head .chev { transition: transform .2s ease; color: var(--muted); }
    .acc-item.open .acc-head .chev { transform: rotate(180deg); }

    .panel { padding: 4px 2px 22px; max-width: none; }
    .acc-item.open .panel { display: block; }
    .acc-item.open .panel .specs-list {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 8px 16px;
    }

    #info .inner { padding: 8px 20px 56px; }

    /* Grid collapses: accordions first, rail cards stacked beneath; rail un-sticks */
    #info .grid { grid-template-columns: 1fr; gap: 40px; }
    .rail { position: static; }

    /* Sticky bar */
    #sticky-cta { padding: 10px 16px; }
    #sticky-cta .sticky-actions { flex: 1; }
    #sticky-cta .sticky-actions .btn { flex: 1; padding: 14px 12px; }
    #sticky-cta .btn-buynow { display: none; }
    body.sticky-on { padding-bottom: 84px; }
}

@media (min-width: 901px) {
    .acc-item { display: contents; }
    .panel.active { display: block; }
    .panel.active .specs-list {
        display: grid;
        grid-template-columns: 160px 1fr;
        gap: 10px 24px;
    }
}

@media (max-width: 768px) {
    .nav-inner { flex-wrap: wrap; justify-content: space-between; }
    .nav-links { gap: 16px; margin-top: 8px; flex-wrap: wrap; }
}

@media (max-width: 600px) {
    /* Hero — stronger top-down scrim on mobile */
    #hero .scrim {
        background: linear-gradient(180deg,
            rgba(250,248,245,0.95) 0%,
            rgba(250,248,245,0.70) 42%,
            rgba(250,248,245,0.20) 100%);
    }
    #hero .media img { object-position: 72% center; }
    #hero .inner { padding: 44px 22px 64px; min-height: 60vh; }
    #hero h1 { font-size: 36px; }
    #hero .text p { font-size: 16px; }
    #hero .btn-primary { width: 100%; justify-content: center; }

    /* Cards drop below the hero and stack — no overlap on phones */
    #peek {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: none;
        margin: 24px 22px 0;
        padding: 0;
    }
    .card .media { height: 168px; }

    /* Sticky buy bar stacks: name + price on one baseline row, then a
       full-width, thumb-sized CTA beneath it (the page's primary action). */
    #sticky-cta .sticky-inner { flex-direction: column; align-items: stretch; gap: 10px; }
    #sticky-cta .sticky-info { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; }
    #sticky-cta .sticky-name { flex: 1; min-width: 0; }
    #sticky-cta .sticky-price { flex-shrink: 0; }
    #sticky-cta .sticky-actions { width: 100%; }
    #sticky-cta .sticky-actions .btn { width: 100%; min-height: 48px; }
    body.sticky-on { padding-bottom: 116px; }

    /* Shop */
    #shop .inner { padding: 24px 16px 48px; }
    #shop .page-header h1 { font-size: 28px; }
    #shop .page-header .subhead { font-size: 15px; }

    /* Pills scroll horizontally instead of wrapping to many rows */
    .category-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px 18px;
        padding: 0 16px 4px;
        scrollbar-width: none;
    }
    .category-pills::-webkit-scrollbar { display: none; }
    .category-pills a { flex: 0 0 auto; }

    /* Wrap + shrinkable select so the sort control never overflows at 320px */
    .shop-toolbar { margin-bottom: 22px; flex-wrap: wrap; }
    .woocommerce-ordering { max-width: 100%; min-width: 0; }
    .woocommerce-ordering select { max-width: 100%; }
    .woocommerce-ordering label { display: none; }

    /* Fixed 2-up grid — never overflows horizontally */
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .product-card .info { padding: 12px 12px 10px; }
    .product-card .name { font-size: 15px; }
    .product-card .price .sale { font-size: 15px; }

    /* Quick-add always visible + tappable on touch */
    .product-card .quick-add {
        opacity: 1;
        transform: none;
        margin: 0 12px 12px;
        min-height: 44px;
        font-size: 13px;
    }

    /* Nav tap targets */
    #nav-product .links a { padding-top: 12px; padding-bottom: 12px; }

    /* Intro */
    #intro { padding: 56px 22px 64px; }
    #intro p { font-size: 20px; }

    /* Newsletter */
    #signup { padding: 56px 22px; }
    #signup h2 { font-size: 26px; }
    .signup-form { flex-direction: column; }
    .signup-form .btn { width: 100%; }

    /* Footer */
    #footer .cols { flex-direction: column; gap: 32px; padding: 48px 22px 32px; }
    #footer .bar { padding: 20px 22px; }
}

@media (max-width: 420px) {
    #product { padding: 24px 16px; }
    .fulfill { gap: 12px; }
    .deliver { padding: 12px; }
    .deliver .arrive { font-size: 14px; }
}

/* =========================
   LEGAL PAGE
   Branded wrapper around a third-party Termly embed — see page-legal.php.
   All selectors scoped under #legal so they never leak onto other templates
   (several class names here — .chip, .contact — already exist globally).
========================= */
#legal { background: var(--bg); }

#legal .legal-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--orange), var(--orange-ink));
    z-index: 60;
    transition: width .1s linear;
}

/* ---------- Masthead ---------- */
#legal .masthead { background: var(--surface); border-bottom: 1px solid var(--border); }
#legal .masthead-inner { max-width: 900px; margin: 0 auto; padding: 56px 32px 44px; }
#legal .eyebrow {
    font-size: 12.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--orange-ink);
    font-weight: 700;
    margin: 0 0 14px;
}
#legal .doc-title {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    color: var(--blue);
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.08;
    margin: 0 0 20px;
    letter-spacing: -.01em;
}
#legal .meta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#legal .chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    min-width: 0;
    min-height: 0;
}
#legal .chip strong { color: var(--ink); font-weight: 700; }
#legal .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }

/* ---------- Page column ---------- */
#legal .wrap { max-width: 900px; margin: 0 auto; padding: 48px 32px 96px; }

/* ---------- "At a glance" — KOLIVITA-authored summary, outside the embed ---------- */
#legal .glance {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius);
    padding: 28px 30px;
    margin: 0 0 40px;
    box-shadow: var(--shadow-sm);
}
#legal .glance h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--blue);
    font-size: 20px;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 9px;
}
#legal .glance .sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
#legal .glance ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
#legal .glance li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink); }
#legal .glance li svg { flex: none; margin-top: 3px; }

/* ---------- The document sheet — frame that hosts the Termly embed ---------- */
#legal .sheet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(46,74,98,.10);
    overflow: hidden;
}
#legal .sheet-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 26px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(var(--surface), #fdfbf9);
}
#legal .sheet-bar .updated { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
#legal .sheet-bar .updated strong { color: var(--ink); }
#legal .sheet-actions { display: flex; gap: 8px; }
#legal .sheet-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--blue);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 15px;
    min-height: 40px;
    cursor: pointer;
    transition: .15s;
}
#legal .sheet-btn:hover { background: #fff; border-color: #dcd6cf; }
#legal .sheet-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Embed host — the ONLY lever we take on the Termly embed: a max-width on its container. */
#legal .embed-host { padding: 36px 44px 44px; }
#legal .embed-host .embed-inner { max-width: 70ch; margin: 0 auto; }

/* ---------- Contact card — KOLIVITA-authored, below the sheet ---------- */
#legal .contact {
    background: var(--blue);
    color: #fff;
    border-radius: var(--radius);
    padding: 36px 40px;
    margin-top: 40px;
    box-shadow: var(--shadow-md);
}
#legal .contact h2 { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 26px; margin: 0 0 10px; color: #fff; }
#legal .contact p { color: #dbe4ec; margin: 0 0 22px; max-width: 52ch; }
#legal .contact .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--orange);
    color: #3a1c08;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 999px;
    min-height: 48px;
    transition: .18s;
}
#legal .contact .btn:hover { background: #f08a4f; transform: translateY(-1px); }
#legal .contact .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#legal .contact .mail { color: #fff; font-weight: 700; }

/* ---------- Related legal links ---------- */
#legal .related { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#legal .related a {
    flex: 1 1 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14.5px;
    transition: .15s;
    min-height: 56px;
}
#legal .related a:hover { border-color: #dcd6cf; box-shadow: var(--shadow-sm); color: var(--blue); }
#legal .related a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#legal .related a .arrow { color: var(--orange-ink); }

@media (max-width: 600px) {
    #legal .masthead-inner { padding: 36px 22px 30px; }
    #legal .wrap { padding: 28px 20px 72px; }
    #legal .embed-host { padding: 24px 20px 28px; }
    #legal .sheet-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
    #legal .sheet-actions { width: 100%; }
    #legal .sheet-btn { min-height: 44px; }
    #legal .contact { padding: 28px 24px; }
    #legal .glance { padding: 22px 20px; }
    #legal .related a { min-height: 44px; }
}

/* Clean print output: just the masthead + document, no chrome or CTAs. */
@media print {
    #announcement, #nav-product, #footer, #signup, #cart-drawer, #cart-overlay { display: none !important; }
    #legal .legal-progress, #legal .sheet-actions, #legal .glance, #legal .contact, #legal .related { display: none !important; }
    #legal .sheet { box-shadow: none; border: 0; border-radius: 0; }
    #legal .embed-host { padding: 0; }
}

/* =========================
   SHIPPING & RETURNS PAGE
   First-party, KOLIVITA-authored help doc -- see page-shipping.php.
   All selectors scoped under #shipping-doc so they never leak onto other
   templates (several class names here -- .chip, .contact, .related -- are
   shared with #legal, but the two templates never render on the same page).
========================= */
#shipping-doc { background: var(--bg); }

#shipping-doc .shipping-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--orange), var(--orange-ink));
    z-index: 60;
    transition: width .1s linear;
}

/* ---------- Masthead ---------- */
#shipping-doc .masthead { background: var(--surface); border-bottom: 1px solid var(--border); }
#shipping-doc .masthead-inner { max-width: 1120px; margin: 0 auto; padding: 56px 32px 40px; }
#shipping-doc .eyebrow {
    font-size: 12.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--orange-ink);
    font-weight: 700;
    margin: 0 0 14px;
}
#shipping-doc .doc-title {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    color: var(--blue);
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.08;
    margin: 0 0 14px;
    letter-spacing: -.01em;
}
#shipping-doc .lede { color: var(--muted); font-size: 17px; max-width: 60ch; margin: 0 0 22px; }
#shipping-doc .meta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#shipping-doc .chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    min-width: 0;
    min-height: 0;
}
#shipping-doc .chip strong { color: var(--ink); font-weight: 700; }
#shipping-doc .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }

/* ---------- Promise tiles ---------- */
#shipping-doc .tiles-wrap { max-width: 1120px; margin: 0 auto; padding: 36px 32px 0; }
#shipping-doc .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
#shipping-doc .tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 20px;
    box-shadow: var(--shadow-sm);
}
#shipping-doc .tile .ic {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--orange-tint);
    color: var(--orange-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
/* .tile-title is a <p>, not a heading -- it sits before the page's first h2,
   so a real heading here would skip a level. Extra class keeps this rule
   more specific than the plain ".tile p" description rule below. */
#shipping-doc .tile p.tile-title { font-family: Georgia, 'Times New Roman', Times, serif; color: var(--blue); font-size: 16px; margin: 0 0 5px; }
#shipping-doc .tile p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ---------- Two-column shell ---------- */
#shipping-doc .shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 44px 32px 96px;
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 52px;
    align-items: start;
}

/* Sticky TOC rail */
#shipping-doc .toc { position: sticky; top: 92px; }
#shipping-doc .toc .toc-label {
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 14px;
    padding-left: 14px;
}
#shipping-doc .toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
#shipping-doc .toc a {
    display: block;
    padding: 8px 0 8px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    line-height: 1.3;
    transition: .15s;
    min-height: 40px;
}
#shipping-doc .toc a:hover { color: var(--ink); }
#shipping-doc .toc a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#shipping-doc .toc a.active { color: var(--blue); font-weight: 700; border-left-color: var(--orange); }
#shipping-doc .toc .toc-cta { margin-top: 22px; padding-left: 14px; }
#shipping-doc .toc .toc-cta a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    padding: 0;
    border: 0;
    margin: 0;
    min-height: 0;
}
#shipping-doc .toc .toc-cta a:hover { color: var(--orange-ink); }

/* Content column */
#shipping-doc .content { min-width: 0; max-width: 70ch; }
#shipping-doc .section { scroll-margin-top: 96px; margin-bottom: 44px; }
#shipping-doc .section-head { display: flex; align-items: center; gap: 13px; margin: 0 0 18px; }
#shipping-doc .section-head .ic {
    width: 38px; height: 38px;
    flex: none;
    border-radius: 10px;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
#shipping-doc .section-head h2 { font-family: Georgia, 'Times New Roman', Times, serif; color: var(--blue); font-size: 26px; margin: 0; line-height: 1.1; }
#shipping-doc .section > p { margin: 0 0 16px; }
#shipping-doc .section a { color: var(--blue-soft); font-weight: 600; }

/* Definition rows -- replaces run-on bold-lead-in paragraphs */
#shipping-doc .defs {
    display: grid;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
#shipping-doc .def { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
#shipping-doc .def:last-child { border-bottom: 0; }
#shipping-doc .def dt { font-weight: 700; color: var(--ink); font-size: 14.5px; margin: 0; }
#shipping-doc .def dd { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
#shipping-doc .def dd b { color: var(--ink); }

/* Returns stepper -- the signature element */
#shipping-doc .stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 6px 0 18px; counter-reset: step; }
#shipping-doc .step { position: relative; padding: 0 22px 0 0; }
#shipping-doc .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px; right: 14px; left: 52px;
    height: 2px;
    background: var(--border);
}
#shipping-doc .step .num {
    counter-increment: step;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--orange);
    color: var(--orange-ink);
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
#shipping-doc .step .num::before { content: counter(step); }
#shipping-doc .step h3 { font-family: Georgia, 'Times New Roman', Times, serif; color: var(--blue); font-size: 16px; margin: 14px 0 6px; }
#shipping-doc .step p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
#shipping-doc .step p a { font-weight: 600; }
#shipping-doc .step-note {
    font-size: 13px;
    color: var(--muted);
    background: var(--bg);
    border-radius: 8px;
    padding: 11px 14px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
#shipping-doc .step-note svg { flex: none; margin-top: 2px; color: var(--muted); }

/* Alert card -- damaged / incorrect items */
#shipping-doc .alert {
    background: var(--orange-tint);
    border: 1px solid color-mix(in srgb, var(--orange) 30%, #fff);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius);
    padding: 22px 24px;
}
#shipping-doc .alert p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.6; }
#shipping-doc .alert p + p { margin-top: 12px; }
#shipping-doc .alert .mail-link { color: var(--orange-ink); font-weight: 700; }
#shipping-doc .alert .pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--orange) 26%, #fff);
    color: var(--orange-ink);
    font-weight: 700;
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

/* Contact card */
#shipping-doc .section-contact { margin-bottom: 0; }
#shipping-doc .contact {
    background: var(--blue);
    color: #fff;
    border-radius: 16px;
    padding: 38px 40px;
    margin-top: 8px;
    box-shadow: var(--shadow-md);
}
#shipping-doc .contact h2 { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 26px; margin: 0 0 10px; color: #fff; }
#shipping-doc .contact p { color: #dbe4ec; margin: 0 0 22px; max-width: 52ch; }
#shipping-doc .contact .fine { margin-top: 18px; margin-bottom: 0; font-size: 14px; }
#shipping-doc .contact .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--orange);
    color: #3a1c08;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 999px;
    min-height: 48px;
    transition: .18s;
}
#shipping-doc .contact .btn:hover { background: #f08a4f; transform: translateY(-1px); }
#shipping-doc .contact .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#shipping-doc .contact .mail { color: #fff; font-weight: 700; }

/* Related legal row */
#shipping-doc .related { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
#shipping-doc .related a {
    flex: 1 1 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14.5px;
    transition: .15s;
    min-height: 56px;
}
#shipping-doc .related a:hover { border-color: #dcd6cf; box-shadow: var(--shadow-sm); color: var(--blue); }
#shipping-doc .related a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#shipping-doc .related a .arrow { color: var(--orange-ink); }

@media (max-width: 900px) {
    #shipping-doc .shell { grid-template-columns: 1fr; gap: 0; padding: 32px 24px 80px; }
    #shipping-doc .toc {
        position: static;
        margin-bottom: 32px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 18px 18px 8px;
        box-shadow: var(--shadow-sm);
    }
    #shipping-doc .toc ul { display: flex; flex-wrap: wrap; gap: 6px 8px; border-left: 0; }
    #shipping-doc .toc a {
        border-left: 0;
        padding: 8px 12px;
        margin: 0;
        background: var(--bg);
        border-radius: 999px;
        font-size: 13px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    #shipping-doc .toc a.active { border-left: 0; background: var(--orange-tint); color: var(--orange-ink); }
    #shipping-doc .toc .toc-cta { display: none; }
    #shipping-doc .content { max-width: none; }
    #shipping-doc .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    #shipping-doc .masthead-inner { padding: 40px 22px 30px; }
    #shipping-doc .tiles-wrap { padding: 26px 22px 0; }
    #shipping-doc .tiles { grid-template-columns: 1fr; }
    #shipping-doc .shell { padding: 28px 22px 72px; }
    #shipping-doc .stepper { grid-template-columns: 1fr; gap: 20px; }
    #shipping-doc .step { padding: 0; }
    #shipping-doc .step:not(:last-child)::after { display: none; }
    #shipping-doc .def { grid-template-columns: 1fr; gap: 4px; }
    #shipping-doc .contact { padding: 28px 24px; }
}

/* Clean print output: masthead + content only, no chrome/CTAs/progress bar. */
@media print {
    #shipping-doc .shipping-progress,
    #shipping-doc .toc,
    #shipping-doc .contact,
    #shipping-doc .related { display: none !important; }
    #shipping-doc .shell { grid-template-columns: 1fr; }
    #shipping-doc .content { max-width: none; }
}

/* =========================
   TERMS OF SERVICE PAGE
   First-party, KOLIVITA-authored legal doc -- see page-terms.php.
   All selectors scoped under #terms-doc so they never leak onto other
   templates (several class names here -- .chip, .contact, .related -- are
   shared with #legal / #shipping-doc, but these templates never render on
   the same page). Signature element: numbered clauses on a document sheet.
========================= */
#terms-doc { background: var(--bg); }

#terms-doc .terms-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--orange), var(--orange-ink));
    z-index: 60;
    transition: width .1s linear;
}

/* ---------- Masthead ---------- */
#terms-doc .masthead { background: var(--surface); border-bottom: 1px solid var(--border); }
#terms-doc .masthead-inner { max-width: 1120px; margin: 0 auto; padding: 56px 32px 40px; }
#terms-doc .eyebrow {
    font-size: 12.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--orange-ink);
    font-weight: 700;
    margin: 0 0 14px;
}
#terms-doc .doc-title {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    color: var(--blue);
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.08;
    margin: 0 0 14px;
    letter-spacing: -.01em;
}
#terms-doc .lede { color: var(--muted); font-size: 17px; max-width: 62ch; margin: 0 0 22px; }
#terms-doc .meta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#terms-doc .chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    min-width: 0;
    min-height: 0;
}
#terms-doc .chip strong { color: var(--ink); font-weight: 700; }
#terms-doc .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }

/* ---------- Two-column shell ---------- */
#terms-doc .shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 32px 96px;
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: 48px;
    align-items: start;
}

/* Sticky numbered TOC rail */
#terms-doc .toc { position: sticky; top: 92px; }
#terms-doc .toc .toc-label {
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 14px;
    padding-left: 16px;
}
#terms-doc .toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
#terms-doc .toc a {
    display: flex;
    gap: 9px;
    align-items: baseline;
    padding: 6px 0 6px 16px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: none;
    line-height: 1.3;
    transition: .15s;
    min-height: 40px;
}
/* var(--muted) on cream = 5.0:1 (was #b9b2a8 = 1.98:1, effectively invisible) */
#terms-doc .toc a .n { font-family: Georgia, 'Times New Roman', Times, serif; font-weight: 700; font-size: 12px; color: var(--muted); min-width: 18px; transition: .15s; }
#terms-doc .toc a:hover { color: var(--ink); }
#terms-doc .toc a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#terms-doc .toc a.active { color: var(--blue); font-weight: 700; border-left-color: var(--orange); }
#terms-doc .toc a.active .n { color: var(--orange-ink); }
#terms-doc .toc .toc-cta { margin-top: 20px; padding-left: 16px; }
#terms-doc .toc .toc-cta a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    padding: 0;
    border: 0;
    margin: 0;
    min-height: 0;
}
#terms-doc .toc .toc-cta a:hover { color: var(--orange-ink); }

/* Content column */
#terms-doc .content { min-width: 0; }

/* Plain-language "short version" -- OUR summary, above the sheet */
#terms-doc .keypoints {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius);
    padding: 26px 30px;
    margin: 0 0 30px;
    box-shadow: var(--shadow-sm);
}
#terms-doc .keypoints h2 { font-family: Georgia, 'Times New Roman', Times, serif; color: var(--blue); font-size: 20px; margin: 0 0 6px; display: flex; align-items: center; gap: 9px; }
#terms-doc .keypoints .sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
#terms-doc .keypoints ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
#terms-doc .keypoints li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink); }
#terms-doc .keypoints li svg { flex: none; margin-top: 3px; }
#terms-doc .keypoints li b { color: var(--ink); }

/* The contract sheet -- numbered clauses, hairline separated */
#terms-doc .sheet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 8px 48px;
}
#terms-doc .clause { padding: 34px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 96px; }
#terms-doc .clause:last-child { border-bottom: 0; }
#terms-doc .clause-head { display: flex; gap: 16px; align-items: baseline; margin: 0 0 12px; }
#terms-doc .clause-head .num { font-family: Georgia, 'Times New Roman', Times, serif; font-weight: 700; font-size: 30px; line-height: 1; color: var(--orange-ink); min-width: 44px; }
#terms-doc .clause-head h2 { font-family: Georgia, 'Times New Roman', Times, serif; color: var(--blue); font-size: 23px; margin: 0; line-height: 1.15; }
#terms-doc .clause-body { max-width: 68ch; margin-left: 60px; }
#terms-doc .clause-body p { margin: 0 0 12px; color: var(--ink); }
#terms-doc .clause-body p:last-child { margin-bottom: 0; }
#terms-doc .clause-body a { color: var(--blue-soft); font-weight: 600; }
#terms-doc .clause-body .xref {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    margin-top: 4px;
    min-height: 40px;
}
#terms-doc .clause-body .xref:hover { border-color: #dcd6cf; color: var(--orange-ink); }
#terms-doc .clause-body .xref:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#terms-doc .clause-body .xref .arrow { color: var(--orange-ink); }

/* Contact card = clause 14 */
#terms-doc .contact {
    background: var(--blue);
    color: #fff;
    border-radius: 16px;
    padding: 38px 40px;
    margin-top: 30px;
    box-shadow: var(--shadow-md);
    scroll-margin-top: 96px;
}
#terms-doc .contact .num { font-family: Georgia, 'Times New Roman', Times, serif; font-weight: 700; font-size: 22px; color: #f0a877; display: block; margin-bottom: 4px; }
#terms-doc .contact h2 { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 26px; margin: 0 0 10px; color: #fff; }
#terms-doc .contact p { color: #dbe4ec; margin: 0 0 8px; max-width: 56ch; }
#terms-doc .contact .addr { font-size: 14px; color: #c3d1dc; line-height: 1.6; margin: 14px 0 22px; }
#terms-doc .contact .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--orange);
    color: #3a1c08;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 999px;
    min-height: 48px;
    transition: .18s;
}
#terms-doc .contact .btn:hover { background: #f08a4f; transform: translateY(-1px); }
#terms-doc .contact .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Related legal row */
#terms-doc .related { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
#terms-doc .related a {
    flex: 1 1 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14.5px;
    transition: .15s;
    min-height: 56px;
}
#terms-doc .related a:hover { border-color: #dcd6cf; box-shadow: var(--shadow-sm); color: var(--blue); }
#terms-doc .related a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#terms-doc .related a .arrow { color: var(--orange-ink); }

@media (max-width: 900px) {
    #terms-doc .shell { grid-template-columns: 1fr; gap: 0; padding: 32px 24px 80px; }
    #terms-doc .toc {
        position: static;
        margin-bottom: 28px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 18px 18px 10px;
        box-shadow: var(--shadow-sm);
    }
    #terms-doc .toc ul { display: flex; flex-wrap: wrap; gap: 6px 8px; border-left: 0; }
    #terms-doc .toc a {
        border-left: 0;
        padding: 8px 12px;
        margin: 0;
        background: var(--bg);
        border-radius: 999px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    #terms-doc .toc a.active { border-left: 0; background: var(--orange-tint); color: var(--orange-ink); }
    #terms-doc .toc .toc-cta { display: none; }
    #terms-doc .sheet { padding: 6px 26px; }
    #terms-doc .clause-body { margin-left: 0; }
}

@media (max-width: 600px) {
    #terms-doc .masthead-inner { padding: 40px 22px 30px; }
    #terms-doc .shell { padding: 28px 22px 72px; }
    #terms-doc .keypoints { padding: 22px 20px; }
    #terms-doc .sheet { padding: 4px 22px; }
    #terms-doc .clause-head .num { font-size: 24px; min-width: 36px; }
    #terms-doc .clause-head h2 { font-size: 20px; }
    #terms-doc .contact { padding: 28px 24px; }
}

/* Clean print output: masthead + content only, no chrome/CTAs/progress bar. */
@media print {
    #terms-doc .terms-progress,
    #terms-doc .toc,
    #terms-doc .related { display: none !important; }
    #terms-doc .shell { grid-template-columns: 1fr; }
    #terms-doc .clause-body { margin-left: 0; }
}

/* =====================================================================
   CONTACT PAGE (page-contact.php)
   Branded wrapper around the third-party Contact Form 7 embed. Same
   scoping convention as #legal / #terms-doc so nothing leaks. The info
   rail is named ".info-rail" (not ".rail") to avoid colliding with the
   unscoped product-page ".rail" sticky-column class defined earlier in
   this file. See CONTACT-PAGE-HANDOFF.md.
===================================================================== */
#contact { background: var(--bg); }

/* ---------- Masthead ---------- */
#contact .masthead { background: var(--surface); border-bottom: 1px solid var(--border); }
#contact .masthead-inner { max-width: 1120px; margin: 0 auto; padding: 64px 40px 48px; }
#contact .eyebrow {
    font-size: 12.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--orange-ink);
    font-weight: 700;
    margin: 0 0 14px;
}
#contact .doc-title {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    color: var(--blue);
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.08;
    letter-spacing: -.01em;
    margin: 0 0 16px;
}
#contact .lede { color: var(--muted); font-size: 17px; max-width: 56ch; margin: 0; }

/* ---------- Two-panel layout ---------- */
#contact .wrap { max-width: 1120px; margin: 0 auto; padding: 48px 40px 88px; }
#contact .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px; align-items: start; }

/* ---------- Info rail (signature blue card) ---------- */
#contact .info-rail {
    background: var(--blue);
    color: #fff;
    border-radius: 16px;
    padding: 36px 34px;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 24px;
}
#contact .info-rail h2 { font-family: Georgia, 'Times New Roman', Times, serif; color: #fff; font-size: 24px; margin: 0 0 8px; }
#contact .info-rail .rail-sub { color: #cdd9e4; font-size: 14.5px; margin: 0 0 26px; max-width: 34ch; }
#contact .reply-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 28px;
}
#contact .reply-chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7fc79b;
    flex: none;
    box-shadow: 0 0 0 4px rgba(127,199,155,.22);
}
#contact .channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
#contact .channels li { display: flex; gap: 15px; align-items: flex-start; }
#contact .channels .ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255,255,255,.09);
    display: flex;
    align-items: center;
    justify-content: center;
}
#contact .channels .ic svg { width: 19px; height: 19px; }
/* #a8bccd on --blue = 4.73:1 (was #9fb4c6 = 4.32:1, fails AA for 12px bold) */
#contact .channels .k { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #a8bccd; margin: 0 0 3px; font-weight: 700; }
#contact .channels .v { font-size: 15.5px; color: #fff; margin: 0; }
#contact .channels .v a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
#contact .channels .note { font-size: 13px; color: #aebfce; margin-top: 2px; }

/* ---------- Form sheet (frame around the CF7 embed) ---------- */
#contact .sheet { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(46,74,98,.08); padding: 38px 40px 40px; }
#contact .sheet h2 { font-family: Georgia, 'Times New Roman', Times, serif; color: var(--blue); font-size: 22px; margin: 0 0 4px; }
#contact .sheet-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 28px; }
#contact .sheet-sub .req { color: var(--orange-ink); }

/* CF7 field wrappers -- these classes (.field, .field-row, .req, .opt,
   .charcount, .submit-row) live in the CF7 admin form template (Contact
   Form ID 153), not in this template file; styled here so the two stay
   in sync. */
#contact .field { margin-bottom: 22px; }
#contact .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#contact .field label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
#contact .field label .opt { font-weight: 400; color: var(--muted); }
#contact .field label .req { color: var(--orange-ink); margin-left: 2px; }
/* CF7 auto-inserts a <br> between the label and the control span in its
   rendered markup (wpautop) -- the label is already display:block, so the
   <br> just adds a dead blank line; suppress it. */
#contact .field br { display: none; }
#contact .wpcf7-form-control-wrap { display: block; }

/* CF7's own control classes -- .wpcf7-form-control covers text/email/select/textarea */
#contact .wpcf7-form-control {
    width: 100%;
    font-family: inherit;
    font-size: 15.5px;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0 15px;
    min-height: 52px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
#contact .wpcf7-form-control.wpcf7-textarea { padding: 14px 15px; min-height: 150px; resize: vertical; line-height: 1.55; }
#contact .wpcf7-form-control.wpcf7-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
}
#contact .wpcf7-form-control::placeholder { color: #a49e97; }
#contact .wpcf7-form-control:hover { border-color: #d8d2ca; }
#contact .wpcf7-form-control:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--blue-soft);
    box-shadow: 0 0 0 3px rgba(47,95,143,.15);
}
#contact .wpcf7-form-control.wpcf7-not-valid { border-color: var(--danger); }
#contact .wpcf7-not-valid-tip { display: block; color: var(--danger); font-size: 12.5px; margin-top: 6px; }
#contact .wpcf7-response-output {
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--ink);
    margin: 18px 0 0;
}

#contact .charcount { text-align: right; font-size: 12.5px; color: var(--muted); margin-top: 6px; }

#contact .submit-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
#contact input.btn-submit {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 22px center;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 0 48px 0 30px;
    min-height: 54px;
    cursor: pointer;
    transition: background-color .15s, transform .05s;
}
#contact input.btn-submit:hover { background-color: var(--blue-cta-hover); }
#contact input.btn-submit:active { transform: translateY(1px); }
#contact input.btn-submit:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#contact input.btn-submit.wpcf7-spinner { opacity: .75; }

#contact .privacy-note { font-size: 13px; color: var(--muted); max-width: 34ch; margin: 14px 0 0; }
#contact .privacy-note a { color: var(--blue-soft); }

/* ---------- Success state ---------- */
#contact .success-view { text-align: center; padding: 22px 10px 8px; }
#contact .success-view.show { animation: contact-success-pop .35s ease; }
@keyframes contact-success-pop {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
#contact .success-view .badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--green) 14%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
#contact .success-view .badge svg { width: 28px; height: 28px; }
#contact .success-view h3 { font-family: Georgia, 'Times New Roman', Times, serif; color: var(--blue); font-size: 23px; margin: 0 0 8px; }
/* Focused programmatically (ContactForm.showSuccess) so screen readers
   announce the success state; not an interactive control, so the default
   focus ring is suppressed rather than styled -- the whole card already
   communicates the state change visually. */
#contact .success-view h3:focus { outline: none; }
#contact .success-view p { color: var(--muted); font-size: 15px; max-width: 40ch; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    #contact .split { grid-template-columns: 1fr; gap: 22px; }
    #contact .info-rail { position: static; }
    #contact .masthead-inner { padding: 48px 26px 36px; }
    #contact .wrap { padding: 32px 26px 64px; }
}

@media (max-width: 600px) {
    #contact .field-row { grid-template-columns: 1fr; gap: 0; }
    #contact .sheet { padding: 26px 20px 28px; }
    #contact .info-rail { padding: 28px 22px; }
    #contact .masthead-inner { padding: 38px 20px 30px; }
    #contact .wrap { padding: 24px 16px 56px; }
    #contact input.btn-submit { width: 100%; }
    #contact .submit-row { gap: 14px; }
}