.tfw-glossary {
    --tfw-royal: #4169E1;
    --tfw-royal-soft: #E9EEFD;
    --tfw-navy-deep: #1B2C5E;
    --tfw-ink: #233252;
    --tfw-muted: #5C6B8A;
    --tfw-amber-deep: #D4860F;
    --tfw-cream: #F3F6FD;
    --tfw-line: #E2E8F5;
    --tfw-shadow-md: 0 6px 24px rgba(27,44,94,.10);
    /*font-family: 'Poppins',-apple-system,'Segoe UI',sans-serif;*/
    color: var(--tfw-ink);
    background: var(--tfw-cream);
    padding: 64px 24px;
}

    .tfw-glossary .tfw-glossary__wrap {
        /*max-width: 1180px;*/
        margin: 0 auto
    }

    .tfw-glossary .tfw-glossary__head {
        max-width: 680px;
        margin: 0 0 36px
    }

    .tfw-glossary .tfw-glossary__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--tfw-amber-deep);
        margin: 0 0 10px;
    }

        .tfw-glossary .tfw-glossary__eyebrow::before {
            content: "";
            width: 20px;
            height: 2px;
            background: #EF9F27;
            border-radius: 2px;
            display: inline-block
        }

    .tfw-glossary .tfw-glossary__title {
        /*font-family: 'DM Serif Display',Georgia,serif;*/
        font-weight: 400;
        color: var(--tfw-navy-deep);
        font-size: 34px;
        line-height: 1.14;
        letter-spacing: -.01em;
        margin: 0 0 12px;
    }

    .tfw-glossary .tfw-glossary__head p {
        color: var(--tfw-muted);
        font-size: 15.5px;
        line-height: 1.65;
        margin: 0
    }

    .tfw-glossary .tfw-glossary__grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 16px
    }

    .tfw-glossary .tfw-gloss-card {
        background: #fff;
        border: 1px solid var(--tfw-line);
        border-radius: 14px;
        overflow: hidden;
        transition: border-color .2s ease,box-shadow .2s ease;
    }

        .tfw-glossary .tfw-gloss-card.is-open {
            border-color: var(--tfw-royal);
            box-shadow: var(--tfw-shadow-md)
        }

    .tfw-glossary .tfw-gloss-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 18px;
        background: none;
        border: 0;
        cursor: pointer;
        text-align: left;
        /*font-family: inherit;*/
        min-height: 44px;
    }

    .tfw-glossary .tfw-gloss-icon {
        width: 40px;
        height: 40px;
        flex: none;
        border-radius: 11px;
        background: var(--tfw-royal-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .2s ease,transform .2s ease;
    }

        .tfw-glossary .tfw-gloss-icon svg {
            width: 20px;
            height: 20px;
            color: var(--tfw-royal);
            display: block
        }

    .tfw-glossary .tfw-gloss-card.is-open .tfw-gloss-icon {
        background: var(--tfw-royal);
        transform: scale(1.06)
    }

        .tfw-glossary .tfw-gloss-card.is-open .tfw-gloss-icon svg {
            color: #fff
        }

    .tfw-glossary .tfw-gloss-head {
        flex: 1;
        min-width: 0
    }

    .tfw-glossary .tfw-gloss-term {
        font-size: 15px;
        font-weight: 700;
        color: var(--tfw-navy-deep);
        display: block
    }

    .tfw-glossary .tfw-gloss-sub {
        font-size: 11.5px;
        color: var(--tfw-muted)
    }

    .tfw-glossary .tfw-gloss-plus {
        width: 18px;
        height: 18px;
        flex: none;
        color: var(--tfw-muted);
        transition: transform .25s ease
    }

    .tfw-glossary .tfw-gloss-card.is-open .tfw-gloss-plus {
        transform: rotate(45deg);
        color: var(--tfw-royal)
    }

    .tfw-glossary .tfw-gloss-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease
    }

        .tfw-glossary .tfw-gloss-body p {
            margin: 0;
            padding: 0 18px 18px 72px;
            font-size: 13px;
            line-height: 1.6;
            color: var(--tfw-ink)
        }

        .tfw-glossary .tfw-gloss-body b {
            color: var(--tfw-navy-deep)
        }

