/* ── RESET & VARS ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --g:   #8DC63F;
      --gd:  #6a9e28;
      --gl:  rgba(141,198,63,0.12);
      --gb:  rgba(141,198,63,0.18);
      --y:   #F5E100;
      --yd:  #d4c200;
      --bg:  #07100a;
      --bg2: #0c1a0f;
      --sur: rgba(141,198,63,0.05);
      --brd: rgba(141,198,63,0.14);
      --brd2:rgba(141,198,63,0.3);
      --txt: #e8f0e0;
      /* 0.45 давало контраст 3.95:1 — нижче за AA. 0.55 = 5.37:1 */
      --muted: rgba(220,240,210,0.55);
      --r: 14px;
      --glow: 0 0 30px rgba(141,198,63,0.22), 0 0 80px rgba(141,198,63,0.08);
      --glow-y: 0 0 30px rgba(245,225,0,0.25);

      /* ── Дизайн-токени ──
         До цього в розмітці жило 12 різних радіусів, 20 розмірів шрифту
         і 7 тривалостей переходу — здебільшого випадкових. Тут шкала,
         на яку слід спиратися в усіх нових правках. */
      --r-sm: 8px;      /* дрібні елементи: чипи, теги */
      --r-md: 12px;     /* кнопки, поля вводу */
      --r-lg: 16px;     /* картки, модалки */
      --r-pill: 999px;  /* усе капсульне */

      --h-btn-sm: 36px;
      --h-btn: 44px;    /* базова кнопка = мінімальна ціль дотику */
      --h-btn-lg: 56px;

      --t-fast: .15s;
      --t: .25s;
      --t-slow: .4s;

      --section-y: 88px;   /* вертикальний ритм між секціями */
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg);
      color: var(--txt);
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ── ANIMATIONS ── */
    @keyframes float1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(60px,-40px) scale(1.05)} 66%{transform:translate(-30px,60px) scale(0.97)} }
    @keyframes float2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-70px,50px) scale(1.08)} 66%{transform:translate(40px,-60px) scale(0.95)} }
    @keyframes float3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(50px,70px) scale(1.06)} }
    @keyframes float4 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,-50px)} }
    @keyframes pulse-g { 0%,100%{box-shadow:0 0 20px rgba(141,198,63,0.3)} 50%{box-shadow:0 0 40px rgba(141,198,63,0.6), 0 0 80px rgba(141,198,63,0.2)} }
    @keyframes pulse-y { 0%,100%{box-shadow:0 0 20px rgba(245,225,0,0.3)} 50%{box-shadow:0 0 50px rgba(245,225,0,0.55), 0 0 100px rgba(245,225,0,0.15)} }
    @keyframes spin-slow { to{transform:rotate(360deg)} }
    @keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
    @keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
    @keyframes borderGlow { 0%,100%{border-color:rgba(141,198,63,0.14)} 50%{border-color:rgba(141,198,63,0.5)} }
    @keyframes countUp { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }
    @keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* ── BACKGROUND SCENE ── */
    .bg-scene {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.55;
    }

    .orb-1 {
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(141,198,63,0.35) 0%, transparent 70%);
      top: -200px; left: -100px;
      animation: float1 18s ease-in-out infinite;
    }

    .orb-2 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(141,198,63,0.25) 0%, transparent 70%);
      bottom: 10%; right: -150px;
      animation: float2 22s ease-in-out infinite;
    }

    .orb-3 {
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(245,225,0,0.12) 0%, transparent 70%);
      top: 40%; left: 35%;
      animation: float3 28s ease-in-out infinite;
    }

    .orb-4 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(141,198,63,0.2) 0%, transparent 70%);
      bottom: -100px; left: 20%;
      animation: float4 20s ease-in-out infinite;
    }

    .grid-lines {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(141,198,63,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(141,198,63,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    /* ── GLASS MIXIN ── */
    .glass {
      background: var(--sur);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--brd);
      border-radius: var(--r);
    }

    /* ── HEADER ── */
    header {
      position: sticky;
      top: 0;
      z-index: 200;
      background: rgba(7,16,10,0.82);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--brd);
    }

    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .logo { display: flex; align-items: center; text-decoration: none; }

    .logo img {
      height: 50px;
      width: auto;
      border-radius: var(--r-sm);
      filter: drop-shadow(0 0 12px rgba(141,198,63,0.5));
      transition: filter var(--t);
    }

    .logo img:hover { filter: drop-shadow(0 0 20px rgba(141,198,63,0.8)); }

    nav { display: flex; gap: 2px; }

    nav a {
      text-decoration: none;
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
      padding: 7px 14px;
      border-radius: var(--r-sm);
      transition: all var(--t-fast);
      position: relative;
    }

    nav a::after {
      content: '';
      position: absolute;
      bottom: 2px; left: 50%;
      width: 0; height: 2px;
      background: var(--g);
      border-radius: 2px;
      transition: all var(--t);
      transform: translateX(-50%);
    }

    nav a:hover { color: var(--g); }
    nav a:hover::after { width: 60%; }

    .header-actions { display: flex; align-items: center; gap: 10px; }

    .btn-phone {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: var(--sur);
      border: 1px solid var(--brd);
      border-radius: var(--r-md);
      color: var(--g);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: all var(--t);
      backdrop-filter: blur(10px);
    }

    .btn-phone:hover { background: var(--gb); border-color: var(--brd2); box-shadow: var(--glow); }

    .cart-btn { min-height: var(--h-btn); min-width: var(--h-btn);
      position: relative;
      width: 42px; height: 42px;
      background: var(--sur);
      border: 1px solid var(--brd);
      border-radius: var(--r-md);
      color: var(--g);
      font-size: 18px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--t);
      backdrop-filter: blur(10px);
    }

    .cart-btn:hover { background: var(--gb); border-color: var(--brd2); box-shadow: var(--glow); }

    .cart-badge {
      position: absolute;
      top: -5px; right: -5px;
      background: var(--y);
      color: #111;
      font-size: 10px;
      font-weight: 800;
      width: 18px; height: 18px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid var(--bg);
      animation: pulse-y 2s ease infinite;
    }

    .mobile-nav-toggle {
      display: none;
      background: none; border: none;
      color: var(--txt);
      font-size: 22px;
      cursor: pointer;
    }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 100px 24px 80px;
      position: relative;
      z-index: 1;
    }

    .hero-inner { max-width: 760px; margin: 0 auto; }

    .hero-logo-wrap {
      position: relative;
      display: inline-block;
      margin-bottom: 32px;
    }

    .hero-logo {
      height: 110px;
      width: auto;
      border-radius: var(--r-lg);
      filter: drop-shadow(0 0 30px rgba(141,198,63,0.6)) drop-shadow(0 0 60px rgba(141,198,63,0.2));
      animation: float3 6s ease-in-out infinite;
    }

    .hero-ring {
      position: absolute;
      inset: -14px;
      border-radius: var(--r-lg);
      border: 1.5px solid rgba(141,198,63,0.3);
      animation: borderGlow 3s ease infinite, spin-slow 12s linear infinite;
    }

    .hero-ring2 {
      position: absolute;
      inset: -28px;
      border-radius: var(--r-lg);
      border: 1px solid rgba(141,198,63,0.12);
      animation: borderGlow 4s ease infinite reverse, spin-slow 20s linear infinite reverse;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(141,198,63,0.08);
      border: 1px solid rgba(141,198,63,0.25);
      backdrop-filter: blur(10px);
      border-radius: var(--r-pill);
      padding: 6px 18px;
      font-size: 13px;
      font-weight: 600;
      color: var(--g);
      margin-bottom: 22px;
    }

    .hero-badge .dot {
      width: 6px; height: 6px;
      background: var(--g);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--g);
      animation: pulse-g 1.5s ease infinite;
    }

    .hero h1 {
      font-size: clamp(36px, 6vw, 68px);
      font-weight: 900;
      line-height: 1.08;
      margin-bottom: 18px;
      letter-spacing: -2px;
    }

    .hero h1 .line1 { color: var(--txt); }

    .hero h1 .line2 {
      background: linear-gradient(90deg, var(--g), var(--y), var(--g));
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 3s linear infinite;
    }

    .hero p {
      font-size: 17px;
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto 36px;
      line-height: 1.75;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 64px;
    }

    .btn-hero-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 15px 32px;
      background: var(--y);
      color: #111;
      font-size: 16px;
      font-weight: 800;
      border-radius: var(--r-md);
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all var(--t);
      position: relative;
      overflow: hidden;
    }

    .btn-hero-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
      transform: translateX(-100%);
      transition: transform .5s;
    }

    .btn-hero-primary:hover::before { transform: translateX(100%); }
    .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-y), 0 12px 32px rgba(245,225,0,0.25); }

    .btn-hero-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 15px 32px;
      background: var(--sur);
      color: var(--txt);
      font-size: 16px;
      font-weight: 600;
      border-radius: var(--r-md);
      text-decoration: none;
      border: 1px solid var(--brd2);
      cursor: pointer;
      transition: all var(--t);
      backdrop-filter: blur(10px);
    }

    .btn-hero-secondary:hover { background: var(--gl); border-color: var(--g); color: var(--g); transform: translateY(-2px); box-shadow: var(--glow); }

    .hero-stats {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .stat-card {
      background: var(--sur);
      backdrop-filter: blur(20px);
      border: 1px solid var(--brd);
      border-radius: 14px;
      padding: 18px 28px;
      text-align: center;
      transition: all var(--t);
      min-width: 130px;
    }

    .stat-card:hover { border-color: var(--brd2); box-shadow: var(--glow); transform: translateY(-3px); }

    .stat-num {
      font-size: 26px;
      font-weight: 900;
      background: linear-gradient(135deg, var(--g), var(--y));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .stat-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }

    /* ── TICKER ── */
    .ticker-wrap {
      overflow: hidden;
      background: rgba(141,198,63,0.06);
      border-top: 1px solid var(--brd);
      border-bottom: 1px solid var(--brd);
      padding: 10px 0;
      position: relative;
      z-index: 1;
    }

    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker 25s linear infinite;
    }

    .ticker-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 32px;
      font-size: 13px;
      font-weight: 600;
      color: var(--g);
      white-space: nowrap;
    }

    .ticker-dot { width: 4px; height: 4px; background: var(--y); border-radius: 50%; }

    /* ── SECTION COMMON ── */
    section { position: relative; z-index: 1; padding: var(--section-y) 24px; }
    .section-inner { max-width: 1200px; margin: 0 auto; }
    /* На FHD 1200px лишали пів екрана порожніми: 4 колонки замість 5-6 */
    @media (min-width: 1560px) { .section-inner { max-width: 1440px; } }
    @media (min-width: 1900px) { .section-inner { max-width: 1660px; } }

    .section-header { text-align: center; margin-bottom: 52px; }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(141,198,63,0.08);
      border: 1px solid var(--brd);
      color: var(--g);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: var(--r-pill);
      margin-bottom: 14px;
    }

    .section-tag::before { content: ''; width: 5px; height: 5px; background: var(--g); border-radius: 50%; box-shadow: 0 0 6px var(--g); }

    .section-header h2 {
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 900;
      letter-spacing: -1px;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .section-header h2 span {
      background: linear-gradient(90deg, var(--g), var(--y));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-header p { color: var(--muted); font-size: 16px; max-width: 520px; margin: 0 auto; }

    /* ── CATEGORIES ── */
    .categories-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px;
    }

    .category-card {
      background: var(--sur);
      backdrop-filter: blur(20px);
      border: 1px solid var(--brd);
      border-radius: var(--r);
      padding: 28px 16px;
      text-align: center;
      text-decoration: none;
      color: var(--txt);
      display: block;
      cursor: pointer;
      transition: all var(--t) cubic-bezier(.25,.8,.25,1);
      position: relative;
      overflow: hidden;
    }

    .category-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(141,198,63,0.15) 0%, transparent 70%);
      opacity: 0;
      transition: opacity var(--t);
    }

    .category-card:hover::before { opacity: 1; }
    .category-card:hover { border-color: var(--brd2); transform: translateY(-4px); box-shadow: var(--glow); }
    .category-card:hover .cat-icon { transform: scale(1.2) rotate(-5deg); filter: drop-shadow(0 0 10px rgba(141,198,63,0.5)); }

    .cat-icon {
      font-size: 38px;
      margin-bottom: 12px;
      display: block;
      transition: all var(--t);
    }

    .cat-name { font-size: 13px; font-weight: 700; color: var(--txt); }
    .cat-count { font-size: 11px; color: var(--muted); margin-top: 4px; }

    /* ── PROMO BANNER ── */
    .promo-banner {
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(30px);
      border: 1px solid rgba(245,225,0,0.25);
      border-radius: var(--r-lg);
      padding: 48px 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;
    }

    .promo-banner::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(245,225,0,0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    .promo-banner::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -60px;
      width: 250px; height: 250px;
      background: radial-gradient(circle, rgba(141,198,63,0.1) 0%, transparent 70%);
      pointer-events: none;
    }

    .promo-content h3 {
      font-size: 30px;
      font-weight: 900;
      color: var(--y);
      margin-bottom: 10px;
      text-shadow: 0 0 20px rgba(245,225,0,0.4);
    }

    .promo-content p { color: var(--muted); font-size: 15px; max-width: 400px; line-height: 1.7; }

    .promo-timer { display: flex; gap: 12px; position: relative; z-index: 1; }

    .timer-block {
      background: rgba(245,225,0,0.08);
      border: 1px solid rgba(245,225,0,0.2);
      border-radius: var(--r-md);
      padding: 14px 18px;
      text-align: center;
      min-width: 70px;
      backdrop-filter: blur(10px);
    }

    .timer-num {
      font-size: 32px;
      font-weight: 900;
      color: var(--y);
      line-height: 1;
      text-shadow: 0 0 20px rgba(245,225,0,0.5);
    }

    .timer-label { font-size: 10px; color: var(--muted); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

    .btn-promo {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 22px;
      padding: 12px 26px;
      background: var(--y);
      color: #111;
      font-weight: 800;
      font-size: 14px;
      border-radius: var(--r-md);
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all var(--t);
    }

    .btn-promo:hover { transform: translateY(-2px); box-shadow: var(--glow-y); }

    /* ── FILTER BAR ── */
    .filter-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

    .filter-chip {
      padding: 8px 20px;
      border-radius: var(--r-pill);
      border: 1px solid var(--brd);
      background: var(--sur);
      backdrop-filter: blur(10px);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--t-fast);
      color: var(--muted);
    }

    .filter-chip:hover { border-color: var(--brd2); color: var(--g); background: var(--gl); }

    .filter-chip.active {
      background: var(--g);
      border-color: var(--g);
      color: #111;
      font-weight: 800;
      box-shadow: 0 0 20px rgba(141,198,63,0.35);
    }

    /* ── PRODUCTS GRID ── */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 20px;
    }

    .product-card {
      /* Браузер не витрачає час на розкладку карток за межами екрана.
         На каталозі в кілька сотень позицій це помітно. */
      content-visibility: auto;
      contain-intrinsic-size: auto 380px;
      background: var(--sur);
      backdrop-filter: blur(20px);
      border: 1px solid var(--brd);
      border-radius: var(--r);
      overflow: hidden;
      transition: all var(--t-slow) cubic-bezier(.25,.8,.25,1);
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .product-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(141,198,63,0.1) 0%, transparent 60%);
      opacity: 0;
      transition: opacity var(--t);
      pointer-events: none;
    }

    .product-card:hover { border-color: var(--brd2); transform: translateY(-6px); box-shadow: var(--glow), 0 20px 60px rgba(0,0,0,0.4); }
    .product-card:hover::after { opacity: 1; }

    .product-img {
      background: linear-gradient(135deg, rgba(141,198,63,0.08) 0%, rgba(141,198,63,0.03) 100%);
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 72px;
      position: relative;
      border-bottom: 1px solid var(--brd);
      transition: transform var(--t);
    }

    .product-card:hover .product-img { transform: scale(1.02); }

    .badge {
      position: absolute;
      top: 12px; left: 12px;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: var(--r-pill);
      backdrop-filter: blur(10px);
    }

    .badge-sale { background: rgba(239,68,68,0.85); color: #fff; }
    .badge-new  { background: rgba(141,198,63,0.85); color: #111; border: 1px solid rgba(141,198,63,0.5); }
    .badge-hit  { background: rgba(245,225,0,0.85);  color: #111; border: 1px solid rgba(245,225,0,0.5); }

    .product-info { padding: 18px; flex: 1; display: flex; flex-direction: column; }

    .product-brand {
      font-size: 10px;
      font-weight: 800;
      color: var(--g);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 6px;
    }

    .product-name { font-size: 15px; font-weight: 600; margin-bottom: 10px; line-height: 1.4; color: var(--txt); }

    .stars { color: var(--y); font-size: 13px; margin-bottom: 12px; text-shadow: 0 0 8px rgba(245,225,0,0.4); }
    .stars span { color: var(--muted); font-size: 12px; text-shadow: none; }

    .product-footer {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .price {
      font-size: 22px;
      font-weight: 900;
      background: linear-gradient(135deg, var(--g), #b8e05a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .price-old { font-size: 12px; color: var(--muted); text-decoration: line-through; }

    .add-btn {
      background: var(--g);
      color: #111;
      border: none;
      border-radius: var(--r-md);
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: all var(--t);
      white-space: nowrap;
      position: relative;
      overflow: hidden;
    }

    .add-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transform: translateX(-100%);
      transition: transform .4s;
    }

    .add-btn:hover::before { transform: translateX(100%); }
    .add-btn:hover { background: var(--gd); color: #fff; transform: scale(1.05); box-shadow: 0 0 20px rgba(141,198,63,0.4); }

    /* ── FEATURES ── */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }

    .feature-card {
      background: var(--sur);
      backdrop-filter: blur(20px);
      border: 1px solid var(--brd);
      border-radius: var(--r);
      padding: 30px 28px;
      transition: all var(--t);
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--g), var(--y));
      transform: scaleX(0);
      transition: transform .4s;
    }

    .feature-card:hover::before { transform: scaleX(1); }
    .feature-card:hover { border-color: var(--brd2); transform: translateY(-4px); box-shadow: var(--glow); }

    .feature-icon-wrap {
      width: 54px; height: 54px;
      background: var(--gl);
      border: 1px solid var(--brd2);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px;
      margin-bottom: 18px;
      transition: all var(--t);
    }

    .feature-card:hover .feature-icon-wrap { background: var(--gb); box-shadow: var(--glow); transform: scale(1.1); }

    .feature-card h4, .feature-title { font-size: 16px; font-weight: 800; margin-bottom: 8px; color: var(--txt); }
    .feature-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }

    /* ── REVIEWS ── */
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
      gap: 20px;
    }

    .review-card {
      background: var(--sur);
      backdrop-filter: blur(20px);
      border: 1px solid var(--brd);
      border-radius: var(--r);
      padding: 26px;
      transition: all var(--t);
      position: relative;
    }

    .review-card::before {
      content: '"';
      position: absolute;
      top: 10px; right: 20px;
      font-size: 80px;
      color: rgba(141,198,63,0.07);
      font-family: serif;
      line-height: 1;
      pointer-events: none;
    }

    .review-card:hover { border-color: var(--brd2); box-shadow: var(--glow); transform: translateY(-3px); }

    .review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

    .avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px;
      font-weight: 800;
      flex-shrink: 0;
      border: 2px solid var(--brd2);
    }

    .reviewer-name { font-weight: 700; font-size: 14px; }
    .review-date { font-size: 12px; color: var(--muted); }

    .review-stars {
      font-size: 14px;
      color: var(--y);
      text-shadow: 0 0 8px rgba(245,225,0,0.4);
      margin-left: auto;
    }

    .review-text { font-size: 14px; color: var(--muted); line-height: 1.75; }

    /* ── STORE INFO ── */
    .store-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: start;
    }

    @media(max-width:768px) { .store-grid { grid-template-columns: 1fr; } }

    .info-block { display: flex; flex-direction: column; gap: 12px; }

    .info-row {
      background: var(--sur);
      backdrop-filter: blur(20px);
      border: 1px solid var(--brd);
      border-radius: var(--r);
      padding: 16px 18px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      transition: all var(--t);
    }

    .info-row:hover { border-color: var(--brd2); box-shadow: 0 0 20px rgba(141,198,63,0.12); }

    .info-icon {
      width: 42px; height: 42px;
      background: var(--gl);
      border: 1px solid var(--brd2);
      border-radius: var(--r-md);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .info-content h5, .info-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; color: var(--txt); }
    .info-content p { font-size: 13px; color: var(--muted); line-height: 1.5; }

    .map-placeholder {
      border-radius: var(--r);
      border: 1px solid var(--brd);
      background: var(--sur);
      backdrop-filter: blur(20px);
      height: 340px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }

    .map-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 30% 70%, rgba(141,198,63,0.12) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(245,225,0,0.06) 0%, transparent 50%);
    }

    .map-pin { font-size: 52px; filter: drop-shadow(0 0 20px rgba(141,198,63,0.5)); position: relative; z-index: 1; animation: float3 4s ease-in-out infinite; }
    .map-label { position: relative; z-index: 1; text-align: center; font-weight: 700; font-size: 15px; color: var(--txt); }
    .map-label span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }

    /* ── NEWSLETTER ── */
    .newsletter {
      background: transparent;
      padding: var(--section-y) 24px;
    }

    .newsletter-box {
      max-width: 640px;
      margin: 0 auto;
      background: var(--sur);
      backdrop-filter: blur(30px);
      border: 1px solid var(--brd2);
      border-radius: var(--r-lg);
      padding: 56px 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: var(--glow);
    }

    .newsletter-box::before {
      content: '';
      position: absolute;
      top: -40px; left: 50%; transform: translateX(-50%);
      width: 300px; height: 200px;
      background: radial-gradient(circle, rgba(141,198,63,0.2) 0%, transparent 70%);
      pointer-events: none;
    }

    .newsletter-box h2 {
      font-size: 30px;
      font-weight: 900;
      margin-bottom: 8px;
      background: linear-gradient(90deg, var(--g), var(--y));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .newsletter-box p { color: var(--muted); margin-bottom: 28px; font-size: 15px; }

    .email-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; flex-wrap: wrap; }

    .email-input {
      flex: 1; min-width: 180px;
      padding: 13px 18px;
      background: rgba(141,198,63,0.06);
      border: 1px solid var(--brd2);
      border-radius: var(--r-md);
      color: var(--txt);
      font-size: 14px;
      outline: none;
      transition: border-color var(--t-fast);
    }

    .email-input::placeholder { color: var(--muted); }
    .email-input:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(141,198,63,0.12); }

    .btn-subscribe { min-height: var(--h-btn);
      padding: 13px 22px;
      background: var(--y);
      color: #111;
      font-size: 14px;
      font-weight: 800;
      border: none;
      border-radius: var(--r-md);
      cursor: pointer;
      transition: all var(--t);
    }

    .btn-subscribe:hover { transform: translateY(-2px); box-shadow: var(--glow-y); background: var(--yd); }

    /* ── FOOTER ── */
    footer {
      position: relative; z-index: 1;
      background: rgba(5,8,5,0.9);
      backdrop-filter: blur(20px);
      border-top: 1px solid var(--brd);
      padding: 60px 24px 28px;
    }

    .footer-inner { max-width: 1200px; margin: 0 auto; }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }

    @media(max-width:900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
    @media(max-width:560px) { .footer-grid { grid-template-columns: 1fr; } }

    .footer-logo img { height: 48px; border-radius: var(--r-sm); filter: drop-shadow(0 0 10px rgba(141,198,63,0.4)); }
    .footer-desc { font-size: 13px; color: var(--muted); margin: 14px 0; line-height: 1.7; max-width: 240px; }

    .footer-col h5, .footer-title {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--g);
      margin-bottom: 16px;
    }

    .footer-col a {
      display: block;
      color: var(--muted);
      text-decoration: none;
      font-size: 13px;
      margin-bottom: 10px;
      transition: all var(--t-fast);
    }

    .footer-col a:hover { color: var(--txt); padding-left: 4px; }

    .socials { display: flex; gap: 8px; margin-top: 4px; }

    .social-btn {
      width: 38px; height: 38px;
      border-radius: var(--r-md);
      background: var(--sur);
      border: 1px solid var(--brd);
      color: var(--muted);
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      font-size: 17px;
      transition: all var(--t);
    }

    .social-btn:hover { background: var(--gl); border-color: var(--brd2); color: var(--g); box-shadow: var(--glow); }

    .footer-bottom {
      border-top: 1px solid var(--brd);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 13px;
      /* 0.3 давало 2.31:1 — далеко нижче за AA */
      color: var(--muted);
    }

    .footer-bottom a { color: var(--g); text-decoration: none; }
    .footer-bottom a:hover { color: var(--g); }

    /* ── CART PANEL ── */
    .cart-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(4px);
      z-index: 300;
      opacity: 0; pointer-events: none;
      transition: opacity var(--t);
    }

    .cart-overlay.open { opacity: 1; pointer-events: all; }

    .cart-panel {
      position: fixed; top: 0; right: 0;
      width: 390px; max-width: 100vw;
      height: 100vh;
      background: rgba(7,16,10,0.95);
      backdrop-filter: blur(30px);
      border-left: 1px solid var(--brd2);
      z-index: 310;
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform var(--t-slow) cubic-bezier(.4,0,.2,1);
      box-shadow: -12px 0 60px rgba(0,0,0,0.6), -2px 0 0 rgba(141,198,63,0.1);
    }

    .cart-panel.open { transform: translateX(0); }

    .cart-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 22px;
      border-bottom: 1px solid var(--brd);
    }

    .cart-header h3 { font-size: 18px; font-weight: 800; color: var(--txt); }

    .cart-close {
      width: 32px; height: 32px;
      border-radius: var(--r-sm);
      background: var(--sur);
      border: 1px solid var(--brd);
      color: var(--muted);
      font-size: 16px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--t-fast);
    }

    .cart-close:hover { background: rgba(239,68,68,0.15); border-color: #ef4444; color: #ef4444; }

    .cart-items { flex: 1; overflow-y: auto; padding: 16px 22px; }
    .cart-items::-webkit-scrollbar { width: 3px; }
    .cart-items::-webkit-scrollbar-thumb { background: var(--g); border-radius: 2px; }

    .cart-empty { text-align: center; color: var(--muted); padding: 60px 20px; }
    .cart-empty .e-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }

    .cart-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(141,198,63,0.08);
    }

    .cart-item-emoji { font-size: 30px; width: 42px; text-align: center; flex-shrink: 0; }
    .cart-item-info { flex: 1; min-width: 0; }
    .cart-item-name { font-size: 13px; font-weight: 600; color: var(--txt); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cart-item-price { font-size: 13px; color: var(--g); font-weight: 700; margin-top: 2px; }

    .cart-item-qty { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

    .qty-btn {
      width: 26px; height: 26px;
      border-radius: 6px;
      background: var(--sur);
      border: 1px solid var(--brd);
      color: var(--txt);
      font-size: 15px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }

    .qty-btn:hover { background: var(--gl); border-color: var(--brd2); color: var(--g); }

    .qty-num { font-size: 14px; font-weight: 700; color: var(--txt); min-width: 20px; text-align: center; }

    .cart-remove {
      width: 26px; height: 26px;
      border-radius: 6px;
      background: none;
      border: 1px solid rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.2);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
      transition: all .15s;
      flex-shrink: 0;
    }

    .cart-remove:hover { background: rgba(239,68,68,0.15); border-color: #ef4444; color: #ef4444; }

    .cart-footer {
      padding: 16px 22px;
      border-top: 1px solid var(--brd);
      background: rgba(0,0,0,0.3);
    }

    .cart-total-row {
      display: flex; justify-content: space-between;
      font-size: 14px; color: var(--muted);
      margin-bottom: 14px;
    }

    .cart-total-row strong { font-size: 22px; color: var(--g); font-weight: 900; }
    .cart-delivery-row { display: flex; justify-content: space-between; align-items: center;
      font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
    .cart-delivery-row #cartDeliveryVal { color: var(--txt); font-weight: 700; }

    .cart-footer-btns { display: flex; flex-direction: column; gap: 10px; }

    .btn-quick { min-height: var(--h-btn);
      width: 100%; padding: 13px;
      background: var(--y); color: #111;
      font-size: 15px; font-weight: 800;
      border: none; border-radius: var(--r-md);
      cursor: pointer; transition: all var(--t);
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }

    .btn-quick:hover { background: var(--yd); transform: translateY(-1px); box-shadow: var(--glow-y); }
    .btn-quick:disabled { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.2); cursor: not-allowed; transform: none; box-shadow: none; }

    .btn-full { min-height: var(--h-btn);
      width: 100%; padding: 12px;
      background: var(--sur); color: var(--g);
      font-size: 14px; font-weight: 700;
      border: 1px solid var(--brd2); border-radius: var(--r-md);
      cursor: pointer; transition: all var(--t);
      display: flex; align-items: center; justify-content: center; gap: 8px;
      backdrop-filter: blur(10px);
    }

    .btn-full:hover { background: var(--gl); box-shadow: var(--glow); transform: translateY(-1px); }
    .btn-full:disabled { border-color: rgba(255,255,255,0.06); color: rgba(255,255,255,0.15); cursor: not-allowed; }

    .cart-hint { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; line-height: 1.5; }

    /* ── MODALS COMMON ── */
    .modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(8px);
      z-index: 400;
      display: none; align-items: center; justify-content: center;
      padding: 20px;
    }

    .modal-overlay.open { display: flex; }

    /* ── CHECKOUT MODAL ── */
    .checkout-box {
      background: rgba(10,20,12,0.97);
      border: 1px solid var(--brd2);
      border-radius: var(--r-lg);
      padding: 32px 28px;
      width: 100%; max-width: 500px;
      max-height: 90vh; overflow-y: auto;
      box-shadow: var(--glow), 0 40px 80px rgba(0,0,0,0.6);
    }

    .checkout-box h3 { font-size: 20px; font-weight: 900; color: var(--txt); margin-bottom: 20px; }

    .co-summary {
      background: rgba(141,198,63,0.05);
      border: 1px solid var(--brd);
      border-radius: var(--r-md);
      padding: 14px;
      margin-bottom: 18px;
      font-size: 13px;
      color: var(--muted);
    }

    .co-summary-total { font-size: 16px; font-weight: 800; color: var(--g); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--brd); }

    .co-field { margin-bottom: 14px; }
    .co-field label { display: block; font-size: 11px; font-weight: 700; color: rgba(220,240,210,0.4); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }

    .co-field input, .co-field select, .co-field textarea {
      width: 100%;
      padding: 11px 14px;
      background: rgba(141,198,63,0.05);
      border: 1px solid var(--brd);
      border-radius: var(--r-md);
      color: var(--txt);
      font-size: 14px;
      outline: none;
      font-family: inherit;
      transition: border-color var(--t-fast), box-shadow .2s;
    }

    .co-field input:focus, .co-field select:focus, .co-field textarea:focus {
      border-color: var(--g);
      box-shadow: 0 0 0 3px rgba(141,198,63,0.1);
    }

    .co-field textarea { resize: none; height: 72px; }
    .co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    .co-actions { display: flex; gap: 10px; margin-top: 20px; }

    .btn-back {
      padding: 12px 18px;
      background: transparent;
      border: 1px solid var(--brd);
      color: var(--muted);
      border-radius: var(--r-md);
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: all var(--t-fast);
    }

    .btn-back:hover { border-color: var(--brd2); color: var(--txt); }

    .btn-order {
      flex: 1; padding: 13px;
      background: var(--g); color: #111;
      font-size: 15px; font-weight: 800;
      border: none; border-radius: var(--r-md);
      cursor: pointer; transition: all var(--t);
    }

    .btn-order:hover { background: var(--gd); color: #fff; box-shadow: var(--glow); }

    /* ── QUICK ORDER MODAL ── */
    .qorder-box {
      background: rgba(8,18,10,0.97);
      border: 2px solid rgba(245,225,0,0.3);
      border-radius: 22px;
      padding: 36px 30px;
      width: 100%; max-width: 420px;
      box-shadow: var(--glow-y), 0 40px 80px rgba(0,0,0,0.6);
    }

    .qorder-icon { font-size: 42px; text-align: center; margin-bottom: 10px; filter: drop-shadow(0 0 20px rgba(245,225,0,0.5)); }
    .qorder-box h3 { font-size: 22px; font-weight: 900; color: var(--y); text-align: center; margin-bottom: 8px; text-shadow: 0 0 20px rgba(245,225,0,0.3); }
    .qorder-box > p { font-size: 14px; color: var(--muted); text-align: center; margin-bottom: 22px; line-height: 1.6; }

    .qorder-items {
      background: rgba(141,198,63,0.05);
      border: 1px solid var(--brd);
      border-radius: var(--r-md);
      padding: 12px 14px;
      margin-bottom: 18px;
      font-size: 13px;
      max-height: 120px;
      overflow-y: auto;
    }

    .qorder-item-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--brd); color: var(--muted); }
    .qorder-item-row:last-child { border-bottom: none; }
    .qorder-total { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--g); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--brd); }

    .qorder-phone-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(220,240,210,0.35); text-align: center; margin-bottom: 8px; }

    .qorder-phone-wrap { position: relative; margin-bottom: 14px; }
    .qorder-phone-wrap input {
      width: 100%; padding: 16px 18px;
      font-size: 20px; font-weight: 700;
      letter-spacing: 1px;
      background: rgba(245,225,0,0.05);
      border: 2px solid rgba(245,225,0,0.25);
      border-radius: var(--r-md);
      color: #fff; outline: none;
      text-align: center;
      transition: border-color var(--t-fast), box-shadow .2s;
    }

    .qorder-phone-wrap input:focus { border-color: var(--y); box-shadow: 0 0 0 3px rgba(245,225,0,0.1), var(--glow-y); }
    .qorder-phone-wrap input::placeholder { font-size: 15px; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,0.2); }

    .qorder-callback-info {
      background: rgba(141,198,63,0.06);
      border: 1px solid rgba(141,198,63,0.18);
      border-radius: var(--r-md);
      padding: 10px 14px;
      font-size: 12px;
      color: rgba(141,198,63,0.8);
      text-align: center;
      margin-bottom: 18px;
    }

    .qorder-actions { display: flex; gap: 10px; }
    .qorder-actions .btn-back { flex-shrink: 0; }
    .qorder-actions .btn-submit {
      flex: 1; padding: 13px;
      background: var(--y); color: #111;
      font-size: 15px; font-weight: 800;
      border: none; border-radius: var(--r-md);
      cursor: pointer; transition: all var(--t);
    }

    .qorder-actions .btn-submit:hover { background: var(--yd); transform: translateY(-1px); box-shadow: var(--glow-y); }

    /* ── SUCCESS ── */
    .success-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.9);
      backdrop-filter: blur(12px);
      z-index: 500;
      display: none; align-items: center; justify-content: center;
    }

    .success-overlay.open { display: flex; }

    .success-box {
      background: rgba(10,20,12,0.98);
      border: 1px solid var(--brd2);
      border-radius: var(--r-lg);
      padding: 52px 44px;
      text-align: center;
      max-width: 420px; width: 100%;
      box-shadow: var(--glow), 0 40px 80px rgba(0,0,0,0.7);
      animation: fadeUp .4s ease;
    }

    .s-icon { font-size: 60px; margin-bottom: 14px; filter: drop-shadow(0 0 20px rgba(141,198,63,0.5)); }
    .success-type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; margin-bottom: 14px; }
    .stb-quick { background: rgba(245,225,0,0.1); color: var(--y); border: 1px solid rgba(245,225,0,0.25); }
    .stb-full  { background: rgba(141,198,63,0.1); color: var(--g); border: 1px solid var(--brd2); }

    .success-box h3 { font-size: 26px; font-weight: 900; color: var(--txt); margin-bottom: 10px; }
    .success-box p { font-size: 14px; color: var(--muted); margin-bottom: 6px; }

    .success-order-id {
      font-size: 22px; font-weight: 900;
      background: linear-gradient(90deg, var(--g), var(--y));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 14px 0;
    }

    .btn-ok {
      margin-top: 24px;
      padding: 13px 36px;
      background: var(--g); color: #111;
      font-size: 15px; font-weight: 800;
      border: none; border-radius: var(--r-md);
      cursor: pointer; transition: all var(--t);
    }

    .btn-ok:hover { background: var(--gd); color: #fff; box-shadow: var(--glow); }

    /* ── TOAST ── */
    .toast {
      position: fixed; bottom: 24px; right: 24px;
      background: rgba(10,20,12,0.95);
      backdrop-filter: blur(20px);
      color: var(--txt);
      border: 1px solid var(--brd2);
      padding: 14px 20px;
      border-radius: var(--r-md);
      font-size: 14px; font-weight: 600;
      box-shadow: var(--glow), 0 8px 32px rgba(0,0,0,0.4);
      transform: translateY(80px);
      opacity: 0;
      transition: all var(--t-slow) cubic-bezier(.34,1.56,.64,1);
      z-index: 999;
    }

    .toast.show { transform: translateY(0); opacity: 1; }

    /* ── SCROLL REVEAL ── */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ── RESPONSIVE ── */
    @media(max-width:768px) {
      nav { display: none; }
      .mobile-nav-toggle { display: flex; }
      .hero { padding: 80px 20px 60px; }
      .promo-banner { padding: 32px 24px; flex-direction: column; }
      .co-row { grid-template-columns: 1fr; }
      .newsletter-box { padding: 36px 24px; }
    }
  
/* ── карта магазину ── */
.map-box{position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;
  border:1px solid var(--brd);background:var(--sur);display:flex;flex-direction:column}
.map-box iframe{width:100%;flex:1;min-height:300px;border:0;display:block;
  filter:invert(.92) hue-rotate(170deg) saturate(.55) brightness(.95)}
/* поки карта не завантажилась (або немає інтернету) — показуємо адресу */
.map-fallback{position:absolute;inset:0;bottom:56px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;
  background:radial-gradient(400px 220px at 50% 45%, rgba(141,198,63,.12), transparent 70%);
  z-index:1;transition:opacity var(--t)}
.map-fallback.gone{opacity:0;pointer-events:none}
.map-fallback .map-pin{font-size:40px}
.map-fallback b{font-size:16px}
.map-fallback span{font-size:13px;color:var(--muted)}
.map-label{padding:14px 16px;background:rgba(7,16,10,.92);border-top:1px solid var(--brd);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.map-label b{font-size:15px;color:var(--txt)}
.map-label span{font-size:13px;color:var(--muted)}
.map-route{margin-left:auto;padding:9px 16px;border-radius:var(--r-pill);text-decoration:none;
  background:linear-gradient(135deg,var(--g),var(--gd));color:#08150a;
  font-weight:800;font-size:13px;white-space:nowrap;transition:var(--t-fast)}
.map-route:hover{filter:brightness(1.1);transform:translateY(-1px)}
@media(max-width:768px){
  .map-box{min-height:280px}
  .map-label{gap:8px}
  .map-route{margin-left:0;width:100%;text-align:center}
}

/* ── міні-карта: компактний варіант для футера й оформлення ── */
.mini-map{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--brd);
  background:var(--sur);margin-top:14px}
.mini-map iframe{width:100%;height:130px;border:0;display:block;
  filter:invert(.92) hue-rotate(170deg) saturate(.55) brightness(.95)}
.mini-map .mm-fallback{position:absolute;inset:0;bottom:34px;display:flex;align-items:center;
  justify-content:center;gap:8px;font-size:13px;color:var(--muted);text-align:center;
  padding:10px;background:var(--sur);transition:opacity var(--t)}
.mini-map .mm-fallback.gone{opacity:0;pointer-events:none}
.mini-map .mm-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:rgba(7,16,10,.92);border-top:1px solid var(--brd);font-size:12px;color:var(--muted)}
.mini-map .mm-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-map .mm-bar a{margin-left:auto;flex:none;color:var(--g);font-weight:700;text-decoration:none;
  padding-left:0}
