/* ==================================================================
   Arilart theme overrides — extracted inline <style> blocks
   ================================================================== */

/* ---------- GLOBAL ---------- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
/* Remove default WP margins */
body { margin: 0; }
html { scroll-behavior: smooth; }
/* Floating cart — hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- HEADER — altura como fuente única de verdad ----------
   `header` (header.php) es `fixed`, así que no empuja contenido: cada plantilla
   tenía que "adivinar" su altura con un `pt-*` de Tailwind (pt-24, pt-28...) y
   los números no coincidían con la altura real (92px mobile / 108px desktop),
   tapando contenido en algunas páginas y dejando hueco de más en otras.
   `--ari-header-h` es la ÚNICA fuente: las plantillas consumen
   `pt-[var(--ari-header-h)]` en vez de repetir un número. Si el layout del
   header cambia (padding, tamaño del wordmark), se actualiza ACÁ una vez.
   ⚠️ Este valor es el alto COMPLETO (header sin encoger), a propósito: el
   header se achica al scrollear (más abajo) pero el espaciador de la página
   tiene que seguir midiendo el alto completo — si no, el contenido salta
   (layout shift) cada vez que el header cambia de tamaño. */
:root {
  /* El alto del header se compone: la barra de nav + (si está) la barra de avisos.
     `--ari-header-base-h` es la nav sola; `--ari-topbar-h` vale 0 salvo que el
     <body> traiga `.arilart-has-topbar` (header.php). Se parte en dos vars, en vez
     de repetir 92/108 con y sin barra, para que cada número siga viviendo una sola
     vez — que es la razón de ser de --ari-header-h. */
  --ari-header-base-h: 92px;
  --ari-topbar-h: 0px;
  --ari-header-h: calc(var(--ari-header-base-h) + var(--ari-topbar-h));
}
@media (min-width: 768px) {
  :root { --ari-header-base-h: 108px; }
}
/* Valor de arranque de la barra: `header-scroll.js` lo pisa con el alto REAL
   medido apenas corre. Si el texto del cliente envuelve a dos líneas, este 36px
   se quedaría corto y el header taparía contenido — por eso se mide. */
body.arilart-has-topbar { --ari-topbar-h: 36px; }

/* ---------- BARRA SUPERIOR DE AVISOS — colapso al scrollear ----------
   Pedido del owner: "que desaparezca al 20% del scroll, como un top nav-bar".
   `header-scroll.js` alterna `.is-notice-hidden` en el header; acá sólo el
   colapso visual.
   ⚠️ `--ari-topbar-h` NO se toca al colapsar, a propósito: el espaciador de
   página tiene que seguir midiendo el alto completo o el contenido salta
   (misma regla que el achique del header, ver --ari-header-h arriba). */
.arilart-topbar {
  overflow: hidden;
  max-height: 8rem;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .arilart-topbar { transition: max-height 0.25s ease, opacity 0.2s ease; }
}
.arilart-header.is-notice-hidden .arilart-topbar {
  max-height: 0;
  opacity: 0;
}

/* ---------- HEADER — achique suave al scrollear ----------
   El owner pidió que el header (12% del viewport a full size) se achique al
   scrollear. `assets/js/header-scroll.js` agrega/saca `.is-scrolled` en
   `header.arilart-header` pasado un umbral; acá sólo la transición visual.
   `!important` porque compite en especificidad exacta con las utilidades
   `py-4 md:py-6` que Tailwind (CDN) inyecta con el mismo peso — mismo patrón
   que `.arilart-chip-clear` en este archivo.
   ⚠️ La altura del header NUNCA se lee de acá para el padding de página: por
   diseño el achique es puramente visual y no debe generar layout shift
   (ver --ari-header-h arriba). */
