/* Deliberately scoped: existing Simpson sections and the global header retain their styles. */
.simpson-hero { margin-top:97px; background:#f7f1e7; color:#302d29; position:relative; isolation:isolate; }
.simpson-hero .br-object { position:relative; top:auto; left:auto; right:auto; padding:18px 0 0; margin:0; z-index:2; }
.simpson-hero .breadcrumbs__link { color:#62564c; }
.simpson-hero .breadcrumbs__link_main { color:#a85835; }
.simpson-hero__slider:not(.slick-initialized) > :not(:first-child) { display:none; }
.simpson-hero__slider .slick-list { overflow:hidden; }
.simpson-hero__slider .slick-track { display:flex; }
.simpson-hero__slider .slick-slide { height:auto; min-width:0; }
.simpson-premium__inner { display:grid; grid-template-columns:1fr 1.12fr; align-items:center; gap:30px; max-width:1320px; min-height:620px; padding:20px 40px 32px; margin:auto; }
.simpson-premium__copy { padding:18px 0; min-width:0; }
.simpson-premium__label { text-transform:uppercase; letter-spacing:2.5px; font-size:12px; font-weight:600; color:#9b603e; margin:0 0 22px; }
.simpson-premium :is(h1,h2) { font-size:clamp(38px,3.65vw,57px); line-height:1.08; font-weight:600; letter-spacing:-1.8px; color:#302d29; margin:0 0 24px; }
.simpson-premium__description { font-size:17px; line-height:1.65; color:#766b5f; max-width:470px; margin:0 0 26px; }
.simpson-premium__benefits { padding:0; margin:0 0 34px; list-style:none; display:flex; flex-wrap:wrap; gap:12px 20px; font-size:13px; color:#62564c; }
.simpson-premium__benefits li::before { content:'✓'; color:#a36b45; margin-right:7px; }
.simpson-premium__actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; }
.simpson-premium__primary { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:18px 25px; border-radius:6px; background:#b7643f; color:#fff; font-size:15px; font-weight:600; box-shadow:0 8px 20px #a65a3320; }
.simpson-premium__primary:hover { background:#9b5030; color:#fff; }
.simpson-premium__secondary { color:#675342; font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.simpson-premium__visual { display:block; min-width:0; }
.simpson-premium__visual img { display:block; width:100%; height:auto; aspect-ratio:1; mix-blend-mode:multiply; }
.simpson-hero__controls { display:flex; align-items:center; justify-content:center; gap:20px; padding:0 24px 22px; }
.simpson-hero__controls button { cursor:pointer; border:1px solid #d6c5b3; background:transparent; color:#795d46; }
.simpson-hero__prev,.simpson-hero__next { width:40px; height:40px; border-radius:50%; font-size:21px; }
.simpson-hero__dots .slick-dots { position:static; display:flex; align-items:center; gap:10px; width:auto; padding:0; margin:0; list-style:none; }
.simpson-hero__dots .slick-dots li { display:block; width:12px; height:12px; margin:0; padding:0; }
.simpson-hero__dots .slick-dots button { display:block; width:12px; height:12px; padding:0; border:0; border-radius:50%; background:#d7c9b7; font-size:0; }
.simpson-hero__dots .slick-dots button::before { display:none; }
.simpson-hero__dots .slick-active button { background:#a65a38; }
.simpson-hero__pause { border:0 !important; font-size:12px; padding:8px; }
.simpson-hero :focus-visible { outline:2px solid #a65a38; outline-offset:4px; }
.simpson-hero .portrait-simpson__screen { margin:0; padding:25px 0; min-height:620px; }
.simpson-hero .portrait-simpson__screen .simpson-screen { min-height:560px; }
.simpson-hero .portrait-simpson__screen .title { font-size:48px; line-height:1.15; }
.simpson-hero .portrait-simpson__screen .img img { max-height:560px; width:auto; object-fit:contain; }
@media (max-width:1100px) {
 .simpson-premium__inner { gap:20px; padding:24px 32px; min-height:600px; }
 .simpson-premium :is(h1,h2) { font-size:40px; }
 .simpson-premium__actions { gap:20px; }
}
@media (max-width:991px) { .simpson-hero { margin-top:97px; } }
@media (max-width:767px) {
 .simpson-hero { margin-top:70px; }
 .simpson-hero .br-object { padding:12px 0 0; }
 .simpson-premium__inner { grid-template-columns:1fr; padding:25px 24px 0; gap:8px; min-height:0; }
 .simpson-premium__copy { padding:0; }
 .simpson-premium__label { font-size:10px; letter-spacing:2px; margin-bottom:16px; }
 .simpson-premium :is(h1,h2) { font-size:36px; letter-spacing:-1px; margin-bottom:17px; }
 .simpson-premium__description { font-size:14px; line-height:1.6; margin-bottom:18px; }
 .simpson-premium__benefits { font-size:11px; gap:8px 12px; margin-bottom:22px; }
 .simpson-premium__actions { gap:18px; }
 .simpson-premium__primary { padding:16px 20px; font-size:14px; gap:20px; }
 .simpson-premium__secondary { font-size:12px; }
 .simpson-premium__visual { width:calc(100% + 24px); margin:0 -12px; max-width:480px; justify-self:center; }
 .simpson-hero__controls { padding-bottom:18px; gap:16px; }
 .simpson-hero .portrait-simpson__screen { min-height:0; padding:28px 0 10px; }
 .simpson-hero .portrait-simpson__screen .simpson-screen { min-height:0; }
 .simpson-hero .portrait-simpson__screen .title { font-size:34px; }
 .simpson-hero .portrait-simpson__screen .img img { max-height:380px; max-width:100%; }
}
/* Override inherited generic inner/breadcrumb spacing only inside this hero. */
.simpson-hero { margin-top:108px; overflow:clip; }
.simpson-hero .breadcrumbs { margin-bottom:0; }
.simpson-hero .simpson-premium__inner { margin:0 auto; min-height:620px; }
.simpson-hero .simpson-premium__visual { max-width:560px; justify-self:center; }
.simpson-hero .slick-slide { margin-bottom:0; }
@media (max-width:991px) { .simpson-hero { margin-top:97px; } }
@media (max-width:767px) {
 .simpson-hero { margin-top:70px; }
 .simpson-hero .simpson-premium__inner { min-height:0; }
 .simpson-hero .simpson-premium__visual { max-width:480px; }
}
/* Keep the initial offer tab compact beside the hero; it still opens on click. */
body:has(.simpson-hero) { overflow-x:clip; }
body.simpson-coupon-compact #offer { left:0; bottom:80px; }
body.simpson-coupon-compact #offer .popup-offer { width:38px; height:156px; padding:0; overflow:hidden; border-radius:0 9px 9px 0; }
body.simpson-coupon-compact #offer .hb_popup_coupon > p,
body.simpson-coupon-compact #offer .hb_popup_coupon > a { display:none; }
body.simpson-coupon-compact #offer .hb_popup_coupon > .hb_popup_coupon_t1 { display:flex; position:absolute; left:0; top:26px; width:38px; height:120px; margin:0; align-items:center; justify-content:center; writing-mode:vertical-rl; transform:rotate(180deg); }
body.simpson-coupon-compact #offer .hb_popup_coupon_t1 > span { font-size:12px; line-height:1.2; white-space:nowrap; }
@media (min-width:768px) and (max-width:991px) {
 .simpson-hero .portrait-simpson__screen .simpson-screen { grid-template-columns:1fr 1fr; gap:20px; }
 .simpson-hero .portrait-simpson__screen .title { font-size:36px; }
 .simpson-hero .portrait-simpson__screen .img img { max-height:420px; max-width:100%; }
}
/* Approved mockup: yellow accents, strong headline and a dominant pink cartoon canvas. */
.simpson-hero { background:#fff7ee; color:#171d2a; }
.simpson-hero .simpson-premium__inner { max-width:1680px; grid-template-columns:44% 56%; gap:0; min-height:650px; padding:18px 48px 0; }
.simpson-hero .simpson-premium__copy { position:relative; z-index:1; padding:24px 0 38px; }
.simpson-premium__label { display:inline-block; position:relative; font-size:clamp(16px,1.5vw,23px); font-weight:800; text-transform:none; letter-spacing:-.5px; color:#171d2a; padding:8px 18px; margin:0 0 28px; transform:rotate(-2deg); isolation:isolate; }
.simpson-premium__label::before { content:''; position:absolute; inset:0 -5px; z-index:-1; background:#ffcf43; clip-path:polygon(3% 8%,96% 0,99% 9%,97% 18%,100% 26%,98% 35%,100% 47%,97% 54%,99% 64%,97% 77%,99% 86%,95% 95%,2% 100%,3% 89%,0 80%,3% 68%,0 56%,3% 46%,0 35%,3% 27%,1% 18%); }
.simpson-hero .simpson-premium :is(h1,h2) { font-size:clamp(40px,3.85vw,66px); line-height:1.08; font-weight:800; color:#171d2a; letter-spacing:-1.8px; margin:0 0 34px; }
.simpson-premium :is(h1,h2) > span { display:block; white-space:nowrap; }
.simpson-premium__underline { position:relative; width:max-content; }
.simpson-premium__underline::after { content:''; position:absolute; height:10px; left:48%; right:0; bottom:-12px; border-top:5px solid #ffbe00; border-radius:50%; transform:rotate(1deg); }
.simpson-hero .simpson-premium__description { color:#252b38; font-size:clamp(16px,1.43vw,23px); line-height:1.4; max-width:540px; margin:0 0 34px; }
.simpson-hero .simpson-premium__benefits { display:flex; flex-wrap:nowrap; gap:0; color:#171d2a; font-size:clamp(11px,.91vw,15px); font-weight:600; margin:0 0 38px; }
.simpson-premium__benefits li { display:flex; align-items:center; gap:10px; padding:0 16px; border-left:1px solid #cfc7c0; }
.simpson-premium__benefits li:first-child { border:0; padding-left:0; }
.simpson-premium__benefits li::before { display:none; }
.simpson-premium__benefits svg { width:36px; height:40px; flex-shrink:0; color:#222a36; }
.simpson-hero .simpson-premium__actions { gap:16px; flex-wrap:nowrap; }
.simpson-hero .simpson-premium__primary { color:#171d2a; background:linear-gradient(#ffc400,#ffba00); border:1px solid #f5b300; border-bottom:4px solid #e29e00; border-radius:15px; padding:18px 28px; font-size:clamp(14px,1.2vw,19px); font-weight:700; gap:22px; box-shadow:0 8px 20px #ffc00018; white-space:nowrap; }
.simpson-premium__primary span { font-size:24px; font-weight:400; }
.simpson-hero .simpson-premium__primary:hover { background:#ffd13c; color:#171d2a; }
.simpson-hero .simpson-premium__secondary { border:1.5px solid #171d2a; padding:20px 23px; border-radius:15px; color:#171d2a; font-size:clamp(13px,1.15vw,18px); font-weight:700; text-decoration:none; white-space:nowrap; }
.simpson-premium__secondary:hover { background:#fff0d2; }
.simpson-hero .simpson-premium__visual { max-width:none; width:calc(100% + 45px); margin-left:-30px; }
.simpson-hero .simpson-premium__visual img { mix-blend-mode:multiply; }
.simpson-hero__dots .slick-active button { background:#ffbd00; }
.simpson-hero__dots .slick-dots button { background:#ded5cc; }
.simpson-hero__controls { padding-top:0; }
.simpson-hero :focus-visible { outline-color:#cb8700; }
@media (max-width:1100px) {
 .simpson-hero .simpson-premium__inner { padding:24px 32px 0; grid-template-columns:46% 54%; min-height:620px; }
 .simpson-hero .simpson-premium :is(h1,h2) { font-size:clamp(32px,3.8vw,43px); letter-spacing:-1px; }
 .simpson-premium__benefits li { padding:0 9px; gap:6px; }
 .simpson-premium__benefits svg { width:28px; }
 .simpson-hero .simpson-premium__primary { padding:16px 18px; gap:12px; }
 .simpson-hero .simpson-premium__secondary { padding:19px 15px; }
 .simpson-hero .simpson-premium__actions { flex-wrap:wrap; }
}
@media (max-width:767px) {
 .simpson-hero .simpson-premium__inner { grid-template-columns:1fr; min-height:0; padding:22px 24px 0; gap:10px; }
 .simpson-hero .simpson-premium__copy { padding:0; }
 .simpson-hero .simpson-premium__label { font-size:15px; padding:7px 12px; margin-bottom:22px; }
 .simpson-hero .simpson-premium :is(h1,h2) { font-size:clamp(29px,8vw,36px); letter-spacing:-1px; margin-bottom:28px; }
 .simpson-premium__underline::after { bottom:-9px; border-top-width:4px; height:7px; }
 .simpson-hero .simpson-premium__description { font-size:14px; margin-bottom:22px; }
 .simpson-hero .simpson-premium__benefits { font-size:10px; margin-bottom:24px; }
 .simpson-premium__benefits li { gap:5px; padding:0 8px; }
 .simpson-premium__benefits svg { width:25px; height:30px; }
 .simpson-hero .simpson-premium__actions { flex-wrap:nowrap; gap:10px; }
 .simpson-hero .simpson-premium__primary { font-size:12px; padding:13px 13px; border-radius:11px; gap:8px; }
 .simpson-premium__primary span { font-size:18px; }
 .simpson-hero .simpson-premium__secondary { font-size:11px; padding:16px 12px; border-radius:11px; }
 .simpson-hero .simpson-premium__visual { width:calc(100% + 28px); margin:0 -14px; max-width:500px; }
}
@media (min-width:1101px) {
 .simpson-hero .simpson-premium__visual { width:min(calc(100% + 45px),700px); justify-self:center; }
}
.simpson-hero__dots .slick-dots .slick-active button { background:#ffbd00; }

/* The hero background continues beneath the transparent initial header. */
.simpson-hero { margin-top:0; padding-top:108px; }
body:has(.simpson-hero) .vz-art.vz-header:not(.is-fixed) { background:transparent; box-shadow:none; }
@media (max-width:991px) { .simpson-hero { margin-top:0; padding-top:108px; } }
@media (max-width:767px) { .simpson-hero { margin-top:0; padding-top:90px; } }
/* Viewport-sized Simpson hero: keep all first-slide content and controls visible. */
.simpson-hero { --fit-height:calc(100svh - 71px); height:var(--fit-height); min-height:0; padding-top:108px; display:flex; flex-direction:column; }
.simpson-hero .br-object { flex:0 0 auto; padding:6px 0 0; }
.simpson-hero .breadcrumbs { margin:0; }
.simpson-hero__slider { flex:1 1 0; min-height:0; width:100%; }
.simpson-hero__slider .slick-list,.simpson-hero__slider .slick-track,.simpson-hero__slider .slick-slide { height:100%; min-height:0; }
.simpson-hero .simpson-premium__inner { height:100%; min-height:0; padding:8px 48px 4px; }
.simpson-hero .simpson-premium__copy { min-height:0; min-width:0; padding:0; }
.simpson-hero .simpson-premium__label { font-size:clamp(13px,1.3vw,20px); margin-bottom:20px; padding:6px 14px; }
.simpson-hero .simpson-premium :is(h1,h2) { font-size:clamp(30px,min(3.8vw,6.5svh),60px); margin-bottom:26px; }
.simpson-hero .simpson-premium__description { font-size:clamp(14px,min(1.3vw,2.4svh),21px); margin-bottom:22px; }
.simpson-hero .simpson-premium__benefits { font-size:clamp(10px,.9vw,14px); margin-bottom:24px; }
.simpson-hero .simpson-premium__benefits svg { width:30px; height:34px; }
.simpson-hero .simpson-premium__actions a { min-height:44px; padding:12px 20px; font-size:14px; }
.simpson-hero .simpson-premium__visual { width:100%; height:100%; min-height:0; max-width:none; margin:0; }
.simpson-hero .simpson-premium__visual img { width:100%; height:100%; aspect-ratio:auto; object-fit:contain; }
.simpson-hero__controls { flex:0 0 46px; height:46px; padding:0 20px 8px; gap:16px; }
.simpson-hero__prev,.simpson-hero__next { height:32px; width:32px; }
.simpson-hero .portrait-simpson__screen { min-height:0; height:100%; overflow-y:auto; padding:12px 0; }
.simpson-hero .portrait-simpson__screen .simpson-screen { min-height:0; }
.simpson-hero .portrait-simpson__screen .img img { max-height:calc(100svh - 270px); }
@media (max-width:768px) { .simpson-hero { --fit-height:calc(100svh - 50px); } }
@media (min-width:768px) and (max-width:1100px) {
 .simpson-hero .simpson-premium__inner { padding-left:30px; padding-right:30px; }
 .simpson-hero .simpson-premium :is(h1,h2) { font-size:clamp(25px,3.4vw,38px); }
 .simpson-hero .simpson-premium__benefits li { padding:0 7px; gap:5px; }
 .simpson-hero .simpson-premium__benefits svg { width:23px; }
 .simpson-hero .simpson-premium__actions { flex-wrap:wrap; gap:10px; }
 .simpson-hero .simpson-premium__actions a { font-size:12px; padding:11px 14px; }
}
@media (max-width:767px) {
 .simpson-hero { padding-top:90px; }
 .simpson-hero .br-object { padding-top:2px; }
 .simpson-hero .simpson-premium__inner { display:flex; flex-direction:column; padding:10px 24px 0; gap:4px; }
 .simpson-hero .simpson-premium__copy { flex:0 0 auto; width:100%; }
 .simpson-hero .simpson-premium__label { font-size:12px; padding:5px 10px; margin-bottom:12px; }
 .simpson-hero .simpson-premium :is(h1,h2) { font-size:clamp(27px,min(8vw,4.7svh),35px); margin-bottom:21px; }
 .simpson-hero .simpson-premium__description { font-size:12px; line-height:1.35; margin-bottom:14px; }
 .simpson-hero .simpson-premium__benefits { font-size:9px; margin-bottom:16px; }
 .simpson-hero .simpson-premium__benefits svg { width:23px; height:26px; }
 .simpson-hero .simpson-premium__actions { flex-wrap:nowrap; gap:10px; }
 .simpson-hero .simpson-premium__actions a { min-height:38px; font-size:11px; padding:9px 12px; }
 .simpson-hero .simpson-premium__primary span { font-size:18px; }
 .simpson-hero .simpson-premium__visual { flex:1 1 0; min-height:0; width:100%; max-width:none; margin:0; }
}
@media (min-width:768px) and (max-height:700px) {
 .simpson-hero .simpson-premium__label { font-size:13px; margin-bottom:14px; }
 .simpson-hero .simpson-premium :is(h1,h2) { font-size:clamp(26px,5.5svh,40px); margin-bottom:22px; }
 .simpson-hero .simpson-premium__description { font-size:14px; margin-bottom:16px; }
 .simpson-hero .simpson-premium__benefits { margin-bottom:16px; }
 .simpson-hero .simpson-premium__benefits svg { width:24px; height:28px; }
 .simpson-hero .simpson-premium__actions a { min-height:38px; font-size:12px; padding:9px 14px; }
}
@media (max-height:500px) and (min-aspect-ratio:4/3) {
 .simpson-hero { padding-top:100px; }
 .simpson-hero .simpson-premium__inner { display:grid; grid-template-columns:48% 52%; padding:4px 40px 0; gap:12px; }
 .simpson-hero .br-object { display:none; }
 .simpson-hero .simpson-premium__label { font-size:10px; margin-bottom:8px; padding:3px 8px; }
 .simpson-hero .simpson-premium :is(h1,h2) { font-size:clamp(21px,3.2vw,28px); margin-bottom:15px; }
 .simpson-hero .simpson-premium__underline::after { bottom:-7px; border-top-width:3px; }
 .simpson-hero .simpson-premium__description { font-size:11px; line-height:1.25; margin-bottom:8px; }
 .simpson-hero .simpson-premium__benefits { font-size:8px; margin-bottom:10px; }
 .simpson-hero .simpson-premium__benefits svg { display:none; }
 .simpson-hero .simpson-premium__actions { flex-wrap:nowrap; gap:8px; }
 .simpson-hero .simpson-premium__actions a { min-height:30px; font-size:10px; padding:7px 10px; }
 .simpson-hero__controls { flex-basis:36px; height:36px; padding-bottom:4px; }
}
.simpson-hero .simpson-premium__actions a { line-height:1.2; }
.simpson-hero .simpson-premium__primary span { font-size:18px; line-height:1; }
@media (max-height:500px) and (min-aspect-ratio:4/3) {
 .simpson-hero { padding-top:108px; }
 .simpson-hero .simpson-premium__label { font-size:9px; line-height:1.2; padding:3px 8px; margin-bottom:4px; }
 .simpson-hero .simpson-premium :is(h1,h2) { font-size:21px; line-height:1.06; margin-bottom:12px; }
 .simpson-hero .simpson-premium__description { font-size:9.5px; line-height:1.25; margin-bottom:6px; }
 .simpson-hero .simpson-premium__benefits { font-size:8px; line-height:1.1; margin-bottom:6px; }
 .simpson-hero .simpson-premium__actions a { min-height:28px; line-height:1.2; padding:6px 9px; font-size:10px; }
 .simpson-hero .simpson-premium__primary span { font-size:14px; }
}
@media (max-width:767px) and (max-height:500px) and (min-aspect-ratio:4/3) { .simpson-hero { padding-top:90px; } }
@media (max-width:360px) and (max-height:650px) {
 .simpson-hero .simpson-premium__inner { padding:6px 16px 0; }
 .simpson-hero .simpson-premium__label { font-size:10px; padding:3px 8px; margin-bottom:8px; }
 .simpson-hero .simpson-premium :is(h1,h2) { font-size:26px; line-height:1.04; margin-bottom:17px; }
 .simpson-hero .simpson-premium__description { font-size:11px; line-height:1.3; margin-bottom:10px; }
 .simpson-hero .simpson-premium__benefits { font-size:8px; margin-bottom:10px; }
 .simpson-hero .simpson-premium__benefits svg { width:19px; height:22px; }
 .simpson-hero .simpson-premium__actions { gap:8px; }
 .simpson-hero .simpson-premium__actions a { min-height:35px; padding:8px; font-size:10.5px; }
 .simpson-hero .simpson-premium__primary { gap:8px; }
 .simpson-hero .simpson-premium__primary span { font-size:16px; }
}
@media (max-width:700px) and (max-height:700px) {
 body:has(.simpson-hero) #offer.offer-hidden { bottom:54px; }
 body:has(.simpson-hero) #offer.offer-hidden .popup-offer { height:100px; }
 body:has(.simpson-hero) #offer.offer-hidden .hb_popup_coupon > .hb_popup_coupon_t1 { top:26px; height:74px; }
 body:has(.simpson-hero) #offer.offer-hidden .hb_popup_coupon_t1 > span { font-size:10px; }
}

/* One continuous hero scene. Products have real alpha, not their own square backdrop. */
.simpson-hero {
 background:
   radial-gradient(ellipse at 78% 35%,rgba(249,197,174,.25),transparent 65%),
   linear-gradient(180deg,#fff8ef 0%,#fff8ef 76%,#fae4d5 94%,#fff4e9 100%);
}
.simpson-hero .simpson-premium { background:transparent; }
.simpson-hero .simpson-premium__visual,
.simpson-hero .simpson-premium__visual img { background:transparent; border:0; box-shadow:none; }
.simpson-hero .simpson-premium__visual img { mix-blend-mode:normal; mask-image:none; }

/* Increase the product composition while keeping the live copy and viewport layout. */
@media (min-width:1101px) {
 .simpson-hero .simpson-premium__visual img { transform:translateY(-18px) scale(1.18); transform-origin:50% 50%; }
}
@media (min-width:768px) and (max-width:1100px) and (min-height:600px) {
 .simpson-hero .simpson-premium__visual img { transform:scale(1.10); transform-origin:50% 50%; }
}
@media (max-width:767px) and (min-height:800px) {
 .simpson-hero .simpson-premium__visual img { transform:scale(1.08); transform-origin:50% 50%; }
}

/* Fade slides can extend into the shared scene without clipping product tops. */
.simpson-hero__slider .slick-list { overflow:visible; }
.simpson-hero .simpson-premium__copy { position:relative; z-index:2; }
.simpson-hero .simpson-premium__visual { position:relative; z-index:1; pointer-events:none; }

.simpson-hero__slider .slick-track { overflow:visible; }
@media (min-width:768px) and (max-width:1100px) and (max-height:900px) {
 body.simpson-coupon-compact:has(.simpson-hero) #offer .popup-offer { width:28px; }
 body.simpson-coupon-compact:has(.simpson-hero) #offer .hb_popup_coupon_t1,
 body.simpson-coupon-compact:has(.simpson-hero) #offer .popup-offer::before { width:28px; }
}

/* Additional 20% relative to the previous desktop scale (1.18 × 1.20). */
@media (min-width:1101px) {
 .simpson-hero .simpson-premium__visual img { transform:translateY(-28px) scale(1.416); }
}

@media (min-width:1101px) {
 .simpson-hero .simpson-premium__visual { display:flex; align-items:center; }
 .simpson-hero .simpson-premium__visual img { flex:none; max-height:calc((100svh - 71px) * .78); transform:translateY(-42px) scale(1.416); }
}

@media(min-width:1101px){.simpson-hero .simpson-premium__visual img{max-height:none;transform:translate(0,-24px) scale(1.416);}}
@media(min-width:1500px) and (min-aspect-ratio:185/100){.simpson-hero .simpson-premium__visual img{transform:translate(20px,-24px) scale(1.416);}}
@media(min-width:1101px) and (max-aspect-ratio:185/100){.simpson-hero .simpson-premium__visual img{transform:translate(-20px,-24px) scale(1.3);}}

/* Align first-slide copy with the existing 1350px section grid. */
@media(min-width:1101px){.simpson-hero .simpson-premium__copy{margin-left:clamp(0px,calc((100vw - 1446px)/2),117px);}}

/* Keep decorative slider tracks inside their mobile section boundaries. */
@media(max-width:767px){body:has(.simpson-hero) .simpson-pattern,body:has(.simpson-hero) #examples{overflow-x:clip;}}

/* The original dark slide shares the full hero backdrop, including header and controls. */
.simpson-hero:has(.portrait-simpson__screen.slick-active){background:#1e2532;}
.simpson-hero:has(.portrait-simpson__screen.slick-active) .portrait-simpson__screen{background-color:transparent;}
.simpson-hero:has(.portrait-simpson__screen.slick-active) .breadcrumbs__link,
.simpson-hero:has(.portrait-simpson__screen.slick-active) .simpson-hero__controls button{color:#fff;}
.simpson-hero:has(.portrait-simpson__screen.slick-active) .simpson-hero__controls button{border-color:#ffffff60;}
body:has(.portrait-simpson__screen.slick-active) .vz-header:not(.is-fixed) .js-drop-newmenu,
body:has(.portrait-simpson__screen.slick-active) .vz-header:not(.is-fixed) .mainl{color:#fff;}
body:has(.portrait-simpson__screen.slick-active) .vz-header:not(.is-fixed) .logo{background:#fff8; border-radius:6px;}

/* The legacy couple image dissolves into the shared scene instead of a rectangular edge. */
.simpson-hero .portrait-simpson__screen .img > picture > img {
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 5%,#000 84%,transparent 100%);
 mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 5%,#000 84%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-composite:intersect;
}
body:has(.simpson-hero) .vz-header .logo,
body:has(.portrait-simpson__screen.slick-active) .vz-header:not(.is-fixed) .logo {
 background:#fff!important;
 border-radius:6px;
}

/* Put the light on the full hero, not on a blurred rectangle clipped by the slide. */
.simpson-hero .portrait-simpson__screen .img::after { content:none!important; }
.simpson-hero:has(.portrait-simpson__screen.slick-active) {
 background:radial-gradient(ellipse at 76% 68%,rgba(254,217,16,.13) 0%,rgba(254,217,16,.04) 25%,transparent 58%),#1e2532;
}

/* Requested additional 15% on the legacy couple image only. */
.simpson-hero .portrait-simpson__screen .img > picture > img {
 scale:1.15;
 transform-origin:50% 50%;
}

@media(min-width:1101px){.simpson-hero .portrait-simpson__screen{overflow:visible;}}

/* Wide desktop: reserve a real 100px gutter, including the scaled visual. */
@media (min-width:1920px) {
 .simpson-hero .simpson-premium__inner { grid-template-columns:44% minmax(0,1fr); column-gap:100px; }
 .simpson-hero .simpson-premium__visual img { transform-origin:left center; transform:translate(0,-24px) scale(1.3); }
}

/* Mobile is a content-led vertical composition, not a viewport-sized desktop scene. */
@media (max-width:767px), (max-width:1000px) and (max-height:500px){
 .simpson-hero{height:auto;max-height:none;min-height:0;display:block;overflow-x:clip;overflow-y:visible}
 .simpson-hero .br-object{display:block;padding:10px 0 0;position:relative}
 .simpson-hero__slider{flex:none;min-height:0}
 .simpson-hero__slider .slick-list{height:auto;overflow-x:clip;overflow-y:visible}
 .simpson-hero__slider .slick-track{display:block;height:auto}
 .simpson-hero__slider .slick-slide{height:auto;max-height:none;min-height:0}
 .simpson-hero .simpson-premium__inner{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;padding:18px 0 0;gap:12px}
 .simpson-hero .simpson-premium__copy{flex:none;box-sizing:border-box;width:100%;min-height:0;padding:0 20px;margin:0}
 .simpson-hero .simpson-premium__label{font-size:13px;line-height:1.4;letter-spacing:0;padding:6px 10px;margin:0 0 18px}
 .simpson-hero .simpson-premium :is(h1,h2){font-size:clamp(36px,10vw,56px);line-height:1.05;letter-spacing:-1.1px;margin:0 0 26px}
 .simpson-hero .simpson-premium__underline::after{bottom:-9px;border-top-width:4px}
 .simpson-hero .simpson-premium__description{font-size:18px;line-height:1.4;max-width:none;margin:0 0 22px}
 .simpson-hero .simpson-premium__benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;font-size:11.5px;line-height:1.35;margin:0 0 22px}
 .simpson-hero .simpson-premium__benefits li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 8px;min-width:0}
 .simpson-hero .simpson-premium__benefits li:first-child{padding-left:0}
 .simpson-hero .simpson-premium__benefits svg{display:block;width:26px;height:28px;flex:none}
 .simpson-hero .simpson-premium__actions{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}
 .simpson-hero .simpson-premium__actions a{box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-height:56px;padding:14px 16px;font-size:17px;line-height:1.2;width:100%}
 .simpson-hero .simpson-premium__primary span{font-size:24px}
 .simpson-hero .simpson-premium__visual{flex:none;display:block;width:100%;height:auto;max-height:none;min-height:0;max-width:none;margin:0;align-self:center}
 .simpson-hero .simpson-premium__visual img{display:block;width:100%;height:auto;max-height:none;max-width:none;aspect-ratio:2/3;object-fit:contain;transform:none;scale:none;mask-image:none;mix-blend-mode:normal}
 .simpson-hero .portrait-simpson__screen{height:auto;max-height:none;min-height:0;overflow:visible;padding:24px 0}
 .simpson-hero .portrait-simpson__screen .simpson-screen{min-height:0;height:auto}
 .simpson-hero .portrait-simpson__screen .img img{max-height:none;width:100%;height:auto;scale:none;transform:none}
 .simpson-hero .portrait-simpson__screen .title{font-size:36px;line-height:1.1}
 .simpson-hero .portrait-simpson__screen .yellow-btn{min-height:56px}
 .simpson-hero__controls{height:auto;min-height:64px;box-sizing:border-box;padding:10px 12px 18px;gap:10px}
 .simpson-hero__prev,.simpson-hero__next{width:44px;height:44px;flex:none;font-size:24px}
 .simpson-hero__pause{min-height:44px;min-width:64px;font-size:14px;padding:8px}
 .simpson-hero__dots .slick-dots{gap:0}
 .simpson-hero__dots .slick-dots li{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none}
 .simpson-hero__dots .slick-dots button{width:44px;height:44px;background:transparent;border:0;position:relative}
 .simpson-hero__dots .slick-dots button::before{content:'';display:block;position:absolute;inset:14px;width:16px;height:16px;border-radius:50%;background:#d7c9b7;opacity:1}
 .simpson-hero__dots .slick-active button{background:transparent}
 .simpson-hero__dots .slick-active button::before{background:#a46d00}
}
@media (min-width:768px) and (max-width:1000px) and (max-height:500px){.simpson-hero{padding-top:108px}.simpson-hero .simpson-premium__copy{max-width:650px}.simpson-hero .simpson-premium__visual{max-width:650px}}


/* Controls sit directly under the artwork; page-wide floating tools stay outside hero. */
@media (max-width:767px), (max-width:1000px) and (max-height:500px){
 .simpson-hero__controls{margin-top:24px;padding-top:0}
 body:has(.simpson-hero) #offer.offer-hidden{position:fixed;left:0;right:auto;bottom:80px;top:auto}
 body:has(.simpson-hero) .phone-mobile-btn{position:fixed;right:16px;left:auto;bottom:24px;top:auto}
}

/* Consistent page-wide discount tab: reserve a separate line for the plus sign. */
@media (max-width:767px), (max-width:1000px) and (max-height:500px){
 body:has(.simpson-hero) #offer.offer-hidden{width:38px!important;height:180px!important}
 body:has(.simpson-hero) #offer.offer-hidden .popup-offer{position:relative;width:38px;height:180px;padding:0;overflow:hidden;border-radius:0 9px 9px 0}
 body:has(.simpson-hero) #offer.offer-hidden .hb_popup_coupon>p,
 body:has(.simpson-hero) #offer.offer-hidden .hb_popup_coupon>a{display:none}
 body:has(.simpson-hero) #offer.offer-hidden .hb_popup_coupon>.hb_popup_coupon_t1{display:flex;position:absolute;left:0;top:38px;width:38px;height:132px;margin:0;padding:0;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg)}
 body:has(.simpson-hero) #offer.offer-hidden .hb_popup_coupon_t1>span{font-size:13px;line-height:1.2;white-space:nowrap;letter-spacing:0}
 body:has(.simpson-hero) #offer.offer-hidden .popup-offer::before{content:'+';position:absolute;display:flex;align-items:center;justify-content:center;left:0;top:5px;width:38px;height:28px;margin:0;padding:0;background:none;transform:none;font:700 27px/1 Arial,sans-serif;color:#fff}
 .simpson-hero__controls{margin-top:12px}
 .simpson-hero .br-object{padding-top:6px}
 .simpson-hero .simpson-premium__inner{padding-top:10px}
 .simpson-hero .simpson-premium__label{margin-bottom:12px}
 .simpson-hero .simpson-premium :is(h1,h2){margin-bottom:20px}
 .simpson-hero .simpson-premium__description{line-height:1.35;margin-bottom:16px}
 .simpson-hero .simpson-premium__benefits{margin-bottom:16px}
 .simpson-hero .simpson-premium__benefits li{gap:4px}
 .simpson-hero .simpson-premium__benefits svg{height:24px}
 .simpson-hero .simpson-premium__actions{gap:8px}
 .simpson-hero .simpson-premium__actions a{min-height:52px;padding:12px 16px}
}
@media (max-width:767px) and (max-height:660px){
 .simpson-hero .simpson-premium__label{margin-bottom:10px}
 .simpson-hero .simpson-premium :is(h1,h2){font-size:36px;margin-bottom:18px}
 .simpson-hero .simpson-premium__description{margin-bottom:12px}
 .simpson-hero .simpson-premium__benefits{margin-bottom:12px}
}
@media (max-width:767px), (max-width:1000px) and (max-height:500px){
 /* Reclaim transparent image padding without moving or clipping the painted canvas. */
 .simpson-hero .simpson-premium__visual{margin-bottom:clamp(-26px,-4vw,-12px)}
}


/* Couple assets: mobile stays vertical; PC is anchored to the full slide height. */
.simpson-hero .portrait-simpson__screen .img>picture.couple-visual{display:block;width:min(100%,587px);aspect-ratio:587/555}
.simpson-hero .portrait-simpson__screen .img>picture.couple-visual>img{width:100%;height:auto;max-height:none;aspect-ratio:587/555;object-fit:contain;-webkit-mask-image:none;mask-image:none;transform:none}
@media(max-width:767px), (max-width:1000px) and (max-height:500px){
 .simpson-hero .portrait-simpson__screen .img>picture.couple-visual{width:100%;aspect-ratio:2/3}
 .simpson-hero .portrait-simpson__screen .img>picture.couple-visual>img{width:100%;height:auto;max-height:none;aspect-ratio:2/3;object-fit:contain;scale:none;transform:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 88%,rgba(0,0,0,.96) 92%,rgba(0,0,0,.6) 97%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 88%,rgba(0,0,0,.96) 92%,rgba(0,0,0,.6) 97%,transparent 100%)}
}
@media(min-width:1101px){
 .simpson-hero .portrait-simpson__screen{position:relative;overflow:visible}
 .simpson-hero .portrait-simpson__screen>.section-frame,
 .simpson-hero .portrait-simpson__screen .section-inner,
 .simpson-hero .portrait-simpson__screen .simpson-screen{position:static}
 .simpson-hero .portrait-simpson__screen .content{position:relative;z-index:2}
 /* Preserve the original text column's flow while the artwork uses the full stage. */
 .simpson-hero .portrait-simpson__screen .img{position:static;height:auto;aspect-ratio:587/555;max-height:555px}
 .simpson-hero .portrait-simpson__screen .img>picture.couple-visual{position:absolute;left:calc(50% + 10px);top:-3.5%;height:107%;width:auto;aspect-ratio:1096/1448;max-width:none;margin:0;pointer-events:none;z-index:1}
 .simpson-hero .portrait-simpson__screen .img>picture.couple-visual>img{display:block;height:100%;width:auto;max-height:none;max-width:none;aspect-ratio:auto;object-fit:contain;object-position:center;scale:none;transform:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 93%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 93%,transparent 100%)}
 .simpson-hero .portrait-simpson__screen .img-badge{position:absolute;left:min(calc(100% - 220px),calc(50% + 10px + (100svh - 249px)*.68));right:auto;top:clamp(20px,8svh,160px);z-index:3}
 .simpson-hero__controls{position:relative;z-index:2001}
}
@media(min-width:1101px) and (max-aspect-ratio:4/3){
 .simpson-hero .portrait-simpson__screen .img-badge{left:calc(50% + 8px);right:auto;top:18px}
}

/* Anchor the painted hairline to the real menu and table fade to the visible bottom. */
@media(min-width:1101px){
 .simpson-hero:has(.portrait-simpson__screen.slick-active){overflow:clip}
 .simpson-hero .portrait-simpson__screen .img>picture.couple-visual{top:var(--pc-couple-top,-3.5%);left:var(--pc-couple-left,calc(50% + 10px));height:var(--pc-couple-height,107%);aspect-ratio:var(--pc-couple-ratio,.7667)}
 .simpson-hero .portrait-simpson__screen .img>picture.couple-visual>img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 90%,rgba(0,0,0,.6) 94%,transparent 96%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 90%,rgba(0,0,0,.6) 94%,transparent 96%,transparent 100%)}
 .simpson-hero .portrait-simpson__screen .img-badge{left:var(--pc-couple-badge-left,calc(50% + 10px))}
}

/* Wide tabletop layer: include tablet and zoomed desktop viewports. */
@media(min-width:768px) and (min-height:501px),(min-width:1101px){
.simpson-hero .portrait-simpson__screen .img>picture.couple-visual::before{content:'';position:absolute;pointer-events:none;left:-45%;width:190%;top:74.5%;height:22%;background:url('/theme/viar/images/hero-simpson/tabletop-wide-v2.webp') center/100% 100% no-repeat;z-index:0;mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);mask-composite:intersect}
.simpson-hero .portrait-simpson__screen .img>picture.couple-visual>img{position:relative;z-index:1;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86.5%,transparent 90.5%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 86.5%,transparent 90.5%,transparent 100%)}
}

@media(min-width:768px) and (max-width:1100px) and (min-height:501px){.simpson-hero .portrait-simpson__screen .img>picture.couple-visual{position:relative;isolation:isolate}}

/* PC: intrinsic image dimensions, with a single height-based composition. */
@media(min-width:1101px){
.simpson-hero .portrait-simpson__screen .img>picture.couple-visual{aspect-ratio:auto}
.simpson-hero .portrait-simpson__screen .img>picture.couple-visual>img{object-fit:fill;object-position:initial;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 var(--pc-image-fade-start),transparent var(--pc-image-fade-end));mask-image:linear-gradient(to bottom,#000 0%,#000 var(--pc-image-fade-start),transparent var(--pc-image-fade-end))}
.simpson-hero .portrait-simpson__screen .img>picture.couple-visual::before{top:var(--pc-table-top);height:var(--pc-table-height)}
}

/* CMS and translated headings must wrap instead of being clipped. */
.simpson-hero .simpson-premium :is(h1,h2)>span{white-space:normal;overflow-wrap:anywhere}

/* Responsive controls remain in the first viewport, without covering slide content. */
.simpson-hero .simpson-hero__controls{position:relative;z-index:2001}
.simpson-hero.simpson-hero--compact-navigation .simpson-hero__controls{top:0;margin:4px 0 10px;min-height:48px;height:auto;flex:0 0 auto;padding:0 8px;gap:8px}
.simpson-hero.simpson-hero--compact-navigation .simpson-hero__prev,
.simpson-hero.simpson-hero--compact-navigation .simpson-hero__next{width:40px;height:40px;flex:none}
.simpson-hero.simpson-hero--compact-navigation .simpson-hero__pause{min-width:0;padding:4px;font-size:14px}

/* Desktop composition uses the remaining viewport below the campaign bar. */
@media(min-width:1101px){
 .simpson-hero{box-sizing:border-box;height:var(--fit-height);max-height:var(--fit-height)}
 .simpson-hero .portrait-simpson__screen .simpson-screen{height:100%;min-height:0}
 .simpson-hero .portrait-simpson__screen>.section-frame,.simpson-hero .portrait-simpson__screen .section-inner{height:100%;min-height:0}
 .simpson-hero .portrait-simpson__screen .content{align-self:center}
}
@media(min-width:1101px) and (max-height:900px){
 .simpson-hero .portrait-simpson__screen .title{font-size:clamp(28px,5.3svh,48px);margin-bottom:clamp(12px,3svh,28px)}
 .simpson-hero .portrait-simpson__screen .yellow-btn{margin-top:clamp(16px,4svh,36px)}
}

/* Long translated headings use the available text column. */
.simpson-hero .simpson-premium__underline{max-width:100%;width:fit-content}
.simpson-hero .simpson-premium__benefits li{min-width:0;overflow-wrap:anywhere}

/* Uploaded scenes retain their own proportions and do not inherit the seed tabletop. */
.simpson-hero .portrait-simpson__screen .img>picture.couple-visual--custom::before{display:none}
.simpson-hero .portrait-simpson__screen .img>picture.couple-visual--custom>img{object-fit:contain;-webkit-mask-image:none;mask-image:none;scale:none}
@media(min-width:1101px){
 .simpson-hero .portrait-simpson__screen .img>picture.couple-visual--custom{left:50%;top:0;width:48%;height:100%;aspect-ratio:auto}
 .simpson-hero .portrait-simpson__screen .img>picture.couple-visual--custom>img{width:100%;height:100%;max-width:100%;object-fit:contain}
}