/**
 * ============================================================================
 * TUSHKABINI.MK DESIGN SYSTEM
 * ============================================================================
 *
 * Brand Identity: Premium Bathroom Fixtures & Shower Cabins
 * Target Market: Macedonian Customers
 * Design Philosophy: Clean, Modern, Trustworthy, Conversion-Optimized
 *
 * Brand Palette:
 *   Tushka Navy  #0A2B5C  — primary (logo, headings, structure)
 *   Tushka Sky   #00AEEF  — accent (CTA, links, hover states, ".mk" mark)
 *
 * Version: 2.0.0 (rebrand)
 * ============================================================================
 */

/**
 * ============================================================================
 * 1. DESIGN TOKENS (CSS Custom Properties)
 * ============================================================================
 */

:root {
  /* =========================================
     BRAND COLORS
     ========================================= */

  /* Brand Aliases (canonical names) */
  --tushka-navy:       #0A2B5C;      /* Primary brand color */
  --tushka-navy-dark:  #061A3D;      /* Hover / depth */
  --tushka-navy-deep:  #051634;      /* Footer / overlays */
  --tushka-sky:        #00AEEF;      /* Accent / CTA */
  --tushka-sky-dark:   #0095CC;      /* CTA hover */
  --tushka-sky-soft:   #E8F7FE;      /* Tinted backgrounds */

  /* Primary Scale - Tushka Navy (Trust, Premium, Structure) */
  --color-primary-900: #051634;      /* Darkest - Footer base */
  --color-primary-800: #061A3D;      /* Dark - Hover state */
  --color-primary-700: #0A2B5C;      /* MAIN BRAND NAVY */
  --color-primary-600: #14457E;      /* Slightly lifted */
  --color-primary-500: #2A5E9A;      /* Medium */
  --color-primary-400: #5C82B3;      /* Lighter */
  --color-primary-300: #8FA8CB;      /* Light */
  --color-primary-200: #C2CFE2;      /* Pale */
  --color-primary-100: #E0E7F0;      /* Very pale */
  --color-primary-50:  #F0F4F9;      /* Subtle backgrounds */

  /* Secondary Scale - Tushka Sky (Water, Freshness, CTA) */
  --color-secondary-900: #003B57;
  --color-secondary-800: #005475;
  --color-secondary-700: #006D93;
  --color-secondary-600: #0095CC;    /* Sky hover */
  --color-secondary-500: #00AEEF;    /* MAIN BRAND SKY */
  --color-secondary-400: #33C0F4;
  --color-secondary-300: #66D1F8;
  --color-secondary-200: #99E0FB;
  --color-secondary-100: #D0EFFD;
  --color-secondary-50:  #E8F7FE;

  /* Accent Scale - Tushka Sky (CTA emphasis - aliased to sky) */
  --color-accent-900: #003B57;
  --color-accent-800: #005475;
  --color-accent-700: #006D93;
  --color-accent-600: #0095CC;
  --color-accent-500: #00AEEF;       /* CTA */
  --color-accent-400: #33C0F4;
  --color-accent-300: #66D1F8;
  --color-accent-200: #99E0FB;
  --color-accent-100: #D0EFFD;
  --color-accent-50:  #E8F7FE;

  /* Neutral Colors - Cool Grays tuned to navy (Text, Backgrounds, Borders) */
  --color-gray-900: #1A202C;         /* Darkest Text */
  --color-gray-800: #2D3748;         /* Dark Text */
  --color-gray-700: #4A5568;         /* Body Text */
  --color-gray-600: #718096;         /* Muted Text */
  --color-gray-500: #A0AEC0;         /* Disabled Text */
  --color-gray-400: #CBD5E0;         /* Borders */
  --color-gray-300: #E2E8F0;         /* Light Borders */
  --color-gray-200: #E5E9F0;         /* Dividers (brand soft) */
  --color-gray-100: #EDF2F7;         /* Light Backgrounds */
  --color-gray-50:  #F5F7FA;         /* Subtle Backgrounds (brand soft gray) */
  --color-white:    #ffffff;         /* Pure White */
  --color-black:    #000000;         /* Pure Black */

  /* Semantic Colors */
  --color-success-dark:   #065f46;   /* Success Dark */
  --color-success:        #10b981;   /* Success Main */
  --color-success-light:  #d1fae5;   /* Success Light */

  --color-error-dark:     #991b1b;   /* Error Dark */
  --color-error:          #ef4444;   /* Error Main */
  --color-error-light:    #fee2e2;   /* Error Light */

  --color-warning-dark:   #92400e;   /* Warning Dark */
  --color-warning:        #f59e0b;   /* Warning Main */
  --color-warning-light:  #fef3c7;   /* Warning Light */

  --color-info-dark:      #006D93;   /* Info Dark (brand sky dark) */
  --color-info:           #00AEEF;   /* Info Main (brand sky) */
  --color-info-light:     #E8F7FE;   /* Info Light */

  /* =========================================
     TYPOGRAPHY
     ========================================= */

  /* Font Families - Inter is the single brand typeface */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;

  /* Font Sizes - Type Scale (1.250 - Major Third) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px - Base */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  /* Font Weights */
  --font-light:     300;
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  /* Line Heights */
  --leading-none:     1;
  --leading-tight:    1.25;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* =========================================
     SPACING SYSTEM
     ========================================= */

  /* Base: 4px (0.25rem) */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;   /* 2px */
  --space-1:    0.25rem;    /* 4px */
  --space-1-5:  0.375rem;   /* 6px */
  --space-2:    0.5rem;     /* 8px */
  --space-2-5:  0.625rem;   /* 10px */
  --space-3:    0.75rem;    /* 12px */
  --space-3-5:  0.875rem;   /* 14px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-7:    1.75rem;    /* 28px */
  --space-8:    2rem;       /* 32px */
  --space-9:    2.25rem;    /* 36px */
  --space-10:   2.5rem;     /* 40px */
  --space-11:   2.75rem;    /* 44px */
  --space-12:   3rem;       /* 48px */
  --space-14:   3.5rem;     /* 56px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-28:   7rem;       /* 112px */
  --space-32:   8rem;       /* 128px */
  --space-36:   9rem;       /* 144px */
  --space-40:   10rem;      /* 160px */
  --space-44:   11rem;      /* 176px */
  --space-48:   12rem;      /* 192px */
  --space-52:   13rem;      /* 208px */
  --space-56:   14rem;      /* 224px */
  --space-60:   15rem;      /* 240px */
  --space-64:   16rem;      /* 256px */
  --space-72:   18rem;      /* 288px */
  --space-80:   20rem;      /* 320px */
  --space-96:   24rem;      /* 384px */

  /* =========================================
     SIZING SYSTEM
     ========================================= */

  /* Container Widths */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1536px;

  /* Max Widths for Content */
  --max-width-xs:    20rem;   /* 320px */
  --max-width-sm:    24rem;   /* 384px */
  --max-width-md:    28rem;   /* 448px */
  --max-width-lg:    32rem;   /* 512px */
  --max-width-xl:    36rem;   /* 576px */
  --max-width-2xl:   42rem;   /* 672px */
  --max-width-3xl:   48rem;   /* 768px */
  --max-width-4xl:   56rem;   /* 896px */
  --max-width-5xl:   64rem;   /* 1024px */
  --max-width-6xl:   72rem;   /* 1152px */
  --max-width-7xl:   80rem;   /* 1280px */
  --max-width-full:  100%;

  /* =========================================
     BORDERS
     ========================================= */

  /* Border Widths */
  --border-0:   0;
  --border:     1px;
  --border-2:   2px;
  --border-4:   4px;
  --border-8:   8px;

  /* Border Radius */
  --radius-none:  0;
  --radius-sm:    0.125rem;   /* 2px */
  --radius:       0.25rem;    /* 4px */
  --radius-md:    0.375rem;   /* 6px */
  --radius-lg:    0.5rem;     /* 8px */
  --radius-xl:    0.75rem;    /* 12px */
  --radius-2xl:   1rem;       /* 16px */
  --radius-3xl:   1.5rem;     /* 24px */
  --radius-full:  9999px;     /* Pill shape */

  /* =========================================
     SHADOWS
     ========================================= */

  --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:       0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl:   0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none:  0 0 #0000;

  /* Product Card Shadows */
  --shadow-card:        0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover:  0 8px 24px rgba(0, 0, 0, 0.12);

  /* =========================================
     TRANSITIONS & ANIMATIONS
     ========================================= */

  /* Transition Durations */
  --duration-75:    75ms;
  --duration-100:   100ms;
  --duration-150:   150ms;
  --duration-200:   200ms;
  --duration-300:   300ms;
  --duration-500:   500ms;
  --duration-700:   700ms;
  --duration-1000:  1000ms;

  /* Transition Timing Functions */
  --ease-linear:      linear;
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);

  /* =========================================
     Z-INDEX SCALE
     ========================================= */

  --z-0:      0;
  --z-10:     10;
  --z-20:     20;
  --z-30:     30;
  --z-40:     40;
  --z-50:     50;
  --z-modal:  1000;
  --z-toast:  1100;
  --z-tooltip: 1200;

  /* =========================================
     GRID & LAYOUT
     ========================================= */

  /* Grid Gap Sizes */
  --gap-xs:   var(--space-2);
  --gap-sm:   var(--space-4);
  --gap-md:   var(--space-6);
  --gap-lg:   var(--space-8);
  --gap-xl:   var(--space-12);

  /* Product Grid */
  --product-grid-columns-mobile:  1;
  --product-grid-columns-tablet:  2;
  --product-grid-columns-desktop: 3;
  --product-grid-columns-wide:    4;
}

