/* =========================================================
   Mobiveli — Fonts (same stack as tarifebi.ge: Mersad body / Dachi display)
   ========================================================= */
@font-face { font-family: 'Mersad'; src: url('../fonts/mersad-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mersad'; src: url('../fonts/mersad-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mersad'; src: url('../fonts/mersad-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Mersad'; src: url('../fonts/mersad-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Mersad'; src: url('../fonts/mersad-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Dachi'; src: url('../fonts/dachi.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

/* =========================================================
   Mobiveli — Design Tokens & Base
   ========================================================= */
:root {
  --color-yellow: #FDB913;
  --color-yellow-dark: #E5A300;
  --color-yellow-light: #FDB913; /* aligned to the brand yellow — no washed-out tint anywhere */
  --color-navy: #0F2A6B;
  --color-navy-dark: #091B47;
  --color-navy-light: #1E3E8C;
  --color-text: #1A1A2E;
  --color-text-muted: #6B7280;
  --color-bg: #F5F6FA;
  --color-white: #FFFFFF;
  --color-border: #E5E7EB;
  --color-success: #16A34A;
  --color-danger: #DC2626;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(15, 42, 107, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 42, 107, 0.10);
  --shadow-lg: 0 12px 32px rgba(15, 42, 107, 0.16);

  --header-h: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Mersad', 'Noto Sans Georgian', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .logo-text, .hero-banner h1 {
  font-family: 'Dachi', 'Mersad', 'Noto Sans Georgian', sans-serif;
  letter-spacing: .3px;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
/* long unbreakable Georgian words must break rather than force horizontal scroll.
   overflow-wrap only breaks when a word would otherwise overflow — normal wrapping is unaffected. */
h1, h2, h3, h4, h5, h6, p, li, a, span, strong, td, th, label { overflow-wrap: break-word; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select { font-family: inherit; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.section-title h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-navy);
  position: relative;
  padding-left: 16px;
}
.section-title h2::before {
  content: "";
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 5px;
  border-radius: 3px;
  background: var(--color-yellow);
}
.section-title .see-all {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy-light);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s, gap .2s;
}
.section-title .see-all:hover { color: var(--color-yellow-dark); gap: 10px; }

/* ---- Keyboard focus (a11y) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Scroll-reveal (JS adds .reveal, IntersectionObserver adds .in) ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ---- Reduced motion: kill animation for users who ask for it ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

section.block { padding: 40px 0; }

/* =========================================================
   Top bar
   ========================================================= */
.topbar {
  background: var(--color-navy-dark);
  color: #C9D3EE;
  font-size: 13px;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar a { color: #C9D3EE; opacity: .9; }
.topbar a:hover { color: var(--color-yellow); opacity: 1; }
.topbar-right { gap: 16px; }

/* =========================================================
   Header
   ========================================================= */
header.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s;
}
header.site-header.scrolled { box-shadow: var(--shadow-lg); }
.header-main {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-badge {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  font-size: 22px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.logo-text {
  font-size: 22px;
  font-weight: 900;
  color: var(--color-navy);
  letter-spacing: -0.5px;
  line-height: 1;
}
.logo-text span { color: var(--color-yellow-dark); }
.logo-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.search-bar {
  flex: 1;
  position: relative; /* anchor for the live-search results dropdown */
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: 2px solid var(--color-yellow);
  border-radius: var(--radius-md);
  height: 48px;
  padding: 0 0 0 18px; /* no right padding — the button sits flush against the frame */
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
/* while showing live results, let the dropdown escape the rounded frame */
.search-bar.searching { overflow: visible; }
.search-bar:focus-within {
  border-color: var(--color-yellow-dark);
  box-shadow: 0 0 0 4px rgba(253, 185, 19, 0.18);
}
.search-bar input {
  flex: 1;
  min-width: 0; /* allow the input to shrink below its intrinsic width in tight headers */
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: var(--color-text);
}
.search-bar input::placeholder { color: var(--color-text-muted); }
.search-bar button {
  width: 54px;
  height: 100%;
  align-self: stretch;
  border-radius: 0 6px 6px 0; /* matches the frame's inner corner even when overflow is visible */
  background: var(--color-yellow);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.search-bar button:hover { background: var(--color-navy); color: var(--color-white); }

/* ---- Live-search results dropdown ---- */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 60;
  display: none;
}
.search-bar.searching .search-results { display: block; }
.sr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  transition: background .12s;
}
.sr-item:hover { background: var(--color-bg); }
.sr-item img {
  width: 46px; height: 46px;
  border-radius: 8px;
  object-fit: cover;
  background: #F0F2F8;
  flex-shrink: 0;
}
.sr-info { flex: 1; min-width: 0; }
.sr-brand { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .3px; }
.sr-name {
  font-size: 13px; font-weight: 600; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-price { font-size: 14px; font-weight: 900; color: var(--color-navy); white-space: nowrap; }
.sr-price .sr-old { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-decoration: line-through; margin-left: 6px; }
.sr-empty { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--color-text-muted); }
.sr-all {
  display: block;
  margin-top: 4px;
  padding: 11px 10px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 13px; font-weight: 700; color: var(--color-navy-light);
}
.sr-all:hover { color: var(--color-yellow-dark); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 700;
  position: relative;
  transition: background .15s;
}
.header-action:hover { background: var(--color-bg); }
.header-action i { font-size: 20px; }
.badge {
  position: absolute;
  top: 0;
  right: 8px;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: 'Manrope', sans-serif; /* Latin digit metrics center cleanly; Georgian font baseline sits low */
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
}
.header-action:hover .badge { transform: scale(1.12); background: var(--color-yellow); color: var(--color-navy); }
.hamburger-btn { display: none; }
.search-toggle { display: none; } /* mobile-only, revealed in the ≤767 block */

/* CSS Grid gotcha: grid items default to min-width:auto (min-content), which lets
   long words/number-inputs blow out a track past its 1fr size. Reset broadly. */
.product-grid > *, .cat-grid > *, .footer-grid > *,
.branch-grid > *, .form-grid-2 > *, .feature-row > * { min-width: 0; }

/* =========================================================
   Category nav
   ========================================================= */
.category-nav {
  background: var(--color-navy);
  color: var(--color-white);
}
.category-nav .container { display: flex; flex-wrap: wrap; align-items: stretch; position: relative; }

.catalog-toggle-wrap { position: static; flex-shrink: 0; } /* mega-menu anchors to the nav container instead */

.catalog-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-yellow);
  color: var(--color-navy);
  font-weight: 800;
  font-size: 14px;
  padding: 0 20px;
  height: 46px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-top: 0;
}
.catalog-toggle:hover { background: var(--color-yellow-dark); }
.catalog-toggle.open { background: var(--color-white); }
.catalog-toggle i.fa-chevron-down { font-size: 11px; transition: transform .15s; margin-left: 2px; }
.catalog-toggle.open i.fa-chevron-down { transform: rotate(180deg); }

/* ---- Mega menu ---- */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 24px;  /* container padding — aligns with the nav links row */
  right: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 36px;
  padding: 28px 32px;
  color: var(--color-text);
}
.mega-menu.open { display: grid; }
.mega-col { padding: 0; }
.mega-col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--color-bg);
  font-size: 14px;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: 12px;
}
.mega-col-title i { color: var(--color-yellow-dark); font-size: 16px; width: 18px; text-align: center; }
.mega-col-title:hover { color: var(--color-yellow-dark); }
.mega-col ul li { margin-bottom: 2px; }
.mega-col ul li a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: var(--color-text-muted);
  transition: color .15s, padding-left .15s;
}
.mega-col ul li a:hover { color: var(--color-navy); font-weight: 700; padding-left: 4px; }

.mega-overlay {
  position: fixed;
  inset: 0;
  z-index: 149;
  display: none;
}
.mega-overlay.open { display: block; }

.category-nav nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.category-nav nav a {
  padding: 0 14px;
  height: 46px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: #D7DEF2;
  border-bottom: 3px solid transparent;
  transition: all .15s;
}
.category-nav nav a:hover, .category-nav nav a.active {
  color: var(--color-yellow);
  border-bottom-color: var(--color-yellow);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding: 24px 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

/* ---- Hero layout: category sidebar + slider ---- */
.hero-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: stretch;
  position: relative; /* anchor for the full-panel flyout */
}
.hero-layout > div { min-width: 0; } /* let the 1fr column shrink below the slider's min-content */

.category-sidebar {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  /* position stays static — the flyout must anchor to .hero-layout, not the sidebar */
}
.category-sidebar-item { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.category-sidebar-item:not(:last-of-type) { border-bottom: 1px solid #F1F2F6; }
.category-sidebar-item > a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  transition: color .15s, padding-left .15s;
}
.category-sidebar-item > a i.cat-icon { width: 18px; text-align: center; color: #9AA3B5; font-size: 14px; flex-shrink: 0; transition: color .15s; }
.category-sidebar-item > a i.chev { margin-left: auto; font-size: 9px; color: #C4CAD6; transition: transform .15s, color .15s; }
.category-sidebar-item:hover > a,
.category-sidebar-item.active > a {
  color: var(--color-navy);
  padding-left: 22px;
}
.category-sidebar-item:hover > a i.cat-icon,
.category-sidebar-item.active > a i.cat-icon { color: var(--color-navy); }
.category-sidebar-item:hover > a i.chev,
.category-sidebar-item.active > a i.chev { color: var(--color-navy); transform: translateX(2px); }


/* Flyout — ONE shared panel right of the sidebar; grows as tall as its content needs */
.category-flyout {
  position: absolute;
  left: 304px; /* container padding 24 + sidebar 260 + gap 20 — aligns with the right column */
  right: 24px; /* container padding */
  top: 0;
  min-height: 100%;
  height: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px 30px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 120;
}
/* bridge the 20px gap between sidebar and panel so the mouse never "falls off" */
.category-flyout::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 24px;
}
.category-flyout.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.flyout-groups {
  columns: 4;
  column-gap: 30px;
}
.flyout-group {
  break-inside: avoid;
  margin-bottom: 24px;
}

.flyout-group h5 {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 10px;
}
.category-flyout a.flyout-link {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--color-text-muted);
  transition: color .15s, padding-left .15s;
}
.category-flyout a.flyout-link:hover { color: var(--color-navy); font-weight: 700; padding-left: 4px; }
.category-flyout a.flyout-link.see-all-link { color: var(--color-yellow-dark); font-weight: 700; margin-top: 2px; }
.category-flyout a.flyout-link.see-all-link:hover { color: var(--color-navy); }

/* ---- Hero slider ---- */
.hero-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 340px;
}
.hero-slider-track {
  display: flex;
  height: 100%;
  transition: transform .55s cubic-bezier(.65,0,.35,1);
}
.hero-slide {
  min-width: 100%;
  min-height: 340px;
  display: block;
  cursor: pointer;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: 0 4px 14px rgba(15, 42, 107, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 10;
  transition: background .15s, color .15s, transform .15s;
}
.slider-arrow:hover { background: var(--color-yellow); color: var(--color-navy); transform: translateY(-50%) scale(1.06); }
.slider-arrow.prev { left: 16px; }
.slider-arrow.next { right: 16px; }

.slider-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.slider-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all .2s;
}
.slider-dots button.active { background: var(--color-yellow); width: 24px; border-radius: 4px; }

.hero-promo-row { display: flex; gap: 20px; margin-top: 20px; }
.hero-promo-row .promo-card { flex: 1; }

/* ---- Minimal promo strip cards ---- */
.mini-promo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mini-promo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.mini-promo-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-yellow-light);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mini-promo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-promo-text strong { font-size: 14px; font-weight: 800; color: var(--color-navy); }
.mini-promo-text small { font-size: 12.5px; color: var(--color-text-muted); }
.mini-promo .arr { margin-left: auto; color: #C4CAD6; font-size: 14px; transition: color .18s, transform .18s; }
.mini-promo:hover .arr { color: var(--color-yellow-dark); transform: translateX(3px); }

.hero-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 340px;
  background: linear-gradient(120deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  display: flex;
  align-items: center;
  padding: 0 84px; /* leaves clear space for the 42px nav arrows at 16px offset */
  color: var(--color-white);
}
.hero-banner.slide-2 { background: linear-gradient(120deg, #1E3E8C 0%, #0F2A6B 100%); }
.hero-banner.slide-3 { background: linear-gradient(120deg, #101223 0%, #1E3E8C 100%); }
.hero-banner::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(253,185,19,0.35) 0%, rgba(253,185,19,0) 70%);
  border-radius: 50%;
}
.hero-banner .tag {
  display: inline-block;
  background: var(--color-yellow);
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.hero-banner h1 {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.15;
  max-width: 480px;
  margin-bottom: 14px;
}
.hero-banner h1 em { color: var(--color-yellow); font-style: normal; }
.hero-banner p { color: #C9D3EE; max-width: 420px; margin-bottom: 22px; font-size: 15px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn-primary { background: var(--color-yellow); color: var(--color-navy); }
.btn-primary:hover { background: var(--color-white); }
.btn-outline { background: transparent; border: 2px solid var(--color-white); color: var(--color-white); }
.btn-outline:hover { background: var(--color-white); color: var(--color-navy); }
.btn-navy { background: var(--color-navy); color: var(--color-white); }
.btn-navy:hover { background: var(--color-navy-light); }

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.promo-card {
  flex: 1;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}
.promo-card.yellow { background: linear-gradient(135deg, var(--color-yellow) 0%, #FFCE4D 100%); color: var(--color-navy); }
.promo-card.navy { background: linear-gradient(135deg, var(--color-navy-light) 0%, var(--color-navy-dark) 100%); }
.promo-card i { font-size: 30px; margin-bottom: 10px; opacity: .9; }
.promo-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.promo-card p { font-size: 13px; opacity: .85; margin-bottom: 12px; }
.promo-card .link { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 6px; }

/* ---- Bank installment line (plain text; ოფიციალური ლოგოები დაემატება პარტნიორობისას) ---- */
.bank-line {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 14px;
}
.bank-line i { font-size: 15px; opacity: .85; }

/* ---- Toast notification ---- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 16px);
  background: var(--color-navy);
  color: var(--color-white);
  padding: 13px 22px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 400;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast i { color: var(--color-yellow); font-size: 17px; }

/* ---- Empty cart state ---- */
.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
}
.cart-empty i { font-size: 44px; color: var(--color-border); margin-bottom: 16px; display: block; }
.cart-empty p { font-size: 16px; font-weight: 800; color: var(--color-navy); margin-bottom: 6px; }
.cart-empty span { font-size: 13px; }
.remove-item { color: var(--color-danger); font-size: 12px; font-weight: 700; padding: 0; }

/* =========================================================
   Feature strip
   ========================================================= */
.feature-strip {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.feature-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 22px 24px;
}
.feature-item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.feature-item > div { min-width: 0; overflow-wrap: break-word; }
.feature-item i {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-yellow-light);
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.feature-item strong { display: block; font-size: 14px; font-weight: 800; color: var(--color-navy); }
.feature-item span { font-size: 12.5px; color: var(--color-text-muted); }

/* =========================================================
   Category grid (circles)
   ========================================================= */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
}
.cat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 10px;
  text-align: center;
  transition: all .18s;
}
.cat-card:hover { border-color: var(--color-yellow); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-card .icon-wrap {
  width: 56px; height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  color: var(--color-navy);
}
.cat-card:hover .icon-wrap { background: var(--color-yellow); }
.cat-card span { font-size: 12.5px; font-weight: 700; color: var(--color-text); }

/* =========================================================
   Product cards
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* "ახალი პროდუქტები" — fixed at 12 items, column counts chosen so every row is
   always full (no dangling empty grid cells): 6×2 desktop, 4×3 tablet, 2×6 phone.
   ID beats .product-grid on specificity regardless of source order, so this
   reliably overrides the shared responsive rules — order below still matters
   for the two media queries to cascade correctly against each other. */
#newarrivals { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1023px) { #newarrivals { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { #newarrivals { grid-template-columns: repeat(2, 1fr); } }

.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all .18s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
.product-card:hover .price-now { color: var(--color-yellow-dark); }
.product-card .price-now { transition: color .2s; }
.product-card:active { transform: translateY(-2px) scale(.99); }

.product-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F0F2F8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.product-card:hover .product-thumb img { transform: scale(1.06); }

.product-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pill { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 5px; }
.pill.sale { background: var(--color-danger); color: var(--color-white); }
.pill.new { background: var(--color-navy); color: var(--color-white); }
.pill.hit { background: var(--color-yellow); color: var(--color-navy); }

.wishlist-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
  font-size: 14px;
  z-index: 2;
  transition: all .15s;
}
.wishlist-btn:hover { background: var(--color-yellow); }

.quick-add {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  transform: translateY(100%);
  background: var(--color-navy);
  color: var(--color-white);
  text-align: center;
  padding: 13px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .2s ease;
}
.product-card:hover .quick-add,
.product-card:focus-within .quick-add { transform: translateY(0); }
.quick-add:hover { background: var(--color-yellow); color: var(--color-navy); }

.product-info { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-brand { font-size: 11px; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.product-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-rating { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); }
.product-rating .stars { color: var(--color-yellow-dark); letter-spacing: 1px; }
.product-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.price-now { font-size: 18px; font-weight: 900; color: var(--color-navy); }
.price-old { font-size: 13px; color: var(--color-text-muted); text-decoration: line-through; }
.price-tag { font-size: 11px; color: var(--color-success); font-weight: 700; }
.installment { font-size: 11.5px; color: var(--color-text-muted); background: var(--color-bg); padding: 4px 8px; border-radius: 5px; display: inline-block; width: fit-content; }

/* ---- List view (catalog grid/list toggle) ---- */
.product-grid.list-view { display: flex; flex-direction: column; gap: 12px; }
.product-grid.list-view .product-card { flex-direction: row; align-items: stretch; }
.product-grid.list-view .product-thumb {
  width: 180px; min-width: 180px;
  aspect-ratio: 1 / 1;
}
.product-grid.list-view .product-info {
  flex: 1;
  justify-content: center;
  padding: 18px 22px;
  gap: 8px;
}
.product-grid.list-view .product-name { min-height: 0; font-size: 15px; }
.product-grid.list-view .installment { margin-top: 2px; }
/* the quick-add slides up from the bottom in grid view — in list view show it inline on the right */
.product-grid.list-view .quick-add {
  position: static;
  transform: none;
  width: auto;
  align-self: center;
  margin-right: 20px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .product-grid.list-view .product-thumb { width: 116px; min-width: 116px; }
  .product-grid.list-view .product-info { padding: 12px 14px; }
  .product-grid.list-view .product-name { font-size: 13.5px; }
  .product-grid.list-view .quick-add { display: none; } /* no hover on touch — tap the card instead */
}

/* =========================================================
   Banner strip (mid page)
   ========================================================= */
.banner-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.banner-item {
  border-radius: var(--radius-lg);
  min-height: 160px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.banner-item.b1 { background: linear-gradient(135deg, #1E3E8C, #0F2A6B); color: #fff; }
.banner-item.b2 { background: linear-gradient(135deg, #FDB913, #FFCE4D); color: var(--color-navy); }
.banner-item.b3 { background: linear-gradient(135deg, #1A1D33, #101223); color: #fff; }
.banner-item h3 { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.banner-item p { font-size: 13px; opacity: .85; margin-bottom: 14px; }

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter {
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.newsletter::after {
  content: "";
  position: absolute; left: -40px; bottom: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(253,185,19,0.25), transparent 70%);
}
.newsletter h3 { font-size: 24px; font-weight: 900; margin-bottom: 6px; }
.newsletter p { color: #C9D3EE; font-size: 14px; }
.newsletter-form { display: flex; gap: 10px; flex-shrink: 0; }
.newsletter-form input {
  width: 280px;
  height: 48px;
  border-radius: var(--radius-sm);
  border: none;
  padding: 0 16px;
  font-size: 14px;
  outline: none;
}

/* =========================================================
   Footer
   ========================================================= */
footer.site-footer { background: var(--color-navy-dark); color: #B7C2E3; padding-top: 48px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-col h4 { color: var(--color-white); font-size: 14px; font-weight: 800; margin-bottom: 16px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13.5px; transition: color .15s; }
.footer-col ul li a:hover { color: var(--color-yellow); }
.footer-col p { font-size: 13.5px; margin-bottom: 16px; color: #9AA6C9; }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.social-row a:hover { background: var(--color-yellow); color: var(--color-navy); }
.payment-icons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.payment-icons span {
  background: rgba(255,255,255,0.08);
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #D7DEF2;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 12.5px;
  color: #7E8AB0;
}
.footer-bottom .links { display: flex; gap: 18px; }

/* =========================================================
   Mobile filter/back-to-top misc
   ========================================================= */
.to-top {
  position: fixed;
  bottom: 26px; right: 26px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 200;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }

/* =========================================================
   Cart drawer
   ========================================================= */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(9,27,71,0.5);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  background: var(--color-white);
  z-index: 301;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0,0,0,0.15);
}
.cart-drawer.open { transform: translateX(0); }
.cart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--color-border);
}
.cart-header h3 { font-size: 17px; font-weight: 800; color: var(--color-navy); }
.cart-header button { font-size: 20px; color: var(--color-text-muted); }
.cart-items { flex: 1; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 16px; }
.cart-item { display: flex; gap: 12px; }
.cart-item img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #F0F2F8; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info .name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.cart-item-info .qty-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qty-btn {
  width: 24px; height: 24px; border-radius: 5px; background: var(--color-bg);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  flex-shrink: 0;
}
.cart-item-info .price { font-weight: 800; color: var(--color-navy); margin-left: auto; }
.remove-item { color: var(--color-danger); font-size: 12px; }
.cart-footer { padding: 18px 22px; border-top: 1px solid var(--color-border); }
.cart-total-row { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; margin-bottom: 14px; color: var(--color-navy); }
.cart-footer .btn { width: 100%; justify-content: center; }

/* =========================================================
   Breadcrumb / page header (catalog & product pages)
   ========================================================= */
.breadcrumb { font-size: 13px; color: var(--color-text-muted); padding: 16px 0; display: flex; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: var(--color-navy); }

.page-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.page-layout > * { min-width: 0; }

.filter-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 16px;
}
.filter-box h4 { font-size: 14px; font-weight: 800; color: var(--color-navy); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.filter-option { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13.5px; }
.filter-option input { accent-color: var(--color-yellow-dark); width: 16px; height: 16px; }
.price-range { display: flex; gap: 8px; margin-top: 10px; }
.price-range input {
  width: 100%; min-width: 0; height: 36px; border: 1px solid var(--color-border); border-radius: 6px;
  padding: 0 10px; font-size: 13px;
}
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--color-white); box-shadow: 0 0 0 1px var(--color-border); cursor: pointer; }
.swatch.active { box-shadow: 0 0 0 2px var(--color-yellow-dark); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 18px;
  font-size: 13.5px;
}
.toolbar .result-count { color: var(--color-text-muted); }
.toolbar .sort-select { display: flex; align-items: center; gap: 8px; }
.toolbar select { border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.view-toggle { display: flex; gap: 6px; }
.view-toggle button { width: 32px; height: 32px; border-radius: 6px; background: var(--color-bg); display: flex; align-items: center; justify-content: center; }
.view-toggle button.active { background: var(--color-navy); color: var(--color-white); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.pagination a {
  width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--color-white); border: 1px solid var(--color-border); font-size: 13.5px; font-weight: 700;
}
.pagination a.active { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); }
.pagination a:hover:not(.active) { border-color: var(--color-yellow); }

/* =========================================================
   Product page
   ========================================================= */
.product-view { display: grid; grid-template-columns: 480px 1fr 320px; gap: 32px; padding: 24px 0 48px; }
.product-view > * { min-width: 0; }
.gallery-main { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1/1; background: #F0F2F8; margin-bottom: 12px; cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.gallery-thumbs { display: flex; gap: 10px; }
.gallery-thumbs img { width: 76px; height: 76px; border-radius: 8px; object-fit: cover; border: 2px solid var(--color-border); cursor: pointer; background: #F0F2F8; }
.gallery-thumbs img.active { border-color: var(--color-yellow-dark); }

.pv-title { font-size: 24px; font-weight: 800; color: var(--color-navy); margin-bottom: 10px; }
.pv-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--color-text-muted); margin-bottom: 18px; }
.pv-price-box { background: var(--color-bg); border-radius: var(--radius-md); padding: 18px; margin-bottom: 18px; }
.pv-price-now { font-size: 30px; font-weight: 900; color: var(--color-navy); }
.pv-price-old { font-size: 15px; text-decoration: line-through; color: var(--color-text-muted); margin-left: 10px; }
.pv-save { display: inline-block; background: var(--color-danger); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 5px; margin-left: 10px; }

.pv-option-group { margin-bottom: 18px; }
.pv-option-group label.title { font-size: 13px; font-weight: 700; color: var(--color-navy); margin-bottom: 10px; display: block; }
.option-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.option-chip { padding: 9px 16px; border: 2px solid var(--color-border); border-radius: 8px; font-size: 13px; font-weight: 700; }
.option-chip.active { border-color: var(--color-yellow-dark); background: var(--color-yellow-light); color: var(--color-navy); }

.pv-actions { display: flex; gap: 10px; margin-bottom: 20px; }
.qty-selector { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.qty-selector button { width: 42px; height: 48px; font-size: 16px; font-weight: 800; color: var(--color-navy); }
.qty-selector span { width: 36px; text-align: center; font-weight: 700; }

.pv-sidebox { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 16px; }
.pv-sidebox h4 { font-size: 13px; font-weight: 800; color: var(--color-navy); margin-bottom: 12px; }
.trust-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 12.5px; color: var(--color-text-muted); }
.trust-item i { color: var(--color-success); margin-top: 2px; }

.pv-tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--color-border); margin: 40px 0 20px; }
.pv-tabs button { padding: 12px 20px; font-size: 14px; font-weight: 700; color: var(--color-text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pv-tabs button.active { color: var(--color-navy); border-color: var(--color-yellow-dark); }
.pv-tab-content { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; font-size: 14px; color: var(--color-text); line-height: 1.8; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1360px) {
  .hero-banner h1 { font-size: 32px; }
  .hero-banner { padding: 0 76px; }
}
@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .cat-grid { grid-template-columns: repeat(6, 1fr); }
  .product-view { grid-template-columns: 420px 1fr; }
  .pv-sidebar { grid-column: 1 / -1; }
  .category-sidebar { display: none; }
  /* the hover flyout is JS-appended with a fixed left:304px — hide it too or it juts past the edge */
  .category-flyout { display: none !important; }
  .hero-layout { grid-template-columns: 1fr; }
}
/* ---- Tablet: hamburger menu replaces topbar + category nav bar ---- */
@media (max-width: 1023px) {
  .topbar { display: none; }
  .category-nav { display: none; }
  .hamburger-btn { display: flex; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-promo-row { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-layout { grid-template-columns: 1fr; }
  .feature-strip .container { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .banner-strip { grid-template-columns: 1fr; }
  .newsletter { flex-direction: column; text-align: center; }
  .newsletter-form input { width: 100%; }
  .product-view { grid-template-columns: 1fr; }
}

/* =========================================================
   New pages: auth / info / cart / compare / checkout / help
   ========================================================= */

/* compare button on product cards (sits under the wishlist heart) */
.compare-btn {
  position: absolute;
  top: 48px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
  font-size: 13px;
  z-index: 2;
  transition: all .15s;
}
.compare-btn:hover, .compare-btn.active { background: var(--color-yellow); }

/* language dropdown in the topbar */
.lang-dd { position: relative; display: inline-flex; }
.lang-dd .lang-btn { color: #C9D3EE; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.lang-dd .lang-btn:hover { color: var(--color-yellow); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 130px;
  padding: 6px;
  display: none;
  z-index: 300;
}
.lang-dd.open .lang-menu { display: block; }
.lang-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 6px;
  font-size: 13px; color: var(--color-text);
}
.lang-menu button:hover { background: var(--color-bg); color: var(--color-navy); }

/* centered auth card (login / register / forgot) */
.auth-wrap { display: flex; justify-content: center; padding: 48px 0 64px; }
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px;
}
.auth-card h1 { font-size: 24px; color: var(--color-navy); margin-bottom: 6px; }
.auth-card .auth-sub { font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 24px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; font-weight: 700; color: var(--color-navy); margin-bottom: 6px; }
.form-field .input-wrap { position: relative; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; height: 46px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 3px rgba(253,185,19,0.15);
}
.form-field .field-error { color: var(--color-danger); font-size: 12px; margin-top: 5px; display: none; }
.form-field.invalid input { border-color: var(--color-danger); }
.form-field.invalid .field-error { display: block; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); font-size: 14px;
}
.auth-links { display: flex; justify-content: space-between; font-size: 13px; margin-top: 18px; }
.auth-links a { color: var(--color-navy-light); font-weight: 700; }
.auth-links a:hover { color: var(--color-yellow-dark); }
.check-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; margin-bottom: 16px; }
.check-row input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-yellow-dark); }

/* generic info pages (about / terms / warranty) */
.info-page { max-width: 860px; margin: 0 auto; padding: 8px 0 56px; }
.info-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  line-height: 1.75;
  font-size: 14.5px;
}
.info-card h1 { font-size: 26px; color: var(--color-navy); margin-bottom: 18px; }
.info-card h3 { font-size: 17px; color: var(--color-navy); margin: 26px 0 10px; }
.info-card p { margin-bottom: 12px; }
.info-card ul { padding-left: 20px; list-style: disc; margin-bottom: 12px; }
.info-card ul li { margin-bottom: 6px; }

/* accordion */
.acc-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 10px; background: var(--color-white); overflow: hidden; }
.acc-item > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; font-size: 14.5px; font-weight: 700; color: var(--color-navy); text-align: left;
}
.acc-item > button i { transition: transform .2s; color: var(--color-text-muted); }
.acc-item.open > button i { transform: rotate(180deg); color: var(--color-yellow-dark); }
.acc-body { display: none; padding: 0 20px 18px; font-size: 14px; color: var(--color-text); line-height: 1.7; }
.acc-item.open .acc-body { display: block; }

/* cart page */
.cartpage-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; padding-bottom: 56px; }
.cartpage-layout > * { min-width: 0; }
.cartpage-items { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.cartpage-row {
  display: grid; grid-template-columns: 84px 1fr auto auto auto;
  gap: 18px; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
}
.cartpage-row:last-child { border-bottom: none; }
.cartpage-row > * { min-width: 0; }
.cartpage-row img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: #F0F2F8; }
.cartpage-row .cp-name { font-size: 14px; font-weight: 700; }
.cartpage-row .cp-brand { font-size: 12px; color: var(--color-text-muted); }
.cartpage-row .cp-line-price { font-size: 16px; font-weight: 900; color: var(--color-navy); min-width: 80px; text-align: right; }
.cp-remove { color: var(--color-danger); font-size: 15px; padding: 8px; }
.summary-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 24px;
  position: sticky; top: calc(var(--header-h) + 16px);
}
.summary-card h3 { font-size: 17px; color: var(--color-navy); margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; color: var(--color-text-muted); }
.summary-row.total { font-size: 17px; font-weight: 900; color: var(--color-navy); border-top: 1px solid var(--color-border); padding-top: 14px; margin-top: 14px; }
.summary-card .btn { width: 100%; justify-content: center; margin-top: 14px; }

/* compare table */
.compare-scroll { overflow-x: auto; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.compare-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13.5px; }
.compare-table th, .compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.compare-table th { width: 160px; color: var(--color-navy); font-weight: 800; background: var(--color-bg); }
.compare-table img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; background: #F0F2F8; }
.compare-table .ct-price { font-size: 17px; font-weight: 900; color: var(--color-navy); }

/* checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; padding-bottom: 56px; }
.checkout-layout > * { min-width: 0; }
.checkout-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 18px; }
.checkout-card h3 { font-size: 16px; color: var(--color-navy); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.checkout-card h3 .step-n {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-yellow); color: var(--color-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; font-family: 'Manrope', sans-serif;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pay-option {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pay-option:hover { border-color: var(--color-yellow); }
.pay-option input { accent-color: var(--color-yellow-dark); width: 17px; height: 17px; }
.pay-option i { color: var(--color-navy); width: 20px; text-align: center; }
.pay-option .pay-sub { font-size: 12px; color: var(--color-text-muted); display: block; }
.summary-mini-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.summary-mini-row img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #F0F2F8; }
.summary-mini-row .smr-name { font-size: 12.5px; font-weight: 600; flex: 1; }
.summary-mini-row .smr-price { font-size: 13px; font-weight: 800; color: var(--color-navy); white-space: nowrap; }

/* success box + order tracking timeline */
.success-box { text-align: center; padding: 56px 24px; }
.success-box .success-ic {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-success); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; margin: 0 auto 20px;
}
.success-box h2 { color: var(--color-navy); margin-bottom: 8px; }
.success-box p { color: var(--color-text-muted); margin-bottom: 22px; }
.track-timeline { margin-top: 28px; }
.track-step { display: flex; gap: 16px; position: relative; padding-bottom: 26px; }
.track-step::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 0;
  width: 2px; background: var(--color-border);
}
.track-step:last-child::before { display: none; }
.track-step .ts-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-border); color: var(--color-white);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.track-step.done .ts-dot { background: var(--color-success); }
.track-step.current .ts-dot { background: var(--color-yellow); color: var(--color-navy); }
.track-step strong { display: block; font-size: 14px; color: var(--color-navy); }
.track-step span { font-size: 12.5px; color: var(--color-text-muted); }

/* ---- photo category banners (ChatGPT image with navy left space, text overlay) ---- */
.photo-banner {
  position: relative;
  display: block;
  height: 150px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-navy);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.photo-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.photo-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: transform .35s ease;
}
.photo-banner:hover > img { transform: scale(1.05); }
/* text sits on the empty navy left third of the generated image */
.photo-banner .pb-text {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 20px 0 26px;
  max-width: 55%;
  z-index: 2;
}
.photo-banner .pb-text h3 {
  font-family: 'Dachi', 'Mersad', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--color-white);
  line-height: 1.2;
}
.photo-banner .pb-text span { font-size: 12.5px; font-weight: 600; color: #C9D3EE; }

/* ---- colour swatches on the product page ---- */
.color-select { display: flex; gap: 12px; flex-wrap: wrap; }
.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  position: relative;
  transition: transform .15s;
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.active::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--color-yellow-dark);
}