.mini-map .mm-bar a:hover{filter:brightness(1.15)}
.co-map{margin:4px 0 14px}
.co-map iframe{height:150px}
@media(max-width:560px){ .mini-map iframe{height:120px} }

/* ══ ДОСТУПНІСТЬ ══ */

/* Текст лише для скрін-рідерів */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip-link: перший у Tab-порядку, видимий лише у фокусі */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;
  background:var(--y);color:#07100a;font-weight:800;border-radius:0 0 10px 0;
  text-decoration:none}
.skip-link:focus{left:0}

/* Видимий фокус. Раніше на інпутах стояв outline:none, і форму оформлення
   доводилось проходити наосліп. Жовтий на темному дає 14.4:1. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--y);outline-offset:2px;border-radius:4px}
:where(a,button,input,select,textarea,[tabindex]):focus:not(:focus-visible){outline:none}
.co-field input:focus-visible,.co-field select:focus-visible,
.co-field textarea:focus-visible,.email-input:focus-visible{
  outline:3px solid var(--y);outline-offset:1px}

/* Заголовок групи полів — там, де раніше стояв <label> без поля */
.co-label{display:block;font-size:13px;font-weight:700;color:var(--txt);margin-bottom:8px}

/* Закрита панель кошика не має ловити фокус */
.cart-panel{visibility:hidden;transition:transform var(--t-slow) cubic-bezier(.4,0,.2,1),
  visibility .35s}
