@import url("./layout/navbar.css");
@import url("./components/drawer.css");

:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#475569;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --border:#e5e7eb;
}

:root[data-theme="dark"]{
  --bg:#0b1220;
  --fg:#f3f7fd;
  --muted:#b8c3d6;
  --surface:#111827;
  --surface-2:#0f172a;
  --border:rgba(255,255,255,.12);
}

/* ===== BASE ===== */

body{
background:var(--bg);
color:var(--fg);
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}


/* ===== HERO ===== */

.hero-section{
padding:80px 0;
}

.hero-media{
overflow:hidden;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.hero-video,
.hero-media img{
width:100%;
height:100%;
object-fit:cover;
}


/* ===== BUTTONS ===== */

.btn-primary{
background:#2563eb;
border-color:#2563eb;
}

.btn-primary:hover{
background:#1d4ed8;
border-color:#1d4ed8;
}



/* ===== GLOBAL BLUE SUCCESS OVERRIDES ===== */
:root{
  --brand-blue:#2563eb;
  --brand-blue-dark:#1d4ed8;
  --brand-blue-soft:#dbeafe;
  --brand-blue-soft-2:#eff6ff;
}

.btn-success,
button.btn-success,
a.btn-success{
  background:var(--brand-blue) !important;
  border-color:var(--brand-blue) !important;
  color:#fff !important;
}

.btn-success:hover,
.btn-success:focus,
button.btn-success:hover,
button.btn-success:focus,
a.btn-success:hover,
a.btn-success:focus{
  background:var(--brand-blue-dark) !important;
  border-color:var(--brand-blue-dark) !important;
  color:#fff !important;
}

.btn-outline-success{
  color:var(--brand-blue) !important;
  border-color:var(--brand-blue) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus{
  background:var(--brand-blue) !important;
  border-color:var(--brand-blue) !important;
  color:#fff !important;
}

.bg-success,
.badge.bg-success,
.text-bg-success,
.badge.text-bg-success{
  background:var(--brand-blue) !important;
  color:#fff !important;
}

.bg-success-subtle{
  background:var(--brand-blue-soft-2) !important;
  color:var(--brand-blue-dark) !important;
}

.text-success{
  color:var(--brand-blue) !important;
}

.border-success{
  border-color:var(--brand-blue) !important;
}

.table-success,
.table-success > th,
.table-success > td,
tr.table-success > td,
tr.table-success > th{
  background-color:var(--brand-blue-soft-2) !important;
  color:var(--fg) !important;
}

.alert-success{
  background:var(--brand-blue-soft-2) !important;
  border-color:#93c5fd !important;
  color:var(--brand-blue-dark) !important;
}
/* ===== /GLOBAL BLUE SUCCESS OVERRIDES ===== */

/* ===== FOOTER ===== */

.site-footer{
border-top:1px solid var(--border);
padding:32px 0;
background:var(--surface-2);
}


/* ===== MOBILE ===== */





body,
.site-footer,
.product-tabs-bar,
.glass-nav{
  color:var(--fg);
}

.text-muted,
.brand-line-2,
.product-tab,
.drawer-section-title{
  color:var(--muted) !important;
}

.card-title a,
.drawer-link,
.drawer-title,
.brand-line-1,
h1, h2, h3, h4, h5, h6{
  color:var(--fg);
}

.lux-panel,
.lux-card,
.card,
.drawer-panel{
  background:var(--surface);
  color:var(--fg);
}

.product-tabs-bar,
.site-footer,
.glass-nav,
.card,
.lux-panel,
.lux-card{
  border-color:var(--border) !important;
}

/* ===== QUIZ MODAL / WIZARD ===== */
#quizModal .modal-dialog{ max-width:980px; }
#quizModal .modal-content{ border-radius:20px; }

.quiz-title{
  font-weight:800;
  letter-spacing:.2px;
  text-align:center;
  margin-bottom:18px;
}

.quiz-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

@media (max-width:992px){
  .quiz-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:520px){
  .quiz-grid{ grid-template-columns:1fr; }
}

.quiz-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:186px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  color:var(--fg);
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.quiz-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(2,8,23,.10);
  border-color:rgba(14,165,233,.45);
}

.quiz-card.selected{
  border-color:#2563eb;
  box-shadow:0 16px 34px rgba(25,135,84,.18);
  background:var(--surface-2);
}

.quiz-card img{
  width:120px;
  height:120px;
  object-fit:contain;
  margin:8px auto 14px;
}

@media (max-width:520px){
  .quiz-card img{
    width:92px;
    height:92px;
  }
}

.quiz-card-title{
  font-weight:700;
  margin:0;
}

#quizModal .quiz-step{ display:none; }
#quizModal .quiz-step.active{ display:block; }
#quizModal .quiz-nav [data-next].is-hidden{ display:none !important; }

#quizModal .modal-body{
  overflow:auto;
}

