/* La Roche-Posay — Best Sellers funnel
   Brand colours read off laroche-posay.us on 23 September 2026:
   #009EE2 signature blue, #E6F5FC tint, #333 body, #D8D8D8 rules. */

:root{
  --blue:#009ee2;
  --blue-deep:#0077ad;
  --blue-ink:#00436a;
  --tint:#e6f5fc;
  --ink:#1a1a1a;
  --body:#333;
  --mute:#5f5f5f;
  --faint:#8c8c8c;
  --rule:#d8d8d8;
  --hair:#ededed;
  --paper:#fff;
  --shell:#f6fafd;
  --accent:var(--blue);
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --bar-h:62px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.05}
p{margin:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

.wrap{width:min(1280px,calc(100% - 64px));margin-inline:auto}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.04em}
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ───────────────────────────── header ───────────────────────────── */
.bar{
  position:fixed;inset:0 0 auto;z-index:70;height:var(--bar-h);
  display:flex;align-items:center;gap:28px;
  padding:0 clamp(16px,3vw,32px);
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.bar.is-stuck{border-bottom-color:var(--hair)}
.bar-logo{display:block;flex:none}
.bar-logo img{width:158px;height:auto}
.bar-nav{display:flex;gap:26px;margin-left:auto;font-size:13px;letter-spacing:.04em}
.bar-nav a{text-decoration:none;color:var(--mute);padding:6px 0;position:relative;transition:color .2s}
.bar-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.bar-nav a:hover{color:var(--ink)}
.bar-nav a:hover::after{transform:scaleX(1)}
.bag-btn{
  display:flex;align-items:center;gap:8px;flex:none;
  border:1px solid var(--rule);border-radius:999px;padding:8px 16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  transition:border-color .2s,background .2s;
}
.bag-btn:hover{border-color:var(--blue);background:var(--tint)}
.bag-btn b{
  display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--blue);color:#fff;font-size:11px;font-weight:600;
}
.bag-btn[data-empty="1"] b{background:var(--rule);color:var(--mute)}

/* ────────────────────────────── the film ─────────────────────────────
   One pinned stage, scrubbed by scroll. Three acts:
     0.00–0.34  the hero floats alone
     0.34–0.62  it settles into a row of three and its routine flies in
     0.62–1.00  the row lifts away and the product sheet rises
   Every transform below is written by site.js; the CSS only sets the
   resting look and the things that never move.                        */
.film{position:relative}
.film-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--paper);
}
.stage-bg{position:absolute;inset:0;transition:opacity .55s var(--ease)}
.stage-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,.9) 100%);
}
.stage-wash{
  position:absolute;left:50%;top:44%;width:min(1100px,92vw);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent) 0%,transparent 62%);
  filter:blur(24px);
}

/* the giant name behind the bottle */
.ghost{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  width:100%;text-align:center;pointer-events:none;
  font-family:var(--sans);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(78px,15.5vw,250px);line-height:.82;
  color:color-mix(in srgb,var(--accent) 12%,transparent);
  white-space:nowrap;
}

/* the products */
.prod{
  position:absolute;left:50%;top:50%;
  width:auto;height:52vh;height:52svh;
  will-change:transform,opacity;pointer-events:none;
}
.prod-bob{height:100%;animation:bob 6.5s ease-in-out infinite}
.prod:nth-child(2) .prod-bob{animation-delay:-2.2s;animation-duration:7.4s}
.prod:nth-child(3) .prod-bob{animation-delay:-4.1s;animation-duration:6.9s}
.prod img{
  height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 34px 42px rgba(0,58,92,.17)) drop-shadow(0 6px 10px rgba(0,58,92,.09));
}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-16px) rotate(1.1deg)}
}
@media (prefers-reduced-motion:reduce){.prod-bob{animation:none}}

