/* ================================================================================
   MY BEERS TEASER (homepage section)
   Scoped with #myBeersTeaser to avoid leak.
   Sits above home-hero, below partner-carousel.
   ================================================================================ */

/* Section wrapper — outside the card, matches homepage pattern */
.my-beers-teaser-section {
    margin: var(--space-lg) var(--space-lg) var(--space-md);
}

/* Section header — sits outside the card like Recent Snaps / Beer Reviews */
.my-beers-teaser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-xs);
}

.my-beers-teaser-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.my-beers-teaser-icon {
    font-size: var(--text-lg);
}

.my-beers-teaser-see-all {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-link);
    cursor: pointer;
}

/* Card — now just the content, no inner header */
#myBeersTeaser {
    padding: var(--space-lg);
    background: var(--bg-elevated-card);
    border: 1px solid var(--border-elevated-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px var(--elevated-card-glow);
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition);
}

#myBeersTeaser:active {
    transform: scale(0.99);
}

#myBeersTeaser .my-beers-teaser-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-md);
}

#myBeersTeaser .my-beers-teaser-stat {
    text-align: center;
    flex: 1;
}

#myBeersTeaser .my-beers-teaser-stat-num {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

#myBeersTeaser .my-beers-teaser-stat-label {
    font-size: var(--text-xxs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    font-weight: 700;
    margin-top: var(--space-xxs);
}

#myBeersTeaser .my-beers-teaser-stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border-light);
    flex-shrink: 0;
}

/* Cards row — horizontal scroll of mini beer cards */
#myBeersTeaser .my-beers-teaser-cards {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--space-lg) * -1);
    padding: 0 var(--space-lg);
}

#myBeersTeaser .my-beers-teaser-cards::-webkit-scrollbar {
    display: none;
}

#myBeersTeaser .my-beers-teaser-card {
    flex-shrink: 0;
    width: 90px;
    padding: var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

#myBeersTeaser .my-beers-teaser-card-rating {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    background: rgba(0, 0, 0, 0.4);
    color: var(--amber);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    font-size: var(--text-xxs);
    font-weight: 700;
}

#myBeersTeaser .my-beers-teaser-card-rating.logged-only {
    background: var(--bg-purple);
    color: var(--text-purple);
}

#myBeersTeaser .my-beers-teaser-card-vessel {
    width: 32px;
    height: 44px;
    margin: var(--space-xs) 0;
}

#myBeersTeaser .my-beers-teaser-card-name {
    font-size: var(--text-xxs);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}

#myBeersTeaser .my-beers-teaser-card-brewery {
    font-size: var(--text-xxs);
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Empty state */
#myBeersTeaser .my-beers-teaser-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    text-align: center;
}

#myBeersTeaser .my-beers-teaser-empty-icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
    opacity: 0.7;
}

#myBeersTeaser .my-beers-teaser-empty-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    max-width: 240px;
    line-height: 1.4;
}

/* ================================================================================
   MY BEERS OVERLAY (full-screen)
   Scoped with #myBeersOverlay to keep it isolated from the teaser styles above.
   ================================================================================ */

#myBeersOverlay {
    background: var(--bg-home-page);
}

#myBeersOverlay .my-beers-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 0 var(--space-3xl);
}

#myBeersOverlay .my-beers-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--text-white);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    font-size: var(--text-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============ INTRO ============ */
#myBeersOverlay .my-beers-intro {
    padding: var(--space-md);
}

#myBeersOverlay .my-beers-intro-title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--text-primary);
}

#myBeersOverlay .my-beers-intro-sub {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-xxs);
}

/* ============ HERO SPLIT ============ */
#myBeersOverlay .my-beers-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    padding: 0 var(--space-md) var(--space-md);
}

#myBeersOverlay .my-beers-hero-card {
    background: var(--bg-elevated-card);
    border: 1px solid var(--border-elevated-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    position: relative;
}

#myBeersOverlay .my-beers-hero-num {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

#myBeersOverlay .my-beers-hero-label {
    font-size: var(--text-xxs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    font-weight: 700;
}

