/* ============================================================
   MIAU SWIM — Responsive / Media Queries
   ============================================================ */

/* ── SCROLL LOCK ───────────────────────────────────────────── */
body.no-scroll {
	overflow: hidden;
	position: fixed; /* iOS Safari: prevents rubber-band scroll */
	width: 100%;
	/* top is set dynamically via JS to preserve scroll position */
}

/* ── 1024px ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	/* instagram stays carousel — no override needed */
}

/* ── 768px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
	/* NAV */
	.nav {
		padding: 14px 20px;
	}
	.nav__links--desktop {
		display: none;
	}
	.nav__lang {
		display: flex;
	}
	.nav__logo {
		grid-column: 1;
		justify-self: start;
	}
	.nav-bottom {
		display: flex;
	}

	.nav-bottom__item img {
		width: 30px;
	}
	/* push page content above bottom bar */
	body {
		padding-bottom: 54px;
	}

	.nav__logo img {
		height: 20px;
	}

	/* HERO */
	.hero {
		min-height: 75dvh;
	}
	.hero__controls {
		display: none;
	}
	.hero__dots {
		display: flex;
	}
	.hero__slide--first {
		background-position: 35% top;
	}

	.hero__content {
		padding: 0 20px 44px;
		flex-direction: column;
		align-items: flex-start;
	}

	.hero__title {
		font-size: 38px;
	}
	.hero__right {
		display: none;
	}

	/* TICKER */
	.ticker__track,
	.tt {
		animation-duration: 14s;
	}

	/* PRODUCTS */
	.products {
		padding: 48px 0 0;
	}
	.products__header {
		padding: 0 20px;
	}
	.products__grid {
		padding: 0 20px 48px;
		gap: 10px;
	}

	/* SPLIT */
	.split {
		grid-template-columns: 1fr;
	}
	.split__media {
		min-height: unset;
		aspect-ratio: 3/3;
	}
	.split__copy {
		padding: 32px 24px 40px;
	}
	.split__copy .section__heading {
		font-size: 26px;
		line-height: 1.25;
	}
	.split__copy .section__body {
		font-size: 13px;
	}

	/* CONCEPT */
	.concept {
		padding: 48px 20px;
	}
	.concept__title {
		font-size: 36px;
	}
	.concept__schema {
		display: grid;
		grid-template-columns: clamp(200px, 55vw, 260px) auto clamp(200px, 55vw, 260px) auto clamp(
				200px,
				55vw,
				260px
			);
		gap: 0;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		max-width: unset;
		margin-left: -20px;
		margin-right: -20px;
		padding: 0 20px 8px;
		margin-bottom: 40px;
	}
	.concept__schema::-webkit-scrollbar {
		display: none;
	}
	.concept__math {
		display: flex;
		align-items: center;
	}
	.concept__footer {
		padding: 40px 0 0;
	}

	/* DETAILS */
	.details {
		padding: 48px 20px 30px;
	}
	.details__facts {
		grid-template-columns: 1fr 1fr;
	}
	.details__fact:nth-child(2n) {
		border-right: none;
	}
	.details__photos {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		gap: 6px;
		margin-left: -20px;
		margin-right: -20px;
		padding: 0 20px 8px;
	}
	.details__photos::-webkit-scrollbar {
		display: none;
	}
	.details__photo,
	.details__photo--wide {
		flex: 0 0 clamp(200px, 65vw, 280px);
		aspect-ratio: 3 / 4;
	}
	.details__photo::after {
		opacity: 1;
		background-color: rgba(0, 0, 0, 0.15);
	}

	/* INSTAGRAM */
	.instagram {
		padding: 48px 0;
	}
	.instagram__header {
		padding: 0 20px;
	}
	.instagram__grid {
		padding: 0 20px 40px;
	}
	.instagram__item {
		flex: 0 0 clamp(160px, 60vw, 260px);
	}

	/* TRYON */
	.tryon {
		padding: 48px 20px;
	}
	.tryon__layout {
		grid-template-columns: 1fr;
	}
	.tryon__stage {
		position: static;
		margin-top: 32px;
	}
	.tryon__picks {
		grid-template-columns: repeat(3, 1fr);
	}

	/* STICKY CTA — выше нижнего бара */
	.sticky-cta {
		bottom: calc(54px + 30px);
		right: 16px;
	}

	/* NEWSLETTER */
	.newsletter {
		padding: 60px 20px;
	}
	.newsletter__title {
		font-size: 28px;
	}

	/* FOOTER */
	footer {
		grid-template-columns: 1fr 1fr;
		padding: 40px 20px 24px;
		gap: 28px;
	}

	.footer__bar {
		padding: 16px 20px;
	}

	/* CART DRAWER */
	.cart-drawer {
		width: 100vw;
	}
	.cart-drawer__body {
		padding: 20px;
	}
	.cart-drawer__footer {
		padding: 20px;
	}
	.newsletter__btn {
		margin-top: 10px;
	}
}

