/*
 * «Целебные силы Востока» — brand layer for the FRAME (ft_frame) theme.
 *
 * Loaded by common/header.twig after bootstrap.min.css, stylesheet.css and custom.css.
 * bootstrap.min.css and custom.css are regenerated by the FRAME admin on every save,
 * so all brand styling lives here, in Git. Do not edit those two generated files.
 *
 * Sections:
 *   1. Design tokens            8. Breadcrumbs, headings, alerts
 *   2. Base & typography        9. Product cards (lists, carousels)
 *   3. Links & focus           10. Product page
 *   4. Buttons                 11. Category / search pages
 *   5. Forms                   12. FRAME home modules
 *   6. Header                  13. Brand sections (admin HTML snippets, .svv-*)
 *   7. Category menu           14. Footer
 *                              15. Motion & misc
 *
 * !important is used only where FRAME markup relies on Bootstrap 4 utilities that are
 * themselves !important (.text-*, .bg-*, .border*, .rounded, .shadow-sm, .d-*, .w-auto,
 * spacing utilities); each such remap is commented. Components use plain specificity.
 */

/* 1. Design tokens -------------------------------------------------------- */
:root {
	--svv-milk: #faf7f2;
	--svv-white: #ffffff;
	--svv-sand-100: #f3ece0;
	--svv-sand-200: #e9dfce;
	--svv-sand-300: #e2d8c6;
	--svv-gold: #b4975a;            /* decorative lines only, never text */

	--svv-green-50: #eaf1ec;
	--svv-green-100: #d5e4da;
	--svv-green-600: #2d6e45;
	--svv-green-700: #24533a;       /* brand / trust / navigation */
	--svv-green-800: #1b4030;
	--svv-green-900: #1d2b24;       /* footer */

	--svv-brick-600: #a3381c;       /* buy CTA, from the logo burgundy */
	--svv-brick-700: #852d16;

	--svv-text: #23282b;
	--svv-text-muted: #5a6266;
	--svv-border: #e2d8c6;
	--svv-input-border: #8c8579;    /* 3.6:1 on white, WCAG non-text contrast */

	--svv-success: #2d6e45;
	--svv-danger: #b3261e;
	--svv-warning-text: #7a4f00;

	--svv-radius-sm: 8px;
	--svv-radius: 12px;
	--svv-radius-lg: 20px;
	--svv-radius-xl: 28px;
	--svv-ease: cubic-bezier(.2, .7, .2, 1);
	--svv-shadow-sm: 0 1px 2px rgba(35, 40, 43, .06), 0 1px 3px rgba(35, 40, 43, .06);
	--svv-shadow: 0 4px 16px rgba(35, 40, 43, .08);
	--svv-focus: 0 0 0 3px var(--svv-white), 0 0 0 5px var(--svv-green-700);

	--svv-space-1: .5rem;
	--svv-space-2: 1rem;
	--svv-space-3: 1.5rem;
	--svv-space-4: 2rem;
	--svv-space-5: 3rem;
	--svv-space-6: 4.5rem;

	--svv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--svv-tap: 44px;                /* minimum touch target */

	/* Logo box. A horizontal logo can replace the square one later with no header changes:
	   the image keeps its aspect ratio inside this box and is never upscaled beyond its file. */
	--svv-logo-h: 52px;             /* phones and tablets */
	--svv-logo-h-lg: 112px;         /* desktop (>= 992px) */

	/* Bootstrap 4 CSS variables used by FRAME's own CSS (e.g. custom.css fill:var(--primary)) */
	--primary: var(--svv-green-700);
	--danger: var(--svv-danger);
	--success: var(--svv-success);
}

/* 2. Base & typography ---------------------------------------------------- */
/* FRAME sets html, body { font-size: 14px }; 16px is the readable minimum for this audience. */
html,
body {
	font-size: 16px;
}

body {
	font-family: var(--svv-font);
	line-height: 1.6;
	color: var(--svv-text);
	background-color: var(--svv-milk);
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--svv-text);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}

h1, .h1 { font-size: 1.75rem; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); }
h2, .h2 { font-size: 1.5rem; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5, h6, .h6 { font-size: 1.0625rem; }

small, .small {
	font-size: .9375rem;            /* 15px: secondary text stays readable */
}

.font-weight-light {
	font-weight: 400 !important;    /* remap: thin text is hard to read */
}

.text-muted,
.text-secondary {
	color: var(--svv-text-muted) !important; /* remap Bootstrap utility */
}

.text-dark {
	color: var(--svv-text) !important; /* remap Bootstrap utility */
}

/* FRAME greys: #adb5bd icons (2.1:1) and #6c757d text (4.4:1 on the milk background) are too light */
.text-gray-500 {
	color: #6e767a !important;      /* remap: icons, >= 3.9:1 on every brand background */
}

.text-gray-600 {
	color: var(--svv-text-muted) !important; /* remap */
}

.text-success { color: var(--svv-success) !important; } /* remap */
.text-danger { color: var(--svv-danger) !important; }   /* remap */

.bg-light {
	background-color: var(--svv-sand-100) !important; /* remap */
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
	border-color: var(--svv-border) !important; /* remap Bootstrap utility colour only */
}

hr {
	border-top-color: var(--svv-border);
}

/* 3. Links & focus ------------------------------------------------------- */
a {
	color: var(--svv-green-700);
}

a:hover {
	color: var(--svv-green-800);
}

/* Links inside running text must not rely on colour alone */
.svv-section p a,
.svv-note a,
#tab-description a,
.information-content a,
#information-information #content a {
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* FRAME turns every .text-dark / .text-secondary link red on hover */
a.text-secondary:hover:not(.dark-on-hover),
a.text-dark:hover:not(.dark-on-hover) {
	color: var(--svv-green-700) !important;
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* Visible keyboard focus everywhere; mouse clicks keep the clean look */
a:focus,
button:focus,
.btn:focus,
[tabindex]:focus,
summary:focus {
	outline: 0;
	box-shadow: var(--svv-focus);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
	box-shadow: none;
}

/* .shadow-none (FRAME icon buttons) removes box-shadow with !important, so keyboard focus
   also gets an outline that no utility class removes. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--svv-green-700);
	outline-offset: 2px;
}

footer a:focus-visible {
	outline-color: var(--svv-white);
}

.svv-skip-link {
	position: absolute;
	left: var(--svv-space-2);
	top: -100px;
	z-index: 10000;
	padding: .75rem 1.25rem;
	border-radius: var(--svv-radius-sm);
	background: var(--svv-green-700);
	color: var(--svv-white);
	font-weight: 600;
}

.svv-skip-link:focus {
	top: var(--svv-space-1);
	color: var(--svv-white);
}

/* 4. Buttons -------------------------------------------------------------- */
.btn {
	min-height: var(--svv-tap);
	border-radius: var(--svv-radius-sm);
	font-weight: 500;
	line-height: 1.4;
}

.btn-lg {
	min-height: 52px;
	padding: .75rem 1.5rem;
	font-size: 1.0625rem;
}

/* Remapped Bootstrap colour variants (compiled bootstrap.min.css uses fixed blue/red) */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
	background-color: var(--svv-green-700);
	border-color: var(--svv-green-700);
	color: var(--svv-white);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	background-color: var(--svv-green-800);
	border-color: var(--svv-green-800);
	color: var(--svv-white);
}

/* FRAME uses .btn-danger as its accent (catalog button, "Купить"): brand CTA colour */
.btn-danger,
.btn-cta {
	background-color: var(--svv-brick-600);
	border-color: var(--svv-brick-600);
	color: var(--svv-white);
}

.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):active,
.show > .btn-danger.dropdown-toggle,
.btn-cta:hover,
.btn-cta:focus {
	background-color: var(--svv-brick-700);
	border-color: var(--svv-brick-700);
	color: var(--svv-white);
}

.btn-light {
	background-color: var(--svv-white);
	border-color: var(--svv-border);
	color: var(--svv-text);
}

.btn-light:hover,
.btn-light:not(:disabled):not(.disabled):active,
.show > .btn-light.dropdown-toggle {
	background-color: var(--svv-sand-100);
	border-color: var(--svv-sand-300);
	color: var(--svv-text);
}

.btn-outline-primary,
.btn-outline {
	background-color: var(--svv-white);
	border: 2px solid var(--svv-green-700);
	color: var(--svv-green-700);
}

.btn-outline-primary:hover,
.btn-outline:hover {
	background-color: var(--svv-green-50);
	border-color: var(--svv-green-800);
	color: var(--svv-green-800);
}

.btn:disabled,
.btn.disabled {
	opacity: .55;
}

/* 5. Forms ---------------------------------------------------------------- */
.form-control,
.custom-select {
	min-height: 48px;
	font-size: 1rem;                /* 16px also prevents iOS zoom on focus */
	color: var(--svv-text);
	border-color: var(--svv-input-border);
	border-radius: var(--svv-radius-sm);
}

textarea.form-control {
	min-height: 120px;
}

.form-control:focus,
.custom-select:focus {
	border-color: var(--svv-green-700);
	box-shadow: 0 0 0 3px rgba(36, 83, 58, .25);
}