#myBeersOverlay .my-beers-hero-sub {
    font-size: var(--text-xxs);
    color: var(--text-muted);
    margin-top: var(--space-xxs);
}

/* ============ AI INSIGHT ============ */
#myBeersOverlay .my-beers-insight {
    margin: var(--space-sm) var(--space-lg) var(--space-md);
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(118, 75, 162, 0.06) 100%);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform var(--transition);
}

#myBeersOverlay .my-beers-insight:active {
    transform: scale(0.99);
}

#myBeersOverlay .my-beers-insight-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

#myBeersOverlay .my-beers-insight-icon {
    font-size: var(--text-xl);
}

#myBeersOverlay .my-beers-insight-body {
    flex: 1;
}

#myBeersOverlay .my-beers-insight-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

#myBeersOverlay .my-beers-insight-text {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}

#myBeersOverlay .my-beers-insight-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

#myBeersOverlay .my-beers-insight-cta {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xxs);
    color: var(--text-link);
    font-weight: 600;
}

#myBeersOverlay .my-beers-insight-pager {
    display: flex;
    gap: var(--space-xs);
}

#myBeersOverlay .my-beers-insight-pager span {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-circle);
    background: var(--text-muted);
    opacity: 0.4;
}

#myBeersOverlay .my-beers-insight-pager span.active {
    background: var(--text-purple);
    opacity: 1;
}

/* ============ STATS GRID ============ */
#myBeersOverlay .my-beers-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    padding: 0 var(--space-lg) var(--space-sm);
}

#myBeersOverlay .my-beers-stat {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: var(--space-md);
}

#myBeersOverlay .my-beers-stat-label {
    font-size: var(--text-xxs);
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
    font-weight: 700;
}

#myBeersOverlay .my-beers-stat-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

#myBeersOverlay .my-beers-stat-sub {
    font-size: var(--text-xxs);
    color: var(--text-muted);
    margin-top: var(--space-xxs);
}

/* ============ SECTION HEADERS ============ */
#myBeersOverlay .my-beers-section-header {
    padding: var(--space-md) var(--space-lg) var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: nowrap;
}

#myBeersOverlay .my-beers-section-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
    flex-shrink: 1;
}

/* Wraps the sort dropdown + "Show all" link as a single right-aligned group.
   flex-shrink:0 + flex-wrap:nowrap stops them dropping to a second line
   when the title or screen is narrow. */
#myBeersOverlay .my-beers-section-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    flex-wrap: nowrap;
}

#myBeersOverlay .my-beers-section-link {
    background: none;
    border: none;
    color: var(--text-link);
    font-size: var(--text-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

/* Sort dropdown — native <select> styled to look like a small pill button.
   Custom chevron via background-image since native arrow is ugly.
   max-width caps the field so it can't shove "Show all" off the row. */
#myBeersOverlay .my-beers-sort-select {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    padding: 5px var(--space-lg) 5px var(--space-sm);
    max-width: 140px;
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23999' d='M5 7L1.5 3.5h7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    transition: border-color var(--transition-fast);
}

#myBeersOverlay .my-beers-sort-select:hover {
    border-color: var(--border-purple);
}

/* ============ STYLES SECTION ============ */
#myBeersOverlay .my-beers-styles-card {
    margin: 0 var(--space-lg) var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

#myBeersOverlay .my-beers-styles-tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

#myBeersOverlay .my-beers-styles-tab {
    padding: 5px var(--space-md);
    background: var(--bg-section);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    border-radius: 14px;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-fast);
}

#myBeersOverlay .my-beers-styles-tab.active {
    background: var(--purple);
    color: var(--text-white);
    border-color: var(--purple);
}

#myBeersOverlay .my-beers-styles-empty {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-md) 0;
}

#myBeersOverlay .my-beers-style-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-light);
}

#myBeersOverlay .my-beers-style-row:last-child {
    border-bottom: none;
}

#myBeersOverlay .my-beers-style-row:hover {
    background: var(--bg-section);
    margin: 0 calc(var(--space-sm) * -1);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

#myBeersOverlay .my-beers-style-row.expanded {
    background: var(--bg-section);
    margin: 0 calc(var(--space-sm) * -1);
    padding: var(--space-sm);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: none;
}

