/**
 * BonEvents CSS Bundle
 * Auto-generated by build-css.php — do not edit directly.
 * Generated: 2026-03-10 19:04:37
 */

/* === variables.css === */
/**
 * Design System - CSS Variables
 * BonEvents Theme - Updated from Figma Design
 */

:root {
  /* ============================================
     COLORS - Based on Figma Design System
     ============================================ */

  /* Primary Colors */
  --color-primary: #2C2C34;          /* Main Black */
  --color-secondary: #B82D2D;        /* Red accent */
  --color-white: #FCFDFF;            /* Snow White */
  --color-pure-white: #FFFFFF;       /* Pure White */

  /* Background Colors */
  --color-bg-primary: #FCFDFF;       /* Snow White */
  --color-bg-secondary: #F8F9FB;     /* Gray */
  --color-bg-light-pink: #FFF0F5;

  /* Text Colors */
  --color-text-primary: #2C2C34;
  --color-text-secondary: rgba(44, 44, 52, 0.8);
  --color-text-muted: rgba(44, 44, 52, 0.5);
  --color-text-white: #FCFDFF;

  /* Border Colors */
  --color-border: rgba(44, 44, 52, 0.5);
  --color-border-light: rgba(44, 44, 52, 0.2);
  --color-border-dark: rgba(44, 44, 52, 0.8);

  /* State Colors */
  --color-success: #34B82D;          /* Green - Updated from Figma 2025-12-26 */
  --color-success-light: rgba(52, 184, 45, 0.1);
  --color-error: #F44336;
  --color-error-light: rgba(244, 67, 54, 0.1);
  --color-warning: #FF9800;
  --color-warning-light: rgba(255, 152, 0, 0.1);
  --color-info: #2196F3;

  /* Gray Scale */
  --color-gray-50: #F8F9FB;
  --color-gray-100: #F0F0F0;
  --color-gray-200: #E0E0E0;
  --color-gray-300: #CCCCCC;

  /* Button Colors */
  --color-btn-primary-bg: #2C2C34;
  --color-btn-primary-text: #FCFDFF;
  --color-btn-primary-hover: rgba(44, 44, 52, 0.9);

  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-text: #FCFDFF;
  --color-btn-secondary-hover: rgba(255, 255, 255, 0.1);
  --color-btn-secondary-border: #FCFDFF;

  --color-btn-outline-border: #2C2C34;
  --color-btn-outline-text: #2C2C34;
  --color-btn-outline-hover-bg: #2C2C34;
  --color-btn-outline-hover-text: #FCFDFF;

  /* ============================================
     TYPOGRAPHY - Based on Figma Design
     ============================================ */

  /* Font Families */
  --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-decorative: 'Playwrite US Trad', cursive, serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes - Figma Design Spec */
  --font-size-xs: 0.625rem;     /* 10px - Caption */
  --font-size-sm: 0.75rem;      /* 12px - Small paragraph */
  --font-size-base: 0.875rem;   /* 14px - Paragraph/Navigation */
  --font-size-md: 1rem;         /* 16px - Buttons/Big paragraph */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px - H3 */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px - H2 */
  --font-size-5xl: 3rem;        /* 48px - Decorative */
  --font-size-6xl: 3.75rem;     /* 60px */
  --font-size-7xl: 6rem;        /* 96px - Promo/Hero */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights - Figma Design Spec */
  --line-height-promo: 0.91;      /* Promo/Hero headings */
  --line-height-decorative: 0.91;  /* Decorative text */
  --line-height-tight: 1.28;       /* H2, H3 */
  --line-height-normal: 1.5;       /* Default */
  --line-height-relaxed: 1.75;     /* */
  --line-height-loose: 2;          /* Paragraphs, Navigation */

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

  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  /* ============================================
     LAYOUT
     ============================================ */

  /* Container Max Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-3xl: 1920px;

  /* Grid Gaps */
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;

  /* ============================================
     BREAKPOINTS (for reference in JS)
     ============================================ */

  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;
  --breakpoint-2xl: 1920px;

  /* ============================================
     BORDER RADIUS
     ============================================ */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

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

  --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);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* ============================================
     TRANSITIONS
     ============================================ */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

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

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}


/* === base.css === */
/**
 * Base Styles
 * BonEvents Theme
 */

/* ============================================
   RESET & BASE
   ============================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

h1 {
  font-size: var(--font-size-5xl);
}

h2 {
  font-size: var(--font-size-4xl);
}

h3 {
  font-size: var(--font-size-3xl);
}

h4 {
  font-size: var(--font-size-2xl);
}

h5 {
  font-size: var(--font-size-xl);
}

h6 {
  font-size: var(--font-size-lg);
}

p {
  margin-bottom: var(--space-md);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

strong {
  font-weight: var(--font-weight-bold);
}

em {
  font-style: italic;
}

/* ============================================
   LISTS
   ============================================ */

ul, ol {
  list-style: none;
}

/* ============================================
   IMAGES
   ============================================ */

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

/* ============================================
   CONTAINERS
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.container--sm {
  max-width: var(--container-sm);
}

.container--md {
  max-width: var(--container-md);
}

.container--lg {
  max-width: var(--container-lg);
}

.container--xl {
  max-width: var(--container-xl);
}

.container--full {
  max-width: 100%;
}

/* ============================================
   GRID SYSTEM
   ============================================ */

.grid {
  display: grid;
  gap: var(--gap-md);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

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

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
  }

  h3 {
    font-size: var(--font-size-2xl);
  }
}

@media (min-width: 769px) and (max-width: 1439px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   UTILITIES
   ============================================ */

.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;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}


/* === components/buttons.css === */
/**
 * Button Components
 * BonEvents Theme
 */

/* ============================================
   BASE BUTTON
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  user-select: none;
}

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

/* ============================================
   BUTTON VARIANTS
   ============================================ */

/* Primary Button */
.btn--primary {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  border-color: var(--color-btn-primary-bg);
}

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

/* Secondary Button */
.btn--secondary {
  background-color: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  border-color: var(--color-btn-secondary-bg);
}

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

/* Outline Button */
.btn--outline {
  background-color: transparent;
  color: var(--color-btn-outline-text);
  border-color: var(--color-btn-outline-border);
}

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

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

.btn--ghost:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

/* Link Button */
.btn--link {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: transparent;
  padding: 0;
  text-decoration: underline;
}

.btn--link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* ============================================
   BUTTON SIZES
   ============================================ */

.btn--sm {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-lg);
}

.btn--xl {
  padding: var(--space-xl) var(--space-3xl);
  font-size: var(--font-size-xl);
}

/* ============================================
   BUTTON WIDTHS
   ============================================ */

.btn--block {
  display: flex;
  width: 100%;
}

/* ============================================
   BUTTON WITH ICON
   ============================================ */

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
}

.btn__icon--left {
  margin-right: var(--space-sm);
}

.btn__icon--right {
  margin-left: var(--space-sm);
}

/* Icon Only Button */
.btn--icon-only {
  padding: var(--space-md);
  aspect-ratio: 1;
}

.btn--icon-only.btn--sm {
  padding: var(--space-sm);
}

.btn--icon-only.btn--lg {
  padding: var(--space-lg);
}

/* ============================================
   BUTTON GROUPS
   ============================================ */

.btn-group {
  display: inline-flex;
  gap: var(--space-sm);
}

.btn-group--vertical {
  flex-direction: column;
}

.btn-group--attached {
  gap: 0;
}

.btn-group--attached .btn {
  border-radius: 0;
}

.btn-group--attached .btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.btn-group--attached .btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.btn-group--attached.btn-group--vertical .btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  border-bottom-left-radius: 0;
}

.btn-group--attached.btn-group--vertical .btn:last-child {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  border-top-right-radius: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .btn {
    padding: var(--space-sm) var(--space-lg);
  }

  .btn--sm {
    padding: var(--space-xs) var(--space-md);
  }

  .btn--lg {
    padding: var(--space-md) var(--space-xl);
  }

  .btn--xl {
    padding: var(--space-lg) var(--space-2xl);
  }
}


/* === components/forms.css === */
/**
 * Form Components
 * BonEvents Theme
 */

/* ============================================
   FORM GROUPS
   ============================================ */

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

.form-group__label {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  transition: color var(--transition-base);
}

.form-group__label--required::after {
  content: '*';
  color: var(--color-error);
  margin-left: var(--space-xs);
}

/* Label states - Updated from Figma 2025-12-26 */
.form-group--success .form-group__label {
  color: var(--color-success);
}

.form-group--error .form-group__label {
  color: var(--color-error);
}

.form-group--focus .form-group__label {
  color: var(--color-secondary);
}

.form-group__help {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.form-group__error {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-error);
}

/* ============================================
   INPUT FIELDS
   ============================================ */

.input {
  display: block;
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

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

.input:hover {
  border-color: var(--color-border-dark);
}

.input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(216, 75, 122, 0.1);
}

.input:disabled,
.input--disabled {
  background-color: var(--color-bg-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.input--error {
  border-color: var(--color-error);
}

.input--error:focus {
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
}

/* Success state - Updated from Figma 2025-12-26 */
.input--success {
  border-color: var(--color-success);
}

.input--success:focus {
  box-shadow: 0 0 0 3px var(--color-success-light);
}

/* ============================================
   TEXTAREA
   ============================================ */

.textarea {
  min-height: 120px;
  resize: vertical;
}

/* ============================================
   SELECT
   ============================================ */

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: var(--space-3xl);
}

/* ============================================
   CHECKBOX
   ============================================ */

.checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--space-sm);
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  transition: all var(--transition-base);
}

/* Checked state - Updated from Figma 2025-12-26 (BLACK not RED) */
.checkbox__input:checked + .checkbox__box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox__input:checked + .checkbox__box::after {
  content: '';
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox__input:focus + .checkbox__box {
  box-shadow: 0 0 0 3px rgba(44, 44, 52, 0.1);
}

.checkbox__input:disabled + .checkbox__box {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox__input:disabled ~ .checkbox__label {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* ============================================
   RADIO BUTTON
   ============================================ */

.radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--space-sm);
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  transition: all var(--transition-base);
}

.radio__input:checked + .radio__circle {
  border-color: var(--color-secondary);
}

.radio__input:checked + .radio__circle::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
}

.radio__input:focus + .radio__circle {
  box-shadow: 0 0 0 3px rgba(184, 45, 45, 0.1);
}

/* Disabled state - Updated from Figma 2025-12-26 */
.radio__input:disabled + .radio__circle {
  opacity: 0.5;
  cursor: not-allowed;
}

.radio__input:disabled ~ .radio__label {
  opacity: 0.5;
  cursor: not-allowed;
}

.radio__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* ============================================
   RADIO/CHECKBOX GROUP
   ============================================ */

.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.radio-group--inline,
.checkbox-group--inline {
  flex-direction: row;
  gap: var(--space-lg);
}

/* ============================================
   SWITCH (TOGGLE)
   ============================================ */

.switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch__slider {
  position: relative;
  width: 44px;
  height: 24px;
  margin-right: var(--space-sm);
  background-color: var(--color-border-dark);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.switch__slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.switch__input:checked + .switch__slider {
  background-color: var(--color-secondary);
}

.switch__input:checked + .switch__slider::after {
  transform: translateX(20px);
}

.switch__input:focus + .switch__slider {
  box-shadow: 0 0 0 3px rgba(216, 75, 122, 0.1);
}

.switch__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* ============================================
   INPUT SIZES
   ============================================ */

.input--sm,
.select--sm,
.textarea--sm {
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
}

.input--lg,
.select--lg,
.textarea--lg {
  padding: var(--space-lg);
  font-size: var(--font-size-lg);
}

/* ============================================
   INPUT WITH ICON
   ============================================ */

.input-wrapper {
  position: relative;
  display: block;
}

.input-wrapper__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.input-wrapper__icon--left {
  left: var(--space-md);
}

.input-wrapper__icon--right {
  right: var(--space-md);
}

.input-wrapper--icon-left .input {
  padding-left: var(--space-3xl);
}

.input-wrapper--icon-right .input {
  padding-right: var(--space-3xl);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .radio-group--inline,
  .checkbox-group--inline {
    flex-direction: column;
    gap: var(--space-sm);
  }
}


/* === components/flatpickr-custom.css === */
/**
 * Flatpickr Calendar Custom Styles
 * BonEvents Theme - Updated from Figma 2025-12-26
 *
 * Customizes Flatpickr calendar to match Figma design:
 * - Selected dates: BLACK background
 * - Hover state: BLACK background
 * - Outfit font family
 * - Custom spacing and borders
 */

/* ============================================
   CALENDAR CONTAINER
   ============================================ */

.flatpickr-calendar {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-primary);
  padding: var(--space-md);
}

.flatpickr-calendar.open {
  z-index: var(--z-dropdown);
}

/* ============================================
   CALENDAR HEADER (Month/Year + Navigation)
   ============================================ */

.flatpickr-months {
  position: relative;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-md);
}

.flatpickr-month {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

.flatpickr-current-month {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  padding: 0;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  background: transparent;
  border: none;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0 var(--space-xs);
}

.flatpickr-current-month input.cur-year {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  padding: 0 var(--space-xs);
}

/* Navigation Arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
  position: absolute;
  top: 0;
  padding: var(--space-xs);
  cursor: pointer;
  color: var(--color-text-secondary);
  fill: var(--color-text-secondary);
  transition: color var(--transition-base);
}

.flatpickr-prev-month {
  left: 0;
}

.flatpickr-next-month {
  right: 0;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: var(--color-text-primary);
  fill: var(--color-text-primary);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  width: 12px;
  height: 12px;
}

/* ============================================
   WEEKDAYS (M T W T F S S)
   ============================================ */

.flatpickr-weekdays {
  display: flex;
  align-items: center;
  height: 32px;
  margin-bottom: var(--space-xs);
}

.flatpickr-weekday {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1;
}

/* ============================================
   CALENDAR DAYS GRID
   ============================================ */

.flatpickr-days {
  width: 100%;
}

.dayContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  min-width: 280px;
  max-width: 280px;
}

.flatpickr-day {
  flex-basis: 14.2857%;
  max-width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  transition: all var(--transition-base);
}

/* Prev/Next Month Dates (Muted) */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--color-text-muted);
}

/* Hover State - BLACK background (Figma 2025-12-26) */
.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Selected/Active State - BLACK background (Figma 2025-12-26) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* In Range (for date range selection) */
.flatpickr-day.inRange {
  background: rgba(44, 44, 52, 0.1);
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(44, 44, 52, 0.1), 5px 0 0 rgba(44, 44, 52, 0.1);
}

/* Today's Date */
.flatpickr-day.today {
  border-color: var(--color-secondary);
}

.flatpickr-day.today:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Disabled Dates */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--color-text-muted);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.5;
}

/* ============================================
   TIME PICKER (if enabled)
   ============================================ */

.flatpickr-time {
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
}

.flatpickr-time input {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: transparent;
  border: none;
}

.flatpickr-time .numInput {
  font-weight: var(--font-weight-semibold);
}

.flatpickr-time-separator {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ============================================
   INPUT FIELD WITH CALENDAR ICON
   ============================================ */

.flatpickr-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2V5M14 2V5M3 8H17M4 4H16C16.5523 4 17 4.44772 17 5V17C17 17.5523 16.5523 18 16 18H4C3.44772 18 3 17.5523 3 17V5C3 4.44772 3.44772 4 4 4Z' stroke='%232C2C34' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 20px 20px;
  padding-right: var(--space-3xl) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .flatpickr-calendar {
    max-width: 100%;
  }

  .dayContainer {
    min-width: 100%;
    max-width: 100%;
  }

  .flatpickr-day {
    max-width: calc(100% / 7);
  }
}


/* === components/tabs.css === */
/**
 * Tabs Component
 * BonEvents Theme
 */

/* ============================================
   TABS
   ============================================ */

.tabs {
  display: flex;
  flex-direction: column;
}

/* Tab List */
.tabs__list {
  display: flex;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.tabs__list--centered {
  justify-content: center;
}

.tabs__list--right {
  justify-content: flex-end;
}

/* Tab Item */
.tabs__tab {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.tabs__tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: transparent;
  transition: background-color var(--transition-base);
}

.tabs__tab:hover {
  color: var(--color-text-primary);
}

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

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

.tabs__tab:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(216, 75, 122, 0.1);
}

/* Tab Panels */
.tabs__panels {
  display: block;
}

.tabs__panel {
  display: none;
}

.tabs__panel--active {
  display: block;
  animation: fadeIn var(--transition-base);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   TABS VARIANTS
   ============================================ */

/* Pill Tabs */
.tabs--pills .tabs__list {
  border-bottom: none;
  gap: var(--space-xs);
}

.tabs--pills .tabs__tab {
  border-radius: var(--radius-md);
}

.tabs--pills .tabs__tab::after {
  display: none;
}

.tabs--pills .tabs__tab--active {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Boxed Tabs */
.tabs--boxed .tabs__list {
  border-bottom: none;
  gap: 0;
}

.tabs--boxed .tabs__tab {
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 0;
}

.tabs--boxed .tabs__tab--active {
  background-color: var(--color-white);
  border-bottom-color: var(--color-white);
  z-index: 1;
}

.tabs--boxed .tabs__panels {
  border: 1px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  padding: var(--space-lg);
}

/* Vertical Tabs */
.tabs--vertical {
  flex-direction: row;
  gap: var(--space-lg);
}

.tabs--vertical .tabs__list {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid var(--color-border);
  margin-bottom: 0;
  padding-right: var(--space-lg);
}

.tabs--vertical .tabs__tab {
  text-align: left;
  width: 100%;
}

.tabs--vertical .tabs__tab::after {
  left: auto;
  right: -var(--space-lg);
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
}

/* ============================================
   TABS WITH ICONS
   ============================================ */

.tabs__tab-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.tabs__tab-icon svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .tabs__list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tabs__list::-webkit-scrollbar {
    display: none;
  }

  .tabs__tab {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
  }

  .tabs--vertical {
    flex-direction: column;
  }

  .tabs--vertical .tabs__list {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-right: 0;
    padding-bottom: var(--space-sm);
  }

  .tabs--vertical .tabs__tab::after {
    left: 0;
    right: 0;
    top: auto;
    bottom: -var(--space-sm);
    width: auto;
    height: 2px;
  }
}


/* === components/cards.css === */
/**
 * Card Components
 * BonEvents Theme
 */

/* ============================================
   Base Card Styles
   ============================================ */

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-base);
}

.card__image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-gray-100);
}

.card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.card:hover .card__image {
    transform: scale(1.05);
}

.card__content {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card__header {
    margin-bottom: var(--space-md);
}

.card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-xs) 0;
    line-height: var(--line-height-tight);
}

.card__title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

.card__title-link:hover {
    color: var(--color-secondary);
}

.card__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.card__body {
    flex: 1;
    margin-bottom: var(--space-md);
}

.card__description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.card__footer {
    margin-top: auto;
}

/* ============================================
   Product Card
   ============================================ */

.card--product {
    border: 1px solid var(--color-gray-200);
}

.card--product:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-md);
}

.card--product .card__image-wrapper {
    aspect-ratio: 4 / 3;
}

.card__badge-group {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    z-index: 1;
}

.card__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.card__badge--new {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.card__badge--popular {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.card__badge--discount {
    background-color: var(--color-error);
    color: var(--color-white);
}

.card__actions {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    z-index: 1;
}

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

.card__action-btn:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    transform: scale(1.1);
}

.card__action-btn svg {
    width: 20px;
    height: 20px;
}

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

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.card__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.card__meta-icon {
    width: 16px;
    height: 16px;
}

.card__category {
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

.card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.card__price-amount {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.card__price-period {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.card__price-original {
    font-size: var(--font-size-lg);
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

.card__availability {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.card__availability--in-stock {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.card__availability--low-stock {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.card__availability--out-of-stock {
    background-color: var(--color-error-light);
    color: var(--color-error);
}

.card__availability-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* ============================================
   Info Card
   ============================================ */

.card--info {
    text-align: center;
    padding: var(--space-2xl);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
}

.card--info:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.card--info .card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
    border-radius: 50%;
    color: var(--color-secondary);
    transition: all var(--transition-base);
}

.card--info:hover .card__icon {
    background-color: var(--color-secondary);
    color: var(--color-white);
    transform: scale(1.1);
}

.card--info .card__icon svg {
    width: 32px;
    height: 32px;
}

.card--info .card__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-md);
}

.card--info .card__description {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-lg);
}

/* ============================================
   Event Card (Portfolio)
   ============================================ */

.card--event {
    position: relative;
    overflow: hidden;
}

.card--event .card__image-wrapper {
    aspect-ratio: 16 / 9;
}

.card--event .card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-xl);
    color: var(--color-white);
    opacity: 1;
    transition: opacity var(--transition-base);
}

.card--event:hover .card__overlay {
    opacity: 1;
}

.card--event .card__title {
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-sm);
}

.card--event .card__subtitle {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-md);
}

.card--event .card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.card__tag {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(10px);
}

/* ============================================
   Compact Card (Horizontal)
   ============================================ */

.card--compact {
    flex-direction: row;
    border: 1px solid var(--color-gray-200);
}

.card--compact .card__image-wrapper {
    width: 200px;
    flex-shrink: 0;
}

.card--compact .card__content {
    padding: var(--space-lg);
}

@media (max-width: 768px) {
    .card--compact {
        flex-direction: column;
    }

    .card--compact .card__image-wrapper {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* ============================================
   Card Grid Layouts
   ============================================ */

.card-grid {
    display: grid;
    gap: var(--space-xl);
}

.card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1440px) {
    .card-grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .card-grid--3,
    .card-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .card-grid--2,
    .card-grid--3,
    .card-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Service Card - Flexible Width Animation (Adaptive)
   ============================================ */

.service-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    flex: 10 1 0;
    z-index: 10;
}

/* When one card is hovered, shrink others to minimum */
.services__grid:has(.service-card:hover) .service-card:not(:hover) {
    flex: 0.2 1 0;
}

.service-card__link {
    display: block;
    text-decoration: none;
    color: inherit !important;
}

.service-card__link:hover {
    color: inherit !important;
}

.service-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 519px;
    overflow: hidden;
    background-color: var(--color-gray-100);
}

.service-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card:hover .service-card__image {
    transform: scale(1.05);
}

/* Default Title - Below Image */
.service-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: var(--space-lg) 0 0 0;
    line-height: var(--line-height-tight);
    transition: opacity 0.3s ease;
}

/* Hide title on hovered card */
.service-card:hover .service-card__title {
    opacity: 0;
}

/* Hide titles of all other cards when one is hovered - Figma Design */
.services__grid:has(.service-card:hover) .service-card:not(:hover) .service-card__title {
    opacity: 0;
}

/* Hover Overlay */
.service-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-2xl) 32px;
}

.service-card:hover .service-card__overlay {
    opacity: 1;
    visibility: visible;
}

.service-card__overlay-title {
    font-family: var(--font-heading);
    font-size: 128px;
    font-weight: var(--font-weight-normal);
    color: var(--color-white);
    margin: 0 0 var(--space-lg) 0;
    line-height: 1.01;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0s;
}

/* Show overlay title only after card has fully expanded */
.service-card:hover .service-card__overlay-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.service-card__overlay-description {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-white);
    margin: 0 0 var(--space-lg) 0;
    line-height: var(--line-height-loose);
    max-width: 516px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0s;
}

.service-card:hover .service-card__overlay-description {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.service-card__overlay-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    color: var(--color-white) !important;
    padding: 4px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: var(--line-height-loose);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0s;
}

.service-card:hover .service-card__overlay-button {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.service-card__overlay-button:hover {
    opacity: 0.8 !important;
}

.service-card__overlay-button i {
    font-size: var(--font-size-md);
}

/* Mobile description - hidden on desktop */
.service-card__description-mobile {
    display: none;
}

/* Mobile button - hidden on desktop */
.service-card__button-mobile {
    display: none;
}
@media (max-width: 1440px) {
    .service-card__title {
        font-size: var(--font-size-2xl);
    }
}
@media (max-width: 1024px) {
    /* Mobile/Tablet: Stack layout - title above, description below */
    .service-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .service-card:hover {
        flex: 0 0 100%;
        width: 100%;
    }

    .services__grid:has(.service-card:hover) .service-card:not(:hover) {
        flex: 0 0 100%;
        width: 100%;
    }

    .service-card__link {
        display: flex;
        flex-direction: column;
    }

    .service-card__image-wrapper {
        height: auto;
        aspect-ratio: 1;
        order: 1;
    }

    .service-card__title {
        order: 0;
        margin: 0 0 var(--space-md) 0;
        font-size: var(--font-size-3xl);
        opacity: 1 !important;
    }

    .service-card__overlay {
        display: none !important;
    }

    .service-card__description-mobile {
        display: block;
        order: 2;
        margin-top: var(--space-md);
        font-family: var(--font-primary);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-light);
        color: var(--color-text-secondary);
        line-height: var(--line-height-loose);
    }

    /* Mobile button - Figma Mobile Design 88:1953 */
    .service-card__button-mobile {
        display: flex;
        align-items: center;
        gap: 16px;
        order: 3;
        margin-top: var(--space-md);
        font-family: var(--font-primary);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-primary);
        line-height: var(--line-height-loose);
        padding: 4px 0;
    }

    .service-card__button-mobile i {
        font-size: var(--font-size-md);
    }
}

/* ============================================
   Loading State
   ============================================ */

.card--loading {
    pointer-events: none;
}

.card--loading .card__image-wrapper,
.card--loading .card__title,
.card--loading .card__description,
.card--loading .card__price {
    background: linear-gradient(
        90deg,
        var(--color-gray-200) 25%,
        var(--color-gray-100) 50%,
        var(--color-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


/* === components/cart-sidebar.css === */
/**
 * Cart Sidebar Component
 * Slide-out cart panel (desktop: right sidebar, mobile: fullscreen)
 * Updated to match Figma design 88:7580
 */

/* ============================================
   Base Styles
   ============================================ */

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    visibility: hidden;
    transition: visibility 0.3s ease;
}

.cart-sidebar.is-open {
    visibility: visible;
}

/* Overlay */
.cart-sidebar__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.cart-sidebar.is-open .cart-sidebar__overlay {
    opacity: 1;
}

/* Panel */
.cart-sidebar__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: #FCFDFF;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}

.cart-sidebar.is-open .cart-sidebar__panel {
    transform: translateX(0);
}

/* ============================================
   Title - No border below
   ============================================ */

.cart-sidebar__title {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    color: #2C2C34;
    margin: 0;
}

/* ============================================
   Close Button - Circle with X
   ============================================ */

.cart-sidebar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FCFDFF;
    border: none;
    cursor: pointer;
    color: #2C2C34;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.cart-sidebar__close:hover {
    opacity: 0.7;
}

/* ============================================
   Empty State
   ============================================ */

.cart-sidebar__empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    height: 100%;
}

.cart-sidebar__empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    margin-bottom: 16px;
}

.cart-sidebar__empty p {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: #2C2C34;
    opacity: 0.7;
    margin: 0;
}

/* ============================================
   Desktop Layout - Two Columns
   ============================================ */

.cart-sidebar__mobile-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cart-sidebar__desktop-layout {
    display: none;
}

/* ============================================
   Cart Items - Horizontal Row Layout
   ============================================ */

.cart-sidebar__items,
.cart-sidebar__items-mobile {
    flex: 1;
    overflow-y: auto;
}

/* Cart Item - Single row layout with border around each item */
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 16px 24px;
    border: 0.5px solid rgba(44, 44, 52, 0.15);
    border-radius: 0;
    position: relative;
}

/* Gap between cart items */
.cart-item + .cart-item {
    margin-top: 8px;
}

/* Image - 56x56 per Figma */
.cart-item__image {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    overflow: hidden;
    background: #F5F5F5;
}

.cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product name and price per day - stacked, fixed width per Figma */
.cart-item__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 191px;
    flex-shrink: 0;
}

.cart-item__name {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.29;
    color: #2C2C34;
    margin: 0;
}

.cart-item__price-label {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2C2C34;
    margin: 0;
}

/* Quantity counter - per Figma */
.cart-item__quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 4px 12px;
    border: 1px solid rgba(44, 44, 52, 0.1);
    border-radius: 0;
    background: #FCFDFF;
    flex-shrink: 0;
}

.cart-item__quantity-btn {
    background: none;
    border: none;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2C2C34;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    font-size: 12px;
    padding: 0;
}

.cart-item__quantity-btn:hover {
    opacity: 1;
}

.cart-item__quantity-input {
    width: 24px;
    text-align: center;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #2C2C34;
    background: transparent;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Hide number input spinners */
.cart-item__quantity-input::-webkit-outer-spin-button,
.cart-item__quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Price column */
.cart-item__subtotal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 60px;
    flex-shrink: 0;
}

.cart-item__subtotal-label {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #2C2C34;
    opacity: 0.5;
}

.cart-item__subtotal-value {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2C2C34;
}

/* Remove button - circular 48px per Figma */
.cart-item__remove {
    background: #FCFDFF;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    color: #2C2C34;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-item__remove:hover {
    opacity: 0.7;
}

.cart-item__remove svg,
.cart-item__remove i {
    font-size: 24px;
}

/* ============================================
   Summary Section
   ============================================ */

.cart-sidebar__summary {
    background: #F8F9FB;
    display: flex;
    flex-direction: column;
}

.cart-sidebar__summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px 24px;
}

.cart-sidebar__summary-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.29;
    color: #2C2C34;
    margin: 0;
}

.cart-sidebar__summary-count,
.cart-sidebar__summary-count-mobile {
    color: rgba(44, 44, 52, 0.5);
    font-weight: 400;
}

.cart-sidebar__summary-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 24px 24px 24px;
}

/* Rental Period */
.cart-sidebar__rental-period {
    padding: 12px 16px;
    background: rgba(44, 44, 52, 0.03);
    margin-bottom: 24px;
}

.cart-sidebar__rental-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.cart-sidebar__rental-header svg {
    color: #2C2C34;
    opacity: 0.5;
}

.cart-sidebar__rental-header span {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 2;
    color: #2C2C34;
    opacity: 0.5;
}

.cart-sidebar__rental-dates {
    display: flex;
    justify-content: space-between;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #2C2C34;
}

.cart-sidebar__rental-range,
.cart-sidebar__rental-range-mobile {
    color: #2C2C34;
}

.cart-sidebar__rental-days,
.cart-sidebar__rental-days-mobile {
    color: #2C2C34;
}

/* Price Breakdown - with border per Figma */
.cart-sidebar__breakdown {
    border: 0.5px solid rgba(44, 44, 52, 0.15);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.cart-sidebar__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    line-height: 2;
}

.cart-sidebar__row span:first-child {
    font-weight: 300;
    color: #2C2C34;
    opacity: 0.5;
}

.cart-sidebar__row span:last-child {
    color: #2C2C34;
    font-weight: 400;
}

/* Total Block - Gray background */
.cart-sidebar__total-block {
    background: rgba(44, 44, 52, 0.03);
    padding: 16px;
    margin-top: auto;
    margin-bottom: 16px;
}

.cart-sidebar__total-block .cart-sidebar__row {
    margin-bottom: 8px;
}

.cart-sidebar__total-block .cart-sidebar__row--subtotal {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(44, 44, 52, 0.1);
    margin-bottom: 12px;
}

.cart-sidebar__total {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cart-sidebar__total > span:first-child {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #2C2C34;
    opacity: 0.7;
}

.cart-sidebar__total-value {
    text-align: right;
}

.cart-sidebar__total-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2C2C34;
    display: block;
}

.cart-sidebar__deposit-note,
.cart-sidebar__deposit-note-mobile {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(44, 44, 52, 0.5);
    margin-top: 4px;
    display: block;
}

/* Checkout Button - No border-radius */
.cart-sidebar__checkout,
.cart-sidebar__checkout-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 24px;
    background: #2C2C34;
    color: #FCFDFF;
    text-align: center;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.cart-sidebar__checkout:hover,
.cart-sidebar__checkout-mobile:hover {
    opacity: 0.9;
    color: #FCFDFF;
}

/* ============================================
   Mobile Layout
   ============================================ */

.cart-sidebar__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    flex-shrink: 0;
}

.cart-sidebar__close--mobile {
    background: transparent;
    border: none;
    border-radius: 0;
}

.cart-sidebar__items-mobile {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px;
}

.cart-sidebar__empty--mobile {
    padding: 40px 24px;
}

/* Mobile Summary Accordion */
.cart-sidebar__summary-mobile {
    background: #F8F9FB;
    padding: 24px;
    flex-shrink: 0;
}

.cart-sidebar__summary-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 0 0 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #2C2C34;
}

.cart-sidebar__summary-icon {
    transition: transform 0.3s ease;
}

.cart-sidebar__summary-mobile.is-open .cart-sidebar__summary-icon {
    transform: rotate(180deg);
}

.cart-sidebar__summary-content-mobile {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.cart-sidebar__summary-mobile.is-open .cart-sidebar__summary-content-mobile {
    max-height: 500px;
}

/* ============================================
   Desktop Styles
   ============================================ */

@media (min-width: 1024px) {
    .cart-sidebar__panel {
        max-width: 1000px;
        width: 100%;
    }

    .cart-sidebar__mobile-layout {
        display: none;
    }

    .cart-sidebar__desktop-layout {
        display: grid;
        grid-template-columns: 1fr 340px;
        height: 100%;
    }

    /* Left Column - Shopping Cart */
    .cart-sidebar__left {
        display: flex;
        flex-direction: column;
        padding: 32px;
        overflow: hidden;
    }

    .cart-sidebar__left .cart-sidebar__title {
        flex-shrink: 0;
        margin-bottom: 24px;
    }

    .cart-sidebar__items {
        flex: 1;
        overflow-y: auto;
        padding-right: 16px;
    }

    /* Custom scrollbar for items */
    .cart-sidebar__items::-webkit-scrollbar {
        width: 4px;
    }

    .cart-sidebar__items::-webkit-scrollbar-track {
        background: transparent;
    }

    .cart-sidebar__items::-webkit-scrollbar-thumb {
        background: rgba(44, 44, 52, 0.2);
        border-radius: 2px;
    }

    .cart-sidebar__items::-webkit-scrollbar-thumb:hover {
        background: rgba(44, 44, 52, 0.4);
    }

    /* Right Column - Summary (full height) */
    .cart-sidebar__summary {
        height: 100%;
    }

    /* Desktop cart items - image stays 56x56 per Figma */
}

@media (min-width: 1440px) {
    .cart-sidebar__panel {
        max-width: 1200px;
    }

    .cart-sidebar__desktop-layout {
        grid-template-columns: 1fr 430px;
    }

    .cart-sidebar__left {
        padding: 40px 48px;
    }
}

/* ============================================
   Loading State
   ============================================ */

.cart-sidebar__loading {
    position: relative;
    pointer-events: none;
    min-height: 200px;
}

.cart-sidebar__loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(252, 253, 255, 0.9);
    z-index: 10;
}

.cart-sidebar__loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border: 3px solid rgba(44, 44, 52, 0.1);
    border-top-color: #2C2C34;
    border-radius: 50%;
    animation: cart-spin 0.8s linear infinite;
    z-index: 11;
}

@keyframes cart-spin {
    to {
        transform: rotate(360deg);
    }
}


/* === components/woocommerce-messages.css === */
/**
 * WooCommerce Messages
 * Error, success, and info messages
 */

/* Base message styles */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    width: 100%;
    max-width: var(--container-2xl, 1440px);
    margin-left: auto;
    margin-right: auto;
    padding: 16px var(--space-md, 24px);
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 0;
    list-style: none;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    box-sizing: border-box;
}

.woocommerce-message li,
.woocommerce-error li,
.woocommerce-info li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Error messages */
.woocommerce-error {
    background: #FEF2F2;
    border-left: 4px solid #DC2626;
    color: #991B1B;
}

.woocommerce-error::before {
    display: none;
}

/* Success messages */
.woocommerce-message {
    background: #F0FDF4;
    border-left: 4px solid #16A34A;
    color: #166534;
}

.woocommerce-message::before {
    display: none;
}

/* Info messages */
.woocommerce-info {
    background: #EFF6FF;
    border-left: 4px solid #3B82F6;
    color: #1E40AF;
}

.woocommerce-info::before {
    display: none;
}

/* Links in messages */
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

.woocommerce-message a:hover,
.woocommerce-error a:hover,
.woocommerce-info a:hover {
    text-decoration: none;
}

/* Message list */
.woocommerce-message ul,
.woocommerce-error ul,
.woocommerce-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-message ul li,
.woocommerce-error ul li,
.woocommerce-info ul li {
    margin-bottom: 8px;
}

.woocommerce-message ul li:last-child,
.woocommerce-error ul li:last-child,
.woocommerce-info ul li:last-child {
    margin-bottom: 0;
}

/* Close button (if needed) */
.woocommerce-message .close,
.woocommerce-error .close,
.woocommerce-info .close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.woocommerce-message .close:hover,
.woocommerce-error .close:hover,
.woocommerce-info .close:hover {
    opacity: 1;
}

/* Animation */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    animation: slideInDown 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        padding: 12px var(--space-sm, 16px);
        font-size: 13px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
}

/* WooCommerce Block Notices (Gutenberg blocks) */
.wc-block-components-notice-banner {
    width: 100%;
    max-width: var(--container-2xl, 1440px);
    margin-left: auto;
    margin-right: auto;
    padding: 16px var(--space-md, 24px);
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 0;
    box-sizing: border-box;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
    display: flex;
    align-items: center;
}

/* Hide icons in block notices */
.wc-block-components-notice-banner svg {
    display: none;
}

@media (max-width: 768px) {
    .wc-block-components-notice-banner {
        padding: 12px var(--space-sm, 16px);
    }
}


/* === components/rental-selector.css === */
/**
 * Rental Selector Component - Figma Design
 * BonEvents Theme
 */

/* ============================================
   Rental Selector Section
   ============================================ */

.section--rental-selector {
    padding: 80px 0;
}

.section--rental-selector .container {
    max-width: 1824px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Header with Title and Date Inputs */
.rental-selector__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-2xl);
    gap: var(--space-2xl);
}

.rental-selector__text {
    flex: 1;
    max-width: 679px;
}

.rental-selector__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
    line-height: var(--line-height-tight);
}

.rental-selector__subtitle {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-loose);
}

