/* ============================================================================
   basev26.css — REVIVE-2019 desktop reskin (the "v26" skin layer)
   ----------------------------------------------------------------------------
   Loaded ONLY when the SkinVersion flag resolves to "v26" (see Default.Master:
   ?skin=v26 query string > sp_skin cookie > SkinVersion appSetting; default v6).
   Loads after the standard stylesheet set so its rules win. The default skin
   (v6) never loads this file and remains untouched.

   ORGANIZATION (consolidated 2026-07 — REVIVE-2047): rules are grouped by
   component, not by review round. Where a rule exists to beat a specific legacy
   cascade constraint (an !important in base.css, a specificity trap in
   tabsWidget.css / basev65-overrides.css, a relocated inline style in a page
   css), the comment on that rule records it — keep those comments; they are
   the institutional memory of the cascade.

   CONVENTIONS (settled during the Stage 1 walkthroughs):
   - ACTION COLOR = DENIM. Solid denim = buttons/actions ONLY — including
     checkout confirm. GGB red stays brand chrome / errors / status.
   - Active tab = ink label + inset denim underline. One tab language sitewide.
   - Selected (not a button!) = denim TINT + denim border + denim-dark label;
     selected list rows = tint + 3px denim left inset edge + ink.
   - Destructive = quiet card chip, error-red on hover.
   - Favorites = quiet card chip with denim text (deliberately underplayed).

   CHANGELOG (stage history; details in the REVIVE tickets / PR history):
   Stage 0 fonts+tokens · 1 font aliasing, surfaces, sprite buttons, v65 vars ·
   1.1 figure-ground, tiles, sweep round 2, order-history · 1.2 mega-menu
   rhythm, cart tabs v1, DT shield, fav chips, skin notice · 1.3 payment list,
   upsell, icon chips, favorites tiles, spinners, menuItem_G, step-2 air ·
   1.5 modal policy, cart decouple, concierge · 1.6 payment modals, editor
   de-wood, selection lists, concierge heights, assistant loaders · 1.7
   selected-state v3 (tint), addresses, concierge root cause, editor counter ·
   1.8 removeFavs, assistant wrap, confirm width, accent-color · 1.9 GIO wizard
   (timeline, dots, v65 tabs/spinners, invitations, select ellipsis).

   Working defaults (swappable one line at a time when exec picks land):
   type = Fraunces / Inter / Caveat; blue replacement = Workwear Denim #4A6987;
   heritage anchor = GGB Red #9C3C25. Source of truth for the values:
   OneDrive > Brand Guidelines Update > Desktop Reskin Mockups > tokens.css
   ============================================================================ */

/* ============================================================================
   1. FONTS — self-hosted faces + legacy family aliasing
   ============================================================================ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/v26/fraunces-latin-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/v26/fraunces-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/v26/inter-latin-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/v26/caveat-latin-normal.woff2') format('woff2');
}

/* Legacy family aliasing: base.css references "museo-sans" / "museo sans" /
   "museo-slab" / "thirsty-rough" in ~60 places. Re-declaring those family
   names here (this file loads last, so these faces win) reskins typography
   site-wide without touching a single selector. font-weight 100 900 lets every
   legacy weight request (300/500/700/bold) resolve to the variable font. */
