/* ============================================================
   routine builder — interactive 5 steps
   ============================================================ */
.routine{background:var(--clay-wash)}   /* rhythm comes from the band tokens */
.routine__top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
/* the intro reads as a caption to the tool below it, not as part of it */
.routine__rule{height:1px;border:0;margin:clamp(24px,2.2vw,32px) 0 0;background:rgba(21,18,14,.12)}
/* the five steps read as controls: muted until chosen, with one line tracking progress */
/* the step row scrolls inside this box, so the box is pinned to the column it
   sits in — as a flex item it was taking the row's 580px min-content instead */
.stepbar{margin-top:0;min-width:0;width:100%}
.steps{display:grid;grid-template-columns:repeat(5,1fr)}
.step{
  position:relative;text-align:left;width:100%;
  padding:2px 10px 13px 0;display:grid;gap:4px;align-content:start;
  cursor:pointer;color:var(--ink-45);transition:color .35s var(--ease);
}
.step__i{
  display:inline-flex;align-items:center;gap:8px;font-size:var(--t-label);letter-spacing:.14em;
  font-variant-numeric:tabular-nums;color:var(--ink-25);transition:color .35s var(--ease);
}
.step__i::after{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);
  opacity:0;transform:scale(.4);transition:opacity .35s var(--ease),transform .4s var(--slow);
}
.step__t{
  font-size:clamp(.9375rem,.8vw,1.125rem);font-weight:500;letter-spacing:-.005em;
  color:var(--ink-45);transition:color .35s var(--ease);
}
.step:hover .step__t,.step:hover .step__i{color:var(--ink-70)}
.step.on .step__t{color:var(--ink)}
.step.on .step__i{color:var(--ink)}
.step.on .step__i::after{opacity:1;transform:none}

/* one hairline under the row; the dark fifth slides to the active step */
.stepbar__track{display:block;position:relative;height:2px;background:var(--line-soft)}
.stepbar__track i{
  position:absolute;inset:0;background:var(--ink);
  transform-origin:left;transform:scaleX(var(--p,.2));transition:transform .5s var(--slow);
}
/* while autoplay runs the line creeps on to the next step, so the switch is never a surprise */
.stepbar__track i.run{transition:none;animation:stepfill 4s linear forwards}
.rpanel-auto-paused .stepbar__track i.run{animation-play-state:paused}
@keyframes stepfill{from{transform:scaleX(var(--from))}to{transform:scaleX(var(--to))}}
@media (prefers-reduced-motion:reduce){
  .stepbar__track i.run{animation:none;transform:scaleX(var(--p,.2))}
}

/* one module: the picture anchors the left, everything interactive lives on the
   right — step navigation on top of the explanation and the pick. */
.rpanel{
  display:grid;grid-template-columns:minmax(0,39fr) minmax(0,61fr);
  gap:clamp(16px,1.9vw,32px);
  padding-top:clamp(28px,2.6vw,40px);align-items:start;
}
.rpanel__right{display:grid;gap:clamp(20px,2.4vw,36px);align-content:start}
.rpanel__cols{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:clamp(16px,1.9vw,32px)}
.rpanel__media{position:relative;height:clamp(400px,36vw,540px);overflow:hidden;
  background:var(--stone);border-radius:var(--radius-md)}
.rpanel__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);transition:opacity .3s var(--ease),transform 1s var(--slow);
}
.rpanel__media img.on{opacity:1;transform:none}
.rpanel__body{display:grid;gap:15px;align-content:start}
.rpanel__eyebrow{color:var(--ink-45);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;font-weight:500}
.rpanel__t{font-family:var(--display);font-weight:300;font-size:var(--d2);line-height:1.02;
  letter-spacing:-.02em;text-wrap:balance}
.rpanel__p{color:var(--ink-70);max-width:42ch}
/* the bullets read as arguments, not as a stray list */
.rpanel__why{display:grid;gap:11px;padding-top:clamp(4px,.8vw,10px);
  border-top:1px solid var(--line-soft);margin-top:clamp(4px,.8vw,10px)}
.rpanel__why>.label{color:var(--ink-45);padding-top:clamp(8px,1vw,14px)}
.rpanel__why ul{display:grid;gap:8px}
.rpanel__why li{display:flex;gap:11px;font-size:var(--t-meta);color:var(--ink-70);align-items:baseline}
.rpanel__why i{width:3px;height:3px;border-radius:50%;background:var(--accent);flex:none;translate:0 -3px}
/* the rule hugs the recommendation instead of running the full height */
.rpanel__buy{display:grid;gap:11px;align-content:start;align-self:start;justify-items:start;
  border-left:1px solid var(--line-soft);padding-left:clamp(16px,1.8vw,28px)}
