.plots-section {
        background-color: var(--lightgray);
        border-top: 1px solid var(--palegray);
    }

    /* Contenedor de tabla */
    .plots-table-container {
        background: var(--white);
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        overflow: hidden;
        margin-bottom: 2rem;
        position: relative;
    }

    /* Table Legend */
    .table-legend {
        padding: 0.75rem 1rem;
        background-color: #f8f9fa;
        border-top: 1px solid #e9ecef;
        text-align: center;
    }

    .table-legend small {
        font-size: 0.8125rem;
        color: #6c757d;
        font-style: italic;
        line-height: 1.4;
    }

    /* Estilos base de tabla */
    .plots-table {
        margin-bottom: 0;
        font-size: 0.875rem;
        width: 100%;
    }

    .plots-table thead th {
        background-color: var(--primary);
        color: var(--white);
        font-weight: 600;
        padding: 0.875rem 0.75rem;
        border: none;
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        white-space: nowrap;
        vertical-align: middle;
    }

    .plots-table tbody td {
        padding: 0.875rem 0.75rem;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
        color: #495057;
        white-space: nowrap;
    }
    .plots-table tbody td.image-col {
        display: none;
    }

    .plots-table tbody tr {
        transition: background-color 0.15s ease-in-out;
    }

    .plots-table tbody tr:hover {
    }

    .plots-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Estados de las filas */
    .plot-row.unavailable {
        opacity: 0.6;
        background-color: #f8f8f8;
    }

    .plot-row.unavailable:hover {
        background-color: #f5f5f5;
    }

    /* Funcionalidad de ordenación */
    .plots-table thead th.sortable {
        cursor: pointer;
        user-select: none;
        position: relative;
        transition: background-color 0.15s ease-in-out;
        min-width: 90px;
    }

    .plots-table thead th.sortable:hover {
        background-color: var(--darkgray);
    }

    .plots-table thead th.sortable.active-sort {
        background-color: var(--alt);
    }

    .sort-icon {
        margin-left: 0.2rem;
        font-size: 0.875rem;
        opacity: 0.7;
        transition: opacity 0.15s ease-in-out;
        display: inline-block;
        display: none;
    }
    @media (min-width: 992px){
            
        .sort-icon {
            display: inline-block;
        }
    }

    .plots-table thead th.sortable:hover .sort-icon {
        opacity: 1;
    }

    .plots-table thead th.sortable.active-sort .sort-icon {
        opacity: 1;
        font-weight: bold;
    }

    /* Columnas específicas */
    .reference-col strong {
        color: var(--primary);
        font-weight: 600;
        font-size: 0.9375rem;
    }

    .model-col {
        font-weight: 500;
    }

    .price-col .price-value {
        font-weight: 600;
        color: var(--secondary);
        font-size: 0.9375rem;
    }

    /* Columna sticky para acciones */
    .sticky-col {
        position: sticky;
        right: 0;
        background-color: var(--white);
        z-index: 10;
        box-shadow: -0.125rem 0 0.25rem rgba(0, 0, 0, 0.05);
        min-width: 9rem;
        text-align: center;
    }

    .plots-table thead .sticky-col {
        background-color: var(--primary);
        box-shadow: -0.125rem 0 0.25rem rgba(0, 0, 0, 0.1);
    }

    .plots-table tbody tr:hover .sticky-col {
    }

    .plot-row.unavailable .sticky-col {
        background-color: #f8f8f8;
    }

    .plot-row.unavailable:hover .sticky-col {
        background-color: #f5f5f5;
    }

    /* Botones */
    button.btn-reserve {
        background-color: var(--primary);
        border-color: var(--secondary);
        color: white;
        font-weight: 600;
        padding: 0.7rem 1.1rem;
        border-radius: 0.375rem;
        transition: all 0.2s 
ease-in-out;
        min-width: 7.5rem;
        font-size: 0.8125rem;
        border: 1px solid transparent;
        cursor: pointer;
        text-decoration: none;
    }

    button.btn-reserve:hover {
        background-color: var(--secondary);
        border-color: var(
        --alt);
        color: #ffffff;
        transform: translateY(-0.0625rem);
        box-shadow: 0 0.125rem 0.25rem var(
        --lightgold);
    }

     button.btn-reserve:focus {
        background-color: var(--alt);
        border-color: var(--alt);
        color: var(--white);
        box-shadow: 0 0 0 0.125rem var(--lightgold);
    }

     button.btn-disabled {
        background-color: #6c757d;
        border-color: #6c757d;
        color: white;
        cursor: not-allowed;
        min-width: 7.5rem;
        font-size: 0.8125rem;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        border: 1px solid transparent;
        opacity: 0.8;
    }

    .btn-disabled:hover {
        background-color: #6c757d;
        border-color: #6c757d;
        cursor: not-allowed;
    }

    /* Footer de parcelas */
    .plots-footer {
        text-align: center;
        padding-top: 2rem;
        border-top: 1px solid #e9ecef;
    }

    #generate-plots-pdf {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--white);
        padding: 0.75rem 2rem;
        border-radius: 2rem;
        font-weight: 500;
        transition: all 0.2s ease-in-out;
        border: 1px solid transparent;
        font-size: 1rem;
    }

    #generate-plots-pdf:hover {
        background-color: var(--darkgray);
        border-color: var(--darkgray);
        color: var(--white);
        transform: translateY(-0.0625rem);
        box-shadow: 0 0.25rem 0.5rem rgba(30, 58, 95, 0.3);
    }

    #generate-plots-pdf:focus {
        background-color: var(--darkgray);
        border-color: var(--darkgray);
        box-shadow: 0 0 0 0.125rem rgba(30, 58, 95, 0.25);
    }
    
    /* Mejoras de accesibilidad */
    .btn-reserve:focus,
    .btn-disabled:focus,
    #generate-plots-pdf:focus {
        outline: none;
    }

    /* Loading state */
    .plots-table.loading {
        opacity: 0.6;
        pointer-events: none;
    }

    .plots-table.loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.25rem;
        height: 1.25rem;
        margin: -0.625rem 0 0 -0.625rem;
        border: 0.125rem solid #cea839;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 1s linear infinite;
    }

    /* Estado de éxito */
    .plot-row.reserved {
        background-color: #d4edda;
        border-color: #c3e6cb;
    }

    .plot-row.reserved:hover {
        background-color: #c8e6c9;
    }

    .plot-row.reserved .sticky-col {
        background-color: #d4edda;
    }

    .plot-row.reserved:hover .sticky-col {
        background-color: #c8e6c9;
    }