/* white product photos on light thumbs read better on a soft grey */
.gallery-main img[src$=".webp"], .gallery-thumbs img[src$=".webp"],
.product-thumb img[src$=".webp"] { background: #F0F2F8; }

/* ---- unified services + brands card ---- */
.service-brand-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 28px 20px;
}
.feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 860px) {
  .feature-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- brand marquee (loops right-to-left, pauses on hover) ---- */
.brand-marquee {
  overflow: hidden;
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
/* inline variant — lives inside the unified card, no own frame */
.brand-marquee.inline {
  border: none;
  background: transparent;
  padding: 14px 0 4px; /* top headroom for the hover lift + shadow — overflow:hidden must not clip the card's top edge */
  border-radius: 0;
}
.brand-marquee.inline .brand-card { background: var(--color-bg); border-color: transparent; }
.brand-marquee.inline .brand-card:hover { background: var(--color-white); border-color: var(--color-yellow); }
.brand-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: brand-scroll 30s linear infinite;
}
.brand-marquee:hover .brand-track { animation-play-state: paused; }
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* track is duplicated by JS — -50% lands exactly on the copy */
}
.brand-card {
  width: 108px;
  height: 72px;
  flex-shrink: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.brand-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-yellow); }
.brand-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(.65);
  transition: filter .2s;
}
.brand-card:hover img { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* branch cards */
.branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.branch-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; }
.branch-card h3 { font-size: 16px; color: var(--color-navy); margin-bottom: 12px; }
.branch-card p { font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 8px; display: flex; gap: 9px; align-items: flex-start; }
.branch-card p i { color: var(--color-yellow-dark); width: 16px; margin-top: 3px; }

