/*
 * Panelix site-wide fixes. Enqueued by panelix-site-tweaks.php on every page.
 * Brand tokens: gold #E5D08F, ink #F5EFDC, muted #A39D91, surface #141414.
 */

/* The flexslider track inside the product gallery is as wide as all slides
 * combined; without clipping it drags the whole page sideways on phones. */
.woocommerce-product-gallery {
	overflow: hidden;
}

/* Category cards: Woo prints an English "(N Products)" count after the
 * Bulgarian title. The number adds nothing for shoppers. */
ul.products li.product-category .count,
.woocommerce ul.products li.product mark.count {
	display: none;
}

/* Astra's on-card add-to-cart overlay ships as an ivory icon on a white
 * circle: invisible on light artwork photos. Brand it. */
ul.products li.product .ast-on-card-button .ahfb-svg-iconset {
	background: #E5D08F;
	color: #111111;
}

ul.products li.product .ast-on-card-button:hover .ahfb-svg-iconset {
	background: #EFDFA8;
	color: #111111;
}

/* Its hover tooltip shipped white text on an ivory pill - unreadable.
 * Dark surface + ivory text reads over any artwork. */
ul.products li.product .ast-on-card-button .ast-card-action-tooltip {
	background: #1B1B1B !important;
	color: #F5EFDC !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	font-weight: 500;
}

ul.products li.product .ast-on-card-button .ast-card-action-tooltip::before,
ul.products li.product .ast-on-card-button .ast-card-action-tooltip::after {
	background: #1B1B1B !important;
	border-color: #1B1B1B transparent transparent transparent !important;
	color: #1B1B1B !important;
}

/* Product cards sit in equal-height grid rows, but a two-line title pushed
 * its add-to-cart button lower than the neighbour's. Let the summary fill
 * the card and pin the button to the bottom so buttons line up. */
ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	align-items: center;
}

ul.products li.product .astra-shop-summary-wrap .price {
	margin-bottom: 8px;
}

ul.products li.product .astra-shop-summary-wrap a.button {
	margin-top: auto;
}

/* "Подобни картини" on the product page: a swipeable strip instead of a
 * grid, so 8 prints fit without stretching the page. */
.elementor-1092 .elementor-widget-woocommerce-product-related ul.products {
	display: flex !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 14px;
	padding: 2px 2px 12px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(229, 208, 143, 0.35) transparent;
}

