/* ==========================================================================
   Gallery Dark — Responsive Styles
   Kateryna Reznichenko Fine Art
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TABLET — max-width: 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	/* Gallery grid: 2 columns */
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Newsletter: reduce padding */
	.newsletter-section,
	.gd-newsletter {
		padding: 40px 28px;
	}

	/* WooCommerce shop: 2 columns (Astra overrides loop_shop_columns at this width) */
	.woocommerce ul.products.columns-3,
	.woocommerce-page ul.products.columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Single product: stack image + summary */
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		float: none;
		width: 100%;
	}

	/* Reduce heading sizes slightly */
	.woocommerce div.product h1.product_title {
		font-size: 1.3rem;
	}
}

/* --------------------------------------------------------------------------
   2. MOBILE — max-width: 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

	/* Gallery grid: 1 column */
	.gallery-grid {
		grid-template-columns: 1fr;
	}

	/* Always show overlay on mobile (no hover) */
	.gallery-grid__overlay {
		transform: translateY(0);
	}

	/* Site title: smaller */
	.site-title,
	.ast-site-name-wrap .site-title,
	.ast-site-name-wrap .site-title a {
		font-size: 0.9rem;
		letter-spacing: 2px;
	}

	/* WooCommerce products: 2 columns */
	.woocommerce ul.products.columns-3,
	.woocommerce-page ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce-page ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Product title and price: smaller */
	.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title {
		font-size: 0.85rem;
	}

	.woocommerce ul.products li.product .price,
	.woocommerce-page ul.products li.product .price {
		font-size: 0.9rem;
	}

	/* Single product title */
	.woocommerce div.product h1.product_title {
		font-size: 1.2rem;
	}

	/* Single product price */
	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 1.1rem;
	}

	/* Reduce section padding */
	.newsletter-section,
	.gd-newsletter {
		padding: 32px 20px;
		margin: 40px auto;
	}

	/* Hero section: smaller min-height on mobile */
	.hero-section,
	.wp-block-cover.hero-section {
		min-height: 60vh;
	}

	/* Navigation: ensure mobile menu inherits dark bg */
	.ast-mobile-header-wrap,
	.main-navigation.toggled ul {
		background-color: var(--gd-bg);
		border-bottom: 1px solid var(--gd-border);
	}

	/* Cart table: allow horizontal scroll */
	.woocommerce-cart .woocommerce {
		overflow-x: auto;
	}

	/* Checkout: stack columns */
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review {
		width: 100%;
		float: none;
	}

	/* Newsletter form: stack vertically */
	.newsletter-section form,
	.gd-newsletter form {
		flex-direction: column;
	}

	.newsletter-section input[type="email"],
	.gd-newsletter input[type="email"] {
		border-right: 1px solid var(--gd-border);
		margin-bottom: 8px;
	}

	/* Reduce font sizes for readability */
	body {
		font-size: 15px;
	}

	h1 { font-size: 1.6rem; }
	h2 { font-size: 1.3rem; }
	h3 { font-size: 1.1rem; }
}

/* --------------------------------------------------------------------------
   3. SMALL MOBILE — max-width: 480px
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	/* WooCommerce products: 1 column */
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-2,
	.woocommerce-page ul.products.columns-2,
	.woocommerce ul.products.columns-3,
	.woocommerce-page ul.products.columns-3 {
		grid-template-columns: 1fr;
	}

	/* Buttons: full width on very small screens */
	.woocommerce div.product form.cart .single_add_to_cart_button {
		width: 100%;
		text-align: center;
	}

	/* Reduce product title size further */
	.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title {
		font-size: 0.8rem;
	}

	/* Product tabs: reduce padding */
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 8px 12px;
		font-size: 0.7rem;
	}

	/* Tighten newsletter */
	.newsletter-section,
	.gd-newsletter {
		padding: 24px 16px;
	}

	/* Section label utility — slightly smaller on tiny screens */
	.section-label {
		font-size: 0.65rem;
		letter-spacing: 3px;
	}
}