/*
 * TDSD wide screens and tablets (2026-10-23).
 *
 * One fluid container for the top bar, header, navigation, content and footer. Before this sheet the
 * header and footer were capped at 1290px while the content sat in Hello Elementor's .site-main ladder
 * (500/600/800/1140px), and on WooCommerce pages the whole <body> was capped at 1290px with 24px of
 * padding (style.css ".woocommerce, .woocommerce-page" also matches <body>).
 *
 * Loaded last by mu-plugins/tdsd-wide.php with media="(min-width: 576px)", so phones never wait for it
 * (every rule here is for 576px and up). Three small all-width fixes are printed inline by that plugin.
 * It only overrides; Max's sheets are untouched.
 * Revert: delete mu-plugins/tdsd-wide.php (this file is then no longer loaded) and purge the page cache.
 */

:root {
	--tdsd-wrap: 1290px;   /* outer width of every container, gutters included */
	--tdsd-gutter: 15px;
}

@media (min-width: 1200px) {
	:root {
		/* 1290px up to ~1400px wide, then 92% of the screen, never wider than 1920px (2560px screens). */
		--tdsd-wrap: clamp(1290px, 92vw, 1920px);
		--tdsd-gutter: clamp(15px, calc(4vw - 40px), 40px);
	}
}

/* ---------------------------------------------------------------------------------------------
 * Tablet and up: drop Hello Elementor's .site-main width ladder (600px at 768, 800px at 992) on the
 * store's own <main>, and on cart/checkout/account. Other content pages keep their reading width.
 * ------------------------------------------------------------------------------------------- */
@media (min-width: 576px) {
	body.tdsd-ui-design #tdsd-main-content.site-main,
	body.tdsd-ui-design:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) #tdsd-main-content .site-main,
	body.tdsd-ui-design:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .page-header .entry-title {
		max-width: none;
	}
}

/* Tablets: the filter sidebar takes its narrowest width (Max's own 210px minimum), which leaves room for
   2 product cards at 768px and 3 at 1024px instead of a single card, with the 226px card minimum kept. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	body.tdsd-ui-design .shop-wrap {
		grid-template-columns: 210px minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------------------------
 * Desktop: the shared container.
 * ------------------------------------------------------------------------------------------- */
