/*
Theme Name: Magic Stuff Store
Theme URI: https://store.newmagicstuff.com
Author: Federico Gonzalez
Author URI: http://federicogonzalez.com
Description: Theme custom para la tienda de Magic Stuff, hecho a medida para matchear la identidad visual de newmagicstuff.com (fondo oscuro #0A0A0F, acento violeta #6366F1, tipografía Montserrat 900). Compatible con WooCommerce.
Version: 1.47
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.6
WC requires at least: 8.0
WC tested up to: 9.0
Text Domain: magicstuff
*/

/* =========================================================
   1. VARIABLES DE MARCA
   Estos valores fueron extraídos directamente del CSS
   renderizado de newmagicstuff.com. Si el sitio original
   cambia de paleta, actualizá SOLO este bloque.
   ========================================================= */
:root {
  --ms-bg: #0A0A0F;
  --ms-bg-elevated: rgba(255, 255, 255, 0.035);
  --ms-bg-elevated-hover: rgba(255, 255, 255, 0.06);
  --ms-accent: #6366F1;
  --ms-accent-hover: #7C7FF5;
  --ms-accent-glow: rgba(99, 102, 241, 0.5);
  --ms-border: rgba(99, 102, 241, 0.18);
  --ms-text: #FFFFFF;
  --ms-text-secondary: #B0B0B8;
  --ms-text-muted: #6E6E78;
  --ms-success-bg: rgba(16, 185, 129, 0.08);
  --ms-success-text: #34D399;
  --ms-success-border: rgba(16, 185, 129, 0.25);
  --ms-error: #F87171;
  --ms-radius: 8px;
  --ms-radius-lg: 16px;
  --ms-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --ms-container: 1200px;
}

/* =========================================================
   2. RESET BÁSICO Y TIPOGRAFÍA BASE
   ========================================================= */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--ms-bg);
  color: var(--ms-text-secondary);
  font-family: var(--ms-font);
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* El CSS embebido de las páginas clonadas de newmagicstuff.com
   trae su propio "overflow-x: hidden" en el body (para evitar
   scroll horizontal de elementos decorativos) — pero eso convierte
   al body en su propio contenedor de scroll, lo que ROMPE
   position:sticky en cualquier hijo (como el índice de navegación
   de las landings largas). "clip" en vez de "hidden" logra lo
   mismo visualmente sin crear ese contexto de scroll. */
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Viñeta radial sutil, igual a la de newmagicstuff.com */
body {
  background-image: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 55%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ms-font);
  font-weight: 900;
  color: var(--ms-text);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.875rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1rem; color: var(--ms-text-secondary); }

a {
  color: var(--ms-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--ms-accent-hover); }

img { max-width: 100%; height: auto; display: block; }

.ms-accent-text { color: var(--ms-accent); }

.container,
.ms-container {
  max-width: var(--ms-container);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 80px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* =========================================================
   3. BOTONES (aplica a botones del theme Y a WooCommerce)
   ========================================================= */
.ms-btn,
.button,
.wp-block-button__link,
a.add_to_cart_button,
a.added_to_cart,
button.single_add_to_cart_button,
#place_order,
.checkout-button,
.wc-forward,
input#coupon_code + button,
form.checkout_coupon button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--ms-accent) !important;
  color: #FFFFFF !important;
  font-family: var(--ms-font);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 16px 28px;
  border: none;
  border-radius: var(--ms-radius);
  box-shadow: 0 0 36px var(--ms-accent-glow);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ms-btn:hover,
.button:hover,
a.add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
#place_order:hover,
.checkout-button:hover {
  background-color: var(--ms-accent-hover) !important;
  box-shadow: 0 0 44px var(--ms-accent-glow);
  transform: translateY(-1px);
  color: #fff !important;
}

/* Se sacó la flecha automática (::after) de todos los botones
   .ms-btn del sitio — a pedido, no aportaba nada visualmente. */

/* Los botones "Buy Now"/"More Info" del Home usan el SVG de
   flecha real de la landing de Ultra Sharpie Neo (en vez del ::after
   de texto "→"). El CSS embebido de esa página clonada agrega un
   ::after con flecha a CUALQUIER <a>, así que lo cancelamos acá
   puntualmente para no duplicar flechas. */
