/**
 * Base layer: fonts, resets, page wrapper, and shared utility classes.
 * Values mirror the React app: src/themes/* (MUI theme),
 * React app src/Common/GlobalStyle/GlobalStyle.css, MUI CssBaseline and the
 * antd reset.css that React loads globally.
 */

/* Public Sans variable font (SIL OFL), self-hosted copy of the Google Fonts files React loads.
   React requests weights 400-700 only, so lighter weights render as 400 and heavier as 700. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto variable font (SIL OFL), self-hosted copy of the Google Fonts files React loads.
   The antd font stack (--ant-font in account.css) names Roboto, so React's antd text renders
   in this webfont. React declares fixed weights 400, 500 and 700 (so 600, e.g. antd table
   headers, resolves to 700); the same fixed faces are declared here. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --primary: #32beb9;
  --primary-hover: #59e7e3;
  --text-color: #f7f7f7;
  --background: #121212;
  --text-color-second: #57c4c1;
  --error: #ff4d4f;
  /* Declared by React's .wrapper but never loaded there, so the system sans-serif renders. */
  --font-family: 'Source Sans Pro', sans-serif;
  /* MUI theme typography font. */
  --mui-font: 'Public Sans', sans-serif;
  --shadow-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --shadow-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

/* Motion (policy native-ui-motion-eased-show-hide-v2): elements toggled with the hidden attribute
   ease in and out. .motion-pop is for popups, dropdowns and menus (fade plus a short slide);
   .motion-reveal is for sections that expand or collapse in the page flow (height 0 to auto plus
   fade); .motion-fade (fade only) is for full-screen modal roots and blocks whose children overhang
   their edges. @starting-style also fires on first render, so only elements hidden at page load
   or newly inserted ones carry these classes. */
:root {
  interpolate-size: allow-keywords;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-in: 220ms;
  --motion-out: 150ms;
}
.motion-pop {
  transition: opacity var(--motion-in) var(--motion-ease-out), translate var(--motion-in) var(--motion-ease-out), display var(--motion-in) allow-discrete;
}
.motion-pop[hidden] {
  display: none;
  pointer-events: none;
  opacity: 0;
  translate: 0 -6px;
  transition-duration: var(--motion-out);
  transition-timing-function: var(--motion-ease-in);
}
@starting-style {
  .motion-pop { opacity: 0; translate: 0 -6px; }
}
/* Fade only: modal roots (a slide would show the backdrop's edge) and overhanging blocks. */
.motion-fade {
  transition: opacity var(--motion-in) var(--motion-ease-out), display var(--motion-in) allow-discrete;
}
.motion-fade[hidden] {
  display: none;
  pointer-events: none;
  opacity: 0;
  transition-duration: var(--motion-out);
  transition-timing-function: var(--motion-ease-in);
}
@starting-style {
  .motion-fade { opacity: 0; }
}
.motion-reveal {
  overflow: clip;
  /* Outlines, floating labels and badges that sit a few px outside the box still paint. */
  overflow-clip-margin: 8px;
  transition: height var(--motion-in) var(--motion-ease-out), opacity var(--motion-in) var(--motion-ease-out), display var(--motion-in) allow-discrete;
}
.motion-reveal[hidden] {
  display: none;
  pointer-events: none;
  height: 0;
  opacity: 0;
  transition-duration: var(--motion-out);
  transition-timing-function: var(--motion-ease-in);
}
@starting-style {
  .motion-reveal { height: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-in: 0s; --motion-out: 0s; }
}

/* Close / clear / remove X (Joshua's pick 2026-10-27, style 5): a solid teal disc with a dark rounded
   X (icons.svg#x-close). .x-btn is 30 px; .x-btn--sm (22 px) is for chips and small fields.
   :not(#\#) lifts the rule above component rules, so each component keeps only its placement
   (position, margin) and every X looks the same. */
