/* ==========================================
   COMPARISON SECTION
========================================== */

.comparison-section{
    background:var(--surface);
}

.comparison-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    align-items:stretch;
}


/* ==========================================
   COMPARISON COLUMN
========================================== */

.comparison-column{
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;

    background:#ffffff;
    border:1px solid rgba(29,29,31,.08);
    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-small);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.comparison-column:hover{
    transform:translateY(-6px);
    border-color:rgba(239,125,0,.22);
    box-shadow:var(--shadow-large);
}


/* ==========================================
   PRODUCT SELECTOR
========================================== */

.product-selector{
    padding:24px 24px 0;
}

.product-selector__select{
    width:100%;
    height:52px;

    padding:0 46px 0 18px;

    color:var(--text);
    font-size:15px;
    font-weight:600;

    background-color:#f5f5f7;
    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #6e6e73 50%
        ),
        linear-gradient(
            135deg,
            #6e6e73 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px) 22px,
        calc(100% - 14px) 22px;

    background-size:6px 6px;
    background-repeat:no-repeat;

    border:1px solid transparent;
    border-radius:14px;

    cursor:pointer;

    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.product-selector__select:hover{
    background-color:#eeeeef;
}

.product-selector__select:focus{
    background-color:#ffffff;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(239,125,0,.15);
}


/* ==========================================
   PRODUCT PREVIEW
========================================== */

.product-preview{
    display:flex;
    flex-direction:column;
    align-items:center;

    padding:26px 28px 36px;
    text-align:center;
}

.product-preview__image-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:310px;
    margin-bottom:26px;

    overflow:hidden;
}

.product-preview__image{
    width:100%;
    max-width:270px;
    max-height:290px;

    object-fit:contain;

    opacity:1;
    transform:translateY(0) scale(1);

    filter:drop-shadow(
        0 20px 22px rgba(0,0,0,.12)
    );

    transition:
        opacity .18s ease,
        transform .28s ease,
        filter var(--transition);
}

.comparison-column:hover .product-preview__image{
    transform:scale(1.025);

    filter:drop-shadow(
        0 26px 28px rgba(0,0,0,.16)
    );
}

.product-preview__image.is-changing{
    opacity:0;
    transform:translateY(10px) scale(.985);
}

.product-preview__name{
    margin-bottom:6px;

    font-size:30px;
    line-height:1.12;
    letter-spacing:-.03em;
}

.product-preview__subtitle{
    min-height:52px;
    margin-bottom:24px;

    color:var(--text-secondary);
    font-size:16px;
    line-height:1.45;
}


/* ==========================================
   PRODUCT COLORS
========================================== */

.product-colors{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    gap:12px;

    width:100%;
    min-height:110px;

    margin-bottom:28px;
}

.product-colors__name{
    min-height:22px;

    color:var(--text-secondary);
    font-size:14px;
    font-weight:600;
}

.product-colors__options{
    display:flex;
    flex-wrap:wrap;

    justify-content:center;
    align-content:flex-start;

    gap:8px;

    width:100%;
    min-height:54px;
}

.color-option{
    display:grid;
    place-items:center;

    width:34px;
    height:34px;

    padding:4px;

    border:2px solid transparent;
    border-radius:50%;

    transition:
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.color-option:hover{
    transform:scale(1.08);
}

.color-option.is-selected{
    border-color:var(--primary);
    box-shadow:0 0 0 2px #ffffff;
}

.color-option__swatch{
    display:block;

    width:22px;
    height:22px;

    border-radius:50%;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.08),
        0 2px 5px rgba(0,0,0,.1);
}

.color-option__swatch--border{
    border:1px solid #d2d2d7;
}


/* ==========================================
   PRODUCT ACTIONS
========================================== */

.product-preview__actions{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;

    width:100%;
}


/* ==========================================
   PRODUCT SPECIFICATIONS
========================================== */

.product-specifications{
    display:flex;
    flex-direction:column;
    flex:1;

    margin:0;
    border-top:1px solid rgba(29,29,31,.08);
}

.specification{
    display:flex;
    flex-direction:column;
    gap:12px;

    padding:26px 28px;

    border-bottom:1px solid rgba(29,29,31,.08);
}

/* Tipo e cor da lona */
.product-specifications .specification:nth-child(1){
    min-height:170px;
}

/* Aderência */
.product-specifications .specification:nth-child(2){
    min-height:205px;
}

/* Durabilidade */
.product-specifications .specification:nth-child(3){
    min-height:180px;
}

/* Conforto */
.product-specifications .specification:nth-child(4){
    min-height:180px;
}

/* Uso */
.product-specifications .specification:nth-child(5){
    min-height:260px;
}

/* Usuário */
.product-specifications .specification:nth-child(6){
    min-height:180px;
}

.specification:last-child{
    border-bottom:0;
}

.specification dt{
    color:var(--text);
    font-size:14px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.specification dd{
    margin:0;

    color:var(--text-secondary);
    font-size:15px;
    line-height:1.55;
}



/* ==========================================
   RATINGS
========================================== */

.rating{
    display:flex;
    flex-wrap:wrap;
    gap:5px;

    width:100%;
}

.rating__bar{
    width:calc((100% - 20px) / 5);
    height:7px;

    border-radius:999px;

    transform:scaleX(.25);
    transform-origin:left center;
    opacity:.35;

    transition:
        transform .45s cubic-bezier(.4,0,.2,1),
        opacity .45s ease;
}

.rating__bar.is-active{
    transform:scaleX(1);
    opacity:1;
}

.rating__description{
    width:100%;
    margin-top:10px;

    color:var(--text-secondary);
    font-size:14px;
    line-height:1.5;
}





/* ==========================================
   IMAGE ERROR STATE
========================================== */

.product-preview__image[src=""],
.product-preview__image:not([src]){
    visibility:hidden;
}