/* ===========================================================================
   moto — brand layer on top of the VKLADOVKE/velgart design language.
   Inherited from the VSEOPTEF layer on purpose: velgart is the agreed design
   base for this build (2026-10-20). The palette below was MEASURED on that
   client's site and is kept as the house look until moto supplies its own
   brand; swap the five colours here and nothing else needs to change.
   Loaded LAST (after vk-promo/95-legal.css). Colours MEASURED on
   https://vseoptef.com/ua/ with getComputedStyle, 2026-09-01:
     header / brand red        rgb(226,30,34)  #e21e22   (470 uses: accents, links on dark)
     button gold               rgb(216,177,0)  #d8b100   («Купити», «Кошик», «Чат»)
     accent yellow             rgb(255,205,54) #ffcd36
     dark panels               rgb(17,17,17)   #111111   (their body; our footer is #121715)
     in-stock green            rgb(66,168,82)  #42a852
   The client's page is dark with red/yellow; ours stays white cards on light grey —
   the brand layer is COLOUR + LOGO, not a re-skin (feedback_yapro_client_brand_layer).
   Yellow text on white fails contrast, so text links use a darker red; gold is kept
   for filled buttons where it sits under white text as it does on the client's site.
   =========================================================================== */
:root{
  --pr-primary-dark-color:  #e21e22;   /* navy -> brand red: primary buttons, catalog btn, counts, badges */
  --pr-primary-light-color: #d8b100;   /* indigo -> gold: secondary / submit buttons, focus ring */
  --pr-links-color:         #b3151a;   /* readable red for text links on white */
  --pr-blue-color:          #b3151a;
  --pr-yellow-color:        #ffcd36;
  --pr-red-color:           #e21e22;   /* sale price + discount pill — same family as the brand */
  --pr-green-color:         #42a852;   /* their in-stock green */
}

