/* ==========================================================================
   Detalle de producto (Views/Url/UrlDetail.cshtml) con el estilo nuevo.
   Archivo nuevo: no toca ro.css ni url-detail.css; va después de ambos y todo
   cuelga de .pd-page (la <section> de la ficha). Lo que vive fuera de la sección
   (barra inferior, hoja #pnlCompra) se acota con body:has(.pd-page).
   No cambia ids ni clases que usa el JS de la página (.productList, label.btn.active,
   .inputSeleccionProducto, .btnComprar*, .alerta-opcion, .lblPrecio*, .lblDesde*...).

   Fase 1 · cabecera, galería, tarjeta de entrega y panel de compra:
     1. Base y título
     2. Galería
     3. Entrega (widget informativo)
     4. Panel de compra: título, opciones, cantidad, precio, botones
     5. Botones de la barra inferior y de la hoja de compra
   ========================================================================== */
.pd-page {
    --pd-ink: var(--ro-ink, #222326);
    --pd-muted: var(--ro-muted, #686a70);
    --pd-line: var(--ro-line, #e9e7e5);
    --pd-brand: var(--ro-brand, #d9263b);
    --pd-brand-dark: var(--ro-brand-dark, #b71c2e);
    font-family: var(--ro-font, 'DM Sans', Arial, sans-serif);
    color: var(--pd-ink);
}

/* ---------- 1. Base y título ---------- */
/* Mismo ancho que listado, home y carrito (.shell de la maqueta: 1320px máx., 24px de margen).
   Con padding 0 el contenido de las columnas (que ya llevan 15px) queda alineado con el borde. */
@media (min-width: 768px) {
    .pd-page > .container {
        width: min(1320px, calc(100% - 48px));
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}
.pd-page .header-row {
    margin-bottom: 4px;
}
.pd-page h1.pd-title {
    display: block;
    margin: 6px 0 6px;
    font-family: inherit;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--pd-ink);
}
.pd-page #pnlRating {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--pd-muted);
}
.pd-page #pnlRating a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}
.pd-page #lblRating {
    font-weight: 500;
}
.pd-page .height-20 {
    height: 12px;
}

/* ---------- 2. Galería ---------- */
.pd-page .product-gallery-wrapper {
    margin-bottom: 36px !important;
}
.pd-page .swiper-product-main {
    background: #f5f5f5;
    border: 1px solid var(--pd-line);
    border-radius: 14px;
    overflow: hidden;
}
/* Marco con la proporción de las fotos de producto (730 x 575): antes medía lo que la foto más alta y, si otra era algo más
   baja, quedaba una banda gris debajo. Las fotos se ajustan al marco entero. */
.pd-page .swiper-product-main {
    aspect-ratio: 730 / 575;
}
.pd-page .swiper-product-main .swiper-wrapper,
.pd-page .swiper-product-main .swiper-slide,
.pd-page .swiper-product-main .swiper-slide #divItem {
    height: 100%;
}
/* Las fotos llenan siempre el marco de la galería (cover): una foto con otra proporción se recorta un poco en vez de
   dejar bandas vacías a los lados o arriba y abajo. Lo mismo en las miniaturas y en las tarjetas de los sliders. */
.pd-page .swiper-product-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Miniatura con hueco fijo (proporción 730:575): su alto no depende de la foto, y la foto lo llena entero */
.pd-page .swiper-product-thumbs .swiper-slide {
    aspect-ratio: 730 / 575;
    height: auto;
}
.pd-page .swiper-product-thumbs .swiper-slide li {
    display: block;
    height: 100%;
    list-style: none;
}
.pd-page .swiper-product-thumbs .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Flechas de la galería principal y de los sliders de productos de la ficha. swiper-custom.css (heredado) las deja en 60x60px
   con !important, con el glifo "›" en Roboto de 60px y la posición vertical desplazada con margin-top:-40px !important; aquí se
   reducen a 40px (conservando el mismo centro vertical, margin-top = -10px - 20px) y el chevron se dibuja con una máscara SVG
   cuyo trazo está centrado en su caja, de modo que queda siempre centrado en el círculo sea cual sea la tipografía. */
.pd-page .swiper-product-main .swiper-button-next,
.pd-page .swiper-button-next-relacionados,
.pd-page .swiper-button-next-disenos,
.pd-page .swiper-product-main .swiper-button-prev,
.pd-page .swiper-button-prev-relacionados,
.pd-page .swiper-button-prev-disenos {
    width: 40px !important;
    height: 40px !important;
    margin-top: -30px !important;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .5);   /* traslúcido al 50% en reposo; con el ratón encima pasa al fondo sólido de :hover */
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(34, 35, 38, .14);
    transform: none;
    transition: background-color .15s, border-color .15s;
}
.pd-page .swiper-product-main .swiper-button-next {
    right: 12px;
}
.pd-page .swiper-product-main .swiper-button-prev {
    left: 12px;
}
/* Flechas de los sliders de productos: se posicionan respecto a la COLUMNA (que tiene 15px de relleno a cada lado) y no respecto al
   slider, así que con el desplazamiento por defecto (10px) sobresalían 5px por los laterales del slider. Con 15px de relleno + 10px
   de margen quedan dentro del slider, a 10px de su borde. */
.pd-page .swiper-button-prev-relacionados,
.pd-page .swiper-button-prev-disenos {
    left: 25px;
}
.pd-page .swiper-button-next-relacionados,
.pd-page .swiper-button-next-disenos {
    right: 25px;
}
.pd-page .swiper-product-main .swiper-button-next::after,
.pd-page .swiper-button-next-relacionados::after,
.pd-page .swiper-button-next-disenos::after,
.pd-page .swiper-product-main .swiper-button-prev::after,
.pd-page .swiper-button-prev-relacionados::after,
.pd-page .swiper-button-prev-disenos::after {
    content: "" !important;
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    padding: 0;
    font-size: 0 !important;
    line-height: 0;
    color: transparent !important;
    background-color: #1c927a;   /* el verde de siempre de los carruseles */
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
.pd-page .swiper-product-main .swiper-button-next::after {
    background-color: var(--pd-ink);
}
.pd-page .swiper-product-main .swiper-button-prev::after {
    background-color: var(--pd-ink);
}
.pd-page .swiper-product-main .swiper-button-next::after,
.pd-page .swiper-button-next-relacionados::after,
.pd-page .swiper-button-next-disenos::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5l7 7-7 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5l7 7-7 7'/%3E%3C/svg%3E");
}
.pd-page .swiper-product-main .swiper-button-prev::after,
.pd-page .swiper-button-prev-relacionados::after,
.pd-page .swiper-button-prev-disenos::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 5l-7 7 7 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 5l-7 7 7 7'/%3E%3C/svg%3E");
}
/* Con el ratón encima (swiper-custom.css pone el círculo en verde sólido): el chevron pasa a blanco */
.pd-page .swiper-product-main .swiper-button-next:hover::after,
.pd-page .swiper-button-next-relacionados:hover::after,
.pd-page .swiper-button-next-disenos:hover::after,
.pd-page .swiper-product-main .swiper-button-prev:hover::after,
.pd-page .swiper-button-prev-relacionados:hover::after,
.pd-page .swiper-button-prev-disenos:hover::after {
    background-color: #fff;
}
/* Carruseles de productos: fondo traslúcido solo en reposo (el :hover es el de siempre, de swiper-custom.css) */
.pd-page .swiper-button-next-relacionados:not(:hover),
.pd-page .swiper-button-prev-relacionados:not(:hover),
.pd-page .swiper-button-next-disenos:not(:hover),
.pd-page .swiper-button-prev-disenos:not(:hover) {
    background-color: rgba(255, 255, 255, .5);
}
/* Pantallas táctiles (móvil y tablet): el navegador deja el estado :hover «pegado» en la última flecha tocada, así que el círculo se quedaba
   en verde sólido con el chevron blanco después de soltar. Sin ratón no hay hover real: las flechas vuelven a su aspecto de reposo
   (fondo translúcido y chevron de su color) aunque estén en :hover, :focus o :active. */
