/* =====================================================================
 * MasnoonHub Express — v7 CART stylesheet
 * Cart page (the [woocommerce_cart] shortcode → woocommerce/cart/cart.php).
 *
 * Ported VERBATIM from the v7 board "Cart & Checkout.html" (DESKTOP CART,
 * section 02 + its mobile @960 rules). The live cart template wraps the page
 * in <div class="mh-cart"> so every selector here is scoped under .mh-cart and
 * cannot leak. Per-vendor accent comes from a .cat-* class on each .dvg group
 * (maps --accent in tokens.css), exactly like the board.
 *
 * Tokens (var(--brand)/--navy/--accent/--charity/--green*/--trust*/--r-*) come
 * from tokens.css, loaded site-wide ahead of this file. No :root here.
 * ===================================================================== */

/* Astra renders the cart as a BOXED page with a LEFT SIDEBAR + a "Cart" page
   title. Neutralise all three so the bespoke .mh-cart owns the full width — the
   board has its own "Your cart" heading and no sidebar. (Astra's content-layout
   filter proved unreliable on this install, so this is done deterministically
   in CSS; we hide .entry-header — not just .entry-title — because Astra's
   .ast-single-post .entry-title rule out-specifies a plain .entry-title hide.) */
.woocommerce-cart #secondary{ display:none !important; width:0 !important; height:0 !important; overflow:hidden !important; }
.woocommerce-cart #primary{ width:100% !important; max-width:100% !important; padding-top:0 !important; }
/* display:block (not flex) so the (empty) sidebar can't steal width from #primary */
.woocommerce-cart .ast-container{ display:block !important; max-width:1240px !important; }
.woocommerce-cart .entry-header,
.woocommerce-cart .page-title,
.woocommerce-cart .ast-breadcrumbs,
.woocommerce-cart nav.woocommerce-breadcrumb{ display:none !important; }
/* ~5px gap between the header/banner and the cart card. Astra reserves ~56px+
   above the article via the content chain; zero it, then give the card a tiny
   top margin. High specificity (body + #content) so it beats Astra's defaults. */
.woocommerce-cart .site-content,
.woocommerce-cart #content,
.woocommerce-cart #content > .ast-container,
.woocommerce-cart #main,
.woocommerce-cart #primary{ padding-top:0 !important; margin-top:0 !important; }
body.woocommerce-cart #content .ast-article-single{
  margin:5px 0 0 !important; padding:0 !important; border:0 !important;
  border-radius:0 !important; background:#fff !important; box-shadow:none !important;
}
.woocommerce-cart #content .mh-cart{ font-family:var(--font-body); color:var(--ink); }
.mh-cart, .mh-cart *{ box-sizing:border-box; }
.mh-cart{ max-width:1200px; margin:0 auto; padding:clamp(10px,2.5vw,28px) clamp(16px,3vw,24px) 0; }
.mh-cart a{ text-decoration:none; }

