/**
 * Responsive Styles – PhotoService Alternative (Mobile First)
 */

/* Tablet and below (max 1024px) */
@media (max-width: 1024px) {
	.shop-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.shop-layout .shop-sidebar { order: 2; }
	.shop-layout .shop-content { order: 1; }

	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.woocommerce-checkout form.woocommerce-checkout {
		grid-template-columns: 1fr;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order {
		position: static;
	}

	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}

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

/* Tablet (max 768px) */
@media (max-width: 768px) {
	.container { padding: 0 1rem; }
	.site-main { padding: 2rem 0; }

	/* Header & Mobile Menu Drawer */
	.menu-toggle { display: flex; }

	/* Backdrop */
	.menu-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(4px);
		z-index: 900;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}
	.menu-backdrop.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* Drawer */
	.main-navigation {
		position: fixed;
		top: 0;
		left: 0;
		width: 85%;
		max-width: 340px;
		height: 100vh;
		background: #fff;
		z-index: 1200;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateX(-100%);
		transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
		display: flex;
		flex-direction: column;
	}
	.main-navigation.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	/* Drawer Header */
	.drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.25rem;
		border-bottom: 1px solid var(--color-border, #E2E8F0);
		flex-shrink: 0;
	}
	.drawer-header .drawer-logo {
		max-height: 36px;
		width: auto;
	}
	.drawer-header .drawer-close {
		background: none;
		border: none;
		padding: 0.5rem;
		cursor: pointer;
		color: var(--color-text-muted, #64748B);
		border-radius: 8px;
		transition: background 0.2s, color 0.2s;
		box-shadow: none;
	}
	.drawer-header .drawer-close:hover {
		background: var(--color-surface, #F8F9FA);
		color: var(--color-dark, #0F172A);
		transform: none;
	}
	.drawer-header .drawer-close svg {
		width: 24px;
		height: 24px;
	}

	/* Drawer Body (scrollable) */
	.drawer-body {
		flex: 1;
		overflow-y: auto;
		padding: 0.75rem 0;
	}
	.drawer-body ul {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.drawer-body > ul > li {
		width: 100%;
	}
	.drawer-body a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.875rem 1.25rem;
		font-size: 1rem;
		font-weight: 500;
		color: var(--color-text, #1E293B);
		border-bottom: 1px solid var(--color-border, #E2E8F0);
		border-radius: 0;
		transition: background 0.15s, color 0.15s;
	}
	.drawer-body a:hover {
		background: var(--color-surface, #F8F9FA);
		color: var(--color-accent, #1B3A5F);
	}
	.drawer-body li.menu-item-has-children > a::after {
		content: '';
		display: inline-block;
		width: 20px;
		height: 20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		transition: transform 0.2s ease;
	}
	.drawer-body li.menu-item-has-children.is-open > a::after {
		transform: rotate(90deg);
	}
	.drawer-body ul ul {
		position: static;
		box-shadow: none;
		border: none;
		padding-left: 0;
		display: none;
		background: var(--color-surface-2, #F5F7FA);
	}
	.drawer-body ul ul a {
		padding-left: 2rem;
		font-size: 0.9375rem;
		border-bottom: none;
		color: var(--color-text-muted, #64748B);
	}
	.drawer-body li.is-open > ul { display: block; }

	/* Top bar */
	.top-bar-inner { flex-direction: column; gap: 0.5rem; text-align: center; }

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

	/* Shop toolbar */
	.shop-toolbar { flex-direction: column; gap: 0.75rem; align-items: flex-start; }

	/* Footer */
	.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
	.footer-bottom-inner { flex-direction: column; gap: 1rem; text-align: center; }

	/* Posts */
	.posts-grid { grid-template-columns: 1fr; }

	/* Dropzone */
	.woocommerce div.product .filePrint,
	.woocommerce div.product .dropzone {
		padding: 1.5rem;
		min-height: 160px;
	}

	/* Masonry grid – 2 columns on tablet */
	.home .content-page,
	.home article.post {
		max-width: 100% !important;
	}
	.element-item {
		padding: 0.5rem !important;
	}
	.button-group#filters button {
		padding: 0.625rem 1.25rem;
		font-size: 0.75rem;
	}

	/* Slider – tablet */
	.carousel-section .flexslider .slides img { height: 380px; }
	.carousel-section .flex-direction-nav a {
		width: 40px;
		height: 40px;
	}
	.carousel-section .flex-direction-nav a::before {
		line-height: 40px;
		font-size: 18px;
	}
	.carousel-section .flex-direction-nav .flex-prev { left: 0.5rem; }
	.carousel-section .flex-direction-nav .flex-next { right: 0.5rem; }
	.carousel-section .flex-control-nav li a {
		width: 10px;
		height: 10px;
	}
}

/* Mobile (max 480px) */
@media (max-width: 480px) {
	.site-branding img { max-height: 38px; }

	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}

	.woocommerce div.product .price { font-size: 1.25rem; }
	.woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
	.woocommerce div.product form.cart .single_add_to_cart_button { min-width: auto; }

	.woocommerce table.shop_table thead { display: none; }
	.woocommerce table.shop_table,
	.woocommerce table.shop_table tbody,
	.woocommerce table.shop_table tr,
	.woocommerce table.shop_table td { display: block; width: 100%; }
	.woocommerce table.shop_table tr { margin-bottom: 1rem; border: 1px solid var(--color-border, #E2E8F0); border-radius: 10px; padding: 1rem; }
	.woocommerce table.shop_table td { padding: 0.5rem 0; border: none; text-align: left !important; }
	.woocommerce table.shop_table td::before {
		content: attr(data-title) ": ";
		font-weight: 600;
		margin-right: 0.5rem;
	}
	.woocommerce table.shop_table .product-thumbnail { text-align: center !important; }
	.woocommerce table.shop_table .product-thumbnail img { max-width: 120px; margin: 0 auto; }

	.error-title { font-size: 6rem; }

	/* Masonry grid – single column on mobile */
	.element-item {
		padding: 0.375rem !important;
	}
	.woomsproduct h1,
	.woomsproduct h2,
	.woomsproduct h3,
	.woomsproduct h4,
	.woomsproduct h5,
	.woomsproduct h6 {
		font-size: 0.875rem !important;
		padding: 0.75rem 0.75rem 0.375rem !important;
	}
	.woomsproduct p { padding: 0 0.75rem; }
	.woomsproduct .woocommerce-Price-amount { font-size: 0.9375rem; }
	.woomscart.button.add_to_cart_button {
		padding: 0.625rem 0.75rem !important;
		font-size: 0.75rem !important;
		width: calc(100% - 1.5rem) !important;
		margin: 0 0.75rem 0.75rem !important;
	}
	.button-group#filters { margin-bottom: 1.5rem; }
	.button-group#filters button {
		padding: 0.5rem 1rem;
		font-size: 0.6875rem;
	}

	/* Slider – mobile */
	.carousel-section .flexslider .slides img { height: 300px; }
	.carousel-section .flex-direction-nav a {
		width: 34px;
		height: 34px;
	}
	.carousel-section .flex-direction-nav a::before {
		line-height: 34px;
		font-size: 16px;
	}
	.carousel-section .flex-direction-nav .flex-prev { left: 0.4rem; }
	.carousel-section .flex-direction-nav .flex-next { right: 0.4rem; }
	.carousel-section .custom-flex-dots li button {
		width: 8px;
		height: 8px;
		border-width: 1.5px;
	}
}