/* Estilos Minimalistas KRONOS (HTML5 + CSS3 Moderno) */

:root {
  --store-primary: #18181b;
  --store-accent: #2563eb;
  --store-bg: #fafafa;
  --store-font: 'Outfit', 'Inter', sans-serif;
}

body.store-dynamic-theme {
  background-color: var(--store-bg) !important;
  font-family: var(--store-font) !important;
  accent-color: var(--store-accent);
}

.store-bg-primary {
  background-color: var(--store-primary) !important;
}

.store-text-primary {
  color: var(--store-primary) !important;
}

.store-bg-accent {
  background-color: var(--store-accent) !important;
}

/* Estilos dinámicos de tarjetas según configuración del Admin */
body[data-card-style="bordered"] .product-card-box {
  background: #ffffff;
  border: 1.5px solid #e4e4e7;
  padding: 0.85rem;
  border-radius: 1.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

body[data-card-style="sharp"] .product-card-box,
body[data-card-style="sharp"] .product-card-media,
body[data-card-style="sharp"] .product-action-btn {
  border-radius: 0px !important;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f4f4f5;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

/* ==========================================================================
   Animaciones Modernas de Top-Layer para <dialog> (@starting-style + overlay)
   ========================================================================== */

/* Estado Abierto (Visible) para modales centrados */
dialog.modal-dialog[open] {
  opacity: 1;
  transform: scale(1);

  @starting-style {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Estado Cerrado / Base para modales centrados */
dialog.modal-dialog {
  opacity: 0;
  transform: scale(0.95);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-behavior: allow-discrete;
}

/* Página independiente: reemplaza al catálogo dentro de la tienda */
main.is-page-view > :not(#store-page-view) {
  display: none !important;
}

.legal-rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

/* Vista rápida: espacio cuadrado de hasta 1080px para ver cada foto completa.
   En pantallas menores se reduce para que el modal nunca se salga de la ventana. */
.qv-image-frame,
.qv-image-hero {
  aspect-ratio: 1;
}

.qv-image-frame {
  width: 100%;
}

@media (min-width: 1024px) {
  #quickview-dialog {
    --qv-image-size: min(1080px, calc(100vw - 26rem), calc(90dvh - 9.5rem));
    max-width: calc(var(--qv-image-size) + 24rem);
  }

  .qv-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .qv-layout > :first-child > * {
    max-width: var(--qv-image-size);
  }

  .qv-image-frame {
    width: var(--qv-image-size);
  }

  .qv-image-hero {
    aspect-ratio: auto;
    height: var(--qv-image-size);
  }
}

/* Estado Abierto (Visible) para Carrito Off-Canvas Lateral */
dialog.drawer-dialog[open] {
  opacity: 1;
  transform: translateX(0);

  @starting-style {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Estado Cerrado / Base para Carrito Off-Canvas Lateral */
dialog.drawer-dialog {
  opacity: 0;
  transform: translateX(100%);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-behavior: allow-discrete;
}

/* Animación de ::backdrop */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition:
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete,
    background-color 0.3s ease-out,
    backdrop-filter 0.3s ease-out;
}

dialog[open]::backdrop {
  background-color: rgba(9, 9, 11, 0.55);
  backdrop-filter: blur(4px);

  @starting-style {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
  }
}

/* Accesibilidad: Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  dialog.modal-dialog,
  dialog.drawer-dialog {
    transform: none;
    transition-duration: 0.1s;
  }

  @starting-style {
    dialog.modal-dialog[open],
    dialog.drawer-dialog[open] {
      transform: none;
    }
  }
}

/* ==========================================================================
   Tipografía para el Editor Visual WYSIWYG y Vista Previa de Políticas Legales
   (H1 a H6, Párrafo, Negritas, Cursivas, Listas, Citas y Enlaces)
   ========================================================================== */
.legal-rich-content h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #18181b;
  margin-top: 1.1rem;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.legal-rich-content h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #18181b;
  margin-top: 1rem;
  margin-bottom: 0.45rem;
  line-height: 1.3;
}

.legal-rich-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #18181b;
  margin-top: 0.9rem;
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.legal-rich-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #27272a;
  margin-top: 0.75rem;
  margin-bottom: 0.3rem;
}

.legal-rich-content h5 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #3f3f46;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.65rem;
  margin-bottom: 0.25rem;
}

.legal-rich-content h6 {
  font-size: 0.78rem;
  font-weight: 700;
  color: #52525b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.55rem;
  margin-bottom: 0.2rem;
}

.legal-rich-content p {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #3f3f46;
  margin-bottom: 0.65rem;
}

.legal-rich-content ul {
  list-style-type: disc;
  padding-left: 1.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: #3f3f46;
}

.legal-rich-content ol {
  list-style-type: decimal;
  padding-left: 1.4rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: #3f3f46;
}

.legal-rich-content li {
  margin-bottom: 0.25rem;
  line-height: 1.55;
}

.legal-rich-content blockquote {
  border-left: 3px solid #2563eb;
  background-color: #eff6ff;
  padding: 0.65rem 0.9rem;
  border-radius: 0 0.75rem 0.75rem 0;
  font-style: italic;
  color: #1e3a8a;
  margin: 0.75rem 0;
  font-size: 0.8rem;
}

.legal-rich-content hr {
  border: 0;
  border-top: 1px solid #e4e4e7;
  margin: 1rem 0;
}

.legal-rich-content a {
  color: #2563eb;
  text-decoration: underline;
  font-weight: 600;
}

/* ==========================================================================
   ESTILOS DEDICADOS PARA LOS 6 THEMES
   ========================================================================== */

/* THEME 1: RAMTEC INDUSTRIAL BRUTALIST */
body[data-theme-style="ramtec_industrial"] {
  --store-primary: #18181b;
  --store-accent: #2563eb;
  --store-bg: #fafafa;
  --store-font: 'Inter', sans-serif;
}

/* THEME 2: LUXURY BOUTIQUE LOOKBOOK */
body[data-theme-style="editorial_lookbook"] {
  --store-primary: #4c0519;
  --store-accent: #e11d48;
  --store-bg: #fff1f2;
  --store-font: 'Outfit', sans-serif;
}

/* THEME 3: MODERN COMMERCE GRID */
body[data-theme-style="minimal_classic"] {
  --store-primary: #0f172a;
  --store-accent: #0284c7;
  --store-bg: #f8fafc;
  --store-font: 'Plus Jakarta Sans', sans-serif;
}

/* THEME 4: CYBER NEON TECH HUD (DARK MODE) */
body[data-theme-style="cyber_dark_neon"] {
  --store-primary: #06b6d4;
  --store-accent: #10b981;
  --store-bg: #070b14;
  --store-font: 'Space Grotesk', monospace;
  background-color: #070b14 !important;
  color: #f1f5f9 !important;
}

body[data-theme-style="cyber_dark_neon"] .glass-panel {
  background: rgba(10, 15, 29, 0.92) !important;
  border-color: rgba(6, 182, 212, 0.25) !important;
  color: #f1f5f9 !important;
}

body[data-theme-style="cyber_dark_neon"] header a,
body[data-theme-style="cyber_dark_neon"] header button {
  color: #e2e8f0 !important;
}

.cyber-glow-box {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
  border: 1px solid rgba(6, 182, 212, 0.5);
}

.cyber-glow-box:hover {
  box-shadow: 0 0 28px rgba(6, 182, 212, 0.55);
}

.cyber-laser-bar {
  background: linear-gradient(90deg, #06b6d4, #10b981);
  box-shadow: 0 0 10px #10b981;
}

/* THEME 5: WARM ARTISAN & BOTANICAL */
body[data-theme-style="organic_artisan"] {
  --store-primary: #451a03;
  --store-accent: #d97706;
  --store-bg: #faf6ed;
  --store-font: 'Playfair Display', Georgia, serif;
  background-color: #faf6ed !important;
}

.artisan-arch-card {
  border-radius: 2.2rem 2.2rem 1.2rem 1.2rem;
  box-shadow: 0 4px 20px rgba(69, 26, 3, 0.06);
}

.artisan-stitched-box {
  border: 1.5px dashed #d97706;
  background-color: #fffdf9;
}

/* THEME 6: POP ART RETRO & Y2K NEO-BRUTALIST */
body[data-theme-style="pop_retro_neo"] {
  --store-primary: #7c3aed;
  --store-accent: #facc15;
  --store-bg: #fffbeb;
  --store-font: 'Plus Jakarta Sans', sans-serif;
  background-color: #fffbeb !important;
}

.pop-neo-shadow {
  box-shadow: 5px 5px 0px #000000 !important;
  border: 2.5px solid #000000 !important;
  transition: all 0.15s ease-out;
}

.pop-neo-shadow:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px #000000 !important;
}

.pop-neo-shadow:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0px #000000 !important;
}