@media (max-width: 900px) {
  .cartpage-layout, .checkout-layout { grid-template-columns: 1fr; }
  .branch-grid { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* =========================================================
   Responsive navigation — hamburger (tablet) + bottom-nav (mobile)
   ========================================================= */

/* ---- Hamburger button — hidden on desktop, shown ≤1023px via the block above ---- */
.hamburger-btn {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--color-bg); }
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---- Off-canvas mobile/tablet nav ---- */
.mobile-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(9,27,71,0.55);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-nav {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: min(340px, 86vw);
  background: var(--color-white);
  z-index: 500;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.65,0,.35,1);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-white); z-index: 2;
}
.mobile-nav-close {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy); font-size: 16px;
  background: var(--color-bg);
}
.mobile-nav-close:hover { background: var(--color-border); }
.mobile-nav-search { padding: 16px 20px 0; }
.mobile-nav-search .search-bar { height: 46px; border-width: 1.5px; }
.mobile-nav-section { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; }
.mobile-nav-section:last-child { border-bottom: none; }
.mnav-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-muted); margin-bottom: 8px; }
.mobile-nav-section a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px;
  font-size: 14.5px; font-weight: 600; color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s, padding-left .15s;
}
.mobile-nav-section a:hover { color: var(--color-navy); background: var(--color-bg); padding-left: 8px; }
.mobile-nav-section a i { width: 18px; text-align: center; color: var(--color-yellow-dark); }

