/* U Jabka — premium homepage (2026-10).
 *
 * The homepage authors its own light composition, like the detail (detail.css)
 * and the catalogue (plp.css): an owner-edited dark "Aktuálně" hero, then a
 * warm light editorial page. Product cards keep the Soda device tones
 * (--soda-tone-*), so the field stays as colourful as the catalogue.
 *
 * CSP: no inline styles anywhere; every state is a class or an attribute.
 */

html.theme-soda body[data-home='premium'] {
    --ph-night: #0a0a0b;
    --ph-night-2: #141416;
    --ph-bone: #f3f1ec;
    --ph-paper: #fbfaf7;
    --ph-ink: #121214;
    --ph-ink-2: #55555a;   /* 7.0:1 on bone */
    --ph-mist: #a1a1a6;    /* dark grounds only */
    --ph-line-dark: rgba(255, 255, 255, .14);
    --ph-line-light: rgba(18, 18, 20, .12);
    --ph-copper: #c8743a;
    --ph-ok: #2f7d55;
    --ph-display: clamp(2.75rem, 7.4vw, 8.5rem);
    --ph-title: clamp(2.125rem, 4.4vw, 4.5rem);
    --ph-statement: clamp(1.625rem, 3.3vw, 3.25rem);
    --ph-lead: clamp(1.0625rem, 1.25vw, 1.25rem);
    --ph-label: .6875rem;
    --ph-gutter: clamp(16px, 2.5vw, 40px);
    --ph-section: clamp(80px, 11vw, 168px);
    --ph-radius: 6px;
    --ph-ease: cubic-bezier(.22, .8, .2, 1);
    background: var(--ph-bone);
    color: var(--ph-ink);
}

html.theme-soda .ph-home { font-family: var(--font-main); color: var(--ph-ink); background: var(--ph-bone); }
html.theme-soda .ph-home h1, html.theme-soda .ph-home h2, html.theme-soda .ph-home h3, html.theme-soda .ph-home p, html.theme-soda .ph-home dl, html.theme-soda .ph-home dd, html.theme-soda .ph-home ol, html.theme-soda .ph-home ul, html.theme-soda .ph-home figure { margin: 0; }
html.theme-soda .ph-home :where(h1, h2, h3) { color: inherit; }
html.theme-soda .ph-home ol, html.theme-soda .ph-home ul { padding: 0; list-style: none; }
html.theme-soda .ph-home img { display: block; max-width: 100%; }
html.theme-soda .ph-home :focus-visible { outline: 2px solid var(--ph-copper); outline-offset: 3px; }