#myBeersOverlay .my-beers-style-vessel {
    width: 28px;
    height: 38px;
    flex-shrink: 0;
}

#myBeersOverlay .my-beers-style-info {
    flex: 1;
    min-width: 0;
}

#myBeersOverlay .my-beers-style-name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
}

#myBeersOverlay .my-beers-style-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

#myBeersOverlay .my-beers-style-bar-wrap {
    width: 60px;
    height: 6px;
    background: var(--bg-muted);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

#myBeersOverlay .my-beers-style-bar-fill {
    height: 100%;
    border-radius: 3px;
}

#myBeersOverlay .my-beers-style-rating {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--amber);
    min-width: 30px;
    text-align: right;
}

#myBeersOverlay .my-beers-style-detail {
    margin: 0 calc(var(--space-sm) * -1);
    padding: 0 var(--space-md) var(--space-md);
    background: var(--bg-section);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    display: none;
}

#myBeersOverlay .my-beers-style-detail.show {
    display: block;
}

#myBeersOverlay .my-beers-style-detail-beers {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    padding: var(--space-sm) 0;
    scrollbar-width: none;
    cursor: pointer;
}

#myBeersOverlay .my-beers-style-detail-beers::-webkit-scrollbar {
    display: none;
}

#myBeersOverlay .my-beers-style-detail-beer {
    flex-shrink: 0;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    min-width: 90px;
    text-align: center;
    border: 1px solid var(--border-light);
}

#myBeersOverlay .my-beers-style-detail-beer-vessel {
    width: 24px;
    height: 32px;
    margin: 0 auto;
}

#myBeersOverlay .my-beers-style-detail-beer-name {
    font-size: var(--text-xxs);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 2px;
}

#myBeersOverlay .my-beers-style-detail-beer-rating {
    font-size: var(--text-xxs);
    color: var(--amber);
}

/* Try-next variant row */
#myBeersOverlay .my-beers-style-trynext-btn {
    flex: 0 0 auto;
    padding: 6px var(--space-md);
    background: var(--purple);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

/* ============ RECS ============ */
#myBeersOverlay .my-beers-recs {
    margin: 0 var(--space-lg) var(--space-md);
}

#myBeersOverlay .my-beers-recs-empty {
    background: var(--bg-card);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

#myBeersOverlay .my-beers-recs-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

#myBeersOverlay .my-beers-recs-eyebrow {
    font-size: var(--text-xxs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-purple);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

#myBeersOverlay .my-beers-recs-beer {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

#myBeersOverlay .my-beers-recs-vessel {
    width: 56px;
    height: 76px;
    flex-shrink: 0;
}

#myBeersOverlay .my-beers-recs-info {
    flex: 1;
}

#myBeersOverlay .my-beers-recs-name {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

#myBeersOverlay .my-beers-recs-brewery {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 2px;
}

#myBeersOverlay .my-beers-recs-style {
    display: inline-block;
    padding: 2px var(--space-sm);
    background: var(--bg-section);
    border-radius: var(--radius-sm);
    font-size: var(--text-xxs);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

#myBeersOverlay .my-beers-recs-why {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--border-light);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

#myBeersOverlay .my-beers-recs-why strong {
    color: var(--text-primary);
}

#myBeersOverlay .my-beers-recs-actions {
    margin-top: var(--space-md);
    display: flex;
    gap: var(--space-xs);
}

#myBeersOverlay .my-beers-recs-btn {
    flex: 1;
    padding: var(--space-sm);
    border: 1px solid var(--border-light);
    background: var(--bg-section);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

#myBeersOverlay .my-beers-recs-btn.primary {
    background: var(--purple);
    color: var(--text-white);
    border-color: var(--purple);
}

#myBeersOverlay .my-beers-recs-pager {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
    margin-top: var(--space-md);
}

#myBeersOverlay .my-beers-recs-pager-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: var(--text-muted);
    opacity: 0.3;
    cursor: pointer;
    transition: all var(--transition-fast);
}

#myBeersOverlay .my-beers-recs-pager-dot.active {
    background: var(--text-purple);
    opacity: 1;
    width: 18px;
    border-radius: 3px;
}

