/* Soler — base: tokens, reset, typography, buttons, slider controls, footer, motion start states.
   Desktop sizes are in vw, measured from the original Elementor design at 1440px (1vw = 14.4px). */

:root {
	--green: #296640;
	--green-deep: #1f4f31;
	--cream: #fffdf8;
	--sand: #f1efe7;
	--mist: #f7f7f5;
	--ink: #1b1d1a;
	--text: #333;
	--muted: #5d625b;
	--line: rgba(41, 102, 64, 0.18);
	--alert: #a3472f;
	--font: "Lora", Georgia, "Times New Roman", serif;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--shadow-card: 0 1.2vw 3vw -1vw rgba(0, 0, 0, 0.16);
	--text-size: clamp(15px, 1.11vw, 18px);
}

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

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scrollbar-color: var(--green) var(--sand);
}

/* Nothing on the site highlights when clicked, dragged or swiped over — only form fields stay selectable. */
body {
	-webkit-user-select: none;
	user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
	-webkit-user-select: text;
	user-select: text;
}

img,
svg,
a {
	-webkit-user-drag: none;
}

:focus:not(:focus-visible) {
	outline: none;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--text-size);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-weight: 400;
	line-height: 1.15;
}

a {
	color: var(--green);
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

.icon {
	width: 1em;
	height: 1em;
	flex: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: 12px;
	left: -9999px;
	z-index: 2000;
	padding: 12px 18px;
	background: var(--green);
	color: var(--cream);
}

.skip-link:focus {
	left: 12px;
}

.section-title {
	color: var(--text);
	font-size: clamp(24px, 2.2vw, 40px);
	line-height: 1.25;
}

/* SplitText masks: lines rise from behind their own clip; the extra room keeps ascenders and
   descenders (й, р, д, у) from being cut. */
.split-line-mask {
	padding-block: 0.16em;
	margin-block: -0.16em;
}

/* ---------------------------------------------------------------------------
   Button: green block with the label rolling up on hover
   ------------------------------------------------------------------------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(14px, 1.25vw, 20px) clamp(28px, 2.8vw, 44px);
	overflow: hidden;
	background: var(--green);
	color: var(--cream);
	font-size: clamp(13px, 1.04vw, 16px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	box-shadow: 0 0.8vw 1.6vw -0.8vw rgba(0, 0, 0, 0.45);
	transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

/* Ink: a cream disc grows from where the pointer entered (--mx/--my, set in motion.js). */
.btn::before {
	content: "";
	position: absolute;
	top: var(--my, 50%);
	left: var(--mx, 50%);
	width: 0;
	aspect-ratio: 1;
	background: var(--cream);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.75s var(--ease-out);
}

.btn span {
	position: relative;
	z-index: 1;
	display: block;
	transition: transform 0.55s var(--ease-out);
}

.btn span::after {
	content: attr(data-label);
	position: absolute;
	top: 160%;
	left: 0;
	right: 0;
	text-align: center;
}

.btn:hover,
.btn:focus-visible {
	color: var(--green);
	box-shadow: inset 0 0 0 1px var(--green), 0 1.2vw 2.4vw -1vw rgba(0, 0, 0, 0.35);
}

.btn:hover::before,
.btn:focus-visible::before {
	width: 260%;
}

.btn:hover span,
.btn:focus-visible span {
	transform: translateY(-160%);
}

/* ---------------------------------------------------------------------------
   Slider controls (original long thin arrows, staggered) + counter
   ------------------------------------------------------------------------- */

.slider-nav {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 16px);
}

.slider-nav__btn {
	display: inline-flex;
	width: clamp(44px, 4.2vw, 64px);
	padding: 8px 0;
	background: none;
	border: 0;
	color: var(--ink);
	cursor: pointer;
	transition: transform 0.45s var(--ease-out), color 0.25s ease;
}

.slider-nav__btn--next {
	margin-left: clamp(18px, 2.1vw, 32px);
}

.slider-nav__btn .icon {
	width: 100%;
	height: auto;
}

