/* ===========================================================
   PINEAPPLE — CART PAGE

   Loaded on the cart page only.

   WooCommerce's cart template is a table. It is NOT forked: at
   mobile widths the table's own rows are turned into stacked
   cards with CSS. That keeps WooCommerce updates applying, and
   it keeps the quantity, remove and coupon controls wired to
   WooCommerce's own handlers rather than to a copy of them.

   Card hierarchy per row:
     image · name · price · quantity · size · remove
   =========================================================== */

.woocommerce-cart .pa-main {
  padding-block-start: var(--pa-space-4);
}

.woocommerce-cart .woocommerce-cart-form__contents {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

/* All cart items and rows remain visually clean and uniform with no zebra striping */
.woocommerce-cart table.shop_table tr.cart_item td,
.woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td {
  background: transparent !important;
  background-color: transparent !important;
}

/* Redundant WooCommerce defaults are suppressed when Pineapple empty state is present */
.woocommerce-cart .pa-empty-state ~ .wc-empty-cart-message,
.woocommerce-cart .pa-empty-state ~ .return-to-shop {
  display: none;
}

/* --- mobile: the table becomes cards ------------------------- */

@media (max-width: 899px) {

  /* THREE CORRECTIONS TO woocommerce-smallscreen.css.
     -------------------------------------------------------------
     That sheet turns WooCommerce's default cart table into stacked
     rows. Most of what it does is useful and is left alone. Three
     of its rules are wrong for a clothing cart and are undone here.

     This sheet is ordered after it deliberately — see
     Pineapple_Assets::order_after_woocommerce() — so two of the
     three need nothing but a later declaration. The third carries
     !important in the original and can only be answered in kind. */

  /* 1. The photograph. smallscreen hides .product-thumbnail on the
        cart outright. On a clothing store that removes the only
        thing on the line that says which garment this is, at the
        one screen size where it matters most. */
  .woocommerce-cart table.cart .product-thumbnail {
    display: block;
  }

  /* 2. The injected labels. smallscreen writes
        `content: attr(data-title) ": "` into every cell, which puts
        "Product:", "Price:", "Quantity:" and "Subtotal:" on the
        page in English — on a Bengali storefront, from a stylesheet,
        where no translation can reach them. The card layout below
        makes them unnecessary anyway: a name, a price and a
        quantity stepper do not need labelling. */
  .woocommerce-cart table.shop_table_responsive tr td::before {
    content: none;
  }

  /* 3. The alignment. `text-align: right !important` on every cell
        fought the grid below and pushed names and prices to the
        right edge on a left-aligned page. !important is answered
        with !important here because there is no other answer to it;
        the rule is scoped to the cart so it cannot leak. */
  .woocommerce-cart table.shop_table_responsive tr td {
    text-align: start !important;
  }

  /* 4. Zebra striping. smallscreen sets background-color: rgba(0, 0, 0, 0.025)
        on tr:nth-child(2n) td, which places an unwanted faint rectangular
        tint behind the cells of even cart rows (e.g. price and remove action
        on item #2). Cart items must look completely clean and visually uniform. */
  .woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td,
  .woocommerce-cart table.shop_table tr.cart_item td {
    background: transparent !important;
    background-color: transparent !important;
  }

  .woocommerce-cart table.shop_table thead {
    /* Column headings mean nothing once each row is a card. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .woocommerce-cart table.shop_table,
  .woocommerce-cart table.shop_table tbody,
  .woocommerce-cart table.shop_table tr,
  .woocommerce-cart table.shop_table td {
    display: block;
    width: auto;
  }

  .woocommerce-cart table.shop_table tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(130px, 42%) minmax(0, 1fr);
    grid-template-areas:
      "image name"
      "image price"
      "image qty"
      "image size"
      "image remove";
    gap: var(--pa-space-2) var(--pa-space-4);
    padding-block: var(--pa-space-4);
    border-block-end: var(--pa-border);
  }

  .woocommerce-cart table.shop_table tr.cart_item td {
    padding: 0;
    border: 0;
  }

  .woocommerce-cart td.product-thumbnail { grid-area: image; }
  .woocommerce-cart td.product-name      { grid-area: name; }
  .woocommerce-cart td.product-quantity  { grid-area: qty; }
  .woocommerce-cart td.product-subtotal  { grid-area: price; }

  /* The per-unit price column duplicates the line subtotal on a narrow
     screen and pushes the quantity control down.

     THE SELECTOR CARRIES table.shop_table FOR A REASON. Without it this
     rule reads (0,2,1) and loses to the blanket
     `.woocommerce-cart table.shop_table td { display: block }` above,
     which reads (0,2,2) — so the column reappeared, unplaced, and fell
     through the grid to sit under the remove button as a second loose
     price. Matching the blanket rule's specificity is what makes the
     later declaration win, which is what source order is supposed to
     mean here. */
  .woocommerce-cart table.shop_table td.product-price { display: none; }

	.woocommerce-cart td.product-remove {
	grid-area: remove;
	justify-self: start;
	}

	.woocommerce-cart td.product-thumbnail > a {
		display: block;
		width: 100%;
		aspect-ratio: var(--pa-aspect-product);
	}

  .woocommerce-cart td.product-thumbnail img,
	.woocommerce-cart td.product-thumbnail .pa-product__placeholder {
    width: 100%;
	height: 100%;
    aspect-ratio: var(--pa-aspect-product);
    object-fit: cover;
    border-radius: var(--pa-radius);
  }
}

/* A live selector replaces the duplicated read-only variation line on the cart
   page only. Checkout and the mini cart keep WooCommerce's variation meta. */
.woocommerce-cart td.product-name:has(.pa-cart-size) .variation {
	display: none;
}

.pa-cart-field {
  display: grid;
  gap: var(--pa-space-1);
  max-width: 100%;
}

.pa-cart-field__label,
.pa-cart-size label {
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text);
  white-space: nowrap;
}

/* One token step between the label and the control it names. At 4px the
   Bengali label sat on the box — সাইজ carries descenders, and they were
   touching the border. */
.pa-cart-size {
  display: grid;
  gap: var(--pa-space-2);
  margin-block-start: var(--pa-space-1);
}

.pa-cart-size__control {
  position: relative;
  display: inline-block;
  width: fit-content;
}

.pa-cart-size__control::after {
  content: "⌄";
  position: absolute;
  right: var(--pa-space-3);
  bottom: 0;
  height: var(--pa-tap-min);
  display: flex;
  align-items: center;
  font-size: var(--pa-text-lg);
  color: var(--pa-charcoal);
  pointer-events: none;
}

.pa-cart-size select,
.pa-cart-size__select {
  appearance: none;
  -webkit-appearance: none;
  width: calc(var(--pa-tap-min) * 2);
  min-width: calc(var(--pa-tap-min) * 2);
  height: var(--pa-tap-min);
  min-height: var(--pa-tap-min);
  box-sizing: border-box;
  padding: var(--pa-space-2) var(--pa-space-8) var(--pa-space-2) var(--pa-space-3);
  border: var(--pa-border);
  border-color: var(--pa-stone);
  border-radius: var(--pa-radius);
  background: var(--pa-card-bg);
  color: var(--pa-text);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  cursor: pointer;
  transition: border-color 90ms ease-out;
}

/* The states `appearance: none` took away and nothing gave back.

   Stripping the native chrome from a select also strips the focus ring
   the platform draws on it: measured on the cart, a focused size select
   reported `outline-style: none`, which made the one control in the row
   that opens a menu the only one a keyboard could not be seen on. The
   ring is the charcoal outline every other control in this theme uses,
   so focus looks the same everywhere.

   The border darkens to charcoal while she is pointing at it and while
   the menu is open — `:focus` rather than `:focus-visible` for the
   second one, because a mouse or a tap opens the list without ever
   qualifying as visible focus, and an open menu should not leave its
   control looking untouched. No fill change: mint and butter are the
   button tiers, and this is a utility control. */
@media (hover: hover) {
  .pa-cart-size select:hover,
  .pa-cart-size__select:hover {
    border-color: var(--pa-charcoal);
  }
}

.pa-cart-size select:focus,
.pa-cart-size__select:focus {
  border-color: var(--pa-charcoal);
}

.pa-cart-size select:focus-visible,
.pa-cart-size__select:focus-visible {
  outline: var(--pa-space-1) solid var(--pa-charcoal);
  outline-offset: var(--pa-space-1);
}

/* --- row contents, all widths -------------------------------- */

.woocommerce-cart td.product-name a {
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text);
  text-decoration: none;
}

