/* =====================================================
   AKORE — Professional Design v2
   Dark + Light Hybrid · 2026
   ===================================================== */

:root {
  /* Colors */
  --bg:        #f8fafc;
  --bg-alt:    #f1f5f9;
  --dark:      #080d18;
  --dark2:     #0d1525;
  --dark3:     #111e30;
  --card:      #ffffff;
  --text:      #0f172a;
  --muted:     #64748b;
  --line:      #e2e8f0;
  --blue:      #2563eb;
  --blue-light:#3b82f6;
  --green:     #10b981;
  --green-dim: #059669;
  --purple:    #7c3aed;
  --red:       #ef4444;

  /* Radius */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
  --shadow-xl: 0 32px 80px rgba(0,0,0,.18);

  /* Layout */
  --wrap: min(1260px, calc(100% - 48px));
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

.container { width: var(--wrap); margin: 0 auto; }
.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }


/* ═══════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════ */
.header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(226,232,240,.8);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 72px;
}

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.logo-img {
  width: 30px; height: 30px;
  object-fit: contain;
  /* Black icon on white background — no inversion needed */
  display: block;
}
.logo-name {
  font-size: 16px; font-weight: 800;
  letter-spacing: .1em; color: var(--dark);
  text-transform: uppercase;
}

/* Nav */
.nav { display: flex; gap: 4px; }
.nav a {
  font-weight: 600; font-size: 14px;
  color: var(--muted);
  padding: 7px 14px; border-radius: 8px;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--text); background: var(--bg-alt); }

/* ── Lang dropdown ─────────────────────────────────────────────── */
.lang-dropdown { position: relative; }
.lang-trigger {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 1.5px solid var(--line);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
  color: var(--text); font-size: 13px; font-weight: 700;
  letter-spacing: .05em; transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
}
.lang-trigger:hover,
.lang-dropdown.open .lang-trigger {
  background: var(--bg); border-color: var(--blue); color: var(--blue);
}
.lang-trigger-globe { opacity: .55; flex-shrink: 0; color: var(--muted); }
.lang-trigger:hover .lang-trigger-globe,
.lang-dropdown.open .lang-trigger-globe { opacity: .9; color: var(--blue); }
.lang-chevron {
  flex-shrink: 0; opacity: .5; color: var(--muted);
  transition: transform .25s ease, opacity .15s, color .15s;
}
.lang-trigger:hover .lang-chevron { opacity: .8; color: var(--blue); }
.lang-dropdown.open .lang-chevron { transform: rotate(180deg); opacity: 1; color: var(--blue); }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #1e2b3a; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.4);
  overflow: hidden; min-width: 148px;
  opacity: 0; transform: translateY(-6px) scale(.97);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1000;
}
.lang-dropdown.open .lang-menu {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
}
.lang-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,.65); font-family: inherit;
  font-size: 13px; text-align: left;
  transition: background .12s, color .12s;
}
.lang-menu button:hover    { background: rgba(255,255,255,.08); color: #fff; }
.lang-menu button.active   { color: #fff; }
.lang-menu button.active .lang-code { color: var(--blue-light); }
.lang-code  { font-weight: 800; font-size: 13px; letter-spacing: .06em; min-width: 28px; }
.lang-name  { font-size: 12px; font-weight: 500; opacity: .75; }
.lang-check { margin-left: auto; opacity: 0; color: var(--blue-light); }
.lang-menu button.active .lang-check { opacity: 1; }

@media (max-width: 680px) { .nav { display: none; } }


/* ═══════════════════════════════════════════════════
   HERO — Dark dramatic section
═══════════════════════════════════════════════════ */
.hero {
  background: var(--dark);
  color: #fff;
  padding: 104px 0 96px;
  overflow: hidden;
  position: relative;
}

/* Background grid pattern */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
/* Glow blobs */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 75% 40%, rgba(37,99,235,.22), transparent),
    radial-gradient(ellipse 40% 50% at 20% 70%, rgba(16,185,129,.12), transparent);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  position: relative; z-index: 1;
}
.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 620px;
}
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-left { max-width: 760px; }
}

.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.65);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 6px var(--green); }
  50% { box-shadow: 0 0 16px var(--green), 0 0 24px rgba(16,185,129,.4); }
}

.hero h1 {
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 900; line-height: 1.0;
  letter-spacing: -.04em;
  margin-bottom: 28px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #60a5fa 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 17px; color: rgba(255,255,255,.55);
  line-height: 1.75; max-width: 44ch;
  margin-bottom: 40px;
}

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Hero right: 3D-printing time-lapse video slot ───────────── */
.hero-right {
  position: relative;
  min-width: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-video-frame {
  position: relative;
  width: 100%;
  max-width: 600px;
  /* 16:9 matches the source video (1280×720) — no cropping, no letterbox */
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #0b1220 0%, #1a2138 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 24px 60px -20px rgba(0,0,0,.65),
    0 0 0 1px rgba(96,165,250,.08) inset,
    0 0 60px -10px rgba(37,99,235,.25);
  transform: translateZ(0); /* avoid subpixel jitter on autoplay */
}
.hero-video-frame::after {
  /* subtle inner gradient ring for depth */
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(120% 60% at 50% 100%, rgba(16,185,129,.06), transparent 60%);
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 960px) {
  .hero-right { margin-top: 12px; }
  .hero-video-frame { max-width: 100%; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .hero-video-frame { aspect-ratio: 16 / 9; border-radius: 14px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px;
  border-radius: 999px;
  font-weight: 700; font-size: 15px;
  border: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
  white-space: nowrap; letter-spacing: .01em;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-white {
  background: #fff; color: var(--dark);
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.btn-white:hover { box-shadow: 0 12px 36px rgba(0,0,0,.32); }

.btn-ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.2);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
}

/* Hero video-tutorial button — same ghost style but lets the SVG play-icon
   sit comfortably next to the label and picks up brand-blue on hover so
   it reads as "play content", not "navigate somewhere". */
.btn-hero-video {
  display: inline-flex; align-items: center;
  font: inherit; letter-spacing: inherit;
}
.btn-hero-video:hover {
  color: #bfdbfe;
  border-color: rgba(96,165,250,.55);
  background: rgba(59,130,246,.14);
}

.btn-order {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #fff; width: 100%; min-height: 52px;
  font-size: 16px; border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(37,99,235,.4);
  letter-spacing: .02em;
  margin-top: 4px;
}
.btn-order:hover {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
  box-shadow: 0 12px 32px rgba(37,99,235,.5);
}

/* Trust signals — appears above pay buttons. Subtle green box with three
   reassurance points (security, warranty, local support). Reduces the
   psychological barrier of clicking "Padaryti užsakymą" — customer
   sees concrete promises right before the action button. */
.trust-signals {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  margin-top: 8px;
  margin-bottom: 4px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #166534;
  font-weight: 600;
}
.trust-item svg { flex-shrink: 0; }

/* Payment buttons row */
.payment-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.btn-sol {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #9945FF 0%, #6d28d9 100%);
  color: #fff; width: 100%; min-height: 46px;
  font-size: 14px; font-weight: 700; border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(153,69,255,.35);
  letter-spacing: .02em; border: none; cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .15s;
}
.btn-sol:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  box-shadow: 0 10px 28px rgba(153,69,255,.5);
  transform: translateY(-1px);
}

/* Hero right — visual */
.hero-visual-block {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
}
.hero-logo-ring {
  width: 280px; height: 280px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 100px rgba(37,99,235,.2),
    0 40px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.1);
  position: relative;
}
.hero-logo-ring::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(37,99,235,.6) 0deg,
    transparent 80deg,
    rgba(16,185,129,.4) 200deg,
    transparent 280deg,
    rgba(37,99,235,.6) 360deg
  );
  z-index: -1;
  animation: ring-spin 8s linear infinite;
}
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.hero-visual-logo {
  width: 160px;
  filter: invert(1) drop-shadow(0 4px 24px rgba(255,255,255,.2));
}
.hero-visual-stats { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hvs-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 7px 18px;
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.55); letter-spacing: .06em;
}
.hvs-accent {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.3);
  color: #6ee7b7;
}

/* hero is single-column — no breakpoint needed */


/* ═══════════════════════════════════════════════════
   STEPS BAR
═══════════════════════════════════════════════════ */
.steps-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.steps-inner {
  display: flex; align-items: center;
  gap: 0; padding: 24px 0;
  flex-wrap: wrap; justify-content: space-between;
}
.step-item { display: flex; align-items: center; gap: 14px; padding: 8px 12px; }
.step-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); flex-shrink: 0;
  border: 1px solid var(--line);
  transition: .2s;
}
.step-item-accent .step-icon {
  background: var(--dark); color: #fff;
  border-color: var(--dark);
  box-shadow: 0 4px 12px rgba(8,13,24,.3);
}
.step-item div { display: flex; flex-direction: column; gap: 1px; }
.step-item strong { font-size: 14px; font-weight: 700; color: var(--text); }
.step-item span { font-size: 12px; color: var(--muted); }
.step-item-accent strong { color: var(--green-dim); font-weight: 800; }
.step-sep { font-size: 16px; color: var(--line); font-weight: 300; padding: 0 4px; }
@media (max-width: 760px) { .step-sep { display: none; } }


/* ═══════════════════════════════════════════════════
   SECTION LABELS
═══════════════════════════════════════════════════ */
.sec-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 12px;
}
.sec-kicker::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--blue); border-radius: 2px;
}
.sec-title {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.03em; margin-bottom: 48px;
  color: var(--text);
}


/* ═══════════════════════════════════════════════════
   ORDER LAYOUT
═══════════════════════════════════════════════════ */
.order-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px; align-items: start;
}
@media (max-width: 1060px) { .order-layout { grid-template-columns: 1fr; } }

/* ── FIELDS ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 13px; color: #374151; }
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
  background: #fff; color: var(--text);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.field textarea { resize: vertical; min-height: 72px; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .fields-2 { grid-template-columns: 1fr; } }
input[type="range"] {
  width: 100%; accent-color: var(--blue);
  padding: 0; border: none; background: transparent;
  height: 20px; cursor: pointer;
}
.field small { font-size: 12px; color: var(--muted); }

/* ── DROPZONE ── */
.dropzone {
  position: relative;
  border: 2px dashed #cbd5e1;
  border-radius: var(--radius-lg);
  background: #fafbfc;
  min-height: 140px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .2s;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--blue);
  background: rgba(37,99,235,.03);
}
.dropzone.dragover { border-style: solid; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-idle {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; color: var(--muted);
  pointer-events: none; text-align: center; padding: 28px;
}
.drop-idle svg { color: #cbd5e1; }
.drop-idle b { font-size: 15px; color: var(--text); font-weight: 700; }
.drop-idle small { font-size: 13px; }

/* ── SWATCHES ── */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2.5px solid transparent;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .15s; padding: 0;
  box-shadow: var(--shadow-sm);
}
.swatch span {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
  display: block;
}
.swatch.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}


