@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Outfit:wght@400;500;600&display=swap');

:root {--color-text-primary: #1c1917; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --radius-full: 9999px; --spacing-2xl: 6rem; --color-danger: #ef4444; --radius-sm: 0.375rem; --color-primary-light: #fff5c3; --color-primary: #d97706; --radius-md: 0.75rem; --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --color-success: #10b981; --color-bg-tertiary: #1c1917; --spacing-xl: 4rem; --color-warning: #f59e0b; --spacing-lg: 2.5rem; --spacing-xs: 0.375rem; --spacing-md: 1.5rem; --radius-lg: 1.5rem; --color-primary-hover: #b65705; --color-bg-secondary: #ffffff; --color-bg-primary: #fffbeb; --color-text-muted: #a8a29e; --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --color-secondary-light: #fff487; --font-primary: 'Outfit', sans-serif; --spacing-sm: 0.75rem; --font-heading: 'Manrope', sans-serif; --color-border: #e5e2e2; --color-border-light: #f9f7f0; --color-bg-card: #ffffff; --color-text-secondary: #5a524a; --color-secondary: #f59e0b;}

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

html {-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; scroll-behavior: smooth;}

body {line-height: 1.6; font-size: 1rem; background: var(--color-bg-primary); color: var(--color-text-primary); font-family: var(--font-primary);}

h1,
h2,
h3,
h4,
h5,
h6 {font-family: var(--font-heading); line-height: 1.2; color: var(--color-text-primary); font-weight: 700;}

h1 {letter-spacing: -0.02em; font-size: 3.5rem;}

h2 {letter-spacing: -0.015em; font-size: 2.5rem;}

h3 {font-size: 1.875rem; letter-spacing: -0.01em;}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.125rem;
}

p {margin-bottom: var(--spacing-md); color: var(--color-text-secondary);}

a {text-decoration: none; transition: color 0.3s ease; color: var(--color-primary);}

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

.container {padding: 0 var(--spacing-md); width: 100%; margin: 0 auto; max-width: 1360px;}

.btn {font-size: 1rem; align-items: center; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-primary); transition: all 0.3s ease; text-decoration: none; justify-content: center; display: inline-flex; font-weight: 600; border: none; padding: var(--spacing-sm) var(--spacing-lg);}

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

.btn-primary:hover {box-shadow: var(--shadow-md); background: var(--color-primary-hover); transform: translateY(-2px);}

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

.btn-secondary:hover {background: #d97706; transform: translateY(-2px); box-shadow: var(--shadow-md);}

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

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

.card {background: var(--color-bg-card); padding: var(--spacing-lg); transition: all 0.3s ease; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);}

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

.badge {color: var(--color-primary-hover); border-radius: var(--radius-full); padding: var(--spacing-xs) var(--spacing-sm); display: inline-block; font-family: var(--font-primary); font-weight: 600; font-size: 0.875rem; background: var(--color-primary-light);}

.badge-secondary {background: var(--color-secondary-light); color: #b45309;}

.section-light {padding: var(--spacing-2xl) 0; background: var(--color-bg-secondary); color: var(--color-text-primary);}

.section-dark {color: #fdfefd; background: var(--color-bg-tertiary); padding: var(--spacing-2xl) 0;}

.section-primary {padding: var(--spacing-2xl) 0; background: var(--color-bg-primary); color: var(--color-text-primary);}

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

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.flex {display: flex; align-items: center; justify-content: space-between;}

.flex-col {
  flex-direction: column;
}

.flex-center {display: flex; justify-content: center; align-items: center;}

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

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

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

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

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.px-md {padding-left: var(--spacing-md); padding-right: var(--spacing-md);}

.py-md {padding-top: var(--spacing-md); padding-bottom: var(--spacing-md);}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.border {
  border: 1px solid var(--color-border);
}

.border-light {
  border: 1px solid var(--color-border-light);
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.875rem;
  }

  h3 {
    font-size: 1.5rem;
  }

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

  .container {
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.875rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .btn {
    width: 100%;
  }
}
.header-comfort-zone {z-index: 100; position: static; border-bottom: 1px solid var(--color-border-light); overflow: hidden; background: var(--color-bg-primary);}

.header-comfort-zone-container {padding: 0 clamp(1rem, 4vw, 2rem); justify-content: space-between; gap: clamp(1.5rem, 3vw, 2.5rem); display: flex; align-items: center; height: clamp(60px, 10vh, 80px); flex-direction: row; max-width: 1440px; margin: 0 auto;}

.header-comfort-zone-brand {flex-direction: row; display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; text-decoration: none;}

.header-comfort-zone-logo-img {flex-shrink: 0; object-fit: cover; width: 40px; border-radius: 8px; height: 40px;}

.header-comfort-zone-logo-text {letter-spacing: -0.5px; color: var(--color-text-primary); font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.35rem);}

.header-comfort-zone-brand:hover .header-comfort-zone-logo-text {color: var(--color-primary); transition: color 0.3s ease;}

.header-comfort-zone-desktop-nav {align-items: center; flex: 1; display: none; justify-content: center; flex-direction: row; gap: clamp(1rem, 2vw, 2rem);}

.header-comfort-zone-nav-link {color: var(--color-text-primary); font-weight: 500; font-size: clamp(0.875rem, 1vw, 1rem); transition: all 0.3s ease; font-family: var(--font-primary); position: relative; text-decoration: none;}

.header-comfort-zone-nav-link::after {content: ''; height: 2px; position: absolute; background: var(--color-primary); width: 0; bottom: -4px; left: 0; transition: width 0.3s ease;}

.header-comfort-zone-nav-link:hover {
  color: var(--color-primary);
}

.header-comfort-zone-nav-link:hover::after {
  width: 100%;
}

.header-comfort-zone-actions {flex-shrink: 0; display: none; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); flex-direction: row;}

.header-comfort-zone-cart-link {color: var(--color-text-primary); display: flex; align-items: center; width: 44px; text-decoration: none; justify-content: center; border-radius: 8px; background: transparent; transition: all 0.3s ease; height: 44px;}

.header-comfort-zone-cart-link:hover {background: var(--color-bg-secondary); color: var(--color-primary);}

.header-comfort-zone-cart-link svg {height: 24px; width: 24px; stroke-width: 2;}

.header-comfort-zone-cta-button {padding: 0.75rem 1.5rem; white-space: nowrap; background: var(--color-primary); font-family: var(--font-primary); display: inline-flex; transition: all 0.3s ease; text-decoration: none; justify-content: center; border-radius: 8px; font-weight: 600; font-size: clamp(0.875rem, 1vw, 1rem); flex-shrink: 0; color: var(--color-bg-primary); align-items: center;}

.header-comfort-zone-cta-button:hover {background: var(--color-primary-hover); transform: translateY(-2px);}

.header-comfort-zone-mobile-toggle {justify-content: center; display: flex; border: none; background: transparent; padding: 0; cursor: pointer; gap: 6px; transition: all 0.3s ease; flex-shrink: 0; align-items: center; width: 44px; height: 44px; flex-direction: column;}

.header-comfort-zone-hamburger {background: var(--color-text-primary); width: 24px; height: 2px; transition: all 0.3s ease; border-radius: 2px;}

.header-comfort-zone-mobile-toggle:hover .header-comfort-zone-hamburger {
  background: var(--color-primary);
}

.header-comfort-zone-mobile-menu {overflow-y: auto; transition: all 0.3s ease; flex-direction: column; opacity: 0; visibility: hidden; right: 0; display: flex; background: var(--color-bg-primary); height: 100vh; top: 0; transform: translateX(100%); z-index: 99; position: fixed; width: 100%;}

.header-comfort-zone-mobile-menu.active {opacity: 1; visibility: visible; transform: translateX(0);}

.header-comfort-zone-mobile-header {align-items: center; padding: clamp(1rem, 3vw, 1.5rem); flex-shrink: 0; display: flex; justify-content: flex-end; border-bottom: 1px solid var(--color-border-light);}

.header-comfort-zone-mobile-close {background: transparent; color: var(--color-text-primary); justify-content: center; padding: 0; display: flex; align-items: center; height: 44px; transition: all 0.3s ease; width: 44px; cursor: pointer; border: none;}

.header-comfort-zone-mobile-close:hover {
  color: var(--color-primary);
}

.header-comfort-zone-mobile-close svg {stroke-width: 2; width: 24px; height: 24px;}

.header-comfort-zone-mobile-links {gap: 0; flex-direction: column; flex: 1; padding: clamp(1rem, 3vw, 1.5rem) 0; display: flex;}

.header-comfort-zone-mobile-link {font-family: var(--font-primary); text-decoration: none; border-bottom: 1px solid var(--color-border-light); padding: clamp(0.875rem, 2vw, 1.25rem) clamp(1rem, 3vw, 1.5rem); font-size: clamp(1rem, 2vw, 1.125rem); transition: all 0.3s ease; color: var(--color-text-primary); font-weight: 500;}

.header-comfort-zone-mobile-link:hover {background: var(--color-bg-secondary); color: var(--color-primary);}

.header-comfort-zone-mobile-cta {margin: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 2rem); text-align: center; font-size: clamp(0.95rem, 2vw, 1.05rem); font-weight: 600; justify-content: center; align-items: center; border-radius: 8px; text-decoration: none; font-family: var(--font-primary); padding: 1rem clamp(1rem, 3vw, 1.5rem); transition: all 0.3s ease; display: inline-flex; white-space: nowrap; background: var(--color-primary); color: var(--color-bg-primary);}

.header-comfort-zone-mobile-cta:hover {transform: translateY(-2px); background: var(--color-primary-hover);}

@media (min-width: 768px) {
  .header-comfort-zone-desktop-nav {
    display: flex;
  }

  .header-comfort-zone-actions {
    display: flex;
  }

  .header-comfort-zone-mobile-toggle {
    display: none;
  }

  .header-comfort-zone-mobile-menu {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .header-comfort-zone-container {
    justify-content: space-between;
  }

  .header-comfort-zone-mobile-menu {
    max-width: 100%;
  }

  .header-comfort-zone-cart-link {
    display: inline-flex;
  }
}

    .casual-wear-hub {
  width: 100%;
}

.container {max-width: 1440px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem);}

h1, h2, h3, h4, h5, h6, p {overflow-wrap: break-word; word-wrap: break-word;}

.btn {display: inline-block; border-radius: 8px; padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem); font-size: clamp(0.875rem, 1vw, 1rem); text-decoration: none; border: 2px solid transparent; cursor: pointer; font-weight: 500; transition: all 0.3s ease;}

.btn_primary_hero-pg {color: #ffffff; background: var(--color-accent);}

.btn_primary_hero-pg:hover {background: var(--color-accent-hover); transform: translateY(-2px);}

.btn_secondary_hero-pg {background: transparent; border: 2px solid var(--color-accent); color: var(--color-accent);}

.btn_secondary_hero-pg:hover {color: #ffffff; background: var(--color-accent);}

.hero_section_hero-pg {overflow: hidden; padding: clamp(4rem, 10vw, 8rem) 0; background: var(--color-bg-primary);}

.hero_content_hero-pg {display: flex; text-align: center; gap: clamp(2rem, 4vw, 3rem); flex-direction: column;}

.hero_title_hero-pg {font-weight: 700; color: var(--color-text-primary); line-height: 1.1; font-size: clamp(2.5rem, 8vw, 4.5rem); margin: 0;}

.hero_title_primary_hero-pg {color: var(--color-accent); display: block;}

.hero_title_secondary_hero-pg {color: var(--color-text-secondary); display: block;}

.hero_subtitle_hero-pg {margin-left: auto; margin-right: auto; max-width: 600px; font-size: clamp(1rem, 2vw, 1.375rem); color: var(--color-text-secondary); margin: 0;}

.hero_cta_hero-pg {gap: 1rem; align-items: center; flex-direction: column; display: flex; justify-content: center; flex-wrap: wrap;}

@media (min-width: 640px) {
  .hero_cta_hero-pg {
    flex-direction: row;
  }
}

.about_section_hero-pg {padding: clamp(4rem, 8vw, 6rem) 0; overflow: hidden; background: var(--color-bg-secondary);}

.about_content_hero-pg {flex-direction: column; gap: clamp(2rem, 4vw, 3rem); display: flex;}

.about_text_hero-pg {display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem);}

.about_title_hero-pg {color: var(--color-text-primary); font-weight: 700; font-size: clamp(1.75rem, 5vw, 2.75rem); margin: 0;}

.about_paragraph_hero-pg {color: var(--color-text-secondary); line-height: 1.7; margin: 0; font-size: clamp(0.875rem, 1.5vw, 1.125rem);}

.about_paragraph_secondary_hero-pg {font-size: clamp(0.875rem, 1.5vw, 1.125rem); margin: 0; color: var(--color-text-secondary); line-height: 1.7;}

.about_image_hero-pg {overflow: hidden; width: 100%; height: auto; border-radius: 12px;}

.about_image_hero-pg img {width: 100%; max-height: 450px; display: block; object-fit: cover; height: auto;}

@media (min-width: 768px) {
  .about_content_hero-pg {align-items: center; gap: clamp(2rem, 6vw, 4rem); flex-direction: row;}

  .about_text_hero-pg {
    flex: 1 1 45%;
  }

  .about_image_hero-pg {
    flex: 1 1 45%;
  }
}

.features_grid_section_hero-pg {padding: clamp(4rem, 8vw, 6rem) 0; background: var(--color-bg-tertiary); overflow: hidden;}

.features_grid_content_hero-pg {display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem);}

.features_grid_title_hero-pg {font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 700; margin: 0; color: #ffffff; text-align: center;}

.features_grid_cards_hero-pg {flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2rem); justify-content: center; flex-direction: row; display: flex;}

.features_grid_card_hero-pg {flex: 1 1 200px; max-width: 250px; display: flex; text-align: center; gap: 1rem; flex-direction: column;}

.features_grid_icon_hero-pg {color: var(--color-secondary); font-size: 2.5rem;}

.features_grid_card_title_hero-pg {font-size: clamp(1rem, 1.5vw, 1.25rem); color: #ffffff; margin: 0; font-weight: 600;}

.features_grid_card_text_hero-pg {font-size: clamp(0.8rem, 1vw, 0.95rem); margin: 0; line-height: 1.5; color: #e7e5e4;}

.split_features_section_hero-pg {padding: clamp(4rem, 8vw, 6rem) 0; overflow: hidden; background: var(--color-bg-secondary);}

.split_features_content_hero-pg {display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem);}

@media (min-width: 768px) {
  .split_features_content_hero-pg {gap: clamp(3rem, 6vw, 4rem); flex-direction: row;}
}

.split_features_left_hero-pg {display: flex; background: var(--color-bg-primary); padding: clamp(1.5rem, 3vw, 2rem); gap: clamp(1.5rem, 2vw, 2rem); border-radius: 12px; flex-direction: column; flex: 1 1 50%;}

.split_features_right_hero-pg {display: flex; gap: clamp(1.5rem, 2vw, 2rem); background: #f9f9f7; flex: 1 1 50%; flex-direction: column; padding: clamp(1.5rem, 3vw, 2rem); border-radius: 12px;}

.split_features_group_hero-pg {gap: 0.5rem; display: flex; flex-direction: column;}

.split_features_subtitle_hero-pg {font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--color-text-primary); margin: 0;}

.split_features_text_hero-pg {line-height: 1.6; margin: 0; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1.2vw, 1rem);}

.team_section_hero-pg {padding: clamp(4rem, 8vw, 6rem) 0; background: var(--color-bg-tertiary); overflow: hidden;}

.team_content_hero-pg {display: flex; gap: clamp(2rem, 4vw, 3rem); flex-direction: column;}

.team_title_hero-pg {text-align: center; font-size: clamp(1.75rem, 5vw, 2.75rem); margin: 0; font-weight: 700; color: #ffffff;}

.team_subtitle_hero-pg {color: #d9d4d7; margin: 0; font-size: clamp(1rem, 1.5vw, 1.25rem); text-align: center;}

.team_cards_hero-pg {gap: clamp(1.5rem, 3vw, 2.5rem); flex-direction: row; display: flex; justify-content: center; flex-wrap: wrap;}

.team_card_hero-pg {flex-direction: column; display: flex; flex: 1 1 280px; border-radius: 12px; padding: clamp(1.5rem, 3vw, 2rem); gap: 1rem; background: #2a2620; max-width: 350px;}

.team_card_photo_hero-pg {overflow: hidden; height: 200px; width: 100%; border-radius: 10px;}

.team_card_photo_hero-pg img {width: 100%; height: 100%; object-fit: cover;}

.team_card_name_hero-pg {color: #ffffff; font-size: clamp(1.1rem, 1.5vw, 1.375rem); font-weight: 600; margin: 0;}

.team_card_role_hero-pg {color: var(--color-secondary); font-size: clamp(0.875rem, 1vw, 1rem); font-weight: 500; margin: 0;}

.team_card_bio_hero-pg {margin: 0; font-size: clamp(0.8rem, 1vw, 0.95rem); line-height: 1.5; color: #d7d7d7;}

.benefits_section_hero-pg {overflow: hidden; padding: clamp(4rem, 8vw, 6rem) 0; background: var(--color-bg-primary);}

.benefits_content_hero-pg {display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem);}

.benefits_title_hero-pg {text-align: center; color: var(--color-text-primary); font-size: clamp(1.75rem, 5vw, 2.75rem); margin: 0; font-weight: 700;}

.benefits_comparison_hero-pg {display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem);}

@media (min-width: 768px) {
  .benefits_comparison_hero-pg {gap: clamp(2rem, 4vw, 3rem); flex-direction: row;}
}

.benefits_column_hero-pg {border-radius: 12px; padding: clamp(1.5rem, 3vw, 2rem); flex: 1 1 50%; display: flex; gap: 1rem; flex-direction: column;}

.benefits_column_left_hero-pg {
  background: #f5e6d3;
}

.benefits_column_right_hero-pg {
  background: #e9f4e8;
}

.benefits_column_title_hero-pg {font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.375rem); color: var(--color-text-primary); margin: 0;}

.benefits_row_hero-pg {gap: 0.75rem; align-items: center; flex-direction: row; display: flex;}

.benefits_row_hero-pg::before {flex-shrink: 0; font-size: 1.25rem; content: "✓"; color: var(--color-accent); font-weight: 700;}

.benefits_row_text_hero-pg {margin: 0; line-height: 1.5; color: var(--color-text-primary); font-size: clamp(0.875rem, 1vw, 1rem);}

.statistics_section_hero-pg {background: var(--color-bg-secondary); padding: clamp(4rem, 8vw, 6rem) 0; overflow: hidden;}

.statistics_content_hero-pg {gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column;}

.statistics_title_hero-pg {font-size: clamp(1.75rem, 5vw, 2.75rem); text-align: center; margin: 0; font-weight: 700; color: var(--color-text-primary);}

.statistics_cards_hero-pg {flex-direction: row; display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2rem);}

.statistics_card_hero-pg {flex: 1 1 220px; background: var(--color-bg-primary); align-items: center; max-width: 280px; display: flex; text-align: center; gap: 1rem; padding: clamp(1.5rem, 2vw, 2rem); flex-direction: column; border-radius: 12px;}

.statistics_card_icon_hero-pg {color: var(--color-accent); font-size: 2.5rem;}

.statistics_card_number_hero-pg {line-height: 1; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text-primary); margin: 0;}

.statistics_card_label_hero-pg {font-size: clamp(0.875rem, 1vw, 1rem); line-height: 1.5; margin: 0; color: var(--color-text-secondary);}

.testimonials_section_hero-pg {background: var(--color-bg-tertiary); padding: clamp(4rem, 8vw, 6rem) 0; overflow: hidden;}

.testimonials_content_hero-pg {gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column;}

.testimonials_title_hero-pg {margin: 0; color: #fffffc; text-align: center; font-weight: 700; font-size: clamp(1.75rem, 5vw, 2.75rem);}

.testimonials_cards_hero-pg {gap: clamp(1.5rem, 3vw, 2rem); display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}

.testimonials_card_hero-pg {gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2rem); flex: 1 1 300px; max-width: 380px; display: flex; border-radius: 12px; flex-direction: column; background: #2a2620;}

.testimonials_rating_hero-pg {display: flex; gap: 0.25rem; flex-direction: row;}

.testimonials_star_hero-pg {color: var(--color-secondary); font-size: 1.25rem;}

.testimonials_quote_hero-pg {font-size: clamp(0.875rem, 1.2vw, 1.05rem); color: #e7e5e4; margin: 0; font-style: italic; line-height: 1.6;}

.testimonials_author_hero-pg {margin: 0; font-size: clamp(0.8rem, 1vw, 0.95rem); color: var(--color-secondary); font-weight: 500;}

.featured_section_hero-pg {background: var(--color-bg-primary); overflow: hidden; padding: clamp(4rem, 8vw, 6rem) 0;}

.featured_content_hero-pg {gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column;}

.featured_title_hero-pg {font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 700; color: var(--color-text-primary); margin: 0; text-align: center;}

.featured_subtitle_hero-pg {font-size: clamp(1rem, 1.5vw, 1.25rem); margin: 0; text-align: center; color: var(--color-text-secondary);}

.featured_cards_hero-pg {gap: clamp(1.5rem, 3vw, 2rem); flex-direction: row; display: flex; justify-content: center; flex-wrap: wrap;}

.featured_card_hero-pg {padding: clamp(1rem, 2vw, 1.5rem); max-width: 400px; display: flex; transition: all 0.3s ease; flex-direction: column; gap: 1rem; border: 1px solid var(--color-border-light); border-radius: 12px; flex: 1 1 300px; background: var(--color-bg-card);}

.featured_card_hero-pg:hover {box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-4px);}

.featured_card_link_hero-pg {text-decoration: none; display: flex; gap: 0.75rem; flex-direction: column;}

.featured_card_image_hero-pg {object-fit: cover; border-radius: 8px; display: block; aspect-ratio: 16 / 9; width: 100%; height: auto;}

.featured_card_title_hero-pg {margin: 0; font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--color-text-primary); line-height: 1.4;}