/**
 * ============================================================================
 * 2. BASE STYLES
 * ============================================================================
 */

/* Body Base */
body {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings - default to brand navy */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--tushka-navy);
  margin-top: 0;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

h1, .h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
}

h3, .h3 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

h4, .h4 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

h5, .h5 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

h6, .h6 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/* Responsive Headings */
@media (max-width: 768px) {
  h1, .h1 { font-size: var(--text-4xl); }
  h2, .h2 { font-size: var(--text-3xl); }
  h3, .h3 { font-size: var(--text-2xl); }
  h4, .h4 { font-size: var(--text-xl); }
}

/* Paragraphs */
p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* Links - brand sky */
a {
  color: var(--tushka-sky);
  text-decoration: none;
  transition: color var(--duration-200) var(--ease-out);
}

a:hover {
  color: var(--tushka-sky-dark);
  text-decoration: underline;
}

/* Strong & Bold */
strong, b {
  font-weight: var(--font-bold);
}

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

/**
 * ============================================================================
 * 3. UTILITY CLASSES
 * ============================================================================
 */

/* Text Colors */
.text-primary { color: var(--color-primary-600); }
.text-secondary { color: var(--color-secondary-600); }
.text-accent { color: var(--color-accent-500); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-muted { color: var(--color-gray-600); }

/* Background Colors */
.bg-primary { background-color: var(--color-primary-600); }
.bg-secondary { background-color: var(--color-secondary-600); }
.bg-accent { background-color: var(--color-accent-500); }
.bg-light { background-color: var(--color-gray-50); }
.bg-white { background-color: var(--color-white); }

/* Container */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

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

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Section Spacing */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

/**
 * ============================================================================
 * 4. COMPONENT STYLES
 * ============================================================================
 */

/* ---------------------------------------------
   BUTTONS
   --------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: var(--border-2) solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-200) var(--ease-out);
  user-select: none;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.3);
}

/* Primary Button - Tushka Sky (main CTA color) */
.btn-primary {
  background-color: var(--tushka-sky);
  color: var(--color-white);
  border-color: var(--tushka-sky);
}

.btn-primary:hover {
  background-color: var(--tushka-sky-dark);
  border-color: var(--tushka-sky-dark);
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 174, 239, 0.25);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Secondary Button - Tushka Navy (structural CTA) */
.btn-secondary {
  background-color: var(--tushka-navy);
  color: var(--color-white);
  border-color: var(--tushka-navy);
}

.btn-secondary:hover {
  background-color: var(--tushka-navy-dark);
  border-color: var(--tushka-navy-dark);
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Accent Button - Sky pop CTA (alias of primary for emphasis use cases) */
.btn-accent {
  background-color: var(--tushka-sky);
  color: var(--color-white);
  border-color: var(--tushka-sky);
}

.btn-accent:hover {
  background-color: var(--tushka-sky-dark);
  border-color: var(--tushka-sky-dark);
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 174, 239, 0.3);
}

/* Outline Button - Navy bordered */
.btn-outline {
  background-color: transparent;
  color: var(--tushka-navy);
  border-color: var(--tushka-navy);
}

.btn-outline:hover {
  background-color: var(--tushka-navy);
  color: var(--color-white);
  text-decoration: none;
}

/* Ghost Button */
.btn-ghost {
  background-color: transparent;
  color: var(--color-gray-700);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
  text-decoration: none;
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

.btn-xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-xl);
}

