/*
 * shop.css — the purchase path: cart, checkout, confirmation.
 *
 * inc/enqueue.php has looked for this file since the theme was scaffolded and
 * skipped it because it did not exist. It loads after components.css and only
 * when WooCommerce is active, so everything here can assume the tokens and the
 * component layer are already in place.
 *
 * Scope: cart, checkout and order-received only. Anything reusable belongs in
 * components.css; anything about the catalogue is already there.
 *
 * Two rules the whole file follows:
 *
 *   - WooCommerce's own class names are styled directly rather than being
 *     replaced. Its cart and checkout scripts find elements by those names, so
 *     .shop_table, .form-row, .input-text and .quantity stay and are dressed.
 *
 *   - Tables collapse to stacked rows below 860px using the data-title
 *     attributes WooCommerce already emits (and which the overrides in
 *     woocommerce/ keep). A six-column trade cart is otherwise unusable on the
 *     phone a salon owner actually reorders from.
 */

/* ---------- Page shell ---------- */

/*
 * The shop measure. .faab-wrap is already capped at --faab-wide; this exists so
 * page.php can name the intent rather than relying on the absence of --narrow.
 */
.faab-wrap--shop { max-width: var(--faab-wide); }

.faab-page__head { margin-bottom: var(--faab-space-5); }

.faab-page__title {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-3xl);
  line-height: var(--faab-lh-tight);
  margin: 0;
}

/* ---------- WooCommerce notices ---------- */

/*
 * Woo's defaults are a grey bar with a coloured left edge. On a warm ground
 * that reads as a rendering fault, so these are restated in the palette. The
 * error variant carries the stock refusals from Faab_Stock and the VAT
 * validation from Faab_VAT, which are the two things on this path a customer
 * most needs to actually notice.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  list-style: none;
  margin: 0 0 var(--faab-space-4);
  padding: var(--faab-space-3) var(--faab-space-4);
  border: 1px solid var(--faab-line);
  border-left-width: 3px;
  border-radius: var(--faab-radius-sm);
  background: var(--faab-surface);
  font-size: var(--faab-fs-sm);
  line-height: var(--faab-lh-body);
}

/*
 * Drop Woo's leading icon glyphs.
 *
 * They are codepoints in WooCommerce's own icon font, which this theme does not
 * load: the checkout coupon notice renders a tofu box before "Heb je een
 * kortingscode?". Restoring the font for three glyphs is not worth a webfont
 * request on a shop that already self-hosts two faces for EU data-protection
 * reasons (inc/enqueue.php), and the notices read fine without them.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before { content: none; }

.woocommerce-message { border-left-color: var(--faab-clay); background: var(--faab-shell); }
.woocommerce-info    { border-left-color: var(--faab-warmgrey); }
.woocommerce-error   { border-left-color: #B3261E; background: color-mix(in srgb, #B3261E 5%, var(--faab-surface)); }

.woocommerce-error li + li { margin-top: var(--faab-space-1); }

.woocommerce-message a:not(.button) { color: var(--faab-accent); }

/*
 * Woo's own buttons, dressed to match .faab-btn.
 *
 * These are the ones the theme never renders and cannot restyle per template:
 * "Bekijk winkelwagen" inside an add-to-cart notice, and "Terug naar
 * winkelwagen" on the cart-errors page a blocked checkout redirects to. Left
 * alone they are grey system buttons sitting in the middle of the palette,
 * which reads as an unfinished page exactly where something has gone wrong.
 */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--faab-space-4);
  border: 0;
  border-radius: var(--faab-radius-pill);
  background: var(--faab-espresso);
  color: var(--faab-text-invert);
  font: inherit;
  font-size: var(--faab-fs-sm);
  text-decoration: none;
  cursor: pointer;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--faab-brown); color: var(--faab-text-invert); }

/* ---------- Shared table shell ---------- */

.faab-cart__table,
.faab-totals__table,
.faab-review {
  width: 100%;
  border-collapse: collapse;
  background: var(--faab-surface);
  border: 1px solid var(--faab-line-soft);
  border-radius: var(--faab-radius);
  overflow: hidden;
}