@media (max-width:900px) {
    .tfw-glossary .tfw-glossary__grid {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:600px) {
    .tfw-glossary .tfw-glossary__grid {
        grid-template-columns: 1fr
    }

    .tfw-glossary .tfw-gloss-body p {
        padding-left: 18px
    }

    .tfw-glossary .tfw-glossary__title {
        font-size: 27px
    }
}
















/* COMPONENT 2: USP BAND — IS-certified/Morbi, 200 + dealers, free samples Root class: .tfw-usp*/
.tfw-usp {
    --tfw2-navy-deep: #1B2C5E;
    --tfw2-amber: #EF9F27;
    background: var(--tfw2-navy-deep,#1B2C5E) !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    position: relative;
    overflow: hidden;
    padding: 0;
    isolation: isolate;
}

    .tfw-usp::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(circle at 15% 30%,rgba(65,105,225,.28),transparent 55%), radial-gradient(circle at 88% 75%,rgba(239,159,39,.14),transparent 50%);
    }

    .tfw-usp .tfw-usp__wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 24px
    }

    .tfw-usp .tfw-usp__row {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3,1fr)
    }

    .tfw-usp .tfw-usp-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 30px 26px;
        border-right: 1px solid rgba(255,255,255,.08);
    }

        .tfw-usp .tfw-usp-item:last-child {
            border-right: 0
        }

    .tfw-usp .tfw-usp-icon {
        width: 46px;
        height: 46px;
        flex: none;
        border-radius: 13px;
        background: rgba(239,159,39,.14);
        border: 1px solid rgba(239,159,39,.30);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        .tfw-usp .tfw-usp-icon svg {
            width: 22px;
            height: 22px;
            color: var(--tfw2-amber);
            display: block
        }

    .tfw-usp .tfw-usp-item b {
        display: block;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 2px
    }

    .tfw-usp .tfw-usp-item span {
        display: block;
        color: #A9BCE8;
        font-size: 12px;
        line-height: 1.4
    }

@media (max-width:760px) {
    .tfw-usp .tfw-usp__row {
        grid-template-columns: 1fr
    }

    .tfw-usp .tfw-usp-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08)
    }

        .tfw-usp .tfw-usp-item:last-child {
            border-bottom: 0
        }
}





/* COMPONENT 3: ACCURACY PANEL — "How we keep this page accurate" Root class: .tfw-accuracy*/

.tfw-accuracy {
    --tfw3-navy-deep: #1B2C5E;
    --tfw3-ink: #233252;
    --tfw3-muted: #5C6B8A;
    --tfw3-line: #E2E8F5;
    --tfw3-safe: #2E7D5B;
    --tfw3-safe-soft: #E7F2ED;
    /*font-family: 'Poppins',-apple-system,'Segoe UI',sans-serif;*/
    color: var(--tfw3-ink);
    background: #fff;
    padding: 64px 24px;
}

    .tfw-accuracy .tfw-accuracy__wrap {
        /*max-width: 1180px;*/
        margin: 0 auto
    }

    .tfw-accuracy .tfw-accuracy-panel {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 28px;
        align-items: flex-start;
        background: #fff;
        border: 1px solid var(--tfw3-line);
        border-radius: 20px;
        padding: 32px 34px;
        box-shadow: 0 1px 3px rgba(27,44,94,.08);
    }

    .tfw-accuracy .tfw-accuracy-icon {
        width: 56px;
        height: 56px;
        flex: none;
        border-radius: 16px;
        background: var(--tfw3-safe-soft);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .tfw-accuracy .tfw-accuracy-icon svg {
            width: 28px;
            height: 28px;
            color: var(--tfw3-safe);
            display: block
        }

    .tfw-accuracy .tfw-accuracy-panel h3 {
        /*font-family: 'DM Serif Display',Georgia,serif;*/
        font-weight: 400;
        font-size: 21px;
        color: var(--tfw3-navy-deep);
        margin: 0 0 10px;
    }

    .tfw-accuracy .tfw-accuracy-panel p {
        margin: 0 0 18px;
        font-size: 14px;
        line-height: 1.65;
        color: var(--tfw3-ink);
        max-width: 640px
    }

    .tfw-accuracy .tfw-accuracy-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 14px
    }

        .tfw-accuracy .tfw-accuracy-list li {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12.5px;
            color: var(--tfw3-muted);
            line-height: 1.5
        }

        .tfw-accuracy .tfw-accuracy-list svg {
            width: 15px;
            height: 15px;
            color: var(--tfw3-safe);
            flex: none;
            margin-top: 2px;
            display: block
        }

        .tfw-accuracy .tfw-accuracy-list b {
            color: var(--tfw3-navy-deep);
            display: block;
            font-size: 13px;
            margin-bottom: 1px
        }

