/*
Theme Name: Avelina Child
Theme URI: https://deuxdames.bg
Description: Child тема на Avelina за Deux Dames
Author: Mikado Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: avelina
Template: avelina
*/

/* ==========================================================================
   Токени за целия сайт
   ========================================================================== */

:root {
	--dd-bronze: #8b6f4e;
	--dd-bronze-deep: #6f573c;
	--dd-cocoa: #241c15;
	--dd-frame: #f6f2ec;
	--dd-line: #e7e0d6;
	--dd-muted: #6b6660;
	--dd-radius: 14px;
	--dd-radius-sm: 8px;
}

/* ==========================================================================
   Типография

   Темата задава `body { font-size: 15px }`, което е дребно за четене.
   Вдигнато на 17px. line-height-ът на темата е `1.66667em`, тоест относителен —
   скалира сам. Заглавията h1/h2 остават (46/36px са си големи); вдигнати са
   само малките нива, за да не се изравнят с основния текст.
   ========================================================================== */

body {
	font-size: 18px;
}

h3, .qodef-h3 { font-size: 31px; line-height: 1.25; }
h4, .qodef-h4 { font-size: 25px; line-height: 1.3; }
h5, .qodef-h5 { font-size: 20px; line-height: 1.35; }
h6, .qodef-h6 { font-size: 21px; line-height: 1.35; }

/* Менюто е с главни букви и разредка */
.qodef-header-navigation > ul > li > a,
.qodef-menu-item-inner > a,
.qodef-header-navigation a {
	font-size: 14px;
}

/* --- Иконите в хедъра бяха 14–16px --- */
.qodef-header-widget-area-one svg,
.qodef-sticky-right svg,
.widget_avelina_membership_login_opener svg,
.widget_avelina_core_svg_icon svg,
.widget_avelina_core_woo_dropdown_cart svg {
	width: 21px !important;
	height: 21px !important;
}

/* Хамбургерът е от линии, не иконка */
.widget_avelina_core_side_area_opener svg {
	width: 34px !important;
	height: 12px !important;
}

/* Брояч до кошницата */
.qodef-widget-dropdown-cart-outer .qodef-m-count,
.widget_avelina_core_woo_dropdown_cart .qodef-m-count {
	font-size: 14px;
}

/* Полетата за въвеждане ползваха системен Arial 13px */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
	font-family: 'Lato', sans-serif;
	font-size: 17px;
}

/* ==========================================================================
   Единен език: заоблени ръбове

   Радиусът от продуктовите карти се пренася на бутоните, полетата и кутиите,
   за да не се разминават страниците. Изключение са бутоните в лентата на
   продуктовата карта — те се клипват от рамката и трябва да останат прави.
   ========================================================================== */

.qodef-button,
.qodef-button.qodef-layout--filled,
.qodef-button.qodef-layout--outlined,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
input[type="submit"],
button[type="submit"],
.wpcf7-submit,
.dd-hero-btn {
	border-radius: var(--dd-radius-sm) !important;
}

/* Полета и падащи менюта */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select,
.wpcf7 input,
.wpcf7 textarea,
.select2-container .select2-selection--single {
	border-radius: var(--dd-radius-sm);
}

/* Кутии в кошницата/плащането и системните съобщения */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce .shop_table,
.woocommerce-cart .cart-collaterals .cart_totals,
.qodef-woo-cart-free-shipping,
.qodef-woo-cart-countdown-message {
	border-radius: var(--dd-radius);
}

/* Продуктовата карта: лентата с действия се клипва от рамката — без радиус */
.qodef-woo-product-list li.product .qodef-e-media-inner .add_to_cart_button,
.qodef-woo-product-list li.product .qodef-e-media-inner .added_to_cart,
.qodef-woo-product-list li.product .yith-wcwl-add-to-wishlist-button {
	border-radius: 0 !important;
}

/* ==========================================================================
   Прозорче след добавяне в кошницата
   ========================================================================== */

.dd-cart-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.dd-cart-modal[hidden] {
	display: none;
}

.dd-cart-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(36, 28, 21, .5);
	opacity: 0;
	transition: opacity .2s ease;
}

.dd-cart-modal.is-open .dd-cart-modal__backdrop {
	opacity: 1;
}

.dd-cart-modal__panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 34px 32px 30px;
	background-color: #fff;
	border-radius: var(--dd-radius);
	box-shadow: 0 20px 60px rgba(36, 28, 21, .22);
	text-align: center;
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transition: opacity .22s ease, transform .22s ease;
}

.dd-cart-modal.is-open .dd-cart-modal__panel {
	opacity: 1;
	transform: none;
}

.dd-cart-modal__x {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	color: var(--dd-muted);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.dd-cart-modal__x:hover {
	background-color: var(--dd-frame);
	color: var(--dd-cocoa);
}

.dd-cart-modal__tick {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	background-color: var(--dd-frame);
	border-radius: 50%;
	color: var(--dd-bronze);
}

.dd-cart-modal__title {
	margin: 0 0 4px;
	font-family: 'Marcellus', serif;
	font-size: 22px;
	line-height: 1.25;
	color: var(--dd-cocoa);
}

.dd-cart-modal__name {
	margin: 0 0 22px;
	font-size: 16px;
	color: var(--dd-muted);
}

.dd-cart-modal__name[hidden] {
	display: none;
}

.dd-cart-modal__actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.dd-cart-modal__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 18px;
	border-radius: var(--dd-radius-sm);
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.dd-cart-modal__btn--solid {
	background-color: var(--dd-bronze);
	border: 1px solid var(--dd-bronze);
	color: #fff;
}

.dd-cart-modal__btn--solid:hover {
	background-color: var(--dd-bronze-deep);
	border-color: var(--dd-bronze-deep);
	color: #fff;
}

.dd-cart-modal__btn--ghost {
	background-color: #fff;
	border: 1px solid var(--dd-line);
	color: var(--dd-cocoa);
}

.dd-cart-modal__btn--ghost:hover {
	background-color: var(--dd-frame);
	border-color: #dcd2c3;
}

.dd-cart-modal__btn:focus-visible {
	outline: 2px solid var(--dd-bronze);
	outline-offset: 2px;
}

body.dd-cart-modal-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.dd-cart-modal__panel,
	.dd-cart-modal__backdrop {
		transition: none;
	}

	.dd-cart-modal__panel {
		transform: none;
	}
}

/* ==========================================================================
   Кошница и плащане

   Checkout-ът вече е кратък: име, фамилия, телефон, имейл. Адресът се събира от
   виджета на Еконт, затова WooCommerce колоната за доставка (`.col-2`) остава
   празна — оттам идваше голямото празно място отдясно.

   Тук: съдържанието се събира в четима колона и се подрежда в карти, полетата
   стават на две в ред, а бутонът за поръчка е широк и ясен.
   ========================================================================== */

/* --- Кошница: две колони ---
   Преди тук имаше max-width 860px с авто полета. Това центрираше формата, но
   бележката за безплатна доставка е в отделен контейнер на темата
   (`.qodef-sale-boosters`) и оставаше подравнена вляво — оттам „разместването“.
   Двете колони ползват цялата ширина и няма как да се разминат. */
.woocommerce-cart .qodef--cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 0 40px;
	align-items: start;
}

/* Съобщенията и лентата за безплатна доставка минават през двете колони.
   `max-width: none` е нужен — темата стеснява `.qodef-sale-boosters` и без него
   лентата не се разпъва, а се разминава с ръба на таблицата. */
.woocommerce-cart .qodef--cart > .woocommerce-notices-wrapper,
.woocommerce-cart .qodef--cart > .qodef-sale-boosters {
	grid-column: 1 / -1;
	width: 100% !important;
	max-width: none !important;
}

.woocommerce-cart .qodef--cart > form.woocommerce-cart-form {
	grid-column: 1;
	margin: 0;
}

.woocommerce-cart .qodef--cart > .cart-collaterals {
	grid-column: 2;
	position: sticky;
	top: 120px;
	width: 100%;
	margin: 0;
}