.ms-btn.ms-btn-svg-arrow::after {
  content: none !important;
}
.ms-btn-arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.ms-btn.ms-btn-outline {
  background-color: transparent !important;
  box-shadow: none;
  border: 1px solid var(--ms-accent);
  color: var(--ms-accent) !important;
}

/* =========================================================
   4. BADGES (ej. "Free Worldwide Shipping", stock)
   ========================================================= */
.ms-badge,
.onsale,
.stock.in-stock {
  display: inline-block;
  background: var(--ms-success-bg);
  color: var(--ms-success-text) !important;
  border: 1px solid var(--ms-success-border);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stock.out-of-stock {
  display: inline-block;
  background: rgba(248, 113, 113, 0.08);
  color: var(--ms-error) !important;
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* =========================================================
   5. CARDS / PANELES GENÉRICOS
   ========================================================= */
.ms-card {
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: 32px;
}

/* =========================================================
   6. HEADER / NAV
   ========================================================= */
.ms-header {
  /* fixed (no sticky) para que al estar oculto no deje un hueco
     vacío reservado en el flujo normal de la página. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* Oculto por defecto (arriba del todo de la página); aparece
     solo cuando el usuario scrollea hacia abajo (ver el JS en
     header.php que agrega/saca la clase .ms-header--visible). */
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.ms-header.ms-header--visible {
  transform: translateY(0);
}

/* En cualquier página que NO sea el Home, el header queda siempre
   visible/fijo (no se oculta al estar arriba del todo). En Home
   sigue el comportamiento de aparecer solo al hacer scroll. */
body:not(.home) .ms-header {
  transform: none !important;
}

/* Cuando estás logueado como admin, la barra negra de WordPress
   (arriba de todo, con más z-index que nuestro header) tapaba el
   botón de abrir menú en mobile — el clic le llegaba a la barra de
   admin, no al botón. WordPress expone el alto real de esa barra
   en la variable --wp-admin--admin-bar--height (cambia solo según
   el ancho de pantalla), así que corremos nuestro header y los
   íconos flotantes hacia abajo esa misma distancia. Un visitante
   sin sesión no tiene esta barra, así que no le afecta. */
body.admin-bar .ms-header {
  top: var(--wp-admin--admin-bar--height, 0px);
}
body.admin-bar .ms-header-icons.ms-header-icons--floating {
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 30px);
}
@media (max-width: 860px) {
  body.admin-bar .ms-header-icons.ms-header-icons--floating {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 30px);
  }
}

/* Íconos de cuenta + carrito: viven FUERA del <header> para poder
   quedar siempre visibles en Home, sin importar si el header (logo
   + menú) está oculto o no — flotan de forma independiente en la
   misma posición visual de siempre. */
.ms-header-icons.ms-header-icons--floating {
  position: fixed;
  /* 30px en vez de 20px: centra verticalmente con los links del
     menú (medido: el centro del nav queda ~10px más abajo que el
     top original de los íconos). */
  top: 30px;
  /* 40px en vez de 24px: un poco más separado del borde derecho. */
  right: 40px;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* En mobile (mismo breakpoint que el botón hamburguesa, 860px)
   los íconos flotantes de cuenta/carrito se pisaban con el botón
   de abrir menú — el toggle vive en el flujo normal del header
   pegado al borde derecho, y los íconos flotantes (fixed) también
   estaban ahí. Los corremos más a la izquierda para dejarle lugar. */
@media (max-width: 860px) {
  .ms-header-icons.ms-header-icons--floating {
    right: 24px;
    gap: 14px;
  }
}

/* Botón flotante "volver arriba" */
.ms-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ms-accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.ms-back-to-top:hover {
  filter: brightness(1.12);
}
.ms-back-to-top.ms-back-to-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* =========================================================
   20. LINK "VIEW CART" TRAS AGREGAR AL CARRITO (grid de tienda)
   Nuestra regla base de botones incluye .wc-forward (la clase que
   WooCommerce le pone al link "View cart" que aparece debajo del
   botón al agregar un producto), así que salía como un segundo
   botón grande pegado al de "Add to Cart" — se veía como un
   glitch de doble botón. Lo hacemos un link chico y liviano.
   ========================================================= */
ul.products li.product .added_to_cart.wc-forward {
  background: transparent !important;
  color: var(--ms-accent) !important;
  box-shadow: none !important;
  padding: 6px 0 0 !important;
  margin-top: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-transform: none !important;
  width: auto !important;
  align-self: center;
}
ul.products li.product .added_to_cart.wc-forward:hover {
  color: var(--ms-text) !important;
}

/* =========================================================
   19. BOTÓN FLOTANTE "BUY NOW" (landing de Ultra Sharpie Neo)
   Siempre visible (no depende de scroll, a diferencia del botón
   de volver arriba), en la esquina inferior izquierda para no
   chocar con el botón de volver arriba (que está a la derecha).
   ========================================================= */
/* Al lado del botón de "volver arriba" (48px de ancho + 12px de
   separación = 84px desde el borde derecho), y aparece junto con
   él al scrollear — antes estaba siempre visible en la esquina
   opuesta, ahora quedan agrupados prolijos en el mismo lugar. */
.ms-floating-buy {
  position: fixed;
  bottom: 24px;
  right: 84px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ms-accent) !important;
  color: #fff !important;
  font-family: var(--ms-font);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
}
.ms-floating-buy.ms-floating-buy--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.ms-floating-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(99, 102, 241, 0.6);
  color: #fff !important;
}
.ms-floating-buy::after {
  content: none !important;
}
.ms-floating-buy .ms-btn-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .ms-floating-buy {
    right: 74px;
    bottom: 16px;
    padding: 12px 18px;
    font-size: 0.78rem;
  }
}