@media (hover: none) {
    .pd-page .swiper-product-main .swiper-button-next:hover,
    .pd-page .swiper-product-main .swiper-button-prev:hover,
    .pd-page .swiper-product-main .swiper-button-next:focus,
    .pd-page .swiper-product-main .swiper-button-prev:focus,
    .pd-page .swiper-product-main .swiper-button-next:active,
    .pd-page .swiper-product-main .swiper-button-prev:active,
    .pd-page .swiper-button-next-relacionados:hover,
    .pd-page .swiper-button-prev-relacionados:hover,
    .pd-page .swiper-button-next-relacionados:focus,
    .pd-page .swiper-button-prev-relacionados:focus,
    .pd-page .swiper-button-next-relacionados:active,
    .pd-page .swiper-button-prev-relacionados:active,
    .pd-page .swiper-button-next-disenos:hover,
    .pd-page .swiper-button-prev-disenos:hover,
    .pd-page .swiper-button-next-disenos:focus,
    .pd-page .swiper-button-prev-disenos:focus,
    .pd-page .swiper-button-next-disenos:active,
    .pd-page .swiper-button-prev-disenos:active {
        background: rgba(255, 255, 255, .5) !important;
        border-color: lightgray !important;
        box-shadow: 0 2px 8px rgba(34, 35, 38, .14) !important;
        outline: none;
    }
    .pd-page .swiper-product-main .swiper-button-next:hover::after,
    .pd-page .swiper-product-main .swiper-button-prev:hover::after,
    .pd-page .swiper-product-main .swiper-button-next:focus::after,
    .pd-page .swiper-product-main .swiper-button-prev:focus::after,
    .pd-page .swiper-product-main .swiper-button-next:active::after,
    .pd-page .swiper-product-main .swiper-button-prev:active::after {
        background-color: var(--pd-ink);
    }
    .pd-page .swiper-button-next-relacionados:hover::after,
    .pd-page .swiper-button-prev-relacionados:hover::after,
    .pd-page .swiper-button-next-relacionados:focus::after,
    .pd-page .swiper-button-prev-relacionados:focus::after,
    .pd-page .swiper-button-next-relacionados:active::after,
    .pd-page .swiper-button-prev-relacionados:active::after,
    .pd-page .swiper-button-next-disenos:hover::after,
    .pd-page .swiper-button-prev-disenos:hover::after,
    .pd-page .swiper-button-next-disenos:focus::after,
    .pd-page .swiper-button-prev-disenos:focus::after,
    .pd-page .swiper-button-next-disenos:active::after,
    .pd-page .swiper-button-prev-disenos:active::after {
        background-color: #1c927a;
    }
}
/* Cartel, corazón y colores sobre la foto */
.pd-page .swiper-product-main .tag-new {
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 999px;
}
/* Corazón de favoritos sobre la foto: mismo botón que en los listados (círculo de 38px, blanco translúcido con
   desenfoque, icono gris centrado; al pasar el ratón fondo opaco y corazón rojo). El enlace es el círculo; el icono va
   centrado dentro. Si el producto ya es favorito, el JS le pone su color inline y manda sobre el hover. */
.pd-page .swiper-product-main .wp-actions-product {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    gap: 8px;
    margin: 0;
}
.pd-page .swiper-product-main .wp-actions-product a {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 38px !important;
    height: 38px !important;
    margin: 0;
    padding: 0;
    color: #8a8484;
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
    box-shadow: 0 2px 8px #0000000a;
    transition: background-color .15s, box-shadow .15s, color .15s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .pd-page .swiper-product-main .wp-actions-product a {
        background: rgba(255, 255, 255, .55);
        -webkit-backdrop-filter: blur(8px) saturate(1.3);
        backdrop-filter: blur(8px) saturate(1.3);
    }
}
/* El :hover solo se aplica con ratón (hover: hover): en pantallas táctiles el :hover se queda "pegado" tras el toque y el
   corazón seguía rojo (y el botón opaco) al quitar el favorito. El foco de teclado (:focus-visible) se mantiene siempre. */
.pd-page .swiper-product-main .wp-actions-product a:focus-visible {
    background: #fff;
    box-shadow: 0 3px 12px rgba(34, 35, 38, .18);
}
.pd-page .swiper-product-main .wp-actions-product .lnkFavorito:focus-visible {
    color: #d9263b;
}
@media (hover: hover) {
    .pd-page .swiper-product-main .wp-actions-product a:hover {
        background: #fff;
        box-shadow: 0 3px 12px rgba(34, 35, 38, .18);
    }
    .pd-page .swiper-product-main .wp-actions-product .lnkFavorito:hover {
        color: #d9263b;
    }
}
.pd-page .swiper-product-main .wp-actions-product .icon-action {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
}
/* Colores del producto: barra gris muy clara pegada bajo la foto grande, del mismo ancho, que la continúa (la foto pierde
   el borde y las esquinas redondeadas de abajo y la barra las lleva). Solo se pinta si hay colores. */
.pd-page .swiper-product-main:has(+ .pd-colors) {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.pd-page .pd-colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 13px;
    background: #f6f6f5;
    border: 1px solid var(--pd-line);
    border-radius: 0 0 14px 14px;
}
.pd-page .pd-colors a {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(34, 35, 38, .16);
    transition: transform .15s;
}
.pd-page .pd-colors a:hover {
    transform: scale(1.15);
}
/* Miniaturas */
.pd-page .swiper-product-thumbs .swiper-slide {
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #f5f5f5;
    opacity: .6;
    transition: opacity .15s, border-color .15s;
}
.pd-page .swiper-product-thumbs .swiper-slide:hover {
    opacity: 1;
}
.pd-page .swiper-product-thumbs .swiper-slide-thumb-active {
    border: 2px solid var(--pd-ink);
    opacity: 1;
}
.pd-page .swiper-product-thumbs li {
    list-style: none;
}

/* ---------- 3. Entrega (widget informativo) ---------- */
.pd-page .widget:not(.wd-white):not(.wd-full-img):not(.wd-info-adicionales) {
    padding: 18px 18px 8px;
    margin-bottom: 16px;
    color: var(--pd-ink);
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: 14px;
    box-shadow: none;
}
.pd-page .widget:not(.wd-white):not(.wd-full-img):not(.wd-info-adicionales) p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.4;
}
.pd-page .widget:not(.wd-white):not(.wd-full-img):not(.wd-info-adicionales) p > span:first-child {
    flex: 0 0 auto;
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: var(--pd-muted);
}
.pd-page .widget .icon-sm {
    font-size: 18px;
}
.pd-page .pnlInformacionFecha p {
    font-weight: 600;
}
.pd-page .widget .clearfix.height-20 {
    display: none;
}