.slider-nav__btn:hover {
	color: var(--green);
	transform: translateX(-6px);
}

.slider-nav__btn--next:hover {
	transform: translateX(6px);
}

.slider-count {
	font-size: var(--text-size);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.slider-count [data-slider-current] {
	display: inline-block;
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer {
	position: relative;
	overflow: hidden;
	padding: 0 8vw clamp(20px, 1.8vw, 28px);
	background: var(--mist);
	color: var(--text);
	font-size: 15px;
}

/* Motto band: the homepage's promise, the way to the products, a painted flower on the line. */
.site-footer__band {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: end;
	gap: 32px clamp(32px, 4vw, 72px);
	padding: clamp(64px, 7vw, 120px) clamp(120px, 14vw, 240px) clamp(40px, 4vw, 64px) 0;
	border-bottom: 1px solid var(--line);
}

.site-footer__motto {
	max-width: 16em;
	color: var(--green);
	font-size: clamp(30px, 3.1vw, 52px);
	line-height: 1.1;
	text-wrap: balance;
}

.site-footer__cta {
	display: grid;
	justify-items: start;
	gap: 18px;
}

.site-footer__call {
	color: var(--muted);
	font-size: 15px;
	font-style: italic;
}

.site-footer__call a {
	color: var(--green);
	font-style: normal;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.site-footer .flower--foot {
	right: 0;
	bottom: 0;
	left: auto;
	width: auto;
	height: clamp(170px, 16vw, 280px);
}

.site-footer .flower--foot img {
	width: auto;
	height: 100%;
}

/* Background herb outlines (also used in the footer on every page). */
.herb-ghost {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.herb-ghost .herb {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.herb-ghost .herb__ink {
	fill: none;
	stroke: var(--green);
	stroke-opacity: 0.2;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.herb__sway {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.motion .herb__ink {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.motion-failed .herb__ink {
	stroke-dashoffset: 0 !important;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
	gap: 36px clamp(24px, 2.6vw, 48px);
	padding: clamp(44px, 4.4vw, 72px) 0;
}

.site-footer__brand {
	display: grid;
	gap: 18px;
	width: min(150px, 100%);
	margin-bottom: 22px;
}

.site-footer__logo,
.site-footer__amphi {
	width: 100%;
	height: auto;
}

.site-footer__amphi {
	width: 78%;
}

.site-footer__brand-col .status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--green);
	font-size: 14px;
	font-style: italic;
}

.site-footer__brand-col .status__dot {
	width: 7px;
	height: 7px;
	background: var(--green);
	border-radius: 50%;
	animation: stock-breathe 3.2s ease-in-out infinite;
}

.site-footer__brand-col .status.is-closed {
	color: var(--muted);
}

.site-footer__brand-col .status.is-closed .status__dot {
	background: var(--muted);
	animation: none;
}

.site-footer__title {
	margin-bottom: 16px;
	color: var(--green);
	font-size: clamp(16px, 1.15vw, 19px);
	font-weight: 400;
}

.site-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__col li + li,
.site-footer__col p + p {
	margin-top: 9px;
}

.site-footer__col a,
.site-footer__consent {
	position: relative;
	color: var(--text);
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size 0.45s var(--ease-out), color 0.3s ease;
}

.site-footer__col a:hover,
.site-footer__consent:hover {
	color: var(--green);
	background-size: 100% 1px;
}

.site-footer__consent {
	padding: 0;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.site-footer__phone a {
	color: var(--green);
	font-size: clamp(19px, 1.5vw, 24px);
}

.site-footer__hours {
	color: var(--muted);
	font-size: 14px;
}

/* Bottom line: copyright, how we deliver and get paid, the studio credit. */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 32px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 13.5px;
}

.site-footer__service span + span::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 12px;
	background: var(--green);
	border-radius: 50%;
	opacity: 0.6;
	vertical-align: middle;
}

/* mp13: the badge stays grey until the credit is hovered, then takes its colour. */
.site-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	transition: color 0.4s ease;
}

.site-footer__credit img {
	width: 22px;
	height: 22px;
	filter: grayscale(1) opacity(0.55);
	transition: filter 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.site-footer__credit:hover {
	color: var(--ink);
}

.site-footer__credit:hover img {
	filter: none;
	transform: rotate(-12deg) scale(1.08);
}

/* ---------------------------------------------------------------------------
   Default page (pages not built with Elementor)
   ------------------------------------------------------------------------- */

.page-default {
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(96px, 10vw, 160px) 24px clamp(64px, 8vw, 120px);
}

.page-default__title {
	margin-bottom: 32px;
	color: var(--green);
	font-size: clamp(32px, 4vw, 56px);
}

.page-default__content > * + * {
	margin-top: 1em;
}

/* ---------------------------------------------------------------------------
   Chapter marks ("II · Аптеката", soler_chapter): Lora italic with a hand-drawn flourish that inks in.
   Shared by every page.
   ------------------------------------------------------------------------- */

.chapter {
	display: inline-flex;
	align-items: baseline;
	gap: 0.7vw;
	margin-bottom: 1.4vw;
	color: var(--green);
	font-size: clamp(14px, 1.04vw, 17px);
	font-style: italic;
}

.chapter__num {
	font-size: 1.25em;
	letter-spacing: 0.04em;
}

.chapter__label::before {
	content: "· ";
}

.chapter__flourish {
	align-self: center;
	width: clamp(40px, 4.4vw, 70px);
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.6s var(--ease-out) 0.2s;
}

.motion .chapter:not(.is-drawn) .chapter__flourish {
	stroke-dashoffset: 1;
}

@media (max-width: 767px) {
	.chapter {
		gap: 8px;
		margin-bottom: 14px;
	}
}

/* ---------------------------------------------------------------------------
   Page shell (page.php and every rebuilt page): quiet hero — title, step marks, a random painted
   flower that grows and sways — then the content.
   ------------------------------------------------------------------------- */

main.page {
	position: relative;
	padding: clamp(104px, 11vw, 176px) 8vw clamp(64px, 8vw, 128px);
}

.page-hero {
	position: relative;
	min-height: clamp(120px, 12vw, 210px);
	margin-bottom: clamp(32px, 4vw, 64px);
}

.page-hero__title {
	position: relative;
	z-index: 2;
	max-width: 14em;
	color: var(--green);
	font-size: clamp(36px, 4.6vw, 76px);
	font-weight: 400;
	line-height: 1.04;
}

.page-hero__lead {
	position: relative;
	z-index: 2;
	max-width: 40em;
	margin-top: 18px;
	color: var(--muted);
	font-size: clamp(16px, 1.25vw, 20px);
	font-style: italic;
}

/* Sized by height, so a slender lavender and a wide aster take the same room. */
.flower--page {
	top: clamp(-90px, -5vw, -40px);
	right: 6vw;
	width: auto;
	height: clamp(150px, 15vw, 260px);
	z-index: 0;
}

/* Two classes, so this wins over the general .flower img (full width) further down. */
.flower.flower--page img,
.flower.flower--aside img {
	width: auto;
	height: 100%;
}

.page-body {
	position: relative;
	z-index: 1;
}

.page-hero--plain {
	min-height: 0;
}

/* Content left (about 80%), the flower standing in the right column and staying in view. */
.page-body--aside {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
}

/* Grid items default to their content's width: a long, swipeable row inside would push the page wide. */
.page-body__main {
	min-width: 0;
}

.page-body__aside {
	position: sticky;
	top: 14vh;
	display: flex;
	justify-content: center;
}

.page-body__aside .flower--aside {
	position: relative;
	width: auto;
	height: clamp(220px, 30vh, 340px);
}

/* Step marks: I Количка — II Поръчка — III Готово, drawn like the homepage's chapter marks. */
.steps {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 14px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 14px;
	font-style: italic;
}

.steps__item {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.steps__item + .steps__item::before {
	content: "";
	width: clamp(22px, 2.4vw, 40px);
	height: 1px;
	margin-right: 8px;
	background: currentColor;
	opacity: 0.4;
	align-self: center;
}

.steps__num {
	font-style: normal;
	letter-spacing: 0.06em;
}

.steps__item.is-current {
	color: var(--green);
}

.steps__item.is-done a {
	color: var(--green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

@media (max-width: 767px) {
	main.page {
		padding: 96px 16px 64px;
	}

	/* Phones: the flower steps out from behind the title (and the bookmark) and stands below it. */
	.page-hero--shell {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.page-body--aside {
		grid-template-columns: 1fr;
	}

	.page-body__aside {
		position: static;
		justify-content: flex-end;
	}

	.page-body__aside .flower--aside {
		height: 150px;
	}

	.page-hero--shell .flower--page {
		position: relative;
		top: auto;
		right: auto;
		order: 3;
		align-self: flex-end;
		width: auto;
		height: 120px;
		margin: -4px 6px -12px 0;
	}
}

/* ---------------------------------------------------------------------------
   Forms (checkout, account, contacts): paper-white fields, a green focus, labels above
   ------------------------------------------------------------------------- */

main.page .form-row,
main.page .econt__field {
	margin: 0 0 18px;
}

main.page label {
	display: block;
	margin-bottom: 7px;
	color: var(--muted);
	font-size: 14px;
	letter-spacing: 0.01em;
}

main.page .required {
	color: var(--green);
	border: 0;
	text-decoration: none;
}

main.page .optional {
	font-style: italic;
	opacity: 0.8;
}

main.page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="button"]),
main.page textarea,
main.page select {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	background: #fffefb;
	border: 1px solid rgba(27, 29, 26, 0.2);
	border-radius: 0;
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

main.page textarea {
	min-height: 120px;
	resize: vertical;
}

main.page input:focus,
main.page textarea:focus,
main.page select:focus {
	outline: none;
	border-color: var(--green);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(41, 102, 64, 0.12);
}

main.page ::placeholder {
	color: #a4a69f;
	font-style: italic;
	opacity: 1;
}

main.page .woocommerce-invalid input:not([type="checkbox"]),
main.page .woocommerce-invalid select {
	border-color: var(--alert);
}

main.page .form-row .description {
	display: block;
	margin-top: 6px;
	color: var(--muted);
	font-size: 13px;
	font-style: italic;
}

/* Password fields: WooCommerce's show/hide toggle becomes a drawn eye inside the field. */
main.page .password-input {
	position: relative;
	display: block;
}

main.page .password-input input {
	padding-right: 52px;
}

main.page .show-password-input {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: var(--muted);
	border: 0;
	cursor: pointer;
	transform: translateY(-50%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px no-repeat;
	transition: background-color 0.25s ease;
}

main.page .show-password-input:hover,
main.page .show-password-input.display-password {
	background: var(--green);
}

main.page .show-password-input::after {
	display: none;
}

/* Checkboxes and radios: a drawn square / circle in brand green. */
main.page input[type="checkbox"],
main.page input[type="radio"] {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	background: #fffefb;
	border: 1px solid rgba(27, 29, 26, 0.35);
	cursor: pointer;
	vertical-align: -4px;
	transition: border-color 0.25s ease, background-color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

main.page input[type="radio"] {
	border-radius: 50%;
}

main.page input[type="checkbox"]:checked {
	background: var(--green);
	border-color: var(--green);
}

main.page input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px 2px 4px;
	background: var(--cream);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5 6 10.5 14.5 1.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.5 6 10.5 14.5 1.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

main.page input[type="radio"]:checked {
	border-color: var(--green);
	box-shadow: inset 0 0 0 4px #fffefb, inset 0 0 0 10px var(--green);
}

main.page input[type="checkbox"]:focus-visible,
main.page input[type="radio"]:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

main.page label.checkbox,
main.page .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--text);
	font-size: 15px;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Notices (WooCommerce and our own): a sand slip with a drawn icon; terracotta for problems
   ------------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

/* WooCommerce focuses the wrapper (or the notice) to announce it; the slip itself is enough. */
.woocommerce-notices-wrapper:focus,
.woocommerce-NoticeGroup:focus,
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus {
	outline: none;
}

/* Notices always sit above the page's pale blocks (the product page's sand block, painted flowers). */
.woocommerce-notices-wrapper,
.woocommerce-NoticeGroup {
	position: relative;
	z-index: 30;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
main.page .woocommerce-notice {
	position: relative;
	display: block;
	margin: 0 0 28px;
	padding: 18px 22px 18px 58px;
	list-style: none;
	background: var(--sand);
	border: 0;
	border-left: 2px solid var(--green);
	color: var(--text);
	font-family: var(--font);
	font-size: 15.5px;
	line-height: 1.55;
	animation: notice-in 0.6s var(--ease-out);
}

.woocommerce-error {
	border-left-color: var(--alert);
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before,
main.page .woocommerce-notice::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 20px;
	width: 22px;
	height: 22px;
	background: var(--green);
	-webkit-mask: var(--notice-icon) center / contain no-repeat;
	mask: var(--notice-icon) center / contain no-repeat;
	--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E");
}

.woocommerce-message::before {
	--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5'/%3E%3C/svg%3E");
}

.woocommerce-error::before {
	background: var(--alert);
	--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6.5M12 16.5v.01'/%3E%3C/svg%3E");
}

.woocommerce-error li + li {
	margin-top: 6px;
}

.woocommerce-error a,
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button) {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "Преглед на количката" and similar actions inside a notice: a quiet text button on the right. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: right;
	margin-left: 18px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--green);
	font: inherit;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 4px;
}

@keyframes notice-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Painted flowers (soler_flower): grow in from the stem, then sway in a slow breeze. The individual
   `rotate` property composes with GSAP's transforms instead of replacing them.
   ------------------------------------------------------------------------- */

.flower {
	position: absolute;
	z-index: 1;
	margin: 0;
	pointer-events: none;
	transform-origin: 50% 100%;
}

.flower img {
	display: block;
	width: 100%;
	height: auto;
}

@keyframes soler-sway {
	from { rotate: -1.1deg; }
	to { rotate: 1.3deg; }
}

@media (prefers-reduced-motion: no-preference) {
	.flower {
		animation: soler-sway 4.8s cubic-bezier(0.37, 0, 0.63, 1) -1.5s infinite alternate;
	}

	.flower--quote {
		animation-duration: 5.6s;
		animation-delay: -3.5s;
	}

	.flower--foot {
		animation-duration: 4.2s;
	}
}

/* ---------------------------------------------------------------------------
   Two-tone icons (soler_svg_icon): black ink + brand green. With data-draw a pen traces the outlines
   first, then the ink and the green fill in (motion.js).
   ------------------------------------------------------------------------- */

.ic__ink {
	fill: var(--ink);
}

.ic__fill {
	fill: var(--green);
}

.motion [data-draw] .ic__ink {
	fill-opacity: 0;
	stroke: var(--ink);
	stroke-width: 0.7;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.motion [data-draw] .ic__fill {
	opacity: 0;
}

.motion-failed [data-draw] .ic__ink {
	fill-opacity: 1 !important;
	stroke-width: 0 !important;
}

.motion-failed [data-draw] .ic__fill {
	opacity: 1 !important;
}

/* The amphitheatre emblem (soler_amphi): green outlines that trace themselves, then fill. Its
   near-white knock-outs take the colour of whatever it sits on (--amphi-paper). */
.amphi {
	display: block;
}

.amphi__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.amphi .ic__ink {
	fill: var(--green);
}

.amphi__paper {
	fill: var(--amphi-paper, #fdfdfd);
}

.motion .amphi[data-draw] .ic__ink {
	stroke: var(--green);
	stroke-width: 2.2;
}

.site-footer {
	--amphi-paper: var(--mist);
}

.hero__card,
.contacts__card {
	--amphi-paper: #f8f8f6;
}

.quote__card {
	--amphi-paper: #fff;
}

/* ---------------------------------------------------------------------------
   Chat with the pharmacist (WhatsApp / Viber): a green button bottom-right, a paper slip above it
   ------------------------------------------------------------------------- */

.chat {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 1090;
	display: grid;
	justify-items: end;
	gap: 12px;
}

.chat__toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	padding: 0;
	background: var(--green);
	border: 0;
	border-radius: 50%;
	color: var(--cream);
	box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55);
	cursor: pointer;
	transition: transform 0.5s var(--ease-out), background-color 0.3s ease;
}

/* A slow ring breathes out every few seconds: "you can talk to us". */
.chat__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--green);
	border-radius: 50%;
	opacity: 0;
	animation: chat-ring 4.5s ease-out infinite;
}

.chat__toggle:hover,
.chat.is-open .chat__toggle {
	background: var(--green-deep);
	transform: translateY(-2px) rotate(-6deg);
}

.chat__toggle svg,
.chat__icon svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chat__toggle svg {
	width: 27px;
	height: 27px;
}

.chat__menu {
	width: 236px;
	padding: 16px 18px 12px;
	background: var(--cream);
	box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -18px rgba(0, 0, 0, 0.45);
	animation: notice-in 0.45s var(--ease-out);
}

.chat__title {
	margin-bottom: 6px;
	color: var(--green);
	font-size: 16px;
}

a.chat__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
	color: var(--ink);
	font-size: 15px;
	transition: color 0.25s ease, transform 0.4s var(--ease-out);
}

a.chat__link:hover {
	color: var(--green);
	transform: translateX(3px);
}

.chat__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(41, 102, 64, 0.35);
	border-radius: 50%;
	color: var(--green);
}

.chat__icon svg {
	width: 20px;
	height: 20px;
}

.chat__note {
	padding-top: 8px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 12.5px;
	font-style: italic;
}

/* Out of the way while a panel or sheet is open. */
.soler-scroll-lock .chat,
.catalog-filters-open .chat {
	display: none;
}

@keyframes chat-ring {
	0%, 60% { opacity: 0; transform: scale(1); }
	70% { opacity: 0.6; }
	100% { opacity: 0; transform: scale(1.55); }
}

@media (prefers-reduced-motion: reduce) {
	.chat__toggle::after {
		animation: none;
	}
}

@media (max-width: 767px) {
	.chat {
		right: 14px;
		bottom: 14px;
	}

	.chat__toggle {
		width: 52px;
		height: 52px;
	}
}

/* ---------------------------------------------------------------------------
   Motion start states — only when JS + motion are available (see inc/assets.php).
   GSAP animates these to their natural state; .motion-failed shows everything if it can't.
   ------------------------------------------------------------------------- */

.motion [data-reveal],
.motion [data-intro],
.motion [data-stagger] > * {
	opacity: 0;
	transform: translateY(32px);
}

.motion [data-split] {
	visibility: hidden;
}

.motion [data-reveal-clip],
.motion [data-grow] {
	clip-path: inset(100% 0 0 0);
}

.motion [data-wipe] {
	transform: scaleX(0);
	transform-origin: left center;
}

.motion [data-drop] {
	transform: translateY(-101%);
}

.motion-failed [data-reveal],
.motion-failed [data-intro],
.motion-failed [data-stagger] > *,
.motion-failed [data-reveal-clip],
.motion-failed [data-grow],
.motion-failed [data-wipe],
.motion-failed [data-drop],
.motion-failed [data-hero-card],
.motion-failed [data-hero-flower] {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
}

.motion-failed [data-split] {
	visibility: visible !important;
}

/* ---------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.site-footer {
		padding: 0 16px 20px;
	}

	.site-footer__band {
		grid-template-columns: 1fr;
		padding: 56px 28vw 36px 0;
	}

	.site-footer .flower--foot {
		height: 150px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px 20px;
		padding: 40px 0;
	}

	.site-footer__brand-col,
	.site-footer__contact {
		grid-column: 1 / -1;
	}

	.site-footer__brand {
		grid-template-columns: 120px 96px;
		align-items: center;
		gap: 24px;
		width: auto;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}