/**
 * HearthWrite Design Tokens — classic ember / parchment
 * Restored to the pillar-era visual identity (warm brown voids + flame orange).
 * Surface sheets (Homepage, Story, Nav, etc.) remain the primary paint source.
 */

:root {
  /* Canvas */
  --hw-bg: #0f0a08;
  --hw-bg-soft: #140a05;
  --hw-bg-deep: #080504;
  --hw-card: #1b120d;
  --hw-card-2: #23150f;
  --hw-elevated: #23150f;
  --hw-panel: rgba(24, 16, 12, 0.88);
  --hw-panel-solid: #1b120d;
  --hw-panel-soft: rgba(35, 21, 15, 0.82);
  --hw-panel-light: rgba(var(--hw-text-rgb), 0.04);
  /* Card RGB — story cards / discovery faces follow theme packs */
  --hw-card-rgb: 27, 18, 13;
  --hw-card-2-rgb: 35, 23, 17;
  --hw-bg-deep-rgb: 8, 5, 4;
  --hw-card-face: linear-gradient(
    180deg,
    rgba(var(--hw-card-2-rgb), 0.88) 0%,
    rgba(var(--hw-card-rgb), 0.96) 100%
  );

  /* Text */
  --hw-text: #fff4e8;
  --hw-text-strong: #fff8ef;
  --hw-text-soft: #ead6c2;
  --hw-text-muted: #b89c84;
  --hw-muted: #b89c84;
  --hw-muted-2: #8f735c;

  /* Accent — terracotta ember (aligned with ivory --hw-fe-accent; packs override) */
  --hw-gold: #e0c09a;
  --hw-gold-hover: #f0d7b4;
  --hw-cta: #b85c3a;
  --hw-flame: #b85c3a;
  --hw-flame-light: #c9724f;
  --hw-flame-deep: #8f4027;
  --hw-accent: #b85c3a;
  --hw-accent-light: #c9724f;
  --hw-red: #c45c5c;
  --hw-cinder: #5c4a32;
  /* RGB channels — for rgba()/glows that must follow theme packs */
  --hw-flame-rgb: 184, 92, 58;
  --hw-flame-light-rgb: 201, 114, 79;
  --hw-flame-deep-rgb: 143, 64, 39;
  --hw-gold-rgb: 224, 192, 154;
  --hw-text-rgb: 255, 244, 232;
  --hw-red-rgb: 196, 92, 92;
  --hw-cta-ink: #1a0f08;

  /* Borders / shadows */
  --hw-border: rgba(var(--hw-gold-rgb), 0.14);
  --hw-border-strong: rgba(var(--hw-flame-rgb), 0.32);
  --hw-border-subtle: rgba(var(--hw-gold-rgb), 0.1);
  --hw-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.28);
  --hw-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.36);
  --hw-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.48);
  --hw-shadow-fire: 0 10px 24px rgba(var(--hw-flame-rgb), 0.16);

  /* Radii */
  --hw-radius-sm: 8px;
  --hw-radius-md: 12px;
  --hw-radius-lg: 16px;
  --hw-radius-xl: 20px;
  --hw-radius-2xl: 24px;

  /* Layout */
  /*
   * Desktop stage — cinematic hubs share one composition ladder.
   * QA refs: ~1280 / 1440 / 1920. Below stage-max, pad/width grow with vw;
   * above stage-max the column plateaus and side gutters absorb extra space.
   * Reading surfaces (chapter body) stay on their own reader tokens — do not
   * stretch forever with --hw-stage-max.
   */
  --hw-stage-max: 1920px;
  --hw-stage-wide: 1680px;
  --hw-stage-content: 1600px;
  --hw-stage-cozy: 1480px;
  --hw-stage-rail: 1280px;
  /* Phone-first floor: never edge-flush; grows on tablet/desktop */
  --hw-stage-pad: clamp(0.85rem, 3.5vw, 3.5rem);
  --hw-stage-pad-sm: clamp(0.7rem, 2.5vw, 2rem);
  /* Side flanks reserved for ads when the viewport is wide enough */
  --hw-ad-rail: 200px;
  --hw-content-width: var(--hw-stage-content);
  --hw-page-pad: clamp(16px, 5vw, 72px);
  --hw-global-nav-h: 68px;
  --hw-phone-top-h: 0px;
  --hw-phone-tab-h: 0px;
  --hw-phone-pad: var(--hw-stage-pad-sm);

  /*
   * Breakpoint reference tokens (documentation + JS parity).
   * @media still uses the px literals below — keep both in sync.
   * sm 720 | md 900 | lg 1180 | xl 1440 | xxl 1680
   */
  --hw-bp-sm: 720px;
  --hw-bp-md: 900px;
  --hw-bp-lg: 1180px;
  --hw-bp-xl: 1440px;
  --hw-bp-xxl: 1680px;

  /* Section rhythm + discovery grid */
  --hw-section-gap: clamp(1.5rem, 3.5vw, 3rem);
  --hw-grid-gap: clamp(0.75rem, 1.6vw, 1.25rem);
  --hw-card-min: 11.5rem;
  --hw-card-rail-min: 9.5rem;
  --hw-card-aspect: 2 / 3;

  /* Prose measure — do not stretch text columns on ultrawide */
  --hw-measure: 42ch;
  --hw-measure-wide: 56ch;

  /* Typography */
  --hw-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --hw-font-body: Lora, Georgia, "Times New Roman", serif;
  --hw-font-ui: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Atmosphere — shared Home / GlobalNav / nav-page canvas */
  --hw-canvas-surface: #0a0a0a;
  --hw-canvas-bg:
    radial-gradient(circle at 68% 8%, rgba(var(--hw-flame-rgb), 0.2), transparent 34%),
    radial-gradient(circle at 12% 12%, rgba(var(--hw-red-rgb), 0.12), transparent 30%),
    radial-gradient(circle at 12% 0%, rgba(var(--hw-flame-rgb), 0.06), transparent 14%),
    radial-gradient(circle at 88% 0%, rgba(var(--hw-flame-rgb), 0.05), transparent 14%),
    linear-gradient(180deg, #0a0a0a 0%, #140a05 52%, #120b08 100%);
  --hw-ember-bg: var(--hw-canvas-bg);
  --hw-home-canvas-bg: var(--hw-canvas-bg);
  --hw-studio-canvas: var(--hw-canvas-bg);

  /* Genre accents — richer chroma for chips / orbit seals / spines */
  --hw-genre-fantasy: #4f7658;
  --hw-genre-scifi: #5b7fa5;
  --hw-genre-romance: #c47a8a;
  --hw-genre-mystery: #6b5f8a;
  --hw-genre-thriller: #8a3d45;
  --hw-genre-horror: #7a3d3d;
  --hw-genre-contemporary: #4f8f8a;
  --hw-genre-historical: #b7833d;
  --hw-genre-comedy: #9a7a3a;
  --hw-genre-adventure: #3d7a6a;
  --hw-genre-action: #b85c28;
  --hw-genre-drama: #5c564e;
  --hw-genre-literary: #5c564e;
  --hw-genre-default: #8a8379;

  /* Nav aliases */
  --hw-nav-text: var(--hw-text);
  --hw-nav-text-soft: var(--hw-text-soft);
  --hw-nav-muted: var(--hw-muted);
  --hw-nav-flame: var(--hw-flame);
  --hw-nav-flame-light: var(--hw-flame-light);
  --hw-nav-gold: var(--hw-gold);
  --hw-nav-border: rgba(var(--hw-gold-rgb),  0.14);
  --hw-nav-glow: 0 0 10px rgba(var(--hw-text-rgb),  0.08);
  --hw-nav-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}

