/* =================================================================
   Corplus Gifts — Design System v2
   Deep Blue · Lime Accent · Sora + Plus Jakarta Sans
   Modern B2B e-commerce — glass header, carousels, hover-reveal quote CTA
   ================================================================= */

/* ---------- 1. Design Tokens ------------------------------------- */
:root {
  /* Brand — Blue */
  --color-primary:           #1A56DB;
  --color-primary-hover:     #123E9E;
  --color-primary-pressed:   #0F2F78;
  --color-primary-container: #E8F0FE;
  --color-on-primary:        #FFFFFF;
  --color-on-primary-container: #123E9E;

  /* Brand — direct tokens (match the reference design 1:1) */
  --brand-blue:        #1A56DB;
  --brand-blue-dark:   #123E9E;
  --brand-blue-darker: #0F2F78;
  --brand-lime:         #A3E635;
  --brand-lime-dark:    #65A30D;

  /* Deep navy — hero/header/footer blocks. Colours pulled directly from
     the "airy premium, navy system" reference design (checked via
     computed styles): #08183A is the deepest hero/header tone, #0B1F45
     the slightly lighter navy used on solid buttons and headings. */
  --navy-deepest: #08183A;
  --navy:         #0B1F45;

  /* Accent — Lime (replaces old orange accent) */
  --color-secondary:         #65A30D;
  --color-secondary-hover:   #4D7C0F;
  --color-secondary-container:#ECFCCB;

  /* Surfaces — paper */
  --color-bg:                #F6F8FB;
  --color-surface:           #FFFFFF;
  --color-surface-variant:   #F6F8FB;
  --color-surface-raised:    #FFFFFF;
  --color-overlay:           rgba(15, 23, 42, 0.55);
  --paper:                    #FFFFFF;
  --paper-soft:                #F6F8FB;

  /* Text */
  --color-text:              #0F172A;
  --color-text-secondary:    #334155;
  --color-text-muted:        #5B6B83;
  --color-text-disabled:     #94A3B8;
  --color-text-on-dark:      #FFFFFF;
  --ink:                      #0F172A;
  --ink-soft:                  #5B6B83;

  /* Borders — cool gray */
  --color-border:            #E6EBF2;
  --color-border-strong:     #C6D0DE;
  --color-divider:           #EEF2F7;

  /* Semantic */
  --color-success:           #16A34A;
  --color-success-bg:        #EFFCF3;
  --color-danger:            #DC2626;
  --color-danger-bg:         #FEF2F2;
  --color-warning:           #F59E0B;
  --color-warning-bg:        #FFFBEB;
  --color-info:              #0288D1;
  --color-info-bg:           #E1F5FE;
  --color-neutral:           #64748B;
  --color-neutral-bg:        #F1F5F9;

  /* WhatsApp */
  --color-whatsapp:          #25D366;
  --color-whatsapp-hover:    #1EB358;

  /* Dark mode tokens (reserved — not yet wired to a toggle) */
  --dark-paper:      #0B1220;
  --dark-paper-soft: #111A2C;
  --dark-ink:        #F1F5F9;
  --dark-border:     #1F2B40;

  /* Legacy compatibility (existing templates reference these) */
  --primary:                 var(--color-primary);
  --primary-color:           var(--color-primary);
  --primary-dark:            var(--color-primary-pressed);
  --secondary-color:         var(--color-secondary);
  --accent-color:            var(--color-secondary);
  --gold:                    var(--brand-lime-dark);
  --dark-color:              var(--color-text);
  --light-color:             var(--color-bg);
  --danger-color:            var(--color-danger);
  --success:                 var(--color-success);
  --success-color:           var(--color-success);
  --text-muted:              var(--color-text-muted);

  /* Radius scale */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
  --elev-2: 0 2px 4px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.06);
  --elev-3: 0 4px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
  --elev-4: 0 8px 16px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.12);
  --elev-focus: 0 0 0 3px rgba(26,86,219,0.22);

  /* Spacing — 4px base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 96px;

  /* Typography — Sora (display/headings) + Plus Jakarta Sans (body) */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.25rem;   /* 36px */
  --fs-5xl:  3rem;      /* 48px */
  --fs-6xl:  3.75rem;   /* 60px */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Motion */
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ease-emph:      cubic-bezier(0.3, 0, 0, 1);
  --ease-out:       cubic-bezier(0.0, 0, 0.2, 1);
  --dur-instant:    100ms;
  --dur-fast:       150ms;
  --dur-base:       250ms;
  --dur-slow:       400ms;

  /* Layout */
  --container-max: 1320px;
  --header-height: 72px;
  --topbar-height: 36px;
  --bottom-nav-height: 72px;
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
}

/* ---------- 2. Reset / Baseline ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--color-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--color-primary-hover); }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.016em; }
h3 { font-size: var(--fs-2xl); font-weight: 700; }
h4 { font-size: var(--fs-xl); font-weight: 600; }
h5 { font-size: var(--fs-lg); font-weight: 600; }
h6 { font-size: var(--fs-base); font-weight: 600; }

p { margin: 0 0 var(--space-3); }

::selection { background: var(--color-primary-container); color: var(--color-on-primary-container); }

:focus-visible {
  outline: none;
  box-shadow: var(--elev-focus);
  border-radius: var(--radius-sm);
}

/* ---------- 3. Layout helpers ------------------------------------ */
main#main-content { min-height: 60vh; padding-bottom: var(--space-7); }

.container,
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
.container { max-width: var(--container-max); }
/* container-fluid had no cap at all -- fine on a normal laptop screen,
   but on a large/wide monitor everything inside it (hero banner, nav
   icon row, product grids) just stretches thinner and sparser instead
   of staying well-proportioned, since nothing scales up to fill the
   extra width. 1800px keeps it meaningfully wider than .container
   (still plenty of room for dense product grids) without going
   edge-to-edge on a 27"+ display. */
.container-fluid { max-width: 1800px; }

@media (min-width: 1400px) {
  .container-fluid { padding-left: var(--space-7); padding-right: var(--space-7); }
}

.section { padding: var(--space-5) 0; }
.section-tight { padding: var(--space-6) 0; }
.section-lg { padding: var(--space-8) 0; }

/* Section header pattern */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

/* Eyebrow — small pill badge in brand blue */
.eyebrow,
.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-container);
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
}
.eyebrow::before,
.section-head .eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-text);
  padding-left: 0;
  border-left: none;
  position: relative;
}

/* "View all" pill */
.section-head .section-head-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-primary);
  padding: 7px 16px;
  background: var(--color-primary-container);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-standard);
}
.section-head .section-head-link:hover {
  background: var(--color-primary);
  color: #fff;
  gap: 9px;
  box-shadow: 0 4px 14px rgba(26,86,219,0.30);
}

/* ---------- 4. Surfaces / Cards ---------------------------------- */
.surface {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.surface-flat   { background: var(--color-surface-variant); border-radius: var(--radius-lg); }
.surface-raised { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--elev-2); border: 1px solid var(--color-divider); }

.widget {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.widget--interactive { cursor: pointer; }
.widget--interactive:hover { box-shadow: var(--elev-3); transform: translateY(-2px); border-color: transparent; }
.widget--tonal { background: var(--color-primary-container); border-color: transparent; }

/* ---------- 5. Buttons (M3-style variants) ----------------------- */
.btn,
.btn-primary-custom,
.btn-secondary-custom,
.btn-outline-custom,
.btn-ghost,
.btn-tonal {
  --btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h);
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn-sm  { --btn-h: 36px; padding: 0 var(--space-4); font-size: var(--fs-xs); }
.btn-lg  { --btn-h: 52px; padding: 0 var(--space-6); font-size: var(--fs-base); }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: 0.45; pointer-events: none; }

/* Filled (primary) */
.btn-primary-custom,
.btn-filled,
.btn.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--elev-1);
}
.btn-primary-custom:hover, .btn-filled:hover, .btn.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}
.btn-primary-custom:active, .btn-filled:active, .btn.btn-primary:active {
  background: var(--color-primary-pressed);
  transform: translateY(0);
  box-shadow: var(--elev-1);
}

/* Tonal */
.btn-tonal {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border-color: transparent;
}
.btn-tonal:hover { background: var(--color-primary-container); color: var(--color-on-primary-container); filter: brightness(0.96); }

/* Outlined */
.btn-outline-custom,
.btn.btn-outline-primary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn-outline-custom:hover, .btn.btn-outline-primary:hover {
  background: var(--color-primary-container);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Ghost / text */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--color-surface-variant); }

/* Secondary / orange CTA */
.btn-secondary-custom {
  background: var(--color-secondary);
  color: #FFFFFF;
  border-color: var(--color-secondary);
  box-shadow: var(--elev-1);
}
.btn-secondary-custom:hover { background: var(--color-secondary-hover); border-color: var(--color-secondary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--elev-2); }

