/*
 * DoorDash Employee Template — Base Stylesheet
 *
 * This file is the code-owned base CSS for the DoorDashEmployee template.
 * It is loaded automatically when the active template is "DoorDashEmployee".
 *
 * Rules here apply to ALL sites using this template.
 * Site-specific overrides belong in Hive Admin (SiteSettings.StyleSheet),
 * NOT here.
 *
 * Scope: major layout, structural, and brand-level styling for Employee.
 */

/* Template identity marker — visible in DevTools for verification */

/*FONTS*/
/*font-family: "TT Norms Pro";
font-family: "TT Norms Pro Condensed";*/
/*src: url("/fonts/TTNorms/TT-Norms-Regular.otf");
*/

/* ============================================================
   DoorDash Employee Store — Custom Theme CSS
   Matches: Figma mockup (desktop)
   Applies on top of: site.min.css, MudBlazor.min.css, bootstrap
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    /* Colours below are read from the Employee Site Figma file as resolved node
       fills, not via style names — the shared style library contains duplicates
       and other clients' palettes, so names there are not reliable. */
    --dd-red: #FF3008;
    --dd-red-dark: #C0392B;
    --dd-maroon: #4C0C3A; /* was #4A1010 — body and label text colour */
    --dd-yellow: #F2D531; /* was #F5C518 — mobile category tile */
    --dd-sky: #80D8FF; /* was #A8D8EA — mobile category tile */
    --dd-pink-bg: #FFE8FE; /* was #F9E8F0 — "Shop the Favorites" band */
    --dd-pink-card: #FCEEF5;
    --dd-white: #FFFFFF;
    /* NOTE: the design specifies #4C0C3A for default text, but the hero headline
       inherits this token and its treatment is still unspecified (finding C5).
       Left as-is deliberately — change it once the hero headline is specced. */
    --dd-text: #1A1A1A;
    --dd-text-muted: #555555;
    --dd-font: 'TT', 'Helvetica Neue', Arial, sans-serif;
    --dd-font-display: 'TT-bold', 'TT', 'Helvetica Neue', Arial, sans-serif;
    --dd-font-condensed: 'TT-Norms-Pro-Condensed', 'TT-bold', Arial, sans-serif;
    --dd-radius-card: 12px;
    --dd-radius-btn: 50px;

    /* Product card quick-add button height — must match .add-to-cart-btn height */
    --product-card-action-height: 45px;
}

/* ── MudBlazor primary palette = DoorDash red ───────────────────
   Every MudBlazor component (MudButton Color="Primary", MudText
   Color="Primary", outlined buttons, ripples…) — including the whole cart and
   checkout — is coloured by the theme SiteLayoutBase.BuildWebStoreTheme builds
   from the site's Hive Admin colour items: `--color-1` is the Primary. When a
   site has no `--color-1` the theme falls back to MudBlazor's Blue (#2196F3),
   which reads as the "Bootstrap primary" blue.
   The proper fix is the data: give every site on this template `--color-1`
   #FF3008 (and `--color-2..5` matching DoorDash Retail) in Hive Admin. This
   block is the safety net so the template still renders on brand when that
   data is missing. `!important` is required: MudThemeProvider emits its own
   `:root { --mud-palette-* }` <style> in the body, later in the cascade than
   this file. Only the primary family is pinned; the rest stays theme-driven. */
:root {
    --mud-palette-primary: var(--dd-red) !important;
    --mud-palette-primary-rgb: 255, 48, 8 !important;
    --mud-palette-primary-text: var(--dd-white) !important;
    --mud-palette-primary-darken: var(--dd-red-dark) !important;
    --mud-palette-primary-lighten: #FF5A3A !important;
    --mud-palette-primary-hover: rgba(255, 48, 8, 0.06) !important;
}

/* ── Button hover: invert ───────────────────────────────────────
   Site-wide, a solid red button turns white on hover, with a red edge and a red
   label. Buttons come from three places on this site and none of them agreed
   before this: Bootstrap's .btn-primary, MudBlazor's filled primary, and a
   handful of hand-rolled ones. Most had no hover at all; .custom-callout-btn had
   its own (a darker red) and is folded into this rule.

   WHY THE EDGE IS A box-shadow AND NOT A BORDER. These buttons disagree about
   whether they already have one: .btn-primary carries a 1px border, MudBlazor's
   filled button and the hand-rolled ones carry none. Giving the border-less ones
   a real border on hover would grow them by 2px in each direction and nudge
   whatever sits beside them, which is very visible on a hover. An inset shadow
   draws the same line, follows the 50px pill radius, and takes up no space, so
   every button inverts in place. border-color goes transparent so the one real
   border does not paint a second line just inside it.

   WHY THE SELECTORS ARE DOUBLED UP (.btn.btn-primary rather than .btn-primary).
   Specificity, and this is load-bearing. site.min.css ships
   `.btn-primary:hover { background-color: #D62400 !important }` at (0,2,0), and
   this file already has `button.add-to-cart-btn { ... !important }` at (0,1,1).
   An !important declaration is only beaten by a MORE SPECIFIC !important one, so
   a plain `.btn-primary:hover` here would tie with Bootstrap's and lose on source
   order. Two classes plus the pseudo-class puts these at (0,3,0), clear of both.

   THE ONE EXCLUSION is .homepage-banner-btn ("Shop Now"). It sits on the red hero
   and is therefore drawn inverted ALREADY - white background, red label - and its
   existing hover fills it red, which is this same inversion read the other way
   round. It matches .mud-button.mud-button-filled-primary, so without the :not()
   this rule would outrank that hover and leave it white-on-white.

   Icon-only buttons are deliberately not included: MudIconButton renders its own
   class family rather than these, and a trash or chevron glyph has no label to
   invert. */
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible,
button.add-to-cart-btn:hover,
button.add-to-cart-btn:focus-visible,
.mud-button.mud-button-filled-primary:not(.homepage-banner-btn):hover,
.mud-button.mud-button-filled-primary:not(.homepage-banner-btn):focus-visible,
.custom-callout-btn:hover,
.custom-callout-btn:focus-visible,
.mobile-drawer-email-btn:hover,
.mobile-drawer-email-btn:focus-visible {
    background-color: var(--dd-white) !important;
    color: var(--dd-red) !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 2px var(--dd-red) !important;
}

/* An icon sitting inside one of these follows the label rather than staying
   white, which would leave it invisible on the inverted face. */
.btn.btn-primary:hover .mud-icon-root,
button.add-to-cart-btn:hover .mud-icon-root,
.mud-button.mud-button-filled-primary:not(.homepage-banner-btn):hover .mud-icon-root,
.btn.btn-primary:hover .bi,
button.add-to-cart-btn:hover .bi {
    color: var(--dd-red) !important;
    fill: var(--dd-red) !important;
}

/* The DM Sans @import that used to sit here was removed. It was placed after a
   style rule, which is invalid per the CSS spec, so the browser discarded it and
   DM Sans never loaded. The --dd-font token now points at the TT family that
   `html body *` was already forcing onto every element anyway. */

/* ── Typefaces ─────────────────────────────────────────────────
   The design calls for TT Norms Pro at weights 400 / 600 / 700 / 900.
   Only the Pro Regular and the (non-Pro) Bold cuts are present in /fonts, so:
     400        → TT Norms Pro Regular   (real cut)
     600 / 700  → TT Norms Bold          (real cut)
     900        → synthesised from Bold
   Requests for 600 and 900 are therefore approximations. To render the design
   exactly, the TT Norms Pro SemiBold and Black cuts need licensing and adding
   here. Previously no face declared a weight at all, so *every* bold on the
   site was browser-synthesised from a single regular cut. */