.rental-selector__dates {
    display: flex;
    gap: var(--space-md);
    flex: 1;
    max-width: 679px;
}

/* Date Input Styling */
.rental-input {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rental-input__label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.rental-input__wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.rental-input__field {
    flex: 1;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-primary);
    border: none;
    border-bottom: 0.5px solid var(--color-border);
    padding: 4px 32px 4px 0;
    background: transparent;
    outline: none;
    transition: border-color var(--transition-base);
    line-height: var(--line-height-loose);
}

.rental-input__field::placeholder {
    color: var(--color-text-muted);
}

.rental-input__field--placeholder {
    color: var(--color-text-muted);
}

.rental-input__field:focus {
    border-bottom-color: var(--color-primary);
}

.rental-input__icon {
    position: absolute;
    right: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    pointer-events: none;
}

/* Product Carousel */
.product-carousel {
    position: relative;
    margin-bottom: var(--space-2xl);
}

.product-carousel__wrapper {
    overflow: hidden;
    height: 572px;
}

.product-carousel__track {
    display: flex;
    gap: var(--space-lg);
    height: 100%;
    transition: transform var(--transition-slow);
}

.product-carousel__item {
    flex: 0 0 auto;
    width: calc((100% - (4 * var(--space-lg))) / 5);
    min-width: 200px;
}

.carousel-product {
    height: 100%;
}

.carousel-product__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-gray-100);
}

.carousel-product__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-product__placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-gray-200);
}

.carousel-product__add-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background-color: var(--color-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    opacity: 0;
}

.carousel-product:hover .carousel-product__add-btn {
    opacity: 1;
}

.carousel-product__add-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translate(-50%, -50%) scale(1.1);
}

.carousel-product__add-btn i {
    font-size: 24px;
}

/* Carousel Navigation */
.product-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background-color: var(--color-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.product-carousel__nav:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-50%) scale(1.05);
}

.product-carousel__nav i {
    font-size: 36px;
}

.product-carousel__nav--prev {
    left: 80px;
}

.product-carousel__nav--next {
    right: 80px;
}

.product-carousel__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.product-carousel__nav:disabled:hover {
    background-color: var(--color-white);
    color: var(--color-text-primary);
    transform: translateY(-50%);
}

/* Footer CTA */
.rental-selector__footer {
    text-align: center;
}

.rental-selector__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-loose);
    text-decoration: none;
    transition: all var(--transition-base);
}

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

/* Responsive Styles */
@media (max-width: 1440px) {
    .section--rental-selector .container {
        padding: 0 96px;
    }

    .product-carousel__nav--prev {
        left: 40px;
    }

    .product-carousel__nav--next {
        right: 40px;
    }
}

@media (max-width: 1024px) {
    .rental-selector__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .rental-selector__text,
    .rental-selector__dates {
        max-width: 100%;
    }

    .product-carousel__item {
        width: calc((100% - (2 * var(--space-lg))) / 3);
    }

    .product-carousel__nav {
        width: 60px;
        height: 60px;
    }

    .product-carousel__nav i {
        font-size: 24px;
    }

    .product-carousel__nav--prev {
        left: 20px;
    }

    .product-carousel__nav--next {
        right: 20px;
    }
}

@media (max-width: 768px) {
    .section--rental-selector .container {
        padding: 0;
    }

    .rental-selector__header {
        padding: 0 16px;
        gap: 24px;
    }

    .rental-selector__title {
        font-size: var(--font-size-3xl);
    }

    .rental-selector__dates {
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
    }

    .product-carousel__wrapper {
        height: 400px;
    }

    .product-carousel__item {
        width: calc((100% - var(--space-lg)) / 2);
    }

    .product-carousel__nav {
        width: 48px;
        height: 48px;
    }

    .product-carousel__nav i {
        font-size: 20px;
    }

    .product-carousel__nav--prev {
        left: 10px;
    }

    .product-carousel__nav--next {
        right: 10px;
    }
}

@media (max-width: 375px) {
    .product-carousel__item {
        width: 100%;
    }

    .product-carousel__wrapper {
        height: 350px;
    }
}


/* === components/rental-dates-v2.css === */
/**
 * Universal Rental Date Picker v2
 * Reusable component with floating label and multiple style variants
 *
 * Figma:
 * - Empty state: node-id=91-8322
 * - Filled state: node-id=91-8321
 *
 * Variants:
 * - default: Side by side, matching rental-selector on homepage
 * - inline: Inline flow, for header/toolbar integration
 * - compact: Minimal spacing, for tight spaces
 * - sidebar: Stacked layout for sidebar filters
 *
 * @package BonEvents
 */

/* ============================================
   Base Styles - Floating Label
   ============================================ */

.rental-dates-v2 {
    display: flex;
    gap: var(--space-md);
}

.rental-dates-v2__field {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow shrinking */
    position: relative;
}

.rental-dates-v2__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Label - acts as placeholder, floats up when has value */
.rental-dates-v2__label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-light);
    color: #2c2c34;
    opacity: 0.5;
    line-height: 2;
    pointer-events: none;
    transition: all 0.2s ease;
    transform-origin: left center;
}

/* Input base */
.rental-dates-v2__input {
    flex: 1;
    width: 100%;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-light);
    color: #2c2c34;
    border: none;
    border-bottom: 0.5px solid rgba(44, 44, 52, 0.5);
    padding: 4px 32px 4px 0;
    background: transparent;
    outline: none;
    transition: border-color 0.2s ease;
    line-height: 2;
    cursor: pointer;
}

.rental-dates-v2__input:focus {
    border-bottom-color: var(--color-primary);
}

/* Icon - dimmed by default */
.rental-dates-v2__icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #2c2c34;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}


/* ============================================
   Filled State (.has-value)
   ============================================ */

/* Label floats up and shrinks */
.rental-dates-v2__field.has-value .rental-dates-v2__label {
    top: 0;
    transform: translateY(-100%);
    font-size: 10px;
    font-weight: var(--font-weight-normal);
    line-height: 2;
    /* opacity stays 0.5 per Figma */
}

/* CSS fallback: float label when Flatpickr adds 'active' class to input */
.rental-dates-v2__input-wrapper:has(.rental-dates-v2__input.active) .rental-dates-v2__label,
.rental-dates-v2__input-wrapper:has(.rental-dates-v2__input:focus) .rental-dates-v2__label {
    top: 0;
    transform: translateY(-100%);
    font-size: 10px;
    font-weight: var(--font-weight-normal);
    line-height: 2;
}

/* Pure CSS solution: float label when input has value (using placeholder trick) */
.rental-dates-v2__input:not(:placeholder-shown) + .rental-dates-v2__icon,
.rental-dates-v2__field:has(.rental-dates-v2__input:not(:placeholder-shown)) .rental-dates-v2__icon {
    opacity: 1;
}

.rental-dates-v2__field:has(.rental-dates-v2__input:not(:placeholder-shown)) .rental-dates-v2__label {
    top: 0;
    transform: translateY(-100%);
    font-size: 10px;
    font-weight: var(--font-weight-normal);
    line-height: 2;
}

.rental-dates-v2__field:has(.rental-dates-v2__input:not(:placeholder-shown)) .rental-dates-v2__input {
    border-bottom-color: #2c2c34;
}

/* Border becomes full color */
.rental-dates-v2__field.has-value .rental-dates-v2__input {
    border-bottom-color: #2c2c34;
}

/* Icon becomes full opacity */
.rental-dates-v2__field.has-value .rental-dates-v2__icon {
    opacity: 1;
}


/* ============================================
   Variant: Default (Homepage style)
   ============================================ */

.rental-dates-v2--default {
    max-width: 679px;
}


/* ============================================
   Variant: Inline (Header/Toolbar)
   ============================================ */

.rental-dates-v2--inline {
    align-items: flex-end;
    gap: var(--space-lg);
}

.rental-dates-v2--inline .rental-dates-v2__field {
    flex: 0 1 200px;
}

.rental-dates-v2--inline .rental-dates-v2__label {
    font-size: 14px;
}

.rental-dates-v2--inline .rental-dates-v2__field.has-value .rental-dates-v2__label {
    font-size: 10px;
}

.rental-dates-v2--inline .rental-dates-v2__input {
    font-size: 14px;
    padding: 4px 24px 4px 0;
}

.rental-dates-v2--inline .rental-dates-v2__icon {
    font-size: 14px;
}


/* ============================================
   Variant: Compact (Minimal spacing)
   ============================================ */

.rental-dates-v2--compact {
    gap: var(--space-sm);
}

.rental-dates-v2--compact .rental-dates-v2__label {
    font-size: 12px;
}

.rental-dates-v2--compact .rental-dates-v2__field.has-value .rental-dates-v2__label {
    font-size: 9px;
}

.rental-dates-v2--compact .rental-dates-v2__input {
    font-size: 12px;
    padding: 2px 24px 2px 0;
}

.rental-dates-v2--compact .rental-dates-v2__icon {
    font-size: 12px;
}


/* ============================================
   Variant: Sidebar (Stacked layout)
   ============================================ */

.rental-dates-v2--sidebar {
    flex-direction: column;
    gap: var(--space-xl);
}

.rental-dates-v2--sidebar .rental-dates-v2__field {
    flex: none;
}

.rental-dates-v2--sidebar .rental-dates-v2__label {
    font-size: 14px;
}

.rental-dates-v2--sidebar .rental-dates-v2__field.has-value .rental-dates-v2__label {
    font-size: 10px;
}

.rental-dates-v2--sidebar .rental-dates-v2__input {
    padding: 4px 32px 4px 0;
}


/* ============================================
   Variant: Full width (For modals/forms)
   ============================================ */

.rental-dates-v2--full {
    width: 100%;
    max-width: none;
}

.rental-dates-v2--full .rental-dates-v2__field {
    flex: 1;
}


/* ============================================
   Variant: With border (Form style)
   ============================================ */

.rental-dates-v2--bordered .rental-dates-v2__input-wrapper {
    border: 1px solid rgba(44, 44, 52, 0.5);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
}

.rental-dates-v2--bordered .rental-dates-v2__input {
    border: none;
    padding: 0 24px 0 0;
}

.rental-dates-v2--bordered .rental-dates-v2__label {
    left: 12px;
}

.rental-dates-v2--bordered .rental-dates-v2__field.has-value .rental-dates-v2__label {
    top: -8px;
    transform: translateY(0);
    background: white;
    padding: 0 4px;
    left: 8px;
}

.rental-dates-v2--bordered .rental-dates-v2__field.has-value .rental-dates-v2__input-wrapper {
    border-color: #2c2c34;
}

.rental-dates-v2--bordered .rental-dates-v2__icon {
    right: 0;
}


/* ============================================
   Responsive Styles
   ============================================ */

@media (max-width: 1024px) {
    .rental-dates-v2--default {
        max-width: 100%;
    }

    .rental-dates-v2--inline {
        flex-wrap: wrap;
    }

    .rental-dates-v2--inline .rental-dates-v2__field {
        flex: 1 1 150px;
    }
}

@media (max-width: 768px) {
    .rental-dates-v2--default,
    .rental-dates-v2--inline {
        flex-direction: column;
        gap: var(--space-md);
    }

    .rental-dates-v2--default .rental-dates-v2__field,
    .rental-dates-v2--inline .rental-dates-v2__field {
        flex: none;
        width: 100%;
    }

    .rental-dates-v2__field:has(.rental-dates-v2__input:not(:placeholder-shown)) .rental-dates-v2__label {
        top: 12px;
    }
}

@media (max-width: 375px) {
    .rental-dates-v2 {
        gap: var(--space-sm);
    }

    .rental-dates-v2__label {
        font-size: 12px;
    }

    .rental-dates-v2__field.has-value .rental-dates-v2__label {
        font-size: 9px;
    }

    .rental-dates-v2__input {
        font-size: 12px;
    }
}


/* ============================================
   Flatpickr Customization (Date Picker Popup)
   ============================================ */

/* Flatpickr theme overrides */
.flatpickr-calendar {
    font-family: var(--font-primary) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.flatpickr-day.inRange {
    background: rgba(251, 140, 0, 0.1) !important;
    border-color: transparent !important;
}

.flatpickr-day:hover {
    background: var(--color-gray-100) !important;
    border-color: var(--color-gray-100) !important;
}

.flatpickr-day.today {
    border-color: var(--color-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-normal) !important;
}

.flatpickr-weekday {
    font-family: var(--font-primary) !important;
    color: var(--color-text-muted) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--color-text-primary) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: var(--color-primary) !important;
}


/* === components/content-blocks.css === */
/**
 * Content Blocks - Installation Flexible Content
 * Styling for all flexible content blocks
 * Added from Figma 2025-12-26 - PHASE 3.8
 */

/* ============================================
   GENERAL BLOCK STYLES
   ============================================ */

.single-installation__content-blocks {
    padding: var(--space-4xl) 0;
}

.content-block {
    margin-bottom: var(--space-3xl);
}

.content-block:last-child {
    margin-bottom: 0;
}

.content-block__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-xl) 0;
    line-height: var(--line-height-tight);
}

/* ============================================
   TEXT BLOCK
   ============================================ */

.content-block--text {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.content-block__text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.content-block__text p {
    margin-bottom: var(--space-md);
}

.content-block__text h2,
.content-block__text h3,
.content-block__text h4 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    font-family: var(--font-heading);
    color: var(--color-text-primary);
}

.content-block__text ul,
.content-block__text ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-xl);
}

/* ============================================
   SINGLE IMAGE
   ============================================ */

.content-block--single-image {
    margin-bottom: var(--space-4xl);
}

.content-block__figure {
    margin: 0;
}

.content-block__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.content-block__caption {
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-align: center;
    font-style: italic;
}

/* ============================================
   GALLERY (GRID)
   ============================================ */

.content-block__gallery {
    display: grid;
    gap: var(--space-lg);
}

.content-block__gallery--columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.content-block__gallery--columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.content-block__gallery--columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.content-block__gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
}

.content-block__gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.content-block__gallery-item:hover .content-block__gallery-image {
    transform: scale(1.05);
}

/* ============================================
   MASONRY GALLERY
   ============================================ */

.content-block__masonry {
    column-count: 3;
    column-gap: var(--space-lg);
}

.content-block__masonry-item {
    break-inside: avoid;
    margin-bottom: var(--space-lg);
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.content-block__masonry-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.content-block__masonry-item:hover .content-block__masonry-image {
    transform: scale(1.05);
}

/* ============================================
   VIDEO
   ============================================ */

.content-block--video {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.content-block__video-wrapper {
    position: relative;
}

/* Video styles inherited from portfolio.css */

/* ============================================
   QUOTE / TESTIMONIAL
   ============================================ */

.content-block--quote {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-3xl) 0;
}

.content-block__blockquote {
    margin: 0;
    padding: var(--space-2xl);
    background: #f9f9f9;
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
}

.content-block__quote-text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    font-style: italic;
    margin: 0 0 var(--space-xl) 0;
}

.content-block__quote-text::before {
    content: '"';
}

.content-block__quote-text::after {
    content: '"';
}

.content-block__quote-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.content-block__author-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.content-block__author-info {
    display: flex;
    flex-direction: column;
}

.content-block__author-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-style: normal;
}

.content-block__author-role {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* ============================================
   TWO COLUMNS
   ============================================ */

.content-block--two-columns {
    margin-bottom: var(--space-4xl);
}

.content-block__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

/* Image left layout (default) */
.content-block--layout-image-left .content-block__column--image {
    order: 1;
}

.content-block--layout-image-left .content-block__column--text {
    order: 2;
}

/* Image right layout */
.content-block--layout-image-right .content-block__column--image {
    order: 2;
}

.content-block--layout-image-right .content-block__column--text {
    order: 1;
}

.content-block__column-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.content-block__column-heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
    line-height: var(--line-height-tight);
}

.content-block__column-content {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.content-block__column-content p {
    margin-bottom: var(--space-md);
}

/* ============================================
   PRODUCTS
   ============================================ */

.content-block--products {
    margin-bottom: var(--space-4xl);
}

.content-block__products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

/* Product card styles inherited from global product-card component */

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
    .content-block__heading {
        font-size: var(--font-size-3xl);
    }

    .content-block__gallery--columns-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .content-block__masonry {
        column-count: 2;
    }

    .content-block__columns {
        gap: var(--space-2xl);
    }
}

@media (max-width: 768px) {
    .single-installation__content-blocks {
        padding: var(--space-2xl) 0;
    }

    .content-block {
        margin-bottom: var(--space-2xl);
    }

    .content-block__heading {
        font-size: var(--font-size-2xl);
    }

    .content-block__gallery--columns-3,
    .content-block__gallery--columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-block__gallery--columns-2 {
        grid-template-columns: 1fr;
    }

    .content-block__masonry {
        column-count: 1;
    }

    .content-block__columns {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Reset order for mobile */
    .content-block--layout-image-left .content-block__column--image,
    .content-block--layout-image-right .content-block__column--image {
        order: 1;
    }

    .content-block--layout-image-left .content-block__column--text,
    .content-block--layout-image-right .content-block__column--text {
        order: 2;
    }

    .content-block__column-heading {
        font-size: var(--font-size-2xl);
    }

    .content-block__products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--space-md);
    }

    .content-block__blockquote {
        padding: var(--space-lg);
    }

    .content-block__quote-text {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 375px) {
    .content-block__gallery--columns-3,
    .content-block__gallery--columns-4 {
        grid-template-columns: 1fr;
    }

    .content-block__products-grid {
        grid-template-columns: 1fr;
    }
}


/* === components/utilities.css === */
/**
 * Utility Components
 * BonEvents Theme
 */

/* ============================================
   Badge Component
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

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

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

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

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

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

.badge--info {
    background-color: var(--color-info);
    color: var(--color-white);
}

.badge--light {
    background-color: var(--color-gray-100);
    color: var(--color-text-primary);
}

.badge--outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

.badge--dot {
    padding-left: var(--space-md);
    position: relative;
}

.badge--dot::before {
    content: '';
    position: absolute;
    left: var(--space-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* ============================================
   Breadcrumb Component
   ============================================ */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--space-md) 0;
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.breadcrumb__link {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

.breadcrumb__item--active .breadcrumb__link {
    color: var(--color-text-primary);
    pointer-events: none;
}

.breadcrumb__separator {
    color: var(--color-gray-400);
    user-select: none;
}

/* ============================================
   Modal Component
   ============================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    overflow-y: auto;
}

.modal--active {
    display: flex;
}

.modal__backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn var(--transition-base);
}

.modal__container {
    position: relative;
    width: 100%;
    max-width: 600px;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: slideUp var(--transition-base);
    z-index: 1;
}

.modal--sm .modal__container {
    max-width: 400px;
}

.modal--lg .modal__container {
    max-width: 800px;
}

.modal--xl .modal__container {
    max-width: 1200px;
}

.modal--full .modal__container {
    max-width: 100%;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-gray-200);
}

.modal__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-base);
}

.modal__close:hover {
    background-color: var(--color-gray-100);
    color: var(--color-text-primary);
}

.modal__close svg {
    width: 24px;
    height: 24px;
}

.modal__body {
    padding: var(--space-xl);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: var(--space-xl);
    border-top: 1px solid var(--color-gray-200);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Alert Component
   ============================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

.alert__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.alert__content {
    flex: 1;
}

.alert__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-xs) 0;
}

.alert__message {
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

.alert__close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: currentColor;
    opacity: 0.7;
    transition: opacity var(--transition-base);
}

.alert__close:hover {
    opacity: 1;
}

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

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

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

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

/* ============================================
   Spinner/Loader Component
   ============================================ */

.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner--sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner--lg {
    width: 60px;
    height: 60px;
    border-width: 4px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Divider Component
   ============================================ */

.divider {
    height: 1px;
    background-color: var(--color-gray-200);
    border: none;
    margin: var(--space-xl) 0;
}

.divider--vertical {
    width: 1px;
    height: auto;
    display: inline-block;
    margin: 0 var(--space-md);
}

.divider--dashed {
    background-image: linear-gradient(
        to right,
        var(--color-gray-300) 50%,
        transparent 50%
    );
    background-size: 8px 1px;
    background-repeat: repeat-x;
    background-color: transparent;
}

/* ============================================
   Tooltip Component
   ============================================ */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip__content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    pointer-events: none;
    z-index: var(--z-tooltip);
}

.tooltip__content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-primary);
}

.tooltip:hover .tooltip__content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* ============================================
   Pagination Component
   ============================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin: var(--space-2xl) 0;
}

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

.pagination__item {
    display: flex;
}

.pagination__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.pagination__link:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

.pagination__link--active {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
    pointer-events: none;
}

.pagination__link--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.pagination__link svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   Visibility Utilities
   ============================================ */

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden !important;
}

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


/* === components/product-card.css === */
/**
 * Product Card Component
 *
 * Styles for product cards on shop page
 * Values from Figma: node-id=80-2564
 *
 * @package BonEvents
 */

.product-card {
	padding: 24px;
	position: relative;
	transition: all 0.3s ease;
}

.product-card__link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* Image: aspect-ratio 1:1 */
.product-card__image {
	aspect-ratio: 1;
	width: 100%;
	margin-bottom: 11px;
	overflow: hidden;
}

.product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.product-card:hover .product-card__image img {
	transform: scale(1.05);
}

/* Text content */
.product-card__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 11px;
}

/* Title: 20px Outfit Regular, line-height 1.29 */
.product-card__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.29;
	color: #2c2c34;
	margin: 0;
}

/* Price: 14px Outfit Light, line-height 2 */
.product-card__price {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 2;
	color: #2c2c34;
	margin: 0;
}

/* Availability: 14px Outfit Light, opacity 80% */
.product-card__availability {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 2;
	color: #2c2c34;
	opacity: 0.8;
	margin: 0;
}

.product-card__availability--unavailable {
	color: #b82d2d;
	opacity: 1;
}

/* Status badge */
.product-badge {
	position: absolute;
	top: 16px;
	right: -16px;
	padding: 4px 16px;
	border-radius: 222px;
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 2;
	color: white;
	z-index: 10;
}

/* Badge variants */
.product-badge--available {
	background: #34b82d;
	box-shadow: 0px 13px 7.6px -9px rgba(5, 72, 2, 0.25);
}

.product-badge--discount {
	background: #b82d2d;
	box-shadow: 0px 13px 7.6px -9px rgba(72, 2, 2, 0.25);
}

.product-badge--hot {
	background: #ff8800;
	box-shadow: 0px 13px 7.6px -9px rgba(145, 51, 0, 0.25);
}

/* Hover state - ?>:07K205< actions */
.product-card__actions {
	display: none;
	gap: 16px;
	margin-top: 11px;
}

.product-card:hover {
	background: white;
	border: 1px solid #f8f9fb;
	box-shadow: 0px 17px 22.7px -12px rgba(162, 162, 162, 0.25);
}

.product-card:hover .product-card__actions {
	display: flex;
}

/* Add to cart button */
.btn--add-to-cart {
	flex: 1;
	background: #2c2c34;
	color: #fcfdff;
	padding: 4px 24px;
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 2;
	border: none;
	cursor: pointer;
	transition: background 0.3s ease;
}

.btn--add-to-cart:hover {
	background: #1a1a20;
}

.btn--add-to-cart:disabled {
	background: rgba(44, 44, 52, 0.05);
	color: rgba(44, 44, 52, 0.5);
	cursor: not-allowed;
}

/* Wishlist button: 40px circle */
.btn-wishlist {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fcfdff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	color: #2c2c34;
	transition: all 0.3s ease;
}

.btn-wishlist:hover {
	transform: scale(1.1);
	color: #b82d2d;
}

/* Responsive */
@media (max-width: 768px) {
	.product-card {
		padding: 16px;
	}
}


/* === components/product-card-v2.css === */
/**
 * Product Card Component v2
 *
 * Universal styles for product cards in catalog, search, and related products.
 * Values from Figma design:
 * - Default: node-id=2116-5662, 2116-5663
 * - Hover disabled: node-id=2116-5661
 * - Hover active: node-id=80-3293
 * - With 1 badge: node-id=2116-5660
 * - With 2 badges: node-id=2116-5656
 *
 * @package BonEvents
 */

/* ==========================================================================
   Base Card Styles
   ========================================================================== */

.product-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 24px;
}

