/* ============================================================================
   НАСЛАДА — redesign layer v1
   Loads last on every page and refines the frozen Hestia/Bootstrap theme:
   same amber (#FFC72C) + red (#DA291C) identity, modern execution.
   Pair with tools/redesign-codemod.mjs (injects this sheet + small HTML edits).
   ============================================================================ */

/* ---------------------------------------------------------------- tokens -- */
:root {
	--amber: #ffc72c;
	--amber-soft: #ffd34d;
	--amber-deep: #f0a500;
	--red: #da291c;
	--red-deep: #b71c12;
	--ink: #2b2926;
	--ink-2: #3e3a34;
	--muted: #857e72;
	--paper: #faf7f1;
	--surface: #ffffff;
	--tint: #fff6de;
	--line: #ede6d8;
	--shadow-sm:
		0 1px 2px rgba(43, 41, 38, 0.06), 0 10px 30px -18px rgba(43, 41, 38, 0.25);
	--shadow-md:
		0 2px 6px rgba(43, 41, 38, 0.07), 0 18px 44px -20px rgba(43, 41, 38, 0.35);
	--shadow-lg: 0 24px 60px -24px rgba(43, 41, 38, 0.4);
	--radius: 16px;
	--radius-sm: 12px;
	--brand-grad: linear-gradient(
		135deg,
		var(--amber-soft) 0%,
		var(--amber) 45%,
		var(--amber-deep) 100%
	);
	--paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%232B2926' fill-opacity='.06'%3E%3Cellipse cx='70' cy='90' rx='25' ry='20'/%3E%3Cellipse cx='38' cy='60' rx='10' ry='13' transform='rotate(-20 38 60)'/%3E%3Cellipse cx='60' cy='44' rx='10' ry='13' transform='rotate(-6 60 44)'/%3E%3Cellipse cx='82' cy='44' rx='10' ry='13' transform='rotate(8 82 44)'/%3E%3Cellipse cx='103' cy='60' rx='10' ry='13' transform='rotate(22 103 60)'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ base -- */
html {
	scroll-behavior: smooth;
}

body {
	background: var(--paper);
	color: var(--ink-2);
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hestia-title,
.title,
.card-title,
.info-title {
	font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
	color: var(--ink);
}

h1,
h2,
h3 {
	letter-spacing: -0.01em;
}

a {
	color: var(--red);
}
a:hover {
	color: var(--red-deep);
}

::selection {
	background: var(--amber);
	color: var(--ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid rgba(218, 41, 28, 0.45);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Content typography (about page, news posts, 404) */
article.section-text p {
	line-height: 1.85;
}
article.section-text img {
	border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- navbar -- */
.navbar.navbar-fixed-top {
	min-height: 72px;
	box-shadow: 0 1px 0 rgba(43, 41, 38, 0.08);
	transition:
		box-shadow 0.25s ease,
		min-height 0.25s ease;
}

.navbar.navbar-fixed-top.navbar-not-transparent {
	background: var(--amber);
	box-shadow: 0 8px 24px -12px rgba(43, 41, 38, 0.45);
}

.navbar .navbar-header .navbar-brand p {
	font-family: "CyrillicCooper", "Roboto Slab", serif;
	font-size: 40px;
	line-height: 1.15;
	color: var(--red);
	text-shadow: none;
	padding: 12px 0;
	transition: color 0.2s ease;
}

.navbar .navbar-header .navbar-brand:hover p {
	color: var(--red-deep);
}

.navbar .navbar-nav > li a {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.navbar .navbar-nav > li:not(.btn) > a {
	border-radius: 10px;
}

/* active page marker — small underline that grows on hover */
#menu-header-menu > li > a {
	position: relative;
}

#menu-header-menu > li > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 9px;
	height: 3px;
	border-radius: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: 50% 50%;
	transition: transform 0.25s ease;
}

#menu-header-menu > li > a:hover::after,
#menu-header-menu > li.current-menu-item > a::after,
#menu-header-menu > li.current_page_parent > a::after,
#menu-header-menu > li.current_page_item > a::after {
	transform: scaleX(1);
}

#menu-header-menu > li.current-menu-item > a,
#menu-header-menu > li.current_page_item > a {
	color: var(--red);
}

/* mobile menu panel */
@media (max-width: 767px) {
	.navbar .navbar-collapse.in,
	.navbar .navbar-collapse.collapsing {
		background: var(--surface);
		border-radius: 0 0 var(--radius) var(--radius);
		box-shadow: 0 24px 40px -18px rgba(43, 41, 38, 0.5);
		padding: 6px 22px 16px;
	}

	.navbar .navbar-nav > li > a {
		color: var(--ink);
	}

	.navbar .navbar-nav > li > a::after {
		display: none;
	}

	.navbar .navbar-nav > li {
		border-bottom: 1px solid var(--line);
	}

	.navbar .navbar-nav > li:last-child {
		border-bottom: 0;
	}
}

/* ------------------------------------------------------------ home hero -- */
body.home .carousel .page-header {
	min-height: clamp(540px, 86vh, 780px) !important;
	max-height: none !important;
}

body.home .page-header .header-filter::before {
	background: linear-gradient(
		180deg,
		rgba(31, 25, 12, 0.55) 0%,
		rgba(31, 25, 12, 0.32) 45%,
		rgba(31, 25, 12, 0.68) 100%
	);
}

body.home .carousel .hestia-title {
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(37px, 5.5vw, 62px);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-shadow: 0 3px 28px rgba(0, 0, 0, 0.45);
}

/* inserted by redesign-codemod.mjs */
.hero-lead {
	color: rgba(255, 255, 255, 0.92);
	font-size: 18px;
	line-height: 1.7;
	max-width: 580px;
	margin: 22px auto 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

.hero-btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.hero-btn--primary {
	background: var(--brand-grad);
	color: var(--ink);
	box-shadow: 0 10px 26px -8px rgba(240, 165, 0, 0.65);
}

.hero-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -10px rgba(240, 165, 0, 0.75);
	color: var(--ink);
}

.hero-btn--ghost {
	border: 2px solid rgba(255, 255, 255, 0.75);
	color: #fff;
}

.hero-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	transform: translateY(-2px);
}

/* --------------------------------------------------- subpage page-header -- */
.header-filter-gradient {
	background:
		var(--paw) center / 340px repeat,
		linear-gradient(
			135deg,
			var(--amber-soft) 0%,
			var(--amber) 45%,
			var(--amber-deep) 100%
		) !important;
}

body.archive .boxed-layout-header.page-header,
.page-template .boxed-layout-header.page-header,
.page-template-default .boxed-layout-header.page-header {
	min-height: 320px !important;
	max-height: 320px !important;
}

/* keep the H1 clear of the fixed navbar and above the raised sheet */
body.archive .page-header .container,
.page-template .page-header .container,
.page-template-default .page-header .container {
	padding-top: 118px !important;
	padding-bottom: 110px !important;
}

body.archive .page-header .hestia-title,
.page-template .page-header .hestia-title,
.page-template-default .page-header .hestia-title {
	font-size: clamp(30px, 4vw, 42px);
	color: var(--ink);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* -------------------------------------------------- raised content sheet -- */
.main-raised {
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: var(--shadow-lg);
}

body.archive .main-raised,
body.shop-page .main-raised {
	background: var(--surface);
}

/* ----------------------------------------------------- sections & titles -- */
body.home .hestia-features {
	background: var(--surface);
	padding: 96px 0 64px;
}

body.home .hestia-shop.section-gray {
	background:
		var(--paw) right -60px top -60px / 320px no-repeat,
		#f8f2e4;
	padding: 80px 0 84px;
}

body.home .hestia-testimonials {
	padding: 84px 0 56px;
}

body.home .hestia-blogs {
	padding: 64px 0 88px;
	background: var(--paper);
}

.hestia-features-title-area h2.hestia-title,
.hestia-shop-title-area h2.hestia-title,
.hestia-testimonials-title-area h2.hestia-title,
.hestia-blogs-title-area h2.hestia-title,
.hestia-contact-title-area h2.hestia-title,
.related.products h2 {
	font-size: clamp(27px, 3.2vw, 38px);
	margin-bottom: 0;
}

.hestia-features-title-area h2.hestia-title::after,
.hestia-shop-title-area h2.hestia-title::after,
.hestia-testimonials-title-area h2.hestia-title::after,
.hestia-blogs-title-area h2.hestia-title::after,
.hestia-contact-title-area h2.hestia-title::after,
.related.products h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--amber), var(--red));
	margin: 18px auto 0;
}

