/* ==========================================================================
   Fardatxo Forge — hoja de estilos del sitio público
   CSS estático (sin build) para simplificar el despliegue en DreamHost.
   Paleta y tipografías derivadas de las imágenes de referencia.
   ========================================================================== */

:root {
    --color-bg: #ffffff;
    --color-surface: #faf8f5;
    --color-ink: #1c1a19;
    --color-ink-soft: #6f6a66;
    --color-line: #e7e2dc;
    --color-accent: #d98878;      /* coral/salmón de titulares y precios */
    --color-accent-dark: #c06f5f;
    --color-cta: #159e8c;         /* teal de "AÑADIR AL CARRO" */
    --color-cta-dark: #0f7d6f;
    --color-sale: #b3402f;

    --font-serif: var(--font-sans); /* antes: "Cormorant Garamond", "EB Garamond", Georgia, serif; ahora igual que --font-sans a peticion */
    --font-sans: "Jost", "Century Gothic", "Segoe UI", sans-serif;

    --maxw: 1240px;
    --gap: 1.5rem;
    --radius: 2px;
    --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .04);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent-dark); }

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 .5em;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.25rem;
}
/* Variante mas ancha para secciones con cards de producto. */
.container--wide {
    max-width: 1500px;
}

.text-accent { color: var(--color-accent); }
.muted { color: var(--color-ink-soft); }
.center { text-align: center; }

/* ---------- Barra superior ------------------------------------------------ */
.topbar {
    background: var(--color-ink);
    color: #fff;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    padding: .5rem 1rem;
}

