/* =========================================================================
   JELO — integracja WordPress / WooCommerce z systemem designu store.css
   Ładowane PO store.css. Mapuje markup WooCommerce i WP na klasy designu.
   Zawiera też poprawki responsywne (mobile/tablet) i offset admin bara.
   ========================================================================= */

/* ── zmienne lokalne ─────────────────────────────────────────────── */
:root {
  --header-h: 96px;          /* topbar 36 + header 60 */
  --sticky-offset: 108px;    /* header + margines */
}
body.admin-bar { --sticky-offset: 140px; }
@media (max-width: 920px) { :root { --sticky-offset: 96px; } body.admin-bar { --sticky-offset: 128px; } }

/* off-canvas (drawer/megamenu) nie może rozpychać dokumentu w poziomie */
html { overflow-x: hidden; }

/* kotwice ze sticky headerem */
[id] { scroll-margin-top: var(--sticky-offset); }

/* zablokowany scroll przy otwartym drawerze */
body.jelo-locked { overflow: hidden; }

/* admin bar nie może zasłaniać sticky headera */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ── siatka treści WP ────────────────────────────────────────────── */
.entry-content { max-width: 76ch; }
/* strony WooCommerce (koszyk, zamówienie, konto) potrzebują pełnej szerokości */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content { max-width: none; }
.entry-content h2 { margin: 32px 0 12px; }
.entry-content h3 { margin: 24px 0 10px; }
.entry-content p { margin-bottom: 12px; }
.entry-content ul, .entry-content ol { list-style: disc; padding-left: 22px; margin-bottom: 12px; }
.entry-content ol { list-style: decimal; }
.entry-content a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content blockquote {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 18px;
  margin: 18px 0; color: var(--muted); font-size: 15px;
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── WooCommerce: reset wrapperów motywu ────────────────────────── */
.woocommerce .content-area, .woocommerce-page .content-area { width: auto; }
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-lg); margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; content: none; }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--surface); border: 1px solid var(--border); border-radius: 0;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover { border-color: color-mix(in oklch, var(--fg) 32%, var(--border)); box-shadow: var(--shadow); }
.woocommerce ul.products li.product a img { margin: 0; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; background: var(--surface-2); padding: 18px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600; line-height: 1.35;
  padding: 14px 18px 0; color: var(--fg);
}
.woocommerce ul.products li.product .price { font-family: var(--font-mono); font-size: 20px; font-weight: 400; color: var(--fg); padding: 8px 18px 0; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-size: 13px; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--sale); }
.woocommerce ul.products li.product .button { margin: 14px 18px 18px; }
.woocommerce ul.products li.product .onsale { display: none; }

/* ── WooCommerce: przyciski ─────────────────────────────────────── */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .wc-block-components-button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px !important; border-radius: 0 !important; border: 1px solid transparent !important;
  background: var(--dark); color: #fff !important; font-family: var(--font-body) !important;
  font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.2 !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
  min-height: 0 !important;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover { background: #000 !important; color: #fff !important; }
.woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #place_order, .single_add_to_cart_button {
  background: var(--accent) !important; color: #fff !important;
}
.woocommerce .button.alt:hover, .woocommerce #place_order:hover, .single_add_to_cart_button:hover {
  background: var(--accent-ink) !important;
}
.woocommerce .button.secondary, .woocommerce .button.wc-backward { background: var(--surface) !important; color: var(--fg) !important; border-color: var(--border) !important; }
.woocommerce .button.secondary:hover { border-color: var(--fg) !important; }
.woocommerce .button.is-loading { opacity: .65; pointer-events: none; }
.woocommerce .button:disabled, .woocommerce .button.is-disabled { opacity: .5 !important; pointer-events: none; }

/* ── WooCommerce: formularze ────────────────────────────────────── */
.woocommerce form .form-row { padding: 0; margin: 0 0 var(--gap-md); }
.woocommerce form .form-row label { font-size: 13px; font-weight: 400; color: var(--fg); margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--danger); text-decoration: none; }
.woocommerce .input-text, .woocommerce select, .woocommerce textarea,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%; padding: 12px 14px !important; border: 1px solid var(--border) !important;
  border-radius: 0 !important; background: var(--surface) !important; font-size: 14.5px !important;
  color: var(--fg) !important; line-height: 1.4 !important; height: auto !important;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.woocommerce .input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus,