/* ═══════════════════════════════════════════════════
   3D VIEWER
═══════════════════════════════════════════════════ */
.viewer-shell {
  margin-top: 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}

.viewer-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  background: #fff;
}
.viewer-title {
  display: flex; align-items: center;
  gap: 10px; font-weight: 700; font-size: 14px;
}
.viewer-title::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.viewer-status { font-size: 12px; color: var(--muted); font-weight: 400; }

.viewer-tools { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tbtn {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px; padding: 5px 11px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: .12s;
}
.tbtn:hover { border-color: #94a3b8; background: #fff; }
.tbtn.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.tbtn-reset { padding: 5px 9px; font-size: 14px; }
.tbtn-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* Canvas area */
.viewer-canvas {
  position: relative;
  height: 440px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, #1a2840 0%, #0b1422 100%);
}

.viewer-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; color: rgba(255,255,255,.35);
  font-weight: 600; font-size: 15px;
  pointer-events: none;
}
.viewer-empty svg { opacity: .25; }

/* Loading state — spinner overlay while a file is being parsed. Uses the
   same .viewer-empty container, just swaps out the SVG placeholder for an
   animated spinner + filename + size. Non-interactive, sits above the
   canvas so the user sees feedback even when the main thread is blocked
   parsing a big STL/3MF/OBJ. */
.viewer-empty.is-loading {
  gap: 8px;
  color: rgba(255,255,255,.72);
  background: rgba(11,20,34,.65);
  backdrop-filter: blur(3px);
}
.viewer-loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: #3b82f6;
  border-right-color: #60a5fa;
  border-radius: 50%;
  animation: akore-spin 0.85s linear infinite;
  margin-bottom: 6px;
}
@keyframes akore-spin { to { transform: rotate(360deg); } }

/* ── Axis legend — hidden, replaced by dynamic 3D gizmo ── */
.v-axis-legend {
  display: none; /* replaced by dynamic 3D gizmo in corner */
  position: absolute; top: 14px; right: 14px;
  background: rgba(6,10,20,.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 8px 12px;
  gap: 12px;
  pointer-events: none;
  z-index: 2;
}
.v-axis-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800;
  color: rgba(255,255,255,.8);
  letter-spacing: .04em;
}
.v-axis-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