/* --- Плащане: две колони --- */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 0 40px;
	align-items: start;
}

/* `.dd-checkout-left` обвива данните на клиента и Еконт панела (виж
   `checkout-layout.php` в плъгина) — тя е директното дете на grid-а, не
   `#customer_details`. Старият селектор остава за случая, в който плъгинът е
   изключен и обвивка няма. */
.woocommerce-checkout form.checkout > .dd-checkout-left,
.woocommerce-checkout form.checkout > #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
	min-width: 0;
}

/* Картата с данните е 760px широка: `#customer_details` е дръпнат с -30px, а
   `.col-1` носи по 30px падинг. Панелът се изравнява с нея, не с обвивката. */
.dd-econt-panel {
	margin: 24px 60px 0 0;
}

.woocommerce-checkout form.checkout > #order_review_heading {
	grid-column: 2;
	grid-row: 1;
}

.woocommerce-checkout form.checkout > #order_review {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: 120px;
}

/* Празната колона за доставка — Еконт я поема */
.woocommerce-checkout .col2-set > .col-2:empty,
.woocommerce-checkout .col2-set #customer_details .col-2:empty {
	display: none;
}

/* `#customer_details` е flex ред с две колони. Скриването на празната втора не
   разпъва първата — тя си остава на 50% flex-basis. Затова контейнерът минава
   на block, а не само да крием `.col-2`. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set {
	display: block;
	width: 100%;
	max-width: 100%;
}

.woocommerce-checkout .col2-set > .col-1,
.woocommerce-checkout #customer_details > .col-1 {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
}

/* --- Карти --- */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #order_review {
	padding: 30px 32px 34px;
	background-color: #fff;
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius);
}

.woocommerce-checkout .woocommerce-billing-fields {
	margin-bottom: 24px;
}

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 22px;
	font-family: 'Marcellus', serif;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--dd-cocoa);
}

.woocommerce-checkout #order_review_heading {
	margin: 0 0 14px;
	padding: 0 4px;
}

/* --- Полетата: две в ред --- */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 22px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce-checkout .woocommerce-billing-fields label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--dd-cocoa);
}

.woocommerce-checkout .woocommerce-billing-fields .input-text {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	background-color: #fdfcfa;
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius-sm);
	transition: border-color .2s ease, background-color .2s ease;
}

.woocommerce-checkout .woocommerce-billing-fields .input-text:focus {
	background-color: #fff;
	border-color: var(--dd-bronze);
	outline: none;
}

/* --- Поръчката ---
   Табличният layout ограничаваше виджета на Еконт до ширината на колоната
   (442px от 860). Дори `display:block` на реда не помага — блоковият `tr`
   пак се пласира като клетка в колона. Затова цялата таблица минава на flex:
   всеки ред е ред, а редът за доставка се подрежда вертикално и виджетът
   получава цялата ширина. */
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review .shop_table thead,
.woocommerce-checkout #order_review .shop_table tbody,
.woocommerce-checkout #order_review .shop_table tfoot {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 0;
}

.woocommerce-checkout #order_review .shop_table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	border-bottom: 1px solid var(--dd-line);
}

.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
	display: block;
	width: auto;
	padding: 14px 0;
	border: 0;
	text-align: left;
}

.woocommerce-checkout #order_review .shop_table td {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-checkout #order_review .shop_table thead th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dd-muted);
}

.woocommerce-checkout #order_review .order-total {
	border-bottom: 0;
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	padding-top: 18px;
	font-size: 19px;
	color: var(--dd-cocoa);
}

.woocommerce-checkout #order_review .order-total td .amount {
	font-weight: 700;
	color: var(--dd-bronze);
}

/* Редът за доставка — вертикално, за да е виджетът на цялата ширина */
.woocommerce-checkout #order_review tr.shipping {
	display: block;
}

.woocommerce-checkout #order_review tr.shipping th,
.woocommerce-checkout #order_review tr.shipping td {
	display: block;
	width: 100%;
	text-align: left;
	white-space: normal;
}

.woocommerce-checkout #order_review tr.shipping th {
	padding-bottom: 6px;
}

.woocommerce-checkout #order_review tr.shipping td {
	padding-top: 0;
}

.woocommerce-checkout #order_review ul.woocommerce-shipping-methods {
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}

.woocommerce-checkout .wooe-checkout-widget {
	width: 100%;
	max-width: 100%;
	border-radius: var(--dd-radius-sm);
}

/* Промо кодът стои извън form.checkout — на цяла ширина над двете колони */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
	width: 100%;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	border-radius: var(--dd-radius);
}

/* --- Плащане --- */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	margin: 22px 0 0;
	border-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 16px 18px;
	background-color: var(--dd-frame);
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius-sm);
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods label {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--dd-cocoa);
}

.woocommerce-checkout #payment .payment_box {
	padding: 10px 0 0;
	margin: 0;
	background: transparent;
	font-size: 15px;
	color: var(--dd-muted);
}

.woocommerce-checkout #payment .payment_box:before {
	display: none;
}

/* --- Съгласие и бутон --- */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 22px 0 0;
	font-size: 15px;
}

.woocommerce-checkout #place_order {
	width: 100%;
	height: 58px;
	margin-top: 20px;
	font-size: 13px !important;
	letter-spacing: .18em;
}

/* --- Кошница: карти --- */

.woocommerce-cart .shop_table.cart {
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius);
	border-collapse: separate;
	overflow: hidden;
	background-color: #fff;
}

.woocommerce-cart .shop_table.cart thead th {
	padding: 16px 18px;
	background-color: var(--dd-frame);
	border-bottom: 1px solid var(--dd-line);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dd-muted);
}

.woocommerce-cart .shop_table.cart td {
	padding: 18px;
	border-bottom: 1px solid var(--dd-line);
}

.woocommerce-cart .shop_table.cart tr:last-child td {
	border-bottom: 0;
}

/* Колоната с „×“ опираше в ръба на картата и се клипваше от радиуса */
.woocommerce-cart .shop_table.cart .product-remove {
	width: 54px;
	padding-left: 18px;
	padding-right: 0;
	text-align: center;
}

.woocommerce-cart .shop_table.cart .product-remove a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	color: var(--dd-muted);
	transition: background-color .2s ease, color .2s ease;
}

.woocommerce-cart .shop_table.cart .product-remove a:hover {
	background-color: var(--dd-frame);
	color: var(--dd-cocoa);
}

.woocommerce-cart .shop_table.cart .product-thumbnail img {
	width: 68px;
	height: 68px;
	object-fit: contain;
	background-color: var(--dd-frame);
	border-radius: var(--dd-radius-sm);
}

.woocommerce-cart .shop_table.cart .product-name a {
	font-family: 'Marcellus', serif;
	font-size: 18px;
	color: var(--dd-cocoa);
}

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

.woocommerce-cart .shop_table.cart .product-price,
.woocommerce-cart .shop_table.cart .product-subtotal {
	font-weight: 700;
	color: var(--dd-bronze);
}

.woocommerce-cart .cart-collaterals .cart_totals {
	margin-top: 26px;
	padding: 28px 30px 30px;
	background-color: #fff;
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius);
}

.woocommerce-cart .cart_totals > h2 {
	margin: 0 0 18px;
	font-family: 'Marcellus', serif;
	font-size: 22px;
	text-transform: none;
	color: var(--dd-cocoa);
}

.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table tbody {
	display: block;
	width: 100%;
	border: 0;
}

.woocommerce-cart .cart_totals table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	border-bottom: 1px solid var(--dd-line);
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	display: block;
	width: auto;
	padding: 13px 0;
	border: 0;
}

.woocommerce-cart .cart_totals table td {
	text-align: right;
}

/* Редът за доставка носи виджета на Еконт — на цяла ширина.
   В тясната колона обяснителният текст и линкът „Изчисляване на доставка“ се
   блъскаха един в друг, затова се подреждат вертикално. */
.woocommerce-cart .cart_totals tr.shipping {
	display: block;
}

.woocommerce-cart .cart_totals tr.shipping th,
.woocommerce-cart .cart_totals tr.shipping td {
	display: block;
	width: 100%;
	text-align: left;
}

