/* ==========================================================================
   Polshop — base tokens
   ========================================================================== */
:root {
	--polshop-accent: #bef761;
	--polshop-accent-dark: #8ecd27;
	--polshop-dark: #231f20;
	--polshop-black: #111111;
	--polshop-text: #232323;
	--polshop-muted: #6b6b6b;
	--polshop-border: #e5e5e5;
	--polshop-container: 1200px;
	--polshop-radius: 6px;
	--polshop-font: 'TildaSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--polshop-font);
	color: var(--polshop-text);
	line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

#content { flex: 1 0 auto; }

.polshop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 44px;
	border-radius: 0;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 15px;
	transition: background-color .2s ease-in-out, color .2s ease-in-out, box-shadow .2s ease-in-out;
	cursor: pointer;
	border: 1px solid transparent;
}
.polshop-btn--outline {
	color: #fffcbb;
	border-color: #fffcbb;
	box-shadow: 0 0 15px 0 rgba(190,247,97,.5);
}
.polshop-btn--outline:hover { background-color: var(--polshop-accent-dark); color: var(--polshop-dark); border-color: var(--polshop-accent-dark); }

.polshop-section-title {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 48px;
}
.polshop-section-title--center { text-align: center; }

/* ==========================================================================
   Top promo bar — running line (Tilda t1003, data-marquee-speed="3")
   ========================================================================== */
.polshop-topbar {
	background-color: var(--polshop-accent);
	height: 60px;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.polshop-topbar__track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	animation: polshop-marquee 26s linear infinite;
}
.polshop-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 0 10px;
}
.polshop-topbar__link {
	font-size: 20px;
	font-weight: 500;
	color: #000;
}
.polshop-topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: #000; flex-shrink: 0; }