@media (max-width:768px){
  .quiz-card{ padding:10px; min-height:160px; }
  .quiz-title{ font-size:1.1rem; }
}

/* ===== HERO PRODUCT BOARD ===== */
.hero-board{
  min-height:420px;
  border-radius:28px;
  background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 82%, #eef2f7) 100%);
  border:1px solid var(--border);
  overflow:hidden;
  position:relative;
  box-shadow:0 24px 50px rgba(15,23,42,.10);
}

.hero-board-slider{
  position:relative;
  min-height:420px;
  height:100%;
}

.hero-board-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  text-decoration:none;
  color:#fff;
  transition:opacity .55s ease, visibility .55s ease, transform .55s ease;
  transform:scale(1.02);
}

.hero-board-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:scale(1);
}

.hero-board-media{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 62%, #eef2f7 100%);
}

.hero-board-media img,
.hero-board-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-board-media img{
  object-fit:contain;
  padding:34px;
}

.hero-board-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  padding:22px;
}

.hero-board-fallback img{
  max-width:58%;
  max-height:58%;
  object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.28));
}

.hero-board-overlay{
  position:relative;
  z-index:2;
  margin-top:auto;
  width:100%;
  padding:28px 28px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.78) 36%, rgba(255,255,255,.96) 100%);
}

.hero-board-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

.hero-board-title{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  color:var(--fg) !important;
}

.hero-board-text{
  margin:0 0 16px;
  max-width:92%;
  font-size:15px;
  line-height:1.55;
  color:var(--muted) !important;
}

.hero-board-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.hero-board-price{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  font-weight:800;
  color:#fff;
}

.hero-board-cta{
  font-weight:700;
  color:var(--fg);
}

.hero-board-dots{
  position:absolute;
  right:22px;
  bottom:20px;
  z-index:3;
  display:flex;
  gap:8px;
}

.hero-board-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:rgba(15,23,42,.22);
  box-shadow:0 0 0 1px rgba(15,23,42,.06);
  transition:transform .2s ease, background-color .2s ease;
}

.hero-board-dot.is-active{
  background:var(--fg);
  transform:scale(1.16);
}

@media (max-width:991px){
  .hero-board,
  .hero-board-slider{
    min-height:380px;
  }

  .hero-board-title{
    font-size:24px;
  }

  .hero-board-text{
    max-width:100%;
  }
}

@media (max-width:575.98px){
  .hero-board,
  .hero-board-slider{
    min-height:340px;
  }

  .hero-board-media img{
    padding:22px;
  }

  .hero-board-video{
    padding:14px;
  }

  .hero-board-overlay{
    padding:22px 20px 20px;
  }

  .hero-board-title{
    font-size:20px;
  }

  .hero-board-text{
    font-size:14px;
    line-height:1.45;
  }

  .hero-board-meta{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-board-dots{
    right:16px;
    bottom:16px;
  }
}

/* ===== VAYNOR AIR RIBBON ===== */

.vaynor-air-ribbon{
  position:relative;
  overflow:hidden;
  margin:0 0 24px;
  padding:14px 0 10px;
  min-height:150px;
}

.vaynor-air-ribbon::before,
.vaynor-air-ribbon::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:52px;
  z-index:2;
  pointer-events:none;
}

.vaynor-air-ribbon::before{
  left:0;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(255,255,255,0) 100%);
}

.vaynor-air-ribbon::after{
  right:0;
  background:linear-gradient(270deg, var(--bg) 0%, rgba(255,255,255,0) 100%);
}

