/**
 * KineticUltra — "The Kinetic Command" design tokens + page utilities.
 * Loaded on all frontend pages. Pairs with main.css (shared base).
 */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
    --k-background: #0a0a0f;
    --k-surface: #12121a;
    --k-surface-2: #19191f;
    --k-cyan: #00d4ff;
    --k-violet: #7b61ff;
    --k-green: #00ff88;
    --k-danger: #ff3b5c;
    --k-text: #e8e8ed;
    --k-muted: #8b8b9e;
    --k-glass-rgb: 18, 18, 26;
    --k-hairline: rgba(232, 232, 237, 0.05);
    --primary-color: #00d4ff; /* brand primary alias = --k-cyan */
}

html[data-theme="light"] {
    --k-background: #f4f4f8;
    --k-surface: #ffffff;
    --k-surface-2: #ececf1;
    --k-text: #0e0e13;
    --k-muted: #585863;
    --k-glass-rgb: 255, 255, 255;
    --k-hairline: rgba(14, 14, 19, 0.08);

    /* WCAG AA — cyan on light backgrounds: #00D4FF = 1.6:1 (fail), #007A99 = 4.5:1 (pass) */
    --k-cyan: #007a99;
    --primary-color: #007a99;

    /* Legacy tokens used by main.css / woocommerce.css */
    --color-bg-primary: #f4f4f8;
    --color-bg-secondary: #ffffff;
    --color-text: #0e0e13;
    --color-text-secondary: #585863;
    --color-border: rgba(14, 14, 19, 0.08);
}

.kinetic {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    color: var(--k-text);
    background: var(--k-background);
}

.kinetic h1,
.kinetic h2,
.kinetic h3,
.kinetic h4,
.kinetic .k-display {
    font-family: "Space Grotesk", "Inter", sans-serif;
    letter-spacing: -0.02em;
}

/* ---------- Layout ---------- */
/* Sections de page composées via shortcode/bloc avec option `full` : casse la
   largeur du conteneur de contenu (page.php) pour s'étendre bord à bord, comme
   l'accueil. Marges négatives = (50vw - 50%) de chaque côté → largeur = 100vw. */
.k-shortcode-fullbleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Évite un débordement horizontal global induit par le full-bleed. */
.k-page,
.k-page__content { overflow-x: clip; }

/* Canevas pleine largeur (template « Page composée ») : aucune contrainte de
   largeur, les sections s'étendent bord à bord nativement. */
.k-canvas-page { width: 100%; max-width: 100%; overflow-x: clip; }

.k-section {
    padding: 5rem 2rem;
}

@media (min-width: 1024px) {
    .k-section {
        padding: 5rem 4rem;
    }
}

.k-container {
    max-width: 1920px;
    margin-inline: auto;
}

/* ---------- Surfaces & depth ---------- */
.k-bg-background {
    background-color: var(--k-background);
}

.k-bg-surface {
    background-color: var(--k-surface);
}

.k-bg-surface-2 {
    background-color: var(--k-surface-2);
}

.k-glass {
    background: rgba(var(--k-glass-rgb), 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--k-hairline);
    border-radius: 16px;
}

.k-ghost-border {
    border: 1px solid rgba(232, 232, 237, 0.08);
}

.k-ghost-top {
    border-top: 1px solid rgba(232, 232, 237, 0.05);
}

.k-ghost-bottom {
    border-bottom: 1px solid rgba(232, 232, 237, 0.05);
}

.k-neon-cyan {
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.3);
}

.k-neon-violet {
    box-shadow: 0 0 24px rgba(123, 97, 255, 0.28);
}

.k-neon-border-cyan {
    border: 1px solid rgba(0, 212, 255, 0.5);
    box-shadow:
        inset 0 0 10px rgba(0, 212, 255, 0.15),
        0 0 12px rgba(0, 212, 255, 0.2);
}

/* ---------- Text / color tokens ---------- */
.k-text-cyan {
    color: var(--k-cyan);
}

.k-text-violet {
    color: var(--k-violet);
}

.k-text-green {
    color: var(--k-green);
}

.k-text-muted {
    color: var(--k-muted);
}

.k-text-text {
    color: var(--k-text);
}

.k-gradient-text {
    background: linear-gradient(90deg, var(--k-cyan), var(--k-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Typography helpers ---------- */
.k-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--k-cyan);
}

.k-eyebrow .k-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--k-cyan);
    animation: k-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.k-headline-xl {
    font-size: clamp(2.75rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
    font-style: italic;
}

.k-headline {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: -0.02em;
}

.k-lead {
    color: var(--k-muted);
    max-width: 36rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ---------- Buttons ---------- */
.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.75rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border: 0;
    cursor: pointer;
    transition:
        transform 200ms ease,
        background 200ms ease,
        color 200ms ease,
        box-shadow 200ms ease;
}

.k-btn-primary,
.k-btn--primary {
    background: var(--k-cyan);
    color: #000;
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.35);
}

/* Le bouton de commande porte id="place_order" (compat passerelles WC). Cela
   réactivait la règle legacy `#place_order { background: var(--color-accent) }`
   (vert + texte clair, contraste 1.2:1) de woocommerce.css. On la bat en
   spécificité (1,1,0 > 1,0,0) pour conserver l'apparence primaire cyan. */
#place_order.k-btn--primary,
#place_order.k-btn--primary:hover {
    background: var(--k-cyan);
    color: #000;
}

.k-btn-primary:hover,
.k-btn--primary:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 28px rgba(0, 212, 255, 0.55);
}

.k-btn-glass {
    background: rgba(255, 255, 255, 0.05);
    color: var(--k-text);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.k-btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
}

.k-btn-ghost {
    background: rgba(0, 212, 255, 0.08);
    color: var(--k-cyan);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.k-btn-ghost:hover {
    background: var(--k-cyan);
    color: var(--k-background);
}

/* ---------- Hero ---------- */
.k-hero {
    position: relative;
    height: 700px;
    overflow: hidden;
}

/* Hero force dark tokens — le hero a toujours un fond sombre,
   même en light mode. On rescope ici pour éviter texte sombre
   sur fond sombre et gradient blanc opaque. */
.k-hero {
    --k-background: #0a0a0f;
    --k-surface: #12121a;
    --k-surface-2: #19191f;
    --k-text: #e8e8ed;
    --k-muted: #8b8b9e;
    --k-glass-rgb: 18, 18, 26;
    --k-hairline: rgba(232, 232, 237, 0.05);
}

.k-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0; /* explicite — peint sous le contenu */
    background: var(--k-background);
}

.k-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.k-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            var(--k-background) 0%,
            transparent 50%,
            rgba(10, 10, 15, 0.5) 100%
        ),
        linear-gradient(to right, var(--k-background) 0%, transparent 60%);
}

.k-hero__body {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 2rem;
}

@media (min-width: 1024px) {
    .k-hero__body {
        padding: 0 4rem;
    }
}

/* ── Hero carousel (keen-slider override) ── */
.k-hero__body.keen-slider {
    padding: 0; /* padding moved to each .k-hero__slide */
    align-items: stretch;
}

.k-hero__slide {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    min-height: 100%;
    width: 100%;
}

/* On mobile the header is fixed (~64 px). Bias the vertical centering
   downward so the first visible element (k-eyebrow) is not flush with
   the nav bar. padding-top shifts the flex content area; the remaining
   space is still split by align-items:center so content feels centered
   in the lower portion of the hero.
   The right-column panel (signup, perks, image) is hidden on mobile:
   stacking it below the text exceeds the fixed 700px hero height and
   causes overflow. The panel is a desktop enhancement only. */
@media (max-width: 1023px) {
    .k-hero__slide {
        padding-top: 5rem;
        padding-bottom: 2rem;
    }

    .k-hero .k-signup,
    .k-hero .k-hero__perks,
    .k-hero .k-hero__panel-img {
        display: none;
    }
}

@media (min-width: 1024px) {
    .k-hero__slide {
        padding: 0 4rem;
    }
}

/* Slide 2 — stat grid */
.k-hero__stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 24rem;
    width: 100%;
}

