/* ============ VOZRAX LUXURY HOME (theme section) ============ */
.vz-home{
  --vz-gold:#D4AF37; --vz-gold-l:#E8C766; --vz-gold-d:#A88A2A;
  --vz-black:#060608; --vz-dark:#0E0E11; --vz-gray:#17171B; --vz-line:rgba(212,175,55,.16);
  --vz-light:#F5F5F7; --vz-muted:#9A9AA4;
  background:var(--vz-black); color:var(--vz-light);
  font-family:'Cairo','Tajawal',system-ui,sans-serif;
  overflow-x:hidden;
}
.vz-home *{box-sizing:border-box;}
.vz-home img{max-width:100%;display:block;}

/* ---------- HERO ---------- */
.vz-hero{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(40px,5vw,72px) 20px clamp(36px,4.5vw,60px);overflow:hidden;text-align:center;}
.vz-hero-bg{position:absolute;inset:0;overflow:hidden;}
.vz-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;}
.vz-orb-1{width:40vw;height:40vw;max-width:520px;max-height:520px;
  background:radial-gradient(circle,rgba(212,175,55,.55),transparent 68%);
  top:-16%;right:-10%;animation:vz-float 16s ease-in-out infinite;}
.vz-orb-2{width:34vw;height:34vw;max-width:440px;max-height:440px;
  background:radial-gradient(circle,rgba(168,138,42,.42),transparent 70%);
  bottom:-18%;left:-12%;animation:vz-float 21s ease-in-out infinite reverse;}
@keyframes vz-float{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-24px,26px) scale(1.08);}}
.vz-grid-lines{position:absolute;inset:0;
  background-image:linear-gradient(rgba(212,175,55,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(212,175,55,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 42%,#000 18%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 18%,transparent 76%);}
.vz-hero-inner{position:relative;z-index:2;max-width:640px;margin:0 auto;}
.vz-eyebrow{display:inline-block;font-size:clamp(10px,1.2vw,12.5px);letter-spacing:.42em;color:var(--vz-gold);
  border:1px solid var(--vz-line);border-radius:50px;padding:9px 22px;margin-bottom:28px;
  background:rgba(212,175,55,.05);}
.vz-h1{font-size:clamp(34px,6.4vw,72px);line-height:1.08;font-weight:900;margin:0 0 18px;
  letter-spacing:-.02em;color:#fff;}
.vz-h1 em{font-style:normal;
  background:linear-gradient(105deg,var(--vz-gold-d) 0%,var(--vz-gold-l) 45%,var(--vz-gold) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.vz-lead{font-size:clamp(14px,1.85vw,19px);line-height:1.95;color:#C8C8D0;
  max-width:660px;margin:0 auto 38px;}
.vz-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:0;}
.vz-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 38px;border-radius:50px;
  font-size:15px;font-weight:800;text-decoration:none;transition:.32s cubic-bezier(.2,.7,.3,1);
  border:1.5px solid transparent;cursor:pointer;}
.vz-btn-gold{background:linear-gradient(135deg,var(--vz-gold-l),var(--vz-gold));color:#0A0A0C;
  box-shadow:0 12px 34px rgba(212,175,55,.26);}
.vz-btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(212,175,55,.42);}
.vz-btn-ghost{background:transparent;color:var(--vz-gold);border-color:var(--vz-line);}
.vz-btn-ghost:hover{background:var(--vz-gold);color:#0A0A0C;border-color:var(--vz-gold);transform:translateY(-3px);}
.vz-btn-lg{padding:18px 52px;font-size:16.5px;}
.vz-hero-stats{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--vz-muted);margin-top:26px;}
.vz-stat b{color:var(--vz-gold);font-weight:900;font-size:17px;margin-inline-end:5px;}
.vz-stat-sep{width:1px;height:16px;background:var(--vz-line);}

/* ---------- MARQUEE ---------- */
.vz-marquee{background:linear-gradient(90deg,var(--vz-gold-d),var(--vz-gold),var(--vz-gold-d));
  padding:13px 0;overflow:hidden;}
.vz-mq-track{display:flex;white-space:nowrap;animation:vz-scroll 34s linear infinite;width:max-content;}
.vz-mq-item{color:#0A0A0C;font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;
  gap:26px;padding-inline-end:26px;}
.vz-mq-dot{font-size:9px;opacity:.6;}
@keyframes vz-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- SECTIONS ---------- */
.vz-sec{padding:clamp(52px,7.5vw,104px) 20px;max-width:1440px;margin:0 auto;}
.vz-sec-alt{background:var(--vz-dark);max-width:none;border-block:1px solid var(--vz-line);}
.vz-sec-alt > *{max-width:1440px;margin-inline:auto;}
.vz-sec-head{text-align:center;margin-bottom:clamp(30px,4.4vw,56px);}
.vz-kicker{display:block;font-size:11.5px;letter-spacing:.34em;color:var(--vz-gold);
  margin-bottom:12px;font-weight:700;}
.vz-h2{font-size:clamp(25px,4vw,48px);font-weight:900;color:#fff;margin:0 0 12px;
  line-height:1.2;letter-spacing:-.01em;}
.vz-sub{font-size:clamp(13.5px,1.55vw,16.5px);color:var(--vz-muted);margin:0;line-height:1.8;}

/* ---------- CATEGORIES ---------- */
.vz-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.vz-cat{position:relative;display:block;height:clamp(190px,20vw,260px);border-radius:20px;overflow:hidden;
  text-decoration:none;border:1px solid var(--vz-line);
  background-color:var(--vz-gray);background-size:cover;background-position:center;
  transition:.4s cubic-bezier(.2,.7,.3,1);}
.vz-cat::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,8,.15) 0%,rgba(6,6,8,.72) 52%,rgba(6,6,8,.96) 100%);
  transition:.4s;}
.vz-cat:hover{transform:translateY(-7px);border-color:var(--vz-gold);box-shadow:0 26px 58px rgba(0,0,0,.6);}
.vz-cat:hover::before{background:linear-gradient(180deg,rgba(6,6,8,.05) 0%,rgba(6,6,8,.6) 50%,rgba(6,6,8,.94) 100%);}
.vz-cat-shade{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 120%,rgba(212,175,55,.26),transparent 62%);
  opacity:0;transition:.4s;}
