/* Product campaign pages — /sol-54 and /hya-14 on one system (design iteration 12,
   2026-09-25). Each page sets its own three tokens on the body class; nothing here
   touches :root or html, so the rest of the site is unaffected. The artboard was a
   fixed 1280px frame; every measure below resolves to the artboard value at 1280px
   and scales from there. */

.pc-page{
  --pc-acc:#b3271a;
  --pc-tint:#f1ece4;
  --pc-hero:#e9e2d6;
  --pc-ink:#121314;
  --pc-t50:rgba(18,19,20,.5);
  --pc-t60:rgba(18,19,20,.62);
  --pc-t70:rgba(18,19,20,.7);
  --pc-rule:rgba(18,19,20,.1);
  --pc-pad:clamp(20px,4.375vw,72px);
  --display:'Michroma',var(--sans);
  background:#fbfbfa;
  color:var(--pc-ink);
}
.pc-page .frame{background:#fbfbfa}
.pc-page--sol{--pc-acc:#b3271a;--pc-tint:#f1ece4;--pc-hero:#e9e2d6}
.pc-page--hya{--pc-acc:#285f86;--pc-tint:#eaf0f5;--pc-hero:#dfe9f2}

.pc-main{overflow:clip}

.pc-kicker{
  margin:0 0 18px;
  font:500 10px/1.2 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:var(--pc-acc);
}
.pc-mark{font:400 clamp(20px,2.34vw,30px)/1.1 var(--display);margin:0 0 22px}

/* ------------------------------------------------------------ product bar */
.pc-bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:56px;padding:0 var(--pc-pad);
  background:rgba(251,251,250,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid rgba(18,19,20,.08);
}
.pc-bar__sku{font:400 18px/1 var(--display);white-space:nowrap}
.pc-bar__links{display:flex;align-items:center;gap:32px}
.pc-bar__links a{
  font:400 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--pc-t60);
  transition:color .15s ease;
}
.pc-bar__links a:hover{color:var(--pc-ink)}
.pc-bar__links a.pc-buy{
  padding:9px 18px;border-radius:999px;background:var(--pc-ink);color:#fff;
  font:500 12px/1 var(--sans);letter-spacing:0;
}
.pc-bar__links a.pc-buy:hover{opacity:.86;color:#fff}

.pc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;background:var(--pc-ink);color:#fff;
  font:500 14px/1 var(--sans);
  transition:opacity .18s ease,transform .18s ease;
}
.pc-btn:hover{opacity:.88;transform:translateY(-1px);color:#fff}
.pc-btn:focus-visible,.pc-bar__links a:focus-visible,.pc-pair:focus-visible{outline:3px solid var(--pc-acc);outline-offset:3px}

/* ------------------------------------------------------------------- hero */
.pc-hero{position:relative;height:clamp(560px,59.4vw,900px);overflow:hidden;background:var(--pc-hero)}
.pc-hero > img,.pc-full > img,.pc-pair > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.pc-hero__copy{
  position:relative;height:100%;max-width:540px;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pc-pad);
}
.pc-hero h1{
  margin:0 0 18px;font:600 clamp(44px,5vw,72px)/1.02 var(--sans);letter-spacing:-.045em;
}
.pc-hero__sub{
  margin:0 0 32px;max-width:400px;
  font:300 clamp(17px,1.48vw,20px)/1.5 var(--sans);color:var(--pc-t70);text-wrap:pretty;
}

/* ------------------------------------------------------------------ intro */
.pc-intro{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(72px,8.6vw,120px) var(--pc-pad) clamp(64px,7.5vw,104px);
}
.pc-intro h2{
  margin:0 0 22px;max-width:760px;
  font:600 clamp(34px,4.375vw,60px)/1.05 var(--sans);letter-spacing:-.045em;text-wrap:balance;
}
.pc-intro p{
  margin:0;max-width:620px;
  font:400 clamp(17px,1.56vw,20px)/1.55 var(--sans);color:rgba(18,19,20,.6);text-wrap:pretty;
}

/* --------------------------------------------------------- split feature */
.pc-split{display:grid;grid-template-columns:1.25fr 1fr;background:var(--pc-tint)}
.pc-split__media{margin:0;height:clamp(420px,50vw,760px);overflow:hidden}
.pc-split__media img{width:100%;height:100%;object-fit:cover;display:block}
.pc-split__copy{display:flex;flex-direction:column;justify-content:center;padding:48px var(--pc-pad)}

.pc-split h3,.pc-full h3{margin:0 0 18px;font:600 clamp(32px,3.44vw,48px)/1.05 var(--sans);letter-spacing:-.04em}
.pc-split p:not(.pc-kicker),.pc-full p:not(.pc-kicker){margin:0;max-width:380px;font:400 clamp(16px,1.33vw,18px)/1.6 var(--sans);color:var(--pc-t60);text-wrap:pretty}

/* ------------------------------------------------------ full-bleed feature */
.pc-full{position:relative;height:clamp(520px,53vw,820px);overflow:hidden;background:var(--pc-hero);margin-top:12px}
.pc-full__copy{
  position:relative;height:100%;max-width:520px;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pc-pad);
}
.pc-full--right .pc-full__copy{margin-left:auto}
.pc-full h3{font-size:clamp(36px,4.06vw,56px);letter-spacing:-.045em;white-space:pre-line}
.pc-full p:not(.pc-kicker){max-width:360px;color:var(--pc-t70)}

/* ----------------------------------------------------------------- facts */
.pc-facts{padding:clamp(72px,7.5vw,104px) var(--pc-pad) clamp(60px,6.25vw,88px)}
.pc-facts__label{
  margin:0 0 40px;text-align:center;
  font:500 10px/1 var(--mono);letter-spacing:.3em;color:var(--pc-t50);
}
.pc-facts dl{
  margin:0;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--pc-rule);border-bottom:1px solid var(--pc-rule);
}
.pc-facts dl > div{
  display:flex;flex-direction:column-reverse;align-items:center;gap:12px;text-align:center;
  padding:40px 20px;border-right:1px solid rgba(18,19,20,.08);
}
.pc-facts dl > div:last-child{border-right:0}
.pc-facts dt{font:400 9px/1.4 var(--mono);letter-spacing:.22em;color:var(--pc-t50)}
.pc-facts dd{margin:0;font:400 clamp(26px,3.125vw,42px)/1.1 var(--display);white-space:nowrap}
.pc-facts__note{
  margin:22px auto 0;max-width:720px;text-align:center;
  font:400 13px/1.55 var(--sans);color:rgba(18,19,20,.55);
}
.pc-notice{
  margin:36px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.pc-notice li{padding:22px 24px;background:var(--pc-tint)}
.pc-notice small{display:block;margin-bottom:10px;font:500 9px/1 var(--mono);letter-spacing:.22em;color:var(--pc-acc)}
.pc-notice strong{font:500 17px/1.3 var(--sans);letter-spacing:-.02em}

/* ---------------------------------------------------------------- ritual */
.pc-ritual{padding:0 var(--pc-pad) clamp(72px,7.8vw,108px)}
.pc-ritual h2{margin:0 0 30px;font:600 clamp(30px,3.125vw,42px)/1.1 var(--sans);letter-spacing:-.04em}
.pc-ritual ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pc-ritual li{display:flex;flex-direction:column;gap:18px}
.pc-ritual figure{margin:0;height:clamp(320px,34.4vw,520px);overflow:hidden;background:var(--pc-tint)}
.pc-ritual figure img{width:100%;height:100%;object-fit:cover;display:block}
.pc-ritual__step{display:flex;gap:16px;align-items:baseline}
.pc-ritual__n{font:400 14px/1 var(--display);color:var(--pc-acc);min-width:1.6em}
.pc-ritual h3{margin:0 0 4px;font:600 19px/1.25 var(--sans);letter-spacing:-.02em}
.pc-ritual__step p{margin:0;font:400 15px/1.5 var(--sans);color:rgba(18,19,20,.6)}
.pc-ritual__note{margin:28px 0 0;max-width:720px;font:400 13px/1.55 var(--sans);color:rgba(18,19,20,.55)}

/* ------------------------------------------------------------------- buy */
.pc-buy-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,500px);border-top:1px solid rgba(18,19,20,.08)}
.pc-buy-panel__media{margin:0;height:clamp(460px,50vw,760px);overflow:hidden;background:var(--pc-tint)}
.pc-buy-panel__media img{width:100%;height:100%;object-fit:cover;display:block}
.pc-buy-panel__media--product img{object-fit:contain;padding:clamp(28px,5vw,80px)}
.pc-buy-panel__body{display:flex;flex-direction:column;gap:26px;padding:clamp(40px,5vw,64px) clamp(24px,4vw,52px)}
.pc-buy-panel__sku{margin:0 0 10px;font:400 clamp(28px,2.8vw,36px)/1.1 var(--display)}
.pc-buy-panel__name{margin:0 0 4px;font:500 19px/1.3 var(--sans);letter-spacing:-.01em}
.pc-buy-panel__spec{margin:0;font:400 9.5px/1.4 var(--mono);letter-spacing:.2em;color:var(--pc-t50)}
.pc-variant{display:grid;gap:9px;font:500 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.pc-variant select{width:100%;padding:14px 16px;border:1px solid var(--pc-ink);border-radius:10px;background:#fff;color:var(--pc-ink);font:500 15px/1.3 var(--sans);letter-spacing:normal;text-transform:none}
.pc-variant select:focus-visible{outline:3px solid var(--pc-acc);outline-offset:3px}
.pc-size{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 18px;border:1.5px solid var(--pc-ink);border-radius:12px;
  font:500 14px/1 var(--sans);
}
.pc-add{
  display:block;width:100%;padding:17px;border-radius:999px;background:var(--pc-ink);color:#fff;
  text-align:center;font:500 15px/1 var(--sans);
  transition:opacity .18s ease;
}
.pc-add:hover{opacity:.88}
.pc-add:focus-visible{outline:3px solid var(--pc-acc);outline-offset:3px}
.pc-add[disabled]{opacity:.45;cursor:default}
.pc-more{font:500 13px/1 var(--sans);color:var(--pc-t60);text-decoration:underline;text-underline-offset:3px}
.pc-more:hover{color:var(--pc-ink)}
.pc-details{margin:0}
.pc-details > div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--pc-rule)}
.pc-details dt{padding-top:2px;font:400 9.5px/1.4 var(--mono);letter-spacing:.2em;color:var(--pc-t50);text-transform:uppercase}
.pc-details dd{margin:0;font:400 14px/1.5 var(--sans);color:rgba(18,19,20,.75)}

