/* Ümba — carrito y finalizar compra (bloques de WooCommerce con la identidad de marca).
   Se carga solo en /carrito/ y /finalizar-compra/ (ver inc/umba-shop.php). */

body.woocommerce-cart, body.woocommerce-checkout {
  --umba-azul: #343D57;
  --umba-terracota: #E2725B;
  --umba-terracota-osc: #d9664f;
  --umba-verde: #C9D395;
  --umba-borde: #e4e0dd;
  --umba-suave: #F7F5F4;
  --umba-gris: #6b6f7d;
  --umba-head: var(--font-heading, 'Nunito', sans-serif);
  --umba-text: var(--font-primary, 'Inter', sans-serif);
}

/* ---------------------------------------------------------------- tipografía base */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--umba-text);
  color: var(--umba-azul);
}
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary .wc-block-components-panel__button {
  font-family: var(--umba-head) !important;
  font-weight: 800 !important;
  color: var(--umba-azul) !important;
  letter-spacing: -0.01em;
}
.wc-block-components-checkout-step__title { font-size: 20px !important; }
.wc-block-cart__totals-title { font-size: 13px !important; letter-spacing: .1em; }
.wc-block-components-checkout-step__description { color: var(--umba-gris); }

/* nombre y precio de cada línea */
.wc-block-components-product-name {
  font-family: var(--umba-head);
  font-weight: 800;
  font-size: 17px;
  color: var(--umba-azul) !important;
  text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--umba-terracota) !important; }
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description { color: var(--umba-gris); font-size: 14px; }
.wc-block-components-product-price,
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
  font-family: var(--umba-text);
  color: var(--umba-azul);
}

/* ---------------------------------------------------------------- carrito: imagen mayor */
/* La imagen crece hasta que su borde inferior coincide con el del selector de cantidad;
   por eso la descripción se limita a dos líneas: así todas las filas miden lo mismo. */
.wc-block-cart-item__image { width: 136px !important; padding-right: 20px !important; }
.wc-block-cart-item__image a { display: block; }
.wc-block-cart-item__image img {
  width: 116px !important;
  height: 116px !important;
  max-width: none;
  object-fit: cover;
  border-radius: 16px;
  background: var(--umba-suave);
}
.wc-block-components-product-metadata__description p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* cantidad y papelera */
.wc-block-components-quantity-selector { border-radius: 999px; border-color: var(--umba-borde); }
.wc-block-components-quantity-selector__input { color: var(--umba-azul); font-family: var(--umba-text); }
.wc-block-components-quantity-selector__button { color: var(--umba-azul) !important; }
.wc-block-components-quantity-selector__button:hover { color: var(--umba-terracota) !important; }
.wc-block-cart-item__remove-link { color: var(--umba-gris) !important; }
.wc-block-cart-item__remove-link:hover { color: var(--umba-terracota) !important; }

