@font-face { font-family: "e-Ukraine"; src: url("../fonts/e-Ukraine-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "e-Ukraine"; src: url("../fonts/e-Ukraine-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "e-Ukraine"; src: url("../fonts/e-Ukraine-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "e-Ukraine"; src: url("../fonts/e-Ukraine-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #f6f6fb;
  --bg-soft: #ffffff;
  --ink: #15131f;
  --ink-muted: #6b6880;
  --line: #e7e6f0;
  --brand-1: #FE2C55;
  --brand-2: #FF0050;
  --brand-ink: #d91e44;
  --warn: #b45309;
  --warn-bg: #fff7ed;
  --empty-bg: #fff0f3;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow-sm: 0 2px 8px rgba(21, 19, 31, .06);
  --shadow: 0 18px 50px rgba(58, 42, 140, .14);
  --shadow-lg: 0 30px 80px rgba(58, 42, 140, .20);
  --maxw: 1080px;
  --font: "e-Ukraine", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  overflow-wrap: break-word; /* довгі слова/URL з даних магазину не розтягують сторінку */
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation; /* без зуму по даблтапу; pinch-zoom лишається */
}

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0; }

/* ---------- Decorative background ---------- */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(109, 94, 252, .10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(228, 81, 211, .08), transparent 55%);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
}
.blob-1 { width: 420px; height: 420px; left: -120px; top: -80px; background: #ff5c7a; }
.blob-2 { width: 360px; height: 360px; right: -100px; top: 40px; background: #ff8ab0; }
.blob-3 { width: 320px; height: 320px; left: 30%; bottom: -160px; background: #7ee0ff; opacity: .35; }

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 20px 64px;
}

/* ---------- Home hero ---------- */
/* align-items: stretch (default) — CMS-блок під героєм не роздуває сторінку по ширині */
.page-home .page { display: flex; flex-direction: column; justify-content: center; }
/* Авто-марджини вбивають stretch, тому ширину задаємо явно: інакше flex-елемент
   розтягується до min-content (довге слово з CMS) і дає горизонтальний скрол. */
.page-home .page > *, .page-error .page > * { width: 100%; min-width: 0; }
.hero { width: 100%; }
.hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(24px, 6vh, 80px) 0;
}
.wordmark {
  font-size: clamp(4.5rem, 16vw, 10rem);
  font-weight: 800;
  letter-spacing: -.04em;
  margin: 0;
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: .95;
}
.hero-subtitle {
  margin: 14px auto 36px;
  max-width: 440px;
  color: var(--ink-muted);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
}

/* ---------- Search ---------- */
.search { width: 100%; }
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 8px 8px 26px;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.search-field:focus-within {
  border-color: transparent;
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(109, 94, 252, .35);
  transform: translateY(-1px);
}
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font);
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  font-weight: 600;
  color: var(--ink);
  padding: 14px 0;
  letter-spacing: .01em;
}
.search-input::placeholder { color: #b6b3c6; font-weight: 500; }

.search-clear {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--empty-bg);
  color: var(--ink-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.search-clear:hover { background: #ffe4ea; color: var(--ink); }

.search-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 0 30px;
  height: 58px;
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 10px 24px rgba(254, 44, 85, .35);
  transition: filter .15s ease, transform .1s ease, opacity .15s ease;
}
.search-submit:hover:not(:disabled) { filter: brightness(1.06); }
.search-submit:active:not(:disabled) { transform: translateY(1px); }
.search-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.search-hint {
  margin: 14px 4px 0;
  font-size: .85rem;
  color: var(--ink-muted);
}

/* htmx indicator + spinner */
.htmx-indicator { opacity: 0; transition: opacity .2s ease; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }
.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---------- Search result ---------- */
.search-result { margin-top: 26px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .15s ease, transform .1s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 10px 24px rgba(254, 44, 85, .30);
}
.btn-primary:hover { filter: brightness(1.06); }
.hero-cta {
  width: 100%;
  margin-top: 14px;
  min-height: 54px;
  font-size: 1.08rem;
  font-weight: 800;
}

/* ---------- Search messages ---------- */
.search-message {
  text-align: left;
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: rise .25s ease;
}
.search-message strong { font-size: 1.05rem; }
.search-message span { color: var(--ink-muted); }
.search-message-empty { background: var(--empty-bg); border: 1px solid var(--line); }
.search-message-warn { background: var(--warn-bg); border: 1px solid #fed7aa; }
.search-message-warn strong { color: var(--warn); }

/* Знайдені магазини (код / домен / назва). */
.shop-results { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.shop-result { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; color: var(--ink); }
.shop-result:hover { text-decoration: none; border-color: var(--ink-muted); }
.shop-result span { font-size: .85rem; color: var(--ink-muted); }

/* ---------- Внутрішні сторінки ---------- */
.back-link { display: inline-block; margin-bottom: 22px; font-weight: 600; color: var(--ink-muted); }
.back-link:hover { color: var(--ink); text-decoration: none; }
.legal, .error-page { max-width: 760px; margin: 0 auto; }

/* ---------- Legal / contacts ---------- */
.legal-title { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; margin-bottom: 8px; }
.legal-lead { color: var(--ink-muted); font-size: 1.1rem; margin: 0 0 24px; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 30px; }
.legal-toc a {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: .92rem;
}
.legal-toc a:hover { text-decoration: none; border-color: var(--brand-1); }
.legal-section {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 20px;
}
.legal-section h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.legal-section p { color: #3c3a4c; margin: 0 0 12px; }
.legal-section ul { margin: 0; padding-left: 20px; color: var(--ink-muted); }
.legal-section li { margin-bottom: 8px; }
.legal-note { color: var(--ink-muted); font-size: .9rem; margin-top: 24px; }

/* CMS-контент (markdown із CRM): нічого не виходить за екран */
.legal-section img, .legal-section video, .legal-section iframe { max-width: 100%; height: auto; }
.legal-section pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.legal-section table { display: block; width: 100%; overflow-x: auto; }

.contact-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 8px 0 8px; }
.contact-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.contact-card h2 { font-size: 1rem; color: var(--ink-muted); font-weight: 600; margin-bottom: 8px; }
.contact-link { font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Error page ---------- */
.page-error .page { display: flex; align-items: center; justify-content: center; }
.error-inner { text-align: center; padding: 40px 0; }
.error-code {
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 800;
  margin: 0;
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-title { font-size: 1.6rem; font-weight: 700; margin: 4px 0 10px; }
.error-message { color: var(--ink-muted); margin: 0 0 26px; }

/* ---------- Footer ---------- */
.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  background: #15131f;
  color: #cfcce0;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px 20px 28px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.footer-logo {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  background: linear-gradient(120deg, #9b8dff, #f48ce6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.footer-logo:hover { text-decoration: none; }
.footer-tagline { margin: 10px 0 0; color: #8e8aa6; font-size: .92rem; max-width: 240px; }
.footer-col h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: #8e8aa6; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: #cfcce0; font-size: .95rem; display: inline-block; padding: 8px 0; } /* зона дотику ~40+ px із gap */
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 18px 20px;
  text-align: center;
  font-size: .85rem;
  color: #7c789a;
}
/* Desktop-only footer enrichments (hidden on mobile → mobile layout unchanged) */
.footer-about { display: none; margin: 12px 0 0; color: #8e8aa6; font-size: .88rem; line-height: 1.6; max-width: 320px; }
.footer-more { display: none; }
.footer-interlinks { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .search-field { flex-wrap: wrap; border-radius: var(--radius); padding: 14px; gap: 12px; }
  .search-input { flex-basis: 100%; padding: 6px 4px; }
  .search-submit { flex: 1 1 auto; justify-content: center; }
  .search-clear { position: absolute; top: 14px; right: 14px; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (min-width: 721px) {
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding: 56px 20px 32px; }
  .footer-col h3::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin-top: 8px;
    border-radius: 2px;
    background: linear-gradient(90deg, #9b8dff, #f48ce6);
  }
  .footer-about { display: block; }
  .footer-more { display: block; }
  .footer-bottom { text-align: left; padding: 0; }
  .footer-bottom-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
  }
  .footer-interlinks { display: flex; flex-wrap: wrap; align-items: center; }
  .footer-interlinks a { color: #8e8aa6; font-size: .82rem; }
  .footer-interlinks a:hover { color: #fff; }
  .footer-interlinks a:not(:last-child)::after { content: "\00b7"; margin: 0 10px; color: #3a3550; }
  .footer-copy { color: #7c789a; font-size: .85rem; }
}

/* ---------- Storefront beacon page (themed by store palette) ---------- */
.page-beacon {
  /* Значення --store-* задаються inline у beacon.html з палітри магазину;
     fallback — стара темна тема. */
  --bp-bg: var(--store-bg-page, #050509);
  --bp-surface: var(--store-surface, rgba(255, 255, 255, .06));
  --bp-text: var(--store-text, #fff);
  --bp-muted: var(--store-text-muted, rgba(255, 255, 255, .6));
  --bp-border: var(--store-border, rgba(255, 255, 255, .10));
  --bp-hover: var(--store-nav-hover, rgba(255, 255, 255, .08));
  --bp-accent: var(--store-accent, #FE2C55);
  --bp-accent-contrast: var(--store-accent-contrast, #fff);
  background: var(--bp-bg);
  color: var(--bp-text);
}
.page-beacon .bg-decor {
  background:
    radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--bp-accent) 20%, transparent), transparent 60%),
    radial-gradient(700px 480px at 100% 10%, color-mix(in srgb, var(--bp-accent) 9%, transparent), transparent 55%);
}
.page-beacon .page { padding: 32px 18px 56px; }
.beacon {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.beacon-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.beacon-title { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.beacon-title .beacon-name { min-width: 0; }
.beacon-logo {
  flex: 0 0 auto; width: 52px; height: 52px;
  border-radius: 14px; object-fit: cover;
  border: 1px solid var(--bp-border); background: var(--bp-surface);
}
.beacon-share {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  color: var(--bp-muted); background: var(--bp-hover); border: 1px solid var(--bp-border);
  transition: color .15s ease, border-color .15s ease;
}
.beacon-share:hover { color: var(--bp-text); border-color: color-mix(in srgb, var(--bp-accent) 45%, var(--bp-border)); }
.beacon-share:active { transform: translateY(1px); }
.beacon-share svg { width: 17px; height: 17px; }
/* Порція 6: «скопійовано» — акцент магазину, зеленого не вживаємо. */
.beacon-share.is-copied { color: var(--bp-accent); border-color: color-mix(in srgb, var(--bp-accent) 55%, var(--bp-border)); }
.beacon-name { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 800; overflow-wrap: anywhere; }
.beacon-sub { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.beacon-code { color: var(--bp-muted); font-size: .92rem; overflow-wrap: anywhere; }
.beacon-badge {
  font-size: .78rem; font-weight: 700;
  color: var(--bp-accent);
  background: color-mix(in srgb, var(--bp-accent) 14%, transparent); border-radius: 999px; padding: 4px 11px;
}
.beacon-bio { margin: 6px 0 0; color: var(--bp-muted); max-width: 30rem; overflow-wrap: anywhere; }

.beacon-cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 14px 24px;
  border-radius: 999px; font-weight: 700; font-size: 1.05rem; color: var(--bp-accent-contrast);
  background: linear-gradient(120deg, var(--bp-accent), color-mix(in srgb, var(--bp-accent) 78%, #000));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--bp-accent) 40%, transparent);
  transition: filter .15s ease, transform .1s ease;
}
.beacon-cta:hover { filter: brightness(1.07); text-decoration: none; }
.beacon-cta:active { transform: translateY(1px); }

.beacon-block-title,
.beacon-block h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bp-muted); margin-bottom: 10px; }
.beacon-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.beacon-product {
  display: flex; flex-direction: column;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-sm);
  overflow: hidden; color: var(--bp-text);
  transition: transform .15s ease, border-color .15s ease;
}
.beacon-product:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--bp-accent) 55%, transparent); text-decoration: none; }
.beacon-product.is-static:hover { transform: none; border-color: var(--bp-border); }
.beacon-product-img {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; background: var(--bp-hover); overflow: hidden;
}
.beacon-product-img img { width: 100%; height: 100%; object-fit: cover; }
.beacon-product-ph { font-size: 2.4rem; font-weight: 800; color: var(--bp-muted); }
.beacon-product-video {
  position: absolute; top: 6px; left: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .7); color: #fff;
  font-size: .62rem; font-weight: 600; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.beacon-product-video svg { width: 11px; height: 11px; flex-shrink: 0; }
/* Порція 6, картки 41/35: лічильники відео копії (лівий верх) і «Віддзеркалено» (лівий низ). */
.beacon-product-videos { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; gap: 4px; }
.beacon-product-videos .beacon-product-video { position: static; }
.beacon-product-mirror { position: absolute; bottom: 6px; left: 6px; background: #FFFF99; color: #000; border-radius: 4px; padding: 2px 6px; font-size: .7rem; font-weight: 700; }
.beacon-product-name {
  padding: 8px 10px 0; font-size: .88rem; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.beacon-product-prices {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  padding: 2px 10px 10px;
}
.beacon-product-price { font-weight: 700; color: var(--bp-accent); }
.beacon-product-price-old { font-size: .78rem; text-decoration: line-through; color: var(--bp-muted); }
.beacon-product-off {
  padding: 1px 6px; border-radius: 999px;
  background: var(--bp-accent); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 1.5;
}

.beacon-links { display: flex; flex-direction: column; gap: 12px; }
.beacon-social-list { display: flex; flex-direction: column; gap: 12px; }
.beacon-social-row { position: relative; display: flex; align-items: center; }
.beacon-social-row .beacon-social { flex: 1; min-width: 0; padding-right: 64px; }
.beacon-social-row .beacon-copy {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
.beacon-social-row .beacon-copy:active { transform: translateY(calc(-50% + 1px)); }
.beacon-social {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 12px 16px;
  border-radius: 18px; color: var(--bp-text);
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  transition: background .15s ease, transform .1s ease, border-color .15s ease, filter .15s ease;
}
.beacon-social:hover { border-color: color-mix(in srgb, var(--bp-accent) 45%, var(--bp-border)); text-decoration: none; filter: brightness(1.05); }
.beacon-social:active { transform: translateY(1px); }
.beacon-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: 12px; color: var(--bp-text);
  background: var(--bp-hover);
  border: 1px solid var(--bp-border);
}
.beacon-social-icon svg { width: 22px; height: 22px; }
.beacon-social-text {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  text-align: center; min-width: 0;
}
.beacon-social-title,
.beacon-social-desc,
.beacon-special-title,
.beacon-special-desc {
  white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.beacon-social-title { font-weight: 700; letter-spacing: .02em; }
.beacon-social-desc { color: var(--bp-muted); font-size: .88rem; }

/* «Спецкнопка» (ТЗ › САЙТ › Кнопка контакту, codeExample; порція 3, картка 5): 140px, квадратне фото
   ліворуч або праворуч (.beacon-special-right), текст поряд. Колір фону/тексту й шрифт — per-button
   клас .beacon-sp-N у nonce'd <style> сторінки. */
.beacon-special {
  display: flex; width: 100%; height: 140px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  transition: transform .1s ease, filter .15s ease;
}
.beacon-special:hover { text-decoration: none; filter: brightness(1.03); }
.beacon-special:active { transform: translateY(1px); }
.beacon-special-right { flex-direction: row-reverse; }
.beacon-special-img { flex: 0 0 auto; height: 100%; aspect-ratio: 1; background: rgba(0, 0, 0, .05); }
.beacon-special-img img { width: 100%; height: 100%; object-fit: cover; }
.beacon-special-text {
  flex: 1 1 auto; min-width: 0; padding: 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.beacon-special-title { font-size: 18px; font-weight: 700; line-height: 1.2; }
.beacon-special-desc { font-size: 14px; opacity: .9; }
.beacon-link-whatsapp .beacon-social-icon { color: #fff; background: #25D366; border-color: transparent; }
/* Типи без фірмового кольору («Інше» тощо): нейтральний колір; власний — клас .beacon-btn-N у <style>. */
.beacon-link-other .beacon-social-icon { color: #fff; background: #64748B; border-color: transparent; }

/* Markdown/Image-блоки Міні-сайту. */
.beacon-content-img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.beacon-md { overflow-wrap: anywhere; }
.beacon-md > :first-child { margin-top: 0; }
.beacon-md > :last-child { margin-bottom: 0; }
.beacon-md p, .beacon-md ul, .beacon-md ol { margin: 0 0 10px; }
.beacon-md ul, .beacon-md ol { padding-left: 1.3em; }
.beacon-md h1, .beacon-md h2, .beacon-md h3, .beacon-md h4 {
  font-size: 1.05rem; text-transform: none; letter-spacing: normal; color: var(--bp-text); margin: 0 0 8px;
}
.beacon-md a { text-decoration: underline; }
.beacon-pre { white-space: pre-line; }
.beacon-product-shop,
.beacon-product-stock { padding: 0 10px 10px; font-size: .75rem; color: var(--bp-muted); }
/* Інфотовар (порція 3, картка 9). */
.beacon-product-info { margin: 0 10px 6px; align-self: flex-start; padding: 2px 6px; border-radius: 6px; font-size: .7rem; font-weight: 600; line-height: 1.25; color: var(--bp-text); background: var(--bp-border); }

/* TikTok-браузер: вікно «відкрийте в браузері» (як на Сайті, veo-store partials/tiktok.html). */
.tt-hint { position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, .45); display: flex; justify-content: flex-end; align-items: flex-start; padding: max(.35rem, env(safe-area-inset-top)) max(.35rem, env(safe-area-inset-right)) 0 12px; }
.tt-hint-card { width: 100%; max-width: 19rem; border-radius: 16px; border: 1px solid var(--bp-border); background: linear-gradient(var(--bp-surface), var(--bp-surface)), var(--bp-bg); color: var(--bp-text); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .25); padding: 8px 16px 16px; }
.tt-hint-arrow { display: block; width: 40px; height: 64px; margin: 0 -8px 4px auto; color: var(--bp-accent); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .2)); }
.tt-hint-text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.tt-hint-close { margin-top: 16px; min-height: 44px; width: 100%; border: 0; border-radius: 12px; background: var(--bp-accent); color: var(--bp-accent-contrast); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }

/* Футер Міні-сайту (порція 5, картка 16): BEROO, «Створити таку сторінку безкоштовно», текст про платформу. */
.mini-footer { flex-shrink: 0; margin-top: auto; padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mini-footer-create { font-size: .9rem; color: var(--bp-text, inherit); text-decoration: underline; }
.mini-footer-text { max-width: 640px; margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: #9a98a8; }
.beacon-terms-ok { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--bp-accent) 14%, transparent); color: var(--bp-accent); font-size: .72rem; font-weight: 600; vertical-align: middle; }
.beacon-terms-changed { font-size: .78rem; color: var(--bp-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.beacon-link-tiktok .beacon-social-icon,
.beacon-link-instagram .beacon-social-icon,
.beacon-link-youtube .beacon-social-icon,
.beacon-link-facebook .beacon-social-icon,
.beacon-link-telegram .beacon-social-icon,
.beacon-link-viber .beacon-social-icon,
.beacon-link-site .beacon-social-icon,
.beacon-link-phone .beacon-social-icon,
.beacon-link-bigo .beacon-social-icon { color: #fff; }
.beacon-link-tiktok .beacon-social-icon { background: #010101; border-color: rgba(255, 255, 255, .28); }
.beacon-link-instagram .beacon-social-icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border-color: transparent; }
.beacon-link-youtube .beacon-social-icon { background: #FF0000; border-color: transparent; }
.beacon-link-facebook .beacon-social-icon { background: #1877F2; border-color: transparent; }
.beacon-link-telegram .beacon-social-icon { background: #229ED9; border-color: transparent; }
.beacon-link-viber .beacon-social-icon { background: #7360F2; border-color: transparent; }
.beacon-link-site .beacon-social-icon { background: #3B82F6; border-color: transparent; }
.beacon-link-phone .beacon-social-icon { background: #2563EB; border-color: transparent; }
.beacon-link-bigo .beacon-social-icon { background: #00C2FF; border-color: transparent; }

.beacon-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.beacon-block-head .beacon-block-title { margin-bottom: 0; }

.beacon-copy {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-width: 44px; min-height: 44px; padding: 5px; border-radius: 8px; cursor: pointer;
  color: var(--bp-muted); background: var(--bp-hover); border: 1px solid var(--bp-border);
  font: inherit; font-size: .8rem; font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.beacon-copy:hover { color: var(--bp-text); border-color: color-mix(in srgb, var(--bp-accent) 45%, var(--bp-border)); }
.beacon-copy:active { transform: translateY(1px); }
.beacon-copy svg { width: 15px; height: 15px; }
.beacon-copy .beacon-copy-check { display: none; }
.beacon-copy.is-copied { color: var(--bp-accent); border-color: color-mix(in srgb, var(--bp-accent) 55%, var(--bp-border)); }
.beacon-copy.is-copied .beacon-copy-ico { display: none; }
.beacon-copy.is-copied .beacon-copy-check { display: inline; }

.beacon-meta { margin: 0; display: grid; gap: 10px; }
.beacon-meta > div { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.beacon-meta dt { color: var(--bp-muted); min-width: 120px; margin: 0; }
.beacon-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; flex: 1; }
/* Реквізити (порція 5, картка 11; partials/requisites.html): підпис над значенням, обидва ліворуч;
   «скопіювати» — окрема колонка 44×44; IBAN моноширинним групами по 4, перенос лише між групами. */
.req-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.req-head .req-title { margin: 0; } /* вигляд — як у заголовків блоків (.beacon-block h2) */
.req-copy-all {
  margin-left: auto; min-height: 44px; min-width: 9.5em; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  color: var(--bp-text); background: var(--bp-hover); border: 1px solid var(--bp-border); font: inherit; font-size: .85rem; font-weight: 600;
}
.req-copy-all.is-copied, .req-copy-iban.is-copied { color: var(--bp-accent); }
.req-list { margin: 0; display: flex; flex-direction: column; }
.req-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 8px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--bp-border);
}
.req-row:first-child { border-top: 0; }
.req-row dt { grid-column: 1; margin: 0; font-size: .8rem; color: var(--bp-muted); }
.req-row dd { grid-column: 1; margin: 0; font-weight: 700; color: var(--bp-text); overflow-wrap: anywhere; user-select: text; }
.req-row-main dd { font-size: 1.12rem; }
.req-iban { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.req-iban > span { white-space: nowrap; }
.req-copy-iban {
  display: flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--bp-accent); font: inherit; font-size: .82rem; font-weight: 600;
}
.req-copy {
  grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; padding: 0; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bp-muted); background: var(--bp-hover); border: 1px solid var(--bp-border);
}
.req-copy svg { width: 18px; height: 18px; }
.req-copy .req-ico-check { display: none; }
.req-copy.is-copied { color: var(--bp-accent); }
.req-copy.is-copied .req-ico-copy { display: none; }
.req-copy.is-copied .req-ico-check { display: inline; }

.beacon-accordions { display: flex; flex-direction: column; gap: 10px; }
.beacon-accordion {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.beacon-accordion summary {
  cursor: pointer; list-style: none;
  padding: 15px 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.beacon-accordion summary::-webkit-details-marker { display: none; }
.beacon-accordion summary::after {
  content: "+"; color: var(--bp-muted); font-size: 1.3rem; line-height: 1; transition: transform .15s ease;
}
.beacon-accordion[open] summary::after { content: "−"; }
.beacon-accordion-body { padding: 0 18px 16px; color: var(--bp-muted); }
.beacon-accordion-body p { margin: 0 0 8px; overflow-wrap: anywhere; }
.beacon-accordion-body p:last-child { margin-bottom: 0; }

.beacon-register {
  display: flex; align-items: center; justify-content: center;
  margin-top: 8px; min-height: 58px; padding: 16px 24px;
  border-radius: 999px; font-weight: 800; font-size: 1.08rem; color: var(--bp-bg);
  background: var(--bp-text);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--bp-text) 22%, transparent);
  transition: transform .1s ease, box-shadow .15s ease;
}
.beacon-register:hover { text-decoration: none; box-shadow: 0 16px 44px color-mix(in srgb, var(--bp-text) 34%, transparent); transform: translateY(-1px); }
.beacon-register:active { transform: translateY(1px); }

/* ---------- Beacon: mobile ---------- */
@media (max-width: 560px) {
  .page-beacon .page { padding: 22px 14px calc(44px + env(safe-area-inset-bottom)); }
  .beacon-grid { gap: 10px; }
  .beacon-meta > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
  .beacon-meta dt { grid-column: 1 / -1; min-width: 0; font-size: .85rem; }
  .beacon-meta .beacon-copy { justify-self: end; }
}
@media (hover: none) {
  .beacon-product:hover { transform: none; border-color: var(--bp-border); }
  .beacon-social:hover { border-color: var(--bp-border); filter: none; }
}

/* ---------- Вітрина головної (ТЗ › Сайт Beroo Online): картки — як на Міні-сайті, світла тема ---------- */
.showcase {
  --bp-surface: var(--bg-soft); --bp-text: var(--ink); --bp-muted: var(--ink-muted);
  --bp-border: var(--line); --bp-accent: var(--brand-1); --bp-accent-contrast: #fff;
  width: 100%; max-width: var(--maxw); margin: 32px auto 0;
}
.showcase-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; font-size: .9rem; }
.showcase-filters label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-muted); }
.showcase-filters input, .showcase-filters select {
  min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; /* 16 px — iOS не зумить */
}
.showcase-filters input { width: 120px; }
.showcase-buy { margin: 0 10px 10px; min-height: 44px; padding: 6px 12px; font-size: .9rem; }
.showcase-empty { color: var(--ink-muted); }
.showcase-pager { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
@media (min-width: 721px) { .showcase .beacon-grid { grid-template-columns: repeat(4, 1fr); } }

/* Перемикач ролі: лише для акаунта з ролями Продавця/Блогера; сторінка лишається в режимі Покупця. */
.role-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; font-size: .85rem; }
.role-bar a, .role-bar span, .role-bar button { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); font: inherit; cursor: pointer; }
.role-bar .is-current { background: var(--brand-1); border-color: var(--brand-1); color: #fff; }
.role-bar form { margin: 0; }
.login-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.login-form input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; }
.login-error { color: var(--brand-ink); }

/* ---------- «Оплата на ефірі»: кнопка Міні-сайту (порція 5, картка 4) й сторінка покупця ---------- */
/* Єдиний стандартний вигляд за будь-якої теми: біла, чорне обведення 2 px, темно-сірий текст,
   Montserrat, текст по центру; на ПК — тієї ж ширини, що й на мобільному, угорі ліворуч. */
.lp-btn-wrap { display: flex; justify-content: flex-start; }
.lp-btn {
  display: flex; align-items: stretch; width: 100%; max-width: 400px; min-height: 96px; overflow: hidden;
  background: #fff; color: #222; border: 2px solid #000; border-radius: 16px;
  font-family: "Montserrat", Arial, sans-serif; text-decoration: none;
}
.lp-btn:hover { text-decoration: none; color: #222; }
.lp-btn:active { transform: translateY(1px); }
.lp-btn-img { flex: 0 0 auto; width: 92px; aspect-ratio: 1; background: #fff; }
.lp-btn-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lp-btn-text {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
}
.lp-btn-title { font-size: 19px; font-weight: 800; letter-spacing: .02em; line-height: 1.15; }
.lp-btn-desc { font-size: 13px; font-weight: 500; line-height: 1.3; }

.lp-timer {
  position: sticky; top: 8px; z-index: 20; align-self: center;
  padding: 10px 22px; border-radius: 999px; background: #FFD600; color: #000;
  font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.lp-timer[hidden] { display: none; }
.lp-form { display: flex; flex-direction: column; gap: 18px; }
.lp-slot { display: flex; gap: 14px; align-items: center; }
.lp-slot-img { flex: 0 0 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bp-hover); }
.lp-slot-img img { width: 100%; height: 100%; object-fit: cover; }
.lp-slot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-slot-name { margin: 0; font-weight: 700; }
.lp-amount-fixed { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--bp-accent); }
.lp-fields { display: flex; flex-direction: column; gap: 12px; }
.lp-label { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; color: var(--bp-muted); }
/* font-size ≥16px: інакше iOS збільшує екран при фокусі поля (порція 4, картка 4, п. 3). */
.lp-input {
  min-height: 46px; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 16px; color: var(--bp-text);
  background: var(--bp-surface); border: 1px solid var(--bp-border);
}
.lp-label[hidden] { display: none; }
.lp-textarea { resize: none; overflow: hidden; line-height: 1.4; }
.lp-select {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  text-align: left; cursor: pointer;
}
.lp-select::after {
  content: ""; flex: none; padding: 3px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .6;
}
.lp-select.is-placeholder { color: var(--bp-muted); }
.lp-input:focus { outline: 2px solid var(--bp-accent); outline-offset: 1px; }
.lp-input:disabled { opacity: .6; }
/* Порція 6, картка 8: пошук відділення/поштомату за номером. */
.lp-np-find { display: flex; gap: 8px; }
.lp-np-find .lp-input { flex: 1 1 auto; min-width: 0; }
.lp-np-find-btn { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--bp-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.lp-np-find-btn:disabled { opacity: .6; cursor: default; }
.lp-np-hits { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bp-border); border-radius: var(--radius-sm); }
.lp-np-hits:empty { display: none; }
.lp-np-hits .lp-picker-opt { color: inherit; border-bottom-color: var(--bp-border); }
.lp-np-picked { margin: 0; font-weight: 600; }
.lp-np-picked[hidden] { display: none; }
/* Порція 6: рядок чекбокса/радіо — зона дотику ≥44 px, позначка 20 px у кольорі акценту (не зелена). */
.lp-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.lp-check input[type="checkbox"], .lp-check input[type="radio"] { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--bp-accent); }
.lp-question { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-note { margin: 8px 0 0; font-size: .85rem; color: var(--bp-muted); }
.lp-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(239, 68, 68, .14); color: #ef4444; font-weight: 600; }
.lp-error[hidden], .lp-paystep[hidden], .lp-receipt-preview[hidden], .lp-note[hidden] { display: none; }
.lp-go, .lp-paid { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.lp-go:disabled { opacity: .6; cursor: default; }
.lp-paid-label > span { white-space: nowrap; } /* перенос лише між «Я сплатив(ла)» і «… грн» */
.lp-paid-label { text-align: center; }
.lp-paid-hint { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--bp-muted); opacity: .85; }
.lp-hint { font-size: .82rem; color: #ef4444; }
.lp-hint[hidden], .lp-terms[hidden] { display: none; }
/* Порція 5, картка 15: згода з умовами магазину — текст-посилання розгортає вікно статей. */
.lp-consent { display: flex; flex-direction: column; gap: 10px; }
.lp-consent input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.lp-terms-link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--bp-accent); font: inherit; font-weight: 600; text-decoration: underline;
}
/* Порція 6, картка 3: стрілка стану й «Згорнути» (зона дотику ≥44 px). */
.lp-terms-toggle::after { content: "▾"; margin-left: 6px; }
.lp-terms-toggle.is-open::after { content: "▴"; }
.lp-terms-collapse {
  display: block; margin-left: auto; min-height: 44px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  color: var(--bp-accent); font: inherit; font-weight: 600; text-decoration: underline;
}
.lp-term-date { font-size: .8rem; opacity: .8; }

.lp-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 721px) { .lp-shots { grid-template-columns: repeat(3, 1fr); } }
.lp-shot, .lp-shot-add {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bp-hover); border: 1px solid var(--bp-border);
}
.lp-shot img { width: 100%; height: 100%; object-fit: cover; }
.lp-shot-ph { display: flex; height: 100%; align-items: center; justify-content: center; font-weight: 800; color: var(--bp-muted); }
.lp-shot-remove {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: rgba(0, 0, 0, .65); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
/* «Додати скріншоти»: легкий червоний пунктир + іконка «плюс» картинкою (порція 4, картка 4, п. 2). */
.lp-shot-add {
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px;
  border: 2px dashed rgba(239, 68, 68, .55); cursor: pointer; font-weight: 700; color: var(--bp-accent);
}
.lp-plus { flex: none; width: 22px; height: 22px; }
.lp-shots:not(.is-empty) .lp-shot-add { flex-direction: column; }
.lp-shot-add[hidden] { display: none; }
.lp-shots.is-empty .lp-shot-add { grid-column: 1 / -1; aspect-ratio: auto; min-height: 64px; }

.lp-paystep { display: flex; flex-direction: column; gap: 12px; }
.lp-receipt-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 12px;
  border-radius: 999px; border: 2px dashed var(--bp-accent); color: var(--bp-accent); font-weight: 700; cursor: pointer; text-align: center;
}
.lp-pay-row { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; }
.lp-pay-row.has-receipt { grid-template-columns: 1fr 1fr; }
.lp-receipt-preview { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; background: var(--bp-hover); }
.lp-receipt-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Вікно вибору міста / відділення (порція 4, картка 4, п. 4): біле, ~80% ширини, до ~60% висоти. */
.lp-picker {
  width: min(80vw, 560px); max-width: none; max-height: 60vh; max-height: 60dvh; padding: 0; border: 0;
  border-radius: 16px; background: #fff; color: #111; box-shadow: 0 18px 48px rgba(0, 0, 0, .3); overflow: hidden;
}
.lp-picker[open] { display: flex; flex-direction: column; }
.lp-picker::backdrop { background: rgba(0, 0, 0, .45); }
.lp-picker-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.lp-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-picker-title { margin: 0; font-weight: 700; }
.lp-picker-close {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: #f1f1f1; color: #111;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.lp-picker .lp-input { color: #111; background: #fff; border-color: #ddd; }
.lp-picker .lp-note { margin: 0; color: #666; }
.lp-picker-list { list-style: none; margin: 0; padding: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lp-picker-opt {
  display: block; width: 100%; padding: 12px 8px; border: 0; border-bottom: 1px solid #eee; background: none;
  color: #111; font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
.lp-picker-opt:hover, .lp-picker-opt:focus-visible { background: #f5f5f5; }