/* The storefront and editor preview share this banner layout. */
.hero-banner{position:relative;display:grid;height:auto;min-height:0;overflow:hidden;align-items:stretch;background:#faf7f5;isolation:isolate;container:hero-banner/inline-size}
body #main>.hero.hero-banner{box-sizing:border-box;width:var(--store-content-width,min(100%,1440px));max-width:var(--store-content-max,1440px);margin-inline:auto}
.hero-banner[hidden],.hero-banner [hidden]{display:none!important}
.hero-banner .hero-category-media{position:relative;grid-area:1/1;inset:auto;aspect-ratio:var(--hero-aspect,4/1);overflow:hidden;background:none;transform:none;scale:none;animation:none;transition:none}
.hero-banner .hero-category-media::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(18,15,13,.55),rgba(18,15,13,.1));opacity:0;pointer-events:none}
.hero-banner[data-overlay="true"] .hero-category-media::after{opacity:1}
.hero-banner .hero-category-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .4s ease;pointer-events:none}
.hero-banner .hero-category-slide.is-active{opacity:1;z-index:1}
.hero-banner .hero-category-slide :is(img,video){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;opacity:1;transform:none;scale:none;animation:none}
:is(#hero,.hh-hero-preview).hero.hero-banner .hero-content{position:relative;grid-area:1/1;z-index:3;align-self:end;justify-self:start;box-sizing:border-box;width:fit-content;max-width:min(590px,90%);margin:clamp(16px,3vw,40px);padding:0;color:#fff;opacity:1;transform:none;animation:none;transition:none;will-change:auto}
.hero-banner .hero-content>*{opacity:1;transform:none;animation:none}
:is(#hero,.hh-hero-preview).hero.hero-banner[data-content-position="center"] .hero-content{justify-self:center;text-align:center}
:is(#hero,.hh-hero-preview).hero.hero-banner[data-content-position="right"] .hero-content{justify-self:end;text-align:right}
.hero-banner[data-content-position="center"] .hero-actions{justify-content:center}
.hero-banner[data-content-position="right"] .hero-actions{justify-content:flex-end}
.hero-banner .hero-content :is(h1,h2){margin:0;color:inherit;font-family:var(--serif,Georgia,serif);font-size:clamp(24px,3.5vw,56px);line-height:1.06}
.hero-banner .hero-content .eyebrow{margin:0 0 10px;color:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.hero-banner .hero-copy{max-width:520px;margin:14px 0 18px;font-size:clamp(13px,1.2vw,17px);line-height:1.5}
.hero-banner .hero-actions{display:flex;gap:10px;flex-wrap:wrap;min-height:0}
:is(#hero,.hh-hero-preview).hero.hero-banner .hero-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:clamp(32px,8cqi,40px);box-sizing:border-box;padding:clamp(7px,1.8cqi,10px) clamp(14px,3.5cqi,22px);border:1px solid #a50064;border-radius:22px;background:#a50064;color:#fff;text-decoration:none;font:700 clamp(10px,3cqi,12px)/1.3 var(--sans,Arial,sans-serif);letter-spacing:.03em;text-transform:uppercase;box-shadow:none}
:is(#hero,.hh-hero-preview).hero.hero-banner .hero-actions a:hover{background:#86104f;border-color:#86104f}
:is(#hero,.hh-hero-preview).hero.hero-banner .hero-actions a:focus-visible,.hero-banner .hero-category-dot:focus-visible{outline:2px solid #a50064;outline-offset:3px}
.hero-banner .hero-category-dots{position:absolute;z-index:4;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px}
.hero-banner .hero-category-dot{width:8px;height:8px;padding:0;border:1px solid #fff;border-radius:999px;background:#89717e;cursor:pointer}
.hero-banner .hero-category-dot.is-active{width:22px;background:#fff;box-shadow:0 0 0 1px #89717e}
@media(min-width:768px){.hero.hero-banner.disabled-desktop{display:none}}
@media(max-width:767px){
  .hero.hero-banner.disabled-desktop{display:grid}
  .hero.hero-banner.disabled-mobile{display:none}
  body #main>.hero.hero-banner{width:100%;max-width:none;margin:0;border-radius:0}
}
@container hero-banner (max-width:767px){
  .hero.hero-banner .hero-content{display:block}
  :is(#hero,.hh-hero-preview).hero.hero-banner .hero-content{position:absolute;grid-area:1/1;max-width:calc(100% - 24px);margin:8px 12px 22px;color:#fff}
  :is(#hero,.hh-hero-preview).hero.hero-banner .hero-actions a{min-height:clamp(24px,7.2cqi,32px);padding:clamp(5px,1.2cqi,6px) clamp(10px,2.5cqi,14px);font-size:clamp(9px,2.55cqi,11px)}
  .hero-banner .hero-content .hero-copy{margin:10px 0 14px}
  .hero-banner .hero-category-dots{top:auto;bottom:8px;left:12px;transform:none;gap:5px}
  .hero-banner .hero-category-dot{width:6px;height:6px}
  .hero-banner .hero-category-dot.is-active{width:16px}
}
@media(prefers-reduced-motion:reduce){.hero-banner .hero-category-slide{transition:none}}