.vaynor-air-ribbon-track{
  display:flex;
  align-items:center;
  gap:54px;
  width:max-content;
  will-change:transform;
  animation:vaynor-air-ribbon-scroll 34s linear infinite;
}

.vaynor-air-ribbon:hover .vaynor-air-ribbon-track{
  animation-play-state:paused;
}

.vaynor-air-ribbon-group{
  display:flex;
  align-items:center;
  gap:54px;
  flex:none;
}

.vaynor-air-ribbon-item{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  text-decoration:none;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
  border-radius:0 !important;
  animation:vaynor-air-float 6.2s ease-in-out infinite;
  animation-delay:var(--float-delay, 0s);
}

.vaynor-air-ribbon-image{
  display:block;
  width:auto;
  height:128px;
  max-width:240px;
  object-fit:contain;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
}

.vaynor-air-ribbon-group .vaynor-air-ribbon-item:nth-child(odd) .vaynor-air-ribbon-image{
  height:144px;
  max-width:260px;
}

.vaynor-air-ribbon-group .vaynor-air-ribbon-item:nth-child(3n) .vaynor-air-ribbon-image{
  height:116px;
  max-width:220px;
}

.vaynor-air-ribbon-group .vaynor-air-ribbon-item:nth-child(4n){
  transform:translateY(10px);
}

.vaynor-air-ribbon-group .vaynor-air-ribbon-item:nth-child(5n){
  transform:translateY(-8px);
}

@keyframes vaynor-air-ribbon-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - 27px)); }
}

@keyframes vaynor-air-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

@media (max-width:991px){
  .vaynor-air-ribbon{
    min-height:122px;
    margin:0 0 20px;
  }

  .vaynor-air-ribbon-track,
  .vaynor-air-ribbon-group{
    gap:34px;
  }

  .vaynor-air-ribbon-track{
    animation-duration:28s;
  }

  .vaynor-air-ribbon-image{
    height:104px;
    max-width:190px;
  }

  .vaynor-air-ribbon-group .vaynor-air-ribbon-item:nth-child(odd) .vaynor-air-ribbon-image{
    height:116px;
    max-width:206px;
  }

  .vaynor-air-ribbon-group .vaynor-air-ribbon-item:nth-child(3n) .vaynor-air-ribbon-image{
    height:96px;
    max-width:174px;
  }
}

@media (max-width:575.98px){
  .vaynor-air-ribbon{
    min-height:92px;
    margin:0 0 16px;
    padding:8px 0 4px;
  }

  .vaynor-air-ribbon::before,
  .vaynor-air-ribbon::after{
    width:24px;
  }

  .vaynor-air-ribbon-track,
  .vaynor-air-ribbon-group{
    gap:18px;
  }

  .vaynor-air-ribbon-track{
    animation-duration:22s;
  }

  .vaynor-air-ribbon-image{
    height:74px;
    max-width:126px;
  }

  .vaynor-air-ribbon-group .vaynor-air-ribbon-item:nth-child(odd) .vaynor-air-ribbon-image{
    height:82px;
    max-width:138px;
  }

  .vaynor-air-ribbon-group .vaynor-air-ribbon-item:nth-child(3n) .vaynor-air-ribbon-image{
    height:68px;
    max-width:118px;
  }
}

/* ===== VAYNOR BENTO PROMO GRID ===== */
.vaynor-bento-grid{
  display:grid;
  grid-template-columns:1.45fr 1fr;
  grid-template-rows:repeat(2, minmax(180px, 1fr));
  gap:18px;
}

.vaynor-bento-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:180px;
  padding:28px;
  border-radius:28px;
  border:1px solid var(--border);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.9), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:0 18px 40px rgba(15,23,42,.08);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.vaynor-bento-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 52px rgba(15,23,42,.12);
  border-color:color-mix(in srgb, var(--fg) 10%, var(--border));
}

.vaynor-bento-card::after{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width:160px;
  height:160px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(15,23,42,.06), transparent 68%);
  pointer-events:none;
}

.vaynor-bento-card-lg{
  grid-row:1 / span 2;
  min-height:378px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.95), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f3f6fb 56%, #e9eef6 100%);
}