/* ---- Bottom nav (mobile only) ---- */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(15,42,107,0.08);
  z-index: 250;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bn-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 8px 2px 7px;
  font-size: 10px; font-weight: 700;
  color: var(--color-text-muted);
  transition: color .15s;
}
.bn-item:hover, .bn-item:active { color: var(--color-navy); }
.bn-icon { position: relative; display: inline-flex; }
.bn-icon i { font-size: 19px; }
.bn-icon .badge { top: -7px; right: -11px; }

/* ---- Tablet (768–1023): hamburger active, full-size grids already handled above ---- */
@media (max-width: 1023px) and (min-width: 768px) {
  .header-main { gap: 16px; }
}

/* ---- Mobile (≤767): shrink header, show bottom-nav, hide duplicate icons ---- */
@media (max-width: 767px) {
  :root { --header-h: 62px; }
  .header-main { gap: 10px; }
  .logo-badge { width: 38px; height: 38px; border-radius: var(--radius-sm); }
  .logo-img { width: 26px; height: 26px; }
  .logo-text { font-size: 17px; }
  .logo-sub { display: none; }
  .search-bar { height: 40px; padding-left: 14px; }
  .search-bar input { font-size: 13px; }
  .search-bar button { width: 42px; font-size: 14px; }
  .header-actions { gap: 0; }
  .header-action { padding: 6px 8px; }
  .header-action i { font-size: 18px; }
  .header-action span:not(.badge) { display: none; }
  .header-action[href="wishlist.html"],
  .header-action[href="compare.html"] { display: none; }

  /* push the action icons to the far right (no flex search-bar fills the middle now) + breathing room */
  .header-actions { margin-left: auto; gap: 4px; }

  /* ---- Phone search: collapse the input to an icon; expand over the wordmark on tap ---- */
  .header-main > .search-bar { display: none; }           /* header search hidden by default */
  .search-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--radius-sm);
    color: var(--color-navy); font-size: 17px; flex-shrink: 0;
  }
  .search-toggle:hover { background: var(--color-bg); }
  /* expanded state: search bar overlays the wordmark (past the logo badge); the toggle icon turns into × at the far right */
  .site-header.search-active .header-main { position: relative; }
  .site-header.search-active .header-main > .search-bar {
    display: flex;
    position: absolute;
    left: 58px;   /* clears the 38px logo badge — badge stays visible, wordmark gets covered */
    right: 66px;  /* clears the 42px toggle button + the container's 16px edge padding, with a small gap */
    top: 50%; transform: translateY(-50%);
    height: 44px;
    z-index: 30;
    background: var(--color-white);
  }
  /* hide the menu + cart while searching — search-toggle is last-in-DOM so it stays anchored to the
     same right-edge position whether open or closed (no jump: hiding earlier siblings doesn't move it) */
  .site-header.search-active .header-actions > .hamburger-btn,
  .site-header.search-active .header-actions > .header-action { display: none; }
  .site-header.search-active .search-toggle { position: relative; z-index: 31; color: var(--color-navy); }

  .bottom-nav { display: flex; }
  body { padding-bottom: 62px; }
  .to-top { bottom: 76px; width: 42px; height: 42px; font-size: 16px; }

  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  section.block { padding: 28px 0; }
  .hero { padding: 14px 0; }
  .hero-slider, .hero-slide { min-height: 200px; }
  .container { padding: 0 16px; }

  /* cart page rows: 5-column grid doesn't fit — restack into two rows */
  .cartpage-row {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas: "thumb info remove" "thumb qty price";
    row-gap: 10px;
    padding: 16px;
  }
  .cartpage-row .cp-thumb { grid-area: thumb; }
  .cartpage-row .cp-thumb img { width: 64px; height: 64px; }
  .cartpage-row .cp-info { grid-area: info; }
  .cartpage-row .qty-selector { grid-area: qty; justify-self: start; }
  .cartpage-row .cp-line-price { grid-area: price; text-align: left; min-width: 0; }
  .cartpage-row .cp-remove { grid-area: remove; justify-self: end; }

  /* catalog toolbar: stack so the long sort <select> can't overflow */
  .toolbar { flex-wrap: wrap; gap: 12px; }
  .toolbar > div { width: 100%; justify-content: space-between; }
  .sort-select { flex: 1; min-width: 0; }
  .toolbar select { flex: 1; min-width: 0; max-width: 100%; }

  /* product actions: qty + icon buttons on row 1, full-width add-to-cart on row 2 */
  .pv-actions { flex-wrap: wrap; }
  /* inline style="flex:1" on the button beats a selector — need !important to force full row */
  .pv-actions #addToCartBtn { order: 2; flex: 1 1 100% !important; }
  .pv-actions .qty-selector,
  .pv-actions #pvWishBtn,
  .pv-actions #pvCompareBtn { order: 1; }

  /* product tabs: too wide to fit — scroll horizontally inside their own strip */
  .pv-tabs { overflow-x: auto; scrollbar-width: none; }
  .pv-tabs::-webkit-scrollbar { display: none; }
  .pv-tabs button { white-space: nowrap; flex-shrink: 0; }

  /* long single Georgian words (e.g. "კონფიდენციალურობის") must break, not overflow */
  .info-card h1 { font-size: 21px; }
  .info-card h1, .info-card h3, .info-card p, .info-card li,
  .auth-card h1, .pv-title, .newsletter h3 { overflow-wrap: break-word; }

  /* section headings: 24px in the wide Dachi display face wrapped to 2 lines on phones —
     scale down and keep them on one line, letting the "see all" link yield space instead */
  .section-title { gap: 12px; margin-bottom: 14px; }
  .section-title h2 { font-size: 18px; padding-left: 12px; white-space: nowrap; }
  .section-title h2::before { width: 4px; }
  .section-title .see-all { font-size: 12.5px; flex-shrink: 0; white-space: nowrap; }
}