@media (prefers-reduced-motion: no-preference) {
  .arilart-header nav,
  .arilart-header .arilart-wordmark {
    transition: padding 0.25s ease, font-size 0.25s ease;
  }
}
.arilart-header.is-scrolled nav {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.arilart-header.is-scrolled .arilart-wordmark {
  font-size: 1.75rem !important;
}

/* ---------- WOOCOMMERCE NOTICES (global) ----------
   WC imprime los avisos como <ul class="woocommerce-error"> o
   <div class="woocommerce-message|woocommerce-info">, sin estilo propio
   (el tema no carga el CSS de WooCommerce, así que salen como texto pelado
   arriba de la página). Los estilamos como tarjetas MD3 con ícono Material
   Symbols. Aplica donde sea que WC los imprima: carrito, checkout, mi-cuenta,
   producto, etc. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  position: relative;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0.95rem 1.25rem 0.95rem 3rem;
  border-radius: 0.75rem;
  border-left: 4px solid;
  font-family: 'Manrope', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li { list-style: none; margin: 0; padding: 0; }
.woocommerce-error li + li,
.woocommerce-message li + li,
.woocommerce-info li + li { margin-top: 0.35rem; }

/* Ícono (Material Symbols, fuente ya cargada globalmente) */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  position: absolute;
  left: 0.95rem;
  top: 0.9rem;
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.2;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Error → error-container / on-error-container */
.woocommerce-error {
  background: rgb(var(--ari-error-container));
  color: #93000a;
  border-left-color: rgb(var(--ari-error));
}
.woocommerce-error::before { content: "\e000"; color: rgb(var(--ari-error)); }

/* Mensaje / éxito → primary-fixed / primary */
.woocommerce-message {
  background: rgb(var(--ari-primary-fixed));
  color: rgb(var(--ari-primary));
  border-left-color: rgb(var(--ari-primary-container));
}
.woocommerce-message::before { content: "\e86c"; color: rgb(var(--ari-primary-container)); }

/* Info → secondary-fixed / on-secondary-fixed-variant */
.woocommerce-info {
  background: rgb(var(--ari-secondary-fixed));
  color: rgb(var(--ari-on-secondary-fixed-variant));
  border-left-color: rgb(var(--ari-secondary));
}
.woocommerce-info::before { content: "\e88e"; color: rgb(var(--ari-secondary)); }

/* Botones dentro de un aviso (Ver carrito, Acceder, etc.) */
.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
  display: inline-block;
  margin-left: 1rem;
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
  background: rgb(var(--ari-primary));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
}
.woocommerce-error .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover { opacity: 0.85; }

/* ---------- CHECKOUT ---------- */
/* ── WC field base styles ── */
.woocommerce-checkout .form-row { margin-bottom: 0; }
.woocommerce-checkout .form-row label {
  display: block; font-size: 0.7rem; font-family: 'Manrope', sans-serif;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgb(var(--ari-outline)); margin-bottom: 0.4rem;
}
.woocommerce-checkout .form-row abbr { color: rgb(var(--ari-error)); text-decoration: none; }
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid rgb(var(--ari-outline-variant)); border-radius: 0; padding: 0.5rem 0;
  font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: rgb(var(--ari-on-surface));
  outline: none; box-shadow: none !important; transition: border-color 0.2s;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus { border-bottom-color: rgb(var(--ari-primary)); }
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select { border-bottom-color: rgb(var(--ari-error)) !important; }
.woocommerce-checkout .woocommerce-validated input { border-bottom-color: rgb(var(--ari-primary)) !important; }
#payment .payment_methods { list-style: none; padding: 0; margin: 0; }
#payment .payment_box { background: rgb(var(--ari-surface-container)); padding: 1rem 1.5rem; border-radius: 0.5rem; margin-top: 0.5rem; }