.vaynor-bento-card-sm{
  min-height:180px;
}

.vaynor-bento-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:32px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.08);
  color:var(--fg);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.vaynor-bento-title{
  margin:0 0 10px;
  max-width:90%;
  font-size:30px;
  line-height:1.08;
  font-weight:800;
  color:var(--fg) !important;
}

.vaynor-bento-card-sm .vaynor-bento-title{
  font-size:22px;
  max-width:100%;
}

.vaynor-bento-text{
  margin:0 0 18px;
  max-width:92%;
  color:var(--muted) !important;
  font-size:15px;
  line-height:1.6;
}

.vaynor-bento-card-sm .vaynor-bento-text{
  max-width:100%;
  font-size:14px;
  line-height:1.5;
}

.vaynor-bento-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:auto;
}

.vaynor-bento-price{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:10px 14px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-weight:800;
  font-size:14px;
  box-shadow:0 10px 20px rgba(17,24,39,.16);
}

.vaynor-bento-price-wrap{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.vaynor-bento-price-value{
  display:inline-flex;
  align-items:baseline;
  color:#0f172a;
  font-size:34px;
  font-weight:950;
  line-height:1;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.vaynor-bento-price-original{
  display:inline-flex;
  align-items:center;
  color:#dc2626;
  font-size:15px;
  font-weight:850;
  line-height:1;
  text-decoration:line-through;
  text-decoration-thickness:1.8px;
  text-decoration-color:#dc2626;
}

.vaynor-bento-showcase .vaynor-bento-price-value{
  font-size:38px;
}

.vaynor-bento-card-sm .vaynor-bento-price-value{
  font-size:30px;
}

@media (max-width:575.98px){
  .vaynor-bento-price-value,
  .vaynor-bento-showcase .vaynor-bento-price-value,
  .vaynor-bento-card-sm .vaynor-bento-price-value{
    font-size:28px;
  }

  .vaynor-bento-price-original{
    font-size:14px;
  }
}

.vaynor-bento-link{
  font-weight:800;
  color:var(--fg);
}

.vaynor-card-ribbon{
  position:absolute;
  top:-10px;
  left:-10px;
  width:132px;
  height:auto;
  z-index:5;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 10px 18px rgba(15,23,42,.18));
}

.vaynor-card-ribbon--featured{
  width:120px;
}

.vaynor-card-ribbon--catalog{
  top:10px;
  left:10px;
  width:132px;
}

.vaynor-bento-showcase-slide,
.vaynor-bento-card,
.featured-tile{
  position:relative;
}

@media (max-width:575.98px){
  .vaynor-card-ribbon{
    top:-8px;
    left:-8px;
    width:104px;
  }

  .vaynor-card-ribbon--featured{
    width:96px;
  }

  .vaynor-card-ribbon--catalog{
    top:8px;
    left:8px;
    width:104px;
  }
}

@media (max-width:991px){
  .vaynor-bento-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .vaynor-bento-card-lg{
    grid-row:auto;
    min-height:280px;
  }

  .vaynor-bento-title{
    font-size:24px;
    max-width:100%;
  }
}

@media (max-width:575.98px){
  .vaynor-bento-card,
  .vaynor-bento-card-lg,
  .vaynor-bento-card-sm{
    min-height:auto;
    padding:22px;
    border-radius:22px;
  }

  .vaynor-bento-title{
    font-size:20px;
  }

  .vaynor-bento-text{
    font-size:14px;
    line-height:1.5;
  }

  .vaynor-bento-cta{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ===== VAYNOR BENTO PRODUCT MEDIA ===== */
.vaynor-bento-card-sm{
  padding-right:170px;
}

.vaynor-bento-media{
  position:absolute;
  top:22px;
  right:22px;
  width:124px;
  height:124px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 12px 28px rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.vaynor-bento-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:12px;
}

@media (max-width:575.98px){
  .vaynor-bento-card-sm{
    padding-right:22px;
  }

  .vaynor-bento-media{
    position:static;
    width:100%;
    height:180px;
    margin-bottom:16px;
    border-radius:18px;
  }
}

/* ===== VAYNOR BENTO SHOWCASE ===== */
.vaynor-bento-showcase{
  position:relative;
  overflow:hidden;
  min-height:340px;
}

.vaynor-bento-showcase-slide{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px;
  text-decoration:none;
  color:inherit;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease, visibility .45s ease, transform .45s ease;
  transform:translateY(6px);
}

.vaynor-bento-showcase-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.vaynor-bento-showcase-media{
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  width:260px;
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 32px rgba(15,23,42,.10);
  overflow:hidden;
}

.vaynor-bento-showcase-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:18px;
}

.vaynor-bento-showcase .vaynor-bento-title{
  max-width:46%;
}

.vaynor-bento-showcase .vaynor-bento-text{
  max-width:46%;
}
.vaynor-bento-showcase .vaynor-bento-cta{
  max-width:46%;
  margin-top:22px;
}


.vaynor-bento-showcase-dots{
  position:absolute;
  right:24px;
  bottom:22px;
  display:flex;
  gap:8px;
  z-index:3;
}

.vaynor-bento-showcase-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(15,23,42,.18);
  transition:transform .2s ease, background-color .2s ease;
}

.vaynor-bento-showcase-dot.is-active{
  background:#111827;
  transform:scale(1.14);
}

@media (max-width:991px){
  .vaynor-bento-showcase{
    min-height:300px;
  }

  .vaynor-bento-showcase-media{
    width:210px;
    height:210px;
  }

  .vaynor-bento-showcase .vaynor-bento-title,
  .vaynor-bento-showcase .vaynor-bento-text{
    max-width:54%;
  }
}

@media (max-width:575.98px){
  .vaynor-bento-showcase{
    min-height:360px;
  }

  .vaynor-bento-showcase-slide{
    padding:22px;
  }

  .vaynor-bento-showcase-media{
    position:static;
    width:100%;
    height:180px;
    margin-bottom:16px;
  }

  .vaynor-bento-showcase .vaynor-bento-title,
  .vaynor-bento-showcase .vaynor-bento-text{
    max-width:100%;
  }

  .vaynor-bento-showcase-dots{
    right:18px;
    bottom:18px;
  }
}


/* ===== FEATURED PRODUCT TILES (FIGMA STYLE) ===== */
.featured-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:32px;
  border:1px solid rgba(148,163,184,.24);
  background:
    radial-gradient(circle at top right, rgba(191,219,254,.52), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,255,255,.96), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 52%, #eef4ff 100%);
  box-shadow:
    0 20px 50px rgba(15,23,42,.08),
    0 6px 18px rgba(37,99,235,.06);
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;
}

