.brand-family-visual{min-height:590px}.home-capsule-bottle,.format-bottle,.mini-bottle,.retail-bottle{background:linear-gradient(160deg,#fff,#e9f2ef);border:1px solid rgba(21,58,48,.12);box-shadow:0 28px 55px rgba(20,52,49,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#173a35;text-align:center}.home-capsule-bottle{position:absolute;width:125px;height:205px;border-radius:22px;z-index:4}.home-capsule-bottle span,.format-bottle span,.mini-bottle span,.retail-bottle span{font:600 13px Manrope;letter-spacing:.2em}.home-capsule-bottle b,.format-bottle b,.mini-bottle b,.retail-bottle b{font:800 21px Manrope;letter-spacing:-.05em}.home-capsule-bottle small,.format-bottle small,.mini-bottle small{font-size:8px;font-weight:800;margin-top:14px;letter-spacing:.09em}.bottle-one{right:3%;bottom:11%;transform:rotate(8deg)}.bottle-two{left:3%;bottom:7%;transform:rotate(-7deg);width:110px;height:185px}.home-format-section{background:#f7fbfa}.home-format-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.home-format-card{position:relative;min-height:470px;border-radius:34px;overflow:hidden;padding:48px;display:flex;align-items:flex-start;color:#163b35}.home-format-card>div:first-child{position:relative;z-index:3;max-width:56%}.home-format-card h3{font:800 52px/1 Manrope;margin:14px 0}.home-format-card p{line-height:1.7}.home-format-card strong{display:inline-block;margin-top:25px}.home-format-card img{position:absolute;width:52%;right:-3%;bottom:-6%;filter:drop-shadow(0 28px 34px rgba(0,0,0,.15))}.melt-card{background:linear-gradient(135deg,#ddf6ed,#f7fffc)}.capsule-card{background:linear-gradient(135deg,#eef2fb,#fff)}.format-number{font:800 12px Manrope;letter-spacing:.18em}.format-bottle{position:absolute;right:9%;bottom:45px;width:190px;height:305px;border-radius:28px;transform:rotate(6deg)}.format-bottle b{font-size:34px}.home-needs-section{background:#fff}.home-need-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.need-card{min-height:250px;padding:28px;border-radius:26px;border:1px solid rgba(18,57,50,.09);background:#f7fbfa;display:flex;flex-direction:column}.need-card span{font:800 11px Manrope}.need-card h3{font:700 25px/1.1 Manrope;margin:auto 0 12px}.need-card p{color:#60716f}.need-card.digestion{background:#eaf8ef}.need-card.immunity{background:#fff3e4}.need-card.women{background:#fff0f7}.need-card.skin{background:#edf8fc}.need-card.age{background:#f0f1fa}.quiz-inline-band{margin-top:28px;padding:30px 38px;border-radius:28px;background:#153a30;color:#fff;display:flex;justify-content:space-between;align-items:center}.quiz-inline-band h3{font:700 28px Manrope;margin:5px 0}.four-product-grid{grid-template-columns:repeat(4,1fr)}.four-product-grid .product-card{min-width:0}.four-product-grid .product-art{min-height:330px}.four-product-grid .product-art img{max-height:285px}.product-card.immunity .product-art{background:linear-gradient(145deg,#fff0d7,#fff8ec)}.home-capsule-range{background:#f5f8f7}.capsule-home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.capsule-home-card{background:#fff;border:1px solid rgba(18,57,50,.09);border-radius:28px;padding:25px;display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center}.mini-bottle{width:105px;height:165px;border-radius:17px}.mini-bottle b{font-size:18px}.mini-bottle small{max-width:80px}.capsule-home-card>div:last-child>small,.home-learning-grid span{font-size:10px;font-weight:800;letter-spacing:.12em;color:#5c9388}.capsule-home-card h3{font:700 23px/1.1 Manrope;margin:10px 0}.capsule-home-card p{color:#697977}.capsule-home-card strong{font-size:13px}.home-learning-section{background:#fff}.home-learning-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.home-learning-grid a{padding:35px;border-radius:26px;background:#f5faf8;border:1px solid rgba(18,57,50,.08)}.home-learning-grid h3{font:700 27px/1.15 Manrope;margin:15px 0}.home-learning-grid p{color:#687976}.retail-pack-group{position:relative}.retail-bottle{width:100px;height:160px;border-radius:18px;margin-left:-18px;z-index:4}.retail-bottle b{font-size:18px}
@media(max-width:1100px){.home-need-grid{grid-template-columns:repeat(2,1fr)}.four-product-grid{grid-template-columns:repeat(2,1fr)}.capsule-home-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.brand-family-visual{min-height:430px}.home-capsule-bottle{width:85px;height:140px}.bottle-two{width:75px;height:125px}.home-format-grid,.capsule-home-grid,.home-learning-grid{grid-template-columns:1fr}.home-format-card{min-height:500px;padding:30px}.home-format-card>div:first-child{max-width:100%}.home-format-card img{width:52%;right:-5%;bottom:-5%}.format-bottle{right:25px;bottom:25px;width:135px;height:215px}.home-need-grid,.four-product-grid{grid-template-columns:1fr}.quiz-inline-band{display:block}.quiz-inline-band .button{margin-top:18px}.capsule-home-card{grid-template-columns:125px 1fr;padding:20px}.mini-bottle{width:85px;height:140px}.retail-bottle{display:none}}

/* 2026 Home enhancement: brand-wide storytelling + motion */
.home-community-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#f1faf6 0%,#fff 50%,#f8f2f7 100%)}
.home-community-grid{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
.home-community-copy h2{font:800 clamp(46px,6vw,66px)/.94 Manrope;margin:16px 0 24px;letter-spacing:-.055em;color:#153a30}
.home-community-copy h2 em{font-family:Georgia,serif;font-weight:400;color:#ca3a83}
.home-community-copy>p{font-size:18px;line-height:1.8;color:#657572;max-width:630px}
.community-perks{display:grid;gap:12px;margin:32px 0}
.community-perks article{display:grid;grid-template-columns:46px 1fr;gap:17px;padding:18px 20px;border:1px solid rgba(21,58,48,.09);border-radius:20px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.community-perks article:hover{transform:translateX(8px);box-shadow:0 18px 38px rgba(21,58,48,.09);border-color:rgba(202,58,131,.2)}
.community-perks article>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#153a30;color:#fff;font:800 10px Manrope;letter-spacing:.1em}
.community-perks strong{font:700 17px Manrope;color:#153a30}.community-perks p{margin:4px 0 0;color:#71807d;line-height:1.55}
.home-community-visual{position:relative;min-height:650px;border-radius:40px;overflow:hidden;box-shadow:0 42px 90px rgba(21,58,48,.16);transform-style:preserve-3d;transition:transform .18s ease-out}
.home-community-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.home-community-visual:hover>img{transform:scale(1.045)}
.community-visual-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 36%,rgba(15,46,40,.55) 100%)}
.community-floating-card{position:absolute;z-index:3;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(18px);box-shadow:0 18px 45px rgba(18,55,48,.18);animation:communityFloat 5s ease-in-out infinite}
.community-card-top{top:35px;left:30px;padding:18px 22px;border-radius:20px;max-width:250px}.community-card-top small{display:block;color:#ca3a83;font:800 9px Manrope;letter-spacing:.15em;margin-bottom:7px}.community-card-top strong{font:700 17px/1.25 Manrope;color:#153a30}
.community-card-bottom{left:30px;right:30px;bottom:28px;padding:16px;border-radius:18px;display:flex;justify-content:center;gap:10px;animation-delay:-2.5s}.community-card-bottom span{padding:9px 13px;border-radius:999px;background:#f0f8f5;color:#28584e;font:700 11px Manrope}
.community-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;pointer-events:none}.community-orb-one{width:380px;height:380px;right:-140px;top:-100px;background:radial-gradient(circle,#dff4ed,transparent 68%)}.community-orb-two{width:330px;height:330px;left:-120px;bottom:-100px;background:radial-gradient(circle,#f7ddeb,transparent 70%)}
@keyframes communityFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* richer interaction without changing the existing visual language */
[data-stagger-grid]>*{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease}
[data-stagger-grid]>*:hover{transform:translateY(-10px);box-shadow:0 28px 60px rgba(22,59,52,.12)}
.home-format-card:after,.need-card:after,.home-learning-grid a:after,.capsule-home-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(500px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.55),transparent 44%);opacity:0;transition:opacity .35s;pointer-events:none}
.home-format-card:hover:after,.need-card:hover:after,.home-learning-grid a:hover:after,.capsule-home-card:hover:after{opacity:1}
.home-format-card,.need-card,.home-learning-grid a,.capsule-home-card{position:relative;overflow:hidden}
.brand-family-visual .hero-pack{will-change:transform}.brand-family-visual .pack-left{animation:packDriftLeft 6.8s ease-in-out infinite}.brand-family-visual .pack-main{animation:packDriftMain 6s ease-in-out infinite}.brand-family-visual .pack-right{animation:packDriftRight 7.4s ease-in-out infinite}
@keyframes packDriftLeft{0%,100%{translate:0 0;rotate:0deg}50%{translate:-5px -13px;rotate:-1.5deg}}@keyframes packDriftMain{0%,100%{translate:0 0}50%{translate:0 -16px}}@keyframes packDriftRight{0%,100%{translate:0 0;rotate:0deg}50%{translate:6px -10px;rotate:1.5deg}}
.home-proof-row>div{position:relative}.home-proof-row>div:before{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:#ca3a83;transition:width .45s ease}.home-proof-row>div:hover:before{width:100%}

@media(max-width:900px){.home-community-grid{grid-template-columns:1fr;gap:42px}.home-community-visual{min-height:570px}.community-perks article:hover{transform:none}}
@media(max-width:600px){.home-community-copy h2{font-size:48px}.home-community-visual{min-height:480px;border-radius:28px}.community-card-bottom{left:14px;right:14px;gap:5px;flex-wrap:wrap}.community-card-top{left:14px;top:14px}.community-perks article{grid-template-columns:40px 1fr;padding:15px}.community-perks article>span{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.community-floating-card,.brand-family-visual .hero-pack{animation:none!important}.home-community-visual,[data-stagger-grid]>*{transition:none!important}}

/* 2026-07-23: keep the original PNBiotics Cool Melt hero unchanged. */
.home-hero:not(.brand-home-hero) .hero-pack,
.home-hero:not(.brand-home-hero) .floating-pill {
  will-change: transform;
}
.home-hero:not(.brand-home-hero) .home-capsule-bottle,
.home-hero:not(.brand-home-hero) .brand-family-visual {
  display: none !important;
}

/* ===== HOME HERO SLIDER ===== */
.hero-slider{position:relative;overflow:hidden}
.hero-slides{position:relative;min-height:inherit}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(3%);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.75,.2,1),visibility .75s}
.hero-slide.is-active{position:relative;opacity:1;visibility:visible;pointer-events:auto;transform:none;z-index:2}
.hero-slide .hero-copy>*{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
.hero-slide.is-active .hero-copy>*{opacity:1;transform:none}
.hero-slide.is-active .hero-copy>*:nth-child(2){transition-delay:.08s}
.hero-slide.is-active .hero-copy>*:nth-child(3){transition-delay:.16s}
.hero-slide.is-active .hero-copy>*:nth-child(4){transition-delay:.24s}
.hero-slide.is-active .hero-copy>*:nth-child(5){transition-delay:.32s}
.hero-slide .hero-product{opacity:0;transform:translateX(35px) scale(.96);transition:opacity .7s ease .14s,transform .9s cubic-bezier(.2,.75,.2,1) .14s}
.hero-slide.is-active .hero-product{opacity:1;transform:none}
.hero-slide-capsule{background:radial-gradient(circle at 72% 42%,rgba(215,242,247,.95),transparent 35%),linear-gradient(110deg,#f8fcfc 0%,#eff9f9 56%,#fff8fb 100%)}
.hero-capsule-visual{display:flex;align-items:center;justify-content:center;min-height:520px}
.hero-capsule-range{position:relative;z-index:3;width:min(650px,95%);max-height:520px;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(20,76,84,.18));}
.capsule-disc{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(215,244,247,.72));box-shadow:0 30px 80px rgba(48,147,157,.16)}
.capsule-image-pending{display:none;position:relative;z-index:3;width:430px;max-width:80%;aspect-ratio:1;border:1px dashed rgba(17,94,102,.25);border-radius:50%;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:rgba(255,255,255,.45);color:#2f6870;backdrop-filter:blur(8px)}
.capsule-image-pending span{font-size:.8rem;letter-spacing:.15em;font-weight:800}.capsule-image-pending small{margin-top:10px;line-height:1.6;opacity:.75}
.hero-capsule-visual.is-image-pending .capsule-image-pending{display:flex}
.hero-slider-controls{position:absolute;left:50%;bottom:26px;z-index:10;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}
.hero-slider-controls>*{pointer-events:auto}
.hero-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(17,63,68,.14);background:rgba(255,255,255,.78);backdrop-filter:blur(12px);font-size:18px;cursor:pointer;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.hero-arrow:hover{transform:translateY(-2px);background:#fff;box-shadow:0 12px 28px rgba(17,63,68,.12)}
.hero-dots{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);border:1px solid rgba(17,63,68,.1)}
.hero-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(17,63,68,.25);cursor:pointer;transition:width .3s ease,background .3s ease}
.hero-dot.is-active{width:28px;background:#29aec0}
@keyframes heroCapsuleFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@media(max-width:900px){.hero-slide{position:absolute}.hero-slide.is-active{position:relative}.hero-slider-controls{bottom:14px}.hero-capsule-visual{min-height:360px}.hero-capsule-range{max-height:360px}.capsule-image-pending{width:290px}}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide .hero-copy>*,.hero-slide .hero-product{transition:none!important}.hero-capsule-range{animation:none!important}}

/* Cool Melt Immunity — Coming Soon placeholder */

.coming-soon-card .immunity-art {
  position: relative;
  display: grid;
  min-height: 340px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 255, 255, 0.88),
      rgba(229, 246, 242, 0.7) 35%,
      transparent 68%
    ),
    linear-gradient(
      145deg,
      #edf9f6 0%,
      #d8f2eb 50%,
      #eef9f7 100%
    );
}

.coming-soon-card .immunity-art::before,
.coming-soon-card .immunity-art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(31, 141, 128, 0.13);
}

.coming-soon-card .immunity-art::before {
  width: 230px;
  height: 230px;
}

.coming-soon-card .immunity-art::after {
  width: 310px;
  height: 310px;
}

.coming-soon-product-visual {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  transition:
    transform 0.5s cubic-bezier(.2, .8, .2, 1),
    filter 0.5s ease;
}

.coming-soon-small {
  margin-bottom: 18px;
  padding: 7px 11px;
  border: 1px solid rgba(31, 141, 128, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #1f8d80;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.coming-soon-icon {
  display: grid;
  width: 92px;
  height: 92px;
  margin-bottom: 19px;
  place-items: center;
  border: 1px solid rgba(31, 141, 128, 0.16);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(227, 246, 241, 0.94)
    );
  box-shadow:
    0 24px 42px rgba(31, 141, 128, 0.16),
    inset 0 0 0 6px rgba(255, 255, 255, 0.45);
  transform: rotate(-5deg);
  animation: comingSoonFloat 4.5s ease-in-out infinite;
}

.coming-soon-icon span {
  color: #1f8d80;
  font-size: 2.1rem;
}

.coming-soon-product-visual strong {
  color: #174844;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.coming-soon-product-visual p {
  margin: 8px 0 0;
  color: #64807c;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coming-soon-card:hover .coming-soon-product-visual {
  transform: translateY(-7px);
  filter: drop-shadow(0 20px 24px rgba(31, 141, 128, 0.1));
}

.product-link-disabled {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #748784;
  cursor: default;
  pointer-events: none;
}

@keyframes comingSoonFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }

  50% {
    transform: translateY(-10px) rotate(-2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coming-soon-icon {
    animation: none;
  }
}

.home-retail-section {
  padding: 0 0 clamp(70px, 8vw, 110px);
}

.home-retail-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(480px, 1.12fr);
  align-items: center;
  gap: 30px;
  min-height: 560px;
  overflow: hidden;
  padding:
    clamp(42px, 5vw, 72px)
    clamp(36px, 5vw, 70px);
  border-radius: 38px;
  background:
    radial-gradient(
      circle at 80% 35%,
      rgba(126, 215, 199, 0.16),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #17645e 0%,
      #0d4b47 100%
    );
  box-shadow: 0 34px 80px rgba(13, 72, 69, 0.2);
}

.home-retail-card::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -270px;
  right: -100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.home-retail-card::after {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  right: 20px;
  bottom: -390px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}

.retail-copy {
  position: relative;
  z-index: 3;
}

.retail-copy .kicker {
  color: #9edbd3;
}

.retail-copy h3 {
  max-width: 590px;
  margin: 16px 0 20px;
  color: #fff;
  font-size: clamp(2.8rem, 5vw, 3.4rem);
  line-height: 0.93;
  letter-spacing: -0.055em;
}

.retail-copy p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.75;
}

.retail-copy .hero-actions {
  margin-top: 30px;
}

.retail-range-visual {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 440px;
  place-items: center;
}

.retail-range-orb {
  position: absolute;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.18),
      rgba(156, 226, 214, 0.08) 45%,
      transparent 72%
    );
}

.retail-range-visual img {
  position: relative;
  z-index: 2;
  width: 115%;
  max-width: 740px;
  max-height: 500px;
  object-fit: contain;
  filter:
    drop-shadow(0 34px 38px rgba(2, 29, 27, 0.32));
  transition:
    transform 0.6s cubic-bezier(.2, .8, .2, 1),
    filter 0.6s ease;
}

.home-retail-card:hover .retail-range-visual img {
  transform: translateY(-10px) scale(1.025);
  filter:
    drop-shadow(0 44px 46px rgba(2, 29, 27, 0.38));
}

@media (max-width: 1000px) {
  .home-retail-card {
    grid-template-columns: 1fr;
  }

  .retail-range-visual {
    min-height: 390px;
  }

  .retail-range-visual img {
    width: 100%;
    max-width: 650px;
  }
}

@media (max-width: 640px) {
  .home-retail-card {
    min-height: auto;
    padding: 36px 22px 22px;
    border-radius: 26px;
  }

  .retail-copy h3 {
    font-size: 2.75rem;
  }

  .retail-copy .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .retail-copy .button {
    width: 100%;
    text-align: center;
  }

  .retail-range-visual {
    min-height: 310px;
  }

  .retail-range-visual img {
    max-height: 330px;
  }

  .four-product-grid .product-art img {
    max-height: 350px;
}
}