/*
Theme Name: Tumil's
Theme URI: https://tumils.com
Author: Dario Bimbi
Author URI: https://tumils.com
Description: Storefront and support site for Tumil's — WordPress and Divi plugins. Hand-built block theme, Nordic palette, self-hosted type, no build step and no external dependencies.
Version: 1.3.0
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tumils
Tags: block-theme, full-site-editing, custom-colors, custom-menu, block-patterns
*/

/* ============================================================
   Most styling lives in theme.json. This file holds utilities
   and refinements that are awkward to express there.

   Translucency rule: color-mix() against a preset var, never a
   hand-written rgba() triplet. A recolor then stays one file.
   ============================================================ */

/* Dark band contract. Any pattern that can sit inside a band carries
   .on-band; both the ground and the text colour come from tokens. */
.on-band {
    background-color: var(--wp--preset--color--band);
    color: var(--wp--preset--color--on-band);
}

.on-band a:not(.wp-element-button) {
    color: var(--wp--preset--color--on-band);
    text-decoration-color: color-mix(in srgb, var(--wp--preset--color--on-band) 45%, transparent);
}

/* GOLD IS THE ON-BAND ACCENT. Falu is the accent on paper, where it measures
   5.4:1; on the pine band it collapses to 2.17:1 and a falu hover underline is
   effectively invisible. That is not a preference — making the header a band
   silently broke every hover affordance inside it, because those rules all
   pointed at `primary`.

   Ochre against pine is 4.82:1, which clears AA for normal-size text, so the
   hover state is readable on the band without touching anything on paper.
   tools/check.php asserts both ratios. */
.on-band a:not(.wp-element-button):hover,
.on-band a:not(.wp-element-button):focus-visible {
    color: var(--wp--preset--color--highlight);
    text-decoration-color: currentColor;
}

.on-band hr,
.on-band .wp-block-separator {
    border-color: color-mix(in srgb, var(--wp--preset--color--on-band) 22%, transparent);
}

/* Full-bleed band: escapes the constrained layout without a wrapper.
   useRootPaddingAwareAlignments is on, so WordPress's own generated
   layout rule reads `:where(:not(.alignfull)){max-width:...;
   margin-left/right:auto !important}` on every non-alignfull child of a
   constrained layout — a plain calc(-50vw + 50%) margin loses to that
   !important and only partially bleeds, growing further off the mark as
   the viewport grows past content-size. Dropping max-width is enough on
   its own for a direct child of a plain flow container (the footer
   group, whose own parent carries no padding to cancel): with no
   max-width, "margin:auto" on an auto-width block resolves to 0 and the
   element already fills its container edge to edge.
   A child of a .has-global-padding container is different — that
   ancestor's real inline padding still needs canceling, and only that
   ancestor's negative margin gets it flush. --wp--style--root--padding-*
   is a custom property, so it inherits down past that ancestor and would
   double-subtract if applied unconditionally: scoped to a *direct* child
   of .has-global-padding, it fires only where the padding it is
   canceling is actually present on the parent box. */
.band-bleed {
    max-width: none;
}

.has-global-padding > .band-bleed {
    margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1) !important;
    margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
    padding-inline: var(--wp--style--root--padding-left, 0px);
}

/* The product page wraps its whole pattern in one <article class="product">
   (a semantic wrapper, not a WP block — nothing in this file selects
   through it, so it carries no layout meaning of its own). Being the
   direct child of main.is-layout-constrained, WordPress's own zero-
   specificity layout rule still caps IT at content-size and centers it —
   one level deeper than the .has-global-padding > .band-bleed rule above
   reaches, so the product page's own dark band (task 7) sat inside that
   704px column instead of bleeding, with this harness's own responsive
   sweep the only thing that caught it (no pixel-geometry assertion in
   tools/check.php covers this). Fix: stop capping .product itself — max-
   width has no !important on WordPress's side, so a plain override wins;
   margin needs !important to beat WordPress's own — and push the content
   width down onto each ordinary section instead, so .product becomes a
   plain pass-through the same width as main's own padded content box. */
