@import './hero.css';

/* Combined CSS from main.css */

/* ===== design-tokens.css ===== */
:root {
  /* ---------------- COLORS ---------------- */
  --color-primary-olive: #6D8259;
  --color-deep-sage: #4F5D43;
  --color-sage-green: #AFC7A2;
  --color-forest-mid: #5C7151;

  /* Grain texture opacity */
  --grain-opacity: 0.03;

  --color-pastel-berry: #B86A6E;
  --color-accent-yellow-pro: #F5E287;
  --color-yellow-glow-light: #FFF4C9;

  --color-off-white: #F8F6EF;
  --color-stone-gray: #E1E3DE;
  --color-earth-brown: #9D8D7F;
  --color-pure-white: #FFFFFF;

  --color-hero-step-1: #F8F6EF;
  --color-hero-step-2: #EDEEE5;
  --color-hero-step-3: #D9E5D3;
  --color-hero-step-4: #A3BC98;

  --color-text-dark: #4F5D43;
  --color-text-muted: rgba(79, 93, 67, 0.7);
  /* Improved contrast: 0.7 opacity for better readability */

  --color-primary: var(--color-primary-olive);
  --color-secondary: var(--color-sage-green);
  --color-background: var(--color-off-white);
  --color-accent: var(--color-accent-yellow-pro);
  --color-border: var(--color-stone-gray);
  --color-surface-muted: #EDEEE5; /* jasny ciepły odcień (hero-step-2), do skeletonów jak na blog index */

  --color-success: #AFC7A2;
  --color-error: #D9A4A6;
  --color-warning: #F7D7A1;
  --color-info: var(--color-primary-olive);

  /* --------------- TYPOGRAPHY --------------- */
  --font-family-heading: 'Playfair Display', 'DM Serif Display', serif;
  --font-family-body: 'Inter', 'SF Pro Display', 'Roboto', sans-serif;

  /* Desktop sizes */
  --font-size-h1: 60px;
  --font-size-h1-hero: 64px;
  --font-size-h1-line: 72px;
  --font-size-h1-hero-line: 80px;
  --font-size-h2: 45px;
  --font-size-h2-line: 54px;
  --font-size-h3: 32px;
  --font-size-h3-line: 40px;
  --font-size-body: 18px;
  --font-size-body-line: 28px;
  --font-size-body-large: 20px;
  --font-size-small: 13px;
  --font-size-button: 16px;
  --font-size-button-line: 24px;
  --font-size-ui-label: 14px;

  /* Mobile sizes */
  --font-size-h1-mobile: 34px;
  --font-size-h1-mobile-line: 42px;
  --font-size-h2-mobile: 28px;
  --font-size-h2-mobile-line: 36px;
  --font-size-h3-mobile: 24px;
  --font-size-h3-mobile-line: 32px;
  --font-size-body-mobile: 16px;
  --font-size-body-mobile-line: 24px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-h1: 800;
  --font-weight-h2: 700;
  --font-weight-h3: 700;

  /* ---------------- SPACING ---------------- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* ---------------- SECTION SPACING (B1 - Vertical Rhythm) ---------------- */
  --section-tight: 2rem;
  /* 32px - drobne przejścia */
  --section-normal: 3.5rem;
  /* 56px - główne sekcje */
  --section-wide: 5rem;
  /* 80px - hero → content, duże pauzy */

  --spacing-button-padding-x: 20px;
  --spacing-button-padding-y: 12px;
  --spacing-input-padding: 12px;
  --spacing-card-padding: 28px;
  --spacing-section-padding: 48px;
  --spacing-container-padding: 40px;
  --spacing-container-padding-mobile: 24px;
  --spacing-outer: 32px;
  --spacing-outer-mobile: 20px;

  /* ---------------- RADII ----------------- */
  --radius-sm: 8px;
  --radius-button: 14px;
  --radius-input: 12px;
  --radius-card: 22px;
  --radius-badge: 8px;
  --radius-full: 9999px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  /* ---------------- LAYOUT ---------------- */
  --container-max-width: 1280px;
  --grid-columns: 12;
  --grid-gap: 24px;
  --grid-gap-large: 32px;
  --container-padding: 40px;
  --container-padding-mobile: 24px;

  /* Responsive gutters - większe na desktop dla elegancji */
  --gutter-desktop: 48px;
  --gutter-mobile: 20px;

  /* --------------- HEADER TOKENS -------------- */
  --header-height-desktop: 100px;
  --header-height-mobile: 56px;
  --header-logo-height-desktop: 90px;
  --header-logo-height-mobile: 48px;
  /* 48px dla mobile - bardziej widoczne, zgodne z best practices */
  --header-underline-height: 3px;
  --header-underline-color: var(--color-primary-olive);

  /* ---------------- SHADOWS ---------------- */
  /* Tylko warstwy, zero ciężkich drop-shadows - krótkie, rozproszone cienie */
  --shadow-soft: 0 6px 18px rgba(40, 50, 30, 0.04);
  --shadow-soft-hover: 0 10px 28px rgba(40, 50, 30, 0.06);
  --shadow-button: 0 6px 18px rgba(40, 50, 30, 0.04);
  --shadow-button-hover: 0 10px 28px rgba(40, 50, 30, 0.06);
  --shadow-header: 0 2px 6px rgba(40, 50, 30, 0.03);
  --shadow-sm: 0 2px 6px rgba(40, 50, 30, 0.03);
  --shadow-md: 0 6px 18px rgba(40, 50, 30, 0.04);
  --shadow-lg: 0 10px 28px rgba(40, 50, 30, 0.06);

  /* Elevation levels */
  --elev-1: 0 6px 18px rgba(40, 50, 30, 0.04);
  --elev-2: 0 10px 28px rgba(40, 50, 30, 0.06);

  /* ---------------- TRANSITIONS ---------------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-modal: 400ms ease;

  /* ---------------- Z-INDEX ---------------- */
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-modal-backdrop: 300;
  --z-index-modal: 400;
  --z-index-toast: 500;
  --z-index-tooltip: 600;

  /* ---------------- BREAKPOINTS --------------- */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* ---------------- ACCESSIBILITY ------------- */
  --tap-target-min: 44px;
  --focus-outline-width: 2px;
  --focus-outline-color: var(--color-primary-olive);
  --focus-outline-offset: 2px;

  /* ---------------- TYPOGRAPHY ENHANCEMENTS ------------- */
  --reading-width: 65ch;
  /* Optimal line length for readability */
  --line-height-body: 1.65;
  /* Comfortable reading line height */
  --line-height-small: 1.75;
  /* Extra breathing room for very small screens (<=480px) */
  --line-height-article-desktop: 1.75;
  /* Editorial gold standard for article paragraphs on desktop */
  --base-font-size: 1rem;
  /* 16px mobile base */

  /* Fluid base font size - mobile-first */
  --fs-base-min: 1rem;
  /* 16px mobile */
  --fs-base-max: 1.125rem;
  /* 18px desktop */
  --fs-base: clamp(var(--fs-base-min), calc(var(--fs-base-min) + 0.5vw), var(--fs-base-max));
  /* Fluid scaling: 16px → 18px */
}


/* ===== base.css ===== */
/* Design tokens są już wbudowane powyżej */

/* Base / Reset */
* {
  box-sizing: border-box;
}

html {
  height: auto;
  /* Changed from height: 100% to height: auto to prevent empty space at bottom */
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  /* overflow-y: visible required for position: sticky to work */
  background: var(--color-background);
  color: var(--color-text-dark);
  font-family: var(--font-family-body);
  font-size: 100%;
  /* 16px base for rem calculations */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  /* Prevent iOS text size adjustment */
}

/* Enhanced text size adjustment for Polish language */
html[lang="pl"] {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  /* Changed from height: 100% to min-height: 100vh to prevent empty space at bottom */
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  /* overflow-y: visible required for position: sticky to work */
  background: var(--color-background);
  color: var(--color-text-dark);
  font-family: var(--font-family-body);
  font-size: var(--fs-base);
  /* Fluid base font: 16px mobile → 18px desktop */
  line-height: var(--line-height-body);
  /* Consistent 1.65 line-height system-wide */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  word-break: break-word;
  /* Break long words/URLs gracefully - improved for Polish text */
  overflow-wrap: anywhere;
  hyphens: auto;
  /* Automatic hyphenation for Polish text (requires lang="pl" on html) */
}

/* Headings */
h1,
h2,
h3 {
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--color-text-dark);
  font-family: var(--font-family-heading);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  letter-spacing: 0.01em;
  line-height: var(--font-size-h1-line);
  text-rendering: optimizeLegibility;
}

h1.hero {
  font-size: var(--font-size-h1-hero);
  line-height: var(--font-size-h1-hero-line);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--font-size-h2-line);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--font-size-h3-line);
}

/* Responsive typography */
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-h1-mobile);
    line-height: var(--font-size-h1-mobile-line);
  }

  h2 {
    font-size: var(--font-size-h2-mobile);
    line-height: var(--font-size-h2-mobile-line);
  }

  h3 {
    font-size: var(--font-size-h3-mobile);
    line-height: var(--font-size-h3-mobile-line);
  }

  body {
    font-size: var(--font-size-body-mobile);
    line-height: var(--font-size-body-mobile-line);
  }
}

/* Links */
a {
  color: var(--color-text-dark);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover:not(.header-nav-link):not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-tertiary):not(.btn-ghost):not(.btn-pill) {
  color: var(--color-primary-olive);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Text links - underline zamiast kolorowych bg-hover */
a.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  color: var(--color-primary-olive);
}

/* Wyłączenie globalnego stylu a:hover dla linków w nagłówku */
.header .header-nav-link,
.header-nav .header-nav-link,
.header-container .header-nav-link {
  text-decoration: none;
}

/* Focus-visible for keyboard accessibility */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-primary-olive);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px rgba(255, 244, 201, 0.12);
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: var(--font-weight-semibold);
  z-index: 9999;
  transition: top var(--transition-fast);
  /* Ensure skip-link is properly clipped when off-screen */
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  overflow: hidden;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-pure-white);
  outline-offset: 2px;
  /* Show skip-link when focused */
  clip: auto;
  clip-path: none;
  overflow: visible;
}

/* Back to top button (Medium-style) */
.back-to-top {
  position: fixed;
  bottom: var(--spacing-lg, 24px);
  right: var(--spacing-lg, 24px);
  z-index: 9998;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-deep-sage, #4a5d44);
  color: var(--color-pure-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
.back-to-top[hidden] { display: none !important; }
.back-to-top.back-to-top--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--color-sage-green, #6d8259);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--color-primary-olive);
  outline-offset: 3px;
}
@media (max-width: 768px) {
  .back-to-top {
    bottom: calc(var(--spacing-md, 16px) + 56px);
    right: var(--spacing-md, 16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

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

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility */
.container {
  max-width: var(--container-max-width);
  padding: 0 var(--container-padding);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  /* Usunięto overflow-x: hidden - przycinało karty po prawej na mobile */
  overflow-y: visible;
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--container-padding-mobile);
  }
}

/* Ensure content starts below header */
/* Note: On desktop, body has padding-top for fixed header, so main-content doesn't need extra padding */
.main-content {
  padding-top: var(--spacing-md);
}

@media (min-width: 769px) {
  .main-content {
    padding-top: var(--spacing-md);
    /* Body already has padding-top for fixed header */
  }
}

@media (max-width: 768px) {
  .main-content {
    padding-top: calc(var(--header-height-mobile) + var(--spacing-sm));
  }
}

/* Breadcrumb - Desktop Only */
/* Style są w sekcji navigation.css */

@media (max-width: 767px) {
  .breadcrumb-container {
    display: none !important;
  }
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  padding: var(--spacing-md) 0 var(--spacing-xs) 0;
  margin-bottom: 0;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .breadcrumb {
    font-size: var(--font-size-body);
    padding: var(--spacing-lg) 0 var(--spacing-xs) 0;
  }
}

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

.breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--color-primary-olive);
  text-decoration: underline;
  text-decoration-color: var(--color-pastel-berry);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.breadcrumb-separator {
  color: var(--color-text-muted);
  opacity: 0.5;
  margin: 0 var(--spacing-xs);
}

.breadcrumb-current {
  color: var(--color-deep-sage);
  font-weight: var(--font-weight-medium);
}

/* Breadcrumb list structure (if using <ol>/<ul>) */
.breadcrumb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Back Link (Mobile-First) */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-body-mobile);
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--spacing-md);
  transition: color var(--transition-fast);
  min-height: 44px;
  /* Touch target */
}

.back-link:hover,
.back-link:active {
  color: var(--color-primary-olive);
}

.back-link::before {
  content: '←';
  font-size: 1.2em;
  line-height: 1;
}

/* Desktop: Hide back link, show breadcrumb */
@media (min-width: 768px) {
  .back-link {
    display: none;
  }
}

/* Mobile: Hide breadcrumb, show back link */
@media (max-width: 767px) {
  .breadcrumb-container {
    display: none !important;
  }
}

/* Page Header (Mobile-First) */
.page-header {
  margin-bottom: var(--spacing-xl);
  padding-top: var(--spacing-md);
}

/* Desktop: breadcrumbs above page-header */
@media (min-width: 768px) {
  .page-header {
    padding-top: var(--spacing-sm);
  }

  .breadcrumb-container+.blog-page .page-header {
    padding-top: var(--spacing-md);
  }
}

/* Page Header Typography - Mobile-First with Desktop Enhancements */
.page-header h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  /* Mobile: 28px → Desktop: 40px */
  line-height: 1.2;
  /* Tight for headings */
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-sm);
  max-width: 65ch;
  /* Optimal line length */
  letter-spacing: 0.01em;
}

.page-header p,
.page-header .page-description {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.125rem);
  /* Mobile: 16px → Desktop: 18px */
  line-height: 1.6;
  /* Comfortable for body text */
  color: var(--color-text-muted);
  margin: 0;
  max-width: 65ch;
}

@media (min-width: 768px) {
  .page-header h1 {
    margin-bottom: var(--spacing-md);
  }

  .page-header p {
    line-height: 1.7;
    /* Slightly more breathing room on desktop */
  }
}

/* Article Header (Mobile-First) */
.article-header {
  margin-bottom: var(--spacing-xl);
  padding-top: var(--spacing-lg);
}

/* H1 - tylko raz (title artykułu) */
.article-header h1 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  /* Mobile: 28px → Desktop: 40px - fluid scaling with viewport-based growth */
  line-height: 1.2;
  margin: 0 0 1rem 0;
  max-width: var(--reading-width);
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  text-wrap: balance;
  /* Balance line lengths for multi-line titles */
  color: var(--color-text-dark);
}

.article-header .article-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-body-mobile);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .article-header .article-meta {
    font-size: var(--font-size-body);
  }
}

/* Product Header (Mobile-First) */
.product-header {
  margin-bottom: var(--spacing-xl);
  padding-top: var(--spacing-lg);
}

.product-header h1 {
  font-size: var(--font-size-h1-mobile);
  line-height: var(--font-size-h1-mobile-line);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .product-header h1 {
    font-size: var(--font-size-h1);
    line-height: var(--font-size-h1-line);
  }
}

/* Desktop-only elements */
@media (max-width: 767px) {

  .blog-hero-desktop-only,
  .article-meta-desktop-only {
    display: none !important;
  }
}

/* ===== BLOG LIST (MOBILE-FIRST) ===== */

/* Blog Page */
/* Blog-page padding - no top padding since hero section is before it */
.blog-page {
  padding-top: 0 !important;
  /* Override any other rules - hero section handles spacing */
  padding-bottom: var(--spacing-xl);
  padding-left: 0;
  padding-right: 0;
  /* Ensure overflow-y: visible for sticky sidebar to work */
  overflow-y: visible;
}

@media (min-width: 768px) {
  .blog-page {
    padding-top: 0 !important;
    /* Override any other rules - hero section handles spacing */
    padding-bottom: var(--spacing-xl);
    padding-left: 0;
    padding-right: 0;
  }
}


/* Blog Filters - Pills (Mobile-First) */
.blog-filters {
  margin-top: 0;
  margin-bottom: var(--spacing-xl);
}

/* Filter Toggle Button (mobile only) */
.filter-toggle-btn {
  display: none;
  /* Hidden by default, shown on mobile */
  width: 100%;
  margin-bottom: var(--spacing-md);
}

/* Mobile: Show filter toggle button */
@media (max-width: 767px) {
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
  }
}

/* Filter Pills - Desktop default (mobile hidden via media query) */
.blog-filter-pills {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--spacing-sm) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  scroll-snap-type: x proximity;
}

.blog-filter-pills::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

/* Mobile: Vertical layout for pills in bottom sheet */
.blog-filter-pills--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow-x: visible;
  overflow-y: auto;
  padding: 0;
}

.blog-filter-pills--mobile .pill {
  width: 100%;
  justify-content: flex-start;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-md);
  min-height: 44px;
  min-width: fit-content;
  white-space: nowrap;
  border-radius: var(--radius-full);
  background: var(--color-pure-white);
  color: var(--color-text-dark);
  font-size: var(--font-size-body-mobile);
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  scroll-snap-align: start;
}

.pill:active {
  transform: scale(0.98);
}

.pill:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.1);
}

.pill.active,
.pill[aria-current="page"] {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-color: var(--color-primary-olive);
  box-shadow: 0 4px 12px rgba(109, 130, 89, 0.25);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 768px) {
  .pill:hover {
    background: var(--color-sage-green);
    border-color: var(--color-primary-olive);
    color: var(--color-deep-sage);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(109, 130, 89, 0.15);
  }

  .pill.active:hover,
  .pill[aria-current="page"]:hover {
    background: var(--color-primary-olive);
    color: var(--color-pure-white);
    transform: translateY(-1px);
  }
}

/* Mobile: Hide pills, show toggle button */
@media (max-width: 767px) {

  /* Hide regular pills on mobile (they're in bottom sheet) */
  .blog-filters>.blog-filter-pills:not(.blog-filter-pills--mobile) {
    display: none !important;
  }

  .filter-toggle-btn {
    display: inline-flex !important;
    /* Show toggle button on mobile */
    width: 100%;
    margin-bottom: var(--spacing-md);
  }

  .filter-bottom-sheet {
    display: block;
    /* Show bottom sheet container on mobile */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
    /* Inactive by default */
  }

  .filter-bottom-sheet.active {
    pointer-events: auto;
    /* Active when opened */
  }
}

/* Desktop: Show pills, hide toggle button and bottom sheet */
@media (min-width: 768px) {
  .filter-toggle-btn {
    display: none !important;
    /* Hide toggle button on desktop */
  }

  .filter-bottom-sheet {
    display: none !important;
    /* Hide bottom sheet on desktop */
  }

  .blog-filter-pills {
    display: flex;
    /* Show pills on desktop */
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Blog List - Cards (Mobile-First) */
/* ===== BLOG CATEGORIES SECTION ===== */
/* Categories appear above blog list, always full width */

/* ===== BLOG LAYOUT (MOBILE-FIRST) ===== */
/* Grid layout for desktop: main content + sidebar */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

/* Desktop: 2 columns - main content + sidebar */
@media (min-width: 1024px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--spacing-2xl);
  }

  /* Desktop: Reset order - content first, sidebar second (visual) */
  .blog-content {
    order: 1;
  }

  .blog-sidebar-wrapper {
    order: 2;
  }
}

/* Blog Content Area */
.blog-content {
  min-width: 0;
  /* Prevents overflow in grid */
}

/* Blog Sidebar Wrapper – grid item (sticky child inside) */
.blog-sidebar-wrapper {
  /* Mobile: before content if shown */
  order: -1;
}

/* Blog Sidebar – content inside wrapper; sticky on desktop */
.blog-sidebar {
  position: static;
  max-height: none;
  overflow-y: visible;
}

/* Desktop: wrapper stretches to row height so sticky has room to stick */
@media (min-width: 1024px) {
  .blog-sidebar-wrapper {
    order: 2;
    align-self: stretch;
    margin-top: 0;
    overflow: visible;
  }

  .blog-sidebar {
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--spacing-md));
    max-height: none;
    overflow-y: visible;
    /* Wyrównanie z treścią: offset jak margin-top wrappera, ale wewnątrz sticky */
    margin-top: 0;
  }
}

/* Blog Categories Section - Must be visually calm after hero */
/* Rule: Categories cannot compete with hero */
/* Mental model: Hero = editorial choice, Categories = exploration filter */
.blog-categories-section {
  margin-top: 0;
  /* No margin-top - hero margin-bottom handles spacing */
  margin-bottom: var(--spacing-xl);
  /* Mobile: Same spacing as blog cards */
}

/* Mobile: Hero margin-bottom handles spacing to categories */
@media (max-width: 767px) {
  .blog-hero-featured {
    margin-bottom: var(--spacing-xl);
    /* Same spacing as gap between blog cards (32px) */
  }
}

/* Desktop: Categories in sidebar - adjust spacing */
@media (min-width: 1024px) {
  .blog-categories-section {
    margin-bottom: var(--spacing-xl);
    /* Same spacing as mobile for consistency */
  }
}

/* Desktop: Categories in sidebar - adjust spacing */
@media (min-width: 1024px) {
  .blog-sidebar .blog-categories-section {
    margin-top: 0;
    /* Sidebar starts at top (aligned with blog-list via transform) */
    margin-bottom: var(--spacing-xl);
    /* Spacing before Popular section */
  }
}

/* Calm down sidebar title in categories section */
/* Uses standard sidebar-title font-size but with reduced opacity and semibold weight */
.blog-categories-section .sidebar-title {
  font-size: clamp(1.125rem, 1.125rem + 0.25vw, 1.25rem) !important;
  /* Mobile: 18px → Desktop: 20px - override h3 default */
  opacity: 0.8;
  /* More subtle */
  font-weight: var(--font-weight-semibold);
  /* Lighter than bold */
}

/* ===== BLOG MAIN (MOBILE-FIRST) ===== */
/* Blog main contains blog list, pagination, and popular articles */
/* Always full width - no sidebar layout */

.blog-main {
  margin-top: 0;
}

.blog-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: 0;
  /* Gap handled by load-more margin-top */
}

@media (min-width: 768px) {
  .blog-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

/* Desktop: Optimize spacing and layout */
@media (min-width: 1024px) {
  .blog-list {
    gap: var(--spacing-xl);
    /* Consistent spacing matching design system (32px) */
  }
}

/* ===== BLOG FEATURED POST / HERO (MOBILE-FIRST) ===== */
/* Mobile: Simple featured card */
/* Desktop: Enhanced hero with larger image and longer excerpt */

/* Blog Featured Hero - Editorial Hero Section (Not a card) */
/* Directly after breadcrumbs, full-width background image with text overlay */

/* Blog Hero Featured - Variant A: Editorial/Magazine (default) */
/* Character: calm, quality, editorial, timeless */
/* Best for: expert blog, educational, evergreen content */
.blog-hero-featured {
  position: relative;
  width: 100%;
  margin-top: 0;
  /* Directly after breadcrumbs - no gap */
  margin-bottom: var(--spacing-xl);
  /* Spacing before blog-page content */
  overflow: hidden;
  min-height: 60vh;
  /* Mobile - Variant A */
  aspect-ratio: 16 / 9;
  /* Fallback for CLS prevention */
  display: flex;
  align-items: flex-end;
  /* Mobile: text at bottom (Variant A) */
  /* Safari fix: No transform needed - link is not wrapper, clean stacking context */
}

@media (min-width: 768px) {
  .blog-hero-featured {
    min-height: 70vh;
    /* Desktop - Variant A */
    margin-bottom: var(--spacing-xl);
    /* Same spacing as between categories and popular sections */
    /* Desktop: text slightly below center (editorial bias) - Variant A */
    align-items: flex-end;
    padding-bottom: 8%;
    /* Creates editorial bias down */
  }
}

/* Variant C - Minimal (uncomment to use, better for very long titles) */
/* Smaller height, more focus on typography */
/*
.blog-hero-featured {
  min-height: 50vh;
}
@media (min-width: 768px) {
  .blog-hero-featured {
    min-height: 55vh;
  }
}
*/

/* Remove margin-bottom from media query above - already defined above */

/* Background Image */
.blog-hero-featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Fallback background gradient when no image */
  background: linear-gradient(135deg,
      rgba(109, 130, 89, 0.8) 0%,
      rgba(79, 93, 67, 0.9) 50%,
      rgba(60, 75, 55, 1) 100%);
}

.blog-hero-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fallback: When no image, use gradient background */
.blog-hero-featured--no-image .blog-hero-featured-image {
  background: linear-gradient(135deg,
      rgba(109, 130, 89, 0.95) 0%,
      rgba(79, 93, 67, 0.98) 50%,
      rgba(60, 75, 55, 1) 100%);
}

.blog-hero-featured--no-image .blog-hero-featured-image img {
  display: none;
}

/* When no image, overlay should be more transparent */
.blog-hero-featured--no-image .blog-hero-featured-overlay {
  background: rgba(0, 0, 0, 0.2);
}

/* When no image, text color stays white (already on dark background) */
.blog-hero-featured--no-image .blog-hero-featured-content {
  color: var(--color-pure-white);
}

/* Alternative: If you want to use light text on light background when no image */
/* Uncomment this if you prefer dark text on light gradient background */
/*
.blog-hero-featured--no-image .blog-hero-featured-content {
  color: var(--color-text-dark);
}

.blog-hero-featured--no-image .blog-hero-featured-title,
.blog-hero-featured--no-image .blog-hero-featured-excerpt,
.blog-hero-featured--no-image .blog-hero-featured-meta,
.blog-hero-featured--no-image .blog-hero-featured-eyebrow {
  color: var(--color-text-dark);
}

.blog-hero-featured--no-image .blog-hero-featured-category {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
}
*/

/* Dark Overlay for Text Readability */
/* Variant A - Editorial/Magazine (default) - gradient only where text is */
/* Safer UX - works with any image quality */
.blog-hero-featured-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 60%,
      rgba(0, 0, 0, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
  /* Allow clicks to pass through */
}

/* Variant B - Brand/Atmosphere (more emotional, requires curated images) */
/* Uncomment to use - WARNING: requires high-quality, curated images */
/*
.blog-hero-featured-overlay {
  background: linear-gradient(
    to bottom,
    rgba(109, 130, 89, 0.35) 0%,
    rgba(79, 93, 67, 0.55) 50%,
    rgba(0, 0, 0, 0.75) 100%
  );
}
*/

/* Variant C - Minimal/Typography-first (subtle overlay, best for long titles) */
/* Uncomment to use - best for very long titles */
/*
.blog-hero-featured-overlay {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 70%,
    rgba(0, 0, 0, 0.65) 100%
  );
}
*/

