/* HighPony Obchod — dropdowns with category images + the cascade, and the
   shop category bar.

   The cascade is a vanilla port of the cookbook's action-search-bar dropdown:
   panel eases open (0.35s, cubic-bezier(.22,1,.36,1)) while its items fly up
   one after another (16px, 0.32s, 0.07s apart) starting 0.12s AFTER the panel
   begins — that delay is the whole trick. Without it the items animate inside
   a panel that has not opened yet and the stagger is invisible.
   Closing is deliberately quick and unstaggered: nobody wants to wait to
   dismiss a menu. */

:root {
	--hp-ease: cubic-bezier(.22, 1, .36, 1);
	--hp-drop-bg: rgba(24, 21, 48, .97);
	--hp-drop-border: rgba(255, 255, 255, .1);
	--hp-drop-ink: #f2eee6;
	--hp-drop-accent: #e0a93e;
}

/* ---------- dropdown panel ----------
   Elementor drives these with SmartMenus, which toggles inline
   `display:none` <-> `display:block`. `display` is not transitionable and a
   change out of `none` skips transitions entirely, so the panel popped in
   fully formed and only the items appeared to react. A stylesheet
   `!important` beats a non-important inline style, so we keep the panel
   permanently displayed and drive open/close ourselves with
   opacity/visibility/transform — which ARE transitionable.
   Desktop only: below 1025px Elementor uses the same markup for the burger
   menu, and forcing display there would break it. */
@media (min-width: 1025px) {
	.hp-submenu { display: block !important; }
	/* Elementor pins a narrow fixed width, so long names ("Semená Marihuany")
	   spilled past the panel edge. Size to the content instead, bounded. */
	.hp-submenu {
		width: max-content !important;
		min-width: 340px !important;
		max-width: 480px !important;
	}
	/* The panel hangs a little below the menu bar, and crossing that dead strip
	   with the mouse used to drop the hover and close it. This invisible bridge
	   extends the panel's own hover area up into the gap, so the pointer never
	   leaves an interactive surface on the way down. */
	.hp-has-drop > .hp-submenu::before {
		content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px;
	}
	/* and a little breathing room around the whole panel */
	.hp-has-drop > .hp-submenu { padding: 8px !important; }
	.hp-has-drop > .hp-submenu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
	.hp-has-drop:hover > .hp-submenu,
	.hp-has-drop:focus-within > .hp-submenu,
	.hp-has-drop.hp-open > .hp-submenu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
	/* leaving: collapse briskly so the menu never feels like it is lagging */
	.hp-has-drop > .hp-submenu { transition-duration: .16s, .2s, .22s, 0s !important; }
	.hp-has-drop:hover > .hp-submenu,
	.hp-has-drop.hp-open > .hp-submenu { transition-duration: .22s, .38s, .44s, 0s !important; }
}

.hp-submenu {
	opacity: 0;
	visibility: hidden;
	/* the panel itself should arrive, not blink into place: it drops in and
	   grows from the top edge while the items cascade inside it */
	/* rolls DOWN: clip-path uncovers the panel top-to-bottom while the items
	   cascade inside it — the cookbook's height:0->auto container, done with a
	   property that can actually be transitioned (height:auto cannot). */
	transform: translateY(-8px);
	transform-origin: top center;
	clip-path: inset(0 0 100% 0 round 18px);
	transition:
		opacity .22s ease,
		transform .38s var(--hp-ease),
		clip-path .44s var(--hp-ease),
		visibility 0s linear .44s;
	/* liquid glass, pink-tinted: a white sheen over a translucent pink wash,
	   with the page blurred through it. !important throughout because
	   Elementor paints the dropdown a flat pink with heavier selectors. */
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07) 60%, rgba(255, 255, 255, .05)),
		linear-gradient(rgba(14, 15, 38, .84), rgba(20, 16, 52, .82)) !important;
	border: 1px solid rgba(255, 255, 255, .16) !important;
	border-radius: 18px !important;
	padding: 10px !important;
	box-shadow:
		0 28px 56px rgba(0, 0, 0, .5),
		inset 0 1px 0 rgba(255, 255, 255, .22),
		inset 0 -1px 0 rgba(255, 255, 255, .06) !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.2) brightness(.92);
	backdrop-filter: blur(18px) saturate(1.2) brightness(.92);
}

