@media (max-width: 400px) {
    .variant-card.individual-card.var-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .variant-card.individual-card.var-row .variant-card-thumb {
        order: 0;
        margin-bottom: 12px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .variant-card.individual-card.var-row .card-body {
        order: 1;
        width: 100%;
    }
}
/* Centered Divi-like layout for archive templates */

.roblan-product-hero .et_pb_row {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }

.roblan-archive{
    font-family: 'Avenir', Sans-serif;
    padding: 0 0 60px !important;
}
.roblan-details{
    background-color: #1c1c1c;
    color: #ffffff;
}
.roblan-variants{
    margin: 30px 0;
}
.variants-title{
    font-family: 'Avenir', Sans-serif;
}

.roblan-archive .et_pb_row{
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.roblan-hero-image img {
    max-width: 520px;
    width: 100%;
    max-height: 500px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,.12));
    margin: 60px 0 0;
}

.roblan-hero-noimg{
    width: 400px;
    height: 400px;
    background: repeating-linear-gradient(45deg,#eee,#eee 12px,#e5e5e5 12px,#e5e5e5 24px);
    border-radius: 16px;
}

/* Breadcrumbs */
.roblan-breadcrumbs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    color:#444;
    font-size:14px;
    margin-bottom:10px;
}
.roblan-breadcrumbs a{
    color:#444;
    text-decoration:none;
}
.roblan-breadcrumbs a:hover{ text-decoration:underline; }
.roblan-breadcrumbs .sep{
    color:#bdbdbd;
    padding:0 4px;
}
.roblan-breadcrumbs .current{
    color:#E2181B;
    font-weight:600;
}
.roblan-archive .product-parent{
    font-size: 24px;
    margin: 40px 0 0px;
    text-align:center;
    color: #ffffff;
}

.roblan-archive .product-title,
.roblan-product-hero .product-title{
    font-size: clamp(28px, 4vw, 64px);
    margin: 0px 0 5px;
    text-align:center;
    color: #ffffff;
}

.roblan-archive .product-cat-title,
.roblan-product-hero .product-cat-title p{
    text-align:center;
    color: #ffffff;
    margin: 0px 0 30px;
}
.roblan-archive .product-description,
.roblan-product-hero .product-description{
    max-width: 900px;
    margin: 0 auto 50px;
    text-align:center;
}

.roblan-archive .product-description p,
.roblan-product-hero .product-description p{
    font-size: 17px;
    line-height: 24px;
    font-family:'Avenir', 'Roboto', Sans-serif;
}

.roblan-product-hero .product-title,.roblan-product-hero .product-cat-title p{
    color: #000000;
}

