/* ══════════════════════════════════════════
GLOWVAULTUK — ROOT VARIABLES
══════════════════════════════════════════ */
:root {
--ink: #0F1015;
--surface: #181824;
--panel: #202033;
--border: rgba(242,166,213,0.18);
--gold: #F2A6D5;
--gold-bright:#FFC2E3;
--gold-dim: rgba(242,166,213,0.4);
--white: #FDF7FF;
--muted: #9A96B5;
--danger: #FF5C7A;
--green: #53E0B8;
--r: 255,92,140;
--b: 120,150,255;
--p: 200,130,255;
--g: 0,214,160;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
background:var(--ink);
color:var(--white);
font-family:'DM Sans',sans-serif;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;outline:none}
/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:2px}
/* ══════════════════════════════════════════
TOP STRIP
══════════════════════════════════════════ */
.topstrip{
background:var(--gold);
color:#2a1020;
font-size:11px;
font-weight:600;
letter-spacing:2.5px;
text-transform:uppercase;
text-align:center;
padding:9px 20px;
position:relative;
overflow:hidden;
}
.topstrip::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 50%,transparent 100%);
animation:shimmer 3s infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* ══════════════════════════════════════════
NAVBAR
══════════════════════════════════════════ */
.nav{
position:sticky;top:0;z-index:200;
background:rgba(15,16,21,0.94);
backdrop-filter:blur(24px);
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
padding:0 48px;
height:64px;
}
.nav-logo{
font-family:'Playfair Display',serif;
font-size:20px;letter-spacing:3px;
color:var(--gold);text-transform:uppercase;
}
.nav-logo span{font-style:italic;color:var(--white);opacity:.7;font-size:13px;margin-left:6px;letter-spacing:1px}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);transition:color .25s}
.nav-links a:hover{color:var(--gold)}
.nav-cta{
background:var(--gold);color:#2a1020;
padding:9px 24px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
transition:background .2s,transform .2s,box-shadow .2s;
}
.nav-cta:hover{background:var(--gold-bright);transform:translateY(-1px);box-shadow:0 8px 24px rgba(242,166,213,0.4)}
.cart-icon{position:relative;color:var(--muted);font-size:20px;transition:color .25s}
.cart-icon:hover{color:var(--gold)}
.cart-badge{
position:absolute;top:-6px;right:-8px;
background:var(--danger);color:#fff;
font-size:9px;font-weight:700;
width:16px;height:16px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
}
/* ══════════════════════════════════════════
BREADCRUMB
══════════════════════════════════════════ */
.breadcrumb{
padding:14px 48px;
font-size:11px;color:var(--muted);letter-spacing:1px;
border-bottom:1px solid var(--border);
display:flex;gap:8px;align-items:center;
}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{opacity:.5}
/* ══════════════════════════════════════════
PRODUCT HERO — 2-COLUMN
══════════════════════════════════════════ */
.product-hero{
display:grid;grid-template-columns:1fr 1fr;
gap:0;max-width:100%;
min-height:calc(100vh - 100px);
}
/* ─ GALLERY COLUMN ─ */
.gallery-col{
position:sticky;top:64px;
height:calc(100vh - 64px);
background:var(--surface);
overflow:hidden;
display:flex;flex-direction:column;
}
.main-image{
flex:1;position:relative;overflow:hidden;
cursor:zoom-in;
}
.main-image img{
width:100%;height:100%;object-fit:cover;
transition:transform .7s cubic-bezier(.25,.46,.45,.94),filter .3s;
filter:saturate(1.1) contrast(1.04);
}
.main-image:hover img{transform:scale(1.04)}
.img-tag{
position:absolute;bottom:20px;left:20px;
background:rgba(15,16,21,.88);border:1px solid var(--border);
color:var(--gold);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
padding:6px 14px;backdrop-filter:blur(10px);font-weight:600;
}
.img-zoom{
position:absolute;top:16px;right:16px;
background:rgba(15,16,21,.7);border:1px solid var(--border);
color:var(--muted);font-size:11px;padding:6px 12px;letter-spacing:1px;
backdrop-filter:blur(8px);transition:color .2s;
}
.main-image:hover .img-zoom{color:var(--gold)}
.thumb-row{
display:flex;gap:2px;
height:90px;background:var(--ink);
border-top:1px solid var(--border);
}
.thumb{
flex:1;overflow:hidden;position:relative;cursor:pointer;
border-top:2px solid transparent;transition:border-color .2s;
}
.thumb.active{border-top-color:var(--gold)}
.thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.8);transition:filter .3s}
.thumb:hover img,.thumb.active img{filter:brightness(1)}
/* ─ INFO COLUMN ─ */
.info-col{
padding:52px 56px 80px;
background:var(--ink);
overflow-y:auto;
max-height:calc(100vh - 64px);
position:relative;
}
.info-col::-webkit-scrollbar{width:0}
/* badges */
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.badge{
font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
padding:5px 12px;border-radius:2px;
}
.badge-hot{background:rgba(255,92,140,.1);color:var(--danger);border:1px solid rgba(255,92,140,.4)}
.badge-cert{background:rgba(83,224,184,.08);color:var(--green);border:1px solid rgba(83,224,184,.35)}
.badge-new{background:rgba(242,166,213,.1);color:var(--gold);border:1px solid var(--border)}
/* title */
.product-brand{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.product-title{
font-family:'Playfair Display',serif;
font-size:clamp(28px,3.5vw,44px);
font-weight:500;line-height:1.15;
margin-bottom:16px;
}
.product-title em{font-style:italic;color:var(--gold)}
/* stars */
.star-row{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.stars{color:var(--gold);font-size:15px;letter-spacing:2px}
.star-count{font-size:12px;color:var(--muted);font-family:'DM Mono',monospace}
.star-count span{color:var(--white);font-weight:600}
/* price */
.price-block{
background:var(--panel);border:1px solid var(--border);
padding:24px 28px;margin-bottom:28px;
position:relative;overflow:hidden;
}
.price-block::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.price-now{
font-family:'Playfair Display',serif;
font-size:52px;font-weight:700;color:var(--gold);line-height:1;
}
.price-was{font-size:22px;color:var(--muted);text-decoration:line-through;font-family:'Playfair Display',serif}
.price-save{
background:var(--danger);color:#fff;
font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
padding:4px 10px;
}
.price-sub{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.price-sub .klarna{color:#FFB3C7;font-weight:600}
/* stock */
.stock-row{
display:flex;align-items:center;gap:10px;
margin-bottom:20px;
font-size:12px;letter-spacing:1px;text-transform:uppercase;
}
.stock-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);animation:blink 1.5s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.stock-text{color:var(--danger);font-weight:600}
.stock-bar-wrap{flex:1;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;max-width:120px}
.stock-fill{height:100%;width:23%;background:var(--danger)}
/* qty + CTA */
.qty-cta{display:flex;gap:12px;align-items:stretch;margin-bottom:16px}
.qty-picker{
display:flex;align-items:center;gap:0;
border:1px solid var(--border);background:var(--panel);
}
.qty-btn{
width:40px;height:100%;background:transparent;color:var(--white);
font-size:18px;display:flex;align-items:center;justify-content:center;
transition:background .2s,color .2s;
}
.qty-btn:hover{background:rgba(242,166,213,.12);color:var(--gold)}
.qty-num{
width:44px;text-align:center;
font-family:'DM Mono',monospace;font-size:15px;
color:var(--white);background:transparent;border:none;outline:none;
border-left:1px solid var(--border);border-right:1px solid var(--border);
}
.btn-cart{
flex:1;background:var(--gold);color:#2a1020;
font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
padding:16px 28px;
position:relative;overflow:hidden;transition:all .3s;
}
.btn-cart::after{
content:'';position:absolute;inset:0;
background:rgba(255,255,255,.15);
transform:translateX(-100%);transition:transform .35s;
}
.btn-cart:hover{background:var(--gold-bright);transform:translateY(-1px);box-shadow:0 16px 48px rgba(242,166,213,.35)}
.btn-cart:hover::after{transform:translateX(0)}
.btn-wishlist{
width:52px;border:1px solid var(--border);background:var(--panel);
color:var(--muted);font-size:20px;
display:flex;align-items:center;justify-content:center;
transition:all .2s;
}
.btn-wishlist:hover{border-color:var(--gold);color:var(--gold)}
.btn-buynow{
width:100%;border:1px solid var(--gold);color:var(--gold);background:transparent;
font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
padding:14px;margin-bottom:28px;
transition:all .3s;
}
.btn-buynow:hover{background:rgba(242,166,213,.08)}
/* pay icons */
.pay-strip{
display:flex;align-items:center;gap:8px;
padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
margin-bottom:28px;flex-wrap:wrap;
}
.pay-label{font-size:10px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-right:4px}
.pay-icon{
background:var(--panel);border:1px solid var(--border);
padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:1px;
color:var(--muted);transition:color .2s,border-color .2s;
}
.pay-icon:hover{color:var(--gold);border-color:var(--gold-dim)}
/* benefits */
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
.benefit-item{
display:flex;gap:10px;align-items:flex-start;
padding:14px;background:var(--panel);border:1px solid var(--border);
transition:border-color .2s;
}
.benefit-item:hover{border-color:var(--gold-dim)}
.benefit-icon{font-size:20px;flex-shrink:0}
.benefit-title{font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:3px}
.benefit-desc{font-size:11px;color:var(--muted);line-height:1.5}
/* accordion */
.accord-wrap{border-top:1px solid var(--border)}
.accord-item{border-bottom:1px solid var(--border)}
.accord-head{
display:flex;justify-content:space-between;align-items:center;
padding:16px 0;cursor:pointer;
font-size:13px;font-weight:600;letter-spacing:.3px;
transition:color .2s;user-select:none;
}
.accord-head:hover{color:var(--gold)}
.accord-head.open{color:var(--gold)}
.accord-icon{
width:24px;height:24px;border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:16px;color:var(--gold);font-family:'Playfair Display',serif;
transition:all .3s;flex-shrink:0;
}
.accord-head.open .accord-icon{background:var(--gold);color:#2a1020}
.accord-body{
max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s;
font-size:13px;color:var(--muted);line-height:1.8;font-weight:300;
}
.accord-body.open{max-height:300px;padding-bottom:18px}
/* ══════════════════════════════════════════
VIDEO SECTION
══════════════════════════════════════════ */
.video-section{
background:var(--surface);
padding:100px 0;
border-top:1px solid var(--border);
}
.section-wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.section-eyebrow{
font-size:10px;letter-spacing:4px;text-transform:uppercase;
color:var(--gold);font-weight:600;margin-bottom:14px;
display:flex;align-items:center;gap:12px;
}
.section-eyebrow::before{content:'';width:32px;height:1px;background:var(--gold)}
.section-heading{
font-family:'Playfair Display',serif;
font-size:clamp(32px,4vw,56px);font-weight:500;
line-height:1.1;margin-bottom:16px;
}
.section-heading em{font-style:italic;color:var(--gold)}
.video-layout{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:start;margin-top:52px}
.video-player{
position:relative;aspect-ratio:16/9;overflow:hidden;
border:1px solid var(--border);
box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(242,166,213,.08);
}
.video-player video{width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(1.15)}
.video-overlay{
position:absolute;inset:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(200,130,255,.16) 0%,rgba(15,16,21,.42) 70%);
gap:16px;transition:opacity .3s;
}
.video-overlay.hidden{opacity:0;pointer-events:none}
.play-outer{
width:80px;height:80px;border-radius:50%;
border:1.5px solid var(--gold);
display:flex;align-items:center;justify-content:center;
background:rgba(15,16,21,.6);backdrop-filter:blur(8px);
cursor:pointer;position:relative;transition:transform .3s;
}
.play-outer::before{
content:'';position:absolute;inset:-10px;border-radius:50%;
border:1px solid rgba(242,166,213,.3);animation:ringOut 2.5s ease infinite;
}
@keyframes ringOut{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}
.play-outer:hover{transform:scale(1.08)}
.play-tri{
font-size:24px;color:var(--gold);margin-left:4px;
}
.video-caption{
font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);
background:rgba(15,16,21,.8);padding:6px 16px;border:1px solid rgba(242,166,213,.3);
backdrop-filter:blur(8px);
}
/* video side cards */
.video-side{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.vside-card{
background:var(--panel);border:1px solid var(--border);
padding:22px;transition:border-color .3s;cursor:pointer;
}
.vside-card:hover{border-color:var(--gold-dim)}
.vside-card.active{border-color:var(--gold)}
.vside-num{
font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;
color:var(--gold);margin-bottom:10px;
}
.vside-title{font-size:15px;font-weight:600;margin-bottom:6px;font-family:'Playfair Display',serif}
.vside-desc{font-size:12px;color:var(--muted);line-height:1.6}
.vside-time{
display:inline-block;margin-top:10px;
font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;
color:var(--muted);background:var(--ink);padding:3px 8px;
}
/* ══════════════════════════════════════════
LED COLORS — INTERACTIVE
══════════════════════════════════════════ */
.led-section{
padding:100px 0;background:var(--ink);
border-top:1px solid var(--border);
}
.led-grid{
display:grid;grid-template-columns:repeat(7,1fr);
gap:2px;margin-top:52px;
}
.led-card{
background:var(--panel);padding:28px 16px;text-align:center;
cursor:pointer;position:relative;overflow:hidden;
border:1px solid var(--border);border-top:3px solid transparent;
transition:all .35s;
}
.led-card:hover,.led-card.active{transform:translateY(-6px);border-color:rgba(253,247,255,.18)}
.led-bulb{
width:48px;height:48px;border-radius:50%;
margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
font-size:18px;position:relative;transition:box-shadow .35s;
}
.led-bulb::after{
content:'';position:absolute;inset:-6px;border-radius:50%;
opacity:0;filter:blur(8px);transition:opacity .35s;
}
.led-card:hover .led-bulb::after,.led-card.active .led-bulb::after{opacity:.55}
.c-red {background:rgba(255,92,140,.2);box-shadow:0 0 24px rgba(255,92,140,.4);--lc:#FF5C8C}
.c-red::after{background:#FF5C8C}
.c-orange{background:rgba(255,140,0,.2);box-shadow:0 0 24px rgba(255,140,0,.4);--lc:#FF8C00}
.c-orange::after{background:#FF8C00}
.c-yellow{background:rgba(255,215,0,.2);box-shadow:0 0 24px rgba(255,215,0,.4);--lc:#FFD700}
.c-yellow::after{background:#FFD700}
.c-green {background:rgba(0,214,160,.2);box-shadow:0 0 24px rgba(0,214,160,.4);--lc:#00D6A0}
.c-green::after{background:#00D6A0}
.c-blue {background:rgba(120,150,255,.2);box-shadow:0 0 24px rgba(120,150,255,.4);--lc:#7896FF}
.c-blue::after{background:#7896FF}
.c-purple{background:rgba(200,130,255,.2);box-shadow:0 0 24px rgba(200,130,255,.4);--lc:#C882FF}
.c-purple::after{background:#C882FF}
.c-pink {background:rgba(255,140,200,.2);box-shadow:0 0 24px rgba(255,140,200,.4);--lc:#FF8CC8}
.c-pink::after{background:#FF8CC8}
.led-name{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px}
.led-benefit{font-size:11px;color:var(--muted);line-height:1.5}
.led-card:hover .led-name,.led-card.active .led-name{color:var(--gold)}
.led-card:hover .led-benefit,.led-card.active .led-benefit{color:var(--white)}
.led-card[data-c="red"]:hover,.led-card[data-c="red"].active{border-top-color:#FF5C8C}
.led-card[data-c="orange"]:hover,.led-card[data-c="orange"].active{border-top-color:#FF8C00}
.led-card[data-c="yellow"]:hover,.led-card[data-c="yellow"].active{border-top-color:#FFD700}
.led-card[data-c="green"]:hover,.led-card[data-c="green"].active{border-top-color:#00D6A0}
.led-card[data-c="blue"]:hover,.led-card[data-c="blue"].active{border-top-color:#7896FF}
.led-card[data-c="purple"]:hover,.led-card[data-c="purple"].active{border-top-color:#C882FF}
.led-card[data-c="pink"]:hover,.led-card[data-c="pink"].active{border-top-color:#FF8CC8}
/* ══════════════════════════════════════════
HOW IT WORKS
══════════════════════════════════════════ */
.how-section{
padding:100px 0;background:var(--surface);
border-top:1px solid var(--border);
}
.steps-row{
display:grid;grid-template-columns:repeat(3,1fr);
gap:2px;margin-top:52px;
}
.step{
background:var(--panel);padding:48px 36px;
border:1px solid var(--border);
position:relative;overflow:hidden;transition:border-color .3s;
}
.step::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
transform:scaleX(0);transition:transform .4s;transform-origin:left;
}
.step:hover{border-color:rgba(242,166,213,.32)}
.step:hover::before{transform:scaleX(1)}
.step-num{
font-family:'Playfair Display',serif;
font-size:80px;font-weight:700;
color:rgba(242,166,213,.09);
line-height:1;position:absolute;top:16px;right:24px;
transition:color .3s;
}
.step:hover .step-num{color:rgba(242,166,213,.16)}
.step-icon{font-size:36px;margin-bottom:24px}
.step-title{
font-family:'Playfair Display',serif;font-size:22px;
margin-bottom:12px;
}
.step-desc{font-size:13px;color:var(--muted);line-height:1.8}
/* ══════════════════════════════════════════
BEFORE / AFTER
══════════════════════════════════════════ */
.ba-section{
padding:100px 0;background:var(--ink);
border-top:1px solid var(--border);
}
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.ba-card{
background:var(--panel);border:1px solid var(--border);
overflow:hidden;transition:border-color .3s,transform .3s;
}
.ba-card:hover{border-color:rgba(242,166,213,.35);transform:translateY(-4px)}
.ba-imgs{display:flex;position:relative}
.ba-half{flex:1;aspect-ratio:.85;overflow:hidden;position:relative}
.ba-half img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ba-card:hover .ba-half img{transform:scale(1.04)}
.ba-half-label{
position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
padding:4px 10px;white-space:nowrap;
}
.before-lbl{background:rgba(15,16,21,.82);color:var(--muted);border:1px solid rgba(253,247,255,.12)}
.after-lbl{background:rgba(242,166,213,.22);color:var(--gold);border:1px solid rgba(242,166,213,.5)}
.ba-divider{
position:absolute;left:50%;top:0;bottom:0;width:2px;
background:var(--gold);z-index:3;
}
.ba-divider::after{
content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:28px;height:28px;background:var(--gold);color:#2a1020;
display:flex;align-items:center;justify-content:center;
border-radius:50%;font-size:11px;font-weight:700;
box-shadow:0 4px 16px rgba(242,166,213,.7);
}
.ba-info{padding:18px 20px}
.ba-result{font-size:13px;font-weight:600;color:var(--gold);margin-bottom:4px}
.ba-person{font-size:11px;color:var(--muted);letter-spacing:.5px}
.ba-mode{
display:inline-flex;align-items:center;gap:5px;
font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
color:var(--muted);margin-top:8px;
}
.ba-mode-dot{width:7px;height:7px;border-radius:50%}
/* ══════════════════════════════════════════
REVIEWS
══════════════════════════════════════════ */
.reviews-section{
padding:100px 0;background:var(--surface);
border-top:1px solid var(--border);
}
.review-summary{
display:flex;gap:48px;align-items:center;
margin-bottom:52px;padding-bottom:40px;
border-bottom:1px solid var(--border);
flex-wrap:wrap;
}
.review-big-score{
font-family:'Playfair Display',serif;
font-size:80px;font-weight:700;color:var(--gold);line-height:1;
}
.review-meta{flex:1;min-width:200px}
.review-stars-big{color:var(--gold);font-size:22px;letter-spacing:3px;margin-bottom:6px}
.review-total{font-size:13px;color:var(--muted);letter-spacing:.5px}
.review-bars{flex:2;min-width:280px;display:flex;flex-direction:column;gap:8px}
.rbar-row{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.rbar-track{flex:1;height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.rbar-fill{height:100%;background:var(--gold);border-radius:2px}
.rbar-count{min-width:28px;text-align:right;font-family:'DM Mono',monospace;font-size:11px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review-card{
background:var(--panel);border:1px solid var(--border);
padding:32px;transition:border-color .3s;
}
.review-card:hover{border-color:rgba(242,166,213,.3)}
.rc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.rc-avatar{
width:44px;height:44px;border-radius:50%;
background:var(--ink);border:1px solid rgba(242,166,213,.4);
display:flex;align-items:center;justify-content:center;
font-family:'Playfair Display',serif;font-size:20px;color:var(--gold);
}
.rc-author{margin-left:12px;flex:1}
.rc-name{font-size:13px;font-weight:600;letter-spacing:.3px}
.rc-loc{font-size:11px;color:var(--muted);margin-top:2px}
.rc-verified{font-size:9px;color:var(--green);letter-spacing:1px;text-transform:uppercase;font-weight:700}
.rc-stars{color:var(--gold);font-size:13px;letter-spacing:1.5px}
.rc-text{
font-family:'Playfair Display',serif;font-style:italic;
font-size:15px;line-height:1.7;color:var(--white);opacity:.9;
margin-bottom:16px;
}
.rc-date{font-size:11px;color:var(--muted);font-family:'DM Mono',monospace;letter-spacing:1px}
.rc-helpful{
font-size:11px;color:var(--muted);margin-top:12px;
display:flex;align-items:center;gap:6px;
}
.rc-helpful button{
background:rgba(255,255,255,.05);border:1px solid var(--border);
color:var(--muted);font-size:11px;padding:3px 10px;
transition:all .2s;font-family:'DM Sans',sans-serif;
}
.rc-helpful button:hover{border-color:var(--gold);color:var(--gold)}
/* ══════════════════════════════════════════
TRUST + GUARANTEE
══════════════════════════════════════════ */
.trust-section{
padding:80px 0;background:var(--ink);
border-top:1px solid var(--border);
}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:0}
.trust-item{
padding:40px 32px;text-align:center;
border:1px solid var(--border);background:var(--panel);
transition:border-color .3s;
}
.trust-item:hover{border-color:rgba(242,166,213,.3)}
.trust-ico{font-size:36px;margin-bottom:16px;display:block}
.trust-title{
font-family:'Playfair Display',serif;font-size:18px;
margin-bottom:8px;
}
.trust-desc{font-size:12px;color:var(--muted);line-height:1.7;font-weight:300}
/* ══════════════════════════════════════════
STICKY ADD TO CART
══════════════════════════════════════════ */
.sticky-bar{
position:fixed;bottom:0;left:0;right:0;z-index:300;
background:rgba(15,16,21,.96);backdrop-filter:blur(20px);
border-top:1px solid var(--border);
padding:14px 48px