/* ---- Small phones (≤479) ---- */
@media (max-width: 479px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .installment { display: none; }
  .hero-slider, .hero-slide { min-height: 160px; }
  .bn-item span:last-child { font-size: 9.5px; }
  .auth-card { padding: 24px 18px; }
  .info-card { padding: 24px 18px; }
  .feature-row { grid-template-columns: 1fr; gap: 16px; }

  /* gallery thumbs wrap instead of pushing past the edge on very narrow phones */
  .gallery-thumbs { flex-wrap: wrap; }
  /* footer legal row: stack copyright + links so they never collide */
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer-bottom .links { flex-wrap: wrap; justify-content: center; }

  /* narrowest phones: shrink the heading further so "ახალი პროდუქტები" + the link still
     share one line without pushing the page into horizontal scroll */
  .section-title h2 { font-size: 16px; padding-left: 10px; }
  .section-title .see-all { font-size: 11.5px; gap: 4px; }
}

/* Below ~375px the longest heading plus the full "ყველას ნახვა" label no longer fit on one
   line, and the h2's nowrap would push the page into horizontal scroll. Collapse the link to
   its arrow — font-size:0 hides the text node visually but keeps it for screen readers. */
@media (max-width: 374px) {
  .section-title .see-all { font-size: 0; gap: 0; }
  .section-title .see-all i { font-size: 13px; }
}