/* ---------- header over the hero / on the light page ---------- */
html.theme-soda body[data-home='premium'] .soda-header {
    --ink: #ffffff;
    color: #fff;
}
html.theme-soda body[data-home='premium']:is([data-hero-ink='dark']) .soda-header:not(.is-scrolled), html.theme-soda body[data-home='premium'] .soda-header.is-scrolled {
    --ink: #121214;
    --ink-muted: rgba(18, 18, 20, .62);
    --ink-faint: rgba(18, 18, 20, .5);
    --btn-border: rgba(18, 18, 20, .16);
    --hover-wash: rgba(18, 18, 20, .06);
    --line-hi: rgba(18, 18, 20, .3);
    --focus: #121214;
    color: #121214;
}
html.theme-soda body[data-home='premium']:is([data-hero-ink='dark']) .soda-header:not(.is-scrolled) .soda-brand__lockup, html.theme-soda body[data-home='premium'] .soda-header.is-scrolled .soda-brand__lockup { filter: invert(1); }
html.theme-soda body[data-home='premium'] .soda-header.is-scrolled .soda-icon-btn .cart-badge { background: #121214; color: #fff; }
html.theme-soda body[data-home='premium'] .soda-header.is-scrolled .soda-header__shell {
    border-color: rgba(18, 18, 20, .08);
    background: rgba(247, 246, 243, .72);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 6px 24px rgba(18, 18, 20, .06);
}
@media (min-width: 1024px) {
    html.theme-soda body[data-home='premium'] .soda-header.is-scrolled .soda-nav__item:is(:hover, :focus-visible, .is-current) { color: #121214; }
    html.theme-soda body[data-home='premium'] .soda-header.is-scrolled .soda-nav__item.is-current { border-bottom-color: #121214; }
}
/* Phone menu: the header above switches --ink to dark over light slides and
   once scrolled, so the shell's dark card would carry dark rows. The menu is
   a light card in its own ink, as on the other light pages, whatever the slide. */
@media (max-width: 1023.98px) {
    html.theme-soda body[data-home='premium'] .soda-header .soda-nav {
        --ink: #121214;
        --ink-muted: rgba(18, 18, 20, .72);
        --focus: #121214;
        border-color: rgba(18, 18, 20, .08);
        background: rgba(250, 249, 247, .96);
        box-shadow: 0 18px 50px rgba(18, 18, 20, .12);
        color: #121214;
    }
    html.theme-soda body[data-home='premium'] .soda-header .soda-nav__item { border-bottom-color: rgba(18, 18, 20, .07); color: var(--ink-muted); }
    html.theme-soda body[data-home='premium'] .soda-header .soda-nav__item:last-child { border-bottom-color: transparent; }
    html.theme-soda body[data-home='premium'] .soda-header .soda-nav__item:is(:hover, :focus-visible, .is-current) { color: #121214; }
}

/* The hero runs under the floating bar: cancel the shell's header band. */
html.theme-soda body[data-home='premium'] main#obsah { padding-top: 0; background: none; }

/* ---------- type ---------- */
html.theme-soda .ph-display { font-family: var(--font-display); font-size: var(--ph-display); font-weight: 500; line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
html.theme-soda .ph-title { font-family: var(--font-display); font-size: var(--ph-title); font-weight: 500; line-height: .95; letter-spacing: -.03em; }
html.theme-soda .ph-eyebrow { font-size: var(--ph-label); font-weight: 500; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--ph-mist); }
html.theme-soda .ph-eyebrow span { margin-right: .7em; opacity: .7; }
html.theme-soda .ph-eyebrow--ink { color: var(--ph-ink-2); }
html.theme-soda .ph-lead { font-size: var(--ph-lead); line-height: 1.5; }
html.theme-soda .ph-link { font-size: .875rem; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

html.theme-soda .ph-btn { display: inline-flex; align-items: center; gap: .75em; min-height: 48px; padding: 0 1.5em; border-radius: 999px; border: 1px solid transparent; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: background .3s var(--ph-ease), color .3s var(--ph-ease), border-color .3s var(--ph-ease); }
html.theme-soda .ph-btn span { transition: transform .3s var(--ph-ease); }
html.theme-soda .ph-btn:hover span { transform: translateX(4px); }
html.theme-soda .ph-btn--light { background: var(--ph-bone); color: var(--ph-ink); }
html.theme-soda .ph-btn--light:hover { background: #fff; }
html.theme-soda .ph-btn--dark { background: var(--ph-ink); color: var(--ph-bone); }
html.theme-soda .ph-btn--dark:hover { background: #000; }
html.theme-soda .ph-btn--ghost { border-color: var(--ph-line-light); }
html.theme-soda .ph-btn--ghost:hover { border-color: var(--ph-ink); }

/* ---------- hero ---------- */
html.theme-soda .ph-hero { position: relative; display: grid; min-height: max(640px, min(100svh, 1080px)); overflow: hidden; background: var(--ph-night); color: var(--ph-bone); }
html.theme-soda .ph-slide { position: relative; grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); grid-template-rows: 1fr auto; column-gap: var(--ph-gutter); padding: 120px var(--ph-gutter) 128px; background: var(--ph-night); opacity: 0; visibility: hidden; transition: opacity .9s var(--ph-ease), visibility 0s linear .9s; }
html.theme-soda .ph-slide[hidden] { display: grid; }
html.theme-soda .ph-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--ph-ease), visibility 0s; }
html.theme-soda .ph-slide[data-tone='copper'] { background: radial-gradient(60% 70% at 62% 42%, rgba(200, 116, 58, .42), rgba(200, 116, 58, 0) 70%), var(--ph-night); }
html.theme-soda .ph-slide[data-tone='bone'] { background: var(--ph-bone); color: var(--ph-ink); }

html.theme-soda .ph-slide__media { position: absolute; inset: 0; z-index: 0; }
html.theme-soda .ph-slide__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
html.theme-soda .ph-slide.is-active .ph-slide__media img { transform: scale(1); }
html.theme-soda .ph-slide--photo .ph-slide__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, .35) 0%, rgba(10, 10, 11, 0) 30%, rgba(10, 10, 11, .15) 55%, rgba(10, 10, 11, .72) 100%); }
/* A light photograph: a light veil under the copy, dark ink on top (the header too). */
html.theme-soda .ph-slide--photo[data-tone='bone'] .ph-slide__media::after { background: linear-gradient(180deg, rgba(243, 241, 236, .55) 0%, rgba(243, 241, 236, 0) 18%, rgba(243, 241, 236, 0) 42%, rgba(243, 241, 236, .9) 86%), linear-gradient(90deg, rgba(243, 241, 236, .55) 0%, rgba(243, 241, 236, 0) 45%); }
html.theme-soda .ph-slide--product .ph-slide__media { display: grid; place-items: center; }
html.theme-soda .ph-slide--product .ph-slide__media img { width: auto; height: auto; max-width: 62%; max-height: min(84%, 640px); object-fit: contain; margin-left: 8%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)); }
/* On the light slide a white-grounded shop render is multiplied into the
   ground, so it needs no cut-out; a drop shadow would draw a grey box. */
