/* =============================================================================
 * Zoonum — Responsive overrides
 * Loaded after main.css and woocommerce.css so media-query rules win.
 * Breakpoints: 1024px (tablet/landscape), 768px (tablet/portrait), 480px (phone).
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * TABLET LANDSCAPE — 1024px and below
 * --------------------------------------------------------------------------- */
@media (max-width: 1024px) {

	.zoonum-container { padding: 0 20px; }

	/* Multi-col grids collapse one step */
	.zoonum-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.zoonum-cols-5,
	.zoonum-cols-6 { grid-template-columns: repeat(3, 1fr); }

	/* Benefits badge: 5 across → 3 across at this breakpoint */
	.zoonum-benefits--badge .zoonum-benefits__grid { grid-template-columns: repeat(3, 1fr); }

	/* Features + post-grid go from 3 columns to 2 */
	.zoonum-post-grid { grid-template-columns: repeat(2, 1fr); }
	.zoonum-testimonials__grid { grid-template-columns: repeat(2, 1fr); }

	/* Features two-column gets tighter */
	.zoonum-features__grid { gap: 40px; }
	.zoonum-hero__grid { gap: 40px; }

	/* WooCommerce product grid: 4 cols becomes 3 */
	.woocommerce ul.products,
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5 {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	/* Cart & checkout collapse to a single column on tablets (the two-column
	   layout gets too cramped below ~1024px). */
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-cart .cart-collaterals,
	.woocommerce-cart-form { grid-column: 1 !important; }
	.cart_totals { position: static !important; }

	.woocommerce-checkout form.checkout.woocommerce-checkout {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review { grid-column: 1 !important; grid-row: auto !important; }
	#order_review { position: static !important; }

	/* Contact page: form + info stack */
	.zoonum-contact-split { grid-template-columns: 1fr; }

	/* Footer: every column count collapses to 2 here */
	.zoonum-footer__grid,
	.zoonum-footer__grid--cols-3,
	.zoonum-footer__grid--cols-4,
	.zoonum-footer__grid--cols-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 32px; }
}

/* -----------------------------------------------------------------------------
 * TABLET PORTRAIT + LARGE PHONE — 768px and below
 * Most layout collapse happens here.
 * --------------------------------------------------------------------------- */
@media (max-width: 768px) {

	html { font-size: 15px; } /* slight global scale-down */

	.zoonum-container { padding: 0 16px; }

	/* Universal section padding reduction */
	.zoonum-section,
	.zoonum-hero,
	.zoonum-benefits,
	.zoonum-shop-section,
	.zoonum-features,
	.zoonum-testimonials,
	.zoonum-cta,
	.zoonum-faq { padding: 56px 0 !important; }

	.zoonum-section-head { margin-bottom: 36px; }

	/* All multi-column grids stack */
	.zoonum-cols-2,
	.zoonum-cols-3,
	.zoonum-cols-4,
	.zoonum-cols-5,
	.zoonum-cols-6 { grid-template-columns: 1fr; }

	/* Benefits badge: 5/4/3 across → 2 across on mobile (still feels compact) */
	.zoonum-benefits--badge .zoonum-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.zoonum-benefits--badge .zoonum-benefit { padding: 16px 12px; }

	/* HEADER — hide center zone (menu), hide most right-zone items, show mobile-only hamburger */
	.zoonum-header__zone--center { display: none; }
	.zoonum-header__nav { display: none; }
	.zoonum-header__cta { display: none; }
	.zoonum-header__hamburger--mobile-only { display: inline-flex; }
	.zoonum-header__inner { gap: 12px; padding: 12px 16px; min-height: 60px; }
	.zoonum-header__logo img { max-height: 40px; }

	/* HERO — stack, image first */
	.zoonum-hero { padding: 56px 0 !important; }
	.zoonum-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.zoonum-hero--reverse .zoonum-hero__grid { direction: ltr; } /* reset rtl trick on mobile */
	.zoonum-hero__media { order: -1; max-width: 480px; margin: 0 auto; }
	.zoonum-hero__title { font-size: 2rem; }
	.zoonum-hero__subtitle { font-size: 1rem; margin-bottom: 24px; }
	.zoonum-hero__buttons { justify-content: center; }
	.zoonum-hero__text { text-align: center; }

	/* BENEFITS / TESTIMONIALS / POST GRID — stack on mobile (badge variant uses 2-col rule above) */
	.zoonum-benefits--card .zoonum-benefits__grid,
	.zoonum-testimonials__grid,
	.zoonum-post-grid { grid-template-columns: 1fr; gap: 20px; }
	.zoonum-benefits--card .zoonum-benefit { padding: 24px; }

	/* FEATURES — stack with image on top */
	.zoonum-features__grid { grid-template-columns: 1fr; gap: 32px; }
	.zoonum-features__media { max-width: 480px; margin: 0 auto; }

	/* CTA */
	.zoonum-cta__inner { padding: 48px 24px; }
	.zoonum-cta__inner h2 { font-size: 1.6rem; }
	.zoonum-cta__inner p { font-size: 1rem; }

	/* WOOCOMMERCE — products to 2 cols, all multi-col WC layouts stack */
	.woocommerce ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product h2 { font-size: .95rem !important; padding: 12px 14px 2px !important; }
	.woocommerce ul.products li.product .price { padding: 0 14px 10px !important; font-size: 1rem !important; }
	.woocommerce ul.products li.product .button { margin: auto 14px 14px !important; width: calc(100% - 28px) !important; padding: 10px !important; font-size: .85rem !important; }

	/* Single product — stack gallery above summary */
	.single-product div.product { grid-template-columns: 1fr; gap: 32px; }
	.single-product .product .product_title { font-size: 1.6rem !important; }
	.single-product .product .price { font-size: 1.25rem !important; }

	/* Cart — single column, totals below */
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
	.cart_totals { position: static !important; max-width: none !important; margin-left: 0 !important; }
	/* Cart table responsive — stack rows as cards */
	.woocommerce-cart-form table.shop_table thead { display: none; }
	.woocommerce-cart-form table.shop_table tr { display: block; padding: 12px; border: 1px solid var(--z-border); border-radius: var(--z-radius-sm); margin-bottom: 12px; }
	.woocommerce-cart-form table.shop_table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: right;
		border: 0 !important;
		padding: 6px 0 !important;
	}
	.woocommerce-cart-form table.shop_table td::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--z-muted);
		font-size: .85rem;
		text-align: left;
	}
	.woocommerce-cart-form table.shop_table td.product-remove { justify-content: flex-end; }
	.woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail img { max-width: 60px; }

	/* Checkout — single column */
	.woocommerce-checkout .col2-set { grid-template-columns: 1fr; gap: 0; }
	#order_review { position: static !important; margin-top: 24px; }

	/* My Account — stack nav above content */
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-MyAccount-navigation { width: 100% !important; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; }
	.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 0; border-right: 1px solid var(--z-border); flex: 1 1 auto; }
	.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 12px 16px; font-size: .85rem; text-align: center; }

	/* FOOTER — every column count fully stacks at this breakpoint */
	.zoonum-footer { margin-top: 56px; }
	.zoonum-footer__grid,
	.zoonum-footer__grid--cols-1,
	.zoonum-footer__grid--cols-2,
	.zoonum-footer__grid--cols-3,
	.zoonum-footer__grid--cols-4,
	.zoonum-footer__grid--cols-5 { grid-template-columns: 1fr !important; gap: 32px; }
	.zoonum-footer__main { padding: 48px 0 24px; }
	.zoonum-footer__copyright-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
	.zoonum-menu--copyright { flex-wrap: wrap; gap: 16px; }

	/* Search form */
	.zoonum-search-form { flex-direction: column; }

	/* 404 actions stack */
	.zoonum-404__actions { flex-direction: column; }
	.zoonum-404__actions .zoonum-btn { width: 100%; }

	/* Larger touch targets */
	.zoonum-btn { min-height: 44px; }

	/* Fixed/parallax page backgrounds are broken & janky on iOS — fall back to
	   scroll so the image still shows correctly on phones and tablets. */
	body.zoonum-bg-fixed { background-attachment: scroll !important; }

	/* WC page extras */
	.zoonum-shop-banner { margin-bottom: 28px; }
	.zoonum-trust-row--cart,
	.zoonum-trust-row--checkout { justify-content: center; }
	.zoonum-next-steps__grid { grid-template-columns: 1fr; }
	.woocommerce-cart table.cart td.actions { flex-direction: column; align-items: stretch; }
	.woocommerce-cart table.cart td.actions .coupon { flex: 1 1 auto; }
	.woocommerce-cart table.cart td.actions > button[name="update_cart"] { width: 100%; }

	/* Extra pages */
	.zoonum-contact-form-col, .zoonum-contact-info-box, .zoonum-contact-faq-box { padding: 20px; }
	.zoonum-faq__q { padding: 16px 18px; font-size: 1rem; }
	.zoonum-faq__a { padding: 0 18px 16px; }

	/* Single product: related row to 2 columns */
	.single-product .related.products ul.products,
	.single-product .upsells.products ul.products,
	.single-product .related.products ul.products.columns-4,
	.single-product .related.products ul.products.columns-5 { grid-template-columns: repeat(2,1fr) !important; }
}

