/* ImageGen campaign assets, layered over the core commerce system. */
.logo { min-width: 0; }
.logo-image { width: 188px; height: auto; flex: 0 0 auto; transition: opacity .18s ease, transform .18s ease; }
.logo:hover .logo-image { opacity: .88; transform: translateY(-1px); }
.footer .logo-image { width: 194px; }
.logo > .logo-mark { width: 188px; height: 45px; border-radius: 0; background: url('/assets/img/logo.svg') center/contain no-repeat; transform: none; }
.logo > .logo-mark::before, .logo > .logo-mark::after { display: none; }
.logo > .logo-mark + span { display: none; }
.footer .logo > .logo-mark { width: 194px; background-image: url('/assets/img/logo-light.svg'); }

.hero-main {
  min-height: 465px;
  padding: clamp(38px, 4vw, 58px);
  background-color: #eef1ea;
  background-image: linear-gradient(90deg, rgba(247, 247, 240, .98) 0%, rgba(247, 247, 240, .91) 39%, rgba(247, 247, 240, .2) 62%, rgba(247, 247, 240, 0) 100%), url('/assets/banners/wellness-hero-v2.webp');
  background-position: center, right center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid #e5e8e1;
}

.hero-main::before { display: none; }
.hero-main .hero-copy {
  max-width: min(610px, 58%);
  padding: 30px 32px 32px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 16px;
  background: rgba(250,251,247,.84);
  box-shadow: 0 22px 55px rgba(20,50,38,.12);
  backdrop-filter: blur(13px);
}
.hero-main .hero-packshot { display: none; }
.hero-main .lead { max-width: 520px; }
.hero-main .hero-actions { margin-top: 22px; }

.wholesale-banner {
  min-height: 425px;
  display: block;
  padding: 54px 55% 50px 55px;
  background-color: #12372a;
  background-image: linear-gradient(90deg, #12372a 0%, rgba(18, 55, 42, .96) 40%, rgba(18, 55, 42, .12) 60%, rgba(18, 55, 42, .04) 100%), url('/assets/banners/wholesale-team-v2.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.wholesale-banner::after { display: none; }
.wholesale-banner > div { position: relative; z-index: 2; max-width: 580px; }
.wholesale-banner > div:first-child {
  padding: 30px 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  background: rgba(10,38,28,.82);
  box-shadow: 0 24px 60px rgba(3,20,13,.22);
  backdrop-filter: blur(11px);
}
.wholesale-banner h2 { font-size: clamp(31px, 3vw, 44px); }
.wholesale-banner .wholesale-stats { max-width: 580px; margin-top: 22px; }

.story-section { padding-top: 20px; }
.story-collage {
  position: relative;
  height: 510px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  border-radius: 22px;
  background: #102d22;
  box-shadow: 0 24px 65px rgba(18,51,37,.14);
}
.story-photo { position: relative; min-width: 0; height: 100%; margin: 0; overflow: hidden; border-radius: 16px; background: #173b2d; }
.story-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,24,17,.64)); pointer-events: none; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.025); transition: transform .6s ease; }
.story-photo-sport img { object-position: 64% center; }
.story-photo-calm img { object-position: 66% center; }
.story-collage:hover .story-photo img { transform: scale(1.045); }
.story-photo figcaption { position: absolute; z-index: 2; right: 18px; bottom: 16px; left: 18px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.story-panel {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 57.5%;
  width: min(560px, 52%);
  padding: 36px 38px 38px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 17px;
  background: rgba(11,43,32,.92);
  color: #fff;
  box-shadow: 0 28px 70px rgba(2,18,12,.38);
  backdrop-filter: blur(14px);
  transform: translate(-50%,-50%);
}
.story-panel::before { content: ""; position: absolute; top: 26px; bottom: 26px; left: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--lime); }
.story-panel .kicker { color: var(--lime); }
.story-panel h2 { margin-bottom: 13px; font-size: clamp(34px, 3.4vw, 50px); }
.story-panel p { max-width: 470px; margin-bottom: 22px; color: #c7d8d0; }
.story-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.story-link { border-color: rgba(255,255,255,.18); background: transparent; }
.story-link:hover { border-color: #fff; background: #fff; color: var(--ink); }

.brand-tile {
  position: relative;
  font-size: 16px;
}

.brand-tile::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 3px;
  bottom: 17px;
  border-radius: 2px;
  background: var(--green);
  opacity: .22;
}

.page-head {
  background-image: radial-gradient(circle at 84% 10%, rgba(223, 247, 104, .26), rgba(223, 247, 104, 0) 28%);
}

@media (max-width: 850px) {
  .hero-main {
    background-image: linear-gradient(90deg, rgba(247, 247, 240, .96) 0%, rgba(247, 247, 240, .86) 52%, rgba(247, 247, 240, .18) 100%), url('/assets/banners/wellness-hero-v2.webp');
  }

  .hero-main .hero-copy { max-width: 65%; }

  .wholesale-banner {
    min-height: 0;
    padding: 360px 34px 34px;
    background-color: #12372a;
    background-image: linear-gradient(180deg, rgba(18, 55, 42, 0) 0 38%, rgba(18, 55, 42, .95) 67%, #12372a 100%), url('/assets/banners/wholesale-team-v2.webp');
    background-position: center, 62% top;
    background-size: cover, auto 430px;
    background-repeat: no-repeat;
  }

  .story-collage { height: 560px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .story-panel { left: 50%; width: min(560px, calc(100% - 54px)); padding: 30px 32px 32px; }
  .story-photo figcaption { display: none; }
}

@media (max-width: 590px) {
  .logo-image { width: 152px; }
  .footer .logo-image { width: 178px; }
  .logo > .logo-mark { width: 152px; }
  .footer .logo > .logo-mark { width: 178px; }

  .hero-main {
    min-height: 525px;
    background-image: linear-gradient(180deg, rgba(247, 247, 240, .98) 0%, rgba(247, 247, 240, .93) 53%, rgba(247, 247, 240, .12) 76%, rgba(247, 247, 240, 0) 100%), url('/assets/banners/wellness-hero-v2.webp');
    background-position: center, 67% bottom;
    background-size: cover, auto 58%;
    background-repeat: no-repeat;
  }

  .hero-main .hero-copy { max-width: 100%; padding: 22px 20px 23px; border-radius: 13px; background: rgba(250,251,247,.91); backdrop-filter: blur(9px); }
  .hero-main .lead { max-width: 100%; }
  .wholesale-banner { padding: 270px 15px 15px; background-position: center, 62% top; background-size: cover, auto 320px; }
  .wholesale-banner > div:first-child { padding: 23px 20px; }
  .story-section { padding-top: 8px; }
  .story-collage { height: 590px; padding: 6px; border-radius: 17px; }
  .story-photo { border-radius: 12px; }
  .story-panel { width: calc(100% - 28px); padding: 24px 22px 25px; border-radius: 14px; }
  .story-panel h2 { font-size: 32px; }
  .story-panel p { font-size: 13px; }
  .story-actions { flex-direction: column; }
  .story-actions .btn { width: 100%; }
}