/* ---------------------------------------------------------------- campos del formulario */
/* WooCommerce deduce que el fondo es oscuro y pinta los campos en blanco sobre gris: se corrige. */
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=number],
.wc-block-components-text-input input[type=password],
.wc-block-components-textarea,
.wc-block-components-select__select,
.wc-block-components-combobox-control input.components-combobox-control__input {
  background-color: #fff !important;
  border: 1px solid var(--umba-borde) !important;
  border-radius: 12px !important;
  color: var(--umba-azul) !important;
  font-family: var(--umba-text) !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus,
.wc-block-components-combobox-control input.components-combobox-control__input:focus {
  border-color: var(--umba-terracota) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(226,114,91,.18) !important;
}
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-combobox-control label,
.wc-block-components-textarea + label {
  color: var(--umba-gris) !important;
  font-family: var(--umba-text) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-select.is-active label { color: var(--umba-gris) !important; }
.wc-block-components-validation-error { color: var(--umba-terracota) !important; font-family: var(--umba-text); }
.has-error input, .has-error .wc-block-components-select__select { border-color: var(--umba-terracota) !important; }

/* casillas y radios: mismo dibujo que en "Crea tu Ümba" (borde verde, relleno terracota) */
.wc-block-components-checkbox input[type=checkbox],
.wc-block-components-radio-control__input {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px; margin: 0;
  border: 2px solid var(--umba-verde) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wc-block-components-radio-control__input { border-radius: 50%; }
.wc-block-components-checkbox input[type=checkbox] { border-radius: 6px; }
.wc-block-components-radio-control__input:checked {
  border-color: var(--umba-terracota) !important;
  box-shadow: inset 0 0 0 4px var(--umba-terracota) !important;
}
.wc-block-components-checkbox input[type=checkbox]:checked {
  border-color: var(--umba-terracota) !important;
  background: var(--umba-terracota) !important;
}
.wc-block-components-checkbox__mark { fill: #fff !important; }
.wc-block-components-checkbox input[type=checkbox]:focus-visible,
.wc-block-components-radio-control__input:focus-visible { outline: 2px solid var(--umba-azul); outline-offset: 2px; }
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__option {
  color: var(--umba-azul);
  font-family: var(--umba-text);
}

/* tarjetas: dirección, envío, pago */
.wc-block-components-address-card,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option,
.wc-block-checkout__shipping-option .wc-block-components-radio-control,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-sidebar > * {
  border-color: var(--umba-borde) !important;
  border-radius: 16px;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--umba-terracota) !important;
  box-shadow: 0 0 0 1px var(--umba-terracota);
}
.wc-block-components-address-card__edit { color: var(--umba-terracota) !important; font-weight: 700; }

/* ---------------------------------------------------------------- totales, cupones, botones */
.wc-block-components-totals-item__label { color: var(--umba-gris); }
.wc-block-components-totals-item__value { color: var(--umba-azul); }
.wc-block-components-totals-footer-item,
.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-family: var(--umba-head) !important;
  font-weight: 800 !important;
  color: var(--umba-azul) !important;
}
.wc-block-components-panel__button {
  font-family: var(--umba-text);
  color: var(--umba-azul) !important;
}
.wc-block-components-totals-coupon .wc-block-components-panel__button { font-weight: 600; }

/* botones principales: mismo lenguaje que el formulario de "Crea tu Ümba" (azul → verde) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-totals-coupon__button {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--umba-azul) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: var(--umba-head) !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  box-shadow: 0 12px 30px -14px rgba(52, 61, 87, .8);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-totals-coupon__button:hover {
  background-color: var(--umba-verde) !important;
  color: var(--umba-azul) !important;
  transform: translateY(-2px);
}
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button { min-height: 56px; font-size: 17px !important; }
.wc-block-components-totals-coupon__button { min-height: 46px; padding: 0 24px !important; font-size: 15px !important; }
.wc-block-checkout__terms a,
.wc-block-components-checkout-return-to-cart-button { color: var(--umba-terracota) !important; }

/* desplegables: mismo campo que el formulario, con la flecha propia de la tienda */
.wc-block-components-select__container,
.wc-block-components-combobox .components-combobox-control__suggestions-container { position: relative; }
.wc-block-components-select__select,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-cart select {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  padding: 14px 44px 14px 14px !important;
  border: 1px solid var(--umba-borde) !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23343D57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 14px !important;
  color: var(--umba-azul) !important;
  font-family: var(--umba-text) !important;
  font-size: 16px !important;
  cursor: pointer;
}
.wc-block-components-select__expand { display: none !important; }   /* la flecha de Woo: sobra */
.wc-block-components-select__select:focus,
.wp-block-woocommerce-checkout select:focus {
  border-color: var(--umba-terracota) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(226,114,91,.18) !important;
}
/* lista de sugerencias del país */
.components-form-token-field__suggestions-list,
.wc-block-components-combobox-control .components-combobox-control__suggestions-container ul {
  border: 1px solid var(--umba-borde) !important;
  border-radius: 12px !important;
  font-family: var(--umba-text);
  color: var(--umba-azul);
}
.components-form-token-field__suggestion.is-selected,
.components-form-token-field__suggestion:hover { background: var(--umba-suave) !important; color: var(--umba-azul) !important; }

/* pago exprés: el separador en tipografía de marca */
.wc-block-components-express-payment__title-container,
.wc-block-components-express-payment-continue-rule {
  color: var(--umba-gris) !important;
  font-family: var(--umba-text) !important;
}

/* ---------------------------------------------------------------- carrito vacío */
/* WooCommerce dibuja su carita triste con mask-image + color de fondo: hay que quitar
   la máscara y el color, si no se superpone a nuestra imagen. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: transparent !important;
  background-image: url(../img/carrito-vacio-v2.webp) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  width: 140px !important;
  height: 180px !important;
  margin: 8px auto 28px !important;
  border-radius: 0 !important;
  filter: none !important;
}
.wc-block-cart__empty-cart__title {
  font-family: var(--umba-text) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: var(--umba-gris) !important;
  margin-bottom: 8px !important;
}
.wp-block-woocommerce-empty-cart-block > .wp-block-separator.is-style-dots { display: none; }
.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
  margin: 80px 0 32px !important;
  text-align: left !important;
  font-family: var(--umba-head) !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 2.8vw, 34px) !important;
  letter-spacing: -0.015em;
  color: var(--umba-azul) !important;
}

/* rejilla de productos del carrito vacío */
.wc-block-grid__product-title,
.wc-block-grid__product .wc-block-components-product-title {
  font-family: var(--umba-head) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--umba-azul) !important;
}
.wc-block-grid__product-price {
  font-family: var(--umba-text) !important;
  font-size: 15px !important;
  color: var(--umba-gris) !important;
}
.wc-block-grid__product-image img { border-radius: 16px; }
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart a.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 22px !important;
  background: transparent !important;
  border: 2px solid var(--umba-terracota) !important;
  border-radius: 999px !important;
  color: var(--umba-terracota) !important;
  font-family: var(--umba-head) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .03em;
  transition: background-color .2s ease, color .2s ease;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart a.button:hover {
  background: var(--umba-terracota) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------- móvil */
@media (max-width: 767px) {
  .wc-block-cart-item__image { width: 100px !important; padding-right: 14px !important; }
  .wc-block-cart-item__image img { width: 86px !important; height: 86px !important; }
  .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { width: 112px !important; height: 144px !important; }
}

/* el campo del cupón es estrecho: etiqueta más pequeña para que no se corte */
.wc-block-components-totals-coupon .wc-block-components-text-input label { font-size: 13px !important; }
.wc-block-components-totals-coupon__form { gap: 10px; }
.wc-block-components-totals-coupon__input { flex: 1 1 auto; }