.faab-cart__table th,
.faab-cart__table td,
.faab-review th,
.faab-review td,
.faab-totals__table th,
.faab-totals__table td {
  padding: var(--faab-space-3);
  text-align: left;
  vertical-align: middle;
  /*
   * Bottom only. WooCommerce's `table.shop_table td` adds a top border as well,
   * so leaving this unset draws every separator twice and puts a stray rule
   * above the first line of each stacked card on mobile.
   */
  border-top: 0;
  border-bottom: 1px solid var(--faab-line-soft);
}

.faab-cart__table thead th,
.faab-review thead th {
  font-size: var(--faab-fs-xs);
  font-weight: 500;
  letter-spacing: var(--faab-tracking-wide);
  text-transform: uppercase;
  color: var(--faab-text-muted);
  background: var(--faab-bg-warm);
}

/* ---------- Cart ---------- */

.faab-cart { margin-bottom: var(--faab-space-6); }

.faab-cart__table .product-thumbnail { width: 88px; }

.faab-cart__table .product-thumbnail img {
  display: block;
  width: 72px;
  height: 90px; /* the 4:5 crop the cards use */
  object-fit: cover;
  border-radius: var(--faab-radius-sm);
  background: var(--faab-bg-warm);
}

.faab-cart__table .product-price,
.faab-cart__table .product-subtotal { white-space: nowrap; }

.faab-cart__table .product-subtotal { font-weight: 500; }

.faab-cart__table .product-remove { width: 52px; text-align: right; }

.faab-cart__brand {
  display: block;
  font-size: var(--faab-fs-xs);
  letter-spacing: var(--faab-tracking-wide);
  text-transform: uppercase;
  color: var(--faab-text-muted);
  margin-bottom: 2px;
}

.faab-cart__name {
  color: var(--faab-text);
  text-decoration: none;
  font-weight: 500;
}
.faab-cart__name:hover { color: var(--faab-accent); }

/*
 * The article number. Tabular figures on purpose: a column of SKUs being
 * checked against a written list is much easier to scan when the digits line up.
 */
.faab-cart__sku {
  display: block;
  margin-top: 2px;
  font-size: var(--faab-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--faab-text-muted);
}

/* The "did my korting apply" chip. Quiet: it reassures, it does not sell. */
.faab-cart__tier {
  display: block;
  margin-top: 2px;
  font-size: var(--faab-fs-xs);
  color: var(--faab-accent);
}

.faab-cart__warning {
  margin: var(--faab-space-2) 0 0;
  font-size: var(--faab-fs-sm);
  line-height: var(--faab-lh-body);
  color: #B3261E;
}

/*
 * A line that cannot be ordered is tinted so it is findable in a cart of
 * eleven. Tint plus the warning text, never colour alone.
 */
.faab-cart__table tr[data-faab-problem] { background: color-mix(in srgb, #B3261E 4%, transparent); }

/*
 * The remove control.
 *
 * The selectors here are deliberately heavier than the rest of this file, and
 * the !important is not laziness. WooCommerce ships
 * `.woocommerce a.remove { color: red !important; display: block; width: 1em;
 * height: 1em; font-size: 1.5em }`. shop.css loads after woocommerce.css, so
 * cascade order settles any tie, but (0,2,1) still beats a bare
 * `.faab-cart__table .remove` and nothing but !important beats !important.
 *
 * Matching the specificity rather than raising ours everywhere keeps the war
 * contained to the one control Woo actually shouts about.
 */
.faab-cart__table a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--faab-fs-base);
  border-radius: var(--faab-radius-pill);
  text-decoration: none;
  color: var(--faab-text-muted) !important;
  transition: background var(--faab-dur) var(--faab-ease), color var(--faab-dur) var(--faab-ease);
}
.faab-cart__table a.remove:hover {
  background: var(--faab-bg-warm);
  color: #B3261E !important;
}

.faab-cart__table td.actions { background: var(--faab-bg-warm); }

.faab-cart__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--faab-space-2);
  align-items: center;
}

.faab-cart__coupon { display: flex; gap: var(--faab-space-2); }

/*
 * Specificity, counted rather than guessed.
 *
 * woocommerce-layout.css carries
 * `.woocommerce table.cart td.actions .input-text { width: 80px }`, which is
 * (0,4,2): four classes (.woocommerce, .cart, .actions, .input-text) and two
 * elements. `table.cart` is easy to read as one class and it is two things.
 * Anything at (0,4,1) or below loses and the field stays 80px wide, clipping
 * "Kortingscode" to "Kortingsc". The selector below is (0,5,2).
 */