.woocommerce form .form-row input.input-text:focus {
  outline: none !important; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.woocommerce .select2-container--default .select2-selection--single {
  height: auto; padding: 12px 14px; border: 1px solid var(--border); border-radius: 0; background: var(--surface);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; right: 10px; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 48%; }
.woocommerce form .form-row-wide { width: 100%; clear: both; }
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
  border: 1px solid var(--border); border-radius: 0; background: var(--surface); padding: var(--gap-lg);
}

/* ── WooCommerce: notyfikacje ───────────────────────────────────── */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .woocommerce-notice {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  padding: 14px 16px !important; border: 1px solid var(--border) !important;
  border-top: 3px solid var(--ok) !important; border-radius: 0 !important;
  background: var(--surface) !important; color: var(--fg) !important;
  font-size: 13.5px; margin: 0 0 var(--gap-md) !important; list-style: none;
}
.woocommerce-info { border-top-color: var(--teal) !important; }
.woocommerce-error { border-top-color: var(--danger) !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { margin-left: auto; }
.woocommerce-error li { margin: 0 !important; }

/* ── WooCommerce: ilość ─────────────────────────────────────────── */
.woocommerce .quantity {
  display: inline-flex; align-items: center; border: 1px solid var(--border);
  border-radius: 0; background: var(--surface);
}
.woocommerce .quantity .qty {
  width: 52px !important; height: 46px !important; border: 0 !important;
  text-align: center; font-family: var(--font-mono) !important; font-size: 15px !important;
  background: transparent !important; padding: 0 !important; -moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── WooCommerce: breadcrumbs ───────────────────────────────────── */
.woocommerce-breadcrumb {
  display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-block: 14px; font-size: 13px !important; color: var(--muted) !important;
  font-family: var(--font-body); margin: 0 !important;
}
.woocommerce-breadcrumb a { color: var(--muted) !important; }
.woocommerce-breadcrumb a:hover { color: var(--fg) !important; }

/* ── WooCommerce: sortowanie + wyniki ───────────────────────────── */
.woocommerce .woocommerce-result-count { font-size: 13.5px; color: var(--muted); margin: 0 !important; float: none !important; }
.woocommerce .woocommerce-ordering { margin: 0 !important; float: none !important; }
.woocommerce .woocommerce-ordering select { padding: 9px 34px 9px 12px !important; font-size: 13.5px !important; }

/* ── WooCommerce: paginacja ─────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination { margin-top: var(--gap-xl); }
.woocommerce nav.woocommerce-pagination ul {
  display: flex; gap: 6px; justify-content: center; border: 0 !important; margin: 0; padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0 !important; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-mono); font-size: 14px; color: var(--fg);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--fg); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--dark); color: #fff; border-color: var(--dark); }

/* ── WooCommerce: gwiazdki ──────────────────────────────────────── */
.woocommerce .star-rating { color: #e6a100; font-family: star; }
.woocommerce .star-rating::before { color: var(--border); }

/* ── WooCommerce: tabela (koszyk / zamówienie) ──────────────────── */
.woocommerce table.shop_table {
  border: 1px solid var(--border) !important; border-collapse: collapse !important;
  border-radius: 0 !important; background: var(--surface);
}
.woocommerce table.shop_table th {
  background: var(--surface-2); font-family: var(--font-body); font-size: 12.5px;
  font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0;
  padding: 12px 14px !important; border-bottom: 1px solid var(--border) !important;
}
.woocommerce table.shop_table td {
  padding: 14px !important; border-bottom: 1px solid var(--border) !important;
  font-size: 14px; vertical-align: middle;
}
.woocommerce table.shop_table td.product-name a { font-weight: 600; }
.woocommerce table.shop_table td.product-price, .woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table td.product-total { font-family: var(--font-mono); }
.woocommerce table.shop_table .product-thumbnail img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--border); padding: 4px; background: var(--bg); }
.woocommerce table.shop_table .product-remove a.remove {
  width: 26px; height: 26px; line-height: 24px; border-radius: 0; text-align: center;
  background: transparent !important; color: var(--muted) !important; border: 1px solid var(--border);
  font-size: 16px; font-weight: 400; display: inline-grid; place-items: center;
}
.woocommerce table.shop_table .product-remove a.remove:hover { color: var(--danger) !important; border-color: var(--danger); }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { border-top: 1px solid var(--border); }
.woocommerce table.shop_table_responsive tr td::before { font-weight: 600; color: var(--muted); }

/* ── WooCommerce: koszyk / checkout ─────────────────────────────── */
.woocommerce .cart-collaterals { margin-top: var(--gap-xl); }
.woocommerce .cart-collaterals .cart_totals { float: none !important; width: 100% !important; }
.woocommerce .cart_totals table.shop_table { max-width: 480px; margin-left: auto; }
.woocommerce .cart_totals h2 { font-size: var(--fs-h3); margin-bottom: var(--gap-md); }
.woocommerce .cart_totals .order-total .amount { font-family: var(--font-mono); font-size: 18px; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 180px; }

.woocommerce #customer_details { display: grid; gap: var(--gap-lg); }
.woocommerce form.checkout { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--gap-xl); align-items: start; }
.woocommerce form.checkout #customer_details { grid-column: 1; }
.woocommerce form.checkout #order_review_heading,
.woocommerce form.checkout #order_review { grid-column: 2; }
.woocommerce form.checkout #order_review { background: var(--surface); border: 1px solid var(--border); padding: var(--gap-lg); position: sticky; top: var(--sticky-offset); }
/* kolumny checkoutu nie mogą rozpychać się ponad kontener (min-content tabeli) */
.woocommerce form.checkout > * { min-width: 0; }
.woocommerce form.checkout #order_review .shop_table { table-layout: fixed; width: 100%; }
.woocommerce form.checkout #order_review .shop_table th,
.woocommerce form.checkout #order_review .shop_table td { overflow-wrap: anywhere; }
.woocommerce form.checkout #order_review_heading { margin-bottom: -8px; font-size: var(--fs-h3); }
.woocommerce .woocommerce-checkout-review-order-table { border: 0 !important; }
.woocommerce .woocommerce-checkout-review-order-table th,
.woocommerce .woocommerce-checkout-review-order-table td { padding: 10px 0 !important; background: transparent !important; }
.woocommerce #payment { background: transparent !important; border-radius: 0 !important; }
.woocommerce #payment ul.payment_methods { border-bottom: 1px solid var(--border) !important; padding: 0 0 var(--gap-md) !important; }
.woocommerce #payment div.payment_box { background: var(--surface-2) !important; border-radius: 0 !important; font-size: 13.5px; }
.woocommerce #payment div.payment_box::before { display: none !important; }
.woocommerce #payment div.form-row { padding: 0 !important; margin-top: var(--gap-md); }

