*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette taken from butorvilagpecs.hu and the shop's own logo: the deep
     navy of the wooden world-map mark (#1D3557, also the site's heading
     colour), its warm brass/wood tone (#D4A373) and a plain white header.
     The "--gold*" names are inherited from the shared store-tool template, so
     every rule that already referenced them picks these up — note that here
     they are NAVY, not gold; --accent-warm is the warm one, and it is only
     used where something sits on a dark background (footer, photo hero, the
     render overlay), where navy would disappear. */
  --ink: #1C2430;
  --bg: #FFFFFF;
  --panel: #F2F5F9;
  --panel-alt: #E3EAF3;
  --gold: #1D3557;          /* accent text / icons */
  --gold-button: #1D3557;   /* filled buttons, same navy as the shop's headings */
  --gold-light: #2E5080;    /* hover state for the filled buttons */
  --gold-dim: #13233A;
  --accent-warm: #D4A373;   /* on dark backgrounds only */
  --cream: #1C2430;
  --cream-dim: #4A5663;
  --white: #1C2430;
  --muted: #6B7785;
  --border: rgba(29,53,87,0.14);
  --border-strong: rgba(29,53,87,0.30);
  --success: #0D8756;
  --radius: 12px;
  --radius-lg: 20px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Mulish', sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ================================================================
   IKONKÉSZLET — furnitin
   Saját vonalas ikonok a korábbi emojik helyett. Emojit minden
   operációs rendszer a saját stílusában és színeivel rajzol
   (Apple/Google/Microsoft mind más), ami szétverte a krém-arany
   palettát és platformonként más magasságot foglalt.
   Ezek 24px-es rácson, 1.6px-es vonallal készültek — ugyanaz a
   vastagság, mint a doboz-szegélyeké —, és CSS maszkként
   működnek, így a currentColor-t öröklik és bárhova kerülhetnek,
   ahova szöveg is.
   ================================================================ */
.ic {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
/* Az ikondobozok aranyra váltanak — korábban az emoji saját színe vitte. */
.step-icon, .studio-callout-icon, .choice-icon, .upload-icon,
.report-card-icon { color: var(--gold); }
/* Ez a homályosított, sötétített fotó fölött ül — ott az arany nem olvasható,
   ezért a mellette lévő szöveg kezelését kapja (világos + vetett árnyék). */
.ai-render-overlay-icon { color: #FDFCFA; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); }

.ic-mail { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.2%205.6h17.6v12.8H3.2z%27%2F%3E%3Cpath%20d%3D%27m3.2%206.6%208.8%206.6%208.8-6.6%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.2%205.6h17.6v12.8H3.2z%27%2F%3E%3Cpath%20d%3D%27m3.2%206.6%208.8%206.6%208.8-6.6%27%2F%3E%3C%2Fsvg%3E"); }
.ic-phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.6%203.6h3l1.5%203.8-1.9%201.4a11.6%2011.6%200%200%200%205.9%205.9l1.4-1.9%203.8%201.5v3a1.5%201.5%200%200%201-1.6%201.5C10.9%2019.9%204.1%2013.1%203.6%205.2A1.5%201.5%200%200%201%205.1%203.6z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.6%203.6h3l1.5%203.8-1.9%201.4a11.6%2011.6%200%200%200%205.9%205.9l1.4-1.9%203.8%201.5v3a1.5%201.5%200%200%201-1.6%201.5C10.9%2019.9%204.1%2013.1%203.6%205.2A1.5%201.5%200%200%201%205.1%203.6z%27%2F%3E%3C%2Fsvg%3E"); }
.ic-plan { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.2%204.2h17.6v15.6H3.2z%27%2F%3E%3Cpath%20d%3D%27M10%204.2v7.2%27%2F%3E%3Cpath%20d%3D%27M10%2019.8v-4.2%27%2F%3E%3Cpath%20d%3D%27M10%2015.6a4.2%204.2%200%200%200%204.2-4.2%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.2%204.2h17.6v15.6H3.2z%27%2F%3E%3Cpath%20d%3D%27M10%204.2v7.2%27%2F%3E%3Cpath%20d%3D%27M10%2019.8v-4.2%27%2F%3E%3Cpath%20d%3D%27M10%2015.6a4.2%204.2%200%200%200%204.2-4.2%27%2F%3E%3C%2Fsvg%3E"); }
.ic-chat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%205h16.8v10.2H9.2l-4.2%203.8v-3.8H3.6z%27%2F%3E%3Cpath%20d%3D%27M7.6%208.6h8.8%27%2F%3E%3Cpath%20d%3D%27M7.6%2011.8h5.6%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%205h16.8v10.2H9.2l-4.2%203.8v-3.8H3.6z%27%2F%3E%3Cpath%20d%3D%27M7.6%208.6h8.8%27%2F%3E%3Cpath%20d%3D%27M7.6%2011.8h5.6%27%2F%3E%3C%2Fsvg%3E"); }
.ic-frame { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.2%204.6h17.6v14.8H3.2z%27%2F%3E%3Cpath%20d%3D%27m6%2016.2%203.6-3.8%202.5%202.4%203.4-4.2L21%2016%27%2F%3E%3Ccircle%20cx%3D%278.4%27%20cy%3D%279%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.2%204.6h17.6v14.8H3.2z%27%2F%3E%3Cpath%20d%3D%27m6%2016.2%203.6-3.8%202.5%202.4%203.4-4.2L21%2016%27%2F%3E%3Ccircle%20cx%3D%278.4%27%20cy%3D%279%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-tag { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%2010.6V4.3a1%201%200%200%201%201-1h6.3l9.9%209.9-7.3%207.3z%27%2F%3E%3Ccircle%20cx%3D%277.6%27%20cy%3D%277.5%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.4%2010.6V4.3a1%201%200%200%201%201-1h6.3l9.9%209.9-7.3%207.3z%27%2F%3E%3Ccircle%20cx%3D%277.6%27%20cy%3D%277.5%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-eye { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.6%2012C5.1%207.6%208.4%205.6%2012%205.6s6.9%202%209.4%206.4c-2.5%204.4-5.8%206.4-9.4%206.4S5.1%2016.4%202.6%2012Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.7%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.6%2012C5.1%207.6%208.4%205.6%2012%205.6s6.9%202%209.4%206.4c-2.5%204.4-5.8%206.4-9.4%206.4S5.1%2016.4%202.6%2012Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.7%27%2F%3E%3C%2Fsvg%3E"); }
.ic-scales { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.6v15.2%27%2F%3E%3Cpath%20d%3D%27M7.2%2019.8h9.6%27%2F%3E%3Cpath%20d%3D%27M3.6%207.6h16.8%27%2F%3E%3Cpath%20d%3D%27M3.6%207.6%201.4%2013h4.4z%27%2F%3E%3Cpath%20d%3D%27M20.4%207.6%2018.2%2013h4.4z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.6v15.2%27%2F%3E%3Cpath%20d%3D%27M7.2%2019.8h9.6%27%2F%3E%3Cpath%20d%3D%27M3.6%207.6h16.8%27%2F%3E%3Cpath%20d%3D%27M3.6%207.6%201.4%2013h4.4z%27%2F%3E%3Cpath%20d%3D%27M20.4%207.6%2018.2%2013h4.4z%27%2F%3E%3C%2Fsvg%3E"); }
.ic-helmet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1.4%2015.2c0%201.9%204.7%202.8%2010.6%202.8s10.6-.9%2010.6-2.8z%27%2F%3E%3Cpath%20d%3D%27M5.4%2015.2v-1.6a6.6%205.6%200%200%201%2013.2%200v1.6%27%2F%3E%3Cpath%20d%3D%27M12%208v7.2%27%2F%3E%3Cpath%20d%3D%27M8.6%209.2v6%27%2F%3E%3Cpath%20d%3D%27M15.4%209.2v6%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1.4%2015.2c0%201.9%204.7%202.8%2010.6%202.8s10.6-.9%2010.6-2.8z%27%2F%3E%3Cpath%20d%3D%27M5.4%2015.2v-1.6a6.6%205.6%200%200%201%2013.2%200v1.6%27%2F%3E%3Cpath%20d%3D%27M12%208v7.2%27%2F%3E%3Cpath%20d%3D%27M8.6%209.2v6%27%2F%3E%3Cpath%20d%3D%27M15.4%209.2v6%27%2F%3E%3C%2Fsvg%3E"); }
.ic-coins { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206.6c0-1.6%203.6-2.9%208-2.9s8%201.3%208%202.9-3.6%202.9-8%202.9-8-1.3-8-2.9z%27%2F%3E%3Cpath%20d%3D%27M4%206.6v4.8c0%201.6%203.6%202.9%208%202.9s8-1.3%208-2.9V6.6%27%2F%3E%3Cpath%20d%3D%27M4%2011.4v4.8c0%201.6%203.6%202.9%208%202.9s8-1.3%208-2.9v-4.8%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206.6c0-1.6%203.6-2.9%208-2.9s8%201.3%208%202.9-3.6%202.9-8%202.9-8-1.3-8-2.9z%27%2F%3E%3Cpath%20d%3D%27M4%206.6v4.8c0%201.6%203.6%202.9%208%202.9s8-1.3%208-2.9V6.6%27%2F%3E%3Cpath%20d%3D%27M4%2011.4v4.8c0%201.6%203.6%202.9%208%202.9s8-1.3%208-2.9v-4.8%27%2F%3E%3C%2Fsvg%3E"); }
.ic-calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%205.6h16.8v14.8H3.6z%27%2F%3E%3Cpath%20d%3D%27M3.6%2010.2h16.8%27%2F%3E%3Cpath%20d%3D%27M8.2%203.4v4%27%2F%3E%3Cpath%20d%3D%27M15.8%203.4v4%27%2F%3E%3Cpath%20d%3D%27M8%2014h2.4%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%205.6h16.8v14.8H3.6z%27%2F%3E%3Cpath%20d%3D%27M3.6%2010.2h16.8%27%2F%3E%3Cpath%20d%3D%27M8.2%203.4v4%27%2F%3E%3Cpath%20d%3D%27M15.8%203.4v4%27%2F%3E%3Cpath%20d%3D%27M8%2014h2.4%27%2F%3E%3C%2Fsvg%3E"); }
.ic-ai { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%274.6%27%20cy%3D%276.2%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2719.4%27%20cy%3D%276.2%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%274.6%27%20cy%3D%2717.8%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2719.4%27%20cy%3D%2717.8%27%20r%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M10.1%2010.5%205.9%207.2%27%2F%3E%3Cpath%20d%3D%27M13.9%2010.5%2018.1%207.2%27%2F%3E%3Cpath%20d%3D%27M10.1%2013.5%205.9%2016.8%27%2F%3E%3Cpath%20d%3D%27M13.9%2013.5%2018.1%2016.8%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%274.6%27%20cy%3D%276.2%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2719.4%27%20cy%3D%276.2%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%274.6%27%20cy%3D%2717.8%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2719.4%27%20cy%3D%2717.8%27%20r%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M10.1%2010.5%205.9%207.2%27%2F%3E%3Cpath%20d%3D%27M13.9%2010.5%2018.1%207.2%27%2F%3E%3Cpath%20d%3D%27M10.1%2013.5%205.9%2016.8%27%2F%3E%3Cpath%20d%3D%27M13.9%2013.5%2018.1%2016.8%27%2F%3E%3C%2Fsvg%3E"); }
.ic-palette { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.4c-4.9%200-8.8%203.8-8.8%208.6s3.9%208.6%208.8%208.6c1%200%201.8-.8%201.8-1.8%200-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2%200-1%20.8-1.8%201.8-1.8h2.1c2.8%200%205.1-2.3%205.1-5.1%200-3.9-4.4-6.1-9.8-6.1z%27%2F%3E%3Ccircle%20cx%3D%277.6%27%20cy%3D%2711.4%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%2710.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%2715.4%27%20cy%3D%278.2%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.4c-4.9%200-8.8%203.8-8.8%208.6s3.9%208.6%208.8%208.6c1%200%201.8-.8%201.8-1.8%200-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2%200-1%20.8-1.8%201.8-1.8h2.1c2.8%200%205.1-2.3%205.1-5.1%200-3.9-4.4-6.1-9.8-6.1z%27%2F%3E%3Ccircle%20cx%3D%277.6%27%20cy%3D%2711.4%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%2710.6%27%20cy%3D%277.6%27%20r%3D%271.1%27%2F%3E%3Ccircle%20cx%3D%2715.4%27%20cy%3D%278.2%27%20r%3D%271.1%27%2F%3E%3C%2Fsvg%3E"); }
.ic-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.6%27%20cy%3D%2710.6%27%20r%3D%276.6%27%2F%3E%3Cpath%20d%3D%27m15.4%2015.4%205.4%205.4%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.6%27%20cy%3D%2710.6%27%20r%3D%276.6%27%2F%3E%3Cpath%20d%3D%27m15.4%2015.4%205.4%205.4%27%2F%3E%3C%2Fsvg%3E"); }
.ic-camera { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.6%209a1.4%201.4%200%200%201%201.4-1.4h2.6l1.6-2.6h7.6l1.6%202.6H20A1.4%201.4%200%200%201%2021.4%209v9a1.4%201.4%200%200%201-1.4%201.4H4A1.4%201.4%200%200%201%202.6%2018z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713.2%27%20r%3D%273.5%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.6%209a1.4%201.4%200%200%201%201.4-1.4h2.6l1.6-2.6h7.6l1.6%202.6H20A1.4%201.4%200%200%201%2021.4%209v9a1.4%201.4%200%200%201-1.4%201.4H4A1.4%201.4%200%200%201%202.6%2018z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713.2%27%20r%3D%273.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m3%2011.4%209-7.4%209%207.4%27%2F%3E%3Cpath%20d%3D%27M5.6%209.8v9.8h12.8V9.8%27%2F%3E%3Cpath%20d%3D%27M9.8%2019.6v-4.8h4.4v4.8%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m3%2011.4%209-7.4%209%207.4%27%2F%3E%3Cpath%20d%3D%27M5.6%209.8v9.8h12.8V9.8%27%2F%3E%3Cpath%20d%3D%27M9.8%2019.6v-4.8h4.4v4.8%27%2F%3E%3C%2Fsvg%3E"); }
.ic-spark { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m12%203.2%201.9%205.5%205.5%201.9-5.5%201.9-1.9%205.5-1.9-5.5-5.5-1.9%205.5-1.9z%27%2F%3E%3Cpath%20d%3D%27m18.6%2016.2.8%202.2%202.2.8-2.2.8-.8%202.2-.8-2.2-2.2-.8%202.2-.8z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m12%203.2%201.9%205.5%205.5%201.9-5.5%201.9-1.9%205.5-1.9-5.5-5.5-1.9%205.5-1.9z%27%2F%3E%3Cpath%20d%3D%27m18.6%2016.2.8%202.2%202.2.8-2.2.8-.8%202.2-.8-2.2-2.2-.8%202.2-.8z%27%2F%3E%3C%2Fsvg%3E"); }
.ic-sofa { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.6%2012V8.2a1.6%201.6%200%200%201%201.6-1.6h11.6a1.6%201.6%200%200%201%201.6%201.6V12%27%2F%3E%3Cpath%20d%3D%27M2.6%2013.6a2%202%200%200%201%204%200V16h10.8v-2.4a2%202%200%200%201%204%200v4.2H2.6z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.6%2012V8.2a1.6%201.6%200%200%201%201.6-1.6h11.6a1.6%201.6%200%200%201%201.6%201.6V12%27%2F%3E%3Cpath%20d%3D%27M2.6%2013.6a2%202%200%200%201%204%200V16h10.8v-2.4a2%202%200%200%201%204%200v4.2H2.6z%27%2F%3E%3C%2Fsvg%3E"); }
.ic-doc { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.4%203.4h7.4l4.2%204.2v13H6.4z%27%2F%3E%3Cpath%20d%3D%27M13.8%203.4v4.2H18%27%2F%3E%3Cpath%20d%3D%27M9.4%2013h5.2%27%2F%3E%3Cpath%20d%3D%27M9.4%2016.2h3.4%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.4%203.4h7.4l4.2%204.2v13H6.4z%27%2F%3E%3Cpath%20d%3D%27M13.8%203.4v4.2H18%27%2F%3E%3Cpath%20d%3D%27M9.4%2013h5.2%27%2F%3E%3Cpath%20d%3D%27M9.4%2016.2h3.4%27%2F%3E%3C%2Fsvg%3E"); }
.ic-clipboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%204.6H6.6a1%201%200%200%200-1%201v14.2a1%201%200%200%200%201%201h10.8a1%201%200%200%200%201-1V5.6a1%201%200%200%200-1-1H15%27%2F%3E%3Cpath%20d%3D%27M9.8%202.8h4.4a1%201%200%200%201%201%201v2.4H8.8V3.8a1%201%200%200%201%201-1z%27%2F%3E%3Cpath%20d%3D%27M8.8%2011.4h6.4%27%2F%3E%3Cpath%20d%3D%27M8.8%2014.6h4.2%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%204.6H6.6a1%201%200%200%200-1%201v14.2a1%201%200%200%200%201%201h10.8a1%201%200%200%200%201-1V5.6a1%201%200%200%200-1-1H15%27%2F%3E%3Cpath%20d%3D%27M9.8%202.8h4.4a1%201%200%200%201%201%201v2.4H8.8V3.8a1%201%200%200%201%201-1z%27%2F%3E%3Cpath%20d%3D%27M8.8%2011.4h6.4%27%2F%3E%3Cpath%20d%3D%27M8.8%2014.6h4.2%27%2F%3E%3C%2Fsvg%3E"); }
.ic-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021.2s7-6.4%207-11.2a7%207%200%201%200-14%200c0%204.8%207%2011.2%207%2011.2z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021.2s7-6.4%207-11.2a7%207%200%201%200-14%200c0%204.8%207%2011.2%207%2011.2z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.6%27%2F%3E%3C%2Fsvg%3E"); }
.ic-bulb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.2a6.2%206.2%200%200%200-3.6%2011.2c.6.5.9%201.1.9%201.8v1.2h5.4v-1.2c0-.7.3-1.3.9-1.8A6.2%206.2%200%200%200%2012%203.2z%27%2F%3E%3Cpath%20d%3D%27M9.8%2019.4h4.4%27%2F%3E%3Cpath%20d%3D%27M10.6%2021.6h2.8%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.2a6.2%206.2%200%200%200-3.6%2011.2c.6.5.9%201.1.9%201.8v1.2h5.4v-1.2c0-.7.3-1.3.9-1.8A6.2%206.2%200%200%200%2012%203.2z%27%2F%3E%3Cpath%20d%3D%27M9.8%2019.4h4.4%27%2F%3E%3Cpath%20d%3D%27M10.6%2021.6h2.8%27%2F%3E%3C%2Fsvg%3E"); }
.ic-cog { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%277.2%27%2F%3E%3Cpath%20d%3D%27M12%204.8v-2%27%2F%3E%3Cpath%20d%3D%27M12%2019.2v2%27%2F%3E%3Cpath%20d%3D%27M4.8%2012h-2%27%2F%3E%3Cpath%20d%3D%27M19.2%2012h2%27%2F%3E%3Cpath%20d%3D%27m6.91%206.91-1.42-1.42%27%2F%3E%3Cpath%20d%3D%27m17.09%2017.09%201.42%201.42%27%2F%3E%3Cpath%20d%3D%27m17.09%206.91%201.42-1.42%27%2F%3E%3Cpath%20d%3D%27m6.91%2017.09-1.42%201.42%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%277.2%27%2F%3E%3Cpath%20d%3D%27M12%204.8v-2%27%2F%3E%3Cpath%20d%3D%27M12%2019.2v2%27%2F%3E%3Cpath%20d%3D%27M4.8%2012h-2%27%2F%3E%3Cpath%20d%3D%27M19.2%2012h2%27%2F%3E%3Cpath%20d%3D%27m6.91%206.91-1.42-1.42%27%2F%3E%3Cpath%20d%3D%27m17.09%2017.09%201.42%201.42%27%2F%3E%3Cpath%20d%3D%27m17.09%206.91%201.42-1.42%27%2F%3E%3Cpath%20d%3D%27m6.91%2017.09-1.42%201.42%27%2F%3E%3C%2Fsvg%3E"); }
.ic-cart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.6%204.2h2.6l2.5%2010.6h9.9L20%207.4H7.2%27%2F%3E%3Ccircle%20cx%3D%279.4%27%20cy%3D%2719%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2719%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.6%204.2h2.6l2.5%2010.6h9.9L20%207.4H7.2%27%2F%3E%3Ccircle%20cx%3D%279.4%27%20cy%3D%2719%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2719%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-refresh { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.4%2011.2A8.4%208.4%200%201%201%2017.9%205.4%27%2F%3E%3Cpath%20d%3D%27M21%203.4v4.8h-4.8%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.4%2011.2A8.4%208.4%200%201%201%2017.9%205.4%27%2F%3E%3Cpath%20d%3D%27M21%203.4v4.8h-4.8%27%2F%3E%3C%2Fsvg%3E"); }
.ic-warn { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.2%2021.6%2020.4H2.4z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4.4%27%2F%3E%3Cpath%20d%3D%27M12%2017.4h.01%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.2%2021.6%2020.4H2.4z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4.4%27%2F%3E%3Cpath%20d%3D%27M12%2017.4h.01%27%2F%3E%3C%2Fsvg%3E"); }

/* NAV — white bar like butorvilagpecs.hu's own header (dark links, logo on
   the bare bar). Same overall height as the other store tools. */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0.35rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(250,249,246,0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border);
}
.nav-left { display: flex; align-items: center; gap: 1rem; }
/* The logo is a white-background plate, so it sits flush on the white bar.
   The mark is nearly square (261x180) AND carries its own white margin, so it
   needs more height than a wordmark would to read at all — 46px lands the bar
   at ~57px, close to the other store tools' ~51px. */
.store-logo {
  height: 46px; width: auto; display: block;
}
.nav-tagline {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--cream-dim);
  margin-left: 0.85rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--border-strong);
}
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  color: #232323; font-size: 0.875rem;
  text-decoration: none; transition: color 0.2s;
}

.btn-nav {
  background: var(--gold-button); color: #fff !important;
  padding: 0.55rem 1.4rem; border-radius: 100px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; transition: background 0.2s, transform 0.15s;
}

/* HAMBURGER */
.hamburger {
  display: none;
  position: relative; z-index: 100;
  background: none; border: none;
  cursor: pointer; padding: 0.5rem;
  flex-direction: column; gap: 5px;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: #242424; border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* HERO */
.hero {
  min-height: 100vh;
  min-height: 100lvh;
  display: flex; align-items: center; justify-content: center;
  padding: 8rem 2rem 5rem;
  position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 65% 50%, rgba(29,53,87,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(29,53,87,0.04) 0%, transparent 60%);
}

/* HERO — PHOTO BACKGROUND VARIANT */
.hero-photo .hero-eyebrow { color: var(--accent-warm); }
.hero-photo .hero-title { color: #F2F6FB; }
.hero-photo .hero-title em { color: var(--accent-warm); }
.hero-photo .hero-sub { color: rgba(242,246,251,0.82); }
.hero-photo .btn-ghost { color: #F2F6FB; border-color: rgba(242,246,251,0.4); }

@media (max-width: 640px) {
  .hero-photo { padding: 7rem 1.25rem 3rem; }
}

/* INTRO WRAP — hero + bemutatkozás share one sticky background image,
   which unpins and scrolls away naturally once this wrapper ends. */
.intro-wrap { position: relative; }
.intro-bg-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(18,14,10,0.6) 0%, rgba(18,14,10,0.72) 55%, rgba(18,14,10,0.8) 100%),
    url('referenciak/kiraly11.jpg') center 22% / cover no-repeat;
}
.intro-scroll {
  position: relative; z-index: 1;
  margin-top: -100vh; margin-top: -100lvh;
}
@media (max-width: 640px) {
  .intro-bg-sticky { background-position: 52% 8%; background-size: auto 115%; }
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; max-width: 1100px; width: 100%;
  align-items: center; position: relative;
}
.hero-eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 1.2rem;
}
.hero-title {
  font-family: 'Mulish', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.15; color: var(--white);
  margin-bottom: 1.5rem;
}
.hero-title em { font-style: italic; color: var(--gold); }
.hero-sub {
  font-size: 1.05rem; color: var(--muted); line-height: 1.75;
  margin-bottom: 2.5rem; max-width: 480px;
}
.hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.btn-primary {
  background: var(--gold-button); color: #fff;
  padding: 0.9rem 2rem; border-radius: 100px;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none; transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 0.5rem;
}

.btn-ghost {
  color: var(--cream-dim); font-size: 0.9rem;
  text-decoration: none; padding: 0.9rem 1.5rem;
  border: 0.5px solid var(--border-strong); border-radius: 100px;
  transition: all 0.2s;
}

/* HERO VISUAL */
.hero-visual {
  position: relative;
}
/* Distinct from .app-ui (same look) so scrollToDesignerTop()'s
   querySelector('.app-ui') still resolves to the real designer tool. */
.hero-ui {
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* SCROLL HINT */
.scroll-hint {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0.5px solid var(--border-strong); border-radius: 50%;
  background: var(--bg);
  pointer-events: none; cursor: default;
  z-index: 40;
  animation: scrollHintBounce 2s ease-in-out infinite;
  transition: opacity 0.3s;
}
.scroll-hint.scroll-hint-hidden { opacity: 0; }
@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

/* TRUST STRIP */
.trust-strip {
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  padding: 1.5rem 2rem;
  display: flex; justify-content: center; gap: 3rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: var(--muted);
}
.trust-item svg { color: var(--gold); }

/* HOW IT WORKS */
section { padding: 6rem 2rem; max-width: 1100px; margin: 0 auto; }
.section-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
  color: var(--gold); text-transform: uppercase;
  text-align: center; margin-bottom: 1rem;
}
.section-title {
  font-family: 'Mulish', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  text-align: center; color: var(--white);
  margin-bottom: 1rem; line-height: 1.2;
}
.section-sub {
  text-align: center; color: var(--muted);
  font-size: 1rem; max-width: 520px;
  margin: 0 auto 4rem;
}

/* BEMUTATKOZÁS (dark) */
.about-section {
  max-width: none; padding: 6rem 2rem;
  position: relative;
}
.about-grid {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 3.5rem; align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.about-photo {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: center 15%; border-radius: var(--radius-lg);
  border: 0.5px solid rgba(242,246,251,0.15);
}
.about-name {
  font-family: 'Mulish', sans-serif; font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: #F2F6FB; line-height: 1.35; margin-bottom: 1.2rem;
}
.about-text {
  color: rgba(242,246,251,0.72); font-size: 1rem; line-height: 1.75;
  margin-bottom: 1.1rem; max-width: 620px;
}
.about-text:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-photo { max-width: 220px; margin: 0 auto; }
  .about-name, .about-text { text-align: center; }
  .about-text { margin-left: auto; margin-right: auto; }
}

.steps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.step {
  background: var(--panel);
  padding: 2.5rem 2rem;
  position: relative;
}

.step-num {
  font-family: 'Mulish', sans-serif;
  font-size: 3rem; font-weight: 600;
  color: var(--gold);
  line-height: 1; margin-bottom: 1.5rem;
}
.step-icon {
  width: 44px; height: 44px;
  background: rgba(29,53,87,0.1);
  border: 0.5px solid var(--border-strong);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 1.2rem;
}
.step h3 {
  font-family: 'Mulish', sans-serif;
  font-size: 1.2rem; color: var(--white);
  margin-bottom: 0.75rem;
}
.step p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }

/* STEP MOCKUPS — small illustrative replicas of the actual app UI,
   used instead of abstract icons so each step is recognizable at a glance. */
.step-mockup {
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.step-mockup-bar {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 0.5px solid var(--border);
  background: rgba(26,20,16,0.03);
}
.step-mockup-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.step-mockup-bar-title {
  margin-left: auto; margin-right: auto;
  font-size: 0.6rem; color: var(--muted); font-family: 'Mulish', monospace;
}
.step-mockup-body {
  padding: 1.1rem; min-height: 132px;
  display: flex; flex-direction: column; justify-content: center; gap: 0.55rem;
}

.mock-upload {
  border: 1.2px dashed var(--border-strong);
  border-radius: 10px; padding: 1.3rem 1rem;
  text-align: center; background: rgba(29,53,87,0.03);
}
.mock-upload-icon { font-size: 1.5rem; margin-bottom: 0.35rem; }
.mock-upload-title { font-family: 'Mulish', sans-serif; font-size: 0.8rem; color: var(--cream); margin-bottom: 0.25rem; }
.mock-upload-sub { font-size: 0.62rem; color: var(--muted); }
.mock-upload-sub em { color: var(--gold); font-style: normal; }

.mock-label { font-size: 0.62rem; color: var(--cream-dim); margin-bottom: 0.3rem; letter-spacing: 0.03em; }
.mock-select, .mock-pill {
  font-size: 0.72rem; color: var(--cream);
  background: rgba(26,20,16,0.055);
  border: 0.5px solid var(--border-strong);
  border-radius: 7px; padding: 0.4rem 0.6rem;
}
.mock-pill { color: var(--gold); }
.mock-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.mock-chip {
  font-size: 0.62rem; color: var(--muted);
  border: 0.5px solid var(--border-strong);
  border-radius: 100px; padding: 0.22rem 0.55rem;
}
.mock-chip.active { color: #fff; background: var(--gold-button); border-color: var(--gold-button); font-weight: 600; }

.mock-report-card {
  background: rgba(26,20,16,0.045);
  border: 0.5px solid var(--border);
  border-radius: 8px; padding: 0.6rem 0.7rem;
}
.mock-report-header {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; color: var(--white); font-weight: 600;
  margin-bottom: 0.4rem;
}
.mock-report-line { height: 5px; border-radius: 3px; background: rgba(26,20,16,0.12); margin-bottom: 0.3rem; }
.mock-report-line.short { width: 60%; margin-bottom: 0; }
.mock-furniture-item {
  display: flex; align-items: center; gap: 0.55rem;
  background: rgba(26,20,16,0.045);
  border: 0.5px solid var(--border);
  border-radius: 8px; padding: 0.5rem 0.6rem;
}
.mock-furn-thumb {
  width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(29,53,87,0.35), rgba(29,53,87,0.1));
}
.mock-furn-info { flex: 1; min-width: 0; }
.mock-furn-name { font-size: 0.68rem; color: var(--cream); font-weight: 500; }
.mock-furn-store { font-size: 0.6rem; color: var(--muted); }
.mock-furn-price { font-size: 0.66rem; color: var(--gold); font-weight: 600; white-space: nowrap; }

.studio-callout {
  margin-top: 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  background: linear-gradient(135deg, rgba(29,53,87,0.12), rgba(29,53,87,0.04));
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  box-shadow: 0 12px 32px rgba(29,53,87,0.14);
}
.studio-callout-top {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
}
.studio-callout-num { margin-bottom: 0; flex-shrink: 0; }
.studio-callout-icon {
  width: 64px; height: 64px; flex-shrink: 0;
  background: rgba(29,53,87,0.18);
  border: 0.5px solid var(--border-strong);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
}
.studio-callout-text { flex: 1; min-width: 240px; }
.studio-callout-text p {
  font-family: 'Mulish', sans-serif;
  font-size: 1.15rem; color: var(--white); line-height: 1.5;
}
.studio-callout-text strong { color: var(--gold); font-weight: 600; font-style: italic; }
.studio-callout-gallery { display: flex; gap: 0.75rem; }
.studio-callout-gallery img {
  flex: 1; width: 100%; height: 220px;
  object-fit: cover; border-radius: 10px;
  border: 0.5px solid var(--border-strong);
  display: block;
}

.quote-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5px;
  background: var(--border);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.quote-grid-3 { grid-template-columns: repeat(3, 1fr); }
.quote-card {
  background: var(--panel);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: background 0.2s, transform 0.2s;
}

.quote-card .step-icon { margin-left: auto; margin-right: auto; }
.quote-value {
  font-family: 'Mulish', sans-serif;
  font-size: 1.8rem; color: var(--gold);
  margin-bottom: 0.75rem;
}
.quote-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }

/* CHOICE SCREEN */
/* Hidden from sight, kept for search engines and screen readers. The choice
   screen's H1 is the page's only top-level heading, so deleting it outright
   would leave the document with no <h1> at all — this keeps the markup sound
   while the visitor just sees the two cards. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.choice-screen {
  padding: 9rem 2rem 6rem;
  max-width: 980px; margin: 0 auto;
  text-align: center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.choice-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 2rem; margin-top: 3.5rem;
}
.choice-or {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-size: 0.8rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.choice-card {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; gap: 0.9rem;
  padding: 3rem 2.5rem;
  min-height: 340px;
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  cursor: pointer; font-family: inherit;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* Brief press feedback the instant a card is clicked, before the screen
   transition (below) takes over — without this the click felt unregistered
   right up until content suddenly swapped in. */
.choice-card.choice-card-pressed {
  transform: scale(0.97);
  border-color: var(--gold);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.choice-icon { font-size: 2.5rem; }
.choice-title {
  font-family: 'Mulish', sans-serif;
  font-size: 1.5rem; color: var(--cream);
}
.choice-text { font-size: 1rem; color: var(--muted); line-height: 1.7; }
@media (max-width: 700px) {
  .choice-screen { padding: 6.5rem 1.25rem 2.5rem; }
  .choice-grid { grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.5rem; }
  .choice-card { padding: 1.75rem 1.5rem; min-height: 0; gap: 0.55rem; }
  .choice-icon { font-size: 1.75rem; }
  .choice-title { font-size: 1.15rem; }
  .choice-text { font-size: 0.9rem; line-height: 1.55; }
}

/* APP SECTION */
.app-section {
  padding: 6rem 2rem;
  background: var(--panel);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.app-section > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* Entry state for a section right as it's switched to (see selectMode() /
   goBackToChoice() in app.js, shared with .choice-screen above) — applied
   then immediately cleared on the next frame so it transitions in, rather
   than just appearing instantly. */
.app-section.section-fade-enter,
.choice-screen.section-fade-enter {
  opacity: 0;
  transform: translateY(14px);
}
/* Leave state applied to whichever section is being switched away from —
   the mirror of section-fade-enter above. */
.app-section.section-fade-leave,
.choice-screen.section-fade-leave {
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  pointer-events: none;
}

.back-to-choice {
  display: inline-flex; align-items: center;
  margin: 0 0 1.5rem !important;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; font-weight: 500;
  color: var(--muted); padding: 0;
  transition: color 0.2s;
}

.app-ui {
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 3rem;
}
.app-topbar {
  padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--bg);
}
.dot { width: 15px; height: 15px; border-radius: 50%; }
.dot-r { background: #FF5F57; }
.dot-y { background: #FFBD2E; }
.dot-g { background: #28CA41; }

.app-body {
  display: grid; grid-template-columns: 1fr;
  min-height: 480px;
}
.app-left {
  padding: 2rem; min-width: 0;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.app-right { padding: 2rem; min-width: 0; display: none; }

.upload-zone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: #FAFAFA;
  position: relative;
  overflow: hidden;
}
.upload-zone.drag-over {
  border-color: var(--gold);
  background: #F0F0F0;
  transform: scale(1.01);
}
.upload-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.upload-title { font-family: 'Mulish', sans-serif; font-size: 1.1rem; color: var(--cream); margin-bottom: 0.5rem; }
.upload-sub { font-size: 0.8rem; color: var(--muted); }
.upload-sub span { color: var(--gold); cursor: pointer; }

.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-label { font-size: 0.8rem; font-weight: 500; color: var(--cream-dim); letter-spacing: 0.05em; }
.form-select {
  width: 100%; min-width: 0;
  background: #FAFAFA;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--cream);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-family: 'Mulish', sans-serif;
  appearance: none;
  cursor: text;
}
.form-select:focus { outline: none; border-color: var(--gold); }

.btn-generate {
  width: 100%;
  background: var(--gold-button); color: #fff;
  border: none; border-radius: 100px;
  padding: 1rem; font-size: 1rem; font-weight: 700;
  cursor: pointer; font-family: 'Mulish', sans-serif;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}

/* Loading state: swap the label for a spinning ring while a search/plan
   request is in flight (see setButtonLoading() in app.js) — reused by both
   the text-search button and (if given the same id="…Btn" markup) any
   other .btn-generate. */
.btn-generate .btn-spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pdf-spin 0.7s linear infinite;
}
.btn-generate.is-loading { cursor: not-allowed; }

.btn-generate.is-loading .btn-label { display: none; }
.btn-generate.is-loading .btn-spinner { display: inline-block; }

/* RESULT PANEL */
.result-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.result-title { font-family: 'Mulish', sans-serif; font-size: 1rem; color: var(--white); }
.result-meta { font-size: 0.75rem; color: var(--muted); }
.result-img {
  width: 100%; aspect-ratio: 4/3;
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.85rem;
  margin-bottom: 1.2rem;
  position: relative; overflow: hidden;
}
/* The finished plan shows the uploaded photo at half width so it doesn't
   dominate the report. It keeps .result-img's 4/3 box on purpose: the photo
   inside is object-fit:contain, so the whole room stays visible without the
   panel growing to a portrait photo's own height (a 600×1600 upload used to
   make this 1900px tall). */
.result-img-compact {
  width: 50%;
  margin-left: auto; margin-right: auto;
}
.result-img-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-alt) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.75rem;
}
.result-shimmer {
  width: 80%; height: 8px; background: rgba(29,53,87,0.15);
  border-radius: 4px; animation: shimmer 1.8s ease-in-out infinite;
}
.result-shimmer-2 { width: 60%; animation-delay: 0.3s; }

.btn-retry {
  width: 100%; margin-top: 0.6rem; padding: 0.6rem;
  background: rgba(29,53,87,0.1); border: 0.5px solid var(--border-strong);
  color: var(--gold); border-radius: 8px; cursor: pointer;
  font-size: 0.8rem; font-weight: 600; font-family: 'Mulish', sans-serif;
}

.result-shimmer-3 { width: 70%; animation-delay: 0.6s; }
@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* ============ ANIMATIONS ============ */
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes visualRise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes cardRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes uploadBreathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal — applied to sections/cards as they enter the viewport */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
  }
  .reveal.reveal-visible { opacity: 1; transform: none; }
  .steps-grid .step.reveal:nth-child(2) { transition-delay: 0.08s; }
  .steps-grid .step.reveal:nth-child(3) { transition-delay: 0.16s; }
  .gallery-grid .gallery-item.reveal:nth-child(2) { transition-delay: 0.08s; }
  .gallery-grid .gallery-item.reveal:nth-child(3) { transition-delay: 0.16s; }
  .quote-grid .quote-card.reveal:nth-child(2) { transition-delay: 0.08s; }

  /* Hero entrance */
  .hero-eyebrow, .hero-title, .hero-sub, .hero-actions { opacity: 0; }
  .hero-eyebrow { animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) 0.05s forwards; }
  .hero-title { animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) 0.15s forwards; }
  .hero-sub { animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) 0.28s forwards; }
  .hero-actions { animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) 0.4s forwards; }
  .hero-visual { opacity: 0; animation: visualRise 0.8s cubic-bezier(.2,.8,.2,1) 0.25s forwards; }
  .room-badge { opacity: 0; animation: heroRise 0.6s cubic-bezier(.2,.8,.2,1) 0.7s forwards; }

  /* Upload zone: idle invitation to interact, gone once a photo replaces the icon */
  .upload-icon { display: inline-block; animation: uploadBreathe 2.6s ease-in-out infinite; }

  /* AI report cards: cascade in instead of appearing all at once */
  #furnitureList .report-card { animation: cardRise 0.5s cubic-bezier(.2,.8,.2,1) both; }
  #furnitureList .report-card:nth-of-type(1) { animation-delay: 0.05s; }
  #furnitureList .report-card:nth-of-type(2) { animation-delay: 0.12s; }
  #furnitureList .report-card:nth-of-type(3) { animation-delay: 0.19s; }
  #furnitureList .report-card:nth-of-type(4) { animation-delay: 0.26s; }
  #furnitureList .report-card:nth-of-type(5) { animation-delay: 0.33s; }
}

.furniture-list { display: flex; flex-direction: column; gap: 0.5rem; }
.furniture-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: rgba(26,20,16,0.035);
  border: 0.5px solid var(--border);
  border-radius: 8px;
}
.furn-swatch {
  width: 48px; height: 48px; border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.furn-swatch img {
  width: 100%; height: 100%; object-fit: cover;
}
.furn-info { flex: 1; min-width: 0; }
.furn-name { font-size: 0.8rem; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.furn-name a { color: var(--cream); text-decoration: none; }

.furn-store { font-size: 0.7rem; color: var(--muted); }
.furn-store a { color: var(--gold); text-decoration: none; font-weight: 500; }

.furn-price { font-size: 0.85rem; font-weight: 600; color: var(--gold); flex-shrink: 0; }

.total-row {
  border-top: 0.5px solid var(--border-strong);
  margin-top: 0.75rem; padding-top: 0.75rem;
  display: flex; justify-content: space-between;
  align-items: center;
}
.total-label { font-size: 0.85rem; color: var(--cream-dim); }
.total-price { font-family: 'Mulish', sans-serif; font-size: 1.3rem; color: var(--gold); }

/* PRICING */
.pricing-section { padding: 6rem 2rem; }
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; max-width: 900px; margin: 3rem auto 0;
}
.plan {
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  position: relative;
  transition: transform 0.2s, border-color 0.2s;
}

.plan.featured {
  border: 1.5px solid var(--gold);
  background: rgba(29,53,87,0.05);
}
.plan-badge {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  background: var(--gold-button); color: #fff;
  padding: 0.3rem 1rem; border-radius: 100px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  white-space: nowrap;
}
.plan-name {
  font-size: 0.75rem; font-weight: 600; color: var(--gold);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.plan-price {
  font-family: 'Mulish', sans-serif;
  font-size: 2.5rem; color: var(--white);
  line-height: 1; margin-bottom: 0.4rem;
}
.plan-price sup { font-size: 1.2rem; vertical-align: top; margin-top: 0.5rem; }
.plan-period { font-size: 0.8rem; color: var(--muted); margin-bottom: 1.5rem; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
.plan-features li {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.85rem; color: var(--cream-dim);
}
.plan-features li::before {
  content: "\2713"; color: var(--gold);
  font-size: 0.75rem; margin-top: 0.1rem; flex-shrink: 0;
}
.plan-features li.no::before { content: "\2013"; color: var(--muted); }
.plan-features li.no { color: var(--muted); }
.btn-plan {
  width: 100%; padding: 0.8rem;
  border-radius: 100px;
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  font-family: 'Mulish', sans-serif;
  text-align: center;
}
.btn-plan-outline {
  background: transparent; color: var(--cream);
  border: 0.5px solid var(--border-strong);
}

.btn-plan-solid {
  background: var(--gold-button); color: #fff;
  border: none;
}

/* TESTIMONIALS */
.testimonials {
  padding: 6rem 2rem;
  background: var(--panel);
  border-top: 0.5px solid var(--border);
}
.testimonials > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3rem;
}
.testi-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.testi-stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 1rem; letter-spacing: 2px; }
.testi-text { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.7; margin-bottom: 1.25rem; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 0.75rem; }
.testi-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(29,53,87,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 600; color: var(--gold);
}
.testi-name { font-size: 0.85rem; color: var(--cream); font-weight: 500; }
.testi-role { font-size: 0.75rem; color: var(--muted); }

/* FAQ */
.faq { padding: 6rem 2rem; max-width: 720px; margin: 0 auto; }
.faq-item {
  border-bottom: 0.5px solid var(--border);
  padding: 1.5rem 0;
  cursor: pointer;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.95rem; color: var(--cream); font-weight: 500;
  gap: 1rem;
}
.faq-toggle { color: var(--gold); font-size: 1.2rem; flex-shrink: 0; transition: transform 0.2s; }
.faq-a {
  font-size: 0.875rem; color: var(--muted);
  line-height: 1.75; margin-top: 1rem;
  display: none;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-item.open .faq-a { display: block; }

/* CTA FOOTER */
.cta-section {
  padding: 8rem 2rem;
  text-align: center;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(29,53,87,0.08) 0%, transparent 70%);
}
.cta-title {
  font-family: 'Mulish', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--white); margin-bottom: 1.2rem;
}
.cta-title em { color: var(--gold); font-style: italic; }
.cta-sub { color: var(--muted); font-size: 1rem; margin-bottom: 3rem; max-width: 500px; margin-left: auto; margin-right: auto; }

footer {
  border-top: 0.5px solid rgba(255,255,255,0.08);
  padding: 2rem 2.5rem;
  /* Dark navy footer, picked up from the logo's mark — every color below is
     overridden to a light tone to stay readable against it. */
  background: #13233A;
}
.footer-main {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.footer-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
}
.footer-logo { font-family: 'Mulish', sans-serif; color: var(--accent-warm); font-size: 1rem; }
.footer-logo-prefix { font-family: 'Mulish', sans-serif; font-style: italic; color: rgba(255,255,255,0.45); font-size: 0.8rem; margin-right: 0.35rem; }
.footer-links { display: flex; gap: 2rem; }
.footer-links a { font-size: 0.8rem; color: rgba(255,255,255,0.55); text-decoration: none; }

.footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.35); }

/* REQUEST COUNTER — live count of AI requests across the whole furnitin
   AI technology (this worker + the furnitin AI worker). Kept as plain,
   small text matching .footer-copy's proportions (not a standalone pill —
   that read as an oversized, disconnected card sitting in the footer)
   with just the pulsing dot and gold number for a touch of life. */
.request-counter {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; color: rgba(255,255,255,0.5);
  text-align: left; white-space: nowrap;
}
.request-counter-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--success);
  animation: requestCounterPulse 1.8s ease-out infinite;
}
@keyframes requestCounterPulse {
  0% { box-shadow: 0 0 0 0 rgba(13,135,86,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(13,135,86,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,135,86,0); }
}
.request-counter-number {
  font-family: 'Mulish', sans-serif;
  font-size: 0.9rem; font-weight: 600;
  /* --gold is a dark green — unlike the rest of this light-theme page, the
     footer itself is dark (see footer{} above), so this needs the lighter
     tint to stay readable instead of the usual --gold. */
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  transition: transform 0.25s ease, color 0.25s ease;
}
/* Toggled briefly by JS whenever the count changes, so periodic live
   refreshes are eye-catching too, not just the first count-up. */
.request-counter-number.is-updating {
  color: #fff;
  transform: scale(1.12);
}
@media (max-width: 480px) {
  /* Flexbox cross-axis alignment (align-items) has no good answer for
     "center this small dot on just the first line of wrapped text" — it
     centers/aligns the dot against the whole (multi-line-tall) box instead,
     which read as sitting too high. Switching to plain inline flow with
     vertical-align:middle on the dot is the standard fix: as the first
     inline element, its middle aligns with the middle of the first line
     specifically, and the text after it wraps normally as plain text would.
     Extra margin-bottom on .footer-brand (not the counter itself) puts a
     visibly bigger gap after the whole logo+counter block, before the
     footer links row that follows it in the stacked mobile layout. */
  .footer-brand { margin-bottom: 1.25rem; }
  .request-counter {
    display: block; white-space: normal;
    max-width: 260px; margin: 0 auto; text-align: center;
  }
  .request-counter-dot {
    display: inline-block; vertical-align: middle;
    margin-right: 0.4rem;
  }
}

/* MODALS */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,8,6,0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
  background: var(--panel);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 480px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  position: relative;
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-story { max-width: 600px; }
.modal-story .modal-title { margin-bottom: 1.5rem; }
.modal-legal h4 {
  font-size: 0.85rem; color: var(--cream); font-weight: 600;
  margin: 1.4rem 0 0.4rem;
}
.modal-legal h4:first-child { margin-top: 0; }
.modal-legal p {
  font-size: 0.82rem; color: var(--cream-dim); line-height: 1.6;
}
.modal-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: none; border: none;
  color: var(--muted); font-size: 1.3rem;
  cursor: pointer; transition: color 0.2s;
}

.modal-title {
  font-family: 'Mulish', sans-serif;
  font-size: 1.5rem; color: var(--white);
  margin-bottom: 0.5rem;
}
.modal-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 2rem; }
.form-input {
  width: 100%;
  background: rgba(26,20,16,0.055);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--cream);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  font-family: 'Mulish', sans-serif;
  margin-bottom: 1rem;
}
.form-input::placeholder { color: var(--muted); }
.form-input:focus { outline: none; border-color: var(--gold); }
.modal-divider { text-align: center; color: var(--muted); font-size: 0.8rem; margin: 1rem 0; }

/* LIGHTBOX (referencia képek teljes méretben) */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,8,6,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox-overlay img {
  max-width: 90vw; max-height: 85vh;
  width: auto; height: auto;
  display: block;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.lightbox-overlay.open img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none;
  color: #FDFCFA; font-size: 1.6rem;
  cursor: pointer; transition: color 0.2s;
  line-height: 1;
}

.plan-selector { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.plan-chip {
  flex: 1; padding: 0.75rem; border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: transparent; cursor: pointer;
  text-align: center; transition: all 0.2s;
}
.plan-chip.selected {
  border-color: var(--gold);
  background: rgba(29,53,87,0.1);
}
.plan-chip-name { font-size: 0.8rem; font-weight: 600; color: var(--cream); display: block; }
.plan-chip-price { font-size: 0.75rem; color: var(--muted); display: block; }
.plan-chip.selected .plan-chip-name { color: var(--gold); }

/* FORM FEEDBACK */
.form-success {
  background: rgba(76,175,122,0.15);
  border: 0.5px solid var(--success);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--success);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 1rem;
}
.form-error {
  background: rgba(226,75,74,0.15);
  border: 0.5px solid #E24B4A;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: #E24B4A;
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.5rem;
}

/* DESIGN REPORT */
.report-card {
  background: rgba(26,20,16,0.035);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-bottom: 0.75rem;
}
.report-card-muted { opacity: 0.8; }
.report-card-header {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 0.5px solid var(--border);
}
.report-card-icon { font-size: 1.1rem; }
.report-card-title {
  font-family: 'Mulish', sans-serif;
  font-size: 0.95rem; color: var(--white); font-weight: 600;
}
.report-text {
  font-size: 0.85rem; color: var(--cream-dim);
  line-height: 1.75;
}
.report-text-accent {
  color: var(--cream);
  font-style: italic;
  border-left: 2px solid var(--gold);
  padding-left: 0.75rem;
}
.report-tags {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-top: 0.6rem;
}
.report-tag {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  background: rgba(26,20,16,0.055);
  border: 0.5px solid var(--border);
  color: var(--cream-dim);
}
.report-tag-green { background: rgba(76,175,122,0.15); border-color: rgba(76,175,122,0.3); color: var(--success); font-weight: 600; }
.report-tag-orange { background: rgba(255,152,0,0.12); border-color: rgba(255,152,0,0.25); color: #FFB74D; font-weight: 600; }

.report-furniture-list { display: flex; flex-direction: column; gap: 0.75rem; }

.report-furniture-item {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(26,20,16,0.03);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.report-furn-main { display: flex; gap: 0.75rem; }

.report-furn-visual {
  width: 180px; height: 180px;
  border-radius: 8px; overflow: hidden;
  flex-shrink: 0; position: relative;
  background: rgba(26,20,16,0.055);
}
.report-furn-num {
  width: 180px; height: 180px; border-radius: 8px;
  background: rgba(29,53,87,0.15); color: var(--gold);
  font-size: 1.2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.report-furn-illus {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(26,20,16,0.62); color: #fff;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  line-height: 1.5; pointer-events: none;
}
.report-furn-type-icon { background: rgba(29,53,87,0.08); }
.hero-ui .report-furn-type-icon svg { width: 32px; height: 32px; }
.report-furn-visual img {
  /* contain (not cover) — the box is a fixed max area, but the whole
     photo must stay visible; any mismatch in aspect ratio leaves empty
     space on the sides or top/bottom instead of cropping the furniture. */
  width: 100%; height: 100%; object-fit: contain; display: block;
}

.report-furn-content { flex: 1; min-width: 0; }
.report-furn-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0.5rem; margin-bottom: 0.5rem;
}
.report-furn-category {
  font-size: 0.65rem; font-weight: 600; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
}
.report-furn-name {
  font-size: 0.85rem; color: var(--cream); font-weight: 500;
}
.report-furn-store {
  font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem;
}

.report-furn-price {
  font-size: 0.95rem; font-weight: 700; color: var(--gold);
  white-space: nowrap;
}
/* Bútorvilág publishes no prices, so this slot carries "Ár: érdeklődjön"
   instead of a number (see priceCellHtml in app.js). Quieter and smaller than
   a real price — it is an instruction, not a figure to compare. */
.report-furn-price-ask {
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  background: var(--panel); border: 0.5px solid var(--border);
  border-radius: 999px; padding: 0.2rem 0.6rem;
}

/* Product-page link — a full-width footer button on its own row, kept off
   the photo (an overlay would cover part of the product) and off the price
   (which stays scannable up top instead of sharing a cramped corner). A
   full-width bar is also an easier tap target on mobile than a small
   corner badge, and carries a text label since a bare icon isn't reliably
   understood by every shopper (no hover tooltip on mobile to explain it).
   Also gives the PDF export a small, precise target to turn into a real
   link annotation, instead of the whole card being one giant clickable
   area. */
.report-furn-link-icon {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0.55rem;
  background: var(--gold-button); color: #fff;
  border-radius: 8px;
  font-size: 0.78rem; font-weight: 700;
  transition: background 0.15s;
}

.report-furn-link-icon svg { width: 13px; height: 13px; flex-shrink: 0; display: block; }
.report-furn-detail {
  font-size: 0.78rem; color: var(--cream-dim);
  line-height: 1.6; margin-top: 0.3rem;
}
.report-furn-detail strong { color: var(--cream); font-weight: 500; }

.report-total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border-strong);
  margin-top: 1rem; padding-top: 0.75rem;
}
.report-total-label { font-size: 0.9rem; color: var(--cream); font-weight: 500; }
.report-total-price {
  font-family: 'Mulish', sans-serif;
  font-size: 1.5rem; color: var(--gold); font-weight: 600;
}

.report-tips {
  list-style: none; display: flex; flex-direction: column; gap: 0.5rem;
}
.report-tips li {
  font-size: 0.82rem; color: var(--cream-dim); line-height: 1.7;
  padding-left: 1.2rem; position: relative;
}
.report-tips li::before {
  content: "→"; position: absolute; left: 0;
  color: var(--gold); font-weight: 600;
}

.report-stores {
  font-size: 0.75rem; color: var(--muted);
  display: flex; flex-direction: column; gap: 0.25rem;
}

/* RESPONSIVE */
/* Nav collapses to the hamburger menu earlier than the rest of the
   mobile layout — with 7 links plus the email button, the full nav
   row starts crowding/wrapping well above the 900px content breakpoint. */
@media (max-width: 1250px) {
  .hamburger { display: flex; }
  /* backdrop-filter on nav itself would make it the containing block for
     the fixed-position mobile menu below, clipping it to the navbar's own
     height instead of the full viewport. Painting the blur on a pseudo-
     element instead keeps the frosted header on mobile: ::before has no
     fixed descendants of its own, and .nav-links is its sibling rather
     than its child, so the containing block is unaffected. */
  nav { backdrop-filter: none; background: transparent; }
  nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(250,249,246,0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .nav-links {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    /* Solid, not translucent, so the dark links stay readable regardless
       of whatever's behind it. */
    background: #FFFFFF;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 2rem;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    z-index: 99;
    /* On short viewports the link list + email button can be taller
       than the screen. justify-content:center would leave the top
       items unreachable once scrolling is needed (a well-known flexbox
       centering quirk), so the menu top-aligns and scrolls instead,
       with padding to clear the fixed nav bar above. */
    overflow-y: auto;
    padding: 6rem 1.5rem 3rem;
  }
  .nav-links.open {
    opacity: 1; pointer-events: auto;
  }
  .nav-links a { font-size: 1.2rem; display: block; }
  .nav-links .btn-nav { font-size: 1.1rem; padding: 0.8rem 2rem; white-space: nowrap; }

  nav { padding: 0.35rem 1.5rem; }
  .nav-left { gap: 0.6rem; }
}

@media (max-width: 900px) {
  .contact-btn { min-height: 86px; }
  .hero { padding: 7rem 1.5rem 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-sub { max-width: 100%; }

  /* Hero result mockup: it's a decorative preview, not real content, so
     keep it compact on mobile — small row-style thumbnails instead of
     full-width photo blocks, and drop the 3rd item so it doesn't push
     the rest of the page far down the screen. */
  .hero-ui .report-furniture-item { flex-direction: row; }
  .hero-ui .report-furn-visual,
  .hero-ui .report-furn-num { width: 56px; height: 56px; aspect-ratio: auto; }
  .hero-ui .report-furniture-item:nth-child(3) { display: none; }

  /* AI designer window: reaches the screen edges on mobile (no gap from
     the section's own padding), for both the text-search and the
     photo-designer tool — but keeps its rounded corners, which now sit
     flush against the viewport edge. Stop the grid column from being
     forced wider than the viewport by its content (which was clipping
     the form controls on the right). */
  .app-section { padding: 7rem 1rem 3rem; }
  .app-ui {
    margin-left: -1rem; margin-right: -1rem;
    border-left: none; border-right: none;
  }
  .app-left, .app-right { padding: 1.25rem; min-width: 0; }

  /* Result panel: full-width photo, and furniture cards stack instead
     of a cramped side-by-side row that left almost no room for text. */
  .result-img-compact { width: 100%; }
  .report-furn-main { flex-direction: column; }
  .report-furn-visual { width: 100%; height: auto; aspect-ratio: 4/3; }
  .report-furn-num { width: 100%; height: 100%; aspect-ratio: 4/3; }

  /* A long "2× 67 860 Ft = 135 720 Ft"-style price (shown when quantity > 1)
     doesn't fit next to the category/name column on a narrow screen — the
     column was shrinking to a sliver and its text wrapped into a jumbled
     one-word-per-line mess right underneath the price. Stack the price on
     its own line below instead of squeezing them side by side. */
  .report-furn-top { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .report-furn-price { white-space: normal; }

  .steps-grid { grid-template-columns: 1fr; }
  .studio-callout { padding: 1.5rem; }
  .studio-callout-top { flex-direction: column; text-align: center; }
  .studio-callout .btn-primary { width: 100%; justify-content: center; }
  .studio-callout-gallery { flex-wrap: wrap; }
  .studio-callout-gallery img { flex: 1 1 calc(50% - 0.375rem); min-width: 100px; height: 140px; }

  .upload-zone { padding: 2rem 1rem; }

  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
  .testi-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }

  .trust-strip { gap: 1.5rem; padding: 1.2rem 1rem; }
  .trust-item { font-size: 0.78rem; }

  footer { padding: 2rem 1.5rem; }
  .footer-main { flex-direction: column; text-align: center; }
  .footer-brand { align-items: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.8rem; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width: 100%; text-align: center; justify-content: center; }
  .plan-selector { flex-direction: column; }
}

/* GALLERY (látványterv referenciák) */
.gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem; margin-top: 3rem;
}
.gallery-item {
  background: var(--panel);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch;
  transition: transform 0.2s, border-color 0.2s;
}

.gallery-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  display: block; cursor: zoom-in; flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}

.gallery-caption {
  padding: 1.1rem 1.3rem;
  font-size: 0.9rem; color: var(--cream-dim);
}
.gallery-caption strong { display: block; color: var(--cream); font-weight: 500; margin-bottom: 0.2rem; }

@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  #referenciak { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ---- PDF EXPORT (print) — AI design report ---- */
.print-only { display: none; }
.report-print-header {
  padding-bottom: 1rem; margin-bottom: 1.5rem;
  border-bottom: 2px solid #1D3557;
}
.report-print-header .print-logo-row {
  display: flex; align-items: center; gap: 0.5rem;
}
.report-print-header .print-store-logo {
  height: 40px; width: auto; display: block;
}
.report-print-header .print-tagline {
  font-family: 'Mulish', sans-serif; font-style: italic;
  font-size: 1rem; color: #666666;
  margin-left: 0.6rem; padding-left: 0.6rem;
  border-left: 1px solid #d9d9d9;
}
.report-print-header .print-date {
  font-size: 0.8rem; color: #6b6b6b; margin-top: 0.3rem;
}
.report-print-header .print-photo {
  /* A shrunk-but-uncropped <img> would need object-fit:contain, which
     html2canvas doesn't support (it just stretches the image to fill the
     box — see the old comment this replaced). A background-image div with
     background-size:contain scales correctly under html2canvas instead:
     the whole photo stays visible, shrunk to fit within a box capped at
     roughly the top third of an A4 page, with empty space (not cropping)
     taking up any leftover room. background-repeat:no-repeat is required
     here — without it, that leftover room would tile the photo instead of
     staying blank. */
  display: block; width: 100%; height: 90mm;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border-radius: 8px; margin-top: 1rem;
}

/* Applied to an off-screen clone of #furnitureList that gets rasterized by
   html2pdf (see exportItemsToPdf in app.js) — this replaced window.print(),
   which opened a print dialog on desktop and, on iOS Safari, both mis-paginated
   flex layouts and required manual "Save PDF" steps instead of downloading. */
.pdf-export.no-print,
.pdf-export .no-print {
  display: none !important;
}
.pdf-export {
  /* Deliberately NO position/z-index override here. html2canvas has two
     separate bugs that both produce a "successfully sized but blank" (or
     zero-height) canvas: (1) it mis-paints elements that sit far down a
     long document, which #furnitureList does — thousands of pixels down
     this page — and (2) it mis-measures position:absolute/fixed elements
     as zero-height, regardless of offset. The only combination that
     reliably works is a plain static-flow element inserted at the very
     top of <body>. exportItemsToPdf() in app.js does that (and covers
     the resulting layout jump with a full-screen loading overlay) rather
     than this CSS trying to reposition it. */
  display: block !important;
  background: #fff !important;
  color: #1A1410 !important;
  width: 700px !important;
  max-width: 700px !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  border: none !important;
  box-shadow: none !important;
}
/* Full-screen cover shown while exportItemsToPdf() briefly inserts the
   .pdf-export clone at the top of <body> (see the comment above) — without
   this the page would visibly jump as that block appears and disappears. */
.pdf-loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  font-family: 'Mulish', sans-serif; color: var(--cream-dim); font-size: 0.9rem;
}
.pdf-loading-overlay .spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: pdf-spin 0.8s linear infinite;
}
@keyframes pdf-spin { to { transform: rotate(360deg); } }

