/* ==========================================================================
   Fragancias Factory 3.10.0
   1. Accesos de categoría en móvil (corrección del toque muerto)
   2. Checkout de escritorio a dos columnas con resumen fijo
   3. Checkout móvil en una sola columna
   4. Estados de aviso y validación
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accesos de categoría (móvil)

   Antes: la barra se colapsaba con max-height:0 + pointer-events:none desde el
   manejador de scroll. En iOS el desplazamiento por inercia dispara ese
   manejador entre el touchstart y el click, el enlace pierde pointer-events y
   el click nunca llega: el toque parecía no hacer nada. Ahora el header se
   bloquea mientras el dedo está sobre la barra (clase ff-tabs-lock) y los
   destinos táctiles cumplen 44 px.
   -------------------------------------------------------------------------- */
@media (max-width:719px) {
  body.ff-storefront-v31 .ff-category-tabs-v310 {
    display:flex!important;
    gap:6px!important;
    align-items:stretch;
    padding:0 12px 6px!important;
    max-height:52px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  body.ff-storefront-v31 .ff-category-tabs-v310::-webkit-scrollbar { display:none; }
  body.ff-storefront-v31 .ff-category-tabs-v310 > a {
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    min-height:44px;
    padding:0 12px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    letter-spacing:.02em;
    color:#4a5a51;
    text-decoration:none;
    background:transparent;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(23,57,47,.12);
  }
  body.ff-storefront-v31 .ff-category-tabs-v310 > a:active { background:rgba(23,57,47,.08); }
  body.ff-storefront-v31 .ff-category-tabs-v310 > a.is-current {
    background:#17392f;
    color:#fff;
    font-weight:600;
  }

  /* Mientras el dedo está sobre la barra, el header no puede colapsarla. */
  body.ff-storefront-v31 .ff-header-v31.ff-tabs-lock .ff-category-tabs-v310 {
    max-height:52px!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
    padding-top:0!important;
    padding-bottom:6px!important;
  }
  /* Colapso real solo cuando no hay interacción en curso. */
  body.ff-storefront-v31 .ff-header-v31.ff-tabs-hidden:not(.ff-tabs-lock) .ff-category-tabs-v310 {
    max-height:0!important;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
  }
}

/* --------------------------------------------------------------------------
   2. Checkout de escritorio
   -------------------------------------------------------------------------- */
.woocommerce-checkout .ff-woocommerce-shell,
.woocommerce-checkout .woocommerce { max-width:100%; }

.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-checkout form.checkout.woocommerce-checkout,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout .woocommerce-form-login {
  width:100%;
  max-width:1240px;
  margin-inline:auto;
}

.ff-checkout-layout { display:block; width:100%; min-width:0; }

/* main.css repartía el checkout con flotados (col2-set 58% / #order_review 39%).
   Dentro del nuevo envoltorio esos porcentajes se aplicarían otra vez sobre cada
   columna, así que aquí se anulan: el ancho lo decide el contenedor flex. */
.woocommerce-checkout .ff-checkout-main > .col2-set,
.woocommerce-checkout .ff-checkout-main > #customer_details,
.woocommerce-checkout #customer_details.col2-set,
.woocommerce-checkout .ff-checkout-aside > #order_review,
.woocommerce-checkout .ff-checkout-aside > #order_review_heading {
  float:none!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding-right:0!important;
  position:static!important;
  top:auto!important;
}

@media (min-width:1024px) {
  .ff-checkout-layout {
    display:flex;
    align-items:flex-start;
    gap:clamp(28px,2.8vw,52px);
    width:100%;
  }
  .ff-checkout-main { flex:1 1 60%; min-width:0; max-width:60%; }
  .ff-checkout-aside { flex:0 0 40%; width:40%; min-width:0; }
  .ff-checkout-aside > #order_review,
  .ff-checkout-aside > #order_review_heading { width:100%; }
  .ff-checkout-aside {
    position:sticky;
    top:96px;
  }
}