/* ── WooCommerce: karta produktu ────────────────────────────────── */
.woocommerce div.product { margin: 0; }
.woocommerce div.product div.images { margin-bottom: 0; }
.woocommerce div.product div.summary { margin-bottom: 0; }
.woocommerce div.product .product_title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.woocommerce div.product p.price { font-family: var(--font-mono); font-size: 32px; font-weight: 400; color: var(--fg); margin: 0; }
.woocommerce div.product p.price del { color: var(--muted); font-size: 16px; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--sale); }
.woocommerce div.product form.cart { display: flex; gap: var(--gap-sm); flex-wrap: wrap; align-items: stretch; margin: var(--gap-md) 0 0; }
.woocommerce div.product form.cart .quantity { flex: 0 0 auto; }
.woocommerce div.product form.cart .button { flex: 1; min-width: 180px; padding: 12px 20px !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 0 !important; border-bottom: 1px solid var(--border); display: flex; gap: var(--gap-lg); overflow-x: auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 14px 2px !important; font-size: 14.5px !important; font-weight: 400 !important;
  color: var(--muted) !important; border-bottom: 2px solid transparent; white-space: nowrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--fg) !important; border-color: var(--accent); }
.woocommerce div.product .woocommerce-tabs .panel { padding-top: var(--gap-lg); margin: 0; }
.woocommerce div.product .related, .woocommerce div.product .upsells { margin-top: var(--gap-2xl); }
.woocommerce div.product .related > h2, .woocommerce div.product .upsells > h2 { font-size: var(--fs-h2); margin-bottom: var(--gap-lg); }
.woocommerce div.product .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); font-size: 15px; }
.woocommerce div.product .stock { font-size: 13px; font-weight: 400; }
.woocommerce div.product .stock.in-stock { color: var(--ok); }
.woocommerce div.product .stock.out-of-stock { color: var(--danger); }
.woocommerce div.product .product_meta { font-size: 12.5px; color: var(--muted); display: grid; gap: 4px; margin-top: var(--gap-md); }
.woocommerce div.product .product_meta .sku { font-family: var(--font-mono); }
.woocommerce div.product .onsale { display: none; }
.woocommerce .woocommerce-product-gallery { position: relative; }
.woocommerce .woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.woocommerce .woocommerce-product-gallery .flex-control-thumbs li { width: 25%; margin: 0; }
.woocommerce .woocommerce-product-gallery .flex-control-thumbs img { border: 1px solid var(--border); padding: 6px; background: var(--surface); }
.woocommerce .woocommerce-product-gallery .flex-control-thumbs img.flex-active { border-color: var(--accent); }

