/* Home sections from the Biologique Recherche references (request #55, task 4409). Colours come from the :root palette. */
.rk-routine,.rk-skin,.rk-icon{max-width:1320px;margin:0 auto;padding:88px 28px 0}
.rk-sub{width:100%;max-width:56ch;margin:6px 0 0;color:var(--ink-2)}

/* routine: one shelf, five bottles, joined by a gold line in routine order */
.rk-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;counter-reset:s}
.rk-steps::before{content:"";position:absolute;inset-inline:10%;top:calc(var(--rk-stage,200px) + 22px);height:1px;background:linear-gradient(90deg,transparent,var(--gold-2) 12%,var(--gold-2) 88%,transparent)}
.rk-step{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--ink);gap:4px}
.rk-stage{display:grid;place-items:center;width:100%;height:var(--rk-stage,200px);border-radius:var(--r-lg);background:radial-gradient(70% 60% at 50% 62%,var(--pearl),var(--honey) 75%,var(--sand));overflow:hidden;transition:background .4s}
.rk-stage img{width:78%;height:88%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.05) contrast(1.05);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rk-step:hover .rk-stage img,.rk-step:focus-visible .rk-stage img{transform:translateY(-6px) scale(1.04)}
.rk-num{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;margin-top:8px;border-radius:50%;background:var(--pearl);border:1px solid var(--gold-2);font:500 13px/1 var(--fl);color:var(--gold-ink)}
.rk-phase{font:500 11.5px/1.4 var(--fl);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-top:8px}
.rk-step b{font-weight:500;font-size:18px}
.rk-step small{color:var(--ink-3);font-size:13.5px}

/* by skin: quiet list of real concerns from her product data */
.rk-skin-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.rk-skin-list a{display:flex;flex-direction:column;gap:2px;min-height:118px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);text-decoration:none;color:var(--ink);position:relative;transition:border-color .3s,background .3s}
.rk-skin-list a:hover,.rk-skin-list a:focus-visible{border-color:var(--gold);background:var(--honey)}
.rk-skin-list b{font-weight:500;font-size:18px;line-height:1.3}
.rk-skin-list small{color:var(--ink-3);font-size:13.5px;margin-top:auto}
.rk-go{position:absolute;inset-inline-end:20px;bottom:18px;color:var(--gold-ink);transition:transform .3s}
.rk-skin-list a:hover .rk-go{transform:translateX(-4px)}

/* P50 spotlight: one icon, large, then the versions to choose from */
.rk-icon{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.rk-icon-stage{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
 background:radial-gradient(60% 45% at 50% 58%,var(--pearl),transparent 70%),linear-gradient(180deg,var(--honey),var(--sand) 70%,var(--sand-2))}
.rk-icon-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.22);mix-blend-mode:multiply;filter:brightness(1.05) contrast(1.05)}
.rk-icon-copy h2{font:300 clamp(40px,5vw,68px)/1 var(--fl);letter-spacing:.02em;margin:0 0 18px}
.rk-icon-copy>p{color:var(--ink-2);max-width:52ch}
.rk-versions{margin:0 0 26px;display:grid;gap:10px}
.rk-versions div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.rk-versions dt{font:500 14px/1.5 var(--fl);letter-spacing:.06em;color:var(--gold-ink);text-align:start}
.rk-versions dd{margin:0;color:var(--ink-2)}
.rk-icon-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}

@media (max-width:1100px){.rk-skin-list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
 .rk-routine,.rk-skin,.rk-icon{padding:64px 20px 0}
 .rk-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-20px;padding:0 20px 6px;scrollbar-width:none;--rk-stage:170px}
 .rk-steps::-webkit-scrollbar{display:none}
 .rk-steps::before{display:none}
 .rk-steps li{flex:0 0 46%;scroll-snap-align:start}
 .rk-skin-list{grid-template-columns:repeat(2,1fr);gap:10px}
 .rk-skin-list a{min-height:100px;padding:16px}
 .rk-icon{grid-template-columns:1fr;gap:28px}
 .rk-icon-stage{aspect-ratio:1}
 .rk-skin-list li:last-child:nth-child(odd){grid-column:1/-1}
 .rk-versions div{grid-template-columns:1fr;gap:2px}
 .rk-icon-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-20px;padding:0 20px 6px;scrollbar-width:none}
 .rk-icon-cards::-webkit-scrollbar{display:none}
 .rk-icon-cards>.pcard{flex:0 0 46%;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.rk-stage img,.rk-go{transition:none}}
/* request #73: Gift Card banner, new gold/beige illustration; label kept to the right so the card shows */
.tiles{grid-auto-rows:300px}
.tiles .tile.t6 img{object-position:50% 55%}
.tiles .tile.t6 .tile-text{inset-inline-end:auto;max-width:min(320px,calc(100% - 28px))}
@media (max-width:900px){.tiles{grid-auto-rows:200px}.tiles .tile.t6 img{object-position:85% 45%}.tiles .tile.t6 .tile-text{max-width:calc(56% - 10px)}}
/* request #91: five tiles, the brands tile takes the whole top-right row */
.tiles .tile.t-wide{grid-column:span 2}