/* =============================================================
   DadsBBQ Child — custom.css
   Базові CSS-змінні бренду + візуальні пакети правок.
   ============================================================= */

/* Глобальний шрифт Montserrat для всього сайту */
body, html, h1, h2, h3, h4, h5, h6, p, a, span, button, input, select, textarea {
	font-family: 'Montserrat', sans-serif !important;
}

/* Відключення підкреслення посилань при наведенні по всьому сайту */
a:hover {
	text-decoration: none !important;
}

/* Повне приховування вбудованого слайдера Betheme */
#Side_slide {
	display: none !important;
}

:root {
	/* ═══════════════════════════════════════════════════════════
	   DAD'S BBQ — ЄДИНА ПАЛІТРА (Quintal del Brasero inspired)
	   Використовувати ці змінні всюди: хедер, футер, головна.
	   ═══════════════════════════════════════════════════════════ */

	/* Акцентні */
	--bbq-terracotta:    #c0432b;  /* основний CTA / акцент-заливка */
	--bbq-terracotta-dk: #9e3522;  /* темніша теракота (hover/градієнт) */
	--bbq-flame:         #e8622a;  /* вогонь — яскравий акцент */
	--bbq-flame-lt:      #f0843e;  /* світліше полум'я */
	--bbq-gold:          #e9a23c;  /* теплий золотий — читабельний акцент на темному */

	/* Нейтральні теплі */
	--bbq-cream:         #ecd8b5;  /* світла секція bg */
	--bbq-cream-soft:    #f4ead7;  /* найсвітліший крем */
	--bbq-brown:         #4a2a1a;  /* глибокий коричневий (текст на кремі) */
	--bbq-slate:         #3e4042;  /* холодний графіт (додатковий) */

	/* Фони / текст */
	--bbq-dark:          #211710;  /* основний темний (теплий) */
	--bbq-dark-2:        #2c2018;  /* темний-2 (секції) */
	--bbq-dark-3:        #34271c;  /* темний-3 (картки) */
	--bbq-darker:        #160f08;  /* найтемніший (низ футера) */
	--bbq-white:         #f6f0e6;  /* тепло-білий текст */
	--bbq-muted:         #a89a87;  /* приглушений теплий сірий */

	/* ── Сумісність: старі назви тепер вказують на нову палітру ── */
	--brand-yellow: var(--bbq-gold);
	--brand-red-1:  var(--bbq-terracotta);
	--brand-red-2:  var(--bbq-terracotta-dk);
	--brand-black:  var(--bbq-dark);
	--brand-white:  var(--bbq-white);
}

/* ============================================================
   VISUAL PACK 01 — Header / Navigation / Cart / CTA
   Target: Betheme header-split + header-semi (theme-dadsbbq)
   CSS-only. Breakpoint мобільного хедера: <= 1240px
   ============================================================ */

/* ------------------------------------------------------------
   1. DESKTOP HEADER
   ------------------------------------------------------------ */

/* 1.1 Верхня смужка контактів — темна, читабельна */
#Action_bar {
	background-color: rgba(0, 0, 0, 0.85);
}
#Action_bar .contact_details li,
#Action_bar .contact_details a {
	color: var(--brand-white);
}
#Action_bar .contact_details .slogan {
	color: var(--brand-yellow);
	font-weight: 600;
}
#Action_bar .contact_details a:hover {
	color: var(--brand-yellow);
}

/* 1.2 Основний бар — напівпрозорий чорний (працює і над слайдером, і в sticky).
   !important: Betheme задає колір top bar інлайном із Theme Options. */
#Top_bar {
	background-color: rgba(0, 0, 0, 0.88) !important;
	border-bottom: 1px solid rgba(233, 162, 60, 0.30);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* 1.3 Типографіка навігації — світлий, крупніший, читабельний текст */
#Top_bar .menu > li > a,
#Top_bar .menu > li > a span {
	color: var(--brand-white);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* hover — акуратний жовтий + тонка нижня лінія */