/* Full Width Button */
.btn-block {
  display: flex;
  width: 100%;
}

/* Disabled Button */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------
   FORMS
   --------------------------------------------- */

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

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
}

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

.form-control {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  background-clip: padding-box;
  border: var(--border) solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-200) var(--ease-out),
              box-shadow var(--duration-200) var(--ease-out);
}

.form-control:focus {
  outline: none;
  border-color: var(--tushka-sky);
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
}

.form-control::placeholder {
  color: var(--color-gray-500);
}

.form-control:disabled {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
}

/* Textarea */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Select */
select.form-control {
  cursor: pointer;
}

/* Form Validation */
.form-control.is-valid {
  border-color: var(--color-success);
}

.form-control.is-invalid {
  border-color: var(--color-error);
}

.invalid-feedback {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-error);
}

.valid-feedback {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-success);
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: var(--space-2);
  cursor: pointer;
}

.form-check-label {
  font-size: var(--text-base);
  cursor: pointer;
}

/* ---------------------------------------------
   CARDS
   --------------------------------------------- */

.card {
  background-color: var(--color-white);
  border: var(--border) solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--duration-300) var(--ease-out),
              transform var(--duration-300) var(--ease-out);
}

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

.card-header {
  padding: var(--space-6);
  background-color: var(--color-gray-50);
  border-bottom: var(--border) solid var(--color-gray-200);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-6);
  background-color: var(--color-gray-50);
  border-top: var(--border) solid var(--color-gray-200);
}

