/* Palette layer: maps every coloured surface of the homepage and the site chrome onto the
   --p-* tokens from inc/seeds-v3-palettes.php. Each surface also sets its text colour from the
   computed --p-*-on value; type and ink inside inherit it (currentColor). Loaded last. */

/* Type and ink follow the surface they sit on. */
html .h-display { color: inherit; }
html .h-tab { color: inherit; }
html .h-tab::before { background: currentColor; }
html .h-tab::after { background: var(--p-tabline); }
html button:is(.h-ann__btn, .h-iconbtn, .h-chevbtn, .h-tab):is(:hover, :focus) { color: inherit; }
html .h-chevbtn { color: inherit; }
html .h-pause, html button.h-pause:is(:hover, :focus) { color: inherit; opacity: .7; }
html .h-dot, html button.h-dot:is(:hover, :focus) { background: currentColor; opacity: .2; }
html .h-dot.is-active, html button.h-dot.is-active:is(:hover, :focus) { background: currentColor; opacity: .6; }
html .h-usps__dots span { border-color: currentColor; }
html .h-usps__dots span.is-active { background: currentColor; }

/* Announcement bar, header, drawer, dropdowns */
html .h-ann { background: var(--p-ann); color: var(--p-ann-on); }
html .h-ann__btn, html .h-ann__track a { color: inherit !important; }
html .h-header { --head-ink: var(--p-head-on); background: var(--p-head); }
html .h-header--over { background: transparent; --head-ink: #000; }
html .home .h-header--over { --head-ink: var(--hero-ink, var(--p-hero1-on)); }
html .h-header--over.is-solid, html .h-header--over.is-open { background: var(--p-head); --head-ink: var(--p-head-on); }
html .h-header--contained .h-header__inner { background: color-mix(in srgb, var(--p-head) 82%, #fff); }
html .h-header :is(.h-nav__item > a, .h-nav__item > button, .h-iconbtn) { color: var(--head-ink) !important; transition: color .3s ease; }
html .h-header .h-nav__item > a { background-image: linear-gradient(currentColor, currentColor); }
html .h-header .h-burger span:not(.screen-reader-text) { background: var(--head-ink); }
html .h-cart__count { background: var(--head-ink); color: var(--p-head); }
html .h-cart__count[data-count="0"] { background: transparent; color: var(--head-ink); border-color: var(--head-ink); }
html .h-drop { background: var(--p-head); }
html .h-drop a { color: var(--p-head-on) !important; background-image: linear-gradient(currentColor, currentColor); }
html .h-drawer { background: var(--p-head); color: var(--p-head-on); }
html .h-drawer :is(a, summary) { color: inherit !important; }

/* Buttons and accents */
html .h-btn { background: var(--p-btn); color: var(--p-btn-on) !important; }
html .h-btn--pink, html button.h-btn--pink:is(:hover, :focus) { background: var(--p-btn2); color: var(--p-btn2-on) !important; }
html .h-btn--mint, html button.h-btn--mint:is(:hover, :focus) { background: var(--p-btn3); color: var(--p-btn3-on) !important; }
html .h-btn--black, html button.h-btn--black:is(:hover, :focus) { background: #000; color: #fff !important; }
html button.h-btn:not(.h-btn--pink):not(.h-btn--mint):not(.h-btn--black):is(:hover, :focus) { background: var(--p-btn); color: var(--p-btn-on); }
html .h-round--red, html button.h-round--red:is(:hover, :focus) { background: var(--p-accent); color: var(--p-accent-on); }
html .h-card__add { background: var(--p-btn); color: var(--p-btn-on) !important; }
html .h-card__sale { background: var(--p-accent); color: var(--p-accent-on); }

/* Homepage surfaces */
html .h-slide:nth-child(1) { --slide-bg: var(--p-hero1); color: var(--p-hero1-on); }
html .h-slide:nth-child(2) { --slide-bg: var(--p-hero2); color: var(--p-hero2-on); }
html .h-slide:nth-child(3) { --slide-bg: var(--p-hero3); color: var(--p-hero3-on); }
html .h-slide:nth-child(4) { --slide-bg: var(--p-hero4); color: var(--p-hero4-on); }
html .h-hero__controls { color: var(--hero-ink, var(--p-hero1-on)); }
@media (max-width: 999px) { html .h-hero__controls { background: var(--p-featured); color: var(--p-featured-on); } }
html .h-ratingbar { background: var(--p-rating); color: var(--p-rating-on); }
html .h-ratingbar .h-stars { color: inherit; }
html .h-featured { background: var(--p-featured); color: var(--p-featured-on); }
html .h-card--promo { background: var(--p-promo); color: var(--p-promo-on); }
html .h-revolution { background: var(--p-revolution); color: var(--p-revolution-on); }
html .h-reviews { background: var(--p-reviews); color: var(--p-reviews-on); }
html .h-support { background: var(--p-support); color: var(--p-support-on); }
html .h-support__blob { background: var(--p-blob); }
html .h-story { background: var(--p-story); color: var(--p-story-on); }
html .h-story__art { background: var(--p-storyart); }
html .h-collections { background: var(--p-tiles); color: var(--p-tiles-on); }
html .h-usps { background: var(--p-usps); color: var(--p-usps-on); }

/* Footer, club box, closing claim */
html .h-footer { background: var(--p-footer); color: var(--p-footer-on); }
html .h-footer a { color: inherit !important; }
html .h-footer__social a { border-color: currentColor; }
html .h-footer__col a { background-image: linear-gradient(currentColor, currentColor); }
html .h-club { background: var(--p-club); color: var(--p-club-on); border-color: var(--p-club-on); }
html .h-club a { color: inherit !important; }
html .h-bigtext { background: var(--p-bigtext); color: var(--p-bigtext-on); }
html .h-bigtext p { -webkit-text-stroke-color: currentColor; }
html .h-bigtext .h-lineflower > g:first-child { fill: var(--p-bigtext); stroke: currentColor; }
html .h-bigtext .h-lineflower > g:nth-child(2) { fill: currentColor; }
html .h-bigtext .h-lineflower > path { stroke: currentColor; }

/* Switcher (local only) */
.h-palette { position: fixed; z-index: 2000; left: 16px; bottom: 16px; font-family: var(--h-font); color: #000; }
.h-palette__toggle { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 2px solid #000; border-radius: 99px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font: 700 14px var(--h-font); color: #000; cursor: pointer; }
html button.h-palette__toggle:is(:hover, :focus) { background: #fff; color: #000; }
.h-palette__panel { position: absolute; left: 0; bottom: 54px; display: grid; gap: 6px; width: 260px; padding: 14px; border: 2px solid #000; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .2); }
.h-palette__panel[hidden] { display: none; }
.h-palette__title { margin: 0 0 4px !important; font-weight: 700; font-size: 15px; }
.h-palette__title small { display: block; font-weight: 400; font-size: 11px; color: #666; }
.h-palette__item, html button.h-palette__item:is(:hover, :focus) { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid #E5E0D6; border-radius: 12px; background: #fff; color: #000; text-align: left; font: 600 14px var(--h-font); cursor: pointer; }
.h-palette__item[aria-pressed="true"] { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.h-palette__dots { display: flex; }
.h-palette__dots i { width: 18px; height: 18px; margin-right: -5px; border: 1.5px solid #000; border-radius: 50%; }

/* White surfaces keep their own dark type, whatever the section around them uses. */
html .h-card:not(.h-card--promo), html .h-tile, html .h-palette { color: #000; }
html .h-review { color: #fff; }

/* Logo colours: overrides the mascot's fill attributes everywhere (logo, pouch labels, mascots). */
:root .seeds-mascot__fill .seeds-mascot__petals { fill: var(--logo-petal); }
:root .seeds-mascot__head .seeds-mascot__face { fill: var(--logo-face); }
:root .seeds-mascot__cheeks { fill: var(--logo-cheek); }
:root .h-wm__fill { color: var(--logo-wm); }
.h-palette__logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.h-palette__logo, html button.h-palette__logo:is(:hover, :focus) { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 1.5px solid #E5E0D6; border-radius: 12px; background: #fff; color: #000; font: 600 11px var(--h-font); cursor: pointer; }
.h-palette__logo[aria-pressed="true"] { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.h-palette__flower { width: 26px; height: 26px; border: 2px solid #000; border-radius: 50%; background: radial-gradient(circle, var(--b) 0 42%, #000 42% 50%, var(--a) 50%); box-shadow: 0 0 0 2px var(--c); }
.h-palette__panel { max-height: calc(100vh - 90px); overflow-y: auto; }