/* =========================================================
   21. ÍNDICE DE NAVEGACIÓN INTERNA (landing pages largas)
   Barra angosta y secundaria, pegada (sticky) justo debajo del
   header real de la tienda — nunca lo tapa ni se confunde con él,
   tiene su propio estilo bien diferenciado (más chica, con borde
   inferior, fondo distinto).
   ========================================================= */
.ms-page-index {
  position: sticky;
  top: 81px; /* alto del header real en páginas que no son Home */
  z-index: 90;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ms-border);
}
/* Si estás logueado como admin, la barra de WordPress empuja el
   header hacia abajo (mismo caso que ya resolvimos para el header
   y los íconos flotantes) — sin esto, el header (con más z-index)
   tapa parte de este menú. */
body.admin-bar .ms-page-index {
  top: calc( 81px + var(--wp-admin--admin-bar--height, 0px) );
}
.ms-page-index-inner {
  max-width: var(--ms-container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ms-page-index-inner::-webkit-scrollbar {
  display: none;
}
.ms-page-index-inner a {
  flex-shrink: 0;
  padding: 14px 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ms-text-secondary);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ms-page-index-inner a:hover {
  color: var(--ms-text);
  border-bottom-color: var(--ms-accent);
}

body.admin-bar .ms-page-index.ms-page-index {} /* placeholder no-op para mantener el orden de cascada */
@media (max-width: 640px) {
  .ms-page-index { top: 69px; }
  body.admin-bar .ms-page-index { top: calc( 69px + var(--wp-admin--admin-bar--height, 0px) ); }
  .ms-page-index-inner { gap: 20px; padding: 0 16px; }
  .ms-page-index-inner a { font-size: 0.7rem; padding: 12px 0; }
}

/* =========================================================
   17. SECCIÓN COMPACTA "ULTRA SHARPIE NEO" (rediseño para Home)
   Reemplaza el bloque gigante clonado de newmagicstuff.com por
   un layout de 2 columnas (imagen + info), mucho más corto y
   sin necesidad de tanto scroll. Se apila a 1 columna en mobile.
   ========================================================= */
.ms-neo-section {
  padding: 70px 0;
}
.ms-neo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.ms-neo-media {
  position: relative;
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ms-border);
  display: block;
}
.ms-neo-media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ms-neo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ms-neo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0 30px var(--ms-accent-glow);
  transition: transform 0.2s ease;
}
.ms-neo-media:hover .ms-neo-play {
  transform: translate(-50%, -50%) scale(1.08);
}
/* =========================================================
   18. HERO COMPACTO (rediseño de la portada de arriba de todo)
   Reemplaza el hero clonado de newmagicstuff.com (.hero, casi
   100vh de alto, 240px de padding vertical) por uno mucho más
   corto, manteniendo el nombre, el logo, la frase y el "Scroll".
   ========================================================= */
