/* ========== TOP BAR ========== */
.top-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 0 18px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 28px;
}
.brand {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 22px;
	letter-spacing: 0.28em;
	color: var(--ink);
	display: flex; align-items: center; gap: 10px;
}
.brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.top-bar-right { display: flex; align-items: center; gap: 22px; font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.02em; }
.top-bar-right a { transition: color var(--t); }
.top-bar-right a:hover { color: var(--accent); }

/* ========== MAIN LAYOUT ========== */
.product-main {
	display: flex;
	gap: 40px;
	margin-bottom: 72px;
	align-items: flex-start;
	padding-top:20px;
}
.product-columns {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 40px;
}
.purchase-panel {
	width: 380px;
	flex-shrink: 0;
	position: sticky;
	/* Прижимаемся к низу видимой части шапки сайта.
	   --hdr-hide-offset выставляет JS (см. local/templates/newgold_lux/js/script.js)
	   в реальную высоту .hdr-inner, фоллбэк 112px — совпадает с фоллбэком в css/style.css. */
	top: calc(var(--hdr-hide-offset, 112px) + 20px);
}

/* ========== GALLERY ========== */
.gallery-column {
	position: sticky;
	top: calc(var(--hdr-hide-offset, 112px) + 20px);
	align-self: start;
	height: fit-content;
	max-height: none;
	overflow: visible;
}
.gallery { display: flex; gap: 14px; }
.gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
	width: 78px;
	overflow-y: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	max-height: min(640px, 85vh);
}
.gallery-thumbs::-webkit-scrollbar { display: none; }

.g-thumb {
	width: 72px; height: 72px;
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	overflow: hidden;
	cursor: pointer;
	position: relative;
	background: var(--bg-card);
	transition: border-color var(--t), transform var(--t);
}
.g-thumb::after {
	content: ''; position: absolute; inset: 0;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
	border-radius: inherit; pointer-events: none;
}
.g-thumb:hover { border-color: var(--accent); }
.g-thumb.active {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent), 0 8px 20px -10px var(--accent-shadow);
}
.g-thumb .ph {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, #e8e6e3 0%, #cfccc8 50%, #e0ddd9 100%);
	display: flex; align-items: center; justify-content: center;
	color: var(--ink-4);
	font-family: var(--mono); font-size: 9px;
	position: relative;
}
.g-thumb .ph::after {
	content: ''; position: absolute; inset: 0;
	background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,0.25) 6px 7px);
}
.g-thumb.is-video::before {
	content: ''; position: absolute; inset: 0;
	background: transparent;
	z-index: 2;
}
.g-thumb.is-video::after {
	content: ''; position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 0; height: 0;
	border-left: 10px solid #fff;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	z-index: 3;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* Stack component (unified) */
.g-stack, .reviews-stack {
	position: relative;
	width: 72px;
	height: 72px;
	cursor: pointer;
	flex-shrink: 0;
}
.g-stack .layer, .reviews-stack .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--bg-card);
	transition: transform var(--t);
}
.g-stack .layer:nth-child(1), .reviews-stack .layer:nth-child(1) { top: 0; left: 0; z-index: 3; }
.g-stack .layer:nth-child(2), .reviews-stack .layer:nth-child(2) { top: 3px; left: 3px; z-index: 2; opacity: 0.85; }
.g-stack .layer:nth-child(3), .reviews-stack .layer:nth-child(3) { top: 6px; left: 6px; z-index: 1; opacity: 0.7; }
.g-stack:hover .layer:nth-child(1), .reviews-stack:hover .layer:nth-child(1) { transform: translate(-2px, -2px); }
.g-stack:hover .layer:nth-child(2), .reviews-stack:hover .layer:nth-child(2) { transform: translate(1px, 1px); }
.g-stack:hover .layer:nth-child(3), .reviews-stack:hover .layer:nth-child(3) { transform: translate(4px, 4px); }

.g-stack .overlay, .reviews-stack .overlay {
	position: absolute; inset: 0; z-index: 4;
	border-radius: var(--r-sm);
	background: rgba(180, 178, 175, 0.24);
	backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
	color: var(--accent-2); font-weight: 500; font-size: 14px;
	font-family: var(--mono);
	pointer-events: none;
}
.g-stack:hover .overlay, .reviews-stack:hover .overlay { background: rgba(180, 178, 175, 0.30); }

/* Gallery main */
.gallery-main { flex: 1; position: relative; }
.g-main-image {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--r-lg);
	overflow: hidden;
	position: relative;
	background: var(--bg-card);
	box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 48px -32px rgba(70,50,30,0.2);
	cursor: zoom-in;
}
.g-main-image .main-image-full {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}
.g-main-image .ph {
	width: 100%; height: 100%;
	background: radial-gradient(ellipse at 50% 45%, #e9d7c0 0%, #d9c3a8 35%, #c9ae8e 70%, #b9977a 100%);
	position: relative;
	display: flex; align-items: center; justify-content: center;
}
.g-main-image .ph::before {
	content: '';
	position: absolute;
	top: 35%; left: 50%;
	width: 36%;
	aspect-ratio: 1;
	transform: translate(-50%, -25%);
	border: 2px solid rgba(255,255,255,0.6);
	border-radius: 50%;
	box-shadow: 0 4px 20px rgba(160,100,60,0.3), inset 0 0 40px rgba(255,220,180,0.5);
	background: radial-gradient(ellipse at 40% 30%, rgba(255,245,230,0.9) 0%, transparent 40%), linear-gradient(135deg, #d4a87a 0%, #b88a5c 50%, #a67848 100%);
}
.g-main-image .ph::after {
	content: '';
	position: absolute;
	top: 33%; left: 50%;
	width: 10%;
	aspect-ratio: 1;
	transform: translate(-50%, -10%) rotate(45deg);
	background: linear-gradient(135deg, #ffffff 0%, #fff6d0 50%, #fff9e6 100%);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	box-shadow: 0 0 20px rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.15);
}

.discount-badge {
	position: absolute; top: 18px; left: 18px;
	background: var(--ink);
	color: var(--bg-card);
	padding: 7px 12px 7px 14px;
	border-radius: 100px;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
	z-index: 2;
	display: flex; align-items: center; gap: 8px;
	font-family: var(--mono);
}
.discount-badge::before {
	content: ''; width: 5px; height: 5px;
	background: var(--accent); border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(197,142,110,0.3);
	animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(197,142,110,0.3); }
	50% { box-shadow: 0 0 0 5px rgba(197,142,110,0.05); }
}

.photo-counter {
	position: absolute; bottom: 18px; left: 50%;
	transform: translateX(-50%);
	font-family: var(--mono);
	font-size: 11px;
	color: #fff;
	letter-spacing: 0.12em;
	background: rgba(26,22,19,0.55);
	backdrop-filter: blur(8px);
	padding: 6px 14px;
	border-radius: 100px;
	z-index: 2;
	pointer-events: none;
}
.photo-counter .sep { opacity: 0.5; margin: 0 6px; }

.g-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px;
	border-radius: 50%;
	background: color-mix(in oklch, var(--bg-card) 85%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--rule-strong);
	color: var(--ink);
	display: flex; align-items: center; justify-content: center;
	z-index: 3;
	transition: all var(--t);
	opacity: 0;
}
.g-main-image:hover .g-nav { opacity: 1; }
.g-nav:hover { background: var(--bg-card); transform: translateY(-50%) scale(1.06); }
.g-nav-prev { left: 14px; }
.g-nav-next { right: 14px; }
.g-nav svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }

/* Video controls */
.video-controls {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	pointer-events: auto;
	display:none; /* прячем по умолчанию*/
}
.video-play-btn {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(26, 22, 19, 0.75);
	backdrop-filter: blur(12px);
	border: 2px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--t);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.video-play-btn:hover {
	background: rgba(26, 22, 19, 0.9);
	transform: scale(1.08);
	border-color: rgba(255, 255, 255, 0.5);
}
.video-play-btn:active {
	transform: scale(0.95);
}