.k-hero__stat {
    padding: 1.25rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.k-hero__stat-val {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.k-hero__stat-val small {
    font-size: 1rem;
    font-weight: 500;
}

.k-hero__stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.k-hero__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
    width: 100%;
    position: relative; /* crée un contexte au-dessus de .k-hero__bg (z-index:0) */
    z-index: 1;
}

@media (min-width: 1024px) {
    .k-hero__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.k-hero__stack > * + * {
    margin-top: 1.5rem;
}

.k-signup {
    max-width: 24rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.k-signup__halo {
    position: absolute;
    right: -2.5rem;
    top: -2.5rem;
    font-size: 120px;
    color: rgba(0, 212, 255, 0.05);
    line-height: 1;
    font-weight: 900;
    transition: color 300ms;
    pointer-events: none;
}

.k-signup:hover .k-signup__halo {
    color: rgba(0, 212, 255, 0.1);
}

.k-signup__inner {
    position: relative;
    z-index: 1;
}

.k-signup__input {
    width: 100%;
    background: var(--k-surface-2);
    border: 1px solid var(--k-hairline);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    color: var(--k-text);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    outline: none;
    transition:
        border-color 200ms,
        box-shadow 200ms;
}

.k-signup__input::placeholder {
    color: rgba(139, 139, 158, 0.4);
    letter-spacing: 0.14em;
}

.k-signup__input:focus {
    border-color: var(--k-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.k-signup__form.has-error .k-signup__input,
.k-signup__input[aria-invalid="true"] {
    border-color: var(--k-danger, #ff716c);
    box-shadow: 0 0 0 3px rgba(255, 113, 108, 0.12);
}

.k-signup__form.has-success .k-signup__input {
    border-color: var(--k-green, #00ff88);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.k-signup__msg {
    margin: 0;
    min-height: 1.05rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--k-muted);
    transition: color 160ms;
}

.k-signup__msg[data-state="error"] {
    color: var(--k-danger, #ff716c);
}

.k-signup__msg[data-state="success"] {
    color: var(--k-green, #00ff88);
}

.k-signup__submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.k-signup__form.is-loading .k-signup__submit {
    cursor: progress;
    opacity: 0.7;
}

.k-signup__submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(0, 212, 255, 0.25);
    border-top-color: var(--k-cyan);
    animation: kSignupSpin 0.7s linear infinite;
}

.k-signup__form.is-loading .k-signup__submit-spinner {
    display: inline-block;
}

.k-signup__form.is-loading .k-signup__submit-label {
    opacity: 0.5;
}

@keyframes kSignupSpin {
    to {
        transform: rotate(360deg);
    }
}

.k-pagination {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2; /* au-dessus de .k-hero__body (z-index:1) → dots cliquables */
}

.k-pagination span {
    display: block;
    height: 4px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    width: 16px;
    cursor: pointer;
    transition: background 200ms;
}

.k-pagination span.is-active {
    width: 32px;
    background: var(--k-cyan);
}

.k-pagination span:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ── Pagination — light mode ── */
html[data-theme="light"] .k-pagination span {
    background: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .k-pagination span.is-active {
    background: var(--primary-color);
}

html[data-theme="light"] .k-pagination span:hover {
    background: rgba(0, 212, 255, 0.35);
}

/* ── Light mode — Hero: force dark background unconditionally.
   The hero is always dark by design; the scoped token override on .k-hero
   handles most cases, but explicit declarations prevent any inheritance gap
   (e.g. when no slide Featured Image is set and .k-hero__bg is still rendered
   with only its background color visible). */
html[data-theme="light"] .k-hero {
    background: #0a0a0f;
}

html[data-theme="light"] .k-hero__bg {
    background: #0a0a0f;
}

html[data-theme="light"] .k-hero__bg::after {
    background:
        linear-gradient(
            to top,
            #0a0a0f 0%,
            transparent 50%,
            rgba(10, 10, 15, 0.45) 100%
        ),
        linear-gradient(to right, #0a0a0f 0%, transparent 60%);
}

/* Hero context — light mode: dots must stay visible on dark bg */
html[data-theme="light"] .k-hero .k-pagination span {
    background: rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .k-hero .k-pagination span.is-active {
    background: var(--primary-color);
}

html[data-theme="light"] .k-hero .k-pagination span:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ---------- Trending ---------- */
.k-trend-head {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .k-trend-head {
        flex-direction: row;
        align-items: flex-end;
    }
}

.k-trend-slider {
    padding-bottom: 0.5rem;
}

.k-trend-slider .keen-slider__slide {
    display: flex;
    flex-direction: column;
    /* Let Keen Slider own min-width/max-width/width — no !important overrides.
     Border/hover are on k-prod-card, not on the slide wrapper, to avoid double border. */
    min-height: 100%;
    overflow: visible;
}

/* Static fallback when slide count ≤ 1 — no Keen Slider init, no empty slots. */
.k-keen-static {
    overflow: visible;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.k-keen-static .keen-slider__slide {
    width: auto;
    min-width: 0;
    max-width: 350px;
    flex: 0 1 350px;
}

.k-icon-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.k-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: var(--k-background);
    color: var(--k-muted);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition:
        color 200ms,
        border-color 200ms;
}

.k-icon-btn:hover {
    color: var(--k-cyan);
    border-color: rgba(0, 212, 255, 0.3);
}

/* ---------- Flash deals / Terminal Clearance ---------- */
.k-clearance-head {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.k-clearance-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(123, 97, 255, 0.3),
        transparent
    );
}

.k-countdown {
    display: inline-flex;
    gap: 0.75rem;
    color: var(--k-violet);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-family: "Space Grotesk", sans-serif;
    font-variant-numeric: tabular-nums;
    /* Clear separation from the title block above (badge / headline) so the
       countdown reads as its own line, centred under the .k-headline content. */
    margin-top: 1.5rem;
}

/* Flash-collection header pairs the countdown with its own "FIN DE L'OFFRE
   DANS" label (a .k-text-muted sibling): keep that pair tight — the larger
   margin above is meant for the flash-deals header, where the countdown
   follows the title block directly. */
.k-text-muted + .k-countdown {
    margin-top: 0.25rem;
}

.k-flash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .k-flash-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .k-flash-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Collection page product grid */
.k-products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .k-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .k-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1280px) {
    .k-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.k-flash-card {
    background: var(--k-surface);
    border: 1px solid rgba(123, 97, 255, 0.2);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    transition: border-color 250ms;
}

@media (min-width: 100rem) {
    .k-flash-card {
        flex-direction: row;
        padding: 1.5rem;
        gap: 1.5rem;
    }
}

.k-flash-card:hover {
    border-color: var(--k-violet);
}

.k-flash-card__halo {
    position: absolute;
    right: -0.5rem;
    bottom: -0.5rem;
    font-size: 56px;
    color: rgba(123, 97, 255, 0.05);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

@media (min-width: 768px) {
    .k-flash-card__halo {
        font-size: 100px;
        right: -1rem;
        bottom: -1rem;
    }
}

.k-flash-card__thumb {
    width: 100%;
    height: 7rem;
    flex-shrink: 0;
    background: var(--k-background);
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

@media (min-width: 100rem) {
    .k-flash-card__thumb {
        width: 6rem;
        height: 6rem;
    }
}

.k-flash-card__thumb img,
.k-flash-card__thumb .attachment-product-card,
.k-flash-card__thumb .wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.k-flash-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.k-flash-card__save {
    font-size: 9px;
    font-weight: 700;
    color: var(--k-violet);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.k-flash-card__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .k-flash-card__title {
        font-size: 0.875rem;
    }
}

.k-flash-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.k-flash-card__price .k-now {
    font-size: 1rem;
    font-weight: 900;
    color: var(--k-violet);
}

@media (min-width: 768px) {
    .k-flash-card__price .k-now {
        font-size: 1.25rem;
    }
}

.k-flash-card__price .k-was {
    font-size: 0.75rem;
    color: var(--k-muted);
    text-decoration: line-through;
}

/* ---------- Brand strip ---------- */
.k-brand-strip {
    padding: 3rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0.4;
    transition: opacity 350ms;
}

.k-brand-strip:hover {
    opacity: 1;
}

.k-brand-strip__row {
    filter: grayscale(1);
    transition: filter 350ms;
}

.k-brand-strip:hover .k-brand-strip__row {
    filter: grayscale(0);
}

/* Each slide centers its content vertically */
.k-brand-strip__row .keen-slider__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-brand-strip__item {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.k-brand-strip__item.k-italic {
    font-style: italic;
}

/* Logo image inside a brand slide */
.k-brand-strip__item img {
    max-height: 2.5rem;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Remove default link styling inside brand strip */
.k-brand-strip__item a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* ---------- Layout shell with sidebar ---------- */
.k-shell {
    display: flex;
    min-height: 100vh;
}

.k-shell__main {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

/* ---------- Sidebar ---------- */
.k-sidebar {
    display: none;
    width: 16rem;
    flex-shrink: 0;
    position: sticky;
    top: 63px;
    align-self: flex-start;
    height: calc(100vh - 63px);
    overflow-y: auto;
    padding: 2rem 1rem;
    background: rgba(var(--k-glass-rgb), 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--k-hairline);
    flex-direction: column;
    z-index: 30;
}

@media (min-width: 1024px) {
    .k-sidebar {
        display: flex;
    }
}

.k-sidebar::-webkit-scrollbar {
    width: 0;
}

.k-sidebar__label {
    padding: 0 0.75rem;
    margin-bottom: 1.75rem;
}

.k-sidebar__label h3 {
    font-size: 10px;
    font-weight: 700;
    color: var(--k-muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin: 0;
    font-family: "Inter", sans-serif;
}

.k-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.k-sidebar__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    color: var(--k-muted);
    border: 1px solid transparent;
    transition:
        background 200ms,
        color 200ms,
        border-color 200ms;
}

.k-sidebar__item:hover {
    background: var(--k-hairline);
    color: var(--k-text);
}

.k-sidebar__item.is-active {
    background: rgba(0, 212, 255, 0.1);
    color: var(--k-cyan);
    border-color: rgba(0, 212, 255, 0.3);
}

.k-sidebar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    transition: transform 200ms;
}

.k-sidebar__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.k-sidebar__item:hover .k-sidebar__icon {
    transform: scale(1.1);
}

.k-sidebar__text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.k-sidebar__status {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid var(--k-hairline);
}

.k-sidebar__status-card {
    padding: 1rem;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.k-sidebar__status-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--k-cyan);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 0.5rem;
}

.k-sidebar__status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 10px;
}

.k-sidebar__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--k-green);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
    animation: k-pulse 1.8s ease-in-out infinite;
}

/* ---------- Kinetic Footer ---------- */
.k-footer {
    background: var(--k-background);
    padding: 4rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 1024px) {
    .k-footer {
        padding: 4rem 4rem;
    }
}

.k-footer__grid {
    max-width: 1920px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

@media (min-width: 768px) {
    .k-footer__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.k-footer__brand {
    grid-column: span 2 / span 2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .k-footer__brand {
        grid-column: span 1 / span 1;
    }
}

.k-footer__logo {
    display: inline-flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--k-cyan);
    font-style: italic;
    font-family: "Space Grotesk", sans-serif;
    text-decoration: none;
}
.k-footer__logo-img {
    height: var(--k-logo-h, 36px);
    width: auto;
    display: block;
    object-fit: contain;
}
.k-footer__logo-img--light {
    display: none;
}
html[data-theme="light"] .k-footer__logo-img--dark {
    display: none;
}
html[data-theme="light"] .k-footer__logo-img--light {
    display: block;
}

.k-footer__tagline {
    color: var(--k-muted);
    font-size: 0.75rem;
    line-height: 1.6;
    max-width: 18rem;
    margin: 0;
}

.k-footer__social {
    display: flex;
    gap: 0.75rem;
}

.k-footer__social a {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--k-surface-2);
    border: 1px solid var(--k-hairline);
    border-radius: 6px;
    color: var(--k-text);
    transition: color 200ms;
}

.k-footer__social a:hover {
    color: var(--k-cyan);
}

.k-footer__col h4 {
    color: var(--k-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    margin: 0 0 1.5rem;
}

.k-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.k-footer__col a {
    color: var(--k-muted);
    font-size: 0.75rem;
    transition: color 200ms;
}

.k-footer__col a:hover {
    color: var(--k-cyan);
}

.k-footer__bottom {
    max-width: 1920px;
    margin: 4rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.k-footer__bottom p {
    font-size: 9px;
    font-weight: 700;
    color: rgba(139, 139, 158, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin: 0;
}

/* ---------- Animations ---------- */
@keyframes k-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.85);
    }
}

@keyframes k-ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ============================================================
   PRODUCT PAGE — "Editorial Showcase"
   Inspired by .stitch/designs/03-product-detail.html
   ============================================================ */

/* ---------- Product Page Wrapper ---------- */
.k-product-page {
    background: var(--k-background);
    color: var(--k-text);
}

/* ---------- Hero Section ---------- */
.k-product-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1.5rem 4rem;
    overflow: hidden;
}

.k-product-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

.k-product-hero__glow--violet {
    width: 800px;
    height: 800px;
    background: rgba(123, 97, 255, 0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.k-product-hero__glow--cyan {
    width: 400px;
    height: 400px;
    background: rgba(0, 212, 255, 0.1);
    top: 33%;
    left: 25%;
}

.k-product-hero__grid {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .k-product-hero__grid {
        grid-template-columns: 3fr 6fr 3fr;
        gap: 3rem;
    }
}

/* Mobile order matches the Stitch reference: image first (it's the hero),
 * then editorial info, then the price card. Desktop reverts to natural
 * left/center/right grid order. */
@media (max-width: 1023.98px) {
    .k-product-hero__center {
        order: 1;
    }
    .k-product-hero__left {
        order: 2;
    }
    .k-product-hero__right {
        order: 3;
    }
}

/* ---------- Left Column (Info) ---------- */
.k-product-hero__left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.k-product-hero__eyebrow {
    margin-bottom: 0.5rem;
}

.k-product-hero__tagline {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.k-product-hero__desc {
    color: var(--k-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

.k-product-hero__features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

.k-feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.k-feature-item__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--k-surface);
    border: 1px solid var(--k-hairline);
    color: var(--k-cyan);
    transition: border-color 200ms ease;
}

.k-feature-item:hover .k-feature-item__icon {
    border-color: rgba(0, 212, 255, 0.5);
}

.k-feature-item__text h4 {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
}

.k-feature-item__text p {
    font-size: 0.75rem;
    color: var(--k-muted);
    margin: 0;
}

/* ---------- Center Column (Image) ---------- */
.k-product-hero__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.k-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-product-image__main {
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 1s ease;
}

.k-product-image:hover .k-product-image__main {
    transform: scale(1.05);
}

.k-product-image__aura {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(0, 212, 255, 0.15) 0%,
        transparent 70%
    );
    opacity: 0.5;
    transition: opacity 500ms ease;
    pointer-events: none;
}

.k-product-image:hover .k-product-image__aura {
    opacity: 1;
}

.k-product-gallery {
    display: flex;
    gap: 1rem;
}

.k-product-gallery__thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--k-surface);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition:
        border-color 200ms ease,
        opacity 200ms ease;
}

.k-product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.k-product-gallery__thumb.is-active {
    border-color: var(--k-cyan);
}

.k-product-gallery__thumb:not(.is-active) {
    opacity: 0.5;
}

.k-product-gallery__thumb:not(.is-active):hover {
    opacity: 0.8;
}

/* ---------- Right Column (Card) ---------- */
.k-product-hero__right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.k-product-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.k-product-card__rating {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.k-stars {
    display: flex;
    gap: 0.15rem;
}

.k-product-card__reviews {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--k-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.k-product-card__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.k-product-card__title span {
    color: var(--k-cyan);
}

.k-product-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.k-product-card__price-current {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}

.k-product-card__price-old {
    font-size: 0.875rem;
    color: var(--k-muted);
    text-decoration: line-through;
}

.k-product-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.k-product-card__meta {
    padding-top: 1rem;
    border-top: 1px solid var(--k-hairline);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.k-shipping-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--k-muted);
}

/* ---------- Wishlist / Compare ---------- */
.k-product-actions {
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
}

.k-product-actions__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--k-muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: color 200ms ease;
}

.k-product-actions__btn:hover {
    color: var(--k-cyan);
}

.k-product-actions__btn[data-action="wishlist"]:hover {
    color: var(--k-danger);
}

/* États persistés : is-saved posé par wishlist.js, is-active par compare.js. */
.k-product-actions__btn.is-saved {
    color: var(--k-cyan);
}

.k-product-actions__btn.is-saved svg {
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.45));
}

.k-product-actions__btn.is-active {
    color: var(--k-cyan);
}

/* ---------- Button Variants ---------- */
.k-btn--full {
    width: 100%;
}

.k-btn--glow {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.k-btn--ghost {
    background: transparent;
    color: var(--k-text);
    border: 1px solid var(--k-hairline);
}

.k-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
}

.k-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Specs Section ---------- */
.k-product-specs {
    padding: 6rem 1.5rem;
    background: rgba(18, 18, 26, 0.3);
    border-top: 1px solid var(--k-hairline);
    border-bottom: 1px solid var(--k-hairline);
}

.k-product-specs__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .k-product-specs__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.k-product-specs__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    margin: 0 0 1.5rem;
}

.k-product-specs__desc {
    color: var(--k-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 2.5rem;
    max-width: 40rem;
}

.k-specs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 640px) {
    .k-specs-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.k-specs-group__label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin: 0 0 1rem;
}

.k-specs-group__label--cyan {
    color: var(--k-cyan);
}

.k-specs-group__label--violet {
    color: var(--k-violet);
}

.k-specs-group__label--green {
    color: var(--k-green);
}

.k-spec-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--k-hairline);
}

.k-spec-row__key {
    font-size: 0.8rem;
    color: var(--k-muted);
}

.k-spec-row__value {
    font-size: 0.8rem;
    font-weight: 600;
}

.k-product-specs__visual {
    position: relative;
}

.k-product-specs__image-wrap {
    padding: 0.5rem;
    overflow: hidden;
}

.k-product-specs__image-wrap img {
    width: 100%;
    border-radius: 10px;
}

.k-product-specs__badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.k-product-specs__badge-value {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--k-cyan);
    margin: 0;
}

.k-product-specs__badge-label {
    font-size: 0.65rem;
    color: var(--k-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0.25rem 0 0;
}

/* ---------- Description Section ---------- */
/* Scoped tokens — dark first, then light override via [data-theme="light"]. */
.k-product-description {
    --kpd-panel-bg: rgba(25, 25, 31, 0.6);
    --kpd-panel-divider: rgba(232, 232, 237, 0.06);
    --kpd-eyebrow: var(--k-violet);
    --kpd-text: #e8e8ed;
    --kpd-muted: var(--k-muted);
    --kpd-accent: var(--k-cyan);
    --kpd-accent-soft: rgba(0, 212, 255, 0.08);

    padding: 6rem 1.5rem 4rem;
}

html[data-theme="light"] .k-product-description {
    --kpd-panel-bg: rgba(236, 236, 241, 0.7);
    --kpd-panel-divider: rgba(14, 14, 19, 0.08);
    --kpd-text: #0e0e13;
    --kpd-accent-soft: rgba(0, 124, 153, 0.06);
}

/* Two-column grid mirroring .k-product-specs__grid, but reversed:
   image LEFT, editorial body RIGHT on desktop (≥1024px). */
.k-product-description__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .k-product-description__grid:not(.k-product-description__grid--solo) {
        grid-template-columns: 1fr 1fr;
    }
}

/* No merchant image set — body spans full width, max 880px, centered
   (the section's original single-column editorial layout). */
.k-product-description__grid--solo {
    max-width: 880px;
}

.k-product-description__visual {
    position: relative;
}

.k-product-description__image-wrap {
    padding: 0.5rem;
    overflow: hidden;
}

.k-product-description__image-wrap img {
    width: 100%;
    border-radius: 10px;
    display: block;
}

.k-product-description__header {
    margin: 0 0 2.5rem;
    text-align: left;
}

.k-product-description__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0.75rem 0 0;
    color: var(--kpd-text);
}

/* Plain text container — mirrors .k-product-specs__content (no glass
   card): the data column carries no background/border, just the prose.
   Kept as a hook for spacing/overrides. */
.k-product-description__panel {
    padding: 0;
}

/* Prose container — styles the rich HTML the merchant produces in the WP
 * editor (paragraphs, headings, lists, blockquote, links, emphasis). Kept
 * inside .k-product-description so tokens cascade. */
.k-product-description__prose {
    color: var(--kpd-text);
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.75;
}

.k-product-description__prose > * + * {
    margin-top: 1.25rem;
}

.k-product-description__prose p {
    margin: 0;
    color: var(--kpd-text);
}

.k-product-description__prose h2,
.k-product-description__prose h3,
.k-product-description__prose h4 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 2rem 0 0.75rem;
    color: var(--kpd-text);
}