/* WhatsApp */
.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 var(--space-5);
  background: var(--color-whatsapp); color: #fff;
  border: 1px solid var(--color-whatsapp);
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
}
.btn-whatsapp:hover { background: var(--color-whatsapp-hover); border-color: var(--color-whatsapp-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--elev-2); }

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  right: var(--space-5); bottom: calc(var(--bottom-nav-height) + var(--space-4));
  width: 56px; height: 56px;
  background: var(--color-whatsapp);
  color: #fff;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: var(--elev-3);
  z-index: var(--z-overlay);
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-standard);
}
.whatsapp-float:hover { transform: scale(1.06); box-shadow: var(--elev-4); color: #fff; }
@media (min-width: 992px) {
  .whatsapp-float { bottom: var(--space-6); }
}

/* ---------- 6. Chips --------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
}
.chip:hover { background: var(--color-surface-variant); border-color: var(--color-border-strong); color: var(--color-text); }
.chip.is-active,
.chip--filled {
  background: var(--color-primary-container);
  border-color: transparent;
  color: var(--color-on-primary-container);
}
.chip--tonal { background: var(--color-primary-container); border-color: transparent; color: var(--color-on-primary-container); }
.chip--success { background: var(--color-success-bg); color: #065F46; border-color: transparent; }
.chip--warning { background: var(--color-warning-bg); color: #92400E; border-color: transparent; }
.chip--danger  { background: var(--color-danger-bg); color: #991B1B; border-color: transparent; }
.chip i { font-size: 0.9em; }

/* ---------- 7. Form fields (Material filled style) -------------- */
.form-field {
  position: relative;
  margin-bottom: var(--space-4);
}
.form-field input,
.form-field select,
.form-field textarea,
input.form-control, select.form-control, textarea.form-control,
input.form-select, select.form-select {
  width: 100%;
  height: 52px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
textarea.form-control, .form-field textarea { height: auto; min-height: 96px; padding-top: var(--space-3); padding-bottom: var(--space-3); resize: vertical; }
.form-field label,
.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--elev-focus);
  background: var(--color-surface);
}
input::placeholder, textarea::placeholder { color: var(--color-text-disabled); }

/* ---------- 8. Topbar / Header / App bar ------------------------- */
.topbar {
  background: var(--color-primary);
  color: rgba(255,255,255,0.9);
  font-size: var(--fs-xs);
  height: var(--topbar-height);
  display: flex; align-items: center;
  border-bottom: none;
}
.topbar a { color: rgba(255,255,255,0.85); }
.topbar a:hover { color: #fff; }
.text-gold { color: var(--brand-lime) !important; }

.topbar-uk-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  color: #fff;
}
.topbar-uk-pill i { color: var(--brand-lime); font-size: 10px; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(15,23,42,0.08); }

.header-main {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--header-height);
  padding: var(--space-3) 0;
}

.site-logo {
  display: inline-flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--brand-blue);
}
.site-logo:hover { opacity: 0.92; }
.site-logo-img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
}
/* Footer logo — white pill background so transparent logos show on dark footer */
.footer-logo-img {
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 8px 16px;
}

/* Header search — Flipkart white-on-blue (current Flipkart design) */
.header-search {
  flex: 1 1 520px;
  max-width: 680px;
  position: relative;
}
.header-search-form {
  display: flex; align-items: center;
  height: 44px;
  background: var(--paper-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0 6px 0 var(--space-4);
  transition: box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.header-search-form:focus-within {
  border-color: var(--brand-blue);
  background: var(--paper);
  box-shadow: var(--elev-focus);
}
.header-search-form input {
  flex: 1; height: 100%;
  border: none; background: transparent;
  font-size: var(--fs-sm); color: var(--ink);
  padding: 0 var(--space-2);
  outline: none;
  font-family: var(--font-body);
}
.header-search-form input::placeholder { color: var(--ink-soft); }
.header-search-form button {
  width: 36px; height: 34px;
  background: var(--brand-blue); color: #fff;
  border: none; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background var(--dur-fast) var(--ease-standard);
  flex-shrink: 0;
}
.header-search-form button:hover { background: var(--brand-blue-dark); }

.search-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  overflow: hidden;
  z-index: var(--z-dropdown);
}

/* Header action buttons — dark on white */
.header-actions {
  display: flex; align-items: center; gap: 2px;
}
.header-action-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  width: 44px; height: 44px; padding: 0;
  background: transparent;
  color: var(--ink);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.header-action-btn:hover { background: var(--paper-soft); transform: translateY(-1px); }
.header-action-btn:focus-visible { box-shadow: 0 0 0 3px rgba(26,86,219,0.2); }
.header-action-btn i { font-size: 1.2rem; }
.header-action-btn span:not(.header-action-badge) { font-weight: 500; }

.header-action-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--brand-lime-dark);
  color: #fff;
  border: 2px solid #fff;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Category nav — Flipkart-style icon chips, scrollable all screens.
   Collapses on scroll-down (see initHeaderScroll in base.html) to give
   more screen space while browsing, and reappears on scroll-up. Only the
   icon row (.category-nav-row) is height-clamped for that animation —
   NOT the whole nav — so an open subcategory ribbon (which is taller than
   the row alone) never gets clipped by it. */
.category-nav {
  border-bottom: 1px solid #EAECF0;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: border-color 0.25s ease;
}
.category-nav.is-hidden {
  border-bottom-color: transparent;
}
.category-nav-row {
  max-height: 140px;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.category-nav.is-hidden .category-nav-row {
  max-height: 0;
  opacity: 0;
}
.category-nav-list {
  display: flex; align-items: flex-start; gap: 6px;
  list-style: none; margin: 0; padding: 8px 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* On a wide desktop viewport the row rarely has enough items to fill
     the width, so it read as stranded in the top-left corner. Centered
     only above 992px, where there's normally enough room that this
     doesn't need to scroll -- centering a flex row that DOES overflow
     clips content symmetrically from both ends, which would hide the
     first item behind the left edge even though scrolling could reach
     it, so this stays left-aligned (correct for a scroll strip) below
     that width. */
}
@media (min-width: 992px) {
  /* Each category item grows to fill an equal share of the row instead
     of staying icon-sized and either clustering in the middle (center)
     or scattering with big dead gaps (space-between) -- this reads as
     a filled row of evenly-sized category "cards" that genuinely spans
     edge to edge, with no empty margin on either side. */
  .category-nav-list { justify-content: stretch; }
  .category-nav-item { flex: 1 1 0; min-width: 0; }
  .category-nav-link { width: 100%; }
}
.category-nav-list::-webkit-scrollbar { display: none; }
.category-nav-item { position: relative; flex-shrink: 0; }

/* Icon block — icon on top, label below, app-icon style. Sized up from
   the old 28px/9.5px treatment now that there are only 10 main
   categories (was 82) -- room for a real, legible photo per category
   instead of a tiny glyph. */
.category-nav-link {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 68px;
  padding: 6px 5px 5px;
  font-size: 11px; font-weight: 600;
  color: #374151;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  scroll-snap-align: start;
  transition: all 0.15s ease;
}
.category-nav-link:hover {
  background: #F5F6F9;
  border-color: #E2E8F0;
  color: #111827;
}
.category-nav-link.active,
.category-nav-item.active > .category-nav-link,
.category-nav-link.active-ribbon {
  background: var(--color-primary-container);
  border-color: rgba(26,86,219,0.3);
  color: var(--brand-blue);
}

/* Icon badge — square block (tight corner radius, not a rounded pill).
   Shows a real category photo when one's available (see
   Category.header_icon_url); the icon glyph is only a fallback. */
.cat-icon-wrap {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
  transition: transform 0.15s ease;
}
/* Real category photos vary a lot in color/contrast/composition — a flat
   filter + consistent frame keeps the strip reading as one designed set
   instead of a row of random product thumbnails. */
.cat-icon-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.82) contrast(1.03) brightness(1.02);
}
.category-nav-link:hover .cat-icon-wrap { transform: scale(1.08); }

/* Label wraps to two lines instead of truncating — reads better as a block */
.cat-label {
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  max-width: 70px;
}

.cat-ribbon-caret {
  font-size: 9px;
  margin-top: -2px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}
.cat-ribbon-caret--none { visibility: hidden; }
.category-nav-link.active-ribbon .cat-ribbon-caret { transform: rotate(180deg); color: var(--brand-blue); }

/* Icon badge colour — on-brand blue/lime alternation instead of a rainbow,
   so the strip reads as part of this site's palette, not a generic template. */
.cat-icon-wrap { background: var(--paper-soft); color: var(--navy); }

/* Subcategory ribbon — click-to-open strip below the category row, shown
   by initCategoryRibbon() in main.js. Works the same on touch and desktop,
   unlike the old hover-only mega-dropdown it replaces. */
.category-ribbon {
  display: none;
  border-bottom: 1px solid #EAECF0;
  background: var(--color-primary-container);
  animation: catRibbonSlide 0.2s ease;
}
.category-ribbon.is-open { display: block; }
@keyframes catRibbonSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
/* Ribbon grid — subcategories as small image cards, wrapping into rows
   (stacked) instead of one cramped horizontal scroll strip. Scrolls
   vertically within a capped height once a category has enough
   subcategories to need more than a few rows. */
