/* ================= Gulperi Showroom: шрифт названия, заставка, шапка ================= */
@font-face { font-family: "Gulp Font"; src: url(fonts/poiret-one-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Gulp Font"; src: url(fonts/poiret-one-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F; font-display: swap; }

/* Название магазина — тонким шрифтом, как на логотипе */
.brand { font-family: "Gulp Font", "Century Gothic", "Segoe UI", sans-serif; font-weight: 700; letter-spacing: .02em; font-size: 26px; line-height: 1.15; text-transform: lowercase;
  color: var(--accent); white-space: nowrap; }
.brand.mid { font-size: 36px; }
.brand.big { font-size: 48px; }
.drawer-head .brand { font-size: 28px; }
.watermark { font-family: "Gulp Font", sans-serif; font-weight: 700; letter-spacing: .02em; font-size: 20px; text-transform: lowercase; }
[data-theme="gulperi"] .brand { color: #1a1214; }

/* Тема «Gulperi»: белая шапка с красной линией */
[data-theme="gulperi"] .topbar { background: rgba(255, 255, 255, .96); border-bottom: 2px solid #c62832; box-shadow: 0 6px 20px rgba(60, 10, 15, .06); }
[data-theme="gulperi"] .drawer-head { background: #fff; border-bottom: 2px solid #c62832; }
[data-theme="gulperi"] .btn.primary { background: linear-gradient(180deg, #d8343e, #b0222b); color: #fff; }
[data-theme="gulperi"] .login { background: radial-gradient(900px 520px at 50% 0%, rgba(198, 40, 50, .10), transparent 65%), var(--bg); }

/* мелочи тем Grand Lux */
[data-theme="graphite"] .nav-item.active, [data-theme="graphite"] .cat.active { color: var(--text); }
[data-theme="sunset"] .btn.primary, [data-theme="sunset"] .seg button.on { background: linear-gradient(90deg, var(--accent), var(--accent2)); }

/* ================= Заставка при открытии ================= */
#splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(70vmax 70vmax at 50% 45%, #ffffff 0%, #f6eeee 55%, #ead9da 100%); transition: opacity .6s ease, visibility .6s; }
#splash[hidden] { display: none; }
#splash.out { opacity: 0; visibility: hidden; }
#splash.out .sp-logo { transform: scale(1.08); transition: transform .6s ease; }
body.splashing #login { display: none; }
.sp-glow { position: absolute; width: 120vmax; height: 120vmax; left: 50%; top: 45%; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(198, 40, 50, .07) 25%, transparent 30% 70%, rgba(198, 40, 50, .05) 75%, transparent 80%);
  animation: spSpin 9s linear infinite, spFade 1s ease both; pointer-events: none; }
.sp-logo { position: relative; width: min(340px, 72vw); aspect-ratio: 1; border-radius: 50%;
  animation: spIn 1.1s cubic-bezier(.2, .9, .25, 1.15) both; filter: drop-shadow(0 22px 40px rgba(90, 10, 20, .22)); }
.sp-logo img { width: 100%; height: 100%; display: block; user-select: none; }
.sp-shine { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.sp-shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: spShine 1.3s .9s ease-in-out both; }
.sp-line { position: absolute; left: 50%; top: calc(45% + min(170px, 36vw) + 46px); width: 0; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #c62832, transparent); animation: spLine 1.4s 1s ease forwards; }
@keyframes spIn { 0% { opacity: 0; transform: scale(.55) rotate(-25deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes spShine { from { left: -60%; } to { left: 130%; } }
@keyframes spLine { to { width: min(320px, 70vw); } }
@keyframes spSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-logo, .sp-glow, .sp-shine::after, .sp-line { animation-duration: .01s; } }

@media (max-width: 760px) {
  .topbar .brand { font-size: 20px; }
  .brand.big { font-size: 38px; }
}