/* All The Parts Storefront - the shop's colours on the design system, and the chrome laid out as Parts Europe's.
 *
 * Colours: gxtmoto.bg's own (green #50AD55, red #EF5042, slate #48585C, ink #2C3640), with the same hues darkened
 * wherever they carry text, so every text and every label on a filled button reads at 4.5:1 or better (measured
 * 2026-10-16; the measured pairs are in the comments). The design system's tokens are dark by default and the
 * server writes `light` on <html> for the light theme - the shop opens light. */

/* ── Dark (the design system's default block) ── */
:root {
  --font-body: Rubik, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --brand-green: #50AD55;          /* fills and marks only: white on it is 2.82 */
  --brand-red: #EF5042;
  --brand-slate: #48585C;
  --brand-ink: #2C3640;

  --primary: #5CB861;              /* text and lines on the dark surfaces: 6.58 on surface, 7.21 on bg */
  --primary-soft: #50AD55;
  --primary-deep: #3D8541;
  --on-primary: #ffffff;
  --btn-primary-bg: #3D8541;       /* white on it 4.54 */
  --brand-gradient: linear-gradient(135deg, #3D8541 0%, #3D8541 100%);
  --accent: #C93A2D;               /* red, as gxtmoto.bg uses it: badges, promotions, errors - never a button. White on it 5.09 */
  --accent-text: #F2685B;          /* red as text on dark: 5.36 on surface */
  --price: #E8ECEF;

  --bg: #14181B;
  --surface: #1B2124;
  --surface-container-low: #181D20;
  --surface-container: #20272B;
  --surface-container-high: #273035;
  --surface-container-highest: #2F393F;
  --bg-elevated: var(--surface-container-high);
  --border: #2A3338;
  --border-strong: #3A464C;
  --text: #E8ECEF;                 /* 13.71 on surface */
  --text-muted: #B4BEC5;           /* 8.62 */
  --text-dim: #97A2AA;             /* 6.25 */

  --top-bg: #0F1214;
  --top-text: #C9D1D6;
  --head-bg: #1B2124;
  --nav-bg: #273035;
  --nav-text: #E8ECEF;
  --tile-bg: #8B9198;              /* gxtmoto.bg's muted grey (Chapa, 2026-10-17: not white): the photos' white melts into it (multiply) */
  --tile-ink: #14181B;             /* a text on the tile (a brand with no logo, the picture credit): 5.62 on it */

  --focus-ring: 0 0 0 3px rgba(92, 184, 97, 0.45);
  --shape-xs: 4px;
  --shape-sm: 6px;
  --shape-md: 8px;
  --shape-lg: 12px;
  --shape-xl: 16px;
  --radius: var(--shape-sm);
  --radius-card: var(--shape-md);
  --sf-max: 1320px;
  --sf-gutter: 16px;
  color-scheme: dark;
}

/* ── Light (what the shop opens with) ── */
html.light {
  --primary: #367539;              /* 4.98 on bg, 5.58 on white, 4.50 on container-high; white on it 5.58 */
  --primary-soft: #50AD55;
  --primary-deep: #2F6832;
  --btn-primary-bg: #367539;
  --brand-gradient: linear-gradient(135deg, #367539 0%, #3D8541 100%);
  --accent: #C93A2D;               /* white on it 5.09; as text 4.54 on bg, 5.09 on white */
  --accent-text: #C93A2D;
  --price: #2C3640;

  --bg: #F0F2F5;
  --surface: #FFFFFF;
  --surface-container-low: #F7F8FA;
  --surface-container: #EEF0F3;
  --surface-container-high: #E4E7EB;
  --surface-container-highest: #D9DDE2;
  --bg-elevated: #FFFFFF;
  --border: #E2E2E2;
  --border-strong: #C9CED6;
  --text: #2C3640;                 /* 10.96 on bg, 12.29 on white */
  --text-muted: #4F5B66;           /* 6.20 on bg */
  --text-dim: #626C76;             /* 4.77 on bg, 5.35 on white - not on container-high */

  --top-bg: #2C3640;
  --top-text: #DDE2E6;             /* 9.42 on the top bar */
  --head-bg: #FFFFFF;
  --nav-bg: #48585C;               /* white on it 7.43 */
  --nav-text: #FFFFFF;
  --tile-bg: #E6E9ED;               /* pictures on a soft tile, a shade under the page: the photos' white turns into it (multiply) */
  --tile-ink: #4F5B66;              /* 5.9 on the tile */

  --focus-ring: 0 0 0 3px rgba(54, 117, 57, 0.40);
  --elev-1: 0 1px 2px rgba(44, 54, 64, 0.08), 0 1px 3px rgba(44, 54, 64, 0.06);
  --elev-2: 0 4px 10px rgba(44, 54, 64, 0.10), 0 1px 4px rgba(44, 54, 64, 0.06);
  --elev-3: 0 14px 32px rgba(44, 54, 64, 0.16), 0 4px 10px rgba(44, 54, 64, 0.08);
  color-scheme: light;
}

/* ── Base ── */
/* No browser tap highlight: iOS Safari flashed a grey box over whatever was tapped (a folding section's heading, 2026-10-16,
   Chapa's clip). Press feedback is the page's own (the design system's state layer and :active rules). */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-underline-offset: 2px; }
img { max-width: 100%; height: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf-wrap { box-sizing: border-box; width: 100%; max-width: var(--sf-max); margin: 0 auto; padding: 0 var(--sf-gutter); }
.btn { border-radius: var(--shape-sm); }
.btn-primary { background: var(--btn-primary-bg); color: var(--on-primary); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ic { width: 20px; height: 20px; flex: none; }
/* The design system's select draws its chevron with this class too: it keeps its own 14 px (the size of every other
   control's arrow on the shop), not the 20 px of the icons above. */
.ic.os-select-chevron { width: 14px; height: 14px; }
/* The theme switch animates the page's colours, not every component's. */
html.sf-scheme-anim, html.sf-scheme-anim body, html.sf-scheme-anim .sf-header * { transition: background-color var(--dur-medium) var(--ease-emphasized), color var(--dur-medium) var(--ease-emphasized), border-color var(--dur-medium) var(--ease-emphasized); }

.sf-skip { position: absolute; left: 8px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--surface); color: var(--text); border-radius: var(--shape-sm); box-shadow: var(--elev-2); }
.sf-skip:focus { top: 8px; }

/* ── Icon buttons ── */
.sf-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-width: 40px; padding: 0;
  border: 0; border-radius: var(--shape-sm); background: transparent; color: inherit; cursor: pointer;
}
.sf-iconbtn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
/* The switch shows the icon of the theme a press gives. */
html.light .sf-scheme .sf-to-light, html:not(.light) .sf-scheme .sf-to-dark { display: none; }

/* ── Header ── */
/* The row with the logo, the search, the account and the cart sticks to the top of the window; the contacts bar above
   and the menu bar below scroll away (Chapa, 2026-10-16). Once the page has moved the row gets lower (.is-stuck, the
   script). Its place keeps the full height (--sf-head-h, measured by the script), so nothing under it moves. */
.sf-header { position: sticky; top: 0; z-index: 70; min-height: var(--sf-head-h, 0px); pointer-events: none; }
/* How much of the window's top the stuck row covers: whatever else sticks, or is jumped to, stays under it (the
   catalogue's sticky parts read it too). */
:root { --sf-sticky: 61px; }
@media (max-width: 1023px) { :root { --sf-sticky: 92px; } }
.sf-header > .sf-main { pointer-events: auto; transition: box-shadow var(--sf-head-t); }
html.is-stuck .sf-main { box-shadow: var(--elev-2); }
/* The rider (inc/chrome.php, the script): on the stuck row's bottom edge, which turns green as far as the page has been
   read. Only on a page long enough to ride and while the row is stuck, never for a visitor who asked for less motion. */
.sf-main { position: relative; }
.sf-main-in > * { position: relative; z-index: 1; }
.sf-ride { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity var(--sf-head-t); }
html:not(.sf-ride-on) .sf-ride { display: none; }
html.is-stuck .sf-ride { opacity: 1; }
/* Light: only transforms move (the trail is scaled, never resized; nothing is laid out again on a frame). */
.sf-ride-trail { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--btn-primary-bg); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
/* Chapa, 2026-10-16: the trail is the row's own bottom edge, so it stays ("ако следата е долната част на лентата която
   остава"); the rider rides ON the row, in front of its things ("мотора е върху лентата"); quiet - smaller, muted,
   shown only while the page moves, fading a moment after it stops. */
.sf-moto { position: absolute; left: 0; bottom: 2px; width: 48px; height: 28px; color: var(--text-muted); transform-origin: 50% 100%; will-change: transform, opacity; opacity: 0; transition: opacity .6s cubic-bezier(.2, 0, 0, 1); }
.sf-ride.is-riding .sf-moto { opacity: .85; transition-duration: .2s; }
.sf-moto-body { position: absolute; inset: 0; display: block; }
.sf-moto-w { position: absolute; top: 14px; width: 14px; height: 14px; will-change: transform; }
.sf-moto-w svg { display: block; }
.sf-moto-w.is-rear { left: 3px; }
.sf-moto-w.is-front { left: 31px; }
.sf-moto .sf-moto-tank { fill: var(--btn-primary-bg); }

@media (prefers-reduced-motion: reduce) { .sf-ride { display: none !important; } }
/* Every change of the row as it sticks is a move, never a jump (Chapa, 2026-10-16: "не искам никакви резки ефекти"):
   sizes, the shadow and the menu button all ease over the design system's long duration. */
:root { --sf-head-t: var(--dur-long, 400ms) var(--ease-emphasized, cubic-bezier(.2, 0, 0, 1)); }
.sf-top { background: var(--top-bg); color: var(--top-text); font-size: 13px; }
.sf-top-in { display: flex; align-items: center; gap: 16px; min-height: 38px; }
/* One row always: the address gives way (an ellipsis) before the bar takes a second row - the English address and links
   are longer and took one at 1280 px (2026-10-17). */
.sf-top-contacts { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 18px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.sf-top-contacts > .sf-top-item { flex: 0 0 auto; }
.sf-top-contacts > .sf-top-item:first-child { flex: 0 1 auto; min-width: 0; }
.sf-top-contacts > .sf-top-item:first-child > span { overflow: hidden; text-overflow: ellipsis; }
.sf-top-item { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
.sf-top-item .ic { width: 15px; height: 15px; opacity: .85; }
a.sf-top-item:hover { color: #fff; text-decoration: underline; }
.sf-top-end { display: flex; align-items: center; gap: 4px; }
.sf-top .sf-iconbtn { width: 34px; height: 34px; min-width: 34px; color: var(--top-text); }
.sf-top-links { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.sf-top-link { padding: 6px 10px; border-radius: var(--shape-xs); color: var(--top-text); text-decoration: none; white-space: nowrap; transition: color var(--t-fast), background-color var(--t-fast); }
.sf-top-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
@media (max-width: 1239px) { .sf-top-links { display: none; } }
/* The language switch (release C): the other language by its own name, beside the theme's switch. */
.sf-lang { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; white-space: nowrap; }
.sf-lang .ic { width: 15px; height: 15px; opacity: .85; }

.sf-main { background: var(--head-bg); border-bottom: 1px solid var(--border); }
.sf-main-in { display: flex; align-items: center; gap: 24px; min-height: 80px; transition: min-height var(--sf-head-t), padding var(--sf-head-t); }
html.is-stuck .sf-main-in { min-height: 60px; }
.sf-logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.sf-logo img { display: block; height: 52px; width: auto; transition: height var(--sf-head-t); }
html.is-stuck .sf-logo img { height: 38px; }
/* Stuck, the menu bar is gone from sight: the menu button beside the logo opens the side panel with the categories.
   On a desktop it unfolds from nothing (width, its gap, opacity, scale) and the logo slides aside - never a pop. */
@media (min-width: 1024px) {
  .sf-main-in > .sf-burger {
    display: inline-flex; flex-shrink: 0; width: 0; min-width: 0; margin-right: -24px; opacity: 0; transform: scale(.6); visibility: hidden; pointer-events: none;
    transition: width var(--sf-head-t), margin var(--sf-head-t), opacity var(--sf-head-t), transform var(--sf-head-t), visibility 0s linear var(--dur-long, 400ms);
  }
  html.is-stuck .sf-main-in > .sf-burger {
    width: 40px; margin-right: 0; opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: width var(--sf-head-t), margin var(--sf-head-t), opacity var(--sf-head-t), transform var(--sf-head-t), visibility 0s;
  }
}
html.light .sf-logo-dark, html:not(.light) .sf-logo-light { display: none; }
.sf-logo-text { font-weight: 800; font-size: 22px; color: var(--text); }
.sf-main-search { flex: 1 1 auto; min-width: 0; }
.sf-main-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.sf-burger { display: none; color: var(--text); }

/* Search: field + PE's red button. */
.sf-search { position: relative; display: flex; align-items: stretch; height: 46px; transition: height var(--sf-head-t), box-shadow var(--t-fast); }
html.is-stuck .sf-search { height: 40px; }
.sf-search-input {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 100%;
  padding: 0 16px; margin: 0;
  border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--shape-sm) 0 0 var(--shape-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px;
  -webkit-appearance: none; appearance: none;
}
.sf-search-input::placeholder { color: var(--text-dim); opacity: 1; }
.sf-search-input { text-overflow: ellipsis; }
/* Focus rings the field and its button together, one control: a ring round the field alone made it look bigger than
   the button and the button a separate thing (Chapa, 2026-10-16). */
.sf-search-input:focus { outline: none; border-color: var(--btn-primary-bg); box-shadow: none; }
.sf-search:focus-within { border-radius: var(--shape-sm); box-shadow: var(--focus-ring); }
.sf-search-input::-webkit-search-cancel-button { display: none; }
.sf-search-go { flex: none; width: 54px; border: 0; border-radius: 0 var(--shape-sm) var(--shape-sm) 0; background: var(--btn-primary-bg); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sf-search-go:hover { filter: brightness(1.08); }
/* The suggestions under the field (the design system's popover menu and palette rows, as imot's listings bar). */
.sf-sug { padding: 4px 0 6px; }
.sf-sug .cmdk-section + .cmdk-section { margin-top: 4px; }
.sf-sug .cmdk-section-title { margin: 0; padding: 8px 16px 4px; font: 700 11px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.sf-sug .cmdk-row { color: inherit; text-decoration: none; }
.sf-sug .cmdk-row mark { background: color-mix(in srgb, var(--primary) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

.sf-head-act { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--shape-sm); color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.2; }
.sf-head-act:hover { background: var(--surface-container); }
.sf-head-act .ic { width: 24px; height: 24px; }
.sf-head-act-label { display: flex; flex-direction: column; }
.sf-cart-ic { position: relative; display: inline-flex; }
/* "Моят мотор" (release B4): an act like the cart, its menu sliding over the page from under it. */
.sf-bike { position: relative; display: inline-flex; }
.sf-bike-btn { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.sf-bike-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 90; width: 300px; max-width: calc(100vw - 24px); padding: 8px; box-sizing: border-box;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--shape-md); box-shadow: var(--elev-3, 0 12px 32px rgba(0,0,0,.18));
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 220ms; }
.sf-bike.is-open .sf-bike-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.sf-bike-empty { margin: 6px 8px 8px; font-size: 14px; color: var(--text-muted); }
.sf-bike-row { display: flex; align-items: center; gap: 4px; border-radius: var(--shape-sm); }
.sf-bike-row:hover { background: var(--surface-container); }
.sf-bike-go { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; padding: 8px 10px; color: var(--text); text-decoration: none; }
.sf-bike-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-bike-row.is-current .sf-bike-name { color: var(--primary); }
.sf-bike-sub { font-size: 12px; color: var(--text-muted); }
.sf-bike-x { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; margin-right: 4px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.sf-bike-x:hover { background: var(--surface-container-high); color: var(--text); }
.sf-bike-add { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--border); color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.sf-bike-add:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .sf-bike-menu { transition: none; } }
/* On a phone the act is one of three icons: its menu spans the header's width, under it (else it ran off the left). */
@media (max-width: 640px) {
  .sf-main-in > .sf-main-acts, .sf-bike { position: static; }
  .sf-bike-menu { left: 12px; right: 12px; top: calc(100% + 6px); width: auto; max-width: none; transform-origin: top center; }
}
.sf-cart-count { position: absolute; top: -8px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--accent); color: #fff; font: 700 12px/20px var(--font-body); text-align: center; }
.sf-cart-count[hidden] { display: none; }
.sf-cart-total { font-weight: 700; color: var(--text); min-width: 4.5em; font-variant-numeric: tabular-nums; }
.sf-cart-total:empty { display: none; }

/* The bar under the header: "Categories", then the search tools. Buttons are the shop's green, as on gxtmoto.bg: a red
   "Categories" and search button beside green buttons made the page read as patchwork (Chapa, 2026-10-16: "шарено"). */
.sf-nav { position: relative; background: var(--nav-bg); color: var(--nav-text); }
.sf-nav-in { display: flex; align-items: stretch; gap: 4px; min-height: 48px; }
.sf-cat-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; margin: 0;
  border: 0; border-radius: 0; background: var(--btn-primary-bg); color: #fff; font: 600 15px/1 var(--font-body); cursor: pointer;
}
.sf-cat-btn .ic { width: 18px; height: 18px; }
.sf-cat-caret { transition: transform var(--t-fast); }
.sf-cat-btn[aria-expanded="true"] .sf-cat-caret { transform: rotate(180deg); }
.sf-cat-btn:hover { filter: brightness(1.06); }
.sf-nav-tools { display: flex; align-items: stretch; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sf-nav-tools::-webkit-scrollbar { display: none; }
.sf-nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--nav-text); text-decoration: none; font-size: 14px; white-space: nowrap; }
.sf-nav-link .ic { width: 18px; height: 18px; opacity: .9; }
.sf-nav-link:hover { background: rgba(255, 255, 255, 0.10); }
.sf-nav-link { transition: background-color var(--t-fast); }
/* The menu's own search: opens the palette (the design system's .pill, on the slate bar). */
.sf-nav-search {
  align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 6px 0 14px; height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--shape-pill); background: rgba(255, 255, 255, 0.08);
  color: var(--nav-text); font: 500 14px/1 var(--font-body); cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.sf-nav-search .ic { width: 16px; height: 16px; }
.sf-nav-search:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.36); }
.sf-nav-search:active { transform: scale(0.97); }
.sf-kbd { font: 500 11px/1.4 var(--font-body); padding: 1px 6px; border-radius: var(--shape-xs); border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--nav-text); opacity: .85; box-shadow: none; }

/* The mega menu: opened under the bar, PE's layout. */
.sf-mm-pop { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 0 0 16px; }
.sf-mm-pop[hidden] { display: none; }
.sf-mm-pop > .sf-wrap > .sf-mm { box-shadow: var(--elev-3); border-radius: 0 0 var(--shape-md) var(--shape-md); }
.sf-mm { display: flex; background: var(--surface); color: var(--text); text-align: left; }
.sf-mm-side { list-style: none; margin: 0; padding: 10px; flex: 0 0 248px; border-right: 1px solid var(--border); }
.sf-mm-side li { margin: 0; }
.sf-mm-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 12px 14px; margin: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--text-muted); font: 400 14px/1.3 var(--font-body); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.sf-mm-tab .ic { width: 16px; height: 16px; opacity: .6; transition: opacity var(--t-fast); }
/* The group showing is green; a pointer over another one only tints it. Square rows: two rounded lit rows side by side
   made a pocket between them (Chapa, 2026-10-16). */
.sf-mm-tab.is-active { background: var(--btn-primary-bg); color: #fff; }
.sf-mm-tab.is-active .ic { opacity: 1; }
@media (hover: hover) { .sf-mm-tab:not(.is-active):hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); } }
/* As tall as the window below the bar allows: a group scrolls only when the window is shorter than its tiles
   ("Части и аксесоари", 27 tiles, scrolled on a 1920x1080 screen under a 720 px cap - Chapa, 2026-10-16). */
