/**
 * Erbaa Yaprak - Responsive Styles (Premium)
 *
 * Mobile-first responsive breakpoints for the premium e-commerce theme.
 *
 * Breakpoints:
 *   - Small:  <= 576px  (phones portrait)
 *   - Medium: <= 768px  (phones landscape, small tablets)
 *   - Large:  <= 992px  (tablets)
 *   - XLarge: <= 1200px (small desktops)
 *
 * @package Erbaa_Yaprak
 * @since 1.0.0
 */

/* ========================================
   <= 1200px - Small Desktops
   ======================================== */

@media (max-width: 1200px) {
	:root {
		--container-width: 960px;
	}

	/* Header */
	.header-inner { gap: 24px; }

	/* Hero */
	.hero-section { padding: 100px 0 80px; }
	.hero-title { font-size: 3rem; }
	.hero-stats { gap: 36px; }
	.hero-stat-number { font-size: 1.75rem; }

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

	/* Checkout */
	.erbaa-checkout-layout { gap: 32px; }
	.cart-collaterals-main { gap: 24px; }

	/* Production Steps */
	.production-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   <= 992px - Tablets
   ======================================== */

@media (max-width: 992px) {
	:root {
		--container-width: 720px;
	}

	/* Layout */
	.content-area { flex-direction: column; gap: 32px; }
	.widget-area { width: 100%; }
	.woocommerce-page .container { flex-direction: column; }

	/* Shop Layout */
	.shop-layout { flex-direction: column; gap: 32px; }

	/* Checkout */
	.erbaa-checkout-layout { grid-template-columns: 1fr; }
	.erbaa-checkout-order { position: static; }
	.cart-collaterals-main { grid-template-columns: 1fr; }

	/* Product Grid */
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }

	/* Footer */
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	.footer-payment-info { grid-column: span 2; text-align: center; }
	.footer-payment-info .payment-icons { justify-content: center; }
	.footer-address { justify-content: center; }
	.footer-widgets-grid.footer-columns-4 { grid-template-columns: repeat(2, 1fr); }

	/* Header Search */
	.header-search-form { flex-direction: row; }

	/* Single Product */
	.single-product-top { grid-template-columns: 1fr !important; gap: 24px; }

	/* My Account */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none; width: 100%;
		margin-right: 0; margin-bottom: 24px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; }

	.woocommerce-account .woocommerce-MyAccount-navigation ul li {
		border-bottom: none;
		border-right: 1px solid var(--border);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-right: none; }

	/* Hero */
	.hero-section { padding: 80px 0 64px; }
	.hero-title { font-size: 2.5rem; }
	.hero-stats { gap: 28px; margin-top: 40px; padding-top: 32px; }
	.hero-stat-number { font-size: 1.5rem; }

	/* Section Titles */
	.section-title { font-size: 1.85rem; }

	/* Sections */
	.featured-products-section,
	.about-section,
	.page-content-section { padding: 60px 0; }

	.about-content-section,
	.values-section,
	.testimonials-section,
	.features-section,
	.categories-section,
	.social-section,
	.mission-vision-section,
	.production-section,
	.erbaa-intro-section,
	.cta-section,
	.contact-content-section,
	.faq-content-section { padding: 60px 0; }

	.map-section { padding: 0 0 60px; }

	/* Grids - 3 col to 2 */
	.erbaa-grid-3 { grid-template-columns: repeat(2, 1fr); }

	/* About Content */
	.about-page-content,
	.about-grid { grid-template-columns: 1fr; gap: 32px; }

	/* Contact Grid */
	.contact-grid { grid-template-columns: 1fr; gap: 32px; }

	/* Posts Grid */
	.posts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   <= 768px - Phones Landscape / Small Tablets
   ======================================== */

