/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.3.4_@babel+core@7.29.7_@opentelemetry+api@1.9.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!../../node_modules/.pnpm/next@15.3.4_@babel+core@7.29.7_@opentelemetry+api@1.9.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!../../node_modules/.pnpm/next@15.3.4_@babel+core@7.29.7_@opentelemetry+api@1.9.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/font/google/target.css?{"path":"app/[locale]/layout.tsx","import":"IBM_Plex_Sans_Arabic","arguments":[{"subsets":["arabic","latin"],"weight":["300","400","500","600","700"],"variable":"--font-ibm-plex-sans-arabic","display":"swap","preload":false}],"variableName":"ibmPlexSansArabic"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/eeb85617593e17f4-s.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/b45a9d9d1da72c1b-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/5d0f73acffecf806-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/a232eff1671e69bb-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/9da48a48bf6500f8-s.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/9efac92d680e57b6-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/1323037a3e4ea9e8-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/17efc7caebbb6a73-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/f022b1629605b85c-s.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/18d6d756b83deaa1-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/101eb3c626c8a0e0-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b729ad8c86c7d641-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/e4efb0298547fad0-s.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c3d28d0a4af5320e-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b096b166d47a2e73-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/79d9077e4fd7eddc-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/fb66eb17bf011c3b-s.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/3abc2a74bccacda0-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/20e170e88a69dd27-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/99dc19e540dbb87b-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'IBM Plex Sans Arabic Fallback';src: local("Arial");ascent-override: 107.25%;descent-override: 41.02%;line-gap-override: 0.00%;size-adjust: 101.17%
}.__className_3f4575 {font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans Arabic Fallback';font-style: normal
}.__variable_3f4575 {--font-ibm-plex-sans-arabic: 'IBM Plex Sans Arabic', 'IBM Plex Sans Arabic Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.3.4_@babel+core@7.29.7_@opentelemetry+api@1.9.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.3.4_@babel+core@7.29.7_@opentelemetry+api@1.9.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!../../packages/config/design-tokens.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   KEES V2 — Shared Design Tokens
   ============================================================

   The single source of truth for colour, spacing, radius, type
   scale, shadow and layout values across web, admin and merchant.

   Values are lifted verbatim from the storefront's globals.css,
   which was the only app with a real token system (Resume-16H).
   Nothing here is newly invented — this file makes the existing
   storefront palette shareable rather than proposing a new one.

   ── How to consume ────────────────────────────────────────────

   Add this as the FIRST statement of an app's globals.css (CSS
   requires @import before other rules):

       @import "@kees/config/design-tokens.css";

   `@kees/config` is already a dependency of web, admin and
   merchant, so no new package and no lockfile change is involved.

   Tailwind v4 (admin): import this alongside `@import "tailwindcss"`.
   The two do not collide — Tailwind's generated custom properties
   are `--color-*`, these are `--kees-*`. To drive Tailwind
   utilities from these values, reference them inside `@theme`:

       @theme { --color-brand: var(--kees-primary); }

   ── What is deliberately NOT here ─────────────────────────────

   `--font-primary`. Each app injects its own font through
   next/font in its layout, so the variable it points at is
   app-local wiring rather than a shared design value. Each app
   keeps defining it.

   ── Changing a value ──────────────────────────────────────────

   Change it here, not in an app. An app-level override is a
   deliberate exception and should say why in a comment.
   ============================================================ */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --kees-primary:         #7C3AED;
  --kees-primary-hover:   #6D28D9;
  --kees-primary-active:  #5B21B6;
  --kees-primary-light:   #EDE9FE;
  --kees-primary-dark:    #4C1D95;
  --kees-on-primary:      #FFFFFF;

  --kees-accent:          #16A34A;
  --kees-accent-hover:    #15803D;
  --kees-accent-light:    #DCFCE7;
  --kees-on-accent:       #FFFFFF;

  /* ── Semantic / status ─────────────────────────────────── */
  /* Also the palette behind the badge and alert primitives, so a
     status colour means the same thing in every app. */
  --kees-error:           #DC2626;
  --kees-error-bg:        #FEF2F2;
  --kees-error-border:    #FECACA;
  --kees-success:         #16A34A;
  --kees-success-bg:      #F0FDF4;
  --kees-success-border:  #BBF7D0;
  --kees-warning:         #D97706;
  --kees-warning-bg:      #FFFBEB;
  --kees-star:            #F59E0B;

  /* ── Surface ───────────────────────────────────────────── */
  --kees-bg:              #FAF5FF;
  --kees-surface:         #FFFFFF;
  --kees-muted:           #F3F0FF;
  --kees-muted-alt:       #F1F5F9;

  /* ── Border ────────────────────────────────────────────── */
  --kees-border:          #DDD6FE;
  --kees-border-subtle:   #E5E7EB;

  /* ── Text ──────────────────────────────────────────────── */
  --kees-text:            #1E1B4B;
  --kees-text-2:          #374151;
  --kees-text-3:          #6B7280;
  --kees-text-4:          #9CA3AF;

  /* ── Type scale ────────────────────────────────────────── */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.25rem;
  --t-2xl:  1.5rem;
  --t-3xl:  1.875rem;
  --t-4xl:  2.25rem;

  /* ── Spacing (4pt grid) ────────────────────────────────── */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;

  /* ── Radius ────────────────────────────────────────────── */
  --r-sm:   0.25rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-2xl:  1.25rem;
  --r-full: 9999px;

  /* ── Shadow ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 8px -1px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 20px -3px rgba(0,0,0,0.08);
  --shadow-brand: 0 4px 20px rgba(124,58,237,0.18);

  /* ── Motion ────────────────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --ease-out: ease-out;

  /* ── Layout ────────────────────────────────────────────── */
  --max-w: 1200px;
  --nav-h: 64px;

  /* ── Z-index ───────────────────────────────────────────── */
  --z-nav:   100;
  --z-modal: 200;
  --z-toast: 300;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.3.4_@babel+core@7.29.7_@opentelemetry+api@1.9.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.3.4_@babel+core@7.29.7_@opentelemetry+api@1.9.1_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   KEES Design System — globals.css
   Design tokens, base styles, and reusable component classes.
   ============================================================ */