.sf-mm-panels { flex: 1 1 auto; min-width: 0; padding: 14px 16px 16px; max-height: calc(100vh - 180px); overflow-y: auto; }
.sf-mm-panel { display: none; }
/* A group's tiles ease in when it is chosen, the menu itself when it opens (OSDS motion: nothing appears by a
   display swap alone - Chapa, 2026-10-16: "имаше плавно преминаване между селектите"). */
.sf-mm-panel.is-active { display: block; animation: sf-mm-in var(--dur-medium) var(--ease-emphasized); }
.sf-mm-pop:not([hidden]) > .sf-wrap > .sf-mm { animation: sf-mm-open var(--dur-medium) var(--ease-emphasized); }
@keyframes sf-mm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sf-mm-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sf-mm-title { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 12px; font-size: 15px; color: var(--text-muted); text-decoration: none; }
.sf-mm-title .ic { width: 15px; height: 15px; }
a.sf-mm-title:hover { color: var(--primary); }
.sf-mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.sf-mm-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 112px; box-sizing: border-box;
  padding: 10px 8px; border: 1px solid var(--border); border-radius: var(--shape-sm); background: var(--surface);
  color: var(--text); text-decoration: none; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sf-mm-tile:hover, .sf-mm-tile:focus-visible { border-color: var(--primary); box-shadow: var(--elev-1); }