@media (max-width: 768px) {
	:root {
		--header-height: 64px;
	}

	/* Header - Mobile */
	.menu-toggle { display: block; }

	.primary-menu-container {
		display: none;
		position: absolute;
		top: var(--header-height);
		left: 0; right: 0;
		background: var(--bg-white);
		box-shadow: var(--shadow-lg);
		padding: 16px;
		z-index: 999;
		border-top: 1px solid var(--border-light);
	}

	.primary-menu-container.toggled { display: block; }

	.main-navigation { flex: 0; }
	.main-navigation ul { flex-direction: column; gap: 0; }

	.main-navigation ul ul {
		position: static; box-shadow: none;
		padding-left: 16px; display: flex;
		border: none; animation: none;
		opacity: 1; transform: none;
		background: transparent;
		border-radius: 0;
	}

	.main-navigation a {
		padding: 14px 16px;
		border-bottom: 1px solid var(--border-light);
		border-radius: 0;
	}

	.main-navigation a::after { display: none; }

	.main-navigation ul ul a {
		padding: 12px 16px;
		font-size: 0.88rem;
	}

	/* Site Branding - compact for mobile */
	.site-logo img { max-height: 32px; }
	.site-title { font-size: 1.05rem; }
	.site-description { display: none; }

	/* Header: single row — branding left, icons+hamburger right */
	.header-inner {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 0;
	}

	.site-branding {
		flex: 1 1 0;
		min-width: 0;
		gap: 8px;
	}

	.site-branding-text { min-width: 0; }
	.site-title a {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}

	/* Kill flex:1 on nav so it doesn't push things down */
	.main-navigation {
		flex: 0 0 auto !important;
		order: 3;
	}

	.header-actions {
		flex: 0 0 auto;
		order: 2;
		gap: 2px;
	}

	.header-cart,
	.header-search-toggle {
		width: 36px;
		height: 36px;
	}

	.header-cart svg { width: 18px; height: 18px; }
	.header-search-toggle svg { width: 18px; height: 18px; }

	.cart-count {
		font-size: 0.58rem;
		min-width: 15px;
		height: 15px;
		line-height: 15px;
		top: 2px;
		right: 2px;
	}

	.menu-toggle {
		width: 36px;
		height: 36px;
		padding: 6px;
	}

	.hamburger-box {
		width: 20px;
		gap: 4px;
	}
	.header-search-toggle svg { width: 20px; height: 20px; }
	.cart-count { font-size: 0.6rem; min-width: 16px; height: 16px; }

	/* Hero */
	.hero-section { padding: 64px 0 56px; }
	.hero-title { font-size: 2rem; }

	.hero-badge {
		font-size: 0.78rem;
		padding: 6px 16px;
		margin-bottom: 20px;
	}

	.hero-subtitle { margin-bottom: 28px; font-size: 1rem; }

	.hero-stats {
		flex-direction: column;
		gap: 16px;
		margin-top: 32px;
		padding-top: 24px;
	}

	.hero-stat { display: flex; align-items: center; gap: 12px; }
	.hero-stat-number { font-size: 1.3rem; }
	.hero-stat-label { margin-top: 0; }

	/* Posts Grid */
	.posts-grid { grid-template-columns: 1fr; gap: 24px; }

	/* Footer */
	.footer-grid { grid-template-columns: 1fr; gap: 24px; }
	.footer-payment-info { grid-column: span 1; }
	.footer-widgets-grid.footer-columns-3,
	.footer-widgets-grid.footer-columns-4,
	.footer-widgets-grid.footer-columns-2 { grid-template-columns: 1fr; }

	/* About Section */
	.about-grid { grid-template-columns: 1fr; gap: 32px; }
	.about-image img { height: 300px; }

	/* Pagination */
	.pagination, .nav-links { flex-wrap: wrap; gap: 6px; margin-top: 32px; }

	.page-numbers {
		min-width: 40px; height: 40px;
		font-size: 0.85rem;
	}

	/* Breadcrumbs */
	.breadcrumb-list { font-size: 0.78rem; }

	/* Buttons */
	.btn { padding: 12px 24px; font-size: 0.9rem; }
	.btn-lg { padding: 14px 32px; font-size: 0.95rem; }

	/* Sections */
	.featured-products-section,
	.about-section,
	.page-content-section { padding: 48px 0; }

	.about-content-section,
	.values-section,
	.testimonials-section,
	.features-section,
	.categories-section,
	.social-section,
	.mission-vision-section,
	.production-section,
	.erbaa-intro-section,
	.cta-section,
	.contact-content-section,
	.faq-content-section { padding: 48px 0; }

	.map-section { padding: 0 0 48px; }

	.section-header { margin-bottom: 32px; }
	.section-title { font-size: 1.6rem; }
	.section-subtitle { font-size: 0.95rem; margin-bottom: 32px; }

	/* Grids - all to 1 col */
	.erbaa-grid-3,
	.erbaa-grid-2 { grid-template-columns: 1fr; }

	.erbaa-grid-4 { grid-template-columns: repeat(2, 1fr); }

	/* Production */
	.production-steps { grid-template-columns: 1fr; gap: 24px; }

	/* Page Hero */
	.page-hero { padding: 48px 0; }
	.page-hero::after { height: 30px; }
	.page-hero-title { font-size: 1.85rem; }

	/* Hero wave */
	.hero-section::after { height: 50px; }

	/* CTA */
	.cta-section { padding: 56px 0; }
	.cta-title { font-size: 1.75rem; }
	.cta-actions { flex-direction: column; align-items: center; }
	.cta-actions .btn { min-width: 240px; }

	/* Social */
	.social-links-bar { flex-direction: column; align-items: center; }
	.social-link { width: 100%; max-width: 280px; justify-content: center; }

	/* WooCommerce Tabs */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-direction: column; gap: 0;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 0; }

	/* Tab navigation */
	.tab-nav { flex-wrap: wrap; }
	.tab-btn { padding: 10px 16px; font-size: 0.85rem; }

	/* Contact Form */
	.contact-form-area { padding: 24px; }
	.contact-form-area h2 { font-size: 1.15rem; }

	/* Error 404 */
	.error-404 { padding: 48px 0; }
	.error-404 .page-title { font-size: 4rem; }

	/* WhatsApp Float */
	.whatsapp-float {
		right: 16px;
		bottom: 80px;
		width: 50px;
		height: 50px;
	}

	.scroll-to-top {
		bottom: 20px;
		right: 16px;
		width: 42px;
		height: 42px;
	}

	/* Topbar */
	.topbar { font-size: 0.75rem; padding: 6px 0; }
}

