/** Shopify CDN: Minification failed

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

**/
/* ============================================================
   CACTUS JAKE DESIGN SYSTEM — colors_and_type.css
   Neon Southwest | Desert Art | Apparel & POD
   ============================================================ */

/* ============================================================
   Header — "Shop All" link inside each dropdown
   Lets customers click straight through to the parent collection
   without picking a child category. Cyan accent + bottom border
   to set it visually apart from the category items.
   ============================================================ */
.header__submenu .cj-shop-all {
  color: #00e8f5 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid rgba(0, 232, 245, 0.18);
  transition: color 200ms ease-out, background 200ms ease-out;
}
.header__submenu .cj-shop-all:hover {
  color: #3ecfb8 !important;
  background: rgba(0, 232, 245, 0.06);
}
.header__submenu .cj-shop-all__arrow {
  display: inline-block;
  margin-left: 6px;
  transform: translateX(0);
  transition: transform 200ms ease-out;
}
.header__submenu .cj-shop-all:hover .cj-shop-all__arrow {
  transform: translateX(3px);
}

/* ============================================================
   Footer newsletter — "Desert Dispatch"
   Brand-themed signup block. Bebas Neue heading + Barlow Condensed
   subhead, cyan accent on the submit button, dark coal field bg.
   ============================================================ */