/* Safari fix: Link moved from wrapper to title only to avoid WebKit stacking context bug */
/* Invisible click layer for full-section clickability (UX enhancement) */
.hero-click-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Invisible - just for click target */
  background: transparent;
  cursor: pointer;
  /* Hidden from screen readers - main link is on title */
}

/* Title link - semantic, accessible link */
.blog-hero-featured-title-link {
  color: inherit;
  text-decoration: none;
  display: block;
  outline: none;
}

.blog-hero-featured-title-link:focus-visible {
  outline: 3px solid var(--color-pure-white);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Content Overlay - Text positioned at bottom (mobile) / 55-60% (desktop) */
/* Safari fix: Clean stacking context - no transform needed, link is not wrapper */
.blog-hero-featured-content {
  position: relative;
  z-index: 3;
  /* Above overlay (1) and click layer (2) */
  width: 100%;
  padding: var(--spacing-2xl) var(--container-padding-mobile);
  color: var(--color-pure-white);
  /* Clean stacking - no transform hacks needed */
}

@media (min-width: 768px) {
  .blog-hero-featured-content {
    padding: var(--spacing-3xl) var(--container-padding);
  }
}

/* Editorial Eyebrow - "Wyróżniony artykuł" (Variant A - Editorial/Magazine) */
/* Safari fix: Clean styles - no hacks needed since link is not wrapper */
.blog-hero-featured-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--spacing-sm);
  opacity: 0.85;
}

/* Meta Information - Always visible on both mobile and desktop */
/* Safari fix: Clean styles - no hacks needed since link is not wrapper */
.blog-hero-featured-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.blog-hero-featured-category {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(109, 130, 89, 0.9);
  color: var(--color-pure-white);
  border-radius: var(--radius-badge);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
}

/* Typography - Hero Title (Editorial Quality) */
/* Safari fix: Clean styles - no hacks needed since link is not wrapper */
.blog-hero-featured-title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.5rem, 5.2vw, 3rem);
  /* Mobile: 24px → Desktop: 48px - reduced min for better mobile fit */
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* Consistent with card titles */
  margin: 0 0 0.5rem 0;
  max-width: var(--reading-width);
  /* Optimal reading width */
  color: var(--color-pure-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  /* Stronger shadow for better contrast */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* Maximum 3 lines for long titles */
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Very small screens: further reduce hero title to prevent 4-5 line titles */
@media (max-width: 360px) {
  .blog-hero-featured-title {
    font-size: clamp(1.375rem, 6vw, 2rem);
    /* 22px min for tiny phones (320px) - prevents excessive line wrapping */
  }
}

.blog-hero-featured-title-link {
  color: inherit;
  text-decoration: none;
  /* Inherit text-shadow and other styles from parent */
}

/* Typography - Excerpt */
/* Safari fix: Clean styles - no hacks needed since link is not wrapper */
.blog-hero-featured-excerpt {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
  /* Mobile: 16px → Desktop: 20px */
  line-height: 1.65;
  /* Consistent with article body - improved readability */
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  max-width: var(--reading-width);
  /* Optimal reading width: 65ch */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
  .blog-hero-featured-excerpt {
    line-height: 1.7;
    /* More breathing room on desktop - editorial gold standard */
  }
}

/* Conditional Excerpt - Hide for long titles */
.blog-hero-featured.is-long-title .blog-hero-featured-excerpt {
  display: none;
}

/* Legacy blog-featured styles removed - replaced with .blog-hero-featured */

/* Blog Pagination Wrapper */
.blog-pagination-wrapper {
  margin-top: var(--spacing-xl) !important;
  /* Same spacing as gap between blog cards (32px) - gap from last card */
  margin-bottom: 0 !important;
  /* Load-more button handles bottom spacing */
}

/* B1: Load more / Pagination - narzędzie, nie sekcja (bez tła, nagłówka, emocji) */
.shop-products-section+.blog-pagination-wrapper {
  margin-top: var(--section-normal) !important;
  /* B1: Normalny odstęp po gridzie */
  padding-top: var(--section-tight);
  /* B1: Drobne przejście przed kontrolkami */
}

/* Blog Pagination - Always in DOM for SEO/a11y */
/* Mobile: Hidden visually but accessible to screen readers and SEO */
.blog-pagination {
  /* Default: hidden visually but accessible */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Desktop: Visible pagination */
@media (min-width: 768px) {
  .blog-pagination {
    /* Reset sr-only styles for desktop */
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border-width: initial;
    /* Show as flex */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Desktop: Hide "Load more" by default, show as alternative if needed */
  .blog-load-more {
    display: none;
  }
}

/* Mobile: "Load more" as primary */
@media (max-width: 767px) {
  .blog-load-more {
    display: flex !important;
    /* Force display on mobile - override desktop rule */
  }

  /* Pagination remains visually hidden but accessible (sr-only pattern) */
  /* Styles already applied above */
}

/* Load More Button Styles */
.blog-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 44px;
  padding: var(--spacing-md) var(--spacing-lg);
  margin-top: 0;
  /* No margin-top - wrapper handles spacing from last card */
  margin-bottom: 72px;
  /* 32px gap + 64px bottom-nav height = 96px, but need to account for overlap */
  /* Adjusted to 72px to achieve 32px visual gap */
}

.blog-load-more-loading {
  display: none;
  align-items: center;
  gap: var(--spacing-sm);
}

.blog-load-more-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.pagination-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.pagination-pages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--spacing-xs);
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 44px;
  color: var(--color-text-dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-weight: var(--font-weight-medium);
  border: 1px solid transparent;
}

.pagination-link:hover {
  background: var(--color-sage-green);
  color: var(--color-deep-sage);
}

.pagination-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.1);
}

.pagination-link--page.active,
.pagination-link--page[aria-current="page"] {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-color: var(--color-primary-olive);
  font-weight: var(--font-weight-semibold);
}

/* Blog Popular Section - Inside sidebar */
.blog-popular-section {
  /* Default: when categories are visible above, need top margin */
  margin-top: var(--spacing-2xl);
  margin-bottom: 0;
  /* Popular is typically last in sidebar, no bottom margin needed */
}

/* Mobile: Consistent spacing - same as blog cards gap */
@media (max-width: 767px) {
  .blog-popular-section {
    margin-top: var(--spacing-xl);
    /* Popular section is below categories, needs top margin when categories are visible */
    margin-bottom: 0;
    /* Popular is last, no bottom margin needed */
  }

  /* When categories are hidden, popular should be at top with no margin */
  .blog-sidebar .blog-categories-section[style*="display: none"]~.blog-popular-section {
    margin-top: 0;
  }

  .blog-sidebar .sidebar-widget:first-child {
    margin-top: 0;
    /* Remove top margin from first widget in sidebar - sidebar margin-top handles spacing */
  }

  .blog-sidebar .sidebar-widget:last-child {
    margin-bottom: 0;
    /* Remove bottom margin from last widget in sidebar */
  }

  .blog-layout {
    gap: var(--spacing-xl) !important;
    /* Same spacing as blog cards gap (32px) - override default */
  }

  .blog-filters {
    margin-top: 0;
    /* No top margin - gap handled by blog-layout gap */
    margin-bottom: var(--spacing-xl);
    /* Same spacing as blog cards gap (32px) */
  }
}

/* Desktop: Categories first, then popular section */
@media (min-width: 1024px) {
  .blog-sidebar .blog-categories-section {
    margin-top: 0;
    /* Categories section is first, no top margin */
    margin-bottom: var(--spacing-2xl);
    /* Space below categories for popular section (if visible) */
  }

  .blog-sidebar .blog-popular-section {
    margin-top: var(--spacing-2xl);
    /* Popular section is below categories, needs top margin when categories are visible */
    margin-bottom: 0;
    /* Popular is last, no bottom margin needed */
  }

  /* When categories are hidden, popular should be at top with no margin */
  .blog-sidebar .blog-categories-section[style*="display: none"]~.blog-popular-section,
  .blog-sidebar .blog-categories-section:not([style*="display"])[style*="display: none"]~.blog-popular-section {
    margin-top: 0;
  }
}

/* Popular Articles - Compact layout for sidebar (Mobile-first) */
.popular-articles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  /* Compact spacing for sidebar */
}

.popular-item {
  margin: 0;
  list-style: none;
}

.popular-article-link {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  text-decoration: none;
  color: inherit;
  padding: var(--spacing-xs) 0;
  /* Compact padding like category-link */
  border-radius: 0;
  /* No border-radius for compact sidebar */
  transition: all var(--transition-fast);
  outline: none;
  align-items: flex-start;
}

.popular-article-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.1);
  border-radius: var(--radius-sm);
}

.popular-article-link:active {
  transform: scale(0.98);
  background: var(--color-off-white);
}

@media (min-width: 768px) {
  .popular-article-link:hover .popular-article-title {
    color: var(--color-primary-olive);
    text-decoration: underline;
    /* Subtle underline like category-link */
  }
}

/* Popular Article Image - Compact thumbnail for sidebar */
.popular-article-image {
  width: 60px !important;
  /* Compact size for sidebar */
  height: 40px !important;
  /* Fixed height for compact layout */
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-stone-gray);
  position: relative;
}

.popular-article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.popular-article-image .popular-article-image-actual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popular-article-image .blog-card-image-placeholder {
  /* Smaller placeholder for popular articles */
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
}

.popular-article-image .blog-card-image-placeholder svg {
  width: 32px;
  height: 32px;
  opacity: 0.6;
  animation: placeholder-pulse 2s ease-in-out infinite;
}

@keyframes placeholder-pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.popular-article-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Minimal gap like category-link */
  flex: 1;
  min-width: 0;
  /* Allow text to shrink */
}

.popular-article-title {
  font-size: var(--font-size-ui-label) !important;
  /* 14px - same as category-link */
  font-weight: var(--font-weight-regular) !important;
  /* Regular weight like category-link */
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popular-article-meta {
  font-size: clamp(0.75rem, 0.75rem + 0.125vw, 0.8125rem) !important;
  /* Mobile: 12px → Desktop: 13px - improved readability while maintaining secondary status */
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
  /* Better line-height for readability */
  opacity: 0.7;
  /* Slightly more transparent for compact look */
}

/* Popular articles remain in compact column layout for sidebar (no grid on desktop) */

/*
 * Canonical content card used for editorial content (homepage + blog)
 * Mobile-first: whole card is tappable, :active only on mobile, :hover from 768px.
 * NOTE: .blog-card adds blog-specific layout on top of this base.
 */
.content-card {
  /* Mobile: entire card behaves like a single tappable surface */
  display: block;
  border-radius: var(--radius-card);
  background: var(--color-pure-white);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  position: relative;
}

/* Mobile press feedback – no hover on touch */
.content-card:active {
  transform: scale(0.985);
  box-shadow: var(--shadow-md);
}

/* Desktop: subtle lift on hover only from 768px */
@media (min-width: 768px) {
  .content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft-hover);
  }
}

/* Blog Card - Mobile First (extends .content-card for blog listing) */
.blog-card {
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  /* Mobile: active state only */
}

/* Hidden articles for Load More (progressive enhancement) */
.blog-card--hidden {
  display: none;
}

.blog-card--visible {
  display: flex;
}

.blog-card:active {
  transform: scale(0.98);
}

/* Desktop: subtelne style jak product-card */
@media (min-width: 768px) {
  .blog-card {
    padding: var(--spacing-lg);
    overflow: hidden;
  }

  .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft-hover);
    border-color: var(--color-primary-olive);
    background: var(--color-pure-white);
  }

  .blog-card-image {
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
  }

  .blog-card:hover .blog-card-image img {
    transform: scale(1.03);
    transition: transform var(--transition-slow);
  }
}

.blog-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
  /* Cały card klikalny */
  cursor: pointer;
  /* Remove default link outline */
  outline: none;
}

/* Focus styles for blog card links */
.blog-card-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 4px rgba(109, 130, 89, 0.1);
}

/* Blog Card Image - CLS Safe */
/* NOTE: Negative margins removed for blog-list page - use .blog-list .blog-card-image override */
.blog-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-stone-gray);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  position: relative;
  /* Ensure placeholder positioning works correctly */
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow), opacity 0.3s ease-in-out;
  /* CLS prevention - aspect-ratio on wrapper */
}

.blog-card-image .blog-card-image-actual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-card-content {
  padding-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
}

/* Desktop: subtelne style jak product-card */
@media (min-width: 768px) {
  .blog-card-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
  }

  .blog-card:hover .blog-card-image img {
    transform: scale(1.03);
  }

  .blog-card-content {
    padding-top: 0;
  }
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.8125rem;
  /* 13px - accessible small text size */
  color: rgba(79, 93, 67, 0.7);
  /* Improved contrast: 0.7 opacity instead of muted color */
  flex-wrap: wrap;
}

.blog-card-meta time {
  font-weight: var(--font-weight-medium);
}

/* Blog Card Typography - Mobile-First with Desktop Enhancements */
.blog-card-title {
  font-size: clamp(1.125rem, 1.125rem + 0.5vw, 1.375rem);
  /* Mobile: 18px → Desktop: 22px */
  line-height: 1.35;
  /* Slightly more breathing room for better readability */
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-sm) 0;
  font-family: var(--font-family-heading);
  max-width: 65ch;
  /* Optimal line length */
  letter-spacing: -0.01em;
  /* Consistent with hero title - slightly tighter for editorial elegance */
}

.blog-card-excerpt {
  font-size: clamp(0.9375rem, 0.9375rem + 0.125vw, 1rem);
  /* Mobile: 15px → Desktop: 16px - improved readability on mobile */
  line-height: 1.65;
  /* Consistent with article body - system-wide line-height */
  color: var(--color-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 65ch;
}

@media (min-width: 768px) {
  .blog-card-excerpt {
    -webkit-line-clamp: 4;
    /* Longer excerpts on desktop */
    line-clamp: 4;
    line-height: 1.7;
    /* More breathing room on desktop - editorial gold standard */
  }
}

/* Blog Card Skeleton Loading */
.blog-card-skeleton-wrapper {
  display: flex;
  flex-direction: column;
}

.blog-card-skeleton {
  aspect-ratio: 16 / 9;
  background: var(--color-border);
  border-radius: var(--radius-card);
  animation: skeleton-loading 1.4s ease infinite;
  background: linear-gradient(90deg,
      var(--color-border) 25%,
      var(--color-surface-muted) 37%,
      var(--color-border) 63%);
  background-size: 400% 100%;
}

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

  100% {
    background-position: 0 0;
  }
}

.blog-card-skeleton-content {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.blog-card-skeleton-title {
  height: 24px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  width: 80%;
  animation: skeleton-loading 1.4s ease infinite;
  background: linear-gradient(90deg,
      var(--color-border) 25%,
      var(--color-surface-muted) 37%,
      var(--color-border) 63%);
  background-size: 400% 100%;
}

.blog-card-skeleton-excerpt {
  height: 16px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  width: 100%;
  margin-bottom: var(--spacing-xs);
  animation: skeleton-loading 1.4s ease infinite;
  background: linear-gradient(90deg,
      var(--color-border) 25%,
      var(--color-surface-muted) 37%,
      var(--color-border) 63%);
  background-size: 400% 100%;
}

.blog-card-skeleton-excerpt:last-child {
  width: 60%;
}

/* ===== BLOG ARTICLE (MOBILE-FIRST) ===== */

.blog-article {
  padding: var(--spacing-xl) var(--spacing-container-padding-mobile);
  background: linear-gradient(180deg,
      var(--color-hero-step-1) 0%,
      var(--color-hero-step-2) 25%,
      var(--color-hero-step-3) 60%,
      var(--color-hero-step-4) 100%);
  min-height: calc(100vh - var(--header-height-mobile));
}

@media (min-width: 768px) {
  .blog-article {
    padding: var(--spacing-xl) var(--spacing-container-padding);
    min-height: calc(100vh - var(--header-height-desktop));
  }
}

/* Article Hero Image */
.article-hero {
  margin: var(--spacing-xl) 0;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.article-hero img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* CLS prevention - explicit dimensions */
  max-width: 100%;
}

.article-hero figcaption {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* Article Content */
.article-content {
  max-width: var(--reading-width);
  /* Optimal line length: 65ch for reading comfort */
  margin: 0 auto;
  padding: 0 var(--container-padding-mobile);
  /* Mobile padding: 24px (1.5rem) */
}

/* Podstawowy tekst (p) */
.article-content p {
  font-size: var(--fs-base);
  /* Fluid base font: 16px mobile → 18px desktop */
  line-height: var(--line-height-body);
  /* 1.65 - consistent system-wide line-height */
  margin-bottom: 1.25rem;
  /* Vertical rhythm: 20px spacing between paragraphs */
  color: var(--color-text-dark);
  text-align: left;
  hyphens: auto;
  /* Automatic hyphenation for Polish text */
  text-wrap: balance;
  /* Balance line lengths for headings (if supported) */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .article-content {
    padding: 0 var(--container-padding);
    /* Desktop padding: 40px (2.5rem) */
  }

  .article-content p {
    font-size: var(--fs-base-max);
    /* 18px on desktop */
    line-height: var(--line-height-article-desktop);
    /* Editorial gold standard: 1.75 - optimal for reading long-form content */
  }
}

/* Very small screens: extra breathing room for dense text */
@media (max-width: 480px) {
  body {
    line-height: var(--line-height-small);
    /* 1.75 for tiny screens - improved readability on small devices */
  }

  .blog-card-excerpt {
    line-height: var(--line-height-small);
    /* 1.75 for better readability on very small screens */
  }

  .blog-hero-featured-excerpt {
    line-height: var(--line-height-small);
    /* 1.75 for better readability on very small screens */
  }

  .article-content p {
    line-height: var(--line-height-small);
    /* Extra breathing room on very small screens */
  }
}

/* H2 - sekcje (najważniejsze) */
.article-content h2 {
  font-family: var(--font-family-heading);
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  /* Mobile: 24px → Desktop: 28px - fluid scaling */
  line-height: 1.3;
  margin-top: 1.75rem;
  /* 28px - consistent vertical rhythm */
  margin-bottom: 0.75rem;
  /* 12px - tight spacing below */
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

/* H3 - rzadko, lokalnie */
.article-content h3 {
  font-family: var(--font-family-heading);
  font-size: clamp(1.25rem, 1.6vw, 1.375rem);
  /* Mobile: 20px → Desktop: 22px - fluid scaling */
  line-height: 1.4;
  margin-top: 1.5rem;
  /* 24px - consistent spacing */
  margin-bottom: 0.5rem;
  /* 8px - tight spacing below */
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

/* Related Articles Section */
.related-articles-section {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-3xl);
  border-top: 2px solid var(--color-border);
}

.related-articles-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.related-articles-title {
  font-family: var(--font-family-heading);
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  /* Mobile: 24px → Desktop: 28px - consistent with article H2 */
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.3;
}

.related-articles-description {
  font-size: var(--fs-base);
  /* Fluid base font: 16px mobile → 18px desktop */
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .related-articles-description {
    font-size: var(--fs-base-max);
    /* 18px on desktop */
  }
}

.related-articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  /* Same gap as blog-list */
  margin-bottom: var(--spacing-2xl);
}

@media (min-width: 768px) {
  .related-articles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

@media (min-width: 1024px) {
  .related-articles-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xl);
    /* More space between cards on desktop */
  }
}

.related-articles-footer {
  text-align: center;
  margin-top: var(--spacing-xl);
}

.related-articles-footer .btn {
  min-width: 200px;
}

@media (max-width: 767px) {
  .related-articles-section {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
  }

  .related-articles-header {
    margin-bottom: var(--spacing-xl);
  }

  .related-articles-grid {
    gap: var(--spacing-lg);
    /* Slightly smaller gap on mobile */
  }

  .related-articles-footer .btn {
    width: 100%;
    max-width: 100%;
  }
}

/* Listy (ul, ol) */
.article-content ul,
.article-content ol {
  padding-left: 1.25em;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-dark);
}

.article-content li {
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
  font-size: var(--font-size-body-mobile);
}

@media (min-width: 768px) {
  .article-content li {
    font-size: var(--font-size-body);
  }
}

/* Cytaty (blockquote) */
.article-content blockquote {
  border-left: 4px solid var(--color-sage-green);
  padding-left: var(--spacing-md);
  margin: var(--spacing-xl) 0;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-body-mobile);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .article-content blockquote {
    font-size: var(--font-size-body);
    padding-left: var(--spacing-lg);
  }
}

/* Obrazy (CMS-friendly) */
.article-content img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: var(--spacing-lg) 0;
  display: block;
  max-width: 100%;
  /* CLS prevention - explicit dimensions */
  /* Brak inline width/height z CMS */
  /* Aspect ratio kontrolujesz wrapperem (jeśli trzeba) */
}

.article-content figure {
  margin: var(--spacing-lg) 0;
}

.article-content figcaption {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* Linki w treści */
.article-content a {
  color: var(--color-primary-olive);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.article-content a:hover,
.article-content a:focus {
  color: var(--color-deep-sage);
}

/* Strong i em */
.article-content strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.article-content em {
  font-style: italic;
}

/* Code (opcjonalnie) */
.article-content code {
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 0.9em;
  background: var(--color-off-white);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-text-dark);
}

.article-content pre {
  background: var(--color-off-white);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: var(--spacing-lg) 0;
}

.article-content pre code {
  background: none;
  padding: 0;
}

.breadcrumb-separator {
  color: var(--color-text-muted);
  opacity: 0.5;
}

.breadcrumb-current {
  color: var(--color-deep-sage);
  font-weight: var(--font-weight-medium);
}

/* Breadcrumb Container - reusable component for all pages */
.breadcrumb-container {
  background: var(--color-off-white);
  padding: var(--spacing-sm) 0;
  border-top: var(--header-underline-height) solid var(--header-underline-color);
}

.breadcrumb-container .breadcrumb {
  margin-bottom: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .breadcrumb-container {
    padding: var(--spacing-xs) 0;
  }
}

/* Special spacing for blog page: reduce gap between breadcrumb and filters */
.breadcrumb-container+.blog-page {
  padding-top: 0;
  /* No extra padding - breadcrumb handles spacing */
}

/* Special spacing for community page: reduce gap between breadcrumb and content */
.breadcrumb-container+.community-page {
  padding-top: 0;
  /* No extra padding - breadcrumb handles spacing */
}


/* ===== typography.css ===== */
/* Design tokens są już wbudowane powyżej */

/* Typography styles are already in base.css, this file can be used for additional typography utilities */


/* ===== layout.css ===== */
/* Design tokens są już wbudowane powyżej */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

.grid-col-3 {
  grid-column: span 3;
}

/* USPOKOJENIE: Mobile grid = 1 kolumna na start */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: 1 kolumna - lepsza czytelność, większe CTA, mniejsze cognitive load */
  gap: var(--spacing-lg);
}

/* Tablet+: 2 kolumny */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 kolumny od tablet - spokojny rytm */
  }
}



/* Blog Articles Grid - for homepage sections */
/* Zgodne z design system .product-grid */
.blog-articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: 1 kolumna - lepsza czytelność, większe CTA, mniejsze cognitive load */
  gap: var(--spacing-lg);
}

/* Tablet+: 2 kolumny */
@media (min-width: 768px) {
  .blog-articles-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 kolumny od tablet - spokojny rytm (zgodne z design system) */
  }
}

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-2xl);
}

.pagination-button {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-pure-white);
  border-radius: var(--radius-sm);
  color: var(--color-text-dark);
  transition: var(--transition-fast);
}

.pagination-button:hover {
  border-color: var(--color-primary-olive);
  color: var(--color-primary-olive);
}

.pagination-button.active {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-color: var(--color-primary-olive);
}


/* ===== buttons.css ===== */
/* Wbudowane style przycisków (zamiast @import, który nie działa w file://) */
/* =====================================
   BUTTONS - KANONICZNY CSS (MOBILE-FIRST)
   ===================================== */

/* =====================================
   BASE .btn
   ===================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);

  min-height: 44px;
  padding: 0 var(--spacing-lg);

  font-size: var(--font-size-body);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  line-height: 1;

  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;

  cursor: pointer;
  text-decoration: none;

  transition: all 0.3s ease;
  white-space: nowrap;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* =====================================
   WARIANTY
   ===================================== */

/* Primary */
.btn-primary {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-deep-sage);
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-primary:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 3px;
}

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

/* Secondary */
.btn-secondary {
  background: var(--color-pure-white);
  color: var(--color-text-dark);
  border-color: var(--color-border);
}

/* Secondary: stabilny wizualnie, ale z subtelnym feedbackiem */
.btn-secondary:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--color-primary-olive);
  outline-offset: 3px;
}

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

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

.btn-ghost:hover:not(:disabled) {
  background: rgba(109, 130, 89, 0.08);
}

.btn-ghost:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-ghost:focus-visible {
  outline: 2px solid var(--color-primary-olive);
  outline-offset: 3px;
}

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

/* Danger */
.btn-danger {
  background: var(--color-danger);
  color: var(--color-pure-white);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-pastel-berry);
}

.btn-danger:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-danger:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 3px;
}

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

/* Danger Outline */
.btn-danger-outline {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  transition: all 0.3s ease;
}

.btn-danger-outline:hover:not(:disabled) {
  background: rgba(220, 53, 69, 0.1);
  border-color: var(--color-pastel-berry);
  color: var(--color-pastel-berry);
}

.btn-danger-outline:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-danger-outline:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 3px;
}

.btn-danger-outline:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Accent */
.btn-accent {
  background: var(--color-accent-yellow-pro);
  color: var(--color-deep-sage);
  box-shadow: var(--shadow-soft);
}

.btn-accent:hover:not(:disabled) {
  background: #F9E99F;
  box-shadow: var(--shadow-md);
}

.btn-accent:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-accent:focus-visible {
  outline: 2px solid var(--color-primary-olive);
  outline-offset: 3px;
}

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

/* =====================================
   ROZMIARY
   ===================================== */
.btn-small {
  min-height: 44px;
  /* Mobile-friendly touch target */
  padding: 0 var(--spacing-md);
  padding-inline: var(--spacing-md);
  /* RTL-friendly */
  font-size: var(--font-size-small);
}

/* =====================================
   IKONOWE PRZYCISKI
   ===================================== */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  background: transparent;
  border: none;
  border-radius: var(--radius-full);

  cursor: pointer;
}

.btn-icon:hover:not(:disabled) {
  background: var(--color-background-soft);
}

.btn-icon svg {
  fill: currentColor;
}

/* =====================================
   GLOBALNE STANY
   ===================================== */
.btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 3px;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
  transition: transform 80ms ease;
}

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

/* =====================================
   MODYFIKATORY
   ===================================== */
.btn-block {
  width: 100%;
  display: inline-flex;
}

/* =====================================
   MOBILE: NO HOVER, ONLY ACTIVE
   ===================================== */

