/*
 * Аптека Алое: component styles.
 *
 * Tokens come from theme.json (--wp--preset--*, --wp--custom--*). This file
 * only covers what theme.json cannot express: hover/focus states, composite
 * components (cards, badges, tiles, drawers) and WooCommerce block internals.
 *
 * Sections:
 *  1. Base, focus, motion
 *  2. Layout helpers & shared typography atoms
 *  3. Header (top bar, sticky header, search, account, mini cart, mega menu)
 *  4. Login drawer
 *  5. Hero, stats, promo cards
 *  6. Category explorer (tabs)
 *  7. Trust badges & perks
 *  8. Product cards, badges, Rx/OTC, stock
 *  9. Home sections (picks, brands, CTA row, trio)
 * 10. Footer
 * 11. Shop archive (banner, chips, filters, toolbar, pagination)
 * 12. Single product (gallery, summary, add to cart, tabs, specs, ask widget)
 * 13. Forms (shared by account, cart, checkout)
 * 14. Cart block
 * 15. Checkout block
 * 16. My Account
 * 17. About
 * 18. Responsive
 */

/* ---------------------------------------------------------------------------
 * 1. Base, focus, motion
 * ------------------------------------------------------------------------ */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: url("../icons/page-bg.svg");
	background-size: 1600px 1300px;
	background-position: top center;
	background-repeat: repeat-y;
}

::selection {
	background: var(--wp--preset--color--peach-ring);
	color: var(--wp--preset--color--ink-strong);
}

/* The export used outline:none with a border-colour change on focus. Keep the
 * border change, and add a visible ring for keyboard users (WCAG 2.4.7). */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

:where(.aloe-hero, .aloe-topbar, .aloe-footer, .aloe-bundle-card, .aloe-trio__card--advice, .aloe-newsletter, .aloe-page-banner, .aloe-stats-bar) :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

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

.aloe-balance {
	text-wrap: balance;
}

:where(.aloe-card__title, .aloe-qa__q, .aloe-qa__a, .aloe-prose, .aloe-faq__q, .aloe-faq__a) {
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * 2. Layout helpers & shared typography atoms
 * ------------------------------------------------------------------------ */

.aloe-main {
	margin-block-start: 0;
}

.aloe-main > .aloe-breadcrumbs,
.aloe-main > .woocommerce.wc-block-breadcrumbs {
	padding-top: 20px;
}

.aloe-section {
	margin-block-start: var(--wp--preset--spacing--80) !important;
}

.aloe-section--md {
	margin-block-start: var(--wp--preset--spacing--70) !important;
}

.aloe-section--tight {
	margin-block-start: 28px !important;
}

.aloe-section--xs {
	margin-block-start: 26px !important;
}

.aloe-section-head {
	gap: 24px;
	margin-bottom: 22px;
}

.aloe-section-head h2 {
	margin: 0;
}

.aloe-section-head__sub {
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--text-muted);
}

/* Eyebrow: small uppercase label above card headings. */
.aloe-eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.aloe-eyebrow--dark {
	color: var(--wp--preset--color--ink-strong);
}

.aloe-eyebrow--light {
	color: var(--wp--preset--color--base);
	font-size: 11.5px;
}

.aloe-eyebrow--orange,
.aloe-eyebrow--orange a {
	color: var(--wp--preset--color--secondary);
	font-size: 11.5px;
}

/* Kicker: orange eyebrow with a leading rule ("— НАЈПРОДАВАНО"). */
.aloe-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.aloe-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
}

/* Tag: solid orange label on photos ("СЕЗОНА НА ИМУНИТЕТ"). */
.aloe-tag {
	display: inline-block;
	margin: 0;
	padding: 8px 16px;
	border-radius: 4px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aloe-more-link {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
}

.aloe-more-link a,
.aloe-arrow-link a,
.aloe-back-link a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--wp--preset--color--accent);
}

.aloe-more-link a::after,
.aloe-arrow-link a::after {
	content: "→" / "";
	transition: transform var(--wp--custom--motion--fast);
}

.aloe-more-link a:hover::after,
.aloe-arrow-link a:hover::after {
	transform: translateX(3px);
}

.aloe-more-link--sm {
	font-size: 13px;
}

.aloe-arrow-link {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

.aloe-arrow-link a {
	color: var(--wp--preset--color--contrast);
}

.aloe-back-link {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

.aloe-back-link a::before {
	content: "←" / "";
}

.aloe-on-dark-muted {
	color: rgba(255, 255, 255, 0.78);
}

.aloe-page-head {
	padding-top: 32px;
	gap: 24px;
}

.aloe-page-head h1,
.aloe-page-head .wp-block-post-title {
	margin: 0;
}

.aloe-page-head__sub {
	margin: 8px 0 0;
	color: var(--wp--preset--color--text-subtle);
	font-size: 15px;
}

.aloe-prose {
	font-size: 16px;
	line-height: var(--wp--custom--line-height--relaxed);
	color: var(--wp--preset--color--text-secondary);
}

/* Button helpers used by patterns. */
.aloe-btn-invert .wp-block-button__link:hover,
.aloe-btn-invert .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.aloe-btn-teal-hover .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
}

.aloe-btn-dark-hover .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast) !important;
}

.wp-block-button.is-style-teal .wp-block-button__link:hover,
.wp-block-button.is-style-teal .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-aloe-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-soft .wp-block-button__link:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-on-dark .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.14);
}

.wp-block-button__link {
	transition: background-color var(--wp--custom--motion--fast), color var(--wp--custom--motion--fast), border-color var(--wp--custom--motion--fast);
}

/* ---------------------------------------------------------------------------
 * 3. Header
 * ------------------------------------------------------------------------ */

/* The whole header part is sticky; a negative top lets the orange top bar
 * scroll away while the main header stays pinned, like the mockup. */
.aloe-site-header {
	--aloe-topbar-h: 38px;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--aloe-topbar-h));
	z-index: 40;
}

.aloe-topbar p {
	margin: 0;
}

.aloe-topbar__promo {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aloe-topbar__promo::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.aloe-topbar a:hover {
	color: var(--wp--preset--color--base);
}

.aloe-header {
	background: rgba(238, 247, 244, 0.125);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.aloe-header__row {
	gap: 36px;
}

.aloe-brand-lockup {
	flex: none;
}

.aloe-brand-lockup .wp-block-image {
	margin: 0;
}

.aloe-brand-lockup .wp-block-site-title,
.aloe-brand-lockup .wp-block-site-tagline {
	margin: 0;
}

.aloe-brand-lockup .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
}

/* Search: mint pill with orange button inside. */
.aloe-search.wp-block-search {
	flex: 1 1 420px;
	max-width: 720px;
	margin: 0;
}

.aloe-search .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--mint-2);
	border: 1.5px solid var(--wp--preset--color--border-strong) !important;
	border-radius: var(--wp--custom--radius--tile);
	padding: 5px 5px 5px 46px !important;
	position: relative;
}

.aloe-search .wp-block-search__inside-wrapper::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 19px;
	height: 19px;
	transform: translateY(-50%);
	background: var(--wp--preset--color--text-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%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 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

.aloe-search .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	padding: 10px 0;
	min-width: 0;
}

.aloe-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

.aloe-search .wp-block-search__input:focus {
	outline: none;
}

.aloe-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 0 0 3px rgba(47, 102, 89, 0.15);
}

.aloe-search .wp-block-search__button {
	margin: 0;
	padding: 12px 26px;
	border-radius: 10px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 14.5px;
	font-weight: 700;
}

.aloe-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--secondary-dark);
}

/* Account link. */
.aloe-account-link a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.aloe-account-link a:hover {
	background: var(--wp--preset--color--mint-2);
	color: var(--wp--preset--color--contrast);
}

/* Mini cart: teal pill with count badge and total. */
.aloe-mini-cart .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 16px;
	border-radius: 12px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 14px;
	font-weight: 800;
	transition: background-color var(--wp--custom--motion--fast);
}

.aloe-mini-cart .wc-block-mini-cart__button:hover {
	background: var(--wp--preset--color--contrast);
	opacity: 1;
}

.aloe-mini-cart .wc-block-mini-cart__amount {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
	color: var(--wp--preset--color--base);
	font-weight: 800;
}

/* "Кошничка" caption above the total, as in the mockup (decorative). */
.aloe-mini-cart .wc-block-mini-cart__amount::before {
	content: "Кошничка" / "";
	font-size: 11px;
	font-weight: 600;
	opacity: 0.7;
}

.aloe-mini-cart .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border: 0;
	font-size: 11.5px;
	font-weight: 800;
	min-width: 19px;
	height: 19px;
}

.aloe-mini-cart .wc-block-mini-cart__icon {
	color: var(--wp--preset--color--base);
}

/* Navigation row. */
.aloe-header__nav {
	border-top: 1px solid var(--wp--preset--color--border);
	position: relative;
}

.aloe-header__nav-row {
	min-height: 52px;
	gap: 10px;
}

.aloe-main-nav .wp-block-navigation-item__content {
	padding: 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.aloe-main-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--secondary);
}

.aloe-header__ctas {
	gap: 10px;
	padding: 8px 0;
}

.aloe-btn-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.aloe-btn-icon .wp-block-button__link::before {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	flex: none;
	-webkit-mask: var(--aloe-icon) center / contain no-repeat;
	mask: var(--aloe-icon) center / contain no-repeat;
}

.aloe-btn-icon--percent {
	--aloe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Ccircle cx='8' cy='8' r='2.2'/%3E%3Ccircle cx='16' cy='16' r='2.2'/%3E%3C/svg%3E");
}

.aloe-btn-icon--star {
	--aloe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.4 5 5.6.8-4 4 1 5.6-5-2.7-5 2.7 1-5.6-4-4 5.6-.8 2.4-5Z'/%3E%3C/svg%3E");
}

.aloe-btn-icon--percent .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
}

/* Mega menu: "Сите производи" opens a full-width cream panel. Level 1 lists
 * categories on the left; each category's sub-list appears on the right. */