@font-face {
    font-family: "TT";
    src: url("/fonts/TT-Norms-Pro-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT";
    src: url("/fonts/TT-Norms-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT-bold";
    src: url("/fonts/TT-Norms-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Left at a single unweighted face on purpose. The condensed display headings
   ("SHOP BY CATEGORY", "SHOP THE FAVORITES") already match the design at
   weight 900 via synthesis; declaring a real weight here would change how they
   render and regress an element that currently matches. */
@font-face {
    font-family: "TT-Norms-Pro-Condensed";
    src: url("/fonts/TT-Norms-Pro-Condensed.otf") format("opentype");
    font-display: swap;
}

:root {
    --template-name: "DoorDashEmployee";
}

html body * {
    font-family: "TT";
}

body {
    font-family: var(--dd-font);
    color: var(--dd-text);
    background: var(--dd-white); /* was #FAFAFA — design canvas is white */
}

html, body {
    height: 100%;
}

/* Guard against a horizontal scrollbar caused by header content transitions. */
body {
    overflow-x: hidden;
}

.mud-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Keep the appbar toolbar within the viewport so its children can shrink
   instead of pushing content off the side. */
.main-layout-appbar .mud-toolbar {
    min-width: 0;
    max-width: 100%;
    /* Match the taller appbar so children stay vertically centered and the
       extra height does not leave an empty strip below the toolbar. */
    height: 81px;
    min-height: 81px;
}

.mud-main-content {
    flex: 1;
    /* The fixed appbar is now 81px tall; keep page content clear of it so the
       taller header does not overlap the body. */
    padding-top: 81px !important;
}

.site-footer {
    flex-shrink: 0;
}

/*MAX SPACING!*/
.mud-container-maxwidth-lg {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.mud-container.mud-container-maxwidth-xl.mud-container--gutters.main-layout-content-container.p-3 {
    padding: 0 !important;
}

/* ── Navbar ─────────────────────────────────────────────────── */
/* Brand header (desktop / tablet): white background with the red DoorDash
   logo and red icons/links. The mobile breakpoint (<=850px) below flips this
   to a red background with a white logo and white icons/links. */
.mud-appbar,
.main-layout-appbar {
    background-color: var(--dd-white) !important;
    border-bottom: none;
    box-shadow: none !important; /* design shows a flat header, no elevation */
    height: 81px;
}

/* Logo (desktop / tablet): show the red brand asset as-is, no white filter.
   Height is 22px to match the design, where the horizontal lockup sits at
   191 x 22 inside the 82px nav. At the previous 46px the same SVG rendered
   399px wide — 208px wider than designed — which is what pushed the header
   content past the viewport and forced the early hamburger collapse below.
   If 22px reads too small in review, 32px still leaves ample room: the
   desktop header needs roughly 908px of content at 22px, 995px at 32px. */
.main-layout-logo-img {
    height: 22px !important;
    filter: none;
}

/* Top-level nav links red on the white header. */
/* Top-level nav links. The design sets these in the plum body colour at 15px,
   switching to red on hover.

   Two things were wrong. First, this rule painted them red by default, and the
   hover rule below painted them red as well — so there was no hover state at
   all, just red throughout. Second, a rule further down (.main-menu-inner a)
   already carried the correct #4C0C3A, but lost to this one on specificity,
   so the right value was in the file and never applied.

   Size was also inconsistent: plain category links rendered at 17px while the
   dropdown parents with subcategories (ERGs, Events, Dasher Gear, Merchant
   Materials) rendered at 14px. Both are set to the designed 15px here, which
   is why this rule now covers font-size for all three selectors. */
.main-layout-appbar .main-menu-inner a,
.main-layout-appbar .main-menu-link,
.main-layout-appbar .main-menu-header {
    color: var(--dd-maroon) !important;
    font-size: 15px !important;
}

.main-layout-appbar .main-menu-inner a:hover,
.main-layout-appbar .main-menu-link:hover,
.main-layout-appbar .main-menu-header:hover {
    color: var(--dd-red) !important;
    opacity: 1;
}

/* No underline on hover for anything in the app bar. MudBlazor ships
   `.mud-link.mud-link-underline-hover:hover { text-decoration: underline }`,
   and the header's search, cart, account and logo links all carry that class,
   so they pick up an underline the design does not have. Scoped to the app bar
   so underline-on-hover still works for body copy links elsewhere; the second
   pair of selectors is needed because MudBlazor's own rule is (0,3,0) and would
   otherwise outrank a plain `a:hover`. */
.main-layout-appbar a:hover,
.mud-appbar a:hover,
.main-layout-appbar .mud-link.mud-link-underline-hover:hover,
.mud-appbar .mud-link.mud-link-underline-hover:hover {
    text-decoration: none;
}

/* ── Header icon tooltips ─────────────────────────────────────────
   The design draws these as a white pill with a 1px #FF3008 border and a 12px
   #FF3008 label (12 / 15.36 / 0 tracking), with a small tail pointing up at
   the icon. MudBlazor's default is a dark grey rectangle with white text.

   Scoped to .appbar-tooltip — the class MainLayout already puts on the header
   tooltips — so tooltips elsewhere keep the framework default. The tooltip
   renders in a popover at the document root, not inside the header, so a
   header-based selector would not reach it.

   The tail is drawn with pseudo-elements rather than MudBlazor's own Arrow:
   that triangle inherits the tooltip background but not its border, so it
   would render as a white tail with no red outline. MudBlazor only styles
   ::after when the .mud-tooltip-arrow class is present, and these tooltips are
   declared Arrow="false", so both pseudo-elements are free. Placement is fixed
   to Bottom in the Razor, so the tail's position is deterministic.

   Do NOT set `position` here. These elements are MudBlazor's popovers
   themselves (.mud-popover.mud-tooltip), and they sit directly inside
   #mud-popover-provider — a plain div at the end of <body>. MudBlazor gives
   them `position: absolute` and drives them with inline top/left, parking them
   at -9999px while closed. An earlier version of this rule set
   `position: relative`, which put all four back into normal flow at the foot
   of the document: their boxes then occupied real space, so every open and
   close changed the document height and the whole page reflowed — read at the
   top of the window as the header jumping on hover. Absolute positioning is
   itself a containing block, so the tail pseudo-elements below anchor
   correctly without any position declaration here. */
.mud-tooltip.appbar-tooltip {
    overflow: visible;
    background-color: #FFFFFF;
    color: var(--dd-red);
    border: 1px solid var(--dd-red);
    border-radius: 12px;
    padding: 3px 14px;
    font-family: 'TT', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 15.36px;
    letter-spacing: 0;
    box-shadow: none;
}

.mud-tooltip.appbar-tooltip::before,
.mud-tooltip.appbar-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

/* Red tail, then the white one 1px lower, leaving a 1px red edge. */
.mud-tooltip.appbar-tooltip::before {
    top: -7px;
    border-bottom: 6px solid var(--dd-red);
}

.mud-tooltip.appbar-tooltip::after {
    top: -6px;
    border-bottom: 6px solid #FFFFFF;
}

/* Header icons (search, account, cart, login, hamburger) red on the white
   header, including while search/menu are open/active. */
.main-layout-appbar .appbar-action-fa,
.main-layout-appbar .mud-icon-root,
.main-layout-appbar .mud-icon-root.mud-svg-icon,
.main-layout-appbar .mud-button-root .mud-icon-root {
    color: var(--dd-red) !important;
}

.main-layout-appbar .appbar-action-fa:hover,
.main-layout-appbar .appbar-action-fa:focus,
.main-layout-appbar .appbar-action-fa:active,
.main-layout-appbar .mud-button-root:hover .mud-icon-root,
.main-layout-appbar .mud-button-root:focus-visible .mud-icon-root {
    color: var(--dd-red) !important;
    opacity: 0.75;
}

.mud-toolbar {
    display: flex;
    align-items: center;
    gap: 0;
}

.main-layout-logo-link {
    margin-right: 32px;
}

.main-layout-nav {
    flex: 0;
}

.main-layout-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Header actions alignment & sizing:
   Keep the search, account/login, logout and cart icons on one horizontal
   line, vertically centered and consistently sized. The search icon lives in
   a plain <button> (default box + baseline alignment) which pushed it lower
   than the <a>-based account/cart icons, so it is normalized to match. */
.main-layout-account-items {
    display: flex;
    align-items: center;
}

/* Red circle, white numeral, so the count reads against the cart glyph instead of
   disappearing into the white header. It was the inverse - white fill, red digits.

   !important is load-bearing here, not laziness: CartBadge.razor sets the badge's
   background and colour in a style attribute, which no ordinary stylesheet rule can
   outrank. Doing it from this file rather than editing the component keeps
   doordashretail, which renders the same badge, untouched. If that inline style is
   ever moved into CSS, both !importants can go. */
.main-layout-cart-count {
    background-color: var(--dd-red) !important;
    color: var(--dd-white) !important;
}

.main-layout-actions .appbar-search-btn,
.main-layout-actions .main-layout-account-link,
.main-layout-actions .main-layout-cart-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 8px;
    cursor: pointer;
}

.main-layout-actions .appbar-action-fa {
    font-size: 1.7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.main-menu-inner {
    display: flex;
    flex-direction: row; 
    align-items: center;
    gap: 32px;
    width: max-content;
}

.main-menu-inner a {
    min-width: unset;
    white-space: nowrap;
    color: var(--dd-maroon) !important;
    font-size: 15px; /* was 17px — design specifies 15px */
}

.main-menu-inner a:hover {
    background: transparent;
    color: var(--dd-red) !important;
}

/* Header subcategory dropdown menus (desktop & tablet) */
.mud-popover.main-menu-dropdown-popover,
.mud-popover.main-menu-dropdown-popover .mud-paper {
    border: 2px solid #FF3008 !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* Let the popover grow to fit its content instead of being clamped to the
   narrow activator width (RelativeWidth="Relative"), which cut off the text.
   No max-width clamp: the menu sizes to the longest (non-wrapping) item. */
.mud-popover.main-menu-dropdown-popover {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
}

.mud-popover.main-menu-dropdown-popover .mud-paper,
.mud-popover.main-menu-dropdown-popover .mud-list {
    width: 100% !important;
    min-width: max-content !important;
}

/* Red divider between subcategory links (none after the last item) */
.mud-popover.main-menu-dropdown-popover .main-menu-dropdown-item:not(:last-child) {
    border-bottom: 1px solid #FF3008;
}

.mud-popover.main-menu-dropdown-popover .main-menu-dropdown-item {
    color: #4C0C3A !important;
    white-space: nowrap !important;
}

.mud-popover.main-menu-dropdown-popover .main-menu-dropdown-item:hover,
.mud-popover.main-menu-dropdown-popover .main-menu-dropdown-item:focus,
.mud-popover.main-menu-dropdown-popover .main-menu-dropdown-item:focus-visible {
    color: #FF3008 !important;
    background-color: transparent !important;
}

.mud-icon-root.mud-svg-icon {
    color: var(--dd-red);
}

/* The rule above recolours every standalone icon, but an icon inside a button
   (StartIcon/EndIcon, MudIconButton) must follow the button's own text colour,
   as MudBlazor does by default (currentColor). Otherwise a filled primary
   button renders a red icon on a red background (e.g. the cart's "Proceed to
   Checkout" credit-card icon and the "Remove" trash icon) and an outlined or
   text button's icon no longer tracks hover/disabled states. */
.mud-button-root .mud-icon-root.mud-svg-icon {
    color: inherit;
}

/* Expanded search field.

   The design puts the field *inside* the header bar, vertically centred and
   immediately to the left of the action icons — not hanging below the header,
   which is where it used to land. It was dropped below the header because
   expanding it inline pushed the account and cart icons off the page: the
   toolbar is already near capacity at 1400px (see the breakpoint note further
   down), and the field needs another ~237px.

   Both are solved by keeping the field absolutely positioned — so it costs the
   toolbar no width and nothing else moves when it opens — and anchoring it
   inside the bar rather than under it. The nav is hidden while it is open (see
   the rule in the >=1400px block) so the field isn't sitting on top of nav
   text.

   Measured off the comp, whose header band is 74px against this bar's 81px, so
   a 0.914 scale: field 209x38 -> 229x42, and 24px -> 26px of clear space to
   the first action icon. Here the field is anchored 8px left of the search
   toggle, which occupies the slot the comp gives to the magnifier inside the
   field. */
.search-box-container {
    position: relative;
}

.search-box-popup {
    position: absolute;
    /* Centred on the toggle, which is itself centred in the bar. */
    top: 50%;
    transform: translateY(-50%);
    right: calc(100% + 8px);
    z-index: 1200;
    width: 229px;
    padding-top: 0;
}

.search-box-expanded {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* A white field on the red header, drawn as a red-bordered pill.

   The background belongs on the input and NOT on .mud-input-outlined-border.
   MudBlazor renders that border as a <fieldset> positioned absolutely across the
   whole field and painted after the input, so an opaque white background on it
   covered everything inside: the placeholder, anything typed, and the magnifier
   adornment. The field looked permanently empty. That single declaration is what
   produced three separate reports - "text typed into the search box is not
   visible", "missing the placeholder text", and the missing search icon. Proved
   by setting it transparent on the live site: all three reappeared at once.
   The fieldset only ever needs to draw the stroke and the radius. */
.search-box-expanded .mud-input-root-outlined,
.search-box-expanded .mud-input-outlined-border {
    border-color: #FF3008 !important;
    border-radius: 50px !important;
}

/* Height has to be an explicit height with the padding zeroed, not a min-height.
   The input is content-box and carries 10.5px of MudBlazor padding top and
   bottom, so `min-height: 42px` rendered a 63px field - the "search field is
   huge and I can't see what I've entered" report. 42px is the comp's 38px at the
   0.914 header scale (comp band 74px against this bar's 81px).

   This lived in the max-width: 1399px block, which fixed the collapsed header and
   left the desktop bar at 63px. It belongs at every width. Measured before and
   after at both 1280px and 1500px: 63px -> 42px. */
.search-box-expanded .mud-input-root-outlined {
    background-color: var(--dd-white) !important;
    height: 42px;
    min-height: 42px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.search-box-expanded input {
    border-radius: 50px !important;
    /* Brand red per the ticket. The field sits white-on-red, so red keeps the
       typed text in the palette instead of dropping to body near-black. */
    color: var(--dd-red) !important;
}

/* Hint text. MudBlazor sets `color: currentcolor; opacity: .42` on the
   placeholder via `.mud-input > input.mud-input-root::placeholder`, which is
   (0,2,1). The rule here was `.search-box-expanded input::placeholder` at
   (0,1,1) and quietly lost every time - the sampled colour below had never once
   been applied. Matching on the input's own .mud-input-root class ties the
   specificity, and !important settles it regardless of stylesheet order.

   (The placeholder being invisible on screen was a separate bug - the border
   fieldset painting over it, fixed above. This rule is what makes it the comp's
   grey rather than 42% of whatever the text colour happens to be.)

   #C7C7C7 is sampled from the comp. Note that it is roughly 1.7:1 against white,
   well under the 4.5:1 WCAG AA text minimum - this is the only hint the field
   gives, so if that matters here, darkening this one value to about #767676
   fixes it without touching anything else. */
.search-box-expanded input.mud-input-root::placeholder {
    color: #C7C7C7 !important;
    opacity: 1 !important;
}

.search-box-expanded .mud-input-adornment .mud-icon-root {
    color: #FF3008 !important;
}

button.mud-button-root.mud-icon-button.mud-primary-text.hover\:mud-primary-hover.mud-ripple.mud-ripple-icon.search-icon-collapsed.search-toggle-icon.search-close-mobile {
    display: none;
}


/*LOGIN*/
.emp-login-bg {
    background-image: url('https://dev.cssps.com/employeedoordashstore/images/assets/login_bg (1).png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Login is a full-screen takeover - the two panels fill the viewport, with no header
   above them and no footer below, per the design.

   The header and footer are hidden from the LAYOUT ROOT rather than from themselves,
   because neither contains the login card: .main-layout is the MudLayout, and the app
   bar, the main content and the footer are all siblings inside it. That is why the rule
   this replaces, `.main-menu:has(.login-card)`, silently did nothing - .main-menu is a
   descendant of the app bar and never contains the card, so the selector matched no
   element at all and the header stayed. Hiding the app bar covers the menu anyway.

   Measured before: the app bar still drew an 81px white band across the top, and because
   .mud-main-content's padding is zeroed below, the red panel and the photograph ran
   underneath it rather than starting below it - so the design's top edge was covered
   rather than merely pushed down. The footer added another 124px, leaving the two panels
   776px tall in a 900px viewport. */
.main-layout:has(.login-card) .main-layout-appbar,
.main-layout:has(.login-card) > footer.site-footer {
    display: none !important;
}

.mud-main-content:has(.login-card) {
    padding-top: 0 !important;
}

.main-layout-content-container:has(.login-card) {
    /* min-height, not height: the panels fill the viewport but the card is still allowed
       to push the page taller and scroll on a short window rather than being clipped.
       This replaces `height: stretch` + `max-height: 100%`, which is a non-standard
       keyword (-webkit-fill-available in another spelling) that browsers disagree about;
       it was resolving to the content height here, which is how the panels ended up
       sized to the card rather than to the screen. */
    min-height: 100dvh;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #FF3008;
}

.login-title {
    display: none;
}

img.emp-login-logo {
    display: block;
    text-align: center;
    margin: 50px auto;
    max-width: 100%;
}

.login-form-input {
    border-color: #FF3008;
    border-radius: 25px;
}

.login-form-submit-btn {
    margin-top: 25px;
    background-color: #FF3008 !important;
    border-radius: 25px;
    width: auto;
    padding: 8px 50px 5px;
}

.login-link {
    color: black !important;
    text-decoration: underline;
    text-decoration-color: black !important;
}

/*HOME*/

/*HERO OVERIDE for TESTING*/
/*.homepage-banner-container.banner-container {
    background: url('https://dev.cssps.com/employeedoordashstore/images/assets/desktop_hero.png') !important;
    background-size: cover !important;
    background-position: center !important;
    height: 500px !important;
}*/
.homepage-banner-carousel {
    height: 550px;
}

/* Hero overlay — the block holding the headline and the "Shop Now" button.
   It was never actually overlaying anything: with `position: static` it sat in
   normal flow directly BELOW the 550px banner image, starting at the exact
   pixel where .homepage-banner-container ends. Because that container is
   `overflow: hidden`, both the headline and the CTA were clipped away entirely
   — present in the DOM, measurable, and invisible on screen. That is what QA
   reported as "hero banner text and CTA button are missing"; they were not
   missing, they were being cut off.
   Anchored to the bottom of the hero because the design places the Shop Now
   button roughly 76px above the banner's lower edge. */
.homepage-banner-overlay.banner-overlay {
    background: transparent !important;
    position: absolute;
    left: 0;
    width: 48%; /* the red panel; the design's photo starts at x 690 of 1442 */
    top: 50%;
    transform: translateY(-50%);
    text-align: center; /* headline and button share a centre axis in the design */
    padding: 0 24px;
    margin-left: 0;
    z-index: 2;
}

/* Hero headline.
   This is the only element on the site that was rendering in Roboto. It uses
   MudBlazor's <MudText Typo="h4">, and `.mud-typography-h4` sets its own
   font-family at a higher specificity than the global `html body *` rule, so
   MudBlazor's Roboto won. Pinning the family here fixes that.
   Size and colour are deliberately NOT set: the design's hero has no text layer
   (the headline lives inside the artwork), so the live-text treatment has never
   been specified. See finding C5 — this needs the designer, not a guess. */
/* Values below are DERIVED FROM THE HERO ARTWORK, not from a spec — the design
   has no text layer here, so there is nothing to read numerically. They were
   measured against a known reference inside the same image: the Shop Now button
   exists both baked into the artwork and as a live 155 x 40 layer at x 247,
   which fixes the scale. The size then comes from the block width rather than
   from reading pixels off a screenshot: the headline block measures 388px in
   the artwork, and the longest line, "EVERY TEAM", fills it. Measured in the
   condensed face, that line is 428px at 79px, 390px at 72px and 384px at 71px
   — so 71px is the size at which the design's three-line break falls where it
   does. An earlier estimate of 79px was wrong; at that size "DOORDASH" alone
   is 393px and overflows the block.

       colour        white
       case          uppercase
       size          71px    (longest line fills the 388px block)
       line-height   73px    (3 lines = the 219px block height)
       measure       388px   — this is what breaks it to three lines
       alignment     centred, sharing the button's axis

   Caveat: measured against the condensed face as it currently loads, with the
   900 weight synthesised. The real Black cut is narrower, so once it is
   licensed and installed this may want to come up a little. If the designer
   can add a text layer or state the value, use theirs over this. */
.homepage-banner-title {
    font-family: var(--dd-font-condensed);
    font-size: 71px;
    line-height: 1.03; /* ~73px */
    font-weight: 900;
    color: #fff !important;
    text-transform: uppercase;
    max-width: 388px;
    margin: 0 auto 45px; /* lands the measured gap on the designed 53px once the
                            last line's half-leading is accounted for */
}

/* "Shop Now" button */
.homepage-banner-btn {
    background-color: #fff !important;
    color: var(--dd-red) !important;
    border-radius: var(--dd-radius-btn) !important;
    font-weight: 700 !important;
    font-size: 16px !important; /* was 0.9rem → 14.4px; design specifies 16px */
    /* Design button is 155 x 40 around a 74px label. This one also carries a 2px
       white border, so the padding is set 2px inside the design's 41 x 10 to
       land on the same outer box: 8 + 20 + 8 + 4 = 40 tall, 74 + 78 + 4 = 156
       wide. Was 10px 28px with a 25.2px line-height, rendering 126 x 49. */
    line-height: 20px !important;
    padding: 8px 39px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    border: 2px solid #fff !important;
    transition: background 0.2s, color 0.2s;
}

    .homepage-banner-btn:hover {
        background-color: var(--dd-red) !important;
        color: #fff !important;
        border-color: #fff !important;
    }

/* Carousel navigation dots */
.mud-carousel .mud-icon-button {
    color: rgba(255, 255, 255, 0.8) !important;
}

.homepage-banner-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.homepage-banner-container picture {
    display: block;
    width: 100%;
    height: 100%;
}

.homepage-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* ── "Home Icons" Section ────────────────────────────── */

.homepage-static-content {
    box-shadow: none !important;
    background-color: var(--dd-white); /* was #FAFAFA */
    padding: 0 !important;
}

.homepage-static-title.mb-3 {
    display: none;
}

.home-icons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 8%;
    background: var(--dd-white); /* was #FAFAFA */
    gap: 32px;
}

.home-icons-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.home-icons-circle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-icons-circle img {
    height: 50px;
    width: auto;
}

.home-icons-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: #4C0C3A;
    font-size: 18px;
}

.home-icons-desc {
    font-size: 16px;
    color: #4C0C3A;
    line-height: 1.5;
    margin: 0;
}

/* ── "Shop by Category" Section ────────────────────────────── */

.homepage-featured.mb-4 {
    margin-top: 50px;
}



.homepage-featured {
    position: relative;
    z-index: 101;
    background: #fff; 
    margin-top: -250px;
    padding-top: 2rem;
    border-radius: 16px 16px 0 0;
}

.homepage-featured-products {    
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.homepage-featured-title, h5.homepage-featured-title {
    font-family: var(--dd-font-condensed) !important;
    font-size: 48px;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--dd-red) !important;
    /* Both 48px display headings in the design — "Shop By Category" and "Shop
       the Favorites" — carry identical metrics: 51.57px leading and -1.44px
       tracking (-0.03em). The tracking was previously +0.5px, i.e. loosened
       where the design tightens, and no line-height was set at all, so the
       heading inherited a 64px line box against a designed 52px. */
    line-height: 51.57px;
    letter-spacing: -1.44px; /* was 0.5px */
    /* Design puts 18px between "Shop By Category" and the tiles below it. That
       heading is a plain child of .homepage-featured, so a margin is what sets
       the gap. The "Shop the Favorites" heading is a different case — it sits
       in a flex container whose gap owns the spacing — and is zeroed below. */
    margin-bottom: 18px !important;
    margin-left: 8%;
}

.homepage-featured-products-wrapper .homepage-featured-title {
    margin-bottom: 0 !important; /* flex gap owns the spacing in this section */
}

/* Corners and shadow for the favourites cards are handled by the shared
   `.product-card.card` rule, which covers every page. Sizing is deliberately
   not touched here — this row is a carousel with its own layout. */

/* The section's .container is a flex column with a 35px gap, which is what
   actually set the distance between the heading and its subheading — the
   heading's own margin-bottom was never the operative value. The design puts
   9px between them, and the same 9px again down to the product row. */
.homepage-featured-products-wrapper > .container,
.homepage-featured > .container {
    gap: 9px;
}

/* Subheading. This was the second element on the site still falling back to
   Roboto: .mud-typography-body1 sets its own family, which beat the global
   `html body *` override, exactly as the hero headline did. */
.homepage-featured-subtext {
    font-family: 'TT', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 24px; /* was 22px */
    line-height: 30.72px; /* was 33px */
    letter-spacing: -0.72px; /* was +0.206px */
    color: var(--dd-maroon); /* was #5A2A4A */
    margin-bottom: 0 !important;
}

/* Align the "SHOP BY CATEGORY" heading (direct child of .homepage-featured)
   with the left edge of the category image grid, which is a Bootstrap
   .container. Mirror the container's centered max-widths + gutter padding so
   the heading's left edge matches the leftmost category image at every
   breakpoint. */
.homepage-featured > .homepage-featured-title {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    max-width: 100%;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .homepage-featured > .homepage-featured-title { max-width: 540px; }
}

@media (min-width: 768px) {
    .homepage-featured > .homepage-featured-title { max-width: 720px; }
}

@media (min-width: 992px) {
    .homepage-featured > .homepage-featured-title { max-width: 960px; }
}

@media (min-width: 1200px) {
    .homepage-featured > .homepage-featured-title { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .homepage-featured > .homepage-featured-title { max-width: 1320px; }
}

.homepage-featured .container:nth-of-type(2)::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);    
    width: 100vw;
    max-width: 100%;
}

/* Category cards row */
.homepage-featured .container:first-of-type {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    margin-bottom: 50px;
}

.homepage-featured .row .col-md-6.col-lg-4.col-sm-12 {
    width: 100% !important;
}

/* Nothing lifts on hover in the design. Both the category tile and the product
   card keep the same bounding box between their Default and hover variants —
   only the shadow and, on the product card, the image change. The category
   tile's hover rule is further down; this one is the product card, whose Hover
   variant carries exactly the same 1px 1px 6px rgba(0,0,0,.19) shadow as its
   Default, so it should hold still and hold its shadow too.
   Was: transform: translateY(-5px) with a 0 10px 20px rgba(0,0,0,.15) shadow. */
/* Every product card, on every page — the category grid, "Shop the Favorites"
   on the homepage, and the recommendations row on the product detail page all
   use the same card component in the design: 10px radius, white, and a
   1px 1px 6px rgba(0,0,0,.19) shadow.

   overflow:hidden is what makes the radius visible: the card's children paint
   their own square-cornered backgrounds over it, so without clipping the
   corners read square however large the radius.

   The Hover variant keeps the same bounding box and the same drop shadow, and
   adds a 1px inset #FF3008 stroke. */
.product-card.card {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.19) !important;
}

/* The hover stroke is drawn by an overlay pseudo-element, not by an inset
   box-shadow and not by a real border.

   An inset shadow paints on the card's own background layer, *underneath* its
   children — and both children here (.product-listing-img and .card-body) set
   an opaque white background across the full width of the card, so an inset
   stroke is covered up completely and never appears. Same trap that made the
   10px radius read as square corners: the children paint over the parent.

   A real border would work visually but adds 2px to the box on hover and
   shifts the card's contents. An absolutely positioned ::after is out of flow,
   so it costs no layout, and being the last positioned descendant it paints
   above the children's backgrounds. It is declared transparent at rest so only
   the colour changes on hover — nothing about the geometry is conditional. */
.product-card.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    pointer-events: none;
}

.product-card.card:hover::after {
    border-color: var(--dd-red);
}

.product-card.card:hover {
    transform: none;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.19) !important;
}

.homepage-featured .category-card .card-body {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.category-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
}

.category-card:hover .category-arrow {
    border-color: var(--dd-red);
    color: var(--dd-red);
}

/* Arrow-inside-circle icon for each category card. Rendered as a decorative
   pseudo-element on the card body (whose markup has no dedicated arrow node),
   pinned to the top-right corner. pointer-events:none keeps the whole card
   link clickable. */
.homepage-featured .category-card .card-body::after {
    content: "\2192";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    transition: border-color 0.2s, color 0.2s;
}

.homepage-featured .category-card:hover .card-body::after {
    border-color: var(--dd-red);
    color: var(--dd-red);
}


/* Each category card */
.category-card,
.homepage-category-card {
    position: relative;
    border-radius: var(--dd-radius-card) !important;
    overflow: hidden;
    min-height: 475px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Category tile hover. The design's hover variant sits at the same size and
   position as the default — no lift — and gains a distinctly heavier shadow:
   10px blur at a 3px offset and 35% black, against the 12% the build was using.
   Was: transform: translateY(-3px) with 0 8px 24px rgba(0,0,0,.12). */
.category-card:hover,
.homepage-category-card:hover {
    transform: none;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.35) !important;
}

.homepage-featured .category-card h4 {
    color: #fff !important;
    font-size: 36px;
    font-weight: 600;
}

/* The 36px desktop size carried straight through to mobile with no override.
   The mobile design frame specifies 24px. */
@media (max-width: 850px) {
    .homepage-featured .category-card h4 {
        font-size: 24px;
    }
}

.homepage-featured .category-card:hover h4 {
    color: var(--dd-red) !important;
}

/*Until we settle the category image*/
.fallback-image {
    display: none;
}

/* First card */
.homepage-featured .container:first-of-type .row:nth-child(1) .category-card .card-body {
    background: var(--dd-sky) !important;
    background-image: url(https://dev.cssps.com/employeedoordashstore/images/assets/cat_apparel.png) !important;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat !important;
}

/* Second card */
.homepage-featured .container:first-of-type .row:nth-child(2) .category-card .card-body {
    background: var(--dd-yellow) !important;
    background-image: url(https://dev.cssps.com/employeedoordashstore/images/assets/cat_accessories.png) !important;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat !important;
}

/* Third card */
.homepage-featured .container:first-of-type .row:nth-child(3) .category-card .card-body {
    background: #F5C0D8 !important;
    background-image: url(https://dev.cssps.com/employeedoordashstore/images/assets/cat_bag.png) !important;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat !important;
}

/* =========================
   EMPLOYEE - FEATURED SUBTEXT
   ========================= */

.homepage-featured-subtext {
    font-size: 22px;
    line-height: 1.5;
    color: #5A2A4A;
    margin-top: 0;   
}

.homepage-featured-products-wrapper {
    padding-top: 49px; /* design: 49px from the band's top edge to the heading */
    background: var(--dd-pink-bg);
    padding-top: 2rem;
    padding-bottom: 2rem;
}


.homepage-featured-products-wrapper > .container:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.homepage-featured-products-wrapper .homepage-featured-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left;
}

.homepage-featured-products-wrapper .homepage-featured-subtext {
    text-align: left;
}

/* Shop the Favorites images: same treatment as the category grid.

   Measured before: the image rendered 150x150 inside a 280px frame, so it
   floated in the middle of a white tile with the frame's rounded corners
   nowhere near it - which is why it read as both "too small" and "no rounded
   corners" at once. The category grid already solves this, so these three
   values are copied from `.categories-products .product-card-image` rather
   than invented: full width, a fixed 236px box, contain, 10px radius.

   Verified against a category page at 1500px: category images render 294x236
   at 10px radius, favourites now render 280x236 at 10px - identical treatment,
   the 14px difference being the narrower card (312 vs 326).

   The category rule also carries `padding: 20px 20px 0` on the wrapper, which
   is NOT copied here: Bootstrap's `p-3` on that element is !important and wins
   in both places, so both render at 16px and the declaration is dead weight.

   The hover image follows automatically - it is absolutely positioned to fill
   this same frame. */
.homepage-featured-products-wrapper .product-card-image-frame {
    width: 100%;
    height: 236px;
}

.homepage-featured-products-wrapper .product-card-image {
    width: 100%;
    max-width: none;
    height: 236px;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 10px;
}

/* ...and the card has to be allowed to hold them.

   `.product-card` carries a hard `min-height: 385px; max-height: 385px` further
   down this file. That was harmless while these images were 150px tall. At the
   designed 236px the card can no longer fit image plus body in 385px, so flexbox
   shrank the image WRAPPER to 193px while the frame inside it kept its 236px and
   spilled out of the bottom - painting straight over the product title. Measured
   live: the frame ended 59px below the top of the card body, which is why
   "Powerbank & Wireless Charger" read as "Po ... r".

   Releasing the clamp is only half of the fix. Quick Add is a SIBLING of the card
   - it sits outside the anchor so clicking it does not navigate to the product -
   and is absolutely positioned against .product-card-wrapper. So the wrapper has
   to track the card exactly: left alone it stayed content-height around the card
   PLUS the card's 25px bottom margin, which put the button's lower edge 9px below
   the card's own border. The margin moves to the row's gutter instead, and the
   column and wrapper become flex so the card fills them.

   That flex chain is also what keeps a row even. Bootstrap's .row stretches the
   columns, but the wrapper inside was block-level and content-height, so the
   two-line "Bio-Washed Unconstructed Twill Cap" card stood 22px taller than its
   neighbours and its button dropped out of line with theirs.

   The category grid released the same clamp for the same reason - see
   `.categories-products .product-card.card.h-100` below. This section was
   deliberately left out of that change at the time, because its images were still
   150px; raising them to 236px is what brought it into scope. */
.homepage-featured-products-wrapper .product-listing {
    display: flex;
}

.homepage-featured-products-wrapper .product-card-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* Deliberately over-specified (.product-card.card.h-100). It has to outrank the
   legacy `.product-card` sizing rule further down this file, and Bootstrap's
   `.mb-4`, which is !important on the same element. */
.homepage-featured-products-wrapper .product-card.card.h-100 {
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    /* The 25px this removes was the only thing separating the two rows, so it is
       handed to the row's own vertical gutter below rather than dropped. */
    margin-bottom: 0 !important;
}

.homepage-featured-products-wrapper .row.g-3 {
    --bs-gutter-y: 25px;
}


/* ── Product Cards (Featured / Favorites) ───────────────────── */

button.btn.btn-outline-secondary.btn-sm {
    border-color: #FF3008 !important;
    color: #FF3008 !important;
    border-radius: 50% !important;
    border-width: 2px;
}

.homepage-featured .container:nth-of-type(2) {
    position: relative;    
    padding-bottom: 32px;
}


.featured-carousel-wrapper {
    position: relative;
    overflow: hidden;
}

.featured-carousel-controls {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.homepage-featured .btn:hover {
    background-color: var(--dd-red);
}

.featured-carousel-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    transition: transform 0.3s ease;
}

.featured-carousel-item {
    min-width: 0;
}

.featured-carousel-item .product-card {
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden;
}

.featured-carousel-item .categories-product-image-wrapper {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-carousel-item .categories-product-image-wrapper img {
    max-height: 180px;
    object-fit: contain;
}

.featured-carousel-item .categories-product-body {
    padding: 12px 16px 16px !important;
}

.featured-carousel-item .product-card-sku, .featured-carousel-item .product-card-price {
    font-size: 18px;
    color: #4C0C3A;
    margin-bottom: 2px;
    font-weight: 600;
}

.featured-carousel-item .product-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── Custom Order CTA Banner ─────────────────────────────────── */
/* Static content block that appears before footer */

/* Custom Order callout.

   Design geometry, measured off the Figma frame (1315 x 275 at x 63 on a
   1440 canvas, so ~4.3% side margins rather than 8%):

       padding-left        55px
       padding-top         46px   (container top → heading top)
       heading             36/46.08, then a 12px gap
       body                24/30.72, 527px measure, wrapping to two lines
                           then a 24px gap
       button              217 x 40
       padding-bottom      46px
       ------------------------
       content            183px, which is exactly 275 - 46 - 46

   The body copy is the load-bearing number here: at the designed 24px it only
   fits if it wraps to two lines, which needs the 527px measure. In a narrower
   column it runs to three lines, the content grows past 183px, and a fixed
   `height: 275px` clips it. Hence min-height rather than height, and a measure
   on the text rather than a percentage width on the container. */
.custom-callout {
    margin: 50px 4.3%; /* was 8% — design sits at ~63px of 1440 */
}

.custom-callout-bg {
    background-image: url('https://dev.cssps.com/employeedoordashstore/images/assets/home_custom_callout.png');
    min-height: 275px; /* was height: 275px — a fixed height clipped the taller copy */
    background-size: cover;
    background-position: center;
    border-radius: 10px; /* was 12px */
    position: relative;
    display: flex;
    align-items: center;
}

.custom-callout-content {
    width: auto;
    padding: 46px 55px; /* was 40px 48px */
}

.custom-callout-title {
    color: #FF461F; /* was var(--dd-red) #FF3008 — design uses a distinct orange-red here */
    font-size: 36px;
    line-height: 1.28; /* 46.08 / 36 */
    margin-bottom: 12px;
    max-width: 527px;
    font-family: 'TT', Arial, sans-serif; /* was tt-bold */
    font-weight: 600; /* design specifies the regular cut at 600, not the bold face */
}

.custom-callout-desc {
    color: #fff;
    font-size: 24px; /* was 0.95rem → 15.2px; design specifies 24px */
    line-height: 1.28; /* 30.72 / 24 — was 1.4 */
    letter-spacing: -0.72px; /* every 24px text in the design tracks -0.03em */
    margin-bottom: 24px; /* was 20px */
    max-width: 527px; /* the measure that keeps this to two lines */
}

.custom-callout-btn {
    display: inline-block;
    background-color: var(--dd-red);
    color: #fff;
    padding: 10px 22px;
    border-radius: 25px;
    font-size: 16px; /* was 0.875rem → 14px */
    line-height: 20px; /* design label is 20px tall; 10 + 20 + 10 = the designed 40px button */
    font-weight: 700; /* was 600 */
    text-decoration: none;
    /* Widened from `background 0.2s`: the label and the edge animate now too, so
       the inversion arrives as one movement rather than the fill changing first.
       The darker-red :hover that used to sit here is gone - the site-wide invert
       near the top of this file replaces it. */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* The callout type is drawn for a wide panel: a 36px heading and a 24px
   description inside 55px of side padding. On a 343px-wide phone panel that
   leaves a 233px text column, so the heading ran to three lines and the
   description to five - 460px of content in a box designed for 315px.

   Making the box grow (see the max-width: 850px block) stops the overflow on
   its own, but it does so by turning the banner into a tall slab. Bringing the
   type and the padding down to phone proportions as well keeps it close to the
   315px the design intends: 272px of content at 375px, comfortably inside.

   Held at 600px rather than 850px so tablets keep the full-size treatment,
   which already fits. */
@media only screen and (max-width: 600px) {
    .custom-callout-content {
        padding: 32px 24px;
    }

    .custom-callout-title {
        font-size: 26px;
    }

    .custom-callout-desc {
        font-size: 18px;
        letter-spacing: -0.4px;
        margin-bottom: 20px;
    }
}



/* ── Footer ──────────────────────────────────────────────────── */

.site-footer {
    background-color: var(--dd-red);
    padding: 40px 0;
}

.site-footer-grid {    
    max-width: none;     
    width: 100%;
    padding: 0 60px;     
    box-sizing: border-box;
    flex-wrap: nowrap;
}

/* =========================
   Columns (override MudGrid sizing)
   ========================= */

.site-footer-col {
    display: flex;
    align-items: flex-start;    
}

/* =========================
   LOGO
   ========================= */

.site-footer-col-logo {    
    flex-basis: 8.333% !important;  /* sm-1 */
    max-width: 8.333% !important;
}

.footer-logo-container {
    display: flex;
    justify-content: flex-start;
}

.footer-logo {
    max-height: 40px;
}

/* =========================
   COLUMN WIDTH OVERRIDES
   ========================= */

.site-footer-col-logo {    
    flex: 0 0 8% !important;
    max-width: 8% !important;
}

.site-footer-col-left {    
    flex: 0 0 64% !important;
    max-width: 64% !important;
}

.site-footer-col-right {    
    flex: 0 0 26% !important;
    max-width: 26% !important;
}

/* =========================
   LEFT (links + contact)
   ========================= */

.site-footer-col-left .footer-section {
    display: flex;
    flex-wrap: wrap;        
    gap: 10px 20px;
    align-items: center;
}

/* ✅ FORCE links into one row */
.site-footer-col-left .footer-section > div:not(:last-child) {
    flex: 0 0 auto;          
    white-space: nowrap;     
}

/* ✅ Contact on its own line */
.site-footer-col-left .footer-section > div:last-child {
    flex: 0 0 100%;
    margin-top: 18px;
}

/* =========================
   RIGHT (icons + made with)
   ========================= */

.site-footer-col-right {
    display: flex;
    justify-content: flex-end;
    padding-left: 20px
}

.site-footer-col-right .footer-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 20px;
}

/* icons */
.site-footer-col-right .footer-section > div:nth-child(-n+4) {
    display: inline-block;    
}

/* made with */
.site-footer-col-right .footer-section > div:last-child {
    width: 100%;
    text-align: right;
    margin-top: 18px; 
}

.site-footer-col-right .site-footer-menu .site-footer-item-wrapper a i {
    font-size: 2em;
    
}

.site-footer-col-left .footer-section > div:not(:last-child),
.site-footer-col-right .footer-section > div:nth-child(-n+4) {
    display: flex;
    align-items: center;
    min-height: 40px;
}


/* =========================
   LINKS
   ========================= */

.site-footer-link {
    color: white;
    text-decoration: none;
    font-size: 14px;
    white-space: normal;
}


/*CATEGORY*/
/* ================================================================
   Category intro — name over description, both centred.

   Measured off the comp, whose header band is 74px against this bar's 81px,
   so a 0.914 scale throughout.

   This sits at the top of .categories-content, so it is centred over the
   product grid and the filter rail beside it still starts directly under the
   breadcrumbs.

   Worth recording, because it is the one place this parts company with the
   comp: in the comp the title's centre is at x 398 while the three-column
   grid's centre is at x 547, and that 149px offset is almost exactly half the
   rail plus its gap — (240 + 59) / 2 = 149.5 — which is what you get when the
   heading spans rail and grid together, above the layout. Placed there it does
   centre on the page, but the rail is then pushed down by the full height of
   the heading and description, which is not wanted. The two cannot both hold
   in normal flow. If page-width centring turns out to matter more than the
   rail's position, the layout needs restructuring into a grid rather than
   moving this block again.

   Both colours land exactly on existing tokens: the title samples #FF3008
   (--dd-red) and the description #4C0C3A (--dd-maroon).

   The vertical gaps above and below are NOT from the comp. The comp shows no
   breadcrumbs above the title (this page renders them) and puts a "Sort By"
   control between the description and the grid (this page puts sort in the
   rail), so neither space is comparable. The values here are chosen to sit
   sensibly with what the page actually renders.
   ================================================================ */
.categories-intro {
    text-align: center;
    margin-bottom: 40px;
}

.categories-title {
    font-size: 36px; /* comp 33.7px at 0.914 */
    font-weight: 700;
    line-height: 1.15;
    color: var(--dd-red);
    /* Sentence case, not uppercase — this is where it parts company with
       .cart-title, which the design sets in caps. */
    margin: 0 0 24px;
}

.categories-description {
    max-width: 470px; /* comp 430px at 0.914 */
    margin: 0 auto;
    font-size: 16px;
    line-height: 22px; /* comp 20px line pitch at 0.914 */
    color: var(--dd-maroon);
}

.product-card {
    min-height: 385px;
    max-height: 385px;
    margin-bottom: 25px !important;
}

.product-listing-img {
    background-color: #FFF;
}

p.card-text.categories-card-description {
    display: none;
}

p.card-text.categories-card-sku {
    color: #4C0C3A !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}


h6.product-card-title {
    color: #4C0C3A !important;
    font-size: 18px;
    font-weight: 600;
}

p.product-card-price {
    color: #4C0C3A !important;
    font-size: 18px;
    font-weight: 600;
}

p.product-card-sku {
    color: #4C0C3A;
    font-size: 14px;
}

/*Trying to match Mock layout */
.categories-product-body {
    text-align: left !important;
    display: flex !important;
    flex-direction: column;
}

.categories-product-body .product-card-title {
    order: 1;
}

.categories-product-body .product-card-sku {
    order: 2;
}

.categories-product-body .product-card-price {
    order: 1;
    float: right;
}


/* =========================
   Category Layout
   ========================= */
/* The 25px bottom padding is the gap between the product grid and the footer.
   .categories-layout is the last element on the page, and the cards in the grid
   have their Bootstrap mb-4 zeroed out, so the grid otherwise ends flush
   against the footer. It is repeated in the .has-filters and mobile rules below
   because both of those set `padding` as a shorthand, which would reset it. */
.categories-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0 1.5rem 25px;
}

.categories-content {
    flex: 1 1 0;
    min-width: 0;
}
/*
.categories-list.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    }
*/


.slider-nav {
    flex: 0 0 200px;
    position: sticky;
    top: 1rem;
    margin: 3rem 0 0 0;
    padding: 0;
    color: var(--dd-maroon);
}

/* Mobile filter toggle — hidden on desktop */
.filter-toggle-btn {
    display: none;
}

/* Mobile filter toggle row — hidden on desktop */
.filter-toggle-row {
    display: none;
}

/* =========================
   Category Filter Styles
   ========================= */
.filter-heading {
    font-size: 24px; /* was 28px */
    font-style: normal;
    font-weight: 600;
    line-height: 130.048%;
    letter-spacing: -0.72px; /* was -1.12px; design tracks -0.03em at 24px */
    color: var(--dd-red);
    margin-bottom: 1rem;
}

/* ── Category page: filter rail and product grid ──────────────────
   Geometry from the Category Page frame (1440 canvas):
       rail          240 wide at x 64
       dividers      224 x 1px #D4D4D4 between groups
       gap           59px from rail to grid
       grid         1016 wide at x 363 — three columns, 42px gutters
       card          310 x 411, 10px radius, 20px padding
       image         271 x 236 (the card's full inner width), 10px radius
       rhythm        27px image → info → button
       button        270 x 40, sitting 20px above the card's lower edge
   ================================================================= */

.categories-layout.has-filters {
    padding: 0 64px 25px; /* was 0 24px; 25px keeps the grid off the footer */
    gap: 59px; /* was 24px */
}

.slider-nav {
    flex: 0 0 240px; /* was 200px */
}

/* Rail group headings: the design sets 18/500, not 22/400. */
.slider-nav .sort-by-label,
.slider-nav .price-range-label {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--dd-red);
    margin-bottom: 16px;
}

.slider-nav .sort-by-option {
    font-size: 14px;
}

/* Rules between rail groups — 224px, so they stop 16px short of the rail edge. */
.slider-nav .sort-by-wrapper::before,
.slider-nav .price-range-wrapper::before,
.slider-nav .view-all-wrapper::before {
    content: "";
    display: block;
    width: 224px;
    height: 1px;
    background: #D4D4D4;
    margin: 15px 0;
}

/* Three columns. The markup carries Bootstrap's col-lg-3, which gives four, but
   ProductCard is shared with the homepage carousel, search and related products
   — so rather than change the column classes the row is converted to CSS Grid
   here and the classes neutralised. That also replaces Bootstrap's 24px gutter
   with the designed 42px. */
.categories-products.container,
.categories-products .container {
    padding-left: 0;
    padding-right: 0;
}

.categories-products .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;
    margin: 0;
}

.categories-products .row > .product-listing {
    display: flex;
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

/* Equal-height cards within a row, so the buttons share a baseline. */
.categories-products .product-card-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* .product-card carries a hard `max-height: 385px` earlier in this file, which
   clamped every card regardless of its contents. That was invisible while the
   image was 150px tall; at the designed 236px it clips, and the body overflows
   the card. Released here for the category grid only, so the homepage carousel
   keeps its existing sizing.

   `height: 100%` matters and is not interchangeable with `auto`. The Add to
   Cart button is a SIBLING of the card — it sits outside the anchor so a click
   doesn't navigate — and is absolutely positioned against .product-card-wrapper.
   The wrapper stretches to the grid row, so if the card is sized to its own
   content it can end up shorter than the wrapper, and the button then renders
   below the card's lower edge, outside its border. Filling the wrapper keeps
   the two in step. Bootstrap's .h-100 is itself !important, hence the override
   here even though the value now agrees with it. */
/* Selector is deliberately over-specified (.product-card.card.h-100). It has to
   outrank three separate single-class rules that each use !important on the
   properties below — `.product-card { margin-bottom: 25px !important }` further
   down this file, Bootstrap's `.shadow-sm`, and Bootstrap's `.mb-4` — and the
   legacy .product-card rule sits *after* this block in source order. */
.categories-products .product-card.card.h-100 {
    flex: 1 1 auto;
    height: 100% !important;
    max-height: none !important;
    min-height: 411px !important;
    /* Radius, clipping and shadow come from the shared `.product-card.card`
       rule above, which applies on every page. Only the grid-specific sizing
       lives here. */
    /* The card carries Bootstrap's .mb-4 (24px). With height:100% the card's
       basis equals the wrapper, so basis + margin overflows and flex shrinks the
       card by those 24px — leaving its lower edge 24px up while the button stays
       anchored 20px up, so the button sat 4px proud of the card's border. The
       grid's 42px gap already provides the row spacing this margin was for. */
    margin-bottom: 0 !important;
    /* No box-shadow here on purpose. This selector is (0,4,0) and would outrank
       the shared `.product-card.card:hover` rule at (0,3,0), which would stop
       the hover border appearing in the category grid. Shadow and hover state
       are owned by the shared rules above. */
}

.categories-products .product-card-image-wrapper {
    padding: 20px 20px 0;
}

.categories-products .product-card-image-frame {
    width: 100%;
    height: 236px;
}

/* object-fit is `contain` rather than `cover` on purpose. The design's tiles are
   lifestyle shots that fill the frame; the catalogue's are cut-outs on white,
   and `cover` would crop roughly 13% off the top and bottom of a square image.
   Switch to `cover` if the imagery changes to match the design's. */
.categories-products .product-card-image {
    width: 100%;
    max-width: none;
    height: 236px;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 10px;
}

.categories-products .categories-product-body {
    padding: 27px 20px 87px !important; /* 87 = 20 below the button + 40 button + 27 gap */
}

.categories-products .product-card-actions {
    bottom: 20px;
    padding: 0 20px;
}

.sort-by-wrapper {
    margin-top: 0;
    padding-top: 0;
}

.sort-by-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 130.048%;
    letter-spacing: -0.88px;
    color: var(--dd-red);
}

.sort-by-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    cursor: pointer;
    color: var(--dd-maroon);
    font-size: 0.9rem;
}

.sort-by-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid var(--dd-red);
    border-radius: 3px;
    background: var(--dd-white);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.sort-by-option input[type="checkbox"]:checked {
    background: var(--dd-white);
    border-color: var(--dd-red);
}

.sort-by-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 2px;
    top: -1px;
    width: 5px;
    height: 9px;
    border: 2px solid var(--dd-red);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.nav-filters,
.nav-filters li {
    list-style: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0;
}

.nav-filters strong {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 130.048%;
    letter-spacing: -0.88px;
    color: var(--dd-red);
}

.price-range-wrapper {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.price-range-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 130.048%;
    letter-spacing: -0.88px;
    color: var(--dd-red);
}

.price-range-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-top: 0.4rem;
    color: var(--dd-maroon);
}

.view-all-wrapper {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.view-all-wrapper a {
    cursor: pointer;
    text-decoration: none;
    color: var(--dd-maroon);
    display: block;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.view-all-wrapper a:hover {
    background: rgba(76, 12, 58, 0.05);
}

.view-all-wrapper a.selected {
    font-weight: 700;
    color: var(--dd-red);
}

/* noUiSlider overrides */
.noUi-connect {
    background: var(--dd-red);
}

.noUi-target {
    background: #e0e0e0;
    border: none;
    box-shadow: none;
    height: 4px;
    margin: 0.75rem 0;
}

.noUi-handle {
    background: var(--dd-white);
    border: 2px solid var(--dd-red);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    width: 14px !important;
    height: 14px !important;
    top: -6px !important;
    right: -7px !important;
}

.noUi-handle::before,
.noUi-handle::after {
    display: none;
}

/* =========================
   Category Breadcrumbs
   ========================= */
.category-header-title {
    font-size: 48px;
    font-style: normal;
    font-weight: 900;
    line-height: 85%;
    letter-spacing: -1.44px;
    text-transform: uppercase;
}

.categories-product-body {
    background: var(--dd-white) !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.categories-breadcrumbs {
    padding: 0.5rem 1.5rem 1rem 1.5rem;
    font-size: 0.9rem;
}

.categories-breadcrumbs .mud-breadcrumb-item a,
.categories-breadcrumbs .mud-breadcrumb-item span {
    white-space: nowrap;
}

/* The trail is a light tint of the maroon at rest and the solid maroon on hover, so
   it reads as one control with a hover state instead of the two unrelated colours it
   had before (--dd-red links, --dd-maroon current crumb).

   Written as --dd-maroon at an alpha rather than a flat hex, so it is verifiably a
   variant of that colour and not a fourth one in the palette. 0.45 over the white
   page composites to #AE92A6. That alpha was chosen by eye against the comp, NOT
   eyedropped from the frame - so if the frame is ever sampled properly, this single
   number is the only thing that needs to change.

   #AE92A6 is 2.81:1 against white, well under the 4.5:1 WCAG AA minimum for
   normal-size text. That is deliberate and matches the design; it is the same
   trade-off already recorded for the search placeholder earlier in this file. Raising
   the alpha to 0.65 (#8B617F) clears AA at 5.10:1 if that ever becomes a requirement,
   and nothing else here has to move. */
.categories-breadcrumbs .mud-breadcrumb-item a,
.categories-breadcrumbs .mud-breadcrumb-separator {
    color: rgba(76, 12, 58, 0.45);
    text-decoration: none;
}

/* The Home crumb's icon does NOT follow the anchor on its own. The standalone
   `.mud-icon-root.mud-svg-icon { color: var(--dd-red) }` rule earlier in this file is
   (0,2,0) and beats inheritance, so the icon stayed brand red while its label went
   light. `inherit` hands it back to the crumb - the same fix the button-icon rule up
   there uses - and it then tracks the hover colour for free. */
.categories-breadcrumbs .mud-breadcrumb-item a .mud-icon-root.mud-svg-icon {
    color: inherit;
}

/* Solid maroon on hover. The underline was already here on its own; at this rest
   lightness the colour change is what actually reads as the hover state.

   :not(.mud-disabled) keeps the current crumb out of it. MudBlazor already sets
   pointer-events: none there so the hover cannot fire, but the exclusion says so in
   the cascade rather than relying on a framework detail. */
.categories-breadcrumbs .mud-breadcrumb-item:not(.mud-disabled) a:hover {
    color: var(--dd-maroon);
    text-decoration: underline;
}

/* The page you are on: solid maroon, so it is the darkest item in the trail rather
   than one more tint.

   NOTE the selector. MudBlazor 8.7 renders the last crumb as
   <a class="mud-disabled" href="#">, not a <span> - so the rule that used to live
   here, which targeted a span, had never matched anything and the current crumb was
   silently taking the ordinary link colour. Verified against both a product page and
   a category page. */
.categories-breadcrumbs .mud-breadcrumb-item.mud-disabled a {
    color: var(--dd-maroon);
    font-weight: 600;
}

/*Search*/
.search-page.container-fluid {
    margin-top: 50px;
}

h3.search-facets-heading {
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 130.048%;
    letter-spacing: -1.12px;
    color: var(--dd-red);
    margin-bottom: 1rem;
}

h4.search-facets-heading {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 130.048%;
    letter-spacing: -0.88px;
    color: var(--dd-red);
}

.search-facets-item input {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid var(--dd-red);
    border-radius: 3px;
    background: var(--dd-white);
    cursor: pointer;
    position: relative;
}

.search-facets-item input[type="radio"]:checked {
    background: var(--dd-white);
    border-color: var(--dd-red);
}

.search-facets-item input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 2px;
    top: -1px;
    width: 5px;
    height: 9px;
    border: 2px solid var(--dd-red);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

h3.products-search-header {
    font-size: 48px;
    font-style: normal;
    font-weight: 900;
    line-height: 85%;
    letter-spacing: -1.44px;
    text-transform: uppercase;
    color: var(--dd-red);
}

main.search-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
    text-align: center;
}

main.search-results::before, main.search-results::after {
    content: "";
    height: 2px;
    flex: 1;
    background-color: #eb1700;
    margin: 0 10px;
}


/*PRODUCT*/
.product-title {
    font-size: 48px;
    color: #FF3008;
    text-transform: uppercase;
    /* Condensed rather than TT-bold. This is a big uppercase display heading, which
       is the role the condensed cut carries throughout this design; at 48px the bold
       cut sets noticeably wider than the comp.

       Set via the token, not the family name: --dd-font-condensed falls back to
       'TT-bold' then Arial, so a Condensed face that fails to load degrades to what
       was here before rather than to the framework font.

       This is the one change in this batch picked from the design's typographic
       roles rather than measured off the frame - worth an eye against the comp. */
    font-family: var(--dd-font-condensed);
}

p.product-sku {
    font-size: 14px;
    color: #4C0C3A;
}

p.product-price span {
    color: red #FF3008 !important;
    font-size: 18px;
}

/* Sized on the tags the description actually emits, not just the wrapper. The copy
   arrives as a MarkupString, so its <p> and <li> take their size from Bootstrap's
   element selectors, which inheritance from .product-details cannot override.
   Checked against 580140: the PIM copy is plain div/p/ul/li with no inline styles,
   so no !important is needed. Copy that does carry an inline font-size still wins. */
.product-details,
.product-details p,
.product-details li {
    font-size: 16px;
}

.product-details {
    color: #4C0C3A;
}

.product-details ul {
    padding-left: 15px;
}

/* Collapsed product description toggle (show first 3 lines, expand for the rest) */
.product-details-toggle {
    display: inline-block;
    margin-top: 0.5rem;
    cursor: pointer;
}

.add-to-cart-options.card.border-0.shadow-sm.mt-4 {
    box-shadow: none !important;
}

.add-to-cart-options .card-body {
    padding-left: 0;
    background-color: #FAFAFA;
}

.card-actions.p-3 {
    padding-left: 0 !important;
}

.quantity-input-group {
    display: flex;
    align-items: center;
}

input#quantity {
    border-radius: 5px;
}

/* Product detail price. Previously emitted with Bootstrap's `.text-danger`,
   which is the framework's error colour and rendered #DC3545 at weight 400.
   The class is now `.product-price-current` (see ProductDetails.razor.cs). */
.product-price-current {
    color: var(--dd-red);
    font-size: 18px;
    font-weight: 600;
}

button.add-to-cart-btn {
    height: 40px;
    align-self: stretch;
    background-color: var(--dd-red) !important;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700; /* was inheriting 400; design specifies 700 */
}

/* =========================
   Quick Buy dialog
   =========================
   The dialog had no template styling at all — everything below was MudBlazor
   and Bootstrap defaults. No markup changes were needed: QuickAddDialog.razor
   already emits every hook, and AddToCartButton already renders the quantity
   stepper and the button as one flex row, which is exactly the design's
   bottom row.

   The comp measures 600px wide, and MudBlazor's MaxWidth.Small is also 600px,
   so this is the rare 1:1 comp — every number below is read straight off it
   with no scaling. Content sits 24px in from both edges (text starts at x 49
   against a dialog edge of 25; the rule and the button both end at x 600
   against an edge of 624).

   Colours all land on existing tokens: #FF3008 (--dd-red) for the brand, rule,
   title and button, #4C0C3A (--dd-maroon) for the link and price. Only the SKU
   grey (#7B7B7B) and the stepper's border and fill (#CDCDCD on #F8F9FA) are
   new, and they are used nowhere else. Everything is scoped to
   .quick-add-dialog so the product detail page's own add-to-cart row, which is
   a different size, is untouched. */

.quick-add-dialog .mud-dialog-title {
    padding: 24px 24px 0;
    margin-bottom: 0;
}

/* The rule is on the inner header, not on .mud-dialog-title, so it inherits
   the 24px content inset instead of running the full width of the dialog. */
.quick-add-dialog .quick-add-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--dd-red);
}

.quick-add-dialog .quick-add-brand {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--dd-red);
}

.quick-add-dialog .quick-add-close-icon {
    padding: 0;
    margin: 0;
    color: var(--dd-red) !important;
}

.quick-add-dialog .quick-add-close-icon .mud-icon-root {
    font-size: 18px;
}

.quick-add-dialog .mud-dialog-content {
    padding: 0 24px 20px;
    overflow-x: hidden;
}

.quick-add-dialog .quick-add-heading {
    padding-top: 28px;
}

.quick-add-dialog .quick-add-sku {
    font-size: 14px;
    line-height: 1;
    color: #7B7B7B;
    margin: 0 0 13px;
}

.quick-add-dialog .quick-add-title {
    font-family: var(--dd-font-condensed);
    font-size: 32px; /* comp cap height 23px */
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--dd-red);
    margin: 0 0 14px;
}

