/* ==========================================================================
   Еспресо.БГ — Phase I
   Dark brand theme, monochrome brand logos, monochrome category icons.

   Palette is the brandbook's, verbatim. Contrast was computed for every
   text/background pair actually used here; the table is in phase-i-log.md.
   The one rule that matters: WARM BROWN TEXT ON GRAPHITE IS 2.24:1 AND FAILS.
   On graphite use cream (13.06:1) for text and khaki (5.83:1) for headings,
   icons and accents. Warm brown is a BACKGROUND colour on this site, never a
   foreground one on dark.

   Scope: header, mega menu, mobile drawer and footer go graphite. Product
   grids and product pages stay white/cream — the brandbook puts shop content
   on #FFFFFF for legibility, and dark product listings cost conversion.
   ========================================================================== */

:root {
	--esp-graphite: #2D2B2A;
	--esp-coffee:   #52301F;
	--esp-brown:    #8A5231;
	--esp-khaki:    #C89F78;
	--esp-cream:    #F9F6F0;
	--esp-white:    #FFFFFF;

	/* Derived surfaces, so a panel can sit above another without a new hex. */
	--esp-graphite-raised: #383534;
	--esp-hairline: rgba(200, 159, 120, .22);

	--esp-ease: .22s ease;
	--esp-radius: 8px;
}

/* --------------------------------------------------------------------------
   1. Dark surfaces
   -------------------------------------------------------------------------- */

/* Mega menu and simple dropdowns. */
.whb-header .wd-dropdown-menu,
.whb-header .wd-dropdown,
.wd-nav-main .wd-dropdown-menu {
	background-color: var(--esp-graphite);
	border: 1px solid var(--esp-hairline);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}

.whb-header .wd-dropdown-menu,
.whb-header .wd-dropdown-menu a,
.wd-nav-main .wd-dropdown-menu a {
	color: var(--esp-cream);
}

/* Column headings: khaki, with the rule the concept sheet draws under them. */
.wd-nav-main .wd-dropdown-menu .wd-mm-head > a,
.wd-dropdown-menu li.wd-mm-head > a {
	color: var(--esp-khaki);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--esp-hairline);
	padding-bottom: 8px;
	margin-bottom: 6px;
}

.whb-header .wd-dropdown-menu a:hover,
.whb-header .wd-dropdown-menu a:focus-visible {
	color: var(--esp-khaki);
}

/* Mobile drawer — the brandbook names graphite for this explicitly. */
.wd-sub-menu-wrapp,
.wd-side-hidden,
.wd-nav-mobile-wrapp,
.mobile-nav {
	background-color: var(--esp-graphite);
	color: var(--esp-cream);
}

.wd-nav-mobile > li > a,
.wd-nav-mobile li a {
	color: var(--esp-cream);
	border-color: var(--esp-hairline);
}

.wd-nav-mobile li a:hover,
.wd-nav-mobile li a:focus-visible {
	color: var(--esp-khaki);
}

/* Footer. */
.footer-container {
	background-color: var(--esp-graphite);
	color: var(--esp-cream);
}

.footer-container a {
	color: var(--esp-cream);
}

.footer-container a:hover,
.footer-container a:focus-visible {
	color: var(--esp-khaki);
}

.footer-container .widget-title,
.footer-container h1,
.footer-container h2,
.footer-container h3,
.footer-container h4 {
	color: var(--esp-khaki);
}

/* Buttons. Warm brown ground with white text is 6.30:1. */
.wd-buttons .btn,
.btn-color-primary,
.single_add_to_cart_button,
.woocommerce .button.alt {
	background-color: var(--esp-brown);
	color: var(--esp-white);
}

.btn-color-primary:hover,
.single_add_to_cart_button:hover,
.woocommerce .button.alt:hover {
	background-color: var(--esp-coffee);
	color: var(--esp-white);
}

/* --------------------------------------------------------------------------
   2. Mega menu layout
   -------------------------------------------------------------------------- */

.wd-nav-main .wd-dropdown-menu.wd-design-full-width > .container {
	padding-top: 26px;
	padding-bottom: 26px;
}

.wd-nav-main .wd-dropdown-menu .wd-sub-menu > li.wd-col {
	padding-inline: 18px;
}

/* --------------------------------------------------------------------------
   3. Brand logos — monochrome at rest, own colours on hover
   --------------------------------------------------------------------------
   Two treatments, because the artwork forces it. 12 of the 39 logo files have
   a real alpha channel and can be tinted into a cream silhouette directly on
   the graphite panel, the way the concept sheet draws them. The other 27 are
   opaque JPEG/PNG with a baked-in white box: tinting those produces a solid
   rectangle, so they get a cream tile and a greyscale filter instead — which
   is exactly what the mockup itself does for `illy`, whose mark is black.

   Which logo gets which class is MEASURED, not guessed: see
   inc/brand-logo-alpha.php. Re-source a logo as transparent PNG/SVG and
   regenerate that map to move it into the silhouette group.

   Touch devices have no hover, so logos stay monochrome there. That is a
   property of the device, not a bug.

   SUPERSEDED for every brand listed in inc/brand-logos.php (Phase M): those
   render as .espreso-brandlogo--pair, one treatment for all — a pre-built
   cream mono image at rest, the pre-built colour image on a white tile on
   hover. The --alpha / --tile rules below remain only as the fallback for a
   brand that has no generated pair yet.
   -------------------------------------------------------------------------- */

.espreso-brandgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 10px;
}

.espreso-brandlogo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 8px;
	border-radius: var(--esp-radius);
}

.espreso-brandlogo__img {
	max-width: 100%;
	height: auto;
	max-height: 38px;
	width: auto;
	object-fit: contain;
}

/* Rest state — transparent artwork: cream silhouette on graphite.
   brightness(0) flattens the logo to black, invert(1) lifts it to white; at
   .92 opacity on graphite that reads as the brandbook's cream. */
.espreso-brandlogo--alpha .espreso-brandlogo__img {
	filter: brightness(0) invert(1);
	opacity: .92;
	transition: filter var(--esp-ease), opacity var(--esp-ease);
}

/* Rest state — opaque artwork: cream tile, desaturated. */
.espreso-brandlogo--tile {
	background-color: var(--esp-cream);
}

.espreso-brandlogo--tile .espreso-brandlogo__img {
	filter: grayscale(1) contrast(1.04);
	opacity: .78;
	transition: filter var(--esp-ease), opacity var(--esp-ease);
}