.featured-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.56), transparent 36%),
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 34%);
  opacity:.95;
  pointer-events:none;
}

.featured-tile::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:31px;
  border:1px solid rgba(255,255,255,.72);
  pointer-events:none;
  opacity:.72;
}

.featured-tile:hover{
  transform:translateY(-8px);
  border-color:rgba(59,130,246,.22);
  box-shadow:
    0 30px 70px rgba(15,23,42,.14),
    0 10px 28px rgba(37,99,235,.10);
}

.featured-tile-link{
  position:absolute;
  inset:0;
  z-index:4;
}

.featured-tile-media,
.featured-tile-body{
  position:relative;
  z-index:1;
}

.featured-tile-media{
  position:relative;
  height:252px;
  margin:16px 16px 0;
  border-radius:24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.96), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  border:1px solid rgba(148,163,184,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 12px 28px rgba(15,23,42,.06);
}

.featured-tile-media::after{
  content:"";
  position:absolute;
  inset:auto -12% -42% auto;
  width:180px;
  height:180px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(59,130,246,.18) 0%, rgba(59,130,246,0) 70%);
  pointer-events:none;
}

.featured-tile-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:24px;
  transform:scale(1);
  transition:transform .28s ease;
}

.featured-tile:hover .featured-tile-media img{
  transform:scale(1.045);
}

.featured-tile-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:700;
  background:linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
}

.featured-tile-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:22px 22px 22px;
}

.featured-tile-topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.featured-tile-chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(148,163,184,.20);
  color:#0f172a;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.featured-tile-stock{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(148,163,184,.14);
  color:#64748b;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  border:1px solid rgba(148,163,184,.16);
}