@media (max-width:820px) {
    .tfw-accuracy .tfw-accuracy-panel {
        grid-template-columns: 1fr;
        text-align: left
    }

    .tfw-accuracy .tfw-accuracy-list {
        grid-template-columns: 1fr
    }
}











/*   COMPONENT 4: AFTERCARE — "Living with your new tile"
     Root class: .tfw-aftercare*/

.tfw-aftercare {
    --tfw4-royal: #4169E1;
    --tfw4-royal-soft: #E9EEFD;
    --tfw4-navy-deep: #1B2C5E;
    --tfw4-muted: #5C6B8A;
    --tfw4-amber-deep: #D4860F;
    --tfw4-cream: #F3F6FD;
    --tfw4-line: #E2E8F5;
    /*font-family: 'Poppins',-apple-system,'Segoe UI',sans-serif;*/
    background: var(--tfw4-cream);
    padding: 64px 24px;
}

    .tfw-aftercare .tfw-aftercare__wrap {
        /*max-width: 1180px;*/
        margin: 0 auto
    }

    .tfw-aftercare .tfw-aftercare__head {
        max-width: 680px;
        margin: 0 0 36px
    }

/* ============================================================
   COMPONENT 5: TILES NEAR YOU — location-aware nearby dealers
   Root class: .tny-section
   ============================================================ */
.tny-section {
    font-family: 'Poppins', sans-serif;
    padding: 36px 40px;
}

.tny-card {
    margin: auto;
    background: #f7f4f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 20px;
}

/* Left */
.tny-info {
    width: 240px;
}

.tny-info-title {
    font-size: 20px;
    font-weight: 800;
}

.tny-info-location {
    color: #E8A020;
    font-weight: 700;
    margin: 6px 0 10px;
}

.tny-info-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 14px;
}

