/* ============================================================
   OSJ Sharp — Cart (WooCommerce Cart block)
   ------------------------------------------------------------
   There is no cart/cart.php in this theme and there should not be:
   the Cart page holds the Cart block, whose layout comes from block
   attributes plus this file (BUILD-HANDOFF §1).

   Everything below targets stable public block classnames. Structural
   details will follow the block's markup rather than the comp exactly —
   that is the accepted trade.
   ============================================================ */

.woocommerce-cart .osj-page-title { margin-bottom: var(--space-2); }

.wp-block-woocommerce-cart {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-9);
}

/* --- Two-column shell: items | sticky summary ---------------------- */
.wc-block-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
/*
 * Both columns must fill the grid cells the theme gave them.
 *
 * The grid resolves correctly (812px + 380px at 1440), but WooCommerce's own
 * rules leave these two sizing to their content, so the totals column collapsed
 * to 133px of a 380px cell and read as a thin strip pinned to the left. Grid
 * items do not stretch here because Woo sets an explicit width on them, so
 * saying 100% is the fix rather than touching justify-items.
 */
/* Scoped to the block wrapper: this stylesheet loads before wc-blocks-style.css,
   so a bare class ties on specificity and loses on source order. */
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-components-main {
  min-width: 0;
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  padding: 0;
}
.wp-block-woocommerce-cart .wc-block-cart-items { width: 100%; }
.wc-block-cart__sidebar,
.wc-block-components-sidebar {
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 0;
}

@media (min-width: 1001px) {
  .wc-block-cart { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
  .wc-block-cart__sidebar { position: sticky; top: var(--sticky-offset); }
}

/* --- Line items ---------------------------------------------------- */
.wc-block-cart-items { border: none; }
.wc-block-cart-items__header {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.wc-block-cart-items__row {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: none;
}
.wc-block-cart-item__image img {
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--surface-sunken);
}
.wc-block-components-product-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-strong);
}
.wc-block-components-product-name:hover { color: var(--text-strong); }
.wc-block-components-product-metadata {
  font-size: 13.5px;
  color: var(--text-body);
}
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--price);
}

/*
 * Per-line lead time. The comp shows it on every row; the block has no slot
 * for it, so it is generated here from the same option. Kept in one place via
 * the custom property, which inc/woocommerce-blocks.php could set from PHP if
 * the lead time ever needs to vary per product.
 */
.wc-block-cart-item__wrap .wc-block-components-product-metadata::after {
  content: var(--osj-lead-time, "");
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-link);
}

/* --- Quantity stepper ---------------------------------------------- */
.wc-block-components-quantity-selector {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  overflow: hidden;
}
.wc-block-components-quantity-selector::after { display: none; }
.wc-block-components-quantity-selector__input {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  color: var(--text-strong);
}
.wc-block-components-quantity-selector__button {
  color: var(--text-body);
  font-size: 17px;
}
.wc-block-components-quantity-selector__button:hover { background: var(--surface-sunken); color: var(--text-strong); }

.wc-block-cart-item__remove-link {
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: underline;
}
.wc-block-cart-item__remove-link:hover { color: var(--danger); }

/* --- Order summary -------------------------------------------------- */
.wc-block-cart__sidebar .wc-block-components-sidebar-layout,
.wp-block-woocommerce-cart-order-summary-block {
  padding: 26px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.wc-block-components-totals-item {
  font-size: 14.5px;
  color: var(--text-body);
}
.wc-block-components-totals-item__value {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--border-subtle);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 15px;
  text-transform: uppercase;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.5rem;
}

/* --- Buttons -------------------------------------------------------- */
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h-lg);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--text-on-brand);
  /* Woo renders this as an <a>, so it inherits the global link underline. It is
     a button by every other cue; the underline just makes it look like a
     mis-styled link. */
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-out);
}
/*
 * PayPal's "Starting at $x/mo" messaging renders as .ppcp-messages and lands
 * hard against the Proceed to checkout button — measured at y=604 with the
 * button at y=610, so they were touching. It is injected by the gateway rather
 * than the theme, so the gap has to be added here.
 */
.wc-block-cart__sidebar .ppcp-messages,
.wc-block-cart__submit-container + .ppcp-messages {
  display: block;
  margin-block: var(--space-4);
}
.wc-block-cart__sidebar .wc-block-cart__submit-container { margin-top: var(--space-4); }

.wc-block-cart__submit-button:hover,
.wc-block-components-button:not(.is-link):hover {
  background: var(--brand-hover);
  color: var(--text-on-brand);
}
.wc-block-components-button:not(.is-link):focus-visible { box-shadow: var(--focus-glow); }

.wc-block-components-button.is-link {
  color: var(--text-link);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Coupon --------------------------------------------------------- */
.wc-block-components-totals-coupon .wc-block-components-text-input input {
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: var(--font-body);
  font-size: 14px;
}
.wc-block-components-totals-coupon__button {
  border: 1px solid var(--border-strong) !important;
  background: transparent !important;
  color: var(--text-strong) !important;
  font-size: 13.5px !important;
}

/* --- Cross-sells ---------------------------------------------------- */
.wp-block-woocommerce-cart-cross-sells-block { margin-top: var(--space-9); }
.wc-block-cart__cross-sells-title,
.wp-block-woocommerce-cart-cross-sells-block h2 {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--weight-ultra);
  font-size: 1.7rem;
  letter-spacing: -0.024em;
  text-transform: uppercase;
  color: var(--text-strong);
}

/* --- Mobile ---------------------------------------------------------
 *
 * Below 761px WooCommerce pins the checkout button to the bottom of the
 * viewport itself (.wc-block-cart__submit-container--sticky, position: fixed)
 * and unpins it once the page bottom is reached. That behaviour is right, so
 * this only dresses it to match the PDP buy bar: the same translucent panel,
 * the same hairline, and the same home-indicator clearance.
 */
@media (max-width: 760px) {
  /* Scoped to the block wrapper on purpose. This stylesheet is enqueued ahead
     of wc-blocks-style.css, so a bare .wc-block-cart__submit-container--sticky
     ties on specificity and loses on source order — which silently dropped the
     safe-area padding while letting the border and blur through. */
  .wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky {
    padding: 12px var(--gutter-mobile);
    /* env() clears the iPhone home indicator; it resolves to 0 elsewhere. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(251, 247, 240, 0.95);
    backdrop-filter: var(--blur-panel);
    -webkit-backdrop-filter: var(--blur-panel);
    border-top: 1px solid var(--border-subtle);
    box-shadow: none;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky {
      background: var(--surface-page);
    }
  }

  /* Woo prints the unit price under the title and the line total on the right,
     and at quantity 1 they are the same number twice. The quantity lives in
     React state, not in an attribute, so CSS cannot tell the two cases apart —
     hiding the unit price would also hide it at quantity 3, where it is the
     only thing explaining the total. Demote it instead, so the line total is
     unambiguously the number being read. */
  .wc-block-cart-item__prices .wc-block-components-product-price {
    font-size: var(--text-2xs);
    color: var(--text-muted);
  }

  /* Titles are already the tap target for the row; the underline is noise at
     this size and costs a line of height on every wrap. */
  .wc-block-cart-items__row .wc-block-components-product-name { text-decoration: none; }
}

/* --- Empty cart ----------------------------------------------------- */
.wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  font-weight: var(--weight-ultra);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}