.cart-panel.open{visibility:visible}

/* Якір не має ховатись під липкою шапкою */
html{scroll-padding-top:84px}

/* WCAG 2.5.8: мінімальна ціль 24×24, для основних дій — 44×44 */
.footer-col a,.footer-bottom a{display:inline-block;min-height:24px;padding-block:5px}
.info-content a{display:inline-block;font-size:15px;min-height:24px;padding-block:6px}
.map-route,.mini-map .mm-bar a{min-height:24px;display:inline-flex;align-items:center}
.add-btn{min-height:44px}
.filter-chip{min-height:40px}
.social-btn{width:44px;height:44px}
.mobile-nav-toggle{min-width:44px;min-height:44px}

/* WCAG 2.2.2 + вестибулярні розлади: якщо система просить менше руху —
   вимикаємо все, включно з нескінченною біжучою стрічкою. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
  .bg-scene,.hero-ring,.hero-ring2{display:none}
  .ticker-track{animation:none!important;transform:none!important}
}

/* Кнопка паузи для біжучої стрічки — сама вимога 2.2.2 рівня A */
.ticker-pause{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5;
  background:rgba(7,16,10,.86);border:1px solid var(--brd);color:var(--txt);
  border-radius:var(--r-pill);padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer;
  min-height:24px}