.hestia-contact-title-area h2.hestia-title::after,
.related.products h2::after {
	margin-left: 0;
}

.hestia-contact-title-area h2.hestia-title {
	text-align: left;
	color: #fff;
}

.related.products h2 {
	text-align: left;
}

/* --------------------------------------------------------------- features -- */
.hestia-features .hestia-info {
	padding: 26px 18px;
	border-radius: var(--radius);
	transition:
		background-color 0.25s ease,
		transform 0.25s ease;
}

.hestia-features .hestia-info:hover {
	background: var(--tint);
	transform: translateY(-4px);
}

.hestia-features .hestia-info .icon,
.hestia-features .info .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--tint);
	box-shadow: inset 0 0 0 1px rgba(240, 165, 0, 0.25);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.hestia-features .hestia-info:hover .icon,
.hestia-features .info:hover .icon {
	transform: scale(1.06);
	box-shadow: 0 12px 26px -10px rgba(240, 165, 0, 0.55);
}

.hestia-features .hestia-info .icon i,
.hestia-features .info .icon i {
	color: var(--red) !important;
	font-size: 34px !important;
}

.hestia-features .hestia-info .info-title,
.hestia-features .info .info-title {
	margin: 22px 0 8px;
	font-size: 18px;
	color: var(--ink);
}