/* ─── Design Tokens ────────────────────────────────────────── */
:root {
  /* Every design value now lives in @kees/config/design-tokens.css, imported
     above — this block previously duplicated all of them (Resume-16H.1).
     Only app-local wiring stays here.

     --font-primary points at the variable next/font injects in this app's
     layout.tsx, so it is not a shared design value. */
  --font-primary: var(--font-ibm-plex-sans-arabic), system-ui, sans-serif;

  /* ══════════════════════════════════════════════════════════════
     Storefront visual direction — Resume-18D

     The shared token file is **purple** (#7C3AED on #FAF5FF) and is
     imported by the storefront, the merchant dashboard and the admin
     panel alike. The storefront now takes a deep-blue marketplace
     identity, and editing the shared file would have dragged both
     back-office apps along with it.

     So these are overrides, declared after the import and scoped to
     this app. `packages/config/design-tokens.css` is untouched, admin
     and merchant render exactly as before, and reverting this
     direction means deleting one block.

     Every name below already exists, so no existing rule needed
     rewriting to pick up the new palette — the whole storefront
     re-skins from here.
     ══════════════════════════════════════════════════════════════ */

  /* ── Brand: deep navy for trust, mid-blue for action ──────── */
  --kees-primary:         #1D3557;  /* nav, headings, primary buttons */
  --kees-primary-hover:   #16293F;
  --kees-primary-active:  #101D2C;
  --kees-primary-light:   #E8F1F5;  /* icon-button hover wash */
  --kees-primary-dark:    #14283C;
  --kees-on-primary:      #FFFFFF;  /* 11.9:1 on primary */

  /* Secondary action colour. White on #457B9D is 4.6:1 — AA for body
     text, so it is safe for filled buttons and not only large type. */
  --kees-accent:          #457B9D;
  --kees-accent-hover:    #3A6884;
  --kees-accent-light:    #E8F1F5;
  --kees-on-accent:       #FFFFFF;

  /* ── Promo ────────────────────────────────────────────────────
     Deliberately NOT --kees-error. A sale badge and a failed payment
     are different messages and must stay separately themeable; error
     keeps the shared red so a warning means the same thing in every
     app. --kees-promo is only ever a badge background behind bold
     text (3.9:1, which clears the 3:1 bar for bold/large), and
     --kees-promo-dark is the variant for promo text on a light
     surface. */
  --kees-promo:           #E63946;
  --kees-promo-dark:      #C1121F;
  --kees-promo-light:     #FDECEE;

  /* ── Surface ──────────────────────────────────────────────────
     A tinted page with white cards is what makes cards read as
     objects sitting on a surface; pure-white-on-near-white leaves
     them flat.

     Resume-18D.1 moved the tint from the palette's mint #F1FAEE to a
     neutral grey. The mint was faithful to the supplied palette but
     read as a colour rather than as a surface — a page-wide green cast
     under navy type, which is the opposite of calm. Grey lets the blue
     carry the identity on its own and is what "premium" reads as at
     this size: the surface should be the quietest thing on the page.

     #A8DADC survives as an accent (the "New" badge), so the palette
     keeps its soft blue — it just no longer paints the whole page. */
  --kees-bg:              #F6F7F9;
  --kees-surface:         #FFFFFF;
  --kees-muted:           #F1F3F6;
  --kees-soft:            #A8DADC;  /* accent surface highlight */

  /* ── Border ───────────────────────────────────────────────── */
  --kees-border:          #E5E7EB;
  --kees-border-subtle:   #EEF0F3;

  /* ── Text: the brand navy carries the type, too ───────────── */
  --kees-text:            #1D3557;
  --kees-text-2:          #33506B;
  --kees-text-3:          #5A7285;  /* 5.4:1 on white */
  --kees-text-4:          #8CA0AE;  /* de-emphasised meta only */

  /* ── Depth: blue-tinted, since a grey shadow on a tinted page
        reads as dirt rather than as depth ─────────────────────── */
  --shadow-xs:            0 1px 2px rgba(29, 53, 87, 0.06);
  --shadow-lg:            0 10px 24px -6px rgba(29, 53, 87, 0.14);
  --shadow-brand:         0 4px 20px rgba(69, 123, 157, 0.22);
  --shadow-card:          0 1px 3px rgba(29, 53, 87, 0.06), 0 1px 2px rgba(29, 53, 87, 0.04);
  --shadow-card-hover:    0 14px 30px -10px rgba(29, 53, 87, 0.20);

  /* ── Motion ───────────────────────────────────────────────────
     The shared token was `--ease-out: ease-out` — the CSS built-in,
     which is too weak to read as intentional. These are the stronger
     curves from the design-engineering reference, and because every
     existing transition already goes through the token, the whole
     storefront gains them at once.

     --dur-fast lands in the 100–160ms band that reference recommends
     for press and hover feedback. */
  --ease-out:             cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:          cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:             140ms;
  --dur-base:            220ms;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base ───────────────────────────────────────────────────── */
html {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

body {
  min-height: 100dvh;
  background: var(--kees-bg);
  color: var(--kees-text);
  line-height: 1.6;
}

ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

[dir='rtl'] body { text-align: right; }
[dir='ltr'] body { text-align: left; }

:focus-visible {
  outline: 2px solid var(--kees-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s4);
}

.page {
  padding-block: var(--s8) var(--s16);
}

/* ─── Navigation ─────────────────────────────────────────────── */
.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--kees-surface);
  border-bottom: 2px solid var(--kees-primary);
  box-shadow: var(--shadow-card);
  z-index: var(--z-nav);
}

.nav-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s6);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.nav-logo {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--kees-primary);
  flex-shrink: 0;
  letter-spacing: -0.01em;
  transition: opacity var(--dur-fast) var(--ease-out);
  /* Lockup: brand mark + wordmark on one baseline. */
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.nav-logo:hover { opacity: 0.85; }

/* Brand mark and cart logo. Square assets rendered at a fixed square box —
   width and height are set together so the transparent PNG never stretches,
   and object-fit: contain keeps it intact if the box ever changes. */
.nav-logo-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-cart-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* Both stay well inside the 64px bar, so the header height never changes.
   On narrow screens the mark steps down a little to leave room for the
   actions, which is where crowding would otherwise show first. */
@media (max-width: 480px) {
  .nav-logo-mark { width: 32px; height: 32px; }
  .nav-cart-logo { width: 24px; height: 24px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.nav-link {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--kees-text-3);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}

.nav-link:hover { color: var(--kees-primary); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}

.nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  color: var(--kees-text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}

.nav-icon-btn:hover {
  color: var(--kees-primary);
  background: var(--kees-primary-light);
}

.nav-count {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  background: var(--kees-primary);
  color: var(--kees-on-primary);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 3px;
  border: 1.5px solid var(--kees-surface);
}

.nav-count-red { background: var(--kees-error); }

.nav-btn-login {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem var(--s4);
  background: var(--kees-primary);
  color: var(--kees-on-primary);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.nav-btn-login:hover {
  background: var(--kees-primary-hover);
  box-shadow: var(--shadow-brand);
}

.nav-btn-logout {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--kees-text-3);
  padding: 0.25rem var(--s2);
  border-radius: var(--r-md);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  touch-action: manipulation;
}

.nav-btn-logout:hover {
  color: var(--kees-primary);
  background: var(--kees-primary-light);
}

/* ─── Locale Switcher ────────────────────────────────────────── */
.locale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--kees-border);
  border-radius: var(--r-full);
  background: var(--kees-surface);
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--kees-text-2);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}

.locale-btn:hover {
  border-color: var(--kees-primary);
  color: var(--kees-primary);
  background: var(--kees-primary-light);
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.625rem var(--s5);
  border-radius: var(--r-xl);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  border: 1.5px solid transparent;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--kees-primary);
  color: var(--kees-on-primary);
  border-color: var(--kees-primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--kees-primary-hover);
  border-color: var(--kees-primary-hover);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--kees-accent);
  color: var(--kees-on-accent);
  border-color: var(--kees-accent);
}

.btn-accent:hover:not(:disabled) {
  background: var(--kees-accent-hover);
  border-color: var(--kees-accent-hover);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--kees-primary);
  border-color: var(--kees-primary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--kees-primary-light);
}

.btn-ghost {
  background: transparent;
  color: var(--kees-text-3);
  border-color: var(--kees-border-subtle);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--kees-muted-alt);
  color: var(--kees-text);
  border-color: var(--kees-border);
}

.btn-danger {
  background: transparent;
  color: var(--kees-error);
  border-color: transparent;
}

.btn-danger:hover:not(:disabled) {
  background: var(--kees-error-bg);
  border-color: var(--kees-error-border);
}

.btn-sm {
  padding: 0.375rem var(--s3);
  font-size: var(--t-xs);
  border-radius: var(--r-lg);
}

.btn-lg {
  padding: 0.875rem var(--s8);
  font-size: var(--t-base);
  border-radius: var(--r-xl);
}

.btn-full { width: 100%; }

/* ─── Form Elements ──────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--kees-text-2);
}

.label-req::after {
  content: ' *';
  color: var(--kees-error);
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 var(--s4);
  border: 1.5px solid var(--kees-border-subtle);
  border-radius: var(--r-xl);
  font-size: var(--t-base);
  color: var(--kees-text);
  background: var(--kees-surface);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
  -webkit-appearance: none;
}

.input:focus {
  border-color: var(--kees-primary);
  box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.18);
}

.input::placeholder { color: var(--kees-text-4); }

.input-sm {
  height: 38px;
  padding: 0 var(--s3);
  font-size: var(--t-sm);
  border-radius: var(--r-lg);
}

.input-otp {
  letter-spacing: 0.35em;
  font-size: var(--t-2xl);
  text-align: center;
  direction: ltr;
  font-weight: 700;
  color: var(--kees-primary);
}

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-xl);
  font-size: var(--t-sm);
  border: 1px solid transparent;
  line-height: 1.5;
}

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

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

.alert-info {
  background: var(--kees-primary-light);
  color: var(--kees-primary-dark);
  border-color: var(--kees-border);
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.card-p {
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xs);
  padding: var(--s6);
}

/* ─── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

.badge-primary {
  background: var(--kees-primary-light);
  color: var(--kees-primary-dark);
}

.badge-success {
  background: var(--kees-success-bg);
  color: var(--kees-success);
}

.badge-muted {
  background: var(--kees-muted-alt);
  color: var(--kees-text-3);
}

.badge-error {
  background: var(--kees-error-bg);
  color: var(--kees-error);
}

.badge-warning {
  background: var(--kees-warning-bg);
  color: var(--kees-warning);
}

/* ─── Product Card ───────────────────────────────────────────── */
.product-card {
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  cursor: pointer;
}