.woocommerce-cart .cart_totals tr.shipping td p,
.woocommerce-cart .cart_totals tr.shipping .woocommerce-shipping-destination {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dd-muted);
}

.woocommerce-cart .cart_totals tr.shipping .shipping-calculator-button,
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator .shipping-calculator-button {
	display: inline-block !important;
	margin-top: 10px;
	text-align: left !important;
}

.woocommerce-cart .cart_totals .order-total {
	border-bottom: 0;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	padding-top: 17px;
	font-size: 19px;
}

.woocommerce-cart .cart_totals .order-total .amount {
	font-weight: 700;
	color: var(--dd-bronze);
}

/* !important: темата задава размерите на бутоните през `#qodef-woo-page .button`,
   а ID селектор бие класовете. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: block !important;
	width: 100% !important;
	height: 56px !important;
	line-height: 56px !important;
	margin-top: 18px;
	padding: 0 !important;
	text-align: center;
	font-size: 13px !important;
	letter-spacing: .18em;
}

/* Под 1100px двете колони не се събират — минаваме на една */
@media (max-width: 1100px) {
	.woocommerce-cart .qodef--cart,
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-cart .qodef--cart > form.woocommerce-cart-form,
	.woocommerce-cart .qodef--cart > .cart-collaterals,
	.woocommerce-checkout form.checkout > .dd-checkout-left,
	.woocommerce-checkout form.checkout > #customer_details,
	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 1;
		grid-row: auto;
		position: static;
	}

	/* На една колона панелът няма от какво да се изравнява */
	.dd-econt-panel {
		margin-right: 0;
	}

	.woocommerce-cart .qodef--cart > .cart-collaterals {
		margin-top: 28px;
	}
}

@media (max-width: 680px) {
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout #order_review {
		padding: 22px 18px 26px;
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-cart .cart-collaterals .cart_totals {
		padding: 20px 18px 22px;
	}

	/* --- Кошницата на телефон ---
	   Таблица с 5 колони не се събира на 430px. Всеки продукт става карта, а
	   заглавията на колоните идват от `data-title`, което WooCommerce слага. */
	.woocommerce-cart .shop_table.cart thead {
		display: none;
	}

	.woocommerce-cart .shop_table.cart,
	.woocommerce-cart .shop_table.cart tbody {
		display: block;
		width: 100%;
	}

	.woocommerce-cart .shop_table.cart tbody tr.cart_item {
		display: grid;
		grid-template-columns: 62px 1fr 34px;
		grid-template-areas:
			"thumb name remove"
			"thumb price remove"
			"qty   qty   qty";
		align-items: center;
		gap: 4px 12px;
		padding: 16px 14px;
		border-bottom: 1px solid var(--dd-line);
	}

	.woocommerce-cart .shop_table.cart tbody tr.cart_item td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.woocommerce-cart .shop_table.cart .product-thumbnail { grid-area: thumb; }
	.woocommerce-cart .shop_table.cart .product-name     { grid-area: name; }
	.woocommerce-cart .shop_table.cart .product-price    { grid-area: price; }
	.woocommerce-cart .shop_table.cart .product-quantity { grid-area: qty; margin-top: 8px; }
	.woocommerce-cart .shop_table.cart .product-remove   { grid-area: remove; width: auto; padding: 0; }

	/* Общата сума на реда дублира цената при 1 бр. — скрива се */
	.woocommerce-cart .shop_table.cart .product-subtotal {
		display: none !important;
	}

	.woocommerce-cart .shop_table.cart .product-thumbnail img {
		width: 62px;
		height: 62px;
	}

	.woocommerce-cart .shop_table.cart .product-name a {
		font-size: 17px;
		line-height: 1.3;
	}

	/* Редът с промо кода — един под друг */
	.woocommerce-cart .shop_table.cart td.actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 16px 14px;
	}

	.woocommerce-cart .shop_table.cart td.actions .coupon {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.woocommerce-cart .shop_table.cart td.actions .button,
	.woocommerce-cart .shop_table.cart td.actions input[type="text"] {
		width: 100% !important;
	}
}

/* ==========================================================================
   Блог — списък със публикации (`qodef--list`)

   Само списъкът; единичният пост е `qodef--single` и остава с голямата снимка.

   Три поправки:
   1. Водещата снимка се рендерираше в естествено съотношение → 1313x876px за
      ЕДНА публикация, т.е. цял екран и половина. За списък се ограничава.
   2. Датата е абсолютно позиционирана върху снимката. Ако пост няма водеща
      снимка, блокът се свива и датата пада върху текста — затова `min-height`.
   3. Месецът се изписваше в Tesla, който няма ъ/я/й/ю → 4 от 12 български
      месеца (януари, май, юни, юли) излизаха с половин дума в резервен шрифт.
   ========================================================================== */

.qodef-blog.qodef--list .qodef-blog-item {
	--dd-bronze: #8b6f4e;
	--dd-cocoa: #241c15;
	--dd-line: #e7e0d6;
	--dd-radius: 14px;
}

.qodef-blog.qodef--list .qodef-e-media {
	min-height: 90px;
}

.qodef-blog.qodef--list .qodef-e-media-image {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: var(--dd-radius);
	background-color: #f6f2ec;
}

.qodef-blog.qodef--list .qodef-e-media-image a,
.qodef-blog.qodef--list .qodef-e-media-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.qodef-blog.qodef--list .qodef-e-media-image img {
	object-fit: cover;
	transition: transform .8s cubic-bezier(.37, 0, .63, 1);
}

.qodef-blog.qodef--list .qodef-blog-item:hover .qodef-e-media-image img {
	transform: scale(1.03);
}

/* Датата — бяло „етикетче“ в ъгъла на снимката */
.qodef-blog.qodef--list .entry-date {
	top: 14px;
	left: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 58px;
	height: auto;
	padding: 9px 12px 10px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(36, 28, 21, .08);
	z-index: 3;
}

.qodef-blog.qodef--list .entry-date .qodef--day {
	font-family: 'Marcellus', serif;
	font-size: 22px;
	line-height: 1;
	color: var(--dd-cocoa);
}

.qodef-blog.qodef--list .entry-date .qodef--month {
	margin-top: 3px;
	font-size: 11px;
	letter-spacing: .12em;
}

/* Месецът в датата — ГЛОБАЛНО, не само в списъка.
   Темата го изписва в Tesla, който няма ъ/я/й/ю, тоест ЯНУАРИ, МАЙ, ЮНИ и ЮЛИ
   излизат с половин дума в резервен шрифт. Важи и за сайдбара („Последни
   публикации“), и за единичния пост. */
.qodef--month,
.entry-date .qodef--month {
	font-family: 'Lato', sans-serif !important;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: #8b6f4e;
}

.qodef-blog.qodef--list .qodef-e-content {
	padding-top: 20px;
}