/* Hover background - appears on hover, extends beyond card boundaries */
.product-card-v2__bg {
    position: absolute;
    inset: -3px -6px;
    background: #ffffff;
    border: 1px solid #f8f9fb;
    box-shadow: 0px 17px 22.7px -12px rgba(162, 162, 162, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.product-card-v2:hover .product-card-v2__bg {
    opacity: 1;
}

/* Link wrapper */
.product-card-v2__link {
    display: flex;
    flex-direction: column;
    gap: 11px;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Image
   ========================================================================== */

.product-card-v2__image {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.product-card-v2__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card-v2:hover .product-card-v2__image img {
    transform: scale(1.05);
}

/* Placeholder when no image */
.product-card-v2__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fb;
    color: #2c2c34;
    font-size: 48px;
    opacity: 0.3;
}

/* ==========================================================================
   Content (Title + Price)
   ========================================================================== */

.product-card-v2__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Title: Outfit Regular 400, 20px, line-height 1.29, color #2c2c34 */
.product-card-v2__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.29;
    color: #2c2c34;
    margin: 0;
}

/* Price: Outfit Light 300, 14px, line-height 2, color #2c2c34 */
.product-card-v2__price {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-card-v2__price-current {
    color: #2c2c34;
}

.product-card-v2__price-old {
    text-decoration: line-through;
    opacity: 0.5;
}

/* ==========================================================================
   Availability
   ========================================================================== */

/* Availability container */
.product-card-v2__availability {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0;
    min-height: 28px; /* Reserve space for async content */
}

/* Availability text inside container */
.product-card-v2__availability-text {
    color: inherit;
}

/* Not available for dates: color #B82D2D (red) */
.product-card-v2__availability--unavailable,
.product-card-v2__availability-text.product-card-v2__availability--unavailable {
    color: #b82d2d;
    opacity: 1;
}

/* Loading state */
.product-card-v2__availability-loading {
    color: #999;
}

/* ==========================================================================
   Badges (Labels)
   Position: top-right corner, horizontal layout
   Max 2 badges, Priority: Hot > Discount > Available
   ========================================================================== */

.product-card-v2__badges {
    position: absolute;
    top: 16px;
    right: 8px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 10;
}

/* Base badge styles */
.product-card-v2__badge {
    padding: 4px 16px;
    border-radius: 222px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    color: #ffffff;
    white-space: nowrap;
}

/* Hot badge: Green #34B82D */
.product-card-v2__badge--hot {
    background: #34b82d;
    box-shadow: 0px 13px 7.6px -9px rgba(5, 72, 2, 0.25);
}

/* Discount badge: Red #B82D2D */
.product-card-v2__badge--discount {
    background: #b82d2d;
    box-shadow: 0px 13px 7.6px -9px rgba(72, 2, 2, 0.25);
}

/* Available badge: Orange #FF8800 */
.product-card-v2__badge--available {
    background: #ff8800;
    box-shadow: 0px 13px 7.6px -9px rgba(145, 51, 0, 0.25);
}

/* ==========================================================================
   Hover Actions (Add to cart + Wishlist)
   ========================================================================== */

.product-card-v2__actions {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-card-v2:hover .product-card-v2__actions {
    opacity: 1;
    visibility: visible;
}

/* Add to cart button: bg #2c2c34, color #fcfdff, padding 4px 24px, flex 1 */
.product-card-v2__add-to-cart {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4px 24px;
    background: #2c2c34;
    color: #fcfdff;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s ease;
    white-space: nowrap; /* Prevent text wrapping */
    min-width: 0; /* Allow flex shrink */
}

.product-card-v2__add-to-cart:hover {
    background: #1a1a20;
}

/* Disabled state */
.product-card-v2__add-to-cart:disabled {
    background: rgba(44, 44, 52, 0.05);
    color: rgba(44, 44, 52, 0.5);
    cursor: default;
}

/* Warning state (select dates first) */
.product-card-v2__add-to-cart--warning {
    background: #ff8800;
    color: #ffffff;
}

/* Wishlist button: 48x48px circle, bg #fcfdff */
.product-card-v2__wishlist {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfdff;
    border: none;
    border-radius: 222px;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}

.product-card-v2__wishlist i {
    font-size: 24px;
    color: #2c2c34;
    transition: color 0.3s ease;
}

.product-card-v2__wishlist:hover {
    transform: scale(1.1);
}

.product-card-v2__wishlist:hover i {
    color: #b82d2d;
}

/* Wishlist active state (product is in wishlist) */
.product-card-v2__wishlist.active i {
    color: #b82d2d;
}

.product-card-v2__wishlist.active:hover i {
    color: #2c2c34;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 768px) {
    .product-card-v2 {
        padding: 16px;
    }

    .product-card-v2__bg {
        inset: -2px -4px;
    }

    .product-card-v2__title {
        font-size: 18px;
    }

    .product-card-v2__badge {
        font-size: 14px;
        padding: 2px 12px;
    }

    .product-card-v2__badges {
        right: 4px;
        top: 12px;
        gap: 4px;
    }

    .product-card-v2__add-to-cart {
        padding: 4px 12px;
        font-size: 14px;
        white-space: nowrap;
    }

    .product-card-v2__wishlist {
        width: 40px;
        height: 40px;
    }

    .product-card-v2__wishlist i {
        font-size: 20px;
    }
}

@media (max-width: 375px) {
    .product-card-v2 {
        padding: 12px;
    }

    .product-card-v2__title {
        font-size: 16px;
    }
}


/* === components/product-info.css === */
/**
 * Product Info Sidebar Component
 * 438px width sidebar with category, title, price, tags, color, dates, quantity, add to cart
 * EXACT Figma design specifications - node-id=91-7099 (desktop)
 */

/* ============================================
   Product Info Container
   ============================================ */

.product-info {
	width: 438px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ============================================
   1. Header: Category + Title
   ============================================ */

.product-info__header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Category link - Figma: 14px Light, line-height 2 */
.product-info__category {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.product-info__category:hover {
	opacity: 0.7;
}

/* Product Title - Figma: 36px Regular (400), line-height 1.28 */
.product-info__title {
	font-family: var(--font-primary, 'Outfit');
	font-size: 36px;
	font-weight: 400;
	line-height: 1.28;
	color: var(--color-black, #2C2C34);
	margin: 0;
}

/* Product SKU - small gray text under title */
.product-info__sku {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
}

/* ============================================
   2. Price Block (Price + Regular Price + Deposit)
   ============================================ */

.product-info__price-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;
}

.product-info__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.product-info__price-current,
.product-info__price-sale {
	font-family: var(--font-primary, 'Outfit');
	font-size: 36px;
	font-weight: 400;
	line-height: 1.28;
	color: var(--color-black, #2C2C34);
}

/* Sale price is red */
.product-info__price-sale {
	color: #B82D2D;
}

.product-info__price-unit {
	font-family: var(--font-primary, 'Outfit');
	font-size: 20px;
	font-weight: 400;
	line-height: 1.29;
	color: var(--color-black, #2C2C34);
}

/* +PVN (VAT) indicator next to price */
.product-info__price-vat {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.5;
}

/* Regular price (crossed out, shown separately when on sale) */
.product-info__price-regular {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
	text-decoration: line-through;
}

/* 3. Security Deposit (shown right under price) */
.product-info__deposit {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.8;
}

/* ============================================
   4. Product Tags - Figma: border only, no colored backgrounds
   border: 0.5px solid rgba(44,44,52,0.6), padding: 2px 16px
   ============================================ */

.product-info__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.product-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 2px 16px;
	border-radius: 222px;
	background: transparent;
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: rgba(44, 44, 52, 0.6);
	border: 0.5px solid rgba(44, 44, 52, 0.6);
}

.product-tag i {
	font-size: 12px;
}

.product-tag span {
	/* Text within tag */
}

/* ============================================
   5. Short Description
   ============================================ */

.product-info__description {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.8;
	margin-bottom: 4px;
}

.product-info__description p {
	margin: 0 0 8px 0;
}

.product-info__description p:last-child {
	margin-bottom: 0;
}

.product-info__description ul,
.product-info__description ol {
	padding-left: 20px;
	margin: 0 0 8px 0;
}

.product-info__description ul {
	list-style-type: disc;
}

.product-info__description ol {
	list-style-type: decimal;
}

.product-info__description strong,
.product-info__description b {
	font-weight: 600;
}

.product-info__description em,
.product-info__description i {
	font-style: italic;
}

/* ============================================
   6. Color Selector (20px outer, 12px inner)
   ============================================ */

.product-info__colors {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 4px;
}

.product-info__colors-label {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-black, #2C2C34);
}

.product-info__colors-selected {
	font-weight: 600;
}

.color-selector {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.color-selector__option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.color-selector__option input[type="radio"] {
	display: none;
}

.color-selector__circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--color-border, #E0E0E0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.color-selector__inner {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.color-selector__label {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
}

.color-selector__option:hover .color-selector__circle,
.color-selector__option--active .color-selector__circle {
	border-color: var(--color-black, #2C2C34);
	box-shadow: 0 0 0 2px rgba(44, 44, 52, 0.1);
}

.color-selector__option--active .color-selector__label {
	color: var(--color-black, #2C2C34);
	font-weight: 600;
}

/* Disabled state for incompatible attribute options */
.color-selector__option--disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

.color-selector__option--disabled .color-selector__circle {
	border-color: var(--color-border, #E0E0E0);
	box-shadow: none;
}

/* Attribute Selectors (Variable Products) - same visual style as simple product color selector */
.product-info__attributes {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.product-info__attribute {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.product-info__attribute-label {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-black, #2C2C34);
}

.product-info__attribute-label-text {
	font-weight: 400;
}

.product-info__attribute-selected {
	font-weight: 600;
}

.attribute-selector__select {
	width: 100%;
	padding: 4px 0;
	border: none;
	border-bottom: 0.5px solid #2C2C34;
	border-radius: 0;
	background: transparent;
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%232C2C34' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
}

.attribute-selector__select:focus {
	outline: none;
}

/* Disabled options inside select — greyed out but visible */
.attribute-selector__select option:disabled {
	color: rgba(44, 44, 52, 0.3);
}

/* ============================================
   7. Rental Dates Inputs - Figma: 1 COLUMN, gap 16px
   ============================================ */

.product-info__rental-dates {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rental-dates__field {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.rental-dates__field label {
	font-family: var(--font-primary, 'Outfit');
	font-size: 10px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.5;
}

.rental-dates__input-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 4px 0;
	border-bottom: 0.5px solid #2C2C34;
}

.rental-dates__input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	cursor: pointer;
	padding: 0;
}

.rental-dates__input::placeholder {
	color: var(--color-black, #2C2C34);
	opacity: 0.5;
}

.rental-dates__input:focus {
	outline: none;
}

.rental-dates__icon {
	font-size: 14px;
	color: var(--color-black, #2C2C34);
}

/* ============================================
   8. Quantity Row - Figma: Counter + Availability in ONE ROW, gap 9px
   ============================================ */

.product-info__quantity-row {
	display: flex;
	align-items: center;
	gap: 9px;
}

/* Availability - Figma: 14px Light, opacity 0.8, box icon */
.product-info__availability {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 4px;
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.8;
}

.product-info__availability i {
	font-size: 14px;
}

.product-info__availability--out {
	color: var(--color-text-secondary, #6B6B6B);
}

/* ============================================
   9. Quantity Counter - Figma: 40px height, inline layout
   bg: #FCFDFF, border: 1px rgba(44,44,52,0.1), gap 16px inside
   ============================================ */

.quantity-counter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 40px;
	padding: 4px 16px;
	background: var(--color-white, #FCFDFF);
	border: 1px solid rgba(44, 44, 52, 0.1);
}

.quantity-counter__btn {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 12px;
	color: var(--color-black, #2C2C34);
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.quantity-counter__btn:hover {
	opacity: 1;
}

.quantity-counter__value {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	text-align: center;
	min-width: 20px;
	width: 40px;
	border: none;
	background: transparent;
	padding: 0;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: none;
}

.quantity-counter__value::-webkit-inner-spin-button,
.quantity-counter__value::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity-counter__value:focus {
	outline: none;
}

/* ============================================
   10. Actions: Add to Cart + Wishlist + Rental Period Info
   Figma: gap 24px, btn padding 4px 24px, wishlist 48px
   ============================================ */

.product-info__actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.product-info__actions-row {
	display: flex !important;
	flex-direction: row !important;
	gap: 24px;
	align-items: center;
	width: 437px;
	max-width: 100%;
}

/* Add to Cart - Figma: flex-1, bg #2C2C34, padding 4px 24px */
.product-info__actions-row .btn--add-to-cart,
.product-info__actions-row #addToCartBtn,
#addToCartBtn {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	width: calc(100% - 48px - 24px) !important; /* fallback: full width minus wishlist minus gap */
	max-width: none !important;
	padding: 4px 24px;
	background: var(--color-black, #2C2C34);
	border: none;
	border-radius: 0;
	font-family: var(--font-primary, 'Outfit');
	font-size: 16px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-white, #FCFDFF);
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
}

.product-info__actions-row .btn--add-to-cart:hover {
	background: #1a1a1f;
}

.product-info__actions-row .btn--add-to-cart:active {
	transform: translateY(1px);
}

/* Disabled state - not available for selected dates */
.product-info__actions-row .btn--add-to-cart:disabled,
.product-info__actions-row .btn--add-to-cart.disabled {
	background: rgba(44, 44, 52, 0.3) !important;
	color: rgba(252, 253, 255, 0.7) !important;
	cursor: not-allowed !important;
}

.product-info__actions-row .btn--add-to-cart:disabled:hover,
.product-info__actions-row .btn--add-to-cart.disabled:hover {
	background: rgba(44, 44, 52, 0.3) !important;
	transform: none;
}

/* Wishlist - Figma: 48px круг, bg #FCFDFF */
.product-info__actions-row .btn--wishlist,
.btn--wishlist {
	flex: 0 0 48px !important;
	width: 48px !important;
	height: 48px;
	border-radius: 50%;
	background: var(--color-white, #FCFDFF);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 24px;
	color: var(--color-black, #2C2C34);
	transition: all 0.3s ease;
}

.btn--wishlist:hover {
	transform: scale(1.1);
}

.btn--wishlist:hover i {
	color: #B82D2D;
}

.btn--wishlist.active {
	color: #B82D2D;
}

.btn--wishlist.active:hover {
	transform: scale(1.1);
}

.btn--wishlist.active:hover i {
	color: var(--color-black, #2C2C34);
}

/* ============================================
   11. Rental Period Info - Figma: 12px Light, opacity 0.8
   ============================================ */

.product-info__rental-period {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.8;
}

/* ============================================
   Responsive: Tablet (1024px)
   ============================================ */

@media (max-width: 1024px) {
	.product-info {
		width: 100%;
		max-width: 600px;
	}

	.product-info__actions-row {
		width: 100%;
	}
}

/* ============================================
   Responsive: Mobile (768px)
   ============================================ */

@media (max-width: 768px) {
	.product-info {
		gap: 20px;
	}

	.product-info__quantity-row {
		flex-wrap: wrap;
	}
}

/* ============================================
   Responsive: Mobile (375px) - Figma: node-id=112-5941
   ============================================ */

@media (max-width: 375px) {
	.product-info {
		width: 343px;
		max-width: 100%;
	}

	/* Title still 36px on mobile per Figma */
	.product-info__title {
		font-size: 36px;
	}

	/* Price still 36px on mobile per Figma */
	.product-info__price-current,
	.product-info__price-sale {
		font-size: 36px;
	}

	.product-info__price-unit {
		font-size: 20px;
	}

	.product-info__actions-row {
		width: 100%;
	}
}


/* === components/product-tabs.css === */
/**
 * Product Tabs Component
 * Tab navigation (16px font) + content panels
 * Matches Figma design specifications
 */

/* ============================================
   Tabs Container
   ============================================ */

.product-tabs {
	margin-bottom: 64px;
}

.product-tabs__intro {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
	margin-bottom: 32px;
}

/* ============================================
   Tab Navigation (16px font)
   ============================================ */

.product-tabs__nav {
	display: flex;
	gap: 32px;
	border-bottom: 0.5px solid var(--color-border, #E0E0E0);
	margin-bottom: 32px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.product-tabs__nav::-webkit-scrollbar {
	display: none;
}

.product-tabs__nav-item {
	padding: 12px 0;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var(--font-primary, 'Outfit');
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text-secondary, #6B6B6B);
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	position: relative;
	margin-bottom: -1px;
}

.product-tabs__nav-item:hover {
	color: var(--color-black, #2C2C34);
}

.product-tabs__nav-item--active {
	color: var(--color-black, #2C2C34);
	font-weight: 600;
	border-bottom-color: var(--color-black, #2C2C34);
}

/* ============================================
   Tab Content Panels
   ============================================ */

.product-tabs__content {
	position: relative;
}

.product-tabs__panel {
	display: none;
	animation: fadeIn 0.3s ease;
}

.product-tabs__panel--active {
	display: block;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Content styling */
.product-tabs__panel h1,
.product-tabs__panel h2,
.product-tabs__panel h3,
.product-tabs__panel h4,
.product-tabs__panel h5,
.product-tabs__panel h6 {
	font-family: var(--font-primary, 'Outfit');
	font-weight: 600;
	color: var(--color-black, #2C2C34);
	margin: 0 0 16px 0;
}

.product-tabs__panel h2 {
	font-size: 28px;
	line-height: 1.3;
}

.product-tabs__panel h3 {
	font-size: 24px;
	line-height: 1.3;
}

.product-tabs__panel h4 {
	font-size: 20px;
	line-height: 1.4;
}

.product-tabs__panel p {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
	margin: 0 0 16px 0;
}

.product-tabs__panel ul,
.product-tabs__panel ol {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
	margin: 0 0 16px 0;
	padding-left: 24px;
}

.product-tabs__panel ul {
	list-style-type: disc;
}

.product-tabs__panel ol {
	list-style-type: decimal;
}

.product-tabs__panel li {
	margin-bottom: 8px;
}

.product-tabs__panel strong,
.product-tabs__panel b {
	font-weight: 600;
	color: var(--color-black, #2C2C34);
}

.product-tabs__panel a {
	color: var(--color-black, #2C2C34);
	text-decoration: underline;
	transition: opacity 0.3s ease;
}

.product-tabs__panel a:hover {
	opacity: 0.7;
}

/* ============================================
   Information Tab — 3-column attribute grid
   ============================================ */

.product-attributes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 32px;
}

.product-attributes__column {
	min-width: 0;
}

.product-attributes__table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid rgba(44, 44, 52, 0.15);
}

.product-attributes__table tr:not(:last-child) {
	border-bottom: 1px solid rgba(44, 44, 52, 0.15);
}

.product-attributes__table td {
	padding: 12px 16px;
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	line-height: 1.5;
	vertical-align: top;
}

.product-attributes__label {
	font-weight: 400;
	color: rgba(44, 44, 52, 0.50);
	white-space: nowrap;
}

.product-attributes__value {
	font-weight: 500;
	color: var(--color-black, #2C2C34);
}

/* Empty state */
.product-tabs__empty {
	text-align: center;
	padding: 48px 0;
	color: var(--color-text-secondary, #6B6B6B);
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	line-height: 2;
}

/* ============================================
   Responsive: Mobile (768px)
   ============================================ */

@media (max-width: 768px) {
	.product-tabs {
		margin-bottom: 48px;
	}

	.product-tabs__intro {
		margin-bottom: 24px;
	}

	.product-tabs__nav {
		gap: 24px;
		margin-bottom: 24px;
	}

	.product-tabs__nav-item {
		font-size: 14px;
		padding: 10px 0;
	}

	.product-tabs__panel h2 {
		font-size: 24px;
	}

	.product-tabs__panel h3 {
		font-size: 20px;
	}

	.product-tabs__panel h4 {
		font-size: 18px;
	}

	.product-attributes {
		grid-template-columns: 1fr;
		gap: 0;
	}
}


/* === components/product-lightbox.css === */
/**
 * Product Lightbox Modal Component
 * Figma: node-id=2116-5893
 * Main image: 746px × 746px, Overlay: rgba(44,44,52,0.17)
 * Navigation: 48px circles, Thumbnails: 97px below main image
 */

/* ============================================
   Lightbox Modal Overlay
   ============================================ */

.product-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(44, 44, 52, 0.17);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.product-lightbox.active {
	display: flex;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.product-lightbox__overlay {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

/* ============================================
   Lightbox Container
   ============================================ */

.product-lightbox__container {
	position: relative;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* ============================================
   Close Button (48px circle, top-right corner)
   ============================================ */

.product-lightbox__close {
	position: absolute;
	top: 0;
	right: -72px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-white, #FCFDFF);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 24px;
	color: var(--color-black, #2C2C34);
	transition: all 0.3s ease;
	z-index: 10001;
}

.product-lightbox__close:hover {
	background: var(--color-black, #2C2C34);
	color: var(--color-white, #FCFDFF);
}

/* ============================================
   Main Image Area (746px × 746px)
   ============================================ */

.product-lightbox__main {
	position: relative;
	width: 746px;
	height: 746px;
	background: var(--color-white, #FCFDFF);
}

.product-lightbox__swiper {
	width: 100%;
	height: 100%;
}

.product-lightbox__slide {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white, #FCFDFF);
}

.product-lightbox__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ============================================
   Navigation Buttons (48px circles, outside image)
   ============================================ */

.product-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-white, #FCFDFF);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 24px;
	color: var(--color-black, #2C2C34);
	transition: all 0.3s ease;
	z-index: 10001;
}

.product-lightbox__nav:hover {
	background: var(--color-black, #2C2C34);
	color: var(--color-white, #FCFDFF);
}

.product-lightbox__nav--prev {
	left: -72px;
}

.product-lightbox__nav--next {
	right: -72px;
}

.product-lightbox__nav.swiper-button-disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* ============================================
   Thumbnails (97px, below main image)
   ============================================ */

.product-lightbox__thumbnails {
	display: flex;
	gap: 16px;
	justify-content: center;
}

.product-lightbox__thumb {
	width: 97px;
	height: 97px;
	flex-shrink: 0;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	opacity: 0.2;
	transition: opacity 0.3s ease;
}

.product-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.product-lightbox__thumb:hover,
.product-lightbox__thumb--active {
	opacity: 1;
}

/* ============================================
   Swiper Core Overrides
   ============================================ */

/* Hide default Swiper buttons (we use custom) */
.product-lightbox__swiper .swiper-button-next,
.product-lightbox__swiper .swiper-button-prev {
	display: none;
}

/* Hide default pagination (we use custom thumbnails) */
.product-lightbox__swiper .swiper-pagination {
	display: none;
}

/* ============================================
   Responsive: Desktop 1440px
   ============================================ */

@media (max-width: 1440px) {
	.product-lightbox__main {
		width: 600px;
		height: 600px;
	}

	.product-lightbox__nav--prev {
		left: -60px;
	}

	.product-lightbox__nav--next {
		right: -60px;
	}

	.product-lightbox__close {
		right: -60px;
	}

	.product-lightbox__thumb {
		width: 80px;
		height: 80px;
	}
}

/* ============================================
   Responsive: Tablet (1024px)
   ============================================ */

@media (max-width: 1024px) {
	.product-lightbox__main {
		width: 500px;
		height: 500px;
	}

	.product-lightbox__nav {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}

	.product-lightbox__nav--prev {
		left: -52px;
	}

	.product-lightbox__nav--next {
		right: -52px;
	}

	.product-lightbox__close {
		width: 40px;
		height: 40px;
		font-size: 18px;
		right: -52px;
	}

	.product-lightbox__thumb {
		width: 70px;
		height: 70px;
	}
}

/* ============================================
   Responsive: Mobile (768px)
   ============================================ */

@media (max-width: 768px) {
	.product-lightbox__container {
		gap: 12px;
	}

	.product-lightbox__main {
		width: 90vw;
		height: 90vw;
		max-width: 500px;
		max-height: 500px;
	}

	.product-lightbox__nav {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.product-lightbox__nav--prev {
		left: 8px;
	}

	.product-lightbox__nav--next {
		right: 8px;
	}

	.product-lightbox__close {
		top: 8px;
		right: 8px;
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.product-lightbox__thumbnails {
		gap: 8px;
	}

	.product-lightbox__thumb {
		width: 50px;
		height: 50px;
	}
}

/* ============================================
   Responsive: Mobile (375px)
   ============================================ */

@media (max-width: 375px) {
	.product-lightbox__main {
		width: 343px;
		height: 343px;
	}

	.product-lightbox__nav {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

	.product-lightbox__nav--prev {
		left: 4px;
	}

	.product-lightbox__nav--next {
		right: 4px;
	}

	.product-lightbox__close {
		width: 32px;
		height: 32px;
		font-size: 14px;
		top: 4px;
		right: 4px;
	}

	.product-lightbox__thumb {
		width: 40px;
		height: 40px;
	}
}

/* ============================================
   Animation & Transitions
   ============================================ */

/* Zoom in animation when opening */
@keyframes zoomIn {
	from {
		transform: scale(0.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.product-lightbox.active .product-lightbox__container {
	animation: zoomIn 0.3s ease;
}


/* === components/related-products.css === */
/**
 * Related Products Component
 * 5 column grid using product-card component
 * Matches Figma design specifications
 */

/* ============================================
   Related Products Container
   ============================================ */

.related-products {
	margin-bottom: 64px;
}

.related-products__title {
	font-family: var(--font-heading, 'Outfit');
	font-size: 36px;
	font-weight: 400; /* Figma: Regular = 400 */
	line-height: 1.28;
	color: var(--color-black, #2C2C34);
	margin: 0 0 32px 0;
	/* Left aligned per Figma */
}

/* ============================================
   Flexible Grid (5 items default, stretches for fewer)
   Figma: flex-[1_0_0] for each card, gap 16px
   ============================================ */

.related-products__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.related-products__item {
	/* Flex grow to fill space equally */
	/* flex: 1 1 0 means grow equally, don't shrink, basis 0 */
	flex: 1 1 0;
	min-width: 200px; /* Prevent too narrow cards */
}

/* ============================================
   Responsive: Desktop 1440px
   ============================================ */

@media (max-width: 1440px) {
	.related-products__grid {
		gap: 16px;
	}

	.related-products__item {
		min-width: 220px; /* Slightly wider min for 4 cards */
	}
}

/* ============================================
   Responsive: Tablet (1024px)
   ============================================ */

@media (max-width: 1024px) {
	.related-products {
		margin-bottom: 48px;
	}

	.related-products__title {
		font-size: 28px;
		margin-bottom: 24px;
	}

	.related-products__grid {
		gap: 16px;
	}

	.related-products__item {
		min-width: 200px;
	}
}

/* ============================================
   Responsive: Mobile (768px)
   ============================================ */

@media (max-width: 768px) {
	.related-products__title {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.related-products__grid {
		gap: 12px;
	}

	.related-products__item {
		/* 2 cards per row on mobile */
		min-width: calc(50% - 6px);
		flex: 0 0 calc(50% - 6px);
	}
}

/* ============================================
   Responsive: Mobile (375px)
   ============================================ */

@media (max-width: 480px) {
	.related-products__grid {
		gap: 8px;
	}

	.related-products__item {
		/* 1 card per row on small mobile */
		min-width: 100%;
		flex: 0 0 100%;
	}
}


/* === components/masonry-gallery.css === */
/**
 * Masonry Gallery Component
 * True CSS masonry layout using columns
 * No title, no border-radius - matches Figma design
 */

/* ============================================
   Masonry Gallery Container
   ============================================ */

.masonry-gallery {
	margin-bottom: 64px;
}

/* ============================================
   True Masonry Layout with CSS Columns
   ============================================ */

.masonry-gallery__grid {
	column-count: 3;
	column-gap: 16px;
}

.masonry-gallery__item {
	break-inside: avoid;
	margin-bottom: 16px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background: var(--color-gray-light, #F8F9FB);
}

/* No hover effects - clean design */
.masonry-gallery__item:hover .masonry-gallery__image {
	opacity: 0.95;
}

.masonry-gallery__image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	transition: opacity 0.3s ease;
}

/* ============================================
   Responsive: Tablet (1024px)
   ============================================ */

@media (max-width: 1024px) {
	.masonry-gallery__grid {
		column-count: 2;
		column-gap: 12px;
	}

	.masonry-gallery__item {
		margin-bottom: 12px;
	}
}

/* ============================================
   Responsive: Mobile (768px)
   ============================================ */

@media (max-width: 768px) {
	.masonry-gallery {
		margin-bottom: 48px;
	}

	.masonry-gallery__grid {
		column-count: 2;
		column-gap: 8px;
	}

	.masonry-gallery__item {
		margin-bottom: 8px;
	}
}

/* ============================================
   Responsive: Mobile (375px)
   ============================================ */

@media (max-width: 375px) {
	.masonry-gallery__grid {
		column-count: 1;
		column-gap: 0;
	}

	.masonry-gallery__item {
		margin-bottom: 8px;
	}
}


/* === components/sidebar-filter.css === */
/**
 * Sidebar Filter Component
 *
 * Styles for product filters sidebar
 * Width: 308px, padding-right: 32px
 *
 * @package BonEvents
 */

.sidebar-filter {
	width: 308px;
	border-right: 1px solid rgba(243, 243, 243, 0);
	padding-right: 32px;
	padding-bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.filter-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}

/* Filter title: 24px Outfit Regular, line-height 1.27 */
.filter-title {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.27;
	color: #2c2c34;
	margin: 0;
}

/* Categories list */
.categories-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Accordion */
.category-accordion,
.filter-accordion {
	border-bottom: 1px solid rgba(243, 243, 243, 0.5);
}

.accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 0;
	height: 36px;
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 2;
	color: #2c2c34;
	user-select: none;
}

.accordion-header i {
	font-size: 14px;
	transition: transform 0.3s ease;
}

/* Subcategories */
.subcategories {
	display: none;
	flex-direction: column;
	gap: 8px;
	padding-left: 16px;
	padding-bottom: 16px;
}

.category-accordion--open .subcategories {
	display: flex;
}

.category-accordion--open .accordion-header i {
	transform: rotate(180deg);
}

.subcategory {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 2;
	color: #2c2c34;
	text-decoration: none;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.subcategory:hover {
	opacity: 0.8;
}

.subcategory--active {
	opacity: 1;
}

/* Color filters */
.color-filters {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
}

.color-option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.color-option input[type="radio"] {
	display: none;
}

/* Color circle: 14px diameter */
.color-circle {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid #2c2c34;
	flex-shrink: 0;
}

.color-option--active .color-circle {
	border-width: 2px;
}

.color-label {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 2;
	color: #2c2c34;
	opacity: 0.5;
}

.color-option--active .color-label {
	opacity: 1;
}

/* Show more button */
.btn-show-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 4px 0;
	background: none;
	border: none;
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 2;
	color: #2c2c34;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.btn-show-more:hover {
	opacity: 0.7;
}

.btn-show-more i {
	font-size: 16px;
}

/* Filter actions */
.filter-actions {
	display: flex;
	gap: 24px;
}

.btn {
	flex: 1;
	padding: 4px 24px;
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 2;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn--primary {
	background: #2c2c34;
	color: #fcfdff;
}

.btn--primary:hover {
	background: #1a1a20;
}

.btn--secondary {
	background: transparent;
	color: #2c2c34;
}

.btn--secondary:hover {
	opacity: 0.7;
}

/* Responsive */
@media (max-width: 1024px) {
	.sidebar-filter {
		width: 100%;
		border-right: none;
		padding-right: 0;
	}
}


/* === components/sidebar-filter-v2.css === */
/**
 * Sidebar Filter Component v2
 *
 * Universal filter styles for catalog and search pages.
 * Values from Figma design:
 * - Desktop: node-id=91-6483
 * - Color filter: node-id=91-6005
 * - Price filter: node-id=91-6010
 * - Mobile buttons: node-id=88-13743
 * - Mobile filter: node-id=88-13647
 * - Mobile categories: node-id=88-13859
 *
 * @package BonEvents
 */

/* ==========================================================================
   Mobile Toggle Buttons (hidden on desktop)
   ========================================================================== */

.filter-v2-mobile-buttons {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.filter-v2-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #2c2c34;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.filter-v2-mobile-btn:hover {
    background: #f8f9fb;
    border-color: #2c2c34;
}

.filter-v2-mobile-btn i {
    font-size: 16px;
    color: #2c2c34;
}

/* ==========================================================================
   Mobile Overlay
   ========================================================================== */

.filter-v2-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 44, 52, 0.17);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.filter-v2-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Mobile Panels (Categories & Filter)
   ========================================================================== */

.filter-v2-panel {
    position: fixed;
    top: 0;
    width: 308px;
    height: 100%;
    background: #ffffff;
    z-index: 999;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    overflow: hidden;
}

/* Categories panel - slides from left */
.filter-v2-panel--categories {
    left: 0;
    transform: translateX(-100%);
}

.filter-v2-panel--categories.active {
    transform: translateX(0);
}

/* Filter panel - slides from right */
.filter-v2-panel--filter {
    right: 0;
    transform: translateX(100%);
}

.filter-v2-panel--filter.active {
    transform: translateX(0);
}

/* Panel Header */
.filter-v2-panel__header {
    padding: 24px 32px;
    border-bottom: 1px solid #f8f9fb;
}

.filter-v2-panel__back,
.filter-v2-panel__close {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #2c2c34;
    cursor: pointer;
    padding: 0;
}

.filter-v2-panel__back i,
.filter-v2-panel__close i {
    font-size: 16px;
}

/* Panel Content */
.filter-v2-panel__content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

/* Panel Actions */
.filter-v2-panel__actions {
    padding: 24px 32px;
    display: flex;
    gap: 16px;
    border-top: 1px solid #f8f9fb;
}

/* ==========================================================================
   Mobile Categories List (in categories panel)
   ========================================================================== */

.filter-v2-categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-v2-categories-list__item {
    border-bottom: 1px solid #f8f9fb;
}

.filter-v2-categories-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    text-decoration: none;
    transition: color 0.3s ease;
}

.filter-v2-categories-list__link:hover {
    color: #ff8800;
}

.filter-v2-categories-list__link i {
    font-size: 12px;
    opacity: 0.5;
}

/* ==========================================================================
   Desktop Sidebar
   ========================================================================== */

.filter-v2-sidebar {
    width: 280px;
    flex-shrink: 0;
}

/* ==========================================================================
   Section
   ========================================================================== */

.filter-v2-section {
    margin-bottom: 32px;
}

/* Main section title: Outfit 400, 24px, line-height 1.27, color #2c2c34 */
.filter-v2-section__title--main {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.27;
    color: #2c2c34;
    margin: 0 0 24px 0;
}

/* Sub section title: Outfit 400, 16px */
.filter-v2-section__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #2c2c34;
    margin: 0 0 16px 0;
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.filter-v2-accordion {
    margin-bottom: 8px;
}

.filter-v2-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    background: none;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    cursor: pointer;
    text-align: left;
}

.filter-v2-accordion__header i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.filter-v2-accordion--open .filter-v2-accordion__header i {
    transform: rotate(180deg);
}

.filter-v2-accordion__content {
    display: none;
    padding: 8px 0 16px 0;
}

.filter-v2-accordion--open .filter-v2-accordion__content {
    display: block;
}

/* ==========================================================================
   Checkbox (for category subcategories)
   ========================================================================== */

.filter-v2-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    cursor: pointer;
}

.filter-v2-checkbox input {
    display: none;
}

.filter-v2-checkbox__box {
    width: 16px;
    height: 16px;
    border: 1px solid #2c2c34;
    border-radius: 2px;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.filter-v2-checkbox input:checked + .filter-v2-checkbox__box {
    background: #2c2c34;
    border-color: #2c2c34;
}

.filter-v2-checkbox input:checked + .filter-v2-checkbox__box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-v2-checkbox__label {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

/* ==========================================================================
   Subcategory Links (replaces checkboxes)
   ========================================================================== */

.filter-v2-subcat-link {
    display: block;
    padding: 6px 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.filter-v2-subcat-link:hover {
    opacity: 1;
}

.filter-v2-subcat-link.active {
    opacity: 1;
}

/* ==========================================================================
   Color Filter
   14px outer circle, 8px inner colored dot
   ========================================================================== */

.filter-v2-colors {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-v2-color {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.filter-v2-color input {
    display: none;
}

.filter-v2-color__circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
}

.filter-v2-color__circle::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color, #cccccc);
}

.filter-v2-color input:checked + .filter-v2-color__circle {
    border-color: #2c2c34;
}

.filter-v2-color__label {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

/* Hidden colors (shown after "Show more" click) */
.filter-v2-color--hidden {
    display: none;
}

.filter-v2-colors.expanded .filter-v2-color--hidden {
    display: flex;
}

/* ==========================================================================
   Price Filter (Range Slider)
   ========================================================================== */

.filter-v2-price {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-v2-price__slider {
    position: relative;
    height: 4px;
    margin: 8px 0;
}

.filter-v2-price__track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #e5e5e5;
    border-radius: 2px;
    z-index: 1;
}

.filter-v2-price__fill {
    position: absolute;
    height: 4px;
    background: #2c2c34;
    border-radius: 2px;
    z-index: 2;
}

.filter-v2-price__range {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 3;
}

.filter-v2-price__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #2c2c34;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}

.filter-v2-price__range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #2c2c34;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}

.filter-v2-price__inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-v2-price__input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #f8f9fb;
    border-radius: 4px;
    flex: 1;
}

.filter-v2-price__currency {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #2c2c34;
    opacity: 0.5;
}

.filter-v2-price__input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #2c2c34;
    outline: none;
}

.filter-v2-price__input::-webkit-outer-spin-button,
.filter-v2-price__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.filter-v2-price__input[type=number] {
    -moz-appearance: textfield;
}

.filter-v2-price__separator {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #2c2c34;
    opacity: 0.5;
}

/* ==========================================================================
   Show More Link
   ========================================================================== */

.filter-v2-show-more {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    cursor: pointer;
    padding: 8px 0;
    margin-top: 8px;
}

.filter-v2-show-more:hover {
    color: #B82D2D;
}

.filter-v2-show-more i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.filter-v2-show-more.expanded i {
    transform: rotate(180deg);
}

/* Show more text toggle */
.filter-v2-show-more__text--expanded {
    display: none;
}

.filter-v2-show-more.expanded .filter-v2-show-more__text {
    display: none;
}

.filter-v2-show-more.expanded .filter-v2-show-more__text--expanded {
    display: inline;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.filter-v2-sidebar__actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.filter-v2-btn {
    flex: 1;
    padding: 12px 24px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Apply button: bg #2c2c34, color #fcfdff */
.filter-v2-btn--apply {
    background: #2c2c34;
    color: #fcfdff;
}

.filter-v2-btn--apply:hover {
    background: #1a1a20;
}

/* Clear button: transparent bg, color #2c2c34 */
.filter-v2-btn--clear {
    background: transparent;
    color: #2c2c34;
}

.filter-v2-btn--clear:hover {
    background: #f8f9fb;
}

/* ==========================================================================
   Rental Time Section (Mobile Filter Panel)
   ========================================================================== */

.filter-v2-section--rental {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #f8f9fb;
}

.filter-v2-rental-inputs {
    display: flex;
    gap: 16px;
}

.filter-v2-rental-input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-v2-rental-input label {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #2c2c34;
    opacity: 0.5;
}

.filter-v2-date-input {
    width: 100%;
    padding: 12px;
    background: #f8f9fb;
    border: none;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #2c2c34;
    outline: none;
}

.filter-v2-date-input:focus {
    background: #ffffff;
    box-shadow: 0 0 0 1px #2c2c34;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 1024px) {
    /* Show mobile buttons, hide desktop sidebar */
    .filter-v2-mobile-buttons {
        display: flex;
    }

    .filter-v2-sidebar {
        display: none;
    }
}

@media (max-width: 375px) {
    .filter-v2-panel {
        width: 100%;
    }

    .filter-v2-panel__content {
        padding: 24px 16px;
    }

    .filter-v2-panel__header {
        padding: 16px;
    }

    .filter-v2-panel__actions {
        padding: 16px;
    }
}

/* ==========================================================================
   Hide mobile elements on desktop
   ========================================================================== */

@media (min-width: 1025px) {
    .filter-v2-mobile-buttons,
    .filter-v2-overlay,
    .filter-v2-panel {
        display: none !important;
    }
}


/* === components/rental-modal.css === */
/**
 * Rental Dates Modal Component
 *
 * Modal window for selecting rental dates
 * Width: 438px, padding: 32px
 * From Figma: node-id=91-8926
 *
 * @package BonEvents
 */

/* Overlay: rgba(44, 44, 52, 0.17) */
.rental-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(44, 44, 52, 0.17);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Modal: 438px width, 32px padding */
.rental-modal {
	position: relative;
	width: 438px;
	max-width: 90%;
	background: #fcfdff;
	padding: 32px;
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Close button: 48px circle, positioned outside */
.rental-modal__close {
	position: absolute;
	top: -80px;
	right: -80px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fcfdff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 24px;
	color: #2c2c34;
	transition: all 0.3s ease;
}

.rental-modal__close:hover {
	transform: rotate(90deg);
}

.rental-modal__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

/* Title: 24px Outfit Regular, line-height 1.27 */
.rental-modal__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.27;
	color: #2c2c34;
	margin: 0;
}

/* Description: 14px Outfit Light, opacity 80% */
.rental-modal__description {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 2;
	color: #2c2c34;
	opacity: 0.8;
	margin: 0;
}

.rental-modal__dates {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rental-modal__actions {
	display: flex;
	gap: 24px;
}

/* Responsive */
@media (max-width: 768px) {
	.rental-modal {
		width: 90%;
		padding: 24px;
	}

	.rental-modal__close {
		top: -60px;
		right: 0;
	}
}

@media (max-width: 480px) {
	.rental-modal__close {
		top: 16px;
		right: 16px;
	}
}


/* === components/dates-mismatch-modal.css === */
/**
 * Dates Mismatch Modal
 * Modal for warning when rental dates don't match cart items
 *
 * Figma: node-id=2263-7526
 * Based on existing rental-modal.css patterns
 *
 * @package BonEvents
 * @since 1.0.0
 */

/* ============================================
   Modal Overlay
   rgba(44, 44, 52, 0.17)
   ============================================ */

.dates-mismatch-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.dates-mismatch-modal.active {
    display: flex;
}

.dates-mismatch-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 52, 0.17);
    animation: datesMismatchFadeIn 0.3s ease;
}

@keyframes datesMismatchFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   Modal Container
   Width: 438px, Padding: 32px
   ============================================ */

.dates-mismatch-modal__container {
    position: relative;
    width: 438px;
    max-width: calc(100% - 32px);
    background: #fcfdff;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    animation: datesMismatchSlideUp 0.3s ease;
    z-index: 1;
}

@keyframes datesMismatchSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================
   Close Button
   48px circle, positioned outside top-right
   ============================================ */

.dates-mismatch-modal__close {
    position: absolute;
    top: -24px;
    right: -24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fcfdff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    color: #2c2c34;
    transition: transform 0.3s ease;
}

.dates-mismatch-modal__close:hover {
    transform: rotate(90deg);
}

.dates-mismatch-modal__close i {
    font-size: 16px;
}

/* ============================================
   Content
   Gap: 16px between title and description
   ============================================ */

.dates-mismatch-modal__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Title: Outfit Regular 24px, line-height 1.27, #2c2c34 */
.dates-mismatch-modal__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.27;
    color: #2c2c34;
    margin: 0;
}

/* Description: Outfit Light 14px, line-height 2, opacity 80% */
.dates-mismatch-modal__description {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0;
}

/* ============================================
   Buttons
   Gap: 24px, both buttons flex: 1
   ============================================ */

.dates-mismatch-modal__actions {
    display: flex;
    gap: 24px;
    width: 100%;
}

.dates-mismatch-modal__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Apply button: bg #2c2c34, text #fcfdff */
.dates-mismatch-modal__btn--apply {
    background: #2c2c34;
    color: #fcfdff;
}

.dates-mismatch-modal__btn--apply:hover {
    background: #1a1a20;
}

.dates-mismatch-modal__btn--apply:disabled {
    background: rgba(44, 44, 52, 0.3);
    cursor: not-allowed;
}

/* Cancel button: transparent bg, text #2c2c34 */
.dates-mismatch-modal__btn--cancel {
    background: transparent;
    color: #2c2c34;
}

.dates-mismatch-modal__btn--cancel:hover {
    background: rgba(44, 44, 52, 0.05);
}

/* ============================================
   Loading State
   ============================================ */

.dates-mismatch-modal--loading .dates-mismatch-modal__btn--apply {
    position: relative;
    color: transparent;
}

.dates-mismatch-modal--loading .dates-mismatch-modal__btn--apply::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(252, 253, 255, 0.3);
    border-top-color: #fcfdff;
    border-radius: 50%;
    animation: datesMismatchSpin 0.8s linear infinite;
}

@keyframes datesMismatchSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .dates-mismatch-modal__container {
        width: 90%;
        max-width: 400px;
        padding: 24px;
        gap: 24px;
    }

    .dates-mismatch-modal__close {
        top: -20px;
        right: -8px;
    }

    .dates-mismatch-modal__title {
        font-size: 20px;
    }

    .dates-mismatch-modal__actions {
        flex-direction: column;
        gap: 16px;
    }

    .dates-mismatch-modal__btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .dates-mismatch-modal__container {
        padding: 20px;
    }

    .dates-mismatch-modal__close {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}


/* === components/wishlist-login-modal.css === */
/**
 * Wishlist Login Modal
 * Modal for prompting non-logged-in users to log in before using wishlist
 *
 * Based on dates-mismatch-modal.css patterns
 *
 * @package BonEvents
 * @since 1.0.0
 */

/* ============================================
   Modal Overlay
   rgba(44, 44, 52, 0.17)
   ============================================ */

.wishlist-login-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.wishlist-login-modal.active {
    display: flex;
}

.wishlist-login-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 52, 0.17);
    animation: wishlistLoginFadeIn 0.3s ease;
}

@keyframes wishlistLoginFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   Modal Container
   Width: 438px, Padding: 32px
   ============================================ */

.wishlist-login-modal__container {
    position: relative;
    width: 438px;
    max-width: calc(100% - 32px);
    background: #fcfdff;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    animation: wishlistLoginSlideUp 0.3s ease;
    z-index: 1;
}

@keyframes wishlistLoginSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================
   Close Button
   48px circle, positioned outside top-right
   ============================================ */

.wishlist-login-modal__close {
    position: absolute;
    top: -24px;
    right: -24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fcfdff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    color: #2c2c34;
    transition: transform 0.3s ease;
}

.wishlist-login-modal__close:hover {
    transform: rotate(90deg);
}

.wishlist-login-modal__close i {
    font-size: 16px;
}

/* ============================================
   Content
   Gap: 16px between title and description
   ============================================ */

.wishlist-login-modal__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Title: Outfit Regular 24px, line-height 1.27, #2c2c34 */
.wishlist-login-modal__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.27;
    color: #2c2c34;
    margin: 0;
}

/* Description: Outfit Light 14px, line-height 2, opacity 80% */
.wishlist-login-modal__description {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0;
}

/* ============================================
   Buttons
   Gap: 24px, both buttons flex: 1
   ============================================ */

.wishlist-login-modal__actions {
    display: flex;
    gap: 24px;
    width: 100%;
}

.wishlist-login-modal__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Log in button: bg #2c2c34, text #fcfdff */
.wishlist-login-modal__btn--login {
    background: #2c2c34;
    color: #fcfdff;
}

.wishlist-login-modal__btn--login:hover {
    background: #1a1a20;
    color: #fcfdff;
}

/* Register button: transparent bg, text #2c2c34 */
.wishlist-login-modal__btn--register {
    background: transparent;
    color: #2c2c34;
}

.wishlist-login-modal__btn--register:hover {
    background: rgba(44, 44, 52, 0.05);
    color: #2c2c34;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .wishlist-login-modal__container {
        width: 90%;
        max-width: 400px;
        padding: 24px;
        gap: 24px;
    }

    .wishlist-login-modal__close {
        top: -20px;
        right: -8px;
    }

    .wishlist-login-modal__title {
        font-size: 20px;
    }

    .wishlist-login-modal__actions {
        flex-direction: column;
        gap: 16px;
    }

    .wishlist-login-modal__btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .wishlist-login-modal__container {
        padding: 20px;
    }

    .wishlist-login-modal__close {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}


/* === components/contact-modal.css === */
/**
 * Contact Form Modal Styles
 * Based on Figma Design - Node 2261:7124
 * BonEvents Theme
 */

/* ============================================
   Contact Modal Container
   ============================================ */

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.contact-modal--active {
    display: flex;
}

/* Backdrop - Figma: bg #2C2C34, opacity 17% */
.contact-modal__backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(44, 44, 52, 0.17);
    animation: contactModalFadeIn var(--transition-slow);
    cursor: pointer;
}

/* Modal Container - Figma: 438px width, 32px padding */
.contact-modal__container {
    position: relative;
    width: 438px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    background-color: var(--color-white);
    padding: 32px;
    animation: contactModalSlideUp var(--transition-slow);
    z-index: 1;
}

/* Close Button - Figma: 48x48px, outside modal, top-right */
.contact-modal__close {
    position: absolute;
    top: 0;
    right: -72px;
    width: 48px;
    height: 48px;
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 50%;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.contact-modal__close:hover {
    opacity: 0.8;
}

.contact-modal__close svg {
    width: 24px;
    height: 24px;
    color: #2c2c34;
    display: block;
}

/* ============================================
   Form State
   ============================================ */

.contact-modal__form-state {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contact-modal__form-state.is-hidden {
    display: none;
}

/* ============================================
   Form Header - Title & Description
   ============================================ */

.contact-modal__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Title - Figma: Outfit 24px/400, line-height 1.27 */
.contact-modal__title {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2c2c34;
    margin: 0;
}

/* Description - Figma: Outfit 14px/300, line-height 2, opacity 0.8 */
.contact-modal__description {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: rgba(44, 44, 52, 0.8);
    margin: 0;
}

/* ============================================
   Contact Form 7 Styling
   ============================================ */

.contact-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-modal__form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Reset p margins inside form */
.contact-modal__form .wpcf7-form p {
    margin: 0;
}

/* Form field wrapper */
.contact-modal__form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    position: relative;
}

/* All text inputs and textarea */
.contact-modal__form input[type="text"],
.contact-modal__form input[type="email"],
.contact-modal__form textarea {
    width: 100%;
    border: none;
    border-bottom: 0.5px solid rgba(44, 44, 52, 0.5);
    background: transparent;
    padding: 4px 0;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    outline: none;
    transition: border-color 0.2s ease;
    resize: none;
    box-sizing: border-box;
}

.contact-modal__form input[type="text"]:focus,
.contact-modal__form input[type="email"]:focus,
.contact-modal__form textarea:focus {
    border-bottom-color: #2c2c34;
}

/* Placeholder styling */
.contact-modal__form input::placeholder,
.contact-modal__form textarea::placeholder {
    color: rgba(44, 44, 52, 0.5);
    font-weight: 300;
}

/* Textarea specific */
.contact-modal__form textarea {
    min-height: 80px;
}

/* Hide CF7 default labels - we'll use placeholder instead */
.contact-modal__form .wpcf7-form > p > label {
    display: block;
    width: 100%;
}

/* CF7 validation messages */
.contact-modal__form .wpcf7-not-valid-tip {
    font-size: 12px;
    color: #F44336;
    margin-top: 4px;
    display: block;
}

/* Hide CF7 response output */
.contact-modal__form .wpcf7-response-output {
    display: none !important;
}

/* Hide CF7 spinner */
.contact-modal__form .wpcf7-spinner {
    display: none !important;
}

/* ============================================
   Form Buttons - MUST be side by side 50/50
   ============================================ */

.contact-modal__buttons {
    width: 100% !important;
    margin-top: 16px;
}

/* CF7 wraps buttons in <p> - make THAT the flex container */
.contact-modal__buttons > p,
.contact-modal__buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Send Button - Figma: bg #2C2C34, px 24px, py 4px */
.contact-modal__buttons input[type="submit"],
.contact-modal__buttons .wpcf7-submit,
.contact-modal__btn-submit {
    flex: 1 1 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: block !important;
    background-color: #2c2c34 !important;
    color: #fcfdff !important;
    border: none !important;
    padding: 4px 24px !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    text-align: center !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 0 !important;
}

.contact-modal__buttons input[type="submit"]:hover,
.contact-modal__buttons .wpcf7-submit:hover,
.contact-modal__btn-submit:hover {
    opacity: 0.9 !important;
}

/* Cancel Button - Figma: transparent, py 4px */
.contact-modal__buttons .contact-modal__btn-cancel,
.contact-modal__btn-cancel {
    flex: 1 1 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: block !important;
    background: transparent !important;
    color: #2c2c34 !important;
    border: none !important;
    padding: 4px 0 !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.contact-modal__btn-cancel:hover {
    opacity: 0.7 !important;
}

/* ============================================
   Thank You State
   ============================================ */

.contact-modal__success-state {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.contact-modal__success-state.is-visible {
    display: flex;
}

/* Logo - Figma: 160x58px */
.contact-modal__logo {
    width: 160px;
    height: 58px;
}

.contact-modal__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Success content */
.contact-modal__success-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Thank you title - Figma: 36px */
.contact-modal__success-title {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    color: #2c2c34;
    margin: 0;
}

/* Thank you subtitle - Figma: 14px, opacity 0.8 */
.contact-modal__success-subtitle {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: rgba(44, 44, 52, 0.8);
    margin: 0;
}

/* Close button in success state */
.contact-modal__btn-close {
    background-color: #2c2c34;
    color: #fcfdff;
    border: none;
    padding: 4px 24px;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.contact-modal__btn-close:hover {
    opacity: 0.9;
}

/* ============================================
   Animations
   ============================================ */

@keyframes contactModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes contactModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Mobile Responsive - Figma: 343px width
   ============================================ */

@media (max-width: 768px) {
    .contact-modal {
        padding: 16px;
        align-items: flex-start;
        padding-top: 80px;
    }

    .contact-modal__container {
        width: 343px;
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 100px);
        padding: 32px;
        overflow-y: auto;
    }

    /* Close button repositioned for mobile - above modal */
    .contact-modal__close {
        position: absolute;
        top: -60px;
        right: 0;
        width: 48px;
        height: 48px;
        background-color: var(--color-white);
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    /* Smaller textarea on mobile so buttons fit without scroll */
    .contact-modal__form textarea {
        min-height: 60px !important;
        max-height: 80px !important;
    }

    /* Form state with less gap on mobile */
    .contact-modal__form-state {
        gap: 24px;
    }

    /* Buttons STILL side by side on mobile */
    .contact-modal__buttons,
    .contact-modal__buttons > p {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
    }
}

/* Very small screens */
@media (max-width: 375px) {
    .contact-modal {
        padding-top: 70px;
    }

    .contact-modal__container {
        width: calc(100vw - 32px);
        max-width: 343px;
        padding: 24px;
    }

    .contact-modal__close {
        top: -56px;
        right: 0;
    }

    .contact-modal__buttons,
    .contact-modal__buttons > p {
        gap: 12px !important;
    }

    /* Even smaller textarea on very small screens */
    .contact-modal__form textarea {
        min-height: 50px !important;
        max-height: 60px !important;
    }
}

/* ============================================
   Loading State
   ============================================ */

.contact-modal__form.is-submitting .contact-modal__buttons input[type="submit"] {
    position: relative;
    color: transparent;
}

.contact-modal__form.is-submitting .contact-modal__buttons input[type="submit"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #fcfdff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: contactModalSpinner 0.8s linear infinite;
}

@keyframes contactModalSpinner {
    to { transform: rotate(360deg); }
}


/* === components/shop-controls.css === */
/**
 * Shop Controls Component
 *
 * Rental dates picker and product grid slider
 * From Figma: rental dates width 437px, slider width 213px
 *
 * @package BonEvents
 */

/* Rental dates picker: 437px width */
.rental-dates-picker {
	display: flex;
	gap: 16px;
	width: 437px;
}

.date-input {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Label: 10px Outfit Regular, opacity 50% */
.date-input__label {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 10px;
	line-height: 2;
	color: #2c2c34;
	opacity: 0.5;
	margin-bottom: 0;
}

.date-input__wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

/* Input: 14px Outfit Light, border-bottom 0.5px */
.date-input__field {
	width: 100%;
	border: none;
	border-bottom: 0.5px solid #2c2c34;
	padding: 4px 24px 4px 0;
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 2;
	color: #2c2c34;
	background: transparent;
	outline: none;
}

.date-input__field::placeholder {
	opacity: 0.5;
}

.date-input__field:focus {
	border-bottom-color: #2c2c34;
}

/* Calendar icon */
.date-input__icon {
	position: absolute;
	right: 0;
	font-size: 14px;
	color: #2c2c34;
	pointer-events: none;
}

/* Product grid slider: 213px width */
.product-grid-slider {
	width: 213px;
	padding-bottom: 4px;
	position: relative;
}

/* Label: 10px Outfit Regular, opacity 50%, right-aligned */
.slider-label {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 10px;
	line-height: 2;
	color: #2c2c34;
	opacity: 0.5;
	text-align: right;
	display: block;
	margin-bottom: 4px;
}

/* Range slider */
.slider {
	width: 100%;
	height: 10px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	outline: none;
	cursor: pointer;
}

/* Chrome/Safari thumb */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 10px;
	height: 10px;
	background: #2c2c34;
	border-radius: 50%;
	cursor: pointer;
	margin-top: -4.5px; /* Center thumb on track: -(thumb_height - track_height) / 2 */
}

/* Firefox thumb */
.slider::-moz-range-thumb {
	width: 10px;
	height: 10px;
	background: #2c2c34;
	border-radius: 50%;
	cursor: pointer;
	border: none;
}

/* Track */
.slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 1px;
	background: rgba(44, 44, 52, 0.3);
}

.slider::-moz-range-track {
	width: 100%;
	height: 1px;
	background: rgba(44, 44, 52, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
	.rental-dates-picker {
		width: 100%;
		max-width: 437px;
	}

	.product-grid-slider {
		display: none;
	}
}


/* === components/pagination.css === */
/**
 * Pagination Component
 *
 * Pagination for shop page
 * Circle buttons: 48px diameter
 * From Figma: node-id=80-3458
 *
 * @package BonEvents
 */

.pagination {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-top: 32px;
	justify-content: center;
}

/* Arrow buttons: 48px circle, border 0.5px */
.pagination__arrow {
	width: 48px;
	height: 48px;
	border: 0.5px solid #2c2c34;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #2c2c34;
	font-size: 15px;
	transition: all 0.3s ease;
	background: transparent;
	cursor: pointer;
}

.pagination__arrow:hover:not(.pagination__arrow--disabled) {
	background: #2c2c34;
	color: #fcfdff;
}

.pagination__arrow--disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Numbers */
.pagination__numbers {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* Page numbers: 16px Outfit Light */
.pagination__number {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 2;
	color: #2c2c34;
	text-decoration: none;
	opacity: 0.3;
	transition: opacity 0.3s ease;
}

.pagination__number:hover {
	opacity: 0.6;
}

/* Active number: Outfit Regular, opacity 1 */
.pagination__number--active {
	font-weight: 400;
	opacity: 1;
}

/* Dots */
.pagination__dots {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #2c2c34;
	opacity: 0.3;
}

/* Responsive */
@media (max-width: 768px) {
	.pagination {
		gap: 24px;
	}

	.pagination__numbers {
		gap: 16px;
	}

	.pagination__arrow {
		width: 40px;
		height: 40px;
	}
}


/* === components/shop-heading.css === */
/**
 * Shop Heading Component
 *
 * Page heading for shop/category pages
 * H2: 36px Outfit Regular, line-height 1.28
 * Description: 14px Outfit Light, opacity 80%
 *
 * @package BonEvents
 */

.shop-heading {
	margin-bottom: 32px;
}

.shop-heading__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 800px;
}

/* Title: 36px Outfit Regular, line-height 1.28 */
.shop-heading__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.28;
	color: #2c2c34;
	margin: 0;
}

/* Description: 14px Outfit Light, opacity 80% */
.shop-heading__description {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 2;
	color: #2c2c34;
	opacity: 0.8;
	margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
	.shop-heading {
		margin-bottom: 24px;
	}

	.shop-heading__title {
		font-size: 28px;
	}
}


/* === components/category-tabs.css === */
/**
 * Category Tabs Component
 *
 * Subcategory tabs for shop page
 * Active: 16px Outfit Regular
 * Inactive: 16px Outfit Light, opacity 50%
 *
 * @package BonEvents
 */

.category-tabs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
}

.tabs-list {
	display: flex;
	gap: 32px;
	flex: 1;
	flex-wrap: wrap;
}

/* Tab: 16px Outfit Light, opacity 50% */
.tab {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 2;
	color: #2c2c34;
	text-decoration: none;
	opacity: 0.5;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.tab:hover {
	opacity: 0.8;
}

/* Active tab: 16px Outfit Regular, opacity 1 */
.tab--active {
	font-weight: 400;
	opacity: 1;
}

/* View more button */
.btn-view-more {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 4px 0;
	background: none;
	border: none;
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 2;
	color: #2c2c34;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.3s ease;
}

.btn-view-more:hover {
	opacity: 0.7;
}

.btn-view-more i {
	font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
	.category-tabs {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.tabs-list {
		gap: 16px;
		overflow-x: auto;
		width: 100%;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.btn-view-more {
		align-self: flex-end;
	}
}


/* === layout/header.css === */
/**
 * Header Layout
 * BonEvents Theme - Figma Design
 */

/* ============================================
   HEADER
   ============================================ */

.site-header {
  position: relative;
  z-index: var(--z-sticky);
  background-color: #FCFDFF;
  overflow: visible;
}

/* Homepage - Logo centered above menu (desktop only) */
.site-header--home .header__logo-wrapper {
  display: flex;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 16px;
}

.site-header--home .header__container {
  position: relative;
  justify-content: center;
}

/* On homepage - nav is absolutely centered */
.site-header--home .header__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* On homepage - actions stay on the right */
.site-header--home .header__actions {
  margin-left: auto;
}

/* On homepage desktop - hide logo in container (shown in wrapper above) */
.site-header--home .header__logo--mobile-only {
  display: none !important;
}

/* ============================================
   CONTAINER
   ============================================ */

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ============================================
   LOGO
   ============================================ */

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #2C2C34;
  transition: opacity 0.2s ease;
}

.header__logo-link:hover {
  opacity: 0.8;
}

.header__logo-img {
  height: 48px;
  width: auto;
  display: block;
}

.header__logo-text {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: #2C2C34;
}

/* ============================================
   NAVIGATION
   ============================================ */

.header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header__menu {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__menu-item {
  position: relative;
}

.header__menu-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #2C2C34;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s ease, color 0.2s ease;
  position: relative;
}

.header__menu-link:hover,
.header__menu-link--active,
.header__menu-item--dropdown-active .header__menu-link,
.header__menu-item:hover .header__menu-link {
  color: #2C2C34;
  opacity: 1;
}

/* Dot indicator for active menu item with children */
.header__menu-item--has-children.header__menu-item--active .header__menu-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: #2C2C34;
  border-radius: 50%;
}

/* Dot indicator on hover for menu items with children (dropdown or mega-menu) */
.header__menu-item--has-children:hover .header__menu-link::after,
.header__menu-item--dropdown-active .header__menu-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: #2C2C34;
  border-radius: 50%;
}

/* ============================================
   MEGA MENU
   ============================================ */

.header__mega-menu {
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  transform: translateX(-51.5%) translateY(-10px);
  width: 100vw;
  background-color: #FCFDFF;
  box-shadow: 0 4px 24px rgba(44, 44, 52, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: var(--z-dropdown);
}

.header__menu-item:hover .header__mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-51.5%) translateY(0);
}

.header__mega-menu-container {
  display: flex;
  min-height: 250px;
  width:90%;
  max-width: 1440px;
  margin: 0 auto;
}

/* Mega Menu Sidebar */
.header__mega-menu-sidebar {
  width: 324px;
  flex-shrink: 0;
  padding: 16px 0;
  border-right: 0.5px solid rgba(44, 44, 52, 0.25);
}

.header__mega-menu-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.header__mega-menu-category-item {
  /* Category item wrapper */
}

.header__mega-menu-category-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
  color: #2C2C34;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header__mega-menu-category-item.is-active .header__mega-menu-category-link,
.header__mega-menu-category-link:hover {
  background-color: #2C2C34;
  color: #FCFDFF;
}

/* Mega Menu Content */
.header__mega-menu-content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  max-height: 500px;
}

.header__mega-menu-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.29;
  color: #2C2C34;
  margin: 0 0 24px 0;
}

.header__mega-menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.header__mega-menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.header__mega-menu-card:hover {
  background-color: #FFFFFF;
  border: 1px solid #F8F9FB;
  box-shadow: 0px 25px 19px -9px rgba(162, 162, 162, 0.25);
}

.header__mega-menu-card-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__mega-menu-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header__mega-menu-card-image svg {
  width: 80px;
  height: 80px;
}

.header__mega-menu-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #2C2C34;
  text-align: center;
}

/* ============================================
   DROPDOWN LINE (Secondary Menu)
   ============================================ */

.header__dropdown-line {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #FCFDFF;
  border-top: 1px solid rgba(44, 44, 52, 0.1);
  padding: 16px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: var(--z-dropdown);
}

.header__dropdown-line--active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__dropdown-container {
  display: flex;
  justify-content: center;
}

.header__dropdown-items {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__dropdown-line-item {
  /* Item wrapper */
}

.header__dropdown-line-link {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(44, 44, 52, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.header__dropdown-line-link:hover,
.header__dropdown-line-item--active .header__dropdown-line-link {
  color: #2C2C34;
}

/* ============================================
   ACTIONS
   ============================================ */

.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  color: #2C2C34;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header__action-btn:hover {
  background-color: rgba(44, 44, 52, 0.05);
  opacity: 1;
}

.header__action-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Cart Badge */
.header__action-btn--cart {
  position: relative;
}

.header__cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #FCFDFF;
  background-color: #B82D2D;
  border-radius: 9px;
  border: 2px solid #FCFDFF;
}

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */

.header__language-switcher {
  position: relative;
}

.header__language-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  right: -30px;
  min-width: 100px;
  background-color: #FCFDFF;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: var(--z-dropdown);
  box-shadow: 0px -20px 30px 0px rgba(162, 162, 162, 0.25);
}

.header__language-switcher:hover .header__language-dropdown,
.header__language-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__language-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header__language-item {
  /* Language item wrapper */
}

.header__language-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2C2C34;
  text-decoration: none;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.header__language-link:hover,
.header__language-item--active .header__language-link {
  opacity: 1;
}

/* ============================================
   MOBILE MENU TOGGLE
   Figma: fa-thin fa-bars, 32px
   ============================================ */

.header__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.header__mobile-toggle:hover {
  opacity: 0.7;
}

.header__mobile-toggle i {
  font-size: 32px;
  color: #2C2C34;
}

/* ============================================
   SEARCH POPUP
   ============================================ */

/* Overlay - затемняет контент страницы */
.header__search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2C2C34;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: calc(var(--z-modal) - 1);
  pointer-events: none;
}

.header__search-overlay.header__search-overlay--active {
  opacity: 0.17;
  visibility: visible;
  pointer-events: auto;
}

/* Search Popup - поле поиска сверху */
.header__search-popup {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100vw;
  background-color: #FCFDFF;
  border-bottom: 1px solid rgba(243, 243, 243, 0);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: var(--z-modal);
  pointer-events: none;
}

.header__search-popup--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Контейнер формы */
.header__search-container {
  width: 100%;
  padding: 96px 275px 64px;
  position: relative;
}

/* Кнопка закрытия - круглая, белая, справа */
.header__search-close {
  position: fixed;
  top: 58px;
  right: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: #FCFDFF;
  border: none;
  border-radius: 50%;
  color: #2C2C34;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: calc(var(--z-modal) + 1);
}

.header__search-close:hover {
  background-color: #f5f5f5;
}

.header__search-close svg {
  width: 24px;
  height: 24px;
}

/* Форма поиска */
.header__search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  background-color: transparent;
  border: none;
  padding: 0;
}

.header__search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 0.5px solid #2C2C34;
  padding: 4px 0;
}

.header__search-icon {
  width: 20px;
  height: 20px;
  color: #2C2C34;
  flex-shrink: 0;
}

.header__search-input {
  flex: 1;
  width: 100%;
  padding: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
  color: #2C2C34;
  background-color: transparent;
  border: none;
  outline: none;
}

.header__search-input::placeholder {
  color: #2C2C34;
  font-weight: 300;
}

/* Кнопка Search - черная */
.header__search-submit {
  height: 40px;
  padding: 4px 24px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: #FCFDFF;
  background-color: #2C2C34;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.header__search-submit:hover {
  background-color: #1a1a1f;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Large Desktop (1440px and below) */
@media (max-width: 1440px) {
  .header__menu {
    gap: 32px;
  }

  .header__dropdown-items {
    gap: 32px;
  }

  .header__mega-menu {
    width: 95vw;
  }

  .header__mega-menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  .header__container {
    gap: 32px;
  }

  .header__nav {
    display: none;
  }

  .header__mobile-toggle {
    display: flex;
  }

  .header__dropdown-line {
    display: none;
  }

  .header__mega-menu {
    display: none;
  }

  .header__actions {
    gap: 12px;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  /* Hide centered logo wrapper on homepage mobile */
  .site-header--home .header__logo-wrapper--desktop {
    display: none;
  }

  /* Show logo in container on homepage mobile */
  .site-header--home .header__logo--mobile-only {
    display: flex !important;
  }

  /* Reset homepage container to normal layout on mobile */
  .site-header--home .header__container {
    justify-content: space-between;
  }

  .header__container {
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Figma: Logo 82x44px on mobile */
  .header__logo-img {
    width: 82px;
    height: 44px;
  }

  .header__logo-text {
    display: none;
  }

  .header__actions {
    gap: 8px;
  }

  /* Hide action buttons on mobile - they are in mobile menu */
  .header__action-btn {
    display: none;
  }

  /* Hide language switcher on mobile */
  .header__language-switcher {
    display: none;
  }

  /* Search Popup Mobile */
  .header__search-popup {
    width: 375px;
    padding-top: 0;
  }

  .header__search-container {
    position: absolute;
    top: 100px;
    left: 20px;
    width: 324px;
    max-width: 324px;
    padding: 0;
  }

  .header__search-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background-color: transparent;
  }

  .header__search-close svg {
    width: 32px;
    height: 32px;
  }

  .header__search-form {
    gap: 0;
  }

  .header__search-input-wrapper {
    width: 100%;
  }

  .header__search-submit {
    display: none;
  }
}

/* Small Mobile (375px and below) */
@media (max-width: 375px) {
  .header__container {
    gap: 12px;
  }

  .header__logo-img {
    height: 36px;
  }

  .header__actions {
    gap: 4px;
  }

  .header__action-btn {
    width: 32px;
    height: 32px;
  }

  .header__action-btn svg {
    width: 16px;
    height: 16px;
  }

  .header__cart-count {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
  }
}


/* === layout/mobile-menu.css === */
/**
 * Mobile Menu Layout
 * BonEvents Theme
 */

/* ============================================
   MOBILE MENU OVERLAY
   ============================================ */

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-white);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: all var(--transition-base);
}

.mobile-menu--active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.mobile-menu__container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ============================================
   MOBILE MENU HEADER
   Figma: Same as main header - Logo left, X close right
   Padding: 16px, border-bottom: rgba(44,44,52,0.15)
   ============================================ */

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(44, 44, 52, 0.15);
  background-color: #FCFDFF;
}

/* Logo in mobile menu header */
.mobile-menu__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.mobile-menu__logo-img {
  width: 82px;
  height: 44px;
}

.mobile-menu__logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #2C2C34;
}

/* Close button - Figma: fa-thin fa-xmark 32px */
.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mobile-menu__close:hover {
  opacity: 0.7;
}

.mobile-menu__close i {
  font-size: 32px;
  color: #2C2C34;
}

/* ============================================
   MOBILE MENU CONTENT
   ============================================ */

.mobile-menu__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-lg);
}

/* Search - Figma: Underline style
   Border: 0.5px bottom, rgba(44,44,52,0.5)
   Icon: 50% opacity
   Text: 14px Outfit Light, 50% opacity
   ============================================ */
.mobile-menu__search {
  margin-bottom: 24px;
}

.mobile-menu__search-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 0.5px solid rgba(44, 44, 52, 0.5);
  line-height: 2;
}

.mobile-menu__search-icon {
  flex-shrink: 0;
  font-size: 14px;
  color: #2C2C34;
  opacity: 0.5;
  pointer-events: none;
}

.mobile-menu__search-input {
  flex: 1;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #2C2C34;
  opacity: 0.5;
}

.mobile-menu__search-input::placeholder {
  color: #2C2C34;
  opacity: 1;
}

.mobile-menu__search-input:focus {
  outline: none;
  opacity: 1;
}

/* Remove search input default styling */
.mobile-menu__search-input::-webkit-search-decoration,
.mobile-menu__search-input::-webkit-search-cancel-button,
.mobile-menu__search-input::-webkit-search-results-button,
.mobile-menu__search-input::-webkit-search-results-decoration {
  display: none;
}

/* ============================================
   SERVICE CARDS - Figma: Full-width with overlay
   Card specs: width 343px, padding 16px, gap 10px
   Background: image + rgba(0,0,0,0.46) overlay
   Title: Outfit Regular 20px, white (#fcfdff)
   Arrow: 48x48 circle, border 0.5px #2c2c34
   ============================================ */

.mobile-menu__services {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.mobile-menu__service-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  text-decoration: none;
  overflow: hidden;
  min-height: 80px;
}

.mobile-menu__service-card:hover {
  opacity: 0.9;
}

/* Background image and overlay */
.mobile-menu__service-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.mobile-menu__service-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-menu__service-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.46);
}

/* Title - Figma: Outfit Regular 20px, white, line-height 1.29 */
.mobile-menu__service-title {
  position: relative;
  z-index: 1;
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.29;
  color: #FCFDFF;
}

/* Arrow button - Figma: 48x48 circle, border 0.5px #2c2c34 */
.mobile-menu__service-arrow {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0.5px solid #fcfdff;
  border-radius: 50%;
  background-color: transparent;
}

.mobile-menu__service-arrow i {
  font-size: 15px;
  color: #fcfdff;
}

/* ============================================
   NAVIGATION LINKS - Figma: Outfit Regular 20px, #2c2c34
   Border separator between items
   Chevron-right icon for items with children
   ============================================ */

.mobile-menu__nav {
  margin-bottom: 24px;
}

.mobile-menu__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu__nav-item {
  border-bottom: 1px solid rgba(44, 44, 52, 0.15);
}

.mobile-menu__nav-item:first-child {
  border-top: 1px solid rgba(44, 44, 52, 0.15);
}

.mobile-menu__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.29;
  color: #2C2C34;
  text-decoration: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-align: left;
}

.mobile-menu__nav-link:hover {
  opacity: 0.7;
}

/* Chevron icon for items with children */
.mobile-menu__nav-chevron {
  font-size: 20px;
  color: #2C2C34;
  flex-shrink: 0;
}

/* ============================================
   SUBLEVEL PANEL - Figma: Slide-in panel
   Position below header, X button still visible to close all
   Back button with chevron-left + category name
   67x67 thumbnails + text for mega-menu items
   ============================================ */

.mobile-menu__sublevel {
  position: absolute;
  top: 77px; /* Below header (76px header height + 1px border) */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FCFDFF;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-menu__sublevel--active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Sublevel Header with Back Button */
.mobile-menu__sublevel-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(44, 44, 52, 0.15);
  background-color: #FCFDFF;
}

.mobile-menu__sublevel-back {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #2C2C34;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mobile-menu__sublevel-back:hover {
  opacity: 0.7;
}

.mobile-menu__sublevel-back i {
  font-size: 20px;
}

/* Sublevel List */
.mobile-menu__sublevel-list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu__sublevel-item {
  border-bottom: 1px solid rgba(44, 44, 52, 0.15);
}

.mobile-menu__sublevel-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #2C2C34;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.mobile-menu__sublevel-link:hover {
  opacity: 0.7;
}

/* Sublevel Thumbnails - Figma: 67x67px for mega-menu */
.mobile-menu__sublevel-thumb {
  width: 67px;
  height: 67px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Sublevel items with children - show chevron */
.mobile-menu__sublevel-item--has-children .mobile-menu__sublevel-link {
  justify-content: flex-start;
}

.mobile-menu__sublevel-chevron {
  margin-left: auto;
  font-size: 14px;
  opacity: 0.5;
}

/* Level 3 sublevel - nested inside level 2 */
.mobile-menu__sublevel--level3 {
  /* Same positioning as level 2 */
}

/* View All link in Level 3 */
.mobile-menu__sublevel-item--view-all .mobile-menu__sublevel-link {
  font-weight: 500;
  color: #2C2C34;
}

.mobile-menu__sublevel-item--view-all .mobile-menu__sublevel-link span {
  text-decoration: underline;
}

/* ============================================
   MOBILE MENU FOOTER - Figma: Icons only, FA Regular 24px, 50% opacity
   Layout: globe (left) | cart + user (right, 48px gap)
   ============================================ */

.mobile-menu__footer {
  padding: 16px;
  border-top: none;
  background-color: transparent;
}

.mobile-menu__footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Icon buttons - icons only, 50% opacity */
.mobile-menu__footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: transparent;
  border: none;
  color: #2C2C34;
  opacity: 0.5;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  position: relative;
}

.mobile-menu__footer-icon i {
  font-size: 24px;
}

.mobile-menu__footer-icon:hover {
  opacity: 1;
}

/* Language Switcher - Figma: expands on click */
.mobile-menu__lang {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mobile-menu__lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: transparent;
  border: none;
  color: #2C2C34;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mobile-menu__lang-toggle i {
  font-size: 24px;
}

/* Language options - hidden by default */
.mobile-menu__lang-options {
  display: none;
  align-items: center;
  gap: 24px;
}

.mobile-menu__lang-arrow {
  font-size: 24px;
  color: #2C2C34;
}

.mobile-menu__lang-option {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  color: #2C2C34;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.mobile-menu__lang-option--active {
  opacity: 1;
}

.mobile-menu__lang-option:hover {
  opacity: 1;
}

/* Language switcher active state */
.mobile-menu__lang--active .mobile-menu__lang-toggle {
  opacity: 1;
}

.mobile-menu__lang--active .mobile-menu__lang-options {
  display: flex;
}

/* Right side group - cart + user with 48px gap */
.mobile-menu__footer-right {
  display: flex;
  align-items: center;
  gap: 48px;
}

/* Cart badge */
.mobile-menu__footer-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  color: #FCFDFF;
  background-color: var(--color-secondary, #E91E63);
  border-radius: 50%;
}

/* ============================================
   SEARCH OVERLAY - Figma: Dark overlay when search active
   Background: #2C2C34, 17% opacity
   ============================================ */

.mobile-menu__search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(44, 44, 52, 0.17);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
}

.mobile-menu--search-active .mobile-menu__search-overlay {
  opacity: 1;
  visibility: visible;
}

/* Raise search above overlay when active */
.mobile-menu--search-active .mobile-menu__search {
  position: relative;
  z-index: 10;
}

/* ============================================
   RESPONSIVE
   ============================================ */

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


/* === layout/mobile-cart.css === */
/**
 * Mobile Cart Sidebar Layout
 * BonEvents Theme
 * Updated to match Figma design 88:13101 and 88:12933
 */

/* ============================================
   MOBILE CART OVERLAY
   ============================================ */

.mobile-cart {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FCFDFF;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all var(--transition-base);
}

.mobile-cart--active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.mobile-cart__container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ============================================
   MOBILE CART HEADER
   Figma: Same as mobile menu - logo + X icon
   ============================================ */

.mobile-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(44, 44, 52, 0.15);
  background-color: #FCFDFF;
  flex-shrink: 0;
}

.mobile-cart__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.mobile-cart__logo-img {
  width: 82px;
  height: 44px;
}

.mobile-cart__logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #2C2C34;
}

.mobile-cart__close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mobile-cart__close:hover {
  opacity: 0.7;
}

.mobile-cart__close i {
  font-size: 32px;
  color: #2C2C34;
}

/* ============================================
   CART CONTENT AREA
   Figma: padding 24px, gap 24px, scrollable
   ============================================ */

.mobile-cart__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  padding-bottom: 8px;
  background-color: #FCFDFF;
}

/* Cart Title - Figma: Outfit Regular 36px */
.mobile-cart__title {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.28;
  color: #2C2C34;
  margin: 0 0 24px 0;
}

.mobile-cart__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============================================
   PRODUCT CARD
   Figma: border 0.5px, padding 24px/16px, gap 16px
   ============================================ */

.mobile-cart__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
  border: 0.5px solid rgba(44, 44, 52, 0.15);
  background-color: #FCFDFF;
}

/* Delete Button - Figma: 48x48 circle, top-right 7.5px */
.mobile-cart__item-delete {
  position: absolute;
  top: 7.5px;
  right: 7.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #FCFDFF;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.mobile-cart__item-delete:hover {
  opacity: 0.7;
}

.mobile-cart__item-delete i {
  font-size: 24px;
  color: #2C2C34;
}

/* Product Image - Figma: 110x110px */
.mobile-cart__item-image {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  overflow: hidden;
  background-color: #F5F5F5;
}

.mobile-cart__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-cart__item-placeholder {
  width: 100%;
  height: 100%;
  background-color: #E0E0E0;
}

/* Product Info - Figma: gap 2px */
.mobile-cart__item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Title - Figma: Outfit Regular 20px, line-height 1.29 */
.mobile-cart__item-name {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.29;
  color: #2C2C34;
  margin: 0;
}

/* Price per day - Figma: Outfit Light 14px, line-height 2 */
.mobile-cart__item-price-day {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
  color: #2C2C34;
  margin: 0;
}

/* Bottom row: Price + Counter */
.mobile-cart__item-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

/* Price Block */
.mobile-cart__item-price-block {
  display: flex;
  flex-direction: column;
  line-height: 2;
}

/* Price Label - Figma: Outfit Light 12px, 50% opacity */
.mobile-cart__item-price-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 2;
  color: #2C2C34;
  opacity: 0.5;
  margin: 0;
}

/* Price Value - Figma: Outfit Regular 14px */
.mobile-cart__item-price-value {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: #2C2C34;
  margin: 0;
}

/* Quantity Counter - Figma: border 1px, height 40px, gap 16px, padding 16px 4px */
.mobile-cart__item-quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 40px;
  padding: 4px 16px;
  border: 1px solid rgba(44, 44, 52, 0.1);
  background-color: #FCFDFF;
}

.mobile-cart__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mobile-cart__qty-btn:hover {
  opacity: 1;
}

.mobile-cart__qty-btn i {
  font-size: 12px;
  color: #2C2C34;
  opacity: 0.5;
}

.mobile-cart__qty-value {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
  color: #2C2C34;
  min-width: 16px;
  text-align: right;
}

/* ============================================
   EMPTY CART STATE
   ============================================ */

.mobile-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 32px;
}

.mobile-cart__empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  margin-bottom: 16px;
}

.mobile-cart__empty-text {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #2C2C34;
  opacity: 0.7;
  margin: 0 0 16px 0;
}

.mobile-cart__empty-link {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2C2C34;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.mobile-cart__empty-link:hover {
  opacity: 0.7;
}

/* ============================================
   CART SUMMARY
   Figma: bg #F8F9FB, padding 24px/32px, gap 16px
   ============================================ */

.mobile-cart__summary {
  position: relative;
  background-color: #F8F9FB;
  padding: 32px 24px;
  flex-shrink: 0;
  z-index: 10;
}

/* Summary Header - Clickable toggle */
.mobile-cart__summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin-bottom: 16px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Summary Title - Figma: Outfit Regular 20px */
.mobile-cart__summary-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.29;
  color: #2C2C34;
}

.mobile-cart__summary-title-count {
  color: rgba(44, 44, 52, 0.5);
}

/* Toggle Button - Figma: 48x48 circle, white bg */
.mobile-cart__summary-toggle {
  position: absolute;
  top: 24px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #FCFDFF;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.mobile-cart__summary-toggle i {
  font-size: 24px;
  color: #2C2C34;
}

/* Rotate icon when expanded */
.mobile-cart__summary--expanded .mobile-cart__summary-toggle {
  transform: rotate(180deg);
}

/* Summary Details - Expandable */
.mobile-cart__summary-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-cart__summary--expanded .mobile-cart__summary-details {
  max-height: 500px;
}

/* Rental Period Block - Figma: bg rgba(44,44,52,0.03), padding 16px 8px */
.mobile-cart__rental-period {
  display: flex;
  align-items: flex-start;
  padding: 8px 16px;
  background-color: rgba(44, 44, 52, 0.03);
  margin-bottom: 32px;
}

.mobile-cart__rental-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mobile-cart__rental-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-cart__rental-label i {
  font-size: 12px;
  color: #2C2C34;
  opacity: 0.5;
}

.mobile-cart__rental-label span {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 2;
  color: #2C2C34;
  opacity: 0.5;
}

.mobile-cart__rental-dates {
  display: flex;
  justify-content: space-between;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: #2C2C34;
}

/* Details Block - Figma: border 0.5px, padding 24px/16px, gap 16px */
.mobile-cart__summary-fees {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
  border: 0.5px solid rgba(44, 44, 52, 0.15);
  margin-bottom: 16px;
}

.mobile-cart__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 2;
  color: #2C2C34;
}

.mobile-cart__summary-label {
  font-weight: 300;
  opacity: 0.5;
}

.mobile-cart__summary-value {
  font-weight: 400;
}

/* Total Block - Figma: bg rgba(44,44,52,0.03), padding 24px/16px */
.mobile-cart__summary-total-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px;
  background-color: rgba(44, 44, 52, 0.03);
  margin-bottom: 16px;
}

.mobile-cart__summary-subtotal {
  display: flex;
  justify-content: space-between;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: #2C2C34;
}

.mobile-cart__summary-subtotal .mobile-cart__summary-label {
  opacity: 0.5;
}

.mobile-cart__summary-divider {
  height: 0.5px;
  background-color: rgba(44, 44, 52, 0.15);
}

.mobile-cart__summary-total {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.mobile-cart__summary-total-label {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: #2C2C34;
  opacity: 0.5;
}

.mobile-cart__summary-total-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Total Price - Figma: Outfit Regular 24px */
.mobile-cart__summary-total-price {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.27;
  color: #2C2C34;
  text-align: right;
}

/* Deposit Note - Figma: 14px, 50% opacity */
.mobile-cart__summary-deposit-note {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  color: rgba(44, 44, 52, 0.5);
}

/* ============================================
   CHECKOUT BUTTON
   Figma: bg #2C2C34, padding 24px/4px, Outfit Regular 16px
   ============================================ */

.mobile-cart__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 24px;
  background-color: #2C2C34;
  color: #FCFDFF;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mobile-cart__checkout-btn:hover {
  opacity: 0.9;
  color: #FCFDFF;
}

/* ============================================
   RESPONSIVE - Hide on desktop
   ============================================ */

@media (min-width: 1025px) {
  .mobile-cart {
    display: none;
  }
}


/* === layout/footer.css === */
/**
 * Footer Layout - Figma Design
 * BonEvents Theme
 */

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    position: relative;
    background-color: var(--color-bg-secondary);
    padding: 64px 0;
    overflow: hidden;
}

.site-footer .container {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-lg);
    row-gap: 40px;
}

/* ============================================
   WATERMARK LOGO - FLEX ELEMENT
   ============================================ */

.footer__watermark {
    grid-column: 3;
    grid-row: 1 / 4;
    justify-self: end;
    width: auto;
    height: 264px;
    opacity: 1;
    pointer-events: none;
}

.footer__watermark-img {
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ============================================
   FOOTER CONTENT
   ============================================ */

.footer__content {
    display: contents;
}

.footer__brand {
    grid-column: 1;
    grid-row: 1;
    width: 398px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.footer__brand-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__brand-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.27;
}

.footer__description {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    line-height: var(--line-height-loose);
    margin: 0;
    max-width: 324px;
}

.footer__social {
    display: flex;
    gap: var(--space-md);
}

.footer__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0.5px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all var(--transition-base);
    opacity: 0.5;
}

.footer__social-btn:hover {
    opacity: 1;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.05);
}

.footer__social-btn i {
    font-size: 15px;
}

/* ============================================
   FOOTER NAVIGATION
   ============================================ */

.footer__nav {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: 128px;
}

.footer__column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer__column-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-loose);
}

.footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer__menu-link {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    text-decoration: none;
    line-height: var(--line-height-loose);
    transition: color var(--transition-base);
}

.footer__menu-link:hover {
    color: var(--color-text-primary);
}

/* ============================================
   FOOTER CONTACT
   ============================================ */

.footer__contact {
    grid-column: 1 / 3;
    grid-row: 2;
    display: flex;
    gap: var(--space-2xl);
}

.footer__contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

.footer__contact-icon {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

.footer__contact-link,
.footer__contact-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    text-decoration: none;
    line-height: var(--line-height-loose);
    transition: color var(--transition-base);
}

.footer__contact-link:hover {
    color: var(--color-text-primary);
}

/* ============================================
   FOOTER COPYRIGHT
   ============================================ */

.footer__copyright {
    grid-column: 1 / 3;
    grid-row: 3;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    line-height: var(--line-height-loose);
    max-width: 324px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1440px) {
    .site-footer .container {
        padding: 0 48px;
    }
}

@media (max-width: 1024px) {
    .site-footer .container {
        padding: 0 48px;
        display: flex;
        flex-direction: column;
    }

    .footer__content {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        margin-bottom: var(--space-xl);
    }

    .footer__brand {
        width: 100%;
    }

    .footer__nav {
        gap: var(--space-md);
    }

    .footer__watermark {
        order: -1;
        max-width: 202.705px;
        max-height: 108px;
        margin-bottom: var(--space-lg);
    }

    .footer__contact {
        flex-direction: column;
        gap: var(--space-md);
    }
}

@media (max-width: 768px) {
    .site-footer .container {
        padding: 0 24px;
    }

    .footer__nav {
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .footer__social {
        flex-wrap: wrap;
    }
}

@media (max-width: 375px) {
    .site-footer .container {
        padding: 0 16px;
    }
}


/* === layout/sections.css === */
/**
 * Page Sections Styles
 * BonEvents Theme
 */

/* ============================================
   General Section Styles
   ============================================ */

.section {
    padding: var(--space-4xl) 0;
    position: relative;
}

@media (max-width: 768px) {
    .section {
        padding: var(--space-3xl) 0;
    }
}

.section--gray {
    background-color: var(--color-gray-50);
}

.section--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.section__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.section__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.8)
    );
}

.section .container {
    position: relative;
    z-index: 1;
}

.section__header {
    margin-bottom: var(--space-3xl);
}

.section__header--center {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-3xl);
}

.section__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
    line-height: var(--line-height-tight);
}

.section__title--light {
    color: var(--color-white);
}

.section__subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

.section__footer {
    margin-top: var(--space-3xl);
    text-align: center;
}

@media (max-width: 768px) {
    .section__title {
        font-size: var(--font-size-3xl);
    }

    .section__subtitle {
        font-size: var(--font-size-lg);
    }
}

/* ============================================
   Hero Section - Figma Design
   ============================================ */

.hero {
    position: relative;
    min-height: 580px;
    display: flex;
    align-items: center;
    padding: 130px 0;
    overflow: hidden;
    background-color: var(--color-primary);
}

.hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.hero__video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.hero__background-video--uploaded {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__background-video--youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Cover container maintaining 16:9: take whichever is larger */
    width: max(100%, calc(100vh * 16 / 9));
    height: max(100%, calc(100vw * 9 / 16));
    pointer-events: none;
    border: 0;
}

.hero .container {
    position: relative;
    z-index: 1;
    max-width: 1664px;
    margin: 0 auto;
    padding: 0 128px;
}

.hero__content {
    max-width: 901px;
    color: var(--color-white);
}

.hero__decorative {
    font-family: var(--font-decorative);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-decorative);
    color: var(--color-white);
    margin: 0 0 var(--space-md) 0;
}

.hero__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-7xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-white);
    margin: 0 0 var(--space-lg) 0;
    line-height: var(--line-height-promo);
}

.hero__description {
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-light);
    color: var(--color-white);
    margin: 0 0 var(--space-lg) 0;
    line-height: var(--line-height-loose);
    max-width: 513px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-loose);
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
}

