/* ============================================================================
   §6m — CART. Matches https://www.raptorlabs.is/cart
   Reference: E:\raptorlabs\scrape2\checkout\cart-1440.png / cart-390.png
              E:\raptorlabs\scrape2\checkout\cart-skeleton.txt

   Measured off the source:
     page ground   WHITE (--background). The cart is NOT on the checkout's grey
                   ground — `<div class="w-full bg-background">` at source.
     main column   max-width 56rem (md:max-w-4xl), 1.5rem gutter
     aside         440px at lg, 520px at xl, sticky at top 6rem
     row grid      lg: minmax(0,1fr) 120px 96px 40px, gap 1rem
                   xl: minmax(0,1fr) 140px 120px 40px, gap 1.5rem
     header rule   2px solid black, pb 1rem
     row rule      1px solid black (border-primary)
     thumbnail     112px below md, 80px at md; 2px border, 4px/60% hard shadow
     stepper       2px black border; 44px buttons, 40x56 value cell on
                   --surface-container, Prompt 700 1.125rem
     panel         --secondary ground (#F5F5F4), 2px black border, 6px hard
                   shadow, fixed height at lg with the line list scrolling
     promo         input 2px border with border-right removed so it butts
                   against a square black APPLY
     CTA           black, full width, label left / arrow right

   ⚠ SPECIFICITY NOTE, same as rl-checkout.css: the payment mu-plugin prints an
   inline <style id="rl-checkout-css"> on wp_head:98 — AFTER this file — and it
   also runs on is_cart(). Nothing it sets touches these selectors today, but if
   a rule here ever stops applying, that is the first place to look.
   ========================================================================= */

/* ---------------------------------------------------------------- shell --- */
body.rl-cartpage {
  background: hsl(var(--background));
}

/* Woo wraps the shortcode output; drop the default page padding so the cart can
   own its own rhythm. */
body.rl-cartpage .woocommerce { margin: 0; }

.rl-cart {
  width: 100%;
  background: hsl(var(--background));
}

.rl-cart__grid {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-max);
}

/* ONE form holds both columns — see the contract note in cart.php. */
.rl-cart__form {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .rl-cart__form {
    flex-direction: row;
    min-height: calc(100dvh - 4rem);
  }
}

.rl-cart__col { display: flex; flex: 1 1 auto; flex-direction: column; padding: 2.5rem 1.5rem; }

@media (min-width: 768px)  { .rl-cart__col { padding-block: 3.5rem 2.5rem; } }
@media (min-width: 1024px) { .rl-cart__col { padding-bottom: 6rem; } }

.rl-cart__colInner { width: 100%; }

@media (min-width: 768px) {
  .rl-cart__colInner { max-width: 56rem; margin-inline: auto; }
}

@media (min-width: 1024px) { .rl-cart__colInner { margin-inline: 0; } }

.rl-cart__aside { width: 100%; }

@media (min-width: 1024px) {
  .rl-cart__aside { width: min(100%, 440px); flex-shrink: 0; }
}

@media (min-width: 1280px) {
  .rl-cart__aside { width: min(100%, 520px); }
}

.rl-cart__asideInner { padding: 2rem 1.5rem; }

@media (min-width: 768px) { .rl-cart__asideInner { padding: 2.5rem 2rem; } }

@media (min-width: 1024px) {
  .rl-cart__asideInner { position: sticky; top: 6rem; padding: 2rem 1.5rem; }
}

/* -------------------------------------------------------------- header --- */
.rl-cart__head { margin-bottom: 2.5rem; }

@media (min-width: 768px) { .rl-cart__head { margin-bottom: 3rem; } }

.rl-cart__title {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  font-size: 1.875rem;
  line-height: 1;
  margin: 0;
}

@media (min-width: 640px)  { .rl-cart__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .rl-cart__title { font-size: 3rem; } }

.rl-cart__sub {
  margin: .35rem 0 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  text-transform: uppercase;
  color: hsl(var(--foreground));
}

@media (min-width: 640px) { .rl-cart__sub { font-size: 1.125rem; } }