@media (max-width: 680px) {
	.qodef-blog.qodef--list .qodef-e-media-image {
		aspect-ratio: 3 / 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qodef-blog.qodef--list .qodef-e-media-image img {
		transition: none;
	}

	.qodef-blog.qodef--list .qodef-blog-item:hover .qodef-e-media-image img {
		transform: none;
	}
}

/* ==========================================================================
   Кръглият печат на началната и „За нас“

   Замести демо значката на темата („Avelina Chocolate“, 312px, светъл бронз).
   Печатът на Deux Dames е с плътен черен контур и се четеше твърде тежко на
   345px — свит е, за да остане декоративен акцент до снимката.
   Ако някой пресъздаде widget-а в Elementor, ID-то се сменя и правилото просто
   спира да важи — нищо не се чупи.

   `.elementor-widget` в селектора не е излишно: Elementor слага
   `.elementor img { max-width: 100% }` — същата специфичност като
   `.elementor-element-XXX img`, а frontend.css се зарежда СЛЕД child темата,
   така че без допълнителния клас Elementor печели.
   ========================================================================== */

.elementor-widget.elementor-element-f5d85bb img {
	max-width: 280px;
}

@media (max-width: 880px) {
	.elementor-widget.elementor-element-f5d85bb img {
		max-width: 200px;
	}
}

/* ==========================================================================
   Продуктова карта — важи НАВСЯКЪДЕ

   Обхват: `.qodef-woo-product-list` е обвивката на всяка продуктова решетка в
   сайта — магазин, категории, търсене, „Препоръчани“ на продуктовата страница
   и Elementor секциите на началната. Затова е базовият селектор, а не
   `.woocommerce ul.products` — на началната списъкът е `ul.qodef-grid-inner`
   и остава извън него.

   Защо е пренаписана: темата слага мини-лента с действия АБСОЛЮТНО в центъра
   на снимката (`.qodef-e-media-inner`, top/left 200px), скрива бутона за
   кошница с `opacity: 0` до hover и разчита wishlist-ът да е само иконка.
   YITH обаче рендерира иконка + текст („Добави в любими“), лентата става
   212px широка, прелива извън картата и стои върху продукта.

   Тук: снимката отива в топла рамка с еднакъв вътрешен отстъп (packshot-овете
   са на бял фон с продукт в различен размер — рамката ги изравнява оптически),
   а действията са ВИНАГИ видими в лента, долепена до долния ръб на рамката.
   Hover-only действия не работят на телефон и не са интуитивни.
   ========================================================================== */

.qodef-woo-product-list li.product {
	--dd-bronze: #8b6f4e;
	--dd-bronze-deep: #6f573c;
	--dd-cocoa: #241c15;
	--dd-frame: #f6f2ec;
	--dd-frame-hover: #f1ebe1;
	--dd-line: #e7e0d6;
	--dd-muted: #6b6660;
	--dd-radius: 14px;
}

/* Еднаква височина на картите в реда */
.qodef-woo-product-list li.product .qodef-e-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* --- Рамка на снимката --- */
.qodef-woo-product-list li.product .qodef-e-media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--dd-frame);
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius);
	/* клипва лентата с действия по радиуса на рамката */
	overflow: hidden;
	transition: background-color .4s ease, border-color .4s ease;
}

.qodef-woo-product-list li.product:hover .qodef-e-media {
	background-color: var(--dd-frame-hover);
	border-color: #dcd2c3;
}

.qodef-woo-product-list li.product .qodef-e-media-image {
	display: block;
	position: absolute;
	inset: 0;
	/* 26px отстрани оставяха packshot-а дребен в рамката — при две колони на
	   телефон от 163px карта за снимката оставаха 111px. Долният отстъп е за
	   лентата с бутона и не се пипа. */
	padding: 16px 16px 60px;
	box-sizing: border-box;
}

/* На телефон рамката е малка и всеки пиксел се вижда — стеснява се още. */
@media (max-width: 680px) {
	.qodef-woo-product-list li.product .qodef-e-media-image {
		padding-top: 8px;
		padding-left: 8px;
		padding-right: 8px;
	}
}

.qodef-woo-product-list li.product .qodef-e-media-image > a {
	display: block;
	width: 100%;
	height: 100%;
}

.qodef-woo-product-list li.product .qodef-e-media-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .6s cubic-bezier(.37, 0, .63, 1);
}

.qodef-woo-product-list li.product:hover .qodef-e-media-image img {
	transform: scale(1.04);
}

/* Темата слага бял ::after overlay върху снимката и го вдига до 70% при hover,
   за да се четат централните бутони. Лентата с действия си има собствен фон,
   така че overlay-ът само измива продукта. */
.qodef-woo-product-list li.product .qodef-e-media-image a:after,
.qodef-woo-product-list .qodef-e-inner:hover .qodef-e-media-image a:after {
	opacity: 0 !important;
}

/* Празният overlay-линк на темата не бива да покрива лентата с действия */
.qodef-woo-product-list li.product .qodef-e-media > a.woocommerce-LoopProduct-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* --- Лента с действия: винаги видима, долепена до долния ръб --- */
.qodef-woo-product-list li.product .qodef-e-media-inner {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	margin: 0;
	display: flex;
	align-items: stretch;
	opacity: 1;
	visibility: visible;
	transform: none;
	z-index: 9;
	border-top: 1px solid var(--dd-line);
}

/* Бутон „в кошницата“.
   !important е нужен: темата налага font-size:0, padding:0, width:46px и
   margin-right:-2px с !important, за да го направи иконка. `color` минава през
   `#qodef-woo-page .button` — ID селектор бие всякакъв брой класове, иначе
   надписът е бял на бяло. */
.qodef-woo-product-list li.product .qodef-e-media-inner .add_to_cart_button,
.qodef-woo-product-list li.product .qodef-e-media-inner .added_to_cart {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	height: 46px !important;
	padding: 0 12px !important;
	margin: 0 !important;
	opacity: 1;
	visibility: visible;
	transform: none;
	/* Тиха по подразбиране — продуктите водят. Бронзова при hover/фокус.
	   Бяло на топлата рамка дава ясен ръб, така че се чете като бутон и
	   без hover (важно за телефон). */
	background-color: #fff !important;
	color: var(--dd-bronze) !important;
	font-family: 'Lato', sans-serif;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 0;
	border-radius: 0;
	transition: background-color .3s ease, color .3s ease;
}

.qodef-woo-product-list li.product .qodef-e-media-inner .add_to_cart_button:focus-visible,
.qodef-woo-product-list li.product:hover .qodef-e-media-inner .add_to_cart_button,
.qodef-woo-product-list li.product:hover .qodef-e-media-inner .added_to_cart {
	background-color: var(--dd-bronze) !important;
	color: #fff !important;
}

.qodef-woo-product-list li.product .qodef-e-media-inner .add_to_cart_button:hover,
.qodef-woo-product-list li.product .qodef-e-media-inner .added_to_cart:hover {
	background-color: var(--dd-bronze-deep) !important;
	color: #fff !important;
}

/* Скриваме иконките, които темата слага вътре в бутоните — вече има текст.
   Важи и за „Виж кошницата“ след добавяне, иначе остава знак вляво. */
.qodef-woo-product-list li.product .qodef-e-media-inner .add_to_cart_button svg,
.qodef-woo-product-list li.product .qodef-e-media-inner .add_to_cart_button:before,
.qodef-woo-product-list li.product .qodef-e-media-inner .add_to_cart_button:after,
.qodef-woo-product-list li.product .qodef-e-media-inner .added_to_cart svg,
.qodef-woo-product-list li.product .qodef-e-media-inner .added_to_cart:before,
.qodef-woo-product-list li.product .qodef-e-media-inner .added_to_cart:after {
	display: none;
}

/* --- Любими: само иконка, без текст --- */
.qodef-woo-product-list li.product .yith-add-to-wishlist-button-block {
	flex: 0 0 46px;
	width: 46px;
	margin: 0;
}

.qodef-woo-product-list li.product .yith-wcwl-add-to-wishlist-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	background-color: #fff;
	border: 0;
	border-left: 1px solid var(--dd-line);
	border-radius: 0;
	color: var(--dd-bronze);
	transition: background-color .3s ease, color .3s ease;
}

.qodef-woo-product-list li.product .yith-wcwl-add-to-wishlist-button:hover,
.qodef-woo-product-list li.product .yith-wcwl-add-to-wishlist-button:focus-visible {
	background-color: var(--dd-bronze);
	color: #fff;
}

.qodef-woo-product-list li.product .yith-wcwl-add-to-wishlist-button svg {
	width: 17px;
	height: 17px;
	margin: 0;
}

/* Текстът остава само за екранни четци */
.qodef-woo-product-list li.product .yith-wcwl-add-to-wishlist-button__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Текстова част: категория → име → цена --- */
.qodef-woo-product-list li.product .qodef-e-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 18px 0 0;
	text-align: left;
}

.qodef-woo-product-list li.product .qodef-e-content .qodef-e-bottom-holder {
	order: 1;
	margin: 0;
}

.qodef-woo-product-list li.product .qodef-e-content .qodef-woo-product-title {
	order: 2;
	margin: 0;
}

