/* ============================================================================================
   storefront-themes.css — buyer storefront "style switcher" themes.

   CONTRACT (owned by StorefrontStyle.cs / StorefrontChrome.razor / StorefrontIndex.razor):
   every buyer storefront page is wrapped in
       <div class="weed-shop weed-style-{id}" style="--weed-accent:{companyHex};">
   where {id} is one of: classic | midnight | haze.

   "classic" is today's look and MUST stay pixel-identical — this file contains ZERO selectors
   that target `.weed-style-classic` (or `.weed-shop` alone). Every rule below is scoped under
   `.weed-style-midnight` or `.weed-style-haze`, so a classic-themed page never matches anything
   here, no matter how this file grows.

   TECHNIQUE: rather than chase every individual MudBlazor component class, most of the work is
   done by re-declaring MudBlazor's own themable custom properties (--mud-palette-*,
   --mud-typography-*-family, --mud-elevation-*, --mud-default-borderradius) on the
   `.weed-style-{id}` wrapper div. Custom properties inherit down the DOM tree, so every
   MudPaper/MudButton/MudChip/MudAlert/MudTable/MudLink rendered *inside* the wrapper picks up
   the new values automatically (MudBlazor's own CSS is written entirely in terms of these
   vars — see MudBlazor.min.css) — no !important arms race, no chasing every color/variant
   permutation by hand. On top of that backbone we layer:
     - a handful of surgical class overrides where MudBlazor's default class doesn't route
       through a var we want to touch in isolation (e.g. `.mud-alert-text-*`, so we don't have
       to recolor severity colors used elsewhere), or where a shared var would over-apply
       (e.g. MudLink defaults to Color.Primary, but "haze" wants links violet and primary
       buttons coral — see the .mud-link override in that section);
     - explicit rules for this app's own plain (non-MudBlazor) `weed-*` CSS classes in
       app.css, which are plain HTML controls (buttons/inputs/selects) kept outside MudBlazor
       so the static-SSR storefront can submit real GET/POST forms without a Blazor circuit;
     - one `!important` call site (`.mud-appbar` background/text) because app.css itself pins
       the app bar's background to `--weed-accent` with `!important` for per-company theming,
       so beating it requires the same weapon — everything else wins on ordinary specificity
       since this stylesheet loads after app.css (see App.razor).

   The age-gate interstitial (AgeGateInterstitial.razor) renders `weed-shop weed-agegate` — no
   `weed-style-*` class — so it is structurally unreachable from this file and needs no
   exclusion of its own.
   ============================================================================================ */


/* ============================================================================================
   MIDNIGHT — premium dark luxury (Cookies / STIIIZY / MedMen)

   Backdrop #0b0d0c, surface #171b18, elevated hover #1d221e, hairline #2a2f2b.
   Text #ece9e2 / muted #a39f94. Signature accent: gold #d9b25f (hover #e6c15c), used for every
   Color.Primary surface (buttons, links, active states, prices) since the per-company green
   accent takes a back seat in this theme. Headings set in Fraunces. Radius 10px, hairline
   borders, hover = lift + gold border + soft black shadow.
   ============================================================================================ */

