
.fit-fabric-guide{
    background:#fff;
    color:#111;
}

.fit-fabric-guide__container{
    width:min(1320px,calc(100% - 80px));
    margin:0 auto;
    padding:28px 0 72px;
}

.fit-fabric-guide__breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:24px;
    color:#858585;
    font-size:11px;
}

.fit-fabric-guide__breadcrumb a{
    color:#858585;
    text-decoration:underline;
}

.fit-fabric-guide__intro{
    margin-bottom:36px;
}

.fit-fabric-guide__intro h1{
    max-width:760px;
    margin:0 0 28px;
    font-size:32px;
    line-height:1.2;
    font-weight:500;
}

.fit-fabric-guide__intro>p{
    max-width:1240px;
    margin:0 0 28px;
    color:#444;
    font-size:13px;
    line-height:1.55;
}

.fit-fabric-nav{
    display:flex;
    align-items:flex-start;
    gap:38px;
}

.fit-fabric-nav__item{
    width:110px;
    color:#111;
    text-decoration:none;
    text-align:center;
}

.fit-fabric-nav__image{
    width:92px;
    height:92px;
    margin:0 auto 13px;
    border-radius:50%;
    display:block;
    overflow:hidden;
    background:#eee;
    transition:box-shadow .16s ease;
}

.fit-fabric-nav__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.fit-fabric-nav__item.is-active .fit-fabric-nav__image{
    box-shadow:0 0 0 1px #111,0 0 0 7px #fff,0 0 0 8px #111;
}

.fit-fabric-nav__item strong{
    display:block;
    font-size:12px;
    line-height:1.25;
    font-weight:600;
}

.fit-fabric-detail{
    margin:0 auto 66px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.23fr);
    background:#f7f5f2;
}

.fit-fabric-detail__copy{
    padding:42px 42px 46px;
}

.fit-fabric-detail__copy h2{
    margin:0 0 22px;
    font-size:21px;
    font-weight:500;
}

.fit-fabric-detail__description{
    max-width:470px;
    margin:0 0 28px;
    color:#606060;
    font-size:12px;
    line-height:1.55;
}

.fit-fabric-detail__block{
    margin-top:25px;
}

.fit-fabric-detail__block h3{
    margin:0 0 16px;
    font-size:15px;
    font-weight:500;
}

.fit-fabric-detail__block>p{
    margin:0;
    font-size:12px;
    line-height:1.55;
}

.fit-fabric-tags{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
}

.fit-fabric-tags span{
    min-height:45px;
    padding:0 18px;
    border:1px solid #111;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    font-size:11px;
}

.fit-fabric-score{
    max-width:420px;
}

.fit-fabric-score__bars{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:7px;
}

.fit-fabric-score__bars span{
    height:4px;
    border-radius:999px;
    background:#e1e0dd;
}

.fit-fabric-score__bars span.is-active{
    background:#111;
}

.fit-fabric-score__labels{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    color:#555;
    font-size:9px;
}

.fit-fabric-score__labels span:nth-child(2){
    text-align:center;
}

.fit-fabric-score__labels span:last-child{
    text-align:right;
}

.fit-fabric-detail__media{
    min-width:0;
}

.fit-fabric-detail__media img{
    width:100%;
    height:auto;
    min-height:0;
    display:block;
    object-fit:cover;
}

.fit-fabric-products{
    margin-top:14px;
}

.fit-fabric-products__head{
    margin-bottom:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.fit-fabric-products__head h2{
    margin:0;
    font-size:15px;
    font-weight:500;
}

.fit-fabric-products__head a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#222;
    font-size:11px;
    text-decoration:none;
}

.fit-fabric-products__head a span{
    width:26px;
    height:26px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#d6d6d6;
    font-size:22px;
    line-height:1;
}

.fit-fabric-products__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.fit-fabric-products__item{
    min-width:0;
}

.fit-fabric-products__item .fit-product-card{
    width:100%;
}

.fit-fabric-products__empty{
    grid-column:1/-1;
    color:#777;
    font-size:13px;
}