.quick-add-dialog .quick-add-details-link {
    font-size: 16px;
    line-height: 1;
    color: var(--dd-maroon);
    text-decoration: underline;
}

.quick-add-dialog .quick-add-image-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.quick-add-dialog .quick-add-image {
    max-height: 260px; /* comp artwork is 248px tall */
    /* 10px to match the detail-page gallery tiles and the category cards. Set on the
       <img> itself rather than a wrapper: the image is the only thing painting here,
       so there are no children to paint over the corners. */
    border-radius: 10px;
}

.quick-add-dialog .quick-add-price {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--dd-maroon);
    margin: 0 0 20px;
}

/* Bottom row: stepper fixed at 149px, 16px gap, button takes the rest.
   149 + 16 + 387 = 552, the full content width. Both are 45px tall. */
.quick-add-dialog .quick-add-actions {
    margin-top: 0 !important; /* the mt-3 utility on the wrapper is !important */
}

.quick-add-dialog .add-to-cart-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 0 !important;
}

.quick-add-dialog .quantity-input-group {
    flex: 0 0 149px;
    display: flex;
    align-items: center;
    height: 45px;
    padding: 0 6px;
    background-color: #F8F9FA;
    border: 1px solid #CDCDCD;
    border-radius: 50px;
}

.quick-add-dialog .quantity-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 6px;
    background: transparent;
    border: none;
    color: var(--dd-maroon);
}

