/* =========================================================
   Спільне для всіх варіантів дизайну й конструктора.
   1. Темне тло (data-dark) і світлий акцент (data-on-accent="dark"):
      виправляє місця, де в основних стилях жорстко стоїть білий текст.
   2. Розкладки фото, які вмикає конструктор атрибутами на <html>:
      data-hero, data-showcase, data-catalog, data-frame, data-buttons, data-upper.
      Селектори з html[...] сильніші за правила варіантів, тож конструктор їх перекриває.
   ========================================================= */

/* ---------- 1. Темне тло ---------- */
html[data-dark] { color-scheme: dark; }
html[data-dark] .btn--dark,
html[data-dark] .tag--dark,
html[data-dark] .filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-dark] .filters button[aria-pressed="true"] span { color: color-mix(in srgb, var(--paper) 65%, transparent); }
@media (hover: hover) { html[data-dark] .btn--dark:hover { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); } }
html[data-dark] .dev__hero,
html[data-dark] .chart-tip,
html[data-dark] .toast,
html[data-dark] .skip-link { background: var(--studio-2); color: var(--ink); }
html[data-dark] .result--pending { background: linear-gradient(100deg, var(--studio) 20%, var(--studio-2) 40%, var(--studio) 60%) 0 0 / 300% 100%; }
html[data-dark] .input::placeholder { color: var(--ink-3); }
html[data-dark] .demo-note { color: var(--ink-2); }
html[data-dark] .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); }

/* Світла кнопка на картці балансу (тло — акцент): у деяких варіантах .btn--light прозора, тут вона має бути суцільною */
:where(html[data-look]) .balance-card .btn--light { background: var(--paper); color: var(--ink); }