@media (max-width: 767px) {

  .btn:hover:not(:disabled),
  .btn-icon:hover:not(:disabled) {
    /* Reset hover styles on mobile */
    background: inherit;
    color: inherit;
    border-color: inherit;
    transform: none;
  }

  .btn:active:not(:disabled),
  .btn-icon:active:not(:disabled) {
    transform: scale(0.98);
  }
}

/* =====================================
   DESKTOP: FULL HOVER + ACTIVE
   ===================================== */

@media (min-width: 768px) {
  .btn-primary:hover:not(:disabled) {
    background: var(--color-deep-sage);
    transform: translateY(-1px);
  }

  /* Secondary: subtelny feedback - nie zmienia tła, tylko border i shadow */
  .btn-secondary:hover:not(:disabled) {
    border-color: var(--color-primary-olive);
    box-shadow: 0 0 0 1px rgba(109, 130, 89, 0.2);
  }

  .btn-ghost:hover:not(:disabled) {
    background: rgba(109, 130, 89, 0.08);
    transform: translateY(-1px);
  }

  .btn-danger:hover:not(:disabled) {
    background: var(--color-pastel-berry);
    transform: translateY(-1px);
  }

  .btn-accent:hover:not(:disabled) {
    background: #F9E99F;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .btn-icon:hover:not(:disabled) {
    background: rgba(109, 130, 89, 0.08);
    transform: translateY(-1px);
  }
}

/* =====================================
   PUBLIC BUTTONS - SCOPED STYLES
   (body:not(.admin) - izolacja od admin)
   ===================================== */

/* Mobile-first: brak hover na mobile, tylko :active */
/* UWAGA: .filter-tag i .filter-pill mają własne hover styles i nie są dotknięte */
@media (max-width: 767px) {
  body:not(.admin) .btn:hover:not(:disabled):not(.filter-tag):not(.filter-pill) {
    /* Mobile: reset hover styles - tylko :active działa */
    background-color: initial;
    color: initial;
    border-color: initial;
    box-shadow: initial;
    transform: none;
  }
}

/* Desktop: hover styles z buttons.css działają normalnie - nie nadpisujemy */
@media (min-width: 768px) {

  /* Secondary: subtelny feedback - nie zmienia tła, tylko border i shadow */
  body:not(.admin) .btn-secondary:hover:not(:disabled) {
    border-color: var(--color-primary-olive);
    box-shadow: 0 0 0 1px rgba(109, 130, 89, 0.2);
  }
}

/* Hero Actions - przyciski w sekcji hero */
@media (max-width: 767px) {
  body:not(.admin) .hero-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

/* Product Info Actions */
@media (max-width: 767px) {
  body:not(.admin) .product-info-actions .btn {
    width: 100%;
  }
}

/* Checkout Actions */
@media (max-width: 767px) {
  body:not(.admin) .checkout-actions .btn {
    width: 100%;
  }
}

/* Contact Actions */
body:not(.admin) .contact-actions .btn {
  width: 100%;
  justify-content: center;
}

/* Form submit button - full width */
body:not(.admin) .contact-page form .btn {
  width: 100%;
  justify-content: center;
}

/* Newsletter Widget */
body:not(.admin) .newsletter-widget .btn {
  width: 100%;
}

/* Footer Buttons - specjalne style dla footer */
body:not(.admin) .footer .btn-secondary {
  background: var(--color-accent) !important;
  color: var(--color-text-dark) !important;
  box-shadow: 0 6px 18px rgba(109, 130, 89, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

@media (min-width: 768px) {
  body:not(.admin) .footer .btn-secondary:hover:not(:disabled) {
    color: var(--color-pastel-berry) !important;
  }
}

/* Cart Summary Button - sticky na mobile */
@media (max-width: 767px) {
  body:not(.admin) .cart-summary .btn-primary.btn-block {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    z-index: var(--z-index-sticky);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    margin: 0;
    border-top: 1px solid var(--color-border);
  }
}

/* ===== community.css ===== */
/* Wbudowane style community (zamiast @import, który nie działa) */
/* UWAGA: design-tokens.css i buttons.css są już wbudowane powyżej */

/* Community Page - Match blog-page structure */
.community-page {
  padding-top: 0 !important;
  /* Override any other rules - breadcrumb handles spacing */
  padding-bottom: var(--spacing-xl);
  padding-left: 0;
  padding-right: 0;
  /* Ensure overflow-y: visible for sticky sidebar to work (match .blog-page) */
  overflow-y: visible;
  background: linear-gradient(180deg,
      var(--color-hero-step-1) 0%,
      var(--color-hero-step-2) 25%,
      var(--color-hero-step-3) 60%,
      var(--color-hero-step-4) 100%);
  /* Match blog-page gradient */
}

@media (max-width: 767px) {
  .community-page {
    padding-top: 0 !important;
    /* Override any other rules - breadcrumb handles spacing */
    padding-bottom: var(--spacing-xl);
    padding-left: 0;
    padding-right: 0;
  }
}

/* Community Layout - Match blog-layout structure */
.community-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  /* Match blog-layout gap */
}

@media (min-width: 1024px) {
  .community-layout {
    grid-template-columns: 2fr 1fr;
    /* Main content + sidebar */
    gap: var(--spacing-3xl);
    /* Match blog-layout desktop gap */
  }
}

/* Community Content - Match blog-content structure */
.community-content {
  min-width: 0;
  /* Prevents overflow in grid */
  display: flex;
  flex-direction: column;
  gap: 0;
  /* No gap - spacing handled by individual sections */
}

/* Hero Section */
.community-hero {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.community-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--font-weight-h1);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.01em;
}

.community-hero p {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Layout */
.community-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

.community-layout main {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .community-layout {
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3xl);
  }
}

/* Cards used as posts in community - spacing between posts */
/* Community Posts List - Grid layout with gap (matching blog-list) */
.community-posts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  /* Same gap as blog-list */
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .community-posts-list {
    gap: var(--spacing-xl);
  }
}

@media (min-width: 1024px) {
  .community-posts-list {
    gap: var(--spacing-xl);
    /* Consistent spacing matching sidebar cards and blog pagination */
  }
}

/* Community feed cards – canonical .community-card (no hover lift) */
.community-card {
  background: var(--color-pure-white);
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-lg) 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  position: relative;
}

.community-card:first-of-type {
  border-top: 1px solid var(--color-border);
}

.community-card:hover {
  transform: none;
  box-shadow: none;
}

.community-card:active {
  transform: none;
  box-shadow: none;
  background: rgba(109, 130, 89, 0.03);
}

.community-card h2::after,
.community-card h3::after,
.community-card .card-title::after {
  display: none !important;
}

.community-layout .community-content .card .post-card-image,
.community-layout main .card .post-card-image,
.community-content .card .post-card-image,
.community-posts-list .card .post-card-image {
  border-radius: var(--radius-sm);
}

.community-layout .community-content .card:hover .post-card-image img,
.community-layout main .card:hover .post-card-image img,
.community-content .card:hover .post-card-image img,
.community-posts-list .card:hover .post-card-image img {
  transform: scale(1.03);
  transition: transform var(--transition-slow);
}

/* Mobile only: sidebar widgets not sticky (desktop uses sticky sidebar) */
@media (max-width: 1023px) {
  .community-layout aside .sidebar-widget,
  .community-layout aside .sidebar-widget:first-child {
    position: static !important;
    top: auto !important;
  }
}

/* Community Sidebar Wrapper – grid item (sticky child inside), same pattern as blog */
.community-sidebar-wrapper {
  display: block;
}

/* Desktop: wrapper stretches to row height so sticky has room to stick */
@media (min-width: 1024px) {
  .community-sidebar-wrapper {
    order: 2;
    align-self: stretch;
    /* Same visual start as blog: top of content block (align with blog’s sidebar below hero) */
    /* Pull sidebar cards closer to page header (Safari + Chrome safe) */
    margin-top: -9rem;
    overflow: visible;
  }

  .community-sidebar {
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--spacing-md));
    max-height: none;
    overflow-y: visible;
  }
}

/* Hide "Twoje konto" in sidebar on all viewports – account is in header (profile icon) */
.community-sidebar #auth-status {
  display: none !important;
}

/* Mobile: Reorganize community layout */
@media (max-width: 767px) {

  /* Hide "Wolontariusze" widget on mobile - takes too much space */
  .community-sidebar #top-contributors-widget {
    display: none !important;
  }

  /* Show "Wydarzenia" widget - important content, should be visible */
  .community-sidebar #events-widget {
    display: block !important;
    margin-bottom: var(--spacing-xl);
  }

  /* Reorder community layout on mobile: Composer -> Filters -> Events -> Posts -> Pagination */
  .community-layout {
    display: flex;
    flex-direction: column;
  }

  /* Main content (composer, filters, posts) - first */
  .community-content {
    order: 0;
    display: flex;
    flex-direction: column;
  }

  /* Post composer - first element in content */
  .post-composer {
    order: 0;
  }

  /* Filters - second element in content */
  .blog-filters {
    order: 1;
  }

  /* Posts list - third element in content (after sidebar on mobile) */
  .community-posts-list {
    order: 3;
  }

  /* Pagination - last element in content */
  .blog-pagination-wrapper {
    order: 4;
  }

  /* Sidebar wrapper (with events) - after filters, before posts */
  .community-sidebar-wrapper {
    order: 2;
    margin-bottom: var(--spacing-xl);
  }
}

/* Post Composer - Match blog-card styling */
.post-composer {
  background: var(--color-pure-white);
  /* Match blog-card background */
  border-radius: var(--radius-card);
  padding: var(--spacing-lg);
  /* Match blog-card padding */
  box-shadow: var(--shadow-soft);
  /* Match blog-card shadow */
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-xl);
  /* Same spacing as blog-filters margin-bottom */
  transition: all var(--transition-base);
}

/* Composer Actions - Proper button styling matching blog filters */
.composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  align-items: center;
}

/* Mobile: Stack buttons vertically for better UX */
@media (max-width: 767px) {
  .composer-actions {
    flex-direction: column;
    /* Stack buttons one under another */
    align-items: stretch;
    /* Full width buttons */
  }

  .composer-actions .btn {
    width: 100%;
    /* Full width buttons on mobile */
    justify-content: center;
    /* Center content */
  }

  .composer-actions .btn-primary {
    margin-left: 0 !important;
    /* Remove margin-left on mobile - no need for auto since buttons are stacked */
    order: -1;
    /* Move publish button to top for better UX */
  }

  .composer-actions .btn-ghost {
    order: 0;
    /* Ghost buttons after primary */
  }
}

/* Composer buttons use standard btn classes - ensure proper styling */
.composer-actions .btn-ghost {
  /* btn-ghost already has proper styling from buttons.css */
  font-size: var(--font-size-body-mobile);
  /* Match filter pills font-size */
  min-height: 44px;
  /* Touch target */
}

.composer-actions .btn-primary {
  /* btn-primary already has proper styling from buttons.css */
  margin-left: auto !important;
  /* Push to right - force with !important to override any other rules */
  min-height: 44px;
  /* Touch target */
}

/* Post Composer uses canonical form-input styles */
.post-composer textarea.form-input {
  /* Inherits canonical form-input styles from base styles */
  min-height: 160px;
  /* Match canonical textarea min-height */
  resize: vertical;
  /* All other styles (border, padding, border-radius, box-shadow, focus) come from canonical .form-input and textarea base styles */
}

.composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  align-items: center;
}

/* Composer buttons - używają kanonicznych klas btn btn-ghost */
/* Composer actions - btn-ghost zgodnie z dokumentacją */
/* Dokumentacja: "Transparent background, Deep Sage text, 1px Stone Gray border" */
.composer-actions .btn-ghost {
  background: transparent;
  color: var(--color-text-dark);
  /* Deep Sage - var(--color-text-dark) = #4F5D43 */
  border: 1px solid var(--color-border);
  /* Stone Gray border - 1px */
  /* Hover: background: rgba(109, 130, 89, 0.08) - już w buttons.css */
}

/* Ensure icon is always on the left on mobile */
@media (max-width: 767px) {

  body:not(.admin) .composer-actions .btn-ghost,
  .composer-actions .btn-ghost {
    flex-direction: row;
  }

  body:not(.admin) .composer-actions .btn-ghost svg,
  .composer-actions .btn-ghost svg {
    order: -1;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }

  body:not(.admin) .composer-actions .btn-ghost span,
  .composer-actions .btn-ghost span {
    order: 1;
  }
}

.composer-actions .btn-ghost svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Filter Tags - Premium Pills */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

/* Filter tags - używają kanonicznych klas btn */
/* UWAGA: Wyższa specificity niż body:not(.admin) .btn */
body:not(.admin) .filter-tag,
.filter-tag {
  /* Reset base btn styles dla filter-tag */
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 2px 8px rgba(109, 130, 89, 0.04);
}

body:not(.admin) .filter-tag.btn-secondary,
.filter-tag.btn-secondary {
  background-color: var(--color-pure-white);
  border-color: var(--color-border);
  color: var(--color-text-dark);
}

/* Mobile: tylko :active, brak hover */
body:not(.admin) .filter-tag:active,
.filter-tag:active {
  transform: scale(0.98);
}

/* Desktop: hover działa */
@media (min-width: 768px) {

  body:not(.admin) .filter-tag:hover,
  .filter-tag:hover {
    background-color: rgba(175, 199, 162, 0.1);
    border-color: var(--color-primary-olive);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(109, 130, 89, 0.08);
  }
}

body:not(.admin) .filter-tag.active,
.filter-tag.active {
  background-color: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-color: var(--color-primary-olive);
  box-shadow: 0 8px 24px rgba(109, 130, 89, 0.10);
}

/* Post Cards - Enhanced */
/* UWAGA: W HTML używane są .card, więc style muszą działać dla .card z .post-card-* elementami */
.card .post-card-header,
.post-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.card .post-card-avatar,
.post-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--color-sage-green);
}

.card .post-card-avatar img,
.post-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .post-card-author,
.post-card-author {
  flex: 1;
}

.card .post-card-author-name,
.post-card-author-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-body);
}

.card .post-card-author-location,
.post-card-author-location {
  font-size: 0.8125rem;
  /* 13px - matching blog-card-meta */
  color: rgba(79, 93, 67, 0.7);
  /* Match blog-card-meta opacity for consistency */
  opacity: 0.7;
}

.card .post-card-date,
.post-card-date {
  font-size: 0.8125rem;
  /* 13px - matching blog-card-meta */
  color: rgba(79, 93, 67, 0.7);
  /* Match blog-card-meta opacity for consistency */
  opacity: 0.7;
}

.card .post-card-content,
.post-card-content {
  margin-bottom: var(--spacing-md);
}

.card .post-card-content p,
.post-card-content p {
  font-size: clamp(0.9375rem, 0.9375rem + 0.125vw, 1rem);
  /* Mobile: 15px → Desktop: 16px (matching blog-card-excerpt) */
  line-height: 1.65;
  /* Match blog-card-excerpt line-height */
  color: var(--color-text-dark);
  margin: 0;
}

/* Very small screens: extra breathing room for community posts */
@media (max-width: 480px) {

  .card .post-card-content p,
  .post-card-content p {
    line-height: 1.75;
    /* Increased line-height on tiny screens */
  }
}

/* Desktop: match blog-card-excerpt line-height */
@media (min-width: 768px) {

  .card .post-card-content p,
  .post-card-content p {
    line-height: 1.7;
    /* More breathing room on desktop (matching blog-card-excerpt desktop) */
  }
}

.card .post-card-image,
.post-card-image {
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
  aspect-ratio: 16/9;
  background: var(--color-stone-gray);
}

.card .post-card-image img,
.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card .post-card-actions,
.post-card-actions {
  display: flex;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.card .post-card-action,
.post-card-action {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: var(--font-size-small);
}

.card .post-card-action:hover,
.post-card-action:hover {
  background-color: rgba(109, 130, 89, 0.08);
  color: var(--color-primary-olive);
}

.card .post-card-action svg,
.post-card-action svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.card .post-card-action.heart.active,
.post-card-action.heart.active {
  color: var(--color-pastel-berry);
}

.card .post-card-action.heart.active svg,
.post-card-action.heart.active svg {
  fill: var(--color-pastel-berry);
}

/* Post Cards - Enhanced (dla kompatybilności z .post-card jeśli będzie używane) */
.post-card {
  background-color: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-xl);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.post-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.post-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--color-sage-green);
}

.post-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card-author {
  flex: 1;
}

.post-card-author-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-body);
}

.post-card-author-location {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.post-card-date {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.post-card-content {
  margin-bottom: var(--spacing-md);
}

.post-card-content p {
  line-height: 1.7;
  color: var(--color-text-dark);
  margin: 0;
  font-size: var(--font-size-body);
}

.post-card-image {
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
  aspect-ratio: 16/9;
  background: var(--color-stone-gray);
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card-actions {
  display: flex;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.post-card-action {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: var(--font-size-small);
}

.post-card-action:hover {
  background-color: rgba(109, 130, 89, 0.08);
  color: var(--color-primary-olive);
}

.post-card-action svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.post-card-action.heart.active {
  color: var(--color-pastel-berry);
}

.post-card-action.heart.active svg {
  fill: var(--color-pastel-berry);
}

/* .pinned-badge: canonical styles in website/assets/css/community-posts.css */

/* Sidebar Contributors */
.contributor {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.contributor:hover {
  background-color: var(--color-off-white);
}

.contributor:last-child {
  margin-bottom: 0;
}

.contributor-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary-olive);
  overflow: hidden;
  flex-shrink: 0;
}

.contributor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contributor-info {
  flex-grow: 1;
}

.contributor-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
}

.contributor-posts {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}



/* ===== navigation.css ===== */
/* Design tokens są już wbudowane powyżej */

/* Desktop Header - Design System 2.0 */
/* Mobile first - relative by default */
.header {
  position: relative;
  z-index: var(--z-index-sticky);
  background-color: var(--color-background);
  box-shadow: var(--shadow-header);
  height: var(--header-height-mobile);
  width: 100%;
}

/* Desktop: Fixed header (Safari-compatible) */
@media (min-width: 769px) {
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--z-index-sticky) !important;
    width: 100% !important;
    height: var(--header-height-desktop) !important;
    /* Removed backdrop-filter - causes issues with fixed positioning in Safari */
    background-color: var(--color-background) !important;
    box-shadow: var(--shadow-header);
    /* Ensure header is not affected by parent transforms */
    transform: none !important;
    will-change: auto !important;
  }

  /* Add padding-top to body to compensate for fixed header */
  body {
    padding-top: var(--header-height-desktop) !important;
  }

  /* Ensure html/body don't have properties that break fixed in Safari */
  html {
    transform: none !important;
    opacity: 1 !important;
    perspective: none !important;
  }

  body {
    transform: none !important;
    opacity: 1 !important;
    perspective: none !important;
  }
}

/* Mobile header - relative */
@media (max-width: 768px) {
  .header {
    position: relative !important;
    height: var(--header-height-mobile);
  }

  body {
    padding-top: 0 !important;
  }
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-container-padding-mobile);
  /* Mobile padding by default */
  position: relative;
  overflow: visible;
}

/* Desktop: Use larger padding */
@media (min-width: 768px) {
  .header-container {
    padding: 0 var(--spacing-container-padding);
    /* Desktop padding */
  }
}

/* Underline ograniczone do szerokości kontenera */
.header::after {
  pointer-events: none;
}

.header-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--header-underline-height));
  height: var(--header-underline-height);
  background: var(--header-underline-color);
  z-index: 1;
  border-radius: 2px;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: 20px;
  background: none;
  background-color: transparent;
}

.header-logo img {
  background: none;
  background-color: transparent;
}

.header-logo-image {
  height: var(--header-logo-height-desktop);
  width: auto;
  max-width: 360px;
  object-fit: contain;
  display: block;
  background: none;
  background-color: transparent;
  border: none;
  outline: none;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav-link {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-family-body);
  color: var(--color-text-dark);
  text-decoration: none;
  transition: all var(--transition-fast);
  padding: var(--spacing-xs) 0;
  position: relative;
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

/* Wyższa specyficzność - nagłówek + link z !important aby nadpisać globalny a:hover */
.header .header-nav-link:hover,
.header .header-nav-link.active,
.header-nav .header-nav-link:hover,
.header-nav .header-nav-link.active,
.header-container .header-nav-link:hover,
.header-container .header-nav-link.active,
.header .header-nav .header-nav-link:hover,
.header .header-nav .header-nav-link.active,
.header-container nav .header-nav-link:hover,
.header-container nav .header-nav-link.active,
.header-container nav ul.header-nav .header-nav-link:hover,
.header-container nav ul.header-nav .header-nav-link.active,
.header nav ul.header-nav li .header-nav-link:hover,
.header nav ul.header-nav li .header-nav-link.active,
header.header .header-container nav ul.header-nav li a.header-nav-link:hover,
header.header .header-container nav ul.header-nav li a.header-nav-link.active {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: var(--color-pastel-berry) !important;
  /* #B86A6E */
  text-underline-offset: 6px !important;
  color: var(--color-text-dark) !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  overflow: visible;
}

.header-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-dark);
  position: relative;
  transition: var(--transition-fast);
  border-radius: var(--radius-sm);
}

.header-icon:hover {
  color: var(--color-primary-olive);
  background: rgba(109, 130, 89, 0.08);
  box-shadow: 0 4px 14px rgba(109, 130, 89, 0.08);
  transform: none;
}

.header-icon:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

.header-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Header Avatar - matching manager app style */
.header-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-off-white);
  border: 2px solid var(--color-sage-green);
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

.header-icon-with-avatar .header-avatar {
  width: 40px;
  height: 40px;
}

.header-avatar-image {
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-full);
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
}

.header-avatar-initials {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-deep-sage);
  font-family: var(--font-family-body);
  line-height: 1;
}

.header-icon-with-avatar:hover .header-avatar {
  border-color: var(--color-sage-green);
  box-shadow: 0 2px 8px rgba(109, 130, 89, 0.15);
}

.header-mobile-icon .header-avatar {
  width: 44px;
  height: 44px;
  border: 2px solid var(--color-sage-green);
}

.header-mobile-icon .header-avatar-initials {
  font-size: 12px;
}

/* User Menu Dropdown (Medium-style) */
.header-user-menu {
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  right: 0;
  background: var(--color-pure-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  min-width: 240px;
  max-width: 320px;
  z-index: var(--z-index-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  margin-top: var(--spacing-xs);
}

.header-user-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-user-menu-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.header-user-menu-name {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-deep-sage);
  font-family: var(--font-family-body);
  margin-bottom: var(--spacing-xs);
}

.header-user-menu-email {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
}

.header-user-menu-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--spacing-xs) 0;
}

.header-user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-dark);
  text-decoration: none;
  font-size: var(--font-size-body-mobile);
  font-family: var(--font-family-body);
  transition: background-color var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.header-user-menu-item:hover {
  background-color: var(--color-off-white);
}

.header-user-menu-item svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

.header-user-menu-item--logout {
  color: var(--color-pastel-berry);
}

.header-user-menu-item--logout:hover {
  background-color: rgba(184, 106, 110, 0.08);
  color: var(--color-pastel-berry);
}

@media (max-width: 768px) {
  .header-user-menu {
    right: var(--spacing-sm);
    min-width: 200px;
  }
}

/* Mobile: design-system compatible (mobile-nav-drawer tokens, tap targets) */
@media (max-width: 767px) {

  .header-mobile-container,
  .header-mobile-actions {
    overflow: visible;
  }

  .header-user-menu--mobile,
  .header-mobile .header-user-menu {
    min-width: min(280px, calc(100vw - 2 * var(--spacing-md)));
    max-width: min(320px, calc(100vw - 2 * var(--spacing-md)));
    right: 0;
    left: auto;
    z-index: 9999;
    box-shadow: var(--shadow-bottom-sheet);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-xs);
  }

  .header-user-menu--mobile .header-user-menu-header,
  .header-mobile .header-user-menu .header-user-menu-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
  }

  .header-user-menu--mobile .header-user-menu-item,
  .header-mobile .header-user-menu .header-user-menu-item {
    min-height: var(--tap-target-min, 48px);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
  }

  .header-user-menu--mobile .header-user-menu-item:active,
  .header-mobile .header-user-menu .header-user-menu-item:active {
    background-color: var(--color-off-white);
  }

  .header-user-menu--mobile .header-user-menu-item--logout:active,
  .header-mobile .header-user-menu .header-user-menu-item--logout:active {
    background-color: rgba(184, 106, 110, 0.12);
  }
}

.header-icon-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-pastel-berry);
  color: var(--color-pure-white);
  border-radius: var(--radius-full);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Mobile Header */
.header-mobile {
  display: none !important;
  visibility: hidden !important;
  /* Hidden on desktop by default */
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  z-index: -1 !important;
  /* Desktop styles - will be overridden on mobile */
  background-color: var(--color-background);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-header);
  border-bottom: var(--header-underline-height) solid var(--header-underline-color);
  padding-top: env(safe-area-inset-top);
}

.header-mobile-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--spacing-container-padding-mobile);
  gap: var(--spacing-md);
}

.header-mobile-menu {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-dark);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.header-mobile-menu svg {
  width: 28px;
  height: 28px;
  stroke: var(--color-text-dark);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: block;
}