@media (min-width: 1200px) {

	/* WooCommerce pages: the body is full width again, like the home page and product pages. */
	body.tdsd-ui-design:is(.woocommerce, .woocommerce-page) {
		max-width: none;
		margin: 0;
		padding-inline: 0;
	}
	body.tdsd-ui-design:is(.woocommerce, .woocommerce-page) > :is(.top-util, header.site, .navbar, .ticker, footer.site-foot) {
		margin-inline: 0;
	}

	/* Header, navigation, sticky bar and footer. */
	body.tdsd-ui-design :is(.top-util-in, .header-in, .navbar-in, .tdsd-sticky-in, .foot-in, .foot-bottom) {
		max-width: var(--tdsd-wrap);
		margin-inline: auto;
		padding-inline: var(--tdsd-gutter);
	}

	/* Home, category and 404 blocks are direct children of <main>. */
	body.tdsd-ui-design #tdsd-main-content > :is(.hero-wrap, .trust-row, .section, .campaign-wrap, .sub-banners, .woocommerce-breadcrumb, .shop-wrap, .nf-wrap) {
		max-width: var(--tdsd-wrap);
		margin-inline: auto;
		padding-inline: var(--tdsd-gutter);
	}
	/* Home product sections: the [products] shortcode wrapper div.woocommerce kept its own 1290px cap. */
	body.tdsd-ui-design #tdsd-main-content > .section > .woocommerce {
		max-width: none;
		padding-inline: 0;
	}
	/* The archive template wraps Woo's breadcrumb <nav> in a div of the same class. */
	body.tdsd-ui-design .woocommerce-breadcrumb .woocommerce-breadcrumb {
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	/* Cart, checkout and account pages (Hello page template inside <main>). */
	body.tdsd-ui-design:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) #tdsd-main-content > .site-main > :is(.page-header, .page-content) {
		max-width: var(--tdsd-wrap);
		margin-inline: auto;
		padding-inline: var(--tdsd-gutter);
	}
	body.tdsd-ui-design:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .page-header .entry-title {
		padding-inline: 0;
	}
	body.tdsd-ui-design:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .page-content > .woocommerce {
		max-width: none;
		padding-inline: 0;
	}

	/* Single product: the page used its own 1640px frame; align it with the header instead. */
	body.tdsd-ui-design.single-product #tdsd-main-content {
		max-width: var(--tdsd-wrap);
		padding-inline: var(--tdsd-gutter);
	}
	body.tdsd-ui-design.single-product #tdsd-main-content :is(.woocommerce-breadcrumb, .spec-section, .product-overview, .related.products, .up-sells, .related.products > h2, .up-sells > h2) {
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	/* Product grids: Max's 226px minimum card stays, but never more than 5 cards per row, so the
	   10 deals and 10 new products on the home page and 20 per category page fill complete rows.
	   The cap subtracts 76px, a little more than the 4 x 18px gaps of a 5-card row: 5 cards always
	   fit (5 x min + 72 = width - 4), a sixth never does. */
	body.tdsd-ui-design .woocommerce ul.products,
	body.tdsd-ui-design.woocommerce-page ul.products {
		grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 226px), calc((100% - 76px) / 5)), 1fr)) !important;
	}

	/* Header search: centred between logo and actions instead of hugging the logo on wide screens. */
	body.tdsd-ui-design header.site .search-row {
		margin-inline: auto;
		max-width: 960px;
	}

	/* Home hero: the side banners and the slide grow with the screen, the product photo stays within
	   its 500px source (sizes in front-page.php already pick that file). */
	body.tdsd-ui-design #tdsd-main-content > .hero-wrap {
		grid-template-columns: minmax(0, 1fr) clamp(330px, 22vw, 440px);
	}
	body.tdsd-ui-design #tdsd-main-content .hero-c {
		min-height: clamp(430px, 25vw, 520px);
	}
	body.tdsd-ui-design #tdsd-main-content .hero-slide {
		padding: clamp(36px, 2.5vw, 56px) clamp(48px, 3.4vw, 80px);
	}
	body.tdsd-ui-design #tdsd-main-content .hero-slide .visual img {
		max-height: clamp(300px, 20vw, 420px);
	}
	body.tdsd-ui-design #tdsd-main-content .hero-slide h1 {
		font-size: clamp(28px, 1.6vw, 38px);
	}
	body.tdsd-ui-design #tdsd-main-content .hero-c .hprice {
		font-size: clamp(32px, 1.9vw, 42px);
	}

	/* Campaign carousel: taller on wide screens so the photo keeps about the same crop. */
	body.tdsd-ui-design #tdsd-main-content .campaigns {
		height: clamp(220px, 15vw, 340px);
	}
}

/* Cart: items and order summary side by side once there is room (RTL: summary on the left). */
@media (min-width: 1280px) {
	body.tdsd-ui-design.woocommerce-cart .page-content > .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(380px, 28vw, 480px);
		column-gap: clamp(20px, 2vw, 36px);
		align-items: start;
	}
	body.tdsd-ui-design.woocommerce-cart .page-content > .woocommerce > * {
		grid-column: 1 / -1;
		min-width: 0;
	}
	body.tdsd-ui-design.woocommerce-cart .page-content > .woocommerce > form.woocommerce-cart-form {
		grid-column: 1;
	}
	body.tdsd-ui-design.woocommerce-cart .page-content > .woocommerce > .cart-collaterals {
		grid-column: 2;
		position: sticky;
		top: 76px; /* below the sticky navbar, like the product gallery */
	}
	body.tdsd-ui-design.woocommerce-cart .cart-collaterals .cart_totals {
		float: none;
		width: 100%;
	}
}

/* Wide screens: the 8 popular categories in one row instead of two rows of oversized tiles. */
@media (min-width: 1800px) {
	body.tdsd-ui-design #tdsd-main-content .pop-cats {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}