.form-control::placeholder {
	color: #6f767a;
	opacity: 1;
}

label,
.control-label {
	font-weight: 500;
	margin-bottom: .375rem;
}

.form-control.is-invalid,
.has-error .form-control {
	border-color: var(--svv-danger);
}

.invalid-feedback,
.text-danger.small,
.has-error .help-block {
	font-size: .9375rem;
	color: var(--svv-danger);
}

.custom-control-label::before {
	border-color: var(--svv-input-border);
}

.custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--svv-green-700);
	border-color: var(--svv-green-700);
}

/* 6. Header --------------------------------------------------------------- */
header {
	background-color: var(--svv-white);
	border-bottom: 1px solid var(--svv-border);
	margin-bottom: var(--svv-space-3);
}

header #top {
	background-color: var(--svv-milk) !important; /* overrides .bg-white on the bar */
	font-size: .9375rem;
}

header #top .btn {
	min-height: 40px;
}

/* Utility buttons in the top bar: quiet, no boxes until hover */
header #top .btn-light {
	background-color: transparent;
	border-color: transparent;
	color: var(--svv-text-muted);
}

header #top .btn-light:hover,
header #top .btn-light:focus {
	background-color: var(--svv-sand-100);
	color: var(--svv-text);
}

#logo {
	margin-top: .75rem !important;   /* overrides .my-3 / .my-lg-4 */
	margin-bottom: .75rem !important;
}

#logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--svv-logo-h-lg);
}

header .btn-link {
	min-width: var(--svv-tap);
	min-height: var(--svv-tap);
	color: var(--svv-text);
}

/* Compact header on phones and tablets (< 992px): one row for menu / logo / account / cart,
   one row for search with a call button. The secondary links, hours and the utility bar
   move into the catalogue menu (svv-ui.js "Ещё"), the footer keeps them as well. */
@media (max-width: 991.98px) {
	header {
		margin-bottom: var(--svv-space-2);
	}

	/* The utility bar stays only when it carries the language / currency switchers */
	#top:not(.svv-top-sw) {
		display: none;
	}

	#top.svv-top-sw .col:not(:first-child),
	#top.svv-top-sw .col-auto:not(:first-child) {
		display: none;
	}

	#top.svv-top-sw {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	#logo {
		margin-top: .25rem !important;
		margin-bottom: .25rem !important;
		text-align: left !important;    /* overrides .text-center */
	}

	#logo img {
		max-height: var(--svv-logo-h);
	}

	header .container > .row > .col-12.col-lg-3.col-aside {
		padding-top: .25rem;
	}

	.svv-m-menu-label {
		margin-left: .375rem;
		font-size: 1rem;
		font-weight: 600;
		color: var(--svv-text);
	}

	#ftSearch .search-button {
		min-width: 48px;
	}

	/* the header row becomes two lines: menu / logo / account / cart, then search + call */
	header .container > .row {
		display: flex;
		flex-wrap: wrap;
	}

	header .container > .row > .col-12.col-lg-3.col-aside:first-child {
		order: 1;
		flex: 0 0 100%;
	}

	/* search column */
	header .container > .row > .col-12.col-lg.order-lg-6 {
		order: 2;
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		padding-right: 0;
		margin-bottom: .5rem !important;
	}

	/* contacts column: only the call button */
	header .container > .row > .col-12.col-lg-auto.order-lg-2 {
		order: 3;
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		padding-left: .5rem;
		margin-bottom: .5rem;
	}

	/* header links, divider, empty cart/menu columns: gone on small screens */
	header .container > .row > .col-12.col-lg.order-lg-3,
	header .container > .row > .col-12.order-lg-4 {
		display: none;
	}

	/* FRAME puts the contacts divider above the block, outside #h-contacts */
	header .container > .row > .col-12.col-lg-auto.order-lg-2 > .mx-n1 {
		display: none;
	}

	#h-contacts hr,
	#h-contacts .col-auto:nth-child(n+2),
	#h-contacts small {
		display: none !important;      /* overrides .d-block on the hours hint */
	}

	#h-contacts > div {
		margin: 0 !important;
	}

	#h-contacts .row {
		margin: 0 !important;
	}

	#h-contacts .col-auto:first-child a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border: 2px solid var(--svv-green-700);
		border-radius: var(--svv-radius);
		background: var(--svv-white);
		color: var(--svv-green-700);
	}

	#h-contacts .col-auto:first-child a:hover {
		background: var(--svv-green-50);
	}

	#h-contacts .col-auto:first-child svg {
		margin: 0 !important;
		width: 24px;
		height: 24px;
		color: var(--svv-green-700) !important;
	}

	/* the mobile "contacts" floating-button variant is untouched */
}

#ftSearch .input-group {
	border: 2px solid var(--svv-green-700) !important; /* overrides .border-current text-gray-400 */
	border-radius: var(--svv-radius) !important;
	overflow: hidden;
}

#ftSearch .form-control {
	min-height: 48px;
	border: 0;
	font-size: 1rem;
	text-align: left !important;    /* FRAME centres the query on mobile */
	padding-left: 1rem;
}

#ftSearch .form-control:focus {
	box-shadow: none;
}

#ftSearch .input-group:focus-within {
	box-shadow: 0 0 0 3px rgba(36, 83, 58, .25);
}

#ftSearch .search-button {
	min-width: 56px;
	background-color: var(--svv-green-700);
	border-color: var(--svv-green-700) !important;
	color: var(--svv-white);
	border-radius: 0;
}

#ftSearch .search-button:hover {
	background-color: var(--svv-green-800);
}

#ftSearch .search-button svg {
	color: var(--svv-white) !important;
}

#ft_cart > .btn-primary {
	background-color: var(--svv-white);
	border: 2px solid var(--svv-green-700);
	color: var(--svv-green-700);
	font-weight: 600;
}

#ft_cart > .btn-primary:hover {
	background-color: var(--svv-green-50);
	color: var(--svv-green-800);
}

#ft_m_cart_total {
	background-color: var(--svv-brick-600);
	color: var(--svv-white) !important; /* overrides .text-gray-400 */
}

/* Cart popup and cart page: presentation only, the cart logic and Simple checkout are untouched.
   "Оформить заказ" is the purchase action, so it gets the purchase colour and the largest size. */
#ft_popup_cart .modal-footer a[href].btn-primary,
#checkout-cart a[href].btn-primary {
	padding-top: .6875rem;          /* 48px high, text centred */
	padding-bottom: .6875rem;
	background-color: var(--svv-brick-600);
	border-color: var(--svv-brick-600);
	color: var(--svv-white);
	font-weight: 600;
	font-size: 1.0625rem;
}

#ft_popup_cart .modal-footer a[href].btn-primary:hover,
#checkout-cart a[href].btn-primary:hover {
	background-color: var(--svv-brick-700);
	border-color: var(--svv-brick-700);
}

/* popup: 44px close button, 44px quantity / remove buttons */
#ft_popup_cart .modal-header [data-dismiss="modal"] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: var(--svv-tap);
	height: var(--svv-tap);
	margin: -10px -10px -10px 0;
}

#ft_popup_cart .modal-body .input-group-sm > .input-group-prepend > .btn,
#ft_popup_cart .modal-body .input-group-sm > .input-group-append > .btn {
	min-width: var(--svv-tap);
}

#ft_popup_cart .modal-body .input-group-sm {
	flex-wrap: nowrap;              /* minus / quantity / plus / remove stay on one line at 320px */
}

#ft_popup_cart .modal-body .input-group-sm > .input-quantity {
	flex: 0 0 52px;
	max-width: 52px;
}

/* phones: the small "×" duplicates the remove (bin) button next to the quantity */
#ft_popup_cart .modal-body .close[onclick^="cart.remove"] {
	display: none;
}

/* cart page: removing a product is not a purchase action, so it is neutral, not brick */
#checkout-cart .table .btn-danger {
	background-color: var(--svv-white);
	border-color: var(--svv-border);
	color: var(--svv-text);
}

#checkout-cart .table .btn-danger:hover {
	background-color: var(--svv-sand-100);
}

#checkout-cart .table .input-group .btn {
	min-width: var(--svv-tap);
}

/* cart page: "Оформление заказа" first and full width; side by side it was cut ("Оформление за...") */
#checkout-cart .card-body > .form-row > [class*="col-"] {
	flex: 0 0 100%;
	max-width: 100%;
	margin-left: 0 !important;
}

#checkout-cart .card-body > .form-row > .order-sm-2 {
	order: -1;
	margin-bottom: .5rem !important;
}

/* Cart page on phones: each product becomes a row card (photo, name, quantity, total) instead of
   a six-column table that scrolls sideways; the model and unit price columns are hidden. The
   "next step" card puts totals and "Оформление заказа" first, coupon / certificate / shipping after. */