.product-card:hover {
  /* Resume-18D: was --shadow-brand, a coloured glow. Across a grid of twenty
     cards that reads as decoration; a neutral lift reads as depth. Restraint —
     the hover is seen dozens of times a session. */
  box-shadow: var(--shadow-card-hover);
  border-color: var(--kees-accent);
  transform: translateY(-3px);
}

/* Press feedback. The card is a link, and a link that does not acknowledge the
   press feels dead on touch, where there is no hover state at all. */
.product-card:active { transform: translateY(-1px) scale(0.995); }

.product-card:focus-visible {
  outline: 2px solid var(--kees-accent);
  outline-offset: 2px;
}

.product-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--kees-muted);
  display: block;
}

.product-card-img-empty {
  width: 100%;
  aspect-ratio: 1;
  background: var(--kees-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kees-text-4);
  font-size: var(--t-xs);
}

.product-card-body {
  padding: var(--s3) var(--s4) var(--s4);
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.product-card-name {
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--kees-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-sub {
  font-size: var(--t-xs);
  color: var(--kees-text-3);
  margin: 0;
}

.product-card-price {
  font-weight: 700;
  font-size: var(--t-base);
  color: var(--kees-primary);
  margin-top: auto;
  padding-top: var(--s2);
}

/* ─── Product Grid ───────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: var(--s4);
  gap: var(--s4);
}

@media (min-width: 480px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ─── Store Card ─────────────────────────────────────────────── */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: var(--s4);
  gap: var(--s4);
}

.store-card {
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-2xl);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  cursor: pointer;
}

.store-card:hover {
  box-shadow: var(--shadow-brand);
  border-color: var(--kees-primary);
  transform: translateY(-2px);
}

/* ─── Hero ───────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--kees-primary) 0%, #234A72 55%, var(--kees-accent) 100%);
  color: var(--kees-on-primary);
  padding: var(--s16) var(--s8);
  text-align: center;
  border-radius: var(--r-2xl);
  margin-bottom: var(--s12);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero-title {
  font-size: var(--t-4xl);
  font-weight: 700;
  margin: 0 0 var(--s3);
  line-height: 1.2;
  position: relative;
}

.hero-sub {
  font-size: var(--t-lg);
  opacity: 0.9;
  margin: 0 0 var(--s8);
  position: relative;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem var(--s10);
  background: var(--kees-surface);
  color: var(--kees-primary);
  border-radius: var(--r-full);
  font-size: var(--t-base);
  font-weight: 700;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* ─── Section ────────────────────────────────────────────────── */
.section { margin-bottom: var(--s12); }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s5);
  gap: var(--s4);
}

.section-title {
  font-size: var(--t-xl);
  font-weight: 700;
  margin: 0;
  color: var(--kees-text);
}

.section-link {
  font-size: var(--t-sm);
  color: var(--kees-primary);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.section-link:hover {
  color: var(--kees-primary-hover);
  text-decoration: underline;
}

/* ─── Price ──────────────────────────────────────────────────── */
.price {
  color: var(--kees-primary);
  font-weight: 700;
}

.price-lg {
  color: var(--kees-primary);
  font-weight: 700;
  font-size: var(--t-2xl);
}

/* ─── Rating ─────────────────────────────────────────────────── */
.rating { color: var(--kees-star); font-weight: 600; font-size: var(--t-sm); }

/* ─── Divider ────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--kees-border-subtle);
}

/* ─── Empty State ────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: var(--s16) var(--s4);
  color: var(--kees-text-3);
}

.empty-title {
  font-size: var(--t-lg);
  font-weight: 600;
  margin-bottom: var(--s2);
  color: var(--kees-text);
}

.empty-text {
  font-size: var(--t-sm);
  margin-bottom: var(--s6);
}

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s8);
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--s4);
  border-radius: var(--r-xl);
  border: 1.5px solid var(--kees-border);
  background: var(--kees-surface);
  color: var(--kees-text);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  cursor: pointer;
  font-family: inherit;
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--kees-primary);
  color: var(--kees-primary);
  background: var(--kees-primary-light);
}

.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pagination-info {
  font-size: var(--t-sm);
  color: var(--kees-text-3);
  padding: 0 var(--s2);
}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--kees-border);
  padding: var(--s8) var(--s4);
  text-align: center;
  color: var(--kees-text-4);
  font-size: var(--t-sm);
  background: var(--kees-surface);
  margin-top: var(--s16);
}

/* ─── Loading ────────────────────────────────────────────────── */
.loading-state {
  text-align: center;
  padding: var(--s16);
  color: var(--kees-text-4);
}

/* ─── Quantity Control ───────────────────────────────────────── */
.qty-control {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.qty-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--kees-border);
  border-radius: var(--r-lg);
  background: var(--kees-surface);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  color: var(--kees-text);
  font-family: inherit;
  touch-action: manipulation;
}

.qty-btn:hover:not(:disabled) {
  border-color: var(--kees-primary);
  color: var(--kees-primary);
  background: var(--kees-primary-light);
}

.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.qty-value {
  min-width: 32px;
  text-align: center;
  font-size: var(--t-base);
  font-weight: 600;
}

/* ─── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  color: var(--kees-text-3);
  margin-bottom: var(--s6);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--kees-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.breadcrumb a:hover {
  color: var(--kees-primary-hover);
  text-decoration: underline;
}

/* ─── Order Summary Rows ─────────────────────────────────────── */
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-sm);
  padding-block: var(--s2);
  color: var(--kees-text-2);
}

.summary-row-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-base);
  font-weight: 700;
  padding-block: var(--s3);
  border-top: 1px solid var(--kees-border-subtle);
  margin-top: var(--s2);
  color: var(--kees-text);
}

/* ─── Cart Grid ──────────────────────────────────────────────── */
.cart-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-gap: var(--s6);
  gap: var(--s6);
  align-items: start;
}

@media (max-width: 768px) {
  .cart-grid { grid-template-columns: 1fr; }
}

/* ─── Auth Page ──────────────────────────────────────────────── */
.auth-page {
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
}

.auth-card {
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-2xl);
  padding: var(--s10) var(--s8);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}

/* ─── Filters Bar ────────────────────────────────────────────── */
.filters-bar {
  display: flex;
  gap: var(--s3);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-xl);
  margin-bottom: var(--s5);
}

/* ─── Search Bar (page header) ───────────────────────────────── */
.search-form {
  display: flex;
  gap: var(--s2);
  align-items: center;
}

/* ─── Cart Item ──────────────────────────────────────────────── */
.cart-item {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--kees-border-subtle);
  margin-bottom: var(--s4);
}

.cart-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cart-item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--r-xl);
  border: 1px solid var(--kees-border-subtle);
  flex-shrink: 0;
  background: var(--kees-muted);
}

.cart-item-info { flex: 1 1; min-width: 0; }
.cart-item-name {
  margin: 0 0 var(--s1);
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--kees-text);
}
.cart-item-sub {
  margin: 0 0 var(--s1);
  color: var(--kees-text-3);
  font-size: var(--t-xs);
}
.cart-item-price {
  text-align: end;
  min-width: 80px;
  flex-shrink: 0;
}
.cart-item-total {
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--kees-primary);
  margin: 0;
}
.cart-item-currency {
  font-size: var(--t-xs);
  color: var(--kees-text-4);
  margin: 0;
}

