/* King Store Panamá — compra clara y legible, sin interferir con gateways.
   Solo se carga en Carrito / Checkout. El resto puede seguir oscuro. */
body.ksp-commerce #contenido {
  --ksp-ink: #24211c;
  --ksp-paper: #f5f3ee;
  --ksp-card: #ffffff;
  --ksp-line: #ddd7ca;
  --ksp-mute: #59554d;
  --ksp-gold: #816332;
  background: #f5f3ee;
  color: #24211c;
  color-scheme: light;
  min-height: 58vh;
}
body.ksp-commerce #contenido .ksp-shop-wrap {
  width: min(1320px, calc(100% - 2rem));
  max-width: 1320px;
  padding: 2.5rem 0 5rem;
  color: #24211c !important;
}
.ksp-checkout-steps {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 0 1.2rem; color: #3e372c;
}
.ksp-checkout-steps span {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.75rem; border: 1px solid #e2d9c8;
  border-radius: 999px; background: #fff; font-size: 0.78rem;
}
.ksp-checkout-steps b { color: #876a3c; font-weight: 750; }
body.ksp-commerce #contenido .ksp-prose,
body.ksp-commerce #contenido .woocommerce,
body.ksp-commerce #contenido .woocommerce-checkout,
body.ksp-commerce #contenido .woocommerce-cart-form,
body.ksp-commerce #contenido .wc-block-cart,
body.ksp-commerce #contenido .wc-block-checkout,
body.ksp-commerce #contenido .wc-block-components-main {
  color: #24211c !important;
  color-scheme: light;
}
body.ksp-commerce #contenido .ksp-display-title,
body.ksp-commerce #contenido h1,
body.ksp-commerce #contenido h2,
body.ksp-commerce #contenido h3,
body.ksp-commerce #contenido h4,
body.ksp-commerce #contenido .ksp-checkout-title {
  color: #24211c !important;
}
body.ksp-commerce #contenido .ksp-eyebrow { color: #80632f; }
body.ksp-commerce #contenido .woocommerce-info,
body.ksp-commerce #contenido .woocommerce-message,
body.ksp-commerce #contenido .woocommerce-error,
body.ksp-commerce #contenido .cart_totals,
body.ksp-commerce #contenido .woocommerce-cart-form,
body.ksp-commerce #contenido .woocommerce-checkout-review-order,
body.ksp-commerce #contenido table.shop_table,
body.ksp-commerce #contenido .wc-block-components-sidebar,
body.ksp-commerce #contenido .wc-block-cart-items,
body.ksp-commerce #contenido .wc-block-components-order-summary,
body.ksp-commerce #contenido .wc-block-components-panel,
body.ksp-commerce #contenido .wc-block-components-totals-wrapper {
  background: #fff !important;
  color: #24211c !important;
  border-color: #ddd7ca !important;
}
body.ksp-commerce #contenido .woocommerce table.shop_table,
body.ksp-commerce #contenido .woocommerce table.shop_table th,
body.ksp-commerce #contenido .woocommerce table.shop_table td,
body.ksp-commerce #contenido .wc-block-cart-items th,
body.ksp-commerce #contenido .wc-block-cart-items td {
  color: #24211c !important;
  border-color: #ddd7ca !important;
}
body.ksp-commerce #contenido .woocommerce-checkout .col-1,
body.ksp-commerce #contenido .woocommerce-checkout .col-2,
body.ksp-commerce #contenido .woocommerce-checkout #customer_details,
body.ksp-commerce #contenido .woocommerce-checkout #order_review {
  background: #fff !important;
  color: #24211c !important;
  border-color: #ddd7ca !important;
}
/* El cliente completa una sola dirección; WooCommerce conserva los campos
   billing_* por compatibilidad con pasarelas y copia esos datos a shipping_*. */