@media (max-width: 575.98px) {
	#checkout-cart form .table-responsive {
		overflow: visible;
	}

	#checkout-cart form .table thead {
		display: none;
	}

	#checkout-cart form .table,
	#checkout-cart form .table tbody {
		display: block;
		border: 0;
	}

	#checkout-cart form .table tr {
		display: grid;
		grid-template-columns: 80px 1fr;
		column-gap: .75rem;
		padding: .75rem 0;
		border-bottom: 1px solid var(--svv-border);
	}

	#checkout-cart form .table td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left !important;
	}

	#checkout-cart form .table td:nth-child(1) {
		grid-row: 1 / span 3;
	}

	#checkout-cart form .table td:nth-child(3),
	#checkout-cart form .table td:nth-child(5) {
		display: none;
	}

	#checkout-cart form .table td:nth-child(4) {
		margin-top: .5rem;
	}

	#checkout-cart form .table td:nth-child(6) {
		margin-top: .5rem;
		font-weight: 700;
		font-size: 1.125rem;
	}

	#checkout-cart form .table td:empty {
		display: none;
	}

	#checkout-cart .card-body {
		display: flex;
		flex-direction: column;
	}

	#checkout-cart .card-body > #accordion,
	#checkout-cart .card-body > hr {
		order: 3;
	}

	#checkout-cart .card-body > #accordion {
		margin-top: var(--svv-space-3);
	}
}

/* 7. Category menu -------------------------------------------------------- */
#ftMenu > .btn {
	background-color: var(--svv-green-700);
	border-color: var(--svv-green-700);
	color: var(--svv-white);
	font-size: 1.0625rem;
}

#ftMenu > .btn:hover,
#ftMenu.show > .btn {
	background-color: var(--svv-green-800);
	border-color: var(--svv-green-800);
}

.category-menu-list {
	border-color: var(--svv-border) !important;
	border-radius: 0 0 var(--svv-radius) var(--svv-radius) !important;
	box-shadow: var(--svv-shadow) !important;
	font-size: 1rem;
}

.category-menu-item .link-level-1,
.category-menu-item .link-level-2 {
	color: var(--svv-text) !important;
	min-height: var(--svv-tap);
}

.category-menu-item.item-level-1.hover > .link-level-1,
.category-menu-item .link-level-1:hover,
.category-menu-item .link-level-2:hover {
	background-color: var(--svv-green-50);
	color: var(--svv-green-800) !important;
}

/* FRAME custom.css dims level-3+ items to 35% opacity, which fails contrast */
.category-menu-item:not(.item-level-1):not(.item-level-2):not(.item-level-3) {
	opacity: 1;
}

.svv-icon,
.category-menu-item .svv-icon {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	color: var(--svv-green-700);
}

/* Phone menu: extra links under the categories (built by svv-ui.js) */
.svv-menu-extras {
	margin-top: .5rem;
	padding: .5rem 0 1rem;
	border-top: 1px solid var(--svv-border);
	background-color: var(--svv-milk);
}

.svv-menu-extras ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.svv-menu-extras__link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 52px;
	padding: .5rem 1rem;
	color: var(--svv-text);
	font-size: 1.0625rem;
}

.svv-menu-extras__link:hover,
.svv-menu-extras__link:focus {
	background-color: var(--svv-green-50);
	color: var(--svv-green-800);
	text-decoration: none;
}

.svv-menu-extras__link small {
	color: var(--svv-text-muted);
}

.svv-menu-extras__phone {
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--svv-green-800);
}

/* 8. Breadcrumbs, headings, alerts --------------------------------------- */
.breadcrumb {
	align-items: center;
	min-height: var(--svv-tap);
	margin-bottom: 0;
	padding: 0;
	background: transparent;
	font-size: .9375rem;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.breadcrumb::-webkit-scrollbar {
	height: 0;
}

.breadcrumb-item {
	display: flex;
	align-items: center;
}

/* FRAME draws the "/" with ::after; keep it light and close to the links */
.breadcrumb-item:not(:last-child)::after {
	margin: 0 .125rem !important;   /* overrides the FRAME rule (.5rem) */
	color: var(--svv-text-muted) !important;
}

.breadcrumb-item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--svv-tap);
	min-height: var(--svv-tap);
	padding: 0 .375rem;
	color: var(--svv-text-muted);
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* The current page is repeated in the H1 right below: cut it to one line */
.breadcrumb-item:last-child {
	flex: 1 1 0;
	min-width: 0;
	padding-left: .375rem;
}

.breadcrumb-item:last-child span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.breadcrumb-item.active {
	color: var(--svv-text-muted);
}

/* Page titles: closer to the breadcrumbs, long Russian words may break */
#product-product h1,
#product-category h1,
#product-search h1,
#product-manufacturer h1 {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-webkit-hyphens: manual;        /* no automatic hyphenation: hard to read; words still break if too long */
	hyphens: manual;
}

@media (max-width: 767.98px) {
	#product-product h1,
	#product-category h1,
	#product-search h1,
	#product-manufacturer h1 {
		margin-top: .125rem !important;     /* overrides .my-4 */
		margin-bottom: .75rem !important;   /* overrides .mb-4 */
		font-size: 1.5rem;
		line-height: 1.25;
	}
}

.alert {
	border-radius: var(--svv-radius);
	font-size: 1rem;
}

.alert-success {
	background-color: var(--svv-green-50);
	border-color: var(--svv-green-100);
	color: var(--svv-green-800);
}

/* 9. Product cards -------------------------------------------------------- */
.product-item > .bg-white,
.product-thumb {
	background-color: var(--svv-white);
	border-color: var(--svv-border) !important;
	border-radius: var(--svv-radius) !important;
	box-shadow: none !important;     /* border alone is enough; the shadow appears on hover */
	transition: box-shadow .2s ease;
}

.product-item > .bg-white:hover {
	box-shadow: var(--svv-shadow) !important;
}

.product-item .product-image img {
	border-radius: var(--svv-radius-sm);
}

/* Keep non-square photos inside the square image box instead of over the name */
.product-item .product-image .ft-lazy-img,
.product-item .image picture img,
.product-thumb .product-image .ft-lazy-img {
	width: 100% !important;     /* overrides .w-auto so object-fit can centre the photo */
	height: 100%;
	object-fit: contain;
}

.product-item .product-name a,
.product-thumb .product-name a {
	min-height: 2.8em;              /* two lines: aligns prices in a row and gives a 44px tap area */
	display: -webkit-box;
	-webkit-line-clamp: 3;          /* long Russian names: 3 lines instead of 2 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--svv-text) !important;
}

.product-item .price .h6,
.product-thumb .price .h6 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--svv-text);
}

.product-item .price s,
.product-thumb .price s {
	font-size: .9375rem;
	color: var(--svv-text-muted) !important; /* old price is information, not an error */
}

/* "В корзину" in every product listing; other .btn-cart-add buttons stay neutral */
.btn-cart-add[onclick^="cart.add"] {
	background-color: var(--svv-brick-600);
	border-color: var(--svv-brick-600);
	color: var(--svv-white);
	font-weight: 600;
	padding-left: .75rem !important;
	padding-right: .75rem !important;
}

.btn-cart-add[onclick^="cart.add"]:hover {
	background-color: var(--svv-brick-700);
	border-color: var(--svv-brick-700);
}

.btn-cart-add[onclick^="cart.add"] [class*=ft-icon] {
	color: var(--svv-white) !important; /* icon inherits .text-gray-500 otherwise */
}

/* Card actions: "В корзину" gets a full-width row with its label always visible;
   quick view / one-click / more stay as a second row of equal icon buttons. */
.product-item .product-controls > .btn-group,
.product-thumb .product-controls > .btn-group {
	display: flex !important;   /* overrides .d-md-inline-flex */
	flex-wrap: wrap;
	width: 100%;
	gap: 6px;
}

.product-item .product-controls > .btn-group > .btn,
.product-item .product-controls > .btn-group > .btn-group > .btn,
.product-thumb .product-controls > .btn-group > .btn,
.product-thumb .product-controls > .btn-group > .btn-group > .btn {
	flex: 1 1 0;
	margin: 0;
	border-radius: var(--svv-radius-sm) !important;
}

.product-item .product-controls > .btn-group > .btn-group,
.product-thumb .product-controls > .btn-group > .btn-group {
	display: flex;
	flex: 0 0 var(--svv-tap);
	order: -1;
}

/* "В корзину" + "more" in one row; quick view / one click (if on) below. A lone "more"
   button no longer becomes a full-width grey bar when the other buttons are switched off. */
.product-item .product-controls > .btn-group > .btn-cart-add[onclick^="cart.add"],
.product-thumb .product-controls > .btn-group > .btn-cart-add[onclick^="cart.add"] {
	flex: 1 1 calc(100% - var(--svv-tap) - 6px);
	min-width: 0;
	order: -2;
}

.btn-cart-add[onclick^="cart.add"] .text-truncate {
	display: block !important;  /* overrides .d-none on the label when quick view is on */
}

.btn-cart-add {
	min-width: var(--svv-tap);
}

/* Secondary card actions (quick view, one click, more): quiet, so that the buy button leads */
.btn-cart-add:not([onclick^="cart.add"]) {
	background-color: var(--svv-sand-100);
	border-color: transparent;
	color: var(--svv-text-muted);
}

.btn-cart-add:not([onclick^="cart.add"]):hover {
	background-color: var(--svv-sand-200);
	border-color: transparent;
}