.category-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px 10px;
  padding: 14px 4px;
  max-height: 302px;
  overflow-y: auto;
}
@media (max-width: 575.98px) {
  .category-ribbon-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px 8px; max-height: 260px; }
}
.ribbon-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none;
  text-align: center;
}
.ribbon-card-media {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--brand-blue);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ribbon-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(1.03);
}
.ribbon-card-media--all {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.ribbon-card-label {
  font-size: 11.5px; font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ribbon-card:hover .ribbon-card-media { border-color: var(--brand-blue); box-shadow: 0 4px 12px rgba(26,86,219,0.18); transform: translateY(-2px); }
.ribbon-card:hover .ribbon-card-label { color: var(--brand-blue); }
.ribbon-card--all .ribbon-card-label { color: var(--brand-blue); font-weight: 700; }

/* Bootstrap dropdown polish */
.dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elev-3);
  padding: 8px !important;
  min-width: 220px;
}
.dropdown-item {
  padding: 10px 12px !important;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm) !important;
  color: var(--color-text);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--color-primary-container); color: var(--color-on-primary-container); }

/* ---------- 9. Mobile bottom nav -------------------------------- */
.mobile-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--bottom-nav-height);
  background: #ffffff;
  border-top: 2.5px solid var(--color-primary);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12), 0 -1px 0 rgba(0,0,0,0.04);
  z-index: var(--z-header);
  /* Extra padding for iPhone home indicator */
  padding: 4px var(--space-2) max(4px, env(safe-area-inset-bottom, 4px));
}
.mobile-nav-item {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  height: 100%;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-standard);
}
.mobile-nav-item i { font-size: 1.45rem; line-height: 1; }
.mobile-nav-item:hover { color: var(--color-primary); }
.mobile-nav-item.active { color: var(--color-primary); }

/* Active pill behind icon — app-style indicator */
.mobile-nav-item.active::before {
  content: '';
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 30px;
  background: rgba(26, 86, 219, 0.11);
  border-radius: 20px;
  pointer-events: none;
}
.mobile-nav-badge {
  position: absolute; top: 4px; right: calc(50% - 24px);
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--color-secondary); color: #fff;
  border-radius: var(--radius-pill);
  font-size: 9px; font-weight: 700; line-height: 16px;
  text-align: center;
  z-index: 1;
}

@media (max-width: 991.98px) {
  body { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 10. Footer ------------------------------------------- */
.site-footer {
  background: var(--navy-deepest);
  color: rgba(255,255,255,0.7);
  padding: var(--space-9) 0 0;
  margin-top: var(--space-9);
  border-top: 4px solid var(--brand-blue);
}
.site-footer h5,
.footer-heading {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-tagline {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: rgba(255,255,255,0.6);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a {
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.footer-links a:hover { color: #fff; }

.footer-social {
  display: flex; gap: var(--space-2);
  margin-top: var(--space-4);
}
.footer-social-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  border-radius: var(--radius-pill);
  font-size: 1.05rem;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
}
.footer-social-btn:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }

.footer-contact-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.7);
  line-height: var(--lh-snug);
}
.footer-contact-item i { color: var(--color-secondary); margin-top: 2px; flex-shrink: 0; }
.footer-contact-item a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-contact-item a:hover { color: #fff; }

/* Footer heading accent line */
.footer-heading { position: relative; padding-bottom: var(--space-3); }
.footer-heading-line {
  display: block;
  width: 32px; height: 2px;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
  margin-top: 6px;
}

/* Footer office label — small caps divider before each office's contact block */
.footer-office-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-lime);
  margin: var(--space-4) 0 var(--space-2);
}
.footer-office-label:first-of-type { margin-top: 0; }
.footer-office-label i { font-size: 10px; }
.footer-office-uk { color: #93C5FD; }

/* Footer links — arrow on hover */
.footer-links a { display: flex; align-items: center; gap: 0; }
.footer-links a::before {
  content: '›';
  display: inline-block;
  width: 0; overflow: hidden;
  transition: width var(--dur-fast) var(--ease-standard), margin-right var(--dur-fast) var(--ease-standard);
  color: var(--color-secondary);
  font-size: 1.1rem; line-height: 1;
}
.footer-links a:hover::before { width: 12px; margin-right: 4px; }

/* Footer social brand-color hovers */
.footer-social-btn { border: 1px solid rgba(255,255,255,0.1); }
.footer-social-ig:hover { background: #e1306c !important; border-color: #e1306c; color: #fff !important; }
.footer-social-li:hover { background: #0077b5 !important; border-color: #0077b5; color: #fff !important; }
.footer-social-wa:hover { background: #25d366 !important; border-color: #25d366; color: #fff !important; }
.footer-social-fb:hover { background: #1877f2 !important; border-color: #1877f2; color: #fff !important; }

/* Footer contact icon circles */
.footer-contact-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-pill);
  margin-top: 1px;
}
.footer-contact-icon i { color: var(--color-secondary); font-size: 0.85rem; }

/* Footer trust badges */
.footer-trust-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.footer-trust-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.footer-trust-badge i { color: var(--color-secondary); font-size: 0.7rem; }

/* WhatsApp CTA strip */
.footer-wa-strip {
  margin-top: var(--space-8);
  padding: var(--space-5) 0;
  background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-wa-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  font-size: 1.4rem; color: #fff;
}
.footer-wa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  background: #fff; color: #075e54;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
  flex-shrink: 0;
}
.footer-wa-btn:hover { background: #e8f5e9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); color: #075e54; }

.footer-bottom {
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
}
.footer-bottom-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: rgba(255,255,255,0.45);
}

/* ---------- 11. Product card (widget tile) — v2 ------------------ */
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.35s cubic-bezier(.16,.84,.44,1), transform 0.35s cubic-bezier(.16,.84,.44,1), border-color 0.2s ease;
  height: 100%;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.product-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 16px 32px rgba(15,23,42,0.12);
  transform: translateY(-4px);
}

.product-card-image {
  position: relative;
  aspect-ratio: 1 / 1;          /* Square — shows product proportionally */
  background: linear-gradient(100deg, #EEF2F7 20%, #F8FAFC 40%, #EEF2F7 60%);
  background-size: 200% 100%;
  overflow: hidden;
}
.product-card-image img,
.product-card .card-img-top {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.product-card:hover .product-card-image img,
.product-card:hover .card-img-top {
  transform: scale(1.05);
}
.product-card-no-image {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--color-text-disabled);
  font-size: 3rem;
  text-decoration: none;
}

.product-badge {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  z-index: 2;
  font-family: var(--font-body);
}
.badge-new { background: var(--brand-blue); color: #fff; }
.badge-featured { background: var(--brand-lime-dark); color: #fff; }

/* Stock-status pill — top-left, replaces old text-only availability line */
.pc-stock-pill {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
  z-index: 2;
}
.pc-stock-pill.in-stock  { background: rgba(22,163,74,0.92); }
.pc-stock-pill.low-stock { background: rgba(245,158,11,0.92); }
.pc-stock-pill.out-stock { background: rgba(100,116,139,0.92); }

.wishlist-btn {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  z-index: 2;
  transition: all var(--dur-fast) var(--ease-standard);
}
.wishlist-btn:hover { background: #fff; color: var(--color-danger); transform: scale(1.08); }
.wishlist-btn.is-wishlisted,
.wishlist-btn[data-active="1"] { color: var(--color-danger); }
.wishlist-btn.is-wishlisted i,
.wishlist-btn[data-active="1"] i { font-weight: 600; }

/* Hover-reveal "Get Quote" WhatsApp button — slides up from the bottom of
   the image on hover, lime accent (matches the reference design). */
.pc-hover-quote {
  position: absolute; left: 10px; right: 10px; bottom: -56px;
  opacity: 0;
  transition: bottom 0.35s cubic-bezier(.16,.84,.44,1), opacity 0.35s;
  z-index: 3;
}
.product-card:hover .pc-hover-quote,
.product-card:focus-within .pc-hover-quote { bottom: 10px; opacity: 1; }
.pc-hover-quote-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 16px;
  background: var(--brand-lime);
  color: #0F2F1A;
  font-weight: 700; font-size: 13px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(163,230,53,0.4);
  font-family: var(--font-body);
  transition: background 0.2s, transform 0.15s;
}
.pc-hover-quote-btn:hover { background: var(--brand-lime-dark); color: #fff; transform: translateY(-1px); }
/* Touch devices can't hover — always show a slim static bar instead */
@media (hover: none) {
  .pc-hover-quote { position: static; opacity: 1; margin-top: 8px; padding: 0 10px 10px; }
}

.product-card-body {
  padding: var(--space-2) var(--space-3) var(--space-2);
  flex: 1;
  display: flex; flex-direction: column; gap: 3px;
}
.product-card-category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-blue);
  font-family: var(--font-body);
}
.product-card-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--fs-sm) * var(--lh-snug) * 2);
}
.product-card-name:hover { color: var(--brand-blue); }
.product-card-sku {
  font-size: 12px;
  color: var(--ink-soft);
  font-family: var(--font-body);
}
.product-card-availability { margin-top: 2px; font-size: 11px; }
.avail-in-stock { color: var(--color-success); font-weight: 600; }
.avail-out      { color: var(--color-danger); font-weight: 600; }
.avail-coming   { color: var(--color-warning); font-weight: 600; }

/* Variant count badge — shown on cards with multiple colour/size options */
.pc-variants-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 19px; padding: 0 8px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.02em;
  color: #1A56DB;
  background: #EFF6FF;
  border-radius: 20px;
  margin-top: 3px;
  width: fit-content;
}
.pc-variants-badge i { font-size: 9px; }

