/* ============================================================ SPACE CBD — Shoptet Skin v7 COSMOS UPGRADE Updated tokens (rgba-based) + Cosmos v4 styles + Shoptet Waltz overrides Load via in — see NAVOD.txt ============================================================ */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { --bg: #07091a; --surface: rgba(14,18,36,.78); --surface-solid: #0e1228; --card: rgba(17,21,42,.84); --border: rgba(255,255,255,.10); --border-bright: rgba(255,255,255,.16); --text: #f5f7ff; --text2: rgba(236,238,248,.78); --text3: rgba(236,238,248,.58); --accent: #7c6bf5; --accent2: #a78bfa; --glow: rgba(124,107,245,.18); --cyan: #38d9f5; --rose: #f472b6; --amber: #fbbf24; --green: #34d399; --radius: 16px; --radius-lg: 24px; --radius-sm: 10px; --heading: 'Plus Jakarta Sans', system-ui, sans-serif; --body: 'DM Sans', system-ui, sans-serif; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ::selection { background: rgba(124,107,245,.4); color: #fff; } body { background: var(--bg) !important; color: var(--text) !important; font-family: var(--body) !important; min-height: 100vh; overflow-x: hidden; } html { scroll-behavior: smooth; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } /* Accessibility skip link */ .skip-link__wrapper { position: relative !important; z-index: 10020 !important; } .skip-link__wrapper a, .skip-link__wrapper .skip-link, .skip-link__wrapper .skip-link__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 8px 0 0 10px !important; padding: 10px 14px !important; border-radius: 12px !important; background: linear-gradient(135deg, rgba(10,14,30,.97), rgba(20,27,51,.95)) !important; border: 1px solid rgba(124,107,245,.30) !important; box-shadow: 0 12px 28px rgba(0,0,0,.28) !important; color: #f8fbff !important; font-family: var(--heading) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; } .skip-link__wrapper a:hover, .skip-link__wrapper a:focus, .skip-link__wrapper .skip-link:hover, .skip-link__wrapper .skip-link:focus, .skip-link__wrapper .skip-link__link:hover, .skip-link__wrapper .skip-link__link:focus { background: linear-gradient(135deg, rgba(22,30,58,.98), rgba(12,18,39,.96)) !important; border-color: rgba(52,211,153,.38) !important; color: #ffffff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(52,211,153,.14), 0 14px 32px rgba(0,0,0,.30) !important; } .site-name img { width: auto; max-width: 300px; max-height: 80px; height: auto; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: rgba(124,107,245,.4); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ============================================================ COSMOS CANVAS ============================================================ */ .cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .cosmos canvas { width: 100%; height: 100%; } .nebula-glow { position: fixed; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; z-index: 1; filter: blur(130px); opacity: .10; background: radial-gradient(circle, var(--green) 0%, var(--accent) 25%, var(--cyan) 50%, var(--rose) 70%, transparent 85%); mix-blend-mode: screen; animation: nebulaBreath 6s ease-in-out infinite; } @keyframes nebulaBreath { 0%, 100% { opacity: .10; transform: scale(1); } 50% { opacity: .16; transform: scale(1.15); } } /* ============================================================ TEXT EFFECTS ============================================================ */ .text-gradient { background: linear-gradient(90deg, var(--accent2) 0%, var(--cyan) 45%, var(--rose) 75%, var(--accent2) 100%); background-size: 250% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: textShimmer 3.5s linear infinite; } @keyframes textShimmer { 0% { background-position: 0% center; } 100% { background-position: 250% center; } } /* ============================================================ URGENCY COUNTDOWN BAR (TOP) ============================================================ */ .urgency-bar { background: linear-gradient(90deg, rgba(52,211,153,.12), rgba(124,107,245,.10), rgba(52,211,153,.08), rgba(56,217,245,.10), rgba(52,211,153,.12)); background-size: 400% 100%; animation: urgencyPulse 8s ease infinite; border-bottom: 1px solid rgba(124,107,245,.25); padding: 11px 20px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; font-weight: 600; color: var(--text); position: relative; z-index: 300; text-align: center; flex-wrap: wrap; } @keyframes urgencyPulse { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .uc-time { font-family: var(--heading); font-weight: 800; font-size: 15px; color: var(--rose); background: rgba(244,114,182,.12); border: 1px solid rgba(244,114,182,.3); border-radius: var(--radius-sm); padding: 3px 10px; letter-spacing: .06em; animation: timeFlash 1s ease infinite; } @keyframes timeFlash { 0%, 100% { opacity: 1; } 50% { opacity: .75; } } .uc-close { position: absolute; right: 16px; cursor: pointer; color: var(--text2); font-size: 18px; line-height: 1; transition: color .2s; background: none; border: none; } .uc-close:hover { color: var(--text); } /* ============================================================ LAYOUT & SECTIONS ============================================================ */ .section-gap { padding: 80px 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; } .sec-header { text-align: center; margin-bottom: 52px; } .sec-header .overline { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); margin-bottom: 14px; display: block; } .sec-header h2 { font-family: var(--heading); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--text); margin-bottom: 14px; } .sec-header p { color: var(--text2); font-size: 17px; max-width: 540px; margin: 0 auto; } /* New section / sec-head classes (homepage-blocks.html) */ .section { padding: 96px 0; } .sec-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent2); margin-bottom: 14px; } .sec-title { font-family: var(--heading); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.025em; color: var(--text); margin-bottom: 14px; } .sec-sub { font-size: 16px; color: var(--text2); line-height: 1.7; max-width: 520px; } .sec-head { margin-bottom: 56px; } .sec-head.center { text-align: center; } .sec-head.center .sec-sub { margin: 0 auto; } /* ============================================================ HERO SECTION — JS-injected on homepage ============================================================ */ .sc-hero { text-align: center; max-width: 980px; margin: 0 auto; padding: 80px 28px 50px; position: relative; z-index: 10; } .sc-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.22); border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--green); margin-bottom: 28px; } .sc-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.4); } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } } .sc-hero-title { font-family: var(--heading); font-weight: 800; font-size: clamp(2.4rem, 5.5vw, 3.8rem); color: var(--text); line-height: 1.08; margin-bottom: 28px; animation: heroReveal .8s cubic-bezier(.4,0,.2,1) both; } @keyframes heroReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .sc-grad { background: linear-gradient(90deg, var(--accent2) 0%, var(--cyan) 45%, var(--rose) 75%, var(--accent2) 100%); background-size: 250% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: textShimmer 3.5s linear infinite; font-style: normal; } .sc-trust-row { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 860px; margin: 0 auto 28px; animation: heroReveal .8s .15s cubic-bezier(.4,0,.2,1) both; } .sc-tp { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; transition: border-color .2s, color .2s; } .sc-tp-green { color: var(--green); border-color: rgba(52,211,153,.18); } .sc-tp-amber { color: var(--amber); border-color: rgba(251,191,36,.18); } .sc-tp-cyan { color: var(--cyan); border-color: rgba(56,217,245,.18); } .sc-hero-btns { display: flex; align-items: stretch; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 760px; margin: 0 auto; animation: heroReveal .8s .28s cubic-bezier(.4,0,.2,1) both; } .sc-btn-g { background: linear-gradient(135deg, #059669, #22c55e, #34d399); color: #fff; border: none; padding: 16px 32px; min-height: 48px; min-width: 184px; font-family: var(--heading); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; border-radius: 50px; cursor: pointer; transition: transform .2s, box-shadow .25s; text-decoration: none; animation: cannaPulse 2.5s ease infinite; box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); } .sc-btn-g:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 50px rgba(52,211,153,.5), 0 20px 50px rgba(0,0,0,.35); color: #fff; } @keyframes cannaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.35), 0 4px 20px rgba(0,0,0,.3); } 50% { box-shadow: 0 0 0 8px rgba(52,211,153,0), 0 8px 30px rgba(0,0,0,.3); } } .sc-btn-o { background: rgba(255,255,255,.03); color: var(--text); border: 1px solid rgba(255,255,255,.15); padding: 16px 32px; min-height: 48px; min-width: 168px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; border-radius: 50px; transition: border-color .2s, color .2s, transform .2s, background .2s; cursor: pointer; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .sc-btn-o:hover { border-color: var(--accent); color: var(--accent2); background: rgba(255,255,255,.06); transform: translateY(-2px); } /* ============================================================ CATEGORY NAV ============================================================ */ .sc-catnav { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 1040px; margin: 0 auto; padding: 30px 28px; position: relative; z-index: 10; } .sc-cat { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 10px 20px; min-height: 42px; font-size: 13px; font-weight: 600; color: var(--text2); text-align: center; transition: border-color .2s, color .2s, transform .2s, background .2s; cursor: pointer; text-decoration: none; } .sc-cat:hover { color: var(--text); background: rgba(255,255,255,.06); transform: translateY(-2px); } .sc-cat-rose:hover { border-color: rgba(244,114,182,.4); color: var(--rose); } .sc-cat-green:hover { border-color: rgba(52,211,153,.4); color: var(--green); } .sc-cat-cyan:hover { border-color: rgba(56,217,245,.4); color: var(--cyan); } .sc-cat-amber:hover { border-color: rgba(251,191,36,.4); color: var(--amber); } .sc-cat-purple:hover { border-color: rgba(124,107,245,.4); color: var(--accent2); } .sc-cat svg { opacity: .7; } /* ============================================================ TRUST BAR ============================================================ */ .trust-bar { background: linear-gradient(180deg, var(--surface), rgba(52,211,153,.03)); border-top: 1px solid rgba(52,211,153,.12); border-bottom: 1px solid rgba(52,211,153,.12); padding: 18px 28px; animation: trustBreathe 6s ease-in-out infinite; } @keyframes trustBreathe { 0%, 100% { border-top-color: rgba(52,211,153,.12); } 50% { border-top-color: rgba(52,211,153,.28); } } .trust-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text2); transition: color .2s; } .trust-item:hover { color: var(--text); } .trust-icon { font-size: 15px; } .trust-icon.green { color: var(--green); } .trust-icon.amber { color: var(--amber); } .trust-icon.cyan { color: var(--cyan); } .trust-icon.purple { color: var(--accent2); } /* ============================================================ STATS BAR ============================================================ */ .stats-bar { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 36px 28px; } .stats-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); } .stat-item { text-align: center; padding: 20px 16px; border-right: 1px solid var(--border); transition: background .25s; } .stat-item:last-child { border-right: none; } .stat-item:hover { background: rgba(124,107,245,.05); } .stat-num { font-family: var(--heading); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); display: block; margin-bottom: 7px; } .stat-num.purple { color: var(--accent2); text-shadow: 0 0 30px rgba(167,139,250,.4); } .stat-num.cyan { color: var(--cyan); text-shadow: 0 0 30px rgba(56,217,245,.35); } .stat-num.amber { color: var(--amber); text-shadow: 0 0 30px rgba(251,191,36,.3); } .stat-num.green { color: var(--green); text-shadow: 0 0 30px rgba(52,211,153,.3); } .stat-label { color: var(--text2); font-size: 13px; font-weight: 500; } /* New stat-val / stat-lbl classes (homepage-blocks.html) */ .stat-val { font-family: var(--heading); font-weight: 800; font-size: 2rem; display: block; margin-bottom: 4px; } .sv-purple { color: var(--accent2); } .sv-cyan { color: var(--cyan); } .sv-amber { color: var(--amber); } .sv-green { color: var(--green); } .stat-lbl { font-size: 12px; color: var(--text3); font-weight: 500; letter-spacing: .03em; } /* ============================================================ REVIEWS ============================================================ */ .sc-rvw { position: relative; z-index: 10; width: 100%; padding: 28px 0; overflow: hidden; } .sc-rvw-h { text-align: center; margin-bottom: 12px; font-size: 14px; color: var(--text2); } .sc-mq { overflow: hidden; width: 100%; position: relative; } .sc-mq::before, .sc-mq::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .sc-mq::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .sc-mq::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .sc-mq-t { display: flex; gap: 12px; animation: scM 50s linear infinite; width: max-content; } .sc-mq-t:hover { animation-play-state: paused; } @keyframes scM { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .sc-r { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; min-width: 250px; max-width: 250px; flex-shrink: 0; transition: border-color .3s; } .sc-r:hover { border-color: rgba(251,191,36,.3); } .sc-r-s { color: var(--amber); font-size: 12px; margin-bottom: 4px; letter-spacing: 2px; } .sc-r-t { color: var(--text2); font-size: 11px; line-height: 1.45; font-style: italic; margin-bottom: 6px; } .sc-r-f { font-size: 10px; color: var(--text2); } .sc-r-f b { color: var(--text); } /* Reviews grid (upgraded) */ .reviews-header { display: flex; align-items: center; gap: 28px; padding: 28px 32px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 18px; margin-bottom: 24px; max-width: 1200px; margin-left: auto; margin-right: auto; } .rh-score { font-family: var(--heading); font-weight: 800; font-size: 52px; letter-spacing: -.03em; color: var(--text); } .rh-stars { color: var(--amber); font-size: 18px; letter-spacing: .05em; margin-bottom: 4px; } .rh-count { font-size: 13px; color: var(--text3); } .rh-divider { width: 1px; height: 56px; background: var(--border); } .rh-google { font-family: var(--heading); font-weight: 700; font-size: 26px; } .g-b { color: #4285F4; } .g-r { color: #EA4335; } .g-y { color: #FBBC05; } .g-g { color: #34A853; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto; } .review-card { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 16px; padding: 22px; transition: border-color .3s; } .review-card:hover { border-color: rgba(251,191,36,.25); } .rc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .rc-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; } .av-a { background: linear-gradient(135deg, #7c6bf5, #a78bfa); } .av-b { background: linear-gradient(135deg, #38d9f5, #0891b2); } .av-c { background: linear-gradient(135deg, #34d399, #059669); } .av-d { background: linear-gradient(135deg, #fbbf24, #d97706); } .av-e { background: linear-gradient(135deg, #f472b6, #be185d); } .av-f { background: linear-gradient(135deg, #818cf8, #4f46e5); } .rc-name { font-weight: 600; font-size: 13px; color: var(--text); } .rc-meta { font-size: 11px; color: var(--text3); } .rc-stars { color: var(--amber); font-size: 13px; margin-bottom: 10px; } .rc-text { font-size: 13px; color: var(--text2); line-height: 1.65; } .rc-date { font-size: 11px; color: var(--text3); margin-top: 12px; } /* ============================================================ TRUST BOXES (bottom) ============================================================ */ .sc-trust { padding: 20px; position: relative; z-index: 10; } .sc-trust-g { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .sc-ti { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-size: 12px; color: var(--text2); text-align: center; transition: border-color .2s, transform .2s; } .sc-ti:hover { border-color: rgba(124,107,245,.3); transform: translateY(-2px); } .sc-ti b { color: var(--text); display: block; margin-bottom: 2px; } /* ============================================================ GUARANTEES ============================================================ */ .guarantees-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 28px; } .guar-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 24px; text-align: center; transition: transform .32s, border-color .32s, box-shadow .32s; position: relative; overflow: hidden; } .guar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--guar-accent, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .guar-card:hover::before { transform: scaleX(1); } .guar-card:hover { transform: translateY(-6px); border-color: rgba(124,107,245,.28); box-shadow: 0 20px 50px rgba(0,0,0,.4); } .guar-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 18px; transition: transform .3s; } .guar-card:hover .guar-icon { transform: scale(1.12) rotate(-5deg); } .guar-icon.purple { background: rgba(124,107,245,.14); color: var(--accent2); } .guar-icon.cyan { background: rgba(56,217,245,.1); color: var(--cyan); } .guar-icon.green { background: rgba(52,211,153,.1); color: var(--green); } .guar-icon.amber { background: rgba(251,191,36,.1); color: var(--amber); } .guar-card h4 { font-family: var(--heading); font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 10px; } .guar-card p { color: var(--text2); font-size: 14px; line-height: 1.65; } /* New trust-grid / trust-card classes (homepage-blocks.html) */ .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .trust-card { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 18px; padding: 28px 22px; text-align: center; transition: border-color .3s, transform .3s; } .trust-card:hover { border-color: rgba(124,107,245,.3); transform: translateY(-4px); } .tc-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; margin: 0 auto 16px; } .tci-purple { background: rgba(124,107,245,.12); } .tci-cyan { background: rgba(56,217,245,.1); } .tci-green { background: rgba(52,211,153,.1); } .tci-amber { background: rgba(251,191,36,.1); } .trust-card h4 { font-family: var(--heading); font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 8px; } .trust-card p { font-size: 13px; color: var(--text2); line-height: 1.6; } /* ============================================================ FEATURED BAND ============================================================ */ .featured-band { background: linear-gradient(135deg, rgba(124,107,245,.1) 0%, rgba(56,217,245,.06) 100%); border: 1px solid rgba(124,107,245,.2); border-radius: 28px; padding: 60px; max-width: 1200px; margin: 0 auto; } .fb-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .fb-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(244,114,182,.3); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--rose); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px; } .fb-title { font-family: var(--heading); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; color: var(--text); line-height: 1.08; margin-bottom: 16px; } .fb-desc { font-size: 15px; line-height: 1.75; color: var(--text2); margin-bottom: 28px; } .fb-specs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } .spec-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; } .spec-k { font-size: 13px; color: var(--text2); } .spec-v { font-size: 13px; font-weight: 700; color: var(--text); } .fb-visual { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 20px; aspect-ratio: 1; display: grid; place-items: center; font-size: 80px; position: relative; overflow: hidden; } .fb-visual::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(124,107,245,.15), transparent 70%); } /* ============================================================ QUIZ ============================================================ */ .quiz-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; max-width: 820px; margin: 0 auto; } .quiz-top { padding: 20px 32px 0; display: flex; align-items: center; justify-content: space-between; } .quiz-step-indicator { display: flex; gap: 8px; align-items: center; } .quiz-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.15); transition: background .3s, transform .3s; } .quiz-step-dot.active { background: var(--accent); transform: scale(1.4); } .quiz-step-dot.done { background: var(--green); } .quiz-label { font-size: 12px; color: var(--text2); font-weight: 600; } .quiz-progress-bar { height: 3px; background: rgba(255,255,255,.06); } .quiz-progress-fill { height: 100%; border-radius: 0 2px 2px 0; width: 0%; background: linear-gradient(90deg, #22c55e, var(--accent), var(--cyan), #34d399); background-size: 300% 100%; animation: quizGradient 3s linear infinite; transition: width .45s cubic-bezier(.4,0,.2,1); } @keyframes quizGradient { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } .quiz-body { padding: 36px 40px 44px; } .quiz-step { display: none; } .quiz-step.active { display: block; animation: stepIn .38s cubic-bezier(.4,0,.2,1); } @keyframes stepIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } .quiz-q { font-family: var(--heading); font-weight: 800; font-size: clamp(1.25rem, 2.5vw, 1.65rem); color: var(--text); margin-bottom: 10px; text-align: center; } .quiz-sub { color: var(--text2); font-size: 14px; text-align: center; margin-bottom: 28px; } .quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .quiz-opt { background: var(--card); border: 2px solid var(--border); border-radius: var(--radius); padding: 20px 22px; cursor: pointer; text-align: left; transition: border-color .22s, background .22s, transform .22s; display: flex; align-items: flex-start; gap: 14px; user-select: none; } .quiz-opt:hover { border-color: rgba(124,107,245,.5); background: rgba(124,107,245,.07); transform: translateY(-3px); } .quiz-opt.selected { border-color: var(--accent); background: rgba(124,107,245,.14); } .quiz-opt-icon { font-size: 30px; line-height: 1; flex-shrink: 0; } .quiz-opt-title { font-weight: 700; color: var(--text); font-size: 15px; margin-bottom: 3px; } .quiz-opt-sub { font-size: 12px; color: var(--text2); line-height: 1.4; } .quiz-result { text-align: center; } .quiz-result-badge { display: inline-block; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.28); color: var(--green); border-radius: 999px; padding: 7px 18px; font-size: 12px; font-weight: 700; margin-bottom: 20px; } .quiz-result-card { background: var(--card); border: 1px solid rgba(124,107,245,.3); border-radius: var(--radius-lg); padding: 30px 32px; margin: 0 auto 24px; max-width: 440px; text-align: left; } .quiz-result-name { font-family: var(--heading); font-weight: 800; font-size: 21px; color: var(--text); margin-bottom: 8px; } .quiz-result-desc { color: var(--text2); font-size: 14px; line-height: 1.65; margin-bottom: 18px; } .quiz-result-price { font-family: var(--heading); font-weight: 800; font-size: 26px; color: var(--accent2); } .quiz-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .quiz-restart { background: none; border: none; color: var(--text2); font-size: 13px; cursor: pointer; text-decoration: underline; margin-top: 20px; display: block; margin-left: auto; margin-right: auto; transition: color .2s; } .quiz-restart:hover { color: var(--text); } /* ============================================================ FAQ ============================================================ */ .faq-wrap { max-width: 760px; margin: 0 auto; padding: 0 28px; } .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; transition: border-color .3s; } .faq-item:hover { border-color: rgba(124,107,245,.28); } .faq-q { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; gap: 16px; background: none; border: none; width: 100%; text-align: left; color: inherit; font-family: inherit; } .faq-q span { font-family: var(--heading); font-weight: 700; font-size: 16px; color: var(--text); } .faq-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(124,107,245,.1); border: 1px solid rgba(124,107,245,.25); display: flex; align-items: center; justify-content: center; color: var(--accent2); font-size: 20px; flex-shrink: 0; transition: transform .3s, background .3s; } .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--accent); color: #fff; } .faq-ico { width: 26px; height: 26px; border-radius: 50%; background: rgba(124,107,245,.1); border: 1px solid rgba(124,107,245,.25); display: grid; place-items: center; color: var(--accent2); font-size: 16px; flex-shrink: 0; transition: transform .35s, background .25s; } .faq-item.open .faq-ico { transform: rotate(45deg); background: var(--accent); color: #fff; border-color: transparent; } .faq-a { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .4s; color: var(--text2); font-size: 15px; line-height: 1.72; } .faq-item.open .faq-a { max-height: 420px; padding: 0 24px 24px; } .faq-item.open { border-color: rgba(52,211,153,.3); box-shadow: 0 8px 30px rgba(0,0,0,.2), 0 0 20px rgba(52,211,153,.06); } /* ============================================================ NEWSLETTER ============================================================ */ .nl-card { background: linear-gradient(135deg, rgba(52,211,153,.08), rgba(124,107,245,.08), rgba(56,217,245,.05)); border: 1px solid rgba(52,211,153,.2); border-radius: var(--radius-lg); padding: 56px 48px; text-align: center; max-width: 600px; margin: 0 auto; position: relative; overflow: hidden; } .nl-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(124,107,245,.07) 0%, transparent 70%); animation: nlPulse 4s ease infinite; } @keyframes nlPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .6; } } .nl-discount { display: inline-block; background: rgba(124,107,245,.14); border: 1px solid rgba(124,107,245,.28); border-radius: 999px; padding: 8px 20px; font-size: 13px; font-weight: 700; color: var(--accent2); margin-bottom: 20px; position: relative; } .nl-card h3 { font-family: var(--heading); font-weight: 800; font-size: clamp(1.55rem, 3vw, 2rem); color: var(--text); margin-bottom: 10px; position: relative; } .nl-card > p { color: var(--text2); margin-bottom: 24px; font-size: 15px; position: relative; } /* New nl-box / nl-pill classes (homepage-blocks.html) */ .nl-box { background: linear-gradient(135deg, rgba(124,107,245,.1), rgba(56,217,245,.06)); border: 1px solid rgba(124,107,245,.22); border-radius: 28px; padding: 64px 48px; text-align: center; max-width: 580px; margin: 0 auto; } .nl-pill { display: inline-block; background: rgba(124,107,245,.12); border: 1px solid rgba(124,107,245,.25); border-radius: 999px; padding: 6px 18px; font-size: 12px; font-weight: 700; color: var(--accent2); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px; } .nl-box h3 { font-family: var(--heading); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.025em; color: var(--text); margin-bottom: 10px; } .nl-box p { color: var(--text2); font-size: 15px; margin-bottom: 28px; line-height: 1.65; } .nl-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; position: relative; } .nl-form input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; color: var(--text); font-family: var(--body); font-size: 15px; transition: border-color .2s, box-shadow .2s; } .nl-form input::placeholder { color: var(--text2); } .nl-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,107,245,.15); } .nl-form button { background: linear-gradient(135deg, var(--accent), #5b4de8); color: #fff; border: none; border-radius: var(--radius-sm); padding: 14px 24px; font-family: var(--heading); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: transform .2s, box-shadow .2s; } .nl-form button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--glow); } /* ============================================================ STORE SECTION ============================================================ */ .store-band { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 28px; padding: 52px; max-width: 1200px; margin: 0 auto; } .store-address { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; } .sa-row { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text2); } .sa-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(124,107,245,.1); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; } .sa-row strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 2px; } .map-placeholder { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 20px; aspect-ratio: 16/10; display: grid; place-items: center; color: var(--text3); font-size: 14px; text-align: center; gap: 8px; } /* ============================================================ TRUST STRIP (legacy) ============================================================ */ .trust-strip { background: var(--surface-solid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 32px; } .ts-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; } .ts-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text2); } /* ============================================================ v8 COSMIC GLASS — STATS BENTO ============================================================ */ .stats-bento { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 0 28px; } .sb-hero { grid-column: 1 / 3; grid-row: 1 / 3; background: linear-gradient(145deg, rgba(124,107,245,.14) 0%, rgba(52,211,153,.08) 100%); border: 1px solid rgba(124,107,245,.22); border-radius: 24px; padding: 48px 40px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .sb-hero-num { font-family: var(--heading); font-weight: 800; font-size: clamp(3.5rem, 7vw, 5.5rem); letter-spacing: -.04em; background: linear-gradient(135deg, var(--accent2) 0%, var(--cyan) 50%, var(--green) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .sb-hero-lbl { font-family: var(--heading); font-weight: 600; font-size: 18px; color: var(--text2); margin-top: 8px; line-height: 1.4; } .sb-hero-glow { position: absolute; top: -40%; right: -20%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(124,107,245,.2), transparent 70%); border-radius: 50%; pointer-events: none; animation: nebulaBreath 6s ease-in-out infinite; } .sb-cell { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; text-align: center; transition: border-color .3s, transform .3s, background .3s; } .sb-cell:hover { border-color: rgba(124,107,245,.3); transform: translateY(-3px); background: rgba(255,255,255,.05); } .sb-icon { font-size: 24px; margin-bottom: 10px; filter: saturate(1.2); } .sb-val { font-family: var(--heading); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: 4px; } .sb-c1 .sb-val { color: var(--cyan); } .sb-c2 .sb-val { color: var(--amber); } .sb-c3 .sb-val { color: var(--green); } .sb-lbl { font-size: 11px; color: var(--text3); font-weight: 500; letter-spacing: .03em; } /* ============================================================ v8 COSMIC GLASS — REVIEWS ============================================================ */ .txt-amber { color: var(--amber); } .txt-green { color: var(--green); } .rv-glass-bar { display: flex; align-items: center; gap: 28px; padding: 24px 36px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 20px; flex-wrap: wrap; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .rv-score-block { display: flex; align-items: center; gap: 16px; } .rv-big-score { font-family: var(--heading); font-weight: 800; font-size: 48px; letter-spacing: -.04em; color: var(--text); background: linear-gradient(180deg, #f5f7ff 0%, #bcaeff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .rv-stars-row { color: var(--amber); font-size: 20px; letter-spacing: .06em; } .rv-divider { width: 1px; height: 48px; background: var(--border); flex-shrink: 0; } .rv-count { font-family: var(--heading); font-weight: 700; font-size: 16px; color: var(--text); } .rv-src { font-size: 13px; color: var(--text3); margin-top: 2px; } .rv-trust-seal { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--green); background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.2); border-radius: 999px; padding: 8px 16px; } .rv-trust-seal svg { color: var(--green); } .rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .rv-card { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 18px; padding: 24px; position: relative; transition: border-color .35s, transform .35s, box-shadow .35s; } .rv-card:hover { border-color: rgba(251,191,36,.22); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.3); } .rv-card.rv-featured { grid-row: span 2; background: linear-gradient(160deg, rgba(251,191,36,.06) 0%, rgba(255,255,255,.03) 100%); border-color: rgba(251,191,36,.18); display: flex; flex-direction: column; justify-content: space-between; } .rv-quote { font-family: Georgia, serif; font-size: 72px; line-height: .8; color: rgba(251,191,36,.2); margin-bottom: 8px; } .rv-text { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 18px; } .rv-featured .rv-text { font-size: 16px; line-height: 1.75; } .rv-bottom { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: auto; } .rv-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .rv-name { font-weight: 600; font-size: 13px; color: var(--text); } .rv-loc { font-size: 11px; color: var(--text3); } .rv-stars-sm { color: var(--amber); font-size: 11px; margin-left: auto; letter-spacing: 1px; } /* ============================================================ v8 COSMIC GLASS — FEATURED CBD HOLOGRAPHIC ============================================================ */ .ft-holo { position: relative; border-radius: 32px; overflow: hidden; padding: 64px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; } .ft-holo-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 20% 50%, rgba(124,107,245,.15), transparent 60%), radial-gradient(ellipse at 80% 30%, rgba(52,211,153,.1), transparent 50%), linear-gradient(135deg, rgba(124,107,245,.08), rgba(56,217,245,.04)); border: 1px solid rgba(124,107,245,.18); border-radius: 32px; animation: holoShift 8s ease infinite; } @keyframes holoShift { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(12deg); } } .ft-content { position: relative; z-index: 1; } .ft-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid rgba(244,114,182,.3); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--rose); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px; } .ft-name { font-family: var(--heading); font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.2rem); letter-spacing: -.03em; color: var(--text); line-height: 1.08; margin-bottom: 16px; } .ft-accent { background: linear-gradient(90deg, var(--accent2), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ft-desc { font-size: 15px; line-height: 1.75; color: var(--text2); margin-bottom: 28px; } .ft-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 32px; } .ft-spec { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 12px; } .ft-spec-k { font-size: 12px; color: var(--text3); } .ft-spec-v { font-size: 13px; font-weight: 700; color: var(--text); } .ft-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ft-stock { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--green); } .ft-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } .ft-visual { position: relative; z-index: 1; display: grid; place-items: center; } .ft-orb { width: 280px; height: 280px; position: relative; display: grid; place-items: center; } .ft-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(124,107,245,.2); } .ft-orb-ring-1 { animation: orbSpin 20s linear infinite; border-color: rgba(124,107,245,.15); inset: -20px; } .ft-orb-ring-2 { animation: orbSpin 15s linear infinite reverse; border-color: rgba(52,211,153,.12); inset: -44px; border-style: dashed; } @keyframes orbSpin { to { transform: rotate(360deg); } } .ft-orb-core { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(124,107,245,.2), rgba(52,211,153,.1), rgba(0,0,0,.3)); border: 1px solid rgba(124,107,245,.25); display: grid; place-items: center; font-size: 64px; box-shadow: 0 0 80px rgba(124,107,245,.2), inset 0 0 40px rgba(124,107,245,.1); animation: coreGlow 4s ease-in-out infinite; } @keyframes coreGlow { 0%, 100% { box-shadow: 0 0 60px rgba(124,107,245,.15), inset 0 0 30px rgba(124,107,245,.08); } 50% { box-shadow: 0 0 100px rgba(124,107,245,.3), inset 0 0 50px rgba(52,211,153,.12); } } /* ============================================================ v8 COSMIC GLASS — TRUST BENTO ============================================================ */ .tr-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1200px; margin: 0 auto; } .tr-card { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; position: relative; overflow: hidden; transition: border-color .35s, transform .35s; } .tr-card:hover { transform: translateY(-4px); } .tr-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; } .tr-card:hover .tr-card-accent { transform: scaleX(1); } .tr-card.tr-card-wide { grid-column: 1 / 3; background: linear-gradient(135deg, rgba(124,107,245,.07), rgba(255,255,255,.02)); border-color: rgba(124,107,245,.18); } .tr-card-inner { display: flex; align-items: flex-start; gap: 20px; } .tr-card.tr-card-highlight { background: linear-gradient(135deg, rgba(251,191,36,.06), rgba(255,255,255,.02)); border-color: rgba(251,191,36,.18); } .tr-card:hover { border-color: rgba(124,107,245,.35); } .tr-card.tr-card-highlight:hover { border-color: rgba(251,191,36,.35); } .tr-ico-wrap { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; } .tr-ico-purple { background: rgba(124,107,245,.12); } .tr-ico-cyan { background: rgba(56,217,245,.1); } .tr-ico-green { background: rgba(52,211,153,.1); } .tr-ico-amber { background: rgba(251,191,36,.1); } .tr-card h4 { font-family: var(--heading); font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 8px; } .tr-card p { font-size: 13px; color: var(--text2); line-height: 1.65; } .tr-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--amber); margin-top: 12px; transition: gap .2s; } .tr-link:hover { gap: 8px; color: var(--amber); } /* ============================================================ v8 COSMIC GLASS — QUIZ GLASS PANEL ============================================================ */ .quiz-glass { position: relative; } .quiz-glass-border { position: absolute; inset: -1px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(124,107,245,.3), rgba(52,211,153,.15), rgba(56,217,245,.2), rgba(124,107,245,.3)); background-size: 300% 300%; animation: glassBorder 6s ease infinite; z-index: -1; } @keyframes glassBorder { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================================ v8 COSMIC GLASS — FAQ NUMBERED ============================================================ */ .faq-numbered .faq-item { position: relative; padding-left: 0; } .faq-numbered .faq-item::before { content: attr(data-num); position: absolute; left: 24px; top: 20px; font-family: var(--heading); font-weight: 800; font-size: 12px; color: var(--accent2); opacity: .4; letter-spacing: .04em; } .faq-numbered .faq-q { padding-left: 60px; } .faq-numbered .faq-a { padding-left: 60px; } .faq-numbered .faq-item.open .faq-a { padding: 0 24px 24px 60px; } /* ============================================================ v8 COSMIC GLASS — NEWSLETTER MESH ============================================================ */ .nl-mesh { position: relative; border-radius: 32px; overflow: hidden; padding: 72px 48px; text-align: center; max-width: 620px; margin: 0 auto; } .nl-mesh-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 25%, rgba(124,107,245,.18), transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(52,211,153,.14), transparent 50%), radial-gradient(ellipse at 50% 0%, rgba(56,217,245,.1), transparent 60%), rgba(255,255,255,.02); border: 1px solid rgba(124,107,245,.2); border-radius: 32px; animation: meshPulse 8s ease-in-out infinite; } @keyframes meshPulse { 0%, 100% { opacity: 1; } 50% { opacity: .85; filter: hue-rotate(8deg); } } .nl-mesh-content { position: relative; z-index: 1; } .nl-mesh h3 { font-family: var(--heading); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.025em; color: var(--text); margin-bottom: 10px; } .nl-mesh p { color: var(--text2); font-size: 15px; margin-bottom: 28px; line-height: 1.65; } .nl-micro { font-size: 11px; color: var(--text3); margin-top: 14px; } /* ============================================================ v8 COSMIC GLASS — STORE SPLIT ============================================================ */ .store-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 32px; padding: 56px; max-width: 1200px; margin: 0 auto; } .store-info .sec-title { margin-bottom: 8px; } .store-intro { color: var(--text2); font-size: 15px; line-height: 1.7; margin-bottom: 28px; } .store-rows { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; } .store-row { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; color: var(--text2); } .store-row-ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(124,107,245,.08); border: 1px solid rgba(124,107,245,.15); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; } .store-row strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 2px; } .store-visual { position: relative; } .store-map-frame { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 24px; aspect-ratio: 4/3; display: grid; place-items: center; position: relative; overflow: hidden; background-image: radial-gradient(circle at 30% 40%, rgba(124,107,245,.08) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(52,211,153,.06) 0%, transparent 40%); } .store-map-inner { text-align: center; } .store-map-pin { font-size: 40px; margin-bottom: 8px; animation: pinBounce 2s ease infinite; } @keyframes pinBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .store-map-label { font-family: var(--heading); font-weight: 700; font-size: 16px; color: var(--text); } .store-map-label small { font-size: 12px; color: var(--text3); font-weight: 500; } .store-hours-badge { position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 8px; background: rgba(7,9,26,.85); backdrop-filter: blur(8px); border: 1px solid rgba(52,211,153,.25); border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--green); } .store-hours-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } /* ============================================================ v8 COSMIC GLASS — TRUST TICKER ============================================================ */ .trust-ticker { background: var(--surface-solid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; overflow: hidden; } .tt-track { display: flex; width: max-content; animation: tickerScroll 35s linear infinite; } .tt-track:hover { animation-play-state: paused; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .tt-items { display: flex; align-items: center; gap: 0; } .tt-item { font-size: 13px; font-weight: 500; color: var(--text2); white-space: nowrap; padding: 0 20px; } .tt-sep { font-size: 6px; color: var(--accent2); opacity: .4; } /* ============================================================ WHATSAPP ============================================================ */ .wa-btn { position: fixed; bottom: 24px; right: 24px; z-index: 1060; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); cursor: pointer; transition: transform .22s, box-shadow .22s; animation: waPulse 3.5s ease infinite; border: none; text-decoration: none; } .wa-btn:hover { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,.55); } .wa-btn svg { width: 30px; height: 30px; fill: #fff; } @keyframes waPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); } 50% { box-shadow: 0 4px 30px rgba(37,211,102,.65), 0 0 0 10px rgba(37,211,102,.08); } } /* ============================================================ LIVE POPUP ============================================================ */ .live-popup { position: fixed; bottom: 100px; left: 24px; z-index: 1050; background: var(--surface-solid); border: 1px solid rgba(52,211,153,.2); border-radius: var(--radius); padding: 14px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.45); display: flex; align-items: center; gap: 12px; max-width: 310px; opacity: 0; transform: translateY(20px); transition: opacity .45s, transform .45s; pointer-events: none; } .live-popup.show { opacity: 1; transform: none; pointer-events: auto; } .lp-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--cyan)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; } .lp-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--cyan)); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .lp-detail { font-size: 11px; color: var(--text2); margin-top: 2px; } .lp-body { flex: 1; min-width: 0; } .lp-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; } .lp-name { font-weight: 700; font-size: 13px; color: var(--text); } .lp-city { font-size: 11px; color: var(--text2); } .lp-product { font-size: 12px; color: var(--text2); } .lp-product strong { color: var(--text); } .lp-price { color: var(--green); font-weight: 700; } .lp-footer { display: flex; align-items: center; gap: 6px; margin-top: 5px; } .lp-verified { font-size: 10px; color: var(--green); font-weight: 600; } .lp-time { font-size: 10px; color: var(--text2); margin-left: auto; } .lp-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; flex-shrink: 0; } /* ============================================================ VIEWERS BADGE ============================================================ */ .viewers-badge { position: fixed; bottom: 170px; right: 24px; z-index: 1050; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.3); font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 7px; opacity: 0; transition: opacity .3s; } .viewers-badge.show { opacity: 1; } .vb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); display: inline-block; animation: blink 1.8s ease infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* ============================================================ SCROLL REVEAL ============================================================ */ .sr { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); } .sr.visible { opacity: 1; transform: none; } .sr-d1 { transition-delay: .1s; } .sr-d2 { transition-delay: .2s; } .sr-d3 { transition-delay: .3s; } .sr-d4 { transition-delay: .4s; } /* ============================================================ BESTSELLER HEADING ============================================================ */ .sc-products-heading { font-family: var(--heading) !important; font-weight: 800 !important; font-size: clamp(1.3rem, 3vw, 1.8rem) !important; color: var(--text) !important; text-align: center !important; padding: 28px 0 4px !important; margin-bottom: 4px !important; position: relative !important; z-index: 10 !important; } .sc-ol { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .sc-products-sub { text-align: center; color: var(--text2); font-size: 13px; margin: 0 0 20px; position: relative; z-index: 10; } /* ============================================================ RESPONSIVE — Component sections (legacy + v8) ============================================================ */ @media (max-width: 1024px) { .guarantees-grid { grid-template-columns: repeat(2, 1fr); } .trust-grid { grid-template-columns: repeat(2, 1fr); } .stats-inner { grid-template-columns: repeat(2, 1fr); } .sc-trust-g { grid-template-columns: repeat(2, 1fr); } .reviews-grid { grid-template-columns: 1fr; } .fb-inner, .store-band { grid-template-columns: 1fr; } /* v8 */ .stats-bento { grid-template-columns: 1fr 1fr; } .sb-hero { grid-column: 1 / 3; grid-row: auto; } .rv-grid { grid-template-columns: 1fr 1fr; } .rv-card.rv-featured { grid-row: auto; } .ft-holo { grid-template-columns: 1fr; padding: 40px; } .ft-visual { order: -1; } .ft-orb { width: 200px; height: 200px; } .ft-orb-core { width: 130px; height: 130px; font-size: 48px; } .tr-bento { grid-template-columns: 1fr 1fr; } .tr-card.tr-card-wide { grid-column: 1 / 3; } .store-split { grid-template-columns: 1fr; } .hide-m { display: none; } } @media (max-width: 768px) { .section { padding: 64px 0; } .sc-hero { padding: 60px 20px 34px; } .sc-hero-title { font-size: 2.2rem; } .sc-hero-btns { max-width: 360px; gap: 10px; } .sc-btn-g, .sc-btn-o { width: 100%; min-width: 0; padding: 14px 18px; } .sc-trust-g { grid-template-columns: repeat(2, 1fr); } .quiz-options { grid-template-columns: 1fr; } .nl-form { flex-direction: column; } .trust-inner { gap: 18px; } .reviews-header { flex-direction: column; gap: 16px; text-align: center; } .rh-divider { width: 56px; height: 1px; } .quiz-body { padding: 24px 16px; } .featured-band, .store-band { padding: 32px 24px; } /* v8 */ .rv-grid { grid-template-columns: 1fr; } .rv-glass-bar { gap: 16px; } .rv-divider { width: 56px; height: 1px; } .ft-specs-grid { grid-template-columns: 1fr; } .ft-holo { padding: 28px 20px; } .tr-bento { grid-template-columns: 1fr; } .tr-card.tr-card-wide { grid-column: auto; } .tr-card-inner { flex-direction: column; gap: 12px; } .store-split { padding: 32px 24px; } .nl-mesh { padding: 48px 24px; } .faq-numbered .faq-item::before { display: none; } .faq-numbered .faq-q, .faq-numbered .faq-a { padding-left: 24px; } .faq-numbered .faq-item.open .faq-a { padding-left: 24px; } } @media (max-width: 480px) { .guarantees-grid { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } .stats-inner { grid-template-columns: 1fr; } .stat-item { border-right: none; border-bottom: 1px solid var(--border); } .stat-item:last-child { border-bottom: none; } .sc-trust-g { grid-template-columns: 1fr; } .sc-hero-title { font-size: 1.9rem; } .sc-catnav { gap: 6px; padding: 22px 16px; } .sc-cat { flex: 1 1 calc(50% - 6px); min-width: 136px; padding: 8px 12px; font-size: 11px; } /* v8 */ .stats-bento { grid-template-columns: 1fr; padding: 0 16px; } .sb-hero { grid-column: auto; padding: 32px 24px; } .sb-hero-num { font-size: 3rem; } .ft-cta-row { flex-direction: column; align-items: flex-start; } .ft-orb { width: 160px; height: 160px; } .ft-orb-core { width: 100px; height: 100px; font-size: 36px; } } /* ============================================================ SHOPTET WALTZ — FULL DARK MODE OVERRIDES ============================================================ */ :root { --color-primary: #7c6bf5 !important; --color-primary-hover: #5b4de8 !important; --color-secondary: #34d399 !important; --color-secondary-hover: #059669 !important; --color-tertiary: #38d9f5 !important; --color-tertiary-hover: #0891b2 !important; --color-header-background: #07091a !important; --template-font: "DM Sans" !important; --template-headings-font: "Plus Jakarta Sans" !important; } .overall-wrapper { background: transparent !important; position: relative; z-index: 10; font-family: var(--body) !important; } .overall-wrapper h1, .overall-wrapper h2, .overall-wrapper h3, .overall-wrapper h4, .overall-wrapper .h1, .overall-wrapper .h2, .overall-wrapper .h3, .overall-wrapper .h4 { font-family: var(--heading) !important; } .site-msg.information { background: linear-gradient(90deg, rgba(52,211,153,.12), rgba(124,107,245,.10), rgba(52,211,153,.08)) !important; border-bottom: 1px solid rgba(52,211,153,.2) !important; color: var(--text) !important; } .site-msg.information .text { color: var(--green) !important; font-size: 12px !important; font-weight: 600 !important; } .site-msg.information .close { color: var(--text2) !important; } #header .header-title { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } #header .header-title a, #header .header-title span, #header .header-title strong { color: inherit !important; } .p-image img[src^="data:image/svg"] { background: rgba(255,255,255,.04) !important; min-height: 200px !important; } .products .product .p-image img:not([src^="data:"]) { width: 100% !important; height: auto !important; display: block !important; border-radius: var(--radius) var(--radius) 0 0 !important; } .related-products img, .products-carousel img { border-radius: 12px !important; } body.in-index main#content, body.type-index main#content, main#content.content.wide { position: relative !important; z-index: 10 !important; } body.in-index main#content { background: transparent !important; padding: 0 !important; } .homepage-text, .in-index .description, body.in-index #content > .container, body.in-index #content h2, body.in-index #content h3, body.in-index #content p { color: var(--text) !important; position: relative !important; z-index: 10 !important; } body.in-index #content h2, body.in-index #content h3 { font-family: var(--heading) !important; font-weight: 800 !important; text-align: center !important; margin: 40px 0 16px !important; } /* Homepage editorial/welcome content — kill bright default Shoptet block */ .welcome-wrapper, #content .welcome-wrapper { max-width: 980px !important; margin: 40px auto 0 !important; padding: 0 20px !important; position: relative !important; z-index: 12 !important; } .welcome, #content .welcome, .about-cbd-clean { background: linear-gradient(135deg, rgba(10,14,30,.96), rgba(17,21,42,.90)) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 24px !important; box-shadow: 0 24px 60px rgba(0,0,0,.32) !important; } .welcome > div, #content .welcome > div, .about-cbd-clean { padding: 28px 30px !important; } .welcome h1, .welcome h2, .welcome h3, .about-cbd-clean h1, .about-cbd-clean h2, .about-cbd-clean h3 { color: var(--text) !important; text-align: left !important; margin: 0 0 14px !important; } .welcome p, .welcome li, .about-cbd-clean p, .about-cbd-clean li { color: var(--text2) !important; line-height: 1.75 !important; } .welcome ul, .about-cbd-clean ul { margin: 12px 0 18px 20px !important; padding: 0 !important; } .welcome li::marker, .about-cbd-clean li::marker { color: var(--green) !important; } .welcome a, .about-cbd-clean a { color: var(--accent2) !important; } .welcome a:hover, .about-cbd-clean a:hover { color: var(--green) !important; } #header { background: linear-gradient(180deg, rgba(10,13,28,.97) 0%, rgba(8,11,24,.94) 100%) !important; backdrop-filter: blur(28px) saturate(170%) !important; -webkit-backdrop-filter: blur(28px) saturate(170%) !important; border-bottom: none !important; box-shadow: 0 12px 40px rgba(0,0,0,.28) !important; position: sticky !important; top: 0 !important; z-index: 200 !important; overflow: visible !important; padding-top: 0 !important; min-height: auto !important; transition: box-shadow .3s ease, background .3s ease !important; } #header .container, #header .navigation-wrapper, #header .header-navigation { background: transparent !important; position: relative !important; overflow: visible !important; } #header .container.navigation-wrapper { max-width: 1280px !important; padding-top: 10px !important; padding-bottom: 10px !important; } #header .header-navigation { width: 100% !important; } #header .header-navigation > div { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px 16px !important; flex-wrap: wrap !important; width: 100% !important; } .site-name { display: flex !important; align-items: center !important; flex: 0 0 auto !important; order: 1 !important; } .site-name a { display: flex !important; align-items: center !important; transition: transform .25s ease, filter .25s ease !important; } .site-name a:hover { transform: scale(1.04) !important; filter: brightness(1.15) drop-shadow(0 0 6px rgba(52,211,153,.2)) !important; } .site-name img { max-height: 50px !important; width: auto !important; filter: brightness(1.05) !important; } .navigation-buttons { display: flex !important; align-items: center !important; gap: 4px !important; margin-left: auto !important; flex: 0 0 auto !important; order: 3 !important; position: relative !important; top: -4px !important; } .navigation-buttons a, .navigation-buttons button, .top-nav-button { color: var(--text) !important; transition: color .2s ease, transform .2s ease, background .2s ease !important; border-radius: 10px !important; padding: 6px !important; background: transparent !important; } .navigation-buttons a:hover, .navigation-buttons button:hover { color: var(--green) !important; transform: translateY(-1px) !important; background: transparent !important; } .navigation-buttons a::before, .navigation-buttons button::before, .top-nav-button::before { color: inherit !important; } /* Desktop navigation — forced visible above 860px */ @media (min-width: 861px) { #navigation, .navigation-in, .navigation-in.menu { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; max-height: none !important; transform: none !important; background: transparent !important; position: relative !important; z-index: 220 !important; overflow: visible !important; margin: 0 !important; width: auto !important; flex: 1 1 620px !important; order: 2 !important; } } /* ── Desktop menu styles (>860px) ── */ @media (min-width: 861px) { .menu-level-1 { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 6px 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: visible !important; } .menu-level-1 > li { position: relative !important; overflow: visible !important; background: transparent !important; } .menu-level-1 > li > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; min-height: 36px !important; color: var(--text) !important; font-family: var(--heading) !important; font-weight: 700 !important; font-size: 11.5px !important; letter-spacing: .06em !important; text-transform: uppercase !important; line-height: 1.1 !important; padding: 8px 14px !important; border-radius: 8px !important; white-space: nowrap !important; background: transparent !important; transition: color .2s ease, background .2s ease !important; } .menu-level-1 > li > a::after { content: '' !important; position: absolute !important; bottom: 2px !important; left: 50% !important; width: 0 !important; height: 2px !important; background: var(--green) !important; border-radius: 2px !important; transform: translateX(-50%) !important; transition: width .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease !important; box-shadow: none !important; } .menu-level-1 > li > a b { font-weight: 700 !important; background: transparent !important; } .menu-level-1 > li > a:hover { color: var(--green) !important; background: transparent !important; } .menu-level-1 > li > a:hover::after { width: 60% !important; box-shadow: 0 0 8px rgba(52,211,153,.35) !important; } .menu-level-1 > li.active > a { color: var(--green) !important; background: transparent !important; } .menu-level-1 > li.active > a::after { width: 70% !important; box-shadow: 0 0 10px rgba(52,211,153,.4) !important; } .menu-level-1 > li > a[href*="/doplnky/"] { background: transparent !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 20px !important; font-size: 10.5px !important; padding: 6px 14px !important; letter-spacing: .08em !important; } .menu-level-1 > li > a[href*="/doplnky/"]::after { display: none !important; } .menu-level-1 > li > a[href*="/doplnky/"]:hover { border-color: rgba(52,211,153,.25) !important; background: transparent !important; } .menu-level-2 { position: absolute !important; top: calc(100% + 6px) !important; left: 50% !important; transform: translateX(-50%) translateY(6px) !important; opacity: 0 !important; visibility: hidden !important; background: rgba(12,15,32,.97) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 14px !important; box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(124,107,245,.06) !important; z-index: 1000 !important; min-width: 200px !important; padding: 8px 0 !important; transition: opacity .2s ease, transform .2s cubic-bezier(.4,0,.2,1), visibility .2s ease !important; } .menu-level-1 > li:hover > .menu-level-2, .menu-level-1 > li:focus-within > .menu-level-2 { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; } .menu-level-2 a { color: var(--text) !important; padding: 10px 20px !important; font-size: 13px !important; font-weight: 500 !important; transition: color .15s ease, background .15s ease, padding-left .2s ease !important; } .menu-level-2 a:hover { color: var(--green) !important; background: rgba(52,211,153,.06) !important; padding-left: 24px !important; } } /* Kontakty & Obchodní podmínky stay visible in menu */ .navigation-buttons .toggle-window[data-target="navigation"] { display: none !important; } .menu-helper { background: transparent !important; color: var(--text) !important; min-height: 34px !important; padding: 6px 14px !important; border-radius: 20px !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; cursor: pointer !important; font-size: 10.5px !important; font-family: var(--heading) !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; transition: color .2s ease, border-color .25s ease, background .2s ease, box-shadow .25s ease !important; } .menu-helper:hover { color: var(--green) !important; border-color: rgba(52,211,153,.28) !important; background: transparent !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 12px rgba(52,211,153,.12) !important; } @media (min-width: 861px) { #navigation, .navigation-in, .navigation-in.menu { flex-basis: 100% !important; } .menu-level-1 { justify-content: flex-start !important; } } @media (max-width: 860px) { #header, .navigation-in.menu, .menu-level-1 > li { overflow: visible !important; } #header .container.navigation-wrapper { padding-top: 8px !important; padding-bottom: 8px !important; } #header .header-navigation > div { flex-wrap: nowrap !important; } /* Show hamburger button on mobile */ .navigation-buttons .toggle-window[data-target="navigation"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 12px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.10) !important; color: var(--text) !important; transition: background .2s ease, border-color .2s ease, transform .2s ease !important; } .navigation-buttons .toggle-window[data-target="navigation"]:hover { background: rgba(52,211,153,.08) !important; border-color: rgba(52,211,153,.25) !important; transform: scale(1.05) !important; } /* ── Mobile navigation panel ── Let Shoptet handle display (none/block) via its toggle-window JS. We only style appearance + position when it becomes visible. */ #navigation { position: fixed !important; top: 0 !important; left: 0 !important; width: 85vw !important; max-width: 340px !important; height: 100vh !important; height: 100dvh !important; z-index: 10000 !important; background: rgba(10,14,30,.98) !important; backdrop-filter: blur(28px) saturate(160%) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) !important; border-right: 1px solid rgba(255,255,255,.08) !important; box-shadow: 20px 0 60px rgba(0,0,0,.6) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; margin: 0 !important; } .navigation-in, .navigation-in.menu { display: block !important; visibility: visible !important; opacity: 1 !important; padding: 24px 0 40px !important; width: 100% !important; position: static !important; overflow: visible !important; background: transparent !important; } .menu-level-1 { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; padding: 0 14px !important; justify-content: flex-start !important; visibility: visible !important; opacity: 1 !important; list-style: none !important; } .menu-level-1 > li { width: 100% !important; } .menu-level-1 > li > a { display: flex !important; justify-content: flex-start !important; align-items: center !important; width: 100% !important; padding: 14px 18px !important; border-radius: 12px !important; font-size: 14px !important; font-family: var(--heading) !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; min-height: 44px !important; white-space: normal !important; color: var(--text) !important; background: transparent !important; text-decoration: none !important; } .menu-level-1 > li > a::after { display: none !important; } .menu-level-1 > li > a:hover, .menu-level-1 > li > a:active, .menu-level-1 > li.active > a { background: rgba(52,211,153,.08) !important; color: var(--green) !important; } /* Reset doplnky pill style for mobile */ .menu-level-1 > li > a[href*="/doplnky/"] { border: none !important; border-radius: 12px !important; font-size: 14px !important; padding: 14px 18px !important; letter-spacing: .04em !important; } /* Submenus stack vertically in mobile */ .menu-level-2 { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; background: rgba(255,255,255,.03) !important; backdrop-filter: none !important; border: none !important; border-radius: 10px !important; box-shadow: none !important; padding: 4px 0 !important; margin: 2px 0 6px 12px !important; min-width: auto !important; display: block !important; } .menu-level-2 li { list-style: none !important; } .menu-level-2 a { display: block !important; padding: 10px 16px !important; font-size: 13px !important; color: var(--text2) !important; } .menu-level-2 a:hover, .menu-level-2 a:active { padding-left: 20px !important; color: var(--green) !important; } .menu-helper { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 8px !important; min-height: 42px !important; padding: 0 16px !important; border-radius: 12px !important; } /* Scroll-lock when mobile nav is open */ body.sc-nav-active { overflow: hidden !important; } /* Dark backdrop behind the slide-out panel */ body.sc-nav-active::after { content: '' !important; position: fixed !important; inset: 0 !important; z-index: 9999 !important; background: rgba(0,0,0,.55) !important; pointer-events: auto !important; animation: sc-fade-in .25s ease !important; } } @keyframes sc-fade-in { from { opacity: 0; } to { opacity: 1; } } .search-widget, .search-widget .popup-widget-inner { background: rgba(14,17,36,.96) !important; color: var(--text) !important; } .search-widget h2 { color: var(--text) !important; } .search input, .search-form input { background: rgba(255,255,255,.06) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 10px !important; } .search input::placeholder { color: var(--text2) !important; } .search-results, .search-suggest { background: rgba(14,17,36,.96) !important; border: 1px solid rgba(255,255,255,.08) !important; color: var(--text) !important; } .login-widget, .login-widget .popup-widget-inner { background: rgba(14,17,36,.96) !important; color: var(--text) !important; } .login-widget h2 { color: var(--text) !important; } .login-widget .form-control { background: rgba(255,255,255,.06) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,.12) !important; } .cart-widget, .cart-widget .popup-widget-inner, .cart-widget-inner { background: rgba(14,17,36,.96) !important; color: var(--text) !important; } .cart-count { color: var(--text) !important; } #continue-order-button { background: linear-gradient(135deg, #059669, #22c55e) !important; color: #fff !important; border-radius: 50px !important; font-weight: 700 !important; } .user-action .popup-widget { background: rgba(14,17,36,.96) !important; border: 1px solid rgba(255,255,255,.08) !important; color: var(--text) !important; } #content, .content-wrapper, .index-content-wrapper { background: transparent !important; color: var(--text) !important; position: relative; z-index: 10; } .type-category #content, .type-detail #content, .type-page #content, .type-cart #content, .type-ordering-process #content, .type-article #content, .type-manufacturer-detail #content, .type-manufacturer-listing #content { background: rgba(14,17,36,.85) !important; color: var(--text) !important; border-radius: 24px !important; border: 1px solid rgba(255,255,255,.06) !important; box-shadow: 0 24px 80px rgba(0,0,0,.35) !important; backdrop-filter: blur(8px) !important; margin-top: 20px !important; padding: 28px !important; } body.in-index #content, body.type-index #content, body.in-index .content-wrapper, body.type-index .content-wrapper { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin-top: 0 !important; } #content p, #content li, #content td, #content label, #content .description, .content-wrapper p, .content-wrapper li, .content-wrapper td, .content-wrapper label { color: var(--text2) !important; } #content th, .content-wrapper th, #content strong, #content b, .content-wrapper strong, .content-wrapper b { color: var(--text) !important; } #content h1, #content h2, #content h3, #content h4, #content .h1, #content .h2, #content .h3, #content .name, .content-wrapper h1, .content-wrapper h2, .content-wrapper h3, .content-wrapper h4, .content-wrapper .name { color: var(--text) !important; font-family: var(--heading) !important; font-weight: 800 !important; } .breadcrumbs, .breadcrumb, #content .breadcrumbs, .content-wrapper .breadcrumbs { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 8px !important; margin: 0 0 14px !important; padding: 8px 12px !important; border-radius: 12px !important; background: linear-gradient(135deg, rgba(10,14,30,.88), rgba(18,24,48,.78)) !important; border: 1px solid rgba(255,255,255,.06) !important; color: var(--text2) !important; } .breadcrumbs a, .breadcrumb a { color: var(--accent2) !important; font-weight: 700 !important; } .breadcrumbs a:hover, .breadcrumb a:hover { color: var(--green) !important; } .products, .products-block { background: transparent !important; } .products .product, .products-block .product { background: transparent !important; border: none !important; box-shadow: none !important; } .products .product .p, .products-block .product .p { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text) !important; overflow: hidden !important; transition: transform .3s, border-color .3s, box-shadow .3s !important; padding: 0 !important; } .products .product .p:hover { transform: translateY(-6px) !important; border-color: rgba(52,211,153,.35) !important; box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 30px rgba(52,211,153,.08) !important; } .product-list, .products, .products-block { background: transparent !important; } .p-detail, .product-detail { background: transparent !important; color: var(--text) !important; } .p-detail .name, .product-detail h1 { font-family: var(--heading) !important; font-weight: 800 !important; font-size: clamp(1.6rem, 3vw, 2.2rem) !important; color: var(--text) !important; } .detail-parameters, .parameters-table, .p-detail .description { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 24px !important; color: var(--text2) !important; } .detail-parameters td, .detail-parameters th, .parameters-table td, .parameters-table th { color: var(--text2) !important; border-color: var(--border) !important; } #productDiscussion { color: var(--text) !important; } #productDiscussion .discussion-post { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; } .sidebar, .sidebar-inner, .sidebar-box, .sidebar-filter, .filter { background: linear-gradient(135deg, rgba(10,14,30,.95), rgba(17,21,42,.90)) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: var(--radius) !important; color: #dfe7ff !important; } .sidebar h3, .sidebar-box h3, .filter h3, .sidebar-inner h3 { color: #f8fbff !important; font-family: var(--heading) !important; } .sidebar p, .sidebar li, .sidebar span, .sidebar label, .sidebar-inner p, .sidebar-inner li, .sidebar-inner span, .sidebar-inner label { color: #d7e0fb !important; } .sidebar a, .sidebar-inner a { color: #f4f7ff !important; } .sidebar a:hover, .sidebar-inner a:hover { color: var(--green) !important; } .sorting, .pagination { color: var(--text2) !important; } .sorting select { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; } /* Sorting controls, list controls, toolbar — kill white backgrounds */ .listSortingControl, .listSortingControl-name, [class*="listSortingControl"], [class*="list-sorting"], .sorting-control, .products-header, .products-toolbar, .category-header, .category-top, .list-header, .list-toolbar, .product-filter-top, .product-list-header, .filter-top, .content-header { background: transparent !important; background-color: transparent !important; color: var(--text2) !important; border-color: var(--border) !important; } [class*="listSortingControl"] label, [class*="listSortingControl"] span, [class*="listSortingControl"] a, .products-header label, .products-header span, .products-toolbar label, .products-toolbar span, .list-header span, .list-toolbar span { color: var(--text2) !important; } [class*="listSortingControl"] select, .products-header select, .products-toolbar select { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; } [class*="listSortingControl"] a:hover, .products-header a:hover { color: var(--green) !important; } .pagination a, .pagination span { color: var(--text2) !important; background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; } .pagination .current, .pagination .active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } .category-perex, .category-description { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 24px !important; color: var(--text2) !important; } /* Category SEO / conversion sections */ .sc-category-seo-shell { --sc-tone-rgb: 124,107,245; position: relative; overflow: hidden; margin: 20px 0 24px !important; padding: 24px !important; background: linear-gradient(135deg, rgba(10,14,30,.94), rgba(18,24,48,.88)) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 24px !important; box-shadow: 0 18px 44px rgba(0,0,0,.22) !important; } .sc-category-seo-shell:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(var(--sc-tone-rgb), .12), transparent 42%); pointer-events: none; } .sc-tone-rose { --sc-tone-rgb: 244,114,182; } .sc-tone-cyan { --sc-tone-rgb: 56,217,245; } .sc-tone-amber { --sc-tone-rgb: 251,191,36; } .sc-tone-purple { --sc-tone-rgb: 124,107,245; } .sc-tone-green { --sc-tone-rgb: 52,211,153; } .sc-category-seo-grid, .sc-category-guide-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.45fr .95fr; gap: 18px; align-items: start; } .sc-category-copy, .sc-category-guide-copy, .sc-category-side, .sc-category-faq { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 18px; } .sc-category-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; margin-bottom: 12px; border-radius: 999px; border: 1px solid rgba(var(--sc-tone-rgb), .28); background: rgba(var(--sc-tone-rgb), .08); color: var(--text) !important; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .sc-category-title, .sc-category-guide-title { color: var(--text) !important; font-family: var(--heading) !important; font-weight: 800 !important; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 12px !important; } .sc-category-title { font-size: clamp(1.45rem, 3vw, 2.15rem) !important; } .sc-category-lead, .sc-category-guide-copy p, .sc-seo-faq-a p { color: var(--text2) !important; line-height: 1.75 !important; } .sc-category-points { list-style: none !important; margin: 16px 0 18px !important; padding: 0 !important; display: grid; gap: 10px; } .sc-category-points li, .sc-category-check { display: flex; gap: 10px; align-items: flex-start; color: var(--text2) !important; } .sc-category-points li span:first-child, .sc-category-check strong { color: var(--green) !important; font-weight: 800; flex: 0 0 auto; } .sc-category-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .sc-category-side-title { color: var(--text) !important; font-family: var(--heading) !important; font-weight: 700 !important; margin-bottom: 12px !important; } .sc-category-step { padding: 12px 14px; background: rgba(17,21,42,.72); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; margin-bottom: 10px; } .sc-category-step strong { display: block; color: var(--text) !important; margin-bottom: 4px; } .sc-category-step p { margin: 0 !important; color: var(--text2) !important; font-size: 13px; line-height: 1.6; } .sc-category-checklist { display: grid; gap: 10px; margin-top: 16px; } .sc-category-faq h3 { margin: 0 0 12px !important; color: var(--text) !important; font-family: var(--heading) !important; font-weight: 700 !important; } .sc-seo-faq-list { display: grid; gap: 10px; } .sc-seo-faq-item { background: rgba(17,21,42,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; } .sc-seo-faq-item summary { list-style: none; cursor: pointer; padding: 14px 16px; color: var(--text) !important; font-weight: 700; position: relative; } .sc-seo-faq-item summary::-webkit-details-marker { display: none; } .sc-seo-faq-item summary:after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 18px; font-weight: 700; } .sc-seo-faq-item[open] summary:after { content: '−'; } .sc-seo-faq-a { padding: 0 16px 14px; } .sc-category-links { position: relative; z-index: 1; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); } .sc-category-links-label { display: block; margin-bottom: 10px; color: var(--text) !important; font-weight: 700; } .sc-category-links-row { display: flex; flex-wrap: wrap; gap: 8px; } .sc-category-link { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text) !important; transition: transform .2s, border-color .2s, color .2s; } .sc-category-link:hover { color: var(--green) !important; border-color: rgba(52,211,153,.35); transform: translateY(-1px); } @media (max-width: 900px) { .sc-category-seo-grid, .sc-category-guide-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .sc-category-seo-shell { padding: 16px !important; border-radius: 18px !important; } .sc-category-copy, .sc-category-guide-copy, .sc-category-side, .sc-category-faq { padding: 14px; } .sc-category-actions { flex-direction: column; } .sc-category-actions .sc-btn-g, .sc-category-actions .sc-btn-o { width: 100%; justify-content: center; text-align: center; } } /* Visibility polish — remove bright native Shoptet patches */ #content .box, #content .box-bg-default, #content .well, #content .panel, #content .card, #content .dropdown-menu, #content .tab-content, #content .table-responsive, #content .shipping-options, #content .payment-options, #content .order-summary-item, #content .discussion-post, #content .vote-wrap, .content-wrapper .box, .content-wrapper .well, .content-wrapper .panel, .content-wrapper .card, .content-wrapper .dropdown-menu, .content-wrapper .tab-content, .content-wrapper [class*="summary-"], #content [style*="background:#fff"], #content [style*="background: #fff"], #content [style*="background-color:#fff"], #content [style*="background-color: #fff"], #content [style*="background:#ffffff"], #content [style*="background: #ffffff"], #content [style*="background-color:#ffffff"], #content [style*="background-color: #ffffff"], #content [style*="background:#fafafa"], #content [style*="background: #fafafa"], #content [style*="background:#f8f8f8"], #content [style*="background: #f8f8f8"], #content [style*="background:white"], #content [style*="background: white"], #content [style*="background-color:white"], #content [style*="background-color: white"], #content [style*="rgb(255, 255, 255)"], #content [style*="rgb(248, 248, 248)"], #content [class*="bg-white"], #content [class*="white-bg"], #content [class*="bg-light"] { background: rgba(12,16,34,.90) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: var(--radius) !important; box-shadow: 0 14px 40px rgba(0,0,0,.18) !important; } #content .box p, #content .well p, #content .panel p, #content .card p, #content .tab-content p, #content .dropdown-menu a, .content-wrapper .box p, .content-wrapper .well p, .content-wrapper .panel p, .content-wrapper .card p { color: var(--text2) !important; } #content .box h2, #content .box h3, #content .box h4, #content .panel h2, #content .panel h3, #content .panel h4, #content .card h2, #content .card h3, #content .card h4, .content-wrapper .box h2, .content-wrapper .box h3, .content-wrapper .box h4 { color: var(--text) !important; } /* Hard stop for bright/white native surfaces */ .modal, .modal-dialog, .modal-content, .popup-widget, .popup-widget-inner, .ui-dialog, .ui-dialog-content, .ui-widget-content, .dropdown-menu, .tab-pane, .tab-content, .accordion-inner, .form-group, .step, .step-box, .co-box, .ordering-process, .payment-methods, .shipping-methods, .payment-shipping-in, .cart-item, .cart-item-inner, .cart-table, .order-summary, .order-summary-item, .summary-wrapper, .sidebar-in, .message, .note, .notice, #cboxContent, #cboxLoadedContent { background: rgba(10,14,30,.94) !important; background-color: rgba(10,14,30,.94) !important; color: var(--text) !important; border-color: rgba(255,255,255,.08) !important; } table, thead, tbody, tr { background: transparent !important; background-color: transparent !important; } thead th, .cart-table th, .parameters-table th, .table-responsive th { background: rgba(12,16,34,.95) !important; color: var(--text) !important; } td, .table-responsive td, .cart-table td, .parameters-table td { background: transparent !important; } .btn, .btn-cart, .add-to-cart, button[type="submit"], input[type="submit"], .cart-button, .buy-btn { background: linear-gradient(135deg, var(--accent), #5b4de8) !important; border: none !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 8px 24px rgba(124,107,245,.25) !important; font-family: var(--heading) !important; font-weight: 700 !important; transition: transform .2s, box-shadow .2s !important; cursor: pointer !important; } .btn:hover, .btn-cart:hover, .add-to-cart:hover, button[type="submit"]:hover, input[type="submit"]:hover, .cart-button:hover, .buy-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 36px rgba(124,107,245,.4) !important; } input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), select, textarea { background: rgba(255,255,255,.06) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 12px !important; font-family: var(--body) !important; } input:focus, select:focus, textarea:focus { outline: none !important; border-color: rgba(124,107,245,.45) !important; box-shadow: 0 0 0 4px rgba(124,107,245,.12) !important; } input::placeholder, textarea::placeholder { color: var(--text2) !important; } .cart-content, .cart-table, .order-summary, .cart-summary { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text) !important; } .cart-table td, .cart-table th { border-color: var(--border) !important; color: var(--text2) !important; } .cart-table .name a, .cartProductName, .cart-product-name, .cart-item-name, .order-summary .name { color: #f8fbff !important; } .cart-table .name a:hover, .cartProductName:hover, .cart-product-name:hover, .cart-item-name:hover { color: var(--green) !important; } .cart-table .price, .cart-summary .price { color: var(--accent2) !important; } .cart-total, .cart-total-price { color: var(--text) !important; font-family: var(--heading) !important; font-weight: 800 !important; } /* Checkout step 1 — delivery & payment boxes */ body.type-ordering-process #content .co-box, body.type-ordering-process #content .box-ordering-process, body.type-ordering-process #content .payment-shipping-in, body.type-ordering-process #content .shipping-options, body.type-ordering-process #content .payment-options { background: linear-gradient(135deg, rgba(10,14,30,.96), rgba(17,21,42,.92)) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; box-shadow: 0 18px 44px rgba(0,0,0,.22) !important; } body.type-ordering-process #content .payment-shipping-in .radio-wrapper, body.type-ordering-process #content .payment-options li, body.type-ordering-process #content .shipping-options li, body.type-ordering-process #content .delivery-time { background: linear-gradient(135deg, rgba(16,21,41,.96), rgba(11,15,31,.92)) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; padding: 12px 14px !important; margin-bottom: 10px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 28px rgba(0,0,0,.16) !important; transition: transform .18s ease, border-color .18s ease, background .18s ease !important; } body.type-ordering-process #content .payment-shipping-in .radio-wrapper:hover, body.type-ordering-process #content .payment-shipping-in .radio-wrapper.active, body.type-ordering-process #content .payment-shipping-in .radio-wrapper.checked, body.type-ordering-process #content .payment-shipping-in .radio-wrapper.selected, body.type-ordering-process #content .payment-options li:hover, body.type-ordering-process #content .shipping-options li:hover { transform: translateY(-1px) !important; border-color: rgba(124,107,245,.24) !important; background: linear-gradient(135deg, rgba(20,27,51,.98), rgba(12,17,36,.94)) !important; } body.type-ordering-process #content .payment-shipping-in input[type="radio"], body.type-ordering-process #content .payment-shipping-in input[type="checkbox"] { accent-color: #34d399 !important; } body.type-ordering-process #content .payment-shipping-in label, body.type-ordering-process #content .payment-shipping-in .radio-wrapper label, body.type-ordering-process #content .payment-shipping-in .payment-info, body.type-ordering-process #content .payment-shipping-in .shipping-info, body.type-ordering-process #content .payment-shipping-in .name, body.type-ordering-process #content .payment-options label, body.type-ordering-process #content .shipping-options label { color: #f4f7ff !important; font-family: var(--body) !important; font-weight: 600 !important; margin: 0 !important; background: transparent !important; } body.type-ordering-process #content .payment-shipping-in .description, body.type-ordering-process #content .payment-shipping-in .payment-desc, body.type-ordering-process #content .payment-shipping-in .shipping-desc, body.type-ordering-process #content .payment-shipping-in .delivery-time, body.type-ordering-process #content .payment-shipping-in small, body.type-ordering-process #content .payment-shipping-in .hint { color: var(--text2) !important; } body.type-ordering-process #content .payment-shipping-in strong, body.type-ordering-process #content .payment-shipping-in .payment-name, body.type-ordering-process #content .payment-shipping-in .shipping-name, body.type-ordering-process #content .payment-shipping-in .label { color: var(--text) !important; } body.type-ordering-process #content .payment-shipping-in .price, body.type-ordering-process #content .payment-shipping-in .payment-price, body.type-ordering-process #content .payment-shipping-in .shipping-price, body.type-ordering-process #content .payment-shipping-in .for-free { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 4px 10px !important; border-radius: 999px !important; background: rgba(52,211,153,.14) !important; border: 1px solid rgba(52,211,153,.24) !important; color: #8bf5bb !important; font-family: var(--heading) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.1 !important; } body.type-ordering-process #content .payment-shipping-in .payment-logo, body.type-ordering-process #content .payment-shipping-in .shipping-logo, body.type-ordering-process #content .payment-shipping-in .image { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px !important; border-radius: 10px !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 8px 18px rgba(0,0,0,.16) !important; } body.type-ordering-process #content .payment-shipping-in img { border-radius: 8px !important; } @media (max-width: 768px) { body.type-ordering-process #content .payment-shipping-in .radio-wrapper, body.type-ordering-process #content .payment-options li, body.type-ordering-process #content .shipping-options li { padding: 11px 12px !important; border-radius: 14px !important; } body.type-ordering-process #content .payment-shipping-in .price, body.type-ordering-process #content .payment-shipping-in .payment-price, body.type-ordering-process #content .payment-shipping-in .shipping-price, body.type-ordering-process #content .payment-shipping-in .for-free { margin-top: 6px !important; } } /* Sitemap-wide polish — forms, empty states, and long text/info pages */ body.type-page #content, body.type-article #content, body.type-cart #content { line-height: 1.7 !important; } body.type-page #content p, body.type-article #content p, body.type-cart #content p { color: var(--text2) !important; line-height: 1.75 !important; } body.type-page #content ol, body.type-page #content ul, body.type-article #content ol, body.type-article #content ul { margin: 0 0 18px 1.2rem !important; padding-left: .35rem !important; color: var(--text2) !important; } body.type-page #content li, body.type-article #content li { margin: 0 0 8px !important; color: var(--text2) !important; } body.type-page #content hr, body.type-article #content hr { border: 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; margin: 22px 0 !important; } body.type-page #content form, body.type-article #content form, body.type-cart #content form, body.type-page #content fieldset, body.type-article #content fieldset, body.type-cart #content fieldset { background: rgba(12,16,34,.52) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; } #content .form-group { margin-bottom: 16px !important; } #content .form-group label, #content label { display: block !important; margin: 0 0 7px !important; color: var(--text) !important; font-family: var(--heading) !important; font-weight: 700 !important; letter-spacing: -.01em !important; } #content .form-group input:not([type="checkbox"]):not([type="radio"]), #content .form-group select, #content .form-group textarea { min-height: 46px !important; } #content .cart-empty, #content .empty-cart, #content .empty-message, #content .articles-empty, #content .no-items, #content .no-records { padding: 18px 20px !important; margin: 10px 0 18px !important; text-align: center !important; background: linear-gradient(135deg, rgba(12,16,34,.92), rgba(18,24,48,.78)) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; color: var(--text2) !important; box-shadow: 0 16px 36px rgba(0,0,0,.18) !important; } #content .cart-empty a, #content .empty-cart a, #content .empty-message a, #content .articles-empty a, #content .no-items a, #content .no-records a { color: var(--green) !important; } .table-responsive, table { color: var(--text2) !important; } .table-responsive td, .table-responsive th, table td, table th { border-color: var(--border) !important; color: var(--text2) !important; } .related-products { background: transparent !important; border: none !important; } .related-products h2 { color: var(--text) !important; font-family: var(--heading) !important; } .alert, .flash-message, .message { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text) !important; } .alert-success { border-color: rgba(52,211,153,.3) !important; } .alert-danger, .alert-error { border-color: rgba(244,114,182,.3) !important; } .colorbox-html-content, #cboxContent, #cboxLoadedContent { background: var(--surface) !important; color: var(--text) !important; border-radius: var(--radius) !important; } #footer, footer, .footer-rows, .footer-bottom, .footer-links, .copyright { background: rgba(7,9,26,.96) !important; color: var(--text2) !important; border-color: rgba(255,255,255,.06) !important; } #footer a, footer a, .footer-rows a, .footer-bottom a { color: var(--text) !important; } #footer a:hover, footer a:hover, .footer-rows a:hover, .footer-bottom a:hover { color: var(--green) !important; } .sc-footer-quicklinks { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } .sc-footer-quicklinks a { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap !important; } .sc-footer-quicklinks a:hover { background: rgba(255,255,255,.07) !important; border-color: rgba(52,211,153,.30) !important; } @media (max-width: 768px) { .sc-footer-quicklinks { width: 100% !important; justify-content: flex-start !important; } } .products-carousel, .swiper-container, .swiper-wrapper { background: transparent !important; } .swiper-button-prev, .swiper-button-next { color: var(--text) !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 50% !important; width: 40px !important; height: 40px !important; } .swiper-button-prev:hover, .swiper-button-next:hover { border-color: var(--accent) !important; background: var(--card) !important; } .swiper-pagination-bullet { background: var(--text2) !important; } .swiper-pagination-bullet-active { background: var(--accent) !important; } .quantity-changer, .amount-changer { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; } .quantity-changer button, .amount-changer button { color: var(--text) !important; background: transparent !important; border: none !important; } .quantity-changer input, .amount-changer input { background: transparent !important; color: var(--text) !important; border: none !important; text-align: center !important; } .cookie-bar, .consent-bar, .cookies-consent { background: rgba(14,17,36,.96) !important; border-top: 1px solid var(--border) !important; color: var(--text2) !important; backdrop-filter: blur(16px) !important; } .top-navigation-bar, .header-top, .top-bar, .site-msg, .site-msg.visible { background: linear-gradient(135deg, rgba(10,14,30,.94), rgba(18,24,48,.84)) !important; color: var(--text) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; } .top-navigation-bar a, .header-top a, .top-bar a, .site-msg a, .site-msg strong { color: #f4f7ff !important; } .top-navigation-bar a:hover, .header-top a:hover, .top-bar a:hover, .site-msg a:hover { color: var(--green) !important; } .cookie-bar, .consent-bar, .cookies-consent, .cookie-bar p, .consent-bar p, .cookies-consent p, .cookie-bar span, .consent-bar span, .cookies-consent span { color: var(--text) !important; } .cookie-bar a, .consent-bar a, .cookies-consent a { color: var(--accent2) !important; font-weight: 700 !important; } .cookie-bar .btn, .consent-bar .btn, .cookies-consent .btn, .cookie-bar button, .consent-bar button, .cookies-consent button, .popup-widget a.btn, .popup-widget button.btn, .age-gate a, .age-gate button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 9px 14px !important; border-radius: 999px !important; border: 1px solid rgba(124,107,245,.26) !important; background: linear-gradient(135deg, rgba(20,27,51,.98), rgba(12,17,36,.94)) !important; color: #f8fbff !important; font-weight: 700 !important; text-decoration: none !important; } .cookie-bar .btn:hover, .consent-bar .btn:hover, .cookies-consent .btn:hover, .cookie-bar button:hover, .consent-bar button:hover, .cookies-consent button:hover, .popup-widget a.btn:hover, .popup-widget button.btn:hover, .age-gate a:hover, .age-gate button:hover { color: var(--green) !important; border-color: rgba(52,211,153,.30) !important; } body.in-index #cat-manufacturers.categories, body.type-index #cat-manufacturers.categories, body.in-index .categories, body.type-index .categories { display: block !important; background: transparent !important; position: relative !important; z-index: 12 !important; margin: 18px auto 8px !important; } body.in-index #cat-manufacturers.categories ul, body.type-index #cat-manufacturers.categories ul, body.in-index .categories ul, body.type-index .categories ul { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } body.in-index #cat-manufacturers.categories li, body.type-index #cat-manufacturers.categories li, body.in-index .categories li, body.type-index .categories li { list-style: none !important; margin: 0 !important; } body.in-index #cat-manufacturers.categories a, body.type-index #cat-manufacturers.categories a, body.in-index .categories a, body.type-index .categories a { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 16px !important; background: rgba(17,21,42,.82) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 999px !important; color: var(--text) !important; box-shadow: 0 10px 24px rgba(0,0,0,.18) !important; transition: border-color .2s, color .2s, background .2s, transform .2s !important; } body.in-index #cat-manufacturers.categories a:hover, body.type-index #cat-manufacturers.categories a:hover, body.in-index .categories a:hover, body.type-index .categories a:hover { color: var(--green) !important; border-color: rgba(52,211,153,.35) !important; background: rgba(24,30,56,.92) !important; transform: translateY(-2px) !important; } /* ══════════════════════════════════════════════════════════════ SHOPTET PRODUCTS — COMPLETE CARD SYSTEM ══════════════════════════════════════════════════════════════ */ body .homepage-group-title, body .homepage-products-heading-2, body .homepage-group-title.h4 { color: var(--text) !important; font-family: var(--heading) !important; font-weight: 800 !important; font-size: clamp(1.5rem, 3vw, 2.2rem) !important; text-align: center !important; margin: 0 auto 22px !important; padding: 16px 20px !important; position: relative !important; z-index: 10 !important; max-width: 760px !important; background: linear-gradient(135deg, rgba(10,14,30,.92), rgba(18,24,48,.84)) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; box-shadow: 0 18px 40px rgba(0,0,0,.22) !important; } /* Shoptet wrappers — dark surfaces without breaking Top 10 internals */ body .category-products, body .products-top, body .products-wrapper, body .homepage-products { background: linear-gradient(180deg, rgba(9,12,26,.76), rgba(12,16,34,.58)) !important; background-color: rgba(10,14,30,.72) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 24px 60px rgba(0,0,0,.18) !important; border-radius: 28px !important; padding: 18px 0 26px !important; max-width: 1320px !important; margin: 16px auto 28px !important; } /* Sidebar cards + headings */ .sidebar .box, .sidebar-inner .box, .box.box-topProducts, .box.box-cartButton, .box.box-bg-variant, .box.box-bg-default { background: linear-gradient(135deg, rgba(10,14,30,.94), rgba(17,21,42,.88)) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; box-shadow: 0 16px 40px rgba(0,0,0,.22) !important; } .pageElement__heading { margin: 0 0 12px !important; padding: 10px 12px !important; border-radius: 12px !important; background: linear-gradient(135deg, rgba(124,107,245,.18), rgba(56,217,245,.08)) !important; border: 1px solid rgba(124,107,245,.18) !important; color: var(--text) !important; font-family: var(--heading) !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.35 !important; } .pageElement__heading span { color: var(--text) !important; } /* Top 10 products — stronger visibility for image, title and price */ .top-products-wrapper.js-top10 { padding: 2px 0 0 !important; } .top-products-wrapper.js-top10 ol.top-products.unified { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; background: transparent !important; border: none !important; box-shadow: none !important; } .top-products-wrapper.js-top10 ol.top-products.unified li, .top-products-wrapper.js-top10 ol.top-products.unified li.display-image { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; align-items: center !important; gap: 12px !important; padding: 12px !important; margin: 0 !important; min-width: 0 !important; background: linear-gradient(135deg, rgba(18,22,44,.96), rgba(11,15,32,.92)) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 26px rgba(0,0,0,.20) !important; transition: transform .2s ease, border-color .2s ease, background .2s ease !important; } .top-products-wrapper.js-top10 ol.top-products.unified li:hover, .top-products-wrapper.js-top10 ol.top-products.unified li.display-image:hover { transform: translateY(-1px) !important; border-color: rgba(52,211,153,.28) !important; background: linear-gradient(135deg, rgba(21,27,52,.98), rgba(12,17,36,.94)) !important; } .top-products-wrapper.js-top10 .top-products-image { width: 72px !important; height: 72px !important; flex: 0 0 72px !important; overflow: hidden !important; border-radius: 12px !important; background: linear-gradient(135deg, #0c1124, #10182f) !important; border: 1px solid rgba(255,255,255,.10) !important; padding: 0 !important; margin: 0 !important; box-shadow: 0 10px 22px rgba(0,0,0,.22) !important; max-width: none !important; } .top-products-wrapper.js-top10 .top-products-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; opacity: 1 !important; visibility: visible !important; border-radius: inherit !important; background: #0c1124 !important; } .top-products-wrapper.js-top10 .top-products-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; align-self: stretch !important; gap: 7px !important; width: 100% !important; min-width: 0 !important; min-height: 72px !important; padding: 1px 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--text) !important; text-align: left !important; text-decoration: none !important; overflow: hidden !important; } .top-products-wrapper.js-top10 ol.top-products.unified li > a { float: none !important; position: static !important; } .top-products-wrapper.js-top10 .top-products-content > * { max-width: 100% !important; } .top-products-wrapper.js-top10 .top-products-name { display: -webkit-box !important; margin: 0 !important; color: #f4f7ff !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.38 !important; letter-spacing: -.01em !important; white-space: normal !important; word-break: break-word !important; overflow: hidden !important; text-overflow: ellipsis !important; line-clamp: 2 !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; text-decoration: none !important; } .top-products-wrapper.js-top10 .top-products-content strong { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 4px 10px !important; border-radius: 999px !important; background: rgba(52,211,153,.14) !important; border: 1px solid rgba(52,211,153,.24) !important; color: #8bf5bb !important; font-family: var(--heading) !important; font-weight: 800 !important; font-size: 14px !important; line-height: 1.1 !important; text-shadow: 0 0 10px rgba(52,211,153,.12) !important; } .top-products-wrapper.js-top10 .top-products-content:hover, .top-products-wrapper.js-top10 .top-products-image:hover { text-decoration: none !important; } .top-products-wrapper.js-top10 .top-products-content:hover .top-products-name { color: var(--green) !important; } @media (max-width: 480px) { .top-products-wrapper.js-top10 ol.top-products.unified li, .top-products-wrapper.js-top10 ol.top-products.unified li.display-image { grid-template-columns: 64px minmax(0, 1fr) !important; gap: 10px !important; padding: 10px !important; } .top-products-wrapper.js-top10 .top-products-image { width: 64px !important; height: 64px !important; flex-basis: 64px !important; } .top-products-wrapper.js-top10 .top-products-content { min-height: 64px !important; gap: 6px !important; } .top-products-wrapper.js-top10 .top-products-name { font-size: 12.5px !important; line-height: 1.34 !important; } .top-products-wrapper.js-top10 .top-products-content strong { font-size: 13px !important; padding: 4px 9px !important; } } body .products, body .products-block, body .products-inline, body .homepage-products-2 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 280px)) !important; justify-content: center !important; gap: 24px !important; padding: 0 28px !important; max-width: 1280px !important; margin: 0 auto !important; background: transparent !important; border: none !important; box-shadow: none !important; list-style: none !important; } body .products .product, body .products-block .product { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; float: none !important; width: 100% !important; display: flex !important; } body .product .p, body .product .p[data-micro="product"] { background: #111428 !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; overflow: hidden !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; position: relative !important; transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .35s, box-shadow .35s !important; color: var(--text) !important; } body .product .p:hover { transform: translateY(-4px) !important; border-color: rgba(52,211,153,.35) !important; box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 20px rgba(52,211,153,.06) !important; } body .product .p .p-image, body .product .p > a.p-image, body .product .p a.p-image { overflow: hidden !important; display: block !important; position: relative !important; background: #0a0d1a !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; } body .product .p .p-image img, body .product .p > a.p-image img, body .product .p a.p-image img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; display: block !important; transition: transform .5s cubic-bezier(.4,0,.2,1) !important; background: #0a0d1a !important; } body .product .p:hover .p-image img, body .product .p:hover > a.p-image img, body .product .p:hover a.p-image img { transform: scale(1.03) !important; } body .product .p .p-image img[src^="data:image/svg"] { background: rgba(255,255,255,.03) !important; min-height: 200px !important; } body .product .flags { position: absolute !important; top: 10px !important; left: 10px !important; z-index: 3 !important; display: flex !important; gap: 5px !important; flex-wrap: wrap !important; } body .product .flags .flag { border-radius: 8px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .03em !important; padding: 4px 10px !important; line-height: 1.3 !important; border: none !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; text-transform: none !important; } body .flag-tip { background: rgba(251,191,36,.25) !important; color: #fbbf24 !important; } body .flag-new { background: rgba(52,211,153,.22) !important; color: #34d399 !important; } body .flag-action { background: rgba(244,114,182,.22) !important; color: #f472b6 !important; } body .flag-custom1 { background: rgba(124,107,245,.22) !important; color: #a78bfa !important; } body .product .p .p-in { padding: 18px 18px 20px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; text-align: left !important; background: transparent !important; gap: 6px !important; } body .product .p .p-in-in, body .product .p .ratings-wrapper, body .product .p .offers, body .product .p .prices, body .product .p .prices-top, body .product .p div[data-micro="offer"] { background: transparent !important; color: var(--text) !important; width: 100% !important; } body .product .stars-wrapper { margin-bottom: 4px !important; display: flex !important; justify-content: flex-start !important; } body .product .star-on { color: #fbbf24 !important; font-size: 13px !important; } body .product .star-off { color: rgba(255,255,255,.10) !important; font-size: 13px !important; } body .product .star-half { color: #fbbf24 !important; font-size: 13px !important; } body .product .stars.star-list { display: flex !important; gap: 2px !important; } body .product .p-name, body .product .p-name span, body .product .p-name span[data-micro="name"], body .product .p .name, body .product .p .name span { font-family: var(--heading) !important; font-weight: 700 !important; font-size: 15px !important; color: #eceff8 !important; text-decoration: none !important; line-height: 1.45 !important; letter-spacing: -.01em !important; margin: 2px 0 4px !important; padding: 0 !important; background: transparent !important; display: block !important; text-align: left !important; min-height: 42px !important; } body .product .p:hover .p-name, body .product .p:hover .p-name span, body .product .p:hover .name, body .product .p:hover .name span { color: #eceff8 !important; } body .product .prices { margin: auto 0 0 !important; width: 100% !important; text-align: left !important; } body .product .prices-top { display: flex !important; justify-content: flex-start !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 8px !important; } body .product .price, body .product .price-final, body .product .price-final strong, body .product .price-additional { color: var(--green) !important; font-family: var(--heading) !important; font-weight: 800 !important; font-size: 19px !important; background: transparent !important; text-align: left !important; } body .product .price-standard-wrapper { background: transparent !important; } body .product .price-standard { color: rgba(236,239,248,.3) !important; text-decoration: line-through !important; font-size: 12px !important; font-weight: 500 !important; } body .product .price-final.action-price, body .product .action-price { color: var(--rose) !important; } body .product .p-desc, body .product .p-desc p, body .product .p-desc[data-micro="description"] { display: none !important; } body .product .availability { display: none !important; } body .product .p-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: wrap !important; width: 100% !important; margin-top: 10px !important; padding-top: 8px !important; } body .product .p-code, body .product span.p-code { display: none !important; } body .recommended-product { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 12px !important; text-align: center !important; transition: border-color .2s, transform .2s !important; } body .recommended-product:hover { border-color: rgba(52,211,153,.3) !important; transform: translateY(-3px) !important; } body .recommended-product .name, body .recommended-product .name strong { color: var(--text) !important; font-family: var(--heading) !important; font-weight: 700 !important; font-size: 13px !important; text-align: center !important; } body .recommended-product .price, body .recommended-product .price-final, body .recommended-product .price-final strong { color: var(--accent2) !important; font-family: var(--heading) !important; font-weight: 800 !important; font-size: 15px !important; text-align: center !important; } body .recommended-product img { border-radius: 10px !important; margin: 0 auto 8px !important; } @media (max-width: 1024px) { body .products, body .products-block, body .products-inline, body .homepage-products-2 { grid-template-columns: repeat(3, minmax(0, 280px)) !important; justify-content: center !important; gap: 18px !important; } } @media (max-width: 768px) { body .products, body .products-block, body .products-inline, body .homepage-products-2 { grid-template-columns: repeat(2, minmax(0, 260px)) !important; justify-content: center !important; gap: 12px !important; padding: 0 12px !important; } body .product .p .p-in { padding: 12px 14px 14px !important; } body .product .p-name, body .product .p-name span, body .product .prices, body .product .price-final, body .product .price-final strong { text-align: left !important; } } @media (max-width: 480px) { body .products, body .products-block { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 10px !important; } body .product .p .p-in { padding: 10px 12px 12px !important; } body .product .p-name, body .product .p-name span { font-size: 12px !important; min-height: 36px !important; } body .product .price-final, body .product .price-final strong { font-size: 17px !important; } } /* ══════════════════════════════════════════════════════════════ ACCESSIBILITY & PRINT ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .cosmos, .nebula-glow { display: none !important; } .sc-mq-t { animation: none !important; } .urgency-bar { animation: none !important; background-size: 100% 100% !important; } .uc-time { animation: none !important; } .sc-hero-title, .sc-trust-row, .sc-hero-btns { animation: none !important; opacity: 1 !important; transform: none !important; } .sc-btn-g, .wa-btn { animation: none !important; } .sr { opacity: 1 !important; transform: none !important; transition: none !important; } .nl-card::before { animation: none !important; } .quiz-progress-fill { animation: none !important; } body .product .p { transition: none !important; } body .product .p .p-image img { transition: none !important; } } :focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; border-radius: 4px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; } :focus:not(:focus-visible) { outline: none !important; } @media (forced-colors: active) { body .product .p { border: 2px solid CanvasText !important; } body .product .flags .flag { border: 1px solid CanvasText !important; } .sc-btn-g, .sc-btn-o { border: 2px solid LinkText !important; } .faq-item { border: 1px solid CanvasText !important; } .quiz-opt { border: 2px solid CanvasText !important; } .quiz-opt.selected { border-color: Highlight !important; } .wa-btn { border: 2px solid LinkText !important; } } @media print { body { background: #fff !important; color: #000 !important; } .cosmos, .nebula-glow, .urgency-bar, .wa-btn, .live-popup, .viewers-badge, .sc-catnav, .quiz-section, .nl-card { display: none !important; } body .product .p { background: #fff !important; border: 1px solid #ccc !important; color: #000 !important; } body .product .p-name, body .product .p-name span { color: #000 !important; } body .product .price-final, body .product .price-final strong { color: #333 !important; } #header { position: static !important; background: #fff !important; border-bottom: 1px solid #ccc !important; } #footer, footer { background: #fff !important; color: #333 !important; } a { color: #000 !important; text-decoration: underline !important; } } @supports not (backdrop-filter: blur(1px)) { #header { background: rgba(7,9,26,.98) !important; } .menu-level-2 { background: rgba(14,17,36,.99) !important; } body .product .flags .flag { background-color: rgba(0,0,0,.7) !important; } }