.ticker-pause:hover{border-color:var(--g);color:var(--g)}

/* Без JS reveal-блоки лишались невидимими назавжди — це вся адреса,
   години й телефон. Для краулерів соцмереж показуємо все одразу. */
.no-js .reveal{opacity:1;transform:none}

/* WCAG 1.4.10: на 320px декоративні кільця виштовхували сторінку вбік */
html{overflow-x:clip}
.hero-ring2{max-width:100vw}
@media (max-width:360px){ .bg-scene,.hero-ring,.hero-ring2{display:none} }

/* ── посилання на статус замовлення ── */
.btn-status{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-btn);
  padding:12px 22px;margin:14px 0 4px;border-radius:var(--r-md);border:1px solid var(--brd2);
  background:var(--sur);color:var(--g);font-weight:800;font-size:14px;text-decoration:none;
  transition:var(--t)}
.btn-status:hover{background:var(--sur2);border-color:var(--g)}

/* ── картка як посилання на сторінку товару ── */
.product-link{display:block;text-decoration:none;color:inherit}
.product-link:hover .product-name{color:var(--g)}
.product-buy{padding-top:0}
.photo-count{position:absolute;bottom:10px;right:10px;padding:3px 9px;
  border-radius:var(--r-pill);background:rgba(7,16,10,.82);border:1px solid var(--brd);
  font-size:11.5px;font-weight:700;color:var(--txt)}

