/* ============ CLISTELL v4 — carrinho, checkout, pagamentos ============ */

/* ---- carrinho v2 ---- */
.cartv2{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start;margin-top:18px}
.cvleft{min-width:0}
.cvhead{font-size:15px;font-weight:700;color:#17263e;margin-bottom:10px}
.cvrow{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:10px;display:grid;grid-template-columns:86px minmax(0,1fr) auto auto auto;gap:16px;align-items:center}
.cvrow.saved{grid-template-columns:86px minmax(0,1fr) auto}
.cvimg{width:86px;height:86px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.cvinfo{min-width:0}
.cvname{font-size:13.8px;font-weight:600;color:#17263e;line-height:1.4;display:block;margin-bottom:3px}
.cvname:hover{color:var(--blue)}
.cvsku{font-size:11.5px;color:#9aa7ba;display:block;margin-bottom:5px}
.cvunit{font-size:13px;color:#55657d;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cvqty{display:flex;align-items:center}
.cvline{font-size:15.5px;font-weight:800;color:#17263e;text-align:right;min-width:86px}
.cvact{display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.cvlink{background:none;border:0;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;padding:0;white-space:nowrap}
.cvlink:hover{text-decoration:underline}
.cvlink.rm{color:#9aa7ba}
.cvlink.rm:hover{color:var(--red)}
.couponbox{background:#f8fafd;border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin:12px 0}
.couponbox label{font-size:12px;font-weight:700;color:#33445e;display:block;margin-bottom:8px}
.cprow{display:flex;gap:8px}
.cprow input{flex:1;border:1px solid #d6dde8;border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;outline:0;min-width:0}
.cprow input:focus{border-color:var(--blue)}
.cperr{color:var(--red);font-size:11.8px;margin-top:6px;font-weight:600}
.cphint{font-size:11px;color:#9aa7ba;margin-top:7px}
.applied{display:flex;align-items:center;gap:9px;background:#e5f7ec;border:1px solid #bfe8d0;color:#17753f;border-radius:8px;padding:10px 13px;font-size:12.8px;font-weight:600}
.applied button{margin-left:auto;background:none;border:0;color:#17753f;cursor:pointer;font-size:14px}
.sumrow.disc b{color:var(--green)}
.sumrow.vat{font-size:12px;color:#8b97a9}
.securemini{font-size:11.5px;color:#8b97a9;text-align:center;margin-top:12px;line-height:1.6}

/* ---- checkout wizard ---- */
.costeps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-top:18px}
.costep{display:flex;align-items:center;gap:10px;cursor:pointer;color:#8b97a9;min-width:0}
.costep span{width:30px;height:30px;border-radius:50%;border:2px solid #d6dde8;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex-shrink:0;background:#fff}
.costep b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.costep.cur{color:#17263e}
.costep.cur span{border-color:var(--blue);background:var(--blue);color:#fff}
.costep.done{color:var(--green)}
.costep.done span{border-color:var(--green);background:#e5f7ec;color:var(--green)}
.cogrid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start;margin-top:16px}
.comain{min-width:0}
.costep-body{padding:26px 28px}
.costep-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.costep-h h2{font-size:18px;font-weight:800;color:#17263e}
.loginhint{font-size:13px;color:#55657d}
.loginhint a{color:var(--blue);font-weight:700}
.conote{font-size:12.3px;color:#8b97a9;background:#f5f8fd;border-radius:9px;padding:10px 13px;line-height:1.6;margin:10px 0}
.fcell{margin-bottom:12px;min-width:0}
.fcell label,.costep-body>label{display:block;font-size:12.5px;font-weight:600;color:#33445e;margin-bottom:6px}
.fcell input,.fcell select{width:100%;border:1px solid #d6dde8;border-radius:8px;padding:11px 13px;font-size:13.5px;font-family:inherit;outline:0;color:var(--ink);background:#fff;transition:.2s}
.fcell input:focus,.fcell select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,108,245,.13)}
.fcell input.err,.fcell select.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,59,59,.12)}
.ferr{color:var(--red);font-size:11.8px;font-weight:600;margin-top:5px}
.fcell input:disabled{background:#f1f4f9;color:#8b97a9}
.cobig{display:flex;align-items:center;gap:10px;font-size:13.8px;font-weight:600;color:#17263e;background:#eef4fd;border:1px solid #d6e5fa;border-radius:10px;padding:13px 15px;cursor:pointer;margin-bottom:14px}
.cobig input{accent-color:var(--blue);width:17px;height:17px}
.conav{display:flex;gap:10px;justify-content:space-between;margin-top:18px;flex-wrap:wrap}
.conav .btn-primary{margin-left:auto}

/* envio */
.shipopts{display:grid;gap:10px}
.shipopt{display:flex;align-items:center;gap:14px;border:1.5px solid #d6dde8;border-radius:11px;padding:14px 16px;cursor:pointer;transition:.15s;background:#fff}
.shipopt input{accent-color:var(--blue)}
.shipopt:has(input:checked){border-color:var(--blue);background:#f5f9ff}
.so-mid{flex:1;min-width:0}
.so-mid b{font-size:13.8px;color:#17263e;display:block}
.so-mid span{font-size:12.3px;color:#44536b;display:block;margin-top:3px}
.so-mid small{font-size:11px;color:#9aa7ba;display:block;margin-top:2px}
.so-cost{font-size:14.5px;font-weight:800;color:var(--blue);white-space:nowrap}
.so-cost .free{color:var(--green);font-style:normal;font-size:12px;display:block}
.shipopt:has(input:checked) .so-cost .free{display:inline;margin-left:4px}

/* pagamento */
.psbadge{font-size:11px;font-weight:700;background:#fff6e5;color:#b97c10;border-radius:999px;padding:5px 12px}
.payopts2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payopt2{display:flex;align-items:center;gap:12px;border:1.5px solid #d6dde8;border-radius:11px;padding:13px 15px;cursor:pointer;transition:.15s;background:#fff;position:relative}
.payopt2 input{accent-color:var(--blue)}
.payopt2:has(input:checked){border-color:var(--blue);background:#f5f9ff;box-shadow:0 0 0 3px rgba(26,108,245,.1)}
.po-ic{font-size:20px;width:34px;text-align:center;flex-shrink:0}
.po-tx{min-width:0}
.po-tx b{font-size:13.5px;color:#17263e;display:block}
.po-tx small{font-size:11px;color:#8b97a9;display:block;margin-top:1px}
.po-badge{margin-left:auto;background:#e5f0ff;color:#1257d0;font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px}
.po-badge.gray{background:#eef1f6;color:#64758f}
.paypanel{margin-top:14px;background:#f8fafd;border:1px solid var(--line);border-radius:11px;padding:16px}
.phonepre{display:flex;align-items:stretch}
.phonepre span{background:#eef1f6;border:1px solid #d6dde8;border-right:0;border-radius:8px 0 0 8px;display:grid;place-items:center;padding:0 13px;font-size:13px;font-weight:700;color:#33445e}
.phonepre input{border-radius:0 8px 8px 0;border-left:0}
.brandnote{font-size:12.5px;font-weight:700;color:var(--blue);min-height:16px;margin-top:6px}
.mbslots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.mbslots>div{background:#fff;border:1px dashed #c9d7ee;border-radius:10px;padding:11px 13px;text-align:center}
.mbslots b{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#8b97a9;display:block}
.mbslots span{font-size:16px;font-weight:800;color:#17263e;display:block;margin-top:4px}

/* revisão */
.revgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.revbox{background:#f8fafd;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.revbox b{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:#8b97a9;display:block;margin-bottom:7px}
.revbox p{font-size:12.8px;color:#33445e;line-height:1.7;margin:0}
.revbox .cvlink{margin-top:7px}
.termsbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 17px;margin:16px 0 4px;display:grid;gap:10px}
.termsbox label{display:flex;align-items:flex-start;gap:10px;font-size:12.8px;color:#33445e;cursor:pointer;line-height:1.55}
.termsbox input{accent-color:var(--blue);margin-top:2px;width:15px;height:15px;flex-shrink:0}
.termsbox a{color:var(--blue);font-weight:600}

/* ---- confirmação v2 ---- */
.paystate{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 4px;flex-wrap:wrap}
.paystate b{font-size:13.5px;color:#17263e}
.paystate span{font-size:12.5px;color:#7d8aa0}
.paybadge{font-size:12px;font-weight:800;border-radius:999px;padding:6px 14px;display:inline-flex;align-items:center;gap:7px}
.paybadge.wait{background:#fff6e5;color:#b97c10}
.paybadge.ok{background:#e5f7ec;color:#17753f}
.paybadge.bad{background:#fdecec;color:var(--red)}
.timeline5{display:flex;justify-content:space-between;max-width:540px;margin:26px auto 0;position:relative}
.timeline5::before{content:'';position:absolute;top:17px;left:7%;right:7%;height:2px;background:#e3e8f0}
.confdetails{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:640px;margin:24px auto 0;text-align:left}
.confdetails>div{background:#f8fafd;border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.confdetails b{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#8b97a9;display:block;margin-bottom:6px}
.confdetails p{font-size:12.3px;color:#33445e;line-height:1.65;margin:0}

/* ============ RESPONSIVE v4 ============ */
@media(max-width:1000px){
 .cartv2,.cogrid{grid-template-columns:1fr}
 .cvsum,#coSumWrap{position:static;order:-1}
 .cosum{height:100%}
 .confdetails{grid-template-columns:1fr}
 .costeps{grid-template-columns:repeat(5,auto);overflow-x:auto;padding:12px 14px;gap:14px}
 .costep b{display:none}
 .costep.cur b{display:block}
}
@media(max-width:680px){
 .cvrow{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:14px}
 .cvrow.saved{grid-template-columns:72px minmax(0,1fr)}
 .cvimg{width:72px;height:72px}
 .cvqty{grid-column:1}
 .cvline{grid-column:2;text-align:left}
 .cvact{grid-column:1/-1;flex-direction:row;gap:14px;align-items:center}
 .costep-body{padding:20px 16px}
 .payopts2{grid-template-columns:1fr}
 .revgrid{grid-template-columns:1fr}
 .mbslots{grid-template-columns:1fr 1fr}
 .conav{flex-direction:column-reverse}
 .conav .btn-primary,.conav .btn-white{width:100%;justify-content:center}
 .timeline5::before{left:10%;right:10%}
}