/* Consistent editorial banners, with a separate treatment for product photography. */
.km-banner-slider{position:relative;background:#202a27;isolation:isolate}
.km-banner-slide[hidden],.km-banner-controls[hidden]{display:none!important}
.km-banner-slider .hero{margin:0;min-height:560px;height:clamp(560px,38vw,660px);padding:0;position:relative;overflow:hidden;color:#fff;background:#202a27}
.km-banner-slider .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border:0;border-radius:0;padding:0}
.km-banner-slider .hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,30,27,.96),rgba(20,30,27,.78) 34%,rgba(20,30,27,.08) 78%)}
.km-banner-slider .hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:52%;height:100%;padding:48px 0 100px 6%;max-width:850px}
.km-banner-slider .eyebrow{font-size:11px;font-weight:700;letter-spacing:2.4px;color:#ffac7e;margin:0 0 22px}
.km-banner-slider h1{font-size:clamp(38px,3.5vw,62px);font-weight:500;line-height:1.08;letter-spacing:-1.8px;max-width:620px;margin:0 0 22px;text-wrap:balance}
.km-banner-slider .hero-content>p:not(.eyebrow){font-size:16px;line-height:1.8;color:#dce2de;max-width:440px;margin:0 0 28px}
.km-banner-slider .hero-content .button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:15px 23px;min-height:50px;border-radius:4px;font-size:14px;font-weight:600;background:#e9540b;color:white;border:1px solid #e9540b}
.km-banner-slider .hero-note{display:none}
.km-banner-slider .km-banner-product{background:#f3f2ee;color:#242c28}
.km-banner-slider .km-banner-product>img{inset:10% 5% 16% auto;width:43%;height:74%;object-fit:contain;mix-blend-mode:multiply}
.km-banner-slider .km-banner-product .hero-shade{background:none;border-bottom:1px solid #dedfd8}
.km-banner-slider .km-banner-product .eyebrow{color:#b94308}
.km-banner-slider .km-banner-product .hero-content>p:not(.eyebrow){color:#66716b}
.km-banner-controls{position:absolute;bottom:25px;left:6%;right:6%;z-index:3;display:flex;gap:12px;align-items:center;padding-top:18px;border-top:1px solid #ffffff30}
.km-banner-controls>button{display:grid;place-items:center;border:1px solid #ffffff55;background:#26312be6;color:white;border-radius:50%;width:38px;height:38px;padding:0;font-size:24px}
.km-banner-controls [data-banner-pause]{margin-left:auto;width:auto;padding:0 16px;border-radius:20px;font-size:11px;letter-spacing:.4px}
.km-banner-dots{display:flex;align-items:center;gap:4px}
.km-banner-dots button{display:grid;place-items:center;width:30px;height:38px;border:0;background:transparent;padding:0}
.km-banner-dots button:after{content:'';width:6px;height:6px;background:#bbc5bd;border-radius:50%;transition:width .2s}
.km-banner-dots button[aria-pressed=true]:after{width:22px;background:#ed641d;border-radius:4px}
.km-banner-slider:has(.km-banner-product:not([hidden])) .km-banner-controls{border-color:#26312b22}
.km-banner-slider:has(.km-banner-product:not([hidden])) .km-banner-controls>button{background:#fff;color:#253129;border-color:#d8ddd5}
.km-banner-controls button:focus-visible{outline:3px solid #ed641d;outline-offset:3px}
.km-banner-slide:not([hidden])>img{animation:km-image-enter .65s ease-out}
.km-banner-slide:not([hidden]) .hero-content{animation:km-copy-enter .45s ease-out}
@keyframes km-image-enter{from{opacity:.3;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes km-copy-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){
.km-banner-slider .hero{height:740px;min-height:740px}
.km-banner-slider .hero-content{width:100%;height:auto;min-height:390px;max-width:none;padding:40px 6% 20px;justify-content:flex-start}
.km-banner-slider h1{font-size:38px;max-width:520px;letter-spacing:-1px}
.km-banner-slider .eyebrow{margin-bottom:16px;font-size:10px}
.km-banner-slider .hero-content>p:not(.eyebrow){font-size:14px;line-height:1.65;margin-bottom:20px}
.km-banner-slider .hero>img{object-position:65% center}
.km-banner-slider .hero-shade{background:linear-gradient(180deg,#15221bf5 0%,#15221bcc 47%,#15221b22 75%,#15221b88)}
.km-banner-slider .km-banner-product>img{inset:auto 8% 85px;width:84%;height:245px}
.km-banner-controls{bottom:20px}
}
@media(prefers-reduced-motion:reduce){.km-banner-slider *{animation:none!important;transition:none!important}}