/* ------------------------------------------------------------ shop cards -- */
.shop-result-count {
	display: none;
}

body.archive .products-header {
	min-height: 0;
}

/* Catalog context = body.shop / body.shop-page — both classes sit on the
   product archives AND the single-product pages (the related grid uses the
   same ul.products markup), so one :is() covers every li.product grid. Home
   is the exception: bootstrap cols (.shop-item), no ul.products. */

/* product grids — the theme forces ul.products.columns-* to display:grid,
   so we own the grid: explicit tracks per breakpoint (fixes the missing
   columns-4 sizing) and let the cards fill the tracks */
:is(body.shop, body.shop-page) ul.products[class*="columns-"] {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 991px) {
	:is(body.shop, body.shop-page) ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 768px) {
	:is(body.shop, body.shop-page) ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (max-width: 480px) {
	:is(body.shop, body.shop-page) ul.products[class*="columns-"] {
		grid-template-columns: 1fr;
	}
}

/* card root — li.product on catalog pages, .card-product on the home cols.
   position:relative makes each card the containing block for its single
   stretched link (.card-link::after), so the whole card is one link target. */
:is(body.shop, body.shop-page) ul.products li.product {
	position: relative;
	float: none !important;
	width: auto !important; /* beats the legacy per-breakpoint width patches */
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

body.home .hestia-shop-content .shop-item .card-product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

:is(body.shop, body.shop-page) ul.products li.product > .card-product {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
}

/* the card answers for the link: lift on hover, identical lift + ring when
   the link takes keyboard focus (parity for pointer and keyboard users) */
:is(body.shop, body.shop-page) ul.products li.product:hover,
body.home .hestia-shop-content .shop-item .card-product:hover,
:is(body.shop, body.shop-page)
	ul.products
	li.product:has(.card-link:focus-visible),
body.home
	.hestia-shop-content
	.shop-item
	.card-product:has(.card-link:focus-visible) {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
}

:is(body.shop, body.shop-page)
	ul.products
	li.product:has(.card-link:focus-visible),
body.home
	.hestia-shop-content
	.shop-item
	.card-product:has(.card-link:focus-visible) {
	outline: 3px solid rgba(218, 41, 28, 0.45);
	outline-offset: 2px;
}

@supports selector(:has(*)) {
	.card-link:focus-visible {
		outline: none;
	} /* the card carries the ring */
}

/* one link per card — the title. The ::after sheet spreads the target over
   the whole card (stretched-link pattern): one tab stop, one product name in
   the links list, a full-card touch target. */
:is(body.shop, body.shop-page) ul.products li.product .card-link,
body.home .hestia-shop-content .shop-item .card-link {
	color: var(--ink);
}

.card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

:is(body.shop, body.shop-page) ul.products li.product:hover .card-link,
:is(body.shop, body.shop-page)
	ul.products
	li.product:has(.card-link:focus-visible)
	.card-link,
body.home .hestia-shop-content .shop-item:hover .card-link,
body.home
	.hestia-shop-content
	.shop-item
	.card-product:has(.card-link:focus-visible)
	.card-link {
	color: var(--red);
}

:is(body.shop, body.shop-page) ul.products li.product .card-image,
body.home .hestia-shop-content .shop-item .card-image {
	margin: 0;
	overflow: hidden;
}

:is(body.shop, body.shop-page) ul.products li.product .card-image img,
body.home .hestia-shop-content .shop-item .card-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 230 / 350;
	object-fit: cover;
	transition: transform 0.5s ease;
}

:is(body.shop, body.shop-page) ul.products li.product:hover .card-image img,
:is(body.shop, body.shop-page)
	ul.products
	li.product:has(.card-link:focus-visible)
	.card-image
	img,
body.home .hestia-shop-content .shop-item:hover .card-image img,
body.home
	.hestia-shop-content
	.shop-item
	.card-product:has(.card-link:focus-visible)
	.card-image
	img {
	transform: scale(1.05);
}

:is(body.shop, body.shop-page) ul.products li.product .card-title,
body.home .hestia-shop-content .shop-item .card-title {
	min-height: 2.6em;
	margin: 0 14px;
	font-size: 1.1rem;
	overflow-wrap: break-word;
}

@media (max-width: 480px) {
	:is(body.shop, body.shop-page) ul.products li.product .card-title,
	body.home .hestia-shop-content .shop-item .card-title {
		font-size: 16px;
	}
}

:is(body.shop, body.shop-page) ul.products li.product .card-description,
body.home .hestia-shop-content .shop-item .card-description {
	margin: 8px 16px 4px;
	color: var(--muted);
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

:is(body.shop, body.shop-page) ul.products li.product .card-description p,
body.home .hestia-shop-content .shop-item .card-description p {
	margin: 0;
}

:is(body.shop, body.shop-page)
	ul.products
	li.product
	> .card-product
	> .content,
body.home .hestia-shop-content .shop-item .card-product > .content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
}

/* card CTA — decorative affordance (the codemod marks it aria-hidden): the
   stretched title link owns navigation, so this is a styled span, not a link.
   Highlights with the card on hover/focus; solid --amber (not the gradient)
   so the background-color transition is actually animatable. */
.card-cta {
	margin: 6px 16px 18px;
	margin-top: auto;
	align-self: stretch;
	text-align: center;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--tint);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

:is(body.shop, body.shop-page) ul.products li.product:hover .card-cta,
:is(body.shop, body.shop-page)
	ul.products
	li.product:has(.card-link:focus-visible)
	.card-cta,
body.home .hestia-shop-content .shop-item:hover .card-cta,
body.home
	.hestia-shop-content
	.shop-item
	.card-product:has(.card-link:focus-visible)
	.card-cta {
	background: var(--amber);
	color: var(--ink);
}

/* home “Продукти” section — cards are bootstrap cols (.shop-item), not
   li.product, so they need their own pass; one flex row gives equal heights */
body.home .hestia-shop-content .row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

body.home .hestia-shop-content .shop-item {
	display: flex;
	float: none;
	min-width: 0;
	flex: 1 1 0;
}

/* below sm there is no active col-* class — split into two equal columns
   (min-width: 0 lets them shrink under the 230px intrinsic image width) */
@media (max-width: 767px) {
	body.home .hestia-shop-content .shop-item {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* --------------------------------------------------------- breadcrumbs -- */
.shop .shop-breadcrumb,
.shop-breadcrumb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 1.5;
	font-size: 13px;
	background: var(--tint);
	border-radius: 999px;
	padding: 8px 18px;
	margin: 6px 0 26px;
	color: var(--muted);
}

.shop-breadcrumb a {
	color: var(--ink-2);
	font-weight: 600;
}

.shop-breadcrumb a:hover {
	color: var(--red);
}

/* -------------------------------------------------------- single product -- */
body.single-product .product_title.entry-title {
	font-size: clamp(29px, 3.4vw, 40px);
	margin-bottom: 14px;
}

.shop div.product p.price:empty {
	display: none;
}

.product-details__short-description p {
	font-size: 16.5px;
	line-height: 1.85;
	color: var(--ink-2);
	background: var(--tint);
	border-left: 3px solid var(--amber);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding: 16px 20px;
	margin-top: 18px;
}

.product-gallery .wp-post-image,
.product-gallery img {
	border-radius: var(--radius);
}

.summary.entry-summary {
	margin-top: 8px;
}

section.related.products {
	margin-top: 64px;
	padding-top: 44px;
	border-top: 1px solid var(--line);
}

section.related.products h2 {
	color: var(--ink);
}

section.related.products ul.products {
	margin-top: 30px;
}

/* ---------------------------------------------------------- testimonials -- */
body.home .card-testimonial {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 36px 22px 28px;
	margin-top: 30px;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

body.home .card-testimonial:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
}

.card-testimonial .card-avatar {
	max-width: none;
}

.card-testimonial .card-avatar img {
	width: 150px;
	height: 150px;
	max-width: 150px;
	max-height: 150px;
	object-fit: cover;
	border-radius: 50% !important;
	margin: 0 auto;
	box-shadow:
		0 0 0 5px var(--tint),
		0 14px 28px -12px rgba(43, 41, 38, 0.45);
	transition: transform 0.3s ease;
}

.card-testimonial:hover .card-avatar img {
	transform: scale(1.04);
}

.card-testimonial .card-title {
	margin-top: 18px;
	font-size: 20px;
}

/* ------------------------------------------------------------- blog card -- */
.card-blog.card-plain {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.card-blog.card-plain:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
}

.card-blog .card-image {
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
}

.card-blog .card-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.card-blog .content {
	padding: 22px 24px 26px;
}

.card-blog h6.category a {
	color: var(--red);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 11px;
}

.card-blog .card-title a {
	color: var(--ink);
}
.card-blog .card-title a:hover {
	color: var(--red);
}

.card-blog .card-description {
	color: var(--muted);
}

.card-blog a.moretag {
	display: inline-block;
	margin: 10px 0 0;
	font-weight: 700;
	color: var(--red-deep);
}

.card-blog a.moretag::after {
	content: " →";
}

.card-blog a.moretag:hover {
	color: var(--red);
}

/* ---------------------------------------------------------- photo gallery -- */
/* the frozen WP gallery layout CSS is incomplete — own the grid */
.wp-block-gallery.columns-3 {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
}

.wp-block-gallery .blocks-gallery-item {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	list-style: none;
}

.wp-block-gallery .blocks-gallery-item figure {
	position: relative;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.wp-block-gallery .blocks-gallery-item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.wp-block-gallery .blocks-gallery-item figure:hover img {
	transform: scale(1.04);
}

.wp-block-gallery .blocks-gallery-item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, transparent, rgba(31, 25, 12, 0.78));
	font-size: 14px;
	padding: 40px 16px 14px;
}

@media (max-width: 768px) {
	.wp-block-gallery.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.wp-block-gallery.columns-3 {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------ store list -- */
article.section-text h2.wp-block-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 56px 0 24px;
	font-size: 26px;
}

article.section-text h2.wp-block-heading::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 30px;
	border-radius: 6px;
	background: linear-gradient(180deg, var(--amber), var(--red));
}

article.section-text h4.wp-block-heading {
	font-size: 18px;
	margin: 0 0 10px;
}

article.section-text .wp-block-columns {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 26px 28px;
	margin-bottom: 26px;
	align-items: center;
	gap: 26px;
}

article.section-text .wp-block-column {
	flex: 1 1 300px;
	min-width: 0;
}

article.section-text .wp-block-column p {
	color: var(--muted);
	margin-bottom: 0;
}

article.section-text .wp-block-column p strong {
	color: var(--ink);
}

article.section-text .wp-block-column iframe {
	width: 100% !important;
	max-width: 600px;
	height: 300px;
	border: 0;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------- contact -- */
body.home .hestia-contact.section-image::after {
	background: linear-gradient(
		165deg,
		rgba(31, 25, 12, 0.85) 0%,
		rgba(31, 25, 12, 0.68) 55%,
		rgba(64, 48, 12, 0.62) 100%
	);
}

.contactus h5.description,
.contactus .hestia-info .description,
.contactus .info .description {
	color: #e9e2d4;
}

.contactus h5.description {
	font-size: 17px;
	line-height: 1.75;
}

.card-contact {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-lg) !important;
	background: var(--surface);
}

.card-contact .header.header-raised.header-primary {
	background: var(--brand-grad);
	margin-top: 0;
	padding: 22px 16px;
}

.card-contact .header.header-raised.header-primary .card-title,
.card-contact .header.header-raised.header-primary h4 {
	color: var(--ink);
}

.card-contact .content {
	padding: 28px 30px 24px;
}

/* WPForms — replace Material underline inputs with clean filled fields */
body div.wpforms-container .wpforms-form input[type="text"],
body div.wpforms-container .wpforms-form input[type="email"],
body div.wpforms-container .wpforms-form textarea {
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
	padding: 13px 16px;
	color: var(--ink-2);
	box-shadow: none !important;
	height: auto;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

body div.wpforms-container .wpforms-form input:focus,
body div.wpforms-container .wpforms-form textarea:focus {
	border-color: var(--amber-deep) !important;
	box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.35) !important;
	outline: none !important;
}

body div.wpforms-container .wpforms-form input::placeholder,
body div.wpforms-container .wpforms-form textarea::placeholder {
	color: #a89f8f;
}

/* home page ships an extra-scoped theme rule (.home div.wpforms-container …)
   that re-adds the Material purple underline — beat it explicitly */
body.home div.wpforms-container .wpforms-form input[type="text"],
body.home div.wpforms-container .wpforms-form input[type="email"],
body.home div.wpforms-container .wpforms-form textarea {
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid var(--line) !important;
}

body div.wpforms-container .wpforms-form .form-control {
	background-image: none !important;
	background-color: #fff !important;
}

body div.wpforms-container .wpforms-form .wpforms-field {
	padding-bottom: 14px !important;
}

/* name/email side by side via grid — immune to the float cascade */
body div.wpforms-container .wpforms-form .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
}