.k-product-description__prose h2 {
    font-size: 1.5rem;
}
.k-product-description__prose h3 {
    font-size: 1.25rem;
}
.k-product-description__prose h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--kpd-accent);
}

.k-product-description__prose strong {
    color: var(--kpd-text);
    font-weight: 600;
}

.k-product-description__prose em {
    color: var(--kpd-muted);
    font-style: italic;
}

.k-product-description__prose a {
    color: var(--kpd-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 150ms ease;
}

.k-product-description__prose a:hover,
.k-product-description__prose a:focus-visible {
    border-bottom-color: var(--kpd-accent);
}

.k-product-description__prose ul,
.k-product-description__prose ol {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--kpd-text);
}

.k-product-description__prose li + li {
    margin-top: 0.5rem;
}

.k-product-description__prose ul li::marker {
    color: var(--kpd-accent);
}

.k-product-description__prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--kpd-accent-soft);
    border-radius: 12px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.125rem;
    font-style: italic;
    color: var(--kpd-text);
}

.k-product-description__prose img,
.k-product-description__prose figure {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5rem 0;
}

.k-product-description__prose code {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.875em;
    padding: 0.15em 0.4em;
    background: var(--kpd-accent-soft);
    border-radius: 4px;
    color: var(--kpd-accent);
}

@media (max-width: 640px) {
    .k-product-description {
        padding: 4rem 1rem 3rem;
    }
}

/* ---------- Reviews Section ---------- */
.k-product-reviews {
    padding: 6rem 1.5rem;
}

.k-product-reviews__header {
    max-width: 1200px;
    margin: 0 auto 3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.k-product-reviews__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    margin: 1rem 0 0;
}

.k-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--k-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 200ms ease;
}

.k-link:hover {
    color: var(--k-cyan);
}

.k-reviews-list {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.k-review-card {
    position: relative;
    padding: 3rem;
    border-radius: 24px;
}

.k-review-card__bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(to right, rgba(0, 212, 255, 0.05), transparent);
    z-index: 0;
    transition: background 500ms ease;
}

.k-review-card:hover .k-review-card__bg {
    background: linear-gradient(to right, rgba(0, 212, 255, 0.08), transparent);
}

.k-review-card--reverse .k-review-card__bg {
    background: linear-gradient(to left, rgba(123, 97, 255, 0.05), transparent);
}

.k-review-card--reverse:hover .k-review-card__bg {
    background: linear-gradient(to left, rgba(123, 97, 255, 0.08), transparent);
}

.k-review-card__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .k-review-card__grid {
        grid-template-columns: 4fr 8fr;
    }

    .k-review-card--reverse .k-review-card__grid {
        grid-template-columns: 8fr 4fr;
    }

    /* Reverse variant — swap visual order via flex `order` rather than the
   * legacy `direction: rtl` hack. DOM stays image-first, so screen
   * readers still encounter image → content; only the visual layout flips. */
    .k-review-card--reverse .k-review-card__image {
        order: 2;
    }
    .k-review-card--reverse .k-review-card__content {
        order: 1;
    }
}

.k-review-card__image {
    aspect-ratio: 1;
    overflow: hidden;
}

.k-review-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.k-review-card__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.k-review-card__quote {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
}

.k-review-card__author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.k-review-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.k-review-card__avatar--cyan {
    background: rgba(0, 212, 255, 0.15);
    color: var(--k-cyan);
}

.k-review-card__avatar--violet {
    background: rgba(123, 97, 255, 0.15);
    color: var(--k-violet);
}

.k-review-card__name {
    font-weight: 700;
    font-size: 0.875rem;
    margin: 0;
}

.k-review-card__role {
    font-size: 0.7rem;
    color: var(--k-muted);
    margin: 0.15rem 0 0;
}

.k-review-card__stars {
    display: flex;
    gap: 3px;
}

.k-review-card__image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 260px;
    background: linear-gradient(
        135deg,
        var(--k-surface) 0%,
        var(--k-surface-2) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Related Products ---------- */
.k-product-related {
    padding: 6rem 1.5rem;
    background: rgba(18, 18, 26, 0.2);
}

.k-product-related__header {
    text-align: center;
    margin-bottom: 4rem;
}

.k-product-related__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    margin: 1rem 0 0.75rem;
}