.sf-mm-tile.is-text { min-height: 0; justify-content: center; padding: 18px 10px; }
.sf-mm-pic { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; background: var(--tile-bg); border-radius: var(--shape-xs); }
.sf-mm-pic.is-wide { height: 64px; }
.sf-mm-pic img { width: 100%; height: 100%; object-fit: contain; }
.sf-mm-name { font-size: 13px; font-weight: 500; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.sf-mm-tile:hover .sf-mm-name { color: var(--primary); }

/* ── Phone drawer ── */
.sf-drawer { position: fixed; inset: 0; z-index: 200; }
.sf-drawer[hidden] { display: none; }
.sf-drawer-scrim { position: absolute; inset: 0; background: rgba(10, 12, 14, 0.55); }
.sf-drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(420px, 92vw);
  display: flex; flex-direction: column; background: var(--surface); color: var(--text); box-shadow: var(--elev-3);
  animation: sf-drawer-in var(--dur-long) var(--ease-emphasized);
}
.sf-drawer-scrim { animation: sf-fade-in var(--dur-long) var(--ease-emphasized); }
@keyframes sf-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes sf-fade-in { from { opacity: 0; } to { opacity: 1; } }
.sf-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); }
.sf-drawer-head .sf-logo img { height: 40px; }
.sf-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 0 24px; overscroll-behavior: contain; }
.sf-drawer-h { margin: 16px 16px 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.sf-drawer .sf-mm { flex-direction: column; }
.sf-drawer .sf-mm-side { flex: none; border-right: 0; padding: 0 8px; }
.sf-drawer .sf-mm-panels { max-height: none; overflow: visible; padding: 8px 12px 4px; }
.sf-drawer .sf-mm-panel { display: none; }
.sf-drawer .sf-mm-panel.is-active { display: none; }
.sf-drawer .sf-mm-panel.is-open { display: block; animation: none; }
.sf-drawer .sf-mm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-drawer-tools { display: flex; flex-direction: column; padding: 0 8px; }
.sf-drawer-tools .sf-nav-link { color: var(--text); padding: 12px; border-radius: var(--shape-xs); min-height: 44px; box-sizing: border-box; }
.sf-drawer-tools .sf-nav-link:hover { background: var(--surface-container); }
.sf-drawer-contacts { display: flex; flex-direction: column; gap: 10px; margin: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-muted); }
.sf-drawer-contacts .sf-top-item { white-space: normal; }
.sf-drawer-foot { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.sf-drawer .sf-lang-wide { min-height: 44px; box-sizing: border-box; padding: 0 12px; color: var(--text); }
.sf-drawer .sf-lang-wide:hover { color: var(--text); background: var(--surface-container); }
.sf-scheme-wide { width: auto; padding: 0 12px; gap: 8px; }

/* Smooth wheel scrolling (Lenis, the script): its own rules. A panel that scrolls by itself keeps the wheel. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Page bodies ── */
.sf-content { min-height: 50vh; }
.sf-page { padding-top: 28px; padding-bottom: 56px; max-width: 920px; }
.sf-app { padding-top: 20px; padding-bottom: 48px; }
.sf-h1 { margin: 0 0 18px; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; font-weight: 600; color: var(--text); }
.sf-lead { font-size: 17px; color: var(--text-muted); }
.sf-prose { font-size: 16px; line-height: 1.7; color: var(--text); overflow-wrap: break-word; }
.sf-prose h2, .sf-prose h3 { line-height: 1.3; margin: 1.6em 0 .6em; }
.sf-prose p { margin: 0 0 1em; }
.sf-prose a { color: var(--primary); }
.sf-404 { text-align: center; }
/* The page that left the road: a road that stops, a little dust where it ends, the header's rider in the air past it
   (tilted, a slow hop), the 404 faint behind. Transform-only motion; reduced motion keeps the still picture. */
.sf-404-scene { position: relative; width: min(100%, 440px); height: 132px; margin: 28px auto 4px; }
.sf-404-code { position: absolute; right: 2%; bottom: 10px; margin: 0; font-size: 84px; font-weight: 800; line-height: 1; color: var(--accent-text); opacity: .14; }
.sf-404-road { position: absolute; left: 0; bottom: 26px; width: 58%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--btn-primary-bg) 30%); }
.sf-404-dust { position: absolute; left: 58%; bottom: 22px; display: flex; gap: 5px; }
.sf-404-dust i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); opacity: .5; }
.sf-404-dust i:nth-child(2) { opacity: .35; transform: translateY(-3px); } .sf-404-dust i:nth-child(3) { opacity: .2; transform: translateY(-7px); }
.sf-404-scene .sf-moto { left: 60%; bottom: 34px; opacity: 1; color: var(--text); transform: scale(2.2) rotate(-14deg); transform-origin: 0 100%; animation: sf-404-hop 2.8s cubic-bezier(.45, 0, .55, 1) infinite; }
.sf-404-scene .sf-moto-w { animation: sf-404-spin 1.1s linear infinite; }
@keyframes sf-404-hop { 0%, 100% { transform: translateY(0) scale(2.2) rotate(-14deg); } 50% { transform: translateY(-7px) scale(2.2) rotate(-18deg); } }
@keyframes sf-404-spin { to { transform: rotate(360deg); } }
.sf-404-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.sf-404-link { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sf-404-scene .sf-moto, .sf-404-scene .sf-moto-w { animation: none; } }
@media (max-width: 600px) { .sf-404-scene { height: 112px; } .sf-404-code { font-size: 64px; } .sf-404-scene .sf-moto { transform: scale(1.8) rotate(-14deg); animation-name: sf-404-hop-s; } }
@keyframes sf-404-hop-s { 0%, 100% { transform: translateY(0) scale(1.8) rotate(-14deg); } 50% { transform: translateY(-6px) scale(1.8) rotate(-18deg); } }
.sf-404-search { display: flex; justify-content: center; margin: 24px auto; }
.sf-404-search .sf-search { width: 100%; }

