/* ========================================================================== VIP darčeky pre ambasádorov — Autoglym.SK (tiket #3968) Súvisiaci skript: wt-vip.js Konfigurácia: Vzhled a obsah -> Editor -> HTML kódy -> Záhlaví (#wt-vip-config) Triedy na nastavuje inline skript v HEAD (pred prvým vykreslením): .wt-vip — návštevník má platnú VIP cookie -> darčeky sa ODKRÝVAJÚ .wt-vip-landing — sme na /vip- s platným kódom -> skryť obsah 404 .wt-vip-ready — wt-vip.js dorenderoval uvítací blok ========================================================================== */ /* -------------------------------------------------------------------------- 1) GATING — darčekové UI je skryté pre VŠETKÝCH okrem VIP. Zámerne písané ako html:not(.wt-vip), nie naopak: keď inline skript zlyhá alebo ho niekto zmaže, nezobrazí sa nikomu nič (fail-closed). Zároveň nemusíme hádať pôvodnú display hodnotu pri odkrývaní. POZOR: .cart-free-shipping tu ZÁMERNE nie je — to je ukazovateľ dopravy zdarma od 60 EUR, ten musí vidieť každý. -------------------------------------------------------------------------- */ html:not(.wt-vip) .free-gifts-wrapper, html:not(.wt-vip) ul.free-gifts, html:not(.wt-vip) .free-gift-trigger, html:not(.wt-vip) .extras-wrapper .free-gift, html:not(.wt-vip) .extras-wrapper .extra.gift, html:not(.wt-vip) .cart-item.cart-item-gift, html:not(.wt-vip) .gift-items, html:not(.wt-vip) #colorbox .free-gifts, html:not(.wt-vip) .express-checkout__gift { display: none !important; } /* Zástupný darček „Bez darčeka" — pre bežného zákazníka je to jeho tichý výber (celý blok darčekov má aj tak skrytý), VIP ho nemá vidieť vôbec. Triedu priraďuje wt-vip.js podľa placeholderGiftId z konfigurácie. Platí aj vnútri modálneho okna „Zmeniť": Shoptet ho vytvára klonovaním .free-gifts-wrapper, takže sa trieda prenesie s ním. */ .wt-vip-gift-placeholder { display: none !important; } /* -------------------------------------------------------------------------- 2) LANDING /vip- — potlačenie 404 pred prvým vykreslením. Trieda .wt-vip-landing pribudne synchrónne v HEAD, takže hláška „Hm! Niečo sa pokazilo." sa nikdy nestihne ukázať. Inline skript má 3s poistku, ktorá triedu odoberie, keby sa wt-vip.js nenačítal — vtedy návštevník uvidí normálnu 404 namiesto prázdnej stránky. -------------------------------------------------------------------------- */ html.wt-vip-landing .empty-content-404 { display: none !important; } /* -------------------------------------------------------------------------- 3) UVÍTACÍ BLOK na /vip- Bez pevnej šírky — 404 sa rendruje v layoute s bočným panelom (.sidebar 295–390px + #content.narrow), takže blok musí byť fluidný. Farby si nastavuje sám: .empty-content h1 má v šablóne color: var(--color-primary), čo je na tomto e-shope BIELA. -------------------------------------------------------------------------- */ .wt-vip-welcome { background: #202020; color: #ffffff; padding: 40px 30px; margin: 0 0 30px; } .wt-vip-welcome__eyebrow { display: inline-block; background: #e21e26; color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; margin-bottom: 18px; } .wt-vip-welcome__title { color: #ffffff !important; font-size: 30px; font-weight: 800; line-height: 1.15; text-transform: uppercase; margin: 0 0 14px; } .wt-vip-welcome__by { color: #ffffff; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 20px; } .wt-vip-welcome__by span { color: #e21e26; } .wt-vip-welcome__lead { color: #e8e8e8; font-size: 16px; line-height: 1.6; margin: 0 0 26px; max-width: 60ch; } .wt-vip-welcome__steps { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; counter-reset: wtvip; } .wt-vip-welcome__steps li { counter-increment: wtvip; flex: 1 1 180px; background: rgba(255, 255, 255, 0.06); border-left: 3px solid #e21e26; padding: 14px 16px; font-size: 14px; line-height: 1.5; color: #f0f0f0; } .wt-vip-welcome__steps li::before { content: counter(wtvip) "."; display: block; color: #e21e26; font-weight: 800; font-size: 18px; margin-bottom: 4px; } .wt-vip-welcome__cta { display: inline-block; padding: 14px 30px; background-color: #e21e26; color: #fff !important; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 15px; transition: background-color 0.3s ease; } .wt-vip-welcome__cta:hover { background-color: #c41a20; text-decoration: none; } .wt-vip-welcome__note { margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: #a8a8a8; } @media (max-width: 768px) { .wt-vip-welcome { padding: 28px 20px; } .wt-vip-welcome__title { font-size: 23px; } .wt-vip-welcome__steps li { flex: 1 1 100%; } .wt-vip-welcome__cta { display: block; text-align: center; } } /* -------------------------------------------------------------------------- 4) PRIPOMÍNACIA LIŠTA Vkladá sa do toku na začiatok #content — nie fixed a nie do #header. Dôvod: na mobile je #header position:fixed s výškou 60px a .overall-wrapper má padding-top:60px; čokoľvek vložené do hlavičky posunie obsah pod ňu. Spodok obrazovky zaberá cookie lišta. -------------------------------------------------------------------------- */ .wt-vip-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: #202020; color: #ffffff; padding: 11px 16px; margin: 0 0 18px; font-size: 14px; line-height: 1.4; } .wt-vip-bar__tag { background: #e21e26; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; flex: none; } .wt-vip-bar__text { flex: 1 1 auto; } .wt-vip-bar__text strong { color: #ffffff; font-weight: 700; } .wt-vip-bar__close { flex: none; background: none; border: 0; color: #9a9a9a; font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; } .wt-vip-bar__close:hover { color: #ffffff; } @media (max-width: 768px) { .wt-vip-bar { font-size: 13px; padding: 9px 12px; } } /* -------------------------------------------------------------------------- 5) BLOK V KOŠÍKU — nadpis nad natívnym výberom darčeka + postup k limitu -------------------------------------------------------------------------- */ .wt-vip-cart { border: 2px solid #e21e26; padding: 16px 18px; margin: 0 0 22px; } .wt-vip-cart__title { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #202020; margin: 0 0 6px; } .wt-vip-cart__text { font-size: 14px; line-height: 1.55; color: #444; margin: 0; } .wt-vip-cart__text b { color: #e21e26; } .wt-vip-cart__progress { position: relative; height: 6px; background: #ececec; margin: 12px 0 0; overflow: hidden; } .wt-vip-cart__progress i { position: absolute; left: 0; top: 0; bottom: 0; background: #e21e26; transition: width 0.4s ease; } /* Keď je limit dosiahnutý, rám zozelená — vizuálne potvrdenie stavu. */ .wt-vip-cart--unlocked { border-color: #2e8b3d; } .wt-vip-cart--unlocked .wt-vip-cart__text b { color: #2e8b3d; }