/* ==========================================================================
   BECK distribution

   White and grey surfaces, one deep cyan accent, Inter, 8px and 14px corners.
   The palette was turned from the original near-black scheme to this one on
   02.08.2026 at the owner's request; nothing else about the design moved, so
   every page is still drawn in the same language rather than in one of its
   own.

   Inter and the Tabler icon set are self-hosted; the page loads nothing from
   a third-party CDN.
   ========================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-cyrillic-ext-400.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-cyrillic-400.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-cyrillic-ext-500.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-cyrillic-500.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-cyrillic-ext-600.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-cyrillic-600.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-cyrillic-ext-700.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-cyrillic-700.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/inter-cyrillic-ext-800.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/inter-cyrillic-800.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/inter-latin-ext-800.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/inter-latin-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* White and grey, at the owner's request (02.08.2026). Only the palette
     turned over: the layout, the 8/14px corners, Inter, the motion and every
     component are the ones the site already had, so the accent stays cyan -
     deep enough to read as text on white instead of glowing on black. */
  --bg:          #ffffff;
  --bg2:         #f2f4f7;
  --bg3:         #e7eaef;
  --bg-card:     #ffffff;

  --text:        #12151a;
  --text2:       #4d5663;
  --text3:       #838c99;

  --border:      #e3e7ec;
  --border2:     #c8cfd8;

  --accent:      #007e9e;
  --accent-deep: #0f6379;
  --accent-glow: rgba(0, 126, 158, 0.30);
  --accent-soft: rgba(0, 126, 158, 0.09);
  --accent-line: rgba(0, 126, 158, 0.28);

  --ok:    #1f9d55;
  --warn:  #b26a00;
  --bad:   #d33a3a;
  --ok-soft:   rgba(31, 157, 85, 0.11);
  --warn-soft: rgba(178, 106, 0, 0.11);
  --bad-soft:  rgba(211, 58, 58, 0.10);

  --radius:    8px;
  --radius-lg: 14px;

  --shell: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
/* `display` in a component rule beats the hidden attribute, which is how an
   empty <img hidden> drew a broken-image glyph and a hidden button stayed on
   screen. State this once, for everything. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: 14px; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; }

/* Numeric columns line up; the face stays Inter. */
.tech { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text3);
}

/* The owner's line, on the home hero and in the footer. Stated strongly
   enough to win over `.hero p` and `.footer p`, which set their own colour. */
.slogan, .hero p.slogan, .footer p.slogan { color: var(--accent); font-weight: 600; }
.slogan-lg { margin: 0 0 1rem; font-size: 16px; letter-spacing: 0.2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Icons
   ========================================================================== */

.icon-sprite { display: none; }

.ico {
  width: 1em; height: 1em; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.125em;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes scaleIn  { from { opacity: 0; transform: scale(0.94) } to { opacity: 1; transform: none } }
@keyframes pulse    { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.18) } }

/* ==========================================================================
   Header
   ========================================================================== */

.masthead {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.masthead-row { display: flex; align-items: center; gap: 14px; height: 64px; }

.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; transition: transform .25s; }
.brand:hover { transform: scale(1.03); }
.brand-mark { height: 36px; width: auto; }
/* The mark is the brand at every width. It used to be dropped below 560px in
   favour of the wordmark, which is 147px of bold text on a 390px phone - it
   pushed the language switch and the three buttons onto a second row and the
   cart still ran off the right edge. The word stays in the markup for search
   engines, and the mark's own alt text covers anyone browsing without images,
   so nothing is lost by drawing only the mark. */
.brand-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.searchbar { flex: 1; position: relative; min-width: 0; max-width: 400px; }
.searchbar input {
  width: 100%; height: 38px;
  padding: 0 14px 0 38px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text); font-size: 13px;
  transition: all .25s;
}
.searchbar input::placeholder { color: var(--text3); }
.searchbar input:focus {
  outline: none; border-color: var(--accent); background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.searchbar .glyph {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text3); pointer-events: none; font-size: 17px;
  display: flex;
}

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: var(--radius); overflow: hidden; z-index: 210;
  box-shadow: 0 18px 44px rgba(18, 21, 26, 0.16);
  animation: scaleIn .18s ease;
}
.suggest:empty { display: none; }
.suggest a {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  font-size: 13px; transition: background .2s;
}
.suggest a:last-child { border-bottom: 0; }
.suggest a:hover, .suggest a.active { background: var(--bg3); }
.suggest .s-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .s-price { color: var(--accent); font-weight: 600; }

.masthead-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; min-width: 38px; padding: 0 10px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  color: var(--text2); font-size: 13px; font-weight: 500;
  transition: all .25s;
}
.icon-btn:hover {
  background: var(--bg-card); border-color: var(--accent);
  color: var(--accent); transform: translateY(-1px);
}
.icon-btn .ico { font-size: 17px; }
.icon-btn .label { display: none; }
@media (min-width: 720px) { .icon-btn .label { display: inline; } }

