/* --- Cart -----------------------------------------------------------------
   The cart is the WooCommerce Cart *block*, not the shortcode, so every
   selector here is a wc-block-* class name. Classic-cart CSS would be inert.

   Deliberately its own stylesheet rather than a widened is_product()
   condition, for the reason css/shop.css already documents: `.product p` in
   product.css would land on every cross-sell card, which carries the
   `product` class, and outrank the utilities on it.
   ------------------------------------------------------------------------ */

/* --- Page rhythm ----------------------------------------------------------
   129px of empty canvas sits between the page title's rule and the PRODUCT
   header (measured: h1 bottom 135px, first table header top 264px). On the
   one page where the shopper is deciding whether to continue, that pushes the
   first line item and the checkout button toward the fold.

   Two sources are in reach: the template's own 32px of main padding and the
   32px top margin WooCommerce Blocks puts on .wc-block-cart. The remainder is
   the page header block's 32px bottom margin plus its divider's 24px, both
   Tailwind utilities in the shared template, and reaching into those would be
   the site-wide change this file exists to avoid.

   Zeroing the two that are in reach leaves the divider's own 24px as the
   whole separation and lands the table header 65px below the title instead of
   129px. */
.woocommerce-cart .site-main {
  padding-top: 0;
}

.woocommerce-cart .wc-block-cart {
  margin-top: 0;
}

/* --- Section headers ------------------------------------------------------
   The table header ("PRODUCT" / "TOTAL") and the cross-sells heading are the
   same rank and have to read as one system. The table header is the
   reference: 1.2rem, 500, uppercase, #222.

   font-size is the one property here that needs !important, and it is not
   negotiable: WordPress emits its preset size classes from global styles as
   `.has-large-font-size { font-size: var(--wp--preset--font-size--large)
   !important }`, so no amount of specificity reaches it. Everything else on
   this rule wins on specificity alone (0,2,1 against the preset's 0,1,0). */
.wp-block-woocommerce-cart-cross-sells-block h2.wp-block-heading {
  font-size: 1.2rem !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #222;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(34, 34, 34, 0.2);
}

/* The block starts 1px below the line-items table's bottom border, so the
   heading currently sits on the rule. */
.wp-block-woocommerce-cart-cross-sells-block {
  margin-top: 56px;
}

/* --- Line items -----------------------------------------------------------
   Three prices compete on every row at 1.2rem: the unit price under the name,
   the row TOTAL, and the sidebar subtotal. The row TOTAL is the number the
   shopper is checking, so it keeps the weight and the unit price steps down
   to a caption. */
.wc-block-cart-items .wc-block-components-product-name {
  font-size: 16px;
  line-height: 1.35;
}

.wc-block-cart-items .wc-block-cart-item__prices,
.wc-block-cart-items
  .wc-block-cart-item__prices
  .wc-block-components-product-price__value {
  font-size: 13px;
  color: #666;
}

.wc-block-cart-items .wc-block-cart-item__prices {
  margin-top: 2px;
}

.wc-block-cart-items .wc-block-components-product-metadata__description {
  font-size: 13px;
  line-height: 1.5;
  color: #666;
}

/* A bundle's contents are listed as their own rows immediately below, so the
   parent's excerpt repeats what the next three rows already say and costs the
   row two lines. Scoped to .is-bundle so a plain line item keeps its
   description. */
.wc-block-cart-items__row.is-bundle
  .wc-block-components-product-metadata__description {
  display: none;
}

/* --- Quantity -------------------------------------------------------------
   107x42 with a 1.2rem numeral, for a value that is almost always 1. */
.wc-block-cart-items .wc-block-components-quantity-selector {
  width: 92px;
  min-height: 32px;
  border-radius: 3px;
  border-color: rgba(26, 26, 26, 0.22);
}

.wc-block-cart-items .wc-block-components-quantity-selector__input {
  width: 32px;
  height: 30px;
  min-height: 30px;
  font-size: 14px;
}

.wc-block-cart-items .wc-block-components-quantity-selector__button {
  min-height: 30px;
  font-size: 15px;
  color: #666;
}

.wc-block-cart-items .wc-block-components-quantity-selector:focus-within {
  border-color: #9f0712;
}

/* --- Bundle contents ------------------------------------------------------
   Product Bundles positions a component thumbnail out of its own cell: the
   anchor is width:0, the img is position:absolute; left:100% with
   margin-left:16px at 50px wide, and the product cell is indented 66px.
   16 + 50 = 66, so the thumbnail lands flush against the title with zero gap
   every time, by construction rather than by accident.

   The plugin scopes those rules by cart width class, so the override has to
   be repeated below for the narrow layouts, where it switches to padding-left
   on the wrap instead of margin-left on the image. */
.is-large
  table.wc-block-cart-items
  .wc-block-cart-items__row.is-bundled__indented
  .wc-block-cart-item__wrap {
  padding-left: 84px;
}

.is-large
  table.wc-block-cart-items
  .wc-block-cart-items__row.is-bundled__indented
  td.wc-block-cart-item__image
  img {
  width: 48px;
  height: 48px;
  margin-left: 18px;
  padding: 3px;
  object-fit: contain;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 3px;
}

/* A rail down the left of the component rows, so they read as contents of the
   bundle above rather than as three unrelated line items. The cell is already
   position:relative (the plugin sets it), and the plugin's own connector uses
   ::after, so ::before is free. */
