/* ==========================================================================
   iNoor App — Main Stylesheet
   One project-wide file per Frontend-doc §6. Split into pages/*.css only
   when a module genuinely outgrows this file.
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES — design tokens. Never hardcode color/spacing/radius elsewhere.
   ========================================================================== */
:root {
  /* Brand */
  --color-primary: #4FBFAC;         /* teal — wishlist/active states, page headers */
  --color-primary-dark: #359684;
  --color-primary-light: #E4F7F3;
  --color-accent: #EF6355;          /* coral — "change price type" hints, alerts */
  --color-product-code: #2E8B4F;    /* product code green */

  /* Semantic */
  --color-success: #22C55E;
  --color-success-bg: #F0FDF4;
  --color-danger: #DC2626;
  --color-danger-bg: #FEF2F2;
  --color-warning: #D97706;
  --color-info: #2563EB;

  /* Neutrals */
  --color-ink: #14181C;             /* primary action buttons (near-black pills) */
  --color-text-primary: #111827;
  --color-text-secondary: #4B5563;
  --color-text-muted: #6B7280;
  --color-text-subtle: #9CA3AF;
  --color-text-inverse: #FFFFFF;

  --color-bg-body: #F8F9FB;
  --color-bg-surface: #FFFFFF;
  --color-bg-muted: #F3F4F6;
  --color-bg-tinted: #FBF6FB;        /* lavender tint — Filters/Wishlist Status full-screen panels */
  --color-bg-overlay: rgba(17, 24, 39, 0.6);
  --overlay-white-strong: rgba(255, 255, 255, 0.94);  /* wishlist toggle chip on product images */
  --overlay-white-soft: rgba(255, 255, 255, 0.16);    /* icon-btn hover on teal accent headers */

  --color-border: #E7E9ED;
  --color-border-strong: #D8DBE1;
  --color-border-focus: var(--color-primary);

  /* Typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'DM Sans', var(--font-family-base);

  --font-size-2xs: 11px;   /* pill labels, timestamps */
  --font-size-xs: 12px;    /* metadata, captions */
  --font-size-sm: 13px;    /* secondary text, nav */
  --font-size-base: 15px;  /* body copy, default */
  --font-size-md: 16px;    /* product names, emphasized body */
  --font-size-lg: 19px;    /* section titles */
  --font-size-xl: 22px;    /* page titles */
  --font-size-2xl: 28px;   /* rare, display moments */
  --font-size-price: 17px; /* product price — distinct from body scale */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows — soft, ambient, premium rather than hard drop-shadows */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 2px 6px rgba(17, 24, 39, 0.06);
  --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04), 0 10px 24px -14px rgba(17, 24, 39, 0.16);
  --shadow-card-hover: 0 4px 10px rgba(17, 24, 39, 0.06), 0 20px 36px -16px rgba(17, 24, 39, 0.22);
  --shadow-md: 0 8px 20px -6px rgba(17, 24, 39, 0.12);
  --shadow-lg: 0 20px 44px -12px rgba(17, 24, 39, 0.22);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-spring: 320ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Icon sizes — every <svg> in the app picks one of these instead of a
     one-off width/height, so an icon never feels arbitrarily bigger or
     smaller than its neighbors from one component to the next. */
  --icon-size-xs: 14px;
  --icon-size-sm: 18px;
  --icon-size-md: 21px;
  --icon-size-lg: 28px;
  --icon-size-xl: 40px;

  /* Layout */
  --app-max-width: 1200px;
  --header-height: 64px;
  --bottom-nav-height: 62px;

  /* Fluid display sizes — for the few spots (splash wordmark, hero page
     titles) that should scale smoothly between mobile and large desktop
     instead of jumping at breakpoints. Everything else uses the fixed
     scale above so text stays predictable and comparable across pages. */
  --font-size-display: clamp(26px, 4vw + 12px, 40px);
  --font-size-hero: clamp(15px, 1.4vw + 8px, 19px);
}

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

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Removes the gray/blue rectangle Chrome/Safari draw on tap; keyboard
     focus stays fully visible via the :focus-visible rule below. */
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--color-bg-body);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

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

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-family-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
p { margin: 0; }

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

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
.plx-h1 { font-size: var(--font-size-2xl); font-weight: var(--weight-bold); }
.plx-h2 { font-size: var(--font-size-xl); font-weight: var(--weight-semibold); }
.plx-h3 { font-size: var(--font-size-lg); font-weight: var(--weight-semibold); }

.plx-text-muted { color: var(--color-text-muted); }
.plx-text-subtle { color: var(--color-text-subtle); }
.plx-text-sm { font-size: var(--font-size-sm); }

/* Truncate long product names to a fixed number of lines so cards with
   short and long titles stay the same height. */
.plx-line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ==========================================================================
   4. UTILITIES
   ========================================================================== */
