/**
 * Fragranz Fables - Shop Responsive Styles
 * Mobile filter drawer, responsive columns (3 desktop, 2 tablet, 1 mobile), touch optimization
 */

/* ==================================================
   TABLET RESPONSIVE (max-width: 1024px)
   ================================================== */
@media (max-width: 1024px) {
	.ff-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.ff-shop-hero {
		min-height: 280px;
	}

	.ff-shop-hero-title {
		font-size: 42px;
	}

	.ff-shop-hero-desc {
		font-size: 16px;
	}

	.ff-shop-sidebar {
		flex: 0 0 28%;
		max-width: 28%;
	}

	.ff-shop-products-column {
		flex: 0 0 calc(72% - 24px);
		max-width: calc(72% - 24px);
	}

	.ff-shop-layout-row {
		gap: 24px;
	}

	.ff-product-grid.cols-desktop-3,
	.ff-product-grid.cols-tablet-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px;
	}

	.ff-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 0;
	}

	.ff-service-col.has-divider:nth-child(2)::after {
		display: none;
	}
}

/* ==================================================
   MOBILE / SMALL TABLET (max-width: 768px)
   ================================================== */
@media (max-width: 768px) {
	
	/* Hide permanent desktop sidebar on mobile */
	.ff-shop-sidebar {
		display: none !important;
	}

	/* Products column takes full width */
	.ff-shop-products-column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.ff-shop-layout-row {
		margin-top: 16px;
	}

	/* Show mobile filter trigger button */
	.ff-mobile-toolbar-actions {
		display: flex !important;
		align-items: center;
	}

	.ff-shop-toolbar {
		flex-wrap: wrap;
		gap: 14px;
		padding: 14px 0 18px 0;
	}

	.ff-shop-result-count {
		width: 100%;
		order: 1;
		font-size: 13px;
	}

	.ff-mobile-toolbar-actions {
		order: 2;
	}

	.ff-shop-sorting-wrap {
		order: 3;
		margin-left: auto;
	}

	.ff-shop-orderby {
		min-width: 160px;
		padding: 9px 30px 9px 12px;
		font-size: 12px;
	}

	/* Hero */
	.ff-shop-hero {
		min-height: 240px;
		background-position: 70% center;
	}

	.ff-shop-hero-inner {
		padding-top: 36px;
		padding-bottom: 36px;
	}

	.ff-shop-hero-title {
		font-size: 34px;
		margin-bottom: 8px;
	}

	.ff-shop-hero-desc {
		font-size: 15px;
	}

	/* Mobile Product Grid: 1 column on mobile, or 2 if configured */
	.ff-product-grid.cols-mobile-1 {
		grid-template-columns: 1fr !important;
		gap: 24px;
	}

	.ff-product-grid.cols-mobile-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px;
	}

	.ff-product-title {
		font-size: 18px;
	}

	.ff-btn-add-to-cart {
		padding: 11px 12px;
		font-size: 10.5px;
	}

	/* Service highlights: 1 or 2 columns */
	.ff-service-highlights {
		padding: 40px 0;
	}

	.ff-service-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ff-service-col.has-divider::after {
		display: none;
	}

	.ff-service-col {
		padding: 0 12px;
	}

	/* ==================================================
	   MOBILE FILTER SLIDE-IN DRAWER (VISIBLE ONLY ON MOBILE)
	   ================================================== */
	.ff-mobile-drawer-overlay {
		display: block !important;
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.55);
		z-index: 999998;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.ff-mobile-drawer-overlay.is-active {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	.ff-mobile-filter-drawer {
		display: flex !important;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 88%;
		max-width: 360px;
		height: 100vh;
		background-color: #FFFFFF;
		z-index: 999999;
		flex-direction: column;
		transform: translateX(-100%);
		transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		box-shadow: 6px 0 30px rgba(0, 0, 0, 0.2);
	}

	.ff-mobile-filter-drawer.is-active {
		transform: translateX(0) !important;
	}

	.ff-drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 24px;
		border-bottom: 1px solid var(--ff-border);
		background-color: var(--ff-cream);
	}

	.ff-drawer-title {
		font-family: var(--ff-font-sans);
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.14em;
		color: var(--ff-dark);
		margin: 0;
		text-transform: uppercase;
	}

	.ff-drawer-close {
		background: none;
		border: none;
		cursor: pointer;
		color: var(--ff-dark);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4px;
		transition: var(--ff-transition);
	}

	.ff-drawer-close:hover {
		color: var(--ff-gold);
		transform: rotate(90deg);
	}

	.ff-drawer-body {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 24px;
	}

	.ff-drawer-body .ff-filter-block {
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.ff-drawer-footer {
		padding: 16px 24px;
		border-top: 1px solid var(--ff-border);
		background-color: #FFFFFF;
	}

	.ff-btn-drawer-apply {
		width: 100%;
		padding: 14px 20px;
		background-color: var(--ff-gold);
		border: 1px solid var(--ff-gold);
		color: #FFFFFF;
		font-family: var(--ff-font-sans);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		border-radius: var(--ff-radius-sm);
		cursor: pointer;
		transition: var(--ff-transition);
	}

	.ff-btn-drawer-apply:hover {
		background-color: var(--ff-dark);
		border-color: var(--ff-dark);
	}
}

/* Very small screens */
@media (max-width: 480px) {
	.ff-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ff-shop-hero-title {
		font-size: 28px;
	}

	.ff-shop-orderby {
		min-width: 140px;
	}
}