/* ── WooCommerce: konto ─────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation { float: none !important; width: 100% !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; background: var(--surface); border: 1px solid var(--border); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-size: 14px; color: var(--muted); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--fg-soft); color: var(--fg); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--dark); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
.woocommerce-account .woocommerce-MyAccount-content p:first-child { font-size: 15px; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button { margin-top: var(--gap-sm); }

/* ── WooCommerce: brak produktów ────────────────────────────────── */
.woocommerce-no-products-found, .woocommerce-info.woocommerce-no-products {
  display: block; padding: var(--gap-xl); text-align: center;
  border: 1px dashed var(--border) !important; border-top: 1px dashed var(--border) !important;
  color: var(--muted);
}

/* ── WP: komentarze / formularze ────────────────────────────────── */
.comment-form input:not([type="submit"]), .comment-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface); font-size: 14.5px;
}
.comment-list { list-style: none; padding: 0; display: grid; gap: var(--gap-lg); }
.comment-list .comment-body { background: var(--surface); border: 1px solid var(--border); padding: var(--gap-lg); }

/* ── WP: paginacja / nawigacja postów ───────────────────────────── */
.navigation.post-navigation .nav-links, .pagination, .nav-links { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.page-numbers { min-width: 40px; height: 40px; padding: 0 12px; display: inline-grid; place-items: center; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 14px; }
.page-numbers.current { background: var(--dark); color: #fff; border-color: var(--dark); }

/* ══════════════════════════════════════════════════════════════════
   POPRAWKI RESPONSYWNE (błędy wykryte w prototypie)
   ══════════════════════════════════════════════════════════════════ */

/* 1. Megamenu: 4 kolumny wymuszone inline — na mobile musi się zwijać */
@media (max-width: 1080px) {
  .megamenu-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--gap-lg) !important; }
  .megamenu-panel { padding-block: var(--gap-lg) var(--gap-xl); }
}
@media (max-width: 620px) {
  .megamenu-grid { grid-template-columns: 1fr !important; }
  .mm-feature { order: -1; }
}

/* 2. Header na bardzo małych ekranach: logo + 4 akcje + hamburger = overflow */
@media (max-width: 620px) {
  .header-main { gap: var(--gap-sm); padding-block: 10px; }
  .brand .brand-sub { display: none; }
  .brand img { height: 26px; }
  .hact { padding: 6px 6px; }
  .hact svg { width: 19px; height: 19px; }
  .header-actions { gap: 0; }
  .hact .badge { right: 0; min-width: 15px; height: 15px; font-size: 10px; }
}
@media (max-width: 400px) {
  .hact[href*="dobierz"] { display: none; }   /* „Dobierz" jest w drawerze */
}