/* ========== PRODUCT INFO ========== */
.product-info { display: flex; flex-direction: column; gap: 22px; }
.info-eyebrow {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: var(--ink-4);
	text-transform: uppercase;
}
.info-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--ink-5); }
.product-title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 34px;
	line-height: 1.1;
	color: var(--ink);
	letter-spacing: -0.005em;
	text-wrap: pretty;
}
.product-title em { font-style: italic; font-weight: 400; color: var(--accent-2); }
.product-meta {
	display: flex; align-items: center; gap: 18px;
	font-size: 12px; color: var(--ink-4);
	padding-bottom: 4px;
}
.product-article { display: flex; align-items: center; gap: 8px; }
.product-article .label { letter-spacing: 0.04em; }
.product-article .value { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.product-rating {
	display: flex; align-items: center; gap: 6px;
	padding-left: 18px;
	border-left: 1px solid var(--rule);
}
.product-rating .stars { color: var(--star); font-size: 12px; letter-spacing: 0.5px; }
.product-rating .num { color: var(--ink-2); font-weight: 500; }
.product-rating .count { color: var(--ink-4); }
.factory-line {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: -6px;
	font-size: 12px;
	color: var(--ink-3);
	letter-spacing: 0.01em;
	align-self: flex-start;
}
.factory-line svg { width: 13px; height: 13px; stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Option blocks */
.option-block { display: flex; flex-direction: column; gap: 10px; }
.option-header { display: flex; align-items: baseline; justify-content: space-between; }
.option-label { font-size: 12px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; }
.option-value { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); font-weight: 500; }
.size-list { display: flex; flex-wrap: wrap; gap: 6px; }
.size-btn {
	min-width: 46px; height: 38px;
	padding: 0 10px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	background: var(--bg-card);
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-2);
	transition: all var(--t);
	font-variant-numeric: tabular-nums;
	position: relative;
}
.size-btn:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.size-btn.active {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg-card);
	font-weight: 500;
	box-shadow: 0 4px 12px -4px rgba(26,22,19,0.35);
}
.size-btn.active::after {
	content: ''; position: absolute;
	bottom: -4px; left: 50%;
	transform: translateX(-50%);
	width: 4px; height: 4px;
	background: var(--accent);
	border-radius: 50%;
}
.another-size-btn {
	height: 38px; padding: 0 14px;
	border: 1px dashed var(--rule-strong);
	border-radius: var(--r-sm);
	color: var(--ink-3);
	font-size: 12px;
	letter-spacing: 0.01em;
	transition: all var(--t);
	display: flex; align-items: center; gap: 6px;
}
.another-size-btn::before { content: '+'; font-size: 14px; opacity: 0.6; }
.another-size-btn:hover { border-color: var(--accent); border-style: solid; color: var(--accent); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-btn {
	padding: 8px 16px; /* 9px 16px; */
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	background: var(--bg-card);
	font-size: 12.5px;
	color: var(--ink-2);
	transition: all var(--t);
	height:37px;
}
.tag-btn:hover { border-color: var(--ink-3); }
.tag-btn.active { border-color: var(--ink); background: var(--ink); color: var(--bg-card); }
.color-list { display: flex; flex-wrap: wrap; gap: 6px; }
.color-btn {
	display: flex; align-items: center; gap: 10px;
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	background: var(--bg-card);
	font-size: 12.5px;
	color: var(--ink-2);
	transition: all var(--t);
}
.color-btn:hover { border-color: var(--ink-3); }
.color-btn.active { border-color: var(--ink); background: var(--ink); color: var(--bg-card); }
.color-swatch {
	width: 26px; height: 26px;
	border-radius: 50%;
	position: relative;
	box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), inset 0 -2px 4px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
	flex-shrink: 0;
}
.color-swatch.red { background: var(--swatch-red); }
.color-swatch.yellow { background: var(--swatch-yellow); }
.color-swatch.white { background: var(--swatch-white); }
.color-swatch.rose { background: var(--swatch-rose); }
.color-swatch::after {
	content: ''; position: absolute;
	top: 15%; left: 20%;
	width: 30%; height: 25%;
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.6), transparent 70%);
	border-radius: 50%;
}

/* Characteristics */
.chars {
	background: var(--bg-tint);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-lg);
	padding: 22px 24px;
}
.chars-title {
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 14px;
	display: flex; align-items: center; gap: 10px;
}
.chars-title::after {
	content: ''; flex: 1; height: 1px;
	background: linear-gradient(to right, var(--rule) 0%, transparent 100%);
}
.char-row {
	display: flex; align-items: baseline;
	padding: 7px 0;
	font-size: 13px;
	gap: 10px;
}
/*.char-row + .char-row { border-top: 1px dashed var(--rule); }*/
.char-name { color: var(--ink-4); flex-shrink: 0; }
.char-dots {
	flex: 1;
	border-bottom: 1px dotted var(--ink-5);
	transform: translateY(-2px);
	opacity: 0.6;
}
.char-value { color: var(--ink-2); font-weight: 500; text-align: right; max-width: 60%; }

/* Keep long values readable (URLs, long gem specs, etc.) */
.char-value {
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
	line-height: 1.45;
}

/* Десктоп: длинные значения (класс из template.php) — как на мобилке, без узкой правой колонки */
@media (min-width: 1600px) {
	.char-row--inline-value {
		display: block;
		padding: 7px 0;
	}
	.char-row--inline-value .char-dots {
		display: none;
	}
	.char-row--inline-value .char-name {
		display: inline;
		margin-right: 0.35em;
		vertical-align: baseline;
	}
	.char-row--inline-value .char-value {
		display: inline;
		max-width: none;
		text-align: left;
		vertical-align: baseline;
	}
}

.manufacturer-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 14px 0 0;
	font-size: 12px;
}