@font-face { font-family: 'museo-sans';    font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/v26/inter-latin-normal.woff2') format('woff2'); }
@font-face { font-family: 'museo sans';    font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/v26/inter-latin-normal.woff2') format('woff2'); }
@font-face { font-family: 'museo-slab';    font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/v26/fraunces-latin-normal.woff2') format('woff2'); }
@font-face { font-family: 'museo-slab';    font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/v26/fraunces-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'thirsty-rough'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/v26/caveat-latin-normal.woff2') format('woff2'); }

/* ============================================================================
   2. DESIGN TOKENS
   ============================================================================ */
:root {
  /* Color: brand anchors */
  --sp-ggb-red:      #9c3c25;   /* heritage anchor — brand marks, status accents */
  --sp-ggb-red-dark: #7f2f1d;
  --sp-ggb-red-tint: #f6e8e3;
  --sp-denim:        #4A6987;   /* Business Blue replacement (working default) */
  --sp-denim-dark:   #3a5570;
  --sp-denim-tint:   #e9eff4;

  /* Color: paper & ink (warm bakery neutrals) */
  --sp-paper:        #fbf7f1;
  --sp-paper-deep:   #f4ede0;
  --sp-card:         #ffffff;
  --sp-rule:         #e4d9c3;
  --sp-rule-soft:    #efe7d8;
  --sp-ink:          #2a221d;
  --sp-ink-soft:     #4c4038;
  --sp-ink-mute:     #6e6158;   /* 5.6:1 on paper — AA at caption sizes */

  /* Color: feedback */
  --sp-ok:           #3d6b4f;
  --sp-ok-tint:      #e8f1eb;
  --sp-warn:         #6b5518;   /* 6.3:1 on warn-tint */
  --sp-warn-tint:    #f7f0dc;
  --sp-error:        #a03325;
  --sp-error-tint:   #f9e9e6;

  /* Typography */
  --sp-font-display: 'Fraunces', Georgia, serif;
  --sp-font-sans:    'Inter', system-ui, sans-serif;
  --sp-font-accent:  'Caveat', cursive;

  /* Shape & elevation */
  --sp-radius-sm: 4px;
  --sp-radius:    8px;
  --sp-radius-lg: 14px;
  --sp-shadow-sm: 0 1px 3px rgba(42,34,29,.08);
  --sp-shadow:    0 6px 18px -6px rgba(42,34,29,.16);
  --sp-shadow-lg: 0 18px 40px -18px rgba(42,34,29,.30);
}

/* basev65 component variables: newer components (group ordering 2.0, v65
   buttons/modals) read CSS variables from basev65.css. Remapping them here
   brings every v65 component on-palette without touching a selector —
   including retiring --blueCTA, the last "business blue" in the system. */
:root {
  --blueCTA: var(--sp-denim);
  --brownSelected: var(--sp-denim); /* legacy v65 "selected" fill, remapped to denim as the BASE.
     NOTE: the settled convention is selected = TINT, not solid (see section 7);
     walked controls override this individually (v65Button.selected, payment
     rows, invitation cards, timeline dots). Consumers not yet swept —
     groupOrderMenuModal/platterEditorModal/recurringOrderModal date cells —
     still render solid denim from this var (REVIVE-2048 sweeps them). */
  --lightBackgroundHover: var(--sp-paper-deep);
  --lightBackgroundSelected: var(--sp-denim); /* v65 segmented radios: base remap; the
     checked-label tint override in section 7 rides on top of it */
  --darkBackground: var(--sp-ink);
  --standardBorderColor: var(--sp-rule);
  --orangeColor: var(--sp-ggb-red);
  --redTextColor: var(--sp-ggb-red);
}

/* ============================================================================
   3. BASE SURFACES & TEXT
   ============================================================================ */
/* Figure-ground: the page ground is warm paper-deep; the main content
   container is an explicit white sheet (below) that runs at least the
   viewport height. Body text steps 13px -> 14px (a deliberate half-step:
   16px is the target, but the 960px fixed layouts get their reflow pass
   per-page in later stages). */
html, body {
  background: var(--sp-paper-deep);
  color: var(--sp-ink-soft);
}
body {
  font-size: 14px;
  line-height: 1.45;
}
#content .outerContainer {
  background-color: var(--sp-card) !important; /* base.css uses !important */
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow-sm);
  min-height: calc(100vh - 165px); /* header padding 95 + footer 55 + breathing room */
}
.bgWoodBlock { background: var(--sp-paper-deep); }
/* .bgDarkBeige is the legacy modal/page tan: in-page panels (rewards widgets
   etc.) go warm paper so they still read as panels on the white sheet; inside
   modals it goes card (section 12). */
.bgDarkBeige { background-color: var(--sp-paper); }
select, input, textarea {
  font-family: var(--sp-font-sans);
  font-weight: 500;
}
/* -- Phase 2A punch list (REVIVE-2048): sitewide legacy-surface leaks -------- */
/* .bgDarkWood had NO v26 override (only bgWoodBlock/red/brown did): woodgrain
   bands on FAQ/Careers/Notice and the checkout upsell tile img
   (ProductTileUneditableUpsell). Flat ink — these blocks carry white text /
   dark-board product cutouts, same treatment as brownWoodBlock. */
.bgDarkWood { background: var(--sp-ink); }
/* Order-history billing-reference hover popup heading: same woodgrain jpg. */
.billingRefHoverMainHeading h1 { background: var(--sp-ink); }
/* .headerLrg: the glossy barRoundedTop.png title bar on ~36 pages. It is
   position:absolute with WHITE text, so it cannot go transparent (white on
   the white sheet) — it becomes a flat ink bar, same language as the modal
   header bars. headerLrgProgress = the GIO-v1/CookieAlert variant whose child
   carries a progress png texture. */
.headerLrg, .headerLrgProgress {
  background: var(--sp-ink);
  border-radius: var(--sp-radius-sm) var(--sp-radius-sm) 0 0;
}
.headerLrgProgress .headerProgress { background-image: none; }
/* The gifting funnel's shared canvas (Gifting, CookieGram x5, EGiftCards x4,
   InStoreGiftcard): one tan !important in base.css (matched here) un-tans all
   12 pages. Card + rule border so the funnel content reads as a defined sheet
   rather than floating on white. */
.borderedWhite-container {
  background-color: var(--sp-card) !important;
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius);
}
/* Disabled-section overlay flashed legacy tan over white v26 surfaces
   (base.css !important, matched); opacity/pointer-events stay legacy. */
.disabledAndNoPointerEvents { background: var(--sp-paper-deep) !important; }
/* AddressBook.aspx page canvas: its container ignores the outerContainer
   sheet and paints its own tan (!important, matched), plus the edit view. */
#content .addressBookContainer { background-color: var(--sp-card) !important; }
#content .edit-addressbook { background-color: var(--sp-card); }
.txtAddBookBG { background-color: var(--sp-card); }

/* ============================================================================
   4. HEADER & NAV
   ============================================================================ */
.redWoodBlock  { background: var(--sp-ggb-red); }
.brownWoodBlock { background: var(--sp-ink); }
#statusBar { border-bottom-color: rgba(255, 255, 255, .18); }

/* Nav tab hover pills: sprite image -> soft translucent pill */
#topNav .menuButtonHover {
  background-image: none;
  background-color: rgba(255, 255, 255, .12);
}
#topNav .menuButtonHover:first-child { border-radius: 6px 0 0 6px; }
#topNav .menuButtonHoverEnd { border-radius: 0 6px 6px 0; }
#topNav .topNavTabNoHover a:hover { color: #fff; }

/* Mega-menu panel: background png -> flat card */
#topNav .expandMenu {
  background: var(--sp-card);
  border: 1px solid var(--sp-rule);
  border-radius: 0 0 var(--sp-radius) var(--sp-radius);
  box-shadow: var(--sp-shadow-lg);
}
/* Column rhythm on the white card: hairline separators between columns via
   inset shadow (zero layout impact — borders would add width to the float
   layout), plus a baseline under the section headings. */
#topNav .expandMenu .expandMenuCol + .expandMenuCol {
  box-shadow: inset 1px 0 0 var(--sp-rule-soft);
}
/* The markup doubles the class (<div class="subHeading"><a class="subHeading">),
   so the baseline goes on the wrapper div only — the anchor is explicitly
   reset or every heading renders two stacked rules. Region names inside the
   cafe lists (.regionName) stay rule-free to keep the columns quiet. */
#topNav .expandMenu div.subHeading:not(.regionName) {
  border-bottom: 1px solid var(--sp-rule-soft);
  padding-bottom: 4px;
  margin-bottom: 6px;
}
#topNav .expandMenu a.subHeading,
#topNav .expandMenu div.subHeading.regionName {
  border-bottom: 0;
}
/* Mega-menu headings were terracotta #A6311A on the new white card (base.css
   .expandMenu .expandMenuCol .subHeading + its a:hover). Headings go ink;
   link hover joins the denim language. */
#topNav .expandMenu .expandMenuCol .subHeading { color: var(--sp-ink); }
#topNav .expandMenu .expandMenuCol a:hover { color: var(--sp-denim-dark); }