/* The selected size. WooCommerce prints variation meta here; it is the
   single most important line after the name on a cart page for a shop
   that sells one garment in four sizes. */
.woocommerce-cart td.product-name .variation {
  margin-block-start: var(--pa-space-1);
  font-size: var(--pa-text-sm);
  color: var(--pa-text);
}

.woocommerce-cart td.product-name .variation dt,
.woocommerce-cart td.product-name .variation dd {
  display: inline;
  margin: 0;
  font-weight: var(--pa-weight-regular);
}

.woocommerce-cart td.product-name .variation dd p {
  display: inline;
  margin: 0;
  font-weight: var(--pa-weight-semibold);
}

.woocommerce-cart td.product-subtotal {
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-bold);
  color: var(--pa-price);
}

.woocommerce-cart td.product-quantity .quantity {
  display: grid;
  gap: var(--pa-space-1);
  max-width: 100%;
}

.woocommerce-cart td.product-quantity .pa-cart-field__label {
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text);
}

.woocommerce-cart [data-pa-quantity] {
  position: relative;
  display: inline-grid;
  grid-template-columns: var(--pa-tap-min) var(--pa-space-6) var(--pa-tap-min);
  align-items: center;
  text-align: center;
  background: var(--pa-card-bg);
  border: var(--pa-border);
  border-radius: var(--pa-radius);
  width: fit-content;
}

