/* ================================================================
   ANUNCIO POPUP
   ================================================================ */

.anuncio-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-anuncio-overlay);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: anuncioFadeIn 0.25s ease;
}

.anuncio-box {
    position: relative;
    width: min(50vw, 560px);
    max-width: 92vw;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    animation: anuncioSlideUp 0.28s ease;
}

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

.anuncio-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-anuncio-close-bg);
    color: var(--color-secundario);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 1;
}

.anuncio-close:hover {
    background: var(--color-anuncio-close-hover);
}

@keyframes anuncioFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes anuncioSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ================================================================
   DETALLE DE PRODUCTO (pd-*)
   ================================================================ */

.pd-wrap {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.pd-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    background: var(--color-secundario);
    padding: 2.5rem;
    border-radius: 24px;
    box-shadow: 0 10px 40px var(--color-pd-card-sombra);
    border: 1px solid var(--color-gris-claro);
    align-items: start;
}

.pd-img-wrap {
    position: sticky;
    top: 100px;
    background: var(--color-fondo-claro);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--color-gris-claro);
    aspect-ratio: 1;
}

.pd-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pd-img-wrap:hover .pd-img {
    transform: scale(1.08);
}

.pd-info {
    display: flex;
    flex-direction: column;
}

.pd-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.meta-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    background: var(--color-fondo-claro);
    color: var(--color-primario);
    border: 1px solid var(--color-gris-claro);
}

.badge-green {
    background: var(--color-pd-badge-green-bg);
    color: var(--color-input-borde-ok);
    border-color: var(--color-pd-badge-green-border);
}

.pd-nombre {
    font-size: 2.2rem;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.pd-precio-wrap {
    margin: 1.5rem 0;
    padding: 1.2rem 0;
    border-top: 1px solid var(--color-borde-divider);
    border-bottom: 1px solid var(--color-borde-divider);
}

.pd-precio {
    font-family: var(--font-body);
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-primario);
    display: block;
}

.pd-precio-nota {
    font-size: 0.85rem;
    color: var(--color-gris-muted);
}

.pd-qty-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.pd-qty-label {
    font-weight: 700;
    color: var(--color-gris-oscuro);
}

.pd-qty-ctrl {
    display: flex;
    align-items: center;
    background: var(--color-fondo-claro);
    padding: 0.3rem;
    border-radius: 3rem;
    border: 1px solid var(--color-gris-claro);
}

.pd-qty-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--color-secundario);
    color: var(--color-primario);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 5px var(--color-pd-qty-btn-shadow);
    transition: all 0.2s;
}

.pd-qty-btn:hover {
    background: var(--color-primario);
    color: var(--color-secundario);
}

.pd-qty-num {
    width: 50px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.btn-agregar-pd {
    width: 100%;
    padding: 1.2rem;
    border-radius: 3rem;
    border: none;
    background: var(--color-primario);
    color: var(--color-secundario);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px var(--color-pd-btn-shadow);
    transition: all 0.3s;
}

.btn-agregar-pd:hover {
    background: var(--color-primario-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--color-pd-btn-hover-shadow);
}

.btn-wsp-pd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    text-decoration: none;
    color: var(--color-wsp);
    font-weight: 700;
    padding: 1rem;
    border: 2px solid var(--color-wsp);
    border-radius: 3rem;
    transition: all 0.2s;
}

.btn-wsp-pd:hover {
    background: var(--color-wsp);
    color: var(--color-secundario);
}

.pd-section {
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
}

.pd-card {
    background: var(--color-secundario);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid var(--color-gris-claro);
}

.pd-card-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 800;
    color: var(--color-primario);
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
}

.pd-desc-body {
    color: var(--color-gris-texto);
    line-height: 1.7;
    font-size: 1rem;
}

@media (max-width: 900px) {
    .pd-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem;
    }
    .pd-img-wrap {
        position: relative;
        top: 0;
        height: 350px;
    }
    .pd-nombre {
        font-size: 1.8rem;
    }
    .pd-precio {
        font-size: 2.2rem;
    }
}


/* ================================================================
   SEARCH / FILTER UI
   ================================================================ */

.sf-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-secundario);
    border: 1px solid var(--color-gris-claro);
    border-radius: 1.1rem;
    padding: 0.95rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px var(--color-sf-bar-sombra);
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .sf-context-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
    }
}

.sf-context-label {
    font-size: 0.92rem;
    color: var(--color-primario);
    font-weight: 600;
    line-height: 1.45;
}

.sf-context-label em {
    color: var(--color-sf-bar-em);
    font-style: normal;
    font-weight: 700;
}

.sf-context-label strong {
    font-weight: 800;
}

.sf-clear-btn {
    border: none;
    background: var(--color-fondo-qty);
    /* `--color-gris-medio` se deriva de la paleta y en los temas de fondo claro
       cae casi encima del fondo del chip: medido en Moda Edit daba
       rgb(190,181,164) sobre rgb(242,242,242) — 1.7:1, por debajo de cualquier
       mínimo legible. Es el botón que saca el filtro: tiene que leerse. */
    color: var(--color-texto-pagina, var(--color-primario));
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.12s;
    white-space: nowrap;
    /* Quicksand no está cargada en la tienda — usar la fuente del tema. */
    font-family: var(--font-body);
}

.sf-clear-btn:hover {
    background: var(--color-fondo-hover-cat);
    color: var(--color-primario);
    transform: translateY(-1px);
}