/* ── Information pages as documents (inc/doc.php): the title and its date, the text at a reading width, beside it
 *    the page's sections and the other information pages (the design system's legal-page layout). ── */
.sf-doc { display: grid; grid-template-columns: 248px minmax(0, 760px); justify-content: center; column-gap: 56px; padding-top: 32px; padding-bottom: 64px; }
.sf-doc-aside {
  grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--sf-sticky) + 20px); align-self: start; max-height: calc(100vh - var(--sf-sticky) - 40px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 28px; padding: 4px 4px 4px 0; scrollbar-width: thin;
}
.sf-doc-main { grid-column: 2; grid-row: 1; min-width: 0; }
.sf-doc-aside-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; list-style: none;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
summary.sf-doc-aside-h::-webkit-details-marker { display: none; }
.sf-doc-chev { width: 18px; height: 18px; flex: none; transition: transform var(--t-fast); }
.sf-doc-toc-list, .sf-doc-toc-sub, .sf-doc-nav ul { list-style: none; margin: 0; padding: 0; }
.sf-doc-toc.is-aside .sf-doc-toc-list { border-left: 1px solid var(--border-strong); }
.sf-doc-toc a {
  display: block; margin-left: -1px; padding: 6px 12px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4;
  color: var(--text-muted); text-decoration: none; transition: color var(--t-fast), border-color var(--t-fast);
}
.sf-doc-toc-sub a { padding-left: 24px; font-size: 13px; }
.sf-doc-toc a:hover { color: var(--text); }
/* The section being read: a green line and green text - the weight stays, so nothing in the list moves. */
.sf-doc-toc a.is-active { color: var(--primary); border-left-color: var(--primary); }
.sf-doc-nav ul { display: flex; flex-direction: column; gap: 2px; }
.sf-doc-nav a {
  display: block; padding: 8px 12px; border-radius: var(--shape-sm); font-size: 14px; line-height: 1.4; color: var(--text-muted);
  text-decoration: none; transition: color var(--t-fast), background-color var(--t-fast);
}
.sf-doc-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sf-doc-nav a[aria-current="page"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.sf-doc-nav.is-foot, .sf-doc-toc.is-inline { display: none; }
.sf-doc.has-toc .sf-doc-nav.is-foot { display: block; grid-column: 2; grid-row: 2; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-strong); }
.sf-doc.has-toc .sf-doc-nav.is-foot ul { flex-direction: row; flex-wrap: wrap; gap: 4px 6px; }
.sf-doc-h1 { margin-bottom: 8px; }
.sf-doc-meta { margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border-strong); font-size: 13px; color: var(--text-dim); }
.sf-doc-body { font-size: 16px; line-height: 1.75; color: var(--text); overflow-wrap: break-word; }
.sf-doc-body h2 { margin: 44px 0 14px; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--text); scroll-margin-top: calc(var(--sf-sticky) + 20px); }
.sf-doc-body h3 { margin: 30px 0 10px; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--text); scroll-margin-top: calc(var(--sf-sticky) + 20px); }
.sf-doc-body > h2:first-child, .sf-doc-body > h3:first-child { margin-top: 0; }
.sf-doc-body p { margin: 0 0 14px; }
.sf-doc-body strong { font-weight: 600; }
.sf-doc-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.sf-doc-body .is-lead { font-size: 17px; line-height: 1.7; color: var(--text-muted); }
.sf-doc-body ul { margin: 0 0 18px; padding: 0; list-style: none; }
.sf-doc-body ul li { position: relative; margin: 0 0 8px; padding-left: 22px; }
.sf-doc-body ul li::before { content: ''; position: absolute; left: 6px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-soft); }
.sf-doc-body .wp-block-table { margin: 6px 0 22px; overflow-x: auto; }
.sf-doc-body table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.55;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-md);
}
/* WordPress's table block draws every cell's four sides in the text colour and a 3 px line under the head: only
   the line between rows stays. */