/* ── Progress bar ── */
.arilart-step-dot {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; font-family: 'Manrope', sans-serif;
  transition: background-color 0.35s ease, color 0.35s ease;
  flex-shrink: 0; position: relative; z-index: 1;
}
.arilart-step-dot.is-active  { background: rgb(var(--ari-primary)); color: #fff; }
.arilart-step-dot.is-done    { background: rgb(var(--ari-primary-container)); color: rgb(var(--ari-on-primary-container)); }
.arilart-step-dot.is-future  { background: rgb(var(--ari-surface-container-high)); color: rgb(var(--ari-outline)); }
.arilart-step-line {
  flex: 1; height: 2px; background: rgb(var(--ari-surface-container-high));
  transition: background-color 0.35s ease;
}
.arilart-step-line.is-done { background: rgb(var(--ari-primary-container)); }
.arilart-step-label {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-family: 'Manrope', sans-serif;
  margin-top: 0.4rem; white-space: nowrap;
  transition: color 0.3s;
}
.arilart-step-label.is-active  { color: rgb(var(--ari-primary)); }
.arilart-step-label.is-done    { color: rgb(var(--ari-primary-container)); }
.arilart-step-label.is-future  { color: rgb(var(--ari-outline)); }

/* ── Step panels ── */
.arilart-step {
  display: none;
  animation: stepIn 0.3s ease forwards;
}
.arilart-step.is-active { display: block; }
@keyframes stepIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Checkout: re-render / recalculating loading state ── */
/* Applied by checkout.js between `update_checkout` and `updated_checkout`
   to the components whose data changes (shipping cards + summary totals). */

/* Summary value spans (subtotal / Envío / Total): dim + gentle pulse. */
.arilart-sidebar-subtotal-value.arilart-refreshing,
.arilart-sidebar-shipping-value.arilart-refreshing,
.arilart-sidebar-total-value.arilart-refreshing {
  animation: arilartPulse 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes arilartPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}

/* Shipping method cards: dim the cards + show a centered spinner. */
#arilart-shipping-methods-wrap.arilart-refreshing { position: relative; pointer-events: none; }
#arilart-shipping-methods-wrap.arilart-refreshing > * { opacity: 0.35; transition: opacity 0.2s ease; }
#arilart-shipping-methods-wrap.arilart-refreshing::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid rgb(var(--ari-outline-variant)); border-top-color: rgb(var(--ari-primary)); border-radius: 50%;
  animation: arilartSpin 0.7s linear infinite;
}
@keyframes arilartSpin { to { transform: rotate(360deg); } }

/* paqAR "Envío a sucursal": el plugin inyecta dos <li> (selects de provincia y
   sucursal) vía woocommerce_after_shipping_rate, que en nuestro template caen
   DENTRO del grid de métodos (#arilart-shipping-methods-wrap, grid-cols-2). Sin
   esto rompen el grid (cada <li> ocupa una celda) y los selects quedan sin estilo.
   → los hacemos full-width y les damos el estilo de input del checkout. */
#arilart-shipping-methods-wrap > li {
  grid-column: 1 / -1;
  order: 1;              /* siempre al final del grid, no entre las cards */
  list-style: none;
  margin: 0;
}
#arilart-shipping-methods-wrap > li + li { margin-top: 0.75rem; }
#arilart-shipping-methods-wrap .correoargentino_province_select,
#arilart-shipping-methods-wrap .correoargentino_branch_select {
  width: 100%;
  background: #fff;
  border: 1px solid rgb(var(--ari-outline-variant));
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  color: rgb(var(--ari-on-surface));
  outline: none;
  transition: border-color 0.2s;
}
#arilart-shipping-methods-wrap .correoargentino_province_select:focus,
#arilart-shipping-methods-wrap .correoargentino_branch_select:focus { border-color: rgb(var(--ari-primary)); }
#arilart-shipping-methods-wrap .correoargentino_branch_select[disabled] { opacity: 0.55; cursor: not-allowed; }

/* select2: el plugin oculta los <select> nativos y renderiza widgets select2.
   Las reglas de arriba son el fallback no-JS; estas estilan lo que el cliente ve.
   El control vive dentro del wrap (lo scopeamos por #id); el panel desplegable lo
   monta select2 en <body>, así que esas reglas son globales (sólo hay select2 de
   paqAR en el front). Espejamos el mismo input: blanco, borde rgb(var(--ari-outline-variant)), r .75, focus rgb(var(--ari-primary)). */
