/* ============================================================
   LISTING SKLEPU (archive-product) — Herbarium · Partia 3
   ============================================================ */
.shop-main {
  --ink: #2c2a26; --muted: #7c7a76; --soft: #525252;
  --pink: #c97b8a; --green: #4a7c5f; --green-ink: #2d5a3d;
  --cream: #faf8f5; --cream-2: #f0eae0; --sand: #e8d5c0; --line: #e7e7e7;
  font-family: "Jost", sans-serif; color: var(--ink); background: #fff;
  padding-bottom: 96px;
}
.shop-main .container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
.shop-main *, .shop-main *::before, .shop-main *::after { box-sizing: border-box; }

/* Breadcrumb */
.shop-main .woocommerce-breadcrumb {
  padding: 16px 0 0; margin: 0;
  font-size: 14px; color: var(--soft); text-transform: uppercase; letter-spacing: .01em;
}
.shop-main .woocommerce-breadcrumb a { color: var(--pink); font-weight: 700; text-decoration: none; }
.shop-main .woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* Header */
.shop-header { padding: 24px 0 8px; display: flex; flex-direction: column; gap: 12px; }
.shop-header__title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 30px; line-height: 1.2; margin: 0; color: var(--ink); }
.shop-header__desc { max-width: 1028px; color: var(--soft); font-size: 14px; text-transform: uppercase; line-height: 1.5; }
.shop-header__desc p { margin: 0; }

/* Layout */
.shop-layout { display: grid; grid-template-columns: 286px 1fr; gap: 32px; align-items: flex-start; padding-top: 24px; }

