/* ===== v4: cart panel, footer fixes, social icons, live Why ===== */

/* toast can now hold an action */
.toast{display:flex;align-items:center;gap:14px}
.toast.show{pointer-events:auto}
.toast button{background:var(--orange);color:#fff;border-radius:99px;padding:5px 12px;font-size:12px;font-weight:600}

/* why: the machine is live now; keep the copy column readable */
.why::before{background:linear-gradient(90deg,rgba(203,203,203,.9) 0%,rgba(203,203,203,.55) 24%,rgba(203,203,203,0) 48%)}

/* ===== footer: the machine gets its own room and the links sit on a solid card ===== */
.footer{padding-top:clamp(60px,8vw,110px)}
.foot-top{position:relative;z-index:4;background:var(--gray);padding:clamp(18px,2.4vw,34px);margin:0 calc(var(--pad) * -0.4)}
.foot-mid{flex:1;min-height:clamp(260px,40vh,420px)}
.foot-cols a{position:relative;z-index:2}
.soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.soc a{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(52,52,52,.35);color:var(--charcoal);padding:0;transition:background .35s var(--ease),color .35s,border-color .35s,transform .5s var(--ease)}
.soc a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-4px)}
.foot-cols .soc a{display:inline-grid;padding:0}

/* ===== cart panel (after the Behance cart board) ===== */
.cart-ov{position:fixed;inset:0;z-index:140;background:rgba(20,20,20,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.cart-ov.open{opacity:1;pointer-events:auto}
.cartp{position:fixed;top:0;right:0;bottom:0;z-index:150;width:min(460px,100vw);background:#fff;color:var(--charcoal);display:flex;flex-direction:column;transform:translateX(104%);transition:transform .7s var(--ease);box-shadow:-30px 0 80px rgba(0,0,0,.18);overflow:hidden}
.cartp.open{transform:none}
.cart-h{position:relative;padding:26px 28px 18px;border-bottom:1px solid #e3e3e3}
.cart-t{font-size:clamp(40px,5vw,56px);font-weight:700;letter-spacing:-.06em;line-height:.9;margin-top:10px}
.cart-t sup{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--orange);color:#fff;font-size:12px;font-weight:700;letter-spacing:0;vertical-align:top;top:.1em;margin-left:6px}
.cart-x{position:absolute;right:22px;top:20px;width:40px;height:40px;border-radius:50%;font-size:26px;line-height:1;color:var(--charcoal);transition:background .3s,color .3s,transform .5s var(--ease)}
.cart-x:hover{background:var(--orange);color:#fff;transform:rotate(90deg)}
.st{display:none;flex:1;min-height:0;flex-direction:column}
.cartp[data-step="cart"] .st-cart,.cartp[data-step="details"] .st-details,.cartp[data-step="done"] .st-done{display:flex}
.cart-list{flex:1;overflow:auto;padding:6px 28px}
.ci{display:grid;grid-template-columns:92px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid #e8e8e8;align-items:start}
.ci-img{aspect-ratio:1;background:#ececec;display:grid;place-items:center;overflow:hidden}
.ci-img img{width:90%;height:90%;object-fit:contain}
.ci-b b{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em}
.ci-b small{display:block;margin:4px 0 10px;font-size:11px;color:var(--mid);line-height:1.4}
.ci-q{display:inline-flex;align-items:center;border:1px solid #d6d6d6;border-radius:99px}
.ci-q button{width:30px;height:30px;font-size:16px;color:var(--charcoal);transition:color .3s}
.ci-q button:hover{color:var(--orange)}
.ci-q span{min-width:22px;text-align:center;font-size:13px;font-weight:600}
.ci-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ci-r b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.rm{font-size:11px;color:var(--mid);text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.rm:hover{color:var(--orange)}
.cart-empty{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;padding:0 28px;font-size:15px;color:#666}
.cart-empty[hidden],.cart-sum[hidden]{display:none}
.cart-sum{padding:18px 28px 26px;border-top:1px solid #e3e3e3;display:flex;flex-direction:column;gap:10px}
.crow{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:#666}
.crow.tot{margin:6px 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--charcoal)}
.crow.tot b{font-size:28px;letter-spacing:-.05em}
.btn-orange{height:54px;background:var(--orange);color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;transition:background .3s,transform .5s var(--ease)}
.btn-orange:hover{background:#e8601a;transform:translateY(-2px)}
.btn-ghost{height:44px;font-size:11px;font-weight:700;letter-spacing:.1em;color:#666;border:1px solid #d6d6d6;transition:border-color .3s,color .3s}
.btn-ghost:hover{border-color:var(--charcoal);color:var(--charcoal)}
.st-details,.st-done{padding:22px 28px 26px;gap:12px;overflow:auto}
.ck-t{font-size:22px;font-weight:700;letter-spacing:-.04em;margin-bottom:4px}
.st-details label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#666}
.st-details input,.st-details select{height:46px;padding:0 14px;border:1px solid #d6d6d6;font:500 14px var(--font);color:var(--charcoal);background:#fff;outline:none;transition:border-color .3s}
.st-details input:focus,.st-details select:focus{border-color:var(--orange)}
.st-details label.bad input{border-color:#d93a1a;background:#fff4f1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-note{color:var(--mid)}
.st-done{align-items:flex-start;justify-content:center;gap:16px}
.done-badge{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--orange);color:#fff;font-size:30px}
.st-done p{font-size:14px;line-height:1.6;color:#555}
.st-done .btn-orange{width:100%;margin-top:10px}
@media (max-width:520px){.ci{grid-template-columns:72px 1fr auto}.cart-h{padding:20px}.cart-list,.cart-sum,.st-details,.st-done{padding-left:20px;padding-right:20px}}

/* footer fits one screen: links, machine and wordmark are all visible together at the bottom */
.footer{padding-top:clamp(56px,7vh,90px);min-height:100vh}
.foot-mid{flex:1 1 auto;min-height:clamp(200px,30vh,340px)}
.foot-word{font-size:min(27vw,40vh)}
.foot-bar{bottom:14px}
@media (max-width:900px){.foot-word{font-size:min(44vw,26vh)}.foot-mid{min-height:34vh}}
.footer{padding-top:clamp(118px,15vh,160px)}
.foot-mid{min-height:clamp(190px,27vh,320px)}
.foot-word{font-size:min(25vw,36vh)}