/**
 * Mercado Mayor — Checkout ("Finalizar compra", Woo Blocks Checkout)
 * ---------------------------------------------------------------------------
 * The page is built from `<!-- wp:woocommerce/checkout -->` (see the page's
 * own content in wp-admin), not the classic shortcode/template — WooCommerce
 * renders its markup client-side with stable `.wc-block-*` class names, which
 * is what every selector here targets. Loaded only on is_checkout() — see
 * functions.php.
 */

/* ========================================================================
   1. "ACCESO" LOGIN PROMPT
   ========================================================================
 * Sits next to the "Información de contacto" heading for a guest. Was a bare
 * link with no visual weight of its own — easy to miss, and once clicked it
 * used to strand the customer on My Account instead of back at checkout (see
 * mercado_mayor_login_redirect_to_checkout() in functions.php for that half
 * of the fix; this is only the visual half).
 */
.wc-block-checkout__login-prompt{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-xs) !important;
  font-weight: 600 !important;
  color: var(--mm-accent) !important;
  background: var(--mm-accent-soft);
  border: 1px solid var(--mm-accent-pastel);
  border-radius: var(--mm-radius-pill);
  text-decoration: none !important;
  transition: background-color var(--mm-dur) var(--mm-ease),
              box-shadow var(--mm-dur) var(--mm-ease);
}
.wc-block-checkout__login-prompt::before{
  content: "\f2f6"; /* fa-sign-in-alt */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
}
.wc-block-checkout__login-prompt:hover,
.wc-block-checkout__login-prompt:focus-visible{
  background: var(--mm-accent-pastel);
  box-shadow: var(--mm-shadow-sm);
}

/* ========================================================================
   2. "REALIZAR EL PEDIDO" — the place-order button
   ========================================================================
 * The single most consequential click on the whole site — finalizing a real
 * purchase — was using the exact same compact pastel treatment as a 32px
 * "add to cart" icon on a product card. Same colour family is kept (a large
 * pastel fill with dark ink text is the tier every big button on this site
 * uses; solid --mm-accent is reserved for borders/icons/small text — see the
 * tokens' own comment in b2b-marketplace.css §1), but sized, weighted and
 * lifted for the one action on the page that should read as the most
 * confident. The lock icon is a small trust signal appropriate to "this
 * submits a real payment," and the extra top margin gives it breathing room
 * instead of sitting flush against the notes field above it.
 */