.faab-cart .faab-cart__table td.actions .faab-cart__coupon input.input-text {
  width: 190px;
  height: 44px;
  padding: 0 var(--faab-space-3);
  margin: 0;
  float: none;
  border: 1px solid var(--faab-line);
  border-radius: var(--faab-radius-pill);
  background: var(--faab-surface);
  font: inherit;
  line-height: normal;
  color: var(--faab-text);
}

.faab-cart__continue {
  margin-left: auto;
  font-size: var(--faab-fs-sm);
  color: var(--faab-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.faab-cart__continue:hover { color: var(--faab-accent); border-bottom-color: var(--faab-accent); }

/*
 * Totals right, cross-sells left.
 *
 * The width/float reset is load-bearing, not tidying. woocommerce-layout.css
 * carries `.woocommerce .cart-collaterals .cart_totals { float: right;
 * width: 48% }` from its pre-grid two-column layout. Inside a grid container
 * the float is ignored but the 48% is not, so the totals box renders at 182px
 * of its 380px column: a panel that looks like a rendering fault rather than a
 * layout choice. Same for `.cross-sells`.
 *
 * Doubling up the class names is what buys the specificity: Woo's selector is
 * (0,3,0), so `.faab-cart__collaterals > *` at (0,1,0) never had a chance.
 */
.faab-cart__collaterals.cart-collaterals > .cart_totals.faab-totals,
.faab-cart__collaterals.cart-collaterals > .cross-sells.faab-cross-sells {
  width: 100%;
  float: none;
}

.faab-cart__collaterals {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: var(--faab-space-6);
  align-items: start;
}

.faab-cart__collaterals .faab-cross-sells { grid-column: 1; }
.faab-cart__collaterals .faab-totals { grid-column: 2; grid-row: 1; }

/* ---------- Totals ---------- */

.faab-totals__title {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-xl);
  margin: 0 0 var(--faab-space-3);
}

.faab-totals__table th {
  font-weight: 400;
  color: var(--faab-text-muted);
}

.faab-totals__table th small {
  display: block;
  font-size: var(--faab-fs-xs);
}

.faab-totals__table td { text-align: right; white-space: nowrap; }

.faab-totals__table .order-total th,
.faab-totals__table .order-total td {
  border-bottom: 0;
  color: var(--faab-text);
  font-size: var(--faab-fs-lg);
  font-weight: 500;
}

.faab-totals__go { margin-top: var(--faab-space-4); }

/*
 * Shown instead of "Afrekenen" when a line cannot be ordered. See
 * woocommerce/cart/proceed-to-checkout-button.php: this is the courtesy, not
 * the enforcement.
 */
.faab-totals__blocked {
  margin: var(--faab-space-2) 0 0;
  font-size: var(--faab-fs-sm);
  line-height: var(--faab-lh-body);
  color: #B3261E;
}

.faab-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  background: var(--faab-warmgrey);
}
.faab-btn[disabled]:hover { background: var(--faab-warmgrey); }

/* ---------- Empty cart ---------- */

.faab-cart-empty {
  max-width: var(--faab-content);
  padding: var(--faab-space-6) 0;
}

.faab-cart-empty__lead {
  font-size: var(--faab-fs-lg);
  line-height: var(--faab-lh-body);
  color: var(--faab-brown);
  margin-bottom: var(--faab-space-4);
}

.faab-cart-empty__search { max-width: 480px; margin-bottom: var(--faab-space-4); }

.faab-cart-empty__actions { display: flex; flex-wrap: wrap; gap: var(--faab-space-2); }

/* ---------- Cross-sells ---------- */

.faab-cross-sells { margin-top: var(--faab-space-2); }
.faab-cross-sells .products { margin: 0; }

/* ---------- Checkout ---------- */

.faab-checkout__cols {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 400px);
  gap: var(--faab-space-6);
  align-items: start;
}

.faab-checkout__panel {
  background: var(--faab-surface);
  border: 1px solid var(--faab-line-soft);
  border-radius: var(--faab-radius);
  padding: var(--faab-space-5);
  margin-bottom: var(--faab-space-4);
}

.faab-checkout__panel:empty { display: none; }