/* ---- Design tokens (scoped custom properties — see file header) -------------------------- */
.weed-style-midnight {
    background: #0b0d0c;
    min-height: 100dvh;

    /* Surfaces */
    --mud-palette-background: #0b0d0c;
    --mud-palette-background-gray: #1d221e;
    --mud-palette-surface: #171b18;
    --mud-palette-gray-light: #2a2f2b;

    /* Text */
    --mud-palette-text-primary: #ece9e2;
    --mud-palette-text-secondary: #a39f94;
    --mud-palette-text-disabled: #5c584f;
    --mud-palette-action-default: #a39f94;
    --mud-palette-action-default-hover: rgba(255, 255, 255, .06);
    --mud-palette-action-disabled: #4a463f;

    /* Hairlines. lines-inputs is kept one shade lighter than the general hairline so an
       outlined chip/input border reads as a deliberate edge, not invisible against surface. */
    --mud-palette-divider: #2a2f2b;
    --mud-palette-divider-light: #2a2f2b;
    --mud-palette-lines-default: #2a2f2b;
    --mud-palette-lines-inputs: #3a403b;
    --mud-palette-table-lines: #2a2f2b;
    --mud-palette-table-hover: rgba(255, 255, 255, .05);
    --mud-palette-table-striped: rgba(255, 255, 255, .03);

    /* Gold accent — drives every default MudButton/MudChip/MudLink/MudIcon Color.Primary. */
    --mud-palette-primary: #d9b25f;
    --mud-palette-primary-darken: #c39a4a;
    --mud-palette-primary-lighten: #e6c15c;
    --mud-palette-primary-hover: rgba(217, 178, 95, .15);
    --mud-palette-primary-text: #131511;
    --mud-palette-primary-rgb: 217, 178, 95;

    /* Secondary stays a quiet warm gray — it drives .mud-secondary-text (every muted caption
       in this app) and the "All strains" outlined chip, not a second accent colour. */
    --mud-palette-secondary: #a39f94;
    --mud-palette-secondary-darken: #8f8b81;
    --mud-palette-secondary-lighten: #b7b3a8;
    --mud-palette-secondary-hover: rgba(163, 159, 148, .12);
    --mud-palette-secondary-text: #131511;
    --mud-palette-secondary-rgb: 163, 159, 148;

    /* Resting card shadow (MudPaper/MudAlert/MudButton Elevation="1"); tile/card hover states
       set a bigger, more dramatic shadow explicitly below. */
    --mud-elevation-1: 0 1px 3px rgba(0, 0, 0, .6);

    --mud-default-borderradius: 10px;
}

body:has(.weed-style-midnight) {
    background: #0b0d0c;
}

/* ---- Typography ---------------------------------------------------------------------------
   Headings (incl. product/brand tile names, which use subtitle1/subtitle2) in Fraunces with a
   touch of letter-spacing. Body copy stays the default sans so long text (descriptions,
   compliance warnings) stays easy to read. */
.weed-style-midnight .mud-typography-h1,
.weed-style-midnight .mud-typography-h2,
.weed-style-midnight .mud-typography-h3,
.weed-style-midnight .mud-typography-h4,
.weed-style-midnight .mud-typography-h5,
.weed-style-midnight .mud-typography-h6,
.weed-style-midnight .mud-typography-subtitle1,
.weed-style-midnight .mud-typography-subtitle2 {
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: .01em;
}

/* Section titles ("Shop by brand", "All products", "Recent activity", "Delivery addresses"…)
   are always Typo.h5 in this app — a short, understated gold underline turns that one size
   into a recognisable "chapter marker" instead of just another heading. */
.weed-style-midnight .mud-typography-h5 {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 2px solid #d9b25f;
}

/* ---- App bar --------------------------------------------------------------------------------
   app.css pins the app bar's background to --weed-accent with !important for per-company
   theming; beating that (and giving the bar its own bottom hairline) needs the same weapon. */
.weed-shop.weed-style-midnight .mud-appbar {
    background-color: #101312 !important;
    color: #ece9e2 !important;
    border-bottom: 1px solid rgba(217, 178, 95, .35);
}

/* ---- Location picker (app bar) -------------------------------------------------------------- */
.weed-style-midnight .weed-locinput {
    background: #1d221e;
    color: #ece9e2;
    border: 1px solid #3a403b;
}
.weed-style-midnight .weed-locinput::placeholder {
    color: #7d7a71;
}

/* "Deliver here": gold outline that fills solid gold on hover, distinct from the solid
   content-area buttons below (this one sits directly on the near-black bar). */
