/* =============================================================================
   stw2026 — basket page
   From the Claude Design "STW Basket" handoff. Everything is scoped under
   #stw-basket. Bootstrap 5 utilities do spacing, grid, flex and card shells;
   this file only covers what utilities can't: the line-item grid, the restyled
   WooCommerce totals table, shipping method cards, panel chrome, sticky bar.
   Tokens: Shake That Weight design system (Urbanist, pink #F06292).
   ========================================================================== */

/* ---------- page wrapper -----------------------------------------------------
   picostrap's page.php wraps page content in .container > .row >
   .col-md-10.offset-md-1, which caps the basket at ~976px and squeezes the
   product-name column. Neutralise that on the basket only and let the
   .container-xxl in cart.php set the width, the way the category page widens
   its own wrapper in sass/category/_category.scss.
   ========================================================================== */
/* The basket page uses picostrap's "Default Without Jumbotron" template, which
   still hardcodes an <h1> of the page title. cart.php renders its own head
   ("Your basket" + item count), so suppress the template's to avoid two h1s. */
body.woocommerce-cart #container-content-page > .row > div > h1.display-4 { display: none; }

/* The site container's 1240px width and 32px gutters are left alone: they're what
   the header aligns to, so the basket inherits the same left and right margins as
   every other page. Only the 10/12 offset column below needs removing. */
body.woocommerce-cart main > .container > .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
body.woocommerce-cart main > .container > .row > [class*="col-"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  /* The wrapper column carries py-5, which stacked with the basket container's
     own py-lg-5 for a 96px gap under the header. The basket owns its vertical
     rhythm; the wrapper contributes none. !important is required because
     Bootstrap generates its spacing utilities with it. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Short local aliases for the site-wide --stw-* tokens, which come from
   sass/_theme_variables.scss via _stw-global.scss. No brand hex is declared
   here — that's what keeps stw-uk and stw-com identical. */
#stw-basket {
  --pink:        var(--stw-pink);
  --pink-600:    var(--stw-pink-600);
  --pink-100:    var(--stw-pink-100);
  --cyan:        var(--stw-cyan);
  --cyan-100:    var(--stw-cyan-100);
  --cyan-700:    var(--stw-cyan-700);
  --yellow:      var(--stw-yellow);
  --yellow-hl:   var(--stw-yellow-hl);
  --ink:         var(--stw-ink);
  --grey-50:     var(--stw-grey-50);
  --grey-100:    var(--stw-grey-100);
  --grey-200:    var(--stw-grey-200);
  --grey-400:    var(--stw-grey-400);
  --grey-500:    var(--stw-grey-500);
  --grey-700:    var(--stw-grey-700);
  --success:     var(--stw-success);
  --r-sm: var(--stw-radius-sm); --r-md: var(--stw-radius-md);
  --r-lg: var(--stw-radius-lg); --r-xl: 16px;

  font-family: var(--stw-font);
  color: var(--ink);
}

/* ---------- page head ---------- */
#stw-basket .stw-basket__title { font-size: clamp(26px, 5vw, 40px); font-weight: 800; letter-spacing: -.02em; }
#stw-basket .stw-basket__subtitle { font-size: 15px; color: var(--grey-500); }

/* ---------- reserved slot: notices + rewards ladder (woocommerce_before_cart)
   Collapses completely while stw-offers-progress is deactivated. */
#stw-basket .stw-basket__rewards { margin-bottom: 24px; }
#stw-basket .stw-basket__rewards:empty { display: none; margin: 0; }
/* Plugin output lands here (add-to-basket notices, the loyalty earn-points
   banner). Normalise the notice chrome to the card language used elsewhere on
   the page, and cap images so a missing one can't stretch its alt text. */
#stw-basket .stw-basket__rewards .woocommerce-message,
#stw-basket .stw-basket__rewards .woocommerce-info,
#stw-basket .stw-basket__rewards .woocommerce-error {
  border: 1px solid var(--grey-200); border-top-width: 1px; border-radius: var(--r-lg);
  background: var(--grey-50); color: var(--ink);
  font-size: 15px; padding: 16px 20px; margin: 0 0 12px;
}
#stw-basket .stw-basket__rewards .woocommerce-message .button {
  background: #fff; border: 1.5px solid var(--grey-200); color: var(--grey-700);
  border-radius: var(--r-md); font-weight: 800; font-size: 14px; padding: 9px 16px;
}
#stw-basket .stw-basket__rewards img { max-width: 100%; height: auto; }