body div.wpforms-container .wpforms-form .wpforms-field {
	width: auto !important;
	float: none !important;
	clear: none !important;
}

body div.wpforms-container .wpforms-form .wpforms-field-text,
body div.wpforms-container .wpforms-form .wpforms-field-textarea,
body div.wpforms-container .wpforms-form .wpforms-submit-container {
	grid-column: 1 / -1;
}

body div.wpforms-container .wpforms-form .wpforms-submit-container {
	text-align: center !important;
}

@media (max-width: 560px) {
	body div.wpforms-container .wpforms-form .wpforms-field-container {
		grid-template-columns: 1fr;
	}
}

body div.wpforms-container .wpforms-form button.wpforms-submit {
	background: var(--brand-grad) !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 13px 38px !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 10px 24px -8px rgba(240, 165, 0, 0.6) !important;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		filter 0.2s ease;
}

body div.wpforms-container .wpforms-form button.wpforms-submit:hover {
	transform: translateY(-2px);
	filter: saturate(1.08);
	box-shadow: 0 14px 30px -10px rgba(240, 165, 0, 0.7) !important;
}

/* contact form status boxes (see contact.css) */
.wpforms-error-container,
.wpforms-confirmation-container-full {
	border-radius: var(--radius-sm);
}

/* social icons under the form — keep Facebook, restyle */
.sfsi_widget {
	margin-top: 20px;
}