.k-product-related__desc {
    color: var(--k-muted);
    font-size: 1rem;
    max-width: 36rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Related products — Keen Slider. The .keen-slider base (flex + overflow)
   comes from the library CSS; we only own per-slide layout here. When the
   slide count ≤ 1, sliders.js swaps in .k-keen-static (centered flex row). */
.k-related-slider {
    padding-bottom: 0.5rem;
}

.k-related-slider .keen-slider__slide {
    display: flex;
    flex-direction: column;
    /* Let Keen Slider own width/min-width — no !important overrides. */
    min-height: 100%;
    overflow: visible;
}

/* Slider nav — a centered control row UNDER the slider. The editorial
   header (.k-product-related__header) stays centered per the Stitch
   design (03-product-detail.html): eyebrow + title + desc, text-center. */
.k-related-nav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

@media (max-width: 767px) {
    .k-related-nav {
        /* Drag works on touch; arrows are redundant on small screens. */
        display: none;
    }
}

.k-related-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.k-related-card__image-wrap {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 0.5rem;
    transition: border-color 500ms ease;
}

.k-related-card__image-wrap--cyan:hover {
    border-color: rgba(0, 212, 255, 0.4);
}

.k-related-card__image-wrap--violet:hover {
    border-color: rgba(123, 97, 255, 0.4);
}

.k-related-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 700ms ease;
}

.k-related-card:hover .k-related-card__image-wrap img {
    transform: scale(1.1);
}

.k-related-card__name {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.k-related-card__cat {
    font-size: 0.65rem;
    color: var(--k-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 0 0.5rem;
}

.k-related-card__price {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--k-cyan);
    margin: 0 0 1rem;
}

.k-related-card__btn {
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid var(--k-hairline);
    color: var(--k-text);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 200ms ease;
}

.k-related-card__btn:hover {
    background: var(--k-cyan);
    color: var(--k-background);
    border-color: var(--k-cyan);
}

/* ---------- Sticky Bottom Bar ---------- */
.k-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--k-hairline);
    padding: 1rem 1.5rem;
    transform: translateY(100%);
    transition: transform 400ms ease;
}

.k-sticky-bar.is-visible {
    transform: translateY(0);
}

.k-sticky-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.k-sticky-bar__product {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.k-sticky-bar__thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--k-hairline);
    background: var(--k-surface);
}

.k-sticky-bar__name {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.k-sticky-bar__price {
    font-size: 0.875rem;
    color: var(--k-cyan);
    font-weight: 700;
    margin: 0.15rem 0 0;
}

.k-sticky-bar__nav {
    display: none;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .k-sticky-bar__nav {
        display: flex;
    }
}

.k-sticky-bar__link {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--k-muted);
    text-decoration: none;
    transition: color 200ms ease;
}

.k-sticky-bar__link:hover {
    color: var(--k-cyan);
}

.k-sticky-bar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.k-qty {
    display: flex;
    align-items: center;
    background: var(--k-surface);
    border: 1px solid var(--k-hairline);
    border-radius: 8px;
    overflow: hidden;
}

.k-qty__btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--k-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: color 200ms ease;
    /* Touch target floor — expands to 44px on narrow screens without layout shift */
    touch-action: manipulation;
}
@media (max-width: 768px) {
    .k-qty__btn {
        width: 44px;
        height: 44px;
    }
}

.k-qty__btn:hover {
    color: var(--k-cyan);
}

.k-qty__input {
    width: 32px;
    background: transparent;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--k-text);
    padding: 0;
}

/* ---------- Eyebrow variant ---------- */
.k-eyebrow--violet {
    color: var(--k-violet);
}

/* ---------- Add to cart form override ---------- */
.k-product-card .cart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.k-product-card .single_add_to_cart_button {
    width: 100%;
    padding: 1rem 1.75rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border: 0;
    cursor: pointer;
    background: var(--k-cyan);
    color: var(--k-background);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    transition:
        transform 200ms ease,
        box-shadow 200ms ease;
}

.k-product-card .single_add_to_cart_button:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
}

.k-product-card .single_add_to_cart_button:active {
    transform: scale(0.98);
}

.k-product-card .quantity {
    display: none;
}

/* ---------- Toast Notification ---------- */
.k-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--k-surface);
    border: 1px solid var(--k-hairline);
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--k-text);
    z-index: 100;
    opacity: 0;
    transition:
        opacity 300ms ease,
        transform 300ms ease;
    pointer-events: none;
    white-space: nowrap;
}

.k-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   CHECKOUT — "Modular Command Center"
   Inspired by .stitch/designs/04-checkout.html
   ============================================================ */

/* ---------- Checkout Layout ---------- */
/* Legacy woocommerce.css adds `display: grid` on body.woocommerce-checkout
   (and form.woocommerce-checkout). Our Modular Command Center is a single
   full-width form, so we reset the grid here. */
body.woocommerce-checkout,
body.woocommerce-cart,
form.woocommerce-checkout,
form.checkout.woocommerce-checkout {
    display: block;
    grid-template-columns: none;
    gap: 0;
}

.k-page--wc {
    min-height: 70vh;
}

.k-page--wc .k-page__content {
    max-width: none;
    padding: 0;
}

.k-checkout {
    max-width: 800px;
    margin: 0 auto;
    padding: 6rem 1.5rem 4rem;
}

/* ---------- Checkout Notices ----------
   Two scenarios:
   1) .k-checkout-notices — server-side wrapper rendered inside <main class="k-checkout">
   2) .woocommerce-NoticeGroup-checkout — AJAX-injected by WC into the <form>
      directly above .k-checkout-bar. We constrain it to the 800px container.
*/
form.woocommerce-checkout > .woocommerce-NoticeGroup-checkout {
    max-width: 800px;
    margin: 9rem auto 0;
    padding: 0 1.5rem;
    background: none;
    border: none;
    display: block;
}

/* Pull the main up when the AJAX notice group is present, so we don't stack
   the fixed-bar offset twice (NoticeGroup clears the bars, main doesn't have to). */
form.woocommerce-checkout > .woocommerce-NoticeGroup-checkout + .k-checkout {
    padding-top: 2rem;
}

.k-checkout-notices {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

form.woocommerce-checkout > .woocommerce-NoticeGroup-checkout > div {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Inner notice styling — high specificity to beat the generic .woocommerce-error flex row rule */
.k-checkout-notices .woocommerce-error,
.k-checkout-notices .woocommerce-message,
.k-checkout-notices .woocommerce-info,
.k-checkout-notices .woocommerce-notice,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-info {
    position: relative;
    display: block;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 1rem 1.25rem 1rem 3rem;
    background: rgba(var(--k-glass-rgb), 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--k-hairline);
    border-left: 3px solid var(--k-danger);
    border-radius: 10px;
    color: var(--k-text);
    font-size: 0.85rem;
    line-height: 1.5;
    list-style: none;
    box-shadow: 0 0 24px rgba(255, 59, 92, 0.08);
}

.k-checkout-notices .woocommerce-message,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-message {
    border-left-color: var(--k-green);
    box-shadow: 0 0 24px rgba(0, 255, 136, 0.08);
}

.k-checkout-notices .woocommerce-info,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-info {
    border-left-color: var(--k-cyan);
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.08);
}

.k-checkout-notices .woocommerce-error::before,
.k-checkout-notices .woocommerce-message::before,
.k-checkout-notices .woocommerce-info::before,
.woocommerce-checkout
    .woocommerce-NoticeGroup-checkout
    .woocommerce-error::before,
.woocommerce-checkout
    .woocommerce-NoticeGroup-checkout
    .woocommerce-message::before,
.woocommerce-checkout
    .woocommerce-NoticeGroup-checkout
    .woocommerce-info::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 18px;
    height: 18px;
    background: var(--k-danger);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E")
        no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E")
        no-repeat center / contain;
}

.k-checkout-notices .woocommerce-message::before,
.woocommerce-checkout
    .woocommerce-NoticeGroup-checkout
    .woocommerce-message::before {
    background: var(--k-green);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

.k-checkout-notices .woocommerce-info::before,
.woocommerce-checkout
    .woocommerce-NoticeGroup-checkout
    .woocommerce-info::before {
    background: var(--k-cyan);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

.k-checkout-notices ul.woocommerce-error,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout ul.woocommerce-error {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.k-checkout-notices ul.woocommerce-error li,
.woocommerce-checkout
    .woocommerce-NoticeGroup-checkout
    ul.woocommerce-error
    li {
    display: block;
    padding: 0.15rem 0;
    margin: 0;
    list-style: none;
}

.k-checkout-notices ul.woocommerce-error li + li,
.woocommerce-checkout
    .woocommerce-NoticeGroup-checkout
    ul.woocommerce-error
    li
    + li {
    border-top: 1px solid var(--k-hairline);
    padding-top: 0.5rem;
    margin-top: 0.35rem;
}

.k-checkout-notices .woocommerce-error strong,
.k-checkout-notices .woocommerce-message strong,
.k-checkout-notices .woocommerce-info strong,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout strong {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.k-checkout-notices a,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout a {
    color: var(--k-cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    transition: border-color 200ms ease;
}

.k-checkout-notices a:hover,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout a:hover {
    border-bottom-color: var(--k-cyan);
}

.k-checkout-notices .button,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .button {
    margin-left: 0.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: 1px solid var(--k-hairline);
    border-radius: 6px;
    color: var(--k-muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    transition:
        color 200ms ease,
        border-color 200ms ease;
}

.k-checkout-notices .button:hover,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .button:hover {
    color: var(--k-cyan);
    border-color: rgba(0, 212, 255, 0.4);
}

/* ---------- Sticky Summary Bar ---------- */
.k-checkout-bar {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(var(--k-glass-rgb), 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    padding: 0.75rem 1.5rem;
}

.k-checkout-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.k-checkout-bar__info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.k-checkout-bar__col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.k-checkout-bar__col--hidden-sm {
    display: none;
}

@media (min-width: 640px) {
    .k-checkout-bar__col--hidden-sm {
        display: flex;
    }
}

.k-checkout-bar__label {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--k-muted);
    margin: 0;
}

.k-checkout-bar__value {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
}

.k-checkout-bar__sep {
    width: 1px;
    height: 32px;
    background: var(--k-hairline);
    display: none;
}

@media (min-width: 640px) {
    .k-checkout-bar__sep {
        display: block;
    }
}

.k-checkout-bar__total {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.k-checkout-bar__amount {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.k-checkout-bar__btn {
    display: none;
}

@media (min-width: 640px) {
    .k-checkout-bar__btn {
        display: inline-flex;
    }
}

/* ---------- Section ---------- */
.k-checkout-section {
    position: relative;
    background: rgba(var(--k-glass-rgb), 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--k-hairline);
    border-radius: 12px;
    padding: 2rem;
}

.k-checkout-section__badge {
    position: absolute;
    top: -12px;
    left: 2rem;
    background: var(--k-background);
    padding: 0.25rem 1rem;
    border: 1px solid var(--k-hairline);
    border-radius: 9999px;
}

/* Light mode: the default cyan .k-eyebrow has poor contrast on a
   near-white pill. Deepen it just inside the section badge. */
html[data-theme="light"] .k-checkout-section__badge {
    background: var(--k-surface-2);
}

html[data-theme="light"] .k-checkout-section__badge .k-eyebrow {
    color: #0088c7;
}

.k-checkout-section__subtitle {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--k-muted);
    margin: 0 0 1.5rem;
}

/* ---------- Neon Separator ---------- */
.k-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--k-cyan), transparent);
    box-shadow: 0 0 15px var(--k-cyan);
    margin: 1.5rem 0;
    opacity: 0.3;
}

/* ---------- Checkout Items (Cart) ---------- */
.k-checkout-items {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.k-checkout-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--k-hairline);
}

.k-checkout-item:last-child {
    border-bottom: none;
}

.k-checkout-item__image {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--k-hairline);
    flex-shrink: 0;
}

.k-checkout-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 200ms ease;
}

.k-checkout-item:hover .k-checkout-item__image img {
    opacity: 1;
}

.k-checkout-item__info {
    flex-grow: 1;
}

.k-checkout-item__name {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
}

.k-checkout-item__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--k-green);
    margin: 0.25rem 0 0;
}

