/**
 * Vaachak — Responsive layer.
 *
 * Breakpoints per blueprint section 13:
 * 320 / 375 / 480 / 768 / 1024 / 1440 / 1920.
 * Base CSS (main.css) is authored desktop-first; this file adapts down,
 * then re-expands for very wide screens.
 *
 * @package Vaachak
 */

/* ============================================================
   GLOBAL: stop horizontal overflow from widening the layout
   viewport (which pushed the fixed bottom nav / cart off-screen).
   overflow-x: clip is used (not hidden) so the sticky header still works.
   ============================================================ */
html, body { overflow-x: clip; max-width: 100%; }
img, video, iframe { max-width: 100%; }
.vk-bottomnav, .vk-bottomnav * { box-sizing: border-box; }
.vk-bottomnav { width: 100%; max-width: 100vw; }

/* ============================================================
   WIDE PREMIUM (1920px+) — cap content width, never stretch text
   ============================================================ */
@media (min-width: 1920px) {
	.container { max-width: 1440px; }
	.vk-hero__inner { max-width: 760px; }
}

/* ============================================================
   DESKTOP DEFAULT (>=1025px) — 4 product columns
   (main.css already sets 4 cols; nothing to override here)
   ============================================================ */

/* ============================================================
   TABLET / SMALL DESKTOP (<=1024px)
   ============================================================ */
@media (max-width: 1024px) {
	.container { padding-inline: 22px; }

	/* Mega menu hidden, burger + bottom nav appear */
	.vk-nav { display: none; }
	.vk-burger { display: inline-flex; }
	.vk-bottomnav { display: flex; }

	/* Hide desktop-only header tools (account/wishlist live in drawer + bottom nav) */
	.vk-hide-mobile { display: none; }

	/* Logo stays left (next to burger); currency + search + cart pushed to far right */
	.vk-header__tools { margin-left: auto; }

	/* Give the page breathing room above the fixed bottom nav */
	body { padding-bottom: 64px; }

	/* Product grid: 3 columns on tablet */
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products,
	.vk-products__grid ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 20px; }

	/* Category mosaic: simpler 2-col, equal rows */
	.vk-mosaic__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
	.vk-mosaic__tile--lg { grid-row: span 1; }

	/* Single product stacks */
	.vk-single__grid { grid-template-columns: 1fr; gap: 32px; }
	.vk-single__gallery { position: static; top: auto; }
}

/* ============================================================
   TABLET PORTRAIT (<=768px)
   ============================================================ */
@media (max-width: 768px) {
	/* Hero: full image on top, content below (stacked) */
	.vk-hero { display: block; min-height: 0; background-image: none !important; background-color: transparent; color: var(--vk-brown); }
	.vk-hero__veil { display: none; }
	.vk-hero__media { display: block; width: 100%; height: auto; }
	.vk-hero__inner { padding: 30px 22px 42px; max-width: 100%; }
	.vk-hero__eyebrow { color: var(--vk-terracotta); }
	.vk-hero__title { color: var(--vk-brown); font-size: clamp(2rem, 8vw, 2.8rem); max-width: 100%; }
	.vk-hero__text { color: var(--vk-text); max-width: 100%; }
	.vk-hero__cta { flex-direction: column; align-items: stretch; }
	.vk-hero__cta .btn { width: 100%; text-align: center; }
	.vk-hero__cta .btn--ghost { border-color: var(--vk-brown); color: var(--vk-brown); }

	/* Sections tighten */
	.vk-section { padding-block: 48px; }
	.vk-section__head { text-align: center; }

	/* Product sections (New Arrivals / Bestsellers): left-aligned, one line each */
	.vk-products .vk-section__head--row { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; }
	.vk-products .vk-section__head--row .vk-section__title { white-space: nowrap; font-size: clamp(1.1rem, 5vw, 1.5rem); }
	.vk-products .vk-section__head--row .vk-section__sub { white-space: nowrap; font-size: clamp(.62rem, 2.7vw, .82rem); }
	.vk-products .vk-section__link { margin-top: 6px; }

	/* Editorial + multi-column blocks stack one below another */
	.vk-story__grid,
	.vk-why__row,
	.vk-newsletter__inner,
	.vk-reviews__track,
	.vk-blog__grid { grid-template-columns: 1fr !important; display: grid; gap: 28px; }

	/* Footer: company text full, Shop + Support side by side, Connect full */
	.vk-footer__grid { grid-template-columns: 1fr 1fr !important; display: grid; gap: 26px 18px; }
	.vk-footer__grid > .vk-footer__brand { grid-column: 1 / -1; }
	.vk-footer__grid > .vk-footer__col:last-child { grid-column: 1 / -1; }

	/* Gift collections: two per row on tablet/phone */
	.vk-gifts__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }

	/* Header tools: half the gap between currency / search / cart */
	.vk-header__tools { gap: .125rem; }

	/* ---- Filter drawer: full-screen slide-in on mobile ---- */
	.vk-archive__layout { display: block; }
	.vk-archive__sidebar {
		position: fixed;
		inset: 0;
		z-index: 360;
		background: var(--vk-ivory);
		padding: 20px;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .4s var(--vk-ease);
	}
	.vk-archive__sidebar.is-open { transform: translateX(0); box-shadow: var(--vk-shadow); }
	.vk-filter-close { display: inline-flex; }
	.vk-filter-open { display: inline-flex; }
	.vk-archive__sidebar-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18px;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--vk-border);
	}
	.vk-filter-actions {
		position: sticky;
		bottom: 0;
		display: flex;
		gap: 10px;
		padding-top: 16px;
		margin-top: 16px;
		background: var(--vk-ivory);
		border-top: 1px solid var(--vk-border);
	}
	.vk-filter-actions .btn { flex: 1; }
}