/* Tarjeta del resumen. */
.woocommerce-checkout #order_review_heading {
  margin:0 0 12px!important;
  font-family:var(--ff-display,"Marcellus",serif);
  font-size:21px;
  font-weight:400;
  letter-spacing:.01em;
}
.woocommerce-checkout #order_review {
  padding:18px 18px 6px;
  background:#fff;
  border:1px solid rgba(29,42,36,.12);
  border-radius:12px;
  box-shadow:0 18px 44px rgba(16,30,23,.05);
}
.woocommerce-checkout #order_review table.shop_table {
  width:100%;
  margin:0;
  border:0!important;
  border-radius:0;
  border-collapse:collapse;
  font-size:14px;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  padding:11px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(29,42,36,.08)!important;
  vertical-align:middle;
  background:transparent!important;
}
.woocommerce-checkout #order_review table.shop_table thead th {
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#77837c;
  font-weight:500;
}
.woocommerce-checkout #order_review td.product-name {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  line-height:1.3;
}
.ff-review-thumb { flex:0 0 auto; display:block; width:52px; }
.ff-review-thumb .ff-review-thumb__img,
.ff-review-thumb img {
  display:block;
  width:52px!important;
  height:52px!important;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(29,42,36,.08);
  margin:0!important;
}
.ff-review-name { min-width:0; font-size:13px; }
.woocommerce-checkout #order_review td.product-name .variation,
.woocommerce-checkout #order_review td.product-name dl.variation {
  margin:3px 0 0;
  font-size:11px;
  color:#6d7a72;
}
.woocommerce-checkout #order_review td.product-name dl.variation dt,
.woocommerce-checkout #order_review td.product-name dl.variation dd { display:inline; margin:0; font-weight:400; }
.woocommerce-checkout #order_review td.product-name .product-quantity {
  color:#6d7a72;
  font-size:12px;
}
.woocommerce-checkout #order_review td.product-total,
.woocommerce-checkout #order_review .order-total td { text-align:right; white-space:nowrap; }
.woocommerce-checkout #order_review tfoot th { font-size:12px; font-weight:500; color:#4d5a52; text-transform:none; letter-spacing:0; }
.woocommerce-checkout #order_review tfoot tr.order-total th,
.woocommerce-checkout #order_review tfoot tr.order-total td {
  padding-top:14px!important;
  border-bottom:0!important;
  font-size:17px;
}
.woocommerce-checkout #order_review tfoot tr.order-total td .woocommerce-Price-amount { font-weight:600; }

/* Formulario: campos altos y legibles. */
.woocommerce-checkout .ff-checkout-main h3,
.woocommerce-checkout #customer_details h3 {
  margin:0 0 14px;
  font-family:var(--ff-display,"Marcellus",serif);
  font-size:20px;
  font-weight:400;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float:none!important;
  width:100%!important;
  padding:0!important;
}
.woocommerce-checkout #customer_details {
  display:flex;
  flex-direction:column;
  gap:26px;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  padding:18px;
  background:#fff;
  border:1px solid rgba(29,42,36,.12);
  border-radius:12px;
}
.woocommerce-checkout .form-row { margin:0 0 14px; padding:0; }
.woocommerce-checkout .form-row label {
  display:block;
  margin-bottom:6px;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#5d6a62;
}
.woocommerce-checkout .form-row .required { text-decoration:none; color:#9a6b4f; }
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
  width:100%;
  min-height:52px!important;
  padding:13px 14px!important;
  border:1px solid rgba(29,42,36,.18)!important;
  border-radius:9px!important;
  background:#fff;
  font-size:15px;
  color:var(--ff-ink,#1d2a24);
  box-shadow:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.woocommerce-checkout textarea.input-text { min-height:104px!important; }
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus {
  outline:none;
  border-color:#17392f!important;
  box-shadow:0 0 0 3px rgba(23,57,47,.1);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:26px; padding-left:0; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height:50px; }

/* CTA. */
.woocommerce-checkout #place_order,
.woocommerce-checkout .woocommerce-form-login button[type="submit"] {
  width:100%;
  min-height:56px;
  margin-top:6px;
  border:0;
  border-radius:999px;
  background:#17392f!important;
  color:#fff!important;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
}
.woocommerce-checkout #place_order:hover { box-shadow:0 14px 34px rgba(16,40,30,.22); transform:translateY(-1px); }
.woocommerce-checkout #place_order:disabled { opacity:.55; transform:none; box-shadow:none; }

/* Métodos de pago: solo estilo. La lógica sigue siendo de WooCommerce. */
.woocommerce-checkout #payment {
  margin-top:16px;
  padding:0;
  background:transparent!important;
  border-radius:0;
}
.woocommerce-checkout #payment ul.payment_methods {
  margin:0 0 14px;
  padding:14px 0 4px!important;
  border-top:1px solid rgba(29,42,36,.1)!important;
  border-bottom:0!important;
  list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li {
  margin:0 0 8px;
  padding:0;
  list-style:none;
  font-size:14px;
}
.woocommerce-checkout #payment ul.payment_methods li label { display:inline; font-weight:500; }
.woocommerce-checkout #payment div.payment_box {
  margin:8px 0 12px;
  padding:13px 14px;
  background:#f4f6f1!important;
  border-radius:9px;
  font-size:13px;
  line-height:1.5;
  color:#41504a;
}
.woocommerce-checkout #payment div.payment_box::before { display:none!important; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { font-size:12px; line-height:1.55; color:#5f6c64; }

/* Cupón. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .checkout_coupon { margin-bottom:18px; }
.woocommerce-checkout .checkout_coupon {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:14px;
  border:1px dashed rgba(29,42,36,.24)!important;
  border-radius:11px;
  background:#fff;
}
.woocommerce-checkout .checkout_coupon .form-row { flex:1 1 220px; margin:0; }
.woocommerce-checkout .checkout_coupon button {
  min-height:48px;
  padding:0 20px;
  border:1px solid #17392f;
  border-radius:999px;
  background:#fff;
  color:#17392f;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}

/* Descuento 3×2 y otros totales negativos: se leen como crédito, sin inventar texto. */
.woocommerce-checkout #order_review tr.cart-discount th,
.woocommerce-checkout #order_review tr.cart-discount td,
.woocommerce-checkout #order_review tr.fee th,
.woocommerce-checkout #order_review tr.fee td { color:#2f6b52; }