.plx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.plx-skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
  z-index: 500;
}
.plx-skip-link:focus { transform: translateY(0); }

.plx-container {
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .plx-container { padding: 0 var(--space-6); }
}

/* ==========================================================================
   5. APP SHELL — header + scrollable content + bottom nav
   ========================================================================== */
.plx-app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.plx-content {
  flex: 1;
  padding-bottom: calc(var(--bottom-nav-height) + var(--space-6));
}

@media (min-width: 992px) {
  .plx-content { padding-bottom: var(--space-12); }
}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.plx-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

.plx-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding: var(--space-2) 0;
}

.plx-header-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.plx-header-greeting {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.plx-price-type-js {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.plx-price-type-js:hover { color: var(--color-text-primary); }

.plx-price-type-icon { width: 14px; height: 14px; transition: transform var(--transition-base); }
.plx-price-type-js[data-plx-open="true"] .plx-price-type-icon { transform: rotate(180deg); }

.plx-header-hint {
  font-size: var(--font-size-2xs);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

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

.plx-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.plx-icon-btn:hover { background: var(--color-bg-muted); }
.plx-icon-btn:active { transform: scale(0.92); }
.plx-icon-btn svg { width: var(--icon-size-md); height: var(--icon-size-md); }

.plx-icon-btn[data-plx-active="true"] { color: var(--color-primary); }

.plx-icon-btn[data-plx-action="add-wishlist"] svg {
  transition: transform var(--transition-spring), color var(--transition-fast);
}
.plx-icon-btn[data-plx-action="add-wishlist"][data-plx-active="true"] svg {
  color: var(--color-accent);
  fill: var(--color-accent);
  transform: scale(1.1);
}

.plx-badge-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-size: 10px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--color-bg-surface);
}
.plx-badge-count[data-plx-visible="false"] { display: none; }

/* Header nav — shown inline on desktop, hidden on mobile (bottom nav takes over) */
.plx-header-nav { display: none; }

@media (min-width: 992px) {
  .plx-header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-left: auto;
  }
  .plx-header-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    padding: var(--space-2) 0;
    transition: color var(--transition-fast);
  }
  .plx-header-nav-link:hover { color: var(--color-text-primary); }
  .plx-header-nav-link svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
  .plx-header-nav-link[data-plx-active="true"] { color: var(--color-primary); font-weight: var(--weight-semibold); }
  .plx-header-nav-link[data-plx-active="true"]::after {
    /* content: ''; */
    position: absolute;
    left: 0;
    right: 0;
    bottom: -13px;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
  }
}

/* ==========================================================================
   7. BOTTOM NAV — mobile/tablet only, app-like tab bar
   ========================================================================== */
.plx-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  height: var(--bottom-nav-height);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.05);
}

@media (min-width: 992px) {
  .plx-bottom-nav { display: none; }
}

.plx-bottom-nav-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--color-text-subtle);
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-medium);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.plx-bottom-nav-link:active { transform: scale(0.94); }

.plx-bottom-nav-link svg { width: var(--icon-size-md); height: var(--icon-size-md); transition: transform var(--transition-base); }

.plx-bottom-nav-link[data-plx-active="true"] { color: var(--color-primary); }
.plx-bottom-nav-link[data-plx-active="true"] svg { transform: translateY(-1px); }

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */
.plx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
              opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}
.plx-btn:active { transform: scale(0.97); }

.plx-btn-primary {
  background: var(--color-ink);
  color: var(--color-text-inverse);
  box-shadow: 0 2px 8px rgba(20, 24, 28, 0.18);
}
.plx-btn-primary:hover { opacity: 0.92; box-shadow: 0 4px 14px rgba(20, 24, 28, 0.24); }
button[hidden] {
    display: none;
}
.plx-btn-accent {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 2px 8px rgba(79, 191, 172, 0.3);
}
.plx-btn-accent:hover { background: var(--color-primary-dark); }