.ms-hero-compact {
  /* Bastante más aire arriba: el header queda fijo en esta página
     (no es el Home real) y con poco padding-top se sentía pegado
     al menú. */
  padding: 150px 24px 90px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.ms-hero-compact-inner {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
.ms-hero-compact-name {
  font-size: clamp(2rem, 5.5vw, 2.9rem);
  font-weight: 900;
  color: var(--ms-accent);
  margin: 0;
  line-height: 1.1;
}
.ms-hero-compact-amp {
  color: var(--ms-text);
  font-weight: 400;
}
.ms-hero-compact-logo {
  width: 210px;
  height: auto;
  display: block;
}
.ms-hero-compact-tagline {
  color: var(--ms-text-secondary);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--ms-border);
}
.ms-hero-compact-tagline cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  color: var(--ms-text-secondary);
  opacity: 0.7;
  font-size: 0.85rem;
}
.ms-hero-compact-scroll {
  color: var(--ms-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
}

@media (max-width: 640px) {
  .ms-hero-compact { padding: 96px 20px 48px; }
  .ms-hero-compact-inner { gap: 18px; }
  .ms-hero-compact-logo { width: 160px; }
}

.ms-neo-kicker {
  text-align: center;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 40px;
  color: var(--ms-text);
}
.ms-neo-kicker span {
  display: block;
  color: var(--ms-accent);
}

.ms-neo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ms-accent);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.ms-neo-title {
  font-size: 2.4rem;
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--ms-text);
}
.ms-neo-tagline {
  color: var(--ms-accent);
  font-weight: 700;
  margin: 0 0 18px;
  font-size: 1.05rem;
}
.ms-neo-desc {
  color: var(--ms-text-secondary);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 480px;
}
.ms-neo-buy-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Botón secundario "More Info" — mismo tamaño que ms-btn pero sin
   relleno, para no competir visualmente con el CTA principal
   "Buy Now". */
.ms-btn.ms-btn-outline {
  /* Un poco más de presencia: borde violeta (no gris neutro) +
     fondo con tinte sutil, para que no pase desapercibido al lado
     del "Buy Now" pero sin competir con él. */
  background: rgba(99, 102, 241, 0.1) !important;
  color: var(--ms-accent) !important;
  border: 1.5px solid var(--ms-accent) !important;
  box-shadow: none !important;
}
.ms-btn.ms-btn-outline:hover {
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: var(--ms-accent) !important;
  color: var(--ms-text) !important;
}
.ms-neo-price {
  font-size: 2rem;
  font-weight: 900;
  color: var(--ms-text);
  line-height: 1;
}
/* El HTML de precio que genera WooCommerce (get_price_html) viene
   envuelto en sus propios spans (.woocommerce-Price-amount, etc.)
   que traen su propio tamaño/peso/color chico y gris — pisaban
   nuestro estilo grande y blanco. Forzamos que hereden el estilo
   del contenedor .ms-neo-price en vez del suyo propio. */
.ms-neo-price .woocommerce-Price-amount,
.ms-neo-price .woocommerce-Price-amount bdi,
.ms-neo-price .woocommerce-Price-currencySymbol {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.ms-neo-price del {
  opacity: 0.5;
  font-weight: 400;
  font-size: 1.2rem;
  margin-right: 8px;
}
.ms-neo-price ins {
  text-decoration: none;
}
.ms-neo-price span:not(.woocommerce-Price-amount):not(.woocommerce-Price-currencySymbol) {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ms-text-secondary);
}
.ms-neo-shipping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ms-success-text);
  background: var(--ms-success-bg);
  border: 1px solid var(--ms-success-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
}