/* "Default" micro-tag inside filter sidebar */
.filter-default-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #059669; background: #ECFDF5;
  border-radius: 4px; padding: 1px 5px;
  margin-left: 5px; vertical-align: middle;
}

.product-card-footer {
  padding: 0 var(--space-3) var(--space-3);
  display: flex; flex-direction: column; gap: 6px;
}
.product-card-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pc-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
/* Quote-only business model — footer CTA button (replaces price display).
   The WhatsApp quote CTA already lives on the image hover-reveal, so this
   footer button is a secondary "View Details" action — subtle blue rather
   than WhatsApp green, to keep the green exclusively meaning "quote". */
.pc-details-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px;
  background: var(--color-primary-container);
  color: var(--brand-blue);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.pc-details-btn:hover {
  background: var(--brand-blue);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(26,86,219,0.3);
}
.pc-details-btn i { font-size: 0.95rem; }
.product-card-actions .btn-whatsapp {
  flex: 1;
  height: 34px;
  padding: 0 var(--space-2);
  font-size: 11px;
  font-weight: 600;
  gap: 5px;
}
.product-card-actions .btn-whatsapp i { font-size: 0.95rem; }
.product-card-actions .btn-primary-custom {
  height: 38px;
  width: 38px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.product-card-actions .btn-primary-custom:hover {
  background: var(--brand-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(26,86,219,0.3);
}

/* Shimmer loading skeleton — used behind product images while they load */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.product-card-image.is-loading {
  animation: shimmer 1.4s ease-in-out infinite;
}

/* ---------- 11b. Scroll reveal (premium/interactive polish) ----- */
/* Paired with initScrollReveal() in main.js. Starts hidden only after JS
   has run (hr-observed), so the page never flashes invisible content if
   JS is slow or disabled. */
.hero-reveal.hr-observed {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard);
}
.hero-reveal.hr-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-reveal.hr-observed { transition: none; }
}

/* ---------- 12. Hero banner slider ------------------------------ */
.hero-slider-section {
  background: #111;
}

/* Swiper container */
.hero-swiper {
  width: 100%;
  height: clamp(480px, 62vh, 700px);
}
@media (max-width: 991.98px) { .hero-swiper { height: clamp(300px, 45vw, 440px); } }
@media (max-width: 575.98px) { .hero-swiper { height: 260px; } }

/* Each slide */
.hero-slide {
  display: block;
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark gradient overlay for text legibility */
.hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.18) 55%, transparent 100%);
  pointer-events: none;
}

/* Fallback slide (no image uploaded) */
.hero-slide--fallback {
  background: linear-gradient(135deg, #1A2980 0%, #26D0CE 100%);
}

/* Text overlay */
.hero-slide-content {
  position: absolute;
  bottom: 48px; left: 56px;
  z-index: 2;
  max-width: 520px;
}
@media (max-width: 767.98px) {
  .hero-slide-content { left: 20px; bottom: 28px; max-width: calc(100% - 40px); }
}
.hero-slide-title {
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero-slide-sub {
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: rgba(255,255,255,0.88);
  margin: 0 0 18px;
  line-height: 1.5;
}
.hero-slide-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-slide:hover .hero-slide-btn { background: #1a5fc8; transform: translateX(3px); }

/* Pagination bullets */
.hero-swiper-pagination {
  bottom: 12px !important;
}
.hero-swiper-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.55);
  opacity: 1;
  width: 8px; height: 8px;
}
.hero-swiper-pagination .swiper-pagination-bullet-active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}

/* Nav arrows */
.hero-swiper-prev, .hero-swiper-next {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  transition: background 0.15s ease;
}
.hero-swiper-prev:hover, .hero-swiper-next:hover { background: rgba(255,255,255,0.35); }
.hero-swiper-prev::after, .hero-swiper-next::after { font-size: 0.75rem; font-weight: 900; color: #fff; }
@media (max-width: 575.98px) { .hero-swiper-prev, .hero-swiper-next { display: none; } }

/* Deal chips row below slider */
.deal-grid { margin-top: 0; }

/* Section wrapper for the homepage hero -- the actual banner styling
   lives in the "Hero promo banner" block below (.promo-card etc). */
.hero {
  position: relative;
  padding: 6px 0 var(--space-4);
  background: var(--color-bg);
  border-bottom: none;
  overflow: hidden;
}
/* ---------- 12b. Hero promo banner (homepage, single full-width) ------ */
.promo-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  min-height: clamp(260px, 32vh, 360px);
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: flex-end;          /* text sits at bottom-left */
  box-shadow: 0 24px 48px -20px rgba(15,23,42,0.35);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform 0.3s cubic-bezier(.16,.84,.44,1);
}
/* Single hero variant — present, but compact enough that the trust stats
   and first product sections are still reachable without much scrolling. */
.promo-card--hero {
  min-height: clamp(200px, 30vh, 340px);
  background: linear-gradient(135deg, var(--navy-deepest) 0%, var(--navy) 100%);
}
@media (max-width: 575.98px) {
  .promo-card--hero { min-height: clamp(170px, 26vh, 240px); }
}
.promo-card:hover {
  box-shadow: 0 32px 60px -18px rgba(15,23,42,0.42);
  transform: translateY(-3px);
  color: #fff;
}

/* Hero block wrapper — fuses the banner + stats bar into one continuous
   navy block (photo on top, trust stats flush underneath) instead of a
   banner with a separate floating white card below it. */
.hero-block {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 24px 48px -20px rgba(15,23,42,0.35);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform 0.3s cubic-bezier(.16,.84,.44,1);
}
.hero-block:hover {
  box-shadow: 0 32px 60px -18px rgba(15,23,42,0.42);
}
.hero-block .promo-card {
  border-radius: 0;
  box-shadow: none;
}
.hero-block .promo-card:hover { transform: none; }

/* Double-class selector so this reliably beats the base .value-strip rule
   (which is declared later in the file) regardless of source order. */
.value-strip.value-strip--hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deepest) 100%);
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.value-strip.value-strip--hero .value-item-icon {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.value-strip.value-strip--hero .value-item-text strong { color: #fff; }
.value-strip.value-strip--hero .value-item-text span { color: rgba(255,255,255,0.7); }
.value-strip.value-strip--hero .value-item:hover .value-item-icon { background: rgba(255,255,255,0.22); }
.value-strip.value-strip--hero .value-item:hover .value-item-text strong { color: #fff; }

/* Image fills the entire card */
.promo-card-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.promo-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Navy scrim (matches the brand navy, not plain black) — covers enough of
   the bottom-left corner for a full headline + subtext + buttons block,
   not just a single button like before. Darkened and extended further
   (was fading to near-transparent by 62%) since a bright product photo
   under a wrapped second headline line was leaving white text with too
   little contrast to read cleanly -- this guarantees a dark backdrop
   under the whole text block regardless of which slide is showing. */
.promo-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to top right,
    rgba(8,24,58,0.88) 0%,
    rgba(8,24,58,0.72) 40%,
    rgba(8,24,58,0.32) 68%,
    rgba(8,24,58,0.05) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Headline block sits at the bottom-left corner */
.promo-card-content {
  position: relative;
  z-index: 2;
  padding: 28px 28px 26px;
  max-width: 560px;
}
@media (max-width: 575.98px) {
  .promo-card-content { padding: 18px 18px 16px; }
}
.promo-card-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-lime);
  margin-bottom: 10px;
}
.promo-card-headline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.promo-card-sub {
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin: 0 0 20px;
  max-width: 440px;
}
.promo-card-btn-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.promo-card-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--font-body);
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.promo-card-btn--light {
  color: var(--navy);
  background: #fff;
  border: 1px solid transparent;
}
.promo-card-btn--light:hover {
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.promo-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--font-body);
  color: #fff;
  background: var(--color-whatsapp);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(37,211,102,0.4);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.promo-card-cta:hover {
  background: var(--color-whatsapp-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37,211,102,0.5);
}

/* Swiper fills the entire card image area */
.promo-img-swiper {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.promo-img-swiper .swiper-slide {
  width: 100%; height: 100%;
}
.promo-img-swiper .swiper-slide img,
.promo-img-swiper .swiper-slide video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Tiny bullet pagination inside promo card */
.promo-pagination {
  bottom: 6px !important;
}
.promo-pagination .swiper-pagination-bullet {
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.6);
  opacity: 1;
}
.promo-pagination .swiper-pagination-bullet-active {
  background: #fff;
  width: 16px;
  border-radius: 3px;
}
.promo-card-image .promo-placeholder {
  width: 100%; height: 100%;
  min-height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
  background: var(--color-primary-container);
  color: var(--color-primary);
}