.plx-btn-secondary {
  background: var(--color-bg-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
.plx-btn-secondary:hover { background: var(--color-bg-muted); border-color: var(--color-text-subtle); }

.plx-btn-block { width: 100%; }
.plx-btn-sm { min-height: 38px; padding: var(--space-1) var(--space-4); font-size: var(--font-size-xs); }

.plx-btn:disabled,
.plx-btn[data-plx-loading="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ==========================================================================
   9. CARDS — categories & products
   ========================================================================== */
.plx-section {
  padding: var(--space-8) 0 0;
}

.plx-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.plx-section-link {
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
  transition: opacity var(--transition-fast);
}
.plx-section-link:hover { opacity: 0.7; }

/* Swiper gallery theme — shared by the Home banner and Product Detail
   gallery. See config/swiper-config.js for behaviour; a 0-1 image gallery
   never loads Swiper at all (data-plx-single="true", no dots/arrows). */
.plx-gallery { position: relative; }

.plx-gallery .plx-swiper {
  --swiper-theme-color: var(--color-primary);
  --swiper-pagination-bullet-inactive-color: var(--color-border-strong);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-size: 6px;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.plx-gallery .swiper-slide {
  aspect-ratio: 16 / 8;
  background: var(--color-bg-muted);
}
.plx-gallery .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

.plx-gallery--square .swiper-slide {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
}

.plx-gallery .swiper-pagination-bullet { transition: width var(--transition-base); }
.plx-gallery .swiper-pagination-bullet-active { width: 22px; border-radius: var(--radius-full); }

.plx-swiper-nav {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--overlay-white-strong);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary);
  opacity: 0;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
.plx-swiper-nav::after { content: none; }
.plx-swiper-nav svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.plx-swiper-nav.swiper-button-disabled { display: none; }

@media (hover: hover) and (pointer: fine) {
  .plx-gallery:hover .plx-swiper-nav { opacity: 1; }
  .plx-swiper-nav:hover { background: var(--color-bg-surface); }
}

/* Category chips */
.plx-category-list {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: 2px;
}

/* Mobile/tablet keep the native touch-scroll feel with no visible scrollbar. */
@media (max-width: 991px) {
  .plx-category-list { scrollbar-width: none; }
  .plx-category-list::-webkit-scrollbar { display: none; }
}

/* Desktop: a slim, theme-colored scrollbar makes the overflow obvious. */
@media (min-width: 992px) {
  .plx-category-list {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
    padding-bottom: var(--space-2);
  }
  .plx-category-list::-webkit-scrollbar { height: 6px; }
  .plx-category-list::-webkit-scrollbar-track { background: transparent; }
  .plx-category-list::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
  }
  .plx-category-list::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }
}

/* Desktop mouse: wheel-to-horizontal + click-drag are wired in main.js;
   this just signals the row is draggable there. Touch/mobile untouched. */
@media (hover: hover) and (pointer: fine) {
  .plx-category-list { cursor: grab; }
  .plx-category-list:active { cursor: grabbing; }
}

.plx-category-chip {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.plx-category-chip:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* Product grid */
.plx-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 576px) {
  .plx-product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
@media (min-width: 992px) {
  .plx-product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
  .plx-product-grid { grid-template-columns: repeat(5, 1fr); }
}

.plx-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.plx-product-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
}

.plx-product-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-muted);
  overflow: hidden;
}
.plx-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plx-product-card:hover .plx-product-media img { transform: scale(1.05); }

.plx-wishlist-toggle {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--overlay-white-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
  transition: transform var(--transition-fast);
}
.plx-wishlist-toggle:active { transform: scale(0.88); }
.plx-wishlist-toggle svg {
  width: 17px;
  height: 17px;
  color: var(--color-text-secondary);
  transition: transform var(--transition-spring), color var(--transition-fast);
}
.plx-wishlist-toggle[data-plx-active="true"] svg {
  color: var(--color-accent);
  fill: var(--color-accent);
  transform: scale(1.12);
}

.plx-product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.plx-product-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  min-height: calc(var(--font-size-md) * var(--line-height-snug) * 2);
  margin-bottom: var(--space-1);
}

.plx-product-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.plx-product-meta-code {
  color: var(--color-product-code);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}
.plx-product-meta-category {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plx-product-meta-dot {
  flex-shrink: 0;
  color: var(--color-border-strong);
}

.plx-product-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
}

.plx-product-price {
  font-family: var(--font-family-heading);
  font-weight: var(--weight-bold);
  font-size: var(--font-size-price);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.plx-product-packaging {
  font-size: var(--font-size-2xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.plx-product-body .plx-btn { margin-top: var(--space-3); }

/* Legacy single-line code/category (kept for any markup not yet migrated
   to .plx-product-name — safe no-op once all cards use the new layout). */
.plx-product-code {
  display: block;
  color: var(--color-product-code);
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
}
.plx-product-category {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--space-1);
}

/* ==========================================================================
   10. MODAL — price-type selector
   ========================================================================== */
.plx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-bg-overlay);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.plx-modal-overlay[data-plx-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.plx-modal {
  width: 100%;
  max-width: 360px;
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg);
  transform: scale(0.94) translateY(8px);
  transition: transform var(--transition-spring);
}
.plx-modal-overlay[data-plx-open="true"] .plx-modal { transform: scale(1) translateY(0); }

.plx-modal-title {
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-5);
}