.tny-info-btn {
    background: #1a1a1a;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

/* Dealers */
.tny-dealers {
    display: flex;
    gap: 12px;
    flex: 1;
}

.tny-dealer-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.tny-dealer-img {
    height: 120px;
    background-size: cover;
    background-position: center;
}

.tny-dealer-info {
    padding: 10px;
}

.tny-dealer-name {
    font-size: 13px;
    font-weight: 600;
}

.tny-rating-score {
    color: #E8A020;
    font-size: 12px;
}

/* View All */
.tny-view-all-card {
    width: 90px;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    padding: 10px;
}

.tny-view-all-btn {
    background: #E8A020;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dummy images */
.tny-ph-1 {
    background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=400');
}

.tny-ph-2 {
    background-image: url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400');
}

.tny-ph-3 {
    background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400');
}

/* Address */
.tny-dealer-address {
    font-size: 11px;
    color: #777;
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Phone */
.tny-dealer-phone {
    display: none !important;
    font-size: 11px;
    color: #1a1a1a;
    margin-top: 4px;
    text-decoration: none;
    font-weight: 600;
}

    .tny-dealer-phone:hover {
        color: #E8A020;
    }

.tny-ph-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: tny-shimmer 1.4s infinite;
}

.tny-skel-line {
    height: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: tny-shimmer 1.4s infinite;
}

.tny-skel-title {
    width: 75%;
    height: 14px;
}

.tny-skel-short {
    width: 40%;
}

.tny-skel-long {
    width: 90%;
}

@keyframes tny-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.tny-dealer-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.tny-location-spinner {
    color: #888;
    font-size: 13px;
}

.tny-no-data {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: #888;
    font-size: 13px;
}

.tny-no-data i {
    font-size: 24px;
    color: #ccc;
}

.tny-distance {
    color: #777;
    font-size: 11px;
    margin-left: 4px;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {

    .tny-card {
        flex-direction: column;
    }

    .tny-info {
        width: 100%;
    }

    .tny-dealers {
        overflow-x: auto;
    }

    .tny-dealer-card {
        flex: 0 0 45%;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

    .tny-section {
        padding: 20px 16px;
    }

    .tny-dealers {
        overflow-x: auto;
    }

    .tny-dealer-card {
        flex: 0 0 73%;
    }

    .tny-dealers::-webkit-scrollbar {
        display: none;
    }
}

    .tfw-aftercare .tfw-aftercare__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--tfw4-amber-deep);
        margin: 0 0 10px;
    }

        .tfw-aftercare .tfw-aftercare__eyebrow::before {
            content: "";
            width: 20px;
            height: 2px;
            background: #EF9F27;
            border-radius: 2px;
            display: inline-block
        }

    .tfw-aftercare .tfw-aftercare__title {
        /*font-family: 'DM Serif Display',Georgia,serif;*/
        font-weight: 400;
        color: var(--tfw4-navy-deep);
        font-size: 34px;
        line-height: 1.14;
        letter-spacing: -.01em;
        margin: 0 0 12px;
    }

    .tfw-aftercare .tfw-aftercare__head p {
        color: var(--tfw4-muted);
        font-size: 15.5px;
        line-height: 1.65;
        margin: 0
    }

    .tfw-aftercare .tfw-aftercare__grid {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 16px
    }

    .tfw-aftercare .tfw-care-card {
        background: #fff;
        border: 1px solid var(--tfw4-line);
        border-radius: 16px;
        padding: 22px 18px;
        text-align: center;
        transition: transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease;
    }

        .tfw-aftercare .tfw-care-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 24px rgba(27,44,94,.10);
            border-color: rgba(65,105,225,.26)
        }

    .tfw-aftercare .tfw-care-icon {
        width: 26px;
        height: 26px;
        color: var(--tfw4-royal);
        margin: 0 auto 12px;
        display: block
    }

    .tfw-aftercare .tfw-care-card h3 {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--tfw4-navy-deep);
        margin: 0 0 8px;
        line-height: 1.3
    }

    .tfw-aftercare .tfw-care-card p {
        font-size: 12px;
        color: var(--tfw4-muted);
        line-height: 1.55;
        margin: 0
    }

@media (max-width:900px) {
    .tfw-aftercare .tfw-aftercare__grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media (max-width:560px) {
    .tfw-aftercare .tfw-aftercare__grid {
        grid-template-columns: 1fr 1fr
    }

    .tfw-aftercare .tfw-aftercare__title {
        font-size: 27px
    }
}

/* =========================================================
   HUB PAGE QUICK LINKS — "Explore More Tiles By"
   (same component as mockup details' .tf-mockup-details-hub-links)
   ========================================================= */

.tf-size-hub-links-section {
    max-width: 90%;
    margin: 40px auto;
    padding: 0 16px;
}

.tf-size-hub-links-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #172b4d;
    margin-bottom: 18px;
}

.tf-size-hub-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 769px) {
    .tf-size-hub-links-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .tf-size-hub-links-grid {
        grid-template-columns: 1fr;
    }
}

.tf-size-hub-link-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #dfe4eb;
    border-radius: 16px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .tf-size-hub-link-card:hover {
        transform: translateY(-4px);
    }

.tf-size-hub-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--hub-color, #4169e1), color-mix(in srgb, var(--hub-color, #4169e1) 70%, #000));
    color: #fff;
    box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--hub-color, #4169e1) 65%, transparent);
    transition: transform .2s ease;
}

    .tf-size-hub-link-card:hover .tf-size-hub-link-icon {
        transform: scale(1.08) rotate(-4deg);
    }