.pop-sticker-badge {
  box-shadow: 3px 3px 0px #000000;
  border: 2px solid #000000;
}



/* Campo de búsqueda desactivado en Diseño → Theme */
.store-header.search-off .store-header-search {
  display: none;
}

/* Posición del logotipo en la cabecera (app.js asigna data-logo-position desde store_settings) */
.store-header[data-logo-position="center"] {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.store-header[data-logo-position="center"] .store-header-search {
  grid-column: 1;
  grid-row: 1;
}

.store-header[data-logo-position="center"] .store-header-logo {
  grid-column: 2;
  grid-row: 1;
}

.store-header[data-logo-position="center"] .store-header-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.store-header[data-logo-position="right"] .store-header-search {
  order: 1;
}

.store-header[data-logo-position="right"] .store-header-actions {
  order: 2;
}

.store-header[data-logo-position="right"] .store-header-logo {
  order: 3;
}

@media (min-width: 640px) {
  .store-header[data-logo-position="right"] .store-header-actions {
    margin-left: auto;
  }
}

/* En móvil los iconos deben ocupar menos de media cabecera para que el logo quede en el centro real */
@media (max-width: 639px) {
  .store-header[data-logo-position="center"] {
    gap: 0.5rem;
  }

  .store-header[data-logo-position="center"] .store-header-actions {
    gap: 0.25rem;
  }
}