/**
 * TSKLuxe Responsive Styles
 *
 * Global responsive media queries for all breakpoints.
 * Breakpoints: 320px (mobile), 768px (tablet), 1024px (desktop), 1920px (large).
 * Ensures navigation, product images, checkout forms, and cart adapt properly.
 *
 * @package TSKLuxe
 */

/* ========================================================================
   Base Mobile Styles (320px and up)
   ======================================================================== */

/* Touch-friendly tap targets — minimum 44px */
a,
button,
input[type="submit"],
.button,
.added_to_cart,
.quantity input {
	min-height: 44px;
}

/* Prevent horizontal overflow */
html {
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

/* ========================================================================
   Small Mobile (max-width: 479px)
   ======================================================================== */

@media screen and (max-width: 479px) {
	/* Navigation */
	.main-navigation {
		padding: 0;
	}

	.main-navigation ul li a {
		padding: 12px 15px;
		font-size: 14px;
	}

	/* Product grid — single column */
	.woocommerce ul.products[class*="columns-"] {
		display: grid;
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.woocommerce ul.products li.product {
		width: 100%;
		margin: 0;
	}

	/* Product images */
	.woocommerce div.product div.images {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}

	.woocommerce div.product div.summary {
		width: 100%;
		float: none;
	}

	/* Cart table */
	.woocommerce table.shop_table {
		font-size: 13px;
	}

	.woocommerce table.shop_table td {
		padding: 8px 6px;
	}

	.woocommerce .cart_totals {
		width: 100%;
		float: none;
	}

	/* Checkout form */
	.woocommerce-checkout .col-1,
	.woocommerce-checkout .col-2 {
		width: 100%;
		float: none;
	}

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 100%;
		float: none;
	}

	/* Variation selectors */
	.woocommerce div.product form.cart .variations td {
		display: block;
		width: 100%;
	}

	.woocommerce div.product form.cart .variations select {
		width: 100%;
		min-height: 44px;
		font-size: 16px;
	}

	/* Quantity input */
	.woocommerce .quantity .qty {
		width: 60px;
		min-height: 44px;
		font-size: 16px;
	}

	/* Add to cart button */
	.woocommerce div.product form.cart .button {
		width: 100%;
		padding: 14px 20px;
		font-size: 16px;
	}

	/* Hero section */
	.tskluxe-hero {
		padding: 40px 15px;
	}

	.tskluxe-hero h1 {
		font-size: 1.6rem;
	}
}

/* ========================================================================
   Mobile / Small Tablet (320px — 767px)
   ======================================================================== */

@media screen and (min-width: 320px) and (max-width: 767px) {
	/* Navigation — hamburger menu via Storefront handles this */
	.site-header {
		padding: 10px 15px;
	}

	.site-branding {
		text-align: center;
	}

	/* Product grid — two columns on larger phones */
	.woocommerce ul.products[class*="columns-"] {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.woocommerce ul.products li.product {
		width: 100%;
		margin: 0;
	}

	/* Ensure product thumbnails fill grid */
	.woocommerce ul.products li.product a img {
		width: 100%;
		height: auto;
	}

	/* Cart — stack columns on mobile */
	.woocommerce-cart table.cart .product-thumbnail {
		width: 60px;
	}

	.woocommerce-cart table.cart .product-thumbnail img {
		width: 60px;
		height: auto;
	}

	/* Checkout — full width columns */
	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2 {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}

	/* Order review on checkout */
	.woocommerce-checkout #order_review {
		width: 100%;
		float: none;
	}

	/* Touch-friendly form inputs */
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce form .form-row textarea {
		font-size: 16px;
		padding: 10px 12px;
		min-height: 44px;
	}

	/* WhatsApp button — ensure visible on mobile */
	.tskluxe-whatsapp-float {
		bottom: 20px;
		right: 20px;
		width: 56px;
		height: 56px;
	}
}

/* ========================================================================
   Tablet (768px — 1023px)
   ======================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* Navigation */
	.main-navigation ul li a {
		padding: 10px 15px;
	}

	/* Product grid — 3 columns */
	.woocommerce ul.products[class*="columns-"] {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.woocommerce ul.products li.product {
		width: 100%;
		margin: 0;
	}

	/* Single product layout */
	.woocommerce div.product div.images {
		width: 48%;
		float: left;
	}

	.woocommerce div.product div.summary {
		width: 48%;
		float: right;
	}

	/* Cart layout */
	.woocommerce .cart_totals {
		width: 48%;
		float: right;
	}

	/* Checkout — side by side */
	.woocommerce-checkout #customer_details .col-1 {
		width: 48%;
		float: left;
	}

	.woocommerce-checkout #customer_details .col-2 {
		width: 48%;
		float: right;
	}

	/* Hero section */
	.tskluxe-hero {
		padding: 60px 30px;
	}

	.tskluxe-hero h1 {
		font-size: 2rem;
	}
}

/* ========================================================================
   Desktop (1024px — 1919px)
   ======================================================================== */

@media screen and (min-width: 1024px) and (max-width: 1919px) {
	/* Product grid — 4 columns */
	.woocommerce ul.products[class*="columns-"] {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 25px;
	}

	.woocommerce ul.products li.product {
		width: 100%;
		margin: 0;
	}

	/* Single product layout */
	.woocommerce div.product div.images {
		width: 48%;
		float: left;
	}

	.woocommerce div.product div.summary {
		width: 48%;
		float: right;
	}

	/* Cart page */
	.woocommerce-cart .cart-collaterals {
		width: 40%;
		float: right;
	}

	/* Checkout layout */
	.woocommerce-checkout #customer_details {
		width: 55%;
		float: left;
	}

	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		width: 40%;
		float: right;
	}
}

/* ========================================================================
   Large Desktop (1920px and up)
   ======================================================================== */

@media screen and (min-width: 1920px) {
	/* Constrain content width for large monitors */
	.col-full,
	.site-content {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Product grid — 4 columns with more spacing */
	.woocommerce ul.products[class*="columns-"] {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
	}

	.woocommerce ul.products li.product {
		width: 100%;
		margin: 0;
	}

	/* Increase font sizes for readability on large screens */
	body {
		font-size: 17px;
	}

	.woocommerce div.product p.price {
		font-size: 1.5em;
	}
}

/* ========================================================================
   General Responsive Utilities
   ======================================================================== */

/* Ensure tables are scrollable on small screens */
.woocommerce table.shop_table_responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Accessible focus states */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 2px solid #F178AE;
	outline-offset: 2px;
}

/* Ensure coupon form adapts on mobile */
@media screen and (max-width: 767px) {
	.woocommerce .cart .coupon {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.woocommerce .cart .coupon #coupon_code {
		width: 100%;
	}

	.woocommerce .cart .coupon .button {
		width: 100%;
	}
}

/* Related products and cross-sells responsive grid */
@media screen and (max-width: 767px) {
	.woocommerce .related ul.products,
	.woocommerce .cross-sells ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media screen and (max-width: 479px) {
	.woocommerce .related ul.products,
	.woocommerce .cross-sells ul.products {
		grid-template-columns: 1fr !important;
	}
}