.k-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--k-green);
    animation: k-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Light mode : le néon --k-green (#00ff88) est illisible en texte sur fond
   clair (contraste 1.3:1). On assombrit le LIBELLÉ "In stock" (AA sur blanc)
   tout en gardant le point lumineux décoratif. */
html[data-theme="light"] .k-checkout-item__status {
    color: #047a47;
}

.k-checkout-item__actions {
    text-align: right;
}

.k-checkout-item__price {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.k-checkout-item__qty {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.k-checkout-item__remove {
    color: var(--k-muted);
    transition: color 200ms ease;
}

.k-checkout-item__remove:hover {
    color: var(--k-danger);
}

.k-checkout-item__qty-value {
    font-size: 0.7rem;
    font-family: monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

/* ---------- Floating Label Fields ---------- */
.k-checkout-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    margin-top: 1rem;
}

.k-field {
    position: relative;
}

.k-field--full {
    grid-column: 1 / -1;
}

.k-field__input {
    display: block;
    width: 100%;
    padding: 1.25rem 0 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--k-hairline);
    color: var(--k-text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 200ms ease;
}

.k-field__input:focus {
    border-bottom-color: var(--k-cyan);
}

.k-field__input::placeholder {
    color: transparent;
}

.k-field__label {
    position: absolute;
    left: 0;
    top: 1rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--k-muted);
    pointer-events: none;
    transform-origin: left top;
    transition:
        transform 200ms ease,
        color 200ms ease;
}

.k-field__input:focus ~ .k-field__label,
.k-field__input:not(:placeholder-shown) ~ .k-field__label {
    transform: translateY(-1rem) scale(0.85);
    color: var(--k-cyan);
}

/* Kill Chrome/Webkit autofill white-bg + black-text override.
   The transparent .k-field__input would otherwise show a yellow/white
   block when the browser autofills saved credentials. */
.k-field__input:-webkit-autofill,
.k-field__input:-webkit-autofill:hover,
.k-field__input:-webkit-autofill:focus,
.k-field__input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--k-surface) inset !important;
    -webkit-text-fill-color: var(--k-text) !important;
    caret-color: var(--k-text);
    transition: background-color 99999s ease-in-out 0s;
}

/* ---------- Select field variant ---------- */
.k-field--select {
    position: relative;
}

.k-field__select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 0.25rem;
    background: transparent;
}

.k-field__select:focus {
    border-bottom-color: var(--k-cyan);
    outline: none;
}

/* Label always floated for select (value is always "selected") */
.k-field__label--select {
    transform: translateY(-1rem) scale(0.85);
    color: var(--k-muted);
}
.k-field__select:focus ~ .k-field__label--select {
    color: var(--k-cyan);
}

.k-field__select-arrow {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--k-muted);
    pointer-events: none;
    transition: color 200ms ease;
}
.k-field__select:focus ~ .k-field__select-arrow {
    color: var(--k-cyan);
}

/* ---------- Shipping Options ---------- */
.k-shipping-options {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .k-shipping-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

.k-shipping-card {
    /* Mini-palette scopée (règle projet : pas de rgba blanc brut). En dark, un
       voile clair quasi imperceptible ; en light, une vraie surface grise
       distincte de la section blanche (sinon fond blanc-sur-blanc invisible). */
    --ksc-bg: rgba(232, 232, 237, 0.03);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--ksc-bg);
    border: 1px solid var(--k-hairline);
    border-radius: 12px;
    cursor: pointer;
    transition:
        border-color 200ms ease,
        transform 100ms ease;
}
html[data-theme="light"] .k-shipping-card {
    --ksc-bg: var(--k-surface-2);
}

.k-shipping-card:hover {
    border-color: rgba(0, 212, 255, 0.5);
}

.k-shipping-card:active {
    transform: scale(0.98);
}

.k-shipping-card__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.k-shipping-card__input:checked ~ .k-shipping-card__check::after {
    transform: scale(1);
}

.k-shipping-card__input:checked ~ * {
    opacity: 1;
}

.k-shipping-card__icon {
    color: var(--k-cyan);
    margin-bottom: 0.5rem;
}

.k-shipping-card__label {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.k-shipping-card__desc {
    font-size: 0.6rem;
    color: var(--k-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.k-shipping-card__price {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: auto;
}

.k-shipping-card__check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--k-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-shipping-card__check::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--k-cyan);
    transform: scale(0);
    transition: transform 200ms ease;
}

/* Shipping — unavailable placeholder */
.k-shipping-card--unavailable {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    border-style: dashed;
}
.k-shipping-card--unavailable .k-shipping-card__desc {
    color: var(--k-muted); /* --k-on-surface-variant n'existe pas → fallback token valide */
    font-style: italic;
}

/* ---------- Payment Options ---------- */
.k-payment-options {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .k-payment-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

.k-payment-card {
    position: relative;
    padding: 1.5rem;
    background: rgba(var(--k-glass-rgb), 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid var(--k-hairline);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 300ms ease;
    opacity: 0.6;
    filter: grayscale(1);
}

.k-payment-card:hover {
    opacity: 0.8;
    filter: grayscale(0.5);
}

.k-payment-card.is-active {
    border-color: rgba(0, 212, 255, 0.4);
    border-width: 2px;
    opacity: 1;
    filter: grayscale(0);
}

.k-payment-card__input {
    position: absolute;
    opacity: 0;
}

.k-payment-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.k-payment-card__check {
    width: 20px;
    height: 20px;
    color: var(--k-cyan);
}

.k-payment-card.is-active .k-payment-card__check::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3 5-5'/%3E%3C/svg%3E")
        no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3 5-5'/%3E%3C/svg%3E")
        no-repeat center;
}

.k-payment-logo {
    width: 32px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.k-payment-card__logos {
    display: flex;
    gap: 0.5rem;
}

.k-payment-card__name {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 0 0.25rem;
    /* Couleur explicite via token thème : sans elle, ce <h4> hérite de la
       règle globale WP `h1..h6 { color: var(--wp--preset--color--text) }`
       (#e8e8ed) qui ne suit pas le toggle light → texte clair invisible sur
       carte blanche en light mode. */
    color: var(--k-text);
}

.k-payment-card__desc {
    font-size: 0.6rem;
    color: var(--k-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

/* ---------- Real gateway payment block (WooCommerce-aligned) ---------- */
/* Les <li.wc_payment_method> deviennent transparents à la grille : la carte
   (label) occupe une cellule, le payment_box natif s'étend pleine largeur. */
.k-payment-options.wc_payment_methods { list-style: none; padding: 0; margin: 0 0 2rem; }
.k-payment-options .wc_payment_method { display: contents; }

.k-payment-card__brand { display: inline-flex; color: var(--k-muted); }
.k-payment-card__brand img { max-height: 24px; width: auto; }
.k-payment-card.is-active .k-payment-card__brand { color: var(--k-cyan); }

.k-payment-box { grid-column: 1 / -1; }

/* Apparence : on bat la règle WC par défaut
   `.woocommerce-checkout #payment div.payment_box` (spécificité 1,2,1, fond
   clair #dcd7e2) avec 1,3,1, pour rester dans le thème sombre. */
.woocommerce-checkout #payment div.payment_box.k-payment-box,
#add_payment_method #payment div.payment_box.k-payment-box,
.woocommerce-cart #payment div.payment_box.k-payment-box {
    padding: 1.1rem 1.25rem;
    margin: 0;
    background: rgba(var(--k-glass-rgb), 0.6);
    border: 1px solid var(--k-hairline);
    border-radius: 12px;
    font-size: 0.8125rem;
    color: var(--k-muted);
    line-height: 1.55;
}
/* Neutralise le triangle WC (pointe vers une carte non alignée à la grille). */
.k-payment-box::before { display: none !important; }

.k-payment-box p { margin: 0 0 0.5rem; }
.k-payment-box p:last-child { margin-bottom: 0; }
.k-payment-box label { color: var(--k-text); font-size: 0.8125rem; }
.woocommerce-checkout #payment div.payment_box.k-payment-box input[type="text"],
.woocommerce-checkout #payment div.payment_box.k-payment-box input[type="tel"],
.woocommerce-checkout #payment div.payment_box.k-payment-box input[type="email"],
.woocommerce-checkout #payment div.payment_box.k-payment-box input[type="password"],
.woocommerce-checkout #payment div.payment_box.k-payment-box select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    margin-top: 0.35rem;
    background: var(--k-surface-2);
    color: var(--k-text);
    border: 1px solid var(--k-hairline);
    border-radius: 8px;
}

/* Decorative preview shown to admins when no gateway exists — inert. */
.k-payment-options--preview { pointer-events: none; }
.k-payment-options--preview .k-payment-card { cursor: default; }

/* ---------- Contextual checkout alerts (setup guidance) ---------- */
.k-checkout-alert {
    --kca-accent: var(--k-cyan);
    --kca-bg: rgba(0, 212, 255, 0.07);
    --kca-border: rgba(0, 212, 255, 0.28);
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem;
    border-radius: 12px;
    background: var(--kca-bg);
    border: 1px solid var(--kca-border);
    border-left-width: 3px;
}
.k-checkout-alert--danger {
    --kca-accent: var(--k-danger);
    --kca-bg: rgba(255, 59, 92, 0.08);
    --kca-border: rgba(255, 59, 92, 0.32);
}
.k-checkout-alert--warning {
    --kca-accent: #ffb547;
    --kca-bg: rgba(255, 181, 71, 0.08);
    --kca-border: rgba(255, 181, 71, 0.30);
}
.k-checkout-alert__icon { color: var(--kca-accent); flex-shrink: 0; margin-top: 1px; }
.k-checkout-alert__body { min-width: 0; }
.k-checkout-alert__title {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--k-text);
    margin: 0 0 0.25rem;
}
.k-checkout-alert__msg {
    font-size: 0.8125rem;
    color: var(--k-muted);
    margin: 0;
    line-height: 1.55;
}
.k-checkout-alert__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    background: var(--kca-accent);
    color: #07121a;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.15s ease;
}
.k-checkout-alert__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.k-checkout-alert__note {
    font-size: 0.6875rem;
    color: var(--k-muted);
    opacity: 0.85;
    margin: 0.6rem 0 0;
    font-style: italic;
}

/* Light-mode overrides (accents via tokens, fonds réajustés) */
html[data-theme="light"] .k-checkout-alert {
    --kca-bg: rgba(0, 122, 153, 0.07);
    --kca-border: rgba(0, 122, 153, 0.25);
}
html[data-theme="light"] .k-checkout-alert--danger {
    --kca-bg: rgba(255, 59, 92, 0.07);
    --kca-border: rgba(255, 59, 92, 0.3);
}
html[data-theme="light"] .k-checkout-alert--warning {
    --kca-accent: #b26a00;
    --kca-bg: rgba(178, 106, 0, 0.08);
    --kca-border: rgba(178, 106, 0, 0.28);
}
html[data-theme="light"] .k-checkout-alert__cta { color: #fff; }

/* ---------- Card Fields ---------- */
.k-card-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--k-hairline);
}