.x-btn:not(#\#) {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #32beb9;
  color: #062a28;
  opacity: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 150ms var(--motion-ease-out), opacity var(--motion-in) var(--motion-ease-out), display var(--motion-in) allow-discrete;
}
/* The raised specificity above would otherwise beat [hidden] and the .motion-fade fade. */
.x-btn[hidden]:not(#\#) { display: none; opacity: 0; transition-duration: var(--motion-out); }
@starting-style {
  .x-btn.motion-fade:not(#\#) { opacity: 0; }
}
.x-btn:not(#\#):hover { background: #59e7e3; }
.x-btn:not(#\#):focus-visible { outline: 2px solid #f7f7f7; outline-offset: 2px; }
.x-btn:not(#\#):disabled { background: #3a4040; color: #8c9494; cursor: default; }
.x-btn:not(#\#) svg { width: 16px; height: 16px; font-size: 16px; margin: 0; color: inherit; fill: none; }
.x-btn--sm:not(#\#) { width: 22px; height: 22px; }
.x-btn--sm:not(#\#) svg { width: 12px; height: 12px; font-size: 12px; }
/* .x-btn--esc: on desktop with a mouse, an "Esc" label left of the disc, only on closes that Escape
   also closes (Joshua liked it in the style 10 mockup, 2026-10-27). */
.x-btn--esc:not(#\#) { position: relative; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .x-btn--esc:not(#\#)::before {
    content: "Esc";
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    color: #8c9494;
    font: 600 11px/1 var(--font-family);
    letter-spacing: 0.05em;
    pointer-events: none;
  }
}

/* antd reset.css + MUI CssBaseline */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  color: #262626;
  background-color: #000000;
  font-family: var(--mui-font);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.57;
}
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5em; font-weight: 500; }
p, ul, ol { margin-top: 0; margin-bottom: 1em; }
a { color: inherit; }
button { font: inherit; }
strong, b { font-weight: 700; }

/* React GlobalStyle.css */
.wrapper {
  font-family: var(--font-family);
  color: var(--text-color);
  background: var(--background);
  min-height: 100vh;
  font-size: 1rem;
  font-weight: 400;
  overflow-x: hidden;
}
.wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, .wrapper h5, .wrapper h6, .wrapper p { margin: 0; }
.wrapper input { border: none; outline: none; }
.wrapper a { cursor: pointer; }

.layout {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.layout__main { flex: 1; }

.custom-button { opacity: 1; transition: 200ms all ease; cursor: pointer; }
.custom-button:hover { opacity: 0.8; }
.custom-button:active { opacity: 0.95; }
.noselect { user-select: none; }

/* MUI Typography variants (themes/typography.js). */
.mui-h1 { font-family: var(--mui-font); font-weight: 600; font-size: 2.375rem; line-height: 1.21; }
.mui-h2 { font-family: var(--mui-font); font-weight: 600; font-size: 1.875rem; line-height: 1.27; }
.mui-h3 { font-family: var(--mui-font); font-weight: 600; font-size: 1.5rem; line-height: 1.33; }
.mui-h4 { font-family: var(--mui-font); font-weight: 600; font-size: 1.25rem; line-height: 1.4; }
.mui-h5 { font-family: var(--mui-font); font-weight: 600; font-size: 1rem; line-height: 1.5; }
.mui-h6 { font-family: var(--mui-font); font-weight: 400; font-size: 0.875rem; line-height: 1.57; }
.mui-body1 { font-family: var(--mui-font); font-weight: 400; font-size: 0.875rem; line-height: 1.57; }
.mui-body2 { font-family: var(--mui-font); font-weight: 400; font-size: 0.75rem; line-height: 1.66; }
.mui-caption { font-family: var(--mui-font); font-weight: 400; font-size: 0.75rem; line-height: 1.66; }

/* Fluid type classes (GlobalStyle.css). Declared after .mui-* so they win, as in React. */
.text-size-h1 { font-size: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); line-height: 1.21; font-weight: 600; }
.text-size-h2 { font-size: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem); line-height: 1.27; font-weight: 600; }
.text-size-h3 { font-size: clamp(1.56rem, 1vw + 1.31rem, 2.11rem); line-height: 1.33; font-weight: 500; }
.text-size-h4 { font-size: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem); line-height: 1.4; font-weight: 400; }
.text-size-h5 { font-size: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); line-height: 1.5; font-weight: 300; }
.text-size-h6 { font-size: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem); line-height: 1.57; font-weight: 300; }
.text-size-h7 { font-size: clamp(0.7rem, 0.17vw + 0.76rem, 0.76rem); line-height: 1.57; font-weight: 300; }

/* Icons from images/icons.svg. MUI SvgIcon defaults: 1em box (1.5rem), currentColor. */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex-shrink: 0;
  fill: currentColor;
  font-size: 1.5rem;
  user-select: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* MUI Backdrop used by drawers and modals. */
.backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
[data-open] > .backdrop { opacity: 1; }

/* Toasts (not React's top-center react-toastify look): a dark panel that drops from
   beneath the header so the header icons stay visible. js/shell.js keeps the container's
   top at the header's bottom edge (0 once the header has scrolled away). Structure and
   icons follow components/CustomToast. Add-to-cart success uses flyToCart instead. */
.toast-container {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  padding: 0 0 16px;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--text-color);
  pointer-events: none;
}
.toast {
  --toast-accent: var(--primary);
  position: relative;
  display: flex;
  justify-content: space-between;
  max-height: 800px;
  margin-bottom: 8px;
  padding: 6px 4px 6px 8px;
  overflow: hidden;
  border: 1px solid #2e3333;
  border-top: 2px solid var(--toast-accent);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  background: #1c1c1c;
  color: var(--text-color);
  font-family: var(--mui-font);
  font-size: 0.875rem;
  line-height: 1.43;
  cursor: pointer;
  direction: ltr;
  pointer-events: auto;
  animation: toast-drop 220ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes toast-drop { from { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.toast__body { display: flex; flex: 1 1 auto; align-items: center; margin: auto 0; padding: 6px; }
.toast__body > div:last-child { flex: 1; word-break: break-word; }
.toast__icon { display: flex; flex-shrink: 0; width: 20px; margin-inline-end: 10px; }
.toast__icon svg { width: 100%; height: 100%; }
.toast--warn { --toast-accent: #f1c40f; }
.toast--error { --toast-accent: #e74c3c; }
.toast--info { --toast-accent: #3498db; }
.toast__icon { fill: var(--toast-accent); }
/* Look comes from .x-btn--sm; only placement here. */
.toast__close { align-self: flex-start; margin: 2px 0 0 8px; }
@media only screen and (max-width: 480px) {
  .toast-container { width: 100vw; left: 0; transform: none; }
  .toast { margin-bottom: 0; border-right: 0; border-left: 0; border-radius: 0; }
}