/* Hover / keyboard focus — original colours, both treatments. */
@media (hover: hover) {
	.espreso-brandlogo:hover .espreso-brandlogo__img {
		filter: none;
		opacity: 1;
	}
	/* A transparent logo in its own colours may be dark; give it the same
	   cream tile on hover so a black wordmark does not vanish on graphite.
	   This is the Comandante / Lavazza case. */
	.espreso-brandlogo--alpha:hover {
		background-color: var(--esp-cream);
	}
}

.espreso-brandlogo:focus-visible {
	outline: 2px solid var(--esp-khaki);
	outline-offset: 2px;
}

.espreso-brandlogo:focus-visible .espreso-brandlogo__img {
	filter: none;
	opacity: 1;
}

.espreso-brandlogo--alpha:focus-visible {
	background-color: var(--esp-cream);
}

/* Normalised pair: same slot, same rest state, same hover for every brand. */
.espreso-brandlogo--pair {
	min-height: 60px;
	padding: 10px 14px;
	transition: background-color var(--esp-ease);
}

.espreso-brandlogo__box {
	position: relative;
	display: block;
	max-width: 100%;
	line-height: 0;
}

.espreso-brandlogo__mono,
.espreso-brandlogo__color {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity var(--esp-ease);
}

.espreso-brandlogo__mono {
	opacity: .86;
}

