/* Cerisette: components */
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec-t{padding-top:var(--sec)}
.sec-b{padding-bottom:var(--sec)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(28px,4vw,52px)}
.sec-head p{margin:0}
.row-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:42px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--cream);font-weight:600;font-size:14.5px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--cocoa)}
.chip[aria-pressed=true],.chip[aria-selected=true]{background:var(--cocoa);border-color:var(--cocoa);color:var(--cream)}
.chip .n{font:500 11px var(--mono);opacity:.75;margin-left:6px}

/* page head (inner pages) */
.phead{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(32px,4vw,56px)}
.phead .crumb{margin-bottom:22px;color:var(--cocoa-2)}
.phead .crumb a{text-decoration:none}
.phead .crumb a:hover{text-decoration:underline}
.phead-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,80px);align-items:end}
.phead .lede{margin:0}
.band-img{height:clamp(240px,38vw,520px);overflow:hidden}
.band-img picture{height:100%}

/* treatment rows */
.tlist{list-style:none;border-top:1px solid var(--cocoa)}
.trow{display:grid;grid-template-columns:62px 1fr 110px 92px 230px;gap:18px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line-2)}
.trow-code{padding-top:7px;color:var(--cocoa-2)}
.trow-name{font-family:var(--serif);font-size:clamp(24px,2.2vw,30px);line-height:1.08}
.trow-name a{text-decoration:none}
.trow-name a:hover{color:var(--cherry);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.trow-short{margin:4px 0 0;color:var(--cocoa-2);font-size:15.5px}
.trow-dur,.trow-price{padding-top:8px;font-size:14px;text-align:right;white-space:nowrap}
.trow-price{font-weight:500;font-size:15px}
.trow-act{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding-top:2px}
.trow .add{min-width:150px}
.trow .add[aria-pressed=true]{background:var(--cocoa);color:var(--cream)}
.pt-flag{margin:8px 0 0;color:var(--cherry);font-size:12px;display:flex;align-items:center;gap:8px}
.pt-flag span{border:1px solid var(--cherry);padding:2px 6px;border-radius:2px;font-weight:500}
.save{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:50%;background:var(--cream);cursor:pointer}
.save svg{width:18px;height:18px;fill:none;stroke:var(--cocoa);stroke-width:1.7}
.save[aria-pressed=true] svg{fill:var(--cherry);stroke:var(--cherry)}
.save:hover{border-color:var(--cocoa)}
.empty{padding:40px 0;color:var(--cocoa-2);font-size:17px}
.empty strong{display:block;font-family:var(--serif);font-weight:400;font-size:30px;color:var(--cocoa);margin-bottom:6px}

/* cards */
.card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,32px)}
.tag{display:inline-block;font:500 11.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:6px 8px;border-radius:2px;background:var(--cherry);color:#fff}
.tag-l{background:transparent;border:1px solid var(--cocoa);color:var(--cocoa)}

/* dialog */
dialog.dlg{border:0;padding:0;border-radius:var(--r);background:var(--cream);color:var(--cocoa);width:min(720px,calc(100vw - 24px));max-height:calc(100vh - 32px);box-shadow:0 30px 80px rgba(42,22,17,.35)}
dialog.dlg::backdrop{background:rgba(42,22,17,.5)}
.dlg-in{padding:clamp(22px,3vw,40px);position:relative}
.dlg-x{position:absolute;top:14px;right:14px}

/* accordion */
.acc details{border-bottom:1px solid var(--line-2)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:600;font-size:17px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font:400 26px/1 var(--serif);color:var(--cherry);transition:transform .2s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .a{padding:0 0 18px;color:var(--cocoa-2);max-width:70ch}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line-2);margin-bottom:28px}
.tab{min-height:46px;padding:0 16px;border:0;border-bottom:2px solid transparent;background:none;font-weight:600;font-size:15.5px;cursor:pointer;color:var(--cocoa-2)}
.tab:hover{color:var(--cocoa)}
.tab[aria-selected=true]{color:var(--cocoa);border-bottom-color:var(--cherry)}

/* steps indicator */
.steps{display:flex;gap:6px;list-style:none;margin:0 0 28px;padding:0;counter-reset:s}
.steps li{flex:1;min-width:0}
.steps li span{display:block;height:3px;background:var(--line-2);border-radius:2px;margin-bottom:8px}
.steps li.done span,.steps li.cur span{background:var(--cherry)}
.steps li em{font:500 11.5px/1.2 var(--mono);font-style:normal;color:var(--cocoa-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.steps li.cur em{color:var(--cocoa)}

/* compare slider */
.cmp{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--peach);--p:50%}
.cmp picture{position:absolute;inset:0}
.cmp .after{clip-path:inset(0 0 0 var(--p))}
.cmp .line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--cream);transform:translateX(-1px);pointer-events:none}
.cmp .line::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--cream);box-shadow:0 2px 10px rgba(0,0,0,.25);background-image:linear-gradient(90deg,transparent 46%,var(--cocoa) 46% 54%,transparent 54%)}
.cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp input[type=range]:focus-visible+.line{background:var(--cherry)}
.cmp .lab{position:absolute;bottom:10px;font:500 11px/1 var(--mono);background:rgba(42,22,17,.78);color:var(--cream);padding:5px 7px;border-radius:2px;pointer-events:none}
.cmp .lab.b{left:10px}.cmp .lab.a{right:10px}

/* drawer panel (side sheet) */
.sheet{position:fixed;inset:0;z-index:125;background:rgba(42,22,17,.45)}
.sheet[hidden]{display:none}
.sheet-panel{position:absolute;right:0;top:0;bottom:0;width:min(520px,100%);background:var(--cream);overflow:auto;padding:24px var(--gut) 40px}

@media (max-width:1080px){
 .trow{grid-template-columns:52px 1fr 92px 80px;grid-template-areas:"c m d p" "c a a a"}
 .trow-code{grid-area:c}.trow-main{grid-area:m}.trow-dur{grid-area:d}.trow-price{grid-area:p}
 .trow-act{grid-area:a;justify-content:flex-start}
}
@media (max-width:760px){
 .phead-grid{grid-template-columns:1fr}
 .trow{grid-template-columns:1fr auto;grid-template-areas:"m m" "d p" "a a";gap:8px 12px;padding:20px 0}
 .trow-code{display:none}
 .trow-dur,.trow-price{text-align:left;padding-top:0}
 .trow-price{text-align:right}
 .trow .add{flex:1}
}
@media (max-width:900px){
 .steps li em{visibility:hidden}
 .steps li.cur em{visibility:visible;overflow:visible}
 .steps li.cur{flex:2}
}