.cart-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-glow);
}
.cart-count[data-count="0"] { display: none; }
.cart-count.bump { animation: pulse .4s ease; }

.lang-switch { display: flex; gap: 6px; }
.lang-switch a {
  padding: 5px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: transparent;
  font-size: 12px; text-transform: uppercase; color: var(--text2);
  transition: all .25s;
}
.lang-switch a:hover { border-color: var(--accent); color: var(--accent); }
.lang-switch a.on {
  background: var(--accent); color: #fff; border-color: transparent;
  font-weight: 600; box-shadow: 0 0 14px var(--accent-glow);
}

/* Category rail */
.catbar { border-bottom: 1px solid var(--border); background: var(--bg); }
.catbar-scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
/* A strip that scrolls sideways says so: it grabs under the pointer and fades
   at the end that still has tabs behind it. Without this the last categories
   were simply unreachable with a mouse. */
[data-drag-scroll].can-scroll { cursor: grab; }
[data-drag-scroll].dragging { cursor: grabbing; user-select: none; }
[data-drag-scroll].can-scroll:not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
[data-drag-scroll].can-scroll:not(.at-start):not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
[data-drag-scroll].can-scroll:not(.at-start).at-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
  mask-image: linear-gradient(to right, transparent, #000 28px);
}
.contact-pair { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.catbar-scroll::-webkit-scrollbar { display: none; }
.catbar a {
  flex-shrink: 0; padding: 13px 18px;
  font-size: 13px; font-weight: 500; color: var(--text2); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all .25s;
}
.catbar a:hover { color: var(--accent); }
.catbar a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* On a phone the brand, search and five actions cannot share one row without
   crushing the search field down to its icon. Give the search its own
   full-width line underneath.
   Placed after `.searchbar { flex: 1 }` on purpose - the shorthand resets
   flex-basis, so an earlier override would be silently cancelled. */
@media (max-width: 719px) {
  /* `padding: 10px 0` used to be written here, which cancelled the 1.5rem
     side padding `.shell` sets: the logo sat against the left edge of the
     screen, the search box ran edge to edge and the cart badge was clipped by
     the right edge. Both sides are restated. */
  .masthead-row { flex-wrap: wrap; height: auto; padding: 10px 1.5rem; row-gap: 9px; gap: 10px; }
  .brand { order: 1; }
  .brand-mark { height: 30px; }
  .masthead-actions { order: 2; margin-left: auto; gap: 6px; }
  .searchbar { order: 3; flex: 1 1 100%; max-width: none; }
  .lang-switch { gap: 4px; }
  .lang-switch a { padding: 5px 8px; font-size: 11px; }
  .icon-btn { padding: 0 8px; }
}

/* Small phones: 24px of padding on each side is a tenth of the screen. */
@media (max-width: 559px) {
  .shell { padding: 0 1rem; }
  .masthead-row { padding: 10px 1rem; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; padding: 0 26px;
  border: 1px solid var(--border2); border-radius: var(--radius);
  background: transparent; color: var(--text);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .25s; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn .ico { font-size: 16px; }

.btn-primary {
  background: var(--accent); border-color: transparent;
  color: #fff; font-weight: 700; letter-spacing: 0.3px;
}
.btn-primary:hover {
  background: var(--accent); color: #fff;
  transform: translateY(-2px); box-shadow: 0 10px 30px var(--accent-glow);
}

.btn-quiet { border-color: transparent; color: var(--text2); }
.btn-quiet:hover { background: var(--bg2); color: var(--text); border-color: var(--border); }

.btn-danger { border-color: rgba(211, 58, 58, 0.4); color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }

.btn-sm { height: 34px; padding: 0 14px; font-size: 12px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 13px; }
.field > label,
.field-label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 500; color: var(--text2);
}

.input, select.input, textarea.input {
  width: 100%; min-height: 42px; padding: 10px 12px;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: all .25s;
}
textarea.input { min-height: 84px; resize: vertical; line-height: 1.55; }
.input:focus {
  outline: none; border-color: var(--accent);
  background: var(--bg-card); box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder { color: var(--text3); }
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text3) 50%),
                    linear-gradient(135deg, var(--text3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.input-mono { font-variant-numeric: tabular-nums; }

.hint { font-size: 12px; color: var(--text3); margin-top: 5px; }

.check { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-row label {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg2); cursor: pointer; font-size: 13px;
  transition: all .25s;
}
.radio-row label:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--text);
}
.radio-row input { accent-color: var(--accent); }

/* ==========================================================================
   Flash messages
   ========================================================================== */

.flashes { margin: 1rem 0; display: grid; gap: 8px; }
.flash {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--bg-card); font-size: 13px;
  animation: fadeInUp .3s ease both;
}
.flash-success { border-left-color: var(--ok); }
.flash-error   { border-left-color: var(--bad); }
.flash-warn    { border-left-color: var(--warn); }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: 1.8rem 0; animation: fadeIn .5s ease both; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.section-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin: 0; }
.section-link {
  font-size: 12px; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 5px;
  transition: transform .25s;
}
.section-link:hover { transform: translateX(3px); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse at top right, rgba(0, 126, 158, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
.hero::before {
  content: ""; position: absolute;
  top: -50%; left: -20%; width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(0, 126, 158, 0.07) 0%, transparent 60%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; padding: 3.5rem 0 2.5rem; max-width: 680px; animation: fadeInUp .6s ease both; }
.hero h1 {
  margin: 12px 0 14px;
  font-size: clamp(28px, 5.2vw, 40px);
  font-weight: 800; line-height: 1.1; letter-spacing: -1.3px;
  background: linear-gradient(135deg, #12151a 0%, #5b6675 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p { margin: 0 0 1.4rem; font-size: 15px; line-height: 1.7; color: var(--text2); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Counted catalogue figures under the hero. */
.plate {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px;
}
.plate-cell {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.2rem; text-align: center;
  transition: all .25s; animation: fadeInUp .5s ease both;
}
.plate-cell:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(18, 21, 26, 0.08); }
.plate-value {
  font-size: 26px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #12151a 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plate-label { margin-top: 5px; font-size: 11px; font-weight: 500; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; }

/* ==========================================================================
   Category tiles
   ========================================================================== */

.cat-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.cat-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 1.1rem 0.5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-align: center;
  transition: all .3s; animation: fadeInUp .4s ease both;
}
.cat-tile::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, var(--accent-soft) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.cat-tile:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(18, 21, 26, 0.10); }
.cat-tile:hover::before { opacity: 1; }
.cat-tile .ct-icon {
  position: relative; font-size: 28px; color: var(--text2);
  transition: all .3s; display: flex;
}
.cat-tile:hover .ct-icon { color: var(--accent); transform: scale(1.18); filter: drop-shadow(0 0 8px var(--accent-glow)); }
.cat-tile .ct-name { position: relative; font-size: 12px; font-weight: 500; color: var(--text2); }
.cat-tile:hover .ct-name { color: var(--text); }
.cat-tile .ct-count { position: relative; font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Product cards
   ========================================================================== */

.prod-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

.prod {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: all .3s; animation: fadeInUp .4s ease both;
}
.prod:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(18, 21, 26, 0.10); }

.prod-shot {
  position: relative; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  display: grid; place-items: center; overflow: hidden;
}
.prod-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, var(--accent-soft) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.prod:hover .prod-shot::after { opacity: 1; }
.prod-shot img { width: 100%; height: 100%; object-fit: contain; padding: 8%; position: relative; z-index: 1; transition: transform .35s; }
.prod:hover .prod-shot img { transform: scale(1.06); }
.prod-shot .noshot { position: relative; z-index: 1; font-size: 38px; color: var(--text3); transition: all .3s; display: flex; }
.prod:hover .prod-shot .noshot { color: var(--accent); transform: scale(1.15); filter: drop-shadow(0 0 10px var(--accent-glow)); }

.prod-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 9px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  font-size: 10px; font-weight: 600; text-transform: uppercase;
}
.prod-oos {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.80);
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text2);
}

