/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-scroll-snap-strictness: proximity;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Outfit", system-ui, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-orange-50: oklch(98% .016 73.684);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-green-800: oklch(44.8% .119 151.328);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-800: oklch(43.2% .095 166.913);
    --color-teal-50: oklch(98.4% .014 180.72);
    --color-teal-100: oklch(95.3% .051 180.801);
    --color-teal-200: oklch(91% .096 180.426);
    --color-teal-300: oklch(85.5% .138 181.071);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-teal-700: oklch(51.1% .096 186.391);
    --color-teal-800: oklch(43.7% .078 188.216);
    --color-teal-950: oklch(27.7% .046 192.524);
    --color-sky-50: oklch(97.7% .013 236.62);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-sky-700: oklch(50% .134 242.749);
    --color-sky-800: oklch(44.3% .11 240.79);
    --color-fuchsia-700: oklch(51.8% .253 323.949);
    --color-rose-100: oklch(94.1% .03 12.58);
    --color-rose-600: oklch(58.6% .253 17.585);
    --color-rose-700: oklch(51.4% .222 16.935);
    --color-stone-50: oklch(98.5% .001 106.423);
    --color-stone-100: oklch(97% .001 106.424);
    --color-stone-200: oklch(92.3% .003 48.717);
    --color-stone-300: oklch(86.9% .005 56.366);
    --color-stone-400: oklch(70.9% .01 56.259);
    --color-stone-500: oklch(55.3% .013 58.071);
    --color-stone-600: oklch(44.4% .011 73.639);
    --color-stone-700: oklch(37.4% .01 67.558);
    --color-stone-800: oklch(26.8% .007 34.298);
    --color-stone-900: oklch(21.6% .006 56.043);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-md: 12px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-primary: #ff8a1a;
    --color-primary-dark: #e07010;
    --color-primary-light: #ffd36a;
    --color-accent: #3ec6ff;
    --color-surface: #070a14;
    --color-surface-warm: #10182c;
    --color-elevated: #18223c;
    --color-ink: #f4f7ff;
    --color-muted: #9aa6c4;
    --color-border: #ffffff1a;
    --font-display: "Syne", "Outfit", system-ui, sans-serif;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-x-0 {
    inset-inline: 0;
  }

  .inset-x-1\.5 {
    inset-inline: calc(var(--spacing) * 1.5);
  }

  .inset-x-3 {
    inset-inline: calc(var(--spacing) * 3);
  }

  .inset-y-0 {
    inset-block: 0;
  }

  .-start-24 {
    inset-inline-start: calc(var(--spacing) * -24);
  }

  .-start-\[27px\] {
    inset-inline-start: -27px;
  }

  .start-0 {
    inset-inline-start: calc(var(--spacing) * 0);
  }

  .start-1 {
    inset-inline-start: calc(var(--spacing) * 1);
  }

  .start-1\.5 {
    inset-inline-start: calc(var(--spacing) * 1.5);
  }

  .start-2 {
    inset-inline-start: calc(var(--spacing) * 2);
  }

  .start-3 {
    inset-inline-start: calc(var(--spacing) * 3);
  }

  .start-4 {
    inset-inline-start: calc(var(--spacing) * 4);
  }

  .start-6 {
    inset-inline-start: calc(var(--spacing) * 6);
  }

  .start-10 {
    inset-inline-start: calc(var(--spacing) * 10);
  }

  .-end-0\.5 {
    inset-inline-end: calc(var(--spacing) * -.5);
  }

  .-end-16 {
    inset-inline-end: calc(var(--spacing) * -16);
  }

  .-end-20 {
    inset-inline-end: calc(var(--spacing) * -20);
  }

  .end-0 {
    inset-inline-end: calc(var(--spacing) * 0);
  }

  .end-2 {
    inset-inline-end: calc(var(--spacing) * 2);
  }

  .end-4 {
    inset-inline-end: calc(var(--spacing) * 4);
  }

  .-top-0\.5 {
    top: calc(var(--spacing) * -.5);
  }

  .-top-24 {
    top: calc(var(--spacing) * -24);
  }

  .top-0 {
    top: 0;
  }

  .top-1 {
    top: var(--spacing);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-full {
    top: 100%;
  }

  .-bottom-16 {
    bottom: calc(var(--spacing) * -16);
  }

  .-bottom-28 {
    bottom: calc(var(--spacing) * -28);
  }

  .bottom-0 {
    bottom: 0;
  }

  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }

  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-24 {
    bottom: calc(var(--spacing) * 24);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[4\] {
    z-index: 4;
  }

  .z-\[5\] {
    z-index: 5;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .float-end {
    float: inline-end;
  }

  .mx-1 {
    margin-inline: var(--spacing);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .ms-1 {
    margin-inline-start: var(--spacing);
  }

  .ms-1\.5 {
    margin-inline-start: calc(var(--spacing) * 1.5);
  }

  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }

  .ms-3 {
    margin-inline-start: calc(var(--spacing) * 3);
  }

  .ms-7 {
    margin-inline-start: calc(var(--spacing) * 7);
  }

  .ms-8 {
    margin-inline-start: calc(var(--spacing) * 8);
  }

  .ms-auto {
    margin-inline-start: auto;
  }

  .me-1 {
    margin-inline-end: var(--spacing);
  }

  .me-2 {
    margin-inline-end: calc(var(--spacing) * 2);
  }

  .me-8 {
    margin-inline-end: calc(var(--spacing) * 8);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }

  .mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-1 {
    margin-bottom: var(--spacing);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .aspect-\[3\/4\] {
    aspect-ratio: 3 / 4;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .\!h-11 {
    height: calc(var(--spacing) * 11) !important;
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-52 {
    height: calc(var(--spacing) * 52);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-72 {
    height: calc(var(--spacing) * 72);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-\[calc\(100vh-13rem\)\] {
    height: calc(100vh - 13rem);
  }

  .h-\[min\(560px\,75vh\)\] {
    height: min(560px, 75vh);
  }

  .h-fit {
    height: fit-content;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-28 {
    max-height: calc(var(--spacing) * 28);
  }

  .max-h-32 {
    max-height: calc(var(--spacing) * 32);
  }

  .max-h-36 {
    max-height: calc(var(--spacing) * 36);
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-\[85vh\] {
    max-height: 85vh;
  }

  .max-h-\[86vh\] {
    max-height: 86vh;
  }

  .min-h-0 {
    min-height: 0;
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-\[42px\] {
    min-height: 42px;
  }

  .min-h-\[44px\] {
    min-height: 44px;
  }

  .min-h-\[140px\] {
    min-height: 140px;
  }

  .min-h-\[520px\] {
    min-height: 520px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .\!w-20 {
    width: calc(var(--spacing) * 20) !important;
  }

  .\!w-24 {
    width: calc(var(--spacing) * 24) !important;
  }

  .\!w-56 {
    width: calc(var(--spacing) * 56) !important;
  }

  .\!w-60 {
    width: calc(var(--spacing) * 60) !important;
  }

  .\!w-64 {
    width: calc(var(--spacing) * 64) !important;
  }

  .\!w-auto {
    width: auto !important;
  }

  .w-1 {
    width: var(--spacing);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-\[min\(370px\,calc\(100vw-2rem\)\)\] {
    width: min(370px, 100vw - 2rem);
  }

  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-\[8\.5rem\] {
    max-width: 8.5rem;
  }

  .max-w-\[78\%\] {
    max-width: 78%;
  }

  .max-w-\[85\%\] {
    max-width: 85%;
  }

  .max-w-\[160px\] {
    max-width: 160px;
  }

  .max-w-\[180px\] {
    max-width: 180px;
  }

  .max-w-\[220px\] {
    max-width: 220px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-4 {
    min-width: calc(var(--spacing) * 4);
  }

  .min-w-11 {
    min-width: calc(var(--spacing) * 11);
  }

  .min-w-\[90px\] {
    min-width: 90px;
  }

  .min-w-\[120px\] {
    min-width: 120px;
  }

  .min-w-\[140px\] {
    min-width: 140px;
  }

  .min-w-\[150px\] {
    min-width: 150px;
  }

  .min-w-\[190px\] {
    min-width: 190px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .min-w-\[620px\] {
    min-width: 620px;
  }

  .min-w-\[820px\] {
    min-width: 820px;
  }

  .min-w-\[900px\] {
    min-width: 900px;
  }

  .min-w-\[980px\] {
    min-width: 980px;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-3 {
    --tw-translate-y: calc(var(--spacing) * 3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-scale-x-100 {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .cursor-zoom-in {
    cursor: zoom-in;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }

  .snap-start {
    scroll-snap-align: start;
  }

  .list-disc {
    list-style-type: disc;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-items-center {
    justify-items: center;
  }

  .gap-0 {
    gap: 0;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-\[3px\] {
    gap: 3px;
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  :where(.-space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -3) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-\[\#2a211c\]\/6 > :not(:last-child)) {
    border-color: oklab(25.655% .0105557 .0128908 / .06);
  }

  :where(.divide-\[\#2a211c\]\/8 > :not(:last-child)) {
    border-color: oklab(25.655% .0105557 .0128908 / .08);
  }

  :where(.divide-border > :not(:last-child)) {
    border-color: var(--color-border);
  }

  .self-center {
    align-self: center;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[2\.4rem\] {
    border-radius: 2.4rem;
  }

  .rounded-\[2rem\] {
    border-radius: 2rem;
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-ss-sm {
    border-start-start-radius: var(--radius-sm);
  }

  .rounded-se-sm {
    border-start-end-radius: var(--radius-sm);
  }

  .rounded-t-3xl {
    border-top-left-radius: var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[10px\] {
    border-style: var(--tw-border-style);
    border-width: 10px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-s {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 1px;
  }

  .border-s-2 {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 2px;
  }

  .border-s-4 {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 4px;
  }

  .border-e {
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .\!border-\[\#2a211c\]\/15 {
    border-color: oklab(25.655% .0105557 .0128908 / .15) !important;
  }

  .\!border-\[\#a83a2e\] {
    border-color: #a83a2e !important;
  }

  .\!border-\[\#a86e56\] {
    border-color: #a86e56 !important;
  }

  .\!border-\[\#e07a6c\]\/40 {
    border-color: oklab(69.0191% .113041 .0626348 / .4) !important;
  }

  .border-\[\#1f1813\] {
    border-color: #1f1813;
  }

  .border-\[\#2a211c\] {
    border-color: #2a211c;
  }

  .border-\[\#2a211c\]\/6 {
    border-color: oklab(25.655% .0105557 .0128908 / .06);
  }

  .border-\[\#2a211c\]\/8 {
    border-color: oklab(25.655% .0105557 .0128908 / .08);
  }

  .border-\[\#2a211c\]\/10 {
    border-color: oklab(25.655% .0105557 .0128908 / .1);
  }

  .border-\[\#2a211c\]\/12 {
    border-color: oklab(25.655% .0105557 .0128908 / .12);
  }

  .border-\[\#2a211c\]\/15 {
    border-color: oklab(25.655% .0105557 .0128908 / .15);
  }

  .border-\[\#2a211c\]\/20 {
    border-color: oklab(25.655% .0105557 .0128908 / .2);
  }

  .border-\[\#8a7d74\] {
    border-color: #8a7d74;
  }

  .border-\[\#704438\] {
    border-color: #704438;
  }

  .border-\[\#a83a2e\]\/25 {
    border-color: oklab(50.401% .128051 .0721342 / .25);
  }

  .border-\[\#a83a2e\]\/30 {
    border-color: oklab(50.401% .128051 .0721342 / .3);
  }

  .border-\[\#a86e56\] {
    border-color: #a86e56;
  }

  .border-\[\#a86e56\]\/30 {
    border-color: oklab(59.3868% .0600029 .056387 / .3);
  }

  .border-\[\#a86e56\]\/40 {
    border-color: oklab(59.3868% .0600029 .056387 / .4);
  }

  .border-\[\#b07d1a\] {
    border-color: #b07d1a;
  }

  .border-\[\#e2c79f\] {
    border-color: #e2c79f;
  }

  .border-\[\#e5d8c8\] {
    border-color: #e5d8c8;
  }

  .border-\[\#e7ddd0\] {
    border-color: #e7ddd0;
  }

  .border-\[\#ff3b00\] {
    border-color: #ff3b00;
  }

  .border-\[var\(--border\)\] {
    border-color: var(--border);
  }

  .border-accent\/30 {
    border-color: #3ec6ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-accent\/30 {
      border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
    }
  }

  .border-black\/5 {
    border-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/5 {
      border-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .border-border {
    border-color: var(--color-border);
  }

  .border-primary {
    border-color: var(--color-primary);
  }

  .border-primary\/15 {
    border-color: #ff8a1a26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/15 {
      border-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
    }
  }

  .border-primary\/30 {
    border-color: #ff8a1a4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30 {
      border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
    }
  }

  .border-primary\/40 {
    border-color: #ff8a1a66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/40 {
      border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
    }
  }

  .border-red-300 {
    border-color: var(--color-red-300);
  }

  .border-stone-100 {
    border-color: var(--color-stone-100);
  }

  .border-stone-200 {
    border-color: var(--color-stone-200);
  }

  .border-stone-300 {
    border-color: var(--color-stone-300);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-white\/10 {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/15 {
    border-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/15 {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .\!border-s-\[\#a83a2e\] {
    border-inline-start-color: #a83a2e !important;
  }

  .\!bg-white {
    background-color: var(--color-white) !important;
  }

  .bg-\[\#0B3D3A\] {
    background-color: #0b3d3a;
  }

  .bg-\[\#0b1224\] {
    background-color: #0b1224;
  }

  .bg-\[\#0b1224\]\/70 {
    background-color: oklab(18.603% -.00225321 -.0383936 / .7);
  }

  .bg-\[\#0c1220\] {
    background-color: #0c1220;
  }

  .bg-\[\#1f1813\] {
    background-color: #1f1813;
  }

  .bg-\[\#2a211c\] {
    background-color: #2a211c;
  }

  .bg-\[\#2a211c\]\/5 {
    background-color: oklab(25.655% .0105557 .0128908 / .05);
  }

  .bg-\[\#2a211c\]\/10 {
    background-color: oklab(25.655% .0105557 .0128908 / .1);
  }

  .bg-\[\#2a211c\]\/40 {
    background-color: oklab(25.655% .0105557 .0128908 / .4);
  }

  .bg-\[\#2f7a45\] {
    background-color: #2f7a45;
  }

  .bg-\[\#2f7a45\]\/40 {
    background-color: oklab(51.8535% -.0967363 .0551116 / .4);
  }

  .bg-\[\#2f7a45\]\/70 {
    background-color: oklab(51.8535% -.0967363 .0551116 / .7);
  }

  .bg-\[\#8f2f25\] {
    background-color: #8f2f25;
  }

  .bg-\[\#25d366\] {
    background-color: #25d366;
  }

  .bg-\[\#070a14\] {
    background-color: #070a14;
  }

  .bg-\[\#070a14\]\/85 {
    background-color: oklab(14.6936% -.000202119 -.022473 / .85);
  }

  .bg-\[\#070a14\]\/95 {
    background-color: oklab(14.6936% -.000202119 -.022473 / .95);
  }

  .bg-\[\#120e0b\] {
    background-color: #120e0b;
  }

  .bg-\[\#1877f2\] {
    background-color: #1877f2;
  }

  .bg-\[\#10182c\] {
    background-color: #10182c;
  }

  .bg-\[\#166534\] {
    background-color: #166534;
  }

  .bg-\[\#704438\] {
    background-color: #704438;
  }

  .bg-\[\#704438\]\/10 {
    background-color: oklab(43.5059% .0521221 .0378928 / .1);
  }

  .bg-\[\#a83a2e\] {
    background-color: #a83a2e;
  }

  .bg-\[\#a83a2e\]\/40 {
    background-color: oklab(50.401% .128051 .0721342 / .4);
  }

  .bg-\[\#a86e56\] {
    background-color: #a86e56;
  }

  .bg-\[\#a86e56\]\/12 {
    background-color: oklab(59.3868% .0600029 .056387 / .12);
  }

  .bg-\[\#a2541b\] {
    background-color: #a2541b;
  }

  .bg-\[\#c08a4a\] {
    background-color: #c08a4a;
  }

  .bg-\[\#c9966e\]\/20 {
    background-color: oklab(71.2413% .042186 .0703856 / .2);
  }

  .bg-\[\#d49a00\] {
    background-color: #d49a00;
  }

  .bg-\[\#dcf3e0\] {
    background-color: #dcf3e0;
  }

  .bg-\[\#e2c79f\] {
    background-color: #e2c79f;
  }

  .bg-\[\#e2c79f\]\/10 {
    background-color: oklab(84.2583% .013257 .059696 / .1);
  }

  .bg-\[\#e6f4ea\] {
    background-color: #e6f4ea;
  }

  .bg-\[\#eef2fb\] {
    background-color: #eef2fb;
  }

  .bg-\[\#eef8f0\] {
    background-color: #eef8f0;
  }

  .bg-\[\#efe1cf\] {
    background-color: #efe1cf;
  }

  .bg-\[\#efe6da\] {
    background-color: #efe6da;
  }

  .bg-\[\#f0e7dc\] {
    background-color: #f0e7dc;
  }

  .bg-\[\#f4ebdf\] {
    background-color: #f4ebdf;
  }

  .bg-\[\#f6efe6\] {
    background-color: #f6efe6;
  }

  .bg-\[\#f7f1e8\] {
    background-color: #f7f1e8;
  }

  .bg-\[\#f7f3ee\] {
    background-color: #f7f3ee;
  }

  .bg-\[\#faf6f0\] {
    background-color: #faf6f0;
  }

  .bg-\[\#fbe7e5\] {
    background-color: #fbe7e5;
  }

  .bg-\[\#fbf3ea\] {
    background-color: #fbf3ea;
  }

  .bg-\[\#fbf7f1\] {
    background-color: #fbf7f1;
  }

  .bg-\[\#fdeee2\] {
    background-color: #fdeee2;
  }

  .bg-\[\#fff3d6\] {
    background-color: #fff3d6;
  }

  .bg-\[\#fff8e6\] {
    background-color: #fff8e6;
  }

  .bg-\[\#fffdf9\] {
    background-color: #fffdf9;
  }

  .bg-\[\#fffdf9\]\/90 {
    background-color: oklab(99.447% .000539064 .00566727 / .9);
  }

  .bg-\[\#fffdf9\]\/95 {
    background-color: oklab(99.447% .000539064 .00566727 / .95);
  }

  .bg-\[var\(--input-bg\)\] {
    background-color: var(--input-bg);
  }

  .bg-accent {
    background-color: var(--color-accent);
  }

  .bg-accent\/5 {
    background-color: #3ec6ff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent\/5 {
      background-color: color-mix(in oklab, var(--color-accent) 5%, transparent);
    }
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-amber-500\/10 {
    background-color: #f99c001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/10 {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .bg-black\/40 {
    background-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/40 {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/90 {
    background-color: #000000e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/90 {
      background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
    }
  }

  .bg-border {
    background-color: var(--color-border);
  }

  .bg-elevated {
    background-color: var(--color-elevated);
  }

  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }

  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }

  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-500\/10 {
    background-color: #00c7581a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/10 {
      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
    }
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-orange-50 {
    background-color: var(--color-orange-50);
  }

  .bg-primary {
    background-color: var(--color-primary);
  }

  .bg-primary\/5 {
    background-color: #ff8a1a0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/5 {
      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: #ff8a1a1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }

  .bg-primary\/15 {
    background-color: #ff8a1a26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/15 {
      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
    }
  }

  .bg-primary\/20 {
    background-color: #ff8a1a33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }

  .bg-red-500\/10 {
    background-color: #fb2c361a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/10 {
      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
    }
  }

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-rose-100 {
    background-color: var(--color-rose-100);
  }

  .bg-rose-600 {
    background-color: var(--color-rose-600);
  }

  .bg-sky-50 {
    background-color: var(--color-sky-50);
  }

  .bg-sky-100 {
    background-color: var(--color-sky-100);
  }

  .bg-stone-50 {
    background-color: var(--color-stone-50);
  }

  .bg-stone-100 {
    background-color: var(--color-stone-100);
  }

  .bg-stone-200 {
    background-color: var(--color-stone-200);
  }

  .bg-stone-300 {
    background-color: var(--color-stone-300);
  }

  .bg-stone-400 {
    background-color: var(--color-stone-400);
  }

  .bg-stone-900 {
    background-color: var(--color-stone-900);
  }

  .bg-surface-warm {
    background-color: var(--color-surface-warm);
  }

  .bg-surface-warm\/80 {
    background-color: #10182ccc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-warm\/80 {
      background-color: color-mix(in oklab, var(--color-surface-warm) 80%, transparent);
    }
  }

  .bg-teal-50 {
    background-color: var(--color-teal-50);
  }

  .bg-teal-400 {
    background-color: var(--color-teal-400);
  }

  .bg-teal-700 {
    background-color: var(--color-teal-700);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/5 {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/15 {
    background-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/15 {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .bg-white\/60 {
    background-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/60 {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-white\/\[\.06\] {
    background-color: #ffffff0f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[\.06\] {
      background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    }
  }

  .\!bg-gradient-to-r {
    --tw-gradient-position: to right in oklab !important;
    background-image: linear-gradient(var(--tw-gradient-stops)) !important;
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .\!from-\[\#704438\] {
    --tw-gradient-from: #704438 !important;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
  }

  .from-\[\#1f1813\] {
    --tw-gradient-from: #1f1813;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#2a211c\] {
    --tw-gradient-from: #2a211c;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#3a2c24\] {
    --tw-gradient-from: #3a2c24;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#704438\] {
    --tw-gradient-from: #704438;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#e2c79f\] {
    --tw-gradient-from: #e2c79f;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#f4ebdf\] {
    --tw-gradient-from: #f4ebdf;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#fffaf3\] {
    --tw-gradient-from: #fffaf3;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-primary\/10 {
    --tw-gradient-from: #ff8a1a1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }

  .from-primary\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-primary\/20 {
    --tw-gradient-from: #ff8a1a33;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-primary\/20 {
      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }

  .from-primary\/20 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-white {
    --tw-gradient-from: var(--color-white);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-\[\#2c211b\] {
    --tw-gradient-via: #2c211b;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-\[\#f6ebdd\] {
    --tw-gradient-via: #f6ebdd;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .\!to-\[\#a86e56\] {
    --tw-gradient-to: #a86e56 !important;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
  }

  .to-\[\#4a3226\] {
    --tw-gradient-to: #4a3226;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#5a3d2f\] {
    --tw-gradient-to: #5a3d2f;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#14100d\] {
    --tw-gradient-to: #14100d;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#a86e56\] {
    --tw-gradient-to: #a86e56;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#c08a6e\] {
    --tw-gradient-to: #c08a6e;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#c9a274\] {
    --tw-gradient-to: #c9a274;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#d6a283\] {
    --tw-gradient-to: #d6a283;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#ead6bf\] {
    --tw-gradient-to: #ead6bf;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#ecd9c3\] {
    --tw-gradient-to: #ecd9c3;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#fbefe9\] {
    --tw-gradient-to: #fbefe9;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-accent\/10 {
    --tw-gradient-to: #3ec6ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-accent\/10 {
      --tw-gradient-to: color-mix(in oklab, var(--color-accent) 10%, transparent);
    }
  }

  .to-accent\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .bg-cover {
    background-size: cover;
  }

  .bg-center {
    background-position: center;
  }

  .fill-accent {
    fill: var(--color-accent);
  }

  .fill-amber-400 {
    fill: var(--color-amber-400);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .\!p-1 {
    padding: var(--spacing) !important;
  }

  .\!p-2 {
    padding: calc(var(--spacing) * 2) !important;
  }

  .p-0 {
    padding: 0;
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: var(--spacing);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .p-16 {
    padding: calc(var(--spacing) * 16);
  }

  .\!px-3 {
    padding-inline: calc(var(--spacing) * 3) !important;
  }

  .\!px-4 {
    padding-inline: calc(var(--spacing) * 4) !important;
  }

  .\!px-6 {
    padding-inline: calc(var(--spacing) * 6) !important;
  }

  .px-1 {
    padding-inline: var(--spacing);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .\!py-1 {
    padding-block: var(--spacing) !important;
  }

  .\!py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }

  .\!py-2 {
    padding-block: calc(var(--spacing) * 2) !important;
  }

  .\!py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5) !important;
  }

  .\!py-4 {
    padding-block: calc(var(--spacing) * 4) !important;
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-\[1\.5px\] {
    padding-block: 1.5px;
  }

  .py-px {
    padding-block: 1px;
  }

  .\!ps-9 {
    padding-inline-start: calc(var(--spacing) * 9) !important;
  }

  .ps-5 {
    padding-inline-start: calc(var(--spacing) * 5);
  }

  .ps-10 {
    padding-inline-start: calc(var(--spacing) * 10);
  }

  .ps-12 {
    padding-inline-start: calc(var(--spacing) * 12);
  }

  .ps-16 {
    padding-inline-start: calc(var(--spacing) * 16);
  }

  .pe-1 {
    padding-inline-end: var(--spacing);
  }

  .pe-2 {
    padding-inline-end: calc(var(--spacing) * 2);
  }

  .pe-4 {
    padding-inline-end: calc(var(--spacing) * 4);
  }

  .pt-1 {
    padding-top: var(--spacing);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pb-1 {
    padding-bottom: var(--spacing);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }

  .pb-28 {
    padding-bottom: calc(var(--spacing) * 28);
  }

  .text-center {
    text-align: center;
  }

  .text-end {
    text-align: end;
  }

  .text-right {
    text-align: right;
  }

  .text-start {
    text-align: start;
  }

  .align-middle {
    vertical-align: middle;
  }

  .font-display {
    font-family: var(--font-display);
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .\!text-base {
    font-size: var(--text-base) !important;
    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[0\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[0\.3em\] {
    --tw-tracking: .3em;
    letter-spacing: .3em;
  }

  .tracking-\[0\.4em\] {
    --tw-tracking: .4em;
    letter-spacing: .4em;
  }

  .tracking-\[0\.08em\] {
    --tw-tracking: .08em;
    letter-spacing: .08em;
  }

  .tracking-\[0\.14em\] {
    --tw-tracking: .14em;
    letter-spacing: .14em;
  }

  .tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
  }

  .tracking-\[0\.22em\] {
    --tw-tracking: .22em;
    letter-spacing: .22em;
  }

  .tracking-\[0\.25em\] {
    --tw-tracking: .25em;
    letter-spacing: .25em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .\!text-\[\#2a211c\] {
    color: #2a211c !important;
  }

  .\!text-\[\#a83a2e\] {
    color: #a83a2e !important;
  }

  .\!text-\[\#f3a99f\] {
    color: #f3a99f !important;
  }

  .\!text-\[\#ffb4a8\] {
    color: #ffb4a8 !important;
  }

  .\!text-\[\#fffaf3\] {
    color: #fffaf3 !important;
  }

  .text-\[\#1a0dab\] {
    color: #1a0dab;
  }

  .text-\[\#1f1813\] {
    color: #1f1813;
  }

  .text-\[\#2a211c\] {
    color: #2a211c;
  }

  .text-\[\#2f7a45\] {
    color: #2f7a45;
  }

  .text-\[\#4a3f38\] {
    color: #4a3f38;
  }

  .text-\[\#4d5156\] {
    color: #4d5156;
  }

  .text-\[\#5e3a2e\] {
    color: #5e3a2e;
  }

  .text-\[\#6b4a00\] {
    color: #6b4a00;
  }

  .text-\[\#6b5d54\] {
    color: #6b5d54;
  }

  .text-\[\#8a7d74\] {
    color: #8a7d74;
  }

  .text-\[\#8a6100\] {
    color: #8a6100;
  }

  .text-\[\#25a35a\] {
    color: #25a35a;
  }

  .text-\[\#140c04\] {
    color: #140c04;
  }

  .text-\[\#33508a\] {
    color: #33508a;
  }

  .text-\[\#704438\] {
    color: #704438;
  }

  .text-\[\#a83a2e\] {
    color: #a83a2e;
  }

  .text-\[\#a86e56\] {
    color: #a86e56;
  }

  .text-\[\#a2541b\] {
    color: #a2541b;
  }

  .text-\[\#b9a394\] {
    color: #b9a394;
  }

  .text-\[\#c9b8a6\] {
    color: #c9b8a6;
  }

  .text-\[\#cbbcae\] {
    color: #cbbcae;
  }

  .text-\[\#d9c9b8\] {
    color: #d9c9b8;
  }

  .text-\[\#e2c79f\] {
    color: #e2c79f;
  }

  .text-\[\#f0c9a8\] {
    color: #f0c9a8;
  }

  .text-\[\#f3a99f\] {
    color: #f3a99f;
  }

  .text-\[\#f3e6d6\] {
    color: #f3e6d6;
  }

  .text-\[\#fbf3ea\] {
    color: #fbf3ea;
  }

  .text-\[\#fcf8e8\] {
    color: #fcf8e8;
  }

  .text-\[\#ff3b00\] {
    color: #ff3b00;
  }

  .text-\[\#ff6a1a\] {
    color: #ff6a1a;
  }

  .text-\[\#fffaf3\] {
    color: #fffaf3;
  }

  .text-accent {
    color: var(--color-accent);
  }

  .text-amber-400 {
    color: var(--color-amber-400);
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-amber-900 {
    color: var(--color-amber-900);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-emerald-400 {
    color: var(--color-emerald-400);
  }

  .text-emerald-500 {
    color: var(--color-emerald-500);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-emerald-800 {
    color: var(--color-emerald-800);
  }

  .text-fuchsia-700 {
    color: var(--color-fuchsia-700);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-green-800 {
    color: var(--color-green-800);
  }

  .text-ink {
    color: var(--color-ink);
  }

  .text-muted {
    color: var(--color-muted);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .text-primary-light {
    color: var(--color-primary-light);
  }

  .text-primary\/30 {
    color: #ff8a1a4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/30 {
      color: color-mix(in oklab, var(--color-primary) 30%, transparent);
    }
  }

  .text-primary\/40 {
    color: #ff8a1a66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/40 {
      color: color-mix(in oklab, var(--color-primary) 40%, transparent);
    }
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-rose-600 {
    color: var(--color-rose-600);
  }

  .text-rose-700 {
    color: var(--color-rose-700);
  }

  .text-sky-500 {
    color: var(--color-sky-500);
  }

  .text-sky-700 {
    color: var(--color-sky-700);
  }

  .text-sky-800 {
    color: var(--color-sky-800);
  }

  .text-stone-300 {
    color: var(--color-stone-300);
  }

  .text-stone-400 {
    color: var(--color-stone-400);
  }

  .text-stone-500 {
    color: var(--color-stone-500);
  }

  .text-stone-600 {
    color: var(--color-stone-600);
  }

  .text-stone-700 {
    color: var(--color-stone-700);
  }

  .text-stone-800 {
    color: var(--color-stone-800);
  }

  .text-stone-900 {
    color: var(--color-stone-900);
  }

  .text-teal-100\/80 {
    color: #cbfbf1cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-teal-100\/80 {
      color: color-mix(in oklab, var(--color-teal-100) 80%, transparent);
    }
  }

  .text-teal-100\/90 {
    color: #cbfbf1e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-teal-100\/90 {
      color: color-mix(in oklab, var(--color-teal-100) 90%, transparent);
    }
  }

  .text-teal-700 {
    color: var(--color-teal-700);
  }

  .text-teal-800 {
    color: var(--color-teal-800);
  }

  .text-teal-950 {
    color: var(--color-teal-950);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/20 {
    color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/20 {
      color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .text-white\/40 {
    color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/40 {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .text-white\/50 {
    color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/50 {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .capitalize {
    text-transform: capitalize;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .underline {
    text-decoration-line: underline;
  }

  .accent-\[\#704438\] {
    accent-color: #704438;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-90 {
    opacity: .9;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-black\/40 {
    --tw-shadow-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-black\/40 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-primary\/30 {
    --tw-shadow-color: #ff8a1a4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-primary\/30 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-\[\#2a211c\]\/5 {
    --tw-ring-color: oklab(25.655% .0105557 .0128908 / .05);
  }

  .ring-\[\#a86e56\] {
    --tw-ring-color: #a86e56;
  }

  .ring-\[\#a86e56\]\/10 {
    --tw-ring-color: oklab(59.3868% .0600029 .056387 / .1);
  }

  .ring-\[\#a86e56\]\/20 {
    --tw-ring-color: oklab(59.3868% .0600029 .056387 / .2);
  }

  .ring-\[\#a86e56\]\/30 {
    --tw-ring-color: oklab(59.3868% .0600029 .056387 / .3);
  }

  .ring-\[\#e2c79f\]\/25 {
    --tw-ring-color: oklab(84.2583% .013257 .059696 / .25);
  }

  .ring-\[\#ff3b00\] {
    --tw-ring-color: #ff3b00;
  }

  .ring-\[\#ff3b00\]\/30 {
    --tw-ring-color: oklab(65.1985% .196345 .131084 / .3);
  }

  .ring-\[\#ff3b00\]\/40 {
    --tw-ring-color: oklab(65.1985% .196345 .131084 / .4);
  }

  .ring-\[\#fffdf9\] {
    --tw-ring-color: #fffdf9;
  }

  .ring-amber-200 {
    --tw-ring-color: var(--color-amber-200);
  }

  .ring-black\/5 {
    --tw-ring-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-black\/5 {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .ring-stone-200 {
    --tw-ring-color: var(--color-stone-200);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur-2xl {
    --tw-blur: blur(var(--blur-2xl));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .\!filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  @media (hover: hover) {
    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:scale-110:is(:where(.group):hover *) {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:text-primary:is(:where(.group):hover *) {
      color: var(--color-primary);
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .placeholder\:text-teal-200\/40::placeholder {
    color: #96f7e466;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-teal-200\/40::placeholder {
      color: color-mix(in oklab, var(--color-teal-200) 40%, transparent);
    }
  }

  .placeholder\:text-white\/40::placeholder {
    color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-white\/40::placeholder {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-1\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -1.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:border-\[\#a86e56\]:hover {
      border-color: #a86e56;
    }

    .hover\:border-\[\#ff3b00\]:hover {
      border-color: #ff3b00;
    }

    .hover\:border-primary:hover {
      border-color: var(--color-primary);
    }

    .hover\:border-primary\/30:hover {
      border-color: #ff8a1a4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/30:hover {
        border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
      }
    }

    .hover\:\!bg-\[\#fbf3ea\]:hover {
      background-color: #fbf3ea !important;
    }

    .hover\:bg-\[\#ead9c6\]:hover {
      background-color: #ead9c6;
    }

    .hover\:bg-\[\#f4ebdf\]:hover {
      background-color: #f4ebdf;
    }

    .hover\:bg-\[\#f7f1e8\]:hover {
      background-color: #f7f1e8;
    }

    .hover\:bg-\[\#fbe7e5\]:hover {
      background-color: #fbe7e5;
    }

    .hover\:bg-\[\#fbf3ea\]:hover {
      background-color: #fbf3ea;
    }

    .hover\:bg-\[\#fbf7f1\]:hover {
      background-color: #fbf7f1;
    }

    .hover\:bg-accent\/5:hover {
      background-color: #3ec6ff0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/5:hover {
        background-color: color-mix(in oklab, var(--color-accent) 5%, transparent);
      }
    }

    .hover\:bg-black\/5:hover {
      background-color: #0000000d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/5:hover {
        background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
      }
    }

    .hover\:bg-orange-50:hover {
      background-color: var(--color-orange-50);
    }

    .hover\:bg-primary-dark:hover {
      background-color: var(--color-primary-dark);
    }

    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }

    .hover\:bg-stone-50:hover {
      background-color: var(--color-stone-50);
    }

    .hover\:bg-surface-warm:hover {
      background-color: var(--color-surface-warm);
    }

    .hover\:bg-teal-50:hover {
      background-color: var(--color-teal-50);
    }

    .hover\:bg-teal-300:hover {
      background-color: var(--color-teal-300);
    }

    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }

    .hover\:bg-white\/5:hover {
      background-color: #ffffff0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/5:hover {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }

    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .hover\:bg-white\/\[\.12\]:hover {
      background-color: #ffffff1f;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[\.12\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
      }
    }

    .hover\:text-\[\#2a211c\]:hover {
      color: #2a211c;
    }

    .hover\:text-\[\#704438\]:hover {
      color: #704438;
    }

    .hover\:text-\[\#a83a2e\]:hover {
      color: #a83a2e;
    }

    .hover\:text-accent:hover {
      color: var(--color-accent);
    }

    .hover\:text-accent\/80:hover {
      color: #3ec6ffcc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-accent\/80:hover {
        color: color-mix(in oklab, var(--color-accent) 80%, transparent);
      }
    }

    .hover\:text-primary:hover {
      color: var(--color-primary);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-md:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus\:bg-white\/15:focus {
    background-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:bg-white\/15:focus {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-teal-300:focus {
    --tw-ring-color: var(--color-teal-300);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  @media not all and (min-width: 64rem) {
    .max-lg\:fixed {
      position: fixed;
    }

    .max-lg\:inset-y-0 {
      inset-block: 0;
    }

    .max-lg\:start-0 {
      inset-inline-start: calc(var(--spacing) * 0);
    }

    .max-lg\:hidden {
      display: none;
    }

    .max-lg\:translate-x-0 {
      --tw-translate-x: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .max-lg\:transition-transform {
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }

  @media (min-width: 40rem) {
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:hidden {
      display: none;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:h-24 {
      height: calc(var(--spacing) * 24);
    }

    .sm\:w-24 {
      width: calc(var(--spacing) * 24);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sm\:grid-cols-\[1fr_1fr_auto\] {
      grid-template-columns: 1fr 1fr auto;
    }

    .sm\:grid-cols-\[1fr_140px\] {
      grid-template-columns: 1fr 140px;
    }

    .sm\:grid-cols-\[220px_1fr\] {
      grid-template-columns: 220px 1fr;
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:items-end {
      align-items: flex-end;
    }

    .sm\:justify-center {
      justify-content: center;
    }

    .sm\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .sm\:rounded-3xl {
      border-radius: var(--radius-3xl);
    }

    .sm\:p-2 {
      padding: calc(var(--spacing) * 2);
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .sm\:py-3 {
      padding-block: calc(var(--spacing) * 3);
    }

    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:block {
      display: block;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .md\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:sticky {
      position: sticky;
    }

    .lg\:top-4 {
      top: calc(var(--spacing) * 4);
    }

    .lg\:bottom-6 {
      bottom: calc(var(--spacing) * 6);
    }

    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .lg\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .lg\:block {
      display: block;
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:w-60 {
      width: calc(var(--spacing) * 60);
    }

    .lg\:w-64 {
      width: calc(var(--spacing) * 64);
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[1fr_320px\] {
      grid-template-columns: 1fr 320px;
    }

    .lg\:grid-cols-\[1fr_340px\] {
      grid-template-columns: 1fr 340px;
    }

    .lg\:grid-cols-\[340px_1fr\] {
      grid-template-columns: 340px 1fr;
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .lg\:self-start {
      align-self: flex-start;
    }

    .lg\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .lg\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .lg\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .lg\:pb-12 {
      padding-bottom: calc(var(--spacing) * 12);
    }

    .lg\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }

  @media (min-width: 80rem) {
    .xl\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .xl\:block {
      display: block;
    }

    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[1\.4fr_0\.9fr\] {
      grid-template-columns: 1.4fr .9fr;
    }
  }

  @media not all and (min-width: 64rem) {
    .max-lg\:ltr\:-translate-x-full:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
      --tw-translate-x: -100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  .rtl\:-scale-x-100:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  :where(.rtl\:space-x-reverse:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) {
    --tw-space-x-reverse: 1;
  }

  @media not all and (min-width: 64rem) {
    .max-lg\:rtl\:translate-x-full:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      --tw-translate-x: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

  @media print {
    .print\:hidden {
      display: none;
    }
  }
}

:root {
  --bs-glow: #ff8a1a6b;
  --bs-ease: cubic-bezier(.22, 1, .36, 1);
  --bs-grad-a: #ff8a1a;
  --bs-grad-b: #ffd36a;
  --bs-grad-c: #3ec6ff;
  --sx-radius-sm: 8px;
  --sx-radius: 14px;
  --sx-radius-lg: 22px;
  --sx-shadow: 0 18px 40px #00000047;
  --sx-space: 8px;
  --sx-dur-fast: .16s;
  --sx-dur: .42s;
  --sx-dur-slow: .78s;
  --sx-ease: cubic-bezier(.22, 1, .36, 1);
  --sx-touch: 44px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  margin: 0;
}

.font-display {
  font-family: var(--font-display);
}

.gradient-atmosphere {
  background: radial-gradient(800px 500px at 12% 10%, #ff8a1a38, transparent 60%), radial-gradient(700px 520px at 88% 8%, #3ec6ff29, transparent 62%), radial-gradient(900px 600px at 70% 90%, #ffd36a1a, transparent 60%), var(--color-surface);
}

.bs-noise {
  pointer-events: none;
  z-index: 1;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  position: fixed;
  inset: 0;
}

.sx-hero {
  min-height: clamp(420px, 78svh, 720px);
  color: var(--color-ink);
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 20px;
  padding: 28px 24px 48px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.sx-hero-copy {
  z-index: 2;
  position: relative;
}

.sx-hero-copy h1 {
  letter-spacing: -.05em;
  text-transform: uppercase;
  margin: 0;
  font-size: clamp(40px, 6.4vw, 88px);
  font-weight: 800;
  line-height: .9;
}

.sx-hero-copy .sx-eye {
  color: var(--color-primary-light);
  letter-spacing: .16em;
  text-transform: uppercase;
  background: #ffffff0a;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.sx-hero-copy .sx-lead {
  color: var(--color-muted);
  max-width: 32rem;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

.sx-hero-meta {
  color: var(--color-muted);
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 32px;
  font-size: 13px;
  display: flex;
}

.sx-hero-meta b {
  color: var(--color-ink);
  letter-spacing: -.04em;
  font-size: 20px;
  display: block;
}

.sx-orbit {
  perspective: 1400px;
  height: min(600px, 72vh);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .15s linear;
  position: relative;
}

.sx-ring {
  pointer-events: none;
  z-index: 1;
  border: 1px dashed #ff8a1a59;
  border-radius: 50%;
  animation: 28s linear infinite bs-spin-ring;
  position: absolute;
  inset: 12%;
  transform: rotateX(68deg);
}

.sx-ring-outer {
  border-style: solid;
  border-color: #ff8a1a2e;
  animation-duration: 42s;
  animation-direction: reverse;
  inset: 2%;
}

.sx-ring:after {
  content: "";
  border: 1px solid #3ec6ff33;
  border-radius: 50%;
  position: absolute;
  inset: 14%;
}

.sx-stage-floor {
  background: radial-gradient(ellipse at center, var(--bs-glow), transparent 70%);
  filter: blur(18px);
  opacity: .65;
  pointer-events: none;
  height: 90px;
  position: absolute;
  bottom: 2%;
  left: 10%;
  right: 10%;
}

.sx-tile {
  width: 108px;
  color: var(--color-ink);
  transform-style: preserve-3d;
  transition: transform .4s var(--bs-ease), filter .4s;
  will-change: transform;
  opacity: 0;
  background: none;
  border: 0;
  justify-items: center;
  gap: 8px;
  padding: 0;
  text-decoration: none;
  animation: 5.4s ease-in-out infinite sx-float;
  display: grid;
  position: absolute;
}

.sx-orbit.is-ready .sx-tile {
  animation: sx-burst-in .95s var(--bs-ease) calc(var(--i, 0) * 70ms) both, sx-float 5.4s ease-in-out calc(.95s + var(--i, 0) * 70ms) infinite;
}

.sx-tile-frame {
  aspect-ratio: 1;
  background: linear-gradient(145deg, #ffffff24, #ffffff0a);
  border: 1px solid #ff8a1a47;
  border-radius: 26px;
  width: 100%;
  padding: 7px;
  display: block;
  overflow: hidden;
  box-shadow: 0 18px 36px #00000073, 0 0 28px #ff8a1a2e;
}

.sx-tile-frame img {
  object-fit: cover;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  height: 100%;
  display: block;
}

.sx-tile-name {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #070a14b8;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  max-width: 112%;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
}

.sx-orbit-tiles {
  z-index: 2;
  position: absolute;
  inset: 0;
}

.sx-orbit-tiles .sx-tile:first-child {
  width: 96px;
  animation-duration: 6s;
  top: 6%;
  left: 4%;
}

.sx-orbit-tiles .sx-tile:nth-child(2) {
  width: 88px;
  animation-duration: 4.8s;
  top: -2%;
  left: 34%;
}

.sx-orbit-tiles .sx-tile:nth-child(3) {
  width: 100px;
  top: 4%;
  left: 64%;
}

.sx-orbit-tiles .sx-tile:nth-child(4) {
  width: 90px;
  animation-duration: 5.8s;
  top: 38%;
  left: -2%;
}

.sx-orbit-tiles .sx-tile:nth-child(5) {
  z-index: 2;
  width: 148px;
  animation-duration: 6.4s;
  top: 28%;
  left: 36%;
}

.sx-orbit-tiles .sx-tile:nth-child(6) {
  width: 110px;
  top: 34%;
  left: 74%;
}

.sx-orbit-tiles .sx-tile:nth-child(7) {
  width: 94px;
  top: 64%;
  left: 14%;
}

.sx-orbit-tiles .sx-tile:nth-child(8) {
  width: 98px;
  animation-duration: 4.6s;
  top: 66%;
  left: 56%;
}

.sx-orbit-tiles .sx-tile:nth-child(5) .sx-tile-name {
  padding: 5px 10px;
  font-size: 11px;
}

@keyframes sx-float {
  0%, 100% {
    translate: 0;
  }

  50% {
    translate: 0 -12px;
  }
}

@keyframes sx-burst-in {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 40px, -180px) scale(.35) rotateY(-40deg);
  }

  70% {
    opacity: 1;
    filter: none;
  }

  100% {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes bs-spin-ring {
  from {
    transform: rotateX(68deg) rotateZ(0);
  }

  to {
    transform: rotateX(68deg) rotateZ(360deg);
  }
}

.bs-logo {
  color: inherit;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  display: inline-flex;
}

.bs-logo-mark {
  background: #0a0e18;
  border-radius: 16px;
  width: 52px;
  height: 52px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px #ff8a1a73, 0 10px 28px #ff8a1a47;
}

.bs-logo-mark:after {
  content: "";
  filter: blur(8px);
  pointer-events: none;
  background: radial-gradient(#ff8a1a8c, #0000 70%);
  height: 40%;
  position: absolute;
  inset: auto 8% -30%;
}

.bs-logo-img {
  object-fit: contain;
  mix-blend-mode: normal;
  background: none;
  width: 100%;
  height: 100%;
  display: block;
}

.bs-logo-word {
  flex-direction: column;
  line-height: 1;
  display: none;
}

.bs-logo-word b {
  letter-spacing: .14em;
  color: #f4f7ff;
  font-size: 15px;
  font-weight: 800;
}

.bs-logo-word small {
  letter-spacing: .28em;
  color: #ff8a1a;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .bs-logo-word {
    display: flex;
  }
}

.sx-dept {
  display: none;
}

.sx-cats-stage {
  perspective: 1400px;
  transform-style: preserve-3d;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

@media (min-width: 640px) {
  .sx-cats-stage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .sx-cats-stage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}

.sx-cat {
  --si: 0;
  --ox: 0px;
  --oy: 80px;
  --ory: -30deg;
  min-height: 210px;
  color: var(--color-ink);
  transform-style: preserve-3d;
  opacity: 0;
  transform: translate3d(var(--ox), var(--oy), -260px) rotateX(22deg) rotateY(var(--ory)) scale(.55);
  filter: blur(10px);
  will-change: transform, opacity, filter;
  z-index: calc(20 - var(--si));
  background: linear-gradient(160deg, #ffffff12, #ffffff05), #121a2e;
  border: 1px solid #ff8a1a38;
  border-radius: 26px;
  grid-template-rows: 1fr auto;
  text-decoration: none;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px #00000059, inset 0 1px #ffffff0f;
}

.sx-cats.is-in .sx-cat {
  animation: sx-cat-stack-fly 1.15s var(--bs-ease) calc(var(--si) * 70ms) forwards;
}

.sx-cat-glow {
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(#ff8a1a47, #0000 68%);
  height: 55%;
  position: absolute;
  inset: auto -20% -35%;
}

.sx-cat-media {
  z-index: 1;
  aspect-ratio: 1.15;
  background: #0c1220;
  border-radius: 18px;
  margin: 14px 14px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px #0006;
}

.sx-cat-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .55s var(--bs-ease);
  display: block;
}

.sx-cat-copy {
  z-index: 1;
  text-align: center;
  gap: 4px;
  padding: 14px 16px 16px;
  display: grid;
  position: relative;
}

.sx-cat-copy b {
  letter-spacing: -.01em;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.sx-cat-copy small {
  color: var(--color-muted);
  letter-spacing: .02em;
  font-size: 11px;
}

@keyframes sx-cat-stack-fly {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(var(--ox), var(--oy), -260px) rotateX(22deg) rotateY(var(--ory)) scale(.55);
  }

  52% {
    opacity: 1;
    filter: none;
    transform: translate3d(calc(var(--si) * 10px - 35px), calc(var(--si) * -8px + 20px), calc(var(--si) * -28px)) rotateX(8deg) rotateY(-12deg) scale(1.02);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) scale(1);
  }
}

@media (hover: hover) {
  .sx-cats.is-in .sx-cat:hover {
    opacity: 1;
    filter: none;
    z-index: 30;
    border-color: #ff8a1a8c;
    animation: none;
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 28px 50px #ff8a1a2e, 0 18px 40px #0006;
  }

  .sx-cat:hover .sx-cat-media img {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-cat {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
    transform: none !important;
  }
}

.sx-card-3d {
  transform-style: preserve-3d;
  transition: transform .35s var(--bs-ease), box-shadow .35s, border-color .35s;
}

@media (hover: hover) {
  .sx-tile:hover, .sx-tile:focus-visible {
    z-index: 6;
    animation-play-state: paused;
    transform: perspective(700px) rotateX(10deg) rotateY(-14deg) translateZ(28px) scale(1.08);
  }

  .sx-tile:hover .sx-tile-frame, .sx-tile:focus-visible .sx-tile-frame {
    border-color: #ff8a1a8c;
    box-shadow: 0 30px 54px #ff8a1a61;
  }

  .sx-card-3d:hover {
    border-color: #ff8a1a59;
    transform: perspective(800px) rotateX(6deg) rotateY(-8deg) translateZ(10px);
    box-shadow: 0 24px 40px #ff8a1a2e;
  }
}

@media (max-width: 860px) {
  .sx-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-bottom: 28px;
  }

  .sx-hero-copy h1 {
    font-size: 48px;
  }

  .sx-orbit {
    height: 380px;
  }

  .sx-orbit-tiles .sx-tile:nth-child(5) {
    width: 120px;
  }
}

@media (max-width: 560px) {
  .sx-orbit {
    height: 340px;
  }

  .sx-orbit-tiles .sx-tile {
    width: 72px !important;
  }

  .sx-orbit-tiles .sx-tile:nth-child(5) {
    width: 96px !important;
  }

  .sx-tile-name {
    padding: 3px 6px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-tile, .sx-ring, .sx-orbit.is-ready .sx-tile {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
    transform: none !important;
  }

  .sx-orbit {
    transition: none !important;
  }
}

.btn-primary {
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  display: inline-flex;
}

.btn-primary:focus {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: #ff8a1a80;
}

@supports (color: color-mix(in lab, red, red)) {
  .btn-primary:focus {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
}

.btn-primary:focus {
  --tw-outline-style: none;
  outline-style: none;
}

.btn-primary:disabled {
  opacity: .5;
}

.btn-primary {
  background: linear-gradient(135deg, var(--bs-grad-a), var(--bs-grad-b));
  color: #140c04;
  box-shadow: 0 12px 30px var(--bs-glow);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-accent {
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  display: inline-flex;
}

.btn-accent:focus {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: #ff8a1a80;
}

@supports (color: color-mix(in lab, red, red)) {
  .btn-accent:focus {
    --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
}

.btn-accent:focus {
  --tw-outline-style: none;
  outline-style: none;
}

.btn-accent {
  background: linear-gradient(135deg, var(--bs-grad-a), var(--bs-grad-b));
  color: #140c04;
  box-shadow: 0 12px 30px var(--bs-glow);
}

.btn-outline {
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  border-width: 1px;
  display: inline-flex;
}

.btn-outline:focus {
  --tw-outline-style: none;
  outline-style: none;
}

.btn-outline {
  color: var(--color-ink);
  background: #ffffff0f;
  border-color: #ffffff29;
}

.btn-outline:hover {
  border-color: var(--color-primary);
  background: #ff8a1a1f;
}

.input-field {
  border-radius: var(--radius-xl);
  width: 100%;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  background: var(--color-elevated);
  color: var(--color-ink);
  border: 1px solid #ffffff1f;
  outline-style: none;
}

.input-field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px #ff8a1a38;
}

.input-field::placeholder {
  color: #9aa6c48c;
}

.card {
  border-radius: var(--radius-2xl);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  background: var(--color-surface-warm);
  border: 1px solid #ffffff1a;
}

.badge {
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * .5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  border-radius: 3.40282e38px;
  align-items: center;
  display: inline-flex;
}

.skeleton {
  background: #ffffff14;
  border-radius: .75rem;
  position: relative;
  overflow: hidden;
}

.skeleton:after {
  content: "";
  background: linear-gradient(90deg, #0000, #ffffff2e, #0000);
  animation: 1.2s infinite sx-shimmer;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

@keyframes sx-shimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton:after {
    animation: none;
  }
}

.store-shell .bg-white {
  background-color: var(--color-surface-warm) !important;
}

.store-shell .bg-stone-50, .store-shell .bg-stone-100 {
  background-color: #ffffff0a !important;
}

.store-shell .border-stone-200, .store-shell .border-stone-200\/80, .store-shell .border-b {
  border-color: #ffffff1a !important;
}

.store-shell .text-stone-300, .store-shell .text-stone-400, .store-shell .text-stone-500, .store-shell .text-stone-600, .store-shell .text-stone-700, .store-shell .text-stone-800 {
  color: var(--color-muted) !important;
}

.store-shell .bg-surface-warm\/50 {
  background-color: #18223c8c !important;
}

.store-shell .hover\:bg-surface-warm:hover, .store-shell .hover\:bg-stone-50:hover {
  background-color: #ffffff0f !important;
}

[dir="rtl"] .flip-rtl {
  transform: scaleX(-1);
}

.bs-tornado {
  z-index: 200;
  transition: opacity .65s var(--bs-ease), visibility .65s;
  background: #05070f;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.bs-tornado.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bs-tornado-stage {
  perspective: 900px;
  width: min(420px, 86vw);
  height: min(420px, 70vh);
  transform-style: preserve-3d;
  position: relative;
}

.bs-tornado-logo {
  z-index: 5;
  width: 112px;
  height: 112px;
  box-shadow: 0 20px 50px var(--bs-glow);
  animation: bs-logo-rise 2.4s var(--bs-ease) both;
  border-radius: 28px;
  margin: -56px 0 0 -56px;
  position: absolute;
  inset: 50% auto auto 50%;
  overflow: hidden;
}

.bs-tornado-logo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.bs-tornado-chip {
  background: var(--color-elevated);
  width: 72px;
  height: 72px;
  transform-style: preserve-3d;
  animation: bs-vortex 2.55s var(--bs-ease) both;
  will-change: transform, opacity;
  border: 1px solid #ff8a1a4d;
  border-radius: 20px;
  margin: -36px 0 0 -36px;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  box-shadow: 0 12px 28px #00000073;
}

.bs-tornado-chip img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bs-tornado-chip:first-child {
  --a: 0deg;
  --r: 150px;
  animation-delay: 50ms;
}

.bs-tornado-chip:nth-child(2) {
  --a: 45deg;
  --r: 165px;
  animation-delay: .1s;
}

.bs-tornado-chip:nth-child(3) {
  --a: 90deg;
  --r: 140px;
  animation-delay: .15s;
}

.bs-tornado-chip:nth-child(4) {
  --a: 135deg;
  --r: 170px;
  animation-delay: .2s;
}

.bs-tornado-chip:nth-child(5) {
  --a: 180deg;
  --r: 155px;
  animation-delay: .25s;
}

.bs-tornado-chip:nth-child(6) {
  --a: 225deg;
  --r: 160px;
  animation-delay: .3s;
}

.bs-tornado-chip:nth-child(7) {
  --a: 270deg;
  --r: 145px;
  animation-delay: .35s;
}

.bs-tornado-chip:nth-child(8) {
  --a: 315deg;
  --r: 168px;
  animation-delay: .4s;
}

.bs-tornado-copy {
  text-align: center;
  z-index: 6;
  animation: bs-fade-up 1s .5s var(--bs-ease) both;
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
}

.bs-tornado-copy p {
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
  font-size: 11px;
}

.bs-tornado-copy strong {
  letter-spacing: -.03em;
  color: var(--color-ink);
  margin-top: 8px;
  font-size: clamp(22px, 4vw, 32px);
  display: block;
}

.bs-tornado-skip {
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 8;
  color: var(--color-muted);
  cursor: pointer;
  background: #ffffff0f;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  position: absolute;
}

.bs-tornado-canvas {
  pointer-events: none;
  opacity: .7;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

@keyframes bs-vortex {
  0% {
    opacity: 0;
    transform: rotateY(calc(var(--a) - 420deg)) translate3d(0, 120px, -220px) rotateX(50deg) scale(.35);
  }

  55% {
    opacity: 1;
    transform: rotateY(calc(var(--a) - 80deg)) translate3d(var(--r), -20px, 40px) rotateX(18deg) scale(1);
  }

  100% {
    opacity: .15;
    transform: rotateY(var(--a)) translate3d(calc(var(--r) * 1.35), -180px, 120px) rotateX(8deg) scale(.7);
  }
}

@keyframes bs-logo-rise {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: scale(.4) rotateY(-40deg) translateZ(-80px);
  }

  45% {
    opacity: 1;
    filter: none;
    transform: scale(1.08) rotateY(12deg) translateZ(40px);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotateY(0) translateZ(0);
  }
}

@keyframes bs-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bs-tornado-chip, .bs-tornado-logo, .bs-tornado-copy {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
  }
}

.bs-fly-ghost {
  z-index: 300;
  pointer-events: none;
  background: #10182c;
  border: 1px solid #ffd36a8c;
  border-radius: 18px;
  width: 64px;
  height: 64px;
  margin: 0;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 16px 40px #ff8a1a73;
}

.bs-fly-ghost img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.bs-fly-ghost--dot {
  background: linear-gradient(135deg, #ff8a1a, #ffd36a);
  border-radius: 999px;
  width: 18px;
  height: 18px;
}

[data-cart-icon].is-bounce, [data-cart-count].is-tick {
  animation: bs-cart-bounce .55s var(--bs-ease);
}

html[data-quality="lite"] .bs-fly-ghost {
  width: 36px;
  height: 36px;
  box-shadow: none;
}

@keyframes bs-cart-bounce {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.22) rotate(-8deg);
  }

  70% {
    transform: scale(.92) rotate(5deg);
  }

  100% {
    transform: scale(1);
  }
}

[data-reveal] {
  opacity: 0;
  filter: blur(8px);
  transition: opacity .7s var(--bs-ease), transform .7s var(--bs-ease), filter .7s var(--bs-ease);
  transform: translateY(28px) scale(.98);
}

[data-reveal].is-in {
  opacity: 1;
  filter: none;
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(28px) rotateY(-6deg);
}

[data-reveal="left"].is-in {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.bs-spatial {
  min-height: 280px;
  transform-style: preserve-3d;
  will-change: transform;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(8px, 1.6vw, 18px);
  padding: 24px 8px 40px;
  transition: transform .2s linear;
  display: flex;
}

.bs-spatial-card {
  --si: 0;
  width: min(148px, 18vw);
  color: inherit;
  transform: translateZ(calc(var(--si) * -18px)) rotateY(calc(var(--si) * -9deg)) translateY(calc(var(--si) * var(--si) * 2.5px));
  transition: transform .35s var(--bs-ease), box-shadow .35s;
  transform-style: preserve-3d;
  text-decoration: none;
}

.bs-spatial-media {
  aspect-ratio: 3 / 4;
  background: var(--color-elevated);
  border: 1px solid #ff8a1a47;
  border-radius: 22px;
  display: block;
  overflow: hidden;
  box-shadow: 0 22px 40px #00000073, 0 0 24px #ff8a1a1f;
}

.bs-spatial-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.bs-spatial-fallback {
  height: 100%;
  color: var(--color-primary);
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  display: grid;
}

.bs-spatial-meta {
  text-align: center;
  gap: 2px;
  margin-top: 10px;
  display: grid;
}

.bs-spatial-meta b {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
}

.bs-spatial-meta small {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

@media (hover: hover) {
  .bs-spatial-card:hover {
    transform: translateZ(36px) rotateY(calc(var(--si) * -4deg)) translateY(-8px) scale(1.06);
    z-index: 4;
  }
}

@media (max-width: 700px) {
  .bs-spatial {
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    padding-bottom: 20px;
    overflow-x: auto;
  }

  .bs-spatial-card {
    scroll-snap-align: center;
    flex: 0 0 120px;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bs-spatial, .bs-spatial-card {
    transition: none !important;
    transform: none !important;
  }
}

.bs-brand {
  color: inherit;
  align-items: center;
  gap: 2px;
  min-width: 0;
  text-decoration: none;
  display: inline-flex;
}

.bs-brand-b {
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
}

.bs-brand-b svg {
  filter: drop-shadow(0 6px 14px #ff7a0059);
  width: 40px;
  height: 40px;
  display: block;
}

.bs-brand-word {
  letter-spacing: -.03em;
  white-space: nowrap;
  align-items: baseline;
  font-family: Segoe UI Variable Display, Segoe UI, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
}

.bs-brand-rest {
  color: #f4f7ff;
  font-size: 1.2rem;
}

.bs-brand-dot {
  color: #ff7a00;
  font-size: 1.05rem;
  font-weight: 600;
}

@media (max-width: 420px) {
  .bs-brand-rest {
    font-size: 1.05rem;
  }

  .bs-brand-dot {
    font-size: .95rem;
  }
}

.sx-hero-stage {
  width: 100%;
  min-height: min(520px, 70vh);
  position: relative;
}

.bs-sphere {
  background: radial-gradient(520px 320px at 70% 30%, #ff7a0029, #0000 60%), radial-gradient(420px 280px at 20% 80%, #3ec6ff1a, #0000 62%), #0a0f1c;
  border: 1px solid #ffffff14;
  border-radius: 28px;
  width: 100%;
  height: min(520px, 70vh);
  position: relative;
  overflow: hidden;
}

.bs-sphere-canvas {
  width: 100%;
  height: 100%;
}

.bs-sphere-status {
  z-index: 2;
  color: var(--color-muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
  place-items: center;
  font-size: 12px;
  display: grid;
  position: absolute;
  inset: 0;
}

.bs-sphere-hint {
  text-align: center;
  letter-spacing: .08em;
  color: #f4f7ff8c;
  pointer-events: none;
  margin: 0;
  font-size: 11px;
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
}

.bs-sphere-lite {
  perspective: 900px;
  position: absolute;
  inset: 0;
}

.bs-sphere-lite-core {
  aspect-ratio: 1;
  border: 1px dashed #ff7a0059;
  border-radius: 50%;
  width: min(220px, 46%);
  animation: 24s linear infinite bs-spin-ring;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 60px #ff7a0026;
}

.bs-sphere-lite-node {
  --i: 0;
  --n: 8;
  width: 78px;
  transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(-150px) rotate(calc(var(--i) * -360deg / var(--n)));
  color: var(--color-ink);
  text-align: center;
  animation: 5s ease-in-out infinite sx-float;
  animation-delay: calc(var(--i) * .12s);
  margin: -48px 0 0 -39px;
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
}

.bs-sphere-lite-node img {
  object-fit: cover;
  background: #fff;
  border: 1px solid #ff7a0059;
  border-radius: 20px;
  width: 72px;
  height: 72px;
  margin: 0 auto 6px;
  display: block;
  box-shadow: 0 14px 28px #0006;
}

.bs-sphere-lite-node span {
  max-width: 88px;
  margin: 0 auto;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  display: block;
}

.bs-float-track {
  perspective: 1200px;
  gap: 22px;
  display: grid;
}

@media (min-width: 768px) {
  .bs-float-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bs-float-card {
  color: inherit;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  gap: 12px;
  text-decoration: none;
  display: grid;
}

.bs-float-media {
  aspect-ratio: 4 / 5;
  background: #121a2e;
  border: 1px solid #ff7a0040;
  border-radius: 24px;
  display: block;
  overflow: hidden;
  box-shadow: 0 22px 44px #0006;
}

.bs-float-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.bs-float-fallback {
  color: #ff7a00;
  place-items: center;
  height: 100%;
  font-size: 2.5rem;
  font-weight: 800;
  display: grid;
}

.bs-float-meta {
  gap: 4px;
  display: grid;
}

.bs-float-meta b {
  font-size: 15px;
  line-height: 1.3;
}

.bs-float-meta small {
  color: #ff7a00;
  font-weight: 700;
}

.bs-gemini-fab {
  z-index: var(--z-chrome-fab);
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  color: #0a121e;
  cursor: pointer;
  background: linear-gradient(135deg, #8b4513, #c47a32 45%, #f0c878);
  border: 1px solid #f0d4a859;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  position: fixed;
  box-shadow: 0 14px 36px #d4893a52;
}

.bs-gemini-backdrop {
  z-index: var(--z-overlay);
  background: #00000080;
  position: fixed;
  inset: 0;
}

.bs-gemini-drawer, .bs-gemini-sheet {
  z-index: calc(var(--z-overlay) + 1);
  color: #f4f7ff;
  background: #0d1424;
  border: 1px solid #ffffff1a;
  flex-direction: column;
  display: flex;
  position: fixed;
  box-shadow: 0 24px 60px #00000080;
}

.bs-gemini-drawer {
  width: min(380px, 100vw);
  height: 100dvh;
  animation: bs-drawer-in .35s var(--bs-ease);
  border-right: 0;
  top: 0;
  right: 0;
}

.bs-gemini-sheet {
  max-height: min(78dvh, 640px);
  animation: bs-sheet-in .35s var(--bs-ease);
  border-radius: 24px 24px 0 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@keyframes bs-drawer-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: none;
  }
}

@keyframes bs-sheet-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: none;
  }
}

.bs-gemini-head {
  border-bottom: 1px solid #ffffff14;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  display: flex;
}

.bs-gemini-body {
  flex: 1;
  align-content: start;
  gap: 10px;
  padding: 16px;
  display: grid;
  overflow: auto;
}

.bs-gemini-msg {
  border-radius: 14px;
  max-width: 90%;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.bs-gemini-msg.is-bot {
  background: #ffffff0f;
  border: 1px solid #ffffff14;
}

.bs-gemini-msg.is-user {
  background: #ff7a002e;
  border: 1px solid #ff7a0059;
  margin-inline-start: auto;
}

.bs-gemini-foot {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #ffffff14;
  gap: 8px;
  display: flex;
}

@view-transition {
  navigation: auto;
}

.sx-card-3d {
  transition: transform .2s, box-shadow .2s;
}

.sx-card-3d:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .sx-card-3d, .sx-card-3d:hover {
    transition: none;
    transform: none;
  }
}

html, body, #app {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 700px) {
  .bs-nav-optional {
    display: none !important;
  }

  .sx-card-3d h3 {
    min-height: 0;
  }
}

.sx-quality-line {
  color: var(--color-muted);
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  display: inline-flex;
}

.sx-quality-line button {
  min-height: 44px;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  padding: 0 4px;
}

.sx-quality-line button.is-on {
  color: var(--color-primary-light);
}

.sx-toast {
  animation: sx-toast-in var(--sx-dur-fast) var(--sx-ease);
}

@keyframes sx-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

html.sx-paused .sx-ring, html.sx-paused .sx-tile, html.sx-paused .bs-hero-float {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .sx-toast {
    animation: none;
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}
/* BUYSMART — Copper 3D design layer.
   Loads after public/shop-theme.css and src/style.css, so selectors here are
   intentionally one step more specific than the ones they replace. */

@property --cu-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ============ Tokens — dark (default) ============ */
:root,
html [data-atmosphere="tech"] {
  --cu-900: #3d1a06;
  --cu-700: #7a3510;
  --cu-600: #9c4815;
  --cu-500: #b8601f;
  --cu-400: #d97b2c;
  --cu-300: #f0a050;
  --cu-200: #ffc98a;
  --cu-100: #ffe6c4;
  --ivory: #f4ecdf;

  --cu-metal: linear-gradient(135deg, #6e2f0c 0%, #b8601f 26%, #f0a050 48%, #ffd9a8 54%, #c56a24 72%, #7a3510 100%);
  --cu-ring: conic-gradient(from var(--cu-angle), #7a3510, #d97b2c, #ffe6c4, #f0a050, #9c4815, #7a3510, #d97b2c, #ffe6c4, #7a3510);
  --cu-text: linear-gradient(135deg, #ffe6c4 10%, #f0a050 45%, #d97b2c 70%, #ffd9a8 100%);

  --bg: #0c0806;
  --surface: #15100c;
  --elevated: #1f1711;
  --text: #f6efe4;
  --muted: #b4a28d;
  --line: rgba(255, 236, 214, 0.08);
  --line-strong: rgba(255, 236, 214, 0.14);
  --hover: rgba(240, 160, 80, 0.1);
  --border: rgba(240, 160, 80, 0.2);
  --glow: rgba(240, 138, 40, 0.38);
  --glow-soft: rgba(240, 138, 40, 0.16);
  --card-bg: linear-gradient(165deg, rgba(38, 27, 19, 0.94), rgba(17, 12, 9, 0.96));
  --header-bg: rgba(12, 8, 6, 0.74);
  --input-bg: rgba(255, 236, 214, 0.04);
  --icon: #f0c08a;
  --shadow-deep: 0 22px 48px rgba(0, 0, 0, 0.5);
  --atmo-a: rgba(217, 123, 44, 0.22);
  --atmo-b: rgba(255, 230, 196, 0.06);
  --atmo-c: rgba(122, 53, 16, 0.2);
  --blob-a: rgba(217, 123, 44, 0.42);
  --blob-b: rgba(255, 201, 138, 0.2);
  --ok: #4ade80;

  --primary: #d97b2c;
  --secondary: #ffc98a;
  --accent: #f0a050;
  --button: #d97b2c;
  --button-text: #1a0d04;
  --grad-a: #7a3510;
  --grad-b: #ffc98a;
  --grad-c: #d97b2c;

  --color-primary: #e08a3c;
  --color-primary-dark: #9c4815;
  --color-primary-light: #ffc98a;
  --color-accent: #f0a050;
  --color-accent-light: #ffe6c4;
  --color-surface: var(--bg);
  --color-surface-warm: var(--surface);
  --color-elevated: var(--elevated);
  --color-ink: var(--text);
  --color-muted: var(--muted);
  --color-border: var(--line-strong);
  --bs-glow: var(--glow);

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --cu-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root { --dock-h: 0px; }

/* ============ Stacking order ============
   One scale for every floating layer. Keep these in order and use the token
   instead of a literal, otherwise a new overlay lands in the middle of the
   chrome and gets painted over by the dock and the buy bar.

   Anything that covers the page must carry `data-overlay` so the chrome
   underneath hides instead of showing through it. */
:root {
  --z-chrome-top: 54;    /* back-to-top */
  --z-chrome-dock: 55;   /* mobile tab bar */
  --z-chrome-bar: 56;    /* sticky buy bar */
  --z-chrome-fab: 60;    /* assistant launcher, scroll progress */
  --z-overlay: 90;       /* scrims for sheets, modals, lightboxes */
  --z-overlay-top: 95;   /* toasts: must stay readable above a modal */
}

/* The dock, buy bar, back-to-top and assistant launcher all live in the same
   bottom corner. With a sheet open they stack on top of its buttons, so they
   step aside for the duration. */
html:has([data-overlay]) .cu-dock,
html:has([data-overlay]) .cu-buybar,
html:has([data-overlay]) .cu-top,
html:has([data-overlay]) .bs-gemini-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s var(--cu-ease),
    visibility 0.2s var(--cu-ease);
}

/* Freezing the page behind the sheet, without the scroll jump that comes from
   switching the body to `position: fixed`. */
html:has([data-overlay]) body {
  overflow: hidden;
  touch-action: none;
}

/* Toasts outrank modals: an "added to cart" or error message raised while a
   sheet is open still has to be readable. */
.cu-toasts {
  z-index: var(--z-overlay-top);
}

/* Full-screen scrim for a sheet, modal or lightbox. */
.cu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  background: rgb(0 0 0 / 0.5);
}

/* Panel inside a .cu-overlay. Follows the theme instead of a hardcoded white,
   which read as a bright slab in dark mode. */
.cu-sheet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 -1px 0 rgb(255 236 214 / 0.06) inset,
    0 -20px 60px -20px var(--glow);
  max-height: 86vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ============ Tokens — light (ivory), storefront only ============ */
:root[data-theme="light"] .store-shell,
:root[data-theme="light"] .store-shell [data-atmosphere="tech"] {
  --cu-ring: conic-gradient(from var(--cu-angle), #9c4815, #d97b2c, #ffd9a8, #e08a3c, #7a3510, #b8601f, #f0a050, #ffd9a8, #9c4815);
  --cu-text: linear-gradient(135deg, #7a3510 10%, #b8601f 45%, #d97b2c 75%, #9c4815 100%);

  --bg: #f6efe4;
  --surface: #fffaf3;
  --elevated: #ffffff;
  --text: #2b1a0d;
  --muted: #7d6450;
  --line: rgba(60, 30, 10, 0.08);
  --line-strong: rgba(60, 30, 10, 0.14);
  --hover: rgba(184, 96, 31, 0.08);
  --border: rgba(184, 96, 31, 0.24);
  --glow: rgba(217, 123, 44, 0.3);
  --glow-soft: rgba(217, 123, 44, 0.12);
  --card-bg: linear-gradient(165deg, #fffdf9, #fbf2e5);
  --header-bg: rgba(255, 250, 243, 0.8);
  --input-bg: #ffffff;
  --icon: #9c4815;
  --shadow-deep: 0 20px 44px rgba(122, 53, 16, 0.14);
  --atmo-a: rgba(217, 123, 44, 0.16);
  --atmo-b: rgba(255, 255, 255, 0.7);
  --atmo-c: rgba(240, 160, 80, 0.12);
  --blob-a: rgba(240, 160, 80, 0.3);
  --blob-b: rgba(255, 220, 180, 0.4);
  --ok: #15803d;

  --secondary: #9c4815;
  --color-primary: #b8601f;
  --color-primary-dark: #7a3510;
  --color-primary-light: #9c4815;
  --color-accent: #d97b2c;
  --color-accent-light: #b8601f;
  color-scheme: light;
}

/* `hidden` turns body/#app into scroll containers, which silently breaks the sticky header */
html,
html body,
html #app { overflow-x: clip !important; }

:root { color-scheme: dark; }
:root[data-theme="light"]:has(.store-shell) { --bg: #f6efe4; }

/* ============ Base surfaces ============ */
html .store-shell.gradient-atmosphere {
  background:
    radial-gradient(760px 460px at 10% -10%, var(--atmo-a), transparent 60%),
    radial-gradient(560px 380px at 95% 6%, var(--atmo-b), transparent 62%),
    radial-gradient(620px 420px at 50% 105%, var(--atmo-c), transparent 58%),
    var(--bg) !important;
  transition: background-color 0.4s var(--cu-ease);
}

html .store-shell.gradient-atmosphere::before {
  background: radial-gradient(circle, var(--blob-a), transparent 70%);
}

html .store-shell.gradient-atmosphere::after {
  background: radial-gradient(circle, var(--blob-b), transparent 72%);
}

::selection {
  background: var(--cu-400);
  color: #1a0d04;
}

/* Remap the old navy hardcoded surfaces to the copper palette (both themes) */
html .store-shell .bg-\[\#070a14\]\/85,
html .store-shell .bg-\[\#070a14\]\/95 { background-color: var(--header-bg) !important; }
html .store-shell .bg-\[\#10182c\],
html .store-shell .bg-\[\#10182c\]\/96 { background-color: var(--surface) !important; }
html .store-shell .bg-\[\#0c1220\] { background-color: var(--elevated) !important; }
html .store-shell .bg-\[\#0b1224\],
html .store-shell .bg-\[\#0b1224\]\/70 { background-color: var(--surface) !important; }
html .store-shell .border-white\/10,
html .store-shell .border-white\/15,
html .store-shell .border-white\/20,
html .store-shell :is(.border, .border-t, .border-b, .border-y):not([class*="border-primary"]):not([class*="border-accent"]):not([class*="border-emerald"]) {
  border-color: var(--line-strong) !important;
}
html .store-shell .bg-white\/5,
html .store-shell .bg-white\/10,
html .store-shell .hover\:bg-white\/5:hover,
html .store-shell .hover\:bg-surface-warm:hover,
html .store-shell .hover\:bg-stone-50:hover { background-color: var(--hover) !important; }
html .store-shell .ring-white\/10 { --tw-ring-color: var(--line-strong) !important; }
html .store-shell .bg-surface-warm\/50,
html .store-shell .bg-surface-warm\/80 { background-color: var(--surface) !important; }
html .store-shell .bg-stone-50,
html .store-shell .bg-stone-100 { background-color: var(--hover) !important; color: inherit !important; }

:root[data-theme="light"] .store-shell .text-emerald-400,
:root[data-theme="light"] .store-shell .text-emerald-500 { color: #15803d !important; }
:root[data-theme="light"] .store-shell .text-amber-400 { color: #b45309 !important; }
:root[data-theme="light"] .store-shell .fill-amber-400 { fill: #d97706 !important; }

/* ============ Header (glass + copper hairline) ============ */
html header.sticky {
  background: var(--header-bg) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid transparent !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

html header.sticky::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cu-500) 20%, var(--cu-200) 50%, var(--cu-500) 80%, transparent);
  opacity: 0.7;
  pointer-events: none;
}

html header input.input-field[type="search"] {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 1px 0 var(--line), 0 8px 20px rgba(0, 0, 0, 0.1);
}
html header input.input-field[type="search"]::placeholder { color: var(--muted); }
html header input.input-field[type="search"]:focus {
  border-color: var(--cu-400) !important;
  box-shadow: 0 0 0 3px var(--glow-soft), 0 0 22px var(--glow) !important;
}
html header form.relative > svg { color: var(--icon); }

html header nav > .relative > button,
html header select,
html header button.bg-white {
  color: var(--text) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
}
html header select option,
html header select optgroup {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] header select { color-scheme: light; }

html header .ms-auto a,
html header .ms-auto button { color: var(--icon); }
html header .ms-auto a:hover,
html header .ms-auto button:hover {
  color: var(--text);
  background-color: var(--hover);
}

html header .relative.w-full > .absolute,
html header .absolute.end-0.top-full,
html .bs-cat-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-deep) !important;
}
html header .absolute.end-0.top-full a,
html header .absolute.end-0.top-full button { color: var(--text) !important; }

html .bs-brand-name { background: var(--cu-text); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="light"] .bs-brand-logo,
:root[data-theme="light"] .bs-logo-img { filter: drop-shadow(0 8px 10px rgba(122, 53, 16, 0.25)); }

/* ============ Footer ============ */
html footer {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border) !important;
}

/* ============ Rounded copper borders + glow ============ */
html .sx-card-3d,
html .group.relative.flex.flex-col.overflow-hidden,
html .bs-cat,
html .card,
html .store-shell [class*="rounded-2xl"][class*="border"] {
  background: linear-gradient(165deg, rgb(248 240 232 / 0.07), rgb(12 8 6 / 0.62)) !important;
  border: 1px solid rgb(255 255 255 / 0.1) !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: box-shadow 200ms var(--cu-ease), border-color 200ms var(--cu-ease);
}
:root[data-theme="light"] .store-shell .sx-card-3d,
:root[data-theme="light"] .store-shell .bs-cat,
:root[data-theme="light"] .store-shell .card,
:root[data-theme="light"] .store-shell [class*="rounded-2xl"][class*="border"] {
  background: linear-gradient(165deg, rgb(255 250 243 / 0.82), rgb(251 242 229 / 0.9)) !important;
  border-color: rgb(60 30 10 / 0.12) !important;
}

html .sx-card-3d,
html .bs-cat {
  position: relative;
  isolation: isolate;
}

/* Metallic ring drawn with a masked conic gradient so the radius stays perfect */
html .sx-card-3d::after,
html .bs-cat::after,
.cu-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--cu-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 200ms var(--cu-ease);
}

/* Pointer-follow copper spotlight (vars set by effects/copperFx.js) */
html .sx-card-3d::before,
html .bs-cat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -20%), var(--glow-soft), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--cu-ease);
}

@media (hover: hover) and (pointer: fine) {
  html .sx-card-3d:hover::after,
  html .bs-cat:hover::after,
  .cu-ring:hover::after {
    opacity: 1;
    animation: cu-spin 3.2s linear infinite;
  }
  html .sx-card-3d:hover::before,
  html .bs-cat:hover::before { opacity: 1; }
  html .sx-card-3d:hover,
  html .bs-cat:hover {
    box-shadow: 0 0 0 1px var(--glow-soft), 0 22px 46px var(--glow-soft), 0 0 34px var(--glow-soft) !important;
  }
}

/* Touch: the card nearest the screen centre gets the live ring (class set by copperFx) */
html .sx-card-3d.cu-live::after,
html .bs-cat.cu-live::after {
  opacity: 1;
  animation: cu-spin 3.6s linear infinite;
}
html .sx-card-3d.cu-live,
html .bs-cat.cu-live { box-shadow: 0 18px 40px var(--glow-soft) !important; }

@keyframes cu-spin { to { --cu-angle: 360deg; } }

.sx-card-3d .sx-glare { z-index: 3; }

html .bs-cat-media,
html .sx-card-3d > a:first-of-type {
  border-radius: calc(var(--r-lg) - 6px);
  background-color: var(--elevated) !important;
}
html .sx-card-3d > a:first-of-type { border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* ============ Buttons ============ */
html .bs-btn-primary,
html .btn-primary,
html .btn-accent,
html button.bg-primary,
html a.bg-primary {
  position: relative;
  overflow: hidden;
  background: var(--cu-metal) !important;
  background-size: 160% 160% !important;
  color: #1a0d04 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.55), inset 0 -2px 0 rgba(61, 26, 6, 0.35), 0 10px 26px var(--glow) !important;
  transition: transform 0.22s var(--cu-ease), box-shadow 0.22s, background-position 0.6s var(--cu-ease) !important;
}

html .bs-btn-primary::after,
html .btn-primary::after,
html .btn-accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 248, 235, 0.65) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

@media (hover: hover) {
  html .bs-btn-primary:hover,
  html .btn-primary:hover:not(:disabled),
  html .btn-accent:hover {
    background-position: 100% 50% !important;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.6), 0 16px 34px var(--glow) !important;
  }
  html .bs-btn-primary:hover::after,
  html .btn-primary:hover::after,
  html .btn-accent:hover::after {
    transform: translateX(120%);
    transition: transform 0.8s var(--cu-ease);
  }
}

html .bs-btn-primary:active,
html .btn-primary:active,
html button.bg-primary:active { transform: scale(0.96); }

html .bs-btn-ghost,
html .btn-outline {
  background: var(--hover) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
}

/* ============ Inputs ============ */
html .store-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html .store-shell textarea,
html .store-shell select,
html .input-field {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
}
html .store-shell input:focus,
html .store-shell textarea:focus,
html .store-shell select:focus,
html .input-field:focus {
  border-color: var(--cu-400) !important;
  box-shadow: 0 0 0 3px var(--glow-soft), 0 0 18px var(--glow-soft) !important;
  outline: none;
}
html .input-field::placeholder { color: var(--muted) !important; }
html header input.input-field[type="search"] { border-radius: 999px !important; }

/* ============ Sections ============ */
html .bs-trust {
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  border-bottom: 1px solid var(--line-strong) !important;
}
html .bs-flash {
  background: linear-gradient(135deg, var(--glow-soft), transparent 60%) !important;
  border-block: 1px solid var(--line-strong) !important;
}
html .skeleton { background: var(--hover) !important; border-radius: var(--r) !important; }
html .skeleton::after { background: linear-gradient(90deg, transparent, var(--glow-soft), transparent) !important; }

html .bs-gemini-drawer,
html .bs-gemini-sheet {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html .bs-gemini-fab { background: var(--cu-metal) !important; color: #1a0d04 !important; }

.cu-title {
  background: var(--cu-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html .bs-hero-title .bs-hero-line:last-child {
  background: var(--cu-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html .bs-kicker {
  border: 1px solid var(--border) !important;
  background: var(--hover) !important;
  color: var(--cu-300) !important;
}
:root[data-theme="light"] .bs-kicker { color: var(--cu-600) !important; }

/* Section heading underline that draws in when revealed */
.cu-heading {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.cu-heading::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--cu-metal);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.9s var(--cu-ease) 0.15s;
}
.is-in .cu-heading::after,
.cu-heading.is-in::after { transform: scaleX(1); }

/* ============ Logo 3D (layered extrusion) ============ */
.cu-logo3d {
  --size: 220px;
  --depth: 14;
  position: relative;
  width: var(--size);
  height: var(--size);
  perspective: 900px;
  pointer-events: none;
}
.cu-logo3d-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--sy, 0deg))) rotateZ(var(--rz, 0deg)) scale(var(--s, 1));
  will-change: transform;
}
.cu-logo3d.is-spinning .cu-logo3d-rig {
  animation: cu-logo-spin 9s linear infinite;
}
.cu-logo3d-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(calc(var(--i) * -1px * var(--step, 1.4)));
  filter: brightness(calc(0.55 - var(--i) * 0.02)) saturate(1.2);
  backface-visibility: visible;
}
:root[data-theme="light"] .cu-logo3d-layer {
  filter: brightness(calc(0.82 - var(--i) * 0.015)) sepia(0.35) saturate(1.3);
}
.cu-logo3d-face {
  position: absolute;
  inset: 0;
  transform: translateZ(1px);
  filter: drop-shadow(0 0 22px var(--glow));
}
.cu-logo3d-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cu-logo3d-sheen {
  position: absolute;
  inset: 0;
  transform: translateZ(2px);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 244, 222, 0.85) 48%, transparent 64%);
  background-size: 260% 100%;
  animation: cu-sheen 3.6s var(--cu-ease) infinite;
  -webkit-mask: url('/brand/logo-b.webp') center / contain no-repeat;
  mask: url('/brand/logo-b.webp') center / contain no-repeat;
  mix-blend-mode: screen;
}
.cu-logo3d-floor {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -14%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--glow), transparent 70%);
  filter: blur(14px);
  transform: rotateX(80deg);
}

@keyframes cu-logo-spin {
  from { transform: rotateX(8deg) rotateY(0deg); }
  to { transform: rotateX(8deg) rotateY(360deg); }
}
@keyframes cu-sheen {
  0%, 45% { background-position: 130% 0; }
  100% { background-position: -40% 0; }
}

/* ============ Intro ============ */
.cu-intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, #1d120a, #070403 70%);
  transition: opacity 0.6s var(--cu-ease), visibility 0.6s;
}
:root[data-theme="light"] .cu-intro { background: radial-gradient(circle at 50% 45%, #fffaf3, #efe2cf 75%); }
.cu-intro.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.cu-intro-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
}
.cu-intro .cu-logo3d { animation: cu-intro-in 1.6s var(--cu-ease) both; }
.cu-intro-word {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.32em;
  font-size: clamp(16px, 4vw, 22px);
  background: var(--cu-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cu-rise 0.9s var(--cu-ease) 0.9s both;
}
.cu-intro-check {
  position: absolute;
  top: 14px;
  left: calc(50% - 70px);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid var(--cu-300);
  opacity: 0;
  animation: cu-ring-pulse 1.1s var(--cu-ease) 1.2s both;
}
.cu-intro-skip {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  inset-inline-end: 16px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--hover);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
@keyframes cu-intro-in {
  0% { opacity: 0; transform: translateZ(-400px) rotateY(-220deg) scale(0.3); filter: blur(12px); }
  60% { opacity: 1; filter: none; transform: rotateY(18deg) scale(1.08); }
  100% { opacity: 1; transform: none; }
}
@keyframes cu-ring-pulse {
  0% { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes cu-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ============ Hero centrepiece ============ */
.cu-hero-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.cu-hero-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 92%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(72deg);
  border-radius: 50%;
  border: 1px solid var(--border);
  box-shadow: 0 0 40px var(--glow-soft), inset 0 0 40px var(--glow-soft);
  pointer-events: none;
}
.cu-hero-orbit::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  padding: 1.5px;
  background: var(--cu-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cu-spin 8s linear infinite;
}

html .bs-hero-stage .bs-ring { display: none !important; }
html .bs-hero-float { z-index: 2; }
html .bs-hero-float.hf-4 { right: 0; top: 48%; }
html .bs-hero-float.hf-5 { left: 0; bottom: 4%; }
html .bs-hero-float .bs-viz-img {
  border-radius: var(--r-lg) !important;
  box-shadow: 0 0 0 1.5px var(--border), 0 18px 36px rgba(0, 0, 0, 0.28) !important;
}
html .bs-float-tip {
  background: var(--header-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(10px);
}

@media (max-width: 960px) {
  html .bs-hero-stage {
    display: grid !important;
    justify-items: center;
    padding-top: 6px;
  }
  html .cu-hero-core {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 4px auto 14px;
  }
  html .cu-hero-orbit {
    top: 94px;
    width: min(320px, 86vw);
  }
  html .bs-stage-floor { display: none !important; }
  html .bs-float-rail {
    display: flex !important;
    gap: 12px !important;
    width: calc(100% + 24px) !important;
    margin-inline: -12px;
    padding: 6px 12px 16px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  html .bs-float-rail::-webkit-scrollbar { display: none; }
  html .bs-hero-float {
    flex: 0 0 clamp(132px, 40%, 190px) !important;
    width: clamp(132px, 40%, 190px) !important;
    scroll-snap-align: start;
  }
  html .bs-hero-float .bs-viz-img {
    background: var(--card-bg) !important;
  }
  html .bs-hero h1,
  html .bs-hero-title {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em;
  }
  html .bs-hero-lead { font-size: 14px !important; }
  html .bs-hero-cta .bs-btn { flex: 1 1 0; min-height: 50px; }
}

/* ============ Smart Pick badge ============ */
.cu-smart-pick {
  position: absolute;
  inset-inline-end: 8px;
  top: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 6px;
  border-radius: 999px;
  background: var(--cu-metal);
  color: #1a0d04;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px var(--glow), inset 0 1px 0 rgba(255, 240, 220, 0.6);
}
.cu-smart-pick svg { width: 12px; height: 12px; }

/* ============ ✓ burst on add-to-cart ============ */
.cu-check-burst {
  position: fixed;
  z-index: 350;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  pointer-events: none;
}
.cu-check-burst .cu-check-disc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cu-metal);
  box-shadow: 0 0 0 4px var(--glow-soft), 0 12px 30px var(--glow);
  animation: cu-pop 0.9s var(--cu-ease) both;
}
.cu-check-burst svg {
  width: 34px;
  height: 34px;
  stroke: #fff8ec;
  stroke-width: 3.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: cu-draw 0.45s var(--cu-ease) 0.18s forwards;
  filter: drop-shadow(0 1px 1px rgba(61, 26, 6, 0.6));
}
.cu-check-burst .cu-check-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cu-300);
  animation: cu-ring-pulse 0.8s var(--cu-ease) 0.1s both;
}
.cu-check-bit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 2px;
  background: var(--cu-300);
}
@keyframes cu-pop {
  0% { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  40% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  70% { transform: scale(1); }
  100% { transform: scale(0.9) translateY(-14px); opacity: 0; }
}
@keyframes cu-draw { to { stroke-dashoffset: 0; } }

/* ============ Mobile dock ============ */
.cu-dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: var(--z-chrome-dock);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: 64px;
  padding: 0 6px;
  border-radius: 24px;
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow-deep), inset 0 1px 0 var(--line-strong);
  transition: transform 0.4s var(--cu-ease);
}
.cu-dock.is-hidden { transform: translateY(calc(100% + 24px)); }
.cu-dock::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--cu-700), var(--cu-200), var(--cu-500), var(--cu-700));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  opacity: 0.8;
}
.cu-dock-item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s, transform 0.25s var(--cu-ease);
}
.cu-dock-item svg { width: 22px; height: 22px; transition: transform 0.35s var(--cu-ease); }
.cu-dock-item:active { transform: scale(0.9); }
.cu-dock-item.is-active { color: var(--text); }
.cu-dock-item.is-active svg { transform: translateY(-2px); color: var(--cu-300); filter: drop-shadow(0 4px 10px var(--glow)); }
:root[data-theme="light"] .cu-dock-item.is-active svg { color: var(--cu-500); }
.cu-dock-item.is-active::before {
  content: '';
  position: absolute;
  top: -1px;
  width: 26px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--cu-metal);
  box-shadow: 0 0 12px var(--glow);
}
/* the bronze cart pill sits inside the dock, in line with the other items (no bubble poking out above it) */
.cu-dock-cart { padding: 5px 0; }
.cu-dock-cart .cu-dock-cart-disc {
  display: grid;
  place-items: center;
  width: 48px;
  height: 32px;
  border-radius: 12px;
  background: var(--cu-metal);
  color: #1a0d04;
  box-shadow: 0 6px 14px -4px var(--glow), inset 0 1px 0 rgba(255, 240, 220, 0.6), inset 0 -2px 0 rgba(61, 26, 6, 0.3);
  transition: transform 0.35s var(--cu-ease);
}
.cu-dock-cart .cu-dock-cart-disc svg { width: 20px; height: 20px; }
.cu-dock-cart.is-active .cu-dock-cart-disc,
.cu-dock-cart:active .cu-dock-cart-disc { transform: scale(1.06); }
.cu-dock-cart svg { color: #1a0d04 !important; filter: none !important; }
.cu-dock-cart.is-active::before { display: none; }
.cu-dock-badge {
  position: absolute;
  top: -2px;
  inset-inline-end: calc(50% - 32px);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.cu-dock-badge.is-tick { animation: bs-cart-bounce 0.55s var(--cu-ease); }

@media (max-width: 1023px) {
  :root { --dock-h: 86px; }
  html .store-shell main { padding-bottom: var(--dock-h); }
  html .bs-gemini-fab { bottom: calc(var(--dock-h) + 8px) !important; }
  html .cu-toasts { bottom: calc(var(--dock-h) + 8px); }
}
@media (min-width: 1024px) {
  .cu-dock { display: none; }
}

/* ============ Scroll progress / back-to-top / cursor ============ */
.cu-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-chrome-fab);
  height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: var(--cu-metal);
  box-shadow: 0 0 12px var(--glow);
  pointer-events: none;
}
[dir="rtl"] .cu-progress { transform-origin: 100% 50%; }

.cu-top {
  position: fixed;
  inset-inline-start: 16px;
  bottom: calc(var(--dock-h) + 16px);
  z-index: var(--z-chrome-top);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--icon);
  cursor: pointer;
  box-shadow: var(--shadow-deep);
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.35s var(--cu-ease);
}
.cu-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cu-top svg.cu-top-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.cu-top-ring circle { fill: none; stroke-width: 3; }
.cu-top-ring .track { stroke: var(--line-strong); }
.cu-top-ring .bar { stroke: url(#cu-grad); stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }

.cu-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-soft), transparent 65%);
  pointer-events: none;
  transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0);
  transition: opacity 0.4s;
  mix-blend-mode: screen;
}
:root[data-theme="light"] .cu-cursor { mix-blend-mode: multiply; opacity: 0.7; }
@media (hover: none), (pointer: coarse) { .cu-cursor { display: none; } }

/* ============ Theme toggle ============ */
.cu-theme {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--icon);
  cursor: pointer;
  perspective: 300px;
  overflow: hidden;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.cu-theme:hover { border-color: var(--cu-400); box-shadow: 0 0 16px var(--glow-soft); }
.cu-theme-cube {
  position: relative;
  width: 20px;
  height: 20px;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--cu-ease);
}
.cu-theme-cube > svg {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  backface-visibility: hidden;
}
.cu-theme-cube > svg:last-child { transform: rotateY(180deg); }
.cu-theme.is-light .cu-theme-cube { transform: rotateY(180deg); }

html.sx-theme-vt::view-transition-old(root),
html.sx-theme-vt::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.sx-theme-vt::view-transition-new(root) { z-index: 9999; }

/* ============ Sticky buy bar (product page, phones) ============ */
.cu-buybar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: var(--z-chrome-bar);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border-radius: 22px;
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-deep);
  transform: translateY(160%);
  transition: transform 0.45s var(--cu-ease);
}
.cu-buybar.is-on { transform: none; }
html.cu-dock-hidden .cu-top { bottom: max(16px, env(safe-area-inset-bottom)); }
@media (max-width: 1023px) {
  /* back-to-top stacks above the support chat bubble instead of on top of it */
  .cu-top { bottom: calc(var(--dock-h) + 76px); }
  /* one bar at a time: while the buy bar is up it takes the dock's place at the bottom and the dock steps away,
     so the two never slide over each other; the floating buttons rise above the bar (--dock-h) */
  html:has(.cu-buybar.is-on) { --dock-h: 84px; }
  html:has(.cu-buybar.is-on) .cu-dock { transform: translateY(calc(100% + 24px)); }
  html:has(.cu-buybar.is-on) .cu-top { bottom: calc(var(--dock-h) + 76px); }
}
.cu-buybar img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--elevated);
}
.cu-buybar .btn-primary { min-height: 46px; padding: 0 18px; white-space: nowrap; }
@media (min-width: 1024px) { .cu-buybar { display: none; } }

/* ============ Recently viewed rail ============ */
.cu-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  perspective: 900px;
}
.cu-rail::-webkit-scrollbar { display: none; }
.cu-rail-item {
  position: relative;
  flex: 0 0 132px;
  scroll-snap-align: start;
  padding: 8px;
  border-radius: var(--r);
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.4s var(--cu-ease), box-shadow 0.4s;
}
.cu-rail-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  background: var(--elevated);
  display: block;
}
.cu-rail-item b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.cu-rail-item small { color: var(--color-primary); font-weight: 800; font-size: 12px; }
@media (hover: hover) {
  .cu-rail-item:hover { transform: translateY(-6px) rotateX(6deg); box-shadow: 0 18px 34px var(--glow-soft); }
}

/* ============ 3D flip countdown ============ */
.cu-flip {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  height: 56px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--line-strong);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  perspective: 300px;
  overflow: hidden;
}
.cu-flip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line-strong);
}
.cu-flip span {
  display: block;
  background: var(--cu-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cu-flip-in 0.5s var(--cu-ease);
  transform-origin: 50% 0;
}
.cu-flip small {
  position: absolute;
  bottom: 3px;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
@keyframes cu-flip-in {
  from { transform: rotateX(-90deg); opacity: 0.2; }
  to { transform: none; opacity: 1; }
}

/* ============ Checkout success ============ */
.cu-success {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 40px 16px 64px;
  text-align: center;
}
.cu-success-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 240px;
  height: 240px;
}
.cu-success-check {
  position: absolute;
  right: 8px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cu-metal);
  box-shadow: 0 0 0 6px var(--glow-soft), 0 16px 36px var(--glow);
  animation: cu-pop-stay 0.9s var(--cu-ease) 0.8s both;
}
.cu-success-check svg {
  width: 38px;
  height: 38px;
  stroke: #fff8ec;
  stroke-width: 3.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: cu-draw 0.5s var(--cu-ease) 1.2s forwards;
}
@keyframes cu-pop-stay {
  0% { transform: scale(0.2) rotate(-40deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* ============ Reveal upgrade: 3D tilt-in ============ */
html[data-quality="full"] [data-reveal] {
  transform: perspective(1200px) translateY(36px) rotateX(10deg) scale(0.98);
  transform-origin: 50% 100%;
}
html[data-quality="full"] [data-reveal].is-in { transform: none; }

/* ============ Lite + reduced motion ============ */
html[data-quality="lite"] .cu-cursor,
html[data-quality="lite"] .cu-logo3d-sheen { display: none; }
html[data-quality="lite"] .cu-logo3d-layer:nth-child(n + 6) { display: none; }
html[data-quality="lite"] .cu-dock,
html[data-quality="lite"] .cu-buybar,
html[data-quality="lite"] header.sticky,
html[data-quality="lite"] .sx-card-3d,
html[data-quality="lite"] .bs-cat,
html[data-quality="lite"] .card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface) !important;
}

/* Clean alpha: the mark itself carries transparency. No matte plate behind it. */
html .bs-brand-logo,
html .cu-logo3d-face img,
html .cu-logo3d-layer,
html .bs-logo-img {
  background: transparent;
  mix-blend-mode: normal;
}

/* ============ Ambient field — logo palette only ============
   #e88018 copper, #f09020 highlight, #f8f0e8 ivory, #681800 deep copper */
.sx-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.sx-ambient-glow,
.sx-ambient-mark {
  position: absolute;
  display: block;
  will-change: transform;
}
.sx-ambient-glow {
  border-radius: 50%;
  animation: sx-drift 52s ease-in-out infinite alternate;
}
.sx-ambient-glow--copper {
  width: min(680px, 72vw);
  height: min(680px, 72vw);
  left: -14%;
  top: -16%;
  background: radial-gradient(circle, rgb(232 128 24 / 0.20), transparent 68%);
  --dx: 7vw;
  --dy: 9vh;
}
.sx-ambient-glow--ivory {
  width: min(520px, 58vw);
  height: min(520px, 58vw);
  right: -10%;
  top: 8%;
  background: radial-gradient(circle, rgb(248 240 232 / 0.10), transparent 70%);
  animation-duration: 64s;
  animation-direction: alternate-reverse;
  --dx: -6vw;
  --dy: 7vh;
}
.sx-ambient-glow--deep {
  width: min(640px, 70vw);
  height: min(420px, 46vw);
  left: 22%;
  bottom: -18%;
  background: radial-gradient(circle, rgb(104 24 0 / 0.28), transparent 70%);
  animation-duration: 58s;
  --dx: 4vw;
  --dy: -6vh;
}
.sx-ambient-mark {
  width: 52px;
  height: 52px;
  opacity: 0.16;
  background: #e88018;
  -webkit-mask: url('/brand/logo-b.webp') center / contain no-repeat;
  mask: url('/brand/logo-b.webp') center / contain no-repeat;
  animation: sx-float 42s ease-in-out infinite;
  animation-delay: calc(var(--i) * -7s);
}
.sx-ambient-mark:nth-child(4) { left: 4%; top: 92%; --dx: 18px; --dy: -28px; }
.sx-ambient-mark:nth-child(5) { right: 6%; top: 62%; left: auto; width: 68px; height: 68px; background: #f09020; --dx: -22px; --dy: 18px; animation-duration: 50s; }
.sx-ambient-mark:nth-child(6) { left: 78%; top: 82%; width: 40px; height: 40px; background: #681800; opacity: 0.28; --dx: -14px; --dy: -20px; animation-duration: 46s; }
.sx-ambient-mark:nth-child(7) { left: 14%; top: 78%; width: 60px; height: 60px; background: #f8f0e8; opacity: 0.08; --dx: 16px; --dy: -12px; animation-duration: 54s; }
.sx-ambient-mark:nth-child(8) { left: 42%; top: 88%; width: 36px; height: 36px; opacity: 0.12; --dx: -10px; --dy: 22px; animation-duration: 48s; }
.sx-ambient-mark:nth-child(9) { left: 62%; top: 18%; width: 44px; height: 44px; opacity: 0.1; --dx: 12px; --dy: -16px; animation-duration: 56s; }

@keyframes sx-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--dx, 4vw), var(--dy, 6vh), 0); }
}
@keyframes sx-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(var(--dx, 12px), var(--dy, -18px), 0); }
}

@media (max-width: 768px) {
  .sx-ambient-mark { display: none; }
  .sx-ambient-glow { animation: none; }
  .sx-ambient-glow--ivory { display: none; }
}
html[data-quality="lite"] .sx-ambient-mark { display: none; }
html[data-quality="lite"] .sx-ambient-glow { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .cu-logo3d.is-spinning .cu-logo3d-rig,
  .cu-logo3d-sheen,
  .cu-hero-orbit::before,
  html .sx-card-3d::after,
  html .bs-cat::after,
  .cu-intro .cu-logo3d,
  .cu-flip span,
  .sx-ambient-glow,
  .sx-ambient-mark { animation: none !important; }
  .cu-cursor,
  .sx-ambient-mark { display: none; }
}
/* BUYSMART — page layer on top of the original copper theme.
   Only adds the new pieces (mega menu, sign-in, account, mobile filters,
   cart landing). It does not change the store's colours, fonts or layout. */
:root {
  --lx-cream: #f6efe4; --lx-cream-2: #efe6d4; --lx-paper: #fffaf3; --lx-white: #ffffff;
  --lx-ink: #2b1a0d; --lx-ink-soft: #4a3424; --lx-muted: #7d6450;
  --lx-gold: #b8601f; --lx-gold-deep: #7a3510; --lx-gold-light: #ffc98a;
  --lx-shadow: 0 1px 2px rgba(60, 30, 10, 0.06), 0 12px 32px -12px rgba(60, 30, 10, 0.18);
  --lx-shadow-lg: 0 2px 4px rgba(60, 30, 10, 0.05), 0 28px 60px -20px rgba(60, 30, 10, 0.28);
  --lx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.lx-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--lx-gold); }
.lx-link { color: var(--lx-gold-deep); background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.35s var(--lx-ease); }
.lx-link:hover { background-size: 100% 1px; }
@keyframes lx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lx-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } }
.lx-cat-trigger { color: var(--color-ink); transition: background-color 0.25s var(--lx-ease), color 0.25s; }
.lx-cat-trigger:hover, .lx-cat-trigger[aria-expanded="true"] { background: var(--hover, rgba(184, 96, 31, 0.08)); color: var(--color-primary); }
/* ============ Logo ============ */
.lx-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.lx-brand-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  transition: transform 0.6s var(--lx-ease);
}
.lx-brand-mark img { width: 44px; height: auto; filter: drop-shadow(0 6px 10px rgba(138, 74, 40, 0.25)); }
.lx-brand:hover .lx-brand-mark { transform: translateY(-2px) rotate(-6deg); }
.lx-brand-word { display: flex; flex-direction: column; line-height: 1; }
.lx-brand-name {
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 700; letter-spacing: 0.16em; color: var(--lx-ink);
}
.lx-brand-sub {
  margin-top: 3px; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.62em; color: var(--lx-gold);
}
.bs-brand--compact .lx-brand-word { display: none; }
@media (max-width: 420px) {
  .lx-brand-name { font-size: 1.05rem; letter-spacing: 0.1em; }
  .lx-brand-sub { letter-spacing: 0.45em; }
}

/* ============ Mega menu ============ */
.lx-mega {
  background: rgba(251, 247, 239, 0.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(42, 33, 25, 0.35);
  backdrop-filter: blur(16px);
}
.lx-mega-title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 600; line-height: 1.05; color: var(--lx-ink);
}
.lx-link { color: var(--lx-gold-deep); background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.35s var(--lx-ease); }
.lx-link:hover { background-size: 100% 1px; }

.lx-mega-card {
  position: relative; display: block; overflow: hidden;
  border-radius: 18px; background: var(--lx-white);
  box-shadow: var(--lx-shadow);
  transition: transform 0.45s var(--lx-ease), box-shadow 0.45s var(--lx-ease);
  animation: lx-rise 0.5s var(--lx-ease) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.lx-mega-card:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow-lg); }
.lx-mega-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lx-cream-2); }
.lx-mega-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--lx-ease);
}
.lx-mega-card:hover .lx-mega-img img { transform: scale(1.07); }
.lx-mega-name {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.7rem;
  font-size: 0.86rem; font-weight: 600; color: #fffdf8;
  background: linear-gradient(to top, rgba(42, 33, 25, 0.72), transparent);
}

.lx-mega-enter-active, .lx-mega-leave-active { transition: opacity 0.28s var(--lx-ease), transform 0.28s var(--lx-ease); }
.lx-mega-enter-from, .lx-mega-leave-to { opacity: 0; transform: translateY(-8px); }

/* ============ Add to cart: fly + land ============ */
.bs-fly-ghost {
  border-radius: 999px !important;
  border: 2px solid #fffdf8 !important;
  background: var(--lx-white, #fffdf8) !important;
  box-shadow: 0 0 0 3px rgba(176, 100, 58, 0.55), 0 18px 40px -8px rgba(42, 33, 25, 0.45) !important;
}
.bs-fly-ghost--dot { background: linear-gradient(135deg, #e9b48c, #a9542e) !important; }
[data-cart-icon].is-bounce { animation: lx-cart-land 0.7s var(--lx-ease, ease) both !important; }
[data-cart-icon] { position: relative; }
[data-cart-icon].is-bounce::after {
  content: ''; position: absolute; inset: -6px; border-radius: 999px;
  border: 2px solid rgba(176, 100, 58, 0.7);
  animation: lx-ring 0.7s ease-out both;
  pointer-events: none;
}
@keyframes lx-cart-land {
  0% { transform: scale(1); }
  30% { transform: scale(1.28) rotate(-8deg); }
  55% { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes lx-ring {
  from { opacity: 1; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.6); }
}

/* ============ Sign in / register ============ */
.lx-auth {
  min-height: 100vh; display: grid; grid-template-columns: 1fr;
  background: var(--lx-cream); color: var(--lx-ink);
}
@media (min-width: 1024px) { .lx-auth { grid-template-columns: 1.05fr 1fr; } }
.lx-auth-art {
  position: relative; overflow: hidden; display: none;
  flex-direction: column; justify-content: flex-end; padding: 56px;
  background: radial-gradient(120% 90% at 20% 10%, #fbf7ef 0%, #efe2cf 55%, #e6cfb4 100%);
}
@media (min-width: 1024px) { .lx-auth-art { display: flex; } }
.lx-auth-mark {
  position: absolute; top: 50%; left: 50%; width: min(46%, 300px);
  transform: translate(-50%, -62%);
  filter: drop-shadow(0 40px 50px rgba(138, 74, 40, 0.28));
  animation: lx-float 7s ease-in-out infinite;
}
@keyframes lx-float {
  0%, 100% { transform: translate(-50%, -62%) rotate(-3deg); }
  50% { transform: translate(-50%, -66%) rotate(3deg); }
}
.lx-auth-orb { position: absolute; border-radius: 999px; filter: blur(40px); opacity: 0.7; }
.lx-auth-orb--a { width: 340px; height: 340px; top: -80px; left: -60px; background: #f0cdb4; animation: lx-drift 14s ease-in-out infinite alternate; }
.lx-auth-orb--b { width: 280px; height: 280px; bottom: -60px; right: -40px; background: #fffdf8; animation: lx-drift 18s ease-in-out infinite alternate-reverse; }
.lx-auth-quote {
  position: relative; font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem); font-weight: 600; line-height: 1; color: var(--lx-ink);
}
.lx-auth-note { position: relative; margin-top: 14px; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--lx-muted); }
.lx-auth-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 40px 16px;
}
.lx-auth-card {
  width: 100%; max-width: 420px; padding: 34px 30px;
  background: var(--lx-white); border-radius: 26px;
  box-shadow: var(--lx-shadow-lg); border: 1px solid rgba(42, 33, 25, 0.05);
}
@media (max-width: 480px) { .lx-auth-card { padding: 28px 20px; border-radius: 22px; } }
.lx-auth-title { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1.1; color: var(--lx-ink); }
.lx-auth-sub { margin-top: 6px; font-size: 0.9rem; color: var(--lx-muted); }
.lx-auth-error { padding: 10px 14px; border-radius: 12px; font-size: 0.85rem; background: #fbeae6; color: #9b2c1f; }
.lx-auth-switch { font-size: 0.9rem; color: var(--lx-muted); }
.lx-auth .input-field { background: var(--lx-white); border: 1px solid rgba(42, 33, 25, 0.14); border-radius: 14px; color: var(--lx-ink); }
.lx-auth label { color: var(--lx-ink-soft); }

/* Floating-label field */
.lx-field { position: relative; display: block; }
.lx-field input {
  width: 100%; height: 56px; padding: 22px 16px 6px; font-size: 0.98rem;
  color: var(--lx-ink); background: var(--lx-paper);
  border: 1px solid rgba(42, 33, 25, 0.12); border-radius: 14px; outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.lx-field input:focus { background: var(--lx-white); border-color: var(--lx-gold); box-shadow: 0 0 0 4px rgba(176, 100, 58, 0.14); }
.lx-field > span {
  position: absolute; inset-inline-start: 16px; top: 18px; font-size: 0.95rem; color: var(--lx-muted);
  pointer-events: none; transition: all 0.22s var(--lx-ease);
}
.lx-field input:focus + span,
.lx-field input:not(:placeholder-shown) + span { top: 8px; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--lx-gold-deep); }
.lx-field-eye {
  position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%);
  font-size: 0.75rem; font-weight: 600; color: var(--lx-gold-deep); background: none; border: 0; cursor: pointer;
}

/* ============ Catalog: filters first on mobile ============ */
.lx-filterbar {
  position: sticky; top: 64px; z-index: 30;
  display: flex; gap: 10px; margin: 14px -16px 0; padding: 10px 16px;
  background: rgba(245, 239, 227, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, rgba(42, 33, 25, 0.07));
}
.lx-filter-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 999px; border: 0; font-weight: 600; font-size: 0.92rem;
  color: #fffdf8; background: linear-gradient(135deg, #c27448, #92502b);
  box-shadow: 0 8px 18px -8px rgba(138, 74, 40, 0.6);
}
.lx-filter-sort {
  flex: 1; height: 44px; padding: 0 14px; border-radius: 999px; font-size: 0.9rem;
  color: var(--lx-ink); background: var(--lx-white); border: 1px solid rgba(42, 33, 25, 0.12);
}
@media (max-width: 1023px) {
  .lx-sheet {
    position: fixed !important; inset: auto 0 0 0; z-index: 91; width: 100% !important;
    max-height: 82vh; overflow-y: auto; border-radius: 24px 24px 0 0 !important;
    transform: translateY(105%); transition: transform 0.45s var(--lx-ease);
    box-shadow: 0 -20px 50px -20px rgba(42, 33, 25, 0.35) !important;
  }
  .lx-sheet::before {
    content: ''; display: block; width: 44px; height: 5px; margin: -6px auto 14px;
    border-radius: 99px; background: rgba(42, 33, 25, 0.15);
  }
  .lx-sheet.is-open { transform: none; }
}
.lx-sheet-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(42, 33, 25, 0.35); animation: lx-fade 0.3s ease both; }
.lx-sheet-done { font-weight: 600; font-size: 0.9rem; color: var(--lx-gold-deep); background: none; border: 0; }
@keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .lx-auth-mark, .lx-auth-orb { animation: none !important; }
}

/* ============ Customer account ============ */
.lx-account-hero {
  display: flex; align-items: center; gap: 16px; padding: 22px;
  border-radius: 24px; background: linear-gradient(135deg, #fffdf8 0%, #f6e7d8 100%);
  box-shadow: var(--lx-shadow); border: 1px solid rgba(176, 100, 58, 0.12);
  animation: lx-rise 0.6s var(--lx-ease) both;
}
.lx-avatar {
  display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.04em; color: #fffdf8;
  background: linear-gradient(135deg, #c27448, #8a4a28);
  box-shadow: 0 10px 20px -8px rgba(138, 74, 40, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lx-points {
  display: flex; flex-direction: column; align-items: center; padding: 10px 16px; border-radius: 16px;
  font-weight: 700; color: var(--lx-gold-deep); background: rgba(176, 100, 58, 0.1);
}
.lx-points span { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lx-muted); }
@media (max-width: 480px) { .lx-points { display: none; } .lx-account-hero h1 { font-size: 1.6rem; } }

.lx-account-nav {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin-inline: -16px; padding: 2px 16px;
}
.lx-account-nav::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .lx-account-nav {
    position: sticky; top: 90px; align-self: flex-start; flex-direction: column;
    margin: 0; padding: 10px; border-radius: 22px; background: var(--lx-white); box-shadow: var(--lx-shadow);
  }
}
.lx-account-link {
  display: inline-flex; align-items: center; gap: 10px; flex: none; white-space: nowrap;
  padding: 10px 14px; border-radius: 14px; border: 0; background: transparent; cursor: pointer;
  font-size: 0.9rem; font-weight: 500; color: var(--lx-ink-soft);
  transition: background-color 0.25s var(--lx-ease), color 0.25s;
}
@media (max-width: 1023px) {
  .lx-account-link { background: var(--lx-white); border-radius: 999px; box-shadow: 0 1px 2px rgba(42, 33, 25, 0.06); }
}
.lx-account-link:hover { background: var(--hover); color: var(--lx-gold-deep); }
.lx-account-link.is-active { color: #fffdf8; background: linear-gradient(135deg, #c27448, #92502b); box-shadow: 0 8px 18px -10px rgba(138, 74, 40, 0.7); }
.lx-account-logout { color: #9b2c1f; }
@media (min-width: 1024px) { .lx-account-logout { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; } }

.lx-stat {
  display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px;
  background: var(--lx-white); box-shadow: var(--lx-shadow); color: var(--lx-gold-deep);
  transition: transform 0.4s var(--lx-ease), box-shadow 0.4s var(--lx-ease);
}
.lx-stat:hover { transform: translateY(-3px); box-shadow: var(--lx-shadow-lg); }
.lx-stat b { margin-top: 6px; font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--lx-ink); }
.lx-stat span { font-size: 0.8rem; color: var(--lx-muted); }

.lx-order-row {
  display: block; padding: 16px; border-radius: 18px; background: var(--lx-paper);
  border: 1px solid var(--line); transition: border-color 0.25s, transform 0.35s var(--lx-ease);
}
.lx-order-row:hover { border-color: rgba(176, 100, 58, 0.35); transform: translateX(3px); }
.lx-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  color: var(--lx-gold-deep); background: rgba(176, 100, 58, 0.12);
}
.lx-pill[data-status="delivered"] { color: #166534; background: #dcfce7; }
.lx-pill[data-status="cancelled"], .lx-pill[data-status="returned"] { color: #9b2c1f; background: #fbeae6; }
.lx-pill[data-status="out_for_delivery"] { color: #9a3412; background: #ffedd5; }
.lx-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 12px; }
.lx-track span { height: 4px; border-radius: 99px; background: rgba(42, 33, 25, 0.08); }
.lx-track span.on { background: linear-gradient(90deg, #c27448, #e2b08e); }
.lx-empty { margin-top: 12px; padding: 36px 16px; text-align: center; border-radius: 20px; background: var(--lx-paper); }

.lx-page-enter-active, .lx-page-leave-active { transition: opacity 0.25s var(--lx-ease), transform 0.25s var(--lx-ease); }
.lx-page-enter-from { opacity: 0; transform: translateY(8px); }
.lx-page-leave-to { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .lx-mega-card, .lx-auth-mark, .lx-auth-orb, .lx-account-hero { animation: none !important; }
  .lx-mega-card, .lx-mega-img img, .lx-stat, .lx-order-row { transition: none !important; }
}

/* ============ Product gallery dots (phones) ============ */
.lx-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.lx-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: width 0.3s var(--lx-ease), background 0.3s; }
.lx-dots button.on { width: 20px; background: var(--color-primary, #b8601f); }

/* ============ Cart drawer ============ */
.lx-drawer-scrim { position: fixed; inset: 0; z-index: var(--z-overlay, 90); background: rgba(20, 12, 6, 0.42); }
.lx-drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: calc(var(--z-overlay, 90) + 1);
  width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--surface, #fffaf3); color: var(--color-ink, #2b1a0d);
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.35);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.lx-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-strong, rgba(60, 30, 10, 0.12)); }
.lx-drawer-x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--hover, rgba(184, 96, 31, 0.08)); color: inherit; cursor: pointer; }
.lx-drawer-list { flex: 1; overflow-y: auto; padding: 8px 20px; margin: 0; list-style: none; }
.lx-drawer-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line, rgba(60, 30, 10, 0.08)); animation: lx-rise 0.4s var(--lx-ease) both; }
.lx-drawer-item img, .lx-drawer-ph { width: 72px; height: 72px; flex: none; border-radius: 14px; object-fit: cover; background: var(--elevated, #fff); }
.lx-drawer-ph { display: grid; place-items: center; font-weight: 700; color: var(--color-primary); }
.lx-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong, rgba(60, 30, 10, 0.14)); border-radius: 99px; }
.lx-qty button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: none; color: inherit; cursor: pointer; }
.lx-qty span { min-width: 22px; text-align: center; font-size: 0.85rem; font-weight: 600; }
.lx-drawer-foot { padding: 18px 20px 20px; border-top: 1px solid var(--line-strong, rgba(60, 30, 10, 0.12)); }
.lx-drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.lx-drawer-enter-active, .lx-drawer-leave-active { transition: transform 0.42s var(--lx-ease); }
.lx-drawer-enter-from, .lx-drawer-leave-to { transform: translateX(100%); }
[dir="rtl"] .lx-drawer-enter-from, [dir="rtl"] .lx-drawer-leave-to { transform: translateX(-100%); }
.lx-fade-enter-active, .lx-fade-leave-active { transition: opacity 0.3s ease; }
.lx-fade-enter-from, .lx-fade-leave-to { opacity: 0; }

/* ============ Checkout steps + Whish copy ============ */
.lx-steps { display: flex; gap: 8px; margin: 14px 0 4px; padding: 0; list-style: none; }
.lx-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; font-size: 0.85rem; font-weight: 600; color: var(--color-muted, #7d6450); background: var(--hover, rgba(184, 96, 31, 0.06)); transition: all 0.35s var(--lx-ease); }
.lx-steps li span { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 99px; font-size: 0.75rem; background: rgba(0, 0, 0, 0.06); }
.lx-steps li.on { color: var(--color-ink, #2b1a0d); }
.lx-steps li.on span { color: #fff; background: var(--color-primary, #b8601f); }
.lx-steps li.done span { background: #15803d; }
@media (max-width: 480px) { .lx-steps li { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 0.72rem; text-align: center; } }
.lx-copy { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--color-primary, #b8601f); background: transparent; color: var(--color-primary, #b8601f); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.lx-copy:hover { background: var(--hover, rgba(184, 96, 31, 0.08)); }

/* ============ Order placed: timeline + WhatsApp ============ */
.lx-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; max-width: 460px; margin: 28px auto 0; padding: 0; list-style: none; }
.lx-timeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--color-muted, #7d6450); text-align: center; }
.lx-timeline li::before { content: ''; position: absolute; top: 7px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--line-strong, rgba(60, 30, 10, 0.14)); }
.lx-timeline li:first-child::before { display: none; }
.lx-timeline-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 99px; background: var(--elevated, #fff); border: 2px solid var(--line-strong, rgba(60, 30, 10, 0.2)); }
.lx-timeline li.on { color: var(--color-ink, #2b1a0d); font-weight: 600; }
.lx-timeline li.on .lx-timeline-dot { border-color: var(--color-primary, #b8601f); background: var(--color-primary, #b8601f); box-shadow: 0 0 0 5px rgba(184, 96, 31, 0.18); animation: lx-pulse 1.8s ease-in-out infinite; }
@keyframes lx-pulse { 50% { box-shadow: 0 0 0 9px rgba(184, 96, 31, 0.06); } }
.lx-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0.7rem 1.4rem; border-radius: 99px; font-weight: 600; color: #fff; background: #25d366; box-shadow: 0 10px 22px -10px rgba(37, 211, 102, 0.7); }

/* ============ Search: nothing found ============ */
.lx-noresults { margin: 48px auto 0; max-width: 560px; padding: 34px 20px; text-align: center; border-radius: 24px; background: var(--surface, #fffaf3); border: 1px solid var(--line, rgba(60, 30, 10, 0.08)); }
.lx-chip { display: inline-block; padding: 7px 14px; border-radius: 99px; font-size: 0.85rem; color: var(--color-ink, #2b1a0d); background: var(--elevated, #fff); border: 1px solid var(--line-strong, rgba(60, 30, 10, 0.14)); transition: border-color 0.25s, color 0.25s; }
.lx-chip:hover { border-color: var(--color-primary, #b8601f); color: var(--color-primary, #b8601f); }

@media (prefers-reduced-motion: reduce) {
  .lx-drawer-enter-active, .lx-drawer-leave-active, .lx-drawer-item, .lx-timeline li.on .lx-timeline-dot { transition: none !important; animation: none !important; }
}

/* ============ Product cards: clear photo, readable text ============ */
html .store-shell .lx-pcard { background: var(--elevated, #fff) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html .store-shell .lx-pcard-media { background-color: #fff !important; }
.lx-pcard-img { object-fit: contain; padding: 8%; }
html .store-shell .lx-pcard-body {
  padding: 10px 12px 12px; gap: 2px;
  background: var(--elevated, #fff) !important; color: var(--color-ink, #2b1a0d) !important;
  border-top: 1px solid var(--line, rgba(60, 30, 10, 0.08)) !important;
}
.lx-pcard-brand { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary, #b8601f); }
.lx-pcard-name { margin-top: 2px; font-size: 0.86rem; font-weight: 500; line-height: 1.3; min-height: 2.6em; color: var(--color-ink, #2b1a0d); }
.lx-pcard-price { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-ink, #2b1a0d); }
.lx-pcard-add { width: 36px; height: 36px; box-shadow: 0 8px 16px -8px rgba(122, 53, 16, 0.6); }
@media (max-width: 480px) {
  .lx-pcard-name { font-size: 0.8rem; }
  .lx-pcard-price { font-size: 0.92rem; }
  .lx-pcard-add { width: 34px; height: 34px; }
}

/* ============ Website popup ad ============ */
.lx-popup-scrim { position: fixed; inset: 0; z-index: var(--z-overlay, 90); display: grid; place-items: center; padding: 16px; background: rgba(20, 12, 6, 0.5); }
.lx-popup {
  position: relative; width: min(440px, 100%); overflow: hidden; border-radius: 26px;
  background: var(--surface, #fffaf3); color: var(--color-ink, #2b1a0d);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55); animation: lx-pop 0.5s var(--lx-ease) both;
}
@keyframes lx-pop { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }
.lx-popup-img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.lx-popup-body { padding: 22px 24px 26px; text-align: center; }
.lx-popup-x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, 0.85); color: #2b1a0d; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .lx-popup { animation: none; } }
/* Buy Smart admin — warm cream workspace (scoped to .adm-cream so the store keeps its own look). */
.adm-cream {
  --color-surface: #f7f1e8;
  --color-surface-warm: #fffdf9;
  --color-elevated: #ffffff;
  --color-ink: #2a211c;
  --color-muted: #8a7d74;
  --color-border: rgb(42 33 25 / 0.1);
  --color-primary: #D2783A;
  --color-primary-dark: #A8743F;
  --color-primary-light: #F2D3B0;
  --bs-grad-a: #D2783A;
  --bs-grad-b: #F2D3B0;
  --bs-glow: rgb(168 110 86 / 0.22);
  color-scheme: light;
  background: #f7f1e8;
  color: #2a211c;
}
.adm-cream .card {
  background: #fffdf9;
  border: 1px solid rgb(42 33 25 / 0.08);
  box-shadow: 0 1px 2px rgb(42 33 25 / 0.04), 0 8px 24px rgb(42 33 25 / 0.05);
}
.adm-cream .input-field {
  background: #fff;
  border: 1px solid rgb(42 33 25 / 0.14);
  color: #2a211c;
}
.adm-cream .input-field::placeholder { color: rgb(138 125 116 / 0.7); }
.adm-cream .btn-primary { color: #fffaf3; box-shadow: 0 8px 20px var(--bs-glow); }
.adm-cream .btn-outline {
  border-color: rgb(42 33 25 / 0.16);
  background: #fff;
  color: #2a211c;
}
.adm-cream .btn-outline:hover { border-color: #D2783A; background: #fbf3ea; }
.adm-cream .skeleton { background: rgb(42 33 25 / 0.06); }
.adm-cream table thead { background: #f6efe5 !important; }
.adm-cream select option { background: #fff; color: #2a211c; }

/* One palette everywhere in the admin: cream · bronze · espresso (+ green / amber / red for status only).
   The shop's blue "accent" is remapped so old screens can't show blue/purple. */
.adm-cream {
  --color-accent: #A8743F;
  --color-accent-light: #F2D3B0;
  --color-surface-warm: #fffdf9;
  --color-elevated: #ffffff;
  accent-color: #A8743F;
}
.adm-cream .text-accent { color: #A8743F !important; }
.adm-cream .bg-accent { background-color: #A8743F !important; color: #fffaf3; }
.adm-cream .badge { background: #f4ebdf; color: #A8743F; }

/* Checkboxes / radios / switches: always visible on cream */
.adm-cream input[type='checkbox'],
.adm-cream input[type='radio'] {
  appearance: auto;
  width: 1rem;
  height: 1rem;
  accent-color: #A8743F;
  cursor: pointer;
  outline: 1px solid rgb(112 68 56 / 0.35);
  outline-offset: 0;
  border-radius: 4px;
}
.adm-cream input[type='radio'] { border-radius: 9999px; }
.adm-cream input[type='checkbox'].hidden,
.adm-cream input[type='radio'].hidden { display: none; }

/* Old screens written for the dark shop: make white-on-dark helpers readable on cream */
.adm-cream .bg-white\/5,
.adm-cream .bg-white\/10 { background-color: rgb(42 33 25 / 0.05) !important; }
.adm-cream .border-white\/10,
.adm-cream .border-white\/15,
.adm-cream .border-white\/20 { border-color: rgb(42 33 25 / 0.12) !important; }
.adm-cream .text-white\/60,
.adm-cream .text-white\/70,
.adm-cream .text-white\/80 { color: #6b5d54 !important; }
.adm-cream .bg-stone-50 { background-color: #faf6f0 !important; }
.adm-cream .skeleton::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.7), transparent); }
.adm-cream ::selection { background: #e2c79f; color: #2a211c; }

/* The shop theme (public/shop-theme.css) paints every .card and form field navy with !important.
   In the admin that left navy rows with dark text (e.g. Shipping). Cream wins here. */
.adm-cream .card,
.adm-cream [class*="rounded-2xl"][class*="border"] {
  background: #fffdf9 !important;
  border-color: rgb(42 33 25 / 0.08) !important;
  color: #2a211c;
}
.adm-cream table tbody tr { background: transparent !important; color: #2a211c; }
.adm-cream table tbody tr:hover { background: #fbf6ef !important; }
.adm-cream input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
.adm-cream textarea,
.adm-cream select {
  background: #fff !important;
  color: #2a211c !important;
  border-color: rgb(42 33 25 / 0.14) !important;
}
.adm-cream footer { background: #f7f1e8 !important; color: #2a211c !important; border-color: rgb(42 33 25 / 0.08) !important; }
/* Bright orange/copper text was tuned for navy; on cream use the deeper bronze so it stays readable. */
.adm-cream .text-primary { color: #8a5640 !important; }
.adm-cream .text-amber-300,
.adm-cream .text-amber-400,
.adm-cream .text-orange-300,
.adm-cream .text-orange-400 { color: #8a5a12 !important; }

/* Dark "islands" (order header, scanner, bulk bar, customer card, phone preview…):
   the cream remaps above must not turn their light text dark. Restore light-on-dark inside them. */
.adm-cream :is([class*="bg-[#1f1813]"], [class*="from-[#1f1813]"], [class*="bg-[#120e0b]"], [class*="bg-[#2a211c]"]:not([class*="bg-[#2a211c]/"]), [class*="bg-[#0B3D3A]"], [class*="bg-[#A8743F]"]) :is(.text-white\/60, .text-white\/70, .text-white\/80) { color: rgb(255 255 255 / 0.78) !important; }
.adm-cream :is([class*="bg-[#1f1813]"], [class*="from-[#1f1813]"], [class*="bg-[#120e0b]"], [class*="bg-[#2a211c]"]:not([class*="bg-[#2a211c]/"]), [class*="bg-[#0B3D3A]"]) :is(.bg-white\/5, .bg-white\/10) { background-color: rgb(255 255 255 / 0.1) !important; }
.adm-cream :is([class*="bg-[#1f1813]"], [class*="from-[#1f1813]"], [class*="bg-[#120e0b]"], [class*="bg-[#2a211c]"]:not([class*="bg-[#2a211c]/"]), [class*="bg-[#0B3D3A]"]) :is(.border-white\/10, .border-white\/15, .border-white\/20) { border-color: rgb(255 255 255 / 0.16) !important; }
.adm-cream :is([class*="bg-[#1f1813]"], [class*="from-[#1f1813]"], [class*="bg-[#120e0b]"], [class*="bg-[#2a211c]"]:not([class*="bg-[#2a211c]/"]), [class*="bg-[#0B3D3A]"]) .text-primary { color: #f0c79a !important; }

/* Data-entry desk was teal: same espresso/bronze palette as the rest of the admin */
.adm-cream .bg-\[\#0B3D3A\] { background-color: #2a211c !important; }
.adm-cream .bg-teal-700 { background-color: #A8743F !important; }
.adm-cream .bg-teal-400 { background-color: #F2D3B0 !important; }
.adm-cream .hover\:bg-teal-300:hover { background-color: #e2c79f !important; }
.adm-cream .text-teal-950 { color: #1f1813 !important; }
.adm-cream .hover\:bg-teal-50:hover, .adm-cream .bg-teal-50 { background-color: #fbf3ea !important; }
.adm-cream .text-teal-700, .adm-cream .text-teal-800 { color: #A8743F !important; }
.adm-cream .focus\:ring-teal-300:focus { --tw-ring-color: #F2D3B0 !important; }
.adm-cream .border-teal-200, .adm-cream .ring-teal-200 { border-color: #e2c79f !important; --tw-ring-color: #e2c79f !important; }
.adm-cream .bg-\[\#166534\] { background-color: #2f7a45 !important; }

/* Light-gray icon placeholders were almost invisible on cream */
.adm-cream .text-\[\#c9b8a6\] { color: #a8957f !important; }

.adm-cream .bg-teal-100 { background-color: #f4ebdf !important; }
.adm-cream .text-teal-100, .adm-cream .text-teal-200 { color: #e2c79f !important; }
.adm-cream .text-teal-100\/80, .adm-cream .text-teal-100\/90 { color: #f3e6d6 !important; }
/* Buy Smart — hero orbit, promo card, categories curtain. Copper / cream, works in light and dark. */

/* ============ Hero promo card ============ */
.ho-card {
  position: relative; z-index: 2; isolation: isolate; overflow: hidden;
  display: grid; gap: 18px; padding: clamp(22px, 3.2vw, 40px);
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 210, 154, 0.55), transparent 55%),
    linear-gradient(150deg, rgba(255, 252, 246, 0.92), rgba(246, 233, 214, 0.86));
  border: 1px solid rgba(184, 96, 31, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -30px rgba(122, 62, 30, 0.45);
  backdrop-filter: blur(6px);
}
html[data-theme='dark'] .ho-card {
  background: radial-gradient(120% 90% at 0% 0%, rgba(212, 137, 58, 0.25), transparent 55%), linear-gradient(150deg, rgba(26, 36, 56, 0.92), rgba(14, 22, 38, 0.92));
  border-color: rgba(240, 212, 168, 0.18);
}
/* a slow copper light sweeping the card border */
.ho-card::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--ho-a, 0deg), transparent 0 70%, #e0822f 82%, #ffd29a 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ho-border 6s linear infinite;
}
@property --ho-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ho-border { to { --ho-a: 360deg; } }
.ho-card .bs-hero-title { margin: 0; }
.ho-promo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 18px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(184, 96, 31, 0.18);
  transition: transform 0.25s, box-shadow 0.25s;
}
html[data-theme='dark'] .ho-promo { background: rgba(255, 255, 255, 0.06); }
.ho-promo:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(122, 62, 30, 0.5); }
.ho-promo-badge {
  flex: none; display: grid; place-items: center; min-width: 64px; height: 64px; border-radius: 16px; padding: 0 8px;
  background: linear-gradient(135deg, #f0b06a, #b8601f 60%, #7a3510); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1;
  box-shadow: 0 10px 20px -10px rgba(122, 53, 16, 0.7);
}
.ho-promo-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.ho-promo-text b { font-size: 0.95rem; }
.ho-promo-text small { font-size: 0.78rem; opacity: 0.75; }
.ho-promo-thumbs { display: flex; }
.ho-promo-thumbs img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #fff; border: 2px solid #fffaf3; margin-inline-start: -10px; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.35); }
.ho-card .bs-banner, .ho-card .hb-wrap { border-radius: 20px; overflow: hidden; }

/* ============ Hero orbit ============ */
.ho-stage {
  --S: min(520px, 42vw);
  --R: calc(var(--S) * 0.42);
  --T: calc(var(--S) * 0.2);
  position: relative; width: var(--S); height: var(--S); margin-inline: auto; max-width: 100%;
}
.ho-stage.is-phone { --S: min(360px, 88vw); --T: calc(var(--S) * 0.22); }
.ho-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ho-track { fill: none; stroke: rgba(184, 96, 31, 0.28); stroke-width: 1.2; }
.ho-track-in { stroke-dasharray: 2 6; stroke: rgba(184, 96, 31, 0.22); }
.ho-run {
  fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 14 86;
  filter: drop-shadow(0 0 6px rgba(224, 130, 47, 0.9));
  animation: ho-run 7s linear infinite; transform-origin: 200px 200px;
}
.ho-run-2 { stroke-dasharray: 6 94; animation-duration: 11s; animation-direction: reverse; opacity: 0.7; }
@keyframes ho-run { to { stroke-dashoffset: -100; } }
.ho-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
.ho-core::after { content: ''; position: absolute; inset: 18% 10% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 130, 47, 0.32), transparent); filter: blur(10px); }
.ho-orbit { position: absolute; inset: 0; z-index: 2; animation: ho-spin 70s linear infinite; }
.ho-tile {
  position: absolute; left: 50%; top: 50%; width: var(--T); margin: calc(var(--T) / -2) 0 0 calc(var(--T) / -2);
  transform: rotate(var(--a)) translate(var(--R)) rotate(calc(-1 * var(--a)));
  text-decoration: none; color: inherit; outline: none;
}
.ho-tile-in {
  display: grid; justify-items: center; gap: 6px; animation: ho-spin 70s linear infinite reverse;
}
.ho-tile-img {
  display: grid; place-items: center; width: var(--T); aspect-ratio: 1; border-radius: 28%; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #fff, #f3e4cf);
  border: 1px solid rgba(184, 96, 31, 0.25);
  box-shadow: 0 16px 28px -16px rgba(122, 62, 30, 0.55), 0 0 0 4px rgba(255, 250, 243, 0.6);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}
.ho-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.ho-tile-icon { width: 44%; height: 44%; color: #b8601f; stroke-width: 1.6; }
.ho-tile-name {
  font-family: 'Syne', var(--font-display), 'Tajawal', sans-serif; font-weight: 700; font-size: clamp(0.62rem, 1vw, 0.78rem);
  letter-spacing: 0.01em; line-height: 1.15; text-align: center; max-width: 9em;
  padding: 3px 8px; border-radius: 999px; background: rgba(255, 250, 243, 0.85); color: #3a2414; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[dir='rtl'] .ho-tile-name { font-family: 'Tajawal', 'Syne', sans-serif; }
.ho-tile:hover .ho-tile-img, .ho-tile:focus-visible .ho-tile-img { transform: scale(1.12); box-shadow: 0 0 0 2px #e0822f, 0 20px 36px -14px rgba(224, 130, 47, 0.7); }
.ho-stage:hover .ho-orbit, .ho-stage:hover .ho-tile-in, .ho-stage:focus-within .ho-orbit, .ho-stage:focus-within .ho-tile-in { animation-play-state: paused; }
@keyframes ho-spin { to { rotate: 360deg; } }
@media (max-width: 960px) {
  .ho-stage { margin-top: 12px; }
  .ho-tile-name { font-size: 0.6rem; padding: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ho-orbit, .ho-tile-in, .ho-run, .ho-card::before { animation: none; }
}

/* ============ Categories curtain (header mega menu) ============ */
.lx-mega.ho-curtain { transform-origin: top center; }
.lx-mega-enter-active.ho-curtain { transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
.lx-mega-leave-active.ho-curtain { transition: clip-path 0.45s cubic-bezier(0.55, 0, 0.7, 0.2), opacity 0.45s ease; }
.lx-mega-enter-from.ho-curtain, .lx-mega-leave-to.ho-curtain { clip-path: inset(0 0 100% 0); opacity: 0.4; transform: none; }
.lx-mega-enter-to.ho-curtain, .lx-mega-leave-from.ho-curtain { clip-path: inset(0 0 0 0); opacity: 1; }
/* folds of the curtain: a soft vertical sheen that slides down as it opens */
.ho-curtain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 70px, rgba(184, 96, 31, 0.05) 70px 72px, rgba(255, 255, 255, 0) 72px 140px);
}
.ho-curtain .lx-mega-card { animation: ho-drop 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(0.18s + var(--i, 0) * 0.06s); }
@keyframes ho-drop { from { opacity: 0; transform: translateY(-26px) scale(0.96); } }
.ho-curtain .lx-mega-name, .lx-cat-trigger {
  font-family: 'Syne', var(--font-display), 'Tajawal', sans-serif; font-weight: 700; letter-spacing: 0.01em;
}
html[dir='rtl'] .ho-curtain .lx-mega-name, html[dir='rtl'] .lx-cat-trigger { font-family: 'Tajawal', 'Syne', sans-serif; font-weight: 800; }
.ho-curtain .lx-mega-title { font-family: 'Syne', var(--font-display), 'Tajawal', sans-serif; }
.ho-mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ho-mega-icon { display: grid; place-items: center; aspect-ratio: 3 / 2; background: radial-gradient(circle at 30% 25%, #fff, #f3e4cf); }
.ho-mega-icon svg { width: 34%; height: 34%; color: #b8601f; stroke-width: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .lx-mega-enter-active.ho-curtain, .lx-mega-leave-active.ho-curtain { transition: opacity 0.2s; }
  .ho-curtain .lx-mega-card { animation: none; }
}

/* Arabic gets a proper Arabic face everywhere in the shop */
html[dir='rtl'] body, html[dir='rtl'] #app, html[dir='rtl'] .store-shell { font-family: 'Tajawal', 'Outfit', system-ui, sans-serif !important; }

/* ============ Header curtain: departments + their sub-categories ============ */
.lx-mega.ho-curtain { height: min(400px, 66vh); background: #FFF8EF !important; border-bottom: 1px solid rgba(168, 116, 63, 0.22); box-shadow: 0 30px 50px -30px rgba(120, 70, 30, 0.45); }
.lx-mega-enter-active.ho-curtain { transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; }
.ho-cur { max-width: 1280px; margin: 0 auto; height: 100%; display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding: 18px 24px; position: relative; z-index: 1; }
.ho-cur-list { display: grid; align-content: start; gap: 2px; overflow-y: auto; border-inline-end: 1px solid rgba(168, 116, 63, 0.22); padding-inline-end: 12px; }
.ho-cur-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; text-decoration: none; color: #4A2F18; font-family: 'Syne', 'Tajawal', sans-serif; font-weight: 700; font-size: 0.92rem; animation: ho-drop 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(0.25s + var(--i, 0) * 0.06s); }
html[dir='rtl'] .ho-cur-item { font-family: 'Tajawal', 'Syne', sans-serif; font-weight: 800; }
.ho-cur-item i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(210, 120, 58, 0.14); color: #D2783A; flex: none; }
.ho-cur-item i svg { width: 15px; height: 15px; }
.ho-cur-item small { margin-inline-start: auto; color: #8A6A4E; font-weight: 600; font-size: 0.72rem; }
.ho-cur-item:hover, .ho-cur-item.is-on { background: rgba(210, 120, 58, 0.12); color: #C26A2E; }
.ho-cur-subs { min-width: 0; overflow-y: auto; }
.ho-cur-title { margin: 0 0 10px; font-family: 'Syne', 'Tajawal', sans-serif; font-weight: 800; font-size: 1.15rem; color: #4A2F18; }
.ho-cur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.ho-cur-sub { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid rgba(168, 116, 63, 0.2); text-decoration: none; color: #4A2F18; animation: ho-sub 0.45s both; animation-delay: calc(var(--i, 0) * 0.04s); transition: border-color 0.2s, transform 0.2s; }
.ho-cur-sub:hover { border-color: #D2783A; transform: translateY(-2px); }
.ho-cur-sub b { font-size: 0.85rem; font-weight: 600; line-height: 1.25; }
.ho-cur-sub-img { flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: #F7EDE0; display: grid; place-items: center; color: #D2783A; }
.ho-cur-sub-img img { width: 100%; height: 100%; object-fit: cover; }
.ho-cur-sub-img svg { width: 18px; height: 18px; }
.ho-cur-all { justify-content: center; background: rgba(210, 120, 58, 0.1); color: #C26A2E; }
@keyframes ho-sub { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ho-cur-item, .ho-cur-sub { animation: none; } }
/* Buy Smart brand rules — three colours taken from the logo, nothing else:
   cream #F7EDE0 · orange-bronze #D2783A · bronze #A8743F   (text: deep bronze #4A2F18)
   No black, no navy anywhere. This file loads last and neutralises the old navy theme (public/shop-theme.css). */
html:root, html[data-atmosphere], html [data-atmosphere] {
  --bs-cream: #F7EDE0; --bs-paper: #FFF8EF; --bs-orange: #D2783A; --bs-bronze: #A8743F; --bs-ink: #4A2F18; --bs-muted: #8A6A4E;
  --primary: #D2783A; --secondary: #F2D3B0; --accent: #E9B27C;
  --bg: #F7EDE0; --surface: #FFF8EF; --elevated: #FFFFFF;
  --text: #4A2F18; --muted: #8A6A4E;
  --button: #D2783A; --button-text: #FFF8EF;
  --border: rgba(168, 116, 63, 0.22); --glow: rgba(210, 120, 58, 0.3);
  --grad-a: #A8743F; --grad-b: #F2B47E; --grad-c: #D2783A;
  --color-primary: #D2783A; --color-primary-dark: #A8743F; --color-primary-light: #F2D3B0;
  --color-accent: #A8743F; --color-accent-light: #F2D3B0;
  --color-surface: #F7EDE0; --color-surface-warm: #FFF8EF; --color-elevated: #FFFFFF;
  --color-ink: #4A2F18; --color-muted: #8A6A4E; --color-border: rgba(168, 116, 63, 0.22);
  color-scheme: light;
}
html, html body, html #app { background: #F7EDE0 !important; color: #4A2F18 !important; }

/* Old navy surfaces → cream paper */
html .card, html [class*="rounded-2xl"][class*="border"] { background: #FFF8EF !important; border-color: rgba(168, 116, 63, 0.22) !important; }
html .bg-white, html .bg-stone-50, html .bg-stone-100 { background-color: #FFF8EF !important; color: inherit; }
html .bg-\[\#0b1224\]\/70, html .bg-\[\#0c1220\], html .bg-\[\#0b1224\] { background-color: #FFF8EF !important; }
html .bg-elevated { background-color: #FFFFFF !important; }
html .bg-surface-warm { background-color: #FFF8EF !important; }
html footer { background: #FFF8EF !important; color: #4A2F18 !important; border-top: 1px solid rgba(168, 116, 63, 0.22) !important; }
html input:not([type='checkbox']):not([type='radio']):not([type='range']), html textarea, html select {
  background: #FFFFFF !important; color: #4A2F18 !important; border-color: rgba(168, 116, 63, 0.28) !important;
}
html .border-white\/10, html .border-white\/15, html .border-white\/20 { border-color: rgba(168, 116, 63, 0.2) !important; }
html .text-ink { color: #4A2F18 !important; }
html .text-muted { color: #8A6A4E !important; }
html .text-primary { color: #C26A2E !important; }
html .bg-primary { background-color: #D2783A !important; }
html .btn-primary, html .bs-btn-primary { background: linear-gradient(135deg, #F2B47E, #D2783A 55%, #A8743F) !important; color: #FFF8EF !important; border: 0 !important; }
html .text-\[\#140c04\] { color: #FFF8EF !important; }
html ::selection { background: #F2D3B0; color: #4A2F18; }

/* The admin keeps its dark "islands" readable: they use bronze instead of near-black */
html .adm-cream [class*="bg-[#1f1813]"], html .adm-cream [class*="from-[#1f1813]"], html .adm-cream [class*="bg-[#120e0b]"] {
  background-image: linear-gradient(135deg, #A8743F, #8E5E31) !important; background-color: #A8743F !important;
}
html .adm-cream .bg-\[\#2a211c\]:not([class*="bg-[#2a211c]/"]), html .adm-cream .bg-\[\#0B3D3A\] { background-color: #A8743F !important; }