/* =========================================================
   Category Showcase — single-category horizontal product rail
   (homepage, one category at a time for now; id list will move
   to an admin-configurable setting later). Tokens only, no new hex.
   ========================================================= */
.cat-showcase {
  padding: 36px 0;
  --cs-w: 200px;
  --cs-gap: 12px;
}
@media (min-width: 480px) { .cat-showcase { --cs-w: 230px; --cs-gap: 14px; } }
/* tablet and up: derive the card width from how many should be visible at once,
   so the rail always shows a whole number of cards instead of an arbitrary sliver */
@media (min-width: 768px)  { .cat-showcase { --cs-gap: 16px; --cs-per-view: 3; } }
@media (min-width: 1100px) { .cat-showcase { --cs-gap: 18px; --cs-per-view: 4; } }

/* soft tinted panel holding the whole rail — no heading above it by design */
.cat-showcase-panel {
  background: linear-gradient(180deg, rgba(15,42,107,0.075) 0%, rgba(15,42,107,0.035) 100%);
  border-radius: var(--radius-lg);
  padding: 20px 20px 6px;
}

.cat-showcase-wrap { position: relative; }

.cat-showcase-track {
  display: flex;
  gap: var(--cs-gap, 16px); /* falls back to 16px when used outside a .cat-showcase (e.g. recently-viewed) */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px 2px 16px; /* top padding absorbs the hover-lift so it never forces a scrollbar */
}
.cat-showcase-track::-webkit-scrollbar { display: none; }