.espreso-brandlogo__color {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (hover: hover) {
	.espreso-brandlogo--pair:hover {
		background-color: #fff;
	}
	.espreso-brandlogo--pair:hover .espreso-brandlogo__mono {
		opacity: 0;
	}
	.espreso-brandlogo--pair:hover .espreso-brandlogo__color {
		opacity: 1;
	}
}

.espreso-brandlogo--pair:focus-visible {
	background-color: #fff;
}

.espreso-brandlogo--pair:focus-visible .espreso-brandlogo__mono {
	opacity: 0;
}

.espreso-brandlogo--pair:focus-visible .espreso-brandlogo__color {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.espreso-brandlogo__img,
	.espreso-brandlogo--pair,
	.espreso-brandlogo__mono,
	.espreso-brandlogo__color {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   4. Brand strip (homepage)
   -------------------------------------------------------------------------- */

.espreso-brandstrip {
	background-color: var(--esp-graphite);
	padding: 28px 20px;
}

.espreso-brandstrip__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 26px;
	max-width: 1200px;
	margin: 0 auto;
}

.espreso-brandstrip .espreso-brandlogo {
	flex: 0 0 auto;
	min-width: 110px;
}

.espreso-brandstrip__claim {
	margin: 20px 0 0;
	text-align: center;
	color: var(--esp-khaki);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. "Акцент на месеца" card
   -------------------------------------------------------------------------- */

.espreso-mm-featured__link {
	display: block;
	background-color: var(--esp-graphite-raised);
	border-radius: var(--esp-radius);
	padding: 14px;
	text-align: center;
}

.espreso-mm-featured__img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.espreso-mm-featured__title {
	display: block;
	margin-top: 10px;
	color: var(--esp-cream);
	font-weight: 600;
}

.espreso-mm-featured__price {
	display: block;
	margin-top: 4px;
	color: var(--esp-khaki);
}

.espreso-mm-featured__cta {
	display: inline-block;
	margin-top: 10px;
	padding: 7px 14px;
	border: 1px solid var(--esp-khaki);
	border-radius: 999px;
	color: var(--esp-khaki) !important;
	font-size: 13px;
}

.espreso-mm-featured__cta:hover {
	background-color: var(--esp-khaki);
	color: var(--esp-graphite) !important;
}

/* An empty featured slot must not leave a gap that looks like a broken panel. */
.espreso-mm-featured--empty {
	display: none;
}

/* --------------------------------------------------------------------------
   6. Category icons — monochrome, colour controlled by CSS
   --------------------------------------------------------------------------
   Rendered with mask-image + background-color: currentColor, so the icon takes
   the menu item's own colour and changes on hover for free.

   An <img> SVG cannot do this, and WoodMart's native category-icon field emits
   exactly that: woodmart_get_svg_html() returns an <img> tag despite its name
   (woodmart/inc/modules/images/functions.php:502-541). So the icons are
   attached by a per-menu-item CSS class instead — set in Appearance → Menus →
   CSS Classes — and mapped to a file here.

   Every file in assets/icons/ is a NEUTRAL PLACEHOLDER. The coffee-specific
   shapes the concept sheet draws (moka pot, portafilter machine, grinder,
   tamper, pour-over, milk jug, capsule, scale) are not in any common open icon
   set. See docs/icon-list.md for what each one has to become.
   -------------------------------------------------------------------------- */

.wd-mi > a::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-inline-end: 9px;
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: .9;
	flex: 0 0 auto;
}

.wd-nav-main .wd-dropdown-menu .wd-mi > a::before {
	color: var(--esp-khaki);
}

/* One rule per icon. Adding an icon = drop the SVG in assets/icons/ and add a
   line here; no PHP change. */
.wd-mi-coffee            > a::before { -webkit-mask-image: url(../icons/coffee.svg?v=m2);            mask-image: url(../icons/coffee.svg?v=m2); }
.wd-mi-specialty         > a::before { -webkit-mask-image: url(../icons/specialty.svg?v=m2);         mask-image: url(../icons/specialty.svg?v=m2); }
.wd-mi-beans             > a::before { -webkit-mask-image: url(../icons/beans.svg?v=m2);             mask-image: url(../icons/beans.svg?v=m2); }
.wd-mi-capsule           > a::before { -webkit-mask-image: url(../icons/capsule.svg?v=m2);           mask-image: url(../icons/capsule.svg?v=m2); }
.wd-mi-pod               > a::before { -webkit-mask-image: url(../icons/pod.svg?v=m2);               mask-image: url(../icons/pod.svg?v=m2); }
.wd-mi-ground            > a::before { -webkit-mask-image: url(../icons/ground.svg?v=m2);            mask-image: url(../icons/ground.svg?v=m2); }
.wd-mi-instant           > a::before { -webkit-mask-image: url(../icons/instant.svg?v=m2);           mask-image: url(../icons/instant.svg?v=m2); }
.wd-mi-bio               > a::before { -webkit-mask-image: url(../icons/bio.svg?v=m2);               mask-image: url(../icons/bio.svg?v=m2); }
.wd-mi-machine           > a::before { -webkit-mask-image: url(../icons/machine.svg?v=m2);           mask-image: url(../icons/machine.svg?v=m2); }
.wd-mi-espresso-machine  > a::before { -webkit-mask-image: url(../icons/espresso-machine.svg?v=m2);  mask-image: url(../icons/espresso-machine.svg?v=m2); }
.wd-mi-capsule-machine   > a::before { -webkit-mask-image: url(../icons/capsule-machine.svg?v=m2);   mask-image: url(../icons/capsule-machine.svg?v=m2); }
.wd-mi-portable          > a::before { -webkit-mask-image: url(../icons/portable.svg?v=m2);          mask-image: url(../icons/portable.svg?v=m2); }
.wd-mi-grinder           > a::before { -webkit-mask-image: url(../icons/grinder.svg?v=m2);           mask-image: url(../icons/grinder.svg?v=m2); }
.wd-mi-grinder-electric  > a::before { -webkit-mask-image: url(../icons/grinder-electric.svg?v=m2);  mask-image: url(../icons/grinder-electric.svg?v=m2); }
.wd-mi-grinder-manual    > a::before { -webkit-mask-image: url(../icons/grinder-manual.svg?v=m2);    mask-image: url(../icons/grinder-manual.svg?v=m2); }
.wd-mi-moka              > a::before { -webkit-mask-image: url(../icons/moka.svg?v=m2);              mask-image: url(../icons/moka.svg?v=m2); }
.wd-mi-pourover          > a::before { -webkit-mask-image: url(../icons/pourover.svg?v=m2);          mask-image: url(../icons/pourover.svg?v=m2); }
.wd-mi-barista           > a::before { -webkit-mask-image: url(../icons/barista.svg?v=m2);           mask-image: url(../icons/barista.svg?v=m2); }
.wd-mi-milkjug           > a::before { -webkit-mask-image: url(../icons/milkjug.svg?v=m2);           mask-image: url(../icons/milkjug.svg?v=m2); }
.wd-mi-tamper            > a::before { -webkit-mask-image: url(../icons/tamper.svg?v=m2);            mask-image: url(../icons/tamper.svg?v=m2); }
.wd-mi-kettle            > a::before { -webkit-mask-image: url(../icons/kettle.svg?v=m2);            mask-image: url(../icons/kettle.svg?v=m2); }
.wd-mi-scale             > a::before { -webkit-mask-image: url(../icons/scale.svg?v=m2);             mask-image: url(../icons/scale.svg?v=m2); }
.wd-mi-cup               > a::before { -webkit-mask-image: url(../icons/cup.svg?v=m2);               mask-image: url(../icons/cup.svg?v=m2); }
.wd-mi-cleaning          > a::before { -webkit-mask-image: url(../icons/cleaning.svg?v=m2);          mask-image: url(../icons/cleaning.svg?v=m2); }
.wd-mi-accessory         > a::before { -webkit-mask-image: url(../icons/accessory.svg?v=m2);         mask-image: url(../icons/accessory.svg?v=m2); }
.wd-mi-spare-part        > a::before { -webkit-mask-image: url(../icons/spare-part.svg?v=t1);        mask-image: url(../icons/spare-part.svg?v=t1); }
.wd-mi-sugar             > a::before { -webkit-mask-image: url(../icons/sugar.svg?v=m2);             mask-image: url(../icons/sugar.svg?v=m2); }
.wd-mi-tea               > a::before { -webkit-mask-image: url(../icons/tea.svg?v=m2);               mask-image: url(../icons/tea.svg?v=m2); }
.wd-mi-tea-cup           > a::before { -webkit-mask-image: url(../icons/tea-cup.svg?v=m2);           mask-image: url(../icons/tea-cup.svg?v=m2); }
.wd-mi-chocolate         > a::before { -webkit-mask-image: url(../icons/chocolate.svg?v=m2);         mask-image: url(../icons/chocolate.svg?v=m2); }
.wd-mi-brands            > a::before { -webkit-mask-image: url(../icons/brands.svg?v=m2);            mask-image: url(../icons/brands.svg?v=m2); }

/* Top-level items carry a label, not an icon, in the desktop bar — the mockup
   shows plain text there. Icons belong to the dropdown and the mobile list. */
.wd-nav-main > li.wd-mi > a::before {
	display: none;
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.espreso-brandgrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.espreso-brandstrip__logos {
		gap: 14px 18px;
	}
	.espreso-brandstrip .espreso-brandlogo {
		min-width: 88px;
	}
}

/* --------------------------------------------------------------------------
   8. "ОЩЕ" — the secondary nav
   --------------------------------------------------------------------------
   Desktop gets a real WoodMart "secondary menu" element (the ОЩЕ menu, one
   parent with six children), placed in the header's empty centre column.

   The same six entries also live at the END of the Каталог menu, marked
   .espreso-more, because WoodMart renders exactly ONE mobile drawer and it
   always reads the main-menu location — a second burger element's menu_id is
   ignored (verified: one ul.wd-nav-mobile in the page). That is the only way
   mobile mockup 03 can show Промоции / Блог / Контакти / Моят акаунт / Любими
   as plain accordion rows. They are hidden from the desktop bar, where ОЩЕ
   already carries them.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.wd-nav-main > li.espreso-more {
		display: none;
	}
}

.whb-espresooshte0002 .wd-nav > li > a {
	color: var(--esp-cream);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.whb-espresooshte0002 .wd-nav > li > a:hover,
.whb-espresooshte0002 .wd-nav > li > a:focus-visible {
	color: var(--esp-khaki);
}

/* The two generated columns have no content in the mobile drawer (their
   markup is desktop-only, see inc/megamenu.php), so their headings would be
   bare links in the accordion. Mobile mockup 03 does not show them. */
.wd-nav-mobile .wd-mm-featured,
.wd-nav-mobile .wd-mm-brands {
	display: none;
}


/* --------------------------------------------------------------------------
   Phase K — homepage sections (Home Coffee, 7271)
   Built with native Elementor widgets; only layout and icons live here so
   Stefani can restyle colours and type in Elementor without touching code.
   -------------------------------------------------------------------------- */

/* Hero: poster is the container background; the child-theme loader appends
   .espreso-hero__video after window load (uploads/hero/ or ESPRESO_CDN_HOST). */
.espreso-hero { position: relative; overflow: hidden; }
.espreso-hero > .e-con-inner, .espreso-hero > .e-con { position: relative; z-index: 1; }
.espreso-hero__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0; opacity: 0; transition: opacity .6s ease;
}
.espreso-hero__video.is-ready { opacity: 1; }
/* Dark overlay over poster + video so the white headline stays readable on the
   video's light frames (Varia logo card). Paints above the video, below the content. */
.espreso-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(28, 18, 12, .78) 0%, rgba(28, 18, 12, .55) 45%, rgba(28, 18, 12, .2) 100%);
}
@media (max-width: 1024px) {
	.espreso-hero::after { background: rgba(28, 18, 12, .6); }
}
@media (prefers-reduced-motion: reduce) { .espreso-hero__video { transition: none; } }

