.vctl-section {
  box-sizing:border-box;
  width:100%;
  margin:0;
  padding:clamp(42px,5vw,80px) clamp(14px,2.4vw,40px);
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.82), rgba(255,255,255,0) 38%),
    linear-gradient(90deg, rgba(227,212,188,.12), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 76%, rgba(227,212,188,.12)),
    #faf7f2;
  color:#111;
  overflow:hidden;
}

.vctl-section *,
.vctl-section *::before,
.vctl-section *::after { box-sizing:border-box; }

.vctl-shell {
  width:100%;
  max-width:1780px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(330px,.3fr) minmax(0,.7fr);
  gap:clamp(28px,3vw,56px);
  align-items:center;
}

.vctl-content { min-width:0; }

.vctl-label {
  margin:0 0 14px;
  color:#7d7d7d;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(13px,1vw,16px);
  line-height:1;
  font-weight:500;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.vctl-content h2 {
  margin:0;
  color:#121212;
  font-family:"Playfair Display","Cormorant Garamond",Georgia,serif;
  font-size:clamp(45px,4.4vw,70px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.045em;
}

.vctl-rule {
  display:block;
  width:100%;
  height:1px;
  margin:clamp(26px,2.8vw,42px) 0 clamp(30px,3vw,48px);
  background:#ddd8d1;
}

.vctl-products {
  display:grid;
  gap:22px;
}

.vctl-product-card {
  min-height:120px;
  padding:14px 14px;
  display:grid;
  grid-template-columns:92px minmax(0,1fr) 42px;
  gap:18px;
  align-items:center;
  border:1px solid #dedbd6;
  border-radius:14px;
  background:#fff;
  color:#111;
  text-decoration:none;
  box-shadow:0 13px 30px rgba(35,30,24,.035);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}

.vctl-product-card:hover,
.vctl-product-card:focus-visible {
  color:#111;
  transform:translateY(-3px);
  border-color:#cbc4bb;
  box-shadow:0 18px 42px rgba(35,30,24,.09);
  outline:none;
}

.vctl-product-card img {
  width:92px;
  height:92px;
  border-radius:12px;
  object-fit:cover;
  object-position:center top;
  background:#ede8e1;
}

.vctl-product-copy {
  display:block;
  min-width:0;
}

.vctl-product-copy small {
  display:block;
  margin:0 0 6px;
  color:#8a8a8a;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.vctl-product-copy strong {
  display:block;
  margin:0 0 20px;
  color:#181818;
  font-family:"Playfair Display","Cormorant Garamond",Georgia,serif;
  font-size:clamp(19px,1.45vw,25px);
  line-height:1.05;
  font-weight:400;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vctl-product-copy b {
  display:block;
  color:#0a0a0a;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:18px;
  line-height:1;
  font-weight:800;
}

.vctl-plus {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  justify-self:end;
  border-radius:50%;
  color:#fff;
  background:#000;
  font-family:"Inter",Arial,sans-serif;
  font-size:24px;
  line-height:1;
  font-weight:300;
}

.vctl-stage {
  position:relative;
  min-width:0;
}

.vctl-slider {
  position:relative;
  height:clamp(410px,42vw,610px);
  border-radius:14px;
  overflow:hidden;
  background:#d6d2cd;
}

.vctl-slide {
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .42s ease,visibility .42s ease;
}

.vctl-slide.is-active {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.vctl-compare {
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:14px;
  cursor:ew-resize;
  user-select:none;
  touch-action:pan-y;
  background:#ddd9d2;
}

.vctl-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 26%;
  transform:scale(1.015);
  transition:transform .6s ease;
}

.vctl-compare:hover .vctl-image { transform:scale(1.045); }

.vctl-left-pane {
  position:absolute;
  inset:0 auto 0 0;
  width:var(--vctl-split,50%);
  overflow:hidden;
  will-change:width;
}

.vctl-divider {
  position:absolute;
  top:0;
  bottom:0;
  left:var(--vctl-split,50%);
  width:3px;
  background:#fff;
  transform:translateX(-50%);
  box-shadow:0 0 16px rgba(0,0,0,.08);
  will-change:left;
}

.vctl-handle {
  position:absolute;
  left:var(--vctl-split,50%);
  top:50%;
  z-index:3;
  width:58px;
  height:124px;
  padding:0;
  border:0;
  border-radius:999px;
  color:#666;
  background:#fff;
  box-shadow:0 14px 34px rgba(45,38,30,.14);
  transform:translate(-50%,-50%);
  cursor:ew-resize;
  touch-action:none;
  will-change:left;
}

.vctl-handle span,
.vctl-handle span::after {
  content:"";
  position:absolute;
  top:50%;
  width:1.5px;
  height:20px;
  background:#777;
  transform:translateY(-50%);
}

.vctl-handle span { left:26px; }
.vctl-handle span::after { left:7px; }

.vctl-badge {
  position:absolute;
  z-index:2;
  bottom:38px;
  min-width:198px;
  padding:17px 30px;
  border-radius:999px;
  color:#fff;
  background:rgba(117,113,108,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(17px,1.35vw,22px);
  line-height:1;
  font-weight:700;
  text-align:center;
}

.vctl-badge--left { left:6%; }
.vctl-badge--right { right:5.5%; }

.vctl-arrows {
  position:absolute;
  z-index:5;
  right:18px;
  top:18px;
  display:flex;
  gap:10px;
}

.vctl-arrows button {
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  color:#111;
  background:rgba(255,255,255,.78);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  cursor:pointer;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}

.vctl-arrows button:hover {
  color:#fff;
  background:#111;
  transform:translateY(-2px);
}

.vctl-arrows svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:1024px) {
  .vctl-shell {
    grid-template-columns:1fr;
  }

  .vctl-stage { order:1; }
  .vctl-content { order:2; }
  .vctl-slider { height:clamp(420px,64vw,620px); }
  .vctl-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px) {
  .vctl-section {
    padding:42px 16px;
  }

  .vctl-content h2 {
    font-size:42px;
  }

  .vctl-slider {
    height:430px;
    border-radius:18px;
  }

  .vctl-arrows {
    display:none;
  }

  .vctl-products {
    grid-template-columns:1fr;
    gap:14px;
  }

  .vctl-product-card {
    grid-template-columns:82px minmax(0,1fr) 38px;
    min-height:104px;
    gap:14px;
  }

  .vctl-product-card img {
    width:82px;
    height:82px;
  }

  .vctl-product-copy strong {
    white-space:normal;
    margin-bottom:12px;
  }

  .vctl-handle {
    width:52px;
    height:108px;
  }

  .vctl-badge {
    bottom:24px;
    min-width:auto;
    padding:13px 18px;
    font-size:15px;
  }

  .vctl-badge--left { left:16px; }
  .vctl-badge--right { right:16px; }
}

@media (prefers-reduced-motion:reduce) {
  .vctl-section *, .vctl-section *::before, .vctl-section *::after {
    animation:none!important;
    transition:none!important;
  }
}