/* ============================================================================
   5. TABS — the one tab language
   Active tab = ink label + inset denim underline; inactive = muted label on a
   transparent tab. Applies to the generic tabsWidget strips (modals, order
   history, possible additions) and the cart panel strip (section 10).
   ============================================================================ */
/* Sprite/tan slice retirement: the active-state slices use !important in
   tabsWidget.css, matched here. */
.tabsWidget .topTabs .tab .tabTitle,
.tabsWidget .topTabs .tab .tabLeftMargin,
.tabsWidget .topTabs .tab .tabRightMargin,
.tabsWidget .topTabs .tab .firstCorner {
  background-image: none !important;
}
/* basev65-overrides.css (GIO/v65 pages only) rebuilds these tabs as gray boxes
   (lightBackgroundNotSelected + borders + rounded tops) — background-color,
   border, and radius must be explicitly zeroed or the gray box survives under
   the denim underline (the "old/new mesh"). */
.tabsWidget .topTabs .tab .tabTitle {
  color: var(--sp-ink-mute);
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
.tabsWidget .topTabs .tabActive .tabTitle {
  color: var(--sp-ink);
  box-shadow: inset 0 -3px 0 var(--sp-denim);
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
/* basev65-overrides' :nth-last-child(4) black border-right outguns the generic
   reset on specificity, so it gets its own zero. */
.tabsWidget .topTabs .tab:nth-last-child(4) .tabTitle { border-right: 0; }
/* GIO add-ons panel: tabsWidget.css pins its ACTIVE tab with id-qualified
   !important rules (tabWhite/tabWhiteLeft pngs + terracotta #A6311A) that
   beat the generic resets above on specificity — the "old/new mesh" on the
   revenue page. Matched selector-for-selector (note: two of the legacy
   selectors omit .tabsWidget — mirrored exactly); we win on load order. */
#divPanelAddOnsOptions .tabsWidget .topTabs .tabActive .firstCorner { background: none !important; }
#divPanelAddOnsOptions .tabsWidget .topTabs .tabActive .tabTitle,
#divPanelAddOnsOptions .topTabs .tabActive .tabRightMargin,
#divPanelAddOnsOptions .topTabs .tabActive .tabLeftMargin {
  background-image: none !important;
  color: var(--sp-ink) !important;
}
/* The tabsWidget panel sheet was tan (#E9E5D1) — every tabsWidget goes card,
   which also quiets the order-history tab panels for free. */
.tabsWidget .panelsContainer, .tabsWidget .panelsContainerNoWidth {
  background: var(--sp-card);
  border-color: var(--sp-rule);
}

/* ============================================================================
   6. BUTTONS & LINKS
   ACTION COLOR = DENIM (decided 3rd walkthrough, matches mobile: buttonStyle2/3
   are slate blues, terracotta is accents only). Every action button is denim —
   including checkout confirm. Rationale: the header is a large GGB-red field
   on every page, so red-as-CTA competes with red-as-chrome AND red-as-error
   (validation text on checkout is red). One action color is learnable; red
   keeps brand + error + status semantics. Beige/clear = tertiary -> card on
   rule. Sprite hover offsets are neutralized by removing the background-image;
   hover states become color shifts. Padding/size left untouched.
   ============================================================================ */
.linkBtn {
  font-family: var(--sp-font-sans);
  border-radius: var(--sp-radius-sm);
  transition: background-color .15s, border-color .15s;
}
.linkBtnOrange {
  background-image: none;
  background-color: var(--sp-denim);
  border-color: var(--sp-denim-dark);
}
.linkBtnOrange:hover {
  background-color: var(--sp-denim-dark);
  color: #fff !important; /* legacy hover recolored text to red-on-red */
}
.linkBtnBrown {
  background-image: none;
  background-color: var(--sp-denim);
  border-color: var(--sp-denim-dark);
}
.linkBtnBrown:hover { background-color: var(--sp-denim-dark); }
.linkBtnBeige, .linkBtnClear, .linkBtnClearWhite {
  background-image: none;
  background-color: var(--sp-card);
  color: var(--sp-ink) !important;
  border-color: var(--sp-rule);
}
.linkBtnBeige:hover, .linkBtnClear:hover, .linkBtnClearWhite:hover {
  background-color: var(--sp-paper-deep);
  border-color: var(--sp-ink-mute);
}
/* Sprite sweep: the full legacy jpg-button families go flat. Kills the
   sprite-bleed "underline" on checkout's confirm/back buttons. */
.orangeLinkLrg, .orangeLinkFlatLrg, .btnOrangeBG, .buttonLrg.btnOrangeBG,
.orangeLinkSm, .orangeLinkMed, .orangeLinkMed10Pad, .orangeLinkMedB, .orangeButtonMed {
  background-image: none;
  background-color: var(--sp-denim);
  border-color: var(--sp-denim-dark);
  color: #fff;
}
.orangeLinkLrg:hover, .orangeLinkFlatLrg:hover, .btnOrangeBG:hover,
.orangeLinkSm:hover, .orangeLinkMed:hover, .orangeLinkMed10Pad:hover, .orangeLinkMedB:hover,
.orangeButtonMed:hover {
  background-image: none;
  background-color: var(--sp-denim-dark);
  color: #fff !important; /* legacy hovers recolor text */
}
.brownLinkSm, .brownLinkMed, .brownLinkMedB, .brownLinkMedC, .btnBrownBG,
.brownButtonSm, .brownButtonMed {
  background-image: none;
  background-color: var(--sp-denim);
  border-color: var(--sp-denim-dark);
  color: #fff;
}
.brownLinkSm:hover, .brownLinkMed:hover, .brownLinkMedB:hover, .brownLinkMedC:hover, .btnBrownBG:hover,
.brownButtonSm:hover, .brownButtonMed:hover {
  background-image: none;
  background-color: var(--sp-denim-dark);
  color: #fff !important;
}
.brownLinkMedDisabled {
  background-image: none;
  background-color: var(--sp-rule-soft);
  border-color: var(--sp-rule);
  color: var(--sp-ink-mute);
}
.beigeLinkMed, .beigeLinkSm, .beigeLinkTiny, .beigeLinkInline, .beigeButtonSm, .btnBeigeBG {
  background-image: none;
  background-color: var(--sp-card);
  border: 1px solid var(--sp-rule);
  color: var(--sp-ink) !important;
}
.beigeLinkMed:hover, .beigeLinkSm:hover, .beigeLinkTiny:hover, .beigeLinkInline:hover,
.beigeButtonSm:hover, .btnBeigeBG:hover {
  background-image: none;
  background-color: var(--sp-paper-deep);
  border-color: var(--sp-ink-mute);
}

/* Text links: action links are denim across the board. */
.btnLink, .btnLink12, .btnLinkB { color: var(--sp-denim); }
.btnLink:hover, .btnLink12:hover, .btnLinkB:hover { color: var(--sp-denim-dark); }
.btnLinkOrange { color: var(--sp-denim); }
.btnLinkOrange:hover { color: var(--sp-denim-dark); }
/* Terracotta text-link sweep: .orangeText (base.css #BF481D !important — must be
   matched) and .redUnderline (rewards pages #9E3A1B). One link language: denim. */
.orangeText { color: var(--sp-denim) !important; }
a.orangeText:hover { color: var(--sp-denim-dark) !important; }
.redUnderline, .redUnderline:hover, .redUnderline:after { color: var(--sp-denim); }
.redUnderline:hover { color: var(--sp-denim-dark); }
/* Checkout "Enter promo code" — its color was inline in Checkout.aspx and now
   lives in checkout.css (v6 red), so this plain override wins by load order. */
a.checkout_promo_enter { color: var(--sp-denim); }
/* Global anchor hover was the last sitewide terracotta (base.css a:hover
   #A6311A, .link:hover likewise). Same specificity, later load order — every
   carve-out that already beat the legacy hover keeps beating this one. */
a:hover { color: var(--sp-denim-dark); }
.link:hover { color: var(--sp-denim-dark); }
/* Error text: base.css .redText is raw #913621 !important (matched). Every
   error-modal heading (templates/error.htm, gioError.htm, errorContinue*.htm)
   and checkout validation text rides this class — one error red sitewide.
   The cart-tab active hook (#orderPanel_topTabs .tab.redText, section 10)
   outranks this on specificity, so the tabs are unaffected. */
.redText { color: var(--sp-error) !important; }

/* Order history: exactly one denim button per tile — the thing we most want
   clicked: Reorder (default), Fix Payment (failed payment; never coexists
   with Reorder), Resume (quotes), Setup Recurring Order. Everything else
   (tip, billing reference, support, swap payment, invoice) stays quiet.
   .suggestedAction is a v26-only marker class added in the tile markup. */
a.beigeLinkSm.reorderBtn, .beigeLinkSm.suggestedAction {
  background-color: var(--sp-denim);
  border-color: var(--sp-denim-dark);
  color: #fff !important;
}
a.beigeLinkSm.reorderBtn:hover, .beigeLinkSm.suggestedAction:hover {
  background-color: var(--sp-denim-dark);
  color: #fff !important;
}

/* Favorites are minor actions: quiet card-on-rule chips with denim text.
   makeFavBtn (cart page, was favIcon.png; templates now give it a value) and
   addFaveButton (menu tile hover, was a slice of orderBtns_v4.jpg). */
input.makeFavBtn {
  background: var(--sp-card);
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-denim-dark);
  font: 600 11px/1 var(--sp-font-sans);
  width: auto;
  height: 24px;
  padding: 0 8px;
  cursor: pointer;
}
input.makeFavBtn:hover {
  background: var(--sp-denim-tint);
  border-color: var(--sp-denim);
}
.menu .addFaveButton {
  background: var(--sp-card);
  border: 1px solid var(--sp-rule) !important; /* legacy rule uses !important */
  border-radius: var(--sp-radius-sm);
  color: var(--sp-denim-dark);
  font: 600 11px/1 var(--sp-font-sans);
  cursor: pointer;
}
.menu .addFaveButton:hover {
  background-position: 0 0; /* neutralize sprite hover shift */
  background-color: var(--sp-denim-tint);
  border-color: var(--sp-denim) !important;
}