.quick-add-dialog .quantity-btn .mud-icon-root {
    font-size: 20px;
    color: var(--dd-maroon);
}

/* Selector carries the id so it outranks `input#quantity`, which sets a 5px
   radius for the product detail page's square field. */
.quick-add-dialog .quantity-input-group input#quantity.quantity-textbox {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    color: var(--dd-maroon);
}

.quick-add-dialog .add-to-cart-btn {
    flex: 1 1 auto;
    height: 45px;
    margin-left: 0 !important; /* clears the ms-2 utility */
    align-self: auto;
}

/* =========================
   Product gallery (product detail page)
   =========================
   The design replaces the one-big-image-plus-thumbnails pattern with a plain
   grid: every image on screen at once, two up, 13px gutters, square tiles with
   a 10px radius and a 1px #D4D4D4 border. Taken from the Figma node directly,
   so these are absolute values, not scaled: the gallery frame is 795x795 with
   two 391px columns and 13px between them, both axes.

   ImageCarousel.razor is shared across tenants and cannot change, so all of
   this is done by restyling what it already renders. There are two candidate
   elements to build the grid from, and the choice matters:

     - The thumbnail strip (.image-carousel-thumbs) renders one button per
       image, but its <img> points at the THB rendition. Measured on product
       580140, those are 300x300 - they would be upscaled into a 391px tile.
     - The carousel inner (.image-carousel-inner) renders one item per image
       pointing at the DET rendition, measured at 500x500 on the same product,
       and Bootstrap merely hides the inactive ones with display:none.

   So the grid is built from the carousel inner and the thumbnail strip is
   hidden. The larger assets are already being downloaded either way; this just
   stops the page throwing them away in favour of smaller ones. It also means
   no :has() conditional is needed - the inner exists whether the product has
   one image or seven - and clicking no longer round-trips to the server to
   change a selection that is now meaningless.

   Deliberately uniform where the comp is not: the comp drops the border on its
   two full-bleed photos and sets a different scaleMode per image (FILL,
   STRETCH, FIT, FILL). Those are art direction on four hand-placed mockups,
   not rules a data-driven gallery can follow, so every tile gets the border
   and object-fit: contain, which never crops a product. */