.plx-price-type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.plx-price-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}
.plx-price-type-option:active { transform: scale(0.97); }
.plx-price-type-option svg { width: var(--icon-size-lg); height: var(--icon-size-lg); color: var(--color-primary); }
.plx-price-type-option[data-plx-active="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ==========================================================================
   11. TOAST — success/error notifications
   ========================================================================== */
.plx-toast {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--bottom-nav-height) + var(--space-4));
  z-index: 400;
  max-width: 360px;
  margin: 0 auto;
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--transition-base), transform var(--transition-spring);
}
.plx-toast[data-plx-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.plx-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plx-toast-icon svg { width: var(--icon-size-md); height: var(--icon-size-md); }

.plx-toast-title { font-weight: var(--weight-semibold); font-size: var(--font-size-sm); }
.plx-toast-desc { color: var(--color-text-muted); font-size: var(--font-size-xs); }

@media (min-width: 992px) {
  .plx-toast { left: auto; right: var(--space-8); bottom: var(--space-8); }
}

/* ==========================================================================
   12. PAGE HEADER — simpler header used by inner pages (All Products, etc.)
   Shares .plx-header / .plx-icon-btn / .plx-badge-count / .plx-header-nav.
   ========================================================================== */
.plx-page-header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
}

.plx-page-header-bar .plx-h2 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plx-page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ==========================================================================
   13. FILTERS BAR — Filters trigger + Carton/Inner quick toggle
   ========================================================================== */
.plx-filters-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  background: var(--color-bg-body);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.plx-filters-bar-group { display: flex; align-items: center; gap: var(--space-5); }

.plx-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  min-height: 36px;
  transition: color var(--transition-fast);
}
.plx-filters-btn:hover { color: var(--color-primary-dark); }
.plx-filters-btn svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }

.plx-filters-btn[data-plx-action="toggle-price-type"] svg {
  transition: transform var(--transition-base);
}
.plx-filters-btn[data-plx-action="toggle-price-type"][data-plx-loading="true"] svg {
  transform: rotate(180deg);
}

/* ==========================================================================
   14. FORMS — quantity input used by the wishlist quantity modal
   ========================================================================== */
.plx-form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.plx-label { font-size: var(--font-size-sm); font-weight: var(--weight-medium); }

.plx-input {
  width: 100%;
  padding: var(--space-2) 0;
  border: none;
  border-bottom: 1.5px solid var(--color-border);
  background: transparent;
  font-size: var(--font-size-md);
  transition: border-color var(--transition-fast);
}
.plx-input:focus { border-color: var(--color-border-focus); }

/* Quantity modal input only — suppress the native colored focus rectangle
   on mouse/touch click while keeping a visible outline for keyboard focus. */
#plxQuantityInputJs:focus { outline: none; }
#plxQuantityInputJs:focus-visible { outline: 0; outline-offset: 2px; }

.plx-field-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.plx-field-hint[data-plx-error="true"] { color: var(--color-danger); font-weight: var(--weight-medium); }

/* ==========================================================================
   15. QUANTITY MODAL — product summary + actions
   ========================================================================== */
.plx-modal-product {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.plx-modal-product img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.plx-modal-product-name { font-weight: var(--weight-semibold); font-size: var(--font-size-base); }
.plx-modal-product-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.plx-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.plx-modal-actions .plx-btn-text {
  min-height: 36px;
  padding: 0 var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.plx-modal-actions .plx-btn-text:active { transform: scale(0.96); }
.plx-modal-actions .plx-btn-text[data-plx-emphasis="true"] { color: var(--color-primary-dark); }
.plx-modal-actions .plx-btn-text:disabled { color: var(--color-text-subtle); cursor: not-allowed; }

/* ==========================================================================
   16. GRID STATES — loading skeleton, empty result, load-more
   ========================================================================== */
.plx-grid-status {
  grid-column: 1 / -1;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.plx-grid-status[data-plx-visible="true"] { display: flex; }
.plx-grid-status img { width: 120px; height: 120px; }
.plx-grid-status svg { color: var(--color-text-subtle); }
.plx-grid-status .plx-h3 { color: var(--color-text-primary); }

.plx-load-more-js {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  display: none;
}
.plx-load-more-js[data-plx-visible="true"] { display: block; }

.plx-skeleton-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.plx-skeleton-media,
.plx-skeleton-line {
  background: linear-gradient(90deg, var(--color-bg-muted) 25%, var(--color-border) 37%, var(--color-bg-muted) 63%);
  background-size: 400% 100%;
  animation: plx-skeleton-shimmer 1.4s ease infinite;
}
.plx-skeleton-media { aspect-ratio: 1 / 1; }
.plx-skeleton-line { height: 12px; margin: var(--space-3); border-radius: var(--radius-sm); }

@keyframes plx-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ==========================================================================
   17. PRODUCT DETAIL
   ========================================================================== */

/* Minimal header: back + wishlist only, no title/search (matches reference) */
.plx-detail-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

.plx-container--narrow { max-width: 640px; }

.plx-content--flush { padding-bottom: var(--space-10); }

.plx-detail-price-type {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-3);
}

/* Wishlist heart reuses the same card-style .plx-wishlist-toggle look used
   on product cards, but here it sits inline (not absolutely positioned over
   an image) on the right edge of the price-type row. */
.plx-detail-price-type .plx-wishlist-toggle {
  position: static;
  margin-left: auto;
  flex-shrink: 0;
}

/* Give the price-type trigger a clear "this is clickable" treatment here
   only — Home's compact header pill (shared .plx-price-type-js) is untouched. */
.plx-detail-price-type .plx-price-type-js {
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-primary-dark);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.plx-detail-price-type .plx-price-type-js:hover { background: var(--color-primary); color: var(--color-text-inverse); }
.plx-detail-price-type .plx-price-type-js:active { transform: scale(0.96); }

.plx-detail-title {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xl);
}

.plx-detail-price {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-6);
}