.hero__btn--primary {
    background-color: var(--color-white);
    color: var(--color-primary);
}

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

.hero__btn--secondary {
    background-color: transparent;
    color: var(--color-white);
    padding: 4px 0;
}

@media (max-width: 1440px) {
    .hero .container {
        padding: 0 96px;
    }

    .hero__title {
        font-size: 80px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 500px;
        padding: 120px 0;
    }

    .hero__background-image {
        object-position: right center;
    }

    .hero .container {
        padding: 0 24px;
    }

    .hero__content {
        max-width: 100%;
        text-align: center;
    }

    .hero__decorative {
        font-size: var(--font-size-4xl);
    }

    .hero__title {
        font-size: var(--font-size-5xl);
    }

    .hero__description {
        font-size: var(--font-size-base);
        max-width: 100%;
    }

    .hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .hero__btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 375px) {
    .hero .container {
        padding: 0 16px;
    }

    .hero__decorative {
        font-size: 32px;
    }

    .hero__title {
        font-size: 48px;
    }
}

/* ============================================
   Services Section - Figma Design
   ============================================ */

.section--services {
    padding: 80px 0;
}

.section--services .container {
    max-width: 1664px;
    margin: 0 auto;
    padding: 0 128px;
}

.services__header {
    margin-bottom: var(--space-2xl);
}