.header-mobile-menu svg line {
  stroke: var(--color-text-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.header-mobile-menu:active {
  background: rgba(109, 130, 89, 0.08);
}

.header-mobile-logo {
  display: none;
}

.header-mobile-logo-image {
  height: var(--header-logo-height-mobile);
  /* 48px dla mobile - bardziej widoczne */
  max-height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

.header-mobile-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Desktop: Force hide all mobile header elements completely */
/* This ensures mobile header is never visible on desktop, even with browser quirks */
/* Applied globally to prevent any visibility issues */
@media (min-width: 768px) {

  /* Main mobile header container */
  .header-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* All children and specific elements - override ANY inline styles */
  .header-mobile *,
  .header-mobile-container,
  .header-mobile-logo,
  .header-mobile-logo-image,
  .header-mobile-menu,
  .header-mobile-actions,
  .header-mobile-icon,
  .header-mobile-container *,
  .header-mobile-container::before,
  .header-mobile-container::after,
  .header-mobile::before,
  .header-mobile::after,
  /* Override inline styles with maximum specificity */
  .header-mobile [style],
  .header-mobile-container [style],
  .header-mobile a[style],
  .header-mobile button[style] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    content: none !important;
    /* Override inline display:flex or any other display value */
    text-decoration: none !important;
    align-items: normal !important;
    justify-content: normal !important;
  }
}

.header-mobile-icon {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-dark);
  position: relative;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.header-mobile-icon:active {
  background: rgba(109, 130, 89, 0.08);
  color: var(--color-primary-olive);
}

.header-mobile-icon:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

.header-mobile-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(72px + env(safe-area-inset-bottom));
  background: var(--color-pure-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  z-index: var(--z-index-sticky);
  display: none;
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  gap: 0;
}

.bottom-nav-container>.bottom-nav-item:not(.bottom-nav-item--home) {
  flex: 0 0 calc(25% - 20px);
  max-width: calc(25% - 20px);
}

.bottom-nav-container>.bottom-nav-item--home {
  flex: 0 0 75px;
  max-width: 75px;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: var(--transition-fast);
  text-decoration: none;
  min-width: 70px;
  max-width: 85px;
  padding: var(--spacing-sm) var(--spacing-xs);
  position: relative;
  z-index: 2;
}

.bottom-nav-item--home {
  position: relative;
  order: 2;
  flex: 0 0 75px;
  min-width: 75px;
  max-width: 75px;
  z-index: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-pure-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border);
  pointer-events: auto;
  margin: 0 var(--spacing-xs);
}

.bottom-nav-item--home .bottom-nav-logo {
  height: 38px;
  max-width: 75px;
  object-fit: contain;
}

.bottom-nav-item:is(a) {
  color: var(--color-text-muted);
}

.bottom-nav-item.active {
  color: var(--color-primary-olive);
}

.bottom-nav-item.active .bottom-nav-item-label {
  color: var(--color-primary-olive);
  font-weight: var(--font-weight-bold);
}

.bottom-nav-item:active {
  opacity: 0.7;
  transform: scale(0.95);
}

.bottom-nav-item svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.bottom-nav-logo {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.bottom-nav-item-label {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.01em;
}

.bottom-nav-item-center {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  background: var(--color-primary-olive);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  box-shadow: var(--shadow-button);
}

.bottom-nav-item-center svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-pure-white);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none;
  display: none;
}

.mobile-nav-drawer.active {
  display: block;
  pointer-events: all;
}

.mobile-nav-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 150ms ease-out;
}

.mobile-nav-drawer.active .mobile-nav-drawer-overlay {
  opacity: 1;
}

.mobile-nav-drawer-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 70vw;
  max-width: 300px;
  min-width: 240px;
  background: var(--color-pure-white);
  box-shadow: var(--shadow-bottom-sheet);
  transform: translateX(-100%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-height-mobile) + env(safe-area-inset-top));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer.active .mobile-nav-drawer-content {
  transform: translateX(0);
}

.mobile-nav-drawer-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-drawer-header h3 {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

.mobile-nav-drawer-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-dark);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.mobile-nav-drawer-close:active {
  background: var(--color-off-white);
}

.mobile-nav-drawer-body {
  flex: 1;
  padding: var(--spacing-md);
  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
}

/* User Section in Drawer */
.mobile-nav-drawer-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.mobile-nav-drawer-user-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-sage-green);
  background: var(--color-off-white);
}

.mobile-nav-drawer-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-nav-drawer-user-info {
  flex: 1;
  min-width: 0;
}

.mobile-nav-drawer-user-name {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  font-family: var(--font-family-body);
  margin-bottom: var(--spacing-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-drawer-user-email {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.mobile-nav-item {
  margin-bottom: var(--spacing-xs);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  color: var(--color-text-dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  min-height: 48px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-nav-link:active {
  background: var(--color-off-white);
}

.mobile-nav-link.active {
  background: rgba(109, 130, 89, 0.1);
  color: var(--color-primary-olive);
  font-weight: var(--font-weight-semibold);
}

.mobile-nav-link.js-mobile-logout {
  color: var(--color-pastel-berry);
  font-weight: var(--font-weight-medium);
}

.mobile-nav-link.js-mobile-logout:active {
  background-color: rgba(184, 106, 110, 0.12);
  color: var(--color-pastel-berry);
}

/* Responsive */
@media (max-width: 767px) {
  .header {
    display: none;
  }

  .header-mobile {
    display: block !important;
    visibility: visible !important;
    position: sticky !important;
    left: auto !important;
    top: 0 !important;
    width: auto !important;
    height: var(--header-height-mobile) !important;
    overflow: visible !important;
    z-index: var(--z-index-sticky) !important;
  }

  .mobile-nav-drawer {
    display: block;
  }

  .bottom-nav {
    display: block;
  }

  /* Disable hover on mobile for header icons */
  .header-mobile-icon:hover,
  .header-mobile-menu:hover {
    background: transparent;
    color: var(--color-text-dark);
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .header-logo-image {
    height: 55px;
    max-width: 220px;
  }

  .header-mobile-logo-image {
    height: 45px;
    max-width: 180px;
  }
}

@media (min-width: 1024px) {
  .header-logo-image {
    height: var(--header-logo-height-desktop);
    max-width: 360px;
  }
}


/* ===== hero.css ===== */
/* Design tokens są już wbudowane powyżej */

/* Hero Component - Elastyczna wysokość (Variant A) */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Design System 2.0 - Hero Background Gradient (4 stops) */
  background: linear-gradient(180deg,
      var(--color-hero-step-1) 0%,
      var(--color-hero-step-2) 25%,
      var(--color-hero-step-3) 60%,
      var(--color-hero-step-4) 100%);
  /* Elastyczne paddingi zamiast sztywnego min-height */
  padding-top: 7rem;
  /* 112px */
  padding-bottom: 6rem;
  /* 96px */
  min-height: auto;
  /* Usuwa sztywną wysokość */
}

@media (min-width: 768px) {
  .hero {
    padding-top: 8rem;
    /* 128px */
    padding-bottom: 7rem;
    /* 112px */
  }

  .hero-content {
    padding-bottom: var(--spacing-xl);
  }
}

@media (min-width: 1200px) {
  .hero {
    padding-top: 10rem;
    /* 160px - większy na dużych ekranach */
    padding-bottom: 10rem;
    /* 160px */
    /* Opcjonalnie: użyj safe viewport height dla bardzo dużych ekranów */
    /* min-height: calc(100svh - 140px); */
    /* 140px = header + pasek info */
  }
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.3;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
      var(--color-off-white) 0%,
      rgba(175, 199, 162, 0.2) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max-width);
  padding: 0 var(--spacing-container-padding);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  min-height: auto;
  /* Elastyczna wysokość zamiast sztywnej */
}

@media (min-width: 1024px) {
  .hero-content {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--gutter-desktop);
    align-items: baseline;
    padding-top: 0;
  }

  .hero-logo {
    align-self: center;
    /* Lepsze wyrównanie logo */
    margin-top: 2rem;
    /* Dodatkowy odstęp dla lepszej kompozycji */
  }

  .hero-logo-right {
    align-self: center;
    margin-top: 2rem;
  }

  .hero-logo img,
  .hero-logo-image {
    transform: translateY(0);
    /* Usuwa przesunięcie, które mogło powodować problemy */
    width: 94%;
  }
}

@media (max-width: 1023px) {
  .hero-content {
    gap: var(--gutter-mobile);
  }
}

@media (max-width: 1023px) {
  .hero-content {
    grid-template-columns: 1fr;
  }
}

.hero-title {
  max-width: 60ch;
  font-size: clamp(2.25rem, 6.5vw, 4rem);
  line-height: 1.03;
  font-weight: var(--font-weight-h1);
  font-family: var(--font-family-heading);
  color: #3e5036;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 4px rgba(79, 93, 67, 0.02);
  margin: 0 0 0.66em 0;
  hyphens: auto;
  word-break: break-word;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 400ms ease, opacity 400ms ease;
}

.hero-title.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.hero-lead {
  font-size: var(--font-size-body-mobile);
  line-height: var(--font-size-body-mobile-line);
  color: var(--color-text-dark);
  margin-bottom: 28px;
  max-width: 100%;
  opacity: 0.95;
}

@media (min-width: 768px) {
  .hero-lead {
    font-size: var(--font-size-body);
    line-height: var(--font-size-body-line);
    max-width: 100%;
  }
}

.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  order: -1;
}

.hero-logo-right {
  display: flex;
  align-items: center;
  justify-content: center;
  order: -1;
}

@media (min-width: 1024px) {
  .hero-logo {
    order: 1;
    justify-content: flex-end;
  }

  .hero-logo-right {
    order: 1;
    justify-content: flex-end;
  }
}

.hero-logo img,
.hero-logo-image {
  height: 200px;
  width: auto;
  max-width: 100%;
  opacity: 0.28;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.01));
  transition: opacity var(--transition-base);
}

@media (min-width: 768px) {

  .hero-logo img,
  .hero-logo-image {
    height: 380px;
    opacity: 0.28;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.01));
  }
}

/* Desktop: hero logo - transform usunięty, logo jest już wyrównane przez align-self: center */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

/* SHOP HERO - KROK 1: Hero + Kontekst zakupowy (spójny z design system) */
.shop-hero {
  padding: clamp(3rem, 8vw, 6rem) 0;
  margin-top: 0;
  margin-bottom: var(--spacing-xl);
  /* C1: Spójne z blogiem (featured article → categories = 32px) */
  /* Spacing matching blog hero - nie za duży gap */
  background: var(--color-off-white);
  /* Clean background matching design system - spójne z innymi sekcjami */
  border-bottom: 1px solid var(--color-border);
  /* Subtle separation - wyraźne cięcie przed entry */
}

.shop-hero-content {
  position: relative;
  z-index: 1;
}

/* Typography - H1 */
.shop-hero h1 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.75rem, 5vw, 3rem);
  /* 28px → 48px */
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 18ch;
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-md) 0;
  -webkit-font-smoothing: antialiased;
}

/* Typography - Lead text */
.shop-hero p {
  font-size: clamp(1rem, 1rem + 0.25vw, 1.25rem);
  /* 16px → 20px */
  line-height: 1.65;
  max-width: 40ch;
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-xl) 0;
}

/* Typography - Eyebrow */
.shop-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-olive);
  opacity: 0.8;
  margin-bottom: var(--spacing-sm);
}

/* Actions */
.shop-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  margin-top: var(--spacing-lg);
}

/* Mobile: CTA stacked (column) */
@media (max-width: 640px) {
  .shop-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-hero-actions .btn {
    width: 100%;
  }
}

/* Desktop: CTA inline, optional image/gradient on right */
@media (min-width: 1024px) {
  .shop-hero {
    background: linear-gradient(135deg,
        rgba(248, 246, 239, 0.98) 0%,
        rgba(237, 238, 229, 0.95) 50%,
        rgba(217, 229, 211, 0.9) 80%,
        rgba(248, 246, 239, 0.95) 100%);
    /* Subtle gradient can be enhanced with background image if needed */
  }

  .shop-hero-content {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
  }

  /* Future: If you want to add image on right side on desktop */
  /*
  .shop-hero-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
  }
  */
}

/* SHOP HERO SIMPLE - Ultra uproszczona, kompaktowa wersja (legacy - can be removed if not used) */
.shop-hero-simple {
  padding: 0 0 var(--spacing-md);
  background: transparent;
}

.shop-hero-simple .breadcrumb {
  margin-bottom: var(--spacing-xs);
  /* 4px odstęp poniżej breadcrumb */
  padding: var(--spacing-sm) 0 var(--spacing-xs) 0;
  /* Spójne z globalnymi stylami */
  line-height: 1.4;
}

.shop-hero-simple h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--font-weight-h1);
  margin: 0 0 var(--spacing-xs);
  margin-top: 0 !important;
  padding-top: 0;
  color: var(--color-deep-sage);
  font-family: var(--font-family-heading);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.shop-hero-simple-sub {
  font-size: var(--font-size-body-mobile);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
  font-family: var(--font-family-body);
}

@media (max-width: 768px) {
  .shop-hero-simple {
    padding: 0 0 var(--spacing-md);
  }

  .hero-actions {
    width: 100%;
  }

  /* Hero actions buttons - mobile layout */
  body:not(.admin) .hero-actions .btn {
    flex: 1;
    min-width: 0;
  }
}


/* ===== cards.css ===== */
/* Design tokens są już wbudowane powyżej */

.card {
  background: var(--color-pure-white);
  background-color: var(--color-pure-white);
  background-image: none;
  /* Explicitly disable any background images/gradients */
  border-radius: var(--radius-card);
  padding: var(--spacing-card-padding);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  transition: var(--transition-base);
  overflow: hidden;
  position: relative;
  z-index: 1;
  will-change: transform, box-shadow;
}

/* Separator pod tytułami kart */
/* UWAGA: Nie dotyczy kart postów społecznościowych (community cards) */
.card h2::after,
.card h3::after,
.card-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(99, 119, 78, 1), rgba(255, 244, 201, 0.9));
  border-radius: 2px;
}

/* Wyłącz separator dla kart postów społecznościowych - updated selectors */
.community-layout .community-content .card h2::after,
.community-layout .community-content .card h3::after,
.community-layout .community-content .card .card-title::after,
.community-layout main .card h2::after,
.community-layout main .card h3::after,
.community-layout main .card .card-title::after,
.community-content .card h2::after,
.community-content .card h3::after,
.community-content .card .card-title::after,
.community-posts-list .card h2::after,
.community-posts-list .card h3::after,
.community-posts-list .card .card-title::after {
  display: none !important;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft-hover);
  background: var(--color-pure-white);
}

/* Community cards don't have hover lift (special behavior) */
.community-card:hover,
.community-post.card:hover {
  transform: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .card:hover {
    transform: translateY(-2px);
  }
}

/* Zapobieganie pojawianiu się gradientu z tła strony w sekcji galerii */
.card:hover .camping-gallery,
.card:hover .trailer-gallery {
  background: transparent;
}

/* Product card specifics */
/* C1: Jedna karta = jedna decyzja - porządek + czytelność */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-base);
  border: 1px solid var(--color-border);
  position: relative;
  /* Potrzebne dla sticky footer na mobile */
  z-index: 1;
  cursor: pointer;
  /* Cała karta jako link - tap w kartę → szczegóły */
  gap: 0.5rem;
  /* C1: Oddech wewnątrz karty - mniej elementów = więcej oddechu = drożej wygląda */
}

/* ========================================
   PERCEIVED PERFORMANCE - SKELETON LOADING
   ======================================== */

/* Skeleton loading dla kart produktów - zero przeskoków, grid wygląda "gotowy" */
.product-card.is-loading {
  pointer-events: none;
  /* Wyłącz interakcję podczas ładowania */
}

.product-card.is-loading .product-card-image,
.product-card.is-loading .product-card-title,
.product-card.is-loading .product-card-price,
.product-card.is-loading .btn {
  background: linear-gradient(90deg,
      #f0f0f0 25%,
      #e6e6e6 37%,
      #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  color: transparent;
  /* Tekst transparentny - widoczny tylko skeleton */
  border-radius: var(--radius-sm);
}

.product-card.is-loading .product-card-image {
  aspect-ratio: 4 / 3;
  /* Zachowaj aspect ratio */
}

.product-card.is-loading .product-card-title {
  height: 1.35em;
  /* Wysokość jednej linii */
  margin-bottom: 0.5rem;
}

.product-card.is-loading .product-card-price {
  height: 1.5em;
  /* Wysokość ceny */
  width: 30%;
  /* Szerokość ceny */
}

.product-card.is-loading .btn {
  height: 48px;
  /* Wysokość buttona */
}

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

  100% {
    background-position: -100% 0;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

  .product-card.is-loading .product-card-image,
  .product-card.is-loading .product-card-title,
  .product-card.is-loading .product-card-price,
  .product-card.is-loading .btn {
    animation: none;
    background: #f0f0f0;
    /* Statyczny szary kolor bez animacji */
  }
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft-hover);
  border-color: var(--color-primary-olive);
  background: var(--color-pure-white);
}

/* Zdjęcia produktów */
.product-card-image {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--color-stone-gray);
  margin-bottom: var(--spacing-sm);
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card-image img {
  transform: scale(1.03);
}

/* Gradient przy dolnej krawędzi zdjęcia - PROBLEM 1: TYLKO dla featured cards */
/* Zwykłe karty: bez gradientu - mniej wizualnego chaosu na mobile */
.product-card-image::after {
  display: none;
  /* PROBLEM 1: Domyślnie wyłączony dla zwykłych kart */
}

/* PROBLEM 1: Gradient tylko dla featured cards */
.product-card--featured .product-card-image::after {
  display: block;
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.25),
      transparent);
  pointer-events: none;
  z-index: 2;
  /* Powyżej obrazu, poniżej badge'y (z-index: 3) */
}

/* Badge container */
/* C1: Badge - 1 badge na kartę, priorytet: Sezonowe > Nowość > BIO */
.product-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

/* C1: Badge - 1 badge na kartę, priorytet: Sezonowe > Nowość > BIO */
/* Jeśli jest więcej badge'y, ukryj wszystkie oprócz pierwszego (priorytet) */
.product-card-badge .badge:not(:first-child) {
  display: none !important;
  /* C1: Tylko pierwszy badge widoczny - priorytet */
}

/* C1: Jeśli jest więcej badge'y, ukryj wszystkie oprócz pierwszego (priorytet) */
.product-card-badge .badge:not(:first-child) {
  display: none !important;
  /* C1: Tylko pierwszy badge widoczny - priorytet */
}

.product-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--spacing-md);
}

/* KROK 23: KONTENT KARTY = NIE DOTYKA KRAWĘDZI */
/* Na mobile footer CTA potrzebuje przestrzeni */
@media (max-width: 639px) {
  .product-card-content {
    padding: 14px 14px 12px;
    /* 14px góra/boki, 12px dół - footer CTA ma przestrzeń */
  }

  /* KROK 25: OCZYSZCZENIE KART PRODUKTÓW (MOBILE-FIRST, PREMIUM) */
  /* UKRYWAMY ZBĘDNE ELEMENTY NA MOBILE */
  .product-card-description {
    display: none;
    /* Długie opisy - przenieść na PDP (Product Detail Page) */
  }

  /* Meta-emocjonalne: tylko jeśli naprawdę wnosi wartość, 1 linia, mały font */
  .product-card-meta-emotional {
    font-size: 0.75rem;
    /* 12px - mały font */
    line-height: 1.3;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Max 1 linia */
  }
}

/* TYPOGRAFIA KART PRODUKTÓW - Optymalizacja hierarchii wizualnej */
/* Tytuł produktu - główny punkt skanowania (~17px mobile) */
.product-card-title {
  font-size: 1.05rem;
  /* ~17px mobile - główny punkt skanowania */
  font-weight: 600;
  color: var(--color-deep-sage);
  margin: 0 0 0.25rem 0;
  transition: color var(--transition-fast);
  line-height: 1.35;
  letter-spacing: -0.01em;
  /* Mikro-boost kontrastu przy Interze - ogromna różnica percepcyjna */
  position: relative;
  max-width: 18ch;
  /* Zapobiega "mikrotekstowi" na dwukolumnowych kartach */
  /* Ograniczenie do 2 linii - lepsza czytelność przy szybkim scrollu */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop - tytuł może być minimalnie większy */
@media (min-width: 640px) {
  .product-card-title {
    font-size: 1.0625rem;
    /* ~17px desktop */
  }
}

.product-card-title::after {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(99, 119, 78, 1), rgba(255, 244, 201, 0.9));
  border-radius: 2px;
}

/* PROBLEM 1: Usuń dekoracyjny separator pod tytułem na mobile - rozbija rytm, konkuruje z ceną */
/* KROK 25: NAZWA PRODUKTU — MNIEJ, ALE LEPIEJ */
/* Używamy !important i bardziej specyficznego selektora */
@media (max-width: 639px) {

  /* KROK 25: Wymuś -webkit-box dla line-clamp */
  .product-card-title {
    display: -webkit-box !important;
    /* Max 2 linie - nie rozwalają rytmu gridu */
  }

  .product-card .product-card-title::after,
  .product-grid .product-card-title::after {
    content: '' !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
  }
}

.product-card-title a {
  color: inherit;
  text-decoration: none;
  position: static;
  /* Karta jako link - link w tytule jest statyczny */
}

/* KROK 25: Link w tytule musi zachować -webkit-box dla line-clamp */
@media (max-width: 639px) {

  .product-card-title,
  .product-card-title a {
    display: -webkit-box !important;
    /* KROK 25: Zachowaj -webkit-box dla line-clamp */
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

.product-card-title:hover a {
  color: var(--color-primary-olive);
}

/* ERGONOMIA: Link tylko na treści - nie obejmuje footera i favorite */
.product-card a:not(.btn) {
  position: static;
  /* Linki w karcie nie zabierają karty z flow */
}

/* Zabezpieczenie przed misclickami - footer i favorite nie są częścią linku */
/* (Zdefiniowane poniżej w .product-card-favorite) */

/* Opis produktu - pomocniczy, cichszy (14px, max 2 linie) */
/* TYPOGRAFIA: Opis pomocniczy, nie konkuruje z tytułem */
/* KROK 25: UKRYWAMY ZBĘDNE ELEMENTY NA MOBILE */
.product-card-description {
  font-size: 0.875rem;
  /* 14px - pomocniczy, nie konkuruje z tytułem */
  line-height: 1.5;
  /* Dobry rytm dla pomocniczego tekstu */
  color: rgba(79, 93, 67, 0.75);
  /* Cichszy kolor niż tytuł - zmniejsza wizualny szum, zachowuje czytelność */
  margin: 0 0 0.5rem 0;
  flex: 1;
  /* Maksymalnie 2 linie - ważne dla czytelności na mobile */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* KROK 25: Description ukryty na mobile */
@media (max-width: 639px) {
  .product-card-description {
    display: none !important;
    /* Długie opisy - przenieść na PDP (Product Detail Page) */
  }
}

/* OBOWIĄZKOWO clamp na mobile - drastycznie poprawia skanowalność listy */
@media (max-width: 768px) {
  .product-card-description {
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.5;
    color: rgba(79, 93, 67, 0.75);
    /* Clamp jest krytyczny dla skanowalności listy */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Cena - silniejsza niż tytuł (~18.5px, bold) - punkt decyzyjny */
/* TYPOGRAFIA: Cena dominuje wizualnie - silniejsza niż tytuł */
.product-card-price {
  font-size: 1.15rem;
  /* ~18.5px - jeszcze 5-10% mocniej dla lepszej hierarchii */
  font-weight: 700;
  /* Bold - dominuje wizualnie, punkt decyzyjny */
  color: var(--color-primary-olive);
  margin-top: 0.5rem;
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
  /* Kompaktowy line-height dla ceny */
}

/* ERGONOMIA: Cena + CTA = jedna linia decyzyjna - psychologia */
@media (max-width: 767px) {
  .product-card-price {
    margin-top: 0.5rem;
    /* C1: Spójny spacing na mobile */
    margin-bottom: 0.75rem;
    /* Cena "zamyka" decyzję - CTA staje się oczywiste */
  }
}

/* ERGONOMIA: Footer jako strefa dotyku - CTA oddycha od dołu */
.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  /* Cena + CTA jako jeden blok decyzyjny - skraca czas decyzji */
  padding-top: 0.5rem;
  /* CTA przestaje "kleić się" do ceny - kciuk ma wyraźny punkt zaczepienia */
  pointer-events: auto;
  /* Zabezpieczenie przed misclickami - footer nie jest częścią linku */
}

/* UX: CTA NA KARCIE - Mniej, ale lepiej */
/* CTA zawsze pod kciukiem - sticky footer na mobile */
/* TYLKO dla kart w gridzie produktów, NIE na stronie produktu */
@media (max-width: 767px) {
  .product-grid .product-card-footer {
    position: sticky;
    bottom: 0;
    /* Sticky footer - CTA zawsze pod kciukiem */
    background: var(--color-pure-white);
    padding-top: 8px;
    margin-top: auto;
    /* Push do dołu */
    min-height: 56px;
    /* Łatwiej trafić - mniej frustracji */
    z-index: 2;
    /* Powyżej treści karty */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    /* Subtelny cień od góry */
  }

  /* Favorite obok CTA, ale mniejszy i mniej widoczny */
  .product-grid .product-card-footer .product-card-favorite {
    order: 2;
    /* Favorite po prawej */
    opacity: 0.7;
    /* Mniej widoczny - nie krzyczy */
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}

/* KROK 23: CTA + FAVORITE - FINALNY UKŁAD POD KCIUK */
@media (max-width: 639px) {
  .product-card-footer {
    display: grid !important;
    grid-template-columns: 1fr 44px;
    /* CTA = duże, stabilne | favorite = tap-target, ale nie dominuje */
    gap: 8px;
    align-items: center;
    /* Zero kolizji z krawędzią ekranu */
  }

  .product-card-footer .btn {
    font-size: 0.95rem;
    /* 15.2px - czytelne, ale nie za duże */
    font-weight: 600;
    /* Semibold - CTA musi być czytelniejsze */
    letter-spacing: 0;
    /* KROK 25: Bez letter-spacing - odchudzone */
    box-shadow: none !important;
    /* KROK 25: Bez box-shadow - nie krzyczy */
    min-height: 48px;
    /* Stabilny touch target */
  }

  .product-card-footer .product-card-favorite {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    /* Tap-target, ale nie dominuje */
  }
}

/* C1: CTA - teraz jest za ciężkie → uproszczone na mobile */
/* PROBLEM 2: CTA większe niż tekst pomocniczy - musi być czytelniejsze niż opis */
.product-card-footer .btn {
  width: 100%;
  /* C1: Pełna szerokość na mobile */
  font-size: 0.875rem;
  /* Desktop: 14px */
  padding: 0.5rem;
  /* C1: Kompaktowe padding */
}

/* PROBLEM 2: CTA 15px + font-weight 600 na mobile - lepszy kontrast, czytelniejsze niż opis */
@media (max-width: 639px) {
  .product-card-footer .btn {
    font-size: 0.9375rem;
    /* 15px - większe niż opis dla lepszej hierarchii */
    font-weight: 600;
    /* Semibold - CTA musi być czytelniejsze */
  }
}

/* ERGONOMIA: Favorite przeniesiony na obraz - nie konkuruje z CTA */
/* UWAGA: Favorite w HTML może być w footerze, ale CSS przenosi go na obraz */
.product-card-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  /* Nie w sam róg - naturalne skojarzenie "zapisz ten produkt" */
  /* Pozycjonowanie względem .product-card-image (position: relative) */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  /* Rozmiar OK dla touch target */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Safari support */
  /* Półprzezroczyste tło na obrazie - nie konkuruje z CTA */
  border: none;
  border-radius: 50%;
  /* KROK 25: Okrągła ikona, nie przycisk */
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  z-index: 4;
  /* Powyżej badge'y (z-index: 3) */
  box-shadow: none;
  /* KROK 25: Bez box-shadow - wygląda jak ikona, nie przycisk */
  pointer-events: auto;
  /* Zabezpieczenie przed misclickami - favorite nie jest częścią linku */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Subtelny cień dla lepszej widoczności na obrazie */
}

/* Jeśli favorite jest w footerze w HTML, wyciągamy go z flow i pozycjonujemy względem obrazu */
.product-card-footer .product-card-favorite {
  position: absolute;
  /* Wyciągnięty z flow footera */
  top: 12px;
  right: 12px;
  /* Pozycjonowanie względem .product-card-image */
  margin: 0;
  /* Usunięcie marginów z footera */
}

.product-card-favorite:hover {
  color: var(--color-pastel-berry);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* ERGONOMIA: Feedback dotykowy - potwierdzenie dotyku */
.product-card-favorite:active {
  transform: scale(0.9);
  /* Daje potwierdzenie dotyku - redukuje "czy kliknęło?" */
}

.product-card-favorite svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.product-card-favorite.active svg {
  fill: var(--color-pastel-berry);
  stroke: var(--color-pastel-berry);
}

.product-card-favorite.active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-pastel-berry);
}

/* ERGONOMIA: Tooltip dla favorite (tylko desktop) - dla power users */
/* Tooltip pozycjonowany względem samego favorite (który jest absolute) */
@media (min-width: 1024px) {
  .product-card-favorite::after {
    content: "Zapisz na później";
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    /* Pozycjonowanie względem samego favorite */
    font-size: 12px;
    font-family: var(--font-family-body);
    background: var(--color-pure-white);
    color: var(--color-text-dark);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 10;
    /* Powyżej innych elementów */
  }

  .product-card-favorite:hover::after {
    opacity: 1;
    /* Pokazuj tooltip tylko na hover (desktop) */
  }
}

/* Mobile → NIE pokazuj tooltipa */
@media (max-width: 1023px) {
  .product-card-favorite::after {
    display: none !important;
    content: none !important;
  }
}

/* Duplikat usunięty - tooltip zdefiniowany powyżej */

/* Przyciski w kartach - użyj .btn-ghost lub .btn-primary dla lepszego kontrastu */
/* Stare style .card .btn-secondary zostały usunięte - użyj kanonicznych klas w HTML */

/* Event Card - karta wydarzeń */
.event-card {
  display: flex;
  flex-direction: column;
}

.event-card-date {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-olive);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-card-title {
  font-size: var(--font-size-h3-mobile);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.3;
}

.event-card-description {
  font-size: var(--font-size-body-mobile);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--spacing-md) 0;
  flex: 1;
}

.event-card-footer {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: var(--spacing-md);
}

/* Event cards - preferuj ghost button */
/* .event-card .btn-secondary - użyj .btn-ghost w HTML dla lepszej widoczności */


/* ===== forms.css ===== */
/* Design tokens są już wbudowane powyżej */

input,
select,
textarea {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.5;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid var(--color-border);
  background: var(--color-pure-white);
  color: var(--color-text-dark);
  transition: var(--transition-base);
  width: 100%;
  min-height: 56px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* Textarea - more breathing room for content editor */
textarea {
  min-height: 160px;
  line-height: 1.5;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  font-size: 16px;
  padding: 14px 16px;
  cursor: pointer;
  min-height: 56px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%236d8259' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  padding-right: calc(var(--spacing-xl) + var(--spacing-md));
}

select:hover {
  border-color: var(--color-primary-olive);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.form-input::placeholder {
  color: var(--color-primary-olive);
  opacity: 0.6;
}

.form-input:focus,
select:focus,
textarea:focus {
  outline: none;
  border: 2px solid var(--color-primary-olive);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.18), 0 2px 6px rgba(0, 0, 0, 0.1);
  background: var(--color-pure-white);
}

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

.form-input:disabled {
  background: var(--color-stone-gray);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Custom Select (Sortuj/Filtry) */
.sort-wrapper {
  position: relative;
  display: inline-block;
}

.sort-wrapper select {
  padding: 10px 32px 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-pure-white);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-family-body);
  color: var(--color-text-dark);
  min-height: var(--tap-target-min);
  transition: all var(--transition-fast);
}

.sort-wrapper select:focus {
  outline: none;
  border-color: var(--color-primary-olive);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.18);
}

.sort-wrapper::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-primary-olive);
  font-size: 14px;
  line-height: 1;
}