.sf-doc-body .wp-block-table thead { border-bottom: 0; }
.sf-doc-body .wp-block-table th, .sf-doc-body .wp-block-table td { padding: 11px 16px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--border); }
.sf-doc-body .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.sf-doc-body th { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.sf-doc-body .is-style-kv td:first-child { width: 36%; color: var(--text-muted); }
/* The delivery page: each fact a card with its icon (the icon is the theme's: inc/doc.php). */
/* A classic theme's group block wraps its blocks in an inner container: the gap belongs to that one. */
.sf-doc-body .atp-facts > .wp-block-group__inner-container { display: grid; gap: 12px; }
.sf-doc-body .atp-fact {
  position: relative; padding: 18px 20px 18px 72px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-lg);
}
.sf-doc-body .atp-fact-ic {
  position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border-radius: 50%;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.sf-doc-body .atp-fact h2 { margin: 0 0 4px; font-size: 16px; line-height: 1.4; }
.sf-doc-body .atp-fact p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* ── Footer ── */
.sf-footer { margin-top: 48px; background: var(--top-bg); color: var(--top-text); font-size: 14px; }
.sf-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-top: 40px; padding-bottom: 28px; }
.sf-foot-h { margin: 0 0 12px; font-weight: 600; font-size: 15px; color: #fff; }
.sf-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-foot-col a { color: var(--top-text); text-decoration: none; }
.sf-foot-col a:hover { color: #fff; text-decoration: underline; }
.sf-foot-brand .sf-logo img { height: 46px; }
html.light .sf-footer .sf-logo-light { display: none; }
html.light .sf-footer .sf-logo-dark { display: block; }
.sf-foot-contact { margin-top: 16px !important; }
.sf-foot-contact li { display: flex; align-items: flex-start; gap: 10px; }
.sf-foot-contact .ic { width: 16px; height: 16px; margin-top: 3px; opacity: .8; }
.sf-foot-social { display: flex; gap: 6px; margin-top: 16px; }
.sf-foot-social .sf-iconbtn { color: var(--top-text); border: 1px solid rgba(255, 255, 255, 0.18); }
.sf-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-top: 16px; padding-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #AAB4BB; font-size: 13px; }
.sf-foot-fun { font-style: italic; color: var(--top-text); }

/* ── Phone and tablet: PE's phone header (burger, logo, cart; the search on its own row) ── */
@media (max-width: 1023px) {
  .sf-top, .sf-nav { display: none; }
  .sf-burger { display: inline-flex; }
  .sf-main-in { flex-wrap: wrap; gap: 6px 10px; min-height: 0; padding-top: 8px; padding-bottom: 10px; }
  .sf-logo img { height: 40px; }
  .sf-main-acts { margin-left: auto; gap: 2px; }
  .sf-head-act { padding: 8px; }
  .sf-head-act-label { display: none; }
  .sf-main-search { order: 3; flex: 1 0 100%; }
  /* Stuck on a phone the same two rows only get lower - every change a size that eases, no row rebuilt. */
  html.is-stuck .sf-main-in { padding-top: 5px; padding-bottom: 6px; }
  html.is-stuck .sf-logo img { height: 30px; }
  html.is-stuck .sf-search { height: 40px; }
  .sf-burger, .sf-head-act { transition: height var(--sf-head-t), padding var(--sf-head-t), width var(--sf-head-t), min-width var(--sf-head-t); }
  html.is-stuck .sf-burger { width: 34px; min-width: 34px; height: 34px; }
  html.is-stuck .sf-head-act { padding: 5px 8px; }
  .sf-search { max-width: none; height: 46px; }
  .sf-search-input { padding-right: 12px; font-size: 16px; }
  .sf-foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .sf-doc { display: block; padding-top: 20px; padding-bottom: 40px; max-width: 760px; }
  .sf-doc-aside { display: none; }
  .sf-doc-toc.is-inline { display: block; margin: 0 0 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-md); }
  .sf-doc-toc.is-inline > summary { margin: 0; padding: 0 16px; min-height: 48px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sf-doc-toc.is-inline[open] > summary .sf-doc-chev { transform: rotate(180deg); }
  .sf-doc-toc.is-inline .sf-doc-toc-list { padding: 0 8px 10px; }
  .sf-doc-toc.is-inline a { margin: 0; padding: 10px 8px; border-left: 0; border-radius: var(--shape-xs); }
  .sf-doc-toc.is-inline .sf-doc-toc-sub a { padding-left: 22px; }
  .sf-doc-nav.is-foot { display: block; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border-strong); }
  .sf-doc-nav.is-foot a { padding: 12px; }
  .sf-doc.has-toc .sf-doc-nav.is-foot ul { flex-direction: column; gap: 2px; }
  .sf-doc-meta { margin-bottom: 20px; padding-bottom: 16px; }
  .sf-doc-body h2 { margin-top: 36px; font-size: 20px; }
  .sf-doc-body .atp-fact { padding: 16px 16px 16px 64px; }
  .sf-doc-body .atp-fact-ic { left: 14px; top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-drawer-panel, .sf-drawer-scrim, .sf-mm-panel.is-active, .sf-mm-pop:not([hidden]) > .sf-wrap > .sf-mm { animation: none; }
  .sf-burger, .sf-head-act, .sf-header > .sf-main { transition: none; }
  .sf-mm-tab, .sf-mm-tab .ic, .sf-doc-toc a, .sf-doc-nav a, .sf-doc-chev { transition: none; }
  html.sf-js .sf-reveal, html.sf-js .sf-reveal:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .sf-hero-tile, .sf-usp-item:hover > .ic { animation: none; }
  .sf-main-in, .sf-logo img, .sf-search { transition: none; }
  html.sf-scheme-anim, html.sf-scheme-anim body, html.sf-scheme-anim .sf-header * { transition: none; }
}

/* ── The catalogue (the plugin's widget) in the shop's colours ──
 * The widget draws inside its own shadow root from --pe-* tokens it sets on :host. A rule of the page on the host
 * element wins over :host, so the theme hands it the storefront's tokens - light and dark - without a widget
 * release. (The widget's remaining fixed colours go when the catalogue is rendered on the server.) */
pe-catalog, pe-carousel, pe-search, pe-vehicle-finder {
  --pe-font: var(--font-body);
  --pe-primary: var(--btn-primary-bg);
  --pe-primary-hover: var(--primary-deep);
  --pe-on-primary: #ffffff;
  --pe-primary-light: color-mix(in srgb, var(--primary) 10%, transparent);
  --pe-primary-text: var(--primary);
  --pe-accent: var(--accent);
  --pe-danger: var(--accent-text);
  --pe-secondary: var(--brand-slate);
  --pe-bg: var(--surface);
  --pe-bg-alt: var(--surface-container-low);
  --pe-bg-card: var(--surface);
  --pe-bg-soft: var(--surface-container-low);
  --pe-border: var(--border);
  --pe-border-strong: var(--border-strong);
  --pe-text: var(--text);
  --pe-text-light: var(--text-muted);
  --pe-text-muted: var(--text-dim);
  --pe-success: var(--primary-soft);
  --pe-shadow-hover: var(--elev-2);
}
html:not(.light) pe-catalog, html:not(.light) pe-carousel, html:not(.light) pe-search, html:not(.light) pe-vehicle-finder {
  --pe-secondary: var(--surface-container-highest);
  --pe-bg-alt: var(--surface-container);
  --pe-text-faint: #6E7A82;
  --pe-blue: #7DB3F0;
  --pe-warning-text: #E0B341;
}

/* ── Fields on a touch screen: 16 px or more ──
   iOS Safari zooms the page into any field whose text is smaller than 16 px when it takes focus, and the zoom pans the
   page: in the filter drawer the make list opened shifted off the screen's left edge (2026-10-16, Chapa on an iPhone:
   OSDS's select filter box is 14 px, the contact form 15 px). Every field the page draws, on a touch screen. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .os-select-search { font-size: 16px; }
}

/* ── Home ── */
.sf-hero { background: var(--nav-bg); color: var(--nav-text); padding: 32px 0 28px; }
html:not(.light) .sf-hero { background: var(--surface-container-high); }
.sf-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text art" "finder finder"; column-gap: 32px; align-items: center; }
.sf-hero-text { grid-area: text; }
.sf-hero-art { grid-area: art; display: flex; gap: 14px; padding: 4px 0 20px; }
.sf-hero-finder { grid-area: finder; }
.sf-hero-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 128px; color: var(--nav-text); text-decoration: none;
  animation: sf-tile-in .7s cubic-bezier(.34, 1.4, .64, 1) both, sf-float 6s ease-in-out .8s infinite;
}
.sf-hero-tile:nth-child(2) { animation-delay: .08s, 1.6s; margin-top: 18px; }
.sf-hero-tile:nth-child(3) { animation-delay: .16s, 2.4s; }
.sf-hero-pic {
  display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; padding: 12px; box-sizing: border-box;
  border-radius: var(--shape-lg); background: var(--tile-bg); box-shadow: var(--elev-2); transition: transform var(--t-base), box-shadow var(--t-base);
}
.sf-hero-pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sf-hero-name { font-size: 13px; line-height: 1.3; text-align: center; opacity: .9; }
.sf-hero-tile:hover .sf-hero-pic { transform: translateY(-4px) scale(1.04); box-shadow: var(--elev-3); }
.sf-hero-tile:hover .sf-hero-name { opacity: 1; text-decoration: underline; }
@keyframes sf-tile-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.sf-hero-h { margin: 0; font-size: clamp(24px, 3.2vw, 34px); font-weight: 600; line-height: 1.2; color: inherit; }
.sf-hero-sub { margin: 6px 0 18px; font-size: 16px; opacity: .9; }
/* No overflow clip: the make / model / year lists open below their fields, past the card's edge. With it (0.1.6 to
   0.1.13) a list showed as a sliver, and the browser scrolled the card's own content to bring the list into view, so
   the fields left the card (2026-10-16). The card's background carries its rounded corners by itself. */
.sf-hero-finder { border-radius: var(--shape-md); box-shadow: var(--elev-2); padding: 14px 4px; }
.sf-sec { padding: 36px 0 0; }
/* What scrolls into view rises into place with a little bounce, the cards of a row one after another (the script,
   22 px, 60 ms apart). Only with a script on the page (html.sf-js), never above the fold's hero. */
html.sf-js .sf-reveal { transition: opacity .6s cubic-bezier(.2, 0, 0, 1), transform .7s cubic-bezier(.34, 1.4, .64, 1); }
html.sf-js .sf-reveal:not(.is-in) { opacity: 0; transform: translateY(22px); }
html.sf-js .sf-reveal.is-settled { transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.sf-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.sf-h2 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; color: var(--text); }
.sf-more { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); text-decoration: none; font-weight: 500; white-space: nowrap; }
.sf-more .ic { width: 16px; height: 16px; }
.sf-more:hover { text-decoration: underline; }
.sf-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sf-cat-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-md); overflow: hidden; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
@media (hover: hover) {
  .sf-cat-card:hover, .sf-usp-item:hover, .sf-promo:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 0 40px rgba(61, 133, 65, 0.12), var(--elev-1); }
  .sf-cat-card:hover .sf-cat-pics img { transform: scale(1.05); }
  .sf-usp-item:hover > .ic { animation: sf-nudge .5s cubic-bezier(.34, 1.4, .64, 1); }
}
.sf-cat-pics img { transition: transform var(--t-base); }
.sf-usp-item, .sf-promo { transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
@keyframes sf-nudge { 0% { transform: none; } 40% { transform: translateY(-4px) scale(1.08); } 100% { transform: none; } }
/* The collage is one height in every card, whatever its pictures (Chapa, 2026-10-16: the titles in a row stood at
   three heights - the pictures' own height grew the box past its ratio). overflow:hidden makes the ratio binding,
   the rows never grow from their content; two pictures fill the height, three put the first one across it. */
.sf-cat-pics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--border); aspect-ratio: 2 / 1.25; overflow: hidden;
}
.sf-cat-pics span { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; background: var(--tile-bg); padding: 10px; }
.sf-cat-pics span:only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.sf-cat-pics span:first-child:nth-last-child(2), .sf-cat-pics span:first-child:nth-last-child(2) + span,
.sf-cat-pics span:first-child:nth-last-child(3) { grid-row: 1 / -1; }
/* The photos are shot on white: on the tile their white turns into the tile (no white box inside a grey one). */
.sf-cat-pics img, .sf-mm-pic img { mix-blend-mode: multiply; }
.sf-cat-pics img { width: 100%; height: 100%; object-fit: contain; }
.sf-cat-body { padding: 14px 16px 16px; }
.sf-cat-name { margin: 0; font-size: 18px; font-weight: 600; }
.sf-cat-name a { color: var(--text); text-decoration: none; }
.sf-cat-name a:hover { color: var(--primary); }
.sf-cat-count { margin: 2px 0 10px; color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.sf-cat-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-cat-subs a { display: inline-block; padding: 5px 10px; border-radius: var(--shape-pill); background: var(--surface-container); color: var(--text-muted); font-size: 13px; text-decoration: none; }
.sf-cat-subs a:hover { background: var(--btn-primary-bg); color: #fff; }
.sf-promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.sf-promo { position: relative; display: block; border-radius: var(--shape-md); overflow: hidden; background: var(--surface); border: 1px solid var(--border); text-decoration: none; }
.sf-promo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.sf-promo-name { display: block; padding: 10px 14px; color: var(--text); font-weight: 600; }
.sf-promo:hover .sf-promo-name { color: var(--primary); }
.sf-usp-sec { padding-bottom: 8px; }
.sf-usp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sf-usp-item { display: flex; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-md); font-size: 14px; color: var(--text-muted); }
.sf-usp-item > .ic { width: 28px; height: 28px; color: var(--primary); }
.sf-usp-item p { margin: 0; }
.sf-usp-h { font-weight: 600; color: var(--text) !important; margin-bottom: 4px !important; }
.sf-usp-item a { color: var(--text-muted); }
@media (max-width: 1023px) {
  .sf-hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "finder"; }
  .sf-hero-art { display: none; }
  .sf-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sf-hero { padding: 20px 0 24px; }
  .sf-hero-finder { padding: 16px 0 18px; }
  /* The heading takes its own line, the link under it ("Пазарувай по" / "категория" broke beside it). */
  .sf-sec-head > .sf-h2 { flex: 1 1 100%; }
  .sf-cat-grid, .sf-usp { grid-template-columns: 1fr; }
}