/* ---------- line items ---------- */
#stw-basket .stw-basket__items { border: 1px solid var(--grey-200); border-radius: var(--r-xl); overflow: hidden; background: #fff; }

#stw-basket .stw-basket__items-head,
#stw-basket .stw-basket__item-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 118px 104px 30px; /* last col = icon-only remove */
  gap: 16px;
  align-items: center;
}
#stw-basket .stw-basket__items-head {
  padding: 14px 28px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--ink);
}
/* 28px horizontal inset: the remove icon sits exactly this far from the panel
   edge (its negative margin and padding cancel out), and 20px read cramped. */
#stw-basket .stw-basket__item { padding: 22px 28px; border-bottom: 1px solid var(--grey-100); }
#stw-basket .stw-basket__item:last-child { border-bottom: 0; }
#stw-basket .stw-basket__item--gift { background: #FFFDF3; }

/* keeps long product names from blowing out the grid column */
#stw-basket .stw-basket__product-body { min-width: 0; }

#stw-basket .stw-basket__thumb img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; background: var(--pink-100); display: block; }
#stw-basket .stw-basket__name { font-size: 17px; font-weight: 800; line-height: 1.25; text-wrap: balance; color: var(--ink); text-decoration: none; }
#stw-basket .stw-basket__name:hover { color: var(--pink-600); }
#stw-basket .stw-basket__meta,
#stw-basket .stw-basket__meta p,
#stw-basket .stw-basket__meta dl { font-size: 13px; color: var(--grey-500); margin: 0; }

#stw-basket .stw-basket__price { font-size: 16px; font-weight: 800; }
#stw-basket .stw-basket__price del { display: block; font-size: 14px; font-weight: 500; color: var(--grey-400); }
#stw-basket .stw-basket__price ins { text-decoration: none; }

#stw-basket .stw-basket__line-total { font-size: 18px; font-weight: 800; }
#stw-basket .stw-basket__saving { display: block; font-size: 13px; font-weight: 800; color: var(--pink-600); }

#stw-basket .stw-basket__edit { font-size: 13px; font-weight: 800; color: var(--pink-600); text-underline-offset: 3px; }

/* Icon-only remove, last cell of the row. The visually-hidden label keeps the
   WooCommerce link accessible; no visible "Remove" text. */
/* WooCommerce ships `a.remove { color: red !important }`, so the icon colour has
   to be forced back — the class is kept because plugins select on it. */
#stw-basket .stw-basket__remove { justify-self: end; align-self: center; display: inline-flex; padding: 6px; margin: -6px; border-radius: var(--r-md); color: var(--grey-400) !important; text-decoration: none; }
/* The trash glyph carries its mass low, so centring its box leaves it reading
   ~2px below the product title. Nudged up optically. */
#stw-basket .stw-basket__remove { transform: translateY(-2px); }
/* Colour change only on hover — no tinted plate behind the glyph. */
#stw-basket .stw-basket__remove:hover { color: var(--pink-600) !important; background: none; }
#stw-basket .stw-basket__remove-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#stw-basket .stw-basket__remove-icon {
  width: 17px; height: 17px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("../images/icons/trash.svg") center / contain no-repeat;
          mask: url("../images/icons/trash.svg") center / contain no-repeat;
}

/* quantity stepper — js/basket.js injects the buttons around WooCommerce's input */
#stw-basket .quantity { display: inline-flex; align-items: center; width: 118px; height: 44px; border: 1.5px solid var(--grey-200); border-radius: 10px; overflow: hidden; }
#stw-basket .quantity button {
  flex: 1 1 0; height: 100%; border: 0; background: #fff;
  font: inherit; font-size: 18px; font-weight: 800; color: var(--grey-700); cursor: pointer;
}
#stw-basket .quantity button:hover { background: var(--pink-100); color: var(--pink-600); }
#stw-basket .quantity input.qty {
  flex: 0 0 38px; width: 38px; height: 100%; border: 0; text-align: center;
  font: inherit; font-size: 16px; font-weight: 800; -moz-appearance: textfield;
}
#stw-basket .quantity input.qty::-webkit-outer-spin-button,
#stw-basket .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#stw-basket .stw-basket__qty-fixed { font-size: 15px; font-weight: 700; color: var(--grey-500); }

