/**
 * Stage 13 — Minimal Cart line-total presentation.
 *
 * Presentation only. WooCommerce remains authoritative for quantity and totals.
 */

/* Remove the duplicate per-line subtotal column from the visual layout. The
 * cart summary sidebar remains the single place for cart-wide subtotal/totals.
 * Product rows can therefore use the full card width without a second badge. */
body.woocommerce-cart .wc-block-cart-items th:last-child,
body.woocommerce-cart .wc-block-cart-item__total {
  display: none !important;
}

body.woocommerce-cart .wc-block-cart-item__product {
  width: 100% !important;
  max-width: none !important;
  padding-right: clamp(1.25rem, 3vw, 2.25rem) !important;
}

/* The product name is the primary piece of information inside each Cart row.
 * It should read clearly above price, quantity math, description and technical
 * metadata without overpowering the page title. */
body.woocommerce-cart .wc-block-components-product-name {
  display: block !important;
  margin-bottom: .52rem !important;
  color: var(--ecms-ink, #111315) !important;
  font-size: clamp(1.16rem, 1.15vw, 1.28rem) !important;
  font-weight: 850 !important;
  line-height: 1.28 !important;
  letter-spacing: -.012em !important;
}

/* Keep the native unit price as the anchor. Only when quantity is greater than
 * one, append a compact explanation beside it: "$19.99 × 2 = $39.98". */
body.woocommerce-cart .wc-block-cart-item__prices {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: .28rem .5rem !important;
  width: 100% !important;
}

/* The multiplication is explanatory, not a second headline. Keep the math
 * noticeably quieter than both monetary values and give the final line amount
 * a little more breathing room so the expression scans immediately. */
body.woocommerce-cart .ecms-cart-line-inline-total {
  display: inline-flex;
  align-items: baseline;
  gap: .36rem;
  margin: 0 0 0 .08rem;
  color: #747c82;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

body.woocommerce-cart .ecms-cart-line-inline-total__math {
  color: #7b8389;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .005em;
}

body.woocommerce-cart .ecms-cart-line-inline-total__amount {
  margin-left: .12rem;
  color: #22272a;
  font-size: .91rem;
  font-weight: 850;
  line-height: 1.15;
}

/* The piece count belongs in the technical tier, after diameter, instead of in
 * the descriptive sentence. Match the existing Calibre / Peso / Diámetro row. */
body.woocommerce-cart .ecms-cart-piece-count {
  display: inline-flex !important;
  align-items: baseline;
  margin: 0 !important;
  color: #4d555b !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

body.woocommerce-cart .ecms-cart-piece-count::before {
  content: '/';
  margin-right: .8rem;
  color: #4d555b;
  font-weight: 700;
}

/* Product-image placement is structural rather than transform-based. The image
 * cell uses the same top padding as the product cell, so the top edge of the
 * image aligns with the top of the product title. Extra left padding moves the
 * thumbnail clearly toward the information column while preserving a clean gap. */
body.woocommerce-cart .wc-block-cart-item__image {
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
  padding-top: clamp(1.15rem, 2.3vw, 1.6rem) !important;
  padding-right: 0 !important;
  padding-bottom: clamp(1.15rem, 2.3vw, 1.6rem) !important;
  padding-left: 4rem !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
}

body.woocommerce-cart .wc-block-cart-item__image > a {
  display: block !important;
  width: 136px !important;
  height: 136px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  transform: none !important;
}

body.woocommerce-cart .wc-block-cart-item__image img {
  display: block !important;
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
  height: 136px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 1px solid var(--ecms-commerce-border, #dfe3e5) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* Give each cart item its own visual row without turning every product into a
 * separate card. The inset divider is intentionally subtle and uses the
 * whitespace already present between rows so the cart stays clean. */
body.woocommerce-cart .wc-block-cart-items tbody tr:not(:last-child) .wc-block-cart-item__product {
  border-bottom: 1px solid #e2e6e8 !important;
  padding-bottom: clamp(1.35rem, 2.2vw, 1.75rem) !important;
}

body.woocommerce-cart .wc-block-cart-items tbody tr + tr .wc-block-cart-item__product {
  padding-top: clamp(1.35rem, 2.2vw, 1.75rem) !important;
}

/* Cart simplification: keep PayPal available at Checkout, but remove its
 * accelerated-payment promo, Pay Later copy and express button from Cart.
 * After Total estimado, the only action should be the standard red checkout CTA. */
body.woocommerce-cart .wc-block-cart__payment-options,
body.woocommerce-cart .wc-block-components-express-payment,
body.woocommerce-cart .wc-block-components-express-payment-continue-rule,
body.woocommerce-cart .wc-block-components-express-payment-continue-rule--cart,
body.woocommerce-cart .wc-block-cart__sidebar [data-pp-message],
body.woocommerce-cart .wc-block-cart__sidebar .ppcp-messages,
body.woocommerce-cart .wc-block-cart__sidebar .ppcp-paylater-message {
  display: none !important;
}

/* WooCommerce already renders the separator immediately after Total estimado.
 * Do not add a second line around the submit wrappers; just give the CTA clean
 * breathing room below that single native divider. */
body.woocommerce-cart .wc-block-cart__submit {
  margin-top: 1.05rem !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

body.woocommerce-cart .wc-block-cart__submit-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 960px) and (min-width: 768px) {
  body.woocommerce-cart .wc-block-cart-item__image {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
    padding-left: 2rem !important;
  }
}

@media (max-width: 767px) {
  body.woocommerce-cart .wc-block-cart-item__product {
    padding-right: 1rem !important;
  }

  body.woocommerce-cart .wc-block-components-product-name {
    font-size: 1.08rem !important;
    line-height: 1.3 !important;
  }

  body.woocommerce-cart .ecms-cart-line-inline-total {
    gap: .3rem;
    font-size: .68rem;
  }

  body.woocommerce-cart .ecms-cart-line-inline-total__math {
    font-size: .68rem;
  }

  body.woocommerce-cart .ecms-cart-line-inline-total__amount {
    font-size: .84rem;
  }

  body.woocommerce-cart .ecms-cart-piece-count::before {
    margin-right: .6rem;
  }

  body.woocommerce-cart .wc-block-cart-item__image {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    padding-top: 1rem !important;
    padding-right: 0 !important;
    padding-bottom: 1rem !important;
    padding-left: .75rem !important;
  }

  body.woocommerce-cart .wc-block-cart-item__image > a,
  body.woocommerce-cart .wc-block-cart-item__image img {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    border-radius: 13px !important;
  }

  body.woocommerce-cart .wc-block-cart-item__image > a {
    transform: none !important;
  }

  body.woocommerce-cart .wc-block-cart-items tbody tr:not(:last-child) .wc-block-cart-item__product {
    padding-bottom: 1.15rem !important;
  }

  body.woocommerce-cart .wc-block-cart-items tbody tr + tr .wc-block-cart-item__product {
    padding-top: 1.15rem !important;
  }
}

/* Final optical vertical alignment: client screenshots bracketed the correct
 * position between the structural baseline and the previous +14px offset.
 * A +7px desktop/tablet offset places the image border on the same horizontal
 * line as the visible top of the product-title glyphs while preserving size
 * and horizontal placement. */
@media (min-width: 768px) {
  body.woocommerce-cart .wc-block-cart-item__image {
    padding-top: calc(clamp(1.15rem, 2.3vw, 1.6rem) + 7px) !important;
  }
}

@media (max-width: 767px) {
  body.woocommerce-cart .wc-block-cart-item__image {
    padding-top: calc(1rem + 3px) !important;
  }
}


/* Stage 13 mobile cart row repair.
 * WooCommerce Blocks' table-cell layout lets the thumbnail overlap the product
 * title at narrow widths. Convert each cart item row into an explicit two-column
 * grid: fixed thumbnail + flexible product content. All product information
 * remains in the content column and each row owns its separator. */
@media (max-width: 767px) {
  body.woocommerce-cart .wc-block-cart-items tbody {
    display: block !important;
    width: 100% !important;
  }

  body.woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row,
  body.woocommerce-cart .wc-block-cart-items tbody tr {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    column-gap: 1rem !important;
    align-items: start !important;
    width: 100% !important;
    padding: 1.15rem 1rem 1.25rem !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-cart .wc-block-cart-items tbody tr + tr {
    border-top: 1px solid #e2e6e8 !important;
  }

  body.woocommerce-cart .wc-block-cart-item__image {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.woocommerce-cart .wc-block-cart-item__image > a,
  body.woocommerce-cart .wc-block-cart-item__image img {
    display: block !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 13px !important;
    transform: none !important;
  }

  body.woocommerce-cart .wc-block-cart-item__product {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
  }

  body.woocommerce-cart .wc-block-cart-items tbody tr + tr .wc-block-cart-item__product {
    padding-top: 0 !important;
  }

  body.woocommerce-cart .wc-block-components-product-name {
    display: block !important;
    width: 100% !important;
    margin: 0 0 .45rem !important;
    font-size: 1.02rem !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  body.woocommerce-cart .wc-block-cart-item__prices {
    margin-bottom: .7rem !important;
  }

  body.woocommerce-cart .wc-block-components-product-metadata {
    width: 100% !important;
    max-width: none !important;
    margin-top: .45rem !important;
    font-size: .8rem !important;
  }

  body.woocommerce-cart .wc-block-components-product-details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .25rem .45rem !important;
    width: 100% !important;
  }

  body.woocommerce-cart .ecms-cart-piece-count::before {
    margin-right: .45rem !important;
  }

  body.woocommerce-cart .wc-block-components-quantity-selector {
    margin-top: .8rem !important;
  }
}


/* Configured Cart product-title navigation. Managed configuration children are
 * hidden from catalog, so WooCommerce Blocks can render the visible title as a
 * span. JS gives that span link semantics and navigation; style it exactly like
 * the native product title with a clear pointer/focus affordance. */
body.woocommerce-cart .wc-block-components-product-name.ecms-cart-product-link {
  cursor: pointer !important;
  text-decoration: none !important;
}

body.woocommerce-cart .wc-block-components-product-name.ecms-cart-product-link:hover,
body.woocommerce-cart .wc-block-components-product-name.ecms-cart-product-link:focus-visible {
  color: var(--ecms-accent-dark, #a50f16) !important;
  outline: none !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .16em !important;
}