/*
 * crescere-shop.css — WooCommerce product loop enhancements
 * Enqueued separately to bypass Hostinger's style.css server cache.
 */

/* ── Responsive product grid ─────────────────────────────────────────────
   2 cols from smallest phone (standard mobile shop UX),
   3 cols from 640px on desktop.                                          */
.woocommerce ul.products,
ul.products {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 640px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── Kill clearfix pseudo-elements that become ghost grid items ──────────
   WooCommerce adds ::before { content:" "; display:table } as a float
   clearfix. In CSS Grid these become actual grid items, displacing products
   into column 2. Must be display:none to remove them from grid flow.     */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
  display: none !important;
}

/* ── Product loop: position wrapper for emoji overlay ─────────────────── */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  position: relative !important;
}

/* ── Products without a real image ──────────────────────────────────────── */
/* Hide the grey WooCommerce default placeholder */
.product-no-image .woocommerce-loop-product__link img {
  opacity: 0 !important;
}

/* Show a large category emoji centred over the tinted background */
.product-no-image .woocommerce-loop-product__link::after {
  content: '🛍️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.75rem;
  opacity: 0.45;
  pointer-events: none;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));
}

/* Per-category emoji */
.product-no-image.product_cat-materialy-cyfrowe   .woocommerce-loop-product__link::after { content: '📄'; }
.product-no-image.product_cat-ksiazki             .woocommerce-loop-product__link::after { content: '📚'; }
.product-no-image.product_cat-zabawki             .woocommerce-loop-product__link::after { content: '🧸'; }
.product-no-image.product_cat-sety-materialow     .woocommerce-loop-product__link::after { content: '🎁'; }
.product-no-image.product_cat-mieszanki-do-zabawy .woocommerce-loop-product__link::after { content: '🧪'; }
.product-no-image.product_cat-sety-doswiadczen    .woocommerce-loop-product__link::after { content: '🔬'; }
.product-no-image.product_cat-kalendarze-adwentowe .woocommerce-loop-product__link::after { content: '🎄'; }

/* ── Per-category image area background tints ───────────────────────────── */
.product_cat-materialy-cyfrowe   .woocommerce-loop-product__link { background: linear-gradient(135deg, rgba(196,165,222,0.18), rgba(196,165,222,0.07)) !important; }
.product_cat-ksiazki             .woocommerce-loop-product__link { background: linear-gradient(135deg, rgba(168,218,220,0.25), rgba(168,218,220,0.08)) !important; }
.product_cat-zabawki             .woocommerce-loop-product__link { background: linear-gradient(135deg, rgba(255,213,79,0.18),  rgba(255,213,79,0.05))  !important; }
.product_cat-sety-materialow     .woocommerce-loop-product__link { background: linear-gradient(135deg, rgba(255,158,128,0.18), rgba(255,158,128,0.05)) !important; }
.product_cat-mieszanki-do-zabawy .woocommerce-loop-product__link { background: linear-gradient(135deg, rgba(168,218,220,0.25), rgba(61,139,111,0.07))  !important; }
.product_cat-sety-doswiadczen    .woocommerce-loop-product__link { background: linear-gradient(135deg, rgba(61,139,111,0.13),  rgba(61,139,111,0.04))  !important; }
.product_cat-kalendarze-adwentowe .woocommerce-loop-product__link { background: linear-gradient(135deg, rgba(255,213,79,0.2),  rgba(255,158,128,0.09)) !important; }

/* ── Category badge — absolute overlay on product image (bottom-left) ─────
   The badge lives inside .woocommerce-loop-product__link which has
   position:relative and overflow:hidden — so the badge stays within bounds. */