/* Animación de loading (común para todos los tamaños) */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* Desktop: Tabla normal con scroll horizontal controlado */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive {
    min-width: 100%;
}

.btn-reserve .btn-text-mobile {
    display: none;
}

.btn-reserve .btn-text-desktop {
    display: inline;
}

/* Apartments table: desktop = text, mobile = icon only */
.apartments-table-container .plots-table thead th .th-label-icon {
    display: none;
}

@media (max-width: 991px) {

    .apartments-table-container  .plots-table{
        border: 1px solid #ededed;
        margin-block: 2rem;
        border-collapse: collapse;
    }
    .apartments-table-container  .plots-table th,
    .apartments-table-container  .plots-table td{
        border-collapse: collapse;
        border: 1px solid #e9ecef;
        text-align: center;
    }
    .apartments-table-container .plots-table thead th.model-col,
    .apartments-table-container .plots-table thead th.baths-col,
    .apartments-table-container .plots-table tbody td.model-col,
    .apartments-table-container .plots-table tbody td.baths-col {
        display: none;
    }

    .apartments-table-container .plots-table thead th .th-label-text {
        display: none;
    }

    .apartments-table-container .plots-table thead th .th-label-icon {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        align-items: flex-end;
        justify-content: flex-end;
        font-size: 0.2rem;
    }

    .apartments-table-container .plots-table thead th.sortable {
        /* display: flex; */
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        padding-inline: 0.1rem;
        padding-block: 0.6rem;
        width: 50px;
    }

    .apartments-table-container .plots-table thead th .th-label-icon path {
        fill: #fff;
    }

    .apartments-table-container .plots-table thead th .th-label-icon svg {
        width: 1.25rem;
        flex-shrink: 0;
        max-width: 1.2rem;
        max-height: 1.2rem;
    }
    
    .apartments-table-container .plots-table thead th .th-label-icon small {
        font-size: 0.6rem;
        text-transform: none;
    }
    .apartments-table-container .plots-table thead th .th-label-icon.th-bedrooms-icon svg {
        width: 1.6rem;
        max-width: none;
        max-height: 1.4rem;
    }

    .apartments-table-container .plots-table thead th.price-col.sticky-col,
    .apartments-table-container .plots-table tbody td.price-col.sticky-col {
        position: sticky;
        right: 0;
        z-index: 2;
        box-shadow: -0.025rem 0 0.25rem rgba(0, 0, 0, 0.08);
    }

    .apartments-table-container .plots-table thead th.price-col.sticky-col {
        background-color: var(--primary);
        padding-inline: 0;
        min-width: 0;
    }

    .apartments-table-container .plots-table tbody td.price-col.sticky-col {
        background-color: var(--white);
        z-index: 1;
        min-width: 0;
        padding-inline: 0.2rem;
    }

    .apartments-table-container .plots-table tbody tr:hover td.price-col.sticky-col {
        /* background-color: var(--lightgray); */
    }

    .apartments-table-container .plots-table tbody tr.apartment-row.unavailable td.price-col.sticky-col {
        background-color: #f8f8f8;
    }

    .apartments-table-container .plots-table tbody tr.apartment-row.unavailable:hover td.price-col.sticky-col {
        background-color: #f5f5f5;
    }
}

