/**
 * Qrest UI — дизайн-система сайта q-rest.nl: токены + базовые компоненты.
 *
 * Единственный источник цветов, шрифтов, радиусов, теней и движения для всех
 * плагинов Qrest (qrest-pdp, qrest-header, qrest-checkout и новых). Префикс --q-
 * для токенов и .q- для классов. Плагины держат свои старые префиксы (--qp-, --qr-,
 * --qc-) как алиасы на эти токены, поэтому менять бренд = менять этот файл.
 *
 * Шрифты приходят из Avada (typography-переменные на :root); здесь только fallback.
 * Значения совпадают с палитрой Avada: ink = Color 8, slate = Color 6, teal = Color 4,
 * wood = Color 5, cream = Color 2, оранжевый градиент = Button color 1/2.
 *
 * Компоненты используют !important там, где Avada ставит собственные стили на
 * a / button / ul (иначе у них не выиграть без длинных селекторов).
 */

:root {
	/* Поверхности */
	--q-sand-light: #F7EFE4;
	--q-sand: #EFE3D2;
	--q-sand-deep: #E2D2B8;
	--q-cream: #FFF9F2;
	--q-white: #FFFFFF;
	--q-border: #E6E6E6;
	--q-border-warm: #E2D6C4;

	/* Базовые цвета */
	--q-bark: #45362A;
	--q-bark-deep: #33271E;
	--q-ink: #021413;
	--q-orange-light: #F2B04C;
	--q-orange: #DE8527;
	--q-orange-deep: #C4700F;
	--q-orange-text: #A0590A;
	--q-wood: #C9965D;
	--q-slate: #424D4E;
	--q-teal: #18605D;
	--q-green: #65BC7B;
	--q-rating: #F2B04C;

	/* Семантика текста */
	--q-text-heading: var(--q-ink);
	--q-text-body: var(--q-slate);
	--q-text-muted: rgba(66, 77, 78, .65);
	--q-text-muted-strong: #75716B; /* приглушённый текст 12-13px с контрастом AA (шапка) */
	--q-text-price: var(--q-bark);

	/* Действие */
	--q-cta-gradient: linear-gradient(180deg, var(--q-orange-light) 0%, var(--q-orange) 100%);
	--q-action-soft: rgba(222, 133, 39, .10);
	--q-action-soft-strong: rgba(222, 133, 39, .20);
	--q-focus-ring: rgba(222, 133, 39, .30);

	/* Статусы (из чекаута) */
	--q-success-bg: #EEF7F0;
	--q-warning-bg: #FDF1DE;
	--q-error: #C0392B;
	--q-error-bg: #FBEDEA;
	--q-info-bg: #F4F5F5;

	/* Типографика: следует за темой */
	--q-font-heading: var(--h3_typography-font-family, var(--awb-typography1-font-family, 'Gentium Book Plus', Georgia, serif));
	--q-font-body: var(--body_typography-font-family, var(--awb-typography4-font-family, 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif));

	/* Форма */
	--q-radius-s: 6px;
	--q-radius-m: 12px;
	--q-radius-l: 20px;
	--q-radius-pill: 999px;

	/* Тени */
	--q-shadow-card: 0 2px 8px rgba(2, 20, 19, .06);
	--q-shadow-card-hover: 0 10px 28px rgba(2, 20, 19, .12);
	--q-shadow-button: 0 2px 6px rgba(222, 133, 39, .28);
	--q-shadow-overlay: 0 16px 48px rgba(2, 20, 19, .18);
	--q-shadow-sticky: 0 -6px 20px rgba(2, 20, 19, .08);

	/* Движение */
	--q-ease: cubic-bezier(.22, .61, .36, 1);
	--q-fast: 150ms;
	--q-med: 250ms;

	/* Сетка: ширина сайта Avada 1200px = 1248px контейнер минус 2 × 24px */
	--q-site: 1248px;
	--q-gutter: 24px;
	--q-gutter-narrow: 30px; /* ≤ 1248px */

	/* Ширина скроллбара (ставит qrest-ui.js), для .q-bleed */
	--q-sb: 0px;
}