.weed-shop.weed-style-midnight .mud-appbar .weed-locbtn {
    background: transparent;
    border: 1px solid #d9b25f;
    color: #d9b25f;
}
.weed-shop.weed-style-midnight .mud-appbar .weed-locbtn:hover {
    background: #d9b25f;
    color: #131511;
}

/* Style switcher (StyleSwitcher.razor) — its own base layout/positioning lives in app.css;
   this only recolours it for the near-black bar it sits in. */
.weed-shop.weed-style-midnight .mud-appbar .weed-style-switcher > summary {
    border-color: rgba(217, 178, 95, .4);
}
.weed-shop.weed-style-midnight .mud-appbar .weed-style-switcher[open] > summary {
    background: rgba(217, 178, 95, .12);
}

/* ---- Buttons (plain-CSS controls: add-to-cart, search/sort/promo submit, pager) -------------- */
.weed-style-midnight .weed-addbtn {
    background: #d9b25f;
    color: #131511;
}
.weed-style-midnight .weed-addbtn:hover {
    filter: none;
    background: #e6c15c;
}

/* Content-area .weed-locbtn: search submit, sort submit, "Apply" promo code — solid gold,
   same family as .weed-addbtn (the app-bar-only outline variant is set above). */
.weed-style-midnight .weed-locbtn {
    background: #d9b25f;
    border: 1px solid #d9b25f;
    color: #131511;
}
.weed-style-midnight .weed-locbtn:hover {
    background: #e6c15c;
    border-color: #e6c15c;
}

.weed-style-midnight .weed-pager-link {
    border-color: #3a403b;
    color: #ece9e2;
}
.weed-style-midnight .weed-pager-link:hover {
    border-color: #d9b25f;
    color: #d9b25f;
}
.weed-style-midnight .weed-pager-current {
    background: #d9b25f;
    border-color: #d9b25f;
    color: #131511;
}

/* MudLink defaults to Color.Primary, so it already reads gold via the --mud-palette-primary
   token above; nothing further needed here. Cart qty +/- links are plain <a>, not MudLink. */
.weed-style-midnight .weed-cartqty a {
    color: #d9b25f;
    border-color: #3a403b;
}

/* .mud-link-disabled already renders in --mud-palette-action-disabled; the plain-CSS danger
   link isn't var-driven, and its hardcoded red (#c62828) drops below readable contrast on a
   near-black background, so it gets a lighter dark-mode red here. */
.weed-style-midnight .weed-linkbtn-danger {
    color: #ef5350;
}

/* ---- Cards & tiles --------------------------------------------------------------------------
   Hairline border + lift-on-hover for every MudPaper (product/brand tiles, cart line list,
   checkout/account panels, favorites cards). */
