/* ==========================================================================
   Promotexo UI — design system (plain CSS, no build step)
   Loaded AFTER /assets/css/app.min.css (Tailwind stays available).
   Every component is prefixed `px-` to avoid clashes with Tailwind utilities.
   Never create class names like `px-1`, `px-4`: those are Tailwind paddings.

   COLOUR DOSAGE (owner rule, BRIEF4): the site is black / white / #F9F9F9.
   No tinted backgrounds, no coloured fills on pills/tabs/buttons/steps/cards.
   Colour is ONLY allowed as small accents:
     - the 3px signature .px-gradient-bar (under header, top of footer) and at
       most ONE extra gradient element per page (.px-card--feature, .px-price-panel,
       .px-product-card--featured — pick one);
     - .px-highlight / .px-highlight--gradient on ONE word of a big title
       (max 1 per section, 4-5 per page), .px-eyebrow overline trait;
     - text-only key info: .px-text-teal (En stock, BAT validé), .px-text-orange
       (Palier conseillé, économie), optionally with .px-dot--teal / --orange;
     - counters (.px-count--accent) and key figures (.px-key-figure);
     - small touches in the black band / header (dots, gradient bar, counter);
     - link hover in blue.
   Legacy accent modifiers (--teal, --blue, px-tint-N, --tinted-*) are kept so
   markup does not break, but they now render NEUTRAL (or text-colour only).
   ========================================================================== */

/* -------------------------------------------------------------- 1. Tokens */
:root {
    /* Base: black & white */
    --px-black: #000;
    --px-white: #fff;
    --px-ink: #000;
    --px-ink-80: rgba(0, 0, 0, .8);
    --px-ink-70: rgba(0, 0, 0, .7);
    --px-ink-60: rgba(0, 0, 0, .6);   /* min. for small secondary text (5.7:1) */
    --px-ink-40: rgba(0, 0, 0, .4);   /* decorative only, never for text */
    --px-bg: #fff;
    --px-bg-alt: #F9F9F9;
    --px-border: rgba(0, 0, 0, .08);
    --px-border-strong: rgba(0, 0, 0, .16);
    --px-on-dark: #fff;
    --px-on-dark-70: rgba(255, 255, 255, .72);
    --px-border-dark: rgba(255, 255, 255, .18);

    /* Accents from the logo (small notes, not large fills) */
    --px-teal: #1F8A7A;
    --px-teal-dark: #17695D;   /* small text */
    --px-teal-tint: #E8F4F1;
    --px-blue: #2F5FA3;
    --px-blue-tint: #EAF0F8;
    --px-orange: #E0650A;      /* bold text >= 18px only */
    --px-orange-dark: #B54F00; /* small text */
    --px-orange-tint: #FDEFE3;
    --px-yellow: #F2B705;      /* never as text on white */
    --px-yellow-dark: #6B5000; /* text on yellow tint */
    --px-yellow-tint: #FEF6DC;
    --px-red: #B42318;
    --px-red-tint: #FDECEA;

    --px-gradient: linear-gradient(90deg, #1F8A7A 0%, #2F5FA3 35%, #E0650A 70%, #F2B705 100%);

    /* Type */
    --px-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --px-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

    /* Shape & motion */
    --px-radius: 0;
    --px-radius-sm: 2px;
    --px-shadow: 0 12px 32px rgba(0, 0, 0, .10);
    --px-shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
    --px-ease: cubic-bezier(.2, .7, .2, 1);
    --px-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--px-blue);

    /* Layout */
    --px-container: 1280px;
    --px-gutter: 16px;
    --px-target: 44px;          /* minimum touch target */
    --px-sticky-top: 120px;     /* offset for sticky elements under the header */
}
@media (min-width: 768px) {
    :root { --px-gutter: 24px; }
}
@media (max-width: 1023px) {
    :root { --px-sticky-top: 116px; }
}

/* --------------------------------------------------- 2. Safe base rules */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--px-font); }
::selection { background: rgba(0, 0, 0, .12); color: #000; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--px-blue);
    outline-offset: 2px;
}
[hidden] { display: none !important; }
.px-sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.px-skip-link {
    position: absolute; left: 8px; top: -100px; z-index: 200;
    background: #000; color: #fff; padding: 12px 16px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.px-skip-link:focus { top: 8px; }
.px-icon { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; }
.px-icon--sm { width: 12px; height: 12px; }
.px-icon--lg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ 3. Layout */
.px-container {
    width: 100%;
    max-width: var(--px-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--px-gutter);
    padding-right: var(--px-gutter);
    box-sizing: border-box;
}
.px-container--narrow { max-width: 880px; }
.px-container--wide { max-width: 1440px; }

.px-section { padding: 56px 0; background: var(--px-bg); color: var(--px-ink); }
@media (min-width: 1024px) { .px-section { padding: 80px 0; } }
.px-section--tight { padding: 32px 0; }
@media (min-width: 1024px) { .px-section--tight { padding: 48px 0; } }
.px-section--alt { background: var(--px-bg-alt); border-top: 1px solid var(--px-border); border-bottom: 1px solid var(--px-border); }
.px-section--bordered { border-top: 1px solid var(--px-border); }
/* legacy names: tinted sections are neutral (#F9F9F9) per colour-dosage rule */
.px-section--tinted-teal, .px-section--tinted-blue, .px-section--tinted-orange, .px-section--tinted-yellow { background: var(--px-bg-alt); }
.px-section--dark { background: #000; color: #fff; }
.px-section--dark .px-label, .px-section--dark .px-muted, .px-section--dark .px-lead { color: var(--px-on-dark-70); }
.px-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; }

.px-stack { display: flex; flex-direction: column; gap: 16px; }
.px-stack--sm { gap: 8px; }
.px-stack--lg { gap: 32px; }
.px-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.px-cluster--lg { gap: 16px 24px; }
.px-cluster--between { justify-content: space-between; }

.px-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.px-grid--gap-lg { gap: 24px; }
@media (min-width: 640px) {
    .px-grid--2, .px-grid--3, .px-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .px-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .px-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* products: 2 columns already on phones */
.px-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .px-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1280px) { .px-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.px-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.px-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }

.px-split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
    .px-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
    .px-split--sidebar { grid-template-columns: 280px minmax(0, 1fr); }
    .px-split--aside { grid-template-columns: minmax(0, 1fr) 380px; }
}