.services__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
    line-height: var(--line-height-tight);
}

.services__subtitle {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-loose);
}

.services__grid {
    display: flex;
    gap: var(--space-lg);
    align-items: stretch;
}

@media (max-width: 1440px) {
    .section--services .container {
        padding: 0 96px;
    }
    .services__grid {
        gap: 10px;
    }
}

@media (max-width: 1024px) {
    .section--services .container {
        padding: 0 24px;
    }

    .services__grid {
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .services__title {
        font-size: var(--font-size-3xl);
    }
}

@media (max-width: 375px) {
    .section--services .container {
        padding: 0 16px;
    }
}

/* ============================================
   Product Categories
   ============================================ */

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.category-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: all var(--transition-base);
}

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

.category-card__image-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--color-gray-100);
}

.category-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.category-card:hover .category-card__image {
    transform: scale(1.05);
}

.category-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}

.category-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl);
    color: var(--color-white);
}

.category-card__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-xs) 0;
}

.category-card__count {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
}

.category-card__arrow {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 32px;
    height: 32px;
    background-color: var(--color-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-10px);
    transition: all var(--transition-base);
}

.category-card:hover .category-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

.category-card__arrow svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ============================================
   Features/Why Choose Section - Figma Design
   ============================================ */

.section--features {
    padding: 80px 0;
}

.section--features .container {
    max-width: 1664px;
    margin: 0 auto;
    padding: 0 128px;
}

.features__layout {
    display: flex;
    align-items: flex-start;
    margin-bottom: 108px;
}

.features__spacer {
    flex: 1;
}

.features__text-block {
    width: 398px;
    flex-shrink: 0;
}

.features__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
    line-height: var(--line-height-tight);
}

.features__subtitle {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2xl) 0;
    line-height: var(--line-height-loose);
}

.features__description {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-loose);
    max-width: 324px;
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3xl);
    margin-left: 141px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.feature-item__icon {
    font-size: 32px;
    color: var(--color-text-primary);
    line-height: 1;
}

.feature-item__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
}

.feature-item__description {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-loose);
}

@media (max-width: 1440px) {
    .section--features .container {
        padding: 0 96px;
    }

    .features__grid {
        margin-left: 80px;
    }
}

@media (max-width: 1024px) {
    .features__layout {
        flex-direction: column;
        margin-bottom: var(--space-3xl);
    }

    .features__text-block {
        width: 100%;
        margin-bottom: var(--space-2xl);
    }

    .features__description {
        max-width: 100%;
    }

    .features__grid {
        grid-template-columns: repeat(2, 1fr);
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .section--features .container {
        padding: 0 24px;
    }

    .features__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .features__title {
        font-size: var(--font-size-3xl);
    }
}

@media (max-width: 375px) {
    .section--features .container {
        padding: 0 16px;
    }
}

/* ============================================
   Image Separator Section - Figma Design
   ============================================ */

.image-separator {
    width: 100%;
    height: 380px;
    overflow: hidden;
}

.image-separator__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .image-separator {
        height: 250px;
    }
}

@media (max-width: 375px) {
    .image-separator {
        height: 200px;
    }
}

/* ============================================
   Partners Section - Figma Design
   ============================================ */

.section--partners {
    padding: 80px 0;
    text-align: center;
}

.section--partners .container {
    max-width: 1664px;
    margin: 0 auto;
    padding: 0 128px;
}

.partners__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3xl) 0;
    line-height: var(--line-height-tight);
}

/* Default Grid Layout (for 6 or fewer partners) */
.partners__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 61px;
    flex-wrap: wrap;
}

.partner-logo {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo__img {
    max-height: 100%;
    max-width: 160px;
    height: auto;
    width: auto;
    filter: grayscale(100%) opacity(0.7);
    transition: all var(--transition-base);
}

.partner-logo:hover .partner-logo__img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

.partner-logo__placeholder {
    width: 150px;
    height: 60px;
    background-color: var(--color-gray-200);
    border-radius: var(--radius-sm);
}

/* Partners Slider - Active when >6 partners */
.partners__grid.swiper {
    display: block;
    overflow: hidden;
    position: relative;
}

.partners__grid.swiper .swiper-wrapper {
    display: flex;
    align-items: center;
}

.partners__grid.swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1440px) {
    .section--partners .container {
        padding: 0 96px;
    }
}


@media (max-width: 768px) {
    .section--partners .container {
        padding: 0 24px;
    }

    .partners__grid {
        gap: var(--space-xl);
    }

    .partners__title {
        font-size: var(--font-size-3xl);
    }
}

@media (max-width: 375px) {
    .section--partners .container {
        padding: 0 16px;
    }

    .partners__grid {
        gap: var(--space-lg);
    }

    .partner-logo__img {
        max-width: 120px;
    }
}

/* ============================================
   Stats Grid
   ============================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3xl);
}

.stat-item {
    text-align: center;
}

.stat-item__number {
    font-family: var(--font-heading);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1;
}

.section--primary .stat-item__number {
    color: var(--color-white);
}

.stat-item__label {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .stat-item__number {
        font-size: var(--font-size-4xl);
    }
}

/* ============================================
   Testimonials Grid
   ============================================ */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
}

.testimonial-card {
    background-color: var(--color-white);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
}

.testimonial-card__rating {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.testimonial-card__star {
    width: 20px;
    height: 20px;
    color: var(--color-gray-300);
}

.testimonial-card__star--filled {
    color: var(--color-accent);
}

.testimonial-card__quote-icon {
    width: 48px;
    height: 48px;
    color: var(--color-secondary);
    opacity: 0.2;
    margin-bottom: var(--space-md);
}

.testimonial-card__quote-icon svg {
    width: 100%;
    height: 100%;
}

.testimonial-card__content {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--space-xl) 0;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}

.testimonial-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-card__author-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.testimonial-card__author-role {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

@media (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ============================================
   CTA Section - Figma Design
   ============================================ */

.section--cta {
    padding: 80px 0;
}

.section--cta .container {
    max-width: 1664px;
    margin: 0 auto;
    padding: 0 128px;
}

.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xl);
    text-align: center;
}

.cta-content__logo {
    width: 225px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-content__logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.cta-content__logo-placeholder {
    font-family: var(--font-heading);
    font-size: 72px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.cta-content__text {
    max-width: 100%;
}

.cta-content__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
    line-height: var(--line-height-tight);
}

.cta-content__description {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-loose);
}

.cta-content__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.cta-content__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-loose);
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
}

.cta-content__btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

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

.cta-content__btn--whatsapp {
    background-color: #34b82d;
    color: #fcfdff;
    gap: 16px;
}

.cta-content__btn--whatsapp:hover {
    background-color: #2da027;
}

.cta-content__btn--whatsapp i {
    font-size: 16px;
}

.cta-content__btn--secondary {
    background-color: transparent;
    color: var(--color-primary);
    padding: 4px 0;
}

.cta-content__btn--secondary:hover {
    opacity: 0.7;
}

@media (max-width: 1440px) {
    .section--cta .container {
        padding: 0 96px;
    }
}

@media (max-width: 768px) {
    .section--cta .container {
        padding: 0 24px;
    }

    .cta-content__title {
        font-size: var(--font-size-3xl);
    }

    .cta-content__actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-content__btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 375px) {
    .section--cta .container {
        padding: 0 16px;
    }

    .cta-content__logo {
        width: 150px;
        height: 80px;
    }

    .cta-content__logo-placeholder {
        font-size: 48px;
    }
}


/* === sections/interactive-product-placement.css === */
/**
 * Interactive Product Placement Section
 * BonEvents Theme
 * Added from Figma 2025-12-26 - PHASE 3.3
 */

/* ============================================
   Section Container
   ============================================ */

.interactive-product-placement {
    margin: var(--space-3xl) 0;
}

.interactive-product-placement__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--space-4xl) 0;
}

/* ============================================
   Slider Container
   ============================================ */

.interactive-product-placement__slider {
    position: relative;
    width: 100%;
}

.ipp-slider__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ipp-slider__slide {
    display: none;
    position: relative;
    width: 100%;
}

.ipp-slider__slide.active {
    display: block;
}

.ipp-slider__image-wrapper {
    position: relative;
    width: 100%;
    height: 450px;
    background-color: var(--color-gray-100);
    overflow: hidden;
}

.ipp-slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================
   Hotspots
   ============================================ */

.ipp-hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ipp-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background-color: var(--color-white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: all;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ipp-hotspot:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    background-color: var(--color-white);
}

.ipp-hotspot__icon {
    font-size: 24px;
    font-weight: 300;
    color: var(--color-text-primary);
    line-height: 1;
    transition: transform 0.3s ease;
}

.ipp-hotspot:hover .ipp-hotspot__icon {
    transform: rotate(90deg);
}

/* Hide pulse animation - not in Figma design */
.ipp-hotspot__pulse {
    display: none;
}

/* ============================================
   Slider Navigation
   ============================================ */

.ipp-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--color-text-primary);
}

.ipp-slider__nav:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.ipp-slider__nav--prev {
    left: var(--space-2xl);
}

.ipp-slider__nav--next {
    right: var(--space-2xl);
}

.ipp-slider__nav i {
    font-size: 20px;
}

/* Slider Dots - hidden in Figma design */
.ipp-slider__dots {
    display: none;
}

/* ============================================
   Product Card Popup
   ============================================ */

.ipp-product-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: none;
    width: 100%;
    max-width: 255px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ipp-product-card.active {
    display: block;
    opacity: 1;
    pointer-events: all;
}

.ipp-product-card__content {
    background-color: var(--color-white);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: cardSlideIn 0.3s ease-out;
    position: relative;
}

/* Loading state with spinner - Added 2025-02-08
   Shows spinning loader while product data is being fetched via AJAX
   Same style as cart-sidebar loader for consistency */
.ipp-product-card--loading {
    position: relative;
    pointer-events: none;
    min-height: 300px;
}

/* Semi-transparent overlay */
.ipp-product-card--loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    border-radius: var(--radius-lg);
}

/* Spinner centered on overlay */
.ipp-product-card--loading::after {
    content: '';
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border: 4px solid #E5E5E5;
    border-top-color: #1A1A1A;
    border-radius: 50%;
    animation: ippSpin 0.8s linear infinite;
    z-index: 11;
}

@keyframes ippSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes cardSlideIn {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.ipp-product-card__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 101;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ipp-product-card__close:hover {
    background-color: var(--color-white);
    transform: rotate(90deg);
}

.ipp-product-card__close i {
    font-size: 14px;
    color: var(--color-text-primary);
}

.ipp-product-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    background-color: var(--color-gray-100);
    overflow: hidden;
}

.ipp-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ipp-product-card__info {
    padding: var(--space-xl);
}

/* Title: matches product-card-v2 - Outfit Regular 400, 20px, line-height 1.29 */
.ipp-product-card__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.29;
    color: #2c2c34;
    margin: 0 0 2px 0;
}

/* Price: matches product-card-v2 - Outfit Light 300, 14px, line-height 2 */
.ipp-product-card__price {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    margin: 0;
}

/* Availability: matches product-card-v2 - Outfit Light 300, 14px, opacity 0.8 */
.ipp-product-card__availability {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0 0 var(--space-md) 0;
}

.ipp-product-card__actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* Add to cart: matches product-card-v2 styling */
.ipp-product-card__add-to-cart {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    background: #2c2c34;
    color: #fcfdff;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    cursor: pointer;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.ipp-product-card__add-to-cart:hover {
    background: #1a1a20;
}

.ipp-product-card__add-to-cart:disabled {
    background: rgba(44, 44, 52, 0.05);
    color: rgba(44, 44, 52, 0.5);
    cursor: not-allowed;
}

/* Wishlist: matches product-card-v2 - 48x48 circle with white background */
.ipp-product-card__wishlist {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfdff;
    border: none;
    border-radius: 222px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.ipp-product-card__wishlist:hover {
    transform: scale(1.1);
}

.ipp-product-card__wishlist i {
    font-size: 24px;
    color: #2c2c34;
    transition: color 0.3s ease;
}

.ipp-product-card__wishlist:hover i {
    color: #b82d2d;
}

/* Wishlist active state (product is in wishlist) */
.ipp-product-card__wishlist.active i {
    color: #b82d2d;
}

.ipp-product-card__wishlist.active:hover i {
    color: #2c2c34;
}

/* ============================================
   Responsive Styles
   ============================================ */

@media (max-width: 1024px) {
    .ipp-slider__image-wrapper {
        height: 400px;
    }

    .ipp-slider__nav {
        width: 56px;
        height: 56px;
    }

    .ipp-slider__nav--prev {
        left: var(--space-lg);
    }

    .ipp-slider__nav--next {
        right: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .interactive-product-placement {
        margin: 0 0 24px 0;
        padding: 0;
    }

    .interactive-product-placement__title {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--space-3xl);
    }

    .ipp-slider__image-wrapper {
        height: 500px;
        border-radius: 0;
    }

    .ipp-hotspot {
        width: 48px;
        height: 48px;
    }

    .ipp-hotspot__icon {
        font-size: 20px;
    }

    /* Move navigation to bottom on mobile */
    .ipp-slider__nav {
        width: 48px;
        height: 48px;
        top: auto;
        bottom: var(--space-xl);
        transform: none;
    }

    .ipp-slider__nav--prev {
        left: 50%;
        transform: translateX(-60px);
    }

    .ipp-slider__nav--next {
        right: auto;
        left: 50%;
        transform: translateX(12px);
    }

    /* Fix: Preserve translateX positioning on hover/active states */
    .ipp-slider__nav--prev:hover,
    .ipp-slider__nav--prev:active {
        transform: translateX(-60px) scale(1.1);
    }

    .ipp-slider__nav--next:hover,
    .ipp-slider__nav--next:active {
        transform: translateX(12px) scale(1.1);
    }

    .ipp-slider__nav i {
        font-size: 18px;
    }

    .ipp-product-card__image-wrapper {
        height: 200px;
    }

    .ipp-product-card__info {
        padding: var(--space-lg);
    }

    .ipp-product-card__title {
        font-size: var(--font-size-base);
    }

    .ipp-product-card__price {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 375px) {
    .ipp-slider__image-wrapper {
        height: 450px;
    }

    .ipp-hotspot {
        width: 44px;
        height: 44px;
    }

    .ipp-hotspot__icon {
        font-size: 18px;
    }

    .ipp-product-card__info {
        padding: var(--space-md);
    }
}


/* === pages/text-page.css === */
/**
 * Text Pages Styling (Privacy Policy, Terms, Cookie Policy, etc.)
 * BonEvents Theme - Created from Figma 2025-12-26
 *
 * Clean, readable typography for long-form content pages
 * ISOLATED UNDER .text-page CLASS TO AVOID CONFLICTS
 */

/* ============================================
   PAGE WRAPPER
   ============================================ */

.text-page.page {
  padding: var(--space-4xl) 0;
}

.text-page .container {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.text-page .page-header {
  margin-bottom: var(--space-3xl);
  text-align: left;
}

.text-page .page-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin: 0;
}

/* ============================================
   PAGE CONTENT - TYPOGRAPHY
   ============================================ */

.text-page .page-content {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: var(--color-text-primary);
}

/* Headings */
.text-page .page-content h1,
.text-page .page-content h2,
.text-page .page-content h3,
.text-page .page-content h4 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-lg);
  line-height: var(--line-height-tight);
}

.text-page .page-content h1 {
  font-size: var(--font-size-3xl);
}

.text-page .page-content h2 {
  font-size: var(--font-size-2xl);
}

.text-page .page-content h3 {
  font-size: var(--font-size-xl);
}

.text-page .page-content h4 {
  font-size: var(--font-size-lg);
}

/* First heading has no top margin */
.text-page .page-content > h1:first-child,
.text-page .page-content > h2:first-child,
.text-page .page-content > h3:first-child {
  margin-top: 0;
}

/* Paragraphs */
.text-page .page-content p {
  margin-bottom: var(--space-lg);
  color: var(--color-text-primary);
}

.text-page .page-content p:last-child {
  margin-bottom: 0;
}

/* Links */
.text-page .page-content a {
  color: var(--color-secondary);
  text-decoration: underline;
  transition: color var(--transition-base);
}

.text-page .page-content a:hover {
  color: var(--color-primary);
}

/* ============================================
   LISTS
   ============================================ */

/* Ordered Lists (Numbered) */
.text-page .page-content ol {
  margin: var(--space-lg) 0;
  padding-left: var(--space-3xl);
  counter-reset: item;
  list-style: none;
}

.text-page .page-content ol > li {
  margin-bottom: var(--space-md);
  position: relative;
  counter-increment: item;
}

.text-page .page-content ol > li::before {
  content: counter(item) ".0";
  position: absolute;
  left: calc(-1 * var(--space-3xl));
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  width: var(--space-2xl);
  text-align: left;
}

/* Nested ordered lists (1.1, 1.2, etc.) */
.text-page .page-content ol ol {
  margin-top: var(--space-md);
  counter-reset: subitem;
}

.text-page .page-content ol ol > li {
  counter-increment: subitem;
}

.text-page .page-content ol ol > li::before {
  content: counter(item) "." counter(subitem);
}

/* Third level nested lists (1.1.1, 1.1.2, etc.) */
.text-page .page-content ol ol ol {
  counter-reset: subsubitem;
}

.text-page .page-content ol ol ol > li {
  counter-increment: subsubitem;
}

.text-page .page-content ol ol ol > li::before {
  content: counter(item) "." counter(subitem) "." counter(subsubitem);
}

/* Unordered Lists (Bullets) */
.text-page .page-content ul {
  margin: var(--space-lg) 0;
  padding-left: var(--space-3xl);
  list-style: none;
}

.text-page .page-content ul > li {
  margin-bottom: var(--space-md);
  position: relative;
}

.text-page .page-content ul > li::before {
  content: '•';
  position: absolute;
  left: calc(-1 * var(--space-lg));
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Nested unordered lists (hollow circle) */
.text-page .page-content ul ul > li::before {
  content: '○';
  font-weight: var(--font-weight-normal);
}

/* ============================================
   OTHER ELEMENTS
   ============================================ */

/* Blockquotes */
.text-page .page-content blockquote {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg) var(--space-xl);
  border-left: 4px solid var(--color-secondary);
  background-color: var(--color-bg-secondary);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Code */
.text-page .page-content code {
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.text-page .page-content pre {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.text-page .page-content pre code {
  padding: 0;
  background: none;
}

/* Tables */
.text-page .page-content table {
  width: 100%;
  margin: var(--space-2xl) 0;
  border-collapse: collapse;
}

.text-page .page-content table th,
.text-page .page-content table td {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.text-page .page-content table th {
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-bg-secondary);
}

/* Horizontal Rule */
.text-page .page-content hr {
  margin: var(--space-3xl) 0;
  border: none;
  border-top: 1px solid var(--color-border-light);
}

/* Images */
.text-page .page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-2xl) 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .text-page.page {
    padding: var(--space-3xl) 0;
  }

  .text-page .page-title {
    font-size: var(--font-size-3xl);
  }

  .text-page .page-content h1 {
    font-size: var(--font-size-2xl);
  }

  .text-page .page-content h2 {
    font-size: var(--font-size-xl);
  }

  .text-page .page-content h3 {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 768px) {
  .text-page.page {
    padding: var(--space-2xl) 0;
  }

  .text-page .container {
    padding: 0 var(--space-md);
  }

  .text-page .page-header {
    margin-bottom: var(--space-2xl);
  }

  .text-page .page-title {
    font-size: var(--font-size-2xl);
  }

  .text-page .page-content {
    font-size: var(--font-size-sm);
  }

  .text-page .page-content h1,
  .text-page .page-content h2,
  .text-page .page-content h3 {
    margin-top: var(--space-2xl);
  }

  /* Adjust list padding for mobile */
  .text-page .page-content ol,
  .text-page .page-content ul {
    padding-left: var(--space-xl);
  }

  .text-page .page-content ol > li::before {
    left: calc(-1 * var(--space-xl));
  }
}

@media (max-width: 375px) {
  .text-page .page-title {
    font-size: var(--font-size-xl);
  }

  .text-page .page-content h1 {
    font-size: var(--font-size-lg);
  }

  .text-page .page-content h2 {
    font-size: var(--font-size-md);
  }
}


/* === pages/search.css === */
/**
 * Search Results Page
 * Design: Figma 109:6488 (Desktop 1440px) / 109:6714 (Mobile 375px)
 * ALL VALUES ARE EXACT FROM FIGMA - DO NOT APPROXIMATE!
 */

/* ================================================
   BASE CONTAINER
   ================================================ */

.search-results {
  background-color: #fcfdff;
  min-height: 100vh;
  padding: 0;
}

.search-results__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 154px 48px 48px 48px; /* top offset for navigation */
  display: flex;
  gap: 32px; /* Exact from Figma */
}

/* Filter v2 integration - desktop layout */
.search-results__container > .filter-v2-sidebar {
  width: 308px;
  flex-shrink: 0;
}

/* Hide mobile buttons and panels from filter-v2 - search handles its own mobile layout */
.search-results__container > .filter-v2-mobile-buttons,
.search-results__container > .filter-v2-overlay,
.search-results__container > .filter-v2-panel {
  position: fixed; /* Ensure panels are positioned correctly */
}

/* ================================================
   SIDEBAR (Left Column) - Width: 308px
   ================================================ */

.search-results__sidebar {
  width: 308px; /* Exact from Figma */
  flex-shrink: 0;
  padding-right: 32px;
  padding-bottom: 32px;
  border-right: 1px solid rgba(243, 243, 243, 0); /* Transparent border from Figma */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-results__close {
  display: none; /* Only visible on mobile */
}

.search-results__filter-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

/* ================================================
   SECTION TITLES - Font: Outfit Regular 24px, line-height: 1.27
   ================================================ */

.search-results__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-results__section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 24px; /* Exact from Figma */
  line-height: 1.27; /* Exact from Figma */
  color: #2c2c34;
  margin: 0;
}

/* ================================================
   ACCORDION - Height: 36px, Font: Outfit Light 14px
   ================================================ */

.search-results__accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 36px; /* Exact from Figma */
  padding: 4px 0; /* Exact from Figma */
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-weight: 300; /* Light */
  font-size: 14px; /* Exact from Figma */
  line-height: 2; /* Exact from Figma */
  color: #2c2c34;
  text-align: left;
  transition: opacity 0.2s ease;
}

.search-results__accordion:hover {
  opacity: 0.7;
}

.search-results__accordion-title {
  flex: 1;
}

.search-results__accordion i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.search-results__accordion.active i {
  transform: rotate(180deg);
}

/* ================================================
   SUBCATEGORIES - Padding-left: 16px, Gap: 8px
   ================================================ */

.search-results__subcategories {
  display: none;
  flex-direction: column;
  gap: 8px; /* Exact from Figma */
  padding-left: 16px; /* Exact from Figma */
  margin-top: 8px;
}

.search-results__subcategories.active {
  display: flex;
}

.search-results__subcategory {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 2;
  color: #2c2c34;
  text-decoration: none;
  opacity: 0.5; /* Inactive state */
  transition: opacity 0.2s ease;
}

.search-results__subcategory:hover,
.search-results__subcategory.active {
  opacity: 1; /* Active/hover state */
}

/* ================================================
   COLOR RADIO BUTTONS - Size: 14px, Border-radius: 22px
   ================================================ */

.search-results__filter-options {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
  margin-top: 8px;
}

.search-results__filter-options.active {
  display: flex;
}

.search-results__radio {
  display: flex;
  align-items: center;
  gap: 8px; /* Exact from Figma */
  cursor: pointer;
}

.search-results__radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.search-results__radio-box {
  width: 14px; /* Exact from Figma */
  height: 14px;
  border: 1px solid #2c2c34;
  border-radius: 22px; /* Exact from Figma - makes it circular */
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.search-results__radio-input:checked + .search-results__radio-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; /* Exact from Figma - inner dot */
  height: 8px;
  border-radius: 50%;
  background-color: #2c2c34;
}

.search-results__radio-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 2;
  color: #2c2c34;
}

.search-results__radio:not(:has(.search-results__radio-input:checked)) .search-results__radio-label {
  opacity: 0.5;
}

/* ================================================
   SHOW MORE BUTTON - Gap: 16px, Padding: 4px 0
   ================================================ */

.search-results__show-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* Exact from Figma */
  padding: 4px 0; /* Exact from Figma */
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 16px; /* Exact from Figma */
  line-height: 2; /* Exact from Figma */
  color: #2c2c34;
  transition: opacity 0.2s ease;
}

.search-results__show-more:hover {
  opacity: 0.7;
}

/* ================================================
   ACTION BUTTONS - Gap: 24px, Padding: 4px 24px
   ================================================ */

.search-results__actions {
  display: flex;
  gap: 24px; /* Exact from Figma */
  margin-top: auto;
}

.search-results__btn {
  flex: 1;
  padding: 4px 24px; /* Exact from Figma */
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 16px; /* Exact from Figma */
  line-height: 2; /* Exact from Figma */
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-results__btn--apply {
  background-color: #2c2c34; /* Exact from Figma */
  color: #fcfdff; /* Exact from Figma */
}

.search-results__btn--apply:hover {
  opacity: 0.9;
}

.search-results__btn--clear {
  background-color: transparent;
  color: #2c2c34;
}

.search-results__btn--clear:hover {
  opacity: 0.7;
}

/* ================================================
   CONTENT AREA (Right Column) - Flex: 1
   ================================================ */

.search-results__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ================================================
   HEADER - Height: 80px, Font: Outfit Regular 36px
   ================================================ */

.search-results__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 80px; /* From Figma */
}

.search-results__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 36px; /* Exact from Figma */
  line-height: 1.28; /* Exact from Figma */
  color: #2c2c34;
  margin: 0;
}

.search-results__count {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 14px; /* Exact from Figma */
  line-height: 2; /* Exact from Figma */
  color: #2c2c34;
  opacity: 0.8; /* Exact from Figma */
  margin: 0;
}

/* ================================================
   MOBILE CONTROLS - Hidden on desktop
   ================================================ */

.search-results__mobile-controls {
  display: none; /* Hidden on desktop */
}

/* ================================================
   PRODUCTS GRID - 3 columns, Gap: 16px
   ================================================ */

.search-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 16px; /* Exact from Figma */
  width: 100%;
}

/* ================================================
   PRODUCT CARD - Padding: 24px, Gap: 11px
   ================================================ */

.product-card {
  padding: 24px; /* Exact from Figma */
  position: relative;
  background: transparent;
}

.product-card__link {
  display: flex;
  flex-direction: column;
  gap: 11px; /* Exact from Figma */
  text-decoration: none;
  color: inherit;
}

/* Product Image - Aspect-ratio: 1:1 */
.product-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Square from Figma */
  overflow: hidden;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

/* Status Badge - Top: 16px, Right: -16px */
.product-card__badge {
  position: absolute;
  top: 16px; /* Exact from Figma */
  right: -16px; /* Exact from Figma - extends outside card */
  background-color: #34b82d; /* Exact green from Figma */
  color: #ffffff;
  padding: 4px 16px; /* Exact from Figma */
  border-radius: 222px; /* Exact from Figma - fully rounded */
  box-shadow: 0px 13px 7.6px -9px rgba(5, 72, 2, 0.25); /* Exact shadow from Figma */
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 16px; /* Exact from Figma */
  line-height: 2; /* Exact from Figma */
  white-space: nowrap;
}

/* Product Content - Gap: 2px */
.product-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Exact from Figma */
}

.product-card__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 20px; /* Exact from Figma */
  line-height: 1.29; /* Exact from Figma */
  color: #2c2c34;
  margin: 0;
}

.product-card__price {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 14px; /* Exact from Figma */
  line-height: 2; /* Exact from Figma */
  color: #2c2c34;
  margin: 0;
}

.product-card__availability {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 14px; /* Exact from Figma */
  line-height: 2; /* Exact from Figma */
  color: #2c2c34;
  opacity: 0.8; /* Exact from Figma */
  margin: 0;
}

/* ================================================
   PAGINATION
   ================================================ */

.search-results__pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ================================================
   NO RESULTS
   ================================================ */

.search-results__no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}

.search-results__no-results-icon {
  font-size: 64px;
  color: #2c2c34;
  opacity: 0.3;
  margin-bottom: 24px;
}

.search-results__no-results-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #2c2c34;
  margin: 0 0 16px 0;
}

.search-results__no-results-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: #2c2c34;
  opacity: 0.7;
  margin: 0 0 32px 0;
  max-width: 400px;
}

/* ================================================
   OVERLAY (Mobile only)
   ================================================ */

.search-results__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.search-results__overlay.active {
  display: block;
}

/* ================================================
   MOBILE STYLES (375px) - Top: 108px
   ================================================ */

@media (max-width: 767px) {
  .search-results {
    padding: 0;
  }

  .search-results__container {
    flex-direction: column;
    padding: 108px 16px 16px 16px; /* Top: 108px from Figma, sides: 16px */
    gap: 32px;
  }

  /* Hide desktop sidebar on mobile */
  .search-results__container > .filter-v2-sidebar {
    display: none;
  }

  /* Show mobile buttons on search page */
  .search-results__container > .filter-v2-mobile-buttons {
    display: flex;
    order: -1; /* Move before content */
  }

  /* Header - Same font sizes as desktop! */
  .search-results__header {
    gap: 16px;
    min-height: auto;
  }

  .search-results__title {
    font-size: 36px; /* SAME as desktop per Figma */
    line-height: 1.28;
  }

  /* Grid - Single column */
  .search-results__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Product Card - Same padding as desktop */
  .product-card {
    padding: 24px; /* Same as desktop */
  }

  /* Badge position adjustment for mobile */
  .product-card__badge {
    right: 8px; /* Adjusted for mobile */
  }
}

/* ================================================
   TABLET (768px - 1023px)
   ================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  .search-results__container {
    padding: 120px 24px 24px 24px;
  }

  .search-results__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Show mobile filter buttons on tablet */
  .search-results__container > .filter-v2-mobile-buttons {
    display: flex;
    order: -1;
  }

  /* Hide desktop sidebar on tablet */
  .search-results__container > .filter-v2-sidebar {
    display: none;
  }
}


/* === pages/contacts.css === */
/**
 * Contacts Page Styles - Figma Design 2025-12-28 (Pixel Perfect)
 * Based on CONTACTS-PAGE-SPECIFICATION.md v1.0
 * BonEvents Theme
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
    /* Contacts Page Specific Variables */
    --contacts-hero-aspect-ratio: 143.11%; /* Desktop: 717/501 * 100 */
    --contacts-hero-aspect-ratio-mobile: 143.2%; /* Mobile: 537/375 * 100 */
    --contacts-team-card-aspect-ratio: 143.27%; /* 447/312 * 100 */
    --contacts-section-gap: 80px;
    --contacts-card-width: 312px;
    --contacts-card-height: 447px;
}

/* ============================================
   HERO SECTION - Grid Layout: Left Column (Title + Company + Contact Info) + Right Column (Image)
   MOBILE: Title → Image → Company Info → Contact Info (different order!)
   ============================================ */

.contacts-hero {
    margin-top: 32px;
    background-color: #FCFDFF;
}

.contacts-hero__grid {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0; /* No padding - image flush right */
    display: grid;
    grid-template-columns: 1fr 501px; /* Left column flexible, Image 501px fixed */
    gap: 0; /* No gap - we control spacing with padding */
    align-items: start;
}

/* Left Column - Stacks Title + Company Info + Contact Info vertically */
.contacts-hero__left-column {
    display: flex;
    flex-direction: column;
    /* From Figma: left-[calc(8.33%+41px)] - using exact formula for responsive behavior */
    padding-left: calc(8.33% + 41px); /* 8.33% = 1/12 of container width + 41px offset */
    padding-right: 77px; /* Space before image */
}

.contacts-hero__title {
    font-family: 'Outfit', sans-serif;
    font-size: 128px;
    font-weight: 400;
    line-height: 1.01;
    color: #2C2C34;
    letter-spacing: 0;
    margin: 0;
    /* Gap calculation: Company top (363px) - Title top (154px) - Title height (128px * 1.01 ≈ 129px) = 80px */
    margin-bottom: 80px;
}

/* Hero Image - Padding-bottom трюк для aspect ratio 1:1.43 */
.contacts-hero__image-wrapper {
    position: relative;
    width: 100%;
    max-width: 501px;
    padding-bottom: var(--contacts-hero-aspect-ratio); /* 143.11% */
    overflow: hidden;
}

.contacts-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* ============================================
   COMPANY INFO SECTION (Inside hero left column)
   ============================================ */

.contacts-company {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; /* Gap between name and registration */
    /* Gap calculation: Contact Info top (481px) - Company top (363px) - Company height (~66px) = ~52px */
    margin-bottom: 52px;
}

.contacts-company__name {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2C2C34;
    letter-spacing: 0;
    margin: 0;
}

.contacts-company__registration {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: rgba(44, 44, 52, 0.8);
    letter-spacing: 0;
    margin: 0;
}

/* ============================================
   CONTACT INFORMATION BLOCKS (Grid 2 columns) - Inside hero left column
   ============================================ */

.contacts-info {
    /* No margin-top needed - spacing handled by parent's margin-bottom */
    background-color: #FCFDFF;
}

.contacts-info__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 89px; /* Between rows per Figma */
    column-gap: auto; /* Auto distribute */
}

.contacts-info__block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.contacts-info__header {
    display: flex;
    align-items: center;
    gap: 9px;
}

.contacts-info__icon {
    font-size: 24px;
    color: #2C2C34;
}

.contacts-info__label {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2C2C34;
    letter-spacing: 0;
    margin: 0;
}

.contacts-info__value {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: rgba(44, 44, 52, 0.8);
    letter-spacing: 0;
    margin: 0;
}

.contacts-info__link {
    text-decoration: none;
    color: rgba(44, 44, 52, 0.8);
    transition: color 0.3s ease;
}

.contacts-info__link:hover {
    color: #B82D2D;
}

/* Phone numbers in a row */
.contacts-info__phones {
    display: flex;
    gap: 16px;
}

.contacts-info__phones .contacts-info__value {
    display: inline-block;
}

/* ============================================
   MAP + DIRECTIONS WRAPPER (Side by side on Desktop using Grid)
   ============================================ */

.contacts-map-wrapper {
    margin-top: 128px; /* From spec: большой отступ */
    background-color: #FCFDFF;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 48px;

    /* Desktop Grid: Directions left, Map right */
    display: grid;
    grid-template-columns: 1fr 551px; /* Directions takes remaining space, Map fixed 551px */
    gap: 0; /* No gap between */
    align-items: start;
}

/* Directions Section (Left side on Desktop) */
.contacts-directions {
    background-color: #FCFDFF;
}

.contacts-directions .container {
    max-width: 100%;
    margin: 0;
    padding: 0; /* Left padding: calc(16.67% + 35px) from left edge of wrapper = 275px - 48px wrapper padding = 227px */
    display: flex;
    flex-direction: column;
    gap: 35px; /* Between blocks */
}

/* Map Section Header - "How to find us" heading and description */
.contacts-directions__header-section {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Gap between heading and description */
    width: 324px;
}

.contacts-directions__section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28; /* 128% = 46.08px */
    color: #2C2C34;
    letter-spacing: 0;
    margin: 0;
}

