/* Carrito (drawer) completo + checkout */

/* ============ DRAWER DEL CARRITO ============ */
.cart-drawer { width: min(460px, 100%); }
.cart-scroll { flex: 1; overflow: auto; padding: 0 24px 12px; }
.cart-scroll .cart-items { flex: none; overflow: visible; padding: 0; }
.cart-drawer .ship-bar { background: none; padding: 18px 0 14px; display: block; }
.cart-drawer .ship-bar p { font-size: 13px; font-weight: 600; }
.ci { grid-template-columns: 64px 1fr; position: relative; }
.ci-img { width: 64px; height: 82px; }
.ci-img.sm { width: 48px; height: 60px; flex: none; }
.ci-body h3 { font-size: 12px; font-weight: 500; text-transform: uppercase; line-height: 1.35; }
.ci-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ci-row strong { font-size: 13px; }
.ci-del { position: static; width: auto; height: auto; margin-top: 6px; font-size: 11px; text-decoration: underline; color: var(--muted); }
.ci-del:hover { color: #c8312b; }
.ship-acc { border-top: 1px solid #ececee; padding: 14px 0 6px; }
.ship-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; padding-bottom: 12px; }
.ship-acc summary::-webkit-details-marker { display: none; }
.ship-acc summary::after { content: '−'; font-size: 18px; line-height: 1; }
.ship-acc:not([open]) summary::after { content: '+'; }
.cp { font-size: 12px; margin-bottom: 10px; }
.cp button { margin-left: 6px; font-size: 12px; text-decoration: underline; }
.cp-form { display: flex; gap: 8px; margin-bottom: 12px; }
.cp-form input { flex: 1; padding: 10px; border: 1px solid #d5d5d8; font: inherit; font-size: 13px; }
.cp-form button { padding: 0 16px; background: var(--ink); color: #fff; font-size: 12px; }
.ship-warn { font-size: 11.5px; line-height: 1.5; color: #c26a12; border: 1px solid #e9b87d; padding: 10px 12px; margin: 10px 0 14px; }
.ship-acc h4 { font-size: 12px; font-weight: 600; margin: 14px 0 8px; }
.ship-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; background: #f5f5f6; border: 1px solid transparent; font-size: 12px; cursor: pointer; transition: border-color .3s, background .3s; }
.ship-opt:has(input:checked) { border-color: var(--ink); background: #fff; }
.ship-opt span { line-height: 1.4; }
.ship-opt span a { display: block; margin-top: 6px; font-size: 11px; text-decoration: underline; }
.ship-opt em { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ship-opt b { font-size: 12px; font-weight: 600; }
.ship-opt input { accent-color: var(--ink); }
.sum { display: grid; gap: 6px; padding: 16px 0; font-size: 13px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; }
.sum .dim { color: #a2a2a8; font-size: 12px; }
.sum .tot { font-size: 18px; font-weight: 700; padding-top: 10px; margin-top: 6px; border-top: 1px solid #ececee; }
.cart-scroll h3 { font-size: 16px; font-weight: 700; margin: 8px 0 12px; }
.upsell { display: grid; gap: 10px; padding-bottom: 12px; }
.upsell li { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; border: 1px solid #d9d9dc; padding: 8px 12px 8px 8px; transition: border-color .3s; }
.upsell li:hover { border-color: var(--ink); }
.upsell b { display: block; font-size: 12px; text-transform: uppercase; font-weight: 600; }
.upsell span { font-size: 12px; color: #55555a; }
.upsell button { padding: 9px 14px; background: #ececee; font-size: 12px; transition: background .3s, color .3s; }
.upsell button:hover { background: var(--ink); color: #fff; }
.cart-drawer footer { padding: 14px 24px 18px; gap: 8px; }
.cart-total { font-size: 15px; text-transform: none; }
.cart-total strong { font-size: 20px; }
.cart-note { font-size: 11.5px; color: #55555a; text-align: right; }
.cart-drawer footer .btn-brown { width: 100%; }
.more-products { text-align: center; font-size: 12px; font-weight: 600; padding: 6px; }
.more-products:hover { text-decoration: underline; }

/* ============ CHECKOUT ============ */
body.is-checkout .site-header, body.is-checkout .site-footer, body.is-checkout .wa-float { display: none; }
body.is-checkout .view-page { padding-top: 24px; background: #fff; }
.co { max-width: 1080px; }
.co-top { padding: 0 0 18px; }
.co-top .logo { font-size: 32px; display: inline-block; }
.ev-box { margin: -4px 0 18px; padding: 16px 18px; background: #faf8f5; border: 1px solid #ece7e0; border-left: 3px solid var(--accent, #ff7a00); font-size: 13.5px; line-height: 1.55; }
.ev-box p { margin: 0 0 10px; }
.ev-box.ok { background: #eaf7ef; border-color: #cfeadb; border-left-color: #1f9d55; }
.ev-ok { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-weight: 700; color: #178a4a; }
.ev-ok i { width: 20px; height: 20px; border-radius: 50%; background: #1f9d55; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; animation: stepPop .7s cubic-bezier(.34,1.56,.64,1) both; }
.ev-row { display: flex; gap: 10px; margin: 8px 0; }
.ev-row input { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid #d5d5d8; font: inherit; font-size: 20px; letter-spacing: 8px; text-align: center; background: #fff; }
.ev-row input:focus { outline: 0; border-color: var(--ink); }
.ev-row button { padding: 0 22px; }
.ev-msg { min-height: 18px; margin: 6px 0 4px !important; font-size: 12.5px; color: var(--muted); }
.ev-msg.bad { color: #c8312b; }
.ev-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; color: var(--muted); }
.co-steps { display: flex; justify-content: space-between; max-width: 520px; margin: 0 auto 40px; position: relative; }
.co-steps::before { content: ''; position: absolute; top: 14px; left: 8%; right: 8%; height: 1px; background: #cfcfd3; }
.co-steps li { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 11px; color: var(--muted); background: #fff; padding: 0 14px; }
.co-steps i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #cfcfd3; display: grid; place-items: center; font-style: normal; font-size: 12px; background: #fff; transition: all .4s var(--ease); }
.co-steps .done i { background: var(--brown); border-color: var(--brown); color: #fff; }
.co-steps .now i { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 4px #f0eeec; }
.co-steps .now span, .co-steps .done span { color: var(--ink); }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; align-items: start; }
.co-main h2 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 34px 0 14px; color: #3d3d41; }
.co-main h2:first-child { margin-top: 0; }
.hint { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid #aaa; border-radius: 50%; font-size: 10px; margin-left: 6px; cursor: help; }
.fld { display: block; margin-bottom: 12px; }
.fld > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.fld input { width: 100%; padding: 15px 14px; border: 1px solid #cfcfd3; font: inherit; font-size: 14px; background: #fff; transition: border-color .3s, box-shadow .3s; }
.fld input:focus { outline: 0; border-color: var(--brown); box-shadow: 0 0 0 3px rgba(74,44,28,.12); }
.fld input:disabled { background: #f5f5f6; }
.err { display: block; color: #c8312b; font-size: 11.5px; min-height: 0; margin-top: 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two.num { grid-template-columns: 1fr 1fr; align-items: end; }
.chk { display: flex; gap: 10px; align-items: center; font-size: 12px; color: #55555a; margin: 4px 0 14px; cursor: pointer; }
.chk input { accent-color: var(--brown); width: 16px; height: 16px; }
.chk.sn { margin-bottom: 30px; }
.co-ship { display: grid; gap: 8px; }
.cp-card { display: flex; gap: 12px; align-items: center; border: 1px solid #cfcfd3; padding: 14px; margin-bottom: 12px; font-size: 13px; }
.cp-card div { flex: 1; }
.cp-card button { font-size: 12px; text-decoration: underline; }
.co-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.co-actions .back { font-size: 12.5px; text-decoration: underline; }
.co-actions .btn-brown { min-width: 230px; }

.co-summary { position: sticky; top: 24px; border-left: 1px solid #ececee; padding-left: 36px; }
.co-items { display: grid; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #ececee; margin-bottom: 14px; }
.co-items li { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; font-size: 12px; }
.co-items b { font-size: 12.5px; font-weight: 600; }
.co-summary .sum { padding: 0; }
.coupon-toggle { margin-top: 18px; font-size: 12px; text-decoration: underline; }
.coupon { display: flex; gap: 8px; margin-top: 12px; }
.coupon input { flex: 1; min-width: 0; padding: 11px; border: 1px solid #cfcfd3; font: inherit; font-size: 13px; text-transform: uppercase; }
.coupon button { padding: 0 16px; background: var(--ink); color: #fff; font-size: 12px; }
.coupon-msg { font-size: 12px; margin-top: 8px; min-height: 16px; }
.coupon-msg.bad { color: #c8312b; }

.co-recap { border: 1px solid #e3e3e6; margin-bottom: 8px; }
.co-recap > div { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; padding: 16px; font-size: 13px; line-height: 1.55; }
.co-recap > div + div { border-top: 1px solid #e3e3e6; }
.co-recap span { color: var(--muted); }
.co-recap a { text-decoration: underline; font-size: 12px; }
.pay-card { border: 1.5px solid var(--ink); padding: 20px; }
.pay-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pay-head b { font-size: 14px; flex: 1; }
.pay-head em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; background: var(--brown); color: #fff; padding: 5px 9px; }
.radio { width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 50%; position: relative; }
.radio.on::after { content: ''; position: absolute; inset: 3px; background: var(--ink); border-radius: 50%; }
.pay-card > p { font-size: 12.5px; line-height: 1.65; color: #55555a; margin-bottom: 18px; }
.alias-box { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #f5f2ef; padding: 16px 18px; border: 1px dashed #b8a79a; flex-wrap: wrap; }
.alias-box span { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.alias-box strong { font-size: 19px; letter-spacing: .02em; word-break: break-all; }
.copy { padding: 11px 16px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; transition: background .3s, transform .3s var(--ease); }
.copy:hover { transform: translateY(-2px); background: #000; }
.copy.ok { background: #1f7a3d; }
.copy.sm { padding: 5px 10px; font-size: 11px; margin-left: 8px; vertical-align: middle; }
.bank { display: grid; gap: 8px; margin-top: 18px; font-size: 13px; }
.bank > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.bank dt { color: var(--muted); }
.bank b { font-size: 16px; }

.thanks { max-width: 560px; }
.tick { width: 64px; height: 64px; border-radius: 50%; background: var(--brown); display: grid; place-items: center; margin-bottom: 22px; animation: pop .7s var(--ease) both; }
.tick svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s .35s var(--ease) forwards; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.thanks h1 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; margin-bottom: 12px; }
.next { display: grid; gap: 16px; margin: 28px 0 32px; }
.next li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; font-size: 14px; line-height: 1.55; align-items: start; }
.next b { width: 32px; height: 32px; border-radius: 50%; background: #f0eeec; display: grid; place-items: center; font-size: 13px; }
.next em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; }
.wa-btn { display: inline-block; margin-top: 10px; background: #25d366; color: #fff; padding: 11px 18px; font-size: 12.5px; font-weight: 600; transition: transform .35s var(--ease), box-shadow .35s; }
.wa-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(37,211,102,.8); }
.inline-link { display: inline-block; padding: 17px 34px; }

@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; gap: 30px; }
  .co-summary { position: static; border-left: 0; padding-left: 0; border-top: 1px solid #ececee; padding-top: 24px; order: -1; }
  .two { grid-template-columns: 1fr; }
  .two.num { grid-template-columns: 1fr 1fr; }
  .co-recap > div { grid-template-columns: 1fr auto; }
  .co-recap > div span { grid-column: 1 / -1; }
  .co-actions .btn-brown { width: 100%; }
}