/* Ocultar barra de scroll horizontal (filtros); no incluido en Tailwind core */
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

body {
  font-family: 'DM Sans', sans-serif;
}

*,
*::before,
*::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

.product-card:hover .product-img {
  transform: scale(1.04);
}

.product-img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#cart-drawer {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#cart-overlay {
  transition: opacity 0.3s ease;
}

#google_translate_element,
.skiptranslate,
body > .skiptranslate {
  display: none !important;
}

body {
  top: 0 !important;
}

.language-option {
  display: flex;
  width: 100%;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--pl-foreground));
}

.language-option:hover,
.language-option:focus {
  background-color: rgb(var(--pl-nav-hover));
  outline: none;
}

.language-option.is-active {
  background-color: rgb(var(--pl-nav-active));
  color: rgb(var(--pl-foreground));
}

.language-option.is-active::after {
  content: "";
  margin-left: auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background-color: currentColor;
  opacity: 0.72;
}

/* Scroll táctil en panel predictivo del buscador (iOS / WebKit) */
.buscador-resultados-scroll {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.badge-new {
  letter-spacing: 0.12em;
}

.filter-btn.active {
  background: #1a1a12;
  color: white;
}

.dark .filter-btn.active {
  background: #f5f5f0;
  color: #1a1a12;
}

/* Login modal: tabs Iniciar sesión / Crear cuenta */
.login-tab {
  color: rgb(107 107 82);
}

.dark .login-tab {
  color: rgb(208 208 192);
}

.login-tab.login-tab-active {
  background-color: #ffffff;
  color: rgb(26 26 18);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.06);
}

.dark .login-tab.login-tab-active {
  background-color: rgb(61 61 46);
  color: rgb(245 245 240);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.35);
}

/* Select nativo: fondo/texto coherentes con tema (evita texto claro sobre blanco en dark). */
.product-card-compra-panel select.js-variante-carrito {
  color-scheme: light;
}

.dark .product-card-compra-panel select.js-variante-carrito {
  color-scheme: dark;
}

/* Opciones del desplegable en WebKit */
.dark .product-card-compra-panel select.js-variante-carrito option {
  background-color: rgb(61 61 46);
  color: rgb(245 245 240);
}

html:not(.dark) .product-card-compra-panel select.js-variante-carrito option {
  background-color: rgb(255 255 255);
  color: rgb(26 26 18);
}

/* PDP: colores explícitos — WebKit a veces pinta <select> claro pero aplica color de texto “oscuro” heredado. */
/* Flecha nativa ignoraba el padding; chevron SVG con margen fijo desde el borde derecho. */
#pdp-variante {
  color-scheme: light;
  background-color: rgb(255 255 255);
  color: rgb(26 26 18);
  -webkit-text-fill-color: rgb(26 26 18);
  padding: 0.75rem 2.875rem 0.75rem 1rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231a1a12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem 1.125rem;
}

.dark #pdp-variante {
  color-scheme: dark;
  background-color: rgb(61 61 46) !important;
  color: rgb(245 245 240) !important;
  -webkit-text-fill-color: rgb(245 245 240);
  border-color: rgb(107 107 82);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f5f5f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.dark #pdp-variante option {
  background-color: rgb(61 61 46);
  color: rgb(245 245 240);
}

html:not(.dark) #pdp-variante option {
  background-color: rgb(255 255 255);
  color: rgb(26 26 18);
}

.dark #pdp-qty-wrap {
  background-color: rgb(61 61 46) !important;
  border-color: rgb(107 107 82);
}

.dark #pdp-qty-wrap button {
  color: rgb(245 245 240) !important;
  -webkit-text-fill-color: rgb(245 245 240);
}

.dark #pdp-qty {
  color: rgb(245 245 240) !important;
  -webkit-text-fill-color: rgb(245 245 240);
}

#pdp-favorito.is-active {
  color: rgb(220 38 38);
  border-color: rgba(220 38 38, 0.35);
}

.dark #pdp-favorito.is-active {
  color: rgb(248 113 113);
  border-color: rgba(248, 113, 113, 0.35);
}

#pdp-favorito.is-active .js-favorito-icon {
  fill: currentColor;
  stroke: currentColor;
}

#pdp-favorito:not(.is-active) .js-favorito-icon {
  fill: none;
}