/* ── Deal quick-links (gradient banner cards) ─────────────── */
.deal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 767.98px) { .deal-grid { grid-template-columns: repeat(2, 1fr); } }

.deal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 138px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard);
}
.deal-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,0.20); color: #fff; }

/* Bold gradient backgrounds */
.deal-card--featured   { background: linear-gradient(145deg, #4338CA 0%, #7C3AED 100%); }
.deal-card--new        { background: linear-gradient(145deg, #0369A1 0%, #06B6D4 100%); }
.deal-card--bestseller { background: linear-gradient(145deg, #92400E 0%, #F59E0B 100%); }
.deal-card--custom     { background: linear-gradient(145deg, #14532D 0%, #16A34A 100%); }

/* Large soft circle top-right — depth layer */
.deal-card::before {
  content: '';
  position: absolute;
  top: -28px; right: -28px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  pointer-events: none;
}
.deal-card::after {
  content: '';
  position: absolute;
  top: 16px; right: -44px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}

/* ── Icon composition area ── */
.deal-card-icon {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Watermark background icon */
.deal-icon-bg {
  position: absolute;
  font-size: 5.2rem;
  color: rgba(255,255,255,0.10);
  transform: rotate(-18deg) scale(1.15);
  pointer-events: none;
}

/* Foreground main icon */
.deal-icon-main {
  position: relative;
  z-index: 1;
  font-size: 2.5rem;
  color: rgba(255,255,255,0.95);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
  transition: transform 280ms var(--ease-standard);
}
.deal-card:hover .deal-icon-main { transform: translateY(-6px) scale(1.10); }

/* Small accent icon (top-left of main icon) */
.deal-icon-accent {
  position: absolute;
  z-index: 2;
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  top: calc(50% - 22px);
  left: calc(50% + 14px);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.20));
  transition: transform 280ms var(--ease-standard);
}
.deal-card:hover .deal-icon-accent { transform: translateY(-4px) rotate(15deg); }

/* Bottom label */
.deal-card-text {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 22px 15px 13px;
  background: linear-gradient(to top, rgba(0,0,0,0.38) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.deal-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.deal-card-offer {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
}

/* ---------- 13. Category widget grid ---------------------------- */
/* Category grid — overlay-style tiles (image fills the card, name sits on
   a gradient scrim) so browsing categories feels visual and immediate
   rather than a plain text list. Fewer, bigger columns than before —
   easier to scan and tap on mobile. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
@media (max-width: 1199.98px) { .category-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; } }
@media (max-width: 991.98px)  { .category-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; } }
@media (max-width: 575.98px)  { .category-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* Trending collections — a few curated cards, slightly larger than the
   dense browse-everything grid below it, but still compact, uniform
   square boxes — never a single giant full-width card on mobile. */
.category-grid--trending {
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1199.98px) { .category-grid--trending { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
@media (max-width: 767.98px)  { .category-grid--trending { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (max-width: 575.98px)  { .category-grid--trending { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.category-tile--trending .category-tile-media { aspect-ratio: 1 / 1; }
.category-tile--trending .category-tile-overlay { padding: 10px 12px 12px; }
.category-tile--trending .category-tile-name {
  font-size: 13px;
  margin: 0 0 2px;
}
.category-tile-tagline {
  display: none;
}
@media (min-width: 992px) {
  .category-tile-tagline {
    display: block;
    font-size: 11.5px;
    line-height: 1.35;
    color: rgba(255,255,255,0.8);
    margin-bottom: 6px;
  }
}
.category-tile-explore {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.category-tile-explore i { font-size: 10px; transition: transform 0.2s ease; }
.category-tile--trending:hover .category-tile-explore i { transform: translateX(3px); }

/* Logistics strip — thin trust banner between Trending Collections and
   the deal quick-links, echoing the reference design's "ships fast"
   strip but with only claims already stated elsewhere on the site. */
.logistics-strip {
  background: var(--navy-deepest);
  padding: 14px 0;
}
.logistics-strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 36px;
}
.logistics-strip-item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.logistics-strip-item i {
  color: var(--brand-lime);
  font-size: 15px;
}
@media (max-width: 767.98px) {
  .logistics-strip-row { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; gap: 24px; -ms-overflow-style: none; scrollbar-width: none; }
  .logistics-strip-row::-webkit-scrollbar { display: none; }
}

/* Trust row — 4-item reassurance grid before the newsletter band. */
.home-trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 991.98px) { .home-trust-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .home-trust-row { grid-template-columns: 1fr; } }
.home-trust-row-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
}
.home-trust-row-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-container);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.home-trust-row-item h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-text);
}
.home-trust-row-item p {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.category-tile {
  position: relative;
  display: block;
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  transition: box-shadow 0.3s cubic-bezier(.16,.84,.44,1), transform 0.3s cubic-bezier(.16,.84,.44,1);
}
.category-tile:hover {
  box-shadow: 0 20px 36px -14px rgba(15,23,42,0.28);
  transform: translateY(-4px);
  color: inherit;
}
.category-tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--paper-soft) 0%, #EEF2F7 100%);
  overflow: hidden;
}
.category-tile-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-standard);
}
.category-tile:hover .category-tile-media img { transform: scale(1.08); }
.category-tile-icon-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--brand-blue);
  opacity: 0.35;
}
/* Gradient scrim so white text stays readable over any image */
.category-tile-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.82) 0%, rgba(15,23,42,0.15) 55%, transparent 100%);
}
.category-tile-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 7px 8px 8px;
  z-index: 2;
}
.category-tile-name {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1px;
  line-height: 1.2;
}
.category-tile-meta {
  font-size: 9px;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.category-tile-arrow {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s, transform 0.25s, background 0.2s;
}
.category-tile:hover .category-tile-arrow {
  opacity: 1;
  transform: translateX(0);
  background: var(--brand-lime);
  color: #0F2F1A;
}

/* ---------- 13b. Product swiper carousel ----------------------- */
.product-swiper-wrap {
  position: relative;
  /* let arrows hang outside */
  margin-left: -4px;
  margin-right: -4px;
  padding: 4px 4px 8px;
}
.product-swiper { overflow: hidden; }
.product-swiper .swiper-slide { height: auto; }

/* Custom nav buttons */
.product-swiper .swiper-button-prev,
.product-swiper .swiper-button-next {
  width: 40px; height: 40px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  top: 38%;
  transform: translateY(-50%);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.product-swiper .swiper-button-prev { left: -4px; }
.product-swiper .swiper-button-next { right: -4px; }

.product-swiper .swiper-button-prev::after,
.product-swiper .swiper-button-next::after {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--color-primary);
}
.product-swiper .swiper-button-prev:hover,
.product-swiper .swiper-button-next:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--elev-3);
}
.product-swiper .swiper-button-prev:hover::after,
.product-swiper .swiper-button-next:hover::after { color: #FFFFFF; }
.product-swiper .swiper-button-disabled { opacity: 0 !important; pointer-events: none; }

@media (max-width: 767.98px) {
  .product-swiper .swiper-button-prev,
  .product-swiper .swiper-button-next { display: none; }
}

/* ---------- 14. Product grid ------------------------------------ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1199.98px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767.98px)  { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }

.product-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 280px);
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.product-rail > * { scroll-snap-align: start; }
.product-rail::-webkit-scrollbar { height: 6px; }
.product-rail::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-pill); }

/* ---------- 15. Value props strip ------------------------------- */
@keyframes valueFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes valueIconBounce {
  0%,100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-5px) scale(1.12); }
  60%      { transform: translateY(-3px) scale(1.08); }
}
@keyframes valueIconPing {
  0%   { box-shadow: 0 0 0 0 rgba(26,86,219,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(26,86,219,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,86,219,0); }
}

.value-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
}
/* Compact 2-column layout instead of hiding entirely — this is a real
   trust-signal strip (stock size, delivery time, account manager) and
   most visitors on this site are on mobile. */
@media (max-width: 767.98px) {
  .value-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding: var(--space-3); }
}

/* Staggered fade-up on load */
.value-item {
  display: flex; align-items: center; gap: 10px;
  opacity: 0;
  animation: valueFadeUp 0.55s var(--ease-standard) forwards;
}
.value-item:nth-child(1) { animation-delay: 0.10s; }
.value-item:nth-child(2) { animation-delay: 0.22s; }
.value-item:nth-child(3) { animation-delay: 0.34s; }
.value-item:nth-child(4) { animation-delay: 0.46s; }

/* Icon — bounce + ping on hover */
.value-item-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: background 200ms;
  cursor: default;
}
.value-item:hover .value-item-icon {
  animation: valueIconBounce 0.55s var(--ease-standard),
             valueIconPing    0.55s var(--ease-standard);
  background: var(--color-primary-hover);
}

