/* Crosphera Editorial — the private theme of crosphera.com.
 *
 * A trade paper about running a shop: paper and ink, one vermilion accent, Frank Ruhl Libre display
 * type over Heebo text, hairline rules and hard offset shadows instead of blur. Built on the shared
 * library templates; this file only skins them, plus the `cr-*` sections the home page is laid out with.
 *
 * Every colour, font, radius and spacing value reads a `--theme-*` custom property the backoffice
 * writes; the literals after each `var()` are fallbacks for a shop that has not saved settings yet.
 *
 * Logical properties only, so RTL and LTR share one stylesheet.
 */

/* ---------- faces ------------------------------------------------------- */

/* The theme ships its two families (`fonts/`, the OFL variable fonts, one file per script): no third-party font host, one
   origin, four small files. `swap` is safe here because the fallback faces below carry the web fonts' metrics. */
@font-face {
    font-family: "Frank Ruhl Libre";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/frank-ruhl-libre-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Frank Ruhl Libre";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/frank-ruhl-libre-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/heebo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Heebo;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/heebo-hebrew.woff2") format("woff2");
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* Local faces with the web fonts' metrics (frequency-weighted advance, hhea ascent and descent), so the
   page keeps its line boxes when Frank Ruhl Libre and Heebo arrive with `font-display: swap`. */
@font-face {
    font-family: "Frank Ruhl Libre Fallback";
    src: local("Georgia");
    size-adjust: 105.5%;
    ascent-override: 90.7%;
    descent-override: 31.7%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Heebo Fallback";
    src: local("Arial");
    size-adjust: 100.7%;
    ascent-override: 104.1%;
    descent-override: 41.8%;
    line-gap-override: 0%;
}

/* ---------- tokens --------------------------------------------------- */

:root {
    --font-body: var(--theme-font-body, Heebo, Arial, system-ui, sans-serif);
    --font-heading: var(--theme-font-heading, "Frank Ruhl Libre", Georgia, serif);
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --weight-body: var(--theme-font-body-weight, 400);
    --weight-heading: var(--theme-font-heading-weight-bold, 900);

    --bg: var(--scheme-background, #f4eee2);
    --fg: var(--scheme-text, #141210);
    --primary: var(--scheme-primary, #c8381a);
    --primary-fg: var(--scheme-primary-text, #fff8f2);
    --accent: var(--scheme-accent, #65615c);
    --line: var(--scheme-border, #ccc6bc);
    --sale: var(--theme-color-sale, #c8381a);
    --sale-fg: var(--theme-color-sale-on, #fff8f2);
    --stock: var(--theme-color-stock, #2f6b3a);
    --stock-fg: var(--theme-color-stock-on, #ffffff);

    /* Derived surfaces: the second and third paper, the strong hairline and the ink-dark accent follow the scheme. */
    --paper-2: color-mix(in srgb, var(--bg) 93%, var(--fg));
    --paper-3: color-mix(in srgb, var(--bg) 50%, #fff);
    --line-strong: color-mix(in srgb, var(--fg) 55%, transparent);
    --accent-ink: color-mix(in srgb, var(--primary) 82%, var(--fg));
    /* The one green: a live or paid status inside a UI vignette, never body text. */
    --live: #d9f56b;
    --live-fg: #141210;
    /* The logo's periwinkle and orchid: a supporting accent beside the vermilion (outlined folios, the footer's sign-off rule). */
    --brand-lilac: #8d9ee6;
    --brand-orchid: #c99ae0;

    --container: var(--theme-container-width, 1280px);
    --gutter: clamp(16px, 3vw, 40px);
    --radius-button: var(--theme-radius-button, 4px);
    --radius-card: var(--theme-radius-card, 6px);
    --radius-input: var(--theme-radius-input, 4px);
    --section-gap-full: clamp(2rem, 6vw, var(--theme-section-spacing, 96px));
    --section-gap: var(--section-gap-full);

    /* A fluid editorial scale: the headline is the product here. */
    --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
    --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.5rem);
    --step-4: clamp(2.8rem, 1.8rem + 4.6vw, 5.5rem);
    --step-5: clamp(3.4rem, 1.4rem + 9.2vw, 9.25rem);

    --label-size: var(--step--1);
    --label-tracking: 0.06em;
    --header-height: 68px;

    /* Depth is a hard offset, never a blur; its inline side flips with the writing direction (`--shadow-x`), as do the hover lifts. */
    --shadow-x: 1;
    --shadow-soft: calc(3px * var(--shadow-x)) 3px 0 color-mix(in srgb, var(--fg) 18%, transparent);
    --shadow-hard: calc(8px * var(--shadow-x)) 8px 0 var(--fg);
    --shadow-hard-sm: calc(4px * var(--shadow-x)) 4px 0 var(--fg);
    --lift-2: translate(calc(-2px * var(--shadow-x)), -2px);
    --lift-3: translate(calc(-3px * var(--shadow-x)), -3px);
    --ease: cubic-bezier(0.2, 0.7, 0, 1);
    --focus-ring: var(--primary);

    color-scheme: light;
}

[dir="rtl"] { --shadow-x: -1; }

/* The scheme-derived aliases are re-declared on every element that carries a colour scheme, not only on
   `:root`: a custom property that references another resolves where it is declared, so a footer or an
   inverse section re-resolves them against its own scheme. */
[class*="color-scheme-"] {
    --bg: var(--scheme-background, #f4eee2);
    --fg: var(--scheme-text, #141210);
    --primary: var(--scheme-primary, #c8381a);
    --primary-fg: var(--scheme-primary-text, #fff8f2);
    --accent: var(--scheme-accent, #65615c);
    --line: var(--scheme-border, #ccc6bc);
    --paper-2: color-mix(in srgb, var(--bg) 93%, var(--fg));
    --paper-3: color-mix(in srgb, var(--bg) 50%, #fff);
    --line-strong: color-mix(in srgb, var(--fg) 55%, transparent);
    --accent-ink: color-mix(in srgb, var(--primary) 82%, var(--fg));
}

/* ---------- reset ---------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-weight: var(--weight-body);
    font-size: calc(var(--step-0) * (var(--theme-font-scale, 100) / 100));
    line-height: 1.55;
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    line-height: 1;
    letter-spacing: -0.015em;
    text-wrap: balance;
    text-transform: var(--theme-heading-transform, none);
    margin-block: 0 0.5em;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

/* Hebrew display faces carry no tracking and need a touch more leading. */
:lang(he) :is(h1, h2, h3, h4),
[dir="rtl"] :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.1; }

p { margin-block: 0 1em; }

img { max-inline-size: 100%; block-size: auto; display: block; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }

::selection { background: var(--fg); color: var(--bg); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--fg);
    color: var(--bg);
    border-end-end-radius: var(--radius-button);
}

.skip-link:focus { inset-block-start: 0; }

.container {
    inline-size: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
}

.section { margin-block: var(--section-gap); }

/* A page that opens under the top slider (`SKIN-TOP-SLIDER`) keeps half a section gap above its first block: the slider already
   separates it from the header, and a full gap read as an empty band between the hero and the first row. */
main > .csf-block + .section {
    margin-block-start: calc(var(--section-gap) / 2);
}

/* The bleed: a full-width band whose inner content still lines up with the container. Inside a page body the shared
   content-safety sheet caps every section at 100%, which would hold the band to the column: the bleed lifts that cap. */
.section--bleed {
    max-inline-size: none;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2));
    padding-block: var(--section-gap);
    background: var(--paper-2);
}

/* Small caps in the mono face: folios, eyebrows, table heads, the date bar. */
.eyebrow,
.csf-eyebrow,
.cr-mono {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.eyebrow,
.csf-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 20px;
}

.eyebrow::before,
.csf-eyebrow::before { content: ""; inline-size: 28px; block-size: 2px; background: var(--primary); }

:lang(he) :is(.eyebrow, .csf-eyebrow, .cr-mono),
[dir="rtl"] :is(.eyebrow, .csf-eyebrow, .cr-mono) { letter-spacing: 0; }

/* ---------- utility + header ----------------------------------------- */

/* The utility bar is the paper's ear: a mono line under a hairline. */
.utility-bar {
    background: var(--bg);
    color: var(--accent);
    border-block-end: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.utility-bar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    min-block-size: 36px;
}

.utility-bar a { text-decoration: none; }
.utility-bar a:hover { color: var(--fg); text-decoration: underline; }

.utility-bar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The announcement bar is the paper's date line: mono small caps on a hairline, its messages spread across the width. */
[data-widget="announcementBar"] {
    justify-content: space-between;
    min-block-size: 36px;
    padding-block: 0.35rem;
    padding-inline: max(var(--gutter), calc(50% - var(--container) / 2));
    border-block-end: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    text-align: start;
}

[data-widget="announcementBar"] .csf-announcement__messages { flex: 1 1 auto; }

/* A phone keeps the date line on one row: the messages rotate on their own, the arrows go. */
@media (max-width: 480px) {
    [data-widget="announcementBar"] { font-size: 0.6875rem; letter-spacing: 0.04em; }
    [data-widget="announcementBar"] .csf-announcement__controls { display: none; }
}
[data-widget="announcementBar"] .csf-announcement__msg { color: var(--accent); text-decoration: none; }
[data-widget="announcementBar"] a.csf-announcement__msg:hover { color: var(--fg); text-decoration: underline; }

/* The masthead: paper, one strong rule under it, the wordmark and the nav on one line. */
.header {
    background: var(--bg);
    border-block-end: 1px solid var(--line-strong);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    min-block-size: var(--header-height);
}

.header__nav { display: none; gap: 0.25rem; margin-inline: auto; }

@media (min-width: 1024px) {
    .header__nav { display: flex; }
    .header__burger { display: none; }
}

.header__actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }

/* Nav links carry a 2px underline that is transparent until hovered; the current page's underline is the
   mega menu widget's own (`activeMenuStyle`), on the same offset so the two never stack. */
.header__nav a,
.header__nav button {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 0.75rem;
    border: 0;
    border-radius: 0;
    background: none;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: transparent;
    text-underline-offset: 0.35rem;
    color: inherit;
    cursor: pointer;
    transition: text-decoration-color 0.2s var(--ease);
}

.header__nav a:hover,
.header__nav button:hover,
.header__nav .is-open > button { text-decoration-color: var(--primary); }

.header__nav .csf-menu__item--current > a { text-decoration-color: currentColor; text-underline-offset: 0.35rem; }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-inline-size: 44px;
    min-block-size: 44px;
    border: 2px solid var(--fg);
    border-radius: var(--radius-button);
    background: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.icon-button:hover { transform: var(--lift-2); box-shadow: calc(2px * var(--shadow-x)) 2px 0 var(--fg); }

.cart-count { font-size: var(--step--1); font-variant-numeric: tabular-nums; }

/* ---------- buttons -------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-block-size: 3.25rem;
    padding-block: var(--theme-button-padding-y);
    padding-inline: var(--theme-button-padding-x);
    border: 2px solid var(--fg);
    border-radius: var(--radius-button);
    background: var(--primary);
    color: var(--primary-fg);
    font: inherit;
    font-weight: var(--theme-button-weight);
    text-transform: var(--theme-button-case);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 0 0 var(--fg);
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s, color 0.18s;
}

/* Shops wrap a link inside a `.button`; the link is the real target, so it fills the button. */
.button > a {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: inherit;
    margin-block: 0;
    color: inherit;
    text-decoration: none;
}

.button:hover { transform: var(--lift-3); box-shadow: var(--shadow-hard-sm); }
.button:active { transform: none; box-shadow: 0 0 0 var(--fg); }

.button--ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--fg);
}

.button--ghost:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }

.button--small { min-block-size: 2.5rem; padding-inline: calc(var(--theme-button-padding-x) - 8px); font-size: var(--step--1); }

.button[disabled],
.button.disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }

.button .cr-arrow { display: inline-block; transition: transform 0.18s var(--ease); }
.button:hover .cr-arrow { transform: translateX(3px); }
[dir="rtl"] .button .cr-arrow { transform: scaleX(-1); }
[dir="rtl"] .button:hover .cr-arrow { transform: scaleX(-1) translateX(3px); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 24px;
    padding: 0.1rem 0.7rem;
    border: 1.5px solid var(--fg);
    border-radius: 999px;
    background: transparent;
    font-size: var(--label-size);
    font-weight: 500;
    line-height: 1.4;
}

/* Native fields: an ink hairline, the third paper, a lift with a hard shadow on focus. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]),
select,
textarea {
    border: 1.5px solid var(--fg);
    border-radius: var(--radius-input);
    background: var(--paper-3);
    color: var(--fg);
    font: inherit;
    transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):focus,
select:focus,
textarea:focus {
    outline: none;
    transform: var(--lift-2);
    box-shadow: var(--shadow-hard-sm);
}


/* ---------- product grid --------------------------------------------- */

.product-grid {
    display: grid;
    grid-auto-flow: row dense;
    gap: 1.25rem;
    grid-template-columns: repeat(var(--theme-cards-per-row, 3), minmax(0, 1fr));
}

@media (min-width: 1024px) {
    .product-grid {
        grid-auto-rows: minmax(0, auto);
    }
}

.product-grid--list { grid-template-columns: minmax(0, 1fr); }

.product-grid--list .product-card:not(.product-card--poster) {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .product-grid--list > .product-card:not(.product-card--poster):nth-child(6n + 1) { grid-column: auto; }
}

.product-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

/* An ink-edged tile; the hard shadow appears on hover, like the hero objects. */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
    padding: 0.75rem;
    border: 1.5px solid var(--fg);
    border-radius: var(--radius-card);
    background: var(--paper-3);
    box-shadow: none;
    container-type: inline-size;
    transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.product-card:hover { transform: var(--lift-2); box-shadow: var(--shadow-hard-sm); }

.product-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: calc(var(--radius-card) - 6px);
    aspect-ratio: var(--card-ratio, 4 / 3);
    background: color-mix(in srgb, var(--line) 35%, transparent);
}

.product-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.product-card__media img + img { position: absolute; inset: 0; opacity: 0; }

.product-card:hover .product-card__media img + img,
.product-card:focus-within .product-card__media img + img { opacity: 1; }

.product-card__badges {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
}

.badge {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: var(--label-size);
    font-weight: 600;
    line-height: 1.6;
}

.badge--sale { background: var(--sale); color: var(--sale-fg); }
.badge--stock { background: var(--stock); color: var(--stock-fg); }

.product-card__brand,
.article-card__category,
.article__category {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.product-card__title {
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    display: flex;
    align-items: center;
    min-block-size: 24px;
}

.product-card__title a { text-decoration: none; }
.product-card__title a:hover { text-decoration: underline; }

.product-card__price { margin: 0; font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; }
.product-card__price s { color: var(--accent); margin-inline-start: 0.4rem; font-weight: var(--weight-body); }

.product-card__sku,
.product-card__excerpt,
.product-card__stock { margin: 0; font-size: var(--step--1); color: var(--accent); }

.product-card .button { margin-block-start: 0.5rem; inline-size: 100%; }

.product-card__title-sr { position: absolute; inset: 0; text-indent: -9999px; overflow: hidden; }


/* ---------- category / listing --------------------------------------- */

.category__intro { max-inline-size: 62ch; margin-block-end: 2rem; font-size: var(--step-1); }

/* Sub-category tiles on a category page. An auto-fill grid rather than a
   fixed column count: a category with five children should not leave
   three dead columns. */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-block-end: 2rem;
}

.category__banner img {
    inline-size: 100%;
    block-size: auto;
}

.category__title { margin-block: 0 0.5rem; }

.category-tile,
.csf-featured-category {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-card);
    aspect-ratio: 4 / 3;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

/* A sub-category tile is its picture frame and its name, as tall as both; the banner keeps its ratio. */
.category-tile {
    aspect-ratio: auto;
}

.category-tile img,
.csf-featured-category img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.csf-featured-category:hover img { transform: scale(1.05); }

/* A sub-category tile holds a product picture: show all of it. A featured-category banner keeps filling its tile. */
.category-tile img {
    box-sizing: border-box;
    padding: 0.5rem;
    object-fit: contain;
}

.csf-featured-category .csf-text-block {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 1.25rem;
    background: linear-gradient(to top, rgb(0 0 0 / 65%), rgb(0 0 0 / 0%));
    color: #fff;
    font-weight: var(--weight-heading);
    font-size: var(--step-1);
}

.paging {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-block-start: var(--section-gap);
    list-style: none;
    padding: 0;
}

.paging a,
.paging span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    border-radius: var(--radius-button);
    text-decoration: none;
}

.paging a:hover { background: color-mix(in srgb, var(--line) 45%, transparent); }

/* ---------- product page --------------------------------------------- */

.product__layout { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }

@media (min-width: 1024px) {
    .product__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

.product__price { font-size: var(--step-2); font-variant-numeric: tabular-nums; margin-block: 0.5rem 1.25rem; }

.product__variants { display: grid; gap: 1rem; margin-block-end: 1.5rem; }

.product__variant-label {
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--accent);
}

.product__variant-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.4rem 0 0; padding: 0; }

.product__variant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    cursor: pointer;
}

.product__variant:has(:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.product__swatch { inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; border: 1px solid var(--line); }

.product__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.product__files { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.product__file-size { color: var(--accent); font-size: var(--step--1); }
.product__shipping-methods { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.product__shipping-method-name { display: block; font-weight: 600; }
.product__shipping-method-desc { margin: 0.25rem 0 0; color: var(--accent); font-size: var(--step--1); }

/* ---------- cart / checkout ------------------------------------------ */

.cart__layout,
.checkout__layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

@media (min-width: 1024px) {
    .cart__layout,
    .checkout__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
}

.cart__totals,
.checkout__summary {
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--line) 25%, transparent);
    padding: 1.5rem;
}

@media (min-width: 1024px) {
    .checkout__summary { position: sticky; inset-block-start: 1.5rem; }
}

.cart__table,
.table { inline-size: 100%; border-collapse: collapse; }

.cart__table th,
.cart__table td,
.table th,
.table td {
    padding: 1rem 0.5rem;
    border-block-end: 1px solid var(--line);
    text-align: start;
    vertical-align: top;
}

.cart__table th,
.table th {
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
}

@media (max-width: 767px) {
    .cart__table thead { display: none; }

    .cart__table tr {
        display: grid;
        gap: 0.35rem;
        padding: 1rem;
        margin-block-end: 0.75rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
    }

    .cart__table td { border: 0; padding: 0; }
}

.table-scroll,
.scroll-x { overflow-x: auto; }

.cart_item__link { text-decoration: none; font-weight: 600; }
.cart_item__variant,
.checkout-item__variant { color: var(--accent); font-size: var(--step--1); }

.cart__checkout,
.checkout__place { inline-size: 100%; margin-block-start: 1rem; }

.checkout-item {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding-block: 0.75rem;
    border-block-end: 1px solid var(--line);
}

.checkout-item__thumb img { inline-size: 4rem; block-size: 4rem; object-fit: cover; border-radius: calc(var(--radius-card) - 8px); }
.checkout-item__qty,
.checkout-item__total { font-variant-numeric: tabular-nums; }

.checkout__totals,
.checkout-thankyou__summary { display: grid; gap: 0.5rem; margin-block-start: 1rem; }
.checkout__discount { color: var(--sale); }

.checkout_field { display: grid; gap: 0.35rem; margin-block-end: 1rem; }

/* A shipping method's own paired fields (e.g. first/last name) — server-
   emitted row wrapper, see `checkoutFieldsTemplate.ts`'s `groupFieldsIntoRows`. */
.checkout-fields__row--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    margin-block-end: 1rem;
}
.checkout-fields__row--pair > .checkout_field {
    margin-block-end: 0;
}

.checkout_field label,
.dataform-field label { font-size: var(--label-size); font-weight: 600; color: var(--accent); }

input,
select,
textarea {
    font: inherit;
    color: inherit;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-input);
    background: var(--bg);
    min-block-size: 44px;
    inline-size: 100%;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-color: var(--primary); }

.field-hint { font-size: var(--step--1); color: var(--accent); }

.message {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--line) 35%, transparent);
    margin-block-end: 1rem;
}

.message--error {
    background: color-mix(in srgb, var(--sale) 12%, transparent);
    border: 1px solid var(--sale);
}

.checkout-failed__details { color: var(--accent); font-size: var(--step--1); }
.checkout-gateway__heading, .checkout-thankyou__heading, .checkout-failed__heading { overflow-wrap: anywhere; }
.checkout-thankyou__actions { display: flex; justify-content: center; }
.checkout-failed__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- articles -------------------------------------------------- */

.article-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(var(--theme-articles-cards-per-row, 3), minmax(0, 1fr));
}

.article-grid--list { grid-template-columns: minmax(0, 1fr); }

.article-grid--list .article-card {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
}

.article-grid--magazine > .article-card:first-child { grid-column: 1 / -1; }

.article-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    background: var(--bg);
}

.article-card__media { display: block; overflow: hidden; border-radius: calc(var(--radius-card) - 6px); aspect-ratio: 16 / 9; }
.article-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.article-card__title { font-size: var(--step-1); margin: 0; display: flex; align-items: center; min-block-size: 24px; }
.article-card__title a { text-decoration: none; }
.article-card__title a:hover { text-decoration: underline; }

.article-card__meta,
.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: baseline;
    font-size: var(--label-size);
    color: var(--accent);
}

.article-card__excerpt { margin: 0; color: var(--accent); }
.article-card--featured { outline: 2px solid var(--primary); }

.articles-index__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 2rem;
}

.articles-index__feed {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 45%, transparent);
    font-size: var(--label-size);
    text-decoration: none;
}

.article-body { max-inline-size: 68ch; font-size: var(--step-1); line-height: 1.75; }

.article-body :is(h2, h3) {
    scroll-margin-block-start: calc(var(--header-height) + 1rem);
    margin-block-start: 1.5em;
}

.article-body blockquote {
    margin-inline: 0;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--line) 30%, transparent);
    font-size: var(--step-1);
}

.article-body img { border-radius: var(--radius-card); margin-block: 1.5rem; }

.article__layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

@media (min-width: 1024px) {
    .article__layout { grid-template-columns: minmax(0, 1fr) 15rem; }

    .article__toc {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        inset-block-start: calc(var(--header-height) + 1rem);
        align-self: start;
        max-block-size: calc(100vh - var(--header-height) - 2rem);
        overflow-y: auto;
    }

    .article__layout .article-body { grid-column: 1; grid-row: 1; }
}

.article__toc {
    padding: 1rem;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--line) 28%, transparent);
}

.article__toc-title {
    font-size: var(--label-size);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--accent);
    margin-block: 0 0.6rem;
}

.article__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.article__toc-item--h3 { padding-inline-start: 0.75rem; }
.article__toc a { font-size: var(--step--1); text-decoration: none; color: var(--accent); }
.article__toc a:hover,
.article__toc a[aria-current="true"] { color: var(--primary); }

.article__hero { margin: 0 0 1.75rem; }
.article__hero img { border-radius: var(--radius-card); }
.article__hero figcaption { margin-block-start: 0.5rem; font-size: var(--step--1); color: var(--accent); }

.article__reading-time,
.article__updated,
.reading-badge { font-size: var(--label-size); color: var(--accent); }

.article__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin-block: 2rem; padding: 0; }

.article__tags a {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 45%, transparent);
    font-size: var(--label-size);
    text-decoration: none;
}

.article__shop,
.article__related { margin-block-start: var(--section-gap); }

.article__author-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-block-start: var(--section-gap);
    padding: 1.25rem;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--line) 28%, transparent);
}

.article__author-card img { inline-size: 4rem; block-size: 4rem; border-radius: 50%; object-fit: cover; }
.article__author-name { font-weight: var(--weight-heading); text-decoration: none; }
.article__author-title { margin: 0.1rem 0 0.5rem; font-size: var(--step--1); color: var(--accent); }

.article__pager { display: grid; gap: 1rem; margin-block-start: var(--section-gap); }

@media (min-width: 768px) {
    .article__pager { grid-template-columns: 1fr 1fr; }
    .article__pager-link--next { grid-column: 2; text-align: end; }
}

.article__pager-link {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--line) 28%, transparent);
    text-decoration: none;
}

.article__pager-label { font-size: var(--label-size); text-transform: uppercase; letter-spacing: var(--label-tracking); color: var(--accent); }
.article__pager-title { font-weight: 600; }

.article-subcategories { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin-block-end: 1.5rem; }

.article-subcategory a {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 45%, transparent);
    font-size: var(--label-size);
    text-decoration: none;
}

/* ---------- events ---------------------------------------------------- */

.event__head { display: flex; gap: 1.25rem; align-items: flex-start; }

.event__date-badge {
    display: grid;
    place-items: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: var(--radius-card);
    background: var(--primary);
    color: var(--primary-fg);
    text-align: center;
}

.event__day { font-size: var(--step-2); font-weight: var(--weight-heading); line-height: 1; }
.event__month { font-size: var(--label-size); text-transform: uppercase; letter-spacing: var(--label-tracking); }
.event__meta { color: var(--accent); font-size: var(--step--1); }
.event__hero { margin-block: 1.5rem; }
.event__hero img { border-radius: var(--radius-card); }