/* ─── Coupon ─────────────────────────────────────────────────── */
.coupon-row {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

/* ─── Text Utilities ─────────────────────────────────────────── */
.text-primary   { color: var(--kees-primary); }
.text-success   { color: var(--kees-success); }
.text-error     { color: var(--kees-error); }
.text-muted     { color: var(--kees-text-3); }
.text-sm        { font-size: var(--t-sm); }
.text-xs        { font-size: var(--t-xs); }
.text-lg        { font-size: var(--t-lg); }
.text-xl        { font-size: var(--t-xl); }
.fw-600         { font-weight: 600; }
.fw-700         { font-weight: 700; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hero { padding: var(--s10) var(--s4); }
  .hero-title { font-size: var(--t-3xl); }
  .auth-card { padding: var(--s8) var(--s5); }
}

@media (max-width: 480px) {
  .container { padding-inline: var(--s3); }
  .card-p { padding: var(--s4); }
}

/* ═══════════════════════════════════════════════════════════════
   Storefront UX — Resume-18A

   Header search, account/notification dropdowns, global footer,
   home trust strip and cart store grouping.

   Logical properties throughout (`inset-inline-*`, `padding-inline`,
   `margin-inline`) so /ar mirrors without a single RTL override — the
   same approach the nav and product cards already take.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Header search ─────────────────────────────────────────── */
.nav-search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 460px;
  min-width: 0;
  margin-inline: var(--s4);
  background: var(--kees-muted);
  border: 1px solid var(--kees-border-subtle);
  border-radius: var(--r-full);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.nav-search:focus-within {
  background: var(--kees-surface);
  border-color: var(--kees-primary);
}

.nav-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.55rem var(--s4);
  font-size: var(--t-sm);
  font-family: inherit;
  color: var(--kees-text);
  outline: none;
}

.nav-search-input::placeholder { color: var(--kees-text-4); }

.nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  -webkit-margin-end: 2px;
          margin-inline-end: 2px;
  border: none;
  background: transparent;
  color: var(--kees-text-3);
  border-radius: var(--r-full);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.nav-search-btn:hover { color: var(--kees-primary); background: var(--kees-primary-light); }

/* ─── Avatar ────────────────────────────────────────────────── */
.nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: var(--kees-primary-light);
  color: var(--kees-primary-dark);
  font-size: var(--t-xs);
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  /* Latin initials must not flip in RTL. */
  direction: ltr;
}

.nav-avatar-img { width: 100%; height: 100%; object-fit: cover; }

.nav-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.2rem;
  -webkit-padding-end: var(--s2);
          padding-inline-end: var(--s2);
  background: transparent;
  border: 1px solid var(--kees-border-subtle);
  border-radius: var(--r-full);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.nav-avatar-btn:hover { border-color: var(--kees-primary); background: var(--kees-primary-light); }

/* ─── Dropdown menus (account + notifications) ──────────────── */
.nav-menu-wrap { position: relative; display: inline-flex; }

.nav-menu {
  position: absolute;
  top: calc(100% + var(--s2));
  /* Anchors to the trailing edge, which is left in RTL and right in LTR. */
  inset-inline-end: 0;
  min-width: 240px;
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s2);
  z-index: 60;
}

.nav-menu-wide { min-width: 320px; }

.nav-menu-head {
  padding: var(--s2) var(--s3) var(--s3);
  border-bottom: 1px solid var(--kees-border-subtle);
  margin-bottom: var(--s2);
}

.nav-menu-name {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--kees-text);
  overflow-wrap: anywhere;
}

.nav-menu-phone {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--kees-text-3);
  direction: ltr;
  /* Phone numbers read left-to-right in both locales, but should still sit on
     the reading edge of the menu. */
  text-align: start;
}

.nav-menu-item {
  display: block;
  width: 100%;
  padding: 0.55rem var(--s3);
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-family: inherit;
  color: var(--kees-text-2);
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav-menu-item:hover { background: var(--kees-muted); color: var(--kees-primary); }

.nav-menu-sep {
  height: 1px;
  background: var(--kees-border-subtle);
  margin: var(--s2) var(--s1);
  border: none;
}

.nav-menu-danger { color: var(--kees-error); }
.nav-menu-danger:hover { background: var(--kees-error-bg); color: var(--kees-error); }

.nav-menu-empty {
  margin: 0;
  padding: var(--s5) var(--s3);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--kees-text-3);
}

/* Notification rows */
.nav-notif {
  display: block;
  padding: var(--s3);
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease-out);
}

.nav-notif:hover { background: var(--kees-muted); }

.nav-notif-unread { background: var(--kees-primary-light); }

.nav-notif-title {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--kees-text);
}

.nav-notif-body {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--kees-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nav-menu-foot {
  border-top: 1px solid var(--kees-border-subtle);
  margin-top: var(--s2);
  padding-top: var(--s2);
  text-align: center;
}

.nav-menu-foot a {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--kees-primary);
}

/* Guest actions */
.nav-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem var(--s3);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--kees-text-2);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav-btn-ghost:hover { border-color: var(--kees-primary); color: var(--kees-primary); }

/* The locale switcher moved out of the primary actions (Resume-18A) and now
   sits here at reduced weight, with the full control in the footer. */
.nav-locale-quiet { opacity: 0.65; transition: opacity var(--dur-fast) var(--ease-out); }
.nav-locale-quiet:hover { opacity: 1; }

/* ─── Home: category chips, trust strip, merchant CTA ───────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem var(--s4);
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--kees-text-2);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

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

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: var(--s4);
  gap: var(--s4);
}

.trust-card {
  background: var(--kees-surface);
  border: 1px solid var(--kees-border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s5);
}

.trust-card-title {
  margin: 0 0 var(--s1);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--kees-text);
}

.trust-card-body {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--kees-text-3);
  line-height: 1.6;
}

.merchant-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  background: var(--kees-primary-dark);
  color: var(--kees-on-primary);
  border-radius: var(--r-xl);
  padding: var(--s8) var(--s6);
}

.merchant-cta-title {
  margin: 0 0 var(--s2);
  font-size: var(--t-xl);
  font-weight: 800;
}

.merchant-cta-body { margin: 0; font-size: var(--t-sm); opacity: 0.85; max-width: 46ch; }

.merchant-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem var(--s6);
  background: var(--kees-accent);
  color: var(--kees-on-accent);
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: var(--t-sm);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

.merchant-cta-btn:hover { background: var(--kees-accent-hover); }

/* ─── Global footer ─────────────────────────────────────────── */
.site-footer {
  margin-top: var(--s16);
  background: var(--kees-surface);
  border-top: 1px solid var(--kees-border);
}

.site-footer-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--s12) var(--s5) var(--s6);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: var(--s8);
  gap: var(--s8);
}

.footer-brand-name {
  margin: 0 0 var(--s2);
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--kees-text);
}

.footer-tagline {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--kees-text-3);
  line-height: 1.7;
  max-width: 34ch;
}

.footer-heading {
  margin: 0 0 var(--s3);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--kees-text);
}

.footer-links { list-style: none; margin: 0; padding: 0; }

.footer-links li { margin-bottom: var(--s2); }

.footer-links a {
  font-size: var(--t-sm);
  color: var(--kees-text-3);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-links a:hover { color: var(--kees-primary); }

.footer-trust {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--kees-border-subtle);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: var(--s4);
  gap: var(--s4);
}

.footer-trust-item {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--kees-text-3);
  line-height: 1.6;
}

.footer-bottom {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--kees-border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.footer-copy { margin: 0; font-size: var(--t-xs); color: var(--kees-text-4); }

.footer-lang { display: flex; align-items: center; gap: var(--s2); }

.footer-lang-label { font-size: var(--t-xs); color: var(--kees-text-4); }

/* ─── Cart: store grouping ──────────────────────────────────── */
.cart-store-group {
  border: 1px solid var(--kees-border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s4);
  background: var(--kees-surface);
}

.cart-store-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--kees-muted);
  border-bottom: 1px solid var(--kees-border-subtle);
}

