/* ==========================================================================
   SINEMILL — commerce surface

   The shared vocabulary for cart, checkout, my-account and the auth forms.
   Loaded before each of those routes' own stylesheet so the four cannot drift
   apart, which is what happened to the v5.0 versions: cart.css, checkout.css
   and myaccount.css each carried their own panel, their own row and their own
   totals block, at 659, 1089 and 877 lines, and the three disagreed about
   padding, border colour and heading size.

   THE EDITORIAL PAGES AND THE COMMERCE PAGES ARE DIFFERENT REGISTERS, ON
   PURPOSE. The homepage and the product pages free-flow, scatter, transcribe
   and tilt, because their job is persuasion. These pages are OPERATED —
   someone is trying to get a licence key, find an invoice, or pay — and the
   same devices would be actively in the way. So here:

     · one column, one measure, top to bottom
     · no planes, no parallax, no transcription
     · every row a hairline apart, in the order the eye scans
     · the accent appears on exactly one control per screen: the one that
       moves you forward

   What they share with the editorial half is the whole token layer — the same
   type, the same 90-degree geometry, the same greys measured against the same
   ground, the same one-frame cuts. It reads as one site because the materials
   are identical, not because the layouts are.

   GONE from all of them: the glassmorphism. Every panel here used to carry
   `backdrop-filter: blur(20px) saturate(180%)` plus a 12px radius and a drop
   shadow. Beyond the look, backdrop-filter makes an element a containing
   block for every fixed-position descendant — which on the checkout route
   silently converted `position: fixed` into "positioned against this panel"
   for the whole page, un-pinning the admin bar and the skip link. Flat, square
   and cheap is also correct.
   ========================================================================== */

/* ==========================================================================
   1. THE DOCUMENT SHELL
   --------------------------------------------------------------------------
   Every non-editorial route uses this: cart, checkout, account, legal,
   support, bug report, 404. One place that owns the clearance under the
   corner nav and the measure.
   ========================================================================== */

.doc {
    position: relative;
    z-index: 3;
    padding: var(--nav-clear) var(--gutter) var(--s-32);
    max-width: calc(var(--measure) + var(--gutter) * 2);
    /* Centred, like every other measure on the site. A max-width with no auto
       margin is a left-aligned column, and on a 1600px screen that stranded
       these pages in the left third with two thirds of empty page beside
       them. */
    margin-inline: auto;
}

/* Wide variant for anything with a table or two columns in it. */
.doc--wide { max-width: 1400px; }

.doc__head { margin-bottom: var(--s-12); }

.doc__title {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 70, 'wght' 900;
    font-size: var(--t-h1);
    line-height: 0.84;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}

.doc__sub {
    margin-top: var(--s-4);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-faint);
}

/* Section heading inside a document. */
.doc__h {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 78, 'wght' 900;
    font-size: var(--t-h3);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    margin: var(--s-12) 0 var(--s-4);
}

/* Reading copy on a commerce page is set in the grotesk, not the serif. The
   serif is the editorial signal — reserved for copy you are meant to be
   PERSUADED by — and a refund policy is not that. */
.doc__body {
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--paper-dim);
}
.doc__body p { margin-bottom: 0.9em; max-width: 68ch; }
.doc__body strong { color: var(--paper); font-weight: 700; }
.doc__body a { color: var(--paper); text-decoration: underline; text-underline-offset: 0.2em; }
.doc__body ul, .doc__body ol { margin: 0 0 0.9em; }
.doc__body li { padding: 0.2em 0 0.2em 1.1em; position: relative; }
.doc__body ul li::before { content: "—"; position: absolute; left: 0; color: var(--paper-faint); }
.doc__body ol { counter-reset: doc; }
.doc__body ol li { counter-increment: doc; }
.doc__body ol li::before {
    content: counter(doc);
    position: absolute; left: 0;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    color: var(--paper-faint);
}

/* ==========================================================================
   2. ROWS
   --------------------------------------------------------------------------
   The one repeating unit across all of commerce: a cart line, an order, a
   download, an activated device. Hairline above, generous vertical padding,
   never a card. A list of transactions IS a list; boxing each entry
   multiplies the borders by the number of rows and makes scanning harder,
   which is the opposite of what these pages are for.
   ========================================================================== */