.product {
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ...and that width has to land on the children, or "pass-through" just means
   "full bleed". It did: every section ran to the viewport edge while the header
   stayed in main's constrained column, so the wordmark sat ~380px inside the
   product title. Reproducing WordPress's own constrained layout on the children
   is what keeps the two in the same column — the header is a constrained group,
   so it centres a content-size box, and this centres the same box. Do not
   replace with a left margin: that would align at one viewport width and drift
   at every other. .band-bleed opts back out below. */
.product > * {
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
}

/* Skip link — keyboard users land on main, not the nav. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--wp--preset--spacing--20);
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--on-band);
}

.skip-link:focus {
    left: 0;
}

/* Respect reduced-motion globally rather than per-pattern. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Site brand — Cinzel is confined to this and page h1s. Never uppercase:
   the logo artwork face renders capital U as V ("TVMIL'S"). */
/* --- The header band --------------------------------------------------- */
/* The root layout's blockGap applies a margin-block-start to <main> as a
   sibling of the header template part. That was invisible while the header
   shared the body's ground; with the header as a band it renders as a 1.5rem
   stripe of page background between the two. The band's own bottom padding is
   the separation now, so the gap goes.

   Scoped to main rather than removed from blockGap: every other use of that
   gap, inside every constrained group on the site, is still wanted. */
main#main {
    margin-block-start: 0;
}

/* The header carries .on-band and takes the pine ground from it — the same
   band as the footer, with no override of its own. A teal variant was tried
   first and needed a dedicated token to clear AA; pine is 11.98:1 against the
   on-band paper and needs nothing. */

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    text-decoration: none;
    color: var(--wp--preset--color--primary);
}

/* On the band every stroke of the seal takes the on-band token. The mark is
   monoline there — see patterns/site-brand.php for why the falu badge cannot
   carry the header. */
.on-band .site-brand {
    color: var(--wp--preset--color--on-band);
}

/* The whole lockup shifts to ochre together — seal, name and descriptor. Each
   of the three has its own colour rule, so hovering without all three listed
   turns the seal gold and leaves the wordmark paper, which reads as a broken
   sprite rather than a hover state. */
.on-band .site-brand:hover,
.on-band .site-brand:focus-visible,
.on-band .site-brand:hover .site-brand__word,
.on-band .site-brand:focus-visible .site-brand__word {
    color: var(--wp--preset--color--highlight);
}

.on-band .site-brand:hover .site-brand__sub,
.on-band .site-brand:focus-visible .site-brand__sub {
    color: color-mix(in srgb, var(--wp--preset--color--highlight) 82%, transparent);
    border-top-color: color-mix(in srgb, var(--wp--preset--color--highlight) 55%, transparent);
}

/* 3.5rem = 56px, above the ~48px floor where the seal's inscription stops
   reading as letters. Shrinking this is what breaks the mark. */
.site-brand__seal {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    display: block;
}

/* The reduced mark. Retained for anywhere the seal is too small to hold its
   inscription; its ground is currentColor, so the falu comes from .site-brand
   and the badge stays identical to the PNG favicons on every ground. */
.site-brand__mark {
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    display: block;
}

/* Set here rather than as a fill attribute in the pattern: var() is reliable
   in a CSS declaration but not in an SVG presentation attribute. */
.site-brand__glyph {
    fill: var(--wp--preset--color--background);
}

.site-brand__lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* The rule under the name is a border rather than a drawn element, so it spans
   exactly the text's width at any font size with nothing to measure. */
.site-brand__sub {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.2;
    padding-top: 0.24rem;
    margin-top: 0.18rem;
    border-top: 2px solid color-mix(in srgb, var(--wp--preset--color--on-band) 50%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--on-band) 74%, transparent);
    align-self: stretch;
}

.site-brand__word {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--foreground);
}

