/*
Theme Name: K7 Forever — Skin
Theme URI: https://www.k7forever.be/
Description: Child theme of Twenty Twenty-Five for K7 Forever (ASBL Productions Associées). Brand-register skin: heritage-grade typography, OKLCH palette, restrained color strategy, cassette-ribbon motif, no AI-monoculture defaults.
Author: Frédéric Guariento (ASBL Productions Associées)
Author URI: https://www.k7forever.be/a-propos/
Template: twentytwentyfive
Version: 0.7.1
Text Domain: k7forever-skin
Tags: full-site-editing, block-styles, blog, e-commerce, one-column, two-columns, accessibility-ready
*/

/* All design tokens live in theme.json. style.css carries only:
   - Long-tail overrides not expressible in theme.json
   - Component-specific rules (cassette ribbon motif, configurator polish)
   - Bug fixes for theme/plugin interactions

   Order of cascade:
   1. theme.json → :root CSS variables
   2. block library defaults (WP core)
   3. parent theme (twentytwentyfive)
   4. THIS file
   5. inline block styles (per-page overrides)
*/

/* ─────────────────────────────────────────────────────────────
   1. Page-level rhythm overrides
   ───────────────────────────────────────────────────────────── */

body {
    font-feature-settings: "kern", "liga", "calt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Body line-height / measure — override Twenty Twenty-Five default */
.wp-block-post-content > p,
.wp-block-paragraph,
.entry-content > p {
    max-width: 65ch;
}

/* Headings: tighter line-height, slightly negative tracking on display sizes */
:where(h1, h2, h3, .wp-block-heading) {
    font-feature-settings: "kern", "liga", "calt", "dlig", "ss01";
}
:where(h1, .has-x-large-font-size) { letter-spacing: -0.02em; }
:where(h2)                         { letter-spacing: -0.015em; }

/* ─────────────────────────────────────────────────────────────
   2. Cassette-ribbon motif — used as section divider, link underline,
      hero accent. Single signature device, used carefully.
   ───────────────────────────────────────────────────────────── */

/* Section divider: a thin SVG-rendered figure-eight ribbon (inline SVG since iter8 for true stroke draw) */
.k7-ribbon-divider {
    --k7-ribbon-color: var(--wp--preset--color--accent, currentColor);
    display: block;
    margin: var(--wp--preset--spacing--80) auto;
    width: 80px;
    height: 24px;
    color: var(--k7-ribbon-color);
}
.k7-ribbon-divider svg { display: block; width: 100%; height: 100%; }
.k7-ribbon-divider svg path {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    fill: none;
}

/* Primary link hover underline = cassette ribbon */
:where(a):not([class*="wp-block-button"]):not(.wp-block-navigation-item__content):hover {
    text-decoration-thickness: 1.6px;
    text-decoration-style: solid;
    text-underline-offset: 0.2em;
}

/* ─────────────────────────────────────────────────────────────
   3. Buttons — strong, calm, no gradient, no glow
   ───────────────────────────────────────────────────────────── */

.wp-block-button .wp-block-button__link {
    transition: background-color var(--k7-dur-base, 200ms) var(--k7-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                color var(--k7-dur-base, 200ms) var(--k7-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--k7-dur-base, 200ms) var(--k7-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                transform var(--k7-dur-base, 200ms) var(--k7-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
    will-change: background-color, color, transform;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Primary (filled) — hover swap to accent oxide red */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--cream);
    border-color: var(--wp--preset--color--accent);
    transform: translateY(-1px);
}

/* Outline — 1.5px border, fill on hover */
.wp-block-button.is-style-outline .wp-block-button__link {
    border-width: 1.5px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: currentColor;
    color: var(--wp--preset--color--cream);
}

/* Active state pressed visual */
.wp-block-button .wp-block-button__link:active {
    transform: translateY(0);
    transition-duration: 80ms;
}

/* ─────────────────────────────────────────────────────────────
   4. Cards — kill nested cards (parent theme default), kill default
      shadow soup, restrict radius, prefer hairline borders
   ───────────────────────────────────────────────────────────── */

.wp-block-group.is-style-card,
.wp-block-column > .wp-block-group {
    border-radius: var(--wp--preset--spacing--20, 0.25rem);
    box-shadow: none !important;
    border: 1px solid var(--wp--preset--color--neutral-300, oklch(0.86 0.008 80));
}

/* Cardocalypse: nested cards within cards = remove border on inner */
.wp-block-group.is-style-card .wp-block-group.is-style-card,
.wp-block-column > .wp-block-group .wp-block-group {
    border: none;
    background: transparent;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────
   5. Reduced motion respect
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   6. Configurator (/estimer) polish — denser, more functional
   ───────────────────────────────────────────────────────────── */

.k7-calc table {
    font-variant-numeric: tabular-nums;
}
.k7-calc input[type="number"]:focus,
.k7-calc select:focus {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}
.k7-detail {
    background: var(--wp--preset--color--neutral-100, oklch(0.97 0.005 80));
    border-left: none; /* explicit ban — see SKILL.md */
    border-top: 1px solid var(--wp--preset--color--neutral-300);
}
.k7-total-row {
    font-family: var(--wp--preset--font-family--display);
    font-feature-settings: "tnum", "lnum";
}

/* ─────────────────────────────────────────────────────────────
   7. Polylang language switcher — subtle, larger touch target
   ───────────────────────────────────────────────────────────── */

.wp-block-polylang-navigation-language-switcher .wp-block-navigation-item__label img {
    border-radius: 1px;
    width: 22px;     /* up from 16px — touch target compliance */
    height: auto;
    vertical-align: -3px;
    margin-right: 0.4em;
}

/* Make the whole language switcher link reach 44×44 minimum tap area */
.wp-block-polylang-navigation-language-switcher .wp-block-navigation-item__content {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    padding: 0.4em 0.7em;
}

/* ─────────────────────────────────────────────────────────────
   8. Hero asymmetric — mark visual + subtle ribbon hover glow
   ───────────────────────────────────────────────────────────── */

.k7-hero-mark {
    margin: 0;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.k7-hero:hover .k7-hero-mark {
    transform: rotate(-2deg) scale(1.02);
}
.k7-hero-mark svg path {
    transition: stroke-dashoffset 800ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 400ms ease-out;
}

/* On smaller viewports, stack the asymmetric hero columns vertically
   and pad the mark down */
@media (max-width: 781px) {
    .k7-hero .wp-block-columns {
        gap: var(--wp--preset--spacing--60) !important;
    }
    .k7-hero-mark {
        max-width: 220px;
        margin: 0 auto;
    }
}

/* ─────────────────────────────────────────────────────────────
   9. Focus rings — visible, accent-colored
   ───────────────────────────────────────────────────────────── */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────────
   10. Masthead header — editorial 2-row, sticky charcoal
   Row 1 utility strip · Row 2 wordmark + nav + CTA · hairline rule
   Mobile <900px : drawer plein écran
   ───────────────────────────────────────────────────────────── */

.k7-skiplink {
    position: absolute; left: -9999px; top: 0;
    background: var(--wp--preset--color--charcoal);
    color: var(--wp--preset--color--cream);
    padding: 0.75rem 1rem; z-index: 1000;
    text-decoration: none; font-weight: 500;
}
.k7-skiplink:focus { left: 1rem; top: 1rem; outline: 2px solid var(--wp--preset--color--accent); }

/* Wrapper — sticky shell */
.k7-mast {
    position: sticky; top: 0; z-index: 100;
    background: var(--wp--preset--color--charcoal);
    color: var(--wp--preset--color--cream);
    transition: box-shadow 220ms ease-out;
}
.k7-mast.is-scrolled { box-shadow: 0 12px 28px -22px rgba(0,0,0,0.65); }
.k7-mast__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3.5vw, 2.25rem);
}

/* Row 1 — utility strip (legal + contact + lang) */
.k7-mast__utility {
    background: color-mix(in oklab, var(--wp--preset--color--charcoal) 92%, black);
    border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--cream) 7%, transparent);
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 60%, transparent);
}
.k7-mast__utility-inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 36px; gap: 1rem;
}
.k7-mast__legal { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k7-mast__utility-right { display: inline-flex; align-items: center; gap: 0.65rem; }
.k7-mast__contact {
    color: inherit; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: color 180ms ease-out;
}
.k7-mast__contact:hover { color: var(--wp--preset--color--accent); }
.k7-mast__sep { opacity: 0.4; }

/* Lang switcher (used in utility AND in mobile drawer) */
.k7-lang { display: inline-flex; align-items: center; gap: 0.45rem; }
.k7-lang a {
    color: inherit; text-decoration: none; opacity: 0.55;
    font-weight: 600; letter-spacing: 0.12em;
    padding: 0.4rem 0.25rem; min-height: 32px;
    display: inline-flex; align-items: center;
    transition: opacity 160ms, color 160ms;
}
.k7-lang a:hover { opacity: 1; }
.k7-lang a.is-active { opacity: 1; color: var(--wp--preset--color--accent); cursor: default; }

@media (max-width: 760px) {
    .k7-mast__legal { display: none; }
    .k7-mast__utility-inner { justify-content: flex-end; }
}

/* Row 2 — main masthead */
.k7-mast__main-inner {
    display: flex; align-items: center; gap: 2rem;
    min-height: 88px; padding-top: 0.75rem; padding-bottom: 0.75rem;
}

/* Brand wordmark */
.k7-mast__brand {
    display: inline-flex; align-items: center; gap: 0.85rem;
    color: inherit; text-decoration: none; line-height: 1;
}
.k7-mast__brand-mark { color: var(--wp--preset--color--accent); display: inline-flex; }
.k7-mast__brand-text { display: flex; flex-direction: column; gap: 0.25rem; }
.k7-mast__brand-word {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600;
    font-size: clamp(1.45rem, 1.1rem + 0.6vw, 1.75rem);
    letter-spacing: -0.015em;
    line-height: 1;
    white-space: nowrap;
}
.k7-mast__brand-tag {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 55%, transparent);
    white-space: nowrap;
}
@media (max-width: 580px) { .k7-mast__brand-tag { display: none; } }

