/* ==========================================================================\n   Variables\n   ========================================================================== */\n:root {\n  /* Colors */\n  --color-background: #f5f7f2; /* soft, light eco-neutral */\n  --color-surface: #ffffff;\n  --color-text: #1f2a24;\n  --color-text-muted: #6b776f;\n  --color-primary: #2e7d32; /* deep natural green */\n  --color-primary-soft: #e0f2e5;\n  --color-primary-dark: #205723;\n  --color-success: #388e3c;\n  --color-warning: #f9a825;\n  --color-danger: #d32f2f;\n\n  --color-gray-50: #f8faf9;\n  --color-gray-100: #ecf0ed;\n  --color-gray-200: #d9e0da;\n  --color-gray-300: #c3cec4;\n  --color-gray-400: #a2b0a5;\n  --color-gray-500: #7c8a7f;\n  --color-gray-600: #5f6b61;\n  --color-gray-700: #444e45;\n  --color-gray-800: #2d352e;\n  --color-gray-900: #181d19;\n\n  /* Typography */\n  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",\n    sans-serif;\n  --font-heading: "Inter", system-ui, -apple-system, BlinkMacSystemFont,\n    "Segoe UI", sans-serif;\n\n  --font-size-xs: 0.75rem;   /* 12px */\n  --font-size-sm: 0.875rem;  /* 14px */\n  --font-size-base: 1rem;    /* 16px */\n  --font-size-lg: 1.125rem;  /* 18px */\n  --font-size-xl: 1.25rem;   /* 20px */\n  --font-size-2xl: 1.5rem;   /* 24px */\n  --font-size-3xl: 1.875rem; /* 30px */\n  --font-size-4xl: 2.25rem;  /* 36px */\n\n  --line-height-tight: 1.2;\n  --line-height-snug: 1.35;\n  --line-height-normal: 1.6;\n\n  /* Spacing scale (0–96px) */\n  --space-0: 0;\n  --space-1: 0.25rem;  /* 4px */\n  --space-2: 0.5rem;   /* 8px */\n  --space-3: 0.75rem;  /* 12px */\n  --space-4: 1rem;     /* 16px */\n  --space-5: 1.25rem;  /* 20px */\n  --space-6: 1.5rem;   /* 24px */\n  --space-8: 2rem;     /* 32px */\n  --space-10: 2.5rem;  /* 40px */\n  --space-12: 3rem;    /* 48px */\n  --space-16: 4rem;    /* 64px */\n  --space-20: 5rem;    /* 80px */\n  --space-24: 6rem;    /* 96px */\n\n  /* Radius */\n  --radius-xs: 2px;\n  --radius-sm: 4px;\n  --radius-md: 8px;\n  --radius-lg: 12px;\n  --radius-xl: 999px; /* pill */\n\n  /* Shadows (soft, natural) */\n  --shadow-xs: 0 1px 2px rgba(10, 35, 17, 0.06);\n  --shadow-sm: 0 2px 6px rgba(10, 35, 17, 0.07);\n  --shadow-md: 0 8px 20px rgba(10, 35, 17, 0.09);\n  --shadow-lg: 0 18px 45px rgba(10, 35, 17, 0.12);\n\n  /* Transitions */\n  --transition-fast: 150ms ease-out;\n  --transition-base: 200ms ease-out;\n  --transition-slow: 300ms ease-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --transition-fast: 0ms;\n    --transition-base: 0ms;\n    --transition-slow: 0ms;\n  }\n}\n\n/* ==========================================================================\n   Reset / Normalize\n   ========================================================================== */\n* ,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  margin: 0;\n  padding: 0;\n  scroll-behavior: smooth;\n}\n\nbody {\n  margin: 0;\n}\n\nmain {\n  display: block;\n}\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  max-width: 100%;\n}\n\nimg {\n  height: auto;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n  font: inherit;\n  color: inherit;\n  margin: 0;\n}\n\nul,\nol {\n  margin: 0;\n  padding: 0;\n}\n\nli {\n  list-style: none;\n}\n\nfieldset {\n  border: 0;\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\na {\n  text-decoration: none;\n  color: inherit;\n}\n\nbutton {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n\nbutton:disabled,\n[disabled] {\n  cursor: not-allowed;\n}\n\n/* ==========================================================================\n   Base Styles\n   ========================================================================== */\nbody {\n  font-family: var(--font-sans);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-normal);\n  background-color: var(--color-background);\n  color: var(--color-text);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n\n::selection {\n  background: var(--color-primary-soft);\n  color: var(--color-text);\n}\n\n/* Headings */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: var(--font-heading);\n  font-weight: 600;\n  color: var(--color-text);\n  line-height: var(--line-height-tight);\n  margin: 0 0 var(--space-3);\n}\n\nh1 {\n  font-size: var(--font-size-4xl);\n}\n\nh2 {\n  font-size: var(--font-size-3xl);\n}\n\nh3 {\n  font-size: var(--font-size-2xl);\n}\n\nh4 {\n  font-size: var(--font-size-xl);\n}\n\nh5 {\n  font-size: var(--font-size-lg);\n}\n\nh6 {\n  font-size: var(--font-size-base);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n@media (max-width: 768px) {\n  h1 {\n    font-size: 2rem;\n  }\n  h2 {\n    font-size: 1.75rem;\n  }\n  h3 {\n    font-size: 1.4rem;\n  }\n}\n\n/* Typography */\np {\n  margin: 0 0 var(--space-3);\n  color: var(--color-text-muted);\n}\n\nsmall {\n  font-size: var(--font-size-sm);\n}\n\nstrong,\nb {\n  font-weight: 600;\n}\n\n/* Links */\na {\n  color: var(--color-primary);\n  transition: color var(--transition-base),\n    opacity var(--transition-base);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  a {\n    transition: none;\n  }\n}\n\n\na:hover {\n  color: var(--color-primary-dark);\n}\n\n\na:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 3px;\n}\n\n/* ==========================================================================\n   Accessibility & Focus\n   ========================================================================== */\n:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 3px;\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n}\n\n/* Screen-reader only */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ==========================================================================\n   Utilities\n   ========================================================================== */\n/* Layout container for readable eco-store content */\n.container {\n  width: 100%;\n  max-width: 1120px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--space-4);\n  padding-right: var(--space-4);\n}\n\n@media (min-width: 1280px) {\n  .container {\n    max-width: 1200px;\n  }\n}\n\n/* Flex helpers */\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.flex-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.flex-between {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.flex-col {\n  display: flex;\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n/* Grid helpers */\n.grid {\n  display: grid;\n}\n\n.grid-2 {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-6);\n}\n\n.grid-3 {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-6);\n}\n\n@media (max-width: 900px) {\n  .grid-2,\n  .grid-3 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 600px) {\n  .grid-2,\n  .grid-3 {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Spacing utilities (margin / padding, limited set) */\n.mt-0 { margin-top: 0; }\n.mt-4 { margin-top: var(--space-4); }\n.mt-6 { margin-top: var(--space-6); }\n.mt-8 { margin-top: var(--space-8); }\n.mb-0 { margin-bottom: 0; }\n.mb-4 { margin-bottom: var(--space-4); }\n.mb-6 { margin-bottom: var(--space-6); }\n.mb-8 { margin-bottom: var(--space-8); }\n.pt-4 { padding-top: var(--space-4); }\n.pb-4 { padding-bottom: var(--space-4); }\n.p-4 { padding: var(--space-4); }\n.p-6 { padding: var(--space-6); }\n\n/* Text utilities */\n.text-center {\n  text-align: center;\n}\n\n.text-muted {\n  color: var(--color-text-muted);\n}\n\n/* ==========================================================================\n   Components\n   ========================================================================== */\n/* Buttons: clean, rounded, eco-friendly primary CTA */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  padding: 0.65rem 1.4rem;\n  border-radius: var(--radius-xl);\n  border: 1px solid transparent;\n  font-size: var(--font-size-sm);\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n  background-color: var(--color-gray-900);\n  color: #ffffff;\n  transition: background-color var(--transition-base),\n    border-color var(--transition-base),\n    color var(--transition-base),\n    box-shadow var(--transition-base),\n    transform var(--transition-fast);\n}\n\n.btn-primary {\n  background-color: var(--color-primary);\n  border-color: var(--color-primary);\n  color: #ffffff;\n}\n\n.btn-outline {\n  background-color: transparent;\n  border-color: var(--color-primary);\n  color: var(--color-primary);\n}\n\n.btn-ghost {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-text);\n}\n\n.btn:hover:not(:disabled) {\n  box-shadow: var(--shadow-sm);\n  transform: translateY(-1px);\n}\n\n.btn-primary:hover:not(:disabled) {\n  background-color: var(--color-primary-dark);\n  border-color: var(--color-primary-dark);\n}\n\n.btn-outline:hover:not(:disabled) {\n  background-color: var(--color-primary-soft);\n}\n\n.btn:active:not(:disabled) {\n  transform: translateY(0);\n  box-shadow: var(--shadow-xs);\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 3px;\n}\n\n.btn:disabled {\n  opacity: 0.6;\n  box-shadow: none;\n}\n\n/* Inputs: consistent, calm, and accessible */\n.input,\nselect,\ntextarea {\n  width: 100%;\n  padding: 0.6rem 0.8rem;\n  border-radius: var(--radius-md);\n  border: 1px solid var(--color-gray-200);\n  background-color: #ffffff;\n  color: var(--color-text);\n  font-size: var(--font-size-sm);\n  transition: border-color var(--transition-base),\n    box-shadow var(--transition-base),\n    background-color var(--transition-base);\n}\n\n.input::placeholder,\ntextarea::placeholder {\n  color: var(--color-gray-400);\n}\n\n.input:focus-visible,\nselect:focus-visible,\ntextarea:focus-visible {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 1px var(--color-primary-soft);\n}\n\n.input[aria-invalid="true"],\ntextarea[aria-invalid="true"] {\n  border-color: var(--color-danger);\n}\n\ntextarea {\n  min-height: 120px;\n  resize: vertical;\n}\n\n/* Basic card: used for products, reviews, info blocks */\n.card {\n  background-color: var(--color-surface);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-xs);\n  padding: var(--space-5);\n  border: 1px solid rgba(23, 42, 28, 0.05);\n  transition: box-shadow var(--transition-base),\n    transform var(--transition-base),\n    border-color var(--transition-base);\n}\n\n.card:hover {\n  box-shadow: var(--shadow-md);\n  transform: translateY(-2px);\n  border-color: rgba(23, 42, 28, 0.08);\n}\n\n.card-header {\n  margin-bottom: var(--space-3);\n}\n\n.card-body {\n  color: var(--color-text-muted);\n}\n\n/* Badge: useful for eco labels (np. "Eko", "Recykling", "Nowość") */\n.badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.15rem 0.6rem;\n  border-radius: var(--radius-xl);\n  font-size: var(--font-size-xs);\n  font-weight: 500;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  background-color: var(--color-primary-soft);\n  color: var(--color-primary-dark);\n}\n\n.badge-neutral {\n  background-color: var(--color-gray-100);\n  color: var(--color-gray-700);\n}\n\n.badge-danger {\n  background-color: rgba(211, 47, 47, 0.08);\n  color: var(--color-danger);\n}\n\n/* Helper for eco-themed image frames */\n.media-rounded {\n  border-radius: var(--radius-md);\n  overflow: hidden;\n}\n\n.media-soft-shadow {\n  box-shadow: var(--shadow-sm);\n}\n\n/* ==========================================================================\n   Motion Preferences\n   ========================================================================== */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    scroll-behavior: auto !important;\n    animation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.001ms !important;\n  }\n}\n