/* ---------- Checkout Footer ---------- */
.k-checkout-footer {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.k-checkout-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    opacity: 0.4;
    filter: grayscale(1);
}

.k-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.k-checkout-final {
    width: 100%;
    max-width: 600px;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--k-hairline);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.k-checkout-consent {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
}

.k-checkout-consent input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--k-hairline);
    background: transparent;
    accent-color: var(--k-cyan);
    cursor: pointer;
}

.k-checkout-consent span {
    font-size: 0.7rem;
    color: var(--k-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.5;
    transition: color 200ms ease;
}

.k-checkout-consent:hover span {
    color: var(--k-text);
}

/* ---------- Checkout — mobile ---------- */
@media (max-width: 639px) {
    .k-checkout {
        padding: 5rem 1rem 3rem;
    }

    .k-checkout-section {
        padding: 1.5rem 1rem;
    }

    .k-checkout-fields {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .k-checkout-bar__inner {
        gap: 0.75rem;
    }

    .k-checkout-bar__col--hidden-sm {
        display: none;
    }

    /* Order-review items: 2-col grid so name doesn't overflow */
    .k-checkout .k-checkout-item {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 0.5rem 1rem;
        align-items: start;
    }

    .k-checkout .k-checkout-item__image {
        width: 64px;
        height: 64px;
        grid-row: 1 / 3;
    }

    .k-checkout .k-checkout-item__info {
        min-width: 0;
        overflow-wrap: break-word;
        grid-column: 2;
        grid-row: 1;
    }

    .k-checkout .k-checkout-item__actions {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
}

/* ---------- Button sizes ---------- */
.k-btn--lg {
    padding: 1.25rem 2rem;
    font-size: 0.8rem;
    gap: 0.75rem;
}

.k-text-danger {
    color: var(--k-danger);
}

.k-eyebrow--danger {
    color: var(--k-danger);
}

.k-eyebrow--green {
    color: var(--k-green);
}

.k-eyebrow--cyan {
    color: var(--k-cyan);
}

/* ============================================================
   LOGIN / ACCESS TERMINAL
   Shared primitives: .k-checkout-section, .k-field, .k-btn
   ============================================================ */
.k-login {
    max-width: 480px;
    margin: 0 auto;
    padding: 7rem 1.5rem 4rem;
}

.k-login__card {
    padding: 2.5rem 2rem;
}

.k-login__head {
    margin: 0.5rem 0 2rem;
}

.k-login__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    color: var(--k-text);
}

.k-login__subtitle {
    font-size: 0.85rem;
    color: var(--k-muted);
    margin: 0;
    line-height: 1.5;
}

/* Auth notices ("Incorrect username or password.") rendered inside the card,
 * above the form. Collapse the container when there's no actual notice so it
 * adds no empty gap (the WC hook still emits an empty notices wrapper). */
.k-login__notices {
    margin-top: 1.25rem;
}
.k-login__notices:not(:has(.woocommerce-error, .woocommerce-message, .woocommerce-info)) {
    display: none;
}

.k-login__form,
.k-login form.woocommerce-form-login,
.k-login form.login {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.k-login__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 0.25rem 0 0.75rem;
    flex-wrap: wrap;
}

.k-login__remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--k-muted);
    cursor: pointer;
    user-select: none;
}

.k-login__remember input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--k-hairline);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition:
        border-color 200ms ease,
        background 200ms ease;
}

.k-login__remember input[type="checkbox"]:checked {
    background: var(--k-cyan);
    border-color: var(--k-cyan);
}

.k-login__remember input[type="checkbox"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #000;
    clip-path: polygon(14% 44%, 0% 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.k-login__remember:hover {
    color: var(--k-text);
}

.k-login__link {
    color: var(--k-cyan);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}

.k-login__link:hover {
    border-bottom-color: var(--k-cyan);
}

.k-login__footer {
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--k-hairline);
    text-align: center;
    font-size: 0.75rem;
    color: var(--k-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.k-login__footer .k-login__link {
    margin-left: 0.5rem;
}

/* Inline notice (e.g. "password will be sent by email") */
.k-login__notice {
    margin: 0;
    padding: 0.85rem 1rem;
    background: rgba(0, 212, 255, 0.06);
    border-left: 2px solid rgba(0, 212, 255, 0.4);
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--k-muted);
}

/* ============================================================
   PRODUCT CARD (grid) — "Hero Showcase"
   Adapted from .stitch/designs/all-screens/screen-10-catalog-graphics.html
   ============================================================ */

.k-prod-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(var(--k-glass-rgb), 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--k-hairline);
    transition:
        border-color 500ms ease,
        transform 500ms ease,
        box-shadow 500ms ease;
}

.k-prod-card:hover {
    border-color: var(--k-cyan);
}

/* ---------- Media ---------- */
.k-prod-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 2rem;
    background: linear-gradient(
        135deg,
        var(--k-surface) 0%,
        var(--k-background) 100%
    );
}

.k-prod-card__img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.k-prod-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
    transition: transform 700ms ease;
}

.k-prod-card:hover .k-prod-card__img {
    transform: scale(1.1);
}

.k-prod-card__img--placeholder {
    opacity: 0.25;
    filter: grayscale(1);
    mix-blend-mode: luminosity;
}

/* ---------- Badge ---------- */
.k-pc-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1;
    background: rgba(var(--k-glass-rgb), 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.k-pc-badge--new {
    color: var(--k-cyan);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.k-pc-badge--sale {
    color: var(--k-danger);
    background: rgba(255, 59, 92, 0.2);
    border: 1px solid rgba(255, 59, 92, 0.4);
}

.k-pc-badge--perf {
    color: var(--k-violet);
    background: rgba(123, 97, 255, 0.2);
    border: 1px solid rgba(123, 97, 255, 0.4);
}

/* ---------- Favorite ---------- */
.k-prod-card__fav {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background: none;
    border: none;
    color: var(--k-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 0;
    transition:
        color 200ms ease,
        transform 200ms ease;
}

.k-prod-card__fav:hover {
    color: var(--k-cyan);
    transform: scale(1.1);
}

.k-prod-card__fav.is-saved {
    color: var(--k-cyan);
}

.k-prod-card__fav.is-saved svg {
    fill: var(--k-cyan);
}

/* ---------- Body ---------- */
.k-prod-card__body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.k-prod-card__head {
    margin-bottom: 0.5rem;
}

.k-prod-card__brand {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: var(--k-violet);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.k-prod-card__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0.25rem 0 0;
}

.k-prod-card__title a {
    color: var(--k-text);
    text-decoration: none;
    transition: color 200ms ease;
}

.k-prod-card:hover .k-prod-card__title a {
    color: var(--k-cyan);
}

/* ---------- Specs row ---------- */
.k-prod-card__specs {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--k-hairline);
    list-style: none;
}

.k-prod-card__spec {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 0;
}

.k-prod-card__spec + .k-prod-card__spec {
    border-left: 1px solid var(--k-hairline);
    padding-left: 1rem;
}

.k-prod-card__spec-label {
    font-size: 8px;
    color: var(--k-muted);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.k-prod-card__spec-value {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--k-text);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Foot (price / stock / atc) ---------- */
.k-prod-card__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

.k-prod-card__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.k-prod-card__price {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.k-prod-card__price-old {
    font-size: 0.75rem;
    color: var(--k-muted);
    text-decoration: line-through;
    margin-bottom: 0.15rem;
    line-height: 1;
}

.k-prod-card__price-old .woocommerce-Price-amount {
    color: inherit;
}

.k-prod-card__price-current {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--k-cyan);
    line-height: 1;
}

.k-prod-card__price-current .woocommerce-Price-amount {
    color: inherit;
}

.k-prod-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--k-cyan);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.k-prod-card__rating span {
    color: var(--k-muted);
}

.k-prod-card__rating small {
    font-size: inherit;
    font-weight: inherit;
    opacity: 0.9;
}

/* ---------- Stock segments ---------- */
.k-prod-card__stock {
    margin-bottom: 1.5rem;
}

.k-prod-card__stock-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}

.k-prod-card__stock--optimal .k-prod-card__stock-head {
    color: var(--k-green);
}

.k-prod-card__stock--moderate .k-prod-card__stock-head {
    color: var(--k-violet);
}

.k-prod-card__stock--critical .k-prod-card__stock-head {
    color: var(--k-danger);
}

.k-prod-card__stock--out .k-prod-card__stock-head {
    color: var(--k-muted);
}

.k-prod-card__stock-segments {
    display: flex;
    gap: 0.25rem;
    height: 6px;
}

.k-prod-card__stock-seg {
    flex: 1;
    border-radius: 9999px;
    background: rgba(var(--k-on-surface-rgb, 232, 232, 237), 0.1);
}

.k-prod-card__stock--optimal .k-prod-card__stock-seg.is-filled {
    background: var(--k-green);
    box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
}

.k-prod-card__stock--moderate .k-prod-card__stock-seg.is-filled {
    background: var(--k-violet);
}

.k-prod-card__stock--critical .k-prod-card__stock-seg.is-filled {
    background: var(--k-danger);
    box-shadow: 0 0 8px rgba(255, 59, 92, 0.4);
}

/* ---------- Add to cart ---------- */
/* Text stays dark regardless of theme: the cyan fill always reads best
   with a near-black foreground, even in light mode.
   Selectors are scoped under .k-prod-card so they outrank the generic
   .add_to_cart_button rule in woocommerce.css (which is enqueued after
   kinetic.css and would otherwise win the specificity race). */
.k-prod-card .k-prod-card__atc {
    width: 100%;
    padding: 1rem;
    background: var(--k-cyan);
    color: #0a0a0f;
    border: none;
    border-radius: 10px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
    transition:
        box-shadow 300ms ease,
        transform 200ms ease,
        background 200ms ease;
    transform: none;
}

.k-prod-card .k-prod-card__atc:hover {
    background: var(--k-cyan);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.45);
    transform: none;
}

.k-prod-card .k-prod-card__atc:active {
    transform: translateY(1px);
}

