/*
 * Izipho Gifts multi-page shop stylesheet
 * Generated as a self-contained production asset.
 * Includes the utility CSS formerly supplied by the Tailwind browser CDN,
 * followed by the original Izipho shop design rules.
 */

/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, 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-50: oklch(97.1% 0.013 17.38);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --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);
    --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-black: 900;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --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);
  }
}
@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%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, 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 {
    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;
  }
  ::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)) {
        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;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .-top-3 {
    top: calc(var(--spacing) * -3);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .top-full {
    top: 100%;
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-8 {
    right: calc(var(--spacing) * 8);
  }
  .right-12 {
    right: calc(var(--spacing) * 12);
  }
  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1 {
    left: calc(var(--spacing) * 1);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-8 {
    left: calc(var(--spacing) * 8);
  }
  .left-12 {
    left: calc(var(--spacing) * 12);
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[9999\] {
    z-index: 9999;
  }
  .z-\[99999\] {
    z-index: 99999;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .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-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }
  .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-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .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-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-52 {
    height: calc(var(--spacing) * 52);
  }
  .h-\[90vh\] {
    height: 90vh;
  }
  .h-full {
    height: 100%;
  }
  .max-h-\[60vh\] {
    max-height: 60vh;
  }
  .max-h-\[78vh\] {
    max-height: 78vh;
  }
  .max-h-\[520px\] {
    max-height: 520px;
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .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-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-fit {
    width: fit-content;
  }
  .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-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize-none {
    resize: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .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);
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :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)));
    }
  }
  .space-y-3 {
    :where(& > :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)));
    }
  }
  .space-y-4 {
    :where(& > :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)));
    }
  }
  .space-y-6 {
    :where(& > :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)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-10 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-12 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
  }
  .rounded-\[2rem\] {
    border-radius: 2rem;
  }
  .rounded-\[4rem\] {
    border-radius: 4rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .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-b-\[2rem\] {
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
  }
  .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-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-amber-200 {
    border-color: var(--color-amber-200);
  }
  .border-black {
    border-color: var(--color-black);
  }
  .border-blue-100 {
    border-color: var(--color-blue-100);
  }
  .border-emerald-500 {
    border-color: var(--color-emerald-500);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-slate-50 {
    border-color: var(--color-slate-50);
  }
  .border-slate-100 {
    border-color: var(--color-slate-100);
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-zinc-100 {
    border-color: var(--color-zinc-100);
  }
  .border-zinc-200 {
    border-color: var(--color-zinc-200);
  }
  .bg-\[\#B30000\] {
    background-color: #B30000;
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/80 {
    background-color: color-mix(in srgb, #000 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }
  .bg-emerald-500\/90 {
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 90%, transparent);
    }
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-50\/50 {
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
    }
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-slate-900\/80 {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/50 {
    background-color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .bg-zinc-50 {
    background-color: var(--color-zinc-50);
  }
  .bg-zinc-100 {
    background-color: var(--color-zinc-100);
  }
  .bg-zinc-300 {
    background-color: var(--color-zinc-300);
  }
  .bg-zinc-800 {
    background-color: var(--color-zinc-800);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .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);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .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);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  .py-40 {
    padding-block: calc(var(--spacing) * 40);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-60 {
    padding-top: calc(var(--spacing) * 60);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-16 {
    padding-right: calc(var(--spacing) * 16);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .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-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--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-\[8px\] {
    font-size: 8px;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .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-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\.1em\] {
    --tw-tracking: 0.1em;
    letter-spacing: 0.1em;
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-\[0\.3em\] {
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
  }
  .tracking-\[0\.4em\] {
    --tw-tracking: 0.4em;
    letter-spacing: 0.4em;
  }
  .tracking-\[0\.08em\] {
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
  }
  .tracking-\[0\.12em\] {
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
  }
  .tracking-\[0\.14em\] {
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
  }
  .tracking-\[0\.16em\] {
    --tw-tracking: 0.16em;
    letter-spacing: 0.16em;
  }
  .tracking-\[0\.18em\] {
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
  }
  .tracking-\[0\.22em\] {
    --tw-tracking: 0.22em;
    letter-spacing: 0.22em;
  }
  .tracking-\[0\.24em\] {
    --tw-tracking: 0.24em;
    letter-spacing: 0.24em;
  }
  .tracking-\[0\.25em\] {
    --tw-tracking: 0.25em;
    letter-spacing: 0.25em;
  }
  .tracking-\[0\.28em\] {
    --tw-tracking: 0.28em;
    letter-spacing: 0.28em;
  }
  .tracking-\[0\.35em\] {
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .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);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-\[\#B30000\] {
    color: #B30000;
  }
  .text-amber-700 {
    color: var(--color-amber-700);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-emerald-600 {
    color: var(--color-emerald-600);
  }
  .text-emerald-700 {
    color: var(--color-emerald-700);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-red-200 {
    color: var(--color-red-200);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/60 {
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/72 {
    color: color-mix(in srgb, #fff 72%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 72%, transparent);
    }
  }
  .text-zinc-200 {
    color: var(--color-zinc-200);
  }
  .text-zinc-300 {
    color: var(--color-zinc-300);
  }
  .text-zinc-400 {
    color: var(--color-zinc-400);
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .accent-black {
    accent-color: var(--color-black);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-10 {
    opacity: 10%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(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-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    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, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    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, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    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-black\/10 {
    --tw-ring-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  .backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    -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-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -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-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-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .group-hover\:translate-x-1 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-105 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:text-black {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-black);
      }
    }
  }
  .group-hover\:text-slate-500 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-slate-500);
      }
    }
  }
  .peer-checked\:translate-x-6 {
    &:is(:where(.peer):checked ~ *) {
      --tw-translate-x: calc(var(--spacing) * 6);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .peer-checked\:bg-black {
    &:is(:where(.peer):checked ~ *) {
      background-color: var(--color-black);
    }
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-\[1\.02\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.02;
      }
    }
  }
  .hover\:border-black {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-black);
      }
    }
  }
  .hover\:bg-black {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-black);
      }
    }
  }
  .hover\:bg-red-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
  }
  .hover\:bg-slate-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .hover\:bg-slate-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-800);
      }
    }
  }
  .hover\:bg-zinc-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-zinc-100);
      }
    }
  }
  .hover\:bg-zinc-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-zinc-800);
      }
    }
  }
  .hover\:text-black {
    &:hover {
      @media (hover: hover) {
        color: var(--color-black);
      }
    }
  }
  .hover\:text-red-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:text-white\/70 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #fff 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-white) 70%, transparent);
        }
      }
    }
  }
  .focus\:border-black {
    &:focus {
      border-color: var(--color-black);
    }
  }
  .focus\:bg-white {
    &:focus {
      background-color: var(--color-white);
    }
  }
  .focus\:ring-1 {
    &:focus {
      --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);
    }
  }
  .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-black {
    &:focus {
      --tw-ring-color: var(--color-black);
    }
  }
  .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);
    }
  }
  .active\:bg-slate-50 {
    &:active {
      background-color: var(--color-slate-50);
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:h-40 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 40);
    }
  }
  .sm\:w-32 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 32);
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:items-start {
    @media (width >= 40rem) {
      align-items: flex-start;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:gap-8 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .sm\:p-14 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 14);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:p-10 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .md\:text-3xl {
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .lg\:mt-20 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 20);
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:h-24 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 24);
    }
  }
  .lg\:w-auto {
    @media (width >= 64rem) {
      width: auto;
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:justify-start {
    @media (width >= 64rem) {
      justify-content: flex-start;
    }
  }
  .lg\:gap-6 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:gap-8 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-10 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .lg\:rounded-3xl {
    @media (width >= 64rem) {
      border-radius: var(--radius-3xl);
    }
  }
  .lg\:rounded-\[4rem\] {
    @media (width >= 64rem) {
      border-radius: 4rem;
    }
  }
  .lg\:border-none {
    @media (width >= 64rem) {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .lg\:p-16 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:px-12 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .lg\:py-7 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 7);
    }
  }
  .lg\:py-40 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 40);
    }
  }
  .lg\:pt-0 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .lg\:pb-12 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }
  .lg\:text-left {
    @media (width >= 64rem) {
      text-align: left;
    }
  }
  .lg\:text-right {
    @media (width >= 64rem) {
      text-align: right;
    }
  }
  .lg\:text-2xl {
    @media (width >= 64rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .lg\:text-6xl {
    @media (width >= 64rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .lg\:text-sm {
    @media (width >= 64rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .lg\:text-xs {
    @media (width >= 64rem) {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\32 xl\:grid-cols-4 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}
@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-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-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-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;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@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-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-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-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}


/* Izipho design system and component styles */
/* Extracted from SHOP.html for the multi-page conversion. */


        @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
        
        :root {
    
            /* =========================================
               BRAND COLORS
            ========================================= */
    
            --ig-legacy-blue: #373435; /* compatibility alias mapped to Izipho charcoal */
            --ig-legacy-blue-soft: #4A4A4A; /* compatibility alias mapped to Izipho dark grey */
    
            --ig-legacy-red: #B30000;
            --ig-legacy-red-soft: #cf1a1a;
    
            --ig-legacy-black: #050505;
            --ig-legacy-text: #111111;
    
            --ivory: #ffffff;
    
            --surface: #fafafa;
            --surface-soft: #f5f5f5;
    
            --border: #ececec;
    
        }
    
        /* =========================================
           GLOBAL RESET
        ========================================= */
    
        * {
            box-sizing: border-box;
        }
    
        html {
    
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
    
        }
    
        body {
    
            margin: 0;
            overflow-x: hidden;
    
            font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
            background-color: var(--ivory);
            color: var(--ig-legacy-text);
    
            line-height: 1.7;
    
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
    
        }
    
        img {
    
            display: block;
            max-width: 100%;
    
        }
    
        ::selection {
    
            background: var(--ig-legacy-blue);
            color: white;
    
        }
    
        /* =========================================
           GLASS / NAV
        ========================================= */
    
        .glass {
    
            background: rgba(255,255,255,0.7);
    
            -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    
        }
    
        .nav-glass {
    
            background: rgba(255, 255, 255, 0.92);
    
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
    
            border-bottom: 1px solid rgba(0,0,0,0.04);
    
        }
    
        /* =========================================
           TYPOGRAPHY
        ========================================= */
    
        .serif {
            font-family: 'Playfair Display', serif;
        }
        
        [x-cloak] {
            display: none !important;
        }
    
        .text-brand {
            color: var(--ig-legacy-black);
        }
    
        .text-accent {
            color: var(--ig-legacy-red);
        }
    
        .text-muted {
            color: #6b7280;
        }
    
        /* =========================================
           BACKGROUNDS
        ========================================= */
    
        .bg-brand {
    
            background-color: var(--ig-legacy-blue);
            color: white;
    
        }
    
        .bg-brand:hover {
            background-color: var(--ig-legacy-blue-soft);
        }
    
        .bg-accent {
    
            background-color: var(--ig-legacy-red);
            color: white;
    
        }
    
        .bg-accent:hover {
            background-color: var(--ig-legacy-red-soft);
        }
    
        .bg-surface {
            background-color: var(--surface);
        }
    
        .bg-surface-soft {
            background-color: var(--surface-soft);
        }
    
        .soft-surface {
    
            background:
                linear-gradient(
                    180deg,
                    rgba(255,255,255,1) 0%,
                    rgba(250,250,250,1) 100%
                );
    
        }
    
        .brand-gradient {
    
            background:
                linear-gradient(
                    135deg,
                    #1800ad 0%,
                    #0d006e 100%
                );
    
        }
    
        /* =========================================
           BORDERS
        ========================================= */
    
        .border-brand {
            border-color: var(--ig-legacy-blue);
        }
    
        .border-accent {
            border-color: var(--ig-legacy-red);
        }
    
        .border-soft {
            border-color: var(--border);
        }
    
        .divider-brand {
    
            width: 80px;
            height: 2px;
    
            background: var(--ig-legacy-blue);
    
        }
    
        /* =========================================
           IMAGES
        ========================================= */
    
        .img-placeholder {
    
            background-color: #f9f9f9;
    
            position: relative;
            overflow: hidden;
    
        }
    
        /* =========================================
           CATEGORY LINKS
        ========================================= */
    
        .category-link {
    
            position: relative;
    
            transition: all 0.3s ease;
    
            text-align: left;
            width: 100%;
    
        }
        
        .category-link.active {
    
            font-weight: 900;
    
            color: var(--ig-legacy-blue) !important;
    
        }
    
        .category-link:hover {
            color: var(--ig-legacy-red);
        }
    
        /* =========================================
           PRODUCT CARDS
        ========================================= */
    
        .product-card img {
    
            transition:
                transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    
        }
    
        .product-card:hover img {
    
            transform: scale(1.08);
    
        }
    
        .product-card {
    
            transition:
                transform 0.4s ease,
                box-shadow 0.4s ease,
                border-color 0.4s ease,
                background-color 0.4s ease;
    
        }
    
        .product-card:hover {
    
            transform: translateY(-6px);
    
            box-shadow:
                0 30px 60px rgba(24, 0, 173, 0.08);
    
        }

        .buyer-proof {
            border: 1px solid rgba(15, 23, 42, 0.08);
            background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.04);
        }

        .decision-card {
            border: 1px solid rgba(24, 0, 173, 0.10);
            background: #f8f7ff;
        }

        .cta-glow {
            box-shadow: 0 18px 44px rgba(24, 0, 173, 0.22);
        }
    
        /* =========================================
           BUTTONS
        ========================================= */
    
        .luxury-button {
    
            transition:
                transform 0.4s ease,
                box-shadow 0.4s ease,
                background-color 0.4s ease,
                border-color 0.4s ease;
    
            will-change: transform;
    
        }
    
        .luxury-button:hover {
    
            transform: translateY(-3px);
    
            box-shadow:
                0 20px 40px rgba(24, 0, 173, 0.20);
    
        }
    
        /* =========================================
           SHADOWS
        ========================================= */
    
        .luxury-shadow {
    
            box-shadow:
                0 40px 100px -20px rgba(0,0,0,0.05);
    
        }
    
        /* =========================================
           PAGINATION
        ========================================= */
    
        .page-btn {
    
            width: 2.5rem;
            height: 2.5rem;
    
            display: flex;
            align-items: center;
            justify-content: center;
    
            border-radius: 9999px;
    
            border: 1px solid var(--border);
    
            font-size: 10px;
            font-weight: 900;
    
            text-transform: uppercase;
            letter-spacing: 0.2em;
    
            transition: all 0.3s ease;
    
        }
    
        .page-btn:hover {
    
            border-color: var(--ig-legacy-red);
    
            color: var(--ig-legacy-red);
    
        }
    
        .page-btn.active {
    
            background-color: var(--ig-legacy-blue);
    
            color: white;
    
            border-color: var(--ig-legacy-blue);
    
            box-shadow:
                0 10px 30px rgba(24, 0, 173, 0.20);
    
        }
    
        .page-btn:disabled {
    
            opacity: 0.1;
            cursor: not-allowed;
    
        }
    
        /* =========================================
           SCROLLBAR
        ========================================= */
    
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
    
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    
        /* =========================================
           PROSE
        ========================================= */
    
        .prose-content {
    
            font-size: 0.95rem;
            color: #4b5563;
    
        }
    
        .prose-content p {
            margin-bottom: 1rem;
        }
    
        .prose-content ul {
    
            list-style-type: disc;
    
            padding-left: 1.5rem;
    
            margin-bottom: 1rem;
    
        }
    
        .prose-content li {
            margin-bottom: 0.25rem;
        }
    
        .prose-content strong {
    
            color: var(--ig-legacy-black);
    
            font-weight: 700;
    
        }
    
        /* =========================================
           MULTI STEP
        ========================================= */
    
        .step-indicator {
    
            height: 2px;
    
            background-color: #e5e7eb;
    
            flex: 1;
    
            position: relative;
    
        }
    
        .step-indicator.active {
    
            background-color: var(--ig-legacy-blue);
    
        }
    
        /* =========================================
           FORMS
        ========================================= */
    
        input:focus,
        textarea:focus,
        select:focus {
    
            outline: none;
    
            box-shadow:
                0 0 0 3px rgba(24, 0, 173, 0.12);
    
        }
    
        /* =========================================
           ICONS
        ========================================= */
    
        svg.lucide {
    
            width: 1.25rem;
            height: 1.25rem;
    
            display: inline-block;
            vertical-align: middle;
    
            stroke-width: 2;
    
        }
    
        /* =========================================
           GPU OPTIMIZATION
        ========================================= */
    
        .gpu {
    
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
    
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
    
        }
    
        /* =========================================
           OPTIONAL NOISE
        ========================================= */
    
        .noise {
            position: relative;
        }
    
        .noise::before {
    
            content: '';
    
            position: absolute;
            inset: 0;
    
            pointer-events: none;
    
            opacity: 0.02;
    
            background-repeat: repeat;
    
        }
    
        /* =========================================
           RESPONSIVE
        ========================================= */
    
        @media (max-width: 768px) {
    
            .section-padding {
                padding: 80px 0;
            }
    
        }
    

        /* =========================
           IZIPHO HOMEPAGE-MATCHED SHOP THEME
        ========================= */

        :root {
            --ig-red: #B30000;
            --ig-red-dark: #8F0000;
            --ig-charcoal: #373435;
            --ig-dark-grey: #4A4A4A;
            --ig-muted: #6F7378;
            --ig-line: #E3E6EA;
            --ig-soft: #F5F6F8;
            --ig-soft-2: #EEF1F4;
            --ig-white: #FFFFFF;
            --ig-shadow: 0 18px 46px rgba(55, 52, 53, 0.10);
            --ig-shadow-soft: 0 10px 26px rgba(55, 52, 53, 0.08);
            --ig-ease: cubic-bezier(0.16, 1, 0.3, 1);
        }

        body {
            font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background:
                radial-gradient(circle at 8% 0%, rgba(179, 0, 0, 0.045), transparent 28rem),
                linear-gradient(180deg, #ffffff 0%, #f7f8fa 56%, #ffffff 100%);
            color: var(--ig-charcoal);
            line-height: 1.55;
        }

        ::selection {
            background: var(--ig-red);
            color: #fff;
        }

        .serif {
            font-family: 'Manrope', system-ui, sans-serif !important;
            font-style: normal !important;
        }

        .text-brand {
            color: var(--ig-charcoal) !important;
        }

        .text-accent {
            color: var(--ig-red) !important;
        }

        .bg-brand,
        .brand-gradient,
        .bg-black {
            background: var(--ig-charcoal) !important;
        }

        .bg-accent,
        .bg-red-500,
        .bg-red-600 {
            background: var(--ig-red) !important;
        }

        .border-black,
        .focus\:border-black:focus {
            border-color: var(--ig-red) !important;
        }

        .focus\:ring-black:focus,
        .focus\:ring-2:focus {
            --tw-ring-color: rgba(179, 0, 0, 0.16) !important;
        }

        nav.fixed {
            background: rgba(255, 255, 255, 0.96) !important;
            border-bottom: 1px solid rgba(227, 230, 234, 0.96);
            box-shadow: 0 10px 28px rgba(55, 52, 53, 0.06) !important;
            backdrop-filter: blur(18px);
        }

        nav.fixed > div:first-child {
            background: var(--ig-charcoal) !important;
            color: rgba(255, 255, 255, 0.78) !important;
        }

        nav.fixed > div:nth-child(2) {
            height: 82px !important;
            background: rgba(255, 255, 255, 0.96) !important;
            border-bottom: 1px solid var(--ig-line) !important;
        }

        nav.fixed img[alt="Izipho Gifts"] {
            width: 44px !important;
            height: 44px !important;
            padding: 6px;
            border: 1px solid var(--ig-line);
            border-radius: 12px;
            background: #fff;
            box-shadow: var(--ig-shadow-soft);
        }

        nav.fixed input[x-model="searchQuery"] {
            height: 58px !important;
            border: 1px solid rgba(205, 211, 218, 0.88) !important;
            border-radius: 18px !important;
            background:
                linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,247,249,0.92)) !important;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.95),
                0 14px 34px rgba(55, 52, 53, 0.08) !important;
            color: var(--ig-charcoal) !important;
            font-weight: 750 !important;
            padding-left: 3.5rem !important;
            transition: border-color 180ms var(--ig-ease), box-shadow 180ms var(--ig-ease), background 180ms var(--ig-ease);
        }

        nav.fixed input[x-model="searchQuery"]:focus {
            border-color: rgba(179, 0, 0, 0.42) !important;
            background: #fff !important;
            box-shadow:
                0 0 0 4px rgba(179, 0, 0, 0.08),
                0 18px 42px rgba(55, 52, 53, 0.12) !important;
        }

        nav.fixed input[x-model="searchQuery"] + button,
        nav.fixed button[class*="bg-black"] {
            background: var(--ig-red) !important;
            border-radius: 13px !important;
            box-shadow: 0 10px 22px rgba(179, 0, 0, 0.20);
        }

        nav.fixed input[x-model="searchQuery"] + button:hover,
        nav.fixed button[class*="bg-black"]:hover {
            background: var(--ig-red-dark) !important;
        }

        nav.fixed label:has(select),
        nav.fixed button,
        nav.fixed .relative > button {
            border-radius: 12px !important;
        }

        nav.fixed > div.hidden.lg\:flex.items-center.gap-10 {
            height: 50px !important;
            gap: 6px !important;
            border-bottom: 1px solid var(--ig-line) !important;
        }

        nav.fixed > div.hidden.lg\:flex.items-center.gap-10 button {
            min-height: 32px;
            height: auto !important;
            padding: 0 11px;
            border: 1px solid transparent;
            border-radius: 9px !important;
            color: #55595E !important;
            letter-spacing: 0.055em !important;
        }

        nav.fixed > div.hidden.lg\:flex.items-center.gap-10 button:hover {
            color: var(--ig-red) !important;
            border-color: rgba(179, 0, 0, 0.14);
            background: rgba(179, 0, 0, 0.06);
        }


        .shop-brand-name {
            display: inline-flex;
            align-items: baseline;
            gap: 0.32rem;
            white-space: nowrap;
            color: var(--ig-red) !important;
            font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-size: 1.02rem;
            font-weight: 900;
            letter-spacing: -0.018em;
            line-height: 1;
        }

        .shop-brand-name strong {
            color: inherit;
            font: inherit;
            letter-spacing: inherit;
        }

        .catalog-one-line {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0.38em;
            white-space: nowrap;
        }

        @media (max-width: 520px) {
            .catalog-one-line {
                white-space: normal;
            }
        }

        main {
            padding-top: 11.75rem !important;
        }

        [x-show="view === 'catalog'"] > header {
            margin-top: 1.35rem !important;
            margin-bottom: 1.6rem !important;
            padding: 1.25rem 1.5rem;
            border: 1px solid var(--ig-line);
            border-radius: 18px;
            background:
                radial-gradient(circle at 88% 16%, rgba(179, 0, 0, 0.07), transparent 24rem),
                linear-gradient(135deg, #fff, #f7f8fa);
            box-shadow: var(--ig-shadow-soft);
        }

        [x-show="view === 'catalog'"] h6 {
            font-size: clamp(1.35rem, 2.2vw, 2.45rem) !important;
            line-height: 1.04 !important;
            letter-spacing: -0.045em !important;
            text-transform: none !important;
            text-align: left !important;
        }

        [x-show="view === 'catalog'"] h6 span:first-child {
            color: var(--ig-charcoal) !important;
        }

        [x-show="view === 'catalog'"] h6 span:last-child {
            display: inline-block;
            margin-top: 0.12rem;
            color: var(--ig-red) !important;
            font-weight: 800 !important;
            text-transform: none !important;
        }

        [x-show="view === 'catalog'"] header p {
            color: var(--ig-muted) !important;
            max-width: 720px !important;
        }

        .buyer-proof,
        .decision-card {
            border: 1px solid var(--ig-line);
            background: rgba(255, 255, 255, 0.92);
            box-shadow: var(--ig-shadow-soft);
        }

        select,
        input,
        textarea {
            border-color: var(--ig-line) !important;
        }

        .product-card {
            border-radius: 18px;
            padding: 0.55rem;
            background: transparent;
            transition: transform 220ms var(--ig-ease);
        }

        .product-card:hover {
            transform: translateY(-4px);
        }

        .product-card .img-placeholder {
            border: 1px solid var(--ig-line) !important;
            border-radius: 18px !important;
            background:
                linear-gradient(135deg, rgba(255,255,255,0.90), rgba(245,246,248,0.86)),
                repeating-linear-gradient(135deg, rgba(179,0,0,0.06) 0 1px, transparent 1px 18px) !important;
            box-shadow: var(--ig-shadow-soft) !important;
        }

        .product-card .img-placeholder::after {
            content: '';
            position: absolute;
            inset: 13px;
            border: 1px solid rgba(179, 0, 0, 0.12);
            border-radius: 14px;
            pointer-events: none;
        }

        .product-card h3 {
            color: var(--ig-charcoal) !important;
            font-size: 1.08rem !important;
            letter-spacing: -0.02em !important;
            text-transform: none !important;
        }

        .product-card:hover h3 {
            color: var(--ig-red) !important;
        }

        .product-card .absolute span {
            border-radius: 999px !important;
        }

        .product-card .absolute.top-8.left-8 span {
            border: 1px solid rgba(17, 17, 17, 0.08) !important;
            box-shadow: 0 8px 18px rgba(17,17,17,.10) !important;
        }
        .product-card-badge--red {
            background: var(--ig-red) !important;
            color: #fff !important;
            border-color: rgba(179,0,0,.18) !important;
        }
        .product-card-badge--dark {
            background: var(--ig-charcoal) !important;
            color: #fff !important;
            border-color: rgba(55,52,53,.18) !important;
        }
        .product-card-badge--neutral {
            background: #fff !important;
            color: var(--ig-charcoal) !important;
            border-color: rgba(55,52,53,.14) !important;
        }

        .product-card .absolute.top-8.right-8 span {
            background: rgba(55, 52, 53, 0.88) !important;
        }

        .product-card .w-12.h-12 {
            border-radius: 10px !important;
        }

        .product-card:hover .w-12.h-12 {
            background: var(--ig-red) !important;
            color: #fff !important;
            border-color: var(--ig-red) !important;
        }

        .page-btn {
            border: 1px solid var(--ig-line);
            border-radius: 10px !important;
            background: #fff;
            color: var(--ig-charcoal);
            box-shadow: var(--ig-shadow-soft);
        }

        .page-btn.active,
        .page-btn:hover {
            background: var(--ig-red) !important;
            border-color: var(--ig-red) !important;
            color: #fff !important;
        }

        [x-show="view === 'product' && selectedProduct"] > .flex,
        [x-show="view === 'checkout'"] .bg-slate-50,
        [x-show="view === 'checkout'"] .bg-white,
        [x-show="view === 'success'"] .bg-white {
            border-radius: 22px !important;
        }

        [x-show="view === 'product' && selectedProduct"] .aspect-\[4\/5\],
        [x-show="view === 'product' && selectedProduct"] .bg-slate-50 {
            border-radius: 18px !important;
        }

        [x-show="view === 'product' && selectedProduct"] h1,
        [x-show="view === 'checkout'"] h1,
        [x-show="view === 'success'"] h1 {
            color: var(--ig-charcoal) !important;
            letter-spacing: -0.04em !important;
        }

        [x-show="view === 'product' && selectedProduct"] .border-l-2 {
            border-color: var(--ig-red) !important;
        }

        [x-show="view === 'product' && selectedProduct"] button,
        [x-show="view === 'cart'"] button,
        [x-show="view === 'checkout'"] button {
            border-radius: 10px;
        }

        footer.brand-gradient {
            background:
                radial-gradient(circle at 10% 0%, rgba(179,0,0,0.20), transparent 25rem),
                linear-gradient(180deg, var(--ig-charcoal), #262425) !important;
        }

        @media (max-width: 1024px) {
            main {
                padding-top: 6rem !important;
            }

            nav.fixed > div:nth-child(2) {
                height: 76px !important;
            }

            nav.fixed input[x-model="searchQuery"] {
                height: 52px !important;
                border-radius: 15px !important;
            }
        }

        @media (max-width: 768px) {
            [x-show="view === 'catalog'"] > header {
                margin-top: 1.25rem !important;
                padding: 1.25rem;
                border-radius: 18px;
            }

            [x-show="view === 'catalog'"] h6 {
                text-align: left !important;
            }

            .product-card {
                padding: 0;
            }
        }

        .site-shell {
            width: min(1180px, calc(100% - 40px));
            margin-inline: auto;
        }

        .shop-catalog-shell {
            animation: shopFadeUp 520ms var(--ig-ease) both;
        }

        .shop-filter-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 24px;
            padding: 14px;
            border: 1px solid var(--ig-line);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.78);
            box-shadow: var(--ig-shadow-soft);
            backdrop-filter: blur(16px);
        }

        .shop-journey-rail {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin-top: 20px;
            max-width: 760px;
        }

        .shop-journey-rail span {
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 1px solid var(--ig-line);
            border-radius: 10px;
            background: #fff;
            padding: 0 12px;
            color: var(--ig-charcoal);
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            box-shadow: 0 8px 18px rgba(55, 52, 53, 0.05);
        }

        .shop-journey-rail b {
            display: inline-grid;
            place-items: center;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            background: rgba(179, 0, 0, 0.08);
            color: var(--ig-red);
            font-size: 0.68rem;
        }

        .toolbar-primary {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .toolbar-context {
            min-width: 0;
            display: grid;
            gap: 2px;
        }

        .toolbar-context span {
            overflow: hidden;
            color: var(--ig-muted);
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-overflow: ellipsis;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .toolbar-context strong {
            color: var(--ig-charcoal);
            font-size: 0.92rem;
            font-weight: 900;
            line-height: 1.1;
        }

        .procurement-quick-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin: -10px 0 22px;
        }

        .procurement-quick-filters button {
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--ig-line);
            border-radius: 999px;
            background: #fff;
            color: var(--ig-charcoal);
            padding: 0 13px;
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            transition: background 180ms var(--ig-ease), border-color 180ms var(--ig-ease), color 180ms var(--ig-ease), transform 180ms var(--ig-ease);
        }

        .procurement-quick-filters button svg {
            width: 15px;
            height: 15px;
        }

        .procurement-quick-filters button:hover,
        .procurement-quick-filters button.is-active {
            border-color: rgba(179, 0, 0, 0.28);
            background: rgba(179, 0, 0, 0.065);
            color: var(--ig-red);
            transform: translateY(-1px);
        }

        .filter-toggle {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 46px;
            padding: 0 18px;
            border: 1px solid rgba(179, 0, 0, 0.18);
            border-radius: 13px;
            background: var(--ig-charcoal);
            color: #fff;
            font-size: 0.7rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            box-shadow: 0 16px 32px rgba(55, 52, 53, 0.16);
            transition: transform 180ms var(--ig-ease), background 180ms var(--ig-ease);
        }

        .filter-toggle:hover {
            transform: translateY(-1px);
            background: var(--ig-red);
        }

        .filter-toggle svg {
            width: 16px;
            height: 16px;
        }


        .toolbar-meta {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
        }

        .toolbar-sort {
            min-height: 34px;
            padding: 0 36px 0 13px;
            border: 1px solid var(--ig-line);
            border-radius: 999px;
            background: #fff;
            color: var(--ig-charcoal);
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            outline: none;
        }

        .filter-summary {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 6px;
        }

        .filter-summary span {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 13px;
            border: 1px solid var(--ig-line);
            border-radius: 999px;
            background: #fff;
            color: var(--ig-muted);
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0.13em;
            text-transform: uppercase;
        }

        .product-card-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
        }

        .product-card-meta span {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            max-width: 100%;
            overflow: hidden;
            border: 1px solid var(--ig-line);
            border-radius: 999px;
            background: #fff;
            color: var(--ig-muted);
            padding: 0 8px;
            font-size: 0.56rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-overflow: ellipsis;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .product-card-guidance {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            margin: 12px 0 0;
            color: var(--ig-charcoal);
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.09em;
            line-height: 1.35;
            text-transform: uppercase;
        }

        .product-card-guidance svg,
        .product-card-signals svg,
        .product-card-action svg {
            width: 14px;
            height: 14px;
            flex: 0 0 auto;
        }

        .product-card-signals {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin-top: 14px;
        }

        .product-card-signals > span {
            min-height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: 1px solid var(--ig-line);
            border-radius: 10px;
            background: var(--ig-soft);
            color: var(--ig-muted);
            padding: 0 8px;
            font-size: 0.58rem;
            font-weight: 900;
            letter-spacing: 0.07em;
            line-height: 1.2;
            text-transform: uppercase;
        }

        .product-card-action {
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid var(--ig-charcoal);
            border-radius: 999px;
            background: var(--ig-charcoal);
            color: #fff;
            padding: 0 14px;
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            transition: transform 180ms var(--ig-ease), background 180ms var(--ig-ease);
        }

        .product-card:hover .product-card-action {
            background: var(--ig-red);
            border-color: var(--ig-red);
            transform: translateX(2px);
        }

        .product-rfq-summary {
            overflow: hidden;
            border: 1px solid rgba(179, 0, 0, 0.16);
            border-radius: 16px;
            background:
                radial-gradient(circle at 100% 0%, rgba(179, 0, 0, 0.08), transparent 18rem),
                #fff;
            box-shadow: var(--ig-shadow-soft);
        }

        .rfq-summary-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            padding: 18px;
            border-bottom: 1px solid var(--ig-line);
        }

        .rfq-summary-head span,
        .rfq-summary-grid span {
            display: block;
            color: var(--ig-muted);
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .rfq-summary-head h3 {
            margin: 4px 0 0;
            color: var(--ig-charcoal);
            font-size: 1rem;
            font-weight: 900;
            letter-spacing: -0.01em;
            line-height: 1.2;
        }

        .rfq-summary-price {
            color: var(--ig-red);
            font-size: 1.35rem;
            font-weight: 900;
            line-height: 1;
            text-align: right;
            white-space: nowrap;
        }

        .rfq-summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1px;
            background: var(--ig-line);
        }

        .rfq-summary-grid div {
            min-height: 82px;
            display: grid;
            align-content: center;
            gap: 7px;
            background: rgba(255, 255, 255, 0.88);
            padding: 14px;
        }

        .rfq-summary-grid strong {
            overflow-wrap: anywhere;
            color: var(--ig-charcoal);
            font-size: 0.82rem;
            font-weight: 900;
            line-height: 1.25;
        }

        .product-rfq-summary p {
            margin: 0;
            padding: 15px 18px 18px;
            color: var(--ig-muted);
            font-size: 0.86rem;
            font-weight: 700;
            line-height: 1.62;
        }

        .variant-workspace {
            margin-top: 30px;
            border: 1px solid var(--ig-line);
            border-radius: 16px;
            background: #fff;
            box-shadow: var(--ig-shadow-soft);
        }

        .variant-step {
            padding: 22px;
            border-bottom: 1px solid var(--ig-line);
        }

        .variant-step:last-child {
            border-bottom: 0;
        }

        .variant-step-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 18px;
        }

        .variant-step-title {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--ig-charcoal);
            font-size: 0.92rem;
            font-weight: 900;
        }

        .variant-step-title b {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            background: var(--ig-red);
            color: #fff;
            font-size: 1rem;
            box-shadow: 0 10px 22px rgba(179, 0, 0, 0.18);
        }

        .variant-colour-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
            gap: 14px;
        }

        .variant-colour-card {
            min-height: 164px;
            display: grid;
            justify-items: center;
            align-content: center;
            gap: 9px;
            border: 1px solid var(--ig-line);
            border-radius: 18px;
            background: linear-gradient(180deg, #fff, #fbfbfb);
            padding: 14px;
            color: var(--ig-charcoal);
            text-align: center;
            transition: border-color 180ms var(--ig-ease), box-shadow 180ms var(--ig-ease), transform 180ms var(--ig-ease), background 180ms var(--ig-ease);
        }

        .variant-colour-card.is-active {
            border-color: var(--ig-red);
            box-shadow: 0 0 0 4px rgba(179, 0, 0, 0.12), var(--ig-shadow-soft);
            background: #fff;
        }

        .variant-colour-card:hover {
            transform: translateY(-2px);
            border-color: rgba(179, 0, 0, 0.38);
            box-shadow: var(--ig-shadow-soft);
        }

        .variant-colour-card img {
            width: 70px;
            height: 70px;
            object-fit: contain;
        }

        .variant-colour-swatch {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 1px solid rgba(15, 23, 42, 0.20);
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
        }

        .variant-colour-card strong {
            text-align: center;
            color: var(--ig-charcoal);
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 1.2;
        }

        .variant-colour-card span {
            color: var(--ig-muted);
            font-size: 0.75rem;
            font-weight: 800;
        }

        .variant-colour-card .variant-colour-stock {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--ig-muted);
        }

        .variant-colour-card .variant-colour-stock::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: #16a34a;
        }

        .variant-colour-card .variant-colour-stock.is-empty::before {
            background: #cbd5e1;
        }

        .variant-mini-strip {
            margin-top: 22px;
            border: 1px solid var(--ig-line);
            border-radius: 18px;
            background: #fff;
            padding: 14px;
            box-shadow: var(--ig-shadow-soft);
        }

        .variant-mini-strip-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        .variant-mini-strip-head span {
            color: var(--ig-red);
            font-size: 0.64rem;
            font-weight: 900;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .variant-mini-strip-head strong {
            color: var(--ig-muted);
            font-size: 0.72rem;
            font-weight: 900;
        }

        .variant-mini-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
            gap: 8px;
            overflow: visible;
        }

        .variant-mini-chip {
            min-width: 0;
            display: grid;
            gap: 4px;
            justify-items: center;
            border: 1px solid var(--ig-line);
            border-radius: 12px;
            background: linear-gradient(180deg, #fff, #f8f9fb);
            padding: 6px 4px;
            color: var(--ig-charcoal);
            text-align: center;
            transition: transform 180ms var(--ig-ease), border-color 180ms var(--ig-ease), box-shadow 180ms var(--ig-ease);
        }

        .variant-mini-chip:hover,
        .variant-mini-chip.is-active {
            transform: translateY(-1px);
            border-color: rgba(179, 0, 0, 0.46);
            box-shadow: 0 0 0 3px rgba(179, 0, 0, 0.10);
        }

        .variant-mini-chip img {
            width: 34px;
            height: 34px;
            object-fit: contain;
        }

        .variant-mini-swatch {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            border: 1px solid rgba(15, 23, 42, 0.18);
        }

        .variant-mini-chip span:last-child {
            max-width: 48px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--ig-charcoal);
            font-size: 0.54rem;
            font-weight: 900;
        }

        .variant-qty-hint {
            margin-top: 8px;
            max-width: 190px;
            color: var(--ig-muted);
            font-size: 0.66rem;
            font-weight: 800;
            line-height: 1.35;
        }

        .variant-qty-hint.is-warning {
            color: #b45309;
        }

        .cart-new-badge {
            display: inline-flex;
            align-items: center;
            margin-bottom: 10px;
            border: 1px solid rgba(179, 0, 0, 0.18);
            border-radius: 999px;
            background: rgba(179, 0, 0, 0.06);
            color: var(--ig-red);
            padding: 7px 10px;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .variant-table-wrap {
            overflow-x: auto;
            border: 1px solid var(--ig-line);
            border-radius: 12px;
            -webkit-overflow-scrolling: touch;
        }

        .variant-table {
            width: 100%;
            min-width: 700px;
            border-collapse: collapse;
        }

        .variant-table th {
            background: var(--ig-charcoal);
            color: #fff;
            padding: 14px 16px;
            text-align: left;
            font-size: 0.78rem;
            font-weight: 900;
        }

        .variant-table th small {
            display: block;
            margin-top: 4px;
            font-size: 0.64rem;
            font-weight: 700;
        }

        .variant-table td {
            border-top: 1px solid var(--ig-line);
            padding: 16px;
            color: var(--ig-charcoal);
            font-size: 0.88rem;
            font-weight: 750;
            vertical-align: middle;
        }

        .variant-matrix-table {
            min-width: calc(190px + (var(--variant-size-count, 4) * 178px));
            table-layout: auto;
        }

        .variant-matrix-table th:not(:first-child),
        .variant-matrix-table td:not(:first-child) {
            min-width: 178px;
        }

        .variant-matrix-table th {
            text-align: center;
            vertical-align: middle;
        }

        .variant-matrix-table th:first-child,
        .variant-matrix-table td:first-child {
            width: 190px;
            text-align: left;
            position: sticky;
            left: 0;
            z-index: 2;
        }

        .variant-matrix-table td:first-child {
            background: #fff;
            border-right: 1px solid var(--ig-line);
        }

        .variant-matrix-colour {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .variant-matrix-colour img {
            width: 42px;
            height: 42px;
            object-fit: contain;
            flex: 0 0 auto;
        }

        .variant-matrix-colour strong {
            display: block;
            color: var(--ig-charcoal);
            font-size: 0.8rem;
            line-height: 1.15;
        }

        .variant-matrix-colour span {
            display: block;
            margin-top: 3px;
            color: var(--ig-muted);
            font-size: 0.66rem;
            font-weight: 850;
        }

        .variant-matrix-cell {
            min-height: 118px;
            display: grid;
            align-content: start;
            justify-items: center;
            gap: 8px;
        }

        .variant-matrix-stock {
            color: var(--ig-muted);
            font-size: 0.64rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .variant-matrix-empty {
            color: #a6adba;
            font-size: 0.76rem;
            font-weight: 900;
        }

        .variant-matrix-line {
            color: var(--ig-charcoal);
            font-size: 0.68rem;
            font-weight: 900;
        }

        .variant-matrix-cell .variant-qty-control {
            width: min(150px, 100%);
            grid-template-columns: 34px 1fr 34px;
        }

        .variant-matrix-cell .variant-qty-control button,
        .variant-matrix-cell .variant-qty-control input {
            min-height: 36px;
        }

        .variant-mobile-matrix {
            display: none;
        }

        .variant-mobile-colour {
            border: 1px solid var(--ig-line);
            border-radius: 18px;
            background: #fff;
            overflow: hidden;
        }

        .variant-mobile-colour-head {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            background: #f8f9fb;
            border-bottom: 1px solid var(--ig-line);
        }

        .variant-mobile-colour-head img {
            width: 42px;
            height: 42px;
            object-fit: contain;
        }

        .variant-mobile-colour-head strong {
            display: block;
            color: var(--ig-charcoal);
            font-size: 0.9rem;
            line-height: 1.15;
        }

        .variant-mobile-colour-head span {
            display: block;
            color: var(--ig-muted);
            font-size: 0.68rem;
            font-weight: 850;
        }

        .variant-mobile-size-grid {
            display: grid;
            gap: 10px;
            padding: 12px;
        }

        .variant-mobile-size-card {
            display: grid;
            gap: 8px;
            border: 1px solid var(--ig-line);
            border-radius: 14px;
            padding: 10px;
        }

        .variant-mobile-size-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .variant-mobile-size-top strong {
            color: var(--ig-charcoal);
            font-size: 0.82rem;
        }

        .variant-mobile-size-top span {
            color: var(--ig-muted);
            font-size: 0.66rem;
            font-weight: 900;
            text-transform: uppercase;
        }

        @media (max-width: 760px) {
            .variant-table-wrap.is-matrix-wrap {
                display: none;
            }

            .variant-mobile-matrix {
                display: grid;
                gap: 12px;
            }

            .sprint4-qty-intro {
                align-items: flex-start;
            }
        }

        .variant-qty-control {
            width: 168px;
            display: grid;
            grid-template-columns: 38px 1fr 38px;
            overflow: hidden;
            border: 1px solid #cfd4da;
            border-radius: 9px;
            background: #fff;
        }

        .variant-qty-control button {
            min-height: 40px;
            background: #fff;
            color: var(--ig-charcoal);
            font-size: 1.08rem;
            font-weight: 900;
        }

        .variant-qty-control input {
            width: 100%;
            min-height: 40px;
            border: 0;
            border-left: 1px solid #e2e5e8;
            border-right: 1px solid #e2e5e8;
            text-align: center;
            font-weight: 900;
            outline: none;
        }

        .variant-qty-hint {
            margin-top: 7px;
            color: var(--ig-muted);
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1.25;
        }

        .variant-qty-hint.is-warning {
            color: #b45309;
        }

        .cart-new-badge {
            display: inline-flex;
            align-items: center;
            width: max-content;
            margin-bottom: 10px;
            border-radius: 999px;
            background: rgba(179, 0, 0, 0.08);
            color: var(--ig-red);
            padding: 6px 10px;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .variant-table-summary {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            margin-top: 14px;
            color: var(--ig-muted);
            font-size: 0.82rem;
            font-weight: 800;
        }

        @media (min-width: 1024px) {
            .product-card-meta,
            .product-card-guidance {
                justify-content: flex-start;
            }
        }

        .shop-catalog-layout {
            display: grid;
            grid-template-columns: 270px minmax(0, 1fr);
            gap: 24px;
            align-items: start;
            transition: grid-template-columns 260ms var(--ig-ease);
        }

        .shop-catalog-layout.filters-closed {
            grid-template-columns: minmax(0, 1fr);
        }

        .shop-filter-panel {
            position: sticky;
            top: 12.75rem;
            max-height: none;
            overflow: visible;
            border: 1px solid var(--ig-line);
            border-radius: 22px;
            background:
                radial-gradient(circle at 100% 0%, rgba(179, 0, 0, 0.07), transparent 18rem),
                #fff;
            box-shadow: var(--ig-shadow);
        }

        .shop-filter-panel {
            transition: width 240ms var(--ig-ease), padding 240ms var(--ig-ease), box-shadow 240ms var(--ig-ease);
        }

        @media (min-width: 768px) {
            .shop-filter-panel.is-expanded {
                max-height: calc(100vh - 14rem);
                overflow-y: hidden;
                overscroll-behavior: contain;
                scrollbar-width: thin;
            }
            .shop-filter-panel.is-expanded:hover,
            .shop-filter-panel.is-expanded:focus-within {
                overflow-y: auto;
            }
        }

        .shop-filter-panel.is-collapsed {
            display: none !important;
        }

        .shop-filter-panel.is-collapsed > :not(.filter-rail-toggle) {
            display: none !important;
        }

        .filter-rail-toggle {
            display: none;
            width: 100%;
            min-height: 260px;
            border: 0;
            background: transparent;
            color: var(--ig-charcoal);
            font-size: 0.68rem;
            font-weight: 950;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            align-items: center;
            justify-content: center;
            gap: 12px;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            cursor: pointer;
        }

        .filter-rail-toggle svg {
            transform: rotate(90deg);
            color: var(--ig-red);
        }

        .shop-filter-panel.is-collapsed .filter-rail-toggle {
            display: flex;
        }

        .filter-head-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .filter-clear-top {
            border: 1px solid rgba(179, 0, 0, 0.16);
            background: rgba(179, 0, 0, 0.06);
            color: var(--ig-red);
            border-radius: 999px;
            padding: 9px 12px;
            font-size: 0.62rem;
            font-weight: 950;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            transition: transform 180ms var(--ig-ease), background 180ms var(--ig-ease);
        }

        .filter-clear-top:hover {
            background: rgba(179, 0, 0, 0.10);
            transform: translateY(-1px);
        }

        .filter-drawer-stack > .filter-clear-option {
            display: none;
        }

        .filter-panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            padding: 14px 14px 12px;
            border-bottom: 1px solid var(--ig-line);
        }

        .filter-panel-head p,
        .filter-section-label {
            margin: 0;
            color: var(--ig-muted);
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .filter-panel-head h3 {
            margin: 5px 0 0;
            color: var(--ig-charcoal);
            font-size: 0.98rem;
            font-weight: 900;
            letter-spacing: -0.02em;
        }

        .filter-close {
            display: inline-grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border: 1px solid var(--ig-line);
            border-radius: 12px;
            background: #fff;
            color: var(--ig-charcoal);
        }

        .filter-section {
            padding: 20px 18px 22px;
        }

        .filter-section + .filter-section {
            border-top: 1px solid var(--ig-line);
        }

        .filter-pill,
        .filter-cat,
        .filter-subcat {
            width: 100%;
            text-align: left;
            transition: color 180ms var(--ig-ease), background 180ms var(--ig-ease), border-color 180ms var(--ig-ease), transform 180ms var(--ig-ease);
        }

        .filter-pill {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 48px;
            margin-bottom: 14px;
            padding: 0 14px;
            border: 1px solid rgba(179, 0, 0, 0.20);
            border-radius: 14px;
            background: rgba(179, 0, 0, 0.06);
            color: var(--ig-red);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .filter-pill:hover,
        .filter-cat:hover,
        .filter-subcat:hover {
            transform: translateX(2px);
        }

        .filter-cat {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 44px;
            margin-top: 8px;
            padding: 0 12px;
            border: 1px solid transparent;
            border-radius: 12px;
            color: var(--ig-charcoal);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.09em;
            text-transform: uppercase;
        }

        .filter-cat:hover,
        .filter-cat.is-active {
            border-color: rgba(179, 0, 0, 0.16);
            background: rgba(179, 0, 0, 0.055);
            color: var(--ig-red);
        }

        .filter-subcats {
            display: grid;
            gap: 6px;
            margin: 4px 0 10px 12px;
            padding-left: 12px;
            border-left: 1px solid var(--ig-line);
        }

        .filter-category-group {
            border: 1px solid transparent;
            border-radius: 14px;
        }
        .filter-category-group[open] {
            border-color: rgba(179, 0, 0, 0.10);
            background: rgba(179, 0, 0, 0.025);
        }
        .filter-category-group summary {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            cursor: pointer;
        }
        .filter-category-group summary::-webkit-details-marker { display: none; }
        .filter-category-main {
            flex: 1;
            border: 0;
            background: transparent;
        }
        .filter-category-chevron {
            width: 34px;
            height: 34px;
            margin-right: 4px;
            border-radius: 10px;
            display: inline-grid;
            place-items: center;
            color: var(--ig-muted);
            transition: transform 180ms var(--ig-ease), color 180ms var(--ig-ease);
        }
        .filter-category-group[open] .filter-category-chevron {
            transform: rotate(90deg);
            color: var(--ig-red);
        }

        .filter-subcat {
            padding: 8px 10px;
            border-radius: 10px;
            color: var(--ig-muted);
            font-size: 0.68rem;
            font-weight: 850;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .filter-subcat:hover,
        .filter-subcat.is-active {
            background: var(--ig-soft);
            color: var(--ig-charcoal);
        }


        .filter-drawer-stack {
            display: grid;
            gap: 8px;
            padding: 12px;
        }

        .filter-clearance-row,
        .filter-accordion {
            overflow: hidden;
            border: 1px solid rgba(227, 230, 234, 0.96);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 6px 16px rgba(55, 52, 53, 0.045);
        }

        .filter-clearance-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            min-height: 44px;
            padding: 0 11px;
        }

        .filter-row-title {
            color: var(--ig-charcoal);
            font-size: 0.74rem;
            font-weight: 900;
            letter-spacing: 0.01em;
            line-height: 1.15;
        }

        .filter-switch {
            position: relative;
            display: inline-flex;
            width: 42px;
            height: 24px;
            flex: 0 0 auto;
            cursor: pointer;
        }

        .filter-switch input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .filter-switch span {
            position: absolute;
            inset: 0;
            border-radius: 999px;
            background: #d0d3d8;
            transition: background 180ms var(--ig-ease);
        }

        .filter-switch span::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: #fff;
            box-shadow: 0 2px 7px rgba(0,0,0,0.16);
            transition: transform 180ms var(--ig-ease);
        }

        .filter-switch input:checked + span {
            background: var(--ig-red);
        }

        .filter-switch input:checked + span::before {
            transform: translateX(18px);
        }

        .filter-accordion summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            min-height: 44px;
            padding: 0 11px;
            cursor: pointer;
            list-style: none;
        }

        .filter-accordion summary::-webkit-details-marker {
            display: none;
        }

        .filter-row-icon {
            display: inline-grid;
            place-items: center;
            width: 26px;
            height: 26px;
            flex: 0 0 auto;
            border: 1px solid rgba(179, 0, 0, 0.18);
            border-radius: 999px;
            background: rgba(179, 0, 0, 0.055);
            color: var(--ig-red);
            transition: transform 180ms var(--ig-ease), background 180ms var(--ig-ease), color 180ms var(--ig-ease);
        }

        .filter-row-icon svg {
            width: 13px;
            height: 13px;
            stroke-width: 2.8;
            transition: transform 180ms var(--ig-ease);
        }

        .filter-accordion[open] .filter-row-icon {
            background: var(--ig-red);
            color: #fff;
        }

        .filter-accordion[open] .filter-row-icon svg {
            transform: rotate(180deg);
        }

        .filter-row-content {
            display: grid;
            gap: 8px;
            padding: 0 11px 11px;
        }

        .filter-option-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .filter-option,
        .filter-clear-option {
            display: inline-flex;
            align-items: center;
            min-height: 29px;
            padding: 0 9px;
            border: 1px solid var(--ig-line);
            border-radius: 999px;
            background: #fff;
            color: var(--ig-charcoal);
            font-size: 0.6rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            transition: border-color 180ms var(--ig-ease), color 180ms var(--ig-ease), background 180ms var(--ig-ease);
        }

        .filter-option:hover,
        .filter-option.is-active,
        .filter-clear-option:hover {
            border-color: rgba(179, 0, 0, 0.30);
            background: rgba(179, 0, 0, 0.065);
            color: var(--ig-red);
        }

        .filter-clear-option {
            justify-content: center;
            width: 100%;
            margin-top: 4px;
        }

        .filter-empty {
            margin: 0;
            color: var(--ig-muted);
            font-size: 0.72rem;
            font-weight: 800;
        }

        .filter-select-row {
            padding: 8px 0 0;
        }


        .shop-filter-panel .filter-panel-head {
            position: relative;
        }

        .shop-filter-panel .filter-close {
            width: 32px;
            height: 32px;
            border-radius: 10px;
        }

        .filter-select {
            width: 100%;
            min-height: 48px;
            padding: 0 14px;
            border: 1px solid var(--ig-line);
            border-radius: 14px;
            background: #fff;
            color: var(--ig-charcoal);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            outline: none;
        }


        [x-show="view === 'catalog'"] header p {
            margin-top: 0.75rem !important;
            font-size: 0.86rem !important;
            line-height: 1.5 !important;
        }

        [x-show="view === 'catalog'"] header .mt-8 {
            margin-top: 1rem !important;
        }

        [x-show="view === 'catalog'"] header .mt-10 {
            margin-top: 1rem !important;
        }

        [x-show="view === 'catalog'"] header .buyer-proof {
            padding: 0.9rem !important;
        }

        [x-show="view === 'catalog'"] header .buyer-proof p {
            font-size: 0.72rem !important;
        }

        .filter-clearance-row,
        .filter-accordion summary {
            min-height: 58px;
        }

        .filter-panel-head {
            padding: 16px 18px 14px;
        }


        [x-show="view === 'catalog'"] > header > .mt-8:not(.shop-journey-rail),
        [x-show="view === 'catalog'"] > header > .mt-10 {
            display: none !important;
        }

        [x-show="view === 'catalog'"] > header {
            display: grid;
            gap: 0.65rem;
        }

        [x-show="view === 'catalog'"] h6 {
            font-size: clamp(1.2rem, 1.8vw, 2rem) !important;
        }

        .shop-product-results {
            min-width: 0;
            width: 100%;
        }

        .product-results-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
            gap: 2rem;
            align-items: stretch;
        }

        .product-results-grid .product-card {
            height: 100%;
        }

        .shop-catalog-layout.filters-open .product-results-grid {
            grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
        }

        @media (max-width: 1023px) {
            .shop-catalog-layout,
            .shop-catalog-layout.filters-open,
            .shop-catalog-layout.filters-closed {
                grid-template-columns: 1fr;
            }

            .shop-catalog-layout.filters-closed {
                grid-template-columns: minmax(0, 1fr);
            }

            .shop-filter-panel.is-collapsed {
                display: none;
            }

            .filter-rail-toggle {
                display: none !important;
            }

            .shop-filter-panel {
                position: fixed;
                left: 0.75rem;
                right: 0.75rem;
                bottom: 0.75rem;
                top: auto;
                max-height: 82vh;
                overflow: auto;
                z-index: 80;
                border-radius: 1.5rem;
            }

            .product-results-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1rem;
            }
        }

        @media (max-width: 560px) {
            .product-results-grid {
                grid-template-columns: 1fr;
            }
        }

        .site-footer {
            margin-top: 28px;
            color: #fff;
            background:
                radial-gradient(circle at 10% 0%, rgba(179,0,0,0.20), transparent 25rem),
                linear-gradient(180deg, var(--ig-charcoal), #262425);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
            gap: 32px;
            padding: 46px 0;
        }

        .brand-lockup {
            display: inline-flex;
            align-items: center;
            gap: 13px;
            color: inherit;
        }

        .brand-mark {
            display: inline-grid;
            place-items: center;
            width: 48px;
            height: 48px;
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 13px;
            background: rgba(255,255,255,0.08);
        }

        .brand-mark img {
            width: 34px;
            height: 34px;
            object-fit: contain;
        }

        .brand-name {
            display: grid;
            gap: 2px;
            line-height: 1;
            text-transform: uppercase;
        }

        .brand-name strong {
            color: var(--ig-red);
            font-size: 1.06rem;
            font-weight: 900;
            letter-spacing: 0.22em;
        }

        .brand-name span {
            color: #fff;
            font-size: 0.76rem;
            font-weight: 900;
            letter-spacing: 0.02em;
        }

        .footer-brand p,
        .footer-column a,
        .footer-column p,
        .footer-bottom {
            color: rgba(255, 255, 255, 0.72);
        }

        .footer-brand p {
            margin: 20px 0 0;
            max-width: 330px;
            font-size: 0.94rem;
            line-height: 1.65;
        }

        .footer-column h3 {
            margin: 0 0 14px;
            color: #fff;
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .footer-column a,
        .footer-column p {
            display: block;
            margin: 0 0 9px;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .footer-column a:hover {
            color: #fff;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            border-top: 1px solid rgba(255,255,255,0.12);
            padding: 18px 0 28px;
            font-size: 0.78rem;
            font-weight: 800;
        }

        @keyframes shopFadeUp {
            from {
                opacity: 0;
                transform: translateY(14px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 1024px) {
            .shop-catalog-layout,
            .shop-catalog-layout.filters-closed {
                grid-template-columns: 1fr;
            }

            .shop-filter-panel {
                position: relative;
                top: auto;
                max-height: none;
            }

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

            .footer-brand {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 768px) {
            .site-shell {
                width: min(100% - 28px, 1180px);
            }

            .shop-journey-rail,
            .rfq-summary-grid {
                grid-template-columns: 1fr 1fr;
            }

            .shop-journey-rail {
                margin-top: 16px;
            }

            .shop-journey-rail span {
                min-height: 38px;
                font-size: 0.6rem;
            }

            .shop-filter-toolbar {
                align-items: stretch;
                flex-direction: column;
            }

            .toolbar-primary {
                align-items: stretch;
                flex-direction: column;
            }

            .toolbar-context span {
                white-space: normal;
            }

            .procurement-quick-filters {
                margin-top: -6px;
            }

            .filter-toggle {
                justify-content: center;
                width: 100%;
            }

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

            .product-card-signals {
                grid-template-columns: 1fr;
            }

            .rfq-summary-head {
                display: grid;
            }

            .rfq-summary-price {
                text-align: left;
            }

            .footer-grid,
            .footer-bottom {
                grid-template-columns: 1fr;
                flex-direction: column;
            }
        }


        /* Unified dropdown/select design */
        select,
        .toolbar-sort,
        .filter-select {
            appearance: none;
            -webkit-appearance: none;
            min-height: 44px;
            padding: 0 42px 0 14px !important;
            border: 1px solid rgba(227, 230, 234, 0.98) !important;
            border-radius: 14px !important;
            background-color: #fff !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B30000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right 14px center !important;
            background-size: 16px 16px !important;
            color: var(--ig-charcoal) !important;
            font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
            font-size: 0.72rem !important;
            font-weight: 900 !important;
            letter-spacing: 0.08em !important;
            line-height: 1 !important;
            text-transform: uppercase !important;
            box-shadow: 0 8px 18px rgba(55, 52, 53, 0.055) !important;
            transition: border-color 180ms var(--ig-ease), box-shadow 180ms var(--ig-ease), background-color 180ms var(--ig-ease);
        }

        select:hover,
        .toolbar-sort:hover,
        .filter-select:hover {
            border-color: rgba(179, 0, 0, 0.26) !important;
            background-color: #fff !important;
        }

        select:focus,
        .toolbar-sort:focus,
        .filter-select:focus {
            border-color: rgba(179, 0, 0, 0.48) !important;
            box-shadow:
                0 0 0 4px rgba(179, 0, 0, 0.08),
                0 12px 26px rgba(55, 52, 53, 0.10) !important;
            outline: none !important;
        }

        .toolbar-sort {
            min-height: 34px !important;
            border-radius: 999px !important;
            font-size: 0.64rem !important;
            padding-left: 13px !important;
            padding-right: 36px !important;
            background-position: right 12px center !important;
            box-shadow: none !important;
        }

        option {
            color: var(--ig-charcoal);
            background: #fff;
            font-family: 'Manrope', system-ui, sans-serif;
            font-weight: 800;
        }

        nav [x-show="showSearchDropdown && globalSearchResults.length > 0"],
        nav [x-show="open && cat.children?.length > 0"],
        nav [x-show="open"] {
            border: 1px solid rgba(227, 230, 234, 0.98) !important;
            border-radius: 18px !important;
            background: rgba(255, 255, 255, 0.98) !important;
            box-shadow: 0 24px 58px rgba(55, 52, 53, 0.16) !important;
            backdrop-filter: blur(18px);
        }

        nav [x-show="showSearchDropdown && globalSearchResults.length > 0"] a,
        nav [x-show="open && cat.children?.length > 0"] button,
        nav [x-show="open"] button {
            border-radius: 12px !important;
        }

        .filter-accordion summary {
            background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(247,248,250,0.92));
        }

        .filter-accordion[open] summary {
            border-bottom: 1px solid rgba(227, 230, 234, 0.76);
        }


        /* Cross-page consistency refinement */
        .brand-name.shop-brand-name {
            display: inline-flex;
            flex-direction: row;
            align-items: baseline;
            gap: 0.32rem;
            color: var(--ig-red) !important;
            font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-size: 1.02rem;
            font-weight: 900;
            letter-spacing: -0.018em;
            line-height: 1;
            text-transform: none;
        }

        .brand-name.shop-brand-name strong {
            color: inherit;
            font: inherit;
            letter-spacing: inherit;
        }




        /* =====================================================
           IZIPHO VISION LOCK
           Premium procurement platform palette: charcoal, black,
           white, soft grey and controlled red accents. This block
           neutralises stray blue/purple utility classes and makes
           product, cart and navigation components feel consistent.
        ===================================================== */
        :root {
            --ig-ink: #101114;
            --ig-charcoal: #373435;
            --ig-graphite: #4A4A4A;
            --ig-red: #B30000;
            --ig-red-dark: #8F0000;
            --ig-red-soft: rgba(179, 0, 0, 0.08);
            --ig-paper: #FFFFFF;
            --ig-cloud: #F6F7F8;
            --ig-cloud-2: #ECEFF2;
            --ig-line: #DFE3E7;
            --ig-muted: #666C73;
        }

        .text-blue-600,
        .text-blue-700,
        .text-indigo-600,
        .text-brand {
            color: var(--ig-red) !important;
        }

        .bg-blue-50,
        .bg-indigo-50 {
            background-color: var(--ig-red-soft) !important;
        }

        .border-blue-100,
        .border-blue-200,
        .border-indigo-100,
        .border-indigo-200 {
            border-color: rgba(179, 0, 0, 0.18) !important;
        }

        .hover\:text-blue-600:hover,
        .hover\:text-indigo-600:hover,
        .hover\:text-brand:hover,
        .hover\:text-black:hover {
            color: var(--ig-red) !important;
        }

        .hover\:bg-blue-50:hover,
        .hover\:bg-indigo-50:hover,
        .hover\:bg-red-50:hover {
            background-color: var(--ig-red-soft) !important;
        }

        .bg-slate-900,
        .bg-zinc-950,
        .bg-neutral-950,
        .bg-black,
        .bg-brand {
            background-color: var(--ig-ink) !important;
        }

        .text-slate-900,
        .text-zinc-900,
        .text-neutral-900,
        .text-black {
            color: var(--ig-ink) !important;
        }

        .border-slate-100,
        .border-slate-200,
        .border-zinc-100,
        .border-zinc-200,
        .border-neutral-200 {
            border-color: var(--ig-line) !important;
        }

        .bg-slate-50,
        .bg-zinc-50,
        .bg-neutral-50 {
            background-color: var(--ig-cloud) !important;
        }

        button,
        .btn,
        input,
        select,
        textarea,
        .product-card,
        .ig-card,
        [class*="rounded-2xl"],
        [class*="rounded-3xl"] {
            letter-spacing: inherit;
        }

        .product-card,
        .ig-product-card,
        article[class*="group"],
        section[class*="border"],
        aside[class*="border"] {
            border-color: var(--ig-line) !important;
        }

        .ig-trust-chip,
        .procurement-chip,
        .quote-chip {
            border: 1px solid rgba(179, 0, 0, 0.16);
            background: rgba(179, 0, 0, 0.06);
            color: var(--ig-red);
        }

        .variant-card,
        .colour-card,
        .color-card,
        [data-role="colour-option"] {
            border-color: var(--ig-line) !important;
            background: var(--ig-paper) !important;
            box-shadow: 0 12px 28px rgba(16, 17, 20, 0.06);
        }

        .variant-card:hover,
        .colour-card:hover,
        .color-card:hover,
        [data-role="colour-option"]:hover {
            border-color: rgba(179, 0, 0, 0.32) !important;
            box-shadow: 0 18px 38px rgba(16, 17, 20, 0.10);
        }

        .cart-panel,
        .project-basket,
        [data-role="project-basket"] {
            border-color: var(--ig-line) !important;
            background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%) !important;
        }


        /* PROCUREMENT MOBILE UX UPGRADE */
        .procurement-card-specs {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .55rem;
            margin-top: 1rem;
        }
        .procurement-card-specs span {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            min-height: 64px;
            border: 1px solid var(--ig-line, #e7e8eb);
            background: #fff;
            border-radius: 1rem;
            padding: .7rem .75rem;
            font-style: normal;
        }
        .procurement-card-specs svg { width: 14px; height: 14px; color: var(--ig-red, #B30000); }
        .procurement-card-specs b { font-size: 8px; line-height: 1; text-transform: uppercase; letter-spacing: .14em; color: #9ca3af; }
        .procurement-card-specs em { font-size: 11px; line-height: 1.1; font-weight: 900; color: #111; font-style: normal; }
        .shop-filter-toolbar {
            position: sticky;
            top: 72px;
            z-index: 30;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .filter-option-grid:empty { display: none; }
        .variant-colour-card { min-height: 210px; }
        .variant-qty-control input { min-width: 74px; }
        @media (max-width: 767px) {
            .shop-catalog-shell { position: relative; }
            .shop-filter-toolbar {
                top: 0;
                margin-left: -1rem;
                margin-right: -1rem;
                border-radius: 0 0 1.5rem 1.5rem;
                box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
            }
            .shop-catalog-layout { display: block !important; }
            .shop-filter-panel {
                position: fixed !important;
                inset: auto 0 0 0 !important;
                z-index: 80;
                width: 100% !important;
                max-height: 82vh;
                overflow: auto;
                border-radius: 2rem 2rem 0 0 !important;
                box-shadow: 0 -24px 80px rgba(0,0,0,.25);
                padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
            }
            .filter-panel-head { position: sticky; top: 0; background: #fff; z-index: 2; }
            .filter-toggle { width: 100%; justify-content: center; }
            .toolbar-primary, .toolbar-meta { width: 100%; }
            .toolbar-meta { gap: .75rem; }
            .toolbar-sort { width: 100%; }
            .procurement-quick-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .5rem; scrollbar-width: none; }
            .procurement-quick-filters::-webkit-scrollbar { display: none; }
            .procurement-quick-filters button { white-space: nowrap; flex: 0 0 auto; }
            .product-card { border: 1px solid var(--ig-line, #e7e8eb); border-radius: 2rem; padding: .75rem; background: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.06); }
            .product-card .img-placeholder { border-radius: 1.5rem !important; }
            .product-card h3 { font-size: 1.05rem !important; }
            .procurement-card-specs { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
            .procurement-card-specs span { padding: .55rem; min-height: 58px; }
            .variant-colour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .variant-colour-card { min-height: 180px; padding: .75rem; }
            .variant-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1.2rem; }
            .variant-table { min-width: 720px; }
            [x-show="view === 'cart'"] { padding-left: 1rem !important; padding-right: 1rem !important; }
        }


        /* Sprint 3 catalogue refinements */
        .filter-mobile-actions {
            display: none;
            position: sticky;
            bottom: 0;
            margin: 1.5rem -1rem -1rem;
            padding: 1rem;
            background: rgba(255,255,255,.96);
            border-top: 1px solid var(--ig-line, #e7e8eb);
            backdrop-filter: blur(18px);
            z-index: 4;
        }
        .filter-mobile-actions p {
            margin: 0 0 .75rem;
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--ig-muted, #5e6673);
        }
        .filter-mobile-actions button {
            min-height: 48px;
            width: 100%;
            border: 0;
            border-radius: 999px;
            background: var(--ig-red, #B30000);
            color: #fff;
            font-size: .72rem;
            font-weight: 900;
            letter-spacing: .14em;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            box-shadow: 0 14px 34px rgba(179,0,0,.22);
        }
        .catalog-pagination {
            margin: clamp(2.5rem, 5vw, 5.5rem) auto 0;
            width: min(100%, 880px);
            padding: 1rem;
            border: 1px solid var(--ig-line, #e7e8eb);
            border-radius: 28px;
            background: rgba(255,255,255,.92);
            box-shadow: 0 18px 60px rgba(17,17,17,.08);
            backdrop-filter: blur(18px);
        }
        .catalog-pagination__summary {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: center;
            padding: 0 .5rem .9rem;
            color: var(--ig-muted, #5e6673);
            font-size: .72rem;
            font-weight: 900;
            letter-spacing: .11em;
            text-transform: uppercase;
        }
        .catalog-pagination__controls {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: .45rem;
        }
        .catalog-page-btn {
            min-width: 44px;
            height: 44px;
            padding: 0 .95rem;
            border: 1px solid var(--ig-line, #e7e8eb);
            border-radius: 999px;
            background: #fff;
            color: var(--ig-charcoal, #332f31);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            font-size: .68rem;
            font-weight: 950;
            letter-spacing: .12em;
            text-transform: uppercase;
            transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
        }
        .catalog-page-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            border-color: rgba(179,0,0,.35);
            box-shadow: 0 12px 30px rgba(17,17,17,.08);
        }
        .catalog-page-btn.is-current {
            background: var(--ig-red, #B30000);
            border-color: var(--ig-red, #B30000);
            color: #fff;
            box-shadow: 0 14px 32px rgba(179,0,0,.22);
        }
        .catalog-page-btn:disabled {
            opacity: .42;
            cursor: not-allowed;
            box-shadow: none;
        }
        .catalog-page-ellipsis {
            min-width: 34px;
            color: var(--ig-muted, #5e6673);
            font-weight: 900;
            text-align: center;
        }

        @media (max-width: 640px) {
            .catalog-pagination { border-radius: 22px; padding: .85rem; }
            .catalog-pagination__summary {
                flex-direction: column;
                align-items: flex-start;
                gap: .3rem;
            }
            .catalog-page-btn {
                min-width: 40px;
                height: 42px;
                padding: 0 .75rem;
            }
            .catalog-page-btn span.label-text { display: none; }
        }
        .filter-option-grid:empty::after {
            content: 'No options for current catalogue';
            display: block;
            padding: .75rem;
            color: var(--ig-muted, #5e6673);
            font-size: .75rem;
            font-weight: 700;
        }
        @media (max-width: 1023px) {
            .filter-mobile-actions { display: block; }
            .shop-filter-toolbar {
                position: sticky;
                top: 0;
                z-index: 50;
            }
            .shop-filter-panel {
                overscroll-behavior: contain;
            }
            .shop-filter-panel[x-cloak],
            .shop-filter-panel[style*="display: none"] {
                pointer-events: none;
            }
        }

    

        /* Sprint 4 product page procurement UX */
        .sprint4-product-page {
            --pd-radius: 28px;
            padding-bottom: 7rem;
        }
        .sprint4-product-grid {
            display: grid;
            grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
            gap: clamp(2rem, 5vw, 5.5rem);
            align-items: start;
        }
        .sprint4-gallery-column { position: sticky; top: 96px; }
        .sprint4-main-image {
            aspect-ratio: 1 / 1;
            width: 100%;
            max-width: 720px;
            border-radius: 2rem;
            border: 1px solid var(--ig-line, #E7E9EE);
            background: linear-gradient(180deg, #fff 0%, #F7F8FA 100%);
            box-shadow: 0 22px 70px rgba(16,17,20,.08);
        }
        .sprint4-main-image img { object-fit: contain !important; background: #fff; }

        .product-gallery-arrow {
            width: 44px;
            height: 44px;
            border-radius: 999px;
            border: 1px solid rgba(15, 23, 42, 0.12);
            background: rgba(255, 255, 255, 0.92);
            color: #111111;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
            transition: transform .2s ease, border-color .2s ease, background .2s ease;
            backdrop-filter: blur(8px);
        }
        .product-gallery-arrow:hover { transform: translateY(-1px); border-color: #111111; background: #ffffff; }
        .product-gallery-arrow:focus-visible { outline: 3px solid rgba(179, 0, 0, 0.24); outline-offset: 2px; }

        @media (max-width: 640px) {
            .product-gallery-arrow { width: 40px; height: 40px; }
        }

        .sprint4-gallery-thumb {
            border-radius: 1rem !important;
            min-height: 64px;
        }
        .sprint4-product-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            width: fit-content;
            padding: .55rem .9rem;
            border-radius: 999px;
            border: 1px solid rgba(179,0,0,.14);
            background: rgba(179,0,0,.06);
            color: var(--ig-red, #B30000);
            font-size: .66rem;
            font-weight: 900;
            letter-spacing: .18em;
            text-transform: uppercase;
        }
        .sprint4-title {
            max-width: 760px;
            letter-spacing: -.055em !important;
            text-transform: none !important;
        }
        .sprint4-procurement-strip {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .75rem;
            margin-top: 1.35rem;
        }
        .sprint4-procurement-strip > div {
            border: 1px solid var(--ig-line, #E7E9EE);
            border-radius: 1.25rem;
            background: #fff;
            padding: .95rem;
            box-shadow: 0 10px 28px rgba(16,17,20,.04);
        }
        .sprint4-procurement-strip span {
            display: block;
            color: #9AA1AA;
            font-size: .56rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .17em;
        }
        .sprint4-procurement-strip strong {
            display: block;
            margin-top: .25rem;
            color: var(--ig-ink, #111);
            font-size: .82rem;
            font-weight: 900;
            line-height: 1.15;
        }
        .sprint4-decision-panel,
        .sprint4-quote-panel,
        .sprint4-workflow-panel {
            border: 1px solid var(--ig-line, #E7E9EE);
            border-radius: 2rem;
            background: linear-gradient(180deg, #fff 0%, #FAFAFB 100%);
            box-shadow: 0 18px 55px rgba(16,17,20,.06);
        }
        .sprint4-step-label {
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            color: var(--ig-ink, #111);
            font-size: .68rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .18em;
        }
        .sprint4-step-label b {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: var(--ig-red, #B30000);
            color: #fff;
            letter-spacing: 0;
        }
        .variant-step {
            border-radius: 2rem !important;
            border: 1px solid var(--ig-line, #E7E9EE) !important;
            background: #fff !important;
            padding: clamp(1rem, 2.4vw, 1.5rem) !important;
            margin-bottom: 1rem;
        }
        .variant-step-head { margin-bottom: 1rem; }
        .variant-colour-card {
            border-radius: 1.5rem !important;
            min-height: 236px;
            text-align: left;
        }
        .variant-colour-card img {
            border-radius: 1.15rem !important;
            background: #F7F8FA;
            object-fit: contain !important;
        }
        .variant-colour-card strong { text-transform: none !important; letter-spacing: -.01em !important; }
        .variant-colour-card .variant-colour-stock {
            border-radius: 999px;
            background: #F7F8FA;
            padding: .45rem .7rem;
            width: fit-content;
        }
        .sprint4-incoming-note {
            margin-top: .45rem;
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            color: #8A5A00;
            background: #FFF7E6;
            border: 1px solid #F8E1A8;
            border-radius: 999px;
            padding: .35rem .6rem;
            font-size: .62rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .1em;
        }
        .sprint4-qty-intro {
            border-radius: 1.5rem;
            border: 1px solid var(--ig-line, #E7E9EE);
            background: #F7F8FA;
            padding: 1rem;
        }
        .variant-table-wrap { border-radius: 1.5rem !important; }
        .variant-table th { white-space: nowrap; }
        .variant-table td:first-child { font-weight: 900; color: var(--ig-ink, #111); }
        .sprint4-branding-method-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .75rem;
            margin-top: 1rem;
        }
        .sprint4-branding-method-grid span {
            border: 1px solid var(--ig-line, #E7E9EE);
            border-radius: 999px;
            background: #fff;
            padding: .65rem .85rem;
            color: var(--ig-ink, #111);
            font-size: .64rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .12em;
            text-align: center;
        }
        .sprint4-sticky-action {
            position: sticky;
            bottom: 1rem;
            z-index: 25;
            border-radius: 1.75rem;
            border: 1px solid rgba(179,0,0,.14);
            background: rgba(255,255,255,.94);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            box-shadow: 0 24px 70px rgba(16,17,20,.14);
            padding: 1rem;
        }
        @media (max-width: 1023px) {
            .sprint4-product-grid { grid-template-columns: 1fr; }
            .sprint4-gallery-column { position: static; }
            .sprint4-procurement-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 767px) {
            .sprint4-product-page { padding-left: 1rem !important; padding-right: 1rem !important; }
            .sprint4-product-grid { gap: 1.35rem; }
            .sprint4-main-image { border-radius: 1.35rem; }
            .sprint4-title { font-size: 2rem !important; line-height: 1.02 !important; }
            .sprint4-procurement-strip { grid-template-columns: 1fr 1fr; gap: .55rem; }
            .sprint4-procurement-strip > div { padding: .75rem; border-radius: 1rem; }
            .sprint4-procurement-strip strong { font-size: .74rem; }
            .variant-colour-grid { grid-template-columns: 1fr 1fr !important; gap: .65rem !important; }
            .variant-colour-card { min-height: 198px; padding: .7rem !important; border-radius: 1.15rem !important; }
            .variant-colour-card img { height: 94px !important; }
            .sprint4-branding-method-grid { grid-template-columns: 1fr; }
            .sprint4-sticky-action {
                position: fixed;
                left: .75rem;
                right: .75rem;
                bottom: .75rem;
                padding: .75rem;
                border-radius: 1.25rem;
            }
            .sprint4-sticky-action .cta-glow { margin-top: 0 !important; padding-top: 1rem !important; padding-bottom: 1rem !important; }
        }

        /* Complete procurement category menu - no hidden "More" bucket */
        .ig-complete-category-menu {
            min-height: 4rem;
            height: auto !important;
            flex-wrap: wrap;
            row-gap: .35rem;
            column-gap: 1.25rem;
            padding-top: .65rem;
            padding-bottom: .65rem;
            overflow: visible;
        }
        .ig-complete-category-menu > .menu-category-item {
            height: 3rem;
        }
        .active-filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin: .9rem 0 0;
        }
        .active-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            border: 1px solid var(--ig-line, #E7E9EE);
            background: #fff;
            color: var(--ig-ink, #111);
            border-radius: 999px;
            padding: .55rem .75rem;
            font-size: .62rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .12em;
        }
        .active-filter-chip button {
            width: 1.35rem;
            height: 1.35rem;
            border-radius: 999px;
            background: #F7F8FA;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .active-filter-chip > svg {
            width: 1rem;
            height: 1rem;
            flex: 0 0 auto;
        }
        .active-filter-chip.is-category {
            min-height: 2.6rem;
            border-color: #111;
            border-radius: .8rem;
            background: #111;
            color: #fff;
            padding: .55rem .65rem .55rem .8rem;
            box-shadow: 0 10px 28px rgba(17,17,17,.12);
        }
        .active-filter-chip.is-category button {
            background: rgba(255,255,255,.12);
            color: #fff;
        }
        .active-filter-chip-context {
            color: rgba(255,255,255,.58);
            font-size: .54rem;
            font-weight: 800;
        }
        .product-detail-skeleton {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            border-radius: 999px;
            padding: .55rem .8rem;
            background: #F7F8FA;
            color: #5E6673;
            font-size: .65rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .14em;
        }
        @media (max-width: 1023px) {
            .ig-complete-category-menu { display: none !important; }
        }



        /* Sprint 7: enterprise procurement navigation */
        .ig-complete-category-menu {
            align-items: stretch;
            border-top: 1px solid rgba(231,233,238,.8);
            box-shadow: 0 10px 40px rgba(17,17,17,.04);
        }
        .menu-category-item > button,
        .ig-complete-category-menu > button {
            min-height: 2.8rem;
            border-radius: 999px;
            padding: 0 .85rem;
        }
        .menu-category-item > button:hover,
        .ig-complete-category-menu > button:hover {
            background: #F7F8FA;
        }
        .menu-category-item > button.is-active,
        .ig-complete-category-menu > button.is-active {
            background: #111;
            color: #fff !important;
            box-shadow: 0 8px 20px rgba(17,17,17,.12);
        }
        .menu-category-item > button.is-active:hover,
        .ig-complete-category-menu > button.is-active:hover {
            background: #B30000;
        }
        .ig-menu-icon-pill {
            display: none !important;
        }
        .ig-complete-category-menu i,
        .ig-mega-panel i {
            display: none !important;
        }

        .ig-mega-panel {
            background: rgba(255,255,255,.98);
            backdrop-filter: blur(18px);
        }
        .ig-mega-quick-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border: 1px solid #E7E9EE;
            border-radius: 1.25rem;
            background: #fff;
            padding: .95rem 1rem;
            font-size: .68rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .14em;
            transition: all .2s ease;
        }
        .ig-mega-quick-link:hover {
            border-color: #111;
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(17,17,17,.06);
        }
        @media (min-width: 1024px) {
            .sprint4-product-grid {
                grid-template-columns: minmax(420px, 0.96fr) minmax(0, 1.04fr);
            }
        }

        /* Modern catalogue loading experience */
        [x-cloak] { display: none !important; }
        .catalog-loader {
            position: fixed;
            inset: 0;
            z-index: 999;
            display: grid;
            place-items: center;
            padding: clamp(18px, 4vw, 48px);
            background:
                radial-gradient(circle at 20% 15%, rgba(179, 0, 0, 0.10), transparent 26rem),
                radial-gradient(circle at 80% 85%, rgba(17, 24, 39, 0.08), transparent 24rem),
                #ffffff;
        }
        .catalog-loader__card {
            width: min(94vw, 560px);
            border: 1px solid #E7E9EE;
            border-radius: clamp(24px, 6vw, 44px);
            background: rgba(255,255,255,.92);
            box-shadow: 0 24px 80px rgba(17, 24, 39, .12);
            padding: clamp(22px, 5vw, 42px);
            text-align: center;
        }
        .catalog-loader__mark {
            width: clamp(76px, 18vw, 112px);
            height: clamp(76px, 18vw, 112px);
            margin: 0 auto 20px;
            display: grid;
            place-items: center;
            background: transparent;
            position: relative;
            isolation: isolate;
            padding: 0;
            box-shadow: none;
        }
        .catalog-loader__mark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 14px 22px rgba(17,17,17,.12));
        }
        .catalog-loader__mark::after {
            content: '';
            position: absolute;
            inset: -8px;
            border: 1px solid rgba(179,0,0,.24);
            border-radius: 30px;
            animation: loaderPulse 1.45s ease-in-out infinite;
            z-index: -1;
        }
        @keyframes loaderPulse {
            0%,100% { transform: scale(.94); opacity: .42; }
            50% { transform: scale(1.04); opacity: 1; }
        }
        .catalog-loader__eyebrow {
            color: #B30000;
            font-size: clamp(.62rem, 1.8vw, .72rem);
            font-weight: 950;
            letter-spacing: .22em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .catalog-loader__title {
            margin: 0;
            color: #111111;
            font-size: clamp(1.45rem, 5.4vw, 2.5rem);
            line-height: .95;
            letter-spacing: -.06em;
            font-weight: 950;
            text-transform: uppercase;
        }
        .catalog-loader__stage {
            margin: 16px auto 0;
            max-width: 30rem;
            color: #5E6673;
            font-size: clamp(.9rem, 2.4vw, 1rem);
            line-height: 1.55;
        }
        .catalog-loader__bar {
            height: 8px;
            margin: 26px auto 0;
            border-radius: 999px;
            overflow: hidden;
            background: #F1F3F6;
        }
        .catalog-loader__bar span {
            display: block;
            width: 42%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #B30000, #111111);
            animation: loaderTrack 1.25s ease-in-out infinite;
        }
        @keyframes loaderTrack {
            0% { transform: translateX(-105%); }
            100% { transform: translateX(245%); }
        }
        .catalog-loader__skeletons {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: clamp(8px, 2vw, 14px);
            margin-top: 26px;
        }
        .catalog-loader__skeleton {
            height: clamp(76px, 20vw, 118px);
            border-radius: clamp(16px, 4vw, 24px);
            background: #F7F8FA;
            border: 1px solid #E7E9EE;
            overflow: hidden;
            position: relative;
        }
        .catalog-loader__skeleton img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 10px;
            filter: saturate(.94);
        }
        .catalog-loader__skeleton::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, transparent 8%, rgba(255,255,255,.82) 18%, transparent 33%);
            background-size: 200% 100%;
            animation: skeletonPulse 1.15s linear infinite;
            pointer-events: none;
        }
        @keyframes skeletonPulse {
            to { background-position-x: -200%; }
        }

        @media (max-width: 640px) {
            .catalog-loader { padding: 14px; }
            .catalog-loader__card { border-radius: 26px; }
            .catalog-loader__skeletons { grid-template-columns: repeat(2, 1fr); }
        }
        .buyer-confidence-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 24px;
        }
        .buyer-confidence-strip span {
            min-height: 72px;
            border: 1px solid #E7E9EE;
            border-radius: 8px;
            background: #fff;
            padding: 14px 16px;
            color: #5E6673;
            font-size: .78rem;
            line-height: 1.35;
            box-shadow: 0 2px 8px rgba(17,17,17,.04);
        }
        .buyer-confidence-strip strong {
            display: block;
            color: #111;
            font-size: .68rem;
            text-transform: uppercase;
            letter-spacing: .12em;
            margin-bottom: 4px;
        }
        @media (max-width: 820px) {
            .buyer-confidence-strip { grid-template-columns: 1fr; }
            .buyer-confidence-strip span { min-height: auto; }
        }

        .catalog-loader__skeletons.is-rotating .catalog-loader__skeleton img {
            opacity: .35;
            transform: scale(.96);
        }
        .catalog-loader__skeleton img {
            transition: opacity .34s ease, transform .34s ease;
        }
        .catalog-loader__elapsed {
            margin-top: 10px;
            color: #8A94A6;
            font-size: .76rem;
            font-weight: 800;
        }
        .catalog-loader__slow-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 18px;
        }
        .catalog-loader__slow-actions button,
        .catalog-loader__slow-actions a {
            min-height: 38px;
            border: 1px solid #E7E9EE;
            border-radius: 999px;
            background: #fff;
            padding: 0 14px;
            color: #111;
            font-size: .68rem;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: .12em;
        }
        .catalog-loader__slow-actions button:first-child {
            background: #B30000;
            border-color: #B30000;
            color: #fff;
        }
        @media (prefers-reduced-motion: reduce) {
            .catalog-loader__mark::after,
            .catalog-loader__bar span,
            .catalog-loader__skeleton::after { animation: none; }
        }

    



/* =========================================================
   IZIPHO DESIGN SYSTEM SPRINT 1 — OFFICIAL IMPLEMENTATION
   Brand red: #B30000. Premium procurement interface tokens.
   Applies across public pages with private sourcing kept outside public code.
========================================================= */
:root{
  --ig-red:#B30000;
  --ig-red-dark:#8F0000;
  --ig-black:#111111;
  --ig-charcoal:#373435;
  --ig-ink:#101114;
  --ig-muted:#5E6673;
  --ig-soft:#F7F8FA;
  --ig-soft-2:#ECEFF2;
  --ig-border:#E7E9EE;
  --ig-white:#FFFFFF;
  --ig-success:#15803D;
  --ig-warning:#D97706;
  --ig-error:#DC2626;
  --ig-radius-sm:12px;
  --ig-radius-md:16px;
  --ig-radius-lg:20px;
  --ig-radius-pill:999px;
  --ig-space-1:4px;
  --ig-space-2:8px;
  --ig-space-3:16px;
  --ig-space-4:24px;
  --ig-space-5:32px;
  --ig-space-6:48px;
  --ig-space-7:64px;
  --ig-space-8:96px;
  --ig-shadow-sm:0 2px 8px rgba(17,17,17,.05);
  --ig-shadow-md:0 8px 24px rgba(17,17,17,.08);
  --ig-shadow-lg:0 20px 60px rgba(17,17,17,.12);
  --ig-ease:cubic-bezier(.16,1,.3,1);
  --accent:#B30000;
  --accent-dark:#8F0000;
  --charcoal:#373435;
  --ink:#101114;
  --muted:#5E6673;
  --soft:#F7F8FA;
  --soft-2:#ECEFF2;
  --line:#E7E9EE;
  --white:#FFFFFF;
  --shadow:var(--ig-shadow-md);
  --shadow-soft:var(--ig-shadow-sm);
}
html{font-size:16px;}
body{
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  color:var(--ig-black);
  background:var(--ig-white);
  line-height:1.6;
  letter-spacing:-.01em;
}
h1,.h1{font-size:clamp(2.35rem,5vw,3rem);line-height:1.05;font-weight:800;letter-spacing:-.055em;color:var(--ig-black);}
h2,.h2{font-size:clamp(1.85rem,3.5vw,2.25rem);line-height:1.12;font-weight:800;letter-spacing:-.04em;color:var(--ig-black);}
h3,.h3{font-size:clamp(1.35rem,2.5vw,1.75rem);line-height:1.18;font-weight:700;letter-spacing:-.03em;color:var(--ig-black);}
h4,.h4{font-size:1.375rem;line-height:1.25;font-weight:700;color:var(--ig-black);}
p,li,td,th,label,input,select,textarea,button{font-family:inherit;}
p{color:var(--ig-muted);}
:focus-visible{outline:3px solid rgba(179,0,0,.28)!important;outline-offset:3px;}
::selection{background:var(--ig-red);color:var(--ig-white);}
/* Premium action system */
a[href*="shop"],button,[role="button"],.button,.btn,.cta,.quick-quote-btn,.add-to-cart,.add-to-project{
  transition:transform .18s var(--ig-ease),box-shadow .18s var(--ig-ease),background .18s var(--ig-ease),border-color .18s var(--ig-ease),color .18s var(--ig-ease);
}
.button,.btn,.btn-primary,.primary-btn,.cta-primary,.quick-quote-btn,.add-to-project,.add-to-cart,button[type="submit"]{
  min-height:48px;
  border-radius:var(--ig-radius-pill)!important;
  font-weight:800!important;
  letter-spacing:-.01em;
}
.btn-primary,.primary-btn,.cta-primary,.quick-quote-btn,.add-to-project,.add-to-cart,button[type="submit"],.bg-red-600,.bg-red-700,.bg-brand{
  background:var(--ig-red)!important;
  border-color:var(--ig-red)!important;
  color:var(--ig-white)!important;
}
.btn-primary:hover,.primary-btn:hover,.cta-primary:hover,.quick-quote-btn:hover,.add-to-project:hover,.add-to-cart:hover,button[type="submit"]:hover,
.button:hover,.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--ig-shadow-md);
}
.btn-secondary,.secondary-btn,.button.secondary,.border-black,.border-gray-900{
  border-color:var(--ig-black)!important;
  color:var(--ig-black)!important;
  background:var(--ig-white)!important;
}
/* Cards and procurement surfaces */
.card,.product-card,.collection-card,.solution-card,.trust-card,.basket-card,.quote-card,.rounded-2xl,.rounded-3xl{
  border-radius:var(--ig-radius-md)!important;
}
.card,.product-card,.collection-card,.solution-card,.trust-card,.basket-card,.quote-card{
  border:1px solid var(--ig-border)!important;
  background:var(--ig-white)!important;
  box-shadow:var(--ig-shadow-sm);
}
.card:hover,.product-card:hover,.collection-card:hover,.solution-card:hover,.trust-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--ig-shadow-md);
}
.product-card img,.collection-card img,.solution-card img{transition:transform .25s var(--ig-ease);}
.product-card:hover img,.collection-card:hover img,.solution-card:hover img{transform:scale(1.03);}
/* Forms */
input,select,textarea{
  min-height:48px;
  border-radius:var(--ig-radius-sm)!important;
  border:1px solid var(--ig-border)!important;
  background:var(--ig-white)!important;
  color:var(--ig-black)!important;
  font-size:16px!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--ig-red)!important;
  box-shadow:0 0 0 4px rgba(179,0,0,.10)!important;
  outline:none!important;
}
label{font-weight:700;color:var(--ig-black);}
/* Status language */
.status-badge,.stock-badge,.badge,.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  border-radius:var(--ig-radius-pill)!important;
  border:1px solid var(--ig-border);
  padding:4px 10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.status-available,.badge-available,.in-stock{color:var(--ig-success)!important;background:rgba(21,128,61,.08)!important;border-color:rgba(21,128,61,.18)!important;}
.status-limited,.badge-warning,.low-stock{color:var(--ig-warning)!important;background:rgba(217,119,6,.10)!important;border-color:rgba(217,119,6,.22)!important;}
.status-error,.artwork-required{color:var(--ig-error)!important;background:rgba(220,38,38,.08)!important;border-color:rgba(220,38,38,.18)!important;}
/* Neutralise non-brand utility colours */
.text-blue-600,.text-blue-700,.text-indigo-600,.text-purple-600{color:var(--ig-red)!important;}
.bg-blue-50,.bg-indigo-50,.bg-purple-50{background:rgba(179,0,0,.06)!important;}
.border-blue-100,.border-blue-200,.border-indigo-100,.border-purple-100{border-color:rgba(179,0,0,.18)!important;}
.hover\:text-blue-600:hover,.hover\:text-indigo-600:hover{color:var(--ig-red-dark)!important;}
.hover\:bg-blue-50:hover,.hover\:bg-indigo-50:hover{background:rgba(179,0,0,.08)!important;}
/* Responsive behaviour */
.shell,.container{width:min(1200px,calc(100% - 32px));margin-inline:auto;}
.section{padding-top:var(--ig-space-8);padding-bottom:var(--ig-space-8);}
@media (max-width:1024px){
  .section{padding-top:var(--ig-space-7);padding-bottom:var(--ig-space-7);}
}
@media (max-width:640px){
  .shell,.container{width:min(100% - 24px,1200px);}
  .section{padding-top:var(--ig-space-6);padding-bottom:var(--ig-space-6);}
  h1,.h1{font-size:2.15rem;}
  h2,.h2{font-size:1.7rem;}
  .button,.btn,button,[role="button"]{min-height:48px;}
  .card,.product-card,.collection-card,.solution-card,.basket-card{border-radius:var(--ig-radius-md)!important;}
}



        /* Sprint 4 product page procurement UX */
        .sprint4-product-page {
            --pd-radius: 28px;
            padding-bottom: 7rem;
        }
        .sprint4-product-grid {
            display: grid;
            grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
            gap: clamp(2rem, 5vw, 5.5rem);
            align-items: start;
        }
        .sprint4-gallery-column { position: sticky; top: 96px; }
        .sprint4-main-image {
            aspect-ratio: 1 / 1;
            width: 100%;
            max-width: 720px;
            border-radius: 2rem;
            border: 1px solid var(--ig-line, #E7E9EE);
            background: linear-gradient(180deg, #fff 0%, #F7F8FA 100%);
            box-shadow: 0 22px 70px rgba(16,17,20,.08);
        }
        .sprint4-main-image img { object-fit: contain !important; background: #fff; }
        .sprint4-gallery-thumb {
            border-radius: 1rem !important;
            min-height: 64px;
        }
        .sprint4-product-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            width: fit-content;
            padding: .55rem .9rem;
            border-radius: 999px;
            border: 1px solid rgba(179,0,0,.14);
            background: rgba(179,0,0,.06);
            color: var(--ig-red, #B30000);
            font-size: .66rem;
            font-weight: 900;
            letter-spacing: .18em;
            text-transform: uppercase;
        }
        .sprint4-title {
            max-width: 760px;
            letter-spacing: -.055em !important;
            text-transform: none !important;
        }
        .sprint4-procurement-strip {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .75rem;
            margin-top: 1.35rem;
        }
        .sprint4-procurement-strip > div {
            border: 1px solid var(--ig-line, #E7E9EE);
            border-radius: 1.25rem;
            background: #fff;
            padding: .95rem;
            box-shadow: 0 10px 28px rgba(16,17,20,.04);
        }
        .sprint4-procurement-strip span {
            display: block;
            color: #9AA1AA;
            font-size: .56rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .17em;
        }
        .sprint4-procurement-strip strong {
            display: block;
            margin-top: .25rem;
            color: var(--ig-ink, #111);
            font-size: .82rem;
            font-weight: 900;
            line-height: 1.15;
        }
        .sprint4-decision-panel,
        .sprint4-quote-panel,
        .sprint4-workflow-panel {
            border: 1px solid var(--ig-line, #E7E9EE);
            border-radius: 2rem;
            background: linear-gradient(180deg, #fff 0%, #FAFAFB 100%);
            box-shadow: 0 18px 55px rgba(16,17,20,.06);
        }
        .sprint4-step-label {
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            color: var(--ig-ink, #111);
            font-size: .68rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .18em;
        }
        .sprint4-step-label b {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: var(--ig-red, #B30000);
            color: #fff;
            letter-spacing: 0;
        }
        .variant-step {
            border-radius: 2rem !important;
            border: 1px solid var(--ig-line, #E7E9EE) !important;
            background: #fff !important;
            padding: clamp(1rem, 2.4vw, 1.5rem) !important;
            margin-bottom: 1rem;
        }
        .variant-step-head { margin-bottom: 1rem; }
        .variant-colour-card {
            border-radius: 1.5rem !important;
            min-height: 236px;
            text-align: left;
        }
        .variant-colour-card img {
            border-radius: 1.15rem !important;
            background: #F7F8FA;
            object-fit: contain !important;
        }
        .variant-colour-card strong { text-transform: none !important; letter-spacing: -.01em !important; }
        .variant-colour-card .variant-colour-stock {
            border-radius: 999px;
            background: #F7F8FA;
            padding: .45rem .7rem;
            width: fit-content;
        }
        .sprint4-incoming-note {
            margin-top: .45rem;
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            color: #8A5A00;
            background: #FFF7E6;
            border: 1px solid #F8E1A8;
            border-radius: 999px;
            padding: .35rem .6rem;
            font-size: .62rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .1em;
        }
        .sprint4-qty-intro {
            border-radius: 1.5rem;
            border: 1px solid var(--ig-line, #E7E9EE);
            background: #F7F8FA;
            padding: 1rem;
        }
        .variant-table-wrap { border-radius: 1.5rem !important; }
        .variant-table th { white-space: nowrap; }
        .variant-table td:first-child { font-weight: 900; color: var(--ig-ink, #111); }
        .sprint4-branding-method-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .75rem;
            margin-top: 1rem;
        }
        .sprint4-branding-method-grid span {
            border: 1px solid var(--ig-line, #E7E9EE);
            border-radius: 999px;
            background: #fff;
            padding: .65rem .85rem;
            color: var(--ig-ink, #111);
            font-size: .64rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .12em;
            text-align: center;
        }
        .sprint4-sticky-action {
            position: sticky;
            bottom: 1rem;
            z-index: 25;
            border-radius: 1.75rem;
            border: 1px solid rgba(179,0,0,.14);
            background: rgba(255,255,255,.94);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            box-shadow: 0 24px 70px rgba(16,17,20,.14);
            padding: 1rem;
        }
        @media (max-width: 1023px) {
            .sprint4-product-grid { grid-template-columns: 1fr; }
            .sprint4-gallery-column { position: static; }
            .sprint4-procurement-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 767px) {
            .sprint4-product-page { padding-left: 1rem !important; padding-right: 1rem !important; }
            .sprint4-product-grid { gap: 1.35rem; }
            .sprint4-main-image { border-radius: 1.35rem; }
            .sprint4-title { font-size: 2rem !important; line-height: 1.02 !important; }
            .sprint4-procurement-strip { grid-template-columns: 1fr 1fr; gap: .55rem; }
            .sprint4-procurement-strip > div { padding: .75rem; border-radius: 1rem; }
            .sprint4-procurement-strip strong { font-size: .74rem; }
            .variant-colour-grid { grid-template-columns: 1fr 1fr !important; gap: .65rem !important; }
            .variant-colour-card { min-height: 198px; padding: .7rem !important; border-radius: 1.15rem !important; }
            .variant-colour-card img { height: 94px !important; }
            .sprint4-branding-method-grid { grid-template-columns: 1fr; }
            .sprint4-sticky-action {
                position: fixed;
                left: .75rem;
                right: .75rem;
                bottom: .75rem;
                padding: .75rem;
                border-radius: 1.25rem;
            }
            .sprint4-sticky-action .cta-glow { margin-top: 0 !important; padding-top: 1rem !important; padding-bottom: 1rem !important; }
        }



    


/* =========================================================
   SPRINT 5 — PROJECT BASKET PROCUREMENT WORKSPACE
========================================================= */
.sprint5-basket-shell,.sprint5-checkout-shell{animation:shopFadeUp 420ms var(--ig-ease) both;}
.sprint5-basket-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:3rem;padding:2rem;border:1px solid var(--ig-border);border-radius:var(--ig-radius-lg);background:linear-gradient(135deg,#fff,var(--ig-soft));box-shadow:var(--ig-shadow-sm)}
.sprint5-basket-hero h1{margin:0;font-size:clamp(2.4rem,7vw,4.75rem);line-height:.92;font-weight:900;letter-spacing:-.07em;text-transform:uppercase;color:var(--ig-black)}
.sprint5-basket-hero p{max-width:42rem;margin:.85rem 0 0;color:var(--ig-muted);font-weight:650}.sprint5-eyebrow{margin:0 0 .5rem!important;color:var(--ig-red)!important;font-size:.68rem!important;font-weight:900!important;letter-spacing:.18em!important;text-transform:uppercase!important}.sprint5-secondary-action{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;border:1px solid var(--ig-border);border-radius:999px;background:#fff;color:var(--ig-charcoal);padding:0 1.15rem;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}.sprint5-secondary-action svg{width:16px;height:16px}.sprint5-summary-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:1rem}.sprint5-summary-card{min-height:150px;padding:1.25rem;border:1px solid var(--ig-border);border-radius:var(--ig-radius-md);background:#fff;box-shadow:var(--ig-shadow-sm)}.sprint5-summary-card.is-primary{background:var(--ig-black);border-color:var(--ig-black);color:#fff}.sprint5-summary-card span{display:block;color:var(--ig-muted);font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.sprint5-summary-card.is-primary span,.sprint5-summary-card.is-primary p{color:rgba(255,255,255,.72)!important}.sprint5-summary-card strong{display:block;margin-top:.65rem;color:inherit;font-size:clamp(1.35rem,3vw,2.15rem);line-height:1;font-weight:900;letter-spacing:-.04em}.sprint5-summary-card p{margin:.75rem 0 0;color:var(--ig-muted);font-size:.82rem;font-weight:650;line-height:1.45}.sprint5-readiness-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:1.25rem;align-items:center;padding:1.35rem;border:1px solid rgba(179,0,0,.14);border-radius:var(--ig-radius-lg);background:rgba(179,0,0,.035)}.sprint5-readiness-panel h2{margin:0;font-size:clamp(1.25rem,2.4vw,1.75rem);letter-spacing:-.035em}.sprint5-readiness-steps{display:grid;gap:.65rem}.sprint5-readiness-steps div{min-height:42px;display:flex;align-items:center;gap:.65rem;border:1px solid var(--ig-border);border-radius:999px;background:#fff;padding:0 .9rem;color:var(--ig-muted);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.sprint5-readiness-steps div.is-done{border-color:rgba(21,128,61,.22);background:rgba(21,128,61,.055);color:var(--ig-success)}.sprint5-readiness-steps svg{width:16px;height:16px}.sprint5-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.sprint5-status-card{display:flex;gap:1rem;min-height:128px;padding:1.15rem;border:1px solid var(--ig-border);border-radius:var(--ig-radius-md);background:#fff;box-shadow:var(--ig-shadow-sm)}.sprint5-status-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:rgba(179,0,0,.075);color:var(--ig-red)}.sprint5-status-icon svg{width:20px;height:20px}.sprint5-status-card p{margin:0;color:var(--ig-muted);font-size:.62rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.sprint5-status-card h3{margin:.3rem 0 .65rem;color:var(--ig-black);font-size:.98rem;font-weight:900;line-height:1.2}.sprint5-status-card span{display:block;color:var(--ig-muted);font-size:.78rem;line-height:1.45}.sprint5-mini-select,.sprint5-mini-input{width:100%;min-height:38px;border:1px solid var(--ig-border);border-radius:12px;background:var(--ig-soft);padding:0 .75rem;color:var(--ig-charcoal);font-size:.78rem;font-weight:800;outline:none}.sprint5-quote-details input,.sprint5-quote-details textarea,.sprint5-quote-details select{border:1px solid transparent!important}.sprint5-quote-details input:focus,.sprint5-quote-details textarea:focus,.sprint5-quote-details select:focus{border-color:rgba(179,0,0,.22)!important;box-shadow:0 0 0 4px rgba(179,0,0,.08)!important}.sprint5-basket-shell .cart-new-badge{display:inline-flex;margin-bottom:.55rem}.sprint5-basket-shell .bg-black,.sprint5-checkout-shell .bg-black{background:var(--ig-black)!important}.sprint5-basket-shell .text-red-500,.sprint5-checkout-shell .text-red-500{color:var(--ig-red)!important}@media(max-width:1024px){.sprint5-summary-grid{grid-template-columns:1fr 1fr}.sprint5-readiness-panel{grid-template-columns:1fr}.sprint5-status-grid{grid-template-columns:1fr}.sprint5-basket-hero{align-items:flex-start;flex-direction:column}}@media(max-width:640px){.sprint5-basket-shell,.sprint5-checkout-shell{padding-left:1rem!important;padding-right:1rem!important}.sprint5-basket-hero{margin-top:.5rem;margin-bottom:1.5rem;padding:1.15rem;border-radius:1.25rem}.sprint5-basket-hero h1{font-size:2.45rem}.sprint5-summary-grid{grid-template-columns:1fr;gap:.75rem}.sprint5-summary-card{min-height:auto;padding:1rem}.sprint5-readiness-panel,.sprint5-status-card{padding:1rem;border-radius:1.25rem}.sprint5-readiness-steps div{border-radius:14px;align-items:flex-start;padding:.75rem}.sprint5-status-card{min-height:auto}.sprint5-basket-shell .space-y-12{gap:1.25rem!important}.sprint5-basket-shell .rounded-\[2\.5rem\],.sprint5-checkout-shell .rounded-\[2\.5rem\]{border-radius:1.35rem!important}.sprint5-basket-shell .p-8,.sprint5-basket-shell .p-10,.sprint5-checkout-shell .p-10{padding:1rem!important}}

.quote-request-shell{padding-bottom:5rem}.quote-request-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.25rem;padding:1.35rem;border:1px solid var(--ig-border);border-radius:var(--ig-radius-lg);background:#fff;box-shadow:var(--ig-shadow-sm)}.quote-request-hero h1{margin:0;color:var(--ig-black);font-size:clamp(2.2rem,6vw,4.6rem);line-height:.9;font-weight:900;letter-spacing:-.07em;text-transform:uppercase}.quote-request-hero p{max-width:52rem;margin:.7rem 0 0;color:var(--ig-muted);font-weight:650}.quote-request-hero-actions{display:flex;gap:.7rem;flex-wrap:wrap}.quote-request-hero-actions button{min-height:44px;display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--ig-border);border-radius:999px;background:#fff;padding:0 .95rem;color:var(--ig-charcoal);font-size:.66rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.quote-request-hero-actions svg{width:15px;height:15px}.quote-readiness-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1.25rem}.quote-readiness-panel div{min-height:54px;display:flex;align-items:center;gap:.65rem;border:1px solid var(--ig-border);border-radius:16px;background:#fff;padding:.8rem;color:var(--ig-muted);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.quote-readiness-panel div.is-done{border-color:rgba(21,128,61,.25);background:rgba(21,128,61,.06);color:var(--ig-success)}.quote-readiness-panel svg{width:17px;height:17px}.quote-request-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.82fr);gap:1.25rem;align-items:start}.quote-document-preview{border:1px solid var(--ig-border);border-radius:18px;background:#fff;box-shadow:0 20px 60px rgba(16,17,20,.08);overflow:hidden}.quote-bbee-strip{padding:.65rem 1rem;border-bottom:1px solid var(--ig-border);background:#f8f9fb;color:var(--ig-charcoal);font-size:.62rem;font-weight:900;text-align:center;text-transform:uppercase;letter-spacing:.08em}.quote-doc-head{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1.25rem}.quote-company-block{display:grid;gap:.25rem;justify-items:center;text-align:center;color:var(--ig-muted);font-size:.75rem}.quote-company-block img{border-radius:10px}.quote-company-block strong{color:var(--ig-black);font-size:1.05rem}.quote-doc-title{text-align:right}.quote-doc-title h2{margin:0;color:var(--ig-black);font-size:1.65rem;font-weight:900;letter-spacing:.08em}.quote-doc-title span{display:block;margin-top:.25rem;color:var(--ig-muted);font-size:.72rem;font-weight:800}.quote-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ig-border);border-bottom:1px solid var(--ig-border)}.quote-meta-grid div{padding:.8rem;border-right:1px solid var(--ig-border)}.quote-meta-grid div:last-child{border-right:0}.quote-meta-grid span,.quote-bill-grid h3,.quote-total-card span,.quote-bank-preview span{display:block;color:var(--ig-muted);font-size:.58rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.quote-meta-grid strong{display:block;margin-top:.25rem;color:var(--ig-black);font-size:.8rem}.quote-bill-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 1.25rem}.quote-bill-grid div{border:1px solid var(--ig-border);border-radius:14px;padding:.9rem}.quote-bill-grid strong,.quote-bill-grid span{display:block}.quote-bill-grid strong{margin:.35rem 0;color:var(--ig-black)}.quote-bill-grid span{color:var(--ig-muted);font-size:.78rem}.quote-line-table{border-top:1px solid var(--ig-border)}.quote-line-head,.quote-line-row{display:grid;grid-template-columns:42px minmax(0,1fr) 90px 70px 110px;gap:.75rem;align-items:start;padding:.75rem 1rem}.quote-line-head{background:var(--ig-charcoal);color:#fff;font-size:.58rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.quote-line-row{border-bottom:1px solid var(--ig-border);color:var(--ig-charcoal);font-size:.8rem}.quote-line-row strong{display:block;color:var(--ig-black)}.quote-line-row p{margin:.25rem 0 0;color:var(--ig-muted);font-size:.72rem;line-height:1.35}.quote-total-zone{display:grid;grid-template-columns:1fr 260px;gap:1rem;padding:1rem}.quote-notes{color:var(--ig-muted);font-size:.8rem}.quote-notes h3,.quote-bank-preview h3{margin:.45rem 0;color:var(--ig-black);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.14em}.quote-total-card{border:1px solid var(--ig-border);border-radius:14px;overflow:hidden}.quote-total-card div{display:flex;justify-content:space-between;gap:.75rem;padding:.65rem .8rem;border-bottom:1px solid var(--ig-border)}.quote-total-card div:last-child{border-bottom:0}.quote-total-card strong{color:var(--ig-black);font-size:.82rem}.quote-total-card .is-grand{background:var(--ig-black);color:#fff}.quote-total-card .is-grand span,.quote-total-card .is-grand strong{color:#fff}.quote-bank-preview{margin:0 1rem 1rem;padding:1rem;border:1px solid var(--ig-border);border-radius:14px;background:#f8f9fb}.quote-bank-preview div{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem}.quote-bank-preview strong{color:var(--ig-black);font-size:.82rem}.quote-form-stack{display:grid;gap:1rem;position:sticky;top:92px}.quote-form-card,.quote-submit-card{border:1px solid var(--ig-border);border-radius:18px;background:#fff;padding:1rem;box-shadow:var(--ig-shadow-sm)}.quote-card-head span,.quote-submit-card>div>span{display:block;color:var(--ig-red);font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.quote-card-head h2{margin:.25rem 0;color:var(--ig-black);font-size:1.25rem;font-weight:900;letter-spacing:-.035em}.quote-card-head p,.quote-submit-card p{margin:.25rem 0 1rem;color:var(--ig-muted);font-size:.78rem;line-height:1.45}.quote-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.quote-form-grid label{display:grid;gap:.35rem}.quote-form-grid label.is-wide{grid-column:1/-1}.quote-form-grid label span{color:var(--ig-muted);font-size:.6rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.quote-form-grid input,.quote-form-grid textarea,.quote-form-grid select{width:100%;min-height:44px;border:1px solid var(--ig-border)!important;border-radius:12px!important;background:#f8f9fb!important;padding:.7rem .85rem!important;color:var(--ig-black)!important;font-size:.86rem!important;font-weight:750!important}.quote-submit-card{display:grid;gap:1rem}.quote-submit-card strong{display:block;margin:.2rem 0;color:var(--ig-black);font-size:2rem;font-weight:900;letter-spacing:-.04em}.quote-submit-actions{display:grid;gap:.7rem}.quote-submit-actions button{min-height:50px;display:flex;align-items:center;justify-content:center;gap:.6rem;border-radius:14px;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.quote-submit-actions svg{width:16px;height:16px}.quote-submit-actions .is-primary{border:1px solid var(--ig-black);background:var(--ig-black);color:#fff}.quote-submit-actions .is-secondary{border:1px solid var(--ig-black);background:#fff;color:var(--ig-black)}.quote-submit-actions .is-danger{border:1px solid rgba(220,38,38,.25);background:rgba(220,38,38,.06);color:#b91c1c}@media(max-width:1100px){.quote-request-layout{grid-template-columns:1fr}.quote-form-stack{position:static}.quote-readiness-panel{grid-template-columns:1fr 1fr}}@media(max-width:720px){.quote-request-hero{align-items:flex-start;flex-direction:column}.quote-meta-grid,.quote-bill-grid,.quote-total-zone,.quote-form-grid{grid-template-columns:1fr}.quote-line-head{display:none}.quote-line-row{grid-template-columns:1fr;gap:.35rem}.quote-doc-head{grid-template-columns:1fr}.quote-doc-title{text-align:left}.quote-readiness-panel{grid-template-columns:1fr}.quote-total-card{width:100%}}
@media(max-width:767px){
  body{overflow-x:hidden}
  nav.fixed>div:nth-child(2){height:70px!important;padding-left:1rem!important;padding-right:1rem!important}
  nav.fixed img[alt="Izipho Gifts"]{width:40px!important;height:40px!important}
  .shop-brand-name{font-size:13px!important;white-space:normal!important;line-height:1.15!important}
  [x-show="view === 'catalog'"]{padding-left:1rem!important;padding-right:1rem!important}
  [x-show="view === 'catalog'"]>header{padding-top:6rem!important;padding-left:1rem!important;padding-right:1rem!important;border-radius:0 0 1.5rem 1.5rem!important}
  [x-show="view === 'catalog'"] h1,[x-show="view === 'catalog'"] h6{font-size:clamp(2.15rem,14vw,3.3rem)!important;line-height:.92!important;letter-spacing:-.06em!important}
  .shop-filter-toolbar{top:0!important;margin-left:-1rem!important;margin-right:-1rem!important;padding:.8rem 1rem!important;border-radius:0 0 1.25rem 1.25rem!important}
  .toolbar-primary,.toolbar-meta,.toolbar-sort,.filter-toggle{width:100%!important}
  .product-results-grid{grid-template-columns:1fr!important;gap:1rem!important}
  .product-card{border-radius:1.25rem!important;padding:.7rem!important}
  .product-card h3{font-size:1rem!important;line-height:1.2!important}
  .procurement-card-specs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .shop-filter-panel{max-height:86vh!important;border-radius:1.35rem 1.35rem 0 0!important}
  .variant-colour-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .variant-colour-card{min-height:170px!important}
  .variant-matrix-table,.variant-table{min-width:680px!important}
  .quote-request-shell{padding-left:1rem!important;padding-right:1rem!important}
  .quote-request-hero,.quote-form-card,.quote-submit-card,.quote-document-preview{border-radius:1.2rem!important}
  .quote-request-hero-actions,.quote-submit-actions{width:100%}
  .quote-request-hero-actions button,.quote-submit-actions button{width:100%}
  .quote-line-row{padding:.85rem!important}
}

/* Product stock and variant section polish */
.variant-workspace{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:grid!important;
  gap:1rem!important;
}
.sprint4-details-column,
.variant-workspace,
.variant-workspace .variant-step,
.variant-table-wrap{
  min-width:0!important;
  max-width:100%!important;
}
.sprint4-details-column{overflow:clip}
.sprint4-gallery-column{position:static!important}
.variant-workspace .variant-step{overflow:hidden}
.variant-colour-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.variant-colour-card{min-width:0!important}
.variant-step-head{flex-wrap:wrap!important;gap:.75rem!important}
.variant-step-head>div:last-child{margin-left:auto}
.variant-mobile-matrix.is-visible{display:grid!important;gap:.75rem!important}
.sprint4-sticky-action{position:static!important}
.stock-confirmation-note{
  border:1px solid rgba(161,98,7,.25);
  background:#fffbeb;
  color:#854d0e;
}
.pdf-modal-actions{display:flex;align-items:center;gap:.65rem}
.pdf-modal-open-link{
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid #111;background:#111;color:#fff;padding:0 .9rem;
  font-size:.65rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.variant-workspace .variant-step{
  border:1px solid var(--ig-line,#E7E9EE)!important;
  border-radius:1.35rem!important;
  background:#fff!important;
  box-shadow:0 16px 42px rgba(16,17,20,.055)!important;
}
.variant-workspace .variant-step:last-child{border-bottom:1px solid var(--ig-line,#E7E9EE)!important}
.stock-status-card{
  transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
@media(max-width:1240px){
  .sprint4-product-grid{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
  }
  .sprint4-gallery-column,
  .sprint4-main-image,
  .sprint4-details-column,
  .variant-workspace{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
}
.stock-status-card.is-in-stock,
.buyer-proof.is-in-stock{
  border-color:rgba(22,163,74,.26)!important;
  background:linear-gradient(180deg,#f0fdf4,#fff)!important;
}
.stock-status-card.is-in-stock strong,
.buyer-proof.is-in-stock .text-\[11px\]{
  color:#15803d!important;
}
.stock-status-card.is-out-of-stock,
.buyer-proof.is-out-of-stock{
  border-color:rgba(220,38,38,.26)!important;
  background:linear-gradient(180deg,#fff1f2,#fff)!important;
}
.stock-status-card.is-out-of-stock strong,
.buyer-proof.is-out-of-stock .text-\[11px\]{
  color:#b91c1c!important;
}
.stock-status-card.is-checking,
.buyer-proof.is-checking,
.stock-status-card.is-confirmation-required,
.buyer-proof.is-confirmation-required{
  border-color:rgba(161,98,7,.24)!important;
  background:linear-gradient(180deg,#fffbeb,#fff)!important;
}
.stock-status-card.is-checking strong,
.buyer-proof.is-checking .text-\[11px\],
.stock-status-card.is-confirmation-required strong,
.buyer-proof.is-confirmation-required .text-\[11px\]{
  color:#a16207!important;
}
.stock-roll-number{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  animation:stockRollDown .58s cubic-bezier(.22,1,.36,1);
}
@keyframes stockRollDown{
  0%{opacity:.18;transform:translateY(-12px) rotateX(70deg);filter:blur(1px)}
  55%{opacity:1;transform:translateY(3px) rotateX(0deg);filter:blur(0)}
  100%{opacity:1;transform:translateY(0)}
}
.variant-colour-card.has-stock,
.variant-colour-card.is-in-stock{
  border-color:rgba(22,163,74,.24)!important;
  background:linear-gradient(180deg,#f0fdf4 0%,#fff 58%)!important;
}
.variant-colour-card.is-out-of-stock{
  border-color:rgba(220,38,38,.2)!important;
  background:linear-gradient(180deg,#fff1f2 0%,#fff 58%)!important;
}
.variant-colour-card.is-out-of-stock img{
  filter:saturate(.55) opacity(.78);
}
.variant-colour-card.is-checking,
.variant-colour-card.is-confirmation-required{
  border-color:rgba(161,98,7,.2)!important;
  background:linear-gradient(180deg,#fffbeb 0%,#fff 58%)!important;
}
.variant-colour-card .variant-colour-stock.has-stock,
.variant-colour-card .variant-colour-stock.is-in-stock{
  color:#15803d!important;
  background:rgba(22,163,74,.08)!important;
}
.variant-colour-card .variant-colour-stock.is-empty{
  color:#b91c1c!important;
  background:rgba(220,38,38,.08)!important;
}
.variant-colour-card .variant-colour-stock.is-checking,
.variant-colour-card .variant-colour-stock.is-confirmation-required{
  color:#a16207!important;
  background:rgba(161,98,7,.08)!important;
}
.variant-colour-card .variant-colour-stock.has-stock::before{background:#16a34a!important}
.variant-colour-card .variant-colour-stock.is-in-stock::before{background:#16a34a!important}
.variant-colour-card .variant-colour-stock.is-empty::before{background:#dc2626!important}
.variant-colour-card .variant-colour-stock.is-checking::before,
.variant-colour-card .variant-colour-stock.is-confirmation-required::before{background:#ca8a04!important}
@media(prefers-reduced-motion:reduce){
  .stock-roll-number{animation:none!important}
}

@media(max-width:1180px){
  .variant-colour-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:640px){
  html,body{max-width:100%;overflow-x:clip}
  [x-cloak]{display:none!important}
  button,a,input,select,textarea{touch-action:manipulation}
  input,select,textarea{font-size:16px!important}
  #shop-mobile-menu{max-height:100dvh;padding-bottom:calc(1rem + env(safe-area-inset-bottom));overscroll-behavior:contain}
  #shop-mobile-menu button,#shop-mobile-menu a{min-height:46px}
  nav.fixed>div:nth-child(2){gap:.65rem!important}
  nav.fixed .w-12.h-12{width:44px!important;height:44px!important}
  .shop-filter-toolbar{position:sticky!important;top:0!important;z-index:55!important}
  .shop-filter-toolbar .toolbar-primary,.shop-filter-toolbar .toolbar-meta{display:grid!important;grid-template-columns:1fr!important;gap:.65rem!important}
  .filter-toggle,.toolbar-sort{min-height:46px!important;border-radius:999px!important;font-size:.72rem!important}
  .toolbar-context strong,.filter-summary{font-size:.72rem!important;line-height:1.25!important}
  .procurement-quick-filters{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.5rem!important;overflow:visible!important}
  .procurement-quick-filters button{min-height:44px!important;white-space:normal!important;line-height:1.15!important;font-size:.62rem!important;padding:.55rem!important}
  .active-filter-chips{display:flex!important;overflow-x:auto!important;padding-bottom:.35rem!important}
  .shop-filter-panel{max-height:min(88dvh,720px)!important;border-radius:1.35rem 1.35rem 0 0!important;padding-bottom:calc(5.75rem + env(safe-area-inset-bottom))!important}
  .shop-filter-panel.is-collapsed{transform:translateY(calc(100% + 2rem))!important;pointer-events:none!important}
  .filter-panel-head{position:sticky!important;top:0!important;z-index:5!important}
  .filter-row-title,.filter-option,.filter-pill,.filter-subcat{font-size:.78rem!important;line-height:1.25!important}
  .filter-mobile-actions{position:sticky!important;bottom:0!important;margin:1rem -1rem -1rem!important;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))!important}
  .product-results-grid{grid-template-columns:1fr!important}
  .product-card{min-width:0!important}
  .product-card .aspect-square{border-radius:1.15rem!important}
  .product-card .absolute.top-8{top:.75rem!important;left:.75rem!important;right:.75rem!important}
  .product-card .absolute.bottom-8{bottom:.75rem!important;left:.75rem!important}
  .product-card-badge--red,.product-card-badge--dark,.product-card-badge--neutral{font-size:7px!important;padding:.35rem .5rem!important;letter-spacing:.08em!important}
  .procurement-card-specs{grid-template-columns:1fr 1fr!important}
  .sprint4-product-page{padding-bottom:8rem!important}
  .sprint4-main-image{min-height:260px!important;max-height:58dvh!important}
  .sprint4-procurement-strip{grid-template-columns:1fr!important}
  .variant-colour-grid{grid-template-columns:1fr 1fr!important}
  .variant-colour-card{min-height:150px!important}
  .variant-mobile-matrix{display:grid!important;gap:.75rem!important}
  .variant-table-wrap.is-matrix-wrap{display:none!important}
  .variant-mobile-size-grid{grid-template-columns:1fr!important}
  .variant-mobile-size-card{padding:.85rem!important}
  .variant-qty-control{width:100%!important;grid-template-columns:44px minmax(64px,1fr) 44px!important;border-radius:12px!important}
  .variant-qty-control button,.variant-qty-control input{min-height:44px!important;font-size:16px!important}
  .variant-table-summary{display:grid!important;grid-template-columns:1fr!important;padding:1rem!important;border-radius:1rem!important;background:#f8f9fb!important}
  .sprint4-sticky-action{position:static!important;left:auto!important;right:auto!important;bottom:auto!important}
  .pdf-modal-open-link{font-size:.58rem;padding:0 .65rem}
  .sprint5-basket-shell,.sprint5-checkout-shell,.quote-request-shell{padding-left:.85rem!important;padding-right:.85rem!important}
  .sprint5-basket-hero h1,.quote-request-hero h1{font-size:clamp(2rem,12vw,2.65rem)!important}
  .sprint5-secondary-action{width:100%;white-space:normal;text-align:center}
  .quote-document-preview{overflow:hidden!important}
  .quote-meta-grid,.quote-bill-grid,.quote-total-zone,.quote-form-grid{grid-template-columns:1fr!important}
  .quote-line-head{display:none!important}
  .quote-line-row{grid-template-columns:1fr!important;border:1px solid var(--ig-border)!important;border-radius:14px!important;margin:.7rem!important}
  .quote-form-grid input,.quote-form-grid textarea,.quote-form-grid select{font-size:16px!important;min-height:48px!important}
}

@media (min-width: 1024px) and (max-width: 1240px) {
  .ig-complete-category-menu,
  .shop-desktop-action { display: none !important; }
  .shop-menu-toggle { display: flex !important; }
  main { padding-top: 9.5rem !important; }
}

/* Product configuration workflow */
.sprint4-details-column{overflow:visible!important;padding-bottom:3rem}
.sprint4-gallery-sticky{min-width:0}
.sprint4-gallery-panel{
  border:1px solid var(--ig-line,#e7e9ee);
  border-radius:1.15rem;
  background:#fff;
  padding:.75rem;
  box-shadow:0 12px 36px rgba(16,17,20,.055);
}
.sprint4-gallery-meta{margin-bottom:.65rem!important;padding:0 .2rem}
.sprint4-gallery-rail{
  display:flex;
  gap:.6rem;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  scrollbar-color:#c9cdd3 transparent;
  padding:.1rem .1rem .45rem;
  scroll-snap-type:x proximity;
}
.sprint4-gallery-rail .sprint4-gallery-thumb{
  flex:0 0 72px;
  width:72px;
  min-height:72px;
  border-radius:.8rem!important;
  scroll-snap-align:start;
}
@media(min-width:1241px){
  .sprint4-gallery-column{align-self:stretch}
  .sprint4-gallery-sticky{
    position:sticky;
    top:10.75rem;
    z-index:10;
  }
  .sprint4-gallery-sticky .sprint4-main-image{
    height:clamp(360px,52dvh,560px);
    aspect-ratio:auto!important;
  }
}

.variant-table-wrap.is-matrix-wrap{display:block;overflow-x:auto}
.variant-mobile-matrix{display:none!important}
.variant-matrix-table{
  min-width:560px!important;
  table-layout:fixed!important;
}
.variant-matrix-table th{
  position:sticky;
  top:0;
  z-index:4;
  padding:.8rem .9rem!important;
  text-align:left!important;
}
.variant-matrix-table th:nth-child(1){width:30%}
.variant-matrix-table th:nth-child(2){width:24%}
.variant-matrix-table th:nth-child(3){width:30%}
.variant-matrix-table th:nth-child(4){width:16%}
.variant-matrix-table th:not(:first-child),
.variant-matrix-table td:not(:first-child){min-width:0!important}
.variant-matrix-table th:first-child,
.variant-matrix-table td:first-child{
  position:static!important;
  width:auto!important;
}
.variant-matrix-table td{
  padding:.75rem .9rem!important;
  background:#fff;
}
.variant-matrix-table tbody tr:nth-child(even) td{background:#fafafa}
.variant-matrix-table tbody tr:hover td{background:#fff8f8}
.variant-matrix-colour img{width:38px;height:38px}
.variant-matrix-colour span{font-size:.7rem}
.variant-matrix-table .variant-qty-control{
  width:142px;
  grid-template-columns:36px minmax(56px,1fr) 36px;
}
.variant-matrix-table .variant-qty-hint{max-width:150px;margin-top:.35rem;font-size:.62rem}
.variant-matrix-line{display:block;white-space:nowrap;font-size:.74rem!important}
#variant-quantity-matrix,#product-specifications,#product-branding-route{scroll-margin-top:11rem}

.sprint4-sticky-action{
  position:sticky!important;
  left:auto!important;
  right:auto!important;
  top:calc(100dvh - 148px)!important;
  bottom:1rem!important;
  z-index:45!important;
  margin-bottom:1rem;
  padding:.7rem!important;
}
.sprint4-sticky-action-summary{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.45rem;
  padding:0 .15rem;
}
.sprint4-sticky-action-note{
  margin-top:.4rem;
  color:#7c8491;
  font-size:.58rem;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  text-transform:uppercase;
}
.sprint4-sticky-action .cta-glow{min-height:48px;padding:.7rem!important}

.sprint4-specification-step{
  margin-top:2rem;
  border:1px solid var(--ig-line,#e7e9ee);
  border-radius:1.5rem;
  background:#fff;
  padding:clamp(1rem,2.5vw,1.5rem);
  box-shadow:0 16px 42px rgba(16,17,20,.055);
}
.sprint4-specification-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.sprint4-specification-head h3{
  margin-top:.85rem;
  color:#111;
  font-size:1.15rem;
  font-weight:900;
  line-height:1.2;
}
.sprint4-specification-head p{
  max-width:560px;
  margin-top:.4rem;
  color:#667085;
  font-size:.78rem;
  line-height:1.55;
}
.sprint4-readiness-badge{
  flex:0 0 auto;
  border:1px solid #f2cf8b;
  border-radius:999px;
  background:#fff8e8;
  color:#995c00;
  padding:.55rem .75rem;
  font-size:.65rem;
  font-weight:900;
  text-transform:uppercase;
}
.sprint4-readiness-badge.is-ready{border-color:#a7dfb9;background:#f0fdf4;color:#15803d}
.sprint4-specification-checks{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
  margin-top:1.25rem;
}
.sprint4-specification-checks>div{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  column-gap:.55rem;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  background:#fafafa;
  padding:.8rem;
}
.sprint4-specification-checks svg{grid-row:1/3;width:20px;height:20px;color:#a16207}
.sprint4-specification-checks span{color:#7c8491;font-size:.6rem;font-weight:900;text-transform:uppercase}
.sprint4-specification-checks strong{overflow-wrap:anywhere;color:#111;font-size:.75rem;line-height:1.25}
.sprint4-specification-checks>div.is-complete{border-color:#b7dfc2;background:#f3fbf5}
.sprint4-specification-checks>div.is-complete svg{color:#15803d}
.sprint4-product-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  margin-top:1rem;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  overflow:hidden;
}
.sprint4-product-facts>div{min-width:0;padding:.85rem;border-bottom:1px solid #e5e7eb}
.sprint4-product-facts>div:nth-child(odd){border-right:1px solid #e5e7eb}
.sprint4-product-facts span{display:block;color:#7c8491;font-size:.6rem;font-weight:900;text-transform:uppercase}
.sprint4-product-facts strong{display:block;margin-top:.3rem;overflow-wrap:anywhere;color:#111;font-size:.78rem;line-height:1.4}
.sprint4-specification-actions{display:flex;justify-content:flex-end;gap:.65rem;margin-top:1rem}
.sprint4-specification-actions button{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid #111;
  border-radius:.75rem;
  background:#fff;
  color:#111;
  padding:.7rem .9rem;
  font-size:.68rem;
  font-weight:900;
  text-transform:uppercase;
}
.sprint4-specification-actions button.is-primary{background:#111;color:#fff}
.sprint4-specification-actions svg{width:16px;height:16px}

@media(max-width:760px){
  .variant-table-wrap.is-matrix-wrap{display:none!important}
  .variant-mobile-matrix{display:grid!important;gap:.75rem!important}
  .sprint4-specification-head{display:grid}
  .sprint4-readiness-badge{width:max-content}
  .sprint4-specification-checks{grid-template-columns:1fr}
  .sprint4-product-facts{grid-template-columns:1fr}
  .sprint4-product-facts>div:nth-child(odd){border-right:0}
  .sprint4-specification-actions{display:grid;grid-template-columns:1fr}
  .sprint4-sticky-action{
    position:sticky!important;
    top:calc(100dvh - 116px)!important;
    bottom:.6rem!important;
    margin-left:-.25rem;
    margin-right:-.25rem;
    padding:.65rem!important;
  }
  .sprint4-sticky-action .cta-glow{min-height:48px;padding:.8rem!important}
  .sprint4-sticky-action-note{display:none}
  .sprint4-gallery-rail .sprint4-gallery-thumb{flex-basis:64px;width:64px;min-height:64px}
}
* { letter-spacing: 0 !important; }

/* =========================================================
   ABW-S12R - Izipho multipage market launch hardening
   Hybrid rendering, deterministic product configuration,
   canonical stock provenance and launch-ready hierarchy.
========================================================= */
html[data-alpine-ready="true"] .izipho-ssr-fallback { display: none !important; }
html:not([data-alpine-ready="true"]) .abw-product-app { display: none !important; }

.abw-launch-product,
.abw-ssr-catalogue {
    --abw-red: #B30000;
    --abw-ink: #171719;
    --abw-charcoal: #373435;
    --abw-muted: #69707a;
    --abw-line: #e3e6ea;
    --abw-soft: #f6f7f8;
    color: var(--abw-charcoal);
}

.abw-eyebrow {
    margin: 0;
    color: var(--abw-red, #B30000);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.abw-back-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 0;
    background: transparent;
    color: #5f6670;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    cursor: pointer;
}
.abw-back-link:hover { color: #B30000; }
.abw-back-link svg { width: 17px; height: 17px; }

.abw-ssr-product,
.abw-ssr-catalogue {
    border: 1px solid var(--abw-line, #e3e6ea);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 20px 65px rgba(17,17,19,.08);
    padding: clamp(18px, 3vw, 34px);
}
.abw-ssr-product-grid {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    margin-top: 24px;
}
.abw-ssr-product-media {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--abw-line, #e3e6ea);
    border-radius: 22px;
    background: linear-gradient(180deg, #fff, #f7f8f9);
    overflow: hidden;
}
.abw-ssr-product-media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.abw-ssr-product-copy h1,
.abw-ssr-catalogue-head h1 {
    margin: .65rem 0 .55rem;
    color: #171719;
    font-size: clamp(2rem, 5vw, 4.3rem);
    line-height: .98;
    letter-spacing: -.06em;
    font-weight: 950;
}
.abw-product-code { margin: 0; color: #848b95; font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.abw-ssr-product-copy > p:not(.abw-eyebrow):not(.abw-product-code) { max-width: 58rem; color: #646b74; line-height: 1.7; }
.abw-ssr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0; }
.abw-ssr-facts span { border: 1px solid var(--abw-line); border-radius: 14px; background: #f8f9fa; padding: 14px; }
.abw-ssr-facts small { display: block; color: #858b94; font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.abw-ssr-facts strong { display: block; margin-top: 4px; color: #171719; font-size: 1.05rem; font-weight: 950; }
.abw-enhancement-note { border-left: 3px solid #B30000; padding-left: 14px; font-size: .86rem; }

.abw-ssr-catalogue-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr); gap: 30px; align-items: end; margin-bottom: 26px; }
.abw-ssr-catalogue-head h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
.abw-ssr-catalogue-head p { margin: .5rem 0 0; color: #69707a; }
.abw-ssr-search label { display: block; margin-bottom: 7px; color: #69707a; font-size: .65rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.abw-ssr-search > div { display: grid; grid-template-columns: 1fr auto; overflow: hidden; border: 1px solid #dce0e4; border-radius: 14px; background: #fff; }
.abw-ssr-search input { min-width: 0; border: 0 !important; box-shadow: none !important; padding: 0 16px !important; font-size: .9rem !important; text-transform: none !important; letter-spacing: normal !important; }
.abw-ssr-search button { border: 0; background: #171719; color: #fff; padding: 0 22px; font-weight: 900; }
.abw-ssr-product-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 18px; }
.abw-ssr-product-card { overflow: hidden; border: 1px solid #e3e6ea; border-radius: 20px; background: #fff; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.abw-ssr-product-card:hover { transform: translateY(-3px); border-color: rgba(179,0,0,.26); box-shadow: 0 18px 42px rgba(17,17,19,.09); }
.abw-ssr-card-image { aspect-ratio: 1; background: #f7f8f9; }
.abw-ssr-card-image img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.abw-ssr-card-copy { padding: 16px; }
.abw-ssr-card-copy > small { color: #8b929b; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.abw-ssr-card-copy h2 { min-height: 2.7em; margin: 6px 0 12px; color: #171719; font-size: 1rem; line-height: 1.3; font-weight: 900; }
.abw-ssr-card-signals { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.abw-ssr-card-signals span { border: 1px solid #e3e6ea; border-radius: 999px; background: #f8f9fa; padding: 5px 8px; color: #69707a; font-size: .55rem; font-weight: 900; text-transform: uppercase; }
.abw-ssr-card-copy > strong { color: #B30000; font-size: .68rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.abw-ssr-empty { padding: 70px 20px; text-align: center; }
.abw-ssr-empty h2 { color: #171719; font-size: 1.6rem; font-weight: 950; }
.abw-ssr-empty a { display: inline-flex; margin-top: 12px; border-radius: 999px; background: #B30000; color: #fff; padding: 12px 20px; font-weight: 900; }

.abw-product-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.abw-live-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(179,0,0,.17); border-radius: 999px; background: rgba(179,0,0,.055); color: #B30000; padding: 8px 12px; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.abw-live-badge svg { width: 15px; height: 15px; }
.abw-product-command-grid { display: grid; grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 54px); align-items: start; }
.abw-product-gallery,
.abw-quote-summary { position: sticky; top: 116px; }
.abw-product-image-frame { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid #e3e6ea; border-radius: 24px; background: linear-gradient(180deg, #fff, #f7f8fa); box-shadow: 0 18px 54px rgba(17,17,19,.08); }
.abw-product-image-frame > img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.abw-image-state { position: absolute; inset: auto 16px 16px; border-radius: 999px; background: rgba(17,17,19,.82); color: #fff; padding: 8px 12px; font-size: .62rem; font-weight: 900; text-align: center; }
.abw-image-state.is-unavailable { background: #B30000; }
.abw-gallery-arrows { position: absolute; inset-inline: 12px; top: 50%; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.abw-gallery-arrows button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #dce0e4; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 10px 26px rgba(17,17,19,.12); pointer-events: auto; }
.abw-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 10px; }
.abw-gallery-thumbs button { aspect-ratio: 1; overflow: hidden; border: 1px solid #e3e6ea; border-radius: 10px; background: #fff; }
.abw-gallery-thumbs button.is-active { border-color: #B30000; box-shadow: 0 0 0 3px rgba(179,0,0,.09); }
.abw-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.abw-stock-provenance { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 12px; border: 1px solid #e3e6ea; border-radius: 17px; background: #fff; padding: 15px; }
.abw-stock-provenance > div:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #effaf4; color: #16834b; }
.abw-stock-provenance small { display: block; color: #858c95; font-size: .57rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.abw-stock-provenance strong { display: block; margin-top: 2px; color: #171719; font-size: .9rem; font-weight: 950; }
.abw-stock-provenance p { margin: 4px 0 0; color: #69707a; font-size: .68rem; line-height: 1.4; }
.abw-stock-provenance.is-confirmation-required > div:first-child,
.abw-stock-provenance.is-out-of-stock > div:first-child { background: #fff1f1; color: #B30000; }

.abw-product-builder { min-width: 0; }
.abw-product-intro { border: 1px solid #e3e6ea; border-radius: 24px; background: #fff; padding: clamp(20px, 3vw, 32px); box-shadow: 0 16px 48px rgba(17,17,19,.055); }
.abw-product-intro h1 { margin: .6rem 0 .45rem; color: #171719; font-size: clamp(2rem, 4vw, 3.7rem); line-height: .98; letter-spacing: -.06em; font-weight: 950; }
.abw-product-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0; }
.abw-product-facts span { min-width: 0; border: 1px solid #e3e6ea; border-radius: 13px; background: #f8f9fa; padding: 11px; }
.abw-product-facts small { display: block; color: #858c95; font-size: .54rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.abw-product-facts strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #171719; font-size: .75rem; line-height: 1.25; font-weight: 950; }
.abw-product-description { margin-top: 12px; }
.abw-config-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 14px 0; }
.abw-config-rail span { min-height: 42px; display: flex; align-items: center; gap: 7px; border: 1px solid #e3e6ea; border-radius: 11px; background: #fff; padding: 0 10px; color: #7b828b; font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.abw-config-rail b { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 999px; background: #eef0f2; color: #69707a; }
.abw-config-rail span.is-complete { border-color: rgba(22,131,75,.22); background: #f4fbf7; color: #137143; }
.abw-config-rail span.is-complete b { background: #16834b; color: #fff; }
.abw-config-step { margin-top: 14px; border: 1px solid #e3e6ea; border-radius: 24px; background: #fff; padding: clamp(18px, 2.5vw, 27px); box-shadow: 0 14px 42px rgba(17,17,19,.045); }
.abw-step-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.abw-step-heading > b { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 999px; background: #B30000; color: #fff; font-size: .78rem; }
.abw-step-heading h2 { margin: 0; color: #171719; font-size: 1.15rem; font-weight: 950; letter-spacing: -.02em; }
.abw-step-heading p { margin: 3px 0 0; color: #69707a; font-size: .78rem; line-height: 1.45; }
.abw-colour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
.abw-colour-card { min-height: 148px; display: grid; justify-items: center; align-content: center; gap: 7px; border: 1px solid #e3e6ea; border-radius: 16px; background: linear-gradient(180deg, #fff, #f8f9fa); padding: 10px; transition: .18s ease; }
.abw-colour-card:hover { transform: translateY(-2px); border-color: rgba(179,0,0,.3); }
.abw-colour-card.is-active { border-color: #B30000; box-shadow: 0 0 0 3px rgba(179,0,0,.09); }
.abw-colour-card img { width: 66px; height: 66px; object-fit: contain; }
.abw-colour-card strong { color: #171719; font-size: .68rem; font-weight: 950; text-align: center; }
.abw-colour-card small { color: #7c838c; font-size: .58rem; font-weight: 850; text-align: center; }
.abw-empty-prompt { margin-top: 12px; border: 1px dashed #d9dde1; border-radius: 14px; background: #f8f9fa; padding: 18px; color: #69707a; font-size: .78rem; text-align: center; }
.abw-variant-row-list { display: grid; gap: 8px; margin-top: 15px; }
.abw-variant-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, .72fr) auto minmax(120px, .65fr); gap: 12px; align-items: center; border: 1px solid #e3e6ea; border-radius: 14px; padding: 11px 13px; }
.abw-variant-identity { min-width: 0; }
.abw-variant-identity strong { display: block; color: #171719; font-size: .8rem; font-weight: 950; }
.abw-variant-identity span { display: inline-block; margin-top: 2px; color: #B30000; font-size: .67rem; font-weight: 900; }
.abw-variant-identity small { display: block; margin-top: 3px; color: #7a818a; font-size: .61rem; }
.abw-step-summary { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: center; margin-top: 14px; border-radius: 14px; background: #171719; color: #fff; padding: 13px 15px; }
.abw-step-summary span { color: rgba(255,255,255,.58); font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.abw-step-summary strong { font-size: .8rem; font-weight: 950; }

.abw-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.abw-choice-grid button { min-height: 116px; display: grid; align-content: center; justify-items: start; gap: 5px; border: 1px solid #e3e6ea; border-radius: 16px; background: #fff; padding: 15px; text-align: left; }
.abw-choice-grid button:hover { border-color: rgba(179,0,0,.28); }
.abw-choice-grid button.is-active { border-color: #B30000; background: #fff8f8; box-shadow: 0 0 0 3px rgba(179,0,0,.08); }
.abw-choice-grid svg { width: 20px; height: 20px; color: #B30000; }
.abw-choice-grid strong { color: #171719; font-size: .82rem; font-weight: 950; }
.abw-choice-grid span { color: #727983; font-size: .67rem; line-height: 1.35; }
.abw-branding-workspace { margin-top: 16px; }
.abw-branding-position-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; }
.abw-branding-position-grid button { min-height: 116px; display: grid; align-content: center; justify-items: start; gap: 5px; border: 1px solid #e3e6ea; border-radius: 15px; background: #f8f9fa; padding: 13px; text-align: left; }
.abw-branding-position-grid button.is-active { border-color: #171719; background: #171719; color: #fff; }
.abw-branding-position-grid svg { width: 18px; height: 18px; color: #B30000; }
.abw-branding-position-grid button.is-active svg { color: #fff; }
.abw-branding-position-grid strong { font-size: .75rem; font-weight: 950; }
.abw-branding-position-grid span,
.abw-branding-position-grid small { color: #747b84; font-size: .6rem; }
.abw-branding-position-grid button.is-active span,
.abw-branding-position-grid button.is-active small { color: rgba(255,255,255,.68); }
.abw-branding-selections { display: grid; gap: 9px; margin-top: 12px; }
.abw-branding-selection { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(170px, 1.2fr) 110px auto auto; gap: 9px; align-items: end; border: 1px solid #e3e6ea; border-radius: 15px; padding: 13px; }
.abw-branding-selection small,
.abw-branding-selection label > span { display: block; margin-bottom: 5px; color: #777e87; font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.abw-branding-selection strong { color: #171719; font-size: .78rem; font-weight: 950; }
.abw-branding-selection select,
.abw-branding-selection input { width: 100%; min-height: 40px !important; }
.abw-pricing-state { align-self: center; }
.abw-pricing-state span { display: inline-flex; border-radius: 999px; background: #edf9f2; color: #137143; padding: 7px 9px; font-size: .57rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.abw-pricing-state span.is-review { background: #fff4e5; color: #9b5c00; }
.abw-remove-button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #B30000; padding: 9px; font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.abw-remove-button svg { width: 14px; height: 14px; }
.abw-manual-branding { display: grid; grid-template-columns: .45fr 1fr; gap: 10px; margin-top: 16px; }
.abw-manual-branding label { display: block; }
.abw-manual-branding label.is-wide { grid-column: 1 / -1; }
.abw-manual-branding span { display: block; margin-bottom: 6px; color: #69707a; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.abw-manual-branding input,
.abw-manual-branding textarea { width: 100%; border: 1px solid #dfe3e7 !important; border-radius: 13px !important; background: #fff !important; padding: 11px 13px !important; font-size: .82rem !important; text-transform: none !important; letter-spacing: normal !important; }
.abw-guide-library { margin-top: 16px; border: 1px solid #e3e6ea; border-radius: 16px; background: #f8f9fa; padding: 15px; }
.abw-guide-heading { display: flex; align-items: flex-start; gap: 10px; }
.abw-guide-heading svg { color: #B30000; }
.abw-guide-heading strong { display: block; color: #171719; font-size: .76rem; font-weight: 950; }
.abw-guide-heading span { display: block; margin-top: 2px; color: #727983; font-size: .65rem; }
.abw-guide-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.abw-guide-links button,
.abw-guide-links a { display: inline-flex; align-items: center; min-height: 36px; border: 1px solid #dce0e4; border-radius: 999px; background: #fff; color: #171719; padding: 0 12px; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.abw-guide-links button:hover,
.abw-guide-links a:hover { border-color: #B30000; color: #B30000; }
.abw-review-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.abw-review-grid span { border: 1px solid #e3e6ea; border-radius: 13px; background: #f8f9fa; padding: 12px; }
.abw-review-grid small { display: block; color: #7a818a; font-size: .55rem; font-weight: 900; text-transform: uppercase; }
.abw-review-grid strong { display: block; margin-top: 4px; color: #171719; font-size: .77rem; font-weight: 950; }
.abw-stock-ack { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; border: 1px solid #f1d49a; border-radius: 13px; background: #fff8e8; padding: 13px; color: #845400; font-size: .72rem; font-weight: 750; line-height: 1.45; }
.abw-stock-ack input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; }
.abw-validation-panel { margin-top: 12px; border: 1px solid rgba(179,0,0,.24); border-radius: 13px; background: #fff3f3; color: #7f0000; padding: 13px; }
.abw-validation-panel strong { display: block; font-size: .76rem; font-weight: 950; }
.abw-validation-panel ul { margin: 7px 0 0 17px; font-size: .7rem; line-height: 1.55; list-style: disc; }

.abw-quote-summary { overflow: hidden; border: 1px solid #e3e6ea; border-radius: 22px; background: #fff; padding: 19px; box-shadow: 0 20px 62px rgba(17,17,19,.10); }
.abw-quote-summary h2 { margin: 7px 0 15px; color: #171719; font-size: 1.12rem; line-height: 1.25; font-weight: 950; }
.abw-quote-summary dl { margin: 0; }
.abw-quote-summary dl div { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #edf0f2; padding: 10px 0; }
.abw-quote-summary dt { color: #727983; font-size: .65rem; font-weight: 850; }
.abw-quote-summary dd { margin: 0; color: #171719; font-size: .72rem; font-weight: 950; text-align: right; }
.abw-quote-total { display: grid; gap: 3px; margin: 12px -19px 0; background: #171719; color: #fff; padding: 16px 19px; }
.abw-quote-total span { color: rgba(255,255,255,.58); font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.abw-quote-total strong { font-size: 1.55rem; font-weight: 950; }
.abw-summary-status { margin: 12px 0 0; border-radius: 11px; background: #fff4e6; color: #945a00; padding: 10px; font-size: .66rem; font-weight: 850; line-height: 1.35; }
.abw-summary-status.is-ready { background: #edf9f2; color: #137143; }
.abw-primary-action { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; border: 0; border-radius: 13px; background: #B30000; color: #fff; padding: 0 13px; font-size: .66rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 15px 34px rgba(179,0,0,.20); }
.abw-primary-action:disabled { background: #c8ccd1; color: #fff; box-shadow: none; cursor: not-allowed; }
.abw-primary-action svg { width: 17px; height: 17px; }
.abw-summary-note { margin: 10px 0 0; color: #7a818a; font-size: .62rem; line-height: 1.45; }

@media (max-width: 1180px) {
    .abw-product-command-grid { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
    .abw-quote-summary { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
    .abw-quote-summary h2, .abw-quote-summary .abw-eyebrow { grid-column: 1 / -1; }
    .abw-quote-total { margin: 0; border-radius: 14px; }
    .abw-summary-status, .abw-primary-action, .abw-summary-note { grid-column: 2; }
    .abw-quote-summary dl { grid-row: span 3; }
}
@media (max-width: 900px) {
    .abw-product-command-grid { grid-template-columns: 1fr; }
    .abw-product-gallery { position: static; }
    .abw-product-image-frame { max-width: 620px; margin-inline: auto; }
    .abw-ssr-product-grid, .abw-ssr-catalogue-head { grid-template-columns: 1fr; }
    .abw-product-facts, .abw-review-grid { grid-template-columns: 1fr 1fr; }
    .abw-branding-selection { grid-template-columns: 1fr 1fr; }
    .abw-pricing-state, .abw-remove-button { align-self: center; }
}
@media (max-width: 640px) {
    .abw-launch-product { padding-top: 7.5rem !important; }
    .abw-ssr-product, .abw-ssr-catalogue { border-radius: 20px; }
    .abw-ssr-facts, .abw-product-facts, .abw-review-grid { grid-template-columns: 1fr 1fr; }
    .abw-ssr-product-grid-list { grid-template-columns: 1fr; }
    .abw-product-topbar { align-items: flex-start; flex-direction: column; }
    .abw-config-rail { display: flex; overflow-x: auto; padding-bottom: 4px; }
    .abw-config-rail span { min-width: 105px; flex: 0 0 auto; }
    .abw-choice-grid, .abw-choice-grid.is-artwork { grid-template-columns: 1fr; }
    .abw-colour-grid { grid-template-columns: 1fr 1fr; }
    .abw-variant-row { grid-template-columns: 1fr auto; }
    .abw-variant-row .variant-qty-hint { grid-column: 1 / -1; }
    .abw-step-summary { grid-template-columns: 1fr auto; }
    .abw-branding-selection, .abw-manual-branding { grid-template-columns: 1fr; }
    .abw-manual-branding label.is-wide { grid-column: auto; }
    .abw-quote-summary { display: block; }
    .abw-quote-total { margin: 12px -19px 0; border-radius: 0; }
    .abw-primary-action { position: sticky; bottom: 10px; z-index: 10; }
    .abw-ssr-search > div { grid-template-columns: 1fr; }
    .abw-ssr-search button { min-height: 46px; }
}

/* ABW-S12R launch hierarchy: products and buying controls reach the first viewport sooner. */
html[data-alpine-ready="true"] [x-show="view === 'catalog'"] > header {
    margin: .9rem 0 1rem !important;
    padding: 1rem 1.15rem !important;
    border-radius: 16px !important;
}
html[data-alpine-ready="true"] [x-show="view === 'catalog'"] > header p {
    margin-top: .35rem !important;
    max-width: 760px !important;
}
html[data-alpine-ready="true"] .shop-journey-rail,
html[data-alpine-ready="true"] .buyer-confidence-strip,
html[data-alpine-ready="true"] .product-card-guidance {
    display: none !important;
}
html[data-alpine-ready="true"] .shop-filter-toolbar {
    margin-bottom: 14px;
}
html[data-alpine-ready="true"] .procurement-quick-filters {
    margin: 0 0 14px;
}
html[data-alpine-ready="true"] .product-results-grid {
    gap: 1.25rem;
}
html[data-alpine-ready="true"] .product-card {
    border: 1px solid var(--ig-line, #e3e6ea);
    border-radius: 18px;
    background: #fff;
    padding: .65rem;
    box-shadow: 0 10px 28px rgba(17,17,19,.055);
}
html[data-alpine-ready="true"] .product-card .img-placeholder {
    border-radius: 14px !important;
    box-shadow: none !important;
}
html[data-alpine-ready="true"] .product-card .mt-8 {
    margin-top: 1rem !important;
}
html[data-alpine-ready="true"] .product-card h3 {
    min-height: 2.45em;
    font-size: .98rem !important;
    line-height: 1.24 !important;
}
html[data-alpine-ready="true"] .product-card-signals {
    margin-top: 10px;
}
html[data-alpine-ready="true"] .procurement-card-specs {
    margin-top: .7rem;
}
@media (max-width: 767px) {
    html[data-alpine-ready="true"] [x-show="view === 'catalog'"] > header {
        margin-top: .5rem !important;
        padding: .9rem !important;
    }
    html[data-alpine-ready="true"] .product-results-grid {
        gap: .85rem;
    }
}


/* =========================================================
   ABW-S12S - two-column product workspace and price parity
========================================================= */
.abw-ssr-price-panel,
.abw-product-price-panel {
    display: grid;
    grid-template-columns: minmax(170px, .72fr) minmax(0, 1.28fr);
    gap: 16px;
    align-items: center;
    margin: 14px 0 16px;
    border: 1px solid rgba(179, 0, 0, .16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(179, 0, 0, .08), transparent 18rem),
        linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    padding: 16px 18px;
    box-shadow: 0 12px 32px rgba(17,17,19,.055);
}
.abw-ssr-price-panel small,
.abw-product-price-value small {
    display: block;
    color: #B30000;
    font-size: .6rem;
    font-weight: 950;
    text-transform: uppercase;
}
.abw-ssr-price-panel strong,
.abw-product-price-value strong {
    display: block;
    margin-top: 3px;
    color: #171719;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    font-weight: 950;
    line-height: 1;
}
.abw-ssr-price-panel span,
.abw-product-price-value span {
    display: block;
    margin-top: 6px;
    color: #6e7580;
    font-size: .68rem;
    line-height: 1.42;
}
.abw-product-price-panel.is-review { border-color: #e3e6ea; }
.abw-product-price-explainer {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-left: 1px solid #e3e6ea;
    padding-left: 16px;
}
.abw-product-price-explainer > svg {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(179,0,0,.07);
    color: #B30000;
    padding: 7px;
}
.abw-product-price-explainer p { margin: 0; }
.abw-product-price-explainer strong,
.abw-product-price-explainer span { display: block; }
.abw-product-price-explainer strong { color: #171719; font-size: .7rem; font-weight: 950; }
.abw-product-price-explainer span { margin-top: 3px; color: #737a84; font-size: .64rem; line-height: 1.45; }

.abw-product-gallery { position: sticky; top: 7.25rem; }
.abw-product-builder { min-width: 0; }
.abw-quote-summary {
    position: sticky;
    top: 6.25rem;
    z-index: 18;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
    gap: 10px 18px;
    align-items: center;
    margin: 18px 0;
    border-color: rgba(179,0,0,.16);
    border-radius: 18px;
    padding: 15px 16px;
    box-shadow: 0 18px 50px rgba(17,17,19,.12);
}
.abw-quote-summary > .abw-eyebrow,
.abw-quote-summary > h2 { grid-column: 1; }
.abw-quote-summary > .abw-eyebrow { align-self: end; }
.abw-quote-summary h2 {
    margin: -5px 0 2px;
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.abw-quote-summary dl {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #edf0f2;
    border-radius: 12px;
    background: #edf0f2;
}
.abw-quote-summary dl div {
    display: grid;
    align-content: center;
    gap: 3px;
    min-height: 54px;
    border: 0;
    background: #fff;
    padding: 8px 9px;
}
.abw-quote-summary dt { font-size: .53rem; text-transform: uppercase; }
.abw-quote-summary dd { font-size: .66rem; text-align: left; overflow-wrap: anywhere; }
.abw-quote-total {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    margin: 0;
    border-radius: 14px;
    padding: 14px;
}
.abw-quote-total strong { font-size: 1.28rem; }
.abw-summary-status { grid-column: 1; margin: 0; }
.abw-primary-action { grid-column: 2; margin: 0; }
.abw-summary-note { grid-column: 1 / -1; margin: 0; }

.abw-variant-unit-price { min-width: 0; }
.abw-variant-unit-price small,
.abw-variant-unit-price span { display: block; color: #777e87; font-size: .56rem; font-weight: 850; line-height: 1.35; }
.abw-variant-unit-price small { text-transform: uppercase; }
.abw-variant-unit-price strong { display: block; margin: 3px 0; color: #171719; font-size: .8rem; font-weight: 950; }

@media (max-width: 1240px) {
    .abw-product-command-grid { grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: 26px; }
    .abw-quote-summary { position: static; grid-template-columns: 1fr; }
    .abw-quote-summary > .abw-eyebrow,
    .abw-quote-summary > h2,
    .abw-quote-summary dl,
    .abw-quote-total,
    .abw-summary-status,
    .abw-primary-action,
    .abw-summary-note { grid-column: 1; grid-row: auto; }
    .abw-quote-summary dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .abw-variant-row { grid-template-columns: minmax(145px, 1fr) minmax(125px, .7fr) auto; }
    .abw-variant-row .variant-qty-hint { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
    .abw-product-command-grid { grid-template-columns: 1fr; }
    .abw-product-gallery { position: static; }
    .abw-product-price-panel,
    .abw-ssr-price-panel { grid-template-columns: 1fr; }
    .abw-product-price-explainer { border-left: 0; border-top: 1px solid #e3e6ea; padding: 13px 0 0; }
}
@media (max-width: 700px) {
    .abw-quote-summary dl { grid-template-columns: 1fr 1fr; }
    .abw-variant-row { grid-template-columns: 1fr auto; }
    .abw-variant-unit-price { grid-column: 1; }
    .abw-variant-row .variant-qty-control { grid-column: 2; grid-row: 1 / span 2; }
    .abw-variant-row .variant-qty-hint { grid-column: 1 / -1; }
    .abw-product-price-value strong { font-size: 1.55rem; }
}

/* =====================================================
   ABW-S12U — authoritative Izipho media and product loader
===================================================== */
.catalog-loader__mark {
    background: #fff !important;
    border: 1px solid rgba(223, 227, 231, .95);
    border-radius: 24px;
    padding: 12px;
    box-shadow: 0 16px 38px rgba(16, 17, 20, .10) !important;
}
.catalog-loader__mark img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
.catalog-loader__preview-label {
    margin: 20px 0 10px;
    color: #666C73;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.catalog-loader__skeleton {
    background: #fff !important;
    border-color: #DFE3E7 !important;
    box-shadow: 0 10px 26px rgba(16, 17, 20, .06);
}
.catalog-loader__skeleton img {
    opacity: 1 !important;
    transform: none !important;
    object-fit: contain !important;
    padding: 8px !important;
    background: #fff;
}
.catalog-loader__skeleton::after {
    opacity: .34;
}
.abw-ssr-card-image img,
.product-card .img-placeholder img,
.product-card img,
.variant-colour-card img,
.variant-mini-chip img {
    object-fit: contain !important;
    background: #fff;
}
nav.fixed img[alt="Izipho Gifts"],
.site-footer .brand-mark img {
    object-fit: contain !important;
}
@media (max-width: 640px) {
    .catalog-loader__skeletons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}