/* Generated — theme colour layer for the public site. See App\Support\WebsiteThemes. */
.fx-colors .bg-yellow-50:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 8%,#fff)}
.fx-colors .hover\:bg-yellow-50\/5:hover:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,color-mix(in srgb,var(--fx-primary) 8%,#fff) 5%,transparent)}
.fx-colors .bg-yellow-100:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 15%,#fff)}
.fx-colors .border-yellow-100:not([data-fx-keep],[data-fx-keep] *){border-color:color-mix(in srgb,var(--fx-primary) 15%,#fff)}
.fx-colors .bg-yellow-200:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 30%,#fff)}
.fx-colors .hover\:bg-yellow-200:hover:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 30%,#fff)}
.fx-colors .border-yellow-200:not([data-fx-keep],[data-fx-keep] *){border-color:color-mix(in srgb,var(--fx-primary) 30%,#fff)}
.fx-colors .border-yellow-200\/20:not([data-fx-keep],[data-fx-keep] *){border-color:color-mix(in srgb,color-mix(in srgb,var(--fx-primary) 30%,#fff) 20%,transparent)}
.fx-colors .focus\:ring-yellow-200:focus:not([data-fx-keep],[data-fx-keep] *){--tw-ring-color:color-mix(in srgb,var(--fx-primary) 30%,#fff)}
.fx-colors .hover\:border-yellow-300:hover:not([data-fx-keep],[data-fx-keep] *){border-color:color-mix(in srgb,var(--fx-primary) 50%,#fff)}
.fx-colors .bg-yellow-400:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 82%,#fff)}
.fx-colors .hover\:bg-yellow-400:hover:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 82%,#fff)}
.fx-colors .text-yellow-400:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 82%,#fff)}
.fx-colors .hover\:border-yellow-400:hover:not([data-fx-keep],[data-fx-keep] *){border-color:color-mix(in srgb,var(--fx-primary) 82%,#fff)}
.fx-colors .from-yellow-400:not([data-fx-keep],[data-fx-keep] *){--tw-gradient-from:color-mix(in srgb,var(--fx-primary) 82%,#fff) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in srgb,color-mix(in srgb,var(--fx-primary) 82%,#fff) 0%,transparent) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.fx-colors .bg-yellow-500:not([data-fx-keep],[data-fx-keep] *){background-color:var(--fx-primary)}
.fx-colors .bg-yellow-500\/10:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 10%,transparent)}
.fx-colors .group:hover .group-hover\:bg-yellow-500:not([data-fx-keep],[data-fx-keep] *){background-color:var(--fx-primary)}
.fx-colors .text-yellow-500:not([data-fx-keep],[data-fx-keep] *){color:var(--fx-primary)}
.fx-colors .text-yellow-500\/50:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 50%,transparent)}
.fx-colors .hover\:text-yellow-500:hover:not([data-fx-keep],[data-fx-keep] *){color:var(--fx-primary)}
.fx-colors .border-yellow-500:not([data-fx-keep],[data-fx-keep] *){border-color:var(--fx-primary)}
.fx-colors .border-yellow-500\/30:not([data-fx-keep],[data-fx-keep] *){border-color:color-mix(in srgb,var(--fx-primary) 30%,transparent)}
.fx-colors .hover\:border-yellow-500:hover:not([data-fx-keep],[data-fx-keep] *){border-color:var(--fx-primary)}
.fx-colors .focus\:border-yellow-500:focus:not([data-fx-keep],[data-fx-keep] *){border-color:var(--fx-primary)}
.fx-colors .ring-yellow-500:not([data-fx-keep],[data-fx-keep] *){--tw-ring-color:var(--fx-primary)}
.fx-colors .ring-yellow-500\/20:not([data-fx-keep],[data-fx-keep] *){--tw-ring-color:color-mix(in srgb,var(--fx-primary) 20%,transparent)}
.fx-colors .focus\:ring-yellow-500:focus:not([data-fx-keep],[data-fx-keep] *){--tw-ring-color:var(--fx-primary)}
.fx-colors .shadow-yellow-500\/10:not([data-fx-keep],[data-fx-keep] *){--tw-shadow-color:color-mix(in srgb,var(--fx-primary) 10%,transparent);--tw-shadow:var(--tw-shadow-colored)}
.fx-colors .shadow-yellow-500\/20:not([data-fx-keep],[data-fx-keep] *){--tw-shadow-color:color-mix(in srgb,var(--fx-primary) 20%,transparent);--tw-shadow:var(--tw-shadow-colored)}
.fx-colors .shadow-yellow-500\/30:not([data-fx-keep],[data-fx-keep] *){--tw-shadow-color:color-mix(in srgb,var(--fx-primary) 30%,transparent);--tw-shadow:var(--tw-shadow-colored)}
.fx-colors .focus-visible\:outline-yellow-500:focus-visible:not([data-fx-keep],[data-fx-keep] *){outline-color:var(--fx-primary)}
.fx-colors .from-yellow-500\/5:not([data-fx-keep],[data-fx-keep] *){--tw-gradient-from:color-mix(in srgb,var(--fx-primary) 5%,transparent) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in srgb,var(--fx-primary) 0%,transparent) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.fx-colors .via-yellow-500:not([data-fx-keep],[data-fx-keep] *){--tw-gradient-to:color-mix(in srgb,var(--fx-primary) 0%,transparent) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--fx-primary) var(--tw-gradient-via-position),var(--tw-gradient-to)}
.fx-colors .hover\:bg-yellow-600:hover:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 85%,#000)}
.fx-colors .text-yellow-600:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 85%,#000)}
.fx-colors .hover\:text-yellow-600:hover:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 85%,#000)}
.fx-colors .group:hover .group-hover\:text-yellow-600:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 85%,#000)}
.fx-colors .text-yellow-700:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 70%,#000)}
.fx-colors .text-yellow-800:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 55%,#000)}
.fx-colors .bg-brand-50:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 8%,#fff)}
.fx-colors .bg-brand-300:not([data-fx-keep],[data-fx-keep] *){background-color:color-mix(in srgb,var(--fx-primary) 50%,#fff)}
.fx-colors .bg-yellow-400:not([data-fx-keep],[data-fx-keep] *){color:var(--fx-on-primary)}
.fx-colors .hover\:bg-yellow-400:hover:not([data-fx-keep],[data-fx-keep] *){color:var(--fx-on-primary)}
.fx-colors .bg-yellow-500:not([data-fx-keep],[data-fx-keep] *){color:var(--fx-on-primary)}
.fx-colors .group:hover .group-hover\:bg-yellow-500:not([data-fx-keep],[data-fx-keep] *){color:var(--fx-on-primary)}
.fx-colors .hover\:bg-yellow-600:hover:not([data-fx-keep],[data-fx-keep] *){color:var(--fx-on-primary)}
.fx-colors .bg-gray-900 .text-yellow-400:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-gray-900 .text-yellow-500:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-gray-900 .text-yellow-600:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-gray-800 .text-yellow-400:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-gray-800 .text-yellow-500:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-gray-800 .text-yellow-600:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-gray-950 .text-yellow-400:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-gray-950 .text-yellow-500:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-gray-950 .text-yellow-600:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors footer .text-yellow-400:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors footer .text-yellow-500:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors footer .text-yellow-600:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-black .text-yellow-400:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-black .text-yellow-500:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}
.fx-colors .bg-black .text-yellow-600:not([data-fx-keep],[data-fx-keep] *){color:color-mix(in srgb,var(--fx-primary) 62%,#fff)}

/* Fonts — the precompiled stylesheet hard-codes Figtree/Georgia, so the theme fonts loaded
   in <head> were never used. */
.fx-fonts, .fx-fonts .font-sans { font-family: var(--fx-font-sans) !important; }
.fx-fonts .font-serif, .fx-fonts h1, .fx-fonts h2, .fx-fonts h3 { font-family: var(--fx-font-serif); }
/* Kept areas (bottom bar, sticky basket, cart and checkout) keep the original fonts. */
.fx-fonts [data-fx-keep] { font-family: Figtree, ui-sans-serif, system-ui, sans-serif; }
.fx-fonts [data-fx-keep] .font-sans { font-family: Figtree, ui-sans-serif, system-ui, sans-serif !important; }
.fx-fonts [data-fx-keep] .font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
.fx-fonts [data-fx-keep] h1:not(.font-serif), .fx-fonts [data-fx-keep] h2:not(.font-serif), .fx-fonts [data-fx-keep] h3:not(.font-serif) { font-family: inherit; }

/* Surfaces: page background, tinted panels, footer and dark bands take the theme colours. */
body.fx-tint { background-color: var(--fx-bg); }
.fx-tint main .bg-gray-50:not([data-fx-keep],[data-fx-keep] *) { background-color: var(--fx-bg); }
.fx-tint main .bg-brand-50:not([data-fx-keep],[data-fx-keep] *) { background-color: var(--fx-soft); }
.fx-tint footer.bg-gray-900 { background-color: var(--fx-footer); }
.fx-tint main section.bg-gray-900 { background-color: var(--fx-footer); }
.fx-tint main section.bg-gray-900 .bg-gray-800 { background-color: color-mix(in srgb, var(--fx-footer) 82%, #fff); }
.fx-tint main section.bg-gray-900 .border-gray-700 { border-color: color-mix(in srgb, var(--fx-footer) 65%, #fff); }
.fx-tint main section.bg-gray-900 .from-gray-900 { --tw-gradient-from: var(--fx-footer) var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }