/* custom.css: fichero vacio devolvia 404 via dispatcher (.htaccess exige -s); comentario anadido en QA B2B 2026-07-05 */

/* ==========================================================================
   TAREA 4 (QA Veratys 07/2026) - "Comparacion rapida" legible en movil.
   modules/pkcompare/views/css/page.css oculta la primera columna por debajo
   de 1024px (#product_comparison td:first-child {display:none}), asi que en
   el movil la tabla quedaba como columnas de valores SIN etiqueta: no se
   sabia si "104 tonos" era la capacidad, el tono o el formato.
   Se devuelven las etiquetas y se fijan (sticky) a la izquierda mientras se
   desliza la tabla en horizontal. El contenedor .quick-compare-products ya
   trae overflow:auto del propio modulo, asi que solo hace falta la columna.
   Se toca el TEMA, no el core ni el modulo.
   ========================================================================== */
@media (max-width: 1024px) {
    #product_comparison td:first-child {
        display: table-cell;
        position: sticky;
        left: 0;
        z-index: 2;
        min-width: 92px;
        max-width: 120px;
        padding: 0.5em;
        text-align: left;
        vertical-align: middle;
        box-shadow: 1px 0 0 rgba(0, 0, 0, 0.08);
    }
    /* la celda sticky necesita fondo propio: si no, el contenido pasa por debajo */
    #product_comparison tr:nth-child(odd) td:first-child { background: #fff; }
    #product_comparison tr:nth-child(even) td:first-child { background: #f9f9f9; }

    #wrapper #product_comparison td:first-child h6 {
        padding: 0;
        font-size: 0.72em;
        line-height: 1.25;
        letter-spacing: 0.04em;
        word-break: break-word;
    }

    /* pista visual de que la tabla se desliza */
    #main .quick-compare-products {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* F5 2026-08-25: el swatch de textura no se pintaba (pages/product.css:418 no fija background-size,
   y no existe ninguna regla .texture). discopebell.com usa contain a 50x50. */
.product-variants > .product-variants-item .color {
    width: 50px; height: 50px; aspect-ratio: 1;
    background-size: contain; background-position: center center;
    background-repeat: no-repeat; background-color: #fff; vertical-align: top;
}
@media (max-width: 575px) {
    .product-variants > .product-variants-item .color { width: 44px; height: 44px; }
}