/* ---------- 4. Panel de compra ---------- */
.pd-page .wp-widget-oferta {
    margin-bottom: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: 14px;
    box-shadow: none;
}
/* Cronómetro de oferta (oculto salvo en productos con oferta temporizada) */
.pd-page .widget-oferta {
    padding: 12px 18px;
    color: #fff;
    background: var(--pd-brand);
}
.pd-page .widget-oferta .title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}
.pd-page .widget-oferta .wp-time .time {
    font-size: 2rem;
}
.pd-page .widget-elige {
    padding: 20px 18px 18px;
}
.pd-page .widget-elige > p.title:first-child {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--pd-ink);
}
.pd-page .widget-elige .form-group {
    margin-bottom: 0;
}

/* Opciones (radios): tarjetas apiladas, la activa con borde rojo de marca */
.pd-page .pd-options {
    flex-direction: column;
    gap: 8px;
    max-height: 304px;
    padding: 2px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cfc8cc transparent;
}
.pd-page .pd-options label.btn.btn-custom {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 !important;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    color: var(--pd-ink);
    background: #fff;
    border: 1px solid #dcd7da;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.pd-page .pd-options label.btn.btn-custom::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 2px solid #cfc8cc;
    border-radius: 50%;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.pd-page .pd-options label.btn.btn-custom:hover {
    background: #faf8f9;
    border-color: var(--pd-ink);
}
.pd-page .pd-options label.btn.btn-custom.active {
    background: #fdf6f7;
    border: 1px solid var(--pd-brand);
    box-shadow: 0 0 0 1px var(--pd-brand);
}
.pd-page .pd-options label.btn.btn-custom.active::before {
    background: var(--pd-brand);
    border-color: var(--pd-brand);
    box-shadow: inset 0 0 0 3px #fff;
}
/* Opción agotada / sin stock (url-detail.css ya las deja sin clic) */
.pd-page .pd-options label.btn.btn-custom:has(> input[data-agotado="1"]),
.pd-page .pd-options label.btn.btn-custom:has(> input[data-sin-stock="1"]) {
    color: var(--pd-muted);
    background: #f5f3f4;
    border-style: dashed;
    opacity: .75;
}
.pd-page .pd-options label.btn.btn-custom:has(> input[data-agotado="1"])::before,
.pd-page .pd-options label.btn.btn-custom:has(> input[data-sin-stock="1"])::before {
    background: #ece9ea;
    border-color: #ddd8da;
}
/* Aviso "elige una opción": mismo marco, en rojo de marca */
.pd-page .alerta-opcion label.btn {
    border-width: 1px !important;
    border-color: var(--pd-brand) !important;
    background: #fdf6f7 !important;
    box-shadow: 0 0 0 1px var(--pd-brand);
}
.pd-page .widget-elige small.alerta-opcion {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pd-brand-dark) !important;
}

/* Descuento por unidades */
.pd-page .pd-disclaimer {
    display: block;
    margin: 12px 0 0;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #8f4c18 !important;
    background: #fdf3e6;
    border: 1px solid #f3dcc0;
    border-radius: 8px;
}

/* Cantidad: píldora con − y + */
.pd-page #pnlQuantity,
.pd-page #pnlQuantityMobile,
.pd-page #pnlQuantityModal {
    margin-top: 14px;
}
.pd-page .numberPickerCantidad {
    flex-wrap: nowrap;
    overflow: hidden;
    border: 1px solid #dcd7da;
    border-radius: 10px;
}
.pd-page .numberPickerCantidad .btn,
.pd-page .numberPickerCantidad .btn-outline-secondary {
    min-width: 38px !important;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--pd-ink);
    background: #fff;
    border: 0;
    border-radius: 0;
    font-size: 16px;
}
.pd-page .numberPickerCantidad .btn:hover {
    background: #f3f1f2;
}
.pd-page .numberPickerCantidad .form-control {
    height: 38px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-ink);
    background: #fff;
    border: 0;
    border-left: 1px solid var(--pd-line);
    border-right: 1px solid var(--pd-line);
    border-radius: 0;
    box-shadow: none;
}
.pd-page .divPrecioUnitario {
    margin-top: 8px;
    font-size: 13px;
    color: var(--pd-muted);
}

/* Precio */
.pd-page .widget-elige small.alerta-opcion + p.title,
.pd-page .widget-elige p.title:has(> .lblPrecio),
.pd-page .widget-elige p.title:has(> .lblPrecioMobile) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 14px;
    font-size: 15px;
    text-transform: none;
    color: var(--pd-muted);
}
.pd-page .widget-elige .lblDesde,
.pd-page .widget-elige .lblDesdeMobile {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--pd-muted);
}
.pd-page .widget-elige .lblPrecio,
.pd-page .widget-elige .lblPrecioMobile {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pd-ink);
}
.pd-page .widget-elige .a-price-decimal {
    opacity: 1;
}
.pd-page .widget-elige .a-price-fraction,
.pd-page .widget-elige .a-price-symbol {
    position: static;
    top: auto;
    font-size: inherit;
}

/* Botón principal en rojo de marca; agotado en gris */
/* Texto centrado en horizontal y vertical (flex): con display:block y min-height el texto quedaba pegado arriba */
.pd-page .widget-elige .btn-verde.btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    letter-spacing: .01em;
    color: #fff;
    background: var(--pd-brand);
    border: 0;
    border-radius: 8px;
    transition: background-color .15s;
}
.pd-page .widget-elige .btn-verde.btn-block:hover,
.pd-page .widget-elige .btn-verde.btn-block:focus {
    background: var(--pd-brand-dark);
}
.pd-page #btnComprarPc:not(.btnComprar),
.pd-page #btnComprarMobile:not(.btnComprarMobile) {
    color: var(--pd-muted);
    background: #ece9ea;
    cursor: default;
    pointer-events: none;
}
/* "Más opciones": botón secundario */
.pd-page #lnkVerMas,
.pd-page #lnkVerMasMobile {
    margin-top: 10px;
    color: var(--pd-ink);
    background: #fff;
    border: 1px solid #dcd7da;
}
.pd-page .widget-elige #lnkVerMas.btn-verde.btn-block:hover,
.pd-page .widget-elige #lnkVerMasMobile.btn-verde.btn-block:hover {
    color: var(--pd-ink);
    background: #faf8f9;
    border: 1px solid var(--pd-ink);
}
.pd-page .widget-elige #lnkVerMas.btn-verde.btn-block,
.pd-page .widget-elige #lnkVerMasMobile.btn-verde.btn-block {
    color: var(--pd-ink);
    background: #fff;
    border: 1px solid #dcd7da;
}

/* Contenido relacionado: va en la columna lateral, bajo el panel de compra (que no sigue el scroll). En escritorio
   (>= 992px) se apila; por debajo se reparte en una fila que envuelve. */
.pd-page .pd-related {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px;
    margin: 0;
}
.pd-page .pd-related > h4 {
    flex: 0 0 100%;
    margin: 0;
}
.pd-page .pd-related > .widget {
    flex: 1 1 280px;
    max-width: calc(33.333% - 11px);
    margin: 0;
}
@media (min-width: 992px) {
    .pd-page .col-aside .pd-related {
        display: block;
        margin: 4px 0 0;
    }
    .pd-page .col-aside .pd-related > h4 {
        margin: 0 0 12px;
    }
    .pd-page .col-aside .pd-related > .widget {
        max-width: none;
        margin: 0 0 16px;
    }
}
@media (max-width: 767px) {
    .pd-page .pd-related > .widget {
        flex-basis: 100%;
        max-width: none;
    }
}
@media (max-width: 991px) {
    .pd-page .wp-widget-oferta.no-desktop {
        margin: 0 15px 20px;
    }
    .pd-page #pnlCuadroMobile.widget {
        margin: 0 15px 16px;
    }
}