body.ksp-commerce #contenido form.checkout .woocommerce-billing-fields > h3 { display: none !important; }
body.ksp-commerce #contenido form.checkout .woocommerce-shipping-fields { display: none !important; }
body.ksp-commerce #contenido form.checkout .ksp-delivery-intro {
  padding: 0 0 0.8rem;
  margin: 0 0 1.1rem;
  border-bottom: 1px solid #e6e0d5;
}
body.ksp-commerce #contenido .ksp-delivery-intro h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-family: var(--ksp-display);
}
body.ksp-commerce #contenido .ksp-delivery-intro p {
  margin: 0;
  color: #59554d !important;
  font-size: 0.87rem;
  line-height: 1.55;
}
body.ksp-commerce #contenido .woocommerce form .form-row label,
body.ksp-commerce #contenido .woocommerce-checkout label,
body.ksp-commerce #contenido .wc-block-checkout label,
body.ksp-commerce #contenido .wc-block-cart label,
body.ksp-commerce #contenido .wc-block-components-checkbox__label,
body.ksp-commerce #contenido .wc-block-components-radio-control__label {
  color: #24211c !important;
  -webkit-text-fill-color: #24211c !important;
}
body.ksp-commerce #contenido .woocommerce form .form-row .description,
body.ksp-commerce #contenido .wc-block-components-totals-item__description,
body.ksp-commerce #contenido .wc-block-components-formatted-money-amount,
body.ksp-commerce #contenido .wc-block-components-product-details__value {
  color: #59554d !important;
}
body.ksp-commerce #contenido .woocommerce form .form-row input.input-text,
body.ksp-commerce #contenido .woocommerce form .form-row select,
body.ksp-commerce #contenido .woocommerce form .form-row textarea,
body.ksp-commerce #contenido .wc-block-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.ksp-commerce #contenido .wc-block-checkout select,
body.ksp-commerce #contenido .wc-block-checkout textarea,
body.ksp-commerce #contenido .wc-block-cart input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.ksp-commerce #contenido .wc-block-cart select,
body.ksp-commerce.ksp-dark #contenido .woocommerce form .form-row input.input-text,
body.ksp-commerce.ksp-dark #contenido .woocommerce form .form-row select,
body.ksp-commerce.ksp-dark #contenido .woocommerce form .form-row textarea {
  background: #fff !important;
  background-color: #fff !important;
  color: #24211c !important;
  -webkit-text-fill-color: #24211c !important;
  border-color: #c6beae !important;
  color-scheme: light;
}
body.ksp-commerce #contenido input::placeholder,
body.ksp-commerce #contenido textarea::placeholder {
  color: #68635a !important;
  -webkit-text-fill-color: #68635a !important;
}
body.ksp-commerce #contenido input:-webkit-autofill,
body.ksp-commerce #contenido input:-webkit-autofill:hover,
body.ksp-commerce #contenido input:-webkit-autofill:focus {
  -webkit-text-fill-color: #24211c !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  caret-color: #24211c;
}
body.ksp-commerce #contenido .woocommerce input[type="checkbox"],
body.ksp-commerce #contenido .woocommerce input[type="radio"],
body.ksp-commerce #contenido .wc-block-cart input[type="checkbox"],
body.ksp-commerce #contenido .wc-block-checkout input[type="checkbox"],
body.ksp-commerce #contenido .wc-block-checkout input[type="radio"] {
  accent-color: #917343 !important;
  background: #fff !important;
  border-color: #82796d !important;
  color-scheme: light;
}
body.ksp-commerce #contenido .woocommerce input[type="checkbox"]:checked,
body.ksp-commerce #contenido .woocommerce input[type="radio"]:checked { outline: 2px solid rgba(145,115,67,0.4); outline-offset: 2px; }
/* Payment area stays WooCommerce-owned. Set only its neutral containers and
   native label legibility; no custom styles for gateway buttons or iframes. */
body.ksp-commerce #contenido .woocommerce-checkout #payment,
body.ksp-commerce #contenido .woocommerce-checkout #payment ul.payment_methods,
body.ksp-commerce #contenido .woocommerce-checkout #payment li.wc_payment_method,
body.ksp-commerce #contenido .wc-block-components-payment-method-option,
body.ksp-commerce #contenido .wc-block-components-radio-control__option {
  background: #fff !important;
  color: #24211c !important;
  border-color: #ddd7ca !important;
}
body.ksp-commerce #contenido .woocommerce-checkout #payment .payment_box {
  background: transparent !important;
  color: #59554d !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.ksp-commerce #contenido .woocommerce-checkout #payment .payment_box::before { display: none !important; }
body.ksp-commerce #contenido .ksp-order-notice {
  background: #fff;
  color: #353026;
  border-left-color: #ab905f;
  line-height: 1.6;
}
body.ksp-commerce #contenido .ksp-order-notice a { color: #765927; text-decoration: underline; }
body.ksp-commerce #contenido .woocommerce a.remove,
body.ksp-commerce #contenido .ksp-remove-line { background: #fff !important; color: #a63f35 !important; }
body.ksp-commerce #contenido .woocommerce a.remove:hover,
body.ksp-commerce #contenido .ksp-remove-line:hover { background: #a63f35 !important; color: #fff !important; }
body.ksp-commerce #contenido .ksp-paguelofacil-logo {
  display: inline-block; max-width: 96px; max-height: 25px;
  width: auto; height: auto; margin-left: 0.5rem;
  vertical-align: middle; object-fit: contain;
}
@media (max-width: 640px) {
  body.ksp-commerce #contenido .ksp-shop-wrap { width: calc(100% - 1rem); padding-top: 1.25rem; }
  body.ksp-commerce #contenido table.shop_table th,
  body.ksp-commerce #contenido table.shop_table td { padding: 0.55rem 0.35rem; }
}

