/*
Theme Name: Aura Shop
Theme URI: http://localhost:8080
Description: Минималистична тема за козметичен магазин — бял хедър с лого в средата, 4 продукта на ред, цени в евро и лева.
Author: Claude
Template: storefront
Version: 1.0
Text Domain: aura-shop
*/

/* ============================================================
   1. Основа
   ============================================================ */

:root {
	--ink: #000;
	--muted: #767676;
	--line: #ececec;
	--sale: #e81225;
	--soft: #faf7f5;
	--wrap: 1400px;
	--btn-radius: 999px; /* заобляне на всички бутони, на едно място */
}

body,
button,
input,
select,
textarea,
.site-header,
h1, h2, h3, h4, h5, h6 {
	font-family: "Jost", "Segoe UI", Arial, sans-serif;
}

body {
	background: #fff;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.6;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--muted); }

.site-content,
.col-full {
	max-width: var(--wrap);
	padding-left: 24px;
	padding-right: 24px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Storefront-ът слага рамки и сенки навсякъде — махаме ги */
.site-header,
.site-footer,
.storefront-breadcrumb {
	box-shadow: none;
	border: 0;
}

/* ============================================================
   2. Хедър
   ============================================================ */

.site-header {
	background: #fff !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 200;
	transition: box-shadow .25s ease;
}

/*
 * Storefront слага целия хедър в обвивка с максимална ширина 1400px, затова
 * черната лента не стигаше до ръба на широк екран. Обвивката става на цял
 * екран, а вътрешните ленти сами се ограничават.
 */
.site-header .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* сянка се появява чак когато страницата е превъртяна */
.site-header.is-stuck {
	box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
	border-bottom-color: transparent;
}

.aura-topbar {
	background: #000;
	color: #fff;
	font-size: 11.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.aura-topbar__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.aura-topbar a { color: #fff; }

.aura-bar {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
	height: 69px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

.aura-bar__left,
.aura-bar__right {
	display: flex;
	align-items: center;
	gap: 18px;
}

.aura-bar__right { justify-content: flex-end; }

/*
 * Иконите стоят в меко кръгче — като тънки контури върху бяло се губеха
 * и не личеше, че са бутони.
 */
.aura-icon {
	background: var(--soft);
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background .2s ease, color .2s ease;
}

.aura-icon:hover {
	background: var(--ink);
	color: #fff;
}

.aura-icon svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.aura-logo {
	text-align: center;
	display: block;
}

.aura-logo__mark {
	font-size: 26px;
	letter-spacing: .34em;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1;
	padding-left: .34em;
}

.aura-logo__sub {
	display: block;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 4px;
	padding-left: .3em;
}

/* броячът стои в ъгъла на торбичката, не до нея */
.aura-cart { position: relative; }

.aura-cart svg { width: 21px; height: 21px; }

.aura-cart-count {
	position: absolute;
	top: -1px;
	right: -3px;
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	background: var(--ink);
	color: #fff;
	border: 2px solid #fff;
	border-radius: 100px;
	min-width: 8px;
	height: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	box-sizing: content-box;
}

/* празна количка — без кръгче */
.aura-cart-count.is-empty { display: none; }

/* навигация с категориите */
.aura-nav {
	border-top: 1px solid var(--line);
}

.aura-nav__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
}

.aura-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
}

.aura-nav a {
	position: relative;
	display: block;
	padding: 14px 0;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #3a3a3a;
	transition: color .2s ease;
}

/* тънка черта, която се разтваря от средата навън */
.aura-nav a::after {
	content: '';
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 8px;
	height: 1.5px;
	background: var(--ink);
	transition: left .25s ease, right .25s ease;
}

.aura-nav a:hover { color: var(--ink); }
.aura-nav a:hover::after { left: 0; right: 0; }

/* текущата категория стои подчертана */
.aura-nav a.is-current { color: var(--ink); }
.aura-nav a.is-current::after { left: 0; right: 0; }

/*
 * Падащо подменю за „Грим“ и „Грижа“. Отваря се и с мишка, и с клавиатура
 * (focus-within), защото само hover изключва хората, които ползват Tab.
 * На телефон менюто изобщо не се показва — там работи чекмеджето.
 */
.aura-nav__has { position: relative; }

.aura-nav__has > a { display: flex; align-items: center; gap: 6px; }

.aura-nav__caret {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}

.aura-nav__has:hover .aura-nav__caret,
.aura-nav__has:focus-within .aura-nav__caret { transform: rotate(180deg); }

.aura-subnav {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	z-index: 60;
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	min-width: 230px;
	padding: 8px 0 !important;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .35);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.aura-nav__has:hover > .aura-subnav,
.aura-nav__has:focus-within > .aura-subnav {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.aura-subnav li { width: 100%; }

.aura-subnav a {
	padding: 9px 20px !important;
	text-transform: none;
	letter-spacing: .01em;
	font-size: 13.5px;
	color: #444;
	white-space: nowrap;
}

.aura-subnav a::after { display: none; }
.aura-subnav a:hover { background: var(--soft); color: var(--ink); }
.aura-subnav a.is-current { color: var(--ink); font-weight: 500; }

/*
 * Голямо меню (стил Notino). Панелът е на цялата ширина на хедъра, затова
 * .aura-nav е опорната точка, а самите <li> остават без position.
 * Затварянето е със закъснение от 120ms, за да не трепти, когато мишката
 * мине през процепа между реда и панела.
 */
.aura-nav { position: relative; }

.aura-nav__list { gap: 4px 22px !important; }

.aura-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 80;
	background: #fff;
	border-top: 1px solid var(--line);
	box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .16s ease .12s, transform .16s ease .12s, visibility 0s linear .28s;
}

.aura-mega__has:hover > .aura-mega,
.aura-mega__has:focus-within > .aura-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .16s ease .08s, transform .16s ease .08s, visibility 0s;
}

/* посоченият раздел стои подчертан, докато панелът му е отворен */
.aura-mega__has:hover > a { color: var(--ink); }
.aura-mega__has:hover > a::after { left: 0; right: 0; }

.aura-mega__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 28px 24px 22px;
	max-height: calc(100vh - 210px);
	overflow-y: auto;
}

/* колони като във вестник: групите се подреждат сами и не се разкъсват */
.aura-mega__cols { column-width: 215px; column-gap: 34px; }

.aura-mega__group {
	break-inside: avoid;
	padding-bottom: 20px;
	text-align: left;
}

.aura-nav .aura-mega a {
	display: block;
	padding: 4px 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13.5px;
	line-height: 1.35;
	color: #555;
}

.aura-nav .aura-mega a::after { display: none; }
.aura-nav .aura-mega a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.aura-nav .aura-mega a.aura-mega__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	padding-bottom: 7px;
}

.aura-nav .aura-mega a.is-current { color: var(--ink); font-weight: 600; }

.aura-nav .aura-mega a.aura-mega__all {
	display: inline-block;
	margin-top: 2px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	width: 100%;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	text-align: left;
}

/* търсачка, която пада отгоре */
.aura-search {
	display: none;
	border-top: 1px solid var(--line);
	background: #fff;
	padding: 22px 24px;
}

.aura-search.is-open { display: block; }

.aura-search__inner {
	max-width: 620px;
	margin: 0 auto;
	position: relative;
}

.aura-search form {
	display: flex;
	border-bottom: 1px solid var(--ink);
}

/* ---- живо търсене: списъкът пада под полето ---- */