.cj-newsletter {
  max-width: 100%;
  text-align: center;
}
.cj-newsletter__heading {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
  font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #f0ebe3 !important;
  margin: 0 0 8px !important;
  line-height: 1 !important;
  text-align: center;
}
.cj-newsletter__sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #c8bfb0;
  margin: 0 auto 18px;
  max-width: 420px;
  text-align: center;
}
.cj-newsletter__form {
  max-width: 340px !important;
  margin: 0 auto !important;
}
.cj-newsletter__form .newsletter-form__field-wrapper {
  max-width: 340px !important;
  margin: 0 auto !important;
}
.cj-newsletter__form .newsletter-form__field-wrapper .field {
  background: #161412 !important;
  border: 1px solid rgba(240, 235, 227, 0.12) !important;
  border-radius: 4px !important;
  min-height: 0 !important;
  height: 44px !important;
  transition: border-color 200ms ease-out;
}
.cj-newsletter__form .newsletter-form__field-wrapper .field:focus-within {
  border-color: rgba(0, 232, 245, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(0, 232, 245, 0.08);
}
.cj-newsletter__form .field__input {
  background: transparent !important;
  color: #f0ebe3 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.86rem !important;
  height: 42px !important;
  min-height: 0 !important;
  padding: 8px 52px 8px 14px !important;
}
.cj-newsletter__form .field__label {
  color: #8a7d6e !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.68rem !important;
  top: 11px !important;
  left: 14px !important;
}
.cj-newsletter__form .field__input:focus ~ .field__label,
.cj-newsletter__form .field__input:not(:placeholder-shown) ~ .field__label {
  top: 4px !important;
  font-size: 0.58rem !important;
}
.cj-newsletter__form .newsletter-form__button {
  background: #00e8f5 !important;
  color: #0d0c0b !important;
  border-radius: 4px !important;
  width: 42px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 3px 3px 3px 0 !important;
  top: auto !important;
  right: 0 !important;
  transition: background 200ms ease-out !important;
}
.cj-newsletter__form .newsletter-form__button .svg-wrapper svg {
  width: 16px !important;
  height: 16px !important;
}
.cj-newsletter__form .newsletter-form__button:hover {
  background: #3ecfb8 !important;
}
.cj-newsletter__form .newsletter-form__button .svg-wrapper svg {
  color: #0d0c0b;
  fill: #0d0c0b;
}
.cj-newsletter__form .newsletter-form__message--success {
  color: #3ecfb8 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,400;0,600;0,800;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ============================================================
   v2 — Subtle noise texture (matte print feel)
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 999;
}

/* ============================================================
   Text selection — brand cyan highlight (Session 59)
   ============================================================
   Dawn's default `::selection { background: rgba(--color-foreground, 0.2) }`
   in base.css renders as a 20% near-black tint over our dark site —
   essentially invisible. Override with solid cyan + site-void text.
   Kill the text-shadow on selected text so brand-glow text (like the
   hero accent line) stays readable while highlighted.

   !important is required because Dawn's base.css loads AFTER our
   cactus-jake.css and the selectors have equal specificity, so without
   the bang Dawn's rule wins on `background-color`. */
::selection {
  background-color: #00e8f5 !important;
  color: #0d0c0b !important;
  text-shadow: none !important;
}
::-moz-selection {
  background-color: #00e8f5 !important;
  color: #0d0c0b !important;
  text-shadow: none !important;
}

/* ============================================================
   v2 — Custom scrollbar
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: #2e2b28 #0d0c0b;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #0d0c0b; }
*::-webkit-scrollbar-thumb { background: #2e2b28; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #4a4540; }

/* ============================================================
   1. COLOR TOKENS
   ============================================================ */

:root {

  /* --- Background Scale (dark-first) --- */
  --cj-void:        #0d0c0b;   /* page bg — near-black */
  --cj-coal:        #161412;   /* card bg */
  --cj-ash:         #1e1c1a;   /* elevated surface, nav */
  --cj-smoke:       #2e2b28;   /* border, divider */
  --cj-dust:        #4a4540;   /* muted / disabled */

  /* --- Text --- */
  --cj-bone:        #f0ebe3;   /* primary text */
  --cj-parchment:   #c8bfb0;   /* secondary text */
  --cj-ember:       #8a7d6e;   /* placeholder / muted label */

  /* --- Neon Accent (80s Synthwave sub-style) --- */
  --cj-neon-cyan:   #00e8f5;
  --cj-neon-purple: #9b2de2;
  --cj-neon-magenta:#e040fb;

  /* --- Desert Accent (Traditional / Mandala sub-style) --- */
  --cj-rust:        #c8572a;   /* fire / energy */
  --cj-gold:        #e8a020;   /* premium / highlight */
  --cj-teal:        #3ecfb8;   /* SW classic / links */
  --cj-agave:       #5a8c72;   /* desert green */

  /* --- Semantic --- */
  --cj-primary:     var(--cj-neon-cyan);
  --cj-cta-bg:      var(--cj-rust);
  --cj-cta-bg-alt:  var(--cj-neon-cyan);
  --cj-link:        var(--cj-teal);
  --cj-link-hover:  #60e8d6;
  --cj-danger:      var(--cj-neon-magenta);
  --cj-success:     var(--cj-agave);
  --cj-warning:     var(--cj-gold);

  /* --- Overlay / Transparency --- */
  --cj-overlay-dark:      rgba(13,12,11,0.75);
  --cj-overlay-deeper:    rgba(13,12,11,0.92);
  --cj-border-subtle:     rgba(240,235,227,0.08);
  --cj-border-medium:     rgba(240,235,227,0.15);
  --cj-border-strong:     rgba(240,235,227,0.28);

  /* ============================================================
     2. TYPOGRAPHY TOKENS
     ============================================================ */

  /* --- Font Families --- */
  --font-display:   'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-sub:       'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:      'DM Sans', system-ui, sans-serif;

  /* --- Type Scale --- */
  --text-display:   clamp(3.5rem, 8vw, 7rem);    /* hero headline */
  --text-h1:        clamp(2rem, 4vw, 3.5rem);
  --text-h2:        clamp(1.5rem, 2.5vw, 2.25rem);
  --text-h3:        1.25rem;
  --text-body:      1rem;
  --text-small:     0.875rem;
  --text-label:     0.75rem;
  --text-micro:     0.625rem;

  /* --- Letter Spacing --- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.12em;

  /* --- Line Height --- */
  --leading-display:  0.95;
  --leading-heading:  1.1;
  --leading-body:     1.6;
  --leading-loose:    1.8;

  /* ============================================================
     3. SPACING TOKENS (8px base grid)
     ============================================================ */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ============================================================
     4. BORDER RADIUS
     ============================================================ */

  --radius-sm:  2px;   /* tags, badges */
  --radius-md:  4px;   /* cards, buttons */
  --radius-lg:  8px;   /* modals, panels */

  /* ============================================================
     5. SHADOWS & GLOW
     ============================================================ */

  --shadow-card:        0 2px 8px rgba(0,0,0,0.6);
  --shadow-card-hover:  0 8px 24px rgba(0,0,0,0.8);
  --glow-cyan:          0 0 16px rgba(0,232,245,0.35), 0 0 4px rgba(0,232,245,0.6);
  --glow-rust:          0 0 12px rgba(200,87,42,0.5);
  --glow-gold:          0 0 12px rgba(232,160,32,0.4);
  --glow-purple:        0 0 16px rgba(155,45,226,0.4);

  /* ============================================================
     6. ANIMATION
     ============================================================ */

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
}

/* ============================================================
   7. SEMANTIC ELEMENT STYLES
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--cj-void);
  color: var(--cj-bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

.cj-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cj-bone);
}

h1, .cj-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cj-bone);
  margin: 0;
}

h2, .cj-h2 {
  font-family: var(--font-sub);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cj-bone);
  margin: 0;
}

h3, .cj-h3 {
  font-family: var(--font-sub);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-wide);
  color: var(--cj-parchment);
  margin: 0;
}

p, .cj-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--cj-parchment);
  margin: 0;
}

.cj-small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--cj-parchment);
}

.cj-label {
  font-family: var(--font-sub);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cj-ember);
}

.cj-micro {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--cj-ember);
}

a {
  color: var(--cj-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--cj-link-hover); }
a:active { opacity: 0.75; }

/* --- Buttons --- */
.cj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sub);
  font-size: var(--text-small);
  font-weight: 800;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.cj-btn-primary {
  background: var(--cj-rust);
  color: var(--cj-bone);
}
.cj-btn-primary:hover {
  background: #d96135;
  box-shadow: var(--glow-rust);
  color: var(--cj-bone);
  transform: translateY(-1px);
}

.cj-btn-neon {
  background: transparent;
  color: var(--cj-neon-cyan);
  border: 1.5px solid var(--cj-neon-cyan);
}
.cj-btn-neon:hover {
  background: rgba(0,232,245,0.08);
  box-shadow: var(--glow-cyan);
  color: var(--cj-neon-cyan);
}

.cj-btn-ghost {
  background: transparent;
  color: var(--cj-bone);
  border: 1px solid var(--cj-border-medium);
}
.cj-btn-ghost:hover {
  border-color: var(--cj-border-strong);
  color: var(--cj-bone);
}

