.hero-slide{position:absolute;inset:0;isolation:isolate;background:#fbd2e3}
.hero-slide-blank{background:#f9bdce;container-type:size}
.hero-slide-blank .art-hero-photo{inset:50% 5% auto auto;transform:translateY(-50%);width:min(64cqw,150cqh);height:auto;aspect-ratio:3 / 2;object-fit:contain;object-position:center;mask-image:linear-gradient(to right,transparent,#000 6%,#000 99%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 94%,transparent);mask-composite:intersect}
.hero-slide-transfer{background:#aaf5ed;container-type:size}
.hero-slide-transfer .art-hero-photo{inset:50% 5% auto auto;transform:translateY(-50%);width:min(64cqw,150cqh);height:auto;aspect-ratio:3 / 2;max-width:none;object-fit:contain;object-position:center;mask-image:linear-gradient(to right,transparent,#000 1%,#000 99%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
@media(min-width:601px) and (max-width:1000px){.hero-slide-transfer .art-hero-photo,.hero-slide-blank .art-hero-photo{width:min(59cqw,150cqh)}}
.hero-slide-tools{background:#fff58c;container-type:size}
.hero-slide-tools .art-hero-photo{inset:50% 5% auto auto;transform:translateY(-50%);width:min(64cqw,144cqh);height:auto;aspect-ratio:3 / 2;max-width:none;object-fit:contain;object-position:center;mask-image:linear-gradient(to right,transparent,#000 2%,#000 99%,transparent)}
@media(min-width:601px) and (max-width:1000px){.hero-slide-tools .art-hero-photo{width:min(59cqw,144cqh)}}
.hero-range{display:block;font-size:16px;line-height:1.5;margin-top:9px;font-weight:700}
.art-hero .art-hero-copy{padding-top:24px;padding-bottom:66px}
.art-hero .art-hero-copy>.hero-brand{font-size:64px;font-weight:800;line-height:1;margin:0 0 12px;color:#222722}
.hero-controls{position:absolute;bottom:12px;left:6%;display:flex;align-items:center;gap:4px;z-index:2;background:#ffffffeb;border:1px solid #22272224;border-radius:6px;padding:2px 5px}
.hero-controls button{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;padding:0;border:0;border-radius:4px;background:transparent;color:#222722;cursor:pointer}
.hero-controls button:hover{background:#22272214}
.hero-controls button:focus-visible{outline:2px solid #16765e;outline-offset:2px}
.hero-controls svg{width:18px;height:18px;pointer-events:none}
.hero-dots{display:flex;align-items:center}
.hero-dots button{width:28px;flex-basis:28px}
.hero-dots span{width:7px;height:7px;border:1px solid #505650;border-radius:50%;background:transparent}
.hero-dots [aria-current=true] span{background:#16765e;border-color:#16765e}
.hero-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:900px){.art-hero .art-hero-copy>.hero-brand{font-size:52px}.hero-controls{left:5%}}
@media(max-width:600px){
  .art-hero .art-hero-copy{padding:25px 22px}
  .art-hero .art-hero-copy>.hero-brand{font-size:24px;margin-bottom:8px}
  .hero-range{font-size:13px;margin-top:6px}
  .hero-slide-transfer h2 br,.hero-slide-tools h2 br{display:initial}
  .hero-slide-transfer h2,.hero-slide-tools h2{font-size:27px}
  .hero-controls{left:18px;bottom:10px;gap:0;padding:2px}
  .hero-controls button{width:30px;flex-basis:30px;height:32px}
  .hero-dots button{width:24px;flex-basis:24px}
  .hero-slide-transfer .art-hero-photo,.hero-slide-tools .art-hero-photo{object-position:right center}
  .hero-slide-transfer .art-hero-photo{top:auto;bottom:48px;right:2%;transform:none;height:auto;width:min(96cqw,305px);max-width:none;object-position:center}
  .hero-slide-transfer .art-hero-copy>p:not(.hero-kicker):not(.hero-brand){line-height:1.55;margin-bottom:10px}
  .hero-slide-transfer .art-hero-copy{padding-top:14px}
  .hero-slide-tools .art-hero-photo{top:auto;bottom:48px;right:2%;transform:none;width:min(96cqw,290px);height:auto;object-position:center}
  .hero-slide-tools .art-hero-copy{padding-top:0}
  .hero-slide-tools .art-hero-copy>p:not(.hero-kicker):not(.hero-brand){line-height:1.55;margin-bottom:10px}
  .hero-slide-blank .art-hero-photo{top:auto;bottom:48px;right:2%;transform:none;width:min(96cqw,285px);height:auto;object-position:center}
  .hero-slide-blank .art-hero-copy{padding-top:0}
  .art-hero .campaign-caption{bottom:55px}
}

/* Reserve separate responsive layout areas for copy and product photography. */
.art-store .art-hero{display:grid;height:auto;min-height:0}
.art-hero .hero-slide{position:relative;inset:auto;grid-area:1 / 1;display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);align-items:center;gap:clamp(20px,3vw,54px);padding:32px 5% 70px;min-height:460px;container-type:normal}
/* Hidden slides still determine the banner's height, avoiding jumps on rotation. */
.art-hero .hero-slide[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
.art-hero .hero-slide .art-hero-copy{grid-column:1;grid-row:1;position:relative;width:100%;max-width:none;min-width:0;height:auto;padding:0;margin:0;justify-content:center}
.art-hero .hero-slide .art-hero-photo{grid-column:2;grid-row:1;position:relative;inset:auto;transform:none;z-index:0;display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3 / 2;object-fit:contain;object-position:center}
.art-hero .hero-slide h1,.art-hero .hero-slide .hero-brand{font-size:clamp(38px,4.3vw,64px);line-height:1.05}
.art-hero .hero-slide h2{font-size:clamp(26px,2.7vw,40px);line-height:1.2;overflow-wrap:break-word}
.art-hero .hero-slide h2 br{display:initial}
.art-hero .hero-slide .art-hero-copy>p:not(.hero-kicker):not(.hero-brand){font-size:clamp(12px,1.1vw,15px);line-height:1.7}
.art-hero .art-cta{max-width:100%;white-space:normal}
@media(max-width:760px){
  .art-hero .hero-slide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:22px;min-height:0;padding:26px 5% 64px}
  .art-hero .hero-slide .art-hero-copy{grid-column:1;grid-row:1}
  .art-hero .hero-slide .art-hero-photo{grid-column:1;grid-row:2;width:100%;max-width:600px;justify-self:center}
  .art-hero .hero-slide h1,.art-hero .hero-slide .hero-brand{font-size:clamp(36px,7vw,48px)}
  .art-hero .hero-slide h2{font-size:clamp(25px,4.5vw,32px)}
  .art-hero .hero-slide .art-hero-copy>p:not(.hero-kicker):not(.hero-brand){font-size:13px;margin-bottom:16px}
  .art-hero .hero-controls{left:5%}
}

/* Larger product-led campaigns; remove filters that soften product boundaries. */
.art-hero .hero-slide .art-hero-photo{mask-image:none;filter:none}
@media(min-width:761px){
  .art-hero .hero-slide{grid-template-columns:minmax(0,.64fr) minmax(0,1.36fr);column-gap:clamp(22px,2.4vw,40px);padding:48px 2.5% 12px 5%;min-height:clamp(444px,calc(44vw - 36px),724px)}
  .art-hero .hero-slide .art-hero-photo{width:94%;max-width:94%;justify-self:center;align-self:center;object-fit:contain;object-position:center;transform:none}
  .art-hero .hero-slide .art-hero-copy{margin-bottom:52px}
  .art-hero .hero-controls{bottom:24px}
}

/* Only the empty outer background blends; product contours stay opaque and unfiltered. */
.art-hero .hero-slide .art-hero-photo{mask-image:linear-gradient(to right,transparent,#000 1%,#000 99%,transparent),linear-gradient(to bottom,transparent,#000 1%,#000 99%,transparent);mask-composite:intersect}
/* Match the transfer photograph backdrop; blend only its empty outer edge. */
.art-hero .hero-slide-transfer{background:#acfbef}
.art-hero .hero-slide-transfer .art-hero-photo{mask-image:linear-gradient(to right,transparent,#000 .6%,#000 99.4%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect;background:transparent;border:0;box-shadow:none}