/* All rules are opt-in. Empty palettes keep the established appearance. */
html[data-custom-palette] body { background: var(--palette-pageBackground, var(--paper)); color: var(--palette-textColor, var(--ink)); }
html[data-custom-palette] .topbar { background: var(--palette-headerBackground, var(--header-background)); color: var(--palette-headerText, var(--on-primary)); }
html[data-custom-palette] .restaurant-mark small { color: var(--palette-headerText, var(--header-muted)); }
html[data-custom-palette] .language-option:not(.active) { color: var(--palette-headerText, var(--header-muted)); }
html[data-custom-palette] .mark-monogram { color: var(--palette-headerText, var(--gold-soft)); }
html[data-custom-palette] .hero { background: var(--palette-heroBackground, var(--brand-primary)); color: var(--palette-heroText, var(--on-primary)); }
html[data-custom-palette] .hero-content > p:not(.eyebrow) { color: var(--palette-heroText, color-mix(in srgb, var(--on-primary) 82%, transparent)); }
html[data-custom-palette] .hero .eyebrow, html[data-custom-palette] .hero .demo-pill { color: var(--palette-heroText, var(--gold-soft)); }
html[data-hero-palette] .hero-overlay { background: linear-gradient(90deg, color-mix(in srgb, var(--palette-heroBackground) 95%, transparent) 0%, color-mix(in srgb, var(--palette-heroBackground) 74%, transparent) 42%, color-mix(in srgb, var(--palette-heroBackground) 20%, transparent) 78%), linear-gradient(0deg, color-mix(in srgb, var(--palette-heroBackground) 72%, transparent), transparent 58%); }
html[data-custom-palette] .primary-button, html[data-custom-palette] .apply-button, html[data-custom-palette] .more-info-link { background: var(--palette-buttonBackground, var(--button-color)); color: var(--palette-buttonText, var(--on-button)); }
html[data-custom-palette] .primary-button:hover, html[data-custom-palette] .apply-button:hover, html[data-custom-palette] .apply-button:focus-visible, html[data-custom-palette] .more-info-link:hover { background: var(--palette-buttonHover, var(--button-hover)); color: var(--palette-buttonText, var(--on-button)); }
html[data-custom-palette] .language-option.active, html[data-custom-palette] .language-option.active:hover, html[data-custom-palette] .language-option.active:focus-visible { background: var(--palette-languageActiveBackground, var(--palette-buttonBackground, var(--button-color))); color: var(--palette-languageActiveText, var(--palette-buttonText, var(--on-button))); }
html[data-custom-palette] #open-recommender { background: var(--palette-recommendBackground, var(--palette-buttonBackground, var(--button-color))); color: var(--palette-recommendText, var(--palette-buttonText, var(--on-button))); }
html[data-custom-palette] #open-recommender:hover, html[data-custom-palette] #open-recommender:focus-visible { background: var(--palette-recommendHover, var(--palette-buttonHover, var(--button-hover))); color: var(--palette-recommendText, var(--palette-buttonText, var(--on-button))); }
html[data-custom-palette] .glass-filter-button, html[data-custom-palette] .glass-filter-button:hover { background: var(--palette-glassBackground, white); color: var(--palette-glassText, var(--green-900)); border-color: var(--palette-glassText, var(--palette-borderColor, var(--gold))); }
html[data-custom-palette] .glass-filter-button[aria-pressed="true"], html[data-custom-palette] .glass-filter-button[aria-pressed="true"]:hover, html[data-custom-palette] .glass-filter-button[aria-pressed="true"]:focus-visible { background: var(--palette-glassActiveBackground, var(--palette-categoryActiveBackground, var(--button-color))); color: var(--palette-glassActiveText, var(--palette-categoryActiveText, var(--on-button))); border-color: var(--palette-glassActiveBackground, var(--palette-categoryActiveBackground, var(--button-color))); }
html[data-custom-palette] .filter-button { color: var(--palette-buttonBackground, var(--button-color)); border-color: var(--palette-buttonBackground, var(--button-color)); }
html[data-custom-palette] .search-box > span[aria-hidden] { color: var(--palette-buttonBackground, var(--button-color)); }
html[data-custom-palette] .secondary-button { color: var(--palette-glassText, var(--green-900)); background: var(--palette-glassBackground, var(--green-100)); }
html[data-custom-palette] .sheet-header h2, html[data-custom-palette] #filter-form legend { color: var(--palette-headingColor, var(--green-950)); }
html[data-custom-palette] .view-detail { color: var(--palette-menuLinkColor, var(--button-color)); }
html[data-custom-palette] .wine-card:hover .view-detail, html[data-custom-palette] .wine-card:focus-visible .view-detail { color: var(--palette-menuLinkHover, var(--button-hover)); }
html[data-custom-palette] .section-heading h2, html[data-custom-palette] .recommender h2 { color: var(--palette-headingColor, var(--green-950)); }
html[data-custom-palette] .result-count { color: var(--palette-mutedText, var(--muted)); }
html[data-custom-palette] .category-tab { background: var(--palette-categoryBackground, white); color: var(--palette-categoryText, var(--muted)); border-color: var(--palette-borderColor, var(--line)); }
html[data-custom-palette] .category-tab.active { background: var(--palette-categoryActiveBackground, var(--button-color)); color: var(--palette-categoryActiveText, var(--on-button)); border-color: var(--palette-categoryActiveBackground, var(--button-color)); }
html[data-custom-palette] .wine-card, html[data-custom-palette] .modal { background: var(--palette-cardBackground, white); }
html[data-custom-palette] .modal { color: var(--palette-cardText, var(--ink)); }
html[data-custom-palette] .meta-box, html[data-custom-palette] .detail-price { background: var(--palette-cardBackground, var(--paper)); }
html[data-custom-palette] .meta-box small, html[data-custom-palette] .detail-price span, html[data-custom-palette] .recommender-head > p:last-child { color: var(--palette-cardText, var(--muted)); }
html[data-custom-palette] .modal .recommender h2, html[data-custom-palette] .recommendation-result h3 { color: var(--palette-cardTitle, var(--green-950)); }
html[data-custom-palette] .wine-card, html[data-custom-palette] .search-box, html[data-custom-palette] .detail-price, html[data-custom-palette] .wine-recognition { border-color: var(--palette-borderColor, var(--line)); }
html[data-custom-palette] .wine-card h3, html[data-custom-palette] .detail-band h2 { color: var(--palette-cardTitle, var(--green-950)); }
html[data-custom-palette] .wine-card p, html[data-custom-palette] .wine-origin, html[data-custom-palette] .detail-copy { color: var(--palette-cardText, var(--muted)); }
html[data-custom-palette] .detail-band { background: var(--palette-cardBackground, var(--wash)); }
html[data-custom-palette] .wine-price strong, html[data-custom-palette] .detail-price strong { color: var(--palette-priceColor, var(--green-950)); }
html[data-custom-palette] .wine-price.glass strong, html[data-custom-palette] .detail-price.glass strong { color: var(--palette-priceColor, var(--gold-deep)); }
html[data-custom-palette] .wine-price.store strong, html[data-custom-palette] .wine-price.takeaway strong, html[data-custom-palette] .detail-price.store strong, html[data-custom-palette] .detail-price.takeaway strong { color: var(--palette-priceColor, var(--button-color)); }
html[data-custom-palette] footer { background: var(--palette-footerBackground, var(--brand-primary)); color: var(--palette-footerText, color-mix(in srgb, var(--on-primary) 82%, transparent)); }
html[data-footer-palette] footer a { color: var(--palette-footerText); }
@media (max-width: 590px) {
  html[data-hero-palette] .hero-overlay { background: linear-gradient(0deg, color-mix(in srgb, var(--palette-heroBackground) 95%, transparent) 0%, color-mix(in srgb, var(--palette-heroBackground) 74%, transparent) 64%, color-mix(in srgb, var(--palette-heroBackground) 20%, transparent) 100%); }
}