.sf-empty-state {
    background: var(--color-secundario);
    border: 1px solid var(--color-gris-claro);
    border-radius: 1.5rem;
    padding: 3rem 1.4rem 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.045);
    margin: 0.5rem 0 1rem;
}

@media (max-width: 600px) {
    .sf-empty-state {
        padding: 2.2rem 1rem;
        border-radius: 1.2rem;
    }
}

.sf-empty-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-fondo-qty) 0%, var(--color-fondo-hover-cat) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 18px var(--color-empty-icon-shadow);
}

.sf-empty-state h3 {
    margin: 0 0 0.7rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primario);
    line-height: 1.3;
}

.sf-empty-state h3 em {
    color: var(--color-sf-bar-em);
    font-style: normal;
}

.sf-empty-state p {
    margin: 0;
    max-width: 420px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-gris-medio);
}

.sf-empty-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

.sf-empty-actions button,
.sf-empty-actions a {
    border: none;
    text-decoration: none;
    min-width: 190px;
    padding: 0.95rem 1.3rem;
    border-radius: 3rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-body);
    transition: transform 0.14s, box-shadow 0.18s, background 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-sizing: border-box;
}

.sf-empty-actions button {
    background: var(--color-primario);
    color: var(--color-secundario);
    box-shadow: 0 5px 16px rgba(26, 92, 120, 0.18);
}

.sf-empty-actions button:hover {
    background: var(--color-primario-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(26, 92, 120, 0.24);
}

.sf-empty-actions .sf-wsp-btn {
    background: var(--color-secundario);
    color: var(--color-wsp);
    border: 2px solid var(--color-wsp);
}

.sf-empty-actions .sf-wsp-btn:hover {
    background: var(--color-wsp);
    color: var(--color-secundario);
    transform: translateY(-2px);
}

@media (max-width: 520px) {
    .sf-empty-actions {
        width: 100%;
        flex-direction: column;
    }
    .sf-empty-actions button,
    .sf-empty-actions a {
        width: 100%;
        min-width: 0;
    }
}


/* ══════════════════════════════════════════════════════════════
   CARRUSEL DE IMÁGENES (hero slides)
══════════════════════════════════════════════════════════════ */

.slide-carousel-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 28px;
    padding: 0 16px;
}

.slide-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    aspect-ratio: 16 / 6;
    max-height: 420px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .15);
}

.slide-track {
    display: flex;
    height: 100%;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.slide-item {
    min-width: 100%;
    height: 100%;
    position: relative;
    flex-shrink: 0;
}

.slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 24px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .55));
    color: #fff;
}

.slide-titulo {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.slide-sub {
    font-size: clamp(.8rem, 1.8vw, 1rem);
    margin: 0;
    opacity: .85;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .85);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
    cursor: pointer;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background .15s;
    line-height: 1;
}

.slide-arrow:hover {
    background: #fff;
}

.slide-prev {
    left: 12px;
}

.slide-next {
    right: 12px;
}

.slide-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.slide-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.slide-dot.active {
    background: #fff;
    transform: scale(1.3);
}

@media (max-width: 640px) {
    .slide-carousel {
        aspect-ratio: 4/3;
        max-height: 260px;
        border-radius: 12px;
    }
    .slide-arrow {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
    }
}


/* ══════════════════════════════════════════════════════════════
   PRODUCTOS DESTACADOS
══════════════════════════════════════════════════════════════ */

.featured-section {
    max-width: 1200px;
    margin: 0 auto 32px;
    padding: 0 16px;
}


/* Header con título + botón toggle */

.featured-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.featured-header .seccion-titulo {
    margin-bottom: 0;
}

.featured-toggle-btn {
    flex-shrink: 0;
    background: none;
    border: 1.5px solid var(--color-primario-legible, var(--color-primario, #2B3DA8));
    color: var(--color-primario-legible, var(--color-primario, #2B3DA8));
    border-radius: 20px;
    padding: 5px 16px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.featured-toggle-btn:hover {
    background: var(--color-primario, #2B3DA8);
    color: #fff;
}


/* Wrapper del carrusel — infinite marquee */


/* Outer wrapper holds arrows + wrap in a row */

.featured-carousel-outer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-side-arrow {
    flex-shrink: 0;
    background: var(--color-fondo-qty, rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--color-primario, #0b76ff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background .15s, transform .15s, box-shadow .15s;
    padding: 0;
    line-height: 1;
}

.featured-side-arrow:hover {
    background: white;
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

.featured-carousel-wrap {
    flex: 1;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
    max-height: 420px;
    opacity: 1;
    /* Fade en los bordes para insinuar que el carrusel sigue. En % escalaba con
       el ancho: 6% de 1117px son 67px, más de un tercio de una card de 184px, y
       la primera y la última quedaban con el nombre y el precio desvanecidos.
       En px el degradado se queda en el borde, que es su función. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
}

.featured-carousel-outer.featured-wrap-hidden .featured-carousel-wrap {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.featured-carousel-outer.featured-wrap-hidden .featured-side-arrow {
    opacity: 0;
    pointer-events: none;
}


/* Marquee keyframes */

@keyframes featured-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1 * var(--featured-one-copy, 2000px)));
    }
}

.featured-track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 10px 4px 14px;
    will-change: transform;
    /* animation set via JS: track.style.animation = 'featured-marquee Xs linear infinite' */
}

.featured-card {
    flex-shrink: 0;
    width: 184px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .09);
    transition: transform .22s, box-shadow .22s;
    border: 1px solid rgba(0, 0, 0, .06);
}

.featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}

.featured-img-wrap {
    width: 100%;
    aspect-ratio: 1;
    background: #f0f0f0;
    overflow: hidden;
}

.featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.featured-card:hover .featured-img {
    transform: scale(1.08);
}

.featured-info {
    padding: 10px 12px 13px;
}

.featured-nombre {
    font-size: .84rem;
    font-weight: 700;
    color: var(--color-gris-oscuro, #1a1a2e);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.featured-precio {
    font-size: .92rem;
    font-weight: 700;
    color: var(--color-primario, #2B3DA8);
    margin: 0;
}

@media (max-width: 480px) {
    .featured-card {
        width: 148px;
    }
}



/* ================================================================
   pd-addon.css — Detalle de producto · Aesop Boutique
   Todas las clases son pd-ab-* para evitar colisiones con styles.css
   ================================================================ */

/* ── Loading overlay ─────────────────────────────────────────────────────── */
#cfg-loading {
  position: fixed;
  inset: 0;
  background: var(--color-fondo, #faf9f7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 9999;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  color: var(--pd-texto-suave, #5B6068);
  letter-spacing: 0.04em;
}
.cfg-loading-spinner {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-top-color: var(--color-primario, #444);
  border-radius: 50%;
  animation: pd-spin 0.8s linear infinite;
}
@keyframes pd-spin { to { transform: rotate(360deg); } }

/* ── Breadcrumb nav ──────────────────────────────────────────────────────── */
.pd-ab-nav {
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.pd-ab-nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0.6rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.pd-ab-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--pd-texto-suave, #5B6068);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.pd-ab-back:hover { color: var(--color-primario, #111); }
.pd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  /* Token que sigue al fondo del tema: con negro translúcido fallaba en los
     temas de fondo oscuro (0.32 daba 2.2, y 0.62 seguía mal en moderno). */
  color: var(--color-texto-pagina-suave);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  flex-wrap: wrap;
}
.pd-breadcrumb a { color: var(--color-texto-pagina); text-decoration: none; }
.pd-breadcrumb a:hover { color: var(--color-primario, #111); }
.pd-breadcrumb span { color: var(--color-texto-pagina-suave); font-size: 0.72rem; opacity: .7; }

/* ── Hero: 55/45 split ────────────────────────────────────────────────────── */
.pd-ab-hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 68vh;
  align-items: start;
}

/* ── Images column ───────────────────────────────────────────────────────── */
.pd-ab-images {
  position: sticky;
  top: 0;
  /* full height of viewport so image stays while scrolling the panel */
  max-height: 100vh;
  overflow: hidden;
  background: var(--color-fondo, #faf9f7);
}
.pd-carousel-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 70vh;
}
.pd-ab-main-img {
  width: 100%;
  height: 100%;
  min-height: 70vh;
  /* Techo: sin él una foto de 300×3000 medía 6.900px y `.pd-ab-images`
     (max-height 100vh, overflow hidden) la cortaba — se veía sólo la punta. */
  max-height: 88vh;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: opacity 0.14s ease;
}
.pd-ab-zoom-hint {
  position: absolute;
  bottom: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 0.32rem 0.75rem;
  font-size: 0.71rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.6);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0;
}
.pd-carousel-frame:hover .pd-ab-zoom-hint { opacity: 1; }

/* Carousel arrows (added by JS for multi-image) */
.pd-car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(0,0,0,0.6);
  z-index: 2;
  transition: background 0.15s;
}
.pd-car-arrow:hover { background: #fff; }
.pd-car-prev { left: 14px; }
.pd-car-next { right: 14px; }

/* Thumbnails strip (added by JS) */
.pd-car-thumbs {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.5);
}
.pd-car-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.55;
  border: 1.5px solid transparent;
  transition: opacity 0.15s, border-color 0.15s;
}
.pd-car-thumb.active,
.pd-car-thumb:hover {
  opacity: 1;
  border-color: var(--color-primario, #333);
}

/* ── Info panel ──────────────────────────────────────────────────────────── */
.pd-ab-panel {
  padding: 4rem 3.5rem 4rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-fondo, #faf9f7);
  border-left: 1px solid rgba(0,0,0,0.06);
}

/* Tags (category/stock chips) */
.pd-ab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.4rem;
}
.pd-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pd-texto-suave, #5B6068);
  background: none;
  border: none;
  padding: 0;
}
.pd-tag-green { color: #15803d; }
.pd-tag-red   { color: #b91c1c; }

/* Title — professional default, body font */
.pd-ab-title {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  color: var(--color-primario, #111);
  margin: 0 0 1.4rem 0;
  letter-spacing: -0.02em;
}

/* Price */
.pd-ab-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0.55rem;
}
.pd-price {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-precio-acento);
  letter-spacing: -0.01em;
}
.pd-price-anterior {
  font-size: 0.95rem;
  text-decoration: line-through;
  color: var(--pd-texto-suave, #5B6068);
  font-weight: 400;
}
.pd-off-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b91c1c;
  background: none;
  padding: 0;
}
.pd-price-note {
  width: 100%;
  font-size: 0.72rem;
  /* Token que sigue al fondo del tema: con negro translúcido fallaba en los
     temas de fondo oscuro (0.32 daba 2.2, y 0.62 seguía mal en moderno). */
  color: var(--color-texto-pagina-suave);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  letter-spacing: 0.03em;
  margin-top: -4px;
}

/* Payment hint */
.pd-ab-payment-hint {
  font-size: 0.78rem;
  color: var(--pd-texto-suave, #5B6068);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  line-height: 1.5;
  margin-bottom: 1.8rem;
}

/* Horizontal rule */
.pd-ab-rule {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.07);
  margin: 1.6rem 0;
}

/* Variants */
.pd-ab-variantes { margin-bottom: 1.2rem; }
.pd-variante-grupo { margin-bottom: 1.1rem; }
.pd-variante-label {
  display: block;
  font-size: 0.72rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pd-texto-suave, #5B6068);
  margin-bottom: 0.55rem;
}
.pd-variante-label em { font-style: normal; font-weight: 400; color: var(--pd-texto-suave, #5B6068); }
.pd-variante-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-variante-pill {
  padding: 0.38rem 0.9rem;
  background: none;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 2px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(0,0,0,0.7);
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s, color 0.13s;
}
.pd-variante-pill:hover:not(.sin-stock):not(.active) {
  border-color: var(--color-primario, #111);
  color: var(--color-primario, #111);
}
.pd-variante-pill.active {
  background: var(--color-primario, #111);
  border-color: var(--color-primario, #111);
  color: #fff;
}
.pd-variante-pill.sin-stock {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Qty + buy */
.pd-ab-buy {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 1rem;
}
.pd-ab-qty {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.pd-ab-qty-btn {
  width: 38px;
  height: 46px;
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(0,0,0,0.55);
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-ab-qty-btn:hover { background: rgba(0,0,0,0.04); }
.pd-ab-qty-num {
  width: 36px;
  text-align: center;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-primario, #111);
  border-left: 1px solid rgba(0,0,0,0.1);
  border-right: 1px solid rgba(0,0,0,0.1);
}

/* Main CTA button */
.pd-ab-btn-main {
  flex: 1;
  height: 48px;
  background: var(--color-primario, #111);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s;
  white-space: nowrap;
}
.pd-ab-btn-main:hover:not(:disabled) {
  background: var(--color-acento, #333);
  opacity: 0.9;
}
.pd-ab-btn-main:disabled,
.pd-ab-btn-main.pd-btn-disabled {
  /* !important: los temas definen `body.layout-X .pd-ab-btn-main { background:
     var(--color-primario) }`, que por especificidad le ganaba SÓLO al fondo de
     este estado — quedaba el fondo oscuro del tema con el texto gris de acá
     (contraste 1.41: el aviso "Elegí una opción" no se leía). */
  background: #e3e5e8 !important;
  color: #4a4f57 !important;
  cursor: not-allowed;
}
.pd-ab-btn-main.agregado {
  background: #15803d;
}

/* Variant warning */
.pd-ab-aviso {
  font-size: 0.76rem;
  color: #b45309;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  margin-bottom: 0.5rem;
}

/* WhatsApp consult link */
.pd-ab-wsp-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--pd-texto-suave, #5B6068);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding-bottom: 1px;
  margin-bottom: 1.4rem;
  transition: color 0.14s, border-color 0.14s;
  align-self: flex-start;
}
.pd-ab-wsp-link:hover { color: #16a34a; border-color: #16a34a; }

/* Restock form */
.pd-ab-restock {
  background: rgba(0,0,0,0.025);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.4rem;
}
.pd-ab-restock-label {
  font-size: 0.78rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  color: rgba(0,0,0,0.5);
  margin-bottom: 0.7rem;
  font-weight: 500;
}
.pd-ab-restock-row {
  display: flex;
  gap: 8px;
}
.pd-ab-restock-input {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 2px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  background: #fff;
  color: #111;
}
.pd-ab-restock-input:focus:not(:focus-visible) { outline: none; border-color: var(--color-primario, #333); }
.pd-ab-restock-btn {
  padding: 0.45rem 1rem;
  background: var(--color-primario, #111);
  color: #fff;
  border: none;
  border-radius: 2px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

/* Delivery info — definition list, minimal */
.pd-ab-delivery {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0;
}
.pd-ab-delivery-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: baseline;
}
.pd-ab-delivery-row dt {
  font-size: 0.72rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pd-texto-suave, #5B6068);
}
.pd-ab-delivery-row dd {
  font-size: 0.8rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  color: rgba(0,0,0,0.62);
  line-height: 1.5;
  margin: 0;
}

/* Secondary actions: fav, share, copy */
.pd-ab-secondary-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.pd-ab-action-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  text-decoration: none;
  padding: 0.38rem 0.7rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pd-ab-action-link:hover {
  background: var(--color-primario, #111);
  border-color: var(--color-primario, #111);
  color: #fff;
}
/* Override circle shape from pages.css — pill, not circle */
.pd-ab-action-link.pd-fav-btn {
  width: auto;
  height: auto;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  padding: 0.38rem 0.7rem;
  margin-left: 0;
  vertical-align: baseline;
  flex-shrink: unset;
}
.pd-ab-action-link.pd-fav-btn:hover {
  transform: none;
  border-color: var(--color-primario, #111);
  background: var(--color-primario, #111);
  color: #fff;
}
.pd-ab-action-link.pd-fav-btn.activo {
  background: #fff0f0;
  border-color: #fca5a5;
  color: #e11d48;
}
.pd-ab-action-link.pd-fav-btn.activo:hover {
  background: #e11d48;
  border-color: #e11d48;
  color: #fff;
  transform: none;
}
.pd-ab-action-sep { display: none; }

/* ── Editorial description section ──────────────────────────────────────── */
.pd-ab-editorial {
  border-top: 1px solid rgba(0,0,0,0.07);
  background: var(--color-fondo, #faf9f7);
  padding: 5rem 2rem;
}
.pd-ab-editorial-inner {
  max-width: 700px;
  margin: 0 auto;
}
.pd-ab-editorial-label {
  font-size: 0.72rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pd-texto-suave, #5B6068);
  margin-bottom: 2rem;
}
.pd-ab-editorial-body {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 400;
  line-height: 1.75;
  color: rgba(0,0,0,0.72);
  letter-spacing: 0.01em;
}
.pd-ab-editorial-body br { display: block; content: ''; margin: 0.4em 0; }

/* ── Section shared header ──────────────────────────────────────────────── */
.pd-ab-section-header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}
.pd-ab-section-label {
  font-size: 0.72rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* rgba(0,0,0,.3) daba contraste 2.2 sobre el panel claro: el label de sección
     ("PRODUCTOS RELACIONADOS", "RESEÑAS") casi no se leía. El token ya está
     calculado contra el fondo de página. */
  color: var(--color-texto-pagina-suave, #57534e);
  margin: 0;
}

/* ── Related products ───────────────────────────────────────────────────── */
.pd-ab-related-section {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding: 4rem 0;
  background: var(--color-fondo, #faf9f7);
  overflow: hidden;
}
.pd-ab-rec-wrap {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pd-ab-rec-viewport {
  overflow: hidden;
  flex: 1;
}
.pd-rec-track {
  display: flex;
  gap: 14px;
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
/* Related cards inherit .product styles from styles.css;
   here we just ensure minimal size */
.pd-rec-card {
  min-width: 185px;
  max-width: 185px;
  flex-shrink: 0;
  cursor: pointer;
}
.pd-ab-rec-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: 1px solid rgba(0,0,0,0.15);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pd-texto-suave, #5B6068);
  transition: border-color 0.15s, color 0.15s;
}
.pd-ab-rec-arrow:hover { border-color: var(--color-primario,#111); color: var(--color-primario,#111); }
.pd-ab-rec-arrow[data-disabled] { opacity: 0.25; pointer-events: none; }

/* ── Reviews section ─────────────────────────────────────────────────────── */
.pd-ab-reviews-section {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding: 4rem 0;
  background: var(--color-fondo, #faf9f7);
}
.pd-ab-reviews-summary {
  font-size: 0.78rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  color: var(--pd-texto-suave, #5B6068);
}
.pd-ab-reviews-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 2rem;
}
.pd-ab-reviews-list {
  margin-bottom: 2rem;
}
.pd-ab-review-details {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding-top: 1.2rem;
}
.pd-ab-review-summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--pd-texto-suave, #5B6068);
  list-style: none;
  user-select: none;
  transition: color 0.14s;
}
.pd-ab-review-summary-toggle:hover { color: var(--color-primario,#111); }
.pd-ab-review-summary-toggle::-webkit-details-marker { display: none; }
.pd-ab-review-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 1.2rem;
}
.pd-ab-stars-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-ab-stars-label {
  font-size: 0.72rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pd-texto-suave, #5B6068);
  margin-right: 4px;
}
.pd-star-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 2px;
  color: #9ca3af;
  transition: color 0.1s;
  line-height: 1;
}
.pd-ab-input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 2px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.85rem;
  background: rgba(255,255,255,0.7);
  color: #111;
  transition: border-color 0.14s;
  box-sizing: border-box;
}
.pd-ab-input:focus:not(:focus-visible) { outline: none; border-color: var(--color-primario,#333); }
textarea.pd-ab-input { resize: vertical; min-height: 80px; }
.pd-ab-review-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.pd-ab-review-submit {
  padding: 0.5rem 1.4rem;
  background: var(--color-primario, #111);
  color: #fff;
  border: none;
  border-radius: 2px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.14s;
}
.pd-ab-review-submit:hover { opacity: 0.82; }
.pd-ab-review-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.pd-ab-review-cancel {
  background: none;
  border: none;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.78rem;
  color: var(--pd-texto-suave, #5B6068);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-ab-review-ok {
  font-size: 0.78rem;
  color: #15803d;
  font-family: var(--font-body, 'DM Sans', sans-serif);
}

/* ── CTA strip ───────────────────────────────────────────────────────────── */
.pd-ab-cta {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding: 3rem 2rem;
  text-align: center;
  background: var(--color-fondo, #faf9f7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  /* Cierra la página con aire propio, además del margen del footer. */
  margin-bottom: 2.5rem;}
.pd-ab-cta p {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
  color: var(--pd-texto-suave, #5B6068);
  margin: 0;
}
.pd-ab-cta-link {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primario, #111);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  padding-bottom: 2px;
  transition: border-color 0.14s;
}
.pd-ab-cta-link:hover { border-color: var(--color-primario,#111); }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.pd-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  /* visibility además de opacity: con sólo opacity:0 el lightbox cerrado sigue
     en el orden de tabulación (el botón ✕ recibía foco navegando con teclado)
     y su <img> sin src cuenta como imagen del documento. */
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.pd-lightbox.open { opacity: 1; pointer-events: all; visibility: visible; }
.pd-lightbox img {
  max-width: 90vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 2px;
}
.pd-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.13s;
}
.pd-lightbox-close:hover { color: #fff; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.pd-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  padding: 0.62rem 1.4rem;
  border-radius: 30px;
  z-index: 8000;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  white-space: nowrap;
}
.pd-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pd-ab-nav-inner { padding: 0.5rem 1rem; }

  .pd-ab-hero {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .pd-ab-images {
    position: relative;
    top: unset;
    max-height: unset;
    overflow: visible;
  }
  .pd-carousel-frame {
    min-height: 72vw;
  }
  .pd-ab-main-img {
    min-height: 72vw;
    max-height: 80vw;
    object-position: center;
  }

  .pd-car-thumbs {
    position: relative;
    bottom: unset;
    left: unset;
    transform: none;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    background: rgba(255,255,255,0.9);
    border: none;
    border-top: 1px solid rgba(0,0,0,0.06);
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 12px;
  }

  .pd-ab-panel {
    padding: 2rem 1.2rem 3rem;
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.06);
  }

  .pd-ab-title {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    margin-bottom: 1.1rem;
  }

  .pd-ab-editorial { padding: 3rem 1.2rem; }
  .pd-ab-editorial-inner { max-width: 100%; }

  .pd-ab-reviews-inner { padding: 0 1.2rem; }
  .pd-ab-section-header { padding: 0 1.2rem 1.2rem; }

  .pd-ab-rec-wrap {
    padding: 0 0.5rem;
  }
  .pd-ab-rec-arrow {
    display: none;
  }
  .pd-ab-rec-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Sin esto se veía la barra de scroll gris cruzando el carrusel de
       "productos que te pueden gustar". El deslizamiento encaja en cada
       tarjeta para que no queden cortadas al medio. */
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .pd-ab-rec-viewport::-webkit-scrollbar { display: none; }
  .pd-rec-card { scroll-snap-align: start; }
  .pd-rec-track {
    transition: none;
  }

  /* Labels tipo "TRANSFERENCIA EFECTIVO O MERCADOPAGO" no entran en una
     columna angosta sin envolver en 3 líneas — apilado en vez de 2 columnas
     apretadas. */
  .pd-ab-delivery-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .pd-toast { bottom: 80px; }
}

@media (max-width: 480px) {
  .pd-ab-buy { flex-direction: column; }
  /* flex:1 en el botón está pensado para la fila de desktop (que ocupe el ancho
     sobrante). Al pasar a columna ese flex:1 reparte ALTURA: el stepper se
     quedaba con sus 54px y al botón le tocaba el resto — 18px de alto, texto
     recortado y target táctil imposible. flex:0 0 auto + min-height lo fija. */
  .pd-ab-btn-main { flex: 0 0 auto; height: 50px; min-height: 50px; }
  /* .pd-ab-buy tiene align-items:stretch (pensado para la fila de desktop,
     donde estira el stepper a la altura del botón) — al pasar a columna acá
     ese stretch pasa al eje horizontal y estira el stepper a todo el ancho,
     dejando los botones −/+ descentrados dentro de una caja mucho más ancha
     que su contenido. align-self:flex-start lo vuelve a su ancho natural. */
  .pd-ab-qty { align-self: flex-start; }
}

/* ── Editorial boutique overrides (solo cards-editorial) ─────────────────── */
body.cards-editorial .pd-ab-title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
body.cards-editorial .pd-price {
  font-weight: 300;
  color: var(--color-precio);
}
body.cards-editorial .pd-ab-btn-main {
  border-radius: 2px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.cards-editorial .pd-ab-hero { min-height: 88vh; }

/* ══════════════════════════════════════════════════════════════════════
   TEMPLATE VARIATIONS — 4 estilos distintos del producto detalle.
   Activados por body.cards-* (set by _aplicarTema en api.js).
   El default (sin clase cards-*) es el Aesop Boutique base de arriba.
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   GALERÍA — Equilibrado y limpio. 50/50, fondo blanco, datos claros.
   Título sans-serif, precio en acento, botón sólido estándar.
   ───────────────────────────────────────────────────────────────────── */
body.cards-galeria .pd-ab-hero {
  grid-template-columns: 50fr 50fr;
  max-width: 1240px;
}
body.cards-galeria .pd-ab-images {
  background: #f3f4f6;
}
body.cards-galeria .pd-carousel-frame,
body.cards-galeria .pd-ab-main-img {
  min-height: 70vh;
  max-height: 80vh;
}
body.cards-galeria .pd-ab-panel {
  padding: 3.5rem 3rem 3.5rem 4rem;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.07);
  justify-content: flex-start;
}
body.cards-galeria .pd-ab-title {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #111;
  margin-bottom: 1.1rem;
}
body.cards-galeria .pd-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-precio-acento);
  letter-spacing: -0.01em;
}
body.cards-galeria .pd-ab-rule { background: rgba(0,0,0,0.07); }
body.cards-galeria .pd-ab-btn-main {
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  height: 52px;
}
body.cards-galeria .pd-ab-btn-main:hover:not(:disabled) {
  background: var(--color-acento, #333);
  opacity: 0.92;
}
body.cards-galeria .pd-ab-btn-main:disabled,
body.cards-galeria .pd-ab-btn-main.pd-btn-disabled {
  background: rgba(0,0,0,0.12);
  color: var(--pd-texto-suave, #5B6068);
  border: none;
}
body.cards-galeria .pd-ab-editorial { background: #f9fafb; }
body.cards-galeria .pd-ab-editorial-body {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.93rem;
  line-height: 1.82;
  color: rgba(0,0,0,0.58);
  font-style: normal;
}
body.cards-galeria .pd-ab-cta p {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-style: normal;
  font-size: 0.95rem;
}
body.cards-galeria .pd-ab-related-section,
body.cards-galeria .pd-ab-reviews-section,
body.cards-galeria .pd-ab-cta { background: #f9fafb; }
body.cards-galeria .pd-car-thumbs { background: rgba(243,244,246,0.9); }

/* ─────────────────────────────────────────────────────────────────────
   EDITORIAL — Moderna y estructurada. 48/52, fondo gris suave.
   Info organizada, precio prominente, botón sólido.
   ───────────────────────────────────────────────────────────────────── */
body.cards-editorial .pd-ab-hero {
  grid-template-columns: 48fr 52fr;
  max-width: 1200px;
}
body.cards-editorial .pd-carousel-frame,
body.cards-editorial .pd-ab-main-img {
  min-height: 76vh;
  max-height: 86vh;
}
body.cards-editorial .pd-ab-panel {
  padding: 3rem 3rem 3rem 4.5rem;
  background: #f8f9fa;
  border-left: 1px solid rgba(0,0,0,0.06);
}
body.cards-editorial .pd-ab-tags { margin-bottom: 0.5rem; }
body.cards-editorial .pd-ab-title {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.28;
  color: #1a1a1a;
  margin-bottom: 1.1rem;
}
body.cards-editorial .pd-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-precio-acento);
  letter-spacing: -0.01em;
}
body.cards-editorial .pd-ab-btn-main {
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.92rem;
  font-weight: 600;
  height: 50px;
  border-radius: 7px;
}
body.cards-editorial .pd-ab-wsp-link { letter-spacing: 0.02em; }
body.cards-editorial .pd-ab-editorial { background: #f8f9fa; }
body.cards-editorial .pd-ab-editorial-inner {
  max-width: 860px;
  padding: 0 2rem;
  display: block;
}
body.cards-editorial .pd-ab-editorial-body {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.92rem;
  color: rgba(0,0,0,0.6);
  line-height: 1.82;
  font-style: normal;
}
body.cards-editorial .pd-ab-cta p {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-style: normal;
  font-size: 0.95rem;
}
body.cards-editorial .pd-ab-related-section,
body.cards-editorial .pd-ab-reviews-section,
body.cards-editorial .pd-ab-cta { background: #f8f9fa; }

/* ─────────────────────────────────────────────────────────────────────
   BORDE — Catálogo limpio. Columna única centrada, fondo neutro.
   Imagen con fondo gris, info en blanco, precio y botón claros.
   ───────────────────────────────────────────────────────────────────── */
body.cards-borde .pd-ab-hero {
  grid-template-columns: 1fr;
  max-width: 860px;
  margin: 0 auto;
  min-height: unset;
  gap: 0;
}
body.cards-borde .pd-ab-images {
  position: relative;
  top: unset;
  max-height: unset;
  overflow: hidden;
  background: #ececec;
  border: none;
  border-radius: 8px;
  margin: 1.5rem 2rem 0;
}
body.cards-borde .pd-carousel-frame { min-height: 52vw; max-height: 62vh; }
body.cards-borde .pd-ab-main-img    { min-height: 52vw; max-height: 62vh; }
body.cards-borde .pd-ab-panel {
  border-left: none;
  border-top: none;
  padding: 2.5rem 2rem 4rem;
  align-items: flex-start;
  background: #fff;
}
body.cards-borde .pd-ab-title {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: -0.01em;
  color: #111;
  margin-bottom: 1rem;
}
body.cards-borde .pd-price {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--color-precio-acento);
  letter-spacing: -0.01em;
}
body.cards-borde .pd-ab-qty { border-radius: 6px; }
body.cards-borde .pd-ab-btn-main {
  border-radius: 8px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
  font-size: 0.92rem;
  height: 50px;
}
body.cards-borde .pd-variante-pill { border-radius: 4px; }
body.cards-borde .pd-ab-editorial {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}
body.cards-borde .pd-ab-editorial-inner { max-width: 680px; }
body.cards-borde .pd-ab-editorial-body {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.9rem;
  line-height: 1.85;
  color: rgba(0,0,0,0.58);
  font-style: normal;
}
body.cards-borde .pd-ab-cta p {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-style: normal;
  font-size: 0.95rem;
}
body.cards-borde .pd-ab-reviews-section,
body.cards-borde .pd-ab-related-section,
body.cards-borde .pd-ab-cta {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
}
body.cards-borde .pd-car-thumbs {
  position: relative;
  bottom: unset; left: unset; transform: none;
  border-radius: 0 0 8px 8px;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.07);
  background: rgba(236,236,236,0.9);
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  backdrop-filter: none;
}

/* ─────────────────────────────────────────────────────────────────────
   CAJA — E-commerce estándar. Panel blanco con sombra, imagen izquierda.
   Layout 52/48, info card sticky, precio bold en acento.
   ───────────────────────────────────────────────────────────────────── */
body.cards-caja .pd-ab-hero {
  grid-template-columns: 52fr 48fr;
  gap: 0;
  max-width: 1200px;
  padding: 1.5rem 2rem;
  box-sizing: border-box;
  align-items: start;
  background: #f5f5f5;
}
body.cards-caja .pd-ab-images {
  border-radius: 10px;
  overflow: hidden;
  margin-right: 1.5rem;
  background: #e8e8e8;
}
body.cards-caja .pd-carousel-frame { min-height: 58vh; border-radius: 10px; }
body.cards-caja .pd-ab-main-img    { min-height: 58vh; border-radius: 0; }
body.cards-caja .pd-ab-panel {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  padding: 2.4rem 2.2rem;
  align-self: start;
  position: sticky;
  top: 16px;
}
body.cards-caja .pd-ab-title {
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  letter-spacing: -0.015em;
  line-height: 1.28;
  color: #111;
  margin-bottom: 1rem;
}
body.cards-caja .pd-price {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-precio-acento);
  letter-spacing: -0.01em;
}
body.cards-caja .pd-ab-rule { background: rgba(0,0,0,0.06); }
body.cards-caja .pd-ab-btn-main {
  border-radius: 8px;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: none;
  height: 52px;
  font-weight: 600;
}
body.cards-caja .pd-ab-qty { border-radius: 8px; }
body.cards-caja .pd-ab-qty-btn { height: 52px; }
body.cards-caja .pd-ab-qty-num { line-height: 52px; }
body.cards-caja .pd-variante-pill { border-radius: 6px; }
body.cards-caja .pd-ab-editorial { background: #f9fafb; }
body.cards-caja .pd-ab-editorial-body {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.92rem;
  line-height: 1.82;
  color: rgba(0,0,0,0.58);
  font-style: normal;
}
body.cards-caja .pd-ab-cta p {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-style: normal;
  font-size: 0.95rem;
}
body.cards-caja .pd-ab-related-section,
body.cards-caja .pd-ab-reviews-section,
body.cards-caja .pd-ab-cta { background: #f9fafb; }
body.cards-caja .pd-car-thumbs {
  position: relative;
  bottom: unset; left: unset; transform: none;
  background: #e8e8e8;
  border: none;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid rgba(0,0,0,0.07);
  justify-content: flex-start;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
  backdrop-filter: none;
}

/* Mobile: en caja, el panel pierde su sticky + card */
@media (max-width: 900px) {
  body.cards-caja .pd-ab-hero {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1rem;
    background: #f5f5f5;
  }
  body.cards-caja .pd-ab-images { margin-right: 0; border-radius: 10px; }
  body.cards-caja .pd-ab-panel { position: relative; top: unset; border-radius: 12px; padding: 2rem 1.2rem 3rem; }
  body.cards-borde .pd-ab-images { margin: 0.8rem 1rem 0; }
  /* cards-borde no tenía override mobile del padding: 2.5rem 2rem 4rem del
     desktop se mantenía intacto — no queda tan roto/asimétrico como galeria/
     editorial pero sí es más margen del necesario en un celular chico. */
  body.cards-borde .pd-ab-panel { padding: 2rem 1.2rem 3rem; }

  /* cards-galeria y cards-editorial fijaban grid-template-columns fuera de
     cualquier media query, con más especificidad que el .pd-ab-hero{1fr}
     de arriba — le ganaban en CUALQUIER ancho, incluido mobile. La página
     de producto quedaba en 2 columnas apretadas hasta en un celular chico. */
  body.cards-galeria .pd-ab-hero,
  body.cards-editorial .pd-ab-hero {
    grid-template-columns: 1fr;
  }
  body.cards-galeria .pd-ab-panel {
    padding: 2rem 1.2rem 3rem;
    border-left: none;
  }
  /* cards-editorial tenía el mismo problema: padding desktop asimétrico
     (3rem 3rem 3rem 4.5rem, pensado para separarse de la columna de imagen)
     sin override mobile — quedaba con muchísimo margen a los costados y
     descentrado en celular. */
  body.cards-editorial .pd-ab-panel {
    padding: 2rem 1.2rem 3rem;
    border-left: none;
  }
}

/* ── Casos extremos de la ficha (todos los temas) ─────────────────────────
   Selectores con `html body[class*="layout-"]` (0,2,2 o más): le ganan a los
   `body.layout-X .pd-…` (0,2,1) de los 22 temas sin `!important`.

   1. Grilla: `1fr` es `minmax(auto, 1fr)`, así que el contenido más ancho del
      panel (una palabra larga, la fila de comprar) agranda la columna y la
      página se desborda de costado. Pasaba siempre en moderno y
      alimentos-figma en el celular, y en los 22 con un nombre sin espacios.
   2. Título y precio cortan palabra si no entran: un nombre como
      "Supercalifragilístico…" no puede empujar el panel fuera de la pantalla.
   3. Foto de proporción extrema (`.pd-foto-extrema`, la pone main-produto.js
      con la proporción real): entera, nunca recortada, en cualquier tema. */
html body[class*="layout-"] .pd-ab-hero > * { min-width: 0; }
html body[class*="layout-"] .pd-ab-title,
html body[class*="layout-"] .pd-ab-panel h1,
html body[class*="layout-"] .pd-ab-price,
html body[class*="layout-"] .pd-rec-card h3 { overflow-wrap: anywhere; }
html body[class*="layout-"] .pd-ab-main-img.pd-foto-extrema {
  object-fit: contain;
  background: var(--color-secundario, #fff);
}
/* 4. El botón de comprar tenía `white-space: nowrap` y alto fijo (50–54px
      según el tema): "Agregar al carrito (2 en carrito)" —o el texto que
      ponga el comercio— se salía del botón y desbordaba la página en el
      celular (medido: 25px en alimentos-figma). Envuelve a dos renglones y el
      alto pasa a ser un mínimo. */
html body[class*="layout-"] .pd-ab-btn-main {
  white-space: normal;
  overflow-wrap: anywhere;
  height: auto;
  min-height: 50px;
  line-height: 1.2;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}