/*
 * Wide desktops: reserve side flanks for ads.
 * Content caps so it does not expand into --hw-ad-rail gutters.
 * Below 1680px, hubs use their normal stage max + page pad (ads typically hidden).
 */
@media (min-width: 1680px) {
  body:not(.hw-homepage-react-shell) .hw-homepage-shell,
  .hw-rk,
  .hw-library--v2,
  .hw-qb,
  .hw-arena,
  .hw-gb,
  .hw-suggestions.hw-suggestions--page,
  .hw-home-app.hw-stage--ad-aware {
    max-width: min(
      var(--hw-stage-content, 1600px),
      calc(100vw - 2 * var(--hw-ad-rail, 200px))
    ) !important;
  }

  .hw-home-app.hw-stage--ad-aware {
    max-width: min(
      var(--hw-stage-wide, 1680px),
      calc(100vw - 2 * var(--hw-ad-rail, 200px))
    ) !important;
    margin-inline: auto;
  }

  /* React homepage: full-bleed canvas — no boxed column / right-edge strip */
  body.hw-homepage-react-shell #hw-home-root,
  body.hw-homepage-react-shell .hw-homepage-shell,
  body.hw-homepage-react-shell .hw-home-app {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }

  body.hw-explore-page .hw-explore-shell {
    max-width: min(
      var(--hw-stage-wide, 1680px),
      calc(100vw - 2 * var(--hw-ad-rail, 200px))
    );
  }

  .hw-communities-hub.hw-communities-explore--commons {
    --hw-cex-stage-max: min(
      var(--hw-stage-max, 1920px),
      calc(100vw - 2 * var(--hw-ad-rail, 200px))
    );
  }
}