.aura-search__results {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 10px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .1);
	overflow: hidden;
	z-index: 300;
	max-height: 70vh;
	overflow-y: auto;
}

.aura-search__item {
	display: grid;
	grid-template-columns: 46px 1fr auto;
	align-items: center;
	gap: 13px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

.aura-search__item:last-of-type { border-bottom: 0; }

.aura-search__item:hover,
.aura-search__item.is-active { background: var(--soft); }

.aura-search__item img,
.aura-search__noimg {
	width: 46px;
	height: 46px;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
	display: block;
}

.aura-search__name {
	font-size: 13.5px;
	line-height: 1.35;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.aura-search__sale {
	background: var(--sale);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 100px;
	padding: 2px 7px;
}

.aura-search__price {
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.aura-search__all {
	display: block;
	padding: 12px 14px;
	text-align: center;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--soft);
	border-top: 1px solid var(--line);
}

.aura-search__all:hover,
.aura-search__all.is-active { background: #f0ebe7; }

.aura-search__empty {
	margin: 0;
	padding: 18px 14px;
	text-align: center;
	font-size: 13.5px;
	color: var(--muted);
}

.aura-search input[type="search"] {
	flex: 1;
	border: 0;
	background: none;
	font-size: 16px;
	padding: 8px 0;
	outline: none;
}

.aura-search button {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* странично меню на телефон */
.aura-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: 300px;
	max-width: 85vw;
	background: #fff;
	transform: translateX(-100%);
	transition: transform .25s ease;
	z-index: 400;
	padding: 24px;
	overflow-y: auto;
	box-shadow: 0 0 40px rgba(0,0,0,.12);
}

.aura-drawer.is-open { transform: none; }

.aura-drawer ul { list-style: none; margin: 0; padding: 0; }
.aura-drawer li { border-bottom: 1px solid var(--line); }
.aura-drawer a { display: block; padding: 13px 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* акордеон с категориите в чекмеджето */
.aura-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 0;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.aura-acc > summary::-webkit-details-marker { display: none; }

.aura-acc > summary::after {
	content: '';
	width: 7px;
	height: 7px;
	margin-right: 4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.aura-acc[open] > summary::after { transform: rotate(-135deg); }

.aura-acc[open] { padding-bottom: 8px; }

.aura-drawer .aura-acc a,
.aura-acc--sub > summary {
	padding: 9px 0 9px 14px;
	font-size: 13.5px;
	letter-spacing: 0;
	text-transform: none;
	color: #444;
}

.aura-drawer .aura-acc--sub a { padding-left: 28px; color: #666; }
.aura-drawer .aura-acc a.aura-acc__all { color: var(--ink); font-weight: 600; }

.aura-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
	z-index: 300;
}

.aura-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ============================================================
   3. Начална страница
   ============================================================ */

/* секция, която излиза от рамката и заема цялата ширина на екрана */
.aura-fullbleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/*
 * Банерът. Подредбата е същата като първия — надпис в средата, един ред
 * текст, един овален бутон. Смененото е фонът: вместо плосък преход
 * (синьо → бежово → розово) отзад стоят четири размити светлинни петна,
 * а точно зад надписа има бяло сияние. Отгоре минава фина зърнистост.
 *
 * СТАРИЯТ ФОН, ако трябва да се върне:
 *   background: linear-gradient(120deg, #cfe4f2 0%, #f4e6dd 55%, #f7dfe2 100%);
 *   .aura-hero em { background: #ffe600; padding: 0 .12em; }
 */
.aura-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* основата е чисто бяла — същото бяло като останалата страница */
	background: #fff;
	color: #1f150c;
	min-height: 440px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 60px 24px;
}

/*
 * Есенното оранжево стои като облак в средата и се стопява към бялото.
 * Маската е това, което маха ръба: към всички краища слоят изчезва,
 * така че банерът се влива в бялата страница отгоре и отдолу.
 */
.aura-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	filter: blur(70px);
	/*
	 * Радиусите са точно 50% — така прозрачното пада НА краищата на банера,
	 * а не извън тях. Иначе overflow:hidden отрязва цвета и отстрани
	 * се вижда ръб вместо преливане.
	 */
	-webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 0, #000 34%, rgba(0,0,0,.66) 66%, transparent 100%);
	mask-image: radial-gradient(50% 50% at 50% 50%, #000 0, #000 34%, rgba(0,0,0,.66) 66%, transparent 100%);
}

.aura-hero__glow i {
	position: absolute;
	display: block;
	border-radius: 50%;
}

/* цялата среда е оранжева; зад самия надпис е малко по-светло, за да се чете */
.aura-hero__glow i:nth-child(1) { width: 48%; height: 64%; left: 6%;   top: 18%; background: #dd8434; }
.aura-hero__glow i:nth-child(2) { width: 48%; height: 64%; right: 6%;  top: 18%; background: #e39548; }
.aura-hero__glow i:nth-child(3) { width: 54%; height: 56%; left: 23%;  top: 22%; background: #eca55a; }
.aura-hero__glow i:nth-child(4) { width: 42%; height: 32%; left: 29%;  top: 34%; background: #f8d3a6; }

/*
 * Зърнистостта отделя „направено“ от „плосък CSS преход“, но върви
 * със същата маска като цвета. Иначе, понеже е с режим „умножаване“,
 * потъмнява и белите краища и банерът се вижда като правоъгълник
 * върху бялата страница.
 */
.aura-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: .05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	-webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 0, #000 30%, transparent 100%);
	mask-image: radial-gradient(50% 50% at 50% 50%, #000 0, #000 30%, transparent 100%);
}

.aura-hero__inner {
	position: relative;
	z-index: 3;
	max-width: 660px;
}

/* банерът опира до хедъра — Storefront слага 63px отстояние отдолу */
body.aura-front .site-header { margin-bottom: 0 !important; }

.aura-hero__eyebrow {
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #935f2a;
	margin: 0 0 20px;
}

.aura-hero h1 {
	font-size: clamp(38px, 6vw, 70px);
	line-height: 1.04;
	margin: 0;
	font-weight: 600;
	letter-spacing: -.025em;
	text-wrap: balance;
}

/* „сияние“ в преход от печена глина към кехлибар */
.aura-hero em {
	font-style: italic;
	font-weight: 400;
	background: linear-gradient(95deg, #a8400b, #cf7118 55%, #b23c10);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.aura-hero__lead {
	font-size: 16px;
	line-height: 1.7;
	margin: 22px auto 30px;
	max-width: 44ch;
	color: #40301e;
}

.aura-btn {
	display: inline-block;
	background: #000 !important;
	color: #fff !important;
	padding: 14px 34px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 0;
	border-radius: var(--btn-radius);
}

.aura-btn:hover { background: #333 !important; color: #fff !important; }

/*
 * Секциите на началната страница стоят вътре в .col-full, който вече дава
 * 24 пиксела отстрани. Собствено отстояние тук означаваше двойно: на
 * телефон продуктите оставаха с 72 пиксела бял кант и мрежата не се
 * побираше, а на страница „Магазин“ същите карти бяха с 48. Сега двете
 * страници са подравнени.
 */
.aura-section {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 62px 0 0;
}

.aura-section__title {
	text-align: center;
	font-size: 22px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0 0 34px;
}

/* лента с марки */
/*
 * Отстоянието отгоре е малко нарочно: банерът вече свършва в бяло,
 * така че 62 пиксела отгоре се събираха с избледняването и между
 * снимката и логата оставаше празнина от над 150 пиксела.
 */
.aura-brands {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-top: 16px;
	padding: 24px 24px 28px;
}

/*
 * Стена от марки. Всички лога са изравнени по оптическа тежест и седят
 * на еднакво по размер платно, затова мрежата е равна. 32 марки се делят
 * точно на 8 колони по 4 реда — без недовършен последен ред.
 */
.aura-brands__row {
	max-width: var(--wrap);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 4px 12px;
	align-items: center;
	justify-items: center;
}

.aura-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 170px;
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #9a9a9a;
	white-space: nowrap;
	transition: color .25s ease;
}

.aura-brands__item:hover { color: var(--ink); }

.aura-brands__item img {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(1);
	opacity: .58;
	transition: opacity .25s ease, filter .25s ease;
}

.aura-brands__item:hover img { filter: none; opacity: 1; }

/* абонамент */
.aura-newsletter {
	background: var(--soft);
	margin-top: 70px;
	padding: 62px 24px;
	text-align: center;
}

.aura-newsletter h2 {
	font-size: 24px;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 10px;
	font-weight: 500;
}

.aura-newsletter p { color: var(--muted); margin: 0 0 26px; }

.aura-newsletter form {
	max-width: 480px;
	margin: 0 auto;
	display: flex;
	gap: 10px;
}

.aura-newsletter input {
	flex: 1;
	border: 1px solid #ddd;
	background: #fff;
	padding: 13px 16px;
	font-size: 14px;
	border-radius: 0;
}

/* ============================================================
   4. Продуктова решетка
   ============================================================ */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 42px 26px;
	margin: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/*
 * Картата е колона, за да може бутонът да се залепи най-долу. Иначе
 * бутоните в един ред стоят на различна височина — заглавията и цените
 * са различно дълги (едни продукти имат намаление, други не).
 */
.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	/* име, цена и бележката за доставка стоят центрирани в картата */
	text-align: center;
	/*
	 * Без това колоната не може да падне под най-широкото неделимо нещо в
	 * картата (надписът на бутона с white-space: nowrap) и мрежата изтича
	 * надясно извън рамката. min-width: 0 я държи точно 1fr.
	 */
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.woocommerce ul.products li.product > a:not(.button) {
	display: block;
}

/*
 * Внесените снимки са изрязани плътно до продукта (пълнеж 92–98%), но формите
 * им са различни — от 1,15 (широка самобръсначка) до 0,24 (висока тънка туба).
 * Квадратната кутия изравнява ДЪЛГАТА страна на всяка снимка към 100% от нея,
 * така че всички продукти се виждат в един мащаб.
 * „cover“ тук режеше: при съотношение 0,24 от тубата оставаше само средата.
 */
.woocommerce ul.products li.product a img {
	margin: 0 0 14px;
	background: #fff;
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: contain;
	padding: 12px;
	box-sizing: border-box;
	transition: opacity .25s ease;
}

.woocommerce ul.products li.product:hover a img { opacity: .82; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px !important;
	line-height: 1.45;
	font-weight: 400;
	padding: 0;
	margin: 0 0 6px;
	color: var(--ink);
	min-height: 40px;
}

.woocommerce ul.products li.product .price {
	font-size: 14px;
	color: var(--ink) !important;
	display: block;
	margin: 0;
	font-weight: 500;
}

.woocommerce ul.products li.product .price del {
	color: var(--muted);
	font-weight: 400;
	opacity: 1;
	margin-right: 8px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 500;
}

.aura-delivery {
	display: block;
	font-size: 11.5px;
	color: var(--muted);
	margin-top: 8px;
	letter-spacing: .02em;
}

/* червеният етикет за намаление */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--sale) !important;
	color: #fff !important;
	border-radius: 100px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 7px 11px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	margin: 0 !important;
	text-transform: none !important;
	z-index: 5;
}

.woocommerce ul.products li.product .button {
	background: #000 !important;
	color: #fff !important;
	border-radius: var(--btn-radius) !important;
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 12px 16px;
	/* auto = залепва бутона за дъното, така всички в реда са на една линия */
	margin-top: auto;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

/* разстоянието над бутона не бива да изчезва при по-висока карта */
.woocommerce ul.products li.product .aura-delivery { margin-bottom: 14px; }

/*
 * След добавяне WooCommerce слага връзка "Преглед на количката" под бутона.
 * Крием я — вместо нея показваме червен бутон за премахване НА МЯСТОТО на
 * черния, за да не се разминават височините на картите в реда.
 */
.woocommerce ul.products li.product .added_to_cart { display: none !important; }

.woocommerce ul.products li.product .aura-remove {
	display: none;
	margin-top: auto;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--sale) !important;
	color: #fff !important;
	border-radius: var(--btn-radius) !important;
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 12px 16px;
	cursor: pointer;
}

.woocommerce ul.products li.product .aura-remove:hover {
	background: #c20f1f !important;
	color: #fff !important;
}

.woocommerce ul.products li.product .aura-remove.is-busy {
	opacity: .6;
	pointer-events: none;
}

/* щом продуктът е в количката, черният бутон отстъпва на червения */
.woocommerce ul.products li.product.aura-in-cart .aura-remove { display: block; }
.woocommerce ul.products li.product.aura-in-cart .add_to_cart_button { display: none !important; }

.woocommerce ul.products li.product .button:hover { background: #333 !important; }

/* ============================================================
   5. Вътрешни страници
   ============================================================ */

.woocommerce-products-header,
.entry-header .entry-title,
.page-template-default .entry-title {
	text-align: center;
}

.woocommerce-products-header__title,
.entry-title {
	font-size: 26px !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 500;
}

/*
 * Storefront оставя огромни празнини на страниците с продукти:
 * пътеката отгоре носи 77 пиксела под себе си, а заглавието — още 124.
 * Затова заглавието стоеше само в бяло поле, а продуктите падаха ниско.
 */
.storefront-breadcrumb {
	padding: 12px 0 !important;
	margin: 0 0 18px !important;
}

.storefront-full-width-content .woocommerce-products-header,
.woocommerce-products-header {
	padding-bottom: 0 !important;
	margin: 0 0 26px !important;
}

/* логото на марката беше 34 пиксела високо — губеше се над името */
.tax-product_brand .woocommerce-products-header img.brand-thumbnail {
	max-height: 64px;
	width: auto;
	margin: 0 auto 14px;
}

/* лентата с подреждането: сортиране вляво, брой резултати вдясно */
.storefront-sorting {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 14px 0;
	margin: 0 0 30px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

/*
 * WooCommerce слага празен <div> за известия точно в тази лента.
 * Като flex елемент той изяждаше едно място и избутваше падащото меню
 * към средата — затова празният се скрива.
 */
.storefront-sorting .woocommerce-notices-wrapper:empty { display: none; }

/* ако все пак има съобщение, то заема цял ред над подреждането */
.storefront-sorting .woocommerce-notices-wrapper { flex: 0 0 100%; }

/* страниците (1, 2, 3) стоят само под продуктите, не и над тях */
.storefront-sorting:has(+ ul.products) .woocommerce-pagination { display: none; }

ul.products + .storefront-sorting {
	justify-content: center;
	border-bottom: 0;
	border-top: 1px solid var(--line);
	margin: 52px 0 0;
	padding: 26px 0 0;
}

ul.products + .storefront-sorting .woocommerce-ordering,
ul.products + .storefront-sorting .woocommerce-result-count { display: none; }

/*
 * Когато продуктите се събират на една страница, долната лента няма
 * какво да покаже — оставаше само сива черта и 79 празни пиксела
 * под последния ред. Тогава я махаме изцяло.
 */
ul.products + .storefront-sorting:not(:has(nav.woocommerce-pagination)) { display: none; }

/* „auto“ вляво го долепя до десния край, независимо какво има преди него */
.woocommerce .woocommerce-result-count {
	margin: 0 0 0 auto !important;
	font-size: 13px;
	color: var(--muted);
	float: none;
}

.woocommerce .woocommerce-ordering {
	margin: 0 !important;
	float: none;
}

/* на телефон двете падат едно под друго — тогава броят тръгва отляво */
@media (max-width: 768px) {
	.woocommerce .woocommerce-result-count { margin-left: 0 !important; }
}

.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 13px;
	background: #fff;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 6px;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	min-width: 38px;
	padding: 9px 6px;
	font-size: 13px;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: #000;
	color: #fff;
	border-color: #000;
}

.woocommerce div.product .product_title {
	font-size: 28px;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce div.product p.price {
	color: var(--ink);
	font-size: 22px;
	font-weight: 500;
}

.woocommerce div.product .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
	background: #000 !important;
	color: #fff !important;
	border-radius: var(--btn-radius) !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 12.5px;
	padding: 15px 28px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: var(--btn-radius) !important;
	background: #000;
	color: #fff;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 12px;
}

/* ============================================================
   6. Плаваща количка (Modern Cart) — в тон с останалия дизайн
   ============================================================ */

#moderncart-floating-cart .moderncart-floating-cart-button {
	background: #000 !important;
	color: #fff !important;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}

#moderncart-floating-cart .moderncart-floating-cart-button:hover {
	background: #333 !important;
}

#moderncart-floating-cart .moderncart-floating-cart-count {
	background: var(--sale) !important;
	color: #fff !important;
	font-weight: 700;
}

/* втори бутон в панела — светъл, за да не спори с черния "Към касата" */
.aura-keep-shopping {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 13px 16px;
	background: #fff;
	color: var(--ink);
	border: 1.5px solid var(--line);
	border-radius: var(--btn-radius);
	font-family: inherit;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}

.aura-keep-shopping:hover {
	border-color: var(--ink);
	background: var(--soft);
}

/*
 * "Премахни" в панела става червено кръгче с ✕ в горния ляв ъгъл на реда.
 * Текстът се крие с font-size:0, а знакът идва от ::before със свой размер.
 */
[class*="moderncart"] .moderncart-cart-item { position: relative; }

[class*="moderncart"] .moderncart-cart-item-actions-remove {
	position: absolute;
	top: 12px;
	left: 0;
	z-index: 3;
	font-size: 0 !important;
	line-height: 0 !important;
	box-sizing: border-box;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	min-height: 22px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--sale) !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	transition: background .2s ease, transform .2s ease;
}

[class*="moderncart"] .moderncart-cart-item-actions-remove::before {
	content: '✕';
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

[class*="moderncart"] .moderncart-cart-item-actions-remove:hover {
	background: #b80f1d !important;
	transform: scale(1.08);
}

/* мястото, където стоеше надписът, вече не трябва да заема ред */
[class*="moderncart"] .moderncart-cart-item-actions { min-height: 0; }

/* етикетът "Промоция!" върху снимката в панела — излишен, цената и без това
   е зачертана, а червеният етикет в магазина върши тази работа */
[class*="moderncart"] .moderncart-cart-item-onsale { display: none !important; }

/* бутоните в страничния панел — черни, не сини */
[class*="moderncart"] .checkout-button,
[class*="moderncart"] .moderncart-empty-cart-button,
[class*="moderncart"] a.button,
[class*="moderncart"] button.checkout-button {
	background: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #000 !important;
	border-radius: var(--btn-radius) !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 12.5px;
}

[class*="moderncart"] .checkout-button:hover,
[class*="moderncart"] .moderncart-empty-cart-button:hover,
[class*="moderncart"] a.button:hover {
	background: #333 !important;
	color: #fff !important;
}

/* ============================================================
   7. Футър
   ============================================================ */

/*
 * Storefront слага и футъра в обвивка с максимална ширина, затова лентата
 * с обещанията и футърът оставаха с бели полета отстрани — както беше и
 * с черната лента в хедъра. Обвивката става на цял екран.
 */
.site-footer .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Storefront боядисва целия футър в сиво (#f0f0f0). Самият футър е бял,
 * затова сивото се виждаше само в процепа над лентата с обещанията и
 * най-отдолу — четеше се като сива ивица под последните продукти.
 * Футърът става бял; цвят внася само лентата.
 */
.site-footer {
	background: #fff;
	padding-top: 0;
	padding-bottom: 0;
}

/* лента с трите обещания, точно над футъра */
.aura-benefits {
	margin-top: 56px;
	padding: 34px 24px;
	background: var(--soft);
}

/*
 * На количката и касата съдържанието свършва с бяла кутия, а под нея
 * Storefront добавя още 63 + 39 пиксела отстояние. Заедно с 80-те отгоре
 * се получаваше голяма дупка до лентата с обещанията.
 */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-cart .site-main .type-page,
.woocommerce-checkout .site-main .type-page { margin-bottom: 0; }

.woocommerce-cart .aura-benefits,
.woocommerce-checkout .aura-benefits { margin-top: 40px; }

.aura-benefits__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.aura-benefit {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.aura-benefit__mark {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
}

.aura-benefit__mark svg {
	width: 15px;
	height: 15px;
	stroke: #fff;
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.aura-benefit .t {
	margin: 2px 0 2px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .02em;
}

.aura-benefit .s {
	margin: 0;
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.5;
}

.aura-footer {
	border-top: 1px solid var(--line);
	padding: 56px 24px 0;
	background: #fff;
}

.aura-footer__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1.6fr 1fr 1.1fr;
	gap: 40px;
}

.aura-footer__brand p {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--muted);
	max-width: 260px;
}

.aura-logo--footer { text-align: left; }
.aura-logo--footer .aura-logo__mark { font-size: 22px; }
.aura-logo--footer .aura-logo__sub { margin-top: 5px; }

.aura-footer h3 {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 0 0 20px;
	font-weight: 600;
	color: var(--ink);
}

.aura-footer ul { list-style: none; margin: 0; padding: 0; }
.aura-footer li { margin-bottom: 10px; }

.aura-footer a,
.aura-footer p { font-size: 13px; color: #5a5a5a; }

.aura-footer a,
.aura-benefits a {
	position: relative;
	text-decoration: none !important;
	transition: color .2s ease;
}

.aura-footer a:hover { color: var(--ink); }

.aura-footer__cats ul { columns: 2; column-gap: 24px; }

/* подкатегориите се отместват, за да личи кое под кое стои */
.aura-footer__subcat a { padding-left: 12px; color: var(--muted); }
.aura-footer__subcat a:hover { color: var(--ink); }

/* чекмеджето на телефон — същото отместване */
.aura-drawer__sub a { padding-left: 34px !important; color: var(--muted); font-size: 13px; }

.aura-footer__contacts p { margin: 0 0 14px; line-height: 1.6; }
.aura-footer__contacts .l {
	display: block;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 3px;
}

.aura-footer__bottom {
	max-width: var(--wrap);
	margin: 48px auto 0;
	border-top: 1px solid var(--line);
	padding: 22px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 11.5px;
	color: var(--muted);
	letter-spacing: .02em;
}

/* ============================================================
   8. Телефон и таблет
   ============================================================ */

@media (max-width: 1100px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
	.aura-footer__inner { grid-template-columns: 1fr 1fr; gap: 34px; }
	.aura-footer__brand { grid-column: 1 / -1; }
	.aura-footer__brand p { max-width: none; }
}

/*
 * На телефон 21 лога в мрежа стават 7 реда — висок и скучен блок.
 * Затова се превръщат в плъзгащ се ред на две нива: пръстът бута настрани,
 * логата остават едри, а секцията пада от ~400 на ~150 пиксела.
 */
@media (max-width: 900px) {
	.aura-brands { position: relative; }

	.aura-brands__row {
		max-width: none;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: 132px;
		gap: 10px 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 2px;
	}

	.aura-brands__row::-webkit-scrollbar { display: none; }

	.aura-brands__item {
		max-width: 132px;
		scroll-snap-align: start;
	}

	/* марките са нечетен брой — последната би увиснала горе сама,
	   затова заема двата реда и се центрира */
	.aura-brands__row > :last-child:nth-child(odd) {
		grid-row: span 2;
		align-self: center;
	}

	/* бледо преливане вдясно — намек, че редът продължава */
	.aura-brands::after {
		content: '';
		position: absolute;
		top: 1px;
		right: 0;
		bottom: 1px;
		width: 40px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 72%);
		pointer-events: none;
	}
}

@media (max-width: 768px) {
	.aura-nav { display: none; }
	.aura-topbar { font-size: 10.5px; letter-spacing: .04em; }
	.aura-topbar__inner { padding: 7px 14px; justify-content: center; gap: 16px; }
	.storefront-sorting { gap: 10px 0; }
	.woocommerce .woocommerce-ordering select { max-width: 100%; }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
	.aura-hero { min-height: 340px; }
	.aura-logo__mark { font-size: 20px; letter-spacing: .26em; }
	.aura-footer__inner { grid-template-columns: 1fr; gap: 30px; }
	.aura-footer__cats ul { columns: 2; }
	.aura-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }

	/* предимствата едно под друго */
	.aura-benefits { margin-top: 40px; padding: 26px 24px; }
	.aura-benefits__inner { grid-template-columns: 1fr; gap: 18px; }

	/*
	 * В карта от 134 пиксела бележката за доставка не се събира на един ред
	 * при никакъв четим размер. balance разпределя двата реда по равно,
	 * за да не увисва само „дни“ отдолу.
	 */
	.aura-delivery { text-wrap: balance; }

	/* надписът на бутона да не се пречупва на два реда в тясна карта —
	   овалът изглежда добре само когато текстът е на един ред */
	.woocommerce ul.products li.product .button {
		font-size: 9.5px;
		letter-spacing: 0;
		padding: 13px 6px;
		white-space: nowrap;
	}
	.aura-newsletter form { flex-direction: column; }
	.aura-section { padding-top: 46px; }
}

@media (min-width: 769px) {
	.aura-bar__burger { display: none; }
}

/* ============================================================
   9. Статични страници — Контакти и Общи условия
   ============================================================ */

/* Дълъг текст на 1400 пиксела не се чете, затова тези страници
   се стесняват до една колона и заглавието им застава в средата. */
body.aura-doc .entry-header { text-align: center; margin-bottom: 26px; }
body.aura-doc .entry-title { margin: 0; }
body.aura-doc .entry-header::after {
	content: '';
	display: block;
	width: 46px;
	height: 2px;
	background: var(--ink);
	margin: 16px auto 0;
}

.aura-page {
	max-width: 820px;
	margin: 0 auto;
	padding-bottom: 24px;
}
.aura-page p { line-height: 1.8; }
.aura-page a { text-decoration: underline; text-underline-offset: 3px; }
.aura-page h2 {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .02em;
	margin: 40px 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.aura-lead {
	font-size: 17px;
	line-height: 1.7;
	color: var(--muted);
	text-align: center;
	max-width: 660px;
	margin: 0 auto 38px;
}

.aura-contact-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 10px;
}
.aura-contact-card {
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 22px 20px;
	text-align: center;
}
.aura-contact-card .l {
	display: block;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}
.aura-contact-card .v {
	display: block;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
}
.aura-contact-card a.v:hover { color: var(--muted); }
.aura-contact-card p {
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.55;
	margin: 8px 0 0;
}

.aura-steps { margin: 0; padding-left: 20px; }
.aura-steps li { margin-bottom: 8px; line-height: 1.7; }

/* Карето с данните на фирмата — пълни се от меню „Данни на фирмата“ */
.aura-firma {
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px 26px;
	margin: 26px 0;
}
.aura-firma ul { list-style: none; margin: 0; padding: 0; }
.aura-firma li {
	display: flex;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.aura-firma li:last-child { border-bottom: 0; padding-bottom: 0; }
.aura-firma .l { flex: 0 0 168px; color: var(--muted); }
.aura-firma .v { flex: 1; }
.aura-firma a { text-decoration: none; }

/* Стои на мястото на непопълнено фирмено поле, за да личи какво липсва */
.aura-todo {
	background: #fff5cc;
	color: #8a6d00;
	border: 1px dashed #e0b400;
	border-radius: 4px;
	padding: 1px 7px;
	font-size: 12.5px;
}

.aura-legal p { margin-bottom: 12px; }
.aura-legal__date {
	margin-top: 44px;
	font-size: 12.5px;
	color: var(--muted);
	text-align: right;
}

.aura-footer__legal { flex: 1 1 auto; text-align: center; }

@media (max-width: 768px) {
	.aura-lead { font-size: 15px; }
	.aura-contact-cards { grid-template-columns: 1fr; }
	.aura-firma { padding: 20px; }
	.aura-firma li { flex-direction: column; gap: 2px; padding: 10px 0; }
	.aura-firma .l {
		flex: none;
		font-size: 11px;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
	.aura-footer__legal { text-align: left; }
}

/* ============================================================
   10. Банер със снимка
   ============================================================

   Включва се с класа aura-hero--photo върху секцията в front-page.php.
   Махнеш ли класа, връща се банерът със светлинните петна — нищо
   друго не се пипа. Целият блок стои най-долу нарочно, за да
   надделява над мобилните правила по-горе в файла.
   ------------------------------------------------------------ */

.aura-hero--photo {
	background-image: url('assets/hero-photo.jpg');
	background-size: cover;
	/* кадърът се закотвя отгоре: празният беж остава за текста,
	   а отдолу се реже само лъскавата маса без продукти */
	background-position: 50% 0;
	background-repeat: no-repeat;
	/*
	 * Съотношението е това на снимката, за да се вижда цялата — нищо не се
	 * реже. min/max пазят банера да не става нито нисък, нито прекалено
	 * висок на много широк монитор.
	 */
	aspect-ratio: 1916 / 821;
	min-height: 430px;
	max-height: 680px;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	padding: 44px clamp(24px, 6vw, 80px) 0;
	color: #1f150c;
}

/* без мляко под текста надписът трябва да е по-малък, за да остане
   в празната част на кадъра и да не влиза в продуктите */
.aura-hero--photo h1 { font-size: clamp(32px, 4.2vw, 52px); }
.aura-hero--photo .aura-hero__lead { font-size: 15px; margin-top: 16px; margin-bottom: 24px; }
.aura-hero--photo .aura-hero__eyebrow { margin-bottom: 14px; }

/* при снимка светлинните петна и зърнистостта не са нужни */
.aura-hero--photo .aura-hero__glow { display: none; }
.aura-hero--photo::after { display: none; }

/*
 * Леко преливане само по краищата, за да не се чете банерът като
 * залепен правоъгълник: горе и долу кадърът избледнява в бялото на
 * страницата. Средата остава напълно чиста — това не е мляко върху
 * снимката, а само 12 процента от височината в двата края.
 */
.aura-hero--photo::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom,
		#fff 0%,
		rgba(255,255,255,.62) 8%,
		rgba(255,255,255,.22) 16%,
		rgba(255,255,255,0) 23%,
		rgba(255,255,255,0) 84%,
		rgba(255,255,255,.45) 94%,
		#fff 100%);
}

.aura-hero--photo .aura-hero__inner {
	max-width: 400px;
	text-align: left;
}

.aura-hero--photo .aura-hero__lead {
	margin-left: 0;
	margin-right: 0;
}

/* по-малкият файл за тесни екрани — 127 KB вместо 262 */
@media (max-width: 900px) {
	.aura-hero--photo { background-image: url('assets/hero-photo-1280.jpg'); }
}

/*
 * На телефон широкият кадър не може да носи текст върху себе си без
 * мляко под него — където и да застане надписът, пада върху продукти.
 * Затова тук снимката се показва цяла, като лента долу, а текстът
 * стои над нея на бяло. Пак без преливане.
 */
@media (max-width: 768px) {
	.aura-hero--photo {
		aspect-ratio: auto;
		min-height: 360px;
		max-height: none;
		/*
		 * Отделен, по-тесен кадър (1200x821 изрязани от 1916), за да са
		 * продуктите едри на 375 пиксела. Закотвен е вляво, защото там
		 * горният ъгъл е празен беж — текстът стои върху него и се чете
		 * без мляко отдолу.
		 */
		background-image: url('assets/hero-photo-mobile.jpg');
		background-size: cover;
		background-position: 0% 50%;
		justify-content: flex-start;
		align-items: flex-start;
		text-align: left;
		padding: 30px 22px 0;
	}

	.aura-hero--photo .aura-hero__inner { max-width: 250px; text-align: left; }

	/* на телефон остават само трите неща: редът, заглавието и бутонът */
	.aura-hero--photo .aura-hero__lead { display: none; }
	.aura-hero--photo .aura-hero__eyebrow { font-size: 9.5px; margin-bottom: 10px; }
	.aura-hero--photo h1 { font-size: 30px; }

	.aura-hero--photo .aura-btn {
		margin-top: 20px;
		padding: 13px 24px;
		font-size: 10.5px;
	}

}

/* ============================================================
   11. Количка
   ============================================================ */

/*
 * Таблицата заемаше цялата ширина, а сумите падаха под нея вдясно —
 * лявата половина на страницата оставаше празна. Тук страницата става
 * на две колони: списък вляво, сметка вдясно, която върви с превъртането.
 */
.woocommerce-cart .site-main .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 40px;
	align-items: start;
}

.woocommerce-cart .site-main .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .site-main .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; margin: 0 !important; }

.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce-cart .cart_totals {
	width: 100% !important;
	float: none !important;
}

/* ---------- списъкът с продуктите ---------- */

/*
 * Само таблицата със стоките се превръща в списък. Сумите отдясно също
 * носят класа shop_table — ако правилото не е ограничено до формата,
 * там етикетът и стойността падат на два реда.
 */
.woocommerce-cart form.woocommerce-cart-form .shop_table,
.woocommerce-cart form.woocommerce-cart-form .shop_table tbody,
.woocommerce-cart form.woocommerce-cart-form .shop_table tr,
.woocommerce-cart form.woocommerce-cart-form .shop_table td {
	display: block;
	width: auto;
	border: 0;
	background: none;
	padding: 0;
}

.woocommerce-cart form.woocommerce-cart-form .shop_table thead { display: none; }

.woocommerce-cart form.woocommerce-cart-form .shop_table {
	border-collapse: collapse;
	margin: 0;
}

.woocommerce-cart tr.cart_item {
	display: grid !important;
	grid-template-columns: 84px minmax(0, 1fr) 92px 100px 96px 26px;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.woocommerce-cart tr.cart_item:first-child { border-top: 1px solid var(--line); }

/*
 * И редът се задава изрично. В кода „премахни“ стои пръв, а колоната му е
 * шеста — без grid-row нареждането минава на нов ред и ✕ увисва самичък
 * над продукта.
 */
.woocommerce-cart .cart_item .product-thumbnail { grid-column: 1; grid-row: 1; }
.woocommerce-cart .cart_item .product-name      { grid-column: 2; grid-row: 1; }
.woocommerce-cart .cart_item .product-price     { grid-column: 3; grid-row: 1; }
.woocommerce-cart .cart_item .product-quantity  { grid-column: 4; grid-row: 1; }
.woocommerce-cart .cart_item .product-subtotal  { grid-column: 5; grid-row: 1; }
.woocommerce-cart .cart_item .product-remove    { grid-column: 6; grid-row: 1; }

/* Storefront слага max-width ~56px на снимките в количката */
.woocommerce-cart .product-thumbnail img {
	width: 84px !important;
	max-width: none !important;
	height: 84px;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	display: block;
}

.woocommerce-cart .product-name a {
	font-size: 14.5px;
	color: var(--ink);
	text-decoration: none;
	line-height: 1.45;
}

.woocommerce-cart .product-name a:hover { color: var(--muted); }

.woocommerce-cart .product-price { font-size: 13.5px; color: var(--muted); }
.woocommerce-cart .product-subtotal { font-size: 15px; font-weight: 500; text-align: right; }

.woocommerce-cart .product-quantity .quantity input.qty {
	width: 100%;
	min-height: 44px;
	text-align: center;
	font-size: 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--btn-radius);
	box-shadow: none;
}

/* ✕ за премахване — сиво, червено при посочване */
.woocommerce-cart .product-remove a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--soft) !important;
	color: var(--muted) !important;
	font-size: 15px !important;
	line-height: 1 !important;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.woocommerce-cart .product-remove a:hover {
	background: var(--sale) !important;
	color: #fff !important;
}

/* ---------- редът с действията ---------- */

.woocommerce-cart .shop_table td.actions {
	display: flex;
	justify-content: flex-end;
	padding: 18px 0 0;
	background: none !important;
}

/* промо кодът е скрит и на касата, и в страничната количка — тук също */
.woocommerce-cart .shop_table td.actions .coupon { display: none; }

.woocommerce-cart .shop_table td.actions button[name="update_cart"] {
	background: #fff !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--btn-radius) !important;
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 12px 24px;
}

.woocommerce-cart .shop_table td.actions button[name="update_cart"]:hover:not(:disabled) {
	border-color: var(--ink) !important;
	background: #fff !important;
}

/* ---------- сметката отдясно ---------- */

.woocommerce-cart .cart_totals {
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 24px 26px 26px;
	position: sticky;
	top: 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.woocommerce-cart .cart_totals h2 {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
	margin: 0 0 16px;
}

.woocommerce-cart .cart_totals table { width: 100%; margin: 0; border: 0; }
.woocommerce-cart .cart_totals tr { background: none !important; }

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	border: 0;
	padding: 9px 0;
	font-size: 14px;
	background: none !important;
	vertical-align: top;
}

.woocommerce-cart .cart_totals th { font-weight: 400; color: var(--muted); text-align: left; }
.woocommerce-cart .cart_totals td { text-align: right; }

.woocommerce-cart .cart_totals .shipping td { font-size: 13px; color: #3f3f3f; }

/* „Изпращане до София.“ е остатък от калкулатора и не носи нищо */
.woocommerce-cart .woocommerce-shipping-destination { display: none; }

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-top: 1px solid var(--line);
	padding-top: 16px;
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
}

.woocommerce-cart .wc-proceed-to-checkout { padding: 18px 0 0; }

.woocommerce-cart .wc-proceed-to-checkout a.button {
	display: block;
	width: 100%;
	text-align: center;
	background: #000 !important;
	color: #fff !important;
	border-radius: var(--btn-radius) !important;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 16px 24px;
}

.woocommerce-cart .wc-proceed-to-checkout a.button:hover { background: #333 !important; }

@media (max-width: 900px) {
	.woocommerce-cart .site-main .woocommerce { grid-template-columns: 1fr; gap: 28px; }
	.woocommerce-cart form.woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals { grid-column: 1; }
	.woocommerce-cart .cart_totals { position: static; }

	/*
	 * Таблица не се събира на 375 пиксела — редът става карта:
	 * снимка вляво, име и цена вдясно, количество и сума отдолу.
	 */
	.woocommerce-cart tr.cart_item {
		grid-template-columns: 72px minmax(0, 1fr) 26px;
		grid-template-areas:
			"thumb name  remove"
			"thumb price price"
			"qty   total total";
		gap: 10px 14px;
		padding: 16px 0;
	}

	.woocommerce-cart .cart_item .product-thumbnail { grid-area: thumb; align-self: start; }
	.woocommerce-cart .cart_item .product-name      { grid-area: name; }
	.woocommerce-cart .cart_item .product-price     { grid-area: price; }
	.woocommerce-cart .cart_item .product-quantity  { grid-area: qty; }
	.woocommerce-cart .cart_item .product-subtotal  { grid-area: total; }
	.woocommerce-cart .cart_item .product-remove    { grid-area: remove; }

	.woocommerce-cart .product-thumbnail img { width: 72px !important; height: 72px; }
	.woocommerce-cart .product-quantity .quantity input.qty { width: 84px; }

	/*
	 * WooCommerce има свой режим за таблици на тесен екран: слага надпис
	 * пред всяка клетка („Продукт:“, „Цена:“) и подравнява вдясно, а в
	 * сумите крие лявата колона. При нашата подредба това е двойно и
	 * разбърква картата, затова се неутрализира.
	 */
	.woocommerce-cart table.shop_table_responsive tr td::before,
	.woocommerce-cart table.shop_table_responsive tbody th::before { content: none !important; }

	.woocommerce-cart form.woocommerce-cart-form table.shop_table_responsive tr td {
		text-align: left !important;
	}

	.woocommerce-cart .cart_item .product-subtotal { text-align: right !important; }

	/* в сумите се връща етикетът вляво и стойността вдясно */
	.woocommerce-cart .cart_totals table.shop_table_responsive tbody th {
		display: table-cell !important;
		text-align: left !important;
	}

	.woocommerce-cart .cart_totals table.shop_table_responsive tr td {
		text-align: right !important;
	}
}

/* ============================================================
   12. Стена с марките (страница „Марки“)
   ============================================================ */

.aura-brandwall {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 34px 0 10px;
}

.aura-brandwall__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	padding: 26px 18px 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
	text-decoration: none !important;
	transition: border-color .2s ease, transform .2s ease;
}

.aura-brandwall__item:hover {
	border-color: #d8d8d8;
	transform: translateY(-2px);
}

/* логата са изравнени по оптическа тежест на еднакво платно — тук само ги смаляваме */
.aura-brandwall__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 58px;
	margin-bottom: 14px;
}

.aura-brandwall__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .78;
	transition: filter .2s ease, opacity .2s ease;
}

.aura-brandwall__item:hover .aura-brandwall__logo img {
	filter: grayscale(0);
	opacity: 1;
}

.aura-brandwall__text {
	font-size: 14px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.aura-brandwall__name {
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: center;
}

.aura-brandwall__count {
	font-size: 11.5px;
	color: var(--muted);
}

@media (max-width: 900px) {
	.aura-brandwall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 600px) {
	.aura-brandwall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aura-brandwall__item { padding: 20px 12px 16px; }
	.aura-brandwall__logo { height: 46px; margin-bottom: 10px; }
}

/* ============================================================
   12. Страница на продукт
   ============================================================ */

/*
 * Storefront реди снимката и текста с плаващи блокове и снимката излизаше
 * по-тясна (465px) от текста (672px), затова дясната колона изглеждаше
 * празна. Тук минаваме на мрежа: снимката е леко по-широка, а всичко под
 * двете колони — разделите и свързаните продукти — заема цялата ширина.
 */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: 0 64px;
	align-items: start;
	position: relative;
}

/*
 * Местата се задават изрично. Първото дете на div.product е етикетът
 * за намаление и той обърква автоматичното нареждане — снимката и
 * текстът се озоваваха на два отделни реда, вместо един до друг.
 */
.single-product div.product > .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
}

.single-product div.product > .summary {
	grid-column: 2;
	grid-row: 1;
}

.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/*
 * Празната обвивка за съобщения иначе заема цял ред и на телефон
 * избутва снимката с 28 пиксела надолу, а етикетът за намаление
 * увисва над нея.
 */
.single-product div.product > .woocommerce-notices-wrapper:empty { display: none; }

/* снимката запълва колоната си, вместо да стои 416 пиксела в поле от 584 */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
}