.sfsi_widget #sfsi_holder {
	display: none;
}

.sfsi_widget .sfsi_wicons {
	border-radius: 50% !important;
	overflow: hidden;
	box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease;
}

.sfsi_widget .sfsi_wicons:hover {
	transform: translateY(-3px) scale(1.05);
}

.sfsi_widget .sfsi_wicons img {
	border-radius: 50% !important;
}

/* --------------------------------------------------------------- footer -- */
footer.footer.footer-black {
	background: var(--ink);
	border-top: 3px solid var(--amber);
	padding: 38px 0 34px;
}

footer.footer.footer-black a {
	color: #d8d2c6;
	opacity: 1;
}

footer.footer.footer-black a:hover {
	color: var(--amber);
}

.hestia-bottom-footer-content {
	text-align: center;
}

.footer .footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.footer .footer-menu li {
	float: none;
	list-style: none;
}

.footer .footer-menu li a {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 8px 16px;
	border-radius: 999px;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.footer .footer-menu li a:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--amber);
}

.hestia-bottom-footer-content::after {
	content: "© Наслада — замразени храни за кучета и котки от 1995 г.";
	display: block;
	margin-top: 20px;
	font-size: 13px;
	color: #8f887b;
}

/* --------------------------------------------------- buttons (generic) -- */
button:not(.navbar-toggle):not(.pswp__button):not(.hestia-scroll-to-top),
input[type="submit"]:not(.search-submit),
.btn.btn-primary {
	background-color: var(--amber);
	background-image: var(--brand-grad);
	color: var(--ink);
	border: 0;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: 0 8px 20px -8px rgba(240, 165, 0, 0.6);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		filter 0.2s ease;
}