/* Primary nav (desktop) */
.k7-mast__nav {
    margin-left: auto;
    display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
}
.k7-mast__nav-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: clamp(0.85rem, 1.6vw, 1.75rem);
}
.k7-mast__nav-item a {
    color: inherit; text-decoration: none;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.65rem 0.1rem; min-height: 44px;
    display: inline-flex; align-items: center;
    white-space: nowrap;
    position: relative;
    transition: color 180ms ease-out;
}
.k7-mast__nav-item a::after {
    content: ""; position: absolute; left: 0.1rem; right: 0.1rem; bottom: 0.55rem;
    height: 1px; background: var(--wp--preset--color--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.k7-mast__nav-item a:hover, .k7-mast__nav-item a:focus-visible { color: var(--wp--preset--color--accent); }
.k7-mast__nav-item a:hover::after, .k7-mast__nav-item a:focus-visible::after,
.k7-mast__nav-item.is-current a::after { transform: scaleX(1); }
.k7-mast__nav-item.is-current a { color: var(--wp--preset--color--accent); }

/* CTA — outline → fill on hover */
.k7-mast__cta {
    display: inline-flex; align-items: center; gap: 0.55rem;
    color: var(--wp--preset--color--cream);
    border: 1px solid color-mix(in oklab, var(--wp--preset--color--cream) 35%, transparent);
    padding: 0.7rem 1.1rem; min-height: 44px;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600; font-size: 0.78rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    border-radius: 1px;
    transition: background 220ms, color 220ms, border-color 220ms, transform 220ms cubic-bezier(0.22,1,0.36,1);
}
.k7-mast__cta-arrow { transition: transform 220ms cubic-bezier(0.22,1,0.36,1); }
.k7-mast__cta:hover {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--cream);
    transform: translateY(-1px);
}
.k7-mast__cta:hover .k7-mast__cta-arrow { transform: translateX(3px); }

/* Hairline accent rule below masthead */
.k7-mast__rule {
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        color-mix(in oklab, var(--wp--preset--color--accent) 65%, transparent) 30%,
        color-mix(in oklab, var(--wp--preset--color--accent) 65%, transparent) 70%,
        transparent 100%);
    opacity: 0.55;
}