/* bundle contents — indented to the text column on desktop */
#stw-basket .stw-basket__bundle { margin: 16px 0 0 92px; padding: 14px 18px; background: var(--grey-50); border-radius: 12px; }
#stw-basket .stw-basket__bundle-label { margin: 0 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-500); }
#stw-basket .stw-basket__bundle-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 24px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--grey-700); }

/* badges */
#stw-basket .stw-badge { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
#stw-basket .stw-badge--pink { background: var(--pink-100); color: var(--pink-600); }
#stw-basket .stw-badge--yellow { background: var(--yellow); color: var(--ink); }

/* ---------- buttons ---------- */
/* Same invert-on-hover as the WooCommerce buttons, for the two CTAs that aren't
   WooCommerce's own: the mobile sticky bar and the empty-basket button. */
#stw-basket .stw-btn-primary { background: var(--pink); border: 2px solid var(--pink); color: #fff; font-weight: 700; font-size: 18px; padding: 15px 22px; border-radius: 12px; width: 100%; }
#stw-basket .stw-btn-primary:hover { background: #fff; border-color: var(--pink); color: var(--ink); }
#stw-basket .stw-basket__continue { font-size: 15px; font-weight: 800; color: var(--pink-600); text-decoration: none; }

/* ---------- collapsible panels (coupon) ---------- */
#stw-basket .stw-panel { border: 0; padding: 0 2px; }
#stw-basket .stw-panel__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
#stw-basket .stw-panel__summary::-webkit-details-marker { display: none; }
#stw-basket .stw-panel__summary-text { display: flex; flex-direction: column; gap: 3px; }
#stw-basket .stw-panel__summary-text strong { font-size: 15px; font-weight: 800; }
#stw-basket .stw-panel__summary-text small { font-size: 13px; color: var(--grey-500); }
#stw-basket .stw-panel__chev { width: 14px; height: 14px; flex: 0 0 auto; position: relative; }
#stw-basket .stw-panel__chev::before,
#stw-basket .stw-panel__chev::after { content: ""; position: absolute; background: var(--grey-500); border-radius: 2px; transition: opacity .15s ease; }
#stw-basket .stw-panel__chev::before { inset: 6px 0 auto 0; height: 2px; }
#stw-basket .stw-panel__chev::after { inset: 0 6px 0 auto; width: 2px; }
#stw-basket .stw-panel[open] .stw-panel__chev::after { opacity: 0; }
#stw-basket .stw-panel__body { border-top: 1px solid var(--grey-100); padding: 16px 0 20px; }
#stw-basket .stw-coupon-form { display: flex; gap: 8px; }
#stw-basket .stw-panel__body--loyalty { font-size: 14px; }
#stw-basket .stw-panel__body--loyalty img { max-width: 28px; height: auto; }
#stw-basket .stw-panel__body--loyalty > * { max-width: 100%; }

/* ---------- reviews block ---------- */
#stw-basket .stw-basket__reviews { background: var(--grey-50); border-radius: var(--r-xl); padding: 24px 26px; }
#stw-basket .stw-basket__reviews-score { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 15px; color: var(--grey-700); margin: 0 0 4px; }
#stw-basket .stw-basket__reviews-stars { color: var(--success); letter-spacing: 3px; font-size: 17px; }
#stw-basket .stw-basket__reviews-score strong { font-size: 17px; font-weight: 800; color: var(--ink); }
#stw-basket .stw-basket__reviews-copy { font-size: 14px; color: var(--grey-500); }