/* ---- step bar (.dkcheck) ---- */
.mh-cart .dkcheck{ display:flex; align-items:center; gap:22px; padding:18px 4px 18px; border-bottom:1px solid var(--line-2); margin-bottom:18px; flex-wrap:wrap; }
.mh-cart .dkcheck h2{ font-family:var(--font-display); font-weight:700; font-size:24px; margin:0; letter-spacing:-.01em; color:var(--ink); }
.mh-cart .dkcheck h2 em{ font-style:italic; color:var(--brand); font-weight:600; }
.mh-cart .dsteps{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.mh-cart .dstep{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; }
.mh-cart .dstep .n{ width:22px; height:22px; border-radius:50%; background:var(--app-bg); color:var(--ink-3); display:grid; place-items:center; font-size:11px; font-weight:800; }
.mh-cart .dstep.on{ color:var(--ink); }
.mh-cart .dstep.on .n{ background:var(--brand); color:#fff; }
.mh-cart .dstep.done .n{ background:var(--green); color:#fff; }
.mh-cart .dstep.done{ color:var(--green-ink); }
.mh-cart .dbar{ width:34px; height:2px; background:var(--app-bg); border-radius:2px; }
.mh-cart .dbar.done{ background:var(--green); }
.mh-cart .dsecure{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--green-ink); background:var(--green-soft); border:1px solid color-mix(in srgb,var(--green) 25%,transparent); padding:6px 11px; border-radius:var(--r-pill); font-weight:700; }
.mh-cart .dsecure svg{ width:13px; height:13px; color:var(--green); }

/* ---- 2-col layout ---- */
/* fluid rail (300-340) instead of a hard 360 so the 2-col never cramps; the
   board's desktop is >=1024, so we stack to one column below that (see @1024). */
.mh-cart .dcart{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,340px); gap:22px; align-items:start; }

/* ---- cards ---- */
.mh-cart .dcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.mh-cart .dcard + .dcard{ margin-top:14px; }
.mh-cart .dcard .dch{ padding:13px 18px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:12px; }
.mh-cart .dcard .dch h3{ font-family:var(--font-display); font-weight:700; font-size:17px; margin:0; }
.mh-cart .dcard .dch .right{ margin-left:auto; font-size:12.5px; color:var(--ink-3); font-weight:600; }
.mh-cart .dcard .dbody{ padding:14px 18px; }
.mh-cart .dcard .dbody.flush{ padding:0; }

/* ---- vendor group ---- */
.mh-cart .dvg{ padding:14px 18px; border-top:1px solid var(--line-2); }
.mh-cart .dvg:first-child{ border-top:0; }
.mh-cart .dvhead{ display:flex; align-items:center; gap:11px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px dashed var(--line); }
.mh-cart .dvhead .av{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-ink)); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; flex:none; }
.mh-cart .dvhead .vn{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px; }
.mh-cart .dvhead .vn svg{ width:14px; height:14px; color:var(--trust); }
.mh-cart .dvhead .vm{ font-size:11.5px; color:var(--ink-3); }
.mh-cart .dvhead .info{ flex:1; min-width:0; line-height:1.25; }
.mh-cart .dvhead .visit{ font-size:12.5px; color:var(--trust); font-weight:700; }
.mh-cart .dvhead .visit:hover{ text-decoration:underline; }

/* ---- line item (FLUID flex — works at every width / font size / zoom) ----
   .dlitem = thumb + .lbody. .lbody stacks the title block over .lrow. .lrow is a
   WRAPPING flex row: price (left) and the stepper+remove (.lright, right). When
   space is tight the controls wrap to the next line instead of overlapping the
   price — no fixed-pixel grid, so it never breaks between breakpoints. */