/* Burger (mobile only) */
.k7-mast__burger {
    display: none; background: transparent; border: 0; color: inherit;
    width: 44px; height: 44px; padding: 0; cursor: pointer; margin-left: auto;
}
.k7-mast__burger-bars { display: inline-flex; flex-direction: column; gap: 5px; width: 22px; }
.k7-mast__burger-bars span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform 220ms, opacity 220ms; }
.k7-mast.is-open .k7-mast__burger-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.k7-mast.is-open .k7-mast__burger-bars span:nth-child(2) { opacity: 0; }
.k7-mast.is-open .k7-mast__burger-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile breakpoint */
@media (max-width: 900px) {
    .k7-mast__main-inner { min-height: 72px; }
    .k7-mast__burger { display: inline-flex; align-items: center; justify-content: center; }
    .k7-mast__nav {
        position: fixed; inset: 109px 0 0 0;  /* utility (36) + main (~73) */
        background: var(--wp--preset--color--charcoal);
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        padding: 1.5rem clamp(1.25rem, 5vw, 2rem) calc(2rem + env(safe-area-inset-bottom));
        gap: 0; overflow-y: auto;
        transform: translateY(-12px); opacity: 0; pointer-events: none;
        transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms;
    }
    .k7-mast.is-open .k7-mast__nav { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .k7-mast__nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .k7-mast__nav-item a {
        padding: 1.1rem 0; font-size: 1.5rem;
        font-family: var(--wp--preset--font-family--display);
        font-weight: 500; letter-spacing: -0.01em;
        text-transform: none;
        border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--cream) 8%, transparent);
    }
    .k7-mast__nav-item a::after { display: none; }
    .k7-mast__cta {
        margin-top: 1.75rem; align-self: flex-start;
        font-size: 0.85rem; padding: 0.95rem 1.4rem;
    }
}
@media (max-width: 760px) {
    .k7-mast__nav { inset: 73px 0 0 0; }   /* utility legal hidden, height shrinks */
}

html.k7-no-scroll, html.k7-no-scroll body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .k7-mast, .k7-mast__nav, .k7-mast__nav-item a::after,
    .k7-mast__cta, .k7-mast__cta-arrow, .k7-mast__burger-bars span { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   11. Footer — editorial statement + 4 columns + colophon
   ───────────────────────────────────────────────────────────── */

.k7-foot {
    background: var(--wp--preset--color--charcoal);
    color: color-mix(in oklab, var(--wp--preset--color--cream) 90%, transparent);
    padding: 0;
    font-family: var(--wp--preset--font-family--body);
}
.k7-foot__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3.5vw, 2.25rem);
}

/* Statement (big serif phrase top of footer) */
.k7-foot__statement { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.k7-foot__eyebrow {
    margin: 0 0 1.25rem;
    font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--wp--preset--color--accent); font-weight: 500;
}
.k7-foot__phrase {
    margin: 0;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 500;
    font-size: clamp(1.85rem, 1rem + 3.5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--cream);
    max-width: 22ch;
}
.k7-foot__phrase-pre  { display: block; }
.k7-foot__phrase-post { display: block; color: var(--wp--preset--color--accent); }
.k7-foot__phrase-post em { font-style: italic; font-weight: 400; }

/* Rules */
.k7-foot__rule {
    height: 1px;
    background: color-mix(in oklab, var(--wp--preset--color--cream) 14%, transparent);
}
.k7-foot__rule--soft { opacity: 0.6; }

/* Columns */
.k7-foot__cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: clamp(1.75rem, 3.5vw, 3.5rem);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3.5vw, 2.25rem);
}
@media (max-width: 1024px) {
    .k7-foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .k7-foot__cols { grid-template-columns: 1fr; }
}

.k7-foot__col-title {
    margin: 0 0 1rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}
.k7-foot__col-title--secondary { margin-top: 2rem; }

.k7-foot__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.k7-foot__list a {
    color: inherit; text-decoration: none;
    font-size: 0.95rem; line-height: 1.45;
    transition: color 180ms ease-out;
    display: inline-block; padding: 0.15rem 0;
}
.k7-foot__list a:hover { color: var(--wp--preset--color--accent); }
.k7-foot__list--small a { font-size: 0.85rem; opacity: 0.78; }

/* Brand column */
.k7-foot__brand {
    display: inline-flex; align-items: center; gap: 0.85rem;
    color: var(--wp--preset--color--cream); text-decoration: none;
    margin-bottom: 1.25rem;
}
.k7-foot__brand-mark { color: var(--wp--preset--color--accent); display: inline-flex; }
.k7-foot__brand-word {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600; font-size: 1.45rem; letter-spacing: -0.015em;
}
.k7-foot__addr {
    margin: 0 0 1.5rem; font-size: 0.92rem; line-height: 1.55;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 75%, transparent);
    max-width: 38ch;
}
.k7-foot__contact {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.65rem;
    font-size: 0.88rem; line-height: 1.4;
}
.k7-foot__contact li { display: flex; flex-direction: column; gap: 0.15rem; }
.k7-foot__contact-label {
    font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 50%, transparent);
}
.k7-foot__contact a {
    color: var(--wp--preset--color--cream); text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--accent) 50%, transparent);
    padding-bottom: 1px;
    transition: color 180ms, border-color 180ms;
}
.k7-foot__contact a:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }

