/* MichisPlayBox only: homepage hero. No shared tokens or cluster changes. */
.kwb-natural--artesanal .mpb-hero-frame {
  padding: clamp(1.25rem, 3vw, 2.75rem) 0 clamp(2rem, 4vw, 3.75rem);
  background-color: #eee4d7;
  background-image: none;
  border-bottom: 1px solid #dbc5b3;
}
.kwb-natural--artesanal .mpb-hero-frame::before,
.kwb-natural--artesanal .mpb-hero-frame::after { display: none; }
.kwb-natural .mpb-hero-frame > .kwb-hero-editorial__grid {
  box-sizing: border-box;
  width: calc(100% - clamp(1.5rem, 5vw, 5rem));
  max-width: 82rem;
  padding: clamp(1.5rem, 3.8vw, 3.5rem);
  background-color: #302c26;
  background-image: linear-gradient(100deg, rgba(23,22,19,.49) 0%, rgba(23,22,19,.43) 35%, rgba(23,22,19,.16) 57%, transparent 78%), url("hero-salon-cenital.png");
  background-size: 100% 100%, contain;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 3 / 2;
  align-content: center;
  border: 1px solid #736756;
  border-radius: .25rem;
  box-shadow: 0 14px 30px rgba(75, 37, 24, .16);
}
.kwb-natural .mpb-hero-frame h1 { color: #fff8ed; }
.kwb-natural .mpb-hero-frame .kws-eyebrow,
.kwb-natural .mpb-hero-frame .kws-hero__lede { color: #f9eadd; }
.kwb-natural .mpb-hero-frame .kws-btn {
  background: #fff4df;
  border-color: #fff4df;
  color: #663227;
}
.kwb-natural .mpb-hero-frame .kws-btn:hover {
  background: #f3ddbb;
  border-color: #f3ddbb;
  color: #51251e;
}
.kwb-natural .mpb-hero-frame .kws-btn:focus-visible {
  outline: 3px solid #fff8ed;
  outline-offset: 5px;
}
.kwb-natural .mpb-hero-frame .kwb-hero-mosaic__main img {
  object-fit: contain;
  background: #e5ded1;
}
.mpb-tree-concept { max-width: 38rem; margin: 2rem auto 3rem; padding: 0 1.5rem; }
.mpb-tree-concept img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.mpb-tree-concept figcaption { margin-top: .8rem; font-size: .9rem; color: #4a574c; line-height: 1.6; }
@media (max-width: 47.99rem) {
  .kwb-natural .mpb-hero-frame .kwb-hero-mosaic__main {
    height: auto;
    aspect-ratio: 2 / 3;
  }
  .kwb-natural .mpb-hero-frame > .kwb-hero-editorial__grid {
    width: calc(100% - 1.5rem);
    padding: 1.65rem 1.25rem;
  }
}

@media (max-width: 63.99rem) {
  .kwb-natural .mpb-hero-frame > .kwb-hero-editorial__grid {
    background-color: #42443b;
    background-image: linear-gradient(to bottom, #42443b 0%, #42443b calc(100% - 15rem), rgba(66,68,59,0) calc(100% - 10rem)), url("hero-salon-cenital.png");
    background-position: center, center bottom;
    background-size: 100% 100%, 100% auto;
    aspect-ratio: auto;
    padding-bottom: calc((100vw - 3rem) * .666667 + 1rem);
  }
}

.kwb-natural .mpb-hero-frame :is(h1, .kws-eyebrow, .kws-hero__lede) { text-shadow: 0 1px 3px rgba(0,0,0,.38); }