/* ---------- 5. Barra inferior y hoja de compra ---------- */
body:has(.pd-page) #bottom-bar .btnComprarBottom,
body:has(.pd-page) #pnlCompra .btnComprarModal {
    color: #fff;
    background: var(--ro-brand, #d9263b);
    border-color: var(--ro-brand, #d9263b);
}
body:has(.pd-page) #bottom-bar .btnComprarBottom:hover,
body:has(.pd-page) #pnlCompra .btnComprarModal:hover {
    background: var(--ro-brand-dark, #b71c2e);
    border-color: var(--ro-brand-dark, #b71c2e);
}
body:has(.pd-page) #bottom-bar .btnDisenarBottom {
    color: var(--ro-ink, #222326);
    background: #fff;
    border: 1px solid #dcd7da;
}
body:has(.pd-page) #bottom-bar .btnDisenarBottom:hover {
    background: #faf8f9;
    border-color: var(--ro-ink, #222326);
}

/* ==========================================================================
   Fase 2 · secciones bajo la galería
     6. Títulos de sección
     7. Descripción y contenido (Leer más)
     8. Compartir
     9. Grupos de productos (carruseles con las tarjetas del catálogo)
    10. Adicionales (escritorio y carrusel móvil)
    11. Contenido relacionado (imagen, vídeo, modal)
   ========================================================================== */

/* ---------- 6. Títulos de sección ---------- */
.pd-page h4.h4 {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--pd-ink);
}
.pd-page .otros-productos h4.h4 {
    margin-bottom: 16px;
}

/* ---------- 7. Descripción y contenido ---------- */
.pd-page .description-wrapper {
    margin-bottom: 26px;
}
.pd-page .description {
    font-size: 15px;
    line-height: 1.65;
    color: #3a3b3f;
}
.pd-page .description strong {
    font-weight: 700;
    color: var(--pd-ink);
}
/* Texto recogido por "Leer más": su final se desvanece para invitar a pulsar el botón. Se hace con una máscara sobre el
   propio texto (vale sobre cualquier fondo y no lo tapa el botón); sustituye al degradado gris de url-detail.css. El
   plugin deja height: 150px en el texto mientras está recogido y lo cambia al desplegarlo. */
.pd-page .description-wrapper::after {
    display: none;
}
.pd-page .description[style*="height: 150px"] {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
.pd-page .description-wrapper::before,
.pd-page .wrap-desc::before {
    display: none;
}
.pd-page .wrap-desc {
    position: relative;
    z-index: 2;
    margin-top: 2px;
}
.pd-page .description-wrapper .leer-mas-descripcion {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid #dcd7da;
    border-radius: 999px;
    transition: border-color .15s, background-color .15s;
}
.pd-page .description-wrapper .leer-mas-descripcion:hover {
    color: var(--pd-ink);
    background: #faf8f9;
    border-color: var(--pd-ink);
}
.pd-page .description-wrapper .leer-mas-descripcion svg {
    width: 14px;
    height: 14px;
}
.pd-page .description-wrapper:not(:has(.description[style*="height: 150px"])) {
    padding-bottom: 0;
}

/* ---------- 8. Compartir ---------- */
.pd-page .wp-share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 36px;
    padding: 14px 0;
    background: none;
    border-top: 1px solid var(--pd-line);
    border-bottom: 1px solid var(--pd-line);
}
.pd-page .wp-share .fb-like {
    display: none;
}
.pd-page .wp-share .text-share {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-muted);
}
.pd-page .wp-share .footer-nav-social {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pd-page .wp-share .footer-nav-social li {
    margin: 0;
}
.pd-page .wp-share .footer-nav-social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--pd-ink);
    background: #fff;
    border: 1px solid #dcd7da;
    border-radius: 50%;
    transition: border-color .15s, color .15s;
}
.pd-page .wp-share .footer-nav-social li a:hover {
    color: var(--pd-brand);
    border-color: var(--pd-brand);
}
.pd-page .wp-share .footer-nav-social span {
    font-size: 18px;
    line-height: 1;
}
.pd-page .wp-share .clearfix {
    display: none;
}

/* ---------- 9. Grupos de productos ---------- */
/* Las tarjetas son las del catálogo (.mug-grid .mug-card de ro-catalogo-productos.css); aquí
   solo se anulan la rejilla y los márgenes de .mug-grid, porque cada tarjeta va en un slide. */
.pd-page .pd-mug {
    display: block;
    width: auto; /* en móvil .mug-grid ocupa el ancho de la pantalla; aquí la tarjeta mide lo que su slide */
    height: 100%;
    margin: 0;
}
.pd-page .pd-mug .mug-card {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
    height: 100%;
    margin-bottom: 0;
}
/* ro-catalogo-productos.css alinea por filas con subgrid dentro de .mug-grid; en un slide no hay
   rejilla que compartir, así que se recupera el apilado normal (flex). */
.pd-page .pd-mug .mug-card > div,
.pd-page .pd-mug .wp-product,
.pd-page .pd-mug .prod-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
.pd-page .pd-mug .prod-img {
    flex: 0 0 auto;
}
/* En el catálogo cada fila de la tarjeta lleva su propia sangría horizontal (rejilla con subgrid). Aquí la sangría la pone
   .prod-info, así que los hijos no suman otra: estrellas, título, colores e importes parten del mismo borde izquierdo.
   El JS de la vista iguala la altura de título e importes entre tarjetas para que todo quede a la misma altura. */
.pd-page .pd-mug .product-title,
.pd-page .pd-mug .prod-det {
    box-sizing: border-box;
    padding-right: 0;
    padding-left: 0;
}
.pd-page .pd-mug .prod-det {
    padding-bottom: 0;
    /* Tarjetas más bajas, para que la barra de desplazamiento del slider (que solapa el pie del slide) no tape su borde inferior:
       se recorta ese espacio al final de la tarjeta (vale igual en móvil, tablet y escritorio). Va a juego con el relleno del
       .swiper-slide de más abajo, que devuelve el mismo alto al slide. */
    margin-bottom: -13px;
}
/* Contorno de la tarjeta: el mismo gris que el borde del buscador de la cabecera (#b8b5b7), también con el ratón encima */
.pd-page .pd-mug .mug-card,
.pd-page .pd-mug .mug-card:hover {
    border-color: #b8b5b7;
}
.pd-page .pd-mug .prod-colors-out {
    margin-right: 0;
    margin-left: 0;
}
.pd-page .otros-productos .swiper-slide {
    height: auto;
    /* La tarjeta es más baja (margin-bottom:-13px en .prod-det); este relleno devuelve esos 13px al slide para que el alto
       del slider y la posición de su barra de desplazamiento se queden donde estaban. */
    padding-bottom: 13px;
}
.pd-page .otros-productos {
    margin-bottom: 8px;
}