/* Characteristics: на узкой ширине — одна строка «название значение» с переносом текста, без узкой правой колонки */
@media (max-width: 1599px) {
	.chars {
		padding: 16px 14px;
	}
	.char-row {
		display: block;
		padding: 6px 0;
		font-size: 13px;
		line-height: 1.5;
	}
	.char-dots {
		display: none;
	}
	.char-name {
		display: inline;
		margin-right: 0.35em;
		color: var(--ink-4);
		min-width: 0;
	}
	.char-value {
		display: inline;
		max-width: none;
		text-align: left;
		color: var(--ink-2);
		font-weight: 500;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: normal;
		line-height: inherit;
	}
}
.manufacturer-label { color: var(--ink-4); }
.manufacturer-value {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 14px;
	color: var(--ink);
	letter-spacing: 0.05em;
}
.reviews-link {
	display: flex; align-items: center; gap: 6px;
	color: var(--accent);
	border-bottom: 1px dotted var(--accent);
	padding-bottom: 1px;
	font-size: 12px;
	transition: opacity var(--t);
}
.reviews-link:hover { opacity: 0.7; }
.reviews-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ========== PURCHASE PANEL ========== */
.purchase-panel { display: flex; flex-direction: column; gap: 10px; }
.price-card {
	background: var(--bg-card);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-lg);
	padding: 22px 24px;
	position: relative;
	overflow: hidden;
}
.price-card::before {
	content: ''; position: absolute;
	top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent-2) 50%, var(--accent) 70%, transparent 100%);
	opacity: 0.5;
}
.price-auth-hint {
	font-size: 12px;
	color: var(--ink-3);
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px dashed var(--rule);
	display: flex; align-items: center; gap: 8px;
}
.price-auth-hint svg { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--accent); stroke-width: 1.5; fill: none; }
.price-auth-hint a { color: var(--accent); border-bottom: 1px dotted var(--accent); transition: opacity var(--t); }
.price-auth-hint a:hover { opacity: 0.7; }
.price-header {
	display: flex; justify-content: space-between; align-items: flex-start;
	/*margin-bottom: 12px;*/
}
.price-online-label { font-size: 11px; color: var(--ink-4); letter-spacing: 0.08em; text-transform: uppercase; }
.price-discount-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--mono);
	font-size: 10px;
	margin-left: 6px;
	padding: 1px 6px;
	background: var(--accent);
	color: #fff;
	border-radius: 3px;
	letter-spacing: -0.04em;
}
.header-actions { display: flex; gap: 4px; }
.header-action {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--ink-3);
	transition: all var(--t);
	position: relative;
}
.header-action:hover { background: var(--bg-muted); color: var(--ink); }
.header-action svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.header-action.fav-active svg { fill: var(--accent); stroke: var(--accent); animation: heart-pop 0.4s ease; }
@keyframes heart-pop {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}
.price-values-row {
	display: flex; align-items: baseline;
	gap: 14px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.price-current {
	font-family: var(--sans);
	font-size: 36px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.price-current .currency { font-size: 24px; font-weight: 600; margin-left: 3px; color: var(--ink-2); }
.price-old {
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 400;
	color: var(--ink-4);
	text-decoration: line-through;
	text-decoration-color: var(--ink-5);
	text-decoration-thickness: 1px;
	font-variant-numeric: tabular-nums;
}
.sticky-price-old {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--ink-4);
	text-decoration: line-through;
	text-decoration-color: var(--ink-5);
	text-decoration-thickness: 1px;
	font-variant-numeric: tabular-nums;
}
.price-save {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11.5px;
	color: var(--success);
	font-weight: 500;
	background: var(--success-soft);
	padding: 4px 10px;
	border-radius: 100px;
	letter-spacing: 0.02em;
}
.price-save::before { content: ''; width: 5px; height: 5px; background: var(--success); border-radius: 50%; }

/* Row container for price-save and bonus chip */
.price-save-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.pay-row {
	display: flex; align-items: center; gap: 12px;
	padding: 13px 16px;
	background: var(--bg-card);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-md);
	transition: all var(--t);
	cursor: pointer;
}
.pay-row:hover { border-color: var(--rule-strong); transform: translateY(-1px); }
.pay-badge {
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.1em;
	padding: 4px 7px;
	background: var(--ink);
	color: var(--bg-card);
	border-radius: 3px;
}
.pay-badge.split { background: oklch(0.65 0.18 280); }
.pay-text { flex: 1; font-size: 12.5px; color: var(--ink-2); }
.pay-text strong { font-weight: 500; color: var(--ink); }
.pay-arrow { color: var(--ink-4); transition: transform var(--t), color var(--t); }
.pay-row:hover .pay-arrow { color: var(--ink); transform: translateX(3px); }
.pay-arrow svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.8; fill: none; }
/* Долями / Яндекс Сплит — контейнеры под внешние виджеты */
.pay-row--widget {
	cursor: default;
	padding: 0;
	border: none;
	background: transparent;
}
.pay-row--widget:hover {
	transform: none;
	border-color: transparent;
}
#dolyamiRow .digi-dolyame-button,
#splitRow .yapay,
#splitRow .ya-pay-widget {
	width: 100%;
	max-width: 100%;
	margin: 0;
}
.btn-cart-main {
	width: 100%;
	padding: 16px 24px;
	background: var(--ink);
	color: var(--bg-card);
	border-radius: var(--r-md);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	transition: all var(--t);
	margin-top: 6px;
	position: relative;
	overflow: hidden;
}
.btn-cart-main::before {
	content: ''; position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(197,142,110,0.3) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 0.6s;
}
.btn-cart-main:hover::before { transform: translateX(100%); }
.btn-cart-main:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 14px 30px -14px var(--accent-shadow); }
.btn-cart-main .size-chip {
	font-family: var(--mono);
	font-size: 11px;
	padding: 2px 7px;
	background: rgba(255,255,255,0.12);
	border-radius: 3px;
	margin-left: 4px;
	letter-spacing: 0.04em;
}
.btn-cart-main svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.btn-modify {
	width: 100%;
	padding: 14px 16px;
	background: var(--accent-soft);
	border: 1.5px solid var(--accent);
	border-radius: var(--r-md);
	color: var(--accent-2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: all var(--t);
	display: flex; align-items: center; justify-content: center; gap: 9px;
	cursor: pointer;
}

.btn-modify:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	box-shadow: 0 4px 16px color-mix(in oklch, var(--accent) 25%, transparent);
	transform: translateY(-1px);
}
.btn-modify svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }
.delivery-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--rule-soft);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-md);
	overflow: hidden;
}
.delivery-item {
	background: var(--bg-card);
	padding: 10px 14px;
	display: flex; flex-direction: column; gap: 2px;
}
.delivery-row {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.delivery-icon {
	display: flex; align-items: center; gap: 6px;
	font-size: 11px;
	color: var(--ink-4);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-width: 0;
}
.delivery-icon svg { width: 13px; height: 13px; stroke: var(--ink-4); stroke-width: 1.5; fill: none; flex-shrink: 0; }
.delivery-when { font-size: 12px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.delivery-free { font-size: 11px; color: var(--success); font-weight: 500; }
.delivery-notes {
	grid-column: 1 / -1;
	background: var(--bg-card);
	padding: 5px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	border-top: 1px solid var(--rule-soft);
}
.delivery-note,
.delivery-note-link {
	font-size: 11px;
	color: var(--ink-3);
}
.delivery-note-link {
	text-decoration: none;
	border-bottom: 1px dashed var(--rule);
	padding-bottom: 1px;
	transition: color .15s ease, border-color .15s ease;
}
.delivery-note-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.stock-row {
	display: flex; align-items: center; gap: 10px;
	padding: 4px 2px;
	font-size: 12px;
	color: var(--ink-3);
}
/*.stock-bar {
	flex: 1;
	height: 3px;
	background: var(--rule);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}
.stock-bar::after {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 8%;
	height: 100%;
	background: linear-gradient(90deg, var(--accent-2), var(--accent));
	border-radius: 2px;
	animation: stock-glow 2s ease-in-out infinite;
}*/
.stock-bar {
	flex: 1;
	height: 3px;
	background: var(--rule);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}
.stock-bar::after {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: var(--stock-width, 8%); /* ← ширина из JS (фоллбэк 8%) */
	height: 100%;
	background: var(--stock-color, linear-gradient(90deg, var(--accent-2), var(--accent))); /* ← цвет из JS (фоллбэк на ваш градиент) */
	border-radius: 2px;
	animation: stock-glow 2s ease-in-out infinite;
}
@keyframes stock-glow {
	0%,100% { box-shadow: 0 0 0 rgba(197,142,110,0); }
	50% { box-shadow: 0 0 8px rgba(197,142,110,0.6); }
}
.stock-text strong { color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.stock-text--empty {
	text-decoration: line-through;
	text-decoration-thickness: 1.2px;
	text-decoration-color: color-mix(in oklch, var(--ink-4) 75%, transparent);
}
.cross-sell {
	background: var(--bg-card);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-lg);
	padding: 16px;
	margin-top: 6px;
}
.cross-sell-title {
	font-family: var(--serif);
	font-size: 20px;
	font-style: italic;
	color: var(--ink-3);
	margin-bottom: 12px;
	font-weight: normal;
	display: flex; align-items: center; gap: 8px;
}
.cross-sell-title::before { content: '◆'; color: var(--accent); font-size: 8px; font-style: normal; }
.cross-sell-item { display: flex; gap: 12px; align-items: center; }
.cross-sell-thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--r-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--bg-card);
	position: relative;
}

/* Отключаем старую градиентную заглушку */
.cross-sell-thumb::after { display: none; }

/* Стили для изображения внутри карточки */
.cross-sell-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--t);
}

/* Лёгкий зум при наведении на карточку (опционально, для консистентности с product-card) */
.product-card:hover .cross-sell-thumb img,
.cross-sell-item:hover .cross-sell-thumb img {
	transform: scale(1.05);
}
.cross-sell-info { flex: 1; min-width: 0; }
.cross-sell-name {
	font-size: 12px;
	color: var(--ink-2);
	line-height: 1.35;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cross-sell-price-row { display: flex; align-items: baseline; gap: 8px; }
.cross-sell-price {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.cross-sell-old { font-size: 11px; color: var(--ink-4); text-decoration: line-through; }
.btn-cross-cart {
	padding: 8px 12px;
	background: var(--ink);
	color: var(--bg-card);
	border-radius: var(--r-sm);
	font-size: 11px;
	font-weight: 500;
	transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
	display: flex;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}
.btn-cross-cart::before {
	content: ''; position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(197,142,110,0.3) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 0.6s;
}



.btn-cross-cart:hover::before { transform: translateX(100%); }
.btn-cross-cart:hover {
	background: var(--accent-2);
	color: var(--accent-contrast);
	transform: translateY(-1px);
	box-shadow: 0 14px 30px -14px var(--accent-shadow);
}

/* ========== TABS ========== */
.seo-row {
	background: var(--bg-card);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-lg);
	padding: 16px 20px;
	margin-bottom: 24px;
	display: flex; align-items: center; gap: 14px;
	flex-wrap: wrap;
}
.seo-label { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-3); }
.seo-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.seo-btn {
	padding: 5px 12px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	font-size: 11.5px;
	color: var(--ink-3);
	background: transparent;
	transition: all var(--t);
}
.seo-btn:hover { border-color: var(--ink); color: var(--ink); }
.tabs-section { margin-bottom: 72px; }
.tabs-nav {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 28px;
}
.tab-btn {
	padding: 14px 24px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-4);
	letter-spacing: 0.04em;
	border-bottom: 1px solid transparent;
	margin-bottom: -1px;
	transition: all var(--t);
	display: flex; align-items: center; gap: 8px;
}
.tab-btn:hover { color: var(--ink-2); }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--ink); }
.tab-btn .badge {
	display: inline-flex;
	align-items: center; justify-content: center;
	min-width: 18px; height: 18px;
	background: var(--accent);
	color: #fff;
	font-size: 10px;
	font-family: var(--mono);
	border-radius: 100px;
	padding: 0 5px;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.desc-grid {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 40px;
	align-items: start;
}
.desc-text {
	font-size: 15px;
	color: var(--ink-2);
	line-height: 1.7;
	max-width: 640px;
}
.desc-text p { margin-bottom: 14px; }
.desc-lead {
	font-family: var(--serif);
	font-size: 20px;
	font-style: italic;
	color: var(--ink);
	font-weight: 400;
	line-height: 1.4;
	margin-bottom: 20px !important;
}
.desc-lead::first-letter {
	font-size: 54px;
	float: left;
	line-height: 0.9;
	margin: 6px 8px 0 0;
	color: var(--accent);
	font-weight: 500;
}
.desc-specs {
	background: var(--bg-tint);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-lg);
	padding: 20px;
}
.desc-specs-title {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-4);
	margin-bottom: 14px;
}
.desc-spec-row {
	display: flex; justify-content: space-between;
	padding: 8px 0;
	font-size: 12.5px;
}
.desc-spec-row + .desc-spec-row { border-top: 1px solid var(--rule); }
.desc-spec-row .k { color: var(--ink-4); }
.desc-spec-row .v { color: var(--ink); font-weight: 500; }