.prod-body { padding: 13px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod-name {
  font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.spec-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.spec-chip {
  padding: 2px 7px; border-radius: 4px;
  background: var(--bg2); border: 1px solid var(--border);
  font-size: 10px; color: var(--text2); white-space: nowrap;
}

.prod-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.price-uzs { font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
.price-was { font-size: 11px; color: var(--text3); text-decoration: line-through; margin-left: 5px; }

.stock-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text3); }
.stock-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.stock-dot.low::before { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.stock-dot.out::before { background: var(--text3); box-shadow: none; }

.add-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg2); color: var(--accent); cursor: pointer;
  font-size: 17px; transition: all .25s;
}
.add-btn:hover { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 4px 14px var(--accent-glow); }
.add-btn.done { background: var(--ok); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(31, 157, 85, 0.35); }

/* ==========================================================================
   Catalogue layout
   ========================================================================== */

.catalog { display: grid; gap: 1.4rem; padding: 1.5rem 0 3rem; }
@media (min-width: 900px) { .catalog { grid-template-columns: 236px 1fr; align-items: start; } }

.filters-toggle {
  display: none; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border: 1px solid var(--border2); border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer;
}
.filters-toggle .ico { font-size: 17px; }
@media (max-width: 899px) {
  .filters-toggle { display: flex; }
  #filters-open:checked ~ .filters-toggle { border-color: var(--accent); color: var(--accent); }
  .filters { display: none; }
  #filters-open:checked ~ .filters { display: block; }
}

.filters {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 1.1rem;
}
@media (min-width: 900px) { .filters { position: sticky; top: 80px; } }
.filter-group { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.filter-list { display: grid; gap: 2px; max-height: 210px; overflow-y: auto; }
.filter-list a { padding: 5px 8px; border-radius: 5px; font-size: 13px; color: var(--text2); transition: all .2s; }
.filter-list a:hover { background: var(--bg2); color: var(--text); }
.filter-list a.on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 1.1rem; }
.result-count { font-size: 13px; color: var(--text3); margin-right: auto; font-variant-numeric: tabular-nums; }