.single-product .woocommerce-product-gallery img { border-radius: 14px; }

/*
 * Същата квадратна кутия и на продуктовата страница. Без нея снимката взима
 * естествената си форма и при тънките продукти колоната става няколко пъти
 * по-висока, отколкото при широките.
 */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	aspect-ratio: 1/1;
	object-fit: contain;
	background: #fff;
	padding: 20px;
	box-sizing: border-box;
}

/* стрелките към предишен и следващ продукт стърчаха 45 пиксела отстрани */
.storefront-product-pagination { display: none !important; }

/* ---------- дясната колона: бяла карта с рамка ---------- */

.single-product div.product > .summary {
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 30px 32px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

/* етикетът за намаление е най-горе в картата, в потока, не върху снимката */
.single-product .summary > .onsale {
	position: static !important;
	display: inline-flex;
	align-items: center;
	margin: 0 0 16px !important;
	top: auto;
	left: auto;
}

/* докато марката няма лого, WooCommerce слага своята сива икона — крием я */
img.brand-thumbnail[src*="woocommerce-placeholder"] { display: none !important; }

.single-product .summary img.brand-thumbnail {
	display: block;
	max-height: 24px;
	width: auto;
	margin: 0 0 14px;
}

.single-product .product_title {
	font-size: 30px !important;
	line-height: 1.22;
	letter-spacing: -.01em;
	text-transform: none;
	font-weight: 500;
	margin: 0 0 16px;
	text-align: left;
}

/* цената е най-едрото нещо в картата; при намаление е в червено */
.single-product .summary .price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 30px !important;
	font-weight: 600;
	color: var(--ink) !important;
	margin: 0 0 22px;
	line-height: 1.1;
}