.featured-tile-stock.is-in{
  background:rgba(16,185,129,.10);
  color:#047857;
  border-color:rgba(16,185,129,.14);
}

.featured-tile-title{
  margin:0 0 12px;
  font-size:24px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.03em;
  color:#0f172a !important;
}

.featured-tile-text{
  margin:0 0 20px;
  color:#5b6474 !important;
  font-size:14px;
  line-height:1.65;
  max-width:34ch;
}

.featured-tile-footer{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.featured-tile-price-shell{
  display:flex;
  align-items:flex-end;
  min-width:0;
  flex:1 1 auto;
}

.featured-tile-price-wrap{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  min-height:auto;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  color:#0f172a;
  box-shadow:none;
}

.featured-tile-badge{
  display:none;
}

.featured-tile-price-value{
  display:inline-flex;
  align-items:baseline;
  color:#0f172a;
  font-size:34px;
  font-weight:950;
  letter-spacing:-.04em;
  line-height:1;
  white-space:nowrap;
}

.featured-tile-price-original{
  display:inline-flex;
  align-items:center;
  color:#dc2626;
  font-size:15px;
  font-weight:850;
  line-height:1;
  text-decoration:line-through;
  text-decoration-thickness:1.8px;
  text-decoration-color:#dc2626;
}

.featured-tile-arrow{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(239,246,255,.96) 100%);
  border:1px solid rgba(148,163,184,.18);
  color:#0f172a;
  font-size:22px;
  font-weight:900;
  box-shadow:0 14px 30px rgba(15,23,42,.08);
  transition:transform .22s ease, box-shadow .22s ease;
}

.featured-tile:hover .featured-tile-arrow{
  transform:translateX(2px);
  box-shadow:0 18px 34px rgba(15,23,42,.12);
}

@media (max-width:575.98px){
  .featured-tile{
    border-radius:24px;
  }

  .featured-tile::after{
    border-radius:23px;
  }

  .featured-tile-media{
    height:216px;
    margin:12px 12px 0;
    border-radius:20px;
  }

  .featured-tile-body{
    padding:18px 18px 20px;
  }

  .featured-tile-title{
    font-size:21px;
  }

  .featured-tile-text{
    margin-bottom:18px;
  }

  .featured-tile-footer{
    align-items:flex-start;
    gap:12px;
  }

  .featured-tile-price-wrap{
    min-height:auto;
    padding:0;
    border-radius:0;
  }

  .featured-tile-price-value{
    font-size:28px;
  }

  .featured-tile-price-original{
    font-size:14px;
  }

  .featured-tile-arrow{
    width:44px;
    height:44px;
    border-radius:14px;
  }
}



/* ===================================================================== */
/* ======================  PRODUCT TABS LEISTE  ======================== */
/* ===================================================================== */

.product-tabs-bar{
  position: sticky;
  top: 118px;
  z-index: 999;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.product-tabs-bar .container{
  display: flex;
  justify-content: center;
}

.product-tabs{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: auto;
  min-width: max-content;
  padding: 0.55rem 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-tabs::-webkit-scrollbar{
  display: none;
}

.product-tab{
  position: relative;
  padding: 0.35rem 0.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease, opacity .18s ease;
}

.product-tab:hover,
.product-tab:focus-visible{
  color: var(--fg);
  text-decoration: none;
}

.product-tab::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transform: scaleX(0.6);
  transition: background-color .18s ease, opacity .18s ease, transform .18s ease;
}

.product-tab.is-active{
  color: var(--primary);
}

.product-tab.is-active::after{
  background: var(--primary);
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 991.98px){
  .product-tabs-bar{
    top: 96px;
  }

  .product-tabs-bar .container{
    justify-content: flex-start;
  }

  .product-tabs{
    justify-content: flex-start;
    gap: 1rem;
    padding: 0.45rem 0.25rem;
  }
}


/* ===== NAV SHOP BUTTON FINAL BLACK OVERRIDE ===== */
a.btn.btn-success.nav-shop-btn,
a.btn-success.nav-shop-btn,
.nav-chip.nav-shop-btn{
  background:#111827 !important;
  border-color:#111827 !important;
  color:#ffffff !important;
}

a.btn.btn-success.nav-shop-btn:hover,
a.btn.btn-success.nav-shop-btn:focus,
a.btn.btn-success.nav-shop-btn:active,
a.btn-success.nav-shop-btn:hover,
a.btn-success.nav-shop-btn:focus,
a.btn-success.nav-shop-btn:active,
.nav-chip.nav-shop-btn:hover,
.nav-chip.nav-shop-btn:focus,
.nav-chip.nav-shop-btn:active{
  background:#000000 !important;
  border-color:#000000 !important;
  color:#ffffff !important;
}
/* ===== /NAV SHOP BUTTON FINAL BLACK OVERRIDE ===== */


.detail-gallery-stage{
  position:relative;
  overflow:hidden;
}

.detail-gallery-main-image{
  display:block;
  width:100%;
}

.vaynor-card-ribbon--detail{
  top:14px;
  left:14px;
  width:132px;
  z-index:6;
}

.vaynor-card-ribbon--detail-modal{
  top:22px;
  left:22px;
  width:150px;
  z-index:7;
}

.detail-gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
}