/* Phones: one row in the card, the buy button and "more". Quick view and one-click stay
   available on the product page; the cards get shorter. */
@media (max-width: 575.98px) {
	.product-item .product-controls {
		padding-left: .25rem !important;      /* overrides .px-2 */
		padding-right: .25rem !important;
	}

	.product-item .product-controls > .btn-group {
		flex-wrap: nowrap;
		gap: 4px;
	}

	/* the label must never be cut: no side margins around it on phones */
	.product-item .btn-cart-add[onclick^="cart.add"] .text-truncate {
		margin-left: 0 !important;      /* overrides .mx-2 */
		margin-right: 0 !important;
	}

	.product-item .product-controls > .btn-group > .btn-cart-add[onclick^="cart.add"] {
		flex: 1 1 auto;
		min-width: 0;
		padding-left: .125rem !important;
		padding-right: .125rem !important;
		font-size: .9375rem;
	}

	.product-item .product-controls > .btn-group > .btn-group {
		flex: 0 0 var(--svv-tap);
	}

	.product-item [onclick^="ft_qview"],
	.product-item [onclick^="ft_fastorder"] {
		display: none;
	}

	.product-item .btn-cart-add[onclick^="cart.add"] svg,
	.product-item .btn-cart-add[onclick^="cart.add"] .col-auto:first-child {
		display: none;
	}

	/* "Нет в наличии" on the disabled button may wrap instead of being cut */
	.product-item .btn-cart-add[disabled] .text-truncate {
		white-space: normal;
		line-height: 1.15;
	}

	.product-item .product-controls .text-success,
	.product-item .product-controls .text-danger {
		margin-top: .25rem !important;      /* overrides .my-2 */
		margin-bottom: .25rem !important;
	}
}

/* Small phones (<= 430px): catalog listings (category, search, specials, manufacturer) show one
   card per row: a large photo, the full name, a large price and a full-size buy button.
   Home page modules and carousels keep their own layout; tablets and desktops keep the grid. */
@media (max-width: 430px) {
	.products-container > .grid > .product-item {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.products-container > .grid .product-image > a > .d-inline-block {
		width: 100%;
		max-width: 240px;               /* the photo box is square: the card stays about 470px high */
	}

	.products-container > .grid .product-image > a > .d-inline-block > svg {
		width: 100%;
		height: auto;
	}

	.products-container > .grid .product-description,
	.products-container > .grid .product-controls {
		padding-left: .75rem !important;    /* overrides .px-2 and the < 576px .25rem */
		padding-right: .75rem !important;
	}

	.products-container > .grid .product-name a {
		min-height: var(--svv-tap);     /* one-line names stay a 44px target; no 3-line reserve */
		font-size: 1.0625rem;
	}

	.products-container > .grid .price .h6 {
		font-size: 1.375rem;
	}

	.products-container > .grid .product-controls > .btn-group {
		gap: 8px;
	}

	.products-container > .grid .product-controls > .btn-group > .btn-cart-add[onclick^="cart.add"] {
		min-height: 48px;
		padding-left: .75rem !important;
		padding-right: .75rem !important;
		font-size: 1rem;
	}

	.products-container > .grid .btn-cart-add[onclick^="cart.add"] .col-auto:first-child,
	.products-container > .grid .btn-cart-add[onclick^="cart.add"] svg {
		display: block;                 /* the basket icon is back: there is room for it */
	}

	.products-container > .grid .btn-cart-add[onclick^="cart.add"] .text-truncate {
		margin-left: .5rem !important;  /* space between the icon and the label */
	}

	.products-container > .grid .product-controls > .btn-group > .btn-group {
		flex: 0 0 48px;
	}

	.products-container > .grid .product-controls > .btn-group > .btn-group > .btn {
		min-height: 48px;
	}
}

/* FRAME product modules featured / latest / bestseller / special (template .products-wall): the same
   action row as the catalog cards. Without it "В корзину" + quick view + one-click + "more" were
   wider than the card (desktop) and the page scrolled sideways at 320px. */
.products-wall .product-item .btn-group.mt-2 {
	display: flex !important;   /* overrides .d-md-inline-flex */
	flex-wrap: wrap;
	width: 100%;
	gap: 6px;
}

.products-wall .product-item .btn-group.mt-2 > .btn,
.products-wall .product-item .btn-group.mt-2 > .btn-group > .btn {
	flex: 1 1 0;
	margin: 0;
	border-radius: var(--svv-radius-sm) !important;
}

/* "В корзину" and the "more" menu share the first row; quick view / one click (when switched on)
   take the second one, so the "more" button never stretches into a full grey bar */
.products-wall .product-item .btn-group.mt-2 > .btn-group {
	display: flex;
	flex: 0 0 var(--svv-tap);
}

.products-wall .product-item .btn-group.mt-2 > .btn-cart-add[onclick^="cart.add"] {
	flex: 1 1 calc(100% - var(--svv-tap) - 6px);
	min-width: 0;
	order: -2;
}

.products-wall .product-item .btn-group.mt-2 > .btn-group.dropdown {
	order: -1;
}

@media (max-width: 575.98px) {
	.products-wall .product-item .btn-group.mt-2 {
		flex-wrap: nowrap;
		gap: 4px;
	}

	.products-wall .product-item .btn-group.mt-2 > .btn-cart-add[onclick^="cart.add"] {
		flex: 1 1 auto;
		min-width: 0;
		padding-left: .125rem !important;
		padding-right: .125rem !important;
		font-size: .9375rem;
	}

	.products-wall .product-item .btn-cart-add[onclick^="cart.add"] .text-truncate {
		margin-left: 0 !important;  /* overrides .mx-2 */
		margin-right: 0 !important;
	}

	.products-wall .product-item .btn-group.mt-2 > .btn-group {
		flex: 0 0 var(--svv-tap);
	}
}

/* 320px: two cards of ~140px; "В корзину" keeps its full label, wishlist/compare stay on the product page */
@media (max-width: 359.98px) {
	.products-wall .product-item .btn-group.mt-2 > .btn-group {
		display: none;
	}
}

/* FRAME products carousel (xds_products_carousel): section heading + one card per product */
.products-carousel.card {
	border: 0;
	background: transparent;
}

.products-carousel > .card-header {
	padding: 0 0 var(--svv-space-2) !important;
	border: 0;
	background: transparent;
}

.products-carousel .card-title {
	margin-left: 0 !important;
	font-size: 1.375rem;
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
	font-weight: 600;
}

.products-carousel .owl-item,
.products-carousel .carousel-placeholder .item {
	padding: 4px;
}

.products-carousel .owl-item > .product-item,
.products-carousel .carousel-placeholder .product-item {
	background-color: var(--svv-white);
	border: 1px solid var(--svv-border);
	border-radius: var(--svv-radius);
	box-shadow: var(--svv-shadow-sm);
}

/* Stickers ("Хит", "Скидка") */
[class*="stiker-"] {
	display: inline-block;
	padding: .125rem .5rem;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
}

/* 10. Product page -------------------------------------------------------- */
#product-product h1 {
	font-size: 1.625rem;
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
	margin-top: var(--svv-space-2) !important;
}

#product-product .price .h2,
#product-product .price .h3,
#product-product .price > span {
	font-weight: 700;
	color: var(--svv-text);
}

#button-cart {
	min-height: 52px;
	font-size: 1.125rem;
}

#input-quantity {
	min-height: 52px;
	font-size: 1.125rem;
	font-weight: 600;
}

#product .input-group {
	flex-wrap: nowrap;
}

#product .input-group .btn {
	min-width: var(--svv-tap);
	min-height: 52px;
}

/* Quantity and "Купить" on separate full-width rows: the buy column is narrow on desktop */
#product > .row.form-row > .col,
#product > .row.form-row > .col-7 {
	flex: 0 0 100%;
	max-width: 100%;
}

#product > .row.form-row > .col-7 {
	margin-top: .75rem;
}

/* One-click order next to the main button: same size, but quiet, so "В корзину" leads */
#product > .row.form-row .col-auto > .btn-danger {
	min-width: 52px;
	min-height: 52px;
	background-color: var(--svv-white);
	border: 2px solid var(--svv-input-border);
	color: var(--svv-brick-600);
}

#product > .row.form-row .col-auto > .btn-danger:hover {
	background-color: var(--svv-sand-100);
	border-color: var(--svv-brick-600);
}

/* "О товаре" toggle on phones */
a[data-toggle="collapse"][href="#product-info"] {
	min-height: var(--svv-tap);
}

/* Gallery dots: FRAME makes them 10px with 5px gaps and 20% opacity. Keep the look, give each
   dot a 24px wide hit area (wider gaps, invisible ::after; the button is already 44px high)
   and a more visible resting state. */
.btn-dot {
	position: relative;
	margin: .3rem .45rem;
	opacity: .35;
}

.btn-dot::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -7px;
	right: -7px;
}

/* Wishlist / compare next to the price */
.btn-light[onclick^="wishlist.add"],
.btn-light[onclick^="compare.add"] {
	min-width: var(--svv-tap);
	min-height: var(--svv-tap);
	background-color: transparent;
	border-color: transparent;
}