.is-large
  table.wc-block-cart-items
  .wc-block-cart-items__row.is-bundled__indented
  td.wc-block-cart-item__image::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e5e5e5;
}

/* Stop the rail at the last component's thumbnail rather than running it into
   the section below. */
.is-large
  table.wc-block-cart-items
  .wc-block-cart-items__row.is-bundled__last
  td.wc-block-cart-item__image::before {
  bottom: auto;
  height: 44px;
}

/* The narrow layouts need the image box but not the indent. The zero-gap
   arithmetic above is specific to .is-large: it is the only width class where
   the plugin adds margin-left to the image, and 16 + 50 happens to equal the
   66px indent. .is-medium and .is-small leave the image at the cell edge, so
   the plugin's own 66px already clears it. */
.is-medium
  table.wc-block-cart-items
  .wc-block-cart-items__row.is-bundled__indented
  td.wc-block-cart-item__image
  img,
.is-small
  table.wc-block-cart-items
  .wc-block-cart-items__row.is-bundled__indented
  td.wc-block-cart-item__image
  img {
  width: 44px;
  height: 44px;
  padding: 3px;
  object-fit: contain;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 3px;
}

/* Component quantities are fixed. Product Bundles disables the +/- buttons,
   and the server rejects a typed value: entering 3 and firing change leaves
   the total unmoved and the field reverts to 1 on reload. A 92px stepper that
   silently refuses every interaction is worse than no control, so the fixed
   count renders as text.

   The row is laid out as one line rather than three stacked fragments. Name,
   variation and count belong together on a contents list, and a 12.5px grey
   "x 1" sitting on its own 8px under the title read as a stray artifact
   rather than as a quantity. The price cell is display:none on these rows
   (is-bundled__price_hidden), so it contributes no gap.

   pointer-events stops the mouse but not the keyboard. Making the input
   properly inert needs readonly + tabindex="-1", which is a JS change, not a
   CSS one; tracked in todo.md. */
/* The leading `table` and the fourth class are both load-bearing. WooCommerce
   Blocks stacks this wrap with
   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap
    { display: flex; flex-direction: column; align-items: flex-start; gap: 4px }`
   at 0,3,1. Matching it with only the three classes scores 0,3,0 and the row
   silently stays stacked, which is exactly what it did on the first pass. */
table.wc-block-cart-items
  .wc-block-cart-items__row.is-bundled
  .wc-block-cart-item__wrap {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.wc-block-cart-items__row.is-bundled .wc-block-cart-item__quantity {
  margin: 0;
}

/* baseline, not center: an input's baseline is its own text baseline, which is
   the only alignment that puts the multiplication sign and the digit on the
   same line. Centring two boxes of different heights leaves the sign riding
   high and reading as a superscript. */
.wc-block-cart-items__row.is-bundled .wc-block-components-quantity-selector {
  width: auto;
  min-height: 0;
  border: 0;
  pointer-events: none;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.4;
  color: #666;
}

.wc-block-cart-items__row.is-bundled
  .wc-block-components-quantity-selector__button {
  display: none;
}

.wc-block-cart-items__row.is-bundled
  .wc-block-components-quantity-selector::before {
  content: "\00d7";
  margin-right: 2px;
  color: inherit;
}

/* font: inherit rather than a font-size of its own, so the digit cannot drift
   away from the sign beside it when either is retuned. */
.wc-block-cart-items__row.is-bundled
  .wc-block-components-quantity-selector__input {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}

/* --- Cross-sells ---------------------------------------------------------- */
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
  text-align: left;
}

/* Product photography on this catalogue is shot on white at mixed aspect
   ratios, so a raw <img> gives every card a different silhouette. */
.wp-block-cart-cross-sells-product__product-image img {
  aspect-ratio: 1;
  padding: 12px;
  object-fit: contain;
  background: #fafafa;
  border-radius: 4px;
}

.wp-block-cart-cross-sells-product__product-title {
  margin: 12px 0 4px;
  font-size: 15px;
  font-weight: 500;
}

.wp-block-cart-cross-sells-product__product-price {
  font-size: 14px;
  color: #1a1a1a;
}

/* Secondary, not primary. The one red button on this page is Proceed to
   Checkout; a second red button of the same weight competes with it while the
   shopper is scrolling the item list.

   All three of the wrapper's classes are named on purpose. WooCommerce Blocks
   zeroes the border with
   `.wp-block-button.wc-block-components-product-button
    .wc-block-components-product-button__button { border-style: none }`,
   which scores 0,3,0; matching it with only the cross-sell class scores 0,2,0
   and the border silently never appears. Adding the other two takes this to
   0,4,0 and wins outright rather than tying on source order, which is what
   !important would otherwise have been for.

   The background needs none of that: it comes from
   `:root :where(.wp-element-button, .wp-block-button__link)`, and :where()
   contributes no specificity. */
.wp-block-button.wc-block-components-product-button.wp-block-cart-cross-sells-product__product-add-to-cart
  .wc-block-components-product-button__button {
  width: 100%;
  padding: 9px 18px;
  border: 1px solid #9f0712;
  border-radius: 3px;
  background: transparent;
  color: #9f0712;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wp-block-button.wc-block-components-product-button.wp-block-cart-cross-sells-product__product-add-to-cart
  .wc-block-components-product-button__button:hover,
.wp-block-button.wc-block-components-product-button.wp-block-cart-cross-sells-product__product-add-to-cart
  .wc-block-components-product-button__button:focus {
  background: #9f0712;
  color: #ffffff;
}