/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -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-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-2xl: 42rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.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);
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-brand: #FF6B35;
    --color-brand-dark: #E55A24;
    --color-mint: #06D6A0;
    --color-ink: #1B1C1C;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    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;
    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 {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.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 {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :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;
  }
  ::-moz-placeholder {
    opacity: 1;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::-moz-placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        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, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-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"]), ::file-selector-button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0px;
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .top-0 {
    top: 0px;
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-\[88px\] {
    top: 88px;
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .right-0 {
    right: 0px;
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .bottom-0 {
    bottom: 0px;
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .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-\[60\] {
    z-index: 60;
  }
  .z-\[70\] {
    z-index: 70;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .ms-18 {
    margin-inline-start: calc(var(--spacing) * 18);
  }
  .ms-20 {
    margin-inline-start: calc(var(--spacing) * 20);
  }
  .ms-28 {
    margin-inline-start: calc(var(--spacing) * 28);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .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-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .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-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .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-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-52 {
    height: calc(var(--spacing) * 52);
  }
  .h-\[18px\] {
    height: 18px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .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-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-\[88\%\] {
    width: 88%;
  }
  .w-\[90\%\] {
    width: 90%;
  }
  .w-\[92\%\] {
    width: 92%;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-\[480px\] {
    max-width: 480px;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-\[18px\] {
    min-width: 18px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-\[2\] {
    flex: 2;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .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));
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.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);
  }
  :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-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-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)));
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .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-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[\#ff6600\] {
    border-color: #ff6600;
  }
  .border-brand {
    border-color: var(--color-brand);
  }
  .border-brand\/30 {
    border-color: color-mix(in srgb, #FF6B35 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-brand) 30%, transparent);
    }
  }
  .border-brand\/40 {
    border-color: color-mix(in srgb, #FF6B35 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-brand) 40%, transparent);
    }
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-mint\/40 {
    border-color: color-mix(in srgb, #06D6A0 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-mint) 40%, transparent);
    }
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-\[\#0A0A0F\] {
    background-color: #0A0A0F;
  }
  .bg-black\/15 {
    background-color: color-mix(in srgb, #000 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
    }
  }
  .bg-black\/30 {
    background-color: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .bg-brand {
    background-color: var(--color-brand);
  }
  .bg-brand\/5 {
    background-color: color-mix(in srgb, #FF6B35 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand) 5%, transparent);
    }
  }
  .bg-brand\/10 {
    background-color: color-mix(in srgb, #FF6B35 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand) 10%, transparent);
    }
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }
  .bg-ink {
    background-color: var(--color-ink);
  }
  .bg-mint {
    background-color: var(--color-mint);
  }
  .bg-mint\/15 {
    background-color: color-mix(in srgb, #06D6A0 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-mint) 15%, transparent);
    }
  }
  .bg-mint\/20 {
    background-color: color-mix(in srgb, #06D6A0 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-mint) 20%, transparent);
    }
  }
  .bg-mint\/30 {
    background-color: color-mix(in srgb, #06D6A0 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-mint) 30%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-white\/95 {
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-\[\#FF6B35\] {
    --tw-gradient-from: #FF6B35;
    --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-\[\#FFB627\] {
    --tw-gradient-to: #FFB627;
    --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));
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .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);
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: 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-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pb-28 {
    padding-bottom: calc(var(--spacing) * 28);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .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-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-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .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\.5em\] {
    --tw-tracking: 0.5em;
    letter-spacing: 0.5em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .text-\[\#ff6600\] {
    color: #ff6600;
  }
  .text-brand {
    color: var(--color-brand);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-green-400 {
    color: var(--color-green-400);
  }
  .text-ink {
    color: var(--color-ink);
  }
  .text-ink\/80 {
    color: color-mix(in srgb, #1B1C1C 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-ink) 80%, transparent);
    }
  }
  .text-mint {
    color: var(--color-mint);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-95 {
    opacity: 95%;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgba(0,0,0,0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-bell {
    --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgba(255,107,53,0.35));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-soft {
    --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(0,0,0,0.06));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --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-brand {
    --tw-ring-color: var(--color-brand);
  }
  .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);
    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, 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));
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  @media (hover: hover) {
    .hover\:bg-brand-dark:hover {
      background-color: var(--color-brand-dark);
    }
    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }
  }
  .focus\:border-\[\#ff6600\]:focus {
    border-color: #ff6600;
  }
}
html,body {
  font-family: 'Inter',system-ui,sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- Mobile web-app viewport lock: no horizontal scroll, safe-area aware ---- */
html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
}

/* `overflow-x: hidden` on <html> propagates to the viewport itself, which does
   NOT create a nested scroll container — so sticky positioning stays intact. */
html {
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
   CRITICAL: do NOT use `overflow-x: hidden` on body or #app.
   When overflow-x is `hidden` and overflow-y is `visible`, CSS computes
   overflow-y to `auto`, which turns the element into a SCROLL CONTAINER.
   Every `position: sticky` descendant then sticks to that (never-scrolling)
   scrollport instead of the viewport — the sticky shop bar was permanently
   displaced by its own `top` value (105px) and cut off the top product row.
   `overflow-x: clip` clips overflow WITHOUT creating a scrollport.
   --------------------------------------------------------------------------- */
/* Clip (not hidden) on the wrappers. See the note above about scroll
   containers breaking position: sticky. */
body, #app, main, footer, .main-container {
  overflow-x: clip;
}
/* Fallback for browsers without `overflow: clip` (Safari < 16). */
@supports not (overflow: clip) {
  body, #app, main, footer, .main-container {
    overflow-x: hidden;
  }
}
/* Width containment goes on <body> ONLY.
   Do NOT put `max-width: 100%` on #app: #app *is* the .max-w-[480px] element,
   and an ID selector (specificity 1,0,0) outranks the Tailwind class (0,1,0),
   so it silently removed the centred 480px phone column and let the grid
   stretch full-width on desktop (product images ballooned to 672px). */
body {
  width: 100%;
  max-width: 100%;
}

body {
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
}
/* Any direct child must never exceed the viewport width */
#app *, .main-container * { max-width: 100%; }
/* Bottom fixed UI: respect iPhone home-indicator inset */
.bottom-nav, .fixed-bottom, .checkout-bar, .sticky-bottom {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

/* ---- Sticky-header offsets (JS keeps these in sync) ---------------------- */
:root {
  --dd-header-h: 101px;  /* app header */
  --dd-sticky-h: 129px;  /* shop search + category bar */
  --dd-sticky-offset: calc(var(--dd-header-h) + var(--dd-sticky-h) + 0.75rem);
}
/* Never let a sticky bar cover the grid/card a scroll or anchor jump targets. */
#prodGrid,
.prod-card,
#resCount {
  scroll-margin-top: var(--dd-sticky-offset);
}

/* ---- Checkout loading spinner (shown while the Stripe session is created) ---- */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: .5rem;
  vertical-align: -3px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dd-spin .7s linear infinite;
}
@keyframes dd-spin {
  to { transform: rotate(360deg); }
}
button[disabled], button[aria-busy="true"] {
  opacity: .85;
  cursor: not-allowed;
}
/* Disabled buttons must not swallow the "I'm working" affordance */
button[disabled] .spinner { opacity: 1; }
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
}
.ms-18 {
  font-size: 18px;
}
.ms-20 {
  font-size: 20px;
}
.ms-28 {
  font-size: 28px;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ring-brand:focus {
  outline: 2px solid #FF6B35;
  outline-offset: 2px;
}
.cat-chip {
  transition: transform .12s ease, box-shadow .12s ease;
}
.cat-chip:active {
  transform: scale(.96);
}
/* Root customer product-card presentation only. Keeping these selectors bound
   to the two render targets avoids cascading card/media styling into driver,
   account, cart, modal, or checkout surfaces. The image fallback contract is
   intentionally unchanged for failed and still-loading product images. */
:where(#homeEssentials, #prodGrid) .prod-card,
#prodGrid .prod-card {
  transition: transform .12s ease, box-shadow .12s ease;
}
:where(#homeEssentials, #prodGrid) .prod-card:hover,
#prodGrid .prod-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
:where(#homeEssentials, #prodGrid) .prod-hero-card:hover,
#prodGrid .prod-hero-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}
:where(#homeEssentials, #prodGrid) .prod-hero-card .product-image-wrap,
#prodGrid .prod-hero-card .product-image-wrap {
  aspect-ratio: 4 / 3;
  min-height: 6rem;
}
:where(#homeEssentials, #prodGrid) .prod-name,
#prodGrid .prod-name {
  font-variant-ligatures: none;
}
:where(#homeEssentials, #prodGrid) .prod-brand,
#prodGrid .prod-brand {
  font-weight: 600;
}
:where(#homeEssentials, #prodGrid) .add-btn,
#prodGrid .add-btn {
  background: linear-gradient(135deg, #FF6B35, #FF8533);
  box-shadow: 0 4px 12px rgba(255, 107, 53, .3);
}
:where(#homeEssentials, #prodGrid) .add-btn:hover,
#prodGrid .add-btn:hover {
  background: linear-gradient(135deg, #FF8533, #FF6B35);
  transform: scale(1.1);
}
:where(#homeEssentials, #prodGrid) .product-image-wrap,
#prodGrid .product-image-wrap {
  /* Fixed square box: the layout can never collapse to 0 height while an image
     is loading, fails, or resolves to a placeholder. Neutral backdrop keeps
     white-background product shots integrated instead of stark white boxes. */
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  min-height: 8rem;           /* fallback for engines without aspect-ratio */
  border-radius: .75rem;
  overflow: hidden;
  background: var(--dd-img-bg, #2A2A2A);
  padding: .5rem;             /* subtle inner padding around contain-fit images */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* No aspect-ratio support: keep the previous fixed height. */
@supports not (aspect-ratio: 1 / 1) {
  :where(#homeEssentials, #prodGrid) .product-image-wrap,
  #prodGrid .product-image-wrap { height: 8.5rem; }
}
:where(#homeEssentials, #prodGrid) .product-img,
#prodGrid .product-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  /* Transparent: the wrap's neutral var(--dd-img-bg) shows through so white
     product photography blends with the card instead of clipping to a box. */
  background: transparent;
}
:where(#homeEssentials, #prodGrid) .product-image-wrap::after,
#prodGrid .product-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: .75rem;
}
:where(#homeEssentials, #prodGrid) .img-placeholder,
#prodGrid .img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
:where(#homeEssentials, #prodGrid) .add-btn,
#prodGrid .add-btn {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #FF6B35;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(255,107,53,.4);
  cursor: pointer;
  border: none;
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-user-select: none;
  user-select: none;
}
:where(#homeEssentials, #prodGrid) .add-btn:hover,
#prodGrid .add-btn:hover { transform: scale(1.08); box-shadow: 0 8px 18px rgba(255,107,53,.5); }
:where(#homeEssentials, #prodGrid) .add-btn:active,
#prodGrid .add-btn:active { transform: scale(.94); }
:where(#homeEssentials, #prodGrid) .prod-name,
#prodGrid .prod-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.6em;
}
:where(#homeEssentials, #prodGrid) .prod-price,
#prodGrid .prod-price {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #6b7280;
  margin-top: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#shopChips.cat-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
#shopChips.cat-scroll.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
#shopChips.cat-scroll::-webkit-scrollbar { display: none; }
.pulse-dot {
  position: relative;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid #06D6A0;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(.8);
    opacity: .9;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.skeleton {
  background: linear-gradient(90deg,#f3f4f6 0%,#e5e7eb 50%,#f3f4f6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.fade-in {
  animation: fadeIn .25s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
details>summary {
  list-style: none;
  cursor: pointer;
}
details>summary::-webkit-details-marker {
  display: none;
}
.bell-anim {
  transform-origin: 50% 10%;
  animation: none;
}
@keyframes bell {
  0%,50%,100% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-12deg);
  }
  30% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-6deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bell-anim { 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-space-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-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: 0px;
}
@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-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-ease {
  syntax: "*";
  inherits: false;
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@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-space-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-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-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-ease: initial;
    }
  }
}


/* Root storefront presentation migrated from index.html. */
  :root {
    --dd-bg: #0D0F12;
    --dd-surface: #161B22;
    --dd-surface-2: #21262D;
    --dd-border: rgba(255, 255, 255, 0.08);
    --dd-amber: #FF5722;
    --dd-mint: #10B981;
    --color-brand: #FF5722;
    --color-brand-dark: #E54918;
    --color-mint: #10B981;
    --color-ink: #0D0F12;
  }
  html, body {
    background-color: #0D0F12;
    color: #F0F6FC;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .ms { font-family: 'Material Symbols Outlined'; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; }
  .ms-18, .ms-20, .ms-28 { margin-inline-start: 0; margin-left: 0; }
  .ms-18 { font-size: 18px; } .ms-20 { font-size: 20px; } .ms-28 { font-size: 28px; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
  .ring-brand:focus { outline: 2px solid #FF5722; outline-offset: 2px; }

  /* Soundwave ripple rings on bell */
  .dd-soundwave-ring {
    position: absolute;
    border-radius: 9999px;
    border: 1.5px solid #FF5722;
    opacity: 0;
    pointer-events: none;
  }
  .dd-ring-1 { inset: -4px; }
  .dd-ring-2 { inset: -10px; }
  .dd-soundwave-active.dd-ring-1 {
    animation: soundwave1 0.75s cubic-bezier(0, 0.2, 0.8, 1) forwards;
  }
  .dd-soundwave-active.dd-ring-2 {
    animation: soundwave2 0.75s 0.12s cubic-bezier(0, 0.2, 0.8, 1) forwards;
  }
  .dd-logo:hover .dd-ring-1 {
    animation: soundwave1 0.75s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .dd-logo:hover .dd-ring-2 {
    animation: soundwave2 0.75s 0.15s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  @keyframes soundwave1 {
    0% { transform: scale(0.6); opacity: 0.85; }
    100% { transform: scale(1.6); opacity: 0; }
  }
  @keyframes soundwave2 {
    0% { transform: scale(0.7); opacity: 0.65; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  .dd-bell-svg { display: inline-block; transform-origin: 50% 15%; }
  .dd-logo:hover .dd-bell-svg { animation: ddSwing .7s ease-in-out; }
  .dd-bell-svg.dd-ring { animation: ddSwing .7s ease-in-out; }
  @keyframes ddSwing {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(18deg); }
    30% { transform: rotate(-15deg); }
    45% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    75% { transform: rotate(4deg); }
  }

  /* Header composition: approved reference evidence specifies a full-width
     #6e4bab surface, 16px vertical rhythm, a centered narrow-screen mark,
     and circular trailing controls. The sticky flow is retained so the
     existing measured sticky/fixed-UI clearance contract is unchanged. */
  .dd-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #6e4bab;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }
  .dd-nav-row { min-height: 80px; }
  .dd-logo-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .dd-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 0;
    color: #fff;
    border-radius: 9999px;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s ease;
  }
  .dd-pill:hover { opacity: .8; }
  .dd-nav-btn,
  .dd-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border: 0;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, transform .12s ease;
  }
  .dd-nav-btn:hover,
  .dd-cart-btn:hover { background: rgba(255, 255, 255, 0.18); }
  .dd-cart-btn:hover { transform: scale(1.05); }
  @media (max-width: 767px) {
    .dd-logo-centered {
      width: 48px;
      height: 48px;
      border-radius: 9999px;
      background: #fff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
    .dd-logo-centered .dd-word {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .dd-logo-centered .dd-bell-svg { transform: scale(1.1); }
    .dd-nav-actions { gap: 2px; }
  }
  @media (min-width: 768px) {
    .dd-logo-centered {
      position: static;
      transform: none;
    }
  }
  .dd-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #FF5722;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 9999px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }

  /* Pre-shop Lifestyle Hero with Condensation Droplets & Warm Neon Glow */
  .dd-hero-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background: #161B22;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .dd-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
      linear-gradient(to bottom, rgba(13, 15, 18, 0.25) 0%, rgba(13, 15, 18, 0.7) 100%),
      url('https://images.unsplash.com/photo-1578916171728-46686eac8d58?w=1200&q=80&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    filter: brightness(0.7) contrast(1.1) saturate(1.05);
    transform: scale(1.02);
  }
  .dd-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at top, rgba(255, 87, 34, 0.35) 0%, transparent 70%),
                linear-gradient(180deg, rgba(13, 15, 18, 0.45) 0%, rgba(13, 15, 18, 0.95) 100%);
  }

  /* Cards & Surface Tokens */
  .bg-surface { background-color: #161B22; }
  .border-white\/8 { border-color: rgba(255, 255, 255, 0.08); }
  .border-white\/10 { border-color: rgba(255, 255, 255, 0.10); }
  .border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
  .shadow-soft { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
  .shadow-bell { box-shadow: 0 8px 24px rgba(255, 87, 34, 0.35); }

  /* Product Card Finish (16px border-radius, 1px translucent border, dark theme) */
  .prod-card {
    background: #161B22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .prod-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 87, 34, 0.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  }
  .prod-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #FFFFFF;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
  }
  .prod-price {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    color: #10B981;
    margin-top: .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .add-btn {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #FF5722 0%, #E54918 100%);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(255, 87, 34, .4);
    cursor: pointer;
    border: none;
    transition: transform .12s ease, box-shadow .12s ease;
    user-select: none;
    -webkit-user-select: none;
  }
  .add-btn:hover { transform: scale(1.08); }
  .add-btn:active { transform: scale(.94); }

  /* Stepper */
  .stepper {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    display: flex;
    align-items: center;
    gap: 0;
    background: #21262D;
    border: 1.5px solid #FF5722;
    border-radius: 9999px;
    box-shadow: 0 6px 14px rgba(255, 87, 34, .35);
    overflow: hidden;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
  }
  .stepper button {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #FF5722;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease;
  }
  .stepper button:hover { background: rgba(255, 87, 34, .2); }
  .stepper button:active { background: rgba(255, 87, 34, .35); }
  .stepper-count {
    min-width: 1.75rem;
    text-align: center;
    font-size: .875rem;
    font-weight: 700;
    color: #fff;
  }

  /* Quick Category Pills */
  .dd-qpill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 9999px;
    background: #161B22;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 700;
    color: #F0F6FC;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
  }
  .dd-qpill:hover { border-color: rgba(255, 87, 34, 0.4); background: #21262D; }
  .dd-qpill:active { transform: scale(.96); }
  .dd-qpill.dd-qpill-amber { border-color: rgba(255, 87, 34, 0.4); }

  /* Horizontal Category Scroll */
  .cat-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .cat-scroll.dragging { cursor: grabbing; scroll-behavior: auto; }
  .cat-scroll::-webkit-scrollbar { display: none; }
  .cat-chip { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
  .cat-chip:active { transform: scale(.96); }

  /* Floating Basket Pill — hidden UNLESS the cart has items (see renderFloatingBasket) */
  .dd-floating-basket {
    position: fixed;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 456px;
    z-index: 35;
    border-radius: 16px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    padding: 12px 18px;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.45);
    display: none;                    /* never rendered while the basket is empty */
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    user-select: none;
    -webkit-user-select: none;
  }
  .dd-floating-basket.show { display: flex; }
  .dd-floating-basket:active { transform: translateX(-50%) scale(0.98); }

  /* Global Inputs */
  .dd-input {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .dd-input:focus {
    outline: none;
    border-color: #FF5722;
    box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.25);
  }

  /* Driver Portal Specifics */
  .drv-hero { position: relative; border-radius: 16px; overflow: hidden; min-height: 220px; height: auto; margin-bottom: 1rem; isolation: isolate; }
  .drv-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .drv-hero-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 15, 18, 0.96) 0%, rgba(13, 15, 18, 0.35) 55%, rgba(13, 15, 18, 0.1) 100%); z-index: 1; }
  .drv-hero-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1rem 1.5rem; z-index: 2; }
  .drv-hero-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 9999px; padding: 3px 10px; font-size: 10px; font-weight: 700; color: #fff; margin-bottom: 6px; }
  .drv-hero-title { color: #fff; font-size: 1.35rem; font-weight: 900; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
  .drv-hero-sub { color: rgba(255, 255, 255, 0.92); font-size: 12px; margin-top: 3px; text-shadow: 0 1px 6px rgba(0,0,0,.6); max-width: 34ch; }
  .drv-section-label { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #9ca3af; margin: 1rem 0 .5rem; }

  /* Glassmorphic Driver Badges */
  .drv-glass-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: -1.5rem .5rem 1rem; position: relative; z-index: 3; }
  .drv-glass { background: rgba(22, 27, 34, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: .75rem .5rem; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
  .drv-glass-num { font-size: .95rem; font-weight: 900; color: #fff; margin-top: 2px; }
  .drv-glass-num.amber { color: #FF5722; }
  .drv-glass-lbl { font-size: 8.5px; color: rgba(255, 255, 255, 0.7); font-weight: 600; line-height: 1.2; margin-top: 1px; }

  /* Vehicle Picker */
  .veh-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .veh-tile { position: relative; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 16px; overflow: hidden; cursor: pointer; background: #21262D; transition: border-color .15s ease; }
  .veh-tile img { width: 100%; height: 80px; object-fit: cover; display: block; filter: brightness(0.85); }
  .veh-tile-lbl { padding: .5rem; font-size: 12px; font-weight: 700; color: #fff; background: rgba(13,15,18,0.7); }
  .veh-tile input { position: absolute; opacity: 0; pointer-events: none; }
  .veh-tile.veh-selected { border-color: #FF5722; }
  .veh-tile.veh-selected .veh-tile-lbl { color: #FF5722; background: rgba(255, 87, 34, 0.15); }
  .veh-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 9999px; background: #FF5722; color: #fff; display: none; align-items: center; justify-content: center; font-size: 14px; }
  .veh-tile.veh-selected .veh-check { display: flex; }

  /* Drag & Drop File Upload Zones */
  .dd-drop { display: flex; flex-direction: column; align-items: center; gap: .35rem; border: 2px dashed rgba(255, 255, 255, 0.18); border-radius: 16px; padding: 1rem; text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.03); transition: background .15s ease, border-color .15s ease; }
  .dd-drop:hover, .dd-drop.dd-drag { background: rgba(255, 87, 34, 0.08); border-color: #FF5722; }
  .dd-drop.dd-has-file { border-style: solid; border-color: #10B981; background: rgba(16, 185, 129, 0.08); }
  .dd-drop-title { font-size: 12px; font-weight: 800; color: #fff; }
  .dd-drop-sub { font-size: 10px; color: #9ca3af; }
  .dd-drop-file { font-size: 10px; font-weight: 700; color: #10B981; margin-top: 2px; word-break: break-all; }

  /* Modals, Drawers & Utilities */
  .modal-overlay { position: fixed; inset: 0; z-index: 90; align-items: center; justify-content: center; padding: 1rem; }
  .modal-overlay:not(.hidden) { display: flex; }
  .info-card { width: 100%; max-width: 26rem; max-height: 85vh; }
  .footer-link { font-size: .8125rem; font-weight: 600; color: #d1d5db; padding: .55rem .6rem; border-radius: 12px; background: rgba(255,255,255,.04); text-align: left; transition: background .12s ease, color .12s ease; cursor: pointer; }
  .footer-link:hover { background: rgba(255,255,255,.1); color: #fff; }
  .legal-tab { background: #21262D; color: #d1d5db; }
  .legal-tab.active { background: #FF5722; color: #fff; }
  .q-chip { font-size: .75rem; font-weight: 600; color: #FF5722; background: rgba(255,87,34,.15); padding: .4rem .7rem; border-radius: 9999px; cursor: pointer; transition: background .12s ease; }
  .q-chip:hover { background: rgba(255,87,34,.25); }
  .rate-star { color: #4b5563; cursor: pointer; transition: transform .1s ease, color .1s ease; background: none; border: none; }
  .rate-star.on { color: #FFB300; }
  .rate-star:hover { transform: scale(1.15); }
  .dd-stars { display: inline-flex; align-items: center; gap: .3rem; line-height: 1; }
  .dd-stars-ic { color: #FFB300; font-size: .8rem; letter-spacing: 1px; }
  .dd-stars-txt { color: #9ca3af; font-size: 11px; font-weight: 600; }
  .side-drawer { width: 85%; max-width: 20rem; transform: translateX(-110%); transition: transform .22s ease; }
  .side-drawer.side-open { transform: translateX(0); }
  .side-drawer.side-closed { transform: translateX(-110%); }
  #sideDrawerWrap, #addrModal { position: fixed; inset: 0; z-index: 70; }
  #sideDrawerWrap { display: none; animation: fadeIn .18s ease; }
  #addrModal { display: none; align-items: center; justify-content: center; }
  #sideDrawerWrap:not(.hidden), #addrModal:not(.hidden) { display: flex; }
  #addrModal > div:last-child { margin: 0 auto; }
  .fade-in { animation: fadeIn .25s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }

  /* =========================================================================
     THEME SUPPORT — CSS custom properties + light/dark override layer.
     Dark is the default (:root). html.light switches to the light palette.
     Managed by window.DDTheme (auto | light | dark) — see head bootstrap.
     ========================================================================= */
  :root {
    --dd-page: #0D0F12;
    --dd-surface: #161B22;
    --dd-surface-2: #21262D;
    --dd-border: rgba(255, 255, 255, 0.10);
    --dd-text: #F0F6FC;
    --dd-text-soft: #d1d5db;
    --dd-text-muted: #9ca3af;
    --dd-img-bg: #2A2A2A;              /* neutral product-shot backdrop (dark) */
    color-scheme: dark;
  }
  html.light {
    --dd-page: #F8F9FA;                /* clean off-white page background */
    --dd-surface: #FFFFFF;             /* white product cards */
    --dd-surface-2: #F3F4F6;
    --dd-border: #E5E7EB;              /* subtle card borders */
    --dd-text: #0f172a;                /* dark slate body text */
    --dd-title: #1e293b;               /* dark slate card titles */
    --dd-text-soft: #475569;
    --dd-text-muted: #6b7280;
    --dd-img-bg: #F3F4F6;              /* neutral product-shot backdrop (light) */
    color-scheme: light;
  }

  /* Bottom-nav clearance: the approved narrow reference uses an 80px fixed
     navigation bar. Preserve room for the bar and for a visible basket above it. */
  #app { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  #app.has-floating-basket { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  #bottomNav { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .dd-floating-basket { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* Approved home/category and comparable shop-card treatment. These parent
     selectors deliberately leave prodCard output, data attributes, and cart
     bindings shared while allowing the two retained home/shop contexts to differ. */
  #homeCategoryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #homeCategoryGrid .dd-home-category-card {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    color: #1c1b1b;
  }
  #homeCategoryGrid .dd-home-category-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128px;
    background: #f0eded;
  }
  #homeCategoryGrid .dd-home-category-label {
    display: block;
    margin: 0;
    padding: 12px;
    color: #1c1b1b;
  }
  #prodGrid .prod-card {
    padding: 12px;
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }
  #prodGrid .product-image-wrap {
    height: 128px;
    min-height: 128px;
    aspect-ratio: auto;
    padding: 0;
    border-radius: 8px;
    background: #f0eded;
  }
  #prodGrid .product-img { object-fit: cover; }
  #prodGrid .prod-name { color: #1c1b1b; }
  #prodGrid .prod-brand { color: #5a4136; }
  #prodGrid .prod-price { color: #6e4bab; }
  #prodGrid .add-btn {
    background: #f0eded;
    color: #6e4bab;
    border-radius: 12px;
    box-shadow: none;
  }
  #prodGrid .add-btn:hover {
    background: #ebdcff;
    box-shadow: none;
  }

  /* Approved narrow fixed-nav treatment. Classes used by the existing route
     renderer still determine which control is active. */
  #bottomNav {
    background: #fff;
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    backdrop-filter: none;
  }
  #bottomNav > div {
    min-height: 80px;
    align-items: center;
  }
  #bottomNav .navBtn {
    min-height: 52px;
    justify-content: center;
    padding: 4px 16px;
  }
  #bottomNav .navBtn.text-brand {
    background: #ff6600;
    color: #fff;
    border-radius: 12px;
  }
  /* Hamburger / menu + header icon glyphs remain high-contrast on the approved purple header in both themes. */
  #menuBtn .ms, #menuBtn { color: #fff; }
  #menuBtn:hover { background: rgba(255, 255, 255, 0.15); }

  /* ---- Light-mode overrides for the Tailwind utilities used across views ---- */
  html.light body { background: var(--dd-page); color: var(--dd-text); }

  /* Surfaces */
  html.light .bg-surface { background-color: #FFFFFF; }
  html.light .bg-surface\/90 { background-color: rgba(255, 255, 255, 0.92); }
  html.light .bg-surface\/95 { background-color: rgba(255, 255, 255, 0.95); }
  html.light .bg-white\/5 { background-color: rgba(17, 24, 39, 0.05); }
  html.light .bg-white\/8 { background-color: rgba(17, 24, 39, 0.06); }
  html.light .bg-white\/10 { background-color: rgba(17, 24, 39, 0.07); }
  html.light .bg-white\/15 { background-color: rgba(17, 24, 39, 0.10); }
  html.light .hover\:bg-white\/5:hover { background-color: rgba(17, 24, 39, 0.05); }
  html.light .hover\:bg-white\/10:hover { background-color: rgba(17, 24, 39, 0.07); }
  html.light .hover\:bg-white\/15:hover { background-color: rgba(17, 24, 39, 0.10); }
  html.light .hover\:bg-white\/20:hover { background-color: rgba(17, 24, 39, 0.12); }
  html.light .shadow-soft { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); }
  html.light .dd-nav { background: #6e4bab; color: #fff; border-bottom-color: transparent; }
  html.light .dd-pill { background: transparent; border-color: transparent; color: #fff; }
  html.light .dd-pill:hover { opacity: .8; }
  html.light .dd-nav-btn { background: rgba(255, 255, 255, 0.10); border-color: transparent; color: #fff; }
  html.light .dd-nav-btn:hover { background: rgba(255, 255, 255, 0.18); }
  html.light .dd-input { background: #FFFFFF; border-color: #E5E7EB; color: #111827; }
  html.light .dd-qpill { background: #FFFFFF; border-color: #E5E7EB; color: #111827; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
  html.light .dd-qpill:hover { background: #F3F4F6; border-color: rgba(255, 87, 34, 0.4); }
  html.light .footer-link { color: #374151; background: rgba(17, 24, 39, 0.04); }
  html.light .footer-link:hover { background: rgba(17, 24, 39, 0.08); color: #111827; }
  html.light .legal-tab { background: #F3F4F6; color: #374151; }
  html.light .stepper { background: #FFFFFF; }
  html.light .stepper-count { color: #111827; }
  html.light .veh-tile { background: #FFFFFF; border-color: rgba(17, 24, 39, 0.12); }
  html.light .veh-tile-lbl { background: rgba(248, 249, 250, 0.88); color: #111827; }
  html.light .dd-drop { background: rgba(17, 24, 39, 0.03); border-color: rgba(17, 24, 39, 0.15); }
  html.light .dd-drop-title { color: #111827; }
  html.light .dd-hero-banner { background: #FFFFFF; border-color: #E5E7EB; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); }
  html.light .prod-card { background: #FFFFFF; border-color: #E5E7EB; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }
  html.light .prod-card:hover { border-color: rgba(255, 87, 34, 0.4); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); }
  html.light .prod-name { color: var(--dd-title); }
  html.light h2.text-white, html.light h3.text-white { color: var(--dd-title); }

  /* Borders */
  html.light .border-white\/5 { border-color: rgba(17, 24, 39, 0.06); }
  html.light .border-white\/8 { border-color: #E5E7EB; }
  html.light .border-white\/10 { border-color: #E5E7EB; }
  html.light .border-white\/15 { border-color: rgba(17, 24, 39, 0.18); }
  html.light .border-white\/20 { border-color: rgba(17, 24, 39, 0.20); }
  html.light .border-white\/30 { border-color: rgba(17, 24, 39, 0.25); }

  /* Text: white / white-alpha / light-gray utility text becomes dark slate */
  html.light .text-white { color: var(--dd-text); }
  html.light .text-white\/90 { color: rgba(17, 24, 39, 0.9); }
  html.light .text-white\/80, html.light .text-white\/75 { color: rgba(17, 24, 39, 0.8); }
  html.light .text-white\/70 { color: rgba(17, 24, 39, 0.75); }
  html.light .text-gray-200 { color: #374151; }
  html.light .text-gray-300 { color: #4b5563; }
  html.light .text-gray-400 { color: #6b7280; }
  html.light .hover\:text-white:hover { color: #111827; }

  /* Restore white text on colored / gradient / image-overlay surfaces */
  html.light .bg-brand.text-white,
  html.light .bg-mint.text-white,
  html.light .bg-green-500.text-white,
  html.light .bg-emerald-600.text-white,
  html.light .bg-gray-700.text-white,
  html.light .bg-gradient-to-r.text-white,
  html.light .bg-gradient-to-br.text-white { color: #FFFFFF; }
  html.light .dd-hero-banner .text-white,
  html.light .drv-hero .text-white,
  html.light .drv-hero-body .text-white { color: #FFFFFF; }
  html.light .dd-hero-banner .text-gray-300 { color: #d1d5db; }

  /* =========================================================================
     MISSING TAILWIND UTILITIES — the precompiled styles.css never generated
     these classes, so every gradient CTA (Become a Driver, Start Shopping,
     Checkout, Send message) rendered as WHITE TEXT ON WHITE BACKGROUND.
     Defined here (unlayered) so they always win over the stylesheet.
     ========================================================================= */
  .bg-gradient-to-r { background-image: linear-gradient(to right, var(--dd-grad-from, #FF5722), var(--dd-grad-to, #E54918)); }
  .from-brand { --dd-grad-from: #FF5722; }
  .from-mint { --dd-grad-from: #10B981; }
  .to-brand-dark { --dd-grad-to: #E54918; }
  .to-emerald-600 { --dd-grad-to: #059669; }
  .bg-brand\/15 { background-color: rgba(255, 87, 34, 0.15); }
  .bg-brand\/20 { background-color: rgba(255, 87, 34, 0.20); }
  .bg-brand\/25 { background-color: rgba(255, 87, 34, 0.25); }
  .hover\:bg-brand\/25:hover { background-color: rgba(255, 87, 34, 0.25); }
  .hover\:bg-brand\/30:hover { background-color: rgba(255, 87, 34, 0.30); }
  .bg-white\/25 { background-color: rgba(255, 255, 255, 0.25); }
  .bg-mint\/10 { background-color: rgba(16, 185, 129, 0.10); }

  /* Light-mode tints for the above brand utilities */
  html.light .bg-brand\/10 { background-color: rgba(255, 87, 34, 0.08); }
  html.light .bg-brand\/15 { background-color: rgba(255, 87, 34, 0.10); }

  /* ---- Driver banner card: explicit colors in BOTH themes (no white-on-white) ---- */
  .dd-driver-card { border: 1px solid rgba(255, 87, 34, 0.4); background: rgba(255, 87, 34, 0.10); border-radius: 1rem; padding: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30); }
  .dd-driver-card .dd-card-title { color: #FFFFFF; }
  .dd-driver-card p { color: var(--dd-text-muted); }
  html.light .dd-driver-card { background: #FFF7ED; border-color: #FDBA74; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); }
  html.light .dd-driver-card .dd-card-title { color: #1e293b; }
  html.light .dd-driver-card p { color: #475569; }

  /* ---- FAQ accordion (homepage) ---- */
  .dd-faq { border: 1px solid var(--dd-border); background: var(--dd-surface); border-radius: 1rem; overflow: hidden; }
  .dd-faq + .dd-faq { margin-top: .5rem; }
  .dd-faq summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; font-size: 13px; font-weight: 800; color: var(--dd-text); cursor: pointer; list-style: none; }
  .dd-faq summary::-webkit-details-marker { display: none; }
  .dd-faq summary .ms { color: #FF5722; font-size: 20px; transition: transform .18s ease; }
  .dd-faq[open] summary .ms { transform: rotate(180deg); }
  .dd-faq .dd-faq-body { padding: 0 1rem .9rem; font-size: 12px; line-height: 1.55; color: var(--dd-text-soft); }

  /* ---- Floating support widget (above the bottom nav) ---- */
  .dd-support-fab { position: fixed; right: 12px; bottom: 76px; z-index: 34; width: 52px; height: 52px; border-radius: 9999px; border: none; background: #10B981; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(16, 185, 129, .45); cursor: pointer; transition: transform .12s ease; }
  .dd-support-fab:active { transform: scale(.94); }
  .dd-support-fab .ms { font-size: 24px; }

  /* ---- Homepage Best Sellers grid ---- */
  .dd-ess-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  @media (min-width: 640px) { .dd-ess-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ---- SEO keyword matrix footer links ---- */
  .dd-seo-links { display: flex; flex-wrap: wrap; gap: .4rem; }
  .dd-seo-link { font-size: 11px; font-weight: 700; color: var(--dd-text-soft); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--dd-border); padding: .4rem .7rem; border-radius: 9999px; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
  .dd-seo-link:hover { color: #FF5722; border-color: rgba(255, 87, 34, .4); background: rgba(255, 87, 34, .08); }
  html.light .dd-seo-link { background: rgba(17, 24, 39, 0.04); }

  /* ---- Hero: Use My Location + delivery ETA chip ---- */
  .dd-loc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .15s ease; }
  .dd-loc-btn:hover { background: rgba(255, 255, 255, 0.15); }
  .dd-loc-btn:disabled { opacity: .6; cursor: default; }
  .dd-eta-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #10B981; background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .3); border-radius: 9999px; padding: .35rem .7rem; }

  /* ---- Source-backed customer hero treatment (task 3.2) ---- */
  .dd-hero-banner {
    min-height: 200px;
    border: 0;
    border-radius: 12px;
    background: #6e4bab;
    box-shadow: 0 10px 30px rgba(73, 36, 132, 0.12);
  }
  .dd-hero-bg {
    background:
      radial-gradient(circle at 84% 24%, rgba(255, 102, 0, 0.34) 0, rgba(255, 102, 0, 0) 32%),
      radial-gradient(circle at 94% 86%, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 28%),
      linear-gradient(135deg, #6e4bab 0%, #553291 100%);
    background-position: center;
    filter: none;
    transform: none;
  }
  .dd-hero-overlay {
    background: linear-gradient(90deg, rgba(78, 41, 137, 0.12) 0%, rgba(78, 41, 137, 0.04) 60%, rgba(78, 41, 137, 0.28) 100%);
  }
  html.light .dd-hero-banner {
    background: #6e4bab;
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(73, 36, 132, 0.12);
  }
  .dd-hero-cta {
    background: #ff6600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }
  .dd-hero-cta:hover { background: #e65c00; }
  .dd-hero-conversion {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }
  .dd-hero-conversion #pcInput {
    background: #fff;
    color: #1c1b1b;
  }
  .dd-hero-conversion #pcInput::placeholder { color: #5a4136; }
  .dd-hero-conversion .dd-loc-btn {
    background: rgba(110, 75, 171, 0.10);
    border-color: rgba(110, 75, 171, 0.28);
    color: #553291;
  }
  .dd-hero-conversion .dd-loc-btn:hover { background: rgba(110, 75, 171, 0.18); }
  .dd-hero-conversion .dd-eta-chip {
    color: #246f24;
    background: #e8f5e8;
    border-color: rgba(45, 138, 45, 0.32);
  }

  /* Shared shop-card state: the empty and populated-cart controls retain the
     same source-backed pale surface and readable secondary foreground in both
     themes. This selector intentionally does not affect other steppers. */
  #prodGrid .stepper {
    background: #f0eded;
    border-color: transparent;
    box-shadow: none;
  }
  #prodGrid .stepper button { color: #6e4bab; }
  #prodGrid .stepper button:hover { background: #ebdcff; }
  #prodGrid .stepper button:active { background: #d4bbff; }
  #prodGrid .stepper-count { color: #553291; }

/* =========================================================================
   HERO + HOME SCROLLER — added to fix undefined dd-* classes
   (dd-hero2, dd-pc-*, dd-cta, dd-btn, dd-sticky-h, dd-header-h, dd-img-bg)
   ========================================================================= */

:root {
  --dd-header-h: 101px;   /* app header height */
  --dd-sticky-h: 56px;    /* sticky bar height */
}

/* Hero shell */
.dd-hero2 {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255,107,53,.16), rgba(0,0,0,0) 60%),
    #141017;
  border: 1px solid rgba(255,255,255,.10);
}

.dd-pc-card {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.dd-pc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-brand, #FF6B35);
  background: rgba(255,107,53,.12);
  border: 1px solid rgba(255,107,53,.28);
  padding: .3rem .6rem;
  border-radius: 999px;
}

.dd-pc-title {
  font-size: 1.65rem;
  line-height: 1.15;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.01em;
}

.dd-pc-sub {
  font-size: .875rem;
  line-height: 1.4;
  color: rgba(255,255,255,.62);
  margin-top: -.25rem;
}

/* Postcode input — FIX: icon sits INSIDE on the left, text never under it */
.dd-pc-input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;          /* left pad clears the icon */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 15px;
  line-height: 48px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.dd-pc-input::placeholder { color: rgba(255,255,255,.42); }
.dd-pc-input:focus {
  border-color: rgba(255,107,53,.55);
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 3px rgba(255,107,53,.16);
}

/* Icon inside the field, vertically centred, non-interactive */
.dd-pc-field { position: relative; }
.dd-pc-field > .dd-pc-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  line-height: 1;
  color: rgba(255,255,255,.55);
  pointer-events: none;            /* never blocks typing */
  z-index: 2;
}

/* Primary CTA */
.dd-cta {
  height: 50px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF6B35, #E55A24);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255,107,53,.28);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.dd-cta:hover { filter: brightness(1.05); box-shadow: 0 10px 26px rgba(255,107,53,.36); }
.dd-cta:active { transform: translateY(1px); }

.dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.dd-eta-chip {
  align-items: center;
  gap: .3rem;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 700;
}

.dd-img-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- Popular row: real horizontal scroll ---- */
.dd-pop-scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
  margin: 0 -1rem;          /* bleed to screen edges */
  padding-left: 1rem;
  padding-right: 1rem;
}
.dd-pop-scroller::-webkit-scrollbar { display: none; }

/* FIX: fixed-width cards so images can never stretch/overflow */
.dd-pop-scroller > * {
  flex: 0 0 auto;
  width: 116px;
  max-width: 116px;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 14px;
}

/* Constrain the media box + force the image to fill it without distortion */
.dd-pop-scroller .dd-home-category-media {
  width: 100%;
  height: 84px;
  overflow: hidden;
  background: #f0eded;
}
.dd-pop-scroller .dd-home-category-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crop, never stretch */
  max-width: 100%;
  max-height: 100%;
}

.dd-pop-scroller .dd-home-category-label {
  display: block;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}