/* ---------- Світлий акцент: темний текст на ньому ---------- */
html[data-on-accent="dark"] { --on-accent: #0d0e10; }
html[data-on-accent="dark"] :is(.btn--primary, .segmented input:checked + label, .step__num, .plan--popular,
  .compare thead .compare__us, .final, .balance-card, .balance-chip__add, .pack__badge, .scene__badge,
  .step-media__main--active figcaption) { color: var(--on-accent); }
html[data-on-accent="dark"] .iban-step__title::before { color: var(--on-accent); }
/* У цих варіантах номер кроку — контурний (без заливки акцентом), тож текст має бути кольору акценту */
html[data-on-accent="dark"]:is([data-look="luxe"], [data-look="terminal"], [data-look="deco"], [data-look="blueprint"]) .step__num.step__num { color: var(--blue); }
html[data-on-accent="dark"] ::selection { background: var(--blue); color: var(--on-accent); }
html[data-on-accent="dark"] :is(.plan--popular .plan__note, .final .lead, .balance-card__label, .balance-card__value span,
  .balance-card__hint, .heat__text, .auth__pair figcaption, .auth__perks li) { color: color-mix(in srgb, var(--on-accent) 72%, transparent); }
html[data-on-accent="dark"] :is(.heat, .balance-card__main > .flame) { background: color-mix(in srgb, var(--on-accent) 12%, transparent); }
html[data-on-accent="dark"] .plan__badge { background: color-mix(in srgb, var(--on-accent) 12%, transparent); }
html[data-on-accent="dark"] .balance-card__sub { border-top-color: color-mix(in srgb, var(--on-accent) 20%, transparent); }
html[data-on-accent="dark"] .btn--ghost-dark { color: var(--on-accent); border-color: color-mix(in srgb, var(--on-accent) 40%, transparent); }
/* Лише там, де тло першого екрана й бічної панелі входу — сам акцент (Поточний, Поп) */
html[data-on-accent="dark"]:is([data-look="default"], [data-look="pop"]) :is(.hero__studio, .auth__aside) { color: var(--on-accent); }
html[data-on-accent="dark"]:is([data-look="default"], [data-look="pop"]) :is(.print figcaption, .print__file) { color: color-mix(in srgb, var(--on-accent) 75%, transparent); }

/* ---------- Іконки-галочки й «плюс» беруть колір акценту (маска замість кольорового SVG).
   :where — нульова вага, тож варіант зі своїми іконками (Поп) їх перекриває. ---------- */
:where(html[data-look]) .ticks li::before {
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
:where(html[data-look]) .auth__perks li::before {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
:where(html[data-look]) .faq__list summary::after {
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   2. Розкладки від конструктора
   ========================================================= */

/* ---------- Перший екран ---------- */
@media (min-width: 1081px) {
  html[data-hero] .hero {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] minmax(0, calc(var(--wrap) / 2))
      [middle] minmax(0, calc(var(--wrap) / 2))
      [content-end] minmax(var(--gutter), 1fr) [full-end];
    min-height: min(780px, calc(100dvh - var(--header-h)));
  }
  html[data-hero] .hero__copy { grid-row: 1; justify-self: stretch; text-align: left; max-width: none; }
  html[data-hero] :is(.hero__copy .lead, .hero__note) { margin-inline: 0; }
  html[data-hero] .hero__actions { justify-content: flex-start; }
  html[data-hero] .hero__studio { grid-row: 1; border-radius: 0; margin: 0; }

  html[data-hero="right"] .hero__copy { grid-column: content-start / middle; padding: 56px clamp(24px, 4vw, 56px) 64px 0; }
  html[data-hero="right"] .hero__studio { grid-column: middle / full-end; padding: 56px var(--gutter) 40px clamp(32px, 5vw, 72px); }

  html[data-hero="left"] .hero__studio { grid-column: full-start / middle; padding: 56px clamp(32px, 5vw, 72px) 40px var(--gutter); }
  html[data-hero="left"] .hero__copy { grid-column: middle / content-end; padding: 56px 0 64px clamp(40px, 5vw, 80px); }

  html[data-hero="center"] .hero,
  html[data-hero="wide"] .hero { grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--wrap)) [content-end] minmax(var(--gutter), 1fr) [full-end]; min-height: 0; }
  html:is([data-hero="center"], [data-hero="wide"]) .hero__copy { grid-column: content-start / content-end; justify-self: center; text-align: center; max-width: 54rem; padding: 88px 0 60px; }
  html:is([data-hero="center"], [data-hero="wide"]) :is(.hero__copy .lead, .hero__note) { margin-inline: auto; }
  html:is([data-hero="center"], [data-hero="wide"]) .hero__actions { justify-content: center; }
  html[data-hero="center"] .hero__studio { grid-column: content-start / content-end; grid-row: 2; padding: 48px 40px 32px; margin-bottom: 40px; border-radius: var(--r-l); }
  html[data-hero="wide"] .hero__studio { grid-column: full-start / full-end; grid-row: 2; padding: 56px var(--gutter) 40px; }
}

/* ---------- «Було / стало» ---------- */
@media (min-width: 601px) {
  html[data-showcase] .showcase { display: block; position: relative; grid-template-columns: none; width: min(64%, 380px); margin: 0 0 0 18%; }
  html[data-showcase] .showcase::after { content: none; }
  html[data-showcase] .print { rotate: none; translate: none; }
  html[data-showcase] .print--before { display: block; position: absolute; z-index: 1; left: -44%; right: auto; bottom: 13%; width: 50%; }
  html:is([data-hero="center"], [data-hero="wide"])[data-showcase="overlap"] .showcase,
  html:is([data-hero="center"], [data-hero="wide"])[data-showcase="fan"] .showcase { margin-inline: auto; translate: 12% 0; }

  html[data-showcase="side"] .showcase { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: 24px; align-items: end; width: min(100%, 560px); margin: 0 auto; }
  html[data-showcase="side"] .print--before { position: static; width: auto; }

  html[data-showcase="fan"] .print--after { rotate: 3deg; }
  html[data-showcase="fan"] .print--before { rotate: -8deg; }

  html[data-showcase="single"] .showcase { width: min(80%, 420px); margin: 0 auto; }
}
html[data-showcase="single"] .print--before { display: none; }
@media (max-width: 600px) { html[data-showcase="single"] .showcase { grid-template-columns: 1fr; max-width: 300px; } }

/* ---------- Каталог ---------- */
@media (min-width: 701px) {
  html[data-catalog] .catalog { display: grid; columns: auto; grid-template-columns: repeat(var(--cat-cols, 4), minmax(0, 1fr)); max-width: none; padding-bottom: 0; }
  html[data-catalog] .cat-card { display: block; grid-column: auto; grid-row: auto; translate: none; margin: 0; }
  html[data-catalog] .cat-card__frame { rotate: none; translate: none; aspect-ratio: 3 / 4; flex: none; }
  html[data-catalog] .cat-card__frame img { position: static; }

  html[data-catalog="bento"] .catalog { grid-auto-flow: dense; }
  html[data-catalog="bento"] .cat-card:first-child { display: flex; flex-direction: column; grid-column: span 2; grid-row: span 2; }
  html[data-catalog="bento"] .cat-card:first-child .cat-card__frame { flex: 1; aspect-ratio: auto; min-height: 0; }
  html[data-catalog="bento"] .cat-card:first-child .cat-card__frame img { position: absolute; inset: 0; }

  html[data-catalog="stagger"] .catalog { padding-bottom: 56px; }
  html[data-catalog="stagger"] .cat-card:nth-child(2n) { translate: 0 56px; }

  html[data-catalog="tilt"] .cat-card:nth-child(odd) .cat-card__frame { rotate: -1.6deg; }
  html[data-catalog="tilt"] .cat-card:nth-child(even) .cat-card__frame { rotate: 1.4deg; }

  /* Мозаїка: колонки різної висоти, як стрічка Pinterest */
  html[data-catalog="masonry"] .catalog { display: block; columns: var(--cat-cols, 4); column-gap: 16px; }
  html[data-catalog="masonry"] .cat-card { break-inside: avoid; margin-bottom: 20px; }
  html[data-catalog="masonry"] .cat-card:nth-child(3n + 1) .cat-card__frame { aspect-ratio: 3 / 4.6; }
  html[data-catalog="masonry"] .cat-card:nth-child(3n + 2) .cat-card__frame { aspect-ratio: 1; }
  html[data-catalog="masonry"] .cat-card__frame img { position: absolute; inset: 0; }
}

/* ---------- Рамка фото ---------- */
html[data-frame] :is(.cat-card__frame, .print img, .step-media__main, .tryon__row img, .tile__btn, .result) { outline: 0; }
html[data-frame="flat"] :is(.cat-card__frame, .print img, .step-media__main, .tryon__row img, .tile__btn, .result) { border: 0; box-shadow: none; }
html[data-frame="shadow"] :is(.cat-card__frame, .print img, .step-media__main, .tryon__row--looks img, .tile__btn, .result) { border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 24px 48px -20px rgba(0, 0, 0, 0.45); }
html[data-frame="mat"] :is(.cat-card__frame, .print img, .step-media__main, .tryon__row img, .tile__btn, .result) { border: 7px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(0, 0, 0, 0.4); }
html[data-frame="line"] :is(.cat-card__frame, .print img, .step-media__main, .tryon__row img, .tile__btn, .result) { border: 0; box-shadow: none; outline: 1px solid var(--ink); outline-offset: 5px; }
html[data-frame="hard"] :is(.cat-card__frame, .print img, .step-media__main, .tryon__row img, .tile__btn, .result) { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }

/* ---------- Кнопки ---------- */
html[data-buttons="pill"] { --r-btn: 999px; }
html[data-buttons="square"] { --r-btn: 0px; }
html[data-buttons="hard"] .btn:not(.btn--quiet) { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
html[data-buttons="hard"] .btn:not(.btn--quiet):active { box-shadow: 1px 1px 0 var(--ink); transform: translate(3px, 3px); }

/* ---------- Заголовки ---------- */
html[data-hweight] :is(.h1, .h2, .display) { font-weight: var(--h-weight); }
html[data-hcase="upper"] :is(.h1, .h2) { text-transform: uppercase; }
html[data-hcase="normal"] :is(.h1, .h2) { text-transform: none; }
html[data-hscale] .h1 { font-size: calc(clamp(2.2rem, 1.4rem + 2.8vw, 3.75rem) * var(--h-scale)); }
html[data-hscale] .h2 { font-size: calc(clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem) * var(--h-scale)); }
html[data-htrack] :is(.h1, .h2) { letter-spacing: var(--h-track); }