.card-title {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

.card-text {
  margin-bottom: var(--space-4);
  color: var(--color-gray-600);
}

/* ---------------------------------------------
   BADGES
   --------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radius-full);
}

.badge-primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

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

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

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

.badge-secondary {
  background-color: var(--color-secondary-100);
  color: var(--color-secondary-800);
}

/* ---------------------------------------------
   ALERTS
   --------------------------------------------- */

.alert {
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
  border: var(--border) solid transparent;
  border-radius: var(--radius-lg);
}

.alert-success {
  background-color: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success-dark);
}

.alert-error {
  background-color: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error-dark);
}

.alert-warning {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning);
  color: var(--color-warning-dark);
}

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

/* ---------------------------------------------
   TRUST BADGES
   --------------------------------------------- */

.trust-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-xl);
  transition: transform var(--duration-200) var(--ease-out);
}

.trust-badge:hover {
  transform: translateY(-2px);
}

.trust-badge-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
  color: var(--color-primary-600);
  font-size: var(--text-4xl);
}

.trust-badge-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

.trust-badge-text {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

/**
 * ============================================================================
 * 5. HEADER & NAVIGATION
 * ============================================================================
 */

/* ---------------------------------------------
   SITE HEADER
   --------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-50);
  transition: box-shadow var(--duration-300) var(--ease-out);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-container {
  width: 100%;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-5) 0;
}

/* Site Branding */
.site-branding {
  flex-shrink: 0;
  z-index: 2;
}

/* ---------------------------------------------
   DESKTOP NAVIGATION
   --------------------------------------------- */

.main-navigation {
  display: none; /* Hidden on mobile by default */
  flex: 1;
  margin-left: var(--space-8);
}

@media (min-width: 1024px) {
  .main-navigation {
    display: block;
  }
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a {
  display: block;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-700);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-200) var(--ease-out);
}