.cart-store-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  object-fit: cover;
  flex-shrink: 0;
}

.cart-store-name {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--kees-text);
}

.cart-store-subtotal {
  margin: 0;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  font-size: var(--t-xs);
  color: var(--kees-text-3);
  white-space: nowrap;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* The search field is the first thing to lose room; drop it to its own row
     rather than squeezing the logo and actions. */
  .nav-search { order: 3; flex-basis: 100%; max-width: none; margin-inline: 0; margin-top: var(--s2); }
  .nav-inner { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .nav-search { display: none; }
  .merchant-cta { padding: var(--s6) var(--s5); }
  .site-footer-inner { padding: var(--s8) var(--s4) var(--s5); }
}

/* ═══════════════════════════════════════════════════════════════
   Product image gallery and lightbox — Resume-18B

   The gallery moved from inline styles to classes because the lightbox
   needs pseudo-selectors, a keyframe and a media query, none of which a
   style object can express.

   Direction: the previous/next buttons are placed with `inset-inline-*`,
   so "previous" sits on the side the content starts from — right in /ar,
   left in /en — and the arrow glyphs are chosen in the component to match.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Gallery (in-page) ─────────────────────────────────────── */
.gallery { display: flex; flex-direction: column; gap: var(--s3); }

/* A button, not a bare <img>: it opens the lightbox, so it must be
   focusable and activatable from the keyboard. */
.gallery-main {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--kees-border);
  border-radius: var(--r-2xl);
  background: var(--kees-muted);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.gallery-main:hover { border-color: var(--kees-primary); }

.gallery-main:focus-visible {
  outline: 2px solid var(--kees-primary);
  outline-offset: 2px;
}

.gallery-main-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}

.gallery-main:hover .gallery-main-img { transform: scale(1.02); }

/* Affordance hint. Decorative — the button already carries its own name. */
.gallery-zoom-hint {
  position: absolute;
  inset-block-end: var(--s3);
  inset-inline-end: var(--s3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: rgb(15 23 42 / 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  pointer-events: none;
}

/* ─── Thumbnails ────────────────────────────────────────────── */
.gallery-thumbs {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding-bottom: var(--s1);
}

.gallery-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid var(--kees-border);
  border-radius: var(--r-lg);
  background: var(--kees-muted);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.65;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.gallery-thumb:hover { opacity: 1; }

.gallery-thumb[aria-current='true'] {
  border-color: var(--kees-primary);
  opacity: 1;
}

.gallery-thumb:focus-visible {
  outline: 2px solid var(--kees-primary);
  outline-offset: 2px;
}

.gallery-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ─── Lightbox ──────────────────────────────────────────────── */
@keyframes gallery-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gallery-zoom-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(2 6 23 / 0.92);
  animation: gallery-fade-in var(--dur-fast) var(--ease-out);
  padding: var(--s5);
}

.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gallery-zoom-in var(--dur-base) var(--ease-out);
  /* The image is the one thing a backdrop click must NOT close through. */
  pointer-events: auto;
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-lg);
}

.lightbox-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--r-full);
  background: rgb(15 23 42 / 0.6);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.lightbox-btn:hover { background: rgb(15 23 42 / 0.9); border-color: rgb(255 255 255 / 0.5); }

.lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lightbox-close { inset-block-start: var(--s5); inset-inline-end: var(--s5); }

/* Logical placement: "previous" is on the side the content starts from, so it
   lands on the right in /ar and the left in /en without an RTL override. */
.lightbox-prev { inset-inline-start: var(--s4); }
.lightbox-next { inset-inline-end: var(--s4); }

.lightbox-counter {
  position: absolute;
  inset-block-end: var(--s5);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 0.3rem var(--s4);
  border-radius: var(--r-full);
  background: rgb(15 23 42 / 0.6);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  /* Always "current / total", never mirrored — it is a fraction, not prose. */
  direction: ltr;
}

@media (max-width: 640px) {
  .lightbox { padding: var(--s3); }
  .lightbox-btn { width: 40px; height: 40px; }
  .lightbox-close { inset-block-start: var(--s3); inset-inline-end: var(--s3); }
  .lightbox-prev { inset-inline-start: var(--s2); }
  .lightbox-next { inset-inline-end: var(--s2); }
}

/* Respect a reduced-motion preference: the transforms are decoration. */
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-figure { animation: none; }
  .gallery-main:hover .gallery-main-img { transform: none; }
  .gallery-main-img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Product detail content tabs — Resume-18C

   The strip scrolls horizontally on narrow screens rather than
   wrapping: three tabs that reflow into two rows stop reading as one
   control. Direction is handled by normal flow — the tablist is not
   given an explicit direction, so /ar lays it out right-to-left and the
   arrow-key mapping in the component matches.
   ═══════════════════════════════════════════════════════════════ */

.pdp-tabs { margin-top: var(--s10); }

.pdp-tablist {
  display: flex;
  gap: var(--s1);
  border-bottom: 1px solid var(--kees-border);
  overflow-x: auto;
  /* Room for the focus ring, which the overflow would otherwise clip. */
  padding: 2px 2px 0;
  scrollbar-width: none;
}

.pdp-tablist::-webkit-scrollbar { display: none; }

.pdp-tab {
  position: relative;
  flex-shrink: 0;
  padding: var(--s3) var(--s5);
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--kees-text-3);
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--r-md) var(--r-md) 0 0;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.pdp-tab:hover { color: var(--kees-text); background: var(--kees-muted); }

.pdp-tab[aria-selected='true'] { color: var(--kees-primary); }

/* The underline is a child element rather than a border so it can sit on top
   of the tablist's own border instead of shifting the text by a pixel. */
.pdp-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  inset-inline: var(--s3);
  inset-block-end: -1px;
  height: 2px;
  background: var(--kees-primary);
  border-radius: var(--r-full) var(--r-full) 0 0;
}

.pdp-tab:focus-visible {
  outline: 2px solid var(--kees-primary);
  outline-offset: -2px;
}

.pdp-tabpanel { padding-top: var(--s6); }

.pdp-tabpanel:focus-visible {
  outline: 2px solid var(--kees-primary);
  outline-offset: 4px;
  border-radius: var(--r-md);
}

.pdp-tab-empty {
  margin: 0;
  padding: var(--s8) 0;
  text-align: center;
  color: var(--kees-text-3);
  font-size: var(--t-sm);
}

@media (max-width: 640px) {
  .pdp-tab { padding: var(--s3) var(--s4); }
}

/* ═══════════════════════════════════════════════════════════════
   Storefront visual polish — Resume-18D

   Card media layer, truthful badges, header weight, section headers,
   category strip and footer surface. Palette comes entirely from the
   token overrides at the top of this file, so nothing here hardcodes
   a colour.

   Motion follows the design-engineering reference: named properties
   only, strong ease-out, 140ms for press and hover, and a visible
   `:active` on anything pressable — a hover-only interface has no
   feedback at all on touch.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Card media + badges ───────────────────────────────────── */
.product-card-media {
  position: relative;
  overflow: hidden;
  background: var(--kees-muted);
}

/* Slow, small, and only on the image — a card that jumps on hover is noise
   when twenty of them share a viewport. */
.product-card-media .product-card-img {
  transition: transform var(--dur-base) var(--ease-out);
}

.product-card:hover .product-card-media .product-card-img {
  transform: scale(1.04);
}