.featured_card_description_hero-pg {margin: 0; color: var(--color-text-secondary); line-height: 1.5; font-size: clamp(0.8rem, 1vw, 0.95rem);}

.featured_card_price_hero-pg {font-weight: 700; color: var(--color-accent); font-size: clamp(1.1rem, 1.5vw, 1.375rem); margin: 0;}

.featured_card_button_hero-pg {color: #ffffff; transition: all 0.3s ease; cursor: pointer; background: var(--color-accent); font-size: clamp(0.8rem, 1vw, 0.95rem); border-radius: 8px; border: none; padding: clamp(0.625rem, 1.5vw, 0.875rem) clamp(1rem, 2vw, 1.5rem); font-weight: 500;}

.featured_card_button_hero-pg:hover {transform: translateY(-2px); background: var(--color-accent-hover);}

.featured_footer_hero-pg {text-align: center; margin-top: clamp(1rem, 2vw, 1.5rem);}

.featured_see_all_hero-pg {text-decoration: none; font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: var(--color-accent); padding-bottom: 0.25rem; transition: all 0.3s ease; border-bottom: 2px solid var(--color-accent); font-weight: 500;}

.featured_see_all_hero-pg:hover {color: var(--color-accent-hover); border-bottom-color: var(--color-accent-hover);}

.cta_section_hero-pg {background: var(--color-bg-secondary); padding: clamp(4rem, 8vw, 6rem) 0; overflow: hidden;}

.cta_content_hero-pg {display: flex; text-align: center; flex-direction: column; gap: clamp(1.5rem, 3vw, 2rem);}

.cta_title_hero-pg {font-weight: 700; margin: 0; font-size: clamp(1.75rem, 5vw, 2.75rem); color: var(--color-text-primary);}

.cta_text_hero-pg {margin-left: auto; margin-right: auto; margin: 0; max-width: 600px; color: var(--color-text-secondary); font-size: clamp(0.95rem, 1.5vw, 1.15rem);}

.cta_buttons_hero-pg {flex-direction: column; justify-content: center; display: flex; align-items: center; gap: 1rem;}

@media (min-width: 640px) {
  .cta_buttons_hero-pg {
    flex-direction: row;
  }
}

.cta_button_primary_hero-pg {transition: all 0.3s ease; border: 2px solid var(--color-accent); background: var(--color-accent); padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2.5rem); color: #ffffff; font-weight: 500; border-radius: 8px; display: inline-block; text-decoration: none;}

.cta_button_primary_hero-pg:hover {background: var(--color-accent-hover); transform: translateY(-2px); border-color: var(--color-accent-hover);}

.cta_button_secondary_hero-pg {border-radius: 8px; border: 2px solid var(--color-accent); background: transparent; transition: all 0.3s ease; padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2.5rem); color: var(--color-accent); text-decoration: none; font-weight: 500; display: inline-block;}

.cta_button_secondary_hero-pg:hover {background: var(--color-accent); transform: translateY(-2px); color: #fffffc;}

.cookie-banner {left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); right: 0; justify-content: center; align-items: center; flex-direction: row; display: flex; padding: clamp(1rem, 2vw, 1.5rem); z-index: 9999; bottom: 0; flex-wrap: wrap; background: #1c1719; gap: clamp(1rem, 2vw, 1.5rem); position: fixed;}

.cookie-banner.hidden {
  display: none;
}

.cookie-banner-text {text-align: center; font-size: clamp(0.8rem, 1vw, 0.95rem); color: #fffefd; margin: 0;}

.cookie-banner-buttons {display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; flex-direction: row;}

.cookie-btn-accept {padding: 0.5rem 1.25rem; background: var(--color-accent); border: none; font-size: 0.9rem; cursor: pointer; color: #ffffff; border-radius: 6px; transition: all 0.3s ease; font-weight: 500;}

.cookie-btn-accept:hover {background: var(--color-accent-hover); transform: translateY(-1px);}

.cookie-btn-decline {font-weight: 500; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.5rem 1.25rem; color: #ffffff; border-radius: 6px; cursor: pointer; background: transparent; font-size: 0.9rem;}

.cookie-btn-decline:hover {background: rgba(255, 255, 255, 0.1); border-color: #fbffff;}

@media (max-width: 767px) {
  .split_features_left_hero-pg,
  .split_features_right_hero-pg {
    flex: 1 1 100%;
  }

  .benefits_comparison_hero-pg {
    flex-direction: column;
  }

  .benefits_column_hero-pg {
    flex: 1 1 100%;
  }
}

@media (min-width: 1024px) {
  .hero_section_hero-pg {
    padding: clamp(6rem, 12vw, 10rem) 0;
  }

  .about_section_hero-pg,
  .split_features_section_hero-pg,
  .features_grid_section_hero-pg,
  .team_section_hero-pg,
  .benefits_section_hero-pg,
  .statistics_section_hero-pg,
  .testimonials_section_hero-pg,
  .featured_section_hero-pg,
  .cta_section_hero-pg {
    padding: clamp(5rem, 10vw, 8rem) 0;
  }
}

    .footer {overflow: hidden; border-top: 1px solid var(--color-border-light); color: var(--color-text-secondary); padding: clamp(3rem, 8vw, 5rem) 0 clamp(2rem, 5vw, 3rem) 0; background: var(--color-bg-secondary);}

.footer .container {padding: 0 clamp(1rem, 4vw, 2rem); display: block; margin: 0 auto; max-width: 1440px;}

.footer-content {flex-direction: column; gap: clamp(2rem, 5vw, 3rem); display: flex;}

.footer-about {
  display: block;
}

.footer-about h3 {color: var(--color-text-primary); margin-bottom: clamp(0.75rem, 2vw, 1rem); line-height: 1.2; font-weight: 600; font-family: var(--font-heading); font-size: clamp(1.125rem, 2vw, 1.375rem);}

.footer-about p {font-family: var(--font-primary); max-width: 320px; word-wrap: break-word; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1.5vw, 1rem); line-height: 1.6; overflow-wrap: break-word;}

.footer-nav,
.footer-contact,
.footer-legal {
  display: block;
}

.footer-nav h3,
.footer-contact h3,
.footer-legal h3 {line-height: 1.2; font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--color-text-primary); font-family: var(--font-heading); font-weight: 600; margin-bottom: clamp(0.75rem, 2vw, 1rem);}

.footer-nav-list,
.footer-legal-list {gap: clamp(0.5rem, 1.5vw, 0.75rem); flex-direction: column; display: flex; margin: 0; padding: 0; list-style: none;}

.footer-nav-list li,
.footer-legal-list li {
  display: block;
}

.footer-nav-list a,
.footer-legal-list a {font-size: clamp(0.875rem, 1.5vw, 1rem); text-decoration: none; display: inline-block; transition: color 0.3s ease; font-family: var(--font-primary); color: var(--color-text-secondary);}

.footer-nav-list a:hover,
.footer-legal-list a:hover {
  color: var(--color-primary);
}

.footer-contact p {line-height: 1.8; font-size: clamp(0.875rem, 1.5vw, 1rem); margin: 0; word-wrap: break-word; font-family: var(--font-primary); color: var(--color-text-secondary); overflow-wrap: break-word;}

.footer-copyright {text-align: center; margin-top: clamp(1.5rem, 3vw, 2rem); display: block; border-top: 1px solid var(--color-border-light); padding-top: clamp(1.5rem, 3vw, 2rem);}

.footer-copyright p {color: var(--color-text-muted); overflow-wrap: break-word; margin: 0; line-height: 1.6; font-family: var(--font-primary); font-size: clamp(0.8125rem, 1.25vw, 0.9375rem); word-wrap: break-word;}

@media (min-width: 768px) {
  .footer-content {flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: clamp(2rem, 4vw, 3rem); display: flex;}

  .footer-about {
    flex: 1 1 280px;
  }

  .footer-nav {
    flex: 1 1 180px;
  }

  .footer-contact {
    flex: 1 1 220px;
  }

  .footer-legal {
    flex: 1 1 180px;
  }

  .footer-copyright {border-top: 1px solid var(--color-border-light); text-align: center; flex: 1 1 100%; margin-top: clamp(1.5rem, 3vw, 2rem); padding-top: clamp(1.5rem, 3vw, 2rem);}
}

@media (max-width: 767px) {
  .footer-nav-list,
  .footer-legal-list {
    gap: clamp(0.375rem, 1vw, 0.625rem);
  }

  .footer-contact p {
    font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  }
}
    

.category-page-casual-wear-prague {background: var(--color-bg-primary); overflow: hidden;}

.hero-section-casual-wear-prague {background: var(--color-bg-tertiary); padding: clamp(4rem, 10vw, 8rem) 0; overflow: hidden;}

.container {padding: 0 clamp(1rem, 4vw, 2rem); display: block; max-width: 1440px; margin: 0 auto;}

.hero-content-casual-wear-prague {flex-direction: column; display: flex; gap: clamp(2rem, 4vw, 3rem);}

.hero-header-casual-wear-prague {text-align: center; max-width: 900px; margin: 0 auto;}

.hero-title-casual-wear-prague {margin: 0; color: var(--color-bg-primary); overflow-wrap: break-word; font-size: clamp(2.5rem, 6vw + 1rem, 4rem); font-family: var(--font-heading); font-weight: 700; word-wrap: break-word; line-height: 1.1;}

.hero-subtitle-casual-wear-prague {font-family: var(--font-primary); word-wrap: break-word; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0 0; color: var(--color-text-secondary); line-height: 1.6; overflow-wrap: break-word; font-size: clamp(0.95rem, 1.5vw + 0.5rem, 1.25rem);}

.hero-meta-casual-wear-prague {margin: clamp(1rem, 2vw, 1.5rem) 0 0 0; word-wrap: break-word; color: var(--color-text-muted); overflow-wrap: break-word; text-transform: uppercase; font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); letter-spacing: 0.1em; font-family: var(--font-primary);}

.posts-section-casual-wear-prague {overflow: hidden; padding: clamp(4rem, 8vw, 6rem) 0; background: var(--color-bg-primary);}

.posts-content-casual-wear-prague {display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem);}

.posts-header-casual-wear-prague {text-align: center; max-width: 700px; margin: 0 auto;}

.posts-title-casual-wear-prague {color: var(--color-text-primary); font-weight: 700; overflow-wrap: break-word; word-wrap: break-word; font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem); line-height: 1.2; margin: 0;}

.posts-subtitle-casual-wear-prague {font-family: var(--font-primary); word-wrap: break-word; margin: clamp(1rem, 2vw, 1.5rem) 0 0 0; line-height: 1.6; overflow-wrap: break-word; font-size: clamp(0.9rem, 1.2vw + 0.5rem, 1.125rem); color: var(--color-text-secondary);}

.posts-grid-casual-wear-prague {flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem); justify-content: center; align-items: start; display: flex;}

.card-wrapper-casual-wear-prague {gap: clamp(1rem, 2vw, 1.5rem); padding: clamp(1rem, 2vw, 1.5rem); overflow: hidden; background: var(--color-bg-card); border-radius: var(--radius-md); display: flex; box-shadow: var(--shadow-md); flex-direction: column; transition: all 0.3s ease;}

.card-wrapper-casual-wear-prague:hover {transform: translateY(-4px); box-shadow: var(--shadow-lg);}

.card-large-casual-wear-prague {min-height: 520px; flex: 1 1 clamp(280px, 100%, 450px);}

.card-medium-casual-wear-prague {min-height: 420px; flex: 1 1 clamp(280px, 100%, 380px);}

.card-image-link-casual-wear-prague {border-radius: var(--radius-sm); overflow: hidden; flex: 1 1 auto; height: 100%; width: 100%; display: block;}

.card-image-casual-wear-prague {object-fit: cover; transition: transform 0.3s ease; display: block; height: 100%; width: 100%;}

.card-wrapper-casual-wear-prague:hover .card-image-casual-wear-prague {
  transform: scale(1.02);
}

.card-body-casual-wear-prague {flex-direction: column; display: flex; gap: clamp(0.75rem, 1.5vw, 1.25rem); flex: 0 0 auto;}

.card-title-casual-wear-prague {margin: 0; line-height: 1.3; font-size: clamp(1.1rem, 2vw + 0.5rem, 1.5rem); color: var(--color-text-primary); font-weight: 600; font-family: var(--font-heading); overflow-wrap: break-word; word-wrap: break-word;}

.card-title-casual-wear-prague a {transition: color 0.3s ease; text-decoration: none; color: inherit;}

.card-title-casual-wear-prague a:hover {
  color: var(--color-accent);
}

.card-description-casual-wear-prague {word-wrap: break-word; font-size: clamp(0.85rem, 1vw + 0.4rem, 1rem); color: var(--color-text-secondary); overflow-wrap: break-word; line-height: 1.5; margin: 0; font-family: var(--font-primary);}

.card-meta-casual-wear-prague {border-bottom: 1px solid var(--color-border-light); align-items: center; border-top: 1px solid var(--color-border-light); gap: clamp(0.75rem, 2vw, 1.25rem); display: flex; flex-wrap: wrap; flex-direction: row; padding: clamp(0.75rem, 1.5vw, 1rem) 0;}

.card-price-casual-wear-prague {font-weight: 700; font-size: clamp(1.1rem, 2vw + 0.5rem, 1.4rem); font-family: var(--font-heading); color: var(--color-accent);}

.card-badge-casual-wear-prague {font-family: var(--font-primary); font-size: clamp(0.7rem, 1vw + 0.3rem, 0.85rem); letter-spacing: 0.05em; font-weight: 600; color: var(--color-accent); text-transform: capitalize;}

.card-tagline-casual-wear-prague {color: var(--color-text-muted); font-size: clamp(0.75rem, 1vw + 0.4rem, 0.9rem); font-family: var(--font-primary); font-style: italic;}

.card-button-casual-wear-prague {font-size: clamp(0.85rem, 1vw + 0.5rem, 1rem); color: var(--color-bg-primary); text-transform: uppercase; border: none; cursor: pointer; width: 100%; font-family: var(--font-heading); font-weight: 600; text-align: center; border-radius: var(--radius-sm); padding: clamp(0.85rem, 2vw, 1.25rem) clamp(1rem, 3vw, 1.5rem); transition: all 0.3s ease; letter-spacing: 0.05em; background: var(--color-accent);}

.card-button-casual-wear-prague:hover {background: var(--color-accent-hover); transform: translateY(-2px);}

.card-button-casual-wear-prague:active {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .card-wrapper-casual-wear-prague {flex: 1 1 100%; min-height: auto;}

  .card-large-casual-wear-prague {
    min-height: auto;
  }

  .card-medium-casual-wear-prague {
    min-height: auto;
  }

  .card-image-link-casual-wear-prague {
    min-height: 250px;
  }

  .hero-section-casual-wear-prague {
    padding: clamp(3rem, 8vw, 5rem) 0;
  }

  .posts-section-casual-wear-prague {
    padding: clamp(3rem, 6vw, 4rem) 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .card-wrapper-casual-wear-prague {
    flex: 1 1 clamp(280px, 48%, 420px);
  }

  .posts-grid-casual-wear-prague {
    gap: clamp(1.5rem, 2.5vw, 2rem);
  }
}

@media (min-width: 1024px) {
  .posts-grid-casual-wear-prague {gap: clamp(1.5rem, 3vw, 2.5rem); display: grid; align-items: start; grid-template-columns: repeat(2, 1fr); margin: 0 auto; max-width: 1200px;}

  .card-large-casual-wear-prague {grid-column: 1 / 2; min-height: 580px;}

  .card-medium-casual-wear-prague {grid-column: 2 / 3; min-height: 420px;}

  .card-large-casual-wear-prague:nth-child(3) {
    grid-column: 1 / 2;
  }

  .card-medium-casual-wear-prague:nth-child(4) {
    grid-column: 2 / 3;
  }
}

.main-urban-comfort-joggers-charcoal {
  width: 100%;
}

.container {display: block; margin: 0 auto; max-width: 1440px; padding: 0 clamp(1rem, 4vw, 2rem);}

.breadcrumbs-urban-comfort-joggers-charcoal {font-size: clamp(0.75rem, 1vw + 0.5rem, 0.875rem); gap: 0.5rem; flex-direction: row; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); display: flex; color: var(--color-text-secondary); align-items: center;}

.breadcrumbs-urban-comfort-joggers-charcoal a {transition: all 0.3s ease; color: var(--color-primary); text-decoration: none;}

.breadcrumbs-urban-comfort-joggers-charcoal a:hover {color: var(--color-primary-hover); text-decoration: underline;}

.hero-section-urban-comfort-joggers-charcoal {overflow: hidden; padding: clamp(2rem, 5vw, 4rem) 0; background: var(--color-bg-primary);}

.hero-card-wrapper-urban-comfort-joggers-charcoal {flex-direction: column; gap: clamp(2rem, 4vw, 3rem); display: flex;}

.hero-card-content-urban-comfort-joggers-charcoal {border-radius: var(--radius-lg); align-items: center; gap: clamp(2rem, 4vw, 4rem); background: var(--color-bg-card); display: flex; padding: clamp(1.5rem, 3vw, 2.5rem); flex-direction: row; box-shadow: var(--shadow-md);}

.hero-image-block-urban-comfort-joggers-charcoal {max-width: 45%; flex: 1 1 45%;}

.hero-image-urban-comfort-joggers-charcoal {height: auto; max-height: 450px; border-radius: var(--radius-md); display: block; width: 100%; object-fit: cover;}

.hero-info-block-urban-comfort-joggers-charcoal {flex: 1 1 55%; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); display: flex; max-width: 55%;}

.hero-badge-urban-comfort-joggers-charcoal {display: inline-block; color: var(--color-text-primary); border-radius: var(--radius-full); width: fit-content; font-size: clamp(0.75rem, 1vw, 0.875rem); padding: 0.375rem 1rem; font-weight: 600; letter-spacing: 0.05em; background: var(--color-secondary); text-transform: uppercase;}

.hero-title-urban-comfort-joggers-charcoal {color: var(--color-text-primary); font-size: clamp(1.75rem, 5vw + 0.5rem, 2.75rem); overflow-wrap: break-word; line-height: 1.2; margin: 0; word-wrap: break-word; font-family: var(--font-heading); font-weight: 700;}

.hero-meta-urban-comfort-joggers-charcoal {margin: 0; font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); color: var(--color-text-secondary); font-style: italic;}

.hero-description-urban-comfort-joggers-charcoal {margin: 0; line-height: 1.6; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.product-buy-block-urban-comfort-joggers-charcoal {flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); padding-top: clamp(0.5rem, 1vw, 1rem); display: flex; border-top: 1px solid var(--color-border-light);}

.product-price-urban-comfort-joggers-charcoal {margin: 0; color: var(--color-primary); font-weight: 700; font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);}

.qty-selector-urban-comfort-joggers-charcoal {flex-direction: row; gap: 0.5rem; align-items: center; display: flex; width: fit-content;}

.qty-btn-urban-comfort-joggers-charcoal {border: 1px solid var(--color-border); background: var(--color-bg-secondary); color: var(--color-text-primary); display: flex; align-items: center; transition: all 0.3s ease; width: 40px; justify-content: center; height: 40px; cursor: pointer; padding: 0; font-size: 1.25rem; border-radius: var(--radius-md);}

.qty-btn-urban-comfort-joggers-charcoal:hover {color: #ffffff; background: var(--color-primary); border-color: var(--color-primary);}

.qty-input-urban-comfort-joggers-charcoal {font-size: 1rem; width: 60px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-secondary); text-align: center; color: var(--color-text-primary);}

.qty-input-urban-comfort-joggers-charcoal:focus {outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);}

.add-to-cart-btn-urban-comfort-joggers-charcoal {transition: all 0.3s ease; text-transform: uppercase; display: flex; padding: clamp(0.875rem, 2vw, 1.125rem) clamp(1.5rem, 3vw, 2rem); font-weight: 700; justify-content: center; align-items: center; border-radius: var(--radius-md); color: #ffffff; border: none; cursor: pointer; min-height: 48px; width: 100%; background: var(--color-primary); letter-spacing: 0.05em; font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);}

.add-to-cart-btn-urban-comfort-joggers-charcoal:hover {transform: translateY(-2px); background: var(--color-primary-hover); box-shadow: var(--shadow-lg);}

.overview-section-urban-comfort-joggers-charcoal {background: var(--color-bg-secondary); overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0;}

.overview-content-urban-comfort-joggers-charcoal {gap: clamp(2rem, 4vw, 4rem); flex-direction: row; display: flex; align-items: center;}

.overview-text-block-urban-comfort-joggers-charcoal {max-width: 50%; flex: 1 1 50%;}

.overview-title-urban-comfort-joggers-charcoal {color: var(--color-text-primary); line-height: 1.3; font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; font-weight: 700;}

.overview-paragraph-urban-comfort-joggers-charcoal {font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); line-height: 1.7; margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; color: var(--color-text-secondary);}