/* ============ MODE TOGGLE (segmented control) ============
   Same pattern as GF/All toggle in results overlay. Three options,
   mutually exclusive. Sliding thumb effect via .active state. */
#myBeersOverlay .my-beers-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    padding: 3px;
    margin-bottom: var(--space-md);
}

#myBeersOverlay .my-beers-mode-option {
    padding: 6px var(--space-sm);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast), color var(--transition-fast);
}

#myBeersOverlay .my-beers-mode-option.active {
    background: var(--purple);
    color: var(--text-white);
}

#myBeersOverlay .my-beers-mode-option:not(.active):hover {
    color: var(--text-primary);
}

/* ============ TROPHY WALL ============ */
#myBeersOverlay .my-beers-trophy {
    padding: 0 var(--space-lg) var(--space-md);
}

#myBeersOverlay .my-beers-trophy-filters {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    margin-bottom: var(--space-md);
    padding-bottom: 2px;
    scrollbar-width: none;
}

#myBeersOverlay .my-beers-trophy-filters::-webkit-scrollbar {
    display: none;
}

#myBeersOverlay .my-beers-trophy-filter {
    flex-shrink: 0;
    padding: 5px var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    border-radius: 14px;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

#myBeersOverlay .my-beers-trophy-filter.active {
    background: var(--purple);
    color: var(--text-white);
    border-color: var(--purple);
}

#myBeersOverlay .my-beers-trophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

#myBeersOverlay .my-beers-trophy-cell {
    aspect-ratio: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

/* Style-tinted background wash — a subtle vertical gradient at the top
   of each cell that hints at the beer style. Soft enough to be ambient
   garnish, distinct enough to add chromatic rhythm down the wall.
   The ::before pseudo-element sits behind the cell content (z-index 0)
   while text/vessel/heart sit on top (their own positioning + z-index 1
   on the heart already handles this).
   data-style attribute is set by my-beers.js based on the beer's style. */
#myBeersOverlay .my-beers-trophy-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.18;
    background: linear-gradient(180deg, var(--mb-style-tint, transparent) 0%, transparent 70%);
    pointer-events: none;
}

/* All cell children sit above the tint */
#myBeersOverlay .my-beers-trophy-cell > * {
    position: relative;
    z-index: 1;
}

/* Style colour mappings — each maps to a CSS variable that --mb-style-tint
   reads. Grouped by style family so closely-related styles share a tint:
   stouts/porters get dark brown, pales/IPAs get amber, sours/fruit get pink,
   wheats get pale gold, lagers get straw, dark lagers get red-brown. */
#myBeersOverlay .my-beers-trophy-cell[data-style-family="stout"]    { --mb-style-tint: #5c3317; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="porter"]   { --mb-style-tint: #6b3e1d; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="dark"]     { --mb-style-tint: #8b4513; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="ipa"]      { --mb-style-tint: #d97706; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="pale"]     { --mb-style-tint: #f59e0b; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="lager"]    { --mb-style-tint: #fbbf24; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="pilsner"]  { --mb-style-tint: #facc15; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="wheat"]    { --mb-style-tint: #fde68a; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="sour"]     { --mb-style-tint: #ec4899; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="fruit"]    { --mb-style-tint: #f472b6; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="saison"]   { --mb-style-tint: #eab308; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="belgian"]  { --mb-style-tint: #c2410c; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="amber"]    { --mb-style-tint: #c2410c; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="brown"]    { --mb-style-tint: #92400e; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="red"]      { --mb-style-tint: #b91c1c; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="cider"]    { --mb-style-tint: #ca8a04; }
#myBeersOverlay .my-beers-trophy-cell[data-style-family="other"]    { --mb-style-tint: #8b5cf6; }

#myBeersOverlay .my-beers-trophy-cell:hover {
    transform: translateY(-2px);
    border-color: var(--border-purple);
}

#myBeersOverlay .my-beers-trophy-cell.logged-only {
    border-style: dashed;
    opacity: 0.6;
}

