/** Shopify CDN: Minification failed

Line 714:0 All "@import" rules must come first

**/
/* ==========================================================================
   XGRiD Campers — custom CSS overlay on Dawn 15.4.1

   Brand styling layered on top of Dawn 15's component CSS. Loaded from
   layout/theme.liquid AFTER Dawn's stylesheets so these rules win on
   conflicts. Targets our new section class names from migration PRs.

   Structure:
     1. Brand variables and font import
     2. Typography overrides (Russo One on display headings)
     3. Buttons
     4. Collection tabs section (PR #15)  — the "PRODUCT TYPES" homepage tabs
     5. Product info tabs section (PR #19) — the "Info / Specs / Q&A" tabs on PDPs
     6. Carousel sections (PRs #13, #14) — collection carousels with brand styling
     7. Footer (PR #31)            — brand styling for migrated footer blocks

   Most extracted-but-not-yet-translated rules from the legacy theme's custom
   CSS files (custom.css, single-product.css, topbar.css — ~6,000 lines total)
   target class names that no longer exist in Dawn 15. They will be triaged
   as visual issues surface during Phase 6 QA.
   ========================================================================== */

/* Russo One — was loaded via inline <link> in old layout/theme.liquid head;
   imported here so the font is available wherever this stylesheet loads. */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

/* --------------------------------------------------------------------------
   1. Brand variables
   -------------------------------------------------------------------------- */