@media (min-width: 783px) {
	.aloe-main-nav .aloe-mega > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 20px;
		border-radius: 12px 12px 0 0;
		background: var(--wp--preset--color--peach-ring);
		color: #155041;
		font-weight: 800;
	}

	.aloe-main-nav .aloe-mega > .wp-block-navigation-item__content::before {
		content: "";
		width: 16px;
		height: 16px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%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 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.aloe-main-nav .aloe-mega:hover > .wp-block-navigation-item__content,
	.aloe-main-nav .aloe-mega:focus-within > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--base);
	}

	.aloe-main-nav .aloe-mega > .wp-block-navigation-submenu__toggle {
		display: none;
	}

	/* Let the panel position against .aloe-header__nav (full width), not the
	 * navigation block, which core makes position:relative. Core copies the
	 * submenu's className onto its <ul> too, so target the <li> only. */
	.aloe-main-nav,
	.aloe-main-nav .wp-block-navigation__responsive-container,
	.aloe-main-nav .wp-block-navigation__responsive-close,
	.aloe-main-nav .wp-block-navigation__responsive-dialog,
	.aloe-main-nav .wp-block-navigation__responsive-container-content,
	.aloe-main-nav li.aloe-mega {
		position: static !important;
	}

	.aloe-main-nav .aloe-mega > .wp-block-navigation__submenu-container {
		position: absolute;
		left: 0 !important;
		right: 0;
		top: 100% !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 440px;
		padding: 16px 0 22px max(var(--wp--custom--layout--gutter), calc((100% - var(--wp--style--global--wide-size, 1296px)) / 2)) !important;
		background-color: #fff3e2 !important;
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
		border: 0 !important;
		border-top: 3px solid var(--wp--preset--color--secondary) !important;
		border-bottom: 1px solid #f0d9b6 !important;
		box-shadow: var(--wp--preset--shadow--panel);
		z-index: 50;
	}

	.aloe-main-nav .aloe-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		position: static;
		width: 306px;
		background: transparent !important;
	}

	.aloe-main-nav .aloe-mega__cat > .wp-block-navigation-item__content {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 13px 16px !important;
		border-radius: 12px;
		font-size: 14.5px;
		font-weight: 600;
		color: var(--wp--preset--color--text-secondary) !important;
	}

	.aloe-main-nav .aloe-mega__cat > .wp-block-navigation-item__content::after {
		content: "›" / "";
		font-size: 18px;
		line-height: 1;
	}

	.aloe-main-nav .aloe-mega__cat:hover > .wp-block-navigation-item__content,
	.aloe-main-nav .aloe-mega__cat:focus-within > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--base) !important;
		font-weight: 800;
		box-shadow: 0 6px 18px -6px rgba(247, 148, 30, 0.7);
	}

	.aloe-main-nav .aloe-mega__cat > .wp-block-navigation-submenu__toggle {
		display: none;
	}

	/* Sub-category panel, pinned to the right of the category column. */
	.aloe-main-nav .aloe-mega__cat > .wp-block-navigation__submenu-container {
		position: absolute !important;
		left: calc(max(var(--wp--custom--layout--gutter), calc((100% - var(--wp--style--global--wide-size, 1296px)) / 2)) + 326px) !important;
		right: max(var(--wp--custom--layout--gutter), calc((100% - var(--wp--style--global--wide-size, 1296px)) / 2));
		top: 0 !important;
		bottom: 0;
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-content: start;
		gap: 10px 28px;
		width: auto !important;
		padding: 20px 0 26px 34px !important;
		border: 0 !important;
		border-left: 1px solid #f3ddbd !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	/* The first category is shown by default while the panel is open. */
	.aloe-main-nav .aloe-mega:is(:hover, :focus-within) > .wp-block-navigation__submenu-container > .aloe-mega__cat:first-child > .wp-block-navigation__submenu-container {
		visibility: visible;
		opacity: 1;
		height: auto;
		overflow: visible;
		width: auto;
	}

	.aloe-main-nav .aloe-mega:is(:hover, :focus-within) > .wp-block-navigation__submenu-container:has(.aloe-mega__cat:not(:first-child):is(:hover, :focus-within)) > .aloe-mega__cat:first-child:not(:hover):not(:focus-within) > .wp-block-navigation__submenu-container {
		visibility: hidden;
		opacity: 0;
	}

	.aloe-main-nav .aloe-mega__cat .wp-block-navigation-item {
		width: auto;
	}

	/* Sub-category links only (not the category row's own link). */
	.aloe-main-nav .aloe-mega__cat .wp-block-navigation-item .wp-block-navigation-item__content {
		display: block;
		padding: 10px 13px !important;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.72);
		font-size: 14px;
		font-weight: 600;
		color: #435751 !important;
	}

	.aloe-main-nav .aloe-mega__cat .wp-block-navigation-item .wp-block-navigation-item__content:hover,
	.aloe-main-nav .aloe-mega__cat .wp-block-navigation-item .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--base) !important;
	}

	.aloe-main-nav .aloe-mega__cat .aloe-mega__all .wp-block-navigation-item__content,
	.aloe-main-nav .aloe-mega > .wp-block-navigation__submenu-container > .aloe-mega__all > .wp-block-navigation-item__content {
		background: transparent;
		font-weight: 800;
		color: var(--wp--preset--color--accent) !important;
	}

	.aloe-main-nav .aloe-mega > .wp-block-navigation__submenu-container > .aloe-mega__all {
		margin-top: 12px;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Login drawer (core/details, fixed to the right edge)
 * ------------------------------------------------------------------------ */

.aloe-login-drawer {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 60;
	transform: translateY(-50%);
	margin: 0 !important;
}

.logged-in .aloe-login-drawer {
	display: none;
}

.aloe-login-drawer > summary {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 9px;
	border-radius: 12px 0 0 12px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	box-shadow: 0 8px 30px rgba(28, 64, 55, 0.18);
	cursor: pointer;
	writing-mode: vertical-rl;
	letter-spacing: 0.14em;
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	transition: transform var(--wp--custom--motion--panel);
}

.aloe-login-drawer > summary::-webkit-details-marker {
	display: none;
}

.aloe-login-drawer > summary::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5 20c0-3.6 3.1-5.6 7-5.6s7 2 7 5.6'/%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 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5 20c0-3.6 3.1-5.6 7-5.6s7 2 7 5.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.aloe-login-drawer[open] > summary {
	position: absolute;
	right: 352px;
	top: 50%;
	transform: translateY(-50%);
}

.aloe-login-drawer__panel {
	width: 352px;
	max-width: calc(100vw - 48px);
	padding: 26px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-left: 3px solid var(--wp--preset--color--secondary);
	border-radius: 18px 0 0 18px;
	box-shadow: var(--wp--preset--shadow--drawer);
	animation: aloe-drawer-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes aloe-drawer-in {
	from { transform: translateX(40px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.aloe-login-drawer__title {
	margin: 0;
}

.aloe-login-drawer p {
	margin-block: 0;
}

.aloe-login-form {
	margin-top: 22px;
}

.aloe-login-form form p {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 11px;
}

.aloe-login-form label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--wp--preset--color--text-secondary);
}

.aloe-login-form .login-remember label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
}

.aloe-login-form .login-submit .button,
.aloe-login-form input[type="submit"] {
	width: 100%;
	margin-top: 6px;
	padding: 15px;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 15.5px;
	font-weight: 800;
	cursor: pointer;
}

.aloe-login-form .login-submit .button:hover {
	background: var(--wp--preset--color--secondary-dark);
}

.aloe-login-drawer__lost a {
	color: var(--wp--preset--color--accent);
}

.aloe-login-drawer__register {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------------------------------------------------------------------------
 * 5. Hero, stats, promo cards
 * ------------------------------------------------------------------------ */

.aloe-hero {
	margin-block-start: 0 !important;
}

/* A custom content position makes core shrink the inner container to its
 * content, which pins the copy to the viewport edge. Keep it on the 1296px
 * grid like the mockup. */
.aloe-hero > .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: var(--wp--style--global--wide-size, 1296px);
	margin-inline: auto !important;
}

.aloe-hero h1 {
	margin-bottom: 0;
}

.aloe-hero h1 mark {
	color: var(--wp--preset--color--highlight);
}

.aloe-hero__lead {
	max-width: 520px;
	color: rgba(255, 255, 255, 0.86);
	font-weight: 500;
}

.aloe-hero--about .aloe-hero__lead {
	max-width: 540px;
}

.aloe-stats-bar {
	margin-block-start: 0 !important;
}

.aloe-stat {
	padding: 22px 4px;
}

.aloe-stats-bar .aloe-stat + .aloe-stat {
	padding-left: 28px;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.aloe-stat__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--onest);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--base);
}

.aloe-stat__value--orange {
	font-size: 32px;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--secondary);
}

.aloe-stat__label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
}

.aloe-promo-card {
	border-radius: var(--wp--custom--radius--hero);
	padding: 34px !important;
	overflow: hidden;
}

.aloe-promo-card__inner {
	gap: 20px;
}

.aloe-promo-card__text {
	flex: 1;
	min-width: 0;
}

.aloe-promo-card__text h3 {
	margin-block: 12px 8px;
}

.aloe-promo-card__text p {
	margin: 0;
}

.aloe-promo-card__media {
	flex: none;
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 6. Category explorer (core/tabs)
 * ------------------------------------------------------------------------ */

.aloe-cat-explorer .aloe-cat-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	justify-items: center;
	border: 0;
	margin: 0;
	padding: 0;
	background: none;
}

.aloe-cat-tiles button {
	--aloe-tile-img: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: auto;
	max-width: 100%;
	padding: 22px 12px 18px;
	border: 1.5px solid transparent !important;
	border-radius: var(--wp--custom--radius--panel-lg) !important;
	background: transparent !important;
	color: var(--wp--preset--color--ink-strong) !important;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--fast), border-color var(--wp--custom--motion--fast);
}

/* Photo inside a peach ring. Core Tabs draws the selected-tab indicator with
 * an absolutely positioned ::before, so reset it back into the flow. */
.aloe-cat-tiles button::before {
	content: "";
	position: static !important;
	inset: auto !important;
	flex: none;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	border: 4px solid var(--wp--preset--color--base);
	background: var(--aloe-tile-img) center / cover no-repeat, #e0ebe4;
	box-shadow: 0 0 0 11px var(--wp--preset--color--peach-ring);
	margin: 11px;
	transition: box-shadow var(--wp--custom--motion--fast);
}