.product-card-related{
    height: 400px;
    text-align: center;
    transition: all 0.3s;
}
.product-card-related:hover{
    transform: translateY(-5px);
}
.product-card-related .producto-card-imagen{
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
   /* background: #fafafa;*/
    height: 150px;
    margin: 0 auto;
}
.product-card-related .prod-relacionados{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.beneficts,
.aplications{
    margin-top: 50px; 
}

.beneficts h2,
.aplications h2{ 
    margin-bottom: 25px;
}

.beneficts-icons{
padding-left: 25px;
line-height: 30px;
}

/** apliaciones en ficha producto **/

.aplications-icons{
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 10px;
}
.aplications-icons li{
    text-align: center;
    min-width: 90px;
}
.aplications-icons img{
    width: 60px;
}

/* lista de descargas */
.section-descargas{
    text-align: center;
    margin-top: 40px;
}
.section-descargas h2{
    font-family:'Avenir', 'Roboto', Sans-serif;
    font-size: 44px;
    margin-bottom: 50px;
}
.lista-descargas{
    margin: 20px;
}
.prod-descarga,
.desc-download{
    display:flex;
    flex-direction:row;
    align-items: center;
}
.prod-descarga{
    background:#ffffff;
    padding:20px;
    justify-content: space-between;
    margin: 10px 0;
    align-items: center;
}
.prod-descarga .txt-download{
    font-weight: bolder;
    color:#000000;
    margin-top: 4px;
    font-size: 17px;
}
.prod-descarga .file-type{
    margin-top: 4px;
    margin-left: 6px;
}
.prod-descarga .icon{
    margin-right: 17px;
}
.prod-descarga .icon .dashicons{
    font-size:30px;
    color:#000000;
}
.prod-descarga .bt-download .btn-click{
    background: #E2181B;
    color: #ffffff;
    font-weight: bolder;
    padding: 12px 20px 12px 50px;
    font-size:17px;
    transition:all 0.5s;
    border: 3px solid #ffffff;
    position: relative;
}
.prod-descarga .bt-download .btn-click:hover{
    background: #FFFFFF;
    border: 3px solid #E2181B;
    color: #E2181B;
}

.down-icon {
    width: 32px;
    height: 32px;
    background: url("/wp-content/themes/Divi-child/images/download-bracket.svg") no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 6px;
    left: 10px;
    transition: .3s all;
}
.prod-descarga .bt-download .btn-click:hover > .down-icon{
    background: url("/wp-content/themes/Divi-child/images/download-bracket-red.svg");
}
.ldt-image{
    height:50px;
    filter: invert(0) brightness(0);
}
.roblan-variants-table tr{
    cursor: pointer;
}
.roblan-variants-table tbody tr:hover{
    background: rgba(28, 28, 28, 0.07);
}
.roblan-product-header{
    background: radial-gradient(1200px 600px at 50% -200px, rgba(0,0,0,.06), transparent 60%), #f7f7f7;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    position: relative; /* permite capa de fondo adicional */
    background-image:url('/wp-content/themes/Divi-child/images/fondo.png'); /* cambia a tu patrón */
    background-repeat:repeat;
    min-height: 400px;
}
.roblan-body{
    display: flex;
    
    justify-content: flex-start; 
    align-items: stretch; 
    /* flex-flow: row wrap; */ 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-content: stretch;
    max-width: 1920px;
    margin: 0 auto;
 
}
.roblan-body .image-column{
    margin-right: 0 !important;
    width: 24%;
}
.roblan-body .details-column{
    padding: 40px 0px 40px 60px;
     width: 76%;
}
.roblan-body .image-column .carrusel{ 
    /*background-image:url('/wp-content/themes/Divi-child/images/fondo.png');  */
    background-repeat:repeat;
    padding: 10% 5% 0 5%;
    min-height: 500px;
}
.roblan-body .image-column .iconos{ 
    display: flex;
    
    justify-content: flex-start; 
    align-items: stretch; 
    /* flex-flow: row wrap; */ 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-content: stretch;
    padding: 5%;
}
.roblan-body .image-column .icono{ 
   height: 40px;
}
.details-image{
    aspect-ratio: 1 / 1; 
}
.details-image img{
    width: 100%; 
    object-fit: contain;
    display: block;
}

.details-image .swiper-button-next:after,.details-image .swiper-button-prev:after{
   
    background-color: #c4c2c270;
    font-size: 20px;
    font-weight: bold;
    color: #463e3e;
    border-radius: 50%;
    padding: 10px 15px;
    line-height: 20px;
 

    

}
.details-image .swiper-pagination-bullet-active {
    background: #000000;
}

.roblan-ficha-tecnica .details-tables{
    columns: 2;            /* número de columnas */
    -webkit-columns: 2;    /* soporte Safari */
    -moz-columns: 2;       /* soporte Firefox */
    list-style: none;       /* opcional: quitar viñetas */
    padding: 0;
    margin: 0;
}
.roblan-ficha-tecnica .data-details{
    margin-bottom: 30px;
}
.roblan-ficha-tecnica .data-details h2{
   /*font-family: DIN Next LT Pro;*/
    font-weight: 400;
    font-style: Regular;
    font-size: 36px; 
    line-height: 100%;
    letter-spacing: 0%;
    margin: 16px 0;
}
.roblan-ficha-tecnica .data-details .label-detail{
    font-family: Avenir;
    font-weight: 400;
    font-size: 16px; 
    line-height: 40px;
    letter-spacing: 0%;


}
.roblan-ficha-tecnica .data-details .detail-value{
    font-family: Avenir;
    font-weight: 900;
    font-size: 16px; 
    line-height: 40px;
    letter-spacing: 0%;
    text-align: right;

}
.roblan-ficha-tecnica .details-tables li {
    break-inside: avoid; /* evita cortes raros de elementos */
    margin-bottom: 8px; /* separación */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
    border-bottom: 1px solid #D9D9D9;
}

.roblan-ficha-tecnica .details-tables li .detail-value{
    font-weight: bold;
}

   /* Modal tablas */
      .roblan-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;display:none;align-items:center;justify-content:center;padding:4vh 4vw;}
      .roblan-modal{position:relative;background:#fff;margin:0 auto;padding:16px 20px;max-width:92vw;max-height:90vh;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:auto;overflow:visible;}
      .roblan-modal-content{max-height:85vh;overflow:auto;}
        .roblan-modal-close{
            position:absolute;
            right:-10px;
            top:-10px;
            width:36px;
            height:36px;
            background:#ffffff;
            border:none;
            border-radius:50%;
            font-size:20px;
            line-height:1;
            cursor:pointer;
            color:#E2181B;
            font-weight:bold;
            display:flex;
            align-items:center;
            justify-content:center;
            box-shadow:0 4px 12px rgba(0,0,0,0.25);
            transition:all 0.3s ease;
            z-index:10;
        }
        .roblan-modal-close:hover{
            background:#E2181B;
            color:#ffffff;
            transform:scale(1.1);
            box-shadow:0 6px 16px rgba(0,0,0,0.3);
        }
        .roblan-modal-content table{width:100%;border-collapse:collapse}
        .roblan-modal-content th,.roblan-modal-content td{border:1px solid #e6e6e6;padding:6px 8px;text-align:left}
        .roblan-modal-content td,
        .roblan-modal-content tbody th{font-weight:400 !important}
        .roblan-modal-content table{margin-bottom:16px !important}
        /* Aplicar el mismo estilo de tabla del modal a la vista truncada (5 columnas) */
        .rtm-table-inline table{width:100%;border-collapse:collapse;margin-bottom:16px !important}
        .rtm-table-inline th,.rtm-table-inline td{border:1px solid #e6e6e6;padding:0px 8px;text-align:left}
        .rtm-table-inline td,
        .rtm-table-inline tbody th{font-weight:400 !important}
        .rtm-table-inline .rtm-ellipsis-cell,.roblan-modal-content .rtm-ellipsis-cell{text-align:center;white-space:nowrap;width: 2px;
    overflow: hidden;
    padding: 2px;
    font-size: 12px;}
        /* Fila de elipsis cuando se trunca por filas */
        .rtm-table-inline tr.rtm-ellipsis-row td{ text-align:center;line-height: 20px; }
    /* Botón + inline al lado de la tabla (misma fila) */
    .rtm-table-flex{display:flex;align-items:center;gap:8px}
    .rtm-table-inline{overflow:auto;max-width:100%}
    .rtm-table-flex .roblan-table-more{width:26px;height:26px;border-radius:50%;background:#e30613;color:#fff;border:none;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 6px rgba(0,0,0,.15)}
    .rtm-table-flex .roblan-table-more:hover{filter:brightness(1.05)}
    .roblan-ficha-tech .btn { display:inline-block; }
    .roblan-ficha-hero { display:flex; gap:24px; align-items:flex-start; }
    .roblan-hero-img img { max-width:320px; height:auto; object-fit:contain; }
    .roblan-vertical-attrs { border-collapse:collapse; width:100%; }
    .roblan-vertical-attrs th, .roblan-vertical-attrs td { border:1px solid #ddd; padding:8px 10px; font-size:14px; vertical-align:top; }
    .roblan-vertical-attrs th { width: 30%; background:#f7f7f7; text-align:left; }
    @media (max-width: 768px){ .roblan-ficha-hero { flex-direction:column; } }

     /* --- Modal de zoom: flechas de navegación --- */
    .swipe-modal .modal-prev,
    .swipe-modal .modal-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: rgba(204, 204, 204, 0.35);
        color: #f8f8f8;
        font-size: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0.85;
        transition: background 0.2s, opacity 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.18);
        user-select: none;
    }
    .swipe-modal .modal-prev:hover,
    .swipe-modal .modal-next:hover {
        background: rgba(0,0,0,0.55);
        opacity: 1;
    }
    .swipe-modal .modal-prev {
        left: 18px;
    }
    .swipe-modal .modal-next {
        right: 18px;
    }
    .swipe-modal .modal-prev span,
    .swipe-modal .modal-next span {
        font-size: 2.1rem;
        line-height: 1;
        font-weight: 700;
        pointer-events: none;
        font-family: inherit;
    }
    @media (max-width: 600px) {
        .swipe-modal .modal-prev,
        .swipe-modal .modal-next {
            width: 36px;
            height: 36px;
            font-size: 1.5rem;
        }
        .swipe-modal .modal-prev span,
        .swipe-modal .modal-next span {
            font-size: 1.5rem;
        }
        .swipe-modal .modal-prev { left: 6px; }
        .swipe-modal .modal-next { right: 6px; }
    }

/* --- VIEW TOGGLE CONTROLS --- */
.view-toggle-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}
.btn-toggle-view {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.btn-toggle-view.active {
    background: #E2181B;
    color: #fff;
    border-color: #E2181B;
}
.btn-toggle-view:hover:not(.active) {
    background: #ebebeb;
}

/* --- RESPONSIVE LOGIC (default without forced class) --- */
/* Desktop defaults (> 900px) */
.roblan-variants-display-wrapper:not(.view-table):not(.view-cards) .display-table-view { 
    display: block; 
}
.roblan-variants-display-wrapper:not(.view-table):not(.view-cards) .display-cards-view { 
    display: none; 
}
.roblan-variants-display-wrapper:not(.view-table):not(.view-cards) .btn-toggle-view.tabla {
    background: #E2181B;
    color: #fff;
    border-color: #E2181B;
}
.roblan-variants-display-wrapper:not(.view-table):not(.view-cards) .btn-toggle-view.vista {
    background: #f5f5f5;
    color: inherit;
    border-color: #ddd;
}

.table-scroll-wrapper { 
    overflow-x: auto;
    width: 100%;
}

/* Mobile defaults (<= 900px) */
@media (max-width: 900px) {
    .roblan-variants-display-wrapper:not(.view-table):not(.view-cards) .display-table-view { 
        display: none; 
    }
    .roblan-variants-display-wrapper:not(.view-table):not(.view-cards) .display-cards-view { 
        display: block; 
    }
    .roblan-variants-display-wrapper:not(.view-table):not(.view-cards) .btn-toggle-view.tabla {
        background: #f5f5f5;
        color: inherit;
        border-color: #ddd;
    }
    .roblan-variants-display-wrapper:not(.view-table):not(.view-cards) .btn-toggle-view.vista {
        background: #E2181B;
        color: #fff;
        border-color: #E2181B;
    }
    .view-toggle-controls { justify-content: center; }
}

/* FORCED VIEWS VIA CLASSES (override responsive) */
.view-table .display-table-view { 
    display: block !important; 
}
.view-table .display-cards-view { 
    display: none !important; 
}
.view-table .btn-toggle-view.tabla {
    background: #E2181B !important;
    color: #fff !important;
    border-color: #E2181B !important;
}
.view-table .btn-toggle-view.vista {
    background: #f5f5f5 !important;
    color: inherit !important;
    border-color: #ddd !important;
}

.view-cards .display-table-view { 
    display: none !important; 
}
.view-cards .display-cards-view { 
    display: block !important; 
}
.view-cards .btn-toggle-view.tabla {
    background: #f5f5f5 !important;
    color: inherit !important;
    border-color: #ddd !important;
}
.view-cards .btn-toggle-view.vista {
    background: #E2181B !important;
    color: #fff !important;
    border-color: #E2181B !important;
}

/* --- CARDS VIEW STYLING --- */
.roblan-variants-cards-view {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Base style for variant cards */
.variant-card {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.generic-card .card-content {
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 20px;
    align-items: center;
}
.generic-card .card-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
}
.generic-card .card-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.generic-card .card-details {
    width: 100%;
    max-width: 600px;
}
.generic-card .common-attrs {
    width: 100%;
}

.roblan-variants-cards-view .variant-cards-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 15px;
}

/* UNIFIED CARD STYLE - No alternating colors */
.roblan-variants-cards-view .individual-card,
.roblan-variants-cards-view .individual-card:visited,
.roblan-variants-cards-view .individual-card:active,
.roblan-variants-cards-view .individual-card:focus {
    display: flex;
    flex-direction: column;
    padding: 20px !important;
    border: 1px solid #ddd !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    margin: 0 !important;
    color: #000 !important;
}

.roblan-variants-cards-view .individual-card:hover,
.roblan-variants-cards-view .individual-card:visited:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    transform: translateY(-4px) !important;
    border-color: #E2181B !important;
    background: #ffffff !important;
}

.individual-card .card-body {
    flex: 1;
}

/* Individual card horizontal list of attributes */
.individual-card .variant-attrs {
    display: block;
}

.individual-card .attr-row {
    display: inline;
    padding: 0;
    margin-right: 15px;
    font-size: 14px;
    line-height: normal;
    white-space: nowrap;
}

.individual-card .common-hidden,
.individual-card .empty-attr {
    display: none !important;
}

.individual-card .attr-label { 
    font-weight: 400; 
    color: #777; 
}

.individual-card .attr-label::after {
    content: ": ";
}

.individual-card .attr-value { 
    color: #333; 
}

/* SKU / Title Row styling - BLACK */
.individual-card .sku-row {
    display: block;
    margin-bottom: 8px;
    margin-right: 0;
    font-size: 17px;
}

.individual-card .sku-row .attr-value {
    color: #000 !important;
    font-weight: bold;
}

.individual-card .attr-value { 
    color: #333; 
}

/* Link color for the card titles/sku should be black */
.individual-card.unstyled-link {
    color: #000 !important;
}

/* Special styling for the first different attribute */
.individual-card .first-diff {
    font-weight: bold;
    font-size: 15px;
    margin-right: 20px;
}
.individual-card .first-diff .attr-value {
    color: #000 !important;
}

/* Variant card wrapper for download button */
.variant-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Hide wrapper when card is filtered out */
.variant-card-wrapper:has(.var-row[style*="display: none"]) {
    display: none;
}

.btn-download-ft {
    background: transparent;
    color: #E2181B;
    border: none;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 0 0 8px 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-top: 0;
}

.btn-download-ft:hover {
    color: #c41519;
    text-decoration: underline;
}

.btn-download-ft svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.cards-filter-wrapper {
    margin: -45px 0 15px !important;
    display: contents;
}

@media (max-width: 980px) {
    .roblan-body {
        flex-direction: column;
    }
    .roblan-body .image-column,
    .roblan-body .details-column {
        width: 100%;
    }
    .roblan-body .image-column {
        order: 1;
        padding: 0 5% 10px;
    }
    .roblan-body .details-column {
        order: 2;
        padding: 20px 5%;
    }
    .roblan-ficha-tecnica .details-tables {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
    .roblan-ficha-tecnica .details-tables li {
        width: 100%;
    }
    .prod-descarga {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .prod-descarga .bt-download {
        width: auto;
    }
    .prod-descarga .bt-download .btn-click {
        width: auto;
        text-align: center;
    }
    .roblan-details .et_pb_row {
        padding: 20px 5% !important;
    }
    .roblan-archive .product-description,
    .roblan-product-hero .product-description {
        margin: 0 auto 30px;
        padding: 0 5%;
    }
    .roblan-archive .product-description p,
    .roblan-product-hero .product-description p {
        font-size: 17px;
        line-height: 24px;
    }
    .button-container {
        margin-top: 25px;
        padding: 0 5%;
    }
    .btn-anchor {
        display: block;
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        padding: 12px 15px;
        white-space: normal;
        text-align: center;
    }
    .aplications {
        padding: 0 5%;
    }
    .aplications h2 {
        font-size: 28px;
    }
    .aplications-icons {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
    .aplications-icons li {
        min-width: 70px;
    }
    .aplications-icons img {
        width: 50px;
    }
    .section-descargas h2 {
        font-size: 32px;
        padding: 0 5%;
    }
}

.roblan-variants-cards-view {
    display: flex;
    flex-direction: column;
    gap: 0px;
}


/* Common attrs in generic card still use old style or similar */
.common-attrs .attr-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.common-attrs .attr-row:last-child { border-bottom: none; }
.common-attrs .attr-label { font-weight: 600; color: #444; }

/* Accesorio styling for common attrs */
.common-attrs .attr-row.accesorio {
    background-color: #cfcfcf;
    color: #000000;
    border-bottom: 1px solid #ffffff59;
    padding: 0;
    margin: 0;
}
.common-attrs .attr-row.accesorio .attr-label {
    background-color: red;
    color: white;
    padding: 10px 12px;
    font-weight: 600;
}
.common-attrs .attr-row.accesorio .attr-value {
    padding: 10px 12px;
}
.common-attrs .attr-row.accesorio .svg-icono {
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
    .prod-descarga .bt-download .btn-click {
        width: 56px;
        height: 56px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .prod-descarga .bt-download .btn-click .down-icon {
        position: static;
        top: auto;
        left: auto;
    }
    .generic-card .card-content {
        flex-direction: column;
    }
    .generic-card .card-image {
        flex: 0 0 auto;
        width: 100%;
    }
    .variant-cards-container {
        grid-template-columns: 1fr;
    }
}

/* Base Styles (Escritorio) */
.variant-cards-container {
    padding: 0;
}
.variant-cards-container {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 12px !important;
    max-width: 100% !important;
}
.variant-card-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}
.individual-card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    transition: box-shadow 0.3s ease;
    min-height: 125px !important;
    width: 100% !important;
}
.variant-card-thumb {
    flex: 0 0 70px !important;
    width: 70px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
}
.v-card-img {
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto;
}
.card-body {
    flex: 1 !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
}
.card-download-desktop {
    width: 100%;
    display: flex !important;
    flex-direction: row !important; /* En línea */
    flex-wrap: wrap !important;     /* Por si el SKU es muy largo y empuja los dos */
    gap: 12px !important;           /* Espacio entre botones */
    margin-top: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
.btn-ficha, .btn-fotometrico {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 0 !important;      /* Reducimos padding para que quepan mejor */
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px !important;     /* Un pelín más pequeño para asegurar que caben */
    font-weight: 600 !important;
    transition: opacity 0.2s !important;
    white-space: nowrap !important;
    background: transparent !important;
}
.btn-ficha { color: #E2181B !important; }
.btn-fotometrico { color: #007bff !important; }

.btn-ficha svg, .btn-fotometrico svg {
    margin-right: 8px;
    flex-shrink: 0;
}

.btn-ficha:hover, .btn-fotometrico:hover { opacity: 0.7; }
.btn-ficha { color: #E2181B !important; } /* Texto rojo */
.btn-fotometrico { color: #007bff !important; } /* Texto azul */

.btn-ficha svg, .btn-fotometrico svg {
    margin-right: 8px;
    flex-shrink: 0;
}

.btn-ficha:hover, .btn-fotometrico:hover { opacity: 0.7; }

.btn-download-ft-desktop {
    display: inline-flex !important;
    align-items: center;
    padding: 8px 16px;
    background: #E2181B;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
}
.variant-card-thumb {
    flex: 0 0 100px !important;
    width: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #fff !important;
} 
.card-body {
    flex: 1 !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.side-download-action {
    display: none !important; /* Oculto por defecto en escritorio */
    align-items: center !important;
    flex: 0 0 45px !important;
    width: 45px !important;
}
.btn-download-ft-side {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background: #E2181B !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform 0.2s ease;
}
.btn-download-ft-side:hover {
    transform: scale(1.1);
}

@media (max-width: 980px) {
    .variant-cards-container {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    .variant-card-wrapper {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    .individual-card {
        flex: 1 !important;
        margin-bottom: 0 !important;
    }
    .side-download-action {
        display: flex !important; /* Se muestra el icono lateral */
        flex: 0 0 35px !important;
        width: 35px !important;
    }
    .card-download-desktop {
        display: none !important; /* Se oculta el botón de texto de debajo */
    }
    .variant-cards-container {
        padding: 0 5px !important;
    }
    .variant-card-wrapper {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
    }
    .variant-card-thumb {
        flex: 0 0 70px !important;
        width: 70px !important;
    }
    .card-body {
        padding: 5px 10px !important;
    }
    .side-download-action {
        flex: 0 0 35px !important;
        width: 35px !important;
    }
    .side-download-action .btn-download-ft-side {
        width: 35px !important;
        height: 35px !important;
        flex: 0 0 35px !important;
    }
    .side-download-action .btn-download-ft-side svg {
        width: 18px !important;
        height: 18px !important;
    }
    .card-download-desktop {
        display: none !important;
    }
    /* Asegurar que los atributos no causen desbordamiento */
    .variant-attrs .attr-row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}
}