.empty {
  padding: 3.5rem 1rem; text-align: center;
  border: 1px dashed var(--border2); border-radius: var(--radius-lg);
}
.empty .ico { font-size: 40px; color: var(--text3); margin: 0 auto 14px; display: block; }
.empty h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.empty p { margin: 0; color: var(--text3); font-size: 13px; }

.pager { display: flex; justify-content: center; gap: 6px; margin-top: 1.8rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px; color: var(--text2); transition: all .25s;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .on { background: var(--accent); border-color: transparent; color: #fff; font-weight: 700; box-shadow: 0 0 14px var(--accent-glow); }
.pager .gap { border: 0; }

/* ==========================================================================
   Product detail
   ========================================================================== */

.crumbs { display: flex; gap: 7px; padding: 1.1rem 0; font-size: 12px; color: var(--text3); flex-wrap: wrap; }
.crumbs a:hover { color: var(--accent); }

/* Phone order is the document order: picture, then name/price/buy, then the
   spec table. Above 860px the same three blocks fall into two columns with
   the buy box spanning both rows on the right. */
.detail { display: grid; gap: 1.6rem; padding-bottom: 3rem; }
@media (min-width: 860px) {
  .detail {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "media buy" "info buy";
    align-items: start;
  }
  .detail-media { grid-area: media; }
  .buybox { grid-area: buy; }
  .detail-info { grid-area: info; }
}

.gallery-main {
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  animation: scaleIn .4s ease both;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.gallery-main .noshot { font-size: 56px; color: var(--text3); display: flex; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumbs button {
  width: 58px; height: 58px; padding: 4px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; overflow: hidden; transition: all .25s;
}
.gallery-thumbs button:hover { border-color: var(--accent); }
.gallery-thumbs button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.buybox {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 1.3rem;
}
@media (min-width: 860px) { .buybox { position: sticky; top: 80px; } }
.buybox h1 { margin: 6px 0 12px; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.3px; }
.buy-price { font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.buy-uzs { font-size: 13px; color: var(--text2); margin-top: 3px; font-variant-numeric: tabular-nums; }

.qty-stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg2); }
.qty-stepper button { width: 40px; height: 42px; background: transparent; border: 0; color: var(--text2); cursor: pointer; font-size: 18px; transition: all .2s; }
.qty-stepper button:hover { background: var(--bg3); color: var(--accent); }
.qty-stepper input { width: 52px; height: 42px; text-align: center; border: 0; background: transparent; font-variant-numeric: tabular-nums; }
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Route-to-the-shop buttons. They wrap on a phone rather than scroll: there
   are four of them and a missed one is a customer who cannot find the door. */
.map-links { display: flex; flex-wrap: wrap; gap: 8px; }
.map-links .btn { flex: 0 1 auto; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th { text-align: left; padding: 10px 12px 10px 0; font-weight: 400; color: var(--text3); width: 45%; }
.spec-table td { padding: 10px 0; font-weight: 500; }

.panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); padding: 1.3rem; }
.panel + .panel { margin-top: 12px; }
.panel h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.prose { color: var(--text2); font-size: 13px; line-height: 1.7; white-space: pre-wrap; }

/* ==========================================================================
   Builder
   ==========================================================================
   A vertical accent rail runs down the left of the slot list. Each slot is a
   node on it: hollow when empty, lit when satisfied, red and broken where a
   conflict is. The rail is the build, and it visibly breaks where the build
   breaks.
   ========================================================================== */

.builder { display: grid; gap: 1.4rem; padding: 1.3rem 0 3rem; }
/* While a pick is in flight. Deliberately faint and with no spinner: the
   round trip is a few tens of milliseconds and anything louder would flash. */
.builder.busy { opacity: 0.6; pointer-events: none; transition: opacity .12s; }
@media (min-width: 980px) { .builder { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.rail { display: grid; gap: 0; }

.rail-row {
  position: relative;
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  padding: 9px 0;
  animation: fadeInUp .4s ease both;
}
.rail-row::before {
  content: ""; position: absolute; left: 17px; top: 0; bottom: 0;
  width: 2px; background: var(--border);
}
.rail-row:first-child::before { top: 50%; }
.rail-row:last-child::before { bottom: 50%; }
.rail-row.filled::before { background: var(--accent-line); }
.rail-row.conflict::before {
  background: repeating-linear-gradient(to bottom, var(--bad) 0 4px, transparent 4px 8px);
}

.rail-node {
  position: relative; z-index: 1;
  width: 36px; height: 36px; margin-top: 3px;
  display: grid; place-items: center;
  border: 2px solid var(--border2); border-radius: 50%;
  background: var(--bg); color: var(--text3); font-size: 17px;
  transition: all .25s;
}
.rail-row.filled .rail-node {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft); box-shadow: 0 0 14px var(--accent-glow);
}
.rail-row.conflict .rail-node { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); box-shadow: 0 0 14px rgba(211, 58, 58, 0.35); }

.rail-slot {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 12px 14px; transition: all .25s;
}
.rail-row.filled .rail-slot { border-color: var(--accent-line); }
.rail-row.conflict .rail-slot { border-color: rgba(211, 58, 58, 0.5); }

.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.rail-name { font-size: 14px; font-weight: 600; }
.rail-req { font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 0.8px; text-transform: uppercase; }

.rail-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rail-pick select { flex: 1; min-width: 160px; }

.rail-chosen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.rail-chosen .rc-price { font-size: 14px; font-weight: 700; color: var(--accent); margin-left: auto; font-variant-numeric: tabular-nums; }

.rail-note { margin-top: 8px; font-size: 12px; color: var(--text3); }
.rail-note a { color: var(--accent); }

.verdict { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
@media (min-width: 980px) { .verdict { position: sticky; top: 80px; } }

.verdict-head { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--bg2); }
.verdict-state {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.verdict-state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.verdict-ok    { color: var(--ok); }
.verdict-ok::before    { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.verdict-error { color: var(--bad); }
.verdict-error::before { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.verdict-warn  { color: var(--warn); }
.verdict-warn::before  { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.verdict-info  { color: var(--text2); }
.verdict-info::before  { background: var(--text3); }
/* Nothing picked yet: an unlit LED, not a green one. */
.verdict-empty { color: var(--text3); }
.verdict-empty::before { background: transparent; box-shadow: inset 0 0 0 1px var(--border2); }

.issues { display: grid; gap: 1px; background: var(--border); }
.issue {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  padding: 12px 1.2rem; background: var(--bg-card); font-size: 13px; line-height: 1.55;
}
.issue-mark { font-size: 15px; line-height: 1.4; display: flex; }
.issue-error .issue-mark { color: var(--bad); }
.issue-warn  .issue-mark { color: var(--warn); }
.issue-info  .issue-mark { color: var(--text3); }
.issue-ok    .issue-mark { color: var(--ok); }

.verdict-foot { padding: 1.2rem; border-top: 1px solid var(--border); }

.readout { display: grid; gap: 7px; margin-bottom: 1rem; }
.readout-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.readout-row .rl { color: var(--text3); }
.readout-row .rv { font-variant-numeric: tabular-nums; }
.readout-total { padding-top: 10px; border-top: 1px solid var(--border); }
.readout-total .rv { font-size: 20px; font-weight: 800; color: var(--accent); }

/* On a phone the verdict used to sit under ten slots, so the one thing that
   answers "does this build work" was 2600px below the part being picked. It
   sticks to the bottom of the screen instead: state, total and the button
   always on, the issue list scrolling inside its own box. The desktop keeps
   its column exactly as it was. */
@media (max-width: 979px) {
  .builder { padding-bottom: 1rem; }
  .verdict {
    position: sticky; bottom: 0; z-index: 30;
    box-shadow: 0 -10px 24px rgba(16, 24, 40, 0.10);
  }
  .verdict-head { padding: 0.7rem 1rem; }
  .issues { max-height: 19vh; overflow-y: auto; }
  .issue { padding: 9px 1rem; font-size: 12.5px; }
  .verdict-foot { padding: 0.8rem 1rem; }
  .readout { margin-bottom: 0.7rem; gap: 5px; }
  /* Draw and PSU are reference numbers, not the answer; the total is. */
  .readout-row { font-size: 12.5px; }
  .readout-total { padding-top: 7px; }
  .readout-total .rv { font-size: 18px; }
  /* The two secondary actions go on one line with the primary above them, so
     the whole bar is three rows tall whatever the build. */
  .verdict-foot .btn-block { padding: 0 14px; }
}

/* ==========================================================================
   Cart & checkout
   ========================================================================== */

.cart-layout { display: grid; gap: 1.4rem; padding: 1.5rem 0 3rem; }
@media (min-width: 880px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; } }

.line {
  display: grid; grid-template-columns: 76px 1fr; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  animation: fadeInUp .3s ease both;
}
.line:last-child { border-bottom: 0; }
.line-shot {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden;
}
.line-shot img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.line-shot .noshot { font-size: 24px; color: var(--accent); display: flex; }
.line-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.line-name { font-size: 14px; font-weight: 600; line-height: 1.4; }
.line-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.line-total { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

.summary { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); padding: 1.3rem; }
@media (min-width: 880px) { .summary { position: sticky; top: 80px; } }
.summary-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; }
.summary-row .sl { color: var(--text2); }
.summary-row .sv { font-variant-numeric: tabular-nums; }
.summary-total { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.summary-total .sv { font-size: 21px; font-weight: 800; color: var(--accent); }

/* ==========================================================================
   Orders
   ========================================================================== */

.order-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 1.1rem 1.2rem; margin-bottom: 10px;
  transition: all .25s; animation: fadeInUp .4s ease both;
}
.order-card:hover { border-color: var(--accent); transform: translateX(3px); }
.order-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.order-id { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-date { font-size: 12px; color: var(--text3); }
.order-items { font-size: 13px; color: var(--text2); line-height: 1.7; }

.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 4px;
  border: 1px solid var(--border2);
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text2);
}
.status-pending, .status-not_paid { border-color: rgba(178, 106, 0, 0.35); color: var(--warn); background: var(--warn-soft); }
.status-paid, .status-shipped     { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.status-completed                 { border-color: rgba(31, 157, 85, 0.35); color: var(--ok); background: var(--ok-soft); }
.status-cancelled                 { border-color: rgba(211, 58, 58, 0.35); color: var(--bad); background: var(--bad-soft); }

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth-wrap { max-width: 410px; margin: 3rem auto; padding: 0 1.5rem; }
.auth-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 1.8rem;
  box-shadow: 0 30px 80px rgba(18, 21, 26, 0.18);
  animation: scaleIn .35s ease both;
}
.auth-card h1 { margin: 6px 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.3px; }
.auth-card .sub { margin: 0 0 1.4rem; font-size: 13px; color: var(--text3); }
.auth-alt { margin-top: 1.2rem; text-align: center; font-size: 13px; color: var(--text3); }
.auth-alt a { color: var(--accent); font-weight: 500; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { border-top: 1px solid var(--border); margin-top: 2rem; padding: 2.2rem 0; background: var(--bg2); }
.footer-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.footer h4 {
  margin: 0 0 13px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent);
}
.footer a, .footer p { display: block; font-size: 12px; color: var(--text2); margin: 0 0 8px; transition: color .25s; }
.footer a:hover { color: var(--accent); }
.footer-legal { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--border); font-size: 11px; color: var(--text3); }

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 90px);
  z-index: 500; padding: 12px 22px;
  background: var(--bg-card); border: 1px solid var(--accent);
  border-radius: var(--radius); font-size: 13px; font-weight: 500;
  box-shadow: 0 12px 34px rgba(18, 21, 26, 0.16), 0 0 20px var(--accent-glow);
  opacity: 0; transition: transform .25s ease, opacity .25s ease;
  pointer-events: none; max-width: calc(100vw - 2rem);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
table.grid th {
  text-align: left; padding: 11px 13px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text3); white-space: nowrap;
}
table.grid td { padding: 11px 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tbody tr { transition: background .2s; }
table.grid tbody tr:hover { background: var(--bg2); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-bar { background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200; }
.admin-bar-row { display: flex; align-items: center; gap: 16px; height: 56px; }
.admin-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--accent);
}
.admin-nav { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a { padding: 7px 12px; border-radius: var(--radius); font-size: 13px; color: var(--text2); white-space: nowrap; transition: all .25s; }
.admin-nav a:hover { background: var(--bg-card); color: var(--text); }
.admin-nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

/* Phone: the nav takes a line of its own and scrolls, the brand gives way
   with an ellipsis, and the two buttons keep only their icons. Before this
   the bar was 536px wide on a 390px screen, so every admin page scrolled
   sideways and the right edge of every table sat off-screen. */
@media (max-width: 899px) {
  .admin-bar-row { flex-wrap: wrap; height: auto; padding-top: 9px; padding-bottom: 9px; gap: 10px; }
  .admin-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-nav { order: 3; flex: 1 1 100%; min-width: 0; }
  .admin-bar-row .btn-label { display: none; }
  .admin-bar-row .btn-sm { padding: 0 10px; }
  .admin-bar-row .lang-switch a { padding: 5px 8px; font-size: 11px; }
}

.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat {
  display: block; color: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 1.2rem;
  transition: all .25s; animation: fadeInUp .4s ease both;
}
a.stat:hover .stat-label { color: var(--accent); }
.stat:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(18, 21, 26, 0.08); }
.stat-value { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 5px; font-size: 11px; font-weight: 500; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; }
.stat.alert .stat-value { color: var(--warn); }
.stat.good .stat-value { color: var(--ok); }