.plx-detail-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--weight-bold);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-accent);
}

.plx-spec-list { margin: 0 0 var(--space-8); }

.plx-spec-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--font-size-base);
  border-bottom: 1px solid var(--color-border);
}
.plx-spec-row:last-child { border-bottom: 0; }
.plx-spec-row dt { font-weight: var(--weight-medium); color: var(--color-text-muted); flex: 0 0 40%; }
.plx-spec-row dd { margin: 0; color: var(--color-text-primary); font-weight: var(--weight-medium); }

.plx-detail-description { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin-bottom: var(--space-8); }

/* Desktop: gallery left (sticky), info right — avoids a narrow column
   swimming in empty space on wide viewports, DOM order stays unchanged. */
@media (min-width: 992px) {
  .plx-container--narrow { max-width: var(--app-max-width); }

  .plx-detail-layout {
    display: grid;
    grid-template-columns: minmax(320px, 460px) 1fr;
    gap: var(--space-12);
    align-items: start;
  }

  .plx-detail-gallery {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

/* ==========================================================================
   18. FILTERS
   ========================================================================== */

.plx-content--tinted { background: var(--color-bg-tinted); }

/* Stays a comfortable settings-panel width at every breakpoint — unlike
   .plx-container--narrow this is never widened back out on desktop. */
.plx-container--form { 
  /* max-width: 720px; */
 }

.plx-filters-section { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.plx-filters-section:first-child { padding-top: var(--space-5); }
.plx-filters-section-title { margin-bottom: var(--space-4); }

.plx-toggle-chip-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.plx-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.plx-toggle-chip:active { transform: scale(0.97); }
.plx-toggle-chip svg { width: var(--icon-size-sm); height: var(--icon-size-sm); display: none; }
.plx-toggle-chip[data-plx-active="true"] {
  background: var(--color-ink);
  color: var(--color-text-inverse);
}
.plx-toggle-chip[data-plx-active="true"] svg { display: block; }

/* Range filter — native <input type="range"> thumbs so drag/tap/keyboard
   all work for free; only their visual chrome is themed.
   Thumb centering verified against actual rendered pixels (not guessed):
   input box height == track height (6px), thumb margin-top = -(thumb - track)/2. */
.plx-range-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  accent-color: var(--color-primary);
  cursor: pointer;
}
.plx-range-input::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: transparent; }
.plx-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 3px solid var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.plx-range-input::-webkit-slider-thumb:active { transform: scale(1.1); }
.plx-range-input::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--color-bg-muted); }
.plx-range-input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 3px solid var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
/* Replace the native focus rectangle with a ring on the thumb itself. */
.plx-range-input:focus-visible { outline: none; }
.plx-range-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--color-primary-light), var(--shadow-sm); }
.plx-range-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--color-primary-light), var(--shadow-sm); }

/* Price Range — two overlapping .plx-range-input thumbs sharing one track,
   the classic dependency-free two-handle slider technique: each input is
   transparent/pointer-events:none except its own thumb, so both handles
   stay independently draggable. */
.plx-price-range { padding: var(--space-2) 0 0; }

.plx-price-range-values {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-md);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.plx-price-range-track { position: relative; height: 22px; }

.plx-price-range-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  transform: translateY(-50%);
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
}

.plx-price-range-fill {
  position: absolute;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  left: var(--plx-fill-left, 0%);
  width: var(--plx-fill-width, 100%);
}

.plx-price-range-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: none;
}
.plx-price-range-input::-webkit-slider-runnable-track { background: transparent; }
.plx-price-range-input::-moz-range-track { background: transparent; }
.plx-price-range-input::-webkit-slider-thumb { pointer-events: auto; }
.plx-price-range-input::-moz-range-thumb { pointer-events: auto; }
#plxPriceMaxSliderJs.plx-price-range-input { z-index: 2; }
#plxPriceMinSliderJs.plx-price-range-input { z-index: 1; }

.plx-price-range-bounds {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* Search input with a leading icon (reusable for the future Search page too) */
.plx-input-wrapper { position: relative; }
.plx-input-wrapper .plx-input-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--space-3);
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  pointer-events: none;
}
.plx-input-wrapper .plx-input-icon svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.plx-input-wrapper .plx-input {
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}
.plx-input-wrapper .plx-input:focus { border-color: var(--color-border-focus); }

