/* Full-photo category campaigns; all presentation inherits store tokens. */
.odai-warm-home .oh-hero.warm-native-hero { color:var(--warm-surface); background:var(--warm-ink); height:clamp(calc(var(--space-128)*2.75),31vw,calc(var(--space-128)*4)); }
.odai-warm-home .warm-native-hero .oh-slide > .oh-shade { background:none; }
.odai-warm-home .warm-native-hero .oh-slide picture img { object-position:center top; }
.warm-native-hero-copy { position:absolute; z-index:4; inset-block-start:50%; inset-inline-start:6%; transform:translateY(-50%); width:40%; max-width:calc(var(--space-128)*4.5); display:grid; justify-items:start; gap:var(--space-16); text-align:start; }
.warm-native-hero-copy p,.warm-native-hero-copy h2 { margin:0; }
.warm-native-hero-eyebrow { font-size:var(--text-small); font-weight:500; color:var(--color-rose-200); }
.warm-native-hero-copy h2 { font-size:clamp(var(--text-hero),3.3vw,calc(var(--text-hero)*1.6)); line-height:1.25; font-weight:600; text-wrap:balance; color:var(--warm-surface); }
.warm-native-hero-description { font-size:var(--text-lead); line-height:1.8; max-width:46ch; text-wrap:pretty; }
.warm-native-hero-note { font-size:var(--text-body); line-height:1.6; color:var(--color-rose-200); }
.odai-warm-home .warm-native-hero-copy .oh-btn { margin-block-start:var(--space-8); min-height:var(--space-48); padding-inline:var(--space-24); border:1px solid var(--warm-surface); border-radius:var(--radius-control); color:var(--warm-ink); background:var(--warm-surface); font-size:var(--text-body); font-weight:600; }
.warm-native-hero .oh-hero-dot { background:transparent; }
.warm-native-hero .oh-hero-dot::after { border-color:var(--warm-surface); }
.warm-native-hero .oh-hero-dot[aria-pressed='true']::after { background:var(--warm-surface); }
.warm-native-hero .oh-hero-control { color:var(--warm-ink); background:var(--warm-surface); }
.odai-warm-home .warm-native-hero .oh-btn:focus-visible,.odai-warm-home .warm-native-hero .oh-hero-dot:focus-visible,.odai-warm-home .warm-native-hero .oh-hero-control:focus-visible { outline:2px solid var(--warm-surface); outline-offset:var(--space-4); }
@media(hover:hover) { .odai-warm-home .warm-native-hero-copy .oh-btn:hover { background:var(--color-rose-200); border-color:var(--color-rose-200); } }
@media(max-width:767px) {
 .odai-warm-home .oh-hero.warm-native-hero { height:clamp(calc(var(--space-128)*4.5),150vw,calc(var(--space-128)*5)); }
 .odai-warm-home .warm-native-hero .oh-slide > .oh-shade { background:linear-gradient(to top,var(--warm-ink),color-mix(in srgb,var(--warm-ink) 90%,transparent) 20%,transparent 52%); }
 .warm-native-hero-copy { inset: auto var(--space-24) var(--space-48); transform:none; width:auto; max-width:none; gap:var(--space-8); justify-items:center; text-align:center; }
 .warm-native-hero-eyebrow { display:none; }
 .warm-native-hero-copy h2 { font-size:var(--text-display); line-height:1.25; }
 .warm-native-hero-description { font-size:var(--text-small); line-height:1.6; }
 .warm-native-hero-note { font-size:var(--text-small); }
 .odai-warm-home .warm-native-hero-copy .oh-btn { min-height:var(--space-48); margin-block-start:var(--space-4); padding-inline:var(--space-16); font-size:var(--text-small); }
}

/* Still campaign banners under the categories (single-photo hero mode). */
.warm-hero-banners { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.warm-hero-banner { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--warm-radius, 20px); background: var(--warm-photo); color: var(--warm-surface); text-decoration: none; }
.warm-hero-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.warm-hero-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--warm-mesh-shade, rgba(52, 24, 64, 0.68)), rgba(52, 24, 64, 0) 62%); }
.warm-hero-banner-copy { position: absolute; inset-inline: 20px; inset-block-end: 16px; z-index: 1; display: grid; gap: 4px; }
.warm-hero-banner-copy strong { font-size: 22px; font-weight: 600; line-height: 1.4; }
.warm-hero-banner-copy > span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.warm-hero-banner-copy svg { width: 18px; height: 18px; }
.warm-hero-banner:focus-visible { outline: 2px solid var(--warm-ink); outline-offset: 3px; }
@media (min-width: 768px) { .warm-hero-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .warm-hero-banner-copy { inset-inline: 28px; inset-block-end: 24px; } .warm-hero-banner-copy strong { font-size: 26px; } }