/* Shop: cart button, configurator dialog, cart drawer and checkout. Uses the page's tokens. */
.cartbtn{position:relative;border:1px solid var(--steel);background:transparent;color:var(--ink)}
.cartbtn:hover{background:var(--mist)}
.cartbtn .n{min-width:18px;height:18px;border-radius:9px;background:var(--blue);color:#fff;font-size:11px;line-height:18px;text-align:center;padding:0 5px;font-variant-numeric:tabular-nums}
.cartbtn .n[hidden]{display:none}
.card .row .buy{white-space:nowrap}
@media (max-width:640px){.lnav .acts .cartbtn[aria-label="Rechercher un article"]{font-size:0;gap:0;padding:6px 10px}}
.from small{display:block}

.shopdlg{border:0;padding:0;border-radius:var(--r-card);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);color:var(--ink);background:var(--white);box-shadow:0 30px 80px rgba(0,0,0,.25)}
.shopdlg::backdrop{background:rgba(29,29,31,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dlgin{padding:28px;display:grid;gap:18px}
.dlghead{display:flex;justify-content:space-between;align-items:start;gap:12px}
.dlghead h3{font-size:24px;line-height:1.15}
.x{border:0;background:var(--mist);width:32px;height:32px;border-radius:50%;font-size:18px;line-height:1;color:var(--ink);flex:0 0 auto}
.opt{display:grid;gap:8px}
.opt .k2{display:block}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts button{border:0;border-radius:12px;padding:10px 14px;font-size:14px;letter-spacing:-.224px;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .2s}
.opts button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--blue)}
.opts button:disabled{color:var(--steel);background:var(--frost);text-decoration:line-through;cursor:not-allowed}
.opts button small{display:block;font-size:11px;color:var(--slate)}
.dlgfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--ctrl);padding-top:18px}
.dlgnote{font-size:12px;color:var(--slate)}

.cartwrap{position:fixed;inset:0;z-index:80;visibility:hidden}
.cartwrap.open{visibility:visible}
.cartwrap .ov{position:absolute;inset:0;background:rgba(29,29,31,.45);opacity:0;transition:opacity .3s}
.cartwrap.open .ov{opacity:1}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--white);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cartwrap.open .drawer{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 12px;border-bottom:1px solid var(--ctrl)}
.drawer header h3{font-size:21px}
.drawer .body{flex:1;overflow:auto;padding:16px 20px;display:grid;gap:12px;align-content:start}
.drawer footer{background:var(--white);padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ctrl);display:grid;gap:12px;font-size:14px;color:var(--ink)}
.line-it{display:grid;grid-template-columns:1fr auto;gap:4px 12px;background:var(--mist);border-radius:16px;padding:14px}
.line-it b{font-family:var(--display);font-weight:600;font-size:16px}
.line-it .meta{font-size:12px;color:var(--slate);grid-column:1}
.line-it .pr{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.qty{display:inline-flex;align-items:center;gap:8px;grid-column:1}
.qty button{border:0;width:28px;height:28px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink)}
.rm{border:0;background:none;color:var(--slate);font-size:12px;justify-self:end;text-decoration:underline}
.tot{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.tot.big{font-family:var(--display);font-weight:600;font-size:19px}
.empty{color:var(--slate);text-align:center;padding:40px 0}
.pill.full{justify-content:center;width:100%}
.pill[disabled]{opacity:.5;pointer-events:none}

.ck{display:grid;gap:14px}
.ck label.f{display:grid;gap:6px;font-size:13px;color:var(--slate)}
.ck input[type=text],.ck input[type=tel],.ck input[type=email],.ck textarea,.ck select{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:0;border-radius:12px;padding:11px 12px;box-shadow:inset 0 0 0 1px var(--hair);width:100%}
.ck textarea{min-height:70px;resize:vertical}
.ck fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.ck legend{font-size:13px;color:var(--slate);margin-bottom:6px;padding:0}
.radio{display:flex;gap:10px;align-items:center;background:var(--white);border-radius:12px;padding:12px;box-shadow:inset 0 0 0 1px var(--hair);font-size:14px;color:var(--ink);cursor:pointer}
.radio:has(input:checked){box-shadow:inset 0 0 0 2px var(--blue)}
.radio input{accent-color:var(--blue);margin:0}
.radio span{flex:1}
.radio em{font-style:normal;color:var(--slate);font-size:12px;display:block}
.ckerr{color:#b00020;font-size:13px}
.back{border:0;background:none;color:var(--link);font-size:14px;padding:0;justify-self:start}