.elementor-1092 .elementor-widget-woocommerce-product-related ul.products li.product {
	flex: 0 0 auto;
	width: 220px !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

/* FiboSearch (header product search) ships a light theme: a white pill
 * input and grey icons over the dark header. Re-skin it on brand tokens. */
.dgwt-wcas-search-wrapp .dgwt-wcas-search-input,
input[type="search"].dgwt-wcas-search-input {
	background: #1B1B1B !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	color: #F5EFDC !important;
	box-shadow: none !important;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-search-input::placeholder {
	color: #A39D91 !important;
	opacity: 1;
}

/* Magnifier, clear and preloader icons: white like the cart icon, gold only
 * while the search is hovered, focused or being tapped. */
.dgwt-wcas-search-wrapp svg,
.dgwt-wcas-search-wrapp svg path {
	fill: #FFFFFF !important;
	transition: fill 0.15s ease;
}

.dgwt-wcas-search-wrapp:hover svg,
.dgwt-wcas-search-wrapp:hover svg path,
.dgwt-wcas-search-wrapp:focus-within svg,
.dgwt-wcas-search-wrapp:focus-within svg path,
.dgwt-wcas-search-wrapp:active svg,
.dgwt-wcas-search-wrapp:active svg path,
.dgwt-wcas-search-wrapp.dgwt-wcas-active svg,
.dgwt-wcas-search-wrapp.dgwt-wcas-active svg path {
	fill: #E5D08F !important;
}

.dgwt-wcas-suggestions-wrapp {
	background: #141414 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	/* The plugin sizes the panel in JS; never let it run past the phone. */
	max-width: calc(100vw - 16px) !important;
}

.dgwt-wcas-suggestion {
	color: #F5EFDC !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

.dgwt-wcas-suggestion-focused,
.dgwt-wcas-suggestion:hover {
	background: #1B1B1B !important;
	color: #F5EFDC !important;
}

.dgwt-wcas-sp,
.dgwt-wcas-sp .amount,
.dgwt-wcas-sp bdi {
	color: #E5D08F !important;
}

/* Product "codes" are internal slugs (golden-rose-black-rose-2): noise. */
.dgwt-wcas-sku {
	display: none !important;
}

.dgwt-wcas-suggestion.dgwt-wcas-nores {
	color: #A39D91 !important;
}

/* On touch devices FiboSearch opens a FULLSCREEN overlay instead of the
 * inline bar (invisible in desktop emulation, real phones only): a white
 * sheet with a white back button. Same dark treatment. */
.dgwt-wcas-overlay-mobile,
.dgwt-wcas-om-bar {
	background: #141414 !important;
}

.dgwt-wcas-om-return {
	background: transparent !important;
}

.dgwt-wcas-om-return svg,
.dgwt-wcas-om-return svg path {
	fill: #E5D08F !important;
}

.dgwt-wcas-overlay-mobile .dgwt-wcas-sf-wrapp {
	background: transparent !important;
}

/* Inside the overlay the suggestions render as part of the sheet, not a
 * floating panel: drop the panel chrome there. */
.dgwt-wcas-overlay-mobile .dgwt-wcas-suggestions-wrapp {
	border: none !important;
	border-radius: 0;
	box-shadow: none;
}

@media ( max-width: 767px ) {
	/* Header cart button: 67px content in a 56px grid cell pushed the page
	 * 11px sideways on every page. Slimmer padding keeps it inside. Triple
	 * class outweighs Elementor's own `.elementor-button.elementor-size-sm`
	 * regardless of stylesheet order. */
	.elementor-element-22b2642 .elementor-menu-cart__toggle_button.elementor-button.elementor-size-sm {
		padding: 10px 11px;
	}

	/* Header search icon renders at 20x18: enlarge the touch area without
	 * moving the icon. */
	.astra-search-icon {
		padding: 12px;
		margin: -12px;
	}

	/* Mini cart close control is 25px; same touch-area trick. */
	.elementor-menu-cart__close-button,
	.elementor-menu-cart__close-button-custom {
		padding: 10px;
		margin: -10px;
	}

	/* Related carousel cards: two per screen with the next one peeking. */
	.elementor-1092 .elementor-widget-woocommerce-product-related ul.products li.product {
		width: 44vw !important;
	}
}

/* ---------- Релсата със сюжети над мрежата на магазина (v1.7.0) ----------
 * Втора редакция след живо ползване: хоризонталният скрол криеше опциите и
 * можеше да остави избраното извън екрана. Сега нищо не се крие - двата реда
 * се пренасят и всичко се вижда наведнъж, а второто ниво стои като отворено
 * чекмедже под избрания сюжет: златна линия отляво и лек златен воал. */
.panelix-rail {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 26px;
	margin: 0 0 16px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* Когато има второ ниво, то затваря блока и горният ред остава отворен. */
.panelix-rail:has(+ .panelix-rail-sub) {
	border-bottom: none;
	margin-bottom: 2px;
	padding-bottom: 0;
}

.panelix-rail-sub {
	gap: 0 20px;
	margin: 0 0 18px;
	padding: 6px 16px 8px;
	border-bottom: none;
	border-left: 2px solid #E5D08F;
	background: linear-gradient(90deg, rgba(229, 208, 143, 0.07), rgba(229, 208, 143, 0.015) 55%, transparent);
}

.panelix-rail-item {
	flex: 0 0 auto;
	color: #A39D91;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	padding: 9px 0 10px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.panelix-rail-sub .panelix-rail-item {
	font-size: 13.5px;
	font-weight: 400;
	padding: 7px 0 8px;
	border-bottom-width: 1px;
}

.panelix-rail-item:hover,
.panelix-rail-item:focus-visible {
	color: #F5EFDC;
	border-bottom-color: rgba(245, 239, 220, 0.35);
}

.panelix-rail-item:focus-visible {
	outline: 2px solid #E5D08F;
	outline-offset: 2px;
}

.panelix-rail-item.is-active {
	color: #E5D08F;
	border-bottom-color: #E5D08F;
}

.panelix-rail-count {
	font-size: 10.5px;
	margin-left: 5px;
	vertical-align: 3px;
	letter-spacing: 0.02em;
	color: #8d8679;
	font-variant-numeric: tabular-nums;
}

.panelix-rail-item.is-active .panelix-rail-count {
	color: rgba(229, 208, 143, 0.8);
}

/* На тесен екран редовете стават по-сбити, но пак се вижда всичко:
 * никакъв скрол, никакво скрито състояние. */
@media (max-width: 544px) {
	.panelix-rail {
		gap: 0 18px;
	}

	.panelix-rail-sub {
		gap: 0 16px;
		padding: 4px 12px 6px;
	}

	.panelix-rail-item {
		font-size: 14px;
	}

	.panelix-rail-sub .panelix-rail-item {
		font-size: 13px;
	}
}

/* Броячът е обратна връзка, не заглавие: тих, под релсата. */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	color: #A39D91;
	font-size: 13px;
	margin: 0 0 16px;
}

/* ---------- Сортиране и мобилно меню (v1.8.0) ----------
 * Astra на телефон закача лентата със сортирането за долния ръб на екрана
 * като светлосив бар (rgb 248) върху тъмния сайт. Връщаме я в потока под
 * брояча и я обличаме в тъмната гама. */
@media (max-width: 544px) {
	.ast-header-break-point .ast-shop-toolbar-container {
		position: static;
	}

	.ast-header-break-point .ast-sticky-shop-filters {
		background: transparent;
		padding: 0;
		display: flex;
		justify-content: flex-end;
	}

	.ast-header-break-point.ast-woocommerce-shop-page-modern-style ul.products {
		margin-top: 1.25em;
	}
}

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	color: #F5EFDC;
	background: #1B1B1B;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 8px 32px 8px 12px;
	font-size: 16px;
	min-height: 44px;
	width: auto;
	max-width: 100%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23E5D08F' stroke-width='1.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

/* Мобилното меню: текущата страница стоеше с постоянна златна лента.
 * Златото е само за докосване (highlighted е класът на Elementor при тап). */
@media (max-width: 1024px) {
	.elementor-nav-menu--dropdown a.elementor-item-active {
		background-color: transparent !important;
	}

	.elementor-nav-menu--dropdown a:hover,
	.elementor-nav-menu--dropdown a:active,
	.elementor-nav-menu--dropdown a.highlighted {
		background-color: #E5D08F !important;
		color: #111111 !important;
	}
}

/* Страницата 404 на Astra носи бяло поле за търсене върху тъмния фон. */
.ast-404-layout-1 .search-field,
.ast-404-layout-1 .search-form .search-field {
	background: #1B1B1B;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	color: #F5EFDC;
	font-size: 16px;
}

.ast-404-layout-1 .search-form .search-submit {
	background: #E5D08F;
	color: #111111;
	border-radius: 0 8px 8px 0;
}

/* "Подобни картини": шаблон 1092 реже заглавието на 4em и го центрира
 * вертикално, така че дълги имена губят първия и последния ред. */
.elementor-1092 .related.products ul.products li.product .woocommerce-loop-product__title {
	height: auto;
	overflow: visible;
	display: block;
}

/* Плочките със сюжети на началната: главните букви се чупеха по средата
 * на думата на телефон ("ЗНАМЕНИТ ОСТИ"). Думата остава цяла. */
@media (max-width: 544px) {
	ul.products li.product-category .woocommerce-loop-category__title {
		word-break: keep-all;
		overflow-wrap: normal;
	}
}

/* Astra (второ мнение): текущата страница в мобилното меню остава разпознаваема
 * без злато - тънка златна черта отляво, златото е само за докосване. */
@media (max-width: 1024px) {
	.elementor-nav-menu--dropdown a[aria-current="page"] {
		box-shadow: inset 3px 0 0 #E5D08F;
	}
}

/* Плочките: без главни букви на телефон, думите се пренасят нормално. */
@media (max-width: 544px) {
	ul.products li.product-category .woocommerce-loop-category__title {
		text-transform: none;
		letter-spacing: 0;
	}
}

/* Размерът до бутона за купуване (Astra: макетът не показва реалната големина). */
.panelix-product-size {
	display: block;
	color: #A39D91;
	font-size: 14px;
	font-weight: 400;
	margin-top: 6px;
}

.panelix-404-back {
	margin-top: 18px;
}

.panelix-404-back a {
	color: #E5D08F;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Едно и също поле отстрани на телефон: магазинът беше 0, архивите 20 px.
 * Astra (второ мнение): около 16 px, повече отнема от каталога. */
@media (max-width: 544px) {
	body.woocommerce.archive .ast-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* С полето от 16 px картата е с 16 px по-тясна и "Добавяне в количката"
 * се чупеше на три реда. По-тясно padding, два реда. */
@media (max-width: 544px) {
	.woocommerce ul.products li.product .button,
	.woocommerce-page ul.products li.product .button {
		padding-left: 12px;
		padding-right: 12px;
		font-size: 15px;
		line-height: 1.3;
	}
}