#Top_bar .menu > li:hover > a,
#Top_bar .menu > li:hover > a span {
	color: var(--brand-yellow);
}
#Top_bar .menu > li:hover > a {
	box-shadow: inset 0 -2px 0 var(--brand-yellow);
}

/* активний пункт — жовтий + жовта лінія */
#Top_bar .menu > li.current-menu-item > a,
#Top_bar .menu > li.current_page_item > a,
#Top_bar .menu > li.current-menu-ancestor > a,
#Top_bar .menu > li.current-menu-item > a span {
	color: var(--brand-yellow);
}
#Top_bar .menu > li.current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--brand-yellow);
}

/* 1.4 Іконка пошуку */
#Top_bar .search_wrapper .icon_search {
	color: var(--brand-white);
}
#Top_bar .search_wrapper .icon_search:hover {
	color: var(--brand-yellow);
}

/* ------------------------------------------------------------
   2. CART — відокремлення від меню (desktop + mobile)
   ------------------------------------------------------------ */
#header_cart {
	display: inline-flex;
	align-items: center;
	color: var(--brand-white);
}
#header_cart .icon-basket {
	color: var(--brand-yellow);
	font-size: 22px;
}
#header_cart:hover .icon-basket {
	color: var(--brand-white);
}

/* лічильник — червоний бейдж (єдине «обережне» використання червоного градієнта).
   Уточнені селектори: top bar + off-canvas. */
#Top_bar #header-cart-count,
#Side_slide #header-cart-count {
	background: linear-gradient(180deg, var(--brand-red-1), var(--brand-red-2));
	color: var(--brand-white);
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	vertical-align: top;
}

/* ------------------------------------------------------------
   3. OFF-CANVAS (#Side_slide) — мобільне меню (вже .dark)
   ------------------------------------------------------------ */
#Side_slide.dark {
	background-color: var(--bbq-dark);
}
#Side_slide .menu_wrapper ul li a {
	color: var(--brand-white);
	font-size: 15px;
	letter-spacing: 0.3px;
}
#Side_slide .menu_wrapper ul li a:hover,
#Side_slide .menu_wrapper ul li.current-menu-item > a {
	color: var(--brand-yellow);
}
#Side_slide #slide-cart .icon-basket {
	color: var(--brand-yellow);
}

/* ------------------------------------------------------------
   4. MOBILE HEADER (<= 1240px)
   ------------------------------------------------------------ */
@media (max-width: 1240px) {

	/* 4.1 Прибрати білий фон → суцільний чорний */
	#Top_bar {
		background-color: var(--brand-black) !important;
		border-bottom: 1px solid rgba(233, 162, 60, 0.30);
	}

	/* 4.2 Логотип — адекватна висота (узгоджено з висотою бару 64px) */
	#Top_bar #logo img.logo-mobile,
	#Top_bar #logo img.logo-mobile-sticky {
		max-height: 44px !important;
		width: auto;
	}

	/* 4.3 Бургер — явно «МЕНЮ»: жовта іконка (без текстової підказки) */
	.responsive-menu-toggle,
	.responsive-menu-toggle i {
		color: var(--brand-yellow) !important;
		font-size: 26px;
	}

	/* 4.4 Кошик — відокремити від навігації (відступ + тонкий розділювач) */
	#Top_bar .top_bar_right {
		padding-left: 12px;
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}
	#header_cart .icon-basket {
		color: var(--brand-yellow) !important;
		font-size: 24px;
	}
}

/* ------------------------------------------------------------
   5. CTA / BUTTONS — єдиний стиль (жовтий → червоний hover)
   ЕТАП 1: checkout-сторінку НЕ чіпаємо (body:not(.woocommerce-checkout)).
   ------------------------------------------------------------ */