.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 1.1rem; }
.admin-head h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }

.drop-zone {
  border: 1px dashed var(--border2); border-radius: var(--radius-lg);
  padding: 2.2rem 1rem; text-align: center; background: var(--bg2);
  transition: all .25s;
}
.drop-zone .ico { font-size: 40px; color: var(--text3); margin: 0 auto 12px; display: block; transition: all .25s; }
.drop-zone.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone.over .ico { color: var(--accent); filter: drop-shadow(0 0 10px var(--accent-glow)); }

.diff-add    { color: var(--ok); }
.diff-update { color: var(--accent); }
.diff-skip   { color: var(--text3); }
.diff-error  { color: var(--bad); }

.spec-fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem; margin-top: 10px; }
.spec-fieldset legend { padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); }
.spec-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.form-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --- Bulk spec editor -----------------------------------------------------
   A whole builder slot as one table: product per row, spec per column. The
   inputs are deliberately dense - this screen exists to be filled in quickly,
   not admired. */

table.grid.bulk-grid { min-width: 780px; }
table.grid.bulk-grid td { padding: 6px 8px; }
/* `.table-scroll` is the scrollport, so the offset is measured from its own
   top edge - not from the admin bar. Anything else parks the header on top
   of the first row. */
table.grid.bulk-grid th { position: sticky; top: 0; z-index: 5; }

