/* ============================================================
   Hommix Checkout Drawer — shared across the whole site.
   Enqueued on: front page, shop, product pages, product taxonomy
   archives, and the cart page. See inc/cart-drawer.php.
   Relies on the CSS custom properties defined in style.css
   (--hmx-navy, --hmx-orange, etc.), which load on every page.
   ============================================================ */

/* === Drawer shell === */
.co-overlay{position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:200;opacity:0;pointer-events:none;transition:.3s}
.co-overlay.open{opacity:1;pointer-events:auto}
.co-drawer{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:100vw;background:#fff;z-index:201;transform:translateX(110%);transition:.38s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}
.co-drawer.open{transform:none}
.co-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1.5px solid #f0ece4;flex-shrink:0}
.co-head h3{font-family:var(--hmx-display);font-size:1.1rem;font-weight:800;color:var(--hmx-navy);margin:0}
.co-close{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--hmx-soft);padding:4px;line-height:1}

/* === Step indicator === */
.co-steps{display:flex;align-items:center;padding:14px 20px 12px;gap:0;border-bottom:1px solid #f0ece4;flex-shrink:0}
.co-step{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#b3a98f;font-weight:600;flex:1}
.co-step.active .co-step-num{background:var(--hmx-orange);color:#fff}
.co-step.done .co-step-num{background:#2E8B45;color:#fff}
.co-step.active,.co-step.done{color:var(--hmx-navy)}
.co-step-num{width:24px;height:24px;border-radius:50%;background:#e0dbd2;display:grid;place-items:center;font-size:.72rem;font-weight:800;flex-shrink:0;transition:.25s}
.co-step-line{flex:1;height:2px;background:#e0dbd2;margin:0 6px}
.co-step.done .co-step-line{background:#2E8B45}

/* === Panels === */
.co-panels{flex:1;overflow:hidden;position:relative}
.co-panel{position:absolute;inset:0;overflow-y:auto;padding:16px 20px;opacity:0;pointer-events:none;transition:.35s}
.co-panel.active{opacity:1;pointer-events:auto}
.co-panel.exit{opacity:0;pointer-events:none}
.co-loading{text-align:center;padding:40px 0;color:var(--hmx-soft);font-size:.88rem}

/* === Cart items === */
.co-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0ece4}
.co-item-img{width:52px;height:52px;object-fit:cover;border-radius:10px;flex-shrink:0}
.co-item-info{flex:1;min-width:0}
.co-item-name{font-weight:700;font-size:.85rem;color:var(--hmx-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-item-price{font-size:.8rem;color:var(--hmx-soft);margin-top:2px}
.co-qty{display:flex;align-items:center;border:1.5px solid #e0dbd2;border-radius:8px;overflow:hidden}
.co-qty button{width:28px;height:28px;background:#fff;border:none;font-size:1rem;font-weight:700;cursor:pointer;color:var(--hmx-navy)}
.co-qty button:hover{background:var(--hmx-cream,#FCEFC7)}
.co-qty button:disabled{opacity:.4;cursor:wait}
.co-qty span{width:28px;text-align:center;font-weight:800;font-size:.85rem}
.co-item-del{background:none;border:none;color:#c0bab2;font-size:.9rem;cursor:pointer;padding:4px}
.co-item-del:hover{color:#e34948}

/* === Coupon === */
.co-coupon{display:flex;gap:8px;margin:14px 0 6px}
.co-coupon input{flex:1;border:1.5px solid #e0dbd2;border-radius:10px;padding:9px 12px;font-size:.84rem;font-family:var(--hmx-body)}
.co-coupon input:focus{border-color:var(--hmx-orange);outline:none}
.co-coupon button{background:var(--hmx-navy);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-weight:700;font-size:.82rem;cursor:pointer;font-family:var(--hmx-body)}
.co-discount{font-size:.8rem;margin-bottom:8px;font-weight:600}

/* === Summary === */
.co-summary{background:var(--hmx-cream-soft,#FDF6E3);border-radius:12px;padding:14px 16px;margin-top:10px}
.co-sum-row{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;padding:4px 0}
.co-sum-row.total{border-top:1.5px solid #e0dbd2;margin-top:8px;padding-top:10px;font-weight:800;font-size:.95rem;color:var(--hmx-navy)}
.co-sum-row .free{color:#2E8B45;font-weight:800}

/* === Address form === */
.co-label{display:block;font-size:.8rem;font-weight:700;color:var(--hmx-navy);margin-bottom:6px;margin-top:14px}
.co-input{width:100%;border:1.5px solid #e0dbd2;border-radius:10px;padding:10px 14px;font-size:.88rem;font-family:var(--hmx-body);transition:.2s}
.co-input:focus{border-color:var(--hmx-orange);outline:none}
.co-input.err{border-color:#e34948}
.co-note{font-size:.74rem;color:var(--hmx-soft);margin-top:5px}
.addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.addr-full{grid-column:1/-1}
.co-geo-btn{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;background:#f0f3ff;border:1.5px solid var(--hmx-navy);border-radius:12px;font-family:var(--hmx-body);font-weight:700;font-size:.88rem;color:var(--hmx-navy);cursor:pointer;transition:.2s;margin:8px 0 12px;justify-content:center}
.co-geo-btn:hover{background:var(--hmx-navy);color:#fff}
.co-geo-btn:disabled{opacity:.5;cursor:wait}
.co-auto-hint{font-size:.76rem;color:#1f8c4d;font-weight:600;display:none;margin-top:-4px;margin-bottom:8px;padding:5px 10px;background:#e6f7ec;border-radius:8px}
.co-pinbox{position:relative}
.co-pin-fill{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.72rem;color:var(--hmx-orange);font-weight:700;cursor:pointer;white-space:nowrap}

/* === Payment methods (rendered dynamically from real WC gateways) === */
.pay-methods{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.pay-method{display:flex;align-items:center;gap:12px;border:2px solid #e0dbd2;border-radius:12px;padding:14px 16px;cursor:pointer;transition:.2s}
.pay-method:has(input:checked),.pay-method.sel{border-color:var(--hmx-orange);background:var(--hmx-cream-soft,#FDF6E3)}
.pay-method input{accent-color:var(--hmx-orange);width:16px;height:16px;flex-shrink:0}
.pay-method-icon{font-size:1.3rem}
.pay-method-info strong{display:block;font-size:.88rem;color:var(--hmx-navy);font-weight:800}
.pay-method-info span{font-size:.74rem;color:var(--hmx-soft)}
.pay-cod-badge{background:#fff3e0;color:#e65100;font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:20px;margin-left:auto}
.pm-error{background:#fdecec;color:#c0392b;border-radius:10px;padding:10px 14px;font-size:.82rem;margin-top:10px;line-height:1.5}

/* === Footer / CTA === */
.co-foot{padding:14px 20px;border-top:1.5px solid #f0ece4;display:flex;align-items:center;gap:12px;flex-shrink:0;background:#fff}
.co-foot-info{flex:1}
.co-foot-total{font-family:var(--hmx-display);font-size:1.25rem;font-weight:900;color:var(--hmx-navy);line-height:1}
.co-foot-label{font-size:.72rem;color:var(--hmx-soft);margin-top:1px}
.co-foot .hmx-btn{white-space:nowrap}

/* === Success step === */
#hmx-coP3{text-align:center;padding:40px 24px}
.co-success-icon{font-size:3.5rem;margin-bottom:16px}

/* === Toast === */
#hmx-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--hmx-navy);color:#fff;padding:11px 22px;border-radius:30px;font-size:.86rem;font-weight:700;pointer-events:none;opacity:0;transition:.3s;z-index:400;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
#hmx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* === Header cart icon badge (in case the base stylesheet's version is missing on a given template) === */
.hommix-cart-link{cursor:pointer}
a.add_to_cart_button.loading,.single_add_to_cart_button.loading{opacity:.6;pointer-events:none}

/* === Responsive === */
@media(max-width:680px){
  .co-drawer{left:0;right:0;width:auto;max-width:none;border-radius:18px 18px 0 0;top:auto;height:88vh;max-height:88vh;overflow:hidden}
  .addr-grid{grid-template-columns:1fr}
  .co-foot{flex-wrap:wrap}
  .co-foot .hmx-btn{width:100%;justify-content:center}
  .co-panel{padding:14px 16px}
  .co-head{padding:16px 16px 12px}
  .co-steps{padding:12px 16px 10px}
}
@media(max-width:360px){
  .co-item-img{width:44px;height:44px}
  .co-qty button{width:24px;height:24px}
}