.faab-checkout__panel h3,
.faab-checkout__panel .woocommerce-billing-fields h3,
.faab-checkout__panel .woocommerce-shipping-fields h3 {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-xl);
  margin: 0 0 var(--faab-space-4);
}

/*
 * The summary follows the form down a long B2B address. `top` clears the
 * header, matching .faab-shop__side in components.css.
 */
.faab-checkout__side { position: sticky; top: 110px; }

.faab-checkout__side-title {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-xl);
  margin: 0 0 var(--faab-space-3);
}

/* The logged-out state. See form-checkout.php. */
.faab-checkout__gate {
  max-width: var(--faab-content);
  padding: var(--faab-space-6);
  background: var(--faab-surface);
  border: 1px solid var(--faab-line-soft);
  border-radius: var(--faab-radius);
}

.faab-checkout__gate h2 {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-2xl);
  margin: 0 0 var(--faab-space-2);
}

.faab-checkout__gate p { margin-bottom: var(--faab-space-4); color: var(--faab-brown); }

/* ---------- Form fields ---------- */

.form-row { margin-bottom: var(--faab-space-3); }

.form-row label {
  display: block;
  margin-bottom: var(--faab-space-1);
  font-size: var(--faab-fs-sm);
  color: var(--faab-brown);
}

.form-row .required {
  color: var(--faab-accent);
  text-decoration: none;
  border: 0;
}

.form-row .input-text,
.form-row select,
.form-row textarea,
.select2-container .select2-selection--single {
  width: 100%;
  min-height: 46px;
  padding: var(--faab-space-2) var(--faab-space-3);
  border: 1px solid var(--faab-line);
  border-radius: var(--faab-radius-sm);
  background: var(--faab-surface);
  font: inherit;
  color: var(--faab-text);
}

.form-row textarea { min-height: 96px; resize: vertical; }

.form-row .input-text:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--faab-accent);
  outline-offset: 1px;
  border-color: transparent;
}

.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid select { border-color: #B3261E; }

/* Two-up on the wide rows Woo already marks as halves. */
@media (min-width: 720px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--faab-space-3);
  }

  .form-row-wide,
  .form-row-full { grid-column: 1 / -1; }
}

/* ---------- Review order ---------- */

.faab-review td { text-align: right; }
.faab-review td.product-name,
.faab-review th.product-name { text-align: left; }

.faab-review .product-quantity { color: var(--faab-text-muted); font-weight: 400; }

/* Article number and unit price under the product name. */
.faab-review__line {
  display: block;
  margin-top: 2px;
  font-size: var(--faab-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--faab-text-muted);
}

.faab-review__line .amount { color: inherit; }

.faab-review tfoot th {
  font-weight: 400;
  text-align: left;
  color: var(--faab-text-muted);
}

.faab-review tfoot th small { display: block; font-size: var(--faab-fs-xs); }

.faab-review tfoot .order-total th,
.faab-review tfoot .order-total td {
  border-bottom: 0;
  color: var(--faab-text);
  font-size: var(--faab-fs-lg);
  font-weight: 500;
}

/* Payment box. */
.woocommerce-checkout-payment {
  margin-top: var(--faab-space-4);
  background: var(--faab-surface);
  border: 1px solid var(--faab-line-soft);
  border-radius: var(--faab-radius);
  padding: var(--faab-space-4);
}

.wc_payment_methods { list-style: none; margin: 0 0 var(--faab-space-3); padding: 0; }
.wc_payment_method label { display: inline; font-size: var(--faab-fs-base); color: var(--faab-text); }

.wc_payment_method .payment_box {
  margin: var(--faab-space-2) 0 var(--faab-space-3);
  padding: var(--faab-space-3);
  background: var(--faab-bg-warm);
  border-radius: var(--faab-radius-sm);
  font-size: var(--faab-fs-sm);
  line-height: var(--faab-lh-body);
}

#place_order {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--faab-radius-pill);
  background: var(--faab-espresso);
  color: var(--faab-text-invert);
  font: inherit;
  font-size: var(--faab-fs-lg);
  cursor: pointer;
}
#place_order:hover { background: var(--faab-brown); }

/* ---------- Order received ---------- */

.faab-received { max-width: var(--faab-content); }