/* ── Contact page ── */
.sf-ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.sf-ct-facts { list-style: none; margin: 0; padding: 20px; display: flex; flex-direction: column; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-md); }
.sf-ct-facts li { display: flex; gap: 12px; }
.sf-ct-facts .ic { width: 22px; height: 22px; color: var(--primary); margin-top: 2px; }
.sf-ct-facts p { margin: 0; color: var(--text-muted); }
.sf-ct-h { font-weight: 600; color: var(--text) !important; margin-bottom: 2px !important; }
.sf-ct-form { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-md); }
.sf-ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-ct-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-muted); }
.sf-ct-field b { color: var(--accent-text); font-weight: 600; }
.sf-ct-form .input { background: var(--surface-container-low); font-size: 15px; }
.sf-ct-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-muted); }
.sf-ct-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); }
.sf-ct-form .btn { align-self: flex-start; }
.sf-ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sf-ct-note { margin: 0; padding: 12px 14px; border-radius: var(--shape-sm); font-size: 14px; }
.sf-ct-note.is-ok { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--text); }
.sf-ct-note.is-err { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
@media (max-width: 860px) { .sf-ct { grid-template-columns: 1fr; } .sf-ct-row { grid-template-columns: 1fr; } }
/* the vehicle chooser sits on a light card in the hero: its labels are drawn for a light surface */
.sf-hero-finder { background: var(--surface); }

/* ── WooCommerce: cart, checkout, account in the shop's colours (light + dark) ──
 * WooCommerce keeps its own layout styles (columns, the checkout grid); the theme gives its buttons, fields, tables
 * and notices the storefront's tokens. Scoped to its pages' wrapper so nothing else changes. */
.sf-cart .sf-head-act-label { margin-left: 6px; }
.woocommerce { color: var(--text); font-size: 15px; }
.woocommerce a { color: var(--primary); }
.woocommerce h2, .woocommerce h3, .woocommerce-billing-fields h3, .cart_totals h2 { color: var(--text); font-weight: 600; font-size: 20px; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order,
.woocommerce .checkout-button, .woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: var(--btn-primary-bg) !important; color: #fff !important; border: 0 !important; border-radius: var(--shape-sm) !important;
  font: 600 15px/1.2 var(--font-body) !important; padding: 12px 20px !important; text-transform: none !important; letter-spacing: normal !important;
  box-shadow: var(--elev-1); transition: filter var(--t-fast), box-shadow var(--t-fast);
}
.woocommerce .button:hover, .woocommerce #place_order:hover, .woocommerce .checkout-button:hover { filter: brightness(1.08); box-shadow: var(--elev-2); }
.woocommerce .wc-proceed-to-checkout a.checkout-button { font-size: 17px !important; padding: 16px 20px !important; }
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] { background: var(--surface-container-high) !important; color: var(--text-dim) !important; box-shadow: none; }
.woocommerce .coupon .button, .woocommerce button[name="update_cart"] { background: var(--surface-container) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; box-shadow: none; }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce .quantity .qty,
.woocommerce #coupon_code, .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce textarea {
  background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important;
  border-radius: var(--shape-sm) !important; padding: 10px 12px !important; font: 400 15px/1.3 var(--font-body) !important; min-height: 44px; box-sizing: border-box;
}
.woocommerce .quantity .qty { width: 72px; text-align: center; }
.woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus, .woocommerce .quantity .qty:focus { outline: none; border-color: var(--primary) !important; box-shadow: var(--focus-ring); }
.woocommerce form .form-row label { color: var(--text-muted); font-size: 14px; }
.woocommerce form .form-row .required { color: var(--accent-text); }
.woocommerce table.shop_table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-md); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--border) !important; color: var(--text); }
.woocommerce table.shop_table th { font-weight: 600; }
.woocommerce table.shop_table img { background: var(--tile-bg); border-radius: var(--shape-xs); }
.woocommerce a.remove { color: var(--accent-text) !important; }
.woocommerce a.remove:hover { background: var(--accent) !important; color: #fff !important; }
.woocommerce .cart_totals, .woocommerce-checkout-review-order { color: var(--text); }
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message, .woocommerce .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-left: 4px solid var(--primary) !important; border-radius: var(--shape-sm); }
.woocommerce .woocommerce-error { border-left-color: var(--accent) !important; }
.woocommerce .woocommerce-info::before, .woocommerce .woocommerce-message::before { color: var(--primary) !important; }
.woocommerce-checkout #payment, .woocommerce-checkout #payment div.payment_box { background: var(--surface-container-low) !important; color: var(--text); border-radius: var(--shape-md); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--surface-container-low) !important; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--border) !important; }
.woocommerce-checkout #payment label { color: var(--text); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--shape-md); background: var(--surface); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--surface-container); color: var(--primary); }
.woocommerce .select2-container--default .select2-selection--single { display: flex; align-items: center; height: 44px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--shape-sm); }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { flex: 1 1 auto; padding: 0 40px 0 12px; color: var(--text); line-height: 1.3; font-size: 15px; }
/* WooCommerce's searchable select (the 251 countries): the design system's chevron, turned over while open - its own
   arrow is a CSS triangle. */
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 12px; width: 14px; height: 100%; display: grid; place-items: center; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow::after { content: ""; width: 14px; height: 14px; background: var(--text-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform var(--t-base, .2s) cubic-bezier(0.2, 0, 0, 1); }
.woocommerce .select2-container--open .select2-selection--single .select2-selection__arrow::after { transform: rotate(180deg); }
.woocommerce .select2-container--focus .select2-selection--single, .woocommerce .select2-container--open .select2-selection--single { border-color: var(--primary); box-shadow: var(--focus-ring); }
.select2-dropdown { border-radius: var(--shape-sm); box-shadow: var(--elev-2); overflow: hidden; }
.select2-search--dropdown .select2-search__field { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border-strong) !important; border-radius: var(--shape-xs); background: var(--surface); color: var(--text); font: 400 15px var(--font-body); }
.select2-results__option { padding: 8px 12px; font-size: 15px; }
.select2-dropdown { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--btn-primary-bg); }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 180px !important; }
@media (max-width: 640px) { .woocommerce-cart table.cart td.actions .coupon .input-text { width: 100% !important; } }