.wc-block-components-checkout-place-order-button{
  /* Overrides the block's own internal flex layout — its default
     `justify-content` spreads children apart (built for an optional spinner
     on one side, label on the other), which pushed the lock icon added
     below to the far left, stranded away from the text next to it. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  margin-top: 22px !important;
  padding: 16px 24px !important;
  font-size: var(--mm-text-md) !important;
  font-weight: 700 !important;
  letter-spacing: -.005em;
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow-accent) !important;
  transition: box-shadow var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur) var(--mm-ease);
}
.wc-block-components-checkout-place-order-button::before{
  content: "\f023"; /* fa-lock */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .85em;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus-visible{
  transform: translateY(-1px);
}

/* ========================================================================
   3. PRODUCT THUMBNAILS IN THE CART / ORDER SUMMARY
   ========================================================================
 * The same image frame §15/§16 of b2b-marketplace.css give the grid and the
 * product page, at thumbnail scale, so a product still looks like itself in
 * the last step before payment. Without it the cart line was the one place a
 * photo sat raw on white with no frame at all.
 *
 * NOTE — this is the one part of the product presentation that could not be
 * checked against a live render: the cart and checkout are WooCommerce Blocks,
 * drawn in the browser rather than in the HTML the server sends, and a
 * signed-out visitor cannot put anything in a cart to draw. The selectors are
 * WooCommerce's own documented block class names, and the declarations are
 * cosmetic, so the downside is limited to the frame not appearing.
 */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img{
  padding: 6px;
  background: var(--mm-surface-alt, #FAFAF9);
  border: 1px solid var(--mm-border, #E5E4E1);
  border-radius: var(--mm-radius-sm, 6px);
  object-fit: contain;
}

/* ========================================================================
   4. THE CART
   ========================================================================
 * Selectors are WooCommerce Blocks' own, read out of
 * plugins/woocommerce/assets/client/blocks/cart.css rather than guessed —
 * the cart is drawn in the browser, so its markup never appears in the HTML
 * the server sends and cannot be inspected the usual way.
 *
 * The default is a bare table: a rule under a header row, a thumbnail the
 * size of a stamp, the product name at body weight beside a truncated
 * description, and the totals in an unbordered column. It works, and it
 * looks like a spreadsheet at the exact moment the customer is deciding to
 * spend money. What follows gives each line room, puts the weight on the
 * things being decided between (product, quantity, price), and turns the
 * totals into the card it should have been.
 */

/* -- Line items --------------------------------------------------------- */

/* The header row's only job is to label two columns. Quieted down so the
   products, not the labels, are what the eye lands on first. */
.wc-block-cart-items__header {
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs) !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm-ink-subtle) !important;
  border-bottom: 1px solid var(--mm-border) !important;
}

.wc-block-cart-items tr {
  border-bottom: 1px solid var(--mm-border) !important;
}

.wc-block-cart-items td {
  padding-top: clamp(18px, 2vw, 26px) !important;
  padding-bottom: clamp(18px, 2vw, 26px) !important;
}

/* The block right-aligns this column with `padding-right: 0`, so every line
   total and the header above them sat flush against the table's own edge. A
   figure pressed into a rule reads as cramped no matter how well set it is. */
.wc-block-cart-items td.wc-block-cart-item__total,
.wc-block-cart-items th.wc-block-cart-items__header-total {
  padding-right: clamp(16px, 1.8vw, 24px) !important;
}

/* Thumbnails at a size worth looking at, in the same frame the shop grid and
   the product page use, so a product looks like itself here too. */
/* The cell has to be widened alongside the image: WordPress's global
   `img { max-width: 100% }` clamps the thumbnail to whatever the table gives
   the column, so setting only the image's width left it at the old ~75px no
   matter what number was asked for. */
td.wc-block-cart-item__image {
  width: 100px !important;
}

.wc-block-cart-item__image img {
  width: 84px !important;
  height: 84px !important;
  max-width: none !important;
  padding: 7px;
  background: var(--mm-surface-alt, #FAFAF9);
  border: 1px solid var(--mm-border, #E5E4E1);
  border-radius: var(--mm-radius, 8px);
  object-fit: contain;
}

/* Qualified with `a`: style.css carries `a.wc-block-components-product-name
   { font-size: 22px !important }`, and at equal importance the longer
   selector wins — so the bare class here was being ignored and the name
   stayed at a size that dwarfed everything else on the line. */
a.wc-block-components-product-name,
.wc-block-components-product-name {
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-md) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--mm-ink) !important;
  text-decoration: none !important;
}

.wc-block-components-product-name:hover {
  color: var(--mm-accent) !important;
}

/* The short description is truncated to a few words by the block, which makes
   it a fragment rather than information — and the customer has already read
   the product page to get here. Hidden, so the line is product, seller,
   quantity, price and nothing else. */
.wc-block-components-product-metadata__description {
  display: none !important;
}

/* "Vendedor: X" — the marketplace's own line. Kept, because who you are
   buying from matters here, but set as a credit rather than as body copy. */
.wc-block-components-product-metadata {
  margin-top: 4px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs) !important;
  color: var(--mm-ink-subtle) !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price {
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  color: var(--mm-ink-muted) !important;
}

/* -- Quantity stepper --------------------------------------------------- */

/* The block sizes this to fill its column, which on a wide cart row stretched
   a three-character control to a quarter of the table. Capped to the width it
   actually needs. */
.wc-block-components-quantity-selector {
  width: 116px !important;
  min-width: 0 !important;
  max-width: 116px !important;
  margin-top: 12px !important;
  overflow: hidden;
  background: var(--mm-surface, #fff);
  border: 1px solid var(--mm-border-strong, #D4D3CF) !important;
  border-radius: var(--mm-radius-pill, 999px) !important;
}

/* The block draws its own outline with a pseudo-element; the border above
   replaces it, and leaving both gives a double ring. */
.wc-block-components-quantity-selector::after {
  display: none !important;
}

.wc-block-components-quantity-selector__input {
  min-width: 40px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  font-weight: 600 !important;
  color: var(--mm-ink) !important;
}

.wc-block-components-quantity-selector__button {
  font-size: 16px !important;
  color: var(--mm-ink-muted) !important;
  transition: background-color .18s var(--mm-ease, ease), color .18s var(--mm-ease, ease);
}

.wc-block-components-quantity-selector__button:hover {
  color: var(--mm-accent, #D23D2D) !important;
  background: var(--mm-accent-soft, #FBEEEC) !important;
}

.wc-block-cart-item__remove-link {
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs) !important;
  color: var(--mm-ink-subtle) !important;
  text-decoration: none !important;
}

.wc-block-cart-item__remove-link:hover {
  color: var(--mm-accent, #D23D2D) !important;
  text-decoration: underline !important;
}

/* -- Line total and the discount note ----------------------------------- */

.wc-block-cart-item__total .wc-block-components-product-price__value {
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-md) !important;
  font-weight: 700 !important;
  color: var(--mm-ink) !important;
}

/* "Ahorra $30.000" ships as a solid red block — a warning colour on good
   news, and the loudest thing in a cart whose job is to feel calm. Same soft
   accent pill the rest of the site uses for a positive note. */
/* Set at 11px with a hairline border it was legible in theory and unreadable
   in practice — a pale outline around type too small to register, sitting
   under a 15px total. Bigger, heavier, and in the darker tier of the accent
   (about 6:1 on this background rather than 4.4:1). The border goes: at this
   size the fill alone defines the pill, and the outline only added noise. */
/* Scoped through `.wp-block-woocommerce-cart` and prefixed with `body`
   because style.css carries
   `.wp-block-woocommerce-cart .wc-block-components-product-badge
    { color: #fff !important; padding: 10px !important }`.
   WooCommerce renders this badge with *both* classes — the base
   `product-badge` and the `sale-badge` modifier — so that two-class selector
   was beating the single-class one used here: the soft background applied,
   the white text did not get replaced, and white on pale pink is why the
   amount looked erased rather than quiet. Matching its length and adding an
   element settles it. */
body .wp-block-woocommerce-cart .wc-block-components-sale-badge,
body .wp-block-woocommerce-cart .wc-block-components-product-badge,
.wc-block-components-sale-badge,
.wc-block-components-product-sale-badge {
  /* Kept on one line: the column is narrow and "Ahorra $ 30.000" was breaking
     across two, which reads as a two-line block of colour rather than a note. */
  white-space: nowrap !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  padding: 5px 12px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-xs) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0;
  text-transform: none !important;
  color: var(--mm-accent-hover, #AA2418) !important;
  background: var(--mm-accent-soft, #FBEEEC) !important;
  border: 0 !important;
  border-radius: var(--mm-radius-pill, 999px) !important;
}

/* -- Totals sidebar ----------------------------------------------------- */

.wc-block-cart__sidebar .wc-block-components-sidebar {
  padding: clamp(20px, 2.2vw, 26px) !important;
  background: var(--mm-surface, #fff);
  border: 1px solid var(--mm-border, #E5E4E1);
  border-radius: var(--mm-radius-lg, 12px);
  box-shadow: var(--mm-shadow-sm);
}

.wc-block-cart__totals-title {
  padding-bottom: 12px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs) !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm-ink-subtle) !important;
}

.wc-block-components-totals-item__label {
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  color: var(--mm-ink-muted) !important;
}

.wc-block-components-totals-item__value {
  font-family: var(--mm-font-ui) !important;
  font-weight: 600 !important;
  color: var(--mm-ink) !important;
}

/* The figure the whole page exists to show. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--mm-ink) !important;
}

.wc-block-components-panel__button {
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  color: var(--mm-ink-muted) !important;
}

/* -- Checkout button ---------------------------------------------------- */

.wc-block-cart__submit-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: 100% !important;
  margin-top: 6px !important;
  padding: 16px 22px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-md) !important;
  font-weight: 700 !important;
  color: var(--mm-ink) !important;
  background: var(--mm-accent-pastel, #EFA79F) !important;
  border: 0 !important;
  border-radius: var(--mm-radius, 8px) !important;
  box-shadow: var(--mm-shadow-accent) !important;
  transition: background-color .18s var(--mm-ease, ease), transform .18s var(--mm-ease, ease);
}

/* The same lock the place-order button carries, for the same reason: this is
   the step where money starts moving. */
.wc-block-cart__submit-button::before {
  content: "\f023";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .85em;
}

.wc-block-cart__submit-button:hover {
  color: var(--mm-ink) !important;
  background: var(--mm-accent-pastel-hover, #E8938A) !important;
  transform: translateY(-1px);
}