/* ── «показати ще» ── */
.more-wrap{text-align:center;margin-top:28px}
.btn-more{min-height:var(--h-btn);padding:13px 30px;border-radius:var(--r-md);
  border:1px solid var(--brd2);background:var(--sur);color:var(--txt);
  font-weight:800;font-size:15px;cursor:pointer;transition:var(--t)}
.btn-more:hover{background:var(--sur2);border-color:var(--g);color:var(--g)}

/* ── відгуки ── */
.rating-summary{display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  padding:8px 18px;border-radius:var(--r-pill);background:var(--sur);border:1px solid var(--brd)}
.rs-num{font-size:24px;font-weight:900;color:var(--y);line-height:1}
.rs-stars{color:var(--y);font-size:15px;letter-spacing:2px}
.rs-count{font-size:13px;color:var(--muted)}
.reviews-empty{text-align:center;padding:44px 20px;color:var(--muted)}
.reviews-empty .e-icon{font-size:42px;opacity:.6;margin-bottom:12px}
.review-cta{text-align:center;margin-top:28px}
.btn-review{min-height:var(--h-btn);padding:13px 28px;border-radius:var(--r-md);
  border:1px solid var(--brd2);background:var(--sur);color:var(--txt);
  font-weight:800;font-size:15px;cursor:pointer;transition:var(--t)}