/* On the dark pine band the wordmark flips to the on-band token. The mark
   itself deliberately does not invert — a constant falu badge is the same
   artwork the favicons ship, and the paper T holds ~5.4:1 against falu on
   either ground. Flipping it is two rules here if it ever reads muddy. */
.on-band .site-brand__word {
    color: var(--wp--preset--color--on-band);
}

/* --- Primary nav ------------------------------------------------------- */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
    flex-wrap: wrap;
}

.site-nav__link {
    color: var(--wp--preset--color--foreground);
    text-decoration: none;
    font-weight: 600;
    padding-block: 0.35rem;
    border-bottom: 2px solid transparent;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    border-bottom-color: var(--wp--preset--color--primary);
}

/* On the band the underline follows the link's own colour, which the on-band
   hover rule above has already set to ochre. currentColor rather than the
   token, so the two can never drift apart. */
.on-band .site-nav__link:hover,
.on-band .site-nav__link:focus-visible {
    border-bottom-color: currentColor;
}

.site-nav__soon {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
    margin-inline-start: 0.35rem;
}

/* Dropdown, only rendered at/above the product threshold. */
.site-nav-dropdown {
    position: relative;
}

.site-nav__trigger {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.site-nav__trigger::-webkit-details-marker {
    display: none;
}

.site-nav__menu {
    position: absolute;
    inset-inline-start: 0;
    margin: 0;
    padding: var(--wp--preset--spacing--10);
    list-style: none;
    min-width: 15rem;
    background-color: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--subtle);
    z-index: 20;
}

.site-nav__menu a {
    display: block;
    padding: 0.45rem 0.6rem;
    text-decoration: none;
    color: var(--wp--preset--color--foreground);
}

.site-nav__menu a:hover,
.site-nav__menu a:focus-visible {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}

/* --- Footer ------------------------------------------------------------ */
.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--wp--preset--spacing--50);
    align-items: start;
}

.site-footer__heading {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--wp--preset--color--on-band) 65%, transparent);
    margin: 0 0 var(--wp--preset--spacing--20);
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.site-footer__price {
    font-size: var(--wp--preset--font-size--small);
    color: color-mix(in srgb, var(--wp--preset--color--on-band) 55%, transparent);
    margin-inline-start: 0.4rem;
}

.site-footer__word {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    margin: 0 0 var(--wp--preset--spacing--20);
}

.site-footer__fine {
    font-size: var(--wp--preset--font-size--small);
    color: color-mix(in srgb, var(--wp--preset--color--on-band) 72%, transparent);
    margin: 0 0 0.6rem;
    max-width: 32rem;
}

/* --- Hero -------------------------------------------------------------- */
/* --- Hero -------------------------------------------------------------- */
/* Full-bleed on `surface`, a half-step warmer than the page ground, so the
   opening statement reads as its own zone rather than as the first paragraph
   of the body. With the teal band above it the page opens teal, then warm,
   then paper — three zones, no rules or boxes, which is the direction's
   preference for structure over decoration.

   .band-bleed handles the escape from the constrained layout; see its rule
   above for why max-width and margin both have to be overridden. */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--wp--preset--color--surface);
    padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

/* The hero is full-bleed, but its copy must still line up with the header's
   column — otherwise the page has two different left edges, which is the same
   misalignment the product page had. .hero__inner re-establishes the 44rem
   constrained column; the 34rem measure then applies inside it, because a hero
   measure that grows with the viewport stops being readable.

   This needs the wrapper element. .hero is a plain <section> from wp:html, not
   a block layout container, so WordPress's own constrained rules do not reach
   its children and there is nothing to inherit the centring from. */
.hero__inner {
    position: relative;
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
}

.hero__inner > * {
    max-width: 34rem;
}

/* Workshop dust and drifting runes. Decorative, aria-hidden in the markup,
   and inert: it must never intercept a click meant for the buttons above it.

   z-index rather than a negative one, because .hero sets `isolation: isolate`
   — a negative z-index child would otherwise paint behind the section's own
   background and vanish. */
.hero__dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    color: var(--wp--preset--color--foreground);
}