/* ========== REVIEWS ========== */
.reviews-summary {
	display: flex; gap: 40px;
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--rule);
	align-items: center;
}
.reviews-score-block {
	display: flex; align-items: center; gap: 16px;
	padding-right: 40px;
	border-right: 1px solid var(--rule);
}
.reviews-score-num {
	font-family: var(--serif);
	font-size: 56px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.reviews-score-meta { display: flex; flex-direction: column; gap: 4px; }
.reviews-stars { color: var(--star); font-size: 16px; letter-spacing: 1px; }
.reviews-count-text { font-size: 12px; color: var(--ink-4); }
.reviews-breakdown {
	flex: 1;
	display: flex; flex-direction: column; gap: 4px;
	max-width: 360px;
}
.rate-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
}
.rate-row .num { width: 10px; color: var(--ink-3); text-align: right; }
.rate-row .bar {
	flex: 1;
	height: 4px;
	background: var(--rule);
	border-radius: 2px;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	line-height: 0;
}
.rate-row .bar-fill {
	display: block !important;
	height: 100% !important;
	width: 0; /* Убрано !important и значение по умолчанию - 0 (без %) */
	background: var(--star) !important;
	border-radius: 2px;
	transition: width 0.8s cubic-bezier(.2, .7, .2, 1) !important; /* Добавлено !important к transition */
	vertical-align: top;
	line-height: 0;
}
.rate-row .count { width: 20px; color: var(--ink-4); font-family: var(--mono); font-size: 10px; text-align: right; }

/* ========== MODALS ========== */
.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	padding: 20px;
	overflow-x: hidden;
}

.modal-overlay.active {
	opacity: 1;
	visibility: visible;
}

.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 22, 19, 0.7);
	backdrop-filter: blur(8px);
}

.modal-container {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	background: var(--bg-card);
	border-radius: var(--r-lg);
	box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.4);
	overflow-y: auto;
	scrollbar-width: thin;
	transform: translateY(20px) scale(0.96);
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal-overlay.active .modal-container {
	transform: translateY(0) scale(1);
}

.modal-container::-webkit-scrollbar {
	width: 6px;
}

.modal-container::-webkit-scrollbar-track {
	background: transparent;
}

.modal-container::-webkit-scrollbar-thumb {
	background: var(--rule);
	border-radius: 3px;
}

.modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(253, 251, 247, 0.9);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(0, 0, 0, 0.06);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--t);
	z-index: 10;
}

.modal-close:hover {
	background: var(--bg-card);
	transform: scale(1.05);
}

.modal-close svg {
	width: 18px;
	height: 18px;
}

.modal-header {
	padding: 32px 32px 24px;
	border-bottom: 1px solid var(--rule-soft);
}

.modal-title {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 8px;
}

.modal-subtitle {
	font-size: 13px;
	color: var(--ink-4);
	line-height: 1.5;
}

.modal-product-info {
	display: flex;
	gap: 16px;
	padding: 24px 32px;
	background: var(--bg-tint);
	border-bottom: 1px solid var(--rule-soft);
}

.modal-product-thumb {
	width: 72px;
	height: 72px;
	border-radius: var(--r-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--bg-muted);
}

.modal-product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.modal-product-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}

.modal-article {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-4);
	letter-spacing: 0.02em;
}

.modal-article span {
	color: var(--ink-3);
}

.modal-product-name {
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.3;
}

.modal-form {
	padding: 24px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-2);
	letter-spacing: 0.02em;
}

.form-label-required::before {
	content: '* ';
	color: var(--accent);
}

.modal-input,
.modal-textarea,
.modal-select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	background: var(--bg-card);
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink-2);
	transition: all var(--t);
}

.modal-input.mono {
	font-family: var(--mono);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.modal-input::placeholder,
.modal-textarea::placeholder {
	color: var(--ink-4);
}

.modal-input:focus,
.modal-textarea:focus,
.modal-select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.modal-textarea {
	resize: vertical;
	min-height: 80px;
	line-height: 1.5;
}

.modal-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239a9187' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 40px;
	cursor: pointer;
}

.input-with-prefix {
	position: relative;
	display: flex;
	align-items: center;
}

.input-prefix {
	position: absolute;
	left: 14px;
	font-family: var(--mono);
	font-size: 14px;
	color: var(--ink-3);
	pointer-events: none;
}

.input-with-prefix .modal-input {
	padding-left: 36px;
}

.modal-options-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.modal-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 8px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: all var(--t);
	background: var(--bg-card);
}

.modal-option:hover {
	border-color: var(--ink-3);
	transform: translateY(-1px);
}

.modal-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.modal-option.is-selected {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg-card);
}

.option-swatch {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.option-swatch.red { background: var(--swatch-red); }
.option-swatch.yellow { background: var(--swatch-yellow); }
.option-swatch.white { background: var(--swatch-white); }

.option-label {
	font-size: 12px;
	color: var(--ink-2);
	text-align: center;
}

.modal-option.is-selected .option-label {
	color: var(--bg-card);
}

.modal-options-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.modal-option-card {
	flex: 1;
	min-width: 120px;
	padding: 12px 16px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: all var(--t);
	background: var(--bg-card);
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-option-card:hover {
	border-color: var(--ink-3);
}

.modal-option-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.modal-option-card.is-selected {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg-card);
}

.option-card-label {
	font-size: 13px;
	color: var(--ink-2);
	font-weight: 500;
}

.modal-option-card.is-selected .option-card-label {
	color: var(--bg-card);
}

.form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 8px;
}

.form-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--accent);
	cursor: pointer;
	flex-shrink: 0;
}

#requestSizeModal {
	--field-error-border: oklch(0.55 0.18 25);
	--field-error-bg: oklch(0.95 0.04 25);
	/* как proto/form: .field-input.is-valid */
	--field-valid-bg: #e6efde;
	--field-valid-border: oklch(0.78 0.06 145);
}

.modal-form .form-group.modal-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.modal-field-note {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--ink-4);
	line-height: 1.4;
}

.modal-field-label {
	font-size: 11px;
	color: var(--ink-4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.modal-field .req {
	color: var(--accent);
	font-style: normal;
}

/* Обязательные до заполнения: только красная рамка (фон — при ошибке / .is-invalid) */
#requestSizeModal .modal-field.is-required .modal-input.is-required-hint:not(.is-invalid):not(.is-valid),
#requestSizeModal .modal-field.is-required .modal-textarea.is-required-hint:not(.is-invalid):not(.is-valid) {
	border-color: var(--field-error-border);
	background-color: var(--bg-card);
	box-shadow: none;
}

#requestSizeModal .modal-field.is-required .modal-input.is-required-hint:not(.is-invalid):not(.is-valid):focus,
#requestSizeModal .modal-field.is-required .modal-textarea.is-required-hint:not(.is-invalid):not(.is-valid):focus {
	border-color: var(--field-error-border);
	background-color: var(--bg-card);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Валидное обязательное поле — как proto/form .field-input.is-valid */
#requestSizeModal .modal-input.is-valid,
#requestSizeModal .modal-textarea.is-valid {
	background-color: var(--field-valid-bg);
	border-color: var(--field-valid-border);
	box-shadow: none;
}

#requestSizeModal .modal-input.is-valid:focus,
#requestSizeModal .modal-textarea.is-valid:focus {
	border-color: var(--field-valid-border);
	background-color: var(--field-valid-bg);
	box-shadow: none;
}

#requestSizeModal .modal-input.is-valid:-webkit-autofill,
#requestSizeModal .modal-input.is-valid:-webkit-autofill:hover,
#requestSizeModal .modal-input.is-valid:-webkit-autofill:focus,
#requestSizeModal .modal-input.is-valid:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--field-valid-bg) inset;
	-webkit-text-fill-color: var(--ink-2);
}

/* Ошибка согласия — только фон, без рамки */
#requestSizeModal .form-checkbox:has(input[type="checkbox"].is-invalid) {
	margin-top: 0;
	padding: 10px 12px;
	border: none;
	border-radius: var(--r-sm);
	background-color: var(--field-error-bg);
	box-shadow: none;
}

.form-checkbox input[type="checkbox"].is-invalid {
	outline: none;
}

.form-checkbox label {
	font-size: 12px;
	color: var(--ink-3);
	line-height: 1.5;
	cursor: pointer;
}

.form-checkbox a {
	color: var(--accent);
	border-bottom: 1px dotted var(--accent);
	transition: opacity var(--t);
}

.form-checkbox a:hover {
	opacity: 0.7;
}

.modal-submit {
	width: 100%;
	padding: 16px 24px;
	background: var(--ink);
	color: var(--bg-card);
	border: none;
	border-radius: var(--r-md);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: all var(--t);
	margin-top: 8px;
	position: relative;
	overflow: hidden;
}

.modal-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(197, 142, 110, 0.3) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 0.6s;
}

.modal-submit:hover::before {
	transform: translateX(100%);
}

.modal-submit:hover {
	background: var(--accent-2);
	transform: translateY(-1px);
	box-shadow: 0 14px 30px -14px var(--accent-shadow);
}

.modal-submit:active {
	transform: translateY(0);
}

.modal-submit:disabled,
.modal-submit.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	/* Не pointer-events: none — иначе курсор not-allowed не показывается (хит-тест уходит «сквозь» кнопку) */
}

.modal-submit:disabled:hover,
.modal-submit.is-disabled:hover {
	background: var(--ink);
	transform: none;
	box-shadow: none;
}

.modal-submit:disabled::before,
.modal-submit.is-disabled::before {
	display: none;
}

#requestSizeModal .modal-field.is-hidden,
#requestSizeModal .modal-field[hidden] {
	display: none !important;
}

