/* ============================================================
   AUTOFAST / STEELRAY — кастомный CSS (stlray.ru)
   Дочерняя тема Blocksy. Дизайн-токены + компоненты прототипа
   + переопределения WooCommerce. Все переменные в неймспейсе --af-*
   ============================================================ */

/* --- 1. ДИЗАЙН-ТОКЕНЫ ------------------------------------- */
:root{
  --af-bg:#f5f7fa; --af-surface:#fff; --af-border:#e8ecf2; --af-border2:#dce1ea;
  --af-accent:#0b62e6; --af-accent-d:#084db8; --af-accent-l:#eaf2ff; --af-accent2:#ff5a1f;
  --af-ink:#0f1419; --af-text:#424b5a; --af-muted:#8089a0; --af-green:#18a957;
  --af-font-h:'Barlow Condensed',sans-serif; --af-font-b:'Inter',sans-serif;
  --af-shadow-sm:0 1px 3px rgba(15,20,25,.06),0 1px 2px rgba(15,20,25,.04);
  --af-shadow-md:0 4px 16px rgba(15,20,25,.08);
  --af-shadow-lg:0 12px 32px rgba(15,20,25,.12);
  --af-r:14px;
}

/* --- 2. ОБЁРТКА ГЛАВНОЙ (front-page.php) ------------------ */
.af-home{width:100%;}
.af-home .wrap{max-width:1280px;margin:0 auto;padding-left:16px;padding-right:16px;}
.af-home .btn-primary{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--af-accent);font-family:var(--af-font-h);font-weight:700;font-size:16px;letter-spacing:.02em;text-transform:uppercase;padding:14px 26px;border-radius:12px;border:none;cursor:pointer;transition:transform .15s,box-shadow .2s;width:fit-content;}
.af-home .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.22);}
.af-home .btn-primary.btn-accent{background:var(--af-accent2);color:#fff;}

/* --- 3. КОМПОНЕНТЫ ПРОТОТИПА (hero, trust, продукты, промо, footer, bottom-nav) --- */
  /* SVG icons inherit color via currentColor + sizing.
     viewBox="0 0 24 24" on each svg makes the 24-unit paths scale to the box. */
  svg.ic, svg.ic-sm, svg.ic-lg, svg.ph { display:block; overflow:visible; }
  svg.ic { width:20px; height:20px; flex-shrink:0; }
  svg.ic-sm { width:16px; height:16px; flex-shrink:0; }
  svg.ic-lg { width:24px; height:24px; flex-shrink:0; }
  svg.ph { width:54px; height:54px; }

  /* ANNOUNCE */
  .announce { background:linear-gradient(90deg,var(--af-accent),var(--af-accent-d)); color:#fff; text-align:center; padding:8px 14px; font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; }
  .announce-inner { display:inline-flex; align-items:center; gap:8px; }

  /* HEADER */
  header { background:var(--af-surface); border-bottom:1px solid var(--af-border); position:sticky; top:0; z-index:200; }
  .header-top { display:flex; align-items:center; gap:14px; padding-top:12px; padding-bottom:12px; }
  .burger { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--af-ink); }
  .logo { font-family:var(--af-font-h); font-weight:800; font-size:28px; letter-spacing:-.01em; color:var(--af-ink); white-space:nowrap; line-height:1; }
  .logo span { color:var(--af-accent); }
  .search-bar { flex:1; min-width:0; display:flex; align-items:center; border:1.5px solid var(--af-border2); border-radius:12px; background:var(--af-bg); transition:border-color .2s,box-shadow .2s,background .2s; overflow:hidden; }
  .search-bar:focus-within { border-color:var(--af-accent); background:var(--af-surface); box-shadow:0 0 0 3px rgba(11,98,230,.1); }
  .search-bar .s-icon { padding-left:13px; color:var(--af-muted); display:flex; flex-shrink:0; }
  .search-bar input { flex:1; min-width:0; background:none; border:none; outline:none; color:var(--af-ink); padding:11px 12px; font-family:var(--af-font-b); font-size:14px; width:100%; }
  .search-bar input::placeholder { color:var(--af-muted); }
  .search-bar .s-btn { background:var(--af-accent); border:none; color:#fff; font-family:var(--af-font-h); font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase; padding:0 18px; align-self:stretch; cursor:pointer; transition:background .2s; flex-shrink:0; }
  .search-bar .s-btn:hover { background:var(--af-accent-d); }
  .header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .action-btn { width:42px; height:42px; border-radius:11px; background:var(--af-bg); display:flex; align-items:center; justify-content:center; position:relative; transition:background .2s,color .2s; cursor:pointer; color:var(--af-text); }
  .action-btn:hover { background:var(--af-accent-l); color:var(--af-accent); }
  .action-btn .count { position:absolute; top:-4px; right:-4px; background:var(--af-accent2); color:#fff; font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--af-surface); }

  /* NAV */
  nav { background:var(--af-surface); border-bottom:1px solid var(--af-border); position:relative; }
  .nav-inner { display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; gap:2px; }
  .nav-inner::-webkit-scrollbar { display:none; }
  .nav-item { display:flex; align-items:center; gap:7px; padding:13px 14px; font-family:var(--af-font-h); font-weight:600; font-size:14.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--af-text); white-space:nowrap; border-bottom:3px solid transparent; transition:color .2s,border-color .2s; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; }
  .nav-item .chev { transition:transform .25s; }
  .nav-item:hover,.nav-item.active,.nav-item.mega-active { color:var(--af-accent); border-bottom-color:var(--af-accent); }
  /* 3-item nav: distribute, no horizontal scroll */
  .nav-inner.nav-3 { gap:0; overflow:visible; }
  .nav-inner.nav-3 .nav-item { padding:14px 22px; }

  /* MEGA MENU */
  .mega { position:absolute; left:0; right:0; top:100%; background:var(--af-surface); border-bottom:1px solid var(--af-border); box-shadow:0 18px 40px rgba(15,20,25,.12); z-index:150; display:none; }
  .mega.open { display:block; animation:megaIn .22s ease; }
  @keyframes megaIn { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
  .mega-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px 28px; padding:26px 0 30px; }
  .mega-grid-dense { padding:22px 0 26px; }
  .mega-grid-dense .mega-col ul li a { padding:7px 8px; }
  .mega-col h6 { font-family:var(--af-font-h); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.03em; color:var(--af-ink); margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid var(--af-accent-l); display:flex; align-items:center; gap:8px; }
  .mega-col h6 svg { width:17px; height:17px; color:var(--af-accent); }
  .mega-col ul { list-style:none; display:flex; flex-direction:column; gap:2px; }
  .mega-col ul li a { display:block; padding:6px 8px; border-radius:7px; font-size:13.5px; color:var(--af-text); transition:background .15s,color .15s; }
  .mega-col ul li a:hover { background:var(--af-accent-l); color:var(--af-accent); }
  .mega-col ul li a .cnt { color:var(--af-muted); font-size:12px; margin-left:4px; }
  .mega-footer { border-top:1px solid var(--af-border); padding:14px 0; display:flex; align-items:center; justify-content:space-between; }
  .mega-footer a { font-family:var(--af-font-h); font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--af-accent); display:inline-flex; align-items:center; gap:6px; font-size:14px; }
  .mega-footer a svg { width:16px; height:16px; }
  .mega-overlay { position:fixed; inset:0; background:rgba(15,20,25,.25); z-index:140; display:none; }
  .mega-overlay.open { display:block; }

  /* HERO */
  .hero { padding-top:18px; display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
  .hero-main { background:linear-gradient(135deg,#0b62e6 0%,#0a4fc0 55%,#073a91 100%); border-radius:var(--af-r); padding:40px 36px; position:relative; overflow:hidden; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
  .hero-main::before { content:''; position:absolute; top:-100px; right:-100px; width:340px; height:340px; background:radial-gradient(circle,rgba(255,255,255,.14) 0%,transparent 70%); }
  .hero-deco { position:absolute; bottom:-50px; right:-20px; opacity:.07; color:#fff; pointer-events:none; }
  .hero-deco svg { width:260px; height:260px; }
  .hero-badge { display:inline-flex; align-items:center; gap:6px; background:var(--af-accent2); color:#fff; font-family:var(--af-font-h); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:20px; margin-bottom:16px; width:fit-content; position:relative; z-index:1; }
  .hero-main h1 { font-family:var(--af-font-h); font-weight:800; font-size:clamp(34px,6vw,52px); line-height:.98; margin-bottom:14px; position:relative; z-index:1; }
  .hero-main h1 em { color:#ffd43b; font-style:normal; }
  .hero-main p { color:rgba(255,255,255,.88); font-size:14.5px; max-width:400px; margin-bottom:24px; position:relative; z-index:1; }
  .btn-primary { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--af-accent); font-family:var(--af-font-h); font-weight:700; font-size:16px; letter-spacing:.02em; text-transform:uppercase; padding:14px 26px; border-radius:12px; border:none; cursor:pointer; transition:transform .15s,box-shadow .2s; width:fit-content; position:relative; z-index:1; }
  .btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.22); }
  .btn-accent { background:var(--af-accent2); color:#fff; }
  .hero-side { display:flex; flex-direction:column; gap:14px; }
  .hero-card { flex:1; background:var(--af-surface); border:1px solid var(--af-border); border-radius:var(--af-r); padding:24px 26px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:150px; cursor:pointer; transition:border-color .2s,transform .2s,box-shadow .2s; box-shadow:var(--af-shadow-sm); }
  .hero-card:hover { border-color:var(--af-accent); transform:translateY(-3px); box-shadow:var(--af-shadow-md); }
  .hero-card-icon { position:absolute; top:18px; right:18px; width:48px; height:48px; border-radius:12px; background:var(--af-accent-l); display:flex; align-items:center; justify-content:center; color:var(--af-accent); }
  .hero-card h3 { font-family:var(--af-font-h); font-weight:700; font-size:22px; color:var(--af-ink); margin-bottom:5px; }
  .hero-card p { color:var(--af-muted); font-size:13px; max-width:78%; }
  .hero-card .arrow { position:absolute; bottom:20px; right:20px; width:34px; height:34px; background:var(--af-bg); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--af-accent); transition:background .2s,color .2s; }
  .hero-card:hover .arrow { background:var(--af-accent); color:#fff; }

  /* TRUST */
  .trust-bar { margin-top:14px; }
  .trust-inner { background:var(--af-surface); border:1px solid var(--af-border); border-radius:var(--af-r); display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; box-shadow:var(--af-shadow-sm); }
  .trust-inner.trust-3 { grid-template-columns:repeat(3,1fr); }
  .trust-item { display:flex; align-items:center; gap:12px; padding:18px 20px; border-right:1px solid var(--af-border); }
  .trust-item:last-child { border-right:none; }
  .trust-icon { width:44px; height:44px; border-radius:12px; background:var(--af-accent-l); display:flex; align-items:center; justify-content:center; color:var(--af-accent); flex-shrink:0; }
  .trust-item h4 { font-family:var(--af-font-h); font-weight:700; font-size:15px; color:var(--af-ink); line-height:1.1; }
  .trust-item p { font-size:11.5px; color:var(--af-muted); line-height:1.3; }

  /* VIDEO BANNER — bright eye-catching YouTube strip */
  .video-banner {
    margin-top:14px; display:flex; align-items:center; gap:22px;
    border-radius:var(--af-r); padding:22px 28px; position:relative; overflow:hidden;
    color:#fff; text-decoration:none;
    background:linear-gradient(120deg,#ff2030 0%,#e30613 50%,#b3000a 100%);
    box-shadow:0 10px 30px rgba(227,6,19,.32);
    transition:transform .2s, box-shadow .2s;
  }
  .video-banner:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(227,6,19,.45); }
  .video-banner::before { content:''; position:absolute; top:-90px; right:8%; width:260px; height:260px; background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 70%); pointer-events:none; }
  .video-banner::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 14px,transparent 14px 28px); pointer-events:none; }
  .vb-play {
    width:64px; height:64px; border-radius:50%; flex-shrink:0;
    background:rgba(255,255,255,.18); border:2.5px solid rgba(255,255,255,.6);
    display:flex; align-items:center; justify-content:center; color:#fff;
    position:relative; z-index:1; animation:vbpulse 2s infinite;
  }
  .vb-play svg { width:28px; height:28px; margin-left:4px; }
  @keyframes vbpulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.5);} 70%{box-shadow:0 0 0 16px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }
  .vb-text { flex:1; position:relative; z-index:1; }
  .vb-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(0,0,0,.22); color:#fff; font-family:var(--af-font-h); font-weight:700; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:20px; margin-bottom:9px; }
  .vb-badge svg { width:17px; height:17px; }
  .vb-text h3 { font-family:var(--af-font-h); font-weight:800; font-size:clamp(22px,3.5vw,30px); line-height:1; margin-bottom:6px; }
  .vb-text p { font-size:13.5px; color:rgba(255,255,255,.92); max-width:560px; }
  .vb-cta { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; background:#fff; color:#e30613; font-family:var(--af-font-h); font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:.03em; padding:13px 24px; border-radius:11px; position:relative; z-index:1; transition:transform .15s; }
  .vb-cta svg { width:17px; height:17px; transition:transform .2s; }
  .video-banner:hover .vb-cta svg { transform:translateX(4px); }

  /* SECTION */
  .section { margin-top:44px; }
  .section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .section-title { font-family:var(--af-font-h); font-weight:800; font-size:clamp(24px,5vw,32px); color:var(--af-ink); line-height:1; }
  .section-title span { color:var(--af-accent); }
  .view-all { font-family:var(--af-font-h); font-weight:600; font-size:14px; letter-spacing:.03em; text-transform:uppercase; color:var(--af-accent); display:flex; align-items:center; gap:5px; transition:gap .2s; white-space:nowrap; }
  .view-all:hover { gap:9px; }

  /* BRANDS */
  .brand-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
  .brand-card { background:var(--af-surface); border:1px solid var(--af-border); border-radius:12px; padding:16px 10px; text-align:center; cursor:pointer; transition:border-color .2s,transform .15s,box-shadow .2s; display:flex; flex-direction:column; align-items:center; gap:9px; }
  .brand-card:hover { border-color:var(--af-accent); transform:translateY(-3px); box-shadow:var(--af-shadow-md); }
  .brand-logo { width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:#6b7384; transition:color .2s; }
  .brand-logo svg { width:42px; height:42px; }
  .brand-card:hover .brand-logo { color:var(--af-ink); }
  .brand-card span { font-size:12.5px; color:var(--af-text); font-weight:500; }
  .brand-card:hover span { color:var(--af-accent); }

  /* PRODUCTS */
  .product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .product-card { background:var(--af-surface); border:1px solid var(--af-border); border-radius:var(--af-r); overflow:hidden; transition:border-color .2s,transform .2s,box-shadow .2s; position:relative; display:flex; flex-direction:column; }
  .product-card:hover { border-color:var(--af-accent); transform:translateY(-4px); box-shadow:var(--af-shadow-lg); }
  .product-img { width:100%; aspect-ratio:3/4; background:var(--af-bg); display:flex; align-items:center; justify-content:center; position:relative; color:#c4cbd8; overflow:hidden; }
  .product-img img { width:100%; height:100%; object-fit:contain; }
  .product-img .ph { width:54px; height:54px; }
  .product-badge { position:absolute; top:9px; left:9px; background:var(--af-accent2); color:#fff; font-family:var(--af-font-h); font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.03em; text-transform:uppercase; }
  .product-badge.green { background:var(--af-green); }
  .fav-btn { position:absolute; top:8px; right:8px; width:32px; height:32px; background:rgba(255,255,255,.92); border:1px solid var(--af-border); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s,background .2s,color .2s; color:var(--af-muted); }
  .fav-btn:hover { transform:scale(1.1); background:#fff; color:var(--af-accent2); }
  .product-body { padding:14px; display:flex; flex-direction:column; flex:1; }
  .product-brand { font-family:var(--af-font-h); font-size:11.5px; font-weight:700; color:var(--af-accent); letter-spacing:.07em; text-transform:uppercase; margin-bottom:4px; }
  .product-name { font-size:13px; color:var(--af-ink); font-weight:500; line-height:1.4; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px; }
  .product-stock { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--af-green); font-weight:600; margin-bottom:12px; }
  .product-prices-row { display:flex; align-items:flex-end; gap:8px; margin-bottom:10px; }
  .product-price { font-family:var(--af-font-h); font-size:23px; font-weight:800; color:var(--af-ink); line-height:1; }
  .product-price-old { font-size:12.5px; color:var(--af-muted); text-decoration:line-through; }
  .product-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }

  /* Quantity stepper -0+ */
  .qty { display:flex; align-items:center; border:1.5px solid var(--af-border2); border-radius:10px; overflow:hidden; background:var(--af-surface); flex:1; max-width:118px; }
  .qty button { width:34px; height:38px; border:none; background:var(--af-bg); color:var(--af-ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s; flex-shrink:0; }
  .qty button:hover { background:var(--af-accent-l); color:var(--af-accent); }
  .qty button:active { transform:scale(.92); }
  .qty button svg { width:14px; height:14px; }
  .qty input { width:100%; min-width:0; border:none; outline:none; text-align:center; font-family:var(--af-font-h); font-weight:700; font-size:16px; color:var(--af-ink); background:none; -moz-appearance:textfield; }
  .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

  /* Cart icon button (red) */
  .btn-cart { width:42px; height:42px; flex-shrink:0; background:var(--af-accent2); border:none; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s,transform .15s,box-shadow .2s; }
  .btn-cart svg { width:20px; height:20px; }
  .btn-cart:hover { background:#d24a06; transform:scale(1.06); box-shadow:0 6px 16px rgba(255,90,31,.35); }
  .btn-cart:active { transform:scale(.96); }

  /* CATEGORIES */
  .cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .cat-card { background:var(--af-surface); border:1px solid var(--af-border); border-radius:var(--af-r); padding:18px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:border-color .2s,transform .15s,box-shadow .2s; }
  .cat-card:hover { border-color:var(--af-accent); transform:translateX(3px); box-shadow:var(--af-shadow-md); }
  .cat-icon { width:50px; height:50px; border-radius:12px; background:var(--af-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--af-border); transition:background .2s,border-color .2s; color:var(--af-accent); }
  .cat-card:hover .cat-icon { background:var(--af-accent-l); border-color:#b9d4ff; }
  .cat-info h4 { font-family:var(--af-font-h); font-weight:700; font-size:16px; color:var(--af-ink); margin-bottom:1px; }
  .cat-info span { font-size:12px; color:var(--af-muted); }

  /* PROMO */
  .promo-section { margin-top:44px; }
  .promo-banner { background:linear-gradient(115deg,#fff4ec 0%,#ffe3d1 100%); border:1px solid #ffd2b8; border-radius:var(--af-r); padding:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; overflow:hidden; }
  .promo-deco { position:absolute; right:24px; top:50%; transform:translateY(-50%); color:var(--af-accent2); opacity:.09; pointer-events:none; }
  .promo-deco svg { width:170px; height:170px; }
  .promo-text { position:relative; z-index:1; }
  .promo-text .badge { display:inline-flex; align-items:center; gap:6px; background:var(--af-accent2); color:#fff; font-family:var(--af-font-h); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:20px; margin-bottom:14px; }
  .promo-text h2 { font-family:var(--af-font-h); font-weight:800; font-size:clamp(28px,5vw,44px); color:var(--af-ink); line-height:.98; margin-bottom:10px; }
  .promo-text h2 em { color:var(--af-accent2); font-style:normal; }
  .promo-text p { color:var(--af-text); max-width:440px; font-size:14px; }
  .promo-action { text-align:right; flex-shrink:0; position:relative; z-index:1; }
  .promo-stats { display:flex; gap:28px; margin-bottom:20px; justify-content:flex-end; }
  .promo-stat-num { font-family:var(--af-font-h); font-size:38px; font-weight:800; color:var(--af-accent2); display:block; line-height:1; }
  .promo-stat-label { font-size:11.5px; color:var(--af-muted); text-transform:uppercase; letter-spacing:.04em; }

  /* FOOTER */
  footer { background:var(--af-surface); border-top:1px solid var(--af-border); margin-top:56px; }
  .footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; padding-top:44px; padding-bottom:28px; }
  .footer-brand .logo { font-size:25px; display:block; margin-bottom:10px; }
  .footer-brand p { color:var(--af-muted); font-size:13.5px; max-width:280px; line-height:1.7; }
  .footer-col h5 { font-family:var(--af-font-h); font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--af-ink); margin-bottom:14px; }
  .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
  .footer-col ul li a { font-size:14px; color:var(--af-text); transition:color .2s; display:inline-flex; align-items:center; gap:7px; }
  .footer-col ul li a svg { color:var(--af-muted); }
  .footer-col ul li a:hover { color:var(--af-accent); }
  .footer-col ul li a:hover svg { color:var(--af-accent); }
  .footer-bottom { border-top:1px solid var(--af-border); padding-top:18px; padding-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:13px; color:var(--af-muted); flex-wrap:wrap; }
  .payment-icons { display:flex; gap:7px; flex-wrap:wrap; }
  .pay-icon { background:var(--af-bg); border:1px solid var(--af-border); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:var(--af-text); font-family:var(--af-font-h); letter-spacing:.03em; }

  /* BOTTOM NAV */
  .bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--af-surface); border-top:1px solid var(--af-border); z-index:300; padding:6px 4px; padding-bottom:calc(6px + env(safe-area-inset-bottom)); justify-content:space-around; box-shadow:0 -2px 12px rgba(15,20,25,.06); }
  .bn-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 10px; flex:1; cursor:pointer; color:var(--af-muted); font-size:10.5px; font-weight:600; position:relative; }
  .bn-item.active { color:var(--af-accent); }
  .bn-item .count { position:absolute; top:0; right:22%; background:var(--af-accent2); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:1.5px solid var(--af-surface); }

  /* ANIM */
  @keyframes fadeUp { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
  .hero-main,.hero-card,.trust-item,.product-card,.cat-card,.brand-card { animation:fadeUp .45s ease both; }
  .hero-card:nth-child(2){animation-delay:.08s;} .product-card:nth-child(2){animation-delay:.06s;} .product-card:nth-child(3){animation-delay:.12s;} .product-card:nth-child(4){animation-delay:.18s;}

  /* TABLET */
  @media (max-width:1024px){
    .hero{grid-template-columns:1fr;} .hero-side{flex-direction:row;}
    .product-grid{grid-template-columns:repeat(3,1fr);} .brand-grid{grid-template-columns:repeat(4,1fr);}
    .cat-grid{grid-template-columns:repeat(2,1fr);} .footer-inner{grid-template-columns:1fr 1fr;gap:28px;}
    .trust-inner{grid-template-columns:repeat(2,1fr);} .trust-item:nth-child(2){border-right:none;}
    .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid var(--af-border);}
    .trust-inner.trust-3{grid-template-columns:repeat(3,1fr);}
    .trust-inner.trust-3 .trust-item:nth-child(1),.trust-inner.trust-3 .trust-item:nth-child(2){border-bottom:none;}
    .trust-inner.trust-3 .trust-item:nth-child(2){border-right:1px solid var(--af-border);}
    .mega-grid{grid-template-columns:repeat(2,1fr);gap:8px 24px;}
  }
  /* MOBILE */
  @media (max-width:720px){
    body{padding-bottom:70px;} .announce{font-size:11.5px;padding:7px 12px;}
    .header-top{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px;}
    .burger{display:flex;order:1;} .logo{order:2;font-size:24px;flex:1;}
    .header-actions{order:3;gap:6px;} .action-btn{width:40px;height:40px;} .action-btn.hide-mobile{display:none;}
    .search-bar{order:4;flex-basis:100%;width:100%;} .search-bar input{padding:12px;font-size:15px;} .search-bar .s-btn{padding:0 16px;}
    nav{display:block;} .nav-inner.nav-3{justify-content:space-between;} .nav-inner.nav-3 .nav-item{padding:12px 8px;font-size:13px;flex:1;justify-content:center;gap:4px;}
    .mega{max-height:70vh;overflow-y:auto;}
    .hero{padding-top:14px;gap:12px;} .hero-main{padding:30px 24px;min-height:260px;border-radius:16px;}
    .hero-side{flex-direction:column;} .hero-card{min-height:110px;padding:20px;} .hero-card p{max-width:70%;}
    .trust-bar{margin-top:12px;} .trust-inner{grid-template-columns:1fr 1fr;} .trust-item{padding:14px;gap:10px;}
    .trust-icon{width:38px;height:38px;} .trust-item h4{font-size:13.5px;} .trust-item p{font-size:11px;}
    .section{margin-top:36px;} .view-all{font-size:13px;}
    .brand-grid{grid-template-columns:repeat(3,1fr);gap:8px;} .brand-card{padding:14px 8px;}
    .product-grid{grid-template-columns:1fr 1fr;gap:10px;} .product-img .ph{width:46px;height:46px;}
    .product-body{padding:12px;} .product-price{font-size:21px;} .btn-cart{width:40px;height:40px;} .qty{max-width:none;}
    .cat-grid{grid-template-columns:1fr;gap:10px;}
    .video-banner{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 20px;text-align:left;}
    .vb-cta{width:100%;justify-content:center;}
    .vb-text p{max-width:none;}
    .mega-grid{grid-template-columns:1fr;gap:6px;}
    .trust-inner.trust-3{grid-template-columns:1fr;}
    .trust-inner.trust-3 .trust-item{border-right:none;border-bottom:1px solid var(--af-border);}
    .trust-inner.trust-3 .trust-item:last-child{border-bottom:none;}
    .promo-banner{flex-direction:column;align-items:flex-start;gap:24px;padding:28px 22px;}
    .promo-action{text-align:left;width:100%;} .promo-stats{justify-content:flex-start;gap:36px;} .promo-deco{display:none;}
    .btn-primary{width:100%;justify-content:center;}
    .footer-inner{grid-template-columns:1fr 1fr;gap:24px;padding-top:36px;} .footer-brand{grid-column:1/-1;}
    .footer-bottom{flex-direction:column;align-items:flex-start;}
    .bottom-nav{display:flex;}
  }
  @media (max-width:380px){ .brand-grid{grid-template-columns:repeat(2,1fr);} .footer-inner{grid-template-columns:1fr;} }

/* ============================================================
   4. МОСТ К WOOCOMMERCE
   Приводим штатную разметку каталога к виду карточки прототипа.
   Блок выше (.product-card и т.д.) используется на ГЛАВНОЙ.
   Здесь — стандартный архив WooCommerce (ul.products li.product).
   ============================================================ */

/* 4.1. Сетка архива каталога — 4 в ряд */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none !important;} /* убираем float-хаки WooCommerce */

/* 4.2. Карточка-обёртка li.product */
.woocommerce ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important;
  background:var(--af-surface); border:1px solid var(--af-border);
  border-radius:var(--af-r); overflow:hidden; position:relative;
  display:flex; flex-direction:column; padding:0;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.woocommerce ul.products li.product:hover{
  border-color:var(--af-accent); transform:translateY(-4px); box-shadow:var(--af-shadow-lg);
}

/* 4.3. Картинка товара 3:4 (как на Ozon) */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{
  aspect-ratio:3/4; object-fit:contain; background:var(--af-bg);
  width:100%; height:auto; margin:0; border-radius:0;
}

/* 4.4. Внутренние отступы текстовой части */
.woocommerce ul.products li.product > a,
.woocommerce ul.products li.product .product-brand,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-stock,
.woocommerce ul.products li.product .price{
  padding-left:14px; padding-right:14px;
}
.woocommerce ul.products li.product > a{display:block;text-decoration:none;}

/* 4.5. Бренд (наш хук) */
.woocommerce ul.products li.product .product-brand{
  font-family:var(--af-font-h); font-size:11.5px; font-weight:700; color:var(--af-accent);
  letter-spacing:.07em; text-transform:uppercase; margin:12px 0 4px;
}

/* 4.6. Название */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--af-font-b) !important; font-size:13px; color:var(--af-ink);
  font-weight:500; line-height:1.4; margin:0 0 8px; padding-top:0; padding-bottom:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:36px;
}

/* 4.7. Наличие (наш хук) */
.woocommerce ul.products li.product .product-stock{
  display:inline-flex; align-items:center; gap:5px; font-size:11px;
  color:var(--af-green); font-weight:600; margin-bottom:10px;
}

/* 4.8. Цена */
.woocommerce ul.products li.product .price{
  font-family:var(--af-font-h) !important; font-size:23px !important; font-weight:800 !important;
  color:var(--af-ink) !important; line-height:1; margin:0 0 12px;
}
.woocommerce ul.products li.product .price del{
  font-family:var(--af-font-b) !important; font-size:12.5px !important; font-weight:400 !important;
  color:var(--af-muted) !important; margin-left:6px;
}
.woocommerce ul.products li.product .price ins{text-decoration:none;}

/* 4.9. Кнопка-иконка «в корзину» (наш фильтр выводит .btn-cart) */
.woocommerce ul.products li.product .btn-cart{
  position:absolute; bottom:14px; right:14px;
  width:42px; height:42px; flex-shrink:0; background:var(--af-accent2);
  border:none; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s,transform .15s,box-shadow .2s; padding:0;
}
.woocommerce ul.products li.product .btn-cart svg{width:20px;height:20px;}
.woocommerce ul.products li.product .btn-cart:hover{
  background:#d24a06; transform:scale(1.06); box-shadow:0 6px 16px rgba(255,90,31,.35); color:#fff;
}
/* запас места под кнопку, чтобы не перекрывала цену */
.woocommerce ul.products li.product .price{padding-bottom:42px;}

/* 4.10. Бейдж распродажи */
.woocommerce ul.products li.product .onsale{
  position:absolute; top:9px; left:9px; right:auto; margin:0; min-height:0; min-width:0;
  background:var(--af-accent2); color:#fff; font-family:var(--af-font-h); font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:20px; letter-spacing:.03em; text-transform:uppercase; line-height:1.4;
}

/* --- АДАПТИВ архива --- */
@media (max-width:1024px){ .woocommerce ul.products{grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:10px;} }

/* ============================================================
   5. КАРТОЧКА ТОВАРА (single product) — изображения 3:4
   ============================================================ */
.woocommerce div.product .woocommerce-product-gallery__image img{
  aspect-ratio:3/4; object-fit:contain; background:var(--af-bg);
}

/* ============================================================
   6. КНОПКИ КОРЗИНЫ И ОФОРМЛЕНИЯ — ОБА РЕЖИМА
   (Classic shortcode + WooCommerce Blocks). Оранжевый акцент.
   ============================================================ */
/* --- Classic --- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .single_add_to_cart_button{
  background:var(--af-accent2) !important; color:#fff !important;
  font-family:var(--af-font-h) !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.03em; border:none !important; border-radius:10px !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .single_add_to_cart_button:hover{ background:#d24a06 !important; }

/* --- WooCommerce Blocks --- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button{
  background:var(--af-accent2) !important; color:#fff !important;
  font-family:var(--af-font-h) !important; font-weight:700 !important; border-radius:10px !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{ background:#d24a06 !important; }

/* ============================================================
   7. МОБИЛЬНАЯ НИЖНЯЯ НАВИГАЦИЯ (выводится хуком в functions.php)
   ============================================================ */
.bottom-nav{display:none;}
@media (max-width:720px){
  body{padding-bottom:70px;}
  .bottom-nav{display:flex;}
}

/* --- 8. ЛОГОТИПЫ БРЕНДОВ-КАРТИНКОЙ (главная) --- */
.brand-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}