/*
 * Panel compra: siempre visible en táctil / coarse pointer.
 * En escritorio con mouse: oculto hasta hover o focus (p. ej. teclado en el <select>).
 */
.product-card .product-card-compra {
  opacity: 1;
}

.product-card .product-card-add-mobile {
  display: none;
}

.product-card .product-card-add-desktop {
  display: inline;
}

@media (max-width: 639px) {
  .product-card .product-card-compra {
    bottom: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    display: flex;
    justify-content: center;
  }

  .product-card .product-card-compra-panel {
    width: max-content;
    max-width: 100%;
    gap: 0.375rem;
    border-width: 1px;
    border-radius: 0.5rem;
    padding: 0.375rem;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 18px rgb(26 26 18 / 0.12);
  }

  .dark .product-card .product-card-compra-panel {
    background-color: rgba(26, 26, 18, 0.95);
  }

  .product-card .product-card-compra-panel select.js-variante-carrito,
  .product-card .product-card-compra-panel button.js-agregar-carrito {
    min-height: 2.25rem;
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1;
  }

  .product-card .product-card-add-mobile {
    display: inline;
  }

  .product-card .product-card-add-desktop {
    display: none;
  }
}

@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  .product-card .product-card-compra {
    opacity: 0;
  }

  .product-card:hover .product-card-compra,
  .product-card:focus-within .product-card-compra {
    opacity: 1;
  }
}

/* Favorito: visible en táctil; en escritorio con mouse al hover/focus del card */
.product-card button.product-card-favorito {
  opacity: 1;
}

@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  .product-card button.product-card-favorito {
    opacity: 0;
  }

  .product-card:hover button.product-card-favorito,
  .product-card:focus-within button.product-card-favorito {
    opacity: 1;
  }
}

.product-card button.js-favorito.is-active {
  color: rgb(220 38 38);
}

.dark .product-card button.js-favorito.is-active {
  color: rgb(248 113 113);
}

.product-card button.js-favorito.is-active .js-favorito-icon {
  fill: currentColor;
  stroke: currentColor;
}

.product-card button.js-favorito:not(.is-active) .js-favorito-icon {
  fill: none;
}

/* Checkout: corazón sobre miniatura (misma lógica que tarjeta / PDP) */
#pagina-checkout button.checkout-line-favorito.is-active {
  color: rgb(220 38 38);
}

.dark #pagina-checkout button.checkout-line-favorito.is-active {
  color: rgb(248 113 113);
}

#pagina-checkout button.checkout-line-favorito.is-active .js-favorito-icon {
  fill: currentColor;
  stroke: currentColor;
}

#pagina-checkout button.checkout-line-favorito:not(.is-active) .js-favorito-icon {
  fill: none;
}

/* Newsletter feedback (mensajes fuera del string JS para Tailwind purge) */
#newsletter-feedback.newsletter-feedback--ok {
  display: block;
  border-color: #d0d0c0;
  background-color: #f5f5f0;
  color: #1a1a12;
}

.dark #newsletter-feedback.newsletter-feedback--ok {
  border-color: #6b6b52;
  background-color: rgba(61, 61, 46, 0.55);
  color: #f5f5f0;
}

#newsletter-feedback.newsletter-feedback--err {
  display: block;
  border-color: #fecaca;
  background-color: #fef2f2;
  color: #991b1b;
}

.dark #newsletter-feedback.newsletter-feedback--err {
  border-color: rgba(248, 113, 113, 0.35);
  background-color: rgba(69, 10, 10, 0.35);
  color: #fecaca;
}

/* Mi cuenta: teléfono internacional (intl-tel-input) */
#pagina-cuenta-datos .cuenta-phone-field {
  width: 100%;
}

#pagina-cuenta-datos .cuenta-phone-field .iti {
  width: 100%;
  display: block;
}

#pagina-cuenta-datos .cuenta-phone-field .iti__tel-input {
  width: 100%;
}

#pagina-cuenta-datos .cuenta-phone-field .iti__selected-country {
  border-radius: 0.75rem 0 0 0.75rem;
}

#pagina-cuenta-datos .cuenta-phone-field .iti__dropdown-content {
  z-index: 60;
  border-radius: 0.75rem;
  border: 1px solid #d0d0c0;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