/* --- Cards --- */
.cj-card {
  background: var(--cj-coal);
  border: 1px solid var(--cj-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.cj-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover), var(--glow-cyan);
}

/* --- Tags / Badges --- */
.cj-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-family: var(--font-sub);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.cj-badge-rust   { background: rgba(200,87,42,0.2);  color: #e8825a; border: 1px solid rgba(200,87,42,0.4); }
.cj-badge-cyan   { background: rgba(0,232,245,0.12); color: var(--cj-neon-cyan); border: 1px solid rgba(0,232,245,0.3); }
.cj-badge-teal   { background: rgba(62,207,184,0.12);color: var(--cj-teal); border: 1px solid rgba(62,207,184,0.3); }
.cj-badge-gold   { background: rgba(232,160,32,0.15);color: var(--cj-gold); border: 1px solid rgba(232,160,32,0.3); }
.cj-badge-smoke  { background: var(--cj-smoke); color: var(--cj-parchment); border: 1px solid var(--cj-border-subtle); }

/* --- Divider --- */
.cj-divider {
  border: none;
  border-top: 1px solid var(--cj-border-subtle);
  margin: var(--space-7) 0;
}

/* --- Section --- */
.cj-section {
  padding: var(--space-9) var(--space-6);
  max-width: 1280px;
  margin: 0 auto;
}

/* ============================================================
   8. DAWN THEME OVERRIDES
   ============================================================ */

:root {
  --color-base-background-1: 13, 12, 11;
  --color-base-background-2: 22, 20, 18;
  --color-base-text: 240, 235, 227;
  --color-base-accent-1: 200, 87, 42;
  --color-base-accent-2: 0, 232, 245;
  --color-base-outline-button-labels: 240, 235, 227;
  --color-base-border: 240, 235, 227;
  --buttons-radius: 4px;
  --inputs-radius: 4px;
}

body,
html {
  background-color: #0d0c0b !important;
  color: var(--cj-bone);
  font-family: var(--font-body);
}

/* Prevent white gaps between Shopify sections */
.shopify-section {
  background: #0d0c0b;
}

/* Footer and adjacent section wrappers */
.footer-section,
.shopify-section--footer,
.footer__content-top,
.footer__content-bottom,
footer,
[class*='footer'] {
  background: #0d0c0b !important;
}

/* ============================================================
   Product image lightbox modal — dark background
   Dawn opens a full-screen modal when image_zoom = "lightbox"
   ============================================================ */
.product-media-modal,
.product-media-modal__dialog,
.product-media-modal__content,
.product-media-modal__toggle-zoom,
product-modal {
  background: #0d0c0b !important;
}

/* The overlay/backdrop */
.product-media-modal::backdrop,
.product-media-modal + .modal-overlay {
  background: rgba(13, 12, 11, 0.95) !important;
}

/* Image container inside the lightbox */
.product-media-modal .product__media,
.product-media-modal .product-media-container,
.product-media-modal .media,
.product-media-modal img {
  background: #0d0c0b !important;
}

/* Prevent white gaps between sections */
body,
html {
  background-color: #0d0c0b !important;
}
.shopify-section {
  background-color: #0d0c0b;
}

/* ============================================================
   Customer pages — login, register, account, addresses, order
   Dawn renders all of these inside .customer wrapper.
   ============================================================ */
.customer {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px;
  color: #f0ebe3;
  font-family: 'DM Sans', sans-serif;
}
.customer h1,
.customer h2,
.customer h3,
.customer .customer__title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0ebe3;
}
.customer h1,
.customer .customer__title {
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  margin: 0 0 24px;
  line-height: 1;
}
.customer h2 {
  font-size: 1.6rem;
  margin: 32px 0 16px;
}
.customer p,
.customer li,
.customer span:not(.svg-wrapper),
.customer label {
  font-family: 'DM Sans', sans-serif;
  color: #c8bfb0;
  line-height: 1.6;
}
.customer a {
  color: #3ecfb8;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.customer a:hover { color: #60e8d6; }

.customer .field,
.customer fieldset {
  margin-bottom: 16px;
  border: 0;
  padding: 0;
}
.customer label,
.customer .field__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a7d6e;
  display: block;
  margin-bottom: 6px;
}
.customer input[type='email'],
.customer input[type='password'],
.customer input[type='text'],
.customer input[type='tel'],
.customer textarea,
.customer .field__input {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  background: #161412 !important;
  border: 1px solid rgba(240, 235, 227, 0.12) !important;
  border-radius: 3px;
  color: #f0ebe3 !important;
  padding: 12px 14px;
  transition: border-color 150ms, box-shadow 150ms;
}
.customer input:focus,
.customer textarea:focus,
.customer .field__input:focus {
  outline: none;
  border-color: #00e8f5 !important;
  box-shadow: 0 0 0 1px #00e8f5, 0 0 12px rgba(0, 232, 245, 0.2) !important;
}

.customer button[type='submit'],
.customer .button {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: #c8572a !important;
  color: #f0ebe3 !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  cursor: pointer;
  transition: box-shadow 150ms, transform 150ms !important;
  box-shadow: none !important;
}
.customer button[type='submit']:hover,
.customer .button:hover {
  box-shadow: 0 0 16px rgba(200, 87, 42, 0.5) !important;
  transform: translateY(-1px);
  color: #f0ebe3 !important;
}
.customer .button.button--secondary,
.customer button[type='button'] {
  background: transparent !important;
  color: #00e8f5 !important;
  border: 1px solid #00e8f5 !important;
}
.customer .button.button--secondary:hover,
.customer button[type='button']:hover {
  background: rgba(0, 232, 245, 0.08) !important;
  box-shadow: 0 0 16px rgba(0, 232, 245, 0.4) !important;
}