.pdf-export .print-only { display: block; }
.pdf-export .report-card {
  background: #fff !important;
  border: 1px solid #ddd !important;
  box-shadow: none !important;
  color: #1A1410 !important;
}
.pdf-export .report-text,
.pdf-export .report-furn-name,
.pdf-export .report-furn-detail,
.pdf-export .report-tips li {
  color: #1A1410 !important;
}
/* html2canvas doesn't reliably resolve CSS custom properties (var(...)) —
   every other .pdf-export override above already hardcodes literal colors
   for exactly this reason. This button relied on var(--gold-button) /
   var(--gold-light), which is why it rasterized washed-out instead of the
   real brand navy. */
.pdf-export .report-furn-link-icon {
  background: #1D3557 !important;
  color: #fff !important;
}

/* Deliberately no block+float or break-inside overrides here (an earlier
   attempt tried both to keep cards from splitting across a page — first to
   dodge WebKit's native print-engine bug, moot now that export goes through
   html2canvas/html2pdf instead of window.print(); then via html2pdf's own
   "avoid break" page-break modes, which measured floated elements' height
   wrong and, worse, turned out unpredictable even without floats — the same
   8-item report scored anywhere from 3 to 8 pages across runs. exportItemsToPdf()
   in app.js now uses plain 'legacy' pagination instead: a card can
   occasionally get cut mid-box, but page count is a deterministic division
   of content height, so nothing is ever silently dropped. Plain flex (the
   base, non-.pdf-export rules already above) is what's rendered either way. */

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: var(--bg);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10000;
}
.toast.toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Touch devices have no real "mouse leave" — tapping a button applies its
   :hover style (iOS Safari in particular keeps it applied) with nothing to
   ever clear it, so every button looked "stuck" in its hover state after a
   tap until something else on the page was touched. Restricting :hover to
   devices that report actual hover capability fixes this without touching
   tap/active feedback (which mobile browsers already handle natively). */
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--gold); }
  .btn-nav:hover { background: var(--gold-dim); transform: translateY(-1px); }
  .hero-photo .btn-ghost:hover { border-color: var(--accent-warm); color: var(--accent-warm); }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(29,53,87,0.25); }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
  .step:hover { background: var(--panel-alt); }
  .quote-card:hover { background: var(--panel-alt); transform: translateY(-4px); }
  .choice-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  }
  .back-to-choice:hover { color: var(--gold); }
  .upload-zone:hover {
    border-color: var(--gold);
    background: #F5F5F5;
  }
  .btn-generate:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(29,53,87,0.3); }
  .btn-generate.is-loading:hover { transform: none; box-shadow: none; }
  .btn-retry:hover { border-color: var(--gold); }
  .furn-name a:hover { color: var(--gold); text-decoration: underline; }
  .furn-store a:hover { text-decoration: underline; }
  .plan:hover { transform: translateY(-4px); }
  .btn-plan-outline:hover { border-color: var(--gold); color: var(--gold); }
  .btn-plan-solid:hover { background: var(--gold-light); box-shadow: 0 6px 20px rgba(29,53,87,0.3); }
  .footer-links a:hover { color: #fff; }
  .modal-close:hover { color: var(--cream); }
  .lightbox-close:hover { color: var(--accent-warm); }
  .plan-chip:hover { border-color: var(--gold); background: rgba(29,53,87,0.1); }
  .report-furniture-item:hover { border-color: var(--border-strong); }
  .report-furn-link-icon:hover { background: var(--gold-light); }
  .gallery-item:hover { transform: translateY(-4px); border-color: var(--border-strong); }
  .gallery-item:hover img { transform: scale(1.06); }
}