.aloe-cat-tiles button:hover::before {
	box-shadow: 0 0 0 11px #ffd9a8;
}

.aloe-cat-tiles button[aria-selected="true"] {
	background: var(--wp--preset--color--peach) !important;
	border-color: var(--wp--preset--color--secondary) !important;
	color: #1c4a3d !important;
}

.aloe-cat-tiles button[aria-selected="true"]::before {
	box-shadow: 0 0 0 11px var(--wp--preset--color--secondary), 0 14px 30px 0 rgba(247, 148, 30, 0.55);
}

/* Tile photos (theme assets) mapped by category order in apteka_aloe_catalog(). */
.aloe-cat-tiles button:nth-child(1) { --aloe-tile-img: url("../images/cat-tegobi.jpg"); }
.aloe-cat-tiles button:nth-child(2) { --aloe-tile-img: url("../images/cat-suplementi.jpg"); }
.aloe-cat-tiles button:nth-child(3) { --aloe-tile-img: url("../images/cat-sport.jpg"); }
.aloe-cat-tiles button:nth-child(4) { --aloe-tile-img: url("../images/cat-bebinja.jpg"); }
.aloe-cat-tiles button:nth-child(5) { --aloe-tile-img: url("../images/cat-ortopedija.jpg"); }
.aloe-cat-tiles button:nth-child(6) { --aloe-tile-img: url("../images/cat-med-oprema.jpg"); }
.aloe-cat-tiles button:nth-child(7) { --aloe-tile-img: url("../images/cat-kozmetika.jpg"); }

.aloe-cat-explorer .wp-block-tab-panels {
	margin-top: 16px;
}

.aloe-cat-panel {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 34px;
	padding: 28px 30px;
	border: 1.5px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--panel-lg);
	background: var(--wp--preset--color--mint);
}

.aloe-cat-panel[hidden] {
	display: none;
}

.aloe-cat-panel__intro h3,
.aloe-cat-panel__intro p {
	margin-block-end: 0;
}

.aloe-subcat-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 10px 14px !important;
	align-content: start;
}

.aloe-subcat-link {
	margin: 0;
}

.aloe-subcat-link a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 13px 15px;
	border: 1px solid #d6e9e2;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	transition: border-color var(--wp--custom--motion--fast), color var(--wp--custom--motion--fast);
}

.aloe-subcat-link a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * 7. Trust badges & perks
 * ------------------------------------------------------------------------ */

.aloe-trust-badge {
	padding: 18px 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card-sm);
	background: var(--wp--preset--color--base);
}

.aloe-trust-badge .wp-block-image {
	margin: 0;
	flex: none;
}

.aloe-trust-badge p {
	margin: 0;
}

.aloe-trust-badge__title {
	font-size: 14.5px;
	font-weight: 700;
}

.aloe-trust-badge__text {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}

/* Perk: glyph tile + title + text. The glyph is decorative CSS content. */
.aloe-perk {
	position: relative;
	padding-left: 45px;
	min-height: 34px;
}

.aloe-perk::before {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--accent);
	font-size: 15px;
	font-weight: 800;
}

.aloe-perk--delivery::before { content: "24" / ""; }
.aloe-perk--rx::before { content: "℞" / ""; }
.aloe-perk--return::before { content: "↺" / ""; }
.aloe-perk--original::before { content: "✓" / ""; }

.aloe-perk p {
	margin: 0;
}

.aloe-perk__title {
	font-size: 13.5px;
	font-weight: 800;
}

.aloe-perk__text {
	margin-top: 2px !important;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-subtle);
}

.aloe-perks--grid {
	margin-top: 26px !important;
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.aloe-perks--cream .aloe-perk {
	padding-left: 41px;
}

.aloe-perks--cream .aloe-perk::before {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--wp--preset--color--base);
	border: 1px solid #f1e4d0;
	font-size: 13px;
}

.aloe-perks--cream .aloe-perk__text {
	color: var(--wp--preset--color--cream-text);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * 8. Product cards, badges, Rx/OTC, stock
 * ------------------------------------------------------------------------ */

.aloe-grid .wc-block-product-template {
	gap: 16px;
}

.aloe-grid--shop .wc-block-product-template {
	gap: 18px;
}

.aloe-grid .wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	overflow: hidden;
	transition: border-color var(--wp--custom--motion--fast), box-shadow var(--wp--custom--motion--fast);
}

.aloe-grid .wc-block-product:hover,
.aloe-grid .wc-block-product:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.aloe-grid--shop .wc-block-product {
	border-width: 1px;
	border-color: var(--wp--preset--color--border-strong);
}

.aloe-grid--shop .wc-block-product:hover,
.aloe-grid--shop .wc-block-product:focus-within {
	border-color: #b6d7cd;
	box-shadow: none;
}

.aloe-grid--compact .wc-block-product:hover,
.aloe-grid--compact .wc-block-product:focus-within {
	border-color: var(--wp--preset--color--secondary);
}

.aloe-card__media {
	position: relative;
	margin: 0 !important;
}

/* Home cards: padded image well; shop cards: edge-to-edge square. */
.aloe-grid--home .aloe-card__media {
	padding: 16px 16px 0;
}

.aloe-grid--compact .aloe-card__media {
	padding: 14px 14px 0;
}

.aloe-card__media .wc-block-components-product-image,
.aloe-card__media .wc-block-components-product-image a {
	margin: 0 !important;
	display: block;
}

.aloe-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--wp--preset--color--mint);
}

.aloe-grid--home .aloe-card__media img {
	aspect-ratio: auto;
	height: 188px;
	border-radius: 14px;
}

.aloe-grid--compact .aloe-card__media img {
	aspect-ratio: auto;
	height: 150px;
	border-radius: 14px;
}

.aloe-card__body {
	flex: 1;
	padding: 16px;
	align-items: stretch !important;
}

.aloe-grid--compact .aloe-card__body {
	padding: 14px;
}

.aloe-card__brand {
	margin: 0;
	font-size: 11.5px;
	letter-spacing: 0.09em;
}

.aloe-grid--shop .aloe-card__brand {
	letter-spacing: 0.07em;
}

.aloe-card__title {
	margin: 8px 0 10px !important;
	font-family: var(--wp--preset--font-family--manrope) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.01em !important;
	min-height: 42px;
}

.aloe-grid--shop .aloe-card__title {
	margin: 6px 0 8px !important;
	font-size: 14.5px !important;
	min-height: 0;
}

.aloe-grid--compact .aloe-card__title {
	margin: 7px 0 12px !important;
	font-size: 15px !important;
	min-height: 40px;
}

.aloe-card__title a {
	color: var(--wp--preset--color--contrast);
}

.aloe-card__footer {
	margin-top: auto !important;
	gap: 10px;
}

/* Price: struck-through regular price above the current price. */
.aloe-card__price.wc-block-components-product-price,
.aloe-card__price .wc-block-components-product-price {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	margin: 0;
	line-height: 1.15;
	text-align: left;
}

.aloe-grid--home .aloe-card__price {
	font-size: 21px;
}

.wc-block-components-product-price del,
.wc-block-components-product-price__regular {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--text-faint);
	letter-spacing: 0;
	text-decoration: line-through;
	opacity: 1;
}

.wc-block-components-product-price ins,
.wc-block-components-product-price__value.is-discounted {
	text-decoration: none;
	background: none;
}

/* Add-to-cart in cards. */
.aloe-card__add {
	margin: 0 !important;
	flex: none;
}

.aloe-card__add .wp-block-button__link,
.aloe-card__add .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 0;
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--contrast);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
}

.aloe-card__add .wp-block-button__link::before,
.aloe-card__add .wc-block-components-product-button__button::before {
	content: "+" / "";
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
}

.aloe-card__add .wp-block-button__link:hover,
.aloe-card__add .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.aloe-grid--shop .aloe-card__add .wp-block-button__link,
.aloe-grid--shop .aloe-card__add .wc-block-components-product-button__button {
	padding: 11px 15px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 800;
}

.aloe-grid--shop .aloe-card__add .wp-block-button__link::before,
.aloe-grid--shop .aloe-card__add .wc-block-components-product-button__button::before {
	content: none;
}

.aloe-grid--shop .aloe-card__add .wp-block-button__link:hover,
.aloe-grid--shop .aloe-card__add .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--secondary);
}

/* Icon-only variant: label stays for screen readers. */
.aloe-card__add--icon .wp-block-button__link,
.aloe-card__add--icon .wc-block-components-product-button__button {
	position: relative;
	flex: none;
	width: 40px;
	min-width: 40px;
	height: 40px;
	padding: 0 !important;
	justify-content: center;
	font-size: 0 !important;
	overflow: hidden;
}

.aloe-card__add--icon .wp-block-button__link::before,
.aloe-card__add--icon .wc-block-components-product-button__button::before {
	font-size: 19px;
}

.aloe-card__add .wc-block-components-product-button__button.loading::before {
	content: "…" / "";
}

.aloe-card__add .added_to_cart {
	display: none;
}

/* Sale badge ("−22%"), overlaid top-left of the card image. */
.aloe-card__media .wc-block-components-product-sale-badge,
.aloe-gallery .wc-block-components-product-sale-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	margin: 0;
	padding: 5px 9px;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 11.5px;
	font-weight: 800;
	text-transform: none;
}

.aloe-grid--home .aloe-card__media .wc-block-components-product-sale-badge {
	top: 16px;
	left: 16px;
}

.aloe-grid--shop .aloe-card__media .wc-block-components-product-sale-badge {
	top: 14px;
	left: 14px;
	padding: 6px 11px;
	border-radius: 6px;
}

/* Product tags as badges (Ново / Бестселер / Топ избор), stacked under the
 * sale badge. Default teal; "Ново" uses the orange promo colour. */
.aloe-card__tags,
.aloe-pdp__tags {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: 0 !important;
	font-size: 0;
}

.aloe-card__tags {
	position: absolute;
	left: 16px;
	bottom: 12px;
	z-index: 2;
}

.aloe-grid--shop .aloe-card__tags {
	left: 14px;
}