.modal-input.is-invalid,
.modal-textarea.is-invalid,
.modal-select.is-invalid {
	border-color: var(--field-error-border, oklch(0.55 0.18 25));
	background-color: var(--field-error-bg, oklch(0.95 0.04 25));
	box-shadow: none;
}

.modal-input.is-invalid:focus,
.modal-textarea.is-invalid:focus,
.modal-select.is-invalid:focus {
	border-color: var(--field-error-border, oklch(0.55 0.18 25));
	background-color: var(--field-error-bg, oklch(0.95 0.04 25));
	box-shadow: 0 0 0 3px oklch(0.95 0.04 25);
}

/* Modal mobile responsiveness */
@media (max-width: 768px) {
	.modal-overlay {
		padding: 0 !important;
		align-items: flex-end !important;
	}

	.modal-container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
		box-shadow: 0 -12px 40px -20px rgba(0,0,0,0.3) !important;
		/* Убираем любые фиксированные ширины */
	}

	.modal-overlay.active .modal-container {
		transform: translateY(0) scale(1) !important;
	}

	/* Уменьшаем внутренние отступы, чтобы контент не вылезал */
	.modal-header { padding: 20px 16px 16px !important; }
	.modal-product-info { padding: 16px !important; }
	.modal-form { padding: 16px 16px 24px !important; }

	/* Инпуты строго в рамках контейнера */
	.modal-input, .modal-textarea, .modal-select {
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 11px 12px !important;
		font-size: 16px !important; /* iOS zoom fix */
	}

	.modal-submit {
		margin: 0 0 8px 0 !important;
		padding: 14px 16px !important;
	}

	.modal-close {
		top: 10px !important;
		right: 10px !important;
	}
}

/* Small devices - ensure fit on 360px screens */
/* Для экранов 360-508px */
@media (max-width: 500px) {
	.modal-container {
		width: calc(100% - 16px) !important;  /* Отступы от краев экрана */
		max-width: 100% !important;
		margin: 0 8px !important;  /* Центрирование с отступами */
		border-radius: var(--r-lg) !important;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	.modal-header {
		padding: 20px 16px 16px !important;
	}

	.modal-form {
		padding: 16px !important;  /* Уменьшенные отступы */
	}

	.modal-product-info {
		padding: 14px 16px !important;
		gap: 12px !important;
	}

	.modal-product-thumb {
		width: 48px !important;
		height: 48px !important;
	}

	/* Исправление для инпутов, чтобы не вылезали */
	.modal-input,
	.modal-textarea,
	.modal-select {
		width: 100% !important;
		box-sizing: border-box !important;
		font-size: 16px !important; /* Предотвращает зум на iOS */
	}

	/* Сетка опций в 2 колонки вместо 3 на узких экранах */
	.modal-options-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}

	/* Убираем лишние отступы у чекбокса */
	.form-checkbox {
		gap: 8px !important;
		align-items: flex-start !important;
	}

	.form-checkbox label {
		font-size: 11px !important;
		line-height: 1.4 !important;
	}
}
/*@media (max-width: 500px) {
    .modal-container {
        width: 100%;
        max-width: none;
    }

    .modal-header {
        padding: 20px 16px 14px;
    }

    .modal-title {
        font-size: 10px;
        letter-spacing: 0.04em;
    }

    .modal-subtitle {
        font-size: 10px;
    }

    .modal-product-info {
        padding: 14px 16px;
        gap: 10px;
    }

    .modal-product-thumb {
        width: 48px;
        height: 48px;
    }

    .modal-article {
        font-size: 9px;
    }

    .modal-product-name {
        font-size: 11px;
        line-height: 1.3;
    }

    .modal-form {
        padding: 14px 16px 20px;
        gap: 14px;
    }

    .form-label {
        font-size: 10px;
    }

    .modal-input,
    .modal-textarea,
    .modal-select {
        padding: 9px 10px;
        font-size: 16px;
    }

    .input-with-prefix .modal-input {
        padding-left: 28px;
    }

    .input-prefix {
        left: 10px;
        font-size: 14px;
    }

    .modal-textarea {
        min-height: 60px;
        padding: 9px 10px;
    }

    .form-checkbox {
        gap: 6px;
    }

    .form-checkbox input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }

    .form-checkbox label {
        font-size: 9px;
        line-height: 1.35;
    }

    .modal-submit {
        padding: 13px 16px;
        font-size: 11px;
        letter-spacing: 0.02em;
    }

    .modal-close {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
    }

    .modal-close svg {
        width: 14px;
        height: 14px;
    }
}*/

.review-item {
	padding: 22px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.review-item:last-child { border-bottom: none; }
.review-header {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 10px;
}
.review-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e6d9c6, #d4c4ab);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
}
.review-name { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.review-date { font-size: 11px; color: var(--ink-4); font-family: var(--mono); }
.review-verified {
	display: inline-flex; align-items: center; gap: 4px;
	margin-left: auto;
	font-size: 11px;
	color: var(--success);
	letter-spacing: 0.02em;
}
.review-verified svg { width: 12px; height: 12px; stroke: var(--success); stroke-width: 2; fill: none; }
.review-stars { color: var(--star); font-size: 12px; letter-spacing: 1px; margin-bottom: 8px; }
.review-text {
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.65;
	max-width: 720px;
}
.review-images { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.review-img-thumb {
	width: 72px; height: 72px;
	border-radius: var(--r-sm);
	overflow: hidden;
	cursor: pointer;
	border: 1px solid var(--rule);
	transition: all var(--t);
	background: linear-gradient(135deg, #f0e7dc, #e6d9c6);
}
.review-img-thumb:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Reviews carousel (unified) */
.reviews-carousel-header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 14px;
}
.reviews-carousel-title {
	font-family: var(--sans); font-size: 12.5px; font-weight: 500;
	color: var(--ink-2); letter-spacing: 0.04em; text-transform: uppercase;
}
.reviews-thumbs-track {
	width: 100% !important;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
	flex-wrap: nowrap;
}
.reviews-thumbs-track::-webkit-scrollbar { display: none; }
.review-thumb-item {
	width: 72px; height: 72px;
	flex-shrink: 0;
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	overflow: hidden;
	cursor: pointer;
	background: var(--bg-card);
	transition: all var(--t);
	position: relative;
}
.review-thumb-item:hover { border-color: var(--accent); }
.review-thumb-item .ph {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, #f0e7dc 0%, #e6d9c6 50%, #ecdfce 100%);
	display: flex; align-items: center; justify-content: center;
	color: var(--ink-4);
	font-family: var(--mono); font-size: 10px;
}

/* Review form */
.review-form-container {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--rule);
}
.review-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; }
.star-selector { display: flex; gap: 4px; cursor: pointer; }
.star-selector .star { font-size: 28px; color: var(--rule); transition: color 0.2s; line-height: 1; }
.star-selector .star.active, .star-selector .star:hover { color: var(--star); }
.form-textarea {
	width: 100%;
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	padding: 12px;
	font-family: inherit;
	font-size: 14px;
	resize: vertical;
	background: var(--bg-card);
	transition: border-color var(--t);
	min-height: 120px;
}
.form-textarea:focus { outline: none; border-color: var(--accent); }
.btn-submit-review {
	align-self: flex-start;
	padding: 14px 28px;
	background: var(--ink);
	color: var(--bg-card);
	border: none;
	border-radius: var(--r-md);
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	transition: background var(--t), color var(--t), transform var(--t);
	position: relative;
	overflow: hidden;
}
.btn-submit-review::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(197,142,110,0.3) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 0.6s;
}
.btn-submit-review:hover::before {
	transform: translateX(100%);
}
.btn-submit-review:hover { background: var(--accent-2); color: var(--accent-contrast); transform: translateY(-1px); }
.upload-zone {
	border: 2px dashed var(--rule);
	border-radius: var(--r-lg);
	padding: 32px;
	text-align: center;
	background: var(--bg-card);
	transition: all var(--t);
	cursor: pointer;
	position: relative;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone.dragover { transform: scale(1.01); }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-icon {
	display: flex; align-items: center; justify-content: center;
	gap: 8px; margin-bottom: 8px;
	color: var(--ink-4);
}
.upload-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.upload-text { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.upload-hint { font-size: 11px; color: var(--ink-4); margin-top: 4px; }
.upload-preview-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.upload-preview-item {
	width: 72px; height: 72px;
	border-radius: var(--r-sm);
	overflow: hidden;
	position: relative;
	border: 1px solid var(--rule);
	animation: fadeIn 0.3s ease;
}
.upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview-remove {
	position: absolute; top: 4px; right: 4px;
	width: 18px; height: 18px;
	background: rgba(26,22,19,0.7);
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; line-height: 1;
	cursor: pointer;
	transition: background var(--t);
}
.upload-preview-remove:hover { background: var(--accent); }

/* ========== CAROUSELS ========== */
.section { margin-bottom: 64px; }
.section-header {
	display: flex; align-items: flex-end; justify-content: space-between;
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule);
}
.section-title-block { display: flex; flex-direction: column; gap: 4px; }
.section-eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--ink-4);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.section-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--ink-5);
}
.section-title {
	font-family: var(--serif);
	font-size: 30px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1;
	letter-spacing: -0.005em;
}
.section-title em { font-style: italic; color: var(--accent-2); }
.carousel-controls { display: flex; gap: 6px; align-items: center; }
.carousel-counter {
	font-family: var(--mono);
	font-size: 11px;
	color: oklch(0.62 0 0);
	letter-spacing: 0.1em;
	margin-right: 10px;
	font-variant-numeric: tabular-nums;
}
.carousel-btn {
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid oklch(0.86 0 0);
	background: var(--bg-card);
	color: var(--ink-2);
	display: flex; align-items: center; justify-content: center;
	transition: all var(--t);
}
.carousel-btn:hover:not(:disabled) {
	background: var(--ink);
	color: var(--bg-card);
	border-color: var(--ink);
}
.carousel-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.carousel-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.carousel-track {
	display: flex; gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item {
	flex: 0 0 calc((100% - 72px) / 5);
	scroll-snap-align: start;
}
.product-card {
	background: var(--bg-card);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-lg);
	overflow: hidden;
	cursor: pointer;
	transition: all var(--t);
	position: relative;
	height: 100%;
	display: flex; flex-direction: column;
	z-index: 10;
}
.product-card:hover { border-color: var(--rule-strong); transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(80,60,40,0.2); }
.product-card-img {
	aspect-ratio: 1;
	background: linear-gradient(135deg, #e8e6e3 0%, #cfccc8 50%, #e0ddd9 100%);
	position: relative;
	overflow: hidden;
}
.product-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 🔑 заполняет блок, обрезая края */
	object-position: center; /* центрирует картинку */
	display: block;
}
.product-card-fav {
	position: absolute; top: 10px; right: 10px;
	width: 30px; height: 30px;
	background: var(--bg-card);
    border: 1px solid #e9e1d6;
    color: var(--ink-2);
	backdrop-filter: blur(8px);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
	opacity: 1;
	transform: none;
	transition: color var(--t), background var(--t), border-color var(--t);
}
.product-card-fav:hover { color: var(--accent); }
.product-card-fav svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.product-card-fav.active svg { fill: var(--accent); stroke: var(--accent); }
.product-card-discount {
	position: absolute; top: 10px; left: 10px;
	padding: 3px 8px;
	background: var(--ink);
	color: var(--bg-card);
	border-radius: 3px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.04em;
	z-index: 2;
}
.product-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.product-card-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.product-card-name {
	font-size: 12.5px;
	color: var(--ink-3);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 32px;
	transition: color var(--t);
}
.product-card:hover .product-card-name { color: var(--ink); }
.product-card a.card-link { display: contents; color: inherit; }
.product-card-price {
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.product-card-old { font-size: 11.5px; color: var(--ink-4); text-decoration: line-through; }

/* Stack layer for carousel last item */
.carousel-item.is-stack-last { position: relative; }
.stack-layer {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--bg-card);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-lg);
	pointer-events: none;
	transition: transform var(--t);
}
.stack-layer[data-layer="0"] { z-index: 3; transform: translate(-6px, 3px) rotate(-1.25deg); opacity: 0.85; }
.stack-layer[data-layer="1"] { z-index: 2; transform: translate(-6px, 3px) rotate(-1.5deg); opacity: 0.7; }

.stack-overlay {
	position: absolute;
	inset: 0;
	background: rgba(180, 178, 175, 0.24);
	backdrop-filter: blur(7px);
	border-radius: var(--r-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-2);
	font-family: var(--serif);
	font-size: 42px;
	font-weight: 500;
	z-index: 20;
	cursor: pointer;
	pointer-events: auto;
}

/* ========== STICKY BAR ========== */
.sticky-bar {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 950;
	background: color-mix(in oklch, var(--bg-card) 92%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-top: 1px solid var(--rule);
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
	box-shadow: 0 -8px 28px -18px color-mix(in oklch, var(--ink) 12%, transparent);
}
.sticky-bar.visible { transform: translateY(0); }
.sticky-inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 14px 28px;
	display: flex; align-items: center; gap: 20px;
}
.sticky-thumb {
	width: 48px; height: 48px;
	border-radius: var(--r-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--bg-muted);
	position: relative;
	border: 1px solid var(--rule-soft);
}
.sticky-thumb::after {
	content: '';
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 50%; aspect-ratio: 1;
	background: radial-gradient(circle, color-mix(in oklch, var(--accent) 70%, transparent) 0%, color-mix(in oklch, var(--accent-2) 55%, var(--ink)) 100%);
	border-radius: 50%;
}
.sticky-title {
	flex: 1;
	font-family: var(--serif);
	font-size: 15px;
	color: var(--ink);
	line-height: 1.3;
}
.sticky-title-sub {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	color: var(--ink-4);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 2px;
}
.sticky-price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sticky-price {
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1;
	letter-spacing: -0.01em;
}
.sticky-save { font-size: 10px; color: var(--success); font-family: var(--mono); }
.btn-sticky-cart {
	padding: 12px 22px;
	background: var(--ink);
	color: var(--bg-card);
	border: 1px solid color-mix(in oklch, var(--ink) 85%, var(--rule));
	border-radius: var(--r-md);
	font-size: 13px;
	font-weight: 500;
	display: flex; align-items: center; gap: 8px;
	transition: background var(--t), color var(--t), border-color var(--t);
	position: relative;
	overflow: hidden;
}
.btn-sticky-cart::before {
	content: ''; position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, color-mix(in oklch, var(--accent) 35%, transparent) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 0.6s;
}
.btn-sticky-cart:hover::before { transform: translateX(100%); }
.btn-sticky-cart:hover {
	background: var(--accent-2);
	border-color: color-mix(in oklch, var(--accent-2) 85%, var(--rule));
	color: var(--accent-contrast, #fff);
}
.btn-sticky-cart svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.btn-sticky-fav {
	width: 44px; height: 44px;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	background: color-mix(in oklch, var(--bg-card) 75%, transparent);
	display: flex; align-items: center; justify-content: center;
	color: var(--ink-3);
	transition: color var(--t), border-color var(--t), background var(--t);
}
.btn-sticky-fav:hover {
	color: var(--accent);
	border-color: var(--accent);
	background: color-mix(in oklch, var(--accent) 8%, var(--bg-card));
}
.btn-sticky-fav svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.btn-sticky-fav.active svg { fill: var(--accent); stroke: var(--accent); }

/* ========== OPTION POPUPS ========== */
/* ========== OPTION POPUPS ========== */
.option-popup {
	position: fixed;
	left: 0;
	transform: translateX(-50%);
	width: 150px;  /* Уменьшено с 280px */
	background: var(--bg-card);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-md);  /* Уменьшен скругление */
	box-shadow: 0 12px 24px -12px rgba(0,0,0,0.15);
	padding: 12px;  /* Уменьшен padding */
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	pointer-events: none;
}

.option-popup.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Стрелка указывает на кнопку (по умолчанию снизу попапа) */
.option-popup::before {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--bg-card);
	z-index: 1;
}

.option-popup::after {
	content: '';
	position: absolute;
	bottom: -7px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid var(--rule-soft);
	z-index: 0;
}

/* Когда попап снизу (стрелка сверху) */
.option-popup[data-position="bottom"] {
	margin-top: 0;
}

.option-popup[data-position="bottom"]::before {
	top: -6px;
	bottom: auto;
	border-top: none;
	border-bottom: 6px solid var(--bg-card);
}

.option-popup[data-position="bottom"]::after {
	top: -7px;
	bottom: auto;
	border-top: none;
	border-bottom: 7px solid var(--rule-soft);
}

.popup-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.popup-header {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
}

.popup-close {
	width: 20px;
	height: 20px;
	border: none;
	background: rgba(0,0,0,0.05);
	border-radius: 50%;
	color: var(--ink-4);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.popup-close:hover {
	background: rgba(0,0,0,0.1);
	color: var(--ink);
}

.popup-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--bg-muted);
}