.hp-has-drop:hover > .hp-submenu,
.hp-has-drop:focus-within > .hp-submenu,
.hp-has-drop.hp-open > .hp-submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
	clip-path: inset(0 0 0 0 round 18px);
	transition-delay: 0s, 0s, 0s, 0s;
}

/* ---------- items: hidden state + the cascade ---------- */
.hp-submenu > li {
	opacity: 0;
	transform: translateY(16px);
	/* closing: fast, no stagger */
	transition: opacity .12s linear, transform .12s var(--hp-ease);
	list-style: none;
}

.hp-has-drop:hover > .hp-submenu > li,
.hp-has-drop:focus-within > .hp-submenu > li,
.hp-has-drop.hp-open > .hp-submenu > li {
	opacity: 1;
	transform: none;
	transition: opacity .32s var(--hp-ease), transform .32s var(--hp-ease);
}

/* delayChildren .12s + staggerChildren .07s */
.hp-has-drop:hover > .hp-submenu > li:nth-child(1), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(1) { transition-delay: .12s; }
.hp-has-drop:hover > .hp-submenu > li:nth-child(2), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(2) { transition-delay: .19s; }
.hp-has-drop:hover > .hp-submenu > li:nth-child(3), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(3) { transition-delay: .26s; }
.hp-has-drop:hover > .hp-submenu > li:nth-child(4), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(4) { transition-delay: .33s; }
.hp-has-drop:hover > .hp-submenu > li:nth-child(5), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(5) { transition-delay: .40s; }
.hp-has-drop:hover > .hp-submenu > li:nth-child(6), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(6) { transition-delay: .47s; }
.hp-has-drop:hover > .hp-submenu > li:nth-child(7), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(7) { transition-delay: .54s; }
.hp-has-drop:hover > .hp-submenu > li:nth-child(8), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(8) { transition-delay: .61s; }
.hp-has-drop:hover > .hp-submenu > li:nth-child(9), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(9) { transition-delay: .68s; }
.hp-has-drop:hover > .hp-submenu > li:nth-child(n+10), .hp-has-drop.hp-open > .hp-submenu > li:nth-child(n+10) { transition-delay: .72s; }