#myBeersOverlay .my-beers-trophy-cell-rating {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    background: rgba(0, 0, 0, 0.4);
    color: var(--amber);
    border-radius: var(--radius-sm);
    padding: 1px 4px;
    font-size: var(--text-xxs);
    font-weight: 700;
}

/* Heart top-left — mirror of the rating top-right. Tap to favourite.
   Default outline grey, .is-favourite state filled red with pop animation. */
#myBeersOverlay .my-beers-trophy-cell-heart {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-circle);
    cursor: pointer;
    z-index: 1;
    font-size: 11px;
    color: var(--text-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

#myBeersOverlay .my-beers-trophy-cell-heart:hover {
    transform: scale(1.15);
}

#myBeersOverlay .my-beers-trophy-cell-heart.is-favourite {
    color: #ef4444;
}

/* Pop animation when toggled on — feels tactile and rewarding. */
#myBeersOverlay .my-beers-trophy-cell-heart.just-favourited {
    animation: mb-heart-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mb-heart-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

#myBeersOverlay .my-beers-trophy-cell.logged-only .my-beers-trophy-cell-rating {
    background: var(--bg-purple);
    color: var(--text-purple);
}

/* Vessel is now the dominant element in each cell — roughly 60% of the
   cell height. Lets the shape variety (pint vs tankard vs bottle vs can)
   be the primary visual signal as you scan the wall, with text as
   secondary identifier underneath. */
#myBeersOverlay .my-beers-trophy-cell-vessel {
    width: 52px;
    height: 72px;
    flex-shrink: 0;
}

/* Brewery line — small, muted, sits above the beer name.
   Tighter margin since the vessel now takes most of the cell. */
#myBeersOverlay .my-beers-trophy-cell-brewery {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-xxs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.15;
}

/* Beer name — slightly more prominent than brewery */
#myBeersOverlay .my-beers-trophy-cell-beer {
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.15;
}

#myBeersOverlay .my-beers-trophy-empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

#myBeersOverlay .my-beers-trophy-empty-icon {
    font-size: var(--text-2xl);
    opacity: 0.5;
    margin-bottom: var(--space-sm);
}

#myBeersOverlay .my-beers-trophy-empty-text {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ============ MAP PREVIEW ============ */
#myBeersOverlay .my-beers-map-section {
    padding: 0 var(--space-lg) var(--space-md);
}

#myBeersOverlay .my-beers-map-preview {
    height: 160px;
    background:
        radial-gradient(circle at 30% 40%, rgba(139, 92, 246, 0.4) 0%, transparent 25%),
        radial-gradient(circle at 60% 60%, rgba(245, 158, 11, 0.4) 0%, transparent 22%),
        radial-gradient(circle at 75% 35%, rgba(16, 185, 129, 0.4) 0%, transparent 22%),
        radial-gradient(circle at 45% 75%, rgba(118, 75, 162, 0.4) 0%, transparent 22%),
        linear-gradient(135deg, #2a3050 0%, #1e2235 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition);
}

#myBeersOverlay .my-beers-map-preview:hover {
    transform: scale(1.01);
}

#myBeersOverlay .my-beers-map-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
    color: var(--text-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#myBeersOverlay .my-beers-map-overlay-text,
#myBeersOverlay .my-beers-map-overlay-cta {
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Light-mode map preview — softer background */
:root:not([data-theme="dark"]) #myBeersOverlay .my-beers-map-preview {
    background:
        radial-gradient(circle at 30% 40%, rgba(139, 92, 246, 0.4) 0%, transparent 25%),
        radial-gradient(circle at 60% 60%, rgba(245, 158, 11, 0.4) 0%, transparent 22%),
        radial-gradient(circle at 75% 35%, rgba(16, 185, 129, 0.4) 0%, transparent 22%),
        radial-gradient(circle at 45% 75%, rgba(118, 75, 162, 0.4) 0%, transparent 22%),
        linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

#myBeersOverlay .my-beers-bottom-spacer {
    height: var(--space-4xl);
}

/* ================================================================================
   MY BEERS — BEER DETAIL PANEL
   Slide-up sheet on top of the overlay. Backdrop dims the overlay behind it.
   Scoped within #myBeersOverlay so it can't leak to other pages.
   ================================================================================ */