.event-list,
.event-line__past { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.event-list__item {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}

.event-list__item a { display: flex; gap: 1rem; align-items: center; padding: 1rem; text-decoration: none; }
.event-list__title { font-weight: 600; }
.event-list__excerpt,
.event-line__lead { color: var(--accent); font-size: var(--step--1); }
.event-list--past { color: var(--accent); }

/* ---------- search / account / dataforms ------------------------------ */

.search-results__heading { font-size: var(--step-2); }
.search-results__query { font-weight: var(--weight-heading); }
.search-results__count,
.dataform-section { margin-block-end: 2rem; }
.dataform-section__title { font-size: var(--step-1); }
.dataform-field { display: grid; gap: 0.35rem; margin-block-end: 1rem; }

.dataform-field--group {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 1rem;
}

.dataform-field__group-label { font-weight: 600; }
.dataform-field__options { display: grid; gap: 0.5rem; }
.dataform-field__file input { padding: 0.5rem; }
.dataform-table-controls { display: flex; gap: 0.5rem; }

/* ---------- breadcrumbs / footer -------------------------------------- */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    padding-block: 1rem;
    font-size: var(--step--1);
    color: var(--accent);
    list-style: none;
    margin: 0;
}

.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs__sep { color: var(--accent); }

.footer__columns {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    padding-block: var(--section-gap);
    border-block-start: 1px solid var(--line);
}

/* Columns sit on a twelve-column grid, the same unit the block row model
   uses, so a column's width setting means the same thing in the footer as
   it does on a page. Below 640px every column is full width: a quarter of
   a phone is not a column. */
.footer__columns {
    grid-template-columns: 1fr;
}

.footer__col {
    min-inline-size: 0;
}

/* Menu block ("csf-menu-block"): the footer/nav content block's markup is bare `<li class="csf-menu__item">` elements with no wrapping `<ul>` and no class any theme targeted, so it is styled here to avoid raw browser bullet-list defaults. */
.csf-menu-block { min-inline-size: 0; }

.csf-menu-block__heading {
    margin: 0 0 0.75rem;
    font-size: var(--step-0, 1rem);
    font-weight: var(--weight-heading, 700);
}

.csf-menu-block__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.csf-menu-block--cols-2 .csf-menu-block__list { columns: 2; column-gap: 2rem; }
.csf-menu-block--cols-3 .csf-menu-block__list { columns: 3; column-gap: 2rem; }
.csf-menu-block--cols-4 .csf-menu-block__list { columns: 4; column-gap: 2rem; }
.csf-menu-block--cols-5 .csf-menu-block__list { columns: 5; column-gap: 1.5rem; }
.csf-menu-block--cols-6 .csf-menu-block__list { columns: 6; column-gap: 1.5rem; }

.csf-menu-block__list > .csf-menu__item {
    list-style: none;
    break-inside: avoid;
}

.csf-menu-block .csf-menu__item > a,
.csf-menu-block .csf-menu__item > .csf-menu__label,
.csf-menu-block .csf-menu__trigger {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-size: var(--step--1, 0.875rem);
    background: none;
    border: 0;
    padding: 0;
}

.csf-menu-block .csf-menu__item > a:hover {
    text-decoration: underline;
}

.csf-menu-block .csf-menu__trigger {
    cursor: default;
    font-weight: var(--weight-heading, 600);
}

.csf-menu-block .csf-menu__panel {
    margin-inline-start: 0.75rem;
    margin-block-start: 0.375rem;
    display: grid;
    gap: 0.375rem;
}

@media (min-width: 640px) {
    .footer__columns {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .footer__col {
        grid-column: span min(12, var(--footer-col-span, 3));
    }

    .footer__columns--split .footer__col:first-child {
        grid-column: span 6;
    }
}

.footer__columns--centered {
    justify-items: center;
    text-align: center;
}

.footer__columns--centered .footer__col {
    grid-column: 1 / -1;
}

.footer__columns--minimal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 1rem 2rem;
}

.footer__col.align-center { text-align: center; }
.footer__col.align-end { text-align: end; }

/* Column titles are mono small caps in the ink footer; the first text column reads as the brand line. */
.footer__col-title {
    margin-block: 0 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.footer__col-text {
    /* Operator-typed copy: keep it readable rather than full-bleed. */
    max-inline-size: 36ch;
    color: var(--accent);
}

.footer__col--text:first-child .footer__col-text { font-size: var(--step-0); }

.footer__col--text:first-child .footer__col-text strong,
.footer__col--text:first-child .footer__col-text b {
    display: block;
    margin-block-end: 0.6rem;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: var(--weight-heading);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--fg);
}

.footer__col-text p:first-child { margin-block-start: 0; }
.footer__col-text p:last-child { margin-block-end: 0; }

.footer__menu,
.footer__contact {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__menu a,
.footer__contact a {
    color: inherit;
    text-decoration: none;
}

/* A long address never widens the page: it breaks inside its column. */
.footer__contact li { min-inline-size: 0; overflow-wrap: anywhere; }

.footer__menu a:hover,
.footer__contact a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.footer__payment img {
    max-block-size: 28px;
    inline-size: auto;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding-block: 1.25rem;
    border-block-start: 1px solid var(--line);
    font-size: var(--step--1);
    color: var(--accent);
}

.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- motion ---------------------------------------------------- */

/* The one `!important` in this theme — the same accessibility exception
   Neon, Linen and Chalk make. */
@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;
    }
}

@media print {
    .header,
    .utility-bar,
    .footer__columns,
    .article__toc,
    .article__share,
    .paging { display: none; }

    body { font-size: 11pt; background: #fff; color: #000; }
    .product-card,
    .article-card { box-shadow: none; border: 1px solid #ccc; }
}

/* 2.5.8 target size on the two link kinds that sit outside a card.
   Measured on a real checkout page: breadcrumb links were 18px tall and
   cart-line product links 21px, both standalone links rather than text
   inline in a sentence, so the "inline" exception does not apply.
   `min-block-size` with inline-flex, so nothing moves visually. */
.breadcrumbs a,
.cart_item__link,
.cart__table a,
.checkout-item a,
.footer__bottom a {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
}

/* ---------- product card designs --------------------------------------
 *
 * Six layouts over one card markup, selected by `productCardDesign` and
 * applied as a class on the grid container. They are deliberately
 * orthogonal to `productListDisplay` (grid / list / compact), so "a list
 * of framed cards" composes from the two without a third template.
 *
 * Everything below reads this theme's own tokens, so the same six
 * designs look like six designs *in this theme* rather than six generic
 * ones. The point is that an operator changes the card's shape from the
 * backoffice instead of writing CSS for it.
 */

/* 1. standard — image, then details below, aligned to the reading edge.
      The neutral choice; nothing here overrides the theme's own card. */

/* 2. centered — the same stack, centred. */
.product-card-design--centered .product-card:not(.product-card--poster) {
    text-align: center;
    align-items: center;
}

.product-card-design--centered .product-card__title,
.product-card-design--centered .product-card__price {
    justify-content: center;
}

.product-card-design--centered .product-card__badges {
    inset-inline: 0;
    align-items: center;
}

/* 3. overlay — details sit on the image under a scrim, so the grid reads
      as pictures first. The scrim is what keeps the text legible over an
      arbitrary photograph (1.4.3), not a colour choice. */
.product-card-design--overlay .product-card:not(.product-card--poster) {
    position: relative;
}

.product-card-design--overlay .product-card__media {
    aspect-ratio: var(--card-ratio, 3 / 4);
}

.product-card-design--overlay .product-card__brand,
.product-card-design--overlay .product-card__title,
.product-card-design--overlay .product-card__price,
.product-card-design--overlay .product-card__sku,
.product-card-design--overlay .product-card__excerpt,
.product-card-design--overlay .product-card__stock {
    position: relative;
    z-index: 1;
    color: #fff;
    margin-inline: 0.75rem;
}

.product-card-design--overlay .product-card__title {
    margin-block-start: auto;
}

.product-card-design--overlay .product-card:not(.product-card--poster)::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 60%;
    background: linear-gradient(to top, rgb(0 0 0 / 78%), rgb(0 0 0 / 0%));
    pointer-events: none;
}

.product-card-design--overlay .product-card:not(.product-card--poster) .product-card__media {
    position: absolute;
    inset: 0;
}

/* `:not(.product-card--poster)` throughout: a poster spans its own
   columns and carries its own aspect ratio, so reshaping it as a card
   stretched it to the grid's full row height. */
.product-card-design--overlay .product-card:not(.product-card--poster) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-block-size: 0;
    justify-self: stretch;
    inline-size: 100%;
    aspect-ratio: var(--card-ratio, 3 / 4);
    padding-block-end: 0.75rem;
    overflow: hidden;
}

/* The add-to-cart button must stay above the scrim and stay a real
   target, so it is not pulled into the overlay treatment. */
.product-card-design--overlay .product-card .button {
    position: relative;
    z-index: 1;
    margin-inline: 0.75rem;
}

/* 4. frame — a bordered card with the image inset, for a catalogue that
      wants each product visually separated. */
.product-card-design--frame .product-card:not(.product-card--poster) {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 0.75rem;
}

.product-card-design--frame .product-card__media {
    border-radius: calc(var(--radius-card) - 4px);
    overflow: hidden;
}

/* 5. horizontal — image beside the details. Stacks below 480, where two
      columns of a card leave no room for either. */
@media (min-width: 480px) {
    .product-card-design--horizontal .product-card:not(.product-card--poster) {
        display: grid;
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: center;
    }

    .product-card-design--horizontal .product-card__media {
        grid-row: 1 / -1;
    }
}

/* 6. editorial — an oversized image with quiet, widely-tracked meta.
      The most typographic of the six. */
.product-card-design--editorial .product-card:not(.product-card--poster) {
    gap: 0.15rem;
}

.product-card-design--editorial .product-card__media {
    aspect-ratio: var(--card-ratio, 4 / 5);
    margin-block-end: 0.5rem;
}

.product-card-design--editorial .product-card__brand {
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.product-card-design--editorial .product-card__title {
    font-weight: var(--weight-body);
}

.product-card-design--editorial .product-card__price {
    letter-spacing: 0.04em;
}

/* The quick-add button is a deliberate intrusion in this one — it only
   appears on hover or focus, and is always present where hover does not
   exist. */
.product-card-design--editorial .product-card .button {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.product-card-design--editorial .product-card:hover .button,
.product-card-design--editorial .product-card:focus-within .button {
    opacity: 1;
}

@media (hover: none) {
    .product-card-design--editorial .product-card .button {
        opacity: 1;
    }
}

/* ---------- 404 ------------------------------------------------------- */

.page-404 {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
    padding-block: clamp(2rem, 8vw, 5rem);
}

/* Decorative: the heading below already says it in words, so this is
   `aria-hidden` in the markup and must never be the only signal. */
.page-404__code {
    margin: 0;
    font-size: clamp(4rem, 18vw, 9rem);
    line-height: 1;
    font-weight: var(--weight-heading, 700);
    color: var(--primary);
}

.page-404__title { margin: 0; }

.page-404__message {
    margin: 0;
    max-inline-size: 48ch;
    color: var(--accent);
}

.page-404__url {
    margin: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    font-size: var(--step--1);
    color: var(--accent);
}

.page-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-block-start: 0.5rem;
}

/* This theme's own product-page proportions. The six layouts themselves
   are shared (`themeAssets/src/productLayout.css`) because the grid
   structure is identical everywhere; the *ratio* is what makes a theme
   look like itself, so it stays here. Without these the shared rule's
   fallback would give every theme the same proportions. */
:root {
    --product-media: minmax(0, 1.15fr);
    --product-aside: minmax(0, 1fr);
    --product-media-wide: minmax(0, 1.7fr);
    --product-media-compact: minmax(0, 0.8fr);
    --product-centered-width: 46rem;
}

/* ---------------------------------------------- offer indicators --- */
/*
 * Position and style are theme settings, so the markup is emitted once
 * and placed here. Logical properties throughout — `start`/`end` follow
 * `html[dir]`, so an RTL shop needs no second rule.
 */
.product-card__offers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    pointer-events: none;
}

.product-card__offers--topStart,
.product-card__offers--topEnd,
.product-card__offers--bottomStart,
.product-card__offers--bottomEnd {
    position: absolute;
    z-index: 2;
    max-inline-size: calc(100% - 16px);
}

.product-card__offers--topStart { inset-block-start: 8px; inset-inline-start: 8px; }
.product-card__offers--topEnd { inset-block-start: 8px; inset-inline-end: 8px; }
.product-card__offers--bottomStart { inset-block-end: 8px; inset-inline-start: 8px; }
.product-card__offers--bottomEnd { inset-block-end: 8px; inset-inline-end: 8px; }

.product-card__offers--belowImage,
.product-card__offers--underTitle,
.product-card__offers--underPrice { margin-block: 6px; }

.offer-badge {
    --offer-bg: var(--theme-offer-badge-color, var(--theme-color-primary, #e5006d));
    --offer-fg: var(--theme-offer-badge-text-color, var(--theme-color-primary-on, #fff));

    display: inline-block;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    background: var(--offer-bg);
    color: var(--offer-fg);
    /* A badge can carry a long operator-written description; it wraps
     * rather than stretching the card or being clipped. */
    overflow-wrap: anywhere;
}

.product-card__offers--pill .offer-badge { border-radius: 999px; }
.product-card__offers--text .offer-badge { background: none; color: var(--offer-bg); padding-inline: 0; }

.product-card__offers--ribbon .offer-badge {
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    padding-inline-start: 10px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.product-card__offers--flag .offer-badge {
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
    padding-inline-end: 14px;
}

.product-card__offers--corner .offer-badge {
    border-radius: 0;
    transform: rotate(-45deg);
    transform-origin: center;
}

/* The product page's own callout: a list, not a badge strip. */
.product-offers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-block: 12px;
}

.product-offers__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border-inline-start: 3px solid var(--theme-offer-badge-color, var(--theme-color-primary, #e5006d));
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.03));
}

.product-offers__note {
    font-size: 0.8125rem;
    color: var(--theme-color-text-muted, #5a5a5a);
}

@media (prefers-reduced-motion: reduce) {
    .offer-badge { transition: none; }
}

/* ============================================================ blocks ===
 * Content blocks, styled by the theme.
 *
 * Most block types ship no stylesheet of their own, so the theme styles their markup; the blocks that do ship
 * CSS (slider, countdown, gift wrap, …) are the exception. Class names are `csf-`-prefixed. `btn`, `form-row` and
 * bare `button` keep their plain names on purpose: `jsClients/src/cart.ts` reads those exact class names as
 * behaviour selectors (submit-button disabling, dataform repeating-table rows). Everything else here is scoped
 * to its own block container, since a couple of these (`.csf-list`, `.csf-price`) are generic enough to want that.
 * `.category` and `.articles` are bare structural wrappers with no rules of their own.
 *
 * Every value comes from a theme token, so the six themes differentiate without duplicating this file's
 * structure. Logical properties throughout — these shops are mostly Hebrew.
 * ===================================================================== */

/* --- shared block rhythm ------------------------------------------- */

.csf-block .csf-viewport {
    inline-size: 100%;
}

/* The float-clearing spacer these templates emit. Harmless once the container is a grid, but it must not add a stray row. */
.csf-block [style*="clear"] {
    display: none;
}

/* --- product grids: category products, upsell, recently viewed ----- */

.csf-product-grid,
.csf-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--theme-card-min, 200px), 1fr));
    gap: var(--theme-grid-gap, 20px);
    margin-block: var(--theme-section-spacing, 32px);
    padding: 0;
    list-style: none;
}

.csf-product-grid .product-image,
.csf-grid-wrapper .product-image {
    display: block;
    aspect-ratio: var(--theme-card-ratio, 1);
    overflow: hidden;
    border-radius: var(--theme-radius-card, 8px);
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.03));
}

.csf-product-grid .product-image img,
.csf-grid-wrapper .product-image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.csf-product-grid .csf-price,
.csf-grid-wrapper .csf-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-weight: 600;
    color: var(--theme-color-text, inherit);
}

.csf-product-grid .original-sale-price,
.csf-grid-wrapper .original-sale-price {
    text-decoration: line-through;
    font-weight: 400;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.csf-product-grid .csf-amount,
.csf-grid-wrapper .csf-amount {
    font-variant-numeric: tabular-nums;
}

.gallery-add-to-cart,
.gallery-product-add-to-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: 14px;
    border: 0;
    border-radius: var(--theme-radius-button, 6px);
    background: var(--theme-color-primary, #e5006d);
    color: var(--theme-color-primary-on, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.gallery-add-to-cart:hover,
.gallery-product-add-to-cart:hover {
    filter: brightness(0.94);
}

/* --- categories ---------------------------------------------------- */

.csf-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--theme-category-min, 180px), var(--theme-category-max, 300px)));
    justify-content: center;
    gap: var(--theme-grid-gap, 20px);
}

/* The "nothing found" block of an empty category is one centred column, not a card cell. */
.category__empty {
    grid-column: 1 / -1;
    margin-block: 1.5rem;
    text-align: center;
}

.category__empty h2 {
    font-size: 1.25rem;
    margin-block-end: 1rem;
}

/* Two or more category tiles side by side in one wrapper form a tile row: a multi-column grid and readable captions. A tile keeps its picture's own shape. */
:where(div):where(:has(> .csf-block > .csf-featured-category):has(> .csf-block + .csf-block > .csf-featured-category)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: var(--theme-grid-gap, 20px);
}

@media (max-width: 600px) {
    :where(div):where(:has(> .csf-block > .csf-featured-category):has(> .csf-block + .csf-block > .csf-featured-category)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

:where(:has(> .csf-block + .csf-block > .csf-featured-category) > .csf-block) {
    inline-size: 100%;
}

:where(:has(> .csf-block + .csf-block > .csf-featured-category) > .csf-block .csf-text-block) {
    padding-block: 0.5rem;
}

:where(:has(> .csf-block + .csf-block > .csf-featured-category) > .csf-block .csf-text-block__title),
:where(:has(> .csf-block + .csf-block > .csf-featured-category) > .csf-block .csf-text-block__link) {
    color: inherit;
    font-size: 1rem;
}

@media (max-width: 600px) {
    .csf-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.csf-categories .csf-category a {
    display: grid;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.csf-categories .category-image {
    aspect-ratio: var(--theme-card-ratio, 1);
    overflow: hidden;
    border-radius: var(--theme-radius-card, 8px);
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.03));
}

.csf-categories .category-image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.csf-categories .csf-category h3 {
    margin: 0;
    font-size: 1rem;
    text-align: center;
}

/* Category menus — a vertical list, a top row, and a native select. */

.block-content-cat .product-categories {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.block-content-cat .csf-category-item a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--theme-radius-button, 6px);
    text-decoration: none;
    color: inherit;
}

.block-content-cat .csf-category-item a:hover {
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.05));
}

.top-categories-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.top-categories-menu .top-category-item a {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    padding-inline: 14px;
    border: 1px solid var(--theme-color-border, #e0e0e0);
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
}

.top-categories-menu .top-category-item a:hover {
    border-color: var(--theme-color-primary, #e5006d);
}

.block-product-categories-select {
    inline-size: 100%;
    min-block-size: 44px;
    padding-inline: 10px;
    border: 1px solid var(--theme-color-border, #e0e0e0);
    border-radius: var(--theme-radius-input, 6px);
    background: var(--theme-color-background, #fff);
    color: inherit;
    font: inherit;
}

/* --- brands -------------------------------------------------------- */

.block-brands.csf-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--theme-brand-min, 140px), 1fr));
    gap: var(--theme-grid-gap, 20px);
    align-items: center;
}

.block-brand-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid var(--theme-color-border, #e0e0e0);
    border-radius: var(--theme-radius-card, 8px);
    background: var(--theme-color-background, #fff);
}

.block-brand-item img {
    max-inline-size: 100%;
    block-size: auto;
    object-fit: contain;
}

/* --- article loops ------------------------------------------------- */

.csf-articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--theme-article-min, 260px), 1fr));
    gap: var(--theme-grid-gap, 24px);
    margin-block: var(--theme-section-spacing, 32px);
}

.csf-articles .img-lnk,
.csf-articles .category-article-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--theme-radius-card, 8px);
}

.csf-articles .category-article-image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.csf-articles .article-head {
    margin-block: 10px 4px;
    font-size: 1.05rem;
    line-height: 1.3;
}

.csf-articles .entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.csf-articles .entry-excerpt {
    margin-block: 8px;
    color: var(--theme-color-text-muted, #5a5a5a);
}

.csf-articles .read-more {
    display: inline-block;
    font-weight: 600;
    color: var(--theme-color-primary, #e5006d);
}

/* --- FAQ ----------------------------------------------------------- */

/* Questions are hairline rows set in the display face; the marker is a plus on a disc that fills and turns into a cross when open. */
.faq-block {
    display: grid;
    gap: 0;
    margin-block: var(--theme-section-spacing, 32px);
    border-block-start: 1px solid var(--line-strong);
}

.faq-item {
    border: 0;
    border-block-end: 1px solid var(--line-strong);
    border-radius: 0;
    overflow: hidden;
}

.faq-item > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-block-size: 48px;
    padding: 22px 0;
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.faq-item > summary:hover { color: var(--accent-ink); }

.faq-item > summary::after {
    content: '';
    position: relative;
    inline-size: 34px;
    block-size: 34px;
    flex: none;
    border: 2px solid var(--fg);
    border-radius: 50%;
    background:
        linear-gradient(var(--fg), var(--fg)) center / 14px 2px no-repeat,
        linear-gradient(var(--fg), var(--fg)) center / 2px 14px no-repeat;
    transform: none;
    transition: transform 0.25s var(--ease), background-color 0.25s;
}

.faq-item[open] > summary::after {
    background:
        linear-gradient(var(--bg), var(--bg)) center / 14px 2px no-repeat,
        linear-gradient(var(--bg), var(--bg)) center / 2px 14px no-repeat;
    background-color: var(--fg);
    transform: rotate(45deg);
}

.faq-content {
    padding: 0 0 26px;
    max-inline-size: 62ch;
    color: var(--fg);
}

@media (max-width: 640px) {
    .faq-item > summary { gap: 16px; padding: 18px 0; font-size: 1.1rem; }
}

/* --- photo gallery ------------------------------------------------- */

.photo-gallery-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--theme-thumb-min, 150px), 1fr));
    gap: 10px;
}

.block-photo-gallery-image-cont {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--theme-radius-card, 8px);
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.03));
}

.image-thumbnail {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.block-photo-gallery-image-cont:hover .image-thumbnail {
    transform: scale(1.04);
}

/* --- pricing plans ------------------------------------------------- */

/* The block's own stylesheet lays the table out and loads after this one, so the element selector outranks its class rule;
   this theme sets the frame to the hard-shadow card and the type to the display face. */
section.block-pricing-plans {
    --pp-frame: 2px solid var(--fg);
    --pp-shadow: var(--shadow-hard);
    --pp-surface: var(--paper-3);
    --pp-line: var(--line);
    --pp-line-strong: var(--fg);
    --pp-tint: color-mix(in srgb, var(--primary) 6%, var(--paper-3));
    --pp-display: var(--font-heading);
    --pp-mono: var(--font-mono);
    /* The page sections around the table carry the spacing. */
    margin-block: 0 clamp(56px, 8vw, 112px);
}

.block-pricing-plan-item { background: var(--paper-3); }

.plan-name { margin: 0; font-family: var(--font-heading); font-size: var(--step-2); font-weight: var(--weight-heading); letter-spacing: -0.02em; line-height: 1; }
.plan-price { font-family: var(--font-heading); font-size: var(--step-3); font-weight: var(--weight-heading); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-shop-count { color: var(--accent); font-size: var(--step--1); }
/* The shop-count control of the pricing block in this theme's hard-edged frame; the "for 4 shops" line under a figure in the body face. */
.pricing-plans__shops-stepper { box-shadow: var(--shadow-hard-sm); border-radius: 4px; }
.pricing-plans__shops-label { font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.plan-price__shops { font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; letter-spacing: 0; color: var(--accent); }

/* --- data forms ---------------------------------------------------- */

.dataform-fields {
    display: grid;
    gap: 14px;
}

.dataform .form-row {
    display: grid;
    gap: 6px;
}

.dataform .csf-group-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

/* Labels are mono small caps; fields are the theme's ink-edged inputs on the third paper. */
.dataform label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--accent);
}

.dataform input:not([type='checkbox']):not([type='radio']):not([type='submit']),
.dataform select,
.dataform textarea {
    inline-size: 100%;
    min-block-size: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--fg);
    border-radius: var(--theme-radius-input, 4px);
    background: var(--paper-3);
    color: inherit;
    font: inherit;
}

.dataform textarea { min-block-size: 120px; resize: vertical; }

.data-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 8px;
}

