/* AKK Black Friday 2026 — "Black Friday. Built right."
   Loaded only while the campaign is visible (inc/campaign-bf2026.php).
   Palette: AKK navy #0D1A4E / #1E3A8A, platinum #9CA3AF / #E5E7EB, white. Inter. */

:root {
    --bf-navy: #0D1A4E;
    --bf-navy-2: #1E3A8A;
    --bf-navy-3: #152A66;
    --bf-platinum: #9CA3AF;
    --bf-platinum-light: #E5E7EB;
    --bf-platinum-pale: #F3F4F6;
    --bf-white: #FFFFFF;
    --bf-ink: #0F172A;
    --bf-ink-soft: #475569;
    --bf-ok: #166534;
    --bf-ok-bg: #DCFCE7;
    --bf-warn: #92400E;
    --bf-warn-bg: #FEF3C7;
    --bf-bad: #991B1B;
    --bf-bad-bg: #FEE2E2;
    --bf-unknown: #334155;
    --bf-unknown-bg: #E2E8F0;
    --bf-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.akk-bf-hero {
    position: relative;
    background: linear-gradient(160deg, var(--bf-navy) 0%, #0B1640 55%, #09123A 100%);
    color: var(--bf-white);
    font-family: var(--bf-font);
    overflow: hidden;
}
.akk-bf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1200px 600px at 85% 20%, rgba(156,163,175,0.14), transparent 60%);
    pointer-events: none;
}
.akk-bf-preview-ribbon {
    position: relative;
    z-index: 2;
    background: #FBBF24;
    color: #1F1300;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 0.45rem 1rem;
}
.akk-bf-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 3rem;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    gap: 3rem;
    align-items: center;
}
.akk-bf-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    color: var(--bf-platinum);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.akk-bf-hero__logo {
    height: 26px;
    width: auto;
    display: block;
}
.akk-bf-hero__headline {
    margin: 0 0 0.9rem;
    font-size: clamp(2.4rem, 5vw, 4.25rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--bf-white);
}
.akk-bf-hero__sub {
    margin: 0 0 1.6rem;
    max-width: 44ch;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--bf-platinum-light);
}

/* Offer card */
.akk-bf-offer {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(229,231,235,0.22);
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    margin: 0 0 1.25rem;
}
.akk-bf-offer__title {
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bf-white);
}
.akk-bf-offer__text { margin: 0; color: var(--bf-platinum-light); }
.akk-bf-offer__disclosure { margin: 0.7rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--bf-platinum-light); }
.akk-bf-offer__upcoming { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--bf-platinum); }
.akk-bf-offer--ended { border-style: dashed; }

/* Code box */
.akk-bf-code {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "label value copy" "note note note";
    align-items: center;
    gap: 0.5rem 0.9rem;
    background: var(--bf-white);
    color: var(--bf-ink);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
}
.akk-bf-code__label {
    grid-area: label;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bf-ink-soft);
}
.akk-bf-code__value {
    grid-area: value;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--bf-navy);
    user-select: all;
}
.akk-bf-code__copy {
    grid-area: copy;
    appearance: none;
    border: 0;
    background: var(--bf-navy-2);
    color: var(--bf-white);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 150ms ease;
}
.akk-bf-code__copy:hover { background: var(--bf-navy-3); }
.akk-bf-code__copy:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
.akk-bf-code__copy.is-copied { background: var(--bf-ok); }
.akk-bf-code__note {
    grid-area: note;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--bf-ink-soft);
}
.akk-bf-code--sm .akk-bf-code__value { font-size: 1.15rem; }
.akk-bf-code--sm .akk-bf-code__copy { padding: 0.45rem 0.85rem; font-size: 0.8rem; }

/* Buttons */
.akk-bf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.4rem;
}
.akk-bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}
.akk-bf-btn:hover { transform: translateY(-1px); text-decoration: none; }
.akk-bf-btn--primary { background: var(--bf-white); color: var(--bf-navy); }
.akk-bf-btn--primary:hover { background: var(--bf-platinum-light); color: var(--bf-navy); }
.akk-bf-btn--secondary { background: transparent; color: var(--bf-white); border: 1.5px solid rgba(229,231,235,0.55); }
.akk-bf-btn--secondary:hover { border-color: var(--bf-white); color: var(--bf-white); }

/* Essentials beside the offer */
.akk-bf-essentials {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--bf-platinum-light);
}
.akk-bf-essentials li strong { color: var(--bf-white); font-weight: 700; margin-right: 0.3rem; }
.akk-bf-essentials li strong::after { content: " ·"; color: var(--bf-platinum); }
.akk-bf-proposed { color: #FBBF24; font-style: normal; font-weight: 600; }

/* Details / terms */
.akk-bf-details {
    border-top: 1px solid rgba(229,231,235,0.2);
    padding-top: 0.6rem;
}
.akk-bf-details summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--bf-white);
    padding: 0.35rem 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.akk-bf-details summary::-webkit-details-marker { display: none; }