.row {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: var(--s-4) 0;
    border-top: var(--rule-w) solid var(--rule-faint);
}
.row:last-child { border-bottom: var(--rule-w) solid var(--rule-faint); }

.row__main  { flex: 1 1 14rem; min-width: 0; }
.row__side  { flex: 0 0 auto; margin-left: auto; }

.row__name {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 90, 'wght' 800;
    font-size: var(--t-body);
    letter-spacing: -0.01em;
    color: var(--paper);
}

.row__meta {
    margin-top: 0.25em;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    color: var(--paper-faint);
}

.row__price,
.row__total {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 88, 'wght' 900;
    font-size: var(--t-body);
    color: var(--paper);
    /* Tabular figures so a column of prices aligns on the decimal without a
       table. Proportional digits make a stack of totals look ragged and,
       worse, make two similar amounts hard to tell apart at a glance. */
    font-variant-numeric: tabular-nums;
}

/* The destructive action on a row. Never a filled button: removing something
   should not be the most prominent control in its own row. */
.row__remove {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-faint);
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--s-2);
    transition: color var(--d-snap) var(--e-hard);
}
.row__remove:hover { color: var(--alarm); }

.row__thumb {
    flex: 0 0 auto;
    width: 72px;
    background: var(--lift-1);
}
.row__thumb img { width: 100%; height: auto; }

/* ==========================================================================
   3. TOTALS
   --------------------------------------------------------------------------
   The number someone is about to be charged is the largest thing on the
   screen after the page title. Everything above it is a component of it and
   is set small, so the eye lands on the total first and can then work
   backwards — which is the order people actually read a bill.
   ========================================================================== */

.totals { margin-top: var(--s-8); }

.totals__row {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-2) 0;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper-dim);
}
.totals__row dt, .totals__row dd { margin: 0; }
.totals__row dd { font-variant-numeric: tabular-nums; color: var(--paper); }

.totals__row--grand {
    align-items: baseline;
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: var(--rule-w) solid var(--rule);
}
.totals__row--grand dt {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 78, 'wght' 900;
    font-size: var(--t-h3);
    letter-spacing: -0.02em;
    text-transform: lowercase;
    color: var(--paper);
}
.totals__row--grand dd {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 78, 'wght' 900;
    font-size: var(--t-h3);
    letter-spacing: -0.02em;
    color: var(--paper);
}

/* The tax line. Czech law requires prices to be shown with tax, and the
   suffix is set by Sinemill_Compliance rather than here — this only makes
   sure it is legible rather than decorative. */
.totals__tax {
    margin-top: var(--s-2);
    font-family: var(--f-mono);
    font-size: var(--t-nano);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-faint);
}

/* ==========================================================================
   4. THE FORWARD CONTROL
   --------------------------------------------------------------------------
   One per screen. Full width on its own line, accent ground, ink text, at
   display scale — the same object as the product page's .buy band, so
   "the thing that moves you forward" looks identical everywhere it appears.
   ========================================================================== */

.go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    width: 100%;
    margin-top: var(--s-8);
    padding: var(--s-6) var(--s-6);
    background: var(--accent);
    color: var(--accent-on);
    border: 0;
    border-radius: 0;
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 78, 'wght' 900;
    font-size: clamp(1.4rem, 3.2vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    text-align: left;
    transition: background var(--d-snap) var(--e-hard);
}
.go:hover  { background: var(--accent-hot); color: var(--accent-on); }
.go:active { background: var(--accent-deep); }
.go[disabled] { background: var(--lift-2); color: var(--paper-faint); cursor: not-allowed; }

/* Secondary route away from the page — "keep looking", "back to cart".
   Outline, never a second fill: two filled controls have no hierarchy and
   the visitor has to read both to find out which one is the way on. */
.back {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    margin-top: var(--s-6);
    padding: 0 var(--s-4);
    border: var(--rule-w) solid var(--rule);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-dim);
    transition: color var(--d-snap) var(--e-hard),
                border-color var(--d-snap) var(--e-hard);
}
.back:hover { color: var(--paper); border-color: var(--paper); }