.value-item-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color 200ms;
}
.value-item:hover .value-item-text strong { color: var(--color-primary); }

.value-item-text span {
  display: block;
  font-size: 10.5px;
  color: var(--color-text-muted);
  line-height: 1.25;
}

/* ---------- 16. CTA banner ---------------------------------------- */
@keyframes ctaBg {
  0%,100% { background-position: 0% 60%; }
  50%      { background-position: 100% 40%; }
}
@keyframes ctaGlow {
  0%,100% { transform: scale(1) translateY(0);   opacity: 0.65; }
  50%      { transform: scale(1.18) translateY(-12px); opacity: 1; }
}
@keyframes ctaIconFloat {
  0%,100% { transform: translateY(0)   rotate(-4deg); }
  50%      { transform: translateY(-12px) rotate(6deg); }
}
@keyframes ctaDot {
  0%,100% { transform: translateY(0); opacity: 0.45; }
  50%      { transform: translateY(-9px); opacity: 1; }
}
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.40); }
  50%      { box-shadow: 0 6px 34px rgba(37,211,102,0.70); }
}

.cta-banner {
  position: relative;
  padding: var(--space-7);
  background: linear-gradient(135deg, #0f172a 0%, #1a3460 45%, #1A56DB 100%);
  background-size: 220% 220%;
  animation: ctaBg 9s ease infinite;
  border-radius: var(--radius-lg);
  color: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

/* Radial glow blobs */
.cta-banner::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,86,219,0.40) 0%, transparent 70%);
  animation: ctaGlow 7s ease-in-out infinite;
  pointer-events: none;
}
.cta-banner::after {
  content: '';
  position: absolute;
  bottom: -55px; left: 32%;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.28) 0%, transparent 70%);
  animation: ctaGlow 9s ease-in-out infinite reverse;
  pointer-events: none;
}

.cta-banner h2 {
  color: #fff;
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.cta-banner p {
  color: rgba(255,255,255,0.80);
  font-size: var(--fs-base);
  margin: 0 0 var(--space-5);
}

/* WhatsApp-green CTA button with pulse */
.cta-banner .btn-secondary-custom {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
  animation: ctaPulse 2.6s ease-in-out infinite;
}
.cta-banner .btn-secondary-custom:hover {
  background: #1fba59;
  border-color: #1fba59;
  color: #fff;
  box-shadow: 0 8px 32px rgba(37,211,102,0.60);
}

/* Right side icon composition */
.cta-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
}
.cta-icon-main {
  font-size: 5rem;
  color: rgba(255,255,255,0.92);
  filter: drop-shadow(0 6px 22px rgba(255,255,255,0.22));
  animation: ctaIconFloat 4.5s ease-in-out infinite;
  z-index: 1;
}
.cta-icon-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  animation: ctaGlow 5s ease-in-out infinite;
}
.cta-icon-ring:nth-child(1) { width: 90px;  height: 90px;  animation-delay: 0s; }
.cta-icon-ring:nth-child(2) { width: 120px; height: 120px; animation-delay: 0.6s; opacity: 0.6; }
.cta-icon-ring:nth-child(3) { width: 150px; height: 150px; animation-delay: 1.2s; opacity: 0.35; }
.cta-icon-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  animation: ctaDot 3s ease-in-out infinite;
}
.cta-icon-dot:nth-child(4) { width:7px; height:7px; top:8px;   left:28%;  animation-delay:0s; }
.cta-icon-dot:nth-child(5) { width:5px; height:5px; top:35%;   right:18%; animation-delay:0.9s; }
.cta-icon-dot:nth-child(6) { width:6px; height:6px; bottom:10px; left:42%; animation-delay:1.7s; }

@media (max-width: 767.98px) {
  .cta-banner { grid-template-columns: 1fr; padding: var(--space-6); }
  .cta-icon-wrap { display: none; }
}

/* ---------- 17. Newsletter ribbon ------------------------------- */
.newsletter-band {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 767.98px) { .newsletter-band { grid-template-columns: 1fr; padding: var(--space-5); } }
.newsletter-form {
  display: flex; gap: var(--space-2);
  background: var(--color-surface-variant);
  border-radius: var(--radius-pill);
  padding: 6px;
}
.newsletter-form input {
  flex: 1;
  height: 44px;
  padding: 0 var(--space-4);
  border: none; background: transparent;
  font-size: var(--fs-sm);
  outline: none;
}
.newsletter-form button { height: 44px; padding: 0 var(--space-5); }

/* ---------- 18. Toast ------------------------------------------- */
.toast-container-custom {
  position: fixed;
  top: calc(var(--header-height) + 16px);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
  max-width: calc(100vw - var(--space-7));
}
.toast-msg {
  pointer-events: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  padding: 14px 18px;
  font-size: var(--fs-sm);
  color: var(--color-text);
  min-width: 280px;
  max-width: 380px;
  animation: toastIn var(--dur-base) var(--ease-emph);
}
.toast-msg.success { border-left-color: var(--color-success); }
.toast-msg.error,
.toast-msg.danger  { border-left-color: var(--color-danger); }
.toast-msg.warning { border-left-color: var(--color-warning); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 19. Skeleton ---------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-variant) 0%, #ECEDF1 50%, var(--color-surface-variant) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- 20. Breadcrumbs ------------------------------------- */
.breadcrumb-bar {
  padding: var(--space-4) 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.breadcrumb-bar a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--color-primary); }
.breadcrumb-bar .sep { margin: 0 8px; opacity: 0.5; }
.breadcrumb-bar .current { color: var(--color-text); font-weight: 600; }

/* ---------- 21. Utilities --------------------------------------- */
.text-primary  { color: var(--color-primary) !important; }
.text-muted    { color: var(--color-text-muted) !important; }
.text-secondary{ color: var(--color-text-secondary) !important; }
.bg-primary    { background: var(--color-primary) !important; color: #fff; }
.bg-tonal      { background: var(--color-primary-container) !important; color: var(--color-on-primary-container); }
.bg-surface    { background: var(--color-surface) !important; }
.bg-surface-variant { background: var(--color-surface-variant) !important; }

.rounded-md  { border-radius: var(--radius-md) !important; }
.rounded-lg  { border-radius: var(--radius-lg) !important; }
.rounded-xl  { border-radius: var(--radius-xl) !important; }
.rounded-pill{ border-radius: var(--radius-pill) !important; }

.elev-1 { box-shadow: var(--elev-1); }
.elev-2 { box-shadow: var(--elev-2); }
.elev-3 { box-shadow: var(--elev-3); }

.divider { height: 1px; background: var(--color-divider); border: 0; margin: var(--space-6) 0; }

/* Bootstrap card override (keep BS markup working) */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.card-body { padding: var(--space-5); }

/* Bootstrap badge */
.badge {
  font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: var(--radius-pill);
}

/* Pagination */
.pagination .page-link {
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md) !important;
  margin: 0 3px;
  padding: 8px 14px;
  font-weight: 600;
}
.pagination .page-item.active .page-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ============================================================
   PRODUCT PAGES (list, category, detail)
   ============================================================ */

/* ---------- 23. Page header (listing) — compact single strip ---- */
.page-header {
  background: #fff;
  padding: 8px 0 10px;
  border-bottom: 1px solid #EAECF0;
}

/* Compact title + count row */
.ph-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.ph-title {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 0;
  line-height: 1.25;
}
.ph-count {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
  white-space: nowrap;
}
.ph-count strong { color: #374151; }

/* ---------- 24. Toolbar (sort + view + count) ------------------- */
.list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
  border-bottom: 1px solid #EAECF0;
}
.list-toolbar-left,
.list-toolbar-right {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.result-count {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
}
.result-count strong { color: var(--color-text); font-weight: 700; }

/* Custom sort select */
.sort-select-wrap {
  position: relative;
}
.sort-select-wrap::after {
  content: '\F282'; /* bi-chevron-down */
  font-family: 'bootstrap-icons';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.sort-select {
  appearance: none; -webkit-appearance: none;
  height: 40px;
  padding: 0 36px 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  transition: all var(--dur-fast) var(--ease-standard);
}
.sort-select:hover { border-color: var(--color-border-strong); }
.sort-select:focus { border-color: var(--color-primary); box-shadow: var(--elev-focus); }

/* View toggle */
.view-toggle {
  display: inline-flex;
  background: var(--color-surface-variant);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
}
.view-toggle-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.view-toggle-btn:hover { color: var(--color-text); }
.view-toggle-btn.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--elev-1); }

/* Mobile filter button */
.filter-toggle-btn {
  display: none;
  align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.filter-toggle-btn .filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .filter-toggle-btn { display: inline-flex; }
}