/* 3. Topbar: 3 USP + telefon nie mieszczą się na 360px */
@media (max-width: 620px) {
  .topbar .container { min-height: 0; padding-block: 8px; row-gap: 4px; }
  .topbar-usps span:nth-child(3) { display: none; }
}
@media (max-width: 420px) {
  .topbar-usps span:nth-child(2) { display: none; }
}

/* 4. Tabela koszyka / zamówień: zawijanie zamiast poziomego scrolla */
@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive,
  .woocommerce-page table.shop_table_responsive { width: 100%; }
  .woocommerce table.shop_table_responsive tr,
  .woocommerce-page table.shop_table_responsive tr { display: block; border-bottom: 1px solid var(--border); padding: 10px 0; }
  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td { display: flex; justify-content: space-between; gap: 12px; border: 0 !important; padding: 6px 0 !important; text-align: right; }
  .woocommerce table.shop_table_responsive tr td::before { content: attr(data-title); font-size: 12.5px; color: var(--muted); text-align: left; }
  .woocommerce table.shop_table_responsive tr td.product-remove { justify-content: flex-end; }
  .woocommerce table.shop_table_responsive tr td.product-remove::before { display: none; }
  .woocommerce table.shop_table_responsive tr td.actions { display: block; }
  .woocommerce table.shop_table_responsive tr td.actions .coupon { display: flex; gap: 8px; margin-bottom: 10px; }
  .woocommerce table.shop_table_responsive tr td.actions .coupon .input-text { flex: 1; width: auto; }
  .woocommerce .cart_totals table.shop_table { max-width: none; }
}

/* 5. Checkout: 2 kolumny → 1 na tablecie */
@media (max-width: 1024px) {
  .woocommerce form.checkout { grid-template-columns: 1fr; }
  .woocommerce form.checkout #order_review_heading,
  .woocommerce form.checkout #order_review { grid-column: 1; }
  .woocommerce form.checkout #order_review { position: static; }
}

/* 6. PDP: galeria sticky + info w jednej kolumnie na mobile */
@media (max-width: 920px) {
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { width: 100% !important; float: none !important; }
  .woocommerce div.product div.summary { margin-top: var(--gap-lg); }
  .woocommerce div.product form.cart .button { min-width: 0; width: 100%; }
}

/* 7. Konto: siatka 250px → 1fr */
@media (max-width: 920px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--gap-lg); }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
}
@media (max-width: 480px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; }
}

/* 8. Filtry: na mobile panel nie może być sticky ani 288px */
@media (max-width: 920px) {
  .woocommerce .grid-sidebar { display: block; }
  .filters { position: static; margin-bottom: var(--gap-lg); }
  .facet-body { max-height: none; }
}