#arilart-shipping-methods-wrap .select2-container { width: 100% !important; }
#arilart-shipping-methods-wrap .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 2.875rem;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgb(var(--ari-outline-variant));
  border-radius: 0.75rem;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  transition: border-color 0.2s;
}
#arilart-shipping-methods-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1; min-width: 0;
  padding: 0;
  line-height: 1.3;
  color: rgb(var(--ari-on-surface));
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
}
#arilart-shipping-methods-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgb(var(--ari-outline)); }
#arilart-shipping-methods-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; top: 0; right: 0.85rem;
}
#arilart-shipping-methods-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: rgb(var(--ari-outline)) transparent transparent transparent;
}
#arilart-shipping-methods-wrap .select2-container--default.select2-container--open .select2-selection--single,
#arilart-shipping-methods-wrap .select2-container--default .select2-selection--single:focus {
  border-color: rgb(var(--ari-primary));
}
#arilart-shipping-methods-wrap .select2-container--default.select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent rgb(var(--ari-outline)) transparent;
}
#arilart-shipping-methods-wrap .select2-container--default.select2-container--disabled .select2-selection--single {
  background: rgb(var(--ari-surface-container-low)); opacity: 0.7; cursor: not-allowed;
}
/* Panel desplegable (en <body>) */
.select2-container--default .select2-dropdown {
  background: #fff;
  border: 1px solid rgb(var(--ari-outline-variant));
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px -10px rgb(var(--ari-on-surface) / 0.25);
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
}
.select2-container--default .select2-search--dropdown { padding: 0.5rem; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid rgb(var(--ari-outline-variant));
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
  color: rgb(var(--ari-on-surface));
  outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: rgb(var(--ari-primary)); }
.select2-container--default .select2-results__options { max-height: 16rem; }
.select2-container--default .select2-results__option {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  color: rgb(var(--ari-on-surface));
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: rgb(var(--ari-primary)); color: #fff;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: #eef0e6; color: rgb(var(--ari-primary));
}

/* ── Mobile: sticky bottom summary bar ── */
@media (max-width: 1023px) {
  .arilart-sticky-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgb(var(--ari-surface-container-low)); border-top: 1px solid rgb(var(--ari-outline-variant));
    padding: 0.875rem 1.25rem; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .arilart-checkout-wrap { padding-bottom: 6rem; }
  .arilart-sidebar-sheet {
    position: fixed; inset: 0; z-index: 50;
    background: rgb(var(--ari-on-surface) / 0.4); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .arilart-sidebar-sheet.is-open { opacity: 1; pointer-events: auto; }
  .arilart-sidebar-inner {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: #fff; border-radius: 1.5rem 1.5rem 0 0;
    padding: 1.5rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
    max-height: 80vh; overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  }
  @supports (height: 100dvh) {
    .arilart-sidebar-inner { max-height: 80dvh; }
  }
  .arilart-sidebar-sheet.is-open .arilart-sidebar-inner { transform: translateY(0); }
  .arilart-desktop-aside { display: none !important; }
}
@media (min-width: 1024px) {
  .arilart-sticky-bar { display: none !important; }
  .arilart-sidebar-sheet { display: none !important; }
}

/* ---------- MY ACCOUNT ---------- */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation-link a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 1rem; border-radius: 0.5rem;
  font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--ari-on-surface-variant));
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.woocommerce-MyAccount-navigation-link a:hover { background: rgb(var(--ari-surface-container)); color: rgb(var(--ari-primary)); }
.woocommerce-MyAccount-navigation-link.is-active a { background: rgb(var(--ari-primary)); color: #fff; }
.woocommerce-MyAccount-content h2 { font-family: 'Mic 32Bold', serif; color: rgb(var(--ari-primary)); font-size: 1.4rem; margin-bottom: 1rem; }
.woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; font-family: 'Manrope', sans-serif; font-size: 0.85rem; }
.woocommerce-MyAccount-content table th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgb(var(--ari-outline-variant)); color: rgb(var(--ari-on-surface-variant)); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; }
.woocommerce-MyAccount-content table td { padding: 0.75rem; border-bottom: 1px solid rgb(var(--ari-surface-variant)); color: rgb(var(--ari-on-surface)); vertical-align: middle; }
.woocommerce-MyAccount-content table tr:last-child td { border-bottom: 0; }
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
  background: rgb(var(--ari-primary)); color: #fff; padding: 0.6rem 1.4rem; border-radius: 0.5rem;
  font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  display: inline-block; border: none; cursor: pointer; transition: opacity 0.2s;
}
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover { opacity: 0.85; }
.woocommerce-MyAccount-content .form-row { margin-bottom: 1.25rem; }
.woocommerce-MyAccount-content .form-row label { display: block; font-size: 0.7rem; font-family: 'Manrope', sans-serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ari-outline)); margin-bottom: 0.4rem; }
.woocommerce-MyAccount-content .form-row input,
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgb(var(--ari-outline-variant)); padding: 0.5rem 0; font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: rgb(var(--ari-on-surface)); outline: none; box-shadow: none !important; transition: border-color 0.2s; }
.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row select:focus { border-bottom-color: rgb(var(--ari-primary)); }
/* Avisos: ahora unificados en la sección global "WOOCOMMERCE NOTICES". */