body:not(.woocommerce-checkout) .button,
body:not(.woocommerce-checkout) a.button,
body:not(.woocommerce-checkout) button.button,
body:not(.woocommerce-checkout) .woocommerce a.button,
body:not(.woocommerce-checkout) .woocommerce button.button,
body:not(.woocommerce-checkout) .woocommerce input.button {
	background: var(--brand-yellow);
	color: var(--brand-black) !important;
	border: none;
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}
body:not(.woocommerce-checkout) .button:hover,
body:not(.woocommerce-checkout) a.button:hover,
body:not(.woocommerce-checkout) button.button:hover,
body:not(.woocommerce-checkout) .woocommerce a.button:hover,
body:not(.woocommerce-checkout) .woocommerce button.button:hover,
body:not(.woocommerce-checkout) .woocommerce input.button:hover {
	background: #c0432b !important;
	color: var(--brand-white) !important;
	transition: 0.3s !important;
}

/* ============================================================
   VISUAL PACK 02 — Header fixes + Footer redesign
   ============================================================ */

/* ------------------------------------------------------------
   6. HEADER FIXES — нейтралізація конфліктних правил
   Джерело конфлікту:
   - Theme Options Custom CSS: #Top_bar.is-sticky{height:80px}
   - Betheme generated:       #Top_bar.is-sticky{height:60px}
   Через це sticky-бар «стрибав». Знімаємо фіксовану висоту →
   бар рахується по контенту.
   ------------------------------------------------------------ */
#Top_bar.is-sticky {
	height: auto !important;
}

/* (опційно) Якщо на staging присутнє абсолютне позиціювання кошика
   .header-split #Top_bar .top_bar_right{position:absolute;right:-28px}
   — нейтралізуємо, щоб кошик не вилазив за межі: */
.header-split #Top_bar .top_bar_right {
	position: relative !important;
	right: auto !important;
}

/* ------------------------------------------------------------
   7. FOOTER — темний BBQ-редизайн (CSS-only)
   DOM: #Footer > .widgets_wrapper > .container > 3x .column.one-third
        (1: контакти #custom_html-2, 2: лого #custom_html-6 + дзвінок,
         3: соцмережі #custom_html-5) + .footer_copy
   ------------------------------------------------------------ */

/* 7.1 Фон + верхній акцент (замість суцільного жовтого) */
#Footer {
	background-color: var(--bbq-dark) !important;
	background-image: radial-gradient(circle at 50% -30%, rgba(210, 5, 2, 0.20), transparent 60%);
	color: #cfc9c2;
	border-top: 4px solid transparent;
	border-image: linear-gradient(90deg, var(--brand-red-1), var(--brand-yellow), var(--brand-red-2)) 1;
}
#Footer .widgets_wrapper {
	padding: 56px 0 28px;
}

/* 7.2 Прибрати величезні порожні відступи (inline <hr> spacers) */
#Footer .widgets_wrapper hr.no_line {
	display: none !important;
}

/* 7.3 Розкладка: flex-рядок, ЛОГО ЛІВОРУЧ, контакти й соцмережі поруч */
#Footer .widgets_wrapper > .container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}
#Footer .widgets_wrapper > .container > .column.one-third {
	float: none;
	width: auto;
	margin: 0;
	flex: 1 1 240px;
}
/* лого-колонка (2-га в DOM) → ліворуч */
#Footer .widgets_wrapper > .container > .column:nth-child(2) {
	order: -1;
	flex: 0 0 auto;
}

/* 7.4 Прибрати інлайн-центрування текстових блоків → ліворуч */
#Footer .textwidget > div[style*="text-align"] {
	text-align: left !important;
}
#Footer .textwidget center {
	text-align: left;
}

/* 7.5 Логотип ліворуч, адекватний розмір */
#Footer #custom_html-6 .image_frame,
#Footer #custom_html-6 .image_wrapper {
	margin: 0 !important;
	text-align: left !important;
}
#Footer #custom_html-6 img {
	width: auto !important;
	max-height: 130px;
	height: auto;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

/* 7.6 Заголовки h5 з акцентним підкресленням */
#Footer h5 {
	color: var(--brand-white) !important;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: left !important;
	margin: 0 0 18px;
	padding-bottom: 10px;
	position: relative;
}
#Footer h5::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	background: linear-gradient(90deg, var(--brand-yellow), var(--brand-red-1));
}

