/* KERNX Supplements: catalog + pack detail. Outfit, brand blue #2b8fd4. */
.kxs{--blue:#2b8fd4;--navy:#0f1923;--ink:#3d4f60;--muted:#5a6878;--line:#e3ebf2;--paper:#f5f9fc;--ease:cubic-bezier(.2,.8,.2,1);
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--navy);background:#fff;}
.kxs *{box-sizing:border-box;}
html body .kxs h1,html body .kxs h2,html body .kxs h3{color:#0f1923;font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
html body .kxs h1 em{color:#2b8fd4;}
html body .kxs h1:focus,html body .kxs h1:focus-visible{outline:none!important;box-shadow:none!important;}
.kxs-app{transition:opacity .22s ease;}
.kxs-app.is-leaving{opacity:0;}
.kxs-wrap{max-width:1200px;margin:0 auto;padding:0 5vw;}
@media (min-width:1400px){.kxs-wrap{padding:0 40px;}}

/* Hero */
.kxs-hero{position:relative;overflow:hidden;background:#fff;}
.kxs-hero .kxs-wrap{position:relative;min-height:400px;display:flex;align-items:center;}
.kxs-hero-copy{position:relative;z-index:1;max-width:620px;padding:64px 0 56px;}
.kxs-eyebrow{margin:0 0 16px;color:var(--blue);font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}
.kxs-hero h1{margin:0 0 20px;font-size:clamp(2.5rem,5.2vw,4.3rem);line-height:1.02;font-weight:700;letter-spacing:-.045em;}
.kxs-hero h1 em{font-style:normal;color:var(--blue);}
.kxs-intro{margin:0;max-width:540px;color:var(--ink);font-size:1.12rem;line-height:1.65;}
.kxs-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.kxs-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:.86rem;font-weight:500;}
.kxs-chip svg{color:var(--blue);flex:0 0 auto;}
.kxs-portrait{position:absolute;right:4vw;bottom:0;width:min(34vw,330px);height:auto;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.55) 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.55) 82%,transparent 100%);}

/* Entrance motion */
.kxs-rise{opacity:0;transform:translateY(18px);animation:kxsRise .8s var(--ease) forwards;animation-delay:calc(var(--d,0) * 90ms);}
@keyframes kxsRise{to{opacity:1;transform:none;}}
.kxs-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms);}
.kxs-reveal.is-in{opacity:1;transform:none;}

/* Catalog grid */
.kxs-collection{padding:24px 0 80px;}
.kxs-grid-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px;}
.kxs-grid-head h2{margin:0;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.025em;}
.kxs-count{color:var(--muted);font-size:.9rem;white-space:nowrap;}
.kxs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.kxs-card{position:relative;display:flex;flex-direction:column;padding:18px;border:2px solid rgba(15,25,35,.11);border-radius:26px;background:#fff;
  box-shadow:0 10px 30px rgba(15,25,35,.06);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),opacity .7s var(--ease);}