.overview-image-block-urban-comfort-joggers-charcoal {max-width: 50%; flex: 1 1 50%;}

.overview-image-urban-comfort-joggers-charcoal {border-radius: var(--radius-lg); display: block; height: auto; object-fit: cover; max-height: 400px; width: 100%;}

.features-section-urban-comfort-joggers-charcoal {padding: clamp(3rem, 6vw, 5rem) 0; background: var(--color-bg-primary); overflow: hidden;}

.features-content-urban-comfort-joggers-charcoal {gap: clamp(2rem, 4vw, 3rem); flex-direction: column; display: flex;}

.features-title-urban-comfort-joggers-charcoal {font-family: var(--font-heading); line-height: 1.3; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); margin: 0; font-weight: 700; color: var(--color-text-primary); text-align: center;}

.features-grid-urban-comfort-joggers-charcoal {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 3vw, 2.5rem);}

.feature-card-urban-comfort-joggers-charcoal {padding: clamp(1.5rem, 3vw, 2rem); flex: 1 1 calc(50% - 1.25rem); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); border-radius: var(--radius-md); transition: all 0.3s ease; gap: 1rem; background: var(--color-bg-card); max-width: 350px; min-width: 250px;}

.feature-card-urban-comfort-joggers-charcoal:hover {box-shadow: var(--shadow-md); transform: translateY(-4px);}

.feature-icon-urban-comfort-joggers-charcoal {justify-content: flex-start; display: flex; font-size: 1.75rem; align-items: center; color: var(--color-primary);}

.feature-heading-urban-comfort-joggers-charcoal {margin: 0; color: var(--color-text-primary); line-height: 1.3; font-weight: 600; font-size: clamp(1rem, 2vw, 1.25rem); font-family: var(--font-heading);}

.feature-text-urban-comfort-joggers-charcoal {color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); line-height: 1.6; margin: 0;}

.styling-section-urban-comfort-joggers-charcoal {background: var(--color-bg-tertiary); padding: clamp(3rem, 6vw, 5rem) 0; overflow: hidden;}

.styling-content-urban-comfort-joggers-charcoal {gap: clamp(2rem, 4vw, 4rem); flex-direction: row; align-items: center; display: flex;}

.styling-text-block-urban-comfort-joggers-charcoal {flex: 1 1 50%; max-width: 50%;}

.styling-title-urban-comfort-joggers-charcoal {margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); line-height: 1.3; font-weight: 700; font-family: var(--font-heading); color: #ffffff;}

.styling-paragraph-urban-comfort-joggers-charcoal {margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; color: #e0e0e0; line-height: 1.7; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.styling-image-block-urban-comfort-joggers-charcoal {max-width: 50%; flex: 1 1 50%;}

.styling-image-urban-comfort-joggers-charcoal {max-height: 400px; width: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); height: auto;}

.specifications-section-urban-comfort-joggers-charcoal {padding: clamp(3rem, 6vw, 5rem) 0; overflow: hidden; background: var(--color-bg-secondary);}

.specifications-content-urban-comfort-joggers-charcoal {flex-direction: column; display: flex; gap: clamp(2rem, 4vw, 3rem);}

.specifications-title-urban-comfort-joggers-charcoal {font-weight: 700; color: var(--color-text-primary); font-family: var(--font-heading); text-align: center; margin: 0; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); line-height: 1.3;}

.specs-grid-urban-comfort-joggers-charcoal {flex-direction: row; display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); flex-wrap: wrap; justify-content: center;}

.spec-item-urban-comfort-joggers-charcoal {max-width: 300px; padding: clamp(1.5rem, 2vw, 2rem); border-radius: var(--radius-md); gap: 0.5rem; display: flex; flex: 1 1 calc(50% - 1.25rem); flex-direction: column; min-width: 200px; background: var(--color-bg-card);}

.spec-label-urban-comfort-joggers-charcoal {font-size: clamp(0.875rem, 1vw, 1rem); text-transform: uppercase; margin: 0; color: var(--color-text-primary); font-weight: 600; letter-spacing: 0.05em;}

.spec-value-urban-comfort-joggers-charcoal {color: var(--color-text-secondary); margin: 0; line-height: 1.6; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.care-text-urban-comfort-joggers-charcoal {margin: 0 auto; max-width: 800px;}

.care-paragraph-urban-comfort-joggers-charcoal {line-height: 1.7; margin: 0; color: var(--color-text-secondary); text-align: center; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.manufacturing-section-urban-comfort-joggers-charcoal {overflow: hidden; background: var(--color-bg-primary); padding: clamp(3rem, 6vw, 5rem) 0;}

.manufacturing-content-urban-comfort-joggers-charcoal {gap: clamp(2rem, 4vw, 4rem); flex-direction: row; display: flex; align-items: center;}

.manufacturing-image-block-urban-comfort-joggers-charcoal {max-width: 50%; flex: 1 1 50%;}

.manufacturing-image-urban-comfort-joggers-charcoal {display: block; border-radius: var(--radius-lg); max-height: 400px; height: auto; width: 100%; object-fit: cover;}

.manufacturing-text-block-urban-comfort-joggers-charcoal {max-width: 50%; flex: 1 1 50%;}

.manufacturing-title-urban-comfort-joggers-charcoal {font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); line-height: 1.3; margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; font-weight: 700; font-family: var(--font-heading); color: var(--color-text-primary);}

.manufacturing-paragraph-urban-comfort-joggers-charcoal {font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); line-height: 1.7; margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; color: var(--color-text-secondary);}

.disclaimer-section-urban-comfort-joggers-charcoal {overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0; background: var(--color-bg-secondary);}

.disclaimer-box-urban-comfort-joggers-charcoal {padding: clamp(1.5rem, 3vw, 2rem); max-width: 800px; background: var(--color-bg-tertiary); margin: 0 auto; border-left: 4px solid var(--color-secondary); border-radius: var(--radius-md);}

.disclaimer-title-urban-comfort-joggers-charcoal {font-weight: 600; font-size: clamp(1.125rem, 2vw, 1.375rem); margin: 0 0 clamp(0.75rem, 1vw, 1rem) 0; font-family: var(--font-heading); color: #fffbff;}

.disclaimer-text-urban-comfort-joggers-charcoal {margin: 0; font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); line-height: 1.7; color: #d0d0d0;}

.related-section-urban-comfort-joggers-charcoal {padding: clamp(3rem, 6vw, 5rem) 0; background: var(--color-bg-primary); overflow: hidden;}

.related-content-urban-comfort-joggers-charcoal {display: flex; gap: clamp(2rem, 4vw, 3rem); flex-direction: column;}

.related-title-urban-comfort-joggers-charcoal {font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); line-height: 1.3; font-weight: 700; text-align: center; margin: 0; font-family: var(--font-heading); color: var(--color-text-primary);}

.related-cards-grid-urban-comfort-joggers-charcoal {gap: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row;}

.related-card-urban-comfort-joggers-charcoal {flex-direction: column; background: var(--color-bg-card); transition: all 0.3s ease; padding: clamp(1rem, 2vw, 1.5rem); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; gap: clamp(1rem, 2vw, 1.25rem); flex: 1 1 calc(33.333% - 1.67rem); max-width: 350px; border-radius: var(--radius-md); min-width: 250px;}

.related-card-urban-comfort-joggers-charcoal:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}

.related-card-link-urban-comfort-joggers-charcoal {flex-direction: column; gap: clamp(0.75rem, 1vw, 1rem); display: flex; text-decoration: none;}

.related-card-image-urban-comfort-joggers-charcoal {object-fit: cover; width: 100%; display: block; border-radius: var(--radius-md); height: auto; aspect-ratio: 3 / 2;}

.related-card-title-urban-comfort-joggers-charcoal {font-weight: 600; line-height: 1.3; color: var(--color-text-primary); font-size: clamp(1rem, 1.5vw, 1.25rem); font-family: var(--font-heading); margin: 0; transition: color 0.3s ease;}

.related-card-urban-comfort-joggers-charcoal:hover .related-card-title-urban-comfort-joggers-charcoal {
  color: var(--color-primary);
}

.related-card-description-urban-comfort-joggers-charcoal {margin: 0; line-height: 1.6; font-size: clamp(0.8125rem, 1vw + 0.5rem, 0.9375rem); color: var(--color-text-secondary);}

.related-card-price-urban-comfort-joggers-charcoal {font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--color-primary); font-weight: 700; font-family: var(--font-heading); margin: 0;}

.related-card-btn-urban-comfort-joggers-charcoal {letter-spacing: 0.05em; transition: all 0.3s ease; align-items: center; display: flex; border: none; min-height: 44px; justify-content: center; background: var(--color-primary); width: 100%; font-size: clamp(0.8125rem, 1vw, 0.9375rem); border-radius: var(--radius-md); color: #ffffff; cursor: pointer; font-weight: 700; text-transform: uppercase; padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.25rem, 2vw, 1.75rem);}

.related-card-btn-urban-comfort-joggers-charcoal:hover {transform: translateY(-2px); background: var(--color-primary-hover);}

@media (max-width: 1023px) {
  .hero-card-content-urban-comfort-joggers-charcoal {
    flex-direction: column;
  }

  .hero-image-block-urban-comfort-joggers-charcoal,
  .hero-info-block-urban-comfort-joggers-charcoal {flex: 1 1 100%; max-width: 100%;}

  .overview-content-urban-comfort-joggers-charcoal {
    flex-direction: column;
  }

  .overview-text-block-urban-comfort-joggers-charcoal,
  .overview-image-block-urban-comfort-joggers-charcoal {flex: 1 1 100%; max-width: 100%;}

  .styling-content-urban-comfort-joggers-charcoal {
    flex-direction: column;
  }

  .styling-text-block-urban-comfort-joggers-charcoal,
  .styling-image-block-urban-comfort-joggers-charcoal {flex: 1 1 100%; max-width: 100%;}

  .manufacturing-content-urban-comfort-joggers-charcoal {
    flex-direction: column;
  }

  .manufacturing-image-block-urban-comfort-joggers-charcoal,
  .manufacturing-text-block-urban-comfort-joggers-charcoal {max-width: 100%; flex: 1 1 100%;}

  .feature-card-urban-comfort-joggers-charcoal {max-width: 100%; flex: 1 1 calc(100% - 0.75rem);}

  .related-card-urban-comfort-joggers-charcoal {
    flex: 1 1 calc(50% - 0.75rem);
  }
}

@media (max-width: 768px) {
  .related-card-urban-comfort-joggers-charcoal {flex: 1 1 100%; max-width: 100%;}

  .feature-card-urban-comfort-joggers-charcoal {flex: 1 1 100%; max-width: 100%;}

  .hero-info-block-urban-comfort-joggers-charcoal {
    gap: clamp(0.75rem, 1.5vw, 1rem);
  }
}

.main-linen-blend-crew-neck-cream {overflow: hidden; width: 100%;}

.container {margin: 0 auto; display: block; padding: 0 clamp(1rem, 4vw, 2rem); max-width: 1440px;}

.hero-section-linen-blend-crew-neck-cream {background: var(--color-bg-primary); overflow: hidden; padding: clamp(2rem, 6vw, 4rem) 0;}

.breadcrumbs-linen-blend-crew-neck-cream {align-items: center; flex-direction: row; font-size: clamp(0.75rem, 1vw + 0.5rem, 0.875rem); display: flex; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); gap: 0.5rem;}

.breadcrumbs-linen-blend-crew-neck-cream a {text-decoration: none; color: var(--color-primary); transition: all 0.3s ease;}

.breadcrumbs-linen-blend-crew-neck-cream a:hover {color: var(--color-primary-hover); text-decoration: underline;}

.breadcrumb-separator-linen-blend-crew-neck-cream {
  color: var(--color-text-muted);
}

.breadcrumb-current-linen-blend-crew-neck-cream {
  color: var(--color-text-secondary);
}

.hero-card-wrapper-linen-blend-crew-neck-cream {align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); flex-direction: column; display: flex;}

.hero-card-inner-linen-blend-crew-neck-cream {gap: clamp(2rem, 4vw, 3rem); display: flex; background: var(--color-bg-card); flex-direction: column; padding: clamp(2rem, 5vw, 3rem); box-shadow: var(--shadow-md); border-radius: var(--radius-lg); align-items: center; margin: 0 auto; width: 100%; max-width: 900px;}

.hero-image-container-linen-blend-crew-neck-cream {max-width: 500px; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md);}

.hero-image-linen-blend-crew-neck-cream {width: 100%; object-fit: cover; display: block; height: 100%;}

.hero-content-linen-blend-crew-neck-cream {flex-direction: column; text-align: center; gap: clamp(1rem, 2vw, 1.5rem); display: flex; width: 100%;}

.hero-badges-linen-blend-crew-neck-cream {flex-direction: row; justify-content: center; gap: 0.75rem; flex-wrap: wrap; display: flex;}

.badge-bestseller-linen-blend-crew-neck-cream,
.badge-material-linen-blend-crew-neck-cream {padding: 0.375rem 0.875rem; font-weight: 600; color: var(--color-text-primary); background: var(--color-secondary); border-radius: var(--radius-full); letter-spacing: 0.5px; font-size: clamp(0.7rem, 1vw + 0.4rem, 0.875rem); display: inline-block;}

.hero-title-linen-blend-crew-neck-cream {word-wrap: break-word; color: var(--color-text-primary); line-height: 1.2; font-weight: 700; margin: 0; font-family: var(--font-heading); font-size: clamp(1.75rem, 5vw + 1rem, 3rem); overflow-wrap: break-word;}

.hero-summary-linen-blend-crew-neck-cream {max-width: 600px; line-height: 1.6; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); margin: 0; margin-right: auto; margin-left: auto;}

.product-buy-block-linen-blend-crew-neck-cream {width: 100%; display: flex; gap: clamp(1rem, 2vw, 1.5rem); max-width: 400px; margin: clamp(1rem, 3vw, 2rem) auto 0; flex-direction: column;}

.product-price-linen-blend-crew-neck-cream {font-weight: 700; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); color: var(--color-primary); text-align: center; margin: 0;}

.qty-selector-linen-blend-crew-neck-cream {gap: 0.5rem; justify-content: center; align-items: center; padding: 0.5rem; background: var(--color-bg-secondary); border-radius: var(--radius-md); display: flex; flex-direction: row; width: 100%;}

.qty-btn-linen-blend-crew-neck-cream {display: flex; font-weight: 600; border: 1px solid var(--color-border-light); min-width: 40px; cursor: pointer; transition: all 0.3s ease; color: var(--color-text-primary); height: 40px; font-size: 1.125rem; background: var(--color-bg-secondary); align-items: center; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); justify-content: center;}

.qty-btn-linen-blend-crew-neck-cream:hover {background: var(--color-primary); border-color: var(--color-primary); color: white;}

.qty-input-linen-blend-crew-neck-cream {font-weight: 600; padding: 0.5rem; border: none; color: var(--color-text-primary); text-align: center; background: transparent; width: 60px; font-size: 1rem;}

.qty-input-linen-blend-crew-neck-cream::-webkit-outer-spin-button,
.qty-input-linen-blend-crew-neck-cream::-webkit-inner-spin-button {margin: 0; -webkit-appearance: none;}

.qty-input-linen-blend-crew-neck-cream[type=number] {
  -moz-appearance: textfield;
}

.add-to-cart-btn-linen-blend-crew-neck-cream {align-items: center; width: 100%; min-height: 48px; padding: clamp(0.875rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem); text-transform: uppercase; color: white; border-radius: var(--radius-md); display: flex; letter-spacing: 1px; justify-content: center; font-weight: 700; font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); transition: all 0.3s ease; border: none; background: var(--color-primary); cursor: pointer;}

.add-to-cart-btn-linen-blend-crew-neck-cream:hover {background: var(--color-primary-hover); transform: translateY(-2px);}

.add-to-cart-btn-linen-blend-crew-neck-cream:active {
  transform: translateY(0);
}

.overview-section-linen-blend-crew-neck-cream {overflow: hidden; padding: clamp(3rem, 8vw, 5rem) 0; background: var(--color-bg-secondary);}

.overview-content-linen-blend-crew-neck-cream {gap: clamp(2rem, 4vw, 4rem); flex-direction: row; align-items: center; display: flex;}

.overview-text-linen-blend-crew-neck-cream {display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); max-width: 50%; flex: 1 1 50%;}

.overview-image-linen-blend-crew-neck-cream {border-radius: var(--radius-lg); aspect-ratio: 4 / 5; flex: 1 1 50%; max-width: 50%; overflow: hidden;}

.overview-img-linen-blend-crew-neck-cream {object-fit: cover; width: 100%; height: 100%; display: block;}

.overview-title-linen-blend-crew-neck-cream {font-size: clamp(1.5rem, 4vw + 0.5rem, 2.5rem); word-wrap: break-word; font-family: var(--font-heading); font-weight: 700; overflow-wrap: break-word; margin: 0; color: var(--color-text-primary); line-height: 1.2;}

.overview-paragraph-linen-blend-crew-neck-cream {line-height: 1.7; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); margin: 0; color: var(--color-text-secondary);}

.features-section-linen-blend-crew-neck-cream {padding: clamp(3rem, 8vw, 5rem) 0; overflow: hidden; background: var(--color-bg-primary);}

.features-content-linen-blend-crew-neck-cream {display: flex; gap: clamp(2rem, 4vw, 3rem); flex-direction: column;}

.features-title-linen-blend-crew-neck-cream {line-height: 1.2; overflow-wrap: break-word; text-align: center; color: var(--color-text-primary); font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw + 0.5rem, 2.5rem); word-wrap: break-word; margin: 0; font-weight: 700;}

.features-grid-linen-blend-crew-neck-cream {gap: clamp(1.5rem, 3vw, 2.5rem); flex-direction: row; flex-wrap: wrap; justify-content: center; display: flex;}

.feature-card-linen-blend-crew-neck-cream {box-shadow: var(--shadow-sm); background: var(--color-bg-card); border-radius: var(--radius-md); gap: 1rem; min-width: 250px; max-width: 300px; padding: clamp(1.5rem, 3vw, 2rem); flex: 1 1 calc(50% - clamp(0.75rem, 1.5vw, 1.25rem)); display: flex; transition: all 0.3s ease; flex-direction: column;}

.feature-card-linen-blend-crew-neck-cream:hover {box-shadow: var(--shadow-md); transform: translateY(-4px);}

.feature-icon-linen-blend-crew-neck-cream {font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--color-primary);}

.feature-card-title-linen-blend-crew-neck-cream {margin: 0; overflow-wrap: break-word; color: var(--color-text-primary); font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem); font-weight: 700; line-height: 1.3; word-wrap: break-word;}

.feature-card-text-linen-blend-crew-neck-cream {font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); margin: 0; line-height: 1.6; color: var(--color-text-secondary);}

.styling-section-linen-blend-crew-neck-cream {padding: clamp(3rem, 8vw, 5rem) 0; background: var(--color-bg-secondary); overflow: hidden;}

.styling-content-linen-blend-crew-neck-cream {align-items: center; gap: clamp(2rem, 4vw, 4rem); flex-direction: row; display: flex;}

.styling-text-linen-blend-crew-neck-cream {display: flex; flex: 1 1 50%; max-width: 50%; gap: clamp(1rem, 2vw, 1.5rem); flex-direction: column;}

.styling-image-linen-blend-crew-neck-cream {border-radius: var(--radius-lg); aspect-ratio: 3 / 4; overflow: hidden; max-width: 50%; flex: 1 1 50%;}

.styling-img-linen-blend-crew-neck-cream {display: block; width: 100%; object-fit: cover; height: 100%;}

.styling-title-linen-blend-crew-neck-cream {font-family: var(--font-heading); overflow-wrap: break-word; word-wrap: break-word; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.5rem); font-weight: 700; margin: 0; line-height: 1.2; color: var(--color-text-primary);}

.styling-paragraph-linen-blend-crew-neck-cream {color: var(--color-text-secondary); margin: 0; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); line-height: 1.7;}

.disclaimer-section-linen-blend-crew-neck-cream {background: var(--color-bg-primary); padding: clamp(2rem, 6vw, 3rem) 0; overflow: hidden;}

.disclaimer-content-linen-blend-crew-neck-cream {gap: clamp(1rem, 2vw, 1.5rem); align-items: center; flex-direction: column; display: flex;}

.disclaimer-callout-linen-blend-crew-neck-cream {padding: clamp(1.5rem, 3vw, 2rem); border-left: 4px solid var(--color-secondary); max-width: 700px; border-radius: var(--radius-md); background: var(--color-bg-card); width: 100%;}

.disclaimer-title-linen-blend-crew-neck-cream {color: var(--color-text-primary); margin: 0 0 0.75rem 0; font-weight: 700; font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);}

.disclaimer-text-linen-blend-crew-neck-cream {font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); color: var(--color-text-secondary); margin: 0; line-height: 1.6;}

.specifications-section-linen-blend-crew-neck-cream {background: var(--color-bg-secondary); padding: clamp(3rem, 8vw, 5rem) 0; overflow: hidden;}

