/* ============================================================
SPACE CBD — Shoptet Skin v6 DEEP SPACE × CANNA FUSION
Extracted from spacecbd-site.html + Shoptet Waltz overrides
Nacist pres v — viz NAVOD.txt
============================================================ */
/* Fonty se nacitaji pres v — viz NAVOD.txt */
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
--bg: #080b18;
--surface: #0e1124;
--surface2: #131729;
--card: #131628;
--border: rgba(255,255,255,.06);
--text: #eceff8;
--text2: rgba(236,239,248,.52);
--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: var(--accent); 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; }
/* Header logo sizing fix */
.site-name img {
width: auto;
max-width: 300px;
max-height: 80px;
height: auto;
}
/* Elegant scrollbar */
::-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; }
/* ============================================================
HERO SECTION — JS-injected on homepage
============================================================ */
.sc-hero {
text-align: center; 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; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 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; gap: 12px; justify-content: center; flex-wrap: wrap;
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;
font-family: var(--heading); font-weight: 700; font-size: 15px;
display: inline-flex; align-items: center; gap: 8px;
border-radius: 50px; cursor: pointer;
transition: transform .2s, box-shadow .25s;
text-decoration: none;
animation: cannaPulse 2.5s ease infinite;
}
.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: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.15);
padding: 16px 32px; font-weight: 600; font-size: 15px;
display: inline-flex; align-items: center; gap: 8px;
border-radius: 50px; transition: border-color .2s, color .2s, transform .2s; cursor: pointer;
text-decoration: none;
}
.sc-btn-o:hover { border-color: var(--accent); color: var(--accent2); transform: translateY(-2px); }
/* ============================================================
CATEGORY NAV
============================================================ */
.sc-catnav {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
padding: 30px 28px; position: relative; z-index: 10;
}
.sc-cat {
display: inline-flex; align-items: center; gap: 8px;
background: var(--card); border: 1px solid var(--border);
border-radius: 999px; padding: 10px 20px;
font-size: 13px; font-weight: 600; color: var(--text2);
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; }
/* ============================================================
REVIEWS MARQUEE
============================================================ */
.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); }
/* ============================================================
TRUST SECTION
============================================================ */
.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; }
/* ============================================================
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-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-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; }
.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); }
/* ============================================================
WHATSAPP BUTTON
============================================================ */
.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 PURCHASE POPUP
============================================================ */
.live-popup {
position: fixed; bottom: 100px; left: 24px; z-index: 1050;
background: var(--surface); 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-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); 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; }
/* ============================================================
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 (JS-injected over Shoptet 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
============================================================ */
@media (max-width: 1024px) {
.guarantees-grid { grid-template-columns: repeat(2, 1fr); }
.stats-inner { grid-template-columns: repeat(2, 1fr); }
.sc-trust-g { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.sc-hero { padding: 60px 20px 30px; }
.sc-hero-title { font-size: 2.2rem; }
.sc-trust-g { grid-template-columns: repeat(2, 1fr); }
.quiz-options { grid-template-columns: 1fr; }
.nl-form { flex-direction: column; }
.trust-inner { gap: 18px; }
}
@media (max-width: 480px) {
.guarantees-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; }
.sc-cat { padding: 8px 14px; font-size: 11px; }
}
/* ============================================================
SHOPTET WALTZ TEMPLATE — FULL DARK MODE OVERRIDES
Live: Waltz template-10, body classes: in-index type-index
Real Shoptet classes from spacecbd.cz scrape 2026-04-01
============================================================ */
/* ── Override Shoptet native CSS variables ── */
: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: #080b18 !important;
--template-font: "DM Sans" !important;
--template-headings-font: "Plus Jakarta Sans" !important;
}
/* ── Overall wrapper & body ── */
.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;
}
/* ── Top info bar (site-msg) ── */
.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 title — hidden (replaced by JS hero) ── */
.header-title { display: none !important; }
/* ── Lazy load SVG placeholders ── */
.p-image img[src^="data:image/svg"] { background: rgba(255,255,255,.04) !important; min-height: 200px !important; }
/* ── Product images ── */
.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; }
/* ── Content area on homepage — transparent for cosmos ── */
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; }
/* Product grid + buttons + quantity — see SHOPTET PRODUCTS section below */
/* ── Homepage text content ── */
.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; }
/* ── Header / Navigation ── */
#header {
background: rgba(8,11,24,.94) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important; position: sticky !important; top: 0 !important; z-index: 200 !important;
}
#header .container, #header .navigation-wrapper, #header .header-navigation { background: transparent !important; }
.site-name { display: flex !important; align-items: center !important; }
.site-name a { display: flex !important; align-items: center !important; }
.site-name img { max-height: 50px !important; width: auto !important; filter: brightness(1.1) !important; }
.navigation-buttons a, .navigation-buttons button, .top-nav-button { color: var(--text) !important; transition: color .15s !important; }
.navigation-buttons a:hover, .navigation-buttons button:hover { color: var(--green) !important; }
.navigation-buttons a::before, .navigation-buttons button::before, .top-nav-button::before { color: inherit !important; }
#navigation, .navigation-in, .navigation-in.menu { background: transparent !important; }
.menu-level-1 > li > a { color: var(--text) !important; font-family: var(--heading) !important; font-weight: 600 !important; font-size: 14px !important; padding: 8px 14px !important; border-radius: 8px !important; transition: color .15s, background .15s !important; }
.menu-level-1 > li > a b { font-weight: 600 !important; }
.menu-level-1 > li > a:hover, .menu-level-1 > li.active > a { color: var(--green) !important; background: rgba(255,255,255,.06) !important; }
.menu-helper { background: transparent !important; color: var(--text2) !important; }
.menu-level-2 { background: rgba(14,17,36,.96) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; box-shadow: 0 16px 48px rgba(0,0,0,.5) !important; }
.menu-level-2 a { color: var(--text) !important; }
.menu-level-2 a:hover { color: var(--green) !important; background: rgba(255,255,255,.04) !important; }
/* ── Search widget ── */
.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, .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, .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 areas ── */
#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 th, #content label, #content span, #content .description, .content-wrapper p, .content-wrapper li, .content-wrapper td, .content-wrapper th { color: var(--text2) !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 ── */
.breadcrumbs, .breadcrumb, #content .breadcrumbs, .content-wrapper .breadcrumbs { color: var(--text2) !important; }
.breadcrumbs a, .breadcrumb a { color: var(--accent2) !important; }
.breadcrumbs a:hover, .breadcrumb a:hover { color: var(--green) !important; }
/* ── Product cards ── */
.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 cards — see SHOPTET PRODUCTS section below */
/* ── Product list / detail ── */
.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, .sidebar-box, .sidebar-filter, .filter { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text2) !important; }
.sidebar h3, .sidebar-box h3, .filter h3 { color: var(--text) !important; font-family: var(--heading) !important; }
.sidebar a { color: var(--text2) !important; }
.sidebar a:hover { color: var(--green) !important; }
/* ── Sorting / Pagination ── */
.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; }
.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 header ── */
.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; }
/* ── Buttons — CTA ── */
.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;
}
/* ── Forms / Inputs ── */
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 ── */
.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 { color: var(--text) !important; }
.cart-table .name a: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; }
/* ── Tables ── */
.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 ── */
.related-products { background: transparent !important; border: none !important; }
.related-products h2 { color: var(--text) !important; font-family: var(--heading) !important; }
/* ── Flash messages ── */
.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 / Modal ── */
.colorbox-html-content, #cboxContent, #cboxLoadedContent { background: var(--surface) !important; color: var(--text) !important; border-radius: var(--radius) !important; }
/* ── Footer ── */
#footer, footer, .footer-rows, .footer-bottom, .footer-links, .copyright { background: rgba(8,11,24,.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; }
/* ── Shoptet carousel ── */
.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 selector ── */
.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 consent ── */
.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; }
/* ── Shoptet native sections ── */
.categories, #cat-manufacturers { background: transparent !important; }
/* ══════════════════════════════════════════════════════════════
SHOPTET PRODUCTS — COMPLETE PRODUCT CARD SYSTEM
Center-aligned, uniform cards, all Shoptet Waltz classes
Real DOM: .products > .product > .p > .p-image + .flags + .p-in
══════════════════════════════════════════════════════════════ */
/* ── 1. HOMEPAGE HEADING ── */
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 0 32px !important;
padding: 40px 20px 0 !important;
position: relative !important;
z-index: 10 !important;
}
/* ── 2. GRID CONTAINER — true center ── */
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;
}
/* ── 3. PRODUCT WRAPPER — reset Shoptet defaults ── */
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;
}
/* ── 4. THE CARD — .p[data-micro="product"] ── */
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;
}
/* ── 5. IMAGE — a.p-image > img ── */
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;
}
/* Lazy-load SVG placeholder */
body .product .p .p-image img[src^="data:image/svg"] {
background: rgba(255,255,255,.03) !important;
min-height: 200px !important;
}
/* ── 6. FLAGS — .flags > .flag.flag-tip / .flag-new / .flag-action / .flag-custom1 ── */
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; }
/* ── 7. INNER CONTENT — .p-in (center-aligned text) ── */
body .product .p .p-in {
padding: 16px 18px 18px !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
background: transparent !important;
}
/* Reset all child backgrounds */
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;
}
/* ── 8. STARS — .stars-wrapper > .stars.star-list > .star ── */
body .product .stars-wrapper {
margin-bottom: 6px !important;
display: flex !important;
justify-content: center !important;
}
body .product .star-on { color: #fbbf24 !important; }
body .product .star-off { color: rgba(255,255,255,.10) !important; }
body .product .star-half { color: #fbbf24 !important; }
body .product .stars.star-list {
display: flex !important;
gap: 1px !important;
}
/* ── 9. NAME — a.p-name > span[data-micro="name"] ── */
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: 14px !important;
color: #eceff8 !important;
text-decoration: none !important;
line-height: 1.35 !important;
margin-bottom: 6px !important;
background: transparent !important;
display: block !important;
text-align: center !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;
}
/* ── 10. PRICE — .prices > .prices-top > .price.price-final > strong ── */
body .product .prices {
margin-bottom: 4px !important;
width: 100% !important;
text-align: center !important;
}
body .product .prices-top {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
body .product .price,
body .product .price-final,
body .product .price-final strong,
body .product .price-additional {
color: #a78bfa !important;
font-family: var(--heading) !important;
font-weight: 800 !important;
font-size: 20px !important;
background: transparent !important;
text-align: center !important;
}
body .product .price-standard-wrapper { background: transparent !important; }
body .product .price-standard {
color: rgba(236,239,248,.35) !important;
text-decoration: line-through !important;
font-size: 13px !important;
}
body .product .price-final.action-price,
body .product .action-price {
color: #f472b6 !important;
}
/* ── 11. HIDDEN IN CARD — clean look: image + name + price only ── */
/* Description — hidden */
body .product .p-desc,
body .product .p-desc p,
body .product .p-desc[data-micro="description"] {
display: none !important;
}
/* Availability — hidden */
body .product .availability {
display: none !important;
}
/* Bottom tools (quantity + buttons) — hidden */
body .product .p-bottom {
display: none !important;
}
/* Product code — hidden */
body .product .p-code,
body .product span.p-code {
display: none !important;
}
/* ── 19. RECOMMENDED PRODUCTS — .recommended-product (sidebar cards) ── */
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;
}
/* ── 20. RESPONSIVE GRID ── */
@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;
}
}
@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;
}
body .product .price-final,
body .product .price-final strong {
font-size: 17px !important;
}
}
/* ══════════════════════════════════════════════════════════════
ACCESSIBILITY, COMPATIBILITY & PRINT
══════════════════════════════════════════════════════════════ */
/* ── Reduced motion — disable ALL animations ── */
@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 { animation: none !important; opacity: 1 !important; transform: none !important; }
.sc-trust-row { animation: none !important; opacity: 1 !important; transform: none !important; }
.sc-hero-btns { animation: none !important; opacity: 1 !important; transform: none !important; }
.sc-btn-g { animation: none !important; }
.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 — keyboard navigation ── */
: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;
}
/* Hide outline on mouse click */
:focus:not(:focus-visible) {
outline: none !important;
}
/* ── Forced colors / high contrast mode ── */
@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; }
}
/* ── Print — readable output ── */
@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; }
}
/* ── Backdrop-filter fallback ── */
@supports not (backdrop-filter: blur(1px)) {
#header { background: rgba(8,11,24,.98) !important; }
.menu-level-2 { background: rgba(14,17,36,.99) !important; }
body .product .flags .flag { background-color: rgba(0,0,0,.7) !important; }
}