.contacts-directions__section-description {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 2; /* 200% = 28px */
    color: #2C2C34;
    opacity: 0.8;
    letter-spacing: 0;
    margin: 0;
    width: 324px;
}

/* Map Section (Right side on Desktop) */
.contacts-map {
    background-color: #FCFDFF;
}

.contacts-map .container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.contacts-map__container {
    display: flex;
    justify-content: flex-end; /* Align map to right */
}

.contacts-map__image-wrapper {
    position: relative;
    width: 551px;
    height: 620px;
    overflow: hidden;
}

.contacts-map__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contacts-directions__block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 15%;
}

.contacts-directions__header {
    display: flex;
    align-items: center;
    gap: 19px;
}

.contacts-directions__number {
    width: 24px;
    height: 24px;
    background-color: #2C2C34;
    border-radius: 222px;
    color: #FCFDFF;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.01;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contacts-directions__title {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2C2C34;
    margin: 0;
}

.contacts-directions__description {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: rgba(44, 44, 52, 0.8);
    width: 324px;
    margin: 0;
}

.contacts-directions__phone {
    display: flex;
    align-items: center;
    gap: 24px;
}

.contacts-directions__phone i {
    font-size: 14px;
    color: #2C2C34;
}

.contacts-directions__phone a {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: rgba(44, 44, 52, 0.8);
    text-decoration: none;
}

.contacts-directions__phone a:hover {
    color: #B82D2D;
}

/* ============================================
   TEAM SECTION (GLOBAL from CPT 'team_member')
   Grid 4 columns, aspect ratio 312:447 (1:1.43 NOT square!)
   ============================================ */

.contacts-team {
    margin-top: 128px; /* From spec: отступ от partners */
    background-color: #FCFDFF;
}

.contacts-team .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 76px; /* Between title and grid */
}

.contacts-team__title {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    color: #2C2C34;
    letter-spacing: 0;
    text-align: center;
    margin: 0;
}

.contacts-team__grid {
    display: grid;
    grid-template-columns: repeat(4, 312px); /* Fixed 312px width */
    gap: 48px; /* Auto-distributed gap */
    justify-content: space-between;
    width: 100%;
}

/* Team Card */
.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Between photo and info */
}

/* Team Photo - aspect ratio 312:447 (1:1.43) */
.team-card__photo {
    width: 312px;
    height: 447px;
    overflow: hidden;
}

.team-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}

.team-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px; /* Between position and name */
    width: 280px;
    text-align: center;
}

/* IMPORTANT: Position BEFORE Name (specific order!) */
.team-card__position {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 2;
    color: #2C2C34;
    width: 100%;
    margin: 0;
}

.team-card__name {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2C2C34;
    width: 100%;
    margin: 0;
}

/* ============================================
   CTA SECTION
   ============================================ */

.contacts-cta {
    margin-top: 157px; /* From spec: gap from team */
    background-color: #FCFDFF;
}

.contacts-cta .container {
    max-width: 1344px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px; /* Between elements */
}

.contacts-cta__logo {
    width: 225px;
    height: 120px;
    object-fit: contain;
}

.contacts-cta__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Between title and description */
    text-align: center;
}

.contacts-cta__title {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    color: #2C2C34;
    letter-spacing: 0;
    margin: 0;
}

.contacts-cta__description {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: rgba(44, 44, 52, 0.8);
    letter-spacing: 0;
    margin: 0;
}

.contacts-cta__buttons {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

.contacts-cta__button {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contacts-cta__button--primary {
    background-color: #2C2C34;
    color: #FCFDFF;
    padding: 4px 24px;
    border: none;
}

.contacts-cta__button--primary:hover {
    background-color: #B82D2D;
}

.contacts-cta__button--secondary {
    background-color: transparent;
    color: #2C2C34;
    padding: 4px 0;
    width: 189px;
    border: none;
}

.contacts-cta__button--secondary:hover {
    color: #B82D2D;
}

/* ============================================
   RESPONSIVE STYLES
   Desktop-first approach with pixel-perfect breakpoints
   ============================================ */

/* Tablet - Below 1440px */
@media (max-width: 1439px) {
    /* Slightly reduce spacing for smaller screens */
    .contacts-hero__grid {
        grid-template-columns: 1fr 400px;
    }

    .contacts-hero__left-column {
        padding-left: 20px; /* Reduce left padding */
    }

    .contacts-map-wrapper {
        padding: 0 24px;
        grid-template-columns: 1fr minmax(300px, 40%); /* Map takes 40% max */
    }

    .contacts-map__image-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 551 / 620; /* Maintain aspect ratio */
    }

    .contacts-team__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* Tablet - Below 1024px */
@media (max-width: 1023px) {
    .contacts-hero__title {
        font-size: 72px;
    }
    .contacts-hero__grid {
        grid-template-columns: 1fr 350px;
    }

    .contacts-hero__left-column {
        padding-right: 24px;
    }

    .contacts-map-wrapper {
        padding: 0 16px;
        grid-template-columns: 1fr; /* Stack vertically on smaller tablets */
        gap: 48px;
    }

    .contacts-directions .container {
        padding-left: 16px;
    }

    .contacts-map__image-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .contacts-info__grid {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .contacts-info__phones {
        justify-content: flex-start;
        gap: 20px;
    }

    .contacts-team__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - Below 768px (375px base)
   CRITICAL: Element order changes! Title → Image → Company Info */
@media (max-width: 768px) {
    /* Hero Section - Mobile order: Title → Image → Company → Contact Info */
    .contacts-hero {
        margin-top: 32px; /* From spec: gap from header */
    }

    .contacts-hero__grid {
        padding: 0;
        display: flex;
        flex-direction: column; /* Stack vertically */
        gap: 0; /* We control gaps individually */
        overflow: hidden; /* Prevent overflow */
    }

    .contacts-hero__left-column {
        padding-left: 0;
        display: contents; /* Unwrap left column so children can be reordered */
    }

    .contacts-hero__title {
        order: 1; /* First */
        font-size: 50px; /* From spec: NOT 48px! */
        line-height: 1.28; /* Mobile line-height */
        text-align: left;
        margin-bottom: 24px; /* Gap to image */
        padding: 0 16px; /* Side padding for title */
    }

    /* Hero Image - full-width with padding-bottom 143.2% */
    .contacts-hero__image-wrapper {
        order: 2; /* Second */
        width: 100%;
        max-width: 100vw; /* Full viewport width */
        margin: 0 0 68px 0; /* Bottom gap only */
        padding-bottom: var(--contacts-hero-aspect-ratio-mobile); /* 143.2% */
    }

    /* Company Info */
    .contacts-company {
        order: 3; /* Third */
        margin-bottom: 35px; /* Gap to Contact Info */
        padding: 0 16px; /* Side padding for company info */
    }

    /* Contact Blocks - 1 column */
    .contacts-info {
        order: 4; /* Fourth */
    }

    .contacts-info__grid {
        padding: 0 16px; /* Side padding moved to grid */
        grid-template-columns: 1fr; /* Single column */
        row-gap: 35px;
    }

    .contacts-info__phones {
        flex-direction: column;
        gap: 16px;
    }

    /* Map + Directions Wrapper - Stack vertically on Mobile */
    .contacts-map-wrapper {
        margin-top: 200px;
        padding: 0; /* No padding - we control overflow per section */
        display: flex;
        flex-direction: column; /* Stack vertically */
        gap: 0;
        overflow: hidden; /* Prevent horizontal overflow */
    }

    /* Map */
    .contacts-map {
        /* Move map BEFORE directions in visual order on Mobile */
        order: -1; /* Map appears first */
        overflow: hidden; /* Prevent map from overflowing */
    }

    .contacts-map .container {
        padding: 0;
        max-width: 100%;
    }

    .contacts-map__container {
        padding: 0;
        justify-content: center;
        overflow: hidden;
    }

    .contacts-map__image-wrapper {
        width: 100%;
        max-width: 100vw; /* Full viewport width */
        height: 421.96px; /* From spec: mobile height */
        margin: 0; /* No negative margin needed */
    }

    /* Directions - OVERLAPS WITH MAP per Figma! */
    .contacts-directions {
        margin-top: -310px; /* Negative margin creates overlap effect on Mobile */
        position: relative;
        z-index: 2; /* Above map on Mobile */
    }

    /* Directions - Reset Desktop padding */
    .contacts-directions .container {
        padding: 0 16px; /* Side padding for Directions content */
        gap: 170px;
    }

    /* Map Section Header - Mobile styles */
    .contacts-directions__header-section {
        width: 100%;
        max-width: 343px;
    }

    .contacts-directions__section-description {
        width: 100%;
    }

    .contacts-directions__block {
        width: 100%;
        max-width: 343px;
    }

    /* Team - 1 column */
    .contacts-team {
        margin-top: 166px;
    }

    .contacts-team .container {
        padding: 0 16px;
    }

    .contacts-team__grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 112px; /* From spec: gap between cards */
        justify-content: center;
    }

    .team-card {
        max-width: 312px;
        margin: 0 auto;
    }

    .team-card__photo {
        width: 312px;
        height: 447px;
    }

    /* CTA - Buttons vertical */
    .contacts-cta {
        margin-top: 625px; /* From spec */
    }

    .contacts-cta .container {
        padding: 0 16px;
    }

    .contacts-cta__buttons {
        flex-direction: column; /* Vertical stack */
        gap: 16px;
        width: 100%;
    }

    .contacts-cta__button--primary,
    .contacts-cta__button--secondary {
        width: 100%;
        text-align: center;
    }
}

/* Extra Small Mobile - Below 375px */
@media (max-width: 374px) {
    .contacts-hero__title {
        font-size: 42px;
    }

    .team-card,
    .team-card__photo {
        width: 100%;
    }
}


/* === pages/installations.css === */
/**
 * Installations Pages Styles - Figma Design 2025-12-26
 * BonEvents Theme
 */

/* ============================================
   INSTALLATIONS ARCHIVE PAGE
   ============================================ */

.installations-archive {
    /* No top/bottom padding - sections handle their own spacing */
}

.installations-archive .container {
    max-width: 1664px;
    margin: 0 auto;
    padding: 0 128px;
}

/* ============================================
   HERO SECTION
   ============================================ */

.installations-archive__hero {
    padding: 80px 0 60px;
    background-color: var(--color-white);
}

.installations-archive__hero-content {
    margin-bottom: 48px;
}

.installations-archive__title {
    font-family: var(--font-heading);
    font-size: 96px;
    font-weight: 300;
    color: var(--color-text-primary);
    margin: 0 0 24px 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.installations-archive__description {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 300;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
    max-width: 800px;
}

/* ============================================
   FILTERS & SORTING - NEW from Figma 2025-12-26
   ============================================ */

.installations-archive__filters {
    margin-bottom: 60px;
}

.installations-filters-form {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

.installations-filters-form__date-filters {
    display: flex;
    gap: 16px;
    flex: 1;
}

/* Filter Field Component */
.filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.filter-field--sort {
    flex: 0 0 auto;
    min-width: 240px;
}

.filter-field__label {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin: 0;
}

.filter-field__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-field__input,
.filter-field__select {
    width: 100%;
    padding: 12px 16px;
    padding-right: 40px;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 300;
    color: var(--color-text-primary);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-field__input:hover,
.filter-field__select:hover {
    border-color: var(--color-primary);
}

.filter-field__input:focus,
.filter-field__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.filter-field__select {
    appearance: none;
    cursor: pointer;
}

.filter-field__icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
    font-size: 16px;
}

/* ============================================
   GRID SECTION
   ============================================ */

.installations-archive__grid-section {
    padding: 60px 0 80px;
    background-color: var(--color-white);
}

.installations-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 27px;
    margin-bottom: 64px;
}

.installations-archive__empty {
    text-align: center;
    padding: 80px 0;
    color: var(--color-text-secondary);
}

.installations-archive__empty p {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 24px;
}

.installations-archive__empty .btn {
    display: inline-block;
}

/* ============================================
   INSTALLATION CARD
   ============================================ */

.installation-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--color-white);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.installation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.installation-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image with 86.27% padding-bottom for aspect ratio */
.installation-card__image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 86.27%; /* 377/437 = 0.8627 */
    overflow: hidden;
    background-color: #F5F5F5;
}

.installation-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.installation-card:hover .installation-card__image {
    transform: scale(1.08);
}

.installation-card__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E0E0E0;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: 14px;
}

.installation-card__content {
    padding: 24px;
}

.installation-card__title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 300;
    color: var(--color-text-primary);
    margin: 0 0 12px 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.installation-card__tag {
    display: inline-block;
    padding: 6px 12px;
    background-color: #F5F5F5;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.installation-card__excerpt {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 300;
    color: var(--color-text-secondary);
    margin: 0 0 20px 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.installation-card__cta {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.installation-card__cta-text {
    position: relative;
}

.installation-card__cta-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.installation-card:hover .installation-card__cta-text::after {
    width: 100%;
}

.installation-card__cta-icon {
    transition: transform 0.3s ease;
}

.installation-card:hover .installation-card__cta-icon {
    transform: translateX(4px);
}

/* ============================================
   PAGINATION
   ============================================ */

.installations-archive__pagination {
    margin-top: 64px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pagination__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 16px;
}

.pagination__arrow:hover:not(.pagination__arrow--disabled) {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}

.pagination__arrow--disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination__numbers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination__number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination__number:hover:not(.pagination__number--active):not(.pagination__number--dots) {
    background-color: #F5F5F5;
}

.pagination__number--active {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 500;
}

.pagination__number--dots {
    cursor: default;
    color: var(--color-text-secondary);
}

/* ============================================
   SINGLE INSTALLATION PAGE
   ============================================ */

.single-installation {
    /* No padding - sections handle their own spacing */
}

.single-installation .container {
    max-width: 1664px;
    margin: 0 auto;
    padding: 0 128px;
}

/* ============================================
   HERO IMAGE SECTION - Full Width
   ============================================ */

.single-installation__hero {
    position: relative;
    width: 100%;
    margin-bottom: 80px;
}

.single-installation__hero-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 40.28%; /* 580/1440 = 0.4028 */
    overflow: hidden;
    background-color: #F5F5F5;
}

.single-installation__hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   TITLE SECTION
   ============================================ */

.single-installation__title-section {
    padding: 60px 0;
    background-color: var(--color-white);
}

.single-installation__title {
    font-family: var(--font-heading);
    font-size: 128px;
    font-weight: 300;
    color: var(--color-text-primary);
    margin: 0 0 24px 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.single-installation__tag {
    display: inline-block;
    padding: 8px 16px;
    background-color: #000000;
    color: #FFFFFF;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   DESCRIPTION SECTION
   ============================================ */

.single-installation__description-section {
    padding: 0 0 60px;
    background-color: var(--color-white);
}

.single-installation__description-wrapper {
    max-width: 800px;
}

.single-installation__description {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 300;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* ============================================
   GALLERY SECTION - 2 Columns
   ============================================ */

.single-installation__gallery-section {
    padding: 60px 0;
    background-color: var(--color-white);
}

.single-installation__gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.gallery-item__image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 3:4 aspect ratio */
    overflow: hidden;
    background-color: #F5F5F5;
}

.gallery-item__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    cursor: pointer;
}

.gallery-item:hover .gallery-item__image {
    transform: scale(1.05);
}

/* ============================================
   CONTENT BLOCKS
   ============================================ */

.single-installation__content-blocks {
    padding: 60px 0;
    background-color: var(--color-white);
}

/* ============================================
   PRODUCTS SECTION - 5 Columns
   ============================================ */

.single-installation__products {
    padding: 80px 0;
    background-color: #FAFAFA;
}

.single-installation__products-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 300;
    color: var(--color-text-primary);
    margin: 0 0 48px 0;
    line-height: 1.2;
    text-align: center;
}

.single-installation__products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.single-installation__shop-button-wrapper {
    text-align: center;
    margin-top: 48px;
}

.single-installation__shop-button-wrapper .btn {
    min-width: 200px;
}

/* ============================================
   CTA SECTION
   ============================================ */

.single-installation__cta {
    /* CTA component handles its own styling */
}

/* ============================================
   NAVIGATION - Previous/Next
   ============================================ */

.single-installation__navigation {
    padding: 60px 0;
    background-color: var(--color-white);
}

.installation-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-top: 40px;
    border-top: 1px solid #E0E0E0;
}

.installation-navigation__link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    flex: 1;
    max-width: 45%;
}

.installation-navigation__link:hover {
    color: var(--color-primary);
}

.installation-navigation__link--prev {
    align-items: flex-start;
}

.installation-navigation__link--next {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
}

.installation-navigation__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.installation-navigation__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 300;
    line-height: 1.3;
}

/* ============================================
   PRODUCT CARD MINI - For Single Installation Products
   ============================================ */

.product-card {
    position: relative;
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card--mini {
    border: 1px solid #E0E0E0;
}

.product-card--mini:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.product-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-card--mini .product-card__image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 square aspect ratio */
    overflow: hidden;
    background-color: #F5F5F5;
}

.product-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E0E0E0;
    color: var(--color-text-secondary);
    font-size: 12px;
    text-align: center;
    padding: 16px;
}

.product-card--mini .product-card__content {
    padding: 16px;
}

.product-card--mini .product-card__title {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card--mini .product-card__price {
    display: block;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.product-card--mini .product-card__availability {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 300;
    color: var(--color-text-secondary);
    margin: 0;
}

.product-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-block;
    padding: 4px 10px;
    background-color: #4CAF50;
    color: #FFFFFF;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.product-card__badge--available {
    background-color: #4CAF50;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet (1024px - 1440px) */
@media (max-width: 1440px) {
    .installations-archive .container,
    .single-installation .container {
        padding: 0 96px;
    }

    .single-installation__title {
        font-size: 96px;
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .installations-archive .container,
    .single-installation .container {
        padding: 0 48px;
    }

    .installations-archive__title {
        font-size: 64px;
    }

    .installations-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .installations-filters-form {
        flex-direction: column;
        align-items: stretch;
    }

    .installations-filters-form__date-filters {
        width: 100%;
    }

    .filter-field--sort {
        width: 100%;
        min-width: auto;
    }

    .single-installation__title {
        font-size: 72px;
    }

    .single-installation__gallery-grid {
        gap: 12px;
    }

    .single-installation__products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .installations-archive .container,
    .single-installation .container {
        padding: 0 24px;
    }

    /* Archive Hero */
    .installations-archive__hero {
        padding: 60px 0 40px;
    }

    .installations-archive__title {
        font-size: 48px;
        margin-bottom: 16px;
    }

    .installations-archive__description {
        font-size: 16px;
    }

    /* Filters */
    .installations-archive__filters {
        margin-bottom: 40px;
    }

    .installations-filters-form__date-filters {
        flex-direction: column;
        gap: 12px;
    }

    /* Grid */
    .installations-archive__grid-section {
        padding: 40px 0 60px;
    }

    .installations-archive__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 48px;
    }

    .installation-card__title {
        font-size: 24px;
    }

    /* Pagination */
    .installations-archive__pagination {
        margin-top: 48px;
    }

    .pagination__arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .pagination__number {
        min-width: 36px;
        height: 36px;
        font-size: 14px;
    }

    /* Single Installation */
    .single-installation__hero {
        margin-bottom: 60px;
    }

    .single-installation__hero-image-wrapper {
        padding-bottom: 75%; /* More square on mobile */
    }

    .single-installation__title-section {
        padding: 40px 0;
    }

    .single-installation__title {
        font-size: 48px;
        margin-bottom: 16px;
    }

    .single-installation__tag {
        font-size: 12px;
        padding: 6px 12px;
    }

    .single-installation__description-section {
        padding: 0 0 40px;
    }

    .single-installation__description {
        font-size: 16px;
    }

    .single-installation__gallery-section {
        padding: 40px 0;
    }

    .single-installation__gallery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .single-installation__content-blocks {
        padding: 40px 0;
    }

    .single-installation__products {
        padding: 60px 0;
    }

    .single-installation__products-title {
        font-size: 36px;
        margin-bottom: 32px;
    }

    .single-installation__products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .single-installation__shop-button-wrapper {
        margin-top: 32px;
    }

    .single-installation__navigation {
        padding: 40px 0;
    }

    .installation-navigation {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding-top: 24px;
    }

    .installation-navigation__link {
        max-width: 100%;
    }

    .installation-navigation__link--prev,
    .installation-navigation__link--next {
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
    }

    .installation-navigation__title {
        font-size: 20px;
    }
}

/* Small Mobile (<= 375px) */
@media (max-width: 375px) {
    .installations-archive .container,
    .single-installation .container {
        padding: 0 16px;
    }

    .installations-archive__title {
        font-size: 40px;
    }

    .single-installation__title {
        font-size: 40px;
    }

    .single-installation__products-grid {
        grid-template-columns: 1fr;
    }

    .single-installation__products-title {
        font-size: 28px;
    }
}


/* === pages/portfolio.css === */
/**
 * Portfolio Pages Styles
 * Based on Figma: Desktop 81:1761, 82:2373 | Mobile 112:5690, 2236:6990
 * ALL VALUES ARE EXACT FROM FIGMA - NO APPROXIMATIONS
 */

/* ============================================
   PORTFOLIO ARCHIVE PAGE
   ============================================ */

.portfolio-archive {
    background-color: #fcfdff;
    padding: 32px 48px 80px;
    min-height: 100vh;
}

/* ============================================
   ARCHIVE HEADER
   ============================================ */

.portfolio-archive__header {
    margin-bottom: 96px;
}

/* H1 Title - Figma: 128px, line-height 1.01 */
.portfolio-archive__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 128px;
    line-height: 1.01;
    color: #2c2c34;
    margin: 0 0 48px 0;
    max-width: 783px;
}

/* ============================================
   CATEGORY TABS
   Figma: Simple text tabs, 16px, gap 32px
   Active: opacity 100%, Inactive: opacity 50%
   ============================================ */

.portfolio-archive__tabs {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.portfolio-archive__tab {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.01;
    color: #2c2c34;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.portfolio-archive__tab:hover {
    opacity: 0.8;
}

.portfolio-archive__tab--active {
    opacity: 1;
}

/* ============================================
   PORTFOLIO LIST
   ============================================ */

.portfolio-archive__list {
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.portfolio-archive__empty {
    text-align: center;
    padding: 80px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: #2c2c34;
    opacity: 0.5;
}

/* ============================================
   PORTFOLIO ITEM (Card)
   ============================================ */

.portfolio-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================
   IMAGES SECTION
   Figma Desktop: Main 680x392, Secondary 389x296
   ============================================ */

.portfolio-item__images {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

/* Main Image - Figma: 680x392px */
.portfolio-item__main-image {
    width: 680px;
    height: 392px;
    flex-shrink: 0;
    overflow: hidden;
}

.portfolio-item__main-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.portfolio-item__main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-item__main-image:hover img {
    transform: scale(1.02);
}

.portfolio-item__placeholder {
    width: 100%;
    height: 100%;
    background-color: #f8f9fb;
}

/* Secondary Image - Figma: 389x296px with + button */
.portfolio-item__secondary-image {
    position: relative;
    width: 389px;
    height: 296px;
    flex-shrink: 0;
    overflow: hidden;
}

.portfolio-item__secondary-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Plus Button - Figma: 48x48px, bg #fcfdff, rounded full */
.portfolio-item__plus-btn {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background-color: #fcfdff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portfolio-item__plus-btn i {
    font-size: 24px;
    color: #2c2c34;
}

.portfolio-item__plus-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile Slider Dots - hidden on desktop */
.portfolio-item__slider-dots {
    display: none;
}

/* ============================================
   CONTENT SECTION
   ============================================ */

.portfolio-item__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 680px;
}

/* Title - Figma: 36px, line-height 1.28 */
.portfolio-item__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.28;
    color: #2c2c34;
    margin: 0;
}

.portfolio-item__title a {
    color: inherit;
    text-decoration: none;
}

.portfolio-item__title a:hover {
    opacity: 0.8;
}

/* Description - Figma: 14px, line-height 2, opacity 80%, max-width 324px */
.portfolio-item__description {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0;
    max-width: 324px;
}

/* Tags - Figma: border 0.5px rgba(44,44,52,0.6), radius 222px, padding 2px 16px */
.portfolio-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.portfolio-item__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 16px;
    border: 0.5px solid rgba(44, 44, 52, 0.6);
    border-radius: 222px;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 2;
    color: rgba(44, 44, 52, 0.6);
}

.portfolio-item__tag i {
    font-size: 12px;
}

/* CTA Link - Figma: 16px, with arrow */
.portfolio-item__cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    color: #2c2c34;
    text-decoration: none;
    padding: 4px 0;
    margin-top: 8px;
    transition: opacity 0.2s ease;
}

.portfolio-item__cta:hover {
    opacity: 0.7;
}

.portfolio-item__cta i {
    font-size: 14px;
}

/* ============================================
   SINGLE PORTFOLIO PAGE
   ============================================ */

.single-portfolio {
    background-color: #fcfdff;
}

/* ============================================
   HERO SECTION
   Figma: 1440x580px full width, Image or Video
   ============================================ */

.single-portfolio__hero {
    width: 100%;
    height: 580px;
    overflow: hidden;
}

.single-portfolio__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero Video */
.single-portfolio__hero-video {
    width: 100%;
    height: 100%;
    position: relative;
}

.single-portfolio__hero-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   HEADER SECTION
   Figma: Title 128px, Venue 36px, Description on right side
   ============================================ */

.single-portfolio__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 64px 48px 48px;
    gap: 48px;
}

.single-portfolio__header-left {
    flex: 1;
    max-width: 1083px;
}

.single-portfolio__header-right {
    width: 324px;
    flex-shrink: 0;
}

/* Legacy support */
.single-portfolio__header-content {
    flex: 1;
    max-width: 1083px;
}

/* Title - Figma: 128px, line-height 1.01 */
.single-portfolio__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 128px;
    line-height: 1.01;
    color: #2c2c34;
    margin: 0 0 16px 0;
}

/* Venue/Subtitle - Figma: 36px, line-height 1.28 */
.single-portfolio__venue {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.28;
    color: #2c2c34;
    margin: 0;
}

/* Intro Text - Figma: 14px, width 324px, right side */
.single-portfolio__intro-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0;
}

/* Legacy support */
.single-portfolio__intro {
    width: 324px;
    flex-shrink: 0;
}

.single-portfolio__description {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0;
}

/* ============================================
   DUO IMAGES SECTION
   Figma: Two images 664x563px each
   ============================================ */

.single-portfolio__duo-images {
    display: flex;
    gap: 16px;
    padding: 0 48px;
    margin-bottom: 48px;
}

.single-portfolio__duo-left,
.single-portfolio__duo-right {
    flex: 1;
    height: 563px;
    overflow: hidden;
}

.single-portfolio__duo-left img,
.single-portfolio__duo-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   TEXT BLOCK
   Figma: Centered text, 14px, max-width 437px
   ============================================ */

.single-portfolio__text-block {
    padding: 48px;
    max-width: 437px;
}

.single-portfolio__text-block--centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.single-portfolio__paragraph {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0 0 16px 0;
}

.single-portfolio__paragraph:last-child {
    margin-bottom: 0;
}

/* ============================================
   MIXED IMAGES SECTION
   Figma: Large 793x563px + Side 437x354px with text
   ============================================ */

.single-portfolio__mixed-images {
    display: flex;
    gap: 16px;
    padding: 0 48px;
    margin-bottom: 48px;
}

.single-portfolio__large-image {
    width: 793px;
    height: 563px;
    flex-shrink: 0;
    overflow: hidden;
}

.single-portfolio__large-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-portfolio__side-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 437px;
}

.single-portfolio__side-image {
    height: 354px;
    overflow: hidden;
}

.single-portfolio__side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-portfolio__side-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0;
    max-width: 324px;
}

/* ============================================
   CONTENT BLOCK WITH TITLE
   Figma: Title 36px, text 14px
   ============================================ */

.single-portfolio__content-block {
    padding: 48px;
    max-width: 800px;
}

.single-portfolio__content-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.28;
    color: #2c2c34;
    margin: 0 0 24px 0;
}

.single-portfolio__content-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
}

.single-portfolio__content-text p {
    margin: 0 0 16px 0;
}

/* ============================================
   PANORAMIC IMAGE
   Figma: 1344x354px
   ============================================ */

.single-portfolio__panoramic {
    padding: 0 48px;
    margin-bottom: 48px;
}

.single-portfolio__panoramic img {
    width: 100%;
    height: 354px;
    object-fit: cover;
}

/* ============================================
   MASONRY GALLERY
   Figma: Various sizes - 324x324, 324x577, 324x490
   ============================================ */

.single-portfolio__gallery {
    padding: 0 48px;
    margin-bottom: 64px;
    position: relative;
}

.single-portfolio__gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 324px);
    grid-auto-rows: auto;
    gap: 16px;
    justify-content: center;
}

/* Gallery item sizes based on position */
.single-portfolio__gallery-item {
    overflow: hidden;
}

.single-portfolio__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pattern: 1-square, 2-tall, 3-tall, 4-tall, 5-square, 6-medium */
.single-portfolio__gallery-item--1 { height: 324px; }
.single-portfolio__gallery-item--2 { height: 577px; grid-row: span 2; }
.single-portfolio__gallery-item--3 { height: 324px; }
.single-portfolio__gallery-item--4 { height: 577px; grid-row: span 2; }
.single-portfolio__gallery-item--5 { height: 490px; }
.single-portfolio__gallery-item--6 { height: 324px; }

/* Gallery Navigation */
.single-portfolio__gallery-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.single-portfolio__gallery-btn {
    width: 48px;
    height: 48px;
    background-color: #fcfdff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.single-portfolio__gallery-btn i {
    font-size: 24px;
    color: #2c2c34;
}

.single-portfolio__gallery-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   FLEXIBLE CONTENT BLOCKS
   ACF Flexible Content for drag-and-drop
   ============================================ */

.single-portfolio__block {
    margin-bottom: 48px;
}

/* ============================================
   BLOCK: TWO IMAGES SIDE BY SIDE
   Figma: 664x563px each
   ============================================ */

.single-portfolio__two-images {
    display: flex;
    gap: 16px;
    padding: 0 48px;
}

.single-portfolio__two-images-left,
.single-portfolio__two-images-right {
    flex: 1;
    height: 563px;
    overflow: hidden;
}

.single-portfolio__two-images-left img,
.single-portfolio__two-images-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   BLOCK: TEXT BLOCK
   Figma: Centered text, 14px, various widths
   ============================================ */

.single-portfolio__text-block {
    padding: 48px;
}

.single-portfolio__text-block--narrow {
    max-width: 437px;
}

.single-portfolio__text-block--medium {
    max-width: 664px;
}

.single-portfolio__text-block--wide {
    max-width: 100%;
}

.single-portfolio__text-block--left {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.single-portfolio__text-block--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.single-portfolio__text-block--right {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

.single-portfolio__text-content {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
}

.single-portfolio__text-content p {
    margin: 0 0 16px 0;
}

.single-portfolio__text-content p:last-child {
    margin-bottom: 0;
}

/* ============================================
   BLOCK: LARGE IMAGE + SIDE CONTENT
   Figma: Large 793x563px + Side 437x354px with text
   ============================================ */

.single-portfolio__image-side-content {
    display: flex;
    gap: 16px;
    padding: 0 48px;
}

.single-portfolio__image-side-content--image_right {
    flex-direction: row-reverse;
}

.single-portfolio__isc-main {
    flex: 0 0 793px;
    height: 563px;
    overflow: hidden;
}

.single-portfolio__isc-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-portfolio__isc-side {
    flex: 0 0 437px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.single-portfolio__isc-side-image {
    height: 354px;
    overflow: hidden;
}

.single-portfolio__isc-side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-portfolio__isc-side-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    max-width: 324px;
}

/* ============================================
   BLOCK: CONTENT BLOCK (TITLE + TEXT)
   Figma: Title 36px, text 14px
   ============================================ */

.single-portfolio__content-block {
    padding: 48px;
    max-width: 800px;
}

.single-portfolio__content-block--left {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.single-portfolio__content-block--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.single-portfolio__content-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.28;
    color: #2c2c34;
    margin: 0 0 24px 0;
}

.single-portfolio__content-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
}

.single-portfolio__content-text p {
    margin: 0 0 16px 0;
}

.single-portfolio__content-text p:last-child {
    margin-bottom: 0;
}

/* ============================================
   BLOCK: PANORAMIC IMAGE
   Figma: Various heights
   ============================================ */

.single-portfolio__panoramic {
    padding: 0 48px;
}

.single-portfolio__panoramic img {
    width: 100%;
    object-fit: cover;
}

.single-portfolio__panoramic--small img {
    height: 354px;
}

.single-portfolio__panoramic--medium img {
    height: 450px;
}

.single-portfolio__panoramic--large img {
    height: 580px;
}

/* ============================================
   BLOCK: MASONRY GALLERY
   Figma: Various sizes - 324x324, 324x577, 324x490
   ============================================ */

.single-portfolio__masonry {
    padding: 0 48px;
}

.single-portfolio__masonry-grid {
    column-gap: 16px;
}

.single-portfolio__masonry--cols-3 .single-portfolio__masonry-grid {
    column-count: 3;
}

.single-portfolio__masonry--cols-4 .single-portfolio__masonry-grid {
    column-count: 4;
}

.single-portfolio__masonry-item {
    break-inside: avoid;
    margin-bottom: 16px;
    overflow: hidden;
}

.single-portfolio__masonry-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   BLOCK: SINGLE IMAGE
   Various sizes and alignments
   ============================================ */

.single-portfolio__single-image {
    padding: 0 48px;
}

.single-portfolio__single-image img {
    display: block;
    object-fit: cover;
}

/* Sizes */
.single-portfolio__single-image--small img {
    max-width: 324px;
}

.single-portfolio__single-image--medium img {
    max-width: 50%;
}

.single-portfolio__single-image--large img {
    max-width: 75%;
}

.single-portfolio__single-image--full img {
    width: 100%;
}

/* Alignments */
.single-portfolio__single-image--left img {
    margin-left: 0;
    margin-right: auto;
}

.single-portfolio__single-image--center img {
    margin-left: auto;
    margin-right: auto;
}

.single-portfolio__single-image--right img {
    margin-left: auto;
    margin-right: 0;
}

/* ============================================
   CTA SECTION
   Figma: Logo 225x120, Title 36px, 2 buttons
   ============================================ */

.single-portfolio__cta {
    padding: 80px 48px;
    display: flex;
    justify-content: center;
}

.single-portfolio__cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    max-width: 600px;
    text-align: center;
}

/* Logo - Figma: 225x120px */
.single-portfolio__cta-logo {
    width: 225px;
    height: 120px;
}

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

.single-portfolio__cta-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #2c2c34;
}

/* CTA Text */
.single-portfolio__cta-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.single-portfolio__cta-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.28;
    color: #2c2c34;
    margin: 0;
}

.single-portfolio__cta-description {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0;
}

/* CTA Buttons */
.single-portfolio__cta-buttons {
    display: flex;
    gap: 24px;
    align-items: center;
}

.single-portfolio__cta-btn {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    text-decoration: none;
    padding: 4px 24px;
    transition: opacity 0.2s ease;
}

.single-portfolio__cta-btn--primary {
    background-color: #2c2c34;
    color: #fcfdff;
}

.single-portfolio__cta-btn--primary:hover {
    opacity: 0.9;
}

.single-portfolio__cta-btn--secondary {
    background-color: transparent;
    color: #2c2c34;
}

.single-portfolio__cta-btn--secondary:hover {
    opacity: 0.7;
}

/* ============================================
   RESPONSIVE - TABLET (1024px)
   ============================================ */