/* same slider mechanics reused for a plain .product-card row (e.g. "ბოლოს ნანახი") —
   the track doesn't care what's inside, only these cards need their own flex-basis */
.cat-showcase-track > .product-card {
  flex: 0 0 210px;
  width: 210px;
  scroll-snap-align: start;
}
@media (min-width: 480px) { .cat-showcase-track > .product-card { flex-basis: 230px; width: 230px; } }
@media (min-width: 768px) { .cat-showcase-track > .product-card { flex-basis: 250px; width: 250px; } }

.cat-showcase-item {
  position: relative;
  flex: 0 0 var(--cs-w);
  width: var(--cs-w);
  scroll-snap-align: start;
}
/* tablet and up, size cards from --cs-per-view so a whole number fits the visible rail.
   Must come after the rule above — media queries add no specificity, so source order decides. */
@media (min-width: 768px) {
  .cat-showcase-item {
    flex: 0 0 calc((100% - (var(--cs-per-view) - 1) * var(--cs-gap)) / var(--cs-per-view));
    width: auto;
  }
}

/* Card: two-tone split navy block (light band top, dark band bottom — a hard
   seam, not a blend), product photo floats free with no background box,
   arrow-CTA anchored in the bottom-left corner. Reinterpreted in Mobiveli
   navy/yellow (never their blue), per the reference's exact layout. */