/* Newsletter */
.k7-foot__nl-blurb {
    margin: 0 0 1.25rem; font-size: 0.92rem; line-height: 1.55;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 75%, transparent);
}
.k7-foot__nl-row {
    display: flex; gap: 0;
    border: 1px solid color-mix(in oklab, var(--wp--preset--color--cream) 22%, transparent);
    border-radius: 1px;
    transition: border-color 200ms;
}
.k7-foot__nl-row:focus-within { border-color: var(--wp--preset--color--accent); }
.k7-foot__nl-row input {
    flex: 1; min-width: 0;
    background: transparent; border: 0;
    color: var(--wp--preset--color--cream);
    padding: 0.85rem 1rem; font-size: 0.92rem;
    font-family: var(--wp--preset--font-family--body);
    min-height: 44px;
}
.k7-foot__nl-row input::placeholder { color: color-mix(in oklab, var(--wp--preset--color--cream) 45%, transparent); }
.k7-foot__nl-row input:focus { outline: none; }
.k7-foot__nl-row button {
    background: var(--wp--preset--color--accent); color: var(--wp--preset--color--cream);
    border: 0; padding: 0.85rem 1.1rem; cursor: pointer;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
    min-height: 44px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: background 200ms;
}
.k7-foot__nl-row button:hover { background: color-mix(in oklab, var(--wp--preset--color--accent) 88%, black); }
.k7-foot__nl-fineprint {
    margin: 0.65rem 0 0; font-size: 0.74rem;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 50%, transparent);
}

/* Colophon (bottom bar) */
.k7-foot__colophon {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    padding-top: 1.5rem; padding-bottom: clamp(1.5rem, 3vw, 2rem);
    font-size: 0.78rem;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 55%, transparent);
}
.k7-foot__legal { margin: 0; letter-spacing: 0.04em; }
.k7-foot__made { margin: 0; font-style: italic; }
.k7-foot__made em {
    font-family: var(--wp--preset--font-family--display);
    font-style: italic;
    font-size: 0.88rem;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 75%, transparent);
}
.k7-foot__lang { display: inline-flex; align-items: center; gap: 0.5rem; }
.k7-foot__lang a {
    color: inherit; text-decoration: none; opacity: 0.6;
    font-weight: 600; letter-spacing: 0.12em;
    padding: 0.4rem 0.25rem; min-height: 32px;
    display: inline-flex; align-items: center;
    transition: opacity 160ms, color 160ms;
}
.k7-foot__lang a:hover { opacity: 1; }
.k7-foot__lang a.is-active { opacity: 1; color: var(--wp--preset--color--accent); cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .k7-foot__list a, .k7-foot__contact a, .k7-foot__nl-row, .k7-foot__nl-row button,
    .k7-foot__lang a { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   12. Body editorial sections
   Process (numbered rows) · Pillars (asymmetric stack) ·
   Services-editorial (1 featured + 3 small)
   Shared : eyebrow, section-title, hairline, alt charcoal/cream rhythm
   ───────────────────────────────────────────────────────────── */

/* Shared editorial scaffolding */
.k7-section {
    width: 100%;
    padding: clamp(4rem, 8vw, 7rem) 0;
}
.k7-section--cream    { background: var(--wp--preset--color--cream);    color: var(--wp--preset--color--charcoal); }
.k7-section--charcoal { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--cream); }

.k7-section__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.25rem); }

.k7-eyebrow {
    margin: 0 0 1.25rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}

.k7-section__title {
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600;
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.55rem);
    line-height: 1.1; letter-spacing: -0.018em;
    max-width: 24ch;
}
.k7-section__title em {
    font-style: italic; font-weight: 400;
    color: var(--wp--preset--color--accent);
}
.k7-section--charcoal .k7-section__title { color: var(--wp--preset--color--cream); }

.k7-section__lede {
    margin: -1rem 0 clamp(2rem, 4vw, 3rem);
    max-width: 56ch; font-size: 1.15rem; line-height: 1.6;
    color: color-mix(in oklab, currentColor 78%, transparent);
}

.k7-rule {
    height: 1px; width: 100%;
    background: color-mix(in oklab, currentColor 14%, transparent);
    margin: 0;
}

/* ─── Process: numbered rows ─── */
.k7-process__list { display: flex; flex-direction: column; gap: 0; }
.k7-process__item {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 4fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
    padding: clamp(2rem, 3.5vw, 3rem) 0;
    border-top: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}
.k7-process__item:last-child { border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent); }

.k7-process__num {
    font-family: var(--wp--preset--font-family--display);
    font-style: italic; font-weight: 400;
    font-size: clamp(3.5rem, 2rem + 4vw, 6rem);
    line-height: 0.85;
    color: var(--wp--preset--color--accent);
    letter-spacing: -0.04em;
}
.k7-process__body { padding-top: 0.65rem; }
.k7-process__kicker {
    margin: 0 0 0.65rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: color-mix(in oklab, currentColor 60%, transparent);
}
.k7-process__h {
    margin: 0 0 0.65rem;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 500;
    font-size: clamp(1.2rem, 0.95rem + 0.65vw, 1.5rem);
    line-height: 1.2; letter-spacing: -0.012em;
}
.k7-process__p {
    margin: 0; max-width: 58ch;
    font-size: 1.0625rem; line-height: 1.6;
    color: color-mix(in oklab, currentColor 82%, transparent);
}

@media (max-width: 720px) {
    .k7-process__item { grid-template-columns: 1fr; gap: 0.75rem; }
    .k7-process__num { font-size: 3.2rem; }
}

/* ─── Pillars: asymmetric stack on charcoal ─── */
.k7-pillars__list { display: flex; flex-direction: column; gap: 0; }
.k7-pillars__item {
    display: grid;
    grid-template-columns: minmax(140px, 1.1fr) minmax(0, 3.4fr);
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: baseline;
    padding: clamp(2rem, 3.5vw, 3rem) 0;
    border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--cream) 12%, transparent);
}
.k7-pillars__item:last-child { border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--cream) 12%, transparent); }

.k7-pillars__index {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}
.k7-pillars__index span { color: color-mix(in oklab, var(--wp--preset--color--cream) 50%, transparent); margin-right: 0.6rem; font-weight: 400; }