/* The zoom modal does not work, and its trigger is a transparent button
   stretched over the whole panel, so it would sit between the shopper and the
   gallery. Hidden rather than removed, because the markup is shared. */
.product-image-area .image-carousel-zoom-trigger {
    display: none;
}

/* Selection means nothing once every image is visible. */
.product-image-area .image-carousel-thumbs {
    display: none;
}

.product-image-area .image-carousel-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
    overflow: visible;
}

.product-image-area .image-carousel-item {
    /* Bootstrap hides all but .active and lays the items out as overlapping
       floats; both have to go for the grid to see them as ordinary items.
       float is already ignored on a grid item, but the -100% margin is not. */
    display: block;
    float: none;
    margin-right: 0;
    width: auto;
    aspect-ratio: 1 / 1;
    background-color: #FFFFFF;
    border: 1px solid #D4D4D4;
    border-radius: 10px;
    overflow: hidden;
    transition: none;
}

/* A product with a single image gets one tile across the full width rather
   than a lone square in the left column. */
.product-image-area .image-carousel-item:only-child {
    grid-column: 1 / -1;
}

.product-image-area .image-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*FANCY RADIO BUTTONS*/
/* Hide the actual radio button */
label.product-option-label.form-label {
    color: red;
    display: block;
    font-size: 16px;
}