/* The editable WooCommerce number stays canonical; its idle presentation
   follows the interface script. Focusing it exposes native numeric editing. */
.woocommerce-cart [data-pa-quantity] input.qty:not(:focus) { color: transparent; }
.woocommerce-cart [data-pa-quantity] input.qty {
  width: var(--pa-space-6);
  min-height: var(--pa-tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.woocommerce-cart .pa-cart-qty-display {
  position: absolute;
  inset-inline-start: var(--pa-tap-min);
  top: 0;
  width: var(--pa-space-6);
  height: var(--pa-tap-min);
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--pa-text);
}
.woocommerce-cart [data-pa-quantity] input.qty:focus ~ .pa-cart-qty-display { visibility: hidden; }

.woocommerce-cart .pa-qty-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pa-tap-min);
  min-height: var(--pa-tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pa-text);
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-bold);
  cursor: pointer;
}

.woocommerce-cart .pa-qty-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--pa-space-2);
  border: var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-page-bg);
}

@media (hover: hover) {
  .woocommerce-cart .pa-qty-button:hover:not(:disabled)::before {
    background: var(--pa-mint);
  }
}

.woocommerce-cart .pa-qty-button:disabled {
  cursor: not-allowed;
  color: var(--pa-text-muted);
}

/* Remove. A quiet label inside a real 48px target; it says what it does —
   WooCommerce's default is a bare × that a 58-year-old customer has to
   guess at. */
.woocommerce-cart a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: var(--pa-tap-min);
  height: var(--pa-tap-min);
  padding: 0 var(--pa-space-2);
  border: 0;
  border-radius: var(--pa-radius);
  background: none;
  color: var(--pa-charcoal) !important;
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-regular);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  margin-block-start: var(--pa-space-2);
}

/* The approved quiet-action hover: a rectangular Mint surface, never
   WooCommerce's circular red remove badge. Focus keeps the same visible
   treatment and also receives the global focus-visible outline. */
.woocommerce-cart a.remove:hover,
.woocommerce-cart a.remove:focus-visible {
  background: var(--pa-mint);
  color: var(--pa-charcoal) !important;
}

/* --- actions row --------------------------------------------- */

/* The coupon row is removed from Main Cart. td.actions holds only the hidden
   update_cart button (used by assets/js/cart.js to submit quantity and size
   changes) and WordPress nonces, so it collapses to zero height with no
   stray padding, border or spacing. */
.woocommerce-cart td.actions {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  height: 0;
  min-height: 0;
  line-height: 0;
  overflow: hidden;
}

.woocommerce-cart td.actions .coupon {
  display: none !important;
}

/* Auto-updating quantities make this a second, redundant "commit" action
   on the same screen — see the .qty change listener in assets/js/cart.js.
   Hidden rather than removed from the DOM: assets/js/cart.js still submits
   the cart form through this exact button.

   WooCommerce's own small-screen stylesheet carries `.woocommerce table.cart
   td.actions .button { display: block }` at (0,4,2); "table.cart" here
   reaches (0,4,3) so this wins instead, regardless of load order. */
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
  display: none;
}

