/* PatrioticWear — responsive overrides (loaded last, wins the cascade).
   Desktop-first: base styles live in the generated patrioticwear.css / theme.css / nav.css / blog.css;
   this file only overrides them at the designer's breakpoints: 1024px and 640px.
   Triple-class selectors mirror the specificity pattern of the generated sheet's own media rules. */

/* ==== Global guards (all widths) ======================================= */

/* Fluid media: WP/Woo print fixed width/height attributes on images. */
main img,
footer img { max-width: 100%; height: auto; }

/* Grid/flex children must be allowed to shrink below their content size,
   otherwise long titles and images force horizontal scroll on small screens. */
.pw-r-hero > *,
.pw-r-edytorial > *,
.pw-r-produkt > *,
.pw-r-uklad > *,
.pw-r-historia > *,
.pw-r-seo-gora > *,
.pw-r-seo-dol > *,
.pw-r-parametry > *,
.pw-r-kolekcje > *,
.pw-r-dlakogo > *,
.pw-r-stopka > *,
.pw-r-pozycja > *,
.pw-r-produkty > article,
.pw-r-siatka > *,
.pw-r-polecane > article { min-width: 0; }

/* Long words (URLs, e-mail addresses, compound Polish words) wrap instead of overflowing. */
main, footer { overflow-wrap: break-word; }

/* ==== ≤ 1024px — tablet / small laptop ================================= */
/* Designer's pattern (all .dc.html mockups): hide the desktop menu, show the
   hamburger, collapse the main grids to one column, sidebars go static. */