/* --- 10. АЛФАВИТНЫЙ СПИСОК МАРОК (главная) --- */
.brand-list{ columns:5; column-gap:20px; }
.brand-list a{
  display:flex; align-items:center; gap:8px; break-inside:avoid;
  padding:9px 12px; margin-bottom:3px;
  font-family:var(--af-font-b); font-size:14px; font-weight:500;
  color:var(--af-text); text-decoration:none; border-radius:8px;
  transition:background .15s,color .15s,padding .15s;
}
.brand-list a::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--af-border2); flex-shrink:0; transition:background .15s;
}
.brand-list a:hover{ background:var(--af-accent-l); color:var(--af-accent); padding-left:16px; }
.brand-list a:hover::before{ background:var(--af-accent); }
@media (max-width:1024px){ .brand-list{ columns:4; } }
@media (max-width:720px){ .brand-list{ columns:2; } }
@media (max-width:420px){ .brand-list{ columns:2; } }

/* --- 11. СТЕППЕР КОЛИЧЕСТВА (−/+) + СТРОКА КОРЗИНЫ --- */
.af-cart-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.af-cart-row--single{ justify-content:flex-end; }

.qty-stepper{ display:flex; align-items:center; height:42px; border:1px solid var(--af-border2); border-radius:10px; overflow:hidden; background:#fff; flex-shrink:0; }
.qty-btn{ width:32px; height:42px; border:0; background:#fff; color:var(--af-ink); font-size:18px; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.qty-btn:hover{ background:var(--af-accent-l); color:var(--af-accent); }
.qty-input{ width:34px; height:42px; border:0; border-left:1px solid var(--af-border); border-right:1px solid var(--af-border); text-align:center; font-family:var(--af-font-b); font-size:14px; font-weight:600; color:var(--af-ink); background:#fff; padding:0; -moz-appearance:textfield; }
.qty-input:focus{ outline:none; }

/* Главная: строка прижата к низу карточки, боковые отступы даёт .product-body */
.product-body .af-cart-row{ margin-top:auto; padding-top:12px; }

/* Каталог: кнопка больше не абсолютная — она внутри строки степпера */
.woocommerce ul.products li.product .btn-cart{ position:static !important; bottom:auto !important; right:auto !important; }
.woocommerce ul.products li.product .price{ padding-bottom:12px !important; }
.woocommerce ul.products li.product .af-cart-row{ padding:0 14px 14px; margin-top:auto; }

/* --- 12. ПРАВКИ: компактный степпер в каталоге + статус «нет в наличии» --- */

/* Красный статус отсутствия */
.product-stock--out{ color:#e03131 !important; font-weight:600; }

/* Каталог: строка корзины — степпер слева компактный, кнопка справа видна */
.woocommerce ul.products li.product .af-cart-row{
  display:flex !important; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:nowrap;
}
.woocommerce ul.products li.product .qty-stepper{
  flex:0 0 auto !important;   /* не растягивать на всю ширину */
  width:auto !important;
}
.woocommerce ul.products li.product .qty-input{
  width:30px !important;      /* под 3-значное число */
}
.woocommerce ul.products li.product .btn-cart{
  flex:0 0 42px !important;   /* кнопка фиксированной ширины, всегда видна */
  width:42px !important; height:42px !important;
  display:flex !important; align-items:center; justify-content:center;
}