/* 9. Product grid: 4 → 3 → 2 → 1 bez „dziur" */
@media (max-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* 10. Długie nazwy produktów / SKU nie mogą rozsadzać karty */
.pc-title, .woocommerce-loop-product__title { overflow-wrap: anywhere; }
.pc-sku, .num, .price { word-break: break-word; }

/* 11. Sticky summary/koszyk nie może wystawać ponad viewport na niskich ekranach */
@media (max-height: 700px) {
  .summary, .pdp-gallery, .filters, .acct-nav { position: static !important; }
}

/* 12. Drawer koszyka: pełna szerokość na małych ekranach */
@media (max-width: 420px) {
  .drawer { width: 100%; }
}

/* 13. Taby PDP: przewijanie poziome bez ucinania focusa */
.tabs, .woocommerce-tabs ul.tabs { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tabs::-webkit-scrollbar, .woocommerce-tabs ul.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: var(--border); }

/* 14. Obrazy w treści nie mogą powodować overflow */
.entry-content img, .prose img, .tab-panel img { max-width: 100%; height: auto; }

/* 15. Hero: na bardzo niskich ekranach zdjęcie nie może dominować */
@media (max-width: 920px) {
  .hero-banner > img { height: 240px; object-position: 70% center; }
}
@media (max-width: 480px) {
  .hero-banner > img { height: 200px; }
  .hero-banner-content h1 { font-size: clamp(28px, 8vw, 34px); }
}

/* 16. Pasek kategorii: przewijanie poziome na mobile (zamiast zawijania w 3 linie) */
@media (max-width: 920px) {
  .catbar .container { flex-wrap: nowrap; overflow-x: auto; gap: var(--gap-md); scrollbar-width: none; }
  .catbar .container::-webkit-scrollbar { display: none; }
  .catbar a { white-space: nowrap; padding-bottom: 8px; }
}

/* 17. Tabela specyfikacji: etykiety nad wartościami na mobile */
@media (max-width: 620px) {
  .spec-table th, .spec-table td { display: block; width: 100%; padding: 4px 0; }
  .spec-table th { padding-top: 12px; }
  .ds-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* 18. Wyłącz animacje przy prefers-reduced-motion także dla nowych komponentów */
@media (prefers-reduced-motion: reduce) {
  .drawer, .megamenu, .megamenu-panel, .toast { transition: none !important; animation: none !important; }
}

/* 19. Focus widoczny na ciemnych tłach */
.topbar :focus-visible, .pagefoot :focus-visible, .promo-band :focus-visible,
.cta-strip :focus-visible, .media-card :focus-visible, .acct-nav a.is-active:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 2px;
}

/* 20. Kontener: 1440px + gutter 28px daje 1384px treści — przy 1024px sprawdzić brak overflow */
@media (max-width: 1100px) { :root { --container: 100%; } }

/* ── pomocnicze klasy dla szablonów WP ──────────────────────────── */
.jelo-section { padding-block: clamp(44px, 5.5vw, 80px); }
.jelo-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.jelo-page-head { padding-block: clamp(24px, 3vw, 40px) 0; }
.jelo-empty { text-align: center; padding: var(--gap-2xl) var(--gap-lg); border: 1px dashed var(--border); color: var(--muted); }
.jelo-skip-link { position: absolute; left: -9999px; }
.jelo-skip-link:focus { left: 8px; top: 8px; z-index: 100; background: var(--surface); padding: 10px 16px; border: 1px solid var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   KOSZYK / KONTO — elementy używane przez nowe szablony
   ══════════════════════════════════════════════════════════════════ */

/* stepper ilości w koszyku */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--surface); }
.qty .qty-btn { width: 38px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; }
.qty .qty-btn:hover { color: var(--fg); background: var(--fg-soft); }
.qty input { width: 48px; height: 44px; border: 0; text-align: center; background: transparent; font-family: var(--font-mono); font-size: 14.5px; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item .pc-sku { display: block; }
.cart-item .ci-actions button.ci-update { border: 0; background: transparent; color: var(--muted); font-size: 12.5px; padding: 0; }
.cart-item .ci-actions button.ci-update:hover { color: var(--fg); }
.cart-item .ci-actions .remove { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); }
.cart-item .ci-actions .remove:hover { color: var(--danger); }

/* konto: siatka nav + treść (markup Woo: oba dzieci .woocommerce) */
.woocommerce-account .woocommerce {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--gap-xl); align-items: start;
}
@media (max-width: 920px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; } }

/* checkout: kroki nad formularzem */
.checkout-steps { margin-bottom: var(--gap-xl); }
.checkout-steps .step.is-active .n { background: var(--accent); border-color: var(--accent); color: #fff; }

/* koszyk pusty */
.cart-empty.woocommerce-info { display: block; text-align: center; padding: var(--gap-2xl) var(--gap-lg) !important; }
.return-to-shop { margin-top: var(--gap-md); }

/* Woo: quantity w PDP — przyciski +/- nie istnieją natywnie, wyrównanie */
.woocommerce div.product form.cart .quantity { align-items: stretch; }
.woocommerce div.product form.cart .quantity .qty { height: 46px !important; }

/* Woo: „Dodaj do koszyka” w pętli jako kompaktowy przycisk */
.product-card form.cart { margin: 0; display: contents; }
.product-card .added_to_cart { display: none; }

/* drawer nawigacji: pozycja przez klasę (inline transform blokował .is-open) */
.drawer.drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.drawer.drawer--left.is-open { transform: none; }

/* zamknięty drawer nie może łapać fokusu ani być czytany przez czytniki */
.drawer { visibility: hidden; transition: transform .24s ease, visibility .24s ease; }
.drawer.is-open { visibility: visible; }

/* paginacja: musi się zawijać (przy 34 stronach jedna linia rozpychała body) */
.woocommerce nav.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul.page-numbers { flex-wrap: wrap; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════
   UX/UI — nawigacja, karty produktów, karta produktu (v2.1)
   ══════════════════════════════════════════════════════════════════ */

/* ── nagłówek: kompaktowanie po scrollu ─────────────────────────── */
.site-header { transition: box-shadow .18s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(14,16,20,.28); }
body.jelo-scrolled .topbar { display: none; }
@media (max-width: 920px) {
  body.jelo-scrolled .catbar { display: none; }
}

/* ── pasek kategorii: gradient na krawędziach + auto-scroll aktywnego ── */
@media (max-width: 920px) {
  .catbar { position: relative; }
  .catbar::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
    background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--surface) 92%, transparent));
    pointer-events: none;
  }
}
.catbar a.is-active { color: var(--fg); border-color: var(--accent); font-weight: 500; }