.product-card-badges {
  position: absolute;
  inset-block-start: var(--s2);
  inset-inline-start: var(--s2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  /* The whole card is one link; badges must not intercept the click. */
  pointer-events: none;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem var(--s2);
  border-radius: var(--r-sm);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.5;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* Featured — the section it sits in is what makes this true. */
.card-badge-featured { background: var(--kees-primary); color: var(--kees-on-primary); }
/* New — derived from createdAt, not asserted. */
.card-badge-new { background: var(--kees-soft); color: var(--kees-primary-dark); }
/* Low stock — derived from the same inventory the buy box reads. */
.card-badge-low { background: var(--kees-promo); color: #fff; }
.card-badge-out { background: var(--kees-text-3); color: #fff; }

/* ─── Card meta: store line, rating ─────────────────────────── */
.product-card-store {
  font-size: var(--t-xs);
  color: var(--kees-text-3);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--kees-text-2);
  margin: 0;
}

.product-card-rating-star { color: var(--kees-star); }
.product-card-rating-count { color: var(--kees-text-4); font-weight: 500; }

.product-card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s2);
}

/* ─── Header weight ─────────────────────────────────────────── */
.nav {
  /* A 2px brand rule under a navy nav was doing the work a shadow should do.
     A hairline plus depth reads lighter and lets the nav feel attached to the
     page rather than stamped on it. */
  border-bottom: 1px solid var(--kees-border);
}

.nav-inner { height: auto; min-height: var(--nav-h); padding-block: var(--s2); }

.nav-logo { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.02em; }

.nav-link { font-weight: 600; }

/* Search is the most-used control on a marketplace, so it gets the strongest
   affordance short of a filled button. */
.nav-search { border-width: 1.5px; }

.nav-search:focus-within {
  border-color: var(--kees-accent);
  box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.16);
}

.nav-icon-btn:active { transform: scale(0.94); }
.nav-avatar-btn:active { transform: scale(0.97); }
.nav-btn-login:active,
.nav-btn-ghost:active { transform: scale(0.97); }

.nav-btn-login {
  /* Filled navy: the one primary action for a signed-out visitor. */
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

.nav-avatar {
  /* The mid-blue reads as a person, not as a status colour. */
  background: var(--kees-accent);
  color: var(--kees-on-accent);
  font-weight: 800;
}

/* ─── Section headers ───────────────────────────────────────── */
.section-header {
  align-items: center;
  gap: var(--s4);
}

.section-title {
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--kees-text);
  /* An accent rule on the reading edge — a cheap, direction-correct way to
     make a heading read as a section start rather than as loose text. */
  -webkit-padding-start: var(--s3);
          padding-inline-start: var(--s3);
  -webkit-border-start: 3px solid var(--kees-accent);
          border-inline-start: 3px solid var(--kees-accent);
  line-height: 1.25;
}

.section-link {
  font-weight: 700;
  color: var(--kees-accent);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.section-link:hover { color: var(--kees-primary); }

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
  /* Deeper padding and a soft edge so the gradient does not fight the tinted
     page it sits on. */
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-title { font-weight: 800; letter-spacing: -0.03em; }

.hero-cta { font-weight: 800; box-shadow: var(--shadow-xs); }
.hero-cta:active { transform: scale(0.97); }

/* The hero's outline button sits on a dark gradient, so it needs light
   borders rather than the page-level token. */
.hero .btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--kees-on-primary);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
}

.hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: var(--kees-on-primary);
}

/* ─── Category / service strip ──────────────────────────────── */
.chip {
  box-shadow: var(--shadow-xs);
  font-weight: 700;
}

.chip:hover {
  background: var(--kees-primary-light);
  border-color: var(--kees-accent);
  color: var(--kees-primary);
}

.chip:active { transform: scale(0.97); }

/* ─── Trust cards ───────────────────────────────────────────── */
.trust-card {
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.trust-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.trust-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--s3);
  border-radius: var(--r-lg);
  background: var(--kees-primary-light);
  color: var(--kees-primary);
}

/* ─── Merchant CTA ──────────────────────────────────────────── */
.merchant-cta {
  /* Same gradient family as the hero so the page reads as one system, with
     the promo red kept for badges where it means something. */
  background: linear-gradient(135deg, var(--kees-primary) 0%, var(--kees-accent) 100%);
  box-shadow: var(--shadow-lg);
}

.merchant-cta-btn:active { transform: scale(0.97); }

/* ─── Footer surface ────────────────────────────────────────── */
.site-footer {
  /* Navy footer: closes the page and repeats the nav's colour, which is what
     makes a long scroll feel bounded. */
  background: var(--kees-primary);
  border-top: none;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer .footer-brand-name { color: #fff; }
.site-footer .footer-heading { color: #fff; }
.site-footer .footer-tagline,
.site-footer .footer-trust-item,
.site-footer .footer-copy { color: rgba(255, 255, 255, 0.66); }

.site-footer .footer-links a {
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--dur-fast) var(--ease-out);
}

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

.site-footer .footer-trust,
.site-footer .footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); }

.site-footer .footer-lang-label { color: rgba(255, 255, 255, 0.6); }

/* The switcher inherits a light-surface style, so it is re-stated for the
   dark footer rather than left to fail contrast. */
.site-footer .locale-btn {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.site-footer .locale-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* ─── Buttons: press feedback across the board ──────────────── */
.btn:active { transform: scale(0.97); }

/* ─── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .product-card:hover,
  .product-card:active,
  .trust-card:hover { transform: none; }
  .product-card:hover .product-card-media .product-card-img { transform: none; }
  .btn:active,
  .chip:active,
  .hero-cta:active,
  .nav-icon-btn:active,
  .nav-avatar-btn:active,
  .merchant-cta-btn:active { transform: none; }
}

/* The price now sits inside .product-card-price-row, which owns the spacing —
   the standalone rules would double it. Kept as an override rather than edited
   in place because the recommendation card still uses the bare class. */
.product-card-price-row .product-card-price {
  margin-top: 0;
  padding-top: 0;
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   Store surfaces — Resume-18D.1

   The stores listing and the store page were the last surfaces still
   on inline styles and the pre-18D purple. Both now build from tokens.

   The store page leads with the merchant's own banner and logo, so the
   platform's colour deliberately steps back here: the hero is the
   merchant's image, and KEES supplies only the frame around it.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Page hero (listing) ───────────────────────────────────── */
.stores-hero {
  background: linear-gradient(135deg, var(--kees-primary) 0%, var(--kees-accent) 100%);
  color: var(--kees-on-primary);
  border-radius: var(--r-2xl);
  padding: var(--s12) var(--s8);
  margin-bottom: var(--s8);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.stores-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 40%, rgba(255, 255, 255, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

.stores-hero-title {
  position: relative;
  margin: 0 0 var(--s2);
  font-size: var(--t-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stores-hero-sub {
  position: relative;
  margin: 0;
  font-size: var(--t-base);
  opacity: 0.88;
  max-width: 60ch;
  line-height: 1.7;
}

.stores-hero-count {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: var(--s5);
  padding: 0.3rem var(--s4);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.16);
  font-size: var(--t-xs);
  font-weight: 700;
}

/* ─── Store card (listing) ──────────────────────────────────── */
/*
 * `auto-fit` since Resume-18H.4D, and capped.
 *
 * `auto-fill` kept the empty tracks it created, so a directory holding four
 * stores on a wide screen showed four tiles hard against the reading edge with
 * the rest of the row blank — the same sparse-row defect the storefront had, on
 * the page that is supposed to make browsing stores feel deliberate. The cap
 * stops a two-store directory stretching each tile across half the viewport.
 */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 24rem));
  justify-content: start;
  grid-gap: var(--s5);
  gap: var(--s5);
}

.store-tile {
  display: flex;
  flex-direction: column;
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.store-tile:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--kees-accent);
  transform: translateY(-3px);
}

.store-tile:active { transform: translateY(-1px) scale(0.995); }

.store-tile:focus-visible { outline: 2px solid var(--kees-accent); outline-offset: 2px; }

/* Band behind the logo. A gradient rather than the banner image: a grid of
   banners is heavy, and the logo needs a calm ground to sit on. */
.store-tile-band {
  height: 76px;
  background: linear-gradient(135deg, var(--kees-primary) 0%, var(--kees-accent) 100%);
  position: relative;
}

.store-tile-logo {
  position: absolute;
  inset-block-end: -26px;
  inset-inline-start: var(--s5);
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--kees-surface);
  border: 2px solid var(--kees-surface);
  box-shadow: var(--shadow-xs);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--t-lg);
  color: var(--kees-primary);
  overflow: hidden;
}

.store-tile-logo img { width: 100%; height: 100%; object-fit: cover; }