@media (max-width: 1024px) {
    .portfolio-archive {
        padding: 24px 24px 60px;
    }

    .portfolio-archive__title {
        font-size: 64px;
    }

    .portfolio-archive__header {
        margin-bottom: 48px;
    }

    /* Images stack on tablet */
    .portfolio-item__images {
        flex-direction: column;
        gap: 16px;
    }

    .portfolio-item__main-image {
        width: 100%;
        height: auto;
        aspect-ratio: 680 / 392;
    }

    .portfolio-item__secondary-image {
        width: 100%;
        height: auto;
        aspect-ratio: 389 / 296;
    }

    /* Single Portfolio */
    .single-portfolio__title {
        font-size: 64px;
    }

    .single-portfolio__header {
        flex-direction: column;
        padding: 48px 24px;
    }

    .single-portfolio__intro {
        width: 100%;
    }

    .single-portfolio__duo-images {
        flex-direction: column;
        padding: 0 24px;
    }

    .single-portfolio__duo-left,
    .single-portfolio__duo-right {
        height: auto;
        aspect-ratio: 664 / 563;
    }

    .single-portfolio__mixed-images {
        flex-direction: column;
        padding: 0 24px;
    }

    .single-portfolio__large-image {
        width: 100%;
        height: auto;
        aspect-ratio: 793 / 563;
    }

    .single-portfolio__side-content {
        width: 100%;
    }

    .single-portfolio__panoramic {
        padding: 0 24px;
    }

    .single-portfolio__gallery {
        padding: 0 24px;
    }

    .single-portfolio__gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-portfolio__cta {
        padding: 60px 24px;
    }

    /* Flexible Content Blocks - Tablet */
    .single-portfolio__two-images {
        flex-direction: column;
        padding: 0 24px;
    }

    .single-portfolio__two-images-left,
    .single-portfolio__two-images-right {
        height: auto;
        aspect-ratio: 664 / 563;
    }

    .single-portfolio__text-block {
        padding: 32px 24px;
    }

    .single-portfolio__image-side-content {
        flex-direction: column;
        padding: 0 24px;
    }

    .single-portfolio__image-side-content--image_right {
        flex-direction: column;
    }

    .single-portfolio__isc-main {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 793 / 563;
    }

    .single-portfolio__isc-side {
        flex: none;
        width: 100%;
    }

    .single-portfolio__content-block {
        padding: 32px 24px;
    }

    .single-portfolio__panoramic {
        padding: 0 24px;
    }

    .single-portfolio__masonry {
        padding: 0 24px;
    }

    .single-portfolio__masonry--cols-4 .single-portfolio__masonry-grid {
        column-count: 3;
    }

    .single-portfolio__single-image {
        padding: 0 24px;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (375px)
   Based on Figma: 112:5690, 2236:6990
   ============================================ */

@media (max-width: 768px) {
    .portfolio-archive {
        padding: 16px 16px 40px;
    }

    /* H1 Mobile - Figma: 50px */
    .portfolio-archive__title {
        font-size: 50px;
        line-height: 1.28;
        max-width: 303px;
        margin-bottom: 32px;
    }

    .portfolio-archive__header {
        margin-bottom: 48px;
    }

    /* Tabs - wrap with gap */
    .portfolio-archive__tabs {
        gap: 8px 32px;
        flex-wrap: wrap;
    }

    .portfolio-archive__list {
        gap: 64px;
    }

    /* Mobile Image - Figma: 343x476px */
    .portfolio-item__images {
        flex-direction: column;
        gap: 0;
    }

    .portfolio-item__main-image {
        width: 100%;
        height: 476px;
    }

    .portfolio-item__secondary-image {
        display: none;
    }

    /* Show slider dots on mobile */
    .portfolio-item__slider-dots {
        display: flex;
        justify-content: center;
        gap: 16px;
        padding: 16px 0;
    }

    .portfolio-item__dot {
        width: 48px;
        height: 48px;
        background-color: #fcfdff;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .portfolio-item__dot::before {
        content: '\f067'; /* fa-plus */
        font-family: 'Font Awesome 6 Pro';
        font-weight: 300;
        font-size: 24px;
        color: #2c2c34;
    }

    .portfolio-item__content {
        max-width: 100%;
    }

    .portfolio-item__title {
        font-size: 36px;
    }

    .portfolio-item__description {
        max-width: 100%;
    }

    /* ============================================
       SINGLE PORTFOLIO - MOBILE
       ============================================ */

    /* Hero - Figma: 375x480px */
    .single-portfolio__hero {
        height: 480px;
    }

    .single-portfolio__header {
        padding: 32px 16px;
        gap: 16px;
    }

    /* Title - Figma: 50px mobile */
    .single-portfolio__title {
        font-size: 50px;
        line-height: 1.28;
    }

    .single-portfolio__venue {
        font-size: 36px;
    }

    .single-portfolio__intro {
        width: 100%;
        margin-top: 16px;
    }

    /* Duo Images - stack and resize */
    .single-portfolio__duo-images {
        padding: 0 16px;
    }

    .single-portfolio__duo-left,
    .single-portfolio__duo-right {
        height: 295px;
    }

    /* Text Block */
    .single-portfolio__text-block {
        padding: 32px 16px;
        max-width: 100%;
    }

    /* Mixed Images */
    .single-portfolio__mixed-images {
        padding: 0 16px;
    }

    .single-portfolio__large-image {
        height: 295px;
    }

    .single-portfolio__side-image {
        height: 295px;
    }

    .single-portfolio__side-text {
        max-width: 100%;
    }

    /* Content Block */
    .single-portfolio__content-block {
        padding: 32px 16px;
    }

    /* Panoramic - Figma: 375x354px full width */
    .single-portfolio__panoramic {
        padding: 0;
    }

    .single-portfolio__panoramic img {
        height: 354px;
    }

    /* Gallery - single column on mobile */
    .single-portfolio__gallery {
        padding: 0 16px;
    }

    .single-portfolio__gallery-grid {
        grid-template-columns: 1fr;
    }

    .single-portfolio__gallery-item--1,
    .single-portfolio__gallery-item--2,
    .single-portfolio__gallery-item--3,
    .single-portfolio__gallery-item--4,
    .single-portfolio__gallery-item--5,
    .single-portfolio__gallery-item--6 {
        height: auto;
        aspect-ratio: 343 / 295;
        grid-row: auto;
    }

    /* CTA - Figma: buttons stacked, full width */
    .single-portfolio__cta {
        padding: 48px 16px;
    }

    .single-portfolio__cta-inner {
        width: 100%;
    }

    .single-portfolio__cta-title {
        font-size: 36px;
    }

    .single-portfolio__cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }

    .single-portfolio__cta-btn {
        width: 100%;
        text-align: center;
    }

    /* Flexible Content Blocks - Mobile */
    .single-portfolio__block {
        margin-bottom: 32px;
    }

    .single-portfolio__two-images {
        padding: 0 16px;
    }

    .single-portfolio__two-images-left,
    .single-portfolio__two-images-right {
        height: 295px;
        aspect-ratio: auto;
    }

    .single-portfolio__text-block {
        padding: 24px 16px;
        max-width: 100%;
    }

    .single-portfolio__image-side-content {
        padding: 0 16px;
    }

    .single-portfolio__isc-main {
        height: 295px;
        aspect-ratio: auto;
    }

    .single-portfolio__isc-side-image {
        height: 295px;
    }

    .single-portfolio__isc-side-text {
        max-width: 100%;
    }

    .single-portfolio__content-block {
        padding: 24px 16px;
        max-width: 100%;
    }

    .single-portfolio__panoramic {
        padding: 0;
    }

    .single-portfolio__masonry {
        padding: 0 16px;
    }

    .single-portfolio__masonry--cols-3 .single-portfolio__masonry-grid,
    .single-portfolio__masonry--cols-4 .single-portfolio__masonry-grid {
        column-count: 2;
    }

    .single-portfolio__single-image {
        padding: 0 16px;
    }

    .single-portfolio__single-image--small img,
    .single-portfolio__single-image--medium img,
    .single-portfolio__single-image--large img {
        max-width: 100%;
    }

    /* Header adjustments for mobile */
    .single-portfolio__header-left {
        max-width: 100%;
    }

    .single-portfolio__header-right {
        width: 100%;
    }

    /* Hero video mobile */
    .single-portfolio__hero-video {
        height: 100%;
    }
}

/* ============================================
   SMALL MOBILE (375px and below)
   ============================================ */

@media (max-width: 375px) {
    .portfolio-archive__title {
        font-size: 40px;
    }

    .single-portfolio__title {
        font-size: 40px;
    }
}


/* === pages/shop.css === */
/**
 * Shop Page Styles
 *
 * Layout and structure for WooCommerce shop page
 *
 * @package BonEvents
 */

.shop-page {
	display: flex;
	gap: 32px;
	padding: 48px;
	background: #fcfdff;
	min-height: 100vh;
}

/* Shop content area */
.shop-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Shop controls (dates + slider) */
.shop-controls {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

/* Products grid */
.products-grid {
	display: grid;
	gap: 16px;
}

.products-grid[data-columns="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.products-grid[data-columns="3"] {
	grid-template-columns: repeat(3, 1fr);
}

.products-grid[data-columns="4"] {
	grid-template-columns: repeat(4, 1fr);
}

/* Responsive */
@media (max-width: 1024px) {
	.shop-page {
		flex-direction: column;
		padding: 24px;
	}

	.products-grid[data-columns="4"],
	.products-grid[data-columns="3"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.shop-page {
		padding: 16px;
	}

	.products-grid[data-columns="2"],
	.products-grid[data-columns="3"],
	.products-grid[data-columns="4"] {
		grid-template-columns: 1fr;
	}
}


/* === pages/product.css === */
/**
 * Product Page Styles
 * Matches Figma design: node-id=91-7099 (desktop 1440px), 112-5941 (mobile 375px)
 * Main layout: 551px gallery + 48px gap + 438px sidebar
 */

/* ============================================
   Product Page Container
   ============================================ */

.product-page {
	padding: 48px 0;
}

.product-page .container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ============================================
   Breadcrumb
   ============================================ */

.product-breadcrumb {
	margin-bottom: 32px;
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
}

/* ============================================
   Main Product Layout (Gallery + Sidebar)
   Desktop: 551px + 48px gap + 438px = 1037px
   ============================================ */

.product-main {
	display: flex;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: 64px;
}

.product-main__gallery {
	max-width: 551px;
	width: 100%;
	flex-shrink: 0;
}

.product-main__info {
	max-width: 660px;
	width: 100%;
	flex-shrink: 0;
}

/* ============================================
   Product Gallery Component
   Main image: 551px × 551px (desktop), 343px (mobile)
   mix-blend-mode: multiply, object-fit: contain
   Thumbnails: 97px, max 5 visible, hidden on mobile
   Zoom button: inside image, bottom-right corner (48px circle)
   Figma: node-id=91-7099 (desktop), 112-5941 (mobile)
   ============================================ */

.product-gallery {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Main Image Container */
.product-gallery__main {
	position: relative;
	width: 551px;
	height: 551px;
	background: var(--color-white, #FCFDFF);
	overflow: hidden;
}

/* Main Image - Figma: mix-blend-multiply, object-contain */
.product-gallery__main-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity 0.3s ease;
}

.product-gallery__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-gray-light, #F8F9FB);
	font-size: 48px;
	color: var(--color-text-secondary, #6B6B6B);
}

/* Bottom row: Thumbnails carousel (Desktop) */
.product-gallery__bottom {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Thumbnails wrapper - viewport showing 5 thumbnails */
.product-gallery__thumbnails-wrapper {
	width: calc(5 * 97px + 4 * 16px); /* 5 thumbnails + 4 gaps = 549px */
	overflow: hidden;
	position: relative;
}

/* Thumbnails container - slides via transform */
.product-gallery__thumbnails {
	display: flex;
	gap: 16px;
	flex-wrap: nowrap;
	transition: transform 0.3s ease;
}

.product-gallery__thumbnail {
	width: 97px;
	height: 97px;
	flex-shrink: 0;
	overflow: hidden;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	opacity: 0.2;
	transition: opacity 0.3s ease;
}

.product-gallery__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.product-gallery__thumbnail:hover,
.product-gallery__thumbnail--active {
	opacity: 1;
}

/* Zoom Button - inside main image, bottom-right (48px circle, white bg, zoom icon) */
.product-gallery__zoom {
	position: absolute;
	bottom: 16px;
	right: 16px;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-white, #FCFDFF);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-black, #2C2C34);
	transition: all 0.3s ease;
	z-index: 5;
}

.product-gallery__zoom svg {
	width: 24px;
	height: 24px;
}

.product-gallery__zoom:hover {
	background: var(--color-black, #2C2C34);
	color: var(--color-white, #FCFDFF);
}

/* ============================================
   Product Description Section
   ============================================ */

.product-description {
	margin-bottom: 64px;
}

/* ============================================
   Masonry Gallery Section
   ============================================ */

.product-masonry {
	margin-bottom: 64px;
}

/* ============================================
   Related Products Section
   ============================================ */

.product-related {
	margin-bottom: 64px;
}

/* ============================================
   Responsive: Desktop 1440px
   ============================================ */

@media (max-width: 1440px) {
	.product-main {
		gap: 32px;
	}

	.product-main__gallery {
		width: auto;
		flex: 1 1 auto;
		max-width: 551px;
	}

	.product-gallery__main {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		max-width: 551px;
	}
}

/* ============================================
   Responsive: Tablet (1024px)
   ============================================ */

@media (max-width: 1024px) {
	.product-main {
		flex-direction: column;
		gap: 32px;
	}

	.product-main__gallery {
		width: 100%;
		max-width: 551px;
	}

	.product-main__info {
		width: 100%;
		max-width: 600px;
	}

	.product-gallery__main {
		width: 100%;
		max-width: 551px;
	}

	.product-gallery__thumbnails {
		justify-content: flex-start;
	}

	/* Hide thumbnails on tablet and below */
	.product-gallery__bottom {
		display: none;
	}
}

/* ============================================
   Responsive: Mobile (768px)
   ============================================ */

@media (max-width: 768px) {
	.product-page {
		padding: 24px 0;
	}

	.product-page .container {
		padding: 0 16px;
	}

	.product-breadcrumb {
		margin-bottom: 16px;
		font-size: 12px;
	}

	.product-main {
		gap: 24px;
		margin-bottom: 48px;
	}

	.product-description,
	.product-masonry,
	.product-related {
		margin-bottom: 48px;
	}

	.product-gallery__main {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		max-width: 400px;
		margin: 0 auto;
	}
}

/* ============================================
   Responsive: Mobile (375px - Figma design)
   Gallery: 343px, thumbnails hidden, zoom inside image
   Figma: node-id=112-5941
   ============================================ */

@media (max-width: 375px) {
	.product-page .container {
		padding: 0 16px;
	}

	/* Figma: 343x343px image */
	.product-gallery__main {
		width: 343px;
		height: 343px;
		max-width: 343px;
		margin: 0 auto;
	}

	/* Thumbnails hidden on mobile - controlled by .product-gallery__bottom display:none above */
}


/* === pages/cart.css === */
/**
 * Cart Page Styles
 * BonEvents Theme
 */

/* ============================================
   CART PAGE LAYOUT
   ============================================ */

.cart-page {
    padding: 80px 0;
    min-height: 60vh;
}

.cart-page__container {
    max-width: 1664px;
    margin: 0 auto;
    padding: 0 128px;
}

.cart-page__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3xl) 0;
}

/* ============================================
   RENTAL DATES SECTION
   ============================================ */

.cart-rental-dates {
    padding: var(--space-xl);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3xl);
}

.cart-rental-dates__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.cart-rental-dates__header i {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.cart-rental-dates__header h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0;
}

.cart-rental-dates__fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}

.cart-rental-dates__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cart-rental-dates__field label {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.cart-rental-dates__field input {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
    background-color: var(--color-white);
    transition: all var(--transition-base);
}

.cart-rental-dates__field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(195, 148, 105, 0.1);
}

.cart-rental-dates__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-sm);
}

.cart-rental-dates__info .rental-days-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2xs);
}

.cart-rental-dates__info .rental-days-display {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
}

.cart-rental-dates__note {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    padding: var(--space-sm);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-sm);
}

.cart-rental-dates__note i {
    font-size: var(--font-size-base);
    color: var(--color-primary);
}

.cart-page__content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-4xl);
    align-items: start;
}

/* ============================================
   CART ITEMS
   ============================================ */

.cart-page__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.cart-item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: center;
}

.cart-item__image {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--color-gray-100);
}

.cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-2xl);
}

.cart-item__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cart-item__name {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
}

.cart-item__name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

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

.cart-item__variation {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 2px 0 0;
}

.cart-item__variation-attr {
    font-family: var(--font-primary);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.cart-item__price-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.cart-item__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    margin-top: var(--space-sm);
}