/* Row icon actions: deleteIconBtn.png / editIconBtn.png have the tan box baked
   into the image. Quiet white chips with glyphs, so the cart row reads as one
   family. Remove hints error-red on hover only — present but not inviting
   (destructive convention). */
.deleteIconBtn, .editIconBtn, .removeLink, .removeCookieAlertLink {
  background-image: none;
  background-color: var(--sp-card);
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius-sm);
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  color: var(--sp-ink-mute);
}
.deleteIconBtn::before { content: '\00d7'; font: 600 15px/22px var(--sp-font-sans); }
.removeLink::before, .removeCookieAlertLink::before { content: '\00d7'; font: 600 15px/23px var(--sp-font-sans); }
.editIconBtn::before   { content: '\270E'; font: 400 13px/22px var(--sp-font-sans); }
.deleteIconBtn:hover, .removeLink:hover, .removeCookieAlertLink:hover {
  background-color: var(--sp-error-tint);
  border-color: var(--sp-error);
  color: var(--sp-error);
}
.editIconBtn:hover {
  background-color: var(--sp-denim-tint);
  border-color: var(--sp-denim);
  color: var(--sp-denim-dark);
}
/* The rest of the icon-chip family (email 40x24, add/save 30x24 sprite pngs —
   saveIconBtn even loads from images.specialtys.com) joins the same white-chip
   pattern so no tan sprite sits next to a white chip in the same row. */
.emailIconBtn, .addIconBtn, .saveIconBtn {
  background-image: none;
  background-color: var(--sp-card);
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius-sm);
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  color: var(--sp-ink-mute);
}
.emailIconBtn::before { content: '\2709'; font: 400 14px/22px var(--sp-font-sans); }
.addIconBtn::before   { content: '\002B'; font: 600 15px/22px var(--sp-font-sans); }
.saveIconBtn::before  { content: '\2713'; font: 600 13px/22px var(--sp-font-sans); }
.emailIconBtn:hover, .addIconBtn:hover, .saveIconBtn:hover {
  background-color: var(--sp-denim-tint);
  border-color: var(--sp-denim);
  color: var(--sp-denim-dark);
}

/* Addresses: delete is destructive, not suggested. The address rows' delete
   anchors carry orangeLinkSm, so the CTA sweep above made them solid denim —
   this override must stay AFTER the sweep in spirit (it wins on specificity:
   a.removeAddressLink). "pickup from"/"deliver to" stay denim. */