.specifications-content-linen-blend-crew-neck-cream {gap: clamp(2rem, 4vw, 3rem); flex-direction: column; display: flex;}

.specifications-title-linen-blend-crew-neck-cream {font-size: clamp(1.5rem, 4vw + 0.5rem, 2.5rem); font-family: var(--font-heading); line-height: 1.2; color: var(--color-text-primary); font-weight: 700; text-align: center; overflow-wrap: break-word; margin: 0; word-wrap: break-word;}

.specs-wrapper-linen-blend-crew-neck-cream {flex-direction: row; justify-content: center; gap: clamp(2rem, 4vw, 3rem); display: flex;}

.specs-column-linen-blend-crew-neck-cream {flex: 1 1 50%; flex-direction: column; display: flex; max-width: 350px; gap: 1.25rem;}

.specs-subheading-linen-blend-crew-neck-cream {color: var(--color-text-primary); margin: 0; font-size: clamp(1.125rem, 2vw + 0.5rem, 1.375rem); font-weight: 700;}

.specs-list-linen-blend-crew-neck-cream {padding: 0; gap: 0.875rem; margin: 0; flex-direction: column; display: flex; list-style: none;}

.specs-item-linen-blend-crew-neck-cream {line-height: 1.6; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);}

.specs-label-linen-blend-crew-neck-cream {font-weight: 600; color: var(--color-text-primary);}

.care-section-linen-blend-crew-neck-cream {background: var(--color-bg-primary); padding: clamp(3rem, 8vw, 5rem) 0; overflow: hidden;}

.care-content-linen-blend-crew-neck-cream {align-items: center; gap: clamp(2rem, 4vw, 4rem); flex-direction: row; display: flex;}

.care-image-linen-blend-crew-neck-cream {aspect-ratio: 4 / 5; max-width: 50%; overflow: hidden; border-radius: var(--radius-lg); flex: 1 1 50%;}

.care-img-linen-blend-crew-neck-cream {height: 100%; width: 100%; display: block; object-fit: cover;}

.care-text-linen-blend-crew-neck-cream {flex-direction: column; max-width: 50%; display: flex; flex: 1 1 50%; gap: clamp(1rem, 2vw, 1.5rem);}

.care-title-linen-blend-crew-neck-cream {font-family: var(--font-heading); word-wrap: break-word; line-height: 1.2; margin: 0; overflow-wrap: break-word; font-weight: 700; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.5rem); color: var(--color-text-primary);}

.care-paragraph-linen-blend-crew-neck-cream {font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); margin: 0; color: var(--color-text-secondary); line-height: 1.7;}

.related-products-section-linen-blend-crew-neck-cream {padding: clamp(3rem, 8vw, 5rem) 0; overflow: hidden; background: var(--color-bg-secondary);}

.related-products-content-linen-blend-crew-neck-cream {display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem);}

.related-products-title-linen-blend-crew-neck-cream {font-weight: 700; text-align: center; margin: 0; line-height: 1.2; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.5rem); overflow-wrap: break-word; color: var(--color-text-primary); font-family: var(--font-heading); word-wrap: break-word;}

.related-products-subtitle-linen-blend-crew-neck-cream {color: var(--color-text-secondary); margin-left: auto; max-width: 600px; margin-right: auto; margin: 0; text-align: center; font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);}

.related-products-grid-linen-blend-crew-neck-cream {display: flex; flex-wrap: wrap; flex-direction: row; gap: clamp(1.5rem, 3vw, 2.5rem); justify-content: center;}

.product-card-linen-blend-crew-neck-cream {padding: 1rem; transition: all 0.3s ease; gap: 1rem; box-shadow: var(--shadow-sm); display: flex; background: var(--color-bg-card); flex: 1 1 calc(33.333% - clamp(1rem, 2vw, 1.667rem)); min-width: 200px; overflow: hidden; flex-direction: column; border-radius: var(--radius-md); max-width: 300px;}

.product-card-linen-blend-crew-neck-cream:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}

.product-card-link-linen-blend-crew-neck-cream {flex-direction: column; display: flex; text-decoration: none; gap: 0.75rem;}

.product-card-image-linen-blend-crew-neck-cream {aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; width: 100%;}

.product-img-linen-blend-crew-neck-cream {display: block; height: 100%; width: 100%; transition: all 0.3s ease; object-fit: cover;}

.product-card-linen-blend-crew-neck-cream:hover .product-img-linen-blend-crew-neck-cream {
  transform: scale(1.05);
}

.product-card-name-linen-blend-crew-neck-cream {line-height: 1.4; font-weight: 600; color: var(--color-text-primary); word-wrap: break-word; overflow-wrap: break-word; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); margin: 0;}

.product-card-price-linen-blend-crew-neck-cream {font-weight: 700; color: var(--color-primary); margin: 0; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.product-card-add-btn-linen-blend-crew-neck-cream {transition: all 0.3s ease; font-weight: 700; padding: 0.75rem 1.5rem; width: 100%; border: none; display: flex; cursor: pointer; color: white; border-radius: var(--radius-md); background: var(--color-primary); align-items: center; justify-content: center; letter-spacing: 0.5px; min-height: 44px; text-transform: uppercase; font-size: clamp(0.75rem, 1vw + 0.5rem, 0.875rem);}

.product-card-add-btn-linen-blend-crew-neck-cream:hover {transform: translateY(-2px); background: var(--color-primary-hover);}

@media (max-width: 1024px) {
  .overview-content-linen-blend-crew-neck-cream,
  .styling-content-linen-blend-crew-neck-cream,
  .care-content-linen-blend-crew-neck-cream {
    flex-direction: column;
  }

  .overview-text-linen-blend-crew-neck-cream,
  .overview-image-linen-blend-crew-neck-cream,
  .styling-text-linen-blend-crew-neck-cream,
  .styling-image-linen-blend-crew-neck-cream,
  .care-image-linen-blend-crew-neck-cream,
  .care-text-linen-blend-crew-neck-cream {max-width: 100%; flex: 1 1 100%;}

  .specs-wrapper-linen-blend-crew-neck-cream {
    flex-direction: column;
  }

  .specs-column-linen-blend-crew-neck-cream {flex: 1 1 100%; max-width: 100%;}

  .product-card-linen-blend-crew-neck-cream {
    flex: 1 1 calc(50% - clamp(0.75rem, 1.5vw, 1.25rem));
  }
}

@media (max-width: 768px) {
  .hero-card-inner-linen-blend-crew-neck-cream {gap: clamp(1.5rem, 3vw, 2rem); padding: clamp(1.5rem, 3vw, 2rem); flex-direction: column;}

  .hero-image-container-linen-blend-crew-neck-cream {aspect-ratio: 3 / 4; max-width: 100%;}

  .hero-content-linen-blend-crew-neck-cream {
    width: 100%;
  }

  .features-grid-linen-blend-crew-neck-cream {
    flex-direction: column;
  }

  .feature-card-linen-blend-crew-neck-cream {flex: 1 1 100%; max-width: 100%;}

  .product-card-linen-blend-crew-neck-cream {flex: 1 1 100%; max-width: 100%;}

  .related-products-grid-linen-blend-crew-neck-cream {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .hero-title-linen-blend-crew-neck-cream {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }

  .overview-title-linen-blend-crew-neck-cream,
  .styling-title-linen-blend-crew-neck-cream,
  .care-title-linen-blend-crew-neck-cream {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
  }

  .features-title-linen-blend-crew-neck-cream,
  .specifications-title-linen-blend-crew-neck-cream,
  .related-products-title-linen-blend-crew-neck-cream {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
  }

  .product-buy-block-linen-blend-crew-neck-cream {
    max-width: 100%;
  }

  .qty-selector-linen-blend-crew-neck-cream {
    padding: 0.375rem;
  }

  .qty-btn-linen-blend-crew-neck-cream {padding: 0.375rem 0.5rem; height: 36px; min-width: 36px;}
}

.main-leather-slip-on-loafer-cognac {width: 100%; overflow: hidden;}

.container {margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); display: block; max-width: 1440px;}

.hero-section-leather-slip-on-loafer-cognac {background: var(--color-bg-primary); overflow: hidden; padding: clamp(2rem, 6vw, 4rem) 0;}

.breadcrumbs-leather-slip-on-loafer-cognac {flex-direction: row; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.5rem;}

.breadcrumbs-leather-slip-on-loafer-cognac a {transition: all 0.3s ease; font-size: clamp(0.75rem, 1vw, 0.875rem); text-decoration: none; color: var(--color-accent);}

.breadcrumbs-leather-slip-on-loafer-cognac a:hover {color: var(--color-accent-hover); text-decoration: underline;}

.breadcrumbs-leather-slip-on-loafer-cognac span {font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--color-text-secondary);}

.hero-content-leather-slip-on-loafer-cognac {flex-direction: column; gap: clamp(2rem, 4vw, 3rem); display: flex;}

.hero-card-leather-slip-on-loafer-cognac {overflow: hidden; box-shadow: var(--shadow-lg); gap: 0; border-radius: var(--radius-lg); background: var(--color-bg-card); flex-direction: column; display: flex;}

.hero-image-wrapper-leather-slip-on-loafer-cognac {background: var(--color-bg-secondary); max-height: 450px; align-items: center; justify-content: center; width: 100%; display: flex;}

.hero-image-leather-slip-on-loafer-cognac {width: 100%; height: 100%; object-fit: cover; display: block;}

.hero-text-wrapper-leather-slip-on-loafer-cognac {padding: clamp(2rem, 4vw, 3rem); background: var(--color-bg-card);}

.product-buy-block-leather-slip-on-loafer-cognac {flex-direction: column; display: flex; gap: clamp(1rem, 2vw, 1.5rem);}

.product-title-leather-slip-on-loafer-cognac {word-wrap: break-word; color: var(--color-text-primary); font-weight: 700; line-height: 1.2; overflow-wrap: break-word; margin: 0; font-size: clamp(1.75rem, 5vw, 2.5rem);}

.product-price-leather-slip-on-loafer-cognac {font-weight: 600; font-size: clamp(1.5rem, 4vw, 2rem); color: var(--color-accent); margin: 0;}

.product-summary-leather-slip-on-loafer-cognac {line-height: 1.6; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw, 1rem); margin: 0;}

.qty-selector-leather-slip-on-loafer-cognac {gap: 0.5rem; padding: 0.25rem; display: flex; flex-direction: row; width: fit-content; border-radius: var(--radius-md); border: 1px solid var(--color-border); align-items: center;}

.qty-selector-leather-slip-on-loafer-cognac button {font-size: 1.25rem; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: var(--color-text-primary); background: transparent; padding: 0.5rem 0.75rem; display: flex; border: none;}

.qty-selector-leather-slip-on-loafer-cognac button:hover {background: var(--color-bg-secondary); color: var(--color-accent);}

.qty-input-leather-slip-on-loafer-cognac {font-weight: 600; width: 3rem; color: var(--color-text-primary); text-align: center; border: none; font-size: 1rem; background: transparent;}

.qty-input-leather-slip-on-loafer-cognac:focus {
  outline: none;
}

.add-to-cart-btn-leather-slip-on-loafer-cognac {background: var(--color-accent); padding: clamp(0.875rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem); text-transform: uppercase; font-size: clamp(0.875rem, 1vw, 1rem); transition: all 0.3s ease; cursor: pointer; border: none; font-weight: 700; color: #ffffff; width: 100%; border-radius: var(--radius-md); letter-spacing: 0.05em;}

.add-to-cart-btn-leather-slip-on-loafer-cognac:hover {transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--color-accent-hover);}

.add-to-cart-btn-leather-slip-on-loafer-cognac:active {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .hero-card-leather-slip-on-loafer-cognac {
    flex-direction: row;
  }

  .hero-image-wrapper-leather-slip-on-loafer-cognac {flex: 1 1 50%; max-height: none; min-height: 400px;}

  .hero-text-wrapper-leather-slip-on-loafer-cognac {
    flex: 1 1 50%;
  }
}

.overview-section-leather-slip-on-loafer-cognac {padding: clamp(3rem, 8vw, 5rem) 0; overflow: hidden; background: var(--color-bg-secondary);}

.overview-content-leather-slip-on-loafer-cognac {gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column;}

.overview-text-leather-slip-on-loafer-cognac {
  flex: 1 1 100%;
}

.overview-title-leather-slip-on-loafer-cognac {margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); word-wrap: break-word; font-weight: 700; color: var(--color-text-primary); overflow-wrap: break-word; line-height: 1.2;}

.overview-paragraph-leather-slip-on-loafer-cognac {margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; line-height: 1.7; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.overview-paragraph-leather-slip-on-loafer-cognac:last-of-type {
  margin-bottom: 0;
}

.overview-image-leather-slip-on-loafer-cognac {
  flex: 1 1 100%;
}

.overview-image-img-leather-slip-on-loafer-cognac {max-height: 350px; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-lg); display: block;}

@media (min-width: 768px) {
  .overview-content-leather-slip-on-loafer-cognac {display: flex; gap: clamp(2rem, 5vw, 4rem); flex-direction: row; align-items: center;}

  .overview-text-leather-slip-on-loafer-cognac {max-width: 50%; flex: 1 1 50%;}

  .overview-image-leather-slip-on-loafer-cognac {flex: 1 1 50%; max-width: 50%;}
}

.features-section-leather-slip-on-loafer-cognac {background: var(--color-bg-tertiary); overflow: hidden; padding: clamp(3rem, 8vw, 5rem) 0;}

.features-content-leather-slip-on-loafer-cognac {gap: clamp(2rem, 4vw, 3rem); flex-direction: column; display: flex;}

.features-header-leather-slip-on-loafer-cognac {
  text-align: center;
}

.features-title-leather-slip-on-loafer-cognac {font-weight: 700; margin: 0; overflow-wrap: break-word; line-height: 1.2; color: #fcfbff; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); word-wrap: break-word;}

.features-grid-leather-slip-on-loafer-cognac {justify-content: center; gap: clamp(1.5rem, 3vw, 2.5rem); flex-wrap: wrap; flex-direction: column; display: flex;}

.feature-card-leather-slip-on-loafer-cognac {display: flex; flex-direction: column; background: var(--color-bg-card); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 3vw, 2.5rem); flex: 1 1 100%; border-radius: var(--radius-md); gap: 1rem;}

.feature-icon-leather-slip-on-loafer-cognac {height: clamp(2.5rem, 5vw, 3.5rem); font-size: clamp(1.75rem, 3vw, 2.5rem); align-items: center; color: var(--color-accent); display: flex;}

.feature-title-leather-slip-on-loafer-cognac {line-height: 1.3; color: var(--color-text-primary); font-weight: 600; font-size: clamp(1rem, 2vw, 1.25rem); margin: 0;}

.feature-text-leather-slip-on-loafer-cognac {margin: 0; line-height: 1.6; font-size: clamp(0.875rem, 1vw, 1rem); color: var(--color-text-secondary);}

@media (min-width: 768px) {
  .features-grid-leather-slip-on-loafer-cognac {flex-direction: row; gap: clamp(1.5rem, 3vw, 2rem); display: flex;}

  .feature-card-leather-slip-on-loafer-cognac {
    flex: 1 1 calc(50% - clamp(0.75rem, 1.5vw, 1rem));
  }
}

.construction-section-leather-slip-on-loafer-cognac {overflow: hidden; background: var(--color-bg-secondary); padding: clamp(3rem, 8vw, 5rem) 0;}

.construction-content-leather-slip-on-loafer-cognac {display: flex; gap: clamp(2rem, 4vw, 3rem); flex-direction: column;}

.construction-text-leather-slip-on-loafer-cognac {
  flex: 1 1 100%;
}

.construction-title-leather-slip-on-loafer-cognac {font-weight: 700; overflow-wrap: break-word; word-wrap: break-word; margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; color: var(--color-text-primary); line-height: 1.2; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem);}

.construction-paragraph-leather-slip-on-loafer-cognac {line-height: 1.7; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; color: var(--color-text-secondary);}

.construction-paragraph-leather-slip-on-loafer-cognac:last-of-type {
  margin-bottom: 0;
}

.construction-image-leather-slip-on-loafer-cognac {
  flex: 1 1 100%;
}

.construction-image-img-leather-slip-on-loafer-cognac {object-fit: cover; display: block; border-radius: var(--radius-lg); max-height: 350px; width: 100%; height: auto;}

@media (min-width: 768px) {
  .construction-content-leather-slip-on-loafer-cognac {gap: clamp(2rem, 5vw, 4rem); align-items: center; display: flex; flex-direction: row;}

  .construction-text-leather-slip-on-loafer-cognac {flex: 1 1 50%; max-width: 50%;}

  .construction-image-leather-slip-on-loafer-cognac {flex: 1 1 50%; max-width: 50%;}
}

.disclaimer-section-leather-slip-on-loafer-cognac {overflow: hidden; background: var(--color-bg-primary); padding: clamp(2rem, 4vw, 3rem) 0;}

.disclaimer-content-leather-slip-on-loafer-cognac {display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem);}

.disclaimer-box-leather-slip-on-loafer-cognac {border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); padding: clamp(1.5rem, 3vw, 2rem); background: var(--color-bg-secondary);}

.disclaimer-title-leather-slip-on-loafer-cognac {margin: 0 0 0.75rem 0; font-weight: 600; font-size: clamp(1rem, 2vw, 1.25rem); color: var(--color-text-primary);}

.disclaimer-text-leather-slip-on-loafer-cognac {line-height: 1.6; margin: 0; font-size: clamp(0.875rem, 1vw, 1rem); color: var(--color-text-secondary);}

.care-section-leather-slip-on-loafer-cognac {padding: clamp(3rem, 8vw, 5rem) 0; overflow: hidden; background: var(--color-bg-secondary);}

.care-content-leather-slip-on-loafer-cognac {flex-direction: column; display: flex; gap: clamp(2rem, 4vw, 3rem);}

.care-text-leather-slip-on-loafer-cognac {
  flex: 1 1 100%;
}

.care-title-leather-slip-on-loafer-cognac {font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); word-wrap: break-word; margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; overflow-wrap: break-word;}

.care-paragraph-leather-slip-on-loafer-cognac {line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.care-paragraph-leather-slip-on-loafer-cognac:last-of-type {
  margin-bottom: 0;
}

.care-image-leather-slip-on-loafer-cognac {
  flex: 1 1 100%;
}

.care-image-img-leather-slip-on-loafer-cognac {max-height: 350px; object-fit: cover; display: block; height: auto; width: 100%; border-radius: var(--radius-lg);}

@media (min-width: 768px) {
  .care-content-leather-slip-on-loafer-cognac {flex-direction: row-reverse; gap: clamp(2rem, 5vw, 4rem); align-items: center; display: flex;}

  .care-text-leather-slip-on-loafer-cognac {flex: 1 1 50%; max-width: 50%;}

  .care-image-leather-slip-on-loafer-cognac {max-width: 50%; flex: 1 1 50%;}
}

.specifications-section-leather-slip-on-loafer-cognac {padding: clamp(3rem, 8vw, 5rem) 0; background: var(--color-bg-primary); overflow: hidden;}

.specifications-content-leather-slip-on-loafer-cognac {gap: clamp(2rem, 4vw, 3rem); flex-direction: column; display: flex;}

.specifications-title-leather-slip-on-loafer-cognac {line-height: 1.2; overflow-wrap: break-word; margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); word-wrap: break-word; text-align: center; color: var(--color-text-primary); font-weight: 700;}

.specifications-grid-leather-slip-on-loafer-cognac {display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2rem); flex-direction: column;}

.spec-item-leather-slip-on-loafer-cognac {padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius-md); background: var(--color-bg-card); box-shadow: var(--shadow-sm);}

.spec-label-leather-slip-on-loafer-cognac {text-transform: uppercase; margin: 0 0 0.5rem 0; letter-spacing: 0.05em; font-size: clamp(0.875rem, 1vw, 1rem); color: var(--color-accent); font-weight: 600;}

.spec-value-leather-slip-on-loafer-cognac {color: var(--color-text-secondary); line-height: 1.6; margin: 0; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

@media (min-width: 768px) {
  .specifications-grid-leather-slip-on-loafer-cognac {gap: clamp(1.5rem, 3vw, 2rem); flex-direction: row; display: flex;}

  .spec-item-leather-slip-on-loafer-cognac {
    flex: 1 1 calc(50% - clamp(0.75rem, 1.5vw, 1rem));
  }
}

.related-section-leather-slip-on-loafer-cognac {padding: clamp(3rem, 8vw, 5rem) 0; background: var(--color-bg-tertiary); overflow: hidden;}

.related-content-leather-slip-on-loafer-cognac {flex-direction: column; display: flex; gap: clamp(2rem, 4vw, 3rem);}

.related-header-leather-slip-on-loafer-cognac {
  text-align: center;
}

.related-title-leather-slip-on-loafer-cognac {overflow-wrap: break-word; margin: 0 0 0.5rem 0; line-height: 1.2; word-wrap: break-word; color: #ffffff; font-weight: 700; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem);}

.related-subtitle-leather-slip-on-loafer-cognac {color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin: 0; font-size: clamp(0.875rem, 1vw, 1rem);}

.related-cards-leather-slip-on-loafer-cognac {flex-wrap: wrap; justify-content: center; display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2rem);}

.related-card-leather-slip-on-loafer-cognac {box-shadow: var(--shadow-md); flex: 1 1 100%; transition: all 0.3s ease; overflow: hidden; border-radius: var(--radius-md); display: flex; gap: 0; background: var(--color-bg-card); flex-direction: column;}

.related-card-leather-slip-on-loafer-cognac:hover {box-shadow: var(--shadow-lg); transform: translateY(-4px);}

.related-card-link-leather-slip-on-loafer-cognac {flex-direction: column; text-decoration: none; display: flex; gap: 0;}

.related-card-image-leather-slip-on-loafer-cognac {width: 100%; aspect-ratio: 3/2; display: block; object-fit: cover; height: auto;}

.related-card-title-leather-slip-on-loafer-cognac {font-weight: 600; color: var(--color-text-primary); line-height: 1.3; padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) 0.5rem clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.875rem, 1.5vw, 1.125rem); margin: 0;}