.detail-gallery-lightbox.is-open{
  display:block;
}

.detail-gallery-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.detail-gallery-lightbox-dialog{
  position:relative;
  z-index:1;
  width:min(1120px, calc(100vw - 32px));
  margin:24px auto;
  padding:24px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  box-shadow:0 30px 90px rgba(15,23,42,.28);
  border:1px solid rgba(255,255,255,.7);
}

.detail-gallery-lightbox-stage{
  position:relative;
  min-height:70vh;
  border-radius:24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.96), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  border:1px solid rgba(148,163,184,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:32px;
}

.detail-gallery-lightbox-image{
  display:block;
  max-width:100%;
  max-height:64vh;
  object-fit:contain;
}

.detail-gallery-lightbox-close{
  position:absolute;
  top:14px;
  right:16px;
  z-index:3;
  width:48px;
  height:48px;
  border:0;
  border-radius:999px;
  background:rgba(15,23,42,.08);
  color:#0f172a;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.detail-gallery-lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:52px;
  height:52px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  font-size:34px;
  line-height:1;
  box-shadow:0 16px 32px rgba(15,23,42,.16);
  cursor:pointer;
}

.detail-gallery-lightbox-nav.is-prev{
  left:18px;
}

.detail-gallery-lightbox-nav.is-next{
  right:18px;
}

.detail-gallery-lightbox-thumbs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.detail-gallery-lightbox-thumb{
  width:88px;
  height:88px;
  padding:6px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.26);
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  cursor:pointer;
}

.detail-gallery-lightbox-thumb.is-active{
  border-color:#2563eb;
  box-shadow:0 14px 28px rgba(37,99,235,.18);
}

.detail-gallery-lightbox-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
}

@media (max-width:767.98px){
  .vaynor-card-ribbon--detail{
    top:10px;
    left:10px;
    width:104px;
  }

  .vaynor-card-ribbon--detail-modal{
    top:14px;
    left:14px;
    width:116px;
  }

  .detail-gallery-lightbox-dialog{
    width:min(100vw - 16px, 100%);
    margin:8px auto;
    padding:14px;
    border-radius:22px;
  }

  .detail-gallery-lightbox-stage{
    min-height:54vh;
    padding:18px;
    border-radius:18px;
  }

  .detail-gallery-lightbox-image{
    max-height:48vh;
  }

  .detail-gallery-lightbox-nav{
    width:44px;
    height:44px;
    font-size:28px;
  }

  .detail-gallery-lightbox-thumb{
    width:72px;
    height:72px;
    border-radius:14px;
  }
}
/* DETAIL IMAGE STAGE */
.detail-gallery-stage{
  position:relative;
}

/* BADGE НА КАРТИНКЕ */
.vaynor-card-ribbon--detail{
  position:absolute;
  top:16px;
  left:16px;
  z-index:5; /* ВАЖНО */
  width:140px;
  pointer-events:none;
}

/* В MODAL */
.vaynor-card-ribbon--detail-modal{
  position:absolute;
  top:20px;
  left:20px;
  z-index:6;
  width:160px;
  pointer-events:none;
}