.my-beers-detail-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1005;
    opacity: 0;
    pointer-events: none;
    display: none;
    transition: opacity var(--transition);
}

.my-beers-detail-backdrop.show {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
.my-beers-detail-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--nav-height);
    z-index: 1006;
    background: var(--bg-card);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    transition: transform var(--transition), visibility 0s linear var(--transition);
    flex-direction: column;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);

    /* Hidden by default. Visibility + transform together: visibility
       handles "really gone" (avoids the bleed-through bug where the panel's
       containing block is shorter than expected and translateY(100%) doesn't
       clear it). Transform handles the slide animation when shown. */
    display: none;
    transform: translateY(100%);
    max-height: 75vh;
}

.my-beers-detail-panel.show {
    display: flex;
    transform: translateY(0);
    transition: transform var(--transition);
}

.my-beers-detail-handle {
    width: 40px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
    margin: var(--space-sm) auto var(--space-xs);
    flex-shrink: 0;
}

.my-beers-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.my-beers-detail-header-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.my-beers-detail-close {
    background: var(--bg-section);
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-beers-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    -webkit-overflow-scrolling: touch;
}

/* ============ DETAIL CONTENT BLOCKS ============ */

.my-beers-detail-hero {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    margin-bottom: var(--space-lg);
}

.my-beers-detail-hero-vessel {
    width: 64px;
    height: 86px;
    flex-shrink: 0;
}

.my-beers-detail-hero-info {
    flex: 1;
    min-width: 0;
}

.my-beers-detail-hero-name {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.my-beers-detail-hero-brewery {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-xxs);
}

.my-beers-detail-hero-style {
    display: inline-block;
    padding: 2px var(--space-sm);
    background: var(--bg-section);
    border-radius: var(--radius-sm);
    font-size: var(--text-xxs);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.my-beers-detail-hero-rating {
    text-align: right;
    flex-shrink: 0;
}

.my-beers-detail-hero-rating-num {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--amber);
    line-height: 1;
}

.my-beers-detail-hero-rating-of {
    font-size: var(--text-xxs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pill row — quick facts: count, formats, last seen */
.my-beers-detail-facts {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}

.my-beers-detail-fact {
    background: var(--bg-section);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    padding: 4px var(--space-md);
    font-size: var(--text-xxs);
    color: var(--text-secondary);
    font-weight: 600;
}

.my-beers-detail-fact strong {
    color: var(--text-primary);
    margin-right: 4px;
}

/* ============ FORMAT ICONS ROW ============
   Sits at the top of the detail panel under the hero. Shows all four
   formats (tap/cask/bottle/can) as tappable icons:
   - Rated: format icon coloured, rating shown below (e.g. "🛢️ 4.8")
   - Unrated: greyed out + "Rate" label. Tap to open rate-beer pre-filled
     with this beer + this format.
   Discovery surface for un-rated formats — gives users a clear nudge to
   complete their picture of a beer. */
.my-beers-detail-formats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}

.my-beers-detail-format {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-xs);
    background: var(--bg-section);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    min-height: 64px;
}

/* Rated state — coloured icon, amber rating, full opacity */
.my-beers-detail-format.is-rated {
    background: var(--bg-card);
    border-color: var(--border-medium);
}

.my-beers-detail-format.is-rated:hover {
    transform: translateY(-2px);
    border-color: var(--border-purple);
}

/* Unrated state — dimmed, dashed border to signal "tap to fill in" */
.my-beers-detail-format.is-unrated {
    opacity: 0.55;
    border-style: dashed;
}

.my-beers-detail-format.is-unrated:hover {
    opacity: 1;
    border-color: var(--text-purple);
    background: var(--bg-purple);
}

.my-beers-detail-format-icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: var(--space-xxs);
}

.my-beers-detail-format-label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    font-weight: 700;
    margin-bottom: 2px;
}

/* Rating number for rated formats — small amber chip-style */
.my-beers-detail-format-rating {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--amber);
    line-height: 1;
}

/* "Rate" CTA for unrated formats */
.my-beers-detail-format-cta {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-purple);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}