/* Manufacturer / SKU values use .text-danger in FRAME: information, not an error */
#product-info .text-danger {
	color: var(--svv-text) !important;
	font-weight: 600;
}

#product-info a.text-danger {
	color: var(--svv-green-700) !important;
	text-decoration: underline;
}

#product-product .nav-tabs {
	border-bottom: 2px solid var(--svv-border);
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#product-product .nav-tabs .nav-link {
	min-height: var(--svv-tap);
	padding: .625rem 1rem;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--svv-text-muted);
	font-weight: 600;
	white-space: nowrap;
}

#product-product .nav-tabs .nav-link.active,
#product-product .nav-tabs .nav-link:hover {
	background: transparent;
	border-bottom-color: var(--svv-green-700);
	color: var(--svv-green-800);
}

#tab-description {
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 75ch;
}

#tab-description h2,
#tab-description h3 {
	margin-top: var(--svv-space-3);
}

#product-info {
	background-color: var(--svv-sand-100) !important;
	border-color: transparent !important;
	border-radius: var(--svv-radius) !important;
}

/* 11. Category / search pages -------------------------------------------- */
#product-category .category-description,
#product-category #content > .row:first-child {
	font-size: 1rem;
}

#product-category .custom-select,
#product-search .custom-select {
	min-height: var(--svv-tap);
}

/* Subcategory tiles without an image (empty field) or with a broken file (svv-ui.js):
   a quiet sand square instead of FRAME's crossed-out picture or the broken-image icon. */
.svv-subcats .svv-subcat-noimg,
.svv-subcats .svv-img-missing {
	background-color: var(--svv-sand-100);
	border-radius: var(--svv-radius-sm);
}

.svv-subcats .svv-subcat-noimg path {
	display: none;
}

/* Category module (column list): 44px rows and the brand colour for the current category
   instead of Bootstrap blue (white on #007bff fails AA contrast) */
.col-aside .list-group-item-action {
	min-height: var(--svv-tap);
}

.list-group-item.active {
	background-color: var(--svv-green-700);
	border-color: var(--svv-green-700);
	color: var(--svv-white);
}

/* Phones and tablets (< 992px): page content first, side columns after it.
   FRAME puts column_left / column_right before #content in the markup and only reorders them
   from 992px (order-lg-*), so on phones the category list and sidebar modules came before the
   breadcrumbs, H1 and products. Desktop is unchanged. OCFilter has its own off-canvas on phones. */
@media (max-width: 991.98px) {
	.container > .row > #content {
		order: -1;
	}

	/* not .col-aside itself: the header rows use that class too */
	.col-aside > #column-left,
	.col-aside > #column-right {
		margin-top: var(--svv-space-3);
	}
}

/* Sort / limit / view switcher: quieter. Inactive view buttons have no box, the active one is tinted. */
#ft-list-view,
#ft-grid-view,
#ft-big-grid-view {
	min-width: var(--svv-tap);
	min-height: var(--svv-tap);
	background-color: transparent;
	border-color: transparent !important;   /* overrides .border */
}

#ft-list-view.active,
#ft-grid-view.active,
#ft-big-grid-view.active {
	background-color: var(--svv-green-50);
	border-color: var(--svv-green-100) !important;
}

.input-group-sm > .input-group-prepend > .input-group-text {
	border-color: var(--svv-input-border);
}

/* Phones: sort and view switcher on a single line; the per-page selector and the second
   (duplicate on one-column phones) big-grid button are hidden below 576px. */
@media (max-width: 575.98px) {
	#content .row.no-gutters > .col-12.order-sm-1.mt-2 {
		order: 1;
		flex: 1 1 0;
		max-width: none;
		min-width: 0;
		margin-top: 0 !important;     /* overrides .mt-2 */
	}

	#content .row.no-gutters > .col.ml-sm-auto.order-sm-2 {
		display: none;
	}

	#content .row.no-gutters > .col-auto.order-sm-3 {
		order: 2;
		margin-left: .5rem;
	}

	#ft-big-grid-view {
		display: none;
	}

	#content .row.no-gutters > .col-12.order-sm-1.mt-2 .input-group {
		flex-wrap: nowrap;
	}
}

.pagination .page-link {
	min-width: var(--svv-tap);
	min-height: var(--svv-tap);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--svv-green-700);
	border-color: var(--svv-border);
}

.pagination .page-item.active .page-link {
	background-color: var(--svv-green-700);
	border-color: var(--svv-green-700);
	color: var(--svv-white);
}

/* 12. FRAME home modules -------------------------------------------------- */
#common-home .h5,
.svv-section__title {
	font-size: 1.375rem;
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
	font-weight: 600;
}

[id^="ftCategoryWall"] .border,
[id^="ftCategoryWall"] .rounded {
	border-radius: var(--svv-radius) !important;
}

[id^="ftCategoryWall"] .item > div,
[id^="ftCategoryWall"] .owl-item > div > div {
	transition: box-shadow .2s ease, border-color .2s ease;
}

[id^="ftCategoryWall"] a:hover .border,
[id^="ftCategoryWall"] .item > div:hover {
	border-color: var(--svv-green-100) !important;
	box-shadow: var(--svv-shadow);
}

[id^="ftCategoryWall"] img {
	background-color: var(--svv-green-50);
	border-radius: 50%;
	padding: 12%;
}

[id^="ftCategoryWall"] .h6 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--svv-text);
	-webkit-line-clamp: 2 !important;  /* FRAME clamps category names to one line */
}

.custom-blocks .custom-block {
	border-color: var(--svv-border) !important;
	border-radius: var(--svv-radius) !important;
	padding: 1.25rem !important;
}

.custom-blocks .custom-block .title {
	font-size: 1.0625rem;
	font-weight: 600;
}

.custom-blocks .custom-block .description {
	color: var(--svv-text-muted);
	-webkit-line-clamp: 4 !important;
}

.custom-blocks .custom-block .svv-icon,
.custom-blocks .custom-block svg {
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: 50%;
	background-color: var(--svv-green-50);
	color: var(--svv-green-700);
	box-sizing: content-box;
}

.custom-blocks hr {
	display: none;
}

/* Carousel arrows: larger, clearer targets */
.btn-prev,
.btn-next {
	min-width: var(--svv-tap);
	min-height: var(--svv-tap);
	background-color: var(--svv-white);
	border: 1px solid var(--svv-border);
}

/* 13. Brand sections (home blocks written by tools/svv-site, content/*.html) - */
.svv-section {
	position: relative;
	margin: 0 0 var(--svv-space-6);
}

.svv-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: var(--svv-space-3);
}

.svv-section__kicker {
	display: block;
	margin-bottom: .375rem;
	color: var(--svv-green-600);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.svv-section__title {
	margin: 0;
	font-size: 1.625rem;
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.15;
}

.svv-section__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: .625rem;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--svv-gold), rgba(180, 151, 90, 0));
}

.svv-section__lead {
	max-width: 62ch;
	margin: .625rem 0 0;
	color: var(--svv-text-muted);
	font-size: 1.0625rem;
}

.svv-link-more {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	min-height: var(--svv-tap);
	font-weight: 600;
	color: var(--svv-green-700);
}

.svv-link-more .svv-icon {
	width: 18px;
	height: 18px;
	transition: transform .25s var(--svv-ease);
}

.svv-link-more:hover .svv-icon {
	transform: translateX(3px);
}

/* Soft surface band behind a whole section (full width of the content column) */
.svv-surface {
	padding: var(--svv-space-4) var(--svv-space-3);
	border-radius: var(--svv-radius-xl);
	background:
		radial-gradient(80% 120% at 100% 0%, rgba(213, 228, 218, .55), rgba(213, 228, 218, 0) 60%),
		linear-gradient(180deg, #fff, var(--svv-milk));
	box-shadow: inset 0 0 0 1px var(--svv-border);
}

/* Hero ----------------------------------------------------------------- */
.svv-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--svv-space-3);
	margin-bottom: var(--svv-space-5);
	padding: var(--svv-space-4) var(--svv-space-3) var(--svv-space-3);
	border-radius: var(--svv-radius-xl);
	background:
		radial-gradient(60% 80% at 92% 18%, rgba(45, 110, 69, .16), rgba(45, 110, 69, 0) 70%),
		radial-gradient(50% 70% at 0% 100%, rgba(180, 151, 90, .16), rgba(180, 151, 90, 0) 70%),
		linear-gradient(135deg, #fcfaf6 0%, var(--svv-sand-100) 100%);
	box-shadow: inset 0 0 0 1px rgba(226, 216, 198, .8);
	overflow: hidden;
	isolation: isolate;
}

/* barely visible paper grain */
.svv-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .4 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	pointer-events: none;
}

.svv-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .875rem;
	color: var(--svv-green-700);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.svv-hero__kicker::before {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--svv-gold);
}

.svv-hero__title {
	margin: 0 0 1rem;
	font-size: 2rem;
	font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3.5rem);
	font-weight: 750;
	line-height: 1.06;
	letter-spacing: -.025em;
	color: var(--svv-green-900);
	text-wrap: balance;
}