.qodef-woo-product-list li.product .qodef-e-content .price {
	order: 3;
	margin: 0;
}

/* Категория — надзаглавие */
.qodef-woo-product-list li.product .qodef-e-info,
.qodef-woo-product-list li.product .qodef-e-info a {
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dd-muted);
}

.qodef-woo-product-list li.product .qodef-e-info a:hover {
	color: var(--dd-bronze);
}

/* Разделителят на темата между категориите не е нужен тук */
.qodef-woo-product-list li.product .qodef-info-separator-end {
	display: none;
}

/* Име на продукта — серифът на сайта */
.qodef-woo-product-list li.product .qodef-woo-product-title,
.qodef-woo-product-list li.product .qodef-woo-product-title a {
	font-family: 'Marcellus', serif;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--dd-cocoa);
}

.qodef-woo-product-list li.product .qodef-woo-product-title a:hover {
	color: var(--dd-bronze);
}

/* Цена */
.qodef-woo-product-list li.product .price,
.qodef-woo-product-list li.product .price .amount,
.qodef-woo-product-list li.product .price bdi {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--dd-bronze);
}

/* Видим фокус за клавиатура */
.qodef-woo-product-list li.product a:focus-visible,
.qodef-woo-product-list li.product .add_to_cart_button:focus-visible {
	outline: 2px solid var(--dd-bronze);
	outline-offset: 2px;
}

@media (max-width: 680px) {
	.qodef-woo-product-list li.product .qodef-e-media-image {
		padding: 16px 16px 54px;
	}

	.qodef-woo-product-list li.product .qodef-woo-product-title,
	.qodef-woo-product-list li.product .qodef-woo-product-title a {
		font-size: 19px;
	}

	.qodef-woo-product-list li.product .qodef-e-media-inner .add_to_cart_button,
	.qodef-woo-product-list li.product .qodef-e-media-inner .added_to_cart {
		font-size: 11px !important;
		letter-spacing: .1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qodef-woo-product-list li.product .qodef-e-media,
	.qodef-woo-product-list li.product .qodef-e-media-image img,
	.qodef-woo-product-list li.product .add_to_cart_button,
	.qodef-woo-product-list li.product .yith-wcwl-add-to-wishlist-button {
		transition: none;
	}

	.qodef-woo-product-list li.product:hover .qodef-e-media-image img {
		transform: none;
	}
}

/* ==========================================================================
   Мобилна версия

   Темата и Elementor носят десктоп стойностите непроменени под 768px:
   секциите пазят 110–175px вертикален падинг, продуктовите мрежи падат на
   една колона, а мобилният хедър е само лого + хамбургер. Тук се коригира
   само това, което реално се чупи или яде екран на телефон.
   ========================================================================== */

/* --- Вертикалният ритъм на Elementor ---
   Elementor изнася падинга на всеки контейнер като `--padding-top/-bottom`,
   така че `min()` сваля само едрите стойности и оставя нулевите нула — без да
   се изброява всяка секция поотделно и без да се пипа съдържанието в редактора.
   Преди това началната страница беше 19 200px на 390px екран, около 24 екрана. */
@media (max-width: 767px) {
	.elementor .e-con {
		padding-top: min(var(--padding-top, 0px), 56px);
		padding-bottom: min(var(--padding-bottom, 0px), 56px);
	}
}

/* --- Кошница в мобилния хедър ---
   Десктоп хедърът с кошницата е в DOM-а, но е `display: none` под 1024px —
   клиент от телефон нямаше как да види броя продукти, нито да стигне до
   кошницата. Джаджата се извежда от `dd_mobile_header_cart()`. */
#qodef-page-mobile-header-inner {
	align-items: center;
	gap: 2px;
}

#qodef-page-mobile-header .qodef-mobile-header-logo-link {
	order: 1;
	margin-right: auto;
}

/* Кошницата седи в `.qodef-widget-holder` — това е flex детето, което се нарежда,
   а темата му дава `order: 0`, тоест излизаше най-вляво, върху логото. */
#qodef-page-mobile-header .qodef-widget-holder {
	order: 2;
	display: flex;
	align-items: center;
}

#qodef-page-mobile-header .qodef-opener-icon {
	order: 3;
}

/* Падащият панел е десктоп поведение — на телефон опенърът води право към
   /cart/. Панелът остава в DOM-а, защото WooCommerce подменя целия
   `.qodef-widget-dropdown-cart-inner` при добавяне и броячът се обновява сам. */
#qodef-page-mobile-header .qodef-widget-dropdown-cart-content {
	display: none !important;
}

#qodef-page-mobile-header .dd-mobile-header-cart .qodef-m-opener {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: inherit;
}

#qodef-page-mobile-header .dd-mobile-header-cart .qodef-m-opener-icon svg {
	display: block;
	width: 21px;
	height: 21px;
}

/* Джаджата е разпъната на 70px (височината на реда), а вътрешният ѝ блок е
   44px и лягаше в горния край — торбичката излизаше 13px над логото и
   хамбургера. Затова центрираме. */
#qodef-page-mobile-header .dd-mobile-header-cart {
	display: flex;
	align-items: center;
}

/* Значката се закача за 44px тап-таргета, а иконката е 21px в средата му —
   с `top: 3px; right: 0` числото увисваше горе-вдясно, встрани от торбичката.
   4px от двата ръба я слагат точно в горния ъгъл на самата иконка, както е и
   в десктоп хедъра. */
#qodef-page-mobile-header .dd-mobile-header-cart .qodef-m-opener-count {
	position: absolute;
	top: 4px;
	right: 4px;
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	margin: 0;
	padding: 0 4px;
	background-color: var(--dd-bronze);
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	border-radius: 8px;
}

/* Хамбургерът беше 30×9px — далеч под минимума за пръст. */
#qodef-page-mobile-header .qodef-opener-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* --- Продуктова карта: „Добави в кошницата“ се режеше ---
   На 390px екран картата в две колони е ~166px, бутонът получава 136px, а
   надписът иска 157px. Темата е с `white-space: nowrap; overflow: hidden`,
   тоест на всяка карта пишеше „ОБАВИ В КОШНИЦАТ“. Позволяваме втори ред и
   смъкваме разредката — проверено до 320px без рязане. */
@media (max-width: 560px) {
	.qodef-woo-product-list li.product .qodef-e-media-inner .add_to_cart_button,
	.qodef-woo-product-list li.product .qodef-e-media-inner .added_to_cart {
		height: auto !important;
		min-height: 46px;
		padding: 7px 8px !important;
		font-size: 10px !important;
		letter-spacing: .06em;
		line-height: 1.3;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	/* Мястото отдолу беше 64px, защото „Добави в кошницата“ се пренасяше на два
	   реда. Етикетът вече е само „Добави“ и се събира на един — останалото се
	   връща на снимката. */
	.qodef-woo-product-list li.product .qodef-e-media-image {
		padding-bottom: 54px;
	}
}

/* --- Продуктови мрежи: две колони вместо една ---
   Темата слага `grid-template-columns: 1fr` под 680px. Магазинът ставаше
   8 500px за 12 продукта; на две колони е 4 400px. Важи и за „Подобни“. */
@media (max-width: 680px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 12px !important;
		row-gap: 26px !important;
	}
}

/* --- Плочките с категории: бял текст върху светла снимка ---
   „МАРЦИПАН“ и „БЕЗ ЗАХАР“ бяха практически нечетими. Overlay-ът на темата е
   лента, висока 67px, залепена за долния ръб, а заглавието стои над нея —
   тоест горната му половина падаше върху голата снимка. Разпъваме го върху
   цялата плочка; hover няма на телефон, затова е постоянно видим. */
@media (max-width: 1024px) {
	.qodef-woo-product-category-list.qodef-skin--light .qodef-e-category-overlay {
		top: 0 !important;
		height: auto !important;
		opacity: 1 !important;
		background-image: linear-gradient(to top, rgba(36, 28, 21, .62) 0%, rgba(36, 28, 21, .46) 38%, rgba(36, 28, 21, .18) 100%) !important;
	}

	.qodef-woo-product-category-list.qodef-skin--light .qodef-e-category-title-wrapper {
		z-index: 2;
	}
}