.faab-received__title {
  font-family: var(--faab-font-display);
  font-size: var(--faab-fs-3xl);
  line-height: var(--faab-lh-tight);
  margin: 0 0 var(--faab-space-4);
}

/*
 * Five facts about the order. Three columns rather than five: the confirmation
 * sits at the reading measure (--faab-content), where five columns squeeze each
 * value to about 130px and "Betaalwijze" alone eats two lines.
 */
.faab-received__overview {
  list-style: none;
  margin: var(--faab-space-4) 0;
  padding: var(--faab-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--faab-space-4);
  background: var(--faab-surface);
  border: 1px solid var(--faab-line-soft);
  border-radius: var(--faab-radius);
}

/*
 * Woo centres these list items and separates them with a dashed right border.
 * Both are from its own default styling and neither belongs here, where every
 * other label/value pair on the site is left-aligned and separated by space.
 */
.faab-received__overview li {
  float: none;
  width: auto;
  text-align: left;
  border: 0;
  padding: 0;
  margin: 0;
}

.faab-received__overview span {
  display: block;
  font-size: var(--faab-fs-xs);
  letter-spacing: var(--faab-tracking-wide);
  text-transform: uppercase;
  color: var(--faab-text-muted);
  margin-bottom: 2px;
}

.faab-received__overview strong {
  font-weight: 500;
  color: var(--faab-text);
}

/*
 * Keep a price and its currency symbol together. Woo wraps the € in its own
 * <span>, so a narrow column will happily break between "€" and "842.34" and
 * leave the symbol stranded on the line above.
 */
.woocommerce-Price-amount { white-space: nowrap; }

/* The invoice note. It exists to stop a phone call; give it the weight. */
.faab-received__invoice {
  padding: var(--faab-space-3) var(--faab-space-4);
  background: var(--faab-bg-warm);
  border-radius: var(--faab-radius-sm);
  font-size: var(--faab-fs-sm);
  line-height: var(--faab-lh-body);
  color: var(--faab-brown);
}

.faab-received__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--faab-space-2);
  margin-top: var(--faab-space-5);
}

.faab-received .woocommerce-order-details,
.faab-received .woocommerce-customer-details { margin-top: var(--faab-space-6); }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .faab-cart__collaterals,
  .faab-checkout__cols { grid-template-columns: 1fr; }

  .faab-cart__collaterals .faab-cross-sells,
  .faab-cart__collaterals .faab-totals { grid-column: 1; }

  .faab-cart__collaterals .faab-totals { grid-row: auto; order: -1; }

  .faab-checkout__side { position: static; }
}

/*
 * Stacked rows on small screens.
 *
 * WooCommerce emits data-title on every body cell and the overrides in
 * woocommerce/ keep them, which is what makes this possible without a second
 * markup path. The header row is hidden and each cell carries its own label.
 */
/*
 * Stacked cards on small screens.
 *
 * ── Four things WooCommerce does here that have to be undone ────────────────
 *
 * woocommerce-smallscreen.css is where most of the work is, and none of it is
 * obvious from looking at the page:
 *
 *   1. `tr td { text-align: right !important }`. Every value, including the
 *      product name, is flung to the right edge — which is what pushed the name
 *      underneath the remove control. Only !important beats !important.
 *   2. `table.cart .product-thumbnail { display: none }`. Reasonable for a
 *      consumer basket of three things; wrong for a salon checking eleven tubs
 *      that differ by a number in the name.
 *   3. `tr:nth-child(2n) td { background-color: rgba(0,0,0,.025) }`. Zebra
 *      striping painted on the CELLS, so it covers the row background — which
 *      is where the out-of-stock tint lives. Every even problem row would have
 *      lost its tint and kept only the red text.
 *   4. `td::before { float: left; font-weight: 700 }` for the label, which
 *      fights the flex rows below.
 *
 * Counting decides the selectors. Woo's row rule is
 * `.woocommerce table.shop_table_responsive tr` at (0,2,2), and its cell rule
 * is that plus `td` at (0,2,3). `.faab-cart__table tr.cart_item` is only
 * (0,2,1) and loses to both, so the rules below carry the form's own
 * `.faab-cart` as well: three classes beats two. Note that !important on a
 * losing selector still loses, which is why raising specificity is the fix
 * rather than adding more !important.
 *
 * The layout is a two-column grid per row: thumbnail and name on the first
 * line, then one label/value line each. Only `tr.cart_item` becomes a card, so
 * the actions row keeps its own full-width treatment.
 */