.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Dropdown Menu (Categories) */
.nav-menu .menu-item-has-children {
  position: relative;
}

.nav-menu .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--space-2);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
}

/* Submenu */
.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--duration-200) var(--ease-out);
  z-index: var(--z-50);
}

.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu .sub-menu li {
  margin: 0;
}

.nav-menu .sub-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-200) var(--ease-out);
}

.nav-menu .sub-menu a:hover {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
}

/* ---------------------------------------------
   MEGA MENU
   --------------------------------------------- */

/* Mega menu parent indicator (larger caret) */
.nav-menu .menu-item-has-mega-menu > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--space-3);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  transition: transform var(--duration-200) var(--ease-out);
}

.nav-menu .menu-item-has-mega-menu:hover > a::after {
  transform: rotate(180deg);
}

/* Mega menu container */
.nav-menu .mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: var(--container-xl);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--tushka-sky);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  padding: var(--space-8) var(--space-6);
  margin-top: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-20px);
  transition: all var(--duration-300) var(--ease-out);
  z-index: calc(var(--z-50) + 10);
}

/* Show mega menu on hover and when active class is added */
.nav-menu .menu-item-has-mega-menu:hover > .mega-menu,
.nav-menu .menu-item-has-mega-menu:focus-within > .mega-menu,
.nav-menu .menu-item-has-mega-menu.mega-menu-active > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Grid layout for categories */
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1280px) {
  .mega-menu-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Category item styling */
.mega-menu-item {
  margin: 0;
}

.mega-menu-item > a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-gray-800);
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  background-color: var(--color-gray-50);
  transition: all var(--duration-200) var(--ease-out);
}

.mega-menu-item > a:hover {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-200);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Hide mega menu on mobile/tablet */
@media (max-width: 1023px) {
  .mega-menu {
    display: none !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mega-menu,
  .nav-menu > li > a,
  .mega-menu-item > a {
    transition: none;
  }
}

/* ---------------------------------------------
   MOBILE MENU TOGGLE
   --------------------------------------------- */

.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  z-index: var(--z-50);
  transition: transform var(--duration-200) var(--ease-out);
}

@media (min-width: 1024px) {
  .mobile-menu-toggle {
    display: none;
  }
}

.mobile-menu-toggle:hover {
  transform: scale(1.05);
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-gray-700);
  border-radius: 2px;
  transition: all var(--duration-300) var(--ease-out);
}

.hamburger-line + .hamburger-line {
  margin-top: 5px;
}

/* Animated hamburger when menu is open */
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ---------------------------------------------
   HEADER CART ICON
   --------------------------------------------- */

.header-cart {
  display: none;
  position: relative;
  margin-left: var(--space-4);
}

@media (min-width: 768px) {
  .header-cart {
    display: block;
  }
}

.cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-gray-700);
  border-radius: var(--radius-lg);
  transition: all var(--duration-200) var(--ease-out);
}

.cart-icon:hover {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
}

.cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: var(--font-bold);
  color: var(--color-white);
  background-color: var(--tushka-sky);
  border-radius: var(--radius-full);
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 174, 239, 0.4);
}