.vz-cat:hover .vz-cat-shade{opacity:1;}
.vz-cat-body{position:absolute;inset-inline:0;bottom:0;padding:22px 22px 24px;
  display:flex;flex-direction:column;gap:6px;z-index:2;}
.vz-cat-name{color:#fff;font-size:clamp(16px,1.75vw,21px);font-weight:900;line-height:1.35;}
.vz-cat-count{color:var(--vz-gold);font-size:12.5px;font-weight:700;}
.vz-cat-arrow{position:absolute;inset-inline-end:20px;bottom:22px;color:var(--vz-gold);
  font-size:19px;opacity:0;transform:translateX(10px);transition:.34s;}
.vz-cat:hover .vz-cat-arrow{opacity:1;transform:translateX(0);}

/* ---------- PRODUCT GRID ---------- */
.vz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.vz-card{display:flex;flex-direction:column;background:var(--vz-gray);border:1px solid var(--vz-line);
  border-radius:20px;overflow:hidden;text-decoration:none;position:relative;
  transition:.4s cubic-bezier(.2,.7,.3,1);}
.vz-card:hover{transform:translateY(-8px);border-color:var(--vz-gold);
  box-shadow:0 28px 62px rgba(0,0,0,.62);}
.vz-card-media{display:block;position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:var(--vz-dark);}
.vz-card-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .62s cubic-bezier(.2,.7,.3,1);}
.vz-card:hover .vz-card-media img{transform:scale(1.09);}
.vz-card-ph{display:block;width:100%;height:100%;background:
  linear-gradient(135deg,var(--vz-dark),var(--vz-gray));}
.vz-card-glow{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(6,6,8,.55));opacity:0;transition:.4s;}
.vz-card:hover .vz-card-glow{opacity:1;}
.vz-card-badge{position:absolute;inset-inline-start:13px;top:13px;
  background:linear-gradient(135deg,var(--vz-gold-l),var(--vz-gold));color:#0A0A0C;
  font-size:11.5px;font-weight:900;padding:6px 13px;border-radius:50px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);}
.vz-card-body{display:flex;flex-direction:column;gap:9px;padding:16px 17px 18px;flex:1;}
.vz-card-title{color:#fff;font-size:14.5px;font-weight:700;line-height:1.55;min-height:66px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  unicode-bidi:plaintext;text-align:right;}
.vz-card-price{display:flex;align-items:baseline;gap:10px;margin-top:auto;flex-wrap:wrap;}
.vz-now{color:var(--vz-gold);font-size:19px;font-weight:900;}
.vz-was{color:#75757E;font-size:12.5px;text-decoration:line-through;}
.vz-card-cta{display:block;text-align:center;background:transparent;color:var(--vz-gold);
  border:1.5px solid var(--vz-line);border-radius:50px;padding:11px 16px;
  font-size:13.5px;font-weight:800;transition:.3s;}
.vz-card:hover .vz-card-cta{background:linear-gradient(135deg,var(--vz-gold-l),var(--vz-gold));
  color:#0A0A0C;border-color:var(--vz-gold);}
.vz-more{text-align:center;margin-top:clamp(32px,4vw,52px);}

/* ---------- VALUES ---------- */
.vz-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.vz-value{text-align:center;padding:34px 22px;background:var(--vz-gray);
  border:1px solid var(--vz-line);border-radius:20px;transition:.36s;}
.vz-value:hover{border-color:var(--vz-gold);transform:translateY(-5px);
  box-shadow:0 20px 46px rgba(0,0,0,.5);}
.vz-v-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:rgba(212,175,55,.1);border:1px solid var(--vz-line);
  font-size:24px;margin-bottom:16px;}
.vz-value h3{color:#fff;font-size:16.5px;font-weight:800;margin:0 0 8px;}
.vz-value p{color:var(--vz-muted);font-size:13.5px;line-height:1.75;margin:0;}

/* ---------- CTA BAND ---------- */
.vz-band{position:relative;padding:clamp(56px,8vw,110px) 20px;text-align:center;overflow:hidden;
  background:linear-gradient(160deg,var(--vz-dark),var(--vz-black));
  border-top:1px solid var(--vz-line);}
.vz-band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.16),transparent 62%);}
.vz-band-inner{position:relative;z-index:2;max-width:720px;margin:0 auto;}
.vz-band .vz-sub{margin-bottom:34px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .vz-cats{grid-template-columns:repeat(3,minmax(0,1fr));}
  .vz-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .vz-values{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:820px){
  .vz-hero{min-height:auto;padding:52px 16px 44px;}
  .vz-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}
  .vz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}
  .vz-cat{height:150px;border-radius:16px;}
  .vz-cat-body{padding:15px 15px 17px;}
  .vz-cat-name{font-size:14.5px;}
  .vz-cat-count{font-size:11px;}
  .vz-card-body{padding:12px 13px 14px;gap:7px;}
  .vz-card-title{font-size:12.5px;line-height:1.5;min-height:55px;}
  .vz-now{font-size:16px;}
  .vz-was{font-size:11px;}
  .vz-card-cta{font-size:12px;padding:9px 12px;}
  .vz-btn{padding:13px 28px;font-size:14px;}
  .vz-hero-stats{gap:12px;font-size:12px;}
  .vz-stat b{font-size:15px;}
  .vz-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}
  .vz-value{padding:24px 16px;}
  .vz-v-ico{width:46px;height:46px;font-size:20px;margin-bottom:12px;}
  .vz-value h3{font-size:14.5px;}
  .vz-value p{font-size:12.5px;}
  .vz-mq-item{font-size:12px;gap:18px;padding-inline-end:18px;}
}