.aloe-card__tags a,
.aloe-pdp__tags a {
	display: inline-block;
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base) !important;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.aloe-card__tags a[href*="/novo/"],
.aloe-pdp__tags a[href*="/novo/"] {
	background: var(--wp--preset--color--secondary);
}

.aloe-card__tags .wp-block-post-terms__separator,
.aloe-pdp__tags .wp-block-post-terms__separator {
	display: none;
}

/* Rx / OTC badge (product attribute pa_rezhim, terms "bez-recept" / "na-recept").
 * Mockup shows no state; derived from the badge + chip visual language. */
.aloe-rx-badge {
	margin: 0 0 10px !important;
	font-size: 0;
}

.aloe-rx-badge a {
	--aloe-rx: var(--wp--custom--rx--otc-text);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px 4px 5px;
	border: 1px solid var(--wp--custom--rx--otc-border);
	border-radius: 999px;
	background: var(--wp--custom--rx--otc-bg);
	color: var(--aloe-rx) !important;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
}

.aloe-rx-badge a::before {
	content: "✓" / "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--aloe-rx);
	color: var(--wp--preset--color--base);
	font-size: 9px;
	line-height: 1;
}

.aloe-rx-badge a[href*="na-recept"] {
	--aloe-rx: var(--wp--custom--rx--rx-text);
	border-color: var(--wp--custom--rx--rx-border);
	background: var(--wp--custom--rx--rx-bg);
}

.aloe-rx-badge a[href*="na-recept"]::before {
	content: "℞" / "";
	font-size: 10px;
}

.aloe-rx-badge--lg {
	margin: 0 !important;
}

.aloe-rx-badge--lg a {
	padding: 6px 12px 6px 8px;
	font-size: 12px;
}

/* Stock status (woocommerce/product-stock-indicator). */
.wc-block-components-product-stock-indicator {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	background: var(--wp--custom--stock--in-stock-bg);
	color: var(--wp--custom--stock--in-stock-text);
}

.wc-block-components-product-stock-indicator::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.wc-block-components-product-stock-indicator--out-of-stock {
	background: var(--wp--custom--stock--out-of-stock-bg);
	color: var(--wp--custom--stock--out-of-stock-text);
}

.wc-block-components-product-stock-indicator--available-on-backorder,
.wc-block-components-product-stock-indicator--onbackorder {
	background: var(--wp--custom--stock--backorder-bg);
	color: var(--wp--custom--stock--backorder-text);
	border: 1px solid var(--wp--preset--color--cream-border);
}

.wc-block-components-product-stock-indicator--low-stock {
	background: var(--wp--custom--stock--low-stock-bg);
	color: var(--wp--custom--stock--low-stock-text);
}

/* Out-of-stock cards: soften the image, keep the card readable. */
.aloe-grid .wc-block-product.outofstock .aloe-card__media img {
	opacity: 0.55;
	filter: grayscale(0.4);
}

/* ---------------------------------------------------------------------------
 * 9. Home sections
 * ------------------------------------------------------------------------ */

.aloe-picks {
	display: grid;
	grid-template-columns: 352px minmax(0, 1fr);
	gap: 18px;
}

.aloe-picks > * {
	margin: 0 !important;
}

.aloe-picks__aside {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 18px;
}

.aloe-picks__aside > * {
	margin: 0 !important;
}

.aloe-bundle-card {
	position: relative;
	overflow: hidden;
	min-height: 280px;
	padding: 30px;
	border-radius: var(--wp--custom--radius--panel-lg);
}

.aloe-bundle-card::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(247, 148, 30, 0.18);
	pointer-events: none;
}

.aloe-bundle-card > * {
	position: relative;
	z-index: 1;
}

.aloe-bundle-card p {
	margin: 0;
}

.aloe-banner-card {
	display: flex;
	flex-direction: column;
	min-height: 280px;
	overflow: hidden;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--panel-lg);
	background: var(--wp--preset--color--base);
}

.aloe-banner-card__media {
	flex: 1;
	min-height: 150px;
	margin: 0 !important;
}

.aloe-banner-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aloe-banner-card__body {
	margin: 0 !important;
	padding: 22px 24px 24px;
}

.aloe-banner-card__body p,
.aloe-banner-card__body h3 {
	margin-block-end: 0;
}

/* Brands marquee. */
.aloe-brands {
	overflow: hidden;
	padding: 34px 0 30px;
	border: 1.5px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--hero);
	background: var(--wp--preset--color--mint);
	container-type: inline-size;
}

.aloe-brands__head {
	padding: 0 34px 22px;
}

.aloe-brands__head h2 {
	margin: 0;
}

.aloe-marquee {
	margin: 0 !important;
}

.aloe-marquee__track {
	display: flex;
	gap: 14px;
	width: max-content;
	margin: 0;
	padding: 0 34px;
	list-style: none;
	animation: aloe-brandroll 34s linear infinite alternate;
}

.aloe-marquee:hover .aloe-marquee__track,
.aloe-marquee:focus-within .aloe-marquee__track {
	animation-play-state: paused;
}

@keyframes aloe-brandroll {
	from { transform: translateX(0); }
	to { transform: translateX(min(0px, calc(-100% + 100cqw))); }
}

.aloe-marquee__track > li {
	flex: none;
	margin: 0;
}

.aloe-brand-tile {
	margin: 0;
}

.aloe-brand-tile a,
.aloe-brand-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 186px;
	height: 74px;
	border-radius: 14px;
	font-family: var(--wp--preset--font-family--onest);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #63736c;
}

.aloe-brand-tile a {
	background: var(--wp--preset--color--base);
	border: 1px solid #d6e9e2;
}

.aloe-brand-tile a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* CTA row: newsletter (2/3) + e-recept (1/3). */
.aloe-cta-row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 18px;
}

.aloe-cta-row > * {
	margin: 0 !important;
}

.aloe-newsletter {
	gap: 30px;
	padding: 40px 42px;
	border-radius: var(--wp--custom--radius--hero);
}

.aloe-newsletter__text {
	max-width: 420px;
}

.aloe-newsletter__text h2,
.aloe-newsletter__text p {
	margin-block-end: 0;
}

.aloe-newsletter__form {
	padding: 8px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.16);
}

.aloe-erecept {
	padding: 32px !important;
	border-width: 1.5px !important;
	border-color: var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--hero) !important;
}

.aloe-erecept h3,
.aloe-erecept p {
	margin-block-end: 0;
}

/* Trio: blog / advice / deals. */
.aloe-trio {
	align-items: start;
}

.aloe-trio__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px;
	border-radius: var(--wp--custom--radius--panel);
}

.aloe-trio__card > * {
	margin: 0 !important;
}

.aloe-trio__card--blog {
	border: 1px solid var(--wp--preset--color--border-strong);
	background: var(--wp--preset--color--base);
}

.aloe-trio__card--deals {
	border: 1px solid var(--wp--preset--color--cream-border);
	background: var(--wp--preset--color--cream);
}

.aloe-trio__head {
	gap: 12px;
}

.aloe-trio__head h2,
.aloe-trio__head p {
	margin: 0;
}

.aloe-trio__card--advice h2 {
	margin-bottom: 0;
}

.aloe-trio__cta {
	margin-top: auto !important;
}

.aloe-blog-list .wp-block-post-template {
	margin: 0;
}

.aloe-blog-item {
	position: relative;
	padding: 6px 8px 6px 17px;
	border-radius: 14px;
	transition: background-color var(--wp--custom--motion--fast);
}

.aloe-blog-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	border-radius: 2px;
	background: #e3ece6;
}

.aloe-blog-item:hover,
.aloe-blog-item:focus-within {
	background: #e4f1ed;
}

.aloe-blog-item__cat {
	margin: 0;
	font-size: 11.5px;
	letter-spacing: 0.07em;
}

.aloe-blog-item__cat a {
	color: var(--wp--preset--color--secondary);
}

.aloe-blog-item__title {
	margin: 5px 0 4px !important;
}

.aloe-blog-item__title a {
	color: var(--wp--preset--color--contrast);
}

.aloe-blog-item__date {
	margin: 0;
	font-size: 12.5px;
	color: #647a73;
}

.aloe-qa {
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
}

.aloe-qa p {
	margin: 0;
}

.aloe-qa__q {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
}

.aloe-qa__a {
	margin-top: 6px !important;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.76);
}

.aloe-deals .wc-block-product-template {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.aloe-deals .wc-block-product {
	margin: 0;
}

.aloe-deal {
	gap: 14px;
	padding: 12px;
	border: 1px solid #f1e4d0;
	border-radius: 14px;
	background: var(--wp--preset--color--base);
}

.aloe-deal__text {
	flex: 1;
	min-width: 0;
}

.aloe-deal__title {
	margin: 0 !important;
}

.aloe-deal__title a {
	color: var(--wp--preset--color--contrast);
}

.aloe-deal__price .wc-block-components-product-price,
.aloe-deal__price.wc-block-components-product-price {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-size: 16px;
}

.aloe-deal__badge .wc-block-components-product-sale-badge {
	position: static;
	margin: 0;
	padding: 6px 9px;
	border-radius: 8px;
	font-size: 12px;
}

/* ---------------------------------------------------------------------------
 * 10. Footer
 * ------------------------------------------------------------------------ */

.aloe-footer p {
	margin: 0;
}

.aloe-footer__logo {
	margin: 0 !important;
	flex: none;
}

.aloe-footer__logo img {
	padding: 2px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
}

.aloe-footer__about {
	max-width: 300px;
}

.aloe-footer__heading {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px !important;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-secondary);
}

.aloe-footer__nav .wp-block-navigation__container {
	gap: 11px;
}

.aloe-footer__nav .wp-block-navigation-item__content {
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--on-secondary);
}

.aloe-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--base);
}

.aloe-footer__social.wp-block-social-links {
	gap: 9px;
}

.aloe-footer__social .wp-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid rgba(74, 39, 8, 0.32);
	border-radius: 11px;
	color: var(--wp--preset--color--on-secondary) !important;
}

/* Core keeps the <li> display:block, so centre the icon on the link itself. */
.aloe-footer__social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.aloe-footer__social .wp-social-link svg {
	width: 18px;
	height: 18px;
}