.store-tile-body {
  padding: calc(26px + var(--s4)) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  flex: 1 1;
}

.store-tile-name {
  margin: 0;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--kees-text);
  line-height: 1.35;
}

.store-tile-alt { margin: 0; font-size: var(--t-xs); color: var(--kees-text-4); }

.store-tile-desc {
  margin: var(--s2) 0 0;
  font-size: var(--t-sm);
  color: var(--kees-text-3);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.store-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s4);
}

.store-tile-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--kees-text-2);
}

.store-tile-rating-star { color: var(--kees-star); }
.store-tile-rating-count { color: var(--kees-text-4); font-weight: 500; }

.store-tile-cta {
  font-size: var(--t-xs);
  font-weight: 800;
  color: var(--kees-accent);
  white-space: nowrap;
}

.store-tile:hover .store-tile-cta { color: var(--kees-primary); }

/* ─── Store page hero ───────────────────────────────────────── */
.store-hero {
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s6);
}

/* The merchant's banner, at a real size. This was the specific complaint: the
   store page never showed it at all. 3:1 keeps it prominent without letting it
   push the store's name below the fold on a laptop. */
.store-hero-banner {
  position: relative;
  aspect-ratio: 3 / 1;
  max-height: 320px;
  background: linear-gradient(135deg, var(--kees-primary) 0%, var(--kees-accent) 100%);
  overflow: hidden;
}

.store-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A scrim so white text stays legible over an arbitrary merchant image — the
   one thing that cannot be left to chance when the image is user-supplied. */
.store-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.45) 0%, transparent 55%);
  pointer-events: none;
}

.store-hero-body {
  position: relative;
  padding: var(--s5) var(--s6) var(--s6);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s5);
}

/* Overlaps the banner, which is what reads as "this is the store's page". */
.store-hero-logo {
  width: 96px;
  height: 96px;
  -webkit-margin-before: -60px;
          margin-block-start: -60px;
  border-radius: var(--r-xl);
  background: var(--kees-surface);
  border: 3px solid var(--kees-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-3xl);
  font-weight: 800;
  color: var(--kees-primary);
}

.store-hero-logo img { width: 100%; height: 100%; object-fit: cover; }

.store-hero-ident { flex: 1 1 260px; min-width: 0; }

.store-hero-name {
  margin: 0;
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--kees-text);
  line-height: 1.25;
}

.store-hero-alt { margin: 2px 0 0; font-size: var(--t-sm); color: var(--kees-text-4); }

.store-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s3);
}

.store-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--t-sm);
  color: var(--kees-text-3);
}

.store-hero-stat strong { color: var(--kees-text); font-weight: 700; }

.store-hero-actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }

/* ─── Store info panel ──────────────────────────────────────── */
.store-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: var(--s5);
  gap: var(--s5);
  margin-bottom: var(--s8);
}

.store-info-card {
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-lg);
  padding: var(--s5);
}

.store-info-title {
  margin: 0 0 var(--s3);
  font-size: var(--t-sm);
  font-weight: 800;
  color: var(--kees-text);
  -webkit-padding-start: var(--s3);
          padding-inline-start: var(--s3);
  -webkit-border-start: 3px solid var(--kees-accent);
          border-inline-start: 3px solid var(--kees-accent);
  line-height: 1.3;
}

.store-info-body {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--kees-text-3);
  line-height: 1.8;
  white-space: pre-line;
}

.store-social-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

.store-social-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem var(--s3);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--kees-text-2);
  text-transform: capitalize;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.store-social-link:hover { border-color: var(--kees-accent); color: var(--kees-accent); }

/* ─── Store announcements ───────────────────────────────────── */
.store-announce {
  background: var(--kees-warning-bg);
  border: 1px solid var(--kees-border);
  -webkit-border-start: 3px solid var(--kees-warning);
          border-inline-start: 3px solid var(--kees-warning);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5);
}

.store-announce-title {
  margin: 0 0 0.2rem;
  font-size: var(--t-sm);
  font-weight: 800;
  color: var(--kees-text);
}

.store-announce-body { margin: 0; font-size: var(--t-sm); color: var(--kees-text-2); line-height: 1.7; }

/* ─── Filter chips (store products) ─────────────────────────── */
.store-filter-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }

.store-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem var(--s4);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-full);
  background: var(--kees-surface);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--kees-text-2);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.store-filter-chip:hover { border-color: var(--kees-accent); color: var(--kees-accent); }
.store-filter-chip:active { transform: scale(0.97); }

.store-filter-chip[aria-current='true'] {
  background: var(--kees-primary);
  border-color: var(--kees-primary);
  color: var(--kees-on-primary);
}

@media (max-width: 640px) {
  .stores-hero { padding: var(--s8) var(--s5); }
  .store-hero-logo { width: 72px; height: 72px; -webkit-margin-before: -44px; margin-block-start: -44px; }
  .store-hero-body { padding: var(--s4) var(--s5) var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  .store-tile:hover, .store-tile:active { transform: none; }
  .store-filter-chip:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Marketplace header — Resume-18D.0

   Two bars. The structural idea is the one every large marketplace
   converges on, and it is a usability decision rather than a visual
   one: the commerce row holds identity, search and the account/cart
   cluster, and the browse links move to a strip of their own.

   That split is what lets search be dominant. In one bar it competed
   with three nav links for the middle of the header, so it could never
   be more than a box — and search is the single most-used control on a
   marketplace.

   KEES navy, KEES type, no borrowed trade dress.
   ═══════════════════════════════════════════════════════════════ */

.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--kees-primary);
  box-shadow: var(--shadow-lg);
}

/* ─── Bar A: commerce ───────────────────────────────────────── */
.header-main {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.header-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
  color: var(--kees-on-primary);
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease-out);
}

.header-brand:hover { background: rgba(255, 255, 255, 0.10); }
.header-brand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.header-brand-mark { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }

/* Search owns the middle. `flex: 1` with a generous max-width is the whole
   point of the two-bar split. */
.header-search {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
  height: 42px;
  background: var(--kees-surface);
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.header-search:focus-within {
  border-color: var(--kees-soft);
  box-shadow: 0 0 0 3px rgba(168, 218, 220, 0.35);
}

.header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding-inline: var(--s4);
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--kees-text);
  outline: none;
}

.header-search-input::placeholder { color: var(--kees-text-4); }

/* Accent submit, so the control reads as an action and not a decoration. */
.header-search-btn {
  flex-shrink: 0;
  width: 54px;
  border: none;
  background: var(--kees-accent);
  color: var(--kees-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.header-search-btn:hover { background: var(--kees-accent-hover); }
.header-search-btn:active { transform: scale(0.96); }
.header-search-btn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex-shrink: 0;
}

/* A stacked label + value, which is how a commerce header carries more than an
   icon in the same height. */
.header-action {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

.header-action:hover { background: rgba(255, 255, 255, 0.12); }
.header-action:active { transform: scale(0.97); }
.header-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.header-action-label { font-size: 0.68rem; opacity: 0.75; line-height: 1.2; }
.header-action-value { font-size: var(--t-sm); font-weight: 700; line-height: 1.2; }

/* Icon buttons on the navy bar: the shared .nav-icon-btn is styled for a light
   surface, so the header states are re-declared rather than left to fail. */
.header-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.header-icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.header-icon-btn:active { transform: scale(0.94); }
.header-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.header-count {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  min-width: 18px;
  height: 18px;
  padding-inline: 3px;
  border-radius: var(--r-full);
  background: var(--kees-promo);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--kees-primary);
}

.header-count-accent { background: var(--kees-soft); color: var(--kees-primary-dark); }

/* Guest actions */
.header-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem var(--s4);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.header-btn-primary { background: var(--kees-accent); color: var(--kees-on-accent); }
.header-btn-primary:hover { background: var(--kees-accent-hover); }

.header-btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.92);
}

.header-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.header-btn:active { transform: scale(0.97); }
.header-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The language toggle stays deliberately quiet — 18A moved it out of the
   primary cluster and this keeps it there. */