.plx-category-checklist { margin-top: var(--space-5); max-height: 360px; overflow-y: auto; }

.plx-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  transition: color var(--transition-fast);
}
.plx-category-row:last-child { border-bottom: 0; }
.plx-category-row[data-plx-select-all] { font-weight: var(--weight-semibold); }
.plx-category-row[data-plx-visible="false"] { display: none; }

.plx-category-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-ink);
  flex-shrink: 0;
  cursor: pointer;
}

.plx-category-empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  display: none;
}
.plx-category-empty[data-plx-visible="true"] { display: block; }

/* Sticky bottom action bar — full-bleed background, content column aligned */
.plx-filters-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 150;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) 0;
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.05);
}
.plx-filters-action-bar-inner {
  display: flex;
  gap: var(--space-3);
}
.plx-filters-action-bar .plx-btn-secondary { flex: 1; }
.plx-filters-action-bar .plx-btn-primary { flex: 1.4; }

/* ==========================================================================
   19. WISHLIST STATUS
   ========================================================================== */

/* Solid-teal header variant — only Wishlist Status uses this so far. */
.plx-header--accent {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-dark) 130%);
  border-bottom: 0;
}
.plx-header--accent .plx-h2,
.plx-header--accent .plx-icon-btn,
.plx-header--accent .plx-header-nav-link { color: var(--color-text-inverse); }
.plx-header--accent .plx-icon-btn:hover { background: var(--overlay-white-soft); }
.plx-header--accent .plx-header-nav-link[data-plx-active="true"] {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.plx-wishlist-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 0;
}

.plx-wishlist-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.plx-wishlist-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.plx-wishlist-card-title { font-size: var(--font-size-base); font-weight: var(--weight-semibold); margin-bottom: 4px; }
.plx-wishlist-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-success);
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-xs);
  margin-left: var(--space-1);
}
.plx-wishlist-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}
.plx-wishlist-status[data-plx-status="cancelled"] { color: var(--color-danger); }
.plx-wishlist-card-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ==========================================================================
   20. SEARCH
   ========================================================================== */

/* The whole header row acts as the search bar — back + input + clear. */
.plx-search-header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
}

.plx-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  padding: var(--space-2) 0;
}
.plx-search-input:focus-visible {
outline: 0;
}
.plx-search-input::placeholder { color: var(--color-text-subtle); }

.plx-search-list { padding: var(--space-2) 0; }

.plx-search-term-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-3) 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}
.plx-search-term-row:last-child { border-bottom: 0; }
.plx-search-term-row:hover { color: var(--color-primary-dark); }
.plx-search-term-row svg { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-text-subtle); flex-shrink: 0; }

.plx-search-result-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  transition: opacity var(--transition-fast);
}
.plx-search-result-row:last-child { border-bottom: 0; }
.plx-search-result-row:active { opacity: 0.7; }

.plx-search-result-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-bg-muted);
  flex-shrink: 0;
}

.plx-search-result-body { min-width: 0; flex: 1; }
.plx-search-result-name {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plx-search-result-code { color: var(--color-product-code); font-weight: var(--weight-semibold); }
.plx-search-result-category { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plx-search-result-price { font-weight: var(--weight-bold); font-size: var(--font-size-sm); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.plx-search-panel[data-plx-visible="false"] { display: none; }

/* ==========================================================================
   21. NOTIFICATIONS
   ========================================================================== */

/* Filter trigger + dropdown — anchored top-right of the header, like the
   captured reference. Native positioning, no dropdown library. */
.plx-notif-filter { position: relative; }

.plx-notif-filter-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 152px;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  z-index: 250;
  display: none;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.plx-notif-filter-menu[data-plx-open="true"] {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.plx-notif-filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast);
}
.plx-notif-filter-option:hover { background: var(--color-bg-muted); }
.plx-notif-filter-option[data-plx-active="true"] {
  color: var(--color-primary-dark);
  font-weight: var(--weight-semibold);
}

/* Reference shows the empty-state graphic vertically centered in the
   available content area, not top-anchored like the other empty states. */
.plx-grid-status.plx-empty-state--centered { min-height: 50vh; justify-content: center; }

.plx-notif-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 0;
}

.plx-notif-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}
.plx-notif-card[data-plx-read="false"] { border-left: 3px solid var(--color-primary); }

.plx-notif-card-title { font-weight: var(--weight-semibold); margin-bottom: 2px; }
.plx-notif-card-message { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.plx-notif-card-date { font-size: var(--font-size-2xs); color: var(--color-text-muted); }

/* Success accent matches the recorded toast exactly (thin left border). */
.plx-toast { border-left: 3px solid var(--color-success); }

/* ==========================================================================
   22. AUTH — Splash / Login / OTP
   ========================================================================== */

.plx-splash {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 130%);
}

.plx-splash-badge {
  width: 92px;
  height: 92px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}