a.removeAddressLink {
  background-image: none;
  background-color: var(--sp-card);
  border: 1px solid var(--sp-rule);
  color: var(--sp-ink-mute) !important;
}
a.removeAddressLink:hover {
  background-color: var(--sp-error-tint);
  border-color: var(--sp-error);
  color: var(--sp-error) !important;
}

/* "Remove from My Favorites": was redText italic (last terracotta text link
   standing). It toggles remove-mode on the favorite tiles, so it takes the
   destructive treatment: quiet muted link, error-red on hover. (Its inline
   style="font-style: underline" was invalid CSS — dropped by every browser —
   removed from the two controls with zero v6 effect.) */
a#removeFavs {
  color: var(--sp-ink-mute) !important; /* .redText is !important in base.css */
  font-style: normal !important;        /* .italic likewise */
  text-decoration: underline;
}
a#removeFavs:hover { color: var(--sp-error) !important; }

/* Checkout confirm: #checkoutB_confirmThisOrderBtn is caged at exactly 220px
   (width220 is min/max/width !important) while sp.Checkout.js swaps in labels
   as long as "Confirm this order for delivery". The button grows with its
   label; 220px stays as the floor so short labels ("Send Quote") keep the
   same presence next to Back. */
#checkoutB_confirmThisOrderBtn, #sendQuote {
  width: auto !important;
  min-width: 220px !important;
  max-width: none !important;
  padding-left: 22px;
  padding-right: 22px;
}

/* Native checkbox/radio accents: nothing in the codebase styles checkboxes —
   the "blue box, white tick" on checkout's preferred-text checkbox AND the
   ingredient editor's boxes is the browser's default accent. accent-color
   recolors the native control only (no geometry, no JS, editor untouched). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--sp-denim); }

/* Keyboard focus: base.css strips anchor outlines sitewide (a { outline:none })
   and the legacy skin never replaced them — and nearly every "button" on this
   site is an anchor. :focus-visible restores a visible ring for keyboard
   users only (mouse clicks don't trigger it). v26-only by construction. */
a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--sp-denim);
  outline-offset: 2px;
}

/* ============================================================================
   7. FORMS & SELECTION STATES
   Selected-state system v3 (settled 6th walkthrough — Jesse's critique: solid
   denim on a selected segment is IDENTICAL to a CTA button):
     - solid denim        = actions only (buttons)
     - denim underline    = active tab
     - denim TINT + denim border/edge + denim-dark label = selected state
     - list rows: tint + 3px denim left inset edge + ink text
   ============================================================================ */
.v65Button.selected, .beigeLinkSm.selected {
  background-color: var(--sp-denim-tint);
  border: 1px solid var(--sp-denim);
  color: var(--sp-denim-dark);
}
.radioButton:checked + label {
  background-color: var(--sp-denim-tint);
  border-color: var(--sp-denim);
  color: var(--sp-denim-dark);
}
/* Personal-preferences sub-menu toggle: its "selected" was a legacy hard-coded
   #555555 gray in base.css — never a v65 var. */
a.subMenuEle:hover, .subMenuContainer .subMenuEle.selected {
  background: var(--sp-denim-tint);
  border: solid 1px var(--sp-denim);
  color: var(--sp-denim-dark);
}
/* Selection lists: forms.css list selection was its own brown (#896338 active,
   #ccc hover). Chosen-state = denim tint with a denim left edge and ink text —
   clearly marked, clearly not a button. Hover = tint. */
.formElementMultiSelectList ul li.active,
#divStoredPaymentList ul li.active, .divStoredPaymentList ul li.active {
  background: var(--sp-denim-tint);
  color: var(--sp-ink);
  box-shadow: inset 3px 0 0 var(--sp-denim);
}
.formElementMultiSelectList ul li:hover { background: var(--sp-denim-tint); }
.formElementMultiSelectList ul li.msg:hover { background: var(--sp-card) !important; }
.formElementMultiSelectList ul li.active:hover,
#divStoredPaymentList ul li.active:hover, .divStoredPaymentList ul li.active:hover {
  background: var(--sp-denim-tint);
}
/* Checkout payment list: forms.css fixes the list at 175px (inner ul 155px)
   no matter the content. 1-2 stored methods (95% of customers) left a dead
   half-box; 10 methods scrolled in a slot. Now it hugs its content and caps.
   Scoped to the checkout instance so other multi-select lists keep their
   geometry. */
#divStoredPaymentList.formElementMultiSelectList {
  height: auto;
  min-height: 48px;
}
#divStoredPaymentList.formElementMultiSelectList ul {
  height: auto;
  max-height: 240px; /* ~6 rows; power users scroll, buttons below keep their air */
}
/* Date/time selects: "(Today) Tue 7/14/2026" fills the 165px container in the
   v26 font and runs into the native dropdown arrow. Truncate with an ellipsis
   instead of clipping — no width change in the revenue-critical GIO wizard.
   Applies to all formElementList selects for consistency. */
.formElementList select { text-overflow: ellipsis; }
/* GIO menu / platter editor / recurring-order modal date-and-item cells: the
   last consumers of the rejected solid-denim selected state (they read
   --brownSelected + --lightFont directly; personalized-meals-intro.css is a
   byte-copy of the GO2 rules so these selectors cover it too). Tint + inset
   denim ring — a ring, not a border, because these are 50px inline-block
   cells and a real border would change their geometry. */
.groupOrderMenuModal .selected, .groupOrderMenuModal .selected:hover,
.platterEditorModal .selected, .platterEditorModal .selected:hover,
.recurringOrderModal .selected, .recurringOrderModal .selected:hover {
  background: var(--sp-denim-tint);
  color: var(--sp-denim-dark);
  box-shadow: inset 0 0 0 1px var(--sp-denim);
}

/* ============================================================================
   8. SPINNERS & LOADING
   One ring family: rule-colored track, denim lead edge. basev65 already ships
   a CSS ring (.spinner/.spinnerSmall + @keyframes spin); the gif-era spinners
   join it.
   ============================================================================ */