.k-prod-card .k-prod-card__atc--disabled {
    background: rgba(139, 139, 158, 0.15);
    color: var(--k-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.k-prod-card .k-prod-card__atc--disabled:hover {
    background: rgba(139, 139, 158, 0.15);
    box-shadow: none;
}

/* ---------- Action row: compare + ATC side by side ---------- */
.k-prod-card__actions {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.k-prod-card .k-prod-card__actions .k-prod-card__atc {
    flex: 1;
    width: auto;
}

.k-prod-card__compare {
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--k-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 200ms;
}

.k-prod-card__compare svg {
    width: 16px;
    height: 16px;
}

.k-prod-card__compare:hover {
    color: var(--k-cyan);
}

.k-prod-card__compare.is-active {
    color: var(--k-cyan);
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
}

/* Hide the compare button only on the product columns already in the grid
   (product-column.php reuses product-card.php, so the button would offer to
   add a product that's already being compared). The related-units carousel
   (.k-compare__related-slide) keeps its button so those products can be
   added to the comparison. */
.k-compare__col .k-prod-card__compare,
.k-compare__col .k-prod-list__compare {
    display: none;
}

/* ---------- Global compare dock — collapsible, mobile-first ----------
   Wrapper carries position only (set inline so it survives a stale CSS
   cache); the two visual states (trigger pill / action panel) are pure CSS,
   swapped by the `.is-collapsed` class. Shrink-to-fit (fixed + width:auto)
   so drag measurements match the visible state. */
.k-compare-bar {
    z-index: 200;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none; /* JS owns drag gestures; no native page scroll */
    --kc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.k-compare-bar[hidden] { display: none; }
.k-compare-bar.is-dragging { cursor: grabbing; }
.k-compare-bar.is-dragging .k-compare-bar__trigger,
.k-compare-bar.is-dragging .k-compare-bar__panel { animation: none; }

/* State machine */
.k-compare-bar__trigger,
.k-compare-bar__panel { display: none; }
.k-compare-bar.is-collapsed .k-compare-bar__trigger { display: inline-flex; }
.k-compare-bar:not(.is-collapsed) .k-compare-bar__panel { display: flex; }

/* ---- Collapsed trigger: the at-a-glance pill ---- */
.k-compare-bar__trigger {
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    background: rgba(var(--k-glass-rgb), 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 0;
    border-radius: 9999px;
    box-shadow:
        0 14px 44px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(0, 212, 255, 0.14);
    color: var(--k-text);
    cursor: pointer;
    white-space: nowrap;
    animation: kCompareIn 360ms var(--kc-ease) both;
}
.k-compare-bar__trigger:hover {
    box-shadow:
        0 16px 52px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(0, 212, 255, 0.32);
}
.k-compare-bar__trigger:active { transform: scale(0.97); }

.k-compare-bar__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.22), rgba(123, 97, 255, 0.22));
    color: var(--k-cyan);
}
.k-compare-bar__icon svg { width: 18px; height: 18px; }

.k-compare-bar__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--k-text);
}

.k-compare-bar__badge {
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--k-cyan);
    color: #04141a;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.45);
}
.k-compare-bar__badge.is-bump { animation: kCompareBump 380ms var(--kc-ease); }

/* ---- Expanded panel: bottom-sheet style on mobile ---- */
.k-compare-bar__panel {
    flex-direction: column;
    gap: 0.85rem;
    width: min(86vw, 340px);
    max-width: calc(100vw - 3rem);
    padding: 0.85rem 0.95rem 0.95rem;
    background: rgba(var(--k-glass-rgb), 0.96);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-radius: 20px;
    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(0, 212, 255, 0.14);
    animation: kCompareIn 320ms var(--kc-ease) both;
}

.k-compare-bar__head { display: flex; align-items: center; gap: 0.6rem; }
.k-compare-bar__heading {
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--k-cyan);
}
.k-compare-bar__meta {
    margin-right: auto;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: var(--k-muted);
}
.k-compare-bar__meta .k-compare-bar__count { color: var(--k-text); font-weight: 700; }

.k-compare-bar__close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--k-muted);
    cursor: pointer;
    transition: color 180ms, background 180ms;
}
.k-compare-bar__close:hover { color: var(--k-cyan); background: rgba(0, 212, 255, 0.1); }
.k-compare-bar__close svg { width: 16px; height: 16px; }

.k-compare-bar__actions { display: flex; gap: 0.6rem; }

.k-compare-bar__clear {
    flex-shrink: 0;
    height: 44px;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 12px;
    background: var(--k-surface-2);
    color: var(--k-muted);
    font-family: "Space Grotesk", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 180ms, transform 120ms;
}
.k-compare-bar__clear:hover { color: var(--k-text); }
.k-compare-bar__clear:active { transform: scale(0.97); }

.k-compare-bar__go {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1.1rem;
    border-radius: 12px;
    background: var(--k-cyan);
    color: #04141a;
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 0 22px rgba(0, 212, 255, 0.4);
    transition: transform 180ms, box-shadow 180ms;
}
.k-compare-bar__go:hover { transform: translateY(-1px); box-shadow: 0 0 32px rgba(0, 212, 255, 0.6); }
.k-compare-bar__go:active { transform: translateY(0); }
.k-compare-bar__go svg { flex-shrink: 0; }

/* On wider screens the dock is a touch more compact */
@media (min-width: 1024px) {
    .k-compare-bar__panel { width: 320px; }
}

/* Light mode: brand cyan darkens to teal — flip text on it to white */
html[data-theme="light"] .k-compare-bar__badge,
html[data-theme="light"] .k-compare-bar__go { color: #ffffff; }

@keyframes kCompareIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes kCompareBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .k-compare-bar__trigger,
    .k-compare-bar__panel,
    .k-compare-bar__badge.is-bump { animation: none; }
}

/* ---------- Light-mode overrides ----------
   mix-blend-mode: screen lightens against dark — on white it washes
   the image out. We fall back to normal blend and a softer gradient. */
html[data-theme="light"] .k-prod-card {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 2px rgba(14, 14, 19, 0.04);
}

html[data-theme="light"] .k-prod-card:hover {
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.12);
}

html[data-theme="light"] .k-prod-card__media {
    background: linear-gradient(135deg, #f4f4f8 0%, #e5e5ec 100%);
}

html[data-theme="light"] .k-prod-card__img {
    mix-blend-mode: normal;
}

html[data-theme="light"] .k-prod-card__img--placeholder {
    opacity: 0.35;
    mix-blend-mode: normal;
}

html[data-theme="light"] .k-prod-card__brand {
    color: #5a45d0;
    /* violet readable on white */
}

html[data-theme="light"] .k-prod-card__spec-label {
    color: var(--k-muted);
}

html[data-theme="light"] .k-prod-card__price-current {
    color: #0088c7;
    /* deeper cyan for AA contrast on light surface */
}

html[data-theme="light"] .k-prod-card__rating {
    color: #0088c7;
}

html[data-theme="light"] .k-pc-badge {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(14, 14, 19, 0.1);
}

html[data-theme="light"] .k-pc-badge--new {
    color: #0088c7;
    border-color: rgba(0, 136, 199, 0.35);
}

html[data-theme="light"] .k-pc-badge--sale {
    color: #d91e3f;
    background: rgba(255, 59, 92, 0.12);
    border-color: rgba(217, 30, 63, 0.35);
}

html[data-theme="light"] .k-pc-badge--perf {
    color: #5a45d0;
    background: rgba(123, 97, 255, 0.1);
    border-color: rgba(90, 69, 208, 0.35);
}

html[data-theme="light"] .k-prod-card__fav {
    color: var(--k-muted);
}

/* Light-mode fav saved state inherits --k-cyan override (#007A99) — no override needed */

html[data-theme="light"] .k-prod-card__stock-seg {
    background: rgba(14, 14, 19, 0.08);
}

html[data-theme="light"] .k-prod-card__stock--optimal .k-prod-card__stock-head {
    color: #009a5a;
}

html[data-theme="light"]
    .k-prod-card__stock--moderate
    .k-prod-card__stock-head {
    color: #5a45d0;
}

html[data-theme="light"]
    .k-prod-card__stock--critical
    .k-prod-card__stock-head {
    color: #d91e3f;
}

html[data-theme="light"]
    .k-prod-card__stock--optimal
    .k-prod-card__stock-seg.is-filled {
    background: #00c07a;
    box-shadow: none;
}

html[data-theme="light"]
    .k-prod-card__stock--moderate
    .k-prod-card__stock-seg.is-filled {
    background: #7b61ff;
}

html[data-theme="light"]
    .k-prod-card__stock--critical
    .k-prod-card__stock-seg.is-filled {
    background: #d91e3f;
    box-shadow: none;
}

/* ============================================================
 * Product Detail — Light theme overrides.
 *
 * The page is dark-first. In light mode we:
 *  - swap dark section bands for a surface-2 stripe
 *  - dampen the hero glow halos (they read as smudges on white)
 *  - introduce darker variants of the neon accents (cyan/violet/
 *    green/danger) for inline text + icons — the neon stays the
 *    surface color, never the foreground text
 *  - give feature-icon chips and gallery thumbs a visible
 *    surface so they don't sit white-on-white
 *  - rebuild the ghost-button hover with an ink wash instead
 *    of rgba(255,255,255,…) which is invisible on white
 * Scoped under `.k-product-page` to avoid bleeding into shop loops.
 * ============================================================ */
html[data-theme="light"] .k-product-page {
    --kp-cyan: #007a99;
    --kp-violet: #5b41d6;
    --kp-green: #1f8a4f;
    --kp-danger: #c9213d;
}

html[data-theme="light"] .k-product-hero__glow--violet {
    background: rgba(123, 97, 255, 0.06);
}
html[data-theme="light"] .k-product-hero__glow--cyan {
    background: rgba(0, 212, 255, 0.06);
}

html[data-theme="light"] .k-product-image__aura {
    background: radial-gradient(
        circle at center,
        rgba(0, 122, 153, 0.14) 0%,
        transparent 70%
    );
}

html[data-theme="light"] .k-feature-item__icon {
    background: var(--k-surface-2);
    color: var(--kp-cyan);
    border-color: var(--k-hairline);
}
html[data-theme="light"] .k-feature-item:hover .k-feature-item__icon {
    border-color: rgba(0, 122, 153, 0.5);
}

html[data-theme="light"] .k-product-gallery__thumb {
    background: var(--k-surface-2);
}
html[data-theme="light"] .k-product-gallery__thumb.is-active {
    border-color: var(--kp-cyan);
}

html[data-theme="light"] .k-product-card__title span {
    color: var(--kp-cyan);
}

html[data-theme="light"] .k-product-page .k-product-actions__btn:hover {
    color: var(--kp-cyan);
}
html[data-theme="light"]
    .k-product-page
    .k-product-actions__btn[data-action="wishlist"]:hover {
    color: var(--kp-danger);
}

html[data-theme="light"] .k-product-page .k-btn--glow {
    box-shadow: 0 4px 16px rgba(0, 122, 153, 0.18);
}
html[data-theme="light"] .k-product-page .k-btn--ghost:hover {
    background: rgba(14, 14, 19, 0.05);
}

html[data-theme="light"] .k-product-specs {
    background: var(--k-surface-2);
}

html[data-theme="light"] .k-specs-group__label--cyan {
    color: var(--kp-cyan);
}
html[data-theme="light"] .k-specs-group__label--violet {
    color: var(--kp-violet);
}
html[data-theme="light"] .k-specs-group__label--green {
    color: var(--kp-green);
}

html[data-theme="light"] .k-product-specs__badge {
    border-color: rgba(0, 122, 153, 0.35);
}
html[data-theme="light"] .k-product-specs__badge-value {
    color: var(--kp-cyan);
}

html[data-theme="light"] .k-review-card__bg {
    background: linear-gradient(to right, rgba(0, 122, 153, 0.08), transparent);
}
html[data-theme="light"] .k-review-card:hover .k-review-card__bg {
    background: linear-gradient(to right, rgba(0, 122, 153, 0.14), transparent);
}
html[data-theme="light"] .k-review-card--reverse .k-review-card__bg {
    background: linear-gradient(to left, rgba(91, 65, 214, 0.08), transparent);
}
html[data-theme="light"] .k-review-card--reverse:hover .k-review-card__bg {
    background: linear-gradient(to left, rgba(91, 65, 214, 0.14), transparent);
}

html[data-theme="light"] .k-review-card__avatar--cyan {
    background: rgba(0, 122, 153, 0.12);
    color: var(--kp-cyan);
}
html[data-theme="light"] .k-review-card__avatar--violet {
    background: rgba(91, 65, 214, 0.12);
    color: var(--kp-violet);
}

html[data-theme="light"] .k-product-page .k-link:hover {
    color: var(--kp-cyan);
}

html[data-theme="light"] .k-product-related {
    background: var(--k-surface-2);
}

/* Editorial typography — force the light text token so WP/WC heading
 * bleed-through (Twenty-Twenty, wp-block-h2, body.single-product
 * cascades) cannot make them appear muted. Same defensive pattern as
 * kinetic-page.css for prose. Covers section titles + hero tagline +
 * feature-card titles + related-card names, all of which rely on
 * inheritance for their color. */
html[data-theme="light"] .k-product-card__title,
html[data-theme="light"] .k-product-specs__title,
html[data-theme="light"] .k-product-reviews__title,
html[data-theme="light"] .k-product-related__title,
html[data-theme="light"] .k-product-hero__tagline,
html[data-theme="light"] .k-feature-item__text h4,
html[data-theme="light"] .k-related-card__name {
    color: var(--k-text);
}

/* Sticky bottom bar — the dark rgba background was tuned for a near-black
 * page. On a #F4F4F8 surface it reads as a heavy black slab clipped to the
 * viewport. Rebuild as a light glass with the same blur, swap thumb chip
 * to surface-2 (it was sitting white-on-white), and route the cyan accent
 * (price + link hover) through the assombri palette for AA contrast. */
html[data-theme="light"] .k-sticky-bar {
    background: rgba(244, 244, 248, 0.92);
    border-top-color: var(--k-hairline);
}
html[data-theme="light"] .k-sticky-bar__thumb {
    background: var(--k-surface-2);
    border-color: var(--k-hairline);
}
html[data-theme="light"] .k-sticky-bar__price {
    color: var(--kp-cyan);
}
html[data-theme="light"] .k-sticky-bar__link:hover {
    color: var(--kp-cyan);
}

/* The segmented stock block carries a 1.5rem bottom margin tuned for the
 * product card body. On the detail page it sits between price and CTAs as
 * a flex item of .k-product-card, which already provides 1.25rem gap —
 * neutralise the legacy margin so spacing stays uniform. */
.k-product-card .k-prod-card__stock {
    margin-bottom: 0;
}

/* ---------- Light mode — typography tokens ---------- */
html[data-theme="light"] .k-flash-card__title,
html[data-theme="light"] .k-headline {
    color: var(--k-text);
}

html[data-theme="light"] .k-checkout-item__name {
    color: var(--k-text);
}

/* ---------- Accessibility — skip link ---------- */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--k-cyan);
    color: var(--k-bg);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    z-index: 10000;
    white-space: nowrap;
}
.skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 2px solid var(--k-cyan);
    outline-offset: 2px;
}