@keyframes polshop-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media screen and (max-width: 720px) {
	.polshop-topbar { height: 44px; }
	.polshop-topbar__link { font-size: 16px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.polshop-header { background: #fff; border-bottom: 2px solid rgba(0,0,0,.08); position: relative; z-index: 30; }
.polshop-header__container {
	max-width: var(--polshop-container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 24px;
	padding: 16px 20px;
	flex-wrap: wrap;
}
.polshop-header__logo img { max-width: 135px; width: 135px; height: auto; }
.polshop-header__logo-text { font-weight: 700; font-size: 18px; }
.polshop-header__container .polshop-sidebar-toggle--header { margin-left: auto; }

.polshop-header__contacts { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.polshop-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: #8b3801;
	white-space: nowrap;
}
.polshop-header__phone:hover { opacity: .8; }
.polshop-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #fff;
	flex: none;
	transition: opacity .15s ease;
}
.polshop-header__icon--phone { background: #55b803; }
.polshop-header__icon--whatsapp { background: #25d366; }
.polshop-header__icon--telegram { background: #29a9eb; }
.polshop-header__icon:hover { opacity: .85; }
.polshop-header__address {
	font-size: 16px;
	color: #8b3801;
	white-space: nowrap;
	padding-right: 14px;
	border-right: 1px solid var(--polshop-border);
}

/* Lives inside .polshop-sidebar itself (template-parts/global/nav-catalog.php),
   not the header — below 1480px it IS the collapsed sidebar's visible content
   (icon + vertical label), not a separate trigger elsewhere on the page. */
.polshop-sidebar-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	cursor: pointer;
}
.polshop-sidebar-toggle__icon { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.polshop-sidebar-toggle__icon span { display: block; height: 2px; background: var(--polshop-dark); }
.polshop-sidebar-toggle__label { display: none; }

/* ==========================================================================
   Page layout: persistent catalog sidebar + main content
   ========================================================================== */
.polshop-layout {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
}
.polshop-layout__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	margin-left: 260px;
}

/* Fixed (not sticky) so it stays put on scroll regardless of ancestor overflow —
   sticky-in-flex is brittle across plugin CSS resets, fixed isn't. */
.polshop-sidebar {
	width: 260px;
	padding: 25px 20px 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-right: 1px solid var(--polshop-border);
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	overflow-y: auto;
	z-index: 20;
}
.polshop-sidebar__close { display: none; }
.polshop-sidebar__overlay { display: none; }

.polshop-sidebar__search { position: relative; }
.polshop-sidebar__search input {
	width: 100%;
	height: 30px;
	padding-left: 30px;
	padding-right: 25px;
	font-size: 12px;
	background-color: transparent;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 0;
	box-sizing: border-box;
}
.polshop-sidebar__search input::placeholder { color: #b6b6b6; }
.polshop-sidebar__search button {
	position: absolute;
	top: 0; left: 10px;
	height: 100%;
	width: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: #b6b6b6;
	cursor: pointer;
}

/* Category tree is always fully expanded in the source design — no accordion. */
.polshop-sidebar__menu { display: flex; flex-direction: column; }
.polshop-sidebar__menu > li { padding: 10px 0 8px; }
.polshop-sidebar__menu > li > a {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #111;
}
.polshop-sidebar__menu .sub-menu {
	display: flex;
	flex-direction: column;
	padding: 5px 0 15px 15px;
}
.polshop-sidebar__menu .sub-menu a {
	display: block;
	padding: 5px 0;
	font-size: 18px;
	font-weight: 600;
	opacity: .8;
	color: #111;
}
.polshop-sidebar__menu .sub-menu a:hover { opacity: 1; color: var(--polshop-accent-dark); }

/* 769–1480px: the sidebar collapses to a narrow, still-visible rail (icon +
   vertical "Каталог товаров" label) instead of the full static column —
   matches the real Tilda site's own breakpoint and collapsed-rail behaviour
   (checked directly against the reference, not guessed). Clicking the rail
   expands the sidebar to the full drawer; it doesn't disappear entirely the
   way a typical off-canvas mobile menu would. Bounded with min-width so it
   can't overlap the ≤768px block below — two rules for the same element at
   the same width would depend on source order to know which wins. */
@media screen and (min-width: 769px) and (max-width: 1480px) {
	.polshop-layout__content { margin-left: 56px; }

	.polshop-sidebar {
		z-index: 1000;
		width: 56px;
		padding: 20px 0;
		align-items: center;
		border-right: 1px solid var(--polshop-border);
		transition: width .3s ease;
	}
	.polshop-sidebar.is-open {
		width: min(320px, 85vw);
		padding: 25px 20px 28px;
		align-items: stretch;
	}

	/* Full content (search/menu) only shows once expanded — the rail
	   itself just shows the toggle. */
	.polshop-sidebar:not(.is-open) .polshop-sidebar__search,
	.polshop-sidebar:not(.is-open) .polshop-sidebar__menu {
		display: none;
	}

	.polshop-sidebar-toggle--header { display: none; }

	.polshop-sidebar-toggle--rail {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
		padding-bottom: 20px;
	}
	.polshop-sidebar.is-open .polshop-sidebar-toggle--rail { display: none; }
	.polshop-sidebar-toggle__label {
		display: block;
		margin-top: auto;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-size: 13px;
		font-weight: 600;
		color: var(--polshop-muted);
		white-space: nowrap;
	}

	.polshop-sidebar__close {
		display: none;
		align-self: flex-end;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: none;
		background: #f2f2f2;
		font-size: 20px;
		cursor: pointer;
	}
	.polshop-sidebar.is-open .polshop-sidebar__close { display: block; }

	.polshop-sidebar__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(0,0,0,.5);
		visibility: hidden;
		opacity: 0;
		transition: opacity .25s ease, visibility .25s ease;
	}
	.polshop-sidebar__overlay.is-open { visibility: visible; opacity: 1; }
}

/* Below 768px the rail disappears too — sidebar is fully hidden by default,
   and a second toggle button that lives in the header (top-right, header.php)
   takes over opening it instead of the rail. Same .is-open drawer expansion
   either way. The header contacts stay as icons only (phone/WhatsApp/Telegram) —
   number text and address drop to keep the row compact. */
@media screen and (max-width: 768px) {
	.polshop-header__logo img { max-width: 125px; width: 125px; height: auto; }
	.polshop-header__contacts { margin-left: auto; gap: 10px; }
	.polshop-header__container .polshop-sidebar-toggle--header { margin-left: 10px; }
	.polshop-header__phone-text,
	.polshop-header__address { display: none; }
	/* Desktop reading order is address → WhatsApp → Telegram → phone, but on
	   mobile (icons only, no address) the phone icon leads: phone → WhatsApp → Telegram. */
	.polshop-header__phone { order: -1; }
	.polshop-sidebar-toggle--header { display: flex; }
	.polshop-sidebar-toggle--rail { display: none; }

	.polshop-layout__content { margin-left: 0; }

	.polshop-sidebar {
		z-index: 1000;
		width: 0;
		padding: 0;
		border-right: none;
		overflow: hidden;
	}
	.polshop-sidebar.is-open {
		width: min(320px, 85vw);
		padding: 25px 20px 28px;
		overflow-y: auto;
	}

	.polshop-sidebar__close {
		display: none;
		align-self: flex-end;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: none;
		background: #f2f2f2;
		font-size: 20px;
		cursor: pointer;
	}
	.polshop-sidebar.is-open .polshop-sidebar__close { display: block; }

	.polshop-sidebar__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(0,0,0,.5);
		visibility: hidden;
		opacity: 0;
		transition: opacity .25s ease, visibility .25s ease;
	}
	.polshop-sidebar__overlay.is-open { visibility: visible; opacity: 1; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.polshop-hero {
	position: relative;
	/* Header height is content-based, not fixed — measured in JS
	   (initHeroHeight() in main.js) into these two custom properties so
	   hero + header + topbar always sum to exactly 100vh. The 85vh fallback
	   only applies for the brief moment before JS runs / if it's disabled. */
	min-height: calc(100vh - var(--polshop-header-h, 15vh) - var(--polshop-topbar-h, 0px));
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: right center;
	color: #fff;
}
.polshop-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.8));
}
.polshop-hero__container {
	position: relative;
	z-index: 1;
	max-width: var(--polshop-container);
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 60px 20px;
}
.polshop-hero__col--left { flex: 0 0 50%; max-width: 50%; }
.polshop-hero__col--right { flex: 0 0 33%; max-width: 33%; margin-left: 40px; }
.polshop-hero__subtitle { color: var(--polshop-accent); text-transform: uppercase; font-size: 24px; font-style: italic; margin: 0 0 16px; }
.polshop-hero__title { font-size: 34px; margin: 26px 0 0; word-wrap: break-word; }
.polshop-hero__description { font-size: 20px; margin-bottom: 24px; }
.polshop-hero__description p { margin: 0 0 12px; }

@media screen and (max-width: 900px) {
	.polshop-hero__col--left, .polshop-hero__col--right { flex: 1 1 100%; max-width: 100%; margin-left: 0; }
	.polshop-hero__col--right { margin-top: 40px; }
}

/* ==========================================================================
   Catalog category cards
   ========================================================================== */
.polshop-catalog-cards { padding: 80px 20px; background: #f8f8f8; }
.polshop-catalog-cards__container { max-width: var(--polshop-container); margin: 0 auto; }
.polshop-catalog-cards__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.polshop-catalog-cards__card {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 17px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	padding: 30px 60px 30px 30px;
	color: #fff;
}
.polshop-catalog-cards__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.5));
	transition: opacity .3s ease;
}
.polshop-catalog-cards__card:hover .polshop-catalog-cards__overlay { opacity: .3; }
.polshop-catalog-cards__title { position: relative; z-index: 1; font-size: 22px; font-weight: 600; color: #fff; }
.polshop-catalog-cards__arrow { position: absolute; z-index: 1; top: 30px; right: 25px; }

@media screen and (max-width: 900px) {
	.polshop-catalog-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
	.polshop-catalog-cards__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Catalog section: filters + search/sort toolbar + product grid
   ========================================================================== */
.polshop-catalog-section { padding: 30px 15px; }
/* No max-width/auto-margin here on purpose: Tilda's t951 store grid fills the
   whole row and only ever has the small fixed gutter above — centering this
   in a 1200px box (like the hero/cards/footer sections do) added its own large
   side margins on top of that gutter on wide screens. */
.polshop-catalog-section__container { width: 100%; }
.polshop-catalog-section__layout { display: flex; align-items: flex-start; gap: 40px; }

.polshop-catalog-section__filters { flex: 0 0 240px; width: 240px; }
.polshop-catalog-section__main { flex: 1 1 auto; min-width: 0; }

.polshop-catalog-section__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.polshop-catalog-section__search { flex: 1 1 260px; max-width: 360px; position: relative; }
.polshop-catalog-section__search input[type="search"] {
	width: 100%;
	height: 42px;
	padding: 0 42px 0 16px;
	border: 1px solid var(--polshop-border);
	border-radius: var(--polshop-radius);
	font-size: 14px;
	font-family: inherit;
}
.polshop-catalog-section__search input[type="search"]:focus { border-color: var(--polshop-dark); outline: none; }
.polshop-catalog-section__search button {
	position: absolute;
	top: 0; right: 0;
	height: 100%;
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--polshop-muted);
	cursor: pointer;
}

#polshop-brand,
#polshop-sort,
.woocommerce-ordering select {
	height: 42px;
	padding: 0 36px 0 16px;
	border: 1px solid var(--polshop-border);
	border-radius: var(--polshop-radius);
	background: #fff;
	font-size: 14px;
	font-family: inherit;
	color: var(--polshop-text);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23232323' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
#polshop-brand:focus,
#polshop-sort:focus,
.woocommerce-ordering select:focus { border-color: var(--polshop-dark); outline: none; }

.polshop-catalog-section__clear { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--polshop-muted); text-decoration: underline; white-space: nowrap; }
.polshop-catalog-section__clear:hover { color: var(--polshop-dark); }
.polshop-catalog-section__empty { color: var(--polshop-muted); padding: 40px 0; }
.polshop-catalog-section__empty-filters { color: var(--polshop-muted); font-size: 13px; }

#polshop-catalog-results { transition: opacity .15s ease; }
#polshop-catalog-results.is-loading { opacity: .5; pointer-events: none; }

.polshop-catalog-section__filters-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.polshop-catalog-section__filter-group {
	border: none;
	margin: 0 0 20px;
	padding: 0;
}
.polshop-catalog-section__filter-group > summary {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	opacity: .7;
	margin-bottom: 8px;
	padding: 0;
	list-style: none;
	cursor: pointer;
}
.polshop-catalog-section__filter-group > summary::-webkit-details-marker,
.polshop-catalog-section__filter-group > summary::marker { display: none; content: ''; }
.polshop-catalog-section__checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	padding: 4px 0;
	cursor: pointer;
}
.polshop-catalog-section__checkbox input { cursor: pointer; }

/* First 10 terms of each filter group render as plain checkboxes above; the
   rest live inside <details> so "Показать все" works without JS. */
.polshop-catalog-section__more { margin-top: 4px; }
.polshop-catalog-section__more summary {
	font-size: 13px;
	color: var(--polshop-muted);
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
	padding: 4px 0;
}
.polshop-catalog-section__more summary::-webkit-details-marker { display: none; }
.polshop-catalog-section__more summary:hover { color: var(--polshop-dark); }
.polshop-catalog-section__more[open] summary { display: none; }

/* Dual-handle price range: two overlapping native <input type="range">, kept
   from crossing each other in JS, with a manual fill bar drawn between them —
   native range inputs don't support two thumbs on their own. */
.polshop-catalog-section__price-slider { position: relative; height: 20px; margin: 4px 0 16px; }
.polshop-catalog-section__range-track {
	position: absolute;
	top: 50%;
	left: 8px;
	right: 8px;
	height: 2px;
	background: var(--polshop-border);
	transform: translateY(-50%);
}
.polshop-catalog-section__range-track-fill {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--polshop-accent-dark);
}
.polshop-catalog-section__range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}
.polshop-catalog-section__range::-webkit-slider-thumb {
	pointer-events: all;
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--polshop-border);
	cursor: pointer;
}
.polshop-catalog-section__range::-moz-range-thumb {
	pointer-events: all;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--polshop-border);
	cursor: pointer;
}
.polshop-catalog-section__range::-webkit-slider-runnable-track { background: transparent; }
.polshop-catalog-section__range::-moz-range-track { background: transparent; }