@keyframes sp-spin { to { transform: rotate(360deg); } }
/* .spinnerLarge (possible-additions first load): spinnerLarge.gif retires */
.spinnerLarge {
  background: none;
  border: 3px solid var(--sp-rule);
  border-top-color: var(--sp-denim);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 40px auto;
  animation: sp-spin .8s linear infinite;
}
#dspUpsellLoading .spinnerLarge { padding: 0; margin: 70px auto 40px; } /* beats checkout.css's relocated padding-top */
#mainSpinner .spinnerLarge { padding: 0; margin: 30px auto; } /* catering assistant (its inline padding moved to cateringAssistant.css for v6) */
.cateringAssistant .loading { padding: 14px 0; }
/* .loading ("Validating cart contents", cart "loading..." rows, payment list
   placeholder): loading.gif + gray pill retires; inline ring before the text.
   No pill/box — loading states read as bare spinner + text ("the section
   becomes the spinner"). */
.loading {
  background: none;
  color: var(--sp-ink-mute);
}
.loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid var(--sp-rule);
  border-top-color: var(--sp-denim);
  border-radius: 50%;
  animation: sp-spin .8s linear infinite;
}
/* v65 CSS spinners (.spinner/.spinnerSmall/.buttonSpinner): same geometry,
   skin colors. */
.spinner {
  border-color: var(--sp-rule);
  border-top-color: var(--sp-denim);
}
.v65Button:hover .buttonSpinner {
  border-color: var(--sp-rule);
  border-top-color: var(--sp-denim);
}

/* ============================================================================
   9. MENU & PRODUCT TILES
   ============================================================================ */
/* Tiles become framed cards. Covers both tile generations: legacy
   .menuItemA/C and the current .menuItem_A.._H product tiles
   (photo-as-cover-background). The frame gives the wood-era dark photography
   a deliberate edge on the light ground. */
.menu .menuItemA, .menu .menuItemC, .menu [class*="menuItem_"] {
  background-color: var(--sp-card);
  border: 1px solid var(--sp-rule);
  box-shadow: var(--sp-shadow-sm);
}
.menu .adBannerTop { background: var(--sp-paper-deep); }
#weekendDeliveryBlock, #weekendDeliveryBlock.checkout { background: var(--sp-paper-deep); }
/* Menu favorites tiles: favorite product photos are cutouts shot on the dark
   board, so the white card frame made them float in a stark box. The
   favorites strip keeps its dark tile — flat ink instead of brown woodgrain —
   so the photography sits on the surface it was shot for. */
.menu .favorites [class*="menuItem_"] {
  background-color: var(--sp-ink);
  border-color: var(--sp-ink-soft);
}
/* Menu.aspx category tiles: menuItem_G (Menu.aspx only) puts its label BELOW
   the photo, and the legacy cream #F5F1E2 !important was tuned for the dark
   wood block behind it. On the white card the label goes ink. Product tiles
   (D/E/F/H) overlay their names ON the photo with an outline shadow — those
   stay cream and are untouched. */
.menu .menuItem_G .itemName a { color: var(--sp-ink) !important; } /* ties legacy !important; wins by load order */

/* ============================================================================
   10. CART PANEL (order panel)
   ============================================================================ */
/* Pickup/delivery tabs: the sidePanelTopTabs png retires. The whole tab strip
   is a white header band on the card — tabs live ON the panel, not on the
   page rail, so there is no fill for the rail to fight with. Active = ink
   label + denim underline (same tab language as section 5). Active state
   rides the existing hooks: the JS toggles .redText onto the active tab (and
   .pickup onto the container), so no script changes are needed. */
#orderPanel_topTabs, #orderPanel_topTabs.pickup {
  background: var(--sp-card);
  border: 1px solid var(--sp-rule);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
}
#orderPanel_topTabs .tab {
  box-sizing: border-box;
  background: none;
  border: 0;
  color: var(--sp-ink-mute);
  font-weight: 600;
}
#orderPanel_topTabs .tab:hover { color: var(--sp-ink); }
/* Legacy tab widths are half of --cartWidth, but the strip's new 1px borders
   shrink its content box by 2px — two exact halves no longer fit and the
   second tab wrapped below. 50% of the strip's content box always fits. */
#orderPanel_topTabs .pickupTab, #orderPanel_topTabs .deliveryTab { width: 50%; }
#orderPanel_topTabs .tab.redText {
  background: none;
  border: 0;
  color: var(--sp-ink) !important;
  box-shadow: inset 0 -3px 0 var(--sp-denim);
}
.infoBox {
  background: var(--sp-card);
  border-left-color: var(--sp-rule);
  border-right-color: var(--sp-rule);
}
#orderPanelBottomCorners {
  background: var(--sp-card);
  border-left-color: var(--sp-rule);
  border-right-color: var(--sp-rule);
  border-bottom-color: var(--sp-rule);
}
/* The updating-dates shield should read as "the section turned into a
   spinner", not "a box was dropped on top": no border, same white as the
   panel, and exact coverage — the legacy height:100% measured from top:40px
   overshot the section by 40px, which is why it half-covered the Checkout
   button. ajax-loader.gif (tan matte baked in) hides; the ring takes over. */
#dateLocationShield {
  background: var(--sp-card);
  border: 0;
  border-radius: 0;
  height: calc(100% - 40px);
  color: var(--sp-ink-soft);
}
#dateLocationShield img.loadingBar { display: none; }
#DTMessage::before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 12px;
  border: 3px solid var(--sp-rule);
  border-top-color: var(--sp-denim);
  border-radius: 50%;
  animation: sp-spin .8s linear infinite;
}

/* ============================================================================
   11. CHECKOUT
   ============================================================================ */
/* Possible additions: the widget was a fixed 300px window around a list FORCED
   to min-height 400px — which is why an empty "Soups" tab still scrolled.
   (Inline styles now live in checkout.css, so no !important needed.) The
   widget hugs its content and caps at ~380px of list before scrolling.
   CRITICAL: tabsWidget.css pins .topTabs at height:40px. With the widget on
   auto height the list must contribute real flow height or it paints OVER the
   Confirm-and-continue button below. height:auto on the #upsell instance
   keeps everything in normal flow — content pushes the page, never covers it.
   (True equal-height with Order Contents needs the float row rebuilt as flex;
   Stage 4 candidate.)
   The .tabsWidget qualifier matches checkout.css's relocated rules — these
   must stay >= that specificity or the 300px/230px pins win and the list
   paints over the Confirm button again. */
