/* V21: one photographic hero on mobile, and a persistent rate ticket at every width. */
.design-b .carousel-footer{justify-content:flex-end}
.design-a .collection-carousel-footer{justify-content:flex-end}

/* Mid-sized desktop: keep the ticket in the text column, clear of the pouring scene. */
@media(min-width:901px) and (max-width:1180px){
 .design-b .hero-stage{height:auto;min-height:650px}
 .design-b .hero-inner{height:auto;min-height:650px;padding-bottom:42px}
 .design-b .hero-copy{padding:28px 0 0;max-width:min(500px,calc(100vw - 560px))}
 .design-b .hero h1{font-size:clamp(44px,4.8vw,56px)}
 .design-b .hero-copy>.eyebrow{margin-bottom:15px;font-size:15px}
 .design-b .hero-description{font-size:17px;line-height:1.75;margin-top:15px}
 .design-b .hero-buttons{margin-top:19px;gap:10px 17px}
 .design-b .hero-buttons .button{font-size:16px;min-height:49px;padding:12px 18px;gap:18px}
 .design-b .hero-buttons .text-link{font-size:15px;min-height:42px}
 .design-b .hero-reference-price{display:none}
 .design-b .hero-price{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 15px;position:relative;inset:auto;width:min(430px,calc(100vw - 598px));margin:29px 0 0;padding:23px 18px 14px;border-radius:14px;transform:none}
 .design-b .hero-price .price-tag{font-size:12px;top:-13px;left:16px;padding:4px 10px;transform:none}
 .design-b .hero-price .price-label{grid-column:1/-1;font-size:13px}
 .design-b .hero-price .price-label>span{font-size:11px}
 .design-b .hero-price-amount{grid-column:1;grid-row:2;gap:3px;margin:7px 0 3px;white-space:nowrap}
 .design-b .hero-price-amount strong{font-size:clamp(35px,3.8vw,44px);letter-spacing:-.065em;line-height:1.25}
 .design-b .hero-price-amount>span{font-size:17px}
 .design-b .hero-price .price-bottom{grid-column:2;grid-row:2;display:block;align-self:center;margin:5px 0 0;padding:0 0 0 13px;border-top:0;border-left:1px solid #5b0a2133;font-size:10px;line-height:1.6}
 .design-b .hero-price .price-bottom b{display:block;font-size:19px;white-space:nowrap;letter-spacing:-.04em}
 .design-b .hero-price-caption{grid-column:1/-1;display:block;margin-top:5px;font-size:10px;opacity:.8}
}

/* A watermark is a background layer, not a second photograph section. */
@media(max-width:900px){
 .design-a .hero-stage,.design-b .hero-stage{position:relative;display:block;height:auto;min-height:0;padding:0 0 28px;overflow:hidden;isolation:isolate}
 .design-a .hero-stage{background:#f5f1e7}
 .design-b .hero-stage{background:#faf5e2}
 .design-a .hero-stage .hero-image,.design-b .hero-stage .hero-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;min-height:0;margin:0;translate:none;transform:none;object-fit:cover;object-position:65% center;mask-image:none;filter:saturate(.75);opacity:.42;z-index:0;pointer-events:none}
 .design-a .hero-stage:after,.design-b .hero-stage:after{content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#f5f1e7e0 0%,#f5f1e7b8 40%,#f5f1e725 100%)}
 .design-b .hero-stage:after{background:linear-gradient(90deg,#faf5e2e0 0%,#faf5e2b8 40%,#faf5e225 100%)}
 .design-a .hero-stage>.hero-copy,.design-b .hero-inner{position:relative;z-index:2;width:calc(100% - 40px);max-width:520px;height:auto;min-height:0;margin-inline:auto}
 .design-a .hero-copy,.design-b .hero-copy{padding:27px 0 7px;max-width:none}
 .design-a .hero-copy h1{width:100%}
 .design-a .hero-unit-card{display:grid;position:relative;inset:auto;z-index:2;width:calc(100% - 40px);max-width:520px;margin:15px auto 0;padding:17px 20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;background:#373032f5;border-radius:16px}
 .design-a .hero-unit-main{min-width:0}.design-a .hero-unit-main strong{font-size:40px}
 .design-a .hero-unit-top{font-size:13px}.design-a .hero-unit-top>span:last-child{font-size:11px}
 .design-a .hero-unit-main>div>span{font-size:12px}
 .design-a .hero-unit-main small{font-size:17px}
 .design-a .hero-unit-comparison{font-size:11px}.design-a .hero-unit-comparison b{font-size:22px}
 .design-a .hero-unit-foot{display:flex;grid-column:1/-1;margin-top:12px;padding-top:5px}
 .design-a .hero-unit-foot>span{font-size:10px}.design-a .hero-unit-foot>button{font-size:13px;min-height:40px}
 .design-a .hero-stage .hero-photo-button{position:relative;inset:auto;display:block;z-index:2;min-height:40px;width:max-content;max-width:calc(100% - 40px);margin:4px auto -15px;padding:8px 12px;background:none;font-size:11px}
 .design-b .hero-reference-price{display:none}
 .design-b .hero-price{display:block;position:relative;inset:auto;width:100%;max-width:360px;margin:25px 0 0;padding:23px 23px 16px;border-radius:16px;transform:none;box-shadow:0 10px 30px #6355180c}
 .design-b .hero-price .price-tag{font-size:13px;top:-14px;left:20px;padding:4px 11px;transform:none}
 .design-b .hero-price .price-label{font-size:14px}.design-b .hero-price .price-label>span{font-size:12px}
 .design-b .hero-price .hero-price-amount{gap:5px;margin:6px 0 10px;white-space:nowrap}
 .design-b .hero-price .hero-price-amount strong{font-size:56px;line-height:1.2;letter-spacing:-.06em}
 .design-b .hero-price .hero-price-amount>span{font-size:23px}
 .design-b .hero-price .price-bottom{font-size:12px;padding-top:10px}
 .design-b .hero-price .price-bottom b{font-size:22px;white-space:nowrap}
 .design-b .hero-price-caption{display:block;font-size:10px;line-height:1.6;margin-top:10px;opacity:.8}
}
@media(min-width:701px) and (max-width:900px){
 .design-a .hero-stage>.hero-copy,.design-b .hero-inner{width:calc(100% - 80px);max-width:680px}
 .design-a .hero-copy,.design-b .hero-copy{padding-top:35px}
 .design-a .hero-unit-card{width:calc(100% - 80px);max-width:680px;margin-top:22px}
 .design-a .hero-unit-main strong{font-size:46px}.design-a .hero-unit-comparison b{font-size:27px}
 .design-b .hero-copy{max-width:520px}
 .design-b .hero h1{font-size:48px}.design-b .hero h1 br:nth-of-type(2){display:none}
 .design-b .hero-price{max-width:430px}
}
@media(max-width:365px){
 .design-a .hero-stage>.hero-copy,.design-b .hero-inner{width:calc(100% - 36px)}
 .design-a .hero-unit-card{width:calc(100% - 36px);padding:16px;gap:0 10px}
 .design-a .hero-unit-main strong{font-size:32px}.design-a .hero-unit-main small{font-size:15px}
 .design-a .hero-unit-main>div>span{font-size:11px}.design-a .hero-unit-comparison{font-size:10px}.design-a .hero-unit-comparison b{font-size:19px}
 .design-b .hero-price{padding-inline:19px}.design-b .hero-price .hero-price-amount strong{font-size:51px}
 .design-b .hero-price .price-bottom{font-size:11px}.design-b .hero-price .price-bottom b{font-size:21px}
}