.akk-bf-details summary::before {
    content: "+";
    display: inline-flex;
    width: 22px; height: 22px;
    border-radius: 50%;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.12);
    font-weight: 800;
}
.akk-bf-details[open] summary::before { content: "–"; }
.akk-bf-terms { margin: 0.6rem 0 0; display: grid; gap: 0.55rem; }
.akk-bf-terms__row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.75rem; font-size: 0.84rem; line-height: 1.45; }
.akk-bf-terms dt { font-weight: 700; color: var(--bf-white); }
.akk-bf-terms dd { margin: 0; color: var(--bf-platinum-light); }
.akk-bf-proposed-note { margin: 0.7rem 0 0; font-size: 0.8rem; color: #FBBF24; font-weight: 600; }

/* Media */
.akk-bf-hero__media {
    margin: 0;
    position: relative;
}
.akk-bf-hero__media img,
.akk-bf-hero__media-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    background: var(--bf-navy-3);
}
.akk-bf-hero__media figcaption {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bf-platinum);
}

/* Ended state */
.akk-bf-hero--ended .akk-bf-hero__headline { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }

/* ── Header strip: the campaign line in two lengths (inc/campaign-bf2026.php) ── */
.akk-bf-promo__short { display: none; }
@media (max-width: 760px) {
    .akk-bf-promo__long  { display: none; }
    .akk-bf-promo__short { display: inline; }
    /* the strip is normally one clipped row; the campaign line may take two so nothing is cut off */
    .akk-promo-bar:has(#akkPromoMsg[data-akk-bf]) .akk-promo-bar__inner { height: auto; min-height: 30px; padding: 5px 0; }
    #akkPromoMsg[data-akk-bf] { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; text-align: center; }
}

/* ── Mobile: headline → offer (code, disclosure) → buttons → the rest ──
   Spacing tightened 2026-11-03 so the code and the shopping button land
   higher; the supporting sentence now follows the buttons on a phone. */
@media (max-width: 760px) {
    .akk-bf-hero__inner {
        grid-template-columns: 1fr;
        gap: 0.9rem;
        padding: 1rem 1rem 1.6rem;
    }
    .akk-bf-hero__copy { display: contents; }
    .akk-bf-hero__eyebrow   { order: 1; margin-bottom: 0.1rem; font-size: 0.7rem; }
    .akk-bf-hero__headline  { order: 2; font-size: 2.05rem; margin-bottom: 0.2rem; }
    .akk-bf-offer           { order: 3; margin-bottom: 0; padding: 1rem 1rem; }
    .akk-bf-offer__title    { font-size: 0.98rem; margin-bottom: 0.7rem; }
    .akk-bf-hero__actions   { order: 4; margin-bottom: 0; gap: 0.5rem; }
    .akk-bf-hero__sub       { order: 5; font-size: 0.95rem; margin: 0.2rem 0 0; }
    .akk-bf-hero__media     { order: 6; }
    .akk-bf-essentials      { order: 7; }
    .akk-bf-details         { order: 8; }
    .akk-bf-hero__actions .akk-bf-btn { flex: 1 1 100%; }
    .akk-bf-hero__media img, .akk-bf-hero__media-placeholder { aspect-ratio: 4 / 5; border-radius: 14px; }
    .akk-bf-code { grid-template-columns: 1fr auto; grid-template-areas: "label label" "value copy" "note note"; }
    .akk-bf-terms__row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ── Workmanship ──────────────────────────────────────────────── */
.akk-bf-work { background: var(--bf-platinum-pale); font-family: var(--bf-font); color: var(--bf-ink); }
.akk-bf-work__inner { max-width: 1400px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.akk-bf-work h2 { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--bf-navy); }
.akk-bf-work__lede { margin: 0 0 1.25rem; color: var(--bf-ink-soft); font-size: 0.95rem; }
.akk-bf-work__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.akk-bf-work__item { position: relative; border-radius: 14px; overflow: hidden; background: var(--bf-white); box-shadow: 0 4px 12px rgba(13,26,74,0.08); }
.akk-bf-work__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.akk-bf-work__label {
    position: absolute; left: 0.75rem; top: 0.75rem;
    padding: 0.3rem 0.65rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--bf-white); color: var(--bf-navy);
}
.akk-bf-work__label--progress { background: #FEF3C7; color: var(--bf-warn); }
.akk-bf-work__label--completed { background: var(--bf-ok-bg); color: var(--bf-ok); }
@media (max-width: 760px) {
    .akk-bf-work__inner { padding: 1.75rem 1rem; }
    .akk-bf-work__grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
}

/* ── Availability line, disclosure ───────────────────────────── */
.akk-bf-avail {
    display: inline-flex; align-items: center; gap: 0.45rem;
    margin: 0.6rem 0 0; padding: 0.35rem 0.7rem; border-radius: 999px;
    font-family: var(--bf-font); font-size: 0.82rem; font-weight: 700;
    background: var(--bf-unknown-bg); color: var(--bf-unknown);
}
.akk-bf-avail__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.akk-bf-avail__prefix { font-weight: 500; }
.akk-bf-avail--instock { background: var(--bf-ok-bg); color: var(--bf-ok); }
.akk-bf-avail--onbackorder { background: var(--bf-warn-bg); color: var(--bf-warn); }
.akk-bf-avail--outofstock { background: var(--bf-bad-bg); color: var(--bf-bad); }
.akk-bf-avail--select, .akk-bf-avail--unknown { background: var(--bf-unknown-bg); color: var(--bf-unknown); }
.akk-bf-avail__prefix:empty { display: none; }
.akk-bf-disclosure { font-family: var(--bf-font); font-size: 0.8rem; line-height: 1.45; color: var(--bf-ink-soft); margin: 0.75rem 0 0; }
.akk-bf-hero .akk-bf-disclosure { color: var(--bf-platinum-light); }

/* ── Product page panel ───────────────────────────────────────── */
.akk-bf-panel {
    font-family: var(--bf-font);
    background: var(--bf-white);
    border: 1.5px solid var(--bf-navy-2);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    margin: 0 0 1.25rem;
    color: var(--bf-ink);
}
.akk-bf-panel__eyebrow { margin: 0 0 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-navy-2); }
.akk-bf-panel__title { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 600; line-height: 1.45; }
.akk-bf-panel .akk-bf-code { background: var(--bf-platinum-pale); }
.akk-bf-panel .akk-bf-details { border-top-color: var(--bf-platinum-light); margin-top: 0.75rem; }
.akk-bf-panel .akk-bf-details summary { color: var(--bf-navy); }
.akk-bf-panel .akk-bf-details summary::before { background: var(--bf-platinum-light); }
.akk-bf-panel .akk-bf-terms dt { color: var(--bf-ink); }
.akk-bf-panel .akk-bf-terms dd { color: var(--bf-ink-soft); }
.akk-bf-panel--ended { border-style: dashed; border-color: var(--bf-platinum); }

/* ── Cart / checkout / received notices ──────────────────────── */
.akk-bf-notice {
    font-family: var(--bf-font);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.1rem;
    border: 1.5px solid var(--bf-platinum-light);
    background: var(--bf-platinum-pale);
    color: var(--bf-ink);
}
.akk-bf-notice__state { margin: 0 0 0.35rem; font-weight: 700; font-size: 0.92rem; }
.akk-bf-notice__disclosure { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--bf-ink-soft); }
.akk-bf-notice--applied { border-color: #86EFAC; background: #F0FDF4; }
.akk-bf-notice--needs-install, .akk-bf-notice--not-entered { border-color: #BFDBFE; background: #EFF6FF; }
.akk-bf-notice--backorder, .akk-bf-notice--ended { border-color: #FDE68A; background: #FFFBEB; }
.akk-bf-notice--cart { max-width: 1400px; margin-left: auto; margin-right: auto; }
.akk-bf-coupon-row { font-weight: 600; color: var(--bf-ok); }

/* ── Landing page ─────────────────────────────────────────────── */
.akk-bf-grid { font-family: var(--bf-font); background: var(--bf-white); color: var(--bf-ink); }
.akk-bf-grid__inner { max-width: 1400px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.akk-bf-grid h2 { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--bf-navy); }
.akk-bf-grid__lede { margin: 0; color: var(--bf-ink-soft); font-size: 0.95rem; }
.akk-bf-grid__cards { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.akk-bf-grid__card { display: flex; flex-direction: column; }
.akk-bf-grid__card .akk-bf-avail { align-self: flex-start; }
.akk-bf-landing-terms { font-family: var(--bf-font); background: var(--bf-platinum-pale); }
.akk-bf-landing-terms__inner { max-width: 900px; margin: 0 auto; padding: 2.5rem 1.5rem; color: var(--bf-ink); }
.akk-bf-landing-terms h2 { margin: 0 0 1rem; font-size: 1.3rem; font-weight: 800; color: var(--bf-navy); }
.akk-bf-landing-terms .akk-bf-terms dt { color: var(--bf-ink); }
.akk-bf-landing-terms .akk-bf-terms dd { color: var(--bf-ink-soft); }
@media (max-width: 760px) {
    .akk-bf-grid__inner, .akk-bf-landing-terms__inner { padding: 1.75rem 1rem; }
}