/* Form Groups */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  font-size: 14px;
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Quantity Stepper */
.quantity-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-input);
  overflow: hidden;
  background: var(--color-pure-white);
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-fast);
}

.quantity-stepper:focus-within {
  border-color: var(--color-primary-olive);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.18), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.quantity-stepper button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--color-off-white);
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-primary-olive);
  cursor: pointer;
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 1;
}

.quantity-stepper button:first-child {
  border-right: 1px solid var(--color-border);
}

.quantity-stepper button:last-child {
  border-left: 1px solid var(--color-border);
  border-right: none;
}

.quantity-stepper button:hover {
  background-color: var(--color-primary-olive);
  color: var(--color-pure-white);
}

.quantity-stepper button:active {
  transform: scale(0.95);
}

.quantity-stepper input {
  width: 60px;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  background: var(--color-pure-white);
  box-sizing: border-box;
  flex-shrink: 1;
  padding: 0;
}

.quantity-stepper input:focus {
  outline: none;
  background: var(--color-pure-white);
}

/* Promo Code */
.promo-code-group {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.promo-code-group .form-input {
  flex: 1;
}

/* Delivery Options */
.delivery-options {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--color-off-white);
  border-radius: var(--radius-sm);
}

.delivery-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.delivery-option:hover {
  background-color: rgba(109, 130, 89, 0.05);
}

.delivery-option:last-child {
  margin-bottom: 0;
}

.form-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary-olive);
}

.form-radio-label {
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  cursor: pointer;
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  cursor: pointer;
  line-height: var(--line-height-body);
}

.form-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--color-primary-olive);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: var(--spacing-xs);
}

.form-checkbox-label span {
  flex: 1;
}


/* ===== product.css ===== */
/* Styles dla strony produktu - komponenty już zaimportowane wcześniej */

/* Breadcrumb Container - poniżej linii pod logo */
.breadcrumb-container {
  background: var(--color-off-white);
  padding: var(--spacing-sm) 0;
  border-top: var(--header-underline-height) solid var(--header-underline-color);
}

.breadcrumb-container .breadcrumb {
  margin-bottom: 0;
  padding: 0;
}

/* Product Page */
.product-page {
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
  background: linear-gradient(180deg,
      #F8F6EF 0%,
      #EDEEE5 25%,
      #D9E5D3 60%,
      #A3BC98 100%);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .breadcrumb-container {
    padding: var(--spacing-xs) 0;
  }

  .product-page {
    padding: var(--spacing-lg) 0 var(--spacing-2xl);
  }
}

/* Product Hero - używa shop-hero-simple z hero.css */

.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3xl);
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.product-gallery {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Mobile layout: stack everything from top to bottom */
@media (max-width: 1023px) {
  .product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .product-gallery {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 0;
    float: none;
  }

  .product-info {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
    overflow-y: visible;
  }
}

/* Desktop layout: image on left, info on right */
@media (min-width: 1024px) {
  .product-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .product-gallery {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 0;
    box-sizing: border-box;
  }

  .product-info {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
    min-width: 0;
    /* Zapobiega overflow w grid */
  }
}

.product-gallery-main {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-stone-gray);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
}

.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-gallery-thumbnails {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding-bottom: var(--spacing-xs);
}

.product-gallery-thumbnail {
  width: 100px;
  height: 100px;
  min-width: 80px;
  /* Mniejsze na mobile */
  min-height: 80px;
  /* Mniejsze na mobile */
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  background-color: var(--color-stone-gray);
}

@media (max-width: 768px) {
  .product-gallery-thumbnails {
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling na iOS */
  }

  .product-gallery-thumbnail {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
  }

  .product-info-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Moved to PUBLIC BUTTONS section (scoped) */
}

.product-gallery-thumbnail:hover {
  border-color: var(--color-primary-olive);
  transform: translateY(-2px);
}

.product-gallery-thumbnail.active {
  border-color: var(--color-primary-olive);
  box-shadow: var(--shadow-button-hover);
}

.product-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-info {
  position: static !important;
  /* Usunięcie pływającego elementu */
  top: auto !important;
  height: fit-content;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  /* Zapewnienie, że accordiony są widoczne */
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.product-info-badges {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.product-info h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--font-weight-h1);
  color: var(--color-deep-sage);
  margin: 0 0 var(--spacing-md);
  margin-top: 0 !important;
  padding-top: 0;
  line-height: 1.2;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.product-info p {
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--color-text-dark);
  margin: var(--spacing-md) 0;
  margin-bottom: var(--spacing-lg);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.product-info-price {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-olive);
  margin: var(--spacing-xl) 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.product-info-actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: var(--spacing-xl);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  min-width: 0;
  /* Zapobiega overflow w flex */
}

.product-info-actions>* {
  min-width: 0;
  /* Zapobiega overflow dla dzieci */
  max-width: 100%;
  box-sizing: border-box;
}

.product-info-pickup {
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(109, 130, 89, 0.08) 0%, rgba(175, 199, 162, 0.12) 100%);
  border-radius: var(--radius-card);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  border: 1px solid rgba(109, 130, 89, 0.15);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.product-info-pickup strong {
  color: var(--color-deep-sage);
  display: block;
  margin-bottom: var(--spacing-xs);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Accordion */
.accordion {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-card);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block !important;
  visibility: visible !important;
  transition: var(--transition-base);
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

.accordion:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-soft-hover);
}

.accordion:first-child {
  border-top: 1px solid var(--color-border);
}

.accordion:last-child {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.accordion-header {
  display: flex !important;
  visibility: visible !important;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  font-size: var(--font-size-body);
  transition: color var(--transition-fast);
  min-height: 44px;
  /* Minimalny tap target dla mobile */
  padding: var(--spacing-xs) 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.accordion-header:hover {
  color: var(--color-primary-olive);
}

.accordion-header svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform var(--transition-fast);
}

.accordion.active .accordion-header svg {
  transform: rotate(180deg);
}

.accordion-content {
  padding-top: var(--spacing-md);
  padding-left: 0;
  padding-right: 0;
  color: var(--color-text-dark);
  display: none;
  line-height: 1.7;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

.accordion.active .accordion-content {
  display: block;
}

.accordion-content p {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--color-text-dark);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

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

.accordion-content strong {
  color: var(--color-deep-sage);
  font-weight: var(--font-weight-semibold);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.accordion-content ul {
  margin: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
  color: var(--color-text-dark);
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.accordion-content li {
  margin-bottom: var(--spacing-xs);
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.accordion-content h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.stars {
  display: flex;
  gap: 2px;
  color: var(--color-accent-yellow-pro);
  font-size: 18px;
  flex-shrink: 0;
}

/* Review Item */
.review-item {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.review-item:first-of-type {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.review-author {
  color: var(--color-deep-sage);
  font-weight: var(--font-weight-semibold);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.review-stars {
  margin-top: 4px;
  font-size: 14px;
  flex-shrink: 0;
}

.review-date {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.review-text {
  margin: 0;
  line-height: 1.6;
  color: var(--color-text-dark);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

/* Product Section */
.product-section {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-3xl);
  border-top: 2px solid var(--color-border);
}

.product-section h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-xl);
}

.product-section h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.production-content {
  padding: var(--spacing-lg);
}

.production-content p {
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
  color: var(--color-text-dark);
}

.production-content ul {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
  color: var(--color-text-dark);
}

.production-content li {
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

.production-content li strong {
  color: var(--color-deep-sage);
  font-weight: var(--font-weight-semibold);
}

/* Related Products */
.related-products {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-3xl);
  border-top: 2px solid var(--color-border);
}

.related-products h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-xl);
}

.related-products .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}


/* ===== shop.css ===== */
/* Styles dla strony sklepu - wszystkie komponenty już wbudowane wcześniej */

/* Breadcrumb Container - poniżej linii pod logo */
.breadcrumb-container {
  background: var(--color-off-white);
  padding: var(--spacing-sm) 0;
  border-top: var(--header-underline-height) solid var(--header-underline-color);
}

.breadcrumb-container .breadcrumb {
  margin-bottom: 0;
  padding: 0;
}

/* Shop Page */
.shop-page {
  padding: 0 0 var(--spacing-3xl);
  /* C1: padding-top: 0 - hero jest poza shop-page, gap jest w margin-bottom hero */
  background: linear-gradient(180deg,
      #F8F6EF 0%,
      #EDEEE5 25%,
      #D9E5D3 60%,
      #A3BC98 100%);
}

@media (max-width: 768px) {
  .breadcrumb-container {
    padding: var(--spacing-xs) 0;
  }

  .shop-page {
    padding: var(--spacing-lg) 0 var(--spacing-2xl);
  }
}

/* Hero sekcja na stronie sklepu - uproszczony layout */
.shop-page .shop-hero-simple {
  margin-top: 0;
  padding-top: 0;
}

.shop-page .shop-hero-simple h1 {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: var(--spacing-xs);
}

.shop-page .shop-hero-simple h1.visually-hidden {
  margin-bottom: 0;
}

/* Shop Content (matching blog-content structure) */
.shop-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  /* Naprawa: Karty przycinane - shop-content nie może przekraczać viewport */
  box-sizing: border-box;
  overflow-x: hidden;
  /* Zapobiega overflow na mobile */
}

/* Search Section */
.shop-search {
  margin-bottom: var(--spacing-xl);
  margin-top: 0;
  /* Spacing handled by shop-content flow */
}

/* SHOP ENTRY SECTION - KROK 2: Search + Kategorie + Sortowanie jako decision hub */
/* FIX 1: Wspólna kolumna odniesienia dla wszystkich elementów entry */
/* STANDARD: Zmniejszone odstępy do var(--spacing-xl) = 32px (jak na blogu) */
.shop-entry {
  margin-bottom: var(--spacing-xl);
  /* STANDARD: 32px - zgodne z blogiem i spójne odstępy */
  padding: 0;
  /* Usunięto padding-bottom - gap jest w margin-bottom */
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Naprawa: Karty przycinane - entry nie może przekraczać viewport */
  box-sizing: border-box;
}

/* FIX 1: Wewnętrzny wrapper - JEDNA KOLUMNA ODNIESIENIA (jak artykuł na blogu) */
.shop-entry-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  /* 32px - spójne odstępy między elementami */
  width: 100%;
  /* Naprawa: Karty przycinane - entry-inner nie może przekraczać kontenera */
  box-sizing: border-box;
}

/* Naprawa: Na mobile entry-inner nie może mieć fixed max-width */
@media (max-width: 767px) {
  .shop-entry-inner {
    max-width: 100%;
    /* Na mobile pełna szerokość kontenera */
  }
}

/* STANDARD: Separator po całej sekcji entry - bez dodatkowego odstępu */
.shop-entry::after {
  content: '';
  display: block;
  margin-top: 0;
  /* Separator jest bezpośrednio po content - gap jest w margin-bottom entry */
  height: 1px;
  background: var(--color-border);
  width: 100%;
}

/* Search */
/* FIX 1: Search w wspólnej kolumnie - nie potrzebuje osobnych marginów */
.shop-entry-search {
  /* margin-bottom usunięty - gap w .shop-entry-inner obsługuje odstępy */
}

.shop-entry-search-form {
  width: 100%;
}

.shop-entry-search-wrapper {
  position: relative;
  width: 100%;
  /* FIX 1: Pełna szerokość wewnątrz .shop-entry-inner */
}

/* FIX 1: Nie ma już potrzeby osobnego wyśrodkowania - .shop-entry-inner to obsługuje */

.shop-entry-search-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 1;
}

.shop-entry-search-input {
  width: 100%;
  padding: 0 var(--spacing-md) 0 calc(var(--spacing-md) + 20px + var(--spacing-sm));
  border: 2px solid var(--color-border);
  border-radius: var(--radius-input);
  font-size: 1rem;
  /* Jawnie 16px dla maksymalnej czytelności */
  min-height: 48px;
  height: 48px;
  /* 48px total including border */
  background: var(--color-pure-white);
  color: var(--color-text-dark);
  font-family: var(--font-family-body);
  transition: all var(--transition-fast);
  box-sizing: border-box;
  line-height: 1;
  /* Line-height 1 to prevent extra height */
}

.shop-entry-search-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.shop-entry-search-input:focus {
  outline: none;
  border-color: var(--color-primary-olive);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.1);
}

/* Categories */
/* FIX 1: Categories w wspólnej kolumnie - nie potrzebuje osobnych marginów */
.shop-entry-categories {
  /* margin-bottom usunięty - gap w .shop-entry-inner obsługuje odstępy */
}

/* USPOKOJENIE: Kategorie = toolbar, nie sekcja contentowa */
.shop-entry-categories-title {
  display: none;
  /* Usuń tytuł - kategorie to narzędzie, nie content */
}

.shop-entry-categories-pills {
  display: flex;
  flex-wrap: nowrap;
  /* Zawsze nowrap - toolbar */
  gap: var(--spacing-sm);
  align-items: center;
  overflow-x: auto;
  /* Scrollable toolbar */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  /* Miejsce na scroll indicator */
  scrollbar-width: none;
  /* Firefox - ukryj scrollbar */
  -ms-overflow-style: none;
  /* IE/Edge - ukryj scrollbar */
}

/* USPOKOJENIE: Ukryj scrollbar - kategorie to szybki swipe, nie "ściana tagów" */
.shop-entry-categories-pills::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari - ukryj scrollbar */
}

.category-pill {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 0.9375rem;
  /* 15px */
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-body);
  border: 2px solid var(--color-border);
  background: var(--color-pure-white);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.category-pill:hover {
  border-color: var(--color-primary-olive);
  background: var(--color-sage-green);
  color: var(--color-deep-sage);
}

.category-pill:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.1);
}

.category-pill.active,
.category-pill[aria-current="page"],
.category-pill[aria-pressed="true"] {
  background: var(--color-primary-olive);
  border-color: var(--color-primary-olive);
  color: var(--color-pure-white);
  font-weight: var(--font-weight-semibold);
}

/* Sort (secondary, lower visual weight) */
/* FIX 2: Sort przeniesiony pod kategorie - należy do listy wyników, nie filtrów */
.shop-entry-sort {
  display: flex;
  justify-content: flex-start;
  /* FIX 1: Mobile: wyrównane do lewej */
  align-items: center;
  /* margin-top usunięty - gap w .shop-entry-inner obsługuje odstępy */
}

/* FIX 2: Desktop - sort wyrównany do prawej krawędzi wspólnej kolumny */
@media (min-width: 768px) {
  .shop-entry-sort {
    align-self: flex-end;
    /* FIX 2: Wyrównany do prawej krawędzi .shop-entry-inner */
  }
}

.shop-entry-sort-select {
  font-size: 0.875rem;
  opacity: 0.85;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-pure-white);
  color: var(--color-text-dark);
  font-family: var(--font-family-body);
  min-height: 44px;
  cursor: pointer;
  transition: all var(--transition-fast);
  width: auto;
  min-width: 200px;
}

.shop-entry-sort-select:hover {
  opacity: 1;
  border-color: var(--color-primary-olive);
}

.shop-entry-sort-select:focus {
  outline: none;
  border-color: var(--color-primary-olive);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.1);
  opacity: 1;
}

/* Shop Featured Section - B2: Odchudzenie */
/* STANDARD: Zmniejszone odstępy do var(--spacing-xl) = 32px (jak na blogu) */
/* TYPOGRAFIA: Rytm pionowy sekcji - większe odstępy dla lepszego oddechu */
/* USPOKOJENIE: Featured section - ukryta jako default, włączana przez klasę .featured-active */
/* Tylko jeśli jest PROMOCJA lub KOLEKCJA - inaczej usuń z homepage kategorii */
.shop-featured-section {
  display: none;
  /* Ukryta jako default - nie zawsze potrzebna */
  margin-top: 0;
  /* Gap jest w margin-bottom entry section - nie duplikujmy */
  margin-bottom: 0;
  /* Bez bottom margin - gap jest w margin-top products section */
  scroll-margin-top: 80px;
  background: none;
  border: none;
  /* Usunięto text-align: center - tytuły są wyrównane do lewej jak inne sekcje */
}

/* Włącz featured section tylko jeśli jest aktywna kampania */
.shop-featured-section.featured-active {
  display: block;
  /* Włącz tylko gdy potrzebne */
}

/* B2: Granica sekcji przez oddech, nie border */

/* STANDARD: Zmniejszone wewnętrzne odstępy w featured section */
.shop-featured-header {
  margin-bottom: var(--spacing-md);
  /* STANDARD: 16px zamiast 32px - bardziej kompaktowe */
  /* Usunięto text-align: center - tytuły są wyrównane do lewej */
}

/* Nagłówki sekcji - ujednolicony standard H2 */
.shop-featured-title,
.shop-products-title,
.shop-popular-title,
.shop-trust-title {
  font-family: var(--font-family-heading);
  font-size: clamp(1.35rem, 1.4rem + 0.4vw, 1.5rem);
  /* Spójność między sekcjami - mniej design noise */
  line-height: 1.25;
  /* Ujednolicona line-height dla lepszego skanowania */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-dark);
  margin: 0 0 0.5rem 0;
  /* Mniejszy margin-bottom dla lepszego rytmu */
  text-align: left;
  /* SPÓJNOŚĆ: Wszystkie tytuły wyrównane do lewej */
}

/* Trust title ma dodatkowe wyrównanie */
.shop-trust-title {
  text-align: center;
}

/* Opisy sekcji - pomocnicze (14.5px, line-height 1.6) */
/* UKRYTE dla spójności - "Wszystkie produkty" nie ma opisu */
.shop-featured-description {
  display: none;
  /* SPÓJNOŚĆ: Usunięto opis - jak w sekcji "Wszystkie produkty" */
  font-size: 0.9rem;
  /* 14.5px - pomocniczy, nie konkuruje z nagłówkiem */
  line-height: 1.6;
  color: #666;
  /* Cichszy kolor dla lepszej hierarchii */
  margin: 0 auto var(--spacing-md);
  max-width: 40ch;
}

/* B2: Grid featured - MAKS 2 produkty (mobile: 1, tablet/desktop: 2) */
.shop-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* B2: Mobile - 1 produkt */
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .shop-featured-grid {
    grid-template-columns: repeat(2, 1fr);
    /* B2: Tablet/Desktop - max 2 produkty */
    gap: var(--spacing-xl);
  }
}

/* B2: Featured Product Card - wyróżnione, ale spokojne (nie hero-card) */
/* PROBLEM 3: Dashed border → solid border + akcent kolorystyczny - dashed wygląda jak placeholder */
.product-card--featured {
  padding: var(--spacing-xl);
  /* Delikatnie większy padding */
  background: var(--color-pure-white) !important;
  /* Czyste białe tło - bez gradientu - !important aby nadpisać .card */
  background-color: var(--color-pure-white) !important;
  /* Podwójne zabezpieczenie */
  background-image: none !important;
  /* Wyłącz wszelkie gradienty */
  border: 1px solid var(--color-primary-olive);
  /* PROBLEM 3: Solid border z akcentem kolorystycznym */
  border-left: 4px solid var(--color-primary-olive);
  /* PROBLEM 3: Lewy border 4px jako akcent */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Standardowy neutralny cień */
  /* Czyste białe tło - najlepszy kontrast z gradientem tła strony, bez gradientu na karcie */
}

.product-card--featured:hover {
  transform: translateY(-2px);
  /* B2: Delikatniejszy hover */
  background: var(--color-pure-white) !important;
  /* Białe tło także na hover */
  background-color: var(--color-pure-white) !important;
  background-image: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Opcja 1: Wzmocniony neutralny cień na hover */
  border-color: var(--color-primary-olive);
}

@media (min-width: 768px) {
  .product-card--featured {
    padding: 32px;
  }
}

.product-card--featured .product-card-image {
  aspect-ratio: 16 / 9;
  /* B2: Zostaw większe zdjęcie */
  margin-bottom: var(--spacing-md);
}

.product-card--featured .product-card-title {
  font-size: clamp(1.25rem, 1.25rem + 0.5vw, 1.5rem);
  margin-bottom: var(--spacing-sm);
}

.product-card--featured .product-card-description {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: var(--spacing-md);
}

/* B2: Mobile - featured = szybki highlight (bez opisów) */
@media (max-width: 767px) {
  .product-card--featured .product-card-description {
    display: none;
    /* B2: Zero opisów na mobile - tylko zdjęcie, nazwa, cena, badge */
  }
}

/* B2: CTA - PROBLEM 3: Ten sam paradygmat co zwykłe karty (btn-secondary), nie transparent */
/* Inny styl CTA = inny "mental model" - użytkownik nie wie czy to to samo */
.product-card--featured .btn {
  font-size: 0.875rem;
  /* B2: Mniejszy font */
  /* PROBLEM 3: btn-secondary zamiast transparent - spójny paradygmat */
  background: var(--color-pure-white);
  color: var(--color-primary-olive);
  border: 1px solid var(--color-primary-olive);
}

.product-card--featured .btn:hover {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
}

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

/* Main Products Section (KROK 3: Czysty grid) */
/* STANDARD: Zmniejszone odstępy do var(--spacing-xl) = 32px (jak na blogu) */
/* TYPOGRAFIA: Rytm pionowy sekcji - większe odstępy dla lepszego oddechu */
.shop-products-section {
  margin-top: var(--spacing-xl);
  /* STANDARD: 32px - zgodne z blogiem, spójne odstępy między sekcjami */
  margin-bottom: 0;
  /* Bez bottom margin - pagination/load more ma własny spacing */
  scroll-margin-top: 80px;
  /* Scroll offset dla lepszej nawigacji */
}

/* Nagłówki sekcji ujednolicone powyżej - usunięto duplikat */

/* Product Card - Simplified for main grid (KROK 3) */
.product-grid .product-card {
  /* Czyste karty, bez ozdobników */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-grid .product-card-title {
  margin-bottom: var(--spacing-xs);
  /* Cena blisko nazwy */
}

/* Desktop: Można zwiększyć max-width dla tytułu jeśli potrzeba */
@media (min-width: 768px) {
  .product-card-title {
    max-width: 20ch;
    /* Więcej miejsca na desktop */
  }
}

.product-grid .product-card-price {
  margin-bottom: var(--spacing-md);
  /* Spacing before button */
  font-weight: var(--font-weight-semibold);
  font-size: 1.125rem;
  color: var(--color-text-dark);
}

.product-grid .product-card-footer {
  margin-top: auto;
  /* Push button to bottom */
}

/* Single action: Dodaj do koszyka */
.product-grid .product-card-footer .btn {
  width: 100%;
}

/* Product Card Emotional Meta */
/* TYPOGRAFIA: Meta pomocnicza, nie treściowa (12px, opacity 0.7) */
.product-card-meta-emotional {
  font-size: 0.75rem;
  /* 12px - pomocnicza, nie treściowa */
  line-height: 1.3;
  /* Kompaktowy line-height dla meta */
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--spacing-xs);
  white-space: nowrap;
  /* Zawsze 1 linia */
  overflow: hidden;
  /* Ukryj overflow */
  text-overflow: ellipsis;
  /* Dodaj "..." jeśli za długie */
  opacity: 0.55;
  /* Meta ma być czytana tylko przy zatrzymaniu wzroku, nie domyślnie */
}

