/* Utilities: performance-related rendering and scroll helpers. */

/* Improve scroll/render performance for long product grids. */
#shop-products-grid .shop-product-card {
    content-visibility: auto;
    contain-intrinsic-size: 280px;
}

#shop-products-grid .product-image-container {
    contain: paint;
}

.copyable-channel-id {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    direction: ltr;
    transition: color 0.2s ease;
}

.copyable-channel-id:hover {
    color: #3b6fd9;
}

.copyable-channel-id .channel-copy-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.copyable-channel-id .channel-copy-icon svg {
    width: 100%;
    height: 100%;
}

.copyable-channel-id .channel-id-text {
    vertical-align: middle;
    font-weight: 600;
    color: #4b5563;
    letter-spacing: 0.1px;
}

.copyable-channel-id .channel-copy-icon {
    opacity: 0.9;
}
/* Reserve desktop scrollbar space before progressive sections are inserted. */
html {
    scrollbar-gutter: stable;
}