.hero__eyebrow {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--20);
}

.hero__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--xx-large);
    font-weight: 700;
    line-height: 1.08;
    margin: 0 0 var(--wp--preset--spacing--30);
}

.hero__lede {
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.5;
    color: var(--wp--preset--color--muted);
    margin: 0 0 var(--wp--preset--spacing--40);
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
    flex-wrap: wrap;
}

.hero__secondary {
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
}

/* --- Product grid ------------------------------------------------------ */
.products {
    padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
    scroll-margin-top: var(--wp--preset--spacing--40);
}

.products__heading {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
    margin: 0 0 var(--wp--preset--spacing--40);
}

.products__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
    gap: var(--wp--preset--spacing--40);
}

.product-card {
    background-color: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--subtle);
    padding: var(--wp--preset--spacing--40);
}

.product-card__icon {
    width: 4rem;
    height: 4rem;
    display: block;
    margin-bottom: var(--wp--preset--spacing--30);
}

.product-card__name {
    font-size: var(--wp--preset--font-size--large);
    margin: 0 0 0.5rem;
}

.product-card__name a {
    text-decoration: none;
    color: var(--wp--preset--color--foreground);
}

.product-card__name a:hover {
    color: var(--wp--preset--color--primary);
}

.product-card__tagline {
    color: var(--wp--preset--color--muted);
    margin: 0 0 var(--wp--preset--spacing--30);
}

.product-card__meta {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--20);
    margin: 0 0 var(--wp--preset--spacing--20);
}

.product-card__price {
    font-weight: 600;
    color: var(--wp--preset--color--primary);
}

.product-card__version {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}

.product-card__badges {
    list-style: none;
    margin: 0 0 var(--wp--preset--spacing--30);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.product-card__badges li {
    font-size: var(--wp--preset--font-size--small);
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--wp--preset--color--subtle);
    color: var(--wp--preset--color--muted);
}

.product-card__cta a {
    font-weight: 600;
    text-decoration: none;
}

.product-card__soon {
    color: var(--wp--preset--color--muted);
    font-style: italic;
}

/* --- Workshop band ---------------------------------------------------- */
.workshop {
    padding-block: var(--wp--preset--spacing--60);
}

.workshop__inner {
    max-width: 72rem;
    margin-inline: auto;
}

.workshop__heading {
    font-size: var(--wp--preset--font-size--x-large);
    margin: 0 0 var(--wp--preset--spacing--50);
}

.workshop__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--wp--preset--spacing--50);
}

/* Scoped to .on-band explicitly. It was already only ever rendered inside one
   — patterns/workshop.php puts .on-band on the section — but the selector did
   not say so, and ochre on a light ground is 2.26:1. Stating the dependency
   means reusing this component outside a band cannot silently produce
   unreadable headings. */
.on-band .workshop__cols h3 {
    font-size: var(--wp--preset--font-size--medium);
    letter-spacing: 0.04em;
    margin: 0 0 var(--wp--preset--spacing--20);
    color: var(--wp--preset--color--highlight);
}

.workshop__cols p {
    margin: 0;
    color: color-mix(in srgb, var(--wp--preset--color--on-band) 85%, transparent);
}

/* --- Support CTA ------------------------------------------------------ */
.support-cta {
    padding-block: var(--wp--preset--spacing--60);
    max-width: 34rem;
}

.support-cta__heading {
    font-size: var(--wp--preset--font-size--x-large);
    margin: 0 0 var(--wp--preset--spacing--30);
}

.support-cta__lede {
    color: var(--wp--preset--color--muted);
    margin: 0 0 var(--wp--preset--spacing--40);
}

/* --- Product page ------------------------------------------------------ */
.product__hero {
    padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.product__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--primary);
    margin: 0 0 var(--wp--preset--spacing--30);
}

.product__diamond {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    background-color: var(--wp--preset--color--primary);
    transform: rotate(45deg);
}