.polshop-catalog-section__price-inputs { display: flex; align-items: center; gap: 8px; }
.polshop-catalog-section__price-input {
	width: 0;
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--polshop-border);
	background: #f7f7f7;
	border-radius: var(--polshop-radius);
	font-size: 14px;
	font-family: inherit;
	appearance: textfield;
}
.polshop-catalog-section__price-input::-webkit-outer-spin-button,
.polshop-catalog-section__price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.polshop-catalog-section__load-more { display: flex; justify-content: center; margin-top: 32px; }

.polshop-btn--outline-dark {
	color: #8b3801;
	border-color: #8b3801;
}
.polshop-btn--outline-dark:hover { background-color: #8b3801; color: #fff; }

@media screen and (max-width: 900px) {
	.polshop-catalog-section__layout { flex-direction: column; }
	.polshop-catalog-section__filters { width: 100%; }
}

.polshop-catalog-section__filters-toggle { display: none; }

/* Mobile only: the filters <aside> collapses behind a "Фильтры" button
   instead of always taking up space above the product grid — reference was
   the real site's own mobile layout, not guessed. Desktop/tablet keep the
   filters fully expanded exactly as before. */
@media screen and (max-width: 768px) {
	.polshop-catalog-section__layout { gap: 0; }

	.polshop-catalog-section__filters-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 16px;
		padding: 14px 4px;
		background: none;
		border: none;
		border-top: 1px solid var(--polshop-border);
		border-bottom: 1px solid var(--polshop-border);
		font-size: 15px;
		color: var(--polshop-muted);
		cursor: pointer;
	}
	.polshop-catalog-section__filters-toggle.is-open { color: var(--polshop-text); }
	.polshop-catalog-section__filters-toggle-label {
		display: flex;
		align-items: center;
		gap: 8px;
		color: var(--polshop-text);
		font-weight: 600;
	}

	.polshop-catalog-section__filters { display: none; width: 100%; }
	.polshop-catalog-section__filters.is-open { display: block; }

	/* Each filter group becomes its own row (label + chevron, border below) —
	   native <details>/<summary>, so the expand/collapse itself needs no JS;
	   only the initial "start collapsed" state is set once on load (see
	   initMobileFilters() in main.js) so desktop's always-expanded [open]
	   default is untouched. */
	.polshop-catalog-section__filters-title { display: none; }
	.polshop-catalog-section__filter-group {
		margin: 0;
		border-bottom: 1px solid var(--polshop-border);
	}
	.polshop-catalog-section__filter-group > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;
		font-weight: 400;
		text-transform: none;
		opacity: 1;
		margin: 0;
		padding: 16px 4px;
	}
	.polshop-catalog-section__filter-group > summary::after {
		content: '';
		width: 8px;
		height: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(-45deg);
		transition: transform .2s ease;
		flex-shrink: 0;
	}
	.polshop-catalog-section__filter-group[open] > summary::after { transform: rotate(45deg); }
	.polshop-catalog-section__filter-group > *:not(summary) { padding: 0 4px 16px; }
}