html.theme-soda .ph-slide--product[data-tone='bone'] .ph-slide__media { mix-blend-mode: multiply; place-items: center; padding: 88px var(--ph-gutter) 24px; }
/* Above the copy and the code box, never under them. */
/* Large, across the hero and under the copy; the veil below keeps the type legible. */
html.theme-soda .ph-slide--product[data-tone='bone'] .ph-slide__media img { filter: none; max-width: 100%; max-height: 100%; margin: 0; }
html.theme-soda .ph-slide--product[data-tone='bone']::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgba(243, 241, 236, .97) 0%, rgba(243, 241, 236, .9) 34%, rgba(243, 241, 236, 0) 62%); }

html.theme-soda .ph-slide__copy, html.theme-soda .ph-slide__aside { position: relative; z-index: 1; }
html.theme-soda .ph-slide__copy { grid-column: 1; grid-row: 2; align-self: end; }
html.theme-soda .ph-slide__copy .ph-eyebrow { margin-bottom: 1.5rem; }
html.theme-soda .ph-slide[data-tone='bone'] .ph-eyebrow { color: var(--ph-ink-2); }
html.theme-soda .ph-slide .ph-display { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ph-ease) .15s, transform .9s var(--ph-ease) .15s; }
html.theme-soda .ph-slide.is-active .ph-display { opacity: 1; transform: none; }
html.theme-soda .ph-slide__aside { grid-column: 2; grid-row: 2; align-self: end; display: grid; gap: 1.25rem; font-size: .9375rem; line-height: 1.55; color: rgba(243, 241, 236, .8); }
html.theme-soda .ph-slide[data-tone='bone'] .ph-slide__aside { color: var(--ph-ink-2); }
html.theme-soda .ph-slide__aside .ph-btn { justify-self: start; }
html.theme-soda .ph-slide__price { font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em; color: var(--ph-bone); }
html.theme-soda .ph-slide[data-tone='bone'] .ph-slide__price { color: var(--ph-ink); }