/* ---------- the item itself: thumb + label ---------- */
.hp-submenu > li > a {
	border-radius: 14px !important;
	padding: 5px 14px 5px 2px !important;
	color: #f2eee6 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
	transition: background .18s ease;
}
.hp-submenu > li > a:hover { background: rgba(255, 255, 255, .12) !important; }
.hp-mi {
	display: flex; align-items: center; gap: 12px; min-width: 0;
}
/* pure image on transparent ground — no frame, no fill, no rounding */
.hp-mi-thumb {
	flex: 0 0 auto; width: 66px; height: 66px; display: block;
	background: none; border: 0; border-radius: 0;
}
.hp-mi-thumb .hp-mi-img,
.hp-mi-thumb img {
	/* absolute inside a sized box: WebKit treats height:100% inside an
	   aspect-ratio parent as indefinite and blows the image out (documented
	   thumbnail bug on this site) — this shape is safe in both engines. */
	width: 100%; height: 100%; object-fit: contain; display: block;
	transition: transform .35s var(--hp-ease);
}
.hp-submenu > li > a:hover .hp-mi-img { transform: scale(1.08); }
.hp-mi-empty { background: none; } /* invisible spacer keeps labels aligned */
/* label never truncates; it is the thing people read (cookbook rule) */
.hp-mi-label {
	min-width: 0; white-space: nowrap;
	/* font reverted to the theme's own face — only the SIZE is ours */
	font-size: 17px !important; font-weight: 600;
	letter-spacing: .01em; line-height: 1.2;
}
/* the panel is a touch wider now that the type and images grew */
@media (min-width: 1025px) {
	.hp-submenu { min-width: 330px !important; max-width: 440px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.hp-submenu, .hp-submenu > li { transition-duration: .01ms !important; transition-delay: 0s !important; }
	.hp-submenu { clip-path: none !important; }
	.hp-submenu > li { transform: none; }
	.hp-mi-img { transition: none; }
}

/* ---------- shop: filter bar, search, glass gallery ---------- */
.hp-filterwrap { margin: 0 0 4px; }
.hp-shopbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* pills on ONE line — they scroll sideways rather than wrapping into rows */
.hp-catbar {
	display: flex; flex-wrap: nowrap; gap: 10px;
	margin: 0; padding: 2px 2px 6px; min-width: 0; flex: 1 1 100%;   /* full row: a chip cut in half by the search box read as broken */
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	cursor: grab;
	/* a real scrollbar: the row is draggable, but people should also be able
	   to see that there is more and drag the bar itself */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 122, 217, .55) rgba(255, 255, 255, .07);
	/* grab strip ABOVE the pills — a band of the row that no chip covers, so
	   there is always somewhere safe to start a drag */
	padding-top: 20px;
}
/* A hard edge on a scroller looks like a rendering fault; fade whichever side
   still has content behind it. The classes are toggled from JS because CSS
   cannot see scroll position. */
.hp-catbar.hp-fade-r, .hp-subbar.hp-fade-r {
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%);
}
.hp-catbar.hp-fade-l, .hp-subbar.hp-fade-l {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 100%);
}
.hp-catbar.hp-fade-l.hp-fade-r, .hp-subbar.hp-fade-l.hp-fade-r {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.hp-catbar::-webkit-scrollbar, .hp-subbar::-webkit-scrollbar { height: 9px; }
.hp-catbar::-webkit-scrollbar-track, .hp-subbar::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, .07); border-radius: 999px;
}
.hp-catbar::-webkit-scrollbar-thumb, .hp-subbar::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, rgba(255, 95, 162, .75), rgba(200, 109, 215, .75));
	border-radius: 999px;
}
.hp-catbar::-webkit-scrollbar-thumb:hover, .hp-subbar::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(135deg, #ff5fa2, #c86dd7);
}
/* a link drags its own ghost image by default, which fought the grab gesture */
.hp-catbar a, .hp-subbar a { -webkit-user-drag: none; user-select: none; }
.hp-catbar.is-grabbing, .hp-subbar.is-grabbing { cursor: grabbing; user-select: none; }
/* while dragging the chips must not swallow the pointer or highlight text */
.hp-catbar.is-grabbing a, .hp-subbar.is-grabbing a { pointer-events: none; }