.single-product .summary .price del {
	font-size: 17px;
	color: var(--muted);
	opacity: 1;
	font-weight: 400;
	order: -1;
}

.single-product .summary .price ins {
	text-decoration: none;
	font-weight: 600;
	color: var(--sale);
}

.single-product .woocommerce-product-details__short-description {
	font-size: 13.5px;
	color: var(--muted);
	margin: 0 0 16px;
}

/* наличността е ред с точка, без усмихнатото лице на Storefront */
.single-product .summary .stock {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: #2f6b36;
	margin: 0 0 22px;
	padding: 0;
	background: none;
}

.single-product .summary .stock::before {
	content: '' !important;
	display: block !important;
	position: static !important;
	width: 6px;
	height: 6px;
	margin: 0 !important;
	border-radius: 50%;
	background: #35893f;
	font-size: 0 !important;
}

/* ---------- количество и бутон ---------- */

.single-product form.cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin: 0 0 28px !important;
}

.single-product form.cart .quantity { margin: 0 !important; }

.single-product form.cart .quantity input.qty {
	width: 76px;
	min-height: 54px;
	height: 100%;
	text-align: center;
	font-size: 15px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--btn-radius);
	box-shadow: none;
}

.single-product form.cart button.single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 54px;
	background: #000 !important;
	color: #fff !important;
	border: 0;
	border-radius: var(--btn-radius) !important;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 14px 30px;
}