/* PROBLEM 1: Ukryj meta-emotional na mobile - mniej szumu, tytuł + cena bliżej */
@media (max-width: 639px) {
  .product-card-meta-emotional {
    display: none;
  }
}

/* Shop Popular Section (KROK 3: Na końcu, kompaktowe, inny background) */
/* B1: Popularne - DUŻA pauza (bardzo dobra decyzja, że jest niżej) */
/* PROBLEM 4: Na mobile za ciężkie wizualnie - odchudzenie */
/* TYPOGRAFIA: Rytm pionowy sekcji - większe odstępy dla lepszego oddechu */
.shop-popular-section {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  /* Ujednolicona większa przestrzeń - lepszy oddech sekcji */
  /* B1: Duża pauza jak w magazynie - wyraźny oddech */
  margin-bottom: var(--spacing-3xl);
  padding: var(--spacing-2xl);
  background: var(--color-hero-step-2) !important;
  scroll-margin-top: 80px;
  /* Scroll offset dla lepszej nawigacji */
  /* Lighter background (EDEEE5) to differentiate from main grid - B1: Jeśli coś ma mieć inne tło, to tutaj */
  border-radius: var(--radius-card);
  border-top: 1px solid var(--color-border);
}

/* PROBLEM 4: Mobile - Popular = nagłówek + 2 produkty, bez tła, bez paddingów, bez border */
/* Na mobile to 5 zmian kontekstu pionowo - Popular nie może "krzyczeć" */
@media (max-width: 639px) {
  .shop-popular-section {
    background: none !important;
    padding: 0;
    border: none;
    border-radius: 0;
  }
}

@media (min-width: 768px) {
  .shop-popular-section {
    padding: var(--spacing-2xl) var(--container-padding);
  }
}

.shop-popular-header {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

/* TYPOGRAFIA: Nagłówek sekcji (22px mobile) */
/* Nagłówki sekcji ujednolicone powyżej - usunięto duplikat */

/* TYPOGRAFIA: Opis sekcji pomocniczy (14.5px, line-height 1.6, color #666) */
.shop-popular-description {
  font-size: 0.9rem;
  /* 14.5px - pomocniczy opis sekcji */
  line-height: 1.6;
  /* Dobry rytm dla pomocniczego tekstu */
  color: #666;
  /* Cichszy kolor dla lepszej hierarchii */
  margin: 0;
}

.shop-popular-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  /* Smaller gap for compact cards */
}

@media (min-width: 768px) {
  .shop-popular-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}

/* Compact product cards for popular section */
.shop-popular-grid .product-card,
.product-card--compact {
  padding: var(--spacing-md);
  /* Smaller padding */
}

.shop-popular-grid .product-card-image {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--spacing-sm);
}

.shop-popular-grid .product-card-title {
  font-size: 1rem;
  /* Slightly smaller */
  margin-bottom: var(--spacing-xs);
}

/* Popularne - uproszczone karty: bez meta-emotional i opisu */
.shop-popular-grid .product-card-meta-emotional {
  display: none !important;
  /* Ukryj meta-emotional w sekcji popularne */
}

.shop-popular-grid .product-card-description {
  display: none !important;
  /* Ukryj opis w sekcji popularne - tylko zdjęcie, nazwa, cena, CTA */
}

.shop-popular-grid .product-card-price {
  font-size: 1rem;
  /* Smaller price */
  margin-bottom: 0;
  /* Bez margin - cena nie "zamyka" decyzji (to nie selling block) */
}

/* USPOKOJENIE: Popularne = dowód, nie selling block */
/* Usuń agresywne CTA - popularne ma uspokajać decyzję, nie sprzedawać */
.shop-popular-grid .product-card-footer .btn-primary {
  display: none;
  /* Usuń primary CTA - popularne to social proof, nie selling */
}

/* Opcjonalnie: subtelny link zamiast buttona (jeśli w ogóle potrzebny) */
.shop-popular-grid .product-card-footer {
  margin-top: var(--spacing-sm);
  /* Mniejszy spacing - nie jest to główna akcja */
}

/* Jeśli chcesz zachować jakiś CTA - użyj ghost button, nie primary */
.shop-popular-grid .product-card-footer .btn {
  font-size: 0.8125rem;
  /* Mniejszy font */
  padding: 0.375rem 0.75rem;
  /* Mniejsze padding */
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  /* Subtelniejszy kolor */
}

/* TYPOGRAFIA: Rytm pionowy sekcji - większe odstępy dla lepszego oddechu */
.shop-trust-section {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  /* Ujednolicona większa przestrzeń - lepszy oddech sekcji */
  margin-bottom: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 80px;
  /* Scroll offset dla lepszej nawigacji */
}

/* TYPOGRAFIA: Nagłówek sekcji (22px mobile) */
/* Nagłówki sekcji ujednolicone powyżej - usunięto duplikat */
/* Trust title ma dodatkowe text-align: center - dodajemy to osobno */
.shop-trust-title {
  text-align: center;
}

.shop-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .shop-trust-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xl);
  }
}

.shop-trust-card {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  transition: all var(--transition-base);
}

.shop-trust-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft-hover);
  border-color: var(--color-primary-olive);
}

.shop-trust-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: var(--spacing-md);
}

.shop-trust-card-title {
  font-family: var(--font-family-heading);
  font-size: clamp(1.125rem, 1.125rem + 0.25vw, 1.25rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-sm) 0;
}

/* TYPOGRAFIA: Opis sekcji pomocniczy (14.5px, line-height 1.6, color #666) */
.shop-trust-card-description {
  font-size: 0.9rem;
  /* 14.5px - pomocniczy opis sekcji */
  line-height: 1.6;
  /* Dobry rytm dla pomocniczego tekstu */
  color: #666;
  /* Cichszy kolor dla lepszej hierarchii */
  margin: 0 0 var(--spacing-md) 0;
}

.shop-trust-link {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-olive);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.shop-trust-link:hover {
  color: var(--color-deep-sage);
  text-decoration: underline;
}

.shop-search .search-form {
  display: flex;
  gap: var(--spacing-md);
  max-width: 600px;
  margin: 0 auto;
  align-items: stretch;
}

.shop-search .search-input-wrapper {
  position: relative;
  flex: 1;
}

.shop-search .search-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.shop-search .search-input {
  padding-left: calc(var(--spacing-md) + 20px + var(--spacing-sm));
  border: 2px solid var(--color-border);
  border-radius: var(--radius-input);
  font-size: var(--font-size-body-mobile);
  min-height: var(--tap-target-min);
  background: var(--color-pure-white);
  color: var(--color-text-dark);
  font-family: var(--font-family-body);
  width: 100%;
}

.shop-search .search-input::placeholder {
  color: var(--color-primary-olive);
  opacity: 0.6;
}

.shop-search .search-input:focus {
  outline: none;
  border: 2px solid var(--color-primary-olive);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.18);
}

.shop-search .search-btn {
  flex-shrink: 0;
  min-width: 120px;
  white-space: nowrap;
  /* Nie nadpisujemy kanonicznych stylów z buttons.css */
}

@media (max-width: 640px) {
  .shop-search .search-form {
    flex-direction: column;
  }

  .shop-search .search-btn {
    /* Użyj btn-block w HTML zamiast width: 100% */
    min-width: auto;
  }
}

/* Shop Filters - Use blog-filters styles (already defined) */
.shop-content .blog-filters {
  margin-top: 0;
  margin-bottom: var(--spacing-xl);
  /* Same spacing as blog-list */
}

/* Filters Section - Categories and Sort in one line (legacy - can be removed if not used) */
.filters-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  .filters-section {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  /* Hide filter pills on mobile, show filter button */
  .filters-section .pill-row {
    display: none;
  }

  .filter-toggle-btn {
    display: inline-flex !important;
    /* btn-block już ma width: 100% w buttons.css */
    margin-bottom: var(--spacing-sm);
  }

  /* Bottom sheet for filters (similar to admin) - Show on mobile only */
  .filter-bottom-sheet {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
  }

  .filter-bottom-sheet.active {
    pointer-events: all;
  }

  .filter-bottom-sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 150ms ease-out;
  }

  .filter-bottom-sheet.active .filter-bottom-sheet-overlay {
    opacity: 1;
  }

  .filter-bottom-sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-pure-white);
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    max-width: 480px;
    margin: 0 auto;
    transform: translateY(100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-bottom-sheet);
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .filter-bottom-sheet.active .filter-bottom-sheet-content {
    transform: translateY(0);
  }

  .filter-bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
  }

  .filter-bottom-sheet-header h3 {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
  }

  .filter-bottom-sheet-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-text-dark);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
  }

  .filter-bottom-sheet-close:active {
    background: var(--color-off-white);
  }

  .filter-bottom-sheet-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }

  .filter-bottom-sheet-body .pill-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .filter-bottom-sheet-body .filter-pill {
    width: 100%;
    min-width: auto;
    justify-content: flex-start;
  }
}

/* Filter Bottom Sheet - Hidden on desktop by default (handled in media query above) */

/* Pill Row - Category Filters */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Filter Pills - NIE są przyciskami CTA, tylko filtrami */
body:not(.admin) .filter-pill {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-pure-white);
  font-size: var(--font-size-ui-label);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-body);
  min-height: var(--tap-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  /* NIE dziedziczy z .btn */
  text-decoration: none;
  white-space: nowrap;
}

/* Mobile: tylko :active, brak hover */
body:not(.admin) .filter-pill:active {
  transform: scale(0.98);
}

body:not(.admin) .filter-pill.active {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-color: var(--color-primary-olive);
  box-shadow: var(--shadow-button);
  font-weight: var(--font-weight-semibold);
}

body:not(.admin) .filter-pill:focus-visible {
  outline: var(--focus-outline-width) solid rgba(109, 130, 89, 0.22);
  outline-offset: var(--focus-outline-offset);
}

/* Desktop: hover tylko na desktop */
@media (min-width: 768px) {
  body:not(.admin) .filter-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: rgba(109, 130, 89, 0.08);
    border-color: var(--color-primary-olive);
    color: var(--color-deep-sage);
  }

  body:not(.admin) .filter-pill.active:hover {
    background: var(--color-primary-olive);
    color: var(--color-pure-white);
    transform: translateY(-2px);
  }
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
}

/* Sort Wrapper */
.sort-wrapper {
  position: relative;
  display: inline-block;
}

.sort-wrapper select {
  padding: 10px 32px 10px 14px;
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
  background: var(--color-pure-white);
  font-size: var(--font-size-ui-label);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-family-body);
  color: var(--color-text-dark);
  min-height: var(--tap-target-min);
  min-width: 160px;
  transition: all var(--transition-base);
  font-weight: var(--font-weight-medium);
}

.sort-wrapper select:focus {
  outline: none;
  border-color: var(--color-primary-olive);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.18);
  background: var(--color-pure-white);
}

.sort-wrapper::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-primary-olive);
  font-size: 16px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
}

/* Product Grid - 3 columns desktop / 2 tablet / 1 mobile */
/* Product Grid - KROK 3: Czysty grid, bez ozdobników */
/* USPOKOJENIE: Grid produktów - jeden typ karty, jeden rytm */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile: 1 kolumna na start - lepsza czytelność, większe CTA, mniejsze cognitive load */
  gap: var(--spacing-xl);
  /* Same gap as blog-list cards */
  margin-bottom: 0;
  /* Margin handled by shop-products-section */
  width: 100%;
  max-width: 100%;
  /* Naprawa: Karty przycinane - grid nie może przekraczać viewport */
  box-sizing: border-box;
}

/* KROK 23: IDEALNA SZEROKOŚĆ KART NA MOBILE (OPTICAL WIDTH) */
/* Mobile ≠ 100vw - Mobile = viewport – bezpieczny margines */
@media (max-width: 639px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 16px !important;
    /* Mniejszy gap na mobile - lżejszy layout (16px zamiast 24px) */
    padding: 0;
    /* Usunięto padding - karty mają własne marginesy */
    width: 100%;
  }

  /* OPTYCZNE ZWĘŻENIE KART - subtelne, ale robi robotę */
  /* Karta ma 96% viewport, ale nie przekracza dostępnej przestrzeni */
  .shop-products-section .product-card {
    max-width: min(96vw, calc(100vw - 48px));
    /* 96vw LUB viewport minus padding kontenera (24px * 2) - optyczne zwężenie */
    width: auto;
    margin: 0 auto;
    /* Wyśrodkowanie karty */
  }

  /* Grid pozwala na optyczne zwężenie kart */
  .shop-products-section .product-grid {
    overflow: visible;
    /* Pozwól kartom na optyczne zwężenie poza grid */
  }
}

/* Tablet+: 2 kolumny */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 kolumny od tablet */
  }
}

/* Desktop+: opcjonalnie 3 kolumny (można włączyć jeśli potrzeba) */
/* @media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
} */

/* Zapewnienie, że na wszystkich większych ekranach pozostaje 2 kolumny (uspokojenie) */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 kolumny na desktop - spokojny, premium commerce */
  }
}

@media (min-width: 1440px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 kolumny na dużych ekranach - spokojny rytm */
  }
}

/* KROK 3: Responsive grid (1/2 columns) - maksymalnie 2 produkty w linii */
/* Mobile: 1 kolumna (<640px), Tablet/Desktop: 2 kolumny (≥640px) */

/* Shop Layout (matching blog-layout structure) */
.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  margin-top: 0;
  /* No top margin - spacing handled by shop-content elements */
  width: 100%;
  max-width: 100%;
  /* Naprawa: Karty przycinane - layout nie może przekraczać viewport */
  box-sizing: border-box;
}

/* Shop Main (matching blog-main) */
.shop-main {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .shop-layout {
    grid-template-columns: 1fr 280px;
  }
}

/* Sidebar */
.sidebar {
  display: none;
}

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

/* Sidebar wyrównany z początkiem entry section (z inputem wyszukiwania) */
@media (min-width: 1024px) {
  .sidebar {
    margin-top: 0;
    /* Wyrównany z górą - w linii z inputem szukaj produktów */
    align-self: start;
    /* Wyrównanie do góry grid cell */
  }
}

.sidebar-widget {
  background: var(--color-pure-white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-xl);
}

/* Usunięcie pływających elementów */
.sidebar-widget,
.sidebar-widget:first-child {
  position: static !important;
  top: auto !important;
}

.sidebar-widget a:hover {
  opacity: 0.8;
}

.sidebar-widget a:hover h4 {
  color: var(--color-primary-olive);
}

.sidebar-title {
  font-size: clamp(1.125rem, 1.125rem + 0.25vw, 1.25rem);
  /* Mobile: 18px → Desktop: 20px */
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-lg);
  color: var(--color-deep-sage);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.sidebar-description {
  font-size: clamp(0.875rem, 0.875rem + 0.125vw, 0.9375rem);
  /* Mobile: 14px → Desktop: 15px */
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-md) 0;
}

.sidebar-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.sidebar-newsletter-form .form-input {
  width: 100%;
  min-height: 44px;
}

/* Hide newsletter widget on mobile */
@media (max-width: 1023px) {
  .sidebar-widget--newsletter {
    display: none;
  }
}

/* Sidebar Product Items */
.sidebar-product-item {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-stone-gray);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-fast);
}

.sidebar-product-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.sidebar-product-item:hover {
  opacity: 0.8;
}

.sidebar-product-item:hover .sidebar-product-title {
  color: var(--color-primary-olive);
}

.sidebar-product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.sidebar-product-info {
  flex: 1;
}

.sidebar-product-title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  margin-bottom: 4px;
}

.sidebar-product-description {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.sidebar-product-price {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-olive);
}

.sidebar-product-price-sale {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-pastel-berry);
}

.sidebar-product-price-old {
  text-decoration: line-through;
  color: var(--color-text-muted);
  font-size: 12px;
  margin-right: 6px;
}

.sidebar-product-badge-wrapper {
  position: relative;
}

.sidebar-product-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 10px;
  padding: 2px 6px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-2xl);
}

.pagination-button {
  min-width: 44px;
  /* Zwiększone dla lepszych tap targets */
  min-height: 44px;
  /* Zwiększone dla lepszych tap targets */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-stone-gray);
  background-color: var(--color-pure-white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-deep-sage);
  font-weight: var(--font-weight-medium);
  font-size: 14px;
}

@media (max-width: 768px) {
  .pagination {
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  .pagination-button {
    min-width: 44px;
    min-height: 44px;
    font-size: 14px;
  }
}

.pagination-button:hover {
  border-color: var(--color-primary-olive);
  color: var(--color-primary-olive);
  background-color: rgba(109, 130, 89, 0.05);
}

.pagination-button.active {
  background-color: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-color: var(--color-primary-olive);
}

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

.pagination-button:disabled:hover {
  border-color: var(--color-stone-gray);
  color: var(--color-deep-sage);
  background-color: var(--color-pure-white);
}

/* Category Info Sections */
.category-section {
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-2xl);
}

.category-section h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.category-section h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

.category-section p {
  font-size: var(--font-size-body);
  line-height: 1.75;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-lg);
  max-width: 65ch;
}

.category-section ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.category-section li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
}

.category-section li:last-child {
  margin-bottom: 0;
}

.category-section li::before {
  content: "•";
  color: var(--color-primary-olive);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.category-section strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
}

/* Reviews Section */
.category-reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.category-reviews-stars {
  font-size: 2rem;
  color: var(--color-primary-olive);
}

.category-reviews-rating {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

.category-reviews-count {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.category-review-item {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.category-review-item:first-of-type {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: none;
}

.category-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.category-review-author {
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  font-size: var(--font-size-body);
}

.category-review-stars {
  font-size: 16px;
  color: var(--color-primary-olive);
  margin-top: var(--spacing-xxs);
}

.category-review-date {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.category-review-text {
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  line-height: 1.7;
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .filters-section {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-sm) 0;
  }

  .product-grid {
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .shop-layout {
    gap: var(--spacing-xl);
    margin-top: var(--spacing-md);
  }

  .pagination {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
  }

  .category-section {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
  }

  .category-section h2 {
    font-size: var(--font-size-h2-mobile);
    margin-bottom: var(--spacing-md);
  }

  .category-section h3 {
    font-size: var(--font-size-h3-mobile);
    margin-top: var(--spacing-lg);
  }

  .category-section p {
    font-size: var(--font-size-body-mobile);
    margin-bottom: var(--spacing-md);
  }

  .category-reviews-summary {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
  }

  .category-review-item {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
  }
}


/* ===== checkout.css ===== */
/* Styles dla checkoutu - wszystkie komponenty już wbudowane wcześniej */

/* Breadcrumb Container - poniżej linii pod logo */
.breadcrumb-container {
  background: var(--color-off-white);
  padding: var(--spacing-sm) 0;
  border-top: var(--header-underline-height) solid var(--header-underline-color);
}

.breadcrumb-container .breadcrumb {
  margin-bottom: 0;
  padding: 0;
}

/* Checkout Page */
.checkout-page {
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
  background: linear-gradient(180deg,
      #F8F6EF 0%,
      #EDEEE5 25%,
      #D9E5D3 60%,
      #A3BC98 100%);
}

@media (max-width: 768px) {
  .breadcrumb-container {
    padding: var(--spacing-xs) 0;
  }

  .checkout-page {
    padding: var(--spacing-lg) 0 var(--spacing-2xl);
  }
}

.checkout-container {
  max-width: 900px;
  margin: 0 auto;
}

/* Hero Section - używa shop-hero-simple z hero.css */

/* Stepper - Enhanced */
.stepper {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-3xl);
  position: relative;
  padding: 0 var(--spacing-md);
}

.stepper::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary-olive) 0%, var(--color-border) 100%);
  z-index: 0;
  border-radius: 2px;
}

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

.stepper-dot {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-pure-white);
  border: 3px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
  transition: all var(--transition-base);
  font-size: 18px;
  box-shadow: var(--shadow-sm);
}

.stepper-step.active .stepper-dot {
  background-color: var(--color-primary-olive);
  border-color: var(--color-primary-olive);
  color: var(--color-pure-white);
  box-shadow: var(--shadow-button-hover);
  transform: scale(1.1);
}

.stepper-step.completed .stepper-dot {
  background-color: var(--color-primary-olive);
  border-color: var(--color-primary-olive);
  color: var(--color-pure-white);
}

.stepper-step.completed .stepper-dot::after {
  content: '✓';
  font-size: 20px;
}

.stepper-label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
  font-weight: var(--font-weight-medium);
  max-width: 100px;
}

@media (max-width: 768px) {
  .stepper {
    flex-direction: column;
    gap: var(--spacing-md);
    padding: 0;
  }

  .stepper::before {
    display: none;
    /* Ukryj linię na mobile */
  }

  .stepper-step {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: var(--color-pure-white);
    border: 1px solid var(--color-border);
  }

  .stepper-dot {
    width: 44px;
    /* Zwiększone dla lepszych tap targets */
    height: 44px;
    margin-bottom: 0;
    margin-right: var(--spacing-md);
  }

  .stepper-label {
    text-align: left;
    max-width: none;
    flex: 1;
  }
}

.stepper-step.active .stepper-label {
  color: var(--color-primary-olive);
  font-weight: var(--font-weight-semibold);
}

.stepper-step.completed .stepper-label {
  color: var(--color-primary-olive);
}

/* Checkout Steps */
.checkout-step {
  background-color: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-xl);
  display: none;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.checkout-step.active {
  display: block;
}

.step-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xl);
  color: var(--color-deep-sage);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-border);
}

/* Payment Methods */
.payment-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin: var(--spacing-xl) 0;
}

.payment-method {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  background: var(--color-pure-white);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 44px;
  /* Minimalny tap target dla mobile */
}

@media (max-width: 768px) {
  .payment-method {
    padding: var(--spacing-md);
    min-height: 56px;
    /* Większy tap target na mobile */
  }

  .payment-method input[type="radio"] {
    width: 24px;
    /* Większe radio buttony */
    height: 24px;
  }

  .checkout-step {
    padding: var(--spacing-lg);
  }
}

.payment-method:hover {
  border-color: var(--color-primary-olive);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.payment-method input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary-olive);
  cursor: pointer;
}

.payment-method input[type="radio"]:checked+span {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-olive);
}

.payment-method span {
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  flex: 1;
}

/* Checkout Actions */
.checkout-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .checkout-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-pure-white);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    z-index: var(--z-index-sticky);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    flex-direction: column-reverse;
    gap: var(--spacing-sm);
    margin-top: 0;
    padding-top: var(--spacing-md);
  }

  /* Moved to PUBLIC BUTTONS section (scoped) */

  /* Add padding to checkout form to prevent overlap */
  .checkout-step {
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}

/* Summary Items */
.summary-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
}

.summary-item:last-child {
  border-bottom: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 2px solid var(--color-primary-olive);
  color: var(--color-deep-sage);
}

.summary-box {
  background: linear-gradient(135deg, rgba(109, 130, 89, 0.08) 0%, rgba(175, 199, 162, 0.12) 100%);
  padding: var(--spacing-xl);
  border-radius: var(--radius-card);
  margin-bottom: var(--spacing-xl);
  border: 1px solid rgba(109, 130, 89, 0.15);
}

/* Checkout Layout */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
  .checkout-layout {
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
  }
}

@media (max-width: 768px) {
  .checkout-layout {
    gap: var(--spacing-lg);
  }

  .checkout-summary {
    order: -1;
    /* Summary na górze na mobile */
  }
}

/* Checkout Summary */
.checkout-summary {
  background: var(--color-pure-white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-stone-gray);
  position: static !important;
  /* Usunięcie pływającego elementu */
  top: auto !important;
  height: fit-content;
}

.checkout-summary h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-lg);
}


/* ===== cart.css ===== */
/* Styles dla koszyka - wszystkie komponenty już wbudowane wcześniej */

/* Breadcrumb Container - poniżej linii pod logo */
.breadcrumb-container {
  background: var(--color-off-white);
  padding: var(--spacing-sm) 0;
  border-top: var(--header-underline-height) solid var(--header-underline-color);
}

.breadcrumb-container .breadcrumb {
  margin-bottom: 0;
  padding: 0;
}

/* Cart Page */
.cart-page {
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
  background: linear-gradient(180deg,
      #F8F6EF 0%,
      #EDEEE5 25%,
      #D9E5D3 60%,
      #A3BC98 100%);
}

@media (max-width: 768px) {
  .breadcrumb-container {
    padding: var(--spacing-xs) 0;
  }

  .cart-page {
    padding: var(--spacing-lg) 0 var(--spacing-2xl);
  }
}

/* Hero Section - używa shop-hero-simple z hero.css */
.cart-page .shop-hero-simple h1.visually-hidden {
  margin-bottom: 0;
}

/* Layout */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

@media (min-width: 1024px) {
  .cart-layout {
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3xl);
  }
}

/* Cart Items */
.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.cart-item {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background-color: var(--color-pure-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  z-index: 1;
}

.cart-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft-hover);
  background-color: var(--color-pure-white);
}

.cart-item-image {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-card);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-stone-gray);
}

@media (max-width: 768px) {
  .cart-item {
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
  }

  .cart-item-image {
    width: 100%;
    height: 200px;
    aspect-ratio: 4/3;
  }

  .cart-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .cart-item-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .cart-item-price {
    font-size: var(--font-size-h3-mobile);
  }

  .cart-summary {
    padding: var(--spacing-lg);
  }

  /* Sticky bottom bar for cart summary button on mobile */
  .cart-summary .btn-primary.btn-block {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    z-index: var(--z-index-sticky);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    margin: 0;
    border-top: 1px solid var(--color-border);
  }

  /* Add padding to cart items to prevent overlap */
  .cart-items-list {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* Hide summary on mobile, show only sticky button */
  .cart-summary {
    display: none;
  }
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-item-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.cart-item-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  margin: 0;
}

.cart-item-remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  /* Zwiększone dla lepszych tap targets */
  min-height: 44px;
  /* Zwiększone dla lepszych tap targets */
}

.cart-item-remove:hover {
  background-color: rgba(184, 106, 110, 0.1);
  color: var(--color-pastel-berry);
}

.cart-item-remove svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
}

.cart-item-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-md);
}

.cart-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: var(--spacing-md);
}

.cart-item-price {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-sage);
}

