/* CAMP1 -- campaign surfaces (Black Friday and later ones). Loaded after theme.css on every page.
   Direction (owner): the dark theme is the base and campaign surfaces go MORE black: a campaign price is white on a black block, the accent
   colour (--camp-accent, per campaign, set on :root by the layout) lives on a border and a badge, never on a filled card. Every campaign
   surface carries its own black / white, so it reads the same in the navy (deep), noir and daylight themes.
   Text on the accent is --camp-on-accent (black or white by contrast). White on #000 is 21:1. */
:root { --camp-accent: #ff3b30; --camp-on-accent: #000; --camp-black: #000; --camp-paper: #fff; --camp-mute: #b9b9be; }

/* ---------- cards ---------- */
.product-card-camp { border: 2px solid var(--camp-accent); }
.product-card-camp .card-body { background: var(--th-card-bg, #fff); }
.camp-price-block { display: block; background: var(--camp-black); color: var(--camp-paper) !important; padding: .3rem .55rem; border-radius: .25rem;
    font-variant-numeric: tabular-nums; letter-spacing: .01em; width: max-content; max-width: 100%; }
.pc-badge-campaign { background: var(--camp-accent); color: var(--camp-on-accent); letter-spacing: .02em; }
.pc-badge-camp-last { background: var(--camp-black); color: var(--camp-paper); border: 1px solid var(--camp-accent); }
.product-card.is-soldout { border-color: #6B6B70; border-style: dashed; }
.product-card.is-soldout .product-card-media img { filter: grayscale(1); opacity: .45; }
.product-card.is-soldout .product-card-title a { text-decoration: line-through; color: var(--bs-secondary-color); }
.camp-price-struck { color: var(--bs-secondary-color); font-weight: 700; font-variant-numeric: tabular-nums; }
.camp-soldout-line { color: var(--bs-secondary-color); font-weight: 600; }

/* ---------- countdown (public/js/campaign.js fills the segments from the fixed timestamp) ---------- */
.camp-cd { display: inline-flex; gap: .35rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.camp-cd-seg { display: inline-flex; align-items: baseline; gap: .12rem; }
.camp-cd-seg b { font-weight: 800; }
.camp-cd-seg i { font-style: normal; font-size: .75em; opacity: .75; }
.camp-cd-seg + .camp-cd-seg { margin-left: .15rem; }

/* ---------- teaser bar ---------- */
.camp-bar { background: var(--camp-black); color: var(--camp-paper); border-bottom: 2px solid var(--camp-accent); font-size: .875rem; }
.camp-bar .container { display: flex; align-items: center; justify-content: center; gap: .5rem 1rem; flex-wrap: wrap; padding-top: .35rem; padding-bottom: .35rem; position: relative; }
.camp-bar-name { font-weight: 800; background: var(--camp-accent); color: var(--camp-on-accent); padding: .05rem .5rem; border-radius: .2rem; }
.camp-bar-left { display: inline-flex; align-items: baseline; gap: .4rem; }
.camp-bar a { color: var(--camp-paper); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.camp-bar a:hover, .camp-bar a:focus-visible { color: var(--camp-paper); text-decoration-thickness: 2px; }
.camp-bar-close { background: none; border: 0; color: var(--camp-paper); font-size: 1.25rem; line-height: 1; padding: .1rem .4rem; opacity: .8; cursor: pointer; }
.camp-bar-close:hover, .camp-bar-close:focus-visible { opacity: 1; }
.camp-bar-preview { font-size: .7rem; border: 1px solid var(--camp-paper); padding: 0 .35rem; border-radius: .2rem; }
.camp-bar-off .camp-bar { display: none; }
@media (max-width: 575.98px) { .camp-bar .container { justify-content: flex-start; padding-right: 2.5rem; } .camp-bar-close { position: absolute; right: .5rem; top: .15rem; } }

/* ---------- home hero: 50/50 split ---------- */
.camp-hero { background: var(--camp-black); color: var(--camp-paper); border-bottom: 3px solid var(--camp-accent); }
.camp-hero-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 26rem; }
.camp-hero-media { position: relative; background: var(--camp-black, #000); min-height: 14rem; }
/* CAMP3: top right on desktop; contained (never cropped, square media stays square), centred on black, at most 600px (1.5x a 400px original) */
.camp-hero-media { order: 2; }
.camp-hero-media img, .camp-hero-media video { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; max-width: 600px; max-height: 600px; object-fit: contain; }
.camp-hero-body { padding: 2rem clamp(1.25rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.camp-hero-badge { align-self: flex-start; background: var(--camp-accent); color: var(--camp-on-accent); font-weight: 800; font-size: .8rem; padding: .15rem .6rem; border-radius: .2rem; }
.camp-hero-title { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; margin: 0; color: var(--camp-paper); }
.camp-hero-lead { margin: 0; color: var(--camp-mute); max-width: 36rem; }
.camp-hero-clock { border-top: 1px solid var(--camp-accent); border-bottom: 1px solid var(--camp-accent); padding: .6rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.camp-hero-clock .camp-cd { font-size: clamp(1.4rem, 3vw, 2.1rem); }
.camp-hero-clock small { color: var(--camp-mute); }
.camp-hero-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.camp-hero-cats a, .camp-chip { display: inline-flex; gap: .4rem; align-items: baseline; padding: .3rem .7rem; border: 1px solid var(--camp-paper); color: var(--camp-paper); border-radius: 999px; text-decoration: none; font-size: .9rem; }
.camp-hero-cats a span { opacity: .7; font-variant-numeric: tabular-nums; }
.camp-hero-cats a:hover, .camp-hero-cats a:focus-visible { background: var(--camp-paper); color: var(--camp-black); }
.camp-hero-cta, .camp-btn { align-self: flex-start; display: inline-block; background: var(--camp-paper); color: var(--camp-black); font-weight: 800; padding: .6rem 1.2rem; border: 2px solid var(--camp-accent); border-radius: .3rem; text-decoration: none; }
.camp-hero-cta:hover, .camp-hero-cta:focus-visible, .camp-btn:hover, .camp-btn:focus-visible { background: var(--camp-black); color: var(--camp-paper); }
/* CAMP3: reduced motion shows the poster only */
@media (prefers-reduced-motion: reduce) { .camp-hero-media video { display: none; } }
@media (max-width: 767.98px) { .camp-hero-grid { grid-template-columns: 1fr; min-height: 0; } .camp-hero-media { order: -1; min-height: 14rem; aspect-ratio: 16 / 9; } }

/* ---------- campaign page, PDP block, notices ---------- */
.camp-page-head { background: var(--camp-black); color: var(--camp-paper); border-bottom: 3px solid var(--camp-accent); padding: 2rem 0; }
.camp-page-head h1 { color: var(--camp-paper); font-weight: 800; letter-spacing: -.02em; }
.camp-page-head p { color: var(--camp-mute); max-width: 40rem; }
.camp-panel { background: var(--camp-black); color: var(--camp-paper); border: 2px solid var(--camp-accent); border-radius: .4rem; padding: .9rem 1rem; margin-bottom: 1rem; }
.camp-panel .camp-badge { display: inline-block; background: var(--camp-accent); color: var(--camp-on-accent); font-weight: 800; font-size: .8rem; padding: .1rem .55rem; border-radius: .2rem; }
.camp-panel .camp-price { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; margin: .4rem 0 0; color: var(--camp-paper); }
.camp-panel .camp-regular { color: var(--camp-mute); margin: 0; }
.camp-panel .camp-clock { margin: .4rem 0 0; font-size: 1rem; color: var(--camp-paper); }
.camp-panel .camp-last { display: inline-block; margin-top: .4rem; border: 1px solid var(--camp-accent); padding: 0 .5rem; border-radius: .2rem; font-weight: 700; }
.camp-panel.is-soldout { background: #1c1c1e; border-color: #6B6B70; border-style: dashed; color: var(--camp-mute); }
.camp-panel.is-soldout .camp-price { text-decoration: line-through; color: var(--camp-mute); }
.pdp-gallery-soldout img { filter: grayscale(1); opacity: .5; }
.camp-note { border-left: 4px solid var(--camp-accent); background: var(--bs-tertiary-bg); padding: .5rem .75rem; font-size: .85rem; margin-top: .35rem; }
.camp-note-sold { border-left-color: #6B6B70; }
tr.camp-line-blocked td { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
tr.camp-line-blocked .cart-line-thumb img { filter: grayscale(1); opacity: .5; }
.camp-line-label { display: inline-block; background: var(--camp-black); color: var(--camp-paper); border: 1px solid var(--camp-accent); font-size: .7rem; font-weight: 700; padding: 0 .4rem; border-radius: .2rem; }
.camp-see-all { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .75rem; margin-bottom: 1rem; background: var(--camp-black); color: var(--camp-paper); border-left: 4px solid var(--camp-accent); border-radius: .25rem; }
.camp-see-all a { color: var(--camp-paper); font-weight: 700; }
.camp-filter-on { background: var(--camp-black) !important; color: var(--camp-paper) !important; border: 2px solid var(--camp-accent) !important; }
.camp-filter-off { border: 2px solid var(--camp-accent) !important; }
.camp-fam-head { border-bottom: 2px solid var(--camp-black); padding-bottom: .25rem; }
[data-theme="noir"] .camp-fam-head, [data-theme="daylight"] .camp-fam-head { border-bottom-color: var(--camp-accent); }
.qv-camp { display: inline-block; background: var(--camp-accent); color: var(--camp-on-accent); font-weight: 800; padding: 0 .4rem; border-radius: .2rem; font-size: .75rem; }
.qv-price.is-camp, .hero-card-price.is-camp strong { background: var(--camp-black); color: var(--camp-paper); padding: .15rem .45rem; border-radius: .2rem; display: inline-block; }
.hero-card.is-camp { outline: 2px solid var(--camp-accent); outline-offset: -2px; }
.hero-card-label-campaign { background: var(--camp-accent); color: var(--camp-on-accent); }
@media (prefers-reduced-motion: no-preference) { .camp-hero-cta, .camp-btn, .camp-hero-cats a { transition: background-color .15s, color .15s; } }
.hero-card.is-soldout .hero-card-media img { filter: grayscale(1); opacity: .45; }