.single-product form.cart button.single_add_to_cart_button:hover { background: #333 !important; }

/* ---------- карето с обещанията ---------- */

.aura-assure {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 0 0 24px;
	padding: 18px 20px;
	border-radius: 12px;
	background: #f1f7f2;
}

.aura-assure__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.aura-assure svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	margin-top: 1px;
	color: #35893f;
}

.aura-assure .t {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: #23402a;
	line-height: 1.35;
}

.aura-assure .s {
	display: block;
	font-size: 12px;
	color: #5d7a63;
	line-height: 1.4;
	margin-top: 2px;
}

/* ---------- код, категории, марка ---------- */

/* редове етикет → стойност, както на amax */
.aura-meta {
	border-top: 1px solid var(--line);
	padding-top: 18px;
	margin: 0;
	display: grid;
	gap: 11px;
	font-size: 12.5px;
}

.aura-meta__row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 16px;
	align-items: start;
}

.aura-meta__label { color: var(--muted); }
.aura-meta__value { color: var(--ink); }
.aura-meta__value a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.aura-meta__value a:hover { border-bottom-color: var(--ink); }

.single-product .product_meta a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

.single-product .product_meta a:hover { border-bottom-color: var(--ink); }

/* ---------- разделите под продукта ---------- */

/* описанието също е в бяла карта, както дясната колона */
.single-product .woocommerce-tabs {
	margin-top: 44px;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 28px 32px 32px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs {
	float: none !important;
	width: 100% !important;
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 28px !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--line);
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs::before,
.single-product .woocommerce-tabs ul.tabs.wc-tabs::after,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li::before,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li::after { display: none !important; }

.single-product .woocommerce-tabs ul.tabs.wc-tabs li {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
	display: block;
	padding: 0 0 14px !important;
	font-size: 12.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted) !important;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li a:hover {
	color: var(--ink) !important;
	border-bottom-color: var(--ink);
}

.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	float: none !important;
	width: 100% !important;
	max-width: 820px;
	padding: 0 !important;
	font-size: 14.5px;
	line-height: 1.8;
}