/* act one: the chrome around the hero */
.act1{position:absolute;inset:0;pointer-events:none}
.act1 > *{pointer-events:auto}
.act1-copy{
  position:absolute;left:clamp(16px,4.2vw,68px);top:50%;transform:translateY(-50%);
  width:min(470px,38vw);
}
.act1-rank{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.act1-rank::before{content:"";width:22px;height:1px;background:currentColor}
.act1-head{
  font-size:clamp(30px,3.5vw,50px);line-height:1.02;letter-spacing:-.03em;
  color:var(--ink);font-weight:600;margin-bottom:18px;
}
.act1-body{font-size:15.5px;line-height:1.62;color:var(--mute);max-width:40ch}
.act1-facts{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:26px;padding:0;list-style:none;
}
.act1-facts li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  color:var(--blue-ink);border-radius:999px;padding:5px 11px;background:rgba(255,255,255,.66);
}
.act1-buy{
  position:absolute;right:clamp(16px,4.2vw,68px);bottom:clamp(64px,9vh,104px);
  display:flex;align-items:stretch;gap:12px;
}
.price-chip{
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid var(--hair);border-radius:14px;
  padding:13px 22px;text-align:right;min-width:128px;
}
.price-chip small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.price-chip b{display:block;font-size:25px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-top:3px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:14px;padding:15px 28px;font-size:14px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;transition:transform .18s var(--ease),background .2s,box-shadow .25s,border-color .2s;
}
.btn--solid{background:var(--ink);color:#fff;box-shadow:0 10px 26px rgba(0,50,80,.2)}
.btn--solid:hover{background:var(--blue);transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,158,226,.34)}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(0,158,226,.3)}
.btn--blue:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn--line{border:1px solid var(--rule);background:rgba(255,255,255,.7);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:#fff}
.btn:active{transform:translateY(0)}

.act1-sizes{
  position:absolute;left:clamp(16px,4.2vw,68px);bottom:clamp(64px,9vh,104px);
}
.act1-sizes .kicker{display:block;margin-bottom:10px}
.size-row{display:flex;gap:7px;flex-wrap:wrap}
.size{
  border:1px solid var(--rule);background:rgba(255,255,255,.72);border-radius:9px;
  padding:8px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--mute);
  transition:border-color .2s,color .2s,background .2s;
}
.size:hover{border-color:var(--blue);color:var(--blue-ink)}
.size[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}

/* the act switcher */
.switch{
  transition:opacity .3s var(--ease);
  position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--bar-h) + 18px);
  display:flex;gap:3px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border:1px solid var(--hair);
  z-index:4;
}
.switch button{
  border-radius:999px;padding:7px 15px;white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  transition:background .25s var(--ease),color .25s;
}
.switch button:hover{color:var(--ink)}
.switch button[aria-current="true"]{background:var(--ink);color:#fff}

.chev{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:grid;gap:2px;justify-items:center;color:var(--faint);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
}
.chev svg{animation:nudge 2.1s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(6px);opacity:1}}

/* act two: the row of three */
.trio-head{
  position:absolute;left:50%;top:calc(var(--bar-h) + 66px);transform:translateX(-50%);
  text-align:center;width:min(640px,88vw);pointer-events:none;
}
.trio-head h2{font-size:clamp(22px,2.6vw,33px);color:var(--ink);margin-bottom:9px}
.trio-head p{font-size:15px;color:var(--mute)}
.trio-labels{position:absolute;inset:0;pointer-events:none}
.tlabel{
  position:absolute;transform:translateX(-50%);text-align:center;width:clamp(180px,22vw,260px);
  pointer-events:auto;
}
.tlabel .n{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.25}
.tlabel .l{display:block;font-size:12.5px;color:var(--mute);margin-top:5px;line-height:1.4}
.tlabel .p{
  display:inline-block;margin-top:11px;font-family:var(--mono);font-size:12px;
  color:var(--blue-ink);border-bottom:1px solid var(--rule);padding-bottom:2px;
}

