/* ==========================================================================
   Design A — „Aurora“ (owner 2026-10-27: „A მომწონს … შიდა გვერდებიც მოარგე ამ დიზაინს“; docs/design/home-concepts)
   A layer over site.css (loaded right after it on every public page): light glass header, a living colour mesh behind the hero,
   the orange → pink action gradient (every primary button, „+ განცხადება“ = the search button), violet as the second accent,
   rounder cards, a floating dark tab bar on phones and a press effect on everything that can be pressed.
   The stores (assets/store.css) were its first pages.
   ========================================================================== */

:root {
  --accent: #ff6a13;
  --accent-600: #e8590c;
  --pink: #ff3d6e;
  --violet: #7c3aed;
  --violet-50: #f2efff;
  --teal: #06b6d4;
  --ink: #0d1324;
  --grad: linear-gradient(135deg, #ff6a13, #ff3d6e);
  --bg: #f6f7fb;
  --line: #e6e9f2;
  --line-2: #d5dbe7;
  --text: #0d1324;
  --text-2: #4a5670;
  --muted: #5d6981;   /* WCAG AA 4.5:1 on white and on --bg (axe audit 2026-10-30: #74809a was 3.7–3.96) */
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow: 0 6px 20px -8px rgba(40, 30, 90, .18);
  --shadow-lg: 0 24px 48px -24px rgba(40, 30, 90, .4);
}
body { background: var(--bg); }
a { color: var(--violet); }   /* text links: the second accent (orange is for actions) */
.link-btn { color: var(--violet); }
:focus-visible { outline: 3px solid rgba(124, 58, 237, .45); outline-offset: 2px; }

/* ---------- buttons: the action gradient, a lift on hover, a press on touch / click ---------- */
.btn { border-radius: 999px; font-weight: 700; transition: transform .14s ease, box-shadow .2s ease, filter .2s ease, background .15s; }
.btn-primary, .btn:not(.btn-ghost):not(.btn-dark):not(.btn-light) { background: var(--grad); box-shadow: 0 12px 26px -14px var(--accent); }
.btn-dark { background: var(--ink); box-shadow: none; }
.btn-ghost { background: #fff; border-color: var(--line-2); }
.btn-sm { border-radius: 999px; }
.btn-lg { border-radius: 18px; }
@media (hover: hover) {
  .btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .btn-ghost:hover { filter: none; background: var(--soft); }
}
.btn:active, .chip:active, .icon-btn:active, .quick-chip:active, .finder-tab:active, .link-btn:active, .header-sub a:active, .mega-btn:active,
.header-account:active, .locale-menu > summary:active, .garage-pick:active, .cur-switch button:active, .carousel-btn:active { transform: scale(.94); filter: brightness(.95); }
.card, .cat-tile, .ct-item, .mt, .shop-tiles li, .offer, .acc-tile, .store-tile { transition: transform .16s ease, box-shadow .2s ease, border-color .2s; }
a.card:active, .ct-head:active, .mt-head:active, .acc-tile:active, .sticker-tile:active { transform: scale(.97); }
.chip, .icon-btn, .quick-chip, .link-btn, .finder-tab, .header-sub a { transition: transform .14s ease, background .15s, color .15s; -webkit-tap-highlight-color: transparent; }

/* ---------- header: light glass ---------- */
.site-header { background: rgba(255, 255, 255, .8); color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, .7);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 1px 0 var(--line); }
.brand { color: var(--text); }
.brand-logo { box-shadow: 0 8px 18px -10px var(--violet); }
.brand-name i { color: var(--muted); }
.header-search input { background: #fff; color: var(--text); border: 1.5px solid var(--line); border-radius: 999px; }
.header-search input::placeholder { color: var(--muted); }
.header-search input:focus { background: #fff; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); }
.header-search .ic { color: var(--violet); }
.header-icon { color: var(--text); }
.header-add { background: var(--grad); height: 42px; padding: 0 18px; box-shadow: 0 12px 26px -14px var(--accent); }
.locale-menu > summary, .header-account { color: var(--text); border: 1px solid var(--line); background: #fff; border-radius: 999px; }
.locale-menu > summary:hover, .locale-menu[open] > summary, .header-account:hover { background: var(--soft); }
.locale-code { background: var(--ink); }
.header-sub { background: transparent; border-top: 1px solid var(--line); }
.header-sub > .wrap { height: 46px; gap: 4px; overflow: visible; }
.header-sub a, .mega-btn { height: 34px; padding: 0 14px; border-radius: 999px; color: var(--text-2); font-weight: 600; }
.header-sub a:hover, .mega-btn:hover { color: var(--text); background: var(--soft); }
.header-sub a[aria-current] { color: #fff; background: var(--ink); box-shadow: none; border-radius: 999px; }
.header-sub-new { background: var(--violet-50); color: var(--violet); }
.offline-banner { top: var(--header-h); }

/* the catalogue menu: every category with its subcategories (lib/navtree.php nav_mega_html — a <details>, no JS needed) */
.mega { flex: none; }
.mega-btn { display: inline-flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; font-size: 14px; background: var(--ink); color: #fff !important; }
.mega-btn::-webkit-details-marker { display: none; }
.mega-btn:hover { background: #24304a !important; }
.mega[open] .mega-btn { background: var(--violet) !important; }
.mega-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; max-height: calc(100vh - var(--header-h) - 20px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(40, 30, 90, .45); }
.mega:not([open]) .mega-panel { display: none; }
.header-sub .mega-panel .wrap { display: block; height: auto; overflow: visible; padding-top: 22px; padding-bottom: 22px; }
.mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 24px; }
.mega-cat { min-width: 0; }
.mega-head { display: flex !important; align-items: center; gap: 10px; height: auto !important; padding: 6px 0 !important; margin: 0 0 4px; border-radius: 12px !important;
  color: var(--text) !important; background: none !important; }
.mega-head:hover { background: var(--violet-50) !important; }
.mega-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--violet-50); color: var(--violet); }
.mega-cat:nth-child(3n+2) .mega-ic { background: #fff1e8; color: var(--accent-600); }
.mega-cat:nth-child(3n) .mega-ic { background: #e6f9fc; color: #0891b2; }
.mega-head b { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; white-space: normal; }
.mega-head em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }
.mega-cat ul { margin: 0; padding: 0 0 0 44px; list-style: none; }
.mega-cat li a { display: block !important; height: auto !important; padding: 4px 0 !important; color: var(--text-2) !important; font-size: 13.5px; font-weight: 500;
  white-space: normal !important; background: none !important; border-radius: 0 !important; }
.mega-cat li a:hover { color: var(--violet) !important; }
.mega-cat li a.mega-more { color: var(--violet) !important; font-weight: 700; }
.mega-makes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.mega-makes b { margin-right: 8px; font-size: 13.5px; }
.mega-makes a { height: 32px !important; padding: 0 12px !important; background: var(--soft); color: var(--text) !important; font-size: 13px; font-weight: 700 !important; }
.mega-makes a:hover { background: var(--ink) !important; color: #fff !important; }
.mega-makes .mega-all { margin-left: auto; background: var(--grad) !important; color: #fff !important; }
@media (max-width: 1100px) { .mega-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- hero: the living colour mesh, the claim, the live facts, the glass finder ---------- */
.hero { color: var(--text); background: var(--bg); }   /* never overflow:hidden — it clips the finder's dropdowns */
.hero::before { inset: 0; opacity: 1; mask-image: none; -webkit-mask-image: none;
  background:
    radial-gradient(40% 50% at 18% 30%, rgba(255, 106, 19, .5), transparent 70%),
    radial-gradient(35% 45% at 72% 18%, rgba(124, 58, 237, .42), transparent 70%),
    radial-gradient(40% 50% at 88% 78%, rgba(6, 182, 212, .36), transparent 70%),
    radial-gradient(30% 40% at 35% 88%, rgba(255, 196, 0, .3), transparent 70%);
  background-size: 120% 120%; animation: aurora-drift 18s ease-in-out infinite alternate; }
@keyframes aurora-drift { to { background-position: 30% 20%, 70% 60%, 20% 40%, 60% 10%; } }
.hero .hero-copy { text-align: left; }
.auction-hero .hero-copy { text-align: center; }   /* the auction page stays centred (owner 2026-10-05) */
.auction-hero .hero-sub { margin-left: auto !important; }
.auction-hero .hero-title, .auction-hero h1 { margin-left: auto; margin-right: auto; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.hero h1, .hero-title { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -.03em; color: var(--text); text-wrap: balance; max-width: 760px; }
.hero h1 span, .hero-title span { background: linear-gradient(90deg, var(--accent), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin: 16px 0 0; color: var(--text-2); font-size: 18px; max-width: 600px; margin-left: 0 !important; text-wrap: pretty; }
.hero-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.hero-pill b { padding: 3px 10px; border-radius: 999px; background: var(--green); color: #fff; font-size: 12.5px; white-space: nowrap; }
/* the facts (lib/navtree.php home_stats_html) */
.hero-stats { display: grid; grid-template-columns: repeat(2, 252px); gap: 12px; }
.hs-card { position: relative; padding: 16px 18px; border-radius: 22px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 40px -24px rgba(40, 30, 90, .4); }
.hs-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 106, 19, .5), rgba(124, 58, 237, .5), rgba(6, 182, 212, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.hs-card small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.hs-row { display: flex; align-items: center; gap: 12px; }
.hs-row b { display: block; font-size: 13.5px; line-height: 1.35; }
.hs-ring { flex: none; width: 66px; height: 66px; }
.hs-ring text { font: 800 17px var(--font); fill: var(--text); }
.hs-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: 12px; }
.hs-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: #e3def7; }
.hs-bars i.on { background: linear-gradient(var(--violet), var(--accent)); }
.hs-hours { gap: 2px; }
.hs-hours i { background: linear-gradient(var(--teal), var(--violet)); opacity: .8; border-radius: 3px; }
.hs-hours i.now { background: var(--accent); opacity: 1; box-shadow: 0 0 12px var(--accent); }
.hs-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.hs-row2 { display: flex; align-items: center; gap: 8px; }
.hs-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--green-50); color: var(--green); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.hs-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: hs-pulse 1.6s infinite; }
@keyframes hs-pulse { from { box-shadow: 0 0 0 0 rgba(10, 143, 79, .6); } to { box-shadow: 0 0 0 8px rgba(10, 143, 79, 0); } }
.hs-big { display: block; margin-top: 4px; font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hs-big em { font-style: normal; font-size: 15px; color: var(--text-2); }
.hs-today > small:last-child { margin-top: 6px; }
@media (max-width: 1100px) { .hero-top { grid-template-columns: minmax(0, 1fr); } .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }

/* the finder: one glass panel — what you need on top, the car under it */
.finder { position: relative; z-index: 5; background: rgba(255, 255, 255, .8); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 28px; padding: 12px 14px 14px; box-shadow: 0 30px 60px -30px rgba(40, 30, 90, .35); }
.finder-tabs { background: transparent; padding: 0 0 4px; margin-bottom: 8px; }
.finder-tab { height: 36px; border-radius: 999px; }
.finder-tab.active { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.finder-tab.active .ic { color: var(--violet); }
.finder-pane[data-pane="car"]:not([hidden]) { display: flex; flex-direction: column; }
.finder-search { order: -1; margin: 0 0 10px; }
.finder-search input { height: 60px; border: 1.5px solid var(--violet); border-radius: 18px; box-shadow: 0 0 0 4px rgba(124, 58, 237, .1); font-size: 17px; }
.finder-search input:focus { border-color: var(--violet); box-shadow: 0 0 0 5px rgba(124, 58, 237, .18); }
.finder-search-ic { color: var(--violet); }
.finder-search .btn { height: 60px; border-radius: 18px; padding: 0 34px; font-size: 16px; }
.finder-car:not(.open) { display: flex; flex-direction: column; }
.finder-car > .car-grid { order: 1; }
.finder-car > .car-meta { order: 2; }
.finder-car > .garage { order: 3; margin: 12px 0 0; padding: 12px 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
.finder-car > .sheet-foot { order: 4; }
.car-grid { gap: 8px; }
.fld > span { font-size: 12px; color: var(--muted); padding-left: 4px; }
.combo-input { height: 50px; border-radius: 14px; border-color: var(--line); background-color: #fff; }
.combo-input:focus, .field input:not(.combo-input):focus, .field select:focus, .field textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .14); }
.combo-opt.active { background: var(--violet-50); color: var(--violet); }
.garage-item { border-color: var(--line); background: rgba(255, 255, 255, .7); }
.garage-item.active { border-color: var(--violet); background: var(--violet-50); }
#vin-input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .14); }
#vin-input { border-radius: 18px; }
.vin-row .btn { border-radius: 18px; }
.trust { justify-content: flex-start; color: var(--text-2); font-size: 13.5px; }
.trust li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .6); }
.trust .ic { color: var(--violet); }
.is-results .hero { padding: 18px 0 20px; }
.is-results .finder { padding: 10px 12px 12px; }

/* ---------- home: every category with its subcategories, the makes ---------- */
#catalog { margin-top: 56px; }
.section-head h2 { font-size: 30px; letter-spacing: -.02em; }
.section-head > a { font-weight: 700; color: var(--violet); text-decoration: none; }
.cat-tree { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 48px; padding: 0; list-style: none; }
.ct-item { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 18px 14px; background: #fff; border: 1px solid var(--line); border-radius: 24px; }
.ct-head { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.ct-head > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ct-head b { display: block; font-size: 15.5px; line-height: 1.25; }
.ct-head small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ct-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--violet-50); color: var(--violet); }
.ct-item:nth-child(3n+2) .ct-ic { background: #fff1e8; color: var(--accent-600); }
.ct-item:nth-child(3n) .ct-ic { background: #e6f9fc; color: #0891b2; }
.ct-subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ct-subs a { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; border-radius: 10px; background: var(--bg); color: var(--text-2); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s, transform .14s; }
.ct-subs a:active { transform: scale(.95); }
.ct-subs em { font-style: normal; font-weight: 500; color: var(--muted); }
.ct-more { margin-top: auto; color: var(--violet); font-size: 13px; font-weight: 700; text-decoration: none; }
@media (hover: hover) {
  .ct-item:hover, .mt:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(40, 30, 90, .45); }
  .ct-subs a:hover { background: #ece8ff; color: var(--violet); }
}
.make-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mt { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow: hidden; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.mt { background: radial-gradient(150px 150px at 100% 0, color-mix(in srgb, var(--t) 16%, transparent), transparent 70%) #fff; transition: transform .16s ease, box-shadow .2s ease, background-size .3s; }
@media (hover: hover) { .mt:hover { background-image: radial-gradient(220px 220px at 100% 0, color-mix(in srgb, var(--t) 28%, transparent), transparent 70%); } }
.mt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--text); text-decoration: none; }
.mt-head b { min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, var(--ink), var(--t)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mt-head b.long { font-size: 15.5px; letter-spacing: .03em; }
.mt-head small { flex: none; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.mt-models { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-models a { padding: 5px 10px; border-radius: 999px; background: var(--bg); color: var(--text-2); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s, transform .14s; }
.mt-models a:active { transform: scale(.94); }
@media (hover: hover) { .mt-models a:hover { background: var(--t); color: #fff; } }
.mt-share { height: 5px; margin-top: auto; border-radius: 9px; background: #eef0f6; overflow: hidden; }
.mt-share i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--t), color-mix(in srgb, var(--t) 40%, #fff)); }
.mt-all { background: linear-gradient(150deg, #1b1340, #3b1d80 60%, var(--violet)); border: 0; }
.mt-all a { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 100%; color: #fff; text-decoration: none; }
.mt-all b { font-size: 21px; }
.mt-all small { color: #c9bfff; font-size: 13px; line-height: 1.6; }

@media (max-width: 1100px) { .cat-tree, .make-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cat-tree, .make-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- home: the other blocks in the same language ---------- */
.home-svip, .showcase, .shops-strip, .seller-cta, .how { margin-top: 56px; }
.svip-ic { background: var(--grad); }
.showcase-ic { background: var(--violet-50); color: var(--violet); }
.showcase-subs a, .count-chip { border-radius: 999px; }
.showcase-subs a:hover { border-color: var(--violet); color: var(--violet); }
.showcase-all { color: var(--violet); text-decoration: none; }
.sticker-board { border-radius: 28px; }
.shop-tiles li { border-radius: 20px; }
.seller-cta { position: relative; overflow: hidden; border-radius: 30px; padding: 36px; background: var(--ink); }
.seller-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 92% 10%, rgba(124, 58, 237, .6), transparent), radial-gradient(40% 70% at 5% 100%, rgba(255, 106, 19, .45), transparent); }
.seller-cta > * { position: relative; }
.seller-cta h2 { font-size: 30px; letter-spacing: -.02em; }
.seller-cta h2 span { background: linear-gradient(90deg, #ffb37f, #c9bfff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps li { border-radius: 24px; }
.step-n { background: var(--grad); border-radius: 12px; }

/* ---------- product cards (partials/card.php, design A): the saving + the sellers on the photo, the best price beside the dearest,
   the spread as dots, the cheapest sellers as slim rows ---------- */
.grid { gap: 16px; }
.card { border-radius: 24px; padding: 8px; border-color: var(--line); }
.card-img { border-radius: 18px; background: #f1f3f8; }
.card-img img.ok { background: #fff; }
.card-cat-tag { left: 10px; top: 10px; background: rgba(13, 19, 36, .7); }
.card-img .save-pill { position: absolute; left: 10px; top: 10px; z-index: 1; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px 11px; font-size: 12.5px; font-weight: 800; box-shadow: 0 8px 16px -8px rgba(10, 143, 79, .8); }
.card-img .vip-pill ~ .save-pill { left: auto; right: 10px; max-width: calc(60% - 10px); }
.card-sellers { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: flex; gap: 3px; }
.card-sellers .store-mini { width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50%; font-size: 11px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.card-sellers .store-mini.more { background: var(--ink); font-size: 10px; }
.card-body { gap: 6px; padding: 12px 8px 6px; }
.card-fit { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.card-title { font-size: 15.5px; font-weight: 700; }
.card-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 2px; }
.card-best { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card-dear { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.card-offers { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.card-offers .variant-pill { padding: 0; background: none; color: var(--violet); font-size: 12.5px; }
.card-range { position: relative; display: block; height: 6px; margin: 6px 0 4px; border-radius: 9px; background: #eef0f6; }
.card-range i { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--violet); }
.card-range i:first-child { border-color: var(--green); }
.price-list { margin: 4px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); }
.price-list li { padding: 3px 6px; font-size: 13px; }
.price-list li.cheapest { padding: 4px 6px; border-radius: 10px; }
.price-list li.card-more { display: block; padding: 2px 6px 0; color: var(--muted); font-size: 12px; }
.store-mini { border-radius: 7px; }
@media (hover: hover) { a.card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(40, 30, 90, .45); border-color: var(--line); } }

/* ---------- results: filters, chips, pager ---------- */
.filters { border-radius: 24px; }
.cat-list button { border-radius: 12px; }
.cat-list button.active { background: var(--violet-50); color: var(--violet); }
.chip { border-radius: 999px; }
.chip.active, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.quick-chip { border-color: var(--line); }
.quick-count { background: var(--violet); }
.list-intro, .seo-intro { border-radius: 20px; }
.gen-chips a { border-radius: 999px; }
.range-fill { background: var(--grad); }

/* ---------- product page ---------- */
.breadcrumb a:hover { color: var(--violet); }
.product-hero { border-radius: 30px; padding: 20px; border-color: var(--line); }
.product-img { border-radius: 22px; background: #f1f3f8; }
.thumb { border-radius: 14px; }
.thumb.active { border-color: var(--violet); }
.card-cat { background: var(--violet-50); color: var(--violet); }
.price-box { position: relative; overflow: hidden; border-radius: 24px; background: var(--ink); }
.price-box::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 100% 0%, rgba(124, 58, 237, .55), transparent), radial-gradient(50% 80% at 0% 100%, rgba(255, 106, 19, .35), transparent); }
.price-box > * { position: relative; }
.offer { border-radius: 22px; border-color: var(--line); }
.offer.best { border-color: var(--green); }
.offer-filters { border-radius: 20px; border-color: var(--line); }
.variant-tag { background: var(--violet-50); color: var(--violet); }
.offer-thumb, .store-logo { border-radius: 12px; }

/* ---------- forms, content, account ---------- */
.form-card, .prose, .auth-card, .auth-cta { border-radius: 28px; border-color: var(--line); }
.field input:not(.combo-input), .field select, .field textarea { border-radius: 14px; border-color: var(--line-2); }
.radio-card { border-radius: 18px; }
.radio-card:has(:checked) { border-color: var(--violet); background: var(--violet-50); }
.radio-card input { accent-color: var(--violet); }
.auth-ic { background: var(--violet-50); color: var(--violet); }
.phone-input { border-radius: 14px; }
.phone-input:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .14); }
.acc-tile { border-radius: 22px; }

/* ---------- footer: ink with the aurora glow ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--ink); color: #9aa4bb; }
.site-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 90% 0%, rgba(124, 58, 237, .35), transparent), radial-gradient(35% 60% at 0% 100%, rgba(255, 106, 19, .22), transparent); }
.site-footer > * { position: relative; }
.site-footer a:not(.brand) { color: #9aa4bb; }
.site-footer .brand { color: #fff; }

/* ---------- the phone's catalogue sheet (lib/navtree.php nav_sheet_html): phones only ---------- */
.cat-sheet { display: none; }
.cat-acc details { border-bottom: 1px solid var(--line); }
.cat-acc summary { display: flex; align-items: center; gap: 12px; padding: 12px 2px; font-size: 15px; cursor: pointer; list-style: none; }
.cat-acc summary::-webkit-details-marker { display: none; }
.cat-acc summary b { flex: 1; min-width: 0; }
.cat-acc summary em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cat-acc summary em::after { content: ' ▾'; }
.cat-acc details[open] summary em::after { content: ' ▴'; }
.cat-acc-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--violet-50); color: var(--violet); }
.cat-acc ul { display: grid; gap: 4px; margin: 0 0 12px 52px; padding: 0; list-style: none; }
.cat-acc ul a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.cat-acc ul a:active { transform: scale(.97); }
.cat-acc ul em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.cat-acc-makes { padding: 16px 0 8px; }
.cat-acc-makes > b { display: block; margin-bottom: 10px; }
.cat-acc-makes div { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-acc-makes a { padding: 8px 12px; border-radius: 999px; background: var(--bg); color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  /* the list takes the whole width (site.css set a 300 px filter column later in the file; on phones the filters are a sheet) */
  .results-layout, .is-home .results-layout { grid-template-columns: minmax(0, 1fr); }
  body { padding-bottom: calc(var(--nav-h) + 24px + var(--safe-b)); }
  .cat-sheet { display: block; }
  .header-account, .locale-menu > summary { border: 0; background: none; }
  .brand-logo { width: 38px; height: 38px; }

  .hero { padding: 26px 0 26px; }
  .hero h1, .hero-title { font-size: 28px; }
  .hero-sub { font-size: 14.5px; margin-top: 10px; }
  .hero-pill { font-size: 12px; margin-bottom: 14px; }
  .hero-stats { display: none; }
  /* no backdrop-filter here: it would make the car sheet inside (position: fixed) stick to the panel instead of the screen */
  /* nor a z-index: the sheet would sit under the page's sheet backdrop */
  .finder { z-index: auto; padding: 10px; border-radius: 22px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .92); }
  .finder-tab { font-size: 13px; height: 34px; }
  .finder-search input { height: 54px; font-size: 15px; border-radius: 16px; }
  .finder-search .btn { height: 54px; padding: 0 18px; border-radius: 16px; }
  .fld > span { font-size: 11px; }
  .combo-input { height: 48px; font-size: 15px; }
  .trust { gap: 6px; font-size: 12.5px; }
  .is-results .finder { padding: 6px; border-radius: 18px; }
  .is-results .finder-search { margin: 0; }
  .is-results .finder-search input { height: 46px; box-shadow: none; }

  #catalog { margin-top: 36px; }
  .section-head h2 { font-size: 21px; }
  .cat-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 32px; }
  .ct-item { padding: 14px; border-radius: 20px; }
  .ct-subs, .ct-more { display: none; }
  .ct-ic { width: 52px; height: 52px; }
  .ct-ic svg { width: 28px; height: 28px; }
  .ct-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ct-head b { font-size: 14px; }
  .make-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mt { padding: 14px; gap: 10px; }
  .mt-head { flex-direction: column; gap: 2px; }
  .mt-head b { font-size: 15px; letter-spacing: .05em; }
  .mt-head b.long { font-size: 13px; }
  .mt-models a { font-size: 11.5px; padding: 4px 8px; }
  .mt-models a:nth-child(3) { display: none; }
  .mt-all b { font-size: 16px; }
  .home-svip, .showcase, .shops-strip, .seller-cta, .how { margin-top: 36px; }
  .seller-cta { padding: 24px 20px; border-radius: 24px; }
  .seller-cta h2 { font-size: 22px; }

  #grid .card { padding: 6px; border-radius: 20px; }
  #grid .card-img .save-pill { left: 6px; right: 6px; top: auto; bottom: 6px; max-width: none; padding: 4px 6px; font-size: 10.5px; line-height: 1.25; text-align: center; white-space: normal; }
  #grid .card-sellers { display: none; }
  .card-best { font-size: 19px; }
  .card-title { font-size: 14.5px; }
  #grid .card-img { border-radius: 14px; }
  .card { border-radius: 20px; }
  .product-hero { border-radius: 24px; padding: 10px; }
  .buy-bar { bottom: calc(var(--nav-h) + 22px + var(--safe-b)); border-radius: 20px; left: 10px; right: 10px; border: 1px solid var(--line); }
  .has-buy-bar { padding-bottom: calc(var(--nav-h) + 100px + var(--safe-b)); }

  /* the floating dark tab bar: search · catalogue · add (raised) · auction · profile */
  .bottom-nav { grid-template-columns: repeat(5, 1fr); left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); height: var(--nav-h); padding: 6px; border: 0; border-radius: 24px;
    background: rgba(13, 19, 36, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 40px -16px rgba(13, 19, 36, .6); }
  .bottom-nav .tab { gap: 4px; border-radius: 18px; color: #9aa4bb; font-size: 10.5px; font-weight: 700; transition: transform .14s, background .15s, color .15s; }
  .bottom-nav .tab .ic { width: 26px; height: 26px; }
  .bottom-nav .tab.active { color: #fff; background: rgba(255, 255, 255, .1); }
  .bottom-nav .tab-add { align-self: center; justify-self: center; width: 56px; height: 56px; margin-top: -26px; border-radius: 20px; background: var(--grad); color: #fff;
    box-shadow: 0 12px 24px -10px var(--accent); }
  .bottom-nav .tab-add.active { background: var(--grad); }
  .bottom-nav .tab-add .ic { width: 30px; height: 30px; }
  .bottom-nav .tab:active { transform: scale(.9); }
}
@media (max-width: 380px) {
  .hero h1, .hero-title { font-size: 25px; }
  .bottom-nav .tab { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
.auction-kicker { background: rgba(255, 255, 255, .75); color: var(--violet); border: 1px solid rgba(255, 255, 255, .9); }

/* ---------- home in the mockup's order (owner 2026-10-27: „ფაილს გადახედე და წესივრად დაასრულე“) ---------- */
.is-home .results-layout, .is-home .trust { display: none; }   /* the list is the results mode's — the home page is the mockup's blocks */
.deals { margin-top: 56px; }
.deals-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: 56px; }
.auc-promo { position: relative; overflow: hidden; min-height: 300px; padding: 36px; border-radius: 30px; background: var(--ink); color: #fff; }
.auc-promo::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 90% 10%, rgba(124, 58, 237, .6), transparent), radial-gradient(40% 60% at 10% 100%, rgba(255, 106, 19, .45), transparent); }
.auc-promo > * { position: relative; }
.auc-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 700; }
.auc-promo h2 { max-width: 520px; margin: 14px 0 10px; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; }
.auc-promo p { max-width: 480px; margin: 0 0 20px; color: #b9c1d6; line-height: 1.6; }
.btn-light { background: #fff !important; color: var(--ink) !important; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6); }
.auc-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.auc-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; font-weight: 600; }
.auc-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--grad); font-size: 12px; font-weight: 800; }
.home-stores { padding: 26px; border-radius: 30px; background: #fff; border: 1px solid var(--line); }
.home-stores .section-head { margin-bottom: 8px; }
.home-stores .section-head h2 { font-size: 24px; }
.home-stores ul { margin: 0; padding: 0; list-style: none; }
.home-stores li + li { border-top: 1px solid var(--line); }
.home-stores li a { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 14px; color: var(--text); text-decoration: none; transition: background .15s, transform .14s; }
.home-stores li a > span:not(.st-logo) { flex: 1; min-width: 0; }
.home-stores b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-stores small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.home-stores em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.home-stores .st-logo { flex: none; border-radius: 14px; }
.home-svip, .home-stickers { margin-top: 56px; }
/* all makes: the tile opens the full list under the grid */
.mt.mt-all, .mt.mt-all:hover { background: linear-gradient(150deg, #1b1340, #3b1d80 60%, var(--violet)); }
.mt-all label { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 100%; color: #fff; cursor: pointer; }
.mt-all label b { font-size: 21px; }
.mt-all label small { color: #c9bfff; font-size: 13px; line-height: 1.6; }
.all-makes { display: none; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.all-makes-toggle:checked + .all-makes { display: flex; }
/* the tile opens by keyboard too (a focusable hidden checkbox, Space): its focus ring shows on the tile */
.make-tiles:has(+ .all-makes-toggle:focus-visible) .mt-all label { outline: 3px solid rgba(124, 58, 237, .45); outline-offset: 2px; }
.mt-all:has(label:focus-visible) { outline: 3px solid rgba(124, 58, 237, .45); outline-offset: 2px; }
.all-makes a { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--bg); color: var(--text); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.all-makes em { font-style: normal; color: var(--muted); font-weight: 500; font-size: 12px; }

/* ---------- every pressable thing presses, every hoverable thing answers (owner 2026-10-27: „ყველა ღილაკზე დაჭერის იმიტაცია“) ---------- */
:where(a, button, summary, label[for], [role="button"]) { -webkit-tap-highlight-color: transparent; }
:where(.chip, .quick-chip, .icon-btn, .finder-tab, .header-sub a, .mega-btn, .header-account, .locale-menu > summary, .garage-pick, .cur-switch button,
  .carousel-btn, .ct-subs a, .mt-models a, .gen-chips a, .all-makes a, .mega-makes a, .cat-acc-makes a, .cat-acc ul a, .pager a, .acc-tile, .sticker-tile,
  .home-stores li a, .cat-list button, .link-btn, .bottom-nav .tab, .showcase-subs a, .locale-lang, .locale-cur-opt, .mega-cat li a, .mega-head, .ct-head,
  .mt-head, .mt-all label, .st-tab, .card, .offer .btn, .thumb, .auc-steps li, .breadcrumb a, .site-footer li a) {
  transition: transform .14s ease, background-color .15s, color .15s, box-shadow .2s, filter .2s; }
:where(.chip, .quick-chip, .icon-btn, .finder-tab, .header-sub a, .mega-btn, .header-account, .locale-menu > summary, .garage-pick, .cur-switch button,
  .carousel-btn, .ct-subs a, .mt-models a, .gen-chips a, .all-makes a, .mega-makes a, .cat-acc-makes a, .cat-acc ul a, .pager a, .sticker-tile,
  .cat-list button, .link-btn, .showcase-subs a, .locale-lang, .locale-cur-opt, .thumb, .mt-all label, .btn):active { transform: scale(.94); filter: brightness(.94); }
:where(.acc-tile, .home-stores li a, .card, .ct-head, .mt-head, .mega-head, .mega-cat li a, .cat-acc summary, .offer):active { transform: scale(.97); }
@media (hover: hover) {
  :where(.chip, .quick-chip, .gen-chips a, .showcase-subs a, .pager a.btn-ghost, .carousel-btn, .icon-btn):hover { background-color: var(--violet-50); border-color: var(--violet); color: var(--violet); }
  .all-makes a:hover, .mega-makes a:hover { background: var(--ink); color: #fff; }
  .all-makes a:hover em { color: #c9bfff; }
  .home-stores li a:hover { background: var(--bg); }
  .acc-tile:hover, .sticker-tile:hover, .offer:hover, .shop-tiles li:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(40, 30, 90, .45); }
  .auc-promo .btn-light:hover { filter: brightness(.96); }
  .site-footer li a:hover { color: #fff; transform: translateX(2px); }
  .breadcrumb a:hover { color: var(--violet); }
  .mt-all:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px var(--violet); }
}

@media (max-width: 1100px) { .deals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .home-duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .deals, .home-duo, .home-svip, .home-stickers { margin-top: 36px; }
  .deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .deals-grid .card-img .save-pill { left: 6px; top: 6px; padding: 4px 8px; font-size: 11px; max-width: calc(100% - 12px); }
  .deals-grid .card-sellers .store-mini { width: 22px; height: 22px; font-size: 10px; }
  .deals-grid .card-best { font-size: 17px; }
  .deals-grid .card-offers { margin-left: 0; }
  .auc-promo { min-height: 0; padding: 24px 20px; border-radius: 24px; }
  .auc-promo h2 { font-size: 24px; }
  .home-stores { padding: 18px; border-radius: 24px; }
  .mt-all label b { font-size: 16px; }
  .all-makes { padding: 12px; gap: 6px; }
  .all-makes a { padding: 7px 11px; font-size: 13px; }
}
/* the store letters on the home page (store.css is the store pages' own) */
.home-stores .st-logo { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--st); }
.home-stores .st-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.home-stores .st-initials { color: #fff; font-weight: 800; font-size: 15px; }
/* the paid sticker board in the same language */
.sticker-board { border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: none; padding: 22px 26px; }
.sticker-board h2 { font-size: 22px; letter-spacing: -.01em; }
.sticker-tile { border-radius: 18px; background: var(--bg); }

/* ==========================================================================
   The product page in design A (owner 2026-10-27: „პროდუქტის გვერდზე არაფერი შეცვალე?“): the mesh behind the top, a glass card, the facts
   as tiles, the dark price box with one dot per offer, the two actions side by side, offers as cards (the best one glows), aurora mini cards
   ========================================================================== */
body:not(.is-home):not(.store-body) #main::before { content: ''; position: absolute; left: 0; right: 0; top: var(--header-h); height: 560px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 60% at 12% 20%, rgba(255, 106, 19, .28), transparent 70%),
    radial-gradient(34% 60% at 78% 10%, rgba(124, 58, 237, .26), transparent 70%),
    radial-gradient(40% 60% at 95% 70%, rgba(6, 182, 212, .2), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.is-results #main::before, body:not(.is-home):not(.is-product):not(.store-body) #main::before { height: 380px; opacity: .8; }
.breadcrumb { margin: 22px 0 16px; }
.breadcrumb a { padding: 2px 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }   /* links tell apart from text without colour (WCAG 1.4.1) */
.product-hero { gap: 36px; padding: 22px; border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 30px 60px -34px rgba(40, 30, 90, .4); }
.product-img { background: #fff; border: 1px solid var(--line); }
.thumbs { gap: 10px; }
.thumb { border-width: 2px; border-color: var(--line); }
.product-info h1 { letter-spacing: -.02em; line-height: 1.15; }
.rating { margin: -4px 0 18px; }
.star.on { color: #ffb020; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 0 0 18px; }
.specs > div, .specs > div:first-child { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.specs > div.wheel-fits, .specs > div:has(.fitments > div + div) { grid-column: 1 / -1; }
.specs dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.specs dd { font-size: 14.5px; font-weight: 600; }
.price-box { padding: 22px 24px; gap: 18px; }
.price-box small, .price-box .muted { color: #b9c1d6; }
.price-big { font-size: 38px; }
.save-badge { background: var(--green); box-shadow: 0 8px 18px -8px rgba(10, 143, 79, .9); }
.price-range { height: 6px; margin: 14px 0 8px; background: rgba(255, 255, 255, .16); }
.price-range i { position: absolute; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid #c9bfff; }
.price-range i:first-child { border-color: #34d399; }
.price-range span { display: none; }
.price-box .btn { border-radius: 16px; }
.pb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.watch-open, .save-card { margin: 0; height: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
  color: var(--text); font-weight: 700; font-size: 13.5px; text-align: center; transition: transform .14s, background-color .15s, border-color .15s, color .15s; }
.watch-open .ic { color: var(--violet); }
@media (hover: hover) {
  .watch-open:hover { background: var(--violet-50); border-color: var(--violet); color: var(--violet); }
  .save-card:hover { background: #fff1f2; border-color: #e11d48; }
}
.watch-open:active, .save-card:active { transform: scale(.96); }
/* offers */
.offers { margin-top: 44px; }
.offers h2, .similar h2 { font-size: 26px; letter-spacing: -.02em; }
.offer-filters { gap: 10px; padding: 16px; background: #fff; }
.of-label { color: var(--text); }
.offer-list { gap: 12px; }
.offer { gap: 22px; padding: 16px 18px; background: #fff; }
.offer.best { position: relative; border: 2px solid transparent; box-shadow: 0 20px 40px -28px rgba(10, 143, 79, .8);
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #10b981, #06b6d4, #7c3aed) border-box; }
.offer-store .store-logo { width: 44px; height: 44px; border-radius: 14px; font-size: 17px; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .5); }
.offer-thumb { width: 64px; height: 64px; border-radius: 14px; }
.offer-body strong { font-size: 15.5px; }
.offer-meta .badge { border-radius: 999px; }
.offer-price { font-size: 24px; letter-spacing: -.02em; }
.best-label { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; background: var(--green-50); }
.offer-action .btn { min-width: 150px; border-radius: 14px; }
.cond-tag, .drop-tag, .stock-tag { border-radius: 999px !important; }
/* similar parts: aurora mini cards */
.similar { margin-top: 52px; }
.similar .grid-sm { gap: 14px; }
.similar .card { padding: 8px; border-radius: 22px; }
.similar .card-img { border-radius: 16px; }
.similar .card-body { padding: 10px 6px 6px; }
.similar .card-title { font-size: 14px; font-weight: 700; }
.similar .card-price { font-size: 18px; }
.similar .card-price small { color: var(--muted); }
/* the phone's buy bar: a floating glass pill above the tab bar */
@media (max-width: 760px) {
  .is-product #main::before { height: 420px; }
  .product-hero { padding: 10px; gap: 14px; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-box { padding: 18px; }
  .price-big { font-size: 30px; }
  .pb-actions { grid-template-columns: 1fr; }
  .offer { padding: 14px; gap: 12px; }
  .offer-store .store-logo { width: 36px; height: 36px; font-size: 14px; }
  .offer-price { font-size: 20px; }
  .offer-action .btn { min-width: 0; }
  .offer-action .phone-reveal { flex: 1 1 100%; }
  .offers h2, .similar h2 { font-size: 20px; }
  .buy-bar { background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 36px -18px rgba(13, 19, 36, .5); }
  .buy-bar .btn { border-radius: 14px; }
}

/* ---------- the account (account.php tiles, the add-listing banner, wallet) in design A ---------- */
.acc-tile { border-radius: 22px; border-color: var(--line); box-shadow: none; }
.acc-tile-ic { border-radius: 14px; background: var(--violet-50); color: var(--violet); }
.acc-tiles .acc-tile:nth-child(3n+2) .acc-tile-ic { background: #fff1e8; color: var(--accent-600); }
.acc-tiles .acc-tile:nth-child(3n) .acc-tile-ic { background: #e6f9fc; color: #0891b2; }
.acc-tile-n { background: var(--ink); }
.acc-tile.is-main { background: var(--grad); border-color: transparent; box-shadow: 0 16px 30px -18px var(--accent); }
.acc-tile.is-main .acc-tile-ic { background: rgba(255, 255, 255, .22); color: #fff; }
.acc-tile.is-active { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet) inset; }
.acc-tile.is-main.is-active { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85) inset, 0 16px 30px -18px var(--accent); }
.acc-tile:focus-visible, .add-listing-cta:focus-visible { outline: 3px solid rgba(124, 58, 237, .45); }
@media (hover: hover) { .acc-tile:hover { border-color: var(--violet); } .acc-tile.is-main:hover { border-color: transparent; filter: brightness(1.05); } }
.add-listing-cta { position: relative; overflow: hidden; border-radius: 24px; padding: 18px 22px; background: var(--grad); box-shadow: 0 18px 36px -20px var(--accent);
  transition: transform .14s, filter .2s; }
.add-listing-cta:hover { background: var(--grad); filter: brightness(1.05); }
.add-listing-cta:active { transform: scale(.98); }
.add-listing-ic { border-radius: 14px; }
.wallet-stat, .package, .topup-providers > * { border-radius: 18px; }
@media (min-width: 1001px) { .acc-tiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }   /* every tile in one row (7), never one alone */

/* auction: customs + the whole sum (owner 2026-10-28, lib/customs.php) — importers' prices only once a company joined (lib/importers.php) */
.auction-costs h3 { margin: 0 0 12px; font-size: 18px; }
.ac-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.ac-form .fld { display: grid; gap: 4px; min-width: 0; }
.ac-form .fld > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.ac-form input[type="text"] { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 12px; font: inherit; background: #fff; }
.ac-form input[type="text"]:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 4px var(--violet-50); }
.ac-check { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.ac-check input { width: 20px; height: 20px; accent-color: var(--violet); }
.ac-lines { margin: 14px 0 8px; display: grid; gap: 2px; }
.ac-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.ac-lines dt small { color: var(--muted); font-weight: 500; margin-left: 4px; white-space: nowrap; }
.ac-lines dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-lines .is-sub { border-bottom: 0; font-weight: 700; }
.ac-ask { margin: 14px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--violet-50, #f3edff); color: var(--violet); font-weight: 600; }
.ac-imps { margin-top: 16px; }
.ac-imps h4 { margin: 0 0 8px; font-size: 16px; }
.ac-imps ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.ac-imps li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; }
.ac-imps li.is-on { border-color: var(--violet); background: #faf7ff; }
.ac-imps label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 260px; min-width: 0; cursor: pointer; }
.ac-imps input[type="radio"] { width: 18px; height: 18px; accent-color: var(--violet); }
.ac-imp-price { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.ac-contact { flex-basis: 100%; font-weight: 600; overflow-wrap: anywhere; }
.ac-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 14px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #0d1324, #24163f); color: #fff; }
.ac-total span { font-size: 14px; opacity: .85; }
.ac-total b { font-size: 24px; font-variant-numeric: tabular-nums; }
/* the car is bought in dollars: the sum in ₾ and in $ (owner 2026-10-28) */
.ac-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; }
.ac-total .ac-usd { font-size: 17px; color: #ffd7a8; }
.ac-rate { flex-basis: 100%; font-size: 12px; opacity: .65; }
@media (max-width: 820px) { .ac-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ac-form { grid-template-columns: minmax(0, 1fr); } .ac-total b { font-size: 21px; } .ac-total .ac-usd { font-size: 16px; } }
/* the label's year (owner 2026-10-28): customs counts the door-jamb label's production year, the auction shows the model year */
.ac-year-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff7e6; color: #8a5300; font-size: 14px; line-height: 1.45; }
.ac-year-note small { opacity: .8; }