/* ── MI CUENTA: botones de acción (C4 + D1) ──
   Los templates de Mi cuenta (my-address, form-edit-address, orders) usan estas dos
   clases en vez de las de WooCommerce (`.woocommerce-Button`, `.edit`), que el tema no
   estila porque no carga el CSS de WC. Sin esto, "Modificar" salía como texto pelado. */
.woocommerce-MyAccount-content .arilart-btn-primary,
.woocommerce-MyAccount-content .arilart-btn-outline {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 1.2rem; border-radius: 0.5rem;
  font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; line-height: 1.2;
  transition: background 0.18s, color 0.18s, opacity 0.18s, border-color 0.18s;
}
.woocommerce-MyAccount-content .arilart-btn-primary {
  background: rgb(var(--ari-primary)); color: #fff; border: 1px solid rgb(var(--ari-primary));
}
.woocommerce-MyAccount-content .arilart-btn-primary:hover { opacity: 0.85; }
.woocommerce-MyAccount-content .arilart-btn-outline {
  background: transparent; color: rgb(var(--ari-primary)); border: 1px solid rgb(var(--ari-outline-variant));
}
.woocommerce-MyAccount-content .arilart-btn-outline:hover {
  background: rgb(var(--ari-primary-fixed)); border-color: rgb(var(--ari-primary-container));
}
.woocommerce-MyAccount-content .arilart-btn-primary:focus-visible,
.woocommerce-MyAccount-content .arilart-btn-outline:focus-visible {
  outline: 2px solid rgb(var(--ari-primary)); outline-offset: 2px;
}
.woocommerce-MyAccount-content .arilart-btn-primary[disabled] {
  opacity: 0.55; cursor: progress;
}

/* ── MI CUENTA: tarjetas de dirección y de pedido ──
   Refuerza en CSS plano lo que el template pide por Tailwind, para que la pantalla no
   dependa de que el CDN de Tailwind haya cargado. */
.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .arilart-orders .order {
  background: #fff; border: 1px solid rgb(var(--ari-outline-variant)); border-radius: 0.75rem; padding: 1.5rem;
}
.woocommerce-MyAccount-content .arilart-orders .order + .order { margin-top: 1rem; }
.woocommerce-MyAccount-content .woocommerce-Address address {
  font-style: normal; font-family: 'Manrope', sans-serif; font-size: 0.875rem;
  line-height: 1.6; color: rgb(var(--ari-on-surface));
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: rgb(var(--ari-outline)); margin: 0;
}
.woocommerce-MyAccount-content .arilart-order-status {
  display: inline-block; background: rgb(var(--ari-primary-fixed)); color: rgb(var(--ari-primary));
  font-family: 'Manrope', sans-serif; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  border-radius: 9999px; padding: 0.25rem 0.75rem;
}

/* Campos del formulario de dirección en 2 columnas (los pinta woocommerce_form_field). */
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }

/* ---------- LOGIN ---------- */
.arilart-auth-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgb(var(--ari-outline-variant)); padding: 0.5rem 0; font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: rgb(var(--ari-on-surface)); outline: none; box-shadow: none !important; transition: border-color 0.2s; }
.arilart-auth-input:focus { border-bottom-color: rgb(var(--ari-primary)); }

/* ---------- CARRITO — Calculadora de envío ----------
   El tema no carga el CSS de WooCommerce, así que los campos del formulario salen pelados.
   Mismo tratamiento que los del checkout (.woocommerce-checkout .form-row input): línea
   inferior, sin caja. */