.weed-style-midnight .mud-paper {
    border: 1px solid #2a2f2b;
}
.weed-style-midnight .weed-producttile,
.weed-style-midnight .weed-brandtile,
.weed-style-midnight .mud-card {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.weed-style-midnight .weed-producttile:hover,
.weed-style-midnight .weed-brandtile:hover,
.weed-style-midnight .mud-card:hover {
    transform: translateY(-2px);
    border-color: #d9b25f;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
/* Product price (Typo.h6, Color.Primary) already reads gold via the primary token above. */

/* ---- Chips ------------------------------------------------------------------------------------
   Outlined default-colour chips (category/unit chips on the product page) already read
   "light text + hairline border" via --mud-palette-text-primary / --mud-palette-lines-inputs
   above. Filled/outlined Color.Primary and Color.Secondary chips already read gold / muted-gray
   via the tokens above too — nothing further to do for chips. */

/* ---- Alerts -----------------------------------------------------------------------------------
   Default (no Variant) MudAlert renders as ".mud-alert-text-{severity}": a pastel tint + darker
   text of that hue. On a near-black page that pastel tint reads as a washed-out light box, so
   each severity actually used on the storefront gets a dark-tinted background with light,
   readable text instead. Icon colour is left on MudBlazor's default (still legible here). */
.weed-style-midnight .mud-alert-text-info {
    background-color: #122a30;
    color: #8ec9e8;
}
.weed-style-midnight .mud-alert-text-success {
    background-color: #12261c;
    color: #8fd6a0;
}
.weed-style-midnight .mud-alert-text-warning {
    background-color: #2a2113;
    color: #e8c17d;
}
.weed-style-midnight .mud-alert-text-error {
    background-color: #2a1616;
    color: #e88a8a;
}
/* CannabisWarnings' full block (footer + product page) is the one Outlined MudAlert on the
   storefront, and it carries the required Part 129 warning copy — this MUST stay legible.
   Outlined uses -darken text on a transparent background, which is unreadably dark on #0b0d0c
   without this override. */
.weed-style-midnight .mud-alert-outlined-info {
    color: #8ec9e8;
    border-color: rgba(142, 201, 232, .4);
}

/* ---- Tables (MudTable / MudSimpleTable: orders table, product spec table, debug panel) ------- */
.weed-style-midnight .mud-table,
.weed-style-midnight .mud-simple-table {
    background-color: #171b18;
    color: #ece9e2;
}
/* Row/cell background, text and hover already flow from --mud-palette-surface /
   --mud-palette-text-primary / --mud-palette-table-lines / --mud-palette-table-hover above. */

/* ---- Forms (plain inputs — see app.css's remark on why these aren't MudTextField) ------------- */
.weed-style-midnight .weed-input,
.weed-style-midnight .weed-qtyselect,
.weed-style-midnight .weed-searchinput {
    background: #1d221e;
    color: #ece9e2;
    border: 1px solid #3a403b;
    border-radius: 8px;
}
.weed-style-midnight .weed-input::placeholder,
.weed-style-midnight .weed-searchinput::placeholder {
    color: #7d7a71;
}
.weed-style-midnight .weed-input:focus,
.weed-style-midnight .weed-searchinput:focus {
    border-color: #d9b25f;
    box-shadow: 0 0 0 2px rgba(217, 178, 95, .25);
}
.weed-style-midnight .weed-qtyselect option {
    background: #1d221e;
    color: #ece9e2;
}
.weed-style-midnight .weed-label {
    color: #c9c5ba;
}
.weed-style-midnight .weed-check input {
    accent-color: #d9b25f;
}

/* ---- Account sub-nav ("Overview / Orders / Favorites / …" chip row) --------------------------- */
.weed-style-midnight .weed-account-tab {
    background: #1d221e;
    border-color: #3a403b;
    color: #ece9e2;
}
.weed-style-midnight .weed-account-tab:hover {
    border-color: #d9b25f;
}
.weed-style-midnight .weed-account-tab-active {
    background: #d9b25f;
    border-color: #d9b25f;
    color: #131511;
}

/* ---- Order progress tracker (checkout confirmation steps + account order-list mini tracker) --- */
.weed-style-midnight .weed-step.done {
    color: #d9b25f;
}
.weed-style-midnight .weed-step.done .mud-icon-root {
    color: #d9b25f !important;
}
.weed-style-midnight .weed-order-step.done .weed-order-dot {
    background: #d9b25f;
}

/* ---- Dropdown menus (StyleSwitcher's own menu; partner store-switcher is out of scope for the
   buyer storefront today, but styled here too in case it's ever themed the same way) ------------ */
.weed-style-midnight .weed-style-menu,
.weed-style-midnight .weed-store-switcher-menu {
    background: #1d221e;
    color: #ece9e2;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
.weed-style-midnight .weed-style-option:hover,
.weed-style-midnight .weed-store-switcher-menu a:hover {
    background: rgba(255, 255, 255, .07);
}
.weed-style-midnight .weed-style-active,
.weed-style-midnight .weed-store-switcher-menu a.weed-store-switcher-active {
    color: #d9b25f;
}

/* ---- Misc small surfaces ----------------------------------------------------------------------- */
/* Favorite heart: hover overlay is a flat black tint in app.css, invisible on a near-black bg. */
.weed-style-midnight .weed-fav-heart:hover {
    background: rgba(255, 255, 255, .08);
}
/* Breadcrumb overflow "…" expander (only appears if crumbs don't fit — rare, but hardcoded
   light-gray in MudBlazor's base CSS otherwise). */
.weed-style-midnight .mud-breadcrumbs-expander {
    background-color: #1d221e;
}
.weed-style-midnight .mud-breadcrumbs-expander:hover {
    background-color: #2a2f2b;
}
/* Non-production in-range-stores debug panel: bump the tint so it stays visible on near-black. */
.weed-style-midnight .weed-debug-panel {
    background: rgba(183, 28, 28, .12);
}


/* ============================================================================================
   HAZE — bright, playful, modern (Eaze / Jane / Weedmaps)

   Backdrop #fbf6ef warm cream, cards #ffffff, text #27212e / muted #71697a. Signature gradient
   coral→violet (#ff6f61 → #8b5cf6): coral is the primary action colour (buttons, filled chips),
   violet is reserved for links. Headings set in Poppins 600. Big radius everywhere — 18px cards,
   999px pills for buttons/search — soft layered shadows, hover = lift.
   ============================================================================================ */

/* ---- Design tokens (scoped custom properties — see file header) -------------------------- */
.weed-style-haze {
    background: #fbf6ef;
    min-height: 100dvh;

    /* Surfaces */
    --mud-palette-background: #fbf6ef;
    --mud-palette-background-gray: #f6efe4;
    --mud-palette-surface: #ffffff;
    --mud-palette-gray-light: #f0e9dd;

    /* Text */
    --mud-palette-text-primary: #27212e;
    --mud-palette-text-secondary: #71697a;
    --mud-palette-text-disabled: #b9b0a5;
    --mud-palette-action-default: #71697a;
    --mud-palette-action-default-hover: rgba(39, 33, 46, .05);
    --mud-palette-action-disabled: #cfc7bb;

    /* Hairlines */
    --mud-palette-divider: #e4dcd2;
    --mud-palette-divider-light: #e4dcd2;
    --mud-palette-lines-default: #e4dcd2;
    --mud-palette-lines-inputs: #e4dcd2;
    --mud-palette-table-lines: #e4dcd2;
    --mud-palette-table-hover: rgba(39, 33, 46, .04);
    --mud-palette-table-striped: rgba(39, 33, 46, .02);

    /* Coral accent — drives every default MudButton/MudChip/MudIcon Color.Primary. MudLink
       defaults to Color.Primary too, but this theme wants links violet, not coral, so that one
       case is carved back out explicitly below. */
    --mud-palette-primary: #ff6f61;
    --mud-palette-primary-darken: #f25b4c;
    --mud-palette-primary-lighten: #ff9086;
    --mud-palette-primary-hover: rgba(255, 111, 97, .14);
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-rgb: 255, 111, 97;

    /* Secondary drives .mud-secondary-text (muted captions) and the "All strains" outlined chip. */
    --mud-palette-secondary: #71697a;
    --mud-palette-secondary-darken: #5c5566;
    --mud-palette-secondary-lighten: #8a8291;
    --mud-palette-secondary-hover: rgba(113, 105, 122, .12);
    --mud-palette-secondary-text: #ffffff;
    --mud-palette-secondary-rgb: 113, 105, 122;

    /* Soft resting shadow (MudPaper/MudAlert/MudButton Elevation="1"); tiles/cards set a bigger
       shadow explicitly on hover below. */
    --mud-elevation-1: 0 2px 8px rgba(39, 33, 46, .06);

    --mud-default-borderradius: 18px;
}

body:has(.weed-style-haze) {
    background: #fbf6ef;
}

/* ---- Typography ---------------------------------------------------------------------------
   Headings (incl. product/brand tile names, subtitle1/subtitle2) in Poppins 600. Body copy
   stays the default sans. */
.weed-style-haze .mud-typography-h1,
.weed-style-haze .mud-typography-h2,
.weed-style-haze .mud-typography-h3,
.weed-style-haze .mud-typography-h4,
.weed-style-haze .mud-typography-h5,
.weed-style-haze .mud-typography-h6,
.weed-style-haze .mud-typography-subtitle1,
.weed-style-haze .mud-typography-subtitle2 {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 600;
}

/* ---- Buttons get the "big rounded look" everywhere, cards stay at 18px (see tokens above) --- */
.weed-style-haze .mud-button-root {
    border-radius: 999px !important;
}

/* ---- App bar --------------------------------------------------------------------------------
   Warm white bar with dark text — the opposite polarity of every other area's colour-filled
   bar, so both the background AND the "color:inherit" text/icons inside it need pinning here.
   A 3px signature gradient strip replaces the flat bottom edge. */
.weed-shop.weed-style-haze .mud-appbar {
    background-color: #fffdf9 !important;
    color: #27212e !important;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #ff6f61, #8b5cf6) 1;
}

/* ---- Location picker (app bar) ----------------------------------------------------------------
   The field is already white-on-white against the new bar background, so it needs its own
   visible border to read as an input at all. */
.weed-style-haze .weed-locinput {
    background: #ffffff;
    color: #27212e;
    border: 1px solid #e4dcd2;
    border-radius: 999px;
}
.weed-style-haze .weed-locinput::placeholder {
    color: #a89fb0;
}

/* Style switcher (StyleSwitcher.razor) — recolour its base app.css chrome for the light bar. */
.weed-shop.weed-style-haze .mud-appbar .weed-style-switcher > summary {
    border-color: rgba(39, 33, 46, .25);
}
.weed-shop.weed-style-haze .mud-appbar .weed-style-switcher[open] > summary {
    background: rgba(39, 33, 46, .06);
}

/* ---- Buttons (plain-CSS controls) -------------------------------------------------------------
   .weed-locbtn is transparent-with-white-border-and-white-text in app.css — built for the old
   colour-filled bar. On this theme's near-white bar (and on the white content area, where
   PromoCodeForm's "Apply" button uses this same class) that's unreadable, so every context gets
   the same solid coral pill treatment; no app-bar-only carve-out needed like midnight's. */
.weed-style-haze .weed-addbtn,
.weed-style-haze .weed-locbtn {
    background: #ff6f61;
    border: 1px solid #ff6f61;
    color: #ffffff;
    border-radius: 999px;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.weed-style-haze .weed-addbtn:hover,
.weed-style-haze .weed-locbtn:hover {
    filter: none;
    background: #f25b4c;
    border-color: #f25b4c;
    transform: scale(1.03);
}

.weed-style-haze .weed-pager-link {
    border-color: #e4dcd2;
    color: #27212e;
    border-radius: 999px;
}
.weed-style-haze .weed-pager-link:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
}
.weed-style-haze .weed-pager-current {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #ffffff;
}

/* MudLink default (Color.Primary) is carved back from coral to violet — see token comment
   above. Explicit non-primary MudLinks (Color.Error "Remove", Color.Secondary "Clear cart",
   etc.) are untouched. */
.weed-style-haze .mud-link.mud-primary-text {
    color: #7c4ddc !important;
}

.weed-style-haze .weed-cartqty a {
    color: #f25b4c;
    border-color: #e4dcd2;
}

/* ---- Cards & tiles -------------------------------------------------------------------------- */
.weed-style-haze .weed-producttile,
.weed-style-haze .weed-brandtile,
.weed-style-haze .mud-card {
    transition: transform .18s ease, box-shadow .18s ease;
}
.weed-style-haze .weed-producttile:hover,
.weed-style-haze .weed-brandtile:hover,
.weed-style-haze .mud-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(39, 33, 46, .14);
}
/* Product price (Typo.h6, Color.Primary) already reads coral via the primary token above. */

/* ---- Chips --------------------------------------------------------------------------------
   Chip pill radius already comes free from MudBlazor's own chip CSS (size-based border-radius,
   not the shared --mud-default-borderradius). The filled "All" category chip and outlined
   primary chips already pick up coral, and the "All strains" secondary chip picks up the muted
   token, via the palette tokens above — the indica/sativa/hybrid/CBD strain chips are left on
   MudBlazor's own tertiary/warning/success/info colours, which already read as playful. */

/* ---- Alerts ---------------------------------------------------------------------------------
   Default pastel-tinted alerts already suit a bright cream page as-is — no override needed. */

/* ---- Tables (MudTable / MudSimpleTable) ------------------------------------------------------ */
.weed-style-haze .mud-table,
.weed-style-haze .mud-simple-table {
    background-color: #ffffff;
    color: #27212e;
}

/* ---- Forms (plain inputs) ---------------------------------------------------------------------
   Search gets a full pill; selects/text inputs get a large-but-not-pill radius. */
.weed-style-haze .weed-input,
.weed-style-haze .weed-qtyselect {
    background: #ffffff;
    color: #27212e;
    border: 1px solid #e4dcd2;
    border-radius: 14px;
}
.weed-style-haze .weed-searchinput {
    background: #ffffff;
    color: #27212e;
    border: 1px solid #e4dcd2;
    border-radius: 999px;
    padding-left: 1.1rem;
}
.weed-style-haze .weed-input::placeholder,
.weed-style-haze .weed-searchinput::placeholder {
    color: #a89fb0;
}
.weed-style-haze .weed-input:focus,
.weed-style-haze .weed-searchinput:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .25);
}
.weed-style-haze .weed-label {
    color: #4a4453;
}
.weed-style-haze .weed-check input {
    accent-color: #ff6f61;
}