.popup-image .ph {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.popup-price {
	display: flex;
	flex-direction: row;  /* В одну строку */
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-top: 6px;
	border-top: 1px solid var(--rule-soft);
}

.popup-price-current {
	font-family: var(--sans);
	font-size: 14px;  /* Уменьшен шрифт */
	font-weight: 700;
	color: var(--accent);
}

.popup-price-old {
	font-size: 10px;  /* Уменьшен шрифт */
	color: var(--ink-4);
	text-decoration: line-through;
}

/* ========== TWEAK PANEL ========== */
/*.tweak-panel {
    position: fixed;
    bottom: 20px; right: 20px;
    width: 260px;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.2);
    padding: 16px 18px;
    font-size: 12px;
    z-index: 2000;
    display: block !important;
}
.tweak-title {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 12px;
    display: flex; justify-content: space-between; align-items: center;
}
.tweak-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule-soft); }
.tweak-row:first-of-type { border-top: none; }
.tweak-label { color: var(--ink-3); font-size: 11.5px; }
.tweak-row select, .tweak-row input[type=text] {
    font-family: inherit; font-size: 11.5px;
    border: 1px solid var(--rule); border-radius: 4px;
    padding: 3px 6px; background: var(--bg-card); color: var(--ink);
}*/

/* ========== LIGHTBOX (синхрон с css/style.css + footer.php) ========== */
.lightbox {
	position: fixed; inset: 0; z-index: calc(var(--lux-layer-modal, 150000) + 100);
	display: flex; align-items: center; justify-content: center;
	pointer-events: none; opacity: 0;
	transition: opacity var(--t);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox.open .lightbox-img { opacity: 1; transform: scale(1); }
.lightbox.open .lightbox-img-wrapper { transform: scale(1); }
.lightbox-backdrop {
	position: absolute; inset: 0;
	background: rgba(20, 14, 10, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: zoom-out;
	z-index: 0;
}
.lightbox-logobg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	fill: oklch(0.86 0.1 45);
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
}
.lightbox-img-wrapper {
	position: relative; max-width: 90vw; max-height: 85vh;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	z-index: 1;
	transform: scale(0.96);
	transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lightbox-img {
	max-width: 100%; max-height: 85vh;
	object-fit: contain;
	border-radius: var(--r-lg);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
	opacity: 0; transform: scale(0.96);
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.lightbox-btn {
	position: absolute; width: 48px; height: 48px;
	border-radius: 50%;
	border: 0; padding: 0;
	background: rgba(255, 255, 255, 0.10);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background var(--t), transform var(--t);
	z-index: 2;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.05); }
.lightbox-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; }
.lightbox-close { top: 22px; right: 22px; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.lightbox-counter {
	position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
	font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.88);
	background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
	padding: 6px 14px; border-radius: 100px; pointer-events: none;
	z-index: 2;
}
.lightbox-loader {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.lightbox-loader::after {
	content: ''; width: 24px; height: 24px;
	border: 2px solid var(--rule); border-top-color: var(--accent);
	border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== ADAPTIVE (TABLET & MOBILE) ========== */
@media (max-width: 1100px) {
	.product-main { flex-direction: column; gap: 30px; margin-bottom: 40px; }
	.product-columns { width: 100%; grid-template-columns: 1fr 1fr; gap: 24px; }
	.gallery-column { max-height: none !important; overflow: visible !important; }
	.purchase-panel { width: 100%; position: static; margin-top: 20px; }
	.carousel-item { flex-basis: calc((100% - 54px) / 4); }
	.gallery-thumbs { max-height: 520px; }
}

@media (max-width: 768px) {
	.container { padding: 0 16px 40px; }
	.product-columns { grid-template-columns: 1fr; }
	.gallery-column { position: static; margin-bottom: 24px; }
	.product-title { font-size: 26px; }
	.desc-grid { grid-template-columns: 1fr; }
	.carousel-item { flex-basis: calc((100% - 18px) / 2); }
	.reviews-summary { flex-direction: column; align-items: flex-start; gap: 20px; }
	.reviews-score-block { border-right: none; padding-right: 0; }

	/* Fix carousel counter and buttons on mobile */
	.carousel-counter {
		white-space: nowrap;
		margin-right: 8px;
	}
	.carousel-btn {
		width: 36px;
		height: 36px;
		border-radius: 50%;
	}

	/* Mobile gallery */
	.gallery { flex-direction: column-reverse; gap: 12px; }
	.gallery-thumbs {
		flex-direction: row;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 84px;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 4px;
		align-items: center;
		justify-content: flex-start;
	}
	.g-thumb, .g-stack, .g-stack .layer,
	.review-thumb-item, .reviews-stack,
	.reviews-stack .layer {
		width: 60px !important;
		height: 60px !important;
		flex-shrink: 0;
	}
	.g-stack .overlay, .reviews-stack .overlay { font-size: 13px; }
	.g-stack .layer:nth-child(2), .reviews-stack .layer:nth-child(2) { top: 2px; left: 2px; }
	.g-stack .layer:nth-child(3), .reviews-stack .layer:nth-child(3) { top: 4px; left: 4px; }

	/* Stack layers for carousel */
	.stack-layer[data-layer="0"] { transform: translate(-4px, 2px) rotate(-1deg); }
	.stack-layer[data-layer="1"] { transform: translate(-8px, 4px) rotate(-2deg); }
	.stack-overlay { font-size: 18px; }

	/* Lightbox mobile */
	.lightbox-prev, .lightbox-next { display: none; }
	.lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
	.lightbox-img-wrapper { max-width: 95vw; max-height: 80vh; padding: 12px; }
	.lightbox-counter { bottom: 16px; font-size: 11px; }
}


.review-thumb-item .ph {
	background-size: cover !important;     /* Растягиваем изображение, чтобы заполнить контейнер */
	background-position: center !important; /* Центрируем изображение */
	background-repeat: no-repeat !important; /* Запрещаем повторение */
	/* Убедитесь, что у .ph есть заданная высота и ширина, иначе фон не будет виден */
	width: 100%;
	height: 100%;
	/* Опционально: добавьте бордер для визуального разделения */
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-sm);
}

.article-copy-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	padding: 0; margin-left: 2px;
	background: transparent;
	border: 1px solid var(--rule);
	border-radius: 6px;
	color: var(--ink-3);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.article-copy-btn:hover { background: var(--ink-1, #f5f5f5); color: var(--ink-2); }
.article-copy-btn svg { width: 13px; height: 13px; display: block; }
.article-copy-btn .icon-check { display: none; }
.article-copy-btn.is-copied { color: #0a8a3a; border-color: #0a8a3a; }
.article-copy-btn.is-copied .icon-copy { display: none; }
.article-copy-btn.is-copied .icon-check { display: block; }

.g-similar-btn {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	font-family: inherit;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink);
	background: color-mix(in oklch, var(--bg-card) 85%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--rule-strong);
	border-radius: 100px;
	cursor: pointer;
	z-index: 3000;
	transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.g-similar-btn:hover { background: var(--bg-card); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.g-similar-btn svg { width: 14px; height: 14px; display: block; }
.photo-counter{display:none;}

/* Чип бонусов в шапке цены (немного крупнее и без лишних отступов, т.к. лежит в flex-контейнере) */
.price-discount-chip.bonus {
	font-size: 10px;       /* Чуть крупнее базового 10px */
	padding: 1px 5px;     /* Увеличены внутренние отступы */
	margin-left: 0;        /* Отступ управляется через gap родителя */
	font-weight: 500;      /* Для лучшей читаемости "Б" */
}

/* Убедимся, что правая часть шапки цены выровнена по центру и держит отступы */
.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;              /* Равномерный отступ между чипом и сердечком */
}

/* Адаптивность липкой панели для мобильных устройств */
@media (max-width: 768px) {
	.sticky-inner {
		display: grid;
		/* Три колонки: картинка (48px), инфо (остальное), действия (авто) */
		grid-template-columns: 48px 1fr auto;
		/* Два ряда: название сверху, цена снизу */
		grid-template-rows: auto auto;
		gap: 8px 12px;
		padding: 12px 16px;
		align-items: center;
	}

	/* 1. Миниатюра товара: занимает всю высоту левой колонки */
	.sticky-thumb {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}

	/* 2. Название: сверху по центру, обрезаем до 2 строк */
	.sticky-title {
		grid-column: 2;
		grid-row: 1;
		font-size: 14px;
		line-height: 1.25;
		margin-bottom: 0;
		/* Обрезаем слишком длинное название, чтобы не ломало верстку */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.sticky-title-sub {
		display: block;
		margin-top: 2px;
		font-size: 10px;
		color: var(--ink-4);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 3. Блок цены: переносим на вторую строку под название */
	.sticky-price-block {
		grid-column: 2;
		grid-row: 2;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row;
		gap: 8px;
	}

	.sticky-price {
		font-size: 18px;
		font-weight: 700;
		white-space: nowrap; /* Цена всегда в одну строку */
	}

	.sticky-save {
		font-size: 10px;
		margin: 0;
		white-space: nowrap;
	}

	/* 4. Кнопка "В корзину": занимает правую колонку сверху */
	.btn-sticky-cart {
		grid-column: 3;
		grid-row: 1;
		width: 100%;
		min-width: 110px; /* Минимальная ширина для пальца */
		padding: 12px 8px;
		font-size: 13px;
		line-height: 1.2;
		white-space: normal; /* Позволяем тексту переноситься если экран узкий */
	}

	/* 5. Кнопка "Избранное": под кнопкой корзины, квадратная */
	.btn-sticky-fav {
		grid-column: 3;
		grid-row: 2;
		width: 100%;
		min-width: 110px;
		border-radius: var(--r-sm); /* Скругляем углы как у кнопки корзины */
		height: 42px; /* Фиксируем высоту под размер кнопки корзины */
		justify-content: center;
	}
}

/* ========== АДАПТИВНОСТЬ REVIEWS ========== */
@media (max-width: 768px) {
	.reviews-summary {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding-bottom: 24px;
	}

	.reviews-score-block {
		border-right: none;
		border-bottom: 1px solid var(--rule);
		padding-right: 0;
		padding-bottom: 24px;
		width: 100%;
		justify-content: center;
	}

	.reviews-score-num {
		font-size: 48px;
	}

	.reviews-stars {
		font-size: 14px;
		letter-spacing: 2px;
	}

	/* Распределение оценок — компактный вид */
	.reviews-breakdown {
		max-width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.rate-row {
		display: grid;
		grid-template-columns: 20px 1fr 24px;
		align-items: center;
		gap: 10px;
		font-size: 12px;
	}

	.rate-row .num {
		text-align: center;
		font-weight: 500;
		color: var(--ink-3);
	}

	.rate-row .bar {
		height: 6px;
		border-radius: 3px;
		background: var(--rule);
		overflow: hidden;
	}

	.rate-row .bar-fill {
		height: 100%;
		border-radius: 3px;
		background: var(--star) !important;
		transition: width 0.6s cubic-bezier(.2,.7,.2,1);
	}

	.rate-row .count {
		text-align: right;
		font-size: 11px;
		color: var(--ink-4);
		font-weight: 500;
	}
}

/* Для очень маленьких экранов */
@media (max-width: 380px) {
	.reviews-score-num {
		font-size: 40px;
	}

	.rate-row {
		grid-template-columns: 18px 1fr 20px;
		gap: 8px;
		font-size: 11px;
	}

	.rate-row .bar {
		height: 5px;
	}
}


.video-remote {object-fit: cover; width: 100%; height: 100%; border-radius: var(--r-lg); box-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(70, 50, 30, 0.2) 0px 24px 48px -32px;}

/* ========== WARRANTY SECTION ========== */
.warranty-container {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
}

.warranty-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.warranty-item img {
	max-width: 100%;
	height: auto;
	display: block;
	transition: transform var(--t);
}

.warranty-item:hover img {
	transform: scale(1.05);
}

/* Warranty responsive - tablet */
@media (max-width: 1100px) {
	.warranty-container {
		flex-direction: column;
		gap: 20px;
		padding: 16px 0;
	}
	
	.warranty-item {
		width: 100%;
	}
	
	.warranty-item img {
		max-width: 100%;
		margin: 0 auto;
	}
}

/* ========== ССЫЛКА В ХАРАКТЕРИСТИКАХ ========== */
.char-value a {
	color: var(--ink-2);
	text-decoration: none;
	border-bottom: 1px dashed var(--ink-4);
	padding-bottom: 1px;
	transition: color var(--t), border-color var(--t);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.char-value a::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8L8 2M4 2h4v4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8L8 2M4 2h4v4'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	flex-shrink: 0;
	opacity: 0.55;
	transition: opacity var(--t), transform var(--t);
}
.char-value a:hover {
	color: var(--ink);
	border-color: var(--ink-3);
}
.char-value a:hover::after {
	opacity: 1;
	transform: translate(1px, -1px);
}

.rating {
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 1;
	vertical-align: middle;
}
/* ========== ДОСТОИНСТВА / НЕДОСТАТКИ ========== */
.review-pros-cons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}
.review-aspect {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-2);
}
.review-aspect-icon {
	flex-shrink: 0;
	margin-top: 2px;
	width: 18px; height: 18px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
.review-aspect-icon svg {
	width: 10px; height: 10px;
	fill: none; stroke-width: 2.2;
	stroke-linecap: round; stroke-linejoin: round;
}
.review-aspect--pro .review-aspect-icon { background: rgba(42,122,62,0.10); }
.review-aspect--pro .review-aspect-icon svg { stroke: var(--success); }
.review-aspect--con .review-aspect-icon { background: rgba(180,100,60,0.10); }
.review-aspect--con .review-aspect-icon svg { stroke: var(--accent-2); }
.review-aspect-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-4);
	margin-right: 4px;
	white-space: nowrap;
}

/* ========== ОТВЕТ МАГАЗИНА ========== */
.review-reply {
	position: relative;
	margin-top: 16px;
	margin-left: 20px;
	padding: 14px 16px 14px 42px;
	background: var(--bg-card);
	border: 1px solid var(--rule-soft);
	border-radius: var(--r-lg);
	border-left: 2px solid var(--accent);
}
.review-reply-arrow {
	position: absolute;
	left: -20px;
	top: 18px;
	width: 20px; height: 20px;
}
.review-reply-arrow svg {
	width: 20px; height: 20px;
	stroke: var(--accent); stroke-width: 1.6;
	fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.review-reply-icon {
	position: absolute;
	left: 14px; top: 14px;
	width: 20px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #e6d9c6, #d4c4ab);
	border-radius: 50%;
}
.review-reply-icon svg {
	width: 10px; height: 10px;
	stroke: var(--accent-2); stroke-width: 2;
	fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.review-reply-header {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 8px;
}
.review-reply-brand {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-2);
}
.review-reply-body {
	font-size: 13.5px;
	color: var(--ink-3);
	line-height: 1.6;
}
.price-auth-hint em {
	font-style: italic;
	font-weight: 700;
	color: var(--accent-2);
}
/* Размеры в cross-sell */
.cross-sell-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 7px;
}
.cross-sell-size {
	min-width: 30px;
	height: 22px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10.5px;
	font-variant-numeric: tabular-nums;
	color: var(--ink-3);
	border: 1px solid var(--rule);
	border-radius: calc(var(--r-sm) - 2px);
	cursor: pointer;
	transition: all var(--t);
	user-select: none;
	background: transparent;
}
.cross-sell-size:hover:not(.is-disabled) {
	border-color: var(--ink-4);
	color: var(--ink);
}
.cross-sell-size.is-active {
	background: var(--ink);
	color: var(--bg-card);
	border-color: var(--ink);
}
.cross-sell-size.is-disabled {
	opacity: 0.3;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Когда есть размеры — кнопку опускаем вниз, меняем flex-direction */
.cross-sell-item--sizes {
	align-items: flex-start;
}
.cross-sell-item--sizes .btn-cross-cart {
	margin-top: 2px;
	align-self: flex-end;
}
/* Разделитель между items */
.cross-sell-item + .cross-sell-item {
	margin-top: 14px;
	padding-top: 14px;
	position: relative;
}
.cross-sell-item + .cross-sell-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--rule-soft) 20%, var(--rule-strong) 50%, var(--rule-soft) 80%, transparent);
}

/* Скрытые items */
.cross-sell-item.is-hidden {
	display: none;
}

/* Кнопка "показать ещё" */
.cross-sell-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 14px;
	padding-top: 14px;
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ink-4);
	text-transform: uppercase;
	transition: color var(--t);
}
.cross-sell-more::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--rule-soft) 20%, var(--rule-strong) 50%, var(--rule-soft) 80%, transparent);
}
.cross-sell-more-icon {
	width: 16px; height: 16px;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: border-color var(--t), background var(--t), transform var(--t);
}
.cross-sell-more-icon svg {
	width: 8px; height: 8px;
	stroke: currentColor; stroke-width: 2;
	fill: none; stroke-linecap: round; stroke-linejoin: round;
	transition: transform var(--t);
}
.cross-sell-more:hover { color: var(--ink-2); }
.cross-sell-more:hover .cross-sell-more-icon {
	border-color: var(--ink-3);
	background: var(--bg-tint);
}
.cross-sell-more.is-expanded .cross-sell-more-icon svg {
	transform: rotate(180deg);
}
@keyframes crossSellFadeIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Принудительно выносим модалку и лайтбокс на верхний слой (см. --lux-layer-modal в style.css) */
.modal-overlay {
	z-index: calc(var(--lux-layer-modal, 150000) + 1) !important;
	position: fixed !important;
	isolation: isolate; /* Создаёт независимый контекст, игнорируя родителей */
}
.lightbox {
	z-index: calc(var(--lux-layer-modal, 150000) + 100) !important;
	position: fixed !important;
}
.info-modal {
	z-index: var(--lux-layer-modal, 150000) !important;
	position: fixed !important;
}