/* --- totals --------------------------------------------------- */

.woocommerce-cart .cart-collaterals {
  width: 100%;
  margin-block-start: var(--pa-space-6);
}

.woocommerce-cart .cart_totals {
  width: 100%;
  float: none;
}

.woocommerce-cart .cart_totals h2 {
  margin-block-end: var(--pa-space-3);
  font-family: var(--pa-font-heading);
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-semibold);
}

.woocommerce-cart .cart_totals table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
  padding: var(--pa-space-3) 0;
  border-block-end: var(--pa-border);
  font-size: var(--pa-text-base);
  text-align: start;
}

.woocommerce-cart .cart_totals th {
  font-weight: var(--pa-weight-medium);
}

/* Subtotal and final total rows: two-column layout with label on left and amount on right.
   Explicit flex row ensures th (label) remains visible and correctly positioned even on mobile
   where woocommerce-smallscreen.css hides tbody th. */
.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal,
.woocommerce-cart .cart_totals table.shop_table tr.order-total {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--pa-space-3) var(--pa-space-3);
  border-block-end: var(--pa-border);
}

.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
  display: block !important;
  width: auto;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  text-align: start !important;
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-medium);
  color: var(--pa-text);
}

.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal td,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  display: block !important;
  width: auto;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  text-align: end !important;
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-price);
  white-space: nowrap;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total {
  border-block-end: 0;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-bold);
}

.woocommerce-cart .woocommerce-shipping-totals th,
.woocommerce-cart .woocommerce-shipping-totals td {
  padding-block: var(--pa-space-4);
}

.woocommerce-cart .woocommerce-shipping-destination {
  display: none;
}

/* Delivery is chosen at checkout, where the Inside / Outside Dhaka
   selection is made, so the cart shows WooCommerce's own note rather
   than an estimate that would disagree with the real charge. */
.woocommerce-cart .shipping-calculator-button {
  display: none;
}

/* Cart presentation only. WooCommerce retains its delivery radios, rates,
   session and calculations; address collection belongs to checkout. */
.woocommerce-cart .woocommerce-shipping-calculator { display: none; }

.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0;
  margin-block-start: var(--pa-space-4);
}

/* --- floating order CTA & highlight pulse ------------------- */

.pa-cart-floating-cta {
  display: flex;
  justify-content: flex-end;
  padding-inline: var(--pa-space-4);
  padding-block: var(--pa-space-2);
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 160ms ease-out, visibility 160ms ease-out;
}

.pa-cart-floating-cta[hidden],
.pa-cart-floating-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pa-cart-floating-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pa-tap-min);
  padding-inline: var(--pa-space-6);
  padding-block: var(--pa-space-2);
  border: 0;
  border-radius: var(--pa-radius);
  background: var(--pa-btn-primary-bg);
  color: var(--pa-btn-label);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-bold);
  line-height: var(--pa-leading-tight);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: none;
  transition: transform 90ms ease-out, background-color 90ms ease-out;
}

@media (hover: hover) {
  .pa-cart-floating-cta__btn:hover {
    background: var(--pa-btn-active-bg);
    transform: translateY(-1px);
  }
}

.pa-cart-floating-cta__btn:active {
  background: var(--pa-btn-active-bg);
  transform: translateY(1px) scale(0.985);
}

.pa-cart-floating-cta__btn:focus-visible {
  outline: var(--pa-space-1) solid var(--pa-charcoal);
  outline-offset: var(--pa-space-1);
}

/* 4-pulse blink/highlight animation triggered when jumping to the main bottom CTA */
@keyframes pa-cta-blink {
  0%, 100% {
    border-color: var(--pa-btn-primary-bg);
    background-color: var(--pa-btn-primary-bg);
    transform: scale(1);
  }
  50% {
    border-color: var(--pa-charcoal);
    background-color: var(--pa-btn-active-bg);
    transform: scale(1.025);
  }
}

.checkout-button.pa-btn--blink {
  animation: pa-cta-blink 320ms ease-in-out 4;
}

@media (prefers-reduced-motion: reduce) {
  .checkout-button.pa-btn--blink {
    animation: none;
    border-color: var(--pa-charcoal);
  }
}