/* ── wyszukiwarka: klawiatura + stany ───────────────────────────── */
.search-hint a.is-hilite { background: var(--fg-soft); }
.search-hint .sh-empty { padding: 8px; font-size: 13.5px; color: var(--muted); }
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchbar.is-loading button { opacity: .65; }
.searchbar.is-loading button svg { animation: jelo-spin .8s linear infinite; }
@keyframes jelo-spin { to { transform: rotate(360deg); } }

/* ── karty produktów: równe wysokości, tytuł 2 linie, wishlist na dotyku ── */
.product-grid { align-items: stretch; }
.product-card .pc-body { min-width: 0; }
.pc-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.pc-title a { display: block; }
.pc-foot { gap: 10px; }
.pc-price { min-width: 0; }
.pc-price .price, .pc-price .amount { font-size: 19px; }
.pc-price del { display: inline-block; font-size: 12.5px; }
.pc-add { transition: background .15s ease, transform .12s ease; }
.pc-add:active { transform: scale(.94); }
.pc-add.is-loading { pointer-events: none; opacity: .7; }
.pc-add.is-loading svg { animation: jelo-spin .8s linear infinite; }
.product-card.is-added { border-color: var(--ok); }

/* brak hovera (telefon/tablet) → serce i przycisk zawsze widoczne */
@media (hover: none) {
  .pc-wish { opacity: 1; }
}

/* ── karta produktu: galeria + sticky pasek zakupu (mobile) ─────── */
.pdp-buy-bar { display: none; }

@media (max-width: 920px) {
  .pdp-buy-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in oklch, var(--surface) 96%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .pdp-buy-bar .bb-price { font-family: var(--font-mono); font-size: 18px; line-height: 1.1; }
  .pdp-buy-bar .bb-price del { display: block; font-size: 11.5px; color: var(--muted); }
  .pdp-buy-bar .btn { flex: 0 0 auto; min-height: 44px; }
  body.single-product { padding-bottom: 74px; }
}

/* stepper ilości w formularzu produktu (dodawany przez JS) */
.woocommerce div.product form.cart .quantity { position: relative; }
.qty-step {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 100%; border: 0; background: transparent;
  color: var(--muted); font-size: 16px; display: grid; place-items: center;
}
.qty-step:hover { color: var(--fg); background: var(--fg-soft); }
.qty-step[data-step="minus"] { left: 0; }
.qty-step[data-step="plus"] { right: 0; }
.woocommerce div.product form.cart .quantity.has-steps .qty { padding-inline: 30px !important; width: 104px !important; }