.btn-review:hover{background:var(--sur2);border-color:var(--g);color:var(--g)}
.stars{display:flex;gap:4px}
.star{width:44px;height:44px;border:none;background:none;cursor:pointer;
  font-size:28px;line-height:1;color:rgba(220,240,210,.25);transition:var(--t-fast);padding:0}
.star.on{color:var(--y)}
.star:hover{transform:scale(1.12)}
.rev-order{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--r-pill);
  background:rgba(141,198,63,.14);color:var(--g);font-size:11px;font-weight:800}

/* ── нагадування про останнє замовлення ── */
.last-order{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-radius:var(--r-md);
  background:rgba(12,26,15,.97);border:1px solid var(--brd2);
  box-shadow:0 12px 40px rgba(0,0,0,.5);font-size:14px}
.last-order b{color:var(--txt)}
.last-order span{color:var(--muted)}
.last-order a{margin-left:auto;color:var(--g);font-weight:800;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.last-order button{flex:none;width:32px;height:32px;border-radius:50%;border:none;
  background:var(--sur);color:var(--muted);cursor:pointer;font-size:14px}
.last-order button:hover{color:var(--txt)}
@media(min-width:720px){ .last-order{left:auto;right:20px;bottom:20px;max-width:420px} }

/* ── каркас завантаження ── */
.sk-card{border-radius:var(--r-lg);border:1px solid var(--brd);background:var(--sur);
  min-height:340px;position:relative;overflow:hidden}
.sk-card::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(141,198,63,.07),transparent);
  transform:translateX(-100%);animation:sk 1.3s infinite}