.aloe-footer__social .wp-social-link:hover {
	border-color: var(--wp--preset--color--on-secondary);
	transform: none;
}

.aloe-pay-badges {
	gap: 7px;
}

.aloe-pay-badge {
	padding: 6px 10px;
	border: 1.5px solid rgba(74, 39, 8, 0.32);
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 800;
}

/* ---------------------------------------------------------------------------
 * 11. Shop archive
 * ------------------------------------------------------------------------ */

.aloe-breadcrumbs,
.wc-block-breadcrumbs.aloe-breadcrumbs {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--text-subtle);
}

.aloe-breadcrumbs a {
	color: var(--wp--preset--color--text-subtle);
}

.aloe-breadcrumbs a:hover {
	color: var(--wp--preset--color--secondary);
}

.aloe-page-banner {
	margin-block-start: 18px !important;
	padding: 34px 38px;
	border-radius: var(--wp--custom--radius--panel);
}

.aloe-page-banner .wp-block-query-title {
	margin: 0;
	letter-spacing: -0.03em;
}

.aloe-page-banner__lead,
.aloe-page-banner .wp-block-term-description {
	max-width: 640px;
	margin: 12px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.aloe-page-banner .wp-block-term-description p {
	margin: 0;
}

.aloe-page-banner--account {
	gap: 24px;
	margin-block-start: 32px !important;
	padding: 30px 34px;
}

.aloe-page-banner--account .wp-block-post-title {
	margin: 0;
	letter-spacing: -0.03em;
}

.aloe-page-banner__avatar {
	margin: 0 !important;
}

.aloe-page-banner__avatar img {
	border-radius: 50%;
	background: var(--wp--preset--color--base);
}

.aloe-chips-query {
	margin-block-start: 20px !important;
}

.aloe-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aloe-chips > li {
	margin: 0;
}

.aloe-chip {
	margin: 0;
}

.aloe-chip a {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--wp--preset--color--mint-2);
	color: var(--wp--preset--color--text-secondary);
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color var(--wp--custom--motion--fast), color var(--wp--custom--motion--fast);
}

.aloe-chip a:hover,
.aloe-chip a[aria-current] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.aloe-shop-layout {
	display: grid;
	grid-template-columns: var(--wp--custom--layout--sidebar) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	margin-block-start: 28px !important;
}

.aloe-shop-layout > * {
	margin: 0 !important;
}

.aloe-shop-layout__filters {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 150px);
}

.aloe-filters .wc-block-product-filters__overlay-content {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.aloe-filter {
	margin: 0 !important;
	padding: 20px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 18px;
	background: var(--wp--preset--color--base);
}

.aloe-filter h3 {
	margin: 0 0 14px !important;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px !important;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.aloe-filter .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.aloe-filter .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
	cursor: pointer;
}

.aloe-filter .wc-block-product-filter-checkbox-list__input-wrapper {
	position: relative;
	display: inline-flex;
	flex: none;
	width: 19px;
	height: 19px;
}

.aloe-filter .wc-block-product-filter-checkbox-list__input {
	appearance: none;
	width: 19px;
	height: 19px;
	margin: 0;
	border: 1.5px solid #b4d5cb;
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	cursor: pointer;
}

.aloe-filter .wc-block-product-filter-checkbox-list__input:checked {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
}

.aloe-filter .wc-block-product-filter-checkbox-list__mark {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 11px;
	height: 11px;
	color: var(--wp--preset--color--base);
	pointer-events: none;
}

.aloe-filter .wc-block-product-filter-checkbox-list__text-wrapper {
	display: flex;
	flex: 1;
	justify-content: space-between;
	gap: 8px;
}

.aloe-filter .wc-block-product-filter-checkbox-list__count {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--text-faint);
}

.aloe-filter .wc-block-product-filter-checkbox-list__show-more-button {
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 800;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
}

/* Filter drawer toggle (mobile) and apply button. */
.aloe-filters .wc-block-product-filters__open-overlay,
.aloe-filters .wc-block-product-filters__apply {
	border: 1.5px solid var(--wp--preset--color--border-input);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-weight: 800;
}

.aloe-filters .wc-block-product-filters__apply {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.aloe-toolbar {
	gap: 20px;
	padding: 14px 18px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card-sm);
	background: var(--wp--preset--color--base);
}

.aloe-toolbar > * {
	margin: 0 !important;
}

.aloe-toolbar .woocommerce-result-count {
	margin: 0;
}

.aloe-toolbar .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wp--preset--color--text-subtle);
}

.aloe-toolbar .woocommerce-ordering select,
.aloe-toolbar .orderby {
	padding: 9px 36px 9px 14px;
	border: 0;
	border-radius: 10px;
	background-color: var(--wp--preset--color--peach);
	font-size: 13.5px;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.aloe-grid--shop {
	margin-top: 18px !important;
}

.aloe-pagination {
	gap: 8px;
	margin-top: 28px !important;
}

.aloe-pagination .page-numbers,
.aloe-pagination .wp-block-query-pagination-previous,
.aloe-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	padding: 12px 16px;
	border: 1.5px solid var(--wp--preset--color--border-input);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text-secondary);
	font-size: 14px;
	font-weight: 800;
}

.aloe-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.aloe-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.aloe-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 8px;
}

/* ---------------------------------------------------------------------------
 * 12. Single product
 * ------------------------------------------------------------------------ */

.aloe-pdp {
	margin-block-start: 24px !important;
}

/* Gallery: 88px thumbnail rail on the left, rounded main image. */
.aloe-gallery.wc-block-product-gallery {
	gap: 16px;
	align-items: flex-start;
}

.aloe-gallery .wc-block-product-gallery-thumbnails {
	flex: 0 0 88px;
	width: 88px;
	flex-direction: column;
	gap: 12px;
}

.aloe-gallery .wc-block-product-gallery-thumbnails__thumbnail {
	padding: 3px;
	border: 2px solid var(--wp--preset--color--border-strong);
	border-radius: 15px;
	overflow: hidden;
}

.aloe-gallery .wc-block-product-gallery-thumbnails__thumbnail img {
	border-radius: 12px;
	background: var(--wp--preset--color--mint-2);
}

.aloe-gallery .wc-block-product-gallery-thumbnails__thumbnail--active,
.aloe-gallery .wc-block-product-gallery-thumbnails__thumbnail:has(img.wc-block-product-gallery-thumbnails__thumbnail__image--is-active) {
	border-color: var(--wp--preset--color--secondary);
}

.aloe-gallery .wc-block-product-gallery-large-image {
	flex: 1;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--panel-lg);
	background: var(--wp--preset--color--mint);
}

.aloe-gallery .wc-block-components-product-sale-badge {
	top: 18px;
	left: 18px;
	padding: 7px 13px;
	border-radius: 6px;
	font-size: 12px;
	letter-spacing: 0.04em;
}

.aloe-pdp__media {
	position: relative;
}

.aloe-pdp__tags {
	position: absolute;
	top: 58px;
	left: 122px;
	z-index: 3;
}

.aloe-pdp__tags a {
	padding: 7px 13px;
	font-size: 12px;
}

.aloe-pdp__meta {
	align-items: center;
}

.aloe-pdp__brand {
	margin: 0;
	font-size: 12.5px;
}

.aloe-pdp__sku {
	position: relative;
	margin: 0 !important;
	padding-left: 15px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--text-subtle);
}

.aloe-pdp__sku::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 13px;
	transform: translateY(-50%);
	background: #bad9d0;
}

.aloe-pdp__sku strong {
	font-weight: 600;
}

.aloe-pdp__excerpt {
	max-width: 520px;
	margin-top: 20px !important;
	font-size: 15.5px;
	line-height: 1.66;
	color: var(--wp--preset--color--text-secondary);
}

.aloe-pdp__price {
	margin-top: 24px !important;
}

.aloe-pdp__price .wc-block-components-product-price,
.aloe-pdp__price.wc-block-components-product-price {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 16px;
	font-size: 40px;
	letter-spacing: -0.03em;
}

.aloe-pdp__price del,
.aloe-pdp__price .wc-block-components-product-price__regular {
	padding-bottom: 8px;
	font-size: 18px;
}

.aloe-pdp__vat {
	margin-top: 4px !important;
	font-size: 13px;
	color: var(--wp--preset--color--text-subtle);
}

/* Add to cart with options: packaging chips, stepper, big orange button. */
.aloe-pdp__buy {
	margin-top: 26px !important;
}

.aloe-pdp__buy .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name,
.aloe-pdp__buy .wc-block-add-to-cart-with-options-variation-selector-attribute-name {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.aloe-pdp__buy .wc-block-product-filter-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.aloe-pdp__buy .wc-block-product-filter-chips__item {
	padding: 12px 18px;
	border: 1.5px solid var(--wp--preset--color--border-input);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 14.5px;
	font-weight: 800;
	cursor: pointer;
}

.aloe-pdp__buy .wc-block-product-filter-chips__item[aria-checked="true"],
.aloe-pdp__buy .wc-block-product-filter-chips__item.is-selected {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--peach);
}

.aloe-pdp__buy .wc-block-components-quantity-selector,
.aloe-pdp__buy .quantity {
	display: flex;
	align-items: center;
	height: 56px;
	border: 1.5px solid var(--wp--preset--color--border-input);
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

.aloe-pdp__buy .quantity input,
.aloe-pdp__buy .wc-block-components-quantity-selector input {
	width: 52px;
	height: 100%;
	border: 0;
	text-align: center;
	font-size: 16px;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
	background: transparent;
}

.aloe-pdp__buy .quantity button,
.aloe-pdp__buy .wc-block-components-quantity-selector__button {
	width: 46px;
	height: 100%;
	border: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
}

.aloe-pdp__buy .quantity button:hover,
.aloe-pdp__buy .wc-block-components-quantity-selector__button:hover {
	background: var(--wp--preset--color--mint-2);
}

.aloe-pdp__buy .wp-block-woocommerce-product-button,
.aloe-pdp__buy .wc-block-components-product-button {
	flex: 1;
	margin: 0;
}

.aloe-pdp__buy .wc-block-components-product-button__button,
.aloe-pdp__buy .single_add_to_cart_button {
	width: 100%;
	height: 56px;
	border-radius: 12px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 16px;
	font-weight: 800;
}

.aloe-pdp__buy .wc-block-components-product-button__button:hover,
.aloe-pdp__buy .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--secondary-dark);
}

