/* =============================================================
   Relaxo E‑commerce – Main Stylesheet
   Organized structure and section index for maintainability

   Table of Contents
   01) Design Tokens & Base Variables
   02) Global Base / Typography / Helpers
   03) Layout: Container & Structural Utilities
   04) Components: Navigation & Search
   05) Components: Hero / Carousel
   06) Components: Category Card
   07) Components: Product Card
   08) Components: Toast / Notifications
   09) Components: Footer
   10) Product Page: Gallery / Zoom / Comparison
   11) Empty / Promo / Tracking / Misc
   12) Responsive Breakpoints
   13) Animations
   14) Utility Shim (Tailwind-like)
   15) Theme Palettes (data-theme)
   ============================================================= */

/* 01) Design Tokens & Base Variables */
:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
    
    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
  
  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  
  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

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

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

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

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

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* 03) Layout: Container */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes moved: See Section 14 – Utility Shim */

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

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/* Custom CSS Variables for RelaxoLight Theme */
:root {
  --primary-red: #DC2626;
  --primary-red-hover: #B91C1C;
  --primary-red-light: #FEE2E2;
  --text-dark: #1F2937;
  --text-gray: #6B7280;
  --bg-light: #F9FAFB;
  --border-light: #E5E7EB;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
  --transition: all 0.3s ease;
}

/* 02) Global Base */
* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  background-color: white;
  color: var(--text-dark);
  line-height: 1.6;
}

/* 04) Navigation & Search */
.navbar {
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-link {
  font-weight: 500;
  color: var(--text-dark) !important;
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--primary-red) !important;
}

/* 04) Navigation & Search – Search Input */
.search-input {
  width: 300px;
  border-radius: 25px;
  border: 2px solid var(--border-light);
  padding: 8px 16px;
  transition: var(--transition);
}

.search-input:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px var(--primary-red-light);
}

/* 04) Navigation & Search – Suggestions */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  display: none;
}

.search-suggestion {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition);
}

.search-suggestion:hover {
  background-color: var(--bg-light);
}

.search-suggestion:last-child {
  border-bottom: none;
}

/* Badge Styles */
.badge {
  font-size: 0.7rem;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 05) Hero / Carousel */
.carousel-inner {
  height: 500px;
}