@keyframes sk{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ .sk-card::after{animation:none} }

/* ── пошук у каталозі ── */
.search-bar{position:relative;max-width:560px;margin:0 auto 20px}
.search-bar input{width:100%;padding:14px 46px 14px 18px;border-radius:var(--r-md);
  background:var(--sur);border:1px solid var(--brd);color:var(--txt);font-size:15px;
  outline:none;transition:var(--t-fast);min-height:48px}
.search-bar input::placeholder{color:var(--muted)}
.search-bar input:focus{border-color:var(--brd2);background:var(--sur2)}
.search-bar input::-webkit-search-cancel-button{display:none}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:none;border-radius:50%;background:var(--sur2);
  color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.search-clear:hover{color:var(--txt)}
.results-line{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:14px;
  min-height:1.2em}
.empty-state{grid-column:1/-1;text-align:center;color:var(--muted);padding:56px 20px}
.empty-state .e-icon{font-size:44px;opacity:.6;margin-bottom:12px}
.empty-state p{margin-bottom:16px;font-size:15px}
.empty-state .btn-add{display:inline-block;min-height:44px;padding:12px 22px}

/* ── динамічні блоки оформлення ── */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.method-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mtab{padding:13px 10px;border-radius:var(--r-md);cursor:pointer;font-size:14px;font-weight:700;
  background:var(--sur);border:1px solid var(--brd);color:var(--muted);transition:var(--t-fast)}