/* ==========================================================================
   5. FIELDS
   --------------------------------------------------------------------------
   base.css sets the field itself. This is the label/field/hint stack and the
   error state around it.
   ========================================================================== */

.field { margin-bottom: var(--s-4); }

.field > label,
.field .woocommerce-form__label {
    display: block;
    margin-bottom: var(--s-1);
    font-family: var(--f-mono);
    font-size: var(--t-nano);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-faint);
}

/* The required marker is the one place a hue is allowed on text, because an
   asterisk rendered in a grey is an asterisk nobody sees. */
.field .required,
.required { color: var(--alarm); text-decoration: none; }

.field__hint {
    margin-top: var(--s-1);
    font-family: var(--f-mono);
    font-size: var(--t-nano);
    letter-spacing: 0.08em;
    color: var(--paper-faint);
}

/* An invalid field states WHY in text, not only in colour — colour alone
   fails 1.4.1 and is invisible to a third of the people who need it most. */
.field--bad input,
.field--bad textarea,
.field--bad select { border-color: var(--alarm); }
.field__error {
    margin-top: var(--s-1);
    font-family: var(--f-mono);
    font-size: var(--t-nano);
    letter-spacing: 0.08em;
    color: var(--alarm);
}

/* Checkbox and radio rows: the control beside its label, both clickable, with
   the label doing the work of enlarging the target. */
.field--check {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
}
.field--check label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: var(--t-micro);
    color: var(--paper-dim);
    line-height: 1.5;
    cursor: pointer;
}
.field--check input { margin-top: 0.15em; flex: 0 0 auto; }

/* ==========================================================================
   6. TABS
   --------------------------------------------------------------------------
   Account navigation and the login/register switch. Square, underlined by a
   full-weight rule when active — the same "this one" signal the demos' A/B
   toggle and the stenographer's knockout use, so the page has one vocabulary
   for selection.
   ========================================================================== */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-6);
    margin-bottom: var(--s-8);
    border-bottom: var(--rule-w) solid var(--rule-faint);
}

.tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 0 var(--s-2);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-faint);
    background: none;
    border: 0;
    transition: color var(--d-snap) var(--e-hard);
}
.tab:hover { color: var(--paper-dim); }

.tab.is-active,
.tab[aria-selected="true"],
.tab.is-active:hover { color: var(--paper); }

.tab.is-active::after,
.tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--paper);
}

/* ==========================================================================
   7. EMPTY STATES
   --------------------------------------------------------------------------
   An empty cart, no orders yet, no downloads. Stated plainly at display scale
   and followed by the one thing to do about it — never an apology, never an
   illustration, and never nothing.
   ========================================================================== */

.empty { padding: var(--s-16) 0; }
.empty__line {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 74, 'wght' 900;
    font-size: var(--t-h2);
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: var(--paper);
}
/* --s-8, not --s-4. Sixteen pixels under a 112px display line set at 0.9
   line-height puts an 11px note inside the descenders of the thing above it. */
.empty__note {
    margin-top: var(--s-8);
    max-width: 44ch;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    color: var(--paper-faint);
}

/* ==========================================================================
   8. PANELS AND NOTES
   ========================================================================== */

/* A block that has to be visibly set apart — an order's expanded detail, a
   payment summary. A lift off the ground with one hairline, not a card. */
.panel {
    background: var(--lift-1);
    border: var(--rule-w) solid var(--rule-faint);
    padding: var(--s-6);
    margin-top: var(--s-4);
}

/* A standing caveat: the refund fee, the licence terms, a delivery note. */
.note {
    margin-top: var(--s-4);
    padding-left: var(--s-4);
    border-left: 3px solid var(--rule);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.05em;
    line-height: 1.7;
    color: var(--paper-faint);
}
.note--alarm { border-left-color: var(--alarm); color: var(--paper-dim); }