.bulk-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bulk-shot {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text3); font-size: 19px;
}
.bulk-shot img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.bulk-meta { display: block; font-size: 11px; color: var(--text3); }

.bulk-input { min-height: 32px; padding: 4px 8px; font-size: 13px; min-width: 92px; }
select.bulk-input { min-width: 108px; padding-right: 1.8rem; }

/* A cell the name-reader has something to offer for. A dashed edge and the
   value in accent, because a suggestion is not a value until someone accepts
   it - it must not look like saved data. A `select` has no placeholder, so
   its empty option carries the suggested text instead. */
.has-hint .bulk-input:placeholder-shown,

.has-hint select.bulk-input.is-empty {
  border-style: dashed; border-color: var(--accent-line);
}
.bulk-input::placeholder { color: var(--accent); opacity: 0.6; }
.has-hint select.bulk-input.is-empty { color: var(--accent); opacity: 0.85; }
/* Filled by the autofill button but not yet saved. */
.bulk-input.applied { border-color: var(--accent); background: var(--accent-soft); }

.bulk-bar {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem; padding: 0.9rem 1.1rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 -8px 24px rgba(18, 21, 26, 0.10);
}
.bulk-bar .hint { max-width: 68ch; }

/* ==========================================================================
   Import review, archive, batch bar
   ========================================================================== */