@media (max-width: 860px) {
  .ms-neo-section { padding: 48px 0; }
  .ms-neo-grid { grid-template-columns: 1fr; gap: 28px; }
  .ms-neo-title { font-size: 1.9rem; }
  .ms-neo-desc { max-width: 100%; }
}

@media (max-width: 640px) {
  /* En pantallas chicas, precio + Buy Now + More Info en una fila
     con wrap quedaban desalineados (el precio grande empujaba los
     botones de forma rara). Los apilamos prolijos, uno debajo del
     otro, con los botones a ancho completo. */
  .ms-neo-buy-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .ms-neo-price {
    font-size: 1.6rem;
  }
  .ms-neo-buy-row .ms-btn {
    width: 100%;
  }
  .ms-neo-shipping {
    display: inline-flex;
  }
}

.ms-header-inner {
  max-width: var(--ms-container);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ms-logo {
  font-family: var(--ms-font);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--ms-text);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.ms-logo img {
  max-height: 40px;
  width: auto !important; /* evita que el atributo width="" del HTML deforme la imagen */
  height: 40px;
}
.ms-logo span { color: var(--ms-accent); }

.ms-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.ms-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.ms-nav ul li a {
  color: var(--ms-text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ms-nav ul li a:hover { color: var(--ms-text); }

.ms-header-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ms-account-link {
  display: flex;
  align-items: center;
  color: var(--ms-text);
  transition: color 0.2s ease;
}
.ms-account-link:hover {
  color: var(--ms-accent);
}

.ms-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--ms-text);
  font-weight: 700;
}

.ms-cart-count {
  background: var(--ms-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 6px;
}

.ms-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  color: var(--ms-text);
  padding: 8px 12px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .ms-nav ul { display: none; }
  .ms-menu-toggle { display: inline-flex; }

  /* Nunca existía el CSS para mostrar el menú una vez que el JS le
     agrega la clase .ms-nav-open al tocar el botón hamburguesa —
     el toggle cambiaba la clase bien, pero visualmente no pasaba
     nada. Lo mostramos como un panel desplegable debajo del header,
     ancho completo. */
  .ms-nav ul.ms-nav-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: var(--ms-header-h, 74px);
    left: 0;
    right: 0;
    background: var(--ms-bg);
    border-bottom: 1px solid var(--ms-border);
    padding: 8px 24px 20px;
    z-index: 100;
  }
  .ms-nav ul.ms-nav-open li a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--ms-border);
    font-size: 0.95rem;
  }
  .ms-nav ul.ms-nav-open li:last-child a {
    border-bottom: none;
  }
}

/* =========================================================
   7. HERO / PÁGINAS
   ========================================================= */
.ms-hero {
  text-align: center;
  padding: 100px 24px 60px;
}
.ms-hero p.subtitle {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* =========================================================
   7.5 WRAPPER DE PÁGINAS WOOCOMMERCE POR DEFECTO (Shop, Cart,
   Checkout, Producto individual). Estas páginas usan el wrapper
   nativo <main class="site-main"> que WooCommerce genera automáticamente
   via woocommerce_before_main_content / woocommerce_after_main_content,
   y NO pasa por nuestro .ms-container. Sin este bloque, esas páginas
   quedan pegadas a los bordes de la pantalla (sin el padding lateral
   que sí tiene la portada). Replicamos acá el mismo ancho/padding.
   ========================================================= */
/* Solo el contenedor externo (#primary) lleva el max-width/padding.
   main.site-main vive ANIDADO dentro de #primary (así arma WooCommerce
   el wrapper por defecto), así que si le diéramos padding a los dos,
   se resta dos veces y el contenido queda más angosto de lo que
   debería — por eso quedaba una columna afuera en el grid. */
#primary {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
main.site-main {
  width: 100%;
}

/* =========================================================
   8. WOOCOMMERCE — GRID DE PRODUCTOS (SHOP)
   ========================================================= */
ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 40px 0;
  /* Centrado: cuando el ancho disponible no da para una columna más
     completa (ej. entran 3 en vez de 4), evita que el espacio libre
     se acumule todo del lado derecho — lo reparte a ambos lados. */
  justify-content: center;
}