@media (max-width: 860px) {
  .faab-cart__table thead,
  .faab-review thead { display: none; }

  .faab-cart__table,
  .faab-cart__table tbody,
  .faab-review,
  .faab-review tbody,
  .faab-review tr,
  .faab-review td { display: block; width: auto; }

  .faab-cart .faab-cart__table tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: var(--faab-space-3);
    align-items: center;
    padding: var(--faab-space-3);
    border-bottom: 1px solid var(--faab-line-soft);
  }

  .faab-cart .faab-cart__table tr.cart_item td {
    display: block;
    grid-column: 1 / -1;
    padding: var(--faab-space-1) 0;
    border-top: 0;
    border-bottom: 0;
    text-align: left !important;
  }

  /*
   * Woo's zebra stripe is `.woocommerce table.shop_table_responsive
   * tr:nth-child(2n) td` at (0,3,3) — the :nth-child counts as a class — so the
   * plain cell rule above at (0,3,2) does not reach it. Repeating :nth-child
   * here makes it (0,4,2). This matters beyond tidiness: the stripe paints on
   * the CELLS, so it covers the row background that carries the out-of-stock
   * tint, and every even problem row would have lost its tint.
   */
  .faab-cart .faab-cart__table tr.cart_item:nth-child(2n) td { background: none; }

  /* Thumbnail and name share the first line. */
  .faab-cart .faab-cart__table tr.cart_item td.product-thumbnail {
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    padding: 0;
  }

  .faab-cart .faab-cart__table tr.cart_item td.product-thumbnail img {
    width: 56px;
    height: 70px;
  }

  /* The padding is what keeps the title clear of the remove control. */
  .faab-cart .faab-cart__table tr.cart_item td.product-name {
    grid-column: 2;
    grid-row: 1;
    padding-right: 34px;
  }

  /* One line each: label left, value right. */
  .faab-cart .faab-cart__table tr.cart_item td.product-price,
  .faab-cart .faab-cart__table tr.cart_item td.product-quantity,
  .faab-cart .faab-cart__table tr.cart_item td.product-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--faab-space-3);
    padding: var(--faab-space-2) 0;
    border-top: 1px solid var(--faab-line-soft);
  }

  .faab-cart .faab-cart__table tr.cart_item td[data-title]::before {
    content: attr(data-title);
    float: none;
    flex: none;
    font-size: var(--faab-fs-xs);
    font-weight: 400;
    letter-spacing: var(--faab-tracking-wide);
    text-transform: uppercase;
    color: var(--faab-text-muted);
  }

  /* The first line is the heading of the card and needs no labels. */
  .faab-cart .faab-cart__table tr.cart_item td.product-name::before,
  .faab-cart .faab-cart__table tr.cart_item td.product-thumbnail::before { content: none; }

  /* The tier chip and the price sit together on the right of their line. */
  .faab-cart .faab-cart__table tr.cart_item td.product-price .faab-cart__tier { text-align: right; }

  /* Pin the remove control to the corner rather than giving it a whole line. */
  .faab-cart .faab-cart__table tr.cart_item td.product-remove {
    position: absolute;
    top: var(--faab-space-2);
    right: var(--faab-space-2);
    width: auto;
    padding: 0;
  }

  /* Beat both the stripe and the plain cell rule. See note 3. */
  .faab-cart .faab-cart__table tr.cart_item[data-faab-problem] td,
  .faab-cart .faab-cart__table tr.cart_item[data-faab-problem]:nth-child(2n) td {
    background: color-mix(in srgb, #B3261E 5%, transparent);
  }

  .faab-cart .faab-cart__table tr.cart_item .faab-cart__warning { margin-top: var(--faab-space-1); }

  /* The actions row is not a card. */
  .faab-cart__actions { display: flex; }
  .faab-cart__coupon { width: 100%; }
  .faab-cart__table td.actions .faab-cart__coupon .input-text { flex: 1; width: auto; }
  .faab-cart__continue { margin-left: 0; }

  .faab-review tr {
    padding: var(--faab-space-3);
    border-bottom: 1px solid var(--faab-line-soft);
  }
  .faab-review td { text-align: left; border-bottom: 0; padding: 2px 0; }
}