/* ── 480px ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.products__grid {
		/* stays flex carousel, cards slightly narrower */
	}
	/* instagram stays carousel at 480px */
	footer {
		grid-template-columns: 1fr 1fr;
	}
	.newsletter__form {
		flex-direction: column;
	}
}

/* ── HANDLE CHEVRON ANIMATION ────────────────────────────────── */
@keyframes chevron-fade {
	0%,
	55%,
	100% {
		opacity: 0.18;
	}
	27% {
		opacity: 1;
	}
}

/* ── PRODUCT MODAL MOBILE ────────────────────────────────────── */
@media (max-width: 640px) {
	/* Overlay must not cover nav-bottom so its buttons stay clickable */
	.pm-overlay {
		bottom: 54px;
	}

	.pm {
		/* Bottom sheet: override desktop right-slide */
		top: unset !important;
		right: 0;
		left: 0;
		bottom: 54px;
		width: 100vw;
		height: calc(92dvh - 54px);
		grid-template-columns: 1fr;
		border-radius: 20px 20px 0 0;
		transform: translateY(calc(100% + 54px)) !important;
		transition: transform 0.45s var(--ease-out);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain; /* prevent Chrome PTR + scroll chaining */
	}

	.pm.is-open {
		transform: translateY(0) !important;
	}

	/* Image: taller, show swimwear area */
	.pm__media {
		position: relative;
		height: clamp(560px, 58vw, 380px);
		flex-shrink: 0;
		border-radius: 20px 20px 0 0;
		overflow: hidden;
	}

	.pm__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: var(--pm-img-pos, center 35%);
	}

	/* Info section */
	.pm__info {
		padding: 24px 20px 48px;
		gap: 16px;
	}

	.pm__name {
		font-size: 18px;
	}
	.pm__price {
		font-size: 20px;
	}

	/* Close button hidden on mobile — swipe down to close */
	.pm__close {
		display: none;
	}

	/* Drag handle */
	.pm__handle {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 88px;
		z-index: 10;
		cursor: grab;
		/* pill via background — frees up ::before/::after for chevrons */
		background: linear-gradient(#0000, #0000);
		background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0.6) 100%);
		background-size: 48px 2px;
		background-position: center 10px;
		background-repeat: no-repeat;
	}

	.pm__handle::before,
	.pm__handle::after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		width: 13px;
		height: 13px;
		margin-left: -6px;
		border-right: 2.5px solid #fff;
		border-bottom: 2.5px solid #fff;
		border-radius: 1px;
		transform: rotate(45deg);
	}
	.pm__handle::before {
		top: 24px;
		animation: chevron-fade 1.6s ease-in-out infinite;
	}
	.pm__handle::after {
		top: 37px;
		animation: chevron-fade 1.6s ease-in-out 0.4s infinite;
	}

	/* Sizes: bigger tap targets */
	.pm__size {
		width: 70px;
		height: 52px;
		font-size: 12px;
	}

	.pm__add-btn {
		padding: 18px;
		font-size: 12px;
	}

	/* ── INFO PANELS (Shipping / Returns) — same bottom-sheet as pm ── */
	.info-overlay {
		bottom: 54px;
	}

	.info-panel {
		top: unset !important;
		right: 0;
		left: 0;
		bottom: 54px;
		width: 100vw;
		height: calc(92dvh - 54px);
		border-radius: 20px 20px 0 0;
		transform: translateY(calc(100% + 54px)) !important;
		transition: transform 0.45s var(--ease-out);
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
	}

	.info-panel.is-open {
		transform: translateY(0) !important;
	}

	.info-panel__close {
		display: none;
	}

	.info-panel__handle {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 64px;
		z-index: 10;
		cursor: grab;
		background-image: linear-gradient(
			to right,
			rgba(23, 23, 23, 0.25) 0%,
			rgba(23, 23, 23, 0.25) 100%
		);
		background-size: 40px 4px;
		background-position: center 10px;
		background-repeat: no-repeat;
	}

	.info-panel__handle::before,
	.info-panel__handle::after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		width: 13px;
		height: 13px;
		margin-left: -6px;
		border-right: 2.5px solid rgba(23, 23, 23, 0.5);
		border-bottom: 2.5px solid rgba(23, 23, 23, 0.5);
		border-radius: 1px;
		transform: rotate(45deg);
	}
	.info-panel__handle::before {
		top: 22px;
		animation: chevron-fade 1.6s ease-in-out infinite;
	}
	.info-panel__handle::after {
		top: 35px;
		animation: chevron-fade 1.6s ease-in-out 0.4s infinite;
	}

	.info-panel__inner {
		padding: 64px 20px 48px;
	}
}