.product-option-radio-input {
    display: none;
}

/* Style the label as a pill button */
.product-option-radio-label {
    display: inline-block;
    min-width: 100px;
    text-align: center;
    padding: 8px 16px;
    border: none;
    background-color: #FFE8FE;
    border-radius: 6px;
    color: #FF3008;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 4px;
}

/* Hover state */
.product-option-radio-label:hover {
    background: #fff0ee;
}

/* Selected state */
.product-option-radio-input:checked + .product-option-radio-label {
    background-color: #FF3008;
    color: #fff;
}

/* Fix the form-check layout so buttons wrap nicely */
.product-option-radio.form-check {
    display: inline-block;
    padding: 0;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* =========================
   Cart
   ========================= */
/* Cart page heading.

   This rule was missing from this branch entirely — the deployed build has it,
   this one never did, so "Your Shopping Cart" was rendering as a bare MudBlazor
   h5 (20px, weight 500, left aligned) rather than the page title. Reordering it
   above the admin copy block in Cart.razor made that obvious but did not cause
   it; see the note about the branch and the deployed build diverging.

   Reproduced verbatim from the deployed stylesheet rather than re-derived, so
   the two builds agree. `font-weight: 900` is the original author's and left
   alone deliberately - it is heavier than the TT-bold @font-face declares
   (700), so the browser synthesises the rest.

   CORRECTION to an earlier note here, which claimed the horizontal halves of
   `margin: 50px` "do nothing for a centred heading". They do. Horizontal margin
   narrows the line box, and `text-align: center` then centres within whatever
   is left - see the phone override below, where that turned out to matter a
   great deal. */
.cart-title {
    color: var(--dd-red);
    font-family: TT-bold;
    text-align: center;
    font-size: 48px;
    font-style: normal;
    font-weight: 900;
    line-height: 85%;
    letter-spacing: -1.44px;
    text-transform: uppercase;
    margin: 50px !important;
}

/* The heading looked off-centre on a phone, and it genuinely was.

   `margin: 50px` takes 100px off a container whose content box is only 319px at
   375px wide, leaving a 219px line box. The single word "SHOPPING" measures
   254.6px at 48px - wider than the box it has to sit in. A word that overflows
   its line box cannot be centred: it starts at the left content edge and hangs
   off the right. Measured at 375px, that put its midpoint at x=205 against a
   page centre of x=187.5, dragging the whole three-line stack ~18px right while
   "YOUR" and "CART" stayed centred. At 320px it was worse - the word reached
   x=332.6 in a 320px viewport, overflowing the page outright.

   So the horizontal margin goes at phone widths, which alone returns the full
   319px. The size comes down too, because 48px is a desktop size: clamped
   rather than stepped so it tracks the viewport instead of needing a second
   breakpoint, and expressed in em so the letter-spacing scales with it (-1.44px
   at 48px is -0.03em). line-height 85% is drawn for a single desktop line and
   is too tight once the heading wraps.

   Verified: 31.9px at 375px, two balanced lines ("YOUR SHOPPING" / "CART") both
   centred on 187.5; 27.2px at 320px, both centred on 160 and well inside. */
@media only screen and (max-width: 600px) {
    .cart-title {
        font-size: clamp(26px, 8.5vw, 36px);
        line-height: 1;
        letter-spacing: -0.03em;
        margin: 24px 0 !important;
    }
}

/* Remove, as an icon-only square. See the note in Cart.razor for why the label
   went. MudBlazor draws a filled icon button as a circle; the design's other
   buttons are pills, but a lone round red dot beside the quantity stepper reads
   as a status light rather than a control, so this one is squared off to match
   the rectangular button it replaces. 40px is the standard touch target. */
.cart-item-remove-btn.mud-icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 4px;
    flex: 0 0 auto;
}

/* =========================
   Cart Message
   ========================= */
.cart-message-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.cart-message-modal {
    background: var(--dd-white);
    padding: 2rem 2.5rem;
    border-radius: 8px;
    position: relative;
    min-width: 320px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    text-align: center;
}

.cart-message-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #333;
}

.cart-message-viewcart-btn {
    border-radius: var(--dd-radius-btn);
}

.cart-message-success {
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 130.048%;
    letter-spacing: -1.12px;
}

/* The gallery tiles and the category cards round their product images; these two
   surfaces were the only ones still square. Same 10px so every surface showing a
   product photo treats it the same way. */
.cart-message-image {
    border-radius: 10px;
}

.cart-message-sku {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 101.6%;
    letter-spacing: -0.48px;
}

.cart-message-product-name {
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 130.048%;
    letter-spacing: -0.88px;
}

.cart-message-body {
    text-align: left;
    color: var(--dd-maroon);
}

.cart-message-success,
.cart-message-product-name {
    color: var(--dd-red);
}

/*CART / CHECKOUT*/
/* Intentionally empty. The cart and checkout pages render identically on every
   template from css/cart-checkout.css (loaded in App.razor), on top of the
   MudBlazor theme. The Employee-only recolouring that used to live here (red
   titles and item names, TT-bold prices, white icons on outlined buttons, 8%
   gutters) made the Employee cart diverge from Retail and has been removed so
   both stores share one look. Shared cart/checkout changes go in
   css/cart-checkout.css; site-specific tweaks go in Hive Admin
   (SiteSettings.StyleSheet), not here. */


/* ── Account / order pages ───────────────────────────────
   The account area (Account Details, Address Book, Order History) and both
   order-status pages render their headings as a bare <h2> with only Bootstrap
   spacing classes, so they were taking the framework's default near-black
   sans. These give them the same voice as every other page heading on the
   site: the display face in brand red.

   `store-page-title` is a class added to those five <h2> elements. Those
   components are shared with doordashretail, but the class carries no styling
   there, so this is inert for that store.

   Not using .homepage-featured-title's 35-48px sizing - these are page
   headings above dense forms and tables, not section banners, so they stay at
   the 28px the account pages already lay out around. */
.store-page-title {
    font-family: var(--dd-font-display);
    font-size: 28px;
    color: var(--dd-red);
    text-transform: uppercase;
}

/* Order status pages sit in a MudContainer with `my-4`, which is vertical
   margin only - at narrow widths the form ran edge to edge. MudContainer's own
   gutter padding is what this restores; 8% matches the gutter the mobile
   drawer and home-icons blocks use elsewhere in this file. */
.order-status-page {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 851px) {
    .order-status-page {
        padding-left: 8%;
        padding-right: 8%;
    }
}


/* ── Sustainability page ─────────────────────────────────
   The page is four icon/copy pairs, so the wrapper is a two-column grid and the
   rows fall into it in source order: .sustainability-img lands in column one,
   .sustainability-text in column two, four times over. No per-row markup or
   nth-child needed, and adding or removing a pair needs no CSS change.

   Type and colour follow the homepage .home-icons block, which is the same
   pattern in a horizontal arrangement, so the two read as one system.

   These rules style the built-in default in Sustainability.razor.cs. A Hive
   override for the "sustainability" slug replaces that markup wholesale and
   would bring its own structure - the .sustainability-page-content wrapper is
   the hook if it ever needs styling from here. */

.sustainability-wrapper {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 40px 32px;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 0 8px;
}

/* colour lives on the container, not the artwork: the inlined SVGs are all
   fill="currentColor", so recolouring the page is this one declaration. */
.sustainability-img {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dd-red);
}

.sustainability-img svg {
    width: 100%;
    height: auto;
    max-height: 96px;
}

.sustainability-text h2 {
    font-family: var(--dd-font-display);
    font-size: 22px;
    color: var(--dd-maroon);
    margin: 0 0 8px;
}

.sustainability-text p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--dd-maroon);
    margin: 0;
}

/* One column on phones. Source order already alternates icon, copy, icon, copy,
   so collapsing the grid stacks each pair correctly with no reordering. */
@media (max-width: 768px) {
    .sustainability-wrapper {
        grid-template-columns: 1fr;
        gap: 12px;
        justify-items: center;
        text-align: center;
    }

    .sustainability-img {
        max-width: 88px;
    }

    .sustainability-img:not(:first-child) {
        margin-top: 24px;
    }
}