/* Headings in Poppins, the display face butorvilagpecs.hu uses itself
   (body text is Mulish, also theirs). */
.hero-title, .section-title, .choice-title, .modal-title, .result-title, .upload-title,
.report-title, .studio-callout-text strong {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

/* ===================================================================
   SHOPPING LIST + the card changes that go with it
   ===================================================================
   Bútorvilág publishes no prices and has no webshop checkout, so the card
   no longer carries a price slot, a room-category eyebrow or a store name
   (every product on this tool is theirs — saying so 12 times is noise).
   What is left is what a shopper actually needs: a big photo, the name,
   the size, the colour options, why it was picked, and one action. */

/* Bigger product photo — it is the main thing being judged, and at 180px
   a sofa's shape and fabric were hard to read. */
.report-furn-visual,
.report-furn-num {
  width: 260px; height: 230px;
}

.report-furn-size {
  font-size: 0.76rem; color: var(--cream-dim);
  margin-top: 0.3rem; line-height: 1.5;
}
.report-furn-size .dim-key { color: var(--muted); font-size: 0.72rem; }

/* Colour/finish variants. Deliberately loud-ish (tinted pill, not grey
   small print): the photo shows ONE decor, and a shopper who does not read
   this line will believe it is the only one. */
.report-furn-variants {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.45rem; padding: 0.25rem 0.6rem;
  background: rgba(212,163,115,0.16);
  border: 0.5px solid rgba(212,163,115,0.5);
  border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; color: #8A5A28;
  line-height: 1.45;
}
.report-furn-variants .ic { background: #8A5A28; width: 13px; height: 13px; }

/* The product page is still one click away, but as a quiet text link — the
   primary action on the card is now adding to the list. */
.report-furn-pagelink {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.74rem; font-weight: 600; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid rgba(29,53,87,0.25);
}

.report-furn-add {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  width: 100%; padding: 0.6rem;
  background: var(--gold-button); color: #fff;
  border: 1px solid var(--gold-button); border-radius: 8px;
  font-family: 'Mulish', sans-serif;
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.report-furn-add .add-ic { font-size: 0.95rem; line-height: 1; }
/* Already on the list: flips to a quiet "done" state that still reads as a
   button, because clicking it again removes the item. */
.report-furn-add.is-on {
  background: transparent; color: var(--gold);
  border-color: var(--border-strong);
}

.shopping-list-body { padding: 1.25rem; }
.shopping-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.shopping-list-title {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.95rem; font-weight: 700; color: var(--cream);
}
.shopping-list-title .ic { background: var(--gold); width: 17px; height: 17px; }
.shopping-list-foot {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 0.5px solid var(--border);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.shopping-list-note {
  font-size: 0.78rem; color: var(--cream-dim); line-height: 1.6;
}

/* Stacking the card on a narrow screen is already handled by the shared
   @media (max-width: 900px) block further up (it also switches the photo to a
   full-width 4/3 box, which is why no width/height is repeated here — a second
   rule would fight that aspect-ratio). Only the list header needs its own. */
@media (max-width: 640px) {
  .shopping-list-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* The hand-written product description (see butorvilag-descriptions.json).
   Set slightly apart from the AI's own reasoning below it, because this text
   describes the product itself and is the same whoever is looking at it. */
.report-furn-desc {
  font-size: 0.78rem; color: var(--cream-dim);
  line-height: 1.65; margin-top: 0.5rem;
  padding-left: 0.65rem; border-left: 2px solid var(--border);
}


/* "— nem kötelező" next to a field label: present but clearly secondary, so
   the optional room-size input doesn't read as another thing you must fill in. */
.form-label-opt { font-weight: 400; color: var(--muted); font-size: 0.78rem; }