/* ── INSTAGRAM CTA MOBILE ────────────────────────────────────── */
@media (max-width: 640px) {
	.ig-cta {
		padding: 56px 24px;
	}
}

/* ── LIGHTBOX MOBILE ─────────────────────────────────────────── */
@media (max-width: 640px) {
	/* backdrop stays full-screen behind the sheet */
	.lightbox__backdrop {
		position: fixed;
		inset: 0;
	}

	/* bottom sheet — exact pm layout */
	.lightbox {
		top: unset !important;
		right: 0;
		left: 0;
		bottom: 54px;
		width: 100vw;
		height: calc(92dvh - 54px);
		border-radius: 20px 20px 0 0;
		transform: translateY(calc(100% + 54px)) !important;
		transition: transform 0.45s var(--ease-out) !important;
		overflow: hidden;
		opacity: 1;
		pointer-events: none;
		background: #0a0a0a;
	}
	.lightbox.is-open {
		transform: translateY(0) !important;
		pointer-events: auto;
	}

	/* slides fill container, no padding */
	.lightbox__slide {
		padding: 0;
	}
	.lightbox__slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}

	/* handle — same as pm */
	.lightbox__handle {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 56px;
		z-index: 10;
		cursor: grab;
		background-image: linear-gradient(
			to right,
			rgba(255, 255, 255, 0.4) 0%,
			rgba(255, 255, 255, 0.4) 100%
		);
		background-size: 40px 4px;
		background-position: center 8px;
		background-repeat: no-repeat;
	}
	.lightbox__handle::before,
	.lightbox__handle::after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		width: 13px;
		height: 13px;
		margin-left: -6px;
		border-right: 2.5px solid #fff;
		border-bottom: 2.5px solid #fff;
		border-radius: 1px;
		transform: rotate(45deg);
	}
	.lightbox__handle::before {
		top: 20px;
		animation: chevron-fade 1.6s ease-in-out infinite;
	}
	.lightbox__handle::after {
		top: 33px;
		animation: chevron-fade 1.6s ease-in-out 0.4s infinite;
	}

	/* hide close button — swipe to close */
	.lightbox__close {
		display: none;
	}

	/* arrows same positions as pm */
	.lightbox__prev {
		left: 12px;
	}
	.lightbox__next {
		right: 12px;
	}

	/* dots above nav */
	.lightbox__dots {
		bottom: 14px;
	}
}