.tf-size-hub-link-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.tf-size-hub-link-label {
    font-size: 15.5px;
    font-weight: 700;
    color: #172b4d;
}

.tf-size-hub-link-sub {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tf-size-hub-link-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 7px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

    .tf-size-hub-link-card:hover .tf-size-hub-link-arrow {
        background: var(--hub-color, #4169e1);
        color: #fff;
        transform: translateX(3px);
    }

.tf-size-hub-link-category {
    --hub-color: #2563eb;
}

.tf-size-hub-link-size {
    --hub-color: #059669;
}

.tf-size-hub-link-finish {
    --hub-color: #7c3aed;
}

.tf-size-hub-link-color {
    --hub-color: #db2777;
}

.tf-size-hub-link-look {
    --hub-color: #ea580c;
}

.tf-size-hub-link-area {
    --hub-color: #0891b2;
}



/* =========================================================
   DESIGN GRID -- name (left) + Inquiry button (right) footer
   Replaces the 3-dot popover menu below each card on this page only
   (client requirement: name + Inquiry must be directly visible, not
   hidden behind a menu). The 3-dot menu markup itself is only Razor-
   commented out in the two partials (_Partial_DesignDataCityWise.cshtml
   and _Partial_DesignDataCityWiseForStaticDesign.cshtml), not deleted,
   so it's a one-line uncomment to bring back if needed.
   Scoped here via master-size.css (only loaded on SizeIndex.cshtml)
   rather than the shared pinterest-grid-test.css, so
   Design/Index-Pinterest-Test.cshtml and other PinterestGrid pages keep
   their existing 3-dot menu untouched.
   Deliberately understated (small text, outline-only button) -- this is
   a secondary action below the photo, not meant to compete with it for
   attention. */
#design-grid-gallery.pg-grid li.pg-item .pg-pin-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

#design-grid-gallery.pg-grid li.pg-item .pg-pin-card-name {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

#design-grid-gallery.pg-grid li.pg-item .pg-pin-card-inquiry-btn {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: #2540a0;
    background: #dde5fa;
    border: 1px solid #c7d2f5;
    border-radius: 6px;
    padding: 4px 10px;
    text-decoration: none;
    white-space: nowrap;
    border-color: #4169e1;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

    #design-grid-gallery.pg-grid li.pg-item .pg-pin-card-inquiry-btn:hover {
        background: #ccdafc;
        border-color: #2a57de;
        color: #16339c;
    }

/* =========================================================
   DESIGN GRID -- "Add to Compare" beside the wishlist heart
   Wraps the existing wishlist heart button together with a new compare
   button, top-right of the image, side by side. Scoped to this page only
   -- Design/Index-Pinterest-Test.cshtml's cards don't have the
   .pg-pin-actions wrapper at all, so the shared .pg-pin-heart-btn
   absolute-positioning rule in pinterest-grid-test.css is untouched and
   still applies there normally; here the WRAPPER carries that
   positioning instead, and .pg-pin-heart-btn is reset to a plain flex
   child so it sits side by side with .pg-pin-compare-btn via the
   wrapper's `gap`. Uses window.TFCompare (wwwroot/view-js/compare.js,
   same store the design-details page's Compare button already uses) --
   toggling here also updates/opens the shared compare tray
   (_CompareTray.cshtml) automatically, no extra wiring needed for that
   part. */
#design-grid-gallery.pg-grid li.pg-item .pg-pin-actions {
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 2;
    display: flex;
    gap: 6px;
}

    #design-grid-gallery.pg-grid li.pg-item .pg-pin-actions .pg-pin-heart-btn {
        position: static;
        top: auto;
        right: auto;
    }

#design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 1px 6px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #444;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

    #design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-btn:hover {
        background: #fff;
        color: #4169e1;
        transform: scale(1.08);
    }

    /* Filled/active state -- inverted to a solid fill (unlike the heart's
       "turn red" active state) so a card added to compare reads clearly
       as a distinct kind of toggle from a wishlisted one. */
    #design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-btn.is-active {
        background: #4169e1;
        color: #fff;
    }