/* ── HUD panel — Slic3r style ── */
.v-hud {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(6,10,20,.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex; flex-direction: column;
  gap: 5px; min-width: 160px;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.v-hud-section-title {
  font-size: 9px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-top: 4px; margin-bottom: 2px;
}
.v-hud-section-title:first-child { margin-top: 0; }
.v-hud-row {
  display: flex; justify-content: space-between;
  gap: 20px; align-items: center;
}
.v-hud-row span {
  font-size: 11px; color: rgba(255,255,255,.4);
  font-weight: 600; letter-spacing: .04em;
}
.v-hud-row b {
  font-size: 12px; color: #e2eaf8;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.v-hud-line { height: 1px; background: rgba(255,255,255,.07); margin: 4px 0; }
/* Hidden when no cart item is selected and nothing is currently loading. The
   customer explicitly asked for the measurements panel to disappear when
   there's nothing to measure, rather than showing stale zeros. */
.v-hud.hud-empty { display: none !important; }
/* User-collapsed state (× close button inside HUD, or expand pill). Used to
   apply on mobile only; now both platforms can toggle the HUD manually. */
.v-hud.hud-mobile-hidden { display: none !important; }
.v-hud-hl b { color: #7dd3fc; }

/* Small × button inside the HUD header — lets desktop users hide the
   measurements panel without having to keep re-selecting plate items. */
.v-hud-close {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,.4);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; pointer-events: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.v-hud-close:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.15);
}
/* HUD needs position:relative to anchor the absolute × inside it */
.v-hud { position: absolute; }
.v-hud-accent b { color: #6ee7b7; }
.v-hud-warn b { color: #fbbf24; }

/* HUD toggle button — shown on mobile always, and on desktop only when
   the user has collapsed the HUD with its × button. The selector
   `#viewer:has(...)` matches when the viewer contains a hidden HUD, but
   since :has() isn't universal, we also rely on the JS adding a helper
   class to #viewer — see below. */
.v-hud-toggle {
  display: none;
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(6,10,20,.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: 8px 14px;
  color: #7dd3fc; font-size: 12px; font-weight: 700;
  cursor: pointer; pointer-events: auto; z-index: 6;
}
.v-hud-toggle svg { vertical-align: -2px; margin-right: 5px; }

/* Desktop: show the expand pill-button when the viewer is in the
   user-collapsed state (user pressed × on the HUD). */
#viewer.hud-user-collapsed .v-hud-toggle { display: inline-flex; align-items: center; }

/* Mobile: HUD collapsed by default, toggle to expand */
@media (max-width: 680px) {
  .v-hud-toggle { display: inline-flex; align-items: center; }
  .v-hud {
    bottom: 48px; left: 10px;
    min-width: 150px; max-width: 200px;
    max-height: 45vh; overflow-y: auto;
    pointer-events: auto; z-index: 5;
    transition: opacity .2s ease, transform .2s ease;
    padding: 10px 12px; gap: 3px;
    font-size: 10px;
  }
  .v-hud-section-title { font-size: 8px; }
  .v-hud-row span { font-size: 10px; }
  .v-hud-row b { font-size: 10px; }
  .v-hud-row { gap: 10px; }
  /* Hide the small × close inside the HUD on mobile (mobile already has
     the pill button, don't need two controls crowding the narrow panel) */
  .v-hud-close { display: none; }
}

/* ── Plate info badge (quantity arrangement) ── */
.plate-info-badge {
  display: none; align-items: center; gap: 6px;
  position: absolute; top: 14px; right: 14px;
  background: rgba(6,10,20,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 6px 12px;
  color: #7dd3fc; font-size: 12px; font-weight: 700;
  pointer-events: none; z-index: 3;
  animation: fadeInUp .25s ease;
}

/* ── Drag hint toast ── */
.drag-hint-toast {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(6,10,20,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 6px 14px;
  color: #7dd3fc; font-size: 12px; font-weight: 600;
  pointer-events: none; z-index: 3;
  animation: fadeInUp .25s ease;
  transition: opacity .3s ease;
}

/* ── Object rotation toolbar ── */
/* Rotation toolbar — compact 2-row grid:
     Row 1 (+):  X+  Y+  Z+  │
     Row 2 (−):  X-  Y-  Z-  │ Flip (spans both rows)
   This is half the horizontal width of the old 1-row layout so the
   toolbar no longer overlaps the HUD or the edit panel on smaller
   desktops. Tooltips still carry full "Rotate X +90°" wording. */
.obj-rotate-toolbar {
  display: none;
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  background: rgba(6,10,20,.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 5px;
  grid-template-columns: repeat(3, 38px) 54px;
  grid-template-rows: auto auto;
  gap: 3px;
  z-index: 5;
  animation: fadeInUp .2s ease;
  align-items: center;
}
.obj-rotate-toolbar.visible { display: grid; }

.obj-rotate-toolbar button {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: #e2e8f0; font-size: 11px; font-weight: 700;
  padding: 5px 0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  min-width: 0;
}
.obj-rotate-toolbar button:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}
.obj-rotate-toolbar button .axis-x { color: #ef4444; margin-right: 2px; }
.obj-rotate-toolbar button .axis-y { color: #22c55e; margin-right: 2px; }
.obj-rotate-toolbar button .axis-z { color: #3b82f6; margin-right: 2px; }

/* Flip spans both rows on the right side of the grid */
.obj-rotate-toolbar .rot-flip {
  grid-row: 1 / span 2;
  grid-column: 4;
  font-size: 10px;
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.3);
  color: #93c5fd;
}
.obj-rotate-toolbar .rot-flip:hover {
  background: rgba(59,130,246,.28);
  border-color: rgba(59,130,246,.55);
}

/* Hide rotation toolbar on mobile */
@media (max-width: 680px) {
  .obj-rotate-toolbar { display: none !important; }
}

/* ── Edit-in-place panel (shown when a cart item is clicked in the 3D view) ── */
.obj-edit-panel {
  display: none;
  position: absolute; top: 16px; right: 16px;
  width: 260px;
  background: rgba(6,10,20,.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 0;
  z-index: 6;
  animation: fadeInUp .2s ease;
  color: #e2e8f0; font-size: 12px;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,.5);
  overflow: hidden;
}
.obj-edit-panel.visible { display: block; }

.obj-edit-panel .ep-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.obj-edit-panel .ep-title {
  font-size: 11px; font-weight: 800; color: #93c5fd;
  letter-spacing: .05em; text-transform: uppercase;
  flex-shrink: 0;
}
.obj-edit-panel .ep-filename {
  font-size: 11px; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.obj-edit-panel .ep-close {
  background: none; border: none; color: #94a3b8;
  font-size: 20px; line-height: 1; cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
  font-family: inherit;
  flex-shrink: 0;
}
.obj-edit-panel .ep-close:hover {
  background: rgba(255,255,255,.1); color: #fff;
}

.obj-edit-panel .ep-body {
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.obj-edit-panel .ep-field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; color: #94a3b8; font-weight: 600;
}
.obj-edit-panel .ep-field > span:first-child {
  display: flex; justify-content: space-between; align-items: center;
  letter-spacing: .04em; text-transform: uppercase;
}
.obj-edit-panel .ep-infill-value {
  color: #60a5fa; font-size: 12px; text-transform: none; font-weight: 700;
}

.obj-edit-panel .ep-select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #f1f5f9; font-size: 12px;
  padding: 6px 10px; border-radius: 8px;
  font-family: inherit; cursor: pointer;
  outline: none;
}
.obj-edit-panel .ep-select:focus { border-color: #3b82f6; }
/* Some browsers (Chrome on Windows particularly) render <option> elements
   with OS default colors — which are invisible on a dark panel. Force
   dark-on-light inside the opened dropdown so every material is readable. */
.obj-edit-panel .ep-select option {
  background: #0f172a;
  color: #f1f5f9;
  padding: 4px 8px;
}
.obj-edit-panel .ep-select option:checked,
.obj-edit-panel .ep-select option:hover {
  background: #2563eb;
  color: #ffffff;
}

.obj-edit-panel .ep-color-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.obj-edit-panel .ep-color-btn {
  width: 24px; height: 24px; border-radius: 6px;
  border: 2px solid rgba(255,255,255,.15);
  cursor: pointer; padding: 0;
  transition: transform .1s, border-color .15s;
}
.obj-edit-panel .ep-color-btn:hover {
  transform: scale(1.1); border-color: rgba(255,255,255,.4);
}
.obj-edit-panel .ep-color-btn.active {
  border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,.3);
}

.obj-edit-panel .ep-range {
  width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.15); border-radius: 2px; cursor: pointer;
}
.obj-edit-panel .ep-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; background: #3b82f6; border-radius: 50%;
  cursor: grab; border: 2px solid #fff;
}
.obj-edit-panel .ep-range::-moz-range-thumb {
  width: 16px; height: 16px; background: #3b82f6; border-radius: 50%;
  cursor: grab; border: 2px solid #fff;
}

.obj-edit-panel .ep-qty-row {
  display: flex; align-items: center; gap: 0;
  border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.obj-edit-panel .ep-qty-minus,
.obj-edit-panel .ep-qty-plus {
  background: rgba(255,255,255,.06); border: none; color: #f1f5f9;
  font-size: 16px; font-weight: 700; padding: 4px 12px;
  cursor: pointer; font-family: inherit; line-height: 1;
}
.obj-edit-panel .ep-qty-minus:hover,
.obj-edit-panel .ep-qty-plus:hover { background: rgba(255,255,255,.15); }
.obj-edit-panel .ep-qty-input {
  background: transparent; border: none; color: #f1f5f9;
  font-size: 13px; font-weight: 700; text-align: center;
  width: 50px; padding: 4px 0; font-family: inherit;
  outline: none;
  -moz-appearance: textfield;
}
.obj-edit-panel .ep-qty-input::-webkit-outer-spin-button,
.obj-edit-panel .ep-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.obj-edit-panel .ep-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; gap: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.obj-edit-panel .ep-price-block {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.obj-edit-panel .ep-price-label {
  font-size: 9px; color: #94a3b8; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
}
.obj-edit-panel .ep-price-value {
  font-size: 16px; font-weight: 900; color: #fff; line-height: 1;
}
.obj-edit-panel .ep-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.obj-edit-panel .ep-remove {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  color: #fca5a5; font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px;
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.obj-edit-panel .ep-remove:hover {
  background: rgba(239,68,68,.24);
  border-color: rgba(239,68,68,.5);
  color: #fff;
}
/* Primary "Atlikta" / Done button — green, larger, eye-catching. The
   absence of a visible "save / close" button (only × and red Pašalinti)
   was making customers either click the destructive remove button by
   mistake or feel stuck inside the panel. */
.obj-edit-panel .ep-done {
  display: inline-flex; align-items: center; gap: 6px;
  background: #22c55e; color: #fff;
  border: 1px solid #16a34a;
  font-size: 12px; font-weight: 800;
  padding: 7px 14px; border-radius: 8px;
  cursor: pointer; font-family: inherit;
  letter-spacing: .01em;
  transition: background .15s, transform .1s;
}
.obj-edit-panel .ep-done:hover {
  background: #16a34a;
}
.obj-edit-panel .ep-done:active {
  transform: scale(0.97);
}
/* Volume-discount chip — only shown when the qty earns a tier discount.
   Green so it reads as a positive signal ("you're saving money"), not
   yet another generic info badge. */
.obj-edit-panel .ep-discount-chip {
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px; font-weight: 700;
  color: #4ade80;
  letter-spacing: .01em;
  line-height: 1.2;
}
.obj-edit-panel .ep-discount-chip[hidden] { display: none; }

/* Responsive — on mobile, full-width bottom sheet */
@media (max-width: 680px) {
  .obj-edit-panel {
    top: auto; bottom: 10px; right: 10px; left: 10px;
    width: auto;
  }
  .obj-edit-panel .ep-color-btn { width: 28px; height: 28px; }
}

/* ── Size warning banner ── */
.size-warning-banner {
  display: flex; align-items: center; gap: 12px;
  background: #fef3c7; border: 1.5px solid #f59e0b;
  border-radius: 12px; padding: 12px 16px; margin: 10px 0;
  color: #92400e; font-size: 13px; position: relative;
  animation: fadeInUp .25s ease;
}
.size-warning-icon { flex-shrink: 0; color: #d97706; }
.size-warning-text { flex: 1; }
.size-warning-text strong { display: block; font-size: 14px; margin-bottom: 2px; color: #78350f; }
.size-warning-btn {
  flex-shrink: 0; padding: 6px 16px;
  background: #d97706; color: #fff; border-radius: 8px;
  font-weight: 700; font-size: 12px; text-decoration: none;
  transition: background .15s;
}
.size-warning-btn:hover { background: #b45309; }
.size-warning-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: #92400e;
  font-size: 18px; cursor: pointer; line-height: 1;
}
@media (max-width: 520px) {
  .size-warning-banner { flex-wrap: wrap; }
  .size-warning-btn { width: 100%; text-align: center; }
}

.viewer-tip {
  padding: 9px 18px 14px;
  font-size: 12px; color: var(--muted);
  background: var(--bg);
  border-top: 1px solid var(--line);
}


/* ═══════════════════════════════════════════════════
   PRICE PANEL
═══════════════════════════════════════════════════ */
.order-col-right { position: sticky; top: 92px; }
/* Reset sticky + force full-width on tablet/phone. Without this, Samsung
   Internet (and occasionally iOS Safari) glitches the sticky element in
   a single-column grid — the cart panel renders narrower than the
   viewer column above it, drifting right or wrapping oddly.
   The issue surfaces specifically AFTER an STL is loaded because the
   WebGL canvas claims an intrinsic width that, combined with the grid's
   default `min-width: auto` on children, balloons the left column past
   100% and pushes the right column over. The `min-width: 0` fix is the
   canonical CSS-grid "child can shrink" incantation. */
@media (max-width: 1060px) {
  .order-layout {
    /* Keep the grid contents from ever bleeding past viewport horizontally,
       no matter what an inner WebGL canvas or button row tries to do. */
    overflow-x: hidden;
  }
  .order-col-left,
  .order-col-right {
    min-width: 0;     /* Allow grid children to shrink to parent (canonical fix) */
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
  .order-col-right {
    position: static;
    top: auto;
  }
  .order-col-right .price-panel,
  .order-col-right .cart-panel,
  .order-col-right #checkoutSection,
  .order-col-right #currentItemPanel,
  .order-col-left .viewer-shell,
  .order-col-left .viewer-canvas,
  .order-col-left #viewer {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
  }
  /* The WebGL canvas Three.js injects has explicit width/height set
     via inline style. If those exceed the parent, the grid grows. Cap it. */
  .order-col-left #viewer canvas {
    max-width: 100% !important;
    display: block;
  }
}

.price-panel {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

.price-filename {
  font-size: 13px; color: var(--muted);
  margin-bottom: 20px; word-break: break-word;
  min-height: 20px;
  display: flex; align-items: center; gap: 6px;
}
.price-filename::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--line); flex-shrink: 0;
}

.price-list {
  border-top: 1px solid var(--line);
  margin-bottom: 24px;
}
.price-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.price-row b { font-weight: 700; }
.price-total { padding-top: 16px; border-bottom: none; }
.price-total span { font-size: 15px; font-weight: 700; }
.price-total b { font-size: 30px; font-weight: 900; letter-spacing: -.02em; }

.price-discount {
  padding: 9px 14px; border-radius: 10px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  color: #15803d; font-size: 13px;
  font-weight: 700; text-align: center;
  margin: -4px 0 4px;
}

.checkout-fields {
  display: flex; flex-direction: column;
  gap: 12px; padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-top: 4px; margin-bottom: 20px;
}
.checkout-fields label { color: #374151; font-size: 12px; }
.checkout-fields input, .checkout-fields textarea { background: var(--bg); font-size: 14px; }


/* ═══════════════════════════════════════════════════
   MATERIALS  — accordion cards
═══════════════════════════════════════════════════ */
.mat-grid {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 860px; margin: 0 auto;
}

/* Card shell */
.mat-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.mat-card:hover { border-color: #cbd5e1; box-shadow: var(--shadow-sm); }

/* Top accent bar */
.mat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  opacity: 0; transition: opacity .2s; border-radius: 20px 20px 0 0;
}
.mat-card { position: relative; }
.mat-card.is-open { border-color: rgba(37,99,235,.25); box-shadow: 0 4px 20px rgba(37,99,235,.1); }
.mat-card.is-open::before { opacity: 1; }

/* Clickable front row */
.mat-front {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer;
  width: 100%; background: transparent; border: none;
  text-align: left; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mat-front:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius-xl); }

/* Icon box */
.mat-icon-box {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(37,99,235,.08); color: var(--blue);
  transition: background .25s, color .25s;
}
.mat-icon-box svg { width: 22px; height: 22px; }
.mat-card.is-open .mat-icon-box { background: var(--blue); color: #fff; }

/* Name + tag row */
.mat-info { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.mat-name { font-size: 17px; font-weight: 900; color: var(--text); letter-spacing: -.01em; }
.mat-tag {
  font-size: 10px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .05em;
  text-transform: uppercase; flex-shrink: 0;
}
.mat-green  { background: #dcfce7; color: #15803d; }
.mat-blue   { background: #dbeafe; color: #1d4ed8; }
.mat-dark   { background: #1e293b; color: #f1f5f9; }
.mat-orange { background: #fef3c7; color: #92400e; }
.mat-yellow { background: #fef9c3; color: #713f12; }
.mat-gray   { background: #f1f5f9; color: #475569; }

/* Chevron */
.mat-chevron {
  flex-shrink: 0; color: var(--muted);
  transition: transform .3s cubic-bezier(.4,0,.2,1), color .2s;
  margin-left: auto;
}
.mat-card.is-open .mat-chevron { transform: rotate(180deg); color: var(--blue); }

/* Expandable body */
.mat-back {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, padding .3s ease;
  padding: 0 20px;
}
.mat-card.is-open .mat-back {
  max-height: 280px; opacity: 1; padding: 0 20px 18px;
}
.mat-back-inner {
  border-top: 1px solid var(--line); padding-top: 14px;
}
.mat-back p { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }

/* Feature chips */
.mat-feats {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mat-feat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: #475569;
}
.mat-card.is-open .mat-feat { border-color: rgba(37,99,235,.18); background: rgba(37,99,235,.04); }

@media (max-width: 520px) {
  .mat-front { padding: 13px 14px; gap: 11px; }
  .mat-icon-box { width: 40px; height: 40px; border-radius: 10px; }
  .mat-icon-box svg { width: 18px; height: 18px; }
  .mat-name { font-size: 15px; }
  .mat-back, .mat-card.is-open .mat-back { padding-left: 14px; padding-right: 14px; }
}


/* ═══════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════ */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 36px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--shadow);
}
.contact-dark {
  background: var(--dark2);
  border: 1.5px solid rgba(255,255,255,.07);
  color: #fff;
  position: relative; overflow: hidden;
}
.contact-dark::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 80% 20%, rgba(37,99,235,.15), transparent);
  pointer-events: none;
}
.contact-dark h3 { font-size: 22px; color: #fff; font-weight: 800; position: relative; }
.contact-dark p { color: rgba(255,255,255,.5); font-size: 14px; line-height: 1.7; position: relative; }

.ci { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--text); }
.ci-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--bg-alt); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--muted);
  transition: transform .2s;
}
.ci:hover .ci-icon { transform: scale(1.08); }
/* Colored contact icons */
.ci:nth-child(1) .ci-icon { background: rgba(59,130,246,.13); border-color: rgba(59,130,246,.28); color: #3b82f6; }
.ci:nth-child(2) .ci-icon { background: rgba(34,197,94,.13);  border-color: rgba(34,197,94,.28);  color: #16a34a; }
.ci:nth-child(3) .ci-icon { background: rgba(249,115,22,.13); border-color: rgba(249,115,22,.28); color: #f97316; }
.ci:nth-child(4) .ci-icon { background: rgba(168,85,247,.13); border-color: rgba(168,85,247,.28); color: #a855f7; }
.ci:nth-child(5) .ci-icon { background: rgba(239,68,68,.13);  border-color: rgba(239,68,68,.28);  color: #ef4444; }
.ci a { color: var(--text); font-weight: 600; }
.ci a:hover { color: var(--blue); }

/* WhatsApp / Viber rapid-reply mini-buttons that sit on the SAME row as
   the phone number (right after it). Each is a small rounded square with
   the brand color filling the background — visually they read as
   "alternate ways to reach this number" rather than separate contacts. */
.ci-msg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  text-decoration: none;
  margin-left: 4px;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.ci-msg-btn:hover {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  filter: brightness(1.05);
}
.ci-msg-btn.ci-wa    { background: #25D366; }
.ci-msg-btn.ci-viber { background: #7360F2; }
.ci-msg-btn svg      { display: block; }

.soon-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; position: relative; }
.soon-pills span {
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.18);
  color: rgba(255,255,255,.45);
  font-size: 13px; font-weight: 600;
}


/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.footer {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  background: #fff;
}
.footer-inner {
  display: flex; justify-content: space-between;
  align-items: center; font-size: 14px; color: var(--muted);
  gap: 16px; flex-wrap: wrap;
}
.footer-inner a { color: var(--muted); font-weight: 600; }
.footer-inner a:hover { color: var(--text); }


/* ═══════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════════ */
.form-status { font-size: 13px; }
.form-status.error { color: #dc2626; }
.form-status.success { color: var(--green-dim); }

/* ═══════════════════════════════════════════════════
   CONTACT CARD WITH LOGO
═══════════════════════════════════════════════════ */
.contact-card-with-logo {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 700px) {
  .contact-card-with-logo {
    grid-template-columns: 1fr;
  }
  .contact-info-logo { justify-content: center; }
}
.contact-info-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.contact-info-logo-img {
  /* Icon-only A-mark (0.85:1 aspect ratio — slightly taller than wide).
     130px wide → ~153px tall, gives the card a strong visual anchor
     without dominating it. The card already says "AKORE MB · 307614445"
     in text below, so we don't need the wordmark to repeat the brand. */
  width: 130px;
  height: auto;
  object-fit: contain;
  /* Black logo on white card background — no filter needed */
}
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Smooth appear for stats panel */
.v-hud { animation: fadeInUp .25s ease; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════
   HAMBURGER & MOBILE NAV
═══════════════════════════════════════════════════ */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px;
  background: transparent; border: none; cursor: pointer;
  padding: 8px; border-radius: 8px;
  transition: background .15s; flex-shrink: 0;
}
.hamburger:hover { background: var(--bg-alt); }
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform .22s ease, opacity .15s ease;
  transform-origin: center;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 680px) {
  .hamburger { display: flex; }
  .nav { display: none !important; }
}

.mobile-nav {
  position: fixed;
  top: 73px; left: 0; right: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--line);
  padding: 12px 20px 20px;
  display: flex; flex-direction: column; gap: 2px;
  transform: translateY(-8px);
  opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .18s ease;
  z-index: 199;
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: all; }
.mobile-nav-link {
  font-size: 16px; font-weight: 700; color: var(--text);
  padding: 14px 16px; border-radius: 10px;
  transition: background .12s, color .12s; display: block;
}
.mobile-nav-link:hover { background: var(--bg-alt); color: var(--blue); }
.mobile-nav-lang {
  display: flex; gap: 6px; padding: 10px 16px 2px;
  border-top: 1px solid var(--line); margin-top: 8px;
}
.mobile-nav-lang button {
  border: 1.5px solid var(--line); background: transparent; color: var(--muted);
  font-weight: 700; font-size: 12px; letter-spacing: .06em;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: .15s;
}
.mobile-nav-lang button.active,
.mobile-nav-lang button:hover { background: var(--dark); color: #fff; border-color: var(--dark); }


/* ═══════════════════════════════════════════════════
   PROJECT GALLERY
═══════════════════════════════════════════════════ */
.sec-sub {
  font-size: 16px; color: var(--muted);
  margin-top: -32px; margin-bottom: 40px;
  max-width: 52ch;
}

.proj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 264px;
  gap: 14px;
}
@media (max-width: 1100px) {
  .proj-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; }
}
@media (max-width: 680px) {
  .proj-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 380px) {
  .proj-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
}

.proj-card {
  position: relative; border-radius: var(--radius-xl);
  overflow: hidden; cursor: pointer;
  background: #ddd;
  box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.25,.46,.45,.94), box-shadow .28s;
}
.proj-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--shadow-lg);
}
.proj-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.proj-card:hover img { transform: scale(1.055); }
.proj-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 50%, transparent 100%);
  pointer-events: none;
  transition: opacity .3s;
}
.proj-card:hover::after { opacity: .85; }
.proj-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 18px 16px 15px;
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.proj-label {
  font-size: 13px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  letter-spacing: .02em; line-height: 1.3;
  flex: 1;
}
.proj-badge {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.88);
  background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  white-space: nowrap;
}

/* Gallery hidden cards & toggle button */
.gallery-card-hidden {
  display: none !important;
}
.gallery-toggle-wrap {
  display: flex; justify-content: center;
  margin-top: 28px;
}
.gallery-toggle-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-size: 15px; font-weight: 700;
  padding: 11px 28px; border-radius: 999px;
  cursor: pointer; transition: background .18s, color .18s, transform .15s, box-shadow .18s;
  letter-spacing: .02em;
}
.gallery-toggle-btn:hover {
  background: var(--blue); color: #fff;
  box-shadow: 0 4px 18px rgba(59,130,246,.35);
  transform: translateY(-2px);
}
.gallery-toggle-btn:active { transform: translateY(0); }

/* ─── LIGHTBOX ────────────────────────────────────── */
.lb {
  position: fixed; inset: 0; z-index: 9900;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
  transition: opacity .22s;
}
.lb.lb-open { pointer-events: all; opacity: 1; }
.lb-bg {
  position: absolute; inset: 0;
  background: rgba(6,10,20,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}
.lb-stage {
  position: relative; z-index: 2;
  max-width: min(860px, calc(100vw - 128px));
  max-height: calc(100vh - 140px);
  display: flex; align-items: center; justify-content: center;
}
.lb-stage img {
  display: block; max-width: 100%;
  max-height: calc(100vh - 140px);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  object-fit: contain;
  transition: opacity .18s, transform .18s;
}
.lb-stage img.lb-fade { opacity: 0; transform: scale(.97); }
.lb-footer {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 0 16px; min-height: 38px;
  width: 100%; max-width: min(860px, calc(100vw - 80px));
}
.lb-title-text {
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9);
  flex: 1; text-align: left;
}
.lb-dots { display: flex; gap: 7px; align-items: center; }
.lb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.3); border: none;
  cursor: pointer; padding: 0;
  transition: background .18s, transform .18s;
}
.lb-dot.active { background: #fff; transform: scale(1.3); }
.lb-counter {
  font-size: 12px; color: rgba(255,255,255,.45);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.lb-close {
  position: absolute; top: 18px; right: 18px; z-index: 10;
  width: 42px; height: 42px;
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  transition: background .2s, transform .2s;
}
.lb-close:hover { background: rgba(255,255,255,.22); transform: scale(1.1); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 50px; height: 50px;
  background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  transition: background .2s;
}
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb-next:hover { transform: translateY(-50%) translateX(2px); }
.lb-nav[disabled] { opacity: .2; pointer-events: none; }
/* ── Lightbox on mobile — bigger, solid, thumb-reachable buttons ──
   Before this rewrite the close + nav arrows were 38–42 px, half-transparent,
   and pinned to corners — basically invisible on bright photos and unreachable
   by an average thumb. The mobile layout below:
     • Close button ← 48 px, solid dark, top-right with 2 px white border
     • Prev / Next  ← 56 px, moved to a BOTTOM ROW just above the footer
                       so thumbs land on them naturally
     • Both always visible regardless of image contrast
     • Image area shrinks slightly to make room for the bottom nav row */
@media (max-width: 600px) {
  .lb-stage {
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 200px);  /* leave 200 px for footer + nav + padding */
  }
  .lb-stage img {
    max-height: calc(100vh - 200px);
    border-radius: var(--radius);
  }

  /* Close button — bigger and solid enough to see on any photo */
  .lb-close {
    top: 14px; right: 14px;
    width: 48px; height: 48px;
    background: rgba(15,23,42,.88);
    border: 2px solid rgba(255,255,255,.45);
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
  }
  .lb-close:hover,
  .lb-close:active { background: rgba(15,23,42,.98); transform: scale(1.05); }

  /* Navigation arrows — moved to a bottom row above the footer.
     Each button is 56×56 — clearly above Apple HIG's 44 px minimum. */
  .lb-nav {
    top: auto; bottom: 88px;           /* 88 = footer height + a 12 px gap */
    transform: none;
    width: 56px; height: 56px;
    background: rgba(15,23,42,.88);
    border: 2px solid rgba(255,255,255,.45);
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
  }
  .lb-prev { left: 16px; }
  .lb-next { right: 16px; }
  .lb-prev:hover, .lb-prev:active { transform: translateX(-2px); }
  .lb-next:hover, .lb-next:active { transform: translateX(2px); }
  .lb-nav svg { width: 30px; height: 30px; }

  /* Footer sits right at the bottom so it's never truncated */
  .lb-footer {
    position: absolute; left: 0; right: 0; bottom: 14px;
    margin-top: 0; padding: 0 16px;
    max-width: 100%;
  }
  .lb-title-text { font-size: 13px; }
  .lb-counter    { font-size: 11px; }
}

/* Extra-narrow phones: pull arrows tighter and make Close a hair smaller */
@media (max-width: 380px) {
  .lb-nav   { width: 50px; height: 50px; bottom: 84px; }
  .lb-close { width: 44px; height: 44px; top: 10px; right: 10px; }
}


/* ═══════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════ */
.faq-container {
  display: grid; grid-template-columns: 280px 1fr; gap: 64px;
  align-items: start;
}
@media (max-width: 800px) { .faq-container { grid-template-columns: 1fr; gap: 32px; } }
.faq-left { position: sticky; top: 100px; }
.faq-left .sec-title { margin-bottom: 16px; font-size: clamp(22px, 2.8vw, 36px); }
.faq-side-text { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
.btn-faq-contact {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border-radius: 999px; font-weight: 700; font-size: 14px;
  background: var(--dark); color: #fff;
  transition: transform .15s, background .15s;
  border: none; cursor: pointer;
}
.btn-faq-contact:hover { transform: translateY(-2px); background: var(--dark2); }

/* "Vaizdo gidas" tutorial-video button — sits below the contact CTA in
   the FAQ side column. Distinct outline style so it reads as a secondary
   action, not a duplicate of the contact button. */
.btn-video-tutorial {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px;
  min-height: 44px; padding: 0 22px;
  border-radius: 999px; font-weight: 700; font-size: 14px;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--blue);
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.btn-video-tutorial:hover {
  background: var(--blue); color: #fff;
  transform: translateY(-2px);
}

/* Modal — full-screen overlay with the player centered. Hidden by the
   `hidden` HTML attribute until JS opens it. */
.akore-video-modal[hidden] { display: none; }
.akore-video-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: akoreVideoFadeIn .18s ease;
}
@keyframes akoreVideoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.akore-video-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 22, 0.86);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.akore-video-frame {
  position: relative;
  background: #0b1422;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.akore-video-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.akore-video-header h3 {
  margin: 0; font-size: 15px; font-weight: 700;
  color: #e2eaf8;
}
.akore-video-close {
  background: transparent; border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer; padding: 6px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.akore-video-close:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.akore-video-stage {
  position: relative;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  flex: 1;
  min-height: 0;
}
.akore-video-stage video {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 130px);
  display: block;
  object-fit: contain;
}
@media (max-width: 600px) {
  .akore-video-modal { padding: 0; }
  .akore-video-frame {
    width: 100%; height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}
@media (max-width: 800px) { .faq-left { position: static; } }

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq-item.is-open { border-color: #94a3b8; box-shadow: var(--shadow-sm); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: 16px;
  padding: 20px 24px;
  background: none; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--text);
  text-align: left; transition: background .12s;
}
.faq-q:hover { background: var(--bg-alt); }
.faq-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-alt); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 300; color: var(--muted);
  flex-shrink: 0; transition: transform .25s, background .2s, border-color .2s, color .2s;
  line-height: 1;
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg); background: var(--dark);
  color: #fff; border-color: var(--dark);
}
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .32s ease;
}
.faq-a p {
  padding: 0 24px 20px;
  font-size: 15px; line-height: 1.75; color: var(--muted);
}
/* Open state — generous max-height so multi-paragraph answers (Q1 with 4
   download-site links, Q8 refund/contact policy, Q9 with 4 security
   bullets) aren't truncated on narrow mobile viewports where text wraps
   to many lines. 1500px covers everything we currently have with room to
   spare; the CSS transition still animates smoothly because the browser
   only animates up to the actual rendered height of the content. */
.faq-item.is-open .faq-a { max-height: 1500px; }


/* ═══════════════════════════════════════════════════
   SOCIAL CARD (contact section right card)
═══════════════════════════════════════════════════ */
.social-card { gap: 16px !important; }
.social-card-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.social-card-header h3 { margin: 0; }
.social-soon-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(37,99,235,.2); border: 1px solid rgba(59,130,246,.35);
  color: #93c5fd;
}
.social-links-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative;
}
.social-link-card {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
  font-size: 13px; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
  position: relative; cursor: default;
}
.social-link-card.soon::after {
  content: 'soon';
  position: absolute; top: -7px; right: 8px;
  font-size: 8px; font-weight: 800; letter-spacing: .06em;
  background: var(--blue); color: #fff;
  padding: 2px 7px; border-radius: 999px;
}
/* Live state — applied to social cards that point to a real profile.
   Cursor turns into a pointer (was 'default' for soon-style placeholders),
   text is whiter, and a small green pulse-dot in the top-right hints
   that the link is active. The base .social-link-card hover rule below
   already lifts background/border on hover, so .live just needs the
   text colour bump + active dot. */