/* заглавието в панела повтаря името на самия раздел */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child { display: none; }

/* ---------- свързани продукти ---------- */

.single-product .related,
.single-product .up-sells { margin-top: 72px; }

.single-product .related > h2,
.single-product .up-sells > h2 {
	font-size: 22px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 500;
	text-align: center;
	margin: 0 0 34px;
}

@media (max-width: 900px) {
	.single-product div.product { grid-template-columns: 1fr; gap: 28px; }

	/* иначе текстът остава закачен за втора колона, каквато вече няма */
	.single-product div.product > .woocommerce-product-gallery,
	.single-product div.product > .summary {
		grid-column: 1;
		grid-row: auto;
	}

	.single-product .product_title { font-size: 24px !important; }
	.single-product .summary .price { font-size: 22px !important; }
	.single-product .related,
	.single-product .up-sells { margin-top: 52px; }
	.single-product .woocommerce-tabs ul.tabs.wc-tabs { gap: 20px; }

	/* картите се свиват — на 375 пиксела 32-те отстрани изяждат текста */
	.single-product div.product > .summary { padding: 24px 22px; }
	.single-product .woocommerce-tabs { margin-top: 36px; padding: 24px 22px 26px; }

	/* двете обещания и мета редовете минават едно под друго */
	.aura-assure { grid-template-columns: 1fr; gap: 14px; }
	.aura-meta__row { grid-template-columns: 1fr; gap: 3px; }
}