/* ---------- 10. Adicionales ---------- */
.pd-page .wd-info-adicionales {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    color: var(--pd-muted);
    background: var(--ro-soft, #f7f4f1);
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}
.pd-page .wd-info-adicionales .icon-information-button {
    flex: 0 0 auto;
    margin: 0;
    font-size: 20px;
    color: var(--pd-muted);
}
.pd-page .wd-info-adicionales p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}
.pd-page .wd-info-adicionales .clearfix {
    display: none;
}
.pd-page #pnlAdicionalesConteiner {
    margin-bottom: 28px;
}
.pd-page #pnlAdicionalesConteiner > .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}
.pd-page #pnlAdicionalesConteiner > .row > [class*="col-"] {
    float: none;
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}
.pd-page #pnlAdicionalesConteiner .wp-product {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: 13px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.pd-page #pnlAdicionalesConteiner .wp-product:hover {
    border-color: #d8d3d0;
    box-shadow: 0 5px 20px #22232608;
}
.pd-page #pnlAdicionalesConteiner .prod-img {
    position: relative;
    height: auto;
    aspect-ratio: 255 / 201;
    overflow: hidden;
    background: #f5f5f5;
}
.pd-page #pnlAdicionalesConteiner .prod-img > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}
.pd-page #pnlAdicionalesConteiner .wp-actions-product {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    margin: 0;
}
/* Botón de información sobre la foto: mismo cristal que los botones de los listados (blanco translúcido con desenfoque);
   al pasar el ratón o enfocarlo se vuelve blanco sólido, como una opción más de la tarjeta. */
.pd-page #pnlAdicionalesConteiner .wp-actions-product a {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 34px !important;
    height: 34px !important;
    margin: 0;
    padding: 0;
    color: #8a8484;
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
    box-shadow: 0 2px 8px #0000000a;
    transition: background-color .15s, box-shadow .15s, color .15s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .pd-page #pnlAdicionalesConteiner .wp-actions-product a {
        background: rgba(255, 255, 255, .55);
        -webkit-backdrop-filter: blur(8px) saturate(1.3);
        backdrop-filter: blur(8px) saturate(1.3);
    }
}
.pd-page #pnlAdicionalesConteiner .wp-actions-product a:focus-visible {
    color: var(--pd-ink);
    background: #fff;
    box-shadow: 0 3px 12px rgba(34, 35, 38, .18);
}
@media (hover: hover) {
    .pd-page #pnlAdicionalesConteiner .wp-actions-product a:hover {
        color: var(--pd-ink);
        background: #fff;
        box-shadow: 0 3px 12px rgba(34, 35, 38, .18);
    }
}
.pd-page #pnlAdicionalesConteiner .wp-actions-product .icon-action {
    margin: 0;
    padding: 0;
    font-size: 17px;
    background: transparent;
}
.pd-page .adicional-info {
    padding: 14px 14px 16px;
    text-align: left;
}
.pd-page .adicional-info .product-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.1px;
    color: var(--pd-ink);
}
.pd-page .adicional-info .text-bold {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-muted);
}
.pd-page .adicional-info .a-price-decimal {
    opacity: 1;
}
.pd-page .adicional-info .a-price-fraction,
.pd-page .adicional-info .a-price-symbol {
    position: static;
    top: auto;
    font-size: inherit;
}
/* Tablet (<= 991px): el bloque de tarjetas sustituye al carrusel owl de #pnlAdicionalesMobile (que no se inicializa
   desde hace tiempo) y se muestra aunque el servidor lo marque como no-mobile. */
@media (max-width: 991px) {
    .pd-page #pnlAdicionalesMobile {
        display: none;
    }
    .pd-page #pnlAdicionalesConteiner.no-mobile,
    .pd-page #pnlAdicionalesConteiner > .row > .no-mobile {
        display: block !important;
    }
}
/* Tablet y escritorio (>= 768px): tres imágenes por fila como máximo. La primera fila se ve siempre; de la segunda en
   adelante solo se muestran las filas completas, así que se oculta la última fila si le faltan imágenes para llegar a
   tres (la última, o las dos últimas, según cuántas sobren). */
@media (min-width: 768px) {
    .pd-page #pnlAdicionalesConteiner > .row > :nth-child(3n + 1):nth-child(n + 4):last-child,
    .pd-page #pnlAdicionalesConteiner > .row > :nth-child(3n + 2):nth-child(n + 5):last-child,
    .pd-page #pnlAdicionalesConteiner > .row > :nth-child(3n + 1):nth-child(n + 4):nth-last-child(2) {
        display: none !important;
    }
}
/* Móvil (< 768px): la sección completa, en vertical, una imagen por fila (sin carrusel ni deslizamiento lateral) */
@media (max-width: 767px) {
    .pd-page #pnlAdicionalesConteiner > .row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 11. Contenido relacionado ---------- */
.pd-page .pd-related .widget.wd-white,
.pd-page .pd-related .widget.wd-full-img {
    padding: 0;
    margin: 0 0 16px;
    overflow: hidden;
    color: var(--pd-ink);
    background: #fff !important;
    border: 1px solid var(--pd-line);
    border-radius: 6px;
    box-shadow: none;
}
.pd-page .pd-related .widget {
    margin-bottom: 0;
}
.pd-page .pd-related .widget.wd-white .title {
    margin: 0;
    padding: 14px 16px 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
    color: var(--pd-ink);
}
.pd-page .pd-related .widget.wd-full-img img,
.pd-page .pd-related .widget.wd-white img {
    display: block;
    width: 100%;
    height: auto;
}
.pd-page .pd-related .widget.wd-full-img a,
.pd-page .pd-related .widget.wd-white a.widget {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.pd-page .pd-related .video-thumb-home {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}
.pd-page .pd-related .video-thumb-home .play {
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    color: var(--pd-ink);
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(34, 35, 38, .25);
    transform: translate(-50%, -50%);
    transition: transform .15s;
}
.pd-page .pd-related .video-thumb-home:hover .play {
    transform: translate(-50%, -50%) scale(1.06);
}
.pd-page .pd-related .video-thumb-home .flaticon-play-button::before {
    margin-left: 3px;
    font-size: 26px;
}

/* ==========================================================================
   Fase 3 · barra inferior, hoja de compra, modales y estados especiales
    12. Barra inferior
    13. Hoja de compra (#pnlCompra: se abre cuando no hay opción elegida)
    14. Modales de la ficha
    15. Estados especiales (agotado, oferta con cronómetro, modo edición)
   ========================================================================== */

/* ---------- 12. Barra inferior ---------- */
body:has(.pd-page) #bottom-bar {
    font-family: var(--ro-font, 'DM Sans', Arial, sans-serif);
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--ro-line, #e9e7e5);
    box-shadow: 0 -6px 24px rgba(34, 35, 38, .06);
}
/* Botones «Comprar» y «Diseñar» centrados en vertical en la barra, en todos los tamaños. La barra mide 40px (escritorio) o 45px (hasta
   992px, ro.css con !important) pero llevaba 7px de relleno arriba y el contenedor de los botones medía 60px, así que quedaban pegados
   al borde inferior. */
body:has(.pd-page) #bottom-bar {
    display: flex;
    align-items: center;
    padding: 0 !important; /* .footer / .py-3 (min-styles.css) ponen el relleno con !important */
}
/* El contenedor ocupa todo el ancho de la barra y deja de ser el origen de la flecha «subir» (que se coloca respecto a la barra:
   a la derecha de siempre, con la altura de la barra y el icono centrado). */