/* One sticky bar shape for every screen that acts on a selection. It sits at
   the top rather than the bottom because these tables scroll horizontally as
   well, and a bottom bar disappears under the horizontal scrollbar. */
.sticky-bar {
  position: sticky; top: 56px; z-index: 20;
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin: 0 0 0.9rem; padding: 0.6rem 0.9rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(18, 21, 26, 0.10);
}
.sticky-bar .input { font-size: 13px; }

.import-group {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); margin-bottom: 0.8rem; overflow: hidden;
}
.import-group > summary {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.8rem 1rem; cursor: pointer; font-size: 14px;
  list-style: none; user-select: none;
}
.import-group > summary::-webkit-details-marker { display: none; }
.import-group > summary::before {
  content: "›"; display: inline-block; width: 12px;
  color: var(--text3); transition: transform .2s;
}
.import-group[open] > summary::before { transform: rotate(90deg); }
.import-group > summary:hover { background: var(--bg3); }
.import-group .table-scroll { border: 0; border-top: 1px solid var(--border); border-radius: 0; }

/* Counts on a section header: how many rows are new, changed or broken. */
.tag {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.tag-new { background: rgba(31, 157, 85, 0.12); color: var(--ok); }
.tag-upd { background: rgba(178, 106, 0, 0.12); color: var(--warn); }
.tag-bad { background: rgba(211, 58, 58, 0.12); color: var(--bad); }

table.grid.import-grid td { padding: 5px 7px; vertical-align: top; }
table.grid.import-grid th { position: sticky; top: 0; z-index: 5; }
table.grid.import-grid .input { min-height: 30px; padding: 0.25rem 0.45rem; font-size: 12px; }

/* The action of a row, in one character, so 450 rows stay scannable. It sits
   beside the tick box on one line - the cell is the narrowest in the table and
   would otherwise wrap it underneath. */
table.grid.import-grid td:first-child {
  white-space: nowrap; display: flex; align-items: center; gap: 4px;
}
.row-tag {
  display: inline-block; width: 12px; text-align: center;
  font-weight: 700; font-size: 13px;
}
.row-tag-create { color: var(--ok); }
.row-tag-update { color: var(--warn); }
.row-tag-unchanged { color: var(--text3); }
.row-tag-error, .row-tag-duplicate { color: var(--bad); }

tr.row-unchanged .input { opacity: 0.55; }
tr.row-unchanged:hover .input { opacity: 1; }
tr.row-error td, tr.row-duplicate td { background: rgba(211, 58, 58, 0.05); }
tr.row-archived td { opacity: 0.6; }

.cell-note { font-size: 10px; margin-top: 2px; color: var(--text3); font-variant-numeric: tabular-nums; }
.cell-note.bad { color: var(--bad); }
.cell-note.up { color: var(--bad); }     /* the price went up */
.cell-note.down { color: var(--ok); }    /* the price came down */

/* A cart line the shop can no longer sell. Visible, priced out, and blocking
   checkout until it is removed on purpose. */
.line-blocked { opacity: 0.75; }
.line-blocked .line-name { text-decoration: line-through; }

/* ==========================================================================
   Reduced motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead, .catbar, .footer, .btn, .filters { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Admin: the photo screen
   ========================================================================== */

/* Built to be clicked through quickly: one row per product, the picture it
   has on the left, the six the web offered beside it. Nothing is chosen
   automatically - a wrong photo is worse than none. */
.photo-grid { display: grid; gap: 10px; margin-top: 1rem; }
.photo-card {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.photo-card.done { border-color: var(--ok); }
.photo-current {
  width: 92px; height: 92px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.photo-current img { width: 100%; height: 100%; object-fit: contain; }
.photo-blank { color: var(--text3); font-size: 22px; display: flex; }
.photo-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.photo-name { font-size: 14px; font-weight: 600; color: var(--text); }
.photo-name:hover { color: var(--accent); }
.photo-picks { display: flex; gap: 8px; flex-wrap: wrap; min-height: 68px; align-items: center; }
.photo-pick {
  width: 68px; height: 68px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; overflow: hidden; transition: border-color .15s, transform .15s;
}
.photo-pick img { width: 100%; height: 100%; object-fit: contain; }
.photo-pick:hover { border-color: var(--accent); transform: translateY(-1px); }
.photo-pick.chosen { border-color: var(--ok); border-width: 2px; }
.photo-pick.failed { opacity: 0.35; }
.photo-pick.busy { opacity: 0.5; pointer-events: none; }
.photo-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.photo-query { height: 32px; font-size: 12.5px; flex: 1 1 220px; min-width: 0; }
.photo-actions .btn { cursor: pointer; }

@media (max-width: 719px) {
  .photo-card { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .photo-current { width: 64px; height: 64px; }
  .photo-pick { width: 60px; height: 60px; }
  .photo-query { flex-basis: 100%; }
}

/* The photo a product already has opens full size, because a 92px square is
   not enough to tell a 14400 from a 14400F - which is the whole reason
   nothing is chosen automatically. */
.photo-current img[data-full] { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 23, 28, 0.82);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.lightbox img {
  max-width: min(1100px, 92vw); max-height: 88vh;
  width: auto; height: auto; object-fit: contain;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 20px;
  color: #fff; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
body.no-scroll { overflow: hidden; }

@media (max-width: 719px) {
  .lightbox { padding: 12px; }
  .lightbox img { max-width: 96vw; max-height: 80vh; }
}

/* ==========================================================================
   An order assembled for a client
   ========================================================================== */
/* Admin side: a search list on the left of the parts already picked, and a
   table that re-sorts itself into the shop's order every time one is added. */

/* A grid column is as wide as its widest child unless it is told otherwise,
   and the lines table is 620px wide before it is allowed to scroll inside its
   own box. Without this the whole admin page scrolls sideways on a phone. */
.draft-layout > * { min-width: 0; }

.pick-list { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.pick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px;
  align-items: center; text-align: left; cursor: pointer;
  padding: 8px 11px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-card);
  transition: border-color .18s, background .18s;
}
.pick:hover { border-color: var(--accent); background: var(--accent-soft); }
.pick-name { font-size: 13px; font-weight: 600; color: var(--text); min-width: 0; }
.pick-meta { grid-column: 1; font-size: 11px; color: var(--text3); }
.pick-price {
  grid-column: 2; grid-row: 1 / span 2; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.pick-foot .hint { margin: 0; }

.draft-lines .draft-head td {
  background: var(--bg2); padding: 7px 13px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--accent);
}
.draft-lines tbody tr.draft-head:hover { background: var(--bg2); }
.draft-name { display: block; font-size: 13px; font-weight: 600; max-width: 34ch; }
.draft-lines tr.just-added { animation: draftIn .5s ease both; }
@keyframes draftIn {
  from { background: var(--accent-soft); }
  to   { background: transparent; }
}

/* Three states, one control: so'm, dollars, or both. */
.seg { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg-item { flex: 1 1 0; min-width: 0; }
.seg-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-item span {
  display: block; text-align: center; cursor: pointer;
  padding: 8px 4px; font-size: 12px; font-weight: 600; color: var(--text2);
  border-left: 1px solid var(--border);
}
.seg-item:first-child span { border-left: 0; }
.seg-item input:checked + span { background: var(--accent); color: #fff; }
.seg-item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

/* What the client opens. The parts sit under their category heading in the
   same order the price list prints them. */
.quote-head { margin: 2rem 0 1.2rem; }
.quote-head h1 { margin: 0; font-size: 23px; letter-spacing: -0.025em; }
.quote-cat { margin: 1.1rem 0 0.2rem; }
.quote-cat:first-child { margin-top: 0.4rem; }
.line-price { margin-left: auto; text-align: right; }
.line-price .sub { display: block; font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
/* The unit price is one line, so the second currency sits beside it rather
   than under it - "2 × 3 594 000 so'm  $302.00". */
.line-unit .sub { display: inline; margin-left: 7px; }