/* Active filter chips */
.active-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--space-4);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 6px 0 14px;
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
}
.filter-chip:hover { color: var(--color-on-primary-container); background: var(--color-primary-container); filter: brightness(0.96); }
.filter-chip .x {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(26,86,219,0.12);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  margin-left: 2px;
}
.filter-chip:hover .x { background: var(--color-primary); color: #fff; }
.clear-all-link {
  font-size: var(--fs-xs);
  color: var(--color-danger);
  font-weight: 600;
  text-decoration: none;
  align-self: center;
  margin-left: var(--space-2);
}
.clear-all-link:hover { text-decoration: underline; color: var(--color-danger); }

/* ---------- 25. Filter sidebar (category page) ------------------ */
.filter-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 991.98px) {
  .filter-layout { grid-template-columns: 1fr; gap: var(--space-4); }
}

.filter-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  max-height: calc(100vh - var(--header-height) - var(--space-7));
  overflow-y: auto;
}
@media (max-width: 991.98px) {
  .filter-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(360px, 90vw);
    height: 100vh;
    max-height: none;
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    z-index: var(--z-overlay);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-standard);
    box-shadow: var(--elev-4);
    padding-bottom: 80px;
  }
  .filter-sidebar.show { transform: translateX(0); }
  .filter-sidebar.show::after {
    content: '';
    position: fixed; inset: 0;
    background: var(--color-overlay);
    z-index: -1;
    left: 100%; width: 100vw;
  }
}

.filter-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.filter-sidebar-header h3 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.filter-sidebar-close {
  display: none;
  width: 32px; height: 32px;
  background: var(--color-surface-variant);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
}
@media (max-width: 991.98px) { .filter-sidebar-close { display: inline-flex; align-items: center; justify-content: center; } }

.filter-group {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
}
.filter-group:last-child { border-bottom: none; }
.filter-group h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.filter-options { display: flex; flex-direction: column; gap: 6px; }
.filter-option {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  transition: background var(--dur-fast) var(--ease-standard);
}
.filter-option:hover { background: var(--color-surface-variant); }
.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--color-primary);
  margin: 0;
  cursor: pointer;
}
.filter-option .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Color swatches inside filters */
.filter-color-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.filter-color {
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.filter-color:hover { transform: scale(1.1); }
.filter-color.selected {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}

.filter-actions {
  position: sticky; bottom: 0;
  background: var(--color-surface);
  margin: 0 calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-divider);
  display: flex; gap: 8px;
}

/* ---------- 26. Subcategory rail -------------------------------- */
.subcategory-rail {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: var(--space-2) 0 var(--space-4);
  margin-bottom: var(--space-4);
  scrollbar-width: thin;
}
.subcategory-rail::-webkit-scrollbar { height: 4px; }
.subcategory-rail::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-pill); }
.subcategory-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-standard);
}
.subcategory-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.subcategory-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.subcategory-chip .pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-variant);
  color: var(--color-text-muted);
}
.subcategory-chip:hover .pill { background: var(--color-primary-container); color: var(--color-primary); }
.subcategory-chip.active .pill { background: rgba(255,255,255,0.2); color: #fff; }

/* ---------- 27. Empty state ------------------------------------- */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
}
.empty-state .icon {
  width: 80px; height: 80px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-container);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}
.empty-state h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.empty-state p { color: var(--color-text-muted); margin-bottom: var(--space-4); max-width: 480px; margin-left: auto; margin-right: auto; }

/* ---------- 28. List view variant ------------------------------- */
.product-grid.list-view {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.product-grid.list-view .product-card {
  flex-direction: row;
  align-items: stretch;
}
.product-grid.list-view .product-card-image {
  width: 220px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
.product-grid.list-view .product-card-body { flex: 1; padding: var(--space-4) var(--space-5); }
.product-grid.list-view .product-card-name { font-size: var(--fs-base); -webkit-line-clamp: 1; min-height: auto; }
.product-grid.list-view .product-card-footer { flex-direction: row; align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-divider); }
.product-grid.list-view .product-card-actions { width: auto; min-width: 200px; margin-left: auto; }
@media (max-width: 575.98px) {
  .product-grid.list-view .product-card { flex-direction: column; }
  .product-grid.list-view .product-card-image { width: 100%; }
}

/* ============================================================
   PRODUCT DETAIL PAGE  — premium redesign
   ============================================================ */

/* ---------- 29a. Page wrapper ----------------------------------- */
.pd-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-9);
}
@media (max-width: 575.98px) { .pd-page { padding: var(--space-3) var(--space-3) var(--space-7); } }

/* Subtle background when on product detail page */
#main-content:has(.pd-page)          { background: #F7F8FA; }
#main-content:has(.product-grid)     { background: #F7F8FA; }