.hero-slide {
  height: 500px;
  background: linear-gradient(135deg, var(--primary-red), #991B1B);
  position: relative;
}

.hero-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 0 20px;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

.carousel-indicators button {
  background-color: white;
  opacity: 0.5;
}

.carousel-indicators button.active {
  opacity: 1;
}

/* Center-mode hero slider visual emphasis */
.hero-slider-container .slick-slider { margin: 0 auto; }
.hero-slider .slick-slide { opacity: .6; transition: transform .3s ease, opacity .3s ease; padding: 0 .5rem; position: relative; }
.hero-slider .slick-center { opacity: 1; transform: scale(1.02); }
.hero-slide-bg { min-height: 440px; background-size: cover; background-position: center; position: relative; border-radius: 16px; overflow: hidden; }
@media (max-width: 768px){ .hero-slide-bg { min-height: 320px; border-radius: 10px; } }

/* Overlay text alignment on hero */
.hero-slide-content { position: relative; min-height: 440px; display:flex; align-items:center; z-index: 2; }
.hero-slide-text { position: relative; color: #fff; max-width: 720px; padding: 1rem 0; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.hero-subtitle { font-size: 1rem; opacity: .95; margin-bottom: .25rem; }
.hero-title { font-size: 2.25rem; font-weight: 800; line-height: 1.2; margin: .25rem 0 .5rem; }
.hero-description { font-size: 1rem; opacity: .95; max-width: 60ch; }
.hero-actions { margin-top: 1rem; }
@media (max-width: 1024px){ .hero-title { font-size: 2rem; } }
@media (max-width: 768px){ .hero-slide-content { min-height: 320px; } .hero-title { font-size: 1.5rem; } .hero-description { font-size: .95rem; } }

/* Support classes for user-provided .new-slider markup */
.new-slider { width: 100%; height: 100%; position: relative; }
.new-slider .slider-item { position: relative; display:flex; align-items:center; justify-content:center; }
.new-slider .slider-text { position: absolute; inset: 0 auto auto 0; width: 100%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.new-slider .slider-text > * { pointer-events:auto; }

/* Page Content */
.page-content {
  min-height: calc(100vh - 200px);
}

/* 06) Category Card */
.category-card {
  border: none;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  height: 250px;
}

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

.category-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background-color: var(--bg-light);
}

.category-card .card-body {
  text-align: center;
  padding: 1rem;
}

.category-name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.category-count {
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* 07) Product Card */
.product-card {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition);
  height: 100%;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background-color: var(--bg-light);
}

.product-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.product-badge {
  background: var(--primary-red);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

.product-badge.sale {
  background: #059669;
}

.product-badge.new {
  background: #7C3AED;
}

.product-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  transition: var(--transition);
}

.product-card:hover .product-actions {
  opacity: 1;
}

.action-btn {
  background: white;
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
}

.action-btn:hover {
  background: var(--primary-red);
  color: white;
  transform: scale(1.1);
}

.product-info {
  padding: 1rem;
}

.product-title {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.3;
}

.product-category {
  color: var(--text-gray);
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.product-rating {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.stars {
  color: #F59E0B;
  margin-right: 5px;
}

.rating-count {
  color: var(--text-gray);
  margin-left: 5px;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.75rem;
}

.current-price {
  font-weight: 700;
  color: var(--primary-red);
  font-size: 1.1rem;
}

.original-price {
  color: var(--text-gray);
  text-decoration: line-through;
  font-size: 0.9rem;
}

.product-features {
  margin-bottom: 0.75rem;
}

.feature-tag {
  background: var(--primary-red-light);
  color: var(--primary-red);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-right: 4px;
  margin-bottom: 2px;
  display: inline-block;
}

.add-to-cart-btn {
  background: var(--primary-red);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--border-radius);
  font-weight: 500;
  font-size: 0.85rem;
  width: 100%;
  transition: var(--transition);
}

.add-to-cart-btn:hover {
  background: var(--primary-red-hover);
  transform: translateY(-1px);
}

/* List View */
.list-view .product-card {
  flex-direction: row;
  height: auto;
}

.list-view .product-image {
  width: 200px;
  height: 150px;
  flex-shrink: 0;
}

.list-view .product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Filters */
.card-header {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
}

.form-check-input:checked {
  background-color: var(--primary-red);
  border-color: var(--primary-red);
}

.form-check-input:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 0.25rem var(--primary-red-light);
}

/* Cart Styles */
.cart-item {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.cart-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-btn {
  background: var(--primary-red);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition);
}

.quantity-btn:hover {
  background: var(--primary-red-hover);
}

.quantity-input {
  width: 60px;
  text-align: center;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
}

/* Testimonials */
.testimonial-card {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.testimonial-rating {
  color: #F59E0B;
  margin-bottom: 0.75rem;
}

.testimonial-text {
  font-style: italic;
  color: var(--text-gray);
  margin-bottom: 1rem;
}

.testimonial-author {
  font-weight: 600;
  color: var(--text-dark);
}

.testimonial-location {
  color: var(--text-gray);
  font-size: 0.85rem;
}

/* Modals */
.modal-content {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
}

.modal-title {
  font-weight: 600;
  color: var(--text-dark);
}

/* Forms */
.form-control {
  border: 2px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 0.75rem;
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px var(--primary-red-light);
}

.form-label {
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

/* Buttons */
.btn {
  border-radius: var(--border-radius);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  transition: var(--transition);
}

.btn-danger {
  background: var(--primary-red);
  border-color: var(--primary-red);
}

.btn-danger:hover {
  background: var(--primary-red-hover);
  border-color: var(--primary-red-hover);
  transform: translateY(-1px);
}

.btn-outline-danger {
  color: var(--primary-red);
  border-color: var(--primary-red);
}

.btn-outline-danger:hover {
  background: var(--primary-red);
  border-color: var(--primary-red);
}

.btn-light {
  background: white;
  border-color: white;
  color: var(--text-dark);
}

.btn-light:hover {
  background: var(--bg-light);
  border-color: var(--bg-light);
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary-red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 08) Toast / Notifications */
.toast {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.toast-header {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-light);
}

.toast.success {
  border-left: 4px solid #10B981;
}

.toast.error {
  border-left: 4px solid #EF4444;
}

.toast.warning {
  border-left: 4px solid #F59E0B;
}

/* Account Page */
.list-group-item {
  border-color: var(--border-light);
  color: var(--text-dark);
  transition: var(--transition);
}

.list-group-item:hover {
  background: var(--bg-light);
}

.list-group-item.active {
  background: var(--primary-red);
  border-color: var(--primary-red);
}

/* 09) Footer */
footer {
  margin-top: auto;
}

footer a {
  text-decoration: none;
  transition: var(--transition);
}

footer a:hover {
  color: var(--primary-red) !important;
}

/* 12) Responsive */
@media (max-width: 768px) {
  .search-input {
    width: 200px;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }
  
  .hero-content p {
    font-size: 1rem;
  }
  
  .category-card {
    height: 200px;
  }
  
  .category-image {
    height: 120px;
  }
  
  .product-image {
    height: 180px;
  }
  
  .list-view .product-card {
    flex-direction: column;
  }
  
  .list-view .product-image {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 576px) {
  .search-input {
    width: 150px;
  }
  
  .hero-slide {
    height: 400px;
  }
  
  .carousel-inner {
    height: 400px;
  }
  
  .hero-content h1 {
    font-size: 1.75rem;
  }
  
  .category-card {
    height: 180px;
  }
  
  .category-image {
    height: 100px;
  }
  
  .product-actions {
    opacity: 1;
  }
  
  .cart-item-image {
    width: 60px;
    height: 60px;
  }
}

/* 13) Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

/* 10) Product Page: Gallery */
.product-gallery {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 1rem;
}

.gallery-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gallery-thumbnail {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: var(--border-radius);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
}

.gallery-thumbnail:hover,
.gallery-thumbnail.active {
  border-color: var(--primary-red);
}

.gallery-main {
  position: relative;
}

.gallery-main-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--border-radius);
  cursor: zoom-in;
}

/* 10) Product Page: Zoom */
.zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}

.zoom-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* 10) Product Page: Comparison */
.comparison-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--border-light);
  padding: 1rem;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: var(--transition);
  z-index: 1000;
}