/* ============================================================
   13. Страница „Marken“ — азбучен списък на марките
   ============================================================ */

.aura-az { max-width: var(--wrap); margin: 0 auto; }

.aura-az__title { text-align: center; margin: 6px 0 6px; font-size: 34px; font-weight: 600; letter-spacing: -.01em; }

.aura-az__lead { text-align: center; color: var(--muted); margin: 0 0 22px; font-size: 14px; letter-spacing: .04em; }

/* лентата A–Z остава залепена под хедъра, докато се превърта списъкът */
.aura-az__bar {
	position: sticky;
	top: var(--aura-header-h, 150px);
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	padding: 12px 0;
	margin-bottom: 26px;
	background: #fff;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.aura-az__bar a {
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	transition: background .15s ease, color .15s ease;
}

.aura-az__bar a:hover { background: var(--ink); color: #fff; }

.aura-az__group { scroll-margin-top: calc(var(--aura-header-h, 150px) + 70px); padding: 0 0 30px; }

.aura-az__group h2 {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ink);
	font-size: 26px;
	font-weight: 600;
	text-align: left;
}

.aura-az__group ul { list-style: none; margin: 0; padding: 0; column-width: 230px; column-gap: 34px; }

.aura-az__group li { break-inside: avoid; padding: 4px 0; font-size: 14.5px; line-height: 1.4; }

.aura-az__group li a { color: #333; }
.aura-az__group li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.aura-az__group li span { color: var(--muted); font-size: 12px; margin-left: 4px; }

@media (max-width: 768px) {
	.aura-az__bar { top: var(--aura-header-h, 70px); gap: 2px; padding: 8px 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.aura-az__bar::-webkit-scrollbar { display: none; }
	.aura-az__bar a { flex: 0 0 auto; min-width: 32px; height: 32px; }
	.aura-az__group { scroll-margin-top: calc(var(--aura-header-h, 70px) + 60px); }
	.aura-az__group ul { column-width: auto; column-count: 2; column-gap: 14px; }
	.aura-az__group li { font-size: 13.5px; }
	.aura-az__title { font-size: 26px; }
}

/* Марката над името на продукта */
.aura-brandlink {
	display: inline-block;
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}

.aura-brandlink:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* етикетът за намаление стои на свой ред, марката — под него */
.single-product div.product .summary .onsale + .aura-brandlink { display: block; width: fit-content; margin-top: 10px; }