/* ========================================
   <= 576px - Phones Portrait
   ======================================== */

@media (max-width: 576px) {
	/* Container */
	.container { padding: 0 16px; }

	/* Hero */
	.hero-section { padding: 48px 0 44px; }
	.hero-title { font-size: 1.75rem; }
	.hero-badge { font-size: 0.72rem; padding: 5px 14px; }
	.hero-subtitle { font-size: 0.95rem; }

	.hero-actions {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.hero-actions .btn { width: 100%; max-width: 280px; }

	/* Products Grid - 2 columns on mobile, minimal cards */
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 8px; }

	.erbaa-product-card { border-radius: 8px; }

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.78rem;
		line-height: 1.3;
		margin-bottom: 2px;
	}

	.woocommerce ul.products li.product .price {
		font-size: 0.82rem;
		margin-bottom: 4px;
	}

	.product-card-details { padding: 8px; }
	.product-card-category { font-size: 0.62rem; margin-bottom: 1px; }
	.product-card-actions { padding: 0 8px 8px; gap: 4px; }
	.product-card-actions .button { font-size: 0.72rem; padding: 6px 10px; }
	.product-card-stock { font-size: 0.68rem; }

	/* Badges - smaller on mobile */
	.product-badges { top: 6px; left: 6px; right: 6px; gap: 3px; }
	.product-badge { padding: 2px 6px; font-size: 0.58rem; border-radius: 3px; }

	/* Product card image overlay - hide on mobile for cleaner look */
	.product-card-overlay { display: none; }

	/* Star rating compact */
	.woocommerce ul.products li.product .star-rating { font-size: 0.65rem; margin-bottom: 2px; }

	/* Single Product */
	.single-product div.product .product_title { font-size: 1.4rem; }
	.single-product div.product .price { font-size: 1.2rem; }

	/* Cart */
	.woocommerce table.shop_table .actions .coupon { flex-direction: column; }
	.woocommerce table.shop_table .actions .coupon .input-text { width: 100%; }

	/* Checkout */
	.woocommerce-checkout #payment .place-order .button {
		font-size: 1rem; padding: 14px; width: 100%;
	}

	/* My Account Navigation */
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; }

	.woocommerce-account .woocommerce-MyAccount-navigation ul li {
		border-right: none;
		border-bottom: 1px solid var(--border);
	}

	/* Page Title */
	.page-title { font-size: 1.4rem; }
	.page-hero-title { font-size: 1.5rem; }
	.entry-title { font-size: 1.05rem; }

	/* Widget */
	.widget { padding: 20px; border-radius: var(--radius-sm); }

	/* Footer - handled in main.css @media */

	/* Sections */
	.about-content-section,
	.values-section,
	.testimonials-section,
	.features-section,
	.categories-section,
	.social-section,
	.mission-vision-section,
	.production-section,
	.erbaa-intro-section,
	.cta-section,
	.contact-content-section,
	.faq-content-section { padding: 36px 0; }

	.map-section { padding: 0 0 36px; }

	.section-title { font-size: 1.4rem; }

	/* Cards */
	.feature-card { padding: 28px 20px; }
	.feature-card-icon { width: 60px; height: 60px; }
	.value-card { padding: 28px 20px; }
	.testimonial-card { padding: 24px; }
	.contact-detail-card { padding: 18px; }
	.mission-card, .vision-card { padding: 28px 20px; }

	/* Category Cards */
	.category-card-image { height: 160px; }
	.category-card-info { padding: 16px; }

	/* Step Number */
	.step-number { width: 48px; height: 48px; font-size: 1.1rem; }

	.erbaa-contact-form input[type="text"],
	.erbaa-contact-form input[type="email"],
	.erbaa-contact-form input[type="tel"],
	.erbaa-contact-form textarea { padding: 10px 14px; font-size: 0.9rem; }

	/* Toast */
	.erbaa-toast { font-size: 0.82rem; padding: 12px 20px; max-width: calc(100vw - 32px); }

	/* Search */
	.search-form { flex-direction: column; }
	.search-form .search-submit { width: 100%; }

	/* Quantity */
	.quantity-wrapper .qty { width: 48px; padding: 8px 2px; }
	.qty-btn { width: 36px; height: 36px; }

	/* FAQ */
	.faq-cta { padding: 24px; }

	/* Page Hero */
	.page-hero { padding: 36px 0; }
	.page-hero::after { height: 24px; }

	/* Accordion */
	.accordion-header { padding: 14px 16px; font-size: 0.92rem; }

	/* CTA */
	.cta-title { font-size: 1.5rem; }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
	.site-header,
	.site-footer,
	.main-navigation,
	.header-actions,
	.widget-area,
	.breadcrumbs,
	.pagination,
	.nav-links,
	.woocommerce-ordering,
	.menu-toggle,
	.scroll-to-top,
	.whatsapp-float,
	.cta-section,
	.social-section,
	.hero-section::before,
	.hero-section::after,
	.page-hero::before,
	.page-hero::after {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
		font-size: 12pt;
		font-family: Georgia, 'Times New Roman', serif;
	}

	.container {
		max-width: 100%;
		padding: 0;
	}

	a { color: #000; text-decoration: underline; }

	img { max-width: 100% !important; }

	.hero-section,
	.page-hero,
	.cta-section {
		background: none !important;
		color: #000 !important;
		padding: 24px 0 !important;
	}

	.hero-title,
	.page-hero-title { color: #000 !important; }
}