/* ---------- order summary (sticky on desktop) ---------- */
#stw-basket .stw-basket__summary { position: sticky; top: 24px; }
@media (max-width: 991.98px) { #stw-basket .stw-basket__summary { position: static; } }

/* The summary column is a fixed 340px card, not a fluid third of the row.
   col-lg-4 of the (now full-width) container came out at 400px, which stretched
   every label/value pair in the card wider than the design. 388px column − the
   row's 48px gutter padding = the 340px the design is drawn at; the line-item
   column takes all remaining width. */
@media (min-width: 992px) {
  #stw-basket .row > .col-lg-4 { flex: 0 0 388px; width: 388px; max-width: 388px; }
  #stw-basket .row > .col-lg-8 { flex: 1 1 0%; width: auto; max-width: none; }
}

/* the totals column sits on a soft grey tint to separate it from the line items.
   .stw-cart-subscription is stw-subscriptions' "Subscribe & Save" panel, printed
   at woocommerce_before_cart_totals — it lands above the summary in this column,
   so it gets the same card chrome rather than reading as loose plugin output. */
#stw-basket .stw-summary,
#stw-basket .stw-trust,
#stw-basket .stw-cart-subscription { border: 1px solid var(--grey-200); border-radius: var(--r-xl); background: var(--grey-50); }
#stw-basket .stw-cart-subscription { padding: 24px; font-size: 14px; }
/* stw-subscriptions puts its heading in a Bootstrap .card-header, which carries
   a subtle grey cap background and a bottom border — it read as a darker band
   behind the text. Cleared so the heading sits on the card's own tint, matching
   the "Order summary" title. */
#stw-basket .stw-cart-subscription .card-header {
  background: none;
  border-bottom: 0;
  padding: 0 0 14px;
}
/* 16px, not 17: "Subscribe & Save on Your Entire Order" measures 303px at 17px
   against 290px of card width, so it wrapped. At 16px it needs 281px and fits on
   one line without widening the column (which is shared with Order summary). */
#stw-basket .stw-cart-subscription .card-header h5 {
  font-size: 16px; font-weight: 800; color: var(--ink);
  white-space: nowrap; letter-spacing: -.01em;
}
#stw-basket .stw-cart-subscription .card-body { padding: 0; }

/* The design system's own `.card { padding: 24px }` stacks on top of
   `.card-body`'s padding, insetting content 48px each side instead of 24 and
   leaving only 242px of a 340px card for content. The .card-body owns the
   inset; the card shell owns none. */
#stw-basket .stw-summary,
#stw-basket .stw-trust,
#stw-basket .stw-empty { padding: 0; }

/* The design system's .card ships box-shadow: var(--stw-shadow-md). These panels
   are defined by their 1px keyline, not a shadow. */
#stw-basket .stw-summary,
#stw-basket .stw-trust,
#stw-basket .stw-cart-subscription,
#stw-basket .stw-empty { box-shadow: none; }
/* fields and method cards stay white inside the tint */
#stw-basket .stw-summary input[type="text"],
#stw-basket .stw-summary textarea,
#stw-basket ul#shipping_method label,
#stw-basket .stw-trust__payments img { background: #fff; }
#stw-basket .stw-summary .card-body,
#stw-basket .stw-trust .card-body { padding: 24px; }
#stw-basket .stw-summary__title { font-size: 20px; font-weight: 800; margin: 0 0 18px; }

/* accordion stack */
#stw-basket .stw-summary__accordions { border-top: 1px solid var(--grey-100); border-bottom: 1px solid var(--grey-100); margin-bottom: 18px; }
#stw-basket .stw-summary__accordions:empty { display: none; }
#stw-basket .stw-summary__accordions > * + * { border-top: 1px solid var(--grey-100); }
#stw-basket .stw-summary__accordions .woocommerce-message,
#stw-basket .stw-summary__accordions .woocommerce-error { font-size: 13px; font-weight: 700; margin: 9px 0 0; padding: 0; border: 0; background: none; }
#stw-basket .stw-summary__accordions .woocommerce-message { color: var(--success); }
#stw-basket .stw-summary__accordions .woocommerce-error { color: var(--pink-600); }
#stw-basket .stw-summary__accordions .button { background: var(--ink); color: #fff; border: 0; border-radius: var(--r-md); font-weight: 800; font-size: 14px; padding: 11px 18px; white-space: nowrap; }
#stw-basket .stw-summary__accordions input[type="text"] { border: 1.5px solid var(--grey-200); border-radius: var(--r-md); padding: 11px 13px; font-size: 14px; width: 100%; }