html.theme-soda .ph-code { display: grid; gap: .5rem; padding: 14px 16px; border: 1px solid var(--ph-line-dark); border-radius: var(--ph-radius); background: rgba(255, 255, 255, .04); }
html.theme-soda .ph-slide[data-tone='bone'] .ph-code { border-color: var(--ph-line-light); background: rgba(255, 255, 255, .6); }
html.theme-soda .ph-code__label { font-size: var(--ph-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ph-mist); }
html.theme-soda .ph-slide[data-tone='bone'] .ph-code__label { color: var(--ph-ink-2); }
html.theme-soda .ph-code__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
html.theme-soda .ph-code__value { font-family: var(--font-main); font-size: 1.375rem; font-weight: 500; letter-spacing: .08em; color: var(--ph-bone); user-select: all; }
html.theme-soda .ph-slide[data-tone='bone'] .ph-code__value { color: var(--ph-ink); }
html.theme-soda .ph-code__copy { min-height: 36px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 500 .6875rem/1 var(--font-main); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
html.theme-soda .ph-code__copy:hover { background: rgba(255, 255, 255, .08); }
html.theme-soda .ph-code__note { font-size: .8125rem; color: var(--ph-mist); }
html.theme-soda .ph-slide[data-tone='bone'] .ph-code__note { color: var(--ph-ink-2); }

html.theme-soda .ph-hero__rail { position: absolute; z-index: 5; left: var(--ph-gutter); right: var(--ph-gutter); bottom: 32px; display: flex; align-items: flex-end; gap: var(--ph-gutter); }
html.theme-soda .ph-hero__tabs { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--ph-gutter); }
html.theme-soda .ph-hero__tab { position: relative; min-height: 44px; padding: 14px 0 0; border: 0; border-top: 1px solid rgba(243, 241, 236, .22); background: none; color: rgba(243, 241, 236, .55); font: 500 .6875rem/1.2 var(--font-main); letter-spacing: .14em; text-transform: uppercase; text-align: left; cursor: pointer; }
html.theme-soda .ph-hero__tab[aria-selected='true'] { color: var(--ph-bone); }
html.theme-soda .ph-hero__tab i { position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: currentColor; }
html.theme-soda .ph-hero.is-playing .ph-hero__tab[aria-selected='true'] i { animation: ph-progress 7s linear forwards; }
html.theme-soda .ph-hero.is-held .ph-hero__tab[aria-selected='true'] i { animation-play-state: paused; }
html.theme-soda .ph-hero__pause { min-height: 44px; padding: 0 0 0 1rem; border: 0; background: none; color: rgba(243, 241, 236, .7); font: 500 .6875rem/1 var(--font-main); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
html.theme-soda .ph-hero[data-tone='bone'] .ph-hero__tab { color: rgba(18, 18, 20, .45); border-top-color: var(--ph-line-light); }
html.theme-soda .ph-hero[data-tone='bone'] .ph-hero__tab[aria-selected='true'], html.theme-soda .ph-hero[data-tone='bone'] .ph-hero__pause { color: var(--ph-ink); }
@keyframes ph-progress { to { width: 100%; } }

/* ---------- statement ---------- */
html.theme-soda .ph-statement { padding: var(--ph-section) var(--ph-gutter) calc(var(--ph-section) * .7); background: var(--ph-paper); }
html.theme-soda .ph-statement .ph-eyebrow { margin-bottom: 2.5rem; }
html.theme-soda .ph-statement__text { max-width: 30ch; font-size: var(--ph-statement); font-weight: 400; line-height: 1.12; letter-spacing: -.025em; }
html.theme-soda .ph-statement__text em { font-style: normal; color: var(--ph-ink-2); }
/* These three spacers must outrank the homepage's element margin reset. */
html.theme-soda .ph-home .ph-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: var(--ph-gutter); margin-top: clamp(48px, 7vw, 96px); padding-top: 24px; border-top: 1px solid var(--ph-line-light); }
html.theme-soda .ph-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .5rem; }
html.theme-soda .ph-stats dt { font-size: .8125rem; color: var(--ph-ink-2); max-width: 30ch; }
html.theme-soda .ph-stats dd { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 500; letter-spacing: -.02em; }