.related-card-price-leather-slip-on-loafer-cognac {font-weight: 600; padding: 0 clamp(1rem, 2vw, 1.5rem); color: var(--color-accent); margin: 0; font-size: clamp(1rem, 1.5vw, 1.25rem);}

.related-card-description-leather-slip-on-loafer-cognac {line-height: 1.5; font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--color-text-secondary); padding: 0.5rem clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem); margin: 0;}

.related-add-to-cart-btn-leather-slip-on-loafer-cognac {border: none; font-weight: 700; padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.5rem); letter-spacing: 0.05em; transition: all 0.3s ease; color: #ffffff; margin: 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem); border-radius: var(--radius-sm); text-transform: uppercase; font-size: clamp(0.75rem, 1vw, 0.875rem); background: var(--color-accent); width: auto; align-self: flex-start; cursor: pointer;}

.related-add-to-cart-btn-leather-slip-on-loafer-cognac:hover {background: var(--color-accent-hover); transform: translateY(-2px);}

.related-add-to-cart-btn-leather-slip-on-loafer-cognac:active {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .related-cards-leather-slip-on-loafer-cognac {flex-direction: row; display: flex; gap: clamp(1.5rem, 3vw, 2rem);}

  .related-card-leather-slip-on-loafer-cognac {
    flex: 1 1 calc(33.333% - clamp(1rem, 2vw, 1.333rem));
  }
}

@media (max-width: 767px) {
  .breadcrumbs-leather-slip-on-loafer-cognac {
    font-size: 0.75rem;
  }

  .product-buy-block-leather-slip-on-loafer-cognac {
    gap: 1rem;
  }
}

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

h1, h2, h3, h4, h5, h6, p {word-wrap: break-word; overflow-wrap: break-word;}

.main-merino-wool-beanie-charcoal {width: 100%; display: block; background: var(--color-bg-primary);}

.container {padding: 0 clamp(1rem, 4vw, 2rem); max-width: 1440px; margin: 0 auto;}

.hero-section-merino-wool-beanie-charcoal {padding: clamp(2rem, 6vw, 4rem) 0; overflow: hidden; background: var(--color-bg-primary);}

.hero-content-merino-wool-beanie-charcoal {gap: clamp(1.5rem, 3vw, 2.5rem); flex-direction: column; display: flex;}

.breadcrumbs-merino-wool-beanie-charcoal {flex-direction: row; font-size: clamp(0.75rem, 1vw, 0.95rem); gap: 0.75rem; margin-bottom: 2rem; align-items: center; display: flex;}

.breadcrumbs-merino-wool-beanie-charcoal a {color: var(--color-accent); text-decoration: none; transition: all 0.3s ease;}

.breadcrumbs-merino-wool-beanie-charcoal a:hover {color: var(--color-primary-hover); text-decoration: underline;}

.breadcrumbs-merino-wool-beanie-charcoal span {
  color: var(--color-text-secondary);
}

.breadcrumbs-merino-wool-beanie-charcoal span:last-child {font-weight: 600; color: var(--color-text-primary);}

.hero-card-merino-wool-beanie-charcoal {box-shadow: var(--shadow-md); gap: clamp(2rem, 4vw, 3rem); background: var(--color-bg-card); display: flex; border-radius: var(--radius-lg); flex-direction: column; padding: clamp(2rem, 4vw, 3rem);}

@media (min-width: 768px) {
  .hero-card-merino-wool-beanie-charcoal {align-items: center; flex-direction: row;}
}

.hero-image-wrapper-merino-wool-beanie-charcoal {flex: 1 1 100%; max-width: 100%;}

@media (min-width: 768px) {
  .hero-image-wrapper-merino-wool-beanie-charcoal {flex: 1 1 45%; max-width: 45%;}
}

.hero-image-merino-wool-beanie-charcoal {width: 100%; display: block; border-radius: var(--radius-md); max-height: 500px; height: auto; object-fit: cover;}

.hero-info-merino-wool-beanie-charcoal {max-width: 100%; gap: clamp(1rem, 2vw, 1.5rem); flex: 1 1 100%; flex-direction: column; display: flex;}

@media (min-width: 768px) {
  .hero-info-merino-wool-beanie-charcoal {flex: 1 1 55%; max-width: 55%;}
}

.hero-meta-merino-wool-beanie-charcoal {flex-wrap: wrap; flex-direction: row; display: flex; gap: 0.75rem;}

.meta-material-merino-wool-beanie-charcoal {color: #ffffff; letter-spacing: 0.05em; padding: 0.4rem 0.8rem; font-weight: 600; display: inline-block; font-size: clamp(0.75rem, 1vw, 0.85rem); border-radius: var(--radius-sm); text-transform: uppercase; background: var(--color-accent);}

.hero-title-merino-wool-beanie-charcoal {font-weight: 700; color: var(--color-text-primary); line-height: 1.2; font-family: var(--font-heading); font-size: clamp(1.75rem, 5vw + 1rem, 3.5rem);}

.hero-price-merino-wool-beanie-charcoal {letter-spacing: -0.02em; color: var(--color-accent); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700;}

.hero-summary-merino-wool-beanie-charcoal {font-size: clamp(0.9rem, 1vw + 0.5rem, 1.05rem); color: var(--color-text-secondary); line-height: 1.6;}

.product-buy-block-merino-wool-beanie-charcoal {display: flex; gap: 1.25rem; margin-top: 0.75rem; flex-direction: column;}

.qty-selector-merino-wool-beanie-charcoal {background: var(--color-bg-secondary); flex-direction: row; border-radius: var(--radius-sm); display: flex; width: fit-content; border: 2px solid var(--color-border); align-items: center;}

.qty-btn-merino-wool-beanie-charcoal {justify-content: center; background: transparent; display: flex; border: none; cursor: pointer; align-items: center; font-size: 1.5rem; padding: 0.5rem 0.75rem; transition: all 0.2s ease; color: var(--color-text-primary);}

.qty-btn-merino-wool-beanie-charcoal:hover {color: #ffffff; background: var(--color-bg-tertiary);}

.qty-input-merino-wool-beanie-charcoal {padding: 0.5rem 0.25rem; background: transparent; width: 3.5rem; border: none; text-align: center; font-weight: 600; font-size: 1rem; color: var(--color-text-primary);}

.qty-input-merino-wool-beanie-charcoal:focus {
  outline: none;
}

.qty-input-merino-wool-beanie-charcoal::-webkit-outer-spin-button,
.qty-input-merino-wool-beanie-charcoal::-webkit-inner-spin-button {margin: 0; -webkit-appearance: none;}

.qty-input-merino-wool-beanie-charcoal[type=number] {
  -moz-appearance: textfield;
}

.add-to-cart-btn-merino-wool-beanie-charcoal {cursor: pointer; width: 100%; padding: clamp(0.875rem, 2vw, 1.25rem) 2rem; color: #ffffff; min-height: 48px; letter-spacing: 0.05em; align-items: center; border: none; display: flex; justify-content: center; background: var(--color-accent); border-radius: var(--radius-md); transition: all 0.3s ease; text-transform: uppercase; font-weight: 700; font-size: clamp(0.95rem, 1.2vw, 1.1rem);}

.add-to-cart-btn-merino-wool-beanie-charcoal:hover {transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--color-primary-hover);}

.add-to-cart-btn-merino-wool-beanie-charcoal:active {
  transform: translateY(0);
}

.overview-section-merino-wool-beanie-charcoal {padding: clamp(3rem, 8vw, 6rem) 0; background: var(--color-bg-secondary); overflow: hidden;}

.overview-content-merino-wool-beanie-charcoal {gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column;}

@media (min-width: 768px) {
  .overview-content-merino-wool-beanie-charcoal {flex-direction: row; align-items: center;}
}

.overview-text-merino-wool-beanie-charcoal {flex: 1 1 100%; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); max-width: 100%; display: flex;}

@media (min-width: 768px) {
  .overview-text-merino-wool-beanie-charcoal {max-width: 50%; flex: 1 1 50%;}
}

.overview-title-merino-wool-beanie-charcoal {line-height: 1.2; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); color: var(--color-text-primary); font-family: var(--font-heading); font-weight: 700;}

.overview-paragraph-merino-wool-beanie-charcoal {line-height: 1.7; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.05rem); color: var(--color-text-secondary);}

.overview-image-merino-wool-beanie-charcoal {flex: 1 1 100%; max-width: 100%;}

@media (min-width: 768px) {
  .overview-image-merino-wool-beanie-charcoal {max-width: 50%; flex: 1 1 50%;}
}

.overview-image-img-merino-wool-beanie-charcoal {height: auto; width: 100%; max-height: 400px; object-fit: cover; display: block; border-radius: var(--radius-lg);}

.features-section-merino-wool-beanie-charcoal {background: var(--color-bg-primary); overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0;}

.features-content-merino-wool-beanie-charcoal {flex-direction: column; gap: clamp(2rem, 4vw, 3rem); display: flex;}

.features-title-merino-wool-beanie-charcoal {font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); font-family: var(--font-heading); font-weight: 700; line-height: 1.2; text-align: center; color: var(--color-text-primary);}

.features-grid-merino-wool-beanie-charcoal {flex-wrap: wrap; justify-content: center; display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); flex-direction: row;}

.feature-card-merino-wool-beanie-charcoal {flex: 1 1 calc(50% - clamp(0.75rem, 1.5vw, 1.25rem)); max-width: 100%; min-width: 200px; transition: all 0.3s ease; border-radius: var(--radius-md); background: var(--color-bg-card); box-shadow: var(--shadow-sm); gap: clamp(0.75rem, 1.5vw, 1.25rem); padding: clamp(1.5rem, 3vw, 2.5rem); flex-direction: column; display: flex;}

.feature-card-merino-wool-beanie-charcoal:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}

@media (min-width: 1024px) {
  .feature-card-merino-wool-beanie-charcoal {min-width: 180px; flex: 1 1 calc(25% - clamp(1.125rem, 2.25vw, 1.875rem));}
}

.feature-icon-merino-wool-beanie-charcoal {width: 50px; display: flex; height: 50px; align-items: center; color: var(--color-accent); font-size: 2rem; justify-content: center;}

.feature-name-merino-wool-beanie-charcoal {line-height: 1.3; font-family: var(--font-heading); color: var(--color-text-primary); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 700;}

.feature-text-merino-wool-beanie-charcoal {line-height: 1.6; font-size: clamp(0.85rem, 1vw, 0.95rem); color: var(--color-text-secondary);}

.design-section-merino-wool-beanie-charcoal {padding: clamp(3rem, 8vw, 6rem) 0; overflow: hidden; background: var(--color-bg-secondary);}

.design-content-merino-wool-beanie-charcoal {gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column;}

@media (min-width: 768px) {
  .design-content-merino-wool-beanie-charcoal {align-items: center; flex-direction: row;}
}

.design-image-merino-wool-beanie-charcoal {flex: 1 1 100%; max-width: 100%; order: -1;}

@media (min-width: 768px) {
  .design-image-merino-wool-beanie-charcoal {flex: 1 1 50%; max-width: 50%; order: 0;}
}

.design-image-img-merino-wool-beanie-charcoal {width: 100%; display: block; border-radius: var(--radius-lg); object-fit: cover; max-height: 400px; height: auto;}

.design-text-merino-wool-beanie-charcoal {display: flex; max-width: 100%; flex-direction: column; flex: 1 1 100%; gap: clamp(1rem, 2vw, 1.5rem);}

@media (min-width: 768px) {
  .design-text-merino-wool-beanie-charcoal {max-width: 50%; flex: 1 1 50%;}
}

.design-title-merino-wool-beanie-charcoal {font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); font-weight: 700; color: var(--color-text-primary); line-height: 1.2;}

.design-paragraph-merino-wool-beanie-charcoal {font-size: clamp(0.875rem, 1vw + 0.5rem, 1.05rem); line-height: 1.7; color: var(--color-text-secondary);}

.specifications-section-merino-wool-beanie-charcoal {overflow: hidden; background: var(--color-bg-primary); padding: clamp(3rem, 8vw, 6rem) 0;}

.specifications-content-merino-wool-beanie-charcoal {display: flex; gap: clamp(2rem, 4vw, 3rem); flex-direction: column;}

.specifications-title-merino-wool-beanie-charcoal {font-family: var(--font-heading); text-align: center; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); color: var(--color-text-primary); line-height: 1.2; font-weight: 700;}

.specifications-grid-merino-wool-beanie-charcoal {flex-direction: row; display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem);}

.spec-item-merino-wool-beanie-charcoal {min-width: 200px; gap: 0.5rem; display: flex; flex-direction: column; flex: 1 1 calc(50% - clamp(0.75rem, 1.5vw, 1.25rem)); box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 3vw, 2rem); background: var(--color-bg-card); border-radius: var(--radius-md);}

@media (min-width: 768px) {
  .spec-item-merino-wool-beanie-charcoal {min-width: 150px; flex: 1 1 calc(25% - clamp(1.125rem, 2.25vw, 1.875rem));}
}

.spec-label-merino-wool-beanie-charcoal {text-transform: uppercase; color: var(--color-accent); font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.05em; font-size: clamp(0.9rem, 1.5vw, 1.05rem);}

.spec-value-merino-wool-beanie-charcoal {line-height: 1.5; color: var(--color-text-secondary); font-size: clamp(0.85rem, 1vw, 0.95rem);}

.care-section-merino-wool-beanie-charcoal {overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; background: var(--color-bg-secondary);}

.care-content-merino-wool-beanie-charcoal {gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column;}

@media (min-width: 768px) {
  .care-content-merino-wool-beanie-charcoal {align-items: center; flex-direction: row;}
}

.care-text-merino-wool-beanie-charcoal {flex: 1 1 100%; flex-direction: column; display: flex; max-width: 100%; gap: clamp(1rem, 2vw, 1.5rem);}

@media (min-width: 768px) {
  .care-text-merino-wool-beanie-charcoal {flex: 1 1 50%; max-width: 50%;}
}

.care-title-merino-wool-beanie-charcoal {font-weight: 700; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); font-family: var(--font-heading); color: var(--color-text-primary); line-height: 1.2;}

.care-paragraph-merino-wool-beanie-charcoal {font-size: clamp(0.875rem, 1vw + 0.5rem, 1.05rem); line-height: 1.7; color: var(--color-text-secondary);}

.care-image-merino-wool-beanie-charcoal {flex: 1 1 100%; max-width: 100%;}

@media (min-width: 768px) {
  .care-image-merino-wool-beanie-charcoal {flex: 1 1 50%; max-width: 50%;}
}

.care-image-img-merino-wool-beanie-charcoal {border-radius: var(--radius-lg); display: block; width: 100%; object-fit: cover; height: auto; max-height: 400px;}

.disclaimer-section-merino-wool-beanie-charcoal {background: var(--color-bg-primary); overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0;}

.disclaimer-content-merino-wool-beanie-charcoal {display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem);}

.disclaimer-callout-merino-wool-beanie-charcoal {display: flex; border-radius: var(--radius-md); padding: clamp(1.5rem, 3vw, 2.5rem); border-left: 4px solid var(--color-accent); background: var(--color-bg-tertiary); flex-direction: column; gap: 1rem;}

.disclaimer-title-merino-wool-beanie-charcoal {color: #ffffff; font-size: clamp(1.1rem, 2vw, 1.35rem); font-family: var(--font-heading); font-weight: 700; line-height: 1.3;}

.disclaimer-text-merino-wool-beanie-charcoal {font-size: clamp(0.85rem, 1vw, 0.95rem); color: #e8e8e8; line-height: 1.6;}

.related-section-merino-wool-beanie-charcoal {background: var(--color-bg-secondary); overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0;}

.related-content-merino-wool-beanie-charcoal {display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem);}

.related-title-merino-wool-beanie-charcoal {text-align: center; font-family: var(--font-heading); line-height: 1.2; font-weight: 700; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); color: var(--color-text-primary);}

.related-cards-merino-wool-beanie-charcoal {justify-content: center; display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); flex-wrap: wrap; flex-direction: row;}

.related-card-merino-wool-beanie-charcoal {flex-direction: column; border-radius: var(--radius-md); display: flex; max-width: 100%; overflow: hidden; padding: clamp(1rem, 2vw, 1.5rem); background: var(--color-bg-card); min-width: 240px; gap: 1rem; flex: 1 1 calc(33.333% - clamp(1rem, 2vw, 1.667rem)); transition: all 0.3s ease; box-shadow: var(--shadow-sm);}

.related-card-merino-wool-beanie-charcoal:hover {box-shadow: var(--shadow-md); transform: translateY(-4px);}

@media (max-width: 767px) {
  .related-card-merino-wool-beanie-charcoal {
    flex: 1 1 100%;
  }
}

.related-card-link-merino-wool-beanie-charcoal {flex-direction: column; gap: 0.75rem; text-decoration: none; display: flex;}

.related-card-image-merino-wool-beanie-charcoal {width: 100%; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 3 / 2;}

.related-card-img-merino-wool-beanie-charcoal {transition: all 0.3s ease; height: 100%; object-fit: cover; width: 100%; display: block;}

.related-card-merino-wool-beanie-charcoal:hover .related-card-img-merino-wool-beanie-charcoal {
  transform: scale(1.05);
}

.related-card-name-merino-wool-beanie-charcoal {color: var(--color-text-primary); font-size: clamp(0.95rem, 1.5vw, 1.15rem); transition: all 0.3s ease; line-height: 1.3; font-weight: 700; font-family: var(--font-heading);}

.related-card-merino-wool-beanie-charcoal:hover .related-card-name-merino-wool-beanie-charcoal {
  color: var(--color-accent);
}

.related-card-description-merino-wool-beanie-charcoal {flex-grow: 1; color: var(--color-text-secondary); font-size: clamp(0.8rem, 0.9vw, 0.9rem); line-height: 1.5;}

.related-card-price-merino-wool-beanie-charcoal {letter-spacing: -0.02em; font-weight: 700; color: var(--color-accent); font-size: clamp(1rem, 1.5vw, 1.25rem);}

.related-add-to-cart-merino-wool-beanie-charcoal {border: none; background: var(--color-accent); letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-sm); font-size: clamp(0.85rem, 1vw, 0.95rem); align-items: center; font-weight: 700; display: flex; min-height: 44px; width: 100%; transition: all 0.3s ease; color: #ffffff; cursor: pointer; justify-content: center; padding: 0.75rem 1.5rem;}

.related-add-to-cart-merino-wool-beanie-charcoal:hover {transform: translateY(-2px); background: var(--color-primary-hover);}

.related-add-to-cart-merino-wool-beanie-charcoal:active {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .hero-card-merino-wool-beanie-charcoal {
    padding: clamp(1.5rem, 3vw, 2rem);
  }

  .overview-content-merino-wool-beanie-charcoal,
  .design-content-merino-wool-beanie-charcoal,
  .care-content-merino-wool-beanie-charcoal {
    flex-direction: column;
  }

  .overview-text-merino-wool-beanie-charcoal,
  .overview-image-merino-wool-beanie-charcoal,
  .design-text-merino-wool-beanie-charcoal,
  .design-image-merino-wool-beanie-charcoal,
  .care-text-merino-wool-beanie-charcoal,
  .care-image-merino-wool-beanie-charcoal {flex: 1 1 100%; max-width: 100%;}

  .design-image-merino-wool-beanie-charcoal {
    order: 0;
  }

  .spec-item-merino-wool-beanie-charcoal {min-width: auto; flex: 1 1 100%;}
}

* {word-wrap: break-word; overflow-wrap: break-word;}

.casual-wear-narrative-about {background: var(--color-bg-primary); overflow: hidden;}

.container {padding: 0 clamp(1rem, 4vw, 2rem); margin: 0 auto; max-width: 1440px;}

.hero-section-about {overflow: hidden; background: var(--color-bg-primary); padding: clamp(3rem, 8vw, 6rem) 0;}

.hero-content-about {gap: clamp(2rem, 4vw, 3rem); flex-direction: column; display: flex;}

.hero-header-about {
  text-align: center;
}

.hero-title-about {color: var(--color-text-primary); margin-bottom: clamp(0.5rem, 2vw, 1rem); font-size: clamp(1.75rem, 5vw + 1rem, 3.5rem); font-family: var(--font-heading); font-weight: 700;}

.hero-subtitle-about {color: var(--color-text-secondary); margin: 0 auto; font-weight: 400; font-size: clamp(0.875rem, 1.5vw + 0.5rem, 1.125rem); max-width: 600px;}