/* Bento "Пазарувай по категория": 4 columns, first tile 2×2; 2 columns on phones. */
.espreso-bento > .e-con-inner, .espreso-bento:not(:has(> .e-con-inner)) {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(150px, auto);
	gap: 16px;
}
.espreso-bento .espreso-tile:first-child { grid-column: span 2; grid-row: span 2; }
/* 7 tiles on 4 columns: big 2×2 + four singles fill two rows; the last two span 2 each. */
.espreso-bento .espreso-tile:nth-child(6),
.espreso-bento .espreso-tile:nth-child(7) { grid-column: span 2; }
/* Elementor puts the heading in .e-con-inner; push it to the bottom of the tile. */
.espreso-tile > .e-con-inner { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.espreso-tile {
	position: relative;
	display: flex !important; flex-direction: column; justify-content: flex-end;
	padding: 22px !important;
	background: var(--esp-cream, #F9F6F0);
	border-radius: 14px;
	color: var(--esp-graphite, #2D2B2A);
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.espreso-tile .elementor-heading-title { color: inherit; font-size: 18px; line-height: 1.25; margin: 0; }
.espreso-tile:first-child .elementor-heading-title { font-size: 24px; }
/* Elementor uses .e-con::before for background overlays and sets content:none — force it. */
.espreso-tile.e-con::before {
	content: "" !important; position: absolute; top: 22px; left: 22px;
	width: 44px; height: 44px;
	background-color: var(--esp-brown, #8A5231);
	-webkit-mask: var(--esp-tile-icon) center / contain no-repeat;
	mask: var(--esp-tile-icon) center / contain no-repeat;
}
.espreso-tile:first-child::before { width: 72px; height: 72px; }
@media (hover: hover) {
	.espreso-tile:hover { background: var(--esp-graphite, #2D2B2A); color: #fff; }
	.espreso-tile:hover::before { background-color: var(--esp-khaki, #C89F78); }
}
@media (prefers-reduced-motion: reduce) { .espreso-tile { transition: none; } }
.espreso-tile--beans            { --esp-tile-icon: url(../icons/beans.svg?v=m2); }
.espreso-tile--specialty        { --esp-tile-icon: url(../icons/specialty.svg?v=m2); }
.espreso-tile--espresso-machine { --esp-tile-icon: url(../icons/espresso-machine.svg?v=m2); }
.espreso-tile--grinder          { --esp-tile-icon: url(../icons/grinder.svg?v=m2); }
.espreso-tile--pourover         { --esp-tile-icon: url(../icons/pourover.svg?v=m2); }
.espreso-tile--capsule          { --esp-tile-icon: url(../icons/capsule.svg?v=m2); }
.espreso-tile--barista          { --esp-tile-icon: url(../icons/barista.svg?v=m2); }
@media (max-width: 767px) {
	.espreso-bento > .e-con-inner, .espreso-bento:not(:has(> .e-con-inner)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(120px, auto);
		gap: 10px;
	}
	.espreso-tile { padding: 16px !important; }
	.espreso-bento .espreso-tile:nth-child(6), .espreso-bento .espreso-tile:nth-child(7) { grid-column: span 1; }
	.espreso-tile::before { top: 16px; left: 16px; width: 34px; height: 34px; }
	.espreso-tile .elementor-heading-title { font-size: 15px; }
}

/* Highlights: three equal columns, stacked on phones. */
.espreso-highlights > .e-con-inner, .espreso-highlights:not(:has(> .e-con-inner)) {
	display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.espreso-highlight { padding: 24px !important; border-top: 3px solid var(--esp-khaki, #C89F78); background: var(--esp-cream, #F9F6F0); }
.espreso-highlight .elementor-heading-title { font-size: 18px; margin-bottom: 8px; }
@media (max-width: 767px) {
	.espreso-highlights > .e-con-inner, .espreso-highlights:not(:has(> .e-con-inner)) { grid-template-columns: 1fr; gap: 12px; }
}

/* Newsletter: narrow centred block. */
.espreso-home-newsletter { text-align: center; }
.espreso-home-newsletter .elementor-form { max-width: 520px; margin: 0 auto; }

/* Phase K: reserve room for the icon above the tile title (works whatever Elementor wraps the heading in). */
.espreso-tile { padding-top: 84px !important; }
.espreso-bento .espreso-tile:first-child { padding-top: 116px !important; }
@media (max-width: 767px) { .espreso-tile { padding-top: 62px !important; } .espreso-bento .espreso-tile:first-child { padding-top: 62px !important; } }

/* Brand strip, normalised pairs (Phase M): equal slots, 6 + 5 on desktop. */
.espreso-brandstrip .espreso-brandlogo--pair {
	width: 150px;
	min-width: 0;
}
.espreso-brandstrip__logos:has(.espreso-brandlogo--pair) {
	max-width: 1010px;
	gap: 14px 18px;
}
@media (max-width: 767px) {
	.espreso-brandstrip .espreso-brandlogo--pair {
		width: calc(50% - 9px);
		min-height: 54px;
	}
}

/* БРАНДОВЕ mega panel (all brands, full width): 6 columns, tighter slots. */
.wd-entry-content > .espreso-brandgrid {
	grid-template-columns: repeat(6, 1fr);
	gap: 6px 14px;
}
.wd-entry-content > .espreso-brandgrid .espreso-brandlogo--pair {
	min-height: 52px;
	padding: 8px 12px;
}
@media (max-width: 1024px) {
	.wd-entry-content > .espreso-brandgrid { grid-template-columns: repeat(4, 1fr); }
}

/* Phase M: capsule-system cards ("Купувате капсули? Изберете система") get a
   per-system capsule silhouette, top-left, title pinned to the bottom. */
.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) { --esp-sys-icon: url(../icons/capsule.svg?v=m2); }
.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-inner { position: relative; }
.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-inner::before {
	content: ""; position: absolute; z-index: 2; top: 14px; left: 16px;
	width: 32px; height: 32px; pointer-events: none;
	background-color: var(--esp-brown, #8A5231);
	-webkit-mask: var(--esp-sys-icon) center / contain no-repeat;
	mask: var(--esp-sys-icon) center / contain no-repeat;
	transition: background-color .2s ease;
}
@media (hover: hover) {
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]):hover .wd-cat-inner::before { background-color: var(--esp-khaki, #C89F78); }
}
/* Per-system rules need the same weight as the generic fallback above. */
.wd-cat.cat-design-default:has(a[href*="/nespresso-compatible/"])    { --esp-sys-icon: url(../icons/sys-nespresso.svg?v=m2); }
.wd-cat.cat-design-default:has(a[href*="/lavazza-blue-compatible/"]) { --esp-sys-icon: url(../icons/sys-lavazza-blue.svg?v=m2); }
.wd-cat.cat-design-default:has(a[href*="/ese-pods/"])                { --esp-sys-icon: url(../icons/sys-ese.svg?v=m2); }
.wd-cat.cat-design-default:has(a[href*="/dolce-gusto-compatible/"])  { --esp-sys-icon: url(../icons/sys-dolce-gusto.svg?v=m2); }
.wd-cat.cat-design-default:has(a[href*="/caffitaly-compatible/"])    { --esp-sys-icon: url(../icons/sys-caffitaly.svg?v=y1); }
.wd-cat.cat-design-default:has(a[href*="/a-modo-mio-compatible/"])   { --esp-sys-icon: url(../icons/sys-a-modo-mio.svg?v=y1); }
/* Taller card so the icon sits above a three-line title (Dolce Gusto). */
.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-image img { height: 136px; object-fit: cover; }
.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-inner::before { width: 30px; height: 30px; top: 16px; }

/* ==========================================================================
   Phase P4 (21.10.2026): O4 QA defects
   ========================================================================== */

/* #1 Contact form submit was white on #f3f3f3 (about 1.1:1). Brand brown, white text. */
.page-id-4439 .elementor-form .elementor-button[type="submit"] {
	background-color: var(--esp-brown);
	border: 1px solid var(--esp-brown);
	color: var(--esp-white);
}
.page-id-4439 .elementor-form .elementor-button[type="submit"]:hover,
.page-id-4439 .elementor-form .elementor-button[type="submit"]:focus-visible {
	background-color: var(--esp-coffee);
	border-color: var(--esp-coffee);
	color: var(--esp-white);
}

/* #2 Footer newsletter consent was #3a3a3a on #2a2a2a. Cream text, khaki link. */
.elementor-728 .elementor-field-type-acceptance .elementor-field-option,
.elementor-728 .elementor-field-type-acceptance .elementor-field-option label {
	color: rgba(249, 246, 240, .82);
}
.elementor-728 .elementor-field-type-acceptance a {
	color: var(--esp-khaki);
	text-decoration: underline;
}

/* #9 Footer newsletter had no side gutter at tablet width. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-728 .elementor-element-2db5788 {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* #3 Header "ОЩЕ" label was cream (#f9f6f0) on white. */
.whb-header li.espreso-oshte > a,
.whb-header li.espreso-oshte > a .nav-link-text {
	color: var(--esp-graphite);
}
.whb-header li.espreso-oshte:hover > a,
.whb-header li.espreso-oshte > a:focus-visible {
	color: var(--esp-brown);
}

/* #4 Chat bubble covered the side-cart buttons on phones: hide it while a drawer is open. */
body:has(.cart-widget-side.wd-opened) .wpsr-fm-chat-wrapper,
body:has(.mobile-nav.wd-opened) .wpsr-fm-chat-wrapper {
	display: none !important;
}

/* #8 Mobile drawer listed the wishlist twice (custom "Любими" and WoodMart's own link) and
   "Моят акаунт", which the bottom toolbar already has. The desktop "ОЩЕ" menu keeps both. */
.mobile-nav li.espreso-more:has(> a[href$="/wishlist/"]),
.mobile-nav li.espreso-more:has(> a[href*="/my-account/"]) {
	display: none;
}

/* #10 Cookie banner in brandbook colours (was Complianz default blue). */
#cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-manage-consent {
	--cmplz_banner_background_color: var(--esp-white);
	--cmplz_banner_border_color: var(--esp-hairline);
	--cmplz_text_color: var(--esp-graphite);
	--cmplz_hyperlink_color: var(--esp-brown);
	--cmplz_button_accept_background_color: var(--esp-brown);
	--cmplz_button_accept_border_color: var(--esp-brown);
	--cmplz_button_accept_text_color: var(--esp-white);
	--cmplz_button_deny_background_color: var(--esp-cream);
	--cmplz_button_deny_border_color: var(--esp-khaki);
	--cmplz_button_deny_text_color: var(--esp-graphite);
	--cmplz_button_settings_background_color: var(--esp-cream);
	--cmplz_button_settings_border_color: var(--esp-khaki);
	--cmplz_button_settings_text_color: var(--esp-graphite);
	--cmplz_slider_active_color: var(--esp-brown);
	--cmplz_category_header_always_active_color: var(--esp-brown);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background-color: var(--esp-coffee);
	border-color: var(--esp-coffee);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link {
	color: var(--esp-brown);
}

/* Phase P4: product-page CLS (mobile 0.12). The main gallery carousel grew to its tallest slide on
   init (e.g. a 600×1067 photo turned 382px into 679px). Every main slide is framed square, so the
   height is known before the script runs and nothing moves. Zoom overlay excluded. */
.woocommerce-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background-color: var(--esp-white);
}

/* Phase P4: featured-card price was brown on the graphite mega menu. */
.espreso-mm-featured .espreso-mm-featured__price, .espreso-mm-featured .espreso-mm-featured__price .amount { color: var(--esp-khaki); }

/* Phase R1: category description above the products (layout 29267). First ~3 lines, "Виж повече" opens the rest. */
.espreso-catdesc { margin: 0 0 24px; max-width: 80ch; }
.espreso-catdesc .term-description { margin: 0; color: var(--esp-graphite); font-size: 15px; line-height: 1.6; max-height: calc(3 * 1.6em); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.espreso-catdesc.is-open .term-description, .espreso-catdesc.is-short .term-description { max-height: none; -webkit-mask-image: none; mask-image: none; }
.espreso-catdesc .term-description > :first-child { margin-top: 0; }
.espreso-catdesc .term-description p { margin: 0 0 .8em; }
.espreso-catdesc .term-description :is(h1, h2, h3, h4, h5, h6) { margin: 1em 0 .4em; font-size: 17px !important; line-height: 1.6 !important; font-weight: 600; color: var(--esp-coffee); text-transform: none; }
.espreso-catdesc .term-description > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.espreso-catdesc .term-description a { color: var(--esp-brown); text-decoration: underline; }
/* WoodMart styles every <button>; the toggle is a text link in brand brown. */
.espreso-catdesc button.espreso-catdesc__toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 4px 0 !important; min-height: 0 !important; height: auto !important; background: none !important; border: 0 !important; border-radius: 0; box-shadow: none !important; color: var(--esp-brown) !important; font-size: 15px !important; font-weight: 600; line-height: 1.4; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.espreso-catdesc button.espreso-catdesc__toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--esp-ease); }
.espreso-catdesc.is-open .espreso-catdesc button.espreso-catdesc__toggle::after { transform: translateY(2px) rotate(-135deg); }
.espreso-catdesc button.espreso-catdesc__toggle:hover { color: var(--esp-coffee) !important; background: none !important; }
.espreso-catdesc button.espreso-catdesc__toggle:focus-visible { outline: 2px solid var(--esp-khaki); outline-offset: 2px; }
.espreso-catdesc button.espreso-catdesc__toggle[hidden] { display: none; }

/* ==========================================================================
   Phase U: Emil's notes (22.10)
   ========================================================================== */

/* Hero (.espreso-hero, poster + video) fills the screen under the header: measured 185px desktop,
   ~60px tablet and phone. Replaces Elementor's 78/73/75vh. The headline block takes the free
   height and stays vertically centred; the video (absolute, cover) follows the container.
   Supersedes the 16:9 / 4:5 aspect-ratio CLS guard in style.css: a viewport-based height is just
   as fixed before the video arrives, so the guard's job (no shift on video swap) still holds. */
.elementor-7271 .espreso-hero {
	aspect-ratio: auto;
	min-height: calc(100vh - 185px);
	min-height: calc(100svh - 185px);
}
.elementor-7271 .espreso-hero > .elementor-element-6529666 {
	flex: 1 1 auto;
	--align-items: center;
	align-items: center;
}
@media (max-width: 1024px) {
	.elementor-7271 .espreso-hero { aspect-ratio: auto; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); --padding-top: 0px; padding-top: 0; }
	.elementor-7271 .espreso-hero > .elementor-element-6529666 { --justify-content: center; justify-content: center; }
}

/* Main menu row centred (the centre and right header columns are empty). */
@media (min-width: 1025px) {
	.whb-header-bottom .whb-col-left { flex: 1 1 auto; max-width: none; justify-content: center; }
	.whb-header-bottom .whb-col-center.whb-empty-column, .whb-header-bottom .whb-col-right.whb-empty-column { display: none; }
	.whb-header-bottom .wd-header-main-nav { flex: 0 1 auto; text-align: center; }
	.whb-header-bottom .wd-nav-main { justify-content: center; }
}

/* Mega-menu icons 50% larger (18 -> 27px); the mobile drawer keeps 18px. */
.wd-nav-main .wd-dropdown-menu .wd-mi > a::before {
	width: 27px;
	height: 27px;
	margin-inline-end: 10px;
	vertical-align: middle;
}
.wd-nav-main .wd-dropdown-menu .wd-mi > a { display: inline-flex; align-items: center; }

/* Panels with 5 columns (3 link columns + Акцент + Топ брандове): logos 2 per row, tighter
   columns, so Топ брандове stays on the first row at 1366px. */
.wd-nav-main .wd-dropdown-menu .wd-sub-menu:has(> li.wd-mm-featured):has(> li:nth-child(5)) > li.wd-col { padding-inline: 12px; }
.wd-nav-main .wd-dropdown-menu .wd-sub-menu:has(> li.wd-mm-featured):has(> li:nth-child(5)) > li.wd-mm-brands .espreso-brandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Highlights (доставка / цени / консултация): brown with white text (6.4:1). */
.espreso-highlight { background: var(--esp-brown) !important; border-top-color: var(--esp-coffee); }
.espreso-highlight, .espreso-highlight p, .espreso-highlight .elementor-heading-title, .espreso-highlight .elementor-widget-text-editor { color: var(--esp-white) !important; }
.espreso-highlight a { color: var(--esp-cream) !important; text-decoration: underline; text-underline-offset: 2px; }

/* "Нуждаете се от помощ": the icon's baked-in green circle swapped for brand brown. */
.elementor-7271 .elementor-element-4f5137b .wd-image { width: 80px; height: 80px; background: url(../icons/help-grinder.svg?v=u2) no-repeat center / 80px 80px; }
.elementor-7271 .elementor-element-4f5137b .wd-image img { opacity: 0; }

/* Back-to-top sat exactly under the chat bubble; it now sits above it. */
.scrollToTop { bottom: 92px !important; right: 22px !important; }
@media (max-width: 1024px) {
	.scrollToTop { bottom: calc(137px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
}

/* Shop and category title band: grey instead of the brown beans photo, dark text. On category
   pages it lists that section's subcategories (theme option); on /shop/ the list would only
   repeat the mega menu, so it is hidden there. */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title { background-color: #EDEDED; }
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-page-title-bg { display: none; }
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title :is(.entry-title, .title, h1, .wd-nav-product-cat a, .nav-link-text, .wd-btn-show-cat a) { color: var(--esp-graphite) !important; }
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title :is(.nav-link-count, .category-products-count) { color: #5E5A57 !important; }
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat a:hover .nav-link-text { color: var(--esp-brown) !important; }
body.post-type-archive-product .wd-page-title :is(.wd-nav-product-cat, .wd-btn-show-cat) { display: none !important; }

/* ==========================================================================
   Phase V: audit fixes (23.10)
   ========================================================================== */

/* Category title band: the mobile "show categories" toggle kept WoodMart's white text
   on the Phase U grey band (contrast 1.17). */
:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title :is(.wd-btn-show-cat, .wd-btn-show-cat a, .wd-btn-show-cat .wd-action-text) { color: var(--esp-graphite) !important; }

/* ==========================================================================
   Phase W: client meeting (23.10)
   ========================================================================== */

/* Mega-menu icons larger again (27 -> 36px); the mobile drawer keeps 18px. */
.wd-nav-main .wd-dropdown-menu .wd-mi > a::before { width: 36px; height: 36px; margin-inline-end: 12px; }

/* One header row: logo | main menu (centre) | icons. */
@media (min-width: 1025px) {
	.whb-general-header .whb-col-center { flex: 1 1 auto; justify-content: center; }
	.whb-general-header .wd-header-main-nav .wd-nav-main { justify-content: center; }
}

/* ПРОМОЦИИ: last item of the main menu, brown pill. */
.wd-nav-main > li.espreso-menu-promo > a { background-color: var(--esp-brown); color: #FFFFFF !important; border-radius: 999px; padding-inline: 14px; height: auto; min-height: 34px; align-self: center; }
.wd-nav-main > li.espreso-menu-promo > a:hover { background-color: var(--esp-coffee); }
.wd-nav-mobile li.espreso-menu-promo > a { color: var(--esp-brown) !important; font-weight: 700; }

/* "Изчерпано" badge: a pill, not the round label (the long text broke the circle). */
.product-labels .product-label.out-of-stock { width: auto; min-width: 0; height: auto; min-height: 0; aspect-ratio: auto; border-radius: 999px; padding: 4px 10px; line-height: 1.3; white-space: nowrap; }

/* Product archives: breadcrumbs live in the title band (inc/phase-w.php); hide the copy above the grid. */
.espreso-title-crumbs { margin-top: 6px; }
.espreso-title-crumbs .wd-breadcrumbs { justify-content: center; color: var(--esp-graphite); }
.espreso-title-crumbs .wd-breadcrumbs a { color: #5E5A57; }
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .woocommerce-breadcrumb:not(.espreso-title-crumbs .woocommerce-breadcrumb) { display: none; }

/* Кафе на зърна beans photo: superseded by the Phase U2 shop header on all archives. */

/* Checkout: Bulgaria-only country field hidden; invoice fields shown by the "Желая фактура" checkbox. */
.espreso-hidden-field { display: none !important; }
.espreso-invoice-field { display: none; }

/* One-row header must fit 7 items + icons at 1280-1440px: tighter items. */
@media (min-width: 1025px) {
	.whb-general-header .wd-nav-main { flex-wrap: nowrap; }
	.whb-general-header .wd-nav-main > li > a { padding-inline: 8px; font-size: 14px; white-space: nowrap; }
	.whb-general-header .wd-nav-main > li.espreso-menu-promo { margin-inline-start: 6px; }
}
@media (min-width: 1025px) and (max-width: 1439px) {
	.whb-general-header .wd-nav-main > li > a { padding-inline: 6px; font-size: 13px; }
	.whb-general-header .whb-space-element { display: none; }
}

/* Title-band breadcrumbs on their own line under the title; current item graphite, not white. */
.wd-page-title .wd-title-wrapp:has(.espreso-title-crumbs) { flex-wrap: wrap; justify-content: center; }
.espreso-title-crumbs { flex: 0 0 100%; width: 100%; text-align: center; }
.espreso-title-crumbs .wd-breadcrumbs :is(.wd-last, span:last-child) { color: var(--esp-graphite) !important; }

/* One-row header: WoodMart spaces items with --nav-gap, not padding; tighten it so the icons fit at 1280px. */
@media (min-width: 1025px) {
	.whb-general-header .wd-nav-main { --nav-gap: 10px; }
	.whb-general-header .wd-nav-main > li > a { padding-inline: 6px; }
}
@media (min-width: 1025px) and (max-width: 1439px) {
	.whb-general-header .wd-nav-main { --nav-gap: 2px; }
	.whb-general-header .whb-col-left { flex: 0 0 auto; }
	.whb-general-header .site-logo img { max-width: 150px; }
}

/* ==========================================================================
   Phase U2: Emil's media (26.10)
   ========================================================================== */

/* Shop header photo (Emil) on /shop/ and every product archive: WebP, 768px file on phones,
   1920px above. Cream veil keeps the graphite title and crumbs readable. Replaces the
   Phase W coffee-beans-only rule and the Phase U plain grey band. Preloaded in inc/phase-u2.php. */
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title {
	position: relative;
	background: #EDEDED url(/wp-content/uploads/2017/07/header-1.jpg) center / cover no-repeat;
	background-image: image-set(url(/wp-content/uploads/2017/07/header-1.webp) type("image/webp"), url(/wp-content/uploads/2017/07/header-1.jpg) type("image/jpeg"));
}
@media (max-width: 767px) {
	:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title {
		background-image: url(/wp-content/uploads/2017/07/header-1-768x267.jpg);
		background-image: image-set(url(/wp-content/uploads/2017/07/header-1-768x267.webp) type("image/webp"), url(/wp-content/uploads/2017/07/header-1-768x267.jpg) type("image/jpeg"));
	}
}
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title::before { content: ""; position: absolute; inset: 0; background: rgba(249, 246, 240, .55); pointer-events: none; }
:is(body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title > .container { position: relative; }

/* Second menu (the section's subcategories) on a grey panel over the photo. */
:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat {
	background: #EDEDED; border-radius: 12px; padding: 12px 20px; margin-top: 14px;
}
@media (min-width: 1025px) {
	:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat { display: inline-flex; }
}
@media (max-width: 1024px) {
	:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat { padding: 6px 14px; text-align: start; }
}

/* Help section: Emil's before/after photos as a drag slider (inc/phase-u2.php). */
.espreso-ba { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto; overflow: hidden; border-radius: 16px; background: #FFFFFF; user-select: none; touch-action: pan-y; }
.espreso-ba .espreso-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.espreso-ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.espreso-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(45, 43, 42, .25); pointer-events: none; }
.espreso-ba__handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--esp-brown, #8A5231); color: #FFFFFF; font-size: 22px; line-height: 44px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.espreso-ba__label { position: absolute; top: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(45, 43, 42, .78); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: .02em; pointer-events: none; }
.espreso-ba__label--before { left: 14px; }
.espreso-ba__label--after { right: 14px; background: var(--esp-brown, #8A5231); }
.espreso-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
/* keyboard focus */ .espreso-ba:has(.espreso-ba__range:focus-visible) { outline: 3px solid var(--esp-brown, #8A5231); outline-offset: 3px; }
@media (max-width: 1024px) { .espreso-ba { max-width: 480px; } }
.elementor-widget-shortcode:has(.espreso-ba) { flex: 1 1 100%; width: 100%; max-width: 100%; } /* the column is a flex row on tablet/phone */

/* ==========================================================================
   Phase U4: archive title band readability (26.10)
   ========================================================================== */

/* Breadcrumbs over the beans photo: cream pill, graphite text (was grey on the photo, barely visible). */
.wd-page-title .espreso-title-crumbs .wd-breadcrumbs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; padding: 5px 16px; border-radius: 999px; background: rgba(249, 246, 240, .92); color: var(--esp-graphite); font-weight: 500; }
.wd-page-title .espreso-title-crumbs .wd-breadcrumbs a { color: var(--esp-graphite) !important; }
.wd-page-title .espreso-title-crumbs .wd-breadcrumbs a:hover { color: var(--esp-brown) !important; }
.wd-page-title .espreso-title-crumbs .wd-breadcrumbs :is(.wd-last, span:last-child) { color: var(--esp-coffee) !important; font-weight: 700; }

/* Subcategory bar: names only (counts dropped), tighter, so a section's subcategories fit one row. */
:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat .nav-link-count { display: none; }
@media (min-width: 1025px) {
	:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat { --nav-gap: 2px; padding: 6px 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
	:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat > li > a { padding: 6px 8px; }
	:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat .nav-link-text { font-size: 13px; letter-spacing: .01em; white-space: nowrap; }
	:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat > li > a:hover { background: #FFFFFF; border-radius: 8px; }
}

/* Category description: ~5 lines before "Виж повече" (was 3 with a heavy fade, read as cut off). */
.espreso-catdesc .term-description { max-height: calc(5 * 1.6em); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
@media (min-width: 1025px) {
	/* The bar may use the screen width, not just the 1222px container, so 7 long names fit one row from 1366px. */
	:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title > .container { max-width: none; }
	:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat { width: fit-content; max-width: min(1400px, calc(100vw - 48px)); margin-inline: auto; row-gap: 0; }
	:is(body.tax-product_cat, body.tax-product_tag, body[class*="tax-pa_"]) .wd-page-title .wd-nav-product-cat > li > a { min-height: 0; height: auto; line-height: 1.3; }
}

/* ==========================================================================
   Phase U5 (26.10): capsule-system cards and category description toggle
   ========================================================================== */

/* WoodMart slid the title up on hover to reveal the product count, so it ran over the
   system icon. The card now stays still: the count is always shown under the title, the
   card is taller to fit icon + three-line title + count, and hover only recolours the icon. */
@media (min-width: 769px) { .wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-image img { height: 170px; } }
.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-content { transform: none !important; transition: none; }
.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-count { opacity: 1 !important; transform: none !important; }

/* Toggle arrow: the Phase R1 selector repeated .espreso-catdesc and never matched. */
.espreso-catdesc.is-open button.espreso-catdesc__toggle::after { transform: translateY(2px) rotate(-135deg); }

/* ПРОМОЦИИ pill sat 4px high: its <li> is a block, so the link's align-self: center had no effect. */
.wd-nav-main > li.espreso-menu-promo { display: flex; align-items: center; }

/* ==========================================================================
   Phase Y (31.10): Ivan's fixes
   ========================================================================== */

/* Y1 Floating buttons on phones. The bubble was lifted above the bottom toolbar (Phase K),
   but the channel column (Viber, WhatsApp, Messenger, phone) kept the plugin's 95px offset,
   so the phone button landed on the bubble. The column now starts 12px above the bubble and
   shares its right edge. Back-to-top hides while the column is open (it sat underneath). */
@media (max-width: 1024px) {
	.wpsr-fm-chat-wrapper .wpsr-channels-icons {
		margin-bottom: calc(72px + 55px + 12px + env(safe-area-inset-bottom, 0px)) !important;
		right: var(--esp-fab-right, 18px) !important;
	}
}
body:has(.wpsr-fm-chat-bubble.active) .scrollToTop { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Y3 Capsule-system cards on phones: a compact 2-column grid, icon + name + count in one
   short card (was one 200px card per row, mostly empty background). Desktop is unchanged. */
@media (max-width: 768px) {
	.wd-cats:has(> .wd-cat a[href*="/capsules-and-pods/"]) {
		display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important; margin: 0 !important;
	}
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) { width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; }
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-inner {
		display: flex; align-items: center; gap: 10px; height: 100%; min-height: 66px;
		padding: 10px 10px 10px 12px; border: 1px solid var(--esp-hairline); border-radius: var(--esp-radius);
		background: var(--esp-cream); box-shadow: none;
	}
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-thumb { display: none; }
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-inner::before { position: static; flex: 0 0 28px; width: 28px; height: 28px; }
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-content {
		position: static; flex: 1 1 auto; min-width: 0; padding: 0; margin: 0; background: none; text-align: left;
	}
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-entities-title {
		margin: 0 0 2px; font-size: 13px !important; line-height: 1.25 !important; letter-spacing: 0; hyphens: manual;
	}
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-count { margin: 0; font-size: 12px !important; line-height: 1.3; }
}
/* Narrow phones (iPhone SE, 360px Androids): icon above the name so СЪВМЕСТИМИ is never split. */
@media (max-width: 374px) {
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-inner { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-inner::before { flex-basis: 24px; width: 24px; height: 24px; }
	.wd-cat.cat-design-default:has(a[href*="/capsules-and-pods/"]) .wd-cat-content { flex: none; width: 100%; }
}
@media (min-width: 600px) and (max-width: 768px) {
	.wd-cats:has(> .wd-cat a[href*="/capsules-and-pods/"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Phase Y2 (31.10): Google/Facebook login hidden until the client provides the apps (WoodMart already shows
   nothing while the app IDs are empty; this keeps it hidden if they are entered early). To restore: delete
   this rule and restore Общи условия / Поверителност from backups/legal-pages-pre-phaseY2.json. */
.wd-social-login, .wd-login-divider:has(+ .wd-social-login) { display: none !important; }

/* QA 2.11 — mobile checkout: "Доставка" label above the options, options full width and left-aligned. */
@media (max-width: 768px) {
	.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals,
	.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th,
	.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td { display: block; width: 100% !important; text-align: left !important; }
	.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th { padding-bottom: 4px; border: 0; }
	.woocommerce-checkout-review-order-table #shipping_method li { text-align: left !important; }
	.woocommerce-checkout-review-order-table #shipping_method li > input { float: none; margin: 0 6px 0 0; vertical-align: middle; }
}

/* QA 2.11 — mobile toolbar "Търсене" showed a gear icon: use a magnifier (same stroke style as the other toolbar icons). */
.wd-toolbar-link-1 .wd-toolbar-icon.wd-custom-icon > * { display: none !important; }
.wd-toolbar-link-1 .wd-toolbar-icon.wd-custom-icon::before {
	content: ""; display: inline-block; width: 22px; height: 22px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wd-toolbar-link-1 .wd-toolbar-icon.wd-custom-icon { background-image: none !important; }

/* QA 2.11 — BOX NOW / Speedy locator buttons were plugin green: use the brand colour. */
#woo-bg--boxnow-apm-locator, #woo-bg--speedy-office-locator, [id^="woo-bg--"][id$="-locator"] {
	background-color: var(--wd-primary-color, #6f3d1c) !important; border-color: var(--wd-primary-color, #6f3d1c) !important; color: #fff !important;
}

@media (max-width: 768px) { .woocommerce-checkout-review-order-table #shipping_method li > label { display: inline !important; } }