/**
 * KAUFLOND — Responsive
 *
 * Breakpoint overrides that cannot live with their component. Kept small on
 * purpose — most rules in the component files are already breakpoint-safe.
 *
 * WoodMart breakpoints: desktop ≥1025, tablet 769–1024, mobile ≤768.
 * Columns per breakpoint are WoodMart options (4 / 3 / 2); these rules tune
 * density inside those columns.
 *
 * @package Kauflond
 */

/* ---------- ≤1366: 4 columns still fine; tighten card padding a touch ------ */
@media (max-width: 1366px) {
	.wd-product.wd-hover-standard .product-wrapper {
		padding: var(--kfl-space-2);
	}
}

/* ---------- ≤1024 (tablet): sidebar is off-canvas; toolbar wraps ----------- */
@media (max-width: 1024px) {
	/* SUBCATEGORY SHORTCUTS ON SMALL SCREENS
	 * WoodMart renders the title categories as a full-width accordion list on
	 * tablet/mobile, which pushes the products ~330px down the page. Present the
	 * six families as ONE horizontally scrollable chip row instead, and drop the
	 * accordion chrome (toggle heading, arrows). The list is always open — no JS
	 * toggle to reach the categories. */
	.wd-page-title .wd-nav-product-cat.wd-mobile-accordion {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--kfl-space-2);
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: var(--kfl-space-1);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.wd-page-title .wd-nav-product-cat.wd-mobile-accordion::-webkit-scrollbar {
		display: none;
	}

	.wd-page-title .wd-nav-product-cat.wd-mobile-accordion > li.cat-item {
		flex: 0 0 auto;
		width: auto;
		margin: 0;
		border: none;
	}

	.wd-page-title .wd-nav-product-cat.wd-mobile-accordion > li > a.category-nav-link {
		width: auto;
		height: 34px;
		padding-inline: var(--kfl-space-3);
		white-space: nowrap;
	}

	/* Accordion chrome: the "Kategorien ▾" toggle and per-item arrows. */
	.wd-page-title .wd-nav-product-cat .wd-nav-opener,
	.wd-page-title .wd-nav-product-cat .wd-cats-toggle,
	.wd-page-title .wd-show-cat,
	.wd-page-title .wd-btn-show-cat,
	.wd-page-title .wd-cat-toggle {
		display: none;
	}

	.shop-loop-head {
		gap: var(--kfl-space-2);
	}

	.shop-loop-head .wd-shop-tools {
		gap: var(--kfl-space-3);
	}

	/* Breadcrumb stays; the count sits next to it only when it fits. */
	.shop-loop-head .wd-breadcrumbs + .woocommerce-result-count {
		padding-inline-start: var(--kfl-space-3);
	}

	.wd-page-title .wd-nav-shop-cat > li > a {
		height: 30px;
		line-height: 30px;
	}
}

/* ---------- ≤768 (mobile, 2 columns) ------------------------------------- */
@media (max-width: 768px) {
	.woocommerce-shop .wd-page-title,
	.tax-product_cat .wd-page-title {
		padding-block: var(--kfl-space-4);
		margin-bottom: var(--kfl-space-4);
	}

	.wd-page-title .entry-title {
		font-size: var(--kfl-font-size-xl);
	}

	/* Toolbar: two rows — breadcrumb/count on top, controls below. */
	.shop-loop-head {
		flex-direction: column;
		align-items: stretch;
	}

	.shop-loop-head .wd-shop-tools {
		justify-content: space-between;
		flex-wrap: wrap;
	}

	/* Per-page links add clutter on a phone; sorting + filter are enough. */
	.shop-loop-head .wd-products-per-page,
	.shop-loop-head .wd-products-shop-view {
		display: none;
	}

	.shop-loop-head .woocommerce-ordering select,
	.shop-loop-head .woocommerce-ordering .wd-ordering-select {
		height: var(--kfl-btn-height);
		font-size: var(--kfl-font-size-base);
	}

	.shop-loop-head .wd-show-sidebar-btn > a {
		height: var(--kfl-btn-height);
	}

	/* Cards: less internal padding, smaller type, button stays a real target. */
	.wd-product.wd-hover-standard .product-wrapper {
		padding: var(--kfl-space-2);
	}

	.wd-product .product-image-link {
		padding: var(--kfl-space-1);
	}

	.wd-product .wd-entities-title {
		font-size: var(--kfl-font-size-sm);
		min-height: calc(2 * var(--kfl-font-size-sm) * var(--kfl-line-height-snug));
	}

	.wd-product .wd-product-brands-links {
		font-size: var(--kfl-font-size-xs);
	}

	.wd-product .price {
		font-size: var(--kfl-font-size-md);
	}

	.wd-product .price del {
		font-size: var(--kfl-font-size-xs);
	}

	.wd-product .kfl-card-meta .kfl-meta-line {
		font-size: var(--kfl-font-size-xs);
	}

	.wd-product.wd-hover-standard .wd-add-btn > .button {
		height: 36px;
		font-size: var(--kfl-font-size-xs);
		padding-inline: var(--kfl-space-2);
	}

	/* Wishlist tap target on mobile: 40px, still top-right. */
	.wd-product .wd-buttons .wd-action-btn > a {
		width: 40px;
		height: 40px;
	}

	.woocommerce-pagination .page-numbers a,
	.woocommerce-pagination .page-numbers span.current {
		min-width: 36px;
		height: 36px;
	}
}