/* Sidebar */
.shop-sidebar { display: flex; flex-direction: column; }
.sidebar-label { margin: 0 0 4px; font-size: 12px; font-weight: 500; text-transform: uppercase; color: #7c7c7c; letter-spacing: .02em; }
.sidebar-all-link { display: block; padding: 12px 0; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #000; text-decoration: underline; }
.sidebar-all-link.is-active { color: #000; }
.sidebar-cat { border-top: 1px solid var(--line); }
.sidebar-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-cat__head a { flex: 1; display: block; padding: 12px 0; font-size: 14px; text-transform: uppercase; color: #000; text-decoration: none; transition: color .15s; }
.sidebar-cat__head a:hover, .sidebar-cat__head a.is-active { color: var(--green-ink); }
.sidebar-cat__toggle { width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; }
.sidebar-cat__toggle:hover { background: var(--cream); }
.sidebar-cat__children { list-style: none; margin: 0; padding: 0 0 8px; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.sidebar-cat__children.is-open { max-height: 600px; }
.sidebar-cat__children li a { display: block; padding: 10px 0 10px 24px; border-left: 1px solid var(--line); font-size: 14px; text-transform: uppercase; color: #000; text-decoration: none; transition: color .15s, border-color .15s; }
.sidebar-cat__children li a:hover, .sidebar-cat__children li a.is-active { color: var(--green-ink); border-color: var(--green); }

/* Products */
.shop-products { min-width: 0; }
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; }
.shop-bar__count { font-size: 12px; font-weight: 500; text-transform: uppercase; color: #7c7c7c; }
.shop-bar__count strong { color: var(--ink); }
.shop-bar__sort { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; color: #7c7c7c; }
.shop-bar__sort select { font-family: "Jost", sans-serif; font-size: 13px; padding: 8px 12px; border: 1px solid var(--cream-2); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }

.shop-products ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
/* zerujemy domyślne floaty/szerokości WooCommerce, by działał grid */
.shop-main .shop-products ul.products::before,
.shop-main .shop-products ul.products::after { content: none; display: none; }
.shop-main .shop-products ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
}

/* Karta produktu (.shop-card) — wspólny arkusz: assets/css/product-card.css */

/* Pagination */
.shop-main .woocommerce-pagination { margin-top: 40px; text-align: center; }
.shop-main .woocommerce-pagination ul { list-style: none; display: inline-flex; gap: 8px; padding: 0; margin: 0; }
.shop-main .woocommerce-pagination a, .shop-main .woocommerce-pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--cream-2); border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px;
}
.shop-main .woocommerce-pagination .current { background: var(--green); color: #fff; border-color: var(--green); }
.shop-main .woocommerce-pagination a:hover { background: var(--cream); }

/* SEO */
.shop-seo { background: #fff; padding: 56px 0 0; }
.shop-seo .container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
.shop-seo__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.shop-seo__block { display: flex; flex-direction: column; gap: 14px; }
.shop-seo__block h2 { font-family: "Playfair Display", serif; font-size: 20px; font-weight: 700; margin: 0; color: #2c2a26; }
.shop-seo__block p { margin: 0; color: #2c2a26; font-size: 16px; line-height: 1.6; }

/* Responsywność */
@media (max-width: 1024px) {
  .shop-products ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; gap: 24px; }
  .shop-seo__cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .shop-products ul.products { grid-template-columns: 1fr 1fr; gap: 20px; }
  /* Pasek filtrów i linia pod licznikiem — na pełną szerokość ekranu.
     Siatka kafelków zostaje 16px od krawędzi (24px .container − 8px). */
  .shop-main .shop-mobile-bar { margin-inline: -24px; }
  .shop-main .shop-bar { margin-inline: -24px; padding-inline: 24px; }
  .shop-main .shop-products ul.products { margin-inline: -8px !important; }
  .shop-main .shop-card__body { padding-inline: 8px; }
  /* dwie kolumny na wąskim ekranie — węższa ramka kafelka, żeby zdjęcie było jak największe */
  .shop-main .shop-card__link { padding: 8px 8px 0; }
  .shop-main .shop-card__media { padding-bottom: 8px; }
  .shop-main .shop-card__dots { margin-top: 16px; padding-left: 8px; }
}
/* main.css wymusza tu jedną kolumnę poniżej 480px — na listingu trzymamy siatkę 2×. */
@media (max-width: 480px) {
  /* main.css:3587 wymusza tu jedną kolumnę przez !important — stąd to samo po naszej stronie */
  .shop-main .shop-products ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .shop-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Mobilny filtr/sort — drawery (port z modliteczki) ── */
.shop-mobile-bar { display: none; border-top: 1px solid var(--cream-2); border-bottom: 1px solid var(--cream-2); background: #fff; margin: 16px 0 24px; }
.shop-mobile-bar__btn { flex: 1; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: "Jost", sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--green-ink); background: transparent; border: 0; cursor: pointer; }
.shop-mobile-bar__btn:first-child { border-right: 1px solid var(--cream-2); }

.shop-filter-drawer { position: fixed; top: 0; right: 0; left: auto; width: 100%; height: 100%; background: #fff; z-index: 1000; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; font-family: "Jost", sans-serif; color: var(--ink); }
.shop-filter-drawer.is-open { transform: translateX(0); }
.shop-filter-drawer__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; opacity: 0; pointer-events: none; transition: opacity .3s; }
.shop-filter-drawer__overlay.is-visible { opacity: 1; pointer-events: auto; }
.shop-filter-drawer__header, .shop-sort-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--cream-2); flex-shrink: 0; }
.shop-filter-drawer__title-btn { height: 48px; display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.shop-filter-drawer__close { width: 56px; height: 48px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: transparent; border: 0; cursor: pointer; color: var(--ink); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.shop-filter-drawer__body { flex: 1; overflow-y: auto; padding: 4px 0; }
.shop-filter-drawer__section-label { padding: 16px 20px 4px; font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--muted); }
.shop-filter-drawer__nav { display: flex; flex-direction: column; padding: 0 16px; }
.shop-filter-drawer__link { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 12px 16px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--ink); text-decoration: none; border-radius: 8px; transition: background .15s; }
.shop-filter-drawer__link:hover { background: var(--cream); }
.shop-filter-drawer__link--active { background: var(--cream-2); }
.shop-filter-drawer__link svg { color: var(--muted); flex-shrink: 0; }

.shop-sort-drawer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; z-index: 1000; border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .3s ease; max-height: 75vh; display: flex; flex-direction: column; box-shadow: 0 -4px 24px rgba(0,0,0,.15); font-family: "Jost", sans-serif; color: var(--ink); }
.shop-sort-drawer.is-open { transform: translateY(0); }
.shop-sort-drawer__title { height: 48px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.shop-sort-drawer__body { padding: 8px 0; overflow-y: auto; }
.shop-sort-drawer__opt { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; font-size: 14px; color: var(--ink); text-decoration: none; }
.shop-sort-drawer__opt:hover { background: var(--cream); }
.shop-sort-drawer__opt--active { background: var(--cream-2); color: var(--green-ink); font-weight: 700; }

@media (max-width: 860px) {
  .shop-sidebar { display: none; }
  .shop-mobile-bar { display: flex; }
  /* sortowanie jest w pasku FILTRUJ/SORTUJ powyżej — w wierszu licznika zostaje sama liczba produktów */
  .shop-main .shop-bar__sort { display: none; }
  /* dokładnie 16px nad i pod licznikiem: zdejmujemy padding .shop-layout i margines .shop-bar */
  .shop-main .shop-bar { border-bottom: 0; margin-inline: -24px; margin-bottom: 0; padding: 16px 0 16px 16px; }
  .shop-main .shop-mobile-bar { margin-bottom: 0; }
  .shop-main .shop-layout { padding-top: 0; }
}