@media(max-width:767px){
    .fit-fabric-guide__container{
        width:100%;
        padding:10px 14px 42px;
    }

    .fit-fabric-guide__breadcrumb{
        margin-bottom:34px;
        font-size:10px;
    }

    .fit-fabric-guide__desktop-break{
        display:none;
    }

    .fit-fabric-guide__intro{
        margin-bottom:24px;
    }

    .fit-fabric-guide__intro h1{
        margin-bottom:24px;
        font-size:22px;
        line-height:1.28;
    }

    .fit-fabric-guide__intro>p{
        margin-bottom:30px;
        font-size:15px;
        line-height:1.42;
    }

    .fit-fabric-nav{
        width:100%;
        gap:8px;
        justify-content:space-between;
    }

    .fit-fabric-nav__item{
        width:24%;
        min-width:0;
    }

    .fit-fabric-nav__image{
        width:60px;
        height:60px;
        margin-bottom:13px;
    }

    .fit-fabric-nav__item.is-active .fit-fabric-nav__image{
        box-shadow:0 0 0 1px #111,0 0 0 4px #fff,0 0 0 5px #111;
    }

    .fit-fabric-nav__item strong{
        font-size:11px;
        line-height:1.12;
    }

    .fit-fabric-detail{
        display:block;
        margin:0 6px 42px;
    }

    .fit-fabric-detail__copy{
        padding:44px 20px 30px;
    }

    .fit-fabric-detail__copy h2{
        margin-bottom:28px;
        font-size:20px;
    }

    .fit-fabric-detail__description{
        margin-bottom:30px;
        font-size:16px;
        line-height:1.48;
    }

    .fit-fabric-detail__block{
        margin-top:30px;
    }

    .fit-fabric-detail__block h3{
        margin-bottom:20px;
        font-size:20px;
    }

    .fit-fabric-detail__block>p{
        font-size:16px;
        line-height:1.5;
    }

    .fit-fabric-tags{
        gap:10px;
    }

    .fit-fabric-tags span{
        min-height:56px;
        padding:0 18px;
        font-size:14px;
    }

    .fit-fabric-score{
        max-width:none;
    }

    .fit-fabric-score__bars{
        gap:8px;
    }

    .fit-fabric-score__bars span{
        height:5px;
    }

    .fit-fabric-score__labels{
        margin-top:16px;
        font-size:13px;
    }

    .fit-fabric-detail__media img{
        width:100%;
    }

    .fit-fabric-products{
        margin-top:0;
    }

    .fit-fabric-products__head{
        margin-bottom:14px;
    }

    .fit-fabric-products__head h2{
        font-size:16px;
    }

    .fit-fabric-products__head a{
        gap:7px;
        font-size:14px;
    }

    .fit-fabric-products__head a span{
        width:30px;
        height:30px;
    }

    .fit-fabric-products__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px 10px;
    }

    .fit-fabric-products__grid .fit-product-card__image{
        aspect-ratio: .72 / 1;
    }

    .fit-fabric-products__grid .fit-product-card__title{
        font-size:14px;
    }

    .fit-fabric-products__grid .fit-product-card__price{
        font-size:15px;
    }
}


/* =========================================================
   FABRIC GUIDE — v4 fixes
   ========================================================= */
.fit-fabric-nav__item .fit-fabric-nav__image{
    box-shadow:none;
}

.fit-fabric-nav__item.is-active .fit-fabric-nav__image{
    box-shadow:0 0 0 1px #111,0 0 0 7px #fff,0 0 0 8px #111;
}

@media(max-width:767px){
    .fit-fabric-nav__item.is-active .fit-fabric-nav__image{
        box-shadow:0 0 0 1px #111,0 0 0 4px #fff,0 0 0 5px #111;
    }
}


/* =========================================================
   FABRIC GUIDE — v5 desktop polish
   ========================================================= */

/* One clean active ring only. */
.fit-fabric-nav__item .fit-fabric-nav__image{
    box-shadow:none !important;
    outline:none;
}

.fit-fabric-nav__item.is-active .fit-fabric-nav__image{
    box-shadow:none !important;
    outline:1.5px solid #111;
    outline-offset:7px;
}

/* Intro/body copy was undersized on desktop. */
.fit-fabric-guide__intro>p{
    font-size:15px;
    line-height:1.6;
}

.fit-fabric-detail__description{
    font-size:14px;
    line-height:1.62;
}

.fit-fabric-detail__block h3{
    font-size:17px;
}

.fit-fabric-detail__block>p{
    font-size:14px;
    line-height:1.6;
}

/* Usage pills: a little larger and more balanced on desktop. */
.fit-fabric-tags{
    gap:12px;
}

.fit-fabric-tags span{
    min-height:50px;
    padding:0 20px;
    font-size:13px;
}

/* Score labels/readability. */
.fit-fabric-score__labels{
    font-size:11px;
}

/* Product rail headings. */
.fit-fabric-products__head{
    margin-bottom:28px;
}

.fit-fabric-products__head h2{
    font-size:20px;
}

.fit-fabric-products__head a{
    font-size:14px;
}

/* Use the exact same card proportions/behavior as normal listing pages. */
.fit-fabric-products__grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.fit-fabric-products__item{
    min-width:0;
}

.fit-fabric-products__item .fit-product-card{
    width:100%;
    max-width:none;
}

@media(max-width:767px){
    .fit-fabric-nav__item.is-active .fit-fabric-nav__image{
        outline-width:1px;
        outline-offset:5px;
    }

    /* Keep mobile values from the approved mobile layout. */
    .fit-fabric-guide__intro>p{
        font-size:15px;
        line-height:1.42;
    }

    .fit-fabric-detail__description{
        font-size:16px;
        line-height:1.48;
    }

    .fit-fabric-detail__block h3{
        font-size:20px;
    }

    .fit-fabric-detail__block>p{
        font-size:16px;
        line-height:1.5;
    }

    .fit-fabric-tags span{
        min-height:56px;
        padding:0 18px;
        font-size:14px;
    }

    .fit-fabric-score__labels{
        font-size:13px;
    }

    .fit-fabric-products__head h2{
        font-size:17px;
    }

    .fit-fabric-products__head a{
        font-size:14px;
    }

    .fit-fabric-products__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px 10px;
    }
}


/* Shared product cards: slightly larger product titles site-wide. */
.fit-product-card__title,
.fit-product-card__title a{
    font-size:16px !important;
    line-height:1.35;
}