/* ---------------------------------------------------------------- table --- */
/* The item area stays a real <table> so the <tr>-emitting cart hooks remain
   valid (see cart.php), and every part of it is re-laid-out as a grid.
 *
 * ⚠ WOOCOMMERCE'S OWN TABLE CHROME HAS TO BE UNDONE FIRST, AND IT OUTRANKS A
 * SINGLE CLASS. woocommerce.css ships
 *   `.woocommerce table.shop_table { border: 1px solid rgba(0,0,0,.1);
 *      border-radius: 5px; border-collapse: separate }`
 * plus padding and 1px rules on every th/td, at `.woocommerce table.shop_table`
 * = (0,2,1). A bare `.rl-cart__table` is (0,1,0) and loses, which drew a
 * rounded grey box around the header row and another around each item — and on
 * mobile the 112px thumbnail then punched out through it. Hence the
 * `body.rl-cartpage .woocommerce` prefix on the resets below: do not shorten
 * these selectors. */
body.rl-cartpage .woocommerce table.rl-cart__table {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
}

body.rl-cartpage .woocommerce table.rl-cart__table thead,
body.rl-cartpage .woocommerce table.rl-cart__table tbody { display: block; width: 100%; }

body.rl-cartpage .woocommerce table.rl-cart__table th,
body.rl-cartpage .woocommerce table.rl-cart__table td {
  border: 0;
  padding: 0;
  background: transparent;
  font-weight: inherit;
  line-height: inherit;
}

/* The column header row only exists from lg — below that the row is stacked and
   the labels would describe nothing. */
.rl-cart__thead { display: none; }

@media (min-width: 1024px) {
  .rl-cart__thead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 96px 40px;
    align-items: center;
    gap: 1rem;
    border-bottom: var(--border-width) solid hsl(var(--foreground));
    padding-bottom: 1rem;
  }
}

@media (min-width: 1280px) {
  .rl-cart__thead { grid-template-columns: minmax(0, 1fr) 140px 120px 40px; gap: 1.5rem; }
}

.rl-cart__th {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: hsl(var(--primary) / .7);
  text-align: left;
}

.rl-cart__th--qty   { text-align: center; }
.rl-cart__th--total { text-align: right; }

/* The `!important`s here are aimed at woocommerce.css's
   `.woocommerce table.shop_table tbody tr` rules, which set their own borders
   at a weight this cannot otherwise beat without going even deeper. */
.rl-cart__row {
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1rem;
  border: 0;
  border-bottom: 1px solid hsl(var(--primary)) !important;
  padding-block: 1.5rem;
}

@media (min-width: 1024px) {
  .rl-cart__row { grid-template-columns: minmax(0, 1fr) 120px 96px 40px; gap: 1rem; }
}

@media (min-width: 1280px) {
  .rl-cart__row { grid-template-columns: minmax(0, 1fr) 140px 120px 40px; gap: 1.5rem; }
}

.rl-cart__cell { display: block; padding: 0; border: 0; vertical-align: middle; }

/* ----------------------------------------------------------- item body --- */
/* Below lg the source reverses this row: the thumbnail sits on the RIGHT and
   the text reads from the left edge. */
.rl-cart__prod {
  display: flex;
  min-width: 0;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 1024px) { .rl-cart__prod { flex-direction: row; } }

.rl-cart__thumb {
  display: flex;
  height: 112px;
  width: 112px;
  flex-shrink: 0;
  overflow: hidden;
  border: var(--border-width) solid hsl(var(--primary));
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .6);
  transition: box-shadow .12s, transform .12s;
}

@media (min-width: 768px) { .rl-cart__thumb { height: 80px; width: 80px; } }

.rl-cart__thumb img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.rl-cart__thumb:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 rgba(0, 0, 0, .6); }

.rl-cart__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .25rem;
  overflow: hidden;
}

.rl-cart__name {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  color: hsl(var(--foreground));
}

.rl-cart__name a { color: inherit; }
.rl-cart__name a:hover { color: hsl(var(--muted-foreground)); }

.rl-cart__serial {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: hsl(var(--primary));
}

.rl-cart__unit {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: hsl(var(--primary) / .7);
}

.rl-cart__unit .woocommerce-Price-amount { font-weight: inherit; }

.rl-cart__backorder {
  margin: .25rem 0 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: #B45309;
}

/* --------------------------------------------------------------- totals --- */
.rl-cart__total {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--foreground));
}

/* Two copies of the line total exist: one under the details for the stacked
   layout, one in its own column from lg. Exactly one is ever shown. */