.px-divider { border: 0; border-top: 1px solid var(--px-border); margin: 24px 0; }

/* Responsive visibility helpers */
@media (max-width: 639px) { .px-hide-mobile { display: none !important; } }
@media (min-width: 640px) { .px-only-mobile { display: none !important; } }
@media (max-width: 1023px) { .px-hide-below-lg { display: none !important; } }
@media (min-width: 1024px) { .px-only-below-lg { display: none !important; } }
@media (max-width: 1279px) { .px-hide-below-xl { display: none !important; } }
@media (max-width: 1439px) { .px-hide-below-2xl { display: none !important; } }

/* -------------------------------------------------------- 4. Typography */
.px-h1, .px-h2, .px-h3, .px-h4 {
    margin: 0;
    font-family: var(--px-font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.02em;
    color: inherit;
}
.px-h1 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1; }
.px-h2 { font-size: clamp(26px, 3.4vw, 44px); line-height: .98; }
.px-h3 { font-size: 20px; line-height: 1.15; }
.px-h4 { font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.px-label {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--px-ink-60);
}
.px-label--ink { color: var(--px-ink); }
.px-label--xs { font-size: 10px; }
.px-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.px-eyebrow::before { content: ""; width: 24px; height: 3px; background: var(--px-gradient); }
.px-serif { font-family: var(--px-serif); font-weight: 400; letter-spacing: -.01em; text-transform: none; }
.px-serif--italic { font-style: italic; }
.px-display-serif { font-family: var(--px-serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; }
.px-lead { font-size: 16px; line-height: 1.6; color: var(--px-ink-70); max-width: 64ch; }
@media (min-width: 1024px) { .px-lead { font-size: 17px; } }
.px-text { font-size: 15px; line-height: 1.6; }
.px-small { font-size: 13px; line-height: 1.5; }
.px-xs { font-size: 12px; line-height: 1.5; }
.px-muted { color: var(--px-ink-60); }
.px-num { font-variant-numeric: tabular-nums; }
.px-strong { font-weight: 700; }
.px-title-underline { display: inline; background-image: var(--px-gradient); background-size: 100% 4px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 6px; }
/* --- Allowed colour accents (use sparingly, see header comment) --- */
.px-highlight { background: linear-gradient(transparent 62%, var(--px-yellow) 62%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.px-highlight--gradient { background: var(--px-gradient) 0 100% / 100% 5px no-repeat; padding: 0 0 .06em; }
.px-text-teal { color: var(--px-teal-dark); font-weight: 700; }
.px-text-orange { color: var(--px-orange-dark); font-weight: 700; }
.px-key-figure { font-weight: 800; font-variant-numeric: tabular-nums; background: var(--px-gradient) 0 100% / 100% 3px no-repeat; padding-bottom: 2px; }
.px-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.px-link:hover { color: var(--px-blue); }
.px-link--arrow { text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-height: var(--px-target); }
.px-link--arrow::after { content: "\2192"; transition: transform .2s var(--px-ease); }
.px-link--arrow:hover::after { transform: translateX(3px); }
.px-quote { margin: 0; font-family: var(--px-serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; }
.px-prose { font-size: 15px; line-height: 1.7; color: var(--px-ink-80); max-width: 72ch; }
.px-prose h2, .px-prose h3 { color: #000; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; margin: 1.6em 0 .6em; line-height: 1.1; }
.px-prose h2 { font-size: 24px; }
.px-prose h3 { font-size: 18px; }
.px-prose p, .px-prose ul, .px-prose ol { margin: 0 0 1em; }
.px-prose ul { list-style: disc; padding-left: 1.2em; }
.px-prose ol { list-style: decimal; padding-left: 1.4em; }
.px-prose a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.px-prose a:hover { color: var(--px-blue); }
.px-list-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.px-list-check li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; }
.px-list-check li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ----------------------------------------------------------- 5. Buttons */
.px-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--px-target);
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--px-radius);
    background: transparent;
    color: #000;
    font-family: var(--px-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s var(--px-ease), color .15s var(--px-ease), border-color .15s var(--px-ease), transform .15s var(--px-ease);
    box-sizing: border-box;
}
.px-btn:focus-visible { outline: none; box-shadow: var(--px-focus-ring); }
.px-btn:active { transform: translateY(1px); }
.px-btn--primary { background: #000; color: #fff; border-color: #000; }
.px-btn--primary:hover { background: #262626; border-color: #262626; color: #fff; }
.px-btn--outline { background: #fff; color: #000; border-color: #000; }
.px-btn--outline:hover { background: #000; color: #fff; }
.px-btn--ghost { background: transparent; color: #000; border-color: transparent; }
.px-btn--ghost:hover { background: var(--px-bg-alt); }
.px-btn--light { background: #fff; color: #000; border-color: #fff; }
.px-btn--light:hover { background: rgba(255, 255, 255, .85); }
.px-btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.px-btn--outline-light:hover { background: #fff; color: #000; }
.px-btn--teal { background: #000; color: #fff; border-color: #000; } /* legacy: neutral */
.px-btn--teal:hover { background: #262626; border-color: #262626; color: #fff; }
.px-btn--added, .px-btn.is-added { background: var(--px-bg-alt); color: #000; border-color: #000; cursor: default; }
.px-btn--sm { padding: 0 14px; font-size: 11px; letter-spacing: .08em; }
@media (pointer: fine) { .px-btn--sm { min-height: 36px; } }
.px-btn--lg { min-height: 52px; padding: 0 28px; font-size: 13px; }
.px-btn--block { display: flex; width: 100%; }
.px-btn--icon { width: var(--px-target); padding: 0; }
.px-btn[disabled], .px-btn[aria-disabled="true"]:not(.px-btn--added):not(.is-added) {
    opacity: .45; cursor: not-allowed; transform: none;
}
.px-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.px-btn.is-loading::after {
    content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor;
    border-color: #fff #fff transparent transparent; border-radius: 50%; animation: px-spin .7s linear infinite;
}
.px-btn--outline.is-loading::after, .px-btn--ghost.is-loading::after { border-color: #000 #000 transparent transparent; }
@keyframes px-spin { to { transform: rotate(360deg); } }

/* Icon button (square, 44px) */
.px-iconbtn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--px-target); height: var(--px-target);
    border: 1px solid var(--px-border-strong);
    background: #fff; color: #000;
    cursor: pointer; text-decoration: none; flex-shrink: 0;
    transition: border-color .15s, background-color .15s;
}
.px-iconbtn:hover { border-color: #000; }
.px-iconbtn--plain { border-color: transparent; }
.px-iconbtn--plain:hover { background: var(--px-bg-alt); border-color: transparent; }

/* Counter bubble (cart, quote) */
.px-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: #000; color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.px-count.hidden { display: none; }
.px-count--accent { background: var(--px-orange-dark); color: #fff; } /* allowed: counters */
.px-iconbtn .px-count { position: absolute; top: -7px; right: -7px; }
.px-status-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--px-teal); box-shadow: 0 0 0 2px #fff; }

/* ------------------------------------------------- 6. Badges, tags, dots */
.px-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px;
    font-size: 10px; font-weight: 700; line-height: 1.3;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--px-bg-alt); color: #000;
    white-space: nowrap;
}
/* Accent badges = coloured TEXT on white with a thin neutral border, never a coloured fill */
.px-badge--teal, .px-badge--blue, .px-badge--orange, .px-badge--yellow { background: #fff; box-shadow: inset 0 0 0 1px var(--px-border-strong); }
.px-badge--teal { color: var(--px-teal-dark); }
.px-badge--blue { color: var(--px-blue); }
.px-badge--orange { color: var(--px-orange-dark); }
.px-badge--yellow { color: #000; }
.px-badge--black { background: #000; color: #fff; }
.px-badge--white { background: #fff; color: #000; border: 1px solid rgba(0, 0, 0, .12); }
.px-badge--outline { background: transparent; color: #000; border: 1px solid var(--px-border-strong); }
/* legacy solid accents render black */
.px-badge--solid-teal, .px-badge--solid-blue, .px-badge--solid-orange { background: #000; color: #fff; }
.px-badge--lg { font-size: 11px; padding: 6px 10px; }
a.px-badge { text-decoration: none; min-height: 32px; }
a.px-badge:hover { box-shadow: inset 0 0 0 1px currentColor; }
.px-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.px-dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; background: #000; }
.px-dot--teal { background: var(--px-teal); }
.px-dot--blue { background: var(--px-blue); }
.px-dot--orange { background: var(--px-orange); }
.px-dot--yellow { background: var(--px-yellow); }
.px-swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, .16); flex-shrink: 0; }
.px-swatches { display: inline-flex; align-items: center; gap: 4px; }

/* -------------------------------------------------------------- 7. Cards */
.px-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--px-border);
    padding: 24px;
    color: #000;
}
.px-card--alt { background: var(--px-bg-alt); }
.px-card--flush { padding: 0; }
.px-card--strong { border-color: #000; }
.px-card--link { display: block; text-decoration: none; transition: border-color .15s, transform .15s var(--px-ease); }
.px-card--link:hover { border-color: #000; }
.px-card--feature { border-top-color: transparent; }
.px-card--feature::before {
    content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--px-gradient);
}
.px-card--teal, .px-card--blue, .px-card--orange, .px-card--yellow { background: var(--px-bg-alt); } /* legacy: neutral */
.px-card--dark { background: #000; color: #fff; border-color: #000; }
.px-card__title { margin: 0 0 8px; font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.15; }
.px-card__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--px-ink-70); }
.px-card--dark .px-card__text { color: var(--px-on-dark-70); }
.px-card__num { font-family: var(--px-serif); font-size: 48px; line-height: 1; display: block; margin-bottom: 12px; }

/* Image wells behind product photos: neutral #F9F9F9 (legacy px-tint-1..4 kept, all neutral) */
.px-tint-0, .px-tint-1, .px-tint-2, .px-tint-3, .px-tint-4 { background-color: var(--px-bg-alt) !important; }
.px-tint-white { background-color: #fff !important; }

.px-media { position: relative; overflow: hidden; background: var(--px-bg-alt); aspect-ratio: 1 / 1; }
.px-media > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.px-media--padded { padding: 24px; box-sizing: border-box; }
.px-media--cover > img { object-fit: cover; }
.px-media--wide { aspect-ratio: 4 / 3; }

/* ------------------------------------------------------- 8. Product card */
.px-product-card {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--px-border);
    color: #000;
    min-width: 0;
    transition: border-color .15s var(--px-ease), box-shadow .15s var(--px-ease);
}
.px-product-card:hover { border-color: #000; }
.px-product-card--featured::before {
    content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--px-gradient); z-index: 1;
}
.px-product-card__media {
    position: relative; display: block;
    aspect-ratio: 1 / 1; overflow: hidden;
    background: var(--px-bg-alt);
    padding: 32px 18px 16px; box-sizing: border-box;
}
.px-product-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s var(--px-ease); }
.px-product-card:hover .px-product-card__media img { transform: scale(1.03); }
.px-product-card__flags { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; pointer-events: none; }
.px-product-card__flags-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.px-product-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px 12px 14px; }
@media (min-width: 768px) { .px-product-card__body { padding: 14px 16px 16px; } }
.px-product-card__meta { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--px-ink-60); }
.px-product-card__title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
@media (min-width: 768px) { .px-product-card__title { font-size: 15px; } }
.px-product-card__title a { color: inherit; text-decoration: none; }
.px-product-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.px-product-card__title a:focus-visible { outline: none; }
.px-product-card:focus-within { box-shadow: var(--px-focus-ring); }
.px-product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.px-product-card__actions { position: relative; z-index: 2; display: flex; gap: 6px; margin-top: 6px; }
.px-product-card__actions .px-btn { flex: 1; padding: 0 10px; font-size: 11px; letter-spacing: .08em; }

/* ------------------------------------------------------- 9. Price block */
.px-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-variant-numeric: tabular-nums; }
.px-price__from { font-size: 13px; color: var(--px-ink-70); }
.px-price__amount { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #000; }
.px-price__tax { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--px-ink-60); }
.px-price__old { font-size: 13px; color: var(--px-ink-60); text-decoration: line-through; }
.px-price--lg .px-price__amount { font-size: clamp(28px, 3vw, 40px); }
.px-price--xl .px-price__amount { font-size: clamp(36px, 4vw, 56px); line-height: 1; }
.px-price--saving .px-price__amount { color: var(--px-orange); }  /* bold >= 18px only */
.px-price-panel { position: relative; border: 1px solid #000; background: #fff; padding: 20px 22px; }
.px-price-panel::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--px-gradient); }
.px-price-lines { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.px-price-lines dt { color: var(--px-ink-70); }
.px-price-lines dd { margin: 0; font-weight: 700; text-align: right; }
.px-price-lines .is-total { padding-top: 10px; border-top: 1px solid var(--px-border); font-size: 16px; font-weight: 800; color: #000; }

/* ------------------------------------------------------------ 10. Tables */
.px-table-wrap { overflow-x: auto; border: 1px solid var(--px-border); background: #fff; -webkit-overflow-scrolling: touch; }
.px-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.px-table th, .px-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--px-border); vertical-align: middle; }
.px-table thead th {
    background: var(--px-bg-alt);
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    border-bottom-color: var(--px-border-strong);
    white-space: nowrap;
}
.px-table tbody th { font-weight: 700; }
.px-table tbody tr:last-child > * { border-bottom: 0; }
.px-table .is-num, .px-table--num td, .px-table--num thead th:not(:first-child) { text-align: right; }
.px-table--compact th, .px-table--compact td { padding: 8px 12px; font-size: 13px; }
.px-table--striped tbody tr:nth-child(even) { background: var(--px-bg-alt); }
.px-table--hover tbody tr:hover { background: var(--px-bg-alt); }
/* Highlighted row (recommended tier) & column (best option) */
.px-table tr.is-highlight, .px-row--highlight { background: var(--px-bg-alt); box-shadow: inset 3px 0 0 #000; }
.px-table tr.is-highlight > *, .px-row--highlight > * { font-weight: 700; }
.px-table .is-col-highlight, .px-col--highlight { background: var(--px-bg-alt); }
.px-table thead .is-col-highlight, .px-table thead .px-col--highlight { box-shadow: inset 0 2px 0 #000; color: #000; }
.px-table tr.is-selected { background: var(--px-bg-alt); box-shadow: inset 3px 0 0 #000; }
/* put a text-only .px-text-orange label (e.g. "Palier conseillé") inside the highlighted row */

/* ------------------------------------------------------------ 11. Steps */
.px-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    border: 1px solid var(--px-border); background: #fff;
    counter-reset: px-step;
}
.px-step { position: relative; padding: 20px; border-top: 2px solid #000; counter-increment: px-step; }
.px-step + .px-step { border-left: 1px solid var(--px-border); }
@media (max-width: 639px) { .px-step + .px-step { border-left: 0; } }
.px-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 6px; margin-bottom: 12px;
    background: #000; color: #fff;
    font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.px-step__num:empty::before { content: counter(px-step); }
.px-step__title { margin: 0 0 4px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.px-step__text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--px-ink-70); }
.px-steps--plain { border: 0; background: transparent; gap: 16px; }
.px-steps--plain .px-step { background: #fff; border: 1px solid var(--px-border); border-top: 2px solid #000; }
/* Progress bar (configurator, checkout) */
.px-progress { height: 4px; background: rgba(0, 0, 0, .12); position: relative; overflow: hidden; }
.px-progress--gradient .px-progress__bar { background: var(--px-gradient); } /* counts as the page's one extra gradient */
.px-progress__bar { position: absolute; inset: 0 auto 0 0; width: var(--px-progress, 0%); background: #000; transition: width .3s var(--px-ease); }

/* ------------------------------------------------------ 12. Chips/filters */
.px-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.px-chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 14px;
    border: 1px solid var(--px-border-strong); background: #fff; color: #000;
    font-family: var(--px-font); font-size: 12px; font-weight: 600; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: border-color .15s, background-color .15s, color .15s;
}
@media (pointer: coarse) { .px-chip { min-height: var(--px-target); } }
.px-chip:hover { border-color: #000; }
.px-chip[aria-pressed="true"], .px-chip[aria-checked="true"], .px-chip[aria-current], .px-chip.is-active {
    background: #000; color: #fff; border-color: #000;
}
.px-chip__count { font-size: 11px; color: var(--px-ink-60); font-variant-numeric: tabular-nums; }
.px-chip.is-active .px-chip__count, .px-chip[aria-pressed="true"] .px-chip__count { color: rgba(255, 255, 255, .75); }
.px-chip--removable::after { content: "\00d7"; font-size: 16px; line-height: 1; margin-left: 2px; }
.px-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.px-chips--scroll::-webkit-scrollbar { display: none; }

/* -------------------------------------------------------------- 13. Forms */
.px-field { display: flex; flex-direction: column; gap: 6px; }
.px-field__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #000; }
.px-field__help { font-size: 12px; color: var(--px-ink-60); }
.px-field__error { font-size: 12px; color: var(--px-red); font-weight: 600; }
.px-input, .px-select, .px-textarea {
    width: 100%; min-height: var(--px-target); box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--px-border-strong); border-radius: var(--px-radius);
    background: #fff; color: #000;
    font-family: var(--px-font); font-size: 14px; line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
}
.px-textarea { padding: 10px 12px; min-height: 120px; resize: vertical; }
.px-input::placeholder, .px-textarea::placeholder { color: var(--px-ink-60); }
.px-input:hover, .px-select:hover, .px-textarea:hover { border-color: rgba(0, 0, 0, .4); }
.px-input:focus, .px-select:focus, .px-textarea:focus { outline: none; border-color: #000; box-shadow: 0 0 0 1px #000; }
.px-input[aria-invalid="true"], .px-input.is-error, .px-select.is-error, .px-textarea.is-error { border-color: var(--px-red); box-shadow: 0 0 0 1px var(--px-red); }
.px-input:disabled, .px-select:disabled, .px-textarea:disabled { background: var(--px-bg-alt); color: var(--px-ink-60); cursor: not-allowed; }
.px-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.px-input-group { display: flex; align-items: stretch; }
.px-input-group > .px-input { flex: 1; min-width: 0; }
.px-input-group > .px-btn { flex-shrink: 0; }
.px-input-group > * + * { margin-left: -1px; }
.px-input-affix { position: relative; display: flex; align-items: center; }
.px-input-affix > .px-icon { position: absolute; left: 12px; pointer-events: none; }
.px-input-affix > .px-input { padding-left: 38px; }

/* Checkbox / radio rows */
.px-check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--px-target); padding: 10px 0; box-sizing: border-box; cursor: pointer; font-size: 14px; line-height: 1.4; }
.px-check input[type="checkbox"], .px-check input[type="radio"] { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: #000; cursor: pointer; }
.px-check__count { margin-left: auto; font-size: 12px; color: var(--px-ink-60); font-variant-numeric: tabular-nums; }
/* Option tile (radio as card) */
.px-option { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--px-target); padding: 10px 14px; border: 1px solid var(--px-border-strong); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.px-option:hover { border-color: #000; }
.px-option:has(input:checked), .px-option.is-active, .px-option[aria-pressed="true"], .px-option[aria-checked="true"] { border: 2px solid #000; padding: 9px 13px; }
.px-option input { accent-color: #000; }

/* Segmented control (HT / TTC) */
.px-segmented { display: inline-flex; border: 1px solid #000; background: #fff; }
.px-segmented > button, .px-segmented > a, .px-segmented > label {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--px-target); min-width: 44px; padding: 0 16px;
    border: 0; background: #fff; color: #000;
    font-family: var(--px-font); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
}
.px-segmented > [aria-pressed="true"], .px-segmented > [aria-checked="true"], .px-segmented > .is-active, .px-segmented > label:has(input:checked) { background: #000; color: #fff; }
.px-segmented input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.px-segmented > *:focus-visible, .px-segmented > label:has(input:focus-visible) { outline: 2px solid var(--px-blue); outline-offset: 2px; position: relative; z-index: 1; }

/* Quantity stepper */
.px-qty { display: inline-flex; border: 1px solid var(--px-border-strong); }
.px-qty button { width: var(--px-target); min-height: var(--px-target); border: 0; background: #fff; cursor: pointer; font-size: 18px; }
.px-qty button:hover { background: var(--px-bg-alt); }
.px-qty input { width: 80px; border: 0; border-left: 1px solid var(--px-border-strong); border-right: 1px solid var(--px-border-strong); text-align: center; font: 700 15px var(--px-font); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.px-qty input::-webkit-outer-spin-button, .px-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------- 14. Accordion */
.px-accordion { border-top: 1px solid #000; }
.px-accordion__item { border-bottom: 1px solid var(--px-border); }
.px-accordion__item > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: var(--px-target); padding: 18px 0;
    font-size: 16px; font-weight: 700; line-height: 1.35;
}
@media (min-width: 768px) { .px-accordion__item > summary { font-size: 17px; padding: 20px 0; } }
.px-accordion__item > summary::-webkit-details-marker { display: none; }
.px-accordion__item > summary::after {
    content: ""; flex-shrink: 0; width: 16px; height: 16px;
    background: linear-gradient(#000, #000) center / 14px 1.5px no-repeat, linear-gradient(#000, #000) center / 1.5px 14px no-repeat;
    transition: transform .2s var(--px-ease);
}
.px-accordion__item[open] > summary::after { transform: rotate(45deg); }
.px-accordion__item > summary:hover { color: var(--px-blue); }
.px-accordion__body { padding: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--px-ink-70); }
.px-accordion--compact .px-accordion__item > summary { font-size: 14px; padding: 12px 0; }

/* ---------------------------------------------------------- 15. Gradient */
.px-gradient-bar { height: 4px; background: var(--px-gradient); border: 0; margin: 0; }
.px-gradient-bar--thin { height: 3px; }
.px-gradient-border-top { position: relative; }
.px-gradient-border-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--px-gradient); }

/* -------------------------------------------------- 16. Sticky / buy bar */
.px-sticky { position: sticky; top: var(--px-sticky-top); }
.px-sticky-bar {
    position: sticky; bottom: 0; z-index: 40;
    background: #fff; border-top: 1px solid var(--px-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .06);
}
.px-sticky-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.px-tabs { display: flex; gap: 0 28px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--px-border); border-bottom: 1px solid var(--px-border); background: #fff; }
.px-tabs::-webkit-scrollbar { display: none; }
.px-tabs a, .px-tabs button { flex-shrink: 0; display: inline-flex; align-items: center; min-height: var(--px-target); padding: 0; border: 0; background: none; font-family: var(--px-font); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--px-ink-60); text-decoration: none; cursor: pointer; }
.px-tabs a:hover, .px-tabs button:hover { color: #000; }
.px-tabs [aria-current], .px-tabs [aria-selected="true"], .px-tabs .is-active { color: #000; box-shadow: inset 0 -2px 0 #000; }
/* Mobile sticky buy bar: fixed at the bottom of phones/tablets only */
.px-buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; align-items: center; gap: 12px;
    padding: 10px var(--px-gutter); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--px-border-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
    transform: translateY(0); transition: transform .25s var(--px-ease);
}
.px-buybar.is-hidden { transform: translateY(110%); }
.px-buybar__price { flex: 1; min-width: 0; }
.px-buybar .px-btn { flex-shrink: 0; }
@media (min-width: 1024px) { .px-buybar { display: none; } }
@media (max-width: 1023px) { body.has-px-buybar { padding-bottom: 76px; } }

/* -------------------------------------------------------- 17. Breadcrumb */
.px-breadcrumb { padding: 16px 0 8px; }
.px-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--px-ink-60); }
.px-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.px-breadcrumb li + li::before { content: "/"; color: var(--px-ink-40); }
.px-breadcrumb a { color: var(--px-ink-60); text-decoration: none; padding: 6px 0; }
.px-breadcrumb a:hover { color: #000; text-decoration: underline; }
.px-breadcrumb [aria-current] { color: #000; font-weight: 600; }

/* -------------------------------------------------------- 18. Pagination */
.px-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--px-border); }
.px-pagination__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.px-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--px-target); height: var(--px-target); padding: 0 8px; box-sizing: border-box;
    border: 1px solid var(--px-border-strong); background: #fff; color: #000;
    font-family: var(--px-font); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.px-page:hover { border-color: #000; }
.px-page[aria-current="page"], .px-page.is-active { background: #000; border-color: #000; color: #fff; font-weight: 700; }
.px-page[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.px-page--gap { border: 0; min-width: 20px; color: var(--px-ink-60); cursor: default; }

/* ---------------------------------------------------- 19. Alerts/notices */
.px-alert {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px;
    background: var(--px-bg-alt); color: #000;
    border-left: 3px solid #000;
    font-size: 14px; line-height: 1.5;
}
.px-alert__title { font-weight: 700; margin: 0 0 2px; }
/* Alerts stay neutral (#F9F9F9 + black rule). Only errors use red, for function. */
.px-alert--info, .px-alert--success, .px-alert--warning, .px-alert--promo { background: var(--px-bg-alt); border-left-color: #000; }
.px-alert--success .px-alert__title { color: var(--px-teal-dark); }
.px-alert--promo .px-alert__title { color: var(--px-orange-dark); }
.px-alert--error { background: #fff; border: 1px solid var(--px-red); border-left-width: 3px; }
.px-alert--error .px-alert__title, .px-alert--error .px-icon { color: var(--px-red); }

/* ----------------------------------------------------------- 20. Skeleton */
.px-skeleton {
    background: linear-gradient(90deg, #f1f1f1 25%, #e6e6e6 50%, #f1f1f1 75%);
    background-size: 200% 100%;
    animation: px-shimmer 1.4s infinite linear;
}
.px-skeleton--text { height: 12px; margin: 6px 0; }
.px-skeleton--title { height: 20px; width: 60%; }
.px-skeleton--img { aspect-ratio: 1 / 1; }
@keyframes px-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* -------------------------------------------------------- 21. Toast/modal */
.px-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 9000;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    max-width: calc(100vw - 32px); padding: 12px 18px;
    background: #000; color: #fff;
    border-left: 4px solid var(--px-teal);
    font-size: 14px; font-weight: 600; box-shadow: var(--px-shadow);
    animation: px-toast-in .25s var(--px-ease);
}
.px-toast--error { border-left-color: #F04438; }
.px-toast { border-left-color: #fff; }
.px-toast.px-toast--error { border-left-color: #F04438; }
@keyframes px-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.px-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .6); }
.px-modal__dialog { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; color: #000; }
.px-modal__dialog::before { content: ""; display: block; height: 4px; background: var(--px-gradient); }
.px-modal__body { padding: 28px; }
.px-modal__close { position: absolute; top: 10px; right: 10px; }

/* ==========================================================================
   SITE CHROME — header, mega menu, drawer, footer
   ========================================================================== */

/* Reassurance band */
.px-band { background: #000; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.px-band__inner { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.px-band__items { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin: 0; padding: 6px 0; list-style: none; }
.px-band__items li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.px-band__items li .px-dot { width: 6px; height: 6px; }
@media (max-width: 639px) { .px-band__items li:nth-child(n+2) { display: none; } }
@media (min-width: 640px) and (max-width: 1023px) { .px-band__items li:nth-child(n+3) { display: none; } }
.px-band__aside { display: flex; align-items: center; gap: 4px; flex-shrink: 0; text-transform: none; letter-spacing: 0; }
.px-band__aside a { color: rgba(255, 255, 255, .8); text-decoration: none; font-size: 12px; padding: 6px 8px; }
.px-band__aside a:hover { color: #fff; }

/* Header */
.px-header { position: sticky; top: 0; z-index: 60; background: #fff; color: #000; }
.px-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 1024px) { .px-header__row { flex-wrap: nowrap; gap: 24px; padding-top: 12px; padding-bottom: 12px; } }
.px-logo { display: inline-flex; align-items: center; min-height: var(--px-target); text-decoration: none; flex-shrink: 0; }
.px-logo img { display: block; height: 22px; width: auto; }
@media (max-width: 419px) { .px-logo img { height: 18px; } .px-header__row { column-gap: 6px; } .px-header__actions { gap: 4px; } }
@media (min-width: 768px) { .px-logo img { height: 28px; } }
.px-header__menu-btn { margin-left: -6px; }
@media (min-width: 1024px) { .px-header__menu-btn { display: none !important; } }
.px-header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
@media (min-width: 1024px) { .px-header__actions { gap: 8px; margin-left: 0; } }
.px-quote-link {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: var(--px-target); min-width: var(--px-target); padding: 0 12px; box-sizing: border-box; justify-content: center;
    border: 1px solid #000; background: #fff; color: #000; text-decoration: none;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.px-quote-link:hover { background: #000; color: #fff; }
@media (max-width: 639px) { .px-quote-link { padding: 0; width: var(--px-target); } .px-quote-link__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* Search */
.px-search { position: relative; order: 10; flex: 1 1 100%; min-width: 0; }
@media (min-width: 1024px) { .px-search { order: 0; flex: 1 1 auto; max-width: 640px; } }
.px-search__field { display: flex; align-items: center; gap: 8px; min-height: var(--px-target); padding: 0 4px 0 12px; border: 1px solid var(--px-border-strong); background: #fff; transition: border-color .15s, box-shadow .15s; }
.px-search__field:focus-within { border-color: #000; box-shadow: 0 0 0 1px #000; }
.px-search__input { flex: 1; min-width: 0; min-height: 42px; border: 0; outline: 0; background: transparent; font-family: var(--px-font); font-size: 14px; color: #000; -webkit-appearance: none; appearance: none; }
.px-search__input::placeholder { color: var(--px-ink-60); }
.px-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.px-search__submit { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: #000; cursor: pointer; }
.px-search__submit:hover { color: var(--px-blue); }
.px-search__results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 80; max-height: 420px; overflow-y: auto; background: #fff; border: 1px solid #000; box-shadow: var(--px-shadow); }
.px-search__results.hidden, .px-search__footer.hidden { display: none; }
.px-search__footer { padding: 12px 14px; border-top: 1px solid var(--px-border); background: var(--px-bg-alt); }
.px-search__footer a { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #000; text-decoration: none; }
.px-search__footer a:hover { color: var(--px-blue); }
.px-search-result { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--px-border); color: #000; text-decoration: none; }
.px-search-result:last-child { border-bottom: 0; }
.px-search-result:hover, .px-search-result:focus-visible { background: var(--px-bg-alt); outline: none; }
.px-search-result img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; background: var(--px-bg-alt); padding: 4px; box-sizing: border-box; }
.px-search-result__body { flex: 1; min-width: 0; }
.px-search-result__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-search-result__cat { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--px-ink-60); }
.px-search-result__price { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-search__state { padding: 20px 16px; text-align: center; font-size: 13px; color: var(--px-ink-70); }
.px-search__state strong { display: block; color: #000; font-size: 14px; margin-bottom: 4px; }

/* Desktop navigation */
.px-nav { display: none; border-top: 1px solid var(--px-border); }
@media (min-width: 1024px) { .px-nav { display: block; } }
.px-nav__inner { display: flex; align-items: center; gap: 4px 22px; }
.px-nav__list { display: flex; align-items: center; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.px-nav__list--end { margin-left: auto; }
.px-nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--px-target); padding: 0; border: 0; background: none;
    font-family: var(--px-font); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #000; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.px-nav__link:hover { color: var(--px-blue); }
.px-nav__link[aria-current="page"], .px-nav__link[aria-expanded="true"] { box-shadow: inset 0 -2px 0 #000; color: #000; }
.px-nav__link--strong { font-weight: 800; }
.px-nav__link .px-chevron { transition: transform .2s var(--px-ease); }
.px-nav__link[aria-expanded="true"] .px-chevron { transform: rotate(180deg); }

/* Mega menu (desktop) — visibility handled by Tailwind .mega-menu/.show */
.px-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; background: #fff; border-top: 1px solid var(--px-border); border-bottom: 1px solid #000; box-shadow: 0 24px 48px rgba(0, 0, 0, .12); }
.px-mega__inner { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 360px; }
.px-mega__cats { list-style: none; margin: 0; padding: 16px 0; border-right: 1px solid var(--px-border); max-height: calc(100vh - 220px); overflow-y: auto; overflow-x: hidden; }
.px-mega__cat {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 40px; padding: 0 16px 0 12px;
    font-size: 14px; font-weight: 600; color: #000; text-decoration: none;
}
.px-mega__cat::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .35; flex-shrink: 0; }
.px-mega__cat-count { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--px-ink-60); font-variant-numeric: tabular-nums; }
.px-mega__item.is-active > .px-mega__cat, .px-mega__cat:hover { color: #000; background: var(--px-bg-alt); box-shadow: inset 3px 0 0 #000; }
.px-mega__item.is-active > .px-mega__cat::after { opacity: 1; }
.px-mega__panel { display: none; position: absolute; top: 0; bottom: 0; left: 300px; right: 0; padding: 24px 8px 24px 32px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.px-mega__item.is-active > .px-mega__panel { display: block; }
.px-mega__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--px-border); }
.px-mega__panel-title { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: #000; text-decoration: none; }
.px-mega__panel-title:hover { color: var(--px-blue); }
.px-mega__subs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 24px; }
.px-mega__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 8px; margin: 0 -8px; font-size: 14px; color: #000; text-decoration: none; }
.px-mega__sub:hover { background: var(--px-bg-alt); color: var(--px-blue); }
.px-mega__sub span { font-size: 11px; color: var(--px-ink-60); font-variant-numeric: tabular-nums; }
.px-mega__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px 0; border-top: 1px solid var(--px-border); }

/* Mobile drawer */
.px-drawer { position: fixed; inset: 0; z-index: 100; }
.px-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s var(--px-ease); }
.px-drawer__panel {
    position: absolute; left: 0; top: 0; bottom: 0; width: 360px; max-width: 88vw;
    display: flex; flex-direction: column; background: #fff; color: #000;
    transform: translateX(-100%); transition: transform .25s var(--px-ease);
    box-shadow: var(--px-shadow);
}
.px-drawer.is-open .px-drawer__backdrop { opacity: 1; }
.px-drawer.is-open .px-drawer__panel { transform: translateX(0); }
.px-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px var(--px-gutter); border-bottom: 1px solid var(--px-border); }
.px-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 16px; }
.px-drawer__section { padding: 8px var(--px-gutter); }
.px-drawer__section + .px-drawer__section { border-top: 1px solid var(--px-border); }
.px-drawer__title { margin: 8px 0 4px; }
.px-drawer__link { display: flex; align-items: center; gap: 10px; min-height: var(--px-target); font-size: 15px; font-weight: 600; color: #000; text-decoration: none; }
.px-drawer__link:hover { color: var(--px-blue); }
.px-drawer__cat { border-bottom: 1px solid var(--px-border); }
.px-drawer__cat > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-size: 15px; font-weight: 600; }
.px-drawer__cat > summary::-webkit-details-marker { display: none; }
.px-drawer__cat > summary::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.px-drawer__cat[open] > summary::after { transform: rotate(-135deg); }
.px-drawer__cat-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--px-ink-60); font-variant-numeric: tabular-nums; }
.px-drawer__subs { list-style: none; margin: 0; padding: 0 0 10px 12px; border-left: 2px solid var(--px-border); }
.px-drawer__subs a { display: flex; align-items: center; min-height: 40px; font-size: 14px; color: var(--px-ink-80); text-decoration: none; }
.px-drawer__subs a:hover { color: var(--px-blue); }
.px-drawer__foot { padding: 12px var(--px-gutter); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--px-border); }
.px-langs { display: flex; flex-wrap: wrap; gap: 8px; }

/* Footer */
.px-footer { background: #000; color: #fff; }
.px-footer a { color: #fff; text-decoration: none; }
.px-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.px-footer__newsletter { display: grid; gap: 20px; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--px-border-dark); align-items: center; }
@media (min-width: 1024px) { .px-footer__newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; } }
.px-footer__newsletter-title { margin: 6px 0 4px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; }
.px-footer__newsletter p { margin: 0; color: var(--px-on-dark-70); font-size: 14px; }
.px-footer__form { display: flex; }
.px-footer__form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .4); border-right: 0; background: #111; color: #fff; font-family: var(--px-font); font-size: 14px; border-radius: 0; }
.px-footer__form input::placeholder { color: rgba(255, 255, 255, .6); }
.px-footer__form input:focus { outline: none; border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.px-footer__form button { min-height: 48px; }
.px-footer__msg { margin-top: 10px; font-size: 13px; }
.px-footer__main { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 48px; padding-bottom: 40px; }
@media (min-width: 768px) { .px-footer__main { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .px-footer__main { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px; } }
.px-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .px-footer__brand { grid-column: auto; } }
.px-footer__brand img { height: 22px; width: auto; display: block; align-self: flex-start; }
.px-footer__brand p { margin: 0; max-width: 340px; font-size: 13px; line-height: 1.6; color: var(--px-on-dark-70); }
.px-footer__heading { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--px-on-dark-70); display: flex; align-items: center; gap: 8px; }

.px-footer__links { list-style: none; margin: 0; padding: 0; }
.px-footer__links a, .px-footer__links button { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; font-family: var(--px-font); font-size: 14px; color: #fff; cursor: pointer; text-align: left; }
@media (pointer: coarse) { .px-footer__links a, .px-footer__links button { min-height: var(--px-target); } }
.px-footer__links button:hover { text-decoration: underline; text-underline-offset: 3px; }
.px-footer__links .is-more { font-weight: 700; }
.px-footer__band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid var(--px-border-dark); font-size: 12px; color: var(--px-on-dark-70); }
.px-footer__band a { color: var(--px-on-dark-70); min-height: 32px; display: inline-flex; align-items: center; }
.px-footer__band a:hover { color: #fff; }
.px-footer__trust { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin-top: 0; margin-bottom: 0; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid var(--px-border-dark); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.px-footer__trust li { display: inline-flex; align-items: center; gap: 8px; }
.px-paytag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .4); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.px-footer__bottom { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid var(--px-border-dark); font-size: 12px; line-height: 1.6; color: var(--px-on-dark-70); }
@media (min-width: 1024px) { .px-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.px-footer__bottom p { margin: 0; }
.px-footer__bottom a { color: var(--px-on-dark-70); }
.px-footer__bottom a:hover { color: #fff; }

/* Recently viewed strip (footer) */
.px-recent { background: var(--px-bg-alt); border-top: 1px solid var(--px-border); }
.px-recent.hidden { display: none; }

/* Cookie banner restyle (keeps its Tailwind markup, squares the corners) */
#cookie-banner > div { border-top: 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, .12); }
#cookie-banner > div { border-top: 2px solid #000 !important; }
#cookie-banner .rounded-lg, #cookie-banner .rounded-xl,
#cookie-modal .rounded-lg, #cookie-modal .rounded-xl, #cookie-modal .rounded-2xl, #cookie-modal .rounded-t-2xl { border-radius: 0; }
#cookie-banner h3, #cookie-modal h2 { text-transform: uppercase; letter-spacing: -.02em; font-weight: 800; }
#cookie-banner button, #cookie-modal .px-cookie-btn { min-height: var(--px-target); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
#cookie-banner p button { min-height: 0; text-transform: none; letter-spacing: 0; font-size: inherit; }
#cookie-modal .bg-blue-50 { background: var(--px-bg-alt); border-color: transparent; border-left: 3px solid #000; }
#cookie-modal .text-blue-800 { color: #000; }
#cookie-modal .bg-green-100 { background: var(--px-bg-alt); }
#cookie-modal .text-green-600 { color: #000; }
#cookie-modal .text-green-700 { color: var(--px-teal-dark); }
#cookie-modal .rounded-full.text-xs { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
    .px-drawer__panel, .px-drawer__backdrop, .px-buybar, .px-product-card__media img, .px-btn, .px-toast { transition: none !important; animation: none !important; }
    .px-skeleton { animation: none; }
}
@media print {
    .px-band, .px-header, .px-drawer, .px-buybar, .px-footer__newsletter { display: none !important; }
}
.px-footer__trust .px-dot { background: #fff; width: 6px; height: 6px; }
.px-footer a.px-btn { text-decoration: none; }
.px-footer a.px-btn--light { color: #000; }
.px-footer a.px-btn--light:hover { color: #000; }
.px-footer a.px-btn--outline-light:hover { color: #000; }

/* Product photos are shot on white: every photo frame uses a white background
   (owner's request), overriding page-level styles */
.px-product-card__media, .px-media, .px-search-result img, .ls-photos__item,
.px-lp-collage a, .lp-hero__media a, .lp-mosaic figure, .lp-mosaic a,
.ok-item__img, .px-proof__media, .px-cart-line__media, .px-acc-thumb, .pc-thumb,
.pc-mosaic > div, .ncs-photos a, .hx-occ__media, .hx-collage a, .hx-cat__img, .co-item__img {
    background: #fff !important;
}

/* Language switcher (top band): readable menu, independent of the band's white link colour */
.px-lang { position: relative; }
.px-lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px; border: 0; background: none; color: rgba(255,255,255,.85); font: 600 12px var(--px-font); cursor: pointer; }
.px-lang__btn:hover, .px-lang__btn[aria-expanded="true"] { color: #fff; }
.px-lang__arrow { transition: transform .15s; }
.px-lang__arrow.rotate-180 { transform: rotate(180deg); }
.px-lang__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 100; min-width: 170px; padding: 4px 0; background: #fff; border: 1px solid #000; box-shadow: 0 12px 32px rgba(0,0,0,.15); }
.px-lang__menu.hidden { display: none; }
.px-band__aside .px-lang__item, .px-lang__item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; color: #000; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; }
.px-band__aside .px-lang__item:hover, .px-lang__item:hover { background: var(--px-bg-alt); color: #000; }
.px-band__aside .px-lang__item.is-current, .px-lang__item.is-current { font-weight: 700; }
.px-lang__check { margin-left: auto; }