.kxs-card.is-in:hover,.kxs-card.is-in:focus-within{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(43,143,212,.28),0 26px 54px rgba(15,25,35,.16);z-index:2;}
.kxs-tags{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid rgba(15,25,35,.1);}
.kxs-tags span{padding:4px 10px;border-radius:999px;background:rgba(15,25,35,.07);color:var(--ink);font-size:.72rem;font-weight:600;}
.kxs-tags .is-type{background:var(--blue);color:#fff;}
.kxs-card h3{margin:0;min-height:2.2em;font-size:1.5rem;line-height:1.1;font-weight:600;letter-spacing:-.02em;}
.kxs-card h3 a{color:inherit;text-decoration:none;}
.kxs-card h3 a::after{content:"";position:absolute;inset:0;border-radius:26px;z-index:0;}
.kxs-detailline{margin:8px 0 0;color:#6b7c8c;font-size:.86rem;}
.kxs-price{margin:8px 0 0;font-size:1.02rem;font-weight:600;}
.kxs-price span{font-weight:400;color:#6b7c8c;font-size:.88rem;}
.kxs-art{position:relative;display:flex;align-items:center;justify-content:center;margin:12px 0 6px;min-height:190px;}
.kxs-art::after{content:"";position:absolute;left:24%;right:24%;bottom:4px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(15,25,35,.2),rgba(15,25,35,0));}
.kxs-art .kxs-packet{width:min(100%,210px);position:relative;z-index:1;transition:transform .6s var(--ease);}
.kxs-card:hover .kxs-packet{transform:translateY(-6px) scale(1.04);}
.kxs-actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:9px;margin-top:auto;padding-top:14px;}

/* Buttons */
.kxs-buy,.kxs-learn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font-family:inherit;font-size:.88rem;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s ease,border-color .25s ease,color .25s ease;}
.kxs-buy{background:var(--blue);color:#fff;border:1px solid var(--blue);}
.kxs-buy:hover,.kxs-buy:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(43,143,212,.18),0 8px 22px rgba(43,143,212,.38);}
.kxs-learn{background:#fff;color:var(--navy);border:1.5px solid var(--navy);}
.kxs-learn:hover,.kxs-learn:focus-visible{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,143,212,.12),0 8px 22px rgba(43,143,212,.22);}
.kxs-buy:focus-visible,.kxs-learn:focus-visible{outline:none;}
.kxs-buy svg,.kxs-learn svg{width:16px;height:16px;}
.kxs-note{margin:30px 0 0;max-width:820px;color:var(--muted);font-size:.84rem;line-height:1.6;}

