/* Layout only: positions, grids, spacing, breakpoints. Colors and type live in essentials.css.
   Mobile first: base rules are for phones, @media (min-width: ...) rules add the wider layouts. */

*, *::before, *::after{
	box-sizing: border-box;
}
html{
	scroll-behavior: smooth;
}
body{
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
main{
	flex: 1;
}
form{
	margin: 0;
}
svg{
	max-width: 100%;
	height: auto;
}

/* ---------- Header (floating pill) ---------- */
.site-header{
	position: sticky;
	top: 12px;
	z-index: 40;
	margin: 12px 12px 0;
	padding: 8px 8px 8px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.site-header nav{
	display: flex;
	align-items: center;
	gap: 4px;
}
/* On the home page the header floats over the hero photo instead of sticking. */
.page-home .site-header{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 24px;
}
@media (min-width: 768px){
	.site-header{
		top: 24px;
		margin: 24px 24px 0;
		padding: 10px 12px 10px 24px;
	}
	.page-home .site-header{
		margin: 48px;
	}
}

/* ☰ menu: inline links on wide screens, a dropdown on phones (see nav.js). */
.menu-toggle{ display: none; }
/* ☰ drawn in CSS (no icon font needed); turns into ✕ when the menu is open. */
.menu-icon,
.menu-icon::before,
.menu-icon::after{
	display: block;
	width: 22px;
	height: 2px;
	transition: transform 0.2s, background 0.2s;
}
.menu-icon{ position: relative; }
.menu-icon::before,
.menu-icon::after{
	content: "";
	position: absolute;
	left: 0;
}
.menu-icon::before{ transform: translateY(-7px); }
.menu-icon::after{ transform: translateY(7px); }
.site-header.menu-open .menu-icon{ background: transparent; }
.site-header.menu-open .menu-icon::before{ transform: rotate(45deg); }
.site-header.menu-open .menu-icon::after{ transform: rotate(-45deg); }
@media (max-width: 767px){
	.menu-toggle{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}
	/* Only hidden when JS runs, so the links stay reachable if it doesn't. */
	.js .site-header nav{
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		z-index: 10;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px;
	}
	.js .site-header.menu-open nav{ display: flex; }
	.site-header nav a{ width: 100%; justify-content: flex-start; padding: 14px 16px; }
}

/* ---------- Inner pages ---------- */
.page main{
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px 16px 64px;
}
@media (min-width: 768px){
	.page main{ padding: 48px 24px 96px; }
}
.page-head{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 24px;
}
.page-head.center{
	align-items: center;
	text-align: center;
}
.stack{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.card-panel{
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
}
@media (min-width: 768px){
	.card-panel{ padding: 28px; }
}
.panel-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.panel-actions{
	display: flex;
	gap: 8px;
}
.actions{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- Home: hero ---------- */
#hero{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 140px 40px 120px;
}
#hero > img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
#hero::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}
.outline{
	position: absolute;
	inset: 12px;
	z-index: -1;
	pointer-events: none;
}
.content{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	text-align: center;
}
.insta{
	position: absolute;
	right: 32px;
	bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}
@media (min-width: 768px){
	#hero{ padding: 160px 10% 140px; align-items: flex-start; }
	.content{ align-items: flex-start; text-align: left; }
	.outline{ inset: 24px; }
	.insta{ right: 64px; bottom: 64px; }
}

/* ---------- Home: browse ---------- */
#browse{
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 56px 16px 72px;
	display: flex;
	flex-direction: column;
	gap: 56px;
}
@media (min-width: 768px){
	#browse{ padding: 96px 24px 120px; gap: 80px; }
}
.section-head{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
}

/* ---------- Cards (home and catalog) ---------- */
.cards{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 12px;
}
@media (min-width: 768px){
	.cards{
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		gap: 40px 24px;
	}
}
.card{
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 16px;
}
.card-body{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.image{
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.add-form{
	display: flex;
	gap: 6px;
	margin-top: auto;
}
.add-form .qty{
	width: 64px;
	flex-shrink: 0;
}
.add-form button{
	flex: 1;
}

/* ---------- Bead designer ---------- */
.designer{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* The preview sticks under the header while you scroll through the beads. */
.designer-preview{
	position: sticky;
	top: 88px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
}
.preview-stage{
	display: flex;
	justify-content: center;
}
.preview-stage svg{
	width: auto;
	height: 220px;
}
.preview-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 6px 6px 18px;
}
.designer-tools{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* Room for the sticky header + preview when the page jumps back to these after a tap. */
#palette, #your-beads{
	scroll-margin-top: 400px;
}
.palette{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
}
.bead-chip{
	width: 100%;
	height: 100%;
	flex-direction: column;
	gap: 4px;
	padding: 12px 6px;
}
.bead-chip .bead{
	margin: 2px 0 4px;
}
.mode-switch{
	display: inline-flex;
	margin: 0;
	padding: 3px;
	gap: 2px;
}
.mode-switch label{
	display: flex;
}
.mode-switch input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.mode-switch span{
	padding: 7px 14px;
}
.strand{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 4px;
	padding: 4px 0;
}
.slot{
	position: relative;
	display: flex;
	padding: 2px 1px;
}
.selection-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}
.selection-bar .btn-outline{
	margin-left: auto;
}
.bead-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
@media (min-width: 768px){
	.designer{
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}
	.designer-preview{
		top: 120px;
		padding: 24px;
		gap: 16px;
	}
	.preview-stage svg{
		height: auto;
		width: 100%;
		max-height: 440px;
	}
	#palette, #your-beads{
		scroll-margin-top: 120px;
	}
}

/* ---------- Cart ---------- */
.cart-layout{
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.cart-lines{
	list-style: none;
	margin: 0;
	padding: 0;
}
.cart-line{
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 14px;
	padding: 16px 0;
}
.cart-line:first-child{
	padding-top: 0;
}
.thumb{
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.thumb svg{
	width: 82%;
	height: auto;
}
.cart-info{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.cart-controls{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}
.stepper{
	display: inline-flex;
	align-items: center;
	padding: 2px;
}
.summary{
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.summary-lines{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.summary-lines li{
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
}
.summary-total{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-top: 14px;
}
@media (min-width: 900px){
	.cart-layout{
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 40px;
		align-items: start;
	}
	.cart-layout .summary{
		position: sticky;
		top: 120px;
	}
	.cart-line{
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 20px;
	}
}
.empty-state{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 48px 16px;
}

/* ---------- Checkout ---------- */
.checkout{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.checkout-form{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.search{
	display: flex;
	gap: 8px;
}
.search-input{
	position: relative;
	flex: 1;
	min-width: 0;
}
.search-input ion-icon{
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.search-input input[type=search]{
	padding-left: 44px;   /* room for the search icon (beats the general input padding in essentials.css) */
}
#locate-me{
	align-self: flex-start;
}
.results{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.results:empty{
	display: none;
}
.results button{
	width: 100%;
	justify-content: flex-start;
	text-align: left;
}
[data-map]{
	isolation: isolate;   /* keeps Leaflet's layers under the sticky header */
	width: 100%;
}
/* No CSS transitions inside the map: a site-wide `transition` rule would make dragging and
   zooming lag behind your finger. Leaflet's own zoom/fade animations still apply (they use
   more specific selectors). */
[data-map], [data-map] *{
	transition: none;
}
@media (min-width: 900px){
	.checkout{
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 40px;
		align-items: start;
	}
	.checkout .order-summary{
		order: 2;
		position: sticky;
		top: 120px;
	}
}

/* ---------- Payment & thank you ---------- */
.narrow{
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.field-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: end;
}
.brands{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.status-icon{
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.details{
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.details div{
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.details dd{
	margin: 0;
	text-align: right;
	min-width: 0;
	overflow-wrap: anywhere;
}
.test-cards{
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.test-cards li{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
}

/* ---------- Footer ---------- */
.site-footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
}
@media (min-width: 768px){
	.site-footer{
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		padding: 32px 48px;
	}
}

/* ---------- Toast messages ---------- */
.messages{
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	pointer-events: none;
}
.bead-summary{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}
.bead-summary > span{
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Language switcher (EN / UZ / RU) in the header menu */
.lang-switch{
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	margin-left: 4px;
}
.lang-switch button{
	min-height: 32px;
	padding: 4px 10px;
}
@media (max-width: 767px){
	.lang-switch{
		margin: 6px 8px 4px;
		align-self: flex-start;
	}
	.lang-switch button{
		min-height: 38px;
		padding: 6px 14px;
	}
}