.mh-cart .dlitem{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px solid var(--line-2); }
.mh-cart .dvg .dlitem:first-of-type{ border-top:0; }
.mh-cart .dlitem .lthumb{ flex:none; width:clamp(64px,13vw,88px); height:clamp(64px,13vw,88px); border-radius:var(--r-sm); overflow:hidden; background:linear-gradient(125deg,var(--accent-soft) 0 46%,color-mix(in srgb,var(--accent-soft) 38%,#fff) 46%); display:grid; place-items:center; padding:9px; position:relative; }
.mh-cart .dlitem .lthumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.mh-cart .dlitem .lthumb.ph{ background:repeating-linear-gradient(135deg,var(--accent-soft) 0 8px,#fff 8px 16px); }
.mh-cart .dlitem .lthumb.ph span{ font-family:var(--font-body); font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); background:rgba(255,255,255,.85); padding:2px 5px; border-radius:4px; font-weight:700; text-align:center; line-height:1.1; }
.mh-cart .dlitem .lbody{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.mh-cart .dlitem .dt{ min-width:0; }
.mh-cart .dlitem .ttn{ font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-decoration:none; }
.mh-cart .dlitem .ttn:hover{ color:var(--brand); }
.mh-cart .dlitem .ttn:lang(bn){ font-family:var(--font-body); }
.mh-cart .dlitem .tvar{ font-size:12px; color:var(--ink-3); margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mh-cart .dlitem .tvar .swatch{ width:11px; height:11px; border-radius:50%; border:1px solid rgba(0,0,0,.1); display:inline-block; }
.mh-cart .dlitem .tvar .dotty{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); display:inline-block; }
.mh-cart .dlitem .lcert{ display:inline-flex; align-items:center; gap:3px; background:var(--trust-soft); color:var(--trust); font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:2px 6px 2px 4px; border-radius:4px; text-transform:uppercase; align-self:flex-start; margin-top:5px; }
.mh-cart .dlitem .lcert svg{ width:10px; height:10px; }
/* price + controls row — WRAPS so they can never collide */
.mh-cart .dlitem .lrow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:5px; }
.mh-cart .dlitem .price{ margin-right:auto; font-weight:800; font-size:15px; color:var(--brand); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mh-cart .dlitem .price .woocommerce-Price-amount{ color:var(--brand); }
/* old price: GREY + strikethrough. !important beats woo.css's id-specific
   `#content .woocommerce-Price-amount{color:brand}`, which otherwise paints it orange. */
.mh-cart .dlitem .price .was{ font-size:11px; color:var(--ink-3) !important; text-decoration:line-through; font-weight:600; margin-left:7px; white-space:nowrap; }
.mh-cart .dlitem .price .was .woocommerce-Price-amount{ color:var(--ink-3) !important; }
.mh-cart .dlitem .price .mult{ font-size:11px; font-weight:600; color:var(--ink-3); margin-left:5px; }
.mh-cart .dlitem .lright{ display:flex; align-items:center; gap:8px; flex:none; }
.mh-cart .dlitem .qty{ display:flex; }
.mh-cart .dlitem .x{ width:30px; height:30px; flex:none; border:0; background:transparent; border-radius:8px; color:var(--ink-3); cursor:pointer; display:grid; place-items:center; text-decoration:none; }
.mh-cart .dlitem .x:hover{ background:var(--red-soft); color:var(--red); }
.mh-cart .dlitem .x svg{ width:16px; height:16px; }

/* mini quantity stepper — compact pill. The !important on .val overrides woo.css's
   generic `#content input[type=number]{width:100%;min-height:48px;padding;border}`,
   which (id specificity) would otherwise balloon the qty box and overlap the price. */
.mh-cart .mini-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-pill); overflow:hidden; height:34px; flex:none; width:auto; }
.mh-cart .mini-stepper button{ width:32px; height:32px; flex:none; border:0; background:#fff; font-size:16px; line-height:1; color:var(--ink); cursor:pointer; padding:0; }
.mh-cart .mini-stepper button:disabled{ color:var(--ink-3); cursor:not-allowed; }
.mh-cart .mini-stepper .val{
  width:38px !important; min-width:0 !important; flex:none !important;
  height:32px !important; min-height:0 !important;
  text-align:center; font-weight:800; font-variant-numeric:tabular-nums; font-size:13px !important;
  border:0 !important; border-radius:0 !important; background:transparent !important;
  padding:0 !important; box-shadow:none !important; -moz-appearance:textfield;
}
.mh-cart .mini-stepper .val:focus{ box-shadow:none !important; outline:0; }
.mh-cart .mini-stepper .val::-webkit-outer-spin-button,
.mh-cart .mini-stepper .val::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* vendor subtotal line */
.mh-cart .dvsub{ display:flex; justify-content:space-between; align-items:center; padding:10px 0 2px; gap:10px; flex-wrap:wrap; }
.mh-cart .dvsub .ship{ font-size:12px; color:var(--green-ink); display:flex; align-items:center; gap:6px; }
.mh-cart .dvsub .ship svg{ width:14px; height:14px; color:var(--green); }
.mh-cart .dvsub .ship.away{ color:#5b1730; }
.mh-cart .dvsub .ship.away svg{ color:#c04e72; }
.mh-cart .dvsub .vt{ font-size:13.5px; }
.mh-cart .dvsub .vt b{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; margin-left:6px; }

/* ---- voucher ---- */
.mh-cart .voucher{ display:flex; gap:8px; align-items:stretch; }
.mh-cart .voucher .vin{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; border:1.5px dashed color-mix(in srgb,var(--brand) 50%,var(--line)); background:linear-gradient(180deg,var(--brand-soft) 0%,#fff 60%); border-radius:var(--r-sm); padding:0 12px; }
.mh-cart .voucher .vin svg{ width:16px; height:16px; color:var(--brand); flex:none; }
.mh-cart .voucher .vin input{ flex:1; min-width:0; border:0; background:transparent; outline:none; font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ink); padding:11px 0; letter-spacing:.04em; }
.mh-cart .voucher .vin input::placeholder{ color:var(--ink-3); font-weight:500; letter-spacing:0; }
.mh-cart .voucher .vapply{ flex:none; padding:0 16px; border:0; border-radius:var(--r-sm); background:var(--navy); color:#fff; font-family:var(--font-body); font-weight:700; font-size:13px; cursor:pointer; }
.mh-cart .voucher .vapply:hover{ background:var(--navy-soft); }
.mh-cart .vapplied{ margin-top:9px; display:flex; align-items:center; gap:8px; padding:9px 11px; background:var(--green-soft); border:1px solid color-mix(in srgb,var(--green) 30%,transparent); border-radius:var(--r-sm); color:var(--green-ink); font-size:12.5px; font-weight:600; }
.mh-cart .vapplied svg{ width:15px; height:15px; color:var(--green); flex:none; }
.mh-cart .vapplied b{ font-weight:800; }
.mh-cart .vapplied .x{ margin-left:auto; background:transparent; border:0; color:var(--green-ink); cursor:pointer; padding:0; opacity:.6; text-decoration:none; }
.mh-cart .vapplied .x:hover{ opacity:1; }
.mh-cart .vapplied .x svg{ color:currentColor; width:14px; height:14px; }
.mh-cart .vsugs{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; }
.mh-cart .vsug{ flex:none; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:#fff; color:var(--ink-2); font-size:11.5px; font-weight:600; padding:5px 9px; border-radius:var(--r-pill); cursor:pointer; }
.mh-cart .vsug b{ color:var(--brand); font-weight:800; letter-spacing:.04em; }

/* ---- charity moment ---- */
.mh-cart .charity{ background:linear-gradient(135deg,var(--charity-soft) 0%, #fff8e8 60%); border:1px solid color-mix(in srgb,var(--charity) 28%,var(--line)); border-radius:var(--r-md); padding:13px 14px; display:flex; gap:12px; align-items:flex-start; position:relative; overflow:hidden; }
.mh-cart .charity::before{ content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; background:radial-gradient(circle,color-mix(in srgb,var(--charity) 18%,transparent),transparent 70%); pointer-events:none; }
.mh-cart .charity .cic{ width:38px; height:38px; flex:none; border-radius:50%; background:#fff; box-shadow:0 4px 10px -4px rgba(155,107,31,.4); display:grid; place-items:center; color:var(--charity); position:relative; z-index:1; }
.mh-cart .charity .cic svg{ width:20px; height:20px; }
.mh-cart .charity .cb{ flex:1; min-width:0; position:relative; z-index:1; }
.mh-cart .charity .ct{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:15.5px; color:var(--charity-ink); line-height:1.3; }
.mh-cart .charity .cd{ font-size:12.5px; color:var(--charity-ink); opacity:.85; margin-top:4px; line-height:1.45; }
.mh-cart .charity .cd b{ font-weight:800; color:var(--charity-ink); opacity:1; }

/* ---- summary rail ---- */
.mh-cart .drail{ position:sticky; top:14px; display:flex; flex-direction:column; gap:14px; }
.mh-cart .sumcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--shadow-sm); }
.mh-cart .sumcard h4{ font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 12px; }
.mh-cart .sumrow{ display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:5px 0; color:var(--ink-2); }
.mh-cart .sumrow b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.mh-cart .sumrow.disc b{ color:var(--green); }
.mh-cart .sumrow.free b{ color:var(--green); text-transform:uppercase; font-size:11.5px; letter-spacing:.04em; }
.mh-cart .sumtot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:9px; padding-top:11px; border-top:1px solid var(--line); }
.mh-cart .sumtot .lab{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); }
.mh-cart .sumtot .lab small{ display:block; font-family:var(--font-body); font-size:10.5px; color:var(--ink-3); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:2px; }
.mh-cart .sumtot .tot{ font-size:24px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.mh-cart .sumtot .tot b{ font-weight:600; font-size:.62em; }
.mh-cart .savings{ margin-top:10px; padding:8px 10px; background:var(--red-soft); border-radius:var(--r-xs); color:var(--red); font-size:11.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.mh-cart .savings svg{ width:13px; height:13px; flex:none; }
.mh-cart .divider{ height:1px; background:var(--line-2); margin:13px 0; }
.mh-cart .cbtn{ height:50px; border:0; border-radius:13px; padding:0 22px; font-family:var(--font-body); font-weight:800; font-size:14.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(180deg,var(--brand-bright),var(--brand)); color:#fff; box-shadow:0 6px 16px -6px rgba(224,83,15,.6); text-decoration:none; transition:filter .15s ease, transform .08s ease; }
.mh-cart .cbtn:hover{ filter:brightness(1.04); color:#fff; }
.mh-cart .cbtn:active{ transform:translateY(1px); }
.mh-cart .cbtn svg{ width:18px; height:18px; }
.mh-cart .cbtn.full{ width:100%; }
.mh-cart .paynote{ font-size:11.5px; color:var(--ink-3); margin-top:10px; display:flex; align-items:center; gap:6px; line-height:1.4; }
.mh-cart .paynote svg{ width:13px; height:13px; flex:none; color:var(--trust); }

/* ---- guarantee box ---- */
.mh-cart .guarbox{ display:flex; align-items:flex-start; gap:11px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); }
.mh-cart .guarbox .gic{ width:36px; height:36px; border-radius:10px; flex:none; background:var(--green-soft); display:grid; place-items:center; color:var(--green); }
.mh-cart .guarbox .gic svg{ width:19px; height:19px; }
.mh-cart .guarbox .gt{ font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.3; }
.mh-cart .guarbox .gs{ font-size:12px; color:var(--ink-2); margin-top:3px; line-height:1.45; }

/* ---- empty cart ---- */
.mh-cart .cart-empty-mh{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:46px 24px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.mh-cart .cart-empty-mh .orb{ width:92px; height:92px; border-radius:50%; background:radial-gradient(circle at 32% 30%,var(--brand-soft),#fff); border:1px solid var(--line); display:grid; place-items:center; color:var(--brand); margin-bottom:18px; }
.mh-cart .cart-empty-mh .orb svg{ width:40px; height:40px; }
.mh-cart .cart-empty-mh h3{ font-family:var(--font-display); font-weight:700; font-size:22px; margin:0 0 8px; }
.mh-cart .cart-empty-mh p{ font-size:14px; color:var(--ink-2); margin:0 0 18px; max-width:34ch; line-height:1.5; }

/* =====================================================================
 * 11 · EMPTY CART  (woocommerce/cart/cart-empty.php — scoped .mh-cart-empty)
 * Ported from board "Account & Orders.html" §11 (Empty cart, desktop). Left
 * column = illustration + departments + CTA + recently viewed; right rail =
 * charity / trust / buy-again / app. Fluid: 2-col rail collapses at 960.
 * ===================================================================== */
.woocommerce-cart #content .mh-cart-empty{ font-family:var(--font-body); color:var(--ink); }
.mh-cart-empty, .mh-cart-empty *{ box-sizing:border-box; }
.mh-cart-empty{ max-width:1200px; margin:0 auto; padding:clamp(14px,3vw,40px) clamp(16px,3vw,24px); }
.mh-cart-empty a{ text-decoration:none; }

.mh-cart-empty .ce-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:34px; align-items:start; }
.mh-cart-empty .ce-main{ display:flex; flex-direction:column; align-items:flex-start; }

.mh-cart-empty .ce-illu{ width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg,var(--brand-soft),#fff); display:grid; place-items:center; border:1px solid var(--line); margin-bottom:24px; }
.mh-cart-empty .ce-illu svg{ width:54px; height:54px; color:var(--brand); }
.mh-cart-empty .ce-h{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,4vw,34px); margin:0 0 8px; line-height:1.1; letter-spacing:-.015em; color:var(--ink); }
.mh-cart-empty .ce-sub{ font-size:16px; color:var(--ink-2); max-width:50ch; margin:0 0 22px; line-height:1.55; }

.mh-cart-empty .ce-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.mh-cart-empty .ce-chips a{ font-size:13px; font-weight:700; padding:8px 14px; border-radius:999px; background:var(--accent-soft,var(--brand-soft)); color:var(--accent-ink,var(--brand-ink)); transition:filter .15s ease; }
.mh-cart-empty .ce-chips a:hover{ filter:brightness(.97); }

.mh-cart-empty .ce-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.mh-cart-empty .cbtn{ height:50px; border:0; border-radius:13px; padding:0 22px; font-family:var(--font-body); font-weight:800; font-size:14.5px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(180deg,var(--brand-bright),var(--brand)); color:#fff; box-shadow:0 6px 16px -6px rgba(224,83,15,.6); transition:filter .15s ease, transform .08s ease; }
.mh-cart-empty .cbtn:hover{ filter:brightness(1.04); color:#fff; }
.mh-cart-empty .cbtn:active{ transform:translateY(1px); }
.mh-cart-empty .cbtn svg{ width:18px; height:18px; }
.mh-cart-empty .cbtn.ghost{ background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.mh-cart-empty .cbtn.ghost:hover{ background:var(--paper); color:var(--ink); }
.mh-cart-empty .ce-signin{ margin-top:18px; font-size:13px; color:var(--ink-3); }
.mh-cart-empty .ce-signin a{ color:var(--brand); font-weight:700; }

/* recently viewed */
.mh-cart-empty .ce-recent{ width:100%; }
.mh-cart-empty .ce-recent hr{ width:100%; border:0; border-top:1px solid var(--line); margin:36px 0 24px; }
.mh-cart-empty .ce-recent h2{ font-family:var(--font-display); font-weight:700; font-size:20px; margin:0 0 4px; letter-spacing:-.01em; }
.mh-cart-empty .ce-recent-sub{ font-size:12.5px; color:var(--ink-3); margin:0 0 16px; }
.mh-cart-empty .ce-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; width:100%; }
.mh-cart-empty .ce-tile{ color:var(--ink); }
.mh-cart-empty .ce-tile .th{ display:block; aspect-ratio:1/1; border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--accent-soft,#f6ead2); position:relative; overflow:hidden; }
.mh-cart-empty .ce-tile .th img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:12%; }
.mh-cart-empty .ce-tile .th .ph{ position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 6px,transparent 6px 12px); }
.mh-cart-empty .ce-tile:hover .th{ border-color:var(--accent,var(--brand)); }
.mh-cart-empty .ce-tile .nm{ display:block; font-size:12.5px; margin-top:6px; line-height:1.35; }
.mh-cart-empty .ce-tile .pr{ display:block; font-size:15px; font-weight:800; margin-top:3px; }
.mh-cart-empty .ce-tile .pr .woocommerce-Price-amount{ color:var(--ink) !important; }

/* ---- sidebar rail ---- */
.mh-cart-empty .ce-side{ position:sticky; top:18px; display:flex; flex-direction:column; gap:14px; }

.mh-cart-empty .ce-charity{ background:linear-gradient(135deg,#fdf2dc,#fff); border:1px solid #ecc88c; border-radius:var(--r-md); padding:18px; display:flex; align-items:flex-start; gap:11px; }
.mh-cart-empty .ce-charity .ic{ width:40px; height:40px; border-radius:11px; background:#a07210; color:#fff; display:grid; place-items:center; flex:none; }
.mh-cart-empty .ce-charity .ic svg{ width:20px; height:20px; }
.mh-cart-empty .ce-charity b{ display:block; font-size:14px; color:#7e5807; line-height:1.3; }
.mh-cart-empty .ce-charity span{ display:block; font-size:12.5px; color:#7e5807; margin-top:3px; line-height:1.45; }

.mh-cart-empty .ce-why{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; }
.mh-cart-empty .ce-why-h{ display:block; font-family:var(--font-display); font-weight:700; font-size:15px; margin-bottom:10px; }
.mh-cart-empty .ce-why ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--ink-2); }
.mh-cart-empty .ce-why li{ display:flex; gap:8px; align-items:flex-start; }
.mh-cart-empty .ce-why li svg{ width:16px; height:16px; color:var(--green); flex:none; margin-top:2px; }

.mh-cart-empty .ce-again{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px; }
.mh-cart-empty .ce-again-h{ display:block; font-family:var(--font-display); font-weight:700; font-size:15px; }
.mh-cart-empty .ce-again-s{ display:block; font-size:12px; color:var(--ink-3); margin:2px 0 11px; }
.mh-cart-empty .ce-again-row{ display:flex; align-items:center; gap:11px; padding:9px 0; color:var(--ink); border-bottom:1px solid var(--line-2); }
.mh-cart-empty .ce-again-row:last-child{ border-bottom:0; }
.mh-cart-empty .ce-again-row .th{ width:42px; height:42px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--brand-soft); position:relative; overflow:hidden; flex:none; }
.mh-cart-empty .ce-again-row .th img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8%; }
.mh-cart-empty .ce-again-row .th .ph{ position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 5px,transparent 5px 10px); }
.mh-cart-empty .ce-again-row .bd{ flex:1; min-width:0; }
.mh-cart-empty .ce-again-row .nm{ display:block; font-size:12.5px; font-weight:600; line-height:1.3; }
.mh-cart-empty .ce-again-row .pr{ display:block; font-size:12px; font-weight:800; margin-top:2px; }
.mh-cart-empty .ce-again-row .pr .woocommerce-Price-amount{ color:var(--ink) !important; }
.mh-cart-empty .ce-again-row .add{ font-size:11px; font-weight:800; color:var(--brand); flex:none; }
.mh-cart-empty .ce-again-row:hover .add{ text-decoration:underline; }

.mh-cart-empty .ce-app{ background:linear-gradient(135deg,var(--navy),var(--navy-deep)); border-radius:var(--r-md); padding:18px; color:#fff; }
.mh-cart-empty .ce-app .kick{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-bright); }
.mh-cart-empty .ce-app b{ display:block; font-family:var(--font-display); font-weight:700; font-size:16px; margin:6px 0 4px; line-height:1.25; }
.mh-cart-empty .ce-app .ce-app-s{ display:block; font-size:11.5px; color:#aeb6cb; margin-bottom:12px; }
.mh-cart-empty .ce-app .ce-app-soon{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 12px; }

/* =====================================================================
 * RESPONSIVE
 * Only the page-level 2-col -> 1-col switch needs a breakpoint now; the line
 * item is fluid flex (above), so it adapts continuously with no cliff.
 * ===================================================================== */
@media (max-width:1024px){
  .mh-cart .dcart{ grid-template-columns:1fr; }
  .mh-cart .drail{ position:static; }
}
@media (max-width:960px){
  .mh-cart-empty .ce-layout{ grid-template-columns:1fr; gap:24px; }
  .mh-cart-empty .ce-side{ position:static; }
  .mh-cart-empty .ce-grid{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
}
@media (max-width:560px){
  .mh-cart .dkcheck{ gap:12px; padding:14px 0; }
  .mh-cart .dkcheck h2{ font-size:21px; }
  .mh-cart .dsteps{ display:none; }
  .mh-cart .dcard .dbody{ padding:13px 14px; }
  .mh-cart .dvg{ padding:13px 14px; }
  .mh-cart-empty .ce-illu{ width:96px; height:96px; margin-bottom:18px; }
  .mh-cart-empty .ce-illu svg{ width:44px; height:44px; }
  .mh-cart-empty .ce-cta{ width:100%; }
  .mh-cart-empty .ce-cta .cbtn{ flex:1 1 auto; }
  .mh-cart-empty .ce-grid{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
}