/* Grzybek-PL — współczesny prototyp. Style są osobne od działającej strony. */
:root {
  --red: #477a39;
  --red-dark: #2d6034;
  --red-glow: rgba(42,100,55,.2);
  --green: #91ba5c;
  --dark: #172d24;
  --dark-section: #132d24;
  --cream: #f7f8f3;
  --beige: #edf1e8;
  --font-display: 'Inter',system-ui,sans-serif;
}
html { scroll-behavior: smooth; }
body { background: #f7f8f3; color: #1a3027; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.055em; }
h2 { line-height: 1.06; }
p { color: #506259; }
.container { max-width: 1440px; padding-inline: clamp(24px,4.5vw,72px); }
section { padding-block: clamp(82px,9vw,144px); }
.section-tag { padding-left: 0; color: #437247; font-size: .73rem; letter-spacing: .19em; }
.section-tag::before { display: none; }
.section-dark .section-tag { color: #b7dd89; }

/* Nawigacja przypomina lekką warstwę nad zdjęciem. */
.sticky-header { background: rgba(14,39,29,.53); backdrop-filter: blur(18px); border-color: rgba(255,255,255,.13); }
.sticky-header.scrolled { background: rgba(16,42,31,.96); box-shadow: 0 8px 28px rgba(9,31,19,.13); }
.prototype-topline { padding-block: 7px; background: rgba(4,20,11,.19); color: #d9e8d9; }
.sticky-header .nav-container { min-height: 78px; }
.sticky-header .logo-area::before { width: 38px; height: 38px; border: none; background: #bde17e; color: #15351e; font-size: 1.25rem; }
.sticky-header .logo-text { color: #fff; font-size: 1.5rem; }
.sticky-header .logo-text small { color: #d8e8d9; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.desktop-nav { gap: clamp(12px,1.8vw,28px); }
.desktop-nav a { color: #f4f8f2; font-size: .82rem; font-weight: 700; letter-spacing: .01em; border-bottom: 0; }
.desktop-nav a:hover { color: #bde17e; }
.desktop-nav .btn-allegro-nav { background: #bde17e !important; color: #183923 !important; padding: 13px 19px !important; border-radius: 999px; box-shadow: none; }
.desktop-nav .btn-allegro-nav:hover { background: #d3efaa !important; transform: translateY(-2px); }
.dropdown-content { background: #fff; backdrop-filter: none; border-radius: 14px; }

/* Hero — zdjęcie jest głównym bohaterem, tekst ma własną przestrzeń. */
.hero-section { min-height: 100svh; padding: 0; background-image: url('prototype-assets/forest-hero.webp') !important; background-position: center !important; background-size: cover !important; }
.hero-section::after { background: linear-gradient(90deg,rgba(6,27,17,.78) 0%,rgba(6,27,17,.55) 42%,rgba(6,27,17,.12) 82%),linear-gradient(0deg,rgba(5,23,15,.48),transparent 35%); }
.hero-content-wrapper { min-height: 100svh; justify-content: flex-start; align-items: center; text-align: left; padding-block: 185px 145px; }
.hero-text { width: min(780px,67%); padding: 0; background: transparent; border: 0; backdrop-filter: none; box-shadow: none; text-align: left; }
.prototype-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; color: #d3e9cf; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.prototype-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #c0e77b; box-shadow: 0 0 0 6px rgba(192,231,123,.16); }
.hero-text .hero-tagline { max-width: 10ch; margin: 0 0 26px; color: #fff; font-size: clamp(4.6rem,8.5vw,9rem); line-height: .91; letter-spacing: -.085em; font-weight: 800; }
.hero-text .hero-tagline span { display: block; color: #c0e77b; }
.hero-text p:not(.hero-tagline) { max-width: 48ch; margin: 0 0 34px; color: #e9f0e8; font-size: clamp(1rem,1.4vw,1.2rem); line-height: 1.65; }
.hero-buttons { justify-content: flex-start; gap: 13px; }
.hero-buttons .btn { min-height: 56px; padding-inline: 26px; font-size: .92rem; }
.btn-primary,.btn-small-allegro,.detail-buy-btn,.cookie-banner .cookie-btn-accept { background: #b9df78 !important; color: #173623 !important; box-shadow: none; border-radius: 999px; }
.btn-primary:hover,.btn-small-allegro:hover,.detail-buy-btn:hover { background: #d1eda1 !important; color: #173623 !important; box-shadow: 0 10px 25px rgba(14,41,24,.15); }
.btn-outline-white { border-radius: 999px; }
.prototype-hero-bottom { position: absolute; z-index: 3; bottom: 36px; left: clamp(24px,4.5vw,72px); right: clamp(24px,4.5vw,72px); display: flex; justify-content: space-between; gap: 16px; color: #e7eee5; font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.prototype-hero-bottom i { margin-left: 10px; animation: protoArrow 2.3s ease-in-out infinite; }
@keyframes protoArrow { 50% { transform: translateY(5px); } }

/* Sekcje strony głównej mają nowy rytm i dużo przestrzeni. */
.allegro-premium { margin: -38px 0 30px; padding: 30px 34px; border: 1px solid #e0e8dd; border-radius: 22px; box-shadow: 0 18px 45px rgba(15,49,28,.1); }
.allegro-premium h3 { font-size: clamp(1.35rem,2.3vw,2.2rem); }
.allegro-premium p { margin: 3px 0 0; }
.allegro-premium .btn { background: #24583c !important; color: #fff !important; }
.allegro-premium .btn:hover { background: #173e2b !important; }
#homePage > .container > section { padding-block: 115px 130px; }
#homePage > .container > section > .section-tag { margin-bottom: 28px; }
#homePage .overlap-grid { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); gap: clamp(48px,7vw,110px); align-items: center; }
#homePage .overlap-image { width: 100%; height: min(600px,47vw); min-width: 0; border-radius: 26px; overflow: hidden; box-shadow: none; }
#homePage .overlap-image img { width: 100%; height: 100%; object-fit: cover; }
#homePage .overlap-card { margin: 0; padding: 0; min-width: 0; width: 100%; background: transparent; border-radius: 0; box-shadow: none; }
#homePage .overlap-card h2 { max-width: 15ch; margin-bottom: 25px; color: #183a29; font-size: clamp(2.5rem,4.2vw,5rem); line-height: 1.05; }
#homePage .overlap-card p { max-width: 55ch; color: #53675a; font-size: 1.05rem; line-height: 1.78; }
.prototype-text-link { color: #245c3a; border-color: #98bb77; }

.section-dark { background: #123324; }
.section-dark > .container > h2 { max-width: 14ch; margin: 0 0 18px; color: #fff; font-size: clamp(3.1rem,5.7vw,6.2rem); }
.prototype-heading-dot { color: #b9df78; }
.prototype-section-lead { max-width: 640px; margin-bottom: 36px; color: #c6d8c9 !important; }
#homeCategoryGrid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
#homeCategoryGrid .cat-card-premium { min-height: 410px; border: 0; border-radius: 20px; box-shadow: none; }
#homeCategoryGrid .cat-card-img { background: #274b35; }
#homeCategoryGrid .cat-card-img::after { background: linear-gradient(0deg,rgba(3,23,11,.9),rgba(3,23,11,.08) 72%); }
#homeCategoryGrid .cat-card-body { padding: 30px; }
#homeCategoryGrid .cat-card-body h3 { font-size: clamp(1.35rem,2.1vw,1.95rem); }
#homeCategoryGrid .cat-card-body p { color: #dce8da !important; }
#homeCategoryGrid .cat-card-body::after { content: 'ODKRYJ KATEGORIĘ  ↗'; color: #b9df78; font-size: .68rem; letter-spacing: .14em; }
#homeCategoryGrid .cat-card-premium:hover { transform: translateY(-7px); }

.prototype-forest-break { min-height: 650px; background: linear-gradient(90deg,rgba(8,35,20,.78),rgba(8,35,20,.18)),url('prototype-assets/story-mushrooms.webp') center 46% / cover; }
.prototype-forest-content h2 { font-size: clamp(3rem,6vw,6.7rem); }
.prototype-forest-content p { color: #edf4eb; font-size: 1.1rem; }
.prototype-forest-content .btn-primary { background: #b9df78 !important; }

#homePage > section:nth-of-type(4) { background: #eef3e9 !important; }
#homePage > section:nth-of-type(4) h2 { max-width: 15ch; font-size: clamp(2.5rem,4.3vw,4.8rem); }
.features-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 36px; }
.feature-item { display: flex; align-items: flex-start; text-align: left; gap: 18px; padding: 32px; border: 1px solid #dae5d8; border-radius: 20px; box-shadow: none; }
.feature-item i { font-size: 2rem !important; color: #4d7e3a !important; }
.feature-item h4 { font-size: 1.22rem; color: #183c2b; }
.feature-item p { color: #607165; }
.reviews-header h2,#faqSection h2 { font-size: clamp(2.5rem,4vw,4.5rem); }
.review-card,.faq-item { border-radius: 16px; border-color: #dce7db; }
.review-card { border-left: 0; border-top: 4px solid #81b15c; }
.gallery-tile { border-radius: 16px; }

/* Katalog zachowuje oryginalne produkty, ma nową oprawę. */
#categoryPage > section:first-child { padding-top: 170px !important; }
#categoryPage .overlap-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 0; align-items: center; background: #e9efe6; border-radius: 24px; overflow: hidden; }
#categoryPage .overlap-image { width: 100%; height: 510px; min-width: 0; border-radius: 0; box-shadow: none; }
#categoryPage .overlap-card { width: 100%; margin: 0; padding: clamp(30px,4vw,70px); min-width: 0; background: transparent; box-shadow: none; border-radius: 0; }
#categoryPage .cat-title { font-size: clamp(2.5rem,4.1vw,4.8rem); }
#categoryPage #catDesc { color: #506458; }
.prototype-catalog-tools { margin-top: 70px; border-color: #d3dfd1; }
.prototype-catalog-tools h2 { font-size: clamp(2.5rem,3.5vw,4rem); }
.prototype-search-label input { border-color: #c5d7c4; border-radius: 999px; }
.prototype-search-row .btn { border-radius: 999px; }
#productGrid .cat-card-premium { border: 1px solid #dde8dc; border-radius: 17px; box-shadow: 0 4px 18px rgba(16,44,25,.05); }
#productGrid .cat-card-img { height: 225px; }
#productGrid .cat-card-body { padding: 22px; }
#productGrid .btn-small-allegro { border-radius: 999px; }
.product-detail-panel,.category-modal { border-radius: 22px; }
footer { background: #0d271b; }

/* Bot i stany interakcji używają tej samej palety. */
.grzybekbot-fab { border-color: #4a7940; }
.grzybekbot-header,.grzybekbot-msg.user .grzybekbot-bubble { background: #275a3d; }
.grzybekbot-suggestion { color: #275a3d; border-color: #8eba88; }
.grzybekbot-suggestion:hover { background: #275a3d; border-color: #275a3d; }
.grzybekbot-action { background: #275a3d; }
.grzybekbot-action.secondary { color: #275a3d; border-color: #8eba88; }

@media (max-width: 1050px) {
  .desktop-nav { gap: 12px; }
  .desktop-nav a { font-size: .75rem; }
  #homeCategoryGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .features-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .container { padding-inline: 20px !important; }
  section { padding-block: 72px; }
  .sticky-header { background: rgba(13,38,25,.93) !important; backdrop-filter: none; }
  .sticky-header .nav-container { min-height: 68px !important; }
  .sticky-header .logo-area::before { width: 33px; height: 33px; }
  .sticky-header .logo-text { font-size: 1.15rem; }
  .sticky-header .menu-toggle { display: flex !important; color: #fff; }
  .mobile-menu { background: #f7f8f3; }
  .hero-section { min-height: 100svh !important; padding: 80px 0 55px !important; background-position: 56% center !important; }
  .hero-section::after { background: linear-gradient(90deg,rgba(6,27,17,.8),rgba(6,27,17,.4)),linear-gradient(0deg,rgba(5,23,15,.46),transparent 60%); }
  .hero-content-wrapper { min-height: calc(100svh - 135px); align-items: center !important; justify-content: flex-start; text-align: left !important; padding: 0 !important; }
  .hero-text { width: 100%; max-width: 560px; padding: 0; background: none; text-align: left; }
  .prototype-eyebrow { font-size: .66rem; margin-bottom: 20px; }
  .hero-text .hero-tagline { max-width: 9ch; margin: 0 0 22px; font-size: clamp(3.6rem,13vw,5.8rem); }
  .hero-text p:not(.hero-tagline) { max-width: 35ch; font-size: .98rem; line-height: 1.55; }
  .hero-buttons { align-items: flex-start; }
  .hero-buttons .btn { width: auto; min-height: 50px; padding-inline: 20px; }
  .prototype-hero-bottom { bottom: 22px; left: 20px; right: 20px; font-size: .58rem; }
  .prototype-hero-bottom span:last-child { display: none; }
  .allegro-premium { margin: -22px 0 0 !important; padding: 24px !important; border-radius: 16px; }
  #homePage > .container > section { padding-block: 80px 92px; }
  #homePage .overlap-grid { display: flex; flex-direction: column; gap: 25px; }
  #homePage .overlap-image { height: min(72vw,400px) !important; border-radius: 18px; }
  #homePage .overlap-card { width: 100%; margin: 0 !important; padding: 0 !important; }
  #homePage .overlap-card h2 { font-size: clamp(2.3rem,9vw,3.8rem) !important; }
  .section-dark > .container > h2 { font-size: clamp(2.6rem,10vw,4rem); }
  #homeCategoryGrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  #homeCategoryGrid .cat-card-premium { min-height: 265px; border-radius: 15px; }
  #homeCategoryGrid .cat-card-body { padding: 16px !important; }
  #homeCategoryGrid .cat-card-body h3 { font-size: 1.1rem !important; }
  #homeCategoryGrid .cat-card-body p { font-size: .74rem; }
  #homeCategoryGrid .cat-card-body::after { font-size: .55rem; }
  .prototype-forest-break { min-height: 470px; }
  .prototype-forest-content h2 { font-size: clamp(2.6rem,10vw,4.4rem); }
  .feature-item { padding: 23px; }
  #categoryPage > section:first-child { padding-top: 92px !important; }
  #categoryPage .overlap-grid { display: flex; flex-direction: column; border-radius: 18px; }
  #categoryPage .overlap-image { width: 100%; height: 220px !important; border-radius: 0 !important; }
  #categoryPage .overlap-card { width: 100%; margin: 0 !important; padding: 25px !important; }
  #categoryPage .cat-title { font-size: clamp(2rem,8vw,3rem) !important; }
  .prototype-catalog-tools { margin-top: 42px; }
  #productGrid .cat-card-premium { grid-template-columns: minmax(105px,32%) minmax(0,1fr); }
  #productGrid .cat-card-img { height: 100% !important; min-height: 145px; }
  .grzybekbot-fab { bottom: 16px !important; }
  .bottom-nav-mobile { display: none !important; }
  footer { padding-bottom: 42px !important; }
}
@media (max-width: 420px) {
  .hero-text .hero-tagline { font-size: clamp(3.3rem,13vw,4.2rem); }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  #homeCategoryGrid .cat-card-premium { min-height: 230px; }
  #homeCategoryGrid .cat-card-body h3 { font-size: .98rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .prototype-hero-bottom i { animation: none; }
}