#pagina-cuenta-datos .cuenta-phone-field .iti__search-input {
  border-radius: 0;
  border-color: #d0d0c0;
  color: #1c1c14;
  background: #fff;
}

#pagina-cuenta-datos .cuenta-phone-field .iti__country-list {
  max-height: 220px;
  background: #fff;
  color: #1c1c14;
}

#pagina-cuenta-datos .cuenta-phone-field .iti__country:hover,
#pagina-cuenta-datos .cuenta-phone-field .iti__country.iti__highlight {
  background: #f4f4ee;
}

.dark #pagina-cuenta-datos .cuenta-phone-field {
  --iti-dialcode-color: #a1a1aa;
  --iti-arrow-color: #a1a1aa;
  --iti-hover-color: rgba(255, 255, 255, 0.06);
  --iti-border-color: #52525b;
  --iti-dropdown-bg: #18181b;
}

.dark #pagina-cuenta-datos .cuenta-phone-field .iti__selected-country-primary,
.dark #pagina-cuenta-datos .cuenta-phone-field .iti__selected-dial-code {
  color: #fafafa;
}

.dark #pagina-cuenta-datos .cuenta-phone-field .iti__dropdown-content {
  border-color: #52525b;
  background: #18181b;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.dark #pagina-cuenta-datos .cuenta-phone-field .iti__search-input {
  border-color: #52525b;
  background: #27272a;
  color: #fafafa;
}

.dark #pagina-cuenta-datos .cuenta-phone-field .iti__country-list {
  background: #18181b;
  color: #fafafa;
}

.dark #pagina-cuenta-datos .cuenta-phone-field .iti__country:hover,
.dark #pagina-cuenta-datos .cuenta-phone-field .iti__country.iti__highlight {
  background: #27272a;
}

.dark #pagina-cuenta-datos .cuenta-phone-field .iti__divider {
  border-bottom-color: #3f3f46;
}

/* Mi cuenta: layout sidebar + contenido (app.css, sin depender de Tailwind grid) */
:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-layout-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  flex-shrink: 0;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-layout-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  min-width: 0;
}

@media (min-width: 1024px) {
  :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) #cuenta-auth-content .cuenta-layout {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    column-gap: 2.5rem;
    row-gap: 0;
    align-items: start;
    width: 100%;
  }

  :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-layout-sidebar {
    grid-column: 1 !important;
    grid-row: 1;
    position: sticky;
    top: 6rem;
    align-self: start;
    width: 260px;
    max-width: 260px;
  }

  :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-layout-main {
    grid-column: 2 !important;
    grid-row: 1;
    align-self: start;
    width: auto;
    max-width: 100%;
  }

  :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-label {
    display: block;
  }
}

/* Panel lateral Mi cuenta — modo claro */
:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-nav {
  border-color: #d0d0c0;
  background-color: #fff;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-label {
  color: #6b6b52;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-link {
  color: #3d3d2e;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-link:hover {
  background-color: #f5f5f0;
  color: #1a1a12;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-link--active {
  background-color: #e8e8e0;
  color: #1a1a12;
  font-weight: 500;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-badge {
  background-color: #e8e8e0;
  color: #6b6b52;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-summary {
  border-color: #d0d0c0;
  background-color: rgba(245, 245, 240, 0.85);
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-summary-title {
  color: #6b6b52;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-summary-dt {
  color: #6b6b52;
}

:is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-summary-dd {
  color: #1a1a12;
}

/* Panel lateral Mi cuenta — modo oscuro */
.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-nav {
  border-color: #3d3d2e;
  background-color: #1a1a12;
}

.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-label {
  color: #b0b09a;
}

.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-link {
  color: #d0d0c0;
}

.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-link:hover {
  background-color: rgba(61, 61, 46, 0.75);
  color: #f5f5f0;
}

.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-link--active {
  background-color: #3d3d2e;
  color: #f5f5f0;
  font-weight: 500;
}

.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-nav-badge {
  background-color: #3d3d2e;
  color: #d0d0c0;
}

.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-summary {
  border-color: #3d3d2e;
  background-color: #3d3d2e;
}

.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-summary-title {
  color: #b0b09a;
}

.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-summary-dt {
  color: #b0b09a;
}

.dark :is(#pagina-cuenta-datos, #pagina-cuenta-pedidos) .cuenta-sidebar-summary-dd {
  color: #f5f5f0;
}