.k7-pillars__body {}
.k7-pillars__h {
    margin: 0 0 0.7rem;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 500;
    font-size: clamp(1.3rem, 0.95rem + 0.95vw, 1.75rem);
    line-height: 1.2; letter-spacing: -0.012em;
    color: var(--wp--preset--color--cream);
    max-width: 30ch;
}
.k7-pillars__p {
    margin: 0; max-width: 62ch;
    font-size: 1.0625rem; line-height: 1.65;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 80%, transparent);
}
.k7-pillars__p a {
    color: var(--wp--preset--color--accent); text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--accent) 50%, transparent);
}
.k7-pillars__p a:hover { border-bottom-color: var(--wp--preset--color--accent); }

@media (max-width: 720px) {
    .k7-pillars__item { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ─── Services editorial: 1 featured + 3 small ─── */
.k7-svc__grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.k7-svc__card {
    display: flex; flex-direction: column;
    background: color-mix(in oklab, var(--wp--preset--color--charcoal) 4%, var(--wp--preset--color--cream));
    border: 1px solid color-mix(in oklab, var(--wp--preset--color--charcoal) 9%, transparent);
    text-decoration: none; color: inherit;
    transition: transform 320ms cubic-bezier(0.22,1,0.36,1), border-color 320ms, background 320ms;
    will-change: transform;
}
.k7-svc__card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--wp--preset--color--accent) 50%, transparent);
    background: var(--wp--preset--color--cream);
}

/* Featured (left, taller) */
.k7-svc__card--feature {
    grid-row: span 3;
    padding: clamp(2rem, 3.5vw, 3rem);
    justify-content: space-between; min-height: 100%;
}
.k7-svc__num {
    font-family: var(--wp--preset--font-family--display);
    font-style: italic; font-weight: 400;
    font-size: clamp(2.5rem, 1.5rem + 2vw, 4rem);
    color: var(--wp--preset--color--accent);
    line-height: 0.9;
}
.k7-svc__h {
    margin: 0.65rem 0 0.7rem;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600;
    font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem);
    line-height: 1.15; letter-spacing: -0.012em;
}
.k7-svc__p {
    margin: 0 0 1.25rem;
    font-size: 1.0625rem; line-height: 1.55;
    color: color-mix(in oklab, currentColor 82%, transparent);
    max-width: 44ch;
}
.k7-svc__cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600; font-size: 0.78rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}
.k7-svc__cta-arrow { transition: transform 220ms cubic-bezier(0.22,1,0.36,1); }
.k7-svc__card:hover .k7-svc__cta-arrow { transform: translateX(4px); }

/* Small cards (right column, stacked) */
.k7-svc__card--small {
    padding: clamp(1.5rem, 2.5vw, 2rem);
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
}
.k7-svc__card--small .k7-svc__num {
    font-size: clamp(2rem, 1rem + 1.5vw, 2.6rem);
    flex: 0 0 auto;
}
.k7-svc__card--small .k7-svc__h {
    margin: 0 0 0.45rem;
    font-size: clamp(1.1rem, 0.95rem + 0.35vw, 1.3rem);
}
.k7-svc__card--small .k7-svc__p { font-size: 1rem; line-height: 1.55; margin-bottom: 0.8rem; }

@media (max-width: 980px) {
    .k7-svc__grid { grid-template-columns: 1fr; }
    .k7-svc__card--feature { grid-row: auto; }
}
@media (max-width: 540px) {
    .k7-svc__card--small { flex-direction: column; gap: 0.5rem; }
}