/* ============ HERO VISUAL + LOGO POLISH ============ */
.vz-hero{display:grid!important;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);
  align-items:center;text-align:right;max-width:1440px;margin:0 auto;}
.vz-hero-inner{text-align:right;max-width:none;margin:0;}
.vz-hero .vz-eyebrow{margin-inline:0;}
.vz-hero .vz-lead{margin-inline:0;max-width:620px;}
.vz-hero-cta{justify-content:flex-start;}
.vz-hero-stats{justify-content:flex-start;}
.vz-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;max-width:400px;justify-self:center;width:100%;}
.vz-hv-frame{position:relative;z-index:2;display:block;width:72%;aspect-ratio:4/3;
  border-radius:26px;overflow:hidden;border:1px solid rgba(212,175,55,.32);
  background:#0E0E11;box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 0 8px rgba(212,175,55,.045);}
.vz-hv-frame img{width:100%;height:100%;object-fit:contain;display:block;background:#0E0E11;}
.vz-hv-empty{background:linear-gradient(135deg,#17171B,#0E0E11);}
.vz-hv-ring{position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(212,175,55,.26);animation:vz-spin 34s linear infinite;}
.vz-hv-ring::after{content:'';position:absolute;top:-5px;inset-inline-start:50%;
  width:10px;height:10px;border-radius:50%;background:#D4AF37;box-shadow:0 0 18px rgba(212,175,55,.9);}
@keyframes vz-spin{to{transform:rotate(360deg);}}

/* header logo sizing */
yc-header .logo img, #youcan-section--header .logo img,
.header-wrapper .logo img, .app-header .logo img{
  max-height:58px!important;width:auto!important;object-fit:contain!important;display:block!important;}
yc-header .logo a, #youcan-section--header .logo a{display:inline-flex!important;align-items:center!important;}
@media(max-width:1100px){
  .vz-hero{grid-template-columns:1fr;text-align:center;gap:32px;}
  .vz-hero-inner{text-align:center;}
  .vz-hero .vz-lead{margin-inline:auto;}
  .vz-hero-cta{justify-content:center;}
  .vz-hero-stats{justify-content:center;}
  .vz-hero-visual{max-width:340px;order:-1;}
}
@media(max-width:820px){
  .vz-hero-visual{max-width:250px;}
  .vz-hv-frame{border-radius:20px;}
  yc-header .logo img, #youcan-section--header .logo img{max-height:42px!important;}
}


/* ============ HERO PRICE CHIP ============ */
.vz-hv-chip{position:absolute;z-index:4;inset-inline-start:0;bottom:8%;
  display:flex;flex-direction:column;gap:4px;padding:14px 18px;min-width:190px;
  background:rgba(14,14,17,.94);backdrop-filter:blur(14px);
  border:1px solid rgba(212,175,55,.34);border-radius:16px;text-decoration:none;
  box-shadow:0 22px 50px rgba(0,0,0,.6);transition:.34s cubic-bezier(.2,.7,.3,1);}
.vz-hv-chip:hover{transform:translateY(-5px);border-color:#D4AF37;box-shadow:0 30px 66px rgba(0,0,0,.7);}
.vz-hv-chip-name{color:#fff;font-size:13px;font-weight:700;line-height:1.4;unicode-bidi:plaintext;}
.vz-hv-chip-price{color:#D4AF37;font-size:18px;font-weight:900;}
.vz-hv-chip-go{color:#E8C766;font-size:11.5px;font-weight:700;}
@media(max-width:1100px){
  .vz-hv-chip{inset-inline-start:auto;inset-inline-end:0;bottom:2%;min-width:160px;padding:11px 14px;}
  .vz-hv-chip-name{font-size:12px;}
  .vz-hv-chip-price{font-size:16px;}
}
@media(max-width:820px){
  .vz-hv-chip{position:static;margin-top:14px;inset:auto;min-width:0;width:100%;align-items:center;text-align:center;}
}


/* ============ HEADER POLISH ============ */
yc-header .header-wrapper, #youcan-section--header .header-wrapper,
.header-wrapper .header-inner, .app-header .header-inner{
  padding-top:10px!important;padding-bottom:10px!important;}
yc-header .header-wrapper img, #youcan-section--header .header-wrapper img{max-height:44px!important;}
yc-header .header-wrapper a, #youcan-section--header .header-wrapper a,
.header-wrapper .header-inner a, .app-header .header-inner a{
  font-size:12.5px!important;padding:7px 14px!important;}
yc-header .header-wrapper .logo img, #youcan-section--header .header-wrapper .logo img{max-height:40px!important;}
@media(max-width:1100px){
  yc-header .header-wrapper a, #youcan-section--header .header-wrapper a{font-size:11.5px!important;padding:6px 10px!important;}
}


/* ============ MOBILE HOMEPAGE ADD-TO-CART ============ */
@media(max-width:820px){
  /* Show add-to-cart on homepage cards */
  .vz-card-cta{
    display:block!important;visibility:visible!important;opacity:1!important;
    width:100%!important;padding:10px 12px!important;font-size:12px!important;
    border-radius:50px!important;
    background:linear-gradient(135deg,#E8C766,#D4AF37)!important;
    color:#0A0A0C!important;font-weight:800!important;border:none!important;
    text-align:center!important;margin-top:8px!important;}
  
  /* Make card body show CTA */
  .vz-card-body{
    display:flex!important;flex-direction:column!important;gap:6px!important;
    padding:12px 13px 14px!important;}
  
  /* Card title smaller on mobile */
  .vz-card-title{
    font-size:12px!important;line-height:1.5!important;min-height:54px!important;
    -webkit-line-clamp:3!important;}
  
  /* Price smaller */
  .vz-now{font-size:15px!important;}
  .vz-was{font-size:10.5px!important;}
  
  /* Hero CTA buttons */
  .vz-hero-cta{
    display:flex!important;flex-direction:column!important;gap:10px!important;
    width:100%!important;max-width:300px!important;margin:0 auto!important;}
  .vz-btn{
    width:100%!important;padding:14px 20px!important;font-size:14px!important;
    text-align:center!important;}
  
  /* Category tiles */
  .vz-cat{
    height:140px!important;border-radius:14px!important;}
  .vz-cat-body{padding:12px 12px 14px!important;}
  .vz-cat-name{font-size:13px!important;}
  .vz-cat-count{font-size:10.5px!important;}
  
  /* Values grid */
  .vz-values{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .vz-value{padding:18px 12px!important;}
  .vz-v-ico{width:40px!important;height:40px!important;font-size:18px!important;margin-bottom:10px!important;}
  .vz-value h3{font-size:13px!important;}
  .vz-value p{font-size:11px!important;}
  
  /* Marquee */
  .vz-mq-item{font-size:11px!important;gap:14px!important;padding-inline-end:14px!important;}
  
  /* Band */
  .vz-band .vz-btn-lg{width:100%!important;max-width:280px!important;}
}


/* ============ MOBILE HERO — CLEAN SIMPLE STACK ============ */
@media(max-width:820px){
  .vz-hero{
    display:flex!important;flex-direction:column!important;
    padding:24px 16px 20px!important;gap:0!important;
    text-align:center!important;min-height:auto!important;}
  .vz-hero-bg{display:none!important;}
  .vz-hero-visual{
    display:none!important;}
  .vz-hero-inner{
    text-align:center!important;max-width:100%!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;}
  .vz-h1{
    font-size:32px!important;line-height:1.15!important;margin:0 0 14px!important;}
  .vz-lead{
    font-size:14px!important;line-height:1.85!important;margin:0 0 24px!important;
    max-width:100%!important;color:#C8C8D0!important;}
  .vz-eyebrow{
    font-size:10px!important;letter-spacing:.3em!important;
    padding:8px 18px!important;margin-bottom:18px!important;}
  .vz-hero-cta{
    flex-direction:column!important;gap:12px!important;
    width:100%!important;max-width:280px!important;margin:0 auto 24px!important;}
  .vz-btn{
    width:100%!important;padding:15px 20px!important;font-size:14.5px!important;}
  .vz-hero-stats{
    gap:12px!important;font-size:12px!important;flex-wrap:wrap!important;}
  .vz-stat b{font-size:14px!important;}
  .vz-stat-sep{display:none!important;}
  
  /* Product grid on mobile */
  .vz-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .vz-card{
    border-radius:14px!important;}
  .vz-card-media{
    aspect-ratio:1/1!important;}
  .vz-card-body{
    padding:10px 10px 12px!important;gap:5px!important;}
  .vz-card-title{
    font-size:11px!important;line-height:1.45!important;min-height:48px!important;}
  .vz-now{font-size:14px!important;}
  .vz-was{font-size:10px!important;}
  .vz-card-cta{
    display:block!important;visibility:visible!important;opacity:1!important;
    width:100%!important;padding:8px 10px!important;font-size:11px!important;
    border-radius:50px!important;
    background:linear-gradient(135deg,#E8C766,#D4AF37)!important;
    color:#0A0A0C!important;font-weight:800!important;border:none!important;
    text-align:center!important;margin-top:6px!important;}
  
  /* Categories on mobile */
  .vz-cats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .vz-cat{
    height:120px!important;border-radius:12px!important;}
  .vz-cat-body{padding:10px 10px 12px!important;}
  .vz-cat-name{font-size:12px!important;}
  .vz-cat-count{font-size:10px!important;}
  .vz-cat-arrow{display:none!important;}
  
  /* Sections padding */
  .vz-sec{padding:36px 14px!important;}
  .vz-sec-head{margin-bottom:20px!important;}
  .vz-h2{font-size:22px!important;}
  .vz-sub{font-size:12.5px!important;}
  .vz-kicker{font-size:10px!important;letter-spacing:.24em!important;}
  
  /* Values */
  .vz-values{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .vz-value{padding:16px 10px!important;border-radius:12px!important;}
  .vz-v-ico{width:36px!important;height:36px!important;font-size:16px!important;margin-bottom:8px!important;}
  .vz-value h3{font-size:12.5px!important;}
  .vz-value p{font-size:10.5px!important;}
  
  /* Marquee */
  .vz-marquee{padding:10px 0!important;}
  .vz-mq-item{font-size:10.5px!important;gap:12px!important;padding-inline-end:12px!important;}
  
  /* Band */
  .vz-band{padding:36px 16px!important;}
  .vz-band .vz-btn-lg{width:100%!important;max-width:240px!important;}
}


/* ============ CREATIVE ENHANCEMENTS ============ */

/* Hero particles */
.vz-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.vz-particles i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.3);
  animation: vz-float-particle 12s ease-in-out infinite;
}

.vz-particles i:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.vz-particles i:nth-child(2) { top: 40%; left: 30%; animation-delay: 2s; }
.vz-particles i:nth-child(3) { top: 60%; left: 50%; animation-delay: 4s; }
.vz-particles i:nth-child(4) { top: 30%; left: 70%; animation-delay: 1s; }
.vz-particles i:nth-child(5) { top: 80%; left: 20%; animation-delay: 3s; }
.vz-particles i:nth-child(6) { top: 10%; left: 80%; animation-delay: 5s; }
.vz-particles i:nth-child(7) { top: 50%; left: 90%; animation-delay: 2.5s; }
.vz-particles i:nth-child(8) { top: 70%; left: 40%; animation-delay: 4.5s; }
.vz-particles i:nth-child(9) { top: 25%; left: 60%; animation-delay: 1.5s; }
.vz-particles i:nth-child(10) { top: 90%; left: 70%; animation-delay: 3.5s; }

@keyframes vz-float-particle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
  25% { transform: translateY(-20px) translateX(10px); opacity: 0.6; }
  50% { transform: translateY(-10px) translateX(-10px); opacity: 0.4; }
  75% { transform: translateY(-30px) translateX(5px); opacity: 0.5; }
}

/* ============ TRENDING NOW (horizontal scroll) ============ */
.vz-sec-trending {
  background: var(--vz-dark);
  max-width: none;
  border-block: 1px solid var(--vz-line);
  overflow: hidden;
}

.vz-sec-trending > * {
  max-width: 1440px;
  margin-inline: auto;
}

.vz-trending {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}

.vz-trending-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 20px;
}

.vz-trending-track::-webkit-scrollbar {
  display: none;
}

.vz-trend-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--vz-gray);
  border: 1px solid var(--vz-line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.vz-trend-card:hover {
  transform: translateY(-6px);
  border-color: var(--vz-gold);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55);
}

.vz-trend-img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--vz-dark);
}

.vz-trend-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.vz-trend-card:hover .vz-trend-img img {
  transform: scale(1.08);
}

.vz-trend-name {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  padding: 12px 14px 4px;
  min-height: 54px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vz-trend-price {
  color: var(--vz-gold);
  font-size: 16px;
  font-weight: 900;
  padding: 0 14px 14px;
}

/* ============ BRAND STORY ============ */
.vz-sec-story {
  background: linear-gradient(160deg, var(--vz-dark), var(--vz-black));
  max-width: none;
  border-block: 1px solid var(--vz-line);
}

.vz-story {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 20px;
}

.vz-story-text {
  text-align: right;
}

.vz-story-text .vz-kicker {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.34em;
  color: var(--vz-gold);
  margin-bottom: 12px;
  font-weight: 700;
}

.vz-story-text .vz-h2 {
  font-size: clamp(25px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.2;
}

.vz-story-text .vz-sub {
  font-size: clamp(13.5px, 1.55vw, 16.5px);
  color: var(--vz-muted);
  margin: 0 0 24px;
  line-height: 1.8;
}

.vz-story-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  max-width: 400px;
  justify-self: center;
}

.vz-story-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(212, 175, 55, 0.3);
  animation: vz-spin 30s linear infinite;
}

.vz-story-ring::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vz-gold);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
}

.vz-story-icon {
  font-size: 80px;
  z-index: 2;
  animation: vz-float 4s ease-in-out infinite;
}

@keyframes vz-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* ============ NEWSLETTER ============ */
.vz-sec-newsletter {
  background: var(--vz-dark);
  max-width: none;
  border-block: 1px solid var(--vz-line);
}

.vz-newsletter {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.vz-newsletter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--vz-line);
  font-size: 30px;
  margin-bottom: 20px;
}

.vz-newsletter .vz-h2 {
  font-size: clamp(25px, 4vw, 40px);
  font-weight: 900;
  color: #fff;
  margin: 0 0 10px;
}

.vz-newsletter .vz-sub {
  font-size: 15px;
  color: var(--vz-muted);
  margin: 0 0 28px;
  line-height: 1.8;
}

.vz-newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.vz-newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  font-size: 14px;
  border-radius: 50px;
  border: 1px solid var(--vz-line);
  background: var(--vz-gray);
  color: #F5F5F7;
  outline: none;
  transition: 0.3s;
  font-family: inherit;
}

.vz-newsletter-form input::placeholder {
  color: #75757E;
}

.vz-newsletter-form input:focus {
  border-color: var(--vz-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.vz-newsletter-form .vz-btn {
  flex-shrink: 0;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .vz-story {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }
  .vz-story-text {
    text-align: center;
  }
  .vz-story-visual {
    max-width: 280px;
    order: -1;
  }
}

@media (max-width: 820px) {
  .vz-trend-card {
    flex: 0 0 160px;
  }
  .vz-trend-name {
    font-size: 11px;
    min-height: 48px;
  }
  .vz-trend-price {
    font-size: 14px;
  }
  .vz-story-visual {
    max-width: 220px;
  }
  .vz-story-icon {
    font-size: 60px;
  }
  .vz-newsletter-form {
    flex-direction: column;
  }
  .vz-newsletter-form .vz-btn {
    width: 100%;
  }
  .vz-particles {
    display: none;
  }
}


/* ============ MOBILE READABILITY — FORCED (must live here to win cascade) ============ */
@media(max-width:820px){
  .vz-home .vz-eyebrow{
    font-size:11.5px!important;
    letter-spacing:.2em!important;
    padding:8px 18px!important;
  }
  .vz-home .vz-mq-item{
    font-size:12.5px!important;
    gap:16px!important;
    padding-inline-end:16px!important;
  }
  .vz-home .vz-mq-item .vz-mq-dot{
    font-size:9px!important;
  }
  .vz-home .vz-kicker{
    font-size:11.5px!important;
    letter-spacing:.22em!important;
  }
  .vz-home .vz-h2{
    font-size:23px!important;
  }
  .vz-home .vz-sub{
    font-size:13.5px!important;
    line-height:1.8!important;
  }
  .vz-home .vz-lead{
    font-size:14px!important;
    line-height:1.85!important;
  }
  .vz-home .vz-card-title{
    font-size:12.5px!important;
    line-height:1.5!important;
    min-height:52px!important;
  }
  .vz-home .vz-now{
    font-size:15.5px!important;
  }
  .vz-home .vz-was{
    font-size:11.5px!important;
  }
  .vz-home .vz-card-cta{
    font-size:12.5px!important;
    padding:10px 12px!important;
  }
  .vz-home .vz-cat-name{
    font-size:14.5px!important;
  }
  .vz-home .vz-cat-count{
    font-size:11.5px!important;
  }
  .vz-home .vz-value h3{
    font-size:14px!important;
  }
  .vz-home .vz-value p{
    font-size:12.5px!important;
    line-height:1.7!important;
  }
  .vz-home .vz-stat{
    font-size:12.5px!important;
  }
  .vz-home .vz-stat b{
    font-size:14.5px!important;
  }
  .vz-home .vz-trend-name{
    font-size:12px!important;
    min-height:50px!important;
  }
  .vz-home .vz-trend-price{
    font-size:15px!important;
  }
  .vz-home .vz-btn{
    font-size:14px!important;
    padding:14px 22px!important;
  }
  .vz-home .vz-more .vz-btn{
    font-size:13.5px!important;
  }
}


/* ============ CRITICAL MOBILE UX FIXES ============ */

/* FIX A: Hero needs a visual on mobile (was display:none) */
@media(max-width:820px){
  .vz-hero-visual{
    display:flex!important;
    max-width:230px!important;
    width:100%!important;
    aspect-ratio:1/1!important;
    margin:0 auto 20px!important;
    order:-1!important;
  }
  .vz-hv-frame{
    width:100%!important;
    border-radius:18px!important;
  }
  .vz-hv-ring{display:none!important;}
  .vz-hv-chip{
    position:static!important;
    margin-top:10px!important;
    inset:auto!important;
    min-width:0!important;
    width:100%!important;
    padding:10px 14px!important;
    align-items:center!important;
    text-align:center!important;
  }
  .vz-hv-chip-name{font-size:12px!important;}
  .vz-hv-chip-price{font-size:16px!important;}
  .vz-hv-chip-go{font-size:11.5px!important;}
}

/* FIX B: Floating buttons must not cover product cards */
.vz-mail-float{
  bottom:88px!important;
}
.vz-top-btn{
  bottom:88px!important;
}
@media(max-width:820px){
  .vz-mail-float{
    bottom:78px!important;
    inset-inline-start:12px!important;
    width:48px!important;
    height:48px!important;
  }
  .vz-top-btn{
    bottom:78px!important;
    inset-inline-end:12px!important;
    width:42px!important;
    height:42px!important;
  }
  /* add breathing room at the very bottom so floats never sit over content */
  .vz-home{padding-bottom:96px!important;}
}

/* FIX C: Uniform product card images (no masonry gaps) */
.vz-card-media{
  aspect-ratio:1/1!important;
  height:auto!important;
}
.vz-card-media img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  display:block!important;
}
.vz-grid{
  align-items:stretch!important;
}
.vz-card{
  height:100%!important;
}
.vz-trend-img{
  aspect-ratio:1/1!important;
}
.vz-trend-img img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}


/* ============ HERO VISUAL — robust sizing (final override) ============ */
/* The hero image was rendering tiny (85x64 inside a 230px frame) because
   several older .vz-hv-frame rules disagreed on width/aspect-ratio.
   Pin the geometry once, here, so it can't be re-broken upstream. */
.vz-hero-visual{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:380px!important;
  aspect-ratio:auto!important;
  margin:0 auto!important;
}
.vz-hv-frame{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  max-width:340px!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  margin:0 auto!important;
  border-radius:26px!important;
  overflow:hidden!important;
  border:1px solid rgba(212,175,55,.32)!important;
  background:#0E0E11!important;
  box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 0 8px rgba(212,175,55,.045)!important;
}
.vz-hv-frame img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
  display:block!important;
  background:#0E0E11!important;
}
.vz-hv-frame.vz-hv-empty{
  background:linear-gradient(135deg,#141419,#0A0A0C)!important;
  border-style:dashed!important;
}
@media(max-width:820px){
  .vz-hero-visual{max-width:290px!important;}
  .vz-hv-frame{max-width:270px!important;border-radius:20px!important;}
}


/* ============ HERO POLISH v2 — kill dead space, bigger visual ============ */
/* Vision audit found: oversized empty black areas, hero product image too
   small on mobile, text block off-centre on desktop. Tighten the rhythm and
   give the visual real presence. */
.vz-home .vz-hero{
  padding:clamp(28px,3.6vw,56px) clamp(16px,3vw,40px) clamp(26px,3.2vw,48px)!important;
}
@media(min-width:821px){
  .vz-home .vz-hero{
    grid-template-columns:1.05fr .95fr!important;
    gap:clamp(28px,4vw,64px)!important;
    align-items:center!important;
  }
  .vz-home .vz-hero-inner{ text-align:right!important; }
  .vz-home .vz-hero-visual{ max-width:440px!important; }
  .vz-home .vz-hv-frame{ max-width:400px!important; aspect-ratio:1/1!important; }
}
/* mobile: hero image gets real size and sits above the copy */
@media(max-width:820px){
  .vz-home .vz-hero{
    display:flex!important;flex-direction:column!important;
    gap:18px!important;padding:18px 14px 22px!important;
  }
  .vz-home .vz-hero-visual{max-width:300px!important;order:-1!important;margin:0 auto 4px!important;}
  .vz-home .vz-hv-frame{max-width:286px!important;aspect-ratio:1/1!important;border-radius:22px!important;}
  .vz-home .vz-hv-frame img{object-fit:cover!important;}
  .vz-home .vz-hero-inner{max-width:100%!important;}
  .vz-home .vz-h1{font-size:30px!important;line-height:1.16!important;margin:0 0 12px!important;}
  .vz-home .vz-lead{font-size:13.5px!important;line-height:1.8!important;margin:0 0 18px!important;}
  .vz-home .vz-eyebrow{font-size:10px!important;letter-spacing:.22em!important;padding:7px 16px!important;margin-bottom:14px!important;}
  .vz-home .vz-hero-cta{gap:10px!important;max-width:100%!important;margin:0 auto 18px!important;}
  .vz-home .vz-hero-cta .vz-btn{width:100%!important;justify-content:center!important;}
}
/* the price chip must never cover the product on small screens */
@media(max-width:520px){
  .vz-home .vz-hv-chip{position:static!important;margin-top:12px!important;inset:auto!important;
    min-width:0!important;width:100%!important;align-items:center!important;text-align:center!important;}
}
/* gold ambient glow so the hero doesn't read as flat black */
.vz-home .vz-hero::after{
  content:'';position:absolute;inset:auto -10% -40% -10%;height:60%;
  background:radial-gradient(60% 100% at 50% 0%,rgba(212,175,55,.10),transparent 72%);
  pointer-events:none;z-index:0;
}
.vz-home .vz-hero-inner,.vz-home .vz-hero-visual{position:relative;z-index:2;}


/* ============ HERO VISUAL — flex-shrink root cause ============ */
/* Measured live: .vz-hero-visual was 300px wide but .vz-hv-frame collapsed to
   122px. Cause: the visual is a flex container and the frame is a flex item
   with flex-shrink:1, so any sibling (the chip / the ring) squeezed it.
   Pin flex-shrink:0 and give the frame an explicit flex-basis. */
.vz-home .vz-hero-visual{
  flex-shrink:0!important;
}
.vz-home .vz-hero-visual > .vz-hv-frame{
  flex:0 0 auto!important;
  flex-shrink:0!important;
  width:100%!important;
  max-width:340px!important;
  min-width:240px!important;
  aspect-ratio:1/1!important;
  height:auto!important;
}
.vz-home .vz-hero-visual > .vz-hv-frame > img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  flex:0 0 auto!important;
}
/* the absolutely-positioned ring/chip must not participate in the flex line */
.vz-home .vz-hero-visual > .vz-hv-ring{position:absolute!important;flex:0 0 auto!important;}
.vz-home .vz-hero-visual > .vz-hv-chip{flex:0 0 auto!important;}

@media(max-width:820px){
  .vz-home .vz-hero-visual > .vz-hv-frame{
    max-width:320px!important;
    min-width:0!important;
    width:100%!important;
  }
}


/* ============ HEADER: compact, no duplicate controls ============ */
/* Root cause of the "cluttered / overlapping icons" look:
   (a) header.liquid renders BOTH a .search-bar (with its own input) AND a
       separate .search-btn icon button -> two search affordances.
   (b) the logo block is a full-width flex container, so its <a> overlaps it.
   (c) 6 nav pills + cart + search all sit on one row on desktop (248px tall).
   Fix: hide the duplicate bare search button, let the search-bar own the
   field, and compress the nav into a single tidy row. */

/* (a) the standalone search toggle duplicates the in-bar field on >=821px */
@media(min-width:821px){
  yc-header .actions > .search-btn.icon:not([data-search-action]) { display:none !important; }
}
/* the search icon inside the bar is decoration, not a second button */
yc-header .search-bar > svg { pointer-events:none; }

/* (b) logo container must not overlap its own link */
yc-header .logo { position:relative; z-index:1; }
yc-header .logo > a { display:inline-flex; align-items:center; }

/* (c) nav row: allow wrapping, tighten spacing, cap height */
yc-header .links > ul {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:6px !important;
  row-gap:4px !important;
}
yc-header .links ul li a.link,
yc-header .links ul li > a.yc-btn {
  padding:7px 13px !important;
  font-size:12.5px !important;
  min-height:36px !important;
  white-space:nowrap !important;
}
/* one compact row on desktop instead of a 2-row 248px block */
@media(min-width:1025px){
  yc-header .links > ul { flex-wrap:nowrap !important; }
  yc-header .links ul li a.link,
  yc-header .links ul li > a.yc-btn { padding:7px 11px !important; font-size:12px !important; }
  yc-header { --header-logo-width:170px; }
}
/* mobile: keep the nav inside the drawer, not the bar */
@media(max-width:820px){
  yc-header .links > ul { display:none !important; }
  yc-header .links { min-width:0 !important; width:auto !important; }
}
/* the actions group must be a tidy inline cluster */
yc-header .actions {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
}
/* search field styling — visible but not shouting */
yc-header .search-bar {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  border-radius:50px !important;
  border:1px solid rgba(212,175,55,.22) !important;
  background:rgba(255,255,255,.04) !important;
  padding:0 14px !important;
  height:44px !important;
}
yc-header .search-bar .search-input {
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  color:#F5F5F7 !important;
  height:42px !important;
  font-size:14px !important;
  width:100% !important;
  min-width:120px !important;
}
yc-header .search-bar .search-input::placeholder { color:#8A8A92 !important; }
@media(max-width:820px){
  yc-header .search-bar { height:42px !important; }
  yc-header .search-bar .search-input { min-width:0 !important; font-size:13.5px !important; }
}


/* ==================================================================
   HERO ROTATOR — cross-fade between the first few products
   ================================================================== */
.vz-home .vz-hv-frame { position: relative !important; }
.vz-home .vz-hv-frame .vz-hv-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  transition: opacity .9s ease !important;
  display: block !important;
}
.vz-home .vz-hv-frame .vz-hv-slide.vz-hv-active {
  opacity: 1 !important;
  position: relative !important;   /* first slide defines the box height */
}
/* the frame needs a stable square while slides swap */
.vz-home .vz-hv-frame { aspect-ratio: 1/1 !important; }
.vz-home .vz-hv-frame .vz-hv-slide:not(.vz-hv-active) { position: absolute !important; }

/* dots */
.vz-home .vz-hv-dots {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 6px !important;
  z-index: 5 !important;
}
.vz-home .vz-hv-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important;
  transition: .3s !important;
  cursor: pointer !important;
}
.vz-home .vz-hv-dot.vz-on {
  background: #D4AF37 !important;
  width: 20px !important;
  border-radius: 4px !important;
}
@media (prefers-reduced-motion: reduce) {
  .vz-home .vz-hv-slide { transition: none !important; }
}


/* ==================================================================
   DESKTOP HEADER HEIGHT — measured 567px on inner pages (collection,
   product, cart, search, cms pages) vs 183px on the home page. The home page
   has its own header styling; inner pages fall back to the theme default,
   which stacks the logo, the full nav row AND the actions row vertically.
   Compact it to one or two tight rows everywhere.
   ================================================================== */
@media (min-width: 821px) {
  yc-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px 18px !important;
    padding: 10px 0 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  yc-header > .logo {
    flex: 0 0 auto !important;
    order: 1 !important;
    width: auto !important;
  }
  yc-header > .logo img { max-height: 52px !important; width: auto !important; }
  yc-header > .links {
    flex: 1 1 auto !important;
    order: 2 !important;
    min-width: 0 !important;
  }
  yc-header > .actions {
    flex: 0 0 auto !important;
    order: 3 !important;
    margin: 0 !important;
  }
  /* the nav must stay on one line and never wrap the header into 3 rows */
  yc-header .links > ul {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  yc-header .links > ul > li > a.link {
    padding: 7px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  /* hide the redundant in-drawer search markup from the header bar */
  yc-header .links > yc-drawer#menu { display: inline-flex !important; }
}
/* a hard cap so a theme update can never re-inflate it */
@media (min-width: 821px) {
  #youcan-section--header, yc-header { max-height: 140px !important; }
  #youcan-section--header { overflow: hidden !important; }
}


/* ==================================================================
   LUXURY REFINEMENT — vision audit scored the story + values sections
   6/10 and 6.5/10. Concrete complaints, each addressed below:
   * the story emblem was a saturated blue diamond emoji (not luxury)
   * the trust-signal icons were mismatched emoji at inconsistent weight
   * the newsletter had no privacy microcopy and a washed-out icon
   * the two floating buttons overlapped content with no safe-area inset
   ================================================================== */

/* ---- story emblem: gold, restrained, with a slow shimmer ---- */
.vz-home .vz-story-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 112px !important;
  height: 112px !important;
  color: #D4AF37 !important;
  filter: drop-shadow(0 10px 26px rgba(212,175,55,.28)) !important;
}
.vz-home .vz-story-icon svg { width: 100% !important; height: 100% !important; display: block !important; }
.vz-home .vz-story-ring {
  border-style: solid !important;
  border-width: 1px !important;
  border-color: rgba(212,175,55,.28) !important;
  animation: vz-gem-spin 40s linear infinite !important;
}
@keyframes vz-gem-spin { to { transform: rotate(360deg); } }

/* ---- trust-signal icons: uniform stroke, gold, real size ---- */
.vz-home .vz-v-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 10px !important;
  border-radius: 14px !important;
  background: rgba(212,175,55,.09) !important;
  border: 1px solid rgba(212,175,55,.22) !important;
  color: #D4AF37 !important;
}
.vz-home .vz-v-ico svg {
  width: 24px !important;
  height: 24px !important;
  stroke: currentColor !important;
  display: block !important;
}
.vz-home .vz-value { text-align: center !important; }
.vz-home .vz-value h3 {
  color: #F5F5F7 !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
}
.vz-home .vz-value p {
  color: #A8A8B0 !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* ---- newsletter: icon + microcopy ---- */
.vz-home .vz-newsletter-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 18px !important;
  border-radius: 50% !important;
  background: rgba(212,175,55,.09) !important;
  border: 1px solid rgba(212,175,55,.26) !important;
  color: #D4AF37 !important;
}
.vz-home .vz-newsletter-icon svg {
  width: 28px !important; height: 28px !important;
  stroke: #D4AF37 !important; display: block !important;
}
.vz-home .vz-news-privacy {
  color: #8A8A92 !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  margin: 12px 0 0 !important;
  text-align: center !important;
}
.vz-home .vz-news-note {
  color: #D4AF37 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin: 12px 0 0 !important;
  text-align: center !important;
}

/* ---- floating buttons: safe-area aware, smaller, auto-hide friendly ---- */
.vz-mail-float {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  inset-inline-start: calc(18px + env(safe-area-inset-left, 0px)) !important;
}
.vz-top-btn {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  inset-inline-end: calc(18px + env(safe-area-inset-right, 0px)) !important;
}
@media (max-width: 820px) {
  .vz-mail-float {
    width: 46px !important; height: 46px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    inset-inline-start: calc(12px + env(safe-area-inset-left, 0px)) !important;
  }
  .vz-mail-float svg { width: 22px !important; height: 22px !important; }
  .vz-top-btn {
    width: 40px !important; height: 40px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    inset-inline-end: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }
}

/* ---- respect reduced motion for the new animations ---- */
@media (prefers-reduced-motion: reduce) {
  .vz-home .vz-story-ring { animation: none !important; }
}


/* ==================================================================
   HERO INNER — still 597px on mobile. Reduce padding + font sizes.
   ================================================================== */
@media (max-width: 820px) {
  .vz-hero-inner {
    padding: 0 18px !important;
  }
  .vz-hero-inner h1 {
    font-size: clamp(20px, 5.2vw, 26px) !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
  .vz-hero-inner p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
  }
  .vz-hero-inner .vz-btn {
    padding: 12px 22px !important;
    font-size: 14px !important;
  }
  .vz-hero-visual {
    max-width: 200px !important;
    margin-bottom: 14px !important;
  }
  .vz-hero-visual .vz-hv-frame {
    border-radius: 16px !important;
  }
}


/* ==================================================================
   HERO HORIZONTAL OVERFLOW — the product card is clipped on the left
   and the image overflows on the right. Constrain everything to 100%.
   ================================================================== */
@media (max-width: 820px) {
  .vz-hero {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .vz-hero-visual {
    overflow: hidden !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .vz-hero-visual .vz-hv-frame {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .vz-hero-visual img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .vz-hero-inner {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .vz-hero-inner .vz-hero-card {
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }
  /* any absolutely positioned elements inside hero */
  .vz-hero [style*="position: absolute"],
  .vz-hero [style*="position:absolute"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
}


/* ==================================================================
   HERO VISUAL — force fit within viewport on mobile.
   The frame was extending past the right edge because the parent
   .vz-hero-visual was taking full width (380px) and the frame
   at 72% was still too wide with the chip overflowing.
   ================================================================== */
@media (max-width: 820px) {
  .vz-hero-visual {
    max-width: 200px !important;
    width: 200px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .vz-hv-frame {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 16px !important;
  }
  .vz-hv-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .vz-hv-chip {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 8px auto 0 !important;
    min-width: 0 !important;
    width: fit-content !important;
    padding: 8px 14px !important;
  }
  .vz-hv-ring {
    display: none !important;
  }
}