/* ==========================================================================
   Подаръчна торбичка

   Изборът стои във формата за добавяне, над количеството. Две карти вместо
   чекбокс: решението е част от подаръка, не служебна отметка, затова заема
   място и се чете отдалече. Нативните radio-та са скрити, но остават в
   таб-реда — стилизира се `+ .dd-gift-bag__box`.
   ========================================================================== */

/* `form.cart` е flex ред без пренасяне: количество и бутон стоят до избора и
   го смачкват на ~215px. Даваме на избора собствен ред. */
.woocommerce div.product form.cart {
	flex-wrap: wrap;
}

.woocommerce div.product form.cart .dd-gift-bag {
	flex: 1 0 100%;
	width: 100%;
}

.dd-gift-bag {
	margin: 0 0 26px;
	padding: 0;
	border: 0;
}

.dd-gift-bag__legend {
	float: none;
	width: auto;
	padding: 0;
	margin-bottom: 12px;
	font-family: 'Lato', sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dd-muted);
}

.dd-gift-bag__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	gap: 10px;
}

.dd-gift-bag__option {
	display: block;
	margin: 0;
	cursor: pointer;
}

/* Скрито, но фокусируемо — не `display: none`. */
.dd-gift-bag__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.dd-gift-bag__box {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-height: 68px;
	height: 100%;
	/* ляво място за иконката, дясно за кръгчето */
	padding: 13px 40px 13px 54px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 17px center;
	background-size: 24px 24px;
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius-sm);
	transition: border-color .25s ease, background-color .25s ease;
}

/* Иконките са inline SVG в data URI, а не отделни файлове: редакторът в админа
   не качва нови файлове, а CSS-ът минава — така целият блок пътува с този файл.
   Кутия без торбичка = кутия с панделка, с торбичка = торбичка с дръжки. */
.dd-gift-bag__option input[value="0"] + .dd-gift-bag__box {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b6f4e' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='7.8' width='17.6' height='12.4' rx='1.6'/%3E%3Cpath d='M3.2 12.4h17.6M12 7.8v12.4'/%3E%3Cpath d='M12 7.8C10.4 5.2 8.9 4 7.7 4.4 6.4 4.9 6.6 7 8.4 7.8M12 7.8c1.6-2.6 3.1-3.8 4.3-3.4 1.3.5 1.1 2.6-.7 3.4'/%3E%3C/svg%3E");
}

.dd-gift-bag__option input[value="1"] + .dd-gift-bag__box {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b6f4e' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.3 8h15.4l-1.2 12.2H5.5z'/%3E%3Cpath d='M8.7 8V6.3a3.3 3.3 0 0 1 6.6 0V8'/%3E%3C/svg%3E");
}

/* Иконката изяжда 94px хоризонтален падинг. На 390px картите в две колони са
   163px, тоест за текста остават 67px и „С подаръчна торбичка“ се чупи на три
   реда с едно „С“ на първия. Под 560px минаваме на една колона на цяла ширина —
   иконка и надпис се събират на един ред. */
@media (max-width: 560px) {
	.dd-gift-bag__options {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.dd-gift-bag__box {
		min-height: 60px;
		padding-top: 11px;
		padding-bottom: 11px;
	}
}

/* Кръгчето вдясно — рисувано, за да е в тона на сайта, а не системно. */
.dd-gift-bag__box::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 1px solid var(--dd-line);
	border-radius: 50%;
	transition: border-color .25s ease;
}

.dd-gift-bag__box::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background-color: var(--dd-bronze);
	border-radius: 50%;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .2s ease, transform .2s ease;
}

.dd-gift-bag__name {
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .03em;
	color: var(--dd-cocoa);
}

.dd-gift-bag__note {
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	line-height: 1.3;
	color: var(--dd-muted);
}

/* Добавката се чете като цена, не като пояснение. */
.dd-gift-bag__option input[value="1"] + .dd-gift-bag__box .dd-gift-bag__note {
	font-weight: 700;
	color: var(--dd-bronze);
}

.dd-gift-bag__option:hover .dd-gift-bag__box {
	border-color: var(--dd-bronze);
}

.dd-gift-bag__option input:checked + .dd-gift-bag__box {
	background-color: var(--dd-frame);
	border-color: var(--dd-bronze);
}

.dd-gift-bag__option input:checked + .dd-gift-bag__box::before {
	border-color: var(--dd-bronze);
}

.dd-gift-bag__option input:checked + .dd-gift-bag__box::after {
	opacity: 1;
	transform: scale(1);
}

.dd-gift-bag__option input:focus-visible + .dd-gift-bag__box {
	outline: 2px solid var(--dd-bronze);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.dd-gift-bag__box,
	.dd-gift-bag__box::before,
	.dd-gift-bag__box::after {
		transition: none;
	}
}

/* ==========================================================================
   Кошница — подравняване и дишане

   Двуколонната подредба е наша, а темата още смята, че блокът с общата сума
   стои под таблицата. Оттам идваха и трите видими проблема: сумата започваше
   93px по-надолу, редът с промо кода опираше в заоблените ръбове на картата,
   а линкът за изчисляване на доставка се качваше с отрицателен margin върху
   бележката до него.
   ========================================================================== */

/* Темата бута сумата надолу за едноколонната подредба. ID селектор — иначе
   `#qodef-woo-page.qodef--cart .cart_totals` бие всеки клас. */
#qodef-woo-page.qodef--cart .cart_totals {
	margin-top: 0 !important;
}

/* Клетките на таблицата бяха с `padding: 15px 0` — съдържанието опираше в
   ръба на картата, а тя е с радиус 14px. */
.woocommerce-cart .shop_table th:first-child,
.woocommerce-cart .shop_table td:first-child {
	padding-left: 24px;
}

.woocommerce-cart .shop_table th:last-child,
.woocommerce-cart .shop_table td:last-child {
	padding-right: 24px;
}

/* --- Редът с промо кода и обновяването --- */
.woocommerce-cart .shop_table td.actions {
	padding: 22px 24px 24px !important;
	border-top: 1px solid var(--dd-line);
}

.woocommerce-cart .shop_table td.actions .coupon {
	display: flex;
	float: none;
	width: auto;
	gap: 10px;
	align-items: stretch;
}

/* Полето беше без фон и без хоризонтален падинг — четеше се като подчертан
   текст, не като поле за въвеждане. */
.woocommerce-cart .shop_table td.actions .coupon .input-text {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 260px;
	padding: 11px 14px !important;
	background-color: #fff;
	border: 1px solid var(--dd-line);
}

/* Двата плътни бронзови бутона се биеха с „Приключване на поръчката“ вдясно —
   това са помощни действия, затова минават в тих вариант. */
#qodef-woo-page .woocommerce-cart .shop_table td.actions .button,
.woocommerce-cart .shop_table td.actions .button {
	width: auto !important;
	padding: 13px 22px !important;
	background-color: #fff !important;
	border: 1px solid var(--dd-line) !important;
	color: var(--dd-cocoa) !important;
	white-space: nowrap;
}

#qodef-woo-page .woocommerce-cart .shop_table td.actions .button:hover,
.woocommerce-cart .shop_table td.actions .button:hover {
	background-color: var(--dd-frame) !important;
	border-color: var(--dd-bronze) !important;
	color: var(--dd-cocoa) !important;
}

/* --- Блокът с доставката ---
   Калкулаторът на WooCommerce иска държава, област и пощенски код, а нашият
   checkout събира само име, телефон и имейл — Еконт поема адреса през своя
   виджет. Тоест линкът не води доникъде и бележката до него го казва.
   Скрит е; за връщане — махни това правило. */
#qodef-woo-page.qodef--cart .cart_totals .woocommerce-shipping-calculator {
	display: none !important;
}

#qodef-woo-page.qodef--cart .cart_totals .woocommerce-shipping-destination {
	margin: 8px 0 0 !important;
}