/* ─── Promise banner (charcoal narrow band) ─── */
.k7-promise {
    background: var(--wp--preset--color--charcoal);
    color: var(--wp--preset--color--cream);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    text-align: left;
}
.k7-promise__inner {
    max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.25rem);
    display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.k7-promise__text {
    margin: 0;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 500;
    font-size: clamp(1.25rem, 0.9rem + 0.95vw, 1.65rem);
    line-height: 1.2; letter-spacing: -0.012em;
    max-width: 30ch;
}
.k7-promise__text em { font-style: italic; color: var(--wp--preset--color--accent); }
.k7-promise__sub {
    margin: 0.55rem 0 0;
    font-size: 1rem; line-height: 1.55;
    color: color-mix(in oklab, var(--wp--preset--color--cream) 75%, transparent);
    max-width: 42ch;
    font-family: var(--wp--preset--font-family--body);
}
.k7-promise__cta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--wp--preset--color--accent); color: var(--wp--preset--color--cream);
    text-decoration: none;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600; font-size: 0.82rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 1rem 1.4rem; min-height: 48px;
    transition: background 200ms, transform 200ms cubic-bezier(0.22,1,0.36,1);
}
.k7-promise__cta:hover { background: color-mix(in oklab, var(--wp--preset--color--accent) 88%, black); transform: translateY(-1px); }
@media (max-width: 720px) { .k7-promise__inner { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   Iter6 — Delight pass (subtle sophistication, brand-respect)
   Anti-refs strict : no Forever.fr animation overload,
   no Stranger Things VHS kitsch, no playful overshoot.
   Only signature motion = cassette ribbon (figure-eight).
   ───────────────────────────────────────────────────────────── */

/* A) Primary CTA — ribbon figure-eight underline draws on hover */
.k7-mast__cta,
.k7-promise__cta { position: relative; }
.k7-mast__cta::after,
.k7-promise__cta::after {
    content: "";
    position: absolute;
    left: 1rem; right: 1rem; bottom: 0.4rem;
    height: 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 5' preserveAspectRatio='none' fill='none'><path d='M2 2.5 C 12 -0.5, 28 5.5, 40 2.5 S 68 -0.5, 78 2.5' stroke='%23F5F1E8' stroke-width='1.2' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: transform 320ms cubic-bezier(0.22,1,0.36,1), opacity 200ms ease-out;
}
.k7-mast__cta:hover::after, .k7-mast__cta:focus-visible::after,
.k7-promise__cta:hover::after, .k7-promise__cta:focus-visible::after {
    transform: scaleX(1);
    opacity: 0.78;
}

/* B) Section divider ribbon — stroke-dasharray draw on scroll (iter8) */
.k7-ribbon-divider svg path {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.k7-ribbon-divider.is-revealed svg path {
    stroke-dashoffset: 0;
}

/* C) Process number — letter-spacing tighten on item hover */
.k7-process__num {
    transition: letter-spacing 280ms cubic-bezier(0.22,1,0.36,1),
                color 280ms ease-out;
}
.k7-process__item:hover .k7-process__num,
.k7-process__item:focus-within .k7-process__num {
    letter-spacing: -0.058em;
}

/* E) Submit ribbon loader — replaces button text with figure-eight stroke loop */
.k7-btn--loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.k7-btn--loading > * { visibility: hidden; }
.k7-btn--loading::before {
    content: "";
    position: absolute; inset: 0;
    margin: auto;
    width: 44px; height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 18' fill='none'><path d='M 4 9 C 4 3, 26 3, 30 9 C 34 15, 56 15, 56 9 C 56 3, 34 3, 30 9 C 26 15, 4 15, 4 9 Z' stroke='%23F5F1E8' stroke-width='1.4' stroke-linecap='round' stroke-dasharray='160' stroke-dashoffset='160'><animate attributeName='stroke-dashoffset' from='160' to='-160' dur='1.6s' repeatCount='indefinite'/></path></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* H) Photograph restore-on-hover — symbolic "we restore your archives" */
.k7-hero-photo img,
.k7-warmth-photo img,
figure.wp-block-image:has(img[src*="album-hands"]) img,
figure.wp-block-image:has(img[src*="cassette-grid"]) img,
figure.wp-block-image:has(img[src*="sepia-album"]) img,
figure.wp-block-image:has(img[src*="vinyl-tonearm"]) img {
    filter: sepia(0.07) saturate(0.95);
    transition: filter 360ms cubic-bezier(0.22,1,0.36,1);
}
.k7-hero-photo:hover img,
.k7-warmth-photo:hover img,
figure.wp-block-image:has(img[src*="album-hands"]):hover img,
figure.wp-block-image:has(img[src*="cassette-grid"]):hover img,
figure.wp-block-image:has(img[src*="sepia-album"]):hover img,
figure.wp-block-image:has(img[src*="vinyl-tonearm"]):hover img {
    filter: sepia(0) saturate(1.03) contrast(1.02);
}

/* Iter13 — WooCommerce brand alignment (/shop/, /cart/, /checkout/, /my-account/)
   Scoped to body.woocommerce / .wc-block-* / .woocommerce-page to keep
   theme isolation. Charcoal + cream + oxide red brand palette. */

body.woocommerce-page,
body.woocommerce-shop,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
    background: var(--wp--preset--color--cream);
}

/* WC page title (Shop / Cart / Checkout) — Spectral display */
.woocommerce-page .wp-block-query-title,
.woocommerce-page .wp-block-post-title,
.woocommerce-page h1.entry-title,
body.woocommerce-shop h1.alignwide.wp-block-query-title {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600;
    font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.6rem);
    letter-spacing: -0.018em;
    line-height: 1.1;
    margin-block: clamp(2rem, 1rem + 3vw, 3.5rem) 1.5rem;
    color: var(--wp--preset--color--charcoal);
}

/* Breadcrumb — eyebrow style */
.woocommerce-breadcrumb {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--wp--preset--color--charcoal) 55%, transparent);
    margin-block: 1rem 1.5rem;
}
.woocommerce-breadcrumb a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--charcoal) 25%, transparent);
}
.woocommerce-breadcrumb a:hover {
    color: var(--wp--preset--color--accent);
    border-bottom-color: var(--wp--preset--color--accent);
}

/* Product grid cards (block-based) — restrained card with subtle border + hover */
.wc-block-product,
li.product {
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wc-block-product:hover,
li.product:hover {
    border-color: color-mix(in oklab, var(--wp--preset--color--accent) 35%, transparent);
    transform: translateY(-2px);
}
.wc-block-components-product-image,
li.product .wp-post-image {
    border-radius: 3px;
    overflow: hidden;
}
.wc-block-grid__product-title,
li.product h2.woocommerce-loop-product__title {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600;
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    letter-spacing: -0.008em;
    margin-block: 0.6rem 0.3rem;
}

/* Price (loop + single product) — Spectral italic oxide red */
.wc-block-components-product-price,
.woocommerce-Price-amount,
.price {
    font-family: var(--wp--preset--font-family--display);
    font-style: italic;
    font-weight: 400;
    color: var(--wp--preset--color--accent) !important;
    letter-spacing: -0.012em;
}
.wc-block-components-product-price__value,
.price .woocommerce-Price-amount {
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
}
.wc-block-components-product-price ins {
    text-decoration: none;
    font-weight: 500;
}
.wc-block-components-product-price del {
    color: color-mix(in oklab, var(--wp--preset--color--charcoal) 50%, transparent) !important;
    font-style: normal;
    text-decoration: line-through;
    margin-right: 0.4em;
}

/* Sale badge */
.onsale,
.wc-block-components-product-sale-badge {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--cream);
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 0.7rem;
    border-radius: 3px;
    border: 0;
    line-height: 1;
}

/* Notices (success, error, info) */
.wc-block-components-notice-banner,
.woocommerce-notices-wrapper > div,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    border-radius: 4px;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.95rem;
    padding: 1rem 1.2rem;
    border: 1px solid color-mix(in oklab, var(--wp--preset--color--charcoal) 15%, transparent);
    background: color-mix(in oklab, var(--wp--preset--color--charcoal) 4%, var(--wp--preset--color--cream));
    color: var(--wp--preset--color--charcoal);
}
.wc-block-components-notice-banner.is-error,
.woocommerce-error {
    border-color: var(--wp--preset--color--accent);
    background: color-mix(in oklab, var(--wp--preset--color--accent) 6%, var(--wp--preset--color--cream));
}