/* ------------------------------------------------------------------ pair */
.pc-pair{position:relative;display:block;height:clamp(360px,37.5vw,560px);overflow:hidden;background:var(--pc-tint);margin:12px}
/* The pair card belongs to the product it introduces, not the page it sits on
   (owner, 2026-09-29): HYA's blue on SOL, SOL's warm tint on HYA. Only visible
   where the copy leaves the photograph, i.e. on phones and tablets. */
.pc-page--sol .pc-pair{--pc-tint:#eaf0f5;--pc-acc:#285f86}
.pc-page--hya .pc-pair{--pc-tint:#f1ece4;--pc-acc:#b3271a}
.pc-pair__copy{
  position:relative;height:100%;max-width:460px;
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,5vw,64px);
}
.pc-pair__label{margin:0 0 14px;font:500 10px/1 var(--mono);letter-spacing:.3em;color:rgba(18,19,20,.55)}
.pc-pair__sku{margin:0 0 10px;font:400 clamp(26px,2.66vw,34px)/1.1 var(--display)}
.pc-pair__line{margin:0 0 18px;font:600 clamp(22px,2vw,26px)/1.2 var(--sans);letter-spacing:-.03em}
.pc-pair__go{font:500 15px/1 var(--sans)}
.pc-pair > img{transition:transform .6s cubic-bezier(.2,0,0,1)}
.pc-pair:hover > img{transform:scale(1.02)}

/* ------------------------------------------------------------- responsive */
@media (max-width:980px){
  .pc-bar__links{gap:20px}
  .pc-bar__links a:not(.pc-buy){display:none}
  .pc-split,.pc-buy-panel{grid-template-columns:1fr}
  .pc-split__copy{padding:48px var(--pc-pad) 56px}
  .pc-facts dl{grid-template-columns:repeat(2,1fr)}
  .pc-facts dl > div:nth-child(2){border-right:0}
  .pc-facts dl > div:nth-child(-n+2){border-bottom:1px solid rgba(18,19,20,.08)}
}

/* Below this width a photograph cannot carry type: the copy leaves the frame
   and sits on the tint beneath it, and the frame takes the picture's 3:2. */
@media (max-width:820px){
  .pc-hero,.pc-full{height:auto;display:flex;flex-direction:column}
  .pc-hero > img,.pc-full > img{position:static;height:auto;aspect-ratio:3/2}
  .pc-hero__copy,.pc-full__copy,.pc-full--right .pc-full__copy{
    height:auto;max-width:none;margin:0;padding:36px var(--pc-pad) 44px;background:var(--pc-hero);
  }
  .pc-full{margin-top:0}
  .pc-hero > img{object-position:var(--pc-hero-pos-m,70% 30%) !important}
  .pc-ritual ol,.pc-notice{grid-template-columns:1fr}
  .pc-ritual figure{height:auto;aspect-ratio:4/3}
  .pc-pair{margin:0;height:auto;display:flex;flex-direction:column}
  .pc-pair > img{position:static;height:auto;aspect-ratio:3/2}
  .pc-pair__copy{height:auto;max-width:none;padding:28px var(--pc-pad) 36px}
  .pc-details > div{grid-template-columns:100px 1fr}
}

/* A 3:2 frame holds the whole 3:2 photograph, so there is nothing left to
   crop and the model stays where the photographer put her — off to the right.
   Portrait heroes and pair banners take a taller frame so the crop can bring
   her to the centre (owner, 2026-09-26). */
@media (max-width:820px) and (min-width:521px){
  .pc-hero > img,.pc-pair > img{aspect-ratio:4/3}
}
@media (max-width:820px){
  .pc-pair > img{object-position:100% 40% !important}
}
@media (max-width:520px){
  .pc-bar{height:52px}
  .pc-hero > img,.pc-pair > img{aspect-ratio:1/1}
  .pc-bar__sku{font-size:15px}
  .pc-facts dl > div{padding:28px 10px}
  .pc-facts dd{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  .pc-btn,.pc-add,.pc-pair > img{transition:none}
  .pc-btn:hover{transform:none}
  .pc-pair:hover > img{transform:none}
}

/* Buy-panel reassurance lines and the page footnote, from design iteration 12. */
.pc-perks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font:400 13px/1.4 var(--sans);color:var(--pc-t60)}
.pc-footnote{
  margin:0;padding:30px var(--gut) 26px;max-width:900px;
  font:400 12px/1.5 var(--sans);color:rgba(18,19,20,.55);
}

/* Ingredients modal (2026-09-26): a native <dialog> opened from the Ingredients
   row. Esc and the close button are native; a click on the backdrop closes it
   too (store.js). The Xilo radial X sits faintly, in red, in the bottom-right corner —
   the same mark and treatment as the CRF intro panel. */
.pc-inci-open{
  padding:0;border:0;background:none;cursor:pointer;
  font:500 14px/1.5 var(--sans);color:var(--pc-ink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.pc-inci-open:hover{color:var(--pc-acc)}
.pc-inci-open:focus-visible{outline:3px solid var(--pc-acc);outline-offset:3px}

.pc-inci{
  position:fixed;inset:0;margin:auto;
  width:min(640px,calc(100vw - 32px));max-height:min(78vh,720px);
  padding:0;border:0;border-radius:18px;overflow:hidden;
  background:#fbfbfa;color:var(--pc-ink);
  box-shadow:0 24px 80px rgba(18,19,20,.22);
}
.pc-inci[open]{display:flex;flex-direction:column}
.pc-inci::backdrop{background:rgba(18,19,20,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pc-inci::after{
  content:"";position:absolute;right:-96px;bottom:-110px;width:300px;height:300px;
  background-color:var(--red);
  -webkit-mask:url("../assets/xilo-radial-x-outline.svg") center/contain no-repeat;
  mask:url("../assets/xilo-radial-x-outline.svg") center/contain no-repeat;
  opacity:.1;pointer-events:none;
}
.pc-inci__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:26px 28px 18px;border-bottom:1px solid var(--pc-rule);
}
.pc-inci__label{margin:0 0 10px;font:500 10px/1 var(--mono);letter-spacing:.3em;color:var(--pc-acc)}
.pc-inci h2{margin:0;font:400 26px/1.1 var(--display)}
.pc-inci__close{
  flex:none;width:38px;height:38px;border-radius:999px;border:1px solid var(--pc-rule);
  font:300 24px/1 var(--sans);color:var(--pc-ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.pc-inci__close:hover{background:rgba(18,19,20,.06)}
.pc-inci__close:focus-visible{outline:3px solid var(--pc-acc);outline-offset:2px}
.pc-inci__list{
  position:relative;z-index:1;margin:0;padding:22px 28px 34px;overflow:auto;
  font:400 14px/1.75 var(--sans);color:rgba(18,19,20,.78);
}
@media (prefers-reduced-motion:no-preference){
  .pc-inci[open]{animation:pc-inci-in .22s cubic-bezier(.2,0,0,1)}
  @keyframes pc-inci-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
}

/* Flagged ingredients (owner, 2026-09-26): red text, no highlight fill. */
.pc-inci__flag{background:none;color:#c8261b;font-weight:500}