/* =================================================================================================
   Product Detail Page (PDP) — Eurosur Sanlúcar
   Fase 2b (PR_pdp_extraction) — 2026-07-23

   Estilos extraídos del antiguo <style> inline en articulo.php (líneas ~158-247).
   En esta PR el <style> inline se mantiene como fallback; en una PR posterior se eliminará
   una vez validado el resultado en navegador con 2-3 productos de ejemplo.

   Renames aplicados:
       var(--eu-amber)      → var(--eu-primary)
       var(--eu-amber-dark) → var(--eu-primary-dark)
       'Inter', sans-serif            → var(--eu-font-sans)
       'Barlow Condensed', sans-serif → var(--eu-font-display)
       'IBM Plex Mono', monospace     → var(--eu-font-mono)

   EL :root declarado en el <style> original NO se duplica aquí — todos los valores
   están consolidados en assets/css/tokens.css.
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   Section + breadcrumbs
   ------------------------------------------------------------------------------------------------- */
.pdp-section {
    background: var(--eu-bg);
    font-family: var(--eu-font-sans);
    color: var(--eu-ink);
}

.pdp-breadcrumb {
    background: #fff;
    border-bottom: 1px solid var(--eu-border);
}
.pdp-breadcrumb h1 {
    font-family: var(--eu-font-display);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 1.35rem;
    color: var(--eu-ink);
    margin-bottom: .25rem;
}
.pdp-breadcrumb .breadcrumb {
    font-size: .85rem;
    --bs-breadcrumb-divider: '/';
}
.pdp-breadcrumb .breadcrumb a {
    color: var(--eu-steel);
    text-decoration: none;
}
.pdp-breadcrumb .breadcrumb a:hover {
    color: var(--eu-primary-dark);
}

/* Botón "Volver" — pdp specific. Selector .btn.btn-article-back con specificity (0,2,0,0)
   gana contra cualquier regla .btn sola que pueda venir de assets/css/style.css
   (~18k líneas, third-party, cargada DESPUÉS de pdp.css) — preserva el comportamiento
   del antiguo style=&quot;display:none&quot; inline (1,0,0,0). El JS de articulo.php
   referencia esta clase mediante $(btnBackSelector).show() / .remove(). */
.btn.btn-article-back {
    border-radius: var(--eu-radius);
    font-size: .85rem;
    /* Estado inicial: oculto. articulo.php JS lo alterna con .show() / .remove()
       cuando hay historial dentro del mismo dominio. */
    display: none;
}

/* -------------------------------------------------------------------------------------------------
   Galería de imágenes (main + thumbnails)
   ------------------------------------------------------------------------------------------------- */
.pdp-gallery-main {
    /* Anchors the .discount-tag (position:absolute, components.css §1)
       that articulo.php renders inside this gallery. */
    position: relative;
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    background: #fff;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
}
.pdp-gallery-main img {
    max-height: 420px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.pdp-thumb-strip {
    display: flex;
    gap: .6rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}
.pdp-thumb-strip button {
    padding: 0;
    border: 2px solid var(--eu-border);
    border-radius: 8px;
    background: #fff;
    width: 68px;
    height: 68px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease;
}
.pdp-thumb-strip button.active,
.pdp-thumb-strip button:hover {
    border-color: var(--eu-primary);
}
.pdp-thumb-strip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

/* -------------------------------------------------------------------------------------------------
   Header del producto: título, chips de código, stock badge, tags de grupo/familia
   ------------------------------------------------------------------------------------------------- */
.pdp-title {
    font-family: var(--eu-font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--eu-ink);
    text-transform: uppercase;
    letter-spacing: .01em;
}
.pdp-code-chip {
    font-family: var(--eu-font-mono);
    font-size: .78rem;
    letter-spacing: .03em;
    border: 1px dashed var(--eu-steel-soft);
    border-radius: 6px;
    padding: .2rem .55rem;
    color: var(--eu-steel);
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.pdp-meta-row a.pdp-tag {
    font-size: .8rem;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--eu-border);
    border-radius: 999px;
    padding: .3rem .8rem;
    color: var(--eu-ink);
    transition: all .15s ease;
}
.pdp-meta-row a.pdp-tag:hover {
    border-color: var(--eu-primary);
    color: var(--eu-primary-dark);
}
.pdp-meta-row .pdp-tag-label {
    color: var(--eu-steel);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: .35rem;
}

/* -------------------------------------------------------------------------------------------------
   Stock badge (verde / rojo)
   ------------------------------------------------------------------------------------------------- */
.pdp-stock {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .35rem .8rem;
}
.pdp-stock.in  { background: var(--eu-green-bg); color: var(--eu-green); }
.pdp-stock.out { background: var(--eu-red-bg);   color: var(--eu-red); }
.pdp-stock .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* -------------------------------------------------------------------------------------------------
   Price card + staircase pricing (signature element)
   ------------------------------------------------------------------------------------------------- */
.pdp-price-card {
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    background: #fff;
    padding: 1.25rem 1.4rem;
}
.pdp-current-price {
    font-family: var(--eu-font-display);
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--eu-ink);
    line-height: 1;
}
.pdp-old-price {
    font-size: 1.05rem;
    color: var(--eu-steel);
    text-decoration: line-through;
    margin-left: .6rem;
}

