/* U Jabka — premium layer over the Soda product detail (2026-10).
 *
 * Loaded after detail.css. It changes the CHOICE CONTROLS only — capacity and
 * jakost become tiles carrying their price or status, colours become round
 * swatches — plus the editorial details shared with the premium homepage
 * (numbered section labels, hairline fact tables). The stage, the device tones
 * (--pdp-bg), the gallery and every Soda transition are left exactly as
 * detail.css and gallery.js define them.
 */

/* ---------- capacity / jakost: tiles ---------- */
html.theme-soda .pdp .soda-configurator { gap: 1.1rem 1.5rem; margin-top: 1.5rem; }
html.theme-soda .pdp-axis__legend { margin-bottom: .6rem; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
html.theme-soda .pdp-axis__options { align-items: stretch; gap: 6px; }

html.theme-soda .pdp-axis__opt,
html.theme-soda .pdp-axis--grade .pdp-axis__opt {
    display: inline-grid;
    align-content: center;
    gap: 2px;
    min-width: 76px;
    min-height: 52px;
    padding: 8px 14px;
    border: 1px solid rgba(18, 18, 20, .14);
    border-radius: 6px;
    background: rgba(255, 255, 255, .38);
    color: var(--pdp-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: left;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html.theme-soda .pdp-axis__opt::after { content: none; }
html.theme-soda .pdp-axis__note { font-size: 11.5px; font-weight: 400; color: var(--pdp-mute); font-variant-numeric: tabular-nums; }
html.theme-soda a.pdp-axis__opt:hover { border-color: rgba(18, 18, 20, .42); background: rgba(255, 255, 255, .7); transform: translateY(-1px); }
html.theme-soda a.pdp-axis__opt:focus-visible { outline: 2px solid var(--pdp-ink); outline-offset: 2px; }
html.theme-soda .pdp-axis__opt.is-selected { border-color: var(--pdp-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--pdp-ink); font-weight: 500; }
html.theme-soda .pdp-axis__opt.is-disabled { border-style: dashed; background: none; color: rgba(18, 18, 20, .38); text-decoration: none; }
html.theme-soda .pdp-axis__opt.is-disabled .pdp-axis__value { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- colours: round swatches ---------- */
html.theme-soda .pdp-colors__row { gap: 6px; }
html.theme-soda .pdp-swatch { width: 70px; gap: .4rem; }
/* The coin is a solid dot in the colour's family (storefront_device_tone, the
   same families that tint the stage). A cropped photo would show its white
   ground in a 40px circle, so the device picture is not used here. */
html.theme-soda .pdp-swatch__pic { display: none; }
html.theme-soda .pdp-swatch__dot { --dot: #c9c7c2; display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(18, 18, 20, .14); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
html.theme-soda .pdp-swatch__dot[data-tone='blue'] { --dot: #5571d1; }
html.theme-soda .pdp-swatch__dot[data-tone='graphite'] { --dot: #2c2c30; }
html.theme-soda .pdp-swatch__dot[data-tone='lavender'] { --dot: #b8a5dc; }
html.theme-soda .pdp-swatch__dot[data-tone='warm'] { --dot: #ebe8e2; }
html.theme-soda .pdp-swatch__dot[data-tone='sage'] { --dot: #9db497; }
html.theme-soda .pdp-swatch__dot[data-tone='teal'] { --dot: #7dbab3; }
html.theme-soda .pdp-swatch__dot[data-tone='rose'] { --dot: #e7a8bb; }
html.theme-soda .pdp-swatch__dot[data-tone='peach'] { --dot: #e07a3b; }
html.theme-soda .pdp-swatch__dot[data-tone='sand'] { --dot: #d7c08c; }
html.theme-soda a.pdp-swatch:is(:hover, :focus-visible) .pdp-swatch__dot { transform: translateY(-2px); }
html.theme-soda .pdp-swatch.is-selected .pdp-swatch__dot { box-shadow: 0 0 0 2px var(--pdp-bg), 0 0 0 3px var(--pdp-ink); }
html.theme-soda .pdp-swatch.is-selected .pdp-swatch__name::after { content: none; }
html.theme-soda .pdp-swatch__name { font-size: 11.5px; }
html.theme-soda .pdp-swatch.is-disabled .pdp-swatch__dot { opacity: .35; }

/* ---------- hairline facts ---------- */
html.theme-soda .pdp-facts__row { border-bottom: 1px solid rgba(18, 18, 20, .1); }
html.theme-soda .pdp-facts__row dt { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--pdp-mute); }

@media (max-width: 960px) {
    html.theme-soda .pdp-axis__opt,
    html.theme-soda .pdp-axis--grade .pdp-axis__opt { min-width: 64px; min-height: 48px; padding: 7px 12px; font-size: 14px; }
    html.theme-soda .pdp-swatch { width: 62px; }
    html.theme-soda .pdp-swatch__dot { width: 36px; height: 36px; }
}

/* ---------- the owner's promo box (partials/detail-promo.php) ---------- */
html.theme-soda .pdp-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 24px 40px; align-items: center; margin: 0 var(--pdp-pad, 40px) 8px; padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 40px); border-radius: 8px; background: #0a0a0b; color: #f3f1ec; }
/* ---------- the model number is never cut ----------
   detail.css hangs the big model number .18em (.12em for long names) below
   the hero on purpose, and the hero's `overflow: hidden` clipped the bottom
   of every number. The composition stays (the number still overlaps the
   hero's edge and stays clear of the spec column above it); the hero now
   clips only sideways, so the digits show whole. The .pdp-doc padding below
   (≥ 3rem, 6vw) already clears that overhang; the promo box gets its own. */
@media (min-width: 900px) {
    html.theme-soda .pdp-hero { overflow: visible; overflow-x: clip; }
    html.theme-soda .pdp-promo { margin-top: calc(clamp(170px, 21vw, 330px) * .18 + 32px); }
}

html.theme-soda .pdp-promo[data-tone='copper'] { background: radial-gradient(70% 140% at 85% 50%, rgba(200, 116, 58, .45), rgba(200, 116, 58, 0) 70%), #0a0a0b; }
html.theme-soda .pdp-promo[data-tone='bone'] { background: #fff; color: #121214; box-shadow: inset 0 0 0 1px rgba(18, 18, 20, .1); }
html.theme-soda .pdp-promo p { margin: 0; }
html.theme-soda .pdp-promo__eyebrow, html.theme-soda .pdp-promo__label { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: .62; }
html.theme-soda .pdp-promo__title { margin-top: 8px !important; font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; line-height: .98; letter-spacing: -.03em; text-transform: uppercase; }
html.theme-soda .pdp-promo__body { margin-top: 10px !important; max-width: 52ch; font-size: 14px; opacity: .78; }
html.theme-soda .pdp-promo__code { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; background: rgba(255, 255, 255, .04); }
html.theme-soda .pdp-promo[data-tone='bone'] .pdp-promo__code { border-color: rgba(18, 18, 20, .14); background: #f7f6f3; }
html.theme-soda .pdp-promo__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.theme-soda .pdp-promo__row code { font-family: var(--font-main); font-size: 1.375rem; font-weight: 500; letter-spacing: .08em; user-select: all; }
html.theme-soda .pdp-promo__row button { min-height: 36px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 500 11px/1 var(--font-main); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
html.theme-soda .pdp-promo__note { font-size: 12.5px; opacity: .66; }

@media (max-width: 960px) {
    html.theme-soda .pdp-promo { grid-template-columns: 1fr; margin: 0 16px 8px; }
}
/* Verified single-item promo stays with the selected price and cart action. */
html.theme-soda .pdp-buy__promo { flex-basis: 100%; min-width: 0; }
html.theme-soda .pdp-buy__promo [data-detail-promo-price] { display: block; font: 400 clamp(30px, 4vw, 52px)/1.05 var(--font-display); letter-spacing: -.035em; }
html.theme-soda .pdp-buy__promo small { font-size: 14px; }
html.theme-soda .pdp-buy__promo code { font: inherit; font-weight: 600; user-select: all; }
html.theme-soda .pdp-buy__promo button { margin-top: .5rem; padding: .5rem .75rem; border: 1px solid currentColor; border-radius: 6px; color: inherit; background: transparent; cursor: pointer; }
html.theme-soda .pdp-buy__promo .pdp-buy__fine { margin: .3rem 0; padding: 0; }
/* .pdp-buy__fine is display: flex, which beats the UA's [hidden] rule; the
   fallback "Kód:" line promo-code.js toggles must really disappear. */
html.theme-soda .pdp-buy__promo [hidden] { display: none !important; }
html.theme-soda .pdp .pdp-buy [data-promo-regular] .soda-detail__price { font-size: 20px; letter-spacing: 0; }

/* ---------- phones (< 640px): the offer in the first screen ----------
   The promo price, its copy button and "Do košíku" must be visible without
   scrolling on a 375/390px phone whose browser chrome takes ~100px. The hero
   keeps its parts and order; only their height is trimmed: a shorter stage
   (the picture is object-fit: contain), a slightly smaller model name, tighter
   intro and promo spacing. Desktop and tablet are untouched. */
@media (max-width: 639.98px) {
    html.theme-soda .pdp-hero { padding-top: .25rem; }
    html.theme-soda .pdp-title { font-size: clamp(56px, 20vw, 140px); }
    html.theme-soda .pdp-intro { gap: .3rem; margin-top: .5rem; }
    /* A definite height also bounds the percentage-height frame and image.
       max-height alone let tall photos overflow underneath the controls. */
    html.theme-soda .pdp-stage { height: 32vh; max-height: 32vh; margin-top: .5rem; }
    html.theme-soda .pdp-views { margin-top: .7rem; }
    /* A block formatting context: the colours' top margin stays inside the buy
       article instead of collapsing through it, so the sticky dock (whose
       travel is bounded by the article) may start right under the stage. */
    html.theme-soda .pdp .soda-detail__buybox { display: flow-root; }
    html.theme-soda .pdp-buy__dock { padding-top: .6rem; }
    html.theme-soda .pdp-buy__promo [data-detail-promo-price] { font-size: 28px; }
    html.theme-soda .pdp-buy__promo button { margin-top: .3rem; }
    html.theme-soda .pdp-buy__promo .pdp-buy__fine { margin: .2rem 0 0; }
}