/* CTA block — "Rate it" for logged-but-not-rated beers */
.my-beers-detail-cta {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(118, 75, 162, 0.06) 100%);
    border: 1px solid var(--border-purple);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.my-beers-detail-cta-icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-xs);
}

.my-beers-detail-cta-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.my-beers-detail-cta-text {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.my-beers-detail-cta-btn {
    background: var(--purple);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

/* Section headers within the panel */
.my-beers-detail-section-title {
    font-size: var(--text-xxs);
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

/* Activity rows — chronological list of logs + reviews */
.my-beers-detail-activity {
    margin-bottom: var(--space-lg);
}

.my-beers-detail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.my-beers-detail-row:last-child {
    border-bottom: none;
}

.my-beers-detail-row-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: var(--bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.my-beers-detail-row-icon.review {
    background: var(--bg-purple);
}

.my-beers-detail-row-body {
    flex: 1;
    min-width: 0;
}

.my-beers-detail-row-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.my-beers-detail-row-sub {
    font-size: var(--text-xxs);
    color: var(--text-muted);
    margin-top: 2px;
}

.my-beers-detail-row-comment {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    padding: var(--space-sm);
    background: var(--bg-section);
    border-radius: var(--radius-sm);
    font-style: italic;
    line-height: 1.4;
}

.my-beers-detail-row-rating {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--amber);
    flex-shrink: 0;
    align-self: center;
}

/* Empty state if detail somehow has nothing to show */
.my-beers-detail-empty {
    text-align: center;
    padding: var(--space-2xl) 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* ================================================================================
   MY BEERS — FULL MAP SUB-OVERLAY
   Slides in from the right (or fades) on top of the My Beers overlay.
   Uses Leaflet for the actual map.
   ================================================================================ */

#myBeersOverlay .my-beers-map-full {
    position: fixed;
    inset: 0;
    z-index: 8;
    background: var(--bg-home-page);
    display: none;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

#myBeersOverlay .my-beers-map-full.show {
    display: flex;
}

#myBeersOverlay .my-beers-map-full-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--header-gradient);
    color: var(--text-white);
    flex-shrink: 0;
}

#myBeersOverlay .my-beers-map-full-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--text-white);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    font-size: var(--text-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#myBeersOverlay .my-beers-map-full-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-md);
    font-weight: 700;
}

#myBeersOverlay .my-beers-map-full-spacer {
    width: 36px;
}

#myBeersOverlay .my-beers-map-full-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#myBeersOverlay .my-beers-map-full-map {
    height: 320px;
    width: 100%;
    background: var(--bg-muted);
}

#myBeersOverlay .my-beers-map-full-map .leaflet-container {
    height: 100%;
    width: 100%;
    background: var(--bg-muted);
}

/* Stats strip beneath the map */
#myBeersOverlay .my-beers-map-full-stats {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-xs);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    text-align: center;
}

#myBeersOverlay .my-beers-map-full-stats strong {
    color: var(--text-primary);
    font-weight: 700;
}

#myBeersOverlay .my-beers-map-full-venues {
    padding: var(--space-md) var(--space-lg) var(--space-4xl);
}

/* ============ VENUE CARDS ============ */
#myBeersOverlay .my-beers-venue-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

#myBeersOverlay .my-beers-venue-card:hover {
    transform: translateY(-1px);
    border-color: var(--border-purple);
}

#myBeersOverlay .my-beers-venue-card.highlighted {
    border-color: var(--text-purple);
    box-shadow: 0 0 0 2px var(--bg-purple);
}

#myBeersOverlay .my-beers-venue-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

#myBeersOverlay .my-beers-venue-pin {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    background: var(--amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 800;
    color: #1a1a2e;
    flex-shrink: 0;
}

#myBeersOverlay .my-beers-venue-pin.diamond {
    background: var(--purple);
    color: var(--text-white);
}

#myBeersOverlay .my-beers-venue-pin.gold {
    background: var(--gold);
    color: #1a1a2e;
}

#myBeersOverlay .my-beers-venue-info {
    flex: 1;
    min-width: 0;
}

#myBeersOverlay .my-beers-venue-name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#myBeersOverlay .my-beers-venue-sub {
    font-size: var(--text-xxs);
    color: var(--text-muted);
    margin-top: 2px;
}