.pdp-staircase {
    margin-top: 1rem;
    border-top: 1px dashed var(--eu-border);
    padding-top: .9rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.pdp-staircase-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
}
.pdp-staircase-row .step-marker {
    font-family: var(--eu-font-mono);
    font-size: .72rem;
    color: #fff;
    background: var(--eu-ink);
    border-radius: 5px;
    padding: .12rem .45rem;
    min-width: 2.6rem;
    text-align: center;
}
/* Staircase escalonado: válido para hasta 4 niveles de uds-oferta. Productos con 5+
   niveles quedan sin escalonado adicional (misma fila). Auditoría pendiente (Fase 7+). */
.pdp-staircase-row:nth-child(1) { margin-left: 0; }
.pdp-staircase-row:nth-child(2) { margin-left: .9rem; }
.pdp-staircase-row:nth-child(3) { margin-left: 1.8rem; }
.pdp-staircase-row:nth-child(4) { margin-left: 2.7rem; }
.pdp-staircase-row .price-highlight {
    color: var(--eu-primary-dark);
    font-weight: 700;
}

/* -------------------------------------------------------------------------------------------------
   Quantity input + CTA primario + social row
   ------------------------------------------------------------------------------------------------- */
.pdp-qty-input {
    max-width: 110px;
    border-radius: var(--eu-radius) 0 0 var(--eu-radius);
    border: 1px solid var(--eu-border);
}
.btn-eu-primary {
    background: var(--eu-primary);
    border-color: var(--eu-primary);
    color: #ffffff;
    font-weight: 700;
    border-radius: 0 var(--eu-radius) var(--eu-radius) 0;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .88rem;
}
.btn-eu-primary:hover:not(:disabled) {
    background: var(--eu-primary-dark);
    border-color: var(--eu-primary-dark);
    color: #fff;
}
.btn-eu-primary:disabled {
    background: var(--eu-steel-soft);
    border-color: var(--eu-steel-soft);
    color: #fff;
    opacity: 1;
}

.pdp-social .btn {
    border-radius: 999px;
    font-size: .82rem;
}

/* -------------------------------------------------------------------------------------------------
   Tabs + datasheet links
   ------------------------------------------------------------------------------------------------- */
.pdp-tabs .nav-link {
    font-family: var(--eu-font-display);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    color: var(--eu-steel);
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: .75rem 1.25rem;
}
.pdp-tabs .nav-link.active {
    color: var(--eu-ink);
    border-bottom-color: var(--eu-primary);
    background: transparent;
}
.pdp-tab-content {
    background: #fff;
    border: 1px solid var(--eu-border);
    border-top: none;
    border-radius: 0 0 var(--eu-radius) var(--eu-radius);
    padding: 1.75rem;
}
.pdp-datasheet-link {
    border-radius: 999px;
    font-size: .85rem;
}

/* -------------------------------------------------------------------------------------------------
   Utilidad: labels eyebrow tipográficos (Cantidad, Compartir).
   Antes inline style="color: var(--eu-steel); letter-spacing:.03em;" en articulo.php.
   Sustituye los 2 style="..." del lado izquierdo de "Cantidad" y "Compartir".
   ------------------------------------------------------------------------------------------------- */
.eu-label-eyebrow {
    color: var(--eu-steel);
    letter-spacing: .03em;
}