.home-hero:has(.hero-carousel){grid-template-columns:.78fr 1.22fr;column-gap:30px}
.home-hero:has(.hero-carousel) .hero-scribble{right:calc(61% - 25px);bottom:auto;top:29px;width:190px;height:183px}
.home-hero:has(.hero-carousel) .hero-scribble>span{left:-16px;width:210px;font-size:15px}
.hero-carousel{min-width:0;width:100%;height:516px;position:relative;isolation:isolate}
.carousel-stage{position:relative;height:465px;width:100%;overflow:hidden;border-radius:22px;touch-action:pan-y pinch-zoom}
.carousel-slide{position:absolute;top:0;left:50%;width:60%;height:465px;transform-origin:50% 50%;transition:transform 650ms cubic-bezier(.22,1,.36,1),opacity 500ms ease;will-change:transform}
.carousel-slide[data-position="center"]{z-index:3;opacity:1;transform:translateX(-50%) scale(1)}
.carousel-slide[data-position="previous"]{z-index:1;opacity:.7;transform:translateX(-101%) scale(.58)}
.carousel-slide[data-position="next"]{z-index:1;opacity:.7;transform:translateX(1%) scale(.58)}
.hero-carousel .hero-art{width:100%;height:465px;max-height:none;display:block;overflow:hidden;font-family:Outfit,Manrope,sans-serif;border-radius:22px;box-shadow:0 12px 24px #192b210a}
.hero-carousel .hero-art:hover{transform:none}
.hero-carousel .hero-art:focus-visible{outline-offset:-5px}
.hero-carousel .hero-product.is-photo{width:88%;left:6%;top:13%;height:59%}
.hero-carousel .hero-product-name{left:22px;right:22px;bottom:25px}
.hero-carousel .hero-product-name strong{font-size:16px;line-height:1.45;display:block}
.hero-carousel .hero-label{top:25px;left:19px;right:16px}
.hero-carousel .hero-comparison-badge{position:absolute;top:53px;left:19px;z-index:4;display:inline-flex;align-items:center;max-width:calc(100% - 110px);padding:5px 7px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--lime);font-size:8px;font-weight:800;letter-spacing:.45px;line-height:1.4;text-transform:uppercase;overflow-wrap:anywhere;pointer-events:none}
.hero-carousel .week-label{font-size:7px;letter-spacing:1.3px}
.hero-carousel .round-sticker{width:68px;height:68px;top:61px;right:18px}
.hero-carousel .carousel-rank-mark{display:flex;align-items:baseline;gap:2px;transform:rotate(-7deg) skewX(-2deg);font-family:Outfit,Manrope,sans-serif;font-style:italic}
.hero-carousel .sticker-number{font-size:28px;letter-spacing:-1.7px}
.hero-carousel .sticker-hash{font-size:17px;position:relative;top:-2px}
.hero-carousel .round-sticker>.sticker-star:last-child{font-size:8px;margin-top:3px}
.hero-carousel .hero-price{left:23px;bottom:143px;padding:10px 15px 8px}
.hero-carousel .hero-price strong{font-size:44px}
.hero-carousel .hero-price small{font-size:23px}
.hero-carousel .hero-highlights li{font-size:8px;padding:3px 6px}
.hero-carousel .circle-arrow{width:34px;height:34px}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:8px;height:51px;position:relative;z-index:4}
.carousel-control{width:36px;height:36px;display:grid;place-items:center;background:transparent;border-radius:50%;color:#56704b;transition:background 180ms ease,color 180ms ease}
.carousel-control:hover{background:#e8eee2;color:var(--ink)}
.carousel-control svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.carousel-dots{display:flex;align-items:center;gap:0}
.carousel-dot{position:relative;width:32px;height:40px;padding:0;display:grid;place-items:center;background:transparent;transition:width 250ms ease}
.carousel-dot:before{content:"";width:5px;height:4px;border-radius:10px;background:#bdc9b6;transition:width 250ms ease,background 250ms ease}
.carousel-dot[aria-current="true"]{width:58px}
.carousel-dot[aria-current="true"]:before{width:42px;background:#dce5d5}
.carousel-progress{position:absolute;top:50%;left:50%;width:42px;height:4px;margin:-2px 0 0 -21px;background:#698b3c;border-radius:10px;transform:scaleX(0);transform-origin:left center;opacity:0}
.carousel-dot[aria-current="true"] .carousel-progress{opacity:1}
.carousel-toggle .play-icon{display:none}
.carousel-toggle[aria-pressed="true"] .pause-icon{display:none}
.carousel-toggle[aria-pressed="true"] .play-icon{display:block}
@media(min-width:951px) and (max-width:1150px){.home-hero:has(.hero-carousel){grid-template-columns:.72fr 1.28fr;column-gap:20px}.carousel-slide{width:64%}.home-hero:has(.hero-carousel) h1{font-size:51px}.home-hero:has(.hero-carousel) .hero-title-rest{font-size:43px}.hero-carousel .hero-price strong{font-size:39px}.hero-carousel .hero-product-name strong{font-size:14px}}
@media(max-width:950px){.home-hero:has(.hero-carousel){grid-template-columns:1fr;row-gap:28px;max-width:760px}.home-hero:has(.hero-carousel) .hero-copy{max-width:560px}.home-hero:has(.hero-carousel) .hero-scribble{display:none}.home-hero:has(.hero-carousel) .hero-scroll-cue{margin-top:-23px}.carousel-slide{width:60%}.hero-carousel .hero-product-name strong{font-size:16px}}
@media(max-width:600px){.home-hero:has(.hero-carousel){row-gap:27px}.hero-carousel{height:453px}.carousel-stage,.carousel-slide{height:402px}.carousel-slide{width:78%}.carousel-slide[data-position="previous"]{transform:translateX(-89%) scale(.62)}.carousel-slide[data-position="next"]{transform:translateX(-11%) scale(.62)}.hero-carousel .hero-art{height:402px;border-radius:20px}.hero-carousel .hero-label{top:22px;left:16px;right:12px}.hero-carousel .week-label{font-size:6px;letter-spacing:1px}.hero-carousel .round-sticker{width:59px;height:59px;right:15px;top:53px}.hero-carousel .sticker-number{font-size:24px}.hero-carousel .sticker-hash{font-size:15px}.hero-carousel .hero-product.is-photo{top:14%;height:51%;width:94%;left:3%}.hero-carousel .hero-price{left:17px;bottom:139px;padding:10px 12px 8px}.hero-carousel .hero-price strong{font-size:37px}.hero-carousel .hero-price small{font-size:20px}.hero-carousel .hero-product-name{left:17px;right:17px;bottom:23px}.hero-carousel .hero-product-name strong{font-size:14px;letter-spacing:-.35px}.hero-carousel .hero-product-name small{font-size:8px}.hero-carousel .hero-highlights{gap:4px;margin-top:7px}.hero-carousel .hero-highlights li{font-size:7px;padding:3px 5px}.hero-carousel .circle-arrow{width:29px;height:29px}.hero-carousel .hero-info{padding-right:8px}.carousel-control{width:40px;height:40px}.carousel-dot{height:40px}}
@media(prefers-reduced-motion:reduce){.carousel-slide,.carousel-control,.carousel-dot,.carousel-dot:before{transition:none}.carousel-dot[aria-current="true"]:before{background:#698b3c}.carousel-progress,.carousel-toggle{display:none}}