/* .products / .product are WooCommerce's own loop classes (content-product.php) —
   restyled here instead of overridden, so add-to-cart / variable-product "select
   options" behavior keeps working exactly as WooCommerce ships it. */
.polshop-products__grid.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.polshop-products__grid .product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	min-width: 0;
}
.polshop-products__grid .product a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.polshop-products__grid .product img {
	border-radius: 24px;
	aspect-ratio: 1/1;
	/* WordPress prints width/height HTML attributes matching the source
	   image's real (often non-square) proportions — without an explicit
	   height here, some browsers honour those over aspect-ratio and the
	   thumbnail stretches tall on narrow columns instead of staying square. */
	height: auto;
	object-fit: cover;
	width: 100%;
	margin-bottom: 12px;
}
.polshop-products__grid .price { order: 1; font-weight: 500; font-size: 16px; color: var(--polshop-text); }
.polshop-products__grid .price del { opacity: .5; font-weight: 400; margin-right: 6px; }
.polshop-products__grid .price ins { text-decoration: none; }
.polshop-products__grid .woocommerce-loop-product__title { order: 2; font-weight: 700; font-size: 16px; margin: 4px 0 0; }
.polshop-products__grid .polshop-product-collection { order: 3; color: var(--polshop-muted); font-size: 14px; }
/* !important on width/display: a plugin's own add-to-cart button CSS (loaded
   after this stylesheet) forces display:block + width:100% at a specificity
   this rule alone doesn't beat — confirmed via devtools showing exactly those
   two properties struck through while the rest of this rule applied fine. */