/* ==========================================================================
   CARRITO: tabla ordenada en escritorio, tarjetas claras en celular.
   Antes, en pantallas pequeñas, el apilado por defecto de WooCommerce
   ocultaba la imagen del producto (regla nativa de WooCommerce para tablas
   "responsive") y dejaba una lista apretada de etiqueta/valor. Aquí se
   reemplaza por un diseño propio: la imagen se ve siempre y cada producto
   se lee como una tarjeta clara, tanto en celular como en computadora.
   ========================================================================== */

/* --- Escritorio/tablet: tabla prolija, imagen y columnas bien alineadas --- */
@media (min-width: 768px) {
  body.ksp-commerce #contenido .woocommerce-cart table.cart { table-layout: fixed; }
  body.ksp-commerce #contenido .woocommerce-cart table.cart th,
  body.ksp-commerce #contenido .woocommerce-cart table.cart td {
    vertical-align: middle !important;
    padding: 1rem 0.9rem !important;
  }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-thumbnail { width: 6rem; }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-remove { width: 3.2rem; }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-name { text-align: left; word-break: break-word; }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-price,
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-subtotal { text-align: right; white-space: nowrap; }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-quantity { text-align: center; }
  body.ksp-commerce #contenido .woocommerce-cart table.cart .quantity .qty { width: 4rem; text-align: center; }
}

/* --- Celular: cada línea del carrito se convierte en una tarjeta --- */
@media (max-width: 767px) {
  body.ksp-commerce #contenido .woocommerce-cart table.cart,
  body.ksp-commerce #contenido .woocommerce-cart table.cart tbody,
  body.ksp-commerce #contenido .woocommerce-cart table.cart tr,
  body.ksp-commerce #contenido .woocommerce-cart table.cart td {
    display: block !important;
    width: 100% !important;
  }
  body.ksp-commerce #contenido .woocommerce-cart table.cart thead { display: none !important; }
  body.ksp-commerce #contenido .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item,
  body.ksp-commerce #contenido .woocommerce-cart table.cart tr.cart_item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    gap: 0 !important;
    padding: 1rem 2.6rem 1rem 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e6e0d5 !important;
    background: #fff !important;
  }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td {
    padding: 0 !important;
    border: 0 !important;
    width: auto !important;
  }
  /* Se cancela la etiqueta "Producto: / Precio: / ..." que WooCommerce
     agrega por defecto en tablas responsive: la tarjeta ya es clara sin ella. */
  body.ksp-commerce #contenido .woocommerce-cart table.cart td::before { content: none !important; }

  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-remove {
    display: block !important;
    position: absolute !important;
    top: 1rem !important;
    right: 0 !important;
    order: 5 !important;
  }
  /* La imagen se ve siempre (se cancela el "display:none" que WooCommerce
     aplica por defecto a esta columna en pantallas pequeñas). */
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-thumbnail {
    display: block !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    margin-right: 0.85rem !important;
  }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-thumbnail img {
    display: block !important;
    width: 3.6rem !important;
    height: 3.6rem !important;
    border-radius: 8px !important;
  }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-name {
    display: block !important;
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-name a { color: #24211c !important; text-decoration: none !important; }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-price {
    display: block !important;
    order: 3 !important;
    flex: 0 0 100% !important;
    margin: 0.3rem 0 0 4.45rem !important;
    width: calc(100% - 4.45rem) !important;
    font-size: 0.82rem !important;
    color: #59554d !important;
  }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-quantity {
    display: block !important;
    order: 4 !important;
    flex: 0 0 auto !important;
    margin: 0.6rem 0 0 4.45rem !important;
  }
  body.ksp-commerce #contenido .woocommerce-cart table.cart td.product-subtotal {
    display: block !important;
    order: 4 !important;
    flex: 1 1 auto !important;
    margin: 0.6rem 0 0 !important;
    text-align: right !important;
    font-weight: 700 !important;
  }
  body.ksp-commerce #contenido .woocommerce-cart table.cart .quantity .qty {
    width: 3.6rem !important;
    min-height: 2.4rem !important;
    text-align: center !important;
  }
}