@keyframes q-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Сетка: контейнер и full-bleed
   .q-bleed вырывается из колонки Avada на всю ширину окна, не трогая соседей.
   .q-inner центрирует содержимое на линии header/content/footer.
   --------------------------------------------------------------------------- */
.q-bleed {
	box-sizing: border-box;
	width: calc(100vw - var(--q-sb, 0px));
	margin-left: calc(50% - 50vw + var(--q-sb, 0px) / 2);
	margin-right: 0;
}
.q-inner {
	box-sizing: border-box;
	max-width: var(--q-site);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--q-gutter);
	padding-right: var(--q-gutter);
}
@media (max-width: 1248px) {
	.q-inner { padding-left: var(--q-gutter-narrow); padding-right: var(--q-gutter-narrow); }
}

/* ---------------------------------------------------------------------------
   Иконки (Qrest_UI::icon)
   --------------------------------------------------------------------------- */
.q-icon { flex: none; } /* verder inline SVG zoals de browser hem tekent (ster-overlay in PDP rekent daarop) */

/* ---------------------------------------------------------------------------
   Заголовок секции (serif, как в теме)
   --------------------------------------------------------------------------- */
.q-h, h1.q-h, h2.q-h, h3.q-h {
	margin: 0;
	padding: 0;
	font-family: var(--q-font-heading);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--q-text-heading);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Kicker: маленькая подпись над заголовком (категория, раздел)
   --------------------------------------------------------------------------- */
.q-kicker, a.q-kicker {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--q-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--q-text-muted) !important;
	text-decoration: none !important;
	transition: color var(--q-fast) var(--q-ease);
}
a.q-kicker:hover, a.q-kicker:focus-visible { color: var(--q-orange-text) !important; }

/* ---------------------------------------------------------------------------
   Кнопки
   .q-btn (градиент, основная) · --secondary (контур) · --s / --l · --block
   Состояния: [disabled], .is-loading (спиннер), :focus-visible
   --------------------------------------------------------------------------- */
.q-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--q-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	padding: 13px 29px !important;
	margin: 0;
	border: 1px solid var(--q-orange-light) !important;
	border-radius: var(--q-radius-m) !important;
	background: var(--q-cta-gradient) !important;
	color: #fff !important;
	box-shadow: var(--q-shadow-button) !important;
	text-decoration: none !important;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	position: relative;
	transition: background var(--q-fast) var(--q-ease), border-color var(--q-fast) var(--q-ease), box-shadow var(--q-fast) var(--q-ease);
}
.q-btn::before, .q-btn::after { content: none !important; display: none !important; }
.q-btn:hover { background: var(--q-orange-deep) !important; border-color: var(--q-orange-deep) !important; color: #fff !important; box-shadow: none !important; }
.q-btn:active { background: var(--q-orange-text) !important; border-color: var(--q-orange-deep) !important; }
.q-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--q-focus-ring) !important; border-color: var(--q-orange) !important; }
.q-btn--s { font-size: 14px; padding: 9px 20px !important; }
.q-btn--l { font-size: 18px; padding: 25px 35px !important; }
.q-btn--secondary { background: transparent !important; border-color: var(--q-orange) !important; color: var(--q-orange-text) !important; box-shadow: none !important; }
.q-btn--secondary:hover { background: var(--q-action-soft) !important; border-color: var(--q-orange) !important; color: var(--q-orange-text) !important; }
.q-btn--secondary:active { background: var(--q-action-soft-strong) !important; }
.q-btn--block { display: flex; width: 100%; }
.q-btn[disabled], .q-btn.is-loading { opacity: .45; cursor: not-allowed; box-shadow: none !important; }
.q-btn .q-icon { flex: none; }
.q-btn.is-loading::before {
	content: '' !important;
	display: inline-block !important;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 999px;
	animation: q-spin .8s linear infinite;
	flex: none;
}
.q-btn--secondary.is-loading::before { border-color: var(--q-action-soft-strong); border-top-color: var(--q-orange-text); }