/* WooCommerce totals table, restyled in place */
#stw-basket .stw-summary__table { width: 100%; border: 0; margin: 0; }
#stw-basket .stw-summary__table th,
#stw-basket .stw-summary__table td {
  border: 0; padding: 9px 0; font-size: 15px; vertical-align: baseline; background: none;
}
#stw-basket .stw-summary__table th { font-weight: 500; color: var(--grey-700); text-align: left; }
#stw-basket .stw-summary__table tr.cart-subtotal th { font-weight: 800; color: var(--ink); }
/* keep the savings label on one line */
#stw-basket .stw-summary__table tr.stw-summary__row--save th { white-space: nowrap; }
#stw-basket .stw-summary__table td { font-weight: 800; text-align: right; white-space: nowrap; }
/* discount rows: label in ink, amount in pink so the eye reads the saving */
#stw-basket .stw-summary__table tr.cart-discount th,
#stw-basket .stw-summary__table tr.stw-summary__row--save th { color: var(--ink); font-weight: 700; }
#stw-basket .stw-summary__table tr.cart-discount td,
#stw-basket .stw-summary__table tr.stw-summary__row--save td { color: var(--pink-600); font-weight: 800; }
/* Shipping is the one row whose cell holds prose and a form (the calculator),
   so it opts out of the nowrap the money cells need — otherwise it runs past
   the edge of the summary card. */
/* Shipping is one full-width cell (see woocommerce/cart/cart-shipping.php), not
   a label/value pair — it holds prose, a radio list and the address calculator,
   none of which suit the right-aligned money column. */
#stw-basket .stw-summary__table td.stw-ship {
  padding: 14px 0 4px;
  border-top: 1px solid var(--grey-100);
  text-align: left;
  font-weight: 500;
  white-space: normal;
}
#stw-basket .stw-ship__label { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
#stw-basket .stw-ship__note { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--grey-500); }
#stw-basket .woocommerce-shipping-calculator { text-align: left; margin-top: 8px; }
#stw-basket .woocommerce-shipping-calculator { margin: 8px 0 0; }
#stw-basket .woocommerce-shipping-calculator .form-row { margin: 0 0 8px; }
#stw-basket .woocommerce-shipping-calculator select,
#stw-basket .woocommerce-shipping-calculator input[type="text"] { width: 100%; }
#stw-basket .stw-summary__table tr.order-total th,
#stw-basket .stw-summary__table tr.order-total td { padding: 16px 0 8px; border-top: 1.5px solid var(--ink); }
#stw-basket .stw-summary__table tr.order-total th { font-size: 19px; font-weight: 800; color: var(--ink); }
#stw-basket .stw-summary__table tr.order-total td { font-size: 30px; letter-spacing: -.01em; }
#stw-basket .stw-summary__table tr.order-total .includes_tax,
#stw-basket .stw-summary__table small { display: block; font-size: 12px; font-weight: 500; color: var(--grey-500); }

/* shipping methods as selectable cards, each with its estimate line */
#stw-basket ul#shipping_method { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#stw-basket ul#shipping_method li { margin: 0; padding: 0; }
#stw-basket ul#shipping_method label {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1.5px solid var(--grey-200); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; font-weight: 800; cursor: pointer;
}
#stw-basket ul#shipping_method input[type="radio"] { accent-color: var(--pink); margin-top: 3px; }
#stw-basket ul#shipping_method input[type="radio"]:checked + label { border-color: var(--pink); background: var(--pink-100); }
#stw-basket ul#shipping_method .stw-eta { display: block; font-size: 13px; font-weight: 500; color: var(--grey-500); }
#stw-basket .shipping-calculator-button { font-size: 13px; font-weight: 800; color: var(--pink-600); }
#stw-basket .woocommerce-shipping-destination { font-size: 13px; color: var(--grey-500); }

#stw-basket .stw-summary__vat { font-size: 13px; color: var(--grey-500); margin: 4px 0 16px; }

/* checkout + express stack. Stripe (30) and PayPal (31) print into
   .wc-proceed-to-checkout after the "or" divider (21). */
#stw-basket .wc-proceed-to-checkout { display: flex; flex-direction: column; }
#stw-basket .wc-proceed-to-checkout > * + * { margin-top: 10px; }
/* Colours come from the site-wide WooCommerce button treatment in
   sass/_stw-global.scss — only the basket's sizing is set here. */