button:not(.navbar-toggle):not(.pswp__button):not(.hestia-scroll-to-top):hover,
input[type="submit"]:not(.search-submit):hover,
.btn.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -10px rgba(240, 165, 0, 0.7);
}

/* search forms (404/sidebar) — replace the theme's icon-indent trick with a
   real labeled button */
.search-form input[type="search"],
.searchform input[type="search"],
.product-search input[type="search"] {
	background: #fff;
	border: 1px solid var(--line) !important;
	border-radius: 999px 0 0 999px;
	box-shadow: none;
	height: 46px;
	padding-left: 20px;
}

.search-form input[type="submit"],
.searchform input[type="submit"],
.product-search input[type="submit"] {
	background: var(--brand-grad);
	border-radius: 0 999px 999px 0 !important;
	height: 46px;
	width: auto !important;
	min-width: 0;
	padding: 0 24px !important;
	text-indent: 0 !important;
	white-space: nowrap;
	top: 0 !important;
	color: var(--ink) !important;
	font-weight: 700;
	box-shadow: none;
}

.search-form:after,
.searchform:after,
.product-search:after {
	content: none !important;
}

/* ------------------------------------------------------- scroll to top -- */
.hestia-scroll-to-top {
	background: var(--brand-grad);
	color: var(--ink);
	box-shadow: 0 8px 20px -6px rgba(43, 41, 38, 0.45);
	transition:
		opacity 0.25s ease,
		transform 0.2s ease;
}

.hestia-scroll-to-top:hover,
.hestia-scroll-to-top:focus {
	background: var(--brand-grad);
	transform: translateY(-2px);
}

/* ----------------------------------------------------------- motion etc. -- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------- seo intro copy blocks -- */
/* injected by tools/seo-codemod.mjs (home intro, shop intros, product sentence) */
.seo-intro-section {
	background: var(--paper);
	padding: 34px 0 6px;
}

.seo-intro {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 15px;
	color: var(--ink-2);
	font-size: 16.5px;
	line-height: 1.85;
}

.seo-intro p {
	margin-bottom: 12px;
}

.seo-intro strong {
	color: var(--ink);
}

/* single product: sentence under the composition panel */
body.single-product .seo-intro {
	margin: 16px 0 4px;
	max-width: none;
	padding: 0;
}

@media (max-width: 767px) {
	.seo-intro {
		font-size: 15.5px;
	}
}

.card.card-product {
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}