.svv-hero__title em {
	font-style: normal;
	background: linear-gradient(100deg, var(--svv-green-700), #3f8a5d 60%, var(--svv-gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.svv-hero__text {
	max-width: 52ch;
	margin: 0 0 1.5rem;
	color: #3d4a44;
	font-size: 1.0625rem;
	font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem);
	line-height: 1.55;
}

.svv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.svv-hero__actions .btn {
	min-height: 52px;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.svv-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.svv-hero__facts li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem .5rem .625rem;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, .75);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px rgba(226, 216, 198, .9);
	color: var(--svv-text);
	font-size: .9375rem;
	line-height: 1.3;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.svv-hero__facts .svv-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--svv-green-700);
}

/* Visual: the registered mark in a medallion, slow ornament ring, floating category chips */
.svv-hero__visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 260px;
}

.svv-hero__orb {
	position: relative;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 42%, #fff 0, #fdfbf7 55%, #efe6d6 100%);
	box-shadow: 0 24px 48px rgba(29, 43, 36, .14), 0 0 0 1px rgba(180, 151, 90, .45);
}

.svv-hero__orb img {
	position: absolute;
	inset: 13%;
	width: 74%;
	height: 74%;
	object-fit: contain;
}

.svv-hero__ring {
	position: absolute;
	inset: -18px;
	width: calc(100% + 36px);
	height: calc(100% + 36px);
	color: var(--svv-green-700);
	opacity: .35;
	animation: svv-spin 90s linear infinite;
}

.svv-hero__glow {
	position: absolute;
	inset: -30%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(45, 110, 69, .22), rgba(45, 110, 69, 0) 65%);
	animation: svv-breathe 9s ease-in-out infinite;
}

.svv-hero__chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .375rem .75rem .375rem .375rem;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, .9);
	box-shadow: var(--svv-shadow);
	color: var(--svv-green-900);
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
	animation: svv-float 7s ease-in-out infinite;
}

.svv-hero__chip .svv-icon {
	width: 28px;
	height: 28px;
	padding: 5px;
	border-radius: 50%;
	background-color: var(--svv-green-50);
	color: var(--svv-green-700);
}

.svv-hero__chip--1 { top: 4%;  left: 2%;  animation-delay: -1s; }
.svv-hero__chip--2 { top: 12%; right: 0;  animation-delay: -3s; }
.svv-hero__chip--3 { bottom: 10%; left: 0; animation-delay: -5s; }
.svv-hero__chip--4 { bottom: 2%; right: 6%; animation-delay: -2s; }

.svv-hero__leaves {
	position: absolute;
	right: -8%;
	bottom: -14%;
	z-index: -1;
	width: 62%;
	max-width: 360px;
	color: var(--svv-green-700);
	opacity: .12;
}

/* phones: the visual becomes a compact strip under the buttons */
@media (max-width: 575.98px) {
	.svv-hero {
		padding: var(--svv-space-3) 1rem 1rem;
		border-radius: var(--svv-radius-lg);
	}

	.svv-hero__actions .btn {
		flex: 1 1 100%;
	}

	.svv-hero__facts li {
		width: 100%;
		border-radius: var(--svv-radius-sm);
	}

	.svv-hero__visual {
		min-height: 210px;
	}

	.svv-hero__orb {
		width: 150px;
		height: 150px;
	}

	.svv-hero__chip {
		font-size: .75rem;
	}

	.svv-hero__chip--1 { top: 2%; left: 0; }
	.svv-hero__chip--2 { top: 8%; right: 0; }
	.svv-hero__chip--3 { bottom: 4%; left: 0; }
	.svv-hero__chip--4 { bottom: 0; right: 0; }
}

@media (min-width: 768px) {
	.svv-hero__visual {
		min-height: 320px;
	}

	.svv-hero__orb {
		width: 260px;
		height: 260px;
	}
}

@media (min-width: 992px) {
	.svv-hero {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: var(--svv-space-4);
		min-height: 460px;
		padding: var(--svv-space-5) var(--svv-space-5) var(--svv-space-5) 3.5rem;
	}

	.svv-hero__visual {
		min-height: 380px;
	}

	.svv-hero__orb {
		width: 300px;
		height: 300px;
	}
}

/* Category tiles ------------------------------------------------------- */
.svv-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svv-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: .875rem;
	height: 100%;
	min-height: 128px;
	padding: 1rem;
	border-radius: var(--svv-radius);
	background: linear-gradient(180deg, #fff, #fdfbf8);
	box-shadow: 0 0 0 1px var(--svv-border), var(--svv-shadow-sm);
	color: var(--svv-text) !important;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
	transition: transform .25s var(--svv-ease), box-shadow .25s var(--svv-ease);
}

.svv-tile .svv-icon {
	width: 52px;
	height: 52px;
	padding: 12px;
	border-radius: 16px;
	background: linear-gradient(145deg, var(--svv-green-50), #f4f0e7);
	color: var(--svv-green-700);
	transition: background .25s var(--svv-ease), color .25s var(--svv-ease), transform .25s var(--svv-ease);
}

.svv-tile span {
	padding-right: 1.25rem;
	hyphens: auto;
}

/* arrow that appears on hover / focus */
.svv-tile::after {
	content: "";
	position: absolute;
	right: 1rem;
	bottom: 1.15rem;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--svv-green-700);
	border-right: 2px solid var(--svv-green-700);
	transform: rotate(45deg);
	opacity: .35;
	transition: opacity .25s var(--svv-ease), transform .25s var(--svv-ease);
}

.svv-tile:hover,
.svv-tile:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 0 0 1px var(--svv-green-100), 0 14px 32px rgba(29, 43, 36, .12);
}

.svv-tile:hover .svv-icon,
.svv-tile:focus-visible .svv-icon {
	background: linear-gradient(145deg, var(--svv-green-700), #2f6b49);
	color: #fff;
	transform: rotate(-4deg) scale(1.04);
}

.svv-tile:hover::after,
.svv-tile:focus-visible::after {
	opacity: 1;
	transform: translateX(3px) rotate(45deg);
}

@media (min-width: 576px) {
	.svv-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (min-width: 992px) {
	.svv-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.svv-tile {
		min-height: 150px;
		padding: 1.25rem;
	}
}

@media (min-width: 1400px) {
	.svv-tiles {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Topic chips --------------------------------------------------------- */
.svv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svv-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 48px;
	padding: .5rem 1.125rem .5rem .5rem;
	border-radius: 999px;
	background-color: #fff;
	box-shadow: 0 0 0 1px var(--svv-border);
	color: var(--svv-text) !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: box-shadow .2s var(--svv-ease), background-color .2s var(--svv-ease), transform .2s var(--svv-ease);
}

.svv-chip .svv-icon {
	width: 32px;
	height: 32px;
	padding: 6px;
	border-radius: 50%;
	background-color: var(--svv-green-50);
	color: var(--svv-green-700);
}

.svv-chip:hover,
.svv-chip:focus-visible {
	background-color: var(--svv-green-50);
	box-shadow: 0 0 0 1px var(--svv-green-100), var(--svv-shadow-sm);
	transform: translateY(-1px);
}

/* Feature cards ("Почему нам доверяют") ------------------------------- */
.svv-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svv-feature {
	position: relative;
	height: 100%;
	padding: 1.5rem 1.25rem 1.25rem;
	border-radius: var(--svv-radius-lg);
	background: #fff;
	box-shadow: 0 0 0 1px var(--svv-border);
	overflow: hidden;
	transition: transform .25s var(--svv-ease), box-shadow .25s var(--svv-ease);
}

.svv-feature::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.25rem;
	right: 1.25rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--svv-green-700), var(--svv-gold));
	opacity: .8;
}

.svv-feature:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px var(--svv-green-100), 0 12px 28px rgba(29, 43, 36, .10);
}

