/*
 * Opt-in bridge between grouped Single Brand Collections and Casa WWTS.
 * Existing accepted Brand/Casa rendering remains untouched unless the Brand
 * preview setting or ?grouped_by=brand explicitly activates these rules.
 */

.wwts-rf-collections-grouped--zone-preview .wwts-rf-grouped-nav__button,
.wwts-rf-collections-grouped--zone-preview .wwts-rf-slider-pagination,
.wwts-rf-collections-grouped--zone-preview .wwts-rf-grouped-controls,
.wwts-rf-collections-grouped--zone-preview .wwts-rf-progressive-loader,
.wwts-rf-collections-grouped--zone-preview .wwts-rf-progressive-sentinel {
    display: none !important;
}

/* The normal grouped rail reserves fixed side grid columns for prev/next
 * controls. Preview mode hides those controls, so collapse the frame to one
 * column instead of letting the rail auto-place into the former left-control
 * column after JavaScript adds the preview class. */
.wwts-rf-collections-grouped--zone-preview .wwts-rf-grouped-rail-frame {
    grid-template-columns: minmax(0, 1fr);
}

/* In the 3 + Casa-link preview the rail has no side controls, so give the
 * image row a balanced adaptive inset and spacing between cards. */
.wwts-rf-collections-grouped--zone-preview .wwts-rf-slider-shell[data-wwts-rf-grouped-zone="1"] .wwts-rf-collections--grouped-rail {
    grid-column: 1 / -1;
    padding: clamp(5px, 2vw, 20px);
    gap: clamp(10px, 1.5vw, 20px) !important;
}

.wwts-brand-zone-casa-link {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.wwts-brand-zone-casa-link__anchor {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    color: #5a514c;
    font-family: var(--wwts-font-text, Roboto, sans-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-decoration: none;
    text-transform: uppercase;
}

.wwts-brand-zone-casa-link__anchor::after {
    content: '→';
    font-size: 18px;
    line-height: 1;
    transition: transform 180ms ease;
}

.wwts-brand-zone-casa-link__anchor:hover::after,
.wwts-brand-zone-casa-link__anchor:focus-visible::after {
    transform: translateX(4px);
}

.wwts-brand-zone-casa-link__anchor:focus-visible {
    outline: 2px solid var(--wwts-color-accent, #9b8264);
    outline-offset: 4px;
}

.wwts-home-grouped-brands {
    display: grid;
    width: 100%;
    gap: clamp(56px, 7vw, 96px);
}

.wwts-home-brand-group {
    min-width: 0;
}

.wwts-home-brand-group__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(90, 81, 76, 0.14);
}

.wwts-home-brand-group__title {
    margin: 0;
    font-family: var(--wwts-font-primary, 'Cormorant Garamond', serif);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 500;
    line-height: 1;
    color: #4a382c;
}

.wwts-home-brand-group__title a {
    color: inherit;
    text-decoration: none;
}

.wwts-home-brand-group__title a:hover,
.wwts-home-brand-group__title a:focus-visible {
    color: #9b8264;
}

.wwts-home-brand-group__title a:focus-visible {
    outline: 2px solid var(--wwts-color-accent, #9b8264);
    outline-offset: 4px;
}

.wwts-home-brand-group__count {
    flex: 0 0 auto;
    color: rgba(90, 81, 76, 0.66);
    font-family: var(--wwts-font-text, Roboto, sans-serif);
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wwts-home-brand-group__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.wwts-home-grouped-card {
    height: 100%;
}

.wwts-home-grouped-card .wwts-card__title h3 {
    margin: 0;
}

@media (max-width: 1024px) {
    .wwts-home-brand-group__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .wwts-brand-zone-casa-link {
        justify-content: flex-start;
        margin-top: 16px;
    }

    .wwts-home-brand-group__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
    }

    .wwts-home-brand-group__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}