/* Cart Summary */
.cart-summary {
  background-color: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  position: static !important;
  /* Usunięcie pływającego elementu */
  top: auto !important;
  height: fit-content;
  z-index: 1;
}

.cart-summary h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-lg);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  color: var(--color-text-dark);
  font-size: var(--font-size-body);
}

.summary-row:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.summary-row.total {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 2px solid var(--color-primary-olive);
  color: var(--color-deep-sage);
}

.summary-section {
  background: linear-gradient(135deg, rgba(109, 130, 89, 0.08) 0%, rgba(175, 199, 162, 0.12) 100%);
  border-radius: var(--radius-card);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  border: 1px solid rgba(109, 130, 89, 0.15);
}

/* Empty Cart */
.cart-empty {
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
}

.cart-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  color: var(--color-text-muted);
}

.cart-empty h2 {
  font-size: var(--font-size-h2);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-md);
}

.cart-empty p {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xl);
}



/* ===== pages.css (shared styles) ===== */
/* Wspólne style dla stron - wszystkie komponenty już wbudowane wcześniej */

/* Common Page Styles */
.section {
  padding: var(--spacing-section-padding) 0;
  background: var(--color-pure-white);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
  position: relative;
  opacity: 1;
  transform: none;
}

.section.visible {
  opacity: 1;
  transform: none;
}

.section--hero {
  background: linear-gradient(180deg, var(--color-off-white) 0%, rgba(220, 235, 214, 0.14) 100%);
}

.section--products {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00), rgba(245, 250, 242, 0.02));
}

/* Light grain / tekstura papieru w tle */
.page-bg::before,
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  z-index: 0;
}

@media (max-width: 768px) {
  .section {
    padding-top: calc(var(--header-height-mobile) + var(--spacing-sm));
  }
}

.contact-page,
.community-page {
  padding: calc(var(--header-height-desktop) + var(--spacing-xl)) 0 var(--spacing-xl);
  background: linear-gradient(180deg,
      var(--color-hero-step-1) 0%,
      var(--color-hero-step-2) 25%,
      var(--color-hero-step-3) 60%,
      var(--color-hero-step-4) 100%);
  background-origin: border-box;
  background-clip: border-box;
}

/* Blog-page has no padding-top - hero section handles spacing */
.blog-page {
  padding: 0 0 var(--spacing-xl);
  background: linear-gradient(180deg,
      var(--color-hero-step-1) 0%,
      var(--color-hero-step-2) 25%,
      var(--color-hero-step-3) 60%,
      var(--color-hero-step-4) 100%);
  background-origin: border-box;
  background-clip: border-box;
}

@media (max-width: 768px) {

  .contact-page,
  .community-page {
    padding: calc(var(--header-height-mobile) + var(--spacing-lg)) 0 var(--spacing-xl);
  }

  .blog-page {
    padding: 0 0 var(--spacing-xl);
  }
}

/* Common Sidebar Widget */
.sidebar-widget {
  background-color: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  position: static;
  z-index: 1;
}

/* Sidebar widget po blog-list - dodatkowy odstęp */
.blog-list+.sidebar-widget {
  margin-top: var(--spacing-2xl);
}

.sidebar-widget h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-lg);
  color: var(--color-deep-sage);
}

/* Category List (Sidebar) - Unified */
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.category-list li {
  margin: 0;
}

/* Category Links - Visually calm (text-only, no aggressive colors) */
.category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  min-height: 44px;
  color: var(--color-text-dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: var(--font-size-ui-label);
  /* 14px - consistent with admin and design tokens */
  font-family: var(--font-family-body);
  /* Inter - consistent with admin */
  opacity: 0.8;
  /* Improved readability while maintaining secondary status */
}

.category-link:hover {
  background-color: rgba(175, 199, 162, 0.1);
  color: var(--color-primary-olive);
  opacity: 1;
  /* Full opacity on hover */
}

.category-link:active {
  transform: scale(0.98);
}

.category-count {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

/* Tag Cloud (Sidebar) - Mobile-First, Unified */
.tag-cloud {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--spacing-xs) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  scroll-snap-type: x proximity;
}

.tag-cloud::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  min-height: 44px;
  background: var(--color-sage-green);
  /* #AFC7A2 - pastel green matching design */
  color: var(--color-deep-sage);
  /* #4F5D43 - dark text */
  border-radius: var(--radius-full);
  /* Fully rounded like admin tags */
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-body);
  border: 1px solid rgba(79, 93, 67, 0.1);
  /* Subtle border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /* Subtle shadow */
  min-width: fit-content;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Mobile: active state only */
.tag:active {
  transform: scale(0.98);
}

/* Desktop: hover effects + flex-wrap */
@media (min-width: 768px) {
  .tag-cloud {
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0;
    gap: var(--spacing-xs);
  }

  .tag {
    padding: 6px 12px;
    min-height: 36px;
    font-size: 12px;
  }

  .tag:hover {
    background: var(--color-primary-olive);
    color: var(--color-pure-white);
    border-color: var(--color-primary-olive);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(109, 130, 89, 0.15);
  }
}

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

.sidebar-nav-list li {
  margin-bottom: var(--spacing-sm);
}

.sidebar-nav-list li:last-child {
  margin-bottom: 0;
}

/* Community Page styles - są teraz w community.css (importowane) */

/* Blog Page Hero */
.blog-hero {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.blog-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--font-weight-h1);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.01em;
}

.blog-hero p {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Community layout, post-composer, composer-actions, filter-tags - style są teraz w community.css (importowane) */

/* Post Cards, Community Layout, Contributors - style są teraz w community.css (importowane) */

/* Events List in Sidebar */
.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.event-item {
  padding: var(--spacing-md);
  background: var(--color-off-white);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary-olive);
  transition: all var(--transition-fast);
}

.event-item:hover {
  background: rgba(175, 199, 162, 0.1);
  transform: translateX(2px);
}

.event-item-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-body);
}

.event-item-date {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.event-item-location {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* Contact Page */
.contact-hero {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.contact-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--font-weight-h1);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.01em;
}

.contact-hero p {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.contact-map {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: var(--radius-card);
  margin-bottom: var(--spacing-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft-hover);
  background-image: url('../../design-system/assets/photos/processed/about-section.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.85) saturate(0.9);
}

.contact-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(109, 130, 89, 0.15) 0%, rgba(79, 93, 67, 0.1) 100%);
  z-index: 1;
}

.contact-map-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: var(--color-pure-white);
  padding: var(--spacing-xl) var(--spacing-2xl);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  text-align: center;
  border: 2px solid var(--color-primary-olive);
}

.contact-map-overlay h3 {
  font-size: var(--font-size-h3);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-bold);
}

.contact-map-overlay p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: var(--font-size-body);
}

@media (max-width: 768px) {
  .contact-map {
    height: 360px;
  }

  .contact-map-overlay {
    padding: var(--spacing-lg) var(--spacing-xl);
    max-width: 90%;
  }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  background-color: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft-hover);
  background-color: var(--color-pure-white);
}

.contact-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--color-primary-olive) 0%, var(--color-sage-green) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  box-shadow: 0 4px 12px rgba(109, 130, 89, 0.2);
}

.contact-card-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--color-pure-white);
  fill: none;
  stroke-width: 2;
}

.contact-card-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-lg);
  color: var(--color-deep-sage);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.contact-info-item:last-child {
  margin-bottom: 0;
}

.contact-info-icon {
  width: 20px;
  height: 20px;
  margin-top: var(--spacing-xs);
  flex-shrink: 0;
  stroke: var(--color-primary-olive);
  fill: none;
  stroke-width: 2;
}

.contact-info-text {
  flex: 1;
  color: var(--color-text-dark);
  line-height: 1.7;
}

.contact-info-text strong {
  color: var(--color-deep-sage);
  font-weight: var(--font-weight-semibold);
  display: block;
  margin-bottom: var(--spacing-xs);
}

.form-textarea {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-mobile);
  line-height: 1.5;
  padding: var(--spacing-input-padding);
  border-radius: var(--radius-input);
  border: 1px solid #C9D2C3;
  background: var(--color-pure-white);
  color: var(--color-text-dark);
  transition: var(--transition-base);
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

.form-textarea:focus {
  outline: none;
  border: 2px solid var(--color-primary-olive);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.18);
}

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

/* Optional field indicator */
.form-label-optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  font-size: 0.9em;
}

/* Form input error state */
.form-input-error,
.form-input.form-input-error,
textarea.form-input-error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(217, 164, 166, 0.2) !important;
}

.form-input-error:focus,
.form-input.form-input-error:focus,
textarea.form-input-error:focus {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(217, 164, 166, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.faq-item {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  font-weight: var(--font-weight-semibold);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.faq-answer {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: 1.7;
}

.contact-actions {
  margin-top: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Contact actions buttons - używają btn-block w HTML */
/* Moved to PUBLIC BUTTONS section (scoped) */

/* Blog Article Page */
.article-hero {
  position: relative;
  height: 420px;
  background-color: var(--color-stone-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-3xl);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft-hover);
}

@media (max-width: 768px) {
  .article-hero {
    height: 280px;
    margin-bottom: var(--spacing-2xl);
    border-radius: var(--radius-sm);
  }
}

.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3xl);
  }
}

.article-content {
  max-width: 720px;
}

/* Spacing between sections/cards in article-content */
.article-content>section.card,
.article-content>.card {
  margin-bottom: var(--spacing-2xl);
}

.article-content>section.card:last-child,
.article-content>.card:last-child {
  margin-bottom: 0;
}

.article-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-h1);
  line-height: 1.15;
  margin-bottom: var(--spacing-lg);
  color: var(--color-deep-sage);
  letter-spacing: 0.01em;
}

/* Ukryj h1 w article-content, bo jest już w blog-hero */
.blog-page .article-content h1 {
  display: none;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-body-mobile);
  line-height: 1.6;
}

.article-meta-separator {
  color: var(--color-text-muted);
  opacity: 0.4;
}

.article-meta-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.article-meta-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-sage-green);
}

/* Duplikaty usunięte - style są w sekcji BLOG ARTICLE (MOBILE-FIRST) */

.pull-quote {
  position: relative;
  border-left: 4px solid var(--color-primary-olive);
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl);
  margin: var(--spacing-3xl) 0;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: var(--color-deep-sage);
  background: linear-gradient(135deg, rgba(175, 199, 162, 0.08) 0%, rgba(175, 199, 162, 0.03) 100%);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  box-shadow: 0 4px 16px rgba(109, 130, 89, 0.06);
  line-height: 1.7;
  font-family: var(--font-family-heading);
  z-index: 1;
}

.pull-quote::before {
  content: '"';
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-lg);
  font-size: 4rem;
  color: var(--color-primary-olive);
  opacity: 0.2;
  font-family: var(--font-family-heading);
  line-height: 1;
}

.article-image {
  width: 100%;
  border-radius: var(--radius-card);
  margin: var(--spacing-2xl) 0;
  box-shadow: var(--shadow-soft-hover);
}

.article-caption {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--spacing-md);
  font-style: italic;
  padding: 0 var(--spacing-md);
}

.article-author-bio {
  margin: var(--spacing-4xl) 0;
  padding: var(--spacing-2xl);
  background: var(--color-off-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 1;
}

.article-author-bio-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--color-sage-green);
  flex-shrink: 0;
}

.article-author-bio-content h3 {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-h3);
  color: var(--color-deep-sage);
  font-weight: var(--font-weight-bold);
}

.article-author-bio-content p {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: 1.7;
}

.article-share {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: var(--spacing-3xl) 0;
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.article-share-label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

.article-share-buttons {
  display: flex;
  gap: var(--spacing-sm);
}

.share-button {
  width: 44px;
  height: 44px;
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-pure-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-dark);
}

.share-button:hover {
  background: var(--color-primary-olive);
  border-color: var(--color-primary-olive);
  color: var(--color-pure-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(109, 130, 89, 0.2);
}

.article-comments {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: 2px solid var(--color-border);
}

.article-comments h2 {
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep-sage);
  line-height: 1.3;
}

/* Comments section - specific to avoid conflicts with .post-card-action.comment button */
.article-comments .comment,
.comments-list .comment {
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  background: var(--color-off-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  position: relative;
  z-index: 1;
}

.article-comments .comment:hover,
.comments-list .comment:hover {
  box-shadow: var(--shadow-soft);
  background: var(--color-off-white);
}

.article-comments .comment:last-child,
.comments-list .comment:last-child {
  margin-bottom: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.comment-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-sage-green);
}

.comment-author {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
}

.comment-date {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.comment-content {
  line-height: 1.75;
  color: var(--color-text-dark);
  font-size: var(--font-size-body);
  margin: 0;
}

.article-sidebar {
  display: none;
}

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

/* Usunięcie pływających elementów z blog-article */
.blog-page .article-sidebar .sidebar-widget,
.blog-page .article-sidebar .sidebar-widget:first-child {
  position: static !important;
  top: auto !important;
}

.related-post {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  text-decoration: none;
  color: inherit;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  position: relative;
  z-index: 1;
}

.related-post:hover {
  background: var(--color-off-white);
  transform: translateX(4px);
}

.related-post:last-child {
  margin-bottom: 0;
}

.related-post-image {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-stone-gray);
}

.related-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-post-content {
  flex-grow: 1;
}

.related-post-title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
}

.related-post:hover .related-post-title {
  color: var(--color-primary-olive);
}

.related-post-date {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.newsletter-widget p {
  font-size: var(--font-size-small);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.newsletter-widget .form-input {
  margin-bottom: var(--spacing-md);
}

/* Moved to PUBLIC BUTTONS section (scoped) */

.category-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-dark);
  text-decoration: none;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.category-item:last-child {
  border-bottom: none;
}

.category-item:hover {
  color: var(--color-primary-olive);
  padding-left: var(--spacing-sm);
}

.category-name {
  font-weight: var(--font-weight-medium);
}

.category-count {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.category-item:hover .category-count {
  color: var(--color-primary-olive);
}



/* ===== camping.css ===== */
/* Camping & Trailer Pages Styles */

/* Page Background - with gradient */
.camping-page,
.trailer-page {
  border-top: 1px solid var(--color-border);
  padding: calc(var(--header-height-desktop) + var(--spacing-xl)) 0 var(--spacing-xl);
  background: linear-gradient(180deg,
      var(--color-hero-step-1) 0%,
      var(--color-hero-step-2) 25%,
      var(--color-hero-step-3) 60%,
      var(--color-hero-step-4) 100%);
  background-origin: border-box;
  background-clip: border-box;
}

/* Quick Info Grid */
.quick-info-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--spacing-xl);
}

.quick-info-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

@media (max-width: 768px) {

  .camping-page,
  .trailer-page {
    padding: calc(var(--header-height-mobile) + var(--spacing-lg)) 0 var(--spacing-xl);
  }
}

/* Hero Section - exactly like community-hero */
.camping-hero,
.trailer-hero {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.camping-hero h1,
.trailer-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--font-weight-h1);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.01em;
}

.camping-hero p,
.trailer-hero p {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Layout - exactly like community-layout */
.camping-layout,
.trailer-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

@media (min-width: 1024px) {

  .camping-layout,
  .trailer-layout {
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3xl);
  }
}

.camping-layout main,
.trailer-layout main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  position: relative;
  z-index: 1;
}

.camping-layout aside,
.trailer-layout aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.camping-hero h1,
.trailer-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--font-weight-h1);
  color: var(--color-deep-sage);
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.01em;
}

.camping-hero p,
.trailer-hero p {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

.camping-hero-image,
.trailer-hero-image {
  position: relative;
  height: 420px;
  background-color: var(--color-stone-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-3xl);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft-hover);
}

@media (max-width: 768px) {

  .camping-hero-image,
  .trailer-hero-image {
    height: 280px;
    margin-bottom: var(--spacing-2xl);
    border-radius: var(--radius-sm);
  }
}

.camping-hero-image img,
.trailer-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Booking Section */
.camping-booking-section,
.trailer-booking-section {
  margin-bottom: var(--spacing-4xl);
}

.camping-booking-header,
.trailer-booking-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.camping-booking-header h2,
.trailer-booking-header h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-md);
}

.camping-booking-header p,
.trailer-booking-header p {
  font-size: var(--font-size-body);
  color: var(--color-text-medium);
}

/* Calendar Styles */
.calendar-container {
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.calendar-month-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin: 0;
}

.calendar-nav {
  background: var(--color-background);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: var(--tap-target-min);
}

.calendar-nav:hover:not(:disabled) {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-color: var(--color-primary-olive);
}

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

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
}

.calendar-day-name {
  text-align: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
  color: var(--color-text-medium);
  padding: var(--spacing-sm);
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body-mobile);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: var(--tap-target-min);
}

.calendar-day.empty {
  cursor: default;
  opacity: 0;
}

.calendar-day.past {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-day.available {
  background: var(--color-background);
  border: 2px solid var(--color-border);
  color: var(--color-text-dark);
}

.calendar-day.available:hover {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-color: var(--color-primary-olive);
  transform: scale(1.05);
}

.calendar-day.unavailable {
  background: var(--color-stone-gray);
  border: 2px solid var(--color-border);
  color: var(--color-text-light);
  cursor: not-allowed;
  opacity: 0.5;
}

.calendar-day.selected {
  background: var(--color-accent-berry);
  color: var(--color-pure-white);
  border-color: var(--color-accent-berry);
  font-weight: var(--font-weight-bold);
}

.calendar-day.range-start {
  background: var(--color-accent-berry);
  color: var(--color-pure-white);
  border-color: var(--color-accent-berry);
}

.calendar-day.range-end {
  background: var(--color-accent-berry);
  color: var(--color-pure-white);
  border-color: var(--color-accent-berry);
}

.calendar-day.in-range {
  background: rgba(217, 164, 166, 0.2);
  border-color: var(--color-accent-berry);
}

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-small);
  color: var(--color-text-medium);
}

.legend-dot {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
}

.legend-dot.available {
  background: var(--color-background);
}

.legend-dot.unavailable {
  background: var(--color-stone-gray);
  opacity: 0.5;
}

.legend-dot.selected {
  background: var(--color-accent-berry);
  border-color: var(--color-accent-berry);
}

/* Booking Form */
.booking-form-container {
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
}

.booking-form-container h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-xl);
}

.booking-type-selector {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.booking-type-option {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-pure-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-soft);
}

.booking-type-option:hover {
  border-color: var(--color-primary-olive);
  background: rgba(109, 130, 89, 0.05);
  box-shadow: var(--shadow-soft-hover);
  transform: translateY(-2px);
}

.booking-type-option input[type="radio"] {
  margin: 0;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  accent-color: var(--color-primary-olive);
  cursor: pointer;
}

.booking-type-option span {
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
  font-weight: var(--font-weight-medium);
  flex: 1;
}

.booking-type-option input[type="radio"]:checked+span {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-olive);
}

.booking-type-option:has(input[type="radio"]:checked) {
  border-color: var(--color-primary-olive);
  background: rgba(109, 130, 89, 0.1);
  box-shadow: 0 0 0 3px rgba(109, 130, 89, 0.1);
}

.booking-summary {
  background: var(--color-background);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  border: 2px solid var(--color-border);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
}

.summary-row.total {
  border-top: 2px solid var(--color-border);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  color: var(--color-primary-olive);
}

/* Sections */
.camping-section,
.trailer-section {
  margin-bottom: var(--spacing-4xl);
}

.camping-section h2,
.trailer-section h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-2xl);
  text-align: center;
}

/* Pricing Tables */
.pricing-tables {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.pricing-table-card {
  background: var(--color-off-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-soft);
}

.pricing-table-card h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-lg);
  text-align: center;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-md);
}

.pricing-table thead {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
}

.pricing-table th {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
}

.pricing-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
}

.pricing-table tbody tr:hover {
  background: rgba(109, 130, 89, 0.05);
}

.pricing-note {
  font-size: var(--font-size-small);
  color: var(--color-text-medium);
  text-align: center;
  margin: var(--spacing-md) 0 0;
  font-style: italic;
}

/* Gallery */
.camping-gallery,
.trailer-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  position: relative;
  z-index: 1;
}

.gallery-item {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  background: var(--color-pure-white);
  z-index: 1;
  isolation: isolate;
}

/* Upewnij się, że overlay na zdjęciach w galerii nie pokazuje gradientu z tła */
.gallery-item .image-product-overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-item .image-product-overlay::after {
  z-index: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rules List */
.rules-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.rule-item {
  display: flex;
  gap: var(--spacing-lg);
  background: var(--color-off-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-soft);
}

.rule-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-radius: var(--radius-full);
}

.rule-icon svg {
  width: 24px;
  height: 24px;
}

.rule-content h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-sm);
}

.rule-content p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-medium);
  margin: 0;
}

/* Equipment Grid */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.equipment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--color-off-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: all var(--transition-fast);
}

.equipment-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft-hover);
}

.equipment-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-radius: var(--radius-full);
}

.equipment-icon svg {
  width: 28px;
  height: 28px;
}

.equipment-item span {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}

/* Location */
.location-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

.location-map {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-stone-gray);
  min-height: 300px;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: var(--color-text-light);
  gap: var(--spacing-md);
}

.map-placeholder svg {
  width: 64px;
  height: 64px;
  opacity: 0.5;
}

.location-info h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-md);
}

.location-info>p {
  font-size: var(--font-size-body);
  color: var(--color-text-medium);
  margin: 0 0 var(--spacing-lg);
}

.location-details {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-medium);
}

.location-details p {
  margin: 0 0 var(--spacing-md);
}

.location-details ul {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

.location-details li {
  margin-bottom: var(--spacing-sm);
}

/* FAQ Accordion */
.faq-accordion-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.faq-accordion {
  background: var(--color-off-white);
  border-radius: var(--radius-card);
  border: 2px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.faq-accordion:hover {
  box-shadow: var(--shadow-soft);
}

.faq-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  cursor: pointer;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  transition: all var(--transition-fast);
  min-height: var(--tap-target-min);
}

.faq-accordion-header:hover {
  background: rgba(109, 130, 89, 0.05);
}

.faq-accordion-header svg {
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.faq-accordion.active .faq-accordion-header svg {
  transform: rotate(180deg);
}

.faq-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal), padding var(--transition-normal);
  padding: 0 var(--spacing-lg);
}

.faq-accordion.active .faq-accordion-content {
  max-height: 1000px;
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.faq-accordion-content p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-medium);
  margin: 0;
}

/* Regulations */
.regulations-accordion {
  background: var(--color-off-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-soft);
}

.regulations-content h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin: var(--spacing-xl) 0 var(--spacing-md);
}

.regulations-content h3:first-child {
  margin-top: 0;
}

.regulations-content p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-medium);
  margin: 0 0 var(--spacing-lg);
}

.regulations-content ul {
  margin: var(--spacing-md) 0 var(--spacing-lg);
  padding-left: var(--spacing-lg);
}

.regulations-content li {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-medium);
  margin-bottom: var(--spacing-sm);
}

/* Contact Info */
.camping-contact-info,
.trailer-contact-info {
  text-align: center;
  background: var(--color-off-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-soft);
}

.camping-contact-info>p,
.trailer-contact-info>p {
  font-size: var(--font-size-body);
  color: var(--color-text-medium);
  margin: 0 0 var(--spacing-lg);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: var(--spacing-xl) 0;
  text-align: left;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.contact-detail-item {
  font-size: var(--font-size-body);
  color: var(--color-text-dark);
}

.contact-detail-item strong {
  color: var(--color-primary-olive);
}

/* Trailer Promo Section */
.camping-trailer-section {
  margin-bottom: var(--spacing-4xl);
}

.trailer-promo-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  background: var(--color-off-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-soft);
  align-items: center;
}

.trailer-promo-content h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-lg);
  text-align: left;
}

.trailer-promo-content p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-medium);
  margin: 0 0 var(--spacing-xl);
}

.trailer-promo-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.trailer-promo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive Design */
@media (max-width: 768px) {

  .camping-hero h1,
  .trailer-hero h1 {
    font-size: var(--font-size-h1-mobile);
  }

  .calendar-container {
    padding: var(--spacing-lg);
  }

  .calendar-grid {
    gap: var(--spacing-xs);
  }

  .calendar-day {
    font-size: var(--font-size-small);
    min-height: 36px;
  }

  .booking-form-container {
    padding: var(--spacing-lg);
  }

  .booking-type-selector {
    flex-direction: column;
  }

  .booking-type-option {
    min-width: 100%;
  }

  .pricing-tables {
    grid-template-columns: 1fr;
  }

  /* Pricing Table - Mobile: Convert to cards */
  .pricing-table {
    display: block;
  }

  .pricing-table thead {
    display: none;
  }

  .pricing-table tbody {
    display: block;
  }

  .pricing-table tbody tr {
    display: block;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    background: var(--color-pure-white);
    box-shadow: var(--shadow-subtle);
  }

  .pricing-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .pricing-table tbody tr td {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    border-bottom: none;
  }

  .pricing-table tbody tr td:first-child {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-olive);
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
  }

  .pricing-table tbody tr td:last-child {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h3-mobile);
    color: var(--color-text-dark);
  }

  .camping-gallery,
  .trailer-gallery {
    grid-template-columns: 1fr;
  }

  .rules-list {
    grid-template-columns: 1fr;
  }

  .rule-item {
    flex-direction: column;
    text-align: center;
  }

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

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

  .trailer-promo-card {
    grid-template-columns: 1fr;
  }

  .trailer-promo-content h2 {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .equipment-grid {
    grid-template-columns: 1fr;
  }

  .calendar-day {
    min-height: 32px;
    font-size: 12px;
  }
}



/* ===== utilities.css ===== */
/* Design tokens są już wbudowane powyżej */

/* Image Overlays & Filters */
.image-hero-overlay {
  position: relative;
  overflow: hidden;
}

.image-hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(109, 130, 89, 0.15) 0%, rgba(109, 130, 89, 0.05) 50%, transparent 100%);
  pointer-events: none;
}

.image-about-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(109, 130, 89, 0.08) 0%, transparent 100%);
  pointer-events: none;
}

.image-product-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(109, 130, 89, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

.image-blog-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(79, 93, 67, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.image-community-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(109, 130, 89, 0.1) 0%, rgba(109, 130, 89, 0.05) 50%, transparent 100%);
  pointer-events: none;
}

/* Wyłącz gradient overlay dla kart community (karty mają białe tło) */
.community-posts-list .post-card-image.image-community-overlay::after,
.community-content .post-card-image.image-community-overlay::after,
.community-layout .post-card-image.image-community-overlay::after,
.community-page .post-card-image.image-community-overlay::after {
  display: none !important;
  background: none !important;
  content: none !important;
}