.product__hero-grid {
    display: flex;
    gap: var(--wp--preset--spacing--40);
    align-items: flex-start;
    flex-wrap: wrap;
}

.product__mark {
    width: 5.5rem;
    height: 5.5rem;
    flex: 0 0 auto;
}

.product__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--xx-large);
    line-height: 1.06;
    margin: 0;
}

.product__for {
    display: block;
    font-size: 0.62em;
    color: var(--wp--preset--color--primary);
    margin-top: 0.25rem;
}

.product__lede {
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--muted);
    max-width: 46ch;
    margin: var(--wp--preset--spacing--30) 0 0;
}

.product__cta-row {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    flex-wrap: wrap;
    margin-top: var(--wp--preset--spacing--40);
}

.product__btn-ghost {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--wp--preset--color--primary);
    border-radius: 2px;
    font-weight: 600;
    text-decoration: none;
}

.product__price-note {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}

.product__verdict {
    border-inline-start: 3px solid var(--wp--preset--color--accent);
    background-color: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
    margin-block: var(--wp--preset--spacing--40);
    max-width: 62ch;
}

.product__section {
    padding-block: var(--wp--preset--spacing--50);
    border-top: 1px solid var(--wp--preset--color--subtle);
}

/* .product itself is now a full-width pass-through (see the .product rule
   above), so an ordinary section has to recreate the reading column that
   used to come for free from the article's own content-size cap. The band
   variant is excluded on purpose: it is the one section that must span
   .product's full width so it can bleed past it in turn. */
.product__section:not(.product__section--band) {
    max-width: var(--wp--style--global--content-size, 44rem);
    margin-inline: auto;
}

.product__section--band {
    border-top: 0;
    padding-block: var(--wp--preset--spacing--60);
}

/* Same padding-cancellation math as .has-global-padding > .band-bleed
   above, retargeted one level deeper: .product carries none of its own
   padding (see the .product rule above), so it is exactly as safe a base
   for this cancellation as .has-global-padding itself was. This is what
   actually lets the product page's dark band reach the viewport edge. */
.product > .band-bleed {
    /* max-width must be reset explicitly: `.product > *` above now caps every
       child at content-size, and a negative margin cannot widen a capped box. */
    max-width: none;
    margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1) !important;
    margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
    padding-inline: var(--wp--style--root--padding-left, 0px);
}

.product__band-inner {
    max-width: 72rem;
    margin-inline: auto;
}

.product__sub {
    color: var(--wp--preset--color--muted);
    max-width: 62ch;
    margin: 0 0 var(--wp--preset--spacing--40);
}

.on-band .product__sub {
    color: color-mix(in srgb, var(--wp--preset--color--on-band) 80%, transparent);
}

.product__steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--wp--preset--spacing--30);
}

.product__steps li {
    counter-increment: step;
    background-color: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--subtle);
    padding: var(--wp--preset--spacing--30);
}

.product__steps li::before {
    content: counter(step);
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--primary);
    margin-bottom: 0.5rem;
}

.product__steps h3 {
    font-size: var(--wp--preset--font-size--medium);
    margin: 0 0 0.35rem;
}

.product__steps p {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}

/* Tabbed screenshot stage. Unenhanced (no JS) shows every panel. */
.product__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product__tab {
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    cursor: pointer;
    background-color: transparent;
    color: var(--wp--preset--color--muted);
    border: 1px solid var(--wp--preset--color--subtle);
    border-bottom: none;
    padding: 0.55rem 1rem;
}

.product__tab[aria-selected="true"] {
    background-color: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--foreground);
}

.product__panel {
    border: 1px solid var(--wp--preset--color--subtle);
    background-color: var(--wp--preset--color--surface);
    padding: var(--wp--preset--spacing--30);
}

/* Without JS the tabs are inert, so hide them and stack the panels. */
.product__shots:not(.is-enhanced) .product__tabs {
    display: none;
}

.product__shots:not(.is-enhanced) .product__panel + .product__panel {
    margin-top: var(--wp--preset--spacing--30);
}

