/* Structural layout: container, header, footer, generic section rhythm.
   Mobile-first: base rules are the mobile layout, min-width queries add
   the desktop adaptation on top — per requirements doc §3. */

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}
@media (min-width: 768px) {
	.container { padding-inline: var(--space-6); }
}

/* Top-padding only: the gap between two stacked sections should be one
   section's spacing value, not the sum of two (bottom + top) padding. The
   last section's own trailing space comes from .site-footer's margin-top. */
.section {
	padding-top: var(--space-7);
}
.section--tight {
	padding-top: var(--space-6);
}
@media (max-width: 639px) {
	/* Slightly tighter on mobile: --space-7 (48px) between every section reads
	   as too much empty air stacked down a single narrow column. */
	.section { padding-top: var(--space-6); }
	.section--tight { padding-top: var(--space-5); }
}
@media (min-width: 1024px) {
	.section { padding-top: var(--space-8); }
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	height: 52px;
}
@media (max-width: 1023px) {
	/* Mobile/tablet target: 62–68px (master handoff v1.9 §4). */
	.site-header__inner { height: 64px; }
}
@media (min-width: 1024px) {
	/* Desktop target: ~86–90px, sized for the larger wide-logo lockup. The
	   breakpoint is 1024px, not 640px — a flat 7-item nav (Каталог + 4
	   categories + Про нас + Доставка) doesn't fit cleanly at narrower
	   tablet widths, and master handoff v1.9 §4 explicitly says to fall
	   back to the mobile/tablet header there rather than squeeze/wrap it.
	   One flex composition, not independently-centered pieces: logo, a
	   fixed 40–48px gap, then nav sits directly against it; the actions
	   group's own margin-left:auto eats the remaining flexible space and
	   pushes search/cart flush right. align-items:center (set above) keeps
	   nav and actions vertically centered against the taller logo. */
	.site-header__inner {
		display: flex;
		justify-content: flex-start;
		gap: var(--space-7);
		height: 88px;
	}
	.site-header__actions {
		margin-left: auto;
	}
}
.site-header__start {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}
.site-header__burger {
	flex-shrink: 0;
}
@media (min-width: 1024px) {
	/* Burger is mobile/tablet-only: fully removed at desktop, not just
	   visually hidden — display:none takes it out of layout entirely, so
	   it reserves no space and the logo is the first visible element. */
	.site-header__burger { display: none !important; }
}
.site-header__logo {
	/* Explicit, non-negotiable: never let this wrapper grow/shrink with the
	   flex/grid layout — its size comes only from .header-logo img below. */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.header-logo {
	display: block;
	line-height: 0;
}
.header-logo picture {
	display: block;
}
/* Bounded per-breakpoint: desktop shows the wide lockup (kish_logo.svg, wider
   aspect ratio — needs more max-width headroom), mobile shows the compact
   mark (kish_logo_2.png, closer to square) via the <picture> source swap in
   header.php — <img> is the one element that actually renders either way, so
   both bounds live on this single selector, split by breakpoint.
   `!important` guards against WooCommerce's own core
   `.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }`
   (specificity 0,1,1, present via body class on every shop/category/product/
   cart/checkout page) — a single-class rule here would lose to it. Deliberate
   and narrow; nothing else in this file uses !important. */
.header-logo img {
	display: block;
	width: auto !important;
	height: 70px !important; /* desktop (wide logo) target ~68–72px */
	max-width: 220px !important; /* wide logo needs more horizontal room */
	object-fit: contain;
}
@media (max-width: 1023px) {
	/* Matches the <picture> source's `min-width: 1024px` breakpoint exactly —
	   this bound must flip at the same width the image itself flips, or a
	   range would show the wide logo sized with the compact logo's box (or
	   vice versa). */
	.header-logo img {
		height: 39px !important; /* mobile/tablet (compact logo) target ~36–42px */
		max-width: 120px !important;
	}
}

/* Desktop flat nav (master handoff v1.9 §4) — Каталог + all categories +
   Про нас/Доставка, no dropdown. Hidden below 1024px, where the burger
   drawer carries the full navigation (plus Новинки/Бестселери) instead. */
.site-nav {
	display: none;
}
@media (min-width: 1024px) {
	.site-nav {
		display: flex;
		align-items: center;
		gap: var(--space-5);
	}
}
.site-nav__link {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text);
	white-space: nowrap;
	padding-block: var(--space-2);
}
.site-nav__link:hover {
	color: var(--color-accent-dark);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.icon-btn:hover { background: var(--color-cream); }
.icon-btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.icon-btn__count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding-inline: 3px;
	border-radius: 8px;
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}
/* Search panel — mobile: full-screen sheet below the header (same fixed
   pattern as .site-menu, same top offset). Desktop: a dropdown anchored to
   the header (.site-header is position:sticky, which establishes the
   containing block .site-search needs for position:absolute + top:100%).
   Same .is-open state-class mechanism as the drawer, for the same reason:
   an unconditional `display` on this element would defeat a plain [hidden]
   attribute, so visibility here is driven only by this class. */