.hero-visual-about {height: auto; border-radius: var(--radius-md); display: block; max-width: 900px; margin: 0 auto; max-height: 450px; width: 100%; object-fit: cover;}

.story-section-about {overflow: hidden; background: var(--color-bg-secondary); padding: clamp(3rem, 8vw, 6rem) 0;}

.story-content-about {gap: clamp(2rem, 4vw, 3rem); flex-direction: column; display: flex;}

.story-header-about {margin-bottom: clamp(1rem, 2vw, 1.5rem); text-align: center;}

.story-tag-about {letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--color-primary); font-weight: 700; font-size: 0.75rem;}

.story-title-about {font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); color: var(--color-text-primary); margin-bottom: 0.75rem; font-weight: 700;}

.story-description-about {max-width: 700px; margin: 0 auto; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.story-body-about {display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); flex-direction: column;}

.story-text-about {line-height: 1.7; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.story-text-about p {margin-bottom: clamp(1rem, 2vw, 1.5rem); color: var(--color-text-secondary);}

.story-text-about p:last-child {
  margin-bottom: 0;
}

.story-image-about {width: 100%; max-width: 700px; border-radius: var(--radius-md); display: block; height: auto; max-height: 400px; object-fit: cover; margin: 0 auto;}

.approach-section-about {overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; background: var(--color-bg-primary);}

.approach-content-about {gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column;}

.approach-header-about {text-align: center; margin-bottom: clamp(1rem, 2vw, 1.5rem);}

.approach-tag-about {font-size: 0.75rem; letter-spacing: 1.5px; margin-bottom: 0.5rem; text-transform: uppercase; font-weight: 700; color: var(--color-primary);}

.approach-title-about {font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); font-weight: 700; font-family: var(--font-heading); margin-bottom: 0.75rem; color: var(--color-text-primary);}

.approach-intro-about {max-width: 700px; margin: 0 auto; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);}

.principles-grid-about {gap: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; margin-top: clamp(1rem, 2vw, 2rem);}

.principle-item-about {padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--color-bg-card); border-radius: var(--radius-md); border-left: 4px solid var(--color-primary);}

.principle-number-about {margin-bottom: 0.5rem; font-family: var(--font-heading); color: var(--color-primary); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem);}

.principle-title-about {font-size: clamp(1rem, 2vw + 0.5rem, 1.375rem); margin-bottom: 0.75rem; font-weight: 600; color: var(--color-text-primary); font-family: var(--font-heading);}

.principle-text-about {line-height: 1.6; font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); color: var(--color-text-secondary);}

.values-section-about {overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; background: var(--color-bg-secondary);}

.values-content-about {display: flex; gap: clamp(2rem, 4vw, 3rem); flex-direction: column;}

.values-header-about {text-align: center; margin-bottom: clamp(1rem, 2vw, 1.5rem);}

.values-tag-about {font-size: 0.75rem; margin-bottom: 0.5rem; color: var(--color-primary); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;}

.values-title-about {font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem); font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary);}

.values-cards-about {margin-top: clamp(1.5rem, 3vw, 2rem); justify-content: center; flex-wrap: wrap; display: flex; gap: clamp(1.5rem, 3vw, 2rem); flex-direction: row;}

.value-card-about {max-width: 320px; padding: clamp(1.5rem, 3vw, 2rem); transition: all 0.3s ease; background: var(--color-bg-card); border-radius: var(--radius-md); text-align: center; min-width: 200px; flex: 1 1 calc(50% - clamp(0.75rem, 1.5vw, 1rem));}

.value-card-about:hover {box-shadow: var(--shadow-md); transform: translateY(-4px);}

.value-icon-about {color: var(--color-primary); margin-bottom: 1rem; font-size: clamp(1.75rem, 4vw, 2.5rem);}

.value-card-title-about {font-weight: 600; color: var(--color-text-primary); font-family: var(--font-heading); font-size: clamp(1rem, 2vw + 0.5rem, 1.375rem); margin-bottom: 0.75rem;}

.value-card-text-about {color: var(--color-text-secondary); font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); line-height: 1.6;}

@media (max-width: 768px) {
  .value-card-about {max-width: 100%; flex: 1 1 100%;}
}

.prague-section-about {background: var(--color-bg-primary); overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0;}

.prague-content-about {display: flex; gap: clamp(2rem, 4vw, 3rem); flex-direction: column;}

.prague-header-about {text-align: center; margin-bottom: clamp(1rem, 2vw, 1.5rem);}

.prague-tag-about {font-size: 0.75rem; letter-spacing: 1.5px; margin-bottom: 0.5rem; color: var(--color-primary); text-transform: uppercase; font-weight: 700;}

.prague-title-about {font-family: var(--font-heading); color: var(--color-text-primary); font-weight: 700; font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem);}

.prague-text-about {max-width: 800px; margin: 0 auto; font-size: clamp(0.875rem, 1vw + 0.5rem, 1.125rem); line-height: 1.7; color: var(--color-text-secondary);}

.prague-text-about p {color: var(--color-text-secondary); margin-bottom: clamp(1rem, 2vw, 1.5rem);}

.prague-text-about p:last-child {
  margin-bottom: 0;
}

.prague-visual-about {object-fit: cover; max-width: 900px; height: auto; display: block; border-radius: var(--radius-md); max-height: 450px; margin: 0 auto; width: 100%;}

.disclaimer-section-about {background: var(--color-bg-secondary); padding: clamp(2.5rem, 6vw, 4rem) 0; overflow: hidden; border-top: 1px solid var(--color-border-light);}

.disclaimer-content-about {flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); max-width: 800px; display: flex;}

.disclaimer-header-about {display: flex; margin-bottom: 0.5rem; gap: 0.75rem; flex-direction: row; align-items: flex-start;}

.disclaimer-icon-about {color: var(--color-primary); flex-shrink: 0; margin-top: 0.25rem; font-size: 1.25rem;}

.disclaimer-title-about {color: var(--color-text-primary); font-family: var(--font-heading); font-size: clamp(1rem, 2vw + 0.5rem, 1.375rem); font-weight: 600;}

.disclaimer-text-about {font-size: clamp(0.8125rem, 1vw + 0.4rem, 0.9375rem); color: var(--color-text-secondary); line-height: 1.7;}

.disclaimer-text-about p {color: var(--color-text-secondary); margin-bottom: clamp(0.75rem, 1.5vw, 1rem);}

.disclaimer-text-about p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .hero-section-about {
    padding: clamp(4rem, 10vw, 7rem) 0;
  }

  .story-section-about {
    padding: clamp(4rem, 10vw, 7rem) 0;
  }

  .approach-section-about {
    padding: clamp(4rem, 10vw, 7rem) 0;
  }

  .values-section-about {
    padding: clamp(4rem, 10vw, 7rem) 0;
  }

  .prague-section-about {
    padding: clamp(4rem, 10vw, 7rem) 0;
  }

  .value-card-about {flex: 1 1 calc(33.333% - clamp(1rem, 2vw, 1.5rem)); min-width: 240px;}
}

@media (min-width: 1024px) {
  .hero-section-about {
    padding: clamp(5rem, 12vw, 8rem) 0;
  }

  .story-section-about {
    padding: clamp(5rem, 12vw, 8rem) 0;
  }

  .approach-section-about {
    padding: clamp(5rem, 12vw, 8rem) 0;
  }

  .values-section-about {
    padding: clamp(5rem, 12vw, 8rem) 0;
  }

  .prague-section-about {
    padding: clamp(5rem, 12vw, 8rem) 0;
  }
}

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

html, body {background: var(--color-bg-primary); color: var(--color-text-primary); font-family: var(--font-primary);}

h1, h2, h3, h4, h5, h6, p {word-wrap: break-word; overflow-wrap: break-word;}

.container {max-width: 1440px; padding: 0 clamp(1rem, 4vw, 2rem); margin: 0 auto;}

.author-profile-tomas-novotny {
  width: 100%;
}

.hero-section-tomas-novotny {background: var(--color-bg-primary); padding: clamp(2rem, 6vw, 4rem) 0; overflow: hidden;}

.hero-content-tomas-novotny {gap: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column;}

.hero-split-tomas-novotny {display: flex; flex-direction: row; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);}

.hero-image-wrapper-tomas-novotny {max-height: 500px; flex: 1 1 45%; min-height: 300px;}

.hero-image-tomas-novotny {width: 100%; height: 100%; box-shadow: var(--shadow-lg); object-fit: cover; display: block; border-radius: var(--radius-lg);}

.hero-text-tomas-novotny {gap: clamp(0.75rem, 2vw, 1.25rem); flex: 1 1 55%; display: flex; flex-direction: column;}

.hero-tag-tomas-novotny {padding: 0.375rem 0.75rem; color: #fffeff; width: fit-content; border-radius: var(--radius-full); font-size: clamp(0.75rem, 1vw, 0.875rem); font-weight: 600; background: var(--color-accent); display: inline-block;}

.hero-title-tomas-novotny {color: var(--color-text-primary); font-weight: 700; font-family: var(--font-heading); line-height: 1.1; font-size: clamp(2rem, 6vw, 3.5rem);}

.hero-position-tomas-novotny {font-weight: 600; font-family: var(--font-heading); color: var(--color-accent); font-size: clamp(1rem, 2vw, 1.5rem);}

.hero-subtitle-tomas-novotny {color: var(--color-text-secondary); line-height: 1.6; font-size: clamp(0.95rem, 1.5vw, 1.125rem);}

.hero-credentials-tomas-novotny {margin-top: 0.5rem; flex-direction: row; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem); display: flex;}

.credential-item-tomas-novotny {display: flex; flex-direction: column; gap: 0.25rem;}

.credential-label-tomas-novotny {text-transform: uppercase; font-size: clamp(0.75rem, 1vw, 0.875rem); letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 500;}

.credential-value-tomas-novotny {font-size: clamp(1rem, 1.5vw, 1.375rem); font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary);}

@media (max-width: 767px) {
  .hero-split-tomas-novotny {
    flex-direction: column;
  }

  .hero-image-wrapper-tomas-novotny {max-height: 400px; flex: 1 1 100%; min-height: 250px;}

  .hero-text-tomas-novotny {
    flex: 1 1 100%;
  }
}

.biography-section-tomas-novotny {background: var(--color-bg-secondary); padding: clamp(3rem, 8vw, 6rem) 0; overflow: hidden;}

.biography-content-tomas-novotny {flex-direction: column; gap: clamp(2rem, 4vw, 3rem); display: flex;}

.biography-header-tomas-novotny {flex-direction: column; text-align: center; gap: 0.5rem; display: flex;}

.biography-tag-tomas-novotny {text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-accent); font-size: clamp(0.75rem, 1vw, 0.875rem); font-weight: 600;}

.biography-title-tomas-novotny {color: var(--color-text-primary); font-weight: 700; font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.1; font-family: var(--font-heading);}

.biography-text-tomas-novotny {margin: 0 auto; gap: clamp(1rem, 2vw, 1.5rem); display: flex; flex-direction: column; max-width: 900px;}

.biography-text-tomas-novotny p {line-height: 1.7; color: var(--color-text-secondary); font-size: clamp(0.95rem, 1.5vw, 1.125rem);}

.biography-highlight-tomas-novotny {border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-bg-primary); margin-top: 1rem; padding: clamp(1rem, 2vw, 1.5rem);}

.biography-highlight-tomas-novotny p {color: var(--color-text-secondary); line-height: 1.6; font-size: clamp(0.9rem, 1.5vw, 1.05rem);}

.biography-highlight-tomas-novotny strong {font-weight: 600; color: var(--color-text-primary);}

.expertise-section-tomas-novotny {padding: clamp(3rem, 8vw, 6rem) 0; background: var(--color-bg-primary); overflow: hidden;}

.expertise-content-tomas-novotny {gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column;}

.expertise-header-tomas-novotny {gap: 0.5rem; text-align: center; max-width: 700px; display: flex; margin: 0 auto; flex-direction: column;}

.expertise-tag-tomas-novotny {text-transform: uppercase; font-size: clamp(0.75rem, 1vw, 0.875rem); letter-spacing: 0.5px; font-weight: 600; color: var(--color-accent);}

.expertise-title-tomas-novotny {font-family: var(--font-heading); font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.1; color: var(--color-text-primary); font-weight: 700;}

.expertise-subtitle-tomas-novotny {color: var(--color-text-secondary); font-size: clamp(0.95rem, 1.5vw, 1.125rem); line-height: 1.6;}

.expertise-cards-tomas-novotny {justify-content: center; gap: clamp(1.5rem, 3vw, 2rem); flex-wrap: wrap; flex-direction: row; display: flex;}

.expertise-card-tomas-novotny {flex: 1 1 calc(33.333% - clamp(1.5rem, 3vw, 2rem)); gap: 1rem; transition: all 0.3s ease; border-radius: var(--radius-lg); min-width: 250px; display: flex; padding: clamp(1.5rem, 2vw, 2rem); background: var(--color-bg-card); flex-direction: column; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-light);}

.expertise-card-tomas-novotny:hover {border-color: var(--color-accent); transform: translateY(-4px); box-shadow: var(--shadow-md);}

.expertise-icon-tomas-novotny {border-radius: var(--radius-md); display: flex; height: 48px; background: var(--color-accent); align-items: center; width: 48px; justify-content: center; font-size: 1.5rem; color: #fffdff;}

.expertise-card-title-tomas-novotny {font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 700; color: var(--color-text-primary); line-height: 1.3; font-family: var(--font-heading);}

.expertise-card-text-tomas-novotny {color: var(--color-text-secondary); line-height: 1.6; font-size: clamp(0.875rem, 1.5vw, 1rem);}

@media (max-width: 1024px) {
  .expertise-card-tomas-novotny {flex: 1 1 calc(50% - clamp(1.5rem, 3vw, 2rem)); min-width: 220px;}
}

@media (max-width: 640px) {
  .expertise-card-tomas-novotny {
    flex: 1 1 100%;
  }
}

.approach-section-tomas-novotny {padding: clamp(3rem, 8vw, 6rem) 0; overflow: hidden; background: var(--color-bg-secondary);}

.approach-content-tomas-novotny {display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem);}

.approach-header-tomas-novotny {gap: 0.5rem; text-align: center; flex-direction: column; display: flex;}

.approach-tag-tomas-novotny {letter-spacing: 0.5px; font-size: clamp(0.75rem, 1vw, 0.875rem); color: var(--color-accent); font-weight: 600; text-transform: uppercase;}

.approach-title-tomas-novotny {font-weight: 700; line-height: 1.1; color: var(--color-text-primary); font-family: var(--font-heading); font-size: clamp(1.75rem, 5vw, 2.75rem);}

.approach-split-tomas-novotny {align-items: flex-start; gap: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: row;}

.approach-text-tomas-novotny {gap: clamp(1rem, 2vw, 1.5rem); display: flex; flex: 1 1 50%; flex-direction: column;}

.approach-text-tomas-novotny p {font-size: clamp(0.95rem, 1.5vw, 1.125rem); line-height: 1.7; color: var(--color-text-secondary);}

.approach-quote-tomas-novotny {
  margin-top: 1rem;
}

.approach-blockquote-tomas-novotny {padding-bottom: 0.5rem; border-left: 4px solid var(--color-accent); font-style: italic; padding-top: 0.5rem; padding-left: clamp(1rem, 2vw, 1.5rem);}

.approach-blockquote-tomas-novotny p {line-height: 1.7; font-size: clamp(0.95rem, 1.5vw, 1.125rem); margin-bottom: 0.75rem; color: var(--color-text-primary);}

.approach-citation-tomas-novotny {font-weight: 500; color: var(--color-text-secondary); display: block; margin-top: 0.5rem; font-size: clamp(0.875rem, 1.5vw, 1rem); font-style: normal;}

.approach-principles-tomas-novotny {gap: clamp(1.5rem, 2vw, 2rem); flex: 1 1 50%; display: flex; flex-direction: column;}

.principle-item-tomas-novotny {flex-direction: column; border-bottom: 1px solid var(--color-border-light); padding-bottom: clamp(1.5rem, 2vw, 2rem); display: flex; gap: 0.75rem;}

.principle-item-tomas-novotny:last-child {padding-bottom: 0; border-bottom: none;}

.principle-number-tomas-novotny {font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-accent); font-family: var(--font-heading); font-weight: 700;}

.principle-title-tomas-novotny {font-weight: 700; font-family: var(--font-heading); color: var(--color-text-primary); font-size: clamp(1rem, 2vw, 1.25rem);}

.principle-text-tomas-novotny {line-height: 1.6; color: var(--color-text-secondary); font-size: clamp(0.875rem, 1.5vw, 1rem);}

@media (max-width: 1024px) {
  .approach-split-tomas-novotny {
    flex-direction: column;
  }

  .approach-text-tomas-novotny {
    flex: 1 1 100%;
  }

  .approach-principles-tomas-novotny {
    flex: 1 1 100%;
  }
}

.featured-work-section-tomas-novotny {overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; background: var(--color-bg-primary);}

.featured-work-content-tomas-novotny {gap: clamp(2rem, 4vw, 3rem); flex-direction: column; display: flex;}

.featured-work-header-tomas-novotny {display: flex; gap: 0.5rem; flex-direction: column; text-align: center;}

.featured-work-tag-tomas-novotny {font-size: clamp(0.75rem, 1vw, 0.875rem); font-weight: 600; letter-spacing: 0.5px; color: var(--color-accent); text-transform: uppercase;}

.featured-work-title-tomas-novotny {font-weight: 700; line-height: 1.1; font-size: clamp(1.75rem, 5vw, 2.75rem); color: var(--color-text-primary); font-family: var(--font-heading);}

.featured-work-subtitle-tomas-novotny {line-height: 1.6; color: var(--color-text-secondary); font-size: clamp(0.95rem, 1.5vw, 1.125rem);}

.featured-work-items-tomas-novotny {flex-direction: column; display: flex; max-width: 900px; width: 100%; margin: 0 auto; gap: clamp(1.5rem, 3vw, 2rem);}

.featured-work-item-tomas-novotny {gap: 1rem; padding: clamp(1.5rem, 2vw, 2.5rem); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-bg-card); transition: all 0.3s ease; flex-direction: column; display: flex;}

.featured-work-item-tomas-novotny:hover {border-color: var(--color-accent); box-shadow: var(--shadow-md);}

.featured-work-item-number-tomas-novotny {color: var(--color-accent); letter-spacing: 0.5px; font-weight: 700; font-size: clamp(1rem, 2vw, 1.375rem); text-transform: uppercase; font-family: var(--font-heading);}

.featured-work-item-title-tomas-novotny {font-weight: 700; font-family: var(--font-heading); color: var(--color-text-primary); line-height: 1.3; font-size: clamp(1.1rem, 2vw, 1.5rem);}

.featured-work-item-text-tomas-novotny {font-size: clamp(0.9rem, 1.5vw, 1.05rem); line-height: 1.6; color: var(--color-text-secondary);}

.featured-work-link-tomas-novotny {font-size: clamp(0.9rem, 1.5vw, 1rem); text-decoration: none; gap: 0.5rem; display: inline-flex; transition: all 0.3s ease; align-items: center; width: fit-content; color: var(--color-accent); font-weight: 600;}

.featured-work-link-tomas-novotny:hover {color: var(--color-accent-hover); gap: 0.75rem;}

.featured-work-link-tomas-novotny i {
  font-size: 0.875em;
}

.credentials-section-tomas-novotny {overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; background: var(--color-bg-secondary);}

.credentials-content-tomas-novotny {gap: clamp(2rem, 4vw, 3rem); flex-direction: column; display: flex;}

.credentials-header-tomas-novotny {display: flex; gap: 0.5rem; flex-direction: column; text-align: center;}

.credentials-tag-tomas-novotny {color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; font-size: clamp(0.75rem, 1vw, 0.875rem);}

.credentials-title-tomas-novotny {font-size: clamp(1.75rem, 5vw, 2.75rem); font-family: var(--font-heading); font-weight: 700; color: var(--color-text-primary); line-height: 1.1;}

.credentials-timeline-tomas-novotny {flex-direction: column; gap: clamp(2rem, 3vw, 2.5rem); max-width: 900px; display: flex; margin: 0 auto; padding-left: clamp(2rem, 4vw, 3rem); position: relative;}

.credentials-timeline-tomas-novotny::before {top: 0; left: 0; width: 2px; bottom: 0; position: absolute; content: ''; background: var(--color-accent);}

.timeline-item-tomas-novotny {flex-direction: column; display: flex; gap: 0.5rem; position: relative;}

.timeline-item-tomas-novotny::before {background: var(--color-accent); height: 12px; border: 3px solid var(--color-bg-secondary); width: 12px; border-radius: 50%; content: ''; top: 0.25rem; position: absolute; left: -clamp(1.375rem, 2.5vw, 1.75rem);}

.timeline-year-tomas-novotny {text-transform: uppercase; font-size: clamp(0.85rem, 1.5vw, 1rem); color: var(--color-accent); letter-spacing: 0.5px; font-weight: 700;}

.timeline-title-tomas-novotny {line-height: 1.3; font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.375rem); color: var(--color-text-primary); font-family: var(--font-heading);}

.timeline-text-tomas-novotny {color: var(--color-text-secondary); line-height: 1.6; font-size: clamp(0.9rem, 1.5vw, 1.05rem);}