.header-locale { opacity: 0.7; transition: opacity var(--dur-fast) var(--ease-out); }
.header-locale:hover { opacity: 1; }

.header-locale .locale-btn {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.header-locale .locale-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

/* ─── Bar B: browse strip ───────────────────────────────────── */
.header-sub {
  background: var(--kees-primary-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.header-sub-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s1);
  /* Scrolls rather than wraps: a strip that reflows into two rows stops
     reading as one control. */
  overflow-x: auto;
  scrollbar-width: none;
}

.header-sub-inner::-webkit-scrollbar { display: none; }

.header-sub-link {
  flex-shrink: 0;
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
  -webkit-border-after: 2px solid transparent;
          border-block-end: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.header-sub-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-block-end-color: var(--kees-soft);
}

.header-sub-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.header-sub-strong { font-weight: 800; color: #fff; }

/* ─── Merchant entry points in the browse strip — Resume-18H.1A ──────────── */
/*
 * Pushed to the far end with a logical auto margin, so they sit after the shop
 * links in Arabic and English alike. The separating rule and the outlined pill
 * are doing one job: telling a shopper that this group is not more places to
 * browse, without demoting it to a footer link nobody reads.
 *
 * `flex-shrink: 0` on the group matches the links themselves — the strip scrolls
 * rather than wrapping, and a group that compressed would collapse its labels.
 */
.header-sub-sell {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  flex-shrink: 0;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  -webkit-padding-start: var(--s3);
          padding-inline-start: var(--s3);
  -webkit-border-start: 1px solid rgba(255, 255, 255, 0.18);
          border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}

.header-sub-sell-link {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-full);
  padding-block: var(--s2);
  /* The shared `.header-sub-link` underline would fight the pill outline. */
  border-block-end-width: 1px;
}

.header-sub-sell-link:hover {
  border-color: rgba(255, 255, 255, 0.55);
  border-block-end-color: rgba(255, 255, 255, 0.55);
}

/* ─── Dropdown panels on a dark bar ─────────────────────────── */
/* The menus themselves are light cards; only their trigger sits on navy, so
   the panel styles are inherited unchanged and just need the right anchor. */
.site-header .nav-menu-wrap { position: relative; display: inline-flex; }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Search drops to its own row rather than being squeezed between the brand
     and the action cluster. */
  .header-main { flex-wrap: wrap; gap: var(--s3); }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  .header-actions { -webkit-margin-start: auto; margin-inline-start: auto; }
  .header-action-label { display: none; }
}

@media (max-width: 640px) {
  .header-main { padding: var(--s3) var(--s4); }
  .header-sub-inner { padding-inline: var(--s4); }
  .header-brand { font-size: var(--t-lg); }
  .header-brand-mark { width: 28px; height: 28px; }
  .header-sub-link { padding: var(--s2) var(--s3); font-size: var(--t-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .header-action:active,
  .header-icon-btn:active,
  .header-btn:active,
  .header-search-btn:active { transform: none; }
}

/* Account trigger on the navy bar — Resume-18D.0. The shared .nav-avatar-btn is
   styled for a light surface; only the frame changes here, so the avatar itself
   keeps its accent fill and initials treatment. */
.header-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.2rem;
  -webkit-padding-end: var(--s2);
          padding-inline-end: var(--s2);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-full);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.header-avatar-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.header-avatar-btn:active { transform: scale(0.97); }
.header-avatar-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .header-avatar-btn:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Cart, checkout and order surfaces — Resume-18D.2

   These pages had the least layout attention of any storefront
   surface, and two of them were overriding the design tokens they were
   meant to inherit (`background: #f8fafc`, `fontFamily: system-ui`) —
   the same fault found on the store pages in 18D.1. With those removed
   and their colours tokenised, what is left is spacing and hierarchy.

   The bar for polish here is different from a catalogue page: this is
   the money path, so the priority is legibility of numbers, obvious
   next actions, and errors that never hide the thing they describe.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Inline action errors ──────────────────────────────────────
   Shared by cart and order detail. Both replaced an `alert()`: a modal
   has to be dismissed before the thing it refers to can be read, and on
   a refused quantity change or cancellation that thing is the point. */
.cart-action-error,
.action-error {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--kees-error-bg);
  border: 1px solid var(--kees-error-border);
  -webkit-border-start: 3px solid var(--kees-error);
          border-inline-start: 3px solid var(--kees-error);
  border-radius: var(--r-md);
  color: var(--kees-error);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.6;
}

/* ─── Cart ──────────────────────────────────────────────────── */
.cart-store-group {
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.cart-store-group:hover { box-shadow: var(--shadow-lg); }

.cart-store-head { gap: var(--s3); }

.cart-store-name {
  font-weight: 800;
  color: var(--kees-text);
  transition: color var(--dur-fast) var(--ease-out);
}

a.cart-store-name:hover { color: var(--kees-accent); }

/* The store initial, for a group whose store has no logo. Matches the store
   tile treatment from 18D.1 so a store looks like itself across surfaces. */
.cart-store-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--kees-primary-light);
  color: var(--kees-primary);
  font-size: var(--t-xs);
  font-weight: 800;
  direction: ltr;
}

.cart-item-img {
  border-radius: var(--r-md);
  border: 1px solid var(--kees-border-subtle);
}

.cart-item-name { font-weight: 700; line-height: 1.4; }

/* The variant line is the one thing that tells two otherwise identical rows
   apart, so it gets weight rather than being the faintest text in the row. */
.cart-item-sub {
  font-weight: 600;
  color: var(--kees-text-2);
}

.cart-item-total {
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  color: var(--kees-text);
}

.qty-control {
  border: 1px solid var(--kees-border);
  border-radius: var(--r-full);
  background: var(--kees-surface);
  padding: 2px;
}

.qty-btn {
  border-radius: var(--r-full);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.qty-btn:active:not(:disabled) { transform: scale(0.92); }

.qty-value { font-weight: 800; min-width: 2.25rem; }

/* ─── Order summary (cart + checkout) ───────────────────────── */
.summary-row { font-size: var(--t-sm); }

.summary-row-total {
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--kees-text);
  border-top: 1px solid var(--kees-border);
  padding-top: var(--s3);
  margin-top: var(--s2);
}

.coupon-row { gap: var(--s2); }

/* ─── Checkout / order section cards ───────────────────────────
   A single card treatment so the money path reads as a sequence of
   steps rather than a stack of loose blocks. */
.pay-section {
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s5);
  box-shadow: var(--shadow-card);
}

.pay-section-title {
  margin: 0 0 var(--s4);
  font-size: var(--t-sm);
  font-weight: 800;
  color: var(--kees-text);
  -webkit-padding-start: var(--s3);
          padding-inline-start: var(--s3);
  -webkit-border-start: 3px solid var(--kees-accent);
          border-inline-start: 3px solid var(--kees-accent);
  line-height: 1.3;
}

/* Payment options: a real selected state, so the choice is visible without
   hunting for a filled radio. No provider logic is touched. */
.pay-option {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1.5px solid var(--kees-border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--t-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.pay-option:hover { border-color: var(--kees-accent); }

/* Hover does not exist on touch, and choosing how to pay is the one tap on this
   page that must feel like it registered. */
.pay-option:active { transform: scale(0.99); }

.pay-option-selected {
  border-color: var(--kees-accent);
  background: var(--kees-accent-light);
  font-weight: 700;
}

/* ─── Orders list + status badges ───────────────────────────── */
.order-card {
  background: var(--kees-surface);
  border: 1px solid var(--kees-border);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.order-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--kees-accent);
  transform: translateY(-2px);
}

.order-card:active { transform: translateY(-1px); }

.order-number {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--kees-text);
  /* Order numbers are Latin/numeric in both locales. */
  direction: ltr;
  display: inline-block;
}

.order-total { font-weight: 800; font-size: var(--t-lg); letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  .cart-store-group:hover,
  .order-card:hover,
  .order-card:active { transform: none; }
  .qty-btn:active:not(:disabled) { transform: none; }
  .pay-option:active { transform: none; }
}