.polshop-products__grid .button {
	order: 4;
	margin-top: 16px;
	width: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: var(--polshop-radius);
	background: #407024;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
.polshop-products__grid .button:hover { background: var(--polshop-accent-dark); color: var(--polshop-dark); }
.polshop-products__grid .star-rating { display: none; }

/* Category-archive product grid (taxonomy-product_cat.php) — same WooCommerce
   markup as the homepage catalog section above, but Tilda's real category
   pages show title → collection → price (not price first, like the homepage
   preview cards do), so this reorders just the archive grid without touching
   the homepage's .polshop-products__grid rules. */
.polshop-products__grid--archive .woocommerce-loop-product__title { order: 1; }
.polshop-products__grid--archive .polshop-product-collection { order: 2; }
.polshop-products__grid--archive .price { order: 3; }

/* Stays 2-per-row all the way down to the smallest phones on purpose — per
   the reference, product cards never collapse to a single column. */
@media screen and (max-width: 900px) {
	.polshop-products__grid.products { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Category archive (Тип → Бренд → Коллекция) — taxonomy-product_cat.php
   ========================================================================== */
.polshop-term-page { padding: 40px 20px 80px; }
.polshop-term-page__container { max-width: var(--polshop-container); margin: 0 auto; }

.polshop-term-breadcrumbs { font-size: 13px; color: var(--polshop-muted); margin-bottom: 16px; }
.polshop-term-breadcrumbs a:hover { color: var(--polshop-dark); }
.polshop-term-breadcrumbs span[aria-hidden] { margin: 0 6px; }

.polshop-term-page__title { font-size: 30px; margin: 0 0 32px; }

.polshop-term-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.polshop-term-tiles__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 20px;
	border: 1px solid var(--polshop-border);
	background: #f8f8f8;
	transition: background-color .2s ease-in-out;
}
.polshop-term-tiles__item:hover { background: #eee; }
.polshop-term-tiles__title { font-size: 17px; font-weight: 700; }
.polshop-term-tiles__count { font-size: 13px; color: var(--polshop-muted); }

.polshop-term-page__pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.polshop-term-page__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 6px;
	border: 1px solid var(--polshop-border);
	font-size: 14px;
}
.polshop-term-page__pagination .page-numbers.current { background: var(--polshop-dark); color: #fff; border-color: var(--polshop-dark); }
.polshop-term-page__pagination .page-numbers:not(.current):not(.dots):hover { border-color: var(--polshop-dark); }

/* "Популярные бренды …:" photo tiles on a Тип-level category page
   (taxonomy-product_cat.php) — 16:9 cards, title bottom-left, matching
   Tilda's own t959 16:9 brand-card layout (vs. the 1:1 "Каталог" tiles). */
.polshop-brand-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 0; }
.polshop-brand-tiles__card {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	background-color: var(--polshop-dark);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 20px;
	color: #fff;
}
.polshop-brand-tiles__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.5));
	transition: opacity .3s ease;
}
.polshop-brand-tiles__card:hover .polshop-brand-tiles__overlay { opacity: .3; }
.polshop-brand-tiles__title { position: relative; z-index: 1; font-size: 18px; font-weight: 700; }
.polshop-brand-tiles__arrow { position: absolute; z-index: 1; right: 20px; bottom: 20px; }

@media screen and (max-width: 900px) {
	.polshop-brand-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
	.polshop-brand-tiles { grid-template-columns: 1fr; }
}

/* On a Коллекция page this heading is cross-nav tacked on right after the
   product grid/pagination — .polshop-section-title only carries a bottom
   margin, so without this it sat almost flush against the "В корзину" row above it. */
.polshop-section-title--collections { margin-top: 96px; }

/* Коллекция tiles on a Бренд-level category page (taxonomy-product_cat.php) —
   plain image + caption below, no dark overlay/arrow, matching Tilda's own
   t404 collection-card layout (distinct from the t959 "Популярные бренды"
   overlay-card style above, one tier up). */
.polshop-collection-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px 20px;
	margin-bottom: 56px;
}
.polshop-collection-tiles__card { display: block; color: inherit; }
.polshop-collection-tiles__image {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	background-color: #f0f0f0;
	background-size: cover;
	background-position: center;
	margin-bottom: 12px;
}
.polshop-collection-tiles__title { display: block; font-size: 15px; font-weight: 600; text-align: center; }

/* ==========================================================================
   Generic page template
   ========================================================================== */
.polshop-page__container { max-width: 860px; margin: 0 auto; padding: 60px 20px; }
.polshop-page__title { font-size: 30px; margin: 0 0 32px; }

.polshop-page__content h2 { font-size: 22px; margin: 40px 0 16px; }
.polshop-page__content h2:first-child { margin-top: 0; }
.polshop-page__content p { margin: 0 0 16px; line-height: 1.6; }
.polshop-page__content ul { margin: 0 0 16px; padding-left: 20px; }
.polshop-page__content li { margin-bottom: 8px; line-height: 1.6; }

/* ==========================================================================
   Контакты (page-contactsochi.php)
   ========================================================================== */
.polshop-contacts .polshop-page__container { max-width: var(--polshop-container); }
.polshop-contacts__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

.polshop-contacts__row { margin: 0 0 20px; }
.polshop-contacts__label { display: block; font-size: 13px; color: var(--polshop-muted); margin-bottom: 4px; }
.polshop-contacts__row a { font-size: 17px; }
.polshop-contacts__row a:hover { color: var(--polshop-muted); }
.polshop-contacts__links { display: flex; gap: 16px; }