/* -----------------------------------------------------------------------------
 * SMALL PHONE — 480px and below
 * --------------------------------------------------------------------------- */
@media (max-width: 480px) {

	/* WC products go to 1 col on the smallest screens to keep cards usable */
	.woocommerce ul.products,
	.woocommerce ul.products.columns-2,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4 {
		grid-template-columns: 1fr !important;
	}

	.zoonum-hero__buttons { flex-direction: column; align-items: stretch; }
	.zoonum-hero__buttons .zoonum-btn { width: 100%; }

	/* Side cart spans the screen on small phones */
	.zoonum-sidecart { width: 100%; max-width: 100%; }

	.zoonum-cta__inner { padding: 40px 20px; }
	.zoonum-cta__inner h2 { font-size: 1.4rem; }

	.zoonum-benefits--badge .zoonum-benefits__grid { grid-template-columns: 1fr; }
	.zoonum-benefits--card .zoonum-benefit { padding: 20px; }
	.zoonum-testimonial { padding: 24px; }

	/* My account nav switches back to vertical pill style on tiny screens */
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; }
	.woocommerce-account .woocommerce-MyAccount-navigation li { border-right: 0; border-bottom: 1px solid var(--z-border); }
}

/* -----------------------------------------------------------------------------
 * HIGH-DPI / RETINA + REDUCED MOTION
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}