/* ── Cart and checkout as the shop's own pages (2026-10-16, Chapa's UI/UX pass) ──
 * WooCommerce's table cart and its stacked checkout read as a plugin's: a red "x", a 32 px picture, the goods' sum and
 * the order's both called "Общо", a summary under a half-empty row, the checkout's summary below the whole form. The
 * markup stays WooCommerce's (its scripts, the Econt plugin and every update keep working); the layout is the shop's:
 *   - the cart: each article a row card (picture, name and price, quantity with - and +, its sum, remove), the totals
 *     a card beside them that stays in view; the quantity updates the cart by itself (storefront.js), so "update cart"
 *     goes when the script is there;
 *   - the checkout: the form on the left, the order and the payment beside it, staying in view; on a phone one column;
 *   - fields, selects (the design system's chevron), checkboxes and radios in the shop's look. */
:root { --sf-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4BEC5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
html.light { --sf-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F5B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.woocommerce form .form-row select, .woocommerce-shipping-calculator select {
  -webkit-appearance: none; appearance: none; padding-right: 40px !important;
  background-image: var(--sf-chev) !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 14px !important;
}
.woocommerce input[type="checkbox"], .woocommerce input[type="radio"] { accent-color: var(--primary); width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; cursor: pointer; }
.woocommerce .woocommerce-notices-wrapper:empty { display: none; }

/* the cart */
.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 32px; align-items: start; }
.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > :not(.woocommerce-cart-form):not(.cart-collaterals) { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; min-width: 0; margin: 0; }
.woocommerce-cart .cart-collaterals { grid-column: 2; width: auto; position: sticky; top: calc(var(--sf-sticky) + 16px); }
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: auto; margin: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-md); }
.woocommerce-cart .cart-collaterals .cross-sells { float: none; width: auto; }
.woocommerce-cart .cart_totals h2 { margin: 0 0 12px; font-size: 18px; }
.woocommerce-cart table.cart { display: block; border: 0; background: none; border-radius: 0; overflow: visible; margin: 0; }
.woocommerce-cart table.cart thead { display: none; }
.woocommerce-cart table.cart tbody { display: flex; flex-direction: column; gap: 10px; }
.woocommerce-cart table.cart tr.cart_item {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) auto minmax(96px, auto) 40px;
  grid-template-areas: "pic name qty sub rm" "pic price qty sub rm"; align-items: center; column-gap: 16px; row-gap: 2px;
  padding: 12px 12px 12px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--shape-md);
}
.woocommerce-cart table.cart tr.cart_item > td { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; }
.woocommerce-cart table.cart tr.cart_item > td::before { content: none !important; display: none !important; }
.woocommerce-cart table.cart td.product-thumbnail { grid-area: pic; }
/* The tile is the link's, and the picture melts into it: a picture that multiplies its own background melts into the
   row behind it instead - a white box in the light theme, near-black in the dark one (2026-10-17). */