/* Scrollbars hidden by default — scroll still works. Opt in with .hw-show-scrollbar */
*,
*::before,
*::after {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.hw-show-scrollbar {
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
.hw-show-scrollbar::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  display: block !important;
}
.hw-show-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(var(--hw-flame-rgb),  0.4);
  border-radius: 999px;
}

/* ------------------------------------------------------------------
   Kadence accent remap — Customizer defaults to blue (#2B6CB0).
   Also injected after kadence-global inline CSS from functions.php so
   these win when both sheets print.
------------------------------------------------------------------ */
:root {
  --global-palette1: var(--hw-flame, #f97316);
  --global-palette2: color-mix(in srgb, var(--hw-flame, #f97316) 72%, #000);
  --global-palette12: color-mix(in srgb, var(--hw-flame, #f97316) 82%, #000);
  /* Link hover: soft cream/gold — not flame orange fills */
  --global-palette-highlight: var(--hw-gold, #fdba74);
  --global-palette-highlight-alt: var(--hw-text-soft, #ead6c2);
  --global-palette-btn-bg: var(--global-palette1);
  --global-palette-btn-bg-hover: var(--global-palette2);
  --global-palette-btn: var(--hw-text, #fff4e8);
  --global-palette-btn-hover: var(--hw-text-strong, #fff8ef);
  accent-color: var(--hw-gold, #fdba74);
}

/* ------------------------------------------------------------------
   Sitewide interactions — quiet cream lift on hover/focus.
   Primary CTAs keep flame fills; hover chrome is no longer orange glow.
------------------------------------------------------------------ */
body a:not(#wpadminbar a) {
  transition:
    color 0.18s ease,
    opacity 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.2s ease,
    filter 0.18s ease,
    transform 0.18s ease;
}

:where(
  button,
  .button,
  .wp-block-button__link,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .kb-button
):not(:disabled):not(#wpadminbar button) {
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    filter 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

:where(
  button,
  .button,
  .wp-block-button__link,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .kb-button
):not(:disabled):not(#wpadminbar button):not(.hw-featured-story-stack-card):hover {
  filter: none;
  transform: none;
  box-shadow: none;
}

/*
 * Kadence global.min.css paints every button/input orange on hover/focus/active:
 *   background: var(--global-palette-btn-bg-hover);
 *   color: var(--global-palette-btn-hover);
 * That fills whole rows when a <button> is used as a section (post bodies, chips).
 * Specificity stays below classed component hovers (e.g. .hw-btn--primary:hover).
 */
body button:hover,
body button:focus,
body button:active,
body .button:hover,
body .button:focus,
body .button:active,
body .wp-block-button__link:hover,
body .wp-block-button__link:focus,
body .wp-block-button__link:active,
body .wp-element-button:hover,
body .wp-element-button:focus,
body .wp-element-button:active,
body .kb-button:hover,
body .kb-button:focus,
body .kb-button:active,
body input[type="button"]:hover,
body input[type="button"]:focus,
body input[type="button"]:active,
body input[type="reset"]:hover,
body input[type="reset"]:focus,
body input[type="reset"]:active,
body input[type="submit"]:hover,
body input[type="submit"]:focus,
body input[type="submit"]:active {
  background: transparent;
  background-image: none;
  color: inherit;
  box-shadow: none;
}

body .hw-btn--primary:hover,
body .hw-btn--primary:focus,
body .hw-btn--primary:focus-visible,
body .hw-btn--primary:active,
body a.hw-btn--primary:hover,
body a.hw-btn--primary:focus,
body a.hw-btn--primary:active {
  background: var(--hw-flame-deep, var(--hw-accent-strong, #8f4027));
  background-image: none;
  color: #fff;
}

:where(
  .hw-global-nav__link--write,
  .hw-explore-run-search,
  .hw-explore-search-btn
):not(:disabled):hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(var(--hw-text-rgb),  0.06) inset;
}

:where(
  button,
  .button,
  .wp-block-button__link,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .kb-button
):not(:disabled):not(#wpadminbar button):not(.hw-featured-story-stack-card):active {
  filter: brightness(0.97);
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

:where(
  .hw-global-nav__link--write,
  .hw-explore-run-search,
  .hw-explore-search-btn
):not(:disabled):active {
  filter: brightness(0.97);
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

:where(
  a,
  button,
  .button,
  .wp-block-button__link,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  textarea,
  select,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):not(#wpadminbar *):focus-visible {
  outline: 2px solid rgba(var(--hw-text-rgb),  0.42);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(var(--hw-text-rgb),  0.06);
}

:where(
  a,
  button,
  .button,
  input,
  select,
  textarea
):not(#wpadminbar *):focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  :where(a):not(#wpadminbar a),
  :where(
    button,
    .button,
    .wp-block-button__link,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .kb-button
  ) {
    transition: none;
  }

  :where(
    button,
    .button,
    .wp-block-button__link,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .kb-button
  ):not(:disabled):hover,
  :where(
    button,
    .button,
    .wp-block-button__link,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .kb-button
  ):not(:disabled):active {
    transform: none;
  }
}

/* Progression tier title — shown beside usernames when opted in */
.hw-prog-title {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-family: var(--hw-font-display, "Playfair Display", Georgia, serif);
  font-size: 0.52em;
  font-weight: 650;
  letter-spacing: 0.05em;
  line-height: 1.2;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: middle;
}

.hw-prog-title--nav {
  display: inline-block;
  width: auto;
  max-width: none;
  margin-top: 0;
  font-size: 0.68rem;
  flex: 0 0 auto;
}

/* Wanderer tiers */
.hw-prog-title--kindling { color: #d4b896; background: rgba(212, 184, 150, 0.12); border-color: rgba(212, 184, 150, 0.45); }
.hw-prog-title--pathfinder { color: #9ec9e8; background: rgba(126, 184, 212, 0.14); border-color: rgba(126, 184, 212, 0.42); }
.hw-prog-title--hearthguest { color: #a8d4b4; background: rgba(142, 184, 150, 0.14); border-color: rgba(142, 184, 150, 0.42); }
.hw-prog-title--lorebound { color: #d4b0e8; background: rgba(201, 160, 220, 0.14); border-color: rgba(201, 160, 220, 0.42); }
.hw-prog-title--chronicle-keeper { color: #f0c14b; background: rgba(240, 193, 75, 0.14); border-color: rgba(240, 193, 75, 0.5); box-shadow: 0 0 12px rgba(240, 193, 75, 0.12); }

/* Emberwright tiers */
.hw-prog-title--ember-spark { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.45); }
.hw-prog-title--rising-flame { color: var(--hw-flame-light, #fb923c); background: rgba(var(--hw-flame-rgb),  0.14); border-color: rgba(var(--hw-flame-rgb),  0.48); }
.hw-prog-title--established-hearth { color: var(--hw-flame, #f97316); background: rgba(var(--hw-flame-deep-rgb),  0.14); border-color: rgba(var(--hw-flame-deep-rgb),  0.5); }
.hw-prog-title--hearthbound { color: #fca5a5; background: rgba(var(--hw-red-rgb),  0.14); border-color: rgba(var(--hw-red-rgb),  0.45); }
.hw-prog-title--legend-ember { color: #fde68a; background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(var(--hw-flame-rgb),  0.16)); border-color: rgba(253, 224, 138, 0.55); box-shadow: 0 0 14px rgba(var(--hw-flame-rgb),  0.16); }

/* ------------------------------------------------------------------
   Neutral hover/focus — secondary chrome only (no orange glow rings).
   Primary CTAs (Write, gold search submit) keep their fills.
------------------------------------------------------------------ */
:root {
  --hw-interact-hover-border: rgba(var(--hw-text-rgb),  0.28);
  --hw-interact-hover-bg: rgba(var(--hw-text-rgb),  0.06);
  --hw-interact-active-border: rgba(var(--hw-text-rgb),  0.38);
  --hw-interact-active-bg: rgba(var(--hw-text-rgb),  0.1);
}

:where(
  .hw-explore-shell,
  .hw-explore-page,
  .hw-global-nav,
  .hw-nav-search,
  .hw-site-header,
  .hw-profile-shell,
  .hw-story-page
) button:not(:disabled):not(.hw-global-nav__link--write):not(.hw-explore-run-search):not(.hw-explore-search-btn):hover,
:where(
  .hw-explore-shell,
  .hw-explore-page,
  .hw-global-nav,
  .hw-nav-search,
  .hw-site-header,
  .hw-profile-shell,
  .hw-story-page
) button:not(:disabled):not(.hw-global-nav__link--write):not(.hw-explore-run-search):not(.hw-explore-search-btn):active {
  filter: none;
  transform: none;
  box-shadow: none;
}

body.hw-explore-page .hw-explore-lane:hover,
body.hw-explore-page .hw-explore-pill:hover:not(.is-active),
body.hw-explore-page .hw-explore-tags-open:hover,
body.hw-explore-page .hw-explore-tags-open--genre:hover,
body.hw-explore-page .hw-explore-filters-btn:hover,
body.hw-explore-page .hw-explore-filters-btn:focus-visible,
body.hw-explore-page .hw-explore-reset-all:hover,
body.hw-explore-page .hw-explore-edit-filters:hover,
body.hw-explore-page .hw-explore-clear-all:hover,
body.hw-explore-page .hw-explore-chip-remove:hover {
  border-color: var(--hw-interact-hover-border);
  background-color: #23150f;
  background-image: none;
  color: var(--hw-text, #fff4e8);
  box-shadow: none;
  filter: none;
}

body.hw-explore-page .hw-explore-pill.is-active,
body.hw-explore-page .hw-explore-lane.is-active {
  border-color: rgba(var(--hw-gold-rgb),  0.72);
  background: linear-gradient(180deg, rgba(var(--hw-gold-rgb),  0.26), rgba(var(--hw-gold-rgb),  0.1));
  color: var(--hw-text-strong, #fff8ef);
  box-shadow: inset 0 0 0 1px rgba(var(--hw-gold-rgb),  0.32);
}

body.hw-explore-page .hw-explore-topbar-right .hw-explore-top-sort > select.hw-explore-select.hw-explore-select--compact[data-hw-sort]:hover,
body.hw-explore-page .hw-explore-topbar-right .hw-explore-top-sort > select.hw-explore-select.hw-explore-select--compact[data-hw-sort]:focus {
  border-color: var(--hw-interact-hover-border);
  box-shadow: none;
  outline: none;
}

body.hw-explore-page .hw-explore-filters-modal.is-filters-highlight .hw-explore-filters-modal__panel {
  box-shadow: 0 0 0 1px var(--hw-interact-hover-border), 0 24px 64px rgba(0, 0, 0, 0.5);
}

body.hw-explore-page .hw-explore-tag-card[data-state="neutral"]:hover,
body.hw-explore-page .hw-explore-tags-nav-item:hover,
body.hw-explore-page .hw-explore-tags-modal__close:hover,
body.hw-explore-page .hw-explore-tags-btn:not(.hw-explore-tags-btn--primary):hover,
body.hw-explore-page .hw-explore-match-toggle button.is-active {
  border-color: var(--hw-interact-hover-border);
  background: var(--hw-interact-hover-bg);
  color: var(--hw-text, #fff4e8);
  box-shadow: none;
  filter: none;
  transform: none;
}

body.hw-explore-page .hw-explore-shell button.hw-explore-advanced-toggle:hover,
body.hw-explore-page .hw-explore-shell button.hw-explore-advanced-toggle:focus-visible {
  border-color: var(--hw-interact-hover-border);
  background: var(--hw-interact-hover-bg);
  color: var(--hw-text-strong, #fff8ef);
  box-shadow: none;
  filter: none;
  transform: none;
  outline: none;
}

body.hw-explore-page .hw-explore-tags-nav-item.is-active {
  border-color: var(--hw-interact-active-border);
  background: var(--hw-interact-active-bg);
  color: var(--hw-text, #fff4e8);
  box-shadow: none;
}

.hw-story-page .hw-toc-volume-tab:hover,
.hw-story-page .hw-toc-volume-tab.is-active {
  border-color: var(--hw-interact-hover-border);
  background: var(--hw-interact-hover-bg);
  color: var(--hw-text, #fff4e8);
  box-shadow: none;
}

/* Nav search — expanded/collapsed controls stay neutral on hover/focus */
.hw-nav-search .hw-nav-search__button:hover,
.hw-nav-search .hw-nav-search__button:focus-visible,
.hw-nav-search .hw-nav-search__clear:hover,
.hw-nav-search .hw-nav-search__clear:focus-visible,
.hw-nav-search__mobile-trigger:hover,
.hw-nav-search__mobile-trigger:focus-visible {
  filter: none;
  transform: none;
  box-shadow: none;
  color: var(--hw-nav-text, var(--hw-text, #fff4e8));
  background: rgba(var(--hw-text-rgb),  0.07);
  border-color: rgba(var(--hw-text-rgb),  0.22);
  outline: none;
}

.hw-site-header .hw-nav-search__shell:hover,
.hw-site-header .hw-nav-search__shell:focus-within,
.hw-nav-search--embedded .hw-nav-search__shell:hover,
.hw-nav-search--embedded .hw-nav-search__shell:focus-within {
  border-color: rgba(var(--hw-text-rgb),  0.28);
  box-shadow:
    inset 0 1px 0 rgba(var(--hw-text-rgb),  0.06),
    0 8px 24px rgba(0, 0, 0, 0.28);
}