/* ---------- section head ---------- */
html.theme-soda .ph-sechead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: 1rem var(--ph-gutter); margin-bottom: clamp(28px, 3vw, 40px); }
html.theme-soda .ph-sechead .ph-eyebrow { grid-column: 1 / -1; }
html.theme-soda .ph-sechead__lead { color: var(--ph-ink-2); font-size: .9375rem; }

/* ---------- featured: filter + irregular field of Soda cards ---------- */
html.theme-soda .ph-shelf { padding: var(--ph-section) var(--ph-gutter); }
html.theme-soda .ph-filter { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--ph-line-light); }
html.theme-soda .ph-filter .soda-filter__opt { display: inline-flex; align-items: baseline; gap: .35em; min-height: 40px; padding: 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--ph-ink-2); font: 500 .9375rem/1 var(--font-main); cursor: pointer; }
html.theme-soda .ph-filter .soda-filter__opt.is-current, html.theme-soda .ph-filter .soda-filter__opt[aria-checked='true'] { color: var(--ph-ink); border-bottom-color: var(--ph-ink); }
html.theme-soda .ph-filter .soda-filter__count { font-size: .6875rem; color: var(--ph-ink-2); }

html.theme-soda .ph-field { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(340px, 30vw, 460px); grid-auto-flow: dense; gap: 0; border-top: 1px solid var(--ph-line-light); border-left: 1px solid var(--ph-line-light); }
html.theme-soda .ph-field__cell { grid-column: span 4; min-width: 0; border-right: 1px solid var(--ph-line-light); border-bottom: 1px solid var(--ph-line-light); }
html.theme-soda .ph-field__cell[hidden] { display: none; }
html.theme-soda .ph-field__cell--xl { grid-column: span 7; grid-row: span 2; }
html.theme-soda .ph-field__cell--md { grid-column: span 5; }