.polshop-contact-form { display: flex; flex-direction: column; gap: 16px; }
.polshop-contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.polshop-contact-form__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--polshop-muted); }
.polshop-contact-form__field input,
.polshop-contact-form__field textarea {
	padding: 12px 14px;
	border: 1px solid var(--polshop-border);
	border-radius: var(--polshop-radius);
	font-family: var(--polshop-font);
	font-size: 15px;
	color: var(--polshop-text);
	resize: vertical;
}
.polshop-contact-form__field input:focus,
.polshop-contact-form__field textarea:focus { outline: none; border-color: var(--polshop-dark); }
.polshop-contact-form__submit {
	align-self: flex-start;
	padding: 14px 32px;
	border-radius: var(--polshop-radius);
	background: var(--polshop-dark);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.polshop-contact-form__submit:hover { background: var(--polshop-accent-dark); color: var(--polshop-dark); }
.polshop-contact-form__error { padding: 12px 16px; border-radius: var(--polshop-radius); background: #fdecea; color: #c0392b; font-size: 14px; }
.polshop-contact-form__success { padding: 16px 20px; border-radius: var(--polshop-radius); background: #eef9e5; color: #2c6b1f; font-size: 15px; }

@media screen and (max-width: 720px) {
	.polshop-contacts__layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Floating contact widget
   ========================================================================== */
.polshop-fab { position: fixed; right: 20px; bottom: 20px; z-index: 500; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
.polshop-fab__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	border: none;
	background: #aae823;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(0,0,0,.25);
	transition: background-color .15s ease;
}
.polshop-fab__toggle:hover { background: #96cf1e; }
.polshop-fab__toggle-icon--close { display: none; }
.polshop-fab.is-open .polshop-fab__toggle-icon--open { display: none; }
.polshop-fab.is-open .polshop-fab__toggle-icon--close { display: block; }
.polshop-fab__list { display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .2s ease; }
.polshop-fab.is-open .polshop-fab__list { opacity: 1; visibility: visible; transform: translateY(0); }
.polshop-fab__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(0,0,0,.2);
	transition: transform .15s ease;
}
.polshop-fab__item:hover { transform: scale(1.08); }
.polshop-fab__item--phone { background: #55b803; }
.polshop-fab__item--telegram { background: #29a9eb; }
.polshop-fab__item--whatsapp { background: #25d366; }

/* ==========================================================================
   Footer
   ========================================================================== */
.polshop-footer { background: var(--polshop-black); color: #fff; padding: 28px 40px 20px; }
/* No max-width here on purpose — Tilda's t389 (.t389__maincontainer, width:100%)
   is a full-bleed 3-column row (fixed-width side columns, flexible center),
   not centered in a fixed-width box like the hero/cards sections. */
.polshop-footer__container {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.polshop-footer__company { flex: 0 0 auto; text-align: left; }
.polshop-footer__company p { margin: 0 0 4px; opacity: .85; font-size: 13px; line-height: 1.5; }
.polshop-footer__name { font-weight: 700; opacity: 1 !important; }

.polshop-footer__menu {
	flex: 1 1 320px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	gap: 8px 28px;
	max-width: 720px;
	margin: 4px auto 0;
}
.polshop-footer__menu a { font-size: 14px; font-weight: 600; opacity: .9; white-space: nowrap; }
.polshop-footer__menu a:hover { opacity: 1; color: var(--polshop-accent); }

.polshop-scroll-top {
	flex: 0 0 auto;
	background: none;
	border: none;
	color: #fff;
	opacity: .85;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}
.polshop-scroll-top:hover { opacity: 1; }

.polshop-footer__copyright { flex: 1 0 100%; text-align: center; font-size: 12px; opacity: .5; margin: 12px 0 0; }

@media screen and (max-width: 900px) {
	.polshop-footer__container { justify-content: center; text-align: center; }
	.polshop-footer__company { text-align: center; }
	.polshop-footer__menu { order: 3; margin-top: 8px; }
	.polshop-scroll-top { order: 2; margin: 0 auto; }
}

@media screen and (max-width: 720px) {
	.polshop-hero__container { padding: 40px 16px; }
	.polshop-section-title { font-size: 24px; margin-bottom: 32px; }
}

/* ==========================================================================
   Single product (single-product.php) — image left, info right, dotted-leader
   spec table, "Смотрите также" row below. Copied from actually opening a
   product on the live reference site (Tilda Store renders products as a JS
   popup, not a crawlable page, so there was nothing to scrape from the export).
   ========================================================================== */

.polshop-single-product { padding: 32px 0 64px; }
.polshop-single-product__container { max-width: var(--polshop-container); margin: 0 auto; padding: 0 24px; }

.polshop-single-product__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--polshop-muted);
	font-size: 14px;
	margin-bottom: 24px;
}
.polshop-single-product__back:hover { color: var(--polshop-dark); }

.polshop-single-product__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.polshop-single-product__gallery .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; cursor: zoom-in; }
.polshop-single-product__gallery .woocommerce-product-gallery__trigger { display: none; }

.polshop-single-product__title { font-size: 24px; line-height: 24px; margin: 0 0 4px; }
.polshop-single-product__brand { color: var(--polshop-muted); font-size: 15px; margin-bottom: 20px; }

.polshop-single-product__price { font-size: 20px; font-weight: 400; margin-bottom: 20px; }
.polshop-single-product__price-unit { font-size: 15px; font-weight: 400; color: var(--polshop-muted); }
.polshop-single-product__price .price del { opacity: .5; font-weight: 400; margin-right: 8px; }
.polshop-single-product__price .price ins { text-decoration: none; }

.polshop-single-product__cart { margin-bottom: 32px; }
.polshop-single-product__cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border-radius: var(--polshop-radius);
	background: var(--polshop-dark);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.polshop-single-product__cart .single_add_to_cart_button:hover { background: var(--polshop-accent-dark); color: var(--polshop-dark); }
.polshop-single-product__cart table.variations { width: 100%; margin-bottom: 16px; }
.polshop-single-product__cart table.variations td { padding: 6px 0; }
.polshop-single-product__cart .reset_variations { display: inline-block; margin-left: 8px; font-size: 13px; color: var(--polshop-muted); }
.polshop-single-product__cart .quantity { display: none; }

.polshop-single-product__specs { display: flex; flex-direction: column; gap: 0; max-width: 520px; }
.polshop-single-product__specs-row { display: flex; align-items: baseline; }
.polshop-single-product__specs-label {
	display: flex;
	align-items: baseline;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	color: var(--polshop-muted);
	font-size: 14px;
}
.polshop-single-product__specs-label::after { content: ""; flex: 1; margin: 0 6px 3px; border-bottom: 1px dotted var(--polshop-border); }
.polshop-single-product__specs-value { flex: 0 0 auto; white-space: nowrap; font-size: 14px; }

.polshop-single-product__related { margin-top: 64px; }
.polshop-single-product__related .polshop-section-title { font-size: 22px; text-align: left; margin-bottom: 24px; }

@media screen and (max-width: 900px) {
	.polshop-single-product__layout { grid-template-columns: 1fr; gap: 24px; }
}

/* WooCommerce's own "View cart" link, inserted after the button on a
   successful ajax add-to-cart — the cart drawer (below) already opens and
   shows the same info, so this text next to the button is redundant. */
.added_to_cart { display: none !important; }

/* ==========================================================================
   Floating cart button (template-parts/global/cart-drawer.php) — fixed
   top-right, replaces the old header cart icon; matches the same Tilda-style
   floating-bubble treatment as .polshop-fab (bottom-right, contact widget).
   ========================================================================== */
.polshop-cart-fab {
	position: fixed;
	top: 120px;
	right: 20px;
	z-index: 900;
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100px !important;
	height: 100px !important;
	min-width: 100px;
	max-width: 100px;
	min-height: 100px;
	max-height: 100px;
	padding: 0 !important;
	margin: 0;
	flex: none;
	border-radius: 50%;
	border: none;
	background: var(--polshop-dark);
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(0,0,0,.25);
	transition: background-color .15s ease, transform .15s ease;
}
.polshop-cart-fab:hover { background: #000; transform: scale(1.05); }
.polshop-cart-fab__icon { flex: none; width: 40px; height: 40px; stroke: #bbff6d; }
.polshop-cart-fab.polshop-cart-fab--empty { display: none !important; }
.polshop-cart-fab__count {
	position: absolute;
	bottom: -3px;
	right: -3px;
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	border-radius: 15px;
	background: #e02424;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}
.polshop-cart-fab__count:empty { display: none; }

@media screen and (max-width: 720px) {
	.polshop-cart-fab {
		top: 100px;
		bottom: auto;
		right: 16px;
		width: 46px !important;
		height: 46px !important;
		min-width: 46px;
		max-width: 46px;
		min-height: 46px;
		max-height: 46px;
	}
	/* Original Tilda mobile layout keeps the badge overlapping the top-right
	   corner of the circle, not bottom-right (that's only how the desktop
	   position was explicitly requested) — matches on mobile specifically. */
	.polshop-cart-fab .polshop-cart-fab__count {
		top: -6px;
		bottom: auto;
		right: -6px;
	}
	/* The button shrinks for mobile above, but the icon was still the
	   desktop 40px — on a 46px circle that's almost no margin at all, so it
	   visually touched/overflowed the edge (unlike the messenger fab's icon,
	   which keeps a comfortable margin since ITS button never shrinks). */
	.polshop-cart-fab__icon { width: 24px; height: 24px; }
}

/* ==========================================================================
   Full-screen order popup (name/email/phone + cart, opened by "Отправить
   заявку менеджеру") — a custom minimal form, not WooCommerce's own
   multi-field checkout page; submits via AJAX (inc/cart-drawer.php →
   polshop_ajax_cart_submit_order()), no page reload, no navigation.
   ========================================================================== */
.polshop-order-popup {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: #fff;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}
.polshop-order-popup.is-open { opacity: 1; visibility: visible; }
.polshop-order-popup__bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 20px 24px;
	border-bottom: 1px solid var(--polshop-border);
}
.polshop-order-popup__bar h2 { font-size: 18px; margin: 0; }
.polshop-order-popup__back {
	position: absolute;
	left: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none;
	background: none;
	color: var(--polshop-dark);
	font-size: 15px;
	cursor: pointer;
	padding: 0;
}
.polshop-order-popup__back:hover { color: var(--polshop-muted); }
.polshop-order-popup__close {
	position: absolute;
	right: 24px;
	border: none;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--polshop-muted);
	cursor: pointer;
}
.polshop-order-popup__close:hover { color: var(--polshop-dark); }

.polshop-order-popup__body {
	flex: 1 1 auto;
	overflow-y: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	max-width: var(--polshop-container);
	width: 100%;
	margin: 0 auto;
	padding: 32px 24px;
}
.polshop-order-popup__items .polshop-cart-drawer__items { max-width: 520px; }
.polshop-order-popup__items .polshop-cart-drawer__total { max-width: 520px; }

.polshop-order-form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }
.polshop-order-form__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--polshop-muted); }
.polshop-order-form__field input {
	padding: 12px 14px;
	border: 1px solid var(--polshop-border);
	border-radius: var(--polshop-radius);
	font-family: var(--polshop-font);
	font-size: 15px;
	color: var(--polshop-text);
}
.polshop-order-form__field input:focus { outline: none; border-color: var(--polshop-dark); }
.polshop-order-form__submit {
	align-self: flex-start;
	padding: 14px 32px;
	border-radius: var(--polshop-radius);
	background: var(--polshop-dark);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.polshop-order-form__submit:hover { background: #407024; }
.polshop-order-form__submit:disabled { opacity: .6; cursor: default; }
.polshop-order-form__error {
	padding: 12px 16px;
	border-radius: var(--polshop-radius);
	background: #fdecea;
	color: #c0392b;
	font-size: 14px;
}
.polshop-order-form__success {
	padding: 16px 20px;
	border-radius: var(--polshop-radius);
	background: #eef9e5;
	color: #2c6b1f;
	font-size: 15px;
	max-width: 480px;
}

@media screen and (max-width: 900px) {
	.polshop-order-popup__body { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   Cart drawer (template-parts/global/cart-drawer.php)
   ========================================================================== */
.polshop-cart-drawer__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	z-index: 1050;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease;
}
.polshop-cart-drawer__overlay.is-open { opacity: 1; visibility: visible; }

.polshop-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 420px;
	background: #fff;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .3s ease;
	box-shadow: -10px 0 30px rgba(0,0,0,.15);
}
.polshop-cart-drawer.is-open { transform: translateX(0); }

.polshop-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 24px 16px;
	border-bottom: 1px solid var(--polshop-border);
}
.polshop-cart-drawer__header h2 { font-size: 22px; margin: 0; }
.polshop-cart-drawer__close {
	border: none;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--polshop-muted);
	cursor: pointer;
}
.polshop-cart-drawer__close:hover { color: var(--polshop-dark); }

.polshop-cart-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 16px 24px 24px; }
.polshop-cart-drawer__empty { color: var(--polshop-muted); }

.polshop-cart-drawer__item {
	display: grid;
	grid-template-columns: 64px 1fr auto auto;
	gap: 12px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid var(--polshop-border);
}
.polshop-cart-drawer__item-image { display: block; flex: none; }
.polshop-cart-drawer__item-image img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--polshop-radius); }
.polshop-cart-drawer__item-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.polshop-cart-drawer__item-title { font-size: 14px; font-weight: 700; color: var(--polshop-text); }
.polshop-cart-drawer__item-title:hover { color: var(--polshop-muted); }
.polshop-cart-drawer__item-unit-price { font-size: 12px; color: var(--polshop-muted); }
.polshop-cart-drawer__qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; }
.polshop-cart-drawer__qty-btn {
	width: 22px;
	height: 22px;
	border: 1px solid var(--polshop-border);
	border-radius: 50%;
	background: #fff;
	color: var(--polshop-dark);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.polshop-cart-drawer__qty-btn:hover { background: var(--polshop-border); }
.polshop-cart-drawer__qty-value { min-width: 16px; text-align: center; font-size: 14px; font-weight: 600; }
.polshop-cart-drawer__item-total { text-align: right; white-space: nowrap; }
.polshop-cart-drawer__item-total-price { display: block; font-weight: 700; font-size: 14px; }
.polshop-cart-drawer__item-total-unit { display: block; font-size: 12px; color: var(--polshop-muted); margin-top: 2px; }
.polshop-cart-drawer__remove {
	border: none;
	background: none;
	color: var(--polshop-muted);
	cursor: pointer;
	padding: 4px;
	align-self: start;
}
.polshop-cart-drawer__remove:hover { color: #c0392b; }

.polshop-cart-drawer__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 20px 0;
	font-size: 16px;
}
.polshop-cart-drawer__total strong { font-size: 20px; }

.polshop-cart-drawer__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: var(--polshop-radius);
	background: var(--polshop-dark);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-family: var(--polshop-font);
	text-align: center;
	cursor: pointer;
}
.polshop-cart-drawer__submit:hover { background: #407024; color: #fff; }

@media screen and (max-width: 480px) {
	.polshop-cart-drawer { max-width: 100%; }
}

/* ==========================================================================
   Single-product gallery click-to-enlarge overlay (assets/js/main.js →
   initProductGalleryLightbox()) — appended to <body> by JS, not present in
   any template.
   ========================================================================== */
.polshop-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.85);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}
.polshop-gallery-lightbox.is-open { opacity: 1; visibility: visible; }
.polshop-gallery-lightbox__img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.polshop-gallery-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.polshop-gallery-lightbox__close:hover { background: rgba(255,255,255,.3); }