#stw-basket .wc-proceed-to-checkout .checkout-button { font-size: 18px; padding: 16px 20px; border-radius: 12px; width: 100%; display: block; text-align: center; text-decoration: none; }
#stw-basket .stw-summary__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; }
/* No express buttons enabled (or none available) — don't leave a dangling "or". */
#stw-basket .stw-summary__or:last-child { display: none; }
#stw-basket .stw-summary__or::before,
#stw-basket .stw-summary__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--grey-200); }
#stw-basket .stw-summary__or span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-400); }
#stw-basket .stw-summary__continue { text-align: center; margin: 18px 0 0; }
#stw-basket .stw-summary__continue a { font-size: 15px; font-weight: 800; color: var(--pink-600); text-decoration: none; }

/* ---------- trust block ---------- */
/* Title case as written, not transformed to caps — so no uppercase transform and
   no display tracking, and it reads at the same weight as the labels below. */
#stw-basket .stw-trust__label { font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 10px; }
/* Six icons on one row whatever the column width — a flex row wrapped 5+1 in the
   ~280px summary column. */
#stw-basket .stw-trust__payments { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; }
#stw-basket .stw-trust__payments img { width: 100%; height: auto; border: 1px solid var(--grey-200); border-radius: var(--r-sm); background: var(--grey-50); padding: 3px 4px; }
#stw-basket .stw-trust__lines { list-style: none; margin: 0 0 18px; padding: 18px 0 0; border-top: 1px solid var(--grey-100); display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--grey-700); }
#stw-basket .stw-trust__lines-lock { font-weight: 700; color: var(--ink); }
#stw-basket .stw-trust__lines li::before,
#stw-basket .stw-empty__trust li::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px; background: currentColor; }
#stw-basket .stw-trust__lines-lock::before { -webkit-mask: url("../images/icons/lock.svg") center / contain no-repeat; mask: url("../images/icons/lock.svg") center / contain no-repeat; }
#stw-basket .stw-trust__lines-returns::before { -webkit-mask: url("../images/icons/returns.svg") center / contain no-repeat; mask: url("../images/icons/returns.svg") center / contain no-repeat; }
#stw-basket .stw-trust__lines-stars { color: var(--success); font-weight: 700; }
#stw-basket .stw-trust__lines-stars::before { -webkit-mask: url("../images/icons/star.svg") center / contain no-repeat; mask: url("../images/icons/star.svg") center / contain no-repeat; }
#stw-basket .stw-trust__badges { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--grey-100); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--ink); }
/* Keyline icons in the text colour, not coloured circles. Drawn as CSS masks so
   they inherit currentColor and stay in step with the label beneath. */
#stw-basket .stw-trust__badge-icon {
  display: block; width: 26px; height: 26px; margin: 0 auto 7px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
#stw-basket .stw-trust__badge-icon--quality { -webkit-mask-image: url("../images/icons/quality.svg"); mask-image: url("../images/icons/quality.svg"); }
#stw-basket .stw-trust__badge-icon--trust   { -webkit-mask-image: url("../images/icons/trust.svg");   mask-image: url("../images/icons/trust.svg"); }
#stw-basket .stw-trust__badge-icon--support { -webkit-mask-image: url("../images/icons/support.svg"); mask-image: url("../images/icons/support.svg"); }
#stw-basket .stw-trust__contact { font-size: 14px; font-weight: 700; color: var(--grey-700); line-height: 1.5; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--grey-100); }
/* nowrap keeps "Message our team" intact — it moves to the next line whole
   rather than splitting mid-phrase, which broke the underline across two rows. */
#stw-basket .stw-trust__contact a { color: var(--pink-600); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
#stw-basket .stw-trust__contact a:hover { color: var(--ink); }
/* Own line, rather than relying on where the sentence happens to wrap. */
#stw-basket .stw-trust__contact-note { display: block; }

/* ---------- declined-gift banner (stw-free-gift output, styled here) ---------- */
#stw-basket .stw-gift-banner { display: flex; align-items: center; gap: 16px; background: var(--cyan-100); border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 22px; font-size: 15px; line-height: 1.5; }
#stw-basket .stw-gift-banner .button { flex: 0 0 auto; background: #fff; color: var(--cyan-700); border: 1.5px solid var(--cyan); border-radius: var(--r-md); font-weight: 800; font-size: 14px; padding: 10px 18px; }

