/* ==========================================================================
   Love-K-Beauty - WooCommerce Custom Integration Styles
   Estilos de lujo para Catálogo, Ficha de Producto, Carrito y Checkout
   ========================================================================== */

/* --------------------------------------------------------------------------
   Garantía de Ancho Completo para Body, Header, Hero Banner y Footer
   -------------------------------------------------------------------------- */
html,
body,
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-page {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

.site-main,
.page-template-lovekbeauty,
.site-main-page {
  width: 100% !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   Hero Banner de Páginas Estándar (page.php)
   -------------------------------------------------------------------------- */
.page-template-lovekbeauty .page-hero-banner,
.page-hero-banner {
  width: 100% !important;
  max-width: 100% !important;
  background: linear-gradient(135deg, #FAF6FD 0%, #FFFFFF 60%, #F5EDFA 100%) !important;
  padding: 36px 0 28px !important;
  border-bottom: 1px solid var(--color-border, #E7DDF0) !important;
  margin-bottom: 40px !important;
}

.page-template-lovekbeauty .subtitle-kicker,
.page-hero-banner .subtitle-kicker {
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #7650A3);
  display: block;
  margin-bottom: 6px;
}

.page-template-lovekbeauty .page-title,
.page-hero-banner .page-title {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
  font-size: 2.8rem;
  color: var(--color-text, #292044);
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
}

.page-template-lovekbeauty .page-content-container {
  margin-bottom: 60px;
}

/* --------------------------------------------------------------------------
   Catálogo de Productos
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

.woocommerce ul.products li.product {
  margin: 0 !important;
  padding: 12px !important;
  width: 100% !important;
  float: none !important;
  clear: none !important;
}

.woocommerce ul.products li.product a.button.product-btn-add {
  display: block !important;
  border: 1.5px solid var(--color-border, #EFEBF4) !important;
  color: var(--color-primary, #7650A3) !important;
  background-color: var(--color-white, #FFFFFF) !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm, 8px) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all var(--transition-fast, 0.2s ease) !important;
  text-align: center !important;
  width: 100% !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product a.button.product-btn-add:hover {
  background-color: var(--color-primary, #7650A3) !important;
  border-color: var(--color-primary, #7650A3) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(118, 80, 163, 0.25) !important;
}

/* --------------------------------------------------------------------------
   PÁGINA DE CARRITO (WooCommerce Blocks & Clásico)
   -------------------------------------------------------------------------- */

/* Contenedor del Carrito */
.wp-block-woocommerce-cart.alignwide,
.woocommerce-cart .woocommerce {
  max-width: var(--container-width, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 16px !important;
  width: 100% !important;
}

/* Caja de Artículos del Carrito (Columna Izquierda) */
.wp-block-woocommerce-cart-items-block,
.wc-block-cart__main,
.woocommerce-cart .woocommerce-cart-form {
  background: #FFFFFF !important;
  border-radius: var(--radius-lg, 24px) !important;
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  box-shadow: var(--shadow-card, 0 4px 20px rgba(41, 32, 68, 0.06)) !important;
  padding: 28px 32px !important;
  margin-bottom: 30px !important;
}

/* Caja de Resumen / Totales (Columna Derecha) */
.wp-block-woocommerce-cart-totals-block,
.wc-block-cart__sidebar,
.woocommerce-cart .cart-collaterals .cart_totals {
  background: #FAF6FC !important;
  border-radius: var(--radius-lg, 24px) !important;
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  box-shadow: var(--shadow-card, 0 4px 20px rgba(41, 32, 68, 0.06)) !important;
  padding: 28px 32px !important;
}

/* Encabezados de Tabla de Carrito */
.wc-block-cart-items__header,
.woocommerce-cart-form thead th {
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted, #625B6D) !important;
  border-bottom: 1.5px solid var(--color-border, #E7DDF0) !important;
  padding-bottom: 12px !important;
}

/* Miniatura del Producto en el Carrito */
.wc-block-components-product-image,
.wc-block-cart-item__image,
.woocommerce-cart-form td.product-thumbnail {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  background-color: #FAF6FC !important;
  border-radius: 12px !important;
  border: 1px solid var(--color-border, #E7DDF0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 4px !important;
  margin-right: 16px !important;
}

.wc-block-components-product-image img,
.wc-block-cart-item__image img,
.woocommerce-cart-form td.product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
}

/* Título del Producto */
.wc-block-components-product-name,
.woocommerce-cart-form td.product-name a {
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: var(--color-text, #292044) !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  transition: color 0.15s ease !important;
}

.wc-block-components-product-name:hover,
.woocommerce-cart-form td.product-name a:hover {
  color: var(--color-primary, #7650A3) !important;
}

/* Precios en Carrito */
.wc-block-components-product-price,
.wc-block-components-product-price__value,
.woocommerce-cart-form td.product-price,
.woocommerce-cart-form td.product-subtotal,
.wc-block-components-totals-item__value {
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-weight: 700 !important;
  color: var(--color-primary, #7650A3) !important;
  font-size: 1.05rem !important;
}

/* Selector de Cantidad */
.wc-block-components-quantity-selector {
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  border-radius: 9999px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.wc-block-components-quantity-selector button {
  color: var(--color-primary, #7650A3) !important;
  background: transparent !important;
  font-size: 1.1rem !important;
  border: none !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.15s ease !important;
}

.wc-block-components-quantity-selector button:hover {
  background-color: var(--color-lilac, #F2EAF8) !important;
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  border: none !important;
  background: transparent !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--color-text, #292044) !important;
  width: 38px !important;
  text-align: center !important;
}

/* Botón Eliminar Producto */
.wc-block-cart-item__remove-link,
.woocommerce-cart-form a.remove {
  color: var(--color-text-muted, #625B6D) !important;
  font-size: 1.1rem !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wc-block-cart-item__remove-link:hover,
.woocommerce-cart-form a.remove:hover {
  color: #E63946 !important;
  transform: scale(1.15);
}

/* Título de Resumen del Pedido */
.wc-block-cart__totals-title,
.cart_totals h2 {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: 1.85rem !important;
  font-weight: 600 !important;
  color: var(--color-text, #292044) !important;
  margin-bottom: 20px !important;
  border-bottom: 1.5px solid var(--color-border, #E7DDF0) !important;
  padding-bottom: 12px !important;
}

/* Filas del Resumen */
.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  font-size: 0.95rem !important;
  border-bottom: 1px dashed var(--color-border, #E7DDF0) !important;
}

.wc-block-components-totals-footer_item,
.cart_totals .order-total {
  border-bottom: none !important;
  padding-top: 18px !important;
  margin-top: 10px !important;
  border-top: 2px solid var(--color-border, #E7DDF0) !important;
}

.wc-block-components-totals-footer_item .wc-block-components-totals-item__value,
.cart_totals .order-total .amount {
  font-size: 1.4rem !important;
  color: var(--color-primary, #7650A3) !important;
  font-weight: 700 !important;
}

/* BOTÓN PROCEDER AL PAGO (Ajustado: Tamaño elegante, equilibrado y no excesivo) */
.wc-block-cart__submit,
.wc-block-components-checkout-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block button,
.woocommerce .cart-collaterals .checkout-button,
a.checkout-button {
  background: linear-gradient(135deg, #7650A3 0%, #63408C 100%) !important;
  background-color: #7650A3 !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  padding: 12px 28px !important;
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-align: center !important;
  display: block !important;
  width: auto !important;
  max-width: 260px !important;
  margin: 20px auto 0 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(118, 80, 163, 0.25) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}

.wc-block-cart__submit:hover,
.wc-block-components-checkout-button:hover,
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wp-block-woocommerce-proceed-to-checkout-block button:hover,
.woocommerce .cart-collaterals .checkout-button:hover,
a.checkout-button:hover {
  background: linear-gradient(135deg, #63408C 0%, #502E76 100%) !important;
  background-color: #63408C !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(118, 80, 163, 0.35) !important;
  color: #FFFFFF !important;
}

/* Acordeón y Campo de Cupones */
.wc-block-components-totals-coupon {
  border: none !important;
  padding: 10px 0 !important;
}

.wc-block-components-totals-coupon__button {
  color: var(--color-primary, #7650A3) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
}

.wc-block-components-totals-coupon__button:hover {
  text-decoration: underline !important;
}

.wc-block-components-totals-coupon__input {
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  border-radius: 9999px !important;
  padding: 8px 16px !important;
  background: #FFFFFF !important;
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
}

.wc-block-components-totals-coupon__button-apply {
  background-color: var(--color-primary, #7650A3) !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
}

/* --------------------------------------------------------------------------
   CHECKOUT (Finalizar Compra)
   -------------------------------------------------------------------------- */

/* Contenedor del Formulario de Checkout (Centrado sin encoger el body) */
.wp-block-woocommerce-checkout,
.woocommerce-checkout form.checkout,
.woocommerce-checkout .woocommerce {
  max-width: var(--container-width, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 16px !important;
  width: 100% !important;
}

/* Cajas del Checkout ("en la caja") */
.wc-block-checkout__main,
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
  background: #FFFFFF !important;
  border-radius: var(--radius-lg, 24px) !important;
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  box-shadow: var(--shadow-card, 0 4px 20px rgba(41, 32, 68, 0.06)) !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
}

.wc-block-checkout__sidebar,
#order_review {
  background: #FAF6FC !important;
  border-radius: var(--radius-lg, 24px) !important;
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  box-shadow: var(--shadow-card, 0 4px 20px rgba(41, 32, 68, 0.06)) !important;
  padding: 32px 28px !important;
}

/* El bloque contenedor interior blanco del resumen */
.wc-block-checkout__order-summary,
.wp-block-woocommerce-checkout-order-summary-block {
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: #FFFFFF !important;
  padding: 16px 20px !important;
}

/* Espaciado lateral generoso para que cupones, subtotal y total NO toquen las líneas laterales */
.wc-block-components-totals-wrapper {
  padding: 0 !important;
}

.wc-block-components-totals-item,
.wc-block-components-totals-coupon,
.wc-block-components-totals-footer_item {
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
}

.wc-block-components-totals-coupon {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  margin: 10px 0 !important;
  border-top: 1px solid var(--color-border, #E7DDF0) !important;
  border-bottom: 1px solid var(--color-border, #E7DDF0) !important;
}

.wc-block-components-totals-item {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.wc-block-components-totals-footer_item {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border-top: 1.5px solid var(--color-border, #E7DDF0) !important;
}

/* ENTRADAS DEL FORMULARIO: Borde morado suave en vez de líneas negras pesadas */
.wc-block-components-text-input input,
.wc-block-components-text-input input.wc-block-components-text-input__input,
.wc-blocks-components-select select,
.wc-blocks-components-select select.wc-blocks-components-select__select,
.wc-block-components-combobox-control input,
.wc-block-components-combobox-control input.wc-block-components-combobox-control__input,
.wc-block-components-textarea textarea,
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select {
  border: 1.5px solid var(--color-border, #E7DDF0) !important;
  border-radius: var(--radius-sm, 10px) !important;
  background-color: #FFFFFF !important;
  color: var(--color-text, #292044) !important;
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-size: 0.92rem !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

/* 1. SELECTS: siempre tienen valor seleccionado, por tanto etiqueta arriba y padding-top */
.wc-blocks-components-select select,
.wc-blocks-components-select select.wc-blocks-components-select__select,
.wc-block-components-combobox-control input {
  padding-top: 22px !important;
  padding-bottom: 6px !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  height: 54px !important;
  min-height: 54px !important;
  line-height: 1.3 !important;
}

.wc-blocks-components-select label,
.wc-block-components-combobox-control label {
  top: 7px !important;
  left: 14px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  color: var(--color-primary, #7650A3) !important;
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-weight: 500 !important;
  pointer-events: none !important;
}

/* 2. CAMPOS DE TEXTO: cuando están vacíos y sin foco, la etiqueta va centrada verticalmente como un placeholder normal */
.wc-block-components-text-input {
  position: relative !important;
}

.wc-block-components-text-input input,
.wc-block-components-text-input input.wc-block-components-text-input__input {
  height: 52px !important;
  min-height: 52px !important;
  padding: 14px 14px !important;
  line-height: 1.3 !important;
  transition: all 0.2s ease !important;
}

.wc-block-components-text-input label {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.92rem !important;
  color: var(--color-text-muted, #7E748B) !important;
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  transition: all 0.15s ease-out !important;
}

/* Cuando el campo de texto tiene foco (.is-active) o tiene texto escrito (.has-text) */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input.has-text label,
.wc-block-components-text-input:focus-within label {
  top: 7px !important;
  transform: translateY(0) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--color-primary, #7650A3) !important;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input.has-text input,
.wc-block-components-text-input:focus-within input {
  padding-top: 22px !important;
  padding-bottom: 6px !important;
}

/* Campos tradicionales o textarea */
.woocommerce form .form-row input.input-text,
.wc-block-components-textarea textarea {
  padding: 12px 16px !important;
  min-height: 48px !important;
}

/* En foco: borde morado de marca y halo sutil */
.wc-block-components-text-input input:focus,
.wc-block-components-text-input.is-active input,
.wc-blocks-components-select select:focus,
.wc-block-components-combobox-control input:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus {
  border-color: var(--color-primary, #7650A3) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(118, 80, 163, 0.12) !important;
  background-color: #FAF8FC !important;
}

/* DISTRIBUCIÓN Y SEPARACIÓN DEL FORMULARIO DE CHECKOUT */
.wc-block-components-checkout-step {
  margin-bottom: 32px !important;
}

.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__title {
  font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: 1.65rem !important;
  color: var(--color-text, #292044) !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--color-border, #E7DDF0) !important;
  padding-bottom: 8px !important;
}

/* Separación holgada entre campos para evitar que queden apretados */
.wc-block-components-text-input,
.wc-blocks-components-select,
.wc-block-components-combobox {
  margin-bottom: 18px !important;
}

/* Separación específica entre Nombre/Apellidos y País/Región */
.wc-block-components-address-form {
  row-gap: 18px !important;
}

.wc-block-components-address-form__country,
.wc-blocks-components-select.wc-block-components-address-form__country {
  margin-top: 22px !important;
  margin-bottom: 18px !important;
}

.wc-block-components-address-form__first_name,
.wc-block-components-address-form__last_name {
  margin-bottom: 14px !important;
}

.wc-block-components-address-form__address_1 {
  margin-top: 6px !important;
  margin-bottom: 18px !important;
}

/* Mensaje informativo de correo */
.wc-block-checkout__contact-information-step-login-prompt,
.wc-block-components-checkout-step--contact-information p {
  margin-top: 8px !important;
  margin-bottom: 24px !important;
  color: var(--color-text-muted, #625B6D) !important;
  font-size: 0.85rem !important;
}

/* Botón Realizar el pedido */
.wc-block-components-checkout-place-order-button,
#place_order {
  background: linear-gradient(135deg, #7650A3 0%, #63408C 100%) !important;
  background-color: #7650A3 !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  padding: 14px 32px !important;
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  max-width: 280px !important;
  margin: 24px auto 0 !important;
  display: block !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(118, 80, 163, 0.25) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-align: center !important;
}

.wc-block-components-checkout-place-order-button:hover,
#place_order:hover {
  background: linear-gradient(135deg, #63408C 0%, #502E76 100%) !important;
  background-color: #63408C !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(118, 80, 163, 0.35) !important;
}

/* Avisos y Notas de Pago */
.wc-block-components-notice-banner.is-error,
.woocommerce-error {
  border-radius: var(--radius-sm, 10px) !important;
  border: 1px solid #F3C5C5 !important;
  background-color: #FFF5F5 !important;
  color: #9B2C2C !important;
  padding: 14px 18px !important;
  font-size: 0.88rem !important;
}

/* --------------------------------------------------------------------------
   Botones Generales y Mensajes de WooCommerce
   -------------------------------------------------------------------------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--color-primary, #7650A3) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-full, 9999px) !important;
  padding: 12px 28px !important;
  border: none !important;
  transition: all 0.25s ease !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--color-primary-dark, #5C3886) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(118, 80, 163, 0.3) !important;
}

.woocommerce-message,
.woocommerce-info {
  border-radius: var(--radius-md, 12px) !important;
  border-top: none !important;
  padding: 16px 24px !important;
  font-family: var(--font-body, 'Outfit', sans-serif) !important;
  font-size: 0.95rem !important;
  margin-bottom: 24px !important;
}

.woocommerce-message {
  border-left: 4px solid var(--color-primary, #7650A3) !important;
  background-color: #FAF4FD !important;
  color: var(--color-text, #292044) !important;
}

/* --------------------------------------------------------------------------
   Ficha de Producto Único (Single Product)
   -------------------------------------------------------------------------- */
.woocommerce div.product {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 48px !important;
  align-items: start;
}

@media (max-width: 860px) {
  .woocommerce div.product {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}