/* ---------- 29b. Breadcrumb ------------------------------------- */
.pd-breadcrumb { margin-bottom: var(--space-5); }
.pd-breadcrumb-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: 12px; color: var(--color-text-muted);
}
.pd-breadcrumb-inner a {
  color: var(--color-text-secondary); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.pd-breadcrumb-inner a:hover { color: var(--color-primary); }
.pd-sep { font-size: 10px; color: #CBD5E1; }
.pd-bc-current { color: var(--color-text); font-weight: 600; }

/* ---------- 29. Detail layout (backward compat stub) ------------ */
.product-detail {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 991.98px) {
  .product-detail { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------- 30. Gallery (new pd-* system) ----------------------- */
.pd-main {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: var(--space-7);
}
@media (max-width: 991.98px) { .pd-main { grid-template-columns: 1fr; gap: var(--space-5); } }

.pd-gallery {
  position: sticky;
  top: calc(var(--header-height, 72px) + 12px);
}
@media (max-width: 991.98px) { .pd-gallery { position: static; } }

.pd-gallery-inner { display: flex; gap: 10px; }

/* Vertical thumbnail strip */
.pd-thumbs {
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.pd-thumb {
  width: 58px; height: 58px;
  background: #F9FAFB;
  border: 1.5px solid #EAECF0;
  border-radius: 8px;
  cursor: pointer; overflow: hidden;
  transition: all 0.16s ease;
  padding: 0;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pd-thumb:hover { border-color: #94A3B8; background: #fff; }
.pd-thumb.active {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(26,86,219,0.18);
}

/* Main image box */
.pd-main-img {
  flex: 1; min-width: 0;
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F9FAFB;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.pd-main-img--full { width: 100%; }
.pd-main-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.38s ease, opacity 0.2s ease;
}
.pd-main-img:hover img { transform: scale(1.06); }
.pd-no-image {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 4rem; color: #CBD5E1;
}

/* Badge */
.pd-badge {
  position: absolute; top: 16px; left: 16px;
  padding: 5px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; z-index: 2;
}
.pd-badge--new { background: #EFF6FF; color: #1A56DB; border: 1px solid #BFDBFE; }
.pd-badge--best { background: #FFF7ED; color: #EA580C; border: 1px solid #FED7AA; }
.pd-badge--feat { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }

/* Wishlist btn on image */
.pd-wishlist-btn {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #E2E8F0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #64748B;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: all 0.18s ease; z-index: 2;
}
.pd-wishlist-btn:hover { background: #fff; color: #EF4444; border-color: #FCA5A5; }
.pd-wishlist-btn.is-active { color: #EF4444; background: #FEF2F2; border-color: #FCA5A5; }

/* Mobile: horizontal thumbs under main image */
@media (max-width: 575.98px) {
  .pd-gallery-inner { flex-direction: column-reverse; }
  .pd-thumbs { flex-direction: row; overflow-x: auto; }
  .pd-thumb { flex-shrink: 0; }
}

/* ---------- 31. Product info pane (new pd-* system) ------------- */
.pd-info {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #EAECF0;
  border-radius: 16px;
  padding: 24px 28px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  align-self: start;
}
@media (max-width: 991.98px) { .pd-info { padding: 20px; } }

.pd-eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  margin-bottom: 12px;
}
.pd-category-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-primary);
  background: rgba(26,86,219,0.07);
  padding: 3px 9px; border-radius: 20px;
  text-decoration: none;
  transition: background 0.15s;
}
.pd-category-pill:hover { background: rgba(26,86,219,0.14); }

.pd-avail {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
}
.pd-avail--in  { background: #ECFDF5; color: #059669; }
.pd-avail--out { background: #FFF1F2; color: #E11D48; }
.pd-avail--soon{ background: #FFFBEB; color: #D97706; }

.pd-title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.25; color: #111827;
  margin: 0 0 10px;
}

.pd-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px; font-size: 13px;
}
.pd-meta-item { display: flex; align-items: center; gap: 5px; }
.pd-meta-label { color: #9CA3AF; font-weight: 500; }
.pd-meta-item strong { color: #374151; font-weight: 700; }
.pd-meta-dot { color: #D1D5DB; }

.pd-short-desc {
  font-size: 13.5px; color: #6B7280;
  line-height: 1.65; margin: 0 0 14px;
}

.pd-rule { height: 1px; background: #F3F4F6; margin: 12px 0 16px; }

/* Attribute sections */
.pd-attr { margin-bottom: 16px; }
.pd-attr-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.pd-attr-name { font-size: 13px; font-weight: 700; color: #111827; letter-spacing: 0.01em; }
.pd-attr-hint  { font-size: 12px; color: #9CA3AF; font-weight: 500; }
.pd-attr-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.pd-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 34px; padding: 0 13px;
  background: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 7px; font-size: 13px; font-weight: 600;
  color: #374151; cursor: pointer;
  transition: all 0.14s ease;
}
.pd-chip:hover { border-color: #9CA3AF; background: #fff; }
.pd-chip.active {
  background: #EFF6FF; border-color: var(--color-primary);
  color: var(--color-primary); box-shadow: 0 0 0 2px rgba(26,86,219,0.1);
}

.pd-color-swatch {
  width: 32px; height: 32px;
  background-color: var(--swatch, #ddd);
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1.5px #D1D5DB;
  cursor: pointer; transition: all 0.16s ease;
}
.pd-color-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 2px #6B7280; }
.pd-color-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary); }

/* ---------- 32. Quantity stepper (new + legacy) ----------------- */
.pd-qty-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.pd-qty-label { font-size: 13px; font-weight: 700; color: #111827; white-space: nowrap; }

.pd-qty-stepper {
  display: inline-flex; align-items: stretch;
  background: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 8px; overflow: hidden; height: 38px;
}
.pd-qty-stepper .qty-dec,
.pd-qty-stepper .qty-inc {
  width: 38px; background: transparent; border: none;
  font-size: 1.05rem; font-weight: 600; color: #374151;
  cursor: pointer; transition: background 0.13s;
}
.pd-qty-stepper .qty-dec:hover,
.pd-qty-stepper .qty-inc:hover { background: #F3F4F6; color: var(--color-primary); }
.pd-qty-stepper .qty-input {
  width: 46px; text-align: center;
  border: none; background: transparent;
  font-weight: 700; font-size: 14px; color: #111827;
  outline: none; -moz-appearance: textfield;
}
.pd-qty-stepper .qty-input::-webkit-outer-spin-button,
.pd-qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Legacy quantity stepper (other templates) */
.qty-stepper {
  display: inline-flex; align-items: stretch;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); overflow: hidden; height: 48px;
}
.qty-stepper button {
  width: 40px; background: transparent; border: none;
  font-size: 1.1rem; color: var(--color-text);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-standard);
}
.qty-stepper button:hover { background: var(--color-surface-variant); color: var(--color-primary); }
.qty-input {
  width: 56px; text-align: center; border: none; background: transparent;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-base); color: var(--color-text); outline: none;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- 33. CTA buttons ------------------------------------- */
.pd-ctas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.pd-btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 48px;
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: #fff; font-size: 14px; font-weight: 700;
  text-decoration: none; border-radius: 10px; border: none;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 14px rgba(34,197,94,0.3);
  transition: all 0.18s ease;
}
.pd-btn-wa i { font-size: 1.15rem; }
.pd-btn-wa:hover {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  box-shadow: 0 5px 18px rgba(34,197,94,0.4);
  transform: translateY(-1px); color: #fff;
}

.pd-cart-form { width: 100%; }
.pd-btn-cart {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 48px;
  background: #F8FAFF; color: var(--color-primary);
  font-size: 14px; font-weight: 700;
  border: 1.5px solid var(--color-primary);
  border-radius: 10px; cursor: pointer;
  letter-spacing: 0.02em; transition: all 0.18s ease;
}
.pd-btn-cart i { font-size: 1rem; }
.pd-btn-cart:hover {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 3px 14px rgba(26,86,219,0.25);
  transform: translateY(-1px);
}

/* ---------- 34. Trust strip ------------------------------------- */
.pd-trust {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border: 1px solid #F3F4F6;
  border-radius: 12px; overflow: hidden; background: #FAFAFA;
  margin-top: 4px;
}
.pd-trust-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 5px;
  padding: 12px 8px; border-right: 1px solid #F3F4F6;
}
.pd-trust-item:last-child { border-right: none; }
.pd-trust-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  background: #EFF6FF;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; color: var(--color-primary);
}
.pd-trust-body { display: flex; flex-direction: column; gap: 1px; }
.pd-trust-body strong { font-size: 11px; font-weight: 700; color: #111827; }
.pd-trust-body span  { font-size: 10px; color: #9CA3AF; line-height: 1.3; }

/* ---------- 34b. Below-fold ------------------------------------ */
.pd-below { display: flex; flex-direction: column; gap: var(--space-8); }

/* Tabs card */
.pd-tabs-card {
  background: #fff; border: 1px solid #E8ECEF;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,0.04);
}
.pd-tabs-nav {
  display: flex; border-bottom: 1px solid #E8ECEF;
  background: #FAFBFC; overflow-x: auto;
}
.pd-tab-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 16px 24px;
  background: transparent; border: none;
  border-bottom: 2.5px solid transparent;
  font-size: var(--fs-sm); font-weight: 600;
  color: #94A3B8; cursor: pointer; white-space: nowrap;
  transition: all 0.18s ease; margin-bottom: -1px;
}
.pd-tab-btn:hover { color: #374151; }
.pd-tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: #fff;
}

.pd-tab-pane { display: none; padding: var(--space-6); }
.pd-tab-pane.active { display: block; }

/* Description */
.pd-description {
  font-size: var(--fs-base); line-height: 1.8;
  color: #4B5563; max-width: 820px;
}
.pd-description h1,.pd-description h2,.pd-description h3,.pd-description h4 {
  margin-top: var(--space-5); margin-bottom: var(--space-3);
  color: #1A1A2E; font-weight: 700;
}
.pd-description ul,.pd-description ol { padding-left: var(--space-5); }
.pd-description li { margin-bottom: 6px; }
.pd-description p { margin-bottom: var(--space-4); }

/* Spec grid */
.pd-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pd-spec-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid #F1F5F9;
}
.pd-spec-row:last-child { border-bottom: none; }
.pd-spec-label { min-width: 140px; font-size: var(--fs-sm); font-weight: 500; color: #94A3B8; flex-shrink: 0; }
.pd-spec-value { font-size: var(--fs-sm); font-weight: 600; color: #1A1A2E; }

/* Delivery grid */
.pd-delivery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
}
@media (max-width: 767.98px) { .pd-delivery-grid { grid-template-columns: 1fr; } }
.pd-delivery-item { display: flex; gap: 14px; align-items: flex-start; }
.pd-delivery-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--color-primary);
}
.pd-delivery-item strong { display: block; font-size: var(--fs-sm); font-weight: 700; color: #1A1A2E; margin-bottom: 4px; }
.pd-delivery-item p { font-size: var(--fs-sm); color: #64748B; line-height: 1.6; margin: 0; }

/* Related products */
.pd-related-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--space-5);
}
.pd-related-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-primary); margin: 0 0 4px;
}
.pd-related-title {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 800; color: #1A1A2E; margin: 0;
}
.pd-related-more {
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-primary); text-decoration: none;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.pd-related-more:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
  .pd-related-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Legacy compat: old gallery, trust-row, tabs (not used on new detail page) */
.gallery-main {
  position: relative; aspect-ratio: 1/1;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); overflow: hidden;
}
.gallery-main img {
  width: 100%; height: 100%; object-fit: contain;
  padding: var(--space-5); transition: transform var(--dur-slow) var(--ease-standard);
}
.gallery-main:hover img { transform: scale(1.03); }
.gallery-thumbs { display: flex; gap: 8px; margin-top: var(--space-3); overflow-x: auto; }
.product-thumb {
  flex-shrink: 0; width: 76px; height: 76px;
  background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: var(--radius-md); cursor: pointer; overflow: hidden;
  transition: all var(--dur-fast) var(--ease-standard);
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.product-thumb.active { border-color: var(--color-primary); }
.trust-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--color-surface-variant); border-radius: var(--radius-lg);
}
.trust-row .item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.trust-row .item i { font-size: 1.3rem; color: var(--color-primary); }
.detail-tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); }
.detail-tabs-nav button {
  padding: 12px 20px; background: transparent; border: none;
  border-bottom: 2px solid transparent; font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-text-muted); cursor: pointer;
}
.detail-tabs-nav button.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.detail-tab-pane { display: none; }
.detail-tab-pane.active { display: block; }
.spec-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.spec-row {
  display: grid; grid-template-columns: 40% 1fr;
  padding: 14px 18px; border-bottom: 1px solid var(--color-divider); font-size: var(--fs-sm);
}
.spec-row .label { color: var(--color-text-muted); font-weight: 500; }
.spec-row .value { color: var(--color-text); font-weight: 600; }
.description-content { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--color-text-secondary); }
.description-content ul, .description-content ol { padding-left: var(--space-5); }
.description-content li { margin-bottom: 6px; }

/* ---------- 35. Search results / suggestions ------------------- */
.search-suggestion-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
  transition: background var(--dur-fast) var(--ease-standard);
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item:hover { background: var(--color-primary-container); color: var(--color-on-primary-container); }
.search-suggestion-item .name { font-size: var(--fs-sm); font-weight: 600; flex: 1; }
.search-suggestion-item .sku { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---------- 36. Pagination centering ---------------------------- */
.pager-wrap {
  display: flex; justify-content: center;
  margin-top: var(--space-7);
}

/* ---------- 22. Respect motion preferences ---------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}