/**
 * Similar Brands - v7.0.0 - Agency-Grade Release
 * Correct orange tag, auto-sized cards, integrated green icon, no underlines.
 */
:root {
    --sb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Perfected color palette */
    --sb-accent-orange: #f39c12; /* Exact orange from screenshot */
    --sb-accent-green: #28a745; 
    --sb-text-dark: #3c4043;
    --sb-text-light: #ffffff;
    --sb-card-bg: #ffffff;
    --sb-card-border-color: #ecf0f1;
    --sb-card-hover-shadow: 0 10px 30px rgba(0,0,0,0.1);
    
    /* Sizing */
    --sb-border-radius: 12px;
    --sb-spacing-unit: 1rem;
    --sb-transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sb-container {
    position: relative;
    width: 100%;
    margin: calc(var(--sb-spacing-unit) * 2) 0;
    padding: calc(var(--sb-spacing-unit) * 3) calc(var(--sb-spacing-unit) * 1.5);
    background-image: var(--sb-bg-image);
    background-size: cover;
    background-position: center center;
    background-attachment: scroll; /* Default for mobile */
    z-index: 1;
    font-family: var(--sb-font-family);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.sb-container *,
.sb-container *::before,
.sb-container *::after {
    box-sizing: inherit;
}

.sb-content-wrapper {
    width: 100%;
    max-width: 960px;
    text-align: center;
}

/* CORRECTED Category Tag, now using ORANGE */
.sb-category-tag {
    display: inline-block;
    background-color: var(--sb-accent-orange);
    color: var(--sb-text-light);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5em 1.25em;
    border-radius: 50px; /* Pill shape */
    margin-bottom: calc(var(--sb-spacing-unit) * 1.5);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.sb-brands-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sb-spacing-unit);
    text-align: left;
}

/* Card style, perfected */
.sb-brand-item {
    display: flex;
    align-items: left !important;
	justify-content: left;
    border-radius: var(--sb-border-radius);
    padding: 0.75rem var(--sb-spacing-unit); /* Balanced padding */
    transition: box-shadow var(--sb-transition), transform var(--sb-transition), border-color var(--sb-transition);
    background-color: var(--sb-card-bg);
    border: 1px solid var(--sb-card-border-color);
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);

    /* --- FIX: No underlines, ever --- */
    text-decoration: none !important;

    /* Animation setup */
    opacity: 0;
    transform: translateY(20px);
}

.sb-brand-item.sb-in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow 0.3s, border-color 0.3s;
}

.sb-brand-item:hover,
.sb-brand-item:focus {
    box-shadow: var(--sb-card-hover-shadow);
    transform: translateY(-5px);
    border-color: var(--sb-accent-green);
    outline: none;
    text-decoration: none !important;
}

.sb-brand-name {
    font-size: 0.8rem !important;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 !important;
    color: var(--sb-text-dark);
    display: flex;
    align-items: center;

    /* --- FIX: No underlines, ever --- */
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
}

/* --- NEW: Green Icon Integration --- */
.sb-brand-name::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.75em;
    background-color: var(--sb-accent-green);
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.22-1.05-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/></svg>');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.22-1.05-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/></svg>');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Tablet Upwards */
@media (min-width: 600px) {
    .sb-brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--sb-spacing-unit) * 1.5);
    }
}

/* Desktop Upwards */
@media (min-width: 1024px) {
    .sb-container {
        background-attachment: fixed; /* Parallax effect for desktop */
		min-height: 400px; /* Set a specific, smaller height for desktop */
		background-size: auto 140vh; /* Add this line to tame the zoom */
    }
    .sb-brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}