/* ── treść: tabele i listy z opisów produktów (129 produktów) ───── */
.entry-content table, .prose table, .tab-panel table {
  width: 100%; font-size: 14px; border: 1px solid var(--border);
  margin: 16px 0; table-layout: auto;
}
.entry-content table th, .prose table th, .tab-panel table th {
  text-align: left; padding: 10px 12px; background: var(--surface-2);
  color: var(--muted); font-weight: 600; font-size: 12.5px;
  border-bottom: 1px solid var(--border); white-space: nowrap; width: 38%;
}
.entry-content table td, .prose table td, .tab-panel table td {
  padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.entry-content table tr:last-child th,
.entry-content table tr:last-child td { border-bottom: 0; }
.jelo-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jelo-table-scroll table { margin: 0; min-width: 420px; }

.entry-content ul li::marker, .prose ul li::marker { color: var(--accent); }
.entry-content h2[data-start], .entry-content h3[data-start] { scroll-margin-top: var(--sticky-offset); }

/* obrazki emoji z opisu (s.w.org) nie mogą dominować nad tekstem */
.entry-content img.emoji, .prose img.emoji, .pc-title img, .woocommerce-loop-product__title img {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; margin: 0 .08em;
}

/* ── focus i dostępność ─────────────────────────────────────────── */
a:focus-visible, button:focus-visible, .check:focus-within .box {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.drawer a:focus-visible, .megamenu a:focus-visible { outline-color: var(--accent-bright); }

/* ── breadcrumbs: przewijanie zamiast zawijania na mobile ───────── */
@media (max-width: 620px) {
  .breadcrumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .breadcrumbs::-webkit-scrollbar { display: none; }
  .breadcrumbs > * { flex: 0 0 auto; }
}

/* ── filtry: wyraźniejszy nagłówek + licznik aktywnych ──────────── */
.facet-head span { display: inline-flex; align-items: center; gap: 8px; }
.facet-body .check { padding: 3px 0; }
.facet-body .check:hover { color: var(--accent-ink); }
.filters .btn-block { margin-top: 4px; }

/* ── siatka produktów na telefonie: 2 kolumny (handel), 1 tylko <340px ──
   store.css zwijał do 1 kolumny już przy 400px — za wcześnie dla sklepu. */
@media (max-width: 620px) {
  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .pc-media { padding: 12px; }
  .pc-body { padding: 12px; gap: 6px; }
  .pc-title { font-size: 13.5px; }
  .pc-cat { font-size: 11px; }
  .pc-sku { font-size: 11px; }
  .pc-price .price, .pc-price .amount { font-size: 16px; }
  .pc-add { width: 38px; height: 38px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 340px) {
  .product-grid, .product-grid.cols-3 { grid-template-columns: 1fr !important; }
}

/* ── telefon: niższy nagłówek (mniej pionu przed treścią) ────────── */
@media (max-width: 620px) {
  .topbar .container { padding-block: 6px; font-size: 11.5px; }
  .topbar-usps { gap: var(--gap-md); }
  .header-main { padding-block: 8px; gap: var(--gap-sm); }
  .searchbar input { padding: 10px 14px; font-size: 14px; }
  .searchbar button { padding: 0 16px; }
  .catbar .container { min-height: 40px; }
  .catbar a { font-size: 13px; }
  body.jelo-scrolled .site-header .header-main { padding-block: 6px; }
}

/* ── mobile: filtry schowane za przyciskiem ─────────────────────── */
.filters-mobile-bar { display: none; }
@media (max-width: 920px) {
  .filters-mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--gap-sm); margin-bottom: var(--gap-md);
  }
  .filters-mobile-bar .woocommerce-ordering { margin: 0; }
  .filters-mobile-bar select { max-width: 190px; }
  .filters-mobile-bar .btn { white-space: nowrap; }
  .grid-sidebar .filters { display: none; }
  .grid-sidebar.filters-open .filters { display: block; }
  .active-filters { font-size: 12.5px; }
}
@media (min-width: 921px) {
  .active-filters { display: none; }
}

/* ── nagłówek katalogu na telefonie: kompakt ────────────────────── */
@media (max-width: 620px) {
  .jelo-page-head { padding-block: 12px 0; }
  .jelo-page-head .breadcrumbs { padding-block: 6px; }
  .row-between > div > .lead { font-size: 14px; max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .btn-group .tag { padding: 5px 10px; font-size: 12px; }
  .section-tight { padding-block: 20px; }
  .toolbar { margin-bottom: var(--gap-md); }
  .toolbar .result-count { font-size: 12.5px; }
  .view-toggle { display: none; }
}

/* koszyk: automatyczna aktualizacja ilości — przycisk zbędny */
.woocommerce-cart-form.is-auto-update .ci-actions .ci-update { display: none; }
.woocommerce-cart-form.is-auto-update .ci-actions { gap: 0; }