.dataform .btn,
.data-form-actions input.button,
.row-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 52px;
    padding-inline: 22px;
    border: 2px solid var(--fg);
    border-radius: var(--theme-radius-button, 4px);
    background: var(--theme-color-primary, #c8381a);
    color: var(--theme-color-primary-on, #fff8f2);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s;
}

.dataform .btn:hover,
.data-form-actions input.button:hover,
.row-add:hover { transform: var(--lift-3); box-shadow: var(--shadow-hard-sm); }

/* --- order tracking ------------------------------------------------ */

.block-order-tracking .order_details {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--theme-color-border, #e0e0e0);
    border-radius: var(--theme-radius-card, 8px);
}

.block-order-tracking .csf-order,
.block-order-tracking .csf-date,
.block-order-tracking .shipping-method,
.block-order-tracking .tracking-number,
.block-order-tracking .last-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.block-order-tracking .last-status {
    font-weight: 600;
    color: var(--theme-color-primary, #e5006d);
}

/* --- login controls ------------------------------------------------ */

.block-login-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* --- share buttons -------------------------------------------------- */

.block-simple-share .social-icons,
.block-simple-share .list-unstyled {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-simple-share .social-icon-item a,
.block-simple-share .btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.06));
    color: inherit;
    text-decoration: none;
}