.aloe-pdp__buy .wc-block-components-product-button__button:disabled,
.aloe-pdp__buy .single_add_to_cart_button.disabled {
	background: var(--wp--preset--color--border-input);
	color: var(--wp--preset--color--text-secondary);
	cursor: not-allowed;
}

/* Tabs (core/tabs): underline style with orange indicator. */
.aloe-tabs .wp-block-tab-list {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1.5px solid var(--wp--preset--color--border);
	background: none;
	overflow-x: auto;
}

.aloe-tabs .wp-block-tab-list button {
	padding: 15px 20px;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--text-subtle) !important;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
}

.aloe-tabs .wp-block-tab-list button:hover {
	color: var(--wp--preset--color--contrast) !important;
}

.aloe-tabs .wp-block-tab-list button[aria-selected="true"] {
	color: var(--wp--preset--color--contrast) !important;
	font-weight: 800;
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--secondary);
}

.aloe-tabs .wp-block-tab-panel {
	max-width: 860px;
	padding: 32px 0 0;
	border: 0;
}

.aloe-tabs__title {
	margin: 0 0 14px;
	font-size: 20px !important;
}

.aloe-tabs__body,
.aloe-tabs__body p {
	margin: 0;
	font-size: 15px;
	line-height: 1.72;
	color: var(--wp--preset--color--text-secondary);
}

/* Specifications table (zebra rows in a rounded frame). */
.aloe-specs {
	max-width: 860px;
	margin-top: 22px !important;
}

.aloe-specs table {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.aloe-specs th,
.aloe-specs td {
	padding: 13px 18px;
	border: 0;
	font-size: 13.5px;
	text-align: left;
}

.aloe-specs th {
	font-weight: 700;
	color: var(--wp--preset--color--text-secondary);
}

.aloe-specs td {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-align: right;
}

.aloe-specs tr:nth-child(even) {
	background: var(--wp--preset--color--mint);
}

.aloe-specs td p {
	margin: 0;
}

/* Floating "Прашај фармацевт" button + panel (core/details). */
.aloe-ask {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 70;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 14px;
	margin: 0 !important;
}

.aloe-ask > summary {
	list-style: none;
	position: relative;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: transparent;
	font-size: 0;
	cursor: pointer;
	animation: aloe-askpulse 2s infinite;
}

.aloe-ask > summary::-webkit-details-marker {
	display: none;
}

.aloe-ask > summary::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 30px;
	height: 30px;
	background: var(--wp--preset--color--base);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5a3.5 3.5 0 0 1-3.5 3.5H9l-4.5 3.2V18A3.5 3.5 0 0 1 4 14.5v-7A3.5 3.5 0 0 1 7.5 4h9A3.5 3.5 0 0 1 20 7.5Z'/%3E%3Cpath d='M9.6 9.2a2.4 2.4 0 0 1 4.7.8c0 1.6-2.3 1.8-2.3 3.2'/%3E%3Cpath d='M12 15.7h.01'/%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 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5a3.5 3.5 0 0 1-3.5 3.5H9l-4.5 3.2V18A3.5 3.5 0 0 1 4 14.5v-7A3.5 3.5 0 0 1 7.5 4h9A3.5 3.5 0 0 1 20 7.5Z'/%3E%3Cpath d='M9.6 9.2a2.4 2.4 0 0 1 4.7.8c0 1.6-2.3 1.8-2.3 3.2'/%3E%3Cpath d='M12 15.7h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.aloe-ask[open] > summary {
	animation: none;
	box-shadow: 0 14px 34px -10px rgba(28, 64, 55, 0.5);
}

@keyframes aloe-askpulse {
	0% { box-shadow: 0 0 0 0 rgba(247, 148, 30, 0.55); }
	70% { box-shadow: 0 0 0 20px rgba(247, 148, 30, 0); }
	100% { box-shadow: 0 0 0 0 rgba(247, 148, 30, 0); }
}

.aloe-ask__panel {
	width: 352px;
	max-width: calc(100vw - 52px);
	padding: 22px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-top: 4px solid var(--wp--preset--color--secondary);
	border-radius: 18px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--floating);
	animation: aloe-askin 0.22s ease both;
}

@keyframes aloe-askin {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

.aloe-ask__title {
	margin: 0;
}

.aloe-ask__panel p {
	margin-block: 0;
}

.aloe-ask__about {
	margin-top: 14px !important;
	padding: 10px 12px;
	border: 1px solid #f7e2c4;
	border-radius: 11px;
	background: #fff5e8;
	font-size: 12.5px;
	font-weight: 700;
	color: #4f9a88;
}

.aloe-ask__about::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	flex: none;
}

.aloe-ask__product {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0;
	color: #4f9a88;
}

/* ---------------------------------------------------------------------------
 * 13. Forms (WooCommerce blocks, account, login)
 * ------------------------------------------------------------------------ */

:where(.aloe-main, .aloe-login-drawer) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], select, textarea):not(.wp-block-search__input):not(.wc-block-product-filter-checkbox-list__input) {
	padding: 13px 14px;
	border: 1.5px solid var(--wp--preset--color--border-input);
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	transition: border-color var(--wp--custom--motion--fast), box-shadow var(--wp--custom--motion--fast);
}

:where(.aloe-main, .aloe-login-drawer) :where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 0 0 3px rgba(47, 102, 89, 0.15);
	outline: none;
}

/* WooCommerce block text inputs (floating labels). */
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-address-form select,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	border: 1.5px solid var(--wp--preset--color--border-input) !important;
	border-radius: var(--wp--custom--radius--control) !important;
	background: var(--wp--preset--color--base) !important;
	font-weight: 600;
	color: var(--wp--preset--color--contrast) !important;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 0 0 3px rgba(47, 102, 89, 0.15) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	color: var(--wp--preset--color--text-secondary) !important;
	font-weight: 700;
}

.wc-block-components-validation-error,
.wc-block-components-text-input.has-error label {
	color: var(--wp--preset--color--danger) !important;
}

.wc-block-components-text-input.has-error input {
	border-color: var(--wp--preset--color--danger) !important;
}

/* Checkboxes & radios in WC blocks. */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1.5px solid #b4d5cb;
	border-radius: 5px;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--base);
}

.wc-block-components-radio-control__input {
	border: 1.5px solid #b4d5cb !important;
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--accent) !important;
	background: var(--wp--preset--color--accent) !important;
}

.wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--base) !important;
}

/* Store notices. */
.wc-block-components-notice-banner {
	border-radius: 14px;
	font-weight: 600;
}

.wc-block-components-notice-banner.is-success {
	border-color: #b4d5cb;
	background: var(--wp--preset--color--mint);
}

.wc-block-components-notice-banner.is-error {
	border-color: #efc6bd;
	background: var(--wp--preset--color--danger-soft);
}

.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
	border-color: var(--wp--preset--color--cream-border);
	background: var(--wp--preset--color--cream);
}

/* WC block buttons inherit theme.json button tokens; tune the shape. */
.wc-block-components-button:not(.is-link) {
	border-radius: 13px;
	font-weight: 800;
}

/* ---------------------------------------------------------------------------
 * 14. Cart block
 * ------------------------------------------------------------------------ */

.aloe-cart {
	margin-block-start: 24px !important;
}

.aloe-cart .wc-block-components-sidebar-layout {
	gap: 32px;
}

.aloe-cart .wc-block-cart-items {
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

.aloe-cart .wc-block-cart-items__header {
	background: var(--wp--preset--color--mint);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-subtle);
}

.aloe-cart .wc-block-cart-items__header th {
	padding: 14px 20px;
	border-bottom: 1px solid var(--wp--preset--color--border-strong);
}

.aloe-cart .wc-block-cart-items__row td {
	padding: 18px 20px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.aloe-cart .wc-block-cart-items__row:first-child td {
	border-top: 0;
}

.aloe-cart .wc-block-cart-item__image img {
	width: 82px;
	height: 82px;
	border-radius: 14px;
	object-fit: cover;
	background: var(--wp--preset--color--mint-2);
}

.aloe-cart .wc-block-components-product-name {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.aloe-cart .wc-block-cart-item__prices,
.aloe-cart .wc-block-components-product-metadata {
	font-size: 12.5px;
	color: var(--wp--preset--color--text-faint);
}

.aloe-cart .wc-block-cart-item__total .wc-block-components-product-price__value,
.aloe-cart .wc-block-cart-item__total .wc-block-formatted-money-amount {
	font-family: var(--wp--preset--font-family--onest);
	font-size: 19px;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-quantity-selector {
	border: 1.5px solid var(--wp--preset--color--border-input) !important;
	border-radius: var(--wp--custom--radius--control) !important;
	overflow: hidden;
}

.wc-block-components-quantity-selector::after {
	display: none !important;
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	font-weight: 800;
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 38px;
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	opacity: 1;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
	background: var(--wp--preset--color--mint-2);
}

.aloe-cart .wc-block-cart-item__remove-link {
	font-size: 12.5px !important;
	font-weight: 700;
	color: var(--wp--preset--color--text-subtle) !important;
	text-decoration: none !important;
}

.aloe-cart .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--danger) !important;
}

/* Totals sidebar: bordered card. */
.aloe-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.aloe-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-totals-block {
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
}

.aloe-cart .wc-block-cart__totals-title,
.aloe-cart .wp-block-woocommerce-cart-order-summary-heading-block {
	font-family: var(--wp--preset--font-family--onest) !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
	text-transform: none !important;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-totals-item {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
}

.wc-block-components-totals-item__value {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-totals-discount .wc-block-components-totals-item__value,
.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--accent);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 15px;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--onest);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.wc-block-components-totals-wrapper {
	border-color: var(--wp--preset--color--border) !important;
}

.aloe-cart .wc-block-cart__submit-button,
.aloe-checkout .wc-block-components-checkout-place-order-button {
	width: 100%;
	padding: 17px;
	border-radius: 13px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 16px;
	font-weight: 800;
}

.aloe-cart .wc-block-cart__submit-button:hover,
.aloe-checkout .wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--secondary-dark);
}