/* The cart page used to restate the whole checkout button here, at a
   higher specificity than the shared rule and with a SHORTER height
   and a lighter weight — so the one commit action in the store looked
   different on the one page it matters most. The shared Primary rule
   in components/woocommerce.css owns it now; only the wrapper spacing
   above is cart-specific. */

/* --- the totals panel ----------------------------------------- */

/* woocommerce-layout.css lays the collaterals out on a float grid:
   `.cart_totals { float: right; width: 48% }`, unconditionally, at every
   width. On a 390px phone that is a 172px column holding four-digit Bengali
   amounts. WooCommerce's own small-screen sheet used to undo it, and that
   sheet is no longer loaded here — see Pineapple_Assets::trim_unused() —
   so the theme states the layout itself rather than relying on a stylesheet
   it has just removed.

   Not inside a media query: the panel is full width of its column at every
   size. On desktop that column is the 420px one the rule below establishes,
   which is what makes the totals sit under the cart rather than beside it
   in a half-width float. */
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
}

/* Update cart is a full-width action on a phone, not a small right-floated
   one. WooCommerce floats it; a 48px target at the right edge of a card,
   below a coupon field, reads as an afterthought rather than the control
   that commits a quantity change. */
@media (max-width: 899px) {
  .woocommerce-cart table.cart td.actions .button {
    float: none;
    width: 100%;
    margin-block-start: var(--pa-space-3);
  }
}

/* --- desktop -------------------------------------------------- */

@media (min-width: 900px) {
	.woocommerce-cart .pa-content > .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(calc(var(--pa-tap-min) * 7), 2fr);
		gap: var(--pa-space-8);
		align-items: start;
	}

	.woocommerce-cart .pa-content > .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-cart .pa-content > .woocommerce > .cart-empty,
	.woocommerce-cart .pa-content > .woocommerce > .return-to-shop {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .woocommerce-cart-form {
		grid-column: 1;
	}

  .woocommerce-cart .cart-collaterals {
	grid-column: 2;
	max-width: none;
	margin-block-start: 0;
  }

  .woocommerce-cart table.shop_table th {
    padding: var(--pa-space-3);
    font-size: var(--pa-text-sm);
    font-weight: var(--pa-weight-semibold);
    text-align: start;
  }

	.woocommerce-cart table.shop_table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.woocommerce-cart table.shop_table tr.cart_item {
		display: grid;
		grid-template-columns: calc(var(--pa-tap-min) * 2.5) minmax(0, 1fr);
		grid-template-areas:
			"image name"
			"image price"
			"image qty"
			"image size"
			"image remove";
		gap: var(--pa-space-2) var(--pa-space-4);
		padding-block: var(--pa-space-4);
		border-block-end: var(--pa-border);
	}

	.woocommerce-cart table.shop_table tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
	}

	.woocommerce-cart td.product-thumbnail { grid-area: image; }
	.woocommerce-cart td.product-name      { grid-area: name; }
	.woocommerce-cart td.product-quantity  { grid-area: qty; }
	.woocommerce-cart td.product-subtotal  { grid-area: price; }
	.woocommerce-cart td.product-remove    { grid-area: remove; justify-self: start; }
	.woocommerce-cart table.shop_table tr.cart_item td.product-price { display: none; }

  .woocommerce-cart table.shop_table td {
    padding: var(--pa-space-4) var(--pa-space-3);
    border-block-end: var(--pa-border);
  }

	.woocommerce-cart td.product-thumbnail > a {
		display: block;
		width: 100%;
		aspect-ratio: var(--pa-aspect-product);
	}

	.woocommerce-cart td.product-thumbnail img,
	.woocommerce-cart td.product-thumbnail .pa-product__placeholder {
	width: 100%;
	height: 100%;
    aspect-ratio: var(--pa-aspect-product);
    object-fit: cover;
    border-radius: var(--pa-radius);
  }
}

/* Keep WooCommerce's cells and form, but place the size control after quantity
   within the same two-column composition. Image dimensions are unchanged. */
.woocommerce-cart table.shop_table tr.cart_item td.product-name { display: contents; }
.woocommerce-cart .pa-cart-line__title { grid-area: name; }
.woocommerce-cart .pa-cart-size { grid-area: size; min-width: 0; justify-self: start; }