.rl-cart__total--inline { margin-top: .5rem; }

@media (min-width: 1024px) { .rl-cart__total--inline { display: none; } }

.rl-cart__cell--total { display: none; }

@media (min-width: 1024px) {
  .rl-cart__cell--total { display: flex; justify-content: flex-end; }
}

/* -------------------------------------------------------------- stepper --- */
.rl-cart__qtyWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .rl-cart__qtyWrap { justify-content: center; }
}

.rl-cart__stepper {
  display: inline-flex;
  align-items: stretch;
  border: var(--border-width) solid hsl(var(--primary));
}

.rl-cart__step {
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1;
  transition: box-shadow .12s, transform .12s;
}

.rl-cart__step:first-child { border-right: var(--border-width) solid hsl(var(--primary)); }
.rl-cart__step:hover:not(:disabled) { box-shadow: var(--shadow-hard-4); }
.rl-cart__step:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: none; }
.rl-cart__step:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; transform: none; }

.rl-cart__qty {
  height: 40px;
  width: 56px;
  border: 0;
  border-right: var(--border-width) solid hsl(var(--primary));
  border-radius: 0;
  background: rgb(var(--surface-container));
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

/* The source shows a plain number: its own -/+ are the controls, so the native
   spinners would be a second, differently-styled pair of the same thing. */
.rl-cart__qty::-webkit-outer-spin-button,
.rl-cart__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rl-cart__qty:focus-visible { outline: 2px solid hsl(var(--foreground)); outline-offset: -2px; }

/* --------------------------------------------------------------- remove --- */
.rl-cart__rm { display: inline-flex; }

/* The text "REMOVE" next to the stepper below lg; the trash icon column from lg. */
.rl-cart__rm--inline { display: inline-flex; }

@media (min-width: 1024px) { .rl-cart__rm--inline { display: none; } }

.rl-cart__cell--rm { display: none; }

@media (min-width: 1024px) {
  .rl-cart__cell--rm { display: flex; justify-content: center; }
}

/* The trailing letter-space of an uppercase tracked label overhangs its own box,
   so a right-aligned REMOVE clipped its underline against the row edge at
   390px. The padding is that overhang. */
.rl-cart__rmLink {
  display: inline-block;
  padding-right: .2em;
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: hsl(var(--muted-foreground));
  box-shadow: inset 0 -3px 0 0 hsl(var(--primary));
  transition: color .12s;
}

.rl-cart__rmLink:hover { color: hsl(var(--foreground)); }

.rl-cart__trash {
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  transition: background-color .12s, color .12s;
}

.rl-cart__trash:hover { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
.rl-cart__trash svg { width: 16px; height: 16px; }

/* ------------------------------------------------------- update button --- */
/* The source has no "Update cart" button — its +/- write through immediately,
   and rl-cart.js reproduces that by pressing this one. It is therefore hidden
   for anyone with JS, and VISIBLE for anyone without, so the page still works.
   `clip`-style hiding, not display:none: Woo's cart.js enables and clicks it,
   and a display:none button is not clickable in every engine. */
.rl-cart__actions > td { display: block; padding: 1.5rem 0 0; border: 0; }

.rl-cart__update {
  min-height: 48px;
  padding: .5rem 1.25rem;
  border: var(--border-width) solid hsl(var(--foreground));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.rl-cart__update:disabled { opacity: .5; }

.rl-cart--js .rl-cart__update {
  position: absolute;
  width: 1px;
  height: 1px;
  /* ⚠ `min-height: 0` IS REQUIRED. The base rule above sets min-height:48px for
     the no-JS button, and min-height beats height — without this the "hidden"
     button stayed 1px wide but a full 48px tall, leaving a sliver of black
     border down the left edge of the cart. */
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rl-cart--js .rl-cart__actions > td { padding: 0; }

/* ---------------------------------------------------------------- panel --- */
.rl-cart__panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border: var(--border-width) solid hsl(var(--primary));
  background: hsl(var(--secondary));
  box-shadow: var(--shadow-hard-6);
}

@media (min-width: 1024px) { .rl-cart__panel { height: calc(100dvh - 10rem); } }

.rl-cart__panelHead {
  padding: 1.25rem 1.5rem;
  border-bottom: var(--border-width) solid hsl(var(--foreground));
}

.rl-cart__panelTitle {
  width: fit-content;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: hsl(var(--foreground));
}

@media (min-width: 768px) { .rl-cart__panelTitle { font-size: 1.875rem; } }

.rl-cart__panelBody {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}

.rl-cart__panelFoot {
  flex-shrink: 0;
  border-top: var(--border-width) solid hsl(var(--foreground));
  padding: 1.25rem 2rem 1.5rem;
}

/* ------------------------------------------------------- panel: lines --- */
.rl-cart__mini { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .25rem; }

.rl-cart__miniRow { display: flex; min-width: 0; align-items: baseline; gap: .75rem; }

.rl-cart__miniQty {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
}

.rl-cart__miniName {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(var(--foreground));
}

.rl-cart__miniPrice {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- panel: promo --- */
.rl-cart__promo { margin: 0 0 2rem; }

.rl-cart__promoTitle {
  margin: 0 0 .5rem;
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: hsl(var(--primary));
}

.rl-cart__promoRow { display: flex; width: 100%; gap: 0; }

.rl-cart__promoInput {
  min-height: 48px;
  width: 100%;
  flex: 1 1 auto;
  border: var(--border-width) solid hsl(var(--foreground));
  border-right: 0;
  border-radius: 0;
  background: hsl(var(--primary-foreground) / .8);
  padding: .5rem 1rem;
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: hsl(var(--foreground));
}

.rl-cart__promoInput::placeholder {
  font-weight: 400;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.rl-cart__promoInput:hover { background: hsl(var(--primary-foreground)); }
.rl-cart__promoInput:focus { outline: none; background: hsl(var(--primary-foreground)); }

.rl-cart__apply {
  flex-shrink: 0;
  border: var(--border-width) solid transparent;
  border-radius: 0;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: .75rem 1rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  transition: background-color .2s, color .2s, box-shadow .2s;
}

.rl-cart__apply:hover:not(:disabled) {
  background: hsl(var(--primary-foreground));
  color: hsl(var(--primary));
  border-color: hsl(var(--foreground));
  box-shadow: var(--shadow-hard-4);
}

/* Half opacity while the field is empty — the source's own resting state. */
.rl-cart__apply:disabled { opacity: .5; pointer-events: none; }

.rl-cart__applied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.rl-cart__applied a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------ panel: totals --- */
.rl-cart__tot { width: 100%; border-collapse: collapse; }

.rl-cart__tot th,
.rl-cart__tot td { padding: .25rem 0; text-align: left; vertical-align: baseline; }

.rl-cart__tot th {
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: hsl(var(--primary));
}

.rl-cart__tot td {
  text-align: right;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
}

/* "CALCULATED AT CHECKOUT" is a sentence, not a figure — it must not inherit
   the tabular price type or it wraps badly in the narrow column. It IS caps at
   source, done here in CSS rather than by shouting in the template so the
   string stays a normal sentence for translation. */
.rl-cart__shipNote {
  font-family: var(--font-ui) !important;
  font-size: .875rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: normal;
}

.rl-cart__tot .order-total th,
.rl-cart__tot .order-total td {
  padding-top: 2rem;
  border-top: var(--border-width) solid hsl(var(--foreground));
}

.rl-cart__tot .order-total th {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 800;
  color: hsl(var(--foreground));
}

@media (min-width: 640px) { .rl-cart__tot .order-total th { font-size: 1rem; } }

.rl-cart__tot .order-total td {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 900;
  letter-spacing: var(--tracking-tighter);
}

/* The gateway's minimum-order warning row (rl_gw_min_order_totals_row). */
.rl-cart__tot .rl-min-order-row th { color: #B91C1C; }
.rl-cart__tot .rl-min-order-row td { font-size: .875rem; }
.rl-cart__tot .rl-min-order-row .rl-min-order-note {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: hsl(var(--muted-foreground));
}

/* ------------------------------------------------------------------ CTA --- */
.rl-cart__cta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 1.25rem;
  padding: .875rem 1.5rem;
  border: var(--border-width) solid transparent;
  border-radius: 0;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}

.rl-cart__cta:hover {
  background: hsl(var(--primary-foreground));
  color: hsl(var(--primary));
  border-color: hsl(var(--foreground));
  box-shadow: var(--shadow-hard-4);
}

.rl-cart__cta:active { transform: translate(4px, 4px); box-shadow: none; }

.rl-cart__ctaArrow { font-size: 1.125rem; line-height: 1; }

/* Under the minimum: a dead control, not a link to a checkout that refuses. */
.rl-cart__cta--blocked {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--foreground) / .25);
  cursor: not-allowed;
  justify-content: center;
}

.rl-cart__cta--blocked:hover {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--foreground) / .25);
  box-shadow: none;
}

.rl-cart__min {
  margin: .75rem 0 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: #B91C1C;
}

.rl-cart__foot {
  margin: .75rem 0 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
}

.rl-cart__foot a {
  font-weight: 700;
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rl-cart__foot a:hover { text-decoration: none; }

/* ------------------------------------------------------------- notices --- */
body.rl-cartpage .woocommerce-notices-wrapper:empty { display: none; }

body.rl-cartpage .woocommerce-error,
body.rl-cartpage .woocommerce-message,
body.rl-cartpage .woocommerce-info {
  margin: 0 auto 1.5rem;
  max-width: var(--container-max);
  padding: .875rem 1.5rem;
  border: var(--border-width) solid hsl(var(--foreground));
  border-radius: 0;
  background: #FEF3C7;
  box-shadow: var(--shadow-hard-3);
  font-family: var(--font-ui);
  font-size: .875rem;
  line-height: 1.5;
  list-style: none;
}

body.rl-cartpage .woocommerce-error { background: #FEE2E2; }

body.rl-cartpage .woocommerce-error::before,
body.rl-cartpage .woocommerce-message::before,
body.rl-cartpage .woocommerce-info::before { display: none; }

/* Woo moves focus to a notice so screen readers announce it, which lit the
   theme's global focus ring — and that ring is `--ring` (#33FF0A), the one
   colour the design system declares but never paints. A bright green dashed
   box around "added to your cart" was the result. Solid black instead, so the
   focus is still obvious and still in the palette. */
body.rl-cartpage .woocommerce-error:focus-visible,
body.rl-cartpage .woocommerce-message:focus-visible,
body.rl-cartpage .woocommerce-info:focus-visible,
body.rl-cartpage .woocommerce-error:focus,
body.rl-cartpage .woocommerce-message:focus,
body.rl-cartpage .woocommerce-info:focus {
  outline: var(--border-width) solid hsl(var(--foreground));
  outline-offset: 2px;
}

body.rl-cartpage .woocommerce-message .button,
body.rl-cartpage .woocommerce-error .button {
  float: none;
  margin-left: .5rem;
  border: var(--border-width) solid hsl(var(--foreground));
  border-radius: 0;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: .35rem .75rem;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ------------------------------------------------------------ empty --- */
.rl-cart--empty { padding: 3rem 1.5rem 6rem; }

.rl-cart__emptyInner { margin-inline: auto; width: 100%; max-width: 42rem; }

/* Woo's own empty-cart notice, retexted by the `wc_empty_cart_message` filter.
   It arrives as a `.woocommerce-info` — a yellow notice box everywhere else on
   this page, which is wrong here: an empty cart is a state, not a warning. The
   `!important`s are aimed at the sitewide notice rules further up this file. */
body.rl-cartpage .rl-cart--empty .wc-empty-cart-message,
body.rl-cartpage .rl-cart--empty .woocommerce-info,
body.rl-cartpage .rl-cart--empty .cart-empty {
  margin: 0 0 1rem !important;
  padding: 0 !important;
  max-width: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: hsl(var(--foreground));
}

.rl-cart__emptyLede {
  margin: 0 0 2rem;
  max-width: 34rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: hsl(var(--muted-foreground));
}

.rl-cart__cta--empty { max-width: 22rem; }

.rl-cart__emptyGoals { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; }

.rl-cart__emptyGoals a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .35rem .875rem;
  border: var(--border-width) solid hsl(var(--foreground));
  background: hsl(var(--background));
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: box-shadow .12s, transform .12s;
}

.rl-cart__emptyGoals a:hover { box-shadow: var(--shadow-hard-3); transform: translate(-1px, -1px); }

/* -------------------------------------------------------------- blocked --- */
/* Woo's blockUI overlay during an AJAX cart update. Squared off so it does not
   read as a different widget flashing over the page. */
body.rl-cartpage .blockUI.blockOverlay { background: hsl(var(--background)) !important; }