.cta-section-tomas-novotny {background: var(--color-bg-primary); overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0;}

.cta-content-tomas-novotny {gap: clamp(2rem, 4vw, 3rem); display: flex; margin: 0 auto; flex-direction: column; max-width: 700px;}

.cta-box-tomas-novotny {padding: clamp(2rem, 4vw, 3rem); gap: clamp(1rem, 2vw, 1.5rem); background: var(--color-bg-card); border: 2px solid var(--color-accent); flex-direction: column; display: flex; text-align: center; border-radius: var(--radius-lg);}

.cta-title-tomas-novotny {font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; font-family: var(--font-heading); color: var(--color-text-primary);}

.cta-text-tomas-novotny {font-size: clamp(0.95rem, 1.5vw, 1.125rem); color: var(--color-text-secondary); line-height: 1.6;}

.cta-buttons-tomas-novotny {justify-content: center; flex-direction: row; gap: clamp(1rem, 2vw, 1.5rem); display: flex; flex-wrap: wrap; margin-top: 0.5rem;}

.cta-button-primary-tomas-novotny {padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem); font-weight: 600; border-radius: var(--radius-md); display: inline-flex; font-size: clamp(0.9rem, 1.5vw, 1rem); background: var(--color-accent); align-items: center; color: #ffffff; justify-content: center; border: 2px solid var(--color-accent); text-decoration: none; transition: all 0.3s ease;}

.cta-button-primary-tomas-novotny:hover {background: var(--color-accent-hover); border-color: var(--color-accent-hover);}

.cta-button-secondary-tomas-novotny {justify-content: center; transition: all 0.3s ease; align-items: center; color: var(--color-accent); padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem); border: 2px solid var(--color-accent); background: transparent; text-decoration: none; border-radius: var(--radius-md); font-size: clamp(0.9rem, 1.5vw, 1rem); font-weight: 600; display: inline-flex;}

.cta-button-secondary-tomas-novotny:hover {background: var(--color-bg-primary); color: var(--color-accent-hover); border-color: var(--color-accent-hover);}

@media (max-width: 640px) {
  .cta-buttons-tomas-novotny {
    flex-direction: column;
  }

  .cta-button-primary-tomas-novotny,
  .cta-button-secondary-tomas-novotny {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .credentials-timeline-tomas-novotny {
    padding-left: clamp(1.5rem, 3vw, 2rem);
  }

  .timeline-item-tomas-novotny::before {
    left: -clamp(1rem, 2vw, 1.375rem);
  }
}

.main.cart-page-minicart {padding-bottom: var(--spacing-2xl); color: var(--color-text-primary); background-color: var(--color-bg-primary); min-height: 100vh; padding-top: var(--spacing-lg);}

.container-minicart {padding: 0 var(--spacing-md); margin: 0 auto; max-width: 1440px;}

.cart-hero-minicart {margin-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border-light);}

.cart-hero-title-minicart {font-family: var(--font-heading); color: var(--color-text-primary); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 var(--spacing-sm) 0; font-weight: 700;}

.cart-hero-subtitle-minicart {margin: 0; color: var(--color-text-secondary); line-height: 1.6; font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem); font-family: var(--font-primary);}

.cart-layout-wrapper-minicart {gap: var(--spacing-xl); display: flex; margin-bottom: var(--spacing-2xl); flex-direction: column;}

@media (min-width: 1024px) {
  .cart-layout-wrapper-minicart {flex-direction: row; gap: var(--spacing-xl);}
}

.cart-items-section-minicart {min-width: 0; flex: 1;}

@media (min-width: 1024px) {
  .cart-items-section-minicart {
    flex: 0 0 60%;
  }
}

.cart-items-container-minicart {gap: 0; overflow: hidden; border-radius: var(--radius-md); display: flex; flex-direction: column; border: 1px solid var(--color-border-light); background-color: var(--color-bg-card);}

.cart-empty-state-minicart {text-align: center; background-color: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--spacing-xl);}

.empty-state-content-minicart {display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md);}

.empty-state-title-minicart {font-family: var(--font-heading); margin: 0; color: var(--color-text-primary); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700;}

.empty-state-text-minicart {margin: 0; font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem); font-family: var(--font-primary); max-width: 380px; color: var(--color-text-secondary); line-height: 1.7;}

.empty-state-cta-minicart {color: #ffffff; font-family: var(--font-primary); font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem); border-radius: var(--radius-md); padding: var(--spacing-sm) var(--spacing-lg); text-decoration: none; display: inline-block; transition: background-color 0.3s ease; cursor: pointer; background-color: var(--color-primary); border: none; font-weight: 600;}

.empty-state-cta-minicart:hover,
.empty-state-cta-minicart:focus {outline: 2px solid var(--color-primary); background-color: var(--color-primary-hover); outline-offset: 2px;}

.cart-summary-sidebar-minicart {
  width: 100%;
}

@media (min-width: 1024px) {
  .cart-summary-sidebar-minicart {flex: 0 0 40%; max-width: 380px;}
}

.cart-summary-card-minicart {border: 1px solid var(--color-border-light); top: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--radius-md); gap: var(--spacing-md); background-color: var(--color-bg-card); position: sticky; flex-direction: column; display: flex;}

.summary-heading-minicart {font-weight: 700; font-family: var(--font-heading); font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--color-text-primary); margin: 0 0 var(--spacing-md) 0;}

.summary-row-minicart {justify-content: space-between; align-items: center; display: flex;}

.summary-label-minicart {font-weight: 500; color: var(--color-text-secondary); font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem); font-family: var(--font-primary);}

.summary-value-minicart {color: var(--color-text-primary); font-weight: 600; font-family: var(--font-primary); font-size: clamp(0.95rem, 1vw + 0.5rem, 1.05rem);}

.summary-divider-minicart {background-color: var(--color-border-light); height: 1px;}

.summary-row-total-minicart {
  padding-top: var(--spacing-md);
}

.summary-label-total-minicart {font-weight: 700; color: var(--color-text-primary); font-family: var(--font-primary); font-size: clamp(1rem, 1vw + 0.6rem, 1.1rem);}

.summary-value-total-minicart {font-weight: 700; font-family: var(--font-primary); color: var(--color-primary); font-size: clamp(1.1rem, 2vw, 1.4rem);}

.summary-cta-minicart {background-color: var(--color-primary); font-size: clamp(0.95rem, 1vw + 0.5rem, 1.05rem); border-radius: var(--radius-md); font-family: var(--font-primary); font-weight: 600; color: #ffffff; border: none; transition: background-color 0.3s ease; cursor: pointer; margin-top: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg);}

.summary-cta-minicart:hover,
.summary-cta-minicart:focus {outline-offset: 2px; background-color: var(--color-primary-hover); outline: 2px solid var(--color-primary);}

.summary-note-minicart {font-size: clamp(0.8rem, 0.9vw + 0.4rem, 0.9rem); text-align: center; color: var(--color-text-muted); line-height: 1.5; margin: 0; font-family: var(--font-primary);}

.wt-cart-row {gap: var(--spacing-md); align-items: center; transition: background-color 0.2s ease; border-bottom: 1px solid var(--color-border-light); display: flex; padding: var(--spacing-md);}

.wt-cart-row:last-child {
  border-bottom: none;
}

.wt-cart-row:hover {
  background-color: var(--color-bg-secondary);
}

.wt-cart-thumb {width: 80px; border-radius: var(--radius-sm); flex-shrink: 0; height: 80px; object-fit: cover; border: 1px solid var(--color-border-light);}

.wt-cart-info {flex-direction: column; display: flex; min-width: 160px; flex: 1; gap: var(--spacing-xs);}

.wt-cart-name {font-size: clamp(0.95rem, 1vw + 0.5rem, 1.05rem); line-height: 1.4; font-family: var(--font-primary); font-weight: 600; color: var(--color-text-primary);}

.wt-cart-unit-price {font-size: clamp(0.85rem, 0.9vw + 0.4rem, 0.95rem); color: var(--color-text-secondary); font-family: var(--font-primary);}

.wt-cart-controls {display: flex; align-items: center; flex-shrink: 0; gap: var(--spacing-md);}

.wt-cart-qty {display: inline-flex; align-items: center; border-radius: var(--radius-sm); background-color: var(--color-bg-primary); overflow: hidden; border: 1px solid var(--color-border);}

.wt-cart-qty-btn {padding: var(--spacing-xs) var(--spacing-sm); border: none; font-weight: 600; color: var(--color-text-primary); cursor: pointer; font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem); background-color: transparent; font-family: var(--font-primary); transition: background-color 0.2s ease;}

.wt-cart-qty-btn:hover {
  background-color: var(--color-bg-secondary);
}

.wt-cart-qty-btn:active {
  background-color: var(--color-bg-tertiary);
}

.wt-cart-qty-input {padding: var(--spacing-xs) 0; color: var(--color-text-primary); -moz-appearance: none; appearance: none; font-weight: 600; -webkit-appearance: none; width: 50px; text-align: center; border: none; font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem); background-color: transparent; font-family: var(--font-primary);}

.wt-cart-qty-input:focus {
  outline: none;
}

.wt-cart-qty-input::-webkit-outer-spin-button,
.wt-cart-qty-input::-webkit-inner-spin-button {margin: 0; -webkit-appearance: none;}

.wt-cart-qty-input[type=number] {
  -moz-appearance: textfield;
}

.wt-cart-line-total {min-width: 80px; font-size: clamp(0.95rem, 1vw + 0.5rem, 1.05rem); text-align: right; font-family: var(--font-primary); color: var(--color-primary); font-weight: 700;}

.wt-cart-remove {cursor: pointer; border: none; background-color: transparent; align-items: center; font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--color-text-muted); transition: color 0.2s ease; justify-content: center; display: flex; font-family: var(--font-primary); padding: var(--spacing-xs);}

.wt-cart-remove:hover,
.wt-cart-remove:focus {color: var(--color-danger); outline: 2px solid var(--color-danger); outline-offset: 2px;}

.cart-checkout-section-minicart {
  margin-bottom: var(--spacing-2xl);
}

.checkout-form-wrapper-minicart {padding: var(--spacing-xl); border: 1px solid var(--color-border-light); background-color: var(--color-bg-card); border-radius: var(--radius-md);}

.checkout-heading-minicart {font-family: var(--font-heading); color: var(--color-text-primary); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; margin: 0 0 var(--spacing-xl) 0;}

.checkout-form-minicart {display: flex; gap: var(--spacing-md); flex-direction: column;}

.form-group-minicart {display: flex; flex-direction: column; gap: var(--spacing-xs);}

.form-label-minicart {color: var(--color-text-primary); font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem); font-family: var(--font-primary); font-weight: 600;}

.form-optional-minicart {font-weight: 400; color: var(--color-text-secondary);}

.form-input-minicart,
.form-textarea-minicart {border-radius: var(--radius-sm); font-family: var(--font-primary); border: 1px solid var(--color-border); transition: border-color 0.2s ease, background-color 0.2s ease; background-color: var(--color-bg-primary); font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem); color: var(--color-text-primary); padding: var(--spacing-sm) var(--spacing-md);}

.form-input-minicart:focus,
.form-textarea-minicart:focus {border-color: var(--color-primary); background-color: var(--color-bg-primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);}

.form-textarea-minicart {resize: vertical; min-height: 100px;}

.form-submit-minicart {cursor: pointer; padding: var(--spacing-md) var(--spacing-lg); font-size: clamp(0.95rem, 1vw + 0.5rem, 1.05rem); color: #fcffff; font-family: var(--font-primary); margin-top: var(--spacing-md); background-color: var(--color-primary); transition: background-color 0.3s ease; font-weight: 600; border: none; border-radius: var(--radius-md);}

.form-submit-minicart:hover,
.form-submit-minicart:focus {outline-offset: 2px; background-color: var(--color-primary-hover); outline: 2px solid var(--color-primary);}

.form-submit-minicart:active {
  transform: scale(0.98);
}

.cart-payment-info-minicart {border-radius: var(--radius-md); border: 1px solid var(--color-primary-light); padding: var(--spacing-lg); background-color: var(--color-bg-secondary); margin-top: var(--spacing-xl);}

.payment-info-content-minicart {display: flex; gap: var(--spacing-sm); flex-direction: column;}

.payment-info-title-minicart {font-size: clamp(1rem, 2vw, 1.2rem); color: var(--color-text-primary); font-weight: 700; margin: 0; font-family: var(--font-heading);}

.payment-info-text-minicart {font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem); color: var(--color-text-secondary); font-family: var(--font-primary); line-height: 1.7; margin: 0;}

.cart-footer-minicart {padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border-light); text-align: center;}

.cart-footer-link-minicart {color: var(--color-primary); font-weight: 600; font-size: clamp(0.9rem, 1vw + 0.5rem, 1rem); font-family: var(--font-primary); display: inline-block; text-decoration: none; transition: color 0.2s ease;}

.cart-footer-link-minicart:hover,
.cart-footer-link-minicart:focus {outline: 2px solid var(--color-primary); color: var(--color-primary-hover); outline-offset: 2px;}

@media (max-width: 768px) {
  .container-minicart {
    padding: 0 var(--spacing-md);
  }

  .cart-items-container-minicart {
    margin-bottom: var(--spacing-lg);
  }

  .cart-summary-sidebar-minicart {
    width: 100%;
  }

  .cart-summary-card-minicart {
    position: static;
  }

  .checkout-form-wrapper-minicart {
    padding: var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .cart-hero-minicart {padding-bottom: var(--spacing-md); margin-bottom: var(--spacing-lg);}

  .cart-layout-wrapper-minicart {margin-bottom: var(--spacing-lg); gap: var(--spacing-lg);}

  .wt-cart-row {flex-wrap: wrap; gap: var(--spacing-sm);}

  .wt-cart-thumb {width: 70px; height: 70px;}

  .wt-cart-controls {width: 100%; order: 3; justify-content: space-between;}

  .wt-cart-info {min-width: 140px; flex: 1;}

  .checkout-form-wrapper-minicart {
    padding: var(--spacing-md);
  }

  .cart-payment-info-minicart {margin-top: var(--spacing-lg); padding: var(--spacing-md);}
}

.portfolio-page {color: var(--color-text-primary); background-color: var(--color-bg-primary);}

.portfolio-hero {overflow: hidden; padding: var(--spacing-xl) var(--spacing-md); background-color: var(--color-bg-secondary);}

.portfolio-hero-container {margin: 0 auto; max-width: 900px; text-align: center;}

.portfolio-hero-title {color: var(--color-text-primary); font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; font-weight: 700; margin: 0 0 var(--spacing-md) 0; font-family: var(--font-heading);}

.portfolio-hero-subtitle {margin: 0; font-size: clamp(0.95rem, 2vw, 1.15rem); font-family: var(--font-primary); color: var(--color-text-secondary); line-height: 1.6;}

.portfolio-projects {overflow: hidden; background-color: var(--color-bg-primary); padding: var(--spacing-2xl) var(--spacing-md);}

.portfolio-projects-container {display: grid; margin: 0 auto; max-width: 1200px; grid-template-columns: 1fr; gap: var(--spacing-lg);}

.portfolio-card {box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); transition: box-shadow 0.3s ease, transform 0.3s ease; background-color: var(--color-bg-card);}

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

.portfolio-card-image {overflow: hidden; width: 100%; background-color: var(--color-bg-tertiary); height: 240px;}

.portfolio-card-image img {width: 100%; object-fit: cover; transition: transform 0.4s ease; height: 100%;}

.portfolio-card:hover .portfolio-card-image img {
  transform: scale(1.05);
}

.portfolio-card-content {
  padding: var(--spacing-lg);
}

.portfolio-card-meta {gap: var(--spacing-sm); margin-bottom: var(--spacing-md); flex-wrap: wrap; align-items: center; display: flex;}

.portfolio_card_dir {letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; font-family: var(--font-primary); border-radius: var(--radius-full); background-color: var(--color-primary-light); padding: 0.35rem 0.65rem; font-size: 0.75rem; color: var(--color-primary);}

.portfolio-card-year {font-weight: 500; font-size: 0.8rem; color: var(--color-text-muted); font-family: var(--font-primary);}

.portfolio-card-title {font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.1rem, 3vw, 1.4rem); letter-spacing: -0.01em; color: var(--color-text-primary); margin: 0 0 var(--spacing-sm) 0;}

.portfolio-card-description {line-height: 1.6; font-size: clamp(0.9rem, 2vw, 1rem); color: var(--color-text-secondary); margin: 0; font-family: var(--font-primary);}

.portfolio-cta {background-color: var(--color-bg-secondary); padding: var(--spacing-2xl) var(--spacing-md); overflow: hidden;}

.portfolio-cta-container {text-align: center; max-width: 700px; margin: 0 auto;}

.portfolio-cta-title {font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--color-text-primary); font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--spacing-md) 0;}

.portfolio-cta-description {margin: 0 0 var(--spacing-lg) 0; color: var(--color-text-secondary); line-height: 1.6; font-size: clamp(0.95rem, 2vw, 1.05rem); font-family: var(--font-primary);}

.portfolio-cta-buttons {justify-content: center; display: flex; flex-wrap: wrap; gap: var(--spacing-md);}