/* ============================================================
   LARGE PHONE (<=480px)
   ============================================================ */
@media (max-width: 480px) {
	.container { padding-inline: 16px; }

	/* Product grid: 2 columns (cards stay readable) */
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products,
	.vk-products__grid ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }

	.vk-section { padding-block: 40px; }
	.vk-section__title { font-size: clamp(1.6rem, 7vw, 2rem); }

	/* Mosaic single column band */
	.vk-mosaic__grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }

	/* Compact cards */
	.vk-card__title { font-size: .95rem; }
	.vk-card__actions { gap: 6px; }

	/* Announcement bar: keep it to one tidy line */
	.vk-announce .container { font-size: .72rem; gap: .4rem; }

	/* Single product summary spacing */
	.vk-single { padding-block: 24px 90px; }
	.vk-single__tabs { margin-top: 36px; }

	/* Gifts single column on phones */
	.vk-gifts__grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SMALL PHONE (<=375px)
   ============================================================ */
@media (max-width: 375px) {
	.vk-hero__title { font-size: 1.9rem; }
	.vk-bottomnav a,
	.vk-bottomnav button { font-size: .6rem; }
}

/* ============================================================
   VERY SMALL (<=320px) — fall back to single column if cramped
   ============================================================ */
@media (max-width: 320px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products,
	.vk-products__grid ul.products { grid-template-columns: 1fr !important; }
	.vk-mosaic__label { font-size: 1.25rem; }
}

/* ============================================================
   MOBILE STICKY ADD-TO-CART BAR (product page)
   Injected by main.js; hidden on desktop.
   ============================================================ */
.vk-sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 170;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: var(--vk-ivory);
	border-top: 1px solid var(--vk-border);
	box-shadow: 0 -6px 20px rgba(30, 18, 10, .08);
	transform: translateY(120%);
	transition: transform .35s var(--vk-ease);
}
.vk-sticky-atc.is-visible { transform: translateY(0); }
.vk-sticky-atc__price { font-weight: 700; color: var(--vk-brown); font-size: 1.05rem; }
.vk-sticky-atc__price .vk-price__was { font-size: .8rem; }
.vk-sticky-atc__btn { flex: 0 0 auto; padding: 12px 22px; }

@media (max-width: 768px) {
	.single-product .vk-sticky-atc { display: flex; }
	/* lift the bottom nav so the ATC bar sits above it on product pages */
	.single-product .vk-bottomnav { bottom: 0; }
	.single-product .vk-sticky-atc { bottom: 56px; }
}