.social-link-card.live {
  cursor: pointer;
  color: rgba(255,255,255,.92);
}
.social-link-card.live::after {
  content: '';
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: akoreLiveDotPulse 2.2s ease-out infinite;
}
@keyframes akoreLiveDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.social-link-card:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.social-link-card.live:hover {
  background: rgba(24,119,242,.18);          /* Facebook-blue tint */
  border-color: rgba(24,119,242,.45);
  color: #fff;
}
.social-note { font-size: 12px !important; color: rgba(255,255,255,.3) !important; line-height: 1.6; margin-top: 4px; }


/* ═══════════════════════════════════════════════════
   FOOTER — Multi-column dark
═══════════════════════════════════════════════════ */
.footer {
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  background: var(--dark);
  color: rgba(255,255,255,.55);
}
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding: 60px 0 48px;
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px 0 36px; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
}

.footer-logo .logo-name { color: #fff; }
.footer-logo .logo-mark {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}
.footer-logo .logo-img { filter: brightness(0) invert(1) !important; }
.footer-tagline {
  font-size: 14px; color: rgba(255,255,255,.35);
  line-height: 1.75; margin-top: 14px; max-width: 240px;
}
.footer-social-row { display: flex; gap: 8px; margin-top: 20px; }
.fsoc-btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.45);
  transition: background .15s, color .15s, border-color .15s;
  position: relative;
}
.fsoc-btn:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.2); }
.fsoc-btn.soon::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); border: 2px solid var(--dark);
}