.site-search {
	position: fixed;
	top: 65px; /* mobile header height (64px) + its 1px border */
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	background: var(--color-surface);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.site-search.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
@media (min-width: 1024px) {
	.site-search {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		bottom: auto;
		max-height: 70vh;
		border-top: 1px solid var(--color-border);
		border-bottom: 1px solid var(--color-border);
		box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	}
	/* Desktop visual polish pass: the form/results wrappers already use the
	   shared .container class (max-width: var(--container-max), 1280px —
	   within the 1200–1400px target and matching the rest of the site's
	   content width), so this isn't re-declared here. What made the panel
	   read as "too wide and stretched" was the search *input* itself
	   filling that entire 1280px row (nothing else shared the space) and
	   the row layout below spreading title/price/badge across the full
	   width — both fixed below, not by narrowing the container. */
	.site-search input[type="search"],
	.site-search button {
		height: 58px; /* target ~56–60px */
	}
}
.site-search__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-4) var(--space-3);
	border-bottom: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
	/* The toggle button, outside click, and Escape are enough on desktop's
	   compact dropdown — the explicit title+close row is a mobile-sheet
	   affordance only. */
	.site-search__header { display: none; }
}
.site-search__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-xl);
	color: var(--color-text);
}
.site-search__body {
	padding-block: var(--space-4);
}
.site-search .woocommerce-product-search {
	display: flex;
	gap: var(--space-2);
}
.site-search input[type="search"] {
	flex: 1;
	height: 48px;
	padding: 0 var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
}
.site-search input[type="search"]:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
	border-color: var(--color-accent);
}
.site-search button {
	height: 48px;
	padding: 0 var(--space-4);
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	border-radius: var(--radius-sm);
	font-weight: 600;
}
.site-search button:hover {
	background: var(--color-accent-dark);
}

/* Live results */
.site-search__results {
	margin-top: var(--space-4);
}
.site-search__status {
	padding-block: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}