/* ---------------------------------------------
   MOBILE MENU
   --------------------------------------------- */

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  background-color: var(--color-white);
  box-shadow: var(--shadow-2xl);
  z-index: var(--z-modal);
  overflow-y: auto;
  transition: right var(--duration-300) var(--ease-out);
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Mobile Menu Header */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
  flex-shrink: 0;
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  background: none;
  border: none;
  color: var(--color-gray-700);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--duration-200) var(--ease-out);
}

.mobile-menu-close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

/* Mobile Navigation */
.mobile-navigation {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-menu li {
  margin: 0;
}

.mobile-nav-menu > li > a {
  display: block;
  padding: var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-gray-800);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all var(--duration-200) var(--ease-out);
}

.mobile-nav-menu > li > a:hover,
.mobile-nav-menu > li.current-menu-item > a {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
}

/* Mobile Submenu */
.mobile-nav-menu .menu-item-has-children > a {
  position: relative;
  padding-right: var(--space-12);
}

.mobile-nav-menu .menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--duration-200) var(--ease-out);
}

.mobile-nav-menu .menu-item-has-children.active > a::after {
  transform: translateY(-50%) rotate(180deg);
}

.mobile-nav-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-300) var(--ease-out);
}

.mobile-nav-menu .menu-item-has-children.active > .sub-menu {
  max-height: 500px;
}

.mobile-nav-menu .sub-menu li {
  padding-left: var(--space-4);
}

.mobile-nav-menu .sub-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-gray-700);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-200) var(--ease-out);
}

.mobile-nav-menu .sub-menu a:hover {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
}

/* Mobile Menu Cart */
.mobile-menu-cart {
  padding: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
  flex-shrink: 0;
}

/* Mobile Menu Backdrop */
.mobile-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: calc(var(--z-modal) - 1);
  transition: all var(--duration-300) var(--ease-out);
}

.mobile-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/**
 * ============================================================================
 * 6. LOGO & BRANDING
 * ============================================================================
 */

/* ---------------------------------------------
   LOGO STYLES
   --------------------------------------------- */

.site-logo {
  display: inline-block;
  line-height: 0;
  transition: opacity var(--duration-200) var(--ease-out);
}

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

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

/* Logo Size Variants */
.site-logo-sm img {
  max-height: 40px;
}

.site-logo-md img {
  max-height: 60px;
}

.site-logo-lg img {
  max-height: 80px;
}

.site-logo-xl img {
  max-height: 100px;
}

/* Default Logo Size */
.site-logo img {
  max-height: 60px;
}

/* Header Logo */
.site-header .site-logo img {
  max-height: 50px;
}

@media (min-width: 768px) {
  .site-header .site-logo img {
    max-height: 60px;
  }
}

@media (min-width: 1024px) {
  .site-header .site-logo img {
    max-height: 80px;
  }
}

/* Footer Logo */
.site-footer .site-logo img {
  max-height: 50px;
  opacity: 0.9;
}

/* Mobile Menu Logo */
.mobile-menu .site-logo img {
  max-height: 40px;
}

/* Logo in Hero Section */
.hero-section .site-logo img {
  max-height: 100px;
}

@media (min-width: 768px) {
  .hero-section .site-logo img {
    max-height: 120px;
  }
}

/* Logo Mark Only (Icon without text) */
.logo-mark {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Brand Colors from Logo */
.brand-navy {
  color: var(--tushka-navy);
}

.brand-sky {
  color: var(--tushka-sky);
}

/* Legacy aliases for backward compatibility */
.brand-blue { color: var(--tushka-navy); }
.brand-teal { color: var(--tushka-sky); }

/* Background patterns using logo colors */
.brand-pattern-bg {
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-secondary-50) 100%);
}

.brand-gradient-bg {
  background: linear-gradient(135deg, var(--tushka-navy) 0%, var(--tushka-sky) 100%);
  color: var(--color-white);
}