.rpanel__pick{color:var(--ink);font-weight:500;margin-bottom:2px}
.rpanel__brand{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.rpanel__name{font-weight:500}
.rpanel__price{font-size:1.25rem;font-weight:500;font-variant-numeric:tabular-nums}
.rpanel__buy .btn{width:100%;max-width:260px;margin-top:clamp(4px,.8vw,10px)}
.rpanel__view{font-size:var(--t-label);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--ink-45)}
.rpanel__view:hover{color:var(--ink)}
.rpanel.swap .rpanel__body>*,.rpanel.swap .rpanel__buy>*{opacity:0;transform:translateY(6px)}
.rpanel__body>*,.rpanel__buy>*{transition:opacity .26s var(--ease),transform .28s var(--slow)}

@media (max-width:1024px){
  /* steps return to the top, full width, then the picture, then the content.
     align-items:stretch is not decoration: the grid above sets align-items:start,
     and in a column flex that becomes the CROSS axis, so every child shrank to
     its content width. .rpanel__media holds nothing but absolutely positioned
     images, so it measured 0 wide — the picture was never visible on any screen
     under 1024px, leaving the reserved height as an empty block. */
  .rpanel{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);align-items:stretch}
  .rpanel__right{display:contents}
  .stepbar{order:1}
  .rpanel__media{order:2;height:clamp(300px,46vw,420px)}
  .rpanel__cols{order:3;grid-template-columns:1fr;gap:clamp(18px,2.6vw,28px)}
  .rpanel__body,.rpanel__buy{align-self:auto}
  .rpanel__buy{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}
  .rpanel__buy .btn{max-width:320px}
}
/* Side by side only once half the column still fits the longer label on one
   line. Below this "View product" alone wants more than half the width, which
   dragged the pair out of step — unequal halves and "Add to bag" over two
   lines. Narrower than that they stack, still as the same pair of buttons. */
@media (min-width:360px) and (max-width:700px){
  .rpanel__buy{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rpanel__buy > *{grid-column:1/-1}
  .rpanel__buy .btn{grid-column:1}
  .rpanel__buy .rpanel__view{grid-column:2}
}

@media (max-width:720px){
  /* the intro is a row on wide screens, so its 28px gap is horizontal; wrapped
     into a column it landed on top of the sub's own margin-top — 66px for one
     gap. The column owns the spacing, and the rule and panel padding close in
     so the description, the rule and the steps read as one run. */
  .routine__top{flex-direction:column;align-items:flex-start;row-gap:clamp(24px,6vw,28px)}
  .routine__top .sec-sub{margin-top:0}
  .routine__rule{margin-top:20px}
  .rpanel{padding-top:20px;gap:clamp(24px,7vw,32px)}
  /* a picture, not a reserved slot: it takes the width and sets its own height */
  .rpanel__media{height:auto;aspect-ratio:4/5}

  /* the two actions become one pair. The second takes a plain fill rather than
     an outline — --milk reads as a surface against the section's clay, where
     --on-dark would all but vanish into it. The link's underline and arrow go,
     or the two would not be twins. Both get the same narrow side padding so
     neither can force its half of the row wider than the other. */
  .rpanel__buy .rpanel__view{
    width:100%;margin-top:clamp(4px,.8vw,10px);
    display:flex;align-items:center;justify-content:center;
    height:52px;padding:0 12px;
    background:var(--milk);color:var(--ink);border-radius:var(--radius-sm);
    font-size:var(--t-meta);letter-spacing:var(--ls-ui);
  }
  .rpanel__buy .rpanel__view::after,
  .rpanel__buy .rpanel__view svg{display:none}
  .rpanel__buy .rpanel__view:active{background:var(--ivory)}
  .rpanel__buy .btn{padding:0 12px}

  .stepbar{overflow:hidden}
  .steps{
    grid-template-columns:repeat(5,minmax(116px,1fr));scrollbar-width:none;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .steps::-webkit-scrollbar{display:none}
  .step{padding-right:12px;scroll-snap-align:start}
  .step__t{font-size:.9375rem}
}