.svv-feature .svv-icon {
	width: 48px;
	height: 48px;
	margin-bottom: 1rem;
	padding: 11px;
	border-radius: 14px;
	background: linear-gradient(145deg, var(--svv-green-50), #f4f0e7);
	color: var(--svv-green-700);
}

.svv-feature__title {
	margin: 0 0 .375rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.svv-feature__text {
	margin: 0;
	color: var(--svv-text-muted);
}

/* phones: icon on the left, the card is half as tall */
@media (max-width: 767.98px) {
	.svv-feature {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 1rem;
		padding: 1.125rem 1rem;
	}

	.svv-feature .svv-icon {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}
}

@media (min-width: 768px) {
	.svv-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.svv-features {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Steps ("Как сделать заказ") ------------------------------------------ */
.svv-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: svv-step;
}

.svv-steps li {
	position: relative;
	padding: 1.25rem 1.25rem 1.25rem 4.5rem;
	border-radius: var(--svv-radius-lg);
	background: #fff;
	box-shadow: 0 0 0 1px var(--svv-border);
	counter-increment: svv-step;
}

.svv-steps li::before {
	content: counter(svv-step);
	position: absolute;
	left: 1.25rem;
	top: 1.25rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--svv-green-700), #2f6b49);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 6px 14px rgba(36, 83, 58, .25);
}

.svv-steps strong {
	display: block;
	margin-bottom: .25rem;
	font-size: 1.0625rem;
}

.svv-steps span {
	color: var(--svv-text-muted);
}

@media (min-width: 768px) {
	.svv-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.svv-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.svv-steps li {
		padding: 4.25rem 1.25rem 1.5rem;
	}

	/* a thin connector between the numbers */
	.svv-steps li:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 2.375rem;
		left: 4rem;
		right: -1rem;
		height: 1px;
		background: linear-gradient(90deg, var(--svv-green-100), rgba(213, 228, 218, 0));
	}
}

/* Delivery & payment cards -------------------------------------------- */
.svv-dp {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.svv-dp__card {
	padding: 1.5rem 1.25rem;
	border-radius: var(--svv-radius-lg);
	background: #fff;
	box-shadow: 0 0 0 1px var(--svv-border);
}

.svv-dp__card h3 {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin: 0 0 1rem;
	font-size: 1.1875rem;
	font-weight: 700;
}

.svv-dp__card h3 .svv-icon {
	width: 40px;
	height: 40px;
	padding: 9px;
	border-radius: 12px;
	background: var(--svv-green-50);
	color: var(--svv-green-700);
}

.svv-dp__card p {
	margin: 0 0 .75rem;
	color: var(--svv-text-muted);
}

.svv-dp__card p:last-child {
	margin-bottom: 0;
}

.svv-dp__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.svv-dp__list li {
	padding: .375rem .75rem;
	border-radius: 999px;
	background: var(--svv-milk);
	box-shadow: 0 0 0 1px var(--svv-border);
	font-weight: 600;
	font-size: .9375rem;
}

.svv-dp__highlight {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	border-radius: var(--svv-radius);
	background: linear-gradient(90deg, rgba(213, 228, 218, .7), rgba(243, 236, 224, .7));
	color: var(--svv-green-900);
	font-weight: 700;
}

.svv-dp__highlight .svv-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--svv-green-700);
}

@media (min-width: 992px) {
	.svv-dp {
		grid-template-columns: 1.3fr 1fr 1fr;
	}

	.svv-dp__card {
		padding: 1.75rem;
	}
}

/* About band ------------------------------------------------------------ */
.svv-band {
	position: relative;
	display: grid;
	gap: 1.5rem;
	padding: var(--svv-space-4) var(--svv-space-3);
	border-radius: var(--svv-radius-xl);
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(180, 151, 90, .25), rgba(180, 151, 90, 0) 60%),
		linear-gradient(135deg, #1f3a2b 0%, var(--svv-green-700) 100%);
	color: #f3efe6;
	overflow: hidden;
	isolation: isolate;
}

.svv-band__mark {
	position: absolute;
	right: -40px;
	bottom: -50px;
	z-index: -1;
	width: 260px;
	height: 260px;
	opacity: .1;
	filter: grayscale(1) brightness(3);
}

.svv-band h2 {
	margin: 0 0 .75rem;
	color: #fff;
	font-size: 1.625rem;
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.15;
}

.svv-band .svv-section__kicker {
	color: #e3cf9f;
}

.svv-band p {
	max-width: 62ch;
	margin: 0 0 .75rem;
	color: #dfe6e1;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.svv-band__values {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.svv-band__values li {
	padding: .375rem .875rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
}

.svv-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

.svv-band .btn-light {
	min-height: 52px;
	padding: 0 1.5rem;
	display: inline-flex;
	align-items: center;
	background: #fff;
	border-color: #fff;
	color: var(--svv-green-900);
	font-weight: 700;
}

.svv-band a:not(.btn) {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 992px) {
	.svv-band {
		grid-template-columns: 1.6fr 1fr;
		align-items: center;
		padding: var(--svv-space-5) 3.5rem;
	}

	.svv-band__actions {
		justify-content: flex-end;
	}

	.svv-band__mark {
		width: 360px;
		height: 360px;
		right: -60px;
		bottom: -80px;
	}
}

/* Notice inside the product page / delivery info ---------------------- */
.svv-note {
	display: flex;
	gap: .75rem;
	padding: 1rem 1.125rem;
	border-radius: var(--svv-radius);
	background: linear-gradient(90deg, var(--svv-green-50), #f7f3ea);
	box-shadow: inset 0 0 0 1px var(--svv-green-100);
	color: var(--svv-text);
}

.svv-note .svv-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--svv-green-700);
}

.svv-note ul {
	margin: 0;
	padding-left: 1.125rem;
}

/* Secondary button used on dark and light surfaces */
.svv-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--svv-tap);
	padding: .5rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--svv-radius-sm);
	background: transparent;
	color: #fff !important;
	font-weight: 600;
	transition: background-color .2s var(--svv-ease), border-color .2s var(--svv-ease);
}

.svv-btn-ghost:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .6);
}

/* Header brand lockup (registered mark + name as text) ----------------- */
.svv-logo {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	color: var(--svv-green-900) !important;
	text-decoration: none !important;
}

.svv-logo__mark {
	flex: 0 0 auto;
	width: var(--svv-logo-h-lg);
	height: var(--svv-logo-h-lg);
	object-fit: contain;
	transition: transform .4s var(--svv-ease);
}

.svv-logo:hover .svv-logo__mark {
	transform: rotate(-3deg) scale(1.03);
}

.svv-logo__text {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.svv-logo__name {
	font-size: 1.375rem;
	font-weight: 750;
	letter-spacing: -.015em;
	line-height: 1.1;
}

.svv-logo__tagline {
	margin-top: .25rem;
	color: var(--svv-text-muted);
	font-size: .8125rem;
	line-height: 1.25;
}

/* #logo img rules above size a plain logo image; the brand mark has its own square box */
#logo .svv-logo .svv-logo__mark {
	width: 84px;
	height: 84px;
	max-height: none;
}

@media (max-width: 991.98px) {
	.svv-logo {
		gap: .5rem;
	}

	#logo .svv-logo .svv-logo__mark {
		width: 48px;
		height: 48px;
	}

	.svv-logo__name {
		font-size: 1rem;
		max-width: 8.5em;
	}

	.svv-logo__tagline {
		display: none;
	}
}

@media (max-width: 430px) {
	#logo .svv-logo .svv-logo__mark {
		width: 44px;
		height: 44px;
	}

	.svv-logo__name {
		font-size: .875rem;
		line-height: 1.15;
	}
}

@media (max-width: 359.98px) {
	.svv-logo {
		gap: .375rem;
	}

	.svv-logo__name {
		font-size: .8125rem;
	}
}

/* Header phone link that opens the chooser when no phone is set */
.svv-contact-cta {
	font-size: 1rem;
	font-weight: 700;
}

/* Social icons ---------------------------------------------------------- */
.svv-social {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svv-social__link {
	display: grid;
	place-items: center;
	width: var(--svv-tap);
	height: var(--svv-tap);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	color: #efe9de !important;
	transition: background-color .2s var(--svv-ease), transform .2s var(--svv-ease);
}

.svv-social__link .svv-icon {
	width: 22px;
	height: 22px;
	color: inherit;
}

.svv-social__link:hover {
	background: rgba(255, 255, 255, .18);
	transform: translateY(-2px);
}

/* Contact chooser (#svv-contact) ---------------------------------------- */
.svv-contact .modal-content {
	border: 0;
	border-radius: var(--svv-radius-lg);
	box-shadow: 0 30px 80px rgba(29, 43, 36, .3);
	overflow: hidden;
}

.svv-contact .modal-header {
	padding: 1.25rem 1.25rem .75rem;
	border: 0;
	background: linear-gradient(135deg, #fcfaf6, var(--svv-sand-100));
}

.svv-contact .modal-title {
	color: var(--svv-green-900);
	font-size: 1.25rem;
	font-weight: 750;
	letter-spacing: -.01em;
	text-transform: none;
}

.svv-contact .modal-header .close {
	min-width: var(--svv-tap);
	min-height: var(--svv-tap);
	margin: -.75rem -.75rem -.75rem auto;
}

.svv-contact .modal-body {
	padding: 1rem 1.25rem 1.25rem;
}

.svv-contact__lead {
	margin: 0 0 1rem;
	color: var(--svv-text-muted);
}

.svv-contact__list {
	display: grid;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.svv-contact__item {
	display: flex;
	align-items: center;
	gap: .875rem;
	min-height: 64px;
	padding: .625rem .875rem;
	border-radius: var(--svv-radius);
	box-shadow: 0 0 0 1px var(--svv-border);
	color: var(--svv-text) !important;
	text-decoration: none !important;
	transition: box-shadow .2s var(--svv-ease), background-color .2s var(--svv-ease), transform .2s var(--svv-ease);
}

.svv-contact__item:hover,
.svv-contact__item:focus-visible {
	background-color: var(--svv-green-50);
	box-shadow: 0 0 0 1px var(--svv-green-100);
	transform: translateX(2px);
}

.svv-contact__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--svv-green-50);
	color: var(--svv-green-700);
}

.svv-contact__item--phone .svv-contact__icon {
	background: var(--svv-brick-600);
	color: #fff;
}

.svv-contact__icon .svv-icon {
	width: 22px;
	height: 22px;
	color: inherit;
}

.svv-contact__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.svv-contact__text small {
	color: var(--svv-text-muted);
	font-size: .875rem;
}

.svv-contact__hours {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	color: var(--svv-text-muted);
	font-size: .9375rem;
}

.svv-contact__hours .svv-icon {
	width: 20px;
	height: 20px;
	color: var(--svv-green-700);
}

/* 14. Footer --------------------------------------------------------------- */
footer {
	position: relative;
	margin-top: var(--svv-space-6) !important; /* overrides .mt-4 */
	margin-bottom: 0 !important;               /* overrides .mb-5 */
	padding: var(--svv-space-5) 0 var(--svv-space-3);
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(180, 151, 90, .14), rgba(180, 151, 90, 0) 60%),
		var(--svv-green-900);
	color: #efe9de;
}

footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--svv-green-700), var(--svv-gold), var(--svv-green-700));
	opacity: .8;
}

footer .h5 {
	color: var(--svv-white);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

footer a {
	color: #efe9de;
}

footer a:hover {
	color: var(--svv-white);
}

footer [class*="text-gray"] {
	color: #bac5be !important;
}

footer hr {
	border-top-color: rgba(239, 233, 222, .18);
}

footer a:focus-visible,
footer button:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--svv-white);
}

.svv-footer__brand {
	margin-bottom: var(--svv-space-4);
}

.svv-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	color: #fff !important;
	font-size: 1.25rem;
	font-weight: 750;
	letter-spacing: -.01em;
	text-decoration: none !important;
}

.svv-footer__logo img {
	width: 56px;
	height: 56px;
	padding: 4px;
	border-radius: 50%;
	background: #fbf8f3;
}

.svv-footer__tagline {
	margin: .75rem 0 1rem;
	color: #bac5be;
	max-width: 32ch;
}

.svv-footer__brand .svv-social {
	margin-bottom: 1.25rem;
}

.svv-footer__col {
	margin-bottom: var(--svv-space-3);
}

.svv-footer__links {
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
}

.svv-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--svv-tap);
	padding: .25rem 0;
	color: #e3e9e5;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 calc(100% - 10px);
	background-repeat: no-repeat;
	transition: background-size .25s var(--svv-ease), color .2s var(--svv-ease);
}

.svv-footer__links a:hover {
	color: #fff;
	background-size: 100% 1px;
}

footer a[data-toggle="collapse"] {
	display: flex !important;        /* overrides .d-block; hidden again from 576px below */
	align-items: center;
	justify-content: center;
	min-width: var(--svv-tap);
	min-height: var(--svv-tap);
	margin: -10px -10px -10px 0;
}

@media (min-width: 576px) {
	footer a[data-toggle="collapse"] {
		display: none !important;    /* the columns are always open from 576px (.d-sm-block) */
	}
}

.svv-footer-contacts {
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
}

.svv-footer-contacts li {
	display: flex;
	gap: .625rem;
	align-items: center;
	min-height: var(--svv-tap);
}

.svv-footer-contacts .svv-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: #bac5be;
}

.svv-footer-contacts a {
	color: #e3e9e5;
}

.svv-footer-contacts .svv-footer-phone {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--svv-white) !important;
}

.svv-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.5rem;
	margin-top: var(--svv-space-3);
	padding-top: var(--svv-space-3);
	border-top: 1px solid rgba(239, 233, 222, .14);
	color: #bac5be;
	font-size: .875rem;
}

.svv-footer__bottom .f-pay-icons {
	margin-left: auto !important;
}

/* phones: accordion columns, room for the fixed "up" button */
@media (max-width: 575.98px) {
	.svv-footer__col {
		margin-bottom: 0;
		padding: .5rem 0;
		border-bottom: 1px solid rgba(239, 233, 222, .12);
	}

	.svv-footer__col .row {
		min-height: var(--svv-tap);
	}

	footer {
		padding-bottom: calc(var(--svv-space-3) + 64px);
	}
}

/* Contact page (information/contact with event/svv_brand/contact) ----------- */
.svv-contacts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: var(--svv-space-4);
}

.svv-contacts__main,
.svv-contacts__point,
.svv-contacts__seller {
	padding: 1.5rem;
	border-radius: var(--svv-radius-lg);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--svv-border), var(--svv-shadow-sm);
}

.svv-contacts__main {
	background:
		radial-gradient(80% 120% at 100% 0%, rgba(213, 228, 218, .6), rgba(213, 228, 218, 0) 60%),
		linear-gradient(135deg, #fff, var(--svv-milk));
}

.svv-contacts__lead {
	margin: 0 0 1rem;
	color: var(--svv-text-muted);
	font-size: 1.0625rem;
}

.svv-contacts__phone {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	min-height: var(--svv-tap);
	color: var(--svv-green-900) !important;
	font-size: 1.625rem;
	font-weight: 750;
	letter-spacing: -.01em;
	text-decoration: none !important;
}

.svv-contacts__phone .svv-icon {
	width: 28px;
	height: 28px;
}

.svv-contacts__hours,
.svv-contacts__point p {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: .5rem 0 0;
}

.svv-contacts__hours .svv-icon,
.svv-contacts__point .svv-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: .125rem;
}

.svv-contacts__point small {
	display: block;
	color: var(--svv-text-muted);
}

.svv-contacts__social {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.svv-contacts__social-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: var(--svv-tap);
	padding: .5rem 1rem;
	border-radius: 999px;
	background: var(--svv-green-50);
	color: var(--svv-green-800) !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color .2s var(--svv-ease), transform .2s var(--svv-ease);
}

.svv-contacts__social-link:hover {
	background: var(--svv-green-100);
	transform: translateY(-1px);
}

.svv-contacts__social-link .svv-icon {
	width: 20px;
	height: 20px;
	color: inherit;
}

.svv-contacts__orders {
	margin: 1.25rem 0 0;
	color: var(--svv-text-muted);
	font-size: .9375rem;
}

.svv-contacts__points {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.svv-contacts__point h2 {
	margin: 0 0 .25rem;
}

.svv-contacts__seller {
	background: var(--svv-milk);
	box-shadow: inset 0 0 0 1px var(--svv-border);
	font-size: .9375rem;
}

.svv-contacts__seller p {
	margin: 0;
}

@media (min-width: 768px) {
	.svv-contacts__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.svv-contacts {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.svv-contacts__points {
		grid-template-columns: 1fr;
	}

	.svv-contacts__seller {
		grid-column: 1 / -1;
	}
}

/* Information pages written by tools/svv-site (content/*.html) ----------- */
.svv-page {
	max-width: 46rem;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.svv-page__lead {
	margin-bottom: 1.5rem;
	color: var(--svv-text);
	font-size: 1.1875rem;
	line-height: 1.55;
}

.svv-page h2 {
	margin: 2rem 0 .75rem;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.svv-page ul {
	padding-left: 1.25rem;
}

.svv-page li + li {
	margin-top: .25rem;
}

.svv-page .btn {
	margin-top: 1rem;
	text-decoration: none !important;
}

.svv-page--legal {
	font-size: 1rem;
}

.svv-page--legal h2 {
	font-size: 1.1875rem;
}

/* Out of stock = "Под заказ": can be ordered, shown as a neutral note, not as an error */
.svv-stock-order {
	border: 0;
	background: #fbf3e2;
	box-shadow: inset 0 0 0 1px #ecd9b0;
	color: var(--svv-warning-text);
}

.svv-stock-order small {
	margin-top: .125rem;
	color: var(--svv-text-muted);
}

.svv-stock-order-text {
	color: var(--svv-warning-text);
}

/* Note at the end of an imported product description (tools/svv-import, column "disclaimer") */
.svv-product-note {
	margin-top: 1.5rem;
	padding: .75rem 1rem;
	border-left: 3px solid var(--svv-gold);
	border-radius: 0 var(--svv-radius-sm) var(--svv-radius-sm) 0;
	background: var(--svv-milk);
	color: var(--svv-text-muted);
	font-size: .9375rem;
}

/* 15. Motion & misc ------------------------------------------------------- */
@keyframes svv-spin {
	to { transform: rotate(360deg); }
}

@keyframes svv-breathe {
	0%, 100% { transform: scale(1); opacity: .85; }
	50% { transform: scale(1.06); opacity: 1; }
}

@keyframes svv-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* Scroll reveal: svv-ui.js adds .svv-js to <html> and .is-visible when a block enters the
   viewport. Without JS (or with reduced motion) everything is visible from the start. */
.svv-js .svv-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s var(--svv-ease), transform .6s var(--svv-ease);
}

.svv-js .svv-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.svv-js .svv-reveal {
		opacity: 1;
		transform: none;
	}
}

#footer-fixed-buttons .btn {
	min-width: 52px;
	min-height: 52px;
}

.modal-content {
	border-radius: var(--svv-radius);
}

.dropdown-menu {
	border-color: var(--svv-border);
	border-radius: var(--svv-radius-sm);
	box-shadow: var(--svv-shadow);
}

.dropdown-item {
	min-height: var(--svv-tap);
	display: flex;
	align-items: center;
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--svv-green-700);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	header,
	footer,
	#footer-fixed-buttons,
	.svv-skip-link {
		display: none !important;
	}

	body {
		background: #fff;
	}
}