/*LARGE SCREENS*/
@media (min-width: 1400px) {
    .homepage-featured-title, h5.homepage-featured-title {
        max-width: 1320px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .home-icons, .custom-callout {
        max-width: 1320px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 50px 0;
    }
}






/* =========================
   Responsive — AppBar (max 1279px)

   This boundary was previously 1450px, to stop the header overflowing. The
   overflow was real, but its cause was the logo rendering at 399px instead of
   the designed 191px (see .main-layout-logo-img above). Collapsing the nav was
   treating the symptom, and it had a significant side effect: 1440px — the
   width the desktop design is drawn at, and a very common laptop width — falls
   below 1450, so the reference viewport got the compact treatment. At 1440 the
   header rendered 64px instead of 81px, the category links disappeared, and
   the drawer that replaced them carries no category navigation at all.

   Sizing this boundary, measured on production's nine-item nav at the designed
   15px with the logo at 22px:

       logo                191px
       9 nav entries       671px
       8 gaps x 32px       256px
       header actions      176px
       gutters              48px
       ------------------------
       minimum needed     1342px

   1400px is the boundary, leaving ~58px of slack for a scrollbar and for font
   metrics settling. The expanded search box is absolutely positioned and
   overlays the nav rather than displacing it, so it does not add to the total.

   Header actions was 133px (three icons) and the boundary was 1360px. The
   order-status icon added by the design is a fourth: each action is a 1.7rem
   glyph with 8px margins either side, so ~43px, and the boundary moved with
   it. That is the coupling below playing out in practice — the icon count is
   part of this arithmetic just as much as the nav is.

   Note that 1400px now coincides with several unrelated `min-width: 1400px`
   blocks elsewhere in this file, which mirror Bootstrap's xxl container. Those
   have nothing to do with the header; only the block immediately below and its
   `min-width: 1400px` partner further down are the nav breakpoint.

   IMPORTANT — this number is coupled to the navigation, and the navigation is
   NOT in this repository: top-level items are configured in Hive Admin. Adding
   one more category costs roughly 100px + a 32px gap, which overflows this
   boundary immediately. Anyone changing the nav must re-check this value.
   A fixed pixel breakpoint is the wrong mechanism for content whose width is
   set outside the codebase; see the note in the review for the durable options.
   ========================= */
@media (max-width: 1399px) {
    /* Keep the collapsed (hamburger) header at its original compact height;
       the taller 81px bar is only for the full desktop/tablet nav. */
    .mud-appbar,
    .main-layout-appbar {
        height: 64px;
    }

    .main-layout-appbar .mud-toolbar {
        height: 64px;
        min-height: 64px;
    }

    .mud-main-content {
        padding-top: 64px !important;
    }

    .main-layout-actions {
        flex-direction: row;
        align-items: center;
        width: auto !important;
        margin: 0 8px 0 auto !important;
        gap: 0;
        flex-wrap: nowrap;
    }

    .main-layout-search,
    .main-layout-account {
        width: auto !important;
        flex-basis: auto !important;
        margin: 0 !important;
        justify-content: flex-end !important;
        align-items: center !important;
        order: unset !important;
        display: flex !important;
    }

    button.mud-button-root.mud-icon-button.mud-primary-text.hover\:mud-primary-hover.mud-ripple.mud-ripple-icon.search-icon-collapsed.search-toggle-icon {
        padding: 0;
    }

    /* The search field's 42px sizing used to be duplicated here. It now lives with
       the rest of the .search-box-expanded rules and applies at every width, because
       the field measured 63px on the desktop bar too - not just in this collapsed
       one. Nothing width-specific about it remains. */

    .main-layout-logo-link {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-layout-logo-link {
        margin-left: 25px !important;
    }

    .main-layout-account {
        margin-right: 0 !important;
    }

    .main-layout-hamburger {
        display: inline-flex !important;
        margin-left: 8px;
    }

    .main-layout-nav {
        display: none !important;
    }

    .main-layout-account-items {
        display: none !important;
    }


    .mud-drawer.mud-drawer-temporary.mud-drawer-pos-left.mud-drawer--closed {
        left: 100%;
    }

    aside.main-layout-mobile-drawer {
        width: 100% !important;
        background-color: var(--dd-red);
    }

    .main-layout-mobile-drawer-header {
        background: #FFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 8%;
    }

    .main-layout-mobile-drawer-header .main-layout-logo-img {
        width: 161.285px !important;
        height: 17.94px !important;
        filter: brightness(0) invert(1);
    }

    .main-layout-mobile-drawer-menu {
        padding: 15px 8%;
    }

    .main-menu-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .main-menu-inner .mud-button .mud-button-label {
        color: #FFF;
        font-size: 30px;
        font-family: 'TT-bold';
        text-decoration: underline;
    }

    .main-layout-mobile-drawer-account {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        padding: 16px 8%;
    }

    .main-layout-mobile-drawer-account a {
        color: #FFF !important;
        font-size: 20px;
        font-weight: 400;
    }

    .mobile-drawer-footer {
        margin-top: auto;
        background: #fff;
        border-radius: 12px 12px 0 0;
    }

    .mobile-drawer-footer-top {
        padding: 16px 8%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-drawer-footer-email {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mobile-drawer-email-btn {
        background-color: #FF3008;
        color: #fff;
        padding: 8px 20px;
        border-radius: 25px;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        /* Nothing to animate before; it inverts with the rest now. */
        transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        flex-shrink: 0;
    }

    .mobile-drawer-hours {
        font-size: 0.8rem;
        color: #333;
        line-height: 1.4;
    }

    .mobile-drawer-disclaimer {
        font-size: 0.75rem;
        color: #555;
        line-height: 1.5;
        margin: 0;
    }

    .mobile-drawer-social {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .mobile-drawer-social-link {
        color: #FF3008;
        font-size: 1.2rem;
        text-decoration: none;
        transition: opacity 0.2s;
    }

    .mobile-drawer-social-link:hover {
        opacity: 0.7;
    }

    .mobile-drawer-footer-ribbon {
        background-color: #FF3008;
        padding: 10px;
        text-align: center;
        border-radius: 0 0 0 0;
    }

    .mobile-drawer-overture-img {
        display: block;
        margin: 0 auto;
        height: auto !important;
        max-height: 40px !important;
        width: auto !important;
        max-width: 220px !important;
        object-fit: contain;
    }

    .mud-grid.mud-grid-spacing-xs-6.justify-start.site-footer-grid {
        display: none;
    }

    .site-footer-bottom {
        display: none;
    }

    /* The compact footer lives in this block, which begins at 1399px - the header
       breakpoint - not at a phone width. So a 1280px laptop gets the phone footer,
       and a percentage background grows with the viewport: at 1280px
       `calc(50% - 50px)` drew the mark 590px wide. That is the "made with Love logo
       is huge" report.

       Capped rather than re-tuned, because the percentage is right where this block
       was designed to apply: at 375px it gives 137px, and the cap only starts biting
       above a 460px viewport. `auto` keeps the mark's own aspect ratio.

       The real fix is that this footer treatment does not belong at 1399px at all -
       it should end where the phone layout ends, and a laptop should get the full
       footer grid back. That is a visible change to what laptop users see, so it is
       raised separately rather than folded in here. */
    footer.site-footer.mud-footer {
        background-image: url("https://dev.cssps.com/employeedoordashstore/images/assets/overture made with love.svg");
        background-position: center;
        background-size: min(calc(50% - 50px), 180px) auto;
        background-repeat: no-repeat;
        padding: 25px;
    }
}

/*Standard mobile*/
@media only screen and (max-width: 850px) {
    /* Single column: red backdrop fills the viewport and centers the login box,
       instead of collapsing to the card height (which left white space below). */
    .main-layout-content-container:has(.login-card) {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* The whole viewport now: the app bar is hidden on this page (see the takeover
           rule in the LOGIN block above), so subtracting its height left a strip of
           background below the fold. */
        min-height: 100dvh;
        padding: 24px 16px !important;
        box-sizing: border-box;
    }

    .login-card.card.my-5.shadow.w-100 {
        max-width: 350px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .emp-login-bg {
        display: none;
    }

    /* Hero copy, mobile. Every value here is measured off the mobile frame
       against the mobile artwork, and the artwork matters: it is a 360x460
       panel of flat --dd-red with the lifestyle photo inset at y 262..435,
       x 23..335. Those numbers are sampled from the asset's own pixels, not
       estimated. The copy belongs on the flat red ABOVE that photo - this is
       not text over a photograph, which is what the "text bleeds over the
       banner image" report was describing.

       The desktop rule being overridden here places the block at top: 50% with
       width: 48%, the 48% being the red half of the 1442px desktop frame where
       the photo starts at x 690. Applied to a 375px phone that produced a
       180px-wide, 9px-tall box holding a 71px headline, so the copy ran roughly
       180px past the bottom of the image.

       Anchored to the top rather than centred, because the artwork's own
       composition is what fixes where the copy goes. The image is pinned at its
       natural 360x460 for any viewport >= 360 (object-fit: contain, so it is
       height-limited and the side bars are the same red), which is why a fixed
       pixel offset tracks the artwork exactly. Verified at 375 and 430: line
       one's cap top lands within 1px of the frame.

       Below 360px the image letterboxes vertically and the copy sits up to
       ~20px high of the now-smaller artwork (measured: 20px at a 320px
       viewport). It still clears the photo and keeps its three-line break, so
       it degrades rather than breaks. Making it exact would mean giving the
       carousel a fluid aspect-ratio instead of the fixed 460px height it has
       below, which is a bigger change than this report warrants. */
    .homepage-banner-overlay.banner-overlay {
        top: 47px; /* lands line one's cap top at y 50, per the frame */
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        margin-left: 0;
        transform: none;
        padding: 0 16px;
        text-align: center;
    }

    button.mud-button-root.mud-icon-button.mud-inherit-text.hover\:mud-inherit-hover.mud-ripple.mud-ripple-icon.main-layout-hamburger {
        display: block !important;
        margin: 0;
    }

    /* Mobile header: red background with white logo and white icons.
       Scoped to the mobile appbar only so desktop/tablet (white) header
       does not regress. */
    .main-layout-appbar,
    .main-layout-appbar.mud-appbar {
        background-color: var(--dd-red) !important;
        border-bottom: none !important;
    }

    /* 14px, off the mobile comp: the wordmark measures 120x14 in a 360-wide frame.
       The asset is a 191x22 lockup (ratio 8.68) and the comp glyph is 120x14 (8.57),
       so the comp value is the whole lockup rather than ink inside padding - 14px is
       the element height, not a guess at it.

       Was 25px, which rendered 217px wide on a 375px viewport: 58% of the screen
       taken by the logo, the "on mobile, the doordash logo is too large" report.
       Only the height is set; width follows the SVG's own ratio. */
    .main-layout-logo-img {
        height: 14px !important;
        /* Render the (colored) logo asset in white without a separate asset. */
        filter: brightness(0) invert(1);
    }

    /* Header icons (account, cart, login) in white and clearly visible. */
    .main-layout-appbar .appbar-action-fa {
        color: #fff !important;
        opacity: 1;
    }

    /* Hamburger, search toggle and any MudBlazor svg icons in the appbar white,
       including while the search/menu are open/active. */
    .main-layout-appbar .mud-icon-root,
    .main-layout-appbar .mud-icon-root.mud-svg-icon,
    .main-layout-appbar .mud-button-root .mud-icon-root {
        color: #fff !important;
    }

    /* Preserve visible tap/active/focus feedback on the white icons. */
    .main-layout-appbar .appbar-action-fa:hover,
    .main-layout-appbar .appbar-action-fa:focus,
    .main-layout-appbar .appbar-action-fa:active,
    .main-layout-appbar .mud-button-root:hover .mud-icon-root,
    .main-layout-appbar .mud-button-root:focus-visible .mud-icon-root {
        color: #fff !important;
        opacity: 0.75;
    }

    .main-menu-inner {
        display: flex;
        flex-direction: column;
    }

    /* 44px is not a guess. The frame's headline caps measure 32px, and
       canvas measureText on the condensed face at 44px reports an actual ascent
       of exactly 32. Line-height 44 matches the frame's 44.5px line pitch.

       max-width forces the frame's three-line break (DOORDASH / GEAR FOR /
       EVERY TEAM) without hard-coding <br> into the Hive-supplied banner name.
       The widest line renders 239px here against the frame's 218px, because the
       condensed Black cut is synthesised - the same caveat already recorded on
       the desktop title rule - so everything sets about 9% wide. 280px leaves
       room for that and still cannot fit "DOORDASH GEAR" on one line (~345px),
       so the break holds whether the face gets narrower or stays as it is.

       margin-bottom is what lands the button on the frame's y 196. */
    .homepage-banner-title {
        font-size: 44px;
        line-height: 44px;
        max-width: 280px;
        margin: 0 auto 17px;
    }

    /* mt-2 is a Bootstrap utility, so it is !important and adds 8px on top of
       the margin above. Neutralised here rather than subtracted from
       margin-bottom, so the gap stays one number in one place. */
    .homepage-banner-btn.mt-2 {
        margin-top: 0 !important;
    }

    /* Frame button is 113 x 39. MudBlazor's .mud-button-label carries its own
       40px height, which together with the desktop rule's 8px padding and 2px
       border rendered 60px tall - the label has to be released before a height
       on the button can take effect. 35px + 2px borders = the 39px box. */
    .homepage-banner-btn {
        height: 39px;
        padding: 0 !important;
    }

    .homepage-banner-btn .mud-button-label {
        height: auto;
        line-height: 35px;
    }

    /* 113px is the frame's button width. Was 125px, which predates the frame. */
    a.mud-button-root.mud-button.mud-button-filled.mud-button-filled-primary.mud-button-filled-size-medium.mud-ripple.homepage-banner-btn.mt-2 {
        width: 113px;
    }

    .homepage-featured-title, h5.homepage-featured-title {
        font-size: 35px;
    }

    .home-icons {
        flex-direction: column;
        padding: 24px;
        gap: 24px;
    }

    /* `height` here, rather than the `min-height` the base rule uses, is what
       pushed the callout's contents out of their own box. A fixed height cannot
       grow, and .custom-callout-bg is a flex container with `align-items: center`,
       so once the text needed more room than 315px the surplus split evenly above
       and below - the heading floated out over the top edge and the button hung
       off the bottom, both drawn outside the purple panel.

       Measured at 375px: content 460px against a 315px box, so 72px escaped at
       each end. It was not only phones - at 610px the content still wanted 352px
       and spilled 19px each way. The whole 601-850 band was affected.

       min-height keeps the 315px floor the design wants (at 768px the content is
       276px and the box still renders at exactly 315px, unchanged from before)
       while letting it grow on the narrow widths where it has to. */
    .custom-callout-bg {
        background-image: url(https://dev.cssps.com/employeedoordashstore/images/assets/home_custom_callout.png);
        min-height: 315px;
        background-position: left;
    }

    .custom-callout-content {
        width: 100%;
    }

    button.add-to-cart-btn {
        padding: revert;
        min-width: 100px;
        padding: 5px;
    }

    .homepage-featured .container:first-of-type {
        grid-template-columns: 1fr;
    }

    .homepage-banner-carousel {
        height: 460px; /* was 550px — the desktop height was repeated here; the
                          mobile design frame specifies 460px */
    }

    .homepage-banner-container.banner-container {

    }
}

/* Keep the drawer account/login links hidden only above the hamburger
   breakpoint. The hamburger appears at <=1399px, so this must match (1400px)
   — otherwise the account section is hidden while the drawer is still in use.
   These two values are a pair: change one and you must change the other. */
@media (min-width: 1400px) {
    .main-layout-mobile-drawer-account {
        display: none !important;
    }

    /* The expanded search field is absolutely positioned over the toolbar, and
       at this width the nav runs right up to the action icons, so the field
       would land on top of nav text. Hide the nav while it is open.

       visibility, not display: display:none would collapse the nav out of the
       toolbar's flex layout and the logo and icons would jump the moment the
       field opened — the same reflow-on-hover problem the tooltip rule caused.
       visibility:hidden leaves the box in place, so nothing moves.

       .search-box-popup only exists in the DOM while the field is open (it is
       inside an @if in SearchBox.razor), so :has() on it is the open state. */
    .main-layout-appbar:has(.search-box-popup) .main-layout-nav {
        visibility: hidden;
    }
}

/* =========================
   Responsive — Search & Menu (max 600px)
   ========================= */
@media (max-width: 600px) {
    .main-menu .mud-nav-link,
    .main-menu .mud-menu-item {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .search-box-container {
        position: static;
    }

    .search-box-popup {
        position: absolute;
        left: 50%;
        right: auto; /* clears the desktop rule's right anchor */
        transform: translateX(-50%);
        top: 100%;
        width: 100vw;
        z-index: 1000;
        background: transparent;
        padding: 8px 0;
        box-shadow: none;
        display: flex;
        justify-content: center;
    }

    .search-box-expanded {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 0;
    }

    .footer-logo-container {
        justify-content: center;
        padding-bottom: 1rem;
        padding-right: 12px;
    }

    .footer-logo {
        max-width: 80vw;
        max-height: 60px;
        margin-right: 12px;
    }
}

/* Keep the search close (X) button visible on desktop/tablet too. It was
   previously hidden here, so once the search opened there was no visible
   control to close it. */
@media (min-width: 601px) {
    .search-close-mobile {
        display: inline-flex !important;
    }
}

/* On the white desktop/tablet header (>850px) the search close (X) must be red
   to be visible. On the red mobile header (<=850px) it stays white via the
   mobile appbar icon rules above. */
@media (min-width: 851px) {
    .main-layout-appbar .search-close-mobile .appbar-action-fa,
    .main-layout-appbar .search-close-mobile .mud-icon-root {
        color: var(--dd-red) !important;
    }
}

/* =========================
   Responsive — Mobile (max 768px)
   ========================= */
@media (max-width: 768px) {
    /* ── Category page on a phone ─────────────────────────────────────────────
       Measured at 375px before this block: the product grid was 472px wide
       starting 64px in, so it ran to x=536 - 161px past the right edge. The
       heading and the description are centred inside that same over-wide
       container, which is why the description ran off the page and the title
       wrapped mid-word.

       Three separate things stacked up to produce it, and all three are undone
       below. The rule immediately following already stacked the layout and cut
       the padding to 0.75rem, but it was only ever half the fix.

       1. `.categories-layout.has-filters` (0,2,0) sets `padding: 0 64px 25px`
          at every width and outranks the 0.75rem below it (0,1,0). That is the
          desktop gutter - 128px of a 375px screen. It is re-stated here at
          matching specificity rather than forced with !important.

       2. `.categories-layout` is `align-items: flex-start`. Once
          flex-direction is column, align-items governs the CROSS axis, which
          is now horizontal - so .categories-content is sized to its own
          content width instead of the full line. `stretch` is the fix.
          (.categories-content already carries `min-width: 0`, so the usual
          flex `min-width: auto` culprit was not involved here.)

       3. `.categories-products .row` is `repeat(3, 1fr)` with a 42px gap at
          every width. Three tracks plus 84px of gap cannot fit a phone, and
          grid tracks will not shrink below their content, so the row pushed
          the whole column out.

       The `.product-listing` overrides matter too: the shared
       `max-width: 575px` block further down this file forces
       `flex: 0 0 50%; width: 50%; max-width: 50%` onto every `.product-listing`.
       Those are flex properties landing on a GRID item, where `width: 50%`
       means half of its own track rather than half the row - which is what
       squeezed the cards to 67px and wrapped their titles one letter per line.
       They are neutralised here rather than edited there, because that block
       is shared with search and the recommendation rails.

       Verified at 375x812 after the change: document scrollWidth back to 375,
       layout padding 0 10.5px 25px, content 354px (x=11 to x=365), two 169px
       grid columns, eleven cards in matched pairs. */
    .categories-layout {
        flex-direction: column;
        padding: 0 0.75rem 25px;
        align-items: stretch; /* see (2) above */
    }

    /* Same specificity as the desktop rule it replaces; see (1) above. */
    .categories-layout.has-filters {
        padding: 0 0.75rem 25px;
        gap: 1rem;
    }

    .categories-products .row {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Undo the shared 50%-width flex sizing for grid items; see the note above. */
    .categories-products .row > .product-listing {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 36px is drawn for a desktop column. On a 354px line a name like
       "Pants, Hats & Socks" takes two lines of it and pushes the products
       below the fold before the shopper has seen one. */
    .categories-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    /* The 470px cap is wider than the phone, so it did nothing except let the
       text inherit the over-wide container. */
    .categories-description {
        max-width: 100%;
    }

    /* The card is drawn for a 294px-wide desktop column. At 169px the 236px
       image is taller than the card is wide, so it comes down with it, and the
       generous desktop padding comes in proportionally. */
    .categories-products .product-card-image-frame,
    .categories-products .product-card-image {
        height: 150px;
    }

    .categories-products .product-card.card.h-100 {
        min-height: 0 !important;
    }

    .categories-products .product-card-image-wrapper {
        padding: 12px 12px 0;
    }

    .categories-products .categories-product-body {
        padding: 12px 12px 64px !important; /* 64 = 12 below the button + 40 button + 12 gap */
    }

    .categories-products .product-card-actions {
        bottom: 12px;
        padding: 0 12px;
    }

    .slider-nav {
        flex: 0 0 auto;
        width: 100%;
        position: static;
    }

    .filter-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .filter-toggle-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        width: auto;
        margin-right: 1rem;
        padding: 0.75rem 1rem;
        background: var(--dd-red);
        color: var(--dd-white);
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
    }

        .filter-toggle-btn .mud-icon-root {
            color: var(--dd-white) !important;
            fill: var(--dd-white) !important;
        }

    .filter-product-count {
        white-space: nowrap;
        font-size: 0.85rem;
        color: var(--dd-maroon);
        font-weight: 600;
        flex-shrink: 0;
    }

    .slider-nav.filters-closed {
        display: none;
    }

    .slider-nav.filters-open {
        display: block;
    }

    .categories-products-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .featured-carousel-wrapper {
        display: flex;
        flex-direction: column;
    }

    .featured-carousel-track {
        order: 1;
        grid-template-columns: repeat(2, 1fr);
        padding-top: 0;
        align-items: start;
    }

    .featured-carousel-controls {
        order: 2;
        position: static;
        justify-content: center;
        margin-top: 0.75rem;
    }

    .featured-carousel-item:nth-child(n+3) {
        display: none;
    }

    .featured-carousel-item .product-card {
        height: auto !important;
        min-height: unset !important;
    }

    .featured-carousel-item .categories-product-image-wrapper {
        padding: 0.5rem !important;
    }

    .featured-carousel-item .categories-product-image {
        max-height: 80px;
        object-fit: contain;
    }

    .featured-carousel-item .categories-product-body {
        padding: 0.4rem 0.5rem;
    }

    .featured-carousel-item .product-card-title {
        font-size: 0.8rem;
        margin-bottom: 0.15rem;
    }

    .featured-carousel-item .product-card-sku,
    .featured-carousel-item .product-card-price {
        font-size: 0.75rem;
        margin-bottom: 0.15rem;
    }
}

/* =========================
   Responsive — Small Mobile (max 575px)
   Force 2 product cards per row
   ========================= */
@media (max-width: 575px) {
    .categories-product-col,
    .product-listing {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

        .categories-product-col .product-card,
        .product-listing .product-card {
            min-height: 220px;
        }

    .categories-product-image-wrapper,
    .product-listing-img {
        padding: 0.5rem !important;
    }

    .categories-product-image,
    .product-listing img {
        max-height: 90px;
        object-fit: contain;
    }

    .categories-product-body {
        padding: 0.4rem 0.5rem !important;
    }

    .product-card-title {
        font-size: 0.85rem;
        margin-bottom: 0.15rem;
    }

    .product-card-sku,
    .product-card-price {
        font-size: 0.75rem;
        margin-bottom: 0.1rem;
    }
}

@media (max-width: 1400px) and (min-width: 1201px) {
    .homepage-banner-img {
        object-fit: contain;         
        background: #FF3008;          
    }
}

@media (max-width: 1200px) {
    .homepage-banner-img {
        object-fit: contain;
        background: #FF3008;
    }
}

/* =========================
   Search Page (DoorDashEmployee)
   ========================= */

.search-page {
    padding: 1.5rem 1.5rem 0;
}

.search-page .search-layout {
    --bs-gutter-x: 0.75rem;
}

.search-page .search-facets {
    padding-left: 0.75rem;
    padding-right: 0.5rem;
}

.search-page .search-results {
    padding-left: 0.5rem;
    padding-right: 1rem;
}

/* Keep ProductList aligned and full-width inside search results */
.search-page .search-products-host > .container {
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.search-page .search-products-host > .container > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Facet headings match category filter styling */
.search-page .search-facets > .facets-sidebar > .search-facets-heading {
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 130.048%;
    letter-spacing: -1.12px;
    color: var(--dd-red);
    margin-bottom: 1rem;
}

.search-page .search-facets-group.facet-group > .search-facets-heading,
.search-page .facet-group h4 {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 130.048%;
    letter-spacing: -0.88px;
    color: var(--dd-red);
}

.search-page .search-facets-list,
.search-page .facet-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-page .search-facets-item,
.search-page .facet-group li {
    margin-bottom: 0.4rem;
    color: var(--dd-maroon);
}

.search-page .search-facets-item label,
.search-page .facet-group li label {
    margin-left: 0.35rem;
    cursor: pointer;
    color: var(--dd-maroon);
    font-size: 0.9rem;
}

/* Checkbox style aligned to category filter checkboxes */
.search-page .facet-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid var(--dd-red);
    border-radius: 3px;
    background: var(--dd-white);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

.search-page .facet-group input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 2px;
    top: -1px;
    width: 5px;
    height: 9px;
    border: 2px solid var(--dd-red);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* Sort radios */
.search-page .search-facets-item input[type="radio"] {
    accent-color: var(--dd-red);
}

/* Links / helper text */
.search-page .price-link,
.search-page .search-facets-clear,
.search-page .search-results-count,
.search-page .search-no-results {
    color: var(--dd-maroon);
}

.search-page .price-link:hover,
.search-page .search-facets-clear:hover {
    color: var(--dd-red);
    text-decoration: underline;
}

.search-page .products-search-header {
    color: var(--dd-red);
    font-family: "TT-bold";
    font-size: 36px;
    margin-bottom: 0.75rem;
}

/* =========================
   Search Page Mobile (DoorDashEmployee)
   ========================= */
@media (max-width: 768px) {
    .search-page {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .search-page .search-layout {
        --bs-gutter-x: 0.5rem;
    }

    .search-page .search-facets {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 1rem;
    }

    .search-page .search-results {
        padding-left: 0;
        padding-right: 0;
    }

    .search-page .products-search-header {
        font-size: 28px;
        margin-bottom: 0.5rem;
    }

    .search-page .search-results-count {
        font-size: 0.9rem;
        margin-bottom: 0.75rem !important;
    }

    .search-page .search-products-host > .container > .row {
        margin-left: -0.3rem;
        margin-right: -0.3rem;
    }

    .search-page .search-products-host .product-listing {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }

    .search-page .search-products-host .product-card {
        min-height: 240px;
    }

    .search-page .search-products-host .categories-product-body {
        padding: 0.4rem 0.5rem !important;
    }

    .search-page .search-products-host .product-card-title {
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
        white-space: normal;
    }

    .search-page .search-products-host .product-card-sku,
    .search-page .search-products-host .product-card-price {
        font-size: 0.78rem;
        margin-bottom: 0.1rem;
    }

    .search-page .pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .search-page .pagination .page-link {
        padding: 0.35rem 0.55rem;
        font-size: 0.85rem;
    }
}

/* =========================
   Product Recommendations 
   ========================= */
.product-recommendations-wrap {
    margin-top: 2rem !important;
}

.product-recommendations-wrap .homepage-featured-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0.75rem !important;
}

.product-recommendations-wrap .row {
    justify-content: flex-start;
}

.product-recommendations-wrap .row:has(.product-listing:only-child) .product-listing {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.product-recommendations-wrap .row:has(.product-listing:nth-child(2):last-child) .product-listing {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

.product-recommendations-wrap .row:has(.product-listing:nth-child(3):last-child) .product-listing {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
}

.product-recommendations-wrap .product-listing-img {
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .product-recommendations-wrap .product-listing {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Add-to-cart recommendations (Employee) */
.add-to-cart-recommendations-wrap {
    margin-top: 1.5rem !important;
}

/* Reuse employee heading tone */
.add-to-cart-recommendations-wrap .homepage-featured-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0.75rem !important;
    text-align: left;
}

/* Center cards and keep spacing consistent */
.add-to-cart-recommendations-wrap .row {
    justify-content: center;
}

.add-to-cart-recommendations-wrap .product-listing-img {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile friendly */
@media (max-width: 768px) {
    .add-to-cart-recommendations-wrap .homepage-featured-title {
        font-size: 1.5rem;
    }
}

/* Add-to-cart lightbox mobile */
@media (max-width: 768px) {
    .cart-message-modal {
        width: calc(100vw - 1.25rem);
        max-width: calc(100vw - 1.25rem);
        min-width: 0 !important;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1rem 0.85rem;
        border-radius: 12px;
    }

    .cart-message-wrapper {
        margin: 0;
        gap: 0.75rem !important;
    }

    .cart-message-image-col {
        width: 100%;
        justify-content: center !important;
    }

    .cart-message-image {
        width: 5.5rem !important;
        height: 5.5rem !important;
        margin-right: 0 !important;
    }

    .cart-message-success {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .cart-message-product-name {
        font-size: 1rem;
        line-height: 1.3;
        word-break: break-word;
    }

    .cart-message-actions {
        margin-top: 0.75rem;
    }

    .cart-message-viewcart-btn {
        width: 100% !important;
    }

    .cart-message-close {
        top: 0.25rem;
        right: 0.5rem;
        font-size: 1.6rem;
    }
}

.main-menu-header {    
    cursor: default;
}

/* ============================================================
   Shop the Favorites — carousel fixes
   ------------------------------------------------------------
   FeaturedCategorySection renders TWO Bootstrap carousels for the
   favorites/featured products: a desktop 4-up (#productCarouselDesktop,
   wrapped in .featured-carousel-desktop-only) and a mobile 2-up
   (#productCarouselMobile, wrapped in .featured-carousel-mobile-only).
   Only one must be visible at a time — otherwise the same products are
   rendered twice and appear "duplicated". The carousel uses the real
   collection of products (no artificial padding); the navigation arrows
   (data-bs-slide) page through the remaining favorites via Bootstrap.
   Mirrors the working setup in doordashretail.css.
   ============================================================ */

/* Desktop carousel is visible by default; the mobile one is hidden until
   the small-screen breakpoint below swaps them. */
.featured-carousel-mobile-only {
    display: none;
}

/* Product-card images.
   ProductCard tags its <img> with the shared `fallback-image` class, and
   this template hides `.fallback-image` globally (used to suppress the
   category-card <img> in favour of CSS background images). That rule also
   hid every product image — including "Shop the Favorites". Reveal the
   product images (scoped to .product-card-image so category navigation
   cards keep using their backgrounds). The image itself is chosen by
   ProductCard via the shared default/thumbnail media logic
   (Thumbnail → Icon → Detail → Zoom), i.e. the same selection used
   elsewhere on the site. */
.product-card-image {
    display: block !important;
    max-width: 100% !important;
    max-height: 180px;
    height: auto;
    object-fit: contain;
}

.featured-carousel-desktop-only .product-card-image-wrapper,
.featured-carousel-mobile-only .product-card-image-wrapper {
    min-height: 180px;
}

/* Carousel navigation arrows: red glyphs inside the existing circular
   red-outlined buttons (matches the Figma design). Replace Bootstrap's
   default white SVG icons with red chevrons. */
.featured-carousel-desktop-only .btn.btn-outline-secondary.btn-sm,
.featured-carousel-mobile-only .btn.btn-outline-secondary.btn-sm {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--dd-red);
    background: transparent;
}

.featured-carousel-desktop-only .carousel-control-prev-icon,
.featured-carousel-desktop-only .carousel-control-next-icon,
.featured-carousel-mobile-only .carousel-control-prev-icon,
.featured-carousel-mobile-only .carousel-control-next-icon {
    background-image: none !important;
    filter: none !important;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.featured-carousel-desktop-only .carousel-control-prev-icon::before,
.featured-carousel-mobile-only .carousel-control-prev-icon::before {
    content: "\2039"; /* ‹ */
    color: var(--dd-red);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.featured-carousel-desktop-only .carousel-control-next-icon::before,
.featured-carousel-mobile-only .carousel-control-next-icon::before {
    content: "\203A"; /* › */
    color: var(--dd-red);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

/* On hover the button fills red (see .homepage-featured .btn:hover);
   flip the arrow glyph to white so it stays visible. */
.featured-carousel-desktop-only .btn.btn-outline-secondary.btn-sm:hover .carousel-control-prev-icon::before,
.featured-carousel-desktop-only .btn.btn-outline-secondary.btn-sm:hover .carousel-control-next-icon::before,
.featured-carousel-mobile-only .btn.btn-outline-secondary.btn-sm:hover .carousel-control-prev-icon::before,
.featured-carousel-mobile-only .btn.btn-outline-secondary.btn-sm:hover .carousel-control-next-icon::before {
    color: var(--dd-white);
}

/* Keep the carousel cards from being clipped by the slide/track overflow. */
#productCarouselDesktop .carousel-inner,
#productCarouselDesktop .carousel-item,
#productCarouselMobile .carousel-inner,
#productCarouselMobile .carousel-item {
    overflow: visible;
}

/* Mid-size desktop/tablet: keep exactly 4 products across in the desktop
   carousel so a full slide stays aligned as the viewport scales down. */
@media (min-width: 821px) and (max-width: 1200px) {
    .featured-carousel-desktop-only #productCarouselDesktop .product-listing {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }
}

/* Small screens: hide the 4-up desktop carousel and show the 2-up mobile
   one, with its navigation arrows moved below the products. */
@media (max-width: 820px) {
    .featured-carousel-desktop-only {
        display: none !important;
    }

    .featured-carousel-mobile-only {
        display: flex !important;
        flex-direction: column !important;
    }

    .featured-carousel-mobile-only > #productCarouselMobile {
        order: 1;
    }

    .featured-carousel-mobile-only > .featured-carousel-mobile-controls {
        order: 2;
        justify-content: center !important;
        margin-top: 0.75rem;
        margin-bottom: 0 !important;
        width: 100%;
    }

    #productCarouselMobile .carousel-item .row {
        margin-left: 0;
        margin-right: 0;
    }
}