body:has(.pd-page) #bottom-bar > .container-fluid {
    position: static;
    width: 100%;
    height: auto;
}
body:has(.pd-page) #bottom-bar .wrapper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}
body:has(.pd-page) #bottom-bar .go-top {
    top: 0 !important;
    bottom: 0 !important;
    right: 10px !important;
    display: flex;
    align-items: center;
    padding: 0 0 0 15px !important;
}
body:has(.pd-page) #bottom-bar .wrapper-btn .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 4px 22px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    border-radius: 8px;
    transition: background-color .15s, border-color .15s;
}
body:has(.pd-page) #bottom-bar .go-top {
    color: var(--ro-ink, #222326);
    border-left: 1px solid var(--ro-line, #e9e7e5);
}

/* ---------- 13. Hoja de compra ---------- */
/* El contenedor de la hoja (z-index 2) quedaba por debajo de la barra inferior (1039) y esta
   tapaba el botón "Añadir a mi carrito"; cerrada, la hoja está fuera de pantalla y no estorba. */
body:has(.pd-page) .fixContainerBottom {
    z-index: 1100;
}
body:has(.pd-page) #pnlCompra {
    font-family: var(--ro-font, 'DM Sans', Arial, sans-serif);
    background: #fff !important;
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--ro-line, #e9e7e5);
    box-shadow: 0 -10px 34px rgba(34, 35, 38, .16);
}
body:has(.pd-page) #pnlCompra.pd-page > .container {
    width: auto;
    max-width: 960px;
    padding: 0 15px;
}
body:has(.pd-page) #cerrar-compra {
    top: 14px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ro-ink, #222326);
}
body:has(.pd-page) #pnlCompra .title {
    margin: 22px 0 10px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ro-ink, #222326);
}
body:has(.pd-page) #pnlCompra .inicial-value {
    margin: 22px 0 12px;
    font-size: 14px;
    color: var(--ro-muted, #686a70);
}
body:has(.pd-page) #pnlCompra .lblPrecioModal {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ro-ink, #222326);
}
body:has(.pd-page) #pnlCompra .btnComprarModal {
    min-height: 50px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
}
body:has(.pd-page) #pnlCompra .a-price-decimal {
    opacity: 1;
}
body:has(.pd-page) #pnlCompra small.alerta-opcion {
    font-size: 13px;
    font-weight: 500;
    color: var(--ro-brand-dark, #b71c2e) !important;
}

/* ---------- 14. Modales ---------- */
#modalComprarQty .modal-content,
#modalColores .modal-content,
#modalFechas .modal-content,
#modal-url .modal-content,
#modal-preview-producto .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(34, 35, 38, .28);
    font-family: var(--ro-font, 'DM Sans', Arial, sans-serif);
}
#modalComprarQty .modal-header,
#modal-url .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ro-line, #e9e7e5);
}
#modalComprarQty .modal-title {
    width: 100%;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ro-ink, #222326);
}
#modalComprarQty .modal-body,
#modalColores .modal-body,
#modalFechas .modal-body {
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ro-ink, #222326);
}
#modalComprarQty .modal-footer {
    justify-content: center;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--ro-line, #e9e7e5);
}
#modalComprarQty .modal-footer .btn {
    flex: 1 1 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ro-ink, #222326);
    background: #fff;
    border: 1px solid #dcd7da;
    border-radius: 8px;
    transition: border-color .15s, background-color .15s;
}
#modalComprarQty .modal-footer .btn:hover,
#modalComprarQty .modal-footer .btn:focus {
    background: #faf8f9;
    border-color: var(--ro-ink, #222326);
}
#modalColores .close,
#modalFechas .close,
#modalComprarQty .close {
    color: var(--ro-ink, #222326);
    opacity: .7;
}

/* ---------- 15. Estados especiales ---------- */
/* Modo edición de un pedido: botón de la barra inferior */
body:has(.pd-page) #bottom-bar .btn-warning {
    color: var(--ro-ink, #222326);
    background: #fff;
    border: 1px solid #dcd7da;
}
body:has(.pd-page) #bottom-bar .btn-warning:hover {
    background: #faf8f9;
    border-color: var(--ro-ink, #222326);
}
/* Oferta con cronómetro (texto "Oferta" + cuenta atrás) */
.pd-page .widget-oferta .title .icon-price-tag {
    margin-right: 6px;
}
.pd-page .widget-oferta .wp-time p {
    margin: 6px 0 0;
}
.pd-page .widget-oferta .wp-time .time {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: left;
}
.pd-page .widget-oferta .codigo {
    margin-top: 0;
    font-size: 12px;
}
.pd-page .widget-oferta .ofertaTerminada {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
/* Precio con fecha de agotamiento ("(agotado a partir de…)") */
.pd-page .widget-elige .lblPrecio,
.pd-page .widget-elige .lblPrecioMobile {
    overflow-wrap: anywhere;
}

/* ---------- 16. Fila de valoración ---------- */
.pd-page .pd-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pd-page .pd-rating-row #pnlRating {
    margin: 0;
}

/* Móvil: la ficha ocupa el ancho de la pantalla menos 20px (10px a cada lado, como el listado de productos de una categoría): las
   columnas pierden su relleno de 15px y los bloques con caja (paneles de compra, relacionados, reseñas) quedan a 10px del borde.
   Todos los textos (migas, título, valoración, descripción, contenido, compartir y los títulos de sección: contenido
   relacionado, ejemplos de adicionales y títulos de los carruseles) llevan además 5px de sangría para quedar alineados a 15px
   del borde y que el texto no toque el borde. Los slides NO llevan este margen de momento: la galería de fotos (con su barra de colores) y los
   carruseles de productos se compensan con -9px a cada lado para seguir donde estaban (a 1px del borde). */