.product__shot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--wp--preset--color--subtle);
}

.product__shot-caption {
    margin: var(--wp--preset--spacing--20) 0 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
    max-width: 70ch;
}

.product__rules,
.product__limits,
.product__specs {
    margin: 0 0 var(--wp--preset--spacing--30);
    padding-inline-start: 1.2rem;
    display: grid;
    gap: 0.6rem;
    max-width: 62ch;
}

.product__specs {
    list-style: none;
    padding-inline-start: 0;
}

.product__rules-note,
.product__limits-note {
    max-width: 62ch;
    margin: 0;
    color: var(--wp--preset--color--muted);
}

.on-band .product__rules-note {
    color: color-mix(in srgb, var(--wp--preset--color--on-band) 80%, transparent);
}

.product__closing {
    margin: var(--wp--preset--spacing--30) 0 0;
}

/* --- Product banner strip (only rendered when banner-hero.png exists) --- */
.product-banner {
    margin-bottom: var(--wp--preset--spacing--40);
}

.product-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22rem;
    object-fit: cover;
}

/* --- Support form ----------------------------------------------------- */
.support {
    padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
    max-width: 40rem;
    scroll-margin-top: var(--wp--preset--spacing--40);
}

.support__lede {
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--muted);
    margin: 0 0 var(--wp--preset--spacing--30);
}

.support__expect {
    margin: 0 0 var(--wp--preset--spacing--50);
    padding-inline-start: 1.2rem;
    display: grid;
    gap: 0.5rem;
    color: var(--wp--preset--color--muted);
}

.support-form__notice {
    padding: var(--wp--preset--spacing--30);
    margin: 0 0 var(--wp--preset--spacing--40);
    border-inline-start: 3px solid var(--wp--preset--color--accent);
    background-color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
}

.support-form__notice--err {
    border-inline-start-color: var(--wp--preset--color--primary);
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.support-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.support-form__field {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 var(--wp--preset--spacing--30);
}

.support-form__field label {
    font-weight: 600;
}

.support-form__field input,
.support-form__field select,
.support-form__field textarea {
    /* Without this, width:100% sizes only the content box on <input> and
       <textarea> (the browser default for those two, unlike <select>,
       which already computes border-box) and the 0.6rem/0.7rem padding
       plus the 1px border add ~24px on top — enough to spill each text
       field and the textarea 24px past its own label at every width, a
       responsive-sweep-only bug that never shows up as page-level
       horizontal scroll because the surrounding layout has room to
       absorb it. */
    box-sizing: border-box;
    font: inherit;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--wp--preset--color--subtle);
    border-radius: 2px;
    background-color: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--foreground);
    width: 100%;
}

.support-form__field input:focus-visible,
.support-form__field select:focus-visible,
.support-form__field textarea:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 1px;
}

.support-form__hint {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}

/* --- Legal pages ------------------------------------------------------- */
.legal {
    padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
    max-width: 40rem;
}

.legal__title {
    margin: 0 0 var(--wp--preset--spacing--20);
}

.legal__updated {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
    margin: 0 0 var(--wp--preset--spacing--50);
}

.legal h2 {
    font-size: var(--wp--preset--font-size--large);
    margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20);
}

.legal p,
.legal li {
    max-width: 62ch;
}

.legal__contact {
    margin-top: var(--wp--preset--spacing--50);
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid var(--wp--preset--color--subtle);
}

/* --- 404 --------------------------------------------------------------- */
.notfound {
    padding-block: var(--wp--preset--spacing--60);
    max-width: 36rem;
}

.notfound__code {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--display);
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
    margin: 0;
}

.notfound__title {
    margin: 0 0 var(--wp--preset--spacing--30);
}

.notfound__lede {
    color: var(--wp--preset--color--muted);
    margin: 0 0 var(--wp--preset--spacing--40);
}

.notfound__links {
    list-style: none;
    margin: 0 0 var(--wp--preset--spacing--40);
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.notfound__fine {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}