/* Круглая кнопка-иконка (стрелки, закрыть, зум). --s 32px · --sq квадратная с мягким углом */
.q-iconbtn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	margin: 0;
	border: 1px solid var(--q-orange) !important;
	border-radius: var(--q-radius-pill) !important;
	background: var(--q-white) !important;
	color: var(--q-orange-text) !important;
	box-shadow: var(--q-shadow-card) !important;
	cursor: pointer;
	line-height: 1;
	transition: background var(--q-fast) var(--q-ease), color var(--q-fast) var(--q-ease);
}
.q-iconbtn::before, .q-iconbtn::after { content: none !important; display: none !important; }
.q-iconbtn:hover { background: var(--q-action-soft) !important; color: var(--q-orange-text) !important; }
.q-iconbtn:active { background: var(--q-action-soft-strong) !important; }
.q-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--q-focus-ring) !important; }
.q-iconbtn[disabled] { opacity: .4; cursor: not-allowed; }
.q-iconbtn--s { width: 32px; height: 32px; }
.q-iconbtn--sq { width: 44px; height: 44px; border-radius: var(--q-radius-m) !important; border-color: var(--q-border) !important; box-shadow: none !important; }
.q-iconbtn--sq:hover { border-color: var(--q-orange) !important; }
.q-iconbtn .q-icon { flex: none; }

/* ---------------------------------------------------------------------------
   Бейджи (метки над заголовком, на карточках)
   Цвета: по умолчанию bark · --sand · --wood · --green · --orange · --neutral · --custom (inline style)
   --------------------------------------------------------------------------- */
.q-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.q-badge {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--q-radius-s);
	font-family: var(--q-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
	background: var(--q-bark);
	color: #fff;
}
.q-badge--bark { background: var(--q-bark); color: #fff; }
.q-badge--sand { background: var(--q-sand); color: var(--q-bark); }
.q-badge--wood { background: var(--q-wood); color: #fff; }
.q-badge--green { background: var(--q-green); color: #fff; }
.q-badge--orange { background: var(--q-orange); color: #fff; }
.q-badge--neutral { background: var(--q-white); color: var(--q-text-body); border: 1px solid var(--q-border); }

/* ---------------------------------------------------------------------------
   Теги: сдержанные полупрозрачно-оранжевые чипы (Kenmerken)
   --------------------------------------------------------------------------- */
.q-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.q-tags__title { font-family: var(--q-font-body); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--q-text-muted); }
.q-tags__list, ul.q-tags__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.q-tags__list li { margin: 0; padding: 0; list-style: none; }
.q-tag, a.q-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--q-radius-pill);
	background: var(--q-action-soft);
	font-family: var(--q-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--q-orange-text) !important;
	opacity: .72;
	text-decoration: none !important;
	transition: opacity var(--q-fast) var(--q-ease), background-color var(--q-fast) var(--q-ease);
}
a.q-tag:hover, a.q-tag:focus-visible { opacity: 1; background: var(--q-action-soft-strong); }
a.q-tag:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--q-focus-ring); }

/* ---------------------------------------------------------------------------
   Карточка: белая поверхность с тенью и подъёмом при наведении.
   Содержимое (медиа, цена, кнопка) описывает плагин-потребитель.
   --------------------------------------------------------------------------- */
.q-card {
	box-sizing: border-box;
	position: relative;
	background: var(--q-white);
	border: 1px solid var(--q-border);
	border-radius: var(--q-radius-m);
	overflow: hidden;
	box-shadow: var(--q-shadow-card);
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: box-shadow var(--q-med) var(--q-ease), transform var(--q-med) var(--q-ease);
}
.q-card--hover:hover { box-shadow: var(--q-shadow-card-hover); transform: translateY(-3px); }
.q-card--l { border-radius: var(--q-radius-l); }
.q-card--flat { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
	.q-card--hover:hover { transform: none; }
	.q-btn, .q-iconbtn, .q-tag, .q-kicker, .q-card { transition: none; }
}