/* Ocultar sección y campos de código postal por completo sin romper validación */
.ocultar-postcode #shipping_postcode_field,
.ocultar-postcode #billing_postcode_field,
.woocommerce form.checkout #billing_postcode_field,
.woocommerce form.checkout #shipping_postcode_field,
.woocommerce form.checkout .form-row-postcode,
.woocommerce form.checkout #calc_shipping_postcode_field,
.wc-block-components-address-form__postcode,
.wc-block-components-address-form .form-row-postcode {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* En carrito: ocultar botones innecesarios que confunden */
.woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart-form input[name="update_cart"] {
  display: none !important;
}

/* Calculadora de envío en carrito: más limpia o colapsable */
.woocommerce-shipping-calculator .shipping-calculator-button {
  font-size: 0.85rem;
  color: #765927;
  font-weight: 600;
  text-decoration: underline;
}

/* Controles de cantidad interactivos en Checkout (+ / - / ×) */
.ksp-checkout-qty-control {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.ksp-qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #d5d0c5 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #24211c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: all 0.15s ease;
}
.ksp-qty-btn:hover {
  background: #f0ebe1 !important;
  border-color: #a98f60 !important;
  color: #181612 !important;
}
.ksp-qty-val {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  font-size: 0.88rem;
  color: #24211c;
}

/* Botón X de eliminar en carrito: círculo nítido, perfectamente visible y centrado */
.woocommerce-cart table.cart td.product-remove,
.woocommerce table.shop_table td.product-remove {
  width: 48px !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.woocommerce a.remove,
.woocommerce table.cart a.remove,
.woocommerce-cart table.cart td.product-remove a.remove,
a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid #d9534f !important;
  background: #fff5f5 !important;
  color: #d9534f !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  margin: 0 auto !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(217,83,79,0.15) !important;
  transition: all 0.15s ease !important;
}
.woocommerce a.remove:hover,
.woocommerce table.cart a.remove:hover,
a.remove:hover {
  background: #d9534f !important;
  color: #ffffff !important;
  border-color: #d9534f !important;
  transform: scale(1.1);
}
.woocommerce a.remove::before,
a.remove::before {
  content: "\00d7" !important;
  display: block !important;
  font-size: 20px !important;
  line-height: 1 !important;
  margin-top: -2px;
}


/* Carrito ultra limpio: solo mostrar los botones esenciales abajo */
.woocommerce-cart .actions > button,
.woocommerce-cart .actions > input[type="submit"]:not(.checkout-button) {
  display: none !important;
}

/* Ocultar cupón confuso si está suelto en acciones o reorganizarlo abajo */
.woocommerce-cart-form .coupon {
  padding: 0.75rem 0 !important;
}
.woocommerce-cart-form .coupon input.input-text {
  min-height: 2.6rem !important;
  border-radius: 999px !important;
  border: 1px solid #d5cebf !important;
  padding: 0.4rem 1rem !important;
}
.woocommerce-cart-form .coupon button.button {
  display: inline-flex !important;
  border-radius: 999px !important;
  min-height: 2.6rem !important;
  background: #24211c !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* Botón Finalizar Compra en Carrito: Gran botón llamativo estilo Amazon */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
a.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 3rem !important;
  padding: 0.8rem 1.5rem !important;
  border-radius: 999px !important;
  background: #ffd814 !important;
  border: 1px solid #fcd200 !important;
  color: #0f1111 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 5px rgba(213, 160, 0, 0.25) !important;
  transition: all 0.15s ease !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
a.checkout-button:hover {
  background: #f7ca00 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(213, 160, 0, 0.35) !important;
}

/* Botón "Realizar pedido / Pagar" del checkout: el mismo botón grande y
   llamativo que "Finalizar compra" en el carrito, para que el cliente
   reconozca el botón de acción principal en todo el proceso de compra. */
.woocommerce-checkout #payment #place_order,
.wc-block-components-checkout-place-order-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 3rem !important;
  padding: 0.8rem 1.5rem !important;
  border-radius: 999px !important;
  background: #ffd814 !important;
  border: 1px solid #fcd200 !important;
  color: #0f1111 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: 0 2px 5px rgba(213, 160, 0, 0.25) !important;
  transition: all 0.15s ease !important;
}
.woocommerce-checkout #payment #place_order:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: #f7ca00 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(213, 160, 0, 0.35) !important;
}

/* Nota breve bajo el total del carrito: el envío se elige en el checkout. */
.ksp-cart-shipping-note {
  margin: .6rem 0 0;
  padding: 0 .8rem .8rem;
  font-size: .8rem;
  color: #59554d;
  text-align: right;
}