ul.products li.product {
  /* Flex en vez de ancho fijo: cada card intenta tener ~260px de base
     y crece para llenar espacio sobrante de su fila. */
  flex: 0 1 260px;
  max-width: 260px;
  width: auto;
  float: none !important;
  margin: 0 !important;
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: 20px !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  /* Column flex: así el botón siempre queda anclado abajo de la
     card sin importar si el título/precio ocupan 1 o 2 líneas. */
  display: flex;
  flex-direction: column;
}

/* Fix: bug de renderizado donde el primer item del grid completo
   (no de cada fila, solo el global) recibe un corrimiento fantasma
   igual a un "gap" — confirmado empíricamente, es consistente y
   reproducible. Se cancela con un margin-left negativo exacto. */
ul.products li.product:first-child {
  margin-left: -28px !important;
}

/* Anula también el nth-child de WooCommerce que agrega
   clear:left cada N elementos (parte del sistema de floats viejo). */
ul.products li.product.first,
ul.products li.product.last {
  clear: none !important;
  margin-right: 0 !important;
}

ul.products li.product:hover {
  border-color: var(--ms-accent);
  transform: translateY(-4px);
}

ul.products li.product img {
  border-radius: var(--ms-radius);
  margin-bottom: 16px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

ul.products li.product .woocommerce-loop-product__title {
  color: var(--ms-text);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 8px 0 6px;
  /* Reserva siempre el alto de 2 líneas, aunque el nombre entre en 1,
     para que el precio/botón arranquen en la misma posición en
     todas las cards de la fila sin importar el largo del nombre.
     51px = 2 líneas reales medidas en el grid (no 36px que había
     calculado mal antes, por eso quedaba desalineado igual). */
  min-height: 51px;
}

ul.products li.product .price {
  color: var(--ms-accent) !important;
  font-weight: 700;
  font-size: 1.1rem;
}

ul.products li.product .price del {
  color: var(--ms-text-muted) !important;
  opacity: 0.7;
  margin-right: 8px;
}
ul.products li.product .price ins {
  text-decoration: none;
  color: var(--ms-accent) !important;
}

ul.products li.product .button {
  /* margin-top:auto empuja el botón al fondo de la card (que ya es
     flex-column), así queda a la misma altura en toda la fila. */
  margin-top: auto !important;
  width: 100%;
  padding: 12px 18px !important;
  font-size: 14px !important;
  text-align: center !important;
}

ul.products li.product .onsale {
  position: absolute;
  top: 16px;
  left: 16px;
}

/* =========================================================
   9. WOOCOMMERCE — PÁGINA DE PRODUCTO INDIVIDUAL
   ========================================================= */
.single-product div.product {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  margin: 40px 0 80px;
  align-items: start;
}

/* WooCommerce trae por defecto "width: 48%; float: left;" en
   .images/.summary (pensado para un layout viejo con floats). Al
   meterlos dentro de nuestro grid, ese 48% se calcula sobre el
   ancho de LA COLUMNA del grid (no el contenedor completo), y
   termina achicando la imagen del producto a la mitad de lo que
   debería ocupar. Forzamos que llenen toda su columna del grid. */
.single-product div.product .images,
.single-product div.product .summary {
  width: 100% !important;
  float: none !important;
}

/* WooCommerce mete TODO (galería, resumen, descripción/tabs y
   productos relacionados) dentro del mismo div.product, que ahora
   es un grid de 2 columnas. Sin esto, la descripción y los
   relacionados se reparten en esas 2 columnas como si fueran la
   imagen y el resumen — quedan apretados y en el orden equivocado.
   Forzamos que ocupen TODO el ancho (las 2 columnas) y queden
   apilados debajo, en su orden natural: descripción primero,
   relacionados después. */
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products {
  grid-column: 1 / -1;
}
.single-product div.product .woocommerce-tabs {
  margin-top: 24px;
}
.single-product div.product .related.products {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--ms-border);
}

@media (max-width: 860px) {
  .single-product div.product { grid-template-columns: 1fr; }
}

.single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--ms-radius-lg);
  border: 1px solid var(--ms-border);
}