.product-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: 9999px;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Absolute overlay — positioned top-left corner of the image */
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  margin: 0;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  /* Solid enough to be readable over any product photo */
  background: rgba(44, 95, 77, 0.90);
  color: #fff;
}
/* Per-category colors — opaque so they're readable over images */
.product-cat-badge--materialy-cyfrowe   { background: rgba(107, 53, 163, 0.90); }
.product-cat-badge--ksiazki             { background: rgba(29, 105, 106, 0.90); }
.product-cat-badge--zabawki             { background: rgba(160, 118, 0,   0.90); }
.product-cat-badge--sety-materialow     { background: rgba(176, 62, 32,   0.90); }
.product-cat-badge--mieszanki-do-zabawy { background: rgba(29, 105, 106, 0.90); }
.product-cat-badge--sety-doswiadczen    { background: rgba(44,  95, 77,   0.90); }
.product-cat-badge--kalendarze-adwentowe { background: rgba(134, 96, 0,   0.90); }

/* ── Short description in product loop ─────────────────────────────────── */
.product-loop-desc {
  font-size: 0.8rem;
  color: rgba(74,74,74,0.65);
  line-height: 1.5;
  padding: 0 1.25rem;
  margin: 0 0 0.25rem;
  flex-grow: 1;
}

/* Push price to bottom of card */
.woocommerce ul.products li.product .price {
  margin-top: auto;
}

/* Fine-tune title spacing */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin-top: 0.15rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT FIXES v1.1 — missing declarations causing page to break
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Section vertical padding (missing from style.css) ──────────────── */
.section-white,
.section-cream {
  padding: 4rem 0;
}
@media (min-width: 768px) {
  .section-white,
  .section-cream {
    padding: 5.5rem 0;
  }
}

/* ── 2. Section intro (centred heading + subtitle block) ─────────────── */
.section-intro {
  text-align: center;
  margin-bottom: 2.5rem;
}
.section-intro p {
  font-size: 1.05rem;
  color: rgba(74, 74, 74, 0.75);
  max-width: 40rem;
  margin: 0.75rem auto 0;
  line-height: 1.7;
}

/* ── 3. Section CTA (centred button row below product grids) ─────────── */
.section-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ── 4. Lavender-sky background (digital promo) ──────────────────────── */
.section-lavender-sky {
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(196,165,222,0.12), rgba(168,218,220,0.15));
}
@media (min-width: 768px) {
  .section-lavender-sky { padding: 5.5rem 0; }
}

/* ── 5. Advent calendar seasonal section ─────────────────────────────── */
.section-advent {
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(255,213,79,0.12), rgba(255,158,128,0.08));
}
@media (min-width: 768px) {
  .section-advent { padding: 5.5rem 0; }
}

/* ── 6. Shop about section ───────────────────────────────────────────── */
.shop-about-section {
  padding: 4rem 0;
  background: #fff;
}
@media (min-width: 768px) {
  .shop-about-section { padding: 5.5rem 0; }
}

/* ── 7. Shop about grid — CRITICAL FIX: add missing display:grid ─────── */
.shop-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .shop-about-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }
}

/* ── 8. Trust features — CRITICAL FIX: add missing display:flex ──────── */
.trust-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── 9. Trust feature icon ───────────────────────────────────────────── */
.trust-feature-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

/* ── 10. Shop about text spacing ─────────────────────────────────────── */
.shop-about-text h2 { margin-bottom: 1.25rem; }
.shop-about-text p:last-of-type { margin-bottom: 1.75rem; }

/* ── 11. Hero visual icon ────────────────────────────────────────────── */
.hero-visual-icon {
  font-size: 4rem;
  line-height: 1;
}