/* ---------- mobile sticky CTA ---------- */
#stw-basket .stw-basket__sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--grey-200); box-shadow: 0 -4px 12px rgba(0,0,0,.08);
  transform: translateY(100%); transition: transform .2s ease;
}
#stw-basket .stw-basket__sticky[data-visible] { transform: none; }
#stw-basket .stw-basket__sticky-total { display: flex; flex-direction: column; line-height: 1.1; }
#stw-basket .stw-basket__sticky-total small { font-size: 11px; font-weight: 700; color: var(--grey-500); }
#stw-basket .stw-basket__sticky-total strong { font-size: 19px; font-weight: 800; }
#stw-basket .stw-basket__sticky .stw-btn-primary { font-size: 15px; padding: 14px; }

/* ---------- empty state ---------- */
#stw-basket .stw-empty { max-width: 620px; border: 1px solid var(--grey-200); border-radius: var(--r-xl); }
#stw-basket .stw-empty .card-body { padding: 44px 40px; gap: 14px; }
#stw-basket .stw-empty__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--pink-100); }
#stw-basket .stw-empty__title { font-size: clamp(24px, 5vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
#stw-basket .stw-empty__copy { font-size: 16px; color: var(--grey-500); max-width: 38ch; margin: 0; text-wrap: pretty; }
#stw-basket .stw-empty__cta { width: auto; padding: 16px 34px; margin-top: 6px; }
#stw-basket .stw-empty__links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 14px 0 0; padding: 0; }
#stw-basket .stw-empty__links a { display: block; font-size: 14px; font-weight: 800; color: var(--grey-700); text-decoration: none; border: 1.5px solid var(--grey-200); border-radius: 999px; padding: 9px 16px; }
#stw-basket .stw-empty__links a:hover { border-color: var(--pink); color: var(--pink-600); }
#stw-basket .stw-empty__trust { max-width: 620px; list-style: none; margin: 26px auto 0; padding: 22px 0 0; border-top: 1px solid var(--grey-100); display: flex; flex-direction: column; gap: 11px; font-size: 14px; color: var(--grey-700); }

/* =============================================================================
   MOBILE (< 768px) — the grid collapses to a stacked card per line item
   ========================================================================== */
@media (max-width: 767.98px) {
  #stw-basket .stw-basket__items { border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 14px; }
  #stw-basket .stw-basket__item { border: 1px solid var(--grey-200); border-radius: var(--r-lg); padding: 14px; }
  #stw-basket .stw-basket__item--gift { border-color: var(--yellow); }

  /* Row 1: product + remove. Row 2: unit price, full width.
     Row 3: quantity stepper left, line total right. */
  #stw-basket .stw-basket__item-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
  }
  #stw-basket .stw-basket__product { grid-column: 1; grid-row: 1; }
  #stw-basket .stw-basket__remove { grid-column: 2; grid-row: 1; align-self: start; }
  #stw-basket .stw-basket__thumb img { width: 64px; height: 64px; border-radius: 10px; }
  #stw-basket .stw-basket__name { font-size: 15px; }
  /* unit price folds under the name */
  #stw-basket .stw-basket__price { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  #stw-basket .stw-basket__price del { display: inline; margin-left: 8px; }
  #stw-basket .stw-basket__qty { grid-column: 1; grid-row: 3; }
  #stw-basket .stw-basket__line-total { grid-column: 2; grid-row: 3; justify-self: end; align-self: center; }

  #stw-basket .stw-basket__bundle { margin-left: 0; }
  #stw-basket .stw-basket__bundle-list { grid-template-columns: 1fr; }

  /* WooCommerce's shop_table_responsive prints the row label a second time from
     td::before below md. The shipping row shows its own <th>, so suppress that. */
  #stw-basket .stw-summary__table tr.shipping td::before { display: none; }

  #stw-basket .stw-basket__items-head { display: none; }
  #stw-basket .stw-basket__actions .stw-btn-ghost { width: 100%; }
  #stw-basket .stw-basket__reviews { padding: 16px; }
  #stw-basket .stw-summary .card-body,
  #stw-basket .stw-trust .card-body { padding: 18px 16px; }
  #stw-basket .stw-summary__table tr.order-total td { font-size: 26px; }
  /* clear the sticky bar */
  #stw-basket { padding-bottom: 84px; }
}