/* APE express B2C mockup.
   Layout and sizes measured from dipex.lv (saved page, 2026-11-04, 1440 and 390 px):
   header 68 (pad 10), logo 180x45, search 394x40 + 35 px button, badges 20 px round,
   Katalogs button 60 tall pad 20/60 font 15/700 ls .5 radius 10 margin 15 0,
   info nav 41 tall radius 10 shadow, selector card pad 30/20 radius 10, inputs 39/41,
   slider card radius 10, small banners 150 tall gap 15, popular rows pad 20 h3 18/700 img 95,
   product card 278 wide pad 20 radius 10 (image 155, title 100, qty 24, price 22, Pirkt 41 radius 5),
   group blocks pad 20 radius 10 margin-bottom 30 (title 16/700, links 14 #757575, Visas preces 15/700, img 110),
   makes tabs 20/700, brand tiles 160 pad 10 img 90, footer bg dark pad 40, body 15 px.
   Colours and type are APE express's: orange #EA7800, ink #181818, Syne for headings and buttons, Exo for body. */
:root {
  --orange: #ea7800;
  --orange-700: #c96600;
  --orange-100: #ffe3c4;
  --orange-50: #fff4e8;
  --ink: #181818;
  --ink-70: #333333;
  --muted: #757575;
  --line: #e4e4e4;
  --line-strong: #cfcfcf;
  --paper: #ffffff;
  --page-bg: #e5e5e5;
  --work-bg: #f5f5f5;
  --grey: #f2f2f2;
  --ok: #1e8e3e;
  --ok-50: #e9f6ec;
  --warn: #b45309;
  --warn-50: #fff3e0;
  --danger: #c62828;
  --sale: #ff0000;
  --eu-blue: #003399;
  --r: 10px;        /* cards, bars, buttons (measured 10) */
  --r-btn: 5px;     /* Pirkt / small buttons (measured 5) */
  --r-sm: 4px;      /* inputs (measured 4) */
  --r-xs: 3px;      /* labels (measured 3) */
  --r-pill: 99px;
  --head: "Exo", "Open Sans", Arial, sans-serif;
  --body: "Exo", "Open Sans", Arial, sans-serif;
  --page: 1400px;
  --gutter: 20px;
  --shadow: rgba(32, 33, 36, .28) 0 1px 7px -4px;
  --shadow-soft: rgba(0, 0, 0, .04) 0 3px 9px 0;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page-bg); color: #000; font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.2; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: var(--page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.workarea { background: var(--work-bg); padding-bottom: 30px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card-box { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); }
.card-soft { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow-soft); }

/* Section titles: h2 22.5/500 with 18.7 margins, "Visas" link 15 at right */
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18.7px 0; }
.block-head h2 { font-family: var(--head); font-size: 22.5px; font-weight: 700; line-height: 31px; }
.block-head a { font-size: 15px; padding-right: 17px; white-space: nowrap; }
.widget { margin: 40px 0; }
.widget .block-head { margin: 0 0 25px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 41px; padding: 0 35px; border-radius: var(--r-btn); border: 1px solid transparent; font-family: var(--body); font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-700); }
.btn-grey { background: #c4c4c4; color: #fff; }
.btn-grey:hover { background: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; color: var(--orange); border-color: var(--orange); }
.btn-outline:hover { background: var(--orange); color: #fff; }
.btn-light { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-light:hover { border-color: var(--ink); }
.btn-sm { min-height: 34px; padding: 0 16px; font-size: 13px; }
.btn-block { width: 100%; }
/* The big "Katalogs" style button: 60 tall, pad 20/60, 15/700, tracking .5, radius 10 */
.btn-katalogs { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 20px 60px; border: 0; border-radius: var(--r); background: var(--orange); color: #fff; font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: .5px; line-height: 20px; text-decoration: none !important; }
.btn-katalogs:hover { background: var(--orange-700); }
.btn-katalogs svg { width: 20px; height: 20px; }

/* Forms */
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink-70); }
.input, .select { width: 100%; min-height: 39px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; outline: none; font-size: 14px; }
.input:focus, .select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--orange); flex: none; }
.grid-2 { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }

/* Labels */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--r-xs); font-size: 11px; font-weight: 700; line-height: 17px; text-transform: uppercase; letter-spacing: .03em; }
.badge-tier { background: var(--grey); color: var(--ink); }
.badge-tier.premium { background: var(--ink); color: #fff; }
.badge-tier.optimal { background: var(--orange-100); color: var(--orange-700); }
.badge-ok { background: var(--ok-50); color: var(--ok); text-transform: none; }
.badge-warn { background: var(--warn-50); color: var(--warn); text-transform: none; }
.badge-oe { border: 1px solid var(--line-strong); background: #fff; text-transform: none; }
.sale-label { position: absolute; right: 0; top: 0; background: var(--sale); color: #fff; font-weight: 700; font-size: 15px; padding: 5px 20px; text-transform: uppercase; border-radius: 0 var(--r) 0 0; }
.disc-label { display: inline-block; background: #f15c5c; color: #fff; font-size: 13px; line-height: 18px; padding: 2px 7px 1px; border-radius: 3px; }

/* ===== Desktop header: 68 tall, pad 10 ===== */
.header { background: #fff; padding: 10px 0; }
.header .container { display: flex; align-items: center; min-height: 48px; gap: 0; }
.logo { display: inline-flex; align-items: center; gap: 8px; height: 45px; text-decoration: none !important; flex: none; }
.logo img { height: 45px; width: auto; }
.logo b { font-family: var(--head); font-weight: 800; font-size: 28px; letter-spacing: -.02em; line-height: 1; margin-top: 4px; color: var(--ink); }
.h-mail { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; margin-left: 56px; white-space: nowrap; }
.h-mail svg { width: 22px; height: 22px; color: var(--orange); }
.search { display: flex; width: 394px; height: 40px; margin: 0 28px 0 auto; }
.search input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); outline: none; font-size: 13.3px; }
.search input:focus { border-color: var(--orange); }
.search button { width: 35px; height: 40px; border: 0; background: var(--orange); color: #fff; border-radius: 0 4px 4px 0; display: grid; place-items: center; }
.search button svg { width: 17px; height: 17px; }
.search button:hover { background: var(--orange-700); }
.h-icons { display: flex; align-items: center; gap: 14px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 0; background: none; padding: 0; position: relative; text-decoration: none !important; color: var(--ink); }
.icon-btn svg { width: 25px; height: 25px; }
.icon-btn.garage { width: 38px; }
.icon-btn.garage svg { width: 30px; height: 30px; }
.count { position: absolute; top: -6px; right: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 11px; line-height: 20px; text-align: center; font-weight: 400; }
.count[data-zero] { background: #bdbdbd; }
.langs { display: flex; align-items: center; gap: 6px; margin-left: 24px; font-size: 15px; }
.langs a { padding: 0 2px; }
.langs a[aria-current] { font-weight: 700; color: var(--orange-700); }
.langs .flag { width: 16px; height: 11px; display: inline-block; vertical-align: middle; margin-right: 2px; border-radius: 1px; }
.flag-lv { background: linear-gradient(#9e3039 40%, #fff 40% 60%, #9e3039 60%); }
.flag-lt { background: linear-gradient(#fdb913 33%, #006a44 33% 66%, #c1272d 66%); }
.flag-ee { background: linear-gradient(#0072ce 33%, #000 33% 66%, #fff 66%); }
.flag-ru { background: linear-gradient(#fff 33%, #0039a6 33% 66%, #d52b1e 66%); }
.auth { display: flex; margin-left: 20px; }
.auth a { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border: 1px solid var(--orange); color: var(--orange); font-size: 15px; line-height: 1; white-space: nowrap; text-decoration: none !important; }
.auth a:first-child { border-radius: 5px 0 0 5px; }
.auth a:last-child { border-radius: 0 5px 5px 0; margin-left: -1px; }
.auth a:hover { background: var(--orange); color: #fff; }
.header-m { display: none; }

/* ===== Katalogs row + info nav (desktop) ===== */
.nav-row { display: grid; grid-template-columns: 1fr; gap: 0 30px; margin: 15px 0; padding-top: 0; }
.nav-row .btn-katalogs { width: 100%; }
.infonav { display: none; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); height: 41px; }
.infonav ul { display: flex; justify-content: space-around; height: 41px; }
.infonav a { display: flex; align-items: center; height: 41px; font-family: var(--head); font-size: 15px; font-weight: 700; color: var(--ink-70); white-space: nowrap; }
.infonav li { flex: 1; }
.infonav a { justify-content: center; border-radius: var(--r); }
.infonav a:hover { background: rgba(204, 204, 204, .33); text-decoration: none; }
@media (min-width: 1200px) {
  .nav-row { grid-template-columns: 25% 1fr; align-items: center; }
  .nav-row .btn-katalogs { height: 60px; }
  .infonav { display: block; }
}

/* ===== Mega menu (Katalogs): 380 px list, 50 px rows with 50 px icons, title 22/500 ===== */
.mega { position: fixed; inset: 0; z-index: 60; display: none; }
.mega[data-open] { display: block; }
.mega .veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.mega .panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(400px, 92vw); background: #fff; overflow-y: auto; padding: 10px 10px 24px; }
.mega .ph { display: flex; align-items: center; justify-content: space-between; font-family: var(--head); font-weight: 700; font-size: 22px; line-height: 30px; margin: 0 10px 15px; }
.mega .ph button { border: 0; background: none; font-size: 30px; line-height: 1; padding: 0 4px; color: var(--ink); }
.mega .mgroups li { border-bottom: 1px solid var(--line); }
.mega .mgroups summary { list-style: none; display: flex; align-items: center; gap: 5px; height: 50px; padding: 0 10px; cursor: pointer; font-size: 14px; color: #000; }
.mega .mgroups summary::-webkit-details-marker { display: none; }
.mega .mgroups summary .ic { width: 50px; height: 50px; display: grid; place-items: center; flex: none; }
.mega .mgroups summary svg { width: 30px; height: 30px; color: var(--orange); }
.mega .mgroups summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); margin-left: auto; margin-right: 8px; }
.mega .mgroups details[open] summary { background: var(--orange-50); font-weight: 700; }
.mega .subs { padding: 6px 10px 12px 65px; }
.mega .subs a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-70); }
.mega .subs a.all { font-weight: 700; color: var(--orange-700); }
.mega .extra { padding: 14px 10px 0; }
.mega .extra a { display: block; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
@media (min-width: 1200px) {
  .mega .panel { top: 91px; bottom: auto; left: 50%; transform: translateX(-50%); width: min(var(--page), calc(100vw - 40px)); max-height: calc(100vh - 110px); border-radius: var(--r); display: grid; grid-template-rows: auto 1fr; padding: 10px 10px 20px; }
  .mega .body { display: grid; grid-template-columns: 380px 1fr; min-height: 520px; }
  .mega .mgroups { border-right: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 190px); }
  .mega .mgroups .subs { display: none; }
  .mega .mgroups details[open] summary::after { transform: rotate(-45deg); }
  .mega .right { padding: 0 30px 10px; }
  .mega .right h3 { font-family: var(--head); font-size: 22px; font-weight: 700; line-height: 30px; margin-bottom: 15px; }
  .mega .right ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
  .mega .right ul a { display: flex; align-items: center; height: 30px; font-size: 14px; font-weight: 700; color: var(--ink-70); }
  .mega .right ul a:hover { color: var(--orange-700); }
  .mega .right .all { margin-top: 20px; }
  .mega .extra { display: none; }
}
@media (max-width: 1199px) { .mega .right { display: none; } }

/* ===== First screen: selector 25% + slider 75% ===== */
.first { display: grid; gap: 15px; margin-bottom: 20px; }
@media (min-width: 1200px) { .first { grid-template-columns: 25% 1fr; gap: 0 30px; align-items: stretch; } }
.selector { padding: 30px 20px; }
.selector .lbl { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 700; font-size: 16px; line-height: 24px; margin-bottom: 18px; color: #000; }
.selector .lbl svg { width: 26px; height: 20px; color: var(--orange); }
.selector .platerow { display: grid; grid-template-columns: 1fr 61px; gap: 0 16px; margin-bottom: 10px; }
.plate { display: flex; align-items: stretch; height: 39px; border: 1px solid var(--orange); border-radius: var(--r-sm); background: #fff; overflow: hidden; }
.plate .eu { width: 26px; background: var(--eu-blue); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 3px; font-size: 8px; font-weight: 700; }
.plate .eu::before { content: ""; width: 11px; height: 11px; margin-bottom: auto; margin-top: 4px; border-radius: 50%; border: 1px dotted #ffd700; }
.plate input { border: 0; outline: none; width: 100%; min-width: 0; padding: 9px 6px; font: inherit; font-weight: 700; font-size: 13.3px; line-height: 18.7px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-70); }
.plate.sm { height: auto; border-color: var(--ink); display: inline-flex; font-size: 12px; }
.plate.sm .eu { width: 12px; font-size: 6px; padding-bottom: 1px; }
.plate.sm .eu::before { width: 6px; height: 6px; margin-top: 2px; }
.plate.sm span.num { padding: 1px 6px; line-height: 16px; font-weight: 700; letter-spacing: .06em; }
.selector .go { height: 41px; border: 1px solid var(--orange); border-radius: 3.75px; background: var(--orange); color: #fff; display: grid; place-items: center; padding: 0; }
.selector .go svg { width: 16px; height: 16px; }
.selector .go:hover { background: var(--orange-700); }
.selector .or { text-align: center; color: #b8b9b9; font-size: 15px; line-height: 20px; position: relative; margin: 0 0 15px; height: 11px; }
.selector .or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.selector .or span { background: #fff; padding: 0 8px; position: relative; top: -5px; }
.selector .selects { display: grid; gap: 10px; margin-bottom: 15px; }
.selector .select { min-height: 39px; background-color: var(--grey); border-color: var(--line); font-size: 13.3px; color: var(--ink-70); }
.selector .show { width: 100%; height: 34px; border: 0; border-radius: var(--r-sm); background: #c4c4c4; color: #fff; font-size: 12px; }
.selector .show.on { background: var(--orange); }
.selector .show.on:hover { background: var(--orange-700); }
.selector .hint { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.4; }
.selector .hint a { color: var(--orange-700); font-weight: 600; }
.carknown { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--grey); font-size: 13px; margin-top: 15px; }
.carknown b { font-size: 14px; }
.carknown a.change { color: var(--orange-700); font-weight: 600; }

/* Slider card: radius 10, white, 320 px picture area at desktop, 123 on a phone */
.slider { border-radius: var(--r); background: #fff; overflow: hidden; box-shadow: var(--shadow-soft); display: grid; }
.slide { position: relative; min-height: 247px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; overflow: hidden; }
@media (min-width: 1200px) { .slide { min-height: 320px; padding: 36px 40px; } }
.slide.s1 { background: linear-gradient(110deg, #181818 0%, #262626 52%, var(--orange) 52.2%, #ffa33c 100%); }
.slide.s2 { background: linear-gradient(110deg, var(--orange) 0%, #ff9a2e 48%, #181818 48.2%, #333 100%); min-height: 200px; }
.slide .k { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.slide .t { font-family: var(--head); font-weight: 800; font-size: clamp(28px, 3.4vw, 54px); line-height: 1; margin: 8px 0 10px; }
.slide .d { font-size: 15px; max-width: 460px; opacity: .92; margin: 0; }
.slide .cta { margin-top: 16px; align-self: flex-start; }
.slide .pct { position: absolute; right: 40px; top: 28px; font-family: var(--head); font-weight: 800; font-size: clamp(40px, 6vw, 96px); line-height: 1; color: #fff; }
.slide .strip { position: absolute; left: 0; right: 0; bottom: 0; display: none; grid-template-columns: repeat(4, 1fr); background: rgba(0, 0, 0, .55); }
.slide .strip span { padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-left: 1px solid rgba(255, 255, 255, .25); }
@media (min-width: 1200px) { .slide .strip { display: grid; } .slide.s1 { padding-bottom: 72px; } }
.slide .art { position: absolute; right: -20px; top: -20px; width: 220px; height: 220px; opacity: .16; color: #fff; }
.slider .dots { display: flex; gap: 6px; justify-content: center; padding: 10px; }
.slider .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.slider .dots i.on { background: var(--orange); }

/* Three small banners: 150 tall, 15 gap, radius 10, soft shadow, margin-bottom 20 */
.banners-small { display: grid; gap: 10px; margin-bottom: 20px; }
@media (min-width: 1200px) { .banners-small { grid-template-columns: repeat(3, 1fr); gap: 15px; } }
.sb { position: relative; min-height: 129px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-soft); overflow: hidden; padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; text-decoration: none !important; }
@media (min-width: 1200px) { .sb { min-height: 150px; } }
.sb .k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-700); }
.sb .t { font-family: var(--head); font-weight: 800; font-size: 22px; line-height: 1.1; margin: 4px 0 4px; color: var(--ink); }
.sb .d { font-size: 13px; color: var(--muted); }
.sb svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 90px; height: 90px; color: var(--orange); opacity: .22; }
.sb.dark { background: var(--ink); } .sb.dark .t { color: #fff; } .sb.dark .d { color: rgba(255, 255, 255, .7); } .sb.dark .k { color: #ffb257; }
.sb .sale-tag { position: absolute; right: 18px; top: 16px; background: var(--sale); color: #fff; font-family: var(--head); font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 3px; transform: rotate(-6deg); }

/* Popular categories: 2 columns, rows pad 20, radius 10, soft shadow, mb 20, h3 18/700, img 95 (50 on a phone) */
.catrows { display: grid; gap: 0 30px; }
@media (min-width: 1200px) { .catrows { grid-template-columns: 1fr 1fr; } }
.catrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px; margin-bottom: 20px; min-height: 90px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-soft); text-decoration: none !important; }
@media (min-width: 1200px) { .catrow { min-height: 155px; margin-bottom: 20px; } }
.catrow h3 { font-family: var(--body); font-weight: 700; font-size: 18px; line-height: 22.5px; margin: 18px 0; color: #000; }
.catrow svg { width: 50px; height: 50px; color: var(--orange); flex: none; }
@media (min-width: 1200px) { .catrow svg { width: 95px; height: 95px; } }
.catrow:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .10); }

/* Product carousel: cards 278 wide incl 10 px side gutters, arrows 25 px radius 5 */
.rail-wrap { position: relative; margin: 0 -10px; }
.rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 0 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 278px; padding: 0 10px; scroll-snap-align: start; }
@media (max-width: 599px) { .rail > * { flex-basis: 278px; } }
.rail-btn { position: absolute; top: 50%; margin-top: -12px; width: 25px; height: 25px; border: 0; border-radius: 5px; background: var(--orange); color: #fff; display: none; place-items: center; z-index: 2; box-shadow: var(--shadow); }
.rail-btn svg { width: 14px; height: 14px; }
.rail-btn.prev { left: 0; } .rail-btn.next { right: 0; }
@media (min-width: 1200px) { .rail-btn { display: grid; } }

/* Product card: pad 20, radius 10, shadow; image area 155 (147 picture + 15 gap); brand strip 34 with 100x30 logo;
   title block 100 tall 16/700 #3f3f3f; controls: qty 24 tall, old price 15 grey, current 22 ls -.4, Pirkt 41 radius 5 */
.pcard { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; min-width: 0; min-height: 454px; position: relative; }
.pcard .pimg { position: relative; height: 155px; margin-bottom: 15px; }
.pcard .pimg .frame { height: 147px; aspect-ratio: auto; background: #fff; }
.pcard .brandbar { position: absolute; left: 0; right: 0; top: 0; height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 3px 3px 0; background: rgba(255, 255, 255, .7); z-index: 1; }
.pcard .flag { width: 22px; height: 15px; border-radius: 2px; background: linear-gradient(#000 33%, #d00 33% 66%, #ffcc00 66%); }
.pcard .flag.lv { background: linear-gradient(#9e3039 40%, #fff 40% 60%, #9e3039 60%); }
.pcard .flag.it { background: linear-gradient(90deg, #009246 33%, #fff 33% 66%, #ce2b37 66%); }
.pcard .flag.jp { background: radial-gradient(circle, #bc002d 32%, #fff 34%); border: 1px solid var(--line); }
.pcard .flag.se { background: linear-gradient(#006aa7 40%, #fecc00 40% 60%, #006aa7 60%); }
.pcard .flag.us { background: repeating-linear-gradient(#b22234 0 2px, #fff 2px 4px); }
.pcard .flag.pl { background: linear-gradient(#fff 50%, #dc143c 50%); border: 1px solid var(--line); }
.pcard .flag.fr { background: linear-gradient(90deg, #0055a4 33%, #fff 33% 66%, #ef4135 66%); }
.pcard .flag.gb { background: linear-gradient(#012169, #012169); position: relative; }
.pcard .brand { width: 100px; height: 30px; display: flex; align-items: center; justify-content: flex-end; font-family: var(--head); font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-70); text-align: right; line-height: 1; }
.frame { aspect-ratio: 1; background: var(--grey); border-radius: var(--r-sm); display: grid; place-items: center; position: relative; overflow: hidden; }
.frame svg { width: 58%; height: 58%; color: #c6c6c6; }
.pcard .pimg .frame svg { width: 96px; height: 96px; }
.pcard .ptitle { height: 100px; overflow: hidden; }
.pcard .ptitle a { font-size: 16px; font-weight: 700; line-height: 20px; color: #3f3f3f; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .ptitle .tiers { display: flex; gap: 6px; margin-top: 6px; }
.pcard .ctl { margin-top: 10px; }
.pcard .ctl .row2 { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.qty { display: inline-flex; align-items: center; gap: 4px; height: 24px; }
.qty button { width: 22px; height: 22px; border: 0; border-radius: 2px; background: var(--grey); color: var(--ink-70); font-size: 15px; line-height: 1; padding: 0; }
.qty input { width: 32px; height: 24px; border: 1px solid transparent; border-radius: 2px; text-align: center; outline: none; font-weight: 700; font-size: 13.3px; -moz-appearance: textfield; background: transparent; }
.qty.lg { height: 41px; gap: 6px; } .qty.lg button { width: 38px; height: 38px; font-size: 18px; } .qty.lg input { width: 48px; height: 38px; font-size: 16px; border-color: var(--line-strong); }
.pr { text-align: right; }
.pr .was { display: block; font-size: 15px; line-height: 25px; color: #a5a5a5; text-decoration: line-through; min-height: 25px; }
.pr .now { display: block; font-family: var(--head); font-weight: 700; font-size: 22px; line-height: 20px; letter-spacing: -.4px; color: #000; white-space: nowrap; }
.pr .now small { font-family: var(--body); font-weight: 500; font-size: 11px; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.pcard .sale { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pcard .sale .btn { height: 41px; padding: 0 35px; font-size: 13.3px; border-radius: 5px; }
.stock { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ok); }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.stock.soon { color: var(--warn); }

/* Catalogue group blocks: 3 per row (gap 30), pad 20, radius 10, soft shadow, mb 30, min-height 230;
   title 16/700 ls -.1, list margin 15 0 links 14 #757575 lh 19, "Visas preces" 15/700 #333 pt 4, image 110 bottom-right */
.groups { display: grid; gap: 0 30px; }
@media (min-width: 992px) { .groups { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .groups { grid-template-columns: repeat(3, 1fr); } }
.group { position: relative; padding: 20px; margin-bottom: 30px; min-height: 230px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-soft); }
.group h3 { font-family: var(--body); font-size: 16px; font-weight: 700; line-height: 16px; letter-spacing: -.1px; color: #000; display: inline-block; }
.group ul { margin: 15px 0; }
.group ul li a { font-size: 14px; line-height: 19px; color: var(--muted); display: inline-block; background: #fff; position: relative; z-index: 1; }
.group ul li a:hover { color: var(--orange-700); }
.group .all { display: inline-flex; align-items: center; gap: 4px; padding-top: 4px; font-size: 15px; font-weight: 700; color: var(--ink-70); position: relative; z-index: 1; }
.group .all::after { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--orange); border-top: 2px solid var(--orange); transform: rotate(45deg); margin-left: 2px; }
.group > svg { position: absolute; right: 10px; bottom: 10px; width: 110px; height: 110px; color: var(--orange); opacity: .9; }
@media (max-width: 991px) {
  .group { min-height: 0; padding: 20px; margin-bottom: 15px; }
  .group ul, .group .all { display: none; }
  .group > svg { width: 50px; height: 50px; right: 10px; top: 3px; bottom: auto; }
  .group h3 { line-height: 17px; }
}
.more-wrap { text-align: center; margin: 0 0 30px; }
.more-wrap .btn-katalogs { display: inline-flex; }

/* Makes: centered tabs 20/700 orange, brand tiles 160 wide pad 10 img 90 mb 20 */
.makes { margin: 15px 0 0; }
.makes .tabs { display: flex; justify-content: center; gap: 40px; margin: 15px 0; flex-wrap: wrap; }
@media (max-width: 599px) { .makes .tabs { gap: 16px; } .makes .tabs button { font-size: 17px; padding: 8px 0; } }
.tabs button { border: 0; background: none; padding: 10px 0; font-family: var(--head); font-weight: 700; font-size: 20px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--orange); border-bottom-color: var(--orange); }
.tab-panel[hidden] { display: none; }
.makes ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 10px; margin-bottom: 20px; }
@media (min-width: 700px) { .makes ul { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .makes ul { grid-template-columns: repeat(8, 1fr); } }
.makes li a { display: flex; align-items: center; justify-content: center; height: 113px; margin-bottom: 20px; padding: 10px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-soft); font-family: var(--head); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-70); text-align: center; }
.makes li a span { width: 90px; height: 90px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; padding: 6px; font-size: 13px; line-height: 1.1; }
.makes li a:hover { text-decoration: none; color: var(--orange-700); }
.makes li a:hover span { border-color: var(--orange); }

/* Stores (APE express addition, same card language) */
.stores ul { display: grid; grid-template-columns: 1fr; gap: 15px; }
.stores li { padding: 20px; display: grid; gap: 2px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-soft);  }
.stores li b { font-size: 16px; }
.stores li span { font-size: 13px; color: var(--muted); }
.stores li em { font-style: normal; font-size: 12px; color: var(--ok); font-weight: 600; }
@media (min-width: 700px) { .stores ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .stores ul { grid-template-columns: repeat(5, 1fr); } }

/* Footer: dark bg, pad 40 0, 4 columns, logo 124x30, text 14, big orange button, links 14 */
.footer { background: #292d2e; color: #fff; padding: 40px 0; font-size: 14px; }
.footer .cols { display: grid; grid-template-columns: 1fr; gap: 30px 30px; }
@media (min-width: 1200px) { .footer .cols { grid-template-columns: repeat(4, 1fr); } }
.footer .logo { height: 30px; } .footer .logo img { height: 30px; } .footer .logo b { color: #fff; font-size: 19px; }
.footer .ftext { margin: 14px 0; }
.footer .btn-katalogs { min-height: 59px; }
.footer .fnav li { line-height: 17px; margin-bottom: 16px; }
.footer .fnav li a, .footer .contact li { font-size: 14px; color: #fff; }
.footer .contact { padding-left: 0; }
.footer .contact li { margin-bottom: 14px; line-height: 1.4; }
.footer .contact b { font-weight: 700; }
.footer .pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.footer .pay span { border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.footer .legal { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; color: rgba(255, 255, 255, .6); font-size: 12px; }

/* ===== Phone header (390): 117 tall two rows, shadow; burger + search left, logo centered 125x31, cart right ===== */
@media (max-width: 1199px) {
  .header { display: none; }
  .header-m { display: block; background: #fff; padding: 10px 0; box-shadow: rgba(32, 33, 36, .28) 0 -2px 14px 0; position: relative; z-index: 5; }
  .header-m .row1 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 32px; }
  .header-m .left { display: flex; gap: 8px; align-items: center; }
  .header-m .left button { width: 36px; height: 32px; border: 0; background: none; display: grid; place-items: center; padding: 0; }
  .header-m .left button svg { width: 22px; height: 22px; }
  .header-m .logo { justify-self: center; height: 31px; } .header-m .logo img { height: 31px; } .header-m .logo b { font-size: 20px; }
  .header-m .right { justify-self: end; display: flex; gap: 14px; align-items: center; margin-right: 15px; }
  .header-m .msearch { display: none; margin-top: 10px; }
  .header-m .msearch[data-open] { display: flex; }
  .header-m .msearch .search { width: 100%; margin: 0; }
  .nav-row { margin: 10px 0 0; }
  .nav-row .btn-katalogs { min-height: 48px; padding: 14px 20px; }
}

/* Breadcrumbs */
.crumbs { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; padding: 15px 0 0; }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }

/* Catalogue page: left tree 25% + content */
.catalog { display: grid; gap: 15px; padding: 15px 0 30px; }
@media (min-width: 1200px) { .catalog { grid-template-columns: 25% 1fr; gap: 0 30px; align-items: start; } }
.side { display: none; }
.side[data-open] { display: block; }
@media (min-width: 1200px) { .side { display: block; } }
.tree { padding: 10px 0; }
.tree summary { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; font-size: 14px; font-weight: 700; color: var(--ink-70); cursor: pointer; list-style: none; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary svg { width: 30px; height: 30px; color: var(--orange); flex: none; }
.tree summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin-left: auto; }
.tree details[open] summary::after { transform: rotate(-135deg); }
.tree details[open] summary { color: var(--orange-700); background: var(--orange-50); }
.tree .subs a { display: flex; align-items: center; min-height: 30px; padding: 4px 20px 4px 60px; font-size: 14px; color: var(--muted); }
.tree .subs a[aria-current] { color: var(--orange-700); font-weight: 700; }
.tree .subs a:hover { color: var(--ink); }
.fbox { padding: 20px; margin-top: 15px; }
.fbox h4 { margin: 0 0 12px; font-family: var(--body); font-size: 15px; font-weight: 700; }
.fbox .check { margin-bottom: 8px; }
.fbox .check span.n { margin-left: auto; color: var(--muted); font-size: 12px; }
.carbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 15px 20px;  font-size: 14px; }
.carbar b { font-size: 15px; }
.carbar .spacer { flex: 1; }
.carbar a.change { color: var(--orange-700); font-weight: 600; }
.nocar { display: grid; gap: 10px; padding: 15px 20px;  }
.nocar b { font-size: 15px; }
@media (min-width: 700px) { .nocar { grid-template-columns: 1fr auto; align-items: center; } }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 15px 20px; margin: 15px 0; }
.toolbar h1 { font-family: var(--head); font-size: 22.5px; font-weight: 700; line-height: 31px; flex: 1 1 100%; }
.toolbar .n { font-size: 14px; color: var(--muted); margin-right: auto; }
.toolbar .select { width: auto; min-height: 36px; font-size: 13px; }
.view-switch { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.view-switch button { border: 0; background: #fff; width: 36px; height: 34px; display: grid; place-items: center; color: var(--muted); }
.view-switch button svg { width: 18px; height: 18px; }
.view-switch button[aria-pressed="true"] { background: var(--orange); color: #fff; }
@media (min-width: 700px) { .toolbar h1 { flex: 0 1 auto; margin-right: 12px; } }
.pgrid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 600px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }
.pgrid .pcard { min-height: 0; }
.pgrid[data-view="list"] { grid-template-columns: 1fr; }
.pgrid[data-view="list"] .pcard { display: grid; grid-template-columns: 155px 1fr 238px; gap: 0 20px; align-items: start; }
.pgrid[data-view="list"] .pcard .pimg { margin: 0; }
.pgrid[data-view="list"] .pcard .pimg .frame { height: 155px; background: var(--grey); }
.pgrid[data-view="list"] .pcard .ptitle { height: auto; }
.pgrid[data-view="list"] .pcard .specs { display: grid; }
.pgrid[data-view="list"] .pcard .ctl { grid-column: 3; grid-row: 1; margin: 0; border-left: 1px solid var(--line); padding-left: 20px; display: grid; gap: 10px; }
.pcard .specs { display: none; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: 13px; margin: 10px 0 0; }
.pcard .specs dt { color: var(--muted); } .pcard .specs dd { margin: 0; text-align: right; font-weight: 500; }
@media (max-width: 699px) { .pgrid[data-view="list"] .pcard { grid-template-columns: 110px 1fr; } .pgrid[data-view="list"] .pcard .pimg .frame { height: 110px; } .pgrid[data-view="list"] .pcard .ctl { grid-column: 1 / -1; grid-row: auto; border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0; } }
.empty { padding: 40px 20px; text-align: center; }

/* Product page */
.product { display: grid; gap: 15px; padding: 15px 0 30px; }
@media (min-width: 1200px) { .product { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 0 30px; } }
.pmain { padding: 20px; display: grid; gap: 20px; }
@media (min-width: 700px) { .pmain { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding: 30px; gap: 30px; } }
.gallery .frame { aspect-ratio: 1; background: var(--grey); }
.gallery .frame svg { width: 50%; height: 50%; }
.thumbs { display: flex; gap: 10px; margin-top: 10px; }
.thumbs .frame { width: 64px; aspect-ratio: 1; border: 1px solid var(--line); background: #fff; }
.thumbs .frame[aria-current] { border-color: var(--orange); }
.thumbs .frame svg { width: 60%; height: 60%; }
.pinfo h1 { font-size: 22.5px; line-height: 1.25; font-weight: 700; margin-bottom: 8px; }
.pinfo .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin-bottom: 14px; align-items: center; }
.fits { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ok-50); color: #14532d; font-size: 13px; margin-bottom: 15px; }
.fits svg { width: 18px; height: 18px; flex: none; color: var(--ok); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { font-weight: 400; color: var(--muted); width: 45%; }
.oe-list { display: flex; flex-wrap: wrap; gap: 6px; }
.buybox { padding: 20px; position: sticky; top: 15px; }
.buybox .pr { text-align: left; }
.buybox .pr .now { font-size: 30px; line-height: 1.1; }
.buybox .unit { font-size: 12px; color: var(--muted); margin: 4px 0 14px; }
.buybox .act { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }
.buybox .act .btn { flex: 1; height: 41px; border-radius: 5px; }
.pickup { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; font-size: 13px; }
.pickup .ph { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--grey); font-weight: 700; font-size: 13px; }
.pickup .ph a { color: var(--orange-700); font-weight: 600; }
.pickup table { width: 100%; border-collapse: collapse; }
.pickup td { padding: 7px 12px; border-top: 1px solid var(--line); }
.pickup td:last-child { text-align: right; white-space: nowrap; }
.pickup tr.more { display: none; }
.pickup[data-open] tr.more { display: table-row; }
.delivery { margin-top: 12px; display: grid; gap: 7px; font-size: 13px; }
.delivery li { display: flex; justify-content: space-between; gap: 10px; }
.delivery li span:last-child { font-weight: 600; white-space: nowrap; }
.pblock { padding: 20px; margin-top: 15px; }
.pblock h2 { font-family: var(--head); font-size: 22.5px; font-weight: 700; line-height: 31px; margin-bottom: 15px; }

/* Cart */
.cart { display: grid; gap: 15px; padding: 15px 0 30px; }
@media (min-width: 1200px) { .cart { grid-template-columns: minmax(0, 1fr) 360px; gap: 0 30px; align-items: start; } }
.lines { overflow: hidden; }
.line { display: grid; grid-template-columns: 72px 1fr; gap: 10px 14px; padding: 20px; border-top: 1px solid var(--line); }
.line:first-child { border-top: 0; }
.line .frame { width: 72px; }
.line h3 { font-family: var(--body); font-size: 15px; font-weight: 700; margin: 0 0 2px; color: #3f3f3f; }
.line .meta { font-size: 12px; color: var(--muted); }
.line .ctl { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.line .ctl .pr { margin-left: auto; }
.line .remove { border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; padding: 0; }
@media (min-width: 700px) { .line { grid-template-columns: 72px 1fr auto; } .line .ctl { grid-column: auto; } }
.summary { padding: 20px; }
.summary h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.summary dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 14px; margin: 0 0 12px; }
.summary dd { margin: 0; text-align: right; font-weight: 600; }
.summary .total { border-top: 1px solid var(--line); padding-top: 12px; font-size: 15px; font-weight: 700; }
.summary .total dd { font-family: var(--head); font-size: 22px; font-weight: 800; }
.promo { display: flex; gap: 8px; margin-bottom: 12px; }
.promo .input { flex: 1; }
.summary .btn { height: 41px; border-radius: 5px; }

/* Checkout */
.checkout { display: grid; gap: 15px; padding: 15px 0 30px; }
@media (min-width: 1200px) { .checkout { grid-template-columns: minmax(0, 1fr) 380px; gap: 0 30px; align-items: start; } }
.step { margin-bottom: 15px; }
.step-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; cursor: pointer; }
.step-head .num { width: 28px; height: 28px; border-radius: 50%; background: var(--grey); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.step[data-state="open"] .step-head .num { background: var(--orange); color: #fff; }
.step[data-state="done"] .step-head .num { background: var(--ok); color: #fff; }
.step-head h3 { flex: 1; font-size: 16px; font-weight: 700; }
.step-head .edit { font-size: 13px; color: var(--orange-700); font-weight: 600; display: none; }
.step[data-state="done"] .step-head .edit { display: inline; }
.step-head .sum { font-size: 13px; color: var(--muted); display: none; }
.step[data-state="done"] .step-head .sum { display: block; }
.step-body { padding: 0 20px 20px; display: none; }
.step[data-state="open"] .step-body { display: block; }
.options { display: grid; gap: 8px; }
.option { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; }
.option:has(input:checked) { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); background: var(--orange-50); }
.option input { width: 18px; height: 18px; accent-color: var(--orange); margin: 0; }
.option b { font-size: 14px; }
.option span.d { grid-column: 2; font-size: 12px; color: var(--muted); }
.option .p { font-weight: 700; white-space: nowrap; font-size: 14px; }
.option .sub { grid-column: 2 / -1; display: none; margin-top: 8px; }
.option:has(input:checked) .sub { display: block; }
.banks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .banks { grid-template-columns: repeat(4, 1fr); } }
.bank { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 14px 8px; text-align: center; font-family: var(--head); font-weight: 800; font-size: 14px; cursor: pointer; }
.bank:has(input:checked) { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); background: var(--orange-50); }
.bank input { position: absolute; opacity: 0; }
.mini-lines { display: grid; gap: 10px; margin-bottom: 12px; }
.mini-lines li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.mini-lines .frame { width: 44px; }
.mini-lines b { font-weight: 600; display: block; }
.mini-lines span { color: var(--muted); }
.step .btn { height: 41px; border-radius: 5px; }

/* Thank you */
.thanks { max-width: 720px; margin: 15px auto 30px; padding: 40px 20px; text-align: center; }
.thanks h1 { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.thanks .big { width: 68px; height: 68px; border-radius: 50%; background: var(--ok-50); color: var(--ok); display: grid; place-items: center; margin: 0 auto 16px; }
.thanks .big svg { width: 34px; height: 34px; }
.thanks .order { display: inline-block; font-family: var(--head); font-weight: 800; font-size: 22px; background: var(--grey); padding: 8px 16px; border-radius: var(--r-sm); margin: 4px 0 18px; }
.next { text-align: left; display: grid; gap: 10px; margin: 24px 0; }
.next li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.next .num { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.next b { display: block; }
.next span { font-size: 13px; color: var(--muted); }

/* Toast + cookie */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 5px; font-size: 14px; display: flex; gap: 14px; align-items: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 70; max-width: calc(100vw - 32px); }
.toast[data-show] { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast a { color: #ffb257; font-weight: 700; white-space: nowrap; }
.cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; background: #fff; border-radius: var(--r); padding: 14px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); display: none; gap: 10px; align-items: center; font-size: 13px; }
.cookie[data-show] { display: flex; flex-wrap: wrap; }
.cookie p { margin: 0; flex: 1 1 260px; }
@media (min-width: 900px) { .cookie { left: auto; max-width: 540px; } }

/* ===== Pictures from the reference shop and APE's own photos (2026-11-04) ===== */
.logo img.sq { height: 48px; width: auto; }
.header .logo { height: 48px; }
.header-m .logo img.sq { height: 40px; }
.footer .logo img.sq { height: 44px; background: #fff; border-radius: 4px; padding: 3px; }
.group img.pic { position: absolute; right: 10px; bottom: 10px; width: 110px; height: 110px; object-fit: contain; }
@media (max-width: 991px) { .group img.pic { width: 50px; height: 50px; right: 10px; top: 3px; bottom: auto; } }
.catrow img.pic { width: 50px; height: 50px; object-fit: contain; flex: none; }
@media (min-width: 1200px) { .catrow img.pic { width: 95px; height: 95px; } }
.mega .mgroups summary img.pic { width: 50px; height: 50px; object-fit: contain; }
.tree summary img.pic { width: 30px; height: 30px; object-fit: contain; flex: none; }
.makes li a img { width: 90px; height: 90px; object-fit: contain; }
.makes li a span.txt { width: 90px; height: 90px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; padding: 6px; font-size: 13px; line-height: 1.1; }
.slide.photo { padding: 0; min-height: 0; aspect-ratio: 1650 / 620; display: block; }
.slide.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1199px) { .slide.photo { aspect-ratio: 16 / 7; } .slide.photo img { object-position: 62% 50%; } }
.slider .slide[hidden] { display: none; }
.slider .dots i { cursor: pointer; }
.pcard .wh { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 10px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.pcard .wh b { color: var(--ink); }

/* Slider fills the card next to the selector: slides stretch, photo crops (cover) instead of letterboxing */
.slider { grid-template-rows: minmax(0, 1fr) auto; }
.slider .slide { height: 100%; }
@media (min-width: 1200px) {
  .slide.photo { aspect-ratio: auto; min-height: 420px; }
  .slide.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
}

/* ===== TecDoc pictures, brand logos, attributes (apiprofile, 2026-11-04) ===== */
.frame img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pcard .pimg .frame img { padding: 6px 0 0; }
.pcard .brand img { max-width: 100px; max-height: 30px; width: auto; height: auto; object-fit: contain; }
.pgrid[data-view="list"] .pcard .pimg .frame img { background: var(--grey); }
.gallery .frame img { padding: 10px; }
.thumbs button.frame { border: 1px solid var(--line); background: #fff; padding: 0; cursor: pointer; }
.thumbs button.frame img { padding: 4px; }
.oe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; }
.oe-row b { min-width: 84px; }
.pinfo .ptype { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.pinfo .pdesc { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.line .frame img, .mini-lines .frame img { padding: 2px; }

/* Owner 2026-11-04: body font everywhere, no display face; no coloured strips on boxes */
h1, h2, h3, h4, .btn-katalogs, .block-head h2, .pr .now, .tabs button, .makes li a, .bank, .sb .t, .slide .t, .slide .pct, .thanks .order, .summary .total dd, .mega .ph, .mega .right h3, .pinfo h1, .toolbar h1, .pblock h2 { font-family: var(--body); }
.btn-katalogs { font-weight: 700; letter-spacing: .5px; }
.block-head h2, .pblock h2, .toolbar h1 { font-weight: 500; }
.carknown, .carbar, .nocar, .stores li { border-left: 0; border-top: 0; }
/* Banner: crop to the right part (sign + van), slightly zoomed */
@media (min-width: 1200px) {
  .slide.photo { overflow: hidden; }
  .slide.photo img { object-position: 100% 55%; transform: scale(1.08); transform-origin: 100% 55%; }
}
@media (max-width: 1199px) { .slide.photo img { object-position: 100% 50%; } }
/* Owner 2026-11-04: no capitals-only text anywhere */
.badge, .sale-label, .sb .k, .slide .k, .slide .strip span, .pcard .brand, .makes li a, .footer h4, .disc-label, .infonav a { text-transform: none; letter-spacing: 0; }
/* No grey band under the header: one page background, padding instead of a collapsing margin */
body { background: var(--work-bg); }
.workarea { padding-top: 15px; }
.nav-row { margin-top: 0; }
@media (max-width: 1199px) { .workarea { padding-top: 10px; } .nav-row { margin-top: 0; } }
/* apexpress.lv's own faint part-icon pattern behind the page; cards stay white on top */
body { background: var(--work-bg) url("../img/bg-parts.png") center top / 1280px auto repeat; }
.workarea { background: transparent; }
/* Banner: a dedicated right-half cut of the vans photo, no CSS zoom, van always whole */
.slide.photo img { object-position: 50% 50%; transform: none; }
@media (min-width: 1200px) { .slide.photo img { object-position: 50% 50%; transform: none; } }

/* ===== Product page after the reference shop (measured 2026-11-04): one card, 4 columns, tabs below ===== */
.pd { display: grid; grid-template-columns: 74px minmax(0, 423px) minmax(0, 1fr) 423px; gap: 0 20px; padding: 20px; margin-top: 10px; align-items: start; }
.pd-thumbs { display: flex; flex-direction: column; gap: 10px; }
.pd-thumbs li { width: 74px; height: 74px; border: 1px solid var(--line); border-radius: 3px; background: #fff; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.pd-thumbs li[aria-current] { border-color: var(--orange); }
.pd-thumbs li img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pd-thumbs li svg { width: 40px; height: 40px; color: #c6c6c6; }
.pd-image .frame { aspect-ratio: auto; height: 300px; background: #fff; }
.pd-image .frame img { padding: 0; }
.pd-title { font-size: 22px; font-weight: 700; line-height: 26.4px; letter-spacing: -.6px; color: var(--ink-70); margin: 0 0 25px; }
.pd-fit { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 18px; color: #28a745; margin-bottom: 20px; }
.pd-fit svg { width: 18px; height: 18px; flex: none; }
.pd-fit a { color: var(--orange-700); font-weight: 600; }
.pd-fit-none { color: var(--muted); }
.pd-spec-title { font-size: 15px; font-weight: 700; line-height: 21.4px; color: #000; }
.pd-spec-title .muted { font-weight: 400; }
.pd-spec { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 14px; }
.pd-spec th, .pd-spec td { height: 25px; padding: 0; font-weight: 400; vertical-align: middle; }
.pd-spec th { text-align: left; color: #666767; }
.pd-spec td { text-align: right; color: var(--ink-70); }
.pd-spec-block { padding-bottom: 20px; }
.pd-desc { font-size: 13px; color: var(--muted); margin: 0; }
.pd-brand { display: flex; align-items: center; justify-content: space-between; height: 30px; margin-bottom: 15px; }
.pd-brand-logo img { max-height: 30px; max-width: 120px; width: auto; }
.pd-brand-logo { font-weight: 700; font-size: 14px; }
.pd-stock { margin: 10px 0 20px; display: grid; gap: 10px; }
.pd-stock li { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: -.1px; color: #000; }
.pd-stock li svg { width: 22px; height: 22px; color: #28a745; flex: none; }
.pd-stock li.soon svg { color: var(--warn); }
.pd-pay { border: 1px solid #ccc; border-radius: 10px; padding: 20px; }
.pd-price-old { display: flex; justify-content: flex-end; align-items: center; gap: 5px; min-height: 21px; font-size: 14px; font-weight: 700; color: #bdbdbd; text-decoration: line-through; }
.pd-price { font-size: 26px; font-weight: 700; line-height: 33px; color: #000; }
.pd-unit { font-size: 12px; color: var(--muted); margin: 4px 0 14px; }
.pd-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-act .qty { height: 24px; }
.pd-pirkt { height: 48px; padding: 0 60px; font-size: 17px; font-weight: 400; border-radius: 5px; }
@media (max-width: 1199px) {
  .pd { grid-template-columns: 1fr; }
  .pd-thumbs { flex-direction: row; order: 2; }
  .pd-image { order: 1; } .pd-info { order: 3; } .pd-buy { order: 4; }
}
@media (min-width: 1200px) and (max-width: 1399px) { .pd { grid-template-columns: 74px 320px minmax(0, 1fr) 340px; } }
/* Tabs: 60 px card, links 14/700, pad 19 25, active with orange underline */
.pd-tabs { display: flex; gap: 0; height: 60px; padding: 0 10px; margin: 15px 0; overflow-x: auto; }
.pd-tabs button { border: 0; background: none; height: 60px; padding: 19px 25px; font-size: 14px; font-weight: 700; color: #000; white-space: nowrap; border-bottom: 3px solid transparent; }
.pd-tabs button[aria-selected="true"] { border-bottom-color: var(--orange); color: var(--orange-700); }
.pd-tab { padding: 20px; }
.pd-tab[hidden] { display: none; }
/* Alternatives: wide rows like the reference (picture 220, flag + logo, title, facts, price, Pirkt) */
.pd-alt { display: grid; gap: 15px; }
.alt-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 0 30px; padding: 20px 20px 0; background: #fff; border-radius: 2px; box-shadow: var(--shadow); position: relative; }
.alt-row .pimg { position: relative; height: 150px; }
.alt-row .pimg .frame { height: 150px; aspect-ratio: auto; background: #fff; }
.alt-row .pimg .frame svg { width: 80px; height: 80px; }
.alt-row .brandbar { position: absolute; left: 0; right: 0; top: 0; height: 34px; display: flex; justify-content: space-between; align-items: center; z-index: 1; }
.alt-row .brand { width: 100px; height: 30px; display: flex; justify-content: flex-end; align-items: center; font-weight: 700; font-size: 13px; }
.alt-row .brand img { max-width: 100px; max-height: 30px; }
.alt-row .flag { width: 33px; height: 22px; border-radius: 2px; }
.alt-row h3 { font-size: 18px; font-weight: 400; line-height: 1.3; margin: 0 0 12px; color: var(--ink-70); }
.alt-row h3 a { color: inherit; }
.alt-row dl { margin: 0; font-size: 14px; line-height: 20px; }
.alt-row dl div { display: flex; gap: 4px; }
.alt-row dt { font-weight: 700; color: var(--ink-70); }
.alt-row dt::after { content: ":"; }
.alt-row dd { margin: 0; color: var(--muted); }
.alt-row .buyc { display: grid; justify-items: end; align-content: start; gap: 8px; }
.alt-row .buyc .pr .was { font-size: 14px; }
.alt-row .buyc .pr .now { font-size: 20px; }
.alt-row .buyc .act { display: flex; align-items: center; gap: 10px; }
.alt-row .buyc .btn { height: 48px; padding: 0 30px; font-size: 15px; border-radius: 5px; min-width: 134px; }
.alt-row .strip { grid-column: 1 / -1; margin: 15px -20px 0; padding: 8px 20px; background: #f5f5f5; display: flex; justify-content: flex-end; gap: 20px; font-size: 13px; color: var(--ink-70); }
.alt-row .strip span { display: flex; align-items: center; gap: 5px; }
.alt-row .strip svg { width: 16px; height: 16px; color: #28a745; }
@media (max-width: 899px) { .alt-row { grid-template-columns: 120px minmax(0, 1fr); } .alt-row .pimg, .alt-row .pimg .frame { height: 110px; } .alt-row .buyc { grid-column: 1 / -1; justify-items: start; } .alt-row .buyc .act { width: 100%; justify-content: space-between; } }
/* OEM table */
.pd-oe { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-oe td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pd-oe td:first-child { width: 220px; font-weight: 700; color: var(--ink-70); }
.pd-oe td a { color: var(--orange-700); }
.pd-fit-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-fit-list .btn { height: 40px; padding: 0 20px; background: #e9e9e9; color: var(--ink-70); border-radius: 5px; font-weight: 600; }
.pd-fit-list p { width: 100%; font-size: 14px; color: var(--muted); margin: 0 0 10px; }
#tab-pickup .pickup { max-width: 640px; }
#tab-pickup .delivery { max-width: 640px; }
/* Banner window at the right end of the cut: the whole van is in view, the sign stays on the left */
.slide.photo img { object-position: 100% 50%; }
@media (min-width: 1200px) { .slide.photo img { object-position: 100% 50%; } }
/* Owner's own banner crop (1225x455): shown as given, no further cropping on desktop */
.slide.photo { aspect-ratio: 1225 / 455; }
.slide.photo img { object-fit: cover; object-position: 50% 50%; }
@media (min-width: 1200px) { .slide.photo { min-height: 0; } .slide.photo img { object-position: 50% 50%; } }
@media (max-width: 1199px) { .slide.photo { aspect-ratio: 1225 / 455; } .slide.photo img { object-position: 50% 50%; } }
/* Owner: page background 30 % darker (#f5f5f5 blended 30 % toward black = #ababab) */
:root { --work-bg: #ababab; }
body { background-color: #ababab; }
/* Owner: 20 % lighter again (#ababab blended 20 % toward white = #bcbcbc) */
:root { --work-bg: #bcbcbc; }
body { background-color: #bcbcbc; }
/* Owner: another 20 % lighter (#bcbcbc blended 20 % toward white = #c9c9c9) */
:root { --work-bg: #c9c9c9; }
body { background-color: #c9c9c9; }
/* Owner: 20 % lighter again (#c9c9c9 blended 20 % toward white = #d4d4d4) */
:root { --work-bg: #d4d4d4; }
body { background-color: #d4d4d4; }
/* Owner: 20 % lighter again (#d4d4d4 blended 20 % toward white = #dddddd) */
:root { --work-bg: #dddddd; }
body { background-color: #dddddd; }

/* ===== Owner 2026-11-04: pattern only on the sides, the 1400 px page panel plain (reference: panel #f5f5f5), all pages ===== */
.workarea { padding-top: 0; padding-bottom: 0; }
.workarea > .container { background: #f5f5f5; padding-top: 15px; padding-bottom: 30px; }
.workarea > .container::after { content: ""; display: block; clear: both; }
/* Breadcrumbs readable: 14 px #333, current item bold; tree group rows #333 bold */
.crumbs { font-size: 14px; color: #333; line-height: 20px; padding: 10px 0 0; }
.crumbs a { color: #333; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li:last-child { font-weight: 700; }
.crumbs li + li::before { color: #999; }
.tree summary { color: #333; font-weight: 700; }

/* ===== Car finder: plate / VIN switch, status, candidates; fitment; replacements (2026-11-04) ===== */
.selector .lbl { justify-content: space-between; }
.modeswitch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.modeswitch .on { color: var(--ink); }
.switch { position: relative; width: 44px; height: 24px; border: 0; border-radius: 99px; background: #c4c4c4; padding: 0; cursor: pointer; transition: background .15s; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s; }
.switch[aria-checked="true"] { background: var(--orange); }
.switch[aria-checked="true"] .knob { left: 22px; }
.input.vin { height: 39px; min-height: 0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-color: var(--orange); }
.finder-status { font-size: 13px; color: var(--ink-70); margin: 0 0 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--grey); }
.finder-status.err { background: #fdecec; color: #8a1c1c; }
.finder-status.ok { background: var(--ok-50); color: #14532d; }
.finder-cands { margin: 0 0 12px; }
.finder-cands .title { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.finder-cands label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px; font-size: 13px; cursor: pointer; background: #fff; }
.finder-cands label:has(input:checked) { border-color: var(--orange); background: var(--orange-50); }
.finder-cands input { accent-color: var(--orange); }
.finder-cands .more { max-height: 220px; overflow-y: auto; }
.badge-fit { background: var(--ok-50); color: #14532d; text-transform: none; }
.pcard[data-fit="1"] { box-shadow: 0 0 0 1px #28a745, var(--shadow); }
.alt-status { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.alt-other h3, .alt-same h3 { font-size: 15px; font-weight: 700; margin: 20px 0 10px; }
.alt-compact { display: grid; gap: 6px; }
.alt-compact li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 6px 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); }
.alt-compact li .frame { width: 44px; height: 44px; aspect-ratio: auto; }
.alt-compact li b { font-weight: 700; }
.alt-compact li span.t { color: var(--muted); }
.alt-compact li em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Info nav as tall as the Katalogs button (60 px) */
@media (min-width: 1200px) { .infonav, .infonav ul, .infonav a { height: 60px; } }

/* Header without the e-mail: logo | search | icons | languages | login */
@media (min-width: 900px) { .header .container { grid-template-columns: auto 1fr auto auto auto; } .search { margin-left: auto; } }

/* Right column of the first screen: short photo slider + two promo banners under it (3-banner row removed) */
.first { align-items: stretch; }
.first-right { display: grid; grid-template-rows: auto minmax(150px, 1fr); gap: 15px; }
.slider { grid-template-rows: auto auto; }
.slider .slide { height: auto; }
.slider .slide.photo, .slider .slide.s1, .slider .slide.s2 { height: 220px; min-height: 0; aspect-ratio: auto; padding: 0; }
.slider .slide.s1, .slider .slide.s2 { padding: 22px 28px; }
.slider .slide.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.slider .dots { padding: 8px; }
.banners-two { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.banners-two .sb { min-height: 150px; height: 100%; }
@media (max-width: 1199px) { .slider .slide.photo { height: auto; aspect-ratio: 1225 / 455; } .banners-two { grid-template-columns: 1fr; } }
@media (min-width: 1200px) { .slide .strip { display: none; } .slide .pct { font-size: 48px; top: 18px; right: 28px; } .slide .t { font-size: 30px; } }
/* Panorama banner (3000x454) shown whole: height follows its ratio, no crop */
.slider .slide.photo { height: auto; aspect-ratio: 3000 / 454; }
.slider .slide.photo img { object-fit: cover; object-position: 50% 50%; }
@media (max-width: 1199px) { .slider .slide.photo { aspect-ratio: 3000 / 454; } }
/* Panorama at the previous 220 px height, sides cropped (cover, centred) */
.slider .slide.photo { height: 220px; aspect-ratio: auto; }
.slider .slide.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 1199px) { .slider .slide.photo { height: auto; aspect-ratio: 16 / 7; } }
/* Top banner is a single picture, no slides, no dots */
.slider.photo-only { display: block; height: 220px; overflow: hidden; border-radius: var(--r); }
.slider.photo-only img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
@media (max-width: 1199px) { .slider.photo-only { height: auto; aspect-ratio: 16 / 7; } }
/* Product page car line: chip on the baseline, verdict on its own line */
.pd-fit .pd-fit-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pd-fit .pd-fit-car { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pd-fit .pd-fit-plate .plate.sm, .pd-fit .pd-fit-plate .badge { vertical-align: middle; }
.pd-fit .pd-fit-verdict { font-weight: 600; }
.pd-fit.nofit { color: var(--warn); }
.pd-fit.nofit svg { color: var(--warn); }