:root {
  --xgrid-blue: #2578B4;
  --xgrid-blue-rgb: 37, 120, 180;
  --xgrid-grey: #EBEBEB;
  --xgrid-grey-border: 208, 213, 221;
  --xgrid-font-display: 'Russo One', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
/* Display headings on the homepage and major sections use Russo One.
   Body text continues to use the theme-settings-configured font (Montserrat). */
.section-collection-tabs .tabs-title,
.section-product-tabs .product-tabs__nav,
.section-vendor-collection .collection-list-title,
.section-collection-carousel .collection-list-title,
.shopify-section-id-rich-text h1,
.shopify-section-id-rich-text h2,
.section-image-banner h1,
.section-image-banner h2,
.section-slideshow .slideshow__heading {
  font-family: var(--xgrid-font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   3. Buttons — brand-blue accent on outline style
   -------------------------------------------------------------------------- */
/* The old "EXPLORE ALL +" button: brand-blue text, brand-blue 1px border,
   capitalize, 12px corner radius. We map this to Dawn's secondary button
   style so theme-editor color-scheme settings still apply. */
.button.button--secondary,
.button--tertiary {
  font-family: var(--xgrid-font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   4. Collection tabs section (PR #15) — homepage "PRODUCT TYPES" tabs
   -------------------------------------------------------------------------- */
/* The prod aesthetic for these tabs is brand-blue text + underline on active,
   not the filled-pill default we shipped in PR #15. */
.section-collection-tabs [class^="collection-tabs-"] .tabs-title,
.section-collection-tabs [class*=" collection-tabs-"] .tabs-title {
  position: relative;
  display: inline-block;
  font-size: 4.4rem;
  line-height: 1;
  font-weight: 400;
  color: var(--xgrid-blue);
  padding: 0.8rem 2rem;
  z-index: 1;
  margin-bottom: 4rem;
}
/* Angled grey bar behind the heading (approximation of the prod design) */
.section-collection-tabs [class^="collection-tabs-"] .tabs-title::before,
.section-collection-tabs [class*=" collection-tabs-"] .tabs-title::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: var(--xgrid-grey);
  transform: skewX(-12deg);
  z-index: -1;
}

/* Tab nav: text-only buttons, brand-blue active with underline */
.section-collection-tabs [class^="collection-tabs-"] .tabs-nav__button,
.section-collection-tabs [class*=" collection-tabs-"] .tabs-nav__button {
  background: transparent !important;
  color: rgba(var(--color-foreground), 0.55);
  font-family: var(--xgrid-font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.6rem;
  padding: 0.8rem 1.2rem;
  border-radius: 0;
  border-bottom: 3px solid transparent;
}

.section-collection-tabs [class^="collection-tabs-"] .tabs-nav__button[aria-selected="true"],
.section-collection-tabs [class*=" collection-tabs-"] .tabs-nav__button[aria-selected="true"] {
  background: transparent !important;
  color: var(--xgrid-blue) !important;
  border-bottom-color: var(--xgrid-blue);
}

.section-collection-tabs [class^="collection-tabs-"] .tabs-nav__button:hover,
.section-collection-tabs [class*=" collection-tabs-"] .tabs-nav__button:hover {
  color: var(--xgrid-blue);
}

/* "View all" link inside a tab panel — outlined brand-blue button */
.section-collection-tabs .tabs-panel__viewall .button.button--secondary {
  border: 1px solid var(--xgrid-blue);
  color: var(--xgrid-blue);
  background: transparent;
}
.section-collection-tabs .tabs-panel__viewall .button.button--secondary:hover {
  background: var(--xgrid-blue);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Product info tabs (PR #19) — "Info / Specs / Q&A" tabs on PDPs
   -------------------------------------------------------------------------- */
/* The prod aesthetic here IS the filled-pill pattern: grey inactive on a
   shared row, brand-blue active. White-on-blue when active. */
.section-product-tabs [class^="product-tabs-"] .product-tabs__button,
.section-product-tabs [class*=" product-tabs-"] .product-tabs__button {
  background: var(--xgrid-grey) !important;
  color: var(--xgrid-blue) !important;
  border-radius: 0;
  font-family: var(--xgrid-font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
  padding: 0.8rem 3rem;
}

.section-product-tabs [class^="product-tabs-"] .product-tabs__button[aria-selected="true"],
.section-product-tabs [class*=" product-tabs-"] .product-tabs__button[aria-selected="true"] {
  background: var(--xgrid-blue) !important;
  color: #fff !important;
  font-weight: 700;
}

.section-product-tabs [class^="product-tabs-"] .product-tabs__button:hover,
.section-product-tabs [class*=" product-tabs-"] .product-tabs__button:hover {
  background: var(--xgrid-blue) !important;
  color: #fff !important;
}

/* Tab panel content area — grey background, generous padding */
.section-product-tabs [class^="product-tabs-"] [role="tabpanel"],
.section-product-tabs [class*=" product-tabs-"] [role="tabpanel"] {
  background: var(--xgrid-grey) !important;
  padding: 3.5rem !important;
  min-height: 50rem;
}

.section-product-tabs [class^="product-tabs-"] .product-tabs__content,
.section-product-tabs [class*=" product-tabs-"] .product-tabs__content {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.5;
  color: #000;
}

/* "Tag pills" pattern — when content uses <ul><li> they render as small pills
   (used in the legacy theme's Trailer Compatibility tab) */
.section-product-tabs .product-tabs__content ul li:not(.space-info ul li) {
  list-style: none;
  display: inline-block;
  padding: 0.3rem 1.7rem;
  margin: 0.3rem;
  border-radius: 100px;
  border: 1px solid #DFDFDF;
  background: #fff;
}

/* --------------------------------------------------------------------------
   6. Carousel sections (PRs #13, #14) — brand polish
   -------------------------------------------------------------------------- */
/* Slider buttons (prev / next) — brand-blue accent */
.section-collection-carousel .slider-button,
.section-vendor-collection .slider-button {
  color: var(--xgrid-blue);
}

/* Slider counter — brand-blue */
.section-collection-carousel .slider-counter--current,
.section-vendor-collection .slider-counter--current {
  color: var(--xgrid-blue);
}

/* Section headings — Russo One, brand-blue, with angled-grey-bar decoration
   (matches the prod aesthetic seen on FEATURED ITEMS / PRODUCT TYPES).
   Targets BOTH .collection-list-title AND .collection-list-description
   because the migrated content can land in either field depending on
   whether the merchant used the old `title` or `sub-title` setting. */
.section-collection-carousel .collection-list-title,
.section-collection-carousel .collection-list-description,
.section-vendor-collection .collection-list-title,
.section-vendor-collection .collection-list-description {
  position: relative;
  display: inline-block;
  font-family: var(--xgrid-font-display);
  font-size: 4rem;
  line-height: 1.05;
  font-weight: 400;
  color: var(--xgrid-blue);
  padding: 0.4rem 1.2rem;
  text-transform: uppercase;
  z-index: 1;
  margin: 0 0 0.8rem;
}
.section-collection-carousel .collection-list-title::before,
.section-collection-carousel .collection-list-description::before,
.section-vendor-collection .collection-list-title::before,
.section-vendor-collection .collection-list-description::before {
  content: '';
  position: absolute;
  inset: 30% 0 0 0;
  background: var(--xgrid-grey);
  transform: skewX(-12deg);
  z-index: -1;
}

/* --- Aside layout: title on the left, slider on the right --- */
@media screen and (min-width: 990px) {
  .carousel-collection--title-aside {
    display: grid;
    grid-template-columns: minmax(20rem, 30%) 1fr;
    align-items: start;
    gap: 4rem;
  }
  .carousel-collection--title-aside .carousel-collection__title-wrapper {
    align-self: center;
  }
  .carousel-collection--title-aside slider-component {
    grid-column: 2;
    min-width: 0; /* prevent grid blowout */
  }
  .carousel-collection--title-aside .slider-buttons {
    /* Hide the bottom slider-buttons row when title is aside; we render
       a separate set of buttons directly under the title instead. */
    display: none;
  }
}

/* Title-side prev/next buttons (visible only when title_position=aside) */
.carousel-collection__title-buttons {
  display: flex;
  gap: 0.8rem;
  margin-top: 2.4rem;
}
.carousel-collection__title-buttons .slider-button {
  position: static;
  border: 1px solid rgba(var(--color-foreground), 0.15);
  background: rgb(var(--color-background));
  width: 4.4rem;
  height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  color: rgba(var(--color-foreground), 0.55);
  cursor: pointer;
}
.carousel-collection__title-buttons .slider-button:hover {
  color: var(--xgrid-blue);
  border-color: var(--xgrid-blue);
}
.carousel-collection__title-buttons .slider-button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --- Card overlay treatment: blue/grey overlay over bottom of image with
       Russo One white title (matches FEATURED ITEMS card style).
       Targets the custom .carousel-card markup we render directly in
       carousel-collection-list.liquid (bypassing Dawn's card-collection
       snippet so we always get an image to sit the overlay over). --- */
.section-collection-carousel .carousel-card,
.section-vendor-collection .carousel-card {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.section-collection-carousel .carousel-card__link,
.section-vendor-collection .carousel-card__link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.section-collection-carousel .carousel-card__media,
.section-vendor-collection .carousel-card__media {
  position: relative;
  width: 100%;
  height: 100%;
}
.section-collection-carousel .carousel-card__image,
.section-vendor-collection .carousel-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-collection-carousel .carousel-card__overlay,
.section-vendor-collection .carousel-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 2.4rem;
  background: rgba(var(--xgrid-blue-rgb), 0.85);
  z-index: 2;
  transition: background 0.2s ease;
}
/* Every other card uses a grey overlay (alternating brand pattern) */
.section-collection-carousel .collection-list__item:nth-child(even) .carousel-card__overlay,
.section-vendor-collection .collection-list__item:nth-child(even) .carousel-card__overlay {
  background: rgba(var(--color-foreground), 0.4);
}
.section-collection-carousel .carousel-card__heading,
.section-vendor-collection .carousel-card__heading {
  font-family: var(--xgrid-font-display);
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff !important;
  margin: 0;
  font-weight: 400;
}
/* Hover: deepen the brand-blue overlay (active state) */
.section-collection-carousel .carousel-card:hover .carousel-card__overlay,
.section-vendor-collection .carousel-card:hover .carousel-card__overlay {
  background: rgba(var(--xgrid-blue-rgb), 0.95);
}
.section-collection-carousel .collection-list__item:nth-child(even) .carousel-card:hover .carousel-card__overlay,
.section-vendor-collection .collection-list__item:nth-child(even) .carousel-card:hover .carousel-card__overlay {
  background: rgba(var(--xgrid-blue-rgb), 0.85);
}

/* --------------------------------------------------------------------------
   Header — Dawn nav menu styled with brand typography
   -------------------------------------------------------------------------- */
/* The info-bar section renders the logo, so we hide Dawn's stock logo via
   that section's <style> block. Here we style the remaining Dawn header
   contents (nav menu + icons) to match the prod brand look. */

/* Top-level nav menu items: Russo One, uppercase, brand-blue on hover */
.header__menu-item,
summary.header__menu-item {
  font-family: var(--xgrid-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.85);
}
.header__menu-item:hover,
.header__menu-item:focus,
.header__active-menu-item {
  color: var(--xgrid-blue);
}

/* Header utility icons (search/cart/account) — brand-blue tint */
.header__icon,
.header__icon--menu,
.header__icon--cart,
.header__icon--account,
.header__icon--search {
  color: var(--xgrid-blue);
}

/* Dawn 15 wraps the nav with a grid that sometimes leaves a gap where the
   logo would be. Dawn handles this with logic; here we just make sure the
   nav fills the available width nicely after the logo is hidden. */
.section-header .header.header--top-center .header__heading,
.section-header .header.header--middle-left .header__heading,
.section-header .header.header--middle-center .header__heading {
  display: none;
}

/* Prod design: the header row 2 is JUST the nav menu — no English selector,
   no search/account/cart icons. The merchant has T-Lab Translate (rendered
   in info-bar) for translations and a custom YMM Search bar (in info-bar
   too). Hide Dawn 15's stock localization-form and most utility icons. */
.section-header .localization-form,
.section-header .header__icon--search,
.section-header .header__icon--account {
  display: none !important;
}
/* Keep cart icon visible — moved to right edge */
.section-header .header__icons {
  margin-left: auto;
}

/* Spread the nav menu items across the full available width — Live's
   layout has MAP & HOURS at the far left and CONTACT at the far right
   with even spacing between. Dawn's content-sized grid cell collapses
   the menu to a tight cluster, so we stretch the cell and use
   space-between distribution. */
.section-header .header__inline-menu {
  justify-self: stretch;
  width: 100%;
}
.section-header .list-menu--inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: visible;
  scrollbar-width: none;
  gap: 1.2rem;
}
.section-header .list-menu--inline::-webkit-scrollbar {
  display: none;
}
.section-header summary.header__menu-item,
.section-header .header__menu-item {
  white-space: nowrap;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

/* Qikify Smart Menu dropdown — break out of the trigger's positioning
   context and re-anchor to the viewport center, full page-width. In
   live this is what makes the mega-menu dropdown span across all the
   top-level items rather than dropping under just the trigger. */
.section-header .tmenu_item--root > .tmenu_submenu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: 1500px;
  width: max-content;
}

/* --------------------------------------------------------------------------
   Globo Smart Product Filter & Search — collection page grid override
   -------------------------------------------------------------------------- */
/* Globo replaces Dawn's main-collection-product-grid rendering with its own
   UI on collection pages. Globo uses Bootstrap-style column classes
   (spf-col-xl-4, spf-col-md-6, etc.) on the cards, which default to 3-per-row
   at desktop and break to 2 / 1 at narrower viewports.

   We override Globo's flex/width-based layout with CSS Grid for clean,
   consistent column counts regardless of viewport edge cases. Adjust the
   `repeat(N, 1fr)` count to change columns per row.

   Targets:
   - `.gf-products`              — Globo's product list container
   - `[class*="spf-col-"]`       — child cards using Bootstrap-style col classes
   - `.gfqv-product-card`        — Globo's product card class (alternate)
*/

/* Globo uses an ID (#gf-products), not a class — and an alternate
   data-attribute container (data-globo-filter-items). Globo's stock CSS
   sets the container to flex with wrap, then sizes children with
   spf-col-* percentage widths. We override to a clean CSS Grid. */
#gf-products,
[data-globo-filter-items] {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: 1fr !important; /* lock all rows to equal height */
  gap: 2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
  flex-wrap: nowrap !important; /* override Globo's flex-wrap on the container */
  align-items: stretch !important;
  /* Counter Globo's display:flex */
}

/* Force ALL direct children to fill the grid cell, regardless of Globo's
   per-card column classes (spf-col-xl-4 etc.). */
#gf-products > *,
[data-globo-filter-items] > * {
  flex: initial !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

/* Tablet: 3 columns at 990–1199px */
@media screen and (max-width: 1199px) {
  #gf-products,
  [data-globo-filter-items] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Smaller tablet / mobile: 2 columns at 540–989px */
@media screen and (max-width: 989px) {
  #gf-products,
  [data-globo-filter-items] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
  }
}

/* Phone: 2 columns under 540px (set to 1 if you'd rather single-column on phone) */
@media screen and (max-width: 539px) {
  #gf-products,
  [data-globo-filter-items] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem !important;
  }
}

/* --------------------------------------------------------------------------
   7. Footer — brand styling overlay
   --------------------------------------------------------------------------
   PR #31 migrated the footer content (Las Vegas/Knoxville address blocks,
   "Find Your Ride" link list, brand_information). This section restyles
   Dawn 15's stock footer markup to match the Live design:

     - Russo One uppercase brand-blue column headings (.footer-block__heading)
     - Brand-blue horizontal divider rule above every footer column
     - Map link → small grey body text
     - "Map & Hours" strong → brand-blue, slightly larger, no decoration
     - tel: links → large Russo One brand-blue (the prominent phone numbers)
     - "Find Your Ride" link list → uppercase, plain links, tight spacing
   -------------------------------------------------------------------------- */

/* Top divider rule above every footer column. Dawn's grid wraps each block
   in `.footer-block`; we add a 2px brand-blue border-top with a small gap
   so it reads as a section divider rather than a box border. */
.footer-block {
  border-top: 2px solid var(--xgrid-blue, #2578B4);
  padding-top: 1.6rem;
  margin-top: 0;
}

/* Column headings — "LAS VEGAS, NV", "KNOXVILLE, TN", "FIND YOUR RIDE",
   "GET SOCIAL". Dawn uses h2 with .footer-block__heading. */
.footer-block__heading {
  font-family: var(--xgrid-font-display, 'Russo One', sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--xgrid-blue, #2578B4);
  font-size: 1.8rem;
  margin: 0 0 1.2rem;
  line-height: 1.2;
}

/* Body content area inside text/link_list blocks */
.footer-block__details-content {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.85);
}

.footer-block__details-content > * + * {
  margin-top: 0.6rem;
}

/* Address line — rendered as <h6> with a Google-Maps link. We strip the
   default h6 oversize and underline; the address should read as plain
   body copy. */
.footer-block__details-content h6 {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  line-height: 1.5;
}

.footer-block__details-content h6 a {
  color: rgba(var(--color-foreground), 0.85);
  text-decoration: none;
}

.footer-block__details-content h6 a:hover {
  color: var(--xgrid-blue, #2578B4);
  text-decoration: underline;
}

/* "Map & Hours" emphasis — wrapped in <p><a><strong>...</strong></a></p>.
   Style the <strong> as a brand-blue link-style call-to-action. */
.footer-block__details-content p strong {
  color: var(--xgrid-blue, #2578B4);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

.footer-block__details-content p a {
  text-decoration: none;
  color: inherit;
}

.footer-block__details-content p a:hover strong {
  text-decoration: underline;
}

/* Phone number — the large brand-blue prominent call-out. tel: links are
   rendered in their own <p>. Russo One matches Live's typography. */
.footer-block__details-content a[href^="tel:"] {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--xgrid-font-display, 'Russo One', sans-serif);
  font-weight: 400;
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  color: var(--xgrid-blue, #2578B4);
  text-decoration: none;
  line-height: 1.1;
}

.footer-block__details-content a[href^="tel:"]:hover {
  color: rgba(var(--xgrid-blue-rgb, 37 120 180), 0.8);
  text-decoration: none;
}

/* "Find Your Ride" link list — Dawn renders link_list blocks as a <ul>
   with .footer-block__details-content. Strip default list markers,
   tighten spacing, uppercase the links. */
.footer-block__details-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-block__details-content ul li {
  margin: 0;
  padding: 0;
}

.footer-block__details-content ul li + li {
  margin-top: 0.8rem;
}

.footer-block__details-content ul li a {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(var(--color-foreground), 0.85);
  text-decoration: none;
}

.footer-block__details-content ul li a:hover {
  color: var(--xgrid-blue, #2578B4);
}

/* Social icons under the brand_information block ("GET SOCIAL"). */
.footer-block--menu .list-social,
.footer-block .list-social {
  justify-content: flex-start;
  gap: 0.8rem;
}

.footer-block .list-social__link {
  color: var(--xgrid-blue, #2578B4);
  padding: 0.4rem;
}

.footer-block .list-social__link:hover {
  color: rgba(var(--xgrid-blue-rgb, 37 120 180), 0.7);
}

/* --------------------------------------------------------------------------
   Misc — defensive overrides
   -------------------------------------------------------------------------- */
/* The legacy theme used a wider header container than the page-width default. */
.header-wrapper > .header {
  max-width: 1400px;
}

/* ==========================================================================
   TWILIGHT OUTFITTERS — overlay (loaded after legacy XGRiD Campers brand)

   For the parallel `twilight-draft` theme.
   - Switches typography to Geist (overrides Dawn's font vars)
   - Promotes legacy --xgrid-blue to the canonical logo-sampled value
   - Adds the Twilight ember accent variable
   - Plays with Dawn's dark color schemes (set in settings_data.json)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand: canonical XGRiD logo blue */
  --xgrid-blue: #3777BD;
  --xgrid-blue-rgb: 55, 119, 189;

  /* Twilight accent: ember */
  --xgrid-accent: #BA531F;      /* ember, AA with white label (Twilight #C75D2A) */
  --xgrid-accent-rgb: 186, 83, 31;

  /* Typography: Geist for everything (display + body + headings) */
  --xgrid-font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Dawn's body has a font-family declaration that uses inline fallbacks
   generated by Liquid from settings — override directly with the variable. */
body, .button, input, select, textarea {
  font-family: var(--font-body-family);
}

/* Headings — keep uppercase + tracking that legacy display had, but on Geist now */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading-family);
}

/* Tabular numerals on price + numeric data */
.price, .price-item, .product-form__quantity, [class*="badge"], [class*="counter"] {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   TWILIGHT — angled-bar heading treatment, dark-theme tone
   -------------------------------------------------------------------------- */
/* On the legacy light theme, --xgrid-grey was a light gray (#EBEBEB) that
   sat behind brand-blue headings as a subtle highlight. On Twilight's dark
   surfaces that reads as bright white. Re-tone to surface-3 — same visual
   relationship (a slight elevation behind the heading) but inverted. */
:root {
  --xgrid-grey: #EBEBEB;            /* light heading-bar grey restored (Twilight #2F3033) */
  --xgrid-grey-rgb: 235, 235, 235;
}

/* ==========================================================================
   DAYLIGHT — light-mode token layer
   ==========================================================================
   Activates the previously-inert var(--token, dark-fallback) indirection
   used throughout this file. The dark fallback literals below this block
   are Twilight's archived values (see marketing/design-system/
   dark-mode-archive.md); they are inert while these definitions exist.
   Future dark/light toggle: scope this block under
   html:not([data-theme="dark"]) and add a dark twin under
   html[data-theme="dark"] — see the archive doc for the full recipe.
   All text-role pairings validated >= WCAG AA
   (marketing/design-system/light-palette.md). */
:root {
  color-scheme: light;            /* native controls/scrollbars/autofill render light */

  /* Surface tier — light ladder: page light-grey, cards white, hover dips */
  --surface-base: #ECEEF2;
  --surface-1: #F7F8FA;
  --surface-2: #FFFFFF;
  --surface-3: #F1F3F6;
  --surface-4: #E6E9EE;

  /* Ink */
  --ink: #171B21;
  --ink-2: #3E4652;
  --ink-3: #5C6675;
  --ink-4: #8B94A2;               /* 3.06:1 on cards — large text only */

  /* Rules */
  --rule: #E3E6EB;
  --rule-strong: #D0D5DC;
  --control-border: #8B94A2;      /* interactive control boundaries — 3.06:1 on white */

  /* Brand emphasis (text/icon role; fills use --xgrid-blue) */
  --brand-bright: #2B67A8;
  --xgrid-blue-bright: #2B67A8;   /* alias — one site consumes this name */

  /* Ember variants (base ember = --xgrid-accent above) */
  --xgrid-accent-bright: #A34518; /* hover: light mode darkens (dark brightened) */
  --xgrid-accent-deep: #8F3E14;
  --accent-soft: rgba(186, 83, 31, 0.10);

  /* Semantic */
  --success: #177A54;
  --warning: #8A5A0B;
  --danger: #C22F2F;

  /* Glass — frosted white over light surfaces */
  --glass-fill: rgba(255, 255, 255, 0.72);
  --glass-fill-strong: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(16, 24, 40, 0.10);

  /* Elevation — soft neutral shadows, no inset hairlines */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, 0.10);
  --shadow-3: 0 16px 40px rgba(16, 24, 40, 0.14);

  /* Typography — restores the mono treatment (was silently broken:
     7 sites reference var(--font-mono) with no fallback) */
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* Normalize the angled-bar heading pattern across BOTH section families
   (collection-tabs + collection-carousel). Before this fix:
     .section-collection-tabs    .tabs-title      → 4.4rem, bar height 45%
     .section-collection-carousel .collection-list-title → 4.0rem, bar inset 30%
   Now: single size + single bar geometry across both. */
.section-collection-tabs [class^="collection-tabs-"] .tabs-title,
.section-collection-tabs [class*=" collection-tabs-"] .tabs-title,
.section-collection-carousel .collection-list-title,
.section-collection-carousel .collection-list-description,
.section-vendor-collection .collection-list-title,
.section-vendor-collection .collection-list-description {
  font-size: 4.4rem;
  line-height: 1;
  padding: 0.8rem 2rem;
  margin-bottom: 4rem;
}
.section-collection-tabs [class^="collection-tabs-"] .tabs-title::before,
.section-collection-tabs [class*=" collection-tabs-"] .tabs-title::before,
.section-collection-carousel .collection-list-title::before,
.section-collection-carousel .collection-list-description::before,
.section-vendor-collection .collection-list-title::before,
.section-vendor-collection .collection-list-description::before {
  inset: auto 0 0 0;
  height: 0.6em;
  background: var(--xgrid-grey);
  transform: skewX(-12deg);
  z-index: -1;
}

/* --------------------------------------------------------------------------
   TWILIGHT — button animations on Dawn's .button class
   -------------------------------------------------------------------------- */
/* Dawn uses .button (not .btn like the design-system prototypes). To get
   the Twilight motion vocabulary applied globally, target Dawn's class with
   the same transition + hover-lift + spring-soft easing + brand-glow shadow
   that the design system specifies. */
.button {
  transition:
    background-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color     140ms cubic-bezier(0.4, 0, 0.2, 1),
    color            140ms cubic-bezier(0.4, 0, 0.2, 1),
    transform        180ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow       180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.button:hover:not([disabled]):not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(var(--xgrid-blue-rgb), 0.32);
}
.button:active:not([disabled]):not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 90ms;
}
/* Ember-tinted glow when a button sits inside an accent (scheme-3) section */
.color-scheme-3 .button:hover:not([disabled]):not(:disabled),
.color-scheme-5 .button:hover:not([disabled]):not(:disabled) {
  box-shadow: 0 8px 24px rgba(var(--xgrid-accent-rgb), 0.36);
}
/* Focus ring — visible on keyboard nav, brand-bright */
.button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgb(var(--color-background)),
    0 0 0 4px var(--xgrid-blue);
}

/* --------------------------------------------------------------------------
   TWILIGHT — bg-tracks signature graphic (fixed, viewport-anchored)
   --------------------------------------------------------------------------
   The muddy tire-tracks asset, pinned to the right edge of the viewport,
   stays in place as the page scrolls beneath. URL is injected from
   theme.liquid via --twilight-bg-tracks. */
/* Move dark surface to <html> so body can be transparent and bg-tracks
   can sit between them at z-index: -1 (behind all body content). */
html {
  background-color: var(--surface-base, #ECEEF2);  /* page bg (Twilight: rgb(14,15,17)) */
}
body {
  background-color: transparent !important;
}
html::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 720px;
  height: 1663px;                 /* matches image aspect 1080:2495 at 720w */
  transform: translate(50%, -30%);
  background-image: var(--twilight-bg-tracks);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 0;
  opacity: 0.07;              /* dark-ink tracks as light watermark (Twilight: 0.50) */
  pointer-events: none;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   TWILIGHT — hero halo orbs (radial gradients behind image-banner / slideshow)
   --------------------------------------------------------------------------
   Atmospheric blue + ember gradients that sit BEHIND the hero photo +
   text, adding warmth without competing with content. Z-index 1 so they
   layer above the section bg but below the image / text. */
.section .banner,
.section .slideshow,
.banner--mobile-bottom {
  position: relative;
  isolation: isolate;
}
.section .banner::before,
.section .slideshow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;  /* below media in tree order — tints show only where media does not cover */
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 15% 0%,   color-mix(in srgb, var(--xgrid-blue) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 100%, color-mix(in srgb, var(--xgrid-accent) 7%, transparent) 0%, transparent 60%);
  /* screen blend removed for light mode — additive blending is invisible over light surfaces */
}

/* --------------------------------------------------------------------------
   TWILIGHT — Card surface refinement + hover lift
   --------------------------------------------------------------------------
   Every Dawn card (.card-wrapper, .product-card-wrapper, .carousel-card)
   gets the spring-soft hover lift + brand-blue glow on hover. */
.card-wrapper,
.product-card-wrapper,
.carousel-card,
.collection-card-wrapper {
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform   240ms cubic-bezier(0.4, 1.2, 0.6, 1),
    box-shadow  240ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card-wrapper:hover,
.product-card-wrapper:hover,
.carousel-card:hover,
.collection-card-wrapper:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 40px rgba(16, 24, 40, 0.14),
    0 0 0 1px rgba(var(--xgrid-blue-rgb), 0.4),
    0 0 24px rgba(var(--xgrid-blue-rgb), 0.16);
}

/* Card inner: subtle gradient halo (blue top-left, ember bottom-right)
   matching the design-system product-card __media radial gradient */
.card__inner,
.card.card--media .card__inner {
  position: relative;
  isolation: isolate;
}
.card__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 30% 20%, rgba(var(--xgrid-blue-rgb), 0.10) 0%, transparent 60%);
}

/* --------------------------------------------------------------------------
   TWILIGHT — Topbar / header glass treatment (subtle)
   --------------------------------------------------------------------------
   Adds the backdrop-filter blur + slight transparency that the design
   system specifies for the topbar. Layered over the bg-tracks graphic,
   produces a frosted-glass effect as users scroll. */
.section-header {
  background: var(--glass-fill, rgba(255, 255, 255, 0.78));
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

/* --------------------------------------------------------------------------
   TWILIGHT — Card badges: IN STOCK pill + ProvenanceTag
   --------------------------------------------------------------------------
   Rendered by card-product.liquid edits. IN STOCK shows green dot + label
   on dark transparent pill. ProvenanceTag shows ember/blue/etc. pill with
   small icon, sourced from product metafield xgrid.provenance_level. */

/* IN STOCK pill */
.badge.twilight-badge--in-stock {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  background: color-mix(in srgb, var(--success) 8%, transparent) !important;
  color: var(--success, #3FBA8C) !important;
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent) !important;
  border-radius: 0.4rem !important;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.8rem !important;
  height: auto;
}
.twilight-dot {
  width: 6px; height: 6px;
  background: var(--success, #3FBA8C);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--success, #3FBA8C);
}

/* ProvenanceTag — sits next to or below the status badge */
.twilight-provenance {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  border-radius: 0.4rem;
  background: var(--surface-2, #232426);
  border: 1px solid var(--rule, #2D2E31);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.twilight-prov-icon { width: 10px; height: 10px; }

.twilight-provenance--field {
  color: var(--xgrid-accent, #C75D2A);
  background: rgba(var(--xgrid-accent-rgb, 199 93 42), 0.14);
  border-color: rgba(var(--xgrid-accent-rgb, 199 93 42), 0.40);
}
.twilight-provenance--curator {
  color: var(--xgrid-blue, #3777BD);
  background: rgba(var(--xgrid-blue-rgb, 55 119 189), 0.14);
  border-color: rgba(var(--xgrid-blue-rgb, 55 119 189), 0.40);
}
.twilight-provenance--customer {
  color: var(--success, #3FBA8C);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

/* --------------------------------------------------------------------------
   TWILIGHT — Globo Smart Filter (collection page) overrides
   --------------------------------------------------------------------------
   Globo's stock styling targets a light-theme storefront. These overrides
   re-tone the most egregious bright-white elements to fit the dark theme. */

/* Sale label — ember instead of bright red */
.spf-product__label-sale,
.sale-text,
.gf-label-sale {
  background: var(--xgrid-accent, #C75D2A) !important;
  color: #fff !important;
  border-radius: 0.4rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

/* Product image wrapper — dark surface (the actual product image is still
   white inside, but the container chrome is dark) */
.spf-product-card__image-wrapper {
  background: var(--surface-2, #232426) !important;
  border-radius: 0.8rem !important;
  overflow: hidden;
}

/* Variant chip select (each variant is a select on its own card) */
.spf-product__variants,
select.spf-product__variants {
  background: var(--surface-2, #232426) !important;
  color: var(--ink, #F5F7FA) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 0.4rem !important;
  padding: 0.3rem 0.6rem !important;
}

/* Sale price color — ember instead of red */
.spf-product-card__saleprice,
.spf-product-card__price--sale,
.gf-product-price--sale {
  color: var(--xgrid-accent, #C75D2A) !important;
}

/* Regular price + struck-through price visibility */
.spf-product-card__price,
.spf-product-card__compareprice {
  color: var(--ink-2, #C7CCD2);
  font-variant-numeric: tabular-nums;
}
.spf-product-card__compareprice {
  color: var(--ink-3) !important;
}

/* Sort by + pagination dropdowns (the "25" and sort selectors at top) */
.sortby-select,
.gf-pagination select,
.spf-pagination select,
.spf-sortby select,
.spf-perpage select,
.spf-toolbar select {
  background: var(--surface-2, #232426) !important;
  color: var(--ink, #F5F7FA) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 0.4rem !important;
  padding: 0.6rem 2.5rem 0.6rem 1rem !important;
  font-family: var(--font-body-family) !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%235C6675' d='M6 8L2 4h8z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.8rem center !important;
}

/* Globo search bar */
.gf-search-input,
.spf-search-input,
.spf-search-box input,
.gf-search-keyword input,
input[placeholder*="Search products" i] {
  background: var(--surface-2, #232426) !important;
  color: var(--ink, #F5F7FA) !important;
  border: 1px solid var(--control-border, #8B94A2) !important;
  border-radius: 0.6rem !important;
  padding: 1.2rem 1.6rem 1.2rem 4rem !important;
  font-family: var(--font-body-family) !important;
}
.gf-search-input:focus,
.spf-search-input:focus,
.spf-search-box input:focus,
.gf-search-keyword input:focus {
  border-color: var(--xgrid-blue, #3777BD) !important;
  box-shadow: 0 0 0 3px rgba(var(--xgrid-blue-rgb, 55 119 189), 0.15) !important;
}

/* Search box container (wraps the input + icon) */
.gf-search-keyword,
.spf-search-box {
  background: transparent !important;
}

/* Filter sidebar — improve checkbox + label visibility */
.gf-tree label,
.spf-filter-tree label,
[class*="filter-tree"] label {
  color: var(--ink-2, #C7CCD2);
  cursor: pointer;
}
.gf-tree-checkbox input[type="checkbox"],
.spf-filter input[type="checkbox"],
[class*="filter-tree"] input[type="checkbox"] {
  accent-color: var(--xgrid-accent, #C75D2A);
}
.gf-tree-count,
.spf-filter-count,
[class*="filter-tree"] [class*="count"] {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* "37 Products" header text */
.spf-toolbar__count,
.gf-products-count {
  color: var(--ink, #F5F7FA);
}

/* Globo's product card vendor name styling */
.spf-product-card__vendor,
.gfqv-product-card__vendor {
  color: var(--xgrid-blue, #3777BD) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Product card title visibility */
.spf-product-card__title,
.gfqv-product-card__title {
  color: var(--ink, #F5F7FA) !important;
}

/* --------------------------------------------------------------------------
   TWILIGHT — Globo additional refinements
   --------------------------------------------------------------------------
   Variant swatches (not selects) + product image framing. */

/* Variant swatch pills (named pills under price showing color/variant names) */
.spf-product__swatch-text,
.spf-product__swatch-inner,
.spf-product-card__swatch,
.spf-swatch-element {
  background: var(--surface-3, #2F3033) !important;
  color: var(--ink-2, #C7CCD2) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 0.4rem !important;
  padding: 0.3rem 0.8rem !important;
}

/* Product image area — leave Globo's inline padding-top:140% aspect-ratio
   hack alone; just add a subtle dark border-radius on the container. The
   white product PNGs remain visible inside; the dark theme accepts them
   as "framed product photography" rather than fighting them with CSS. */
.spf-product-card__image-wrapper {
  border-radius: 0.6rem;
  overflow: hidden;
}

/* Globo "actions" toolbar (top-right "37 Products" / sort dropdown row) */
.gf-actions .gf-filter-trigger,
.gf-actions .gf-filter-selection,
.gf-actions .gf-summary {
  color: var(--ink-2, #C7CCD2);
}
.gf-actions .globo-selected-items-wrapper {
  background: var(--surface-2, #232426);
  border: 1px solid var(--rule, #2D2E31);
  border-radius: 0.4rem;
  color: var(--ink, #F5F7FA);
}

/* Page-size + sort selectors at top of grid — try wider net */
select[name="perPage"],
select[name="sortBy"],
select.gf-perpage,
.gf-actions select,
[class*="page-size"] select,
[class*="sort"] select {
  background: var(--surface-2, #232426) !important;
  color: var(--ink, #F5F7FA) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
}

/* --------------------------------------------------------------------------
   TWILIGHT — PDP (Product Detail Page) Twilight overrides
   --------------------------------------------------------------------------
   Dawn's product gallery, thumb rail, buy buttons, and info area. */

/* Product image gallery — dark frame around the white-bg product image */
.product__media-wrapper {
  position: relative;
}
.product__media-list,
.product__media-item,
.product-media-container,
.product__media,
.product-media,
.product__media-toggle--single,
deferred-media .product__media {
  background: var(--surface-2, #232426) !important;
  border-radius: 0.8rem;
  overflow: hidden;
}

/* Thumb rail — dark cards with ember border on active */
.thumbnail-list,
.product__media-toggle--list {
  gap: 0.6rem !important;
}
.thumbnail-list__item,
.product__media-toggle:not(.product__media-toggle--single) {
  background: var(--surface-2, #232426) !important;
  border-radius: 0.4rem !important;
  overflow: hidden;
  border: 1px solid var(--rule, #2D2E31);
}
.thumbnail-list__item .thumbnail,
.product__media-toggle .thumbnail {
  background: #fff;
  padding: 0.4rem;
  display: block;
}
/* Active thumb — ember border + glow */
.thumbnail-list__item[aria-current="true"],
.thumbnail-list__item .thumbnail[aria-current="true"],
.thumbnail[aria-current="true"],
.product__media-toggle[aria-current="true"],
.is-active .thumbnail {
  border-color: var(--xgrid-accent, #C75D2A) !important;
  box-shadow: 0 0 0 1px var(--xgrid-accent, #C75D2A), 0 0 12px rgba(var(--xgrid-accent-rgb, 199 93 42), 0.4) !important;
}

/* Buy buttons — primary "Add to cart" gets ember accent */
.product-form__submit,
.product-form__buttons button.button--primary,
.product-form__buttons button[name="add"] {
  background: var(--xgrid-accent, #C75D2A) !important;
  color: #fff !important;
  border: 1px solid var(--xgrid-accent, #C75D2A) !important;
}
.product-form__submit:hover,
.product-form__buttons button.button--primary:hover {
  background: var(--xgrid-accent-bright, #A34518) !important;
  box-shadow: 0 8px 24px rgba(var(--xgrid-accent-rgb, 199 93 42), 0.36) !important;
}

/* Sale badge on PDP — ensure it's ember */
.product__title + * .price__badge--sale,
.price__badge.price__badge--sale,
.price__sale .badge {
  background: var(--xgrid-accent, #C75D2A) !important;
  color: #fff !important;
}

/* Product title cleanliness */
.product__title h1,
.product__title {
  letter-spacing: -0.01em;
}

/* Quantity stepper styling */
.quantity__input {
  background: var(--surface-2, #232426) !important;
  color: var(--ink, #F5F7FA) !important;
  border-color: var(--rule, #2D2E31) !important;
}
.quantity__button {
  color: var(--ink-2, #C7CCD2) !important;
  background: var(--surface-2, #232426) !important;
}
.quantity__button:hover {
  background: var(--surface-3, #2F3033) !important;
  color: var(--ink, #F5F7FA) !important;
}

/* Pickup availability / location info — surface treatment */
.product__view-details a,
.product-popup-modal__button {
  color: var(--xgrid-blue-bright, #4A95E8) !important;
}

/* --------------------------------------------------------------------------
   TWILIGHT — Brand vendor logos (multicolumn section) — invert white PNGs
   --------------------------------------------------------------------------
   The XPEDITION/AOR/OPUS/MISSION/TAXA/etc brand logos ship as white-bg PNGs.
   filter:invert(1) flips colors so on dark theme they read as light logos
   on transparent bg. Monochrome logos look perfect; full-color logos may
   shift hue slightly but remain recognizable. */
.multicolumn-card img,
.multicolumn-list__item img,
[class*="multicolumn"] .card__media img,
[class*="multicolumn"] .media img {
  /* invert() removed for light mode — vendor logos ship dark-on-white (Twilight: invert(0.92)) */
  transition: filter 200ms ease;
}

/* --------------------------------------------------------------------------
   TWILIGHT — Search page polish
   -------------------------------------------------------------------------- */

/* "Search results" page heading */
.search h1,
.template-search h1 {
  font-family: var(--font-heading-family);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Search input on results page */
.search__input,
.search-form input[type="search"] {
  background: var(--surface-2, #232426) !important;
  color: var(--ink, #F5F7FA) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 0.6rem !important;
}
.search__input:focus,
.search-form input[type="search"]:focus {
  border-color: var(--xgrid-blue, #3777BD) !important;
  box-shadow: 0 0 0 3px rgba(var(--xgrid-blue-rgb, 55 119 189), 0.15) !important;
}

/* Predictive search popover */
predictive-search .predictive-search,
.predictive-search {
  background: var(--surface-2, #232426) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
}

/* --------------------------------------------------------------------------
   TWILIGHT — Cart page line items polish (when populated)
   -------------------------------------------------------------------------- */
.cart-item__price-wrapper .price--end {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.cart-item__quantity-wrapper .quantity__input {
  background: var(--surface-2, #232426) !important;
  color: var(--ink, #F5F7FA) !important;
  border-color: var(--rule, #2D2E31) !important;
}
.cart-item__remove-link {
  color: var(--ink-3, #9BA5B5);
}
.cart-item__remove-link:hover {
  color: var(--xgrid-accent, #C75D2A);
}

/* Cart footer / order summary — ember checkout CTA */
.cart__checkout-button,
button[name="checkout"] {
  background: var(--xgrid-accent, #C75D2A) !important;
  color: #fff !important;
  border-color: var(--xgrid-accent, #C75D2A) !important;
  font-weight: 600;
}

/* "Show 25" pagination label area — kill the white bg around the label */
.spf-perpage,
[class*="page-size"],
.gf-actions [class*="show"] {
  background: transparent !important;
}
.spf-perpage label,
[class*="page-size"] label {
  background: transparent !important;
  color: var(--ink-2, #C7CCD2) !important;
}

/* --------------------------------------------------------------------------
   TWILIGHT — Globo Product Cards (v2): full dark-frame design-system look
   --------------------------------------------------------------------------
   Match prototype-collection.html / prototype-pdp.html reference: dark card
   frame, padded white image inside, vendor + title + price + provenance
   below on the dark surface. */

/* The CARD itself — dark surface + border + rounded corners + padding */
.spf-product-card__inner {
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 1rem !important;
  padding: 1.2rem !important;
  position: relative !important;
  overflow: hidden;
  transition:
    transform 240ms cubic-bezier(0.4, 1.2, 0.6, 1),
    box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.spf-product-card:hover .spf-product-card__inner {
  transform: translateY(-3px);
  border-color: rgba(var(--xgrid-blue-rgb, 55 119 189), 0.5);
  box-shadow:
    0 16px 40px rgba(16, 24, 40, 0.14),
    0 0 24px rgba(var(--xgrid-blue-rgb, 55 119 189), 0.16);
}

/* Image wrapper INSIDE the card — keep aspect-ratio (inline padding-top:140%),
   add white interior, rounded, and bottom margin for breathing room. */
.spf-product-card__image-wrapper {
  background: #fff !important;
  border-radius: 0.6rem !important;
  margin-bottom: 1.2rem !important;
  overflow: hidden;
}

/* Sale label — absolute-positioned top-left INSIDE the new padded card */
.spf-product-card .spf-product__label,
.spf-product-card .spf-product__label-sale,
.spf-product-card .sale-text {
  position: absolute !important;
  top: 1.6rem !important;
  left: 1.6rem !important;
  z-index: 2 !important;
  margin: 0 !important;
}

/* Vendor + title + price + variants sit naturally inside the padded card */
.spf-product-card__detail,
.spf-product-card__content {
  padding: 0 !important;
}

.spf-product-card__vendor {
  font-size: 1.1rem !important;
  margin-bottom: 0.4rem !important;
}
.spf-product-card__title {
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--ink, #F5F7FA) !important;
  margin: 0 0 0.6rem !important;
  letter-spacing: -0.005em;
}
.spf-product-card__title a,
.spf-product-card__title a:visited {
  color: var(--ink, #F5F7FA) !important;
}
.spf-product-card__price-wrapper {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.8rem !important;
}

/* Variant swatch row — tight spacing, smaller pills */
.spf-product__swatches,
.spf-product-card__swatches {
  margin-top: 0.4rem !important;
  gap: 0.4rem !important;
  flex-wrap: wrap;
}
.spf-product__swatch-inner,
.spf-product__swatch-text {
  font-size: 1rem !important;
  padding: 0.2rem 0.6rem !important;
}

/* --------------------------------------------------------------------------
   TWILIGHT — Globo Filter Sidebar (v2): bring it on-theme
   --------------------------------------------------------------------------
   The sidebar in the user's screenshot was undersized + dim. Treat it as
   a proper Twilight surface card with bright headings and ember-checked
   filter options. */

/* The sidebar's main container — find Globo's various wrappers */
.gf-tree,
.spf-filter-tree,
.gf-collection-filter,
[class*="gfFilters"],
.facets__form,
.gf-filters-wrapper,
.spf-filter-form,
#gf-filter-tree {
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 0.8rem !important;
  padding: 1.5rem !important;
}

/* Group headings (Campsite Gear, Vehicle Outfitting, Brand, etc.) */
.gf-tree-title,
.spf-filter-tree__title,
.gf-tree-group-title,
.gf-collection-filter h3,
.gf-collection-filter h4,
[class*="gfFilters"] h3,
[class*="gfFilters"] h4 {
  font-family: var(--font-heading-family) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--ink, #F5F7FA) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.5rem 0 0.8rem !important;
}
.gf-tree-title:first-child,
.spf-filter-tree__title:first-child {
  margin-top: 0 !important;
}

/* Filter option labels */
.gf-tree label,
.spf-filter-tree label,
.gf-tree-checkbox-text,
[class*="gfFilters"] label {
  color: var(--ink-2, #C7CCD2) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  padding: 0.4rem 0 !important;
}
.gf-tree label:hover,
[class*="gfFilters"] label:hover {
  color: var(--ink, #F5F7FA) !important;
}

/* Count badges next to filter options */
.gf-tree-count,
.spf-filter-count,
.gf-tree__count,
[class*="gfFilters"] [class*="count"] {
  font-family: var(--font-mono) !important;
  font-size: 1.1rem !important;
  color: var(--ink-3) !important;
  font-variant-numeric: tabular-nums;
}

/* Group container spacing */
.gf-tree-group {
  padding-bottom: 0.8rem !important;
  margin-bottom: 0.8rem !important;
  border-bottom: 1px solid var(--rule, #2D2E31);
}
.gf-tree-group:last-child {
  border-bottom: none !important;
}

/* --------------------------------------------------------------------------
   TWILIGHT — Dawn Facets sidebar (the actual collection filter sidebar)
   --------------------------------------------------------------------------
   The sidebar on collection/search pages is Dawn's facets, not Globo's tree.
   These overrides give it the dark-card Twilight surface treatment. */

.facets__form-vertical {
  background: var(--surface-1, #161719);
  border: 1px solid var(--rule, #2D2E31);
  border-radius: 0.8rem;
  padding: 1.5rem;
}

.facets__disclosure-vertical {
  border-bottom: 1px solid var(--rule, #2D2E31);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.facets__disclosure-vertical:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* The collapsible summary (e.g., "Campsite Gear") */
.facets__disclosure-vertical > summary,
.facets__disclosure-vertical .facets__summary-vertical {
  font-family: var(--font-heading-family);
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--ink, #F5F7FA) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0.6rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.facets__disclosure-vertical > summary::-webkit-details-marker,
.facets__disclosure-vertical > summary::marker {
  display: none;
}

/* Filter option labels */
.facets-wrap label,
.facets__form-vertical label {
  color: var(--ink-2, #C7CCD2) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0 !important;
}
.facets-wrap label:hover,
.facets__form-vertical label:hover {
  color: var(--ink, #F5F7FA) !important;
}

/* Checkbox styling — ember accent when checked */
.facets-wrap input[type="checkbox"],
.facets__form-vertical input[type="checkbox"] {
  accent-color: var(--xgrid-accent, #C75D2A);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Count "(2)" "(13)" etc. — muted mono */
.facets-wrap .facet-checkbox__highlight,
.facets__form-vertical .facet-checkbox__highlight,
.facets-wrap [class*="count"],
.facets__form-vertical [class*="count"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3) !important;
  font-size: 1.1rem !important;
}

/* Chevron icon on disclosure */
.facets__disclosure-vertical summary svg,
.facets__disclosure-vertical summary [class*="caret"],
.facets__disclosure-vertical summary [class*="arrow"] {
  color: var(--ink-3, #9BA5B5);
  transition: transform 200ms ease;
}
.facets__disclosure-vertical[open] summary svg {
  transform: rotate(180deg);
  color: var(--xgrid-accent, #C75D2A);
}

/* --------------------------------------------------------------------------
   TWILIGHT — Globo Filter Tree sidebar (the ACTUAL one — gf-* classes)
   --------------------------------------------------------------------------
   Globo's category tree uses .gf-filter-contents wrapper with .gf-option-block
   per group. Not Dawn's facets, not what I was targeting before. */

/* Container card surface around the entire filter tree */
.gf-filter-contents {
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 0.8rem !important;
  padding: 1.5rem !important;
}

/* Each filter group — gentle separator between groups */
.gf-option-block {
  padding-bottom: 1.2rem !important;
  margin-bottom: 1.2rem !important;
  border-bottom: 1px solid var(--rule, #2D2E31);
}
.gf-option-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Group heading: "Campsite Gear", "Vehicle Outfiiting", "Brand", "Merch" */
.gf-block-title {
  font-family: var(--font-heading-family) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--ink, #F5F7FA) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 1rem !important;
}

/* The collapsible toggle chevron */
.gf-block-title svg,
.gf-block-toggle,
.gf-collapse-icon {
  color: var(--ink-3, #9BA5B5);
}
.gf-option-block:not(.gf-collapsed) .gf-block-title svg {
  color: var(--xgrid-accent, #C75D2A);
}

/* Filter option labels (checkbox + text) */
.gf-option-block label,
.gf-option-block .gf-checkbox-label,
.gf-option-block .gf-text {
  color: var(--ink-2, #C7CCD2) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  cursor: pointer;
  padding: 0.4rem 0 !important;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.gf-option-block label:hover,
.gf-option-block .gf-checkbox-label:hover {
  color: var(--ink, #F5F7FA) !important;
}

/* Checkbox styling */
.gf-option-block input[type="checkbox"] {
  accent-color: var(--xgrid-accent, #C75D2A) !important;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Count "(2)" "(13)" — muted mono */
.gf-option-block .gf-checkbox-count,
.gf-option-block [class*="count"],
.gf-checkbox-count {
  color: var(--ink-3) !important;
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem !important;
  margin-left: auto;
}

/* Active filters bar (chips at top showing applied filters) */
.gf-selected-filters,
.gf-active-filters {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule, #2D2E31);
}
.gf-selected-filter,
.gf-active-filter {
  background: var(--accent-soft, rgba(199, 93, 42, 0.12)) !important;
  border: 1px solid rgba(var(--xgrid-accent-rgb, 199 93 42), 0.40) !important;
  color: var(--xgrid-accent-bright, #E37545) !important;
  border-radius: 9999px !important;
  padding: 0.3rem 0.8rem !important;
  font-size: 1.2rem !important;
}

/* "Clear all" button */
.gf-clear-all,
[class*="clear-all"] {
  color: var(--xgrid-accent-bright, #E37545) !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   TWILIGHT — Globo Product Cards (v3): fix dim price + portrait images
   --------------------------------------------------------------------------
   v2 left two issues visible in production: (1) the price showed at 0.75
   opacity from Dawn's body color cascade; my CSS only set font-family on
   .spf-product-card__price-wrapper, not color. (2) Globo's inline
   padding-top:140% makes images portrait/dominant — reference design
   shows near-square. */

/* Override Globo's inline portrait aspect — square is closer to prototype */
.spf-product-card__image-wrapper {
  padding-top: 100% !important;  /* was inline 140% */
}

/* Card frame slightly larger so the dark surround reads as a real frame */
.spf-product-card__inner {
  padding: 1.4rem !important;
}

/* Price — bright white, not the inherited 75%-opacity body color */
.spf-product-card__price-wrapper,
.spf-product-card__price-wrapper *,
.spf-product-card__price,
.spf-product-card__price-current {
  color: var(--ink, #F5F7FA) !important;
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem;
  font-weight: 500;
}
/* but compare-at price stays muted with strikethrough */
.spf-product-card__compareprice,
.spf-product-card__oldprice {
  color: var(--ink-3) !important;
  text-decoration: line-through;
}
/* sale price gets the ember */
.spf-product-card__saleprice {
  color: var(--xgrid-accent, #C75D2A) !important;
  font-weight: 600;
}

/* Variant swatches — keep them small + tight, only show in the lower zone */
.spf-product__swatches {
  margin-top: 0.6rem;
}

/* ==========================================================================
   TWILIGHT — Authoritative Globo Card + Sidebar (design-system port)
   ==========================================================================
   Ports prototype-collection.html attribute-for-attribute onto Globo's DOM.
   Earlier sections (v1/v2/v3) are superseded by this block via cascade
   order. Design-system token values inlined as fallbacks where the theme's
   custom-property graph doesn't expose them.

   Mapping (design-system left → Globo right):
     .card .product-card              → .spf-product-card
     .product-card__media             → .spf-product-card__image-wrapper
     .product-card__badge             → .twilight-status (JS-injected)
     .product-card__body              → .spf-product__info
     .product-card__vendor            → .spf-product-card__vendor a
     .product-card__title             → .spf-product-card__title a
     .product-card__price             → .spf-product-card__price-wrapper *
     .product-card__provenance        → .twilight-provenance (JS-injected)

   Design tokens (from marketing/design-system/tokens.css):
     --surface-1: #161719   page surface, card bg
     --surface-2: #232426   media area bg
     --ink:        #F5F7FA   primary text
     --brand-bright: #4A95E8  vendor blue + hover glow
     --accent:     #C75D2A   sale + provenance--field + filter pill
     --rule:       #2D2E31   borders
     --space-3..5: 12/16/20  card padding
     --radius-lg:  12px      card corners
   ========================================================================== */

/* ---------- Card root: frame + hover lift ---------- */
.spf-product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;       /* fill the grid row's height */
  height: 100% !important;
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  transition:
    transform 240ms cubic-bezier(0.4, 1.2, 0.6, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Inner column should also stretch and push body to fill remaining height */
.spf-product-card .spf-product-card__inner {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.spf-product-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--brand-bright, #4A95E8) !important;
  box-shadow:
    0 16px 40px rgba(16, 24, 40, 0.14),
    0 0 0 1px color-mix(in srgb, var(--xgrid-blue) 40%, transparent),
    0 0 24px color-mix(in srgb, var(--xgrid-blue) 12%, transparent) !important;
}

/* Inner is a structural wrapper only — no second frame */
.spf-product-card__inner {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- Media area: dark surface + radial orb glow ---------- */
.spf-product-card__image-wrapper {
  display: block !important;
  position: relative !important;
  padding-top: 125% !important;             /* 4:5 portrait per design system */
  background: var(--surface-2, #232426) !important;
  border-radius: 0 !important;              /* card root already clips */
  overflow: hidden !important;
  isolation: isolate;
  margin: 0 !important;
}
.spf-product-card__image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--xgrid-blue) 12%, transparent) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.spf-product-card__image-wrapper img.spf-product-card__image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  z-index: 2;
}

/* Hide Globo's own product labels (Sale / etc.). All status classification
   now lives in the .twilight-status pill injected by twilight-globo-enhance.js,
   so Globo's labels would just stack underneath ours. */
.spf-product-card .spf-product__label,
.spf-product-card .spf-product__label-sale,
.spf-product-card .sale-text,
.spf-product-card .gf-label-sale {
  display: none !important;
}

/* Hide variant swatch row on grid cards. Design system shows clean
   vendor/title/price/provenance layout — variants belong on PDP, not in
   the search/collection grid. */
.spf-product-card .spf-product__swatches,
.spf-product-card .spf-product__swatchs,
.spf-product-card .spf-product-card__swatches,
.spf-product-card .spf-product__variants,
.spf-product-card .spf-product__swatch-text,
.spf-product-card .spf-product__swatch-inner,
.spf-product-card .spf-product-card__swatch,
.spf-product-card .spf-swatch-element,
.spf-product-card select.spf-product__variants {
  display: none !important;
}

/* Hide Globo's per-card "Add to cart" form. The CTA belongs on the PDP,
   not in the grid. Without this rule, the new flex layout (height:100%
   + flex:1 on .spf-product-card__inner) reveals the form that was
   previously collapsed only because Dawn's container had height:0. */
.spf-product-card .spf-product__form,
.spf-product-card .spf-product__form-btn-addtocart,
.spf-product-card form[action*="/cart/add"] {
  display: none !important;
}

/* ---------- Body section ---------- */
.spf-product__info {
  padding: 16px 20px 20px !important;
  margin: 0 !important;
  background: transparent;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Title gets a min-height to absorb the common 1-vs-2-line variance,
   so price stays at consistent vertical position across cards in a row.
   Long titles still wrap; very-long titles clamp to keep card heights
   uniform when grid-auto-rows: 1fr is in play. */
.spf-product-card .spf-product-card__title {
  min-height: 2.6em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Push price to the bottom of the body so it lines up across the row */
.spf-product-card .spf-product-card__price-wrapper {
  margin-top: auto !important;
}

/* Vendor — caption brand-bright uppercase wide-tracked */
.spf-product-card__vendor {
  font-size: 11px !important;
  color: var(--brand-bright, #4A95E8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
}
.spf-product-card__vendor a,
.spf-product-card__vendor a:visited {
  color: var(--brand-bright, #4A95E8) !important;
  text-decoration: none !important;
}

/* Title — heading-sm ink bold tight */
.spf-product-card__title {
  font-size: 18px !important;
  color: var(--ink, #F5F7FA) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
}
.spf-product-card__title a,
.spf-product-card__title a:visited {
  color: var(--ink, #F5F7FA) !important;
  text-decoration: none !important;
}
.spf-product-card__title a:hover {
  color: var(--brand-bright, #4A95E8) !important;
}

/* Price — mono ink tabular bright */
.spf-product-card__price-wrapper {
  margin: 0 !important;
}
.spf-product-card__price-wrapper,
.spf-product-card__price-wrapper span,
.spf-product-card__price,
.spf-product-card__price.money {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 14px !important;
  color: var(--ink, #F5F7FA) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}
.spf-product-card__price-wrapper .spf-product-card__compareprice,
.spf-product-card__price-wrapper .spf-product-card__oldprice,
span.spf-product-card__compareprice,
span.spf-product-card__oldprice {
  color: var(--ink-3) !important;
  text-decoration: line-through;
  margin-right: 8px !important;
  font-weight: 400 !important;
}
.spf-product-card__price-wrapper .spf-product-card__saleprice,
span.spf-product-card__saleprice {
  color: var(--xgrid-accent, #C75D2A) !important;
  font-weight: 600 !important;
}

/* ---------- Status badge (JS-injected via twilight-cards.js) ---------- */
.twilight-status {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  padding: 0 12px;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  border: 1px solid var(--rule, #2D2E31);
  background: var(--surface-2, #232426);
  color: var(--ink-3);
}
.twilight-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.twilight-status--in-stock {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
}
.twilight-status--low-stock {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 32%, transparent);
}
.twilight-status--new {
  color: var(--brand-bright, #4A95E8);
  background: color-mix(in srgb, var(--xgrid-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--xgrid-blue) 40%, transparent);
}
.twilight-status--sale {
  color: var(--xgrid-accent-bright, #A34518);
  background: color-mix(in srgb, var(--xgrid-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--xgrid-accent) 40%, transparent);
}
.twilight-status--sold-out {
  color: var(--ink-3);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-color: var(--rule, #2D2E31);
}
.twilight-status--sold-out::before { display: none; }

/* ---------- Provenance pill row (JS-injected, below price) ---------- */
.twilight-provenance {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.twilight-provenance__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  padding: 0 8px;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  background: var(--surface-2, #232426);
  border: 1px solid var(--rule, #2D2E31);
  color: var(--ink-3);
}
.twilight-provenance__pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.twilight-provenance__pill--field {
  color: var(--xgrid-accent-bright, #A34518);
  background: color-mix(in srgb, var(--xgrid-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--xgrid-accent) 40%, transparent);
}
.twilight-provenance__pill--curator {
  color: var(--brand-bright, #4A95E8);
  background: color-mix(in srgb, var(--xgrid-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--xgrid-blue) 40%, transparent);
}
.twilight-provenance__pill--customer {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
}
.twilight-provenance__pill--supplier {
  color: var(--ink-3);
}

/* ==========================================================================
   TWILIGHT — Authoritative Globo Sidebar (design-system port)
   ==========================================================================
   .filter-sidebar       → .gf-filter-contents (container card)
   .filter-sidebar__head → injected wrapper "Filters / Clear all" header
   .filter-pills         → .gf-selected-filters (active-filter chips)
   .filter-group         → .gf-option-block (collapsible group)
   .filter-group__trigger → .gf-block-title
   .filter-option        → .gf-option-block label
   .filter-option__count → .gf-checkbox-count
   ========================================================================== */

.gf-filter-contents {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 20px !important;
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 12px !important;
}

/* Active filter chips (ember outline, removable) */
.gf-selected-filters,
.gf-active-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--rule, #2D2E31) !important;
}
.gf-selected-filter,
.gf-active-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: color-mix(in srgb, var(--xgrid-accent) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--xgrid-accent) 40%, transparent) !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  color: var(--xgrid-accent-bright) !important;
  font-weight: 500 !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
}

/* Group container (each .gf-option-block ≈ <details>) */
.gf-option-block {
  border-bottom: 1px solid var(--rule, #2D2E31) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.gf-option-block:last-child { border-bottom: none !important; }

/* Group heading */
.gf-block-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 16px 0 !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink, #F5F7FA) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  list-style: none !important;
  margin: 0 !important;
  transition: color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gf-block-title:hover { color: var(--brand-bright, #4A95E8) !important; }
.gf-block-title svg,
.gf-block-toggle,
.gf-collapse-icon {
  width: 14px !important;
  height: 14px !important;
  color: var(--ink-3) !important;
  margin-left: auto !important;
  transition: transform 180ms cubic-bezier(0.4, 1.2, 0.6, 1);
}
.gf-option-block:not(.gf-collapsed) .gf-block-title svg {
  transform: rotate(180deg);
  color: var(--xgrid-accent, #C75D2A) !important;
}

/* ---------- v2: target ACTUAL Globo DOM (button + span checkbox) ----------
   Live structure:
     .gf-option-block
       .gf-block-title > .h3 > span               (group heading)
       .gf-block-content
         .gf-scroll
           ul.gf-option-box
             li[data-collection]
               <div>  (sometimes wrapped, sometimes not)
                 button[role="checkbox"][aria-checked="false"]
                   <span class="gf-Checkbox"></span>  (the visual checkbox)
                   <span class="gf-label">Coolers</span>
                   <span class="gf-count">(2)</span>
   ------------------------------------------------------------------------- */

/* Title — strip the .h3 default margins/sizing so the title row is clean.
   Globo's .h3 ships color: rgb(58, 58, 58) (dark gray), which beats
   `color: inherit` on specificity tie because Globo's selector is later
   in cascade. Use explicit ink color + extra-specific selectors. */
.gf-filter-contents .gf-block-title .h3,
.gf-filter-contents .gf-block-title div.h3,
.gf-filter-contents .gf-block-title .h3 span,
.gf-filter-contents .gf-block-title h3 span,
div.gf-block-title .h3,
div.gf-block-title .h3 * {
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink, #F5F7FA) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Title — add a CSS-only collapse chevron via ::after (Globo doesn't ship one) */
.gf-block-title::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  margin-bottom: 4px;
  border-right: 2px solid color-mix(in srgb, var(--ink) 60%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 60%, transparent);
  transform: rotate(45deg);
  transition: transform 180ms cubic-bezier(0.4, 1.2, 0.6, 1), border-color 140ms ease;
  flex-shrink: 0;
}
.gf-option-block:not(.gf-collapsed) .gf-block-title::after {
  transform: rotate(-135deg);
  margin-bottom: -4px;
  border-right-color: var(--xgrid-accent, #C75D2A);
  border-bottom-color: var(--xgrid-accent, #C75D2A);
}

/* Reset the ul/li grid so options stack cleanly */
.gf-option-block .gf-option-box {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.gf-option-block .gf-option-box li { padding: 0 !important; margin: 0 !important; }
.gf-option-block .gf-option-box li > div { padding: 0 !important; }
.gf-option-block .gf-block-content { padding: 0 !important; }
.gf-option-block .gf-scroll { padding: 0 !important; }

/* Option row = the button */
.gf-option-block button[role="checkbox"] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  margin: 0 -12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-align: left !important;
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
  transition: background-color 140ms cubic-bezier(0.4, 0, 0.2, 1), color 140ms ease;
  min-height: 32px;
}
.gf-option-block button[role="checkbox"]:hover {
  background: var(--surface-2, #232426) !important;
  color: var(--ink, #F5F7FA) !important;
}

/* Visual checkbox = .gf-Checkbox span — override Globo's light-theme defaults */
.gf-option-block .gf-Checkbox {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid var(--control-border, #8B94A2) !important;
  border-radius: 3px !important;
  background: var(--surface-2, #232426) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  display: inline-block !important;
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gf-option-block button[role="checkbox"][aria-checked="true"] .gf-Checkbox {
  background: var(--xgrid-accent, #C75D2A) !important;
  border-color: var(--xgrid-accent, #C75D2A) !important;
}
.gf-option-block button[role="checkbox"][aria-checked="true"] .gf-Checkbox::after {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  width: 4px !important;
  height: 8px !important;
  border-right: 2px solid white !important;
  border-bottom: 2px solid white !important;
  transform: rotate(45deg);
}

/* Label */
.gf-option-block .gf-label {
  flex: 1 !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
}
.gf-option-block button[role="checkbox"][aria-checked="true"] .gf-label {
  color: var(--ink, #F5F7FA) !important;
  font-weight: 500 !important;
}

/* Count (renders as "(2)") — bumped specificity past Globo's own .gf-count rule */
.gf-filter-contents .gf-option-block .gf-count,
.gf-filter-contents button[role="checkbox"] .gf-count,
span.gf-count.gf-count {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  margin-left: auto !important;
}

/* "Clear all" button */
.gf-clear-all,
[class*="gf-clear-all"],
a.gf-refine-toggle {
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: var(--xgrid-accent-bright) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  padding: 0 !important;
}
.gf-clear-all:hover,
a.gf-refine-toggle:hover {
  color: var(--xgrid-accent, #C75D2A) !important;
  text-decoration: underline !important;
}

/* ---------- Active filter chips (.gf-actions top bar) ----------
   Live structure (renders only when filters are applied):
     .gf-actions > .globo-selected-items-wrapper.rounded
       > ul.globo-selected-items
         > li.selected-item.gf-option-label
             > a[onclick=removeFilterValue(...)]
                 .selected-item > span.hidden-xs (group name like "Brand")
                                + strong > .gf-label (filter value like "DMOS")
                 .gf-clear > svg (× close icon)

   Globo writes inline CSS vars (--text-color #000, --bg-color #E8E8E8) on
   the wrapper — these are overridden with !important here. */

.globo-selected-items-wrapper.rounded {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.globo-selected-items-wrapper.rounded ul.globo-selected-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Each chip = li > a */
.globo-selected-items-wrapper li.selected-item {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.globo-selected-items-wrapper li.selected-item > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: color-mix(in srgb, var(--xgrid-accent) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--xgrid-accent) 40%, transparent) !important;
  border-radius: 9999px !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: var(--xgrid-accent-bright) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.globo-selected-items-wrapper li.selected-item > a:hover {
  background: color-mix(in srgb, var(--xgrid-accent) 20%, transparent) !important;
  border-color: var(--xgrid-accent, #C75D2A) !important;
}

/* Hide the redundant group-name prefix ("Brand", "Campsite Gear" before the
   actual value) — design system reference (image 16) shows only the value,
   not the group it came from. */
.globo-selected-items-wrapper li.selected-item .hidden-xs {
  display: none !important;
}

/* The filter value text — sits inside <strong> */
.globo-selected-items-wrapper li.selected-item strong,
.globo-selected-items-wrapper li.selected-item .gf-label {
  font-weight: 500 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
}

/* × close icon — inherit ember from chip */
.globo-selected-items-wrapper li.selected-item .gf-clear {
  display: inline-flex !important;
  align-items: center;
  color: inherit !important;
  opacity: 0.7;
  transition: opacity 140ms ease;
}
.globo-selected-items-wrapper li.selected-item > a:hover .gf-clear {
  opacity: 1;
}
.globo-selected-items-wrapper li.selected-item .gf-clear svg {
  width: 14px !important;
  height: 14px !important;
}

/* ==========================================================================
   TWILIGHT — Authoritative PDP Gallery (design-system port)
   ==========================================================================
   Ports prototype-pdp.html .pdp-gallery onto Dawn's product media gallery.

   Design system spec (tokens.css ~line 31):
     .pdp-gallery {
       position: relative;
       aspect-ratio: 4/5;
       background:
         radial-gradient(ellipse at 30% 30%, rgba(74,149,232, 0.5) 0%, transparent 50%),
         radial-gradient(ellipse at 70% 70%, rgba(199,93,42, 0.2) 0%, transparent 50%),
         var(--surface-2);
       border-radius: var(--radius-xl);  // 20px
       border: 1px solid var(--rule);
     }

   Dawn DOM:
     .product__media-wrapper (outer)
       media-gallery > .product__media-list (slider container)
         .product__media-item.slider__slide
           .product__media.media (image wrapper)
             <img>
       slider-component > .thumbnail-list (thumb rail)
   ========================================================================== */

/* The visible main image surface = .product__media-list (the slider container).
   Production trade-off vs prototype-pdp.html: the prototype shows an empty
   placeholder so the orb at 30%/30% fills the visible area. Real product
   photos with white backgrounds cover the orb's bright center, leaving only
   the dim falloff (~10% opacity) visible in the inset ring.
   Fix: position orbs at extreme CORNERS (5%/5% and 95%/95%) and bump
   opacity so the BRIGHT area lands in the visible ring around the image. */
.product__media-wrapper .product__media-list {
  position: relative !important;
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--xgrid-blue) 14%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--xgrid-accent) 10%, transparent) 0%, transparent 45%),
    var(--surface-2, #232426) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  isolation: isolate;
}

/* Every layer between .product__media-list and the actual <img> must be
   transparent or the orb gradient on the list is masked.
   DevTools probe at the corner showed BOTH .product__media-toggle (the
   click-to-zoom button overlay) AND .product-media-container were
   rendering solid surface-2 — masking the orb completely.
   Hit them all. */
.product__media-wrapper .product__media-item,
.product__media-wrapper .product__media-item .product__media,
.product__media-wrapper .product__media-toggle,
.product__media-wrapper .product__media-toggle--single,
.product__media-wrapper .product__media-toggle--single .product__media,
.product__media-wrapper .product__media-zoom-lightbox,
.product__media-wrapper .product-media-container,
.product__media-wrapper .product-media,
.product__media-wrapper modal-opener,
.product__media-wrapper deferred-media,
.product__media-wrapper deferred-media .product__media {
  background: transparent !important;
  background-color: transparent !important;
}

/* The actual image — float it inside with padding so the dark surface +
   orb glow show around the edges (matches the grid-card treatment).
   6% on all sides — half the original 12% per user request; product
   photo fills more of the frame while still leaving the orb gradient
   visible at the corners. */
.product__media-wrapper .product__media img,
.product__media-wrapper deferred-media .product__media img,
.product__media-wrapper .product-media img,
.product__media-wrapper .media img {
  padding: 6% !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* Thumb rail — refine per design system: glass surface, ember active */
.product__media-wrapper .thumbnail-list {
  gap: 8px !important;
  margin-top: 12px !important;
}
.product__media-wrapper .thumbnail-list__item {
  background: var(--glass-fill, rgba(255, 255, 255, 0.72)) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border, rgba(16, 24, 40, 0.10)) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition:
    border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 240ms cubic-bezier(0.4, 1.2, 0.6, 1) !important;
}
.product__media-wrapper .thumbnail-list__item:hover {
  border-color: var(--rule-strong) !important;
  transform: translateY(-1px);
}
/* Active thumb — ember border + glow */
.product__media-wrapper .thumbnail-list__item .thumbnail[aria-current="true"],
.product__media-wrapper .thumbnail-list__item button[aria-current="true"],
.product__media-wrapper .thumbnail-list__item.is-active {
  border-color: var(--xgrid-accent, #C75D2A) !important;
  box-shadow:
    0 0 0 1px var(--xgrid-accent, #C75D2A),
    0 0 12px color-mix(in srgb, var(--xgrid-accent) 40%, transparent) !important;
}
/* Thumb image — keep white-bg product photos visible but smaller */
.product__media-wrapper .thumbnail-list__item .thumbnail,
.product__media-wrapper .thumbnail img {
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 0 !important;
}

/* Slider buttons (prev/next arrows on main image) — dark glass treatment */
.product__media-wrapper .slider-button {
  background: var(--glass-fill, rgba(255, 255, 255, 0.72)) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border, rgba(16, 24, 40, 0.10)) !important;
  color: var(--ink, #F5F7FA) !important;
  border-radius: 9999px !important;
}
.product__media-wrapper .slider-button:hover {
  background: var(--glass-fill-strong, rgba(255, 255, 255, 0.92)) !important;
  border-color: var(--xgrid-accent, #C75D2A) !important;
}

/* Slider counter ("1 / 4") */
.product__media-wrapper .slider-counter {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  color: var(--ink-2, rgba(245, 247, 250, 0.78));
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TWILIGHT — Globo grid toolbar (Show / Sort dropdowns at top-right)
   ==========================================================================
   Globo wraps the "Show 25" select and the "Relevance" custom dropdown
   in .sort-by containers that ship a light-gray (#F7F7F7) pill bg.
   Re-tone to surface-2 + rule border + radius-sm to fit the dark theme.
   ========================================================================== */

.gf-actions .sort-by,
.gf-actions .sort-by.limit-by {
  background: var(--surface-2, #232426) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 6px !important;
  padding: 0 !important;
  overflow: hidden;
  height: 36px;
  display: inline-flex !important;
  align-items: center !important;
}

.gf-actions .sort-by label,
.gf-actions .sort-by.limit-by label {
  background: transparent !important;
  color: var(--ink-3) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 8px 0 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* The native <select id="setLimit"> */
.gf-actions .sort-by .sortby-select,
.gf-actions select#setLimit {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%235C6675' d='M6 8L2 4h8z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--ink, #F5F7FA) !important;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  padding: 0 24px 0 4px !important;
  height: 100% !important;
  cursor: pointer !important;
}

/* The "Relevance" custom dropdown button */
.gf-actions .sort-by .sort-by-toggle {
  background: transparent !important;
  border: none !important;
  color: var(--ink, #F5F7FA) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 28px 0 12px !important;
  height: 100% !important;
  cursor: pointer !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
.gf-actions .sort-by .sort-by-toggle::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid color-mix(in srgb, var(--ink) 60%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 60%, transparent);
  transform: rotate(45deg);
  transition: transform 180ms cubic-bezier(0.4, 1.2, 0.6, 1);
  pointer-events: none;
}
.gf-actions .sort-by .sort-by-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: -2px;
  border-right-color: var(--xgrid-accent, #C75D2A);
  border-bottom-color: var(--xgrid-accent, #C75D2A);
}

/* The custom dropdown popup that appears below "Relevance" when open */
.globo-dropdown-custom__options {
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 6px !important;
  padding: 4px !important;
  margin-top: 6px !important;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14) !important;
  list-style: none !important;
  min-width: 180px;
}
.globo-dropdown-custom__options li {
  background: transparent !important;
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 140ms cubic-bezier(0.4, 0, 0.2, 1), color 140ms ease;
  list-style: none !important;
  margin: 0 !important;
}
.globo-dropdown-custom__options li:hover {
  background: var(--surface-2, #232426) !important;
  color: var(--ink, #F5F7FA) !important;
}
.globo-dropdown-custom__options li[aria-selected="true"],
.globo-dropdown-custom__options li.is-selected {
  background: color-mix(in srgb, var(--xgrid-accent) 12%, transparent) !important;
  color: var(--xgrid-accent-bright, #A34518) !important;
  font-weight: 500;
}

/* "37 Products" summary text */
.gf-actions .gf-summary {
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.gf-actions .gf-summary b {
  color: var(--ink, #F5F7FA) !important;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   TWILIGHT — Qikify Smart Menu (mega-menu nav)
   ==========================================================================
   Qikify ships a light-theme mega-menu (white bg, black text) and exposes
   only a few colors in its admin (bg/text/hover/underline/price). Full
   visual rework via CSS to match Twilight design system.

   DOM structure (inspected live):
     ul#qikify-tmenu-megamenu-0          (top nav bar — replaces Dawn nav)
       li.tmenu_disabled                 (Dawn-managed item, hidden by Qikify)
       li.tmenu_item--root               (each top-level nav item)
         a.tmenu_item_link
           .tmenu_item_icon > svg        (optional, e.g. map pin)
           .tmenu_item_text              (the label)
           .tmenu_indicator > .tmenu_indicator_icon > svg  (▾ chevron)
         ul.tmenu_submenu_type_mega      (mega-panel, only when has_child)
           li.tmenu_item_level_1.tmenu_item_display_header  (column heading)
             a.tmenu_item_link > .tmenu_item_text
             ul.tmenu_submenu_type_automatic
               li.tmenu_item_level_2
                 a.tmenu_item_link > .tmenu_item_text  (subcategory link)
   ========================================================================== */

/* Top-level nav strip — make Qikify items inherit Dawn's nav row styles
   that we already polished, but explicitly enforce ink color + font */
#qikify-tmenu-megamenu-0 {
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
}
#qikify-tmenu-megamenu-0 .tmenu_item--root > .tmenu_item_link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 18px !important;
  color: var(--ink, #F5F7FA) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 140ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
#qikify-tmenu-megamenu-0 .tmenu_item--root > .tmenu_item_link:hover,
#qikify-tmenu-megamenu-0 .tmenu_item--root:hover > .tmenu_item_link,
#qikify-tmenu-megamenu-0 .tmenu_item--root > .tmenu_item_link[aria-expanded="true"] {
  color: var(--brand-bright, #4A95E8) !important;
}
/* Map pin icon → ember accent */
#qikify-tmenu-megamenu-0 .tmenu_item_icon svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--xgrid-accent, #C75D2A) !important;
}
/* Down chevron — small, ink-3, rotates when expanded */
#qikify-tmenu-megamenu-0 .tmenu_indicator_icon svg {
  width: 10px !important;
  height: 10px !important;
  color: var(--ink-3) !important;
  transition: transform 180ms cubic-bezier(0.4, 1.2, 0.6, 1), color 140ms ease;
}
#qikify-tmenu-megamenu-0 .tmenu_item_link[aria-expanded="true"] .tmenu_indicator_icon svg {
  transform: rotate(180deg);
  color: var(--xgrid-accent, #C75D2A) !important;
}

/* Hide the disabled duplicate Shop Online (Qikify default but reinforce) */
#qikify-tmenu-megamenu-0 > li.tmenu_disabled {
  display: none !important;
}

/* ---------- The mega-panel ---------- */
.tmenu_submenu_type_mega {
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 12px !important;
  padding: 32px 40px 36px !important;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16) !important;
  margin-top: 8px !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  /* Qikify sets inline `width: 1440px !important`. max-width is a separate
     property — it constrains the inline width even at !important parity. */
  max-width: calc(100vw - 60px) !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px 48px !important;
}

/* Watermark "Created with Smart Menu" — hide. Qikify forces inline
   `style="display: flex !important; opacity: 1 !important; font-size: 12px
   !important; ..."` on this element to block CSS removal. We can't beat
   their inline !important on display/opacity/font-size at author parity,
   but we CAN use clip-path + position (which aren't in their inline list)
   to remove it visually + spatially. */
.tmenu-watermark,
.tmenu_submenu_has_watermark .tmenu-watermark,
div.tmenu-watermark {
  clip-path: inset(100%) !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Each top-level column inside the mega panel */
ul.tmenu_submenu_type_mega > li.tmenu_item_level_1,
ul.tmenu_submenu_type_mega > li.tmenu_item_display_header {
  list-style: none !important;
  flex: 1 1 180px !important;
  min-width: 160px !important;
  max-width: 240px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Column heading link (e.g. "Trailer Upgrades", "RV Accessories").
   Specificity bumped with element types (ul/li/a) to beat Qikify's own
   rule `li:not(.tmenu_item_mobile) .tmenu_submenu .tmenu_item_link`
   which is (0,3,1) and was beating my (0,3,0) at !important parity. */
ul.tmenu_submenu_type_mega > li.tmenu_item_level_1 > a.tmenu_item_link,
ul.tmenu_submenu_type_mega > li.tmenu_item_display_header > a.tmenu_item_link {
  display: block !important;
  padding: 0 0 12px !important;
  margin: 0 0 12px !important;
  color: var(--brand-bright, #4A95E8) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--rule, #2D2E31) !important;
  cursor: pointer !important;
  transition: color 140ms ease, border-color 140ms ease;
}
ul.tmenu_submenu_type_mega > li.tmenu_item_level_1 > a.tmenu_item_link:not([tmenu-disabled-link]):hover,
ul.tmenu_submenu_type_mega > li.tmenu_item_display_header > a.tmenu_item_link:not([tmenu-disabled-link]):hover {
  color: var(--xgrid-accent, #C75D2A) !important;
  border-bottom-color: var(--xgrid-accent, #C75D2A) !important;
}
ul.tmenu_submenu_type_mega > li.tmenu_item_level_1 > a.tmenu_item_link > span.tmenu_item_text,
ul.tmenu_submenu_type_mega > li.tmenu_item_display_header > a.tmenu_item_link > span.tmenu_item_text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

/* Submenu list inside each column */
.tmenu_submenu_type_mega .tmenu_submenu_type_automatic {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: static !important; /* don't float as nested submenu */
  width: auto !important;
  min-width: 0 !important;
}

/* Subcategory list item */
.tmenu_submenu_type_mega .tmenu_item_level_2 {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Subcategory link. Same specificity bump as headings — Qikify's
   li:not(.tmenu_item_mobile) .tmenu_submenu .tmenu_item_link rule
   (0,3,1) was applying black text from the user's admin settings. */
ul.tmenu_submenu_type_mega li.tmenu_item_level_2 > a.tmenu_item_link {
  display: block !important;
  padding: 6px 8px !important;
  margin: 0 -8px !important;
  color: color-mix(in srgb, var(--ink) 85%, transparent) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: color 140ms cubic-bezier(0.4, 0, 0.2, 1), background-color 140ms ease, transform 200ms cubic-bezier(0.4, 1.2, 0.6, 1);
  text-transform: none !important;
  letter-spacing: 0 !important;
}
ul.tmenu_submenu_type_mega li.tmenu_item_level_2 > a.tmenu_item_link:not([tmenu-disabled-link]):hover {
  color: var(--brand-bright, #4A95E8) !important;
  background: color-mix(in srgb, var(--xgrid-blue) 8%, transparent) !important;
  transform: translateX(2px);
}
ul.tmenu_submenu_type_mega li.tmenu_item_level_2 > a.tmenu_item_link > span.tmenu_item_text {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

/* The little "SHOP ONLINE" badge tooltip that Qikify renders next to the
   active item — hide it (looked like a debug indicator in image #21) */
.tmenu_item_tooltip,
[class*="tmenu_tooltip"] {
  display: none !important;
}

/* ==========================================================================
   TWILIGHT — Air Reviews (Avada Boost) PDP block
   ==========================================================================
   The Reviews block ships with three white inline-styled cards (Rate, List,
   Actions) and blue star colors that clash with the dark Twilight theme.
   Live DOM:
     .AirReviews-Blocks (root)
       .AirReviews-Blocks__Summary.desktop
         .AirReviews-Card.AirReviews-Blocks__SummaryInner (transparent)
           h2.AirReviews-Blocks--Title  ("Reviews")
           .AirReviews-Blocks__SummaryWrapper
             .AirReviews-Blocks__SummaryLeft
               .AirReviews-Blocks--Information
                 .AirReviews-Blocks--Rate    style="bg: white" — the 0.0 card
                   .AirReviews-Blocks--RateCount  (the "0.0" number)
             .AirReviews-Blocks__SummaryRight
               .AirReviews-Blocks--List      style="bg: white" — bars card
                 .AirReviews-Blocks-Process > .AirReviews-Blocks-ProcessBar
       .AirReviews-Blocks--Actions  style="bg: white" — "Click to review" card
         .AirReviews-Blocks__ActionRate (radio star fieldset)
   ========================================================================== */

/* All three "card" surfaces — override inline white bg */
.AirReviews-Blocks .AirReviews-Blocks--Rate,
.AirReviews-Blocks .AirReviews-Blocks--List,
.AirReviews-Blocks .AirReviews-Blocks--Actions {
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  color: var(--ink, #F5F7FA) !important;
}

/* "Reviews" heading */
.AirReviews-Blocks .AirReviews-Blocks--Title,
.AirReviews-Blocks h2.AirReviews-Blocks--Title.AirReviews-Text--headingLg {
  font-family: var(--font-heading-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ink, #F5F7FA) !important;
  margin: 0 0 20px !important;
  letter-spacing: -0.01em !important;
}

/* Big "0.0" rating number */
.AirReviews-Blocks .AirReviews-Blocks--RateCount,
.AirReviews-Blocks .AirReviews-Text--heading8xl {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  color: var(--ink, #F5F7FA) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
}

/* "X reviews" label and other secondary text */
.AirReviews-Blocks .AirReviews-Text--bodyMd,
.AirReviews-Blocks .AirReviews-Text--bodySm,
.AirReviews-Blocks .AirReviews-Blocks__SummaryRight--Container {
  color: var(--ink-2, rgba(245, 247, 250, 0.78)) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
}

/* Stars — ember accent (rating = warmth), filled stars use accent fill */
.AirReviews-Blocks .AirReviews-StarRate--Positive svg,
.AirReviews-Blocks .Avada_Star-Icon:not(.Avada_Star-Icon--empty) svg {
  fill: var(--xgrid-accent, #C75D2A) !important;
  color: var(--xgrid-accent, #C75D2A) !important;
}
.AirReviews-Blocks .AirReviews-StarRate--Positive svg path,
.AirReviews-Blocks .Avada_Star-Icon:not(.Avada_Star-Icon--empty) svg path {
  fill: var(--xgrid-accent, #C75D2A) !important;
}
/* Empty stars — rule-bordered outline */
.AirReviews-Blocks .Avada_Star-Icon--empty svg path,
.AirReviews-Blocks .AirReviews-StarRate--Negative svg path {
  fill: color-mix(in srgb, var(--ink) 50%, transparent) !important;
}

/* Process bar (the 5★/4★/3★ histogram bars) */
.AirReviews-Blocks .AirReviews-Blocks-Process {
  background: var(--surface-4, #E6E9EE) !important;
  height: 6px !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.AirReviews-Blocks .AirReviews-Blocks-ProcessBar {
  background: var(--xgrid-accent, #C75D2A) !important;
  height: 100% !important;
  border-radius: 3px !important;
}

/* List rows ("5★ ... 0") */
.AirReviews-Blocks .AirReviews-Blocks--List > * {
  color: var(--ink-2, rgba(245, 247, 250, 0.78)) !important;
}
.AirReviews-Blocks .AirReviews-Blocks--List {
  list-style: none !important;
}

/* "Click to review" prompt */
.AirReviews-Blocks .AirReviews-Blocks--Actions__Text {
  color: var(--ink, #F5F7FA) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}

/* Rating-input stars (the 5 outline stars under "Click to review") —
   stroke ember instead of blue. Inline style on each <svg>:
   style="stroke: rgb(37, 120, 180); transform: scale(1);" — can't beat
   inline. So target via attribute selector + override stroke-color
   via background trick: use [style*="stroke"] then mark-up via filter. */
.AirReviews-Blocks .AirReviews-StarRadio__Label svg {
  /* This won't beat inline style="stroke: rgb(37, 120, 180)" alone, but
     we can use filter hue-rotate to shift blue → ember as a fallback. */
  filter: hue-rotate(160deg) saturate(1.4) brightness(1.05);
}
.AirReviews-Blocks .AirReviews-StarRadio__Label:hover svg {
  filter: hue-rotate(160deg) saturate(1.8) brightness(1.15);
}

/* "0 reviews" right side label container */
.AirReviews-Blocks .AirReviews-Blocks__SummaryRight {
  border-left: 1px solid var(--rule, #2D2E31) !important;
  padding-left: 24px !important;
  margin-left: 24px !important;
}

/* ==========================================================================
   TWILIGHT — PDP Tabs (sections/pdp-tabs.liquid)
   ==========================================================================
   Animated underline tab nav per prototype-pdp.html .pdp-tabs-wrap +
   tokens.css PRIMITIVE 15 (TabNav). Custom selectors (.twilight-tabs)
   avoid collision with Dawn's own .tabs class.
   ========================================================================== */

.pdp-tabs-wrap {
  padding: 48px 0;
  border-top: 1px solid var(--rule, #2D2E31);
  background: var(--surface-base, #0E0F11);
}
.pdp-tabs-wrap .page-width {
  max-width: 1238px;
  margin: 0 auto;
  padding: 0 24px;
}

.twilight-tabs {
  display: flex;
  gap: 0;
  align-items: center;
  border-bottom: 1px solid var(--rule, #2D2E31);
  position: relative;
  overflow-x: auto;
}
.twilight-tabs::-webkit-scrollbar { display: none; }

.twilight-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.twilight-tabs__tab:hover {
  color: color-mix(in srgb, var(--ink) 85%, transparent);
}
.twilight-tabs__tab[aria-selected="true"] {
  color: var(--ink, #F5F7FA);
}
.twilight-tabs__tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand-bright, #4A95E8);
  border-radius: 4px;
}

.twilight-tabs__indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--xgrid-accent, #C75D2A);
  transition:
    left 240ms cubic-bezier(0.4, 1.2, 0.6, 1),
    width 240ms cubic-bezier(0.4, 1.2, 0.6, 1);
  pointer-events: none;
}

.twilight-tabs__panels {
  margin-top: 0;
}
.twilight-tabs__panel {
  padding: 48px 0 0;
  animation: twilightTabFade 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.twilight-tabs__panel[hidden] {
  display: none;
}
@keyframes twilightTabFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* RTE (rich text editor) content inside tab panels — product.description
   and metafield HTML. Wire to design-system body type. */
.twilight-tabs__content.rte {
  color: color-mix(in srgb, var(--ink) 85%, transparent);
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  max-width: 720px;
}
.twilight-tabs__content.rte h1,
.twilight-tabs__content.rte h2,
.twilight-tabs__content.rte h3,
.twilight-tabs__content.rte h4 {
  color: var(--ink, #F5F7FA);
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
}
.twilight-tabs__content.rte h2 { font-size: 22px; }
.twilight-tabs__content.rte h3 { font-size: 18px; }
.twilight-tabs__content.rte h4 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-bright, #4A95E8); }
.twilight-tabs__content.rte h1:first-child,
.twilight-tabs__content.rte h2:first-child,
.twilight-tabs__content.rte h3:first-child { margin-top: 0; }
.twilight-tabs__content.rte p { margin: 0 0 16px; }
.twilight-tabs__content.rte a {
  color: var(--brand-bright, #4A95E8);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--xgrid-blue) 40%, transparent);
  transition: text-decoration-color 140ms ease, color 140ms ease;
}
.twilight-tabs__content.rte a:hover {
  color: var(--xgrid-accent, #C75D2A);
  text-decoration-color: var(--xgrid-accent, #C75D2A);
}
.twilight-tabs__content.rte ul,
.twilight-tabs__content.rte ol {
  margin: 0 0 16px;
  padding-left: 24px;
  color: color-mix(in srgb, var(--ink) 85%, transparent);
}
.twilight-tabs__content.rte li { margin-bottom: 6px; }
.twilight-tabs__content.rte strong { color: var(--ink, #F5F7FA); font-weight: 600; }
.twilight-tabs__content.rte hr {
  border: none;
  border-top: 1px solid var(--rule, #2D2E31);
  margin: 32px 0;
}
.twilight-tabs__content.rte img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--rule, #2D2E31);
}
.twilight-tabs__content.rte table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 24px;
}
.twilight-tabs__content.rte th,
.twilight-tabs__content.rte td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule, #2D2E31);
}
.twilight-tabs__content.rte th {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.twilight-tabs__content.rte td {
  color: var(--ink, #F5F7FA);
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TWILIGHT — PDP Hero Backdrop + Info Column Polish
   ==========================================================================
   Per prototype-pdp.html .pdp-hero::before: subtle dual-orb radial backdrop
   over the entire main-product section. Below it: dark surface card around
   the price/quantity/buy block, polished quantity stepper, secondary buttons
   row, KV spec sheet.
   ========================================================================== */

/* Background orb on the PDP hero. Dawn 15 doesn't put template-product on
   <body>; scoping via :has(.product__info-container) is product-page-
   specific on its own.
   Note: overflow:hidden was needed for the orb backdrop but interferes
   with sticky positioning — using clip-path inset(0) instead which
   clips the orb without containing scroll. */
.shopify-section:has(.product__info-container) {
  position: relative;
  isolation: isolate;
  clip-path: inset(0);
}
.shopify-section:has(.product__info-container)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 20% 18%, color-mix(in srgb, var(--xgrid-blue) 16%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 82% 75%, color-mix(in srgb, var(--xgrid-accent) 10%, transparent) 0%, transparent 55%);
}
/* Lift content above the orb */
.shopify-section:has(.product__info-container) > * {
  position: relative;
  z-index: 1;
}

/* ---------- Sticky image gallery (image stays in view as info scrolls) ----------
   Dawn defaults: media-wrapper takes 55% of the .product flex container
   AND info-container is sticky. Per design system + user feedback:
     - image column = max 40% (info gets the larger area for content)
     - image gallery is sticky (not info), positioned just below the header
     - gallery clamped to viewport height so the thumbnail row is always
       visible without scrolling — image scales down to fit
*/
.product__info-wrapper .product__info-container.product__column-sticky {
  position: static !important;
  top: auto !important;
}
@media screen and (min-width: 990px) {
  .product__media-wrapper {
    max-width: 40% !important;       /* Dawn defaults to 55% */
    flex: 0 0 40% !important;
    width: 40% !important;
    position: sticky !important;
    top: 90px !important;             /* clear the sticky header */
    align-self: flex-start !important;
    /* Total height budget: viewport − sticky header − bottom buffer.
       Gallery internals (main image + thumb rail) MUST fit within this. */
    max-height: calc(100vh - 110px);
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }
  /* Main image takes most of the budget; thumb rail gets a fixed 80px */
  .product__media-wrapper .product__media-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;       /* allow image to shrink in flex parent */
    max-height: calc(100vh - 210px); /* leave 100px for thumb rail + gaps */
  }
  /* Main image element inside the list — preserve aspect ratio via contain */
  .product__media-wrapper .product__media-list .product__media-item,
  .product__media-wrapper .product__media-list .product__media {
    height: 100% !important;
  }
  /* Thumb rail — fixed dimensions so each thumb is a visible square,
     not the 6px list-item bullet that max-* alone allows. */
  .product__media-wrapper slider-component.thumbnail-slider,
  .product__media-wrapper .thumbnail-slider {
    flex: 0 0 80px !important;
    height: 80px !important;
    max-height: 80px !important;
    overflow: visible !important;
  }
  .product__media-wrapper .thumbnail-list {
    flex: 1 1 auto !important;
    max-height: 80px !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }
  .product__media-wrapper .thumbnail-list__item {
    flex: 0 0 80px !important;
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    min-width: 80px !important;
  }
  /* Allow the .product flex to align media-wrapper to top so info column
     can use its full vertical space without being pulled to media height */
  .product {
    align-items: flex-start !important;
  }
}

/* Override Dawn's max-width: 45% on the info column — we want info to
   take ~60% (full remaining after 40% media) so paragraphs wrap to the
   true available width, not to ~half. */
@media screen and (min-width: 990px) {
  .product__info-wrapper {
    max-width: 60% !important;
    flex: 1 1 auto !important;
    width: auto !important;
  }
  /* Dawn caps .product__info-container at max-width: 600px to keep
     reading line-length comfortable. We want all in-column components
     (description, buy card, specs grid, verified row) to use the full
     wrapper width — uncap the container AND remove our earlier explicit
     540px caps on the custom blocks. */
  .product__info-container {
    max-width: 100% !important;
    width: 100% !important;
  }
  .product__description,
  .twilight-buy-card,
  .twilight-specs,
  .twilight-verified,
  .twilight-pdp-vendor,
  .twilight-pdp-badges,
  .product__title {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* ---------- Info column container ----------
   .product__info-container holds title → reviews → price → desc → form.
   Give it consistent padding + max-width per design system. */
.product__info-container {
  padding-top: 8px !important;
}

/* Title: bigger, tighter — display-md feel per design system */
.product__title h1,
.product__title {
  font-family: var(--font-heading-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 44px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink, #F5F7FA) !important;
  margin: 0 0 16px !important;
}
@media (max-width: 749px) {
  .product__title h1, .product__title { font-size: 32px !important; }
}

/* Description short summary text — body-lg per design system */
.product__description {
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
  margin: 0 0 24px !important;
  max-width: 540px;
}

/* ---------- Buy card: dark surface frame around the price/qty/CTA block ----------
   We don't have a wrapper div around these — they're sibling blocks. Twilight
   JS (in twilight-globo-enhance.js) injects a .twilight-buy-card wrapper
   around price → bread-pay → quantity → buy buttons. CSS below assumes that
   wrapper exists; without it, blocks just render unframed (safe fallback). */
.twilight-buy-card {
  position: relative;
  background: var(--surface-1, #161719);
  border: 1px solid var(--rule, #2D2E31);
  border-radius: 12px;
  padding: 28px 28px 24px;
  margin: 24px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Price block inside the buy card.
   Dawn structure (on sale):
     .price.price--on-sale
       .price__container
         .price__regular > .price-item--regular           (hidden when on sale)
         .price__sale
           <s> > .price-item--regular  = compare-at $X    (small muted strike)
           .price-item--sale.price-item--last = sale $Y   (big ember)
       .badge.price__badge-sale                            (small "Sale" pill)
*/
.twilight-buy-card .price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 12px !important;
}
.twilight-buy-card .price__container {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
/* Gate on .price--on-sale — Dawn hides .price__sale by default
   (component-price.css:57) and it contains a second copy of the price;
   force-showing it unconditionally duplicated the price on every PDP. */
.twilight-buy-card .price--on-sale .price__sale {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}
/* Regular price (when not on sale) — big white mono */
.twilight-buy-card .price__regular .price-item--regular {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  color: var(--ink, #F5F7FA) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
/* Compare-at price (wrapped in <s>) — small + muted + strikethrough */
.twilight-buy-card .price__sale s,
.twilight-buy-card .price__sale s .price-item--regular {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--ink-3) !important;
  text-decoration: line-through !important;
  font-variant-numeric: tabular-nums !important;
}
/* Actual sale price — big WHITE mono (per design system; ember is reserved
   for the small SALE badge + accents, not the main price number). */
.twilight-buy-card .price-item--sale,
.twilight-buy-card .price-item.price-item--last {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  color: var(--ink, #F5F7FA) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
/* Hide regular price div when on sale (it duplicates the sale price) */
.twilight-buy-card .price--on-sale .price__regular {
  display: none !important;
}
/* "Sale" pill badge — small inline, not full-width. Same gate: Dawn only
   shows this badge under .price--on-sale (component-price.css:67). */
.twilight-buy-card .price--on-sale .badge.price__badge-sale,
.twilight-buy-card .price--on-sale .price__badge-sale {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  background: color-mix(in srgb, var(--xgrid-accent) 12%, transparent) !important;
  color: var(--xgrid-accent-bright, #E37545) !important;
  border: 1px solid color-mix(in srgb, var(--xgrid-accent) 40%, transparent) !important;
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}
.twilight-buy-card .badge.price__badge-sold-out,
.twilight-buy-card .price__badge-sold-out {
  display: none !important;  /* only show on actually sold-out products */
}
.twilight-buy-card .price--sold-out .badge.price__badge-sold-out,
.twilight-buy-card .price--sold-out .price__badge-sold-out {
  display: inline-flex !important;
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  color: var(--ink-3) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
}

/* Rule divider between price and quantity */
.twilight-buy-card .product-form,
.twilight-buy-card .product-form__input--quantity {
  padding-top: 20px !important;
  border-top: 1px solid var(--rule, #2D2E31) !important;
  margin-top: 0 !important;
}

/* ---------- Quantity stepper polish ----------
   Dawn's element is .product-form__input.product-form__quantity (single
   hyphen, not BEM-like double). Inside it: <label class="quantity__label">
   then a custom <quantity-input> element wrapping the .quantity stepper.
   Design system: muted "Quantity:" label INLINE-LEFT of horizontal
   segmented stepper [−][1][+] — all on one row. */
.twilight-buy-card .product-form__quantity,
.twilight-buy-card .product-form__input--quantity {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  border: none !important;
  padding: 20px 0 0 !important;
}
.twilight-buy-card .product-form__quantity > label,
.twilight-buy-card .product-form__quantity .quantity__label,
.twilight-buy-card .product-form__input--quantity > label,
.twilight-buy-card .product-form__input--quantity .quantity__label,
.twilight-buy-card .product-form__input legend.form__label {
  color: var(--ink-3) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* Add trailing colon to the label text if absent */
.twilight-buy-card .product-form__quantity > label::after,
.twilight-buy-card .product-form__input--quantity > label::after,
.twilight-buy-card .product-form__input legend.form__label::after {
  content: ":";
  margin-left: 1px;
}

.quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--surface-2, #232426) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  height: 36px !important;
  min-height: 36px !important;
  width: auto !important;
}
.quantity__button {
  background: transparent !important;
  border: none !important;
  color: var(--ink-2, rgba(245, 247, 250, 0.78)) !important;
  width: 36px !important;
  height: 100% !important;
  cursor: pointer !important;
  transition: background-color 140ms ease, color 140ms ease;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.quantity__button:hover {
  background: var(--surface-3, #2F3033) !important;
  color: var(--ink, #F5F7FA) !important;
}
.quantity__button svg {
  width: 14px !important;
  height: 14px !important;
}
.quantity__input {
  background: transparent !important;
  border: none !important;
  color: var(--ink, #F5F7FA) !important;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
  width: 48px !important;
  height: 100% !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.quantity__input:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--brand-bright, #4A95E8) !important;
}

/* ---------- Buy buttons row ----------
   The big "Add to cart" should show the price after a — dash per design
   system ("Add to cart — $189.00"). Pure-CSS injection isn't reliable
   since Dawn's button text is "Add to cart" only — that part needs JS
   to append the price. CSS just ensures ember + full-width + big. */
.product-form__buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}
.product-form__submit,
.product-form__buttons button.button--primary,
.product-form__buttons button[name="add"] {
  background: var(--xgrid-accent, #C75D2A) !important;
  color: #fff !important;
  border: 1px solid var(--xgrid-accent, #C75D2A) !important;
  border-radius: 8px !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  height: 52px !important;
  padding: 0 24px !important;
  width: 100% !important;
  transition:
    background-color 140ms ease,
    transform 200ms cubic-bezier(0.4, 1.2, 0.6, 1),
    box-shadow 200ms ease;
}
.product-form__submit:hover,
.product-form__buttons button.button--primary:hover,
.product-form__buttons button[name="add"]:hover {
  background: var(--xgrid-accent-bright, #E37545) !important;
  border-color: var(--xgrid-accent-bright, #E37545) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--xgrid-accent) 36%, transparent) !important;
}

/* "More payment options" link */
.shopify-payment-button__more-options {
  color: var(--ink-3) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ---------- Verified-by pill row (.twilight-verified) ----------
   JS-injected wrapper above the buy card. Each pill = .twilight-verified__pill */
.twilight-verified {
  background: var(--surface-1, #161719);
  border: 1px solid var(--rule, #2D2E31);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.twilight-verified__label {
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-right: 4px;
}
.twilight-verified__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  background: var(--surface-2, #232426);
  border: 1px solid var(--rule, #2D2E31);
  color: var(--ink-3);
}
.twilight-verified__pill svg { width: 11px; height: 11px; }
.twilight-verified__pill--field {
  color: var(--xgrid-accent-bright, #A34518);
  background: color-mix(in srgb, var(--xgrid-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--xgrid-accent) 40%, transparent);
}
.twilight-verified__pill--curator {
  color: var(--brand-bright, #4A95E8);
  background: color-mix(in srgb, var(--xgrid-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--xgrid-blue) 40%, transparent);
}
.twilight-verified__pill--customer,
.twilight-verified__pill--reviews {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
}

/* ---------- Spec sheet KV grid (.twilight-specs) ----------
   JS-injected below buy card. Each row = .twilight-specs__row in a 2-col grid. */
.twilight-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 24px 0;
}
@media (max-width: 540px) {
  .twilight-specs { grid-template-columns: 1fr; }
}
.twilight-specs__row {
  background: var(--surface-1, #161719);
  border: 1px solid var(--rule, #2D2E31);
  border-radius: 8px;
  padding: 16px;
}
.twilight-specs__key {
  display: block;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
}
.twilight-specs__val {
  display: block;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink, #F5F7FA);
  font-variant-numeric: tabular-nums;
}

/* ---------- Vendor + badges row above title (prototype: pdp-info > .vendor + .badges) ---------- */
.twilight-pdp-vendor {
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--xgrid-accent-bright, #E37545);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 12px;
  line-height: 1;
}

.twilight-pdp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
  align-items: center;
}
/* Inline variant of .twilight-status: same visual style but in-flow,
   not absolute-positioned. Used in PDP badges row. */
.twilight-pdp-badges .twilight-status,
.twilight-status--inline {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
}
.twilight-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 85%, transparent);
  background: var(--surface-2, #232426);
  border: 1px solid var(--rule, #2D2E31);
  border-radius: 6px;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.twilight-category-badge:hover {
  color: var(--ink, #F5F7FA);
  background: var(--surface-3, #2F3033);
  border-color: var(--rule-strong);
}

/* ---------- Buy card: price-row layout (price left + ship info right) ---------- */
.twilight-price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.twilight-price-row .price {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
.twilight-ship {
  text-align: right;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
  white-space: nowrap;
  margin-top: 6px;
}
.twilight-ship strong {
  color: var(--success);
  font-weight: 600;
  display: block;
  margin-top: 2px;
}

/* ---------- Secondary actions row inside buy card (Save / Compare / Share) ---------- */
.twilight-secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.twilight-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--rule, #2D2E31);
  border-radius: 8px;
  color: var(--ink, #F5F7FA);
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.twilight-secondary-btn:hover {
  border-color: var(--brand-bright, #4A95E8);
  background: color-mix(in srgb, var(--xgrid-blue) 6%, transparent);
  color: var(--brand-bright, #4A95E8);
}
.twilight-secondary-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-base, #0E0F11), 0 0 0 4px var(--brand-bright, #4A95E8);
}

/* ==========================================================================
   TWILIGHT — Unified button system (site-wide)
   ==========================================================================
   Ports design-system PRIMITIVE 7 (Button) onto Dawn's .button class. Dawn
   uses a clever (but on-our-theme broken) trick: every .button gets a
   ::after pseudo with `box-shadow: 0 0 0 1px var(--shadow-horizontal-offset)`
   to DRAW the visible border. On the dark Twilight theme that resolves to a
   white ring, which is what's showing up as "white border on View cart" in
   the cart drawer.

   This block:
     1. Kills the ::before / ::after pseudo borders on every .button
     2. Sets a real `border: 1px solid` instead, with consistent 8px radius
     3. Maps the three Dawn variants to design-system roles:
          .button--primary   → .btn--accent  (ember CTA, commerce)
          .button--secondary → .btn--secondary (outline)
          .button--tertiary  → .btn--ghost (text only)
     4. Locks down Shopify Payment Button (Buy with Shop is sacred but the
        "More payment options" variant gets aligned)
   ========================================================================== */

/* Reset Dawn's pseudo-element button borders/shadows */
.button::before,
.button::after,
button.button::before,
button.button::after,
a.button::before,
a.button::after {
  display: none !important;
  content: none !important;
}

/* Base button — applied to all .button instances */
.button,
button.button,
a.button,
.cart__checkout-button,
.product-form__submit,
button[name="checkout"],
button[name="add"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent;
  color: var(--ink, #F5F7FA);
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    color 140ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.button:focus-visible,
button.button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--surface-base, #0E0F11), 0 0 0 4px var(--brand-bright, #4A95E8) !important;
}

/* Primary CTA — ember (Add to cart, Checkout, Subscribe, etc.).
   .product-form__submit MUST appear with high specificity here because
   Dawn ships it with class="button button--secondary" by default — so
   the generic .button--secondary rule below would otherwise win. Use
   button.product-form__submit (element + class = 0,1,1) AND chained
   .button.button--secondary.product-form__submit (0,3,0) selectors. */
.button.button--primary,
button.button.button--primary,
a.button.button--primary,
.cart__checkout-button,
button[name="checkout"],
button[name="add"],
button.product-form__submit,
button.product-form__submit.button--secondary,
.button.button--secondary.product-form__submit,
.button.button--full-width.product-form__submit {
  background: var(--xgrid-accent, #C75D2A) !important;
  border-color: var(--xgrid-accent, #C75D2A) !important;
  color: #ffffff !important;
}
.button.button--primary:hover,
button.button.button--primary:hover,
a.button.button--primary:hover,
.cart__checkout-button:hover,
button[name="checkout"]:hover,
button[name="add"]:hover,
button.product-form__submit:hover,
button.product-form__submit.button--secondary:hover,
.button.button--secondary.product-form__submit:hover,
.button.button--full-width.product-form__submit:hover {
  background: var(--xgrid-accent-bright, #E37545) !important;
  border-color: var(--xgrid-accent-bright, #E37545) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--xgrid-accent) 36%, transparent) !important;
}
.button.button--primary:active,
button.button.button--primary:active {
  background: var(--xgrid-accent-deep) !important;            /* accent-deep */
  border-color: var(--xgrid-accent-deep) !important;
  transform: translateY(0);
}

/* Secondary — outline, rule-strong border (NEVER white) */
.button.button--secondary,
button.button.button--secondary,
a.button.button--secondary {
  background: transparent !important;
  border-color: var(--rule-strong) !important;          /* rule-strong */
  color: var(--ink, #F5F7FA) !important;
}
.button.button--secondary:hover,
button.button.button--secondary:hover,
a.button.button--secondary:hover {
  background: var(--surface-2, #232426) !important;
  border-color: var(--brand-bright, #4A95E8) !important;
  color: var(--brand-bright, #4A95E8) !important;
  transform: translateY(-1px);
}

/* Tertiary / link-style buttons */
.button.button--tertiary,
button.button.button--tertiary,
a.button.button--tertiary,
.link.button-label {
  background: transparent !important;
  border-color: transparent !important;
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  padding: 8px 12px !important;
}
.button.button--tertiary:hover,
button.button.button--tertiary:hover,
a.button.button--tertiary:hover,
.link.button-label:hover {
  color: var(--ink, #F5F7FA) !important;
  text-decoration: underline !important;
}

/* Full-width modifier — preserve full-width behavior */
.button--full-width {
  width: 100% !important;
}

/* Cart drawer specific — same patterns as above (defensive) */
.cart-drawer .button--primary,
.cart-notification .button--primary {
  background: var(--xgrid-accent, #C75D2A) !important;
  border-color: var(--xgrid-accent, #C75D2A) !important;
  color: #ffffff !important;
}
.cart-drawer .button--secondary,
.cart-notification .button--secondary {
  background: transparent !important;
  border-color: var(--rule-strong) !important;
  color: var(--ink, #F5F7FA) !important;
}

/* Tiny utility buttons (cart remove, etc.) that use Dawn's icon-button class
   should NOT get the full button treatment — they're icon-only round controls */
.cart-remove-button button,
button.cart-remove-button,
.cart__remove,
.menu-drawer__close-button,
.modal__close-button,
.drawer__close,
button.icon-with-text {
  min-height: 0 !important;
  height: auto !important;
  padding: 6px !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink-2, rgba(245, 247, 250, 0.78)) !important;
}
.cart-remove-button button:hover,
.cart__remove:hover {
  color: var(--xgrid-accent, #C75D2A) !important;
  background: transparent !important;
}

/* Footer Subscribe button — ember primary */
.newsletter-form__button,
.footer-block__newsletter button[type="submit"] {
  background: var(--xgrid-accent, #C75D2A) !important;
  border: 1px solid var(--xgrid-accent, #C75D2A) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}
.newsletter-form__button:hover,
.footer-block__newsletter button[type="submit"]:hover {
  background: var(--xgrid-accent-bright, #E37545) !important;
  border-color: var(--xgrid-accent-bright, #E37545) !important;
}

/* Predictive search "View all" button — secondary outline */
.predictive-search__list-item button {
  border-radius: 6px !important;
}

/* Top "info bar" search button — match the form wrapper's 6px radius
   so the button's right corners curve at the same rate as the form
   border. Was 8px which sat outside the 6px wrapper border visually. */
.info-bar-search-form__button {
  border-radius: 0 6px 6px 0 !important;
}

/* Twilight secondary buttons (Save/Compare/Share) — align with .button--secondary */
.twilight-secondary-btn {
  border-radius: 8px !important;
  border: 1px solid var(--rule-strong) !important;       /* rule-strong */
  background: transparent !important;
  color: var(--ink, #F5F7FA) !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  min-height: 44px !important;
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.twilight-secondary-btn:hover {
  background: var(--surface-2, #232426) !important;
  border-color: var(--brand-bright, #4A95E8) !important;
  color: var(--brand-bright, #4A95E8) !important;
}

/* ==========================================================================
   TWILIGHT — Authoritative Dawn product card (.card.card--standard)
   ==========================================================================
   Source-level styling for every Dawn-rendered product card — Featured
   Collection, Product Types tabs, Related Products, Search facets, any
   future grid/carousel section. This is the same visual treatment we
   ship on Globo's .spf-product-card cards, applied to Dawn's structure
   so the look is consistent across every product context.

   Dawn DOM:
     .card-wrapper.product-card-wrapper
       .card.card--standard.card--media
         .card__inner.color-scheme-N.gradient.ratio  (frame)
           .card__media > .media > img               (image)
           .card__content
             .card__information > h3.card__heading > a
             .card__badge.bottom.left
               .badge.twilight-badge--in-stock
                 .twilight-dot
       .card__content  (DUPLICATE — text below media)
         .card__information
           h3.card__heading.h5 > a                   (title)
           .card-information
             .caption-with-letter-spacing.light      (vendor)
             .price + .price__container + ...        (price)
   ========================================================================== */

/* Card frame — colors/borders only. Don't touch display model: Dawn uses
   .card__inner with .ratio class (padding-bottom: --ratio-percent) to
   create the aspect-ratio image area. Setting display:flex on the
   wrapper breaks that percent-based expansion. */
.card-wrapper.product-card-wrapper,
.product-card-wrapper {
  position: relative;
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition:
    transform 240ms cubic-bezier(0.4, 1.2, 0.6, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.card-wrapper.product-card-wrapper:hover,
.product-card-wrapper:hover {
  transform: translateY(-3px);
  border-color: var(--brand-bright, #4A95E8) !important;
  box-shadow:
    0 16px 40px rgba(16, 24, 40, 0.14),
    0 0 0 1px color-mix(in srgb, var(--xgrid-blue) 40%, transparent),
    0 0 24px color-mix(in srgb, var(--xgrid-blue) 12%, transparent) !important;
}

/* Inner card — colors only, NO display:flex. Dawn defaults .card to
   display:flex, but that breaks .card__inner's .ratio padding-bottom
   percent trick (flex children compute % against their flex basis,
   not their width). Force display:block so .ratio works. */
.product-card-wrapper .card.card--standard,
.product-card-wrapper .card--standard {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
.product-card-wrapper .card__inner {
  background: var(--surface-2, #232426) !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: block !important;
  /* 4:5 portrait per design system. The actual image area height needs
     to come solely from padding-bottom: 125% — but Dawn renders an
     inner .card__content (badge overlay) as a NORMAL-FLOW child of
     .card__inner, which adds ~54px of height ON TOP of the padding
     and pushes the badge down. We fix that below by absolute-
     positioning the inner overlay. */
  --ratio-percent: 125% !important;
  padding-bottom: 125% !important;
}

/* Inner overlay (.card__content INSIDE .card__inner — Dawn renders
   the duplicate title + badge here). Absolute-position it so it
   doesn't add height to .card__inner. */
.product-card-wrapper .card__inner > .card__content {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  pointer-events: none;
  z-index: 2;
  background: transparent !important;
}
.product-card-wrapper .card__inner > .card__content > * {
  pointer-events: auto;
}
/* Hide the duplicate heading Dawn renders in the inner overlay */
.product-card-wrapper .card__inner > .card__content > .card__information {
  display: none !important;
}
/* Orb gradient over the media area */
.product-card-wrapper .card__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--xgrid-blue) 12%, transparent) 0%, transparent 60%);
}
.product-card-wrapper .card__inner > * { position: relative; z-index: 1; }

/* Media area — fill the .card__inner's .ratio aspect box.
   With the inner using padding-bottom: --ratio-percent to create the
   aspect area, the child .card__media + .media need position:absolute
   inset:0 to fill the resulting box (Dawn normally sets these but our
   .card__inner overrides knock some out). */
.product-card-wrapper .card__media {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  margin: 0 !important;
}
.product-card-wrapper .card__media .media {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.product-card-wrapper .card__media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 12px !important;            /* literal — matches Globo image inset
                                           exactly. % values made larger cards
                                           too inset; pixel value is consistent
                                           regardless of card width. */
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Status badge — TOP-LEFT per design system (Dawn defaults to bottom.left).
   Override the position regardless of which corner class Dawn applied. */
.product-card-wrapper .card__badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
}
.product-card-wrapper .card__badge .badge,
.product-card-wrapper .card__badge .twilight-badge--in-stock,
.product-card-wrapper .badge.twilight-badge--in-stock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 22px !important;
  padding: 0 12px !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 4px !important;
  color: var(--success) !important;
  background: color-mix(in srgb, var(--success) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent) !important;
}
.product-card-wrapper .twilight-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 8px currentColor !important;
  display: inline-block !important;
}

/* Sale badge variant — ember */
.product-card-wrapper .card__badge .badge.price__badge-sale,
.product-card-wrapper .card__badge .badge:not(.twilight-badge--in-stock) {
  color: var(--xgrid-accent-bright, #A34518) !important;
  background: color-mix(in srgb, var(--xgrid-accent) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--xgrid-accent) 40%, transparent) !important;
}

/* Outer .card__content (text below media) — body section.
   Matches Globo's body padding (16px 20px 20px). */
.product-card-wrapper > .card__content,
.product-card-wrapper .card > .card__content {
  padding: 16px 20px 20px !important;
  background: var(--surface-1, #161719) !important;
  border: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

/* Body DOM order — match Globo: vendor → title → price.
   Dawn's natural order in .card__information is: h3.card__heading first,
   then .card-information containing vendor + price. We use display:
   contents on .card-information so its children become direct flex
   siblings of .card__heading, then assign explicit `order` values to
   reorder all elements as one flat list. */
.product-card-wrapper .card__information {
  display: flex !important;
  flex-direction: column !important;
}
.product-card-wrapper .card__information > .card-information {
  display: contents !important;
}
.product-card-wrapper .card__information > .card-information > .caption-with-letter-spacing {
  order: 1 !important;
}
.product-card-wrapper .card__information > .card__heading {
  order: 2 !important;
}
/* Rating row — Globo cards in the search/collection grid do NOT show
   ratings (their template renders only vendor/title/price). To keep the
   Dawn cards visually identical, hide Dawn's rating elements entirely
   in the product card context. Ratings still render on the PDP via the
   Air Reviews block. */
.product-card-wrapper .card__information > .card-information > .caption-large,
.product-card-wrapper .card__information > .card-information > .rating,
.product-card-wrapper .card__information > .card-information > .rating-text,
.product-card-wrapper .card__information > .card-information > .rating-count {
  display: none !important;
}
.product-card-wrapper .card__information > .card-information > .price {
  order: 4 !important;
}
/* Hidden labels (.visually-hidden "Vendor:" etc.) — push to back so
   they don't accidentally reserve flex space at the top. */
.product-card-wrapper .card__information > .card-information > .visually-hidden {
  order: 0 !important;
}

/* Title — match Globo: 18px / 600 / 1.25 line-height / 12px margin-bottom */
.product-card-wrapper .card__heading {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink, #F5F7FA) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  margin: 0 0 12px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.5em !important;
}
.product-card-wrapper .card__heading a,
.product-card-wrapper .card__heading a:visited {
  color: var(--ink, #F5F7FA) !important;
  text-decoration: none !important;
}
.product-card-wrapper .card__heading a:hover {
  color: var(--brand-bright, #4A95E8) !important;
}

/* Vendor — match Globo: 11px / 600 / uppercase / 4px margin-bottom */
.product-card-wrapper .card-information .caption-with-letter-spacing,
.product-card-wrapper .card__information .caption-with-letter-spacing {
  font-size: 11px !important;
  color: var(--brand-bright, #4A95E8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  line-height: 1.4 !important;
}

/* Price — push to bottom of card body for consistent alignment */
.product-card-wrapper .price {
  margin-top: auto !important;
}
/* Price — match Globo: 14px / 500 / Geist Mono / tabular-nums.
   Dawn's default was 16px / 400 — both too big and wrong weight. */
.product-card-wrapper .price,
.product-card-wrapper .price__container,
.product-card-wrapper .price .price-item--regular,
.product-card-wrapper .price .price__regular .price-item--regular,
.product-card-wrapper .price-item {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 14px !important;
  color: var(--ink, #F5F7FA) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.4 !important;
}
.product-card-wrapper .price__sale s,
.product-card-wrapper .price__sale s .price-item--regular {
  color: var(--ink-3) !important;
  text-decoration: line-through !important;
  margin-right: 8px !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
.product-card-wrapper .price-item--sale,
.product-card-wrapper .price-item--last,
.product-card-wrapper .price__sale .price-item--last {
  color: var(--xgrid-accent, #C75D2A) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
/* Hide redundant regular price when on sale */
.product-card-wrapper .price.price--on-sale .price__regular {
  display: none !important;
}

/* Rating stars row — keep but tone down */
.product-card-wrapper .rating,
.product-card-wrapper [class*="rating"] {
  margin: 4px 0 8px !important;
  font-size: 11px !important;
}

/* Hide the inner card__content's duplicate title (Dawn renders title twice:
   once as overlay inside card__inner.card--media, once outside).
   We want the outer one (which contains the price). */
.product-card-wrapper .card__inner .card__content > .card__information > h3.card__heading {
  display: none !important;
}

/* For collection cards (Vehicle Outfitting / Power Upgrades / etc.) — keep
   them styled but skip the product-card-specific overrides. They use
   .collection-card-wrapper not .product-card-wrapper. */
.card-wrapper.collection-card-wrapper {
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   TWILIGHT — Cart page port (prototype-cart.html)
   ==========================================================================
   Dawn renders the cart in two sibling shopify-sections under <main>:
     main-cart-items section   → table-based cart with line items
     cart-footer section       → checkout totals + button
   Design system layout is a 2-col grid: items list (1fr) + sticky
   summary column (380px). We use :has() on <main> to gridify the
   sections side-by-side without editing templates.

   Class map (Dawn → design system):
     .cart-items / cart-items custom el  → .cart-items wrapper
     .cart-item (a <tr>)                 → .cart-line (CSS grid row)
     .cart-item__media                   → .cart-line__image
     .cart-item__details                 → .cart-line__info
     .cart-item__quantity                → .cart-line__qty
     .cart-item__totals                  → .cart-line__actions
     .cart-item__price-wrapper           → .cart-line__price
     .cart-item__quantity-wrapper        → .cart-line__remove (live near qty)
     .cart__footer / .totals             → .order-summary
     .cart__checkout-button              → .order-summary__cta button
   ========================================================================== */

/* ---------- Page layout: 2-col grid (items | summary) ----------
   Outer page padding per design system .cart-layout:
     top:  48px (space-9) below the sticky header
     side: 24px gutters
     bot:  80px (space-11) above the footer
   minmax(0, 1fr) lets the items column shrink below its content's
   intrinsic min-width (Dawn renders the cart as a table). */
@media screen and (min-width: 990px) {
  main:has(.cart__contents):has(.cart__footer-wrapper) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px !important;
    grid-template-areas: "items summary" !important;
    gap: 32px !important;
    max-width: 1400px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 48px 24px 80px !important;   /* top sides bottom */
    align-items: start;
  }
  main:has(.cart__contents) > .shopify-section:has(.cart__contents) {
    grid-area: items !important;
    min-width: 0 !important;
  }
  main:has(.cart__contents) > .shopify-section.cart__footer-wrapper {
    grid-area: summary !important;
    position: sticky;
    top: 90px;
    min-width: 0 !important;
  }
}

/* ---------- Page heading "Your cart" ---------- */
h1.title.title--primary,
.title-wrapper-with-link h1.title {
  font-family: var(--font-heading-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 44px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink, #F5F7FA) !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
}
.title-wrapper-with-link {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
}

/* ---------- Items wrapper card ---------- */
.cart__contents {
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 12px !important;
  padding: 8px 28px !important;     /* small vertical padding around items */
}

/* Hide Dawn's table column headers ("Product / Quantity / Total") */
.cart-items thead,
.cart-items__heading,
.cart-items__heading--wide,
.cart-items__heading--total {
  display: none !important;
}

/* Make the table render as grid rows so we can style each cart-item
   as a 3-col flex row (image | info | actions) per the design system */
.cart-items,
.cart-items table {
  display: block !important;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}
.cart-items tbody,
.cart-items > tbody {
  display: block !important;
  width: 100% !important;
}

/* ---------- Cart line item (.cart-item = <tr>) ----------
   Dawn renders 5 td cells: media | details | mobile-total (hidden on
   desktop) | quantity | desktop-total. Using named grid areas to
   place media in column 1, details (with quantity directly below)
   in column 2, totals (with trash below it) in column 3 — across
   two rows so the row of qty + remove sits under title naturally. */
.cart-item {
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "image details totals"
    "image quantity totals" !important;
  gap: 4px 20px !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--rule, #2D2E31) !important;
  align-items: start !important;
  width: 100% !important;
}
.cart-item:last-child {
  border-bottom: none !important;
}

/* Image column */
.cart-item__media {
  grid-area: image !important;
  width: 100px !important;
  padding: 0 !important;
  align-self: start !important;
}
.cart-item__image-container,
.cart-item__image-container a {
  display: block !important;
  background: var(--surface-2, #232426) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  aspect-ratio: 1;
  padding: 8px !important;
}
.cart-item__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Details column (title + variant + unit price) */
.cart-item__details {
  grid-area: details !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0;
  align-self: start !important;
}
.cart-item__name,
.cart-item__name a {
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink, #F5F7FA) !important;
  text-decoration: none !important;
  margin: 0 !important;
  display: block !important;
}
.cart-item__name a:hover {
  color: var(--brand-bright, #4A95E8) !important;
}
.cart-item__details .product-option,
.cart-item__details dt,
.cart-item__details dd {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums !important;
}
.cart-item__details p.product-option { display: block !important; }
.cart-item__details p.product-option:empty { display: none !important; }
.cart-item__details ul.discounts { margin: 0 !important; padding: 0 !important; }
.cart-item__details ul.discounts:empty { display: none !important; }
.cart-item__error,
.cart-item__error-text {
  color: var(--danger) !important;
  font-size: 12px !important;
}

/* Quantity row (qty stepper + trash) under details */
.cart-item__quantity {
  grid-area: quantity !important;
  padding: 8px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  align-self: start !important;
}
.cart-item__quantity-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.cart-item .quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--surface-2, #232426) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  height: 36px !important;
  width: auto !important;
}
.cart-item .quantity__button {
  background: transparent !important;
  border: none !important;
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
  width: 36px !important;
  height: 100% !important;
  cursor: pointer !important;
  transition: background-color 140ms ease, color 140ms ease;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cart-item .quantity__button:hover {
  background: var(--surface-3, #2F3033) !important;
  color: var(--ink, #F5F7FA) !important;
}
.cart-item .quantity__input {
  background: transparent !important;
  border: none !important;
  color: var(--ink, #F5F7FA) !important;
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
  width: 44px !important;
  padding: 0 !important;
}

/* Totals column (line item total — right side, spans both rows) */
.cart-item__totals {
  grid-area: totals !important;
  text-align: right !important;
  padding: 0 !important;
  align-self: start !important;
  justify-self: end !important;
}
.cart-item__totals.medium-hide.large-up-hide {
  display: none !important;     /* Dawn's mobile-only total cell — desktop uses small-hide */
}
@media (max-width: 749px) {
  .cart-item__totals.medium-hide.large-up-hide { display: block !important; }
  .cart-item__totals.small-hide { display: none !important; }
}
.cart-item__price-wrapper {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink, #F5F7FA) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
}
.cart-item__price-wrapper .price-item,
.cart-item__price-wrapper .price,
.cart-item__price-wrapper .price--end {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}
/* Remove trash button (Dawn renders it inside .cart-item__quantity-wrapper
   as a quantity-popover. The button has class .cart-remove-button) */
.cart-remove-button,
.cart-item__quantity .cart-remove-button {
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 0 !important;
}
.cart-remove-button a,
.cart-item__quantity .cart-remove-button a {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink-3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 0 !important;
  transition: color 140ms ease;
}
.cart-remove-button a:hover,
.cart-item__quantity .cart-remove-button a:hover {
  color: var(--xgrid-accent, #C75D2A) !important;
  background: transparent !important;
}
.cart-remove-button svg,
.cart-item__quantity .cart-remove-button svg {
  width: 16px !important;
  height: 16px !important;
}

/* ---------- Footer / Order Summary (right sticky column) ---------- */
.cart__footer-wrapper {
  padding: 0 !important;
}
/* Dawn wraps .cart__footer in a .page-width div with 50px horizontal
   padding (intended for full-page layouts). Inside our 380px grid
   column that ate 100px of width, causing Shop Pay/PayPal/Google
   accelerated checkout buttons to overflow past viewport. Strip the
   padding so the footer uses the full column width. */
.cart__footer-wrapper .page-width {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cart__footer-wrapper #main-cart-footer {
  width: 100% !important;
}
.cart__footer {
  padding: 28px !important;
  background: var(--surface-1, #161719) !important;
  border: 1px solid var(--rule, #2D2E31) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.cart__blocks {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;       /* prevent wallet button children
                                     from expanding container past
                                     .cart__footer's padding */
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.cart__blocks > *,
.cart__ctas,
.cart__dynamic-checkout-buttons {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Checkout CTA — btn--lg per design system (height 52px, body-lg font) */
.cart__checkout-button,
button[name="checkout"] {
  min-height: 52px !important;
  height: auto !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  width: 100% !important;
  border-radius: 8px !important;
}

/* Tighten the dynamic-checkout button row (Shop Pay / PayPal / GPay /
   Apple Pay). On narrow viewports Shopify's web components default to
   full-width stacked buttons ~120px tall each. Constrain to compact
   row that stays in flow with our Check out CTA above. */
.cart__dynamic-checkout-buttons,
.dynamic-checkout__content {
  margin: 0 !important;
  padding: 0 !important;
}
.shopify-cleanslate {
  margin: 0 !important;
}
/* Each accelerated checkout button: cap height to 44px (matches our
   secondary buttons) and force fixed grid layout regardless of
   wallets present */
.cart__dynamic-checkout-buttons shopify-accelerated-checkout-cart,
.cart__dynamic-checkout-buttons shopify-paypal-button,
.cart__dynamic-checkout-buttons shopify-google-pay-button,
.cart__dynamic-checkout-buttons shopify-apple-pay-button,
.cart__dynamic-checkout-buttons shop-pay-checkout-button {
  display: block !important;
}
.cart__dynamic-checkout-buttons button,
.cart__dynamic-checkout-buttons [role="button"] {
  max-height: 44px !important;
  height: 44px !important;
  min-height: 0 !important;
  border-radius: 6px !important;
}
/* Shadow DOM in Shopify's web components can't be styled from outside,
   so override the host element's --shopify-pay-* CSS vars where
   available, and constrain the host's own layout */
shop-pay-checkout-button,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 44px;
  --shopify-pay-button-block-size: 44px;
  display: block !important;
}
.totals {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding-top: 0 !important;
  border-top: none !important;       /* was a stray rule at the top of
                                        the card — no content above it */
  margin: 0 !important;
}
/* Hide Dawn's empty wrapper divs and other zero-content noise */
.cart__blocks > div:empty,
.cart__footer > div:empty,
.js-contents > div:empty {
  display: none !important;
}
.totals__total {
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
}
.totals__total-value {
  font-family: var(--font-mono, "Geist Mono"), ui-monospace, monospace !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--ink, #F5F7FA) !important;
  font-variant-numeric: tabular-nums !important;
  margin: 0 !important;
}
.tax-note,
.tax-note.caption-large.rte {
  color: var(--ink-3) !important;
  font-size: 12px !important;
  display: block !important;
  margin: 0 !important;
}
.cart__ctas {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* ---------- Trust strip (injected below footer via JS) ---------- */
.twilight-cart-trust {
  margin-top: 12px;
  padding: 16px 20px;
  background: var(--surface-1, #161719);
  border: 1px solid var(--rule, #2D2E31);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.twilight-cart-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body-family, "Geist"), -apple-system, sans-serif;
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.twilight-cart-trust__item svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
}

/* ---------- Page heading row: "Cart" + "Continue shopping" link ---------- */
.cart .title-wrapper-with-link {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
}
.cart .underline-links-hover a,
.cart a[href="/collections/all"] {
  color: var(--brand-bright, #4A95E8) !important;
  text-decoration: none !important;
}
.cart .underline-links-hover a:hover {
  text-decoration: underline !important;
}

/* Hide Dawn warnings section if empty */
.cart__warnings:empty { display: none !important; }