#upsell.tabsWidget { height: auto; }
#upsell.tabsWidget .topTabs { height: auto; }
#upsell.tabsWidget .panel .content { height: auto; }
#upsell.tabsWidget .scrollBox {
  height: auto;
  max-height: 380px;
  overflow: auto;
}
#upsell.tabsWidget .scrollBox .itemListContainer { min-height: 0; }
/* Cart page: the plates/flatware widget's outer width (500 + 26 padding + 19
   margin = 545px) exactly equals the slot left of the upsell column (960 -
   389 - 26 = 545px). A zero-tolerance float fit loses to any rounding, so the
   float engine dropped it BELOW the upsell. 4px of slack lets it tuck under
   Order Contents every time; the confirm button column already follows the
   upsell bottom. */
#orderContents #checkoutOptions.mainCol {
  width: 496px;
  min-width: 496px;
}
/* Checkout step 2: air around the payment block */
#checkoutB_selectPaymentWrapper { margin-bottom: 14px; }
#checkoutB_selectPaymentWrapper .addPaymentBtn,
#checkoutB_selectPaymentWrapper .splitPaymentBtn { margin-top: 8px; }
/* Cart/confirmation tan panels (checkout.css #E2DDC9): Order Contents /
   Delivery Details columns and the Order Summary box. These id+class
   selectors beat the generic .bgDarkBeige remap, so they kept the legacy tan
   — confirmed live on Checkout.aspx (the plates/flatware block) and they
   render prominently on the ThankYou confirmation. Panels on the white sheet
   = warm paper, same convention as .bgDarkBeige. Same selectors, later load
   order. */
#deliveryDetails .mainCol, #orderContents .mainCol { background: var(--sp-paper); }
#orderSummary { background: var(--sp-paper); }

/* ============================================================================
   12. MODALS & EDITORS
   Modal policy: every modal is a white sheet under a flat ink header bar.
   Structure inside comes from borders and type, never from alternating
   tan/white fills (the "ring effect").
   ============================================================================ */
#modal .bgDarkBeige { background-color: var(--sp-card); }
#modal .mainHeading {
  background: var(--sp-ink);
  border-radius: var(--sp-radius) var(--sp-radius) 0 0;
}
#modal .bottomCorners {
  background-image: none;
  background-color: var(--sp-card);
}
/* Pickup/delivery modal: the address blocks were their own tan layer */
#modal #deliveryAddressSelection .tabsWidget #deliveryPanel .deliveryAddressBlock,
#modal #deliveryAddressSelection .tabsWidget #pickupPanel .pickupAddressBlock,
#modal #deliveryAddressSelection .tabsWidget #uspsPanel .uspsAddressBlock {
  background: var(--sp-card);
}
/* Add-payment / split-payment modal: checkout.css paints these screens
   #E2DDC9 with id-heavy selectors that beat the generic modal rule — matched
   here. Buttons inside are already denim solids, which is exactly why they'll
   stand out on the white sheet. */
#modal #splitPaymentScreen,
#modal #newPaymentScreen,
#modal #newPaymentScreen #newPaymentContent {
  background: var(--sp-card);
}
/* Stripe card-validation errors (templates/addpayment.htm / splitpayment.htm
   use Stripe's sample class) were styled NOWHERE — declines rendered as plain
   muted text at the exact moment payment entry fails. */
.sr-field-error {
  color: var(--sp-error);
  font-weight: 600;
  margin-top: 6px;
}
/* Product editor: the last woodgrain retired. The cutting-board metaphor was
   charming, but as the only wood left on the site it would read as a
   leftover, not a feature — and going white also dissolves the three-column
   "white strip at the bottom" bug (the wood tiles simply ended before the
   columns did). */
#productEditor .bgDarkBeige,
#productEditor #ingredientOptions,
#productEditor #ingredients,
#productEditor #ingredientsForCatering {
  background: var(--sp-card);
}
/* The ingredient stack is JS-positioned from the bottom (the "built on the
   counter" grounding — worth keeping). The empty upper-middle reads as
   "ripped out" only because the void is stark white; a whisper of warm paper
   rising from the base grounds the build without moving a single pixel of
   the stack. Recentering the stack itself = editor JS surgery, Stage 4+ if
   it still bothers anyone. */
#productEditor #middleCol {
  border-left-color: var(--sp-rule);
  border-right-color: var(--sp-rule);
  background: linear-gradient(180deg, var(--sp-card) 55%, var(--sp-paper) 82%, var(--sp-paper-deep) 100%);
}
#productEditor .brownHeader { background: var(--sp-ink); }
#comboEditor .bgDarkBeige { background: var(--sp-card) !important; }
/* The combo editor kept the full cutting board: comboEditor.css paints
   #ingredientOptions / #middleCol / #ingredients with bg-wood.jpg directly,
   and those divs carry NO bgDarkBeige class (the rule above never matched
   them). Same treatment as the product editor: card surfaces, rule-colored
   column borders (legacy is 2px #2C221A — width kept, color swapped), warm
   counter gradient on the middle column. */
#comboEditor #ingredientOptions,
#comboEditor #ingredients {
  background: var(--sp-card);
}
#comboEditor #middleCol {
  border-left-color: var(--sp-rule);
  border-right-color: var(--sp-rule);
  background: linear-gradient(180deg, var(--sp-card) 55%, var(--sp-paper) 82%, var(--sp-paper-deep) 100%);
}
/* One CTA per editor: Order stays denim; "Add to my favorites & order" joins
   the sitewide quiet-favorite convention (card chip, denim text). */
a#saveFavoritesAddBtn {
  background: var(--sp-card);
  border: 1px solid var(--sp-rule);
  color: var(--sp-denim-dark) !important;
}
a#saveFavoritesAddBtn:hover {
  background: var(--sp-denim-tint);
  border-color: var(--sp-denim);
  color: var(--sp-denim-dark) !important;
}
/* Floor/Suite prefix+suffix boxes (location modal recipient + availability
   panels; checkout billing Suite). forms.css pins the wrapper to 100px
   !important, sized for the legacy type; v26 type is wider (bold 14px museo
   label 44px + Inter-500 input 58px = 102px measured live), so the borderless
   input float-dropped below the box and clicks on the visible box hit the
   wrapper div — Floor/Suite could not be clicked. 116px restores label+input
   on one line with headroom; max-height follows the 27px v26 input height
   (legacy formElementText cap is 24px). !important required to outrank the
   forms.css !important via load order. */