/* Wyłącz także gradient na samym elemencie jeśli jest */
.community-posts-list .post-card-image.image-community-overlay,
.community-content .post-card-image.image-community-overlay,
.community-layout .post-card-image.image-community-overlay,
.community-page .post-card-image.image-community-overlay {
  background-image: none !important;
  background: none !important;
}

.image-pastel-nature {
  filter: brightness(1.05) contrast(0.95) saturate(0.9);
}

/* Duotone i toning dla spójności obrazów */
.photo--duotone {
  filter: saturate(0.9) contrast(0.95);
}

.photo--overlay {
  position: relative;
}

.photo--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(78, 101, 62, 0.06), rgba(255, 244, 201, 0.03));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.image-pastel-filter {
  filter: sepia(0.1) brightness(1.02) contrast(0.98);
}

.image-soft-blur {
  filter: blur(0.5px);
}

.avatar-bordered {
  border: 3px solid var(--color-sage-green);
  box-shadow: 0 2px 8px rgba(109, 130, 89, 0.15);
  border-radius: var(--radius-full);
  overflow: hidden;
  width: 40px;
  height: 40px;
  display: inline-block;
}

.thumbnail-bordered {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
}

/* Badges */
/* C1: Badge - mniej kolorów, więcej znaczenia (1 badge na kartę, priorytet: Sezonowe > Nowość > BIO) */
.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.6875rem;
  /* C1: 11px - mniejszy */
  font-weight: 600;
  letter-spacing: 0.05em;
  /* C1: Większy letter-spacing dla czytelności */
  text-transform: uppercase;
  color: var(--color-pure-white);
  background: var(--color-pastel-berry);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.5px;
}

.badge-berry {
  background: var(--color-pastel-berry);
  color: var(--color-pure-white);
  box-shadow: 0 4px 12px rgba(184, 106, 110, 0.25);
}

.badge-yellow,
.badge--yellow {
  background: var(--color-accent);
  color: var(--color-deep-sage);
  box-shadow: 0 4px 12px rgba(245, 226, 135, 0.3);
}

.badge--green {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  box-shadow: 0 4px 12px rgba(109, 130, 89, 0.25);
}

/* Micro-badges na filtrach - delikatne półprzezroczyste tło */
.micro-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(109, 130, 89, 0.08);
  color: var(--color-deep-sage);
  border: 1px solid rgba(109, 130, 89, 0.12);
  letter-spacing: 0.03em;
}

/* Homepage specific styles */
.section {
  padding: var(--spacing-section-padding) 0;
}

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .two-column {
    grid-template-columns: 1fr 1fr;
  }
}

.feature-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  text-align: center;
}

@media (min-width: 768px) {
  .feature-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-md);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary-olive);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background);
}

.feature-icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--color-primary-olive);
  stroke-width: 2;
}

.footer {
  position: relative;
  z-index: 200;
  /* Same as header, so footer stays above overlay (z-index: 50) */
  background-color: var(--color-forest-mid);
  color: var(--color-pure-white) !important;
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
  border-top: 1px solid var(--color-stone-gray);
}

/* Add safe-area-inset-bottom only on mobile devices that need it */
@media (max-width: 767px) {
  .footer {
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
  }
}

/* Hide footer on mobile - wszystkie strony używają bottom-nav zamiast desktop footer */
@media (max-width: 767px) {
  .footer {
    display: none !important;
  }

  /* Show bottom-nav on mobile */
  .bottom-nav {
    display: flex;
  }
}

/* Hide bottom-nav on desktop */
@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }
}

.footer * {
  color: var(--color-pure-white) !important;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-logo {
  display: inline-block;
  margin-bottom: var(--spacing-lg);
}

.footer-logo-image {
  height: 60px;
  width: auto;
  display: block;
}

.footer-title {
  font-size: var(--font-size-h3-mobile);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  color: var(--color-pure-white) !important;
}

.footer-link {
  display: block;
  color: var(--color-pure-white) !important;
  text-decoration: none;
  margin-bottom: var(--spacing-xs) !important;
  /* Reduced spacing - was spacing-sm (8px), now spacing-xs (4px) */
  transition: all var(--transition-fast);
  padding: 2px 0 !important;
  /* Reduced padding - was spacing-xs (4px), now 2px */
  display: flex;
  align-items: center;
}

.footer-link:hover {
  color: var(--color-pure-white) !important;
  text-decoration: underline;
  text-decoration-color: var(--color-pure-white);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Wszystkie linki w footerze mają białe podkreślenie na hover (oprócz przycisków) */
.footer a:hover:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-tertiary) {
  text-decoration: underline;
  text-decoration-color: var(--color-pure-white);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Moved to PUBLIC BUTTONS section (scoped) */

.footer p {
  color: var(--color-pure-white) !important;
}

.footer-bottom {
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.02);
  position: relative;
}

.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.social-icons {
  display: flex;
  gap: var(--spacing-md);
}

.social-icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-deep-sage);
  background-color: var(--color-pure-white);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  border: 1px solid var(--color-stone-gray);
}

@media (min-width: 768px) {
  .social-icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }
}

.social-icon:hover {
  transform: translateY(-2px);
}

.social-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
}

.newsletter-form {
  display: flex;
  gap: var(--spacing-sm);
}

.newsletter-input {
  flex: 1;
}

.cta-bar {
  background-color: var(--color-primary-olive);
  color: var(--color-pure-white);
  padding: var(--spacing-sm) 0;
  text-align: center;
  font-size: var(--font-size-small);
  margin-top: 0;
  position: relative;
  z-index: calc(var(--z-index-sticky) - 1);
  width: 100%;
}

.about-image {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-stone-gray);
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
}

.bullet-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.bullet-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.bullet-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: var(--spacing-xs);
  stroke: var(--color-primary-olive);
  stroke-width: 2;
}

/* Accessibility - Visually Hidden (for screen readers) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Utility classes */
.mt-md {
  margin-top: var(--spacing-md);
}

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

.mt-0 {
  margin-top: 0;
}

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

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

.text-inherit {
  color: inherit;
}

.no-decoration {
  text-decoration: none;
}

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

.bg-off-white {
  background-color: var(--color-off-white);
}

.text-deep-sage {
  color: var(--color-deep-sage);
}

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

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

.ml-4 {
  margin-left: 4px;
}

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

.price-old {
  text-decoration: line-through;
  color: var(--color-text-muted);
  font-size: 14px;
  margin-right: 8px;
}

.price-sale {
  color: var(--color-pastel-berry);
}

.ml-auto {
  margin-left: auto;
}

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

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

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

.text-link {
  color: var(--color-primary-olive);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.text-link:hover {
  color: var(--color-deep-sage);
  text-decoration: underline;
}

/* ========================================
   AUTH PAGES - LOGIN, REGISTER, RESET PASSWORD
   ======================================== */

/* Auth Pages Container */
.auth-page {
  min-height: calc(100vh - var(--header-height-desktop));
  /* Full viewport minus header - footer will be below */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl) var(--container-padding);
  padding-bottom: var(--spacing-4xl);
  /* Keep footer close to content on desktop */
  margin-bottom: 0;
  /* Do not create a body-colored stripe before footer */
  background: linear-gradient(180deg,
      var(--color-hero-step-1) 0%,
      var(--color-hero-step-2) 25%,
      var(--color-hero-step-3) 60%,
      var(--color-hero-step-4) 100%);
  position: relative;
  /* Ensure auth-page is positioned relative for absolute children */
}

/* Profile page content should not be centered vertically */
.auth-page .profile-page {
  align-self: flex-start;
  width: 100%;
  margin-top: var(--spacing-xl);
  /* Add top margin for spacing from header */
}

@media (max-width: 767px) {
  .auth-page {
    min-height: calc(100vh - var(--header-height-mobile));
    padding: var(--spacing-xl) var(--container-padding-mobile);
    padding-bottom: var(--spacing-3xl);
  }

  .auth-page .profile-page {
    margin-top: var(--spacing-md);
  }
}

.auth-container {
  width: 100%;
  max-width: 480px;
  /* login, reset-password */
  margin: 0 auto;
}

.auth-container--wide {
  max-width: 520px;
  /* register */
}

.auth-container--profile {
  max-width: 800px;
  /* profile - wider for better layout */
}

.auth-card {
  background: var(--color-pure-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-soft);
}

.auth-title {
  font-family: var(--font-family-heading);
  font-size: clamp(1.75rem, 2vw, 2rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-md) 0;
  text-align: center;
}

.auth-subtitle {
  font-size: var(--font-size-body-mobile);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 var(--spacing-xl) 0;
}

.auth-social-intro {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 var(--spacing-md) 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--spacing-xl) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--color-border);
}

.auth-divider::before {
  margin-right: var(--spacing-md);
}

.auth-divider::after {
  margin-left: var(--spacing-md);
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.btn-social svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-footer {
  text-align: center;
  margin-top: var(--spacing-xl);
  font-size: var(--font-size-body-mobile);
  color: var(--color-text-muted);
}

.auth-footer a {
  color: var(--color-primary-olive);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.auth-footer a:hover {
  color: var(--color-deep-sage);
}

/* Password Toggle Button */
.password-input-wrapper {
  position: relative;
}

.password-input-wrapper .form-input {
  padding-right: calc(var(--spacing-md) + 24px + var(--spacing-sm));
}

.form-toggle-password {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.form-toggle-password:hover {
  color: var(--color-text-dark);
  background-color: rgba(0, 0, 0, 0.05);
}

.form-toggle-password:focus-visible {
  outline: 2px solid var(--color-primary-olive);
  outline-offset: 2px;
}

.form-toggle-password svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
}

/* Form Error Messages */
.form-error {
  display: block;
  font-size: var(--font-size-small);
  color: var(--color-error);
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}

.form-input.error,
.form-input-error,
.form-input.form-input-error,
textarea.form-input-error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(217, 164, 166, 0.2) !important;
}

.form-input.error:focus,
.form-input-error:focus,
.form-input.form-input-error:focus,
textarea.form-input-error:focus {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(217, 164, 166, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Optional field indicator */
.form-label-optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  font-size: 0.9em;
  margin-left: var(--spacing-xs);
}

/* Anonymous form notice */
.anonymous-form-notice {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  line-height: 1.6;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-off-white);
  border-left: 3px solid var(--color-primary-olive);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.anonymous-form-notice strong {
  color: var(--color-deep-sage);
  font-weight: var(--font-weight-semibold);
}

/* Anonymous form modal */
.anonymous-form-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.anonymous-form-card {
  background: white;
  border-radius: var(--radius-card);
  padding: var(--spacing-xl);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-soft-hover);
}

/* Report confirm modal – spójny UX (zgłoś post/komentarz), używany na community i blog */
.report-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: var(--spacing-lg);
  box-sizing: border-box;
}

.report-confirm-modal.report-confirm-modal-visible {
  opacity: 1;
  pointer-events: all;
}

.report-confirm-content {
  background: var(--color-pure-white, #fff);
  border-radius: var(--radius-card, 8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 440px;
  width: 100%;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.report-confirm-modal.report-confirm-modal-visible .report-confirm-content {
  transform: translateY(0);
}

.report-confirm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.report-confirm-header h3 {
  margin: 0;
  font-size: var(--font-size-h3, 1.25rem);
  color: var(--color-text-dark, #1a1a1a);
}

.report-confirm-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  color: var(--color-text-muted, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.report-confirm-close:hover {
  color: var(--color-text-dark);
  background-color: var(--color-off-white, #f5f5f5);
}

.report-confirm-body {
  padding: var(--spacing-lg);
}

.report-confirm-body p {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: 1.5;
  color: var(--color-text-dark);
}

.report-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.report-confirm-actions .btn {
  min-height: 44px;
  min-width: 44px;
}

/* Comment like button */
.comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-dark);
  font-size: var(--font-size-small);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.comment-like-btn:hover:not(:disabled) {
  background: var(--color-off-white);
  border-color: var(--color-primary-olive);
}

.comment-like-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.comment-like-btn.liked {
  color: var(--color-pastel-berry);
  border-color: var(--color-pastel-berry);
}

.comment-like-btn.liked svg {
  fill: var(--color-pastel-berry);
  stroke: var(--color-pastel-berry);
}

.comment-like-count {
  font-weight: var(--font-weight-medium);
}

/* Comment actions */
.comment-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

.comment-replies-count {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Comment meta (for community comments) */
.comment-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* Alert Component - Inline notifications */
.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-card);
  border: 2px solid;
  background-color: var(--color-pure-white);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-mobile);
  line-height: var(--line-height-body);
}

.alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: var(--spacing-xs);
}

.alert-content {
  flex: 1;
  min-width: 0;
}

.alert-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-dark);
}

.alert-message {
  color: var(--color-text-dark);
  margin: 0;
}

.alert-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-close:hover {
  color: var(--color-text-dark);
  background-color: rgba(0, 0, 0, 0.05);
}

.alert-close:focus-visible {
  outline: 2px solid var(--color-primary-olive);
  outline-offset: 2px;
}

/* Alert Variants */
.alert--success,
.alert-success {
  border-color: var(--color-success);
  background-color: rgba(175, 199, 162, 0.1);
}

.alert--success .alert-icon,
.alert-success .alert-icon {
  color: var(--color-success);
}

.alert--error,
.alert-error {
  border-color: var(--color-error);
  background-color: rgba(217, 164, 166, 0.1);
}

.alert--error .alert-icon,
.alert-error .alert-icon {
  color: var(--color-error);
}

.alert--warning,
.alert-warning {
  border-color: var(--color-warning);
  background-color: rgba(247, 215, 161, 0.1);
}

.alert--warning .alert-icon,
.alert-warning .alert-icon {
  color: var(--color-warning);
}

.alert--info,
.alert-info {
  border-color: var(--color-info);
  background-color: rgba(109, 130, 89, 0.1);
}

.alert--info .alert-icon,
.alert-info .alert-icon {
  color: var(--color-info);
}

/* Alert Messages for Auth */
.auth-alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-input);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-body-mobile);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.auth-alert--error {
  background-color: rgba(217, 164, 166, 0.1);
  border: 1px solid var(--color-error);
  color: var(--color-text-dark);
}

.auth-alert--success {
  background-color: rgba(175, 199, 162, 0.1);
  border: 1px solid var(--color-success);
  color: var(--color-text-dark);
}

.auth-alert--info {
  background-color: rgba(109, 130, 89, 0.1);
  border: 1px solid var(--color-primary-olive);
  color: var(--color-text-dark);
}

.auth-alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: var(--spacing-xs);
}

.auth-alert-message {
  flex: 1;
  margin: 0;
}

/* ========================================
   PROFILE PAGE
   ======================================== */

/* Auth Required (profile unauth) - use normal flow like login.html */
/* No absolute positioning - participates in normal document flow */
.auth-page--profile .auth-required-page {
  width: 100%;
  display: none;
  /* Normal flow - spacing comes from .auth-page padding */
}

.auth-page--profile .auth-required-page.is-visible {
  display: block;
  /* Normal block element in flow - spacing handled by parent .auth-page */
}

/* Legacy styles for other pages that might use .auth-required-container/.auth-required-content */
/* These are kept for backward compatibility but not used in profile.html */
.auth-required-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  min-height: 100%;
  /* Ensure container fills overlay height */
}

.auth-required-content {
  background: var(--color-pure-white);
  padding: var(--spacing-3xl) var(--spacing-2xl);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  text-align: center;
  max-width: 400px;
  width: 100%;
  position: relative;
  transform: translateY(10px);
  transition: transform var(--transition-base), opacity var(--transition-base);
  opacity: 0;
}

.auth-required-page[style*="display: flex"] .auth-required-content,
.auth-required-overlay[style*="display: flex"] .auth-required-content {
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 768px) {
  .auth-required-container {
    padding: var(--spacing-2xl);
  }

  .auth-required-content {
    max-width: 420px;
    padding: var(--spacing-4xl) var(--spacing-3xl);
  }

  .auth-required-brand {
    margin-bottom: var(--spacing-3xl);
  }

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

  .auth-required-actions .btn {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-body);
  }
}

.auth-required-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--spacing-2xl);
}

.auth-required-brand img {
  width: 90px;
  max-width: 50vw;
  height: auto;
  display: block;
  margin-bottom: var(--spacing-md);
}

.auth-required-brand h1 {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .auth-required-brand img {
    width: 100px;
  }
}

.auth-required-content h2 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--color-deep-sage);
  font-size: 1.375rem;
  font-weight: 600;
  font-family: var(--font-family-body);
  line-height: 1.4;
}

.auth-required-content p {
  margin: 0 0 var(--spacing-2xl) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body-mobile);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .auth-required-content h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-lg);
  }

  .auth-required-content p {
    font-size: var(--font-size-body);
    margin-bottom: var(--spacing-3xl);
  }
}

.auth-required-benefits {
  text-align: left;
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-lg);
  background: var(--color-off-white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.auth-required-benefits h3 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--color-deep-sage);
  font-size: var(--font-size-body);
  font-weight: 600;
  font-family: var(--font-family-body);
}

.auth-required-benefits ul {
  margin: 0;
  padding-left: var(--spacing-lg);
  color: var(--color-text-dark);
  font-size: var(--font-size-body-mobile);
  line-height: 1.6;
}

.auth-required-benefits li {
  margin-bottom: var(--spacing-xs);
}

.auth-required-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.auth-required-actions .btn {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-body);
  font-weight: 500;
  transition: all var(--transition-fast);
  border-radius: var(--radius-button);
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.auth-required-actions .btn-primary {
  background: var(--color-primary-olive);
  color: var(--color-pure-white);
  border-color: var(--color-primary-olive);
}

.auth-required-actions .btn-primary:hover {
  background: var(--color-deep-sage);
  border-color: var(--color-deep-sage);
  transform: none;
  box-shadow: var(--shadow-sm);
}

.auth-required-actions .btn-secondary {
  background: var(--color-pure-white);
  color: var(--color-deep-sage);
  border-color: var(--color-border);
}

.auth-required-actions .btn-secondary:hover {
  background: var(--color-off-white);
  border-color: var(--color-primary-olive);
  color: var(--color-deep-sage);
  transform: none;
  box-shadow: var(--shadow-sm);
}

.auth-required-actions .btn-ghost {
  background: transparent;
  color: var(--color-text-dark);
  border-color: transparent;
}

.auth-required-actions .btn-ghost:hover {
  background: rgba(109, 130, 89, 0.08);
  border-color: transparent;
  color: var(--color-deep-sage);
  transform: none;
  box-shadow: none;
}

.auth-required-back {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.auth-required-back a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-small);
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.auth-required-back a:hover {
  color: var(--color-deep-sage);
  text-decoration: none;
}

@media (max-width: 767px) {
  .auth-required-container {
    padding: var(--spacing-lg);
    align-items: flex-start;
    padding-top: var(--spacing-2xl);
  }

  .auth-required-content {
    padding: var(--spacing-2xl);
    margin: 0;
    max-width: 100%;
    border-radius: var(--radius-lg);
  }

  .auth-required-content h2 {
    font-size: 1.375rem;
  }

  .auth-required-content p {
    font-size: var(--font-size-body-mobile);
  }

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

  .auth-required-actions .btn {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-body-mobile);
  }

  .auth-required-brand {
    margin-bottom: var(--spacing-xl);
  }

  .auth-required-brand img {
    width: 80px;
  }
}

/* Profile page - when shown inside auth-page, it should fill the container */
.auth-page .profile-page {
  width: 100%;
  padding: 0;
  background: transparent;
  /* auth-page already has background gradient */
  min-height: auto;
  position: relative;
  overflow: visible;
  align-self: flex-start;
  /* Start from top, don't center vertically */
}

/* Standalone profile-page (if used elsewhere) */
.profile-page {
  padding: var(--spacing-3xl) 0 var(--spacing-4xl);
  background:
    radial-gradient(circle at 20% 30%, rgba(175, 199, 162, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(109, 130, 89, 0.06) 0%, transparent 50%),
    linear-gradient(180deg,
      var(--color-hero-step-1) 0%,
      var(--color-hero-step-2) 25%,
      var(--color-hero-step-3) 60%,
      var(--color-hero-step-4) 100%);
  min-height: calc(100vh - var(--header-height-desktop));
  position: relative;
}

/* Pattern overlay - only for standalone profile-page */
.profile-page:not(.auth-page .profile-page)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.015'%3E%3Cpath d='M50 50c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm20 0c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm-40 0c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10z'/%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
  opacity: 0.4;
}

@media (max-width: 767px) {
  .auth-page .profile-page {
    padding: var(--spacing-xl) 0;
  }

  .profile-page:not(.auth-page .profile-page) {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
    min-height: calc(100vh - var(--header-height-mobile));
  }
}

.profile-section {
  background: var(--color-pure-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow:
    0 6px 18px rgba(40, 50, 30, 0.04),
    0 2px 6px rgba(40, 50, 30, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  margin-bottom: var(--spacing-xl);
  border: 1px solid rgba(175, 199, 162, 0.2);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  overflow: hidden;
}

.profile-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
      var(--color-primary-olive) 0%,
      var(--color-sage-green) 50%,
      var(--color-primary-olive) 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  opacity: 0.6;
}

@media (hover: hover) {
  .profile-section:hover {
    transform: translateY(-4px);
    box-shadow:
      0 12px 32px rgba(40, 50, 30, 0.08),
      0 4px 12px rgba(40, 50, 30, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

@media (max-width: 767px) {
  .profile-section {
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
  }

  .profile-section::before {
    height: 3px;
  }
}

.profile-section-title {
  font-family: var(--font-family-heading);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-deep-sage);
  margin: 0 0 var(--spacing-xl) 0;
  padding-bottom: var(--spacing-md);
  position: relative;
  line-height: 1.3;
}

.profile-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg,
      var(--color-primary-olive) 0%,
      var(--color-sage-green) 100%);
  border-radius: 2px;
}

@media (max-width: 767px) {
  .profile-section-title {
    font-size: 1.375rem;
    margin-bottom: var(--spacing-lg);
  }

  .profile-section-title::after {
    width: 50px;
    height: 2px;
  }
}

/* Profile Avatar Section */
.profile-avatar-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

/* Profile Avatar - matching manager app style */
.profile-avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-stone-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-sage-green);
  flex-shrink: 0;
}

.profile-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 200px;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.profile-avatar-img[src]:not([src=""]) {
  display: block;
}

.profile-avatar-placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--color-text-muted);
  display: block;
}

.profile-avatar-container:has(.profile-avatar-img[src]:not([src=""])) .profile-avatar-placeholder-icon {
  display: none;
}

@media (max-width: 767px) {
  .profile-avatar-container {
    width: 100px;
    height: 100px;
  }

  .profile-avatar-placeholder-icon {
    width: 40px;
    height: 40px;
  }
}

.profile-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.profile-actions .btn {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-weight: var(--font-weight-semibold);
  box-shadow:
    0 4px 12px rgba(109, 130, 89, 0.15),
    0 2px 4px rgba(40, 50, 30, 0.05);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.profile-actions .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: left 0.6s ease;
}

@media (hover: hover) {
  .profile-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 8px 20px rgba(109, 130, 89, 0.25),
      0 4px 8px rgba(40, 50, 30, 0.1);
  }

  .profile-actions .btn:hover::before {
    left: 100%;
  }
}

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

@media (max-width: 767px) {
  .profile-actions {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .profile-actions .btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
  }
}

.email-verified {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-small);
  color: var(--color-success);
  margin-left: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
}

.email-verified svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.email-unverified {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-small);
  color: var(--color-warning);
  margin-left: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
}

.email-unverified svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.email-unverified a {
  color: var(--color-primary-olive);
  text-decoration: underline;
  margin-left: var(--spacing-xs);
}

.profile-field-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 640px) {
  .profile-field-group--two-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

.profile-field-readonly {
  position: relative;
}

.profile-field-readonly .form-input {
  background-color: var(--color-off-white);
  cursor: not-allowed;
}

.profile-help-text {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}

.profile-danger-zone {
  border-top: 2px solid var(--color-error);
  padding-top: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.profile-danger-link {
  color: var(--color-error);
  text-decoration: underline;
  font-size: var(--font-size-body-mobile);
  transition: color var(--transition-fast);
}

.profile-danger-link:hover {
  color: var(--color-pastel-berry);
}

/* ========================================
   STICKY CTA (MOBILE) - INTELIGENTNE, NIE AGRESYWNE
   ======================================== */

/* ERGONOMIA: Kontekstowe sticky CTA - tylko gdy użytkownik realnie ogląda produkt */
/* Nie pokazuj na każdej karcie - tylko po scrollu 1.5-2 wysokości ekranu (logika w JS) */
.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Safari support */
  border-top: 1px solid var(--color-border);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  /* Safe area dla iPhone z notch */
  display: none;
  z-index: 50;
  /* Powyżej content, poniżej modali (z-index: 200+) */
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  /* Subtelny cień od góry */
}

.mobile-sticky-cta.visible {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  /* CTA + cena = jedna decyzja */
}

.mobile-sticky-cta-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  /* Zapobiega overflow */
}

.mobile-sticky-cta-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-olive);
  white-space: nowrap;
  /* Cena nie łamie się */
  flex-shrink: 0;
}

.mobile-sticky-cta .btn {
  flex: 1;
  min-width: 0;
  /* CTA może się zmniejszyć jeśli cena jest długa */
  min-height: 48px;
  /* Touch target */
  font-size: 0.9375rem;
  /* 15px - czytelne */
  font-weight: 600;
}

/* Desktop → NIE pokazuj sticky CTA */
@media (min-width: 768px) {
  .mobile-sticky-cta {
    display: none !important;
  }
}

/* Ukryj sticky CTA gdy jesteś przy footerze (logika w JS) */
.mobile-sticky-cta.hide-near-footer {
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

/* ========================================
   KROK 24: MOBILE STICKY ADD-TO-CART (THUMB-FIRST UX)
   ======================================== */
/* Globalny sticky bar - pojawia się po tapnięciu "Dodaj do koszyka" */
.mobile-add-to-cart-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-add-to-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-pure-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: block;
    transform: translateY(100%);
    transition: transform 250ms ease;
  }

  .mobile-add-to-cart-bar.is-visible {
    transform: translateY(0);
  }

  /* KOREKTA SPACINGU STRONY - żeby sticky bar nie zasłaniał treści */
  body {
    padding-bottom: 88px;
  }
}

/* CONTENT + CTA LAYOUT */
.mobile-add-to-cart-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  max-width: 100%;
}

.mobile-add-to-cart-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* Pozwól na shrink */
}

.mobile-add-to-cart-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20ch;
}

.mobile-add-to-cart-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary-olive);
}

.mobile-add-to-cart-btn {
  min-height: 48px;
  padding: 0 20px;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Desktop: ukryj sticky bar */
@media (min-width: 768px) {
  .mobile-add-to-cart-bar {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }
}