.portfolio-cta-primary {background-color: var(--color-primary); font-size: 0.95rem; border-radius: var(--radius-md); font-family: var(--font-primary); display: inline-block; text-decoration: none; font-weight: 600; border: 2px solid var(--color-primary); transition: background-color 0.3s ease, transform 0.2s ease; color: #ffffff; padding: 0.85rem 2rem;}

.portfolio-cta-primary:hover {transform: translateY(-2px); background-color: var(--color-primary-hover); border-color: var(--color-primary-hover);}

.portfolio-cta-secondary {color: var(--color-primary); font-family: var(--font-primary); transition: all 0.3s ease; background-color: transparent; border-radius: var(--radius-md); text-decoration: none; display: inline-block; font-weight: 600; padding: 0.85rem 2rem; border: 2px solid var(--color-primary); font-size: 0.95rem;}

.portfolio-cta-secondary:hover {color: #ffffff; background-color: var(--color-primary); transform: translateY(-2px);}

@media (min-width: 640px) {
  .portfolio-hero {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .portfolio-projects {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .portfolio-projects-container {grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl);}

  .portfolio-card-image {
    height: 280px;
  }

  .portfolio-cta {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .portfolio-hero {
    padding: var(--spacing-2xl) 0;
  }

  .portfolio-hero-container {padding: 0 var(--spacing-lg); max-width: 900px;}

  .portfolio-projects {
    padding: var(--spacing-2xl) 0;
  }

  .portfolio-projects-container {gap: var(--spacing-xl); grid-template-columns: repeat(2, 1fr); padding: 0 var(--spacing-lg);}

  .portfolio-card {display: grid; grid-template-columns: 1fr 1fr;}

  .portfolio-card:nth-child(even) {
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-card:nth-child(even) .portfolio-card-image {
    order: 2;
  }

  .portfolio-card:nth-child(even) .portfolio-card-content {
    order: 1;
  }

  .portfolio-card-image {
    height: 320px;
  }

  .portfolio-card-content {justify-content: center; padding: var(--spacing-xl); flex-direction: column; display: flex;}

  .portfolio-cta {
    padding: var(--spacing-2xl) 0;
  }

  .portfolio-cta-container {
    padding: 0 var(--spacing-lg);
  }
}

@media (min-width: 1280px) {
  .portfolio-projects-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-card-image {
    height: 360px;
  }
}

.services-page {background-color: var(--color-bg-primary); width: 100%;}

.services-hero {overflow: hidden; border-bottom: 1px solid var(--color-border-light); padding: var(--spacing-2xl) var(--spacing-md); background-color: var(--color-bg-primary);}

.services-hero-content {max-width: 1200px; margin: 0 auto; text-align: center;}

.services-hero-title {margin: 0 0 var(--spacing-sm) 0; color: var(--color-text-primary); font-size: clamp(2rem, 5vw + 0.5rem, 3.5rem); font-weight: 700; letter-spacing: -0.02em; font-family: var(--font-heading);}

.services-hero-subtitle {font-family: var(--font-primary); font-size: clamp(0.95rem, 2vw + 0.25rem, 1.25rem); margin: 0; line-height: 1.6; color: var(--color-text-secondary);}

.services-cards-section {overflow: hidden; padding: var(--spacing-2xl) var(--spacing-md); background-color: var(--color-bg-primary);}

.services-cards-container {margin: 0 auto; max-width: 1200px; gap: var(--spacing-xl); grid-template-columns: 1fr; display: grid;}

.services-card {padding: var(--spacing-xl); transition: all 0.3s ease; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background-color: var(--color-bg-card);}

.services-card:hover {border-color: var(--color-primary); box-shadow: var(--shadow-md);}

.services-card-icon {display: inline-flex; color: var(--color-primary); width: 48px; justify-content: center; font-size: 1.5rem; align-items: center; height: 48px; margin-bottom: var(--spacing-md); background-color: var(--color-primary-light); border-radius: var(--radius-md);}

.services-card-title {font-family: var(--font-heading); margin: 0 0 var(--spacing-sm) 0; font-size: clamp(1.125rem, 2vw + 0.25rem, 1.5rem); font-weight: 600; color: var(--color-text-primary);}

.services-card-description {color: var(--color-text-secondary); font-size: clamp(0.9rem, 1.5vw + 0.25rem, 1rem); font-family: var(--font-primary); margin: 0; line-height: 1.7;}

.services-cta-section {overflow: hidden; padding: var(--spacing-2xl) var(--spacing-md); background-color: var(--color-bg-secondary);}

.services-cta-content {max-width: 800px; text-align: center; margin: 0 auto;}

.services-cta-title {font-weight: 700; color: var(--color-text-primary); font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); letter-spacing: -0.02em; margin: 0 0 var(--spacing-md) 0; font-family: var(--font-heading);}

.services-cta-text {margin: 0 0 var(--spacing-xl) 0; font-family: var(--font-primary); color: var(--color-text-secondary); font-size: clamp(0.95rem, 1.5vw + 0.25rem, 1.1rem); line-height: 1.6;}

.services-cta-buttons {flex-direction: column; gap: var(--spacing-md); display: flex; justify-content: center;}

.services-cta-button {border: none; text-decoration: none; align-items: center; font-size: clamp(0.9rem, 1.5vw + 0.25rem, 1rem); border-radius: var(--radius-md); font-weight: 600; font-family: var(--font-primary); transition: all 0.3s ease; padding: var(--spacing-md) var(--spacing-lg); justify-content: center; display: inline-flex; cursor: pointer;}

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

.services-cta-primary:hover {box-shadow: var(--shadow-md); background-color: var(--color-primary-hover);}

.services-cta-secondary {color: var(--color-primary); background-color: transparent; border: 2px solid var(--color-primary);}

.services-cta-secondary:hover {border-color: var(--color-primary); background-color: var(--color-primary-light);}

@media (min-width: 640px) {
  .services-hero {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .services-cards-section {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .services-cards-container {grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg);}

  .services-cta-section {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .services-hero {
    padding: 4rem var(--spacing-lg);
  }

  .services-cards-section {
    padding: 4rem var(--spacing-lg);
  }

  .services-cards-container {grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl);}

  .services-card {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  .services-cta-section {
    padding: 4rem var(--spacing-lg);
  }

  .services-cta-buttons {gap: var(--spacing-lg); flex-direction: row;}

  .services-cta-button {max-width: 250px; flex: 1;}
}

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

.policy-page {background-color: var(--color-bg-primary); font-family: var(--font-primary); color: var(--color-text-primary);}

.policy-page .container {margin: 0 auto; padding: 0 var(--spacing-md); max-width: 1440px;}

.policy-page .content {max-width: 800px; padding: var(--spacing-2xl) var(--spacing-md); margin: 0 auto;}

.policy-page h1 {font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: var(--spacing-sm); color: var(--color-text-primary);}

.policy-page .last-updated {font-style: italic; font-size: clamp(0.85rem, 1vw, 1rem); margin-bottom: var(--spacing-2xl); color: var(--color-text-secondary);}

.policy-page h2 {font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--color-text-primary); margin-top: var(--spacing-2xl); font-family: var(--font-heading);}

.policy-page p {margin-bottom: var(--spacing-md); line-height: 1.7; color: var(--color-text-primary); font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);}

.policy-page ul {list-style-position: inside; margin-bottom: var(--spacing-md); padding-left: var(--spacing-md);}

.policy-page li {font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem); line-height: 1.7; margin-bottom: var(--spacing-sm); color: var(--color-text-primary);}

.policy-page .intro-section {background-color: var(--color-bg-secondary); margin-bottom: var(--spacing-2xl); padding: var(--spacing-lg); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md);}

.policy-page .intro-section p {color: var(--color-text-primary); margin: 0;}

.policy-page .contact-section {padding: var(--spacing-lg); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background-color: var(--color-bg-card); margin-top: var(--spacing-2xl);}

.policy-page .contact-section h2 {
  margin-top: 0;
}

.policy-page .contact-section p {color: var(--color-text-primary); margin-bottom: var(--spacing-sm);}

.policy-page .contact-section strong {color: var(--color-text-primary); font-weight: 600;}

@media (min-width: 768px) {
  .policy-page .container {
    padding: 0 var(--spacing-lg);
  }

  .policy-page .content {
    padding: var(--spacing-2xl) 0;
  }

  .policy-page h1 {
    margin-bottom: var(--spacing-md);
  }

  .policy-page h2 {
    margin-top: var(--spacing-xl);
  }
}

@media (min-width: 1024px) {
  .policy-page .container {
    padding: 0 var(--spacing-xl);
  }

  .policy-page .content {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .policy-page .intro-section {
    padding: var(--spacing-xl);
  }

  .policy-page .contact-section {
    padding: var(--spacing-xl);
  }
}

.thank-you-page {align-items: center; background-color: var(--color-bg-primary); justify-content: center; min-height: 100vh; display: flex; padding: var(--spacing-md) var(--spacing-md);}

.thank-you-section {overflow: hidden; width: 100%;}

.container {margin: 0 auto; padding: 0 var(--spacing-md); max-width: 1440px;}

.thank-you-content {text-align: center; max-width: 800px; gap: var(--spacing-xl); flex-direction: column; align-items: center; margin: 0 auto; display: flex;}

.thank-you-success {gap: var(--spacing-md); flex-direction: column; align-items: center; display: flex;}

.thank-you-icon {flex-shrink: 0; width: clamp(3rem, 8vw, 5rem); color: var(--color-success); height: clamp(3rem, 8vw, 5rem);}

.thank-you-heading {font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0; font-family: var(--font-heading); color: var(--color-text-primary); font-weight: 700; line-height: 1.3;}

.thank-you-lead {font-family: var(--font-primary); font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem); color: var(--color-text-secondary); margin: 0; line-height: 1.7; max-width: 600px;}

.thank-you-payment-card {border: 2px solid var(--color-primary-light); padding: clamp(var(--spacing-lg), 5vw, var(--spacing-2xl)); background-color: var(--color-bg-card); box-shadow: var(--shadow-sm); max-width: 600px; border-radius: var(--radius-lg); width: 100%;}

.thank-you-payment-header {display: flex; justify-content: center; margin-bottom: var(--spacing-lg); align-items: center; gap: var(--spacing-md);}

.thank-you-payment-icon {height: clamp(1.75rem, 4vw, 2.5rem); width: clamp(1.75rem, 4vw, 2.5rem); flex-shrink: 0; color: var(--color-primary);}

.thank-you-payment-title {line-height: 1.3; margin: 0; font-weight: 600; color: var(--color-text-primary); font-family: var(--font-heading); font-size: clamp(1.25rem, 3vw, 1.75rem);}

.thank-you-payment-text {color: var(--color-text-primary); margin: 0 0 var(--spacing-md) 0; line-height: 1.7; text-align: left; font-family: var(--font-primary); font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);}

.thank-you-payment-text:last-of-type {
  margin-bottom: 0;
}

.thank-you-payment-highlight {font-weight: 500; background-color: var(--color-bg-secondary); border-radius: var(--radius-md); color: var(--color-text-primary); padding: var(--spacing-md);}

.thank-you-cta-button {font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem); margin-top: var(--spacing-lg); box-shadow: var(--shadow-md); color: var(--color-text-primary); background-color: var(--color-primary); padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md)) clamp(var(--spacing-lg), 4vw, var(--spacing-2xl)); font-weight: 600; justify-content: center; display: inline-flex; border: none; transition: background-color 0.3s ease, transform 0.2s ease; text-decoration: none; align-items: center; border-radius: var(--radius-md); font-family: var(--font-primary); cursor: pointer;}

.thank-you-cta-button:hover {background-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg);}

.thank-you-cta-button:active {box-shadow: var(--shadow-sm); transform: translateY(0);}

@media (min-width: 640px) {
  .thank-you-page {
    padding: var(--spacing-lg) var(--spacing-lg);
  }

  .thank-you-content {
    gap: var(--spacing-2xl);
  }

  .thank-you-payment-card {
    padding: var(--spacing-2xl);
  }

  .thank-you-payment-header {
    margin-bottom: var(--spacing-xl);
  }

  .thank-you-payment-highlight {
    padding: var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .thank-you-page {
    padding: var(--spacing-2xl) var(--spacing-2xl);
  }

  .thank-you-content {
    gap: clamp(var(--spacing-2xl), 5vw, var(--spacing-2xl));
  }

  .thank-you-payment-card {
    border-width: 2px;
  }

  .thank-you-cta-button {
    margin-top: clamp(var(--spacing-lg), 3vw, var(--spacing-2xl));
  }

  .thank-you-cta-button:hover {
    transform: translateY(-3px);
  }
}

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

.error-page {min-height: 100vh; background-color: var(--color-bg-primary); display: flex; flex-direction: column; overflow: hidden; justify-content: center;}

.container {margin: 0 auto; max-width: 1440px; padding: 0 var(--spacing-md); width: 100%;}

.content {margin: 0 auto; max-width: 800px;}

.error-section {overflow: hidden; padding: var(--spacing-2xl) 0; display: flex; justify-content: center; align-items: center; min-height: 70vh;}

.error-wrapper {animation: fadeInUp 0.8s ease-out; text-align: center;}

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

.error-visual {position: relative; margin-bottom: var(--spacing-2xl);}

.error-code-wrapper {position: relative; margin: 0 auto; display: inline-block;}

.error-code {font-size: clamp(4rem, 15vw, 8rem); position: relative; font-family: var(--font-heading); z-index: 2; letter-spacing: -2px; display: block; line-height: 1; color: var(--color-primary); font-weight: 900; animation: slideDown 0.8s ease-out;}

@keyframes slideDown {
  from {opacity: 0; transform: translateY(-40px);}
  to {transform: translateY(0); opacity: 1;}
}

.error-decoration {transform: translate(-50%, -50%); z-index: 1; border-radius: var(--radius-full); height: clamp(150px, 40vw, 280px); opacity: 0.3; animation: pulse 4s ease-in-out infinite; position: absolute; width: clamp(150px, 40vw, 280px); top: 50%; left: 50%; background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.error-message h1 {font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--color-text-primary); letter-spacing: -0.5px; font-weight: 700; margin-bottom: var(--spacing-lg); font-family: var(--font-heading);}

.error-description {font-size: clamp(0.95rem, 1.2vw, 1.1rem); margin-bottom: var(--spacing-lg); line-height: 1.8; color: var(--color-text-secondary); font-family: var(--font-primary);}

.error-suggestion {color: var(--color-text-secondary); margin-bottom: var(--spacing-2xl); line-height: 1.8; font-family: var(--font-primary); font-size: clamp(0.95rem, 1.2vw, 1.1rem);}

.btn {text-decoration: none; font-weight: 600; display: inline-block; letter-spacing: 0.3px; font-size: clamp(0.95rem, 1.1vw, 1.05rem); border: none; transition: all 0.3s ease; text-align: center; padding: var(--spacing-md) var(--spacing-xl); font-family: var(--font-primary); border-radius: var(--radius-md); cursor: pointer;}

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

.btn-primary:hover {background-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-md);}

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

.suggestions-section {overflow: hidden; background-color: var(--color-bg-secondary); padding: var(--spacing-2xl) 0;}

.suggestions-grid {grid-template-columns: 1fr; gap: var(--spacing-lg); display: grid; margin-top: var(--spacing-xl);}

.suggestion-item {border: 1px solid var(--color-border-light); transition: all 0.3s ease; border-radius: var(--radius-lg); padding: var(--spacing-lg); animation: fadeIn 0.8s ease-out both; text-align: center; background-color: var(--color-bg-card);}

.suggestion-item:nth-child(1) {
  animation-delay: 0.2s;
}

.suggestion-item:nth-child(2) {
  animation-delay: 0.3s;
}

.suggestion-item:nth-child(3) {
  animation-delay: 0.4s;
}

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

.suggestion-item:hover {border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-4px);}

.suggestion-icon {background-color: var(--color-bg-primary); display: flex; justify-content: center; width: 60px; align-items: center; border-radius: var(--radius-md); margin: 0 auto var(--spacing-md); color: var(--color-primary); height: 60px;}

.suggestion-icon svg {width: 32px; height: 32px;}

.suggestion-item h3 {color: var(--color-text-primary); margin-bottom: var(--spacing-sm); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.25rem); font-family: var(--font-heading);}

.suggestion-item p {font-family: var(--font-primary); line-height: 1.6; color: var(--color-text-secondary); font-size: clamp(0.9rem, 1.1vw, 1rem);}

@media (min-width: 640px) {
  .container {
    padding: 0 var(--spacing-lg);
  }

  .error-section {min-height: 60vh; padding: var(--spacing-xl) 0;}

  .suggestions-grid {grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl);}
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-xl);
  }

  .error-section {padding: var(--spacing-2xl) 0; min-height: 70vh;}

  .suggestions-grid {grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl);}

  .suggestion-item {
    padding: var(--spacing-xl);
  }
}

@media (max-height: 600px) {
  .error-section {padding: var(--spacing-lg) 0; min-height: auto;}

  .error-code {
    font-size: clamp(3rem, 12vw, 6rem);
  }
}

.contact-page-feedback {background-color: var(--color-bg-primary); color: var(--color-text-primary);}

.contact-page-hero {overflow: hidden; background-color: var(--color-bg-secondary); padding: 3rem 1.5rem;}

.contact-page-hero-content {text-align: center; max-width: 1440px; margin: 0 auto;}

.contact-page-hero-title {font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 1rem 0; font-family: var(--font-heading); letter-spacing: -0.02em; color: var(--color-text-primary);}

.contact-page-hero-subtitle {margin: 0; font-family: var(--font-primary); max-width: 600px; margin-left: auto; line-height: 1.7; margin-right: auto; font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: var(--color-text-secondary);}

@media (min-width: 768px) {
  .contact-page-hero {
    padding: 5rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .contact-page-hero {
    padding: 6rem 1.5rem;
  }
}

.contact-page-main {background-color: var(--color-bg-primary); overflow: hidden; padding: 3rem 1.5rem;}

.contact-page-main-content {max-width: 1440px; margin: 0 auto;}

.contact-page-grid {gap: 3rem; flex-wrap: wrap; align-items: flex-start; display: flex;}

.contact-page-form-wrapper {flex: 1 1 100%; min-width: 0;}

.contact-page-info-wrapper {flex: 1 1 100%; min-width: 0;}

.contact-page-form-title {margin: 0 0 1.75rem 0; color: var(--color-text-primary); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; font-family: var(--font-heading);}

.contact-page-form {width: 100%; display: flex; gap: 1.5rem; flex-direction: column;}

.contact-page-form-row {flex-direction: column; display: flex; gap: 0.5rem;}

.contact-page-label {font-family: var(--font-primary); display: block; font-weight: 500; color: var(--color-text-primary); font-size: clamp(0.875rem, 1vw, 0.95rem);}

.contact-page-input,
.contact-page-textarea {font-size: clamp(0.9rem, 1vw, 1rem); width: 100%; transition: all 0.3s ease; font-family: var(--font-primary); padding: 0.875rem 1rem; color: var(--color-text-primary); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background-color: var(--color-bg-card);}

.contact-page-input::placeholder,
.contact-page-textarea::placeholder {
  color: var(--color-text-muted);
}

.contact-page-input:focus,
.contact-page-textarea:focus {box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); outline: none; background-color: var(--color-bg-card); border-color: var(--color-primary);}

.contact-page-input:invalid:not(:placeholder-shown),
.contact-page-textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-danger);
}

.contact-page-textarea {resize: vertical; min-height: 140px;}

.contact-page-form-consent {border-radius: var(--radius-md); padding: 1rem; background-color: var(--color-bg-tertiary);}

.contact-page-consent-label {display: flex; gap: 0.75rem; font-family: var(--font-primary); cursor: pointer; align-items: flex-start; font-size: clamp(0.875rem, 1vw, 0.95rem); color: var(--color-text-secondary);}

.contact-page-checkbox {width: 1.25rem; margin-top: 0.25rem; flex-shrink: 0; accent-color: var(--color-primary); cursor: pointer; height: 1.25rem;}

.contact-page-consent-link {text-decoration: none; font-weight: 500; color: var(--color-primary); transition: color 0.3s ease;}

.contact-page-consent-link:hover {color: var(--color-primary-hover); text-decoration: underline;}

.contact-page-submit {font-family: var(--font-primary); width: 100%; transition: all 0.3s ease; padding: 1rem 2rem; cursor: pointer; font-size: clamp(0.95rem, 1vw, 1.05rem); font-weight: 600; background-color: var(--color-primary); color: var(--color-bg-primary); border: none; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-md);}

.contact-page-submit:hover {background-color: var(--color-primary-hover); box-shadow: var(--shadow-md); transform: translateY(-2px);}

.contact-page-submit:active {
  transform: translateY(0);
}

.contact-page-info-title {font-weight: 600; margin: 0 0 1.75rem 0; font-family: var(--font-heading); font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--color-text-primary); letter-spacing: -0.01em;}

.contact-page-info-block {margin-bottom: 2.5rem; gap: 1.75rem; display: flex; flex-direction: column;}

.contact-page-info-item {align-items: flex-start; display: flex; gap: 1.25rem;}

.contact-page-info-icon {font-size: 1.25rem; border-radius: var(--radius-md); height: 3rem; background-color: var(--color-bg-tertiary); width: 3rem; justify-content: center; flex-shrink: 0; align-items: center; display: flex; color: var(--color-primary);}

.contact-page-info-content {
  flex: 1;
}

.contact-page-info-label {font-family: var(--font-heading); font-weight: 600; margin: 0 0 0.5rem 0; font-size: clamp(0.95rem, 1vw, 1.05rem); color: var(--color-text-primary);}

.contact-page-info-text {font-family: var(--font-primary); margin: 0; color: var(--color-text-secondary); font-size: clamp(0.9rem, 1vw, 1rem); line-height: 1.6;}

.contact-page-info-text a {color: var(--color-primary); text-decoration: none; transition: color 0.3s ease;}

.contact-page-info-text a:hover {color: var(--color-primary-hover); text-decoration: underline;}

.contact-page-info-cta {border-radius: var(--radius-md); border: 1px solid var(--color-border-light); background-color: var(--color-bg-tertiary); padding: 2rem;}

.contact-page-cta-title {color: var(--color-text-primary); font-weight: 600; margin: 0 0 0.75rem 0; font-family: var(--font-heading); font-size: clamp(1rem, 1.5vw, 1.25rem);}

.contact-page-cta-text {color: var(--color-text-secondary); line-height: 1.6; font-size: clamp(0.9rem, 1vw, 1rem); margin: 0 0 1.25rem 0; font-family: var(--font-primary);}

.contact-page-cta-link {padding: 0.75rem 1.5rem; border: 2px solid var(--color-primary); font-weight: 600; text-decoration: none; font-size: clamp(0.9rem, 1vw, 0.95rem); letter-spacing: 0.05em; color: var(--color-primary); display: inline-block; border-radius: var(--radius-md); font-family: var(--font-primary); text-transform: uppercase; transition: all 0.3s ease;}

.contact-page-cta-link:hover {background-color: var(--color-primary); color: var(--color-bg-primary);}

@media (min-width: 768px) {
  .contact-page-main {
    padding: 4rem 1.5rem;
  }

  .contact-page-grid {align-items: flex-start; gap: 4rem;}

  .contact-page-form-wrapper {min-width: 0; flex: 1 1 45%;}

  .contact-page-info-wrapper {flex: 1 1 45%; min-width: 0;}
}

@media (min-width: 1024px) {
  .contact-page-main {
    padding: 5rem 1.5rem;
  }

  .contact-page-grid {
    gap: 5rem;
  }
}
.header-comfort-zone-hamburger,.header-comfort-zone-mobile-close,.header-comfort-zone-mobile-toggle{
  width: 34px;
}

.header-comfort-zone-desktop-nav{
  justify-content: flex-end;
}

.portfolio-card{display: flex; flex-direction: column !important;}

.portfolio-card__content{
  width: 100% !important;
}

.portfolio-card-content{
  width: 100% !important;
}

.hero-title-index{
  word-break: break-all;
}

.services-cards,.services-cards-container,.services-grid,.services-container{flex-direction: column; display: flex;}

.content{
  display: block;
}

.container{
  display: block !important;
}

html{
  scroll-padding-top: 80px;
}

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

input,textarea,select{max-width: 100%; box-sizing: border-box;}

#cookieBanner{max-width: 100%; padding-bottom: max(1rem, env(safe-area-inset-bottom)); box-sizing: border-box;}

.card img,.portfolio-card img,[class*="-card"] img{align-self: flex-start; flex-shrink: 0; height: auto; max-width: 100%;}

.header-comfort-zone-mobile-menu{
  padding-top: max(env(safe-area-inset-top), 0px);
}
@media (max-width: 480px){
  .header-comfort-zone-mobile-menu{
    max-width: 100%;
  }
}

.header-comfort-zone-mobile-menu.active{
  z-index: 999;
}

.header-comfort-zone-mobile-toggle[aria-expanded="true"]{
  display: none;
}

@media (max-width: 768px) {
  .featured_card_image_hero-pg {
    aspect-ratio: 6 / 9;
  }
}

a{
  color: #000 !important;
}
/* u-541445ff */
.x-541445ff-dkbcecakoc{--u0:502px}
.x-541445ff-jdbkidgec{--u1:880px}
.x-541445ff-plamfm{--u2:190px}
.x-541445ff-dieaai{--u3:347px}
.x-541445ff-gcmhbgp{--u4:864px}