/* --------------------------------------------------------------------------
   3. Checkout móvil: una sola columna, sin desbordes
   -------------------------------------------------------------------------- */
@media (max-width:1023px) {
  .ff-checkout-layout { display:block; }
  .ff-checkout-main, .ff-checkout-aside { width:100%; max-width:100%; position:static; }
  .ff-checkout-aside { margin-top:24px; }
  .woocommerce-checkout #order_review { padding:14px 14px 4px; border-radius:11px; }
  .woocommerce-checkout #order_review table.shop_table { font-size:13px; }
  .woocommerce-checkout #order_review table.shop_table thead { display:none; }
  .woocommerce-checkout #order_review table.shop_table tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }
  .woocommerce-checkout #order_review table.shop_table tbody td { display:block; }
  .woocommerce-checkout #order_review table.shop_table tbody td.product-name { border-bottom:0!important; padding-bottom:6px!important; }
  .woocommerce-checkout #order_review table.shop_table tbody td.product-total { text-align:right; border-bottom:0!important; padding-bottom:6px!important; }
  .woocommerce-checkout #order_review table.shop_table tbody tr { border-bottom:1px solid rgba(29,42,36,.08); }
  .ff-review-thumb, .ff-review-thumb img, .ff-review-thumb .ff-review-thumb__img { width:44px!important; height:44px!important; }
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields { padding:14px; }
  .woocommerce-checkout .input-text,
  .woocommerce-checkout select { min-height:50px!important; font-size:16px; }
  .woocommerce-checkout #place_order { min-height:54px; }
  .woocommerce-checkout #order_review tfoot tr.order-total th,
  .woocommerce-checkout #order_review tfoot tr.order-total td { font-size:16px; }
}
@media (max-width:360px) {
  .woocommerce-checkout #order_review { padding:12px 12px 4px; }
  .woocommerce-checkout #order_review table.shop_table { font-size:12.5px; }
}

/* --------------------------------------------------------------------------
   4. Avisos y validación — se estilizan, nunca se ocultan
   -------------------------------------------------------------------------- */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
.woocommerce-NoticeGroup .woocommerce-error {
  display:block;
  width:100%;
  margin:0 0 18px!important;
  padding:14px 16px!important;
  border:1px solid rgba(29,42,36,.14);
  border-radius:11px;
  background:#fff!important;
  color:#2a3830!important;
  font-size:14px;
  line-height:1.5;
  list-style:none;
}
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before { display:none!important; }
.woocommerce-error { border-color:rgba(150,54,44,.3); background:#fdf4f2!important; color:#7c2f26!important; }
.woocommerce-info { border-color:rgba(29,42,36,.18); background:#f5f7f2!important; }
.woocommerce-message { border-color:rgba(47,107,82,.32); background:#f1f7f2!important; color:#1f5140!important; }
.woocommerce-error li, .woocommerce-info li, .woocommerce-message li { margin:0; padding:0; list-style:none; }
.woocommerce-error a, .woocommerce-info a, .woocommerce-message a { color:inherit; text-decoration:underline; }

.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid .select2-container .select2-selection--single {
  border-color:#a4493c!important;
  box-shadow:0 0 0 3px rgba(164,73,60,.1);
}
.woocommerce-checkout .woocommerce-validated .input-text { border-color:rgba(47,107,82,.5)!important; }
.woocommerce-checkout .blockUI.blockOverlay { background:rgba(251,251,248,.72)!important; }

/* --------------------------------------------------------------------------
   5. Detalles administrables nuevos
   -------------------------------------------------------------------------- */
.ff-product-note {
  clear:both;
  margin:10px 0 0;
  font-size:11px;
  line-height:1.5;
  color:#6f7c75;
}
.ff-quick-access__icon .ff-quick-access__img {
  display:block;
  width:100%;
  height:100%;
  max-width:34px;
  max-height:34px;
  object-fit:contain;
  border-radius:6px;
}
.ff-promo-bottle__media img {
  display:block;
  width:34px;
  height:34px;
  object-fit:contain;
  margin:0 auto 4px;
}

/* ==========================================================================
   Fragancias Factory 3.10.1 — estabilización final del layout de checkout

   V3.1 todavía convertía form.checkout en grid. El nuevo envoltorio 3.10 vive
   dentro de ese formulario, por lo que sin este reset podía quedar atrapado en
   la primera columna del grid antiguo. Se neutraliza el layout heredado y se
   reparte 60/40 sobre el espacio REAL restante después del gap.
   ========================================================================== */
.woocommerce-checkout form.checkout.woocommerce-checkout {
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
}

@media (min-width:1024px) {
  .woocommerce-checkout .ff-checkout-main {
    flex:3 1 0!important;
    max-width:none!important;
    width:auto!important;
  }
  .woocommerce-checkout .ff-checkout-aside {
    flex:2 1 0!important;
    width:auto!important;
    max-width:none!important;
  }
}