.single-product div.product .summary h1.product_title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.single-product div.product .summary p.price {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--ms-accent);
  margin-bottom: 20px;
}
.single-product div.product .summary p.price del {
  color: var(--ms-text-muted);
  font-weight: 400;
  font-size: 1.1rem;
}

.single-product div.product .summary .woocommerce-product-details__short-description {
  color: var(--ms-text-secondary);
  margin-bottom: 24px;
}

.single-product div.product .summary .price,
.single-product div.product .woocommerce-variation-price .price {
  color: var(--ms-accent) !important;
}

/* Tabla de variaciones (ej. "Pack Size" con desplegable) */
table.variations {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
}
table.variations th.label {
  text-align: left;
  white-space: nowrap;
  padding-right: 20px;
  vertical-align: middle;
  color: var(--ms-text);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  width: 1%;
}
table.variations td.value {
  padding: 8px 0;
}
table.variations td.value select {
  min-width: 220px;
}
a.reset_variations {
  display: inline-block;
  margin-top: 10px;
  color: var(--ms-text-secondary);
  font-size: 0.85rem;
  text-decoration: underline;
}
.woocommerce-variation-description {
  color: var(--ms-text-secondary);
  margin: 12px 0;
}

.single-product form.cart {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.single-product .quantity input.qty {
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  color: var(--ms-text);
  border-radius: var(--ms-radius);
  padding: 14px;
  width: 70px;
  font-family: var(--ms-font);
  text-align: center;
}

.woocommerce-tabs {
  margin-top: 60px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 30px;
}
.woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  gap: 24px;
  padding: 0;
  margin-bottom: 24px;
}
.woocommerce-tabs ul.tabs li a {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ms-text-secondary);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--ms-accent); }

/* Related products usa el mismo grid que ul.products */

/* =========================================================
   10. FORMULARIOS GENÉRICOS (contacto, cupón, checkout)
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  background: var(--ms-bg-elevated) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text) !important;
  border-radius: var(--ms-radius) !important;
  padding: 14px 16px !important;
  font-family: var(--ms-font) !important;
  width: 100%;
}

input::placeholder, textarea::placeholder {
  color: var(--ms-text-muted) !important;
}

label {
  color: var(--ms-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* =========================================================
   11. WOOCOMMERCE — CARRITO Y CHECKOUT
   ========================================================= */
table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
}

table.shop_table th {
  text-align: left;
  padding: 16px;
  color: var(--ms-text);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--ms-border);
}

table.shop_table td {
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--ms-text-secondary);
}

.cart-collaterals .cart_totals,
#order_review {
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: 28px;
}

.woocommerce-checkout #payment {
  background: var(--ms-bg-elevated);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: 24px;
}

.woocommerce-message,
.woocommerce-info {
  background: var(--ms-success-bg) !important;
  border-top-color: var(--ms-success-text) !important;
  color: var(--ms-text) !important;
  border-radius: var(--ms-radius);
}

.woocommerce-error {
  background: rgba(248, 113, 113, 0.08) !important;
  border-top-color: var(--ms-error) !important;
  color: var(--ms-text) !important;
  border-radius: var(--ms-radius);
}

/* =========================================================
   12. FOOTER
   ========================================================= */
.ms-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 70px 24px 30px;
  margin-top: 60px;
}

.ms-footer-inner {
  max-width: var(--ms-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
}

@media (max-width: 700px) {
  .ms-footer-inner { grid-template-columns: 1fr; }
}

.ms-footer h4 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.ms-social-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ms-social-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ms-text-secondary);
  font-weight: 500;
}

.ms-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.52);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ms-social-list li a:hover .ms-social-icon {
  color: var(--ms-accent);
  border-color: var(--ms-accent);
}

.ms-social-icon svg {
  width: 15px;
  height: 15px;
}

.ms-footer-bottom {
  max-width: var(--ms-container);
  margin: 50px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--ms-text-muted);
}

/* =========================================================
   13. UTILIDADES
   ========================================================= */
.ms-text-center { text-align: center; }