.arilart-calc-field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(var(--ari-outline-variant));
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: 'Manrope', sans-serif;
  font-size: 0.85rem;
  color: rgb(var(--ari-on-surface));
  outline: none;
  box-shadow: none !important;
  transition: border-color 0.2s;
}
.arilart-calc-field:focus { border-bottom-color: rgb(var(--ari-primary)); }
.arilart-calc-field::placeholder { color: rgb(var(--ari-outline)); }
/* El <select> nativo trae su propia flecha y padding del UA: lo normalizamos. */
.arilart-shipping-calc select.arilart-calc-field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2376786c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.25rem;
}

/* ---------- CHECKOUT — Aceptación de Términos y Condiciones ----------
   El <input type="checkbox"> va oculto con .sr-only (NO display:none: tiene que seguir
   siendo enfocable por teclado y viajar en el POST). Lo visible es .arilart-terms-box,
   con el mismo lenguaje que las tarjetas de método de envío: rounded-xl, borde
   outline-variant y relleno primary al seleccionar.

   Por qué CSS y no variantes peer-* de Tailwind: el indicador (.arilart-terms-check) es
   DESCENDIENTE del hermano del input, y peer-* sólo alcanza hermanos directos. */
/* Display determinístico: `hidden` y `block` juntos en el mismo elemento dependen del
   orden en que el CDN de Tailwind emita las utilidades. Acá lo resuelve la especificidad:
   #id (100) para mostrar, #id.hidden (110) para ocultar, así `hidden` siempre gana.
   checkout.js sigue usando addClass/removeClass('hidden') sin cambios. */
#arilart-terms { display: block; }
#arilart-terms.hidden { display: none; }

.arilart-terms-box {
  transition: border-color 0.2s, background-color 0.2s;
}
.arilart-terms:hover .arilart-terms-box {
  border-color: rgb(var(--ari-primary) / 0.45);   /* primary @45% */
}

/* Caja del tilde */
.arilart-terms-check {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  display: grid;
  place-items: center;
  border: 2px solid rgb(var(--ari-outline-variant));              /* outline-variant */
  border-radius: 0.375rem;
  background: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}
.arilart-terms-check .material-symbols-outlined {
  color: #fff;                            /* on-primary */
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}

/* Estado marcado */
.arilart-terms input:checked ~ .arilart-terms-box {
  border-color: rgb(var(--ari-primary) / 0.35);
  background: #f6f8ef;                    /* tinte suave de primary sobre surface */
}
.arilart-terms input:checked ~ .arilart-terms-box .arilart-terms-check {
  background: rgb(var(--ari-primary));                    /* primary */
  border-color: rgb(var(--ari-primary));
}
.arilart-terms input:checked ~ .arilart-terms-box .material-symbols-outlined {
  opacity: 1;
  transform: scale(1);
}

/* Foco visible por teclado — el input está oculto, así que el anillo lo dibuja la caja */
.arilart-terms input:focus-visible ~ .arilart-terms-box {
  outline: 2px solid rgb(var(--ari-primary));
  outline-offset: 2px;
}

/* Estado de error: lo marca checkout.js si se intenta confirmar sin aceptar */
.arilart-terms.arilart-terms--error .arilart-terms-box {
  border-color: rgb(var(--ari-error));                  /* error */
  background: #fff8f7;
}
.arilart-terms.arilart-terms--error .arilart-terms-check {
  border-color: rgb(var(--ari-error));
}

/* Autoplay de imagen de producto en mobile (owner, 2026-08-31): no hay hover
   táctil, así que assets/js/card-autoplay.js alterna body.arilart-flip cada 2 s
   y estas reglas intercambian destacada ↔ galería[0]. Las clases van sólo en
   cards CON galería (product-card.php) — una card sin alt nunca se apaga.
   El transition duration-700 ya viene en las clases Tailwind de las imgs. */
@media (max-width: 767px) {
  body.arilart-flip .arilart-card-img-main { opacity: 0; }
  body.arilart-flip .arilart-card-img-alt  { opacity: 1; }
}