.site-search__list {
	display: flex;
	flex-direction: column;
}
.site-search__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--color-border);
}
.site-search__list li:last-child .site-search__item { border-bottom: none; }
.site-search__item:focus-visible,
.site-search__item:hover {
	background: var(--color-cream);
}
.site-search__thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	object-fit: cover;
	background: var(--color-cream);
}
.site-search__item-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
@media (min-width: 1024px) {
	/* Desktop only — mobile's full-screen sheet is narrow enough that
	   flex:1 never created a visible gap; on the wide (1280px) desktop
	   dropdown it stretched the body across the whole row, stranding
	   title/price on the left with a huge empty gap before the badge.
	   Capped to content width instead, so the badge sits right next to it. */
	.site-search__item-body { flex: 0 1 auto; max-width: 70%; }
}
.site-search__item-title {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-search__item-price {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
}
.site-search__item-price del { opacity: 0.55; font-size: 0.85em; font-weight: 400; margin-right: 4px; }
.site-search__item-price ins { text-decoration: none; color: var(--color-accent-dark); }
.site-search__item .badge {
	flex-shrink: 0;
	font-size: 10px;
	padding: 3px 8px;
}
@media (min-width: 1024px) {
	.site-search__thumb { width: 60px; height: 60px; } /* target ~56–64px */
	.site-search__item { padding-block: var(--space-3); } /* row height ~76px w/ 60px thumb, within 72–84px target */
}
.site-search__view-all {
	display: block;
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
	text-align: center;
}
.site-search__view-all:hover { text-decoration: underline; }

/* Overlay drawer — position:fixed, never in normal flow, so opening it can
   never push page content down. Styled as a proper mobile nav sheet: own
   header row (title + close), a links group, and a footer group (phone/
   Instagram) — not a bare list of links. */
.site-menu {
	position: fixed;
	top: 65px; /* mobile header height (64px) + its 1px border */
	left: 0;
	right: 0;
	bottom: 0;
	max-height: calc(100vh - 65px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: 0 12px 24px rgba(0,0,0,0.1);
	z-index: 100;
	/* Closed by default. `display:flex` above would otherwise defeat the
	   [hidden] attribute entirely (an author rule beats the UA [hidden]
	   default at equal specificity), so visibility here is driven purely by
	   the .is-open state class — not by [hidden] — and JS toggles that class. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.site-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
@media (min-width: 1024px) {
	/* Drawer is mobile/tablet-only, matching the burger's own breakpoint. */
	.site-menu { display: none !important; }
}
.site-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-4) var(--space-3);
	border-bottom: 1px solid var(--color-border);
}
.site-menu__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-xl);
	color: var(--color-text);
}
.site-menu__links {
	display: flex;
	flex-direction: column;
	padding: var(--space-2) var(--space-4);
}
.site-menu a {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-lg);
	font-weight: 500;
	color: var(--color-text);
}
.site-menu__links a:last-child { border-bottom: none; }
.site-menu__footer {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: auto;
	padding: var(--space-4);
	border-top: 1px solid var(--color-border);
	background: var(--color-cream);
}
.site-menu__footer a {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

body.quiche-menu-open {
	overflow: hidden;
}
@media (max-width: 1023px) {
	/* Search lock is mobile/tablet-only — desktop's dropdown leaves page
	   content visible and scrollable behind it. */
	body.quiche-search-open {
		overflow: hidden;
	}
}

/* Footer — soft cream section, not a bare technical utility footer. */
.site-footer {
	background: var(--color-cream);
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-8);
	margin-top: var(--space-7);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.site-footer__grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.site-footer__col--brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer-logo { display: block; line-height: 0; margin-bottom: var(--space-3); }
.footer-logo picture { display: block; }
/* Same defensive bound as the header logo (see .header-logo img) — the
   footer renders on every shop/category/product/cart/checkout page too, so
   it's exposed to the same WooCommerce `.woocommerce-page img` override. */
.footer-logo img {
	display: block;
	width: auto !important;
	height: 80px !important; /* desktop target ~75–85px */
	max-width: 200px !important;
	object-fit: contain;
}
@media (max-width: 1023px) {
	/* Matches the footer <picture>'s `min-width: 1024px` source, kept aligned
	   with the header's breakpoint (master handoff v1.9 §4). */
	.footer-logo img {
		height: 34px !important;
		max-width: 105px !important;
	}
}
.site-footer__tagline {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-lg);
	color: var(--color-text);
	margin-bottom: var(--space-3);
}
.site-footer__social {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-muted);
	font-weight: 500;
}
.site-footer__social:hover { color: var(--color-accent); }
.site-footer__heading {
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: var(--space-2);
}

/* Каталог / Покупцям render TWICE from the same PHP data (see footer.php) —
   a plain always-visible list for desktop and a native <details> accordion
   for mobile — toggled by breakpoint. This avoids fighting a closed
   <details>'s native rendering with CSS (forcing display:block on its body
   while [open] is absent was unreliable); each breakpoint only ever has one
   real, unconstrained version of the markup in view. */
.site-footer__static { display: none; }
.site-footer__accordion { display: block; }
@media (min-width: 768px) {
	.site-footer__static { display: block; }
	.site-footer__accordion { display: none; }
}

.site-footer__accordion > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-2);
}
.site-footer__accordion > summary::-webkit-details-marker { display: none; }
.site-footer__accordion > summary::after {
	content: "+";
	font-size: 18px;
	color: var(--color-text-muted);
	transition: transform 150ms ease;
}
.site-footer__accordion[open] > summary::after { transform: rotate(45deg); }
.site-footer__accordion-body { padding-top: var(--space-1); }
.site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: var(--space-7);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}
@media (min-width: 640px) {
	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}
.site-footer__copyright { margin: 0; }
.site-footer__legal {
	display: flex;
	gap: var(--space-4);
}