/* Order history table */
.customer table {
  width: 100%;
  border-collapse: collapse;
}
.customer table th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a7d6e;
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(240, 235, 227, 0.08);
}
.customer table td {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  color: #f0ebe3;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(240, 235, 227, 0.06);
}

/* Address card */
.customer ul.address-list,
.customer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.customer ul.address-list li,
.customer .address-card {
  background: #161412;
  border: 1px solid rgba(240, 235, 227, 0.08);
  border-radius: 4px;
  padding: 20px;
}

/* ============================================================
   Quick-Add modal (Choose Options popup from product cards)
   Dawn renders this globally via <quick-add-modal>; product info
   is fetched from the product page, so it inherits product page
   styles automatically. We just need to theme the modal shell.
   ============================================================ */
.quick-add-modal {
  background: rgba(13, 12, 11, 0.85) !important;
  backdrop-filter: blur(8px);
}
.quick-add-modal__content,
.quick-add-modal__content.quick-add-modal__content--bulk {
  background-color: #0d0c0b !important;
  border: 1px solid rgba(240, 235, 227, 0.08) !important;
  border-radius: 4px !important;
  color: #f0ebe3 !important;
  --color-background: 13, 12, 11 !important;
  --color-foreground: 240, 235, 227 !important;
}
/* Close button — dark coal circle with bone X, teal hover */
.quick-add-modal__toggle {
  background: #161412 !important;
  border: 1px solid rgba(240, 235, 227, 0.12) !important;
  color: #f0ebe3 !important;
  border-radius: 50% !important;
  transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out !important;
}
.quick-add-modal__toggle:hover {
  background: #1e1c1a !important;
  border-color: #00e8f5 !important;
  color: #00e8f5 !important;
}
.quick-add-modal__toggle svg {
  width: 14px;
  height: 14px;
  color: inherit !important;
}

/* The fetched product content — just ensure dark palette applies */
.quick-add-modal__content-info,
.quick-add-modal__content-info * {
  color: inherit;
}
.quick-add-modal__content-info {
  --color-background: 13, 12, 11 !important;
  --color-foreground: 240, 235, 227 !important;
  background: #0d0c0b !important;
}
.quick-add-modal__content-info .product__info-wrapper,
.quick-add-modal__content-info .product__media-wrapper {
  background: #0d0c0b !important;
}

/* ============================================================
   Shopify policy pages (privacy, refund, terms of service,
   shipping). These pages are rendered by Shopify's built-in
   policy template, not a theme section, so we style the
   .shopify-policy__container wrapper directly. Default Dawn
   colors leave links and headings near-black on our dark page
   background, so we force brand palette here.
   ============================================================ */
.shopify-policy__container {
  max-width: 920px !important;
  padding: 48px 24px 96px !important;
}
.shopify-policy__title h1 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(2.5rem, 5vw, 3.6rem) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #f0ebe3 !important;
  text-align: center !important;
  margin: 0 0 32px !important;
  opacity: 1 !important;
}
.shopify-policy__body,
.shopify-policy__body .rte,
.shopify-policy__body .rte p,
.shopify-policy__body .rte li,
.shopify-policy__body .rte div,
.shopify-policy__body .rte span {
  color: #f0ebe3 !important;
  font-family: 'DM Sans', sans-serif !important;
  line-height: 1.6 !important;
}
/* Dawn defaults .rte ul/ol/li to 1.6rem which is 60% larger than the
   surrounding paragraph text. Force list font-size to match paragraph
   body (1rem). Keep the bullet indent so markers sit outside the text. */