/**
 * ============================================================================
 * 7. WOOCOMMERCE STYLES
 * ============================================================================
 */

/* ---------------------------------------------
   PRODUCT GRID
   --------------------------------------------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(var(--product-grid-columns-mobile), 1fr);
  gap: var(--gap-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(var(--product-grid-columns-tablet), 1fr);
  }
}

@media (min-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(var(--product-grid-columns-desktop), 1fr);
    gap: var(--gap-lg);
  }
}

@media (min-width: 1280px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(var(--product-grid-columns-wide), 1fr);
  }
}

/* ---------------------------------------------
   PRODUCT CARD
   --------------------------------------------- */

.woocommerce ul.products li.product {
  background-color: var(--color-white);
  border: var(--border) solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--duration-300) var(--ease-out),
              box-shadow var(--duration-300) var(--ease-out);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.woocommerce ul.products li.product a {
  text-decoration: none;
}

.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--duration-500) var(--ease-out);
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
  margin: var(--space-4) 0 var(--space-2);
  padding: 0 var(--space-4);
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--tushka-navy);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-4);
}

.woocommerce ul.products li.product .price del {
  font-size: var(--text-lg);
  color: var(--color-gray-500);
  margin-right: var(--space-2);
  font-weight: var(--font-normal);
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--tushka-navy);
  font-weight: var(--font-bold);
}

/* ---------------------------------------------
   ADD TO CART BUTTON
   --------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.add_to_cart_button,
.woocommerce .button.product_type_simple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  color: var(--color-white);
  background-color: var(--tushka-sky);
  border: var(--border-2) solid var(--tushka-sky);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-200) var(--ease-out);
  text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--tushka-sky-dark);
  border-color: var(--tushka-sky-dark);
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 174, 239, 0.25);
}

/* ---------------------------------------------
   SINGLE PRODUCT
   --------------------------------------------- */

.woocommerce div.product .product_title {
  font-family: var(--font-primary);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--tushka-navy);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.woocommerce div.product p.price {
  font-family: var(--font-primary);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--tushka-navy);
  margin-bottom: var(--space-6);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--text-lg);
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* Product Gallery */
.woocommerce div.product div.images {
  margin-bottom: var(--space-8);
}

.woocommerce div.product div.images img {
  border-radius: var(--radius-xl);
}

/* ---------------------------------------------
   CART & CHECKOUT
   --------------------------------------------- */

.woocommerce-cart table.cart,
.woocommerce-checkout table.cart {
  border: var(--border) solid var(--color-gray-200);
  border-radius: var(--radius-xl);
}

.woocommerce-cart table.cart th,
.woocommerce-checkout table.cart th {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  background-color: var(--color-gray-50);
}

.woocommerce .cart-collaterals .cart_totals {
  background-color: var(--color-gray-50);
  border: var(--border) solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
}

/* Checkout Button - Sky CTA */
.woocommerce .cart-collaterals .checkout-button {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  text-align: center;
  background-color: var(--tushka-sky);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  transition: all var(--duration-200) var(--ease-out);
}

.woocommerce .cart-collaterals .checkout-button:hover {
  background-color: var(--tushka-sky-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 174, 239, 0.35);
}

/**
 * ============================================================================
 * 8. RESPONSIVE UTILITIES
 * ============================================================================
 */

/* Hide on Mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Hide on Desktop */
@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Show only on Mobile */
.show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none !important;
  }
}

/**
 * ============================================================================
 * 9. ACCESSIBILITY
 * ============================================================================ */

/* Skip to Content Link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--tushka-navy);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  z-index: var(--z-modal);
}

.skip-to-content:focus {
  top: 0;
}

/* Focus Visible */
*:focus-visible {
  outline: 2px solid var(--tushka-sky);
  outline-offset: 2px;
}

/* Screen Reader Only */
.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;
}

/**
 * ============================================================================
 * END OF DESIGN SYSTEM
 * ============================================================================
 */