/* ---------- ≤430: very narrow phones ------------------------------------ */
@media (max-width: 430px) {
	.wd-products.products-bordered-grid-ins {
		--wd-col-gap: var(--kfl-space-2);
		--wd-row-gap: var(--kfl-space-2);
	}

	.wd-page-title .wd-nav-shop-cat > li > a {
		padding-inline: var(--kfl-space-2);
		font-size: var(--kfl-font-size-xs);
	}
}

/* =========================================================================
 * PDP — Phase 4
 * ====================================================================== */

/* ---------- ≤1024: gallery above summary (WoodMart stacks the grid) ------ */
@media (max-width: 1024px) {
	.single-product .kfl-key-facts__list {
		grid-template-columns: 1fr;
	}
}

/* ---------- ≤768: mobile hierarchy ---------------------------------------- */
@media (max-width: 768px) {
	.single-product .site-content > .product {
		padding-top: var(--kfl-space-3);
	}

	.single-product .woocommerce-product-gallery {
		padding: var(--kfl-space-2);
	}

	.single-product h1.product_title {
		font-size: var(--kfl-font-size-xl);
	}

	.single-product .summary p.price {
		font-size: var(--kfl-font-size-2xl);
	}

	/* The purchase row stays a clear block; button gets the full width. */
	.single-product form.cart .single_add_to_cart_button {
		flex-basis: 100%;
	}

	.single-product .tabs-layout-accordion .wd-accordion-title {
		padding-block: var(--kfl-space-3);
		font-size: var(--kfl-font-size-base);
	}

	/* Spec table on narrow screens: stack label over value. */
	.single-product .woocommerce-product-attributes th,
	.single-product .woocommerce-product-attributes td {
		display: block;
		width: 100%;
		padding-inline: var(--kfl-space-2);
	}

	.single-product .woocommerce-product-attributes th {
		padding-bottom: 0;
		font-size: var(--kfl-font-size-xs);
		text-transform: uppercase;
		letter-spacing: .04em;
	}

	.single-product .woocommerce-product-attributes td {
		padding-top: 2px;
	}
}

/* ---------- PDP ≤1024: cap the gallery so the purchase area stays near the
 * fold on tablets; the product is never cropped (contain). ---------------- */
@media (max-width: 1024px) {
	/* Square box, but capped: on a tablet a full-width square gallery would
	 * push the purchase controls ~1200px down. The img keeps its 1:1 box,
	 * so a height cap also narrows it; centre the result. */
	.single-product .wd-gallery-images .woocommerce-product-gallery__image img,
	.single-product .wd-gallery-images .wd-carousel-item img {
		width: auto;
		max-width: 100%;
		height: min(52vh, 440px);
		margin-inline: auto;
	}
}

/* ---------- PDP ≤480: phones are narrower than the tablet cap, so the
 * square simply follows the width again (≤430px tall). ------------------ */
@media (max-width: 480px) {
	.single-product .wd-gallery-images .woocommerce-product-gallery__image img,
	.single-product .wd-gallery-images .wd-carousel-item img {
		width: 100%;
		height: auto;
	}
}

/* =========================================================================
 * HOMEPAGE + FOOTER (Phase 5)
 * ====================================================================== */

/* ---------- ≤1024: promo becomes primary-on-top + two tiles side by side,
 * discovery teasers stack, section spacing tightens. --------------------- */