/* Buttons — Add to cart, View cart, Checkout, Place order, Update */
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.wp-block-button__link.wc-block-cart__submit-button,
button[name="update_cart"],
button.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
    background: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--cream) !important;
    border: 1px solid var(--wp--preset--color--accent) !important;
    border-radius: 3px;
    padding: 0.85rem 1.4rem !important;
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    text-decoration: none;
}
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
button.wc-block-components-checkout-place-order-button:hover {
    background: color-mix(in oklab, var(--wp--preset--color--accent) 88%, black) !important;
    transform: translateY(-1px);
}
/* Add-to-cart / select-amount buttons (block product card) */
.wc-block-components-product-button__button,
a.wp-block-button__link.wc-block-components-product-button__button,
.add_to_cart_button {
    background: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--cream) !important;
    border: 1px solid var(--wp--preset--color--accent) !important;
    border-radius: 3px !important;
    padding: 0.85rem 1.4rem !important;
    font-family: var(--wp--preset--font-family--body) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.wc-block-components-product-button__button:hover,
a.wp-block-button__link.wc-block-components-product-button__button:hover,
.add_to_cart_button:hover {
    background: color-mix(in oklab, var(--wp--preset--color--accent) 88%, black) !important;
    transform: translateY(-1px);
}

/* Product card image — preserve aspect ratio (cards are 16:10, not square) */
.wc-block-product img,
.wc-block-components-product-image img,
li.product .wp-post-image,
.woocommerce-loop-product__link img {
    object-fit: contain !important;
    aspect-ratio: 16/10 !important;
    width: 100% !important;
    height: auto !important;
    background: var(--wp--preset--color--charcoal);
}
/* Secondary / outlined button — "Continue shopping", quantity */
.wc-block-cart-item__remove-link,
.product-remove a,
button.wc-block-components-product-button__button.outlined {
    background: transparent !important;
    color: var(--wp--preset--color--charcoal) !important;
    border-color: color-mix(in oklab, var(--wp--preset--color--charcoal) 25%, transparent) !important;
}

/* Form inputs — cream bg, charcoal border, oxide red focus */
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="number"],
.woocommerce form input[type="password"],
.woocommerce form select,
.woocommerce form textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea {
    background: var(--wp--preset--color--cream);
    border: 1px solid color-mix(in oklab, var(--wp--preset--color--charcoal) 22%, transparent);
    border-radius: 3px;
    padding: 0.7rem 0.85rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.96rem;
    color: var(--wp--preset--color--charcoal);
    min-height: 44px;
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.woocommerce form input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus,
.wc-block-components-text-input input:focus {
    outline: 0;
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp--preset--color--accent) 18%, transparent);
}
.wc-block-components-text-input label,
.woocommerce form .form-row label {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--wp--preset--color--charcoal) 75%, transparent);
}

/* Cart + Checkout tables */
.woocommerce-cart-form table.shop_table,
.wc-block-cart-items {
    border-collapse: collapse;
    background: transparent;
    border: 0;
}
.woocommerce-cart-form table.shop_table th,
.woocommerce-cart-form table.shop_table td {
    border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--charcoal) 12%, transparent);
    padding: 1rem 0.6rem;
    background: transparent;
}
.cart-subtotal,
.order-total,
.wc-block-components-totals-item__value {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600;
}
.order-total .woocommerce-Price-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.4rem !important;
    color: var(--wp--preset--color--accent) !important;
}

/* Quantity input */
.qty,
.wc-block-components-quantity-selector {
    border-radius: 3px;
}

/* My account navigation */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--charcoal) 15%, transparent);
}
.woocommerce-MyAccount-navigation li {
    margin: 0;
}
.woocommerce-MyAccount-navigation li a {
    display: inline-block;
    padding: 0.85rem 1.1rem;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--wp--preset--color--charcoal) 65%, transparent);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 180ms, border-color 180ms;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    color: var(--wp--preset--color--accent);
    border-bottom-color: var(--wp--preset--color--accent);
}

/* Single product page */
.product .images,
.woocommerce-product-gallery {
    background: var(--wp--preset--color--cream);
}
.product_meta {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.82rem;
    color: color-mix(in oklab, var(--wp--preset--color--charcoal) 60%, transparent);
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--charcoal) 12%, transparent);
}
.product_meta .sku_wrapper,
.product_meta .posted_in {
    display: block;
    margin-bottom: 0.3rem;
}

/* Iter12 — Délais & Express section sur /estimer/ + /estimate/ */
.k7-delays { padding-block: clamp(3rem, 1.5rem + 4vw, 5rem); }
.k7-delays .k7-section__lead { max-width: 60ch; margin-bottom: 2.5rem; }
.k7-delays__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}
.k7-delays__item {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 1.5rem 1.5rem 1.6rem;
    background: color-mix(in oklab, var(--wp--preset--color--charcoal) 4%, var(--wp--preset--color--cream));
    border: 1px solid color-mix(in oklab, var(--wp--preset--color--charcoal) 12%, transparent);
    border-radius: 4px;
}
.k7-delays__item--accent {
    background: var(--wp--preset--color--charcoal);
    color: var(--wp--preset--color--cream);
    border-color: var(--wp--preset--color--accent);
}
.k7-delays__num {
    font-family: var(--wp--preset--font-family--display);
    font-style: italic; font-weight: 400;
    font-size: clamp(2.5rem, 1.5rem + 3vw, 3.6rem);
    line-height: 1; letter-spacing: -0.04em;
    color: var(--wp--preset--color--accent);
}
.k7-delays__item--accent .k7-delays__num { color: var(--wp--preset--color--accent); }
.k7-delays__unit {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: color-mix(in oklab, currentColor 65%, transparent);
    margin-bottom: 0.4rem;
}
.k7-delays__what {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.55;
    color: color-mix(in oklab, currentColor 85%, transparent);
}
.k7-delays__what strong {
    font-weight: 600;
    color: currentColor;
}
.k7-delays__note {
    margin: 0;
    font-size: 0.88rem;
    color: color-mix(in oklab, var(--wp--preset--color--charcoal) 60%, transparent);
    max-width: 60ch;
}
@media (max-width: 880px) {
    .k7-delays__list { grid-template-columns: 1fr; }
}