/* Packet artwork with live label */
.kxs-packet{position:relative;aspect-ratio:1;container-type:inline-size;}
.kxs-packet img{display:block;width:100%;height:100%;object-fit:contain;}
.kxs-packet-brand,.kxs-packet-name,.kxs-packet-rule,.kxs-packet-cap{position:absolute;left:50%;transform:translateX(-50%);color:#fff;text-align:center;pointer-events:none;}
.kxs-packet-brand{top:33%;width:76%;font-size:clamp(5px,3.4cqw,12px);font-weight:600;letter-spacing:.22em;}
.kxs-packet-name{top:50%;transform:translate(-50%,-50%);width:76%;font-size:clamp(10px,7.8cqw,30px);font-weight:700;line-height:1.1;letter-spacing:-.025em;text-transform:uppercase;}
.kxs-packet-name span{display:block;white-space:nowrap;}
.kxs-packet-rule{top:62%;width:12%;height:1px;background:#fff;}
.kxs-packet-cap{top:67%;width:76%;font-size:clamp(4px,2.7cqw,10px);white-space:nowrap;}

/* Detail */
.kxs-detail{padding:26px 0 90px;}
.kxs-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 28px;padding:8px 14px 8px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:500 .88rem/1 'Outfit',sans-serif;text-decoration:none;transition:border-color .2s,color .2s;}
.kxs-back:hover{border-color:var(--blue);color:var(--blue);}
.kxs-detail-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:start;}
.kxs-detail h1{margin:0 0 16px;font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1.04;font-weight:700;letter-spacing:-.035em;}
.kxs-detail h1 em{font-style:normal;color:var(--blue);}
.kxs-lede{margin:0 0 24px;max-width:560px;color:var(--ink);font-size:1.1rem;line-height:1.6;}
.kxs-pricebar{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.kxs-amount{margin:0;font-size:2rem;font-weight:700;letter-spacing:-.02em;}
.kxs-amount span{font-size:1rem;font-weight:400;color:var(--muted);letter-spacing:0;}
.kxs-meta{margin:0;color:var(--muted);font-size:.95rem;}
.kxs-meta b{color:var(--blue);font-size:1.15rem;}
.kxs-detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.kxs-detail-actions .kxs-buy{min-width:170px;min-height:52px;font-size:.95rem;}
.kxs-detail-actions .kxs-learn{min-height:52px;}
.kxs-buynote{margin:12px 0 26px;color:var(--muted);font-size:.84rem;line-height:1.5;}
.kxs-callout{margin:0 0 14px;padding:16px 18px;border-left:3px solid var(--blue);background:var(--paper);color:var(--ink);font-size:.92rem;line-height:1.6;}
.kxs-ingredients{margin:34px 0 26px;scroll-margin-top:100px;}
.kxs-ingredients h2{margin:0 0 8px;font-size:1.55rem;letter-spacing:-.025em;}
.kxs-ing{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);}
.kxs-ing img{width:40px;height:58px;object-fit:contain;}
.kxs-ing h3{margin:0 0 3px;font-size:1rem;font-weight:600;}
.kxs-ing p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5;}
.kxs-faq{border-top:1px solid var(--line);}
.kxs-q{border-bottom:1px solid var(--line);}
.kxs-q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 0;cursor:pointer;list-style:none;font-size:1.02rem;font-weight:500;}
.kxs-q summary::-webkit-details-marker{display:none;}
.kxs-q summary::after{content:"+";color:var(--blue);font-size:1.5rem;font-weight:300;line-height:1;transition:transform .3s var(--ease);}
.kxs-q[open] summary::after{transform:rotate(45deg);}
.kxs-a{padding:0 0 20px;color:var(--ink);font-size:.95rem;line-height:1.65;}
.kxs-a p{margin:0;}
.kxs-legal{margin:24px 0 0;color:#687787;font-size:.8rem;line-height:1.6;}
.kxs-sources{margin:14px 0 0;color:var(--muted);font-size:.8rem;line-height:1.6;}
.kxs-sources a{color:var(--blue);}
.kxs-media{position:sticky;top:96px;border:1px solid var(--line);border-radius:26px;background:#fff;overflow:hidden;box-shadow:0 14px 40px rgba(15,25,35,.07);}
.kxs-media-packet{display:flex;justify-content:center;padding:28px 34px 6px;background:#fff;}
.kxs-media-packet .kxs-packet{width:min(100%,340px);}
.kxs-media-head{padding:18px 28px 0;}
.kxs-media-head h2{margin:6px 0 4px;font-size:1.5rem;letter-spacing:-.02em;}
.kxs-media-head p{margin:0;color:var(--muted);font-size:.9rem;}
.kxs-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px 24px;}
.kxs-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:136px;padding:10px 6px;border:1px solid var(--line);border-radius:14px;text-align:center;transition:border-color .25s,transform .35s var(--ease);}
.kxs-pill:hover{border-color:rgba(43,143,212,.5);transform:translateY(-3px);}
.kxs-pill img{width:56px;height:80px;object-fit:contain;}
.kxs-pill span{font-size:.82rem;font-weight:500;line-height:1.25;}
.kxs-photonote{margin:0;padding:0 26px 22px;color:var(--muted);font-size:.72rem;line-height:1.5;}

/* Mobile sticky buy bar on detail */
.kxs-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:rgba(15,25,35,.96);color:#fff;
  box-shadow:0 14px 34px rgba(15,25,35,.28);transform:translateY(140%);transition:transform .45s var(--ease);}
.kxs-sticky.is-on{transform:none;}
.kxs-sticky b{font-size:1rem;}
.kxs-sticky span{display:block;font-size:.72rem;color:rgba(255,255,255,.7);}
.kxs-sticky .kxs-buy{min-height:42px;padding:0 22px;}