div.textInputMedWrapper {
  width: 116px !important;
  max-height: 28px;
}

/* ============================================================================
   13. GIO WIZARD (group ordering 2.0 / v65 pages)
   Handle with care: ~15% of revenue lives here — appearance-only rules, zero
   geometry surgery except the timeline row, which is a whitespace-math bug
   fix.
   ============================================================================ */
/* Timeline: "Payment" wrapping was inline-block whitespace math. Wrapper is
   hard-coded 724px; five 142px items = 710px, but the <li>s are inline-block
   with newline gaps between them (~4px each). v6's 13px font summed to a
   knife-edge exact fit; the v26 font's wider spaces tip it past 724 and the
   last step falls off. Flex kills the whitespace gaps for good; item widths
   and the absolutely-positioned connector lines are untouched. */
.timelineContainer ul {
  display: flex;
  justify-content: center;
}
/* Dots are clickable — the handler already sits on the whole <li> (it reads
   data-step-name via closest()), but only the text label advertised it
   (cursor:pointer on the header only), and each connector .line overhangs
   63px into the NEXT step's <li>, crossing the dot band — clicks on it
   bubble to the WRONG step. Pointer cursor on the whole item; lines stop
   catching clicks. No JS changes. Scoped to the wizard's container so we
   never promise clicks where no handler exists. */
#groupOrderWzrdStatus .timelineItem { cursor: pointer; }
#groupOrderWzrdStatus .line { pointer-events: none; } /* the id IS .timelineContainer */
/* Dots join the selected-state system. Was: current = orange/red dot,
   completed = solid denim. "You are here" = denim; the steps behind you =
   open denim tint, echoing the segment selectors. Incomplete stays gray
   (not-yet is correctly quiet). */
.timelineContainer .current .dot { background: var(--sp-denim); }
.timelineContainer .current .timelineItemHeader { color: var(--sp-denim-dark); }
.timelineContainer .completed .dot {
  background-color: var(--sp-denim-tint);
  border: 2px solid var(--sp-denim);
  box-sizing: border-box;
}
.timelineContainer .completed .line { border-color: var(--sp-denim); }
/* GIO invitation cards: .invitationType.selected was solid denim + white (the
   pre-v3 convention, via --brownSelected). Joins the tint system like every
   other segment. */
.invitationType.selected {
  background-color: var(--sp-denim-tint);
  border-color: var(--sp-denim);
  color: var(--sp-denim-dark);
}

/* ============================================================================
   13b. CATERING ASSISTANT
   ============================================================================ */
/* Save/Add pair must not stack: the pair lives in a flex:20% actionItem while
   each variant button demands min-width:120px; a long variant label (e.g.
   "Holiday Meal") plus the v26 font squeezes the last item until the two
   inputs wrap. Variant buttons size to their labels, the button pair claims
   its full width, and if the row truly runs out of room a whole item reflows
   instead of the pair breaking apart. */
.cateringAssistant .actionsSection { flex-wrap: wrap; column-gap: 16px; }
.cateringAssistant .actionsSection .actionItem:last-child { min-width: max-content; }
.cateringAssistant .variantButton { min-width: 0; }

/* ============================================================================
   14. BUSINESS CATERING CONCIERGE (page deferred as its own future project;
   these keep it presentable on the warm system meanwhile)
   ============================================================================ */
/* The page was designed on a gray family (#FAFAF9/#EFEDEC) that fights the
   warm paper site. Left column joins the white sheet; right column becomes
   the warm rail; suggestion rows are white cards on it. */
.BusinessCateringConcierge .LeftColumn { background: var(--sp-card); }
.BusinessCateringConcierge .RightColumn { background: var(--sp-paper-deep); }
/* Fixed 80px rest / 150px hover heights clipped cards whose titles wrap to
   two lines; AND the page body is a fixed-height flex column (.ConatinerBody
   940px / .FlexBody 935px) with cards at default flex-shrink:1 — the column
   squashed any card that tried to expand, which is why raising max-height
   alone wasn't enough. Cards stop shrinking; the page grows instead of
   clipping. (Verified live: buffet card needs 274px on hover, renders 276.) */
.SuggestionSection {
  background: var(--sp-card);
  border-color: var(--sp-rule);
  max-height: 112px;
  flex-shrink: 0;
}
.SuggestionSection:hover {
  background: var(--sp-card);
  border-color: var(--sp-denim);
  max-height: 420px;
  min-height: 150px;
}
.SuggestionSectionLarge:hover {
  max-height: 420px;
  min-height: 150px;
}
.ConatinerBody { height: auto; }
.BusinessCateringConcierge .FlexBody { height: auto; min-height: 935px; }

/* ============================================================================
   15. NOTICES — one-time "new look" banner (config-gated by SkinNoticeEndDate;
   dormant for the initial default-on flip, kept for a later phase)
   ============================================================================ */
#skinNotice {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--sp-denim-tint);
  border: 1px solid var(--sp-denim);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-ink);
  font: 500 13px/1.4 var(--sp-font-sans);
  padding: 10px 14px;
  margin: 0 0 10px;
}
#skinNotice b { color: var(--sp-denim-dark); }
#skinNotice a { color: var(--sp-denim-dark); font-weight: 600; }
#skinNotice #skinNoticeDismiss {
  margin-left: auto;
  text-decoration: none;
  white-space: nowrap;
}

/* ============================================================================
   16. FOOTER — woodgrain -> flat ink, readable size
   ============================================================================ */
/* The 6px red-woodgrain separator strip above the footer was the last
   woodgrain rendered on every page (base.css #footerSeparator). Transparent:
   the footer sits directly on the warm paper ground; the strip keeps its 6px
   of breathing room. */
#footerSeparator { background: none; }
#footer {
  background: var(--sp-ink);
  color: #cfc4ba;
  font-size: 12px;
  font-weight: 500;
}
#footer a:link, #footer a:visited, #footer a:hover, #footer a:active { color: #cfc4ba; }
#footer a:hover { color: #fff; }
#footerContent { font-size: 12px; }