/* Approved static composition. The source PNG is unaltered. The two windows
   show its photos; the real headings, search and catalog remain interactive. */
body #medSecondLife.hero.med-story {
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:0 !important;
  min-height:0 !important;
  height:auto;
  padding:0 20px 22px !important;
  margin:0;
  border:0 !important;
  background:#000 !important;
  color:#fff !important;
  isolation:isolate;
}
body #medSecondLife[hidden] { display:none !important; }
.med-story .med-story-scene {
  position:relative;
  flex:none;
  width:min(100%,300px);
  overflow:hidden;
  background:#000;
  pointer-events:none;
}
/* Pixel windows of the 948 x 1660 approved image:
   water: y=306..754; renewed: y=1040..1520. */
.med-story .med-story-scene-water { aspect-ratio:948 / 448; }
.med-story .med-story-scene-renewed { aspect-ratio:948 / 480; }
.med-story .med-story-scene img {
  position:absolute;
  left:0;
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  margin:0;
  border:0;
}
.med-story-scene-water img { top:-68.3035714286%; }
.med-story-scene-renewed img { top:-216.6666666667%; }
body #medSecondLife.hero.med-story .hero-copy {
  width:min(100%,360px);
  max-width:360px !important;
  padding:4px 0 0;
  margin:0 !important;
}
body #medSecondLife.hero.med-story .eyebrow {
  margin:0 0 8px !important;
  color:#b6b6b6 !important;
}
body #medSecondLife [hidden] { display:none !important; }
body #medSecondLife.hero.med-story h1 {
  display:block;
  width:100%;
  margin:0 !important;
  padding:0 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(1.375rem,6vw,1.625rem) !important;
  font-weight:900 !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  text-align:left !important;
  text-wrap:initial !important;
  overflow-wrap:anywhere;
  color:#fff !important;
}
.med-story-title-line { display:block; }
.med-story-title-line:empty { display:none; }
.med-story-value { max-width:7.5em; }
.med-story-continuation { margin-top:12px; }
.med-story-value:empty + .med-story-continuation { margin-top:0; }
.med-story .med-story-welcome {
  width:min(100%,360px);
  margin:0;
  padding:0;
  text-align:center;
}
.med-story-welcome h2 {
  font-family:Arial,Helvetica,sans-serif;
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.015em;
  color:#fff;
  margin:0 0 5px;
}
.med-story-welcome p {
  max-width:310px;
  margin:0 auto 12px;
  color:#b8b8b8;
  font-size:.8125rem;
  line-height:1.45;
}
body .med-story .med-story-shop-link {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:44px;
  max-width:100%;
  padding:10px 22px !important;
  border:1px solid #fff !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#080808 !important;
  font-size:.8125rem !important;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
}
.med-story-shop-link:hover { opacity:.88; }
.med-story-shop-link:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@media(max-width:620px) {
  body #medSecondLife.hero.med-story { padding:0 16px 18px !important; }
  .med-story .med-story-scene { width:min(100%,280px); }
}
/* Mobile: the statement shares the centered welcome heading's type scale. */
@media(max-width:820px) {
  body #medSecondLife.hero.med-story h1 {
    font-size:1rem !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    letter-spacing:-.015em !important;
    text-align:center !important;
  }
  .med-story-value { max-width:none; }
  .med-story-continuation { margin-top:4px; }
}
/* Desktop: the same story fills the available screen horizontally.
   Mobile keeps the approved compact vertical reading order above. */
@media(min-width:821px) {
  body #medSecondLife.hero.med-story {
    --med-story-top:140px;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(220px,.84fr) minmax(0,1fr) !important;
    grid-template-rows:minmax(220px,1fr) auto;
    gap:24px clamp(8px,1.2vw,24px) !important;
    width:100%;
    max-width:none;
    min-height:max(410px,calc(100vh - var(--med-story-top))) !important;
    min-height:max(410px,calc(100svh - var(--med-story-top))) !important;
    padding:clamp(18px,3vh,36px) clamp(18px,3vw,64px) 28px !important;
    justify-items:center;
    align-items:center;
  }
  body:has(.med-announcement-bar) #medSecondLife.hero.med-story {
    --med-story-top:164px;
  }
  .med-story .med-story-scene {
    width:100%;
    min-width:0;
    max-width:640px;
  }
  .med-story .med-story-scene-water { grid-column:1; grid-row:1; }
  .med-story .med-story-scene-renewed { grid-column:3; grid-row:1; }
  body #medSecondLife.hero.med-story .hero-copy {
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:none !important;
    padding:0;
  }
  body #medSecondLife.hero.med-story h1 {
    font-size:1.25rem !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    letter-spacing:-.015em !important;
    text-align:center !important;
  }
  .med-story-value { max-width:none; }
  .med-story-continuation { margin-top:4px; }
  .med-story .med-story-welcome {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    max-width:none;
  }
  .med-story-welcome h2 { font-size:1.25rem; margin-bottom:7px; }
  .med-story-welcome p {
    max-width:600px;
    font-size:.9375rem;
    margin-bottom:14px;
  }
  body .med-story .med-story-shop-link {
    min-height:46px;
    padding:12px 28px !important;
    font-size:.875rem !important;
  }
}
/* Category choices precede the featured carousel, including when it is hidden. */
body.home-dark .category-strip + .featured-carousel-section:not([hidden]) {
  padding-top:24px !important;
  border-top:0 !important;
}
body.home-dark .category-strip + .featured-carousel-section + .shop-section {
  padding-top:32px !important;
}
@media(min-width:821px) {
  body.home-dark .category-strip + .featured-carousel-section:not([hidden]) {
    padding-top:32px !important;
  }
  body.home-dark .category-strip + .featured-carousel-section + .shop-section {
    padding-top:46px !important;
  }
}
/* Two independent alpha masks blend all four edges into the actual page background. */
.med-catalog-transition {
  --med-horizon-side-mask:linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 3%,rgba(0,0,0,.65) 10%,#000 20%,#000 80%,rgba(0,0,0,.65) 90%,rgba(0,0,0,.12) 97%,transparent 100%);
  display:none;
  position:relative;
  width:100%;
  height:clamp(190px,22vw,300px);
  margin:0 0 32px;
  overflow:hidden;
  background:transparent;
  -webkit-mask-image:var(--med-horizon-side-mask);
  mask-image:var(--med-horizon-side-mask);
}
.med-catalog-transition img {
  --med-horizon-vertical-mask:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 10%,#000 34%,#000 62%,rgba(0,0,0,.8) 74%,rgba(0,0,0,.3) 88%,transparent 100%);
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 60%;
  -webkit-mask-image:var(--med-horizon-vertical-mask);
  mask-image:var(--med-horizon-vertical-mask);
}
body.home-dark #destacados:not([hidden]) + #tienda {
  padding-top:0 !important;
}
body.home-dark #destacados:not([hidden]) + #tienda > .med-catalog-transition {
  display:block;
}
@media(min-width:821px) {
  .med-catalog-transition {
    margin-bottom:46px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .med-story *, .med-story *::before, .med-story *::after {
    animation:none !important;
    transition:none !important;
  }
}