html.theme-soda .ph-card { --tone: var(--soda-tone-neutral, #ebeae6); position: relative; height: 100%; display: flex; flex-direction: column; padding: clamp(20px, 2.2vw, 32px); overflow: hidden; isolation: isolate; background: var(--tone); transition: background .4s var(--ph-ease); }
html.theme-soda .ph-card[data-tone='blue'] { --tone: var(--soda-tone-blue); }
html.theme-soda .ph-card[data-tone='graphite'] { --tone: var(--soda-tone-graphite); }
html.theme-soda .ph-card[data-tone='lavender'] { --tone: var(--soda-tone-lavender); }
html.theme-soda .ph-card[data-tone='warm'] { --tone: var(--soda-tone-warm); }
html.theme-soda .ph-card[data-tone='sage'] { --tone: var(--soda-tone-sage); }
html.theme-soda .ph-card[data-tone='teal'] { --tone: var(--soda-tone-teal); }
html.theme-soda .ph-card[data-tone='rose'] { --tone: var(--soda-tone-rose); }
html.theme-soda .ph-card[data-tone='peach'] { --tone: var(--soda-tone-peach); }
html.theme-soda .ph-card[data-tone='sand'] { --tone: var(--soda-tone-sand); }
html.theme-soda .ph-card__name { font-family: var(--font-display); font-size: clamp(1.75rem, 2.6vw, 2.75rem); font-weight: 300; line-height: .95; letter-spacing: -.035em; }
html.theme-soda .ph-card__name b { font-weight: 500; }
html.theme-soda .ph-field__cell--xl .ph-card__name { font-size: clamp(2.5rem, 4.4vw, 4.75rem); }
html.theme-soda .ph-card__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
html.theme-soda .ph-card__facts { display: grid; gap: 2px; margin-top: .75rem; font-size: .8125rem; color: var(--ph-ink-2); }
/* The picture sits IN the column between the facts and the price, so copy can
   never run over it. The whole figure is multiplied into the card's tone, the
   detail's rule: a white-grounded render or photo loses its white and keeps
   its colours, so no white box ever shows on a tinted card. */
html.theme-soda .ph-card__media { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 14px 0 10px; mix-blend-mode: multiply; }
html.theme-soda .ph-card__media img { display: block; width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; transform: rotate(-4deg); transition: transform .8s var(--ph-ease); }
html.theme-soda .ph-card__media--photo img { transform: none; }
html.theme-soda .ph-card:hover .ph-card__media img { transform: translateY(-8px) rotate(-6deg) scale(1.03); }
html.theme-soda .ph-card:hover .ph-card__media--photo img { transform: translateY(-6px) scale(1.02); }
html.theme-soda .ph-card__device { width: 46%; height: auto; color: rgba(18, 18, 20, .25); }
html.theme-soda .ph-card__foot { display: grid; gap: .35rem; padding-right: 56px; }
html.theme-soda .ph-card__status { display: inline-flex; align-items: center; gap: .5em; font-size: .8125rem; color: var(--ph-ink-2); }
html.theme-soda .ph-card__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ph-ok); }
html.theme-soda .ph-card__status--order::before { background: var(--ph-copper); }
html.theme-soda .ph-card__price { font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
html.theme-soda .ph-field__cell--xl .ph-card__price { font-size: clamp(2rem, 3.4vw, 3.5rem); }
html.theme-soda .ph-card__plus { position: absolute; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ph-ink); color: #fff; font-size: 1.375rem; font-weight: 300; transition: transform .3s var(--ph-ease); }
html.theme-soda .ph-card:hover .ph-card__plus { transform: rotate(90deg); }
html.theme-soda .ph-empty[hidden] { display: none; }
html.theme-soda .ph-empty { padding: 48px 0; color: var(--ph-ink-2); display: grid; gap: 1rem; justify-items: start; }
html.theme-soda .ph-shelf__all { margin-top: 28px; }

/* ---------- split sections ---------- */
html.theme-soda .ph-split { --tone: var(--soda-tone-neutral, #ebeae6); display: grid; grid-template-columns: 1fr 1fr; min-height: min(88vh, 860px); background: var(--ph-paper); border-top: 1px solid var(--ph-line-light); }
html.theme-soda .ph-split[data-tone='blue'] { --tone: var(--soda-tone-blue); }
html.theme-soda .ph-split[data-tone='sand'] { --tone: var(--soda-tone-sand); }
html.theme-soda .ph-split__media { position: relative; overflow: hidden; background: var(--tone); }
html.theme-soda .ph-split__media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 1.2s var(--ph-ease); }
html.theme-soda .ph-split:hover .ph-split__media img { transform: scale(1.03); }
html.theme-soda .ph-split__copy { display: grid; align-content: center; justify-items: start; gap: 1.5rem; max-width: 680px; padding: var(--ph-section) clamp(24px, 6vw, 112px); }
html.theme-soda .ph-split__copy .ph-lead { max-width: 36ch; color: var(--ph-ink-2); }
html.theme-soda .ph-split--rev .ph-split__media { order: 2; }
html.theme-soda .ph-split--rev { background: var(--ph-bone); }

html.theme-soda .ph-split--noart { grid-template-columns: 1fr; min-height: 0; }
html.theme-soda .ph-split--noart .ph-split__copy { max-width: 880px; padding-block: calc(var(--ph-section) * .7); }

/* ---------- trust: numbered list + steps ---------- */
html.theme-soda .ph-craft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--ph-gutter); padding: var(--ph-section) var(--ph-gutter) 0; background: var(--ph-night); color: var(--ph-bone); }
html.theme-soda .ph-craft__head { align-self: start; display: grid; gap: 1.5rem; }
html.theme-soda .ph-craft__word { font-family: var(--font-display); font-size: clamp(2.75rem, 6vw, 6.5rem); font-weight: 500; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
html.theme-soda .ph-craft__lead { max-width: 42ch; color: var(--ph-mist); font-size: .9375rem; }
html.theme-soda .ph-craft__list { border-top: 1px solid var(--ph-line-dark); }
html.theme-soda .ph-craft__list li { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 32px 0; border-bottom: 1px solid var(--ph-line-dark); transition: padding .4s var(--ph-ease); }
html.theme-soda .ph-craft__list li:hover { padding-left: 12px; }
html.theme-soda .ph-craft__list h3 { font-size: clamp(1.5rem, 2.3vw, 2.25rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
html.theme-soda .ph-craft__list p { margin-top: .5rem; max-width: 46ch; font-size: .9375rem; color: var(--ph-mist); }
html.theme-soda .ph-steps { grid-column: 1 / -1; margin-top: var(--ph-section); padding-top: 32px; border-top: 1px solid var(--ph-line-dark); }
html.theme-soda .ph-home .ph-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ph-gutter); margin-top: 20px; }
html.theme-soda .ph-steps__list li { display: grid; gap: .75rem; padding-top: 16px; border-top: 1px solid var(--ph-line-dark); font-size: clamp(1.125rem, 1.6vw, 1.5rem); letter-spacing: -.01em; }
html.theme-soda .ph-home .ph-steps__links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-size: .875rem; color: var(--ph-mist); }
html.theme-soda .ph-steps__links a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding-block: 8px; line-height: 1.5; }
html.theme-soda .ph-steps__links a:hover { color: var(--ph-bone); }
html.theme-soda .ph-craft__band { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: 64px; padding: 40px 0; border-top: 1px solid var(--ph-line-dark); font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.01em; }