/* Hover states the skin wrote as literal navy/indigo hex (no token) — darker red / darker gold */
.vk-catalog-btn:hover,
.os24-filter-apply:hover, .os24-filter .btn-primary:hover,
.vk-co-payarea .btn-primary:hover { background:#b3151a !important; }
.vk-nl-btn:hover,
#vk-reviews #button-review:hover { background:#b8960a !important; }

/* «Хіт» sticker was orange; the client's accent is gold */
.pr-module-item-sticker.st-hit { background:#d8b100 !important; color:#111 !important; }

/* Text links: brand red, hover a touch darker. :visited literal on purpose (see 00-tokens.css). */
a:hover { color:#e21e22; }
a:visited { color:#121715; }

/* Logo: the client's mark is a white paw on a red square — give it the same corner radius
   as our cards so it reads as a badge, not a pasted JPEG. */
.vk-logo img { border-radius:8px; max-height:56px; width:auto; }

/* --- second pass after the first screenshot (2026-09-01 23:05) ---------------------
   The hero and the four promo cards carry LITERAL gradients in 40-home.css, not tokens.
   Client's page is charcoal (#111) with red and gold; ours becomes charcoal panels with
   gold CTAs — the same feel without turning the whole store dark. */
.vk-hero .swiper-slide,
.vk-hero .vk-hero-slide { background:linear-gradient(120deg,#141414 0%,#262626 100%) !important; }
.vk-hero-eyebrow { color:#ffcd36 !important; }
.vk-btn-secondary:hover { background:#b8960a !important; }
.vk-hero-nav { background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.35) !important; }

/* promo-4 cards: purple/teal/violet/blue -> brand family */
.vk-b4-sale    { background:linear-gradient(135deg,#b3151a,#e21e22) !important; }
.vk-b4-brands  { background:linear-gradient(135deg,#1a1a1a,#333333) !important; }
.vk-b4-help    { background:linear-gradient(135deg,#b8960a,#d8b100) !important; }
.vk-b4-account { background:linear-gradient(135deg,#5a0f12,#8c1418) !important; }

/* ---- search guide («гід підбору» in the live-search dropdown, os24-ux.js) — 2026-09-02 ----
   The JS paints the guide with --vk-guide-* variables (OS24 navy/teal as fallbacks); here they
   take the client's red/gold so the chips sit on brand. */
:root {
  --vk-guide-dark:        #1a1a1a;   /* picked chip, headings */
  --vk-guide-dark-hover:  #333333;
  --vk-guide-accent:      #b3151a;   /* «Показати підібране» button */
  --vk-guide-bg:          #faf6ea;   /* guide panel */
  --vk-guide-border:      #ead9a3;
  --vk-guide-hover:       #f3ead0;
  --vk-guide-chip-border: #d8b100;
  --vk-guide-text:        #5a0f12;
  --vk-guide-muted:       #8c1418;
}

/* Sticky offset = this store's sticky header height. The header layer ships 126px (VKLADOVKE's
   header); VSEOPTEF's header measures 155px, so the product buy card (top: offset + 16px) and the
   product tabs bar slid 29px under the nav row — Hlib's screenshot 2026-09-03: the availability
   label hidden behind the header while scrolling. */
:root { --pr-sticky-offset: 155px; }

/* The product tabs bar («Все про товар · Опис · Характеристики · Відгуки») is sticky at the header's
   edge and spans the full width, buy rail included (measured 57px tall). The buy card stuck at
   offset + 16px, i.e. 41px under that bar — the stock label vanished behind it while scrolling.
   Park the card below the bar. */
.vk-buy-rail { top: calc(var(--pr-sticky-offset, 0px) + 57px + 16px); }
@media (max-width: 991px) { .vk-buy-rail { position: static; } }

/* Bestsellers (vk-bestsellers, 2026-09-03): the theme marks members of the hidden «⭐ Хіти продажів»
   category with .os24-hit + an orange «Хіт» sticker. Hlib: "the best-selling products should have a
   golden frame in the catalog" — the frame. */
.product-thumb.pr-module-item.os24-hit{border:2px solid #e8a51c;box-shadow:0 0 0 3px rgba(232,165,28,.16),0 6px 18px rgba(232,165,28,.18)}
.product-thumb.pr-module-item.os24-hit .pr-module-item-sticker.st-hit{background:linear-gradient(180deg,#f5c542,#e8a51c);color:#1a1a1a;font-weight:800}
.vk-sold{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;color:#8c6d1f;background:#faf6ea;border:1px solid #ead9a3;border-radius:999px;padding:2px 9px}
.vk-sold i{color:#e8a51c}

/* «Хіти продажів» — the flame burns (Hlib, 2026-09-03). Nav link, mobile menu link and the page title
   icon: a slow flicker in scale, tilt, colour and glow; off for people who asked for reduced motion. */
@keyframes vk-flame{
  0%  {transform:scale(1) rotate(-4deg);color:#e8a51c;filter:drop-shadow(0 0 0 rgba(255,120,0,0))}
  35% {transform:scale(1.12) rotate(3deg);color:#ff7a1a;filter:drop-shadow(0 0 3px rgba(255,120,0,.55))}
  60% {transform:scale(1.04) rotate(-2deg);color:#f5a623;filter:drop-shadow(0 0 1px rgba(255,120,0,.3))}
  100%{transform:scale(1.15) rotate(4deg);color:#ff5e00;filter:drop-shadow(0 0 4px rgba(255,94,0,.6))}
}
.vk-nav-best > i:first-child,.vk-catmenu-best i,.vk-best-title i{display:inline-block;transform-origin:50% 90%;animation:vk-flame 1.15s ease-in-out infinite alternate;will-change:transform}
.vk-nav-best > i:first-child{color:#f5a623}
.vk-best-title i{animation-duration:1.4s}
@media (prefers-reduced-motion: reduce){.vk-nav-best > i:first-child,.vk-catmenu-best i,.vk-best-title i{animation:none;color:#f5a623}}

/* Footer links: one colour whether visited or not (Hlib, 2026-09-03: "why are some links brighter?" —
   the visited ones were). The theme's global a:visited rule (00-tokens) outranks `footer a`, so these
   selectors carry a pseudo-class of their own to beat it; hover stays white. */
footer .vk-f-links a, footer .vk-f-links a:link, footer .vk-f-links a:visited{color:#cfd3da;font-weight:400}
footer .vk-f-links a:hover, footer .vk-f-links a:visited:hover{color:#fff}
footer .vk-f-links a.vk-f-all, footer .vk-f-links a.vk-f-all:visited{color:#fff;font-weight:700}

/* «Смарт пошук» (vksearch/guide/vk-smart-search.js, 2026-09-03): the button at the right of the search
   bar and the pop-up with the blurred page behind it. */
.vk-search .input-group{flex-wrap:nowrap}
.vk-smart-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid #ead9a3 !important;background:linear-gradient(180deg,#fff8e6,#f3e6c9) !important;color:#8c1418 !important;font-weight:700;font-size:13px}
.vk-smart-btn:hover{background:linear-gradient(180deg,#fff3d1,#ecd9a8) !important}
.vk-smart-btn i{color:#e8a51c}
@media (max-width:767px){.vk-smart-btn span{display:none}.vk-smart-btn{padding-left:12px;padding-right:12px}}
.vk-smart-overlay{position:fixed;inset:0;z-index:1200;background:rgba(20,14,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 24px;overflow:auto}
.vk-smart-open{overflow:hidden}
.vk-smart-card{position:relative;width:100%;max-width:680px;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);padding:26px 28px 24px;animation:vk-smart-in .18s ease-out}
@keyframes vk-smart-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.vk-smart-close{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:20px;color:#6b7280;cursor:pointer;padding:6px}
.vk-smart-head{display:flex;align-items:center;gap:10px}.vk-smart-head i{color:#e8a51c;font-size:22px}.vk-smart-head h3{margin:0;font-size:24px}
.vk-smart-lead{margin:6px 0 14px;color:#4b5563;font-size:14px}
.vk-smart-steps{list-style:none;display:flex;gap:6px;margin:0 0 14px;padding:0;counter-reset:s}
.vk-smart-steps li{flex:1;font-size:12px;color:#9ca3af;padding:6px 0 6px 0;border-top:3px solid #ece8dd;counter-increment:s}
.vk-smart-steps li::before{content:counter(s) ". ";font-weight:700}
.vk-smart-steps li.is-current{color:#1a1a1a;border-top-color:#e8a51c}.vk-smart-steps li.is-done{color:#1f8a4c;border-top-color:#1f8a4c}
.vk-smart-input{display:flex;align-items:center;gap:10px;border:2px solid #ead9a3;border-radius:12px;padding:10px 14px;background:#fffdf7}
.vk-smart-input:focus-within{border-color:#e8a51c;box-shadow:0 0 0 3px rgba(232,165,28,.18)}
.vk-smart-input i{color:#e8a51c}.vk-smart-input input{flex:1;border:0;outline:0;font-size:18px;background:transparent}
.vk-smart-crumbs{margin:12px 0 0;font-size:13px;color:#4b5563}.vk-smart-crumbs span{color:#b3151a;margin:0 4px}
.vk-smart-back{border:0;background:transparent;color:#b3151a;cursor:pointer;font-size:13px;margin-left:8px}
.vk-smart-body{margin-top:12px}
.vk-smart-q{font-weight:700;font-size:15px;margin:6px 0 10px}
.vk-smart-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.vk-smart-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border:1px solid #ead9a3;border-radius:12px;background:#fff;cursor:pointer;font:inherit;line-height:1.3}
.vk-smart-tile:hover{background:#faf6ea;border-color:#e8a51c}
.vk-smart-tile b{font-size:14px;color:#1a1a1a}.vk-smart-tile span{font-size:12px;color:#6b7280}
.vk-smart-link{display:inline-block;margin-top:12px;color:#b3151a;font-weight:600;text-decoration:none}.vk-smart-link:hover{text-decoration:underline}
.vk-smart-go{display:flex;justify-content:center;align-items:center;margin-top:8px;padding:13px 18px;border-radius:12px;background:#b3151a;color:#fff;font-weight:700;font-size:16px;text-decoration:none}
.vk-smart-go:hover{background:#8c1418;color:#fff}
.vk-smart-loading,.vk-smart-none{color:#6b7280;font-size:14px;padding:8px 0}

/* ---------------------------------------------------------------------------
   moto, 2026-10-20 — mobile fix found during the phone pass.

   .vk-duel-dock (the discount-duel pull tab) is position:fixed at left:0 and
   37px wide. On a 375px viewport the product card starts at x=12, so the tab
   sat on top of the wishlist and compare buttons stacked down the card's left
   edge: controls a visitor can see but cannot press.

   It stays on tablet and desktop, where the layout has a gutter for it.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .vk-duel-dock { display: none !important; }
}