/* Status marker. The one small filled object in the system — used where a
   state has to be readable at a glance in a long list. */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.55em;
    font-family: var(--f-pixel);
    font-size: var(--t-nano);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--paper);
    color: var(--ink);
}
.tag--quiet  { background: none; color: var(--paper-faint); border: var(--rule-w) solid var(--rule-faint); }
.tag--alarm  { background: var(--alarm); color: var(--ink); }
.tag--live   { background: var(--cyan); color: var(--ink); }

/* ==========================================================================
   9. MODAL
   --------------------------------------------------------------------------
   Used only for the refund confirmation — the one irreversible action a
   customer can take on this site, and the only thing here that earns an
   interruption.
   ========================================================================== */

.sinemill-refund-overlay {
    position: fixed;
    inset: 0;
    z-index: 970;
    background: rgba(0, 0, 0, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
}
.sinemill-refund-overlay[hidden] { display: none; }

.sinemill-refund-modal {
    width: min(560px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--ink);
    border: var(--rule-w) solid var(--rule);
    border-radius: 0;
    padding: var(--s-8);
}

.sinemill-refund-modal__heading {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 76, 'wght' 900;
    font-size: var(--t-h3);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    margin-bottom: var(--s-4);
}
.sinemill-refund-modal__product,
.sinemill-refund-modal__total {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    color: var(--paper-dim);
    margin-bottom: var(--s-2);
}
.sinemill-refund-modal__fee-notice {
    margin: var(--s-4) 0;
    padding-left: var(--s-4);
    border-left: 3px solid var(--alarm);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    line-height: 1.7;
    color: var(--paper-dim);
}
.sinemill-refund-modal__msg {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    line-height: 1.7;
    color: var(--paper-dim);
}

.sinemill-refund-modal__actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: var(--s-6);
}
.sinemill-refund-modal__btn {
    min-height: var(--tap);
    padding: 0 var(--s-6);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: var(--rule-w) solid var(--rule);
    color: var(--paper);
    background: none;
    transition: background var(--d-snap) var(--e-hard),
                color var(--d-snap) var(--e-hard);
}
.sinemill-refund-modal__btn--cancel:hover,
.sinemill-refund-modal__btn--close:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* The destructive confirm is the ONLY control in this system that is filled
   in the alarm hue. It is deliberately not the accent: the accent means "go
   on", and this button ends a licence. */
.sinemill-refund-modal__btn--confirm {
    background: var(--alarm);
    color: var(--ink);
    border-color: var(--alarm);
}
.sinemill-refund-modal__btn--confirm:hover { background: #FF7A7A; color: var(--ink); }

/* ==========================================================================
   10. WOOCOMMERCE STRUCTURES WE DO NOT TEMPLATE
   --------------------------------------------------------------------------
   Gateways, plugins and endpoints render their own markup. These pages must
   not fall back to unstyled white-on-black, so the common containers get the
   same treatment as ours.
   ========================================================================== */

.woocommerce-form-row,
.woocommerce-input-wrapper { display: block; margin-bottom: var(--s-4); }

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    line-height: 1.7;
    color: var(--paper-faint);
    margin: var(--s-4) 0;
}
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a { color: var(--paper); text-decoration: underline; }