#qodef-woo-page.qodef--cart .cart_totals tr.shipping th {
	padding-bottom: 4px;
}

/* „(включва … ДДС)“ се чупеше на три реда в тясната колона */
#qodef-woo-page.qodef--cart .cart_totals .order-total .includes_tax,
#qodef-woo-page.qodef--cart .cart_totals small.includes_tax {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	white-space: nowrap;
}

/* ==========================================================================
   Продуктова страница

   Темата подрежда снимката и данните в две колони над 1024px, но всичко
   останало е по подразбиране: packshot на бял фон върху бяла страница (снимката
   виси в празно), цената е с размера на обикновен текст, а разделът с описание
   е сива кутия.

   Тук страницата се подрежда по същия език като продуктовите карти в магазина
   — топла рамка около снимката, ясна йерархия заглавие → цена → опаковка →
   купуване, и раздели с бронзов подчерт вместо сиви кутии.
   ========================================================================== */

/* --- Снимката в топла рамка, същата като на картите в магазина --- */
#qodef-woo-page.qodef--single .qodef-woo-single-image {
	padding: 24px;
	background-color: var(--dd-frame);
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius);
	box-sizing: border-box;
}

/* Рамката вече дава фона; сивото каре на самата галерия щеше да се удвои. */
#qodef-woo-page.qodef--single .woocommerce-product-gallery__image {
	background-color: transparent;
}

/* Packshot-ите са на бял фон — вътре в топлата рамка бялото се чете като
   картичка. Заоблените ръбове и тънката линия ѝ дават край. */
#qodef-woo-page.qodef--single .woocommerce-product-gallery__image img {
	border-radius: var(--dd-radius-sm);
}

/* Миникартинките под голямата — в тон с рамката, без бяло каре. */
#qodef-woo-page.qodef--single .qodef-woo-thumbnails-wrapper {
	margin-top: 18px;
}

#qodef-woo-page.qodef--single .qodef-woo-thumbnails-wrapper img {
	background-color: #fff;
	border: 1px solid var(--dd-line);
	border-radius: var(--dd-radius-sm);
}

/* --- Йерархия в дясната колона --- */
#qodef-woo-page.qodef--single .qodef-woo-product-title {
	margin-bottom: 4px;
	line-height: 1.12;
}

/* Цената беше 18px Lato — колкото обикновен абзац. При една цена на екрана тя
   е второто нещо след името и трябва да се чете като цена. */
#qodef-woo-page.qodef--single .summary > .price {
	margin: 10px 0 0;
	font-size: 26px;
	line-height: 1.2;
	color: var(--dd-bronze-deep);
	letter-spacing: .01em;
}

#qodef-woo-page.qodef--single .summary > .price .woocommerce-Price-currencySymbol {
	font-size: .78em;
	margin-left: 2px;
}

/* Тънка линия между цената и избора на опаковка — разделя „какво е“ от
   „как го купувам“, без да добавя тежест. */
#qodef-woo-page.qodef--single .summary form.cart {
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid var(--dd-line);
}

/* --- Ред за купуване: количество и бутон с еднаква височина --- */
#qodef-woo-page.qodef--single .qodef-quantity-buttons.quantity {
	margin: 0 12px 0 0;
	height: 52px;
}

#qodef-woo-page.qodef--single .qodef-quantity-buttons.quantity input.qty {
	height: 52px;
}

#qodef-woo-page.qodef--single .single_add_to_cart_button {
	min-width: 190px;
	height: 52px;
	padding: 0 46px;
	line-height: 52px;
}

/* --- Мета данните под бутона --- */
#qodef-woo-page.qodef--single .product_meta {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--dd-line);
	font-size: 15px;
}

#qodef-woo-page.qodef--single .product_meta .qodef-woo-meta-label {
	color: var(--dd-muted);
}

/* --- Раздели: подчерт вместо сива кутия --- */
#qodef-woo-page.qodef--single .woocommerce-tabs {
	margin-top: 64px;
}

#qodef-woo-page.qodef--single .woocommerce-tabs ul.tabs {
	display: flex;
	/* темата ги подрежда в колона под 680px — два подчертани надписа се събират
	   на един ред и там, а една под друга приличат на счупен списък */
	flex-direction: row;
	flex-wrap: wrap;
	gap: 34px;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--dd-line);
}

#qodef-woo-page.qodef--single .woocommerce-tabs ul.tabs li {
	/* темата им дава фиксирана ширина; надписите да са по мярка */
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

#qodef-woo-page.qodef--single .woocommerce-tabs ul.tabs li a {
	display: block;
	/* темата дава на връзката min-width: 200px — подчертаването излизаше
	   далеч след надписа */
	min-width: 0;
	width: auto;
	padding: 0 0 14px;
	background: none;
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dd-muted);
	border-bottom: 2px solid transparent;
	transition: color .25s ease, border-color .25s ease;
}

#qodef-woo-page.qodef--single .woocommerce-tabs ul.tabs li a:hover {
	color: var(--dd-cocoa);
}

/* Сивото каре на активния раздел идва от правило със същата тежест като нашето
   по-горе, но за `li.active a` — затова се маха точно тук. */
#qodef-woo-page.qodef--single .woocommerce-tabs ul.tabs li.active a {
	color: var(--dd-cocoa);
	background: none;
	border-bottom-color: var(--dd-bronze);
}

/* Темата дава на панела сив фон и вътрешен отстъп; с подчертаните раздели
   кутията е излишна. Селекторът минава през `.woocommerce-tabs`, за да е
   по-специфичен от нейния. */
#qodef-woo-page.qodef--single .woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: 760px;
	margin-top: 30px;
	padding: 0;
	background: none;
}

@media only screen and (min-width: 1025px) {
	/* Снимката е висока, дясната колона свършва по-рано — при скрол данните
	   остават пред очите, вместо да излязат нагоре. */
	#qodef-woo-page.qodef--single .qodef-woo-single-inner {
		align-items: start;
		gap: 56px;
	}

	#qodef-woo-page.qodef--single .entry-summary {
		position: sticky;
		top: 130px;
	}
}

@media only screen and (max-width: 680px) {
	#qodef-woo-page.qodef--single .qodef-woo-single-image {
		padding: 14px;
	}

	#qodef-woo-page.qodef--single .summary > .price {
		font-size: 22px;
	}

	/* На тесен екран бутонът заема остатъка от реда, вместо да се пренася сам. */
	#qodef-woo-page.qodef--single .single_add_to_cart_button {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 20px;
	}

	#qodef-woo-page.qodef--single .woocommerce-tabs ul.tabs {
		gap: 22px;
	}
}

/* ==========================================================================
   Брояч на кошницата в десктоп хедъра

   Темата слага числото като обикновен текст до иконката (`margin-left: 3px`),
   тоест до торбичката виси самотна цифра, която не е подравнена нито с нея,
   нито с останалите иконки в реда. Става значка в ъгъла на торбичката — както
   е в мобилния хедър, за да са еднакви двата.

   Обхватът е само десктоп хедърът и залепващият му вариант; мобилният има
   собствени правила по-горе и не се пипа оттук.
   ========================================================================== */

#qodef-page-header .widget_avelina_core_woo_dropdown_cart .qodef-m-opener,
.qodef-header-sticky .widget_avelina_core_woo_dropdown_cart .qodef-m-opener {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
}

#qodef-page-header .widget_avelina_core_woo_dropdown_cart .qodef-m-opener-icon,
.qodef-header-sticky .widget_avelina_core_woo_dropdown_cart .qodef-m-opener-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

#qodef-page-header .widget_avelina_core_woo_dropdown_cart .qodef-m-opener-count,
.qodef-header-sticky .widget_avelina_core_woo_dropdown_cart .qodef-m-opener-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 16px;
	height: 16px;
	margin: 0;
	padding: 0 4px;
	box-sizing: border-box;
	background-color: var(--dd-bronze);
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	border-radius: 8px;
}