/* ---- Account sub-nav ("Overview / Orders / Favorites / …" chip row) --------------------------- */
.weed-style-haze .weed-account-tab {
    background: #ffffff;
    border-color: #e4dcd2;
    color: #27212e;
    border-radius: 999px;
}
.weed-style-haze .weed-account-tab:hover {
    border-color: #8b5cf6;
}
.weed-style-haze .weed-account-tab-active {
    background: linear-gradient(135deg, #ff6f61, #8b5cf6);
    border-color: transparent;
    color: #ffffff;
}

/* ---- Order progress tracker -------------------------------------------------------------------- */
.weed-style-haze .weed-step.done {
    color: #8b5cf6;
}
.weed-style-haze .weed-step.done .mud-icon-root {
    color: #8b5cf6 !important;
}
.weed-style-haze .weed-order-step.done .weed-order-dot {
    background: #8b5cf6;
}

/* ---- Dropdown menus (StyleSwitcher's own menu; partner store-switcher out of scope today) ------ */
.weed-style-haze .weed-style-menu,
.weed-style-haze .weed-store-switcher-menu {
    background: #ffffff;
    color: #27212e;
    box-shadow: 0 12px 32px rgba(39, 33, 46, .16);
}
.weed-style-haze .weed-style-option:hover,
.weed-style-haze .weed-store-switcher-menu a:hover {
    background: rgba(139, 92, 246, .08);
}
.weed-style-haze .weed-style-active,
.weed-style-haze .weed-store-switcher-menu a.weed-store-switcher-active {
    color: #7c4ddc;
}

/* ---- Footer links -------------------------------------------------------------------------- */
.weed-style-haze .mud-link.mud-primary-text:hover {
    color: #5f35b0 !important;
}

/* ---- Misc small surfaces ----------------------------------------------------------------------- */
.weed-style-haze .mud-breadcrumbs-expander {
    background-color: #f0e9dd;
}
.weed-style-haze .mud-breadcrumbs-expander:hover {
    background-color: #e4dcd2;
}
.weed-style-haze .weed-debug-panel {
    background: rgba(183, 28, 28, .05);
}