.woocommerce table.shop_table {
    border: 0;
    border-radius: 0;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.04em;
    color: var(--paper-dim);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border: 0;
    border-bottom: var(--rule-w) solid var(--rule-faint);
    padding: var(--s-3) var(--s-2);
    text-align: left;
}
.woocommerce table.shop_table th { color: var(--paper-faint); text-transform: uppercase; font-weight: 400; }
.woocommerce table.shop_table td { color: var(--paper); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   8a. THE COMMERCE PAGE SHELL
   --------------------------------------------------------------------------
   Cart and checkout are composed like the rest of the site, not like a store,
   and they are composed the SAME way as each other. This is that shell, taken
   by name from product.css so the three routes share one composition:

     .ck        = .pg        twelve columns at `0 var(--gutter)`, no centring
     .ck__kick  = .pg__kick  the running head, mono, before the display line
     .ck__title = .pg__title --t-mega, wdth 70 / wght 900, line-height .78
     .ck__h     = .pg__h     a section head

   `minmax(0, 1fr)`, never `1fr`: `1fr` is `minmax(auto, 1fr)`, so a screenshot
   at its own aspect or a long unbroken string grows its track and takes the
   width out of its neighbours. That trap has been hit twice in this theme.

   It lives here rather than in cart.css because cart.css does not load on
   checkout, and two descriptions of one shell is how the two pages drifted
   apart in the first place.
   ========================================================================== */

.ck {
    position: relative;
    z-index: 3;
    /* --nav-occupied, not --nav-h: this is a task route, and its content spans
       the full page, so it reaches the right corner. See checkout.css. */
    /* s-16, not s-24: `body:has(.buybar)` already reserves the bar's height
       underneath, and stacking the two left 192px of nothing above the footer. */
    padding: calc(var(--nav-occupied) + var(--s-4)) var(--gutter) var(--s-16);
}

/* THE SUB-GRID IS OPT-IN, NOT BLANKET.

   This was `.ck > *`, which made EVERY direct child a twelve-column grid — and
   a grid container turns its loose text into an anonymous grid item, which
   auto-places into column ONE. So any block that is just a sentence — a
   WooCommerce notice, the right-of-withdrawal line on the order page — came
   out 40px wide and forty lines tall. The same shape as the `.ck__back`
   wrapping bug and the `.band` note in product.css, but hitting text that
   arrives from a template this file has never heard of, which is exactly the
   case a blanket rule cannot be trusted with.

   Structured blocks ask for the grid by name. Everything else is a block and
   spans the page, which is the right default for a sentence. */
.ck > .ck__head,
.ck > .ck__sec,
.ck > .ck__list,
.ck > .ck__totals,
.ck > .ck__back {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
}

/* ---- Head ---------------------------------------------------------------- */

.ck__kick {
    grid-column: 1 / 8;
    font-family: var(--f-odd);
    font-variation-settings: 'wdth' 140, 'wght' 400;
    font-size: var(--t-label);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin: 0;
}

/* The running head is set at 0.28em of tracking, which is right at 1440 and
   wraps "secure checkout · 2 items" onto three lines at 390. Tracking is what
   gives back the width, not size — shrinking the type would make a label that
   is already --t-label unreadable. */
@media (max-width: 560px) {
    .ck__kick { letter-spacing: 0.14em; grid-column: 1 / -1; }
}

.ck__title {
    grid-column: 1 / 12;
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 70, 'wght' 900;
    font-size: var(--t-mega);
    line-height: 0.78;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    margin: var(--s-4) 0 0;
}


/* ---- The numbered section head ------------------------------------------- */

/* A checkout is a SEQUENCE — who you are, what you are buying, how you pay —
   and this site already sets sequences by numbering them: the orders ledger
   numbers each record, the cart numbers each line. */
.ck__sec { margin-top: var(--s-24); }

.ck__no {
    grid-column: 1 / 2;
    font-family: var(--f-pixel);
    font-size: var(--t-nano);
    letter-spacing: 0.12em;
    color: var(--paper-faint);
    margin: 0;
    padding-top: 0.55em;
}

.ck__h {
    grid-column: 2 / 12;
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 74, 'wght' 900;
    font-size: var(--t-h3);
    line-height: 0.9;
    letter-spacing: -0.025em;
    text-transform: lowercase;
    margin: 0;
}

/* ==========================================================================
   8b. THE RECEIPT
   --------------------------------------------------------------------------
   One vocabulary for every list of money on this site: the cart totals and the
   checkout's order review. Both used to be a WooCommerce `table.shop_table`,
   and both had to fight the generic rules directly above — the cart lost four
   times, the checkout once, and each loss was fixed by bolting another class
   on to out-count a selector that merely named one more element type. The
   theme owns both templates now. These are divs, and nothing above can reach
   them, so every rule here is one class deep with no `!important`.

   It lives in commerce.css rather than cart.css because cart.css does not load
   on checkout, and two definitions of "what a total looks like" is how the two
   pages drifted apart in the first place.
   ========================================================================== */

.sinemill-totals__title {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-faint);
    margin-bottom: var(--s-4);
}