/* act three: the sheet */
.sheet{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:min(1240px,calc(100% - 40px));height:calc(100% - var(--bar-h) - 14px);
  background:#fff;border-radius:22px 22px 0 0;
  box-shadow:0 -22px 60px rgba(0,60,95,.16);
  overflow:hidden;will-change:transform;
}
.sheet-in{
  height:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,46px);
  padding:clamp(20px,3.2vw,44px);overflow:auto;
}
.sheet-gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1.35fr) minmax(0,1fr);gap:12px;min-height:0}
.gtile{
  position:relative;border-radius:14px;background:var(--shell);
  display:grid;place-items:center;padding:14px;overflow:hidden;
}
.gtile:first-child{grid-column:1 / -1;background:linear-gradient(170deg,var(--tint),#fff)}
/* absolutely positioned so the max-height resolves against a box that
   definitely has a height — a percentage against a grid area does not */
.gtile img{
  position:absolute;inset:14px;margin:auto;width:auto;height:auto;
  max-width:calc(100% - 28px);max-height:calc(100% - 28px);
  filter:drop-shadow(0 12px 18px rgba(0,58,92,.14));
}
.gtile .tag{
  position:absolute;left:12px;top:12px;z-index:2;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.sheet-detail{display:flex;flex-direction:column;min-height:0;overflow:auto}
.sheet-eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.sheet-detail h2{font-size:clamp(24px,2.6vw,36px);color:var(--ink);line-height:1.08;margin-bottom:10px}
.sheet-sub{font-size:15px;color:var(--mute);line-height:1.6;margin-bottom:20px}
.stars{display:flex;align-items:center;gap:9px;margin-bottom:20px;font-size:13px;color:var(--mute)}
.stars .s{color:var(--blue);letter-spacing:2px;font-size:14px}
.spec{border-top:1px solid var(--hair);padding:13px 0;display:flex;gap:18px;font-size:13.5px}
.spec dt{flex:none;width:112px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.spec dd{margin:0;color:var(--body)}
.sheet-buy{margin-top:auto;padding-top:22px;display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.sheet-price{font-size:28px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-right:auto}
.sheet-price small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500}

/* ──────────────────────────── sections ──────────────────────────── */
.sec{padding:clamp(72px,10vw,132px) 0}
.sec--tint{background:linear-gradient(180deg,#fff,var(--shell) 22%,var(--shell) 78%,#fff)}
.sec-head{max-width:760px;margin-bottom:clamp(38px,5vw,62px)}
.sec-head .kicker{display:block;margin-bottom:16px}
.sec-head h2{font-size:clamp(30px,4.4vw,58px);color:var(--ink);line-height:1.03;letter-spacing:-.03em}
.sec-head p{margin-top:20px;font-size:17px;line-height:1.62;color:var(--mute);max-width:60ch}

/* the spring */
.spring{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--tint),#fff 62%)}
.spring-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center}
.spring h2{font-size:clamp(32px,5vw,66px);line-height:1;color:var(--blue-ink);letter-spacing:-.035em}
.spring p{margin-top:24px;font-size:17px;line-height:1.66;color:var(--body);max-width:52ch}
.spring-art{position:relative;display:grid;place-items:center;min-height:380px}
.spring-art img{height:min(52vh,460px);width:auto;filter:drop-shadow(0 34px 44px rgba(0,80,125,.22))}
.spring-ring{
  position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(0,158,226,.26);
}
.spring-ring:nth-of-type(2){width:94%;border-color:rgba(0,158,226,.14)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);margin-top:clamp(48px,6vw,80px);border-block:1px solid var(--rule)}
.stat{background:#fff;padding:30px 26px}
.stat b{display:block;font-size:clamp(28px,3.4vw,44px);font-weight:600;color:var(--blue);letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:11px;font-size:13.5px;color:var(--mute);line-height:1.45}

/* routine builder */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px}
.tab{
  border:1px solid var(--rule);border-radius:999px;padding:10px 19px;
  font-size:13.5px;color:var(--mute);transition:all .2s var(--ease);
}
.tab:hover{border-color:var(--blue);color:var(--blue-ink)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.routine{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.step{
  position:relative;border:1px solid var(--hair);border-radius:18px;background:#fff;
  padding:26px;display:flex;flex-direction:column;
  transition:border-color .25s,box-shadow .3s,transform .3s var(--ease);
}
.step:hover{border-color:var(--blue);box-shadow:0 18px 44px rgba(0,80,125,.1);transform:translateY(-4px)}
.step-n{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.step-art{position:relative;height:200px;margin:14px 0 18px}
.step-art img{
  position:absolute;inset:0;margin:auto;width:auto;height:auto;
  max-width:100%;max-height:100%;
  filter:drop-shadow(0 16px 22px rgba(0,58,92,.14));transition:transform .4s var(--ease);
}
.step:hover .step-art img{transform:translateY(-6px) scale(1.03)}
.step h3{font-size:17px;color:var(--ink);line-height:1.25}
.step p{margin-top:8px;font-size:14px;color:var(--mute);line-height:1.5}
.step-foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px}
.step-price{font-family:var(--mono);font-size:15px;color:var(--ink);margin-right:auto}
.routine-total{
  margin-top:26px;border:1px solid var(--rule);border-radius:18px;padding:22px 26px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--shell);
}
.routine-total b{font-size:23px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.routine-total span{font-size:14px;color:var(--mute);margin-right:auto}

/* the shelf */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px;align-items:center}
/* hairlines drawn on the cards, not by the container, so the empty cells
   at the end of the last row stay white instead of showing a grey block */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:1px;background:#fff;border:1px solid var(--hair)}
.card{
  background:#fff;padding:24px 20px 20px;display:flex;flex-direction:column;
  transition:background .25s;position:relative;box-shadow:0 0 0 1px var(--hair);
}
.card:hover{background:var(--shell)}
.card-art{position:relative;height:186px;margin-bottom:18px}
.card-art img{
  position:absolute;inset:0;margin:auto;width:auto;height:auto;
  max-width:100%;max-height:100%;
  filter:drop-shadow(0 12px 16px rgba(0,58,92,.13));transition:transform .4s var(--ease);
}
.card:hover .card-art img{transform:translateY(-7px)}
.card-cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.card h3{font-size:15px;line-height:1.3;color:var(--ink)}
.card p{margin-top:7px;font-size:13px;color:var(--mute);line-height:1.45}
.card-rate{margin-top:11px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.card-rate i{font-style:normal;color:var(--blue)}
.card-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:10px}
.card-price{font-family:var(--mono);font-size:15px;color:var(--ink);margin-right:auto}
.mini{
  border:1px solid var(--rule);border-radius:9px;padding:8px 13px;font-size:12.5px;
  transition:all .2s var(--ease);white-space:nowrap;
}
.mini:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mini.is-added{background:var(--blue);border-color:var(--blue);color:#fff}

/* offer + capture */
.offer{background:var(--blue-ink);color:#fff;border-radius:22px;padding:clamp(34px,5vw,64px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
.offer h2{font-size:clamp(28px,3.6vw,46px);line-height:1.04;letter-spacing:-.03em}
.offer p{margin-top:18px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.76);max-width:46ch}
.offer .kicker{color:rgba(255,255,255,.55)}
.offer-list{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:rgba(255,255,255,.18);border-radius:14px;overflow:hidden}
.offer-list li{background:var(--blue-ink);padding:18px 22px;display:flex;gap:14px;align-items:baseline;font-size:14.5px}
.offer-list b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--blue);flex:none;width:36px}

.capture{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.form{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.form input{
  flex:1 1 220px;border:1px solid var(--rule);border-radius:13px;padding:15px 18px;
  font:400 15px var(--sans);color:var(--ink);background:#fff;
}
.form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,158,226,.14)}
.form-note{margin-top:14px;font-size:12.5px;color:var(--faint)}

/* bag drawer */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(0,40,62,.34);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.is-open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;z-index:81;top:0;right:0;height:100%;width:min(420px,100%);
  background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .42s var(--ease);
  box-shadow:-20px 0 60px rgba(0,50,80,.18);
}
.drawer.is-open{transform:none}
.drawer-top{display:flex;align-items:center;gap:14px;padding:22px 24px;border-bottom:1px solid var(--hair)}
.drawer-top h2{font-size:17px;margin-right:auto}
.drawer-list{flex:1;overflow:auto;padding:8px 24px}
.bagrow{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--hair)}
.bagrow img{width:56px;height:70px;object-fit:contain;flex:none;align-self:flex-start}
.bagrow .n{font-size:14px;color:var(--ink);line-height:1.3}
.bagrow .m{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:5px}
.bagrow .p{font-family:var(--mono);font-size:13px;color:var(--ink);margin-left:auto;white-space:nowrap}
.bagrow button{font-size:12px;color:var(--faint);text-decoration:underline;margin-top:6px;display:block}
.drawer-foot{padding:22px 24px;border-top:1px solid var(--hair);display:grid;gap:14px}
.ship-bar{height:4px;border-radius:999px;background:var(--hair);overflow:hidden}
.ship-bar i{display:block;height:100%;background:var(--blue);width:0;transition:width .45s var(--ease)}
.ship-note{font-size:12.5px;color:var(--mute)}
.drawer-total{display:flex;align-items:baseline;gap:12px;font-size:15px}
.drawer-total b{margin-left:auto;font-size:21px;font-weight:600;color:var(--ink)}
.drawer-empty{padding:60px 24px;text-align:center;color:var(--faint);font-size:14px}

/* ─────────────────────────── footer ───────────────────────────
   Copied from laroche-posay.us: blue promise bar, four link columns beside
   the email sign-up, contact and follow, a grey legal line, and the blue
   strip across the bottom. White, not dark — theirs is white.            */
.foot{background:#fff;color:var(--mute);font-size:14px}
.foot a{text-decoration:none;color:inherit}

/* the blue promise bar */
.foot-promise{background:var(--blue);color:#fff}
.foot-promise-in{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  padding:22px 0;
}
.foot-promise a{
  display:flex;align-items:center;gap:12px;padding:6px 4px;
  font-size:13.5px;line-height:1.3;transition:opacity .2s;
}
.foot-promise a:hover{opacity:.72}
.foot-promise svg{
  width:26px;height:26px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.foot-promise span{display:block}
.foot-promise b{display:block;font-weight:400}

/* columns + sign-up */
.foot-main{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.85fr);
  gap:clamp(28px,5vw,74px);padding:clamp(40px,5vw,60px) 0;
}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.foot h4{
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  text-transform:uppercase;margin-bottom:16px;
}
.foot-cols ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot-cols a{font-size:13px;line-height:1.35;transition:color .2s}
.foot-cols a:hover{color:var(--blue)}
.privacy-choice{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.privacy-choice svg{width:30px;height:14px;flex:none;fill:#fff;stroke:var(--blue);stroke-width:1}
.privacy-choice .on{fill:var(--blue);stroke:none}
.privacy-choice .knob{fill:#fff;stroke:none}

.foot-side h4{margin-top:0}
.foot-side h4 + *{margin-top:0}
.foot-side > h4:not(:first-child){margin-top:36px}
.foot-req{font-size:12.5px;color:var(--faint);margin-bottom:20px}
.foot-field{display:block;margin-bottom:22px}
.foot-field span{display:block;font-size:13px;color:var(--body);margin-bottom:6px}
.foot-field input{
  width:100%;border:0;border-bottom:1px solid var(--rule);background:none;
  padding:6px 2px;font:400 15px var(--sans);color:var(--ink);
}
.foot-field input:focus{outline:none;border-bottom-color:var(--blue)}
.foot-consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:16px}
.foot-consent input{margin-top:3px;flex:none;accent-color:var(--blue);width:15px;height:15px}
.foot-consent span,.foot-legalese{font-size:11.5px;line-height:1.55;color:var(--faint)}
.foot-consent b{font-weight:600;color:var(--mute)}
.foot-consent a,.foot-legalese a{text-decoration:underline;color:var(--mute)}
.foot-consent a:hover,.foot-legalese a:hover{color:var(--blue)}
.foot-legalese{margin-bottom:20px}
.foot-submit{
  border:1px solid var(--rule);background:#f4f4f4;color:var(--faint);
  padding:13px 34px;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;border-radius:2px;transition:all .2s var(--ease);
}
.foot-submit:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.foot-contact{font-size:13px;line-height:1.6}
.foot-contact a{text-decoration:underline}
.foot-contact a:hover{color:var(--blue)}
.foot-social{display:flex;gap:12px}
.foot-social a{
  width:38px;height:38px;border-radius:50%;background:var(--tint);
  display:grid;place-items:center;color:var(--blue);transition:background .2s,color .2s;
}
.foot-social a:hover{background:var(--blue);color:#fff}
.foot-social svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.foot-locale{
  margin-top:26px;border:1px solid var(--rule);border-radius:3px;
  padding:13px 16px;font-size:13.5px;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;
}
.foot-locale svg{width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* the grey legal line */
.foot-legal{border-top:1px solid var(--hair)}
.foot-legal-in{
  display:flex;gap:28px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding:22px 0;
}
.foot-legal p{font-size:11.5px;line-height:1.7;color:var(--faint)}
.foot-legal a{text-decoration:underline}
.foot-legal a:hover{color:var(--blue)}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--mute)}
.foot-legal nav a{text-decoration:none;position:relative}
.foot-legal nav a:not(:last-child)::after{
  content:"·";position:absolute;right:-10px;color:var(--rule);
}
.foot-legal nav a:hover{color:var(--blue)}

/* the blue strip across the bottom */
.foot-strip{background:var(--blue);color:#fff}
.foot-strip-in{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 0;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}
.foot-strip a{transition:opacity .2s}
.foot-strip a:hover{opacity:.72}


/* ───────────────────────────── responsive ───────────────────────────── */
@media (max-width:1080px){
  .wrap{width:calc(100% - 40px)}
  .foot-main{grid-template-columns:1fr}
  .foot-promise-in{grid-template-columns:repeat(3,1fr);gap:14px}
  .spring-grid,.capture,.offer{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .sheet-in{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .sheet-gallery{grid-template-rows:230px 150px}
  .routine{grid-template-columns:1fr}
  .bar-nav{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .bar-logo img{width:126px}
  .prod{height:38vh;height:38svh}
  .ghost{top:56%;font-size:clamp(56px,17vw,120px)}
  .act1-copy{
    left:16px;right:16px;width:auto;bottom:auto;
    transform:none;top:calc(var(--bar-h) + 58px);
  }
  .act1-head{font-size:25px;margin-bottom:14px}
  .act1-body{display:none}
  .act1-facts{margin-top:14px}
  .act1-facts li:nth-child(n+3){display:none}
  .act1-sizes{display:none}
  .act1-buy{left:16px;right:16px;bottom:64px;justify-content:space-between}
  .switch{width:calc(100% - 24px);overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .switch::-webkit-scrollbar{display:none}
  .trio-head{top:calc(var(--bar-h) + 70px)}
  .trio-head h2{font-size:21px}
  .tlabel{width:31vw}
  .tlabel .n{font-size:11.5px}
  .tlabel .l{display:none}
  .tlabel .p{font-size:11px;margin-top:6px}
  .sheet{width:calc(100% - 16px);height:calc(100% - var(--bar-h) - 8px)}
  .sheet-in{padding:18px;gap:18px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(164px,1fr))}
  .card-art{height:140px}
  .stats{grid-template-columns:1fr}
  .foot-promise-in{grid-template-columns:1fr 1fr;gap:10px;padding:18px 0}
  .foot-promise a{font-size:12.5px;gap:9px}
  .foot-promise svg{width:22px;height:22px}
  .foot-legal-in{flex-direction:column;gap:16px}
  .foot-strip-in{flex-direction:column;gap:11px;text-align:center;font-size:11.5px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:26px}
}

/* ---- thumb-sized links on phones and tablets (23 Sep 2026, her mobile + iPad
   check). The list links in the menus and the footer were 13–25px tall. The
   padding widens what a finger can hit; the equal negative margin leaves every
   word exactly where it was placed. */
@media (max-width: 900px) {
  li > a { display: inline-block; padding: 0.45rem 0; margin: -0.45rem 0; }
}

/* Fine print stays fine print: the legal links keep their size and their line,
   and grow only the area a thumb can hit (23 Sep 2026). */
@media (max-width: 900px) {
  footer a, .legal a, nav a { position: relative; }
  footer a::before, .legal a::before, nav a::before {
    content: ""; position: absolute; inset: -0.5rem -0.2rem;
  }
}

/* ───────────────── the photographs ─────────────────
   Nothing on this page is meant to be lifted. The shield is a transparent
   layer over each product box: a long press on a phone, or a drag, meets it
   instead of the packshot. Screenshots are still screenshots. */
img{
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
}
/* .prod is already position:absolute on the stage — do NOT give it relative
   here or the packshots drop out of the film and stack at the bottom left */
.card-art,.step-art,.gtile,.spring-art,.bar-logo,.bagrow{position:relative}
.prod::after,.card-art::after,.step-art::after,.gtile::after,
.spring-art::after,.bar-logo::after{
  content:"";position:absolute;inset:0;z-index:5;
}
/* the gallery tile's caption has to stay above its own shield */
.gtile .tag{z-index:6}
/* .prod is pointer-events:none so the film never eats a click; its shield has
   to opt back in, or the packshots on the stage stay unprotected */
.prod::after{pointer-events:auto}
/* every shield sits inside the thing it covers, so a click on it still reaches
   the card, the link or the button underneath — nothing is swallowed */
.bagrow::after{content:"";position:absolute;inset:0;z-index:5}