.cat-showcase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  aspect-ratio: 1 / 1.02; /* height follows the card width so bigger cards stay proportional */
  min-height: 200px;
  padding: 16px 16px 14px;
  background: linear-gradient(to bottom,
    var(--color-navy-light) 0%, var(--color-navy-light) 60%,
    var(--color-navy) 60%, var(--color-navy) 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-showcase-card:hover,
.cat-showcase-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.cat-showcase-card:active { transform: translateY(-2px) scale(.99); }

/* text content sits above the floating photo */
.cat-showcase-badge,
.cat-showcase-name { position: relative; z-index: 2; }

/* brand mark — sits bare on the card, no pill or frame behind it.
   Holds an official wordmark when available, falls back to uppercase text. */
.cat-showcase-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  color: var(--color-white); /* text fallback for brands with no logo file */
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}
/* wordmarks vary wildly in aspect ratio — cap the height and let width follow,
   so every mark ends up optically the same size regardless of the logo's shape.
   The filter renders any source (dark SVG, coloured PNG) as pure white while
   keeping its alpha, so the stored files stay untouched originals. */
.cat-showcase-logo {
  height: 15px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

.cat-showcase-name {
  margin-top: 10px;
  font-family: 'Mersad', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* photo floats free (transparent placeholder / background-removed real photo later),
   no card behind it — straddles the light/dark seam like the reference. */
.cat-showcase-photo-img {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: 88%;      /* keyboards are wide/landscape — let them use the card's full width */
  max-height: 50%; /* price row is gone — the photo takes the freed space */
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,0.28));
  transition: transform .3s ease;
}
.cat-showcase-card:hover .cat-showcase-photo-img { transform: translateX(-50%) scale(1.06); }

/* arrow affordance — bottom-left corner, floats on the dark band (matches the reference's position).
   Decorative: the whole card is the link, so this is a visual cue, not a separate tap target. */
.cat-showcase-add {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  box-shadow: var(--shadow-sm);
  transition: background .18s ease, transform .18s ease;
}
.cat-showcase-card:hover .cat-showcase-add,
.cat-showcase-card:focus-visible .cat-showcase-add {
  background: var(--color-yellow-dark);
  transform: translateX(3px);
}

/* arrows — same visual language as .slider-arrow, desktop/mouse affordance only */
.cat-showcase-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: 0 4px 14px rgba(15,42,107,0.18);
  align-items: center; justify-content: center;
  font-size: 14px;
  z-index: 10;
  transition: background .15s, color .15s, transform .15s, opacity .15s;
}
.cat-showcase-arrow:hover { background: var(--color-yellow); color: var(--color-navy); transform: translateY(-50%) scale(1.06); }
.cat-showcase-arrow.is-disabled { opacity: 0; pointer-events: none; }
.cat-showcase-arrow-prev { left: -6px; }
.cat-showcase-arrow-next { right: -6px; }

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .cat-showcase-arrow { display: flex; }
}

@media (max-width: 767px) {
  .cat-showcase { padding: 24px 0; }
  .cat-showcase-panel { padding: 14px 12px 4px; border-radius: var(--radius-md); }
  /* let the rail bleed to the panel edges so a partial card hints "scroll me" */
  .cat-showcase-track { margin: 0 -12px; padding: 6px 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-showcase-card, .cat-showcase-photo-img, .cat-showcase-add, .cat-showcase-arrow { transition: none; }
  .cat-showcase-track { scroll-behavior: auto; }
}

/* =========================================================
   Blog — homepage teaser (3) + blog.html full listing
   ========================================================= */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.blog-card-cover {
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card-cover i { font-size: 38px; color: rgba(255,255,255,0.85); }
.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  flex: 1;
}
.blog-card-cat {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--color-yellow-dark);
}
.blog-card-title {
  font-family: 'Dachi', 'Mersad', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-excerpt {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-meta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.blog-card-meta .dot { opacity: .5; }

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }