/* Detalle de producto · escritorio
   Misma estética que producto-mobile.css: superficies blancas, fondo menta, ficha en columnas
   y panel de compra sticky. Todas las clases llevan prefijo pd- para no colisionar con custom.css. */

.pd-page {
    --pd-tinta: #17262F;
    --pd-texto: #3E5560;
    --pd-muted: #5B7280;
    --pd-linea: #DEE7E3;
    --pd-primario: #2095CE;
    --pd-secundario: #186489;
    --pd-ok: #17794F;
    background: var(--tu-fondo, #EDF1EE);
    color: var(--pd-tinta);
    font-family: 'Wix Madefor Display', sans-serif;
    padding-bottom: 56px;
}

.pd-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Ruta de navegación dentro de la página (estilos en tienda-ui.css, bloque rn-) */
.pd-breadcrumb {
    padding: 14px 0 16px;
}

/* Composición principal */
.pd-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    grid-template-areas:
        "gallery buy"
        "sections buy";
    gap: 24px;
    align-items: start;
}

.pd-gallery {
    grid-area: gallery;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}

/* Con una sola imagen no hay columna de miniaturas: la foto ocupa todo el ancho */
.pd-gallery.is-unica {
    grid-template-columns: minmax(0, 1fr);
}

.pd-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pd-thumb {
    width: 76px;
    height: 76px;
    padding: 4px;
    border: 1px solid var(--pd-linea);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease;
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pd-thumb:hover {
    border-color: #B9CCC6;
}

.pd-thumb.is-active {
    border: 2px solid var(--pd-primario);
}

.pd-figure {
    position: relative;
    height: 560px;
    border: 1px solid var(--pd-linea);
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    overflow: hidden;
}

.pd-figure img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pd-counter {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(23, 38, 47, .68);
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Panel de compra */
.pd-buy {
    grid-area: buy;
    position: sticky;
    top: 150px;
    background: #fff;
    border: 1px solid var(--pd-linea);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pd-buy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pd-brand {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pd-muted);
}

.pd-title {
    margin: 0;
    font-size: 25px;
    line-height: 31px;
    font-weight: 600;
    color: var(--pd-tinta);
}

.pd-fav {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--pd-linea);
    border-radius: 8px;
    background: #fff;
    color: var(--pd-secundario);
    font-size: 15px;
    cursor: pointer;
}

.pd-fav-icon.solid {
    font-weight: 900;
    color: var(--pd-primario);
}

.pd-price-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd-old {
    font-size: 14px;
    color: var(--pd-muted);
}

.pd-old-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-price-line {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-price {
    font-size: 34px;
    line-height: 40px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pd-tinta);
}

.pd-price sup {
    font-size: 52%;
    position: relative;
    top: -.6em;
    left: 1px;
}

.pd-iva {
    font-size: 13px;
    color: var(--pd-muted);
    padding-bottom: 6px;
}

.pd-sin-impuestos {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--pd-muted);
    font-variant-numeric: tabular-nums;
}

.pd-off {
    padding: 3px 8px;
    border-radius: 6px;
    background: #E4F2FA;
    color: var(--pd-secundario);
    font-size: 12.5px;
    font-weight: 700;
}

.pd-price-note {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: #B4453A;
}

.pd-total {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--pd-muted);
}

.pd-total strong {
    color: var(--pd-tinta);
    font-variant-numeric: tabular-nums;
}

.pd-stock {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pd-ok);
}

.pd-stock.is-out {
    color: #B4453A;
}

/* Filas de entrega y pago */
.pd-info {
    border: 1px solid var(--pd-linea);
    border-radius: 10px;
    overflow: hidden;
}

.pd-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: default;
}

.pd-info-row+.pd-info-row {
    border-top: 1px solid #EDF1EE;
}

.pd-info-row i.pd-info-icon {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    font-size: 15px;
    color: var(--pd-secundario);
}

.pd-info-body {
    flex: 1;
    min-width: 0;
}

.pd-info-title {
    display: block;
    font-size: 14px;
    line-height: 19px;
    font-weight: 500;
    color: var(--pd-tinta);
}

.pd-info-sub {
    display: block;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--pd-muted);
}

.pd-info-chevron {
    font-size: 11px;
    color: #93A6AE;
}

button.pd-info-row {
    cursor: pointer;
}

button.pd-info-row:hover {
    background: #F7FAF8;
}

/* Cantidad */
.pd-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pd-qty-label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.pd-qty {
    display: flex;
    align-items: center;
    border: 1px solid #C7D4CF;
    border-radius: 999px;
    background: #fff;
}

.pd-qty button {
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--pd-secundario);
    font-size: 13px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.pd-qty button[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.pd-qty input {
    width: 44px;
    height: 42px;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--pd-tinta);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Acciones */
.pd-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pd-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.pd-btn-primary {
    background: var(--pd-primario);
    color: #fff;
}

.pd-btn-primary:hover {
    background: #1C87BB;
    color: #fff;
}

.pd-btn-outline {
    background: transparent;
    border-color: var(--pd-secundario);
    color: var(--pd-secundario);
}

.pd-btn-outline:hover {
    background: rgba(24, 100, 137, .06);
}

.pd-btn[disabled],
.pd-btn.is-disabled {
    background: #6E6E6E;
    border-color: #6E6E6E;
    color: #fff;
    cursor: not-allowed;
}

.pd-note {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--pd-muted);
}

/* Secciones inferiores */
.pd-sections {
    grid-area: sections;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.pd-card {
    background: #fff;
    border: 1px solid var(--pd-linea);
    border-radius: 12px;
    padding: 24px;
}

.pd-section-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--pd-tinta);
}

.pd-desc p {
    margin: 0;
    font-size: 14.5px;
    line-height: 23px;
    color: var(--pd-texto);
    max-width: 72ch;
}

.pd-meta {
    margin: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 12.5px;
    color: var(--pd-muted);
}

.pd-meta strong {
    color: var(--pd-tinta);
    font-weight: 500;
}

.pd-ficha {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.pd-ficha dt {
    font-size: 12px;
    line-height: 16px;
    color: #6B8090;
    font-weight: 400;
}

.pd-ficha dd {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 19px;
    font-weight: 500;
    color: var(--pd-tinta);
    font-variant-numeric: tabular-nums;
}

/* Relacionados */
.pd-related {
    margin-top: 32px;
}

.pd-related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.pd-related-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.pd-related-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--pd-secundario);
    text-decoration: none;
}

.pd-related-link:hover {
    color: var(--pd-primario);
}

.pd-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .pd-body {
        grid-template-columns: minmax(0, 1fr) 348px;
    }

    .pd-figure {
        height: 480px;
    }

    .pd-related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .pd-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "gallery"
            "buy"
            "sections";
    }

    .pd-buy {
        position: static;
        top: auto;
    }

    .pd-figure {
        height: 420px;
    }

    .pd-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .pd-shell {
        padding: 0 16px;
    }

    .pd-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-thumbs {
        order: 2;
        flex-direction: row;
        overflow-x: auto;
    }

    .pd-figure {
        height: 320px;
        padding: 16px;
    }

    .pd-title {
        font-size: 21px;
        line-height: 26px;
    }

    .pd-price {
        font-size: 28px;
        line-height: 33px;
    }

    .pd-ficha {
        grid-template-columns: 1fr;
    }
}

/* Loading del botón "Agregar al carrito": el .lds-ring global mide 80px (y en móvil 100% de ancho) y estiraba el botón */
.pd-btn .lds-ring.white {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.pd-btn .lds-ring.white div {
    width: 22px;
    height: 22px;
    margin: 0;
}

/* Videos en la galería */
.pd-thumb { position: relative; }
.pd-play-mini { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(23, 38, 47, .72); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; padding-left: 2px; pointer-events: none; }
.pd-figure.is-video { padding: 0; background: #0f1418; }
.pd-figure.is-video img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.pd-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border: 0; border-radius: 50%; background: rgba(23, 38, 47, .78); color: #fff; font-size: 26px; padding-left: 6px; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.pd-play:hover, .pd-play:focus-visible { background: var(--pd-primario); transform: scale(1.06); }
.pd-video { position: absolute; inset: 0; }
.pd-video iframe { width: 100%; height: 100%; border: 0; }

/* Panel de compra: sin márgenes extra entre bloques (los separa el gap) */
.pd-buy .prod-promo-cant { margin: 0; }