@media (max-width:1100px){.kxs-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.kxs-detail-grid{gap:40px;}}
@media (max-width:900px){
  .kxs-detail-grid{grid-template-columns:1fr;gap:28px;}
  .kxs-media{position:static;order:-1;}
  .kxs-portrait{width:200px;right:0;}
  .kxs-hero-copy{padding-right:170px;}
  .kxs-sticky{display:flex;}
}
@media (max-width:760px){
  .kxs-grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 5vw;margin:0 -5vw;padding:10px 5vw 26px;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;}
  .kxs-grid::-webkit-scrollbar{display:none;}
  .kxs-card{flex:0 0 74%;max-width:300px;scroll-snap-align:start;}
  .kxs-card.kxs-reveal{transform:translateX(40px);}
  .kxs-card.kxs-reveal.is-in{transform:none;}
  .kxs-dots{display:flex;justify-content:center;gap:7px;margin-top:2px;}
  .kxs-dots i{width:7px;height:7px;border-radius:50%;background:rgba(15,25,35,.18);transition:background-color .3s,width .3s var(--ease);}
  .kxs-dots i.on{width:20px;border-radius:4px;background:var(--blue);}
}
.kxs-dots{display:none;}
@media (max-width:760px){.kxs-dots{display:flex;}}
@media (max-width:560px){
  .kxs-hero .kxs-wrap{min-height:0;}
  .kxs-hero-copy{padding:36px 0 32px;padding-right:0;}
  .kxs-hero h1{font-size:2.35rem;max-width:calc(100% - 110px);min-height:165px;}
  .kxs-eyebrow{max-width:calc(100% - 110px);}
  .kxs-intro{font-size:1rem;}
  .kxs-portrait{width:128px;top:8px;bottom:auto;right:-6px;}
  .kxs-hero-meta{margin-top:22px;gap:8px;}
  .kxs-chip{font-size:.78rem;padding:7px 12px;}
  .kxs-collection{padding:36px 0 60px;}
  .kxs-grid-head{display:block;}
  .kxs-count{display:block;margin-top:6px;}
  .kxs-card{padding:13px;border-radius:22px;}
  .kxs-card h3{font-size:1.15rem;min-height:2.3em;}
  .kxs-card h3 a::after{border-radius:22px;}
  .kxs-tags{gap:4px;padding-bottom:9px;margin-bottom:10px;}
  .kxs-tags span{padding:3px 8px;font-size:.62rem;}
  .kxs-tags span:first-child{display:none;}
  .kxs-detailline{font-size:.74rem;}
  .kxs-price{font-size:.92rem;}
  .kxs-price span{font-size:.76rem;}
  .kxs-art{min-height:130px;margin:8px 0 2px;}
  .kxs-buy,.kxs-learn{min-height:40px;font-size:.78rem;padding:0 10px;}
  .kxs-detail{padding-bottom:110px;}
  .kxs-detail h1{font-size:2.3rem;}
  .kxs-pills{grid-template-columns:repeat(3,minmax(0,1fr));padding:16px;gap:9px;}
  .kxs-pill{min-height:120px;}
  .kxs-media-packet{padding:18px 24px 0;}
}
@media (prefers-reduced-motion:reduce){
  .kxs-rise,.kxs-reveal{animation:none!important;opacity:1!important;transform:none!important;transition:none!important;}
  .kxs-card,.kxs-packet,.kxs-buy,.kxs-learn,.kxs-app,.kxs-sticky{transition:none!important;}
}
/* Mobile slider cards: roomier than the old two-column grid. */
@media (max-width:760px){
  .kxs-card{padding:16px;border-radius:24px;}
  .kxs-card h3{font-size:1.4rem;min-height:2.2em;}
  .kxs-card h3 a::after{border-radius:24px;}
  .kxs-tags span{padding:4px 10px;font-size:.7rem;}
  .kxs-tags span:first-child{display:inline-block;}
  .kxs-detailline{font-size:.84rem;}
  .kxs-price{font-size:1rem;}
  .kxs-price span{font-size:.86rem;}
  .kxs-art{min-height:180px;margin:10px 0 4px;}
  .kxs-card .kxs-buy,.kxs-card .kxs-learn{min-height:44px;font-size:.86rem;padding:0 16px;}
}

/* Keep the full 2:3 portrait inside the hero, with space above her hair. */
@media (min-width:901px){
  .kxs-hero .kxs-wrap{min-height:max(440px,calc(min(51vw,495px) + 32px));}
}