/* 7.7 Контакти */
#Footer .contact_details {
	list-style: none;
	margin: 0;
	padding: 0;
}
#Footer .contact_details li {
	margin: 0 0 11px;
	line-height: 1.4;
}
#Footer .contact_details a {
	color: #d8d2cb;
	transition: color 0.2s ease;
}
#Footer .contact_details a:hover {
	color: var(--brand-yellow);
}
#Footer .contact_details i {
	color: var(--brand-yellow);
	margin-right: 9px;
}

/* 7.8 Соцмережі — заміна PNG на SVG-іконки (жовті, в колах) */
#Footer #custom_html-5 center {
	display: flex;
	gap: 14px;
	align-items: center;
}
#Footer #custom_html-5 a img {
	display: none !important; /* ховаємо старі fb.png / inst.png */
}
#Footer #custom_html-5 a {
	display: inline-flex;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(233, 162, 60, 0.45);
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
#Footer #custom_html-5 a:hover {
	transform: translateY(-3px);
	border-color: var(--brand-yellow);
	background-color: #1c1a17;
}
#Footer #custom_html-5 a[href*="facebook"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffbf00'%3E%3Cpath%20d='M13.5%2021v-8h2.7l.4-3.1h-3.1V7.9c0-.9.3-1.5%201.6-1.5h1.6V3.6c-.3%200-1.3-.1-2.4-.1-2.4%200-4%201.5-4%204.1v2.3H7.8V13h2.6v8z'/%3E%3C/svg%3E");
}
#Footer #custom_html-5 a[href*="instagram"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffbf00'%20stroke-width='2'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Ccircle%20cx='17.5'%20cy='6.5'%20r='1'%20fill='%23ffbf00'%20stroke='none'/%3E%3C/svg%3E");
}

/* 7.9 Нижня смужка копірайту */
#Footer .footer_copy {
	background-color: var(--bbq-darker) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 18px 0;
}
#Footer .footer_copy .one {
	margin: 0 !important;
	padding: 0 !important;
}
.footer-copy-center #Footer .footer_copy .copyright {
	float: none !important;
	margin: 0 !important;
}
#Footer .footer_copy .copyright {
	color: #8a847d;
	font-size: 13px;
}

/* 7.10 Адаптив футера */
@media (max-width: 767px) {
	#Footer .widgets_wrapper {
		padding: 40px 0 20px;
	}
	#Footer .widgets_wrapper > .container {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}
	#Footer .widgets_wrapper > .container > .column.one-third {
		width: 100%;
		flex: 1 1 100%;
	}
	#Footer #custom_html-6 img {
		max-height: 96px;
	}
}

/* ============================================================
   VISUAL PACK 03 — Header + Mobile menu (#Side_slide) у стилі футера
   Лого ЛІВОРУЧ, меню праворуч, кошик, темний Action_bar,
   градієнт-акценти, повна адаптація.
   ============================================================ */

/* ------------------------------------------------------------
   8. ACTION BAR (смужка контактів) — темна на ВСІХ екранах
   Перебиваємо Betheme: #Action_bar{background:#FFFFFF !important}
   ------------------------------------------------------------ */
#Action_bar,
.header-split #Action_bar {
	background-color: var(--bbq-dark) !important;
	border-bottom: 1px solid rgba(233, 162, 60, 0.18);
}
#Action_bar .contact_details li,
#Action_bar .contact_details {
	color: var(--brand-white) !important;
}
#Action_bar .contact_details .slogan {
	color: var(--brand-white) !important;
	font-weight: 700;
}
#Action_bar .contact_details a {
	color: var(--brand-yellow) !important;
}
#Action_bar .contact_details a:hover {
	color: #df9d00 !important;
}
#Action_bar .contact_details i {
	color: var(--brand-yellow) !important;
}

/* ------------------------------------------------------------
   9. TOP BAR — нижній градієнт-акцент (як верхній бордер футера)
   ------------------------------------------------------------ */