/* =========================================================
   16. FIX: animación ".reveal" del clon del Home
   El script original de newmagicstuff.com muestra estas secciones
   con una animación de aparición al hacer scroll (empiezan en
   opacity:0 y un IntersectionObserver las revela). Al recortar la
   página (ahora es mucho más corta), el punto en el que el
   observer dispara ya no coincide bien y algunas secciones se
   quedan invisibles para siempre. Se fuerza que estén siempre
   visibles, para no depender de esa animación.
   ========================================================= */
/* Ya no restringido a .home: este bug de la animación de
   aparición-al-scroll (.reveal empieza en opacity:0 y depende de
   un IntersectionObserver que no siempre dispara bien, sobre todo
   en páginas más cortas que la original) puede repetirse en
   cualquier página clonada de newmagicstuff.com, no solo el Home. */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* =========================================================
   15. CROSS-SELLS DEL CARRITO ("You may be interested in...")
   Este bloque de WooCommerce (Cart Block) usa una estructura y
   clases totalmente distintas al grid de la tienda (ul.products),
   así que nunca quedó estilizado: las cards no tenían fondo/borde,
   usaban display:inline-block con padding como espaciado (en vez
   de flex/gap), las imágenes no tenían aspect-ratio fijo (quedaban
   todas de alturas distintas), y el precio no usaba el color de
   marca. Acá lo alineamos con el resto del sitio.
   ========================================================= */
.wp-block-woocommerce-cart-cross-sells-block {
  margin-top: 20px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.wp-block-woocommerce-cart-cross-sells-block > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.cross-sells-product {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 160px !important;
  max-width: 220px !important;
  padding: 16px !important;
  margin: 0 !important;
  background: var(--ms-bg-elevated) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
}

.wc-block-components-product-image {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: var(--ms-radius) !important;
  margin-bottom: 12px !important;
}
.wc-block-components-product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.wc-block-components-product-name {
  /* Nombre del producto en la fila principal del carrito (arriba
     de "You may be interested in..."). Traía por defecto peso 500,
     13px y sin mayúsculas — mucho más liviano que el resto de los
     títulos del sitio (900, 16px, uppercase), por eso se notaba
     "distinto" al lado de las recomendaciones de abajo. */
  color: var(--ms-text) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}
.wc-block-components-product-name:hover {
  color: var(--ms-accent) !important;
}

.wc-block-components-product-image a {
  /* Sin esto, el <a> que envuelve la imagen queda sin alto definido
     (auto), lo cual rompe la cadena de height:100% del img de arriba
     -> el navegador terminaba usando el aspect-ratio natural de la
     FOTO en vez de llenar el cuadrado, dejando espacio vacío. */
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.wc-block-components-product-title {
  color: var(--ms-text) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  min-height: 46px !important;
  margin: 0 0 8px !important;
}

.wc-block-components-product-price,
.wc-block-components-product-price__value {
  color: var(--ms-accent) !important;
  font-weight: 400 !important;
  font-size: 0.857rem !important;
}
.cross-sells-product .wc-block-components-product-price {
  margin-bottom: 12px !important;
}

.wc-block-components-product-button {
  margin-top: auto !important;
}
.wc-block-components-product-button .wp-block-button__link {
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  /* Mismos valores exactos que el botón del grid de la tienda
     (ul.products li.product .button), que traía por defecto un
     padding mucho más grande (16px 28px) haciendo que se viera
     enorme comparado con el resto del sitio. */
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  text-transform: uppercase !important;
}

.ms-text-center { text-align: center; }

/* =========================================================
   14. RESPONSIVE — GRID DE PRODUCTOS EN MOBILE
   Con flex-basis fijo (260px), en pantallas angostas solo entra
   1 card por fila, y como quedan alineadas a la izquierda (para
   que en desktop varias-por-fila midan lo mismo), en mobile se ven
   "corridas hacia la izquierda" con un hueco vacío a la derecha.
   Acá hacemos que cada card ocupe el 100% del ancho disponible
   en vez de un tamaño fijo, para que quede centrada/completa.
   ========================================================= */
@media (max-width: 600px) {
  ul.products li.product {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (min-width: 601px) and (max-width: 860px) {
  ul.products li.product {
    flex: 1 1 calc(50% - 14px);
    max-width: calc(50% - 14px);
  }
}
.ms-mt-0 { margin-top: 0; }