@media (max-width: 1024px) {

/* Belt and braces against any residual horizontal overflow. */
html, body { overflow-x: hidden; overflow-x: clip; }

/* Header contract: the desktop nav list is hidden on both header variants
   (front: .pw-nav-f45c71, subpages: .pw-nav-d4636d); hamburger takes over.
   The generated sheet already hides .pw-r-menu / shows .pw-r-mobilne-menu —
   these rules repeat the contract for the rebuilt header markup. */
.pw-nav-f45c71 ul.pw-r-menu,
.pw-nav-d4636d ul.pw-r-menu { display: none; }
.pw-nav-f45c71 .pw-r-mobilne-menu,
.pw-nav-d4636d .pw-r-mobilne-menu { display: inline-flex; }

/* Mega menu inside the mobile panel: no floating dropdown — the panel
   becomes a static sub-list under its parent item, toggled by the same
   pw-open class the JS already sets on tap. */
li.pw-t-has-mega { position: static; }
li.pw-t-has-mega .pw-t-megamenu.pw-t-megamenu {
	display: none;
	position: static;
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 4px 0 8px 16px;
	transition: none;
}
li.pw-t-has-mega.pw-open > .pw-t-megamenu.pw-t-megamenu { display: block; }
.pw-t-megamenu-list { grid-template-columns: 1fr; gap: 8px; max-width: none; }

/* Slightly tighter nav bar. */
.pw-div-f533ad { gap: 24px; }

/* Section rhythm: 96px -> 48px. */
.pw-section-abec8d { padding: 48px 0; }
.pw-section-74a444 { padding: 48px 0 0; }
.pw-section-7ba43b { padding: 0 0 48px; }
.pw-section-0b06ad,
.pw-section-a676f5 { padding: 48px 0; }
.pw-section-8194d5 { padding: 48px clamp(24px, 5vw, 64px); }
.pw-section-673ada { padding: 48px clamp(24px, 5vw, 64px) 0; }
.pw-section-45b04a { margin-top: 48px; padding: 48px 0; }
.pw-section-d1daee { min-height: 0; padding: 48px 0; }

/* "Najczęściej wybierane": the auto-fit grid degrades badly mid-range —
   pin it to 2 comfortable columns. */
.pw-r-produkty.pw-r-produkty.pw-r-produkty { grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* Related products / cross-sells: 4 columns are too tight below 1024px. */
.pw-r-polecane.pw-r-polecane.pw-r-polecane { grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* Checkout (grid on the checkout form comes from theme.css): one column,
   order review below the customer details, nothing sticky.
   The placement has to be cleared with selectors at least as specific as
   theme.css's (".woocommerce-checkout #order_review" beats a bare id), and
   grid-row matters as much as grid-column here: the desktop layout spans
   customer details across both rows, so leaving it in place would stack the
   order review on top of the address fields. */
.woocommerce-checkout form.checkout,
form.woocommerce-checkout { grid-template-columns: 1fr; }
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading { grid-column: auto; grid-row: auto; width: 100%; float: none; position: static; }
.col2-set .col-1,
.col2-set .col-2 { float: none; width: 100%; }

/* Blog archive + single post — media queries carried over 1:1 from
   Design/PatrioticWear - Blog.dc.html and - Wpis.dc.html, targeting the
   pw-t-* classes home.php/single.php actually use (blog.css loads earlier,
   so single-class selectors win here by sheet order). */
.pw-t-blog-featured,
.pw-t-blog-layout,
.pw-t-post-layout { grid-template-columns: 1fr; gap: 40px; }
.pw-t-blog-aside { position: static; }
.pw-t-post-aside { position: static; order: -1; }

/* Category filter sidebar collapses behind the "Filtry" toggle button
   (rendered in archive-product.php, desktop-hidden in filters.css).
   JS (pw.js) toggles pw-open on the aside; the aside sits before the product
   section in the single-column grid, so it opens above the list.
   Double/triple classes outweigh filters.css (loaded later) and the generated sheet. */
.pw-t-filters-toggle.pw-t-filters-toggle { display: inline-flex; }
.pw-r-sidebar.pw-r-sidebar.pw-r-sidebar { display: none; }
.pw-r-sidebar.pw-r-sidebar.pw-r-sidebar.pw-open { display: block; }

} /* end max-width:1024px */

/* ==== ≤ 640px — phones ================================================= */
/* Designer's pattern: hide the wordmark, single-column lists,
   1-column footer, tighter paddings. */

@media (max-width: 640px) {

/* --- Info bar above the nav (.pw-div-e7df55) ---------------------------
   Was: fixed 36px height, nowrap, overflow hidden — content got cut off.
   Keep only the most important message (free shipping), centered. */
.pw-div-e7df55 { height: auto; min-height: 36px; padding: 8px 16px; }
.pw-div-1f302f { flex-wrap: wrap; justify-content: center; text-align: center; gap: 6px 12px; white-space: normal; font-size: 0.6875rem; }
.pw-div-1f302f > span:nth-child(n+2) { display: none; }

/* Nav bar: tighter utility links so logo + Menu/Szukaj/Konto/Koszyk fit at 390px. */
.pw-div-4f7582 { gap: 14px; }

/* Section rhythm: 48px -> 32px. */
.pw-section-abec8d { padding: 32px 0; }
.pw-section-74a444 { padding: 32px 0 0; }
.pw-section-7ba43b { padding: 0 0 32px; }
.pw-section-0b06ad,
.pw-section-a676f5 { padding: 32px 0; }
.pw-section-8194d5 { padding: 32px 24px; }
.pw-section-673ada { padding: 32px 24px 0; }
.pw-section-45b04a { margin-top: 32px; padding: 32px 0; }
.pw-section-d1daee { padding: 32px 0 40px; }
.pw-header-2a56ed { padding: 32px 0; }

/* Hero headline: scale down so three stacked words never overflow 390px. */
.pw-h1-973877 { font-size: clamp(2.75rem, 13vw, 4.5rem); }

/* Anniversary bar: drop the em-dash separators, tighter type. */
.pw-div-ad93a5 { gap: 6px 14px; font-size: 0.75rem; padding: 14px clamp(24px, 5vw, 64px); }
.pw-span-8bf9f2 { display: none; }

/* "Najczęściej wybierane": heading + filter tabs stack; grid stays 2-up
   (generated sheet), with a touch less gap. */
.pw-div-8f62e3 { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.pw-r-produkty.pw-r-produkty.pw-r-produkty { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pw-r-polecane.pw-r-polecane.pw-r-polecane { grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* Newsletter form: full-width button under the input. */
.pw-form-52b31d .pw-button-326d5a { width: 100%; }

/* Breadcrumbs wrap instead of pushing the page wide. */
.pw-nav-13f722,
.pw-nav-139f3b,
.pw-nav-5c303b { flex-wrap: wrap; row-gap: 4px; }

/* Product page: full-width purchase button, smaller parameters table. */
.pw-t-purchase-form .single_add_to_cart_button { width: 100%; }
.pw-table-8dfbd1 { font-size: 0.8125rem; }

/* Mini-cart dropdown: pinned to the viewport (nav is 76px tall) so it
   can never hang past the right edge. Contract classes from the header agent. */
.pw-t-minicart-wrap .pw-t-minicart.pw-t-minicart { position: fixed; left: 12px; right: 12px; top: calc(76px + 12px); width: auto; min-width: 0; max-width: none; }

/* Cart: coupon + update button stack full-width; lighter summary padding. */
.pw-t-cart-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.pw-form-f9a10f { display: flex; flex-wrap: wrap; gap: 12px; }
.pw-form-f9a10f .pw-input-b8b0b5 { flex: 1 1 160px; min-width: 0; }
.pw-aside-fd9418 { padding: 24px 20px; }

/* Free shipping bar: the mono uppercase label is the widest element at 390px
   (~342px of content there), so drop a step of size and letter-spacing to keep
   "Do darmowej dostawy brakuje {kwota}" on one line. */
.pw-t-shipbar { margin-bottom: 20px; }
.pw-t-shipbar-label { font-size: 11px; letter-spacing: 0.06em; }
.pw-t-shipbar--mini .pw-t-shipbar-label { font-size: 10px; letter-spacing: 0.05em; }

/* Checkout: Woo's paired address fields go full width. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }

/* Order bump: at 390px the box lives inside #order_review's 24px padding,
   so ~292px are left for it. Smaller thumbnail and tighter gaps buy the
   product name a readable text column next to the checkbox. */
.pw-t-bump { gap: 12px; padding: 12px; }
.pw-t-bump-media { width: 52px; height: 52px; }
.pw-t-bump-kicker { font-size: 10px; letter-spacing: 0.08em; }
.pw-t-bump-name { font-size: 0.875rem; }
.pw-t-bump-price { font-size: 0.8125rem; }
/* Same scoped selector as in theme.css — the generic Woo form-row label rule
   outweighs a bare class here, sheet order notwithstanding. */
.woocommerce form .form-row label.pw-t-bump-toggle { padding: 4px 0 4px 4px; }

/* Blog archive + single post — 1:1 from the .dc.html design files,
   on the theme's actual pw-t-* classes. */
.pw-t-blog-card { grid-template-columns: 96px 1fr; gap: 16px; }
.pw-t-post-meta { gap: 8px; }
.pw-t-post-products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pw-t-post-related-grid { grid-template-columns: 1fr; }

} /* end max-width:640px */