/* Qlimatix - Winkelwagen (WooCommerce cart) page styles.
   Self-contained (like adv.css / pdp.css / home.css / overons.css): own :root
   tokens + base reset + .btn-pill, so the page ships only cart.css + chrome +
   Onest + images. The .cart* / .citem* / .summary component + responsive rules
   are lifted from the approved prototype (Qlimatix Claude Design /
   "Winkelwagen.html") and wired onto the live WooCommerce cart form.

   Loaded only on the cart page (see inc/cart.php). */

/* ===== Self-hosted Onest (shared; woff2 in assets/fonts/) ===== */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:local('Onest'),url('fonts/Onest-Regular.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:local('Onest Medium'),url('fonts/Onest-Medium.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:local('Onest SemiBold'),url('fonts/Onest-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:local('Onest Bold'),url('fonts/Onest-Bold.woff2') format('woff2');}

/* ===== Design tokens (mirrors home.css :root) ===== */
:root {
  --navy: #01273f;
  --orange: #e77935;
  --orange-hover: #d96b27;
  --orange-soft: #fdf1e8;
  --text: #0e2a3f;
  --muted: #5e6f7c;
  --muted-2: #6f7e8c;
  --border: #e7eaee;
  --border-soft: #eef1f4;
  --kgold: #ffb814;
}

/* ===== Base reset (each page-type CSS carries its own; chrome is scoped) ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Onest", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.cartpage img { display: block; max-width: 100%; }
/* :where() keeps this reset at zero specificity so component colours
   (.checkout-btn, .xcard__add, .cartpage__back …) win without !important. */
:where(.cartpage) a { color: inherit; text-decoration: none; }
.cartpage button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; }
.cartpage h1, .cartpage h2, .cartpage h3, .cartpage h4 { margin: 0; color: var(--text); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }

/* ============ WINKELWAGEN - scoped ============ */
/* The cart templates render a `.cartpage` section straight into <main class="page">
   (page.php outputs WC shortcode content directly into .page). .cartpage is the
   full-bleed grey band; the boxed `.wrap` (layout.css) lives inside it. */
.cartpage { background: #f6f7f9; width: 100%; padding: 0 0 80px; }

/* Step indicator (kept for parity; not rendered by default) */
.cksteps { display: flex; align-items: center; gap: 14px; padding: 30px 0 6px; }
.ckstep { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted-2); font-weight: 500; }
.ckstep__num {
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: #e4e8ec; color: #8a98a4;
}
.ckstep--active { color: var(--text); }
.ckstep--active .ckstep__num { background: var(--navy); color: #fff; }
.ckstep--done .ckstep__num { background: #1f8a5b; color: #fff; }
.ckstep__sep { width: 26px; height: 1.5px; background: #d8dde2; }

.cartpage__head { display: flex; align-items: baseline; justify-content: space-between; padding: 34px 0 34px; }
.cartpage__title { font-size: 34px; letter-spacing: -0.025em; }
.cartpage__count { font-size: 14px; color: var(--muted); }
.cartpage__back { font-size: 14px; color: var(--navy); font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.cartpage__back svg { width: 16px; height: 16px; }

/* Free shipping / gift progress */
.shipbar {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: 16px; padding: 16px 22px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 18px;
}
.shipbar__icon {
  width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0;
  background: #e6f4ec; color: #1f8a5b; display: grid; place-items: center;
}
.shipbar__body { flex: 1; }
.shipbar__text { font-size: 14px; color: var(--text); font-weight: 500; margin-bottom: 8px; }
.shipbar__text b { color: #1f8a5b; }
.shipbar__track { height: 7px; border-radius: 999px; background: #eef1f4; overflow: hidden; }
.shipbar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2faa6e, #1f8a5b); transition: width .4s ease; }

/* Layout */
.cartgrid { display: grid; grid-template-columns: 1fr 388px; gap: 26px; align-items: start; }

/* Cart items card */
.citems { background: #fff; border: 1px solid var(--border-soft); border-radius: 18px; overflow: hidden; margin: 0; }
.citems__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border-soft);
}
.citems__head h2 { font-size: 16px; font-weight: 600; }

/* Busy state while an ajax qty/remove update is in flight. */
.cartgrid.is-updating { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; }
.citem--removing { opacity: 0.4; }

.citem {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 20px;
  padding: 22px 24px; border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.citem:last-child { border-bottom: none; }
.citem__media {
  width: 96px; height: 104px; border-radius: 12px; background: #fff;
  display: grid; place-items: center; overflow: hidden; padding: 8px;
}
/* width/height:auto neutralises the WC <img width/height> attributes so the
   image scales proportionally inside the box (else height attr overflows). */
.citem__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.citem__main { min-width: 0; }
.citem__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--orange); background: var(--orange-soft);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}
.citem__name { font-size: 16px; font-weight: 600; color: var(--navy); line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 6px; }
.citem__name a { color: inherit; }
.citem__meta { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.citem__stock { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #1f8a5b; font-weight: 500; margin-bottom: 4px; }
.citem__stock-dot { width: 7px; height: 7px; border-radius: 999px; background: #1f8a5b; }
.citem__stock--low { color: #d97706; }
.citem__stock--low .citem__stock-dot { background: #d97706; }
.citem__stock--out { color: #d14343; }
.citem__stock--out .citem__stock-dot { background: #d14343; }
.citem__delivery { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.citem__delivery svg { width: 15px; height: 15px; color: var(--navy); }

.citem__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 16px; min-width: 132px; }
.citem__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.citem__prices { text-align: right; }
.citem__old { font-size: 13px; color: #9aa6b0; text-decoration: line-through; display: block; }
.citem__price { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; }
.citem__unit { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; }

/* Qty stepper (wraps a real WC qty input) */
.qty { display: inline-flex; align-items: center; height: 38px; border: 1.5px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.qty button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--navy); transition: background .12s; }
.qty button:hover { background: #f5f7fa; }
.qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.qty button svg { width: 13px; height: 13px; }
.qty__input {
  width: 38px; min-width: 38px; text-align: center; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; border: none; outline: none; background: transparent;
  color: var(--text); font-family: inherit; padding: 0; -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.citem__remove {
  font-size: 12.5px; color: #98a2ac; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; border: 1px solid transparent;
  transition: color .12s, background .12s, border-color .12s;
}
.citem__remove:hover { color: #e94e3e; background: #fdecea; }
.citem__remove svg { width: 14px; height: 14px; }

/* Hidden native "update cart" button - cart.js submits on stepper change */
.citems__update { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cross-sell */
.xsell { background: #fff; border: 1px solid var(--border-soft); border-radius: 18px; margin-top: 22px; overflow: hidden; }
.xsell__head { padding: 18px 24px 6px; }
.xsell__title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.xsell__title-ic { width: 24px; height: 24px; border-radius: 999px; background: var(--orange); color: #fff; display: grid; place-items: center; }
.xsell__title-ic svg { width: 13px; height: 13px; }
.xsell__sub { font-size: 13px; color: var(--muted); margin: 4px 0 0 33px; }
.xsell__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 16px 12px 18px; }
.xcard { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--border-soft); }
.xcard:last-child { border-right: none; }
.xcard__media { aspect-ratio: 1/1; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 14px; position: relative; }
.xcard__media img { max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain; }
.xcard__save { position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--orange); padding: 3px 7px; border-radius: 999px; }
.xcard__name { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.xcard__name a { color: inherit; }
.xcard__match { font-size: 11.5px; color: #1f8a5b; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.xcard__match-dot { width: 6px; height: 6px; border-radius: 999px; background: #1f8a5b; }
.xcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 8px; }
.xcard__price { font-size: 15px; font-weight: 700; color: var(--navy); }
.xcard__price s { font-size: 12px; color: #9aa6b0; font-weight: 400; margin-right: 5px; }
.xcard__add {
  height: 34px; padding: 0 14px 0 11px; border-radius: 999px;
  border: 1.5px solid var(--orange); background: #fff; color: var(--orange);
  font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s, color .12s; cursor: pointer; white-space: nowrap;
}
.xcard__add:hover, .xcard__add.added { background: var(--orange); color: #fff; }
.xcard__add svg { width: 13px; height: 13px; }
.xcard__add .added-to-cart { display: none; } /* hide WC "View cart" link injected after add */

/* ===== Summary sidebar ===== */
.summary { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.scard { background: #fff; border: 1px solid var(--border-soft); border-radius: 18px; padding: 22px 22px; }

/* Navy gradient summary card (same mood as checkout) */
.scard--navy {
  background:
    radial-gradient(125% 120% at 100% 0%, #16456b 0%, rgba(22,69,107,0) 55%),
    var(--navy);
  border-color: var(--navy);
  color: #d7e3ee;
}
.scard--navy .scard__title { color: #fff; }
.scard--navy .sumrow { color: rgba(255,255,255,0.72); }
.scard--navy .sumrow b { color: #fff; }
.scard--navy .sumrow--free b,
.scard--navy .sumrow--save,
.scard--navy .sumrow--save b { color: #46d39a; }
.scard--navy .sumdiv { background: rgba(255,255,255,0.16); }
.scard--navy .sumtotal__label { color: #fff; }
.scard--navy .sumtotal__val { color: #fff; }
.scard--navy .sumtotal__btw { color: rgba(255,255,255,0.6); }
.scard--navy .checkout-note { color: rgba(255,255,255,0.62); }
.scard--navy .discount summary { color: #fff; }
.scard--navy .discount__form input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #fff; }
.scard--navy .discount__form input::placeholder { color: rgba(255,255,255,0.45); }
.scard--navy .discount__form input:focus { border-color: #fff; }
.scard--navy .discount__form button { background: var(--orange); }
.scard--navy .discount__form button:hover { background: var(--orange-hover); }
.scard--navy .discount__msg { color: #46d39a; }
.scard--navy .discount__remove { color: rgba(255,255,255,0.6); }

.scard__title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.sumrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); margin-bottom: 11px; gap: 12px; }
.sumrow b { color: var(--text); font-weight: 500; }
.sumrow--free b { color: #1f8a5b; font-weight: 600; }
.sumrow--save { color: #1f8a5b; }
.sumrow--save b { color: #1f8a5b; }
.sumrow__label { display: inline-flex; align-items: center; gap: 8px; }
.discount__remove { font-size: 11px; color: var(--muted); text-decoration: underline; }
.sumdiv { height: 1px; background: var(--border-soft); margin: 16px 0; }
.sumtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 12px; }
.sumtotal__label { font-size: 17px; font-weight: 600; }
.sumtotal__val { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.sumtotal__val .amount { font-size: inherit; font-weight: inherit; }
.sumtotal__btw { font-size: 12px; color: var(--muted); text-align: right; margin-bottom: 18px; }

.checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 58px; background: var(--orange); color: #fff;
  border-radius: 999px; font-size: 16px; font-weight: 600;
  box-shadow: 0 12px 24px -10px rgba(231,121,53,0.6); transition: background .15s, transform .15s;
}
.checkout-btn:hover { background: var(--orange-hover); transform: translateY(-1px); color: #fff; }
.checkout-btn svg { width: 18px; height: 18px; }
.checkout-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; }
.checkout-note svg { width: 13px; height: 13px; }
.checkout-note .checkout-note__shield { color: #46d39a; }

/* Discount / coupon */
.discount summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--navy); font-weight: 500; }
.discount summary::-webkit-details-marker { display: none; }
.discount summary svg { width: 16px; height: 16px; transition: transform .2s; }
.discount[open] summary svg.chev { transform: rotate(180deg); }
.discount__form { display: flex; gap: 8px; margin-top: 12px; }
.discount__form input {
  flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 0 14px; font: inherit; font-size: 14px; color: var(--text); outline: none;
}
.discount__form input:focus { border-color: var(--navy); }
.discount__form button { height: 44px; padding: 0 18px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 13.5px; font-weight: 600; }
.discount__msg { font-size: 12.5px; color: #1f8a5b; margin-top: 9px; display: none; align-items: center; gap: 6px; }
.discount__msg.is-on { display: inline-flex; }
.discount__msg svg { width: 13px; height: 13px; }

/* Reassurance USPs */
.reassure { display: flex; flex-direction: column; gap: 14px; }
.reassure__item { display: flex; gap: 13px; align-items: flex-start; }
.reassure__ic { width: 34px; height: 34px; border-radius: 999px; background: #eef3f7; color: var(--navy); display: grid; place-items: center; flex-shrink: 0; }
.reassure__ic svg { width: 18px; height: 18px; }
.reassure__h { font-size: 13.5px; font-weight: 600; color: var(--text); }
.reassure__t { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 1px; }

/* Kiyoh review score card */
.revcard { display: flex; align-items: center; gap: 14px; }
.revcard__stars { display: flex; gap: 2px; color: var(--kgold); flex-shrink: 0; }
.revcard__stars svg { display: block; }
.revcard__meta { line-height: 1.15; }
.revcard__score { font-size: 13px; color: var(--muted); }
.revcard__score b { font-size: 18px; color: var(--text); font-weight: 700; }
.revcard__count { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.revcard__logo { margin-left: auto; color: var(--navy); display: flex; align-items: center; padding-left: 14px; border-left: 1px solid var(--border-soft); }
.revcard__logo svg { display: block; height: 26px; width: auto; }

/* Trust footer card */
.trustcard { text-align: center; }
.trustcard__pays { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-bottom: 0; }
.paylogo { height: 22px; width: auto; display: block; border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; background: #fff; box-sizing: content-box; }
.paylogo--ideal { padding: 0; border: none; background: none; height: 29px; }
.paylogo--klarna { padding: 0; border: none; height: 27px; }

/* Empty cart state */
.cart-empty { background: #fff; border: 1px solid var(--border-soft); border-radius: 18px; padding: 60px 24px; text-align: center; max-width: 620px; margin: 0 auto; }
.cart-empty__icon { width: 76px; height: 76px; border-radius: 999px; background: #eef3f7; color: var(--navy); display: grid; place-items: center; margin: 0 auto 22px; }
.cart-empty__icon svg { width: 38px; height: 38px; }
.cart-empty__title { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 8px; }
.cart-empty__text { font-size: 15px; color: var(--muted); margin: 0 0 26px; }
.cart-empty__cta {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px;
  background: var(--orange); color: #fff; border-radius: 999px; font-size: 15px; font-weight: 600;
  box-shadow: 0 12px 24px -10px rgba(231,121,53,0.6); transition: background .15s, transform .15s;
}
.cart-empty__cta:hover { background: var(--orange-hover); transform: translateY(-1px); }
.cart-empty__cta svg { width: 17px; height: 17px; }

/* WooCommerce notices (coupon feedback, etc.) - light themed spacing */
.cartpage .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 18px; }
/* Same icon-overlap fix as the checkout (see assets/checkout.css): WooCommerce's
   ::before glyph sits at left:1.5em and this padding left no room for it, so it
   covered the first word of the message. Room + inline SVG, cart look kept. */
.cartpage .woocommerce-message,
.cartpage .woocommerce-error,
.cartpage .woocommerce-info {
  position: relative;
  background: #fff; border: 1px solid var(--border-soft); border-left: 3px solid var(--navy);
  border-radius: 12px; padding: 14px 18px 14px 46px; font-size: 14px; line-height: 1.5; color: var(--text); list-style: none; margin: 0 0 12px;
}
.cartpage .woocommerce-message { border-left-color: #1f8a5b; }
.cartpage .woocommerce-error { border-left-color: #e94e3e; }
.cartpage .woocommerce-message li,
.cartpage .woocommerce-error li,
.cartpage .woocommerce-info li { margin: 0; padding: 0; list-style: none; }
.cartpage .woocommerce-message::before,
.cartpage .woocommerce-error::before,
.cartpage .woocommerce-info::before {
  content: ""; position: absolute; left: 18px; top: 15px; width: 16px; height: 16px; margin: 0; padding: 0;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.cartpage .woocommerce-error::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 18 18' fill='none'><circle cx='9' cy='9' r='8' stroke='%239a311c' stroke-width='1.6'/><path d='M9 5v5' stroke='%239a311c' stroke-width='1.8' stroke-linecap='round'/><circle cx='9' cy='12.6' r='1' fill='%239a311c'/></svg>"); }
.cartpage .woocommerce-message::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 18 18' fill='none'><circle cx='9' cy='9' r='8' stroke='%2315692f' stroke-width='1.6'/><path d='M5.5 9.2l2.4 2.3L12.5 6.5' stroke='%2315692f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.cartpage .woocommerce-info::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 18 18' fill='none'><circle cx='9' cy='9' r='8' stroke='%23125681' stroke-width='1.6'/><path d='M9 8.2v4.4' stroke='%23125681' stroke-width='1.8' stroke-linecap='round'/><circle cx='9' cy='5.4' r='1' fill='%23125681'/></svg>"); }
.cartpage .woocommerce-error:focus,
.cartpage .woocommerce-message:focus,
.cartpage .woocommerce-info:focus { outline: none; }
.cartpage .woocommerce-message a, .cartpage .woocommerce-error a, .cartpage .woocommerce-info a { color: var(--navy); font-weight: 600; }

/* Hide the help + newsletter footer blocks on the cart (focus on conversion). */
#lofoot-root .lof-help-wrap,
#lofoot-root .lof-news-band { display: none !important; }

/* ============ RESPONSIVE (tablet + mobile) ============ */
@media (max-width: 980px){
  /* stack summary under the items */
  .cartgrid { grid-template-columns: 1fr; gap: 22px; }
  .summary { position: static; }
}

@media (max-width: 760px){
  .cartpage { padding-bottom: 56px; }
  .cartpage__head { padding: 24px 0 18px; }
  .cartpage__title { font-size: 28px; }
}

@media (max-width: 560px){
  .cartpage .wrap { padding-left: 16px; padding-right: 16px; }

  /* cart item: image + info on top, price/qty row spanning below */
  .citem { grid-template-columns: 76px 1fr; grid-template-areas: "media main" "right right"; gap: 14px; padding: 20px 16px; }
  .citem__media { grid-area: media; width: 76px; height: 84px; }
  .citem__main { grid-area: main; }
  .citem__right { grid-area: right; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; gap: 14px; }
  .citem__prices { text-align: right; order: 2; }
  .citem__actions { flex-direction: row; align-items: center; gap: 12px; order: 1; }

  /* tidy the page header: back-link on top, then title, then count */
  .cartpage__head { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 0 18px; }
  .cartpage__back { order: -1; margin-bottom: 4px; }

  /* cross-sell: horizontal mini-cards, one per row */
  .xsell__grid { grid-template-columns: 1fr; padding: 8px 16px 14px; gap: 0; }
  .xcard { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 9px; border-right: none; border-bottom: 1px solid var(--border-soft); padding: 16px 2px; }
  .xcard:last-child { border-bottom: none; }
  .xcard__media { order: 1; width: 76px; height: 76px; aspect-ratio: auto; padding: 8px; }
  .xcard__save { top: 4px; left: 4px; font-size: 8.5px; padding: 2px 5px; }
  .xcard__name { order: 2; flex: 1; min-width: 0; }
  .xcard__match { order: 3; flex-basis: 100%; }
  .xcard__foot { order: 4; flex-basis: 100%; }

  .sumtotal__val { font-size: 24px; }
  .scard { padding: 20px 18px; }
}

@media (max-width: 400px){
  .citem { grid-template-columns: 64px 1fr; }
  .citem__media { width: 64px; height: 72px; }
  .citem__actions .citem__remove { padding: 6px 4px; }
}

/* Apple Pay is a checkout-only feature here. Mollie's Apple Pay Direct module
   (enabled so its AJAX endpoints power our checkout express button) renders its
   own Apple Pay button on the cart page; the PHP filter
   `mollie_wc_gateway_applepay_render_hook_cart` suppresses it server-side, and
   this rule is the backstop in case a Mollie update ignores that filter. Scoped
   to Mollie's cart container id, so it can never touch the checkout button
   (#qx-applepay-btn). */
#mollie-applepayDirect-button { display: none !important; }

/* Trusted Shops-widget onderaan de mandkolom. */
.cart-tswidget { margin: 14px 0 0; }

/* Trusted Shops Checkout Service-badge, 1-op-1 geport uit hun eigen index.css
   (checkout-service-widget 1.1.0). Hun versie leeft in een shadow root, dus alle
   `:host`- en `.checkout-widget`-selectors zijn hier `.qx-tsb`-selectors geworden en
   de twee url()'s wijzen naar onze kopie van hun svg's. Verder ongewijzigd, inclusief
   de container queries op 19em en 26em die de indeling van gestapeld naar drie
   kolommen laten kantelen. Niets hier zelf verzonnen: wijk je ervan af, dan is het
   geen kopie meer van wat de Franse winkel toont. */
.qx-tsb {
  --qx-tsb-font: "Helvetica Neue", arial, sans-serif;
  --qx-tsb-bg: #ffffff;
  --qx-tsb-bg-footer: #ffdc0f;
  --qx-tsb-border: #e5e5e5;
  --qx-tsb-font-main: #000000;
  --qx-tsb-font-light: #4d4d4d;
  --qx-tsb-logo: #000000;
}
.qx-tsb__widget { position: relative; font-size: .875em; font-family: var(--qx-tsb-font); }
.qx-tsb__wrapper { container-name: qxtsb; container-type: inline-size; border: 1px solid var(--qx-tsb-border); border-radius: 8px; background-color: var(--qx-tsb-bg); overflow: hidden; }
.qx-tsb__content { text-decoration: none; display: grid; grid-template-areas: "mark" "desc" "footer"; grid-template-rows: 5.42em auto 3.28em; }
.qx-tsb__trustmark { grid-area: mark; justify-self: center; align-self: center; height: 3.42em; width: 3.42em; background-image: url("img/trustedshops/trustmark.svg"); background-size: contain; background-repeat: no-repeat; background-position: 0; }
.qx-tsb__description { grid-area: desc; align-self: center; line-height: 1.5em; text-align: center; margin: 0 .5em 1em .5em; }
.qx-tsb__h2, .qx-tsb__p { display: block; font-size: 1em; margin: 0; }
.qx-tsb__h2 { color: var(--qx-tsb-font-main); font-weight: 700; }
.qx-tsb__p { color: var(--qx-tsb-font-light); font-weight: 400; }
.qx-tsb__footer { grid-area: footer; background-color: var(--qx-tsb-bg-footer); display: flex; justify-content: center; align-items: center; }
.qx-tsb__logo { height: 2.28em; width: 5.5em; background-color: var(--qx-tsb-logo);
  mask-image: url("img/trustedshops/logo.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: 0;
  -webkit-mask-image: url("img/trustedshops/logo.svg"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0; }
@container qxtsb (min-width: 19em) {
  .qx-tsb__content { grid-template-areas: "mark desc" "footer footer"; grid-template-rows: auto 3.28em; grid-template-columns: 5.42em auto; }
  .qx-tsb__trustmark { padding: 1em 0; }
  .qx-tsb__description { margin: .5em .5em .5em 0; text-align: left; }
}
@container qxtsb (min-width: 26em) {
  .qx-tsb__content { grid-template-areas: "mark desc footer"; grid-template-rows: auto; grid-template-columns: 5.42em auto 7.5em; }
  .qx-tsb__footer .qx-tsb__logo { margin: 0; margin-left: .375em; }
}