/* NEBULA — вітрина. Палітра брендбука: cosmic blue #111728 (основа), gainsboro #DBDADE (текст), orchid #E056E0 (акцент). Шрифт LT Superior. */

@font-face { font-family: "LT Superior"; src: url("../fonts/LTSuperior-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LT Superior"; src: url("../fonts/LTSuperior-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "LT Superior"; src: url("../fonts/LTSuperior-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "LT Superior"; src: url("../fonts/LTSuperior-Bold.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

:root {
    /* Брендбук: 60% cosmic blue · 30% gainsboro · 10% orchid */
    --bg: #111728;
    --surface: rgba(24, 31, 54, .68);
    --surface-2: rgba(42, 50, 82, .55);
    --surface-solid: #161d33;
    --line: rgba(219, 218, 222, .09);
    --line-strong: rgba(219, 218, 222, .18);
    --text: #dbdade;
    --muted: #8e909e;
    --p-rgb: 224, 86, 224;
    --primary: #e056e0;
    --primary-hover: #e678e6;
    --primary-active: #8f378f;
    --disabled: #a6a4a9;
    --graphite: #414553;
    --slate: #676a75;
    --cold: #2db5ea;
    --error: #d61a1a;
    --radius: 18px;
    --radius-sm: 12px;
    --wrap: 1240px;
    --font: "LT Superior", system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "LT Superior", system-ui, sans-serif;
    --glow: 0 0 24px rgba(var(--p-rgb), .45);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
    font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased;
}
body.age-locked { overflow: hidden; }

/* Космічний фон: галактика (картинка) + мерехтливі зірки (CSS), закріплені під контентом */
.space { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #06070f url("img/space.webp") center / cover no-repeat; }
.space::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, rgba(var(--p-rgb), .08), transparent 60%), linear-gradient(180deg, rgba(6, 7, 15, .1), rgba(6, 7, 15, .3)); }
@media (max-width: 900px) { .space { background-image: url("img/space-m.webp"); } }
.stars-l { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; }
.stars-l::after { content: ""; position: absolute; left: 0; top: 2000px; width: 1px; height: 1px; border-radius: 50%; box-shadow: inherit; }
.stars-1 { box-shadow: 487px 1213px rgba(219,218,222,.8), 1114px 267px rgba(219,218,222,.8), 757px 1875px rgba(219,218,222,.8), 1236px 970px rgba(219,218,222,.8), 1281px 1189px rgba(219,218,222,.8), 134px 1240px rgba(219,218,222,.8), 26px 1861px rgba(219,218,222,.8), 1715px 960px rgba(219,218,222,.8), 531px 1128px rgba(219,218,222,.8), 479px 392px rgba(219,218,222,.8), 1468px 963px rgba(219,218,222,.8), 1107px 1713px rgba(219,218,222,.8), 1125px 975px rgba(219,218,222,.8), 813px 1308px rgba(219,218,222,.8), 1763px 308px rgba(219,218,222,.8), 474px 1300px rgba(219,218,222,.8), 310px 1777px rgba(219,218,222,.8), 1896px 1071px rgba(219,218,222,.8), 798px 1518px rgba(219,218,222,.8), 31px 1375px rgba(219,218,222,.8), 1591px 131px rgba(219,218,222,.8), 326px 1552px rgba(219,218,222,.8), 1960px 1210px rgba(219,218,222,.8), 87px 616px rgba(219,218,222,.8), 1597px 63px rgba(219,218,222,.8), 1686px 1772px rgba(219,218,222,.8), 551px 968px rgba(219,218,222,.8), 1218px 1472px rgba(219,218,222,.8), 1884px 1799px rgba(219,218,222,.8), 793px 1462px rgba(219,218,222,.8), 1614px 1886px rgba(219,218,222,.8), 874px 808px rgba(219,218,222,.8), 1491px 1640px rgba(219,218,222,.8), 1181px 910px rgba(219,218,222,.8), 1974px 1916px rgba(219,218,222,.8), 274px 1799px rgba(219,218,222,.8), 748px 199px rgba(219,218,222,.8), 73px 278px rgba(219,218,222,.8), 1013px 444px rgba(219,218,222,.8), 528px 1977px rgba(219,218,222,.8), 1376px 893px rgba(219,218,222,.8), 1595px 1283px rgba(219,218,222,.8), 1751px 616px rgba(219,218,222,.8), 862px 1038px rgba(219,218,222,.8), 1706px 790px rgba(219,218,222,.8), 1175px 718px rgba(219,218,222,.8), 1093px 1198px rgba(219,218,222,.8), 834px 1196px rgba(219,218,222,.8), 475px 1851px rgba(219,218,222,.8), 689px 1396px rgba(219,218,222,.8), 1875px 1902px rgba(219,218,222,.8), 58px 1753px rgba(219,218,222,.8), 572px 1240px rgba(219,218,222,.8), 1374px 1424px rgba(219,218,222,.8), 334px 1430px rgba(219,218,222,.8), 1762px 668px rgba(219,218,222,.8), 1975px 1109px rgba(219,218,222,.8), 1852px 1171px rgba(219,218,222,.8), 1165px 213px rgba(219,218,222,.8), 1461px 1342px rgba(219,218,222,.8), 432px 1296px rgba(219,218,222,.8), 1703px 1174px rgba(219,218,222,.8), 546px 583px rgba(219,218,222,.8), 254px 129px rgba(219,218,222,.8), 987px 1748px rgba(219,218,222,.8), 1308px 990px rgba(219,218,222,.8), 181px 704px rgba(219,218,222,.8), 1639px 136px rgba(219,218,222,.8), 840px 1837px rgba(219,218,222,.8), 308px 41px rgba(219,218,222,.8), 601px 874px rgba(219,218,222,.8), 1574px 850px rgba(219,218,222,.8), 1787px 243px rgba(219,218,222,.8), 90px 1239px rgba(219,218,222,.8), 1258px 1559px rgba(219,218,222,.8), 92px 773px rgba(219,218,222,.8), 1471px 1200px rgba(219,218,222,.8), 677px 1128px rgba(219,218,222,.8), 1804px 1888px rgba(219,218,222,.8), 571px 1035px rgba(219,218,222,.8), 483px 73px rgba(219,218,222,.8), 634px 14px rgba(219,218,222,.8), 157px 221px rgba(219,218,222,.8), 1228px 1096px rgba(219,218,222,.8), 64px 1943px rgba(219,218,222,.8), 404px 1989px rgba(219,218,222,.8), 835px 597px rgba(219,218,222,.8), 1250px 539px rgba(219,218,222,.8), 319px 1412px rgba(219,218,222,.8), 86px 1777px rgba(219,218,222,.8), 695px 642px rgba(219,218,222,.8), 737px 1963px rgba(219,218,222,.8), 283px 1836px rgba(219,218,222,.8), 1764px 773px rgba(219,218,222,.8), 771px 942px rgba(219,218,222,.8), 1781px 1065px rgba(219,218,222,.8), 790px 1318px rgba(219,218,222,.8), 1775px 1219px rgba(219,218,222,.8), 1394px 1145px rgba(219,218,222,.8), 210px 1270px rgba(219,218,222,.8), 1992px 1926px rgba(219,218,222,.8), 1661px 1038px rgba(219,218,222,.8), 555px 883px rgba(219,218,222,.8), 1299px 1475px rgba(219,218,222,.8), 1465px 486px rgba(219,218,222,.8), 1917px 616px rgba(219,218,222,.8), 895px 528px rgba(219,218,222,.8), 1067px 620px rgba(219,218,222,.8), 1123px 694px rgba(219,218,222,.8), 23px 1614px rgba(219,218,222,.8), 850px 1187px rgba(219,218,222,.8), 644px 41px rgba(219,218,222,.8), 771px 1261px rgba(219,218,222,.8), 1206px 1294px rgba(219,218,222,.8), 272px 123px rgba(219,218,222,.8), 1297px 1284px rgba(219,218,222,.8), 680px 954px rgba(219,218,222,.8), 722px 1391px rgba(219,218,222,.8), 1878px 722px rgba(219,218,222,.8), 1246px 1447px rgba(219,218,222,.8), 571px 1511px rgba(219,218,222,.8), 1002px 45px rgba(219,218,222,.8), 1207px 124px rgba(219,218,222,.8), 1955px 1384px rgba(219,218,222,.8), 43px 1972px rgba(219,218,222,.8), 756px 514px rgba(219,218,222,.8), 1286px 934px rgba(219,218,222,.8), 611px 1213px rgba(219,218,222,.8), 1231px 655px rgba(219,218,222,.8), 363px 745px rgba(219,218,222,.8), 379px 640px rgba(219,218,222,.8), 1552px 756px rgba(219,218,222,.8), 1728px 1219px rgba(219,218,222,.8), 540px 615px rgba(219,218,222,.8), 1612px 772px rgba(219,218,222,.8), 214px 1581px rgba(219,218,222,.8), 1665px 55px rgba(219,218,222,.8), 1989px 1165px rgba(219,218,222,.8), 1400px 1505px rgba(219,218,222,.8), 269px 634px rgba(219,218,222,.8), 1024px 455px rgba(219,218,222,.8), 1338px 1646px rgba(219,218,222,.8), 551px 488px rgba(219,218,222,.8), 671px 383px rgba(219,218,222,.8), 1388px 891px rgba(219,218,222,.8), 1330px 1429px rgba(219,218,222,.8), 198px 208px rgba(219,218,222,.8), 1230px 659px rgba(219,218,222,.8), 1943px 683px rgba(219,218,222,.8), 1382px 1707px rgba(219,218,222,.8), 459px 897px rgba(219,218,222,.8), 1658px 1752px rgba(219,218,222,.8), 1967px 346px rgba(219,218,222,.8), 163px 689px rgba(219,218,222,.8), 1519px 1331px rgba(219,218,222,.8), 446px 1812px rgba(219,218,222,.8), 1164px 923px rgba(219,218,222,.8), 554px 460px rgba(219,218,222,.8), 1611px 247px rgba(219,218,222,.8), 69px 1084px rgba(219,218,222,.8), 1961px 390px rgba(219,218,222,.8), 645px 1652px rgba(219,218,222,.8), 1712px 1717px rgba(219,218,222,.8), 1177px 375px rgba(219,218,222,.8), 1768px 570px rgba(219,218,222,.8), 696px 1653px rgba(219,218,222,.8), 1695px 1314px rgba(219,218,222,.8), 175px 1651px rgba(219,218,222,.8), 1268px 707px rgba(219,218,222,.8), 1207px 265px rgba(219,218,222,.8), 862px 597px rgba(219,218,222,.8), 1061px 1625px rgba(219,218,222,.8), 1740px 555px rgba(219,218,222,.8), 951px 709px rgba(219,218,222,.8), 1298px 853px rgba(219,218,222,.8), 594px 859px rgba(219,218,222,.8), 1163px 838px rgba(219,218,222,.8), 72px 1885px rgba(219,218,222,.8), 846px 319px rgba(219,218,222,.8), 408px 9px rgba(219,218,222,.8), 977px 1931px rgba(219,218,222,.8), 1705px 1802px rgba(219,218,222,.8), 1275px 1044px rgba(219,218,222,.8), 889px 1144px rgba(219,218,222,.8), 1945px 1899px rgba(219,218,222,.8), 1468px 454px rgba(219,218,222,.8), 66px 1526px rgba(219,218,222,.8), 935px 1713px rgba(219,218,222,.8), 1542px 1357px rgba(219,218,222,.8), 1531px 1062px rgba(219,218,222,.8), 1972px 591px rgba(219,218,222,.8), 1113px 698px rgba(219,218,222,.8), 1822px 465px rgba(219,218,222,.8), 1764px 139px rgba(219,218,222,.8), 1757px 1205px rgba(219,218,222,.8), 1988px 587px rgba(219,218,222,.8), 245px 1659px rgba(219,218,222,.8), 500px 92px rgba(219,218,222,.8), 71px 1850px rgba(219,218,222,.8), 1644px 1420px rgba(219,218,222,.8), 1049px 1892px rgba(219,218,222,.8), 406px 1836px rgba(219,218,222,.8), 1809px 1842px rgba(219,218,222,.8), 880px 1181px rgba(219,218,222,.8), 101px 26px rgba(219,218,222,.8), 985px 1526px rgba(219,218,222,.8), 247px 351px rgba(219,218,222,.8), 1030px 614px rgba(219,218,222,.8), 489px 1357px rgba(219,218,222,.8), 40px 1075px rgba(219,218,222,.8), 1099px 847px rgba(219,218,222,.8), 109px 1923px rgba(219,218,222,.8), 1869px 1253px rgba(219,218,222,.8), 232px 699px rgba(219,218,222,.8), 256px 517px rgba(219,218,222,.8), 1990px 1764px rgba(219,218,222,.8), 1107px 977px rgba(219,218,222,.8), 1662px 1602px rgba(219,218,222,.8), 125px 720px rgba(219,218,222,.8), 452px 404px rgba(219,218,222,.8); animation: twinkle 4s ease-in-out infinite alternate, drift 240s linear infinite; }
.stars-2 { width: 2px; height: 2px; box-shadow: 250px 1094px #dbdade, 1817px 1672px #dbdade, 244px 350px #dbdade, 490px 1621px #dbdade, 560px 1887px #dbdade, 1821px 1650px #dbdade, 263px 1686px #dbdade, 1885px 15px #dbdade, 998px 1287px #dbdade, 1169px 1766px #dbdade, 819px 102px #dbdade, 1549px 555px #dbdade, 508px 550px #dbdade, 1265px 1079px #dbdade, 1064px 866px #dbdade, 104px 968px #dbdade, 661px 1590px #dbdade, 1678px 3px #dbdade, 1755px 112px #dbdade, 1587px 259px #dbdade, 94px 255px #dbdade, 102px 140px #dbdade, 988px 1996px #dbdade, 67px 1749px #dbdade, 1459px 176px #dbdade, 1055px 1028px #dbdade, 1003px 646px #dbdade, 321px 644px #dbdade, 146px 719px #dbdade, 790px 1324px #dbdade, 797px 1201px #dbdade, 622px 738px #dbdade, 542px 391px #dbdade, 673px 877px #dbdade, 253px 261px #dbdade, 1137px 7px #dbdade, 1466px 1480px #dbdade, 778px 1628px #dbdade, 163px 1160px #dbdade, 365px 87px #dbdade, 764px 943px #dbdade, 1237px 1331px #dbdade, 1602px 1108px #dbdade, 778px 1303px #dbdade, 1640px 88px #dbdade, 1275px 1815px #dbdade, 883px 108px #dbdade, 762px 1285px #dbdade, 1016px 1556px #dbdade, 1439px 645px #dbdade, 861px 1946px #dbdade, 1421px 856px #dbdade, 943px 36px #dbdade, 501px 447px #dbdade, 1097px 553px #dbdade, 1423px 1208px #dbdade, 146px 1644px #dbdade, 870px 459px #dbdade, 872px 266px #dbdade, 1801px 57px #dbdade, 1917px 666px #dbdade, 766px 1984px #dbdade, 1838px 1144px #dbdade, 1619px 1782px #dbdade, 536px 248px #dbdade, 950px 1414px #dbdade, 252px 1923px #dbdade, 1665px 1498px #dbdade, 1356px 1740px #dbdade, 1817px 1085px #dbdade; animation: twinkle 6s ease-in-out infinite alternate-reverse, drift 360s linear infinite; }
.stars-3 { width: 2px; height: 2px; box-shadow: 1622px 770px #f0a8f0, 1367px 222px #f0a8f0, 1502px 652px #f0a8f0, 1154px 1089px #f0a8f0, 211px 1662px #f0a8f0, 1203px 1467px #f0a8f0, 10px 969px #f0a8f0, 293px 483px #f0a8f0, 1585px 796px #f0a8f0, 90px 1079px #f0a8f0, 188px 1155px #f0a8f0, 203px 1350px #f0a8f0, 1803px 769px #f0a8f0, 366px 1678px #f0a8f0, 48px 699px #f0a8f0, 1723px 1745px #f0a8f0, 248px 52px #f0a8f0, 1728px 235px #f0a8f0; filter: drop-shadow(0 0 3px #fff); animation: twinkle 3s ease-in-out infinite alternate, drift 480s linear infinite; }
@keyframes twinkle { from { opacity: .2; } to { opacity: .7; } }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-2000px); } }
@media (prefers-reduced-motion: reduce) { .stars-l { animation: none !important; } }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.accent { color: var(--primary); text-shadow: var(--glow); }
.center { display: flex; justify-content: center; margin-top: 36px; }
.i { flex: none; }

/* Скрол */
* { scrollbar-width: thin; scrollbar-color: #2a3150 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2a3150; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-active); }

/* Типографіка */
.h-display { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; line-height: 1.04; margin: 0; }
.h-section { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; text-align: center; margin: 0 0 28px; }
.h-card { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; text-transform: uppercase; letter-spacing: .01em; }
.section-lead { text-align: center; color: var(--muted); max-width: 620px; margin: -12px auto 28px; }

/* Кнопки */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
    font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; transition: background .2s, box-shadow .2s, border-color .2s, transform .2s;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 24px rgba(var(--p-rgb), .35); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 8px 32px rgba(var(--p-rgb), .5); }
.btn-primary:active { background: var(--primary-active); }
.btn-primary:disabled { background: rgba(var(--p-rgb), .22); color: rgba(219, 218, 222, .45); box-shadow: none; cursor: not-allowed; }
.btn-ghost { border-color: var(--line-strong); background: rgba(255, 255, 255, .02); }
.btn-ghost:hover { border-color: var(--primary); color: #fff; }
.btn-block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--text); transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--surface-2); color: var(--primary); }
.round-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; transition: box-shadow .2s, background .2s; }
.round-btn:hover { background: var(--primary-hover); box-shadow: var(--glow); }
.link-accent { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.pill-outline { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(var(--p-rgb), .5); border-radius: 999px; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(var(--p-rgb), .06); }

/* Верхня смуга і хедер */
.topbar { background: #000; color: #80818f; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 7px 16px; }
.header { position: sticky; top: 0; z-index: 40; background: rgba(17, 23, 40, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header-in { display: flex; align-items: center; gap: 20px; height: 72px; max-width: 1480px; }
.logo { flex: none; }
.logo img { height: 26px; width: auto; }
.nav { display: flex; gap: 2px; margin: 0 auto; min-width: 0; overflow: hidden; }
/* Меню не вміщається (багато пунктів) — ховаємо в бургер (клас ставить JS) */
.header.is-compact .nav { visibility: hidden; position: absolute; pointer-events: none; }
.header.is-compact .burger { display: inline-grid; }
.header.is-compact .header-actions { margin-left: auto; }
.nav-link { padding: 8px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #c4c3cb; white-space: nowrap; transition: color .2s, background .2s; }
.nav-link:hover { color: #fff; background: var(--surface-2); }
.nav-link.is-on { color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 2px; }
.lang { display: flex; gap: 2px; margin-right: 6px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.lang a { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lang a.is-on { background: var(--surface-2); color: #fff; }
.burger { display: none; }

.drawer { position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: 16px 24px 32px; display: flex; flex-direction: column; overflow-y: auto; }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.drawer-nav { display: flex; flex-direction: column; margin: 16px 0 24px; }
.drawer-nav a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.drawer-lang { align-self: flex-start; }

@media (max-width: 1280px) {
    .nav { display: none; }
    .burger { display: inline-grid; }
    .header-actions { margin-left: auto; }
}
@media (max-width: 560px) {
    .header-in { height: 60px; gap: 12px; }
    .logo img { height: 22px; }
    .header-actions .lang { display: none; }
    .header-actions .icon-btn { width: 36px; height: 36px; }
}

/* Секції */
.section { padding: 72px 0; }
.section-tight { padding: 24px 0; }
@media (max-width: 700px) { .section { padding: 48px 0; } }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 120px 0 128px; text-align: center; }
.hero-short { padding: 96px 0; }
.hero-glow { position: absolute; left: 50%; top: 40%; width: 760px; height: 460px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--p-rgb), .28), rgba(120, 40, 200, .12) 55%, transparent); filter: blur(30px); animation: nebula 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes nebula { from { transform: translate(-52%, -48%) scale(1); } to { transform: translate(-48%, -52%) scale(1.12); } }
.hero-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero-title { font-size: clamp(34px, 6.4vw, 76px); max-width: 980px; }
.hero-text { max-width: 600px; margin: 0; color: #b4b3bc; font-size: 18px; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } html { scroll-behavior: auto; } }

.hero-slider { position: relative; overflow: hidden; background: #000; aspect-ratio: 1920 / 720; max-height: 720px; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.slide.is-on { opacity: 1; z-index: 1; }
.slide picture, .slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-link { display: block; width: 100%; height: 100%; }
.slide-text { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; pointer-events: none; }
.slide-text > * { pointer-events: auto; }
.slide-text .h-display { font-size: clamp(26px, 4.4vw, 56px); max-width: 720px; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.slide-text p { margin: 0; max-width: 520px; color: #ddd; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.slider-dots { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 8px; }
.slider-dots button { width: 28px; height: 4px; border: 0; padding: 0; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.slider-dots button.is-on { background: var(--primary); }
@media (max-width: 700px) { .hero-slider { aspect-ratio: 4 / 5; max-height: none; } }

/* Лінійки */
.lines { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.line-card { position: relative; overflow: hidden; display: flex; min-height: 280px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .25s, transform .25s; isolation: isolate; }
.line-card:hover { border-color: rgba(var(--p-rgb), .5); transform: translateY(-3px); }
.line-card { --c: var(--p-rgb); --c2: 130, 50, 220; background: radial-gradient(circle at 75% 30%, rgba(var(--c), .32), transparent 60%), radial-gradient(circle at 20% 90%, rgba(var(--c2), .22), transparent 55%), var(--surface); }
.line-card:hover { border-color: rgba(var(--c), .55); }
.c-pink { --c: var(--p-rgb); --c2: 130, 50, 220; --ct: #e056e0; --cl: #f0a8f0; }
.c-blue { --c: 45, 181, 234; --c2: 30, 200, 170; --ct: #2db5ea; --cl: #8fdcff; }
.c-lime { --c: 136, 173, 0; --c2: 45, 181, 234; --ct: #a6d10a; --cl: #d4f06a; }
.c-amber { --c: 255, 168, 64; --c2: 241, 90, 70; --ct: #ffb85c; --cl: #ffd08a; }
.c-violet { --c: 139, 92, 246; --c2: var(--p-rgb); --ct: #a78bfa; --cl: #c4b5fd; }
.line-card-art { position: absolute; z-index: -1; right: 24px; top: 24px; width: 220px; height: 220px; opacity: .5; }
.line-card-art.is-zodiac span { position: absolute; left: 50%; top: 50%; font-size: 24px; color: var(--cl); transform: rotate(calc(var(--i) * 30deg)) translateY(-92px) rotate(calc(var(--i) * -30deg)); margin: -14px 0 0 -10px; }
.line-card-art.is-icon { display: grid; place-items: center; color: var(--cl); }
.line-card-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .6s; }
.line-card.has-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 11, 12, .95) 10%, rgba(11, 11, 12, .2) 70%); }
.line-card:hover .line-card-img { transform: scale(1.04); }
.line-card .link-accent { color: var(--ct); }
.lines.n-1 { grid-template-columns: 1fr; }
.lines.n-3 { grid-template-columns: repeat(3, 1fr); }
.lines.n-3 .line-card { min-height: 360px; padding: 28px; }
.lines.n-3 .line-card-art { width: 150px; height: 150px; right: 20px; top: 20px; }
.lines.n-3 .line-card-art.is-zodiac span { transform: rotate(calc(var(--i) * 30deg)) translateY(-62px) rotate(calc(var(--i) * -30deg)); font-size: 18px; }
@media (max-width: 1100px) { .lines.n-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .lines.n-3 { grid-template-columns: 1fr; } .lines.n-3 .line-card { min-height: 260px; } }
.line-card-art.is-svg { color: var(--cl); opacity: .7; overflow: visible; }
.art-constellations .tw { animation: twinkle 3.2s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px currentColor); }
.art-sun .sun-rays { transform-origin: 120px 112px; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .art-constellations .tw, .art-sun .sun-rays { animation: none; } }
.line-card-body { margin-top: auto; display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.line-card-count { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 800px) { .lines { grid-template-columns: 1fr; } .line-card { min-height: 240px; padding: 24px; } .line-card-art { width: 170px; height: 170px; opacity: .22; } }

/* Вкладки */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.tab { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; transition: all .2s; }
.tab:hover { border-color: var(--primary); }
.tab.is-on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 18px rgba(var(--p-rgb), .35); }

/* Картки товарів */
.grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .grid-cards, .grid-cards.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; }
.pcard:hover { border-color: rgba(var(--p-rgb), .45); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0, 0, 0, .4); }
.pcard-media { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin: 10px 10px 0; border-radius: var(--radius-sm); overflow: hidden; background: radial-gradient(circle at 50% 58%, rgba(var(--c, var(--p-rgb)), .28), transparent 62%); }
.pcard-media img { width: 88%; height: 88%; object-fit: contain; transition: transform .5s; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.pcard-media img.is-swap { opacity: .3; }
.pcard-media img { transition: transform .5s, opacity .2s; }
.pcard-media[data-size="0"] .bottle { scale: .86; }
.pcard-media .bottle { height: 82%; width: auto; transition: transform .5s, scale .35s cubic-bezier(.2, .8, .2, 1.2); transform-origin: 50% 100%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
.pcard:hover .pcard-media .bottle { transform: translateY(-6px) rotate(-3deg); }
.pcard:hover .pcard-media img { transform: scale(1.04); }
.pcard-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(var(--c, var(--p-rgb)), .35), transparent 60%), url("img/stars-pattern.svg") center / 600px 600px, #0c111f; }
.pcard-ph span { font-family: var(--display); font-weight: 700; font-size: 72px; color: rgba(255, 255, 255, .85); text-shadow: 0 0 30px rgba(var(--c, var(--p-rgb)), .8); }
.pbadge { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(11, 11, 12, .75); border: 1px solid currentColor; }
.pbadge-pink { color: var(--primary); }
.pbadge-lime { color: #b5e01a; }
.pbadge-blue { color: var(--cold); }
.pbadge-dark { color: #fff; }
.pcard-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.pcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.line-tag { color: var(--ct, var(--primary)); }
.pcard-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .02em; }
.pcard-name a:hover { color: var(--primary); }
.pcard-notes { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.pcard-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard-chips span { padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; color: #c4c3cb; }
.pcard-vol { display: inline-flex; align-self: flex-start; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(10, 13, 26, .55); border: 1px solid var(--line); }
.pcard-vol button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font-size: 12px; font-weight: 700; color: #b8b7c0; transition: background .15s, color .15s; }
.pcard-vol button:hover { color: #fff; }
.pcard-vol button.is-on { background: var(--ct, var(--primary)); color: #fff; }
.pcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.price small { color: var(--muted); font-size: 13px; }
.price strong { font-size: 20px; font-weight: 700; }
.price strong.is-sale { color: var(--primary); }
.price s { color: var(--muted); font-size: 13px; }
@media (max-width: 560px) {
    .pcard-body { padding: 12px; }
    .pcard-name { font-size: 15px; }
    .pcard-notes { font-size: 13px; }
    .price strong { font-size: 17px; }
    .round-btn { width: 36px; height: 36px; }
}

.mid-banner { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.mid-banner img { width: 100%; height: auto; }

/* Гороскоп */
.signs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-bottom: 28px; }
.sign { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(24, 31, 54, .7); transition: all .2s; }
.sign:hover { border-color: rgba(var(--p-rgb), .5); }
.sign.is-on { border-color: var(--primary); background: rgba(var(--p-rgb), .12); box-shadow: 0 0 22px rgba(var(--p-rgb), .25); }
.sign.is-mine .sign-name::after { content: " ★"; color: var(--primary); }
.sign-sym { font-size: 24px; line-height: 1; font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
.sign-name { font-size: 12px; font-weight: 600; color: #c4c3cb; }
.sign-panel { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.sign-panel[hidden] { display: none; }
.sign-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sign-big { font-size: 64px; line-height: 1; color: var(--primary); text-shadow: var(--glow); font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
.sign-info p { margin: 0; }
.sign-tagline { color: #cfcdd4; }
@media (max-width: 1000px) { .signs { grid-template-columns: repeat(6, 1fr); } .sign-panel { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .signs { grid-template-columns: repeat(4, 1fr); } }

/* Кроки, відгуки, про бренд */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.step-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: rgba(var(--p-rgb), .1); color: var(--primary); box-shadow: inset 0 0 0 1px rgba(var(--p-rgb), .3); }
.step h3 { margin: 0 0 8px; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.step p { margin: 0; font-size: 15px; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 14px; }
.stars { display: flex; gap: 3px; color: #414553; }
.stars .is-full { color: var(--primary); fill: var(--primary); }
.review blockquote { margin: 0; font-style: italic; color: #d0cfd6; }
.review figcaption { margin-top: auto; font-size: 14px; color: var(--muted); }
.review figcaption a { color: var(--text); font-weight: 600; }
.verified { display: inline-block; margin-left: 6px; color: #9fcf3a; font-size: 12px; font-weight: 700; }
.about-card { max-width: 820px; margin: 0 auto; padding: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 50% 0%, rgba(var(--p-rgb), .12), transparent 60%), var(--surface); text-align: center; }
.about-card p { color: #b8b7c0; font-size: 17px; margin: 0 0 24px; }
@media (max-width: 900px) { .steps, .reviews { grid-template-columns: 1fr; } .about-card { padding: 32px 20px; } }

/* Сторінка розділу */
.section-hero { position: relative; overflow: hidden; padding: 56px 0 40px; isolation: isolate; background: radial-gradient(ellipse at 70% 0%, rgba(var(--c), .3), transparent 60%); }
.section-hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.section-hero:has(.section-hero-img)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 6, 26, .9) 0%, transparent 80%); }
.section-hero-in { display: flex; flex-direction: column; gap: 14px; }
.section-hero .h-display { font-size: clamp(30px, 5vw, 60px); }
.section-hero .h-display { text-shadow: 0 0 30px rgba(var(--c), .5); }
.seo-text { max-width: 860px; margin: 0 auto; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 15px; }
.seo-text > :first-child { margin-top: 0; }
.drawer-nav a.is-on { color: var(--primary); }

/* Текстові сторінки */
.page-hero { padding: 56px 0 8px; }
.page-hero .h-display { font-size: clamp(28px, 4.4vw, 48px); }
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.prose { max-width: 780px; color: #c8c7ce; font-size: 17px; padding-bottom: 48px; }
.prose h2, .prose h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--text); line-height: 1.2; margin: 1.6em 0 .6em; }
.prose h2 { font-size: 22px; }
.prose h3 { font-size: 18px; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }

/* Футер */
.footer { margin-top: 40px; border-top: 1px solid var(--line); background: rgba(12, 16, 30, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-grid a { color: #a9a8b2; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.footer-grid a:hover { color: var(--primary); }
.footer-brand img { height: 26px; width: auto; }
.footer-brand p { margin: 6px 0; color: var(--muted); max-width: 300px; }
.footer-title { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.socials { display: flex; gap: 8px; }
.socials a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--line); font-size: 13px; color: #6e7080; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } }

/* Перевірка віку */
.age { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(10, 13, 26, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(10px); overflow-y: auto; }
.age-card { width: 100%; max-width: 440px; padding: 36px 32px 24px; border: 1px solid var(--line-strong); border-radius: 24px; background: radial-gradient(circle at 50% 0%, rgba(var(--p-rgb), .14), transparent 55%), var(--surface); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.age-icon { filter: drop-shadow(0 0 14px rgba(var(--p-rgb), .6)); }
.age-card .h-display { font-size: 26px; }
.age-card > p { margin: 0; font-size: 15px; }
.age-fields { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 10px; width: 100%; margin-top: 6px; text-align: left; }
.age-fields label > span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Кастомний список */
.cs { position: relative; display: block; width: 100%; }
.cs-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.cs-trigger {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 48px; padding: 0 12px; text-align: left;
    border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: #0e1322; color: var(--text);
    font: 600 15px var(--font); transition: border-color .15s, box-shadow .15s;
}
.cs-trigger:hover { border-color: rgba(var(--p-rgb), .5); }
.cs-trigger .cs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trigger .cs-label.is-placeholder { color: var(--muted); font-weight: 500; }
.cs-trigger .cs-chevron { display: grid; color: var(--muted); transition: transform .15s, color .15s; }
.cs-trigger.is-open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--p-rgb), .2); }
.cs-trigger.is-open .cs-chevron { transform: rotate(180deg); color: var(--primary); }
.cs-panel {
    position: fixed; z-index: 1000; max-width: 320px; max-height: 280px; overflow-y: auto; padding: 4px;
    background: #161d33; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--p-rgb), .08); outline: none; animation: cs-in .12s ease-out;
    scrollbar-color: #414553 transparent;
}
@keyframes cs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cs-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #cfcdd4; cursor: pointer; user-select: none; }
.cs-item .cs-text { flex: 1; }
.cs-item .cs-check { display: none; color: var(--primary); }
.cs-item.is-active { background: rgba(var(--p-rgb), .14); color: #fff; }
.cs-item.is-selected { color: var(--primary); font-weight: 700; }
.cs-item.is-selected .cs-check { display: grid; }
.age-sign, .age-error { width: 100%; padding: 12px; border-radius: var(--radius-sm); font-size: 15px; }
.age-sign { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(var(--p-rgb), .1); border: 1px solid rgba(var(--p-rgb), .35); }
.age-sign strong { color: var(--primary); }
.age-sign[hidden], .age-error[hidden] { display: none; }
.age-error { background: rgba(214, 26, 26, .1); border: 1px solid rgba(214, 26, 26, .45); color: #ff6b6b; font-size: 14px; }
.age-note { margin: 4px 0 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #676a75; }
@media (max-width: 420px) { .age-card { padding: 28px 18px 18px; } .age-fields { grid-template-columns: 1fr 1fr; } .age-fields label:nth-child(2) { grid-column: span 2; order: -1; } }

/* Кастомні підказки */
.tip {
    position: fixed; z-index: 2000; max-width: 280px; padding: 6px 10px; border-radius: 8px;
    background: #1b2340; color: #fff; font: 600 12px/1.4 var(--font); pointer-events: none;
    border: 1px solid rgba(var(--p-rgb), .35); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 16px rgba(var(--p-rgb), .15);
    opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s;
}
.tip::after { content: ""; position: absolute; left: var(--arrow, 50%); top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: #1b2340; }
.tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1b2340; }
.tip.is-on { opacity: 1; transform: none; }

/* ---------- Каталог ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.catalog.is-loading .cat-main { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* Плитки смаків */
.tiles { display: flex; justify-content: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; cursor: pointer; list-style: none; user-select: none; }
.tile::-webkit-details-marker { display: none; }
.tile-ico { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #cfcdd4; transition: all .2s; }
.tile-ico b { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; box-shadow: 0 0 0 3px var(--bg); }
.tile-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c4c3cb; text-align: center; line-height: 1.25; }
.tile:hover .tile-ico { border-color: rgba(var(--p-rgb), .6); color: #fff; transform: translateY(-2px); }
.tile.is-on .tile-ico, .tile-drop[open] .tile-ico { border-color: var(--primary); color: var(--primary); background: rgba(var(--p-rgb), .14); box-shadow: 0 0 22px rgba(var(--p-rgb), .3); }
.tile.is-on .tile-label, .tile-drop[open] .tile-label { color: #fff; }

/* Панель фільтрів */
.cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.cat-search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 320px; height: 42px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--muted); }
.cat-search:focus-within { border-color: var(--primary); color: var(--primary); }
.cat-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: 500 14px var(--font); outline: none; }
.fdrop { position: relative; }
.fbtn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #cfcdd4; cursor: pointer; list-style: none; user-select: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.fbtn::-webkit-details-marker { display: none; }
.fbtn b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; letter-spacing: 0; }
.fbtn .i { transition: transform .2s; color: var(--muted); }
.fbtn:hover { border-color: rgba(var(--p-rgb), .6); color: #fff; }
.fbtn.is-on { border-color: rgba(var(--p-rgb), .7); color: #fff; }
.fdrop[open] > .fbtn { border-color: var(--primary); color: #fff; }
.fdrop[open] > .fbtn .i { transform: rotate(180deg); color: var(--primary); }
.fdrop-panel {
    position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 240px; max-width: 320px; max-height: 360px; overflow-y: auto; padding: 8px;
    background: #141a2e; border: 1px solid var(--line-strong); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55); animation: cs-in .14s ease-out;
}
.tile-drop .fdrop-panel { left: 50%; transform: translateX(-50%); top: calc(100% + 10px); }
.fdrop-title { padding: 6px 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fcheck { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; border-radius: 9px; font-size: 14px; color: #d0cfd6; cursor: pointer; }
.fcheck:hover { background: var(--surface-2); color: #fff; }
.fcheck input { position: absolute; opacity: 0; pointer-events: none; }
.fbox { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong); transition: all .15s; }
.fcheck input:checked + .fbox { border-color: var(--ct, var(--primary)); background: var(--ct, var(--primary)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fcheck.is-radio .fbox { border-radius: 50%; }
.fcheck.is-radio input:checked + .fbox { background: none; border: 5px solid var(--primary); }
.fcheck input:focus-visible + .fbox { outline: 2px solid var(--primary); outline-offset: 2px; }
.fcount { margin-left: auto; font-size: 12px; color: var(--muted); }
.fcheck.is-empty { opacity: .4; }
.fprice { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; }
.fprice span { color: var(--muted); }
.fprice input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(10, 13, 26, .6); color: var(--text); font: 500 14px var(--font); -moz-appearance: textfield; }
.fprice input::-webkit-outer-spin-button, .fprice input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fprice input:focus { border-color: var(--primary); outline: none; }
.cat-sort { margin-left: auto; width: 230px; }
.cat-sort .cs-trigger { height: 42px; border-radius: 999px; padding: 0 16px; background: var(--surface); font-size: 14px; }

.cat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 18px; }
.cat-found { margin-right: 6px; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border-radius: 999px; background: rgba(var(--p-rgb), .14); border: 1px solid rgba(var(--p-rgb), .5); font-size: 13px; color: #fff; }
.cat-chip:hover { background: rgba(var(--p-rgb), .28); }
.cat-chip-reset { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cat-chip-reset:hover { color: var(--primary); }
.cat-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 64px 16px; text-align: center; color: var(--primary); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.cat-empty p { margin: 0; }
.cat-empty .h-card { color: var(--text); }
[data-load-more].is-busy { opacity: .6; pointer-events: none; }

@media (max-width: 800px) {
    /* Плитки — горизонтальна стрічка з прокруткою */
    .tiles { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -24px 18px; padding: 4px 24px 6px; scrollbar-width: none; }
    .tiles::-webkit-scrollbar { display: none; }
    .tile { width: 78px; flex: none; }
    .tile-ico { width: 58px; height: 58px; }
    .tile-label { font-size: 11px; }
    .cat-search { max-width: none; flex-basis: 100%; }
    .cat-sort { width: auto; flex: 1 1 100%; margin-left: 0; }
    /* Випадні вікна — знизу екрана */
    .fdrop[open] > .fdrop-panel, .tile-drop[open] > .fdrop-panel {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none; max-width: none; max-height: 70vh; padding: 12px 12px 24px;
        border-radius: 20px 20px 0 0; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); animation: sheet-in .2s ease-out;
    }
    @keyframes sheet-in { from { transform: translateY(30px); opacity: 0; } }
}

/* ---------- Сторінка товару ---------- */
.pdp-wrap { position: relative; padding: 28px 0 24px; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 4px; }

/* Сцена з фото без фону */
.pdp-stage { position: sticky; top: 84px; display: flex; flex-direction: column; align-items: center; min-height: 560px; padding: 24px 0 8px; }
.pdp-halo { position: absolute; inset: 0 0 60px; display: grid; place-items: center; pointer-events: none; }
.pdp-halo span { width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--c, var(--p-rgb)), .42) 0%, rgba(var(--c, var(--p-rgb)), .14) 38%, transparent 68%); filter: blur(6px); animation: halo 7s ease-in-out infinite alternate; }
.pdp-halo i { position: absolute; width: 86%; aspect-ratio: 2.6; border-radius: 50%; border: 1px solid rgba(var(--c, var(--p-rgb)), .35); transform: rotate(-14deg); box-shadow: 0 0 30px rgba(var(--c, var(--p-rgb)), .15); }
.pdp-halo i::after { content: ""; position: absolute; top: 12%; left: 18%; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px rgba(var(--c, var(--p-rgb)), .9); animation: orbit 14s linear infinite; offset-path: ellipse(50% 50% at 50% 50%); }
@keyframes halo { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.04); opacity: 1; } }
@keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.pdp-main { position: relative; z-index: 1; width: min(100%, 520px); aspect-ratio: 1; animation: float 6s ease-in-out infinite; }
.pdp-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.pdp-main img.is-on { opacity: 1; }
.pdp-main.is-ph { display: grid; place-items: center; }
.pdp-main .bottle { position: absolute; left: 0; top: 4%; width: 100%; height: 92%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); transition: transform .45s cubic-bezier(.2, .8, .2, 1.2); transform-origin: 50% 100%; }
.pdp-main[data-size="0"] .bottle { transform: scale(.8); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.pdp-shadow { z-index: 0; width: 46%; height: 26px; margin-top: -18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); animation: shadow 6s ease-in-out infinite; }
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.85); opacity: .6; } }
.pdp-thumbs { position: relative; z-index: 2; display: flex; gap: 10px; margin-top: 18px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pdp-thumbs button { width: 52px; height: 52px; padding: 4px; border-radius: 50%; border: 1.5px solid transparent; background: transparent; opacity: .55; transition: all .15s; }
.pdp-thumbs button.is-on, .pdp-thumbs button:hover { border-color: var(--ct, var(--primary)); opacity: 1; }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* Інформація */
.pdp-info { display: flex; flex-direction: column; gap: 22px; padding-top: 12px; }
.pdp-head { display: flex; flex-direction: column; gap: 10px; }
.pdp-title { font-size: clamp(40px, 5.4vw, 72px); line-height: .98; }
.pdp-notes { margin: 0; font-size: 19px; color: #c8c7ce; }
.pdp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.pdp-rating, .pdp-sign-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; }
.pdp-rating .i { color: var(--primary); fill: var(--primary); }
.pdp-sign-pill span { color: var(--ct, var(--primary)); font-size: 16px; font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
.pdp-rating:hover, .pdp-sign-pill:hover { border-color: var(--primary); }

.opt-group { display: flex; flex-direction: column; gap: 10px; }
.opt-name { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* Сегментований перемикач */
.seg { display: inline-flex; align-self: flex-start; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(10, 13, 26, .55); border: 1px solid var(--line); }
.seg-item { min-width: 84px; height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #b8b7c0; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s, box-shadow .2s; }
.seg-item:hover { color: #fff; }
.seg-item.is-on { background: var(--ct, var(--primary)); color: #fff; box-shadow: 0 6px 20px rgba(var(--c, var(--p-rgb)), .4); }
.seg-item.is-na:not(.is-on) { opacity: .4; }
/* Картки варіантів (комплектація) з ціною */
.opt-cards { display: flex; flex-direction: column; gap: 8px; }
.opt-card { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); text-align: left; transition: border-color .15s, background .15s; }
.opt-card:hover { border-color: rgba(var(--c, var(--p-rgb)), .6); }
.opt-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: all .15s; }
.opt-label { flex: 1; font-size: 15px; font-weight: 600; color: #d6d5dc; }
.opt-price { font-size: 15px; font-weight: 700; color: var(--muted); }
.opt-card.is-on { border-color: var(--ct, var(--primary)); background: rgba(var(--c, var(--p-rgb)), .12); }
.opt-card.is-on .opt-radio { border: 6px solid var(--ct, var(--primary)); }
.opt-card.is-on .opt-label, .opt-card.is-on .opt-price { color: #fff; }
.opt-card.is-na:not(.is-on) { opacity: .45; }

.pdp-buy { display: flex; flex-direction: column; gap: 22px; }
.pdp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.pdp-price strong { font-size: 36px; font-weight: 700; letter-spacing: -.02em; }
.pdp-price s { color: var(--muted); font-size: 17px; }
.pdp-discount { padding: 3px 10px; border-radius: 999px; background: rgba(var(--p-rgb), .18); color: var(--primary); font-size: 13px; font-weight: 700; }
.pdp-unavailable { margin: -10px 0 0; color: #ff8a8a; font-size: 14px; }
.pdp-actions { display: flex; gap: 10px; flex: 1; justify-content: flex-end; min-width: 280px; }
.qty { display: flex; align-items: center; height: 52px; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: rgba(10, 13, 26, .5); }
.qty button { width: 42px; height: 100%; border: 0; background: transparent; font-size: 20px; color: var(--text); }
.qty button:hover { color: var(--primary); }
.qty input { width: 34px; height: 100%; border: 0; background: transparent; color: var(--text); text-align: center; font: 700 16px var(--font); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-add { flex: 1; max-width: 260px; height: 52px; }
.pdp-add.is-done { background: #2fae47; box-shadow: 0 6px 24px rgba(64, 204, 87, .35); }
.pdp-perks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -6px 0 0; padding: 0 4px; list-style: none; font-size: 14px; color: #b8b7c0; }
.pdp-perks li { display: inline-flex; align-items: center; gap: 8px; }
.pdp-perks .i { color: var(--ct, var(--primary)); }

/* Акордеон */
.pdp-acc { border-top: 1px solid var(--line); }
.pdp-acc details { border-bottom: 1px solid var(--line); }
.pdp-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 4px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc summary .i { color: var(--muted); transition: transform .2s; }
.pdp-acc details[open] summary .i { transform: rotate(180deg); color: var(--primary); }
.pdp-acc summary:hover { color: var(--primary); }
.pdp-desc { padding: 0 4px 20px; font-size: 16px; color: #c8c7ce; }
.pdp-desc p { margin: 0 0 10px; }
.pdp-tags { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; padding: 0 4px 20px; }
.pdp-tags dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 6px; }
.pdp-tags dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pdp-tag { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; color: #d0cfd6; }
.pdp-tag:hover { border-color: var(--primary); color: #fff; }

/* Липка панель (телефон) */
.pdp-sticky { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 12px; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px; background: rgba(17, 23, 40, .92); border: 1px solid var(--line-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.pdp-sticky > div { display: flex; flex-direction: column; min-width: 0; }
.pdp-sticky-name { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky strong { font-size: 20px; }
.pdp-sticky .btn { height: 46px; padding: 0 18px; font-size: 13px; }

/* Про смак — сітка карток */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.bento-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bento-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ct, var(--primary)); }
.bento-desc { grid-column: span 7; }
.bento-text { font-size: 18px; line-height: 1.65; color: #d0cfd6; }
.bento-sign { grid-column: span 5; align-items: flex-start; isolation: isolate; transition: border-color .2s, transform .2s; }
.bento-sign::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--c, var(--p-rgb)), .35), transparent 65%); }
.bento-sign:hover { border-color: rgba(var(--c, var(--p-rgb)), .6); transform: translateY(-2px); }
.bento-sign-sym { position: absolute; z-index: -1; right: 28px; top: 18px; font-size: 120px; line-height: 1; color: var(--ct, var(--primary)); opacity: .9; text-shadow: 0 0 40px rgba(var(--c, var(--p-rgb)), .7); font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
.bento-sign-name { margin-top: auto; padding-top: 48px; font-size: 34px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.bento-sign-tag { color: #d0cfd6; }
.bento-notes { grid-column: 1 / -1; }
.bento-desc:only-child, .bento-sign:only-child { grid-column: 1 / -1; }
/* знак без опису — широка картка */
.bento-sign:only-child { min-height: 220px; }
.bento-sign:only-child .bento-sign-sym { right: 48px; top: 50%; transform: translateY(-50%); font-size: 150px; }
.bento-sign:only-child::before { right: -20px; top: 50%; transform: translateY(-50%); width: 320px; height: 320px; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.note { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; padding: 16px 18px; border-radius: 18px; background: rgba(10, 13, 26, .5); border: 1px solid var(--line); }
.note-ico { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--c, var(--p-rgb)), .14); color: var(--ct, var(--primary)); }
.note-group { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.note-tags { font-size: 17px; font-weight: 600; line-height: 1.4; color: #fff; }
.note-tags a:not(:last-child)::after { content: ","; color: var(--muted); }
.note-tags a:hover { color: var(--ct, var(--primary)); }

/* Опис і знак зодіаку в колонці товару */
.pdp-text { font-size: 16px; line-height: 1.65; color: #c8c7ce; margin-top: -6px; }
.pdp-zodiac { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 14px; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--surface); transition: border-color .2s, transform .2s; }
.pdp-zodiac::before { content: ""; position: absolute; z-index: -1; left: -40px; top: 50%; width: 180px; height: 180px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(var(--c, var(--p-rgb)), .35), transparent 65%); }
.pdp-zodiac:hover { border-color: rgba(var(--c, var(--p-rgb)), .7); transform: translateY(-1px); }
.pdp-zodiac-sym { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(var(--c, var(--p-rgb)), .14); color: var(--ct, var(--primary)); font-size: 36px; text-shadow: 0 0 18px rgba(var(--c, var(--p-rgb)), .8); font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
.pdp-zodiac-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pdp-zodiac-kicker { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ct, var(--primary)); }
.pdp-zodiac strong { font-size: 22px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
.pdp-zodiac > .i { flex: none; color: var(--ct, var(--primary)); }

/* Компактний профіль у колонці товару */
.notes-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.note-mini { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.note-mini .note-ico { flex: none; width: 38px; height: 38px; }
.note-mini > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.note-mini .note-group { font-size: 10px; }
.note-mini .note-tags { font-size: 15px; line-height: 1.35; }
.note-tags { display: flex; flex-wrap: wrap; column-gap: .3em; }
.note-tags a { white-space: nowrap; } /* перенос — лише між смаками, не всередині */

/* Відгуки */
.rv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.rv-head .h-section { margin: 0; text-align: left; }
.rv-score { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); }
.rv-score strong { font-size: 20px; }
.rv-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; border-radius: 24px; border: 1px dashed var(--line-strong); background: rgba(10, 13, 26, .35); text-align: center; }
.rv-empty p { margin: 0; max-width: 460px; }
.rv-empty-stars { display: flex; gap: 6px; margin-bottom: 6px; color: var(--primary); opacity: .55; }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rv-card { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rv-top { display: flex; align-items: center; gap: 12px; }
.rv-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-active)); color: #fff; font-weight: 700; }
.rv-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rv-card blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: #d6d5dc; }
.rv-card .verified { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.rv-reply { padding: 12px 14px; border-left: 2px solid var(--primary); background: rgba(var(--p-rgb), .06); border-radius: 0 12px 12px 0; font-size: 14px; color: #c8c7ce; }
.rv-reply strong { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.rv-note { margin: 18px 0 0; }
@media (max-width: 1000px) { .rv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) {
    .bento-desc, .bento-sign, .bento .bento-notes, .bento:not(:has(.bento-desc)) .bento-sign, .bento:not(:has(.bento-desc)) .bento-notes { grid-column: 1 / -1; }
    .bento-card { padding: 22px; }
    .bento-text { font-size: 16px; }
    .rv-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { .pdp-main, .pdp-shadow, .pdp-halo span, .pdp-halo i::after { animation: none; } }
@media (max-width: 960px) {
    .pdp { grid-template-columns: 1fr; gap: 8px; }
    .pdp-stage { position: relative; top: 0; min-height: 0; padding-top: 0; }
    .pdp-main { width: min(100%, 380px); }
    .pdp-sticky:not([hidden]) { display: flex; }
}
@media (max-width: 560px) {
    .pdp-bar { padding: 14px; }
    .pdp-actions { min-width: 0; width: 100%; flex-basis: 100%; }
    .qty { flex: none; }
    .pdp-add { max-width: none; padding: 0 14px; font-size: 13px; letter-spacing: .03em; white-space: nowrap; }
    .pdp-price strong { font-size: 30px; }
    .seg { align-self: stretch; }
    .seg-item { flex: 1; }
}


/* ---------- Гороскоп смаків: колесо ---------- */
.zw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.zw-wheel { --size: min(540px, 100%); position: relative; width: var(--size); aspect-ratio: 1; margin: 0 auto; }
.zw-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(219, 218, 222, .12); }
.zw-ring::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px dashed rgba(219, 218, 222, .08); }
.zw-ring-2 { inset: 19%; border-color: rgba(var(--p-rgb), .22); box-shadow: 0 0 60px rgba(var(--p-rgb), .12) inset; }
.zw-rotor { position: absolute; inset: 0; transform: rotate(calc(var(--active) * -30deg)); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.zw-sign {
    position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border-radius: 50%;
    border: 1px solid var(--line-strong); background: rgba(17, 23, 40, .8); color: #b8b7c0; font-size: 22px;
    /* позиція на колі (тригонометрія CSS) */
    left: calc(50% + 46% * sin(calc(var(--i) * 30deg))); top: calc(50% - 46% * cos(calc(var(--i) * 30deg)));
    transition: border-color .2s, color .2s, background .2s, box-shadow .2s, width .3s, height .3s;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* символ завжди вертикально, попри обертання колеса */
.zw-sign span { display: block; font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; transform: rotate(calc(var(--active) * 30deg)); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.zw-sign:hover { color: #fff; border-color: rgba(var(--p-rgb), .6); }
.zw-sign.is-on { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--primary); border-color: var(--primary); color: #fff; font-size: 26px; box-shadow: 0 0 30px rgba(var(--p-rgb), .7); }
.zw-sign.is-mine:not(.is-on)::after { content: ""; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.zw-core { pointer-events: none; position: absolute; inset: 24%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(var(--p-rgb), .3), rgba(var(--p-rgb), .06) 55%, transparent 72%); }
.zw-product { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: zw-in .5s ease-out; }
.zw-product img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .6)); }
.zw-product .bottle { height: 86%; width: auto; max-width: 70%; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .6)); }
.zw-big { font-size: 110px; color: var(--primary); text-shadow: var(--glow); font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
@keyframes zw-in { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }

.zw-info { min-width: 0; }
.zw-panel { display: flex; flex-direction: column; gap: 22px; animation: zw-in .45s ease-out; }
.zw-sign-info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.zw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zw-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(10, 13, 26, .5); font-size: 13px; color: #c8c7ce; }
.zw-chip.is-accent { border-color: rgba(var(--p-rgb), .6); color: var(--primary); background: rgba(var(--p-rgb), .1); font-weight: 700; }
.zw-chip.el-fire { color: #ff9a5c; border-color: rgba(255, 154, 92, .4); }
.zw-chip.el-earth { color: #b5d65a; border-color: rgba(181, 214, 90, .4); }
.zw-chip.el-air { color: #7fd3f5; border-color: rgba(127, 211, 245, .4); }
.zw-chip.el-water { color: #b3a4ff; border-color: rgba(179, 164, 255, .4); }
.zw-name { display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(40px, 5vw, 64px); font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: -.01em; }
.zw-name-sym { color: var(--primary); font-size: .8em; text-shadow: var(--glow); font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif; }
.zw-tagline { margin: 0; font-size: 18px; color: #c8c7ce; max-width: 520px; }

.zw-flavor { border-radius: 24px; border: 1px solid var(--line-strong); background: var(--surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; }
.zw-flavor-top { display: flex; align-items: center; gap: 18px; padding: 20px 22px 20px 24px; transition: background .2s; }
.zw-flavor-top:hover { background: rgba(var(--c, var(--p-rgb)), .06); }
.zw-flavor-top > .i { flex: none; color: var(--muted); transition: transform .2s, color .2s; }
.zw-flavor-top:hover > .i { color: var(--ct, var(--primary)); transform: translateX(3px); }
.zw-thumb.pcard-media { flex: none; width: 84px; height: 84px; margin: 0; aspect-ratio: auto; border-radius: 20px; background: radial-gradient(circle at 50% 60%, rgba(var(--c, var(--p-rgb)), .35), rgba(10, 13, 26, .6) 70%); }
.zw-thumb img { width: 90%; height: 90%; object-fit: contain; }
.zw-thumb .bottle { height: 86%; }
.zw-flavor-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.zw-flavor-kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ct, var(--primary)); }
.zw-flavor-name { font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.zw-buy { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 20px; border-top: 1px solid var(--line); background: rgba(10, 13, 26, .35); }
.zw-buy .price { margin-left: auto; }
.zw-buy .price strong { font-size: 24px; }
.zw-cart { height: 46px; padding: 0 20px; }
.zw-also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zw-also-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.zw-also-item:hover { border-color: var(--primary); color: #fff; }
@media (prefers-reduced-motion: reduce) { .zw-rotor, .zw-sign span { transition: none; } .zw-product, .zw-panel { animation: none; } }
@media (max-width: 900px) {
    .zw { grid-template-columns: 1fr; gap: 28px; }
    .zw-wheel { --size: min(380px, 100%); }
    .zw-sign { width: 42px; height: 42px; margin: -21px 0 0 -21px; font-size: 18px; }
    .zw-sign.is-on { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 22px; }
    .zw-buy { flex-wrap: wrap; padding: 14px; }
    .zw-cart { flex-basis: 100%; }
    .zw-flavor-name { font-size: 20px; }
}