/* ---------- second row: subcategories of the selected category ---------- */
.hp-subbar {
	display: flex; flex-wrap: nowrap; gap: 8px; width: 100%;
	margin: 10px 0 0; padding: 16px 2px 6px;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 122, 217, .45) rgba(255, 255, 255, .06);
	cursor: grab;
}
.hp-subchip {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 14px; border-radius: 999px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .14);
	color: rgba(242, 238, 230, .82) !important; text-decoration: none !important;
	font-size: 12.5px; letter-spacing: .04em; white-space: nowrap; line-height: 1.2;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--hp-ease);
}
.hp-subchip:hover { background: rgba(255, 255, 255, .09); color: #fff !important; transform: translateY(-1px); }
.hp-subchip:focus-visible { outline: 2px solid #ffd0e6; outline-offset: 2px; }
.hp-subchip.is-on {
	background: linear-gradient(135deg, rgba(255, 95, 162, .28), rgba(200, 109, 215, .28));
	border-color: rgba(255, 122, 217, .6); color: #fff !important;
}

.hp-chip {
	position: relative; overflow: hidden; flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px; border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #f2eee6 !important; text-decoration: none !important;
	font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	white-space: nowrap; line-height: 1.2;
	transition: transform .22s var(--hp-ease), box-shadow .22s ease, border-color .22s ease;
}
/* the pink gradient lives on a pseudo-element so it can FADE in behind the
   label instead of snapping — background-image is not interpolable */
.hp-chip::before {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(135deg, #ff5fa2 0%, #ff7ad9 45%, #c86dd7 100%);
	opacity: 0; transition: opacity .26s ease;
}
.hp-chip > * { position: relative; }
.hp-chip:hover::before, .hp-chip:focus-visible::before, .hp-chip.is-on::before { opacity: 1; }
.hp-chip:hover, .hp-chip:focus-visible {
	transform: translateY(-2px);
	border-color: transparent;
	box-shadow: 0 10px 26px rgba(255, 95, 162, .38);
}
.hp-chip:focus-visible { outline: 2px solid #ffd0e6; outline-offset: 2px; }
.hp-chip.is-on { border-color: transparent; box-shadow: 0 8px 22px rgba(255, 95, 162, .32); }
.hp-chip-count { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }

/* the label is for screen readers only — do not rely on the theme shipping
   a .screen-reader-text rule, it showed as visible text without one */
.hp-search .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

/* search */
.hp-search { position: relative; flex: 1 1 100%; max-width: 420px; margin: 0; }
.hp-search input[type="search"] {
	width: 100%; box-sizing: border-box;
	padding: 12px 16px 12px 42px; border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #f2eee6; font-size: 14px; line-height: 1.3;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.hp-search input[type="search"]::placeholder { color: rgba(242, 238, 230, .45); }
.hp-search input[type="search"]:focus {
	outline: none; background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 122, 217, .7);
	box-shadow: 0 0 0 3px rgba(255, 95, 162, .18);
}
.hp-search-ico {
	position: absolute; left: 15px; top: 50%; width: 15px; height: 15px;
	transform: translateY(-50%); pointer-events: none; opacity: .55;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
	color: #f2eee6;
}

/* divider */
.hp-divider {
	height: 1px; border: 0; margin: 18px 0 24px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2) 18%, rgba(255, 255, 255, .2) 82%, transparent);
}

/* the gallery sits on its own pane of glass so it reads as a separate surface */
.hp-shop-glass {
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .035)),
		linear-gradient(rgba(14, 15, 38, .5), rgba(20, 16, 52, .46));
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 24px;
	padding: 28px 26px 10px;
	box-shadow: 0 26px 60px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
}
@media (max-width: 720px) {
	.hp-shop-glass { padding: 18px 14px 6px; border-radius: 18px; }
	.hp-search { flex: 1 1 100%; }
}

/* the grid fades while the next page is fetched — never blank, never jumpy */
.hp-swapping { opacity: .45; transition: opacity .18s ease; pointer-events: none; }

/* ---------- subcategory tiles without their thumbnails ----------
   With the image gone these are just a heading, so they read better as chips
   than as tall empty cards. */
li.product-category { text-align: center; }
li.product-category > a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px; border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	text-decoration: none !important;
	transition: background .18s ease, transform .18s var(--hp-ease), border-color .18s ease;
}
li.product-category > a:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
li.product-category h2, li.product-category .woocommerce-loop-category__title {
	margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.2;
}
li.product-category mark, li.product-category .count { background: none; opacity: .6; }

/* ---------- instant filtering ---------- */
li.hp-prod.hp-hidden { display: none !important; }
.hp-empty {
	margin: 26px 2px; font-size: 15px; color: rgba(242, 238, 230, .7);
}