#site-header-root {
	z-index: 500 !important; /* Оставляем хедер строго ниже */
}
@supports (-webkit-touch-callout: none) {
	#site-header-root {
		z-index: 400 !important;
		transform: none !important; /* Убираем создание stacking context */
	}
}


/* Для очень маленьких экранов */
@media (max-width: 450px) {
	.option-popup{
		display:none !important;
	}
}

/* Зелёное состояние кнопок корзины */
#btnCartMain.in-basket,
#stickyCartBtn.in-basket,
.btn-cross-cart.in-basket {
    background: oklch(0.55 0.09 150) !important;
    color: #ffffff !important;
    border-color: oklch(0.55 0.09 150) !important;
}
/* Чип размера на зелёном фоне */
#btnCartMain.in-basket .size-chip {
    background: rgba(255,255,255,0.25);
    color: #ffffff;
}

/* === БЛОК ДОСТАВКИ === */
.delivery-block {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    overflow: hidden;
}

.delivery-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}

.delivery-main svg {
    width: 20px;
    height: 20px;
    stroke: var(--ink-4);
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0;
}

.delivery-text {
    flex: 1;
}

.delivery-sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--rule-soft);
}

.delivery-sub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.35;
}

.delivery-sub-item + .delivery-sub-item {
    border-left: 1px solid var(--rule-soft);
}

.delivery-sub-item svg {
    width: 16px;
    height: 16px;
    stroke: var(--ink-4);
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0;
}

.delivery-return-link {
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px dashed var(--ink-4);
    padding-bottom: 1px;
    transition: color var(--t), border-color var(--t);
}

.delivery-return-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}