.plx-splash-badge img { width: 42px; height: 42px; }

.plx-splash-mascot {
  width: clamp(140px, 34vw, 220px);
  animation: plx-splash-float 2.6s ease-in-out infinite;
}

@keyframes plx-splash-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.plx-splash-progress {
  width: 120px;
  height: 3px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.plx-splash-progress::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  border-radius: var(--radius-full);
  background: var(--color-text-inverse);
  animation: plx-splash-progress var(--plx-splash-duration, 2000ms) ease-in-out forwards;
}
@keyframes plx-splash-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

.plx-auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
}

.plx-auth-header {
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  padding: 0 var(--space-4);
}

.plx-auth-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-10);
}

.plx-auth-logo { margin-bottom: var(--space-10); }
.plx-auth-logo img {
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-card);
    -webkit-border-radius: var(--radius-full);
    -moz-border-radius: var(--radius-full);
    -ms-border-radius: var(--radius-full);
    -o-border-radius: var(--radius-full);
}

.plx-auth-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.plx-auth-title { font-size: var(--font-size-lg); font-weight: var(--weight-bold); }
.plx-auth-info-icon { color: var(--color-primary); flex-shrink: 0; }

.plx-auth-subtitle {
  width: 100%;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
}
.plx-auth-subtitle strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); }

.plx-auth-field { position: relative; width: 100%; margin-bottom: var(--space-6); }
.plx-auth-field-label {
  position: absolute;
  left: var(--space-4);
  top: -8px;
  background: var(--color-bg-surface);
  padding: 0 var(--space-1);
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-medium);
  color: var(--color-primary-dark);
  z-index: 1;
}
.plx-auth-field-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.plx-auth-input {
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast);
}
.plx-auth-input:focus { border-color: var(--color-primary); }
.plx-auth-field[data-plx-error="true"] .plx-auth-input { border-color: var(--color-danger); }
.plx-auth-field-error {
  display: none;
  padding: var(--space-2) var(--space-4) 0;
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}
.plx-auth-field[data-plx-error="true"] .plx-auth-field-error { display: block; }

.plx-otp-row { display: flex; gap: var(--space-2); justify-content: center; width: 100%; margin-bottom: var(--space-5); }
.plx-otp-box {
  width: 44px;
  height: 52px;
  min-width: 0;
  flex: 1 1 44px;
  max-width: 48px;
  text-align: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-semibold);
  transition: border-color var(--transition-fast);
}
.plx-otp-box:focus { border-color: var(--color-primary); }
.plx-otp-box[data-plx-filled="true"] { border-color: var(--color-primary); }

.plx-auth-timer {
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.plx-auth-resend {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}
.plx-auth-resend-link {
  color: var(--color-primary-dark);
  font-weight: var(--weight-semibold);
}
.plx-auth-resend-link[data-plx-disabled="true"] { color: var(--color-text-subtle); pointer-events: none; }

/* ==========================================================================
   23. WISHLIST CART
   ========================================================================== */

.plx-cart-list { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) 0; }

.plx-cart-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}

.plx-cart-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.plx-cart-card-title { font-weight: var(--weight-bold); font-size: var(--font-size-md); margin-bottom: 2px; }
.plx-cart-card-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.plx-cart-card-price { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }
.plx-cart-remove {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  color: var(--color-danger);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}
.plx-cart-remove:hover { background: var(--color-danger-bg); }
.plx-cart-remove svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }

.plx-cart-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}
.plx-cart-stepper-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.plx-cart-stepper-btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.plx-cart-stepper-btn:active { transform: scale(0.92); }
.plx-cart-stepper-value { min-width: 36px; text-align: center; font-size: var(--font-size-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

.plx-cart-card-totals { display: flex; justify-content: space-between; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.plx-cart-card-totals strong { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

.plx-cart-summary {
  position: sticky;
  bottom: 0;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.05);
}
.plx-cart-summary[data-plx-visible="false"] { display: none; }
.plx-cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.plx-cart-summary-row strong { font-size: var(--font-size-md); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.plx-cart-disclaimer {
  font-size: var(--font-size-2xs);
  color: var(--color-danger);
  font-style: italic;
  margin: var(--space-2) 0 var(--space-3);
}

/* ==========================================================================
   24. WISHLIST DETAIL — Items / Status tabs + timeline
   ========================================================================== */

.plx-detail-cancel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.plx-detail-cancel-status { font-size: var(--font-size-sm); font-weight: var(--weight-semibold); color: var(--color-text-subtle); }
.plx-detail-cancel-status[data-plx-cancelled="true"] { color: var(--color-danger); }

.plx-wishlist-cancel-hint { color: var(--color-text-muted); font-size: var(--font-size-xs); margin-bottom: var(--space-5); }

.plx-detail-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); }
.plx-detail-tab {
  position: relative;
  padding: var(--space-3) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.plx-detail-tab[data-plx-active="true"] { color: var(--color-primary-dark); }
.plx-detail-tab[data-plx-active="true"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}
.plx-detail-tab-panel[data-plx-visible="false"] { display: none; }

.plx-status-heading { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.plx-status-heading strong { color: var(--color-text-primary); font-weight: var(--weight-bold); }
.plx-status-heading[data-plx-cancelled="true"] strong { color: var(--color-danger); }
.plx-status-heading[data-plx-cancelled="false"] strong  {
    color: var(--color-success);
}
.plx-status-timeline { display: flex; flex-direction: column; }
.plx-status-step { display: flex; gap: var(--space-4); padding-bottom: var(--space-6); position: relative; }
.plx-status-step:last-child { padding-bottom: 0; }
.plx-status-step::before {
  content: '';
  position: absolute;
  left: 11px; top: 26px; bottom: 0;
  width: 2px;
  background: var(--color-border-strong);
}
.plx-status-step:last-child::before { display: none; }
.plx-status-step[data-plx-complete="true"]::before { background: var(--color-success); }

.plx-status-dot {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.plx-status-step[data-plx-complete="true"] .plx-status-dot {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-inverse);
}
.plx-status-step[data-plx-cancelled-step="true"][data-plx-complete="true"] .plx-status-dot {
  background: var(--color-danger);
  border-color: var(--color-danger);
}
.plx-status-dot svg { width: var(--icon-size-xs); height: var(--icon-size-xs); }

.plx-status-label { font-weight: var(--weight-semibold); }
.plx-status-step[data-plx-cancelled-step="true"] .plx-status-label { color: var(--color-danger); }
.plx-status-date { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.plx-cart-item-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.plx-cart-item-thumb { width: 48px; height: 48px; border-radius: var(--radius-md); object-fit: cover; background: var(--color-bg-muted); flex-shrink: 0; }
.plx-cart-item-code { font-weight: var(--weight-semibold); color: var(--color-product-code); }
.plx-cart-item-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ==========================================================================
   25. CATEGORIES — full browse grid + right-side quick-filter drawer
   ========================================================================== */

.plx-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-3);
  padding: var(--space-6) 0;
}
@media (min-width: 576px) { .plx-categories-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .plx-categories-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1400px) { .plx-categories-grid { grid-template-columns: repeat(8, 1fr); } }

.plx-category-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.plx-category-tile[data-plx-visible="false"] { display: none; }
.plx-category-tile-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-bg, var(--color-primary-light));
  color: var(--tile-fg, var(--color-primary-dark));
  overflow: hidden;
  transition: transform var(--transition-fast);
}
.plx-category-tile:hover .plx-category-tile-icon,
.plx-category-tile:focus-visible .plx-category-tile-icon { transform: translateY(-2px) scale(1.05); }
.plx-category-tile-icon img { width: 100%; height: 100%; object-fit: cover; }
.plx-category-tile-icon svg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.plx-category-tile-label {
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

/* Colorful, tokenized tile palette — rotates via data-plx-tile-color 1..6 */
.plx-category-tile-icon[data-plx-tile-color="1"] { --tile-bg: #FEE2E2; --tile-fg: #DC2626; }
.plx-category-tile-icon[data-plx-tile-color="2"] { --tile-bg: #FEF3C7; --tile-fg: #B45309; }
.plx-category-tile-icon[data-plx-tile-color="3"] { --tile-bg: #DBEAFE; --tile-fg: #1D4ED8; }
.plx-category-tile-icon[data-plx-tile-color="4"] { --tile-bg: #EDE9FE; --tile-fg: #6D28D9; }
.plx-category-tile-icon[data-plx-tile-color="5"] { --tile-bg: #D1FAE5; --tile-fg: #047857; }
.plx-category-tile-icon[data-plx-tile-color="6"] { --tile-bg: var(--color-primary-light); --tile-fg: var(--color-primary-dark); }

.plx-categories-empty[data-plx-visible="false"] { display: none; }

/* Right-side collapsible category drawer — quick-filter over All Products */
.plx-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: var(--color-bg-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.plx-drawer-overlay[data-plx-open="true"] { opacity: 1; pointer-events: auto; }

.plx-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-base);
}
.plx-drawer-overlay[data-plx-open="true"] .plx-drawer { transform: translateX(0); }

.plx-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.plx-drawer-title { font-size: var(--font-size-lg); font-weight: var(--weight-bold); }

.plx-drawer-search { padding: var(--space-4) var(--space-5) 0; flex-shrink: 0; }

.plx-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }

.plx-drawer-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.plx-drawer-row[data-plx-active="true"] { background: var(--color-ink); color: var(--color-text-inverse); }
.plx-drawer-row[data-plx-visible="false"] { display: none; }

@media (min-width: 992px) {
  .plx-drawer { width: min(400px, 32vw); }
}
#plxDetailContentJs {
    padding: var(--space-5) 0;
}