@scope (.apartments-section) {
    @media (max-width: 991px) {
        .apartments-table-container .table {
            min-width: 50rem;
        }
        
        .table-responsive-wrapper {
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }
    }
    
    /* Mobile: Layout de 2 columnas (Imagen 20% + Contenido 80%) */
    @media (max-width: 767px) {
        /* Eliminar scroll horizontal completamente */
        .table-responsive-wrapper {
            overflow-x: visible;
            border: none;
        }
        
        .apartments-table-container .table {
            min-width: 100%;
            border: none;
        }
        
        .apartments-table-container .plots-table thead {
            display: none;
        }
        
        .apartments-table-container .plots-table tbody {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .apartments-table-container .plots-table tbody tr {
            display: grid;
            grid-template-columns: 20% 1fr 1fr;
            grid-template-rows: auto auto auto auto;
            gap: 0;
            background: var(--white);
            overflow: hidden;
            transition: box-shadow 0.2s ease-in-out;
        }
        
        .apartments-table-container .plots-table tbody tr:hover {
        }
        
        /* Reset de estilos por defecto de td */
        .apartments-table-container .plots-table tbody td {
            display: flex;
            flex-direction: column;
            padding: 0.625rem;
            border: none;
            white-space: normal;
            text-align: left;
        }
        
        .apartments-table-container .plots-table tbody td::before {
            content: attr(data-label);
            font-size: 0.625rem;
            font-weight: 600;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.025em;
            margin-bottom: 0.25rem;
            line-height: 1.2;
            font-weight: 400;
            display: block;
        }
        
        /* === COLUMNA IMAGEN (20%) === */
        .apartments-table-container .plots-table .image-col {
            grid-column: 1;
            grid-row: 1 / -1;
            padding: 0;
            background: #ffffff;
            padding-top: 1rem;
            padding-inline: 0;
            height: 128px;
            padding-right: 0.8rem;
        }
        
        .apartments-table-container .plots-table .image-col img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 0.4rem;
        }
        
        /* === COLUMNA CONTENIDO (80%) === */
        
        .apartments-table-container .plots-table tbody .reference-col {
            grid-column: 2 / 4;
            grid-row: 1;
            color: var(--primary) !important;
            padding: 0.75rem 1rem;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        
        .apartments-table-container .plots-table tbody .reference-col::before {
            display: none;
        }
        
        .apartments-table-container .plots-table tbody .reference-col strong {
            font-size: 1.125rem;
            font-weight: 700;
            letter-spacing: 0.025em;
        }
        
        .apartments-table-container .plots-table tbody .total-price-col {
            grid-column: 2;
            grid-row: 2;
            border-radius: 0.25rem;
            margin: 0;
            padding: 0.5rem 0.8rem;
        }
        
        .apartments-table-container .plots-table tbody .build-m2-col {
            grid-column: 3;
            grid-row: 2;
            background: #f8f9fa;
            border-radius: 0.25rem;
            margin: 0.5rem 0.5rem 0.5rem 0.25rem;
        }
        
        .apartments-table-container .plots-table tbody .annual-return-col {
            grid-column: 2;
            grid-row: 3;
            background: #ffffff;
            border-radius: 0.25rem;
            margin: 0.25rem 0 0.5rem 0.5rem;
        }
        
        .apartments-table-container .plots-table tbody .price-col {
            grid-column: 3;
            grid-row: 3;
            background: #ffffff;
            border-radius: 0.25rem;
            margin: 0.25rem 0.5rem 0.5rem 0.25rem;
        }
        
        .apartments-table-container .plots-table tbody .total-price-col .total-price-value,
        .apartments-table-container .plots-table tbody .price-col .price-value {
            font-size: 1rem;
        }
        
        .apartments-table-container .plots-table tbody td > * {
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.3;
        }
        
        .apartments-table-container .plots-table tbody tr:not(:has(.build-m2-col)) .total-price-col {
            grid-row: 2;
            padding-inline: 0;
        }
        
        .apartments-table-container .plots-table tbody tr:not(:has(.build-m2-col)) .annual-return-col {
            grid-column: 3;
            grid-row: 2;
            margin: 0;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .apartments-table-container .plots-table tbody tr:not(:has(.build-m2-col)) .price-col {
            grid-column: 2 / 4;
            grid-row: 3;
            margin: 0;
            padding-block: 0;
            padding-left: 0;
            background-color: #f8f9fa;
            padding: 0.5rem 0.8rem;
            border: 0.5px solid var(
            --secondary);
            display: flex !important;
            flex-wrap: nowrap !important;
            flex-direction: row;
            gap: 0.5rem;
            align-items: center;
        }
        
        .apartments-table-container .plots-table tbody tr:not(:has(.build-m2-col)) .price-col .price-value{
            font-size: 1.5rem;
        }
        .apartments-table-container .plots-table tbody td::before{
            
        }
        
        .apartments-table-container .plots-table tbody tr:not(:has(.build-m2-col)) .action-col {
            grid-row: 4;
            background: inherit;
        }
        
        /* 3) CTA - Fila 4, ocupa 2 columnas */
        .apartments-table-container .plots-table tbody .action-col {
            grid-column: 2 / 4;
            grid-row: 4;
            padding: 0.75rem 1rem;
            background: var(--white);
        }
        
        .apartments-table-container .plots-table tbody .action-col::before {
            display: none;
        }
        
        .apartments-table-container .plots-table tbody .action-col .btn-reserve,
        .apartments-table-container .plots-table tbody .action-col .btn-disabled {
            padding: 0.75rem 1.2rem;
            font-weight: 600;
            /* width: 100%; */
            background-color: var(--secondary);
            margin-block: 0.7rem 0;
        }
        
        /* Eliminar columna sticky en móvil */
        .apartments-table-container .plots-table .sticky-col {
            position: static;
            box-shadow: none;
        }
        
        /* Estados unavailable */
        .apartments-table-container .plots-table tbody tr.unavailable {
            opacity: 0.7;
        }
        
        .apartments-table-container .plots-table tbody tr.unavailable .image-col {
            filter: grayscale(100%);
            opacity: 0.6;
        }
        
        .apartments-table-container .plots-table tbody tr.unavailable .reference-col {
            background: #6c757d;
        }
        
        .btn-reserve .btn-text-mobile {
            display: inline;
            font-size: 0.9rem;
        }
        
        .btn-reserve .btn-text-desktop {
            display: none;
        }
    }
    
    @media (max-width: 575px) {
        .apartments-table-container .plots-table tbody tr {
            grid-template-columns: 25% 1fr 1fr;
            margin-bottom: 0.4rem;
            padding: 0.2rem 0rem 0.9rem;
            gap: 0.3rem 0.2rem;
            border-bottom: 1px solid var(--lightgray);
        }
        
        .apartments-table-container .plots-table tbody td {
            padding: 0.5rem 0.8rem;
        }
        
        .apartments-table-container .plots-table tbody td::before {
            font-size: 0.6rem;
            margin-bottom: 0;
        }
        
        .apartments-table-container .plots-table tbody td > * {
            font-size: 0.8125rem;
        }
        
        .apartments-table-container .plots-table tbody .reference-col {
            padding: 0.625rem 0rem 0rem;
            justify-content: flex-start;
            align-items: flex-start;
            overflow: hidden;
        }
        
        .apartments-table-container .plots-table tbody .reference-col strong {
            font-size: 1.1rem;
            text-align: left;
            text-transform: capitalize;
        }
        
        .apartments-table-container .plots-table tbody .total-price-col,
        .apartments-table-container .plots-table tbody .build-m2-col,
        .apartments-table-container .plots-table tbody .annual-return-col,
        .apartments-table-container .plots-table tbody .price-col {
            margin: 0;
        }
        
        .apartments-table-container .plots-table tbody .total-price-col .total-price-value,
        .apartments-table-container .plots-table tbody .price-col .price-value {
            font-size: 0.9rem;
        }
        
        .apartments-table-container .plots-table tbody .action-col {
            padding: 0;
            margin-bottom: 0.3rem;
        }
        
        .apartments-table-container .plots-table tbody .action-col .btn-reserve,
        .apartments-table-container .plots-table tbody .action-col .btn-disabled {
        }
    }
    
    /* Associated Links Section (Mobile) */
    @media (max-width: 767px) {
        .apartments-footer .row {
            flex-direction: column;
        }
        
        .apartments-footer .col-md-6 {
            width: 100%;
        }
        
        .apartments-footer .pdf-generator {
            margin-bottom: 1.5rem;
            text-align: center;
        }
        
    }
}




.apartments-footer .associated-links {
    text-align: center;
}

.apartments-footer .links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.apartments-footer .links-list li {
    margin-bottom: 0.5rem;
}

.apartments-footer .links-list li:last-child {
    margin-bottom: 0;
}

.apartments-footer .links-list a {
    color: var(--secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.apartments-footer .links-list a:before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CA9500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.apartments-footer .links-list a:hover {
    color: var(--alt);
}

.apartments-footer .links-list a:hover:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

.apartments-footer .links-title {
    display: none;
}

/* Selector de variaciones en tabla */
.apartments-add-to-cart-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

/* Nuevo diseño: label + select en línea */
.variation-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.variation-selector-wrapper .variation-label {
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: bold;
    color: #495057;
    margin-bottom: 0;
}

.variation-selector-wrapper .variation-select {
    max-width: 100% !important;
    padding: 0.375rem 0.625rem;
    font-size: 1.0125rem;
    border: 1px solid var(--primary);
    border-radius: 0.375rem;
    background-color: var(
    --white);
    color: #495057;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
    width: 100%;
    border-radius: 2rem;
    text-align: center;
    font-weight: bold;
}

.variation-selector-wrapper .variation-select:focus {
    border-color: var(--secondary);
    outline: none;
    box-shadow: 0 0 0 0.125rem rgba(202, 149, 0, 0.25);
}

.variation-selector-wrapper .variation-select:hover {
    border-color: var(--darkgray);
}

.variation-selector-wrapper .variation-select.is-invalid {
    border-color: #dc3545;
    animation: shake 0.3s ease-in-out;
}

/* Compatibilidad con diseño anterior (si existe) */
.variation-selector {
    margin-bottom: 0.5rem;
}

.variation-selector .form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: var(--white);
    color: #495057;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}

.variation-selector .form-select:focus {
    border-color: var(--secondary);
    outline: none;
    box-shadow: 0 0 0 0.125rem rgba(202, 149, 0, 0.25);
}

.variation-selector .form-select:hover {
    border-color: var(--darkgray);
}

.variation-selector .form-select.is-invalid {
    border-color: #dc3545;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.5rem); }
    75% { transform: translateX(0.5rem); }
}

/* Ajustes responsive para selector de variaciones */
@scope (.apartments-section) {
    @media (max-width: 767px) {
        .apartments-add-to-cart-form {
            gap: 0.75rem;
        }
        
        .variation-selector-wrapper {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
            margin-bottom: 0;
        }
        
        .variation-selector-wrapper .variation-label {
            font-size: 0.75rem;
        }
        
        .variation-selector-wrapper .variation-select {
            max-width: 100%;
            width: 100%;
            font-size: 0.875rem;
            padding: 0.5rem 0.75rem;
        }
        
        .variation-selector {
            margin-bottom: 0;
        }
        
        .variation-selector .form-select {
            font-size: 0.875rem;
            padding: 0.625rem 0.875rem;
        }
    }
    
    @media (max-width: 575px) {
        .variation-selector-wrapper .variation-label {
            font-size: 0.7rem;
        }
        
        .variation-selector-wrapper .variation-select {
            font-size: 0.8125rem;
            padding: 0.5rem 0.75rem;
        }
        
        .variation-selector .form-select {
            font-size: 0.8125rem;
            padding: 0.5rem 0.75rem;
        }
    }
}