@media (max-width: 767px) {
    .pd-page .header-row,
    .pd-page .col-product,
    .pd-page .col-aside,
    .pd-page #reviews {
        padding-left: 10px;
        padding-right: 10px;
    }
    .pd-page #pnlCuadroMobile,
    .pd-page .wp-widget-oferta {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .pd-page .product-gallery-wrapper {
        margin-left: -9px !important;
        margin-right: -9px !important;
    }
    .pd-page .otros-productos .swiper,
    .pd-page .otros-productos .custom-scrollbar-relacionados,
    .pd-page .otros-productos .custom-scrollbar-disenos {
        margin-left: -9px;
        margin-right: -9px;
    }
    .pd-page .breadcrumb,
    .pd-page h1.pd-title,
    .pd-page .pd-rating-row,
    .pd-page .pd-desc,
    .pd-page .pd-contenido,
    .pd-page .wp-share,
    .pd-page .pd-related > h4,
    .pd-page #pnlAdicionalesConteiner > h4,
    .pd-page .otros-productos h4 {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Móvil y tablet táctiles: Safari de iPhone/iPad amplía la página al enfocar un campo con letra menor de 16px. Como la
   tienda ya permite ampliar con los dedos, estos campos se quedan en 16px para que enfocar no mueva ni amplíe nada. */
@media (hover: none) and (pointer: coarse) {
    .pd-page .numberPickerCantidad .form-control {
        font-size: 16px;
    }
}

/* ---------- 17. Panel de compra ----------
   Precio arriba, título, opciones en tarjetas, cantidad, aviso y botón. No cambia ids ni clases que usa el JS; el orden
   visual se logra con grid + order. */
.pd-page .widget-elige {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 22px 20px 20px;
}
.pd-page .widget-elige > * {
    grid-column: 1 / -1;
}
/* La cantidad deja de ser una caja: sus dos partes pasan a ser celdas del panel */
.pd-page .widget-elige #pnlQuantity,
.pd-page .widget-elige #pnlQuantityMobile {
    display: contents;
}

/* Precio.
   - Con selector de cantidad: arriba no hay importe. El precio por unidad ("8,99 € por unidad") va en la fila del selector,
     a la derecha y en letra pequeña, y el total real queda en la línea siguiente, centrado.
   - Sin selector: el importe (el de la opción elegida) va igual que ese total, en una línea propia justo encima del botón,
     centrado y sin la palabra "Desde". */
.pd-page .widget-elige .divPrecioUnitario {
    order: 6;
    grid-column: 2;
    justify-self: end;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 2px 5px;
    margin: 16px 0 0;
    text-align: right !important;
    font-size: 12px;
    color: var(--pd-muted);
}
.pd-page .widget-elige .lblPrecioUnitario {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--pd-muted);
}
.pd-page .widget-elige:not(:has(#pnlQuantity)):not(:has(#pnlQuantityMobile)) > p.title:has(> .lblPrecio),
.pd-page .widget-elige:not(:has(#pnlQuantity)):not(:has(#pnlQuantityMobile)) > p.title:has(> .lblPrecioMobile) {
    order: 7;
    justify-content: center;
    margin: 14px 0 0;
}
.pd-page .widget-elige:not(:has(#pnlQuantity)):not(:has(#pnlQuantityMobile)) .lblPrecio,
.pd-page .widget-elige:not(:has(#pnlQuantity)):not(:has(#pnlQuantityMobile)) .lblPrecioMobile {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--pd-ink);
}
/* Con cantidad, el total (precio × unidades) va en una línea propia debajo del selector, centrado */
.pd-page .widget-elige:is(:has(#pnlQuantity), :has(#pnlQuantityMobile)) > p.title:has(> .lblPrecio),
.pd-page .widget-elige:is(:has(#pnlQuantity), :has(#pnlQuantityMobile)) > p.title:has(> .lblPrecioMobile) {
    grid-column: 1 / -1;
    order: 7;
    justify-content: center;
    margin: 14px 0 0;
}
.pd-page .widget-elige .lblDesde,
.pd-page .widget-elige .lblDesdeMobile {
    display: none !important;
}
.pd-page .widget-elige:is(:has(#pnlQuantity), :has(#pnlQuantityMobile)) .lblPrecio,
.pd-page .widget-elige:is(:has(#pnlQuantity), :has(#pnlQuantityMobile)) .lblPrecioMobile {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pd-ink);
}

.pd-page .widget-elige > p.title:first-child {
    order: 2;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
}
.pd-page .widget-elige > .form-group {
    order: 3;
}
.pd-page .widget-elige > small.alerta-opcion {
    order: 4;
}
.pd-page .widget-elige .divCantidad {
    order: 6;
    grid-column: 1;
    margin-top: 16px;
}
/* El aviso "Consigue cada unidad a..." va por encima del selector de unidades (antes iba debajo) */
.pd-page .widget-elige > .disclaimerDescuentoUnidades {
    order: 5;
}
.pd-page .widget-elige > .btn-verde.btn-block {
    order: 8;
}
.pd-page .widget-elige > #lnkVerMas,
.pd-page .widget-elige > #lnkVerMasMobile {
    order: 9;
}

/* ---------- 2. Opciones en tarjetas de dos columnas ---------- */
.pd-page .pd-options:not([style*="none"]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 340px;
    padding: 2px;
}
/* Con más opciones de las que caben, la lista se desplaza (barra visible) y su final se desvanece para sugerir que hay
   más; el JS de la vista pone data-mas="1" mientras queden opciones por ver y lo quita al llegar al final. */
.pd-page .pd-options[data-mas="1"] {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
/* En móvil y tablet las barras de desplazamiento del sistema se ocultan solas: aquí se dibuja una fina y siempre visible */
@media (hover: none) and (pointer: coarse) {
    .pd-page .pd-options {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
    .pd-page .pd-options::-webkit-scrollbar {
        width: 6px;
        -webkit-appearance: none;
    }
    .pd-page .pd-options::-webkit-scrollbar-thumb {
        background: #cfc8cc;
        border-radius: 3px;
    }
}
.pd-page .pd-options label.btn.btn-custom {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 68px;
    padding: 13px 10px;
    text-align: center;
    border-color: #e6e2e4;
    border-radius: 10px;
}
/* Bootstrap (.btn-group > .btn) quita el redondeo a las esquinas interiores de cada grupo: aquí todas las opciones son cajas
   independientes y conservan las cuatro esquinas redondeadas. */
.pd-page .pd-options.btn-group > label.btn.btn-custom {
    border-radius: 10px;
}
.pd-page .pd-options label.btn.btn-custom::before {
    display: none;
}
.pd-page .pd-opt-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pd-ink);
}
.pd-page .pd-opt-price {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pd-muted);
}
.pd-page .pd-options label.btn.btn-custom:hover {
    background: #faf8f9;
    border-color: #cfc8cc;
}
.pd-page .pd-options label.btn.btn-custom.active {
    padding: 12px 9px;
    background: #fdf0f2;
    border: 2px solid var(--pd-brand);
    box-shadow: none;
}
.pd-page .pd-options label.btn.btn-custom.active .pd-opt-name {
    color: var(--pd-brand);
}
.pd-page .pd-options label.btn.btn-custom.active .pd-opt-price {
    color: #8f5560;
}
.pd-page .pd-options label.btn.btn-custom:has(> input[data-agotado="1"]),
.pd-page .pd-options label.btn.btn-custom:has(> input[data-sin-stock="1"]) {
    background: #fff;
    border-style: solid;
    border-color: #efecee;
    opacity: .6;
}
.pd-page .pd-options label.btn.btn-custom:has(> input[data-agotado="1"]) .pd-opt-name,
.pd-page .pd-options label.btn.btn-custom:has(> input[data-sin-stock="1"]) .pd-opt-name {
    color: #a8a2a6;
}
/* Aviso de "elige una opción" */
.pd-page .alerta-opcion label.btn {
    border-width: 2px !important;
    background: #fdf6f7 !important;
    box-shadow: none;
}

/* ---------- 3. Cantidad y aviso de descuento ---------- */
.pd-page .numberPickerCantidad {
    width: 118px;
    background: #f7f5f6;
    border-color: #e6e2e4;
}
.pd-page .numberPickerCantidad .btn,
.pd-page .numberPickerCantidad .btn-outline-secondary {
    background: transparent;
}
.pd-page .numberPickerCantidad .form-control {
    background: transparent;
    border-color: #e6e2e4;
}
.pd-page .pd-disclaimer {
    margin: 14px 0 0;
    padding: 11px 14px;
    font-size: 14px;
    color: var(--pd-brand) !important;
    background: var(--ro-soft, #f7f4f1);
    border: 0;
    border-radius: 8px;
}

/* ---------- 4. Botón ---------- */
.pd-page .widget-elige .btn-verde.btn-block {
    margin-top: 18px;
    min-height: 46px;
    font-size: 15px;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 10px;
}

/* ---------- 18. Tres columnas (desde 1200px) ----------
     izquierda: galería con su carrusel   |   centro: descripción   |   derecha: entrega + compra
   La rejilla toma la fila principal y deja que los hijos de la columna principal pasen a ser celdas suyas
   (display: contents): la galería y la descripción ocupan la primera fila y el resto (grupos, contenido, compartir,
   adicionales) se reparte debajo, en las dos primeras columnas. La columna lateral abarca todas las filas y el panel
   de compra queda arriba, sin seguir el scroll. Proporciones 1,5 : 1,1 : 1. Por debajo de 1200px se mantiene una sola
   columna (con la lateral a su lado hasta 992px). */
@media (min-width: 1200px) {
    .pd-page .pd-main-row {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1fr);
        column-gap: 30px;
        align-items: start;
        margin: 0;
    }
    .pd-page .pd-main-row > .col-product {
        display: contents;
    }
    .pd-page .pd-main-row > .col-product > * {
        grid-column: 1 / span 2;
    }
    .pd-page .pd-main-row > .col-product > .product-gallery-wrapper {
        grid-column: 1;
        grid-row: 1;
    }
    /* .pd-centro (descripción + contenido) no es una celda: sus hijos sí. La descripción va en la columna central, junto
       a la galería; el contenido, por defecto, debajo a dos columnas. Con pd-contenido-junto (lo pone el JS cuando la
       descripción es corta) .pd-centro sí es la celda central y apila descripción y contenido. */
    .pd-page .pd-main-row > .col-product > .pd-centro {
        display: contents;
    }
    .pd-page .pd-main-row > .col-product > .pd-centro > .pd-desc {
        grid-column: 2;
        grid-row: 1;
    }
    .pd-page .pd-main-row > .col-product > .pd-centro > .pd-contenido {
        grid-column: 1 / span 2;
    }
    .pd-page .pd-main-row.pd-contenido-junto > .col-product > .pd-centro {
        display: block;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    .pd-page .pd-contenido-junto .pd-contenido > h4.h4 {
        margin-top: 12px;
    }
    /* Contenido en la columna central: sin el recorte de 150px ni el "Leer más" del plugin (que desplegaba hacia abajo).
       El JS le fija un max-height hasta el pie de la galería; si no cabe, se recorta con degradado y el botón abre la ventana. */
    .pd-page .pd-contenido-junto .pd-contenido .description {
        height: auto !important;
        overflow: hidden;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .pd-page .pd-contenido-junto .pd-contenido .wrap-desc,
    .pd-page .pd-contenido-junto .pd-contenido .description-wrapper::after {
        display: none;
    }
    .pd-page .pd-contenido-junto .pd-contenido .description.pd-cont-recortado {
        max-height: var(--pd-cont-max, none) !important;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
    }
    .pd-page .pd-contenido-junto .pd-contenido .description-wrapper {
        margin-bottom: 10px;
    }
    .pd-page .pd-main-row > .col-aside {
        grid-column: 3;
        grid-row: 1 / span 40;
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
        align-self: stretch;
    }

    /* Descripción (columna central): recortada a unas líneas y "Leer más" abre la completa */
    .pd-page .pd-desc {
        min-width: 0;
    }
    .pd-page .pd-desc > h4.h4 {
        margin-top: 0;
    }
    .pd-page .pd-desc .description-wrapper {
        margin-bottom: 14px;
    }
    /* La descripción llega hasta el pie de la galería: el JS de la vista le fija --pd-desc-max (hueco hasta ahí menos el
       botón) y, si no cabe, se recorta con degradado y "Leer más" abre la ventana. Antes se cortaba a 14 líneas. */
    .pd-page .pd-desc .description {
        display: block;
        height: auto !important;
        max-height: var(--pd-desc-max, none) !important;
        overflow: hidden;
    }
    .pd-page .pd-desc .description-wrapper::before,
    .pd-page .pd-desc .description-wrapper::after,
    .pd-page .pd-desc .wrap-desc {
        display: none;
    }
    /* Aquí no manda el height: 150px del plugin: el final se desvanece solo si el texto se recorta (botón visible) */
    .pd-page .pd-desc .description {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .pd-page .pd-desc:has(.pd-desc-more:not([hidden])) .description {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
    }
    .pd-page .pd-desc-more {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--pd-ink);
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcd7da;
        border-radius: 999px;
        transition: border-color .15s, background-color .15s;
    }
    .pd-page .pd-desc-more:hover {
        background: #faf8f9;
        border-color: var(--pd-ink);
    }
    .pd-page .pd-desc-more[hidden] {
        display: none;
    }
}

/* El "Leer más" del contenido solo vale con el contenido en la columna central y recortado */
.pd-page .pd-contenido .pd-cont-more {
    display: none;
}
@media (min-width: 1200px) {
    .pd-page .pd-contenido-junto .pd-contenido .pd-cont-more:not([hidden]) {
        display: inline-flex;
    }
}

/* Por debajo de 1200px no hay columna central: el botón y su modal no se usan */
@media (max-width: 1199px) {
    .pd-page .pd-desc-more {
        display: none;
    }
}

/* Ventana con la descripción completa */
#modalDescripcion .modal-content,
#modalContenido .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(34, 35, 38, .28);
    font-family: var(--ro-font, 'DM Sans', Arial, sans-serif);
}
#modalDescripcion .modal-header,
#modalContenido .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ro-line, #e9e7e5);
}
#modalDescripcion .modal-title,
#modalContenido .modal-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--ro-ink, #222326);
}
#modalDescripcion .modal-body,
#modalContenido .modal-body {
    max-height: 70vh;
    padding: 18px 20px 22px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.65;
    color: #3a3b3f;
}
#modalDescripcion .pd-modal-subtitle,
#modalContenido .pd-modal-subtitle {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ro-muted, #686a70);
}
#modalDescripcion .close,
#modalContenido .close {
    color: var(--ro-ink, #222326);
    opacity: .7;
}

/* ---------- 19. Reseñas y contenido relacionado (desde 1200px) ----------
   Las reseñas son una celda más de la rejilla de la fila principal. A todo el ancho caen por debajo de la columna lateral
   (que reserva 40 filas), es decir, tras todo el contenido. Si hay contenido relacionado en la columna lateral se
   colocan en las dos primeras columnas (el ancho de galería y diapositivas), a la izquierda de ese contenido. El JS de la
   vista añade pd-reviews-wide cuando la columna lateral no llega hasta ahí, y vuelven a ocupar todo el ancho. */
@media (min-width: 1200px) {
    .pd-page .pd-main-row > #reviews {
        grid-column: 1 / -1;
        min-width: 0;
        padding-right: 0;
        padding-left: 0;
    }
    .pd-page .pd-main-row:has(.col-aside .pd-related > .widget):not(.pd-reviews-wide) > #reviews {
        grid-column: 1 / span 2;
    }
}

/* Reseñas (iframe de otra aplicación): caja blanca con borde y esquinas redondeadas, como el resto de paneles de la ficha.
   El fondo blanco y el aire interior los pone la propia página de reseñas (WebSiteReviewsMVC, Review/Viewer). */
.pd-page #iframeReviews {
    display: block;
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: 16px;
}

/* Galería principal y carruseles de la ficha («Productos relacionados» y «Diseños»; móvil y tablet): permiten ampliar la foto con el gesto de pellizco. Swiper pone
   touch-action: pan-y en el carrusel, que solo deja desplazar en vertical y bloquea el zoom del navegador; con pinch-zoom se
   sigue pudiendo pasar de foto con el dedo y se recupera el zoom. */
#swiper-product-main,
#swiper-relacionados,
#swiper-disenos {
  touch-action: pan-y pinch-zoom;
}