.mtab:hover{border-color:var(--brd2)}
.mtab.active{background:linear-gradient(135deg,var(--g),var(--gd));border-color:transparent;color:#08150a}
.day-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.day-chip{flex:none;min-width:88px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;text-align:center;
  background:var(--sur);border:1px solid var(--brd);transition:var(--t-fast)}
.day-chip b{display:block;font-size:13px}
.day-chip span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.day-chip.active{background:var(--gl);border-color:var(--brd2)}
.day-chip.active b{color:var(--g)}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-top:12px}
.slot-btn{padding:10px 4px;border-radius:var(--r-md);cursor:pointer;text-align:center;font-size:13.5px;font-weight:700;
  background:var(--sur);border:1px solid var(--brd);transition:.16s;color:var(--txt)}
.slot-btn.active{background:linear-gradient(135deg,var(--g),var(--gd));border-color:transparent;color:#08150a}
.co-note{font-size:12.5px;color:var(--muted);line-height:1.5;padding:11px 13px;border-radius:var(--r-md);
  background:var(--sur);border:1px solid var(--brd);margin-bottom:14px}
.product-img img{width:100%;height:100%;object-fit:cover;display:block}
.product-stock{font-size:12px;color:var(--muted);margin:6px 0 2px}
.product-stock.low{color:#f0a23c;font-weight:600}
.tg-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--gl);border:1px solid var(--brd2);color:var(--g);font-weight:700;font-size:13.5px;
  text-decoration:none;transition:var(--t-fast)}
.tg-cta:hover{background:var(--gb)}


/* ══════════════════════════════════════════════════════════════
   АДАПТАЦІЯ ПІД УСІ ЕКРАНИ
   Порядок: планшет → телефон → вузький телефон.
   Ці правила йдуть останніми, тож перекривають попередні.
   ══════════════════════════════════════════════════════════════ */
img{max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%}
.hero h1{font-size:clamp(34px,7vw,68px);line-height:1.08}
.hero p{font-size:clamp(14px,1.8vw,18px)}

/* ── планшет і невеликий ноутбук ── */
@media (max-width:1024px){
  section{padding:64px 20px}
  .header-inner{padding:0 16px;gap:14px}
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
  .categories-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
  .features-grid,.reviews-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .section-header{margin-bottom:38px}
}

/* ── телефон і вузький планшет ── */
@media (max-width:768px){
  section{padding:52px 16px}
  .header-inner{height:60px;padding:0 14px;gap:10px}
  .logo img{height:38px}

  /* робоче випадне меню замість непрацюючої кнопки ☰ */
  nav{
    display:flex;position:absolute;top:60px;left:0;right:0;
    flex-direction:column;gap:0;padding:6px 14px 14px;
    background:#0a160d;
    border-bottom:1px solid var(--brd2);
    transform:translateY(-130%);opacity:0;pointer-events:none;
    transition:transform var(--t) cubic-bezier(.4,0,.2,1),opacity var(--t);
    box-shadow:0 18px 40px rgba(0,0,0,.5);
  }
  body.nav-open nav{transform:translateY(0);opacity:1;pointer-events:auto}
  nav a{padding:14px 10px;font-size:15.5px;color:var(--txt);border-bottom:1px solid var(--brd);border-radius:0}
  nav a:last-child{border-bottom:none}
  .mobile-nav-toggle{display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:var(--r-md);background:var(--sur);border:1px solid var(--brd)}
  body.nav-open .mobile-nav-toggle{background:var(--gl);border-color:var(--brd2);color:var(--g)}

  /* телефонна кнопка лишається, але тільки іконкою */
  .btn-phone{padding:9px 12px;font-size:0;gap:0}
  .btn-phone::after{content:"📞";font-size:17px}

  .hero{min-height:auto;padding:70px 18px 52px}
  .hero-actions{flex-direction:column;width:100%;max-width:320px;margin-inline:auto}
  .hero-actions a{width:100%;text-align:center;justify-content:center}
  .hero-stats{gap:10px}
  .stat-card{flex:1 1 calc(50% - 10px);min-width:0;padding:14px 10px}
  .stat-num{font-size:22px}

  .categories-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .features-grid,.reviews-grid{grid-template-columns:1fr;gap:14px}

  .product-info{padding:12px}
  .product-name{font-size:13.5px;line-height:1.35}
  .product-brand{font-size:10.5px}
  .price{font-size:17px}
  .price-old{font-size:12px}
  .add-btn{padding:9px 10px;font-size:12.5px;width:100%}
  .product-footer{flex-direction:column;align-items:stretch;gap:8px}

  /* кошик на весь екран */
  .cart-panel{width:100%;max-width:100%}

  /* модалки: на всю ширину, з місцем під клавіатуру */
  .checkout-box,.qorder-box{
    max-width:100%;padding:22px 16px 24px;border-radius:18px;max-height:94vh;
  }
  .co-row{grid-template-columns:1fr}
  .co-actions{flex-direction:column-reverse;gap:10px}
  .co-actions button{width:100%}
  .qorder-actions{flex-direction:column-reverse;gap:10px}
  .qorder-actions button{width:100%}
  .slot-grid{grid-template-columns:repeat(4,1fr);gap:7px}
  .slot-btn{padding:11px 2px;font-size:13px}
  .day-chip{min-width:78px}

  .promo-banner{text-align:center}
  .newsletter-box{padding:30px 18px}
  .toast{left:14px;right:14px;bottom:14px;text-align:center}
}

/* ── вузькі телефони ── */
@media (max-width:420px){
  section{padding:44px 13px}
  .section-header h2{font-size:26px}
  .hero{padding:62px 14px 46px}
  .products-grid,.categories-grid{gap:9px}
  .product-img{height:130px}
  .product-name{font-size:12.5px}
  .add-btn{font-size:12px;padding:8px}
  .cat-name{font-size:13px}
  .cat-count{font-size:11px}
  .slot-grid{grid-template-columns:repeat(3,1fr)}
  .checkout-box,.qorder-box{padding:18px 13px 20px}
  .stat-card{padding:12px 8px}
  .stat-num{font-size:20px}
}

/* ── планшет у портреті: три колонки замість двох ── */
@media (min-width:601px) and (max-width:768px){
  .products-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .categories-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .features-grid,.reviews-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .stat-card{flex:1 1 calc(25% - 10px)}
  .checkout-box,.qorder-box{max-width:520px}
  .cart-panel{width:420px}
}

/* ── горизонтальна орієнтація телефона ── */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:56px 20px 40px}
  .checkout-box,.qorder-box{max-height:96vh}
}