/* ---------- Search results page ---------- */
.k-search-page {
    padding: 5rem 0 4rem;
}
.k-search-page__header {
    max-width: 1280px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.k-search-page__eyebrow {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--k-muted);
    margin-bottom: 0.75rem;
}
.k-search-page__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--k-text);
    margin: 0 0 0.5rem;
}
.k-search-page__title mark {
    background: none;
    color: var(--k-cyan);
}
.k-search-page__count {
    font-size: 0.8125rem;
    color: var(--k-muted);
}
.k-search-page__form {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
    max-width: 560px;
}
.k-search-page__input {
    flex: 1;
    background: var(--k-surface-2);
    border: 1px solid var(--k-hairline);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--k-text);
    font-family: "Inter", sans-serif;
    font-size: 0.9375rem;
}
.k-search-page__input:focus {
    outline: none;
    border-color: var(--k-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}
.k-search-page__submit {
    background: var(--k-cyan);
    color: var(--k-bg);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.k-search-page__body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.k-search-page__section-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--k-muted);
    border-bottom: 1px solid var(--k-hairline);
    padding-bottom: 0.75rem;
    margin: 0 0 1.75rem;
}
.k-search-page__section-title span {
    color: var(--k-cyan);
}
.k-search-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.k-search-no-results {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--k-muted);
    font-family: "Space Grotesk", sans-serif;
}
.k-search-no-results__code {
    font-size: 3rem;
    font-weight: 700;
    color: var(--k-surface-3);
    display: block;
    margin-bottom: 1rem;
}
.k-search-no-results__msg {
    font-size: 1rem;
    margin-bottom: 2rem;
}
.k-search-no-results__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--k-cyan);
    color: var(--k-bg);
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

/* ---------- Archive page ---------- */
.k-archive-header {
    background: var(--k-surface-1);
    border-bottom: 1px solid var(--k-hairline);
    padding: 4rem 0 3rem;
    margin-bottom: 3rem;
}
.k-archive-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.k-archive-header__type {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--k-cyan);
    margin-bottom: 0.5rem;
}
.k-archive-header__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--k-text);
    margin: 0 0 0.75rem;
}
.k-archive-header__desc {
    color: var(--k-muted);
    font-size: 0.9375rem;
    max-width: 640px;
    line-height: 1.6;
}
/* Fil d'Ariane — calqué sur .k-catalog__crumbs (tokens existants,
   s'adapte au mode clair via --k-muted / --k-text / --k-cyan). */
.k-archive-header__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--k-muted);
}
.k-archive-header__crumbs a {
    color: var(--k-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.k-archive-header__crumbs a:hover { color: var(--k-text); }
.k-archive-header__crumbs svg { width: 12px; height: 12px; opacity: 0.6; }
.k-archive-header__crumb-current { color: var(--k-cyan); }

/* Light mode — search & archive */
html[data-theme="light"] .k-search-page__input {
    background: #fff;
    color: var(--k-text);
}
html[data-theme="light"] .k-archive-header {
    background: var(--k-surface-1);
}

/* =========================================================
   WCAG AA — Focus rings
   Applied with :focus-visible so mouse/touch users don't see
   the ring but keyboard users always do.
   ========================================================= */

/* Global button (k-btn family) */
.k-btn:focus-visible,
.k-btn-primary:focus-visible,
.k-btn--primary:focus-visible,
.k-btn-glass:focus-visible,
.k-btn--glass:focus-visible,
.k-btn-ghost:focus-visible,
.k-btn--ghost:focus-visible,
.k-btn--lg:focus-visible,
.k-btn--glow:focus-visible {
    outline: 2px solid rgba(0, 212, 255, 0.8);
    outline-offset: 3px;
}

/* Qty stepper buttons */
.k-qty__btn:focus-visible {
    outline: 2px solid rgba(0, 212, 255, 0.8);
    outline-offset: 2px;
}

/* Heart / fav button */
.k-prod-card__fav:focus-visible {
    outline: 2px solid rgba(0, 212, 255, 0.8);
    outline-offset: 3px;
    border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════════════════
   Language switcher (.k-lang) — header dropdown + footer inline
   Tokens scoped : mini-palette --klang-* + override light, jamais de
   rgba(255,255,255,x) direct (cf. convention dark/light du thème).
   ══════════════════════════════════════════════════════════════════════ */
.k-lang {
    --klang-text: #acaab1;
    --klang-text-strong: #f9f5fd;
    --klang-accent: #00d4ff;
    --klang-panel: rgba(25, 25, 31, 0.85);
    --klang-panel-hover: #25252d;
    --klang-ghost: rgba(118, 116, 123, 0.15);
}
html[data-theme="light"] .k-lang {
    --klang-text: #5d5b63;
    --klang-text-strong: #17161b;
    --klang-accent: #007da3;
    --klang-panel: rgba(248, 247, 250, 0.92);
    --klang-panel-hover: #ececf1;
    --klang-ghost: rgba(72, 71, 77, 0.15);
}

/* ── Header : dropdown <details> (zéro JS) ─────────────────────────── */
.k-lang--header {
    position: relative;
}
.k-lang--header > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    padding: 0 0.6rem;
}
.k-lang--header > summary::-webkit-details-marker {
    display: none;
}
.k-lang__current {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--klang-text-strong);
}
.k-lang__menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 220;
    min-width: 170px;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    border-radius: 12px;
    background: var(--klang-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 0 0 1px var(--klang-ghost), 0 0 30px rgba(0, 212, 255, 0.08);
}
.k-lang__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--klang-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms linear, color 150ms linear;
}
a.k-lang__option:hover,
a.k-lang__option:focus-visible {
    background: var(--klang-panel-hover);
    color: var(--klang-text-strong);
}
.k-lang__option--current {
    color: var(--klang-text-strong);
}
.k-lang__option--current .k-lang__code {
    color: var(--klang-accent);
}
.k-lang__code {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    min-width: 1.6rem;
}

/* ── Footer : liste inline FR · EN ─────────────────────────────────── */
.k-lang--footer {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}
.k-lang--footer .k-lang__item {
    color: var(--klang-text);
    text-decoration: none;
    transition: color 150ms linear;
}
.k-lang--footer a.k-lang__item:hover,
.k-lang--footer a.k-lang__item:focus-visible {
    color: var(--klang-accent);
}
.k-lang--footer .k-lang__item--current {
    color: var(--klang-accent);
}
.k-lang__sep {
    color: var(--klang-ghost);
}

/* ── Drawer mobile : rangée de pills tactiles ──────────────────────── */
.k-lang--mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    box-shadow: 0 -1px 0 var(--klang-ghost);
}
.k-lang__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 8px;
    background: var(--klang-panel-hover);
    font-size: 0.85rem;
    color: var(--klang-text);
    text-decoration: none;
    transition: color 150ms linear, box-shadow 150ms linear;
}
a.k-lang__pill:hover,
a.k-lang__pill:focus-visible {
    color: var(--klang-text-strong);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.15);
}
.k-lang__pill--current {
    color: var(--klang-text-strong);
    box-shadow: 0 0 0 1px var(--klang-accent);
}
.k-lang__pill--current .k-lang__code {
    color: var(--klang-accent);
}