/* Iter11 — Cookie banner button color override (Complianz inherits charcoal
   from theme on transparent-bg buttons). Force cream text on Préférences
   + Enregistrer mes choix. Spec-aligned with brand palette. */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences {
    color: #F5F1E8 !important;
    border-color: #F5F1E8 !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences:hover {
    background: rgba(245, 241, 232, 0.08) !important;
}

/* Iter11 — Voix founder section (A). Patrimonial artisan declaration.
   Cream background, asymmetric editorial quote, signature attribution.
   No fake testimonials (PRODUCT.md "honest by default"). */
.k7-voix {
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--charcoal);
    padding-block: clamp(4rem, 2rem + 6vw, 7rem);
    padding-inline: clamp(1.25rem, 0.5rem + 3vw, 3rem);
}
.k7-voix__inner {
    max-width: 56rem;
    margin: 0 auto;
}
.k7-voix__kicker {
    margin: 0 0 1.6rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}
.k7-voix__quote {
    margin: 0 0 2.5rem;
    padding: 0;
    border: 0;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 500;
    font-size: clamp(1.45rem, 0.95rem + 1.85vw, 2.4rem);
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--wp--preset--color--charcoal);
}
.k7-voix__line { margin: 0 0 0.55rem; }
.k7-voix__line--lead {
    font-style: normal;
}
.k7-voix__line--body {
    color: color-mix(in oklab, var(--wp--preset--color--charcoal) 82%, transparent);
}
.k7-voix__line--tail em {
    font-style: italic;
    font-weight: 400;
    color: var(--wp--preset--color--accent);
}
.k7-voix__sig {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--charcoal) 15%, transparent);
    max-width: 26rem;
}
.k7-voix__name {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.005em;
}
.k7-voix__role {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--wp--preset--color--charcoal) 60%, transparent);
}
@media (max-width: 720px) {
    .k7-voix__quote { font-size: clamp(1.25rem, 1rem + 2.5vw, 1.6rem); }
}

/* Iter10 — Smooth scroll global (B) — anchor links + skip-link polish.
   prefers-reduced-motion override : instant scroll. */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Iter9 — Standard pages heading scale (gifts/, faq/, pourquoi-nous/, etc.)
   Block-theme default H2 = xx-large (64px) — too loud for body sections.
   Cap H2 at 40px, H3 at 26px on .wp-block-post-content scope.
   Hero headings (k7-hero, k7-section custom) keep their own larger scale. */
.wp-block-post-content > .wp-block-heading,
.wp-block-post-content > * > .wp-block-heading {
    font-family: var(--wp--preset--font-family--display);
}
.wp-block-post-content h2.wp-block-heading {
    font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.014em;
    font-weight: 600;
    margin-block: 2.6rem 1rem;
}
.wp-block-post-content h3.wp-block-heading {
    font-size: clamp(1.15rem, 0.95rem + 0.55vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.008em;
    font-weight: 500;
    margin-block: 1.6rem 0.7rem;
}
.wp-block-post-content h4.wp-block-heading {
    font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem);
    line-height: 1.3;
    font-weight: 600;
    margin-block: 1.2rem 0.5rem;
}

/* K) Brand mark — subtle lift on hover (calm, ≤220ms, no infinite loop) */
.k7-mast__brand-mark svg {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.k7-mast__brand:hover .k7-mast__brand-mark svg,
.k7-mast__brand:focus-visible .k7-mast__brand-mark svg {
    transform: translateY(-1px) scale(1.04);
}

/* D) Tape-counter — cassette mechanical counter feel on /estimer totals */
#k7-ttc, #k7-htva { font-variant-numeric: tabular-nums; }
.k7-tape-ch { display: inline-block; }
.k7-tape-shimmer .k7-tape-ch {
    animation: k7-tape-flick 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.k7-tape-shimmer .k7-tape-ch:nth-child(2) { animation-delay: 30ms; }
.k7-tape-shimmer .k7-tape-ch:nth-child(3) { animation-delay: 60ms; }
.k7-tape-shimmer .k7-tape-ch:nth-child(4) { animation-delay: 90ms; }
.k7-tape-shimmer .k7-tape-ch:nth-child(5) { animation-delay: 120ms; }
.k7-tape-shimmer .k7-tape-ch:nth-child(6) { animation-delay: 150ms; }
.k7-tape-shimmer .k7-tape-ch:nth-child(7) { animation-delay: 180ms; }
@keyframes k7-tape-flick {
    0%   { transform: translateY(-0.32em); opacity: 0.35; filter: blur(0.5px); }
    55%  { transform: translateY(0.06em); opacity: 1; filter: blur(0); }
    100% { transform: translateY(0); }
}

/* prefers-reduced-motion : kill motion delight, keep state changes instant */
@media (prefers-reduced-motion: reduce) {
    .k7-mast__cta::after, .k7-promise__cta::after { transition: none; opacity: 0; }
    .k7-ribbon-divider svg path { transition: none; stroke-dashoffset: 0; }
    .k7-process__num { transition: none; }
    .k7-btn--loading::before { animation: none; }
    .k7-tape-shimmer .k7-tape-ch { animation: none; }
    .k7-mast__brand-mark svg { transition: none; }
    .k7-mast__brand:hover .k7-mast__brand-mark svg { transform: none; }
    .k7-hero-photo img,
    .k7-warmth-photo img,
    figure.wp-block-image:has(img[src*="album-hands"]) img,
    figure.wp-block-image:has(img[src*="cassette-grid"]) img,
    figure.wp-block-image:has(img[src*="sepia-album"]) img,
    figure.wp-block-image:has(img[src*="vinyl-tonearm"]) img {
        filter: none; transition: none;
    }
}