@media (max-width: 1024px) {
	.e-con.kfl-home-section {
		margin-block-end: var(--kfl-space-8);
	}

	.kfl-promo > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.e-con.kfl-promo__secondary {
		--flex-direction: row;
		--container-widget-width: 50%;
		flex-direction: row;
	}

	.e-con.kfl-promo__secondary > .kfl-promo-tile {
		flex: 1 1 0;
		width: 50%;
		min-width: 0;
	}

	.kfl-promo-tile--primary .promo-banner {
		min-height: 260px;
	}

	.kfl-discovery > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kfl-space-8);
	}

	.kfl-newsletter > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.kfl-newsletter__form .mc4wp-form {
		max-width: none;
	}
}

/* ---------- ≤768: phone layout — designed, not stacked desktop. ----------- */
@media (max-width: 768px) {
	.e-con.kfl-home-section {
		margin-block-end: var(--kfl-space-6);
	}

	.e-con.kfl-home-section.kfl-promo {
		margin-block-start: var(--kfl-space-3);
	}

	/* Primary tile compact; the two category tiles keep sitting side by side
	 * as small cards so the fold still shows products/categories. */
	.kfl-promo-tile--primary .promo-banner {
		min-height: 200px;
	}

	.kfl-promo-tile .promo-banner .wrapper-content-banner.wd-fill {
		padding: var(--kfl-space-4);
	}

	.kfl-promo-tile--primary .banner-title {
		font-size: var(--kfl-font-size-xl);
	}

	.kfl-promo-tile--primary .banner-inner {
		display: none; /* keep the tile short; headline + CTA carry the message */
	}

	.kfl-promo-tile--secondary .promo-banner {
		aspect-ratio: auto;
		min-height: 128px;
	}

	.kfl-promo-tile--secondary .content-banner {
		max-width: 60%;
	}

	.kfl-promo-tile--secondary .banner-title {
		font-size: var(--kfl-font-size-base);
	}

	.kfl-promo-tile--secondary .banner-subtitle {
		display: none;
	}

	/* Category tiles: 3 per row, smaller illustration and label. */
	.kfl-cat-grid .wd-cat .wd-cat-inner {
		padding: var(--kfl-space-3) var(--kfl-space-2);
	}

	.kfl-cat-grid .wd-cat .wd-cat-thumb {
		width: 64px;
	}

	.kfl-cat-grid .wd-cat .wd-entities-title {
		font-size: var(--kfl-font-size-xs);
	}

	/* Section headers: link drops under the title when space is tight. */
	.kfl-section-head {
		align-items: baseline;
	}

	.kfl-section-link {
		white-space: normal;
	}

	/* Trust strip: three compact rows. */
	.kfl-trust > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kfl-space-2);
	}

	.kfl-trust-item .wd-info-box {
		align-items: center;
		padding: var(--kfl-space-3) var(--kfl-space-4);
	}

	.kfl-trust-item .info-box-inner {
		display: none;
	}

	.kfl-trust-item .info-box-title {
		margin: 0;
	}

	/* Newsletter: stacked inputs. */
	.e-con.kfl-newsletter {
		padding: var(--kfl-space-5) !important; /* Elementor writes the desktop padding as an inline custom property */
	}

	.kfl-newsletter__row {
		flex-direction: column;
	}

	/* Footer: WoodMart collapses each widget behind its title; make the
	 * title a full-width ≥44px tap target. */
	.wd-footer .main-footer {
		padding-block: var(--kfl-space-4) var(--kfl-space-2);
	}

	.wd-footer .footer-column {
		margin: 0;
	}

	.wd-footer .footer-widget .widget-title {
		margin: 0;
		padding-block: 12px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.wd-footer .footer-widget .menu a {
		padding: 8px 0;
		font-size: var(--kfl-font-size-base);
	}

	.wd-footer .footer-column-1 .footer-widget {
		padding-block: var(--kfl-space-3) var(--kfl-space-4);
	}

	.kfl-footer-claim {
		max-width: none;
	}

	.wd-footer .wd-copyrights {
		text-align: center;
	}
}

/* ---------- ≤480: the two secondary promo tiles stack under the primary. */
@media (max-width: 480px) {
	.e-con.kfl-promo__secondary {
		--flex-direction: column;
		--container-widget-width: 100%;
		flex-direction: column;
	}

	.e-con.kfl-promo__secondary > .kfl-promo-tile {
		width: 100%;
	}

	.kfl-promo-tile--secondary .promo-banner {
		min-height: 112px;
	}
}