/* ---------- Cabecera / navegación ---------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    z-index: 50;
}
.site-header .container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: .9rem;
    padding-bottom: .9rem;
    position: relative;
}
/* Selector de idioma con banderas, al final del header (ver header.blade.php). */
.lang-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.lang-switch a {
    display: inline-flex;
    padding-bottom: .25rem;
    border-bottom: 2px solid transparent;
    opacity: .45;
    filter: grayscale(55%);
    transition: opacity .15s ease, filter .15s ease;
}
.lang-switch a:hover { opacity: .75; }
.lang-switch a.is-active {
    opacity: 1;
    filter: none;
    border-bottom-color: var(--color-accent);
}
.lang-switch svg {
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand-name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
}
.brand-tag {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.main-nav { display: flex; gap: 1.75rem; margin: 0 auto; }
.main-nav a {
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-ink);
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a.active { border-bottom-color: var(--color-accent); }

/* En móvil/tablet estos wrappers no deben alterar el layout flex existente:
   se "desaparecen" con display:contents y sus hijos siguen siendo hijos
   directos de .site-header .container a efectos de order/flex-wrap. En
   escritorio (ver breakpoint más abajo) .nav-right sí se convierte en un
   grupo real. .nav-actions agrupa los iconos y la hamburguesa para que,
   si no caben junto al logo, pasen juntos a una 2a fila en vez de que la
   hamburguesa quede sola (ver @media max-width:900px más abajo). */
.nav-right { display: contents; }
.nav-actions { display: contents; }
.nav-utils { display: flex; align-items: center; gap: 1.1rem; }
.nav-utils a { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.nav-icons { display: flex; gap: .9rem; align-items: center; }
.nav-icons a { font-size: 1.1rem; }

/* Botón hamburguesa: oculto en escritorio, visible en móvil (ver responsive). */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: var(--color-ink);
    transition: transform .2s ease, opacity .2s ease;
}
.site-header.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cart-count {
    display: inline-block;
    min-width: 1.15rem;
    padding: 0 .25rem;
    margin-left: .15rem;
    background: var(--color-accent);
    color: #fff;
    border-radius: 999px;
    font-size: .65rem;
    line-height: 1.15rem;
    text-align: center;
    vertical-align: top;
}
/* Oculto cuando el carro está vacío (ver header.blade.php y site.js): sin
   esto, [hidden] no le ganaría a display:inline-block de arriba. */
.cart-count[hidden] { display: none; }

/* Círculo rojo de aviso junto a "Pedidos en curso" en el menú de admin,
   con el mismo estilo que el contador del carro pero en rojo (es un aviso,
   no solo informativo). */
.orders-badge {
    display: inline-block;
    min-width: 1.15rem;
    padding: 0 .25rem;
    margin-left: .3rem;
    background: #c0392b;
    color: #fff;
    border-radius: 999px;
    font-size: .65rem;
    line-height: 1.15rem;
    text-align: center;
    vertical-align: top;
}
.orders-badge[hidden] { display: none; }

/* ---------- Botones ------------------------------------------------------- */
.btn {
    display: inline-block;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .85rem 1.6rem;
    border-radius: var(--radius);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-cta { background: var(--color-cta); color: #fff; width: 100%; }
.btn-cta:hover { background: var(--color-cta-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: #fff; }
.btn-outline.is-active { background: var(--color-ink); color: #fff; }
/* Al desactivar un filtro con el ratón todavía encima, esta clase fuerza
   el aspecto "sin hover" de inmediato; se quita en cuanto el ratón sale
   del botón (ver initCategoryFilters en site.js), para que al volver a
   entrar el hover funcione con normalidad. */
.btn-outline.no-hover:hover { background: transparent; color: var(--color-ink); }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-dark); color: #fff; }
.btn-sm { padding: .55rem 1rem; font-size: .72rem; }
.btn-narrow { width: auto; display: inline-block; }

/* Estado vacío de la lista de deseados: título, texto y botón centrados
   horizontalmente (el botón, al ser inline-block, se centra con el mismo
   text-align que el texto, sin encoger el ancho normal de la página). */
.wishlist-empty { text-align: center; }

/* ---------- Hero / carrusel ---------------------------------------------- */
.hero {
    position: relative;
    height: 423px;
    overflow: hidden;
    background: #ddd;
}
.hero .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .8s ease;
}
.hero .slide.active { opacity: 1; }
.hero-dots { position: absolute; bottom: 1rem; width: 100%; text-align: center; }
.hero-dots button {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-block;
    width: 9px; height: 9px; border-radius: 50%; border: none; margin: 0 4px; padding: 0;
    background: rgba(255, 255, 255, .5); cursor: pointer;
    font-size: 0; line-height: 0;
    flex: none;
}
.hero-dots button.active { background: #fff; }

/* ---------- Secciones ----------------------------------------------------- */
.section { padding: 3.5rem 0; }
.section-title {
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
/* Misma tipografia que "Mercaderes de Destinos" (font-sans en vez de font-serif). */
.section-title--sans {
    font-family: var(--font-sans);
}
/* Iguala el hueco de arriba (antes 3.5rem del .section) con el de abajo
   (2rem, el margin-bottom del titulo), ya que aqui el h2 es el primer
   elemento de la seccion (se quito el parrafo de la newsletter). */
.section--novedades {
    padding-top: 2rem;
}

/* ---------- Grilla de productos ------------------------------------------ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);
}
/* Variante con mas columnas (5 en vez de 4), cards un poco mas pequenas. */
.product-grid--lg {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.product-card {
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.product-card .thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface);
    position: relative;
}
.product-card .thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease, opacity .3s ease;
}
.product-card:hover .thumb img { transform: scale(1.06); }
/* Segunda foto al pasar el ratón (si el producto tiene fotos adicionales
   en el admin): la principal se desvanece y la segunda aparece, ambas con
   el mismo zoom de siempre. */
.product-card .thumb img.img-secondary { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .thumb img.img-main { opacity: 0; }
.product-card:hover .thumb img.img-secondary { opacity: 1; }
.product-card .badges {
    position: absolute; top: .6rem; left: .6rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
    z-index: 1;
}
.product-card .badge {
    background: var(--color-sale); color: #fff;
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .2rem .5rem; border-radius: var(--radius);
}
.product-card .badge--sold-out { background: #2b2b2b; }

/* Corazón de lista de deseados: esquina opuesta a las badges, encima de
   la imagen tanto en la tarjeta de catálogo como en la ficha de producto. */
.wishlist-heart {
    position: absolute; top: .6rem; right: .6rem; z-index: 3;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .85);
    border: none; border-radius: 50%;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.wishlist-heart:hover { transform: scale(1.08); background: #fff; }
.wishlist-heart svg { fill: none; stroke: #1c1a19; stroke-width: 1.8; }
.wishlist-heart.is-active svg { fill: var(--color-sale); stroke: var(--color-sale); }
.wishlist-form { position: absolute; top: .6rem; right: .6rem; z-index: 3; margin: 0; }
.wishlist-form .wishlist-heart { position: static; }
.product-card .body { padding: 1.1rem 1rem; text-align: center; margin-top: auto; }
.product-card .name {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.product-card .price { color: var(--color-ink-soft); margin-top: .3rem; font-size: 1.05rem; }
.product-card .price .was { text-decoration: line-through; margin-right: .4rem; opacity: .6; }
.product-card .price .now { color: var(--color-sale); }

/* ---------- Detalle de producto ------------------------------------------ */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 3rem 0; }
.product-gallery { position: relative; }
.product-gallery .main-img {
    aspect-ratio: 1 / 1; background: var(--color-surface);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    position: relative; cursor: zoom-in;
}
.product-gallery .main-img img, .product-gallery .main-img video { width: 100%; height: 100%; object-fit: cover; }
/* Icono que avisa de que la foto principal se puede ampliar (ver el popup
   en #product-lightbox, abierto desde initGallery() en site.js). */
.product-gallery .main-img .gallery-zoom-icon {
    position: absolute; bottom: .7rem; right: .7rem;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(20, 18, 16, .55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; pointer-events: none;
}
.product-gallery .thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.product-gallery .thumbs .thumb-btn {
    width: 70px; height: 70px; padding: 0; line-height: 0;
    border: 1px solid var(--color-line); background: none; cursor: pointer;
    position: relative; overflow: hidden;
}
.product-gallery .thumbs .thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery .thumbs .thumb-btn.active { border-color: var(--color-accent); }
/* Las miniaturas de vídeo llevan un triángulo de "play" encima de la foto
   principal, que se usa como fondo al no poder generar un fotograma real. */
.product-gallery .thumbs .thumb-btn--video::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(20, 18, 16, .4)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")
        no-repeat center / 22px;
}
.product-info h1 { font-size: 2rem; letter-spacing: .04em; text-transform: uppercase; }
.product-info .price-lg { font-size: 1.3rem; margin: .3rem 0 1.2rem; }
.product-info .description { color: var(--color-ink-soft); margin: 1.2rem 0; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-line); margin-bottom: 1rem; }
.qty button { width: 40px; height: 42px; border: none; background: #fff; font-size: 1.1rem; cursor: pointer; }
.qty input { width: 48px; height: 42px; border: none; text-align: center; font-size: 1rem; }

.related { margin-top: 1.5rem; }
.related h3 { letter-spacing: .1em; text-transform: uppercase; font-size: 1rem; }
.related-item { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--color-line); }
.related-item img { width: 54px; height: 54px; object-fit: cover; }
.related-item .r-name { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Opiniones de producto ----------------------------------------- */
.reviews-teaser { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--color-line); }
.reviews-teaser .reviews-summary { margin-bottom: 1rem; }

/* Página "Reseñas" (/resenas): listado de opiniones de todos los productos. */
.reviews-product-summary {
    padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
    background: var(--color-surface); border: 1px solid var(--color-line);
}
.reviews-product-summary h2 a { color: inherit; }
.review-product { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; }
.stars { color: var(--color-cta); letter-spacing: .05em; white-space: nowrap; }

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .15rem;
}
.star-rating input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.field .star-rating label {
    display: inline-block;
    cursor: pointer;
    font-size: 3.04rem;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0;
    color: var(--color-line);
    transition: color .15s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: var(--color-cta);
}
.star-rating input:focus-visible + label {
    outline: 2px solid var(--color-cta);
    outline-offset: 2px;
}
.reviews-summary { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.2rem; }
.review-form-toggle { margin-bottom: 2rem; }
.review-form-toggle summary { cursor: pointer; list-style: none; }
.review-form-toggle summary::-webkit-details-marker { display: none; }
.review-form-toggle form { max-width: 480px; }
.review { padding: 1.2rem 0; border-top: 1px solid var(--color-line); }
.review-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.review-title { margin-top: .3rem; }
.review-photos { display: flex; gap: .6rem; margin-top: .6rem; margin-bottom: 1rem; }
.review-photos img { width: 70px; height: 70px; object-fit: cover; border: 1px solid var(--color-line); }
.review-reply {
    margin-top: .8rem; padding: .8rem 1rem;
    background: var(--color-surface); border-left: 3px solid var(--color-accent);
}
.review-reply strong { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.review-reply p { margin: .3rem 0 0; }
.review-photos img { cursor: zoom-in; }
.photo-remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-sale);
    color: #fff;
    border: 2px solid #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.photo-remove-btn:hover { background: var(--color-accent-dark); }
.photo-input-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}
.photo-input-preview:empty { display: none; }
.photo-input-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 2px;
    font-size: .72rem;
    color: var(--color-ink-soft);
}
.photo-input-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-sale);
    font-size: .9rem;
    line-height: 1;
    padding: 0;
}

/* Popup para ver en grande una foto adjunta a una reseña. */
.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(20, 18, 16, .9);
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 1.5rem;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lightbox video { max-width: 90vw; max-height: 85vh; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lightbox-close {
    position: absolute; top: 1rem; right: 1.2rem;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .1); border: none; border-radius: 50%;
    color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .2); }
.lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .1); border: none; border-radius: 50%;
    color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox-arrow:hover { background: rgba(255, 255, 255, .2); }
.lightbox-arrow[hidden] { display: none; }
.lightbox-arrow--prev { left: 1rem; }
.lightbox-arrow--next { right: 1rem; }
@media (max-width: 560px) {
    .lightbox-arrow { width: 40px; height: 40px; font-size: 1.6rem; }
    .lightbox-arrow--prev { left: .4rem; }
    .lightbox-arrow--next { right: .4rem; }
}

/* ---------- Formularios --------------------------------------------------- */
.form-card {
    max-width: 480px; margin: 3rem auto; padding: 2.2rem;
    border: 1px solid var(--color-line); background: #fff; box-shadow: var(--shadow);
}
.form-wide { max-width: 720px; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; color: var(--color-ink-soft); }
.field input, .field textarea, .field select {
    width: 100%; padding: .7rem .8rem; border: 1px solid var(--color-line);
    border-radius: var(--radius); font-family: inherit; font-size: .95rem; background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--color-accent);
}
.field .error { color: var(--color-sale); font-size: .78rem; margin-top: .25rem; }
.field .field-hint { font-size: .78rem; color: var(--color-ink-soft); margin-top: .35rem; margin-bottom: 0; }

/* Lista de casillas de elección única (p.ej. "¿Qué producto personalizado
   buscas?"): son <label> dentro de .field igual que el título del campo,
   así que hace falta más especificidad para que no hereden su estilo
   (bloque, mayúsculas, negrita visual) y se vean como opciones normales. */
.checkbox-options { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.field .checkbox-options label.checkbox-option {
    display: flex; align-items: center; gap: .6rem;
    text-transform: none; letter-spacing: normal; font-size: .92rem;
    color: var(--color-ink); margin-bottom: 0; cursor: pointer;
}
.checkbox-option input[type="checkbox"] { width: auto; accent-color: var(--color-accent); }
.checkbox-option .price-hint { color: var(--color-ink-soft); font-size: .85rem; }

/* Botón para mostrar/ocultar la contraseña mientras se escribe. */
.password-field { position: relative; }
.password-field input { padding-right: 2.6rem; }
.password-toggle {
    position: absolute; top: 50%; right: .5rem; transform: translateY(-50%);
    background: none; border: none; padding: .3rem; cursor: pointer;
    display: flex; align-items: center; color: var(--color-ink-soft);
}
.password-toggle:hover { color: var(--color-ink); }
/* El atributo [hidden] no siempre gana por sí solo en elementos <svg>
   (mismo caso que .cart-count más arriba), así que se refuerza aquí. */
.password-toggle svg[hidden] { display: none; }

/* ---------- Tablas (carro, pedidos, admin) -------------------------------- */
/* Envoltorio que permite scroll horizontal en móvil sin romper el layout. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .8rem .6rem; border-bottom: 1px solid var(--color-line); text-align: left; }
.table th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-soft); }
.table .num { text-align: right; }

/* ---------- Alertas ------------------------------------------------------- */
.alert { padding: .9rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.2rem; font-size: .9rem; }
.alert-success { background: #e7f6f1; color: #0f7d6f; border: 1px solid #bfe6dc; }
.alert-error { background: #fbeae7; color: #b3402f; border: 1px solid #f1cfc8; }
.alert-info { background: #f4f1ec; color: #6f6a66; border: 1px solid var(--color-line); }
.alert-warning { background: #fdf3e3; color: #8a5a1f; border: 1px solid #f3ddb2; }

/* ---------- Cards de resumen (carro / checkout) --------------------------- */
.summary { border: 1px solid var(--color-line); padding: 1.4rem; background: var(--color-surface); }
.summary .row { display: flex; justify-content: space-between; padding: .35rem 0; }
.summary .row.total { border-top: 1px solid var(--color-line); margin-top: .5rem; padding-top: .7rem; font-weight: 600; font-size: 1.1rem; }
.summary .row.coupon-applied { color: var(--color-cta-dark); }
.coupon-form { display: flex; gap: .5rem; margin: .8rem 0; }
.coupon-form input {
    flex: 1; padding: .55rem .7rem; border: 1px solid var(--color-line);
    border-radius: var(--radius); font-family: inherit; font-size: .85rem; background: #fff;
}
.coupon-error { color: var(--color-sale); font-size: .8rem; margin: -.4rem 0 .6rem; }
.coupon-remove {
    display: inline-block; margin-left: .4rem; color: var(--color-ink-soft);
    text-decoration: none; font-weight: 700; line-height: 1;
}
.coupon-remove:hover { color: var(--color-sale); }

/* ---------- Pie ----------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--color-line);
    padding: 2.5rem 0;
    margin-top: 3rem;
    color: var(--color-ink-soft);
}
.footer-newsletter { text-align: center; margin-bottom: 2rem; }
.footer-newsletter-lead {
    font-family: var(--font-serif); font-size: 1.3rem; color: var(--color-ink); margin-bottom: .8rem;
}
.newsletter-form {
    display: flex; gap: .5rem; justify-content: center; max-width: 440px; margin: 0 auto;
}
.newsletter-form input {
    flex: 1; padding: .7rem .9rem; border: 1px solid var(--color-line);
    border-radius: var(--radius); font-family: inherit; font-size: .9rem; background: #fff;
}
.newsletter-form input:focus { outline: none; border-color: var(--color-accent); }

.footer-social { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border: 1px solid var(--color-line); border-radius: 50%;
    color: var(--color-ink-soft); transition: color .15s, border-color .15s;
}
.footer-social a:hover { color: var(--color-accent); border-color: var(--color-accent); }

.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.footer-nav a { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-copy { text-align: center; margin-top: 1.5rem; font-size: .74rem; }

@media (max-width: 560px) {
    .newsletter-form { flex-direction: column; }
}

/* ---------- FAQ ----------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--color-line); padding: 1.2rem 0; }
.faq-item .q { font-family: var(--font-serif); font-size: 1.25rem; cursor: pointer; display: flex; justify-content: space-between; }
.faq-item .a { color: var(--color-ink-soft); margin-top: .6rem; display: none; }
.faq-item.open .a { display: block; }

/* ---------- Utilidades de layout ----------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
.account-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; margin-bottom: 2rem; }
.stack > * + * { margin-top: 1rem; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mb-2 { margin-bottom: 2rem; }

/* ---------- Paginación ----------------------------------------------------- */
.pagination { display: flex; justify-content: center; }
.pagination-list {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .4rem; list-style: none; margin: 0; padding: 0;
}
.pagination-item a, .pagination-item span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem;
    border: 1px solid var(--color-line); border-radius: var(--radius);
    font-size: .82rem; color: var(--color-ink);
}
.pagination-item a { text-decoration: none; }
.pagination-item a:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.pagination-item.is-active span { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.pagination-item.is-disabled span { color: var(--color-ink-soft); opacity: .5; border-color: var(--color-line); }

/* Escritorio: nav principal centrado de verdad, FAQ/Customiza/iconos agrupados
   del todo a la derecha. No afecta al menu movil (ver breakpoints mas abajo).
   Se usa flexbox (no CSS Grid): probado con mediciones reales en el navegador,
   un grid "1fr auto 1fr" NO encoge la columna auto del nav cuando falta
   espacio (la columna "auto" se queda en su ancho de contenido y son las
   columnas 1fr las que acaban aplastadas por debajo de su propio contenido,
   provocando el solape). Con flexbox, .brand y .nav-right no ceden espacio
   (flex: 0 0 auto) y .main-nav es el único que se encoge y pasa a 2 líneas
   (flex: 1 1 auto + min-width: 0 + flex-wrap: wrap), así nunca invade ni al
   logo ni a FAQ/Customiza/iconos al estrechar la ventana. */
@media (min-width: 901px) {
    .site-header .container {
        display: flex;
        max-width: none;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lang-switch {
        flex: 0 0 auto;
    }
    .brand {
        flex: 0 0 auto;
    }
    .main-nav {
        /* Sin min-width: 0, un item flex no se encoge por debajo del ancho
           de su contenido sin partir línea: es lo que dejaba que el nav
           invadiera el logo y el bloque derecho en vez de pasar a 2 líneas. */
        flex: 1 1 auto;
        min-width: 0;
        position: static;
        transform: none;
        margin: 0;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: .35rem;
    }
    .nav-right {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem 1.5rem;
        min-width: 0;
    }
}

/* Si ni siquiera en escritorio caben los links del nav en una sola línea
   (por ejemplo, al añadir más categorías raíz al menú), site.js detecta
   que el nav partió en más de una fila y añade esta clase: en vez de
   dejarlo partido en 2 líneas, pasa al mismo menú hamburguesa que en
   móvil (ver initNavFit en site.js). */
.site-header.nav-force-compact .container {
    flex-wrap: wrap;
    gap: .75rem .75rem;
}
.site-header.nav-force-compact .nav-toggle { display: flex; }
.site-header.nav-force-compact .lang-switch {
    order: 5;
    width: 100%;
    justify-content: center;
    padding-top: .5rem;
    margin-top: .35rem;
    border-top: 1px solid var(--color-line);
}
/* Iconos + hamburguesa agrupados: si no caben junto al logo, se van juntos
   a su propia fila (alineada a la derecha) en vez de que la hamburguesa
   quede sola y suelta. */
.site-header.nav-force-compact .nav-actions {
    order: 2;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.site-header.nav-force-compact .nav-right { display: contents; }

.site-header.nav-force-compact .main-nav,
.site-header.nav-force-compact .nav-utils {
    order: 4;
    width: 100%;
    flex: none;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
}
.site-header.nav-force-compact.open .main-nav,
.site-header.nav-force-compact.open .nav-utils { display: flex; }
.site-header.nav-force-compact.open .nav-utils { border-top: 1px solid var(--color-line); }

.site-header.nav-force-compact .main-nav a,
.site-header.nav-force-compact .nav-utils a {
    width: 100%;
    padding: .85rem .25rem;
    border-bottom: 1px solid var(--color-line);
    font-size: .9rem;
}
.site-header.nav-force-compact .main-nav a:hover,
.site-header.nav-force-compact .main-nav a.active { border-bottom-color: var(--color-line); }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
    .product-detail { grid-template-columns: 1fr; gap: 2rem; }
    .grid-2 { grid-template-columns: 1fr; gap: 1.75rem; }
    .account-data-grid { grid-template-columns: 1fr; gap: 1.75rem; }

    /* Cabecera con menú hamburguesa. Iconos (cuenta/carro) siempre visibles. */
    .site-header .container { flex-wrap: wrap; gap: .75rem .75rem; }
    .nav-toggle { display: flex; }
    .lang-switch {
        order: 5;
        width: 100%;
        justify-content: center;
        padding-top: .5rem;
        margin-top: .35rem;
        border-top: 1px solid var(--color-line);
    }
    /* Iconos + hamburguesa agrupados: si no caben junto al logo, se van
       juntos a su propia fila (alineada a la derecha) en vez de que la
       hamburguesa quede sola y suelta en medio de la cabecera. */
    .nav-actions {
        order: 2;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .main-nav,
    .nav-utils {
        order: 4;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
    }
    .site-header.open .main-nav,
    .site-header.open .nav-utils { display: flex; }
    .site-header.open .nav-utils { border-top: 1px solid var(--color-line); }

    .main-nav a,
    .nav-utils a {
        width: 100%;
        padding: .85rem .25rem;
        border-bottom: 1px solid var(--color-line);
        font-size: .9rem;
    }
    .main-nav a:hover,
    .main-nav a.active { border-bottom-color: var(--color-line); }
}

@media (max-width: 560px) {
    /* El header tiene que caber siempre en una sola línea: en vez de dejar
       que la hamburguesa (o cualquier otra pieza) se vaya a una 2a fila,
       se prioriza achicar el logo y el nombre. La línea "Mercaderes de
       Destinos" se oculta a este ancho (a petición explícita: se ve mejor
       sin ella en móvil).*/
    .brand { gap: .4rem; }
    .brand img { width: 32px; height: 32px; }
    .brand-name { font-size: 1rem; letter-spacing: .03em; }
    .brand-break,
    .brand-tag { display: none; }
    .hero { height: 291px; }

    .section { padding: 2.25rem 0; }
    .product-detail { padding: 2rem 0; }
    .form-card { margin: 1.75rem auto; padding: 1.5rem; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
    .container { padding: 0 1rem; }
    .topbar { font-size: .62rem; letter-spacing: .12em; }
    .flex-between { flex-wrap: wrap; gap: .75rem; }
}

/* ---------- Popup de descuento (newsletter) ------------------------------- */
.discount-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.discount-popup[hidden] { display: none; }
.discount-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 26, 25, .55);
}
.discount-popup__card {
    position: relative;
    z-index: 1;
    display: flex;
    background: #fff;
    max-width: 720px;
    width: 100%;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    overflow: hidden;
}
.discount-popup__media { flex: 0 0 45%; background: var(--color-surface); }
.discount-popup__media img { width: 100%; height: 100%; object-fit: cover; }
.discount-popup__body { flex: 1; padding: 2.2rem 2.2rem 1.8rem; position: relative; }
.discount-popup__close {
    position: absolute;
    top: .7rem;
    right: .9rem;
    z-index: 2;
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-ink-soft);
}
.discount-popup__close:hover { color: var(--color-ink); }
.discount-popup__body h2 {
    font-size: 1.45rem;
    letter-spacing: .02em;
    margin: 0 0 .7rem;
    padding-right: 1.5rem;
}
.discount-popup__body p { color: var(--color-ink-soft); margin: 0 0 1.2rem; font-size: .92rem; }
.discount-popup__body form { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }
.discount-popup__body form input {
    padding: .75rem .9rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .9rem;
    background: #fff;
}
.discount-popup__body form input:focus { outline: none; border-color: var(--color-accent); }
.discount-popup__no-thanks {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 1.2rem;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--color-ink-soft);
    text-decoration: underline;
    cursor: pointer;
}
.discount-popup__fine-print { font-size: .7rem; color: var(--color-ink-soft); margin: 0; line-height: 1.5; }

@media (max-width: 560px) {
    .discount-popup__card { flex-direction: column; max-height: 92vh; overflow-y: auto; }
    .discount-popup__media { flex: 0 0 160px; }
    .discount-popup__body { padding: 1.6rem 1.4rem 1.4rem; }
}

/* ---------- Popup de aviso de pedidos nuevos (admin, al iniciar sesión) --- */
.orders-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.orders-popup[hidden] { display: none; }
.orders-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 26, 25, .55);
}
.orders-popup__card {
    position: relative;
    z-index: 1;
    background: #fff;
    max-width: 420px;
    width: 100%;
    padding: 2rem 2rem 1.8rem;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
.orders-popup__close {
    position: absolute;
    top: .7rem;
    right: .9rem;
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-ink-soft);
}
.orders-popup__close:hover { color: var(--color-ink); }
.orders-popup__card h2 {
    font-size: 1.25rem;
    letter-spacing: .02em;
    margin: 0 0 1rem;
    padding-right: 1.5rem;
}
.orders-popup__list {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    font-size: .88rem;
}
.orders-popup__list li {
    padding: .5rem 0;
    border-bottom: 1px solid var(--color-line);
}
.orders-popup__list li:last-child { border-bottom: none; }
.orders-popup__more { font-size: .8rem; color: var(--color-ink-soft); margin: 0 0 1.2rem; }
.orders-popup__card .btn { margin-top: 1rem; }

/* ---------- Popup para introducir el número de seguimiento al enviar ------ */
.ship-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ship-modal[hidden] { display: none; }
.ship-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 26, 25, .55);
}
.ship-modal__card {
    position: relative;
    z-index: 1;
    background: #fff;
    max-width: 400px;
    width: 100%;
    padding: 2rem 2rem 1.8rem;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
.ship-modal__close {
    position: absolute;
    top: .7rem;
    right: .9rem;
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-ink-soft);
}
.ship-modal__close:hover { color: var(--color-ink); }
.ship-modal__card h2 {
    font-size: 1.15rem;
    letter-spacing: .02em;
    margin: 0 0 1.2rem;
    padding-right: 1.5rem;
}
.ship-modal__card .field { margin-bottom: 1rem; }

/* ---------- Aviso de cookies (franja inferior) ----------------------------- */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: none;
    justify-content: center;
    padding: 1rem;
    transform: translateY(120%);
    transition: transform .4s ease;
}
.cookie-consent.is-visible { transform: translateY(0); }
.cookie-consent__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    background: #fff;
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    max-width: 920px;
    width: 100%;
}
.cookie-consent__text { flex: 1 1 320px; margin: 0; font-size: .85rem; color: var(--color-ink-soft); line-height: 1.5; }
.cookie-consent__text a { color: var(--color-accent); text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: .6rem; flex: 0 0 auto; }
@media (max-width: 560px) {
    .cookie-consent { padding: .7rem; }
    .cookie-consent__card { flex-direction: column; align-items: stretch; text-align: center; padding: 1rem; }
    .cookie-consent__actions { justify-content: center; }
}