/* Coupon ("Промо код"). */
.wc-block-components-totals-coupon .wc-block-components-panel__button,
.wc-block-components-totals-coupon-link {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-totals-coupon__button {
	border-radius: var(--wp--custom--radius--control) !important;
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}

.wc-block-components-totals-coupon__button:hover {
	background: var(--wp--preset--color--secondary) !important;
}

/* Cross-sells ("Често се купува заедно"): horizontal mini cards. */
.aloe-upsell {
	margin-top: 24px;
}

.aloe-upsell__title {
	margin: 0 0 16px;
}

.aloe-upsell__list.wc-block-product-template {
	gap: 16px;
}

.aloe-upsell .wc-block-product {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card-sm);
	background: var(--wp--preset--color--base);
}

.aloe-upsell .wc-block-product > * {
	margin: 0 !important;
}

.aloe-upsell__image {
	flex: 0 0 64px;
	width: 64px;
}

.aloe-upsell__image img {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	object-fit: cover;
}

.aloe-upsell__text {
	flex: 1;
	min-width: 0;
}

.aloe-upsell__name {
	margin: 0 !important;
}

.aloe-upsell__name a {
	color: var(--wp--preset--color--contrast);
}

.aloe-upsell__price .wc-block-components-product-price,
.aloe-upsell__price.wc-block-components-product-price {
	margin: 0;
	font-size: 16px;
	text-align: left;
}

/* Empty cart (state not in mockup; uses the same tokens). */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-size: 26px;
}

.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
	background-color: var(--wp--preset--color--primary);
}

.aloe-main--cart > .aloe-perks--cream {
	margin-block-start: 24px !important;
}

/* ---------------------------------------------------------------------------
 * 15. Checkout block
 * ------------------------------------------------------------------------ */

.aloe-steps {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: aloe-step;
}

.aloe-steps li {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--text-faint);
	counter-increment: aloe-step;
}

.aloe-steps li:last-child {
	flex: none;
}

.aloe-steps li::before {
	content: counter(aloe-step);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #e0efeb;
	color: var(--wp--preset--color--text-faint);
	font-size: 13.5px;
	font-weight: 800;
}

.aloe-steps li:not(:last-child)::after {
	content: "";
	flex: 1;
	height: 2px;
	margin-right: 10px;
	border-radius: 2px;
	background: var(--wp--preset--color--border-strong);
}

.aloe-steps li.is-done,
.aloe-steps li.is-current {
	color: var(--wp--preset--color--contrast);
}

.aloe-steps li.is-current {
	font-weight: 800;
}

.aloe-steps li.is-done::before,
.aloe-steps li.is-current::before {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.aloe-steps li.is-done::after {
	background: var(--wp--preset--color--primary);
}

.aloe-checkout {
	margin-block-start: 28px !important;
}

.aloe-checkout .wc-block-components-sidebar-layout {
	gap: 32px;
}

/* Each checkout step as a bordered card with a numbered teal square. */
.aloe-checkout .wc-block-checkout__form {
	counter-reset: aloe-co-step;
}

.aloe-checkout .wc-block-components-checkout-step {
	margin: 0 0 16px !important;
	padding: 26px !important;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	counter-increment: aloe-co-step;
}

.aloe-checkout .wc-block-components-checkout-step::after {
	display: none;
}

.aloe-checkout .wc-block-components-checkout-step__heading {
	margin: 0 0 20px;
}

.aloe-checkout .wc-block-components-checkout-step__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--onest);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

.aloe-checkout .wc-block-checkout__form:not(.wc-block-checkout__form--with-step-numbers) .wc-block-components-checkout-step__title::before {
	content: counter(aloe-co-step);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13.5px;
	font-weight: 800;
}

.aloe-checkout .wc-block-components-checkout-step__container,
.aloe-checkout .wc-block-components-checkout-step__content {
	padding: 0 !important;
}

/* Shipping & payment options as selectable cards. */
.aloe-checkout .wc-block-components-radio-control__option,
.aloe-checkout .wc-block-components-radio-control-accordion-option {
	margin: 0 0 10px;
	padding: 16px 18px 16px 50px !important;
	border: 1.5px solid var(--wp--preset--color--border-input) !important;
	border-radius: 14px !important;
	background: var(--wp--preset--color--base);
	box-shadow: none !important;
}

.aloe-checkout .wc-block-components-radio-control__option-checked,
.aloe-checkout .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) {
	border-color: var(--wp--preset--color--accent) !important;
	background: var(--wp--preset--color--mint-3);
}

.aloe-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	margin: 0;
	padding: 0 0 0 32px !important;
	border: 0 !important;
	background: transparent;
}

.aloe-checkout .wc-block-components-radio-control__label {
	font-size: 14.5px;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
}

.aloe-checkout .wc-block-components-radio-control__description,
.aloe-checkout .wc-block-components-radio-control__secondary-description {
	font-size: 13px;
	color: var(--wp--preset--color--text-subtle);
}

.aloe-checkout .wc-block-components-radio-control__secondary-label {
	font-family: var(--wp--preset--font-family--onest);
	font-size: 16px;
	font-weight: 800;
	color: var(--wp--preset--color--accent);
}

/* Order summary sidebar. */
.aloe-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
}

.aloe-checkout .wc-block-components-checkout-order-summary__title-text,
.aloe-checkout .wc-block-components-order-summary__button-text {
	font-family: var(--wp--preset--font-family--onest);
	font-size: 19px;
	font-weight: 800;
}

.aloe-checkout .wc-block-components-order-summary-item__image img {
	border-radius: 11px;
	background: var(--wp--preset--color--mint-2);
}

.aloe-checkout .wc-block-components-order-summary-item__quantity {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
	font-weight: 800;
}

.aloe-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: 13.5px;
	font-weight: 700;
}

.aloe-checkout .wc-block-checkout__terms {
	font-size: 12px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-faint);
	text-align: center;
}

.aloe-main--checkout > .aloe-perks--cream {
	max-width: 380px;
	margin-block-start: 14px !important;
	margin-left: auto !important;
	margin-right: max(0px, calc((100% - var(--wp--style--global--wide-size, 1296px)) / 2)) !important;
}

/* ---------------------------------------------------------------------------
 * 16. My Account (classic WooCommerce My Account inside the block template)
 * ------------------------------------------------------------------------ */

.aloe-account {
	margin-block-start: 24px !important;
}

.aloe-account .woocommerce {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.aloe-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.aloe-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 150px);
	float: none;
	width: auto;
	padding: 14px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
}

.aloe-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aloe-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	padding: 13px 16px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
}

.aloe-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--contrast);
}

.aloe-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--contrast);
	font-weight: 800;
}

.aloe-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.aloe-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	font-weight: 700;
	color: var(--wp--preset--color--danger);
}

.aloe-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: var(--wp--preset--color--danger-soft);
	color: var(--wp--preset--color--danger);
}

.aloe-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

.aloe-account .woocommerce-MyAccount-content > p:first-child {
	font-size: 15px;
}

.aloe-account .woocommerce-MyAccount-content h2,
.aloe-account .woocommerce-MyAccount-content h3 {
	font-size: 24px;
	letter-spacing: -0.025em;
}

/* Orders table as a bordered card with a mint header. */
.aloe-account table.shop_table,
.aloe-account .woocommerce-orders-table {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

.aloe-account table.shop_table th {
	padding: 14px 20px;
	background: var(--wp--preset--color--mint);
	border-bottom: 1px solid var(--wp--preset--color--border-strong);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-faint);
	text-align: left;
}

.aloe-account table.shop_table td {
	padding: 16px 20px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary);
}

.aloe-account .woocommerce-orders-table__cell-order-number a {
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
}

/* Order status chips ("Во достава", "Испорачано"), inferred for all statuses. */
.aloe-account mark.order-status,
.aloe-account .woocommerce-orders-table__cell-order-status {
	font-size: 12.5px !important;
	font-weight: 800;
}

.aloe-account .woocommerce-orders-table__row td.woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--accent);
}

.aloe-account .woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status,
.aloe-account .woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status,
.aloe-account .woocommerce-orders-table__row--status-pending td.woocommerce-orders-table__cell-order-status {
	color: #8a4a06;
}

.aloe-account .woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status,
.aloe-account .woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status,
.aloe-account .woocommerce-orders-table__row--status-refunded td.woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--danger);
}

.aloe-account .woocommerce-button,
.aloe-account .button {
	display: inline-flex;
	align-items: center;
	padding: 12px 18px;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--fast), color var(--wp--custom--motion--fast);
}

.aloe-account .woocommerce-button:hover,
.aloe-account .button:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.aloe-account button[type="submit"].button,
.aloe-account .woocommerce-Button[name="save_account_details"],
.aloe-account .woocommerce-Button[name="save_address"] {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	padding: 15px 28px;
	font-size: 15px;
}

.aloe-account button[type="submit"].button:hover {
	border-color: var(--wp--preset--color--secondary-dark);
	background: var(--wp--preset--color--secondary-dark);
}

/* Forms on account pages: two-column grid like the mockup. */
.aloe-account .woocommerce-EditAccountForm,
.aloe-account .woocommerce-address-fields,
.aloe-account form.login,
.aloe-account form.register,
.aloe-account form.lost_reset_password {
	padding: 26px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
}

.aloe-account .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 16px;
}

.aloe-account .form-row label {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--text-secondary);
}

.aloe-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.aloe-account .woocommerce-Address {
	float: none;
	width: auto;
	padding: 24px;
	border: 1.5px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
}

.aloe-account .woocommerce-Address:first-child {
	border-color: var(--wp--preset--color--accent);
}

.aloe-account .woocommerce-Address-title h2,
.aloe-account .woocommerce-Address-title h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11.5px !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.aloe-account .woocommerce-Address-title .edit {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--wp--preset--color--accent);
}

.aloe-account address {
	margin-top: 12px;
	font-size: 14px;
	font-style: normal;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary);
}