/* ── 12. Woo hero — reduce excessive top padding on mobile ───────────── */
@media (max-width: 767px) {
  .woo-hero {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ── 13. Filter tabs — ensure horizontal scroll on narrow viewports ─── */
.shop-filter-bar .container {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ── Navigation dropdown (category submenu) ──────────────────────────────── */
@media (min-width: 768px) {
  /* Parent item: relative so dropdown is positioned under it */
  .nav-menu li.menu-item-has-children {
    position: relative;
  }

  /* Dropdown indicator arrow */
  .nav-menu li.menu-item-has-children > a::after {
    content: ' ▾';
    font-size: 0.65em;
    opacity: 0.6;
    margin-left: 0.1rem;
  }

  /* Hidden by default */
  .nav-menu li.menu-item-has-children > ul.sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(44,95,77,0.13), 0 2px 8px rgba(0,0,0,0.06);
    padding: 0.5rem;
    list-style: none;
    z-index: 200;
    border: 1px solid rgba(61,139,111,0.09);
  }

  /* Show on hover — parent li OR the submenu itself (prevents flicker) */
  .nav-menu li.menu-item-has-children:hover > ul.sub-menu,
  .nav-menu li.menu-item-has-children > ul.sub-menu:hover {
    display: block;
  }

  /* Dropdown item links */
  .nav-menu li.menu-item-has-children ul.sub-menu li a {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--forest, #2C5F4D);
    white-space: nowrap;
    gap: 0.4rem;
  }

  .nav-menu li.menu-item-has-children ul.sub-menu li a:hover {
    background: rgba(61,139,111,0.08);
    color: var(--sage, #3D8B6F);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT FIXES v1.2 — category strip, animation removal, mobile category fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Category strip — horizontal scrollable row in sticky header ─────── */
.category-strip {
  background: rgba(250,247,242,0.95);
  border-top: 1px solid rgba(61,139,111,0.08);
}

.category-strip-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-strip-tabs::-webkit-scrollbar { display: none; }

.cat-strip-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Quicksand', system-ui, sans-serif;
  color: var(--charcoal, #4A4A4A);
  background: rgba(61,139,111,0.06);
  border: 1.5px solid rgba(61,139,111,0.1);
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  flex-shrink: 0;
}
.cat-strip-tab span { opacity: 0.9; }
.cat-strip-tab:hover {
  background: rgba(61,139,111,0.14);
  color: var(--forest, #2C5F4D);
  border-color: rgba(61,139,111,0.3);
}
.cat-strip-tab.is-active {
  background: var(--sage, #3D8B6F);
  color: #fff;
  border-color: var(--sage, #3D8B6F);
}
.cat-strip-tab.is-active:hover {
  background: var(--forest, #2C5F4D);
  border-color: var(--forest, #2C5F4D);
  color: #fff;
}

/* Adjust shop-filter-bar sticky position now that header is taller */
.shop-filter-bar {
  top: 115px !important;
}
@media (min-width: 768px) {
  .shop-filter-bar { top: 110px !important; }
}

/* ── Remove hero visual animations (ugly/non-deterministic) ──────────── */
.shop-visual-ring,
.shop-visual-ring-1,
.shop-visual-ring-2,
.shop-visual-center,
.shop-floating-item,
.shop-item-1,
.shop-item-2,
.shop-item-3,
.shop-item-4,
.bg-decor {
  animation: none !important;
}

/* Make the static floating items look nice without animation */
.shop-floating-item {
  box-shadow: 0 2px 12px rgba(44,95,77,0.12) !important;
}

/* ── Homepage category cards — fix text display on mobile ────────────── */
.cat-label {
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}
@media (max-width: 479px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.625rem !important;
  }
  .cat-card {
    padding: 0.875rem 0.5rem !important;
    gap: 0.4rem !important;
    border-radius: 1rem !important;
  }
  .cat-icon { font-size: 1.75rem !important; }
  .cat-label { font-size: 0.7rem !important; }
}

/* ── Hide nav dropdown arrow (categories now in strip, not dropdown) ──── */
.nav-menu li.menu-item-has-children > a::after {
  display: none !important;
}
.nav-menu li.menu-item-has-children > ul.sub-menu {
  display: none !important;
}

/* ── Badge as link — remove default link underline ───────────────────── */
a.badge {
  text-decoration: none;
  cursor: pointer;
}
a.badge:hover {
  background: rgba(255,255,255,0.95);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(44,95,77,0.15);
}

/* ── Shop filter bar is now gone — remove sticky offset leftovers ─────── */

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP HERO FIX v1.4 — H1 za duże, trust signals nie mieszczą się w rzędzie,
   za duże paddingi hero
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* ── Hero: zmniejsz padding żeby hero mieścił się w viewporcie ──────── */
  .front-hero {
    padding-top: 4rem !important;     /* był 8rem = 128px */
    padding-bottom: 5rem !important;  /* był 12rem = 192px */
  }

  /* ── H1: 60px → 44px żeby linie się nie zawijały (były 4, mają być 2) ─ */
  .front-hero h1 {
    font-size: 2.75rem !important;   /* 44px — fits "Materiały wspierające" w 1 linię */
    line-height: 1.2 !important;
  }

  /* ── Trust signals: zmniejsz gap by wszystkie 3 mieściły się w 1 rzędzie */
  /* Bez zmian: 180+152+194+2×16px = 558px > 552px (kolumna) → zawijają!   */
  /* Z gap=8px: 526+2×8 = 542px < 552px → 1 rząd ✅                        */
  .trust-signals {
    gap: 0.5rem !important;
  }

  /* ── Usuń nadpisywanie mobilnych styli trustBadge na desktop ─────────── */
  .trust-badge {
    flex: 0 0 auto !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE COMPACT v1.3 — hero & sekcje: drastyczna redukcja paddingów,
   trust-signals 2 w rzędzie, H1/desc mniejsze na telefonie
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Hero: drastycznie mniejszy padding (był 80px/128px!) ──────────── */
  .front-hero {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* ── Badge: zmniejszony font i padding, żeby mieścił się w 1 linii ── */
  .front-hero a.badge {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* ── H1: mniejszy i ciaśniejszy ────────────────────────────────────── */
  .front-hero h1 {
    font-size: 1.625rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.625rem !important;
  }

  /* ── Hero opis: mniejszy font, mniejszy odstęp ──────────────────────── */
  .front-hero .hero-desc {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0.75rem !important;
  }

  /* ── Trust signals: 2 w rzędzie zamiast 3 w kolumnie ──────────────── */
  .trust-signals {
    gap: 0.375rem !important;
    margin-bottom: 0.75rem !important;
  }
  .trust-badge {
    flex: 1 1 calc(50% - 0.2rem) !important;
    font-size: 0.7rem !important;
    padding: 0.3rem 0.5rem !important;
    gap: 0.25rem !important;
  }
  .badge-icon {
    font-size: 0.85rem !important;
  }

  /* ── CTA przycisk: mniejszy na telefonie ───────────────────────────── */
  .front-hero .btn-primary {
    font-size: 0.9rem !important;
    padding: 0.6rem 1.25rem !important;
  }

  /* ── Sekcje: mniejszy padding (były 64px = 4rem z każdej strony!) ─── */
  .section-white,
  .section-cream,
  .section-lavender-sky,
  .section-advent,
  .shop-about-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .section-categories {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* ── Section intro: mniejszy margines ──────────────────────────────── */
  .section-intro {
    margin-bottom: 1.5rem !important;
  }
  .section-intro p {
    font-size: 0.875rem !important;
  }

  /* ── Section heading ────────────────────────────────────────────────── */
  .section-heading {
    font-size: 1.375rem !important;
  }

  /* ── Section CTA ────────────────────────────────────────────────────── */
  .section-cta {
    margin-top: 1.5rem !important;
  }
}

/* ── Product cards na małych telefonach: kompaktowe ────────────────────── */
@media (max-width: 479px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }
  .product-loop-desc {
    font-size: 0.7rem !important;
    padding: 0 0.75rem !important;
  }
  .product-cat-badge {
    font-size: 0.6rem !important;
    padding: 0.1rem 0.35rem !important;
    gap: 0.2rem !important;
    top: 6px !important;
    left: 6px !important;
    max-width: calc(100% - 12px) !important;
  }
  /* Emoji overlay na produktach bez obrazka — mniejsze na wąskich kartach */
  .product-no-image .woocommerce-loop-product__link::after {
    font-size: 1.75rem !important;
  }
  .woocommerce ul.products li.product .price {
    font-size: 0.85rem !important;
    padding: 0 0.75rem !important;
  }
  .woocommerce ul.products li.product .button {
    font-size: 0.72rem !important;
    padding: 0.5rem 0.5rem !important;
    margin: 0.5rem 0.75rem 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET FIX v1.5 — 768px-1023px: hero-grid kolapsuje do 1 kolumny.
   Blok musi być PO v1.4 (min-width: 768px) żeby kaskada działała poprawnie.
   Ilustracja ukryta < 1024px przez style.css → 2-col grid = błąd na tablecie.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   HERO ILLUSTRATION FIX v1.6 — ukryj amatorską emoji-ilustrację na WSZYSTKICH
   viewportach, hero jednokolumnowy z wycentrowaną treścią.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ukryj ilustrację z emoji w kółkach — wygląda amatorsko na każdym ekranie */
.hero-illustration {
  display: none !important;
}

/* Hero: zawsze jednokolumnowy po usunięciu ilustracji */
.hero-grid {
  grid-template-columns: 1fr !important;
  max-width: 680px;
}

/* Na desktop: wyśrodkuj treść hero */
@media (min-width: 1024px) {
  .front-hero .container {
    display: flex;
    justify-content: center;
  }
  .hero-grid {
    width: 100%;
  }
  .hero-content {
    text-align: center;
  }
  .front-hero .hero-desc {
    text-align: center;
  }
  .trust-signals {
    justify-content: center !important;
  }
  .cta-group {
    justify-content: center !important;
    display: flex;
  }
  .front-hero a.badge {
    display: inline-flex;
    margin: 0 auto 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Grid do 1 kolumny — ilustracja i tak jest display:none */
  .hero-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-content {
    text-align: center;
  }
  .front-hero .hero-desc {
    text-align: center;
  }
  .trust-signals {
    justify-content: center !important;
  }
  .cta-group {
    justify-content: center !important;
    display: flex;
  }
  .front-hero {
    padding-top: 3rem !important;
    padding-bottom: 3.5rem !important;
  }
  .front-hero h1 {
    font-size: 2.25rem !important;   /* 36px — 2 linie w pełnej szerokości */
    line-height: 1.2 !important;
  }
  /* Trust signals — pełna szerokość, 3 badges mieszczą się w 1 rzędzie */
  .trust-signals {
    gap: 0.625rem !important;
  }
  .trust-badge {
    flex: 0 0 auto !important;
    font-size: 0.85rem !important;
    padding: 0.45rem 0.875rem !important;
  }
  /* Sekcje: średnie paddingi (między mobilnym 2.5rem a desktopowym 5.5rem) */
  .section-white,
  .section-cream,
  .section-lavender-sky,
  .section-advent,
  .shop-about-section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE PRODUCT IMAGE FIX v1.5 — WooCommerce sets width:48% on .images and
   .summary via woocommerce-layout.css. Inside our grid (1fr 1fr), 48% of a
   552px column = 265px. Override to 100% so grid columns control the widths.
   ═══════════════════════════════════════════════════════════════════════════ */
.woocommerce div.product div.images,
.woocommerce div.product div.summary.entry-summary {
  width: 100% !important;
  float: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE v1.6 — FAQ accordion + footer shop nav
   ═══════════════════════════════════════════════════════════════════════════ */

/* FAQ accordion */
.contact-faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.faq-item {
  background: #fff;
  border: 1px solid rgba(61,139,111,0.15);
  border-radius: 0.75rem;
  overflow: hidden;
}
.faq-item summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--dark);
  transition: background 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--sage);
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { background: rgba(61,139,111,0.04); }
.faq-item p {
  margin: 0;
  padding: 0 1.25rem 1rem;
  font-size: 0.9rem;
  color: rgba(74,74,74,0.8);
  line-height: 1.6;
}
.faq-item a { color: var(--sage); }

/* Footer shop nav links */
.footer-shop-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.footer-shop-links a {
  color: rgba(74,74,74,0.7);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}
.footer-shop-links a:hover { color: var(--sage); }

/* Header: hide nav-menu entirely (e-commerce uses category strip as primary nav) */
.nav-menu { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN FIXES v1.7
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Category strip — cleaner, bigger, readable */
.category-strip {
  background: #fff !important;
  border-top: 1px solid rgba(61,139,111,0.12) !important;
  border-bottom: 1px solid rgba(61,139,111,0.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}
.category-strip-tabs {
  gap: 0.375rem !important;
  padding: 0.625rem 0 !important;
  align-items: center;
}
.cat-strip-tab {
  padding: 0.45rem 1.1rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: 1.5px solid rgba(61,139,111,0.18) !important;
  color: #3a3a3a !important;
  letter-spacing: 0;
}
.cat-strip-tab:hover {
  background: rgba(61,139,111,0.08) !important;
  border-color: rgba(61,139,111,0.35) !important;
  color: var(--forest) !important;
}
.cat-strip-tab.is-active {
  background: var(--forest, #2C5F4D) !important;
  color: #fff !important;
  border-color: var(--forest, #2C5F4D) !important;
  box-shadow: 0 2px 8px rgba(44,95,77,0.25) !important;
}

/* 2. Footer shop links — white text on dark background */
.footer-shop-links a {
  color: rgba(255,255,255,0.65) !important;
}
.footer-shop-links a:hover {
  color: rgba(255,255,255,0.95) !important;
}
.footer-personal h4 {
  color: rgba(255,255,255,0.9) !important;
}

/* 3. WooCommerce buttons — fully rounded to match theme */
.woocommerce #place_order,
.woocommerce button.button,
.woocommerce input[type="submit"],
.woocommerce a.button,
.woocommerce .checkout-button,
.woocommerce .cart_totals .checkout-button {
  border-radius: 2rem !important;
}
.woocommerce #place_order {
  border-radius: 2rem !important;
  padding: 1rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

/* 4. Hero — no badge, clean centered layout */
.front-hero .hero-content {
  text-align: center;
}

/* Hero desc — centered, limited width for clean single/double line wrap */
.front-hero .hero-desc {
  text-align: center !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WOOCOMMERCE BLOCKS v1.7.2 — button & input consistency
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kupuję i płacę — place order button */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
  border-radius: 2rem !important;
  background-color: var(--coral, #FF9E80) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 1rem 2.5rem !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(255,158,128,0.35) !important;
  transition: background 0.2s, transform 0.15s !important;
}
.wc-block-components-checkout-place-order-button:hover {
  background-color: #f08060 !important;
  transform: translateY(-1px) !important;
}

/* Cart — Przejdź do płatności */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
  border-radius: 2rem !important;
}

/* Checkout form inputs — match theme rounded style */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea textarea,
.wc-block-components-text-input,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout select {
  border-radius: 0.75rem !important;
  border-color: rgba(61,139,111,0.2) !important;
}
.wc-block-components-text-input:focus-within,
.wc-block-components-text-input input:focus {
  border-color: var(--sage, #3D8B6F) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(61,139,111,0.12) !important;
}

/* Cart "Przejdź do płatności" link → styled as button */
.wc-block-cart__submit-container a.wc-block-cart__submit-button,
a.wc-block-cart__submit-button {
  border-radius: 2rem !important;
  background: var(--coral, #FF9E80) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 0.875rem 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(255,158,128,0.3) !important;
}
a.wc-block-cart__submit-button:hover {
  background: #f08060 !important;
  color: #fff !important;
}