.block-simple-share .btn-facebook { background: #1877f2; color: #fff; }
.block-simple-share .btn-twitter { background: #000; color: #fff; }
.block-simple-share .btn-whatsapp { background: #25d366; color: #fff; }

/* --- product custom sections --------------------------------------- */

.product-fields-sections-block {
    display: grid;
    gap: 14px;
    margin-block: 18px;
}

/* --- featured category --------------------------------------------- */

/* The overlay caption, revealed on hover or keyboard focus. It must not
   be hidden from assistive technology — `text-block-hidden` only means
   visually quiet until interaction. */
.csf-featured-category .csf-text-block-hidden {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.csf-featured-category:hover .csf-text-block-hidden,
.csf-featured-category:focus-within .csf-text-block-hidden {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .image-thumbnail,
    .csf-featured-category .csf-text-block-hidden {
        transition: none;
    }
}

/* --- block CTAs ----------------------------------------------------- */

/* `.button--primary` is the modifier the countdown and gift-wrap blocks
   put on their call to action. Nothing styled it, so the most
   action-oriented element on those blocks rendered as plain text. */
.button--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: 20px;
    border: 2px solid var(--fg);
    border-radius: var(--theme-radius-button, 4px);
    background: var(--theme-color-primary, #c8381a);
    color: var(--theme-color-primary-on, #fff8f2);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.button--primary:hover { background: var(--accent-ink); }

/* --- events calendar ------------------------------------------------ */

/* The calendar is a real `<table>` (a month is tabular data), so it is
   styled as one. Styling it as a CSS grid made `<thead>`/`<tbody>` the
   grid items: the weekday row collapsed into a single inline blob beside
   the month instead of heading seven columns. */
.events-calendar {
    display: grid;
    gap: 16px;
    margin-block: var(--theme-section-spacing, 32px);
}

/* Grid beside its day list on a wide screen; stacked below 900px, where
   two columns would leave the month unreadably narrow. */
@media (min-width: 900px) {
    .events-calendar--sideList {
        grid-template-columns: minmax(320px, 1fr) minmax(260px, 340px);
        align-items: start;
    }

    .events-calendar--sideList .events-calendar__bar { grid-column: 1 / -1; }
}

.events-calendar__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* The class sits on each button, not on a wrapper. */
.events-calendar__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid var(--theme-color-border, #e0e0e0);
    border-radius: 999px;
    background: var(--theme-color-background, #fff);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.events-calendar__nav:hover { background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.04)); }

/* The buttons carry only an `aria-label`, so the arrow itself is drawn
   here — and mirrored with the writing direction, never hard-coded. */
/* Two sides of a square, rotated — a chevron. The widths are set after a
   `border: 0` reset rather than through the `border-inline-start`
   shorthand, which a stylesheet that gives pseudo-elements a default
   border style turns into all four sides: a diamond, not an arrow. */
.events-calendar__nav::before {
    content: '';
    inline-size: 9px;
    block-size: 9px;
    border: 0 solid currentColor;
    border-inline-start-width: 2px;
    border-block-start-width: 2px;
}

.events-calendar__nav[data-cal-prev]::before { transform: rotate(-45deg); margin-inline-start: 3px; }
.events-calendar__nav[data-cal-next]::before { transform: rotate(135deg); margin-inline-end: 3px; }

.events-calendar__label {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
}

.events-calendar__grid-wrap {
    /* A month grid is the one thing allowed to scroll sideways on a
       narrow screen; the page itself must not. */
    overflow-x: auto;
}

.events-calendar__grid {
    inline-size: 100%;
    min-inline-size: 300px;
    border-collapse: separate;
    border-spacing: 4px;
    table-layout: fixed;
}

.events-calendar__grid th {
    padding-block: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.events-calendar__grid td {
    block-size: 56px;
    padding: 0;
    border: 1px solid var(--theme-color-border, #e8e8e8);
    border-radius: var(--theme-radius-card, 6px);
    background: var(--theme-color-background, #fff);
    vertical-align: top;
}

.events-calendar__grid td.is-empty {
    border-color: transparent;
    background: none;
}

.events-calendar__grid td.is-today {
    border-color: var(--theme-color-primary, #e5006d);
    font-weight: 700;
}

.events-calendar__grid td[aria-selected='true'] {
    outline: 2px solid var(--theme-color-primary, #e5006d);
    outline-offset: -2px;
}

/* A day with events is a link filling its cell, so the whole cell is the
   target rather than the digit alone. */
.events-calendar__grid td > a,
.events-calendar__grid td > .events-calendar__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    block-size: 100%;
    padding: 6px 4px;
    color: inherit;
    text-decoration: none;
}

.events-calendar__grid td > a:hover { background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.04)); }

.events-calendar__day {
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.events-calendar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--theme-color-primary, #e5006d);
    color: var(--theme-color-primary-on, #fff);
    font-size: 0.7rem;
    font-weight: 700;
}

.events-calendar__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.events-calendar__list .event-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-list__item a {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--theme-color-border, #e8e8e8);
    border-radius: var(--theme-radius-card, 6px);
    color: inherit;
    text-decoration: none;
}

.event-list__item a:hover { border-color: var(--theme-color-primary, #e5006d); }

.event-list__item img {
    inline-size: 64px;
    block-size: 64px;
    border-radius: var(--theme-radius-card, 6px);
    object-fit: cover;
}

.event-list__title { font-weight: 700; }

.event-list__item time,
.event-list__excerpt {
    font-size: 0.85rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.events-calendar__empty {
    padding: 20px;
    text-align: center;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.event-list__body {
    display: grid;
    gap: 4px;
}
/* --- store info ----------------------------------------------------- */

.store-info {
    display: grid;
    gap: 16px;
    margin-block: var(--theme-section-spacing, 32px);
}

.store-info__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- video ---------------------------------------------------------- */

.video iframe,
.video video {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    object-fit: cover;
}

/* --- image link / featured category tiles --------------------------- */

.csf-img-text-block {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--theme-radius-card, 8px);
}

.csf-img-text-block img {
    inline-size: 100%;
    block-size: auto;
    display: block;
}

.csf-text-block__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.csf-text-block__link {
    display: inline-block;
    margin-block-start: 6px;
    font-weight: 600;
    color: var(--theme-color-primary, #e5006d);
}

/* --- photo gallery container ---------------------------------------- */

.photo-gallery {
    margin-block: var(--theme-section-spacing, 32px);
}

.block-photo-gallery-image {
    display: block;
}

/* --- article meta --------------------------------------------------- */

.csf-articles .entry-date,
.csf-articles .entry-time {
    font-variant-numeric: tabular-nums;
    color: var(--theme-color-text-muted, #6a6a6a);
}

/* --- share buttons, remaining hooks --------------------------------- */

.block-simple-share .social-media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.block-simple-share .black-color {
    color: var(--theme-color-text, #111);
}

/* --- category menu / popup wrappers --------------------------------- */

.csf-block .block {
    display: block;
}

.block-category-item-select {
    color: inherit;
}

/* --- gift wrap label ------------------------------------------------ */

.gift-wrap__label {
    display: block;
    font-weight: 600;
}

/* --- countdown expired notice --------------------------------------- */

.countdown__expired {
    margin: 0;
    color: var(--theme-color-text-muted, #6a6a6a);
}

/* --- dataform file input (shared by the events form) ---------------- */

.input-file-upload {
    inline-size: 100%;
    padding: 8px 0;
    font: inherit;
}

/* ====================================================== completeness ===
 * The parts of each page the theme emitted markup for but never styled.
 *
 * An audit of every class every theme template renders found 498 of 1783
 * class usages with no rule anywhere — not in the theme, not in the
 * platform stylesheets, not in the widget bundle. The cart was the worst
 * at over half. Nothing errored: the templates compiled, the pages
 * returned 200, and the markup was well-formed. It simply had no layout.
 *
 * Everything here is driven by theme tokens, so the six themes still
 * differentiate; only the structure is shared. Logical properties
 * throughout, since these shops are mostly Hebrew.
 * ===================================================================== */

/* --- breadcrumbs ----------------------------------------------------- *
 * The markup is `nav.breadcrumbs > ol > li`, so `display: flex` belongs on the `<ol>` (the NAV's only child),
 * which also needs `list-style: none`; otherwise the list renders as a numbered vertical list with the "/"
 * separators as their own numbered rows. */

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

/* --- messages ------------------------------------------------------- */

.messages {
    display: grid;
    gap: 8px;
    margin-block: 16px;
}

.messages:empty { display: none; }

/* --- cart ----------------------------------------------------------- */

/* The two-column split belongs to `.cart__layout`, which is what the
   template nests the lines and the summary inside. A second grid here
   made the whole cart one 340px column of that grid and then split it
   again — the page rendered as a squeezed strip. */
/* No margin of its own: the cart page's wrapper already carries
   `.section`, whose padding is the page's vertical rhythm. Adding a
   margin on top of it doubled the gap above the cart heading. */
.cart {
    min-inline-size: 0;
}

.cart__lines {
    min-inline-size: 0;
}

/* A table row stays a table row on a wide screen: the card-style grid
   here was written for the pre-table markup and overrode
   `display: table-row`, so the cells wrapped and every line rendered
   three rows tall. The stacked card is the phone layout, below. */
.cart_item > td {
    padding: 12px 8px;
    border-block-end: 1px solid var(--theme-color-border, #e5e5e5);
    vertical-align: middle;
}

.cart_item__link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

/* Phone: each row becomes its own card, each cell labelled by the
   heading the template put in `data-label`. */
@media (max-width: 767px) {
    .cart__table thead { display: none; }

    .cart__table,
    .cart__table tbody,
    .cart_item,
    .cart_item > td {
        display: block;
        inline-size: auto;
    }

    .cart_item {
        margin-block-end: 12px;
        padding: 8px;
        border: 1px solid var(--theme-color-border, #e5e5e5);
        border-radius: var(--theme-radius-card, 8px);
    }

    .cart_item > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-inline: 4px;
        border-block-end: 0;
    }

    .cart_item > td::before {
        content: attr(data-label);
        font-size: 0.8rem;
        color: var(--theme-color-text-muted, #6a6a6a);
    }

    .cart_item > td:first-child::before { content: none; }
}

.cart_item img {
    inline-size: 72px;
    block-size: 72px;
    object-fit: contain;
    border-radius: var(--theme-radius-card, 6px);
}

/* A line attached to the one above it (a gift wrap on that product,
   say, via a real `parentLineId`) — a distinct, quieter row, never an
   unrelated-looking extra line in the flat list. */
.cart_item--attached {
    background: var(--theme-color-border, #f2f2f2);
}

.cart_item--attached > td:first-child {
    padding-inline-start: 2rem;
}

.cart_item__attached-note {
    display: block;
    font-size: 0.75rem;
    color: var(--theme-color-text-muted, #6a6a6a);
    margin-block-end: 0.25rem;
}

/* `↳`'s tip points right, which only reads as "nested under the line
   above" in LTR — mirrored for RTL rather than threading page direction
   through every cart-line render just to pick a character. */
.cart_item__attached-note::before {
    content: "↳ ";
}

.cart_item__attached-note:dir(rtl)::before {
    content: "↲ ";
}

/* A `prod_gift_card` line's recipient row (`gift_card_recipient_form`, saved summary): full width, directly under the line it
   belongs to, never squeezed into the product cell. This theme: ink-edged tiles with a hard offset shadow on hover.
   The cart script binds `.gift_card_recipient_form`, `.gift_card_recipient__edit-toggle` and `--collapsed`; the names stay. */

.cart_item--gift-card-recipient > td {
    background: color-mix(in srgb, var(--primary) 5%, var(--bg));
    padding: 1.5rem 1rem;
}

/* The phone layout makes every cell a labelled flex row; this cell holds a form, so it stays a block. */
@media (max-width: 767px) {
    .cart_item--gift-card-recipient > td {
        display: block;
    }
}

.gift_card_recipient__saved {
    margin: 0 0 0.75rem;
    font-size: var(--step--1);
}

.gift_card_recipient__edit-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding: 0 0.5rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.gift_card_recipient_form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
}

.gift_card_recipient_form--collapsed {
    display: none;
}

.gift_card_recipient_form__intro,
.gift_card_recipient_form__delivery,
.gift_card_recipient_form__row:has(textarea),
.gift_card_recipient_form__submit {
    grid-column: 1 / -1;
}

.gift_card_recipient_form__intro {
    margin: 0;
    font-weight: var(--weight-heading);
}

.gift_card_recipient_form__row {
    display: grid;
    gap: 0.35rem;
    min-inline-size: 0;
}

.gift_card_recipient_form__row label {
    font-size: var(--label-size);
    font-weight: 600;
    color: var(--accent);
}

.gift_card_recipient_form__row textarea {
    min-block-size: 5rem;
    resize: vertical;
}

/* Email or SMS: two options read as options, not as field labels. */
.gift_card_recipient_form__delivery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.gift_card_recipient_form__delivery label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}

.gift_card_recipient_form__delivery input {
    inline-size: auto;
    min-block-size: 0;
    margin: 0;
    accent-color: var(--primary);
}

.gift_card_recipient_form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-block-size: 3rem;
    padding-inline: 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: var(--primary);
    color: var(--primary-fg);
    font-weight: 600;
    box-shadow: var(--shadow-soft);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.gift_card_recipient_form__submit:hover {
    transform: translateY(-1px);
}

/* The row's own pieces. The thumbnail is built by the template from the
   URL the server sends; the text column carries the name, the chosen
   variant and the unit price under it. */
.cart_item__image {
    inline-size: 72px;
    block-size: 72px;
    object-fit: contain;
    border-radius: var(--theme-radius-card, 6px);
    flex: 0 0 auto;
}

.cart_item__text {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
}

.cart_item__variant,
.cart_item__unit {
    font-size: 0.85rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.cart_item__unit--sale {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
}

.cart_item__unit-original {
    text-decoration: line-through;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.cart_item__unit-current {
    color: var(--theme-color-sale, #d81b3c);
    font-weight: 600;
}

/* A `cart_apply_reward_gifts`-added free gift (`domain/carts/rules.ts`)
   — a distinct, quieter row (same real treatment as `cart_item--attached`
   above), never indistinguishable from an ordinary $0 line. */
.cart_item--reward {
    background: var(--theme-color-border, #f2f2f2);
}

.cart_item__reward-badge {
    display: inline-block;
    margin-block-end: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-color-primary-on, #fff);
    background: var(--theme-color-primary, #e5006d);
}

.cart_item__unit--reward {
    color: var(--theme-color-primary, #e5006d);
    font-weight: 600;
}

.cart_item__reward-qty {
    font-size: 0.9rem;
}

.cart_item__edit {
    display: inline-block;
    margin-block-start: 4px;
    font-size: 0.85rem;
}

.cart_item__discount,
.cart_item__total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cart_item__discount { color: var(--theme-color-sale, #d81b3c); }

.cart_item__name {
    font-weight: 600;
    line-height: 1.3;
}

.cart_item__name a { color: inherit; text-decoration: none; }
.cart_item__name a:hover { text-decoration: underline; }

/* The quantity stepper. `span.quantity input.qty` is a platform selector
   the cart script depends on — styled, never renamed. */
.quantity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.qty {
    inline-size: 4.5rem;
    min-block-size: 44px;
    padding-inline: 8px;
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-input, 6px);
    background: var(--theme-color-background, #fff);
    color: inherit;
    font: inherit;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.product-remove a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    color: var(--theme-color-text-muted, #6a6a6a);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
}

.product-remove a:hover {
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.06));
    color: var(--theme-color-text, #111);
}

.cart__summary {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-card, 8px);
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.02));
    position: sticky;
    inset-block-start: 1rem;
}

.cart-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cart__coupon,
/* A block of the summary column: shipping, then the coupon, then payment,
   each under its own heading and separated by a rule so the column reads
   as steps rather than one long list. */
.checkout__section {
    padding-block-start: 1rem;
    margin-block-start: 1rem;
    border-block-start: 1px solid var(--theme-color-border, #e5e5e5);
}

.checkout__section > h3 {
    margin-block: 0 0.6rem;
    font-size: 1rem;
}

/* The chosen method and the payment options are the summary column's own
   controls now, so they get its width rather than a form column's. */
.checkout__section .checkout_shipping_method {
    accent-color: var(--theme-color-primary, #e5006d);
}

.checkout__coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cart__coupon input {
    flex: 1 1 8rem;
    min-block-size: 44px;
    padding-inline: 10px;
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-input, 6px);
    background: var(--theme-color-background, #fff);
    color: inherit;
    font: inherit;
}

.checkout_shipping_method { cursor: pointer; }

.cart--empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--theme-color-text-muted, #6a6a6a);
}

/* The drawer shares the cart's vocabulary.

   The dialog itself has no padding (the lines list manages its own), so
   the header has to carry its own: without it the title and the close
   button sat flush against the drawer's edges. Sticky, so the title and
   the way out stay visible while the lines scroll. */
.cart-drawer__head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-block-end: 1px solid var(--theme-color-border, #e5e5e5);
    background: var(--theme-color-background, #fff);
}

.cart-drawer__head h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}

/* The close button is the drawer's only escape on a touch screen. */
.cart-drawer__head .icon-button {
    flex: 0 0 auto;
    min-inline-size: 40px;
    min-block-size: 40px;
}

.cart-drawer__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-block: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- checkout -------------------------------------------------------- */

/* Scoped to the page element, never the bare class: `pageTemplate.ts`
   puts the page's content class on `<body>` too, so a bare `.checkout`
   rule turned the whole document into a two-column grid and squeezed the
   header into the narrow one. */
/* Scoped to the page element, never the bare class: `pageTemplate.ts`
   puts the page's content class on `<body>` too, so a bare `.checkout`
   rule turned the whole document into a two-column grid and squeezed the
   header into the narrow one. The two columns belong to
   `.checkout__layout`, which is what the template nests them in. */
/* No margin of its own — `.section` around it already carries the page's
   vertical rhythm, and stacking a margin on that padding doubled the gap
   above the checkout heading (the same duplication `.cart` had). */
.section.checkout {
    min-inline-size: 0;
}

.checkout__main { display: grid; gap: 22px; min-inline-size: 0; }

.checkout__items {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkout-item__body {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
}

.checkout-item__name {
    font-weight: 600;
    line-height: 1.3;
}

.checkout__grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--theme-color-border, #e5e5e5);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.checkout-payment {
    display: grid;
    gap: 10px;
}

.checkout-payment__methods {
    display: grid;
    gap: 8px;
}

.checkout-gateway {
    inline-size: 100%;
    min-block-size: 420px;
    border: 0;
}

/* Thank-you page: a success icon, a receipt card, and the order's own line items. */
.checkout-thankyou__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    color: var(--theme-color-success, #2e7d32);
}

.checkout-thankyou__message {
    max-inline-size: 34rem;
    margin-inline: auto;
    color: var(--fg, #16161a);
}

.checkout-thankyou__message p:first-child {
    margin-block-start: 0;
}

.checkout-thankyou__message p:last-child {
    margin-block-end: 0;
}

.checkout-thankyou__notices {
    list-style: none;
    margin: 0.5rem auto 0;
    padding: 0;
    max-inline-size: 30rem;
    display: grid;
    gap: 0.375rem;
    font-size: var(--step--1, 0.875rem);
    color: var(--theme-color-text-muted, #6a6a6a);
}

.checkout-thankyou__notice {
    display: block;
}

.checkout-thankyou__card {
    text-align: start;
    margin-inline: auto;
    max-inline-size: 30rem;
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 1px solid var(--line, #e6e6ea);
    border-radius: var(--radius-card, 8px);
    background: var(--bg, #fff);
}

.checkout-thankyou__items {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    border-block-start: 1px solid var(--line, #e6e6ea);
    display: grid;
    gap: 0.625rem;
}

.checkout-thankyou__item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--step-0, 1rem);
}

.checkout-thankyou__item-name {
    font-weight: var(--weight-body, 400);
}

.checkout-thankyou__item-qty {
    color: var(--theme-color-text-muted, #6a6a6a);
}

.checkout-thankyou__item-price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.checkout-thankyou {
    display: grid;
    gap: 16px;
    max-inline-size: 42rem;
    margin-inline: auto;
    padding-block: var(--theme-section-spacing, 40px);
    text-align: center;
}

.checkout-failed {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-block-end: 32px;
    border: 1px solid var(--theme-color-danger, #c0392b);
    border-radius: var(--theme-radius-card, 8px);
    color: var(--theme-color-danger, #c0392b);
}

.fmt-shipping-price { font-variant-numeric: tabular-nums; }

.badge--free {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--theme-color-success, #2e7d32);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* --- single product --------------------------------------------------- */

.product__media { min-inline-size: 0; }

.product__details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-block-start: var(--theme-section-spacing, 32px);
}

.product__subtitle {
    margin: 0;
    color: var(--theme-color-text-muted, #5a5a5a);
    font-size: 1.05rem;
}

.product__short { color: var(--theme-color-text-muted, #5a5a5a); }

.product__brand a { color: inherit; }

.product__sku,
.product__stock {
    font-size: 0.875rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.product-offers__text { font-weight: 600; }

/* `.single-product-data` is a behaviour hook the platform script reads;
   it needs to lay its children out, nothing more. */
.single-product-data { display: grid; gap: 14px; min-inline-size: 0; }

/* --- account and sign-in ---------------------------------------------- */

/* A choice sits on one line with its label, at a real hit size without
   being stretched. */
.dataform input[type='checkbox'],
.dataform input[type='radio'] {
    flex: none;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    min-block-size: 0;
    margin: 0;
    accent-color: var(--theme-color-primary, #e5006d);
}

/* The clickable row around a choice: the whole line is the target, which
   is what gets it to 44px without inflating the box itself. */
.dataform label:has(input[type='checkbox']),
.dataform label:has(input[type='radio']),
.dataform .form-row:has(> input[type='checkbox']) {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 32px;
    font-weight: 400;
    cursor: pointer;
}

/* A group of choices is a compact list, not one tall column of boxes. */
.dataform .csf-group-fields:has(input[type='checkbox']),
.dataform .csf-group-fields:has(input[type='radio']) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 2px 16px;
}

fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-card, 8px);
}

legend {
    padding-inline: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* A required field an operator marked, before any JS runs. */
.validate-required > label::after,
label.validate-required::after {
    content: ' *';
    color: var(--theme-color-danger, #c0392b);
}

/* Campaign status, set client-side (`user-account.liquid`'s own inline
   script) — not scannable from the liquid markup itself, same reason
   `.badge--{{ state.name }}` above it isn't either. */
.badge--active { background: var(--stock); color: var(--stock-fg); }
.badge--inactive { background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.08)); color: var(--theme-color-text-muted, #5a5a5a); }

/* A table that becomes stacked rows on a narrow screen rather than
   forcing the page to scroll sideways. */
.table--stacked { inline-size: 100%; border-collapse: collapse; }
.table--stacked th,
.table--stacked td { padding: 8px 10px; text-align: start; }
.table--stacked tbody tr { border-block-end: 1px solid var(--theme-color-border, #eee); }

@media (max-width: 768px) {
    .table--stacked thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .table--stacked tbody tr { display: grid; gap: 2px; padding-block: 10px; }
    .table--stacked td { padding-inline: 0; }
    .table--stacked td[data-label]::before {
        content: attr(data-label) ': ';
        font-weight: 600;
    }
}

/* --- wishlist-view (gift registry) ---------------------------------- */

.wishlist-view {
    display: grid;
    gap: 24px;
}

.wishlist-view__heading { margin: 0 0 4px; }
.wishlist-view__occasion { margin: 0 0 24px; color: var(--theme-color-text-muted, #5a5a5a); }
.wishlist-view__empty { color: var(--theme-color-text-muted, #5a5a5a); }

.wishlist-view__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wishlist-view__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wishlist-view__item--purchased .wishlist-view__item-name,
.wishlist-view__item--purchased .wishlist-view__item-price {
    color: var(--theme-color-text-muted, #5a5a5a);
}

.wishlist-view__item-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
}

.wishlist-view__item-info { display: grid; gap: 4px; }

.wishlist-view__item-name {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.wishlist-view__item-price { color: var(--theme-color-text-muted, #5a5a5a); }

.wishlist-view__item-qty { font-size: 0.85rem; color: var(--theme-color-text-muted, #5a5a5a); }

.wishlist-view__item-cta { margin-top: 4px; align-self: flex-start; }

.wishlist-view__item-link {
    font-size: 0.85rem;
    color: var(--theme-color-text-muted, #5a5a5a);
    text-decoration: underline;
    align-self: flex-start;
}

/* --- articles ---------------------------------------------------------- */

.articles-index { display: grid; gap: var(--theme-grid-gap, 24px); }
.articles__intro { max-inline-size: 46rem; color: var(--theme-color-text-muted, #5a5a5a); }

.article { display: grid; gap: 18px; min-inline-size: 0; }
.article__head { display: grid; gap: 10px; }

.article__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-card, 8px);
}

.article__author-bio { color: var(--theme-color-text-muted, #5a5a5a); font-size: 0.9rem; }

.article__newsletter { margin-block: var(--theme-section-spacing, 32px); }

.article__pager-link--prev { justify-self: start; }

.product-grid--grid {
    display: grid;
}

/* --- events ------------------------------------------------------------ */

.event { display: grid; gap: 18px; min-inline-size: 0; }

.event__organizer {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-color-text-muted, #5a5a5a);
}

.event-line { display: grid; gap: 18px; }

.event-line__hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--theme-radius-card, 8px);
}

.event-line__hero img { inline-size: 100%; block-size: auto; display: block; }

.event-line__head { display: grid; gap: 8px; }

/* --- search ------------------------------------------------------------ */

/* Scoped to the results <section> - a bare `.search-results` selector
   also matched the page shell's own `contentClass: 'search-results'`
   body class (search.ts), turning <body> itself into this grid and
   collapsing the whole page into narrow repeating columns. */
section.search-results {
    display: block;
    margin-block: var(--theme-section-spacing, 24px);
}

.search-results--empty {
    display: block;
    padding: 40px 16px;
    text-align: center;
    color: var(--theme-color-text-muted, #6a6a6a);
}

/* --- data forms -------------------------------------------------------- */

.dataform__fields { display: grid; gap: 14px; }

.type-table { inline-size: 100%; overflow-x: auto; }

.uploadSpinner {
    display: inline-block;
    inline-size: 18px;
    block-size: 18px;
    border: 2px solid var(--theme-color-border, #ddd);
    border-block-start-color: var(--theme-color-primary, #e5006d);
    border-radius: 50%;
    animation: csf-spin 0.7s linear infinite;
}

@keyframes csf-spin { to { transform: rotate(360deg); } }

/* --- category tiles, menu leftovers ------------------------------------ */

.category-tile__media {
    display: block;
    aspect-ratio: var(--theme-card-ratio, 1);
    overflow: hidden;
    border-radius: var(--theme-radius-card, 8px);
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.03));
}

.category-tile__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.category-tile__name { display: block; margin-block-start: 8px; text-align: center; font-weight: 600; }

.category-tile__count { font-size: var(--step--2, 0.75rem); color: var(--theme-color-text-muted, #888); margin-inline-start: 0.25em; }

.csf-menu__label { display: inline-block; }

.csf-menu__promo--block { display: block; }

@media (prefers-reduced-motion: reduce) {
    .uploadSpinner { animation: none; }
}

.offer-badge--more {
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.55));
    color: var(--theme-color-primary-text, #fff);
    font-weight: 700;
}

/* --- page shell leftovers -------------------------------------------- */

.page { display: block; min-inline-size: 0; }

/* Layout comes from `csf-block-host` (`ecommerce/static/blocks.css`):
   a 12-column grid whose columns a block's width setting spans. A second
   `display: grid` with one column here would put every block on its own
   row, whatever width it was given. */
.page__body {
    min-inline-size: 0;
    --csf-block-gap: 1rem;
}

.page__body img { max-inline-size: 100%; block-size: auto; }
.page__body iframe, .page__body video, .page__body embed, .page__body object, .page__body table { max-inline-size: 100%; }

/* The logo link in the header — sized by its image, never stretched. */
.header__logo { display: inline-flex; align-items: center; }
.header__logo img { block-size: auto; max-block-size: var(--theme-logo-height, 56px); inline-size: auto; }

/* A floating contact button. Kept clear of the safe area so it is not
   under the home indicator on a phone. */
.whatsapp-float {
    position: fixed;
    inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
    inset-inline-end: 1rem;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 52px;
    block-size: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
    text-decoration: none;
}

/* --- block container title -------------------------------------------- */

.block__title {
    margin-block: 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
}

/* --- article extras ---------------------------------------------------- */

.article__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block: 1rem;
}

.reading-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.06));
    font-size: 0.75rem;
}

/* A card whose visible title is hidden: the link keeps the accessible
   name so the card is never an unnamed target. */
.product-card__title-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- page branding ----------------------------------------------------- */

.header__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.header__logo-link img {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-block-size: var(--theme-logo-height, 56px);
    max-inline-size: 100%;
}

/* The fallback when a shop has no logo: its name, set as the wordmark
   rather than left as body text. */
.header__logo-text {
    font-family: var(--theme-font-heading, inherit);
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* --- native form controls inside theme markup -------------------------- *
 * The variant picker's fallback is a plain `<select>` with no class of its
 * own (`product-models-select.liquid`), so a class-based audit cannot see
 * it — and nothing styled it. It rendered as a bare browser select: no
 * height, no border, label and control on different baselines. Same for
 * the quantity and search inputs a template emits without a class. */

.product__variants {
    display: grid;
    gap: 6px;
}

.product__variants > label {
    font-weight: 600;
    font-size: 0.9rem;
}

.product__variants select,
.product__details select,
.product__buybox select {
    inline-size: 100%;
    max-inline-size: 22rem;
    min-block-size: 44px;
    padding-inline: 10px;
    border: 1px solid var(--theme-color-border, #e0e0e0);
    border-radius: var(--theme-radius-input, 6px);
    background: var(--theme-color-background, #fff);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.product__variants select:focus-visible,
.product__details select:focus-visible {
    outline: 2px solid var(--theme-color-primary, #e5006d);
    outline-offset: 2px;
}

/* An out-of-stock option is disabled; say so visually too, since colour
   alone is not a signal. */
.product__variants select option:disabled {
    color: var(--theme-color-text-muted, #9a9a9a);
}

/* --- variant display styles ------------------------------------------- *
 * Which of these applies is the theme's `variantSwatches` setting, which
 * replaced the shop-wide `virtualShopConfig.modelDisplayType`: how a
 * variant is presented is a design decision, differs per theme, and now
 * supports per-brand/category/product overrides that one shop flag could
 * not express. */

.product__variant-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product__variant {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Out of stock is stated in a real muted colour, not with opacity:
   opacity composites after the colour resolves, so it silently drops the
   contrast below AA. The `list` style also says "Out of stock" in words,
   because colour alone is not a signal. */
.product__variant.is-out {
    color: var(--theme-color-text-muted, #767676);
    cursor: not-allowed;
}

.product__variant.is-out .product__variant-label,
.product__variant.is-out .product__variant-row {
    border-color: var(--theme-color-border, #e0e0e0);
    text-decoration: line-through;
}

.product__variant.is-out .product__swatch,
.product__variant.is-out .product__variant-media {
    filter: grayscale(1);
}

/* The radio is visually hidden, so the keyboard focus ring is drawn on the shape the shopper sees (the
   pill, the dot, the picture), never on the wrapper: a wrapper ring is a second square border around it. */
.product__variant:not(.product__variant--list):is(:focus-visible, :has(input:focus-visible)) {
    outline: 0;
}

.product__variant:not(.product__variant--list):is(:focus-visible, :has(input:focus-visible))
    :is(.product__variant-label, .product__swatch, .product__variant-media) {
    outline: 2px solid var(--theme-color-primary, #e5006d);
    outline-offset: 2px;
}

/* pills ---------------------------------------------------------------- */

.product__variant--pills .product__variant-label {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    padding-inline: 14px;
    border: 1px solid var(--theme-color-border, #d8d8d8);
    border-radius: 999px;
}

.product__variant--pills:has(input:checked) .product__variant-label {
    border-color: var(--theme-color-primary, #e5006d);
    background: var(--theme-color-primary, #e5006d);
    color: var(--theme-color-primary-on, #fff);
}

/* dots ----------------------------------------------------------------- */

.product__swatch {
    display: block;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    border: 1px solid var(--theme-color-border, #d8d8d8);
    overflow: hidden;
}

.product__swatch img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.product__variant--dots:has(input:checked) .product__swatch {
    box-shadow: 0 0 0 2px var(--theme-color-background, #fff),
                0 0 0 4px var(--theme-color-primary, #e5006d);
}

/* images --------------------------------------------------------------- */

.product__variant--images {
    display: grid;
    gap: 4px;
    inline-size: 76px;
    text-align: center;
}

.product__variant-media {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--theme-color-border, #d8d8d8);
    border-radius: var(--theme-radius-card, 6px);
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.03));
}

.product__variant-media img { inline-size: 100%; block-size: 100%; object-fit: contain; }

.product__variant--images .product__variant-label { font-size: 0.8rem; line-height: 1.2; }

.product__variant--images:has(input:checked) .product__variant-media {
    border-color: var(--theme-color-primary, #e5006d);
    box-shadow: inset 0 0 0 1px var(--theme-color-primary, #e5006d);
}

/* list ----------------------------------------------------------------- */

.product__variant--list { inline-size: 100%; }

.product__variant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-block-size: 46px;
    padding-inline: 12px;
    border: 1px solid var(--theme-color-border, #d8d8d8);
    border-radius: var(--theme-radius-card, 6px);
}

.product__variant--list:has(input:checked) .product__variant-row {
    border-color: var(--theme-color-primary, #e5006d);
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.03));
}

/* Out of stock says so in words, not only by dimming — colour alone is
   not a signal. */
.product__variant-note {
    font-size: 0.8rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

/* A single-variant product states its option instead of offering a
   picker with one entry. */
.product__variant-single {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.product__variant-single-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.product__variant-single-value { font-weight: 600; }

/* --- drawer-everywhere navigation --------------------------------------- *
 * The "mobile themed" option: the hamburger and side drawer stay at every
 * width instead of giving way to a menu bar at 1024px. Chosen per shop
 * through the theme's `navigationStyle` setting.
 *
 * These rules deliberately sit after the responsive pair they override
 * and carry no `!important`: the platform accessibility toolbar restyles
 * colour, font and animation, and `!important` here would fight it. */

.header--drawer .header__burger { display: inline-grid; }
.header--drawer .header__nav { display: none; }

@media (min-width: 1024px) {
    .header--drawer .header__burger { display: inline-grid; }
    .header--drawer .header__nav { display: none; }

    /* With no menu bar competing for the middle, the logo takes it and the row stays balanced. */
    .header--drawer .header__inner { grid-template-columns: auto 1fr auto; }
}

/* --- equal-height product cards ---------------------------------------- *
 * A two-line title pushed the price and the button down, so nothing lined
 * up across a row and the buttons sat at four different heights.
 *
 * The grid already stretches its items; the card just has to fill that
 * height and push its call to action to the bottom. `margin-block-start:
 * auto` on the button is what does it — a fixed card height would clip a
 * long title instead. */

.product-card,
.csf-product-grid > li,
.csf-product-grid > div,
.csf-grid-wrapper > li,
.csf-grid-wrapper > div,
.csf-carousel__track > .product-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-inline-size: 0;
}

/* The title keeps a consistent footprint so prices align even before the
   button is reached. Two lines is the common case; a longer name is
   clamped rather than allowed to shift the row. */
.product-card__title,
.csf-product-grid .product-name,
.csf-grid-wrapper .product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-block-size: 2.6em;
}

/* Everything from the price down sits in a block that starts where the
   longest title in the row ends. */
.product-card__price,
.csf-product-grid .csf-price,
.csf-grid-wrapper .csf-price {
    margin-block-start: auto;
}

.gallery-add-to-cart,
.gallery-product-add-to-cart,
.product-card .button,
.product-card__cta {
    margin-block-start: 8px;
    inline-size: 100%;
}

/* --- pagination --------------------------------------------------------- */

.paging ol,
.paging ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.paging a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: 10px;
    border: 1px solid var(--theme-color-border, #e0e0e0);
    border-radius: var(--theme-radius-button, 6px);
    color: inherit;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.paging a:hover { border-color: var(--theme-color-primary, #e5006d); }

.paging a.is-current {
    border-color: var(--theme-color-primary, #e5006d);
    background: var(--theme-color-primary, #e5006d);
    color: var(--theme-color-primary-on, #fff);
    font-weight: 700;
}

.paging a:focus-visible {
    outline: 2px solid var(--theme-color-primary, #e5006d);
    outline-offset: 2px;
}

/* --- recently viewed ------------------------------------------------- */

/* The block builds its own markup client-side from local storage, so no
   theme template shapes it — it rendered as a tall stack of untouched
   images. Layout, thumbnail size and alignment are block settings; the
   classes below are what they resolve to. */
.viewed-products-block {
    display: flex;
    flex-wrap: wrap;
    gap: var(--theme-grid-gap, 1rem);
    margin-block: 0.5rem;
    --viewed-thumb: 110px;
}

.viewed-products-block.align-center { justify-content: center; }
.viewed-products-block.align-end { justify-content: flex-end; }

.viewed-products-block--small { --viewed-thumb: 72px; }
.viewed-products-block--medium { --viewed-thumb: 110px; }
.viewed-products-block--large { --viewed-thumb: 150px; }

.viewed-product-item {
    inline-size: var(--viewed-thumb);
}

.viewed-product-item a {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
}

.viewed-product-item img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--theme-radius-card, 6px);
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.03));
}

.viewed-product-item .product-title {
    font-size: 0.85rem;
    line-height: 1.3;
    /* Two lines, then ellipsis: a long product name must not make one
       card twice the height of its neighbours. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.viewed-product-item a:hover .product-title {
    color: var(--theme-color-primary, #e5006d);
    text-decoration: underline;
}

/* Thumbnails only: a tight strip, no captions. */
.viewed-products-block--thumbs {
    gap: 0.5rem;
}

/* A list reads down the page, name beside the picture. */
.viewed-products-block--list {
    flex-direction: column;
    flex-wrap: nowrap;
}

.viewed-products-block--list .viewed-product-item {
    inline-size: 100%;
}

.viewed-products-block--list .viewed-product-item a {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.viewed-products-block--list .viewed-product-item img {
    inline-size: var(--viewed-thumb);
    flex: 0 0 auto;
}

/* Payment methods: the selected method's description is revealed here, in CSS, off the radio's `:checked` state (no script). A height animation per click would stack up and leave the box smaller than its own text. */
.checkout-payment__option {
    margin-block-end: 0.5rem;
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-card, 6px);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkout-payment__option:has(.checkout_payment_method:checked) {
    border-color: var(--theme-color-primary, #e5006d);
}

/* The real radio keeps the label, the keyboard and the accessibility
   tree; it is only moved out of sight so it can sit as a sibling of the
   description box, which is what lets `:checked ~` reveal it. The
   visible control is `__marker`, drawn inside the label. */
.checkout_payment_method {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    min-block-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.checkout-payment__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-block-size: 2.75rem;
    padding-inline: 0.75rem;
    cursor: pointer;
}

.checkout-payment__marker {
    flex: 0 0 auto;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border: 2px solid var(--theme-color-border, #bdbdbd);
    border-radius: 50%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout_payment_method:checked + .checkout-payment__row .checkout-payment__marker {
    border-color: var(--theme-color-primary, #e5006d);
    box-shadow: inset 0 0 0 0.19rem var(--theme-color-background, #fff),
                inset 0 0 0 1rem var(--theme-color-primary, #e5006d);
}

.checkout_payment_method:focus-visible + .checkout-payment__row .checkout-payment__marker {
    outline: 2px solid var(--theme-color-primary, #e5006d);
    outline-offset: 2px;
}

.checkout-payment__name {
    min-inline-size: 0;
}

/* Shown or not, nothing in between — `display` in the transition list
   with `allow-discrete` is what lets a box that is `display: none` at
   rest still fade in, and `@starting-style` gives it the state to start
   from. Animating a height instead needs a height to animate to, and
   every way of getting one resolves against content the box does not
   have until it is already visible. */
.checkout_payment_box {
    display: none;
    opacity: 0;
    translate: 0 -4px;
    transition: opacity 0.2s ease, translate 0.2s ease, display 0.2s allow-discrete;
}

.checkout_payment_method:checked ~ .checkout_payment_box {
    display: block;
    opacity: 1;
    translate: 0 0;
}

@starting-style {
    .checkout_payment_method:checked ~ .checkout_payment_box {
        opacity: 0;
        translate: 0 -4px;
    }
}

.checkout_payment_box__inner {
    padding: 0 0.75rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--theme-color-text-muted, #6a6a6a);
}

@media (prefers-reduced-motion: reduce) {
    .checkout-payment__option,
    .checkout-payment__marker,
    .checkout_payment_box { transition: none; }
}

/* The coupon row, on the cart page and in the checkout's payment step
   alike. Only `.cart__coupon input` was ever styled, so the checkout's
   own field fell back to the browser's default 2px box next to a themed
   button. One rule now covers both, and the label sits on its own line
   above the field so the row still works when the column is narrow. */
.cart__coupon,
.checkout__coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cart__coupon > label,
.checkout__coupon > label {
    flex: 1 0 100%;
    font-size: 0.875rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.cart__coupon input,
.checkout__coupon input {
    flex: 1 1 8rem;
    min-inline-size: 0;
    min-block-size: 44px;
    padding-inline: 10px;
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-input, 6px);
    background: var(--theme-color-background, #fff);
    color: inherit;
    font: inherit;
}

.cart__coupon input:focus-visible,
.checkout__coupon input:focus-visible {
    outline: 2px solid var(--theme-color-primary, #e5006d);
    outline-offset: 1px;
}

.cart__coupon button,
.checkout__coupon button {
    flex: 0 0 auto;
    min-block-size: 44px;
    padding-inline: 18px;
}

/* Message stripe — the server's own words about the last action. Only
   `--error` was styled, so a `notice` or a `success` came out looking
   like neither. Each tone now reads as itself, and none of them relies
   on colour alone: the icon and the wording carry the meaning too. */
.message {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.75rem 1rem;
    border-inline-start: 3px solid var(--theme-color-primary, #e5006d);
    border-radius: var(--theme-radius-input, 6px);
    background: color-mix(in srgb, var(--theme-color-primary, #e5006d) 8%, transparent);
}

.message::before {
    flex: 0 0 auto;
    font-weight: 700;
    content: "i";
}

.message--error {
    border-inline-start-color: var(--theme-color-danger, #c0392b);
    background: color-mix(in srgb, var(--theme-color-danger, #c0392b) 8%, transparent);
    color: var(--theme-color-danger, #c0392b);
}

.message--error::before { content: "!"; }

.message--success {
    border-inline-start-color: var(--theme-color-success, #2f9e5f);
    background: color-mix(in srgb, var(--theme-color-success, #2f9e5f) 8%, transparent);
}

.message--success::before { content: "\2713"; }

.message--notice {
    border-inline-start-color: var(--theme-color-text-muted, #6a6a6a);
    background: color-mix(in srgb, var(--theme-color-text-muted, #6a6a6a) 8%, transparent);
}

/* A stripe at the top of the page is where a shopper looks for this, so
   it stays in view while they scroll the form that produced it. */
.messages {
    display: grid;
    gap: 8px;
    margin-block: 16px;
}

.messages:empty { display: none; }

/* The shop's agreement line, sitting between the payment options and the
   button that acts on it. Small, quiet, and readable — it is a legal
   sentence a shopper should be able to read, not fine print to hide. */
.checkout__terms {
    margin-block: 0.75rem 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.checkout__terms a {
    color: inherit;
    text-decoration: underline;
}

.checkout__terms a:hover {
    color: var(--theme-color-primary, #e5006d);
}

/* Header layouts — `headerLayout`. `inline` is the row the theme already
   had; the other two move the menu to a full-width bar of its own, which
   is what a real catalogue needs: a dozen top-level categories on the
   logo's row wrap straight over it. */
.header__navbar {
    border-block-start: 1px solid var(--theme-color-border, #e5e5e5);
}

/* The bar scrolls rather than wraps. A menu that wraps to four rows
   pushes the page down and hides the top of it; one that scrolls stays
   one row at any catalogue size, and the mega panels still drop out of
   it normally. */
.header__navbar .header__nav {
    display: flex;
    justify-content: center;
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.header__navbar .header__nav::-webkit-scrollbar { display: none; }

/* The list itself is what wraps — the nav's own `overflow-x` can only
   scroll something that overflows it, and a wrapping list never does. */
.header__navbar .header__nav > * {
    min-inline-size: 0;
}

.header__navbar .header__nav ul {
    flex-wrap: nowrap;
}

.header__navbar .header__nav ul > li {
    flex: 0 0 auto;
}

.header--centered .header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.header--centered .header__logo {
    grid-column: 2;
    justify-self: center;
}

.header--centered .header__actions {
    grid-column: 3;
    justify-self: end;
}

.header--centered .header__burger {
    grid-column: 1;
    justify-self: start;
}

/* Below the menu-bar breakpoint the drawer takes over, so the bar itself
   has nothing left to show. */
@media (max-width: 1023px) {
    .header__navbar { display: none; }
}

/* Gift wrapping. Closed it is one quiet line; open it is the picker. A
   shopper not sending a gift should never have to read past the summary,
   and a shopper who is should find it without hunting — the cart giving
   no sign that gifting exists is itself a reason people abandon. */
.gift-wrap {
    margin-block: 0.75rem;
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-card, 8px);
}

.gift-wrap__summary {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    min-block-size: 3rem;
    padding-inline: 0.85rem;
    cursor: pointer;
    list-style: none;
}

.gift-wrap__summary::-webkit-details-marker { display: none; }

.gift-wrap__summary:focus-visible {
    outline: 2px solid var(--theme-color-primary, #e5006d);
    outline-offset: -2px;
}

.gift-wrap__icon {
    display: flex;
    flex: 0 0 auto;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    color: var(--theme-color-primary, #e5006d);
}

.gift-wrap__icon svg { inline-size: 100%; block-size: 100%; }

.gift-wrap__prompt { font-weight: 600; }

/* The chevron turns rather than the row moving, so opening it does not
   shift the total underneath. */
.gift-wrap__summary::after {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline-start: auto;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: 45deg;
    transition: rotate 0.2s ease;
}

.gift-wrap[open] .gift-wrap__summary::after { rotate: -135deg; }

.gift-wrap__body {
    display: grid;
    gap: 0.9rem;
    padding: 0 0.85rem 0.85rem;
}

.gift-wrap__options {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gift-wrap__options--cards {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.gift-wrap__options--compact.gift-wrap__options--cards {
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
}

.gift-wrap__options--compact {
    gap: 0.4rem;
}

.gift-wrap__options--compact .gift-wrap__label {
    gap: 0.4rem;
    padding: 0.4rem;
}

/* The real radio stays for the keyboard and the accessibility tree; the
   card itself is the visible control. */
.gift-wrap__radio {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* The row is the grid/flex item; the label inside it is what the shopper
   clicks. Both need a box, or a card has no height of its own. */
.gift-wrap__option {
    display: flex;
    min-inline-size: 0;
}

.gift-wrap__label {
    display: flex;
    gap: 0.6rem;
    block-size: 100%;
    padding: 0.6rem;
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-card, 8px);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.gift-wrap__options--cards .gift-wrap__label {
    flex-direction: column;
    text-align: center;
}

.gift-wrap__radio:checked + .gift-wrap__label {
    border-color: var(--theme-gift-wrap-accent-color, var(--theme-color-primary, #e5006d));
    box-shadow: inset 0 0 0 1px var(--theme-gift-wrap-accent-color, var(--theme-color-primary, #e5006d));
}

.gift-wrap__radio:focus-visible + .gift-wrap__label {
    outline: 2px solid var(--theme-gift-wrap-accent-color, var(--theme-color-primary, #e5006d));
    outline-offset: 2px;
}

.gift-wrap__media img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--theme-radius-input, 6px);
}

.gift-wrap__options--list .gift-wrap__media {
    flex: 0 0 3rem;
}

/* Photo tiles: the picture is the card. Text sits over its lower edge on
   a gradient, so a shop with good box photos sells them by sight. */
.gift-wrap__options--tiles {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.gift-wrap__options--tiles .gift-wrap__label {
    position: relative;
    padding: 0;
    overflow: hidden;
    border-radius: var(--theme-radius-card, 8px);
}

.gift-wrap__options--tiles .gift-wrap__media { display: block; inline-size: 100%; }
.gift-wrap__options--tiles .gift-wrap__media img { border-radius: 0; }

.gift-wrap__options--tiles .gift-wrap__text {
    position: absolute;
    inset: auto 0 0;
    padding: 1.6rem 0.55rem 0.5rem;
    gap: 0;
    color: #fff;
    background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0));
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

.gift-wrap__options--tiles .gift-wrap__capacity,
.gift-wrap__options--tiles .gift-wrap__boxes { display: none; }
.gift-wrap__options--tiles .gift-wrap__name { font-size: 0.875rem; }
.gift-wrap__options--tiles .gift-wrap__price { font-size: 0.8125rem; }

/* Carousel: one row that scrolls sideways and snaps, for a shop with more
   boxes than a grid can show without pushing the message field away. */
.gift-wrap__options--carousel {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: 0.4rem;
    scrollbar-width: thin;
}

.gift-wrap__options--carousel .gift-wrap__option {
    flex: 0 0 9.5rem;
    scroll-snap-align: start;
}

.gift-wrap__options--carousel .gift-wrap__label {
    flex-direction: column;
    text-align: center;
    inline-size: 100%;
}

/* Spotlight: the chosen box takes the stage, the rest wait as thumbnails.
   Pure CSS — `:has(:checked)` grows the option, so the picker script's
   own radios and selectors are untouched. */
.gift-wrap__options--spotlight {
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    grid-auto-flow: dense;
}

.gift-wrap__options--spotlight .gift-wrap__label {
    flex-direction: column;
    text-align: center;
    padding: 0.4rem;
}

.gift-wrap__options--spotlight .gift-wrap__text { font-size: 0.75rem; }
.gift-wrap__options--spotlight .gift-wrap__capacity,
.gift-wrap__options--spotlight .gift-wrap__boxes { display: none; }

.gift-wrap__options--spotlight .gift-wrap__option:has(.gift-wrap__radio:checked) {
    grid-column: 1 / -1;
    order: -1;
}

.gift-wrap__options--spotlight .gift-wrap__option:has(.gift-wrap__radio:checked) .gift-wrap__label {
    flex-direction: row;
    align-items: center;
    text-align: start;
    gap: 1rem;
    padding: 0.75rem;
}

.gift-wrap__options--spotlight .gift-wrap__option:has(.gift-wrap__radio:checked) .gift-wrap__media {
    flex: 0 0 9rem;
}

.gift-wrap__options--spotlight .gift-wrap__option:has(.gift-wrap__radio:checked) .gift-wrap__text { font-size: 1rem; gap: 0.25rem; }
.gift-wrap__options--spotlight .gift-wrap__option:has(.gift-wrap__radio:checked) .gift-wrap__capacity,
.gift-wrap__options--spotlight .gift-wrap__option:has(.gift-wrap__radio:checked) .gift-wrap__boxes { display: block; }

/* Text chips: no pictures, just name and price as pills — for a shop
   whose wraps are "paper" and "ribbon", where a photo adds nothing. */
.gift-wrap__options--chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gift-wrap__options--chips .gift-wrap__media { display: none; }

.gift-wrap__options--chips .gift-wrap__label {
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    block-size: auto;
}

.gift-wrap__options--chips .gift-wrap__text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
}

.gift-wrap__options--chips .gift-wrap__capacity,
.gift-wrap__options--chips .gift-wrap__boxes { display: none; }

.gift-wrap__options--chips .gift-wrap__radio:checked + .gift-wrap__label {
    background: var(--theme-gift-wrap-accent-color, var(--theme-color-primary, #e5006d));
    color: var(--theme-gift-wrap-accent-color-on, #fff);
}

.gift-wrap__options--chips .gift-wrap__radio:checked + .gift-wrap__label .gift-wrap__boxes { color: inherit; }

.gift-wrap__text {
    display: grid;
    gap: 0.15rem;
    align-content: start;
    min-inline-size: 0;
}

.gift-wrap__name { font-weight: 600; }

.gift-wrap__capacity,
.gift-wrap__boxes {
    font-size: 0.8125rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.gift-wrap__price { font-variant-numeric: tabular-nums; }

.gift-wrap__message {
    display: grid;
    gap: 0.3rem;
}

.gift-wrap__message textarea {
    inline-size: 100%;
    padding: 0.5rem;
    font: inherit;
    color: inherit;
    background: var(--theme-color-background, #fff);
    border: 1px solid var(--theme-color-border, #e5e5e5);
    border-radius: var(--theme-radius-input, 6px);
    resize: vertical;
}

.gift-wrap__message textarea:focus-visible {
    outline: 2px solid var(--theme-color-primary, #e5006d);
    outline-offset: 1px;
}

.gift-wrap__count {
    justify-self: end;
    font-size: 0.75rem;
    color: var(--theme-color-text-muted, #6a6a6a);
    font-variant-numeric: tabular-nums;
}

.gift-wrap__count.is-full { color: var(--theme-color-danger, #c0392b); }

.gift-wrap__add { justify-self: start; }

/* Already-wrapped confirmation — a static row, not another `<details>`
   to open, once a wrap product is already a real line in the cart. */
.gift-wrap--done {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--theme-color-border, #e5e5e5);
    color: var(--theme-color-success, #2e7d32);
}

.gift-wrap--done .gift-wrap__icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    flex: none;
}

/* `scope: perItem` checklist — which cart line this wrap is for. */
.gift-wrap__items {
    display: grid;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    border: 0;
}

.gift-wrap__items legend {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0;
    margin-block-end: 0.2rem;
}

.gift-wrap__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.gift-wrap__item-qty { color: var(--theme-color-text-muted, #6a6a6a); }
.gift-wrap__item-check { inline-size: 1rem; block-size: 1rem; accent-color: var(--theme-color-primary, #e5006d); }
.gift-wrap__item-name { display: inline-flex; align-items: baseline; gap: 0.3rem; }

@media (prefers-reduced-motion: reduce) {
    .gift-wrap__summary::after,
    .gift-wrap__label { transition: none; }
}

/* --- header cart control ---------------------------------------------

   The count rides on the icon instead of sitting beside it, so the glyph and the number read as one control
   and the header row stays no taller than its other items.

   `pointer-events: none` because the button is the target: a click that lands on the badge must still open
   the cart. */
.icon-button {
    position: relative;
}

.cart-count {
    position: absolute;
    inset-block-start: 0.3rem;
    inset-inline-end: 0.25rem;
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.05rem;
    block-size: 1.05rem;
    padding-inline: 0.2rem;
    border-radius: 999px;
    background: var(--theme-color-primary, #e5006d);
    color: var(--theme-color-primary-on, #fff);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* An empty cart has nothing to announce; a permanent "0" is noise, and
   `cart.js` keeps this attribute in step with the number. */
.cart-count[data-cart-count="0"] {
    display: none;
}

/* The header total was styled as the drawer's own total row — `flex` with
   `space-between` at 1.15rem/700 — which in a header stretches to fill
   and pushes the row past the viewport. On a narrow screen that is what
   broke the page. Here it is a compact, non-growing label that can only
   ever be as wide as its own text. */
.cart-sum {
    display: inline-block;
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 7rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Nothing in a flex row may refuse to shrink, or one long price is enough
   to push the whole header wider than the screen. */
.header__actions {
    min-inline-size: 0;
}

.header__actions > * {
    min-inline-size: 0;
}

/* The logo is the one thing in the header that can give up width: the
   icons beside it are 44px tap targets and must not shrink. It was
   `flex: 0 0 auto` around an image at its natural 180px, so on a 320px
   screen the logo and the icons together demanded more than the viewport
   and the whole page scrolled sideways — the total was only the most
   visible part of it. */
.header__logo {
    flex: 0 1 auto;
    min-inline-size: 0;
}

.header__logo img {
    max-inline-size: 100%;
    block-size: auto;
}

/* Below this the badge already says the cart has something in it, and the
   total is the first thing with enough width to overflow a phone header. */
@media (max-width: 640px) {
    .cart-sum {
        display: none;
    }
}

/* A product's own read-only custom-field spec row
   (`productCustomSectionTemplate.ts`'s `getReadOnlyField()`,
   `dataforms/dataform-readonly-*.liquid`) - real styling this session found
   missing entirely (a hardcoded literal class inside a hand-built TS
   string, invisible to any real theme-completeness check until the field
   moved to a real Liquid partial). */
.section-field {
    display: block;
    margin-block-end: 0.375rem;
    font-size: 0.9375rem;
}

.section-field label,
.section-field .data {
    font-weight: var(--theme-font-heading-weight-bold, 600);
}

/* --- gift card balance -------------------------------------------------- */

.gift-card-balance {
    display: grid;
    gap: 16px;
    max-inline-size: 26rem;
}

.gift-card-balance__heading { margin: 0; }

.gift-card-balance__form {
    display: grid;
    gap: 10px;
}

.gift-card-balance__field {
    display: grid;
    gap: 4px;
}

.fmt-gift-card {
    padding: 10px 12px;
    border: 1px solid var(--theme-color-border, #eee);
    border-radius: 6px;
    font-size: 1rem;
}

.gift-card-balance__result {
    padding: 10px 12px;
    border-radius: 6px;
}

.gift-card-balance__result--success {
    background: var(--stock);
    color: var(--stock-fg);
}

.gift-card-balance__result--error {
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.08));
    color: var(--theme-color-text-muted, #5a5a5a);
}

/* --- product reviews ---------------------------------------------------- */

.product-reviews { display: grid; gap: 20px; }
.product-reviews__loading,
.product-reviews__empty { color: var(--theme-color-text-muted, #5a5a5a); }

.product-reviews__list { display: grid; gap: 16px; }

.product-reviews__item {
    display: grid;
    gap: 6px;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--theme-color-border, #e2e2e2);
}
.product-reviews__item:last-child { border-block-end: none; padding-block-end: 0; }

.product-reviews__item-stars,
.product-reviews__stars { display: inline-flex; gap: 2px; color: var(--theme-color-border, #d0d0d0); }
.product-reviews__star-display { display: inline-block; }
.product-reviews__star-display--on { color: var(--theme-color-primary, #e0a527); }

.product-reviews__item-title { font-weight: 600; margin: 0; }
.product-reviews__item-text { margin: 0; white-space: pre-wrap; }

.product-reviews__item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.85rem;
    color: var(--theme-color-text-muted, #5a5a5a);
    margin: 0;
}

.product-reviews__item-name { font-weight: 600; color: var(--theme-color-text, inherit); }
.product-reviews__item-date { color: var(--theme-color-text-muted, #5a5a5a); }

.product-reviews__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--theme-color-success, #e6f4ea);
    color: var(--theme-color-on-primary, #1e7e34);
}

.product-reviews__write-toggle { margin-block-start: 4px; }

.product-reviews__form { display: grid; gap: 14px; margin-block-start: 12px; }
.product-reviews__field { display: grid; gap: 4px; }
.product-reviews__field--rating { gap: 6px; }
.product-reviews__field--checkbox { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
.product-reviews__label { font-size: 0.85rem; font-weight: 600; }

.product-reviews__stars { font-size: 1.5rem; }
.product-reviews__star {
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
    color: inherit;
}
.product-reviews__star--on { color: var(--theme-color-primary, #e0a527); }

.product-reviews__notice { font-size: 0.9rem; margin: 0; }
.product-reviews__notice--success { color: var(--theme-color-success, #1e7e34); }
.product-reviews__notice--error { color: var(--theme-color-danger, #c0392b); }

.product-reviews__login-prompt { color: var(--theme-color-text-muted, #5a5a5a); }

/* Used by the affiliate portal's copy-link button (set client-side as `.className = 'button button--small'`, so it is invisible to `themeCompleteness.test.ts`'s static-markup parser until the same class also appears in liquid markup). */
.button--small {
    min-block-size: 2rem;
    padding-inline: 0.75rem;
    font-size: 0.85em;
}

/* Base input styling for the data-form fields (the Neon theme's `.dataform-field` has it; the other 5 themes add it here). */
.dataform-field :is(input, select, textarea) {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-input);
    background: var(--bg);
    color: inherit;
    font: inherit;
}
.dataform-field :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--primary, currentColor);
    outline-offset: 1px;
}
.dataform-field:has(> input[type='checkbox']),
.dataform-field:has(> input[type='radio']) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dataform-field :is(input[type='checkbox'], input[type='radio']) {
    inline-size: auto;
    min-block-size: auto;
}
.dataform-field textarea {
    min-block-size: 7rem;
    resize: vertical;
}

/* Form style variants (`settings.formStyle` on the data-form block: `plain`/`card`/`filled`). */
.dataform--card {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}
.dataform--filled .dataform-field :is(input, select, textarea) {
    border-color: transparent;
    background: color-mix(in srgb, var(--line) 25%, transparent);
}
.dataform--filled .dataform-field :is(input, select, textarea):focus-visible {
    border-color: var(--primary);
    background: var(--bg);
}

/* Gallery filter panel + sort dropdown: byte-identical across all 6 themes,
   styled via this theme's shared
   `--theme-color-*`/`--theme-radius-*`/`--theme-*-spacing` tokens. Every
   control is a plain link or form (full-page navigation, no AJAX).
   
   `.category__body--{sidebar|floating|bar}` is the `filterPanelStyle` theme
   setting ("Product filters" group): three distinct layouts.
   
   - sidebar (default): beside the grid on desktop, off-canvas drawer (pure CSS
   checkbox) on mobile only.
   
   - floating: the same drawer on every screen size, opened from a fixed
   floating button.
   
   - bar: no drawer; every facet renders inline above the grid as a row of pill
   toggles. */

.gallery-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-block-end: 1rem;
}
.gallery-toolbar__filter { display: none; }

.filter-panel-toggle-input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; pointer-events: none; }

.filter-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 1rem;
}
.filter-panel__title {
    font-weight: var(--theme-font-heading-weight-bold, 700);
}
.filter-panel__close {
    display: none;
    border: 0;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.filter-panel__section {
    margin-block-end: 1.5rem;
    padding-block-end: 1.5rem;
    border-block-end: 1px solid var(--theme-color-border, #e5e5e5);
}
.filter-panel__section:last-child { border-block-end: 0; margin-block-end: 0; padding-block-end: 0; }

.filter-panel-backdrop { display: none; }

.filter-panel__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-block-end: 1rem;
}

/* --- Style: sidebar (default) --- */
.category__body--sidebar {
    display: flex;
    align-items: flex-start;
    gap: var(--theme-grid-gap, 24px);
}
.category__body--sidebar .product-grid { flex: 1 1 auto; min-inline-size: 0; }
.category__body--sidebar .filter-panel { flex: 0 0 240px; min-inline-size: 0; }
.category__body--sidebar .filter-panel-toggle-button { display: none; }

@media (max-width: 900px) {
    .category__body--sidebar { display: block; }
    .category__body--sidebar .filter-panel-toggle-button {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.6em 1.1em;
        border: 1px solid var(--theme-color-border, #d8d8d8);
        border-radius: var(--theme-radius-button, 4px);
        background: var(--theme-color-background, #fff);
        color: var(--theme-color-text, #111);
        cursor: pointer;
        font: inherit;
        margin-block-end: 1rem;
    }
    .category__body--sidebar .filter-panel {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: min(85vw, 340px);
        max-inline-size: 100vw;
        background: var(--theme-color-background, #fff);
        z-index: 1000;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        padding: 1.25rem;
        box-shadow: 2px 0 12px rgb(0 0 0 / 0.15);
    }
    [dir="rtl"] .category__body--sidebar .filter-panel {
        transform: translateX(105%);
        box-shadow: -2px 0 12px rgb(0 0 0 / 0.15);
    }
    .category__body--sidebar .filter-panel-toggle-input:checked ~ .filter-panel { transform: translateX(0); }
    .category__body--sidebar .filter-panel-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgb(0 0 0 / 0.4);
        z-index: 999;
    }
    .category__body--sidebar .filter-panel-toggle-input:checked ~ .filter-panel-backdrop { display: block; }
    .category__body--sidebar .filter-panel__close { display: inline-flex; }
}

@media (max-width: 900px) {
    .gallery-toolbar { justify-content: space-between; align-items: center; gap: 0.75rem; }
    .category__body--sidebar .filter-panel-toggle-button { display: none; }
    .gallery-toolbar--sidebar .gallery-toolbar__filter {
        display: inline-flex;
        align-items: center;
        padding: 0.6em 1.1em;
        border: 1px solid var(--theme-color-border, #d8d8d8);
        border-radius: var(--theme-radius-button, 4px);
        background: var(--theme-color-background, #fff);
        color: var(--theme-color-text, #111);
        cursor: pointer;
        font: inherit;
    }
}

/* --- Style: floating button --- */
.category__body--floating .product-grid { inline-size: 100%; }
.category__body--floating .filter-panel-toggle-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 998;
    padding: 0.8em 1.3em;
    border: 1px solid var(--theme-color-primary, #2a6df4);
    border-radius: 999px;
    background: var(--theme-color-primary, #2a6df4);
    color: var(--theme-color-primary-on, #fff);
    cursor: pointer;
    font: inherit;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
}
[dir="rtl"] .category__body--floating .filter-panel-toggle-button { inset-inline-end: auto; inset-inline-start: 1.5rem; }
.category__body--floating .filter-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(85vw, 360px);
    max-inline-size: 100vw;
    background: var(--theme-color-background, #fff);
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    padding: 1.25rem;
    box-shadow: 2px 0 12px rgb(0 0 0 / 0.15);
}
[dir="rtl"] .category__body--floating .filter-panel {
    transform: translateX(105%);
    box-shadow: -2px 0 12px rgb(0 0 0 / 0.15);
}
.category__body--floating .filter-panel-toggle-input:checked ~ .filter-panel { transform: translateX(0); }
.category__body--floating .filter-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.4);
    z-index: 999;
}
.category__body--floating .filter-panel-toggle-input:checked ~ .filter-panel-backdrop { display: block; }
.category__body--floating .filter-panel__close { display: inline-flex; }

/* --- Style: horizontal bar — no drawer, everything inline above the grid --- */
.category__body--bar { display: block; }
.category__body--bar .filter-panel-toggle-button,
.category__body--bar .filter-panel-backdrop,
.category__body--bar .filter-panel__close,
.category__body--bar .filter-panel__header {
    display: none;
}
.category__body--bar .filter-panel {
    display: block;
    margin-block-end: 1.5rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--theme-color-border, #e5e5e5);
}
.category__body--bar .filter-panel__section {
    display: inline-block;
    vertical-align: top;
    margin-block-end: 0.75rem;
    margin-inline-end: 2rem;
    padding-block-end: 0;
    border-block-end: 0;
}
.category__body--bar .filter-tree__list .filter-tree__list { display: none; }
.category__body--bar .filter-group__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.category__body--bar .filter-group__option {
    padding: 0.35em 0.8em;
    border: 1px solid var(--theme-color-border, #d8d8d8);
    border-radius: 999px;
}
.category__body--bar .filter-group__item.is-active .filter-group__option {
    background: var(--theme-color-primary, #2a6df4);
    border-color: var(--theme-color-primary, #2a6df4);
    color: var(--theme-color-primary-on, #fff);
}

/* Category drilldown tree — `galleryFilterTemplate.ts`'s own recursive
   render, up to 2 levels (`categoryTree.ts`'s `buildCategoryDescendantTree`
   default `maxDepth`). */
.filter-tree__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.filter-tree__list .filter-tree__list {
    padding-inline-start: 1rem;
    margin-block-start: 0.25rem;
}
.filter-tree__item { margin-block-end: 0.35rem; }
.filter-tree__link {
    color: var(--theme-color-text, #111);
    text-decoration: none;
}
.filter-tree__link:hover { color: var(--theme-color-primary, #2a6df4); text-decoration: underline; }
.filter-tree__count { color: var(--theme-color-text-muted, #6a6a6a); font-size: 0.85em; }

/* Brand/attribute/availability facet groups — `galleryFilterTemplate.ts`'s
   own shared `renderCheckboxList`. */
.filter-group__title {
    font-size: var(--step-0, 1rem);
    font-weight: var(--theme-font-heading-weight-bold, 700);
    margin: 0 0 0.6rem;
}
.filter-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.filter-group__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-color-text, #111);
    text-decoration: none;
    font-size: 0.92rem;
}
.filter-group__item.is-active .filter-group__option {
    font-weight: var(--theme-font-heading-weight-bold, 700);
    color: var(--theme-color-primary, #2a6df4);
}
.filter-group__label { flex: 1 1 auto; }
.filter-group__count { color: var(--theme-color-text-muted, #6a6a6a); font-size: 0.85em; }
.filter-swatch {
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    border: 1px solid var(--theme-color-border, #d8d8d8);
    flex: 0 0 auto;
}

/* Price-range facet — a real min/max number form (the plan's own
   documented alternative to a bucket-slider style). */
.filter-price-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.filter-price-form__field input {
    inline-size: 5.5rem;
    padding: 0.4em 0.5em;
    border: 1px solid var(--theme-color-border, #d8d8d8);
    border-radius: var(--theme-radius-input, 4px);
    font: inherit;
}
.filter-price-form__sep { color: var(--theme-color-text-muted, #6a6a6a); }
.filter-price-form__apply {
    padding: 0.4em 0.9em;
    border: 1px solid var(--theme-color-primary, #2a6df4);
    border-radius: var(--theme-radius-button, 4px);
    background: var(--theme-color-primary, #2a6df4);
    color: var(--theme-color-primary-on, #fff);
    cursor: pointer;
    font: inherit;
}

/* Active-filter chip bar. */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3em 0.7em;
    border-radius: 999px;
    background: var(--theme-color-surface-muted, rgb(0 0 0 / 0.05));
    color: var(--theme-color-text, #111);
    font-size: 0.85rem;
    text-decoration: none;
}
.filter-chip__remove { font-weight: 700; }
.filter-clear-all {
    display: inline-flex;
    align-items: center;
    color: var(--theme-color-link, #1a6bd1);
    font-size: 0.85rem;
    text-decoration: underline;
}

/* Sort dropdown. */
.sort-dropdown {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
}
.sort-dropdown__label {
    flex: none;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}
.sort-dropdown__select {
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding: 0.4em 0.6em;
    border: 1px solid var(--theme-color-border, #d8d8d8);
    border-radius: var(--theme-radius-input, 4px);
    font: inherit;
    background: var(--theme-color-background, #fff);
    color: var(--theme-color-text, #111);
}
.sort-dropdown__select:focus-visible {
    outline: 2px solid var(--theme-color-primary, currentColor);
    outline-offset: 1px;
    border-width: 1px;
    box-shadow: none;
}
.sort-dropdown__apply { margin-inline-start: 0.4rem; }

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Gallery-card model swatches / count / price range. Byte-identical across all 6 themes; pure CSS (radio-hack), no new JS. `.product-card__variant-input` is a hidden radio that is a child of THIS card's `<article>` (before `.product-card__media`), so `:checked ~` below is scoped to this one card and never bleeds into a sibling product's card in the same grid. */

.product-card__variant-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.product-card__variant-input:nth-of-type(1):checked ~ .product-card__media .product-card__variant-image:nth-of-type(1),
.product-card__variant-input:nth-of-type(2):checked ~ .product-card__media .product-card__variant-image:nth-of-type(2),
.product-card__variant-input:nth-of-type(3):checked ~ .product-card__media .product-card__variant-image:nth-of-type(3),
.product-card__variant-input:nth-of-type(4):checked ~ .product-card__media .product-card__variant-image:nth-of-type(4),
.product-card__variant-input:nth-of-type(5):checked ~ .product-card__media .product-card__variant-image:nth-of-type(5),
.product-card__variant-input:nth-of-type(6):checked ~ .product-card__media .product-card__variant-image:nth-of-type(6),
.product-card__variant-input:nth-of-type(7):checked ~ .product-card__media .product-card__variant-image:nth-of-type(7),
.product-card__variant-input:nth-of-type(8):checked ~ .product-card__media .product-card__variant-image:nth-of-type(8),
.product-card__variant-input:nth-of-type(9):checked ~ .product-card__media .product-card__variant-image:nth-of-type(9),
.product-card__variant-input:nth-of-type(10):checked ~ .product-card__media .product-card__variant-image:nth-of-type(10) {
    opacity: 1;
    z-index: 2;
}

.product-card__swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.product-card__swatch {
    display: inline-block;
    inline-size: 18px;
    block-size: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid var(--theme-color-border, #d8d8d8);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.product-card__swatch:hover { box-shadow: 0 0 0 2px var(--theme-color-surface-muted, rgb(0 0 0 / 0.08)); }

.product-card__variant-input:nth-of-type(1):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(1),
.product-card__variant-input:nth-of-type(2):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(2),
.product-card__variant-input:nth-of-type(3):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(3),
.product-card__variant-input:nth-of-type(4):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(4),
.product-card__variant-input:nth-of-type(5):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(5),
.product-card__variant-input:nth-of-type(6):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(6),
.product-card__variant-input:nth-of-type(7):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(7),
.product-card__variant-input:nth-of-type(8):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(8),
.product-card__variant-input:nth-of-type(9):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(9),
.product-card__variant-input:nth-of-type(10):checked ~ .product-card__swatches .product-card__swatch:nth-of-type(10) {
    box-shadow: 0 0 0 2px var(--theme-color-primary, #2a6df4);
}

.product-card__swatch-more {
    font-size: 0.78rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

.product-card__variant-count {
    margin: 0;
    font-size: 0.82rem;
    color: var(--theme-color-text-muted, #6a6a6a);
}

/* Gallery-card image slideshow. Byte-identical across all 6 themes. The widget (`themeAssets/src/gallerySlideshow.ts`) only toggles `.is-active`; timing/looping is JS (one setInterval per card, like `carousel.ts`'s autoplay), while the visual stacking uses the same absolute-position/opacity pattern as the plain hover-swap and the variant swatches above. */
.product-card__slideshow-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}
.product-card__slideshow-image.is-active {
    opacity: 1;
    z-index: 2;
}

/* --- variant choice feedback and attribute groups -------------------- *
 * `variantPicker.ts` flips `hidden`, `aria-pressed` and `disabled` on
 * these as the shopper chooses; the styles below are what make each state
 * visible. `[hidden]` is forced because the badge and the struck-through
 * price set their own `display`. */

.product__price [hidden],
.product__sku[hidden],
.product__variants .product__variant-list[hidden] {
    display: none !important;
}

.product__variant-selected {
    margin-inline-start: 0.4em;
    font-weight: 400;
    color: var(--theme-color-text-muted, #767676);
}

.product__variant-selected:not(:empty)::before {
    content: "– ";
}

.product__variants--groups {
    display: grid;
    gap: 14px;
}

.product__variant-group {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.product__variant-group legend {
    padding: 0;
    margin-block-end: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

button.product__variant {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.product__variant--pills[aria-pressed="true"] .product__variant-label {
    border-color: var(--theme-color-primary, #e5006d);
    background: var(--theme-color-primary, #e5006d);
    color: var(--theme-color-primary-on, #fff);
}

.product__variant--dots[aria-pressed="true"] .product__swatch {
    box-shadow: 0 0 0 2px var(--theme-color-background, #fff),
                0 0 0 4px var(--theme-color-primary, #e5006d);
}

/* No variant has this value with the choices made so far. Dashed and
   struck through, not just faded, so it is not a colour-only signal. */
button.product__variant:disabled {
    color: var(--theme-color-text-muted, #767676);
    cursor: not-allowed;
}

button.product__variant:disabled .product__variant-label {
    border-style: dashed;
    border-color: var(--theme-color-border, #d8d8d8);
    text-decoration: line-through;
}

button.product__variant:disabled .product__swatch {
    border-style: dashed;
    filter: grayscale(1);
}

.product__stock.is-out {
    color: var(--theme-color-danger, #b3261e);
}

/* ---------- sign-in and account: the shared rules live in themeAssets/src/accountPages.css, this theme only sets its tokens ---------- */
.auth,
.account {
    --ap-shadow: var(--shadow-soft);
}

/* === storefront polish: the same block sits at the end of every theme.css (themePolish.test.ts keeps them equal) === */

/* Product cards: quiet links, a price row that cannot overlap, stock as a status line under the price. */
.product-card__title a,
.product-card__brand { text-decoration: none; }

.product-card__title a:hover,
.product-card__brand:hover { text-decoration: underline; }

.product-card__brand { min-block-size: 32px; }

.product-card__badges:empty { display: none; }

.product-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.6rem;
}

.product-card__price s { margin: 0; font-weight: 400; color: var(--accent); }

.product-card__availability { margin: 0; font-size: var(--step--1); }

.product-card__availability .badge--stock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.product-card__availability .badge--stock::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--stock);
}

.product-card__swatch {
    inline-size: 32px;
    block-size: 32px;
    padding: 7px;
    border-radius: 50%;
    background-clip: content-box;
}

/* Sections: the gap shrinks on phones and a section inside a section takes half of it. */
.section .section { --section-gap: calc(var(--section-gap-full) / 2); }


/* The hero slider is swiped on a phone: arrows would sit on top of its caption. */
@media (max-width: 767px) {
    .csf-slider .csf-slider__arrow { display: none !important; }
}

/* Offer badges on the image stay clear of the sale badge. */
.product-card__offers { max-inline-size: calc(100% - 1rem); }
.product-card__badges:not(:empty) ~ .product-card__offers--topStart,
.product-card__badges:not(:empty) ~ .product-card__offers--topEnd { inset-block-start: 2.5rem; }
.offer-badge { white-space: normal; overflow-wrap: anywhere; }

/* Featured category tiles with the caption below the picture are as tall as their content, and an empty caption takes no room. */
.csf-featured-category.caption-below { aspect-ratio: auto; }
.csf-featured-category.caption-below .csf-text-block { position: static; background: none; color: inherit; padding-inline: 0; }
.csf-featured-category .csf-text-block:empty { display: none; }

/* The footer is also a .section: it takes no section margin or padding of its own, the columns carry the space. */
.footer.section { margin-block: 0; padding-block: 0; }
.footer.section > .container { inline-size: min(100% - 2rem, var(--container)) !important; }
.footer__columns { padding-block: calc(var(--section-gap-full) * 0.6); }

/* Touch height for title links, the sign-up link and the gift card button on phones. */
@media (max-width: 767px) {
    .product-card__title { align-self: stretch; }
    .product-card__title a { display: inline; padding-block: 0.6rem; }
}

#gift-card-redeem-btn { min-block-size: 40px; }

.csf-articles { margin-block: calc(var(--section-gap) / 2); }

/* The back-to-top button sits over the last line of the footer, so the footer leaves room below it. */
.footer__bottom { padding-block-end: 4.5rem; }

.article__category,
.product__brand {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
}

/* Header: every icon is a 40px touch target and the logo shrinks before the row can overflow. */
.header__actions .icon-button,
.header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 40px;
    min-block-size: 40px;
}

/* The header total keeps its own width beside a wide menu bar. */
@media (min-width: 1024px) {
    .cart-sum { flex: 0 0 auto; max-inline-size: none; overflow: visible; }
}

/* A menu bar in the header row gives up a little padding before the total or the logo has to. */
@media (min-width: 1024px) and (max-width: 1439px) {
    .header__inner > .header__nav a,
    .header__inner > .header__nav button { padding-inline: 0.45rem; }
}

/* The last block of a page leaves no extra gap above the footer, and the article pager sits closer to the share row. */
.page__body > :last-child .section:last-child,
.page__body .csf-articles:last-child { margin-block-end: 0; }
.article__pager { margin-block-start: calc(var(--section-gap) / 2); }

/* The menu bar replaces the hamburger from 1024px, unless the shop chose the drawer at every width. */
@media (min-width: 1024px) {
    .header:not(.header--drawer) .header__burger { display: none; }
}

.header__logo { min-inline-size: 0; }

.header__logo-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    max-inline-size: 100%;
}

.header__logo-link img { max-inline-size: 100%; block-size: auto; }

@media (max-width: 479px) {
    .header__inner { gap: 0.25rem; }
    .header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
    .header__actions { gap: 0; }
    .header__logo { flex: 1 1 0; display: flex; justify-content: center; }
    .header__logo-link img { max-block-size: 34px; inline-size: auto; }
}

/* An empty slot in the buy box takes no room, so it adds no dead band. */
.product__buybox > p:empty,
.product__buybox > div:empty { display: none; }

/* Footer and article links: a readable touch height. */
.footer li > a,
.csf-menu__item--footer > a,
.article-card__category,
.article-card__title a {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    min-inline-size: 44px;
}

/* Cart and checkout: selectable option cards, line items as cards, a clear totals block. */
.checkout-payment__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.25rem;
    min-block-size: 56px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--bg);
    color: var(--fg);
    cursor: pointer;
    text-align: start;
}

.cart__summary { min-inline-size: 0; }

.cart__totals,
.checkout__totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    margin: 0;
    padding-block-start: 0.7rem;
}

.cart__totals dt,
.checkout__totals dt { padding-block: 0.3rem; padding-inline-end: 1rem; color: var(--accent); }
.cart__totals dd,
.checkout__totals dd { margin: 0; padding-block: 0.3rem; text-align: end; font-variant-numeric: tabular-nums; }
.cart__totals dt:last-of-type,
.cart__totals dd:last-of-type,
.checkout__totals dt:last-of-type,
.checkout__totals dd:last-of-type {
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--line);
    color: var(--fg);
    font-size: var(--step-1);
    font-weight: var(--weight-heading, 600);
}

.cart__checkout,
.checkout__place { min-block-size: 52px; font-size: var(--step-0); }

@media (max-width: 767px) {
    .cart__table tbody { display: grid; gap: 0.75rem; }

    .cart_item {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "product remove" "qty total";
        align-items: center;
        gap: 0.9rem 1rem;
        margin: 0;
        padding: 1rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: var(--bg);
    }

    .cart_item > td { display: block; padding: 0; border: 0; min-inline-size: 0; }
    .cart_item > td::before { content: none; }
    .cart_item > td:first-child { grid-area: product; }
    .cart_item > td.product-remove { grid-area: remove; align-self: start; }
    .cart_item > td:nth-child(2) { grid-area: qty; justify-self: start; }
    .cart_item > td.cart_item__discount { grid-column: 1 / -1; }
    .cart_item > td.cart_item__total { grid-area: total; justify-self: end; font-weight: var(--weight-heading, 600); }

    .cart_item__link { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 0.85rem; }
    .cart_item__text { display: grid; gap: 0.2rem; min-inline-size: 0; }
    .cart_item__name { font-weight: var(--weight-heading, 600); overflow-wrap: anywhere; }

    .product-remove a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 44px;
        block-size: 44px;
        margin: -0.75rem;
        font-size: 1.5rem;
        line-height: 1;
        text-decoration: none;
    }
}

.checkout-payment__option > input:checked + .checkout-payment__row {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.quantity:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* === end storefront polish === */

/* A primary button keeps the 20px side padding and the 600 weight its own rule gave it; the settings move it by the same amount as every other button. */
.button.button--primary:not(.button--small) { padding-inline: calc(var(--theme-button-padding-x) - 8px); }
.button.button--primary { font-weight: var(--theme-button-weight); }

/* Button style (buttonStyle setting): the body carries button-style-outline or button-style-soft; the filled style has no class. */
.button { --button-accent: var(--primary); --button-on: var(--primary-fg); }
.button--primary { --button-accent: var(--theme-color-primary, #e5006d); --button-on: var(--theme-color-primary-on, #fff); }
.button-style-outline .button:not(.button--ghost) {
    border: 2px solid var(--button-accent);
    background: transparent;
    color: var(--button-accent);
    filter: none;
}
.button-style-outline .button:not(.button--ghost):hover {
    background: var(--button-accent);
    color: var(--button-on);
}
.button-style-soft .button:not(.button--ghost) {
    border-color: transparent;
    background: color-mix(in srgb, var(--button-accent) 14%, var(--bg));
    color: color-mix(in srgb, var(--button-accent) 50%, #000);
    filter: none;
}
.button-style-soft .button:not(.button--ghost):hover {
    background: color-mix(in srgb, var(--button-accent) 22%, var(--bg));
    color: color-mix(in srgb, var(--button-accent) 50%, #000);
}


/* ---------- menu formatting ------------------------------------------- */

/* `themeAssets/src/menuFormat.css` draws the menu formatting settings (type, hover, panel, drawer, footer). These are the values of this theme's own
   design language it reads; they sit on `[data-mf]` so a surface drawn on another colour scheme resolves them against its own. */

[data-mf] {
    --mf-radius-rounded: var(--radius-card);
    --mf-radius-large: calc(var(--radius-card) * 1.5);
    --mf-shadow-soft: var(--shadow-hard-sm);
    --mf-shadow-strong: var(--shadow-hard);
    --mf-hover-bg: color-mix(in srgb, var(--primary) 10%, transparent);
    --mf-hover-radius: var(--radius-button);
    --mf-caps-tracking: var(--label-tracking);
    --mf-chip-radius: 999px;
    --mf-underline: 2px;
    --mf-underline-offset: 0.35rem;
}

/* ---------- banners ---------------------------------------------------- */

/* `themeAssets/src/banner.css` draws the banner. This theme's values: a big hero, a very large heavy serif headline set to the start,
   square-ish buttons with a hard offset shadow, and a deep shadow when the banner is lifted. */

.csf-banner,
.csf-slider,
.csf-popup {
    --bn-radius-theme: var(--radius-card);
    --bn-radius-rounded: 10px;
    --bn-radius-large: 18px;
    --bn-place-v: center;
    --bn-place-h: flex-start;
    --bn-place-align: start;
    --bn-pad-theme: clamp(1.5rem, 5vw, 4.5rem);
    --bn-gap: 1rem;
    --bn-title-size: var(--step-4);
    --bn-title-weight: 900;
    --bn-title-leading: 0.95;
    --bn-title-tracking: -0.02em;
    --bn-sub-size: var(--step-1);
    --bn-btn-radius: var(--radius-button);
    --bn-btn-pad: 0.85rem 1.5rem;
    --bn-btn-size: 1rem;
    --bn-btn-weight: 700;
    --bn-btn-shadow: 4px 4px 0 currentcolor;
    --bn-badge-radius: 999px;
    --bn-badge-size: 0.78rem;
    --bn-count-size: 2rem;
    --bn-count-weight: 900;
    --bn-lift-shadow: 12px 12px 0 var(--fg);
    --bn-zoom: 1.08;
    --bn-motion: 0.6s;
    --bn-enter-time: 0.9s;
    --bn-split-bg: color-mix(in srgb, var(--line) 35%, var(--bg));
    --bn-split-pad: clamp(2rem, 6vw, 5rem);
}

/* ---------- photo gallery block --------------------------------------- */

/* `themeAssets/src/photoGallery.css` draws the layouts, captions, hover effects and the carousel of the photo gallery block. These are the values of this
   theme's own design language it reads. */

.photo-gallery {
    --pg-radius-rounded: var(--radius-card);
    --pg-radius-round: calc(var(--radius-card) * 2);
    --pg-lift: -6px;
    --pg-lift-shadow: 0 24px 50px rgb(0 0 0 / 22%);
    --pg-motion: 0.28s;
    --pg-caption-scrim: linear-gradient(to top, rgb(0 0 0 / 55%), rgb(0 0 0 / 0));
    --pg-arrow-radius: 999px;
    --pg-arrow-bg: var(--bg);
    --pg-arrow-color: var(--fg);
    --pg-arrow-shadow: 0 10px 28px rgb(0 0 0 / 20%);
    --pg-thumb-radius: calc(var(--radius-card) * 0.6);
    --pg-carousel-ratio: 16 / 10;
}

/* ---------- gallery formatting ---------------------------------------- */

/* `themeAssets/src/productGallery.css` draws the gallery formatting settings (badges, captions, arrow looks, the lens, rounded frames). These are the
   values of this theme's own design language it reads. */

[data-widget='productGallery'] {
    --gf-radius-soft: var(--radius-card);
    --gf-radius-round: calc(var(--radius-card) * 1.6);
    --gf-badge-bg: var(--primary);
    --gf-badge-radius: 999px;
    --gf-arrow-square-radius: 14px;
    --gf-arrow-shadow: 0 12px 32px rgb(0 0 0 / 18%);
    --gf-lens-border: 3px solid #fff;
    --gf-lens-shadow: 0 18px 50px rgb(0 0 0 / 35%);
    --gf-caption-tracking: var(--label-tracking);
    --gf-glass-blur: 14px;
}

/* ---------- slider formatting ----------------------------------------- */

/* The slider block's arrow looks and pause button, in this theme's own design language (`ecommerce/blocks/sliderBlock/styles/slider.css` reads them). */

.csf-slider {
    --sl-arrow-square-radius: 14px;
    --sl-arrow-shadow: 0 12px 32px rgb(0 0 0 / 18%);
    --sl-glass-blur: 14px;
}

/* ---------- viewer formatting ----------------------------------------- */

/* The full-screen viewer (`themeAssets/src/shared/lightbox.css`) in this theme's own design language. */

dialog.csf-lightbox {
    --lb-bg: rgb(8 14 22 / 0.88);
    --lb-control-bg: rgb(255 255 255 / 0.18);
    --lb-thumb-radius: 12px;
    --lb-caption-radius: 14px;
}

/* ---------- page formatting ------------------------------------------- */

/* `themeAssets/src/pageFormat.css` frames the product page, cart, checkout, articles and events. This theme's values: ink-edged frames with a hard offset shadow. */

[data-pf] {
    --pf-radius: var(--radius-card);
    --pf-shadow: 6px 6px 0 var(--fg);
    --pf-pad: 1.75rem;
}

/* A price range ("10 - 25") stays on one line and reads left to right inside right-to-left pages. */
.product-card__price-range {
    white-space: nowrap;
    unicode-bidi: isolate;
}


/* ============================================================ home sections ===
 * The crosphera.com home is html blocks that carry markup only; every `cr-*` class is drawn here, in the
 * theme's own tokens, so a colour scheme or a settings change recolours the whole page. Each section is one
 * block (one token per line in the page body), so it stays movable in the editor.
 * ============================================================================= */

/* --- type, utilities ----------------------------------------------------- */

.cr-display { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--step-4); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
.cr-display--xl { font-size: var(--step-5); line-height: 0.92; letter-spacing: -0.025em; max-inline-size: 14ch; }
.cr-display--l { font-size: var(--step-3); }
.cr-display .cr-line { display: block; }
.cr-accent { color: var(--primary); }
.cr-muted { color: var(--accent); }
.cr-lede { font-size: var(--step-1); line-height: 1.4; max-inline-size: 34ch; text-wrap: pretty; margin: 0; }
.cr-rule { border: 0; border-block-start: 1px solid var(--line-strong); margin: 0; }
/* A section carries its room below it only, so two sections meet at one spacing; the one after a band breathes above. */
.cr-section { padding-block: 0 clamp(72px, 10vw, 144px); }
.cr-section--tight { padding-block-end: clamp(40px, 6vw, 88px); }
.cr-section.section--bleed { padding-block: clamp(64px, 8vw, 112px); }
.cr-site-block:has(> .section--bleed) + .cr-site-block > .cr-section { padding-block-start: clamp(56px, 8vw, 112px); }
.cr-packages { padding-block-end: 0; }
.cr-packages .cr-head { margin-block-end: clamp(24px, 3vw, 40px); }
/* The page's trailing margin is dropped when the page ends on the vermilion band, so the band meets the footer. */
.page.section:has(> .page__body > .cr-site-block:last-child > .cr-cta) { margin-block-end: 0; }

/* A twelve-column section head: the headline on the start side, a short paragraph on the end side. */
.cr-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-block-end: clamp(36px, 5vw, 64px); }
.cr-head > :first-child { grid-column: 1 / span 8; }
.cr-head > :last-child:not(:first-child) { grid-column: 9 / span 4; }
.cr-head p { margin: 0; }
.cr-section:not(.cr-packages) > .cr-head:last-child { margin-block-end: 0; }

/* The dashed tag on anything the owner must confirm before it ships. */
.cr-todo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1.5px dashed var(--primary);
    border-radius: 3px;
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: start;
    vertical-align: middle;
}

.cr-todo::before { content: "\25CC"; }

/* A source line under a number or a vignette: where the figure was counted, or that the data is illustrative. */
.cr-source,
.cr-caption {
    margin-block-start: 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}

.cr-caption { margin: 0; padding: 8px 14px; border-block-start: 1px solid var(--line); background: var(--paper-3); }

/* --- hero ---------------------------------------------------------------- */

/* The head sits close under the masthead and one step under the scale's top, so the lede and both buttons are inside an 800px fold. */
.cr-hero { padding-block: clamp(28px, 3.5vw, 48px) clamp(56px, 8vw, 120px); }
.cr-hero__title { font-size: clamp(3.4rem, 1rem + 7.8vw, 7.5rem); }
.cr-hero__title .cr-accent { position: relative; display: inline-block; z-index: 0; }
.cr-hero__title .cr-accent::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.02em;
    block-size: 0.08em;
    background: color-mix(in srgb, var(--primary) 25%, transparent);
    z-index: -1;
}

.cr-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; margin-block-start: clamp(28px, 3.5vw, 48px); }
.cr-hero__copy { grid-column: 1 / span 5; display: grid; gap: 28px; }
.cr-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* The three proofs are a hairline list, the same room as the objects beside them. */
.cr-hero__fine { display: grid; gap: 0; margin: 0; border-block-start: 1px solid var(--line-strong); color: var(--accent); font-size: var(--step-0); }
.cr-hero__fine > span { padding-block: 12px; border-block-end: 1px solid var(--line); text-wrap: pretty; }
.cr-hero__fine b { color: var(--fg); font-weight: 700; }
.cr-hero__visual { grid-column: 6 / span 7; position: relative; min-block-size: 740px; }
.cr-hero__note { position: absolute; inset-inline-end: 0; inset-block-end: -40px; margin: 0; max-inline-size: 62ch; color: var(--accent); text-align: end; text-wrap: balance; }

/* Product objects laid on the paper: ink-edged cards with a hard shadow, each turned a degree or two. */
.cr-card {
    position: absolute;
    background: var(--paper-3);
    color: var(--fg);
    border: 2px solid var(--fg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hard);
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.cr-hero__visual:hover .cr-card { box-shadow: 12px 12px 0 var(--fg); }

.cr-card__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-block-end: 1.5px solid var(--fg); background: var(--paper-2); }
.cr-dots { display: inline-flex; gap: 5px; }
.cr-dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line-strong); }
.cr-dots i:first-child { background: var(--primary); }
.cr-card__title { font-weight: 700; font-size: 12px; }
.cr-card__tabs { margin-inline-start: auto; display: flex; gap: 10px; color: var(--accent); font-size: 11px; }
.cr-card__tabs b { color: var(--fg); border-block-end: 2px solid var(--primary); padding-block-end: 1px; }

.cr-card table,
.cr-vig table { inline-size: 100%; border-collapse: collapse; }

.cr-card th,
.cr-vig th {
    text-align: start;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 10px 12px 6px;
    border-block-end: 1px solid var(--line);
}

.cr-card td,
.cr-vig td { padding: 9px 12px; border-block-end: 1px solid var(--line); white-space: nowrap; }
.cr-card tr:last-child td,
.cr-vig tr:last-child td { border-block-end: 0; }
.cr-card tfoot td { font-weight: 700; background: var(--paper-2); border-block-start: 1.5px solid var(--fg); }
.cr-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* The orders card stops short of the editor card beside it, so its tab strip is never under the editor. */
.cr-card--orders { inline-size: min(540px, 100% - 262px); inset-inline-start: 0; inset-block-start: 0; transform: rotate(-1.2deg); }
.cr-card--editor { inline-size: 250px; inset-inline-end: 0; inset-block-start: 0; transform: rotate(2.4deg); }
.cr-card--phone { inline-size: 200px; inset-inline-start: 24px; inset-block-end: 0; border-radius: 22px; border-width: 3px; transform: rotate(1.5deg); background: var(--paper-3); }
.cr-card--label { inline-size: 190px; inset-inline-end: 28px; inset-block-end: 40px; transform: rotate(-5deg); background: var(--paper-3); }

[dir="rtl"] .cr-card--orders { transform: rotate(1.2deg); }
[dir="rtl"] .cr-card--editor { transform: rotate(-2.4deg); }
[dir="rtl"] .cr-card--phone { transform: rotate(-1.5deg); }
[dir="rtl"] .cr-card--label { transform: rotate(5deg); }

/* The order workbench: breadcrumb, title and status pill, Print / More / next-step buttons, the step path (a bar over each step:
   green once done, ink for the current one) and the order's lines. The steps arrive one after another once the page is drawn. */
.cr-wb__crumb { padding: 8px 12px 0; font-size: 11px; color: var(--accent); }
.cr-wb__crumb i { font-style: normal; margin-inline: 4px; }
.cr-wb__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 12px 0; }
.cr-wb__id { display: flex; align-items: center; gap: 8px; }
.cr-wb__id b { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 17px; letter-spacing: -0.01em; }
.cr-wb__pill { padding: 1px 8px; border-radius: 999px; background: var(--live); color: var(--live-fg); font-size: 11px; font-weight: 700; }
.cr-wb__tools { margin-inline-start: auto; display: flex; gap: 6px; }
.cr-wb__summary { display: flex; gap: 10px; padding: 2px 12px 8px; color: var(--accent); font-size: 11px; border-block-end: 1px solid var(--line); }
.cr-wb__summary span + span { padding-inline-start: 10px; border-inline-start: 1px solid var(--line-strong); }
.cr-wb__path { margin: 0; padding: 10px 12px; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cr-wb__path li { display: flex; align-items: center; gap: 6px; padding-block-start: 6px; border-block-start: 3px solid var(--line); min-inline-size: 0; }
.cr-wb__path li.is-done { border-block-start-color: var(--live); }
.cr-wb__path li.is-current { border-block-start-color: var(--fg); }
.cr-wb__path i { flex: none; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--paper-3); color: var(--accent); font: 700 10px/1 var(--font-mono); font-style: normal; }
.cr-wb__path li.is-done i { border-color: var(--live); background: var(--live); color: var(--live-fg); }
.cr-wb__path li.is-current i { border-color: var(--fg); color: var(--fg); box-shadow: 0 0 0 3px var(--paper-2); }
.cr-wb__path span { display: grid; min-inline-size: 0; }
.cr-wb__path b { font-size: 11px; }
.cr-wb__path small { font-size: 10px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-block-size: 1.2em; }

.cr-wb__path li { animation: cr-row-in 0.45s var(--ease) both; animation-delay: calc(0.5s + var(--cr-row, 0) * 0.16s); }
.cr-wb__path li:nth-child(2) { --cr-row: 1; }
.cr-wb__path li:nth-child(3) { --cr-row: 2; }
.cr-wb__path li:nth-child(4) { --cr-row: 3; }
.cr-wb__path li:nth-child(5) { --cr-row: 4; }
.cr-wb__path li:nth-child(6) { --cr-row: 5; }
.cr-wb__path li:nth-child(7) { --cr-row: 6; }
.cr-wb__path li.is-current i { animation: cr-pulse 1.6s ease-in-out 2s infinite; }

@keyframes cr-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes cr-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fg) 40%, transparent); }
    50% { box-shadow: 0 0 0 5px transparent; }
}

/* The "Order · paid" ticket that lands on the orders card once the page is drawn. */
.cr-ticket {
    position: absolute;
    inset-inline-start: 24px;
    inset-block-start: -30px;
    z-index: 2;
    padding: 6px 10px;
    border: 2px solid var(--fg);
    border-radius: var(--radius-button);
    background: var(--live);
    color: var(--live-fg);
    box-shadow: var(--shadow-hard-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: rotate(-3deg);
    animation: cr-ticket-land 0.6s var(--ease) 0.4s both;
}

@keyframes cr-ticket-land {
    from { transform: translateY(-40px) rotate(-9deg); opacity: 0; }
    to { transform: rotate(-3deg); opacity: 1; }
}

/* Theme settings: the Layout group's fields as rows (label, the range or swatches, the value), the change count and Save under them. */
.cr-card--editor .cr-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-block-end: 1px solid var(--line); }
.cr-card--editor .cr-row > span:first-child { flex: 1 1 auto; }
.cr-card--editor .cr-row b { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--accent); white-space: nowrap; }
.cr-card--editor .cr-row--save { background: var(--paper-2); border-block-end: 0; }
.cr-card--editor .cr-row--save > span:first-child { color: var(--accent); font-size: 11px; }
.cr-range { position: relative; block-size: 3px; inline-size: 64px; border-radius: 2px; background: var(--line); }
.cr-range::after { content: ""; position: absolute; inset-block-start: -5px; inset-inline-start: 78%; inline-size: 13px; block-size: 13px; border-radius: 50%; background: var(--primary); border: 2px solid var(--fg); }
.cr-range--mid::after { inset-inline-start: 46%; }
.cr-swatches { display: flex; gap: 6px; }
.cr-swatches i { inline-size: 16px; block-size: 16px; border-radius: 3px; border: 1.5px solid var(--fg); }
.cr-swatches i:nth-child(1) { background: var(--bg); }
.cr-swatches i:nth-child(2) { background: var(--fg); }
.cr-swatches i:nth-child(3) { background: var(--primary); }
.cr-swatches i:nth-child(4) { background: var(--live); }

.cr-tgl { inline-size: 30px; block-size: 17px; border-radius: 999px; border: 1.5px solid var(--fg); position: relative; background: var(--paper-3); flex: none; }
.cr-tgl::after { content: ""; position: absolute; inset-block-start: 1.5px; inset-inline-start: 1.5px; inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--fg); }
.cr-tgl.is-on { background: var(--live); }
.cr-tgl.is-on::after { inset-inline-start: auto; inset-inline-end: 1.5px; }

.cr-card--phone .cr-notch { inline-size: 70px; block-size: 6px; background: var(--fg); border-radius: 3px; margin: 8px auto 0; }
.cr-card--phone .cr-shop { padding: 12px 14px 14px; }
.cr-brandline { display: flex; justify-content: space-between; font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 14px; }
.cr-brandline span:last-child { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; }
/* The product picture: a camel coat on a hanger against a lit studio wall, drawn in gradients so it reads as a photo at this size. */
.cr-product-art {
    margin-block-start: 10px; aspect-ratio: 1; border: 1.5px solid var(--fg); border-radius: 8px; position: relative; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, #f3ebdf 0%, #d9cdbd 55%, #b9a995 100%);
}
.cr-product-art::before {
    content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 10%; inline-size: 3px; block-size: 14%; margin-inline-start: -1.5px;
    background: #4a3f36; border-radius: 2px;
    box-shadow: -14px 10px 0 -1px #4a3f36, 14px 10px 0 -1px #4a3f36;
}
.cr-product-art::after {
    content: ""; position: absolute; inset-inline-start: 18%; inset-block-end: 0; inline-size: 64%; block-size: 70%;
    background: linear-gradient(100deg, #b98a55 0%, #c99a64 48%, #a87a48 52%, #c49660 100%);
    clip-path: polygon(34% 0, 50% 8%, 66% 0, 100% 16%, 92% 100%, 8% 100%, 0 16%);
    box-shadow: 0 10px 18px -8px rgba(40, 30, 20, 0.55);
}
.cr-card--phone .cr-pname { margin-block-start: 10px; font-weight: 700; font-size: 13px; }
.cr-card--phone .cr-pmeta { color: var(--accent); font-size: 11px; display: flex; justify-content: space-between; gap: 6px; margin-block-start: 2px; white-space: nowrap; }
/* The product page's buy box: variant swatches, the stock status, the add button, the "Availability in stores" list. */
.cr-card--phone .cr-models { display: flex; gap: 5px; margin-block-start: 8px; }
.cr-card--phone .cr-models i { inline-size: 24px; block-size: 24px; display: grid; place-items: center; border: 1px solid var(--line-strong); font: 500 10px/1 var(--font-mono); font-style: normal; }
.cr-card--phone .cr-models i.is-on { border: 1.5px solid var(--fg); }
.cr-card--phone .cr-stock { margin-block-start: 8px; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.cr-card--phone .cr-stock::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--stock); }
.cr-card--phone .cr-buy { margin-block-start: 8px; background: var(--fg); color: var(--bg); text-align: center; padding: 9px; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.cr-card--phone .cr-avail { margin-block-start: 10px; padding-block-start: 8px; border-block-start: 1px solid var(--line); font-size: 10.5px; display: grid; gap: 2px; }
.cr-card--phone .cr-avail b { font-size: 11px; }
.cr-card--phone .cr-avail small { font-size: 10px; color: var(--accent); }

.cr-card--label .cr-lhead { display: flex; justify-content: space-between; padding: 8px 10px; border-block-end: 1.5px solid var(--fg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }
.cr-card--label .cr-lbody { padding: 8px 10px; }
.cr-card--label .cr-lbody b { display: block; font-size: 12px; }
.cr-card--label .cr-lbody small { display: block; margin-block-start: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.cr-card--label .cr-lbody__track { display: block; margin-block-start: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; }
.cr-barcode { margin-block-start: 8px; block-size: 34px; background: repeating-linear-gradient(90deg, var(--fg) 0 2px, transparent 2px 4px, var(--fg) 4px 5px, transparent 5px 8px, var(--fg) 8px 11px, transparent 11px 13px); }
.cr-card--label .cr-pick { margin-block-start: 6px; display: inline-block; background: var(--primary); color: var(--primary-fg); padding: 1px 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }

/* The masthead carries the logo lockup inline (`page-branding.liquid`): 44px tall, 36px on a phone. */
.header .header__logo-link { display: inline-flex; align-items: center; }
.header .header__logo-link .cr-logo { display: block; block-size: 44px; inline-size: auto; }

/* Five pages: the masthead nav is the path, a breadcrumb strip above a page head is a shop template's habit. */
.breadcrumbs { display: none; }

/* The last entry of the main menu is the call to action (`highlight: outline` in the menu): the primary button at the end
   of the masthead row, and a full-width button at the foot of the drawer. The nav fills the row so the button reaches the end. */
.header__nav { flex: 1 1 auto; margin-inline: 0; }
.header__nav .csf-menu__item:has(> a[data-mfe~="hl-outline"]) { margin-inline-start: auto; }
.header__nav .csf-menu__item > a[data-mfe~="hl-outline"] {
    min-block-size: 42px;
    padding: 0 1.1rem;
    border: 2px solid var(--fg);
    border-radius: var(--radius-button);
    background: var(--primary);
    color: var(--primary-fg);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.header__nav .csf-menu__item > a[data-mfe~="hl-outline"]:hover { transform: var(--lift-2); box-shadow: var(--shadow-hard-sm); }
.header__nav .csf-menu__item--current > a[data-mfe~="hl-outline"] { text-decoration: none; }

[data-widget="mobileMenu"] .csf-mobile__item > a[data-mfe~="hl-outline"] {
    justify-content: center;
    inline-size: auto;
    margin: 20px 16px 8px;
    border: 2px solid var(--fg);
    border-radius: var(--radius-button);
    background: var(--primary);
    color: var(--primary-fg);
    font-weight: 700;
    box-shadow: var(--shadow-hard-sm);
}

/* --- numbers strip -------------------------------------------------------- */

.cr-numbers { border-block: 1px solid var(--line-strong); margin-block-end: clamp(48px, 6vw, 80px); }
.cr-numbers__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cr-numbers__item { padding: 28px 20px 26px; border-inline-start: 1px solid var(--line); }
.cr-numbers__item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.cr-numbers__n { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--step-4); line-height: 0.9; letter-spacing: -0.03em; }
/* A tile whose figure is a word (a capability with no count): set in the mono face at the figures' height. */
.cr-numbers__n--word { font-family: var(--font-mono); font-weight: 500; font-size: var(--step-3); letter-spacing: 0.04em; color: var(--primary); }
.cr-numbers__l { margin-block-start: 10px; font-size: var(--step--1); color: var(--accent); text-wrap: balance; }
.cr-numbers__l b { color: var(--fg); font-weight: 700; display: block; }
.cr-numbers__note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-block: 14px 0; color: var(--accent); }
.cr-numbers__note span { text-wrap: balance; }

/* The till receipt: what a plan includes, as a mono list with dotted leaders. */
.cr-receipt { margin: 0; padding: 18px 20px; border: 2px solid var(--fg); border-radius: var(--radius-card); background: var(--paper-3); box-shadow: var(--shadow-hard-sm); font-family: var(--font-mono); font-size: var(--step--1); max-inline-size: 420px; }
.cr-receipt dt,
.cr-receipt dd { margin: 0; }
.cr-receipt > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-block-end: 1px dashed var(--line); }
.cr-receipt > div:last-child { border-block-end: 0; border-block-start: 1.5px solid var(--fg); margin-block-start: 6px; padding-block-start: 10px; font-weight: 700; }

/* --- chapters -------------------------------------------------------------- */

.cr-chapter {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 48px);
    padding-block: clamp(40px, 5vw, 72px);
    border-block-start: 1px solid var(--line-strong);
    align-items: start;
}

.cr-chapter__folio { grid-column: 1 / span 2; }
.cr-folio {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: var(--step-4);
    line-height: 0.9;
    letter-spacing: -0.03em;
    -webkit-text-stroke: 1.5px var(--brand-lilac);
    color: transparent;
}

.cr-chapter__folio .cr-mono { margin-block-start: 10px; color: var(--accent); }
.cr-chapter__text { grid-column: 3 / span 4; display: grid; gap: 20px; }
.cr-chapter__text h3 { font-size: var(--step-3); margin: 0; }
.cr-chapter__text ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cr-chapter__text li { position: relative; padding-inline-start: 22px; }
.cr-chapter__text li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; inline-size: 10px; block-size: 2px; background: var(--primary); }
.cr-chapter__visual { grid-column: 7 / span 6; }
.cr-chapter--flip .cr-chapter__visual { grid-column: 1 / span 6; grid-row: 1; }
.cr-chapter--flip .cr-chapter__folio { grid-column: 7 / span 2; }
.cr-chapter--flip .cr-chapter__text { grid-column: 9 / span 4; }

@media (min-width: 1100px) {
    .cr-chapter__folio { position: sticky; inset-block-start: calc(var(--header-height) + 24px); }
}

/* A UI vignette: the same object as a hero card, in the flow. */
.cr-vig {
    position: relative;
    background: var(--paper-3);
    border: 2px solid var(--fg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hard);
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.cr-vig:hover { transform: var(--lift-3); box-shadow: calc(11px * var(--shadow-x)) 11px 0 var(--fg); }
.cr-vig .cr-card__bar { padding: 10px 14px; }
.cr-vig th { padding: 10px 14px 6px; }
.cr-vig td { padding: 10px 14px; white-space: normal; }
.cr-vig .cr-pad { padding: 14px; }
.cr-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; padding: 10px 14px; border-block-start: 1px solid var(--line); background: var(--paper-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }



.cr-providers { padding: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.cr-pv { border: 1.5px solid var(--fg); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 500; background: var(--paper-3); }
/* The regional providers are one counting chip, in ink. */
.cr-pv--more { background: var(--fg); color: var(--bg); border-color: var(--fg); }



/* --- themes: seven spines on ink ----------------------------------------- */

.cr-spines { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.cr-spine {
    position: relative;
    aspect-ratio: 3 / 5.4;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 10px;
    padding: 16px 14px;
    border: 2px solid var(--fg);
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s var(--ease), background-color 0.3s;
}

.cr-spine:hover { transform: translateY(-6px); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.cr-spine::after { content: "\2197"; position: absolute; inset-inline-end: 12px; inset-block-end: 10px; font-family: var(--font-heading); font-size: 20px; opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.25s, transform 0.25s var(--ease); }
.cr-spine:hover::after { opacity: 1; transform: none; }
[dir="rtl"] .cr-spine::after { transform: scaleX(-1) translate(-4px, 4px); }
[dir="rtl"] .cr-spine:hover::after { transform: scaleX(-1); }
.cr-spine__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cr-spine__name { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--step-2); line-height: 0.95; letter-spacing: -0.02em; }
.cr-spine__desc { font-size: 0.8rem; line-height: 1.35; color: var(--accent); padding-inline-end: 22px; }
/* The spine's art is a fixed box at the foot of its own row, and the caption keeps two lines of room, so the seven art
   marks share one baseline and the captions start on one line. */
.cr-spine__art { align-self: end; pointer-events: none; }
.cr-spine__desc { min-block-size: 2.7em; }
.cr-spine--private .cr-spine__desc { grid-row: 3 / span 2; align-self: end; }
.cr-spine:hover .cr-tm { transform: translateY(-3px); }

/* A theme's thumbnail: a storefront drawn in that theme's own tokens (`--tm-*`, written by the site step from the theme's settings):
   its header, a hero band in its primary colour, three product cards and its footer. The same drawing serves the spines and the
   theme tiles of the Theme settings screen. */
.cr-tm {
    display: grid; grid-template-rows: 12% 34% 1fr 11%; inline-size: 100%; aspect-ratio: 4 / 3; overflow: hidden;
    border: 1.5px solid var(--tm-line, var(--line-strong)); border-radius: 4px; background: var(--tm-bg, #fff);
    transition: transform 0.3s var(--ease);
}
.cr-tm i { display: block; }
.cr-tm__bar { position: relative; border-block-end: 1px solid var(--tm-line, #e6e6ea); background: var(--tm-bg, #fff); }
.cr-tm__bar::before { content: ""; position: absolute; inset-inline-start: 7%; inset-block-start: 30%; inline-size: 18%; block-size: 40%; background: var(--tm-fg, #111); border-radius: 1px; }
.cr-tm__bar::after { content: ""; position: absolute; inset-inline-end: 7%; inset-block-start: 38%; inline-size: 34%; block-size: 24%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tm-fg, #111) 55%, var(--tm-bg, #fff)) 0 22%, transparent 22% 33%); }
.cr-tm__hero { position: relative; background: var(--tm-primary, #e5006d); }
.cr-tm__hero::before { content: ""; position: absolute; inset-inline-start: 8%; inset-block-start: 26%; inline-size: 46%; block-size: 16%; background: var(--tm-primary-fg, #fff); border-radius: 1px; box-shadow: 0 6px 0 -2px var(--tm-primary-fg, #fff); }
.cr-tm__hero::after { content: ""; position: absolute; inset-inline-start: 8%; inset-block-end: 16%; inline-size: 22%; block-size: 18%; background: var(--tm-primary-fg, #fff); border-radius: 2px; }
.cr-tm__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5%; padding: 7% 7% 5%; background: var(--tm-bg, #fff); }
.cr-tm__cards b { display: block; border: 1px solid var(--tm-line, #e6e6ea); border-radius: 2px; background: linear-gradient(var(--tm-line, #e6e6ea), var(--tm-line, #e6e6ea)) 0 0 / 100% 62% no-repeat, var(--tm-bg, #fff); position: relative; }
.cr-tm__cards b::after { content: ""; position: absolute; inset-inline: 14%; inset-block-end: 14%; block-size: 12%; background: color-mix(in srgb, var(--tm-fg, #111) 70%, var(--tm-bg, #fff)); }
.cr-tm__foot { background: var(--tm-ink, #111); }
.cr-spine--private { border-style: dashed; border-color: var(--line-strong); }
.cr-spine--private .cr-spine__name { color: var(--primary); }

/* --- packages: the feature switches, add-ons marked ---------------------- */

.cr-switches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cr-switches__group { border: 1.5px solid var(--fg); border-radius: var(--radius-card); background: var(--paper-3); padding: 14px 16px; }
.cr-switches__group h4 { margin: 0 0 10px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cr-switches__group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--step--1); }
.cr-switches__group li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* A switch that is also sold as an add-on carries a small ink tag on its name line. */
.cr-switches__group li > b { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.cr-addon-tag { padding: 2px 7px; border: 1.5px solid var(--fg); border-radius: 999px; background: var(--fg); color: var(--bg); font-family: var(--font-mono); font-size: 0.66rem; font-style: normal; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.cr-switches__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 clamp(20px, 3vw, 32px); color: var(--accent); font-size: var(--step--1); }

/* --- how it works: three numbered steps ---------------------------------- */

.cr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line-strong); }
.cr-step { position: relative; display: grid; gap: 16px; align-content: start; padding: 36px 32px 40px; border-inline-start: 1px solid var(--line); }
.cr-step:first-child { border-inline-start: 0; padding-inline-start: 0; }
.cr-step__n { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--step-5); line-height: 0.8; letter-spacing: -0.04em; color: var(--primary); }
.cr-step h3 { font-size: var(--step-2); margin: 0; }
.cr-step p { margin: 0; }
.cr-step__facts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--accent); }
.cr-step__facts li::before { content: "\2014  "; color: var(--primary); }

/* --- questions: headline beside the list --------------------------------- */

.cr-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.cr-faq__side { grid-column: 1 / span 4; }
.cr-faq__list { grid-column: 5 / span 8; }
.cr-faq__list .faq-block { margin-block: 0; }
.cr-faq__aside { margin-block-start: 20px; color: var(--accent); font-size: var(--step--1); max-inline-size: 28ch; }

/* --- final call: the heading, the lede and the two actions on the accent paper ---------------- */

.cr-cta__copy { display: grid; gap: 24px; max-inline-size: 760px; }
.cr-cta__copy .cr-lede { color: var(--accent); }
.cr-cta__copy .cr-actions { margin: 0; }

/* The two actions of a page: the primary button, the secondary beside it; they stack on a narrow screen. */
.cr-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.cr-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cr-names { white-space: nowrap; }

/* The ghost wordmark across the foot of the page. */
.cr-ghost {
    margin-block-start: 40px;
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: clamp(3rem, 14vw, 15rem);
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--fg) 8%, transparent);
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
}

/* --- sub-pages: page head, jump list, specification tables, billing formula -- */

.cr-display--narrow { max-inline-size: 14ch; margin-block-end: clamp(32px, 4vw, 56px); }
/* The page's own section margin already clears the header; the head adds room only below itself. */
.cr-page-head { display: grid; gap: 28px; padding-block: 0 clamp(32px, 5vw, 64px); }
.cr-page-head .cr-display--xl { max-inline-size: 16ch; }
.cr-page-head .cr-lede { max-inline-size: 48ch; }
.cr-page-head > p { margin: 0; }
.cr-page-head .eyebrow { margin-block-end: 0; }

/* The jump list of the features page: one chip per job, the folio in vermilion. */
.cr-jump { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.cr-jump a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1.5px solid var(--fg);
    border-radius: 999px;
    background: var(--paper-3);
    color: var(--fg);
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.cr-jump a:hover { transform: var(--lift-2); box-shadow: var(--shadow-hard-sm); }
.cr-jump .cr-mono { color: var(--primary); }

.cr-close { display: grid; gap: 24px; border-block-start: 1px solid var(--line-strong); }
.cr-close p { margin: 0; }
.cr-close .cr-lede { max-inline-size: 52ch; }

/* A specification table in a vignette: the label column narrow and mono, the list beside it wrapping. */
.cr-spec th[scope="row"] { inline-size: 26%; vertical-align: top; white-space: nowrap; padding-block: 12px; }
.cr-spec td { vertical-align: top; }
.cr-spec tbody tr:last-child th,
.cr-spec tbody tr:last-child td { border-block-end: 0; }

/* The feature switches on the pricing page: a name and its one-line meaning, grouped. */
.cr-switches__group li { display: grid; gap: 2px; padding-block: 7px; border-block-end: 1px dashed var(--line); }
.cr-switches__group li:last-child { border-block-end: 0; padding-block-end: 0; }
.cr-switches__group li small { font-size: 0.78rem; line-height: 1.35; color: var(--accent); }

/* The bill as a receipt beside its notes. */
.cr-formula { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
.cr-formula .cr-receipt { grid-column: 1 / span 5; max-inline-size: none; }
.cr-formula__notes { grid-column: 7 / span 6; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--accent); }
.cr-formula__notes b { color: var(--fg); }
.cr-formula__notes li { position: relative; padding-inline-start: 22px; }
.cr-formula__notes li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; inline-size: 10px; block-size: 2px; background: var(--primary); }

.cr-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-weight: 500; }
/* The address column is taller than the headline, so this head aligns at the top rather than the baseline of its last line. */
.cr-about-foot .cr-head { align-items: start; }
.cr-about-foot .cr-head h2 { margin-block-start: 0; }
.cr-about-foot .cr-head p { margin: 0 0 10px; }

/* The footer's gutter is the page's: the shared polish sheet fixes a 1rem gutter for every theme, this one lines the footer up
   with the sections above it. */
.footer.section > .container { inline-size: min(100% - var(--gutter) * 2, var(--container)) !important; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
    .cr-formula .cr-receipt,
    .cr-formula__notes { grid-column: 1 / span 12; }
    .cr-head > :first-child,
    .cr-head > :last-child:not(:first-child) { grid-column: 1 / span 12; }
    .cr-hero__copy { grid-column: 1 / span 12; max-inline-size: 640px; }
    /* One row of objects: orders and label down the start side, editor and phone down the end side, nothing hidden by a neighbour. */
    .cr-hero__visual { grid-column: 1 / span 12; min-block-size: 0; block-size: 740px; margin-block-start: 16px; }
    .cr-card--orders { inline-size: min(540px, 100% - 280px); }
    .cr-card--editor { inset-inline-end: 12px; }
    .cr-card--phone { inset-inline-start: auto; inset-inline-end: 48px; inset-block-end: 0; transform: rotate(-1.5deg); }
    .cr-card--label { inset-inline-end: auto; inset-inline-start: 16px; inset-block-end: 110px; }
    [dir="rtl"] .cr-card--phone { transform: rotate(1.5deg); }
    .cr-chapter__folio,
    .cr-chapter--flip .cr-chapter__folio { grid-column: 1 / span 12; grid-row: auto; }
    .cr-chapter__text { grid-column: 1 / span 5; grid-row: 2; }
    .cr-chapter__visual { grid-column: 6 / span 7; grid-row: 2; }
    .cr-chapter--flip .cr-chapter__text { grid-column: 8 / span 5; grid-row: 2; }
    .cr-chapter--flip .cr-chapter__visual { grid-column: 1 / span 7; grid-row: 2; }
    .cr-spines { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cr-spine { aspect-ratio: 3 / 4; }
    .cr-numbers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cr-numbers__item:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
    .cr-numbers__item:nth-child(n+4) { border-block-start: 1px solid var(--line); }
    .cr-switches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cr-faq__side,
    .cr-faq__list { grid-column: 1 / span 12; }
    .cr-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cr-addons h3,
    .cr-addons__list,
    .cr-addons p { grid-column: 1 / span 12; }
}

@media (max-width: 900px) {
    .cr-chapter__text,
    .cr-chapter--flip .cr-chapter__text,
    .cr-chapter__visual,
    .cr-chapter--flip .cr-chapter__visual { grid-column: 1 / span 12; grid-row: auto; }
    .cr-vig { max-inline-size: 640px; }
    .cr-steps { grid-template-columns: 1fr; }
    .cr-step { border-inline-start: 0; padding-inline: 0; border-block-start: 1px solid var(--line); }
    .cr-step:first-child { border-block-start: 0; }
}

@media (max-width: 640px) {
    .cr-hero { padding-block-start: 24px; }
    .cr-display--xl { font-size: clamp(3rem, 15.5vw, 5rem); max-inline-size: none; }
    /* "to stockroom." holds one line on a 390px phone. */
    .cr-hero__title { font-size: clamp(2.6rem, 12.6vw, 5rem); }
    /* Tall enough for the orders card to clear the two cards below it. */
    .cr-hero__visual { min-block-size: 0; block-size: 640px; margin-block-end: 24px; }
    .cr-hero__note { inset-block-end: -58px; }
    .cr-hero__fine { font-size: var(--step--1); }
    .cr-hero__ctas .button { flex: 1 1 auto; }
    .cr-card { font-size: 11px; }
    .cr-card--orders { inline-size: 100%; inset-block-start: 0; transform: none; }
    /* Print and More do not fit beside the title on a phone; the next-step button does. */
    .cr-wb__tools .cr-bo__btn:not(.is-primary) { display: none; }
    .cr-wb__path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cr-card--editor { inline-size: 180px; inset-block-start: auto; inset-block-end: 16px; inset-inline-end: 8px; transform: rotate(2deg); }
    .cr-card--phone { inline-size: 150px; inset-inline-start: 0; inset-inline-end: auto; inset-block-end: 0; transform: rotate(-1.5deg); }
    .cr-card--phone .cr-avail,
    .cr-card--phone .cr-models,
    .cr-card--phone .cr-brandline span:last-child,
    .cr-card--editor .cr-card__tabs span,
    .cr-card--editor .cr-range { display: none; }
    .cr-card--editor .cr-row { white-space: nowrap; padding-block: 7px; }
    .cr-card--label { display: none; }
    .cr-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cr-numbers__item { padding: 22px 16px 20px; }
    .cr-numbers__item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
    .cr-numbers__item:nth-child(4) { border-inline-start: 1px solid var(--line); padding-inline-start: 16px; }
    .cr-numbers__item:nth-child(n+3) { border-block-start: 1px solid var(--line); }
    .cr-spines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cr-spine { aspect-ratio: 3 / 4.4; }
    .cr-spine--private { grid-column: span 2; aspect-ratio: auto; min-block-size: 120px; }
    .cr-hide-m { display: none; }
    .cr-vig td,
    .cr-vig th { padding-inline: 10px; }
    .cr-switches { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-ticket,
    .cr-wb__path li,
    .cr-wb__path li.is-current i { animation: none; }
    .cr-vig:hover,
    .cr-spine:hover,
    .button:hover,
    .icon-button:hover { transform: none; }
}

/* --- review fixes: footer, widget, vignettes, switches, close, head, touch ---------------------------- */

/* The home head sits one line under the masthead: the page's section gap is the hero's own, so the headline is in the fold. */
.page.section:has(> .page__body > .cr-site-block:first-child > .cr-hero) { margin-block-start: 0; }
.page__body > .cr-site-block:first-child > .cr-hero { padding-block-start: clamp(24px, 3vw, 40px); }

/* The vignette keeps pace with its text: it fills the row and the card sticks under the masthead while the bullets scroll past. */
@media (min-width: 901px) {
    .cr-chapter__visual,
    .cr-chapter--flip .cr-chapter__visual { align-self: stretch; }
    .cr-chapter__visual > .cr-vig { position: sticky; inset-block-start: calc(var(--header-height) + 24px); }
}

/* The close of the features page is a full-width head: the statement on the start side, the lede and the buttons on the end. */
.cr-close { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); align-items: end; padding-block-start: clamp(40px, 5vw, 72px); }
.cr-close > h2 { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.cr-close > .cr-lede { grid-column: 8 / span 5; grid-row: 1; max-inline-size: none; align-self: end; }
.cr-close > p:last-child { grid-column: 8 / span 5; grid-row: 2; display: flex; flex-wrap: wrap; gap: 12px; }

/* The feature switches are rows, not columns: a group's name on the start side, its switches in a three-column list, so no
   group stands twice as tall as its neighbour. */
.cr-switches { grid-template-columns: 1fr; gap: 0; border-block-start: 1px solid var(--line-strong); }
.cr-switches__group { display: grid; grid-template-columns: 2fr 10fr; gap: 16px clamp(16px, 3vw, 48px); padding: 22px 0; border: 0; border-block-end: 1px solid var(--line-strong); border-radius: 0; background: none; }
.cr-switches__group h4 { margin: 0; padding-block-start: 9px; }
.cr-switches__group ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2.5vw, 32px); }

/* The head's end column stacks its note, its tag and its button with air between them. */
.cr-head > div { display: grid; gap: 14px; justify-items: start; }
.cr-head > div > p { margin: 0; }

/* The questions' aside sits beside the headline where the side column is stacked above the list. */
@media (max-width: 1100px) {
    .cr-faq__side { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; }
    .cr-faq__side .eyebrow { flex-basis: 100%; }
    .cr-faq__aside { margin: 0 0 4px; }
}

/* Touch height for the inline links that stand alone: the social accounts. */
.cr-links a { display: inline-flex; align-items: center; min-block-size: 32px; }
/* A link inside running text keeps flowing with it (its full stop stays on its line); the padding alone makes the tap target. */
.cr-head .cr-muted a,
.cr-switches__legend a { padding-block: 6px; margin-block: -6px; }

/* The not-found page: a page head and two ways out. */
.cr-404 { min-block-size: 50vh; align-content: start; }
.cr-404__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The masthead on a phone: the wordmark keeps a gutter from the burger, in a size that fits beside it. */
@media (max-width: 479px) {
    .header__inner { gap: 0.75rem; }
    .header .header__logo { justify-content: start; }
    .header .header__logo-link .cr-logo { block-size: 36px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
    /* One row of hero objects, held to the copy's width, so they sit together rather than at the corners of the page. */
    .cr-hero__visual { max-inline-size: 760px; block-size: 700px; }
    .cr-close > h2 { grid-column: 1 / span 12; grid-row: auto; }
    .cr-close > .cr-lede,
    .cr-close > p:last-child { grid-column: 1 / span 12; grid-row: auto; }
}

@media (max-width: 900px) {
    .cr-steps--four { grid-template-columns: 1fr; }
    .cr-close > h2,
    .cr-close > .cr-lede,
    .cr-close > p:last-child { grid-column: 1 / span 12; grid-row: auto; }
    .cr-switches__group { grid-template-columns: 1fr; gap: 10px; }
    .cr-switches__group h4 { padding-block-start: 0; }
    .cr-switches__group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .cr-switches__group ul { grid-template-columns: 1fr; }
    .cr-hero__visual { max-inline-size: none; }
}

/* The tablet footer holds two columns per row, so an email address never breaks mid-word. */
@media (max-width: 900px) and (min-width: 640px) {
    .footer__columns--columns .footer__col { grid-column: span 6; }
}

/* --- real screens: the back office's own screens redrawn (rail, title bar, canvas) ---------------------------- */

.cr-bo__frame { display: grid; grid-template-columns: 118px minmax(0, 1fr); background: var(--paper-2); }
.cr-bo__rail { display: grid; align-content: start; gap: 2px; padding: 10px 8px; background: var(--fg); color: var(--paper-2); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; }
.cr-bo__rail i { font-style: normal; padding: 6px 7px; border-radius: 3px; }
.cr-bo__rail i.is-on { background: var(--primary); color: var(--primary-fg); }
.cr-bo__main { min-inline-size: 0; display: grid; align-content: start; }
.cr-bo__title { padding: 9px 14px; font-weight: 700; font-size: 13px; background: var(--paper-3); border-block-end: 1.5px solid var(--fg); }
.cr-bo__tools { display: flex; align-items: center; gap: 14px; padding: 8px 14px; font-size: 11.5px; color: var(--accent); border-block-end: 1px solid var(--line); background: var(--paper-3); }
.cr-bo__tools b { color: var(--fg); border-block-end: 2px solid var(--primary); padding-block-end: 1px; }
.cr-bo__meta { margin-inline-start: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; }
.cr-bo__grid { inline-size: 100%; border-collapse: collapse; background: var(--paper-3); font-size: 12px; }
.cr-bo__grid th { text-align: start; padding: 7px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border-block-end: 1px solid var(--line-strong); background: var(--paper-2); }
.cr-bo__grid th.cr-num, .cr-bo__grid td.cr-num { text-align: end; }
.cr-bo__grid td { padding: 8px 12px; border-block-end: 1px solid var(--line); vertical-align: top; }
.cr-bo__grid td small { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); margin-block-start: 2px; }
.cr-bo__grid td i { font-style: normal; color: var(--accent); font-size: 11px; }
.cr-bo__grid td.is-low { color: var(--accent-ink); font-weight: 700; }
.cr-bo__pill { display: inline-block; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 6px; font-size: 9.5px; text-transform: none; letter-spacing: 0; }
.cr-bo__hint { margin: 0; padding: 8px 14px; font-size: 11px; color: var(--accent); background: var(--paper-3); }
.cr-bo__panel { margin: 12px; border: 1.5px solid var(--fg); border-radius: 6px; background: var(--paper-3); overflow: hidden; }
.cr-bo__panelhead { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 11.5px; color: var(--accent); border-block-end: 1px solid var(--line); background: var(--paper-2); }
.cr-bo__panelhead b { color: var(--fg); }
.cr-bo__panelhead--sub { border-block-end: 0; border-block-start: 1px solid var(--line); }
.cr-bo__search { margin-inline-start: auto; border: 1px solid var(--line-strong); border-radius: 4px; padding: 3px 8px; font-size: 10.5px; background: var(--paper-3); }
.cr-bo__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.cr-bo__tile { position: relative; display: grid; gap: 4px; border: 1.5px solid var(--line-strong); border-radius: 6px; overflow: hidden; padding-block-end: 8px; font-size: 11.5px; }
.cr-bo__tile.is-current { border-color: var(--fg); box-shadow: 0 0 0 2px var(--primary); }
.cr-bo__tile b, .cr-bo__tile small, .cr-bo__tile em { padding-inline: 8px; }
.cr-bo__tile small { font-size: 10.5px; line-height: 1.3; color: var(--accent); }
.cr-bo__tile em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.cr-bo__preview { display: block; aspect-ratio: 4 / 3; background: var(--paper-2); border-block-end: 1px solid var(--line); }
.cr-bo__actions { display: flex; gap: 8px; padding: 10px 12px; border-block-start: 1px solid var(--line); }
.cr-bo__btn { border: 1.5px solid var(--fg); border-radius: 4px; padding: 5px 10px; font-size: 11px; font-weight: 700; }
.cr-bo__btn.is-primary { background: var(--fg); color: var(--bg); }
.cr-bo__form { display: grid; }
.cr-bo__field { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 12px; border-block-end: 1px solid var(--line); font-size: 11.5px; }
.cr-bo__field label { color: var(--accent); }
.cr-bo__field > span { min-block-size: 24px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 8px; background: var(--paper-3); }
.cr-bo__field.is-toggle > span { border: 0; padding: 0; justify-content: start; }
.cr-bo__field.is-select > span i { font-style: normal; color: var(--accent); }
.cr-bo__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.cr-bo__stats > div { display: grid; gap: 2px; border: 1.5px solid var(--fg); border-radius: 6px; padding: 10px 12px; background: var(--paper-3); }
.cr-bo__stats small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.cr-bo__stats b { font-family: var(--font-heading); font-size: 24px; line-height: 1; }
.cr-bo__stats span { font-size: 10.5px; color: var(--accent); }
.cr-bo__grid--ledger { border-block-start: 1px solid var(--line); }

/* The theme tiles' previews: the same token-drawn storefront as the spines, flush inside the tile. */
.cr-bo__preview .cr-tm { border: 0; border-radius: 0; }

/* The POS: the dark register strip, the key set beside the itemised bill. */
.cr-pos2__register { display: flex; align-items: baseline; gap: 14px; padding: 10px 14px; background: var(--fg); color: var(--bg); font-size: 11px; }
.cr-pos2__register strong { font-family: var(--font-mono); font-size: 22px; letter-spacing: -0.02em; }
.cr-pos2__disc { color: var(--live); margin-inline-start: auto; }
.cr-pos2__body { display: grid; grid-template-columns: 2fr 3fr; }
.cr-pos2__keys { padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--paper-2); border-inline-end: 1.5px solid var(--fg); align-content: start; }
.cr-pos2__keys i { aspect-ratio: 1.6; border: 1.5px solid var(--fg); border-radius: 4px; background: var(--paper-3); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; text-align: center; padding: 4px; }
.cr-pos2__keys i.is-hold { background: var(--paper-2); border-style: dashed; }
.cr-pos2__keys i.is-charge { background: var(--primary); color: var(--primary-fg); }
.cr-pos2__bill { background: var(--paper-3); font-size: 11.5px; }
.cr-pos2__head, .cr-pos2__row, .cr-pos2__foot { display: grid; grid-template-columns: minmax(0, 1fr) 32px 58px 62px; gap: 8px; padding: 7px 10px; border-block-end: 1px solid var(--line); align-items: center; }
.cr-pos2__head { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--paper-2); }
.cr-pos2__row span:not(:first-child), .cr-pos2__head span:not(:first-child), .cr-pos2__foot span:last-child { text-align: end; font-family: var(--font-mono); }
.cr-pos2__row small { display: block; font-size: 10px; color: var(--accent); }
.cr-pos2__row.is-low { box-shadow: inset calc(3px * var(--shadow-x)) 0 0 var(--primary); }
.cr-pos2__foot { grid-template-columns: minmax(0, 1fr) auto; font-weight: 700; border-block-end: 0; }

/* The home's three spines: a screen above its facts, three abreast. */
.cr-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); border-block-start: 1px solid var(--line-strong); padding-block-start: clamp(32px, 4vw, 56px); }
.cr-trio__item { display: grid; gap: 22px; align-content: start; }
.cr-trio__text { display: grid; gap: 12px; }
.cr-trio__text h3 { margin: 0; font-size: var(--step-2); }
.cr-trio__text ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.cr-trio__text li { position: relative; padding-inline-start: 20px; }
.cr-trio__text li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; inline-size: 10px; block-size: 2px; background: var(--primary); }
.cr-trio__folio { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 1.5em; -webkit-text-stroke: 1px var(--brand-lilac); color: transparent; margin-inline-end: 4px; }
.cr-trio__more { font-weight: 700; text-decoration: none; border-block-end: 2px solid var(--primary); justify-self: start; }
.cr-trio__more:hover { background: var(--primary); color: var(--primary-fg); }
.cr-trio .cr-bo__rail, .cr-trio .cr-bo__search { display: none; }
.cr-trio .cr-bo__frame { grid-template-columns: minmax(0, 1fr); }
.cr-trio .cr-bo__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }

@media (max-width: 1100px) {
    .cr-trio { grid-template-columns: 1fr; }
    .cr-trio__item { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

/* The trio's cards are a third of the page wide, so the stock grid drops its third location column there at every width. */
.cr-trio .cr-hide-m, .cr-trio .cr-bo__pill { display: none; }
.cr-trio .cr-bo__grid th, .cr-trio .cr-bo__grid td { padding-inline: 8px; }

/* A tablet stacks each spine: the screen above its facts. */
@media (max-width: 900px) {
    .cr-trio__item { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .cr-trio__item { grid-template-columns: 1fr; }
    .cr-bo__frame { grid-template-columns: minmax(0, 1fr); }
    .cr-bo__rail { display: none; }
    .cr-bo__field { grid-template-columns: 110px minmax(0, 1fr); }
    .cr-bo__stats { grid-template-columns: 1fr; }
    .cr-pos2__body { grid-template-columns: 1fr; }
    .cr-pos2__keys { border-inline-end: 0; border-block-end: 1.5px solid var(--fg); grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cr-pos2__head, .cr-pos2__row { grid-template-columns: minmax(0, 1fr) 28px 52px 56px; }
}

/* Phone: the grids keep their column heads whole, the pill and the hidden columns go, the register strip wraps on its own terms. */
.cr-bo__grid thead { background: var(--paper-2); }
.cr-bo__grid th { white-space: nowrap; }
@media (max-width: 720px) {
    .cr-bo__grid { font-size: 11px; }
    .cr-bo__grid th, .cr-bo__grid td { padding-inline: 8px; }
    .cr-bo__grid th { font-size: 9px; letter-spacing: 0.03em; }
    .cr-bo__pill { display: none; }
    .cr-pos2__register { flex-wrap: wrap; gap: 4px 14px; }
    .cr-pos2__register strong { inline-size: 100%; order: -1; }
    .cr-pos2__disc { margin-inline-start: 0; }
}

/* The footer's brand column: the same lockup as the masthead's, a little larger, the sign-off under a short periwinkle rule. */
.cr-footer__logo { margin: 0 0 14px; }
.cr-footer__logo img { display: block; block-size: 56px; inline-size: auto; }
.cr-footer__signoff { padding-block-start: 10px; border-block-start: 2px solid var(--brand-lilac); color: var(--fg); }

/* --- the guide, the legal drafts, the story and the ways to reach us ------- */

/* The checklist of the guide: a folio, the point and its reason, and how the platform covers it, on one ruled row each. */
.cr-checks { margin: 0; padding: 0; list-style: none; border-block-start: 1.5px solid var(--fg); }
.cr-check { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(20px, 3vw, 40px); padding-block: 26px 30px; border-block-end: 1px solid var(--line-strong); }
.cr-check__n { color: var(--primary); font-size: var(--step-1); line-height: 1.1; padding-block-start: 4px; }
.cr-check__text h3 { font-size: var(--step-2); line-height: 1.1; margin: 0 0 10px; text-wrap: balance; }
.cr-check__why { margin: 0; color: var(--accent); }
.cr-check__how { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; border: 1.5px solid var(--fg); border-radius: var(--radius-card); background: var(--paper-3); box-shadow: var(--shadow-hard-sm); }
.cr-check__how .cr-mono { color: var(--primary); }
.cr-check__how p { margin: 0; }

/* The comparison: a ruled table, the point as the row head, one column per platform; the citations are small mono numbers. */
.cr-compare { border: 1.5px solid var(--fg); border-radius: var(--radius-card); background: var(--paper-3); box-shadow: var(--shadow-hard-sm); overflow: hidden; }
.cr-compare table { inline-size: 100%; border-collapse: collapse; }
.cr-compare th, .cr-compare td { padding: 14px 16px; vertical-align: top; text-align: start; border-block-end: 1px solid var(--line); font-size: var(--step--1); line-height: 1.45; }
.cr-compare thead th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--paper-2); border-block-end: 1.5px solid var(--fg); }
.cr-compare tbody th { font-family: var(--font-body); font-weight: 700; inline-size: 24%; }
.cr-compare tbody th .cr-mono { color: var(--primary); margin-inline-end: 6px; }
.cr-compare tbody tr:last-child th, .cr-compare tbody tr:last-child td { border-block-end: 0; }
.cr-compare__na { color: var(--accent); }
/* The points the table leaves out (nothing read on any of the three platforms' pages), named in one line under it. */
.cr-compare__rest { margin: 14px 0 0; font-size: var(--step--1); color: var(--accent); }
.cr-compare__rest .cr-mono { color: var(--primary); }
.cr-cite { display: inline-block; min-inline-size: 24px; min-block-size: 24px; padding: 4px; margin-block: -6px; margin-inline: -7px; text-align: center; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1; color: var(--primary); text-decoration: none; }
.cr-cite-tail { white-space: nowrap; }
.cr-cite + .cr-cite { margin-inline-start: -1px; }
.cr-cite + .cr-cite::before { content: ","; margin-inline-end: 2px; }
.cr-sources__head { margin-block-start: clamp(24px, 3vw, 36px); color: var(--primary); }
.cr-sources { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--step--1); color: var(--accent); }
.cr-sources .cr-mono { color: var(--primary); margin-inline-end: 6px; }
.cr-sources a { color: var(--fg); }

/* A legal page: numbered articles, the folio in the margin, the text held to a reading measure. */
.cr-legal { display: grid; gap: 0; border-block-start: 1.5px solid var(--fg); }
.cr-article { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px clamp(20px, 3vw, 40px); padding-block: 26px 30px; border-block-end: 1px solid var(--line); }
.cr-article:last-child { border-block-end: 0; }
.cr-article__folio { color: var(--primary); font-size: var(--step-1); line-height: 1.1; padding-block-start: 3px; }
.cr-article__body { max-inline-size: 68ch; }
.cr-article__body h3 { font-size: var(--step-2); line-height: 1.1; margin: 0 0 12px; text-wrap: balance; }
.cr-article__body p { margin: 0 0 12px; }
.cr-article__body p:last-child { margin-block-end: 0; }
.cr-article__body .cr-spec { margin-block-start: 8px; max-inline-size: none; }


@media (max-width: 900px) {
    .cr-check { grid-template-columns: 44px minmax(0, 1fr); }
    .cr-check__how { grid-column: 2; }
    /* Each platform's answer is a labelled line under the point. */
    .cr-compare thead { display: none; }
    .cr-compare tr, .cr-compare th, .cr-compare td { display: block; inline-size: auto; }
    .cr-compare tbody th { inline-size: auto; border-block-end: 0; padding-block-end: 4px; font-size: var(--step-0); }
    .cr-compare td { border-block-end: 0; padding-block: 6px; }
    .cr-compare td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); margin-block-end: 2px; }
    /* A platform with nothing read for this point is left off the stacked row; the lede says a missing platform means not read. */
    .cr-compare td:has(> .cr-compare__na:only-child) { display: none; }
    .cr-compare tr { border-block-end: 1px solid var(--line); padding-block-end: 10px; }
    .cr-compare tbody tr:last-child { border-block-end: 0; }
}
@media (max-width: 560px) {
    .cr-check, .cr-article { grid-template-columns: 1fr; gap: 10px; }
    .cr-check__how { grid-column: 1; }
}

/* ---------- language switch ------------------------------------------- */

/* The edition's languages, each by its own name, as a mono label pair: the current one filled in ink, the other a link. The
   same markup sits in the header, the drawer and the footer's bottom line. */
.header__lang,
.footer__lang { display: inline-flex; align-items: center; border: 2px solid var(--fg); }
.header__lang-item,
.footer__lang a,
.footer__lang .is-current {
    display: inline-flex;
    align-items: center;
    min-block-size: 36px;
    padding-inline: 10px;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: var(--label-tracking);
    color: var(--fg);
    text-decoration: none;
    transition: background-color 0.18s, color 0.18s;
}
.header__lang-item.is-current,
.footer__bottom .footer__lang .is-current { background: var(--scheme-text, var(--fg)); color: var(--scheme-background, var(--bg)); }
.footer__bottom .footer__lang a { color: var(--fg); }
a.header__lang-item:hover,
.footer__bottom .footer__lang a:hover { background: var(--primary); color: var(--primary-fg); text-decoration: none; }
.footer__lang { margin-inline-start: auto; }
.footer__lang .is-current,
.footer__lang a { min-block-size: 32px; }
.csf-mobile__lang { display: flex; gap: 8px; margin: 0; padding: 16px; list-style: none; border-block-start: 1px solid var(--line); }
.csf-mobile__lang .csf-mobile__item { display: inline-flex; }
.csf-mobile__lang a,
.csf-mobile__lang span {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    padding-inline: 12px;
    border: 2px solid var(--fg);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--label-tracking);
    color: var(--fg);
    text-decoration: none;
}
.csf-mobile__lang .is-current > span { background: var(--fg); color: var(--bg); }
@media (max-width: 767px) {
    .header__lang { display: none; }
}

/* The drawer's language row keeps the drawer's 16px inset, and the logo lockup closes the drawer at its foot. */
[data-widget="mobileMenu"] .csf-mobile__lang { padding: 16px; }
dialog[data-widget="mobileMenu"] { display: flex; flex-direction: column; }
dialog[data-widget="mobileMenu"]:not([open]) { display: none; }
dialog[data-widget="mobileMenu"]::after {
    content: "";
    display: block;
    flex: none;
    block-size: 40px;
    margin: auto 16px 24px;
    background: url("../images/logo.svg") no-repeat;
    background-position: 0 50%;
    background-size: contain;
}
dialog[data-widget="mobileMenu"] > ul:first-of-type { flex: none; }

/* Below the menu-bar breakpoint the call to action stays in the masthead row: the nav shows that one entry, as a small button at the
   inline end, so the phone reaches it in one tap. */
@media (max-width: 1023px) {
    .header:not(.header--drawer) .header__inner { gap: 1rem; }
    .header:not(.header--drawer) .header__nav { display: flex; margin-inline-start: auto; }
    .header:not(.header--drawer) .header__nav .csf-menu__item:not(:has(> a[data-mfe~="hl-outline"])) { display: none; }
    .header:not(.header--drawer) .header__nav .csf-menu__item > a[data-mfe~="hl-outline"] { min-block-size: 36px; padding: 0 0.8rem; font-size: var(--step--1); }
}

/* The pricing block's badge: Hebrew glyphs fall out of the mono stack, so the body face follows it, at a size a phone can read. */
.block-pricing-plans .plan-badge { font-family: var(--font-mono), var(--font-body); font-size: 0.75rem; }

/* Print: paper everywhere, the folded answers open, the chrome that only works on a screen gone, and the addresses of the links a
   reader cannot click printed after them. */
@media print {
    :root { --bg: #fff; --fg: #000; --paper-2: #fff; --paper-3: #fff; --line: #999; --line-strong: #000; --accent: #333; }
    [class*="color-scheme-"], .section--bleed, .footer, .cr-card, .cr-receipt { background: #fff !important; color: #000 !important; box-shadow: none !important; }
    [class*="color-scheme-"] { --bg: #fff; --fg: #000; --scheme-background: #fff; --scheme-text: #000; }
    .cr-display, .cr-accent, a { color: #000 !important; }
    .cr-hero__title .cr-accent::after { display: none; }
    #crf-a11y, .header__burger, .header__lang, .footer__lang, .csf-mobile__lang, .cr-actions, .button, [data-widget="announcementBar"] .csf-announcement__controls, dialog { display: none !important; }
    .header { position: static; border-block-end: 1px solid #000; }
    .header__nav { display: none; }
    .faq-item { break-inside: avoid; }
    .faq-item summary::after, .faq-item summary::before { display: none; }
    .cr-chapter, .cr-numbers__item, .cr-step, .cr-compare tr { break-inside: avoid; }
    .cr-links a[href^="http"]::after, .cr-sources a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--font-mono); font-size: 0.7rem; }
    .cr-hero__visual { display: none; }
    .cr-hero__note { position: static; text-align: start; }
}