/* Logged-out My Account (login / register) and empty states. */
.aloe-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.aloe-account .u-columns.col2-set .col-1,
.aloe-account .u-columns.col2-set .col-2 {
	float: none;
	width: auto;
}

.aloe-account .woocommerce-info,
.aloe-account .woocommerce-message {
	padding: 16px 20px;
	border: 1px dashed #b4d5cb;
	border-radius: var(--wp--custom--radius--card-sm);
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--text-secondary);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 17. About
 * ------------------------------------------------------------------------ */

.aloe-about-story h2 {
	margin-bottom: 0;
}

.aloe-about-story .aloe-prose:first-of-type {
	margin-top: 18px;
}

.aloe-value.is-style-card {
	padding: 22px 22px 22px 22px !important;
	border-radius: 18px;
}

.aloe-value.aloe-perk {
	padding-top: 66px !important;
}

.aloe-value.aloe-perk::before {
	left: 22px;
	top: 22px;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	font-size: 16px;
}

.aloe-value__title {
	margin: 0;
}

.aloe-value__text {
	margin: 7px 0 0 !important;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-subtle);
}

.aloe-about-team {
	margin: 0 !important;
}

.aloe-stats-panel {
	padding: 28px;
	border-radius: var(--wp--custom--radius--panel);
}

.aloe-stats-panel .aloe-stat {
	padding: 0;
}

.aloe-stats-panel .aloe-stat__label {
	margin-top: 4px;
}

.aloe-stores {
	grid-template-columns: minmax(0, 420px) !important;
}

.aloe-store {
	padding: 24px !important;
}

.aloe-store > * {
	margin: 0 !important;
}

.aloe-store__meta {
	margin-top: auto !important;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wp--preset--color--text-subtle);
}

.aloe-store__meta p {
	margin: 0;
}

.aloe-store__phone a {
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
}

.aloe-ask-panel {
	padding: 38px !important;
}

.aloe-ask-panel h2,
.aloe-ask-panel p {
	margin-block-end: 0;
}

.aloe-faq__item {
	padding: 18px 20px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card-sm);
	background: var(--wp--preset--color--base);
}

.aloe-faq__q {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 14.5px !important;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0;
}

.aloe-faq__a {
	margin: 6px 0 0 !important;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-subtle);
}

.aloe-post-card .wp-block-post-title {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 18. Responsive
 * The export is desktop-only (min-width:1280px). Breakpoints below are
 * inferred from the same grid so every layout collapses predictably.
 * ------------------------------------------------------------------------ */

@media (max-width: 1180px) {
	.aloe-header__row {
		gap: 20px;
	}

	.aloe-picks {
		grid-template-columns: minmax(0, 1fr);
	}

	.aloe-picks__aside {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}

	.aloe-cat-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.aloe-subcat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {
	.aloe-cta-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.aloe-shop-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.aloe-shop-layout__filters {
		position: static;
	}

	.aloe-cat-explorer .aloe-cat-tiles {
		display: flex;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 6px;
	}

	.aloe-cat-tiles button {
		flex: 0 0 200px;
		scroll-snap-align: start;
	}

	.aloe-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	.aloe-account .woocommerce-MyAccount-navigation {
		position: static;
	}

	.aloe-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.aloe-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

@media (max-width: 900px) {
	.aloe-header__row {
		flex-wrap: wrap !important;
	}

	.aloe-search.wp-block-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
	}

	.aloe-header__ctas {
		display: none;
	}

	.aloe-newsletter,
	.aloe-page-banner {
		padding: 28px;
	}

	.aloe-subcat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.aloe-pdp__tags {
		left: 18px;
		top: 58px;
	}

	.aloe-gallery.wc-block-product-gallery {
		flex-direction: column-reverse;
	}

	.aloe-gallery .wc-block-product-gallery-thumbnails {
		flex: none;
		width: 100%;
		flex-direction: row;
	}

	.aloe-gallery .wc-block-product-gallery-thumbnails__thumbnail {
		width: 72px;
	}
}

@media (max-width: 782px) {
	.aloe-site-header {
		position: relative;
		top: auto;
	}

	.aloe-topbar__links {
		display: none;
	}

	.aloe-account-link .label {
		display: none;
	}

	.aloe-main-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 24px;
		background: var(--wp--preset--color--base-2);
	}

	.aloe-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 10px 0;
		font-size: 16px;
	}

	.aloe-main-nav .wp-block-navigation__responsive-container.is-menu-open .aloe-mega > .wp-block-navigation-item__content {
		font-weight: 800;
		color: var(--wp--preset--color--secondary);
	}

	.aloe-picks__aside {
		grid-template-columns: minmax(0, 1fr);
	}

	.aloe-stats-bar__cols {
		flex-wrap: wrap !important;
	}

	.aloe-stats-bar .aloe-stat + .aloe-stat {
		padding-left: 16px;
	}

	.aloe-steps li {
		font-size: 0;
		gap: 6px;
	}

	.aloe-steps li.is-current {
		font-size: 13px;
	}

	.aloe-login-drawer > summary {
		padding: 14px 7px;
	}

	.aloe-login-drawer[open] > summary {
		right: min(352px, calc(100vw - 48px));
	}

	.aloe-ask {
		right: 16px;
		bottom: 16px;
	}

	.aloe-ask > summary {
		width: 60px;
		height: 60px;
	}

	.aloe-account .woocommerce-Addresses,
	.aloe-account .u-columns.col2-set {
		grid-template-columns: minmax(0, 1fr);
	}

	.aloe-cat-tiles button {
		flex-basis: 160px;
	}

	.aloe-cat-tiles button::before {
		width: 96px;
		height: 96px;
	}
}

@media (max-width: 600px) {
	.aloe-subcat-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.aloe-brands__head,
	.aloe-marquee__track {
		padding-left: 20px;
		padding-right: 20px;
	}

	.aloe-toolbar {
		padding: 12px 14px;
	}

	.aloe-pdp__price .wc-block-components-product-price,
	.aloe-pdp__price.wc-block-components-product-price {
		font-size: 32px;
	}
}

/* ---------------------------------------------------------------------------
 * 19. Mobile (≤ 860px)
 * From the Claude Design mobile pass ("Pharmacy e-commerce homepage (9)",
 * export/mobile). The export hooks these rules on data-m attributes; here they
 * hang off the theme's existing class names, so no block markup changes and
 * the templates stay valid in the Site Editor.
 * ------------------------------------------------------------------------ */

@media (max-width: 860px) {
	/* Bestsellers (homepage) and the shop grid: one product per row. */
	.aloe-grid .wc-block-product-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Promo tiles, newsletter and the shop title block: text on top, the
	   image / form / figures below it. */
	.aloe-promo-card,
	.aloe-newsletter,
	.aloe-page-banner--shop {
		padding: 26px 22px !important;
	}

	.aloe-promo-card__inner,
	.aloe-newsletter {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 20px !important;
	}

	.aloe-promo-card__inner > *,
	.aloe-newsletter > * {
		width: 100% !important;
		max-width: 100% !important;
	}

	.aloe-promo-card__media img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
	}

	/* Footer bottom bar: the © line on its own full-width row, links and
	   payment badges below it. */
	.aloe-footer__bottom > .wp-block-group {
		flex-direction: column;
		align-items: flex-start;
	}

	.aloe-footer__bottom > .wp-block-group > * {
		width: 100%;
	}

	/* Product gallery: thumbnails in a row under the main image, sharing the
	   width evenly. The column-reverse itself is set at 900px above. */
	.aloe-gallery .wc-block-product-gallery-thumbnails {
		gap: 10px !important;
	}

	.aloe-gallery .wc-block-product-gallery-thumbnails__thumbnail {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}

	/* Shop filters: collapsed behind the "Филтри" toggle that
	   assets/js/shop-filters.js adds. The script sets .is-collapsible, so
	   without JavaScript the filters simply stay open. */
	.aloe-shop-layout__filters.is-collapsible:not(.is-open) > :not(.aloe-filter-toggle--open) {
		display: none !important;
	}

	.aloe-shop-layout__filters.is-open > .aloe-filter-toggle--open {
		margin-bottom: 14px;
	}

	/* WooCommerce turns the filters into its own full-screen drawer below
	   601px. The toggle above already does that job, so keep the filters
	   inline there too (WooCommerce's own ≥601px rules, repeated). */
	.aloe-filters .wc-block-product-filters__open-overlay,
	.aloe-filters .wc-block-product-filters__overlay-header,
	.aloe-filters .wc-block-product-filters__overlay-footer {
		display: none !important;
	}

	.aloe-filters.wc-block-product-filters {
		display: flex;
	}

	.aloe-filters .wc-block-product-filters__overlay {
		position: relative;
		inset: 0;
		flex-grow: 1;
		background: inherit;
		pointer-events: auto;
		transition: none;
	}

	.aloe-filters .wc-block-product-filters__overlay-wrapper {
		width: auto;
		height: auto;
	}

	.aloe-filters .wc-block-product-filters__overlay-dialog {
		position: relative;
		background: inherit;
		transform: none;
	}

	.aloe-filters .wc-block-product-filters__overlay-content {
		overflow: visible;
		padding: 0;
	}
}

/* Tablet (768px to 1024px): bestsellers (homepage) keep the desktop grid but
   with three products per row. Comes after the ≤860px block so it overrides
   its one-per-row rule on portrait tablets. */
@media (min-width: 768px) and (max-width: 1024px) {
	.aloe-grid--home .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

.aloe-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 18px;
	border: 1.5px solid var(--wp--preset--color--border-input);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--base);
	font: inherit;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.aloe-filter-toggle--apply {
	margin-top: 14px;
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

/* The toggle is mobile-only. */
@media (min-width: 861px) {
	.aloe-filter-toggle {
		display: none !important;
	}
}

/* Breadcrumbs (all sizes): wrap onto a second row cleanly instead of breaking
   mid-trail. Markup from woocommerce/global/breadcrumb.php. */
.aloe-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #647a73;
}

.aloe-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	color: #647a73;
	text-decoration: none;
}

.aloe-breadcrumb a:hover {
	color: #f7941e;
}

.aloe-breadcrumb .sep {
	color: #a8bfb8;
}

.aloe-breadcrumb .current {
	font-weight: 700;
	color: #2b5449;
}