.woocommerce-cart table.cart td.product-thumbnail a { display: block; width: 80px; height: 80px; padding: 6px; box-sizing: border-box; background: var(--tile-bg); border-radius: var(--shape-sm); }
.woocommerce-cart table.cart td.product-thumbnail img { display: block; width: 100% !important; height: 100%; object-fit: contain; background: none; border-radius: 0; mix-blend-mode: multiply; }
.woocommerce-cart table.cart td.product-name { grid-area: name; align-self: end; min-width: 0; font-weight: 600; line-height: 1.35; }
.woocommerce-cart table.cart td.product-name a { color: var(--text); text-decoration: none; }
.woocommerce-cart table.cart td.product-name a:hover { color: var(--primary); }
.woocommerce-cart table.cart td.product-name dl.variation { display: flex; gap: 4px; margin: 2px 0 0; font-weight: 400; font-size: 13px; color: var(--text-muted); }
.woocommerce-cart table.cart td.product-name dl.variation dt, .woocommerce-cart table.cart td.product-name dl.variation dd { float: none; margin: 0; padding: 0; font-weight: 400; }
.woocommerce-cart table.cart td.product-name dl.variation p { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.woocommerce-cart table.cart td.product-price { grid-area: price; align-self: start; font-size: 13px; color: var(--text-muted); }
.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
.woocommerce-cart table.cart tr.cart_item > td.product-subtotal { text-align: right !important; }
.woocommerce-cart table.cart td.product-subtotal { grid-area: sub; text-align: right; font-weight: 700; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.woocommerce-cart table.cart td.product-subtotal .tax_label { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.woocommerce-cart table.cart td.product-remove { grid-area: rm; justify-self: end; }
/* Remove: a quiet icon button (the red "x" read as an error before anything went wrong); red only under the pointer. */
.woocommerce-cart table.cart a.remove { position: relative; display: grid; place-items: center; width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: 0 !important; color: var(--text-muted) !important; background: none !important; transition: background-color var(--t-fast), color var(--t-fast); }
.woocommerce-cart table.cart a.remove::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E") center / 18px no-repeat; }
.woocommerce-cart table.cart a.remove:hover, .woocommerce-cart table.cart a.remove:focus-visible { color: var(--accent-text) !important; background: color-mix(in srgb, var(--accent) 12%, transparent) !important; }
/* The quantity: - and + beside the number (storefront.js adds them; without the script the number field alone). */
.woocommerce .quantity.sf-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--shape-sm); background: var(--surface); overflow: hidden; }
.woocommerce .quantity.sf-qty .qty { width: 48px !important; min-height: 40px; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; -moz-appearance: textfield; font-weight: 600 !important; }
.woocommerce .quantity.sf-qty .qty::-webkit-outer-spin-button, .woocommerce .quantity.sf-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .quantity.sf-qty:focus-within { border-color: var(--primary); box-shadow: var(--focus-ring); }
.sf-qty-btn { display: grid; place-items: center; width: 40px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; transition: background-color var(--t-fast); }
.sf-qty-btn:hover { background: var(--surface-container); }
.sf-qty-btn:disabled { color: var(--text-dim); cursor: default; background: none; }
.sf-qty-btn svg { width: 16px; height: 16px; }
/* The row under the articles: the promo code; "update cart" goes when the quantity updates the cart by itself. */
.woocommerce-cart table.cart tr:not(.cart_item) { display: block; }
.woocommerce-cart table.cart td.actions { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0 0 !important; border: 0 !important; background: none !important; }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 8px; float: none; margin: 0; }
.woocommerce-cart table.cart td.actions .coupon .button { flex: 0 0 auto; white-space: nowrap; }
html.sf-js .woocommerce-cart button[name="update_cart"] { display: none !important; }
.woocommerce-cart .cart_totals table.shop_table { display: table !important; width: 100%; border: 0; background: none; border-radius: 0; }
.woocommerce-cart .cart_totals table.shop_table tbody { display: table-row-group !important; }
.woocommerce-cart .cart_totals table.shop_table tr { display: table-row !important; }
.woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { display: table-cell !important; background: none !important; }
.woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { padding: 10px 0; background: none; border-top: 1px solid var(--border) !important; vertical-align: top; }
.woocommerce-cart .cart_totals table.shop_table tr:first-child > * { border-top: 0 !important; }
.woocommerce-cart .cart_totals table.shop_table th { width: auto; font-weight: 400; color: var(--text-muted); }
.woocommerce-cart .cart_totals table.shop_table td { text-align: right; }
.woocommerce-cart .cart_totals table.shop_table td::before { content: none !important; }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { font-size: 18px; color: var(--text); font-weight: 700; }
.woocommerce-cart .cart_totals .order-total .includes_tax { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.woocommerce ul#shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce ul#shipping_method li { margin: 0 0 4px; padding: 0; text-indent: 0; }
.woocommerce-cart .woocommerce-shipping-destination { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.woocommerce-cart .shipping-calculator-button { font-size: 13px; }
.woocommerce-cart .shipping-calculator-button::after { display: none; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 16px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; margin: 0; text-align: center; box-sizing: border-box; }

/* the checkout */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto 1fr; gap: 0 40px; align-items: start; }
.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 12px; font-size: 18px; }
.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--sf-sticky) + 16px); }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none; width: auto; }
.woocommerce-checkout #customer_details .col-2 { margin-top: 12px; }
.woocommerce-checkout #customer_details h3 { margin: 0 0 14px; font-size: 18px; }
.woocommerce-checkout #ship-to-different-address label { display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; cursor: pointer; }
.woocommerce-checkout #ship-to-different-address input { margin: 0 10px 0 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table { border: 1px solid var(--border); }
.woocommerce-checkout .woocommerce-checkout-review-order-table th, .woocommerce-checkout .woocommerce-checkout-review-order-table td { padding: 10px 14px !important; vertical-align: top; }
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th { font-size: 13px; color: var(--text-muted); font-weight: 600; background: var(--surface-container-low); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name a { color: var(--text); text-decoration: none; font-weight: 600; }
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation { display: flex; gap: 4px; margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dt, .woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation dd { float: none; margin: 0; padding: 0; font-weight: 400; }
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation p { margin: 0; }
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot th { font-weight: 400; color: var(--text-muted); }
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot td { font-weight: 600; }
.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total th, .woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total td { font-size: 17px; color: var(--text); font-weight: 700; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .includes_tax, .woocommerce-checkout .woocommerce-checkout-review-order-table .tax_label { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.woocommerce-checkout #payment { margin-top: 14px; }
.woocommerce-checkout #payment ul.payment_methods { padding: 14px 16px !important; }
.woocommerce-checkout #payment ul.payment_methods li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 6px 0; }
.woocommerce-checkout #payment ul.payment_methods li > label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 600; cursor: pointer; }
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 22px; width: auto; margin: 0 !important; vertical-align: middle; }
.woocommerce-checkout #payment div.payment_box { flex: 1 0 100%; margin: 8px 0 0 !important; padding: 10px 12px !important; font-size: 14px; }
.woocommerce-checkout #payment div.form-row { padding: 14px 16px !important; }
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row { padding: 0 !important; margin: 0 0 14px; }
.woocommerce-checkout .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: flex-start; gap: 0; font-size: 14px; line-height: 1.45; cursor: pointer; }
.woocommerce-checkout .woocommerce-form__label-for-checkbox input { flex: 0 0 auto; margin-top: 1px; }
.woocommerce-checkout #place_order { float: none; display: block; width: 100%; padding: 15px 20px !important; font-size: 17px !important; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 18px; }

@media (max-width: 999px) {
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-cart .cart-collaterals { grid-column: 1; position: static; margin-top: 20px; }
  .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout form.checkout > #customer_details, .woocommerce-checkout form.checkout > #order_review_heading, .woocommerce-checkout form.checkout > #order_review { grid-column: 1; grid-row: auto; position: static; }
  .woocommerce-checkout form.checkout > #order_review_heading { margin-top: 24px; }
}
@media (max-width: 640px) {
  /* A phone's article card: picture, name and price; under them the quantity, the sum and remove. */
  .woocommerce-cart table.cart tr.cart_item { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "pic name rm" "pic price rm" "qty qty sub"; row-gap: 4px; column-gap: 12px; }
  .woocommerce-cart table.cart td.product-thumbnail a { width: 72px; height: 72px; }
  .woocommerce-cart table.cart td.product-quantity { margin-top: 8px; }
  .woocommerce-cart table.cart td.product-subtotal { margin-top: 8px; align-self: center; }
  .woocommerce-cart table.cart td.product-remove { align-self: start; margin: -6px -6px 0 0; }
  .woocommerce-cart table.cart td.actions .coupon { flex: 1 1 100%; flex-wrap: wrap; }
  .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce-cart table.cart td.actions .coupon .button { flex: 1 1 100%; width: 100% !important; }
  .woocommerce-checkout .woocommerce-checkout-review-order-table .product-total { white-space: normal; }
}