#myBeersOverlay .my-beers-venue-beers {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

#myBeersOverlay .my-beers-venue-beer {
    background: var(--bg-section);
    border-radius: var(--radius-sm);
    padding: 3px var(--space-sm);
    font-size: var(--text-xxs);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

#myBeersOverlay .my-beers-venue-beer-rating {
    color: var(--amber);
    font-weight: 700;
}

/* Empty state */
#myBeersOverlay .my-beers-map-full-empty {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    color: var(--text-muted);
}

#myBeersOverlay .my-beers-map-full-empty-icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
    opacity: 0.5;
}

#myBeersOverlay .my-beers-map-full-empty-text {
    font-size: var(--text-sm);
}

/* Custom Leaflet marker — matches the venue tier colours */
.mb-map-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--amber);
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.mb-map-marker.diamond {
    background: var(--purple);
    color: white;
}

.mb-map-marker.gold {
    background: var(--gold);
}

/* ================================================================================
   HOMEPAGE LAYOUT TWEAK
   Shrinks the partner carousel slightly when My Beers teaser is present.
   Keeps the GF discount banner visible but no longer the biggest thing
   on the page — that's what My Beers is now for.
   ================================================================================ */

#homeOverlay .partner-carousel {
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-sm);
}

#homeOverlay .partner-heading {
    margin-bottom: var(--space-sm);
}

#homeOverlay .partner-heading-icon {
    font-size: var(--text-md);
}

#homeOverlay .partner-heading-title {
    font-size: var(--text-sm);
}

#homeOverlay .partner-heading-sub {
    font-size: var(--text-xxs);
}

/* Tighten the slide cards too so the whole component drops in height */
#homeOverlay .partner-slides {
    min-height: 80px;
}

/* ============================================================
   AMBIENT BACKGROUND — floating beers + amber glow
   Sits behind everything in the overlay. Pure decoration.
   pointer-events: none on everything so taps pass through.
   ============================================================ */

/* Amber wash at the top — beer-warm gradient that fades into the dark
   theme. Anchored to the top of the scrolling content so it's visible
   when the user first opens the overlay. */
#myBeersOverlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 400px;
    background:
        radial-gradient(ellipse at 30% 0%, rgba(251, 191, 36, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 10%, rgba(245, 158, 11, 0.12) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Floating beer layer — six glasses drifting up at different speeds
   and starting positions. Subtle opacity, slow drift, ambient feel.
   pointer-events: none so they never block taps. */
.my-beers-ambient {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.my-beers-float {
    position: absolute;
    font-size: 32px;
    opacity: 0.08;
    animation: my-beers-drift linear infinite;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
}

.my-beers-float-1 { left:  8%; animation-duration: 28s; animation-delay:  0s; font-size: 28px; }
.my-beers-float-2 { left: 22%; animation-duration: 35s; animation-delay: -8s; font-size: 36px; }
.my-beers-float-3 { left: 42%; animation-duration: 26s; animation-delay: -15s; font-size: 30px; }
.my-beers-float-4 { left: 60%; animation-duration: 32s; animation-delay: -4s; font-size: 34px; }
.my-beers-float-5 { left: 78%; animation-duration: 30s; animation-delay: -20s; font-size: 28px; }
.my-beers-float-6 { left: 90%; animation-duration: 38s; animation-delay: -12s; font-size: 32px; }

@keyframes my-beers-drift {
    0% {
        transform: translateY(110vh) translateX(0) rotate(-8deg);
        opacity: 0;
    }
    10% {
        opacity: 0.10;
    }
    50% {
        transform: translateY(50vh) translateX(20px) rotate(4deg);
    }
    90% {
        opacity: 0.10;
    }
    100% {
        transform: translateY(-15vh) translateX(-10px) rotate(-6deg);
        opacity: 0;
    }
}

/* Respect reduced motion — kill the drift animation, just leave them
   sitting in place at low opacity as static garnish. */
@media (prefers-reduced-motion: reduce) {
    .my-beers-float {
        animation: none;
        opacity: 0.06;
    }
}