#Top_bar {
	border-bottom: 3px solid transparent !important;
	border-image: linear-gradient(90deg, var(--brand-red-1), var(--brand-yellow), var(--brand-red-2)) 1 !important;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45) !important;
}

/* ------------------------------------------------------------
   10. DESKTOP (>=1241px) — ЛОГО ЛІВОРУЧ + меню праворуч + кошик
   header-split за замовч.: лого center (absolute), меню 38%/38%,
   кошик display:none. Перебудовуємо у flex-рядок.
   ------------------------------------------------------------ */
@media (min-width: 1241px) {

	/* контейнер у flex: [top_bar_left] [top_bar_right] */
	.header-split #Header #Top_bar .container > .column.one {
		display: flex;
		align-items: center;
	}

	/* ліва зона: лого + меню в один ряд */
	.header-split #Header #Top_bar .top_bar_left {
		width: auto !important;
		flex: 1 1 auto;
		display: flex;
		align-items: center;
	}
	.header-split #Header #Top_bar .top_bar_left .secondary_menu_wrapper,
	.header-split #Header #Top_bar .top_bar_left .banner_wrapper {
		display: none;
	}

	/* ЛОГО — статичне, ліворуч, компактне (знімаємо center + 163px) */
	.header-split #Header #Top_bar .top_bar_left .logo {
		position: static !important;
		left: auto !important;
		width: auto !important;
		margin: 0 44px 0 0 !important;
		text-align: left !important;
		flex: 0 0 auto;
	}
	.logo-overflow .header-split #Header #Top_bar:not(.is-sticky) .top_bar_left .logo {
		height: auto !important;
	}
	.header-split #Header #Top_bar #logo img.logo-main {
		max-height: 44px !important;
		width: auto !important;
	}

	/* МЕНЮ — один ряд, вирівняне праворуч */
	.header-split #Header #Top_bar .top_bar_left .menu_wrapper {
		width: auto !important;
		flex: 1 1 auto;
	}
	.header-split #Header #Top_bar .top_bar_left nav#menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		width: 100%;
	}
	.header-split #Header #Top_bar .top_bar_left .menu_left,
	.header-split #Header #Top_bar .top_bar_left .menu_right {
		float: none !important;
		width: auto !important;
		text-align: left;
	}
	/* компактна висота пунктів (замість generated padding:51.5px) */
	.header-split #Header #Top_bar .menu > li > a {
		padding: 20px 0 !important;
	}

	/* search скраю */
	.header-split #Header #Top_bar .top_bar_left .search_wrapper {
		flex: 0 0 auto;
		margin-left: 18px;
	}

	/* КОШИК — повертаємо у топбар, праворуч (header-split його ховає) */
	.header-split #Top_bar .top_bar_right {
		position: static !important;
		right: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		flex: 0 0 auto;
		margin-left: 22px;
		display: flex;
		align-items: center;
		background: none !important;
	}
	.header-split #Top_bar .top_bar_right:before {
		display: none !important;
	}
	.header-split #Top_bar .top_bar_right_wrapper {
		top: 0 !important;
	}
	.header-split #Top_bar a#header_cart {
		display: inline-flex !important;
		align-items: center;
		color: var(--brand-white) !important;
	}
	.header-split #Top_bar a#header_cart .icon-basket {
		color: var(--brand-yellow);
		font-size: 22px;
	}
}

/* ------------------------------------------------------------
   11. MOBILE (<=1240px) — лого ліворуч (зараз по центру)
   ------------------------------------------------------------ */
@media (max-width: 1240px) {
	#Top_bar .logo {
		text-align: left !important;
		width: auto !important;
		margin-left: 15px !important;
	}
}

/* ------------------------------------------------------------
   12. MOBILE MENU (#Side_slide) — у стилі футера
   ------------------------------------------------------------ */
#Side_slide.dark {
	background-color: var(--bbq-dark) !important;
	border-left: 3px solid transparent;
	border-image: linear-gradient(180deg, var(--brand-red-1), var(--brand-yellow), var(--brand-red-2)) 1;
}