/* ---------- Compare confirm popup ----------
   Clicking the compare icon no longer adds/removes directly -- it opens
   this small popup right below the icon instead, and only
   TFCompare.toggle() actually runs once "Add"/"Remove" is clicked inside
   it (see the JS wiring in SizeIndex.cshtml).

   Lives in the markup as a SIBLING of .pg-pin-media (inside .pg-pin-card),
   NOT nested inside .pg-pin-actions/.pg-pin-media -- .pg-pin-media has
   overflow:hidden (needed for the image's rounded corners), which was
   silently clipping this popup whenever it tried to extend past the
   image's own box, most visible on short/mobile cards where there's
   barely any image height below the icon for the popup to render into.
   .pg-pin-card itself has no overflow:hidden (same reason the dots-menu
   popover elsewhere in this file also lives outside .pg-pin-media), so
   this is positioned relative to .pg-pin-card (position:relative) instead
   -- top:37px/right:10px is hand-matched to sit just below the heart/
   compare icons (.pg-pin-actions: top:5px, 26px tall, +6px gap = 37px;
   right:10px matches .pg-pin-actions' own right offset) even though it's
   no longer their DOM descendant. Hidden via opacity/visibility (not
   display:none) so it can transition smoothly, same pattern as the
   (currently unused) dots-menu popover elsewhere in this file.

   --pg-compare-confirm-shift-x is set by keepCompareConfirmOnScreen() in
   SizeIndex.cshtml right after opening, to nudge the popup back on-screen
   when its 168px width would otherwise overflow the viewport edge -- e.g.
   a card near the left edge on a narrow 2-column mobile layout, where
   right:10px anchoring on a card only ~150-170px wide pushes most of the
   popup off the left of the screen entirely. A CSS var (not a plain
   inline transform) so the JS-set horizontal shift composes with this
   rule's own vertical open/close slide instead of one overwriting the
   other -- same technique the dots-menu popover already uses for the
   same problem. */
#design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-confirm {
    position: absolute;
    top: 37px;
    right: 10px;
    width: 168px;
    max-width: calc(100vw - 20px); /* never wider than the viewport itself, minus a small margin */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--pg-compare-confirm-shift-x, 0px), -4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 6;
}

    #design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-confirm.is-open {
        opacity: 1;
        visibility: visible;
        transform: translate(var(--pg-compare-confirm-shift-x, 0px), 0);
    }

#design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-confirm-text {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: #222;
    line-height: 1.35;
}

#design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-confirm-actions {
    display: flex;
    gap: 6px;
}

#design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-confirm-btn {
    flex: 1;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    padding: 5px 0;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}

#design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-confirm-yes {
    background: #4169e1;
    color: #fff;
}

    #design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-confirm-yes:hover {
        background: #3454c9;
    }

#design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-confirm-cancel {
    background: #f2f2f2;
    color: #444;
    border-color: #e2e2e2;
}

    #design-grid-gallery.pg-grid li.pg-item .pg-pin-compare-confirm-cancel:hover {
        background: #e9e9e9;
    }



#design-grid-gallery.pg-grid li.pg-item:has(.pg-pin-compare-confirm.is-open) {
    z-index: 20;
}


/* ============================================================
   Hero "Watch video" button (.tfbh-banner) — scrolls to #tfbhTileVideos
   ============================================================ */
.tfbh-banner-root .tfbh-video-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 9px 20px 9px 12px;
    border: 0;
    border-radius: 999px;
    background: #1a1a1a;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

    .tfbh-banner-root .tfbh-video-btn:hover {
        background: #000;
        color: #fff;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .5);
    }

    .tfbh-banner-root .tfbh-video-btn-yt {
        width: 26px;
        height: auto;
        flex: none;
        display: block;
    }

@media (max-width: 600px) {
    .tfbh-banner-root .tfbh-video-btn {
        margin-top: 18px;
        font-size: 12.5px;
        padding: 8px 16px 8px 10px;
    }

    .tfbh-banner-root .tfbh-video-btn-yt {
        width: 23px;
    }
}

/* Hero button anchors down to the static video block; clear any sticky header */
html {
    scroll-behavior: smooth;
}

#tfbhTileVideos {
    scroll-margin-top: 90px;
}