.cart-item__quantity {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.cart-item__quantity-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.cart-item__quantity-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.cart-item__quantity-input {
    width: 60px;
    height: 32px;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.cart-item__quantity-input::-webkit-inner-spin-button,
.cart-item__quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item__subtotal {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.cart-item__subtotal-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.cart-item__subtotal-value {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.cart-item__remove {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-base);
}

.cart-item__remove:hover {
    color: #e74c3c;
}

/* ============================================
   CART SUMMARY
   ============================================ */

.cart-summary {
    position: sticky;
    top: 100px;
    padding: var(--space-xl);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.cart-summary__header {
    margin-bottom: var(--space-lg);
}

.cart-summary__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0;
}

.cart-summary__rental {
    padding: var(--space-md);
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-lg);
}

.cart-summary__rental-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.cart-summary__rental-dates {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.cart-summary__rental-days {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.cart-summary__breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-md);
}

.cart-summary__total span:first-child {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.cart-summary__total span:last-child {
    font-family: var(--font-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.cart-summary__note {
    font-family: var(--font-primary);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: var(--space-sm) 0 0;
    text-align: right;
}

.cart-summary__checkout {
    display: block;
    width: 100%;
    padding: var(--space-md);
    background-color: var(--color-text-primary);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
    margin-top: var(--space-lg);
}

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

/* ============================================
   MOBILE SUMMARY
   ============================================ */

.cart-summary-mobile {
    display: none;
}

.cart-summary-mobile__toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    margin-bottom: var(--space-md);
}

.cart-summary-mobile__toggle i {
    transition: transform var(--transition-base);
}

.cart-summary-mobile__toggle.active i {
    transform: rotate(180deg);
}

.cart-summary-mobile__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.cart-summary-mobile__content.active {
    max-height: 500px;
    margin-bottom: var(--space-md);
}

/* ============================================
   EMPTY CART
   ============================================ */

.cart-page__empty {
    text-align: center;
    padding: var(--space-5xl) 0;
}

.cart-page__empty i {
    font-size: 80px;
    color: var(--color-gray-300);
    margin-bottom: var(--space-lg);
}

.cart-page__empty h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
}

.cart-page__empty p {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-xl) 0;
}

.cart-page__continue-shopping {
    display: inline-block;
    padding: var(--space-md) var(--space-2xl);
    background-color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-decoration: none;
    transition: all var(--transition-base);
}

.cart-page__continue-shopping:hover {
    background-color: var(--color-primary);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1440px) {
    .cart-page__container {
        padding: 0 96px;
    }

    .cart-page__content {
        grid-template-columns: 1fr 350px;
    }
}

@media (max-width: 1024px) {
    .cart-page__container {
        padding: 0 48px;
    }

    .cart-page__content {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        display: none;
    }

    .cart-summary-mobile {
        display: block;
    }
}

@media (max-width: 768px) {
    .cart-page {
        padding: 60px 0;
    }

    .cart-page__container {
        padding: 0 24px;
    }

    .cart-page__title {
        font-size: var(--font-size-4xl);
    }

    .cart-rental-dates {
        padding: var(--space-md);
    }

    .cart-rental-dates__fields {
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: var(--space-md);
        padding: var(--space-md);
    }

    .cart-item__image {
        width: 80px;
        height: 80px;
    }

    .cart-item__remove {
        grid-column: 2;
        justify-self: end;
        margin-top: var(--space-sm);
    }

    .cart-item__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

@media (max-width: 375px) {
    .cart-page__container {
        padding: 0 16px;
    }
}


/* === pages/checkout.css === */
/**
 * Checkout Page Styles
 * Based on Figma Design: Desktop 2116:7671, Mobile 2116:7766
 * ALL VALUES ARE EXACT FROM FIGMA - NO APPROXIMATIONS
 */

/* ============================================
   Page Container
   ============================================ */
.woocommerce-checkout .page-header,
.woocommerce-checkout .entry-header,
.woocommerce-checkout .woocommerce-breadcrumb {
    display: none;
}
.checkout-page {
    background-color: #fcfdff;
    min-height: 100vh;
    padding: 60px 0 100px 0;
}

.checkout-form {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    gap: 60px;
    align-items: flex-start;
    justify-content: center;
}

/* ============================================
   LEFT COLUMN - Form Fields
   ============================================ */

.checkout-form__fields {
    flex: 1;
    max-width: 664px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.checkout-form__sections {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.checkout-form__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.29;
    color: #2c2c34;
    margin: 0;
}

/* Error Message Container */
.checkout-error {
    max-width: 664px;
    width: 100%;
    background: #fef2f2;
    border: 1px solid #b82d2d;
    padding: 12px 16px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #b82d2d;
    margin-top: 16px;
    border-radius: 0;
}

/* WooCommerce Error Messages - will be moved by JavaScript */
.checkout-page .woocommerce-error,
.checkout-page .woocommerce-NoticeGroup .woocommerce-error {
    width: 100%;
    background: #fef2f2;
    border: 1px solid #b82d2d;
    border-radius: 0;
    padding: 12px 16px;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: #b82d2d;
    margin: 0 0 16px 0;
    list-style: none;
}

.checkout-page .woocommerce-error::before {
    display: none;
}

.checkout-page .woocommerce-error li {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #b82d2d;
}

/* Section */
.checkout-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-section__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    margin: 0;
}

.checkout-section__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkout-section__row {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* ============================================
   Inputs - EXACT from Figma
   ============================================ */

.checkout-input {
    display: flex;
    flex-direction: column;
    width: 324px;
}

.checkout-input label {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.5;
    white-space: pre-wrap;
}

.checkout-input__wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 0.5px solid #2c2c34;
    position: relative;
}

.checkout-input__wrapper input {
    flex: 1;
    min-width: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    white-space: pre-wrap;
}

/* Select elements */
.checkout-input__wrapper select {
    flex: 1;
    min-width: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Error State for Input Fields */
.checkout-input--error label {
    color: #b82d2d !important;
    opacity: 1 !important;
}

.checkout-input--error .checkout-input__wrapper {
    border-bottom-color: #b82d2d !important;
}

.checkout-input--error .checkout-input__wrapper input,
.checkout-input--error .checkout-input__wrapper select {
    color: #b82d2d !important;
}

/* Select dropdown icon */
.checkout-input--select .checkout-input__wrapper i {
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    font-style: normal;
}

/* ============================================
   Divider Line - EXACT from Figma
   ============================================ */

.checkout-form__divider {
    height: 0;
    width: 100%;
    position: relative;
}

.checkout-form__divider::before {
    content: '';
    position: absolute;
    inset: -1px 0 0 0;
    border-top: 1px solid #2c2c34;
    opacity: 0.15;
}

/* ============================================
   Delivery Method - Radio Buttons
   ============================================ */

.checkout-delivery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 246px;
}

.checkout-radio {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.checkout-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-radio__box {
    width: 14px;
    height: 14px;
    border: 1px solid #2c2c34;
    border-radius: 22px;
    position: relative;
    flex-shrink: 0;
}

/* Radio checked state */
.checkout-radio input[type="radio"]:checked + .checkout-radio__box::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #2c2c34;
    border-radius: 50%;
}

/* Radio disabled state */
.checkout-radio--disabled .checkout-radio__box {
    opacity: 0.5;
}

.checkout-radio--disabled .checkout-radio__label {
    opacity: 0.5;
}

.checkout-radio i {
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: normal;
    color: #2c2c34;
    font-style: normal;
}

.checkout-radio__label {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    white-space: nowrap;
}

/* ============================================
   Warning Box - EXACT from Figma
   ============================================ */

.checkout-warning {
    background: #f8f9fb;
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 8px 16px;
    line-height: 2;
    color: #2c2c34;
    font-size: 14px;
}

.checkout-warning i {
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    font-style: normal;
    flex-shrink: 0;
}

.checkout-warning span {
    flex: 1;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    white-space: pre-wrap;
}

/* ============================================
   Checkbox - EXACT from Figma
   ============================================ */

.checkout-checkbox {
    display: flex;
    gap: 16px;
    align-items: flex-start; /* Changed from center to flex-start */
    cursor: pointer;
    margin-top: 32px; /* Add spacing after delivery method */
    padding: 16px 0; /* Add padding for better visibility */
}

.checkout-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-checkbox input[type="checkbox"]:checked + .checkout-checkbox__box {
    background: #2c2c34;
    border-color: #2c2c34;
    position: relative;
}

.checkout-checkbox input[type="checkbox"]:checked + .checkout-checkbox__box::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkout-checkbox__box {
    width: 22px;
    height: 22px;
    border: 1px solid #2c2c34;
    opacity: 1; /* Changed from 0.5 to 1 for better visibility */
    flex-shrink: 0;
    background: white;
    transition: all 0.3s ease;
}

.checkout-checkbox__label {
    flex: 1;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 1; /* Changed from 0.5 to 1 for better visibility */
}

.checkout-checkbox__label a {
    text-decoration: underline;
    color: #2c2c34;
    font-weight: 400; /* Make link more visible */
}

.checkout-checkbox__label a:hover {
    opacity: 0.7;
}

/* Error State for Terms Checkbox */
.checkout-checkbox--error .checkout-checkbox__box {
    border-color: #b82d2d !important;
}

.checkout-checkbox--error .checkout-checkbox__label {
    color: #b82d2d !important;
}

/* ============================================
   RIGHT COLUMN - Order Summary
   ============================================ */

.checkout-summary {
    width: 436px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.checkout-summary__wrapper {
    border: 0.5px solid rgba(44, 44, 52, 0.15);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
}

.checkout-summary__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    margin: 0;
}

/* Rental Period - EXACT from Figma */
.checkout-summary__rental {
    background: rgba(44, 44, 52, 0.03);
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
}

.checkout-summary__rental-header {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #2c2c34;
}

.checkout-summary__rental-header i {
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: normal;
    color: #2c2c34;
    opacity: 0.5;
    font-style: normal;
}

.checkout-summary__rental-header span {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 2;
    opacity: 0.5;
}

.checkout-summary__rental-body {
    display: flex;
    align-items: flex-start;
    line-height: 2;
    font-size: 14px;
}

.checkout-summary__rental-dates {
    flex: 1;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    white-space: pre-wrap;
}

.checkout-summary__rental-days {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    flex-shrink: 0;
}

/* Summary Rows */
.checkout-summary__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    line-height: 2;
    color: #2c2c34;
    font-size: 14px;
}

.checkout-summary__row span:first-child {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    opacity: 0.5;
}

.checkout-summary__row span:last-child {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

/* Total Wrapper - EXACT from Figma */
.checkout-summary__total-wrapper {
    background: #f8f9fb;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
}

.checkout-summary__divider {
    height: 0;
    width: 100%;
    position: relative;
}

.checkout-summary__divider::before {
    content: '';
    position: absolute;
    inset: -0.5px 0 0 0;
    border-top: 0.5px solid #2c2c34;
    opacity: 0.15;
}

.checkout-summary__total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.checkout-summary__total > span {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.5;
}

.checkout-summary__total-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.checkout-summary__total-price {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.27;
    color: #2c2c34;
    text-align: right;
}

.checkout-summary__total-note {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: rgba(44, 44, 52, 0.5);
}

/* ============================================
   Place Order Button - EXACT from Figma
   ============================================ */

.checkout-summary__submit {
    background: #2c2c34;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    overflow: clip;
    padding: 4px 24px;
    width: 135px;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    color: #fcfdff;
}

.checkout-summary__submit:hover {
    background: #1a1a1f;
}

/* ============================================
   MOBILE STYLES - 375px
   Exact from Figma 2116:7766
   ============================================ */

@media (max-width: 1024px) {
    /* Page container mobile */
    .checkout-page {
        padding: 108px 0 100px 0;
    }

    /* Form container mobile - switch to column */
    .checkout-form {
        flex-direction: column;
        padding: 0 16px;
        gap: 40px;
    }

    /* Left column mobile - full width */
    .checkout-form__fields {
        width: 100%;
        max-width: 100%;
        gap: 32px;
    }

    /* Title mobile size */
    .checkout-form__title {
        font-size: 20px;
        line-height: 1.29;
    }

    /* Sections gap mobile */
    .checkout-form__sections {
        gap: 32px;
    }

    /* Mobile: Single column layout */
    .checkout-section__row {
        flex-direction: column;
        justify-content: flex-start;
        gap: 16px;
        width: 100%;
    }

    /* All inputs full width on mobile */
    .checkout-input {
        width: 100%;
    }

    /* Divider line mobile */
    .checkout-form__divider {
        width: 100%;
        margin: 0;
    }

    /* Delivery options full width */
    .checkout-delivery {
        width: 100%;
    }

    /* Warning box mobile */
    .checkout-warning {
        width: 100%;
    }

    /* Terms checkbox mobile */
    .checkout-checkbox {
        width: 100%;
        margin-top: 24px;
        padding: 16px 0;
    }

    .checkout-checkbox__label {
        font-size: 14px;
        line-height: 2;
    }

    /* Order Summary mobile - full width, below form */
    .checkout-summary {
        position: static;
        width: 100%;
        max-width: 100%;
        top: auto;
        gap: 24px;
    }

    /* Wrapper mobile */
    .checkout-summary__wrapper {
        border: 0.5px solid rgba(44, 44, 52, 0.15);
        padding: 16px 24px;
        gap: 16px;
    }

    /* Total wrapper mobile */
    .checkout-summary__total-wrapper {
        padding: 16px 24px;
        gap: 16px;
    }

    /* Button full width mobile */
    .checkout-summary__submit {
        width: 100%;
        padding: 4px 24px;
    }
}

/* ============================================
   Tablet & Small Desktop Adjustments
   ============================================ */

@media (max-width: 1440px) and (min-width: 1025px) {
    .checkout-form {
        padding: 0 32px;
        gap: 40px;
    }

    .checkout-form__fields {
        max-width: 600px;
    }

    .checkout-summary {
        width: 380px;
    }
}

@media (max-width: 768px) {
    .checkout-page {
        padding: 80px 0 80px 0;
    }

    .checkout-form {
        padding: 0 16px;
        gap: 32px;
    }

    .checkout-form__title {
        font-size: 18px;
    }

    .checkout-section__title {
        font-size: 13px;
    }
}


/* === pages/thankyou.css === */
/**
 * Thank You Page Styles
 * Based on Figma Design: Desktop 2235:6584, Mobile 2235:6699
 * ALL VALUES ARE EXACT FROM FIGMA - NO APPROXIMATIONS
 */

/* ============================================
   Page Container
   ============================================ */
.woocommerce-order-received .page-header,
.woocommerce-order-received .entry-header,
.woocommerce-order-received .woocommerce-breadcrumb {
    display: none;
}

.thankyou-page {
    background-color: #fcfdff;
    min-height: 100vh;
    padding: 70px 48px 100px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================
   Hero Section - Icon and Title
   ============================================ */

.thankyou-hero {
    width: 100%;
    max-width: 1344px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    margin-bottom: 48px;
}

.thankyou-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.thankyou-hero__icon svg {
    width: 84px;
    height: 84px;
}

.thankyou-hero__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.thankyou-hero__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.28;
    color: #2c2c34;
    margin: 0;
}

.thankyou-hero__message {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin: 0;
}

.thankyou-hero__message strong {
    font-weight: 700;
}

/* ============================================
   Content Layout - Two Columns
   ============================================ */

.thankyou-content {
    width: 100%;
    max-width: 1344px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.thankyou-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 891px;
}

.thankyou-sidebar {
    width: 436px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================
   Order Info Bar
   ============================================ */

.thankyou-order-info {
    background: #f8f9fb;
    display: flex;
    gap: 128px;
    align-items: center;
    padding: 16px 24px;
    width: 100%;
    max-width: 1344px;
    margin-bottom: 16px;
}

.thankyou-order-info__item {
    display: flex;
    flex-direction: column;
}

.thankyou-order-info__label {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.5;
}

.thankyou-order-info__value {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.29;
    color: #2c2c34;
}

/* ============================================
   Product Items
   ============================================ */

.thankyou-products {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.thankyou-product {
    border: 0.5px solid rgba(44, 44, 52, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}

.thankyou-product__image {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.thankyou-product__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thankyou-product__placeholder {
    width: 100%;
    height: 100%;
    background: #f8f9fb;
}

.thankyou-product__details {
    flex: 1;
    display: flex;
    gap: 128px;
    align-items: center;
    padding-left: 24px;
}

.thankyou-product__info {
    display: flex;
    flex-direction: column;
}

.thankyou-product__label {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.5;
}

.thankyou-product__name,
.thankyou-product__value {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

.thankyou-product__total {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.thankyou-product__price {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

/* ============================================
   Rental Period Box
   ============================================ */

.thankyou-rental {
    background: rgba(44, 44, 52, 0.03);
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
}

.thankyou-rental__header {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #2c2c34;
}

.thankyou-rental__header i {
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #2c2c34;
    opacity: 0.5;
}

.thankyou-rental__header span {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 2;
    opacity: 0.5;
}

.thankyou-rental__body {
    display: flex;
    align-items: flex-start;
    line-height: 2;
    font-size: 14px;
}

.thankyou-rental__dates {
    flex: 1;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

.thankyou-rental__days {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    flex-shrink: 0;
}

/* ============================================
   Details Box - Shipping, Addresses, VAT
   ============================================ */

.thankyou-details {
    border: 0.5px solid rgba(44, 44, 52, 0.15);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
}

.thankyou-details__section {
    display: flex;
    flex-direction: column;
}

.thankyou-details__label {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.5;
}

.thankyou-details__value {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

.thankyou-details__shipping {
    display: flex;
    gap: 8px;
    align-items: center;
}

.thankyou-details__shipping i {
    font-family: 'Font Awesome 6 Pro', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #2c2c34;
}

.thankyou-details__shipping span {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

.thankyou-details__divider {
    height: 0;
    width: 100%;
    position: relative;
}

.thankyou-details__divider::before {
    content: '';
    position: absolute;
    inset: -0.5px 0 0 0;
    border-top: 0.5px solid rgba(44, 44, 52, 0.15);
}

.thankyou-details__addresses {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.thankyou-details__address-col {
    display: flex;
    flex-direction: column;
}

.thankyou-details__content {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

.thankyou-details__content p {
    margin: 0;
}

/* ============================================
   Order Totals Box
   ============================================ */

.thankyou-totals {
    background: #f8f9fb;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
}

.thankyou-totals__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.thankyou-totals__label {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.5;
}

.thankyou-totals__value {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: #2c2c34;
}

.thankyou-totals__divider {
    height: 0;
    width: 100%;
    position: relative;
}

.thankyou-totals__divider::before {
    content: '';
    position: absolute;
    inset: -0.5px 0 0 0;
    border-top: 0.5px solid rgba(44, 44, 52, 0.15);
}

.thankyou-totals__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.thankyou-totals__amount {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.27;
    color: #2c2c34;
    text-align: right;
}

.thankyou-totals__vat {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2;
    color: rgba(44, 44, 52, 0.5);
}

/* ============================================
   CTA Button
   ============================================ */

.thankyou-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4px 24px;
    background-color: #2c2c34;
    color: #fcfdff;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    text-decoration: none;
    margin-top: 48px;
    transition: background-color 0.2s ease;
}

.thankyou-btn:hover {
    background-color: #1a1a1f;
    color: #fcfdff;
}

/* ============================================
   MOBILE STYLES - 375px
   Exact from Figma 2235:6699
   ============================================ */

@media (max-width: 1024px) {
    .thankyou-page {
        padding: 32px 16px 60px 16px;
    }

    .thankyou-hero {
        width: 343px;
        max-width: 100%;
    }

    .thankyou-content {
        flex-direction: column;
        width: 343px;
        max-width: 100%;
        gap: 16px;
    }

    .thankyou-main {
        width: 100%;
        max-width: 100%;
    }

    .thankyou-sidebar {
        width: 100%;
    }

    /* Order Info - Stack vertically on mobile */
    .thankyou-order-info {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    /* Product Items - Stack vertically */
    .thankyou-product {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .thankyou-product__details {
        flex-direction: column;
        gap: 16px;
        padding-left: 0;
        width: 100%;
    }

    .thankyou-product__total {
        width: 100%;
    }

    /* Details - Single column addresses */
    .thankyou-details__addresses {
        flex-direction: column;
        gap: 16px;
    }

    /* Button full width */
    .thankyou-btn {
        width: 100%;
        max-width: 343px;
    }
}

@media (max-width: 768px) {
    .thankyou-hero__title {
        font-size: 28px;
    }
}

@media (max-width: 375px) {
    .thankyou-page {
        padding: 24px 16px 60px 16px;
    }

    .thankyou-hero,
    .thankyou-content {
        width: 100%;
    }
}


/* === pages/auth.css === */
/**
 * Authentication Pages Styles (Login & Register)
 * Styles based on Figma design with exact values
 *
 * Desktop: 1440px - Container width 438px, Button width 135px
 * Mobile: 375px - Container width 343px, Button full width
 *
 * @package Bonevents
 */

/* ============================================
   AUTH PAGE CONTAINER
   ============================================ */

.auth-page {
  min-height: calc(100vh - 122px); /* Subtract header height */
  background: #fcfdff; /* Per Figma */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.auth-page__container {
  width: 100%;
  max-width: 438px; /* Per Figma - Desktop */
  margin: 0 auto;
}

/* ============================================
   AUTH FORM WRAPPER
   ============================================ */

.auth-form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* Per Figma */
}

/* ============================================
   FORM HEADER
   ============================================ */

.auth-form__header {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Per Figma */
  text-align: center;
  width: 100%;
}

.auth-form__title {
  font-family: var(--font-primary); /* Outfit */
  font-size: 36px; /* Per Figma - H2 */
  font-weight: 400; /* Regular */
  line-height: 1.28; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  margin: 0;
}

.auth-form__subtitle {
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma - Paragraph */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  opacity: 0.8; /* Per Figma */
  margin: 0;
}

/* ============================================
   FORM
   ============================================ */

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px; /* Gap between fields group and button */
}

.auth-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Per Figma - gap between inputs */
}

/* ============================================
   INPUT FIELDS
   ============================================ */

.auth-input {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.auth-input__label {
  font-family: var(--font-primary); /* Outfit */
  font-size: 10px; /* Per Figma */
  font-weight: 400; /* Regular */
  line-height: 2; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  opacity: 0.5; /* Per Figma */
  margin-bottom: 0;
}

.auth-input__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px; /* Gap for icon */
  padding: 4px 0; /* Per Figma - py-[4px] */
  border-bottom: 0.5px solid #2c2c34; /* Per Figma - only bottom border, 0.5px */
  transition: border-color 0.3s ease;
}

.auth-input__wrapper:focus-within {
  border-bottom-color: rgba(44, 44, 52, 0.8); /* Darker on focus */
}

.auth-input__field {
  flex: 1;
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
}

.auth-input__field::placeholder {
  color: rgba(44, 44, 52, 0.5);
}

/* Password Field with Toggle */
.auth-input__wrapper--password {
  position: relative;
}

.auth-input__toggle-password {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #2c2c34;
  font-size: 14px; /* Per Figma */
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.auth-input__toggle-password:hover {
  opacity: 0.7;
}

/* Input Group (for password + forgot link) */
.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Per Figma */
}

/* ============================================
   FORGOT PASSWORD LINK
   ============================================ */

.auth-form__forgot-link {
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: #2c2c34; /* Per Figma */
  text-decoration: underline; /* Per Figma */
  align-self: flex-end;
  transition: opacity 0.3s ease;
}

.auth-form__forgot-link:hover {
  opacity: 0.7;
  color: #2c2c34;
}

/* ============================================
   CHECKBOX (Privacy Policy)
   ============================================ */

.auth-checkbox {
  display: flex;
  align-items: center;
  gap: 16px; /* Per Figma */
}

.auth-checkbox__input {
  appearance: none;
  width: 22px; /* Per Figma */
  height: 22px; /* Per Figma */
  border: 1px solid #2c2c34; /* Per Figma */
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.auth-checkbox__input:checked {
  background: #2c2c34; /* Per Figma */
  border-color: #2c2c34;
}

.auth-checkbox__input:checked::before {
  content: '\f00c'; /* Font Awesome check icon */
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300; /* Light */
  font-size: 14px; /* Per Figma */
  color: #fcfdff; /* Per Figma */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.auth-checkbox__label {
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: rgba(44, 44, 52, 0.8); /* Per Figma */
  margin: 0;
  cursor: pointer;
}

.auth-checkbox__link {
  color: #2c2c34; /* Per Figma */
  text-decoration: underline; /* Per Figma */
  font-weight: 300; /* Light */
  transition: opacity 0.3s ease;
}

.auth-checkbox__link:hover {
  opacity: 0.7;
  color: #2c2c34;
}

/* ============================================
   SUBMIT BUTTON
   ============================================ */

.auth-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 135px; /* Per Figma - Desktop */
  padding: 4px 24px; /* Per Figma */
  background: #2c2c34; /* Per Figma */
  color: #fcfdff; /* Per Figma */
  font-family: var(--font-primary); /* Outfit */
  font-size: 16px; /* Per Figma - Buttons */
  font-weight: 400; /* Regular */
  line-height: 2; /* Per Figma */
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  align-self: center; /* Center button */
}

.auth-form__submit:hover {
  background: #1a1a1f; /* Darker on hover */
  color: #fcfdff;
}

/* ============================================
   FORM FOOTER (Sign up/Sign in links)
   ============================================ */

.auth-form__footer {
  display: flex;
  align-items: center;
  gap: 4px; /* Per Figma */
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
}

.auth-form__footer-text {
  color: #2c2c34; /* Per Figma */
  opacity: 0.8; /* Per Figma */
}

.auth-form__footer-link {
  color: #2c2c34; /* Per Figma */
  text-decoration: underline; /* Per Figma */
  transition: opacity 0.3s ease;
}

.auth-form__footer-link:hover {
  opacity: 0.7;
  color: #2c2c34;
}

/* ============================================
   NOTES (for password generation message)
   ============================================ */

.auth-form__note {
  font-family: var(--font-primary); /* Outfit */
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2; /* Per Figma */
  color: rgba(44, 44, 52, 0.8); /* Per Figma */
  margin: 0;
}

/* ============================================
   WOOCOMMERCE MESSAGES (Errors, Success)
   ============================================ */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 0;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
}

.woocommerce-error {
  background: rgba(184, 45, 45, 0.1);
  color: #b82d2d;
  border: 1px solid rgba(184, 45, 45, 0.2);
}

.woocommerce-message {
  background: rgba(52, 184, 45, 0.1);
  color: #34b82d;
  border: 1px solid rgba(52, 184, 45, 0.2);
}

.woocommerce-info {
  background: rgba(44, 44, 52, 0.05);
  color: #2c2c34;
  border: 1px solid rgba(44, 44, 52, 0.15);
}

/* ============================================
   FORGOT PASSWORD SPECIFIC STYLES
   ============================================ */

/* Forgot password button stays 135px on all breakpoints per Figma */
.auth-form--forgot .auth-form__submit {
  width: 135px; /* Per Figma - stays 135px on mobile too */
}

/* ============================================
   MOBILE RESPONSIVE (375px)
   ============================================ */

@media (max-width: 767px) {
  .auth-page {
    padding: 32px 16px;
  }

  .auth-page__container {
    max-width: 343px; /* Per Figma - Mobile */
  }

  .auth-form__submit {
    width: 100%; /* Per Figma - Mobile full width for login/register */
  }

  /* Forgot password button exception - stays 135px */
  .auth-form--forgot .auth-form__submit {
    width: 135px; /* Per Figma - specific for forgot password */
  }
}

/* ============================================
   DESKTOP LARGE (1440px+)
   ============================================ */

@media (min-width: 768px) {
  .auth-page {
    padding: 120px 48px; /* More space on desktop */
  }
}

/* ============================================
   ANTI-SPAM HONEYPOT FIELD
   Hidden from users but visible to bots
   Using clip and position instead of display:none
   to avoid bot detection
   ============================================ */

.auth-form__security {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* === pages/404.css === */
/**
 * 404 Error Page Styles
 * Based on Figma design: 2235-6559 (desktop), 2235-6690 (mobile)
 */

.error-page {
    min-height: calc(100vh - var(--header-height, 122px) - var(--footer-height, 400px));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-snow-white, #fcfdff);
}

.error-page__content {
    width: 100%;
    max-width: 438px;
    padding: 48px 24px;
}

.error-page__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.error-page__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    color: var(--color-black, #2c2c34);
    width: 100%;
}

.error-page__code {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-weight: 400;
    font-size: 164px;
    line-height: 1;
    margin: 0;
}

.error-page__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.error-page__title {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.27;
    opacity: 0.8;
    margin: 0;
}

.error-page__description {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-weight: 300;
    font-size: 14px;
    line-height: 2;
    opacity: 0.8;
    margin: 0;
}

.error-page__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4px 24px;
    background-color: var(--color-black, #2c2c34);
    color: var(--color-snow-white, #fcfdff);
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.error-page__btn:hover {
    opacity: 0.9;
    color: var(--color-snow-white, #fcfdff);
}

/* Mobile styles */
@media (max-width: 767px) {
    .error-page__content {
        max-width: 343px;
    }

    .error-page__code {
        font-size: 120px;
    }

    .error-page__btn {
        width: 100%;
    }
}

@media (max-width: 375px) {
    .error-page__code {
        font-size: 100px;
    }
}


/* === pages/event-organization.css === */
/**
 * Event Organization Page Styles
 * Full-service events / Turnkey Events landing page
 *
 * @package Bonevents
 */

/* ============================================
   1. Landing Hero Section
   Structure: Image on top, content below in two columns
   ============================================ */
.section--landing-hero {
    padding: 0;
    background-color: var(--color-bg-light);
}

/* Hero Image - Full width at top */
.landing-hero__image {
    width: 100%;
    height: 480px;
    overflow: hidden;
}

.landing-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-hero__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
}

/* Block 2: Hero Title - full width container */
.landing-hero__title-block {
    padding-top: 64px;
}

.landing-hero__title {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 600px;
    margin-bottom: 24px;
}

.landing-hero__decorative {
    font-family: var(--font-accent);
    font-size: 128px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text);
}

.landing-hero__heading {
    font-family: var(--font-primary);
    font-size: 128px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
    margin-top: -20px;
}

.landing-hero__subtitle {
    font-family: var(--font-accent);
    font-size: 36px;
    font-weight: 400;
    color: var(--color-text);
    max-width: 600px;
    margin: 0;
}

/* Block 3: Hero Content - 50% width, aligned right */
.landing-hero__content-block {
    width: 50%;
    max-width: 413px;
    margin-left: 50%;
    padding-bottom: 80px;
}

.landing-hero__description {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin-bottom: 32px;
    max-width: 325px;
}

.landing-hero__buttons {
    display: flex;
    gap: 24px;
    align-items: center;
}

/* Landing Hero Button Overrides - exact Figma values */
.landing-hero__buttons .btn--primary {
    background-color: #2c2c34;
    color: #fcfdff;
    border: none;
    border-radius: 0;
    padding: 4px 24px;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
}

.landing-hero__buttons .btn--primary:hover {
    background-color: #1a1a1f;
}

/* Secondary button - text only, no background, no underline */
.landing-hero__buttons .btn--secondary {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0;
    color: #2c2c34;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
}

.landing-hero__buttons .btn--secondary:hover {
    background: transparent;
    opacity: 0.7;
}

/* ============================================
   2. Events Slider Section
   Figma: Full-width section with horizontal scroll
   Shows 3 full cards + partial 4th card
   Header in container, track starts at container edge
   Right arrow only initially, left arrow appears after scroll
   ============================================ */
.section--events-slider {
    padding: 80px 0;
    overflow: hidden;
    width: 100%;
}

.events-slider__header {
    margin-bottom: 16px;
}

.events-slider__title {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    color: #2c2c34;
    margin-bottom: 16px;
}

.events-slider__subtitle {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
}

/* Wrapper constrains visible area to container width */
.events-slider__wrapper {
    position: relative;
    width: 100%;
    max-width: var(--container-2xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    /* No padding-right - content extends beyond and gets clipped */
    overflow: hidden;
}

/* Track uses transform to slide, extends beyond wrapper */
.events-slider__track {
    display: flex;
    gap: 16px;
    transition: transform 0.4s ease;
    /* Prevent flex items from shrinking */
    flex-shrink: 0;
}

/* Each slide has fixed width - must not shrink */
.events-slider__slide {
    flex: 0 0 390px;
    min-width: 390px;
    width: 390px;
    flex-shrink: 0;
}

/* Navigation arrows - Figma: 48x48, positioned over track */
.events-slider__nav {
    position: absolute;
    top: 25%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background: #fcfdff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

/* Prev arrow - hidden initially */
.events-slider__nav--prev {
    left: 32px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.events-slider__nav--prev.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Next arrow - positioned at right edge of wrapper, over partial card */
.events-slider__nav--next {
    right: 32px;
}

.events-slider__nav--next.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.events-slider__nav:hover {
    background: #2c2c34;
    color: #fcfdff;
    border-color: #2c2c34;
}

.events-slider__nav i {
    font-size: 36px;
    color: inherit;
}

/* Event Card - Figma values */
.event-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image - Figma: 390x392, NO border-radius */
.event-card__image {
    width: 390px;
    height: 392px;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 24px;
    background: #f5f5f5;
}

.event-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

/* Title - Figma: Outfit Regular 24px, line-height 1.27 */
.event-card__title {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2c2c34;
    margin-bottom: 16px;
}

/* Description - Figma: Outfit Light 14px, line-height 2, opacity 80% */
.event-card__description {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    max-width: 211px;
}

/* ============================================
   3. Services Grid Section
   Figma: "One contractor" process flow
   ============================================ */
.section--services-grid {
    padding: 80px 0;
    overflow: hidden;
}

/* Title - Figma: Playwrite italic, 36px */
.services-grid__title {
    font-family: var(--font-accent);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.4;
    max-width: 450px;
    margin-bottom: 64px;
    color: #2c2c34;
}

.services-grid__wrapper {
    position: relative;
    max-width: 1280px; /* Leave space for vertical connector */
}

.services-grid__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.services-grid__row--top {
    margin-bottom: 64px;
}

.services-grid__item {
    display: flex;
    flex-direction: column;
}

/* Icon - Figma: 32px thin icons */
.services-grid__icon {
    font-size: 32px;
    height: 32px;
    color: #2c2c34;
    margin-bottom: 16px;
}

.services-grid__icon i {
    display: block;
}

/* Title row with connector */
.services-grid__title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Item title - Figma: Outfit 20px, weight 400 */
.services-grid__item-title {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #2c2c34;
    margin-bottom: 0;
}

/* Item description - Figma: Outfit Light 14px, opacity 80% */
.services-grid__item-desc {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin-top: 8px;
    margin-bottom: 0;
}

/* Horizontal connector arrows */
.services-grid__connector {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-grid__connector svg {
    width: 97px;
    height: 27px;
    flex-shrink: 0;
}

/* Vertical connector - SVG image on the right */
.services-grid__vertical-connector {
    position: absolute;
    right: -129px;
    top: 56px;
    width: 129px;
}

.services-grid__vertical-connector img {
    display: block;
}

/* ============================================
   4. No Templates Section
   Figma: Content on left, gallery full-width below
   ============================================ */
.section--no-templates {
    padding: 80px 0;
}

/* Wrapper - vertical stack, content then gallery */
.no-templates__wrapper {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* Content area - left aligned in container */
.no-templates__content {
    max-width: 453px;
}

/* Title - Figma: Outfit Regular 36px, "templates" in red */
.no-templates__title {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    color: #2c2c34;
    margin-bottom: 24px;
}

/* Highlighted text in title (span) - red color */
.no-templates__title span {
    color: #b82d2d;
}

/* Description - Figma: Outfit Light 14px, line-height 2, opacity 80% */
.no-templates__description {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin-bottom: 48px;
    max-width: 324px;
}

/* Features list - Figma: gap 48px, width 324px */
.no-templates__features {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 324px;
}

/* Single feature item */
.no-templates__feature {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Feature header - number + title, vertical stack */
.no-templates__feature-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Number circle - Figma: 24x24, dark bg, white text */
.no-templates__feature-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2c2c34;
    color: #fff;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
}

/* Feature title - Figma: Outfit Regular 24px */
.no-templates__feature-title {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2c2c34;
}

/* Feature description - Figma: Outfit Light 14px, opacity 80% */
.no-templates__feature-desc {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
}

/* Gallery - full width below content */
.no-templates__gallery {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 450px; /* Extra height for scaled featured image */
    overflow: hidden;
}

.no-templates__gallery-track {
    position: absolute;
    bottom: 30px;
    left: 0;
    display: flex;
    gap: 0; /* Using margin instead */
    align-items: flex-end;
    transition: transform 0.5s ease-out;
}

/* All items same layout size - use transform for visual scaling */
.no-templates__gallery-item {
    flex-shrink: 0;
    width: 389px;
    height: 296px;
    overflow: visible;
    transition: transform 0.5s ease-out, margin 0.5s ease-out;
    transform-origin: bottom center;
    margin: 0 24px; /* Half of 48px gap on each side */
    will-change: transform, margin;
}

.no-templates__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured image - appears larger via transform */
/* Margin = 24px base + 145.5px scale compensation = 169.5px */
.no-templates__gallery-item--featured {
    transform: scale(1.748, 1.324); /* 680/389 = 1.748, 392/296 = 1.324 */
    z-index: 10;
    margin: 0 169.5px;
}

.no-templates__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
}

/* Navigation arrows - 48x48 white circles */
.no-templates__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #fcfdff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.no-templates__nav--prev {
    left: 80px;
}

.no-templates__nav--next {
    right: 80px;
}

.no-templates__nav:hover {
    background: #2c2c34;
    color: #fcfdff;
}

.no-templates__nav i {
    font-size: 24px;
    color: inherit;
}

/* ============================================
   5. Why Choose Us Section
   ============================================ */
.section--why-choose-us {
    padding: 80px 0;
}

.why-choose-us__wrapper {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.why-choose-us__header {
    text-align: left;
    max-width: calc((100% - 48px) / 3);
    margin: 0 auto;
}

.why-choose-us__title {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    margin-bottom: 16px;
}

.why-choose-us__subtitle {
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    opacity: 0.8;
    max-width: 400px;
}

.why-choose-us__description {
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    opacity: 0.8;
    margin-top: 16px;
}

.why-choose-us__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 24px;
}

.why-choose-us__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.why-choose-us__icon {
    font-size: 32px;
    color: var(--color-text);
}

.why-choose-us__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.why-choose-us__item-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
}

.why-choose-us__item-desc {
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    opacity: 0.8;
}

/* ============================================
   6. Stats Circles Section
   ============================================ */
.section--stats-circles {
    padding: 120px 0;
    overflow: hidden;
}

.stats-circles__wrapper {
    position: relative;
    min-height: 700px;
    max-width: 1230px;
    margin: 0 auto;
}

/* Height based on number of circles */
.stats-circles__wrapper--count-2 {
    min-height: 500px;
}

.stats-circles__wrapper--count-3 {
    min-height: 700px;
}

.stats-circles__item {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Position: left (gray/medium circle with 7+) - text on LEFT, circle on RIGHT */
.stats-circles__item--left {
    left: 0;
    top: 220px;
    z-index: 2;
    flex-direction: row;
}
.stats-circles__wrapper--count-2 .stats-circles__item--left {
    top:0;
}

.stats-circles__item--left .stats-circles__info {
    order: -1; /* Move info before circle */
}

/* Position: top-right (outline/large circle with 96+) - circle on LEFT, text on RIGHT */
.stats-circles__item--top-right {
    right: 0;
    top: 0;
    z-index: 1;
    flex-direction: row;
}

.stats-circles__item--top-right .stats-circles__info {
    text-align: left;
}

/* Position: bottom-right (dark/small circle with 256+) - circle on LEFT, text on RIGHT */
.stats-circles__item--bottom-right {
    right: 120px;
    top: 400px;
    z-index: 3;
    flex-direction: row;
}

.stats-circles__wrapper--count-2 .stats-circles__item--bottom-right {
    top: 200px;
}

.stats-circles__item--bottom-right .stats-circles__info {
    text-align: left;
}

/* Circle base styles */
.stats-circles__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    /* Default size - overridden by size modifiers */
    width: 438px;
    height: 438px;
}

/* Circle style: filled gray */
.stats-circles__circle--filled-gray {
    background: #E8E8E8;
    color: #2C2C34;
}

/* Circle style: outline only */
.stats-circles__circle--outline {
    background: transparent;
    border: 1px solid #D0D0D0;
    color: #2C2C34;
}

/* Circle style: filled dark */
.stats-circles__circle--filled-dark {
    background: #2C2C34;
    color: #FFFFFF;
}

/* Circle sizes */
.stats-circles__circle--small {
    width: 324px;
    height: 324px;
}

.stats-circles__circle--small .stats-circles__number {
    font-size: 80px;
}

.stats-circles__circle--medium {
    width: 438px;
    height: 438px;
}

.stats-circles__circle--medium .stats-circles__number {
    font-size: 100px;
}

.stats-circles__circle--large {
    width: 438px;
    height: 438px;
}

.stats-circles__circle--large .stats-circles__number {
    font-size: 128px;
}

.stats-circles__number {
    font-size: 128px;
    font-weight: 400;
    line-height: 1;
}

.stats-circles__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 211px;
    margin-top: 100px;
}

.stats-circles__label {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #2C2C34;
}

.stats-circles__line {
    height: 1px;
    background: #2C2C34;
    opacity: .2;
}

/* RIGHT (large, small) - line shifts LEFT towards circle */
.stats-circles__item--top-right .stats-circles__line,
.stats-circles__item--bottom-right .stats-circles__line {
    transform: translateX(-40%);
}

/* Line width based on circle size */
.stats-circles__item--large .stats-circles__line {
    width: 266px;
}

.stats-circles__item--medium .stats-circles__line {
    width: 330px;
}

.stats-circles__item--small .stats-circles__line {
    width: 207px;
}

.stats-circles__description {
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2C2C34;
    opacity: 0.8;
}

/* ============================================
   7. Process Steps Section
   ============================================ */
.section--process-steps {
    padding: 80px 0;
}

.process-steps__header {
    max-width: 400px;
    margin-bottom: 64px;
}

.process-steps__title {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    margin-bottom: 16px;
}

.process-steps__subtitle {
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
}

.process-steps__grid {
    position: relative;
    max-width: 1128px; /* Leave space for vertical connector (280px) */
}

.process-steps__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.process-steps__row--top {
    margin-bottom: 48px;
}

.process-steps__item {
    display: flex;
    flex-direction: column;
}

.process-steps__icon {
    font-size: 32px;
    height: 32px;
    color: var(--color-text);
    margin-bottom: 16px;
}

/* Title row with connector */
.process-steps__title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.process-steps__item-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.28;
    margin-bottom: 0;
}

/* Arrow stretches to fill remaining space in title row */
.process-steps__title-row .process-steps__connector {
    flex: 1;
    justify-content: center;
}

.process-steps__item-desc {
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin-top: 8px;
    margin-bottom: 0;
}

/* Connector - fixed width 129px */
.process-steps__connector {
    display: flex;
    align-items: center;
    width: 129px;
    flex-shrink: 0;
}

.process-steps__connector svg {
    width: 129px;
    height: 27px;
}

.process-steps__vertical-connector {
    position: absolute;
    left: 100%; /* Position at right edge of grid */
    top: 80px;
    width: 280px;
}

/* ============================================
   8. Testimonials Slider - Figma Design
   ============================================ */
.section--testimonials .testimonials-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 50px 60px 0 60px; /* Top padding for raised card, side padding for arrows */
}

.section--testimonials .testimonials-slider__wrapper {
    overflow: hidden;
    flex: 1;
    /* Show exactly 3 cards: 3*362px + 2*24px gaps = 1134px */
    max-width: 1134px;
    /* Extra padding at top for featured card that's raised 40px */
    padding-top: 40px;
}

.section--testimonials .testimonials-slider__track {
    display: flex;
    gap: 24px;
    justify-content: flex-start;
    transition: transform 0.5s ease-out;
}

/* Navigation arrows - 48px, white bg, fully rounded per Figma */
.section--testimonials .testimonials-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    background: #fcfdff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    z-index: 10;
}

.section--testimonials .testimonials-slider__nav--prev {
    left: 0;
}

.section--testimonials .testimonials-slider__nav--next {
    right: 0;
}

.section--testimonials .testimonials-slider__nav i {
    font-size: 24px;
    color: #2C2C34;
}

.section--testimonials .testimonials-slider__nav:hover {
    opacity: 0.7;
}

/* Testimonial Card - Figma Design: NO border, NO border-radius */
/* Override sections.css styles with higher specificity */
.section--testimonials .testimonial-card {
    flex: 0 0 362px;
    padding: 16px;
    background: rgba(44, 44, 52, 0.03);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Featured card - 40px higher per Figma (top: 5874px vs 5914px) */
.section--testimonials .testimonial-card--featured {
    transform: translateY(-40px);
}

/* Author section - override sections.css border-top */
.section--testimonials .testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: none !important;
    padding-top: 0 !important;
}

.section--testimonials .testimonial-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.section--testimonials .testimonial-card__avatar--placeholder {
    background: rgba(44, 44, 52, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2C2C34;
}

/* Author name - Outfit Regular 20px */
.section--testimonials .testimonial-card__author-name {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.29;
    color: #2C2C34;
    margin-bottom: 0;
}

/* Location - Outfit Light 12px, opacity 50% */
.section--testimonials .testimonial-card__author-role {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 300;
    line-height: 2;
    color: #2C2C34;
    opacity: 0.5;
}

/* Stars - Font Awesome, 14px, gap 8px */
.section--testimonials .testimonial-card__rating {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.section--testimonials .testimonial-card__rating i {
    font-size: 14px;
    color: #E0E0E0;
}

/* Stars - SVG images */
.section--testimonials .testimonial-card__star {
    width: 15px;
    height: 15px;
}

.section--testimonials .testimonial-card__star--empty {
    opacity: 0.2;
}

/* Separator line - between stars and content */
.section--testimonials .testimonial-card__separator {
    height: 1px;
    background: rgba(44, 44, 52, 0.1);
}

/* Content - Outfit Light 14px, line-height 2, opacity 80% */
.section--testimonials .testimonial-card__content {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2C2C34;
    opacity: 0.8;
    margin: 0;
}

/* Quote icon - SVG image, top right */
.section--testimonials .testimonial-card__quote-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: auto;
    height: auto;
    margin-bottom: 0;
}

.section--testimonials .testimonial-card__quote-icon img {
    width: 38px;
    height: 25px;
}

/* ============================================
   RESPONSIVE - Tablet
   ============================================ */
@media (max-width: 1024px) {
    .landing-hero__image {
        height: 350px;
    }

    .landing-hero__decorative,
    .landing-hero__heading {
        font-size: 80px;
    }

    .landing-hero__content-block {
        width: 100%;
        margin-left: 0;
    }

    .events-slider__slide {
        flex: 0 0 320px;
        min-width: 320px;
    }

    .event-card__image {
        width: 320px;
        height: 322px;
    }

    .events-slider__nav {
        top: calc(322px / 2 - 24px);
    }

    .events-slider__nav--prev {
        left: 24px;
    }

    .events-slider__nav--next {
        right: 24px;
    }

    .services-grid__wrapper {
        max-width: 100%;
    }

    .services-grid__row {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .services-grid__connector,
    .services-grid__vertical-connector {
        display: none;
    }

    .no-templates__gallery {
        height: 350px;
    }

    .no-templates__gallery-track {
        gap: 0;
        bottom: 25px;
    }

    .no-templates__gallery-item {
        width: 280px;
        height: 220px;
        margin: 0 24px;
    }

    .no-templates__gallery-item--featured {
        transform: scale(1.714, 1.364); /* 480/280, 300/220 */
        margin: 0 124px; /* 24px base + 100px scale compensation */
    }

    .no-templates__nav--prev {
        left: 40px;
    }

    .no-templates__nav--next {
        right: 40px;
    }

    .why-choose-us__wrapper {
        gap: 48px;
    }

    .why-choose-us__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }

    .stats-circles__wrapper {
        min-height: 550px;
    }

    .stats-circles__wrapper--count-2 {
        min-height: 400px;
    }

    .stats-circles__wrapper--count-3 {
        min-height: 550px;
    }

    .stats-circles__circle--small {
        width: 200px;
        height: 200px;
    }

    .stats-circles__circle--small .stats-circles__number {
        font-size: 56px;
    }

    .stats-circles__circle--medium {
        width: 260px;
        height: 260px;
    }

    .stats-circles__circle--medium .stats-circles__number {
        font-size: 72px;
    }

    .stats-circles__circle--large {
        width: 320px;
        height: 320px;
    }

    .stats-circles__circle--large .stats-circles__number {
        font-size: 80px;
    }

    .stats-circles__item {
        gap: 16px;
    }

    .stats-circles__item--left {
        left: -40px;
        top: 150px;
    }

    .stats-circles__item--top-right {
        right: 0;
        top: 0;
    }

    .stats-circles__item--bottom-right {
        right: 40px;
        top: 220px;
    }

    .stats-circles__label {
        font-size: 16px;
    }

    /* Line width for tablet */
    .stats-circles__item--large .stats-circles__line {
        width: 180px;
    }

    .stats-circles__item--medium .stats-circles__line {
        width: 220px;
    }

    .stats-circles__item--small .stats-circles__line {
        width: 140px;
    }

    .process-steps__grid {
        max-width: 100%;
    }

    .process-steps__row {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .process-steps__connector,
    .process-steps__vertical-connector {
        display: none;
    }
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */
@media (max-width: 768px) {
    .landing-hero__image {
        height: 250px;
    }

    .landing-hero__title-block {
        padding-top: 32px;
    }

    .landing-hero__content-block {
        padding-bottom: 48px;
    }

    .landing-hero__decorative,
    .landing-hero__heading {
        font-size: 48px;
    }

    .landing-hero__subtitle {
        font-size: 24px;
    }

    .landing-hero__buttons {
        flex-direction: column;
        gap: 16px;
    }

    .events-slider__slide {
        flex: 0 0 280px;
        min-width: 280px;
    }

    .event-card__image {
        width: 280px;
        height: 282px;
    }

    .events-slider__nav {
        top: calc(282px / 2 - 20px);
        width: 40px;
        height: 40px;
    }

    .events-slider__nav--prev {
        left: 16px;
    }

    .events-slider__nav--next {
        right: 16px;
    }

    .events-slider__nav i {
        font-size: 12px;
    }

    .event-card__title {
        font-size: 20px;
    }

    .event-card__description {
        max-width: 180px;
    }

    .services-grid__title {
        font-size: 28px;
    }

    .services-grid__row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .no-templates__title {
        font-size: 28px;
    }

    .no-templates__content {
        max-width: 100%;
    }

    .no-templates__features {
        max-width: 100%;
    }

    .no-templates__gallery {
        height: 300px;
    }

    .no-templates__gallery-track {
        gap: 0;
        bottom: 20px;
    }

    .no-templates__gallery-item {
        width: 200px;
        height: 180px;
        margin: 0 24px;
    }

    .no-templates__gallery-item--featured {
        transform: scale(1.5, 1.333); /* 300/200, 240/180 */
        margin: 0 74px; /* 24px base + 50px scale compensation */
    }

    .no-templates__nav {
        width: 40px;
        height: 40px;
    }

    .no-templates__nav--prev {
        left: 16px;
    }

    .no-templates__nav--next {
        right: 16px;
    }

    .no-templates__nav i {
        font-size: 16px;
    }

    .why-choose-us__title {
        font-size: 28px;
    }

    .why-choose-us__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .why-choose-us__item-title {
        font-size: 20px;
    }

    .stats-circles__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 48px;
        min-height: auto;
    }

    .stats-circles__item {
        position: static;
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .stats-circles__item--left,
    .stats-circles__item--top-right,
    .stats-circles__item--bottom-right {
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .stats-circles__circle,
    .stats-circles__circle--small,
    .stats-circles__circle--medium,
    .stats-circles__circle--large {
        width: 250px;
        height: 250px;
    }

    .stats-circles__number,
    .stats-circles__circle--small .stats-circles__number,
    .stats-circles__circle--medium .stats-circles__number,
    .stats-circles__circle--large .stats-circles__number {
        font-size: 64px;
    }

    .stats-circles__info {
        position: static;
        transform: none;
        text-align: center;
        margin-top: 16px;
        width: 100%;
        max-width: 280px;
    }

    .stats-circles__item--left .stats-circles__info,
    .stats-circles__item--top-right .stats-circles__info,
    .stats-circles__item--bottom-right .stats-circles__info {
        text-align: center;
    }

    /* Line on mobile - reset transform, centered */
    .stats-circles__line,
    .stats-circles__item--left .stats-circles__line,
    .stats-circles__item--top-right .stats-circles__line,
    .stats-circles__item--bottom-right .stats-circles__line {
        transform: none;
    }

    .stats-circles__item--large .stats-circles__line,
    .stats-circles__item--medium .stats-circles__line,
    .stats-circles__item--small .stats-circles__line {
        width: 150px;
    }

    .process-steps__title {
        font-size: 28px;
    }

    .process-steps__row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .testimonials-slider {
        flex-direction: column;
        padding: 0; /* Remove arrow space on mobile */
    }

    .testimonials-slider__track {
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .testimonial-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .testimonial-card--featured {
        transform: none;
    }

    .testimonials-slider__nav {
        display: none;
    }

    .testimonial-card__quote-icon img {
        width: 28px;
        height: 18px;
    }
}


/* === pages/event-decoration.css === */
/**
 * Event Decoration Services Page Styles
 * Set Design & Decoration landing page
 *
 * @package Bonevents
 */

/* ============================================
   1. Decor Hero Section with Image Slider
   ============================================ */
.section--decor-hero {
    position: relative;
    padding-top: 0;
    padding-bottom: 80px;
    overflow: hidden;
}

/* Zones Slider - Step-by-step with center active */
.decor-zones {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    margin-bottom: 32px;
}

.decor-zones__track {
    display: flex;
    align-items: center;
    gap: 60px;
    height: 304px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.decor-zones__slide {
    flex: 0 0 220px;
    width: 220px;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6;
}

.decor-zones__slide.is-active {
    flex: 0 0 304px;
    width: 304px;
    height: 304px;
    opacity: 1;
}

.decor-zones__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.decor-zones__slide--placeholder .decor-zones__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

/* Text block below slider */
.decor-zones__text {
    text-align: center;
    padding-top: 24px;
    min-height: 90px;
}

.decor-zones__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    transition: opacity 0.3s ease;
}

.decor-zones__subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    transition: opacity 0.3s ease;
}

.decor-zones__text.is-fading .decor-zones__title,
.decor-zones__text.is-fading .decor-zones__subtitle {
    opacity: 0;
}

/* Hero Content - Flex layout with two columns */
.decor-hero__content {
    display: flex;
    align-items: flex-end;
    gap: 148px;
    padding-top: 80px;
}

/* Left Column - Title and Subtitle */
.decor-hero__left {
    flex-shrink: 0;
}

.decor-hero__title {
    font-size: 128px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 24px;
}

.decor-hero__subtitle {
    font-family: var(--font-accent);
    font-size: 36px;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 0;
}

/* Right Column - Description and Buttons (aligned to bottom) */
.decor-hero__right {
    flex-shrink: 0;
    max-width: 324px;
    align-self: flex-end;
}

.decor-hero__description {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin-bottom: 32px;
}

.decor-hero__buttons {
    display: flex;
    gap: 24px;
}

/* ============================================
   2. Approach Cards Section
   ============================================ */
.section--approach-cards {
    padding: 80px 0;
}

.approach-cards__header {
    margin-bottom: 64px;
}

.approach-cards__title {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    color: #2c2c34;
    margin-bottom: 16px;
}

.approach-cards__subtitle {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    max-width: 324px;
}

.approach-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
}

.approach-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.approach-card:hover {
    transform: translateY(-8px);
}

.approach-card--offset-top {
    margin-top: 0;
}

.approach-card--offset-bottom {
    margin-top: 80px;
}

.approach-card__image {
    width: 100%;
    aspect-ratio: 324/324;
    overflow: hidden;
    margin-bottom: 24px;
    background: #f5f5f5;
}

.approach-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.approach-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.approach-card__content {
    padding: 0 8px;
}

.approach-card__title {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2c2c34;
    margin-bottom: 8px;
}

.approach-card__description {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
}

/* ============================================
   3. Budgets & Pricing Section
   Same structure as no-templates section
   ============================================ */
.section--budgets-pricing {
    padding: 80px 0;
}

/* Wrapper - vertical stack, content then gallery */
.budgets-pricing__wrapper {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* Content area - no max-width, children have their own constraints */
.budgets-pricing__content {
    width: 100%;
}

.budgets-pricing__title {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.28;
    color: #2c2c34;
    margin-bottom: 24px;
    max-width: 453px;
}

.budgets-pricing__description {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    margin-bottom: 48px;
    max-width: 324px;
}

/* Points list */
.budgets-pricing__points {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.budgets-pricing__point {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Point header - number and title in one row */
.budgets-pricing__point-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 19px;
}

/* Number circle - 24x24, dark bg, white text */
.budgets-pricing__point-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2c2c34;
    color: #fff;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.01;
}

.budgets-pricing__point-title {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.27;
    color: #2c2c34;
}

.budgets-pricing__point-desc {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
    max-width: 324px;
}

/* Sub-factors - horizontal row layout */
.budgets-pricing__factors {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 32px;
}

.budgets-pricing__factor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 318px;
}

.budgets-pricing__factor-title {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.29;
    color: #2c2c34;
}

.budgets-pricing__factor-desc {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    color: #2c2c34;
    opacity: 0.8;
}

/* Gallery - full width below content (same as no-templates) */
.budgets-pricing__gallery {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 450px;
    overflow: hidden;
}

.budgets-pricing__gallery-track {
    position: absolute;
    bottom: 30px;
    left: 0;
    display: flex;
    gap: 0;
    align-items: flex-end;
    transition: transform 0.5s ease-out;
}

/* All items same layout size - use transform for visual scaling */
.budgets-pricing__gallery-item {
    flex-shrink: 0;
    width: 389px;
    height: 296px;
    overflow: visible;
    transition: transform 0.5s ease-out, margin 0.5s ease-out;
    transform-origin: bottom center;
    margin: 0 24px;
    will-change: transform, margin;
}

.budgets-pricing__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured image - appears larger via transform */
.budgets-pricing__gallery-item--featured {
    transform: scale(1.748, 1.324);
    z-index: 10;
    margin: 0 169.5px;
}

.budgets-pricing__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
}

/* Navigation arrows - 48x48 white circles */
.budgets-pricing__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #fcfdff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.budgets-pricing__nav--prev {
    left: 80px;
}

.budgets-pricing__nav--next {
    right: 80px;
}

.budgets-pricing__nav:hover {
    background: #2c2c34;
    color: #fcfdff;
}

.budgets-pricing__nav i {
    font-size: 24px;
    color: inherit;
}

/* ============================================
   RESPONSIVE - Tablet
   ============================================ */
@media (max-width: 1024px) {
    .decor-zones {
        height: 320px;
    }

    .decor-zones__track {
        height: 240px;
        gap: 40px;
    }

    .decor-zones__slide {
        flex: 0 0 180px;
        width: 180px;
        height: 180px;
    }

    .decor-zones__slide.is-active {
        flex: 0 0 240px;
        width: 240px;
        height: 240px;
    }

    .decor-hero__title {
        font-size: 80px;
    }

    .decor-hero__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
    }

    .decor-hero__right {
        max-width: 100%;
        margin-top: 32px;
    }

    .approach-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .approach-card--offset-bottom {
        margin-top: 0;
    }

    /* Budgets Pricing Factors - Tablet (stack vertically) */
    .budgets-pricing__factors {
        flex-direction: column;
    }

    .budgets-pricing__factor {
        width: 100%;
        max-width: 400px;
    }

    /* Budgets Pricing Gallery - Tablet */
    .budgets-pricing__gallery {
        height: 350px;
    }

    .budgets-pricing__gallery-track {
        gap: 0;
        bottom: 25px;
    }

    .budgets-pricing__gallery-item {
        width: 280px;
        height: 220px;
        margin: 0 24px;
    }

    .budgets-pricing__gallery-item--featured {
        transform: scale(1.714, 1.364);
        margin: 0 124px;
    }

    .budgets-pricing__nav--prev {
        left: 40px;
    }

    .budgets-pricing__nav--next {
        right: 40px;
    }
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */
@media (max-width: 768px) {
    .section--decor-hero {
        padding-bottom: 48px;
    }

    .decor-zones {
        height: 240px;
    }

    .decor-zones__track {
        height: 160px;
        gap: 24px;
    }

    .decor-zones__slide {
        flex: 0 0 120px;
        width: 120px;
        height: 120px;
    }

    .decor-zones__slide.is-active {
        flex: 0 0 160px;
        width: 160px;
        height: 160px;
    }

    .decor-zones__text {
        min-height: 70px;
    }

    .decor-zones__title {
        font-size: 16px;
    }

    .decor-zones__subtitle {
        font-size: 12px;
    }

    .decor-hero__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-top: 32px;
    }

    .decor-hero__right {
        max-width: 100%;
    }

    .decor-hero__title {
        font-size: 48px;
    }

    .decor-hero__subtitle {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .decor-hero__buttons {
        flex-direction: column;
        gap: 16px;
    }

    .approach-cards__title {
        font-size: 28px;
    }

    .approach-cards__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .budgets-pricing__title {
        font-size: 28px;
    }

    .budgets-pricing__title {
        max-width: 100%;
    }

    .budgets-pricing__description {
        max-width: 100%;
    }

    .budgets-pricing__point-desc {
        max-width: 100%;
    }

    /* Budgets Pricing Factors - Mobile */
    .budgets-pricing__factors {
        flex-direction: column;
        gap: 24px;
        margin-top: 24px;
    }

    .budgets-pricing__factor {
        width: 100%;
    }

    /* Budgets Pricing Gallery - Mobile */
    .budgets-pricing__gallery {
        height: 300px;
    }

    .budgets-pricing__gallery-track {
        gap: 0;
        bottom: 20px;
    }

    .budgets-pricing__gallery-item {
        width: 200px;
        height: 180px;
        margin: 0 24px;
    }

    .budgets-pricing__gallery-item--featured {
        transform: scale(1.5, 1.333);
        margin: 0 74px;
    }

    .budgets-pricing__nav {
        width: 40px;
        height: 40px;
    }

    .budgets-pricing__nav--prev {
        left: 16px;
    }

    .budgets-pricing__nav--next {
        right: 16px;
    }

    .budgets-pricing__nav i {
        font-size: 16px;
    }
}