/* кнопка закриття */
#Side_slide .close-wrapper .close {
	color: var(--brand-white);
	transition: color 0.2s ease;
}
#Side_slide .close-wrapper .close:hover {
	color: var(--brand-yellow);
}

/* кошик у панелі */
#Side_slide .extras .extras-wrapper {
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 6px;
}
#Side_slide #slide-cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--brand-white);
}
#Side_slide #slide-cart .icon-basket {
	color: var(--brand-yellow);
	font-size: 24px;
}

/* пункти меню — рядки з роздільниками, hover/active жовтим + лівий акцент */
#Side_slide .menu_wrapper ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#Side_slide .menu_wrapper ul li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#Side_slide .menu_wrapper ul li a {
	display: block;
	padding: 15px 0;
	color: var(--brand-white);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 15px;
	border-left: 3px solid transparent;
	padding-left: 14px;
	transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}
#Side_slide .menu_wrapper ul li a:hover {
	color: var(--brand-yellow);
	border-left-color: var(--brand-yellow);
	padding-left: 20px;
}
#Side_slide .menu_wrapper ul li.current-menu-item > a {
	color: var(--brand-yellow);
	border-left-color: var(--brand-yellow);
}

/* ------------------------------------------------------------
   13. ХЕДЕР = ВИГЛЯД ЯК У STICKY (на всіх екранах)
   Sticky-стан виглядає добре (компактний, суцільний темний),
   тож робимо звичайний (не-sticky) хедер таким самим.
   Причина бага: Betheme форсує
     #Top_bar #logo {height:163px;line-height:163px}
     .top_bar_right {height:163px}
   + header-semi робить фон напівпрозорим (крізь нього просвічує hero).
   ------------------------------------------------------------ */

/* 13.1 Суцільний темний фон (як у sticky) — прибирає просвічування hero */
#Header #Top_bar:not(.is-sticky) {
	background-color: var(--bbq-dark) !important;
}

/* 13.2 Висота як у sticky (~64px) */
#Header #Top_bar:not(.is-sticky) #logo {
	height: 64px !important;
	line-height: 64px !important;
	padding: 0 !important;
}
#Header #Top_bar:not(.is-sticky) .logo {
	height: 64px !important;
}
#Header #Top_bar:not(.is-sticky) #logo img {
	max-height: 44px !important;
	width: auto !important;
	vertical-align: middle;
}
#Header #Top_bar:not(.is-sticky) .top_bar_right {
	height: 64px !important;
}
/* пункти меню по центру 64px бару: (64 − 25 line-height) / 2 ≈ 20 */
#Header #Top_bar:not(.is-sticky) .menu > li > a {
	padding: 20px 0 !important;
}

/* ─── Input focus: прибираємо фоновий колір (Betheme override) ─── */
input[type="date"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    color: #3a2118;
    background-color: transparent !important;
    border-color: unset;
}

/* ── #Content top padding ── */
#Content {
	padding-top: 40px !important;
}

/* ── Topbar font-size < 360px ── */
@media (max-width: 360px) {
	.dbq-topbar__inner {
		font-size: 12px;
	}
}

/* ── Neutralize Betheme button-flat ::after overlay ── */
.button-flat .button:after,
.button-flat button:after,
.button-flat .action_button:after,
.button-flat .footer_button:after,
.button-flat input[type="submit"]:after,
.button-flat input[type="reset"]:after,
.button-flat input[type="button"]:after {
	display: none !important;
	content: none !important;
}


.catering-hero{
	margin-top: -40px;
}


@media only screen and (max-width: 768px) {

    .woocommerce #content table.cart .product-thumbnail,
    .woocommerce table.cart .product-thumbnail,
    .woocommerce-page #content table.cart .product-thumbnail,
    .woocommerce-page table.cart .product-thumbnail {
        display: block !important;
    }

    .woocommerce .shop_table .product-thumbnail {
        width: auto !important;
    }

    .woocommerce table.shop_table_responsive tr td::before,
    .woocommerce-page table.shop_table_responsive tr td::before {
        content: attr(data-title) " " !important;
    }
}