.shopify-policy__body .rte ul,
.shopify-policy__body .rte ol,
.shopify-policy__body .rte li {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}
.shopify-policy__body .rte ul,
.shopify-policy__body .rte ol {
  padding-left: 24px !important;
  margin: 12px 0 16px !important;
}
.shopify-policy__body .rte li {
  margin-bottom: 4px !important;
}
.shopify-policy__body .rte h2,
.shopify-policy__body .rte h3,
.shopify-policy__body .rte h4 {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #f0ebe3 !important;
  font-weight: 400 !important;
  margin-top: 36px !important;
  margin-bottom: 12px !important;
  opacity: 1 !important;
}
.shopify-policy__body .rte h2 { font-size: 1.8rem !important; }
.shopify-policy__body .rte h3 { font-size: 1.4rem !important; }
.shopify-policy__body .rte h4 { font-size: 1.15rem !important; }
.shopify-policy__body .rte a,
.shopify-policy__body a {
  color: #00e8f5 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.shopify-policy__body .rte a:hover,
.shopify-policy__body a:hover {
  color: #60e8d6 !important;
}
.shopify-policy__body .rte strong {
  color: #f0ebe3 !important;
  font-weight: 700 !important;
}
/* Shopify's default Terms of Service template uses bare <strong>
   elements as section labels (OVERVIEW, SECTION 1, etc.) followed
   by chained <br><br> for spacing, instead of proper <h2>/<h3>
   tags. Two variants of this pattern exist depending on whether
   the user edited the body in the rich text editor:

     1. Top-level: <strong> + <br><br> as direct children of .rte
        (initial paste, before any edits)
     2. Wrapped: same nodes wrapped inside a single <p> after the
        user adds a link via the editor (Shopify rewraps content)

   Catch both. Inline <strong> inside true paragraphs has neither
   a <br> sibling immediately following nor lives at .rte top level,
   so it remains styled as bold inline text. */
.shopify-policy__body .rte > strong,
.shopify-policy__body .rte strong:has(+ br + br) {
  display: block !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #f0ebe3 !important;
  font-weight: 400 !important;
  margin-top: 36px !important;
  margin-bottom: 12px !important;
}
.shopify-policy__body .rte > strong:first-child,
.shopify-policy__body .rte p:first-child > strong:first-child {
  margin-top: 0 !important;
}
/* Slightly more breathing room between BR-separated content so the
   wall-of-text renders less dense. Affects BRs at .rte top level
   AND BRs inside the single wrapped <p> (the ToS pattern). */
.shopify-policy__body .rte > br,
.shopify-policy__body .rte > p > br {
  display: block;
  content: "";
  margin-top: 6px;
}

/* ============================================================
   CACTUS JAKE — Dawn cart-notification brand theme override
   ============================================================
   Stock Dawn renders the post-add-to-cart notification as a white
   modal card with dark text + a thin gray "Item added to your cart"
   heading. On a dark site this looks broken. This block re-skins it
   to coal/bone with brand fonts and a teal "added" accent so the
   notification matches the cart-page toast (cj-toast) visual language.
   ============================================================ */
.cart-notification {
  background: #161412 !important;
  color: #f0ebe3 !important;
  border: 1px solid rgba(240, 235, 227, 0.12) !important;
  border-left: 3px solid #3ecfb8 !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  padding: 28px 32px !important;
}
.cart-notification__header {
  border-bottom: none !important;
}
.cart-notification__heading {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #3ecfb8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
}
.cart-notification__heading .icon-checkmark {
  color: #3ecfb8 !important;
  width: 14px !important;
  height: auto !important;
}
.cart-notification__close {
  color: #c8bfb0 !important;
}
.cart-notification__close:hover { color: #f0ebe3 !important; }
.cart-notification-product__name,
.cart-notification a:not(.button) {
  color: #f0ebe3 !important;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.cart-notification dl,
.cart-notification .product-option,
.cart-notification .price,
.cart-notification-product__option {
  color: #c8bfb0 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.86rem !important;
}
/* Primary "View cart" CTA — teal-tinted on coal. */
.cart-notification .cart-notification__links .button--primary,
.cart-notification .button {
  background: #3ecfb8 !important;
  color: #0d0c0b !important;
  border: 1px solid #3ecfb8 !important;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.cart-notification .cart-notification__links .button--primary:hover,
.cart-notification .button:hover {
  background: #60e8d6 !important;
  border-color: #60e8d6 !important;
  color: #0d0c0b !important;
}
/* Secondary "View cart" link CTA */
.cart-notification .button--tertiary,
.cart-notification .button--secondary {
  background: transparent !important;
  color: #f0ebe3 !important;
  border: 1px solid rgba(240, 235, 227, 0.25) !important;
}
.cart-notification .button--tertiary:hover,
.cart-notification .button--secondary:hover {
  border-color: #3ecfb8 !important;
  color: #3ecfb8 !important;
}
.cart-notification-product__image {
  border-radius: 4px !important;
  overflow: hidden !important;
}

/* Mobile: center the post-add-to-cart notification within the viewport.
   v4 (bulletproof): use viewport-locked `left: 50% + transform:
   translateX(-50%)` centering instead of parent-relative left/right
   insets. The previous approaches (v1: equal insets via absolute; v2:
   position:fixed on .cart-notification; v3: position:fixed on the
   <cart-notification> custom element too) all depended on some parent's
   width being the full viewport, but Dawn's parent chain (custom element
   → .page-width wrapper → sticky header section) kept inheriting padding
   or max-width that pushed the element off-axis on different mobile
   devices.

   This version centers the notification BOX based on its OWN width
   anchored at 50% of the viewport. It doesn't care what any parent does.
   The translateY animation that Dawn uses for the slide-in is combined
   into a single transform so the X centering and Y slide both work. */
@media screen and (max-width: 749px) {
  cart-notification {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 101 !important;
  }
  .cart-notification-wrapper {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100vw !important;
  }
  .cart-notification {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 32px) !important;
    max-width: 400px !important;
    padding: 18px 20px !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -100%) !important;
  }
  .cart-notification.active {
    transform: translate(-50%, 0) !important;
  }
  .cart-notification.animate {
    transition: transform var(--duration-default) ease, visibility 0s !important;
  }
}

/* ============================================================
   Product card badges — "Sold out" / "Sale" / "New"
   Dawn drives these from theme color-schemes which resolve to
   dark-on-dark coal in this theme. Force readable contrast with
   brand tokens regardless of the configured color scheme.
   ============================================================ */
.card .badge,
.card-wrapper .badge,
.product .badge,
.card__badge .badge {
  background-color: #161412 !important;
  border: 1px solid rgba(240, 235, 227, 0.18) !important;
  color: #f0ebe3 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 1rem !important;
  padding: 0.4rem 0.9rem 0.45rem !important;
  border-radius: 999px !important;
}

/* Sold-out pill: muted parchment on coal so it reads but doesn't shout */
.card .badge.badge--bottom-left,
.card-wrapper .badge.badge--bottom-left,
.product .badge.badge--bottom-left,
.card .badge[class*='color-scheme'],
.card-wrapper .badge[class*='color-scheme'] {
  background-color: rgba(13, 12, 11, 0.92) !important;
  color: #f0ebe3 !important;
  border: 1px solid rgba(240, 235, 227, 0.32) !important;
}

/* "On sale" pill differentiator — cyan accent so price drops pop */
.card .badge.color-accent-1,
.card-wrapper .badge.color-accent-1,
.product .badge.color-accent-1 {
  background-color: #00e8f5 !important;
  color: #0d0c0b !important;
  border-color: #00e8f5 !important;
}

/* ============================================================
   Facet popups — sticky white header + sort <select>
   Dawn's .facets__header (sticky top of the popup with "0 selected"
   + "Reset" link) inherits the section's --color-background which is
   white in the active scheme. Section-id-scoped CSS doesn't always
   reach it (popup can be repositioned via JS). Force brand globally.
   Same for the sort native <select> — keep coal/bone everywhere it
   appears (collection grid, search, etc.).
   ============================================================ */
.facets__header,
.facets__display .facets__header,
.facets__display-vertical .facets__header,
.facets__header-vertical {
  background-color: #161412 !important;
  color: #f0ebe3 !important;
  border-bottom: 1px solid rgba(240, 235, 227, 0.12) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
}
.facets__header .facets__selected,
.facets__header-vertical .facets__selected {
  color: #c8bfb0 !important;
}
.facets__header .facets__reset,
.facets__header-vertical .facets__reset,
.facets__reset {
  color: #00e8f5 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
}
.facets__header .facets__reset:hover,
.facets__reset:hover {
  color: #60e8d6 !important;
}

/* Sort <select> — global, no section scoping so it works on search +
   collection + any other surface using the facet sort form. Let the
   browser auto-size to the current option (padding-right reserves
   caret room). No min-width — that creates dead space when the
   selected option is shorter than the widest option. */
.facet-filters__sort,
select.facet-filters__sort,
.facet-filters__field .select__select,
.mobile-facets__sort .select__select,
.facets-vertical-sort .select__select {
  background: #161412 !important;
  background-color: #161412 !important;
  color: #f0ebe3 !important;
  border: 1px solid rgba(240, 235, 227, 0.18) !important;
  border-radius: 4px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.02em !important;
  /* right padding reserves room for the caret (which is positioned at
     right: 14px on the .select wrapper, so the select itself needs at
     least 14px caret-clearance + ~14px chevron width + 4px gap) */
  padding: 8px 38px 8px 14px !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-overflow: clip !important;
}
/* Push the caret inward from the wrapper's right edge so it doesn't hug
   the border. Dawn's default is right: 0; we want some breathing room. */
.facet-filters__field .select .svg-wrapper,
.facet-filters__field .select > .svg-wrapper,
.facets-vertical-sort .select .svg-wrapper,
.mobile-facets__sort .select .svg-wrapper {
  right: 14px !important;
}
/* Wrapper around the select sizes itself to the select. Do NOT set
   min-width here — Dawn positions the caret span absolutely at right:0
   of the wrapper, so a wrapper wider than the select leaves the caret
   floating in space (~150px gap on desktop). The select itself owns
   min-width; the wrapper hugs it. */
.facet-filters__field .select,
.facets-vertical-sort .select {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}
.facet-filters__sort:focus,
.facet-filters__sort:hover,
.facet-filters__field .select__select:focus,
.facet-filters__field .select__select:hover {
  border-color: rgba(0, 232, 245, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(0, 232, 245, 0.12) !important;
  outline: none !important;
}
/* Caret on the select wrapper */
.facet-filters__field .select .svg-wrapper,
.facet-filters__field .select svg,
.facets-vertical-sort .select .svg-wrapper,
.facets-vertical-sort .select svg {
  color: #00e8f5 !important;
  fill: #00e8f5 !important;
}
/* <option> color — limited support but best-effort (Chrome desktop honors it) */
.facet-filters__sort option,
.facet-filters__field .select__select option {
  background: #161412 !important;
  color: #f0ebe3 !important;
}

/* ============================================================
   Mobile "Filter and Sort" drawer — Dawn ships this as a
   full-screen panel with the APPLY bar pinned to the bottom of
   the viewport. With only a couple of filters that leaves a big
   empty void between the last filter and the button. Make the
   panel size to its content instead — a compact card that slides
   in from the top-right — tighten the row spacing, and tone the
   solid cyan APPLY button into a brand CTA.
   ============================================================ */
/* Compact panel: the drawer is only as tall as its content,
   capped at the viewport height. This collapses the empty space
   because the footer's margin-top:auto has no free space left to
   push against, so it sits directly below the last row. */
.mobile-facets__inner {
  height: auto !important;
  max-height: 100% !important;
}
/* Dawn pads the top of the list by 2.7rem; the brand header
   already has its own padding + divider, so trim it right down. */
.mobile-facets__main {
  padding-top: 0.5rem !important;
}
.mobile-facets__header {
  padding: 1.5rem 1.8rem !important;
  align-items: center !important;
}
.mobile-facets__heading {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #f0ebe3 !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}
/* Product count under the heading. Dawn leaves it at 0.7 opacity,
   which washes out to near-invisible "ghost" text on coal. Style
   it as a deliberate muted uppercase subtitle instead. */
.mobile-facets__count {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #c8bfb0 !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0.45rem 0 0 !important;
}
.mobile-facets__close {
  color: #00e8f5 !important;
}
/* Individual filter row (collapsed summary) — Availability, Price */
.mobile-facets__details,
details.mobile-facets__details {
  border-bottom: 1px solid rgba(240, 235, 227, 0.08) !important;
}
.mobile-facets__summary {
  padding: 1.4rem 1.8rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 1rem !important;
  color: #f0ebe3 !important;
  background: transparent !important;
}
.mobile-facets__summary > div {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
.mobile-facets__summary .icon-caret,
.mobile-facets__arrow {
  color: #00e8f5 !important;
  fill: #00e8f5 !important;
}
/* Sort by row — match brand label styling, ensure dropdown isn't truncated.
   padding:0 — the parent .mobile-facets__summary already supplies the
   1.4rem/1.8rem inset. Without this the row was double-padded, pushing the
   "Sort by" label indented to the right of the Availability / Price rows. */
.mobile-facets__sort {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.mobile-facets__sort label,
.mobile-facets__sort .mobile-facets__sort-label {
  color: #f0ebe3 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 1rem !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.mobile-facets__sort .select {
  flex: 0 1 auto !important;
}
.mobile-facets__sort .select__select {
  min-width: 16ch !important;
  max-width: 22ch !important;
}

/* APPLY / VIEW button at bottom — switch from solid cyan to a coal
   pill with cyan border so it reads as the primary CTA without
   feeling like a hard ad banner */
.mobile-facets__footer {
  padding: 1.4rem 1.8rem !important;
  background: #161412 !important;
  border-top: 1px solid rgba(240, 235, 227, 0.08) !important;
  gap: 12px !important;
}
/* Footer buttons — Dawn gives each child width:50% PLUS a margin-left:1rem
   AND its .button min-width:12rem. Combined, that overflows the drawer and
   the Apply button gets clipped off the right edge. Make both children equal
   flex halves with no min-width and no extra margin so they always fit. */
.mobile-facets__footer > * {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 0 !important;
}
.mobile-facets__footer button,
.mobile-facets__footer .mobile-facets__close-button,
.mobile-facets__footer .mobile-facets__clear,
.no-js .mobile-facets__footer .button {
  background: #00e8f5 !important;
  color: #0d0c0b !important;
  border: 1px solid #00e8f5 !important;
  border-radius: 4px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  padding: 12px 14px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  text-align: center !important;
  transition: background 150ms ease-out, color 150ms ease-out !important;
}
.mobile-facets__footer button:hover,
.mobile-facets__footer .mobile-facets__close-button:hover {
  background: #3ecfb8 !important;
  border-color: #3ecfb8 !important;
}
/* Secondary "Clear" link in the footer should look secondary, not primary */
.mobile-facets__footer .mobile-facets__clear,
.mobile-facets__clear {
  background: transparent !important;
  color: #c8bfb0 !important;
  border: 1px solid rgba(240, 235, 227, 0.18) !important;
  text-decoration: none !important;
}
.mobile-facets__footer .mobile-facets__clear:hover,
.mobile-facets__clear:hover {
  color: #f0ebe3 !important;
  border-color: rgba(240, 235, 227, 0.35) !important;
  background: rgba(240, 235, 227, 0.04) !important;
}

/* ============================================================
   Product page accordion content — Materials / Size / Care / Shipping
   Each metafield line renders as its own <p> (see main-product.liquid).
   Give them vertical rhythm + a subtle divider feel so the dropdown
   reads as a tidy list rather than a wall of text.
   ============================================================ */
.product__accordion .accordion__content {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  color: #c8bfb0 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  padding: 12px 4px 4px !important;
}
.product__accordion .accordion__content .cj-accordion-list p,
.product__accordion .accordion__content > p {
  margin: 0 !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(240, 235, 227, 0.06) !important;
  color: #c8bfb0 !important;
  line-height: 1.5 !important;
}
.product__accordion .accordion__content .cj-accordion-list p:last-child,
.product__accordion .accordion__content > p:last-child {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}
.product__accordion .accordion__content .cj-accordion-list p:first-child,
.product__accordion .accordion__content > p:first-child {
  padding-top: 0 !important;
}
.product__accordion .accordion__content a {
  color: #00e8f5 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 600 !important;
}
.product__accordion .accordion__content a:hover {
  color: #60e8d6 !important;
}

/* ============================================================
   Search results page — /search?q=...
   Dawn's default search form is white-input + dark-text and looks
   broken on coal. Match brand: Bebas Neue h1, coal input bg,
   cyan focus ring, bone text, parchment status copy.
   ============================================================ */
.template-search h1,
.template-search__header h1 {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #f0ebe3 !important;
  font-weight: 400 !important;
}
.template-search .search {
  border-radius: 4px !important;
}
.template-search .search .field {
  background: #161412 !important;
  border: 1px solid rgba(240, 235, 227, 0.12) !important;
  border-radius: 4px !important;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out !important;
  box-shadow: none !important;
}
.template-search .search .field:focus-within {
  border-color: #00e8f5 !important;
  box-shadow: 0 0 0 3px rgba(0, 232, 245, 0.12) !important;
}
.template-search .search .field::after {
  display: none !important;
}
.template-search .search .field__input,
.template-search .search .search__input {
  background: transparent !important;
  color: #f0ebe3 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 1rem !important;
  border: none !important;
  box-shadow: none !important;
}
.template-search .search .field__input::placeholder {
  color: #8a7d6e !important;
}
.template-search .search .field__label {
  color: #8a7d6e !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.74rem !important;
}
.template-search .search .field__button,
.template-search .search .search__button,
.template-search .search .reset__button {
  color: #c8bfb0 !important;
  transition: color 150ms ease-out !important;
}
.template-search .search .field__button:hover,
.template-search .search .search__button:hover,
.template-search .search .reset__button:hover {
  color: #00e8f5 !important;
}
.template-search .search .field__button svg,
.template-search .search .search__button svg,
.template-search .search .reset__button svg {
  color: inherit !important;
  fill: currentColor !important;
}
.template-search p[role='status'],
.template-search .template-search__results {
  color: #c8bfb0 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
.template-search p[role='status'] {
  text-align: center !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.03em !important;
}
/* "No results" empty state */
.template-search--empty p[role='status'] {
  margin-top: 24px !important;
}
/* Sort dropdown on the search results page */
.template-search .facet-filters__label,
.template-search .facet-filters .facet-filters__label label {
  color: #f0ebe3 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
}
.template-search .select__select,
.template-search .facet-filters__sort {
  background: #161412 !important;
  color: #f0ebe3 !important;
  border: 1px solid rgba(240, 235, 227, 0.12) !important;
  border-radius: 4px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
.template-search .select .svg-wrapper svg {
  color: #00e8f5 !important;
  fill: #00e8f5 !important;
}

/* ============================================================
   Header search MODAL + PREDICTIVE dropdown
   The block above themes the /search results page. This themes the
   search overlay that drops from the header search icon and the
   predictive autocomplete that appears as you type (desktop + mobile
   web). Dawn renders both on --color-background (white under the
   header colour scheme), so they showed up un-themed against the dark
   site. Mirror the .template-search palette: void panel, coal input,
   smoke borders, bone text, ember labels, cyan focus/accent.
   ============================================================ */

/* Modal overlay panel (drops from the header search icon) */
.search-modal__content {
  background: #0d0c0b !important; /* shorthand also clears Dawn's .gradient image */
  border-bottom: 1px solid #2e2b28 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}

/* Search input inside the modal — mirrors .template-search .search */
.search-modal .search .field,
.search-modal .field {
  background: #161412 !important;
  border: 1px solid rgba(240, 235, 227, 0.12) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out !important;
}
.search-modal .search .field:focus-within,
.search-modal .field:focus-within {
  border-color: #00e8f5 !important;
  box-shadow: 0 0 0 3px rgba(0, 232, 245, 0.12) !important;
}
.search-modal .search .field::after {
  display: none !important;
}
.search-modal .search__input,
.search-modal .field__input {
  background: transparent !important;
  color: #f0ebe3 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  border: none !important;
  box-shadow: none !important;
}
.search-modal .search__input::placeholder,
.search-modal .field__input::placeholder {
  color: #8a7d6e !important;
}
.search-modal .field__label {
  color: #8a7d6e !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.74rem !important;
}
.search-modal .search__button,
.search-modal .reset__button,
.search-modal .search-modal__close-button {
  color: #c8bfb0 !important;
  transition: color 150ms ease-out !important;
}
.search-modal .search__button:hover,
.search-modal .reset__button:hover,
.search-modal .search-modal__close-button:hover {
  color: #00e8f5 !important;
}
.search-modal .search__button svg,
.search-modal .reset__button svg,
.search-modal .search-modal__close-button svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* Predictive autocomplete dropdown — header modal AND /search page input */
.predictive-search {
  background: #0d0c0b !important;
  border: 1px solid #2e2b28 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}
.predictive-search__results-groups-wrapper {
  border-bottom-color: #2e2b28 !important;
}
.predictive-search__heading {
  border-bottom: 1px solid #2e2b28 !important;
  color: #8a7d6e !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.predictive-search__item {
  color: #f0ebe3 !important;
}
.predictive-search__list-item[aria-selected='true'] > *,
.predictive-search__list-item:hover > *,
.predictive-search__item[aria-selected='true'],
.predictive-search__item:hover {
  background-color: #1e1c1a !important;
  color: #f0ebe3 !important;
}
.predictive-search__item-heading {
  color: #f0ebe3 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
.predictive-search__item-vendor {
  color: #8a7d6e !important;
}
.predictive-search__item .price,
.predictive-search .price {
  color: #c8bfb0 !important;
}
.predictive-search__item-query-result *:not(mark) {
  color: #c8bfb0 !important;
}
.predictive-search__item-query-result mark {
  color: #00e8f5 !important;
  background: transparent !important;
}
.predictive-search__item--term {
  color: #f0ebe3 !important;
}
.predictive-search__search-for-button {
  color: #f0ebe3 !important;
}
.predictive-search__search-for-button:hover {
  background-color: #1e1c1a !important;
}
predictive-search .spinner {
  color: #00e8f5 !important;
}