/* EPDM Shop: v1's foundation (internal/storefront/templates/epdm-shop/theme.css
   and the Tailwind values its templates use) and its layouts, written without
   Tailwind. Folie overrides the brand tokens only, in its block below
   (body.theme-folie-iaz), on the same file: one stylesheet, one request.
   The inventory with v1's file:line is S0's (lot O22). */
:root {
  /* Colours: v1's epdm-shop/theme.css:4-26. */
  --store-bg: #f8fafc; --store-fg: #1e293b; --store-muted: #475569; --store-soft: #f1f5f9;
  --store-accent: #2a6796; --shop-brand-dark: #1e4d70; --shop-brand-light: #3a7db0;
  --shop-cta-from: #166534; --shop-cta-to: #15803d;
  --shop-discount: #c2410c; --shop-promo-from: #065f46; --shop-promo-to: #047857; --shop-total: #1e293b;
  --shop-footer-from: #1e293b; --shop-footer-to: #0f172a;
  --border: #e2e8f0; --border-strong: #cbd5e1; --surface-raised: #f1f5f9;
  --field: #ffffff; --control-border: #cbd5e1;
  --accent-soft: #e0ecf5; --focus: #2a6796;
  --hero-ink: #ffffff; --hero-badge: #6ee7b7;
  /* States: the stock (v1's card.html:4-8), the error (checkout.html:156-157,
     price.html:32), the success and the warning (Tailwind's emerald and amber). */
  --stock-in: #10b981; --stock-in-pulse: #34d399; --stock-in-ink: #065f46;
  --stock-low: #f59e0b; --stock-low-pulse: #fbbf24; --stock-low-ink: #92400e;
  --stock-out: #94a3b8;
  --danger: #dc2626; --danger-ink: #b91c1c; --danger-line: #fca5a5; --danger-soft: #fef2f2;
  --success: #047857; --success-soft: #ecfdf5; --warning: #b45309; --warning-soft: #fffbeb;
  /* Type: v1's system stack (--admin-font, theme.css:28), Tailwind's scale. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-micro: .625rem; --text-2xs: .6875rem; --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625;
  --tracking-wide: .025em; --tracking-wider: .05em;
  /* Radii, shadows, spacing: Tailwind's, as v1 uses them. */
  --radius-sm: .375rem; --radius: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 999px;
  --radius-control: .5rem; --store-image-radius: .75rem;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --container: 80rem;
}
/* The tokens made of other tokens live on the body, where Folie overrides its
   brand: on :root they would keep EPDM's colours. */
body.shop {
  --hero-from: color-mix(in srgb, var(--shop-brand-dark) 50%, black);
  --shadow-primary: 0 4px 14px -3px color-mix(in srgb, var(--store-accent) 40%, transparent);
  --shadow-cta: 0 6px 20px -4px color-mix(in srgb, var(--shop-cta-to) 45%, transparent);
}
* { box-sizing: border-box; }
body.shop { margin: 0; font: var(--text-base)/var(--leading-normal) var(--font-sans); color: var(--store-fg); background: var(--store-bg); -webkit-font-smoothing: antialiased; }
a { color: var(--store-accent); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-wrap { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }

/* The base components (S0): the buttons, the pills, the stock, the fields,
   the links and the icons, from v1's templates. A class here without a
   consumer in the templates is shown on S0's style page until a section
   takes it. */
/* Buttons: primary (v1's "Vezi detalii", card.html:29), CTA (price.html:54,
   checkout.html:115), secondary (price.html:42), icon (header.html:33). */
.shop-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 3rem; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-lg); font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-tight); color: #fff; text-decoration: none; cursor: pointer; background: linear-gradient(135deg, var(--shop-brand-dark), var(--store-accent)); box-shadow: var(--shadow-primary); transition: filter .2s, transform .2s; }
.shop-button:hover { filter: brightness(.92); }
.shop-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-button:active { transform: scale(.98); }
.shop-button:disabled, .shop-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
.shop-button svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.shop-button-cta, .shop-buy-submit, .shop-cart-checkout, .shop-checkout-place { background: linear-gradient(135deg, var(--shop-cta-from), var(--shop-cta-to)); box-shadow: var(--shadow-cta); }
.shop-button-cta:focus-visible, .shop-buy-submit:focus-visible, .shop-cart-checkout:focus-visible, .shop-checkout-place:focus-visible { outline-color: var(--shop-cta-to); }
.shop-button-secondary { color: var(--store-fg); background: #fff; border: 1px solid var(--border); box-shadow: none; }
.shop-button-secondary:hover { filter: none; border-color: color-mix(in srgb, var(--store-accent) 40%, transparent); background: color-mix(in srgb, var(--store-accent) 5%, #fff); color: var(--store-accent); }
.shop-button-sm { min-height: 2.5rem; padding: 0 var(--space-3); border-radius: var(--radius); font-size: var(--text-xs); }
.shop-button-lg { min-height: 3.5rem; padding: 0 var(--space-6); font-size: var(--text-base); }
.shop-button-caps { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.shop-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #f8fafc; color: #64748b; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.shop-icon-button:hover { border-color: color-mix(in srgb, var(--store-accent) 30%, transparent); background: color-mix(in srgb, var(--store-accent) 5%, #fff); color: var(--store-accent); }
.shop-icon-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-icon-button:disabled { opacity: .4; cursor: not-allowed; }
/* Pills: "N variante" (card.html:12), the discount (card.html:11), "nou"
   (none in v1: the promo tokens, theme.css:14-15). */
.shop-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .625rem; border: 1px solid transparent; border-radius: var(--radius-full); font-size: var(--text-micro); font-weight: 600; line-height: 1; white-space: nowrap; }
.shop-pill svg { width: .875rem; height: .875rem; flex-shrink: 0; }
.shop-pill-variants { border-color: #f1f5f9; background: rgb(255 255 255 / .95); color: #334155; box-shadow: var(--shadow-sm); }
.shop-pill-variants svg { color: var(--store-accent); }
.shop-pill-discount { border-radius: 0 var(--radius-full) var(--radius-full) 0; padding: .25rem .875rem .25rem .625rem; background: var(--shop-discount); color: #fff; font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-wide); box-shadow: var(--shadow-md); }
.shop-pill-new { background: linear-gradient(135deg, var(--shop-promo-from), var(--shop-promo-to)); color: #fff; text-transform: uppercase; letter-spacing: var(--tracking-wider); }
/* The stock: a dot that pulses (v1's shop-ping, theme.css:86-88), its label. */
.shop-stock { display: inline-flex; align-items: center; gap: .375rem; font-size: .5625rem; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--store-muted); }
.shop-stock-dot { position: relative; display: inline-block; width: .75rem; height: .75rem; flex-shrink: 0; border-radius: 50%; background: var(--stock-out); box-shadow: var(--shadow-sm); }
.shop-stock[data-stock="in"] { color: var(--stock-in-ink); }
.shop-stock[data-stock="in"] .shop-stock-dot { background: var(--stock-in); }
.shop-stock[data-stock="low"] { color: var(--stock-low-ink); }
.shop-stock[data-stock="low"] .shop-stock-dot { background: var(--stock-low); }
.shop-stock[data-stock="out"] { font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .shop-stock[data-stock="in"] .shop-stock-dot::after, .shop-stock[data-stock="low"] .shop-stock-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--stock-in-pulse); opacity: .75; animation: shop-ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
  .shop-stock[data-stock="low"] .shop-stock-dot::after { background: var(--stock-low-pulse); }
}
@keyframes shop-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
/* Fields: v1's shop-buy-input-class and its label (checkout.html:156-157). */
.shop-field { display: grid; gap: .375rem; }
.shop-label { font-size: var(--text-sm); font-weight: 500; color: #334155; }
.shop-field:has(:required) > .shop-label::after { content: "*"; margin-left: .125rem; color: var(--danger); }
.shop-input { width: 100%; min-width: 0; min-height: 3rem; padding: .625rem 1rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); color: var(--store-fg); font: inherit; transition: border-color .15s; }
.shop-input::placeholder { color: #94a3b8; opacity: 1; }
.shop-input:hover:not(:disabled) { border-color: #94a3b8; }
.shop-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--store-accent); }
.shop-input[aria-invalid="true"] { border-color: var(--danger-line); background: var(--danger-soft); }
.shop-input:disabled { opacity: .6; cursor: not-allowed; }
.shop-input:read-only:not(select) { background: var(--store-soft); }
.shop-field-note { margin: 0; font-size: var(--text-xs); color: var(--store-muted); }
.shop-field-error { margin: 0; font-size: var(--text-xs); font-weight: 500; color: var(--danger-ink); }
/* Links in a text: the accent, underlined (v1's render.go:68). */
.shop-link, .shop-page .rich-text a { color: var(--store-accent); text-decoration: underline; text-underline-offset: 2px; }
.shop-link:hover, .shop-page .rich-text a:hover { color: var(--shop-brand-dark); }
/* Icons: the icon partial's inline SVG, 1.25rem unless its place sizes it. */
.shop-icon { display: inline-block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) {
  .shop-button, .shop-icon-button, .shop-input { transition: none; }
  .shop-button:active { transform: none; }
}

/* O22 I1: the header and the phone's navigation (S1-B, compact and
   commercial; .local/runs/2026-11-01-design-storefront/design/S1/B). v1's
   structure (epdm-shop/header.html:12-77): a white bar with the logo, the
   contact, the account and the cart with its total; a blue bar with the
   menu's groups and Contact; on a phone one row, a fixed bottom bar and a
   full-screen drawer. Denser than v1, the cart's total always shown
   ("0,00 lei"), the account and the e-mail in the drawer, targets of 44 px
   or more wherever a finger lands. The bar and the blue bar follow the
   page's width (.shop-wrap: 80rem, 1rem at the sides). No JavaScript is
   needed: the drawer and the groups are <details>, a desktop group also
   shows on hover; epdm-shop-header.js adds Escape, the drawer's top close
   button and the closing of a panel by a click outside it. */
.shop-logo { display: block; height: 2.5rem; width: auto; }

/* The white bar. A phone: one row of 56 px that scrolls away (the bottom
   bar stays); from 64rem the bar is sticky and the blue bar scrolls away. */
.shop-header { position: static; z-index: 30; background: #fff; border-bottom: 1px solid var(--border); }
.shop-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; max-width: var(--container); min-height: 3.5rem; margin: 0 auto; padding: 0 1rem; }
.shop-brand { flex-shrink: 0; display: flex; align-items: center; margin-right: auto; color: var(--store-fg); text-decoration: none; font-weight: 700; font-size: var(--text-xl); }
/* A name without a logo yields to the actions, including in the drawer. */
.shop-brand:has(> .shop-name) { flex-shrink: 1; min-width: 0; }
.shop-brand > .shop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-header .shop-logo { height: 2.25rem; }
.shop-brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (min-width: 40rem) {
  .shop-bar { gap: 1rem; min-height: 4rem; }
  .shop-header .shop-logo { height: 2.75rem; }
}
@media (min-width: 64rem) {
  .shop-header { position: sticky; top: 0; }
  .shop-bar { gap: 1.5rem; min-height: 4.5rem; }
  .shop-header .shop-logo { height: 3rem; }
}

/* The search (S1-B, v1's header.html:21-28): the field and the button in
   the bar from 40rem; on a phone a row over the page's top that appears
   while the field has the focus: the magnifier in the bar and "Caută" in
   the bottom bar are labels of the field, so they open it without
   JavaScript. The suggestions' panel hangs under the field; the fragment
   draws its chrome (I-search). */
.shop-search { position: relative; display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; max-width: 46rem; height: 2.75rem; margin: 0 auto; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.shop-search:focus-within { border-color: var(--store-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--store-accent) 18%, transparent); }
.shop-search-input { flex: 1 1 auto; min-width: 0; padding: 0 1rem; border: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: transparent; color: var(--store-fg); font: inherit; font-size: var(--text-base); }
.shop-search-input::placeholder { color: #64748b; opacity: 1; }
.shop-search-input:focus { outline: none; }
.shop-search-input::-webkit-search-cancel-button { cursor: pointer; }
.shop-search-submit { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; margin: -1px -1px -1px 0; border: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: var(--store-accent); color: #fff; cursor: pointer; transition: background-color .15s; }
.shop-search-submit:hover { background: var(--shop-brand-dark); }
.shop-search-submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-search-submit .shop-icon { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.shop-search-panel { position: absolute; z-index: 70; top: calc(100% + .5rem); left: 0; right: 0; max-height: min(70vh, 32rem); overflow-y: auto; border-radius: var(--radius-lg); }
.shop-search-panel:empty { display: none; }
.shop-search-open { display: none; }
@media (min-width: 64rem) { .shop-search-input { font-size: var(--text-sm); } }
@media (max-width: 39.99rem) {
  .shop-search { position: fixed; z-index: 60; inset: 0 0 auto; max-width: none; height: auto; margin: 0; padding: .5rem .75rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-lg); transform: translateY(calc(-100% - 2rem)); transition: transform .2s ease-out; }
  .shop-search:focus-within { box-shadow: var(--shadow-lg); transform: none; }
  .shop-search-input { height: 2.75rem; border: 1px solid var(--store-accent); border-right: 0; }
  .shop-search-submit { margin: 0; }
  .shop-search-panel { top: calc(100% + .25rem); left: .75rem; right: .75rem; }
  .shop-search-open { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); color: #475569; cursor: pointer; }
  .shop-search-open:hover { color: var(--store-accent); background: var(--store-soft); }
  .shop-search-open .shop-icon { width: 1.375rem; height: 1.375rem; }
}
@media (prefers-reduced-motion: reduce) { .shop-search, .shop-search-submit { transition: none; } }

/* The actions at the bar's end: the phone's search, the account, the cart. */
.shop-header-actions { display: flex; flex-shrink: 0; align-items: center; gap: .25rem; margin-left: auto; }
@media (min-width: 40rem) { .shop-header-actions { gap: .75rem; } }

/* The account: S0's icon button, 44 px; on a phone it is in the drawer. */
.shop-header-account { display: none; width: 2.75rem; height: 2.75rem; }
.shop-header-account .shop-icon { width: 1.25rem; height: 1.25rem; }
@media (min-width: 40rem) { .shop-header-account { display: inline-flex; } }

/* The cart: v1's tile with the count, then the total, shown at zero too
   (v1's cart-summary, header.html:105), as the server writes it. */
.shop-header-cart { flex-shrink: 0; }
.shop-header-cart-link { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: .5rem; min-height: 2.75rem; border-radius: var(--radius-lg); color: var(--store-fg); text-decoration: none; }
.shop-header-cart-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-header-cart-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid color-mix(in srgb, var(--store-accent) 20%, transparent); border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--store-accent); transition: background-color .15s, color .15s; }
.shop-header-cart-icon .shop-icon { width: 1.375rem; height: 1.375rem; }
.shop-header-cart-link:hover .shop-header-cart-icon { background: var(--store-accent); color: #fff; }
.shop-header-cart-count { position: absolute; top: -.4375rem; right: -.4375rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3125rem; border: 2px solid #fff; border-radius: var(--radius-full); background: var(--shop-cta-to); color: #fff; font-size: var(--text-2xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.shop-header-cart-text { display: grid; line-height: 1.15; }
.shop-header-cart-label { display: none; font-size: var(--text-2xs); font-weight: 500; color: var(--store-muted); }
.shop-header-cart-total { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: #0f172a; }
/* A closed sale shows its notice, a sentence, in place of the cart: it
   wraps, and the bar puts it under the logo where the row has no room. */
.shop-bar:has([data-closed]) { flex-wrap: wrap; padding-block: .5rem; }
.shop-header-actions:has([data-closed]), .shop-header-cart:has([data-closed]) { flex-shrink: 1; min-width: 0; }
.shop-header-cart-link[data-closed] { display: block; max-width: 22rem; padding: .375rem .75rem; border: 1px solid var(--border); color: var(--store-muted); font-size: var(--text-xs); line-height: 1.35; }
@media (min-width: 40rem) {
  .shop-header-cart-link { gap: .625rem; padding-right: .25rem; }
  .shop-header-cart-label { display: block; }
  .shop-header-cart-total { font-size: var(--text-base); }
}
/* The narrowest phones keep the logo and the icons; the total is in the cart. */
@media (max-width: 23.99rem) { .shop-header-cart-text { display: none; } }

/* The blue bar (from 64rem): v1's gradient (header.html:39), ending on the
   accent rather than brand-light, so that Contact, at its right end, keeps
   white text above 4.5:1 (6.0:1; on brand-light 4.4:1). Its first title
   lines up with the logo: the bar's 1rem less the item's .875rem. */
.shop-catbar { display: none; }
@media (min-width: 64rem) {
  .shop-catbar { position: relative; z-index: 20; display: block; background: linear-gradient(to right, var(--shop-brand-dark), var(--store-accent)); color: #fff; box-shadow: var(--shadow-md); }
  .shop-menu-desktop { max-width: var(--container); margin: 0 auto; padding: 0 .125rem; }
  .shop-menu-desktop > ul { display: flex; align-items: center; gap: .25rem; min-height: 2.75rem; margin: 0; padding: 0; list-style: none; }
  .shop-menu-desktop .shop-menu-item { position: relative; }
  .shop-menu-desktop .shop-menu-item > a, .shop-menu-desktop .shop-menu-item > span, .shop-menu-desktop .shop-menu-group > summary { display: flex; align-items: center; gap: .375rem; min-height: 2.25rem; padding: 0 .875rem; border-radius: var(--radius); color: rgb(255 255 255 / .92); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-decoration: none; list-style: none; cursor: pointer; transition: background-color .15s, color .15s; }
  .shop-menu-desktop .shop-menu-item > span { cursor: default; }
  .shop-menu-desktop .shop-menu-item.emphasis > a, .shop-menu-desktop .shop-menu-item.emphasis > .shop-menu-group > summary { font-weight: 700; }
  .shop-menu-desktop .shop-menu-group > summary::-webkit-details-marker { display: none; }
  .shop-menu-desktop .shop-menu-item > a:hover, .shop-menu-desktop .shop-menu-item:hover > .shop-menu-group > summary, .shop-menu-desktop .shop-menu-group[open] > summary { background: rgb(255 255 255 / .15); color: #fff; }
  .shop-menu-desktop .shop-menu-item > a:focus-visible, .shop-menu-desktop .shop-menu-group > summary:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .shop-menu-desktop .shop-icon { width: 1rem; height: 1rem; }
  .shop-menu-desktop .shop-menu-chevron { display: inline-flex; opacity: .85; transition: transform .2s; }
  .shop-menu-desktop .shop-menu-chevron .shop-icon { width: .875rem; height: .875rem; }
  .shop-menu-desktop .shop-menu-contact { margin-left: auto; }

  /* The panel: v1's (header.html:146-152), narrower and denser: a 3 px
     accent line, rows of 40 px, the dot turning into the accent. It shows
     on a hover and while its <details> is open: a click, a tap, or Enter
     and Space on the keyboard (WAI's disclosure pattern). It does not show
     on a mere focus: the links of a closed <details> are out of the Tab
     order, so a panel shown on focus would list links Tab cannot reach. */
  .shop-menu-desktop .shop-menu-group > ul { position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; display: grid; gap: .125rem; width: max-content; min-width: 16rem; max-width: 24rem; margin: 0; padding: .625rem .5rem .5rem; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 40px -5px color-mix(in srgb, var(--store-accent) 25%, transparent), 0 4px 15px -3px rgb(0 0 0 / .1); overflow: hidden; }
  .shop-menu-desktop .shop-menu-group > ul::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(to right, var(--store-accent), var(--shop-brand-light)); }
  /* The gap between the item and its panel still counts as the item. */
  .shop-menu-desktop .shop-menu-item::after { content: ""; position: absolute; inset: 100% 0 auto; height: .375rem; }
  .shop-menu-desktop .shop-menu-group > ul a { display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; padding: 0 .75rem; border-radius: var(--radius); color: var(--store-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
  .shop-menu-desktop .shop-menu-group > ul a::before { content: ""; width: .375rem; height: .375rem; flex-shrink: 0; border-radius: 50%; background: var(--border-strong); transition: background-color .15s; }
  .shop-menu-desktop .shop-menu-group > ul a:hover, .shop-menu-desktop .shop-menu-group > ul a:focus-visible { background: var(--accent-soft); color: var(--store-accent); outline: none; }
  .shop-menu-desktop .shop-menu-group > ul a:hover::before, .shop-menu-desktop .shop-menu-group > ul a:focus-visible::before { background: var(--store-accent); }
  .shop-menu-desktop .shop-menu-group[open] .shop-menu-chevron { transform: rotate(180deg); }
  /* No (hover: hover) condition: on a large touch screen a tap shows the
     panel (iOS gives the first tap to the hover) and a tap elsewhere hides it. */
  .shop-menu-desktop .shop-menu-item:hover .shop-menu-group:not([data-hover-dismissed])::details-content { content-visibility: visible; }
  .shop-menu-desktop .shop-menu-item:hover .shop-menu-group:not([data-hover-dismissed]) .shop-menu-chevron { transform: rotate(180deg); }
  /* A pinned (clicked) panel gives way to the one under the pointer. */
  .shop-menu-desktop > ul:has(> .shop-menu-item:hover) > .shop-menu-item:not(:hover) .shop-menu-group[open]::details-content { content-visibility: hidden; }
}

/* The bottom bar (below 64rem): Acasă, Meniu, the contact (Sună, else
   Scrie-ne, else Contact; the search's lot puts Caută here), Coș; equal
   targets of 56 px, v1's shadow (header.html:70). The page keeps its end
   above it. */
.shop-tabbar { display: none; }
@media (max-width: 63.99rem) {
  body.shop:has(.shop-tabbar) { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
  /* The browser scrolls a target the keyboard focuses above the bar, with
     .5rem for its focus ring (WCAG 2.4.11). */
  html:has(body.shop .shop-tabbar) { scroll-padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
  body.shop:has(.shop-tabbar) .marketing-consent { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .shop-tabbar { position: fixed; z-index: 50; inset: auto 0 0; display: flex; align-items: stretch; height: calc(3.5rem + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgb(0 0 0 / .08); }
}
.shop-tab { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem; min-width: 0; height: 100%; padding: 0 .25rem; color: #475569; font-size: var(--text-2xs); font-weight: 600; line-height: 1; text-decoration: none; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shop-tab::-webkit-details-marker { display: none; }
.shop-tab > span:not(.shop-tab-icon) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-tab .shop-icon { width: 1.375rem; height: 1.375rem; }
.shop-tab:hover { color: var(--store-accent); }
.shop-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--radius-lg); }
.shop-tab-icon { position: relative; display: inline-flex; }
.shop-tab-count { position: absolute; top: -.375rem; right: -.625rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .25rem; border: 2px solid #fff; border-radius: var(--radius-full); background: var(--shop-cta-to); color: #fff; font-size: var(--text-micro); font-weight: 700; line-height: 1; }
.shop-tab-count:empty { display: none; }

/* The drawer: the "Meniu" <details> of the bottom bar; open, its content
   covers the page down to the bar, whose "Meniu" becomes "Închide" (v1's
   #shop-menu, header.html:45-57, without the popover). */
.shop-drawer { flex: 1 1 0; min-width: 0; }
.shop-drawer > .shop-tab { width: 100%; }
.shop-drawer-label-close, .shop-drawer-icon-close { display: none; }
.shop-drawer[open] > .shop-tab { color: var(--store-accent); }
.shop-drawer[open] > .shop-tab::before { content: ""; position: absolute; top: -1px; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--store-accent); }
.shop-drawer[open] .shop-drawer-label-open, .shop-drawer[open] .shop-drawer-icon-open { display: none; }
.shop-drawer[open] .shop-drawer-label-close, .shop-drawer[open] .shop-drawer-icon-close { display: block; }
.shop-drawer-panel { position: fixed; inset: 0 0 calc(3.5rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 0 1rem 1.5rem; background: #fff; color: var(--store-fg); }
@media (max-width: 63.99rem) { body.shop:has(.shop-drawer[open]) { overflow: hidden; } }
.shop-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 4rem; margin: 0 -1rem; padding: 0 1rem; background: #fff; border-bottom: 1px solid var(--border); }
.shop-drawer-head .shop-logo { height: 2.25rem; }
.shop-drawer-close { width: 2.75rem; height: 2.75rem; border-color: transparent; background: transparent; }
.shop-drawer-close[hidden] { display: none; }
.shop-drawer .shop-menu > ul { margin: 0; padding: .5rem 0 0; list-style: none; }
.shop-drawer .shop-menu-item + .shop-menu-item { border-top: 1px solid var(--store-soft); }
.shop-drawer .shop-menu-item > a, .shop-drawer .shop-menu-item > span, .shop-drawer .shop-menu-group > summary { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; color: var(--store-fg); font-size: .9375rem; font-weight: 600; text-decoration: none; list-style: none; cursor: pointer; }
.shop-drawer .shop-menu-item.emphasis > a, .shop-drawer .shop-menu-item.emphasis > .shop-menu-group > summary { color: var(--store-accent); }
.shop-drawer .shop-menu-group > summary::-webkit-details-marker { display: none; }
.shop-drawer .shop-menu-title { flex: 1; min-width: 0; }
.shop-menu-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--store-accent); }
.shop-menu-icon .shop-icon { width: 1.125rem; height: 1.125rem; }
.shop-drawer .shop-menu-chevron { display: inline-flex; color: #64748b; transition: transform .2s; }
.shop-drawer .shop-menu-chevron .shop-icon { width: 1.125rem; height: 1.125rem; }
.shop-drawer .shop-menu-group[open] > summary { color: var(--store-accent); }
.shop-drawer .shop-menu-group[open] .shop-menu-chevron { transform: rotate(180deg); color: var(--store-accent); }
.shop-drawer .shop-menu-group > ul { display: grid; margin: 0 0 .5rem 3rem; padding: 0; list-style: none; border-left: 2px solid var(--accent-soft); }
.shop-drawer .shop-menu-group > ul a { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 .25rem 0 1rem; color: var(--store-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.shop-drawer .shop-menu-group > ul a:hover { color: var(--store-accent); }
.shop-drawer .shop-menu-go { display: inline-flex; margin-left: auto; color: var(--border-strong); }
.shop-drawer .shop-menu-go .shop-icon { width: 1rem; height: 1rem; }
.shop-drawer .shop-menu-contact { margin-top: .5rem; border-top: 1px solid var(--border); }
.shop-drawer .shop-menu-item > a:focus-visible, .shop-drawer .shop-menu-group > summary:focus-visible, .shop-drawer .shop-menu-group > ul a:focus-visible, .shop-drawer-extra a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius); }
.shop-drawer-extra { margin: 1rem 0 0; padding: .25rem .75rem; list-style: none; background: var(--store-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.shop-drawer-extra li + li { border-top: 1px solid var(--border); }
.shop-drawer-extra a { display: flex; align-items: center; gap: .75rem; min-height: 3rem; color: var(--store-fg); font-size: var(--text-sm); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.shop-drawer-extra .shop-menu-icon { width: 2rem; height: 2rem; background: #fff; }

/* The cart's dialog: v1's drawer from the right (header.html:93), full
   width on a phone as v1's (w-screen max-w-md); its body comes from /cart,
   with the existing server forms. showModal() puts it in the top layer; the z-index only
   serves a dialog opened without it. */
/* The cart drawer, as the owner approved it (v18, 04.11, then the design council's
   form, 05.11). The panel's frame is the header's (site-header.html), its content
   the fragment's (cart-drawer.html). The values are the theme's tokens, so Folie
   follows. --cd-ctl is the muted ink lightened to the 3:1 a control's edge needs;
   --cd-edge is the softer edge the owner asked for at rest: a control still reads
   by its label, its "Schimbă", its stepper and --cd-lift, and --cd-ctl comes back
   under the pointer.
   A phone is a width here: the drawer fills the screen under 36rem. */
.shop-cart-dialog { --cd-pad: .75rem; --cd-ctl: color-mix(in srgb, var(--store-muted) 68%, #fff); --cd-edge: color-mix(in srgb, var(--store-muted) 26%, #fff); --cd-lift: 0 1px 2px rgb(15 23 42 / .05); position: fixed; z-index: 70; inset: 0 0 0 auto; width: min(32rem, 100%); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: var(--shadow-xl); color: var(--store-fg); background: #fff; overflow: hidden; font-size: var(--text-sm); line-height: 1.4; font-variant-numeric: tabular-nums; }
.shop-cart-dialog[open] { display: flex; flex-direction: column; }
.shop-cart-dialog::backdrop { background: rgb(15 23 42 / .5); }
.shop-cart-dialog button { font-family: inherit; }
.shop-cart-dialog svg { flex: none; }
.shop-cart-dialog :is(a, button, input):focus-visible { position: relative; z-index: 2; outline: 2px solid var(--focus); outline-offset: 2px; border-radius: .375rem; }
.shop-cart-dialog-heading { position: relative; z-index: 4; display: flex; flex: none; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.5rem; margin: 0; padding: .375rem var(--cd-pad); border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px rgb(15 23 42 / .05); }
.shop-cart-dialog-heading > div { display: flex; align-items: baseline; gap: .375rem; min-width: 0; }
.shop-cart-dialog-heading h2 { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.shop-cart-dialog-heading [data-cart-count] { margin: 0; color: var(--store-muted); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.shop-cart-dialog-heading [data-cart-count]:empty { display: none; }
.shop-cart-dialog-heading button { display: inline-flex; flex: none; align-items: center; gap: .375rem; min-height: 2.75rem; margin-right: -.5rem; padding: 0 .5rem; border: 0; border-radius: var(--radius); background: none; color: var(--store-muted); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; }
.shop-cart-dialog-heading button:hover { background: var(--store-soft); color: var(--store-fg); }
.shop-cart-dialog-heading button .shop-icon { width: 1.125rem; height: 1.125rem; }
.shop-cart-dialog-status { flex: none; padding: .75rem var(--cd-pad); background: var(--store-soft); color: var(--store-muted); font-size: var(--text-sm); }
.shop-cart-dialog-status[hidden] { display: none; }
.shop-cart-dialog-status button { min-height: 2.75rem; margin-left: .5rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--store-accent); font: inherit; font-weight: 600; cursor: pointer; }
.shop-cart-dialog .shop-cart-dialog-status[data-state="loading"] { position: absolute; z-index: 5; top: 4rem; left: 50%; max-width: calc(100% - 2rem); padding: .375rem .875rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: #fff; box-shadow: var(--shadow-md); font-size: var(--text-xs); white-space: nowrap; transform: translateX(-50%); }
.shop-cart-dialog-body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; overflow-wrap: anywhere; }
.shop-cart-dialog-body[inert] { opacity: .5; }
.shop-cart-dialog-body > .cart-error { flex: none; margin: .5rem var(--cd-pad); }
.shop-cart-dialog-body > .cart-closed { flex: none; margin: .5rem var(--cd-pad); }
.shop-cart-dialog-body:has([data-refused]) > .cart-error { display: none; }
/* A change shows in its price: the note stays for assistive technology alone. */
.shop-cart-dialog .cart-notice { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); white-space: nowrap; }
/* What was just removed, and the way back. */
.shop-cart-dialog .cd-band, .cart-group-head .cd-band { display: flex; flex: none; align-items: center; gap: .625rem; min-height: 3.5rem; margin: 0; padding: .375rem var(--cd-pad); border: 0; border-bottom: 1px solid var(--border); background: var(--store-bg); font-size: .8125rem; line-height: 1.35; }
.cd-band-text { flex: 1; min-width: 0; margin: 0; }
.shop-cart-dialog .cd-band button { flex: none; min-height: 2.75rem; padding: 0 .875rem; text-decoration: none; border: 1px solid var(--cd-ctl); border-radius: var(--radius); background: #fff; color: var(--store-fg); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
/* The list, the only part that scrolls, with its bars over its edges. */
.cd-lw { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
.cd-lw::after { content: ""; position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: .5rem; background: linear-gradient(rgb(255 255 255 / 0), #fff); pointer-events: none; }
.cd-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: var(--store-soft); }
/* A control brought into view stops clear of the bars, which would cover it. */
.cd-list :is(a, button, input, .cd-line) { scroll-margin-block: 3.25rem; }
.shop-cart-dialog .shop-cart-lines { display: grid; gap: .75rem; margin: 0; padding: .75rem; list-style: none; }
.cd-bar { position: absolute; z-index: 3; right: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: .375rem; height: 2.25rem; padding: 0 var(--cd-pad); border: 0; background: var(--store-bg); color: var(--store-muted); font-size: .8125rem; font-weight: 600; cursor: pointer; }
/* The dialog clips what leaves it, so a bar's 44 px grow into the list alone. */
.cd-bar::after { content: ""; position: absolute; inset: 0; }
.cd-up::after { bottom: -.5625rem; }
.cd-down::after { top: -.5625rem; }
.cd-bar[hidden] { display: none; }
.cd-bar .shop-icon { width: .875rem; height: .875rem; }
.cd-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-up { top: 0; border-bottom: 1px solid var(--border); box-shadow: 0 6px 12px rgb(15 23 42 / .06); }
.cd-up .shop-icon { transform: rotate(180deg); }
.cd-down { bottom: 0; border-top: 1px solid var(--border); }
.cd-down::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: .5rem; background: linear-gradient(rgb(255 255 255 / 0), #fff); pointer-events: none; }
.cd-bar.is-err b { color: var(--danger-ink); font-weight: 600; }
/* A line: closed, the facts and its total; open, what changes it. */
/* A line is a card: the picture, and beside it one column with the name, a cut's
   facts on columns that keep their place from card to card, and the price, the
   totals on one edge. Open, the way to the product and the removal wait under the
   name, in the same place on every line. It holds its screen-reader texts: left to
   the list's frame, they would leave the list's clip and let the dialog's body scroll. */
.shop-cart-dialog .cd-line { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "tg tg" "th ti" "th lk" "me me" "fl fl" "pn pn" "ft ft"; align-content: start; align-items: start; gap: 0 .75rem; margin: 0; padding: 1rem 1rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: none; }
.shop-cart-dialog .cd-line:not(.is-open):has(.cd-ed) { cursor: pointer; }
.shop-cart-dialog .cd-line:not(.is-open):has(.cd-ed):hover { border-color: var(--border-strong); }
.shop-cart-dialog .cd-line.is-open { border-color: var(--border-strong); }
.shop-cart-dialog .cd-line.is-added, .shop-cart-dialog .cd-line.is-added:hover { background: var(--success-soft); }
.shop-cart-dialog .cd-line:not(.is-open):has(.cd-ed:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.shop-cart-dialog .cd-line:not(.is-open) .cd-ed:focus-visible { outline: none; }
.cd-tag { grid-area: tg; display: inline-flex; align-items: center; gap: .25rem; justify-self: start; margin-bottom: .5rem; color: var(--stock-in-ink); font-size: .78125rem; font-weight: 700; }
.cd-tag .shop-icon { width: 1rem; height: 1rem; }
.cd-th { grid-area: th; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: var(--radius); object-fit: cover; background: #fff; }
.cd-ph { display: grid; place-items: center; color: var(--stock-out); }
.shop-cart-dialog .cd-ti { grid-area: ti; margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; text-wrap: pretty; }
.shop-cart-dialog .cd-line:not(.is-open) .cd-ti { grid-row: 2 / span 2; align-self: center; }
.shop-cart-dialog .cd-pr { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.26; text-align: right; white-space: nowrap; }
.cd-me { grid-area: me; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: .75rem; margin: .875rem 0 0; line-height: 1.3; }
.cd-me dd { display: flex; align-items: center; gap: .375rem; min-width: 0; margin: 0; color: var(--store-fg); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.cd-me > div:nth-child(-n + 3) dd { font-weight: 600; }
.cd-me .shop-icon, .cd-fact .shop-icon { flex: none; width: 1rem; height: 1rem; color: var(--store-muted); }
.cd-flag { grid-area: fl; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; gap: 0 .75rem; margin: .75rem 0 0; font-size: .8125rem; }
.cd-at { grid-column: 2 / -1; align-self: baseline; min-width: 0; padding-left: 1.25rem; overflow: hidden; color: var(--store-muted); font-size: .8125rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cd-un { margin: 0; color: var(--store-muted); font-size: .8125rem; white-space: nowrap; }
.cd-un b { color: var(--store-fg); font-weight: 600; }
.cd-badge { display: inline-flex; align-items: center; gap: .25rem; color: var(--stock-low-ink); font-weight: 600; white-space: nowrap; }
.cd-badge .shop-icon { width: .875rem; height: .875rem; }
.cd-ed { position: relative; display: inline-flex; flex: none; align-items: center; gap: .1875rem; margin: 0 0 0 -.25rem; padding: 0 .25rem; border: 0; background: none; color: var(--store-accent); font-size: .8125rem; font-weight: 600; line-height: 18px; white-space: nowrap; cursor: pointer; }
.cd-ed::after { content: ""; position: absolute; inset: -13px -8px; }
.cd-ed .shop-icon { width: .875rem; height: .875rem; }
.cd-ed-done, .is-open .cd-ed-more { display: none; }
.is-open .cd-ed-done { display: inline; }
.is-open .cd-ed .shop-icon { transform: rotate(180deg); }
.shop-cart-dialog .cd-line.is-open :is(.cd-me, .cd-flag) { display: none; }
.shop-cart-dialog .cd-line:not(.is-open) .cd-c2 { display: none; }
/* Every card ends the same way: what opens it on the left, the sum on the right,
   and "Gata" takes "Modifică"'s place, so nothing moves from card to card, closed
   or open. A line with a problem says there what it waits for. */
.cd-ft { grid-area: ft; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.5rem; margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.cd-wait { color: var(--store-muted); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.cd-fr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 .625rem; min-width: 0; margin-left: auto; }
/* A line's facts on tiles of one height, whatever they hold: the name on top, the
   value under it, what changes it to the right over both rows, 44 px, so the values
   share one edge and a tile keeps its place when a button leaves. Two to a row; a
   tile alone takes the row. */
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .625rem; margin-top: .875rem; }
.cd-grid > .cd-tile, .cd-grid > .cd-menu { order: 1; }
.cd-grid > .cd-menu { order: 2; grid-column: 1 / -1; margin: 0; }
.shop-cart-dialog .cd-line .cd-ctl { display: contents; }
.shop-cart-dialog .cd-line .cd-ctl[hidden] { display: none; }
.cd-ctl > * { order: 3; }
.cd-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto 2rem; align-items: center; min-width: 0; margin: 0; padding: 0; border: 1px solid var(--cd-edge); border-radius: var(--radius); background: #fff; box-shadow: var(--cd-lift); color: var(--store-fg); font: inherit; text-align: left; }
.cd-tile:hover { border-color: var(--cd-ctl); }
.cd-tile.is-wide { grid-column: 1 / -1; }
.cd-tile.is-fixed { border-color: transparent; background: var(--store-soft); box-shadow: none; }
.cd-tile.is-err { border-color: color-mix(in srgb, var(--danger-ink) 55%, #fff); box-shadow: none; }
.cd-tile > .cd-lb { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; align-self: end; padding: .4375rem .75rem 0; line-height: 1.25; }
.cd-st > .cd-lb { grid-column: 1; grid-row: 1; }
.cd-v .shop-icon, .cd-tile label .shop-icon { flex: none; align-self: center; width: 1.0625rem; height: 1.0625rem; margin-right: .1875rem; color: var(--store-muted); }
.cd-v, .shop-cart-dialog .cd-line .cd-tile label { grid-column: 1; display: flex; align-items: baseline; justify-content: flex-start; gap: .1875rem; min-width: 0; padding-left: .75rem; font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.cd-tile:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.shop-cart-dialog .cd-tile input { width: auto; min-width: 1ch; max-width: 100%; min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; field-sizing: content; }
.shop-cart-dialog .cd-tile input:focus-visible { outline: none; }
.cd-tile label span { color: inherit; font-size: inherit; font-weight: inherit; }
.shop-cart-dialog .cd-line .cd-st > label { grid-row: 2; }
.shop-cart-dialog .cd-line .cd-tile.is-err input, .cd-tile.is-err label span { color: var(--danger-ink); }
.cd-st > button { grid-row: 1 / -1; align-self: center; }
.cd-st > button[data-cart-step="-1"] { grid-column: 2; }
.cd-st > button[data-cart-step="1"] { grid-column: 3; }
.shop-cart-dialog .cd-line .cd-st button { position: relative; z-index: 0; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; border: 0; background: none; color: var(--store-fg); font-size: 1.125rem; font-weight: 600; cursor: pointer; }
.shop-cart-dialog .cd-line .cd-st button::before { content: ""; position: absolute; z-index: -1; inset: .1875rem .125rem; border-radius: .375rem; background: var(--store-soft); }
.shop-cart-dialog .cd-line .cd-st button:last-child { margin-right: .125rem; }
.shop-cart-dialog .cd-line .cd-st button:hover { background: none; }
.cd-st button:focus-visible { outline-offset: -3px; }
.shop-cart-dialog .cd-line .cd-st button:disabled { color: var(--stock-out); cursor: default; }
/* A count at its least has no minus, "Scoate" removes the line; the number and
   the plus keep their places, so nothing moves under the finger. */
.shop-cart-dialog .cd-line .cd-st button[data-cart-step="-1"]:disabled { display: none; }
.cd-pick { cursor: pointer; }
.cd-do { display: inline-flex; align-items: center; gap: .125rem; color: var(--store-accent); white-space: nowrap; }
.cd-do .shop-icon { width: .875rem; height: .875rem; }
.cd-pick[aria-expanded="true"] { border-color: var(--store-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--store-accent) 14%, transparent); }
.cd-pick[aria-expanded="true"] .cd-do .shop-icon { transform: rotate(180deg); }
/* One piece is nearly every order: length takes the row and the pieces wait
   behind a link. Shown, they take the row under the limits, so the plus stays on
   its edge. The label says "per piece" only where there can be several. */
.cd-grid:not(.is-many) .cd-pcs { display: none; }
.cd-len, .cd-pcs { grid-column: 1 / -1; }
.is-many .cd-pcs { order: 5; }
.cd-grid.is-many .cd-under { order: 4; }
.cd-l2, .is-many .cd-l1, .is-many .cd-more { display: none; }
.is-many .cd-l2 { display: inline; }
.cd-under { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: -.125rem; }
/* A refusal says the limit and offers the pieces: this row would repeat it. */
[data-refused] .cd-under { display: none; }
.cd-rg { margin: 0; color: var(--store-muted); font-size: .8125rem; line-height: 18px; }
.shop-cart-dialog .cd-line .cd-more { position: relative; min-height: 0; margin-left: auto; padding: 0; border: 0; background: none; color: var(--store-accent); font: inherit; font-size: .8125rem; font-weight: 600; line-height: 18px; white-space: nowrap; cursor: pointer; }
.cd-more::after { content: ""; position: absolute; inset: -8px -8px -18px; }
.shop-cart-dialog .cd-line .line-remove.is-pickup button span { text-wrap: balance; }
/* What the shopper gets, which many ask before they buy: a size comes whole. */
.cd-whole { display: flex; align-items: center; gap: .375rem; min-height: 24px; margin: .625rem 0 0; color: var(--store-fg); font-size: var(--text-sm); line-height: 1.35; }
.cd-whole b { font-weight: 600; white-space: nowrap; }
.cd-whole .shop-icon, .cd-one .shop-icon { flex: none; width: 1rem; height: 1rem; color: var(--stock-in-ink); }
.cd-whole.is-split .shop-icon { color: var(--store-muted); }
.cd-grid:has(.cd-ctl[hidden]) ~ :is(.cd-whole, .cd-re) { display: none; }
/* What the line comes to, on the closed card's columns; the sum stays in the footer. */
.cd-re { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; min-height: 1.5rem; margin: .5rem 0 0; color: var(--store-muted); font-size: .8125rem; line-height: 20px; }
.cd-got { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 .625rem; width: 100%; }
.cd-fact { display: inline-flex; align-items: center; gap: .375rem; color: var(--store-fg); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.cd-area.is-dim { color: var(--store-muted); font-size: .8125rem; font-weight: 500; }
.cd-area.is-dim b { color: var(--store-fg); font-size: .875rem; font-weight: 600; }
.is-calc :is(.cd-pr, .cd-area:not(.is-dim), .cd-whole), .is-calc#shop-cart-dialog-total #cart-subtotal { opacity: .4; }
.shop-cart-dialog .cd-line .cd-acc { display: block; width: auto; min-width: 0; margin: .875rem 0 0; padding: 0; border: 0; }
.cd-lb { color: var(--store-muted); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.cd-panel { grid-area: pn; min-width: 0; }
.cd-panel[hidden] { display: none; }
/* The lists take the factors' place, in the flow, without a frame of their own. */
.cd-menu { margin-top: .625rem; }
.cd-menu[hidden] { display: none; }
.cd-mc { margin: 0; padding: .375rem 0 .125rem; color: var(--store-fg); font-size: .8125rem; font-weight: 600; }
.cd-mh, .cd-menu button { display: grid; grid-template-columns: 1.1fr 1fr 1fr; align-items: center; gap: .5rem; width: 100%; padding: 0 .5rem; }
.cd-mh { padding-inline: 0; }
.cd-menu:not(.cd-wl) [role="listbox"] { margin-inline: -.5rem; }
.cd-mh { min-height: 26px; color: var(--store-muted); font-size: .8125rem; font-weight: 600; }
.cd-mh span:last-child, .cd-menu b { text-align: right; }
.cd-menu button { min-height: 2.75rem; border: 0; border-radius: .375rem; background: none; color: var(--store-fg); font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: 600; text-align: left; cursor: pointer; }
.cd-menu button > span:first-child { display: flex; align-items: center; gap: .375rem; }
.cd-menu button > span:first-child .shop-icon { width: 1rem; height: 1rem; }
.cd-menu button > span + span { color: var(--store-muted); font-weight: 500; }
.cd-menu button[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--store-accent); }
.cd-menu button:disabled { color: var(--store-muted); cursor: not-allowed; }
.cd-wl .cd-mc { padding: .125rem 0 .5rem; color: var(--store-muted); font-weight: 400; line-height: 1.35; }
.cd-wl .cd-mc b { color: var(--store-fg); font-size: .8125rem; font-weight: 600; }
.cd-wl [role="listbox"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; }
.cd-menu.cd-wl button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 2.75rem; padding: .125rem .5rem; border: 1px solid var(--cd-edge); border-radius: var(--radius); box-shadow: var(--cd-lift); }
.cd-menu.cd-wl button:hover { border-color: var(--cd-ctl); }
.cd-menu.cd-wl button[aria-selected="true"] { border-color: var(--store-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--store-accent) 14%, transparent); }
.cd-menu.cd-wl button:disabled { border-color: transparent; background: var(--store-soft); box-shadow: none; }
.cd-menu.cd-wl button:disabled b { color: var(--store-muted); font-weight: 500; }
.cd-wl b { display: inline-flex; align-items: center; gap: .25rem; font-size: .9375rem; font-weight: 700; line-height: 1.3; text-align: left; }
.cd-wl b .shop-icon { width: .875rem; height: .875rem; }
.cd-wl small { display: inline-flex; align-items: center; gap: .1875rem; color: var(--store-muted); font-size: .8125rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.cd-wl small .shop-icon { flex: none; width: .875rem; height: .875rem; }
.cd-menu b small { display: block; color: var(--store-muted); font-size: .8125rem; font-weight: 400; line-height: 15px; }
/* What the line needs from the shopper. */
.cd-sr { margin: .5rem 0 0; color: var(--store-muted); font-size: .8125rem; line-height: 20px; }
.cd-sr b { display: block; color: var(--store-fg); font-weight: 600; text-wrap: balance; }
.cd-sr.is-err { display: flex; gap: .375rem; color: var(--danger-ink); font-weight: 600; }
.cd-sr.is-err .shop-icon { width: 1rem; height: 1rem; margin-top: 2px; }
.cd-pk { margin-top: .5rem; color: var(--stock-low-ink); font-size: .8125rem; line-height: 1.45; }
.cd-pk p { margin: 0 0 .125rem; }
.cd-pk .cd-pk-at { display: flex; align-items: center; gap: .375rem; }
.cd-pk-at .shop-icon { width: 1rem; height: 1rem; }
.cd-fx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; margin: .375rem 0 0; }
.cd-fx.is-solo { grid-template-columns: 1fr; }
.cd-fix { display: contents; }
/* The corrections weigh the same: the shopper chooses. A soft edge needs a sign that it presses. */
.cd-fix button { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 48px; padding: .3125rem 2rem .3125rem .75rem; border: 1px solid var(--cd-edge); border-radius: var(--radius); background: #fff; box-shadow: var(--cd-lift); color: var(--store-accent); font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; }
.cd-fix button:hover { border-color: var(--cd-ctl); }
.cd-next { position: absolute; top: 50%; right: .625rem; display: grid; color: var(--store-accent); transform: translateY(-50%); }
.cd-next .shop-icon { width: 1rem; height: 1rem; }
.cd-fix button small { color: var(--store-muted); font-size: .8125rem; font-weight: 500; }
.cd-fix button:disabled { border-color: var(--border); background: var(--store-soft); box-shadow: none; color: var(--store-muted); cursor: not-allowed; }
.cd-fix button:disabled .cd-next { display: none; }
.cd-fix button:disabled small { color: var(--store-muted); }
.cd-call { margin: .375rem 0 0; color: var(--store-muted); font-size: .8125rem; }
.cd-call a { color: var(--store-accent); font-weight: 600; text-decoration: none; }
.shop-cart-dialog .cd-line > .cd-c2 { grid-area: lk; display: flex; align-self: end; align-items: center; justify-content: space-between; gap: .25rem; min-height: 1.5rem; margin: .25rem 0 0; }
.cd-c2:empty { display: none; }
.shop-cart-dialog .cd-line > .cd-c2 > * { position: relative; margin: 0; }
.cd-see, .shop-cart-dialog .cd-line .line-remove button, .cart-group-del > summary { display: inline-flex; flex: none; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 .5rem; border: 0; border-radius: var(--radius); background: none; color: var(--store-muted); font-size: .8125rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.shop-cart-dialog .cd-line > .cd-c2 :is(.cd-see, .line-remove button) { position: relative; min-height: 1.5rem; padding: 0; }
.shop-cart-dialog .cd-line > .cd-c2 :is(.cd-see, .line-remove button)::after { content: ""; position: absolute; inset: -.625rem -.25rem; }
/* "Păstrează" takes "Gata"'s place, in its form. */
.shop-cart-dialog .cd-line .cd-keep { position: relative; display: inline-flex; flex: none; align-items: center; gap: .1875rem; min-height: 0; margin: 0 0 0 -.25rem; padding: 0 .25rem; border: 0; background: none; color: var(--store-accent); font-size: .8125rem; font-weight: 600; line-height: 18px; white-space: nowrap; cursor: pointer; }
.cd-keep::after { content: ""; position: absolute; inset: -13px -8px; }
.cd-keep .shop-icon { width: .875rem; height: .875rem; transform: rotate(180deg); }
.cd-see .shop-icon { width: .9375rem; height: .9375rem; }
.shop-cart-dialog .cd-c2 .line-remove { margin-inline: auto 0; }
.shop-cart-dialog .cd-line .line-remove button .shop-icon, .cart-group-del > summary .shop-icon { width: 1.125rem; height: 1.125rem; }
.shop-cart-dialog .cd-line .line-remove button:hover, .cart-group-del > summary:hover { background: var(--danger-soft); color: var(--danger-ink); }
.shop-cart-dialog .cd-line > .cd-c2 .line-remove button:hover { background: none; }
.shop-cart-dialog .cd-panel > .line-remove.is-pickup { width: 100%; margin: .5rem 0 0; }
.shop-cart-dialog .cd-panel > .line-remove.is-pickup button { position: relative; justify-content: flex-start; width: 100%; min-height: 48px; padding: .3125rem 2rem .3125rem .75rem; border: 1px solid var(--cd-edge); background: #fff; box-shadow: var(--cd-lift); color: var(--store-accent); font-weight: 600; text-align: left; white-space: normal; }
.shop-cart-dialog .cd-panel > .line-remove.is-pickup button:hover { border-color: var(--cd-ctl); }
.line-remove.is-pickup button > span { display: grid; }
.line-remove.is-pickup small { color: var(--store-muted); font-size: .8125rem; font-weight: 500; }
.cd-many { display: none; }
.shop-cart-lines:has(.is-pickup ~ .is-pickup) .cd-only { display: none; }
.shop-cart-lines:has(.is-pickup ~ .is-pickup) .cd-many { display: inline; }
/* The empty cart. */
.shop-cart-dialog .cd-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; margin: 0; padding: 1.5rem; border: 0; border-radius: 0; background: none; text-align: center; }
.cd-empty-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: .25rem; border-radius: 50%; background: var(--accent-soft); color: var(--store-accent); }
.cd-empty-icon .shop-icon { width: 2rem; height: 2rem; }
.shop-cart-dialog .cd-empty h3 { margin: 0; font-size: var(--text-lg); }
.shop-cart-dialog .cd-empty p { max-width: 280px; margin: 0 0 .5rem; color: var(--store-muted); font-size: var(--text-sm); text-wrap: balance; }
.cd-go { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.cd-go a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--store-accent); border-radius: var(--radius); background: var(--store-accent); color: #fff; font-weight: 600; text-decoration: none; }
.cd-go a.is-alt { border-color: var(--cd-ctl); background: #fff; color: var(--store-fg); }
/* The way on stands alone only where the menu has no named entry to offer. */
.cd-go a ~ .cd-go-on { display: none; }
/* The footer: the total, what to know, the one thing to do. */
.shop-cart-dialog-footer { flex: none; padding: .75rem var(--cd-pad) calc(.375rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: #fff; box-shadow: 0 -4px 16px rgb(15 23 42 / .06); }
.shop-cart-dialog-footer:has(#shop-cart-dialog-summary:empty) { display: none; }
/* The sum and the weight on one row, the sum on the cards' edge. */
#shop-cart-dialog-total { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: .625rem; margin-bottom: .25rem; }
.cd-tot { display: contents; }
.cd-tot > span { grid-column: 1; }
.cd-tot b { grid-column: 3; grid-row: 1; font-size: var(--text-xl); font-weight: 700; }
.shop-cart-dialog .cd-sum { position: static; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cd-row { display: flex; align-items: center; gap: .375rem; min-height: 22px; margin: 0; color: var(--store-muted); font-size: .8125rem; line-height: 1.4; }
.cd-row .shop-icon { flex: none; width: 1rem; height: 1rem; }
.cd-row b { color: var(--store-fg); font-weight: 600; }
.cd-kg { grid-column: 2; grid-row: 1; align-self: baseline; min-height: 0; white-space: nowrap; }
.cd-kg .shop-icon { align-self: center; }
.cd-kg b { color: var(--store-muted); font-weight: 500; }
.cd-slot { display: flex; align-items: center; gap: .375rem; min-height: 22px; margin: 0; color: var(--store-muted); font-size: .8125rem; line-height: 1.4; }
.cd-slot[hidden], .cd-slot:not([hidden]) ~ .cd-slot { display: none; }
.cd-slot .shop-icon { width: 1rem; height: 1rem; }
.cd-slot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* What needs the shopper, on two rows: what to do, then the product's whole name. */
.cd-slot.is-warn, .cd-slot.is-err { position: relative; align-items: flex-start; margin: .25rem calc(-1 * var(--cd-pad)) 0; padding: .375rem var(--cd-pad); font-weight: 600; line-height: 1.35; }
.cd-slot.is-warn .shop-icon, .cd-slot.is-err .shop-icon { margin-top: 1px; }
.cd-slot.is-warn > span, .cd-slot.is-err > span { display: grid; }
.cd-slot.is-warn .cd-link, .cd-slot.is-err .cd-link { display: block; max-width: 100%; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cd-slot.is-many > span { display: block; }
.cd-slot.is-many .cd-link { display: inline; font-weight: 700; }
.cd-slot.is-warn { border-block: 1px solid #fde68a; background: var(--warning-soft); color: var(--stock-low-ink); }
.cd-slot.is-err { border-block: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); }
.cd-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* A long name is cut, and with it anything around it: the band itself is the link's 44 px. */
.cd-link::after { content: ""; position: absolute; inset: 0; }
.cd-slot.is-many .cd-link::after { inset: -.5rem 0; }
.cd-link.is-here { text-decoration: none; pointer-events: none; }
.cd-cta { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; margin: .5rem 0 0; border-radius: .625rem; background: linear-gradient(135deg, var(--shop-cta-from), var(--shop-cta-to)); color: #fff; font-size: var(--text-base); font-weight: 700; text-decoration: none; }
.cd-cta .shop-icon { width: 1.125rem; height: 1.125rem; }
.shop-cart-dialog .cd-cta { margin-top: .5rem; box-shadow: none; }
.shop-cart-dialog .cd-cta::after { content: none; }
.cd-cta[aria-disabled="true"] { cursor: not-allowed; }
.cd-cta.is-off, .cd-cta.is-dim { background: var(--border); color: var(--store-muted); }
.shop-cart-checkout + .cd-cta.is-off { display: none; }
.cd-links { display: flex; justify-content: space-between; gap: .75rem; }
.cd-links :is(a, button) { position: relative; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0; border: 0; background: none; color: var(--store-accent); font-size: var(--text-sm); font-weight: 500; text-decoration: none; cursor: pointer; }
.cd-links :is(a, button)::after { content: ""; position: absolute; inset: -.25rem 0; }
@media (max-width: 27rem) {
  .cd-me dd { gap: .25rem; font-size: .8125rem; }
  .cd-me .shop-icon { stroke-width: 2; }
  .cd-me > div:nth-child(-n + 3) dd { font-size: .84375rem; }
  .cd-fact { gap: .25rem; font-size: .8125rem; }
}
/* On the narrowest phones the count and the close button share no room: the
   word stays for a screen reader; the cards give back some of their air. */
@media (max-width: 23.75rem) {
  .shop-cart-dialog .cd-line { padding: .75rem .75rem .5rem; }
  .cd-me, .cd-flag { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); column-gap: .375rem; }
  .cd-me > div:nth-child(-n + 3) dd { font-size: .8125rem; }
  .cd-area.is-dim b { font-size: .8125rem; }
  .cd-wl small .shop-icon { display: none; }
  .cd-line.is-bad .cd-un { display: none; }
  .shop-cart-dialog-heading button { justify-content: center; min-width: 2.75rem; margin-right: -.75rem; }
  .shop-cart-dialog-heading button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cd-ft { margin-top: .625rem; }
  .cd-grid { gap: .5rem; margin-top: .625rem; }
  .cd-whole { margin-top: .5rem; }
  .cd-re { margin-top: .25rem; }
  .cd-sr { margin-top: .375rem; }
  .cd-row, .cd-slot { gap: .25rem; font-size: .796875rem; }
  .cd-row .shop-icon, .cd-slot .shop-icon { width: .875rem; height: .875rem; }
}
@media (max-width: 36rem) {
  .shop-cart-dialog { width: 100%; }
  .cd-sr { font-size: var(--text-sm); }
  .cd-fx:has(.cd-fix-split) { grid-template-columns: 1fr; }
}
/* The low screens keep the sum and "Gata" in view: the same things, tighter; the
   buttons keep their 44 px. epdm-shop-header-cart.js knows the bars' two heights. */
@media (max-height: 48.75rem) {
  .cd-tile { grid-template-rows: auto 1.75rem; }
  .cd-tile > .cd-lb { padding-top: .3125rem; }
  .cd-grid { gap: .375rem; margin-top: .5rem; }
  .cd-under { margin-top: 0; }
  .cd-sr, .cd-whole { margin-top: .25rem; }
  .cd-re { margin-top: .125rem; }
  .cd-call { margin-top: .25rem; }
  .cd-ft { margin-top: .5rem; padding-top: .25rem; }
  .cd-fx { gap: .25rem; }
}
@media (max-height: 47.5rem) {
  .cd-bar { height: 1.75rem; }
  .cd-up::after { bottom: -1.0625rem; }
  .cd-down::after { top: -1.0625rem; }
  .cd-fix button { min-height: 44px; padding-block: .1875rem; }
  .shop-cart-dialog .cd-cta { min-height: 48px; }
  .cd-links :is(a, button) { min-height: 2rem; }
  .cd-links :is(a, button)::after { inset: -.375rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-menu-desktop .shop-menu-chevron, .shop-drawer .shop-menu-chevron, .shop-header-cart-icon,
  .shop-menu-desktop .shop-menu-item > a, .shop-menu-desktop .shop-menu-group > summary, .shop-menu-desktop .shop-menu-group > ul a::before { transition: none; }
}
/* End O22 I1 */

/* The first page (O22 S3-B, compact and commercial): v1's structure in
   v1's order (epdm-shop/home.html, folie-iaz/home.html): the hero with its
   glass stats and the three role cards, the four benefits with their
   colours, the certifications, the tabs, the three steps with their CTA,
   the questions. Denser than v1 (the hero's cards 15rem tall instead of
   18.4, the benefits two by two on a phone, the questions beside their
   title from 64rem) and closer to a purchase: every tab ends in its
   category, the contact sits by the questions, every target is 44px tall on
   a phone. Folie's hero and categories are here too; Folie changes nothing
   else here: its tokens do. One block, from here to its end comment. */

/* v1's tones of the first page (home.html:14-18, 38-41): Tailwind's
   emerald, amber, sky and violet; the ink keeps 5:1 on white, the light
   shade draws on the hero's dark glass. An element picks one by its
   data-tone, a closed list written in the template. */
:root {
  --tone-emerald: #10b981; --tone-emerald-light: #34d399; --tone-emerald-ink: #047857;
  --tone-amber: #f59e0b; --tone-amber-light: #fbbf24; --tone-amber-ink: #b45309;
  --tone-sky: #0ea5e9; --tone-sky-light: #38bdf8; --tone-sky-ink: #0369a1;
  --tone-violet: #8b5cf6; --tone-violet-light: #a78bfa; --tone-violet-ink: #6d28d9;
}
[data-tone="emerald"] { --tone: var(--tone-emerald); --tone-light: var(--tone-emerald-light); --tone-ink: var(--tone-emerald-ink); }
[data-tone="amber"] { --tone: var(--tone-amber); --tone-light: var(--tone-amber-light); --tone-ink: var(--tone-amber-ink); }
[data-tone="sky"] { --tone: var(--tone-sky); --tone-light: var(--tone-sky-light); --tone-ink: var(--tone-sky-ink); }
[data-tone="violet"] { --tone: var(--tone-violet); --tone-light: var(--tone-violet-light); --tone-ink: var(--tone-violet-ink); }

/* The section's pill (v1's badge; its icon: home.html:74,87), subtitle and
   accent. */
.shop-badge { display: inline-block; border-radius: 999px; padding: .25rem .75rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: rgb(16 185 129 / .2); color: var(--hero-badge); border: 1px solid rgb(52 211 153 / .2); }
.shop-home .shop-badge { display: inline-flex; align-items: center; gap: .375rem; }
.shop-sub { margin: 0 0 1.5rem; color: var(--store-muted); max-width: 40rem; }
.shop-benefits .accent { color: var(--store-accent); }
.shop-home .shop-badge svg { width: .875rem; height: .875rem; }

/* ---- EPDM: the hero (v1's home.html:2-29) ---- */
.shop-hero { position: relative; overflow: hidden; padding: 1.25rem 0 0; background: linear-gradient(145deg, var(--hero-from) 0%, var(--shop-brand-dark) 30%, var(--store-accent) 70%, var(--shop-brand-light) 100%); color: var(--hero-ink); }
.shop-hero-head { display: grid; gap: 1rem; margin-bottom: 1rem; }
.shop-hero-text { max-width: 36rem; }
.shop-hero h1 { margin: .5rem 0; font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-tight); }
.shop-hero-text p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgb(255 255 255 / .82); }

/* The stats: v1's glass row with its three coloured icons; on a phone the
   three in one row, the icon above its figure. */
.shop-stats { list-style: none; margin: 0; padding: .625rem .5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; border: 1px solid rgb(255 255 255 / .12); border-radius: var(--radius-xl); background: rgb(255 255 255 / .06); backdrop-filter: blur(4px); }
.shop-stats li { display: grid; justify-items: center; align-content: start; gap: .25rem; text-align: center; }
.shop-stat-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-lg); background: rgb(255 255 255 / .1); color: var(--tone-light); }
.shop-stats strong { display: block; font-size: var(--text-lg); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.shop-stats .shop-stat-label { font-size: var(--text-micro); font-weight: 500; line-height: 1.2; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgb(255 255 255 / .9); }

/* The role cards: the whole card is the link. On a phone and a tablet the
   image fills it under v1's overlay, the benefits and the icon on top, the
   title and the link below; the title comes first in the markup so the
   link's name starts with it. */
.shop-hero-cards { display: grid; gap: .625rem; }
.shop-hero-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto auto; grid-template-areas: "chips icon" ". ." "title title" "text text" "cta cta"; justify-content: stretch; min-height: 7.75rem; padding: .75rem 1rem .875rem; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--shop-brand-dark), var(--store-accent)); color: #fff; text-decoration: none; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45); transition: transform .25s ease-out, box-shadow .25s; }
.shop-hero-card:has(> .shop-hero-image) { min-height: 7.75rem; padding-top: .75rem; background: #0f172a; }
.shop-hero-card:hover { transform: translateY(-.25rem); box-shadow: 0 18px 36px -14px rgb(0 0 0 / .55); }
.shop-hero-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.shop-home .shop-hero-image img, .shop-home .folie-category-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.shop-hero-card:has(> .shop-hero-image)::after { content: ""; position: absolute; inset: 0; z-index: -1; height: auto; background: linear-gradient(to top, #0f172a 8%, rgb(15 23 42 / .72) 55%, rgb(15 23 42 / .3)); }
.shop-hero-card h2, .shop-hero-card:has(> .shop-hero-image) h2 { grid-area: title; margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); color: #fff; }
.shop-hero-card p { grid-area: text; display: none; margin: .125rem 0 0; font-size: var(--text-xs); color: #cbd5e1; }
/* v1's benefits: a check, emerald on a dark pill that keeps 4.5:1 over a
   light photograph too (v1's black/30 did not). */
.shop-hero-benefits { grid-area: chips; align-self: start; display: flex; flex-wrap: wrap; gap: .375rem; }
.shop-hero-benefits span, .shop-hero-card:has(> .shop-hero-image) .shop-hero-benefits span { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border: 1px solid rgb(52 211 153 / .2); border-radius: var(--radius-full); font-size: var(--text-2xs); font-weight: 600; line-height: 1.2; color: var(--hero-badge); background: rgb(15 23 42 / .72); backdrop-filter: blur(4px); }
.shop-hero-benefits svg { width: .75rem; height: .75rem; stroke-width: 3; }
/* v1's white tile with the role's icon (home.html:123, :177). */
.shop-hero-icon { grid-area: icon; align-self: start; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-left: .5rem; border-radius: var(--radius-lg); background: #fff; color: var(--store-accent); box-shadow: var(--shadow-lg); transition: transform .25s; }
.shop-hero-icon svg { width: 1.125rem; height: 1.125rem; }
.shop-hero-cta { grid-area: cta; justify-self: start; display: inline-flex; align-items: center; gap: .5rem; margin-top: .375rem; font-size: var(--text-sm); font-weight: 600; color: var(--hero-badge); }
.shop-hero-cta svg { width: 1.5rem; height: 1.5rem; padding: .3125rem; border-radius: 50%; background: rgb(16 185 129 / .2); stroke-width: 2.5; transition: transform .2s, background-color .2s, color .2s; }
.shop-hero-card:hover .shop-hero-cta svg { transform: translateX(2px); background: var(--tone-emerald); color: #fff; }
/* v1's wave into the white below (home.html:28), drawn in the markup: the
   page's CSP admits no data: image. */
.shop-hero-wave { display: block; width: 100%; height: 2.5rem; margin-top: 1.5rem; }

@media (min-width: 40rem) {
  .shop-stats li { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: .625rem; row-gap: .125rem; text-align: left; }
  .shop-stat-icon { grid-row: span 2; width: 2.5rem; height: 2.5rem; }
  .shop-stats strong { align-self: end; }
  .shop-stats .shop-stat-label { align-self: start; }
  .shop-hero-card p { display: block; }
}
@media (min-width: 48rem) {
  .shop-hero-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
  .shop-hero-card, .shop-hero-card:has(> .shop-hero-image) { min-height: 10rem; }
}
/* From 64rem, v1's tall card, shorter: the image on top (8.5rem instead of
   10.1), the benefits on its lower edge, the tile across it, the texts on
   the dark panel. */
@media (min-width: 64rem) {
  .shop-hero { padding-top: 1.75rem; }
  .shop-hero-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2rem; margin-bottom: 1.5rem; }
  .shop-hero h1 { font-size: var(--text-4xl); }
  .shop-hero-text p { font-size: var(--text-base); }
  .shop-stats { gap: 0; padding: .75rem 1rem; }
  .shop-stats li + li { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid rgb(255 255 255 / .12); }
  .shop-hero-cards { gap: 1.25rem; }
  .shop-hero-card:has(> .shop-hero-image) { grid-template-rows: 8.5rem auto auto 1fr; grid-template-areas: "chips icon" "title title" "text text" "cta cta"; min-height: 0; padding: 0 1.25rem 1.125rem; }
  .shop-hero-card:has(> .shop-hero-image) .shop-hero-benefits { align-self: end; margin-bottom: .625rem; }
  .shop-hero-card:has(> .shop-hero-image) .shop-hero-icon { align-self: end; width: 2.75rem; height: 2.75rem; transform: translateY(50%); }
  .shop-hero-card:has(> .shop-hero-image):hover .shop-hero-icon { transform: translateY(50%) scale(1.06); }
  .shop-hero-icon svg { width: 1.25rem; height: 1.25rem; }
  .shop-hero-image { bottom: auto; height: 8.5rem; }
  .shop-hero-card:has(> .shop-hero-image)::after { bottom: auto; height: 8.5rem; background: linear-gradient(to bottom, rgb(15 23 42 / .1), transparent 40%, rgb(15 23 42 / .72)); }
  .shop-hero-card:has(> .shop-hero-image) h2 { margin-top: .875rem; font-size: var(--text-xl); }
  .shop-hero-card:has(> .shop-hero-image) .shop-hero-benefits span { background: rgb(15 23 42 / .72); backdrop-filter: blur(4px); }
  .shop-hero-wave { height: 3.5rem; margin-top: 2rem; }
}

/* ---- EPDM: the benefits and the certifications (v1's :33-51) ---- */
.shop-benefits { padding: 1.25rem 0 2rem; background: linear-gradient(to bottom, #fff, var(--store-bg)); }
.shop-benefits h2 { margin: 0 0 .375rem; font-size: var(--text-2xl); line-height: var(--leading-tight); text-align: center; color: var(--store-fg); }
.shop-benefits .shop-sub { max-width: 40rem; margin: 0 auto 1.25rem; font-size: var(--text-sm); text-align: center; }
/* Two by two on a phone (v1: one under the other), four from 48rem; v1's
   coloured bar, tinted icon and coloured figure. */
.shop-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.shop-benefit-grid article { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon value" "icon label" "text text"; column-gap: .5rem; align-content: start; padding: 1rem .875rem .875rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .25s, border-color .25s; }
.shop-benefit-grid article::before { content: ""; position: absolute; inset: 0 0 auto; height: .25rem; background: linear-gradient(to right, var(--tone-light), var(--tone)); }
.shop-benefit-grid article:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.shop-benefit-icon { grid-area: icon; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--tone) 12%, #fff); color: var(--tone-ink); }
.shop-benefit-grid strong { grid-area: value; justify-self: end; display: block; font-size: var(--text-xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tone-ink); }
.shop-benefit-grid .shop-benefit-label { grid-area: label; justify-self: end; font-size: var(--text-micro); font-weight: 600; line-height: 1.3; letter-spacing: var(--tracking-wide); text-align: right; text-transform: uppercase; color: var(--store-muted); }
.shop-benefit-grid p { grid-area: text; margin: .625rem 0 0; font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--store-muted); }
/* The certifications (v1's :43-49): the site's quality marks
   (Site.Marks.Quality), the image where the theme has one, v1's lettering
   otherwise; one row under the benefits. */
.shop-certs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.shop-certs h3 { margin: 0; font-size: var(--text-micro); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--store-muted); }
.shop-certs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; }
.shop-certs li { display: flex; align-items: center; gap: .5rem; font-size: var(--text-xs); line-height: 1.25; color: var(--store-muted); }
.shop-certs img { display: block; width: auto; height: 2.5rem; }
.shop-certs:not(:has(li)) { display: none; }
.shop-cert-text { font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; color: #334155; }
@media (min-width: 48rem) {
  .shop-benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 64rem) {
  .shop-benefits { padding: 1.5rem 0 2.5rem; }
  .shop-benefits h2 { font-size: var(--text-3xl); }
  .shop-benefits .shop-sub { margin-bottom: 1.75rem; font-size: var(--text-base); }
  .shop-benefit-grid { gap: 1.25rem; }
  .shop-benefit-grid article { padding: 1.25rem 1.25rem 1.125rem; column-gap: .75rem; }
  .shop-benefit-icon { width: 3rem; height: 3rem; }
  .shop-benefit-grid strong { font-size: var(--text-2xl); }
  .shop-benefit-grid p { margin-top: .875rem; font-size: var(--text-sm); }
  .shop-certs { justify-content: center; gap: 1rem 2.5rem; }
}

/* ---- The tabs (both brands; v1's :53-69) ---- */
.shop-collection { padding: 1.75rem 0 2.25rem; background: #fff; }
.shop-tabs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.shop-collection h2 { display: flex; align-items: center; gap: .625rem; margin: 0 0 .75rem; font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-tight); color: var(--store-fg); }
.shop-collection-icon { display: grid; flex-shrink: 0; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--store-accent); }
/* Wrapping rows keep every selected tab visible without JavaScript. The
   44px tall pills and radios keep their arrows; the rows are ringed while
   a radio has the focus. Long titles wrap inside their pill. */
.shop-tab-labels { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: .125rem; border-radius: var(--radius-full); }
.shop-tab-label { flex-shrink: 0; display: inline-flex; align-items: center; max-width: 100%; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; color: #334155; background: var(--store-soft); cursor: pointer; transition: background-color .2s, color .2s; }
.shop-tab-label:hover { color: var(--store-accent); background: var(--accent-soft); }
.shop-tabs:has(.shop-tab-input:focus-visible) .shop-tab-labels { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Each radio covers the labels' cell, under the h2 and, from 64rem, beside
   it: the browser scrolls a focused radio into view, and with it the row its
   focus rings (WCAG 2.4.7). At its static place it stood in the middle of the
   grid, over the panel, with the row off the screen. */
.shop-tab-input { position: absolute; grid-area: 2 / 1 / 3 / 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
@media (min-width: 64rem) { .shop-tab-input { grid-area: 1 / 2 / 2 / 3; } }
.shop-tab-panel { display: none; grid-column: 1 / -1; }
/* The checked tab's label and panel: EPDM's roles, Folie's t0…t5. */
#shop-tab-pond:checked ~ .shop-tab-labels [for="shop-tab-pond"], #shop-tab-roof:checked ~ .shop-tab-labels [for="shop-tab-roof"], #shop-tab-facade:checked ~ .shop-tab-labels [for="shop-tab-facade"],
#shop-tab-t0:checked ~ .shop-tab-labels [for="shop-tab-t0"], #shop-tab-t1:checked ~ .shop-tab-labels [for="shop-tab-t1"], #shop-tab-t2:checked ~ .shop-tab-labels [for="shop-tab-t2"],
#shop-tab-t3:checked ~ .shop-tab-labels [for="shop-tab-t3"], #shop-tab-t4:checked ~ .shop-tab-labels [for="shop-tab-t4"], #shop-tab-t5:checked ~ .shop-tab-labels [for="shop-tab-t5"] { background: var(--store-accent); color: #fff; }
#shop-tab-pond:checked ~ [data-tab-panel="pond"], #shop-tab-roof:checked ~ [data-tab-panel="roof"], #shop-tab-facade:checked ~ [data-tab-panel="facade"],
#shop-tab-t0:checked ~ [data-tab-panel="t0"], #shop-tab-t1:checked ~ [data-tab-panel="t1"], #shop-tab-t2:checked ~ [data-tab-panel="t2"],
#shop-tab-t3:checked ~ [data-tab-panel="t3"], #shop-tab-t4:checked ~ [data-tab-panel="t4"], #shop-tab-t5:checked ~ [data-tab-panel="t5"] { display: block; }
.shop-empty { border: 1px solid var(--store-soft); border-radius: 1rem; padding: 3rem 1.5rem; text-align: center; color: var(--store-muted); }
/* After the six cards, the way to the rest of the category. */
.shop-tab-more { margin: 1rem 0 0; text-align: center; }
.shop-tab-more .shop-button { min-height: 2.75rem; }
@media (min-width: 64rem) {
  .shop-collection { padding: 2.5rem 0 3rem; }
  .shop-tabs { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; }
  .shop-collection h2 { margin-bottom: 1.25rem; font-size: var(--text-2xl); }
  .shop-tab-labels { flex-wrap: wrap; justify-content: flex-end; margin-bottom: 1.25rem; overflow: visible; }
  .shop-tab-label { min-height: 2.25rem; }
  .shop-tab-more { margin-top: 1.25rem; }
}

/* ---- Both brands: how it works (v1's :71-84) ---- */
.shop-how { padding: 2rem 0; background: linear-gradient(135deg, var(--shop-brand-dark), var(--store-accent), var(--shop-brand-light)); color: #fff; text-align: center; }
/* A dark glass where v1 had a white one (white/10, white/15): white text on
   the gradient's light end kept 3.1:1 there, 6:1 here. */
.shop-how .shop-badge { color: #fff; background: rgb(15 23 42 / .25); border-color: transparent; }
.shop-how h2 { margin: .5rem 0 .25rem; font-size: var(--text-2xl); line-height: var(--leading-tight); color: #fff; }
.shop-how .shop-sub { max-width: 36rem; margin: 0 auto 1.5rem; font-size: var(--text-sm); color: rgb(255 255 255 / .85); }
/* A step: its number on the corner (the CTA's colour), its icon, its title
   and text beside it. */
.shop-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; counter-reset: step; text-align: left; }
.shop-steps li { counter-increment: step; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon text"; column-gap: .75rem; align-items: start; padding: .875rem 1rem; border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius-lg); background: rgb(15 23 42 / .2); }
.shop-steps li::before { content: counter(step); position: absolute; top: -.5rem; left: -.375rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: var(--text-xs); font-weight: 700; color: #fff; background: var(--shop-cta-to); box-shadow: var(--shadow-md); }
.shop-step-icon { grid-area: icon; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: rgb(255 255 255 / .14); }
.shop-steps h3 { grid-area: title; margin: 0 0 .125rem; font-size: var(--text-base); line-height: var(--leading-snug); }
.shop-steps p { grid-area: text; margin: 0; font-size: var(--text-xs); line-height: var(--leading-relaxed); color: rgb(255 255 255 / .9); }
.shop-how-cta { margin: 1.5rem 0 0; }
.shop-how-cta .shop-button:focus-visible { outline-color: #fff; }
@media (min-width: 48rem) { .shop-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 64rem) {
  .shop-how { padding: 2.5rem 0; }
  .shop-how h2 { font-size: var(--text-3xl); }
  .shop-steps li { padding: 1rem 1.25rem; }
}

/* ---- Both brands: the questions (v1's :86-102) ---- */
.shop-faq { padding: 2rem 0 2.5rem; background: #fff; }
.shop-faq .shop-wrap { display: grid; gap: 1rem; grid-template-areas: "intro" "list" "contact"; }
.shop-faq-intro { grid-area: intro; text-align: center; }
.shop-faq .shop-badge { color: var(--store-accent); background: var(--accent-soft); border-color: transparent; }
.shop-faq h2 { margin: .5rem 0 .25rem; font-size: var(--text-2xl); line-height: var(--leading-tight); color: var(--store-fg); }
.shop-faq .shop-sub { max-width: 36rem; margin: 0 auto; font-size: var(--text-sm); }
.shop-faq-list { grid-area: list; display: grid; gap: .5rem; }
.shop-faq details { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--store-bg); }
.shop-faq details[open] { border-color: color-mix(in srgb, var(--store-accent) 30%, var(--border)); background: #fff; box-shadow: var(--shadow-sm); }
.shop-faq summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3rem; padding: .5rem .75rem .5rem 1rem; list-style: none; cursor: pointer; font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); color: var(--store-fg); }
.shop-faq summary:focus-visible { outline-offset: -4px; }
.shop-faq summary::-webkit-details-marker { display: none; }
.shop-faq summary:hover { color: var(--store-accent); }
.shop-faq summary svg { flex-shrink: 0; width: 1.5rem; height: 1.5rem; padding: .25rem; border-radius: 50%; color: var(--store-accent); background: var(--accent-soft); stroke-width: 2.5; transition: transform .2s, background-color .2s, color .2s; }
.shop-faq details[open] summary svg { transform: rotate(180deg); color: #fff; background: var(--store-accent); }
.shop-faq details p { margin: 0; padding: 0 1rem .875rem; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--store-muted); }
/* The contact (v1's :101): its text and a button-sized link. */
.shop-faq-contact { grid-area: contact; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem; margin: .5rem 0 0; font-size: var(--text-sm); text-align: center; color: var(--store-muted); }
.shop-faq-contact a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--radius-lg); font-weight: 600; text-decoration: none; color: var(--store-accent); background: var(--accent-soft); transition: background-color .2s; }
.shop-faq-contact a:hover { background: color-mix(in srgb, var(--store-accent) 16%, #fff); }
.shop-faq-contact svg { width: 1rem; height: 1rem; }
/* From 64rem the title and the contact on the left, the questions beside. */
@media (min-width: 64rem) {
  .shop-faq { padding: 3rem 0; }
  .shop-faq .shop-wrap { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "intro list" "contact list"; gap: 1.25rem 3rem; align-items: start; }
  .shop-faq-intro { text-align: left; }
  .shop-faq h2 { font-size: var(--text-3xl); }
  .shop-faq .shop-sub { margin: 0; }
  .shop-faq-contact { flex-direction: column; align-items: flex-start; margin: 0; padding: 1rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--store-bg); text-align: left; }
}

/* ---- Folie: the hero (v1's folie-iaz/home.html:7-19) ---- */
.folie-hero { position: relative; padding: 2rem 0 2.25rem; background: linear-gradient(to bottom right, var(--folie-hero-from), var(--folie-hero-via), var(--folie-hero-to)); color: #fff; }
.folie-hero .shop-wrap { display: grid; gap: 1.5rem; align-items: center; }
.folie-hero-text { max-width: 40rem; }
.folie-hero-label { display: inline-flex; align-items: center; gap: .375rem; margin-bottom: .75rem; padding: .25rem .75rem; border: 1px solid rgb(255 255 255 / .2); border-radius: var(--radius-full); background: rgb(255 255 255 / .1); font-size: var(--text-micro); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: #cffafe; }
.folie-hero-label svg { width: .875rem; height: .875rem; }
.folie-hero h1 { margin: 0 0 .75rem; font-size: var(--text-3xl); font-weight: 700; line-height: 1.15; }
.folie-hero-text p { margin: 0 0 1.25rem; font-size: var(--text-base); line-height: var(--leading-relaxed); color: rgb(236 254 255 / .85); }
.folie-hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: 0 1.5rem; border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 700; text-decoration: none; color: var(--folie-hero-ink); background: var(--folie-hero-cta); box-shadow: 0 8px 24px -10px var(--folie-hero-cta); transition: background-color .2s; }
.folie-hero-cta:hover { background: var(--folie-hero-cta-hover); }
.folie-hero-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.folie-hero-cta svg { width: 1rem; height: 1rem; transition: transform .2s; }
.folie-hero-cta:hover svg { transform: translateX(2px); }
/* v1's three badges, each with its check (the brief's "beneficiile"). */
.folie-hero-badges { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.folie-hero-badges li { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .625rem; border: 1px solid rgb(255 255 255 / .12); border-radius: var(--radius); background: rgb(255 255 255 / .06); font-size: var(--text-xs); font-weight: 500; color: #ecfeff; }
.folie-hero-badges svg { width: .875rem; height: .875rem; color: var(--folie-hero-cta); stroke-width: 2.5; }
/* The size, the buyer's first question, beside the title from 64rem (v1's
   empty right half); on a phone it stays in the first step and the first
   question. */
.folie-hero-size { display: none; }
@media (min-width: 64rem) {
  .folie-hero { padding: 3.5rem 0; }
  .folie-hero .shop-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 3rem; }
  .folie-hero h1 { font-size: 2.75rem; }
  .folie-hero-text p { font-size: var(--text-lg); }
  .folie-hero-size { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .375rem .875rem; padding: 1.25rem 1.375rem; border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius-xl); background: rgb(255 255 255 / .07); backdrop-filter: blur(6px); }
  .folie-hero-size-icon { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); color: var(--folie-hero-ink); background: var(--folie-hero-cta); }
  .folie-hero-size h2 { margin: 0; font-size: var(--text-base); line-height: var(--leading-snug); color: #fff; }
  .folie-hero-size p { margin: 0; padding-left: .75rem; border-left: 2px solid var(--folie-hero-cta); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgb(236 254 255 / .9); }
}

/* ---- Folie: the categories (v1's :89-104) ---- */
.folie-categories { padding: 1.5rem 0 1.75rem; background: #fff; }
.folie-categories h2 { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 0 1rem; font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wider); text-align: center; text-transform: uppercase; color: var(--store-muted); }
.folie-categories h2::before, .folie-categories h2::after { content: ""; width: 3rem; height: 1px; background: linear-gradient(to right, transparent, var(--border-strong)); }
.folie-categories h2::after { background: linear-gradient(to left, transparent, var(--border-strong)); }
/* Two by two on a phone (v1: one under the other), all in one row from 48rem. */
.folie-category-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.folie-category-cards a { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; padding: .75rem; border-radius: var(--radius-lg); text-decoration: none; color: #fff; background: linear-gradient(to top, rgb(15 23 42 / .9), rgb(15 23 42 / .4)), #334155; box-shadow: var(--shadow-md); transition: transform .25s, box-shadow .25s; }
.folie-category-cards a:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.folie-category-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; background: #334155; transition: transform .5s; }
.folie-category-cards a:hover .folie-category-image { transform: scale(1.04); }
.folie-category-cards a:has(> .folie-category-image)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(15 23 42 / .9), rgb(15 23 42 / .4) 55%, rgb(15 23 42 / .1)); }
.folie-category-title { font-size: var(--text-base); font-weight: 700; line-height: var(--leading-snug); }
.folie-category-cta { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; font-size: var(--text-xs); font-weight: 500; color: rgb(255 255 255 / .85); }
.folie-category-cta svg { width: .875rem; height: .875rem; transition: transform .2s; }
.folie-category-cards a:hover .folie-category-cta svg { transform: translateX(2px); }
@media (min-width: 48rem) {
  .folie-category-cards { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
  .folie-category-cards a { aspect-ratio: 16 / 10; padding: 1rem 1.25rem; }
  .folie-category-title { font-size: var(--text-lg); }
}
@media (min-width: 64rem) { .folie-categories { padding: 2rem 0 2.25rem; } }

@media (prefers-reduced-motion: reduce) {
  .shop-hero-card, .shop-hero-icon, .shop-hero-cta svg, .shop-benefit-grid article, .shop-tab-label, .shop-faq summary svg, .folie-hero-cta, .folie-hero-cta svg, .folie-category-cards a, .folie-category-image, .folie-category-cta svg { transition: none; }
  .shop-hero-card:hover, .folie-category-cards a:hover { transform: none; }
  .folie-category-cards a:hover .folie-category-image { transform: none; }
}
/* End of the first page (O22 S3-B). */

/* S2-B: the product card, compact and commercial (O22, section S2, variant B).
   v1's card (epdm-shop/card.html) kept in its order: the image, the title, the
   chips, the price, the action; denser, with what decides a purchase visible
   without a hover: the stock as text, the variants as a chip, one action
   named by what the buyer does next. The whole card opens the product (the
   title's link stretched over it); the action sits above that link.
   It replaces S0's card rules (.shop-cards … .shop-card-price, and the list
   under SF-B3); the few declarations that only undo S0's values are marked.
   Tokens and components: S0's (.shop-button, .shop-pill-discount,
   .shop-stock, .shop-sr). Folie changes nothing here: its tokens do. */

/* The grid: 2 columns on a phone, 3 from 40rem; beside the category's
   sidebar 3 from 64rem and 4 from 80rem (v1's category.html:144); the full
   width (the first page's tabs, six cards each: pages/home.go:76) 4 from
   64rem and the six in one row from 80rem. */
.shop-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 40rem) { .shop-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 64rem) {
  .shop-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .shop-category-layout.has-navigation .shop-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 80rem) {
  .shop-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .shop-category-layout.has-navigation .shop-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The card. */
.shop-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.shop-card:hover { border-color: color-mix(in srgb, var(--store-accent) 35%, var(--border)); box-shadow: var(--shadow-md); }
/* The focus of the title's link rings the whole card, the link it stands for. */
.shop-card:has(.shop-card-title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-card:has(.shop-card-title a:focus-visible) .shop-card-title a { outline: none; }

/* The image: 4:3 as v1 (card.html:3), the whole product on white, nothing
   cut; no image: v1's package on its soft gradient, named. The box keeps
   4:3 whatever the image's proportions (v1's overflow-hidden): a square or
   a portrait image no longer makes its card's media taller, so the titles
   and the prices of a row line up (the audit of 03.11, lot 3). */
.shop-card-media { position: relative; display: block; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: #fff; border-bottom: 1px solid var(--store-soft); }
.shop-card-media picture { display: contents; }
.shop-card-media img { display: block; width: 100%; height: 100%; aspect-ratio: auto; padding: .5rem; object-fit: contain; border-radius: 0; background: none; }
.shop-card-noimage { display: grid; align-content: center; justify-items: center; gap: .375rem; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: linear-gradient(135deg, var(--store-soft), #fff); color: var(--border-strong); font-size: var(--text-2xs); }
.shop-card-noimage svg { width: 2.5rem; height: 2.5rem; }
.shop-card-noimage span { color: var(--store-muted); }
.shop-card-media .shop-pill-discount { position: absolute; top: .5rem; left: 0; }
/* "N variante": v1's pill, where v1 puts it (card.html:12). */
.shop-card-media .shop-pill-variants { position: absolute; right: .5rem; bottom: .5rem; }
/* C8: the product's code, v1's dark label (card.html:9), in the image's
   corner the old discount ribbon left: shown on the card's hover or on a
   focus inside it, as v1 (opacity-0), a phone's too (the audit of 03.11,
   lot 3: always over the image, it was noise). Only its opacity changes,
   so nothing moves; a reader and an agent always have it in the markup. */
.shop-card-sku { position: absolute; top: .5rem; left: .5rem; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; max-width: calc(100% - 1rem); padding: .1875rem .4375rem; border-radius: var(--radius-sm); background: rgb(15 23 42 / .84); color: #fff; font-family: var(--font-mono); font-size: var(--text-micro); line-height: 1.3; letter-spacing: .02em; overflow-wrap: anywhere; pointer-events: none; opacity: 0; transition: opacity .2s; }
.shop-card-sku svg { width: .75rem; height: .75rem; flex-shrink: 0; color: #cbd5e1; }
.shop-card:hover .shop-card-sku, .shop-card:focus-within .shop-card-sku { opacity: 1; }

/* The body: the title, the chips, then the offer and the action at the
   bottom, so that the prices of a row line up. */
.shop-card-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: .75rem; }
.shop-card-title { margin: 0; min-height: calc(2em * 1.375); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); color: var(--store-fg); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.shop-card-title a { color: inherit; text-decoration: none; }
.shop-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.shop-card:hover .shop-card-title a { color: var(--store-accent); }

/* The chips: the card's attributes (v1's shop-card-attributes), in the
   Catalog's order; each says its name (v1 kept it for a reader and a
   hover), then its value, its range or "diverse" (C7). The icon is v1's
   for its slug (cards.go:33-38); another slug draws none. */
.shop-card-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.shop-card-facts li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; min-width: 0; max-width: 100%; padding: .1875rem .4375rem; border-radius: var(--radius-sm); background: var(--store-bg); font-size: var(--text-2xs); font-weight: 600; line-height: 1.25; color: #334155; font-variant-numeric: tabular-nums; }
.shop-card-facts svg { width: .875rem; height: .875rem; flex-shrink: 0; color: var(--store-accent); }
.shop-card-fact-icon g { display: none; }
.shop-card-fact-icon[data-icon="roll-front"] .fact-roll-front, .shop-card-fact-icon[data-icon="sheet-thickness"] .fact-sheet-thickness, .shop-card-fact-icon[data-icon="sheet-width"] .fact-sheet-width { display: inline; }
.shop-card-fact-icon:not([data-icon="roll-front"], [data-icon="sheet-thickness"], [data-icon="sheet-width"]) { display: none; }
.shop-card-fact-label { min-width: 0; font-weight: 500; color: var(--store-muted); overflow-wrap: anywhere; }
.shop-card-fact-value { min-width: 0; overflow-wrap: anywhere; }

/* C11: a seasonal hold, v1's winter label (card.html:42) with the site's
   own explanation; a partial one names the variants it concerns, a total
   one stands out, the details its only action. */
.shop-card-hold { display: flex; align-items: flex-start; gap: .375rem; margin: 0; padding: .3125rem .5rem; border-radius: var(--radius-sm); background: #f0f9ff; color: #075985; font-size: var(--text-2xs); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.shop-card-hold svg { width: .875rem; height: .875rem; flex-shrink: 0; margin-top: .0625rem; color: #0284c7; }
.shop-card-hold strong { font-weight: 700; }
.shop-card-hold[data-hold="all"] { background: #e0f2fe; color: #0c4a6e; box-shadow: inset 0 0 0 1px #bae6fd; }

/* The offer: v1's price (the whole figure large, the decimals and the
   currency smaller, then the unit: card.html:23), the stock beside it on a
   card wide enough (13rem: the category's four columns), under it on a
   phone's two. An old price stands above the price (below it in v1), so
   that the prices of a row line up, with a discount or without (the audit
   of 03.11, lot 3); the markup keeps the price first. */
.shop-card { container-type: inline-size; }
.shop-card-offer { display: flex; flex-direction: column; gap: .25rem; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--store-soft); }
@container (min-width: 13rem) {
  .shop-card-offer { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: .5rem; }
  .shop-card-was { flex-basis: 100%; }
}
.shop-card-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .25rem; margin: 0; padding: 0; font-weight: 700; line-height: 1.2; color: var(--store-fg); font-variant-numeric: tabular-nums; }
.shop-card-price .price-figure { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.01em; color: #0f172a; }
.shop-card-price .price-decimals { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--store-muted); }
.shop-card-price .price-symbol, .shop-card-price .price-unit { font-size: var(--text-xs); font-weight: 500; color: var(--store-muted); }
.shop-card-from { font-size: var(--text-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--store-accent); }
/* C9: the old price, then its percent beside it (v1 put the percent on the
   image, card.html:11); the price's paragraph says the price alone. */
.shop-card-was { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; margin: 0; font-size: var(--text-xs); line-height: 1.25; color: var(--store-muted); font-variant-numeric: tabular-nums; }
.shop-card-discount { display: inline-flex; align-items: center; padding: .125rem .4375rem; border-radius: var(--radius-full); background: var(--shop-discount); color: #fff; font-size: var(--text-micro); font-weight: 800; letter-spacing: var(--tracking-wide); line-height: 1.2; white-space: nowrap; }
.shop-card-price[data-reduced] .price-figure { color: var(--shop-discount); }
.shop-card-price.missing { font-size: var(--text-sm); font-weight: 500; color: var(--store-muted); }
/* The stock, always in words (v1 showed the word on a hover only); a still
   dot, the pulse of a whole grid is noise. */
.shop-card-stock { margin: 0; font-size: var(--text-2xs); font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.shop-card-stock .shop-stock-dot { width: .5rem; height: .5rem; box-shadow: none; }
.shop-card .shop-card-stock .shop-stock-dot::after { content: none; }
/* C10: "La comandă" is neither the stock on hand nor its end: its own blue. */
.shop-card-stock[data-stock="backorder"] { color: #1e40af; }
.shop-card-stock[data-stock="backorder"] .shop-stock-dot { background: #3b82f6; }
/* Audit 03.11, lot 2: a family's other open variants, when they differ from
   the one its link opens, on their own line under its label, aligned with
   its text; a reader hears them after a comma. */
.shop-card-stock:has(.shop-card-stock-more) { flex-wrap: wrap; row-gap: .125rem; white-space: normal; }
.shop-card-stock-more { flex-basis: 100%; padding-inline-start: .875rem; font-weight: 500; line-height: 1.25; color: var(--store-muted); }
/* The other cards of that list keep the same room under their stock, so the
   prices of a row still start at one height (lot 3's alignment). */
.shop-cards:has(.shop-card-stock-more) .shop-card-stock:not(:has(.shop-card-stock-more)) { padding-bottom: calc(1.25em + .125rem); }

/* The action: one per card, the width of the card, above the card's link.
   The cart for a simple product in stock (CTA), the choice for a product
   with variants (primary), the details otherwise (secondary). */
.shop-card-buy { position: relative; z-index: 2; margin: 0; }
.shop-card-action { position: relative; z-index: 2; width: 100%; min-height: 2.75rem; padding: 0 .75rem; gap: .375rem; font-size: var(--text-sm); }
.shop-card .shop-card-action { color: #fff; text-decoration: none; }
.shop-card .shop-button-secondary.shop-card-action { color: var(--store-fg); }
.shop-card .shop-button-secondary.shop-card-action:hover { color: var(--store-accent); }
.shop-card-action svg { transition: transform .2s; }
.shop-card-action:hover svg:last-child:not(:first-child) { transform: translateX(2px); }
@media (min-width: 64rem) and (pointer: fine) { .shop-card-action { min-height: 2.5rem; } }
/* A card of 11rem or less (a phone's two columns, the QA of Train 1, Q8):
   the arrow steps aside and the padding shrinks, so that "Alege varianta"
   stays on one line; of 10rem or less (360 px), the cart's icon too. A
   longer translation still wraps, whole. A desktop's six columns (11.75rem)
   keep the action as it was. */
@container (max-width: 11rem) {
  .shop-card-action { padding-inline: .5rem; }
  .shop-card-action > span + svg { display: none; }
}
@container (max-width: 10rem) {
  .shop-card-action > svg:first-child:not(:last-child) { display: none; }
}
/* C13: the quick cart while its request runs (HTMX's class on the form; the
   button is disabled) and the card's own alert when it fails without the
   cart's answer, which the dialog shows otherwise. */
.shop-card-buy.htmx-request .shop-card-action { cursor: progress; }
.shop-card-buy-error { margin: 0; }
.shop-card-buy-error:not(:empty) { margin: .5rem 0 0; color: #991b1b; font-size: var(--text-xs); line-height: 1.35; }

/* Out of stock: the image faded, the price muted, the details only. */
.shop-card:has(.shop-card-stock[data-stock="out"]) .shop-card-media img { opacity: .55; filter: grayscale(.6); }
.shop-card:has(.shop-card-stock[data-stock="out"]) .price-figure { color: var(--store-muted); }

@media (prefers-reduced-motion: reduce) {
  .shop-card, .shop-card-action svg, .shop-card-sku { transition: none; }
}

/* The list (data-view="list", epdm-shop-listing.js): one card per row, the
   image on the left. On a phone (the stored choice still applies there) the
   body stacks; from 48rem the title and chips, the offer and the action
   stand in three columns, a row of a price list. */
.shop-category-layout .shop-category-own[data-view="list"] > .shop-cards { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.shop-category-own[data-view="list"] .shop-card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto; column-gap: 0; padding: 0; }
.shop-category-own[data-view="list"] .shop-card-media { display: flex; flex-direction: column; align-items: center; aspect-ratio: auto; min-height: 6.5rem; border-bottom: 0; border-right: 1px solid var(--store-soft); }
.shop-category-own[data-view="list"] .shop-card-media img { flex: 1 1 0; min-height: 0; height: auto; }
/* The image of a row is small: the pill and the code stand under it, not
   over it. */
.shop-category-own[data-view="list"] .shop-card-media .shop-pill-variants { position: static; margin: 0 .25rem .5rem; box-shadow: none; }
.shop-category-own[data-view="list"] .shop-card-sku { position: static; margin: 0 .25rem .25rem; }
.shop-category-own[data-view="list"] .shop-card-title { min-height: 0; margin-top: 0; font-size: var(--text-base); }
.shop-category-own[data-view="list"] .shop-card-offer { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: .75rem; }
.shop-category-own[data-view="list"] .shop-card-price { padding-top: 0; border-top: 0; font-size: inherit; }
@media (min-width: 48rem) {
  .shop-category-own[data-view="list"] .shop-card { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .shop-category-own[data-view="list"] .shop-card-media { min-height: 8.5rem; }
  .shop-category-own[data-view="list"] .shop-card-body { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 11rem; grid-template-rows: 1fr 1fr; grid-template-areas: "title offer buy" "facts offer buy"; gap: .5rem 1.5rem; align-items: center; padding: 1rem 1.25rem; }
  .shop-category-own[data-view="list"] .shop-card-body:not(:has(.shop-card-facts)) { grid-template-rows: 1fr; grid-template-areas: "title offer buy"; }
  .shop-category-own[data-view="list"] .shop-card-title { grid-area: title; align-self: end; }
  .shop-category-own[data-view="list"] .shop-card-body:not(:has(.shop-card-facts)) .shop-card-title { align-self: center; }
  .shop-category-own[data-view="list"] .shop-card-facts { grid-area: facts; align-self: start; }
  /* C11: a hold under the title and the chips, in their column. */
  .shop-category-own[data-view="list"] .shop-card-hold { grid-column: 1; align-self: start; }
  .shop-category-own[data-view="list"] .shop-card-offer { grid-area: offer; flex-direction: column; align-items: flex-start; margin: 0; padding: 0 0 0 1.25rem; border-top: 0; border-left: 1px solid var(--store-soft); }
  .shop-category-own[data-view="list"] .shop-card-was { flex-basis: auto; }
  .shop-category-own[data-view="list"] .shop-card-buy, .shop-category-own[data-view="list"] .shop-card-body > .shop-card-action { grid-area: buy; }
}

/* The pages of an entity (product, category, editorial, errors). */
.shop-page { max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.shop-page h1 { font-size: 1.75rem; line-height: 1.2; margin: .5rem 0 1rem; color: #1e293b; }
.shop-page .lead { color: var(--store-muted); }
.shop-page .rich-text a { color: var(--store-accent); }
.shop-page .pages { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 1.5rem 0; }
.shop-page .pages [aria-current] { font-weight: 700; }
.shop-page .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; margin: 1rem 0; }
.shop-page .gallery img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: .75rem; background: #fff; }
.shop-page .product-price { margin: 1rem 0 1.5rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; }
.shop-page .product-price .price { font-size: 1.6rem; font-weight: 700; margin: 0; }
.shop-page .note, .shop-page .regular { color: var(--store-muted); font-size: .9rem; }
.shop-page table { border-collapse: collapse; width: 100%; font-size: .9rem; background: #fff; }
.shop-page th, .shop-page td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--border); }
.shop-page .specifications dl { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: .25rem 1rem; }
.shop-page .specifications dd { margin: 0; }
.shop-page .product-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--store-muted); font-size: .9rem; }

/* The footer: v1's slate gradient, its columns, its bottom bar. */
.shop-footer { background: linear-gradient(to bottom, var(--shop-footer-from), var(--shop-footer-to)); color: #fff; }
.shop-footer-grid { max-width: 80rem; margin: 0 auto; padding: 2.5rem 1rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.shop-footer p { margin: 0; }
.shop-footer-logo .shop-logo { filter: brightness(0) invert(1); height: 2.5rem; }
.shop-footer-logo { display: inline-block; margin-bottom: 1rem; color: #fff; text-decoration: none; }
.shop-footer-company, .shop-footer address, .shop-footer-mail { font-size: .875rem; color: #94a3b8; font-style: normal; }
.shop-footer-company .strong { font-weight: 500; color: #fff; }
.shop-footer address, .shop-footer-mail { margin-top: .75rem; }
.shop-footer a { color: #cbd5e1; text-decoration: none; }
.shop-footer a:hover { color: #fff; }
.shop-footer-column h2 { margin: 0 0 1rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.shop-footer-column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .875rem; }
.shop-payments img { height: 6rem; width: auto; }
.shop-footer-bottom { border-top: 1px solid rgb(51 65 85 / .5); max-width: 80rem; margin: 0 auto; padding: 1.25rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.shop-copyright { font-size: .75rem; color: #94a3b8; }
.shop-copyright span { font-weight: 600; color: #cbd5e1; }
.shop-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.shop-marks img[width="61"], .shop-marks img[width="33"] { height: 1.25rem; width: auto; opacity: .7; }
.shop-marks img[height="48"] { height: 3rem; width: auto; }

/* folie-iaz (body.theme-folie-iaz): v1's folie-iaz/theme.css, "albastru de
   lac" with a coral accent; white text keeps AA on every token
   (TestFoliePaletteContrast). It overrides v1's brand tokens only
   (folie-iaz/theme.css:8-20): the states, the type, the radii and the
   shadows are EPDM's, and body.shop's glows follow its accent and CTA. Its
   first page's hero and categories are in the first page's block. */
body.theme-folie-iaz {
  --store-accent: #155e75; --shop-brand-dark: #164e63; --shop-brand-light: #0e7490;
  --accent-soft: #e0f2f7; --focus: #155e75; --shop-cta-from: #b3401a; --shop-cta-to: #c2410c;
  --folie-hero-from: #082f49; --folie-hero-via: #164e63; --folie-hero-to: #155e75;
  --folie-hero-cta: #fdba74; --folie-hero-cta-hover: #fed7aa; --folie-hero-ink: #082f49;
}

/* The category's trust bar (v1's shop-category-trust): one scrolling row on
   a phone, wrapped and centred from a tablet up. */
.shop-trust { margin: 0 0 1rem; border: 1px solid var(--store-soft); background: var(--store-bg); border-radius: .5rem; padding: .6rem .75rem; }
.shop-trust ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .75rem 1.25rem; overflow-x: auto; scrollbar-width: none; }
.shop-trust li { display: flex; flex-shrink: 0; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 500; color: #475569; white-space: nowrap; }
.shop-trust svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--store-accent); }
@media (min-width: 48rem) { .shop-trust ul { flex-wrap: wrap; justify-content: center; overflow: visible; } }

/* The 404 and 410 pages (v1's epdm-shop not-found): the status on two soft
   circles, the heading, the message, the home button, the 404's hint. */
.shop-absence { display: flex; justify-content: center; padding: 4rem 1rem; background: linear-gradient(to bottom, rgb(248 250 252 / .5), #fff); }
.shop-absence-box { max-width: 32rem; text-align: center; }
.shop-absence-status { position: relative; display: inline-grid; place-items: center; width: 10rem; height: 10rem; margin: 0 0 1.5rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--store-accent) 10%, transparent) 0 4rem, color-mix(in srgb, var(--store-accent) 5%, transparent) 4rem); font-size: 4.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--store-accent); }
.shop-absence h1 { margin: 0 0 .75rem; font-size: 1.5rem; color: #1e293b; }
.shop-absence-box > p { margin: 0 0 2rem; line-height: 1.6; color: #475569; }
.shop-absence-box > .shop-absence-help { margin: 2rem 0 0; font-size: .875rem; color: #64748b; }
.shop-anpc img { display: block; height: 3.125rem; width: auto; }

/* A hub's sections (v1's): each child's title, its count, its first cards
   and "Vezi toate" where the site's limit left some out. */
.shop-section { margin: 0 0 2.5rem; scroll-margin-top: 5rem; }
.shop-section h2 { margin: 0 0 1rem; font-size: 1.125rem; color: #1e293b; }
.shop-section h2 a { color: inherit; text-decoration: none; }
.shop-section h2 a:hover { color: var(--store-accent); }
.shop-section-count { font-weight: 400; color: var(--store-muted); }
.shop-section-more { margin: 1rem 0 0; text-align: center; }
.shop-section-more a { font-weight: 600; font-size: .875rem; }

/* O8 A1: category sidebar */
.shop-category-layout { overflow-wrap: anywhere; }
.shop-category-layout, .shop-category-body { min-width: 0; }
.shop-category-aside { display: none; }
.shop-category-icon g { display: none; }
.shop-category-icon[data-sidebar-icon="layers"] .sidebar-icon-layers,
.shop-category-icon[data-sidebar-icon="package"] .sidebar-icon-package,
.shop-category-icon[data-sidebar-icon="wrench"] .sidebar-icon-wrench,
.shop-category-icon[data-sidebar-icon="phone"] .sidebar-icon-phone,
.shop-category-icon[data-sidebar-icon="leaf"] .sidebar-icon-leaf,
.shop-category-icon[data-sidebar-icon="home"] .sidebar-icon-home { display: inline; }
.shop-category-aside, .shop-category-drawer { border: 1px solid var(--border); border-radius: .75rem; background: #fff; }
.shop-category-aside { align-self: start; overflow: hidden; }
.shop-category-aside h2 { margin: 0; padding: .9rem 1rem; border-bottom: 1px solid var(--store-soft); background: linear-gradient(to right, var(--store-bg), #fff); font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; }
.shop-category-nav, .shop-category-toc ul { padding: .75rem; }
.shop-category-nav ul, .shop-category-toc ul { list-style: none; margin: 0; }
.shop-category-nav > ul, .shop-category-flat { padding: 0; }
.shop-category-nav li + li, .shop-category-toc li + li { margin-top: .25rem; }
.shop-category-branch > ul { margin: .25rem 0 .5rem 1rem; padding: 0 0 0 .75rem; border-left: 2px solid var(--store-soft); }
.shop-category-nav > ul > li { position: relative; }
.shop-category-nav > ul > li:has(> .shop-category-branch) > a { padding-right: 2.75rem; }
.shop-category-branch > summary { position: absolute; top: .5rem; right: .25rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .375rem; list-style: none; cursor: pointer; color: var(--store-accent); }
.shop-category-branch > summary::-webkit-details-marker { display: none; }
.shop-category-branch > summary::before { content: "⌄"; }
.shop-category-branch[open] > summary::before { transform: rotate(180deg); }
.shop-category-branch > summary:hover { background: var(--store-soft); }
.shop-category-link, .shop-category-toc a { display: flex; align-items: center; gap: .625rem; border-radius: .5rem; padding: .625rem .75rem; color: var(--store-fg); font-size: .875rem; font-weight: 500; text-decoration: none; }
.shop-category-link > span:last-child { min-width: 0; }
.shop-category-branch .shop-category-link { font-size: .8125rem; }
.shop-category-link:hover, .shop-category-toc a:hover { background: var(--store-bg); color: var(--store-accent); }
.shop-category-link[aria-current="page"], .shop-category-link[data-current="true"], .shop-category-toc .is-first { background: color-mix(in srgb, var(--store-accent) 10%, #fff); color: var(--store-accent); font-weight: 600; }
.shop-category-nav .emphasis { font-weight: 700; color: var(--store-accent); }
.shop-category-icon { display: inline-flex; flex: 0 0 1rem; color: var(--store-accent); }
.shop-category-icon svg { width: 1rem; height: 1rem; }
.shop-category-drawer { margin: 0 0 1.25rem; }
.shop-category-drawer > summary { padding: .75rem 1rem; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--store-accent); }
.shop-category-drawer[open] > summary { border-bottom: 1px solid var(--border); }
.shop-category-sections { display: flex; gap: .5rem; overflow-x: auto; margin: 0 0 1rem; padding: .25rem .125rem .5rem; }
.shop-category-sections a { flex: 0 0 auto; max-width: 100%; padding: .375rem .75rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; font-size: .875rem; text-decoration: none; }
.shop-category-own { scroll-margin-top: 5rem; }
.shop-category-family { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 2rem; font-size: .75rem; font-weight: 500; text-align: center; text-transform: uppercase; letter-spacing: .06em; color: var(--store-muted); }
.shop-category-family::before, .shop-category-family::after { content: ""; flex: 1 0 1rem; height: 1px; background: var(--border); }
@media (min-width: 64rem) {
  .shop-category-layout.has-navigation { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.5rem; }
  .shop-category-aside { display: block; }
  .shop-category-drawer, .shop-category-sections { display: none; }
}
/* End O8 A1: category sidebar */
/* O8 A3: category listing controls */
.shop-listing-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin: 0 0 1rem; }
.shop-listing-control { position: relative; max-width: 100%; }
.shop-listing-control > summary { display: flex; align-items: center; gap: .375rem; min-height: 2.5rem; padding: .5rem .875rem; border: 1px solid var(--border); border-radius: .5rem; background: #fff; color: var(--store-muted); font-size: .875rem; cursor: pointer; list-style: none; }
.shop-listing-control > summary::-webkit-details-marker { display: none; }
.shop-listing-control > summary::after { content: "⌄"; margin-left: .25rem; color: var(--store-muted); }
.shop-listing-control > summary strong { color: var(--store-fg); font-weight: 600; }
.shop-listing-control > summary:hover, .shop-listing-control[open] > summary { border-color: var(--store-accent); }
.shop-listing-control ul { position: absolute; right: 0; z-index: 5; min-width: 100%; max-width: calc(100vw - 2rem); margin: .25rem 0 0; padding: .375rem; list-style: none; border: 1px solid var(--border); border-radius: .5rem; background: #fff; box-shadow: 0 10px 25px rgba(15, 23, 42, .12); }
.shop-listing-control a { display: block; padding: .5rem .75rem; border-radius: .375rem; color: var(--store-fg); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.shop-listing-control a:hover, .shop-listing-control a:focus-visible { background: var(--store-bg); color: var(--store-accent); }
.shop-listing-control a[aria-current="true"] { background: color-mix(in srgb, var(--store-accent) 10%, #fff); color: var(--store-accent); font-weight: 600; }
/* End O8 A3: category listing controls */

/* The buyer's order (v1's epdm-shop order.html): the crumbs, the state on a
   circle with the title (from a tablet up; on a phone, in the card's band),
   the card with its number, date and state, the lines with their numbers,
   the totals ending dark, then the account's forms, the way back and the
   signs. */
.shop-order { max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem; }
.shop-crumbs { margin: 0 0 1rem; font-size: .75rem; color: var(--store-muted); }
.shop-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.shop-crumbs a { display: flex; align-items: center; gap: .375rem; color: inherit; text-decoration: none; }
.shop-crumbs a:hover { color: var(--store-accent); }
.shop-crumbs svg { width: .875rem; height: .875rem; }
.shop-crumbs li[aria-hidden] { display: flex; color: #cbd5e1; }
.shop-crumbs li[aria-hidden] svg { width: .75rem; height: .75rem; }
.shop-crumbs li[aria-current] { font-weight: 500; color: var(--store-fg); }
.shop-order-body { max-width: 42rem; margin: 0 auto; }
.shop-order-notice { margin: 0 0 1.5rem; padding: 1rem; border: 1px solid #a7f3d0; border-radius: .75rem; background: #ecfdf5; color: #065f46; font-size: .875rem; font-weight: 600; }
.shop-order-notice.shop-order-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.shop-order-hero { display: none; margin: 0 0 2.5rem; text-align: center; }
.shop-order-mark { display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; margin: 0 auto 1.5rem; border-radius: 50%; color: #fff; background: linear-gradient(to bottom right, #34d399, #059669); box-shadow: 0 10px 25px -5px rgb(16 185 129 / .3); }
.shop-order-mark svg { width: 3rem; height: 3rem; }
.shop-order-hero[data-order-state="cancelled"] .shop-order-mark, .shop-order-hero[data-order-state="returned"] .shop-order-mark { background: #64748b; box-shadow: none; }
.shop-order-hero[data-order-state="due"] .shop-order-mark { background: #f59e0b; box-shadow: none; }
.shop-order-hero h1 { margin: 0 0 .75rem; font-size: 1.875rem; line-height: 1.2; }
.shop-order-hero p { margin: 0; font-size: 1.125rem; color: var(--store-muted); }
.shop-order-panel { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .05); }
.shop-order-panel h2 { margin: 0 0 .5rem; font-size: 1.125rem; }
.shop-order-panel p { margin: 0 0 .75rem; font-size: .875rem; color: var(--store-muted); }
.shop-order-card { margin: 0 0 1rem; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: 0 10px 15px -3px rgb(226 232 240 / .5); }
.shop-order-band { padding: .625rem .75rem; color: #fff; background: linear-gradient(to right, var(--store-accent), var(--shop-brand-light)); }
.shop-order-band-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .375rem; font-size: .75rem; font-weight: 500; color: rgb(255 255 255 / .9); }
.shop-order-band-mark { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #059669; }
.shop-order-band-mark[data-order-state="cancelled"], .shop-order-band-mark[data-order-state="returned"] { background: #64748b; }
.shop-order-band-mark[data-order-state="due"] { background: #f59e0b; }
.shop-order-band-mark svg { width: .75rem; height: .75rem; }
.shop-order-band-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.shop-order-band-label, .shop-order-date { display: none; margin: 0 0 .25rem; font-size: .75rem; color: rgb(255 255 255 / .8); }
.shop-order-band-label { text-transform: uppercase; letter-spacing: .05em; }
.shop-order-band h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.shop-order-band-end { text-align: right; }
.shop-order-pill { display: inline-flex; align-items: center; gap: .375rem; margin: 0; padding: .25rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #d1fae5; color: #064e3b; }
.shop-order-dot { width: .375rem; height: .375rem; border-radius: 50%; background: #059669; }
.shop-order-pill[data-order-state="pending"] { background: #fef3c7; color: #78350f; }
.shop-order-pill[data-order-state="pending"] .shop-order-dot { background: #f59e0b; }
.shop-order-pill[data-order-state="cancelled"], .shop-order-pill[data-order-state="returned"] { background: #e2e8f0; color: #1e293b; }
.shop-order-pill[data-order-state="cancelled"] .shop-order-dot, .shop-order-pill[data-order-state="returned"] .shop-order-dot { background: #64748b; }
.shop-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* QA P6: "Sari la conținut" is the page's first stop, hidden until it has
   the focus; its target, after the header's partial, stops below the
   sticky header from 64rem, as the contact's targets. */
.shop-skip { position: absolute; z-index: 60; top: .5rem; left: .5rem; padding: .75rem 1rem; border-radius: var(--radius-lg); background: #fff; color: var(--store-fg); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transform: translateY(calc(-100% - 1rem)); }
.shop-skip:focus { transform: none; outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 10px 30px -12px rgb(15 23 42 / .45); }
.shop-skip-target { display: block; height: 0; }
.shop-skip-target:focus { outline: 0; }
@media (min-width: 64rem) { .shop-skip-target { scroll-margin-top: 5rem; } }
.shop-order-items { padding: .75rem; border-top: 2px solid var(--border); }
.shop-order-items h3 { margin: 0 0 .5rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--store-muted); }
.shop-order-items ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: shop-line; }
.shop-order-items li { position: relative; padding: .625rem .625rem .625rem 1.375rem; border: 1px solid var(--border); border-radius: .75rem; background: linear-gradient(to bottom right, #f8fafc, #fff); counter-increment: shop-line; }
.shop-order-items li::before { content: counter(shop-line); position: absolute; top: .625rem; left: -.375rem; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--store-accent); color: #fff; font-size: .5625rem; font-weight: 700; box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--store-accent) 30%, transparent); }
.shop-order-line { display: flex; align-items: flex-start; gap: .5rem; }
.shop-order-line > div { flex: 1; min-width: 0; }
.shop-order-line p { margin: 0; }
.shop-order-line-title { margin: 0 0 .25rem; font-size: .875rem; font-weight: 600; line-height: 1.375; }
.shop-order-line-quantity { font-size: .625rem; color: #64748b; }
.shop-order-line-total { flex-shrink: 0; font-size: .875rem; font-weight: 700; text-align: right; }
.shop-order-note { margin: .375rem 0 0; font-size: .75rem; color: #92400e; }
.shop-order-totals { padding: .75rem; background: linear-gradient(to bottom, #f8fafc, #fff); }
.shop-order-totals dl { margin: 0; display: grid; gap: .375rem; }
.shop-order-totals dl > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: #fff; }
.shop-order-totals dt { font-size: .75rem; color: var(--store-muted); }
.shop-order-totals dd { margin: 0; font-size: .875rem; font-weight: 600; color: #334155; }
.shop-order-totals .shop-order-cod { border-color: #fde68a; background: #fffbeb; }
.shop-order-totals .shop-order-cod dt { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #92400e; }
.shop-order-totals .shop-order-cod dd { color: #78350f; }
.shop-order-totals .shop-order-total { margin-top: .125rem; padding: .75rem; border: 0; border-radius: .75rem; background: linear-gradient(to bottom right, #1e293b, #0f172a, #1e293b); }
.shop-order-totals .shop-order-total dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #cbd5e1; }
.shop-order-totals .shop-order-total dd { font-size: 1.25rem; font-weight: 700; color: #fff; }
.shop-order-documents { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.shop-order-secondary, .shop-account-secondary { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; color: var(--store-fg); font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.shop-order-secondary:hover, .shop-account-secondary:hover { border-color: var(--store-accent); color: var(--store-accent); }
.shop-order-secondary:focus-visible, .shop-account-secondary:focus-visible, .shop-order-primary:focus-visible, .shop-order-danger:focus-visible, .shop-account-primary:focus-visible, .order-pay-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-order-primary, .shop-order-danger, .shop-account-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border: 0; border-radius: .75rem; font: inherit; font-size: .875rem; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--shop-cta-from), var(--shop-cta-to)); box-shadow: var(--shadow-cta); }
.shop-order-danger { background: var(--danger-ink); box-shadow: none; }
.shop-order-primary:disabled, .shop-account-primary:disabled { opacity: .6; cursor: wait; }
.shop-order-withdrawal form { display: grid; gap: .75rem; }
.shop-order-withdrawal fieldset { margin: 0; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; display: grid; gap: .5rem; }
.shop-order-withdrawal legend { padding: 0 .25rem; font-size: .875rem; font-weight: 600; }
.shop-order-choice { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; }
.shop-order-choice input { margin-top: .3rem; accent-color: var(--store-accent); }
.shop-order-field { display: grid; gap: .375rem; font-size: .875rem; font-weight: 600; }
.shop-order-field textarea { min-height: 6rem; padding: .625rem .75rem; border: 1px solid #cbd5e1; border-radius: .75rem; font: inherit; font-weight: 400; }
.shop-order-requests pre { margin: 0 0 .75rem; padding: .75rem; overflow-x: auto; border-radius: .5rem; background: var(--store-soft); font-size: .75rem; white-space: pre-wrap; }
.shop-order-continue { margin: 2rem 0 2.5rem; text-align: center; }
.shop-order-cta { display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 2rem; border-radius: 1rem; font-weight: 600; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--store-accent), var(--shop-brand-light)); box-shadow: 0 8px 30px -5px color-mix(in srgb, var(--store-accent) 40%, transparent); }
.shop-order-cta svg { width: 1rem; height: 1rem; transition: transform .2s; }
.shop-order-cta:hover svg { transform: translateX(.25rem); }
.shop-order-signs { list-style: none; margin: 0; padding: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; border-top: 1px solid var(--border); }
.shop-order-signs li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--store-muted); }
.shop-order-sign { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: #ecfdf5; color: #059669; }
.shop-order-sign-due, .shop-order-sign-time { background: #fffbeb; color: #d97706; }
.shop-order-sign svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 40rem) {
  .shop-order { padding: 1.5rem; }
  .shop-order-hero { display: block; }
  .shop-order-band-title { display: none; }
  .shop-order-card { margin-bottom: 2rem; border-radius: 1.5rem; box-shadow: 0 20px 25px -5px rgb(226 232 240 / .5); }
  .shop-order-band { padding: 1.5rem; }
  .shop-order-band-row { align-items: flex-start; gap: 1rem; }
  .shop-order-band-label, .shop-order-date { display: block; }
  .shop-order-band h2 { font-size: 1.5rem; }
  .shop-order-items, .shop-order-totals { padding: 1.25rem 1.5rem; }
  .shop-order-items h3 { margin-bottom: 1rem; font-size: .75rem; }
  .shop-order-items ol { gap: 1rem; }
  .shop-order-items li { padding: 1rem 1rem 1rem 2rem; border-radius: 1rem; }
  .shop-order-items li::before { top: 1rem; left: -.5rem; width: 1.5rem; height: 1.5rem; font-size: .625rem; }
  .shop-order-line { gap: 1rem; }
  .shop-order-line-title { margin-bottom: .5rem; font-size: 1rem; }
  .shop-order-line-quantity { font-size: .75rem; }
  .shop-order-line-total { font-size: 1.125rem; }
  .shop-order-totals dl { gap: .75rem; }
  .shop-order-totals dl > div { padding: .75rem 1rem; border-radius: .75rem; }
  .shop-order-totals dt { font-size: .875rem; }
  .shop-order-totals .shop-order-total { margin-top: .25rem; padding: 1.25rem; border-radius: 1rem; }
  .shop-order-totals .shop-order-total dt { font-size: .875rem; }
  .shop-order-totals .shop-order-total dd { font-size: 1.875rem; }
}
@media (min-width: 48rem) { .shop-order-hero h1 { font-size: 2.25rem; } .shop-order-mark { width: 7rem; height: 7rem; } .shop-order-mark svg { width: 3.5rem; height: 3.5rem; } .shop-order-band h2 { font-size: 1.875rem; } }

/* The buyer's account (v1's shared account.html in epdm-shop): signed out,
   the welcome beside the sign-in panel; a link's confirmation; signed in,
   the greeting, the profile and the address book. */
.shop-account { max-width: 75rem; min-height: 60vh; margin: 0 auto; padding: 2.5rem 1.5rem; }
/* hidden wins over the classes' display: the code's form and "a new code"
   stay hidden until the script shows them. */
.shop-account [hidden], .shop-account-status:empty { display: none; }
.shop-account-status { margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--store-soft); font-size: .875rem; font-weight: 600; }
.shop-account-start { display: grid; gap: 2.5rem; padding: 2rem 0; }
.shop-account-eyebrow { margin: 0; font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--store-accent); }
.shop-account-intro h1 { margin: .5rem 0 1rem; font-size: 2.25rem; line-height: 1.2; }
.shop-account-intro p { margin: 0 0 1rem; }
.shop-account-intro .shop-account-note { margin-top: 2.5rem; }
.shop-account-note { margin: 0; font-size: .875rem; color: var(--store-muted); }
.shop-account-panel { padding: 2rem; border: 1px solid #cbd5e1; border-radius: 1rem; background: #fff; }
.shop-account-panel h2 { margin: 0 0 .75rem; font-size: 1.5rem; }
.shop-account-panel h2 + p { margin: 0 0 1.25rem; color: var(--store-muted); }
.shop-account-panel h2:not(:first-child) { margin-top: 2rem; }
.shop-account-form { display: grid; gap: .5rem; margin: 0 0 1.25rem; }
.shop-account-form label { margin-top: .5rem; font-size: .875rem; font-weight: 600; }
.shop-account-form input { min-height: 3rem; padding: .625rem .875rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); font: inherit; }
.shop-account-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.shop-account-form button { margin-top: .75rem; }
.shop-account-link { max-width: 36rem; margin: 2rem auto; padding: 2rem; border: 1px solid #cbd5e1; border-radius: 1rem; background: #fff; }
.shop-account-link h1 { margin: 0 0 1rem; font-size: 1.875rem; }
.shop-account-link p { margin: 0 0 1rem; }
/* Signed out (audit lot 5): the help for a failed save or sign-out
   follows the sign-in form, quiet, until its fragment opens it. Its
   summary is a 44 px target (QA of Train 1, Q3), keeping its marker; the
   height it gains falls under its text, which stays where it was. */
.shop-account-panel > .shop-account-help, .shop-account-link > .shop-account-help { margin: 1rem 0 0; font-size: .875rem; color: var(--store-muted); }
.shop-account-panel > .shop-account-help summary, .shop-account-link > .shop-account-help summary { min-height: 2.75rem; padding: .5rem 0; cursor: pointer; }
.shop-account-panel > .shop-account-help p, .shop-account-link > .shop-account-help p { margin: .25rem 0 0; }
.shop-account-link > form + .shop-account-note { margin-top: 1rem; }
/* One column (phones, tablets): the intro stays short, so "Trimite
   codul" shows in the first screen, above the bottom bar (390×844). */
@media (max-width: 63.99rem) {
  .shop-account-start { gap: 1.5rem; padding: 0; }
  .shop-account-intro h1 { margin: .25rem 0 .5rem; font-size: 1.625rem; }
  .shop-account-intro p { margin-bottom: .5rem; }
  .shop-account-intro .shop-account-note { margin-top: .75rem; }
  .shop-account-start .shop-account-panel { padding: 1.5rem; }
}
/* A short phone (375×667): the same texts, closer together, so "Trimite
   codul" still ends above the bottom bar; taller screens keep the above. */
@media (max-width: 63.99rem) and (max-height: 45rem) {
  .shop-account:has(> .shop-account-start) { padding-top: 1rem; }
  .shop-account-start { gap: 1rem; }
  .shop-account-intro h1 { font-size: 1.375rem; }
  .shop-account-start .shop-account-panel { padding: 1rem 1.5rem 1.5rem; }
  .shop-account-start .shop-account-panel h2 { margin-bottom: .5rem; font-size: 1.25rem; }
  .shop-account-start .shop-account-panel h2 + p { margin-bottom: .75rem; }
  .shop-account-start .shop-account-form label { margin-top: 0; }
  .shop-account-start .shop-account-form button { margin-top: .5rem; }
}
/* A shorter one (360×640, QA of Train 1): the same texts, 20 px closer
   again, so "Trimite codul" still ends above the bottom bar. */
@media (max-width: 63.99rem) and (max-height: 41rem) {
  .shop-account:has(> .shop-account-start) { padding-top: .75rem; }
  .shop-account-start { gap: .75rem; }
  .shop-account-intro .shop-account-note { margin-top: .5rem; }
  .shop-account-start .shop-account-panel { padding-top: .75rem; }
  .shop-account-start .shop-account-panel h2 + p { margin-bottom: .5rem; }
}
.shop-account-head { margin: 0 0 2rem; }
.shop-account-head h1 { margin: 0; font-size: 1.875rem; overflow-wrap: anywhere; }
.shop-account-head p { margin: .25rem 0 0; color: var(--store-muted); }
.shop-account-grid { display: grid; gap: 2rem; }
.shop-account-address { margin: 0 0 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: .75rem; }
.shop-account-address h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.shop-account-address p { margin: 0 0 .25rem; font-size: .875rem; }
.shop-account-out { margin: 2rem 0 0; }
@media (min-width: 64rem) {
  .shop-account-start { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .shop-account-intro { align-self: center; }
  .shop-account-grid { grid-template-columns: 1fr 1fr; }
}
/* begin O26 A2b: the address book — only .shop-account and its descendants,
   with the theme's existing variables. */
.shop-account #account-profile, .shop-account #address-book, .shop-account #account-orders { scroll-margin-top: 6rem; }
.shop-account .shop-account-start > * { min-width: 0; }
.shop-account .shop-account-form input { min-width: 0; max-width: 100%; }
.shop-account .shop-account-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.shop-account .shop-account-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; }
.shop-account .shop-account-nav a:hover { border-color: var(--store-accent); }
.shop-account .shop-account-nav a:focus-visible, .shop-account .shop-account-problems:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-account .shop-account-book:focus { outline: none; }
.shop-account .shop-account-book-feedback p { margin: 0 0 1rem; padding: .875rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--store-soft); font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.shop-account .shop-account-book-feedback [data-address-state="saved"], .shop-account .shop-account-book-feedback [data-address-state="defaulted"], .shop-account .shop-account-book-feedback [data-address-state="deleted"] { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.shop-account .shop-account-book-feedback [data-address-state="invalid"], .shop-account .shop-account-book-feedback [data-address-state="conflict"], .shop-account .shop-account-book-feedback [data-address-state="full"], .shop-account .shop-account-book-feedback [data-address-state="unavailable"], .shop-account .shop-account-book-feedback [data-address-lost] { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); }
.shop-account .shop-account-book-feedback [data-address-uncertain] { display: grid; gap: .75rem; justify-items: start; border-color: var(--warning); background: var(--warning-soft); color: var(--store-fg); }
.shop-account .shop-account-book-feedback a { color: inherit; }
.shop-account .shop-account-book-feedback:focus { outline: none; }
.shop-account .shop-account-book-feedback button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border-strong); border-radius: .75rem; background: #fff; color: var(--store-fg); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.shop-account .shop-account-book-feedback button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-account .shop-account-book-feedback button:disabled { opacity: .6; cursor: wait; }
.shop-account .shop-account-book h3 { margin: 1.5rem 0 .75rem; font-size: 1.125rem; }
.shop-account .shop-account-editor h3, .shop-account .shop-account-delete h3 { margin-top: 0; }
.shop-account .shop-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.25rem 0 0; }
.shop-account .shop-account-actions button { margin-top: 0; }
.shop-account .shop-account-book .shop-account-secondary { min-height: 2.75rem; }
/* hidden (the model's rules, the person/company choice) wins over the fields' display. */
.shop-account [data-address-field][hidden], .shop-account [data-address-company][hidden] { display: none; }
.shop-account .shop-account-fields { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.shop-account .shop-account-field { display: grid; gap: .375rem; min-width: 0; }
.shop-account .shop-account-field label { margin: 0; }
.shop-account .shop-account-field input, .shop-account .shop-account-field select { min-width: 0; max-width: 100%; }
.shop-account .shop-account-field select { min-height: 3rem; padding: .625rem .875rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); font: inherit; color: inherit; }
.shop-account .shop-account-field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.shop-account .shop-account-field:has(:required) > label::after, .shop-account .shop-account-field:has([aria-required="true"]) > label::after { content: "*"; margin-left: .125rem; color: var(--danger); }
.shop-account .shop-account-field [aria-invalid="true"] { border-color: var(--danger-line); background: var(--danger-soft); }
.shop-account .shop-account-field .shop-account-note, .shop-account .shop-account-check .shop-account-note { font-size: .8125rem; }
.shop-account [data-address-problem] { font-size: .8125rem; line-height: 1.4; color: var(--danger-ink); overflow-wrap: anywhere; }
.shop-account .shop-account-choice, .shop-account .shop-account-company { display: grid; gap: .75rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; }
.shop-account .shop-account-choice legend, .shop-account .shop-account-company legend { padding: 0 .25rem; font-size: .875rem; font-weight: 600; }
.shop-account .shop-account-choice label, .shop-account .shop-account-check label { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin: 0; font-size: .875rem; font-weight: 500; cursor: pointer; }
.shop-account .shop-account-choice input, .shop-account .shop-account-check input { flex: none; width: 1.125rem; height: 1.125rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--store-accent); }
.shop-account .shop-account-choice input:focus-visible, .shop-account .shop-account-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-account .shop-account-check { display: grid; gap: .125rem; }
.shop-account .shop-account-problems { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--danger-line); border-radius: .75rem; background: var(--danger-soft); color: var(--danger-ink); font-size: .875rem; }
.shop-account .shop-account-problems p { margin: 0 0 .5rem; font-weight: 600; }
.shop-account .shop-account-problems ul { margin: 0; padding-left: 1.25rem; }
.shop-account .shop-account-problems a { color: inherit; overflow-wrap: anywhere; }
.shop-account .shop-account-entries { margin: 0 0 .5rem; padding: 0; list-style: none; }
.shop-account .shop-account-entries:empty, .shop-account .shop-account-entries:not(:empty) + .shop-account-empty { display: none; }
.shop-account .shop-account-empty { margin: 0 0 1rem; font-size: .875rem; color: var(--store-muted); }
.shop-account .shop-account-address h4 { margin: 0 0 .5rem; font-size: 1.0625rem; overflow-wrap: anywhere; }
.shop-account .shop-account-address p { overflow-wrap: anywhere; }
.shop-account .shop-account-badge { display: inline-block; margin-left: .375rem; padding: .125rem .5rem; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--store-accent); font-size: .75rem; font-weight: 600; vertical-align: middle; }
.shop-account .shop-account-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-top: .5rem; }
.shop-account .shop-account-entry-actions form { margin: 0; }
.shop-account .shop-account-entry-actions a, .shop-account .shop-account-entry-actions button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--store-accent); font: inherit; font-size: .875rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.shop-account .shop-account-entry-actions button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-account .shop-account-entry-actions button:disabled, .shop-account .shop-account-danger:disabled { opacity: .6; cursor: wait; }
.shop-account .shop-account-danger { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border: 0; border-radius: .75rem; background: var(--danger); color: #fff; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.shop-account .shop-account-danger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-account .shop-account-delete [data-address-promoted] { margin: 1rem 0 .5rem; }
@media (max-width: 40rem) {
  .shop-account .shop-account-book { padding: 1.25rem; }
}
/* end O26 A2b: the address book */

/* Authenticated account: the same native sections, progressively separated
   by the account script. All overrides stay inside this account instance. */
.shop-account:has(.shop-account-member) { padding-top: 1.5rem; padding-bottom: 2rem; }
.shop-account .shop-account-member { min-width: 0; }
.shop-account .shop-account-member .shop-account-head { margin-bottom: 1.25rem; }
.shop-account .shop-account-member .shop-account-eyebrow { margin: 0 0 .375rem; font-size: .75rem; font-weight: 600; }
.shop-account .shop-account-member .shop-account-head h1 { font-size: 1.625rem; line-height: 1.3; }
.shop-account .shop-account-member .shop-account-head > p:last-child { font-size: .875rem; overflow-wrap: anywhere; }
.shop-account .shop-account-member .shop-account-nav { gap: .375rem; margin-bottom: 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.shop-account .shop-account-member .shop-account-nav a { justify-content: center; padding: .625rem 1rem; border: 0; border-bottom: 3px solid transparent; border-radius: .5rem .5rem 0 0; background: transparent; color: var(--store-muted); }
.shop-account .shop-account-member .shop-account-nav a:hover { background: var(--store-soft); color: var(--store-accent); }
.shop-account .shop-account-member .shop-account-nav a[aria-current="page"] { border-bottom-color: var(--store-accent); background: var(--accent-soft); color: var(--store-accent); }
.shop-account .shop-account-workspace { display: grid; gap: 1.25rem; }
.shop-account .shop-account-member [data-account-section][hidden] { display: none; }
.shop-account .shop-account-member .shop-account-panel { min-width: 0; padding: 1.5rem; border-color: var(--border); border-radius: 1rem; }
.shop-account .shop-account-member .shop-account-panel > h2:focus { outline: none; }
.shop-account .shop-account-member .shop-account-panel > h2 { margin-bottom: 1rem; font-size: 1.25rem; }
.shop-account .shop-account-member .shop-account-form { margin-bottom: 0; }
.shop-account .shop-account-profile-fields { display: grid; gap: 1rem; max-width: 52rem; }
.shop-account .shop-account-member #profile-save { gap: .75rem; }
.shop-account .shop-account-member #profile-save input { min-height: 2.75rem; }
.shop-account .shop-account-member #profile-save > button { justify-self: start; min-width: 8rem; min-height: 2.75rem; margin-top: 0; box-shadow: none; }
.shop-account .shop-account-member #profile-feedback { max-width: 52rem; font-size: .8125rem; color: var(--store-muted); }
.shop-account .shop-account-member #profile-feedback summary { cursor: pointer; }
.shop-account .shop-account-member #profile-feedback p { margin: .625rem 0 0; }
.shop-account .shop-account-member #profile-feedback [aria-invalid="true"], .shop-account .shop-account-member #profile-feedback a { color: var(--danger-ink); }
.shop-account .shop-account-member .shop-account-status { max-width: 52rem; margin: 0; padding: .75rem 1rem; font-weight: 500; overflow-wrap: anywhere; }
.shop-account .shop-account-member #profile-saved { margin: 0 0 .75rem; color: var(--success); }
.shop-account .shop-account-address-groups { display: grid; gap: 1rem; margin-top: 1rem; }
.shop-account .shop-account-address-group { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--store-bg); }
.shop-account .shop-account-address-group > h3 { margin: 0 0 .75rem; font-size: 1rem; }
.shop-account .shop-account-address-group .shop-account-address { padding: .875rem; background: var(--field); }
.shop-account .shop-account-address-group > .shop-account-secondary { margin-top: .25rem; }
.shop-account .shop-account-member [data-orders-total] { margin: -.5rem 0 1rem; font-size: .875rem; }
.shop-account .shop-account-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .25rem 1rem; padding: 1rem; }
.shop-account .shop-account-order h3 { grid-column: 1 / -1; margin: 0 0 .375rem; font-size: 1rem; }
.shop-account .shop-account-order h3 a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; text-decoration: none; }
.shop-account .shop-account-order h3 a:hover .shop-account-order-link { text-decoration: underline; }
.shop-account .shop-account-order-link { font-size: .875rem; }
.shop-account .shop-account-order .shop-account-order-date { grid-column: 1; }
.shop-account .shop-account-order .shop-account-badge { margin-left: .25rem; }
.shop-account .shop-account-order > p:not(.shop-account-order-total) { grid-column: 1; color: var(--store-muted); }
.shop-account .shop-account-order .shop-account-order-total { grid-column: 2; grid-row: 2 / 4; align-self: center; text-align: right; font-variant-numeric: tabular-nums; }
.shop-account .shop-account-order [data-order-titles] { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .375rem; }
.shop-account .shop-account-order [data-order-titles] p { margin: 0; color: var(--store-muted); font-size: .8125rem; }
.shop-account .shop-account-filter-panel { margin: 1.25rem 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .875rem; font-weight: 600; }
.shop-account .shop-account-filters { display: grid; gap: .75rem; align-items: end; }
.shop-account .shop-account-filters label { font-size: .8125rem; }
.shop-account .shop-account-filters input, .shop-account .shop-account-filters select { min-height: 2.75rem; padding: .5rem .75rem; }
.shop-account .shop-account-filters button { justify-self: start; min-height: 2.75rem; margin: 0; }
.shop-account .shop-account-session { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .8125rem; }
.shop-account .shop-account-session .shop-account-out { margin: 0; }
.shop-account .shop-account-session #account-session-status:not(:empty) { flex-basis: 100%; }
.shop-account .shop-account-session summary { cursor: pointer; color: var(--store-muted); }
.shop-account .shop-account-session details p { max-width: 48rem; }
.shop-account .shop-account-session #sign-out-everywhere { display: grid; justify-items: start; gap: .75rem; }
@media (min-width: 48rem) {
  .shop-account .shop-account-profile-fields, .shop-account .shop-account-address-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-account .shop-account-member .shop-account-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-account .shop-account-member .shop-account-company, .shop-account .shop-account-member .shop-account-choice { grid-column: 1 / -1; }
  .shop-account .shop-account-filters { grid-template-columns: minmax(12rem, 2fr) repeat(2, minmax(8rem, 1fr)) auto; }
}
@media (max-width: 40rem) {
  .shop-account:has(.shop-account-member) { padding: 1.25rem 1rem 2rem; }
  .shop-account .shop-account-member .shop-account-head h1 { font-size: 1.375rem; }
  .shop-account .shop-account-member .shop-account-nav { flex-wrap: nowrap; gap: 0; }
  .shop-account .shop-account-member .shop-account-nav a { flex: 1; padding: .625rem .375rem; font-size: .8125rem; text-align: center; }
  .shop-account .shop-account-member .shop-account-panel { padding: 1rem; }
  .shop-account .shop-account-order { display: block; }
  .shop-account .shop-account-order .shop-account-order-total { margin-top: .5rem; text-align: left; }
  .shop-account .shop-account-order h3 a { gap: .25rem; }
  .shop-account .shop-account-filters button { width: auto; }
}

/* The cart (v1's epdm-shop cart.html, mini-cart.html and the product's buy
   box): the form "Adaugă în coș" with the mini-cart under it; the cart's
   lines as cards, each with its forms, and the summary with the way to the
   checkout; on the cart's page the mini-cart keeps only what the last form
   did. Every form works without JavaScript. */
.shop-buy { margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; }
.buy-form, .shop-buy .quantity-form { display: grid; gap: .75rem; }
.shop-buy-field { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; }
.shop-buy-field label { min-width: 7.5rem; font-size: .875rem; font-weight: 600; }
.shop-buy input, .shop-cart-line-actions input { width: 7rem; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); font: inherit; font-variant-numeric: tabular-nums; }
.shop-buy input:focus-visible, .shop-cart-line-actions input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.mini-cart { margin: .75rem 0 0; }
.mini-cart-link { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--store-bg); color: var(--store-fg); text-decoration: none; font-size: .875rem; }
.mini-cart-title { font-weight: 600; }
.mini-cart-sum { font-variant-numeric: tabular-nums; }
.mini-cart-view { margin-left: auto; font-weight: 600; color: var(--store-accent); }
.cart-notice, .cart-error, .shop-cart-closed { margin: .75rem 0 0; padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; }
.cart-notice { border: 1px solid #a7f3d0; background: #ecfdf5; color: #065f46; }
.cart-error { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; }
.shop-cart-closed { border: 1px solid #fde68a; background: #fffbeb; color: #92400e; }
.shop-cart .mini-cart { margin: 0 0 1rem; }
.shop-cart .mini-cart-link { display: none; }
.shop-cart-empty { margin: 1rem 0; padding: 3rem 1.5rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; text-align: center; }
.shop-cart-empty h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.shop-cart-empty p { margin: 0 0 1.5rem; color: var(--store-muted); }
.shop-cart-grid { display: grid; gap: 1.5rem; }
.shop-cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.shop-cart-line { padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .05); }
.shop-cart-line[data-state="unavailable"], .shop-cart-line[data-state="changed"] { border-color: #fecaca; }
.shop-cart-line[data-state="short"] { border-color: #fde68a; }
.shop-cart-line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.shop-cart-line-title { margin: 0; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.shop-cart-line-total { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-cart-line-sku { margin: .25rem 0 0; font-size: .75rem; color: var(--store-muted); }
.shop-cart-line-sku span:first-child { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.shop-cart-measures { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .5rem 0 0; font-size: .8rem; }
.shop-cart-measures div { display: flex; gap: .375rem; }
.shop-cart-measures dt { color: var(--store-muted); }
.shop-cart-measures dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-cart-amount, .shop-cart-unit-price { margin: .5rem 0 0; font-size: .85rem; font-variant-numeric: tabular-nums; }
.shop-cart-unit-price { color: var(--store-muted); }
.shop-cart-note { margin: .5rem 0 0; padding: .375rem .625rem; border-radius: .5rem; font-size: .8rem; font-weight: 500; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; }
.shop-cart-note.line-short { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.shop-cart-line-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: .75rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--store-soft); }
.shop-cart-line-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.shop-cart-line-actions label { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; }
.shop-cart-line-actions button, .shop-cart-clear button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: .6rem; background: #fff; color: var(--store-fg); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.line-remove button:hover, .shop-cart-clear button:hover { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.shop-cart-clear { margin: 1rem 0 0; }
.shop-cart-summary { align-self: start; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: 0 10px 30px -12px rgb(15 23 42 / .2); }
.shop-cart-summary h2 { margin: 0 0 1rem; font-size: 1.125rem; }
.shop-cart-summary dl { margin: 0 0 1.25rem; }
.shop-cart-summary dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--store-soft); }
.shop-cart-summary dt .note { display: block; font-size: .75rem; }
.shop-cart-summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-cart-total dt, .shop-cart-total dd { font-size: 1.125rem; font-weight: 700; }
.shop-cart-checkout { display: flex; width: 100%; }
.shop-cart-continue { display: block; margin: .75rem 0 0; text-align: center; font-size: .875rem; font-weight: 600; }
.shop-cart-summary > .note { margin: 1rem 0 0; text-align: center; font-size: .75rem; }
@media (min-width: 64rem) {
  .shop-cart-grid { grid-template-columns: 2fr 1fr; gap: 2rem; }
  .shop-cart-summary { position: sticky; top: 6rem; }
}

/* The checkout up to its quote (v1's epdm-shop checkout.html and
   shipping.html): the head with "Securizat", the delivery card (delivery or
   pickup, the county or the postal code, the locality, the pickup point),
   the carrier cards with "Cel mai ieftin", the payment cards, the summary
   with the shipping row (the coupon when the subsidy takes part or all of
   it) and the subsidy's tiers drawn with <progress>, never a style. */
.shop-checkout-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin: 0 0 1.5rem; }
.shop-checkout-head h1 { margin: 0; }
.shop-checkout-head p { margin: .25rem 0 0; color: var(--store-muted); }
.shop-checkout-secure { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border: 1px solid #a7f3d0; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: .75rem; font-weight: 600; }
.shop-checkout-secure svg { width: 1rem; height: 1rem; }
.shop-checkout-alert { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; }
.shop-checkout-alert { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; }
.shop-checkout-alert p { margin: 0; }
.shop-checkout-alert .checkout-detail { margin-top: .375rem; font-size: .8rem; }
.shop-checkout-grid { display: grid; gap: 1.5rem; }
.shop-checkout-side { min-width: 0; }
.shop-checkout-side .shop-checkout-summary { position: static; }
.shop-checkout-form { display: grid; gap: 1rem; }
.shop-checkout-section { margin: 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; min-width: 0; }
.shop-checkout-section h2, .shop-checkout-section > legend { margin: 0 0 .25rem; padding: 0; font-size: 1.05rem; font-weight: 700; color: #1e293b; }
fieldset.shop-checkout-section > legend { float: left; width: 100%; margin-bottom: .75rem; }
fieldset.shop-checkout-section > legend + * { clear: both; }
.shop-checkout-section > .note { margin: 0 0 1rem; }
.shop-checkout-methods { margin: 0 0 1rem; padding: 0; border: 0; display: grid; gap: .75rem; }
.shop-checkout-methods legend { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; color: var(--store-muted); }
.shop-checkout-choice, .shop-checkout-option { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .875rem 1rem; border: 2px solid var(--border); border-radius: .75rem; cursor: pointer; }
.shop-checkout-choice:has(input:checked), .shop-checkout-choice.is-chosen, .shop-checkout-option:has(input:checked) { border-color: var(--store-accent); background: color-mix(in srgb, var(--store-accent) 5%, #fff); }
.shop-checkout-option:has(input:disabled) { cursor: not-allowed; background: var(--store-soft); }
.shop-checkout-choice input, .shop-checkout-option input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--store-accent); flex: none; }
.shop-checkout-choice > span:first-of-type { font-weight: 600; font-size: .9rem; }
.shop-checkout-choice .note { margin-left: auto; color: #059669; font-weight: 600; font-size: .8rem; }
.shop-checkout-option { margin: 0 0 .5rem; border-width: 1px; }
.shop-checkout-option-text { display: grid; gap: .125rem; flex: 1; min-width: 0; font-size: .9rem; }
.shop-checkout-option-text > span:first-child, .shop-checkout-option-text .carrier { font-weight: 600; }
.shop-checkout-option-text .note { font-size: .75rem; }
.shop-checkout-option .tariff { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-checkout-option .cheapest { justify-self: start; padding: .1rem .4rem; border-radius: .3rem; background: #d1fae5; color: #065f46; font-size: .7rem; font-weight: 700; }
.shop-checkout-option .no-cod { font-size: .75rem; color: #92400e; }
.shop-checkout-option-text > span:has(> .cod-fee) { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .5rem; }
.shop-checkout-option .cod-fee { padding: .0625rem .375rem; border-radius: var(--radius-sm); background: #fef3c7; color: #92400e; font-size: var(--text-2xs); font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-checkout-pickup { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: linear-gradient(to bottom right, #f8fafc, #fff); font-style: normal; font-size: .875rem; line-height: 1.6; }
.shop-checkout-fields { display: grid; gap: .75rem; }
.shop-checkout-field { display: grid; gap: .375rem; align-content: start; margin: 0; }
.shop-checkout-field label { font-size: .875rem; font-weight: 600; }
.shop-checkout-field input, .shop-checkout-field select { min-height: 3rem; padding: .625rem .875rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); font: inherit; color: inherit; }
.shop-checkout-field input:focus-visible, .shop-checkout-field select:focus-visible, .shop-checkout-choice input:focus-visible, .shop-checkout-option input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-checkout-field .note { margin: 0; font-size: .8rem; font-weight: 400; }
.checkout-city-options:not([hidden]) { display: block; max-height: 12rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); }
.checkout-city-option { display: block; min-height: 2.75rem; padding: .625rem .875rem; cursor: pointer; overflow-wrap: anywhere; }
.checkout-city-option[aria-selected="true"] { background: var(--store-accent); color: #fff; }
.checkout-city-option:hover { outline: 2px solid var(--focus); outline-offset: -2px; }
.checkout-city-retry { justify-self: start; min-height: 2.75rem; }
.shop-checkout-field:has(:required) > label:first-child::after { content: "*"; margin-left: .125rem; color: #dc2626; }
.shop-checkout-field [aria-invalid="true"] { border-color: var(--danger-line); background: var(--danger-soft); }
.shop-checkout-problem { font-size: .8rem; line-height: 1.4; color: #b91c1c; overflow-wrap: anywhere; }
/* The locality's note says a name may be typed, true where no list exists; beside the field's own problem it would contradict it. */
.shop-checkout-field:has(> .shop-checkout-problem:not([hidden])) > .note[id$="-help"] { display: none; }
.shop-checkout-field .shop-checkout-check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.shop-checkout-field .shop-checkout-check input { width: 1.125rem; height: 1.125rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--store-accent); flex: none; }
.shop-checkout-section > * + .shop-checkout-field, .shop-checkout-section > * + .shop-checkout-fields { margin-top: .75rem; }
.shop-checkout-field input, .shop-checkout-field select { min-width: 0; }
.shop-checkout-warn, .shop-checkout-ok { margin: 0 0 .75rem; padding: .75rem; border-radius: .6rem; font-size: .8rem; line-height: 1.45; }
.shop-checkout-warn { border: 1px solid #fde68a; background: #fffbeb; color: #78350f; }
/* QA 2a R3: a phone number to keep is a warning, the email suggestion's box
   with its confirmation inside, not an error. */
.shop-checkout-field .phone-warning { display: grid; gap: .5rem; margin: 0; }
.shop-checkout-field .phone-warning .shop-checkout-check { color: var(--store-fg); }
.shop-checkout-ok { border: 1px solid #a7f3d0; background: #ecfdf5; color: #064e3b; }
.shop-checkout-form .payment-note { margin: .5rem 0 0; font-size: .8rem; }
.shop-checkout-calculate, .quote-reset button { justify-self: start; border: 0; cursor: pointer; }
.shop-checkout-placement { display: grid; gap: 1rem; padding: 1.5rem 0; }
.checkout-terms { display: flex; align-items: start; gap: .75rem; font-size: .875rem; line-height: 1.5; }
.checkout-terms input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: .125rem 0 0; accent-color: var(--store-accent); }
.checkout-terms a, .checkout-placement-refusal a { color: inherit; text-decoration: underline; }
.checkout-placement-refusal a {
  display: inline-flex;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
}
.checkout-terms input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-checkout-place { width: 100%; border: 0; cursor: pointer; }
.quote-reset { margin: 1rem 0 0; }
.quote-reset button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: .6rem; background: #fff; font: inherit; font-size: .85rem; font-weight: 600; }
.shop-checkout-summary .shop-checkout-lines { list-style: none; margin: 0 0 1rem; padding: 0 0 1rem; display: grid; gap: .625rem; border-bottom: 1px solid var(--store-soft); font-size: .85rem; }
.checkout-empty .shop-checkout-lines { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; text-align: left; }
.shop-checkout-lines .line-sku { color: var(--store-muted); font-size: .75rem; }
.shop-checkout-lines .line-total { float: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-checkout-line-title { font-weight: 600; }
.shop-checkout-totals .shop-checkout-shipping { display: block; margin: .5rem 0; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--store-soft); }
.shop-checkout-totals .shop-checkout-shipping dt { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--store-muted); }
.shop-checkout-totals .shop-checkout-shipping dd { margin: .25rem 0 0; }
.shop-checkout-shipping.is-coupon { border: 1.5px dashed #6ee7b7; background: #ecfdf5; }
.shop-checkout-shipping.is-coupon dt { color: #047857; }
.shop-checkout-shipping s { color: var(--store-muted); font-variant-numeric: tabular-nums; }
.shop-checkout-shipping .shipping-charged { font-size: 1.05rem; color: #047857; }
.shop-checkout-shipping.is-pending dd { font-style: italic; color: var(--store-muted); font-size: .85rem; }
.shop-coupon-badge { display: inline-block; margin-left: .5rem; padding: .125rem .5rem; border: 2px solid #059669; border-radius: .375rem; color: #047857; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; transform: rotate(-3deg); }
.shop-checkout-stub { display: flex; justify-content: space-between; gap: .5rem; padding-top: .5rem; border-top: 1px dashed #cbd5e1; font-size: .7rem; color: var(--store-muted); }
.shop-checkout-stub span:first-child { font-weight: 600; color: var(--store-fg); }
.shipping-nudge, .shop-cart-summary dl .shipping-nudge { display: block; margin: .5rem 0 0; padding: .5rem .75rem; border: 1.5px dashed #6ee7b7; border-radius: .6rem; background: #ecfdf5; color: #064e3b; font-size: .75rem; }
.shipping-nudge p { margin: .5rem 0 0; line-height: 1.4; }
.shop-nudge-tiers { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.shop-nudge-tiers li { flex: 1; min-width: 0; text-align: center; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #047857; }
.shop-nudge-bar { display: block; width: 100%; height: .25rem; margin: 0 0 .25rem; border: 0; border-radius: 999px; background: #a7f3d0; appearance: none; }
.shop-nudge-bar.is-earned { background: #10b981; }
.shop-nudge-bar::-webkit-progress-bar { border-radius: 999px; background: #a7f3d0; }
.shop-nudge-bar::-webkit-progress-value { border-radius: 999px; background: #34d399; }
.shop-nudge-bar::-moz-progress-bar { border-radius: 999px; background: #34d399; }
@media (min-width: 40rem) {
  .shop-checkout-methods { grid-template-columns: 1fr 1fr; }
  .shop-checkout-methods legend { grid-column: 1 / -1; }
  .shop-checkout-fields { grid-template-columns: 1fr 1fr; }
  .shop-checkout-street { grid-template-columns: 2fr 1fr; }
}
@media (min-width: 64rem) {
  .shop-checkout-grid { grid-template-columns: 7fr 5fr; gap: 2rem; align-items: start; }
  .shop-checkout-side { position: sticky; top: 6rem; }
}

/* Signed order card payment, also available to visitors. */
.order-payment { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #cbd5e1; border-radius: .75rem; background: #f8fafc; overflow-wrap: anywhere; }
.order-payment h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.order-payment .order-pay-button { display: inline-block; max-width: 100%; padding: .8rem 1.5rem; border: 0; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--shop-cta-from), var(--shop-cta-to)); box-shadow: var(--shadow-cta); color: white; font: inherit; font-weight: 600; text-decoration: none; white-space: normal; cursor: pointer; }
.order-payment .order-pay-button:disabled { opacity: .65; cursor: wait; }
.order-payment :is(a, button):focus-visible { outline: 3px solid var(--shop-cta-to); outline-offset: 4px; }
.order-payment p { margin: .75rem 0; }
.order-payment .order-payment-cod { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #cbd5e1; }
.order-payment h3 { margin: 0; font-size: 1.05rem; }
.order-payment dl { margin: 1rem 0; }
.order-payment dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: .5rem 0; }
.order-payment dd { margin: 0; font-weight: 600; }
.order-payment .order-payment-contact { display: flex; flex-wrap: wrap; gap: .75rem; }
.order-payment [hidden] { display: none; }

/* The checkout's company and billing (CK-2c, ZP; v1's billing section): the
   checked cards show the company's fields and the separate address, with or
   without a script (v1's group-has); the lookup beside the CUI; the
   messages in the theme's ok and warning boxes; the reverse charge's net
   summary. */
.checkout-billing:not(:has(input[name="kind"][value="company"]:checked)) .checkout-company,
.checkout-billing:has(input[name="kind"][value="company"]:checked) .checkout-billing-person,
.checkout-billing:has(input[name="billing_same"][value="true"]:checked) .checkout-billing-address { display: none; }
.checkout-billing > * + * { margin-top: 1rem; }
.shop-checkout-company { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: color-mix(in srgb, var(--store-soft) 40%, #fff); overflow-wrap: anywhere; }
.shop-checkout-company-title { margin: 0; font-size: .875rem; font-weight: 600; color: #1e293b; }
/* At pickup the note asks a person's billing name, so the name is marked
   where the note stands and nowhere else. At a courier the server takes the
   delivery's name for an empty one, and for the same reason the field carries
   no aria-required: the script refuses nothing the server would accept. */
.shop-checkout-field:has([aria-required="true"]) > label:first-child::after, .checkout-billing:has(.checkout-billing-pickup) .checkout-billing-person .shop-checkout-field:has(> [name="billing_name"]) > label:first-child::after { content: "*"; margin-left: .125rem; color: #dc2626; }
.shop-checkout-lookup { display: flex; gap: .5rem; min-width: 0; }
.shop-checkout-lookup input { flex: 1; min-width: 0; min-height: 3rem; padding: .625rem .875rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); font: inherit; color: inherit; }
.shop-checkout-lookup input:focus-visible, .shop-checkout-lookup-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-checkout-lookup-button { flex: none; min-height: 3rem; padding: 0 1rem; border: 0; cursor: pointer; }
.shop-checkout-company-status:empty { display: none; }
.shop-checkout-company-status p { margin: 0; }
.shop-checkout-warn.is-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.shop-checkout-company-address { margin: 0; padding: .75rem; border: 1px solid var(--border); border-radius: .6rem; background: #fff; font-size: .85rem; }
.shop-checkout-company-address .note { display: block; margin-bottom: .25rem; }
.checkout-billing-pickup { margin: 0; font-size: .8rem; }
.checkout-billing-address { display: grid; gap: .75rem; }
.shop-checkout-totals .shop-checkout-reverse-row dt { color: #047857; font-weight: 600; }
.shop-checkout-reverse { margin: .75rem 0 0; padding: .75rem; border: 1px solid #a7f3d0; border-radius: .6rem; background: #ecfdf5; color: #064e3b; font-size: .8rem; line-height: 1.45; }

/* CK-2e (ZP2): the account email and address book, within the ZP checkout. */
.checkout-account-email { overflow-wrap: anywhere; }
.checkout-address-book { display: grid; gap: .5rem; min-width: 0; margin-block: .75rem; }
.checkout-address-book select { width: 100%; min-width: 0; max-width: 100%; padding: .65rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); color: inherit; font: inherit; }
.checkout-address-book label { font-weight: 600; }
.checkout-address-apply { justify-self: start; padding: .55rem .9rem; border: 1px solid #94a3b8; border-radius: .5rem; background: #f8fafc; color: #0f172a; cursor: pointer; font: inherit; }

/* O8 A3b: the selected width's hold reason and permitted-width note. */
.shop .product-hold-reason,.shop .product-hold-note{padding:1rem;border:1px solid #b9d9e8;border-left:4px solid #24708d;border-radius:.5rem;background:#edf7fb;color:#174a60;overflow-wrap:anywhere}
/* End O8 A3b. */

/* Marketing: v1's floating consent card, also using Folie's accent tokens. */
.marketing-consent { position: fixed; z-index: 50; left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); max-height: calc(100dvh - 2rem - env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 1rem; box-shadow: 0 8px 30px -4px rgb(0 0 0 / .15); color: var(--store-muted); font: 400 .875rem/1.625 ui-sans-serif, system-ui, sans-serif; }
.marketing-consent[hidden], .marketing-consent-reset[hidden] { display: none; }
.marketing-consent-card { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid #f1f5f9; border-radius: 1rem; background: #fff; }
.marketing-consent-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 2rem; height: 2rem; margin-top: .125rem; border-radius: .5rem; background: color-mix(in srgb, var(--store-accent) 10%, white); color: var(--store-accent); }
.marketing-consent-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.marketing-consent-message { margin: 0; }
.marketing-consent .marketing-consent-policy { display: inline-block; margin-top: .375rem; color: var(--store-accent); text-decoration: underline; text-underline-offset: .15em; }
.marketing-consent .marketing-consent-policy:hover { color: var(--store-accent); }
.marketing-consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.marketing-consent-actions button { min-height: 2.75rem; padding: .5rem 1rem; border: 0; border-radius: .5rem; font: inherit; font-weight: 500; cursor: pointer; }
.marketing-consent-reject { background: #f1f5f9; color: #475569; }
.marketing-consent-reject:hover { background: #e2e8f0; color: #334155; }
.marketing-consent-accept { background: var(--store-accent); color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.marketing-consent-accept:hover { background: color-mix(in srgb, var(--store-accent) 85%, black); }
.marketing-consent-reset { min-height: 2.75rem; padding: 0; border: 0; background: transparent; color: #94a3b8; font: inherit; font-size: .75rem; cursor: pointer; }
.marketing-consent-reset:hover { color: #fff; }
.marketing-consent button:focus-visible, .marketing-consent-reset:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 40rem) {
  .marketing-consent { left: 50%; right: auto; width: 32rem; transform: translateX(-50%); }
}

/* SF-B3: the category's own list in a grid or a list (v1's
   productViewMode, epdm-shop-listing.js) and the mobile drawer with the
   categories and the orders (v1's "Filtre"). The same cards as the grid:
   the list only lays them out in rows. */

/* The toggle, shown by the script: hidden without it, and below 40rem as
   v1's (sm:flex); the stored choice still applies there. */
.shop-view-toggle:not([hidden]) { display: none; }
@media (min-width: 40rem) {
  .shop-view-toggle:not([hidden]) { display: flex; align-items: center; gap: .125rem; padding: .125rem; border-radius: .5rem; background: var(--store-soft); }
}
.shop-view-button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: var(--store-muted); cursor: pointer; }
.shop-view-button svg { width: 1rem; height: 1rem; }
.shop-view-button:hover { color: var(--store-fg); }
.shop-view-button[aria-pressed="true"] { background: #fff; color: var(--store-accent); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.shop-view-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The drawer: the categories, then the orders, each under its title. */
.shop-category-drawer-title { margin: 0; padding: .875rem 1rem 0; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--store-muted); }
.shop-category-drawer-sorts { list-style: none; margin: 0; padding: .5rem .75rem .75rem; }
.shop-category-drawer-sorts li + li { margin-top: .25rem; }
.shop-category-drawer-sorts a { display: block; padding: .5rem .75rem; border-left: 2px solid transparent; border-radius: 0 .375rem .375rem 0; color: var(--store-fg); font-size: .875rem; text-decoration: none; }
.shop-category-drawer-sorts a:hover { background: var(--store-bg); color: var(--store-accent); }
.shop-category-drawer-sorts a[data-current="true"] { border-left-color: var(--store-accent); background: color-mix(in srgb, var(--store-accent) 6%, #fff); color: var(--store-accent); font-weight: 600; }

/* B2a fragment, for the coordinator to merge into epdm-shop.css: v1's
   square gallery (shop-gallery) without its endless turn, the thumbnails,
   the real photos' strip (shop-real-photos) and the zoom dialog. Without
   JavaScript the slides scroll and snap; epdm-shop-gallery.js marks the
   gallery data-gallery-ready and shows its buttons. */
.product-gallery { display: grid; gap: .625rem; max-width: 36rem; min-width: 0; margin: 1rem 0; }
.product-gallery-stage { position: relative; min-width: 0; }
.product-gallery-slides { display: flex; aspect-ratio: 1; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; border-radius: .75rem; background: var(--store-soft); }
.product-gallery[data-gallery-ready] .product-gallery-slides { scrollbar-width: none; }
.product-gallery[data-gallery-ready] .product-gallery-slides::-webkit-scrollbar { display: none; }
.product-gallery-slide { display: flex; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-margin-top: 1rem; }
.product-gallery-slide a { position: relative; display: flex; flex: 1; min-width: 0; cursor: zoom-in; }
.product-gallery-slide img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* SF-B4: the slide's picture lays no box of its own; its image sizes as before. */
.product-gallery-slide picture { display: contents; }
/* IMG3: with scripting on, a lazy slide's image has no box, so the browser
   fetches none of it on load, until epdm-shop-gallery.js marks the slide
   data-gallery-near (shown, next to the one shown, or reached for). The
   slide keeps its size from the track: nothing moves when it loads. The
   first slide is eager and never matched; without JavaScript the slides
   load natively; the src stays in the markup for crawlers and agents. */
@media (scripting: enabled) {
  .product-gallery-slide:not([data-gallery-near]) img[loading="lazy"] { display: none; }
}
/* IMG3: the thumbnail's picture epdm-shop-gallery.js draws over a slide
   reached before its image loaded, in the image's place and fit. */
.product-gallery-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; }
.product-gallery-zoom, .product-gallery-arrow, .product-gallery-close { display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; }
.product-gallery-zoom[hidden], .product-gallery-arrow[hidden] { display: none; }
.product-gallery-zoom { position: absolute; top: .75rem; right: .75rem; width: 2.125rem; height: 2.125rem; border-radius: .5rem; color: #334155; background: rgb(255 255 255 / .9); box-shadow: 0 1px 3px rgb(15 23 42 / .2); }
.product-gallery-arrow { position: absolute; top: 50%; width: 2.25rem; height: 2.25rem; border-radius: 50%; transform: translateY(-50%); color: #1e293b; background: rgb(255 255 255 / .9); box-shadow: 0 1px 3px rgb(15 23 42 / .2); }
.product-gallery-prev { left: .75rem; }
.product-gallery-next { right: .75rem; }
.product-gallery-arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
.product-gallery-zoom:focus-visible, .product-gallery-arrow:focus-visible, .product-gallery-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.product-gallery-thumbs { display: flex; gap: .5rem; margin: 0; padding: 0 0 .25rem; list-style: none; overflow-x: auto; }
.product-gallery-thumbs li { flex: 0 0 calc((100% - 2rem) / 5); min-width: 3rem; }
.product-gallery-thumbs a { display: block; aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; border-radius: .5rem; background: var(--store-soft); opacity: .8; }
.product-gallery-thumbs a[aria-current="true"] { border-color: var(--store-accent); opacity: 1; }
/* Keep the preview bound used by galleryOf even with larger root fonts. */
.product-gallery-thumbs a, .product-real-strip a { max-width: 120px; max-height: 120px; }
.product-gallery-thumbs picture, .product-real-strip picture { display: contents; }
.product-gallery-thumbs img, .product-real-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-real { min-width: 0; margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--store-soft); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .05); }
.product-real h2 { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; color: var(--store-muted); }
.product-real-count { font-size: .75rem; font-weight: 500; }
.product-real-strip { display: flex; gap: .5rem; margin: 0; padding: 0 0 .5rem; list-style: none; overflow-x: auto; }
.product-real-strip li { flex: 0 0 auto; }
.product-real-strip a { display: block; width: 6rem; height: 6rem; overflow: hidden; border: 2px solid var(--store-soft); border-radius: .75rem; background: var(--store-soft); cursor: zoom-in; }
.product-real-strip a:hover { border-color: color-mix(in srgb, var(--store-accent) 40%, transparent); }
@media (min-width: 40rem) { .product-real-strip a { width: 7rem; height: 7rem; } }
.product-gallery-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; color: #fff; background: rgb(0 0 0 / .95); }
.product-gallery-dialog[open] { display: flex; align-items: center; justify-content: center; }
.product-gallery-dialog::backdrop { background: rgb(0 0 0 / .8); }
.product-gallery-dialog-image { width: auto; max-width: 90vw; height: auto; max-height: 85dvh; object-fit: contain; }
.product-gallery-close { position: fixed; top: 1rem; right: 1rem; width: 2.625rem; height: 2.625rem; border-radius: 50%; color: #fff; background: rgb(255 255 255 / .12); }
.product-gallery-dialog .product-gallery-arrow { position: fixed; width: 2.875rem; height: 2.875rem; color: #fff; background: rgb(255 255 255 / .1); box-shadow: none; }
.product-gallery-dialog .product-gallery-prev { left: 1rem; }
.product-gallery-dialog .product-gallery-next { right: 1rem; }
.product-gallery-close:hover, .product-gallery-dialog .product-gallery-arrow:hover { background: rgb(255 255 255 / .25); }
/* P-gallery (O22): the swipe (D11) moves the image with the finger, the
   browser keeping the vertical pan and the pinch, and every gesture on a
   page zoomed in; the place, N / M, under the image (D12); the controls
   44 px on a phone, WCAG 2.5.5's size (AAA). */
.product-gallery-dialog { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
.product-gallery-dialog[data-gallery-zoomed] { touch-action: auto; }
.product-gallery-dialog-image { transform: translateX(var(--gallery-drag, 0px)); transition: transform .2s ease-out; }
.product-gallery-dialog[data-gallery-dragging] .product-gallery-dialog-image { transition: none; }
.product-gallery-count { position: fixed; bottom: 1.25rem; left: 50%; margin: 0; transform: translateX(-50%); font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .7); }
@media (max-width: 39.99rem), (pointer: coarse) {
  .product-gallery-zoom, .product-gallery-arrow, .product-gallery-close { width: 2.75rem; height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .product-gallery-dialog-image { transition: none; }
}

/* SF-B1: the price's unit and the roll's selector (product-buy.html, epdm-shop-roll.js). */
.shop-page .product-price .price-unit { font-size: 1rem; font-weight: 600; color: var(--store-muted); }
.roll-form { display: grid; gap: .75rem; margin: 0 0 1rem; }
.roll-calculate { justify-self: start; border: 0; cursor: pointer; }
.roll-result { display: grid; gap: .75rem; }
.roll-quote { display: grid; gap: .25rem; margin: 0; padding: .75rem 1rem; border-radius: .75rem; background: var(--store-soft); }
.roll-quote > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.roll-quote dt { font-size: .875rem; color: var(--store-muted); }
.roll-quote dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.roll-quote .roll-total { font-size: 1.25rem; font-weight: 700; }
.roll-result > .note, .roll-problem { margin: 0; }
.roll-result[data-roll-stale] .roll-quote { visibility: hidden; }
/* SF-C (Opus, o17/sfc-product): the price box and the roll's total as
   v1's (templates/epdm-shop/price.html:12 and :200): the figure large,
   then the symbol (and the unit) smaller after it, on one baseline; the
   space between the spans stays for copying and screen readers. Append
   after the SF-B1 block of themes/epdmshop/epdm-shop.css (folie-iaz uses
   the same file). Without it the spans read "23,80 € / m²" at one size. */
.shop-page .product-price .price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
.shop-page .product-price .price-symbol { font-size: 1rem; font-weight: 500; }
.shop-page .product-offer > .product-price .price-symbol { color: rgb(255 255 255 / .8); }
.roll-quote .roll-total { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .375rem; }
.roll-quote .roll-total-symbol { font-size: .875rem; font-weight: 600; color: var(--store-muted); }

/* SF-B2b: the product's sibling pages, its sharing links, and its
   description, downloads and specifications as v1's radio tabs that work
   without JavaScript (epdm-shop product.html:110), with the description's
   table of contents beside it from 64rem, as v1's (lg:block). */

.product-siblings { display: grid; gap: .75rem; margin: 1.25rem 0; }
.product-sibling-axis { margin: 0 0 .375rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--store-muted); }
.product-sibling-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.product-sibling { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .375rem .875rem; border: 1px solid var(--border); border-radius: .5rem; background: #fff; color: var(--store-fg); font-size: .9rem; font-weight: 600; text-decoration: none; }
a.product-sibling:hover { border-color: var(--store-accent); color: var(--store-accent); }
a.product-sibling:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.product-sibling-current { border-color: var(--store-accent); background: var(--store-accent); color: #fff; }

.product-share { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 1rem 0 1.5rem; }
.product-share-label { margin-right: .375rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--store-muted); }
.product-share-link { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--border); border-radius: .5rem; background: #fff; color: var(--store-muted); cursor: pointer; }
.product-share-link[hidden] { display: none; }
.product-share-link:hover { border-color: var(--store-accent); color: var(--store-accent); }
.product-share-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.product-share-copy[data-copied] { border-color: #6ee7b7; background: #ecfdf5; color: #047857; }

.product-tabs { margin: 2rem 0 0; }
.product-tab-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.product-tab-list { display: flex; gap: .25rem; overflow-x: auto; padding: .5rem; border-block: 1px solid var(--border); background: var(--store-soft); }
.product-tab { display: inline-flex; flex-shrink: 0; align-items: center; gap: .375rem; padding: .5rem .875rem; border-radius: .5rem; color: var(--store-muted); font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.product-tab:hover { background: #fff; color: var(--store-accent); }
.product-tab-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: var(--store-accent); color: #fff; font-size: .7rem; font-weight: 700; }
#product-tab-description:checked ~ .product-tab-list .product-tab-description,
#product-tab-documents:checked ~ .product-tab-list .product-tab-documents,
#product-tab-specifications:checked ~ .product-tab-list .product-tab-specifications { background: var(--store-accent); color: #fff; }
#product-tab-description:checked ~ .product-tab-list .product-tab-description .product-tab-count,
#product-tab-documents:checked ~ .product-tab-list .product-tab-documents .product-tab-count,
#product-tab-specifications:checked ~ .product-tab-list .product-tab-specifications .product-tab-count { background: rgba(255, 255, 255, .2); }
#product-tab-description:focus-visible ~ .product-tab-list .product-tab-description,
#product-tab-documents:focus-visible ~ .product-tab-list .product-tab-documents,
#product-tab-specifications:focus-visible ~ .product-tab-list .product-tab-specifications { outline: 2px solid var(--focus); outline-offset: 2px; }
.product-tab-panel { display: none; padding: 1.5rem 0; }
#product-tab-description:checked ~ .product-panel-description,
#product-tab-documents:checked ~ .product-panel-documents,
#product-tab-specifications:checked ~ .product-panel-specifications { display: block; }
.product-tab-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.product-description { min-width: 0; }
.product-description-content { min-width: 0; line-height: 1.65; overflow-wrap: anywhere; }
.product-description-content h2 { scroll-margin-top: 6rem; margin: 1.5rem 0 1rem; font-size: 1.4rem; color: #1e293b; }
.product-description-content h2:first-child { margin-top: 0; }
.product-toc { display: none; }
@media (min-width: 64rem) {
  .product-description { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 2.5rem; align-items: start; }
  .product-toc { display: block; position: sticky; top: 6rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; }
}
.product-toc-title { margin: 0 0 .5rem; padding: 0 .5rem; font-size: .875rem; font-weight: 600; color: #334155; }
.product-toc ol { margin: 0; padding: 0; list-style: none; }
.product-toc a { display: block; padding: .375rem .5rem; border-radius: .5rem; color: var(--store-muted); font-size: .875rem; text-decoration: none; overflow-wrap: anywhere; }
.product-toc a:hover { background: var(--store-soft); color: var(--store-fg); }
.product-toc a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.product-documents { margin: 0; padding: 0; list-style: none; max-width: 56rem; }
.product-documents li { padding: .75rem 0; border-bottom: 1px solid var(--border); }
.product-documents a { color: var(--store-accent); font-weight: 600; overflow-wrap: anywhere; }
.product-specifications { max-width: 56rem; }
.product-specifications th { width: 50%; font-weight: 500; color: var(--store-muted); }
.product-specifications td { font-weight: 600; }

/* SF-C (Opus, o17/sfc-product): the description's h3 in the table of
   contents, under their h2, as v1's (product.html:147: ml-3, border-l-2,
   13px), always open without JavaScript; the h3 scroll under the sticky
   header like the h2 (v1 scroll-mt-24). Append after the SF-B2b block. */
.product-description-content h3 { scroll-margin-top: 6rem; }
.product-toc .product-toc-sub { margin: .125rem 0 .25rem .75rem; padding-left: .25rem; border-left: 2px solid var(--border); }
.product-toc .product-toc-sub a { padding: .25rem .5rem; font-size: .8125rem; }

/* SF-1: the product page in v1's columns (product.html; v1's epdm-shop
   product.html:8-44 and price.html's shop-price-box): the gallery, the
   title with its facts, the price box and the details; one column on a
   phone, two from 40rem, three from 80rem (360px | details | 400px, v1's
   1400px page) with the gallery and the box kept in view where the screen
   is tall enough. The box shows the price on v1's gradient first (order)
   with the stock at its right, as v1's; the focus keeps the markup's order. */
.shop-page.product { max-width: 87.5rem; }
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.product-media, .product-head, .product-box, .product-info { min-width: 0; }
.product-media { align-self: start; }
.product-media .product-gallery { max-width: none; margin: 0; }
.product-noimage { display: grid; place-items: center; aspect-ratio: 1; border-radius: .75rem; background: var(--store-soft); color: #cbd5e1; }
.shop-page .product-head h1 { margin: 0 0 .75rem; font-size: 1.5rem; overflow-wrap: anywhere; }
.product-head .product-facts { align-items: center; margin: 0; }
.product-sku { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 999px; background: var(--store-soft); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.product-sku strong { color: #334155; font-size: .875rem; text-transform: none; letter-spacing: 0; }

.product-box { position: relative; display: flex; flex-direction: column; gap: 1rem; align-self: start; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: 0 10px 30px -12px rgb(15 23 42 / .25); overflow: clip; }
.product-box > * { margin: 0; }
.product-box > .product-offer { order: -2; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; margin: -1.25rem -1.25rem 0; padding: 1rem 1.25rem; color: #fff; background: linear-gradient(135deg, var(--shop-brand-dark), var(--store-accent) 65%, var(--shop-brand-light)); }
.shop-page .product-offer > .product-price { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; color: inherit; background: none; }
.product-offer > .product-price p { margin: 0; }
.shop-page .product-offer > .product-price .price { font-size: 2rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.shop-page .product-offer > .product-price .price-unit, .shop-page .product-offer > .product-price .note, .shop-page .product-offer > .product-price .regular { color: rgb(255 255 255 / .85); }
.shop-page .product-offer > .product-price .note { margin-top: .25rem; font-size: .75rem; }
.shop-page .product-offer > .product-price .price-missing { color: #fff; font-weight: 600; }
.product-offer > .product-stock { position: static; flex: 0 1 auto; min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem; border-radius: 999px; background: rgb(255 255 255 / .15); color: #fff; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.product-offer > .product-stock::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #cbd5e1; }
.product-offer > .product-stock[data-stock="in"]::before { background: #34d399; }
.product-offer > .product-stock[data-stock="low"]::before { background: #fbbf24; }
.product-offer > .product-stock[data-stock="out"] { color: #fecaca; }
.product-offer > .product-stock[data-stock="out"]::before { background: #f87171; }
.product-offer > .product-stock:empty { display: none; }
.product-box > .shop-buy { order: 1; padding: 0; border: 0; border-radius: 0; background: none; }
.product-box .shop-buy-width { margin: 0; font-size: .875rem; }
.product-box > .delivery-term { order: 2; padding-top: .75rem; border-top: 1px solid var(--store-soft); color: var(--store-muted); font-size: .875rem; }
.product-box .delivery-days { font-weight: 700; color: var(--store-fg); }
.product-box:not(:has(> .shop-buy)) > .delivery-term { padding-top: 0; border-top: 0; }

.product-info { display: grid; gap: 1.5rem; align-content: start; }
.shop-page .product-info .lead { position: relative; padding: 1.25rem 1.5rem 1.25rem 1.75rem; border: 1px solid var(--store-soft); border-radius: 1rem; background: linear-gradient(135deg, var(--store-bg), #fff); box-shadow: 0 1px 2px rgb(15 23 42 / .05); font-size: .9rem; line-height: 1.65; }
.product-info .lead::before { content: ""; position: absolute; top: 1rem; bottom: 1rem; left: 0; width: .25rem; border-radius: 999px; background: linear-gradient(to bottom, var(--store-accent), color-mix(in srgb, var(--store-accent) 30%, transparent)); }
.product-info .lead:not(:has(.rich-text > *)) { display: none; }
.product-info .lead p { margin: .5rem 0; }
.product-info .lead ul, .product-info .lead ol { margin: .75rem 0; padding-left: 1.25rem; }
.product-info .lead li { margin: 0 0 .5rem; }
.product-info .lead li::marker { color: var(--store-accent); }
.product-info .lead strong { color: var(--store-accent); }
.product-detail > .product-real { margin: 2rem 0 0; }

@media (min-width: 40rem) {
  .product-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; gap: 1.5rem 2rem; }
  .product-media { grid-column: 1; grid-row: 1 / span 2; }
  .product-head { grid-column: 2; grid-row: 1; }
  .product-box { grid-column: 2; grid-row: 2; }
  .product-info { grid-column: 1 / -1; grid-row: 3; }
  .shop-page .product-head h1 { font-size: 1.875rem; }
}
@media (min-width: 64rem) { .shop-page .product-head h1 { font-size: 2.25rem; } }
@media (min-width: 80rem) {
  .product-layout { grid-template-columns: 22.5rem minmax(0, 1fr) 25rem; grid-template-rows: auto 1fr; column-gap: 3rem; }
  .product-media { grid-row: 1 / -1; }
  .product-info { grid-column: 2; grid-row: 2; }
  .product-box { grid-column: 3; grid-row: 1 / -1; }
}
@media (min-width: 80rem) and (min-height: 48rem) {
  .product-media, .product-box { position: sticky; top: 5rem; }
}
/* v1's "no description" text (epdm-shop product.html:156). */
.product-description-empty { margin: 0; color: var(--store-muted); font-size: .875rem; }

/* O22 I4: the category page (S4-B, compact commercial;
   .local/runs/2026-11-01-design-storefront/design/S4/B). v1's structure
   (epdm-shop/category.html C10–C20) with the decision first: the crumbs,
   the head with its accent bar and the description cut to two lines, the
   trust bar, the subcategories, the toolbar with the count, the cards
   (S2-B), the pages with "Pagina N din M"; on a desktop the sidebar sticks
   under the header (S1-B), on a phone "Filtre" floats above the bottom bar
   and opens a panel from the right. After every other category rule;
   tokens only, Folie through its tokens. Without JavaScript all of it
   works: "Citește mai mult" and "Filtre" are <details>;
   epdm-shop-category-page.js hides the first where nothing is cut and closes the
   second on Escape and on its backdrop. */

/* The crumbs (v1's shop-trail): one row; on a phone it scrolls. */
.shop-category-crumbs { margin: 0 0 .5rem; }
.shop-category-crumbs ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.shop-category-crumbs li { flex-shrink: 0; }
.shop-category-crumbs a { min-height: 2rem; }
.shop-category-crumbs a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* The head (C11): v1's accent bar and soft gradient, without the icon box;
   the description cut to two lines, "Citește mai mult" opens it. The
   toggle is in the markup always (the engine cannot test a rich text):
   without a description it is not shown. */
.shop-category-head { margin: 0 0 .75rem; padding: .75rem 1rem; border-left: 4px solid var(--store-accent); border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(to right, color-mix(in srgb, var(--store-bg) 80%, transparent), #fff); }
.shop-page .shop-category-head h1 { margin: 0; font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: 700; color: var(--store-fg); }
.shop-category-head > .lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: .375rem 0 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.shop-category-head > .lead p { margin: 0; }
.shop-category-head > .lead p + p { margin-top: .5rem; }
.shop-category-head:has(> .shop-category-more[open]) > .lead { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.shop-category-more[hidden], .shop-category-head:not(:has(> .lead > .rich-text > *)) > .shop-category-more { display: none; }
.shop-category-more > summary { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.25rem; margin-bottom: -.5rem; color: var(--store-accent); font-size: var(--text-xs); font-weight: 600; list-style: none; cursor: pointer; }
.shop-category-more > summary::-webkit-details-marker { display: none; }
.shop-category-more > summary:hover { color: var(--shop-brand-dark); }
.shop-category-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.shop-category-more .shop-icon { width: .875rem; height: .875rem; transition: transform .2s; }
.shop-category-more[open] .shop-icon { transform: rotate(180deg); }
.shop-category-more-less, .shop-category-more[open] .shop-category-more-label { display: none; }
.shop-category-more[open] .shop-category-more-less { display: inline; }

/* The trust bar (C12), tighter: one line under the head. */
.shop-category-body > .shop-trust { margin: 0 0 .75rem; padding: .5rem .75rem; }

/* The subcategories (C13): "Toate", then each child with ›; one scrolling
   row on a phone, 44 px targets; wrapped from a tablet. */
.shop-category-chips { margin: 0 0 .75rem; }
/* Chrome leaves a partly shown chip where it is when the keyboard focuses
   it, its centre past the row's end: a snapport of no width, at the row's
   middle, makes the row centre each focused chip that does not cross it. */
.shop-category-chips ul { display: flex; gap: .5rem; margin: 0; padding: 0 0 .125rem; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 50%; }
.shop-category-chips li { flex-shrink: 0; }
.shop-category-chip { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: #fff; color: var(--store-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-decoration: none; }
.shop-category-chip .shop-icon { width: .75rem; height: .75rem; }
a.shop-category-chip:hover { border-color: var(--store-accent); background: color-mix(in srgb, var(--store-accent) 5%, #fff); color: var(--store-accent); }
a.shop-category-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-category-chip[aria-current] { border-color: var(--store-accent); background: color-mix(in srgb, var(--store-accent) 8%, #fff); color: var(--store-accent); font-weight: 600; }
/* A hub's chips are its sections: as v1's, a phone shows them once, without
   the row of the sections' anchors (a family keeps it: its own list and its
   relatives are not its subcategories). */
.shop-category-body:has(> .shop-category-chips):not(:has(> .shop-category-own)) > .shop-category-sections { display: none; }

/* The toolbar: the count first, then the view, the order and the size, on
   one line over a rule. On a phone the controls show only their value. */
.shop-category-own > .shop-listing-controls { flex-wrap: nowrap; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: 0 0 .75rem; border-bottom: 1px solid var(--border); }
.shop-listing-count { display: flex; flex: 1 1 auto; align-items: center; gap: .375rem; min-width: 0; margin: 0; color: var(--store-muted); font-size: var(--text-sm); white-space: nowrap; }
.shop-listing-count strong { color: var(--store-fg); font-weight: 700; }
.shop-listing-count .shop-icon { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--store-accent); }
.shop-category-own > .shop-listing-controls .shop-listing-control > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* "Filtre" (C20): in flow without JS. The script enables the floating
   button and overlay only together with keyboard focus isolation. */
.shop-category-drawer-open { display: inline-flex; }
.shop-category-drawer-close { display: none; }
.shop-category-drawer > summary { list-style: none; }
.shop-category-drawer > summary::-webkit-details-marker { display: none; }

/* The sidebar (C10): v1's dots before the entries without an icon. */
.shop-category-nav .shop-category-link:not(:has(.shop-category-icon))::before { content: ""; flex: 0 0 .5rem; height: .5rem; border-radius: var(--radius-full); background: var(--border-strong); }
.shop-category-nav .shop-category-link:hover::before,
.shop-category-nav .shop-category-link[aria-current="page"]::before,
.shop-category-nav .shop-category-link[data-current="true"]::before { background: var(--store-accent); }
.shop-category-nav .shop-category-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* The pages: 44 px squares, the current one filled; "Pagina 1 din 2" under. */
.shop-page .pages { justify-content: center; align-items: center; gap: .375rem; margin: 2rem 0 .5rem; }
.shop-page .pages a, .shop-page .pages > span { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; color: var(--store-fg); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.shop-page .pages a:hover { border-color: var(--store-accent); background: color-mix(in srgb, var(--store-accent) 5%, #fff); color: var(--store-accent); }
.shop-page .pages a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-page .pages [aria-current] { border-color: var(--store-accent); background: var(--store-accent); color: #fff; font-weight: 700; }
.shop-page .pages .shop-icon { width: 1rem; height: 1rem; }
.shop-page .pages-of { margin: 0; color: var(--store-muted); font-size: var(--text-sm); text-align: center; }

@media (max-width: 39.99rem) {
  .shop-category-own > .shop-listing-controls .shop-listing-control > summary { min-height: 2.75rem; padding: .5rem .75rem; }
  .shop-category-own > .shop-listing-controls .shop-listing-control > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (min-width: 40rem) {
  .shop-category-chips ul { flex-wrap: wrap; overflow: visible; }
  .shop-category-chip { min-height: 2.25rem; }
}

@media (max-width: 63.99rem) {
  .shop-category-more > summary { min-height: 2.75rem; margin-bottom: -.75rem; }
  .shop-category-body:has(> .shop-category-drawer.is-enhanced) { padding-bottom: 4rem; }
  /* The floating "Filtre" (below): after a list, before the next title, a
     blank as tall as the button and its margins (3rem + 2 × .75rem), so that
     a list's end and the next title both show beside it (the audit of
     03.11, lot 3); the page's end keeps the padding above. */
  .shop-category-body:has(> .shop-category-drawer.is-enhanced) > :is(.shop-section, .shop-category-own):not(:last-child) { margin-bottom: 4.5rem; }
  .shop-category-drawer.is-enhanced { margin: 0; border: 0; border-radius: 0; background: none; }
  /* In the right corner, as v1's (category.html:181, right-4). While it
     would cover a control of the page, a card's action above all (the QA
     of Train 1, Q1: both buttons of a row passed under it), the script
     marks the drawer and the button fades away, back as soon as the
     control has passed. A tap passes through it at once, its fade not
     over; it stays in the Tab order and a reader's tree, and a
     keyboard's focus brings it back (Sol's R1, S1 and S2). */
  .shop-category-drawer.is-enhanced > summary { position: fixed; z-index: 40; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 1.375rem; border-radius: var(--radius-full); background: var(--store-accent); color: #fff; box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: 600; transition: opacity .15s ease-out; }
  .shop-category-drawer.is-enhanced[data-filters-away]:not([open]) > summary:not(:focus-visible) { opacity: 0; pointer-events: none; }
  .shop-category-drawer.is-enhanced > summary:hover { background: var(--shop-brand-dark); }
  .shop-category-drawer.is-enhanced > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .shop-category-drawer.is-enhanced > summary .shop-icon { width: 1.125rem; height: 1.125rem; }
  body.shop:has(.shop-tabbar) .shop-category-drawer.is-enhanced > summary { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  body.shop:has(.shop-category-drawer.is-enhanced[open]) { overflow: hidden; }
  .shop-category-drawer.is-enhanced[open]::before { content: ""; position: fixed; z-index: 60; inset: 0; background: rgb(15 23 42 / .5); }
  .shop-category-drawer.is-enhanced[open] > summary,
  body.shop:has(.shop-tabbar) .shop-category-drawer.is-enhanced[open] > summary { z-index: 62; top: 0; right: 0; bottom: auto; width: min(20rem, calc(100vw - 3rem)); min-height: 3.5rem; padding: 0 .25rem 0 1rem; border-bottom: 1px solid var(--border); border-radius: 0; background: linear-gradient(135deg, var(--store-bg), var(--store-soft)); color: var(--store-fg); box-shadow: none; }
  .shop-category-drawer.is-enhanced[open] > summary .shop-category-drawer-open { color: var(--store-accent); }
  .shop-category-drawer.is-enhanced[open] > summary .shop-category-drawer-close { display: inline-flex; margin-left: auto; padding: .75rem; color: var(--store-muted); }
  .shop-category-drawer.is-enhanced[open] > summary .shop-category-drawer-close .shop-icon { width: 1.25rem; height: 1.25rem; }
  .shop-category-drawer.is-enhanced > .shop-category-drawer-panel { position: fixed; z-index: 61; top: 3.5rem; right: 0; bottom: 0; width: min(20rem, calc(100vw - 3rem)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); background: #fff; box-shadow: var(--shadow-xl); }
  .shop-category-drawer-panel .shop-category-link,
  .shop-category-drawer-sorts a { display: flex; align-items: center; min-height: 2.75rem; }
}
@media (max-width: 63.99rem) and (prefers-reduced-motion: reduce) {
  .shop-category-drawer.is-enhanced > summary { transition: none; }
}

/* A desktop: the sidebar sticks under the header's white bar (S1-B, 4.5rem);
   a sidebar taller than the window scrolls inside, so its last entries
   stay in reach. */
@media (min-width: 64rem) {
  .shop-category-aside { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; overscroll-behavior: contain; }
  .shop-category-head { padding: 1rem 1.25rem; }
  .shop-page .shop-category-head h1 { font-size: var(--text-2xl); }
  .shop-listing-count { font-size: var(--text-base); }
}
/* End O22 I4 */

/* A short desktop window (1366×768 gives 625-650 px; the QA of Train 1,
   Q2): the first row of cards, its prices and its buttons, above the fold,
   on a category and on a search; a taller window keeps the layout above.
   The category: its description on one line, "Citește mai mult" beside it;
   beside the head, the subcategories, or else the trust bar's facts, two
   by two (with subcategories, the facts follow the list, as text still);
   the list's controls and the cards closer. An open description takes the
   page's width again. The search (search.html unchanged): its controls
   beside its title, its total beside its categories. */
@media (min-width: 64rem) and (max-height: 47.5rem) {
  .shop-page.category, .shop-page.search { padding-top: .5rem; }
  .shop-category-crumbs { margin-bottom: .25rem; }
  .shop-category-crumbs a { min-height: 1.5rem; }
  .shop-category-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem; margin-bottom: .5rem; padding: .5rem 1rem; }
  .shop-category-head > h1 { grid-column: 1 / -1; }
  .shop-category-head > .lead { -webkit-line-clamp: 1; line-clamp: 1; margin-top: 0; }
  .shop-category-more > summary { min-height: 1.5rem; margin: 0; }
  .shop-category-head:has(> .shop-category-more[open]) > .lead { grid-column: 1 / -1; }
  .shop-category-body { display: grid; grid-template-columns: minmax(24rem, 1fr) auto; column-gap: .75rem; }
  .shop-category-body > * { grid-column: 1 / -1; }
  .shop-category-body > .shop-category-head:not(:has(> .shop-category-more[open])):has(~ .shop-category-chips, + .shop-trust) { grid-column: 1; align-self: center; }
  .shop-category-body > .shop-category-head:not(:has(> .shop-category-more[open])) ~ .shop-category-chips,
  .shop-category-body:not(:has(> .shop-category-chips)) > .shop-category-head:not(:has(> .shop-category-more[open])) + .shop-trust { grid-column: 2; grid-row: 2; align-self: center; max-width: 28rem; margin: 0 0 .5rem; }
  .shop-category-body:not(:has(> .shop-category-chips)) > .shop-category-head:not(:has(> .shop-category-more[open])) + .shop-trust ul { display: grid; grid-template-columns: auto auto; gap: .25rem 1rem; }
  .shop-category-body > .shop-category-head:not(:has(> .shop-category-more[open])) ~ .shop-category-chips li { min-width: 0; max-width: 100%; }
  .shop-category-body > .shop-category-head:not(:has(> .shop-category-more[open])) ~ .shop-category-chips .shop-category-chip { max-width: 100%; white-space: normal; }
  .shop-category-body:not(:has(> .shop-category-chips)) > .shop-category-head:not(:has(> .shop-category-more[open])) + .shop-trust li { white-space: normal; }
  .shop-category-body:has(> .shop-category-chips) > .shop-trust { order: 1; margin: 1.5rem 0 0; }
  :is(.shop-category-own, .shop-search-list) > .shop-listing-controls { margin-bottom: .5rem; padding-bottom: 0; border-bottom: 0; }
  .shop-listing-control > summary { min-height: 2.25rem; padding-block: .375rem; }
  .shop-view-toggle:not([hidden]) { padding: 0; }
  /* The cards of these two pages only; a first page's keep theirs (Sol's
     R1, S3). :where() keeps the specificity, so the list view's rules
     above still win. */
  :where(.shop-page.category, .shop-page.search) .shop-card-body { gap: .375rem; padding: .625rem .75rem; }
  :where(.shop-page.category, .shop-page.search) .shop-card-offer { padding-top: .375rem; }
  :where(.shop-page.category, .shop-page.search) .shop-card-facts li { padding-block: .125rem; }
  main.search:has(> .shop-search-list) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .5rem; align-items: center; }
  main.search:has(> .shop-search-list) > :is(.shop-search-head, .shop-search-list) { display: contents; }
  main.search:has(> .shop-search-list) > :is(.shop-search-head, .shop-search-list) > * { grid-column: 1 / -1; }
  main.search:has(> .shop-search-list) > .shop-search-head > h1 { grid-column: 1 / 3; grid-row: 1; margin: 0; font-size: var(--text-2xl); }
  main.search:has(> .shop-search-list) > .shop-search-list > .shop-listing-controls { grid-column: 3; grid-row: 1; margin: 0; }
  main.search:has(> .shop-search-list) > .shop-search-head > .shop-search-meta { grid-column: 1; align-self: start; margin: .5rem 0; }
  main.search:has(> .shop-search-list) > .shop-search-head > .shop-search-meta > span { min-height: 2.25rem; }
  main.search:has(> .shop-search-list) > .shop-search-head > .shop-search-meta + .shop-category-chips { grid-column: 2 / -1; margin: .5rem 0; }
}

/* S5-A (Opus, O22): the product page as v1's live page, refined
   (templates/epdm-shop/product.html:1-60, price.html:1-220). It replaces the
   SF-B1, SF-C and SF-B2b rules of the roll, the siblings and the result
   (epdm-shop.css: .roll-*, .product-sibling*, the stale total) and adds the
   crumbs, the key features' heading, the box's footer and the tabs' band.
   Tokens only (S0); Folie follows through them. No ID in a selector. */

/* The crumbs (v1's shop-trail): S0's .shop-crumbs; on a phone one line, the
   product's name cut with an ellipsis. */
.product-crumbs { margin: 0 0 1.25rem; }
@media (max-width: 39.99rem) {
  .product-crumbs ol { flex-wrap: nowrap; overflow: hidden; }
  .product-crumbs li { flex-shrink: 0; }
  .product-crumbs li[aria-current] { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* The title and its facts: the code in S0's pill, the brand and the unit
   after it, quieter. */
.shop-page .product-head h1 { font-weight: 700; line-height: var(--leading-tight); letter-spacing: -.01em; color: var(--store-fg); }
.shop-page .product-head .product-facts { gap: .5rem 1rem; font-size: var(--text-xs); }
.product-head .product-facts > span:not(.product-sku) strong { font-weight: 600; color: #334155; }

/* An axis's or a field's icon in its soft square (v1's price.html legends). */
.product-axis-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--store-soft); color: var(--store-muted); }
.product-axis-icon .shop-icon { width: 1.125rem; height: 1.125rem; }

/* The box: v1's price card, 400px from 80rem, the price on the brand's
   gradient, then the chips, the length, the result, the cart, the footer. */
.product-box { gap: 1.25rem; }
.product-box > .product-offer { padding: 1.125rem 1.25rem; }
.shop-page .product-offer > .product-price .price { font-size: 2.25rem; letter-spacing: -.02em; }
.product-box > .product-siblings { order: -1; display: grid; gap: 1rem; margin: 0; }
.product-box > .shop-buy { display: grid; gap: 1rem; }

/* The chips (v1's price.html:24-40): a value with its unit, 44px high; the
   chosen one in the accent with v1's check; the sold-out one red, struck
   and not a link. */
.product-sibling-axis { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: var(--text-sm); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--store-fg); }
.product-sibling-links { gap: .5rem; }
.product-sibling { position: relative; justify-content: center; gap: .1875rem; min-width: 4.25rem; min-height: 2.75rem; padding: .375rem .75rem; border: 2px solid var(--border); border-radius: var(--radius); background: #fff; color: #334155; font-size: var(--text-base); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; transition: border-color .15s, background-color .15s, color .15s; }
.product-sibling-unit { font-size: var(--text-xs); font-weight: 500; color: var(--store-muted); }
a.product-sibling:hover { border-color: color-mix(in srgb, var(--store-accent) 50%, transparent); background: color-mix(in srgb, var(--store-accent) 4%, #fff); color: var(--store-accent); }
.product-sibling-current { border-color: var(--store-accent); background: var(--accent-soft); color: var(--shop-brand-dark); }
.product-sibling-current .product-sibling-unit { color: var(--store-accent); }
.product-sibling-current::after { content: ""; position: absolute; top: -.4375rem; right: -.4375rem; width: 1.125rem; height: 1.125rem; border: 2px solid #fff; border-radius: 50%; background: var(--store-accent); }
.product-sibling-current::before { content: ""; position: absolute; z-index: 1; top: -.1875rem; right: -.0625rem; width: .25rem; height: .4375rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.product-sibling-out { border-style: dashed; border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); text-decoration: line-through; cursor: not-allowed; }
.product-sibling-out .product-sibling-unit { color: inherit; }

/* The length (v1's price.html:60-100): the label and its field on one line,
   the slider under them with the value's tag and the limits; the pieces
   after, quieter (v1 had none: the cart takes them). */
.shop-buy .roll-form { gap: .75rem; margin: 0; }
.roll-length, .roll-pieces { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.roll-length-label { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); font-weight: 600; }
.roll-pieces-label { font-size: var(--text-sm); font-weight: 500; color: var(--store-muted); }
.roll-field { display: inline-flex; align-items: center; gap: .25rem; margin: 0; padding: 0 .75rem 0 .25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--store-soft); transition: border-color .15s; }
.roll-field:hover { border-color: var(--border-strong); }
.roll-field:has(.roll-input:focus-visible) { border-color: var(--store-accent); outline: 2px solid var(--focus); outline-offset: 1px; }
.roll-field:has(.roll-input:invalid) { border-color: var(--danger-line); background: var(--danger-soft); }
.shop-buy .roll-input { width: 5.5rem; min-height: 2.75rem; padding: .375rem .25rem; border: 0; border-radius: 0; background: transparent; color: var(--store-fg); font-size: var(--text-lg); font-weight: 700; text-align: right; }
.shop-buy .roll-input:focus-visible { outline: none; }
.roll-length .roll-input { appearance: textfield; }
.roll-length .roll-input::-webkit-inner-spin-button, .roll-length .roll-input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.roll-field-sm .roll-input { width: 3.75rem; font-size: var(--text-base); }
.roll-field-unit { font-size: var(--text-sm); font-weight: 500; color: var(--store-muted); }

.roll-slider { --roll-thumb: 1.75rem; position: relative; padding: 0 0 1.875rem; }
.roll-slider[hidden] { display: none; }
.shop-buy .roll-range { display: block; width: 100%; height: var(--roll-thumb); min-height: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.roll-range::-webkit-slider-runnable-track { height: .375rem; border-radius: var(--radius-full); background: linear-gradient(to right, var(--store-accent) calc(var(--roll-pos, 0) * 100%), var(--border-strong) 0); }
.roll-range::-moz-range-track { height: .375rem; border-radius: var(--radius-full); background: var(--border-strong); }
.roll-range::-moz-range-progress { height: .375rem; border-radius: var(--radius-full); background: var(--store-accent); }
/* The thumb is the roll seen from its end, as v1's (price.html:100-166):
   the core, the cardboard tube, the membrane. */
.roll-range::-webkit-slider-thumb { width: var(--roll-thumb); height: var(--roll-thumb); margin-top: calc((.375rem - var(--roll-thumb)) / 2); border: 2px solid #fff; border-radius: 50%; background: radial-gradient(circle, #0f172a 0 20%, #c49a5c 22% 42%, #334155 44% 100%); box-shadow: 0 2px 6px rgb(15 23 42 / .35); -webkit-appearance: none; appearance: none; }
.roll-range::-moz-range-thumb { width: var(--roll-thumb); height: var(--roll-thumb); box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background: radial-gradient(circle, #0f172a 0 20%, #c49a5c 22% 42%, #334155 44% 100%); box-shadow: 0 2px 6px rgb(15 23 42 / .35); }
.roll-range:focus-visible { outline: none; }
.roll-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--focus); }
.roll-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--focus); }
.roll-range-value { position: absolute; top: calc(var(--roll-thumb) + .375rem); left: clamp(1.5rem, calc(var(--roll-thumb) / 2 + var(--roll-pos, 0) * (100% - var(--roll-thumb))), calc(100% - 2rem)); padding: .125rem .5rem; border-radius: var(--radius-sm); background: var(--store-muted); color: #fff; font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
.roll-range-value::before { content: ""; position: absolute; top: -.25rem; left: 50%; border: .25rem solid transparent; border-top: 0; border-bottom-color: var(--store-muted); transform: translateX(-50%); }
.roll-limits { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-size: var(--text-xs); color: var(--store-muted); font-variant-numeric: tabular-nums; }
.roll-slider:not([hidden]) + .roll-limits { margin-top: -.25rem; }
/* v1's "Interval valid" (price.html:104), while the length is not one the
   cut takes; the field turns red with it. */
.roll-hint { display: none; margin: 0; font-size: var(--text-xs); font-weight: 500; color: var(--danger-ink); }
.roll-form:has(.roll-length .roll-input:invalid) .roll-hint { display: block; }
/* "Recalculează" only without JavaScript (S5-A.js marks the live form). */
.shop-buy .roll-calculate { justify-self: stretch; min-height: 2.75rem; border: 1px solid var(--border-strong); }
.roll-form[data-roll-live] .roll-calculate, .quantity-form[data-quantity-live] .roll-calculate { display: none; }

/* The result (v1's price.html:170-205), the server's quotation: Suprafață
   and Greutate side by side, then "Preț total" on the dark bar. While the
   fields differ from it, its values give way to placeholders and the cart's
   button waits (S5-A.js), never an old amount for new dimensions. */
.roll-result { gap: 1rem; }
.shop-buy .roll-quote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: .625rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--store-bg); }
.shop-buy .roll-quote > div { position: relative; display: block; padding: .625rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.roll-quote-area:nth-last-child(2) { grid-column: 1 / -1; }
.shop-buy .roll-quote dt { margin: 0 0 .125rem; font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--store-muted); }
.shop-buy .roll-quote dd { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--store-fg); font-variant-numeric: tabular-nums; }
.roll-quote-unit { font-size: var(--text-xs); font-weight: 500; color: var(--store-muted); }
.shop-buy .roll-quote .roll-quote-dims { margin-top: .125rem; font-size: var(--text-2xs); font-weight: 500; color: var(--store-muted); }
.roll-quote .shop-buy-width { font-size: inherit; }
.shop-buy .roll-quote > .roll-quote-total { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; padding: .875rem 1rem; border: 0; background: var(--shop-total); color: #fff; }
.shop-buy .roll-quote-total dt { grid-column: 1; grid-row: 1; margin: 0; color: rgb(255 255 255 / .7); }
.shop-buy .roll-quote .roll-quote-vat { grid-column: 1; grid-row: 2; font-size: var(--text-2xs); font-weight: 500; color: rgb(255 255 255 / .6); }
.shop-buy .roll-quote .roll-total { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: baseline; gap: .375rem; font-size: 1.75rem; line-height: 1.1; color: #fff; }
.shop-buy .roll-quote .roll-total-symbol { font-size: var(--text-base); font-weight: 600; color: rgb(255 255 255 / .8); }
.roll-result[data-roll-stale] .roll-quote { visibility: visible; }
.roll-result[data-roll-stale] .roll-quote dd { visibility: hidden; }
.roll-result[data-roll-stale] .roll-quote > div::after { content: ""; position: absolute; left: .75rem; bottom: .75rem; width: 55%; height: 1rem; border-radius: .25rem; background: var(--border); }
.roll-result[data-roll-stale] .roll-quote > .roll-quote-total::after { left: auto; right: 1rem; bottom: calc(50% - .75rem); width: 7rem; height: 1.5rem; background: rgb(255 255 255 / .18); }
@media (prefers-reduced-motion: no-preference) {
  .roll-result[data-roll-stale] .roll-quote > div::after { animation: roll-wait .8s ease-in-out infinite alternate; }
}
@keyframes roll-wait { to { opacity: .4; } }
.roll-message > p, .roll-result > .roll-adjusted, .roll-result > .roll-problem { margin: 0; padding: .625rem .75rem; border: 1px solid var(--warning-soft); border-radius: var(--radius); background: var(--warning-soft); color: var(--warning); font-size: var(--text-sm); }

/* "Adaugă în coș": v1's CTA, the whole width, with the lock; the mini-cart
   a quiet line under it. */
.product-box .shop-buy-submit { width: 100%; min-height: 3.25rem; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.product-box .shop-buy-submit .shop-icon { width: 1.125rem; height: 1.125rem; }
.product-box .mini-cart { margin: -.5rem 0 0; }
.product-box .mini-cart-link { justify-content: center; padding: .25rem; border: 0; background: none; font-size: var(--text-xs); }
.product-box .mini-cart-title { font-weight: 500; color: var(--store-muted); }
.product-box .mini-cart-view { margin-left: 0; }

/* The simple box (pieces, metres): the quantity with − and + (S5-A.js; the
   number alone without it) and the cart. */
.product-box .shop-buy-field { justify-content: space-between; }
.product-box .shop-buy-field label { min-width: 0; font-size: var(--text-sm); font-weight: 600; }
.buy-stepper { display: inline-flex; align-items: center; gap: .25rem; margin: 0; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--store-soft); }
.buy-stepper:has(.roll-input:focus-visible) { border-color: var(--store-accent); outline: 2px solid var(--focus); outline-offset: 1px; }
.shop-buy .buy-stepper .roll-input { width: 3.5rem; text-align: center; }
.buy-stepper .note { padding: 0 .5rem 0 .125rem; font-size: var(--text-sm); color: var(--store-muted); }
.buy-step { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: #334155; cursor: pointer; }
.buy-step[hidden] { display: none; }
.buy-step:hover { border-color: color-mix(in srgb, var(--store-accent) 40%, transparent); color: var(--store-accent); }
.buy-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.buy-step:disabled { opacity: .4; cursor: not-allowed; }
.buy-step .shop-icon { width: 1rem; height: 1rem; }

/* The box's footer: the delivery term, then v1's "Plată securizată
   garantată" band at the bottom of the card. */
.product-box > .delivery-term, .product-box > .product-secure { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; text-align: center; }
.product-box > .delivery-term .shop-icon { width: 1.125rem; height: 1.125rem; color: var(--store-accent); }
.product-box > .product-secure { order: 3; margin: -.25rem -1.25rem -1.25rem; padding: .875rem 1.25rem; border-top: 1px solid var(--border); background: var(--store-bg); color: var(--store-muted); font-size: var(--text-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.product-secure-icon { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); background: var(--success-soft); color: var(--success); }
.product-secure-icon .shop-icon { width: .875rem; height: .875rem; }

/* "Caracteristici principale" (v1's product.html:20-24): the heading with its
   icon over S0's lead card; the sharing under it, as v1. */
.product-features { display: grid; gap: 1rem; }
.product-features:not(:has(.rich-text > *)) { display: none; }
.product-features-title { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: #334155; }
.product-features-title .product-axis-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--store-accent); }
.product-features-title .product-axis-icon .shop-icon { width: 1.25rem; height: 1.25rem; }
.product-info > .product-share { margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--store-soft); }

/* The gallery: v1's thumbnails, the current one framed in the accent. */
.product-gallery-thumbs a { border-color: var(--border); opacity: 1; transition: border-color .15s; }
.product-gallery-thumbs a:hover { border-color: color-mix(in srgb, var(--store-accent) 50%, transparent); }
.product-gallery-thumbs a[aria-current="true"] { border-color: var(--store-accent); box-shadow: 0 0 0 1px var(--store-accent); }
.product-gallery-thumbs a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The tabs on v1's full-width band (product.html:150), the table of contents
   with its heading and the description's sections in the accent. */
.product-detail > .product-tabs { margin: 3rem 0 0; }
.product-tab-list { padding: .625rem 0; border-block: 0; border-image: linear-gradient(var(--border) 0 1px, var(--store-soft) 1px calc(100% - 1px), var(--border) 0) fill 0 // 0 100vmax; }
.product-tab { padding: .5rem 1rem; }
.product-toc { padding: 0; overflow: hidden; }
.product-toc-title { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .75rem 1rem; border-bottom: 1px solid var(--store-soft); }
.product-toc > ol { padding: .75rem; }
.product-toc > ol > li > a { background: var(--accent-soft); color: var(--store-accent); font-weight: 500; }
.product-toc > ol > li > a:hover { background: var(--accent-soft); color: var(--shop-brand-dark); }

@media (prefers-reduced-motion: reduce) {
  .product-sibling, .roll-field, .product-gallery-thumbs a { transition: none; }
}

/* I5 (O22): S5-A's slider shows its focus on the thumb's ring; the base rule
   of the box's fields (.shop-buy input:focus-visible) would frame the whole
   track as well. */
.shop-buy .roll-range:focus-visible { outline: none; }
/* I5 (O22): the delivery term has no icon in its shared partial; S5-A's
   flex row would break its text into lines (innerText too). */
.product-box > .delivery-term { display: block; }
/* A chip to a variant Stock reports sold out, which the Catalog still
   offers: a link (S4), struck as S5-A's sold-out chip. */
a.product-sibling-soldout { border-style: dashed; border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); text-decoration: line-through; }
.product-sibling-soldout .product-sibling-unit { color: inherit; }

/* I-search: the search page (/search, v1's search.html): the query in the
   title, the total and the category kept as quiet chips, then the category
   list's controls, grid and pages over the full width; without a result,
   v1's message and the way to the complete list. */
.shop-search-head { margin: 0 0 1.25rem; }
.shop-search-head h1 { margin: .5rem 0 .75rem; overflow-wrap: anywhere; }
.shop-search-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; font-size: var(--text-sm); color: var(--store-muted); }
.shop-search-meta:empty { display: none; }
.shop-search-meta > span { display: inline-flex; align-items: center; gap: .375rem; min-height: 2rem; padding: .25rem .75rem; border-radius: var(--radius-full); background: var(--store-soft); }
.shop-search-meta strong { color: var(--store-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-search-meta a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.shop-search-list[data-view="list"] > .shop-cards { grid-template-columns: minmax(0, 1fr); }
.shop-search-empty { display: grid; justify-items: center; gap: 1.5rem; padding: 3rem 1rem 4rem; text-align: center; color: var(--store-muted); }
.shop-search-empty p { max-width: 36rem; margin: 0; overflow-wrap: anywhere; }
.shop-search-query { color: var(--store-fg); font-weight: 600; }
/* The search's chips (audit 03.11, lot 4): the number is a badge of its
   own, apart from the category's name; its word is the screen reader's. */
.shop-category-chip-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.375rem; margin-inline-start: .25rem; padding: 0 .4375rem; border-radius: var(--radius-full); background: var(--store-soft); color: var(--store-fg); font-size: var(--text-xs); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
a.shop-category-chip:hover .shop-category-chip-count { background: var(--accent-soft); color: var(--store-accent); }
.shop-category-chip[aria-current] .shop-category-chip-count { background: var(--store-accent); color: #fff; }
/* The way on from a search without results and from a 404 (lot 4): one
   card, centred as both pages' message, the shop's search first, then the
   main menu's categories and the site's contact; 44 px targets, the field
   at 16 px so a phone does not zoom into it. */
.shop-search-empty:has(+ .shop-recovery) { padding-bottom: 1.5rem; }
.shop-recovery { display: grid; gap: 1.25rem; width: 100%; max-width: 40rem; margin: 0 auto 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-sm); text-align: center; }
.shop-recovery-search { display: grid; gap: .5rem; margin: 0; }
.shop-recovery-label { font-size: var(--text-base); font-weight: 700; color: var(--store-fg); }
.shop-recovery-field { display: flex; min-width: 0; }
.shop-recovery-input { flex: 1 1 auto; min-width: 0; min-height: 3rem; margin: 0; padding: 0 1rem; border: 1px solid var(--control-border); border-right: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--field); color: var(--store-fg); font: inherit; font-size: var(--text-base); }
.shop-recovery-input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.shop-recovery-submit { display: inline-flex; flex-shrink: 0; align-items: center; gap: .5rem; min-height: 3rem; margin: 0; padding: 0 1.25rem; border: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: linear-gradient(135deg, var(--shop-brand-dark), var(--store-accent)); color: #fff; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.shop-recovery-submit:hover { filter: brightness(.92); }
.shop-recovery-submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-recovery-submit .shop-icon { width: 1.125rem; height: 1.125rem; }
/* A menu of groups left without a page here lists nothing: no heading alone. */
.shop-recovery-categories:not(:has(a)) { display: none; }
.shop-recovery-categories h2 { margin: 0 0 .625rem; font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-tight); color: var(--store-muted); }
.shop-recovery-categories ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.shop-recovery-categories li { min-width: 0; max-width: 100%; }
.shop-recovery-categories a { display: inline-flex; align-items: center; max-width: 100%; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: #fff; color: var(--store-fg); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-tight); overflow-wrap: anywhere; text-decoration: none; }
.shop-recovery-categories a:hover { border-color: var(--store-accent); background: color-mix(in srgb, var(--store-accent) 5%, #fff); color: var(--store-accent); }
.shop-recovery-categories a:focus-visible, .shop-recovery-contact a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-recovery-contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--store-muted); }
.shop-recovery-ask { flex-basis: 100%; font-weight: 600; color: var(--store-fg); }
.shop-recovery-contact a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; color: var(--store-fg); font-weight: 500; text-decoration: none; }
.shop-recovery-contact a:hover { border-color: color-mix(in srgb, var(--store-accent) 40%, transparent); background: color-mix(in srgb, var(--store-accent) 5%, #fff); color: var(--store-accent); }
.shop-recovery-contact .shop-icon { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--store-accent); }
.shop-recovery-contact strong { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* On the 404 the card takes the width its categories need; on a phone and
   on a short window (1366×650) the status and the spaces shrink, so the
   search and the categories show without scrolling. */
.shop-absence-box:has(> .shop-recovery) { width: 100%; max-width: 40rem; }
.shop-absence-box > .shop-recovery { margin-bottom: 2rem; }
/* /finalizare with nothing to order (QA of Train 2a, R5): the recovery
   block continues the empty state's card under a rule, not a card in a
   card, and keeps its own margins against the empty state's paragraphs. */
.checkout-empty > .shop-recovery { margin: 2rem auto 0; padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.checkout-empty > .shop-recovery p { margin: 0; }
.checkout-empty > .shop-checkout-empty-more { margin: 1.5rem 0 0; }
.shop-checkout-empty-more > a:not(.shop-button) { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--store-accent); }
@media (max-width: 39.99rem), (max-height: 47.99rem) {
  .shop-absence { padding: 1.5rem 1rem 3rem; }
  .shop-absence-status { width: 6rem; height: 6rem; margin-bottom: 1rem; font-size: 2.75rem; background: radial-gradient(circle, color-mix(in srgb, var(--store-accent) 10%, transparent) 0 2.4rem, color-mix(in srgb, var(--store-accent) 5%, transparent) 2.4rem); }
  .shop-absence-box > p { margin-bottom: 1.25rem; }
  .shop-absence-box > .shop-recovery { margin-bottom: 1.25rem; }
  .shop-search-empty { gap: 1rem; padding-top: 1rem; }
}

/* I-search: the header's suggestions (v1's search-suggest.html), swapped
   by HTMX into the search form's panel: at most five lines, a 40px image,
   the title, the price ("de la" for a range), then "Vezi toate (N)"; the
   panel's chrome lives here, so an empty target shows nothing. */
.shop-suggest { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; text-align: left; box-shadow: 0 10px 40px -5px color-mix(in srgb, var(--store-accent) 20%, transparent), 0 4px 15px -3px rgb(0 0 0 / .08); }
/* One column no wider than the panel: an auto column grows to a title's
   unwrapped width, past the panel, which cuts the title and hides the price. */
.shop-suggest-list { display: grid; grid-template-columns: minmax(0, 1fr); padding: .5rem 0; }
.shop-suggest-item, .shop-suggest-all { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .625rem 1rem; color: var(--store-fg); font-size: var(--text-sm); text-decoration: none; }
.shop-suggest-item:hover, .shop-suggest-item[aria-selected="true"], .shop-suggest-all:hover, .shop-suggest-all[aria-selected="true"] { background: color-mix(in srgb, var(--store-accent) 5%, #fff); }
.shop-suggest-item:focus-visible, .shop-suggest-all:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.shop-suggest-item img, .shop-suggest-noimage { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: 1px solid var(--store-soft); border-radius: var(--radius); object-fit: contain; background: var(--store-bg); }
.shop-suggest-title { flex: 1; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.shop-suggest-price { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-suggest-from { font-size: .625rem; font-weight: 500; text-transform: uppercase; color: var(--store-muted); }
.shop-suggest-all { border-top: 1px solid var(--store-soft); font-weight: 600; color: var(--store-accent); }
.shop-suggest-none { margin: 0; padding: .75rem 1rem; font-size: var(--text-sm); color: var(--store-muted); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) { .shop-suggest-item, .shop-suggest-all { transition: background-color .15s; } }

/* O22 I6: S6-B · the cart, the checkout and the order page, "compact
   commercial" (lot O22, variant B), from the proposal's S6-B.css; the
   changes: a line without an image (until the page's model gives one, and
   after, for a product without one) keeps no empty column; the phone's
   checkout bar is its own, beside the placement's button; the cart's fixed
   bar is the cart page's only, not the header dialog's; the order's main
   column stacks the account's forms. v1's structure (epdm-shop cart.html, checkout.html,
   order.html): two columns with a sticky summary, the checkout's numbered
   sections, v1's fixed total bar on phones (checkout.html:140), the order's
   card with its band. Denser than v1: the line's image, measures, quantity
   and total on one row; the delivery and payment choices as cards with their
   state; the place button under the summary, in one card. Folie changes the
   brand tokens only (S0). Written to enter epdm-shop.css after S0's cart,
   checkout and order rules, unchanged. */

/* ---------- Shared: the summary card's head, the trust line ---------- */
.shop-summary-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin: 0 0 .875rem; }
.shop-summary-head h2 { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--store-fg); }
.shop-checkout-summary .shop-summary-edit { border: 0; padding: 0; background: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--store-accent); text-decoration: underline; text-underline-offset: .2em; }
.shop-checkout-summary .shop-summary-edit:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.shop-checkout-order-notes textarea { box-sizing: border-box; width: 100%; min-height: 6rem; padding: .625rem .75rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); color: inherit; font: inherit; resize: vertical; }
.shop-checkout-order-notes textarea:focus-visible { border-color: var(--store-accent); outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-summary-count { margin: 0; font-size: var(--text-xs); font-weight: 500; color: var(--store-muted); font-variant-numeric: tabular-nums; }
.shop-summary-secure { display: flex; align-items: center; justify-content: center; gap: .375rem; margin: .75rem 0 0; font-size: var(--text-xs); color: var(--store-muted); }
.shop-summary-secure .shop-icon { width: .875rem; height: .875rem; color: var(--success); }

/* ---------- The cart (/cos) ---------- */
.shop-cart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: .25rem 0 1rem; }
.shop-cart-head h1 { margin: 0; font-size: var(--text-2xl); }
.shop-cart-count { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--store-muted); font-variant-numeric: tabular-nums; }

/* A line: the image, then its title and total, code, measures, unit price;
   the quantity and the removal at the bottom on a phone, in their own
   columns from 48rem. The head and the actions only group the template's
   elements: the line's grid places them. */
.shop-cart-lines { gap: .625rem; }
.shop-cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title total" "sku sku" "meas meas" "price remove" "note note" "set set"; column-gap: .875rem; row-gap: .25rem; align-items: start; padding: .875rem; border-radius: var(--radius-lg); box-shadow: none; }
.shop-cart-line:has(> .shop-cart-line-media) { grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: "media title total" "media sku sku" "media meas meas" "media price remove" "note note note" "set set set"; }
.shop-cart-line-head, .shop-cart-line-actions { display: contents; }
.shop-cart-line-media { grid-area: media; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.shop-cart-line-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-cart-line-title { grid-area: title; font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); }
.shop-cart-line-title a { color: inherit; text-decoration: none; }
.shop-cart-line-title a:hover { color: var(--store-accent); text-decoration: underline; text-underline-offset: 2px; }
.shop-cart-line-title a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.shop-cart-line-total { grid-area: total; text-align: right; font-size: var(--text-base); color: var(--shop-total); }
.shop-cart-line-sku { grid-area: sku; margin: 0; font-size: var(--text-2xs); }
.shop-cart-line .shop-cart-measures, .shop-cart-line .shop-cart-amount { grid-area: meas; margin: .25rem 0 0; }
.shop-cart-measures { gap: .375rem; }
.shop-cart-measures div { gap: .25rem; padding: .125rem .5rem; border-radius: var(--radius-sm); background: var(--store-soft); font-size: var(--text-xs); line-height: 1.5; }
.shop-cart-amount { font-size: var(--text-xs); font-weight: 600; }
.shop-cart-line .shop-cart-unit-price { grid-area: price; margin: 0; font-size: var(--text-xs); }
.shop-cart-line > .shop-cart-note { grid-area: note; margin: .25rem 0 0; }
.shop-cart-line .line-set { grid-area: set; flex-wrap: nowrap; gap: .5rem; margin-top: .5rem; padding-top: .625rem; border-top: 1px solid var(--store-soft); }
.shop-cart-line .line-set button { white-space: nowrap; }
.shop-cart-line .line-remove { grid-area: remove; justify-self: end; align-self: center; margin-right: -.625rem; }
.shop-cart-line-actions label { gap: .375rem; font-size: var(--text-xs); color: var(--store-muted); }
.shop-cart-line-actions input { width: 4.5rem; min-height: 2.75rem; padding: .375rem .5rem; text-align: center; font-size: var(--text-base); }
.shop-cart-line .line-set button { min-height: 2.75rem; padding: 0 .75rem; font-size: var(--text-xs); color: var(--store-accent); border-color: color-mix(in srgb, var(--store-accent) 30%, transparent); }
.shop-cart-line .line-set button:hover { background: var(--accent-soft); }
.shop-cart-line .line-remove button { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .625rem; border-color: transparent; background: none; color: var(--store-muted); font-size: var(--text-xs); }
.shop-cart-line .line-remove .shop-icon { width: 1rem; height: 1rem; }
.shop-cart-line-actions button:focus-visible, .shop-cart-clear button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-cart-clear { margin: .75rem 0 0; }
.shop-cart-clear button { min-height: 2.75rem; padding: 0 .25rem; border: 0; background: none; color: var(--store-muted); font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 2px; }
.shop-cart-clear button:hover { border: 0; background: none; color: var(--danger-ink); }
@media (min-width: 48rem) {
  .shop-cart-line { grid-template-columns: minmax(0, 1fr) auto minmax(7rem, auto); grid-template-areas: "title set total" "sku set remove" "meas set remove" "price set remove" "note note note"; column-gap: 1.25rem; padding: 1rem 1.25rem; }
  .shop-cart-line:has(> .shop-cart-line-media) { grid-template-columns: 5.5rem minmax(0, 1fr) auto minmax(7rem, auto); grid-template-areas: "media title set total" "media sku set remove" "media meas set remove" "media price set remove" "media note note note"; }
  .shop-cart-line-title { font-size: var(--text-base); }
  .shop-cart-line-total { font-size: var(--text-lg); }
  .shop-cart-line .line-set { flex-direction: column; align-items: stretch; width: 11rem; margin: 0; padding: 0; border: 0; }
  .shop-cart-line .line-set label { justify-content: space-between; }
  .shop-cart-line .line-remove { align-self: start; margin: 0 -.625rem 0 0; }
}

/* The summary: v1's accent strip above, the total large, the button and its
   total in the dock: on a phone the dock is v1's fixed bar, above S1's
   bottom bar where it exists. */
.shop-cart-summary { padding: 1.5rem 1.25rem 1.25rem; border-radius: var(--radius-lg); background: #fff linear-gradient(to right, var(--store-accent), var(--shop-brand-light)) top / 100% .375rem no-repeat; }
.shop-cart-summary dl { margin: 0 0 1rem; }
.shop-cart-summary dl div { align-items: baseline; padding: .375rem 0; border-bottom: 0; }
.shop-cart-summary dt { font-size: var(--text-sm); }
.shop-cart-summary dt .note { font-size: var(--text-2xs); }
.shop-cart-summary .shop-cart-total { margin-top: .375rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.shop-cart-summary .shop-cart-total dt { font-size: var(--text-base); }
.shop-cart-summary .shop-cart-total dd { font-size: var(--text-2xl); font-weight: 800; color: var(--shop-total); }
.shop-cart-summary .delivery-term { margin: 0 0 1rem; padding: .5rem .75rem; border-radius: var(--radius); background: var(--success-soft); color: var(--success); font-size: var(--text-xs); font-weight: 600; }
.shop-cart-dock-total { display: none; }
.shop-cart-checkout { min-height: 3.25rem; font-size: var(--text-base); }
/* The arrow is the link's ::after: its text stays v1's (the page's tests
   read it whole); "/ ''" keeps it from assistive technology. */
.shop-cart-checkout::after { content: "\2192" / ""; font-size: 1.125rem; font-weight: 400; line-height: 1; }
.shop-cart-summary .shop-cart-total-note { margin: -1.25rem 0 1rem; text-align: left; font-size: var(--text-2xs); font-weight: 600; }
.shop-cart-continue { color: var(--store-accent); }
/* CFG-11: the summary's two quiet ways on, sharing and shopping, are one link:
   the same class and the same centre; the share is a form, so its button wears
   the link. */
.shop-cart-share { margin: .75rem 0 0; text-align: center; }
.shop-cart-share button.shop-cart-continue { display: inline-flex; align-items: center; min-height: 2.75rem; margin: 0; padding: 0 .25rem; border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.shop-cart-share button.shop-cart-continue:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-cart-share + .shop-cart-continue { margin-top: 0; }
@media (max-width: 63.99rem) {
  .shop-cart-grid .shop-cart-dock { position: fixed; z-index: 40; inset: auto 0 0; display: flex; align-items: center; gap: .75rem; padding: .625rem max(1rem, env(safe-area-inset-right)) calc(.625rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-top: 1px solid var(--border); background: #fff; box-shadow: 0 -4px 20px rgb(0 0 0 / .08); }
  .shop-cart-grid .shop-cart-dock-total { display: grid; flex: 1; min-width: 0; margin: 0; line-height: 1.2; }
  .shop-cart-dock-total span { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--store-muted); }
  .shop-cart-dock-total strong { font-size: var(--text-xl); font-weight: 800; color: var(--shop-total); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .shop-cart-dock .shop-cart-checkout { flex: none; width: auto; padding: 0 1.125rem; }
  body.shop:has(.shop-cart-grid .shop-cart-dock) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  body.shop:has(.shop-tabbar) .shop-cart-grid .shop-cart-dock { bottom: calc(3.5rem + env(safe-area-inset-bottom)); padding-bottom: .625rem; }
  body.shop:has(.shop-tabbar):has(.shop-cart-grid .shop-cart-dock) { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 64rem) {
  .shop-cart-grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; }
}

/* The header cart keeps the original forms and a compact, fixed summary. */

/* ---------- The checkout (/finalizare) ---------- */
.shop-checkout-head { align-items: center; margin: 0 0 1rem; }
.shop-checkout-head h1 { font-size: var(--text-2xl); }
.shop-checkout-head p { font-size: var(--text-sm); }
.shop-checkout-alert { padding: .5rem .875rem; font-size: var(--text-xs); font-weight: 500; }

/* The sections, numbered as v1's steps (checkout.html:18) by a counter: the
   template keeps its headings. */
.shop-checkout-form { gap: .75rem; counter-reset: shop-checkout-step; }
.shop-checkout-section { padding: 1rem 1.25rem 1.25rem; border-radius: var(--radius-lg); }
.shop-checkout-section > h2, fieldset.shop-checkout-section > legend { display: flex; align-items: center; gap: .625rem; margin: 0 0 .875rem; font-size: var(--text-base); }
.shop-checkout-section > h2::before, fieldset.shop-checkout-section > legend::before { counter-increment: shop-checkout-step; content: counter(shop-checkout-step); display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: var(--radius-full); background: var(--store-accent); color: #fff; font-size: var(--text-xs); font-weight: 700; }
fieldset.shop-checkout-section > legend { margin-bottom: .875rem; }

/* Checkout cohesion, zone A: the four steps under the page's head, as the
   server judged them (pages.CheckoutSteps), with "Date salvate" at the
   bar's end; a phone shows the markers and, under the bar, the current
   step in words. The bar wraps rather than clip: "Date salvate" takes a
   line of its own where a language's words leave it no room. */
.shop-checkout-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; margin: 0 0 1rem; padding: .625rem .875rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
.shop-checkout-steps { display: flex; flex: 1 1 13rem; align-items: center; gap: .5rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.shop-checkout-steps li { display: flex; flex: 1 1 auto; align-items: center; gap: .5rem; min-width: 0; font-size: var(--text-sm); color: var(--store-muted); }
.shop-checkout-steps li:last-child { flex: none; }
.shop-checkout-steps li:not(:last-child)::after { content: ""; flex: 1 1 0; min-width: .5rem; height: 2px; margin: 0 .125rem; border-radius: 2px; background: var(--border); }
.shop-checkout-steps li[data-step="done"]:not(:last-child)::after { background: var(--success); }
.shop-checkout-step-mark { display: inline-grid; flex: none; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: var(--store-soft); color: var(--store-muted); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-checkout-step-mark .shop-icon { width: 1rem; height: 1rem; stroke-width: 2.25; }
.shop-checkout-steps li[data-step="done"] > .shop-checkout-step-mark { background: var(--success-soft); color: var(--success); }
.shop-checkout-steps li[data-step="current"] > .shop-checkout-step-mark { background: var(--store-accent); color: #fff; }
.shop-checkout-step-name { white-space: nowrap; }
.shop-checkout-steps li[data-step="done"] > .shop-checkout-step-name { color: var(--success); font-weight: 600; }
.shop-checkout-steps li[data-step="current"] > .shop-checkout-step-name { color: var(--store-fg); font-weight: 700; }
.shop-checkout-saved:not([hidden]) { display: inline-flex; flex: none; align-items: center; gap: .25rem; margin: 0 0 0 auto; font-size: var(--text-xs); color: var(--store-muted); }
.shop-checkout-saved .shop-icon { width: .875rem; height: .875rem; color: var(--success); stroke-width: 2.25; }
.shop-checkout-step-now { display: none; }

/* The sections' headings: the counter's number, an icon, the title and a
   line of what the section asks, over a rule across the card. */
.shop-checkout-section > h2.shop-checkout-heading { margin: -1rem -1.25rem 1rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--border); border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; background: linear-gradient(#fbfcfd, #fff); line-height: 1.25; }
.shop-checkout-heading-icon { display: inline-grid; flex: none; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: .5rem; background: #fff; color: var(--store-accent); }
.shop-checkout-heading-icon .shop-icon { width: 1.125rem; height: 1.125rem; }
.shop-checkout-heading-text { display: grid; min-width: 0; }
.shop-checkout-heading-sub { margin-top: .125rem; font-size: var(--text-xs); font-weight: 400; color: var(--store-muted); }

@media (max-width: 47.99rem) {
  /* "Securizat" on the title's row, the subtitle under both. */
  .shop-checkout-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; }
  .shop-checkout-head > div { display: contents; }
  .shop-checkout-head h1 { grid-area: 1 / 1; }
  .shop-checkout-head > div > p { grid-column: 1 / -1; margin: 0; }
  .shop-checkout-head > .shop-checkout-secure { grid-area: 1 / 2; margin: 0; padding: .25rem .625rem; }
  .shop-checkout-progress { gap: .375rem .75rem; margin-bottom: .375rem; padding: .5rem .625rem; }
  .shop-checkout-steps, .shop-checkout-steps li { gap: .25rem; }
  .shop-checkout-step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .shop-checkout-step-now { display: block; margin: 0 0 .75rem; padding: 0 .125rem; font-size: var(--text-xs); font-weight: 600; color: var(--store-fg); overflow-wrap: anywhere; }
  .shop-checkout-section > h2.shop-checkout-heading { padding: .75rem 1.25rem; }
}
.shop-checkout-fields { gap: .75rem 1rem; }
.shop-checkout-field { gap: .25rem; }
.shop-checkout-field label { font-size: var(--text-xs); color: #334155; }
.shop-checkout-field input, .shop-checkout-field select, .shop-checkout-lookup input { min-height: 2.75rem; padding: .5rem .75rem; }
.shop-checkout-field input:focus-visible, .shop-checkout-field select:focus-visible, .shop-checkout-lookup input:focus-visible { border-color: var(--store-accent); outline: 2px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; }
.shop-checkout-field input::placeholder, .shop-checkout-lookup input::placeholder { color: #94a3b8; }
.shop-checkout-lookup-button { min-height: 2.75rem; }
.shop-checkout-section > * + .shop-checkout-field, .shop-checkout-section > * + .shop-checkout-fields { margin-top: .75rem; }

/* The choices (delivery, billing kind) and the options (carrier, payment):
   cards with the checked one outlined, without a shift; a choice the quote
   cannot serve (data-state="unavailable", F6) stays choosable, dashed, with
   its reason under the name. */
.shop-checkout-methods { gap: .5rem; margin: 0 0 .75rem; }
.shop-checkout-methods legend { margin: 0 0 .375rem; font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.shop-checkout-choice, .shop-checkout-option { flex-wrap: wrap; gap: .25rem .625rem; min-height: 3.25rem; padding: .625rem .875rem; border-width: 1px; border-radius: var(--radius); background: #fff; transition: border-color .15s, box-shadow .15s; }
.shop-checkout-choice:hover, .shop-checkout-option:hover { border-color: color-mix(in srgb, var(--store-accent) 45%, transparent); }
.shop-checkout-choice:has(input:checked), .shop-checkout-choice.is-chosen, .shop-checkout-option:has(input:checked) { border-color: var(--store-accent); box-shadow: inset 0 0 0 1px var(--store-accent); background: color-mix(in srgb, var(--store-accent) 5%, #fff); }
.shop-checkout-choice:has(input:focus-visible), .shop-checkout-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-checkout-choice > span:first-of-type { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-sm); }
.shop-checkout-choice .shop-icon { width: 1.25rem; height: 1.25rem; color: var(--store-accent); }
/* The choice's icon follows its texts in the markup, which stay v1's for
   the page's tests; the order draws it between the radio and the name. */
.shop-checkout-choice > span { order: 2; }
.shop-checkout-choice > .shop-checkout-choice-icon { order: 1; display: inline-flex; }
.shop-checkout-choice .note { font-size: var(--text-xs); }
.shop-checkout-choice-state { flex-basis: 100%; padding-left: 1.75rem; font-size: var(--text-xs); font-weight: 500; color: var(--warning); }
.shop-checkout-choice[data-state="unavailable"] { border-style: dashed; background: var(--store-soft); }
.shop-checkout-choice[data-state="unavailable"] .shop-checkout-choice-title, .shop-checkout-choice[data-state="unavailable"] .shop-icon { color: var(--store-muted); }
/* checkout-cohesion B (03.11): a choice is a tile with its icon in a
   square, the name with a line under it and the native radio at the right.
   The markup keeps the radio first, so Tab and the reading order stay; the
   order only draws it last. Free pickup is a word, in the theme's success
   green (5.1:1 on the chosen tile's tint); a paid one keeps its sum. */
.shop-checkout-choice { flex-wrap: nowrap; gap: .75rem; }
.shop-checkout-choice > .shop-checkout-choice-icon { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: var(--store-soft); }
.shop-checkout-choice:has(input:checked) > .shop-checkout-choice-icon, .shop-checkout-choice.is-chosen > .shop-checkout-choice-icon { background: color-mix(in srgb, var(--store-accent) 12%, #fff); }
.shop-checkout-choice > span.shop-checkout-choice-text { display: grid; flex: 1; min-width: 0; gap: .125rem; font-weight: 400; line-height: 1.3; }
.shop-checkout-choice-title { font-size: var(--text-sm); font-weight: 600; color: var(--store-fg); }
.shop-checkout-choice-hint { font-size: var(--text-xs); color: var(--store-muted); }
.shop-checkout-choice-hint .note { font-size: inherit; }
.shop-checkout-choice-free { font-weight: 700; color: var(--success); }
.shop-checkout-choice .shop-checkout-choice-state { flex-basis: auto; padding-left: 0; }
.shop-checkout-choice > input { order: 3; margin-left: auto; }
/* „Aceleași / Alte date”: one compact switch of two segments, the same
   billing_same radios. Each text is a short one and its tail („Aceleași
   date” + „ca la livrare”), one phrase in the markup; where the billing
   section is narrow (a phone, a desktop beside the summary at ~1024 px),
   only the short one shows. A segment that still does not fit goes to its
   own row rather than out of the section. The container is the switch's
   own wrapper: a container scopes CSS counters, and one around a section's
   title would restart its number (shop-checkout-step). */
.checkout-billing-same-wrap { container: checkout-billing-same / inline-size; }
.shop-checkout-methods.checkout-billing-same { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: .125rem; padding: .1875rem; border: 1px solid var(--border); border-radius: .625rem; background: var(--store-soft); }
.checkout-billing-same .shop-checkout-choice { flex: 1 1 auto; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .375rem .875rem; border: 0; border-radius: .45rem; box-shadow: none; background: transparent; }
.checkout-billing-same .shop-checkout-choice:has(input:checked) { background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .12); }
.checkout-billing-same .shop-checkout-choice > input { order: 0; margin-left: 0; }
.checkout-billing-same .shop-checkout-choice > span.checkout-billing-same-text { display: block; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
@container checkout-billing-same (max-width: 40rem) {
  .shop-checkout-methods.checkout-billing-same { display: flex; }
  .checkout-billing-same .shop-checkout-choice { flex: 1 1 0; }
  .checkout-billing-same .is-tail { display: none; }
}
.shop-checkout-warn, .shop-checkout-ok { padding: .5rem .75rem; font-size: var(--text-xs); }
.shop-checkout-option { align-items: flex-start; margin: 0 0 .5rem; }
.shop-checkout-option input { margin-top: .125rem; }
.shop-checkout-option-text { font-size: var(--text-sm); }
.shop-checkout-option-text .note { font-size: var(--text-xs); line-height: 1.4; }

/* The pickup point beside the recipient's name. */
.shop-checkout-pickup-row { display: grid; gap: .75rem 1rem; align-items: start; }
.shop-checkout-pickup { margin: 0; padding: .625rem .875rem; border: 1px solid var(--border); border-left: 3px solid var(--store-accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent-soft) 45%, #fff); font-size: var(--text-sm); line-height: 1.5; }
.shop-checkout-pickup-row .shop-checkout-field { margin: 0; }
.shop-checkout-section > .shop-checkout-pickup { margin-bottom: .75rem; }
.shop-checkout-section > .shop-checkout-choice.is-chosen { margin-bottom: .75rem; }
.checkout-billing > * + * { margin-top: .75rem; }
.checkout-billing-pickup { font-size: var(--text-xs); }
.shop-checkout-company { gap: .625rem; padding: .875rem; border-radius: var(--radius); }

/* The payment: the options two by two; the selected one explains itself,
   so the note under them is gone (template). Recalculate: the no-script
   path only; HTMX's own attribute hides it once the live quote runs. */
@media (min-width: 40rem) {
  .payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .5rem; align-items: stretch; }
  .payment-methods > :not(.shop-checkout-option) { grid-column: 1 / -1; }
  .payment-methods > legend { float: none; }
  .shop-checkout-pickup-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.shop-checkout-calculate { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--border); background: #fff; box-shadow: none; color: var(--store-accent); }
.shop-checkout-form[data-htmx-powered] .shop-checkout-calculate[data-recalculate] { display: none; }

/* The summary and the placement: one card, sticky beside the form (S0). */
.shop-checkout-summary { padding: 1.5rem 1.25rem 1rem; box-shadow: none; }
.shop-checkout-summary:has(+ .shop-checkout-placement) { border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.shop-checkout-summary .shop-checkout-lines { gap: .75rem; margin: 0 0 .75rem; padding: 0 0 .875rem; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.shop-checkout-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
.shop-checkout-lines li:has(> .shop-checkout-line-thumb) { grid-template-columns: 3rem minmax(0, 1fr) auto; }
.shop-checkout-line-media { display: block; width: 3rem; height: 3rem; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.shop-checkout-line-text { min-width: 0; line-height: 1.35; }
.shop-checkout-line-title { display: block; margin: 0 0 .125rem; font-size: var(--text-sm); }
.shop-checkout-lines .line-sku, .shop-checkout-lines .shop-checkout-line-text .note { font-size: var(--text-2xs); color: var(--store-muted); }
.shop-checkout-lines .shop-checkout-line-text .note::before { content: "· "; }
.shop-checkout-lines .line-total { float: none; font-size: var(--text-sm); white-space: nowrap; }
.shop-checkout-lines li > .shop-cart-note { grid-column: 1 / -1; margin: 0; }
.shop-checkout-lines li:has(> .shop-checkout-line-thumb) > .shop-cart-note { grid-column: 2 / -1; }
.shop-checkout-totals > div, .shop-checkout-totals .shop-checkout-shipping { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; margin: 0; padding: .3125rem 0; border: 0; border-radius: 0; background: none; }
.shop-checkout-totals dt, .shop-checkout-totals .shop-checkout-shipping dt { font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--store-fg); }
.shop-checkout-totals dd, .shop-checkout-totals .shop-checkout-shipping dd { margin: 0; }
/* QA 2a R4: the summary's total area and mass are summary rows, their
   values at the Subtotal's right edge; the lines' facts (the cart's, the
   drawer's) keep their own row. */
.shop-checkout-summary > .shop-cart-measures { display: block; margin: 0 0 .5rem; font-size: var(--text-sm); }
.shop-checkout-summary > .shop-cart-measures > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; padding: .3125rem 0; border: 0; border-radius: 0; background: none; font-size: inherit; line-height: inherit; }
.shop-checkout-summary > .shop-cart-measures dt { color: var(--store-fg); }
.shop-checkout-shipping .shipping-charged { font-size: var(--text-sm); color: var(--success); }
.shop-checkout-totals .shop-checkout-stub, .shop-checkout-totals .shop-checkout-term, .shop-checkout-totals .shop-checkout-nudge-row { flex-basis: 100%; }
.shop-checkout-shipping.is-coupon { margin: .25rem 0; padding: .5rem .625rem; border: 1.5px dashed #6ee7b7; border-radius: var(--radius); background: var(--success-soft); }
.shop-checkout-totals .shop-cart-total { align-items: center; margin-top: .5rem; padding: .75rem 1rem; border: 0; border-radius: var(--radius); background: #1e293b; }
.shop-checkout-totals .shop-cart-total dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: #cbd5e1; }
.shop-checkout-totals .shop-cart-total dd { min-width: 0; text-align: right; }
.shop-checkout-totals .shop-cart-total dd strong { font-size: var(--text-2xl); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.shop-checkout-summary .delivery-term { margin: .25rem 0 0; padding: .125rem .5rem; font-size: var(--text-xs); color: var(--success); font-weight: 600; }
.shop-checkout-placement { gap: .75rem; padding: 0 1.25rem 1.25rem; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #fff; box-shadow: 0 10px 30px -12px rgb(15 23 42 / .2); }
.checkout-terms { padding: .75rem; border-radius: var(--radius); background: var(--store-soft); font-size: var(--text-xs); }
.checkout-terms input { width: 1.125rem; height: 1.125rem; margin: 0; }
.shop-checkout-dock { display: block; }
.shop-checkout-dock-total { display: none; }
.shop-checkout-place { min-height: 3.5rem; font-size: var(--text-base); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.shop-checkout-place .shop-icon { width: 1.25rem; height: 1.25rem; padding: .25rem; box-sizing: content-box; border-radius: var(--radius); background: rgb(255 255 255 / .15); }
@media (max-width: 63.99rem) {
  .shop-checkout-side { display: grid; }
  .shop-checkout-dock { position: fixed; z-index: 40; inset: auto 0 0; display: flex; align-items: center; gap: .75rem; padding: .625rem max(1rem, env(safe-area-inset-right)) calc(.625rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-top: 2px solid color-mix(in srgb, var(--store-accent) 20%, transparent); background: #fff; box-shadow: 0 -4px 20px -4px rgb(0 0 0 / .15); }
  .shop-checkout-dock-total { display: grid; flex: 1; row-gap: .125rem; min-width: 0; margin: 0; line-height: 1.2; }
  .shop-checkout-dock-total span { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--store-muted); }
  .shop-checkout-dock-total strong { font-size: var(--text-xl); font-weight: 800; color: var(--shop-total); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .shop-checkout-dock .shop-checkout-place { flex: none; width: auto; min-height: 3rem; padding: 0 1rem; font-size: var(--text-sm); }
  body.shop:has(.shop-checkout-dock) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  body.shop:has(.shop-tabbar) .shop-checkout-dock { bottom: calc(3.5rem + env(safe-area-inset-bottom)); padding-bottom: .625rem; }
  body.shop:has(.shop-tabbar):has(.shop-checkout-dock) { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 64rem) {
  .shop-checkout-grid { grid-template-columns: minmax(0, 1fr) 24rem; gap: 1.5rem; }
}

/* Checkout choices share the summary and its one placement form. */
.shop-checkout-summary .shop-checkout-section { padding: .875rem 0 .375rem; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.shop-checkout-summary fieldset.shop-checkout-section > legend { float: none; margin: 0 0 .625rem; padding-top: .875rem; }
.shop-checkout-summary fieldset.shop-checkout-section > legend::before { content: none; counter-increment: none; }
.shop-checkout-summary .payment-methods { display: block; padding-bottom: .25rem; }
/* The totals follow closely: three tiles and the promise fit one screen at 1366×650. */
.shop-checkout-summary .payment-methods .shop-checkout-option:last-of-type { margin-bottom: 0; }
.shop-checkout-summary .shop-checkout-option { flex-wrap: nowrap; padding: .625rem; }
.shop-checkout-summary .shop-checkout-option .tariff { font-size: var(--text-sm); }
.shop-checkout-summary .payment-note { margin: .25rem 0 .75rem; font-size: var(--text-xs); }
.shop-checkout-line-actions { display: grid; justify-items: end; gap: .125rem; }
.shop-checkout-lines .line-remove { width: auto; margin: 0; }
.shop-checkout-lines .line-remove button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .375rem; border-radius: var(--radius); }
.shop-checkout-lines .line-remove button:focus-visible, .cart-group-del > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-checkout-lines li { column-gap: .625rem; row-gap: .375rem; }
.shop-checkout input, .shop-checkout select, .shop-checkout textarea, .shop-checkout button { scroll-margin-block: 6rem 10rem; }
@media (max-width: 63.99rem) {
  /* As specific as the tab bar's rule (:274), and later: the dock sits above the bar. */
  html:has(body.shop .shop-checkout-dock) { scroll-padding-bottom: calc(9rem + env(safe-area-inset-bottom)); }
}

/* ---------- The order page ---------- */
.shop-order-body { max-width: none; }
.shop-order .shop-order-hero { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid #a7f3d0; border-radius: var(--radius-lg); background: var(--success-soft); text-align: left; }
.shop-order .shop-order-hero[data-order-state="due"] { border-color: #fde68a; background: var(--warning-soft); }
.shop-order .shop-order-hero[data-order-state="cancelled"], .shop-order .shop-order-hero[data-order-state="returned"] { border-color: var(--border); background: var(--store-soft); }
.shop-order .shop-order-mark { flex: none; width: 3rem; height: 3rem; margin: 0; box-shadow: none; }
.shop-order .shop-order-mark svg { width: 1.5rem; height: 1.5rem; }
.shop-order .shop-order-hero h1 { margin: 0 0 .125rem; font-size: var(--text-xl); }
.shop-order .shop-order-hero p { font-size: var(--text-sm); color: var(--store-fg); }
.shop-order .shop-order-band-title { display: none; }
.shop-order .shop-order-band { padding: 1rem 1.25rem; }
.shop-order .shop-order-band-label, .shop-order .shop-order-date { display: block; }
.shop-order .shop-order-band h2 { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.shop-order .shop-order-card { margin: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.shop-order-layout { display: grid; gap: 1rem; }
.shop-order-main, .shop-order-aside { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.shop-order .shop-order-documents { margin: 0; }
.shop-order .shop-order-panel { margin: 0; padding: 1rem 1.25rem; border-radius: var(--radius-lg); }
.shop-order .shop-order-panel h2 { margin: 0 0 .75rem; font-size: var(--text-base); }
.shop-order .shop-order-panel p { font-size: var(--text-xs); }
.shop-order-secondary .shop-icon { width: 1rem; height: 1rem; }

/* The items: the image instead of S0's number, the cut note under. */
.shop-order .shop-order-items { padding: 1rem 1.25rem; }
.shop-order .shop-order-items ol { gap: .5rem; }
.shop-order .shop-order-items li { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: .875rem; padding: .625rem .75rem; border-radius: var(--radius); background: #fff; }
.shop-order .shop-order-items li:has(> .shop-order-line-media) { grid-template-columns: 3.5rem minmax(0, 1fr); }
.shop-order .shop-order-items li::before { content: none; }
.shop-order-line-media { grid-row: span 2; display: block; width: 3.5rem; height: 3.5rem; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); }
.shop-order .shop-order-line-title { margin: 0 0 .125rem; font-size: var(--text-sm); }
.shop-order .shop-order-line-quantity { font-size: var(--text-xs); }
.shop-order .shop-order-line-total { font-size: var(--text-base); }
.shop-order .shop-order-items .shop-order-note { margin: .25rem 0 0; font-size: var(--text-2xs); }
.shop-order .shop-order-items li:has(> .shop-order-line-media) > .shop-order-note { grid-column: 2; }
.shop-order .shop-order-totals { padding: .75rem 1.25rem 1.25rem; background: #fff; }
.shop-order .shop-order-totals dl { gap: 0; }
.shop-order .shop-order-totals dl > div { padding: .3125rem 0; border: 0; border-radius: 0; background: none; }
.shop-order .shop-order-totals dt { font-size: var(--text-sm); color: var(--store-fg); }
.shop-order .shop-order-totals dd { font-size: var(--text-sm); }
.shop-order .shop-order-totals .shop-order-total { margin-top: .5rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--shop-total); }
.shop-order .shop-order-totals .shop-order-total dt { color: var(--border-strong); }
.shop-order .shop-order-totals .shop-order-total dd { font-size: var(--text-2xl); color: #fff; }

/* "Ce urmează": the order's steps from its status (v1's order.html:69 signs,
   as a list): done, current, to come. */
.shop-order-steps { list-style: none; margin: 0; padding: 0; }
.shop-order-steps li { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; padding: 0 0 .875rem; }
.shop-order-steps li:last-child { padding-bottom: 0; }
.shop-order-steps li:not(:last-child)::before { content: ""; position: absolute; top: 1.875rem; bottom: .125rem; left: calc(.875rem - 1px); width: 2px; border-radius: 1px; background: var(--border); }
.shop-order-step-mark { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 2px solid var(--border); border-radius: var(--radius-full); background: #fff; color: var(--store-muted); box-sizing: border-box; }
.shop-order-step-mark .shop-icon { width: .875rem; height: .875rem; }
.shop-order-step-text { display: grid; align-content: center; min-height: 1.75rem; font-size: var(--text-sm); color: var(--store-muted); }
.shop-order-step-text .note { font-size: var(--text-xs); }
.shop-order-steps [data-step="done"] .shop-order-step-mark { border-color: var(--success); background: var(--success); color: #fff; }
.shop-order-steps [data-step="done"]::before { background: var(--success); }
.shop-order-steps [data-step="current"] .shop-order-step-mark { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
.shop-order-steps [data-step="done"] .shop-order-step-text, .shop-order-steps [data-step="current"] .shop-order-step-text { color: var(--store-fg); }

/* The payment and the delivery, as label and value. */
.shop-order-facts dl { display: grid; gap: .875rem; margin: 0; }
.shop-order-facts dl > div { display: grid; gap: .125rem; }
.shop-order-facts dt { display: flex; align-items: center; gap: .375rem; font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--store-muted); }
.shop-order-facts dt .shop-icon { width: .875rem; height: .875rem; color: var(--store-accent); }
.shop-order-facts dd { display: grid; gap: .125rem; margin: 0; font-size: var(--text-sm); }
.shop-order-facts dd .note, .shop-order-facts address { font-size: var(--text-xs); font-style: normal; color: var(--store-muted); }
.shop-order .shop-order-continue { margin: .25rem 0 0; text-align: left; }
.shop-order .shop-order-cta { padding: .875rem 1.5rem; border-radius: var(--radius-lg); }
@media (min-width: 40rem) {
  .shop-order .shop-order-hero h1 { font-size: var(--text-2xl); }
}
@media (min-width: 48rem) {
  .shop-order .shop-order-mark { width: 3.5rem; height: 3.5rem; }
  .shop-order .shop-order-mark svg { width: 1.75rem; height: 1.75rem; }
  .shop-order .shop-order-band h2 { font-size: var(--text-3xl); }
}
@media (min-width: 64rem) {
  .shop-order-layout { grid-template-columns: minmax(0, 1fr) 22rem; grid-template-rows: auto 1fr; align-items: start; gap: 1.5rem; }
  .shop-order-aside { grid-column: 2; grid-row: 1 / span 2; }
  .shop-order-layout > .shop-order-continue { grid-column: 1; grid-row: 2; margin: 0; }
}
/* End O22 I6 */

/* P-fold (Opus, O22): the price box above the fold on a laptop. From 80rem
   (three columns) the box rises to the crumbs' line, the crumbs keeping to
   the gallery and the details; the price, its VAT and the stock share one
   line; each axis's label stands beside its chips; the length and the
   pieces share one line, the slider under them with its limits at its ends
   (the value stays in the field: the slider's duplicate tag goes). The
   server's result (area, weight, total, the cart's button) stays sticky at
   the window's bottom inside the box, a safety net for a box taller than
   the window. Then the density follows the window's real height, not the
   screen's: airy above 860px (the whole card in view at 1920×950), tighter
   to 860px (1366×768, 1440×900 with their browser bars), compact to 700px
   (1366×768 seen as 625–650). Nothing is hidden: every chip with its unit,
   the limits, the pieces, the area, the weight and the total stay; without
   JavaScript "Recalculează" sits by the limits. The phone and the two
   columns keep S5-A. */
@media (min-width: 80rem) {
  .product-crumbs { margin-right: 28rem; }
  .product-crumbs ol { min-height: 1.25rem; }
  .product-box { margin-top: -2.5rem; }

  .product-box > .product-offer { flex-wrap: nowrap; align-items: center; padding-block: .875rem; }
  .shop-page .product-offer > .product-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; }
  .shop-page .product-offer > .product-price .note { margin-top: 0; }
  .shop-page .product-offer > .product-price > .note:first-child { flex-basis: 100%; }
  .product-box > .product-offer > .product-stock { flex: none; margin: 0; }

  .product-box > .product-siblings { grid-template-columns: fit-content(8rem) minmax(0, 1fr); column-gap: .625rem; }
  .product-box .product-sibling-group { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; }
  .product-box .product-sibling-axis { min-height: 2.75rem; margin: 0; }
  /* Three thickness chips must fit beside the axis label: a wrapped row
     makes the sticky purchase form cover the last widths on short windows. */
  .product-box .product-sibling { padding-inline: .25rem; }

  .product-box .roll-form { grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; }
  .product-box .roll-length { grid-column: 1; grid-row: 1; flex-wrap: wrap; gap: .5rem; }
  .product-box .roll-pieces { grid-column: 2; grid-row: 1; flex-wrap: wrap; gap: .5rem; }
  .product-box .roll-form > :not(.roll-length, .roll-pieces) { grid-column: 1 / -1; }
  .product-box .roll-length-label { gap: .375rem; }
  .product-box .roll-length-label .product-axis-icon { width: 1.5rem; height: 1.5rem; }
  .product-box .roll-pieces-label { width: min-content; line-height: var(--leading-tight); }
  .product-box .roll-field { padding: 0 .5rem 0 .125rem; }
  .product-box .roll-length .roll-input { width: 3.5rem; }
  .product-box .roll-field-sm .roll-input { width: 3rem; }
  .product-box .roll-slider { padding-bottom: 0; }
  .product-box .roll-range-value { display: none; }
  .product-box .roll-slider:not([hidden]) + .roll-limits { margin-top: -.5rem; }
  /* Without JavaScript the slider is hidden: "Recalculează" by the limits. */
  .product-box .roll-form:not([data-roll-live]) { grid-template-columns: minmax(0, 1fr) auto; }
  .product-box .roll-form:not([data-roll-live]) > .roll-limits { grid-column: 1; grid-row: 2; align-self: center; justify-content: flex-start; }
  .product-box .roll-form:not([data-roll-live]) > .roll-hint { grid-row: 3; }
  .product-box .roll-form:not([data-roll-live]) > .roll-calculate { grid-column: 2; grid-row: 2; padding-inline: 1rem; }

  /* The result: Suprafață and Greutate with their values on one line. */
  .shop-buy .roll-quote > :is(.roll-quote-area, .roll-quote-weight) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
  .shop-buy .roll-quote :is(.roll-quote-area, .roll-quote-weight) dt { margin: 0; }
  .shop-buy .roll-quote .roll-quote-dims { flex-basis: 100%; margin-top: 0; }

  /* The safety net, for a box taller than the window (a family with many
     chips, a short window): the cart's part (the length, the result, the
     button) stays at the window's bottom while the chips go on under it,
     and the result inside it while the length does. The mini-cart's line
     under the button may stay under the fold. */
  .product-box > .shop-buy, .product-box .shop-buy > .roll-live { position: sticky; bottom: 0; z-index: 1; margin-block: -.5rem; padding-block: .5rem; background: #fff; }
  .product-box > .shop-buy { bottom: -1.5rem; container: fold-buy / scroll-state; }
  .product-box .shop-buy > .roll-live { container: fold-result / scroll-state; }
  @container fold-buy scroll-state(stuck: bottom) {
    .shop-buy > form { box-shadow: 0 -1.25rem 1rem -1rem rgb(15 23 42 / .3); }
  }
  @container fold-result scroll-state(stuck: bottom) {
    .roll-result { box-shadow: 0 -1.25rem 1rem -1rem rgb(15 23 42 / .3); }
  }
  /* A chip or the length reached with the keyboard is never under the net:
     the net steps back while the focus is above it. */
  .product-box:has(> .product-siblings :focus-visible) > .shop-buy, .product-box .shop-buy:has(> .roll-form :focus-visible) > .roll-live { position: static; }
  /* A long list of widths needs the ordinary page flow. Pinning the buy
     form or its result here would cover choices before a pointer can
     reach them; keyboard focus alone cannot restore pointer access. */
  .product-box:has(.product-sibling-links > li:nth-child(7)) > .shop-buy,
  .product-box:has(.product-sibling-links > li:nth-child(7)) > .shop-buy > .roll-live { position: static; }
}
@media (min-width: 80rem) and (max-height: 860px) {
  .product-box { gap: 1rem; }
  .product-box > .product-offer { padding: .75rem 1.25rem; }
  .shop-page .product-offer > .product-price .price { font-size: 2rem; }
  .product-box > .product-siblings { row-gap: .75rem; }
  .product-box > .shop-buy, .product-box .roll-result { gap: .75rem; }
  .product-box .roll-form { row-gap: .625rem; }
  .shop-buy .roll-quote { padding: .375rem; gap: .375rem; }
  .shop-buy .roll-quote > div { padding: .375rem .625rem; }
  .shop-buy .roll-quote > .roll-quote-total { padding: .5rem .875rem; }
  .shop-buy .roll-quote .roll-total { font-size: 1.5rem; }
  .product-box .shop-buy-submit { min-height: 3rem; }
}
@media (min-width: 80rem) and (max-height: 700px) {
  .product-box { gap: .5rem; }
  .product-box > .product-offer { padding: .375rem 1.25rem; }
  .shop-page .product-offer > .product-price .price { font-size: 1.75rem; }
  .product-box > .product-siblings { row-gap: .5rem; }
  .product-box .product-sibling-links { gap: .375rem; }
  .product-box .product-sibling { min-height: 2.5rem; }
  .product-box .product-sibling-axis { min-height: 2.5rem; }
  .product-box > .shop-buy, .product-box .roll-result { gap: .5rem; }
  .product-box .roll-form { row-gap: .5rem; }
  .product-box .roll-input { min-height: 2.5rem; }
  .shop-buy .roll-quote { padding: 0; border: 0; background: none; }
  .shop-buy .roll-quote > .roll-quote-total { padding: .375rem .75rem; }
  .shop-buy .roll-quote .roll-total { font-size: 1.375rem; }
  .product-box .shop-buy-submit { min-height: 2.75rem; }
  .product-box > .delivery-term { padding-top: .5rem; }
  .product-box > .product-secure { padding-block: .625rem; }
}

/* The persistent length adjustment needs room without pinning the purchase
   form over the width choices. Keep the ordinary card unchanged; tighten
   only the desktop card while this explanation is present. */
@media (min-width: 80rem) {
  .product-box:has([data-roll-adjusted]) { gap: .75rem; }
  .product-box:has([data-roll-adjusted]) > .product-offer { padding-block: .5rem; }
  .product-box:has([data-roll-adjusted]) > .product-siblings { row-gap: .5rem; }
  .product-box:has([data-roll-adjusted]) > .shop-buy,
  .product-box:has([data-roll-adjusted]) .roll-result { gap: .5rem; }
  .product-box:has([data-roll-adjusted]) > .shop-buy,
  .product-box:has([data-roll-adjusted]) > .shop-buy > .roll-live { position: static; margin-block: 0; padding-block: 0; }
  .product-box:has([data-roll-adjusted]) .roll-form { row-gap: .375rem; }
  .product-box .roll-message > [data-roll-adjusted] { padding: .25rem .5rem; font-size: var(--text-xs); line-height: 1.35; }
  .product-box:has([data-roll-adjusted]) .roll-quote { padding: .375rem; gap: .375rem; }
  .product-box:has([data-roll-adjusted]) .roll-quote > div { padding: .375rem .5rem; }
  .product-box:has([data-roll-adjusted]) .roll-quote > .roll-quote-total { padding: .375rem .75rem; }
}
@media (min-width: 80rem) and (max-height: 700px) {
  .product-box:has([data-roll-adjusted]) { gap: .25rem; }
  .product-box:has([data-roll-adjusted]) > .product-offer { padding-block: .25rem; }
  .product-box:has([data-roll-adjusted]) > .shop-buy,
  .product-box:has([data-roll-adjusted]) .roll-result { gap: .25rem; }
  .product-box:has([data-roll-adjusted]) .roll-form { row-gap: .125rem; }
  .product-box:has([data-roll-adjusted]) .roll-quote { padding: 0; gap: .25rem; }
  .product-box:has([data-roll-adjusted]) .roll-quote > div { padding-block: .25rem; }
  .product-box:has([data-roll-adjusted]) .roll-quote > .roll-quote-total { padding-block: .25rem; }
}

/* Mobile buy (Opus, audit lot 1): below 64rem the gallery follows the
   window's height, as the box's density does on a laptop (P-fold), so the
   title comes up under it. The buy bar (product-buy.html, epdm-shop-roll.js)
   stands over the bottom bar while the box's "Adaugă în coș" is out of view:
   the server's total and the same button. It takes the bottom bar's height
   as that bar's rules give it (3.5rem and the safe area), without changing
   them, and sits under it in the stacking, sliding out from behind it. Focus
   moved by the keyboard elsewhere sends it away, so it never covers what is
   focused (the virtual keyboard's field included); the page keeps its end
   above it. From 64rem there is no bar. */
.product-buybar { display: none; }
@media (max-width: 63.99rem) {
  .product-gallery-slides, .product-noimage { max-height: max(15rem, 40vh); max-height: max(15rem, 40svh); }

  .product-buybar:not([hidden]) { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: .75rem; box-sizing: border-box; height: calc(4.25rem + env(safe-area-inset-bottom)); padding: .5rem max(1rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-top: 1px solid var(--border); background: #fff; box-shadow: 0 -10px 20px -14px rgb(15 23 42 / .4); visibility: hidden; transform: translateY(100%); }
  body.shop:has(.shop-tabbar) .product-buybar:not([hidden]) { bottom: calc(3.5rem + env(safe-area-inset-bottom)); height: 4.25rem; padding-bottom: .5rem; }
  .product-buybar[data-buybar-shown]:not([hidden]) { visibility: visible; transform: none; }
  body:has(:focus-visible) .product-buybar[data-buybar-shown]:not([hidden], :has(:focus-visible)) { visibility: hidden; transform: translateY(100%); }
  body.shop:has(.shop-tabbar):has(.product-buybar:not([hidden])) { padding-bottom: calc(7.75rem + env(safe-area-inset-bottom)); }

  .product-buybar-sum { display: grid; flex: 1 1 auto; min-width: 0; color: var(--store-fg); line-height: 1.2; text-decoration: none; }
  .product-buybar-sum:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
  .product-buybar-label { font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--store-muted); }
  .product-buybar-total { justify-self: start; display: inline-flex; align-items: baseline; gap: .25rem; border-radius: var(--radius-sm); font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .product-buybar-symbol { font-size: var(--text-xs); font-weight: 600; color: var(--store-muted); }
  .product-buybar-detail { overflow: hidden; font-size: var(--text-2xs); color: var(--store-muted); text-overflow: ellipsis; white-space: nowrap; }
  .product-buybar-detail > [data-buybar-detail]:not(:empty)::after { content: " ·"; }
  .product-buybar-edit { font-weight: 600; color: var(--store-accent); text-decoration: underline; text-underline-offset: 2px; }
  .product-buybar-submit { flex: none; min-height: 3rem; padding-inline: 1rem; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
  /* While the box's quotation is old, the bar's waits with it: no old
     amount for new dimensions. */
  .shop-buy:has([data-roll-stale]) .product-buybar-total { background: var(--border); }
  .shop-buy:has([data-roll-stale]) .product-buybar-total > *, .shop-buy:has([data-roll-stale]) [data-buybar-detail] { visibility: hidden; }
}
@media (max-width: 63.99rem) and (max-width: 23.99rem) {
  .product-buybar-submit .shop-icon { display: none; }
}
@media (max-width: 63.99rem) and (prefers-reduced-motion: no-preference) {
  .product-buybar:not([hidden]) { transition: transform .2s ease-out, visibility 0s linear .2s; }
  .product-buybar[data-buybar-shown]:not([hidden]) { transition: transform .2s ease-out, visibility 0s; }
  .shop-buy:has([data-roll-stale]) .product-buybar-total { animation: roll-wait .8s ease-in-out infinite alternate; }
}
/* Without JavaScript (lot nojs-buy-fold), the same bar by this query alone:
   a browser that runs scripts, or does not know the query, sees none of it.
   Nothing here can tell where the box's button is, so the bar stays, over the
   box too; keyboard focus elsewhere still sends it away, and so does a length
   or a number of pieces the shopper changed, until "Recalculează" brings their
   amount: no old amount for new dimensions. Its button is the box's form's
   own submit; the script's has no one to press it. A roll without a quotation
   has no such button and no bar, as with the script. */
.product-buybar-post { display: none; }
@media (scripting: none) and (max-width: 63.99rem) {
  .product-buybar[hidden]:has(.product-buybar-post) { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: .75rem; box-sizing: border-box; height: calc(4.25rem + env(safe-area-inset-bottom)); padding: .5rem max(1rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-top: 1px solid var(--border); background: #fff; box-shadow: 0 -10px 20px -14px rgb(15 23 42 / .4); }
  body.shop:has(.shop-tabbar) .product-buybar[hidden] { bottom: calc(3.5rem + env(safe-area-inset-bottom)); height: 4.25rem; padding-bottom: .5rem; }
  body:has(:focus-visible) .product-buybar[hidden]:not(:has(:focus-visible)) { visibility: hidden; }
  .shop-buy:has(#roll-length:user-valid, #roll-length:user-invalid, #roll-pieces:user-valid, #roll-pieces:user-invalid) .product-buybar[hidden] { display: none; }
  body.shop:has(.shop-tabbar):has(.product-buybar-post) { padding-bottom: calc(7.75rem + env(safe-area-inset-bottom)); }
  .product-buybar [data-buybar-submit] { display: none; }
  .product-buybar .product-buybar-post { display: inline-flex; }
}

/* Native absolute-quantity buttons and the existing editor share one grid cell. */
.shop-cart-line .shop-cart-quantity { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; }
.shop-cart-line .shop-cart-quantity > .line-set { width: 100%; margin: 0; padding: 0; border: 0; }

/* Contact: public typed data, an optional form, and locally scoped feedback. */
.shop-contact { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border, var(--line, #dfe3e8)); display: grid; gap: 1.5rem; min-width: 0; }
.shop-contact .shop-contact-details, .shop-contact .shop-contact-card { min-width: 0; }
.shop-contact .shop-contact-details h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.shop-contact .shop-contact-details p { margin: .5rem 0; overflow-wrap: anywhere; }
.shop-contact .shop-contact-details .company { font-weight: 700; }
.shop-contact .shop-contact-details a { display: inline-block; max-width: 100%; padding: .5rem 0; overflow-wrap: anywhere; }
.shop-contact .shop-contact-card { background: #fff; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--border, var(--line, #dfe3e8)); border-radius: var(--radius-xl, .75rem); box-shadow: var(--shadow-card, 0 2px 8px #1e293b0a); }
.shop-contact .shop-contact-card h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.shop-contact .shop-contact-help { margin: 0 0 1.25rem; color: var(--store-muted, var(--muted, #475569)); font-size: .9rem; }
.shop-contact .shop-contact-field { margin: 0 0 1rem; }
.shop-contact .shop-contact-field > label:not(.shop-contact-check) { display: block; margin-bottom: .375rem; font-weight: 600; }
.shop-contact .shop-contact-field > input, .shop-contact .shop-contact-field > textarea { display: block; width: 100%; min-width: 0; min-height: 3rem; padding: .75rem; border: 1px solid #64748b; border-radius: var(--radius, .375rem); font: inherit; font-size: 1rem; color: var(--store-fg, var(--ink, #1e293b)); background: #fff; }
.shop-contact .shop-contact-field > textarea { resize: vertical; }
.shop-contact .shop-contact-check { display: flex; align-items: flex-start; gap: .75rem; min-height: 2.75rem; padding: .625rem 0; margin: .25rem 0; cursor: pointer; }
.shop-contact .shop-contact-check input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--store-accent, var(--accent, #1f5f8b)); }
.shop-contact .shop-contact-check span { min-width: 0; overflow-wrap: anywhere; }
.shop-contact button[type="submit"] { min-height: 3rem; padding: .75rem 1.5rem; border: 0; border-radius: var(--radius-lg, .5rem); font: inherit; font-weight: 600; color: #fff; background: var(--store-accent, var(--accent, #1f5f8b)); cursor: pointer; }
.shop-contact button[type="submit"]:disabled { opacity: .65; cursor: wait; }
.shop-contact :is(input, textarea, button, a, [tabindex]):focus-visible { outline: 3px solid var(--store-accent, var(--accent, #1f5f8b)); outline-offset: 3px; }
.shop-contact .shop-contact-errors:focus, .shop-contact .shop-contact-status:focus { outline: 3px solid var(--store-accent, var(--accent, #1f5f8b)); outline-offset: 3px; }
.shop-contact .shop-contact-error { margin: .375rem 0 0; color: #9f1239; font-size: .9rem; }
.shop-contact .shop-contact-error:empty { display: none; }
.shop-contact [aria-invalid="true"] { border-color: #9f1239; }
.shop-contact .shop-contact-errors { margin: 1rem 0; padding: 1rem; border: 1px solid #9f1239; border-radius: .5rem; background: #fff1f2; color: #881337; overflow-wrap: anywhere; }
.shop-contact .shop-contact-errors h4 { margin: 0; font-size: 1rem; }
.shop-contact .shop-contact-errors ul { margin: .5rem 0 0; padding-left: 1.25rem; }
/* A block, so that a message on two lines keeps its bullet on its first. */
.shop-contact .shop-contact-errors a { display: block; padding: .5rem 0; color: #881337; }
.shop-contact .shop-contact-status { margin: 1rem 0; padding: 1rem; border: 1px solid #15803d; border-radius: .5rem; color: #166534; background: #f0fdf4; overflow-wrap: anywhere; }
@media (min-width: 50rem) { .shop-contact:has(.shop-contact-card) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; } }
/* After a submission (QA of Train 2a), what the visitor must read stops
   below the sticky header (from 64rem, 4.5rem and its border) with the
   other targets' 1.5rem to spare: the redirect's #contact-status (the
   summary's or the confirmation's margin collapses through it, so its box
   is theirs), the script's focus on either, and the field a summary link
   leads to, a text field with its label above it. Per target, as the
   others (.shop-section, .shop-account #account-profile, .shop-checkout
   input): a scroll-padding on html would add to theirs. */
@media (min-width: 64rem) {
  .shop-contact :is(#contact-status, #contact-errors, #contact-result, #contact-informed) { scroll-margin-top: 6rem; }
  .shop-contact #contact-form :is(input:not([type="checkbox"]), textarea) { scroll-margin-top: 8rem; }
}

/* M8: retained order details; long snapshot text also fits a phone. */
.shop-order-details { display: grid; gap: 1rem; min-width: 0; }
.shop-order-details > section { min-width: 0; }
.shop-order-details dl { display: grid; gap: .625rem; margin: 0; }
.shop-order-details dl > div { min-width: 0; }
.shop-order-details dt { font-size: var(--text-2xs); color: var(--store-muted); }
.shop-order-details dd { margin: .125rem 0 0; font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 48rem) {
  .shop-order-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-order-details .shop-order-details-wide { grid-column: 1 / -1; }
}

/* M9: retained seller instructions, selectable with or without JavaScript. */
.shop-order-transfer { min-width: 0; padding: 1.25rem; margin-block: 1.5rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; color: var(--store-fg); }
.shop-order-transfer h2 { margin: 0; font-size: var(--text-lg); }
.shop-order-transfer p { margin: .5rem 0 0; }
.shop-order-transfer .shop-order-transfer-heading { display: flex; align-items: flex-start; gap: .75rem; }
.shop-order-transfer .shop-order-transfer-heading > span { color: var(--store-accent); }
.shop-order-transfer .shop-order-transfer-heading svg { width: 1.5rem; height: 1.5rem; }
.shop-order-transfer dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 1.25rem 0 0; }
.shop-order-transfer dl > div { min-width: 0; }
.shop-order-transfer dt { color: var(--store-muted); font-size: var(--text-xs); }
.shop-order-transfer dd { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.shop-order-transfer .shop-order-transfer-copy-row { grid-column: 1 / -1; }
.shop-order-transfer .shop-order-transfer-copy-row dd { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.shop-order-transfer .shop-order-transfer-value { min-width: 0; font-family: ui-monospace, monospace; user-select: text; overflow-wrap: anywhere; }
.shop-order-transfer button { min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid currentColor; border-radius: .375rem; background: transparent; color: var(--store-accent); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.shop-order-transfer button[hidden], .shop-order-transfer [hidden] { display: none; }
.shop-order-transfer button:focus-visible, .shop-order-transfer a:focus-visible { outline: 2px solid var(--store-accent); outline-offset: 3px; }
.shop-order-transfer .shop-order-transfer-note, .shop-order-transfer .shop-order-transfer-feedback { color: var(--store-muted); font-size: var(--text-xs); }
.shop-order-transfer .shop-order-transfer-next { padding-top: 1rem; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.shop-order-transfer .shop-order-transfer-contacts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .75rem; overflow-wrap: anywhere; }
.shop-order-transfer .shop-order-transfer-contacts a { display: inline-flex; align-items: center; min-height: 2.75rem; max-width: 100%; color: var(--store-accent); }
@media (max-width: 32rem) {
  .shop-order-transfer { padding: 1rem; }
  .shop-order-transfer dl { grid-template-columns: minmax(0, 1fr); }
}

/* M11: confirmed returned money and distinct preserved storno documents. */
.shop-order-refund{padding:1.25rem 1.5rem;margin:1.5rem 0;border:1px solid var(--store-accent);border-inline-start:4px solid var(--store-accent);border-radius:.75rem;background:var(--field);overflow-wrap:anywhere}
.shop-order-refund h2{margin:0;font-size:1.125rem;line-height:1.5}
.shop-order-refund strong{font-variant-numeric:tabular-nums}
.shop-order-refund p{margin:.5rem 0 0;color:var(--store-muted);font-size:.875rem;line-height:1.6}
.shop-order-stornos{padding:1.5rem;margin:1.5rem 0;border:1px solid var(--border);border-radius:.75rem;background:var(--field);overflow-wrap:anywhere}
.shop-order-stornos h2{margin:0;font-size:1.125rem}
.shop-order-stornos-note{margin:.5rem 0 1rem;color:var(--store-muted);font-size:.875rem;line-height:1.6}
.shop-order-stornos ul{list-style:none;margin:0;padding:0}
.shop-order-stornos li{padding:1rem 0;border-top:1px solid var(--border)}
.shop-order-stornos li:last-child{padding-bottom:0}
.shop-order-stornos h3{margin:0 0 .75rem;font-size:1rem;line-height:1.5}
.shop-order-stornos dl{margin:0 0 .75rem}
.shop-order-stornos dl>div{display:flex;justify-content:space-between;gap:1rem;margin:.4rem 0;font-size:.875rem}
.shop-order-stornos dt{color:var(--store-muted)}
.shop-order-stornos dd{margin:0;text-align:end;font-variant-numeric:tabular-nums}
.shop-order-stornos-download{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:.65rem .9rem;border:1px solid currentColor;border-radius:.5rem;color:var(--store-accent);font-size:.875rem;font-weight:600;text-decoration:none;line-height:1.5}
.shop-order-stornos-download:hover{text-decoration:underline}
.shop-order-stornos-download:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.shop-order-stornos-unavailable{margin:.5rem 0 0;color:var(--store-muted);font-size:.875rem;line-height:1.6}
@media(max-width:600px){.shop-order-refund,.shop-order-stornos{padding:1rem}.shop-order-stornos dl>div{flex-wrap:wrap;gap:.25rem .75rem}.shop-order-stornos dd{max-width:100%}}

/* M3: retained line values, with room for exact historical decimals. */
.shop-order-line-details { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; min-width: 0; margin: .625rem 0 0; padding-top: .625rem; border-top: 1px solid var(--border); color: var(--store-muted); font-size: var(--text-2xs); }
.shop-order-line-details > div { min-width: 0; }
.shop-order-line-details dt { font-size: var(--text-2xs); color: var(--store-muted); }
.shop-order-line-details dd { margin: .125rem 0 0; color: var(--store-fg); font-size: var(--text-xs); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .shop-order-line-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* REF-1: the commercial facts are independent of operational progress. */
.shop-order-commercial { margin-block: 1.5rem; padding: 1.25rem; border: 1px solid #cbd5e1; border-radius: .75rem; background: #fff; color: #172b3a; min-width: 0; overflow-wrap: anywhere; }
.shop-order-commercial h2, .shop-order-commercial h3 { margin-block: 0 1rem; color: inherit; }
.shop-order-commercial dl { display: grid; gap: .75rem; margin-block: 1rem; }
.shop-order-commercial dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.shop-order-commercial dt { font-weight: 600; }
.shop-order-commercial dd { margin: 0; font-variant-numeric: tabular-nums; }
.shop-order-commercial ul { padding-inline-start: 1.25rem; }
.shop-order-commercial li { margin-block: .75rem; }
.shop-order-commercial a { color: #07527a; text-decoration: underline; text-underline-offset: .2em; }
.shop-order-commercial button { display: inline-block; min-height: 44px; padding: .65rem 1rem; border: 0; border-radius: .4rem; background: #07527a; color: #fff; font: inherit; cursor: pointer; }
.shop-order-commercial button:disabled { opacity: .6; cursor: wait; }
.shop-order-commercial a:focus-visible, .shop-order-commercial button:focus-visible { outline: 3px solid #c56a08; outline-offset: 3px; }


/* The shared cart (plan: storefront-shared-cart-redesign): the sender's link panel, or a recipient's summary with the action first on
   a phone and beside the lines on a desktop; one compact row of facts per
   line. Only .shop-shared-* rules: the cart page's .shop-cart-* stay as they are. */
.shop-shared-head h1 { margin: .25rem 0 .375rem; }
.shop-shared-head p { margin: 0 0 1.25rem; max-width: 46rem; color: var(--store-muted); }
.shop-shared-send { max-width: 46rem; margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-sm); }
.shop-shared-send > label { display: block; margin: 0 0 .5rem; font-size: var(--text-sm); font-weight: 600; }
.shop-shared-link { display: flex; flex-wrap: wrap; gap: .5rem; }
.shop-shared-link .shop-input { flex: 1 1 18rem; font-size: var(--text-sm); text-overflow: ellipsis; }
.shop-shared-link .shop-button { flex: 0 0 auto; }
.shop-shared-send [hidden] { display: none; }
.shop-shared-link [data-copy-shared] svg { display: none; }
.shop-shared-link [data-copy-shared][data-copied] svg { display: block; }
.shop-shared-status { min-height: 1.25rem; margin: .375rem 0 0; font-size: var(--text-xs); font-weight: 600; color: var(--success); }
.shop-shared-ways { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.shop-shared-back { margin: .75rem 0 0; font-size: var(--text-sm); }
.shop-shared-back a { color: var(--store-accent); text-underline-offset: 2px; }
.shop-shared-layout { display: grid; gap: 1.25rem; }
.shop-shared-summary { align-self: start; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; box-shadow: 0 10px 30px -12px rgb(15 23 42 / .2); }
.shop-shared-summary dl { margin: 0; }
.shop-shared-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.shop-shared-total dt { font-weight: 600; }
.shop-shared-total dt .note { display: block; font-size: var(--text-2xs); font-weight: 500; color: var(--store-muted); }
.shop-shared-total dd { margin: 0; font-size: var(--text-2xl); font-weight: 800; color: var(--shop-total); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-shared-facts { margin: .25rem 0 1rem; font-size: var(--text-xs); color: var(--store-muted); }
.shop-shared-take { width: 100%; }
.shop-shared-own { margin: 0 0 .875rem; padding: .75rem .875rem; border: 1.5px solid #f59e0b; border-radius: var(--radius-lg); background: var(--warning-soft); color: #78350f; font-size: var(--text-sm); }
.shop-shared-choices { display: grid; gap: .75rem; }
.shop-shared-choices form { margin: 0; }
.shop-shared-choice { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: 0 1rem; border: 2px solid var(--store-accent); border-radius: var(--radius-lg); background: #fff; color: var(--store-accent); font: inherit; font-size: var(--text-base); font-weight: 700; cursor: pointer; }
.shop-shared-choice:hover { background: color-mix(in srgb, var(--store-accent) 6%, #fff); }
.shop-shared-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-shared-choices p { margin: .375rem 0 0; font-size: var(--text-xs); color: var(--store-fg); }
.shop-shared-alert { margin: 0 0 .75rem; padding: .75rem .875rem; border: 1px solid var(--danger-line); border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--danger-ink); font-size: var(--text-sm); }
.shop-shared-contents > summary { padding: .25rem 0 .75rem; font-weight: 700; cursor: pointer; }
.shop-shared-contents > summary span { margin-left: .375rem; font-weight: 500; color: var(--store-muted); }
.shop-shared-contents > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.shop-shared-lines { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; overflow: hidden; }
.shop-shared-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: start; padding: .875rem 1rem; }
.shop-shared-line + .shop-shared-line { border-top: 1px solid var(--border); }
.shop-shared-line-media img { display: block; width: 4rem; height: 4rem; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.shop-shared-line-body { min-width: 0; }
.shop-shared-line:not(:has(.shop-shared-line-media)) .shop-shared-line-body { grid-column: 1 / 3; }
.shop-shared-line-title { margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.shop-shared-line-title a { color: var(--store-fg); text-decoration: none; }
.shop-shared-line-title a:hover { color: var(--store-accent); text-decoration: underline; }
.shop-shared-line-facts { display: flex; flex-wrap: wrap; gap: 0 .25rem; margin: .25rem 0 0; font-size: var(--text-xs); color: var(--store-muted); font-variant-numeric: tabular-nums; }
.shop-shared-line-facts div { display: inline-flex; gap: .25rem; }
.shop-shared-line-facts div + div::before { content: "·" / ""; }
.shop-shared-line-facts dd { margin: 0; }
.shop-shared-line .shop-cart-note { margin: .25rem 0 0; padding: .1875rem .5rem; font-size: var(--text-xs); line-height: 1.35; }
.shop-shared-line .shop-cart-note p { margin: 0; }
.shop-shared-line-price { display: grid; justify-items: end; gap: .125rem; margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-shared-line-price strong { font-size: var(--text-base); }
.shop-shared-line-price span { font-size: var(--text-xs); color: var(--store-muted); }
@media (max-width: 29.99rem) {
  .shop-shared-link .shop-button { flex: 1 1 100%; }
  .shop-shared-line { grid-template-columns: auto minmax(0, 1fr); }
  .shop-shared-line-price { grid-column: 2; justify-items: start; text-align: left; }
  /* Without an image the price starts where the title starts (QA Tren 1, Q5). */
  .shop-shared-line:not(:has(.shop-shared-line-media)) .shop-shared-line-price { grid-column: 1 / -1; }
}
/* A finger's targets below 64rem are at least 44 px (QA Tren 1, Q4); the
   line's title stays a link inside text. The link back keeps its text where
   the paragraph's margin put it. */
@media (max-width: 63.99rem) {
  .shop-shared-contents > summary { min-height: 2.75rem; }
  .shop-shared-ways .shop-button-sm { min-height: 2.75rem; }
  .shop-shared-back { margin-top: 0; }
  .shop-shared-back a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
@media (min-width: 64rem) {
  .shop-shared-layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; }
  .shop-shared-summary { grid-column: 2; grid-row: 1; position: sticky; top: 6rem; }
  .shop-shared-contents { grid-column: 1; grid-row: 1; }
  [data-shared-view="sender"] .shop-shared-layout { grid-template-columns: minmax(0, 46rem); }
}
/* A short desktop window (1366×768 gives ~650 px) keeps the whole choice,
   with its sentences, above the fold. */
@media (min-width: 64rem) and (max-height: 760px) {
  .shop-shared-head h1 { margin-top: 0; }
  .shop-shared-head p { margin-bottom: .75rem; }
  .shop-shared-summary { top: 5rem; padding: 1rem; }
  .shop-shared-facts { margin-bottom: .625rem; }
  .shop-shared-own, .shop-shared-alert { margin-bottom: .5rem; padding: .5rem .75rem; }
  .shop-shared-choices { gap: .5rem; }
  .shop-shared-choice { min-height: 2.75rem; }
  .shop-shared-choices p { margin-top: .25rem; }
}

/* it3 B — the cart page has one compact line: picture,
   title, total, price per unit and the essential dimensions, then − value +
   in one row with the removal; the code and the masses are details on
   request. Only main.shop-cart lines ([data-line]); the drawer has its own, the
   shared cart, the checkout's lines and summary keep their rules. */
main.shop-cart .shop-cart-lines { gap: .5rem; }
main.shop-cart .shop-cart-line[data-line] { position: relative; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title total" "meta meta" "more more" "note note" "set set"; column-gap: .75rem; row-gap: .25rem; padding: .75rem .875rem; }
main.shop-cart .shop-cart-line[data-line]:has(> .shop-cart-line-media) { grid-template-columns: 3.5rem minmax(0, 1fr) auto; grid-template-areas: "media title total" "media meta meta" "media more more" "note note note" "set set set"; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-line-media { align-self: start; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-line-title { font-size: var(--text-sm); line-height: 1.35; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-line-total { font-size: var(--text-base); line-height: 1.35; }
/* Price per unit, q × price on uncut lines, width, area, pickup: one wrapping row. */
main.shop-cart .shop-cart-line-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .375rem; min-width: 0; color: var(--store-muted); font-size: var(--text-xs); line-height: 1.5; font-variant-numeric: tabular-nums; }
main.shop-cart .shop-cart-line-meta .shop-cart-unit-price { margin: 0; font-size: inherit; color: inherit; }
main.shop-cart .shop-cart-line-meta .shop-cart-measures { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .375rem; margin: 0; font-size: inherit; }
main.shop-cart .shop-cart-line-meta .shop-cart-measures div { gap: .25rem; padding: 0; border-radius: 0; background: none; font-size: inherit; line-height: inherit; }
main.shop-cart .shop-cart-line-meta .shop-cart-measures dd { font-weight: 600; color: var(--store-fg); }
main.shop-cart .shop-cart-line-meta:has(> .shop-cart-unit-price) .shop-cart-measures > div:not(.line-fact-pickup)::before { content: "·" / ""; margin-right: .125rem; color: var(--store-muted); }
main.shop-cart .shop-cart-line-meta :is(.line-fact-area, .line-fact-pickup) dt,
main.shop-cart .shop-cart-line:has(.shop-cart-line-actions) .line-fact-edited { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main.shop-cart .shop-cart-line-meta .line-fact-pickup dd { padding: 0 .375rem; border: 1px solid #fde68a; border-radius: var(--radius-sm); background: var(--warning-soft); color: #92400e; font-size: var(--text-2xs); font-weight: 600; }
/* Technical details, closed until asked for. */
main.shop-cart .shop-cart-line-details { grid-area: more; min-width: 0; color: var(--store-muted); font-size: var(--text-xs); }
main.shop-cart .shop-cart-line-details > summary { display: inline-flex; align-items: center; gap: .25rem; min-height: 1.5rem; color: var(--store-accent); font-weight: 600; list-style: none; cursor: pointer; }
main.shop-cart .shop-cart-line-details > summary::-webkit-details-marker { display: none; }
main.shop-cart .shop-cart-line-details > summary::before { content: "\25B8" / ""; display: inline-block; transition: transform .15s; }
main.shop-cart .shop-cart-line-details[open] > summary::before { transform: rotate(90deg); }
main.shop-cart .shop-cart-line-details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
main.shop-cart .shop-cart-line-details .shop-cart-line-sku { margin: .125rem 0 0; font-size: inherit; }
main.shop-cart .shop-cart-line-specs { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: .125rem 0 0; }
main.shop-cart .shop-cart-line-specs div { display: flex; gap: .25rem; }
main.shop-cart .shop-cart-line-specs dd { margin: 0; font-weight: 600; color: var(--store-fg); font-variant-numeric: tabular-nums; }
/* Notes: information neutral, stock and availability in their own colours. */
main.shop-cart .shop-cart-line[data-line] > .shop-cart-note { grid-area: note; margin: .25rem 0 0; padding: .375rem .625rem; border-color: var(--border); background: var(--store-soft); color: var(--store-fg); font-weight: 400; }
main.shop-cart .shop-cart-line[data-line] > .shop-cart-note p { margin: 0; }
main.shop-cart .shop-cart-line[data-line] > .shop-cart-note p + p { margin-top: .125rem; }
main.shop-cart .shop-cart-line[data-line] > .shop-cart-note :is(.line-unavailable, .line-changed) { color: var(--danger-ink); font-weight: 600; }
main.shop-cart .shop-cart-line[data-line] > .shop-cart-note .line-short { color: #92400e; font-weight: 600; }
/* One wrapping row: [− value +], the cut's pieces and update, the removal at
   its end; the forms and their wrapper only lay out their controls. */
main.shop-cart .shop-cart-line[data-line] .shop-cart-line-actions { grid-area: set; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .375rem 0; min-width: 0; margin: .25rem 0 0; padding: 0; border: 0; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity { display: contents; }
main.shop-cart .shop-cart-quantity > form, main.shop-cart .shop-cart-quantity .shop-order-field { display: contents; }
main.shop-cart .shop-cart-quantity-name { order: 0; margin-right: .5rem; color: var(--store-muted); font-size: var(--text-xs); font-weight: 600; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity :is([data-cart-decrease], [data-cart-increase]) button { order: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border: 1px solid var(--control-border); border-radius: var(--radius-control) 0 0 var(--radius-control); background: #fff; color: var(--store-fg); font-size: 1.125rem; font-weight: 600; line-height: 1; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity [data-cart-increase] button { order: 3; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity :is([data-cart-decrease], [data-cart-increase]) button:hover:not(:disabled) { background: var(--accent-soft); color: var(--store-accent); }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity :is([data-cart-decrease], [data-cart-increase]) button:disabled { color: var(--store-muted); opacity: .5; cursor: not-allowed; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity-value { order: 2; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; height: 2.75rem; padding: 0 .5rem 0 .25rem; border: 1px solid var(--control-border); border-inline: 0; background: var(--field); color: var(--store-muted); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; cursor: text; }
main.shop-cart .shop-cart-quantity:not(:has([data-cart-decrease])) .shop-cart-quantity-value { border-inline: 1px solid var(--control-border); border-radius: var(--radius-control); }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity-value input { width: 2.5rem; min-height: 0; height: 2.5rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--store-fg); text-align: right; font-size: var(--text-base); font-weight: 700; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity-value input:focus-visible { outline: none; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity-value:focus-within { position: relative; z-index: 1; outline: 2px solid var(--focus); outline-offset: -1px; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity-pieces { order: 4; display: inline-flex; align-items: center; gap: .375rem; margin: 0 .5rem 0 .75rem; color: var(--store-muted); font-size: var(--text-xs); font-weight: 600; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity-pieces input { width: 3.5rem; min-height: 2.75rem; padding: 0 .375rem; text-align: center; font-size: var(--text-base); }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity form.line-set > button[type=submit] { order: 5; min-height: 2.75rem; padding: 0 .625rem; border: 1px solid color-mix(in srgb, var(--store-accent) 30%, transparent); border-radius: var(--radius-control); background: #fff; color: var(--store-accent); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity form.line-set > button[type=submit]:hover { background: var(--accent-soft); }
/* With JavaScript, an uncut line's update stays the form's submitter (Enter),
   focusable and shown while its value has focus or was typed. */
main.shop-cart .shop-cart-line[data-line] .shop-cart-quantity form.line-set[data-cart-quick]:not(:focus-within):not([data-dirty]) > button[type=submit] { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
main.shop-cart .shop-cart-line[data-line] .line-remove { order: 6; margin: 0 0 0 auto; padding-left: .375rem; }
main.shop-cart .shop-cart-line[data-line] .line-remove button { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .625rem; border: 1px solid var(--border); border-radius: var(--radius-control); background: #fff; color: var(--store-muted); font-size: var(--text-xs); font-weight: 600; text-decoration: none; }
main.shop-cart .shop-cart-line[data-line] .line-remove button:hover { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); }
main.shop-cart .shop-cart-line[data-line] :is(button, input, a):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 48rem) {
  main.shop-cart .shop-cart-line[data-line] { padding: .875rem 1.125rem; column-gap: 1rem; }
  main.shop-cart .shop-cart-line[data-line]:has(> .shop-cart-line-media) { grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: "media title total" "media meta meta" "media more more" "media set set" "media note note"; }
  main.shop-cart .shop-cart-line[data-line] .shop-cart-line-title { font-size: var(--text-base); }
  main.shop-cart .shop-cart-line[data-line] .shop-cart-line-total { font-size: var(--text-lg); }
}

/* it3 A (Opus, 03.11): the checkout's summary and placement.
   The line: its title, the amount × the unit price and its total; the code
   and the facts in one quiet row (labels kept for assistive technology, an
   unknown fact keeps its label); one named remove control, no underline,
   44 px, beside the total. Costs read as ordinary text; green stays for a
   gratuity or a coupon. Desktop: the side column stays in view and scrolls
   on its own when taller than the window; the placement (terms, status,
   total, Place) stays at its bottom, so the total and Place are in view
   whichever section of the form is. The visible total there is the copy the
   phone's bar already uses (aria-hidden); the summary's total row stays for
   assistive technology. The phone keeps its bar. One form, one Place, the
   DOM order (and so the Tab order) unchanged. */
.shop-checkout-lines li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title total" "amount remove" "facts remove"; column-gap: .75rem; row-gap: .125rem; align-items: start; }
.shop-checkout-lines li:has(> .shop-checkout-line-thumb) { grid-template-columns: 2.75rem minmax(0, 1fr) auto; grid-template-areas: "media title total" "media amount remove" "media facts remove"; }
.shop-checkout-lines :is(.shop-checkout-line-text, .shop-checkout-line-actions) { display: contents; }
.shop-checkout-lines .shop-checkout-line-thumb { grid-area: media; }
.shop-checkout-lines .shop-checkout-line-title { grid-area: title; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.shop-checkout-lines .shop-checkout-line-amount { grid-area: amount; min-width: 0; font-size: var(--text-xs); line-height: 1.4; color: var(--store-muted); font-variant-numeric: tabular-nums; }
.shop-checkout-lines .shop-checkout-line-text .shop-checkout-line-amount .note { font-size: inherit; color: inherit; }
.shop-checkout-lines .shop-checkout-line-text .note::before { content: none; }
.shop-checkout-lines .shop-checkout-line-facts { grid-area: facts; min-width: 0; margin: 0; font-size: var(--text-2xs); line-height: 1.4; color: var(--store-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.shop-checkout-lines .shop-checkout-line-facts .line-sku { font-size: inherit; }
.shop-checkout-lines .line-total { grid-area: total; justify-self: end; line-height: 1.35; }
.shop-checkout-lines .line-remove { grid-area: remove; justify-self: end; align-self: start; }
.shop-checkout-lines .line-remove button { gap: .25rem; min-width: 2.75rem; min-height: 2.75rem; margin-right: -.5rem; padding: 0 .5rem; border: 0; border-radius: var(--radius); background: none; color: var(--store-muted); font: inherit; font-size: var(--text-xs); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; }
.shop-checkout-lines .line-remove .shop-icon { flex: none; width: 1rem; height: 1rem; }

.shop-checkout-summary .shop-checkout-shipping .shipping-charged, .shop-checkout-choice .note { color: var(--store-fg); }
.shop-checkout-summary .shop-checkout-shipping.is-coupon .shipping-charged { color: var(--success); }

.shop-checkout-placement #checkout-quote-status:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0; font-size: var(--text-xs); }
.shop-checkout-placement #checkout-place-failed { margin: 0; }

/* The account's address book, in the side column: no step number (the form
   counts its own sections), one check per row, its own card. */
.shop-checkout-side > fieldset.shop-checkout-section { padding: .875rem 1.25rem 1rem; }
.shop-checkout-side > .shop-checkout-summary + fieldset.shop-checkout-section { margin-top: .75rem; }
.shop-checkout-side > fieldset.shop-checkout-section > legend { float: none; margin: 0 0 .25rem; font-size: var(--text-sm); }
.shop-checkout-side > fieldset.shop-checkout-section > legend::before { content: none; counter-increment: none; }
.shop-checkout-side > fieldset.shop-checkout-section > .note { margin: 0 0 .25rem; font-size: var(--text-xs); }
.shop-checkout-side > fieldset.shop-checkout-section .shop-checkout-check { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: var(--text-sm); cursor: pointer; }
.shop-checkout-side > fieldset.shop-checkout-section .shop-checkout-check input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--store-accent); }
.shop-checkout-side > fieldset.shop-checkout-section .shop-checkout-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.shop-checkout-side > fieldset.shop-checkout-section .shop-checkout-field { margin: 0 0 .25rem; }
.shop-checkout-side > fieldset.shop-checkout-section + .shop-checkout-placement { margin-top: .75rem; padding-top: 1rem; border-top: 1px solid var(--border); border-radius: var(--radius-lg); }

@media (min-width: 64rem) {
  .shop-checkout-grid { align-items: stretch; }
  .shop-checkout-grid > .shop-checkout-main { align-self: start; }
  .shop-checkout-side { position: static; display: flex; flex-direction: column; gap: .75rem; }
  .shop-checkout-side > * { align-self: stretch; margin-block: 0; }
  .shop-checkout-side > .shop-checkout-summary:has(+ .shop-checkout-placement) { border-bottom: 1px solid var(--border); border-radius: var(--radius-lg); }
  .shop-checkout-side > .shop-checkout-placement { position: sticky; bottom: 1rem; z-index: 2; gap: .625rem; margin-top: auto; padding: .875rem 1.25rem 1rem; border-top: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 -.75rem 1.5rem -1.25rem rgb(15 23 42 / .45), 0 10px 30px -12px rgb(15 23 42 / .2); }
  /* What passes under the pinned placement fades out instead of being cut by
     its edge: decoration only, no height and no click. The page's own colour,
     so nothing shows where the card stands clear of the summary. */
  .shop-checkout-side > .shop-checkout-placement::before { content: ""; position: absolute; inset: auto 1px 100%; height: 1rem; background: linear-gradient(to bottom, transparent, var(--store-bg)); pointer-events: none; }
  .shop-checkout-side > fieldset.shop-checkout-section + .shop-checkout-placement { margin-top: auto; }
  /* Focus reaching a control of the side column scrolls it clear of the pinned placement:
     terms, the dark total, Place and a trust row on two lines (checkout cohesion C). */
  .shop-checkout-side > :not(.shop-checkout-placement) :is(a, input, select, textarea, button, summary) { scroll-margin-block: 6rem 18rem; }
  .shop-checkout-side:has(> .shop-checkout-placement) .shop-checkout-totals > .shop-cart-total { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .shop-checkout-placement .shop-checkout-dock-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .625rem; padding: .625rem 1rem; border-radius: var(--radius); background: #1e293b; line-height: 1.2; }
  .shop-checkout-placement .shop-checkout-dock-total span { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: #cbd5e1; }
  .shop-checkout-placement .shop-checkout-dock-total strong { font-size: var(--text-2xl); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .shop-checkout-placement .checkout-terms { padding: .5rem .75rem; }
  .shop-checkout-placement .shop-checkout-place { min-height: 3.25rem; }
}
/* A short window: at the page's end the placement stands above the footer, and
   the page's own bottom space would push its terms under the sticky header. */
@media (min-width: 64rem) and (max-height: 45rem) {
  .shop-page.shop-checkout { padding-bottom: 1rem; }
}
/* End it3 A */

/* Checkout cohesion, zone C: the summary's lines start with a thumbnail
   carrying the amount; the payment is a list of tiles with the method's
   icon (the card's marks, white PNGs, on a dark plate; COD's fee a badge);
   one method is an informative tile without a radio; the total sits in a
   dark bar; a trust row replaces the secure note under Place; the quote's
   confirmation is a small status under the totals. */
.shop-checkout-line-thumb { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--store-soft); color: var(--store-muted); }
.shop-checkout-line-thumb .shop-checkout-line-media { width: 100%; height: 100%; border: 0; border-radius: calc(var(--radius) - 1px); }
.shop-checkout-line-thumb > .shop-icon { width: 1.375rem; height: 1.375rem; }
.shop-checkout-line-qty { position: absolute; top: -.4375rem; right: -.4375rem; display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3125rem; border-radius: var(--radius-full); background: #334155; color: #fff; font-size: var(--text-2xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 0 0 2px #fff; }
.shop-checkout-summary .payment-methods .shop-checkout-option { align-items: center; gap: .625rem; }
.shop-checkout-summary .payment-methods .shop-checkout-option input { margin-top: 0; }
.shop-checkout-option-icon { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius); background: var(--store-soft); color: var(--store-accent); }
.shop-checkout-option-icon .shop-icon { width: 1.125rem; height: 1.125rem; }
.shop-checkout-option:has(input:checked) .shop-checkout-option-icon, .shop-checkout-option.is-only .shop-checkout-option-icon { background: color-mix(in srgb, var(--store-accent) 12%, #fff); }
.shop-checkout-option-marks { display: flex; flex: none; align-items: center; gap: .25rem; }
.shop-checkout-option-marks:empty { display: none; }
.shop-checkout-option-marks img { display: block; width: auto; height: 1.375rem; padding: .25rem .3125rem; border-radius: var(--radius-sm); background: #1e293b; }
.shop-checkout-option.is-only { cursor: default; border-color: var(--store-accent); box-shadow: inset 0 0 0 1px var(--store-accent); background: color-mix(in srgb, var(--store-accent) 5%, #fff); }
.shop-checkout-option.is-only:hover { border-color: var(--store-accent); }
.shop-checkout-only { justify-self: start; margin-top: .25rem; padding: .125rem .5rem; border-radius: var(--radius-sm); background: var(--store-soft); color: var(--store-muted); font-size: var(--text-2xs); font-weight: 600; line-height: 1.4; }
.shop-checkout-option-tick { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background: #dcfce7; color: #166534; }
.shop-checkout-option-tick .shop-icon { width: .875rem; height: .875rem; }
.shop-checkout-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .875rem; margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); line-height: 1.4; color: var(--store-muted); }
.shop-checkout-trust li { display: inline-flex; align-items: center; gap: .3125rem; }
.shop-checkout-trust svg { flex: none; width: .875rem; height: .875rem; color: var(--success); }
.shop-checkout-updated { display: flex; align-items: center; gap: .375rem; margin: .5rem 0 0; font-size: var(--text-xs); font-weight: 500; color: #166534; }
.shop-checkout-updated .shop-icon { flex: none; width: .875rem; height: .875rem; }

/* The pond configurator (CFG-3, pond-configurator.html): v1's configurator
   page (epdm-shop/configurator.html, mockup C) without its 3D editor: a
   compact head, the four steps beside the plan, the figures and the
   materials, and v1's bottom bar with the total and "Adaugă în coș", sticky
   so the buy control stays in view on 1366×768 and on phones. Without
   JavaScript the section stays hidden and the guide with the quote request
   is the page. */
.pond-page { padding-top: .75rem; padding-bottom: 2rem; }
.pond-head { display: flex; align-items: flex-end; gap: 1.5rem; margin-bottom: .75rem; }
.pond-head h1 { margin: 0; font-size: 1.4375rem; letter-spacing: -.02em; }
.pond-sub { margin: .25rem 0 0; color: var(--store-muted); font-size: var(--text-sm); }
.pond-howto-link { margin-left: auto; white-space: nowrap; border: 1px solid #d5dce5; background: #fff; border-radius: var(--radius-full); padding: .45rem .9rem; font-size: .84375rem; font-weight: 600; color: var(--store-muted); text-decoration: none; }
.pond-howto-link:hover { color: var(--store-accent); border-color: var(--store-accent); }
.pond { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pond[hidden] { display: none; }
.pond-form { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
.pond-step { margin: 0; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; padding: .75rem 1rem 1rem; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.pond-step legend { float: left; width: 100%; display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; padding: 0; font-weight: 700; font-size: .9375rem; color: #0f172a; }
.pond-step legend + * { clear: both; }
.pond-n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--store-accent); font-size: .75rem; font-weight: 700; }
.pond-label { margin: .625rem 0 .375rem; font-size: .8125rem; font-weight: 600; color: #1e293b; }
.pond-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.pond-chips[hidden] { display: none; }
.pond-chip { position: relative; display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; }
.pond-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pond-chip > span:last-child { display: inline-block; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; padding: .4rem .75rem; font-size: .8125rem; font-weight: 600; color: var(--store-muted); transition: border-color .15s, color .15s, background .15s; }
.pond-chip:hover > span:last-child { border-color: color-mix(in srgb, var(--store-accent) 50%, #fff); }
.pond-chip input:checked ~ span:last-child { border-color: var(--store-accent); background: var(--accent-soft); color: var(--shop-brand-dark); }
.pond-chip input:focus-visible ~ span:last-child { outline: 2px solid var(--focus); outline-offset: 2px; }
.pond-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pond-shape { flex-direction: column; }
.pond-shape > span:last-child { width: 100%; text-align: center; padding: 2.1rem .125rem .4rem; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pond-glyph { position: absolute; top: .5rem; left: 50%; width: 2rem; height: 1.25rem; transform: translateX(-50%); background: #9ec5e3; border: 1.5px solid var(--store-accent); pointer-events: none; z-index: 1; }
.pond-glyph-oval { border-radius: 50%; }
.pond-glyph-rectangle { border-radius: 3px; }
.pond-glyph-round { width: 1.25rem; border-radius: 50%; }
.pond-glyph-kidney { border-radius: 60% 60% 45% 45% / 70% 70% 30% 30%; }
.pond-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pond-num { display: grid; gap: .25rem; font-size: .8125rem; font-weight: 600; color: #1e293b; }
.pond-num[hidden] { display: none; }
.pond-unit { display: flex; align-items: center; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--field); padding-right: .625rem; }
.pond-unit:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.pond-unit input { width: 100%; min-width: 0; border: 0; background: transparent; padding: .5rem .625rem; font: inherit; font-size: 1rem; font-weight: 600; color: #0f172a; outline: none; }
.pond-unit b { color: var(--store-muted); font-weight: 500; }
.pond-switch { display: flex; align-items: flex-start; gap: .625rem; padding: .5rem 0; cursor: pointer; font-size: .875rem; }
.pond-switch input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--store-accent); }
.pond-switch small { display: block; color: var(--store-muted); font-size: .75rem; }
.pond-indent { padding-left: 1.625rem; align-items: center; }
.pond-inline { font-size: .75rem; font-weight: 600; color: var(--store-muted); }
.pond-side { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; padding: 1rem; display: grid; gap: .75rem; align-content: start; }
.pond-visual { margin: 0; border-radius: var(--radius-lg); background: linear-gradient(#eef6e8, #dcebd2); aspect-ratio: 320 / 170; overflow: hidden; }
.pond-svg { display: block; width: 100%; height: 100%; }
.pond-water { fill: #4f8fbf; stroke: #2a6796; stroke-width: 2; }
.pond-ground { stroke: #6b8e4e; stroke-width: 3; }
.pond-dim { font: 600 12px var(--font-sans); fill: #1e293b; text-anchor: middle; }
.pond-dim-in { fill: #fff; }
.pond-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.pond-figures div { background: var(--store-soft); border-radius: var(--radius); padding: .5rem .625rem; }
.pond-figures dt { font-size: .6875rem; color: var(--store-muted); }
.pond-figures dd { margin: 0; font-weight: 700; font-size: .9375rem; color: #0f172a; font-variant-numeric: tabular-nums; }
.pond-h2 { margin: 0; font-size: .875rem; font-weight: 700; color: #0f172a; }
.pond-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.pond-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; font-size: .8125rem; border-bottom: 1px solid var(--border); padding-bottom: .375rem; }
.pond-lines a, .pond-lines span { color: #1e293b; font-weight: 600; text-decoration: none; }
.pond-lines small { grid-column: 1; color: var(--store-muted); }
.pond-lines b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.pond-status { margin: 0; font-size: .8125rem; color: var(--store-muted); min-height: 1.2em; }
.pond.is-busy .pond-bar-total b, .pond.is-busy .pond-lines { opacity: .55; }
.pond-bar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; margin: 0 -1rem; padding: .75rem 1rem; background: rgb(255 255 255 / .97); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgb(15 23 42 / .06); }
.pond-bar-what { min-width: 0; display: grid; }
.pond-bar-what b { font-size: .9375rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pond-bar-what small, .pond-bar-total small { font-size: .75rem; color: var(--store-muted); }
.pond-bar-total { margin-left: auto; display: grid; text-align: right; }
.pond-bar-total b { font-size: 1.25rem; color: var(--shop-total); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pond-add { border: 0; border-radius: var(--radius-lg); padding: .8rem 1.5rem; font: inherit; font-weight: 700; font-size: 1rem; color: #fff; background: linear-gradient(var(--shop-cta-from), var(--shop-cta-to)); cursor: pointer; white-space: nowrap; }
.pond-add:disabled { opacity: .5; cursor: default; }
.pond-add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The guide and the questions under the editor (CFG-10, v1's
   configurator.html:172–186): the steps are the editor's cards (.pond-step,
   .pond-n), the paragraph the theme's .shop-sub, the questions the first
   page's .shop-faq as a panel, in two columns from 48rem as v1's; only the
   grid beside the picture and the section titles are the guide's own. */
.pond-guide { margin-top: 2.5rem; scroll-margin-top: 5rem; }
.pond-guide h2, .pond-faq h2, .pond-request h2 { margin: 0 0 1rem; font-size: var(--text-xl); line-height: var(--leading-tight); color: var(--store-fg); }
.pond-guide-grid { display: grid; gap: .75rem; }
.pond-guide-figure { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--store-soft); }
.pond-guide-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pond-guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.pond-guide-steps h3 { margin: .625rem 0 .25rem; font-size: .9375rem; line-height: var(--leading-snug); color: var(--store-fg); }
.pond-guide-steps p { margin: 0; font-size: .8125rem; line-height: var(--leading-relaxed); color: var(--store-muted); }
.pond-guide .shop-sub { margin: 1.5rem 0 1rem; max-width: 47.5rem; line-height: var(--leading-relaxed); }
.pond-guide-start { margin: 0; }
.pond-faq { margin-top: 2.5rem; padding: 1.25rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-xl); }
.pond-request { margin-top: 2.5rem; max-width: 56rem; }
@media (min-width: 40rem) {
  .pond-guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .pond-guide h2, .pond-faq h2, .pond-request h2 { font-size: var(--text-2xl); }
  .pond-faq { padding: 1.5rem 1.75rem 1.75rem; }
  .pond-faq .shop-faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .625rem; }
}
@media (min-width: 64rem) {
  .pond-guide-grid:has(> .pond-guide-figure) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .pond-guide-figure img { height: 100%; }
}
@media (min-width: 960px) {
  .pond { grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 1fr); align-items: start; }
  .pond-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pond-side { position: sticky; top: .75rem; }
  .pond-bar { grid-column: 1 / -1; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); }
  .pond-head h1 { font-size: 1.875rem; }
}
@media (max-width: 959px) {
  .pond-howto-link { display: none; }
  .pond-side { order: -1; }
  .pond-bar { flex-wrap: wrap; gap: .5rem .75rem; }
  .pond-bar-what { display: none; }
  .pond-bar-total { margin-left: 0; text-align: left; }
  .pond-add { margin-left: auto; }
}
@media (max-width: 63.99rem) {
  body.shop:has(.shop-tabbar) .pond-bar { bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .pond-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pond-shape > span:last-child { padding-left: .25rem; padding-right: .25rem; }
}

/* A group of cart lines one module added together (a pond project, "Proiect
   din configurator"; CFG-9), in the drawer, the cart and the checkout, the same
   for any module, in the cart's own parts: its head (cart-group-head) and its
   lines are items of the same list, drawn as one card: the lines close the
   list's gap (--cart-gap, the list's own) and keep their own surface, their
   border joined to the head's. The head is flat (--store-bg), its actions the
   theme's buttons: the secondary small button opens the module; the removal is
   the line's own "Șterge" (the rules below name it), confirmed in the drawer's
   band (cd-band). New here: only the joining and the head's grid. */
.shop-cart-dialog .shop-cart-lines, .shop-checkout-summary .shop-checkout-lines { --cart-gap: .75rem; }
main.shop-cart .shop-cart-lines, .checkout-empty .shop-checkout-lines { --cart-gap: .5rem; }
.cart-group-head { --cart-group-pad: 1rem; --cd-pad: var(--cart-group-pad); position: relative; container-type: inline-size; margin: 0; padding: .875rem var(--cart-group-pad) .75rem; list-style: none; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--store-bg); }
:is(.shop-cart-lines, .shop-checkout-lines) > li.is-grouped { margin-top: calc(-1 * var(--cart-gap, .75rem)); border: 1px solid var(--border); border-bottom: 0; border-radius: 0; box-shadow: none; }
:is(.shop-cart-lines, .shop-checkout-lines) > li.is-grouped.is-group-last { border-bottom: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.cart-group-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind total" "label total" "acts acts"; align-items: center; gap: .125rem .75rem; }
.cart-group-kind { grid-area: kind; display: flex; align-items: center; gap: .375rem; min-width: 0; margin: 0; color: var(--store-accent); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.cart-group-kind .shop-icon { flex: none; width: 1.125rem; height: 1.125rem; }
.cart-group-label { grid-area: label; min-width: 0; margin: 0; color: var(--store-fg); font-size: .9375rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; text-wrap: pretty; }
.cart-group-total { grid-area: total; margin: 0; color: var(--store-fg); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-group-actions { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; margin-top: .625rem; }
.cart-group-del { margin-left: auto; }
.cart-group-del[open] { flex-basis: 100%; }
/* CFG-11: one removal on every surface (the drawer's quiet trash), on the
   row of "Deschide în configurator" where the head holds both; its text ends
   where the total does. */
li.cart-group-head .cart-group-del > summary { padding-right: 0; }
.cart-group-edit { white-space: nowrap; }
/* A phone's head (about 22 rem) keeps both on one row: the edit button and
   the gap give the room the removal's label needs. */
@container (max-width: 24rem) {
  .cart-group-actions { column-gap: .25rem; }
  .cart-group-actions .cart-group-edit { gap: .25rem; padding-inline: .5rem; }
  li.cart-group-head .cart-group-del > summary { gap: .25rem; padding-left: .375rem; font-size: var(--text-xs); }
}
/* Under 22 rem (a checkout column, a 360 px phone) the edit button says its
   words without the pencil; the removal keeps its trash, its component's glyph
   (Argon #7). */
@container (max-width: 22rem) {
  .cart-group-actions .cart-group-edit .shop-icon { display: none; }
}
/* Where the head holds both (19 rem of content and up), the actions are a grid: opening
   the removal keeps "Anulează" on the edit button's row, its band under both
   (Argon #8); a narrower head wraps them as a flex row. */
@container (min-width: 19rem) {
  .cart-group-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .cart-group-actions > .cart-group-edit { grid-area: 1 / 1; position: relative; z-index: 1; margin-top: .125rem; }
  .cart-group-actions > .cart-group-del { grid-area: 1 / 2; justify-self: end; margin-left: 0; }
  .cart-group-actions > .cart-group-del[open] { grid-column: 1 / -1; justify-self: stretch; }
}
.cart-group-del > summary { list-style: none; }
/* "Anulează" takes "Șterge proiectul"'s place, on the right. */
li.cart-group-head .cart-group-del > summary { display: flex; width: fit-content; margin-left: auto; }
.cart-group-del > summary::-webkit-details-marker { display: none; }
.cart-group-del > summary > span { display: inline-flex; align-items: center; gap: inherit; }
.cart-group-del:not([open]) .cart-group-cancel, .cart-group-del[open] .cart-group-ask { display: none; }
.cart-group-head .cd-band { margin: .5rem calc(-1 * var(--cart-group-pad)) -.75rem; border-top: 1px solid var(--border); border-bottom: 0; }
.cart-group-head .cd-band-text b { display: block; }
.cart-group-remove { margin: 0; }
/* The drawer: the lines' price row closes them without its rule. */
.shop-cart-dialog .cd-line.is-grouped { padding-bottom: .25rem; }
.shop-cart-dialog .cd-line.is-grouped:hover { border-color: var(--border); }
.shop-cart-dialog .cd-line.is-grouped .cd-me { margin-top: .75rem; }
.shop-cart-dialog .cd-line.is-grouped .cd-ft { min-height: 2.25rem; margin-top: .5rem; padding-top: 0; border-top: 0; }
/* The cart's page: its lines' facts by icon, as in the drawer. */
main.shop-cart .cart-group-head { --cart-group-pad: .875rem; }
main.shop-cart .cart-line-grid { display: grid; gap: .375rem; }
main.shop-cart .cart-line-grid > * { grid-area: auto; }
main.shop-cart .cart-line-grid .cd-me { max-width: 30rem; margin: .375rem 0 0; gap: .5rem .75rem; }
main.shop-cart .cart-line-grid .shop-cart-unit-price { margin: 0; color: var(--store-muted); font-size: var(--text-xs); }
/* On a phone the grid takes the card's width under the picture, as in the
   drawer: beside a 56 px picture its third column would leave the card. */
@media (max-width: 47.99rem) {
  main.shop-cart .shop-cart-line[data-line]:has(> .shop-cart-line-media):has(> .cart-line-grid) { grid-template-areas: "media title total" "meta meta meta" "more more more" "note note note" "set set set"; }
}
@media (min-width: 640px) {
  main.shop-cart .cart-group-head { --cart-group-pad: 1.25rem; padding-top: 1rem; }
  main.shop-cart .cart-group-total { font-size: 1.125rem; }
}
/* The checkout's summary: the same card, smaller. */
.shop-checkout-lines .cart-group-head { --cart-group-pad: .75rem; display: block; padding-top: .625rem; padding-bottom: .5rem; }
.shop-checkout-lines .cart-group-label, .shop-checkout-lines .cart-group-total { font-size: var(--text-sm); }
.shop-checkout-lines .cart-group-actions { margin-top: .375rem; }
.shop-checkout-lines .cart-group-head .cd-band { margin-bottom: -.5rem; }
.shop-checkout-lines > li.is-grouped { padding: .625rem .75rem; }
/* A grouped line has no removal of its own: its amount and facts take the
   column under its total (Argon #9). */
.shop-checkout-lines > li.is-grouped { grid-template-areas: "title total" "amount amount" "facts facts"; }
.shop-checkout-lines > li.is-grouped:has(> .shop-checkout-line-thumb) { grid-template-areas: "media title total" "media amount amount" "media facts facts"; }

/* v1's editor on the configurator page (pond-configurator.html, #pond-editor):
   its own fixed bottom bar replaces the site's tab bar there, as on v1's page,
   which had none; the page's own form stays hidden while it is mounted. */
.pond-editor:empty { display: none; }
body.shop:has(#pond-editor:not(:empty)) .shop-tabbar { display: none; }
body.shop:has(#pond-editor:not(:empty)) { padding-bottom: 0; }

/* DF-1b: the editor's steps (consiliu-design/lista-reparatii.md 6–12). v1's
   editor stays the served bundle; these rules only adjust its sheet
   (editor.css), which loads after this one: each starts at #pond-editor to
   win over v1's equal selectors. */
/* 6. On a phone, the editor's controls are the store's 44 px targets (v1:
   32–36 px, tabs 29 px). The Plan bar keeps its tools at 44 px by leaving
   out the zoom buttons and the percentage, which two fingers replace there
   (v1 PlanEditor.tsx, the pinch); "Încadrează" still resets the view. The
   chips under the tabs also keep 44 px in the card preview, where a
   customer can edit the plan without opening full screen. */
#pond-editor .pv[data-layout=phone] .pv-tabs, #pond-editor .pv[data-layout=phone] .pv-tr { top: 8px; }
#pond-editor .pv[data-layout=phone] .pv-card { --pe-scene-top: 60px; }
/* The plan measures its own box for drawing and pointer coordinates. Move
   that box down with the extra chip height, keeping the chips at 60 px in
   the card and the bottom toolbar in place. */
#pond-editor .pv[data-layout=phone] .pv-plan { top: 16px; }
#pond-editor .pv[data-layout=phone] .pv-layers { top: 44px; }
#pond-editor .pv[data-layout=phone] .pv-seg button, #pond-editor .pv[data-layout=phone] .pe-story-seg button { min-width: 44px; min-height: 44px; }
#pond-editor .pv[data-layout=phone] .pv-rbtn { width: 44px; height: 44px; }
#pond-editor .pv[data-layout=phone] .pv-done { height: 44px; }
#pond-editor .pv[data-layout=phone] .pv-fullmeta { top: 116px; }
#pond-editor .pv[data-layout=phone] .pv-card.is-full .pv-flag { top: 152px; }
#pond-editor .pv[data-layout=phone] .pv-tb { min-width: 44px; height: 44px; }
#pond-editor .pv[data-layout=phone] .pv-pill > .pv-pct, #pond-editor .pv[data-layout=phone] .pv-pill > .pv-tb:has(+ .pv-pct), #pond-editor .pv[data-layout=phone] .pv-pill > .pv-pct + .pv-tb { display: none; }
#pond-editor .pv[data-layout=phone] .pe-spill .pe-sv { min-width: 44px; height: 44px; }
#pond-editor .pv[data-layout=phone] .pe-spill .pe-ibtn { width: 44px; height: 44px; }
/* 7. Chromium culls the part of the 3D canvas under the site's opaque sticky
   header, but on the canvas's flipped image: the band went missing at the
   canvas's bottom while its top scrolled under the header. A header not
   quite opaque (the same white to the eye) is not an occluder. */
body.pond-body .shop-header { background: rgb(255 255 255 / .995); }
/* 8. "Rola membranei" (an info tip in the tips' slot) starts at the top, its
   icon on its title's line, as the slot's other tips; v1 centred it in the
   slot's height, below its icon. */
#pond-editor .pq .pq-tip-slot .pq-sl-info { justify-content: flex-start; }
/* 9. An accessory's description takes the height of its shown variant; v1
   kept the longer one's (Geotextil: 200 g/m² vs 400 g/m²), a blank line. */
#pond-editor .pq .pq-ad > .pq-stack-inline > .pq-lyr:not(.on) { max-height: 0; overflow: hidden; }
/* 10. "Economisești ≈ … față de …" reads as one phrase: the second part
   follows the first instead of starting at the chip's middle; narrow cards
   keep v1's two lines. */
@container pmem (width > 440px) {
  #pond-editor .pmem-tag:not(.pmem-tag-na):not([data-kind=pending]) { grid-template-columns: auto minmax(0, 1fr); gap: 0 .375em; }
}
/* 11. On a phone, the first step follows the draft's line at 14 px, as on a
   wide screen; v1's phone rule gave it the steps' 64 px. */
#pond-editor .pq[data-layout=phone] .pq-draft + .pq-q { margin-top: 14px; }
/* 12. The chat's bubble (modules/conversations) does not float over the
   content where a fixed bar holds the page's bottom (Argon #10: the prices
   of /cos and /finalizare, the configurator's options): it sits in that
   bar, in a place the bar keeps for it. chat.js lifts the bubble above the
   bars by --cn-chat-lift; the theme sets its place instead, the module
   unchanged. Below 64rem that bar is the tab bar (a fifth, 56 px slot on
   the right; the cart's and the checkout's docks stay above it), on the
   configurator v1's bar (.po-bar), at every width. Elsewhere, on a wide
   screen, the footer's last row (the ANPC mark) ends above the bubble. */
@media (max-width: 63.99rem) {
  body.shop:has(.cn-chat-bubble):not(:has(#pond-editor:not(:empty))) .shop-tabbar { padding-right: calc(3.5rem + env(safe-area-inset-right)); }
  body.shop:has(.shop-tabbar):not(:has(#pond-editor:not(:empty))) .cn-chat-bubble { right: calc(.375rem + env(safe-area-inset-right)); bottom: calc(.375rem + env(safe-area-inset-bottom)); width: 2.75rem; height: 2.75rem; }
}
@media (min-width: 64rem) {
  body.shop:has(.cn-chat-bubble):not(:has(#pond-editor:not(:empty))) .shop-footer-bottom { padding-bottom: 5.75rem; }
}
body.shop:has(.cn-chat-bubble) .po-bar[data-layout=phone] .po-bar-in { padding-right: 4rem; }
body.shop:has(.cn-chat-bubble) .po-bar[data-layout=phone] .po-copy { display: none; }
body.shop:has(.po-bar[data-layout=phone]) .cn-chat-bubble { right: calc(.625rem + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); width: 2.75rem; height: 2.75rem; }
body.shop:has(.po-bar[data-layout=desktop]) .cn-chat-bubble { bottom: 12px; }
/* v1's bar is drawn in .lay-bar (z-index 60); the bubble goes above it, below
   the editor's full screen (300). */
body.shop:has(.po-bar) .cn-chat-bubble { z-index: 61; }
@media (max-width: 1440px) {
  body.shop:has(.cn-chat-bubble) .po-bar[data-layout=desktop] .po-bar-in { padding-right: 5.5rem; }
}
@media (min-width: 960px) and (max-height: 720px) {
  body.shop:has(.po-bar[data-layout=desktop]) .cn-chat-bubble { bottom: 6px; }
}
body.shop:has(#pond-editor:not(:empty)) .shop-footer { padding-bottom: 5.0625rem; }

/* DF-2: reserve the checkout total's intrinsic width beside the mobile CTA. */
@media (max-width: 63.99rem) {
  .shop-checkout-dock-total { flex: 0 0 auto; }
  .shop-checkout-dock .shop-checkout-place { flex: 1; min-width: 0; }
}

/* DF-1a: the materials card of v1's editor and its actions (design council, 10.11).
   The refusal note keeps its hidden attribute against the editor's
   .po-note { display: flex }: it shows only at a real refusal (epdm-shop-pond.js). */
[data-pond-stock-refusal][hidden] { display: none; }
/* The stock note under the rows takes the card's inner margin, as its other parts. */
#pond-editor .po-buy > .po-spec { padding-inline: var(--bg-pad); }
/* On a phone the row is a grid (v1's offer.css, max-width 520px) that puts
   both specs on row 2: the second (the availability) gets its own row, and
   the chips and the price follow it. */
@media (max-width: 520px) {
  #pond-editor .po-main > .po-spec + .po-spec { grid-row: 3; }
  #pond-editor .po-row:has(.po-spec + .po-spec) > .po-th { grid-row: 1 / span 5; }
  #pond-editor .po-row:has(.po-spec + .po-spec) .po-chips { grid-row: 4; }
  #pond-editor .po-row:has(.po-spec + .po-spec) > .po-price { grid-row: 5; }
}
/* One group shares the project, the summary's: "Încă te gândești?" keeps its text, not a second row of the same buttons. */
#pond-editor .po-still-row { display: none; }
/* The fixed bar steps aside while one of the summary's purchase buttons is actually on screen, below the sticky bars (epdm-shop-pond.js). */
#pond-editor[data-card-actions-seen] .po-bar { visibility: hidden; }
/* Without the storefront's delivery term (shipping.delivery_time) the editor promises none. */
#pond-editor[data-delivery-term="none"] .po-assure > div:first-child,
#pond-editor[data-delivery-term="none"] .po-bd > i:first-child { display: none; }
/* The technical sheet's footer (Argon #3): the project's link is a shared
   link with the whole document (?d=), never the six lines it took over the
   page's last table; it keeps one line, cut with an ellipsis, beside the note. */
.fisa-doc .fp-f span:first-child { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fisa-doc .fp-f span:last-child { flex: 0 1 auto; max-width: 62%; }
/* The sheet is an A4 page in the sheet's own type (8.5 pt): the text pages'
   table size (.shop-page table, .9rem) does not reach its tables, which it
   pushed past the page's end ("Profil" cut, under the footer). */
.shop-page .fisa-doc table { font-size: inherit; }

/* DF-3: keep placement in view while the page scrolls normally. Reserve
   a final clearance below it so the last summary/address-book controls
   can scroll entirely above the sticky card, including on short screens. */
@media (min-width: 64rem) {
  .shop-checkout-side:has(> .shop-checkout-placement) { padding-bottom: 18rem; }
}