/* ==========================================================================
   Продуктова карта: категория, име и цена в средата

   `.qodef-e-content` е flex колона, а `.price` — flex ред. Затова
   `text-align: center` не ги местеше: подравняването на flex деца минава през
   `align-items` и `justify-content`. Категорията и цената висяха вляво, докато
   името изглеждаше центрирано само защото кутията му е на цялата ширина.
   ========================================================================== */

.qodef-woo-product-list li.product .qodef-e-content {
	align-items: center;
	text-align: center;
}

.qodef-woo-product-list li.product .price {
	justify-content: center;
}

/* ==========================================================================
   Кошницата на телефон — специфичност

   Подредбата по-горе (`thumb / name / price / qty / remove`) не се прилагаше:
   темата задава колоните на реда и разположението на клетките с ID селектор
   (`#qodef-woo-page.qodef--cart .woocommerce-cart-form .shop_table tr`), който
   бие всеки брой класове. Мрежата оставаше на 4 колони, а именуваните области
   си създаваха свои — оттам излизаха шест колони и разбърканата карта:
   името се събираше в 95px и се пренасяше на три реда, а количеството,
   снимката и „×“ падаха един под друг.

   Тук същите правила се повтарят с ID префикс, за да надделеят. Без
   `grid-column: auto` след `grid-area` — то трие разположението от областта.
   ========================================================================== */

@media (max-width: 680px) {
	#qodef-woo-page.qodef--cart .woocommerce-cart-form .shop_table.cart tbody tr.cart_item {
		grid-template-columns: 62px minmax(0, 1fr) 34px;
		grid-template-areas:
			"thumb name remove"
			"thumb price remove"
			"qty   qty   qty";
	}

	#qodef-woo-page.qodef--cart .woocommerce-cart-form .shop_table.cart tr.cart_item td.product-thumbnail {
		grid-area: thumb;
		width: 62px;
	}

	#qodef-woo-page.qodef--cart .woocommerce-cart-form .shop_table.cart tr.cart_item td.product-name {
		grid-area: name;
	}

	#qodef-woo-page.qodef--cart .woocommerce-cart-form .shop_table.cart tr.cart_item td.product-price {
		grid-area: price;
	}

	#qodef-woo-page.qodef--cart .woocommerce-cart-form .shop_table.cart tr.cart_item td.product-quantity {
		grid-area: qty;
	}

	#qodef-woo-page.qodef--cart .woocommerce-cart-form .shop_table.cart tr.cart_item td.product-remove {
		grid-area: remove;
	}

	#qodef-woo-page.qodef--cart .woocommerce-cart-form .shop_table.cart tr.cart_item td.product-thumbnail img {
		width: 62px;
		height: 62px;
	}
}

/* ==========================================================================
   Галерията на телефон — три в ред вместо една

   Джаджата е с `qodef-col-num--680--1`, тоест под 680px снимките падат на
   една колона: 3 310px само тя, при 14 200px цяла начална страница. Девет
   кадъра на цял екран, през които клиентът трябва да пролиста, за да стигне
   до футъра.

   Подредбата е masonry през Isotope — позициите са inline, абсолютни, така че
   `grid-template-columns` не ги мести. Isotope обаче смята колоните от
   ширината на `.qodef-grid-masonry-sizer`, а тя идва от CSS. Смени ли се тя,
   подредбата се прави наново — включително при първоначалното зареждане.

   Отстъпът между колоните е 20px и се задава от JS, не от CSS, затова влиза
   в сметката: три колони + два отстъпа трябва да се съберат в ширината.
   Иначе третата не стига и Isotope пуска само две.
   ========================================================================== */

@media (max-width: 680px) {
	.elementor-widget-avelina_core_image_gallery .qodef-grid-masonry-sizer,
	.elementor-widget-avelina_core_image_gallery .qodef-grid-inner > .qodef-grid-item {
		width: calc((100% - 40px) / 3) !important;
	}
}

/* ==========================================================================
   Кошницата на телефон — разстояние от заглавието до продуктите

   `#qodef-page-inner` носи `padding-top: 130px` от десктопа и на телефон. Под
   лентата със „Начало - Кошница“ оставаше 130px празно, преди да се появи
   първото нещо — на 390px екран това е една трета от видимото.

   Само за кошницата; същият падинг стои и на другите страници, но там не е
   поискан.
   ========================================================================== */

@media (max-width: 680px) {
	.woocommerce-cart #qodef-page-inner {
		padding-top: 40px;
	}
}

/* ==========================================================================
   Изчерпан продукт

   Темата има готов етикет (`.qodef-woo-product-mark.qodef-out-of-stock` с текст
   „Изчерпан“), но го рисува като кръгче 50×50 с 14px шрифт — форма за „-20%“,
   не за дума от осем букви. Текстът излизаше извън кръга.

   Тук става продълговат етикет горе вляво, а снимката се приглушава, за да си
   личи отдалече, че продуктът го няма — без да се маха от каталога.
   ========================================================================== */

.qodef-woo-product-list li.product .qodef-woo-product-mark.qodef-out-of-stock,
#qodef-woo-page .qodef-woo-product-mark.qodef-out-of-stock,
.qodef-woo-shortcode .qodef-woo-product-mark.qodef-out-of-stock {
	top: 12px;
	right: auto;
	left: 12px;
	width: auto;
	height: auto;
	padding: 7px 12px;
	background-color: var(--dd-cocoa);
	border-radius: 999px;
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Приглушената снимка казва „няма го“ още преди етикетът да е прочетен. */
.qodef-woo-product-list li.product.outofstock .qodef-e-media-image img {
	opacity: .55;
}

.qodef-woo-product-list li.product.outofstock:hover .qodef-e-media-image img {
	opacity: .65;
}

/* На продуктовата страница WooCommerce изписва наличността като обикновен ред
   текст — става същият етикет, за да е един езикът. */
#qodef-woo-page.qodef--single .summary p.stock.out-of-stock {
	display: inline-block;
	margin: 14px 0 0;
	padding: 8px 14px;
	background-color: var(--dd-cocoa);
	border-radius: 999px;
	font-family: 'Lato', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
}

/* ==========================================================================
   Лента за бисквитки

   Сайтът не зарежда аналитика и не слага нищо освен техническите бисквитки на
   WooCommerce, за които съгласие не се изисква. Лентата е информативна и
   оставя ключ (`dd_consent`), към който да се вържат Google Analytics или
   рекламен пиксел, ако някой ден бъдат добавени — тогава да се зареждат само
   при избор „Приемам“.

   Маркъпът и скриптът живеят в блокова джаджа във футъра, защото редакторът на
   файлове в админа не създава нови файлове, а PHP не минава през него. Ако
   някой ден кодът се премести в плъгина, тези правила остават валидни.
   ========================================================================== */

.dd-consent {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 28px;
	padding: 18px 24px;
	background-color: var(--dd-frame);
	border-top: 1px solid var(--dd-line);
	box-shadow: 0 -6px 24px rgba(36, 28, 21, .08);
}

.dd-consent[hidden] {
	display: none;
}

.dd-consent__text {
	max-width: 720px;
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dd-cocoa);
}

.dd-consent__text a {
	color: var(--dd-bronze-deep);
	text-decoration: underline;
}

.dd-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dd-consent__btn {
	padding: 12px 22px;
	border: 1px solid var(--dd-bronze);
	border-radius: var(--dd-radius-sm);
	font-family: 'Lato', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.dd-consent__btn--solid {
	background-color: var(--dd-bronze);
	color: #fff;
}

.dd-consent__btn--solid:hover {
	background-color: var(--dd-bronze-deep);
	border-color: var(--dd-bronze-deep);
}

.dd-consent__btn--ghost {
	background-color: transparent;
	color: var(--dd-bronze-deep);
}

.dd-consent__btn--ghost:hover {
	background-color: rgba(139, 111, 78, .1);
}

.dd-consent__btn:focus-visible {
	outline: 2px solid var(--dd-bronze-deep);
	outline-offset: 2px;
}

@media (max-width: 680px) {
	.dd-consent {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 16px;
		text-align: left;
	}

	.dd-consent__actions {
		flex-direction: column-reverse;
	}

	.dd-consent__btn {
		width: 100%;
	}
}