.footer-col h4 {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.25);
  margin-bottom: 18px;
}
.footer-col a,
.footer-col span {
  display: block; font-size: 14px; color: rgba(255,255,255,.5);
  padding: 4px 0; transition: color .12s; line-height: 1.5;
}
.footer-col a:hover { color: #fff; }

.footer-legal {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 0;
  padding: 16px 0; font-size: 13px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer-legal a {
  color: rgba(255,255,255,.4); text-decoration: none; transition: color .15s;
  padding: 0 12px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.footer-legal a:last-child { border-right: none; }
.footer-legal a:hover { color: rgba(255,255,255,.8); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 13px; color: rgba(255,255,255,.25);
  flex-wrap: wrap; gap: 8px;
}
.footer-bottom a { color: rgba(255,255,255,.35); font-weight: 600; transition: color .12s; }
.footer-bottom a:hover { color: rgba(255,255,255,.8); }

/* ═══════════════════════════════════════════════════════════════════════════
   CART SYSTEM
═══════════════════════════════════════════════════════════════════════════ */

/* "Add to cart" button */
.btn-add-cart {
  width: 100%; min-height: 44px; margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  background: var(--blue);
  border: none;
  color: #fff;
  cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s;
  box-shadow: 0 2px 10px rgba(59,130,246,.25);
}
.btn-add-cart:hover:not(:disabled) {
  background: #2563eb;
  box-shadow: 0 4px 16px rgba(59,130,246,.38);
  transform: translateY(-1px);
}
.btn-add-cart:active:not(:disabled) { transform: translateY(0); }
.btn-add-cart:disabled {
  background: #e2e8f0;
  color: #64748b;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}
/* The manual "Į krepšelį" button is fully obsolete — auto-commit on upload
   handles every case reliably. Hidden everywhere (desktop + mobile). We keep
   the button element in the DOM so any legacy JS that references #addToCartBtn
   doesn't crash, but nothing ever shows it. */
.btn-add-cart { display: none !important; }

/* item cost row */
.price-item-cost { margin-top: 2px; }
.price-item-cost b { color: var(--blue); }

/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENT METHODS CARD  (light card under add-to-cart button, Opay-style)
═══════════════════════════════════════════════════════════════════════════ */
.payment-methods-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Inline variant — lives right under the pay buttons, so it should be
   flatter (no heavy card look) and just a small logos strip. */
.payment-methods-card-inline {
  background: transparent;
  border: none;
  padding: 8px 0 0;
  margin-top: 10px;
}
.payment-methods-card-inline .pm-grid {
  justify-content: center;
  opacity: 0.75;
}
.pm-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #94a3b8;
}
.pm-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
/* All payment chips render as uniform white tiles (industry-standard look).
   Each tile: fixed height, consistent padding, subtle shadow, rounded corners.
   The logo inside scales to fit with padding on all sides. Works on either
   light surfaces (cart area) or dark surfaces (footer) without adjustment. */
.pm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  height: 40px;
  min-width: 58px;
  line-height: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: default;
}
.pm-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
.pm-chip svg,
.pm-chip img {
  display: block;
  max-height: 22px;
  max-width: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Image chip — same tile styling as everything else */
.pm-chip-img { /* inherits .pm-chip */ }
.pm-chip-img img {
  max-height: 22px;
  max-width: 96px;
}

/* ─── Per-brand tile sizing ───────────────────────────────────────────────
   Google Pay's own brand guidelines require ≥ 0.5x the "super G" height as
   clear space on all sides, and explicitly forbid altering the mark itself.
   Approach: keep the mark at its natural rendered size, give its tile a
   wider footprint so the required clear space is respected and the mark
   reads prominently alongside the other acceptance marks. */

.pm-chip-img[title="Google Pay"] {
  /* wider tile preserves Google's required clear-space ratio */
  min-width: 110px;
  padding: 4px 10px;
}
.pm-chip-img[title="Google Pay"] img {
  /* render at a larger display size so the mark reads prominently;
     mark itself is not altered — only the rendering scale. */
  max-height: 32px;
  height: 32px;
  max-width: 100%;
}

/* Apple Pay — proportionally sized tile to match Google Pay's visual weight. */
.pm-chip-img[title="Apple Pay"] {
  min-width: 90px;
  padding: 4px 10px;
}
.pm-chip-img[title="Apple Pay"] img {
  max-height: 30px;
  height: 30px;
  max-width: 100%;
}

/* Legacy flat variant kept as alias — no special override needed anymore */
.pm-chip-flat { /* inherits .pm-chip */ }
.pm-chip-sol  { /* inherits .pm-chip */ }
/* Fallback when an official asset file is missing — plain neutral text only,
   no brand colors or shapes, so we never accidentally approximate a logo. */
.pm-fallback {
  display: inline-block;
  padding: 4px 8px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  line-height: 1.2;
}
.payment-methods-card-footer .pm-fallback {
  color: #cbd5e1;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
}
/* With uniform tile sizing, the 10px gap already visually separates items.
   Keep .pm-sep hidden across the board for now — cleaner look. */
.pm-sep {
  display: none;
}
@media (max-width: 480px) {
  .payment-methods-card { padding: 10px 12px 12px; }
  .pm-grid { gap: 8px; justify-content: center; }
  .pm-chip { height: 36px; padding: 5px 8px; min-width: 52px; }
  .pm-chip svg, .pm-chip img { max-height: 20px; max-width: 84px; }
  /* Mobile — same proportional sizing, slightly smaller tiles */
  .pm-chip-img[title="Google Pay"] { min-width: 94px; padding: 3px 8px; }
  .pm-chip-img[title="Google Pay"] img { max-height: 28px; height: 28px; }
  .pm-chip-img[title="Apple Pay"]  { min-width: 78px; padding: 3px 8px; }
  .pm-chip-img[title="Apple Pay"]  img { max-height: 26px; height: 26px; }
  .pm-sep { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CART PANEL  (lives inside white .price-panel)
═══════════════════════════════════════════════════════════════════════════ */
.cart-panel {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0 4px;
}
.cart-header {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #64748b;
  margin-bottom: 10px;
}
.cart-header svg { color: #94a3b8; }
.cart-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--blue); border-radius: 9px;
  font-size: 10px; font-weight: 900; color: #fff;
  margin-left: 2px;
}

/* Cart item rows */
.cart-items-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }

/* Empty-state message shown inside the cart panel when no items are added yet.
   Centered muted text with a little vertical padding, lives where the items
   list would normally be. */
.cart-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cart-item {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 8px 10px;
}
.cart-item-remove {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px;
  background: #fee2e2; border: 1.5px solid #fca5a5;
  color: #dc2626; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  margin-left: 4px;
}
.cart-item-remove:hover {
  background: #ef4444; color: #fff; border-color: #ef4444;
  transform: scale(1.08); box-shadow: 0 2px 8px rgba(239,68,68,.35);
}
.cart-item-remove:active { transform: scale(.95); }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  display: block; font-size: 12px; font-weight: 600;
  color: #1e293b; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cart-item-meta {
  display: block; font-size: 10px; color: #64748b;
  margin-top: 1px;
}
.cart-item-price {
  flex-shrink: 0; font-size: 13px; font-weight: 700;
  color: #1e293b;
}

/* Cart totals */
.cart-totals {
  border-top: 1.5px solid #e2e8f0;
  padding-top: 8px; display: flex; flex-direction: column; gap: 4px;
}
.cart-total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #64748b;
}
.cart-total-row b { color: #475569; font-weight: 600; }
.cart-grand-total {
  font-size: 14px; font-weight: 700; color: #0f172a !important;
  margin-top: 4px; padding-top: 4px; border-top: 1px dashed #cbd5e1;
}
.cart-grand-total b { color: var(--blue) !important; font-size: 17px; }

/* ── Discount code input — collapsed by default to keep cart clean ───── */
.cart-discount-row { margin: 6px 0 2px; }
.discount-toggle {
  background: none; border: none; padding: 4px 0;
  font: inherit; cursor: pointer;
  color: #64748b; font-size: 11.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: underline; text-decoration-color: rgba(100,116,139,.4);
  text-underline-offset: 3px;
}
.discount-toggle:hover { color: var(--blue); }
.discount-toggle svg { transition: transform .2s ease; }
.discount-toggle.is-open svg { transform: rotate(180deg); }
.discount-form { margin-top: 8px; }
.discount-input-row { display: flex; gap: 6px; }
.discount-input-row input {
  flex: 1; min-width: 0;
  padding: 8px 10px; font-size: 12px;
  border: 1.5px solid #cbd5e1; border-radius: 6px;
  font-family: 'SF Mono', Menlo, monospace;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.discount-input-row input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.discount-apply-btn {
  padding: 8px 14px; font-size: 12px; font-weight: 700;
  background: var(--blue); color: #fff;
  border: none; border-radius: 6px;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.discount-apply-btn:hover { background: #2563eb; }
.discount-apply-btn:disabled { background: #94a3b8; cursor: wait; }
.discount-status {
  margin-top: 6px; font-size: 11.5px; line-height: 1.4;
  padding: 6px 10px; border-radius: 6px;
}
.discount-status.success {
  color: #166534; background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.discount-status.error {
  color: #991b1b; background: #fef2f2;
  border: 1px solid #fecaca;
}
.cart-discount-line { color: #16a34a !important; }
.discount-chip {
  display: inline-block; padding: 1px 6px;
  background: #dcfce7; color: #166534;
  border-radius: 4px; font-size: 10px; font-weight: 700;
  margin-left: 4px; letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT FIELDS  (inside white panel)
═══════════════════════════════════════════════════════════════════════════ */
.checkout-fields { margin: 12px 0 0; }
.checkout-fields .field { margin-bottom: 10px; }
.checkout-fields label {
  display: block; font-size: 12px; font-weight: 600;
  color: #475569; margin-bottom: 4px;
}
.checkout-fields input,
.checkout-fields textarea {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid #e2e8f0; border-radius: 8px;
  background: #f8fafc; color: #0f172a;
  font-size: 13px; outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.checkout-fields input:focus,
.checkout-fields textarea:focus { border-color: var(--blue); background: #fff; }
.checkout-fields textarea { resize: vertical; min-height: 60px; }

/* ── Form validation error state ─────────────────────────────────────────
   Applied to <input>/<textarea> when validateOrderInputs() detects a
   missing or malformed required field. Red border + light red background
   so the customer can SEE which field is wrong (vs. only reading the
   status text). Auto-removed on the next 'input' event so the colour
   clears as soon as they start typing. */
.checkout-fields input.field-error,
.checkout-fields textarea.field-error {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.checkout-fields input.field-error:focus,
.checkout-fields textarea.field-error:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .25);
}
/* Inline error message under a field (e.g. "Įveskite teisingą el. pašto
   adresą"). Hidden by default, shown when validateOrderInputs() injects
   a message into .field-error-msg span. */
.field-error-msg {
  display: block;
  font-size: 11.5px;
  color: #dc2626;
  margin-top: 4px;
  font-weight: 600;
  line-height: 1.3;
}
/* Brief shake animation on submit — quick attention-grabber for fields
   that just turned red. Doesn't repeat; if customer starts typing the
   .field-error class is removed and the animation won't replay until
   the next failed submit. */
@keyframes akoreFieldShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.checkout-fields input.field-error.field-shake,
.checkout-fields textarea.field-error.field-shake {
  animation: akoreFieldShake .35s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DELIVERY SECTION  (lives inside white panel)
═══════════════════════════════════════════════════════════════════════════ */
.delivery-section {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0 12px;
}
.delivery-header {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #64748b;
  margin-bottom: 10px;
}
.delivery-header svg { color: #64748b; }

/* Type toggle */
.delivery-type-row { display: flex; gap: 6px; margin-bottom: 10px; }
.del-type-btn {
  /* flex:1 1 0 + min-width:0 lets each button shrink equally to fit inside the
     card; otherwise long labels ("Atsiėmimas") push the row past the right edge. */
  flex: 1 1 0;
  min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 6px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1.5px solid #e2e8f0;
  background: #fff; color: #64748b;
  cursor: pointer; transition: all .15s;
  text-align: center;
  white-space: normal;                    /* allow wrap if needed */
  overflow-wrap: anywhere;                /* never force overflow */
  line-height: 1.15;
}
.del-type-btn svg { flex-shrink: 0; }
.del-type-btn span { min-width: 0; }
.del-type-btn:hover { border-color: #cbd5e1; color: #334155; }
.del-type-btn.active {
  background: #eff6ff; border-color: var(--blue); color: var(--blue);
}

/* Pickup info box */
.pickup-info-box {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border-radius: 12px;
  background: #ecfdf5; border: 1.5px solid #a7f3d0;
  margin-top: 10px;
}
.pickup-info-box b { font-size: 14px; color: #0f172a; display: block; }

/* Carrier buttons */
.carrier-selector { display: flex; gap: 6px; margin-bottom: 10px; }
.carrier-btn,
.carrier-btn-addr {
  position: relative;
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 2px solid #e2e8f0;
  background: #fff; color: #64748b;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.carrier-btn:hover,
.carrier-btn-addr:hover { border-color: #94a3b8; color: #334155; }
/* Active state — stronger blue accent so it's clearly visible even when the
   button contains a colored carrier logo that visually competes with it. */
.carrier-btn.active,
.carrier-btn-addr.active {
  border-color: var(--blue);
  color: var(--blue);
  background: #dbeafe;                /* deeper light-blue (was #eff6ff) */
  box-shadow: 0 0 0 1px var(--blue) inset;
}
/* Small checkmark indicator on the active button — top-right corner */
.carrier-btn.active::after,
.carrier-btn-addr.active::after {
  content: '✓';
  position: absolute;
  top: -7px; right: -7px;
  width: 16px; height: 16px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.carrier-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  font-size: 8px; font-weight: 900; flex-shrink: 0; letter-spacing: 0;
}
.carrier-lpx { background: #e31837; color: #fff; }
.carrier-dpd { background: #414042; color: #fff; }
.carrier-omn { background: #f4a623; color: #fff; }

/* Terminal search */
.terminal-search-row { margin-bottom: 7px; }
.terminal-search {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid #e2e8f0; background: #fff; color: #0f172a;
  font-size: 13px; outline: none; transition: border-color .15s;
  box-sizing: border-box;
}
.terminal-search:focus { border-color: var(--blue); }
.terminal-search::placeholder { color: #64748b; }

/* Terminal dropdown */
.terminal-select {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid #e2e8f0; background: #fff; color: #0f172a;
  font-size: 13px; outline: none; cursor: pointer;
  transition: border-color .15s;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px; box-sizing: border-box;
}
.terminal-select:focus { border-color: var(--blue); }

/* Terminal error */
.terminal-error { font-size: 12px; color: #ef4444; margin-top: 6px; }

/* Address fields */
.field-row { display: flex; gap: 8px; }
.field-narrow { flex: 0 0 120px; }
.delivery-section .field { margin-bottom: 8px; }
.delivery-section label {
  display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 4px;
}
.delivery-section input {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid #e2e8f0; background: #fff; color: #0f172a;
  font-size: 13px; outline: none; transition: border-color .15s; box-sizing: border-box;
}
.delivery-section input:focus { border-color: var(--blue); }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCEPTED PAYMENT & CARRIER BADGES  (near order buttons)
═══════════════════════════════════════════════════════════════════════════ */
.accept-badges {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-top: 8px;
}
.badges-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #64748b;
  margin-right: 4px; white-space: nowrap;
}
.badges-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* Logo chip — a clean SVG logo with subtle shadow */
.pay-logo-chip {
  display: inline-flex; align-items: center;
  border-radius: 5px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  line-height: 0;
  transition: box-shadow .15s, transform .12s;
  cursor: default;
}
.pay-logo-chip:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER BADGES — uses the shared .payment-methods-card tile design
═══════════════════════════════════════════════════════════════════════════ */
/* Dark-footer context: transparent outer card so tiles float on the footer's
   dark background, same as polished e-commerce sites. Tiles themselves stay
   white with the shadow — they pop cleanly on dark. */
.payment-methods-card-footer {
  background: transparent;
  border: none;
  padding: 16px 0 12px;
  margin: 8px 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.payment-methods-card-footer .pm-label {
  color: rgba(255,255,255,.45);
}
.payment-methods-card-footer .pm-sep {
  display: none;   /* separators not needed with uniform tiles */
}
/* Legacy rules kept for any remaining usages */
.footer-badges {
  padding: 16px 0 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-badges-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.25);
}
/* Delivery partners logos in footer */
.ftr-delivery-logo {
  display: inline-flex; align-items: center;
  border-radius: 4px; overflow: hidden; line-height: 0;
  opacity: .80; transition: opacity .15s, transform .12s;
}
.ftr-delivery-logo:hover { opacity: 1; transform: scale(1.06); }
.ftr-divider { color: rgba(255,255,255,.15); font-size: 12px; padding: 0 2px; }

@media (max-width: 480px) {
  .carrier-selector { flex-wrap: wrap; }
  .carrier-btn,
  .carrier-btn-addr { flex: 1 1 calc(33% - 6px); font-size: 11px; }
  .field-row { flex-direction: column; }
  .field-narrow { flex: unset; }
}


/* ═══════════════════════════════════════════════════════════════════
   ORDER TRACKER  — .order-tracker component
   token usage: --blue, --green-dim, --muted, --line, --text, --bg
   Used on track.html and payment-return.php
═══════════════════════════════════════════════════════════════════ */

/* ── Stepper shell ─────────────────────────────────────────────── */
.ot-stepper {
  display: flex; align-items: flex-start; justify-content: space-between;
  position: relative; margin-bottom: 36px;
}

/* Connecting track */
.ot-track {
  position: absolute; top: 21px; left: 21px; right: 21px;
  height: 3px; background: var(--line); border-radius: 2px;
  overflow: hidden; z-index: 0;
}
.ot-track-fill {
  height: 100%; background: var(--blue); border-radius: 2px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* ── Individual step ───────────────────────────────────────────── */
.ot-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; flex: 1; z-index: 1; min-width: 0;
}
.ot-step-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
  background: #fff; border: 2.5px solid var(--line); color: var(--muted);
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.ot-step-icon svg { width: 18px; height: 18px; }

.ot-step.completed .ot-step-icon {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 2px 10px rgba(37,99,235,.3);
}
.ot-step.current .ot-step-icon {
  background: var(--blue); border-color: var(--blue); color: #fff;
  animation: ot-pulse 2.2s ease-out infinite;
}
@keyframes ot-pulse {
  0%  { box-shadow: 0 0 0 0   rgba(37,99,235,.4); }
  60% { box-shadow: 0 0 0 10px rgba(37,99,235,.0); }
  100%{ box-shadow: 0 0 0 0   rgba(37,99,235,.0); }
}
.ot-step.done .ot-step-icon {
  background: var(--green-dim); border-color: var(--green-dim); color: #fff;
  box-shadow: 0 2px 10px rgba(5,150,105,.3);
}

.ot-step-label {
  font-size: 11px; font-weight: 700; text-align: center;
  color: var(--muted); line-height: 1.3; padding: 0 2px;
  transition: color .3s;
}
.ot-step.completed .ot-step-label,
.ot-step.current   .ot-step-label { color: var(--text); }
.ot-step.done      .ot-step-label { color: var(--green-dim); }

.ot-step-time {
  font-size: 10px; color: var(--muted); text-align: center;
  min-height: 14px;
}

/* ── Status chip ───────────────────────────────────────────────── */
.ot-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.ot-status-chip.chip-progress { background: rgba(37,99,235,.1); color: var(--blue); }
.ot-status-chip.chip-done     { background: rgba(5,150,105,.12); color: var(--green-dim); }
.ot-status-chip.chip-cancelled{ background: rgba(239,68,68,.1);  color: var(--red); }
.ot-status-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.chip-progress .ot-status-chip-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ── Info grid ─────────────────────────────────────────────────── */
.ot-info-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 24px;
}
.ot-info-item {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.ot-info-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.ot-info-value { font-size: 15px; font-weight: 700; color: var(--text); }

/* ── Help bar ──────────────────────────────────────────────────── */
.ot-help {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: rgba(37,99,235,.05);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: var(--radius);
  font-size: 13px; color: #1e40af;
}
.ot-help svg { width: 16px; height: 16px; flex-shrink: 0; }
.ot-help a   { color: var(--blue); font-weight: 600; }

/* ── Refresh notice ────────────────────────────────────────────── */
.ot-refresh {
  text-align: center; margin-top: 18px;
  font-size: 12px; color: var(--muted);
}
.ot-refresh-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 5px; vertical-align: middle;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Tracker card header ───────────────────────────────────────── */
.ot-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 32px; gap: 12px; flex-wrap: wrap;
}
.ot-ref-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.ot-ref-code {
  font-size: 17px; font-weight: 800; color: var(--text);
  letter-spacing: .02em; font-family: 'Courier New', monospace;
}

/* ── Mobile stepper → vertical ─────────────────────────────────── */
@media (max-width: 600px) {
  .ot-stepper {
    flex-direction: column; align-items: flex-start; gap: 0;
  }
  .ot-track {
    top: 21px; left: 21px; right: auto; width: 3px; height: calc(100% - 42px);
  }
  .ot-step {
    flex-direction: row; align-items: center;
    gap: 14px; flex: none; width: 100%; padding: 10px 0;
  }
  .ot-step-label { text-align: left; font-size: 12px; }
  .ot-step-time  { text-align: left; }
  .ot-info-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .ot-info-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   PAYMENT RETURN PAGE  — payment-return.php
═══════════════════════════════════════════════════════════════════ */
.pay-ret-page {
  min-height: 100vh; background: var(--bg);
  display: flex; flex-direction: column;
}
.pay-ret-header {
  background: var(--dark); padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pay-ret-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: var(--wrap); margin: 0 auto;
}
.pay-ret-logo {
  display: flex; align-items: center; gap: 10px; color: #fff;
  font-size: 18px; font-weight: 900; text-decoration: none;
}
.pay-ret-logo img { width: 28px; height: 28px; }

.pay-ret-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
}
.pay-ret-card {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-xl); padding: 40px;
  box-shadow: var(--shadow-lg);
  max-width: 560px; width: 100%;
  text-align: center;
}
.pay-ret-icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.pay-ret-icon.icon-success {
  background: rgba(5,150,105,.12);
  color: var(--green-dim);
}
.pay-ret-icon.icon-cancel {
  background: rgba(100,116,139,.1);
  color: var(--muted);
}
.pay-ret-icon.icon-fail {
  background: rgba(239,68,68,.1);
  color: var(--red);
}
.pay-ret-icon svg { width: 36px; height: 36px; }

.pay-ret-title {
  font-size: 26px; font-weight: 900; color: var(--text);
  margin-bottom: 10px;
}
.pay-ret-msg {
  font-size: 15px; color: var(--muted);
  line-height: 1.65; margin-bottom: 28px;
}
.pay-ret-meta {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 20px;
  text-align: left; margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.pay-ret-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; gap: 8px;
}
.pay-ret-meta-row span:first-child { color: var(--muted); font-weight: 500; }
.pay-ret-meta-row span:last-child  { color: var(--text);  font-weight: 700; font-family: 'Courier New', monospace; font-size: 12px; }

.pay-ret-track-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px;
  background: var(--blue); color: #fff;
  border-radius: var(--radius-lg); font-size: 15px; font-weight: 700;
  text-decoration: none; margin-bottom: 12px;
  transition: background .15s, transform .1s;
}
.pay-ret-track-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.pay-ret-track-btn svg { width: 18px; height: 18px; }

.pay-ret-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.pay-ret-action-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--muted);
  border: 1.5px solid var(--line); text-decoration: none;
  transition: border-color .15s, color .15s;
}
.pay-ret-action-link:hover { border-color: #94a3b8; color: var(--text); }

/* ── Promo Popup ─────────────────────────────────────────────────────── */
.promo-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* If the popup is taller than the viewport (long content on a short
     phone screen), scroll the OVERLAY rather than letting the popup top
     drift off-screen — that way the × close badge in the corner is
     always reachable by scrolling up. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: promoFadeIn .3s ease;
}
@keyframes promoFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes promoSlideUp { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.promo-popup {
  background: #fff; border-radius: 24px;
  padding: 40px 36px 32px; max-width: 480px; width: 100%;
  position: relative; text-align: center;
  /* Cap popup height + scroll its OWN content when needed. The close
     badge sits at top: -14px so it stays in view at the top of the
     scrollable area. */
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  box-shadow: 0 25px 60px rgba(0,0,0,.25), 0 8px 20px rgba(0,0,0,.1);
  animation: promoSlideUp .4s ease .05s both;
  /* Margin so the close badge can extend outside the popup without
     getting clipped by the overlay's padding edge. */
  margin: 18px 0;
}
@media (max-width: 520px) {
  .promo-overlay {
    /* On phones, align to top so a tall popup doesn't push the corner
       badge above the viewport. Combined with overflow-y above, the
       customer can always scroll back up to find the × badge. */
    align-items: flex-start;
    padding-top: 24px;
  }
}

/* Close button — large, high-contrast, sits on the popup corner.
   v3 (2026-05-10): previous mobile override used white-on-white which
   was invisible against the popup's white background. Samsung Internet
   Browser also drops some CSS rules silently. New approach:
   DARK SOLID circle with WHITE × inside — guaranteed contrast against
   any popup background. Sits on top-right CORNER half-overlapping the
   popup edge so it reads as "exit this thing" universally and is
   impossible to miss on any device. */
.promo-close {
  position: absolute;
  top: -14px; right: -14px;     /* corner overlap — dark badge against any BG */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #0f172a;          /* near-black — pops against white popup AND dark overlay */
  border: 3px solid #ffffff;    /* white halo so it stays visible on dark backdrops too */
  color: #ffffff;
  font-size: 22px; font-weight: 700; line-height: 1;
  padding: 0; border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: background .15s, transform .12s, box-shadow .15s;
  z-index: 10;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.promo-close:hover,
.promo-close:focus-visible {
  background: #1e293b;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  outline: none;
}
.promo-close:active {
  transform: scale(0.94);
  background: #000;
}
@media (max-width: 520px) {
  .promo-close {
    /* Even chunkier on phones — one-thumb reach + heavier border so it
       reads as a tactile "Exit" badge from across the room. */
    width: 52px; height: 52px;
    top: -16px; right: -10px;
    font-size: 26px;
    border-width: 4px;
  }
}

.promo-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;
}
.promo-badge svg { color: #78350f; width: 14px; height: 14px; }

.promo-title {
  font-size: 24px; font-weight: 800; color: #0f172a;
  margin: 0 0 6px; line-height: 1.2;
}
.promo-subtitle {
  font-size: 14px; color: #64748b; margin: 0 0 24px;
}

/* ── First-order welcome banner inside promo popup ─────────────── */
.promo-welcome {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #fff;
  border-radius: 16px;
  padding: 18px 18px 16px;
  margin: 0 0 22px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(22,163,74,.28);
  position: relative;
  overflow: hidden;
}
.promo-welcome::before {
  /* subtle shine accent */
  content: ''; position: absolute; top: -40%; left: -20%; right: -20%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
}
.promo-welcome-headline {
  font-size: 16px; font-weight: 800; letter-spacing: .005em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 12px; line-height: 1.3;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.promo-welcome-emoji {
  font-size: 22px;
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.promo-welcome-code-row {
  display: flex; gap: 8px; justify-content: center; align-items: stretch;
  flex-wrap: wrap;
}
.promo-welcome-code {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255,255,255,.96);
  color: #14532d;
  font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
  font-size: 22px; font-weight: 900; letter-spacing: .08em;
  padding: 10px 14px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: all;
  border: 2px dashed rgba(255,255,255,.65);
}
.promo-welcome-copy {
  background: rgba(255,255,255,.18);
  color: #fff; border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.promo-welcome-copy:hover { background: rgba(255,255,255,.28); }
.promo-welcome-copy:active { transform: scale(.97); }
.promo-welcome-copy.is-copied {
  background: #fff; color: #14532d;
  border-color: #fff;
}
.promo-welcome-copy svg { stroke-width: 2.2; }
.promo-welcome-note {
  font-size: 12px; color: rgba(255,255,255,.85);
  margin: 10px 0 0; line-height: 1.45;
}

@media (max-width: 520px) {
  .promo-welcome { padding: 14px 14px 12px; border-radius: 14px; }
  .promo-welcome-headline { font-size: 14px; }
  .promo-welcome-code { font-size: 18px; padding: 9px 10px; letter-spacing: .06em; }
  .promo-welcome-copy { padding: 9px 12px; font-size: 12px; }
}

.promo-tiers {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 24px;
}
.promo-tier {
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 14px;
  padding: 14px 12px; min-width: 76px; flex: 1;
  transition: transform .15s, border-color .15s;
  position: relative;
}
.promo-tier:hover { transform: translateY(-2px); border-color: #cbd5e1; }
.promo-tier.tier-popular {
  background: #eff6ff; border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.promo-tier-pop {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #2563eb; color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: .04em; padding: 2px 8px; border-radius: 6px;
  white-space: nowrap;
}
.promo-tier-qty {
  font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1.2;
}
.promo-tier-info { margin-top: 4px; }
.promo-tier-pct {
  font-size: 16px; font-weight: 800; color: #2563eb; display: block;
}
.tier-popular .promo-tier-pct { color: #1d4ed8; }
.promo-tier-label {
  font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em;
}

.promo-extras {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  margin-bottom: 24px;
}
.promo-extra-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #334155; font-weight: 500;
}

.promo-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 24px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
}
.promo-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,.45); }
.promo-cta:active { transform: translateY(0); }

.promo-note {
  font-size: 12px; color: #94a3b8; margin: 12px 0 0;
}

@media (max-width: 520px) {
  .promo-popup { padding: 28px 20px 24px; border-radius: 20px; }
  .promo-title { font-size: 20px; }
  .promo-tiers { gap: 6px; }
  .promo-tier { min-width: 60px; padding: 10px 8px; }
  .promo-tier-qty { font-size: 16px; }
  .promo-tier-pct { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════
   REVIEWS / ATSILIEPIMAI section
═══════════════════════════════════════════════════ */
#reviews { padding: 80px 0; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin: 32px 0 40px;
}
@media (max-width: 720px) {
  .reviews-grid { grid-template-columns: 1fr; gap: 14px; }
  #reviews { padding: 56px 0; }
}

/* Pavienis review */
.review-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .15s, box-shadow .15s;
}
.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.review-stars {
  font-size: 18px; letter-spacing: 2px;
  color: #fbbf24;
}
.review-text {
  font-size: 15px; line-height: 1.65;
  color: var(--text); margin: 0;
  font-style: italic;
}
.review-text::before { content: "\201C "; color: var(--blue); font-weight: 700; }
.review-text::after { content: "\201D"; color: var(--blue); font-weight: 700; }
.review-author {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1e40af);
  color: #fff; font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.review-meta { display: flex; flex-direction: column; gap: 2px; }
.review-meta strong { font-size: 14px; color: var(--text); }
.review-meta span { font-size: 12px; color: var(--muted); }
.review-meta a { color: var(--blue); text-decoration: none; }
.review-meta a:hover { text-decoration: underline; }

/* Tuščios būklės placeholder */
.reviews-grid[data-reviews-empty="true"] {
  grid-template-columns: 1fr;
  max-width: 640px; margin: 32px auto 40px;
}
.reviews-empty-card {
  background: #f8fafc;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 28px;
  text-align: center;
}
.reviews-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(37,99,235,.08); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.reviews-empty-card h3 {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 0 0 8px;
}
.reviews-empty-card p {
  font-size: 14px; line-height: 1.6;
  color: var(--muted); margin: 0; max-width: 480px;
  margin-left: auto; margin-right: auto;
}

/* CTA — palik review po užsakymo */
.reviews-cta {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  margin-top: 16px;
}
.reviews-cta-text {
  font-size: 15px; font-weight: 600; color: var(--text);
  margin: 0 0 16px;
}
.reviews-cta-btns {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.reviews-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: #fff; color: var(--text);
  border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.reviews-cta-btn:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}
.reviews-cta-google:hover { border-color: #4285F4; }
.reviews-cta-fb:hover { border-color: #1877F2; }
.reviews-cta-bonus {
  font-size: 13px; color: var(--muted); margin: 0;
  padding-top: 12px; border-top: 1px dashed var(--line);
}
.reviews-cta-bonus strong {
  color: var(--blue); font-family: ui-monospace, Menlo, Consolas, monospace;
  background: rgba(37,99,235,.08); padding: 2px 8px; border-radius: 4px;
}

/* ── Stock / inventory states on color swatches ─────────────────────────
   .swatch-oos: admin marked this material+color combo as out_of_stock.
   The button is left clickable (we want the toast to fire when the user
   tries) but visually is dimmed and overlaid with a diagonal line so it
   reads as "blocked". On hover, opacity rises slightly so the customer
   can see they're hovering and the cursor changes to not-allowed.

   .swatch-low: low_stock — a small amber dot appears in the top-right
   corner so the swatch reads as "still available, but attention".
*/
.swatch.swatch-oos {
  position: relative;
  filter: grayscale(0.5);
  cursor: not-allowed;
}
.swatch.swatch-oos::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 140%;
  height: 1.5px;
  background: rgba(220, 38, 38, 0.85);
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
  border-radius: 1px;
}
.swatch.swatch-oos:hover { filter: grayscale(0.2); }
.swatch.swatch-low {
  position: relative;
}
.swatch.swatch-low::after {
  content: "";
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.7);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   MOBILE UX HARDENING — fixes applied 2026-05-10
   ═══════════════════════════════════════════════════
   Why these exist as a single trailing block instead of inlined into
   each component's CSS: they're cross-cutting concerns (overflow,
   input-zoom, tap-target floors) that I want to be able to audit and
   tune in one place without grepping the whole stylesheet. If a future
   redesign supersedes these, just delete the whole block. */

/* 1. Prevent horizontal scroll on every page.
      Many "mobile bugs" are really "one element is 20px wider than the
      viewport and the body scrolls horizontally". Hiding overflow-x on
      both html and body is the bullet-proof safe-belt. The site already
      uses .container max-widths so legitimate content never needs to
      overflow. */
html, body { overflow-x: hidden; max-width: 100%; }

/* 2. iOS Safari auto-zoom prevention.
      Safari mobile auto-zooms the viewport whenever the user taps an
      input whose computed font-size is < 16px. That zoom is jarring,
      doesn't auto-unzoom on blur, and is the single most-complained-about
      iPhone UX bug for small business sites. Force ≥16px on every actual
      text input (selects don't trigger the bug; buttons are fine smaller). */
@media (max-width: 720px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* 3. Tap-target floor — Apple HIG and Google Material both recommend
      a minimum 44×44 CSS-px tappable area on touch devices. Below that
      and customers will fat-finger neighbouring controls. The site's
      colour swatches (36×36) and pm-chip (36 tall) chips were under
      that floor; bump them on small screens. */
@media (max-width: 720px) {
  .swatch {
    width: 44px; height: 44px;
    /* Inner colour disc grows proportionally so the swatch still looks
       like a swatch, not a giant button with a small dot in it. */
  }
  .swatch span {
    width: 30px; height: 30px;
  }
  .pm-chip {
    height: 44px !important;
    min-width: 60px;
    padding: 6px 10px;
  }
  /* Quantity stepper +/- buttons */
  .qty-btn,
  .ep-qty-minus,
  .ep-qty-plus {
    min-width: 44px; min-height: 44px;
  }
  /* Generic small buttons that might be under 44px */
  button.status-btn,
  .ci-msg-btn,
  .swatch + .swatch {
    min-height: 36px;
  }
}

/* 4. Sticky header on iPhone Safari — sometimes the address bar resizing
      causes 100vh elements (like full-screen overlays) to be cut off.
      Use dvh (dynamic viewport height) where supported, fall back to vh
      so old browsers still work. */
@supports (height: 100dvh) {
  .promo-overlay,
  .lb,
  .mobile-nav {
    /* These overlays previously assumed 100vh which equals the LARGEST
       viewport height on iOS — meaning when the URL bar is shown the
       bottom of the overlay is below the visible area. dvh tracks the
       actual visible area, fixing the cut-off. */
    min-height: 100dvh;
  }
}

/* 5. Better tap feedback — by default mobile browsers flash a grey/blue
      box around tapped links. Site already disables this at line 1272
      with -webkit-tap-highlight-color: transparent. But that means there's
      NO touch feedback on buttons — customer doesn't know if their tap
      registered. Add a subtle :active scale on key CTAs so they feel
      responsive. */
@media (hover: none) and (pointer: coarse) {
  .hero-cta-primary:active,
  .btn-place-order:active,
  .checkout-place-btn:active,
  .addto-cart-btn:active,
  .reviews-cta-btn:active {
    transform: scale(0.97);
    transition: transform .08s ease-out;
  }
}

/* 6. Disable text selection on action buttons — accidental long-press on
      mobile selects button text + opens system menu (Copy / Share / ...)
      which is annoying and prevents the actual tap from registering. */
button, .swatch, .lang-trigger, .hamburger {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 7. Stop iOS from styling tel: links as blue if the customer's phone
      detected a number in body text. We have visible phone numbers in
      the contact section; default iOS behaviour underlines them and
      tints them blue, which clashes with our typography. */
a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}