/* ---------- FAQ (soda-acc re-skinned light) ---------- */
html.theme-soda .ph-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--ph-gutter); padding: var(--ph-section) var(--ph-gutter); background: var(--ph-bone); }
html.theme-soda .ph-faq__head { display: grid; gap: 1.25rem; align-content: start; }
html.theme-soda .ph-faq__list { --ink: #121214; --ink-muted: var(--ph-ink-2); --line: var(--ph-line-light); --line-hi: rgba(18, 18, 20, .3); color: var(--ph-ink); border-top: 1px solid var(--ph-line-light); }
html.theme-soda .ph-faq__list .soda-acc { border-color: var(--ph-line-light); background: none; }
html.theme-soda .ph-faq__list .soda-acc__q { color: var(--ph-ink); font-size: clamp(1.0625rem, 1.4vw, 1.375rem); }
html.theme-soda .ph-faq__list .soda-acc__a p { color: var(--ph-ink-2); }

/* ---------- phones ---------- */
@media (max-width: 960px) {
    html.theme-soda .ph-slide { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 1fr) auto auto; row-gap: 1.25rem; padding: 88px var(--ph-gutter) 88px; }
    html.theme-soda .ph-slide__copy { grid-row: 2; }
    html.theme-soda .ph-slide__aside { grid-column: 1; grid-row: 3; gap: 1rem; font-size: .875rem; }
    html.theme-soda .ph-slide__body { max-width: 36ch; }
    html.theme-soda .ph-slide--product .ph-slide__media { place-items: start center; padding-top: 72px; }
    html.theme-soda .ph-slide--product .ph-slide__media img,
    html.theme-soda .ph-slide--product[data-tone='bone'] .ph-slide__media { padding: 72px var(--ph-gutter) 0; place-items: start center; }
    html.theme-soda .ph-slide--product[data-tone='bone'] .ph-slide__media img { max-width: 100%; max-height: min(52%, 420px); margin: 0; }
    html.theme-soda .ph-slide__price { font-size: 1.5rem; }
    html.theme-soda .ph-code__value { font-size: 1.125rem; }
    html.theme-soda .ph-hero__rail { bottom: 16px; }
    html.theme-soda .ph-hero__tabs { gap: 10px; }
    html.theme-soda .ph-hero__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    html.theme-soda .ph-hero__tab { padding-top: 10px; }
    html.theme-soda .ph-home .ph-stats { grid-template-columns: 1fr; gap: 20px; }
    html.theme-soda .ph-sechead { grid-template-columns: 1fr; }
    html.theme-soda .ph-field { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 300px; }
    html.theme-soda .ph-field__cell { grid-column: span 1; }
    html.theme-soda .ph-field__cell--xl { grid-column: span 2; grid-row: span 2; }
    html.theme-soda .ph-field__cell--md { grid-column: span 2; }
    /* Three small cards on two columns: the first takes the full row, so none is left alone. */
    html.theme-soda .ph-field__cell--sm:nth-child(6n + 4) { grid-column: span 2; }
    html.theme-soda .ph-card { padding: 18px; }
    html.theme-soda .ph-card__name { font-size: 1.5rem; }
    html.theme-soda .ph-field__cell--xl .ph-card__name { font-size: 2.5rem; }
    html.theme-soda .ph-card__facts { font-size: .75rem; }
    html.theme-soda .ph-card__media { margin: 10px 0 8px; }
    html.theme-soda .ph-card__price { font-size: 1.375rem; }
    html.theme-soda .ph-card__plus { top: 14px; right: 14px; bottom: auto; width: 32px; height: 32px; font-size: 1rem; }
    html.theme-soda .ph-card__name { padding-right: 36px; }
    html.theme-soda .ph-card__foot { padding-right: 0; }
    html.theme-soda .ph-card__status { font-size: .6875rem; }
    html.theme-soda .ph-split, html.theme-soda .ph-split--rev { grid-template-columns: 1fr; min-height: 0; }
    html.theme-soda .ph-split__media { aspect-ratio: 4 / 3.2; }
    html.theme-soda .ph-split--rev .ph-split__media { order: 0; }
    html.theme-soda .ph-split__copy { padding: 48px var(--ph-gutter) 72px; }
    html.theme-soda .ph-craft, html.theme-soda .ph-faq { grid-template-columns: 1fr; }
    html.theme-soda .ph-craft__head { position: static; }
    html.theme-soda .ph-craft__list li { padding: 24px 0; }
    html.theme-soda .ph-home .ph-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-soda .ph-home *, html.theme-soda .ph-home *::before, html.theme-soda .ph-home *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- upcoming categories (not links) ---------- */
html.theme-soda .ph-upcoming { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ph-line-light); background: var(--ph-paper); }
html.theme-soda .ph-upcoming__card { position: relative; display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center; padding: 24px var(--ph-gutter); }
html.theme-soda .ph-upcoming__card + .ph-upcoming__card { border-left: 1px solid var(--ph-line-light); }
html.theme-soda .ph-upcoming__card img { grid-row: span 2; width: 96px; height: 96px; object-fit: cover; border-radius: var(--ph-radius); filter: grayscale(1); opacity: .75; }
html.theme-soda .ph-upcoming__name { align-self: end; font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; }
html.theme-soda .ph-upcoming__soon { align-self: start; font-size: var(--ph-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ph-ink-2); }
@media (max-width: 960px) {
    html.theme-soda .ph-upcoming { grid-template-columns: 1fr; }
    html.theme-soda .ph-upcoming__card + .ph-upcoming__card { border-left: 0; border-top: 1px solid var(--ph-line-light); }
    html.theme-soda .ph-upcoming__card { grid-template-columns: 64px 1fr; }
    html.theme-soda .ph-upcoming__card img { width: 64px; height: 64px; }
}