: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;
} @media (min-width: 1025px) {
.hp-submenu { display: block !important; } .hp-submenu {
width: max-content !important;
min-width: 340px !important;
max-width: 480px !important;
} .hp-has-drop > .hp-submenu::before {
content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px;
} .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; } .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;  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; 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;
} .hp-submenu > li {
opacity: 0;
transform: translateY(16px); 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);
} .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; } .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;
} .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 { 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; }  .hp-mi-label {
min-width: 0; white-space: nowrap; font-size: 17px !important; font-weight: 600;
letter-spacing: .01em; line-height: 1.2;
} @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; }
} .hp-filterwrap { margin: 0 0 4px; }
.hp-shopbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; } .hp-catbar {
display: flex; flex-wrap: nowrap; gap: 10px;
margin: 0; padding: 2px 2px 6px; min-width: 0; flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
cursor: grab; scrollbar-width: thin;
scrollbar-color: rgba(255, 122, 217, .55) rgba(255, 255, 255, .07); padding-top: 20px;
} .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);
} .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; } .hp-catbar.is-grabbing a, .hp-subbar.is-grabbing a { pointer-events: none; } .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;
} .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; } .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;
} .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;
} .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);
} .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%; }
} .hp-swapping { opacity: .45; transition: opacity .18s ease; pointer-events: none; } 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; } li.hp-prod.hp-hidden { display: none !important; }
.hp-empty {
margin: 26px 2px; font-size: 15px; color: rgba(242, 238, 230, .7);
}