.sinemill-totals__lines { margin-bottom: var(--s-6); }

.sinemill-totals__line {
    display: flex;
    /* Baseline, not centre. An amount can wrap to two lines, and on `center`
       its label floated to the middle of them instead of sitting on the
       first one. */
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: var(--rule-w) solid var(--rule-faint);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* The band below closes the receipt; a rule immediately above it is a second
   closing line for the same edge. */
.sinemill-totals__line:last-child { border-bottom: 0; }

.sinemill-totals__label { color: var(--paper-faint); }
.sinemill-totals__value {
    color: var(--paper);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* THE TOTAL IS A BAND.

   As a table row it could only ever be a bigger row: the number someone is
   about to be charged, distinguished from the subtotal above it by size alone.
   On every other route the moment that matters is an ACCENT GROUND with ink on
   it — the buy bar, the sale badge, the A/B switch. This is that moment on
   this page, so it is that shape.

   PAPER, not accent. The band and "proceed to checkout" sit 32px apart at the
   same width, and in the same orange they read as one object — two accent
   masses arguing about which is the point. The total is a FACT and the button
   is the ACTION, so the fact is a paper knockout and the accent stays with the
   thing you click. One accent control per screen. */
.sinemill-totals__band {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    /* --s-5 does not exist. The rule this replaces said `var(--s-5) var(--s-4)`,
       which is an invalid shorthand, so the band's padding came from whichever
       lower-specificity rule happened to state one — 12px from the generic
       table rule horizontally overridden by a separate `padding-left`. An
       undefined token does not warn; it makes the whole declaration vanish. */
    padding: var(--s-4) var(--s-6);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 78, 'wght' 900;
    font-size: var(--t-h3);
    letter-spacing: -0.02em;
    text-transform: lowercase;
}
.sinemill-totals__band-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* THE TAX NOTE IS NOT PART OF THE NUMBER.

   WooCommerce puts the inclusive-VAT breakdown inside the same element as the
   amount, in a `<small>`. `small` is 0.83em, so inside a 48px display cell it
   rendered at FORTY PIXELS: "(includes 6,24 € VAT 21 % CZ)" set as though it
   were the thing being charged. It wrapped the total onto two lines and took
   the word "total" with it.

   It is a footnote to the amount, so it is set like one — its own line, mono,
   micro, and a dim INK tone because it sits on the paper band. */
.sinemill-totals__band-value .includes_tax {
    display: block;
    margin-top: var(--s-1);
    font-family: var(--f-mono);
    font-variation-settings: normal;
    font-size: var(--t-micro);
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.62);
}

@media (max-width: 640px) {
    .row { gap: var(--s-2); }
    .row__side { margin-left: 0; width: 100%; }
    .go { font-size: 1.5rem; padding: var(--s-4); }
}

/* ==========================================================================
   9. SEARCH RESULTS
   --------------------------------------------------------------------------
   A result is a LINK. This route used to run the_content() per match, so a
   query printed every result's entire body — full product descriptions, one
   after another, with nothing on the page linking to any of them and one
   <h1> per result.
   ========================================================================== */

.sinemill-search__heading {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 70, 'wght' 900;
    font-size: var(--t-h1);
    line-height: 0.84;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    margin-bottom: var(--s-12);
}

.sinemill-search__results { list-style: none; margin: 0; padding: 0; }

.sinemill-search__result {
    padding: var(--s-6) 0;
    border-top: var(--rule-w) solid var(--rule-faint);
}
.sinemill-search__result:last-child { border-bottom: var(--rule-w) solid var(--rule-faint); }

.sinemill-search__title {
    font-family: var(--f-grotesk);
    font-variation-settings: 'wdth' 82, 'wght' 900;
    font-size: var(--t-h3);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    margin: 0;
}
.sinemill-search__title a { color: var(--paper); }
.sinemill-search__title a:hover { background: var(--accent); color: var(--accent-on); }

.sinemill-search__excerpt {
    margin-top: var(--s-3);
    max-width: 62ch;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.04em;
    line-height: 1.7;
    color: var(--paper-dim);
}

.sinemill-search__empty {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper-faint);
}