@font-face { font-family:"Scarlet Compare Heading"; src:url("../fonts/bricolage-grotesque-bold.woff2") format("woff2"); font-style:normal; font-weight:700; font-display:swap; }
@font-face { font-family:"Scarlet Compare Text"; src:url("../fonts/geist-regular.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
.scarlet-before-after { width:100%; margin:0; padding:70px 0; background:#ece8df; color:#4e351e; font-family:"Scarlet Compare Text",Arial,sans-serif; }
.scarlet-before-after *, .scarlet-before-after *::before, .scarlet-before-after *::after { box-sizing:border-box; }
.scarlet-before-after__container { width:100%; max-width:1720px; margin:0 auto; padding:0 50px; }
.scarlet-before-after__header { margin:0 0 30px; text-align:center; }
.scarlet-before-after__header h2 { margin:0; color:#4e351e; font-family:"Scarlet Compare Heading",Arial,sans-serif; font-size:clamp(30px,3.6vw,52px); font-weight:700; line-height:1.1; }
.scarlet-before-after__header p { margin:12px 0 0; color:#4e351e; font-size:clamp(14px,1.25vw,18px); line-height:1.5; }
.scarlet-before-after__stage { position:relative; width:100%; aspect-ratio:20 / 9; overflow:hidden; background:#f8f7f4; touch-action:pan-y; }
.scarlet-before-after__layer { position:absolute; inset:0; overflow:hidden; }
.scarlet-before-after__layer img { display:block; width:100%; height:100%; object-fit:cover; }
.scarlet-before-after__layer--before { clip-path:inset(0 calc(100% - var(--sba-position,55%)) 0 0); }
.scarlet-before-after__divider { position:absolute; z-index:2; top:0; bottom:0; left:var(--sba-position,55%); width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; }
.scarlet-before-after__grip { position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; gap:4px; width:56px; height:56px; border-radius:50%; background:#fff; color:#1b1b1b; box-shadow:0 8px 24px rgba(0,0,0,.2); transform:translate(-50%,-50%); }
.scarlet-before-after__chevron { display:block; width:7px; height:7px; border-top:1.8px solid currentColor; border-right:1.8px solid currentColor; }
.scarlet-before-after__chevron--left { transform:rotate(-135deg); }
.scarlet-before-after__chevron--right { transform:rotate(45deg); }
.scarlet-before-after__range { position:absolute; z-index:3; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.scarlet-before-after__stage:focus-within .scarlet-before-after__grip { outline:2px solid #806132; outline-offset:3px; }
.scarlet-before-after__products { display:flex; align-items:stretch; justify-content:center; gap:10px; margin:30px 0 0; }
.scarlet-before-after__product { display:flex; flex:0 1 328px; align-items:center; min-width:0; gap:16px; padding:12px 16px; background:#fff; color:#4e351e; text-decoration:none; }
.scarlet-before-after__product:hover, .scarlet-before-after__product:focus-visible { color:#806132; text-decoration:none; }
.scarlet-before-after__product:focus-visible { outline:2px solid #806132; outline-offset:2px; }
.scarlet-before-after__product-image { flex:0 0 60px; width:60px; height:60px; background:#f8f7f4; }
.scarlet-before-after__product-image img { display:block; width:100%; height:100%; object-fit:contain; }
.scarlet-before-after__product-info { display:flex; flex-direction:column; min-width:0; gap:4px; }
.scarlet-before-after__product-name { color:#4e351e; font-size:15px; line-height:1.35; }
.scarlet-before-after__product-price { color:#806132; font-size:14px; line-height:1.35; }
@media(max-width:749px) {
  .scarlet-before-after { padding:35px 0; }
  .scarlet-before-after__container { padding:0 15px; }
  .scarlet-before-after__header { margin-bottom:24px; }
  .scarlet-before-after__header h2 { font-size:24px; }
  .scarlet-before-after__header p { display:none; }
  .scarlet-before-after__stage { aspect-ratio:4 / 5; }
  .scarlet-before-after__products { justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; margin:20px -15px 0; padding:4px 15px; }
  .scarlet-before-after__products::-webkit-scrollbar { display:none; }
  .scarlet-before-after__product { flex:0 0 min(280px,85%); scroll-snap-align:start; }
}
.scarlet-before-after__label { position:absolute; bottom:20px; padding:9px 14px; background:rgba(255,255,255,.88); color:#4e351e; font:600 14px/1.2 "Scarlet Compare Text",Arial,sans-serif; letter-spacing:.03em; pointer-events:none; }
.scarlet-before-after__label--left { left:20px; }
.scarlet-before-after__label--right { right:20px; }
@media(max-width:749px) { .scarlet-before-after__label { bottom:10px; padding:7px 9px; font-size:10px; } .scarlet-before-after__label--left { left:10px; } .scarlet-before-after__label--right { right:10px; } }
.scarlet-before-after__label { top:20px; bottom:auto; padding:0; background:transparent; }
@media (max-width:749px) { .scarlet-before-after__label { top:10px; bottom:auto; padding:0; } }