.comparison-bar.active {
  transform: translateY(0);
}

.comparison-items {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.comparison-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-light);
  padding: 0.5rem;
  border-radius: var(--border-radius);
}

.comparison-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

/* 11) Empty States */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-gray);
}

.empty-state i {
  font-size: 3rem;
  color: var(--border-light);
  margin-bottom: 1rem;
}

.empty-state h3 {
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

/* 11) Promo Code */
.promo-section {
  background: var(--primary-red-light);
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.promo-input-group {
  display: flex;
  gap: 0.5rem;
}

.promo-input {
  flex: 1;
}

/* 11) Order Tracking */
/* 11.1) Home Sections & Belts */
.page-home { background: #fff; }
.home-section { padding: 4rem 0; }
.bg-surface { background: var(--surface, #ffffff); }
.bg-alt { background: var(--bg-light); }
.section-header { margin-bottom: 2rem; }
.section-title { font-size: 1.875rem; font-weight: 700; color: var(--text-dark); }
.section-subtitle { color: var(--text-gray); }

/* Why choose us belt */
.info-belt { background: var(--relaxo-blue); color: #fff; }
.info-grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 2rem; }
@media (min-width:768px){ .info-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .info-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.info-item { text-align: center; }
.info-icon { width: 64px; height: 64px; border-radius: 9999px; background: rgba(255,255,255,.2); margin: 0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size: 1.5rem; }
.info-title { font-weight: 600; margin-bottom: .25rem; }
.info-text { color: #dbeafe; }

/* Newsletter belt */
.newsletter-belt { background: linear-gradient(90deg, var(--relaxo-orange), #d97706); color: #fff; }
.newsletter-form { display: inline-flex; max-width: 32rem; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.newsletter-form input { flex: 1; padding: .75rem 1rem; border: none; outline: none; color: #111827; }
.newsletter-form button { background: #fff; color: var(--relaxo-orange); border: none; padding: .75rem 1.25rem; font-weight: 600; cursor: pointer; transition: background-color .15s ease; }
.newsletter-form button:hover { background: #f3f4f6; }
.newsletter-belt .note { color: #fee2e2; margin-top: .5rem; font-size: .875rem; }
.tracking-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
}

.tracking-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--border-light);
  z-index: 1;
}

.tracking-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 2;
}

.tracking-step-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 0.5rem;
  position: relative;
}

.tracking-step.completed .tracking-step-icon {
  background: var(--primary-red);
}

.tracking-step.active .tracking-step-icon {
  background: var(--primary-red);
  box-shadow: 0 0 0 4px var(--primary-red-light);
}

.tracking-step-title {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.tracking-step-time {
  font-size: 0.8rem;
  color: var(--text-gray);
}

/* ==========================================================
   Tailwind Utility Shim (custom CSS replacing Tailwind usage)
   ========================================================== */

:root {
  --relaxo-orange: #f97316;
  --relaxo-orange-dark: #ea580c;
  --relaxo-blue: #1e3a8a;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --blue-100: #dbeafe;
}

/* Layout & Display */
.block{display:block}.inline-block{display:inline-block}.hidden{display:none}
.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.text-center{text-align:center}

/* Spacing */
.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}
.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}
.mr-2{margin-right:.5rem}
.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}
.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-16{padding-left:4rem;padding-right:4rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-16{padding-top:4rem;padding-bottom:4rem}
.space-x-1>*+*{margin-left:.25rem}.space-x-3>*+*{margin-left:.75rem}.space-x-4>*+*{margin-left:1rem}
.space-x-6>*+*{margin-left:1.5rem}
.space-y-1>*+*{margin-top:.25rem}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}

/* Sizing */
.w-full{width:100%}.w-8{width:2rem}.w-16{width:4rem}.w-48{width:12rem}.w-80{width:20rem}
.w-5{width:1.25rem}
.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}
.max-w-md{max-width:28rem}.max-w-2xl{max-width:42rem}.max-h-96{max-height:24rem}

/* Position */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}.inset-y-0{top:0;bottom:0}
.top-0{top:0}.top-full{top:100%}.right-0{right:0}.right-6{right:1.5rem}.left-0{left:0}.bottom-6{bottom:1.5rem}
.-top-2{top:-.5rem}.-right-2{right:-.5rem}
.z-40{z-index:40}.z-50{z-index:50}

/* Typography */
.font-sans{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}
.text-white{color:#fff}.text-gray-400{color:var(--gray-400)}.text-gray-600{color:var(--gray-600)}.text-gray-700{color:var(--gray-700)}.text-gray-800{color:var(--gray-800)}
.text-gray-500{color:#6b7280}.text-red-600{color:#dc2626}
.text-relaxo-orange{color:var(--relaxo-orange)}.text-blue-100{color:var(--blue-100)}

/* Colors */
.bg-white{background-color:rgba(255,255,255,var(--bg-opacity,1))}
.bg-black{background-color:rgba(0,0,0,var(--bg-opacity,1))}
.bg-gray-50{background-color:var(--gray-50)}.bg-gray-100{background-color:var(--gray-100)}.bg-gray-200{background-color:var(--gray-200)}.bg-gray-800{background-color:var(--gray-800)}
.bg-relaxo-blue{background-color:var(--relaxo-blue)}.bg-relaxo-orange{background-color:var(--relaxo-orange)}.bg-relaxo-orange-dark{background-color:var(--relaxo-orange-dark)}
.bg-opacity-20{--bg-opacity:.2}.bg-opacity-50{--bg-opacity:.5}
.group:hover .group-hover\:bg-opacity-30{--bg-opacity:.3}

/* Borders & Radii */
.rounded-lg{border-radius:12px}.rounded-full{border-radius:9999px}
.rounded-l-lg{border-top-left-radius:12px;border-bottom-left-radius:12px}
.rounded-r-lg{border-top-right-radius:12px;border-bottom-right-radius:12px}
.rounded-b-lg{border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.border{border:1px solid var(--gray-200)}.border-t{border-top:1px solid var(--gray-200)}.border-b{border-bottom:1px solid var(--gray-200)}
.border-gray-200{border-color:var(--gray-200)!important}.border-gray-300{border-color:var(--gray-300)!important}.border-gray-700{border-color:var(--gray-700)!important}
.border-relaxo-orange{border-color:var(--relaxo-orange)!important}.border-b-2{border-bottom-width:2px}

/* Effects */
.shadow{box-shadow:var(--shadow-sm)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}
.transition-colors{transition:color .2s ease,background-color .2s ease,border-color .2s ease}
.transition-all{transition:all .2s ease}
.hover\:bg-gray-50:hover{background-color:var(--gray-50)}.hover\:bg-gray-100:hover{background-color:var(--gray-100)}
.hover\:bg-gray-200:hover{background-color:var(--gray-200)}
.hover\:text-relaxo-orange:hover{color:var(--relaxo-orange)}.hover\:bg-relaxo-orange-dark:hover{background-color:var(--relaxo-orange-dark)}
.opacity-0{opacity:0}.opacity-100{opacity:1}
.transform{transform:translateZ(0)}.translate-y-20{transform:translateY(5rem)}.translate-y-0{transform:translateY(0)}

/* Focus helpers (escaped colon) */
.focus\:outline-none:focus{outline:none}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.focus\:ring-relaxo-orange:focus{box-shadow:0 0 0 2px var(--relaxo-orange)}
.focus\:ring-white:focus{box-shadow:0 0 0 2px #fff}
.focus\:border-transparent:focus{border-color:transparent!important}

/* Responsive utilities */
@media (min-width:768px){
  .md\:flex{display:flex}.md\:block{display:block}.md\:hidden{display:none}
  .md\:mt-0{margin-top:0}.md\:flex-row{flex-direction:row}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1024px){
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Buttons for hero */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;border-radius:12px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn-primary{background-color:var(--relaxo-orange);color:#fff}
.btn-primary:hover{background-color:var(--relaxo-orange-dark)}
.btn-secondary{background-color:#fff;color:var(--relaxo-orange);border-color:var(--relaxo-orange)}
.btn-secondary:hover{background-color:var(--gray-50)}

/* Gradient helpers */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-from,var(--relaxo-orange)),var(--tw-gradient-to,var(--relaxo-orange-dark)))}
.from-relaxo-orange{--tw-gradient-from:var(--relaxo-orange)}
.to-orange-600{--tw-gradient-to:#d97706}

/* Spinner */
@keyframes twspin{to{transform:rotate(360deg)}}
.animate-spin{animation:twspin 1s linear infinite}
@keyframes twpulse{0%,100%{opacity:1}50%{opacity:.5}}
.animate-pulse{animation:twpulse 1.5s ease-in-out infinite}

/* Extra utilities used by header/mega menu */
.bg-red-500{background-color:#ef4444}
.h-3{height:.75rem}.h-4{height:1rem}
.max-h-64{max-height:16rem}
.max-w-6xl{max-width:72rem}
.w-64{width:16rem}.w-screen{width:100vw}
.ml-2{margin-left:.5rem}
.z-30{z-index:30}
.border-t-4{border-top-width:4px}
.duration-300{transition-duration:.3s}
.visible{visibility:visible}.invisible{visibility:hidden}
/* Group-hover helpers */
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:visible{visibility:visible}

/* ==========================================================
   Theme Palettes (switch via [data-theme="name"] on html/body)
   ========================================================== */

/* Default theme mapping (optional explicit) */
[data-theme="default"] {
  --brand-50:#fff7ed; --brand-100:#ffedd5; --brand-200:#fed7aa; --brand-300:#fdba74; --brand-400:#fb923c; --brand-500:#f97316; --brand-600:#ea580c; --brand-700:#c2410c; --brand-800:#9a3412; --brand-900:#7c2d12;
  --accent-500:#1e3a8a; --accent-600:#1e40af; --accent-700:#1d4ed8; --accent-800:#1e293b;
  --surface:#ffffff; --background:#f9fafb; --border:#e5e7eb; --text:#1f2937; --text-muted:#6b7280;
  --relaxo-orange: var(--brand-500);
  --relaxo-orange-dark: var(--brand-600);
  --relaxo-blue: var(--accent-500);
  --primary-red: var(--brand-600);
  --primary-red-hover: var(--brand-700);
  --primary-red-light: #fee2e2;
  --text-dark: var(--text);
  --text-gray: var(--text-muted);
  --bg-light: var(--background);
  --border-light: var(--border);
  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-btn-primary-text: #ffffff;
}

/* Ocean theme: teals & blues */
[data-theme="ocean"] {
  --brand-50:#ecfeff; --brand-100:#cffafe; --brand-200:#a5f3fc; --brand-300:#67e8f9; --brand-400:#22d3ee; --brand-500:#06b6d4; --brand-600:#0891b2; --brand-700:#0e7490; --brand-800:#155e75; --brand-900:#164e63;
  --accent-500:#2563eb; --accent-600:#1d4ed8; --accent-700:#1e40af; --accent-800:#1e3a8a;
  --surface:#ffffff; --background:#f0f9ff; --border:#dbeafe; --text:#0f172a; --text-muted:#475569;
  --relaxo-orange: var(--brand-500);
  --relaxo-orange-dark: var(--brand-600);
  --relaxo-blue: var(--accent-700);
  --primary-red: var(--brand-600);
  --primary-red-hover: var(--brand-700);
  --primary-red-light: #e0f2fe;
  --text-dark: var(--text);
  --text-gray: var(--text-muted);
  --bg-light: var(--background);
  --border-light: var(--border);
  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-btn-primary-text: #ffffff;
}

/* Sunset theme: warm oranges/pinks */
[data-theme="sunset"] {
  --brand-50:#fff1f2; --brand-100:#ffe4e6; --brand-200:#fecdd3; --brand-300:#fda4af; --brand-400:#fb7185; --brand-500:#f43f5e; --brand-600:#e11d48; --brand-700:#be123c; --brand-800:#9f1239; --brand-900:#881337;
  --accent-500:#fb923c; --accent-600:#f97316; --accent-700:#ea580c; --accent-800:#c2410c;
  --surface:#ffffff; --background:#fff7ed; --border:#fed7aa; --text:#1f2937; --text-muted:#6b7280;
  --relaxo-orange: var(--accent-600);
  --relaxo-orange-dark: var(--accent-700);
  --relaxo-blue: #7c3aed;
  --primary-red: var(--brand-600);
  --primary-red-hover: var(--brand-700);
  --primary-red-light: #ffe4e6;
  --text-dark: var(--text);
  --text-gray: var(--text-muted);
  --bg-light: var(--background);
  --border-light: var(--border);
  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-btn-primary-text: #ffffff;
}

/* Forest theme: greens */
[data-theme="forest"] {
  --brand-50:#f0fdf4; --brand-100:#dcfce7; --brand-200:#bbf7d0; --brand-300:#86efac; --brand-400:#4ade80; --brand-500:#22c55e; --brand-600:#16a34a; --brand-700:#15803d; --brand-800:#166534; --brand-900:#14532d;
  --accent-500:#0ea5e9; --accent-600:#0284c7; --accent-700:#0369a1; --accent-800:#075985;
  --surface:#ffffff; --background:#f0fdf4; --border:#dcfce7; --text:#052e16; --text-muted:#14532d;
  --relaxo-orange: var(--brand-500);
  --relaxo-orange-dark: var(--brand-600);
  --relaxo-blue: var(--accent-600);
  --primary-red: var(--brand-600);
  --primary-red-hover: var(--brand-700);
  --primary-red-light: #dcfce7;
  --text-dark: var(--text);
  --text-gray: var(--text-muted);
  --bg-light: var(--background);
  --border-light: var(--border);
  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-btn-primary-text: #052e16;
}

/* Violet theme: purples */
[data-theme="violet"] {
  --brand-50:#faf5ff; --brand-100:#f3e8ff; --brand-200:#e9d5ff; --brand-300:#d8b4fe; --brand-400:#c084fc; --brand-500:#a855f7; --brand-600:#9333ea; --brand-700:#7e22ce; --brand-800:#6b21a8; --brand-900:#581c87;
  --accent-500:#22d3ee; --accent-600:#06b6d4; --accent-700:#0891b2; --accent-800:#0e7490;
  --surface:#ffffff; --background:#faf5ff; --border:#e9d5ff; --text:#1f2937; --text-muted:#6b7280;
  --relaxo-orange: var(--brand-500);
  --relaxo-orange-dark: var(--brand-600);
  --relaxo-blue: var(--accent-700);
  --primary-red: var(--brand-600);
  --primary-red-hover: var(--brand-700);
  --primary-red-light: #f3e8ff;
  --text-dark: var(--text);
  --text-gray: var(--text-muted);
  --bg-light: var(--background);
  --border-light: var(--border);
  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-btn-primary-text: #ffffff;
}

/* ==========================================================
   16) Theme Switcher (Color Palette Bubble)
   ========================================================== */
.theme-bubble {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
}
.theme-bubble__toggle {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 9999px;
  background: var(--relaxo-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease;
}
.theme-bubble__toggle:hover { background: var(--relaxo-orange-dark); transform: translateY(-2px); }

.theme-panel {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 260px;
  background: #fff;
  color: var(--text-dark);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0,0,0,.15);
  padding: 12px;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.theme-bubble.is-open .theme-panel { opacity: 1; transform: translateY(0); visibility: visible; }

.theme-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 8px;
}
.theme-panel__close {
  background: transparent;
  border: none;
  color: var(--text-gray);
  font-size: 20px;
  cursor: pointer;
}
.theme-panel__swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.theme-swatch {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 2px solid #fff;
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.theme-swatch:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0,0,0,.18); }
.theme-swatch.is-active { outline: 2px solid var(--relaxo-orange); outline-offset: 2px; }

/* Static preview colors for each theme */
.theme-swatch[data-theme="default"] { background: linear-gradient(135deg, #f97316, #1e3a8a); }
.theme-swatch[data-theme="ocean"]   { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.theme-swatch[data-theme="sunset"]  { background: linear-gradient(135deg, #f43f5e, #f97316); }
.theme-swatch[data-theme="forest"]  { background: linear-gradient(135deg, #22c55e, #0ea5e9); }
.theme-swatch[data-theme="violet"]  { background: linear-gradient(135deg, #a855f7, #06b6d4); }
.overflow-y-auto{overflow-y:auto}
.hover:text-white:hover{color:#fff}