/**
 * Section: clubhouse-accessories
 *
 * Extracted from template-parts/clubhouse_accessories.php.
 * Loaded via trunorth_enqueue_section('clubhouse-accessories').
 */

.clubhouse-accessories{
    padding: calc(var(--vw) * 5) 0;

    background-color: #F5F5F5;
    min-height: calc(var(--vw) * 27);
    overflow-x: clip;

    .header-container{
        width: 100%;
        padding: calc(var(--vw) * 0) calc(var(--vw) * 2) calc(var(--vw) * 6) calc(var(--vw) * 8);
    }

    .scroll-container{
        padding: 0 calc(var(--vw) * 5);
        display: flex;
        gap: calc(var(--vw) * 4);
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        cursor: grab;

        &::-webkit-scrollbar {
            display: none;
        }

        &.active {
            cursor: grabbing;
        }

        .item
        {
          flex: 0 0 auto;

          .item-content{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            h3{
                margin-top: calc(var(--vw) * 1);
                /* Match the under-image swatch labels used site-wide —
                   body size, regular weight, inherited font. */
                font-family: inherit;
                font-size: var(--font-body);
                font-weight: 400;
                color: #444;
                user-select: none;
                -webkit-user-select: none;
                word-break: break-word;
                line-height: 1.25;
                max-width: 400px;
                text-align: center;
            }

            .img-container
            {   display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                background-color: #D9D9D9;
                /* Circle sized ~20% smaller than the original 22vw target
                   so accessory tiles don't dominate the product page. */
                width: calc(var(--vw) * 17.5);
                aspect-ratio: 1/1;
                user-select: none;
                -webkit-user-select: none;

                    .img{
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        max-width: 16rem;
                        pointer-events: none;
                    }
            }
          }
        }
    }
}