/* ==========================================================================
   SpezArt.eu — hand-written vanilla CSS (replaces Tailwind build)
   Theme: obsidian #0a0a0a · charcoal #111111 · gold #c5a059 · ivory #f5f0e6
   ========================================================================== */

:root {
  --obsidian: #0a0a0a;
  --charcoal: #111111;
  --charcoal-2: #181818;
  --gold: #c5a059;
  --gold-soft: #d4b97a;
  --gold-deep: #9e7f3f;
  --ivory: #f5f0e6;
  --muted: #9a938a;
  --line: rgba(197, 160, 89, 0.25);
  --danger: #c46a5a;
  --ok: #7fae7a;
  /* Výška lepiacej hlavičky — návrhová hodnota, ktorá RIADI výšku hlavičky. */
  --header-h: 64px;
  /* Nameraná výška tej istej hlavičky, ktorú zapisuje storefront.js. Sú to
     zámerne dve premenné, nie jedna: keby si hlavička riadila výšku podľa toho,
     čo sa na nej nameralo, každé meranie by k nej pripočítalo jej vlastný
     spodný okraj, ResizeObserver by sa spustil znova a hlavička by rástla,
     kým je stránka otvorená. Táto premenná preto smie ovplyvňovať len to, kam
     dopadne skok na kotvu — nikdy nie rozmer, z ktorého sa počíta. */
  --header-measured: 64px;
  --gold-glow: 0 0 24px rgba(197, 160, 89, 0.25);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --script: 'Great Vibes', 'Segoe Script', cursive;
  /* derived per layout in _header.php; these are the dark-theme defaults */
  --header-bg: rgba(10, 10, 10, 0.92);
  --logo-hi: #f4ecdb;
  --scrim-rgb: 10, 10, 10;
  /* Global look settings from the layout editor */
  --shell-max: 1200px;
  --radius: 3px;
  --section-pad: 48px;
  --btn-radius: 2px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
body {
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); letter-spacing: 0.01em; font-weight: 600; }
a { color: var(--gold-soft); text-decoration: none; }
a:hover { color: var(--gold); }
img { max-width: 100%; display: block; }
code { color: var(--gold-soft); background: rgba(197,160,89,.08); padding: 0 4px; border-radius: 3px; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.shell { max-width: var(--shell-max, 1200px); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.section-pad { padding: var(--section-pad, 48px) 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.count { color: var(--muted); font-size: 14px; margin-left: 12px; font-family: var(--sans); }

/* --- Buttons & forms ------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--gold);
  border-radius: var(--btn-radius, 2px);
  background: transparent;
  color: var(--gold-soft);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .18s ease;
}
.btn:hover { box-shadow: var(--gold-glow); color: var(--gold); }
.btn-gold { background: var(--gold); color: #14100a; }
.btn-gold:hover { background: var(--gold-soft); color: #14100a; }
.btn-outline { background: transparent; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-small { padding: 6px 12px; font-size: 11px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

label { display: block; margin: 12px 0; font-size: 13px; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], textarea, select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--charcoal);
  border: 1px solid rgba(197,160,89,.2);
  border-radius: 2px;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 14px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(197,160,89,.15);
}
.form-status { display: inline-block; margin: 8px 0 0; font-size: 13px; color: var(--gold-soft); }
.form-status.error { color: var(--danger); }
.form-status.ok { color: var(--ok); }
.notice {
  padding: 10px 14px; border: 1px solid var(--line);
  border-left: 3px solid var(--gold); background: rgba(197,160,89,.06);
  font-size: 13px;
}
.panel {
  background: var(--charcoal);
  border: 1px solid rgba(197,160,89,.15);
  border-radius: 3px;
  padding: 24px;
}

/* --- Header ---------------------------------------------------------------- */
/* Hlavička sa lepí na vrch, takže skok na kotvu (#piece-panel, #specs, otázka
   vo FAQ…) dopadol pod ňu a prvých 64 pixelov cieľa nebolo vidieť — pri karte
   kusu presne tie, na ktorých stoja karty Popis / Parametre / Otázky.
   `scroll-padding-top` na koreni to rieši pre KAŽDÚ kotvu naraz, nie pre tú
   jednu, ktorej si niekto všimol. Hodnota je výška hlavičky plus medzera, aby
   cieľ nezačínal presne na jej hrane. */
html {
  scroll-padding-top: calc(var(--header-measured, 64px) + 12px);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h, 64px); }
.brand {
  font-family: var(--sans); font-weight: 600; letter-spacing: .22em;
  font-size: 14px; color: var(--ivory); white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
}
.brand em { color: var(--gold); font-style: normal; }
.brand-mark { color: var(--gold); margin-right: 6px; }
.brand-script {
  font-family: var(--script);
  font-size: 30px; font-weight: 400; letter-spacing: .02em;
  background: linear-gradient(100deg, var(--logo-hi) 10%, var(--gold-soft) 45%, var(--logo-hi) 70%, var(--gold) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-soft);
}
.brand-image { max-height: 44px; width: auto; display: block; }
.brand-sub {
  font-size: 8.5px; letter-spacing: .38em; text-transform: uppercase;
  color: var(--muted); margin: -2px 0 0 4px;
}
.main-nav { display: flex; gap: 22px; flex: 1; }
.main-nav a {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory);
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.main-nav a:hover { color: var(--gold-soft); border-bottom-color: var(--gold); }
.header-controls { display: flex; align-items: center; gap: 10px; }
.header-controls select {
  width: auto; margin: 0; padding: 6px 8px; font-size: 12px;
  background: var(--obsidian);
}
.cart-button {
  position: relative; background: none; border: 1px solid var(--line);
  border-radius: 2px; color: var(--gold-soft); padding: 7px 12px; cursor: pointer;
  font-size: 15px;
}
.cart-button:hover { box-shadow: var(--gold-glow); }
.cart-count {
  position: absolute; top: -7px; right: -7px;
  background: var(--gold); color: #14100a; border-radius: 50%;
  font-size: 10px; font-weight: 700; min-width: 17px; height: 17px;
  line-height: 17px; text-align: center;
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  padding: 110px 0 90px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(197,160,89,.12), transparent),
    var(--obsidian);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero-eyebrow { letter-spacing: .35em; font-size: 11px; color: var(--gold); }
.hero-title { font-size: clamp(42px, 7vw, 72px); margin: 12px 0 8px; }
.hero-subtitle { color: var(--muted); max-width: 560px; margin: 0 auto 32px; font-size: 16px; }

/* --- Photo hero (SpezArt) --------------------------------------------------- */
.hero-photo {
  position: relative; overflow: hidden;
  min-height: clamp(520px, 82vh, 780px);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 62%;
  background-repeat: no-repeat;
  transform: scale(1.06);
  animation: heroDrift 18s ease-out forwards;
}
/* Height / alignment / image fit — all driven by the layout editor. */
.hero-compact { min-height: clamp(300px, 46vh, 460px); }
.hero-tall    { min-height: clamp(520px, 82vh, 780px); }
.hero-full    { min-height: 100vh; }
.hero-align-center .hero-content { text-align: center; }
.hero-align-center .hero-ctas { justify-content: center; }
.hero-align-center .hero-photo .hero-subtitle,
.hero-align-center .hero-subtitle { margin-left: auto; margin-right: auto; }
/* A banner that carries its own artwork must be shown whole, so contain also
   drops the slow zoom that would crop its edges. */
.hero-fit-contain .hero-bg {
  background-size: contain; background-position: center center;
  transform: none; animation: none;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(var(--scrim-rgb), .94) 0%, rgba(var(--scrim-rgb), .78) 34%, rgba(var(--scrim-rgb), .30) 62%, rgba(var(--scrim-rgb), .55) 100%),
    linear-gradient(to top, rgba(var(--scrim-rgb), .92) 0%, transparent 32%);
}
.hero-content { position: relative; z-index: 1; width: 100%; }
.hero-photo .hero-subtitle { margin: 6px 0 30px; max-width: 520px; font-size: 17px; color: var(--ivory); opacity: .82; }
.hero-logo {
  font-family: var(--script); font-weight: 400;
  font-size: clamp(72px, 12vw, 132px);
  line-height: 1.05; margin: 6px 0 4px; padding-right: .18em;
  background: linear-gradient(100deg, var(--logo-hi) 8%, var(--gold-soft) 38%, var(--logo-hi) 58%, var(--gold) 88%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-soft);
  filter: drop-shadow(0 3px 18px rgba(0,0,0,.55));
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(245,240,230,.35); color: var(--ivory);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); }

/* Entrance reveal (respects reduced-motion) */
.reveal { opacity: 0; transform: translateY(18px); animation: fadeUp .8s ease forwards; }
.reveal:nth-child(2) { animation-delay: .12s; }
.reveal:nth-child(3) { animation-delay: .24s; }
.reveal:nth-child(4) { animation-delay: .36s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes heroDrift { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .hero-bg { animation: none; transform: none; }
}

/* --- Collection tiles -------------------------------------------------------- */
/* Tiles auto-fit, so "size" sets how small a tile may get before the row
   wraps — a category count no longer forces four huge panels. */
.cat-tiles {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(var(--cat-min, 230px), 1fr));
}
.cat-small  { --cat-min: 170px; gap: 12px; }
.cat-medium { --cat-min: 230px; }
.cat-large  { --cat-min: 320px; gap: 20px; }
.cat-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius, 3px);
  background: var(--charcoal); border: 1px solid rgba(197,160,89,.14);
  color: var(--ivory);
}
.cat-tile-media { position: relative; display: block; aspect-ratio: var(--cat-ratio, 4/5); overflow: hidden; }
.cat-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease, filter .5s ease;
  filter: saturate(.92) brightness(.9);
}
.cat-tile-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--scrim-rgb), .85) 0%, rgba(var(--scrim-rgb), .15) 45%, transparent 70%);
  transition: background .3s ease;
}
/* Caption under the photo needs no scrim — and the blurb stays readable. */
.cat-below .cat-tile-media::after { display: none; }
.cat-tile:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1); }
.cat-tile:hover { border-color: rgba(197,160,89,.4); }
.cat-tile-label {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.cat-tile-name {
  font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ivory);
  line-height: 1.2;
}
.cat-small .cat-tile-name { font-size: 17px; }
.cat-large .cat-tile-name { font-size: 25px; }
.cat-tile-count {
  font-size: 11px; letter-spacing: .1em; color: var(--gold-soft);
  border: 1px solid rgba(197,160,89,.4); border-radius: 999px; padding: 2px 9px;
  background: rgba(var(--scrim-rgb), .5); backdrop-filter: blur(4px);
  flex: none;
}
/* Text block: overlay tiles show only the blurb, "below" tiles the whole caption. */
.cat-tile-body { display: block; padding: 12px 14px 14px; }
.cat-below .cat-tile-label { position: static; padding: 0 0 4px; }
.cat-below .cat-tile-count { background: transparent; backdrop-filter: none; }
.cat-tile-text {
  display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  /* Clamp so one long description cannot make its tile taller than the row. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-small .cat-tile-text { font-size: 11.5px; -webkit-line-clamp: 2; }
@media (max-width: 600px) { .cat-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }




.gc-fields { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.gc-fields label { font-size: 12px; }
.gc-hint { display: block; font-size: 10.5px; color: #7d766a; margin-top: 3px; }
.gc-checks { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 6px; }
.gc-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; }
.gc-check input { width: auto; margin: 0; }
.grid-preview .product-card { pointer-events: none; }



/* --- Import wizard ----------------------------------------------------------- */
.wiz-steps { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.wiz-step {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--charcoal);
  color: var(--muted); font-size: 12.5px; transition: border-color .15s, color .15s;
}
.wiz-step:hover { border-color: var(--gold); color: var(--ivory); }
.wiz-step.is-active { border-color: var(--gold); color: var(--gold-soft); background: var(--charcoal-2); }
.wiz-step.is-done { color: var(--ok); border-color: rgba(127,174,122,.5); }
.wiz-num {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(197,160,89,.16); font-size: 11px; font-weight: 700; flex: none;
}
.wiz-step.is-done .wiz-num { background: rgba(127,174,122,.2); }
.wiz-step.is-done .wiz-num::after { content: "✓"; }
.wiz-step.is-done .wiz-num { font-size: 0; }
.wiz-step.is-done .wiz-num::after { font-size: 11px; }
.wiz-aside { opacity: .92; }

.wiz-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 26px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--charcoal);
}

.wiz-choices { display: grid; gap: 10px; margin-top: 12px; }
.wiz-choice {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 6px; background: rgba(10,10,10,.35);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.wiz-choice:hover { border-color: rgba(197,160,89,.5); }
.wiz-choice:has(input:checked) { border-color: var(--gold); background: var(--charcoal-2); }
.wiz-choice input[type="radio"] { width: auto; margin: 3px 0 0; flex: none; }
.wiz-choice-body { display: flex; flex-direction: column; gap: 3px; flex: 1; position: relative; }
.wiz-choice-body strong { color: var(--ivory); font-size: 14px; }
.wiz-count {
  position: absolute; right: 0; top: 0; color: var(--gold-soft);
  font-size: 13px; letter-spacing: .06em;
}
.wiz-date { max-width: 190px; margin-top: 6px; }

.wiz-summary { display: grid; gap: 2px; margin-bottom: 16px; }
.wiz-sum-row {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px;
  border-bottom: 1px solid rgba(197,160,89,.1); font-size: 13.5px; color: var(--muted);
}
.wiz-sum-row strong { color: var(--ivory); }

.wiz-gauge { height: 10px; background: rgba(197,160,89,.15); border-radius: 99px; overflow: hidden; }
.wiz-gauge-fill {
  height: 100%; width: 0; border-radius: 99px; transition: width .3s ease;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
}
.wiz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.wiz-tile {
  border: 1px solid var(--line); border-radius: 5px; padding: 12px;
  text-align: center; background: rgba(10,10,10,.4);
}
.wiz-tile span { display: block; font-family: var(--serif); font-size: 24px; color: var(--gold-soft); }
.wiz-tile small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* --- Grid vs row list (visitor's own choice) --------------------------------- */
.view-toggle { display: flex; gap: 4px; align-items: center; }
.view-btn {
  display: grid; place-items: center; width: 34px; height: 32px;
  border: 1px solid var(--line); border-radius: var(--radius, 3px);
  color: var(--muted); background: var(--charcoal); line-height: 0;
  transition: border-color .15s, color .15s;
}
.view-btn:hover { border-color: var(--gold); color: var(--gold-soft); }
.view-btn.is-active { border-color: var(--gold); color: var(--gold); background: var(--charcoal-2); }

/* One row per piece: the photo keeps its ratio at a fixed width, and the body
   gets the space it never has in a grid cell. Overrides the column count and
   auto-fit rules on purpose — a list is a list at any --cols. */
.product-grid.view-list,
.product-grid.grid-auto.view-list { grid-template-columns: 1fr; gap: 10px; }
.view-list .product-card {
  display: grid; grid-template-columns: minmax(96px, 168px) 1fr; align-items: stretch;
}
.view-list .card-media {
  border-radius: var(--card-radius, 3px) 0 0 var(--card-radius, 3px);
  aspect-ratio: var(--ratio, 3/4); height: 100%;
}
.view-list .card-body {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 14px 18px; text-align: left;
}
.view-list .card-title { font-size: 19px; -webkit-line-clamp: 2; }
.view-list .card-price { margin-top: 2px; font-size: 16px; }
/* Caption-over and centred text are grid ideas; a row ignores both. */
.view-list .product-card.card-over .card-body { position: static; background: none; }
.view-list .card-scrim { display: none; }
@media (max-width: 560px) {
  .view-list .product-card { grid-template-columns: 96px 1fr; }
  .view-list .card-title { font-size: 15px; }
}



/* --- Výber rozloženia v konzole ---------------------------------------------
   Šesť názvov v roletke človeku nepovie nič, kým každý nevyskúša. Náčrt áno. */
.lay-pick {
  display: grid; gap: 8px; margin: 4px 0 10px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.lay-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 8px; cursor: pointer;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10); border-radius: 6px;
  color: var(--muted); font: inherit; font-size: 11px; letter-spacing: .04em;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lay-tile svg { width: 100%; height: auto; max-width: 62px; }
/* Náčrt je z obdĺžnikov: vyplnené sú „fotky", tenké čiary „text". */
.lay-tile svg rect, .lay-tile svg path {
  fill: rgba(197,160,89,.28); stroke: rgba(197,160,89,.55); stroke-width: 1;
}
.lay-tile:hover { border-color: rgba(197,160,89,.45); color: var(--gold-soft); }
.lay-tile.is-on {
  border-color: var(--gold); color: var(--gold);
  background: rgba(197,160,89,.10);
}
.lay-tile.is-on svg rect, .lay-tile.is-on svg path {
  fill: rgba(197,160,89,.55); stroke: var(--gold);
}
.lay-pick-note { margin: 0 0 12px; min-height: 2.6em; max-width: 52ch; }
/* Doladenie sa ukazuje len k vybranému rozloženiu — inak je to šum. */
.lay-opts { margin-bottom: 10px; }
.lay-opts[hidden] { display: none; }

/* --- Rozloženia katalógu (gridSettings.layoutMode) --------------------------
   Mriežka je predvoľba a nemá vlastné pravidlá — je to základ hore. Ostatné
   menia len usporiadanie; karta zostáva tá istá, takže sa všetko, čo operátor
   nastavil (rám, zaoblenie, počet riadkov názvu), prenáša do každého z nich.

   Návštevnícky prepínač `view-list` má prednosť pred všetkými — kto si vyžiada
   zoznam, dostane zoznam bez ohľadu na to, čo je nastavené v konzole. */

/* MURIVO — stĺpce, do ktorých karty padajú podľa svojej výšky. Hodí sa, keď
   majú fotky rôzny pomer strán; pri rovnakých vyzerá ako mriežka, čo je
   správne — nemá čo predstierať. */
.product-grid.lay-murivo,
.product-grid.grid-auto.lay-murivo {
  display: block;
  column-count: var(--cols, 3);
  column-gap: var(--pad, 16px);
}
.lay-murivo .product-card {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--pad, 16px);
}
.lay-murivo .card-media { aspect-ratio: auto; height: auto; }
.lay-murivo .card-media img { height: auto; object-fit: contain; }

/* MOZAIKA — prvý kus dostane štvornásobnú plochu a každý siedmy sa roztiahne
   do šírky. Pravidelná mriežka je pokojná, ale nič v nej nevystupuje; toto
   dáva stránke ohnisko bez toho, aby operátor musel niečo vyberať. */
.product-grid.lay-mozaika { grid-auto-flow: dense; }
.lay-mozaika .product-card:first-child {
  grid-column: span var(--hero-cols, 2);
  grid-row: span var(--hero-rows, 2);
}
/* Vedúci kus je širší než vysoký alebo naopak — fotka sa tomu prispôsobí,
   inak by sa v bunke buď natiahla, alebo nechala pol plochy prázdnu. */
.lay-mozaika .product-card:first-child .card-media {
  aspect-ratio: calc(var(--hero-cols, 2) / var(--hero-rows, 2));
}
.lay-mozaika .product-card:first-child .card-title { font-size: clamp(20px, 2.4vw, 30px); }
.lay-mozaika .product-card:first-child .card-price { font-size: 19px; }
/* Rytmus širokých kusov. `nth-child` premennú neprijme, tak rozhoduje trieda. */
.lay-mozaika.he-5 .product-card:nth-child(5n + 3),
.lay-mozaika.he-7 .product-card:nth-child(7n + 4),
.lay-mozaika.he-9 .product-card:nth-child(9n + 5) { grid-column: span 2; }
.lay-mozaika.he-5 .product-card:nth-child(5n + 3) .card-media,
.lay-mozaika.he-7 .product-card:nth-child(7n + 4) .card-media,
.lay-mozaika.he-9 .product-card:nth-child(9n + 5) .card-media { aspect-ratio: 16 / 9; }
@media (max-width: 700px) {
  .lay-mozaika .product-card:first-child,
  .lay-mozaika .product-card { grid-column: span 1; grid-row: span 1; }
  .lay-mozaika .product-card .card-media { aspect-ratio: var(--ratio, 3/4); }
}

/* VLNOVKA — jeden kus na riadok, fotka striedavo vľavo a vpravo. Najviac
   miesta pre text zo všetkých rozložení: pri tovare, ktorý treba vysvetliť,
   je názov a cena málo. */
.product-grid.lay-vlnovka,
.product-grid.grid-auto.lay-vlnovka {
  grid-template-columns: 1fr;
  gap: calc(var(--pad, 16px) * 1.75);
}
.lay-vlnovka .product-card {
  display: grid;
  grid-template-columns: minmax(0, var(--zig-foto, 50fr)) minmax(0, var(--zig-text, 50fr));
  align-items: center;
}
.lay-vlnovka .card-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--card-radius, 3px) 0 0 var(--card-radius, 3px);
}
.lay-vlnovka .card-body { padding: clamp(16px, 3vw, 40px); text-align: left; }
.lay-vlnovka .card-title { font-size: clamp(19px, 2.2vw, 28px); -webkit-line-clamp: 3; }
.lay-vlnovka .card-price { font-size: 18px; margin-top: 12px; }
/* Párne karty sa otočia — fotka ide doprava. */
.lay-vlnovka .product-card:nth-child(even) .card-media {
  order: 2;
  border-radius: 0 var(--card-radius, 3px) var(--card-radius, 3px) 0;
}
.lay-vlnovka .product-card:nth-child(even) .card-body { order: 1; }
/* Popisok cez fotku a stred textu sú nápady z mriežky; riadok ich ignoruje. */
.lay-vlnovka .product-card.card-over .card-body { position: static; background: none; }
.lay-vlnovka .card-scrim { display: none; }
@media (max-width: 720px) {
  .lay-vlnovka .product-card { grid-template-columns: 1fr; }
  .lay-vlnovka .product-card .card-media,
  .lay-vlnovka .product-card:nth-child(even) .card-media {
    order: 0; aspect-ratio: 16 / 9;
    border-radius: var(--card-radius, 3px) var(--card-radius, 3px) 0 0;
  }
  .lay-vlnovka .product-card:nth-child(even) .card-body { order: 1; }
}

/* POLICA — jeden vodorovný pás, ktorý sa posúva. Neukazuje všetko naraz,
   zato pozve prezerať; karty zapadajú na miesto (scroll-snap), aby sa pás
   nezastavil uprostred kusa. */
.product-grid.lay-polica,
.product-grid.grid-auto.lay-polica {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.lay-polica .product-card {
  flex: 0 0 var(--shelf-card, 260px);
  scroll-snap-align: start;
}
.lay-polica::-webkit-scrollbar { height: 8px; }
.lay-polica::-webkit-scrollbar-thumb { background: rgba(197,160,89,.35); border-radius: 4px; }

/* PLAGÁTY — steny obrazov bez medzier, názov až cez fotku. Najtichšie
   rozhranie z celej ponuky: nevidno karty, len tovar. */
.product-grid.lay-plagaty { gap: var(--poster-gap, 2px); }
/* Vyššia špecifickosť zámerne: štýl karty (napr. sklo) nastavuje rámik
   neskôr v súbore a plagátom by ho vrátil. Stena obrazov nemá mať rámy. */
.product-grid.lay-plagaty .product-card {
  border-color: transparent; border-radius: 0; position: relative; background: transparent;
}
.lay-plagaty .card-media { border-radius: 0; }
.lay-plagaty .card-body {
  position: absolute; inset: auto 0 0 0;
  padding: 28px 16px 14px;
  background: linear-gradient(to top, rgba(8,8,10,.92), rgba(8,8,10,0));
}
.lay-plagaty .card-meta { display: none; }
.lay-plagaty .product-card:hover { transform: none; box-shadow: none; }
.lay-plagaty .product-card:hover .card-media img { transform: scale(1.06); }

/* --- Grid & card options (driven by gridSettings via og_grid_style) ---------- */
/* A minimum card width turns the fixed column count into a responsive grid. */
.product-grid.grid-auto { grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 240px), 1fr)); }
.product-card { border-radius: var(--card-radius, 3px); }
.card-media { border-radius: var(--card-radius, 3px) var(--card-radius, 3px) 0 0; }
.card-title {
  display: -webkit-box; -webkit-line-clamp: var(--card-lines, 2);
  -webkit-box-orient: vertical; overflow: hidden;
}
/* Card treatments */
.g-cardStyle-shadow .product-card { border-color: transparent; box-shadow: 0 8px 24px rgba(0,0,0,.32); }
.g-cardStyle-plain .product-card { border-color: transparent; background: transparent; }
.g-cardStyle-plain .card-body { padding-left: 0; padding-right: 0; }
.g-cardStyle-glass .product-card {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
/* Image fit */
.g-imageFit-contain .card-media img { object-fit: contain; background: var(--charcoal-2); }
/* Hover behaviour */
.g-hover-none .product-card:hover { transform: none; box-shadow: none; }
.g-hover-none .product-card:hover .card-media img { transform: none; }
.g-hover-lift .product-card:hover { transform: translateY(-6px); }
.g-hover-lift .product-card:hover .card-media img { transform: none; }
.g-hover-tilt .product-card { transform-style: preserve-3d; }
.g-hover-tilt .product-card:hover { transform: perspective(700px) rotateX(3deg) rotateY(-3deg) translateY(-4px); }
.g-hover-tilt .product-card:hover .card-media img { transform: none; }
/* Text alignment */
.g-align-center .card-body { text-align: center; }
/* Caption over the photo */
.product-card.card-over { position: relative; }
.product-card.card-over .card-media { border-radius: var(--card-radius, 3px); }
.product-card.card-over .card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: none; padding: 14px 16px;
}
.card-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--scrim-rgb), .88) 0%, rgba(var(--scrim-rgb), .1) 55%, transparent 78%);
}

/* --- Catalog object-type strip ------------------------------------------------ */
.type-strip {
  display: flex; gap: 8px; overflow-x: auto; min-width: 0; padding: 2px 2px 12px;
  margin-bottom: 6px; scrollbar-width: thin;
}
.type-chip {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 74px; padding: 10px 8px 8px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius, 3px);
  background: var(--charcoal); color: var(--muted);
  transition: border-color .15s, color .15s, transform .15s;
}
.type-chip:hover { border-color: var(--gold); color: var(--gold-soft); transform: translateY(-2px); }
.type-chip.is-active { border-color: var(--gold); color: var(--gold-soft); background: var(--charcoal-2); }
.type-chip.is-active::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--gold); border-radius: 2px;
}
.type-chip-icon { color: var(--gold); line-height: 0; }
.type-chip.is-active .type-chip-icon { color: var(--gold-soft); }
.type-chip-label { font-size: 12px; text-align: center; line-height: 1.2; }
.type-chip-count { font-size: 10px; opacity: .65; }
@media (max-width: 600px) { .type-chip { min-width: 64px; } }

/* Gem strip — second row under the object types. Each chip carries its own
   stone colour (--gem), so the row reads like a jeweller's tray. */
/* Wraps onto as many rows as it needs — 20 stones behind a horizontal
   scrollbar meant most of them were never seen. */
.gem-strip {
  display: flex; flex-wrap: wrap; gap: 7px; min-width: 0;
  padding: 2px 2px 12px; margin: -2px 0 6px;
}
/* Ring configurator. Sits above the results because it asks the one question
   that can rule a piece out — a ring in the wrong size is not a near miss. */
.ring-lab {
  border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: var(--radius, 3px);
  padding: 14px 16px; margin: 0 0 16px;
  background: rgba(197,160,89,.05);
}
.ring-lab-size { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ring-lab-field { display: flex; flex-direction: column; gap: 4px; }
.ring-lab-label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, #8d8579);
}
.ring-lab-field input { width: 110px; margin: 0; }
.ring-lab-clear { font-size: 12px; color: var(--muted, #8d8579); align-self: center; }
.ring-lab-hint {
  flex: 1 1 100%; margin: 2px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--muted, #8d8579); max-width: 74ch;
}
.ring-lab-hint strong { color: var(--gold-soft, #d8b878); }
.ring-lab-styles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ring-style {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--line, rgba(255,255,255,.14));
  color: var(--ivory, #e8e2d8); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.ring-style:hover { border-color: var(--gold, #c5a059); }
.ring-style.is-active { border-color: var(--gold, #c5a059); background: rgba(197,160,89,.14); }
.ring-style .cnt { font-size: 11px; color: var(--muted, #8d8579); }
/* Which shop this console runs. Two domains means two consoles and two
   separate logins; before this the only thing telling them apart was the
   address bar, which is exactly where nobody looks. */
.task-shop {
  margin: 10px 0 14px; padding: 9px 11px;
  border: 1px solid rgba(197,160,89,.35); border-left-width: 3px; border-radius: 3px;
  background: rgba(197,160,89,.07); display: flex; flex-direction: column; gap: 2px;
}
.task-shop.is-clone { border-color: rgba(239,39,166,.5); background: rgba(239,39,166,.08); }
.task-shop-name { font-size: 13px; font-weight: 600; color: #e8e2d8; }
.task-shop-host { font-size: 11px; color: #8d8579; }
.task-shop-who { font-size: 11px; color: #8d8579; margin-top: 3px; }
.task-shop summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.task-shop summary::-webkit-details-marker { display: none; }
.task-shop[data-alone] summary { cursor: default; }
.task-shop summary::after {
  content: "▾"; position: absolute; right: 10px; top: 9px; color: #8d8579; font-size: 11px;
}
.task-shop[data-alone] summary::after { display: none; }
.task-shop { position: relative; }
/* The badge in the top line is a pill the height of the bell — name, host and
   who you are on ONE line, ellipsis when they do not fit. It must not inherit
   the sidebar card's padding and border; that turned it into a block that ate
   the corner of the page. */
.task-topline { display: flex; align-items: center; gap: 10px; }
.task-topline .task-title { flex: 1 1 auto; margin: 0; min-width: 0; }
.task-shop-inline {
  margin: 0; padding: 0; border: 0; background: none; border-radius: 0;
  flex: 0 1 auto; min-width: 0;
}
.task-shop-inline > summary {
  /* The sidebar version stacks its three lines; this one must not — without
     the explicit row the base rule's column direction wins and the pill grows
     three storeys tall. */
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  height: 34px; padding: 0 26px 0 12px; max-width: 460px;
  border: 1px solid rgba(197,160,89,.35); border-radius: 999px;
  background: rgba(197,160,89,.07);
  font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden;
}
.task-shop-inline.is-clone > summary { border-color: rgba(239,39,166,.5); background: rgba(239,39,166,.08); }
.task-shop-inline .task-shop-name { font-weight: 600; color: #e8e2d8; flex: 0 0 auto; }
.task-shop-inline .task-shop-host,
.task-shop-inline .task-shop-who {
  color: #8d8579; margin: 0; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-shop-inline .task-shop-host::before,
.task-shop-inline .task-shop-who::before { content: "· "; }
.task-shop-inline > summary::after { top: 50%; transform: translateY(-50%); right: 10px; font-size: 10px; }
.task-shop-inline .task-shop-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 250px; padding: 10px; margin: 0;
  background: var(--charcoal, #111); border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
@media (max-width: 860px) {
  .task-shop-inline .task-shop-who { display: none; }
  .task-shop-inline > summary { max-width: 220px; }
}

/* Cookie notice: a strip at the bottom, not a wall over the shop. */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 20px; background: var(--charcoal, #111);
  border-top: 1px solid var(--line, rgba(197,160,89,.3));
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.cookie-bar p { margin: 0; font-size: 13px; max-width: 78ch; color: var(--ivory); }
.cookie-bar a { color: var(--gold-soft, #d8b878); }
.cookie-bar-actions { display: flex; gap: 8px; }
/* GDPR console page. */
.gd-verdict {
  padding: 10px 14px; border-radius: 3px; margin: 8px 0 14px; max-width: 78ch; font-size: 13px;
  border: 1px solid rgba(111,191,115,.45); background: rgba(111,191,115,.08);
}
.gd-verdict.is-warn { border-color: rgba(224,166,102,.5); background: rgba(224,166,102,.08); }
.gd-json {
  max-height: 320px; overflow: auto; font-size: 12px; padding: 10px;
  background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 3px;
}
.legal-page h2 { margin-top: 26px; }
.legal-list { max-width: 74ch; line-height: 1.7; }
.edit-save { left: auto; right: 22px; background: var(--gold); color: #14100a; }
[contenteditable="true"] { outline: 1px dashed var(--gold); outline-offset: 4px; min-height: 1em; }
.edit-controls { display: inline-flex; gap: 6px; margin-left: 8px; }
.edit-mini {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-size: 11px; padding: 2px 7px; cursor: pointer; border-radius: 2px;
}
.edit-mini:hover { color: var(--danger); border-color: var(--danger); }
.edit-add-row { margin: 10px 0; }
.thumb.drag-over { border-color: var(--gold-soft); transform: scale(1.06); }
.gallery-thumbs.editing .thumb { cursor: grab; }

/* --- Task console ------------------------------------------------------------------------ */
.task-body { background: #0d0d0d; }
.task-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.task-sidebar {
  background: var(--obsidian); border-right: 1px solid var(--line);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 0; height: 100vh;
}
.task-brand { font-size: 12px; letter-spacing: .22em; font-weight: 600; flex: none; }
/* The nav is the only part allowed to grow, and it scrolls on its own.
   min-height:0 is what actually lets a flex child shrink below its content —
   without it the list overflows the viewport and the last items are
   unreachable without zooming the whole page out. */
.task-nav {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(197,160,89,.35) transparent;
}
.task-nav::-webkit-scrollbar { width: 6px; }
.task-nav::-webkit-scrollbar-thumb { background: rgba(197,160,89,.3); border-radius: 3px; }
.task-nav::-webkit-scrollbar-track { background: transparent; }
.task-nav a {
  padding: 5px 12px; color: var(--muted); font-size: 12.5px; border-radius: 2px;
  border-left: 2px solid transparent; line-height: 1.3;
}
.task-nav a:hover { color: var(--ivory); background: rgba(197,160,89,.05); }
.task-nav a.active { color: var(--gold-soft); border-left-color: var(--gold); background: rgba(197,160,89,.08); }
.task-sidebar-foot { display: flex; flex-direction: column; gap: 8px; flex: none; }
.task-main { padding: 30px 34px; min-width: 0; }
.task-title { margin: 0 0 24px; font-size: 30px; }
.task-login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.task-login-card { width: min(380px, 92vw); }
.task-login-card .task-brand { margin-bottom: 14px; }

/* Grouped sidebar */
.task-nav-group {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #6f695f; flex: 1 1 auto;
}
.task-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-nav-badge {
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
  line-height: 18px; text-align: center; padding: 0 5px; flex: none;
}

/* --- zbaliteľné sekcie menu ------------------------------------------------ */
.task-nav-sec { flex: none; }
.task-nav-sec > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 12px; margin-top: 6px; border-radius: 2px;
  list-style: none; user-select: none;
  transition: background .14s, color .14s;
}
.task-nav-sec > summary::-webkit-details-marker { display: none; }
.task-nav-sec > summary:hover { background: rgba(197,160,89,.06); }
.task-nav-sec > summary:hover .task-nav-group { color: var(--gold-soft); }
.task-nav-sec:first-of-type > summary { margin-top: 2px; }
/* Šípka ukazuje smer, ktorým sa to pohne — doprava zavreté, dole otvorené. */
.task-nav-caret { color: #6f695f; font-size: 13px; line-height: 1; flex: none;
  transition: transform .18s ease, color .14s; }
.task-nav-sec[open] > summary .task-nav-caret { transform: rotate(90deg); color: var(--gold); }
.task-nav-sec[open] > summary .task-nav-group { color: var(--gold-soft); }
/* Otvorená sekcia dostane vlastný zvislý pás — oko potom vidí, kam patrí,
   aj keď je otvorených viac naraz. */
.task-nav-sec[open] { border-left: 1px solid rgba(197,160,89,.18); margin-left: 4px; }
.task-nav-sec[open] > a { padding-left: 14px; }
/* Počítadlo pri zbalenej skupine. Keď je otvorená, čísla sú vidieť pri
   položkách a súčet nad nimi by ich len zdvojoval. */
.sec-badge { background: rgba(197,160,89,.22); color: var(--gold-soft); }
.task-nav-sec[open] > summary .sec-badge { display: none; }
@media (prefers-reduced-motion: reduce) { .task-nav-caret { transition: none; } }

/* --- Dashboard KPIs ---------------------------------------------------------- */
.kpi-heading {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 4px 0 10px; font-family: var(--sans); font-weight: 600;
}
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kpi-card {
  background: var(--charcoal); border: 1px solid rgba(197,160,89,.14); border-radius: 4px;
  padding: 15px 16px; display: flex; flex-direction: column; gap: 3px;
  color: var(--ivory); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kpi-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.3); color: var(--ivory); }
.kpi-card.gold { border-color: rgba(197,160,89,.5); }
.kpi-card.warn { border-color: rgba(196,106,90,.5); }
.kpi-value { font-family: var(--serif); font-size: 27px; line-height: 1.15; color: var(--gold-soft); }
.kpi-card.warn .kpi-value { color: var(--danger); }
.kpi-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kpi-foot { font-size: 11.5px; color: #7f7a70; margin-top: 4px; }
.kpi-foot.up { color: var(--ok); }
.kpi-foot.down { color: var(--danger); }

/* Alert strip: the only things that need a decision today */
.kpi-alerts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.kpi-alert {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: rgba(196,106,90,.12); border: 1px solid rgba(196,106,90,.45); color: #e6c7bf;
  font-size: 13px; transition: background .15s;
}
.kpi-alert:hover { background: rgba(196,106,90,.22); color: #fff; }
.kpi-alert strong { font-family: var(--serif); font-size: 20px; color: #fff; }

/* Monthly revenue sparkline */
.spark { display: flex; align-items: flex-end; gap: 5px; height: 132px; margin: 6px 0 10px; }
.spark-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 5px;
}
.spark-bar {
  width: 100%; background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-radius: 2px 2px 0 0; min-height: 2px; transition: filter .15s;
}
.spark-col:hover .spark-bar { filter: brightness(1.35); }
.spark-key { font-size: 10px; color: var(--muted); }

.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.panel-head h2 { margin: 0 0 12px; }
.bar-link { text-decoration: none; }
.bar-link:hover .bar-label { color: var(--ivory); }
.bar-fill.full { background: linear-gradient(90deg, var(--ok), #a7d2a2); }
.row-link { cursor: pointer; }
.row-link:hover td { background: rgba(197,160,89,.07); }

.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 24px; }
.metric-card {
  background: var(--charcoal); border: 1px solid rgba(197,160,89,.14); border-radius: 3px;
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.metric-card.gold { border-color: var(--gold); box-shadow: var(--gold-glow); }
.metric-value { font-family: var(--serif); font-size: 28px; color: var(--gold-soft); }
.metric-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.task-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 30px; align-items: center; gap: 10px; font-size: 13px; }
.bar-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: rgba(197,160,89,.08); border-radius: 2px; height: 14px; }
.bar-fill { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); height: 100%; border-radius: 2px; }
.bar-value { text-align: right; color: var(--gold-soft); }

.module-status { list-style: none; margin: 0; padding: 0; }
.module-status li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(197,160,89,.08); font-size: 14px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px rgba(127,174,122,.6); }
.dot.off { background: var(--danger); }

.task-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.task-table th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 8px;
}
.task-table td { padding: 8px; border-bottom: 1px solid rgba(197,160,89,.07); }
.task-table .num { text-align: right; }
.request-card { border-bottom: 1px solid rgba(197,160,89,.1); padding: 10px 0; font-size: 14px; }

.editor .editor-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; }
.editor-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.editor-actions input { width: 240px; margin: 0; }
.editor-list { display: flex; flex-direction: column; gap: 10px; }
.editor-item {
  display: grid; grid-template-columns: auto 1fr 1fr auto auto auto; gap: 10px; align-items: center;
  border: 1px solid rgba(197,160,89,.14); border-radius: 3px; padding: 10px 12px;
  background: var(--charcoal-2);
}
.editor-item input, .editor-item select { margin: 0; padding: 7px 9px; font-size: 13px; }
.editor-item .grip { cursor: grab; color: var(--muted); user-select: none; }
.editor-item.form-item { grid-template-columns: auto 1fr 1fr auto auto auto auto; }

.toggle-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(197,160,89,.08); cursor: pointer; color: var(--ivory); font-size: 14px; }
.toggle-row input { display: none; }
.toggle-pill {
  width: 40px; height: 20px; border-radius: 12px; background: #2a2a2a; position: relative;
  transition: background .2s; flex-shrink: 0;
}
.toggle-pill::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--muted); transition: all .2s;
}
.toggle-row input:checked + .toggle-pill { background: var(--gold-deep); }
.toggle-row input:checked + .toggle-pill::after { left: 22px; background: var(--gold-soft); }

.brick-slot { display: block; margin: 16px 0; }
.brick-slot span { display: flex; justify-content: space-between; margin-bottom: 6px; }
.brick-slot textarea { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 13px; }
.grid-preview .preview-card { pointer-events: none; }
.campaign-preview { width: 100%; height: 320px; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.form-preview { background: var(--charcoal-2); }

/* --- Responsive ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .catalog-layout, .product-layout, .checkout-layout, .account-grid,
  .task-grid-2, .footer-inner { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), 1fr); }
  .task-shell { grid-template-columns: 1fr; }
  .task-sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .task-nav { flex-direction: row; flex-wrap: wrap; }
  .header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 12px; }
  .main-nav { order: 3; width: 100%; }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   ver 2.0 — sales, coupons, QR payment, admin CRUD
   ========================================================================= */

.sale-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--gold, #c5a059); color: #0d0d0d;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 3px;
}
.card-media { position: relative; }
.sale-badge-inline { position: static; display: inline-block; margin-right: 8px; vertical-align: middle; }
.price-original { color: #8a8578; font-size: .78em; margin-right: 10px; text-decoration: line-through; }

/* Checkout: coupon + payment method + QR panel */
.coupon-row { display: flex; gap: 10px; margin: 14px 0; }
.coupon-row input { flex: 1; }
.summary-line.discount span:last-child { color: #7fce74; }
.pay-methods { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.pay-method {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid #2c2c36; border-radius: 8px; cursor: pointer;
}
.pay-method input { accent-color: #c5a059; }
.pay-method:has(input:checked) { border-color: #c5a059; background: rgba(197, 160, 89, .06); }
.qr-panel { text-align: center; padding: 24px; border: 1px solid #c5a059; border-radius: 10px; margin-top: 18px; }
.qr-panel svg { width: 240px; height: 240px; background: #fff; padding: 12px; border-radius: 8px; }
.qr-details { margin-top: 14px; text-align: left; display: inline-block; }
.qr-details dt { color: #9a9aa5; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-top: 10px; }
.qr-details dd { margin: 2px 0 0; font-size: 15px; }

/* Admin: data tables + forms */
.admin-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.admin-table th, .admin-table td { padding: 9px 12px; border-bottom: 1px solid #26262e; text-align: left; vertical-align: middle; }
.admin-table th { color: #9a9aa5; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.admin-table img.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; display: block; }
.admin-table .num { text-align: right; }
.admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 14px 0; }
.admin-form-grid label, .editor label.stack { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #bbb; }
.admin-form-grid input, .admin-form-grid select, .editor textarea.wide,
.editor input.wide, .editor label.stack input, .editor label.stack select {
  background: #14141a; border: 1px solid #2c2c36; color: #eee; border-radius: 6px; padding: 9px 11px; font: inherit;
}
.editor textarea.wide { width: 100%; min-height: 110px; resize: vertical; }
.lang-tabs { display: flex; gap: 6px; margin: 16px 0 10px; }
.lang-tabs button { background: #1c1c24; border: 1px solid #2c2c36; color: #bbb; padding: 6px 16px; border-radius: 6px; cursor: pointer; font: inherit; }
.lang-tabs button.active { border-color: #c5a059; color: #c5a059; }
.kv-rows .kv-row { display: flex; gap: 8px; margin-bottom: 8px; }
.kv-rows .kv-row input { flex: 1; }
.kv-rows .kv-row .kv-remove { flex: 0 0 auto; }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 12px 0; }
.img-tile { position: relative; border: 1px solid #2c2c36; border-radius: 8px; overflow: hidden; }
.img-tile img { width: 100%; height: 90px; object-fit: cover; display: block; }
.img-tile .img-actions { display: flex; }
.img-tile .img-actions button { flex: 1; background: #1c1c24; border: 0; color: #bbb; padding: 5px 0; cursor: pointer; font-size: 12px; }
.img-tile .img-actions button:hover { color: #c5a059; }
.btn-danger { border-color: #b0362c !important; color: #ef7a6d !important; }
.status-ok { color: #7fce74; }
.status-error { color: #ef7a6d; }

/* Attribute rows: reorder arrows + secret flag */
.kv-rows .kv-row .kv-up, .kv-rows .kv-row .kv-down { flex: 0 0 auto; padding: 6px 10px; }
.kv-secret-label { display: flex; align-items: center; gap: 4px; color: #9a9aa5; font-size: 14px; cursor: pointer; user-select: none; }
.kv-secret-label input { accent-color: #c5a059; }
.kv-row.kv-secret input.kv-key, .kv-row.kv-secret input.kv-value { opacity: .55; border-style: dashed; }

/* Attribute groups — attributes sorted by what they are FOR */
.attr-group { border: 1px solid #2c2c36; border-radius: 8px; margin-bottom: 10px; background: #16161c; }
.attr-group[open] { border-color: #34343f; }
.attr-group > summary {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  cursor: pointer; list-style: none; user-select: none;
}
.attr-group > summary::-webkit-details-marker { display: none; }
.attr-group > summary::before {
  content: "▸"; color: #6c6c78; font-size: 11px; transition: transform .15s;
}
.attr-group[open] > summary::before { transform: rotate(90deg); }
.attr-group > summary:hover { background: #1b1b22; }
.ag-icon {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid #3a3a46; border-radius: 5px; color: #c5a059; font-size: 12px;
}
.ag-label { font-weight: 600; color: #e8e2d6; }
.ag-count {
  flex: 0 0 auto; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: #24242c; color: #9a9aa5; font-size: 11px; text-align: center;
}
.attr-group.is-empty .ag-count { opacity: .4; }
.attr-group.is-empty .ag-label { color: #9a9aa5; font-weight: 500; }
.ag-hint { flex: 1 1 auto; text-align: right; }
.ag-body { padding: 4px 14px 14px; }
.ag-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ag-tools .btn { padding: 5px 11px; font-size: 12px; }
@media (max-width: 760px) { .ag-hint { display: none; } }

/* Product list: search box + quick filters */
.prod-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.prod-search-box { position: relative; flex: 1 1 320px; }
.prod-search-box input {
  width: 100%; padding: 10px 34px 10px 34px; background: #16161c;
  border: 1px solid #2c2c36; border-radius: 8px; color: inherit; font: inherit;
}
.prod-search-box input:focus { outline: none; border-color: #c5a059; }
.prod-search-box input::-webkit-search-cancel-button { display: none; }
.prod-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #6c6c78; }
.prod-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: #9a9aa5; text-decoration: none; font-size: 13px;
}
.prod-search-clear:hover { color: #c5a059; }
.prod-search-hint { flex: 1 1 100%; margin: 0; }
.prod-search-note { margin: 0 0 10px; font-size: 13px; color: #9a9aa5; }
.prod-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.prod-chip {
  background: #16161c; border: 1px solid #2c2c36; border-radius: 999px;
  color: #9a9aa5; padding: 5px 13px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.prod-chip:hover { border-color: #4a4a58; color: #e8e2d6; }
.prod-chip.is-active { border-color: #c5a059; color: #c5a059; background: #1e1a14; }
.prod-count { margin-left: auto; }
.admin-table .thumb-none {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px dashed #34343f; border-radius: 4px; color: #55555f; font-size: 12px;
}

/* Account page + default-password warning */
.acc-warn {
  display: block; margin: 0 0 16px; padding: 13px 16px;
  border: 1px solid #b0362c; border-left-width: 4px; border-radius: 8px;
  background: rgba(176, 54, 44, .08); color: #f0c9c4; line-height: 1.55;
}
.acc-warn code { color: #ef7a6d; }
.acc-warn strong { color: #ef7a6d; }
a.acc-warn-link { text-decoration: none; }
a.acc-warn-link span { color: #d9b3ad; display: block; margin-top: 2px; font-size: 13px; }
a.acc-warn-link:hover { background: rgba(176, 54, 44, .14); }

/* ogWysiwyg — the internal rich-text editor (layout HTML blocks, newsletter) */
.wg { border: 1px solid #2c2c36; border-radius: 8px; background: #101016; overflow: hidden; }
.wg-bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid #26262e; background: #16161c;
}
.wg-b {
  min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid transparent;
  border-radius: 5px; background: transparent; color: #b9b3a8; cursor: pointer;
  font: inherit; font-size: 12.5px; line-height: 1;
}
.wg-b:hover { border-color: #3a3a46; color: #e8e2d6; }
.wg-b.active { border-color: #c5a059; color: #c5a059; }
.wg-sep { width: 1px; height: 18px; background: #2c2c36; margin: 0 5px; }
.wg-colors { display: flex; align-items: center; gap: 4px; margin: 0 2px; }
.wg-sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #3a3a46; cursor: pointer; padding: 0; }
.wg-pick { cursor: pointer; font-size: 13px; position: relative; }
.wg-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.wg-right { margin-left: auto; display: flex; gap: 2px; }
.wg-src { font-family: monospace; }
/* Fullscreen editing — the small inline box is for a glance, this is for work */
body.wg-open { overflow: hidden; }
.wg.is-full {
  position: fixed; inset: 3vh 3vw; z-index: 120; margin: 0;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.wg.is-full .wg-area, .wg.is-full .wg-source {
  flex: 1 1 auto; max-height: none; min-height: 0; font-size: 15px;
}
.wg.is-full .wg-area { padding: 26px clamp(16px, 6vw, 90px); }

/* Layout gallery: list on the left, what it actually looks like on the right */
.lay-gallery { display: grid; grid-template-columns: minmax(210px, 280px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .lay-gallery { grid-template-columns: 1fr; } }
.lay-list { display: flex; flex-direction: column; gap: 4px; max-height: 620px; overflow-y: auto; padding-right: 4px; }
.lay-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.lay-item:hover { background: #1b1b22; }
.lay-item.is-selected { border-color: #c5a059; background: #1e1a14; }
.lay-item:focus-visible { outline: 2px solid #c5a059; outline-offset: 2px; }
/* A layout in use on some domain is marked, so the list doubles as a status board */
.lay-item.is-live::after { content: "● v prevádzke"; margin-left: auto; font-size: 9.5px; color: #7fce74; white-space: nowrap; }
.lay-icon {
  flex: none; width: 40px; height: 40px; border-radius: 7px; border: 1px solid;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 2px; padding: 5px; overflow: hidden;
}
.lay-icon i { display: block; border-radius: 2px; }
.lay-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lay-item-text strong { font-size: 13px; color: #e8e2d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-item-tags { display: flex; gap: 4px; }
.lay-item-tags .cmp-badge { font-size: 9px; padding: 0 5px; }

.lay-stage { border: 1px solid #2c2c36; border-radius: 10px; background: #16161c; overflow: hidden; }
.lay-stage-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #26262e; flex-wrap: wrap; }
.lay-stage-head strong { color: #e8e2d6; font-size: 15px; }
.lay-stage-tabs { margin-left: auto; display: flex; gap: 6px; }
.lay-stage-tabs .btn.is-active { border-color: #c5a059; color: #c5a059; }
.lay-stage-body { padding: 14px; }
.lay-scheme {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 0 14px; border-radius: 6px; min-height: 330px;
}
.lay-live { border-radius: 6px; overflow: hidden; border: 1px solid #26262e; background: #0b0b10; }
/* The shop renders at desktop width, then is scaled down to fit the panel —
   a 1280px page squeezed into 700px of CSS would reflow to its mobile layout
   and show something the visitor never sees. */
.lay-live iframe {
  width: 1280px; height: 900px; border: 0; display: block;
  transform: scale(.55); transform-origin: top left;
}
.lay-live { height: 495px; }
.lay-stage-actions { padding: 0 14px 14px; }

/* Products: internal filter bar, list/grid switch, product tiles */
.prod-head-actions { display: flex; align-items: center; gap: 10px; }
.view-switch { display: inline-flex; border: 1px solid #2c2c36; border-radius: 7px; overflow: hidden; }
.view-btn {
  padding: 6px 12px; color: #9a9aa5; text-decoration: none; font-size: 14px; line-height: 1.4;
  background: #16161c; transition: background .12s, color .12s;
}
.view-btn:hover { color: #e8e2d6; }
.view-btn.is-active { background: #1e1a14; color: #c5a059; }
.prod-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 12px 14px; margin: 4px 0 6px;
  border: 1px solid #26262e; border-radius: 8px; background: #14141a;
}
.prod-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #a49c8f; margin: 0; }
.prod-filters select { margin: 0; padding: 6px 9px; font-size: 12.5px; min-width: 130px; }
.prod-filters .btn { align-self: center; }

.prod-grid {
  display: grid; gap: 12px; margin: 14px 0;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.prod-tile {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  border: 1px solid #2c2c36; border-radius: 9px; background: #16161c;
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.prod-tile:hover { border-color: #c5a059; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.prod-tile-photo { position: relative; display: block; aspect-ratio: 1/1; background: #101015; }
.prod-tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-tile-nophoto {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #55555f; font-size: 11.5px; border-bottom: 1px dashed #2c2c36;
}
.prod-tag {
  position: absolute; top: 7px; padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
}
.prod-tag-out { left: 7px; background: rgba(176,54,44,.9); color: #fff; }
.prod-tag-sale { right: 7px; background: rgba(127,206,116,.9); color: #0d1a0c; }
.prod-tag-hidden { left: 7px; top: 30px; background: rgba(0,0,0,.75); color: #d9d4c8; }
.prod-tile-body { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 11px; }
.prod-tile-body strong { font-size: 12.5px; color: #e8e2d6; line-height: 1.35; }
.prod-tile-price { color: #c5a059; font-size: 13px; margin-top: 2px; }
.prod-tile-price s { color: #7a7568; font-size: 11px; margin-left: 5px; }

/* Icon manager */
.ic-bulk {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 11px 13px; margin-top: 12px;
  border: 1px solid #26262e; border-radius: 8px; background: #14141a;
}
.ic-bulk-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #a49c8f; margin: 0; }
.ic-bulk select { margin: 0; width: auto; min-width: 170px; padding: 6px 9px; font-size: 12.5px; }
.ic-bulk input[type="search"] { margin: 0; margin-left: auto; width: auto; min-width: 170px; padding: 6px 9px; }
.ic-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); margin-top: 10px; }
.ic-cell {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px;
  border: 1px solid #2c2c36; border-radius: 8px; background: #16161c;
}
.ic-cell.is-manual { border-color: rgba(197,160,89,.55); }
.ic-pick { display: flex; align-items: center; gap: 7px; margin: 0; flex: none; }
.ic-preview { color: #c5a059; line-height: 0; }
.ic-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ic-body strong { font-size: 12.5px; color: #e8e2d6; }
.ic-langs { display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; }
.ic-body select { margin: 2px 0 0; padding: 5px 8px; font-size: 12px; }
.ic-count {
  flex: none; font-size: 10.5px; color: #7a7568; cursor: pointer;
  background: transparent; border: 1px solid #2c2c36; border-radius: 999px;
  padding: 2px 8px; font-family: inherit;
}
.ic-count:hover { border-color: #c5a059; color: #c5a059; }
/* Undetermined: the one bucket that always means "look at me" */
.ic-cell.is-undetermined { border-color: #b0362c; background: rgba(176,54,44,.07); }
.ic-cell.is-undetermined .ic-preview { color: #ef7a6d; }
.ic-cell.is-undetermined strong::after { content: " — netrafené"; color: #ef7a6d; font-weight: 400; font-size: 10.5px; }

/* Drawer listing the products behind a facet value */
.ic-drawer { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.55); display: flex; justify-content: flex-end; }
.ic-drawer-panel {
  width: min(560px, 100%); background: #14141a; border-left: 1px solid #2c2c36;
  display: flex; flex-direction: column; box-shadow: -18px 0 50px rgba(0,0,0,.5);
}
.ic-drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border-bottom: 1px solid #26262e; }
.ic-drawer-head strong { color: #e8e2d6; font-size: 15px; }
.ic-drawer-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; border-bottom: 1px solid #26262e; }
.ic-drawer-list { flex: 1; overflow-y: auto; padding: 8px 10px; }
.ic-dr-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 0 4px;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
}
.ic-dr-row:hover { background: #1b1b22; border-color: #2c2c36; }
.ic-dr-row img { width: 42px; height: 42px; object-fit: cover; border-radius: 4px; flex: none; }
.ic-dr-nophoto { width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border: 1px dashed #34343f; border-radius: 4px; color: #55555f; }
.ic-dr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ic-dr-body strong { font-size: 12.5px; color: #e8e2d6; }
.ic-drawer-foot { padding: 10px 16px 14px; border-top: 1px solid #26262e; margin: 0; }

/* Notification rail — what the operator has to resolve */
.task-topline { display: flex; align-items: center; gap: 12px; }
.task-topline .task-title { flex: 1; margin: 0; }
.notice-toggle {
  flex: none; display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px;
  background: #16161c; border: 1px solid #2c2c36; color: #9a9aa5;
}
.notice-toggle:hover { border-color: #c5a059; color: #e8e2d6; }
.notice-toggle.has-items { border-color: #c5a059; color: #c5a059; }
.notice-toggle-count { font-size: 11px; }
.notice-rail {
  position: fixed; top: 74px; right: 18px; width: min(330px, calc(100vw - 36px)); z-index: 60;
  background: #14141a; border: 1px solid #2c2c36; border-radius: 10px;
  box-shadow: 0 18px 46px rgba(0,0,0,.5); overflow: hidden;
  max-height: calc(100vh - 100px); display: flex; flex-direction: column;
}
.notice-rail-head { display: flex; align-items: center; padding: 11px 13px; border-bottom: 1px solid #26262e; }
.notice-rail-head strong { color: #e8e2d6; font-size: 13px; }
.notice-close {
  margin-left: auto; background: transparent; border: 0; color: #9a9aa5;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px;
}
.notice-close:hover { color: #e8e2d6; }
.notice-item {
  display: flex; align-items: flex-start;
  border-bottom: 1px solid #1e1e26; border-left: 3px solid transparent;
}
.notice-item:hover { background: #1b1b22; }
.notice-link { display: flex; gap: 10px; padding: 10px 4px 10px 13px; text-decoration: none; flex: 1; min-width: 0; }
.notice-dismiss {
  flex: none; background: transparent; border: 0; cursor: pointer;
  color: #55555f; font-size: 12px; line-height: 1; padding: 11px 11px 11px 6px;
}
.notice-dismiss:hover { color: #ef7a6d; }
.notice-empty { padding: 16px 13px; margin: 0; color: #7fce74; font-size: 12.5px; text-align: center; }
.notice-restore {
  width: 100%; padding: 9px 13px; border: 0; border-top: 1px solid #26262e;
  background: transparent; color: #9a9aa5; font: inherit; font-size: 11.5px; cursor: pointer;
}
.notice-restore:hover { color: #c5a059; background: #1b1b22; }

/* Guided fix-up: one product at a time, proposal marked until approved */
.fx-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fx-progress > span:first-child { font-size: 13px; color: #c5a059; min-width: 62px; }
.fx-bar { flex: 1; height: 4px; border-radius: 999px; background: #26262e; overflow: hidden; }
.fx-bar i { display: block; height: 100%; background: #c5a059; transition: width .25s ease; }
.fx-card { display: flex; gap: 18px; align-items: flex-start; }
.fx-photo {
  flex: none; width: 148px; height: 148px; border-radius: 8px; overflow: hidden;
  background: #101015; border: 1px solid #2c2c36; display: grid; place-items: center;
}
.fx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-nophoto { color: #55555f; font-size: 11.5px; }
.fx-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fx-info > strong { font-size: 16px; color: #e8e2d6; line-height: 1.35; }
.fx-field { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em; color: #a49c8f; }
.fx-input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-input-row input {
  flex: 1 1 260px; margin: 0; padding: 10px 12px; font-size: 15px;
  text-transform: none; letter-spacing: normal;
}
/* A proposal is not a saved value — it stays marked until it is approved */
.fx-input-row input.is-proposal { border-color: #b0362c; color: #f0c9c4; background: rgba(176,54,44,.1); }
.fx-why { font-size: 11px; color: #7a7568; text-transform: none; letter-spacing: normal; }
.fx-actions { margin-top: 16px; }
.fx-empty { padding: 30px 8px; text-align: center; color: #7fce74; font-size: 14px; }

/* Product editor: derived state + the pickers that change it */
.pe-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pe-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-derived {
  margin: 12px 0 4px; padding: 12px 14px;
  border: 1px solid #26262e; border-radius: 8px; background: #14141a;
}
.pe-derived-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.pe-derived-label {
  flex: none; width: 132px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: #a49c8f;
}
.pe-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px;
  border: 1px solid #2c2c36; border-radius: 999px; font-size: 12px; color: #e8e2d6;
}
.pe-chip .og-icon { color: #c5a059; }
.pe-picker select { margin: 0; width: auto; min-width: 150px; padding: 6px 9px; font-size: 12.5px; }
.pe-icon-preview {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid #2c2c36; border-radius: 6px; color: #c5a059;
}

/* Type chips — a wrapping row instead of a dropdown taller than the window */
.fx-choices, .pe-choices {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px;
}
.pe-choices { margin-left: 140px; }
.pe-typefind { display: flex; gap: 8px; align-items: center; margin: 8px 0 0 140px; }
.pe-typefind input[type="search"] {
  margin: 0; width: auto; flex: 1 1 300px; max-width: 380px;
  padding: 7px 11px; font-size: 13px;
}
.pe-typefind input[type="search"]::-webkit-search-cancel-button { display: none; }
@media (max-width: 720px) { .pe-typefind { margin-left: 0; } }
.fx-choice {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid #2c2c36; background: #16161c; color: #b9b3a8;
  font: inherit; font-size: 12.5px; line-height: 1;
  transition: border-color .12s, color .12s, background .12s;
}
.fx-choice .og-icon { color: #8a8478; transition: color .12s; }
.fx-choice:hover { border-color: #4a4a58; color: #e8e2d6; }
.fx-choice:hover .og-icon { color: #c5a059; }
.fx-choice.is-on { border-color: #c5a059; background: #1e1a14; color: #c5a059; }
.fx-choice.is-on .og-icon { color: #c5a059; }
@media (max-width: 720px) { .pe-choices { margin-left: 0; } }
@media (max-width: 720px) {
  .fx-card { flex-direction: column; }
  .fx-photo { width: 100%; height: 190px; }
}
.notice-item.is-todo { border-left-color: #c5a059; }
.notice-item.is-warn { border-left-color: #e0a33a; }
.notice-item.is-risk { border-left-color: #b0362c; }
.notice-count { flex: none; min-width: 26px; text-align: center; font-size: 15px; color: #e8e2d6; }
.notice-item.is-risk .notice-count { color: #ef7a6d; }
.notice-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.notice-body strong { font-size: 12.5px; color: #e8e2d6; font-weight: 500; }

/* The task console is a desktop tool; on a phone only the dashboard is worth
   showing, so the wide editors simply stop fighting for room. */
@media (max-width: 720px) {
  .prod-filters { flex-direction: column; align-items: stretch; }
  .prod-filters label, .prod-filters select { width: 100%; }
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ic-grid, .lay-gallery { grid-template-columns: 1fr; }
  .ic-bulk input[type="search"] { margin-left: 0; width: 100%; }
}
.wg-area {
  min-height: 130px; max-height: 420px; overflow-y: auto;
  padding: 12px 14px; color: #e8e2d6; line-height: 1.6; outline: none;
}
.wg-area:focus { background: #12121a; }
.wg-area h2, .wg-area h3 { color: #c5a059; margin: .5em 0 .3em; }
.wg-area a { color: #c5a059; }
.wg-area img { max-width: 100%; border-radius: 4px; }
.wg-area ul { padding-left: 22px; }
.wg-source {
  display: block; width: 100%; min-height: 130px; max-height: 420px;
  border: 0; padding: 12px 14px; background: #0b0b10; color: #9fd49a;
  font-family: monospace; font-size: 12px; line-height: 1.55; resize: vertical; outline: none;
}

/* HTML blocks inside the layout editor */
.led-block.is-off .led-html { display: none; }
.led-html { display: block; }
.led-html .led-html-note { margin: 6px 2px 0; }
.led-html-status { margin-left: 6px; }

/* Newsletter: mailing-list manager + template bar */
.ml-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.ml-tools input[type="search"], .ml-tools input[type="email"] { flex: 1 1 180px; min-width: 0; }
.ml-tools select { flex: 0 0 auto; }
.ml-list-wrap { max-height: 340px; overflow-y: auto; border: 1px solid #26262e; border-radius: 8px; }
.ml-table { margin: 0; }
.ml-table th { position: sticky; top: 0; background: #16161c; z-index: 1; }
.ml-table .btn { padding: 4px 10px; font-size: 12px; }
.tpl-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid #2c2c36; border-radius: 8px; background: #16161c;
}
.tpl-bar select { min-width: 180px; }

/* Product page: back button + certificate lab links */
/* Back, and next to it the shelf this piece belongs to. The row spans the
   product grid; on a narrow screen the second button drops under the first. */
.product-nav {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; margin-bottom: 4px;
}
.product-back { padding: 7px 16px; }
.product-more { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; }
.product-more-icon { display: inline-flex; opacity: .85; }
.product-more-count {
  font-size: 12px; padding: 1px 7px; border-radius: 999px;
  background: rgba(197,160,89,.16); color: var(--gold-soft);
}
.cert-lab {
  display: inline-block; padding: 2px 9px; margin-right: 7px;
  border: 1px solid var(--gold); border-radius: 999px;
  color: var(--gold); font-size: 12px; letter-spacing: .04em; text-decoration: none;
  white-space: nowrap;
}
a.cert-lab:hover { background: var(--gold); color: var(--obsidian); }
.cert-lab-plain { border-color: var(--line); color: var(--muted); }
.cert-no { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.order-invoice { margin-left: auto; padding: 5px 12px; font-size: 12.5px; }
.dt-color-row { display: flex; gap: 8px; align-items: center; }
.dt-color-row input[type="color"] { width: 38px; height: 34px; padding: 2px; border-radius: 4px; flex: none; }
.dt-color-row input[type="text"] { flex: 1; }
/* Continent without stock: drawn as part of the world, not offered as a path */
.nav-branch.is-empty { opacity: .38; }
.nav-branch.is-empty .nav-node { cursor: default; }
.nav-branch.is-empty .nav-node:hover { border-color: var(--line); color: inherit; transform: none; }

/* Subcategory tag chips */
.tag-cloud { margin-top: 22px; }
.tag-cloud h2 { font-size: 15px; margin-bottom: 10px; }
.tag-chip {
  display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px;
  border: 1px solid #2c2c36; border-radius: 20px; font-size: 12.5px;
  color: #bbb; text-decoration: none; transition: all .2s;
}
.tag-chip span { color: #7a7568; font-size: 11px; }
.tag-chip:hover { border-color: #c5a059; color: #c5a059; }
.tag-chip.active { border-color: #c5a059; background: rgba(197,160,89,.12); color: #c5a059; }
.tag-chip.tag-clear { border-style: dashed; }
.product-tags { margin: 14px 0 4px; }

/* Filter Configurator: 3-language label group inside one editor row */
.label-i18n { display: flex; gap: 4px; }
.label-i18n input { width: 90px; font-size: 12px; }

/* Instant search */
.header-search { position: relative; flex: 0 1 260px; }
.header-search input { width: 100%; background: #14141a; border: 1px solid #2c2c36;
  color: #eee; border-radius: 20px; padding: 8px 16px; font: inherit; font-size: 13px; }
.header-search input:focus { border-color: #c5a059; outline: none; }
#og-search-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: 90vw;
  background: #14141a; border: 1px solid #c5a059; border-radius: 10px; z-index: 60;
  box-shadow: 0 12px 34px rgba(0,0,0,.6); overflow: hidden; }
.search-item { display: flex; gap: 12px; align-items: center; padding: 10px 14px;
  text-decoration: none; color: #eee; border-bottom: 1px solid #22222b; }
.search-item:hover { background: rgba(197,160,89,.08); }
.search-item img, .search-noimg { width: 46px; height: 46px; object-fit: cover; border-radius: 6px;
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #c5a059; background: #1c1c24; }
.search-title { display: block; font-size: 13.5px; line-height: 1.35; }
.search-meta { display: block; font-size: 12px; color: #9a9aa5; margin-top: 2px; }
.search-meta strong { color: #c5a059; }
.search-meta s { color: #6a6558; }
.search-all { display: block; padding: 11px 14px; text-align: center; color: #c5a059;
  text-decoration: none; font-size: 13px; background: rgba(197,160,89,.06); }
.search-empty { padding: 16px; color: #9a9aa5; font-size: 13px; text-align: center; }
.search-suggest { display: block; margin: 8px auto 0; background: none; border: 0; cursor: pointer;
  color: #c5a059; font: inherit; font-size: 13px; text-decoration: underline dotted; }
.search-suggest strong { color: #e6c37a; }
.search-again a { color: #c5a059; font-size: 14px; text-decoration: underline dotted; }
.search-again strong { color: #e6c37a; }

/* The expand button sits inside the input's right edge. It appears only once
   there are results — an icon that opens an empty screen is worse than none. */
.header-search input { padding-right: 38px; }
.search-expand { position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: none; border: 0; padding: 2px; cursor: pointer; color: #7d7d8a;
  display: flex; align-items: center; transition: color .15s; }
.search-expand:hover, .search-expand:focus-visible { color: #c5a059; outline: none; }

/* Fullscreen results — the photograph at a size you can judge it by. */
.search-box { position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background: rgba(8,8,10,.94); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s ease; }
.search-box.open { opacity: 1; }
.search-box-head { position: sticky; top: 0; z-index: 1; display: flex; gap: 16px;
  align-items: flex-start; justify-content: space-between; padding: 22px clamp(16px, 4vw, 48px) 18px;
  background: linear-gradient(180deg, rgba(8,8,10,.98) 70%, rgba(8,8,10,0));
  border-bottom: 1px solid rgba(197,160,89,.25); }
.search-box-head h2 { margin: 0; font-size: 17px; font-weight: 500; color: #f5f0e6; letter-spacing: .02em; }
.search-box-head p { margin: 4px 0 0; font-size: 13px; color: #9a9aa5; }
.search-box-close { background: none; border: 1px solid #2c2c36; border-radius: 50%;
  width: 34px; height: 34px; flex: 0 0 auto; color: #c5a059; font-size: 15px; cursor: pointer;
  transition: border-color .15s, background .15s; }
.search-box-close:hover, .search-box-close:focus-visible { border-color: #c5a059; background: rgba(197,160,89,.1); outline: none; }
.search-box-grid { display: grid; gap: clamp(14px, 2vw, 26px); padding: 26px clamp(16px, 4vw, 48px) 40px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.search-card { text-decoration: none; color: #eee; display: block;
  border: 1px solid #22222b; border-radius: 12px; overflow: hidden; background: #101015;
  transition: border-color .18s, transform .18s; }
.search-card:hover { border-color: #c5a059; transform: translateY(-3px); }
.search-card-img { position: relative; display: block; aspect-ratio: 1 / 1; background: #1c1c24; }
.search-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-card-img .search-noimg { width: 100%; height: 100%; border-radius: 0; font-size: 30px; }
.search-card.sold .search-card-img img { filter: grayscale(1) brightness(.6); }
.search-card-sold { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 4px;
  background: rgba(8,8,10,.85); color: #c5a059; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.search-card-body { display: block; padding: 12px 14px 14px; }
.search-card-title { display: block; font-size: 14px; line-height: 1.35; }
.search-card-meta { display: block; margin-top: 4px; font-size: 12px; color: #9a9aa5; }
.search-card-meta em { font-style: normal; color: #6f6a5e; }
.search-card-price { display: block; margin-top: 8px; color: #c5a059; font-size: 14px; }
.search-card-price s { color: #6a6558; font-size: 12px; }
.search-box-empty { padding: 60px 20px; text-align: center; color: #9a9aa5; }
.search-box-foot { padding: 0 clamp(16px, 4vw, 48px) 46px; text-align: center; }
.search-box-foot a { color: #c5a059; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .search-box, .search-card { transition: none; }
  .search-card:hover { transform: none; }
}

/* Facet filters — each group collapses, so a long sidebar stays scannable */
.facet-group { margin: 6px 0; border-bottom: 1px solid var(--line); }
.facet-group > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 10px 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold); user-select: none;
}
.facet-group > summary::-webkit-details-marker { display: none; }
.facet-group > summary:hover { color: var(--gold-soft); }
/* The +/- sign is drawn, not typed, so it never depends on a font */
.facet-sign { position: relative; width: 11px; height: 11px; flex: none; }
.facet-sign::before, .facet-sign::after {
  content: ""; position: absolute; background: currentColor; border-radius: 1px;
  transition: transform .18s ease, opacity .18s ease;
}
.facet-sign::before { inset: 5px 0 5px 0; height: 1.5px; }
.facet-sign::after { inset: 0 5px 0 5px; width: 1.5px; }
.facet-group[open] .facet-sign::after { transform: rotate(90deg); opacity: 0; }
.facet-picked {
  margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--gold); color: var(--obsidian);
  font-size: 10px; letter-spacing: 0; text-align: center;
}
.facet-body { padding: 0 2px 12px; }
.facet-option { display: flex; align-items: center; gap: 8px; padding: 3px 0;
  font-size: 13px; color: #ccc; cursor: pointer; }
.facet-option input { accent-color: #c5a059; }
.facet-option .cnt { color: #7a7568; font-size: 11.5px; margin-left: auto; }
.facet-clear { display: inline-block; margin-top: 10px; font-size: 12.5px; color: #c5a059; }

/* --- Design layouts (admin) -------------------------------------------------- */
.lay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.lay-actions { display: flex; gap: 10px; align-items: center; }
.lay-actions select { width: auto; margin: 0; min-width: 190px; }
.lay-domain {
  border: 1px solid rgba(197,160,89,.18); border-radius: 6px;
  background: rgba(10,10,10,.4); padding: 14px 16px; margin: 12px 0;
}
.lay-domain-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lay-domain-head strong { font-size: 15px; }
.lay-domain-head .muted { margin-left: 8px; }
.lay-pick { display: flex; align-items: center; gap: 8px; margin: 0; }
.lay-pick select { width: auto; margin: 0; min-width: 210px; }
.lay-brand { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 10px; }
.cov-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.cov-pill {
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  background: rgba(197,160,89,.1); border: 1px solid rgba(197,160,89,.3); color: #c9c2b5;
}
.cov-pill strong { color: var(--gold-soft); margin-right: 4px; }
.cat-desc-row td { padding-top: 0; border-top: 0; }
.cat-desc-row input { margin: 0 0 6px; font-size: 13px; }
.lay-sub { margin: 18px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8d8579; }
/* EN/DE versions of one copy field, tucked under the Slovak input. An empty
   one is dimmed rather than hidden: the gap is the thing worth noticing. */
.lay-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: -4px 0 8px; }
.lay-lang { display: flex; align-items: center; gap: 5px; }
.lay-lang i {
  font-style: normal; font-size: 10px; letter-spacing: .08em; color: #8d8579;
  min-width: 18px;
}
.lay-lang input { margin: 0; font-size: 12px; padding: 5px 7px; }
.lay-lang.is-empty input { border-style: dashed; }
.lay-img-preview { display: flex; align-items: center; gap: 10px; padding-top: 22px; }
.lay-img-preview img { max-height: 40px; width: auto; background: rgba(255,255,255,.06); border-radius: 4px; padding: 4px; }
.lay-img-wide { grid-column: 1 / -1; padding-top: 10px; }
.lay-img-wide img { max-height: 64px; max-width: 100%; }
.lay-warn {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 6px; font-size: 13px;
  background: rgba(196,106,90,.12); border: 1px solid rgba(196,106,90,.4); color: #e2c0b6;
}
.lay-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: 12px; }
.lay-card {
  border: 1px solid rgba(197,160,89,.18); border-radius: 6px; padding: 12px;
  background: rgba(10,10,10,.4); cursor: pointer; transition: border-color .15s, transform .15s;
}
.lay-card:hover { border-color: rgba(197,160,89,.55); transform: translateY(-2px); }
.lay-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lay-card.is-active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.lay-card.is-active .lay-name::after { content: ' ✓'; color: var(--gold); }
.lay-card-actions { margin-top: 8px; cursor: default; }

/* --- Layout editor ----------------------------------------------------------- */
/* The preview earns its width: it is the only place the arrangement can be
   judged. The colours column pays for it — swatches read fine when narrow. */
.led-cols { display: grid; gap: 18px; grid-template-columns: minmax(170px, .55fr) minmax(340px, 1.6fr) minmax(300px, 1.15fr); align-items: start; }
.led-cols > :last-child { position: sticky; top: 12px; }
@media (max-width: 1100px) { .led-cols { grid-template-columns: 1fr; } }
/* Colours: compact two-column chips instead of a tall stack of full rows. */
.led-colors { display: grid; gap: 6px 10px; grid-template-columns: 1fr 1fr; }
.led-colors.led-colors-wide { grid-template-columns: 1fr; }
.led-color { display: block; font-size: 11px; color: #a49c8f; margin: 0; min-width: 0; }
.led-color > span:first-child { display: block; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.led-color-row { display: flex; gap: 5px; align-items: center; }
.led-color-row input[type="color"] { width: 26px; height: 26px; padding: 1px; border-radius: 4px; flex: none; }
.led-color-row input[type="text"] { margin: 0; min-width: 0; padding: 5px 7px; font-size: 11.5px; }
.led-color select, .led-color > input[type="text"] { width: 100%; padding: 5px 7px; font-size: 12px; }
.led-blocks { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.led-block {
  border: 1px solid rgba(197,160,89,.2); border-radius: 6px;
  background: rgba(10,10,10,.45); padding: 10px 12px;
}
.led-block.is-off { opacity: .5; }
.led-block.is-dragging { opacity: .35; border-style: dashed; }
.led-block-head { display: flex; align-items: center; gap: 10px; }
.led-block-name { display: flex; flex-direction: column; line-height: 1.3; }
.led-grip { cursor: grab; color: #7d766a; font-size: 17px; user-select: none; }
.led-grip:active { cursor: grabbing; }
.led-opts { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 10px 0 0 28px; }
.led-opts label { font-size: 11.5px; margin: 0 0 6px; }
.led-check { display: flex; align-items: center; gap: 7px; grid-column: 1 / -1; }
.led-check input { width: auto; margin: 0; }
.led-num { color: var(--gold-soft); }
.led-prev { border: 1px solid rgba(197,160,89,.25); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.led-prev-row {
  border-radius: 3px; padding: 7px 9px; font-size: 10.5px; min-height: 26px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.led-prev-header { border-bottom: 1px solid; padding: 5px 9px; justify-content: space-between; }
.led-prev-label { opacity: .65; letter-spacing: .06em; }
.led-prev-grid { display: grid; width: 100%; margin-top: 5px; }
.led-prev-grid i { display: block; border-radius: 2px; }
.lay-preview {
  border: 1px solid; border-radius: 4px; height: 96px; padding: 10px;
  display: flex; flex-direction: column; justify-content: space-between; position: relative;
}
.lay-preview-title { font-size: 26px; line-height: 1; }
.lay-preview-body { font-size: 12px; }
.lay-swatches { position: absolute; right: 8px; top: 10px; display: flex; gap: 4px; }
.lay-swatches i { width: 11px; height: 11px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(128,128,128,.3); }
.lay-meta { display: flex; align-items: center; gap: 7px; margin: 9px 0 4px; flex-wrap: wrap; }

/* ==========================================================================
   OBNOVENÉ 27. 7. 2026 — pri úprave odznaku konzoly som zlým výrezom textu
   (od jednej značky po druhú) zmazal 274 pravidiel medzi nimi: strom
   kategórií, pás drahokamov, mozaika fotiek, parametre produktu a ďalšie.
   Vrátené doslova z balíka ver 7.1; pravidlá, ktoré som medzitým zámerne
   prepísal, sa nevracajú — tie v súbore ostali.
   ========================================================================== */
.gem-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 9px; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--charcoal); color: var(--muted);
  transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.gem-chip-icon { color: var(--gem); line-height: 0; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gem) 45%, transparent)); }
.gem-chip-label { font-size: 12.5px; white-space: nowrap; }
.gem-chip-count { font-size: 10.5px; opacity: .6; }
.gem-chip:hover { border-color: var(--gem); color: var(--ivory); transform: translateY(-2px); }
.gem-chip.is-active {
  border-color: var(--gem); color: var(--ivory); background: var(--charcoal-2);
  box-shadow: inset 0 0 0 1px var(--gem), 0 0 12px color-mix(in srgb, var(--gem) 30%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .gem-chip-icon { filter: none; }
  .gem-chip.is-active { box-shadow: inset 0 0 0 1px var(--gem); }
}
.nav-tree-section { padding-top: 8px; }
.nav-tree { display: flex; flex-direction: column; align-items: center; }
.nav-tree-root { display: flex; flex-direction: column; align-items: center; position: relative; }
.nav-tree-root::after {
  content: ""; width: 1px; height: 30px; background: var(--line); margin-top: 10px;
}
.nav-tree-mark {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--charcoal); color: var(--gold);
}
.nav-tree-title {
  font-family: var(--serif); font-size: 22px; letter-spacing: .14em;
  text-transform: uppercase; margin: 12px 0 0; color: var(--ivory);
}
.nav-tree-globe { padding: 0; border: 0; background: none; }
.nav-tree-globe canvas { display: block; }
.nav-tree-branches {
  display: grid; gap: 26px; width: 100%;
  grid-template-columns: repeat(var(--branches, 4), minmax(0, 1fr));
  position: relative; padding-top: 26px;
}
.nav-tree-branches::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--line);
  left: calc(50% / var(--branches, 4)); right: calc(50% / var(--branches, 4));
}
.nav-branch { display: flex; flex-direction: column; align-items: center; position: relative; }
.nav-branch::before {
  content: ""; position: absolute; top: -26px; width: 1px; height: 26px; background: var(--line);
}
.nav-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--ivory); text-align: center; padding: 4px;
}
.nav-node-icon {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--charcoal); color: var(--gold);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.nav-node-2 .nav-node-icon { width: 46px; height: 46px; }
.nav-node:hover { color: var(--gold-soft); }
.nav-node:hover .nav-node-icon {
  border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--gold-glow);
}
.nav-node-label {
  font-family: var(--serif); font-size: 15px; letter-spacing: .06em; line-height: 1.25;
}
.nav-node-2 .nav-node-label { font-size: 13px; font-family: var(--sans); }
.nav-node-count { font-size: 10.5px; color: var(--muted); letter-spacing: .1em; }
.nav-kids {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; position: relative; width: 100%;
}
.nav-kids::before {
  content: ""; position: absolute; top: -22px; left: 50%; width: 1px; height: 22px;
  background: var(--line);
}
@media (max-width: 520px) {
  .nav-tree-branches { grid-template-columns: 1fr; }
  .nav-kids { gap: 6px; }
}
.lay-cards-shadow .product-card, .lay-cards-shadow .cat-tile {
  border-color: transparent; box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.lay-cards-plain .product-card, .lay-cards-plain .cat-tile {
  border-color: transparent; background: transparent;
}
.lay-hover-none .product-card:hover, .lay-hover-none .cat-tile:hover { transform: none; box-shadow: none; }
.lay-hover-none .product-card:hover .card-media img,
.lay-hover-none .cat-tile:hover img { transform: none; }
.lay-hover-lift .product-card:hover, .lay-hover-lift .cat-tile:hover { transform: translateY(-6px); }
.lay-hover-lift .product-card:hover .card-media img,
.lay-hover-lift .cat-tile:hover img { transform: none; }
.lay-head-caps h1, .lay-head-caps h2, .lay-head-caps h3,
.lay-head-caps .section-title, .lay-head-caps .cat-tile-name {
  text-transform: uppercase; letter-spacing: .1em;
}
.lay-head-caps .section-title { font-size: 22px; }
.lay-head-plain h1, .lay-head-plain h2, .lay-head-plain h3,
.lay-head-plain .section-title, .lay-head-plain .cat-tile-name { font-family: var(--sans); font-weight: 600; }
.lay-bar-none .section-title { border-left: 0; padding-left: 0; }
.lay-bar-under .section-title {
  border-left: 0; padding-left: 0; padding-bottom: 8px;
  border-bottom: 2px solid var(--gold); display: inline-block;
}
.lay-anim-off .reveal { animation: none; opacity: 1; transform: none; }
.lay-anim-off .hero-bg { animation: none; transform: none; }
.lay-anim-off .cat-tile img, .lay-anim-off .card-media img { transition: none; }
.lay-cards-glass .product-card, .lay-cards-glass .cat-tile {
  background: rgba(var(--scrim-rgb), .38);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lay-anim-rich .hero-bg { transform: scale(1.14); animation: heroDrift 16s ease-out forwards; }
.lay-anim-rich .reveal { transform: translateY(28px); animation-duration: 1.1s; }
.lay-anim-rich .reveal:nth-child(2) { animation-delay: .18s; }
.lay-anim-rich .reveal:nth-child(3) { animation-delay: .36s; }
.lay-anim-rich .reveal:nth-child(4) { animation-delay: .54s; }
.lay-anim-rich .cat-tile img, .lay-anim-rich .card-media img { transition-duration: .9s; }
.lay-anim-rich .cat-tile:hover img { transform: scale(1.09); }
.hero-title-s { font-size: clamp(38px, 6vw, 64px); }
.hero-title-m { font-size: clamp(54px, 9vw, 96px); }
.about-band {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 50% 80% at 85% 20%, rgba(197,160,89,.10), transparent),
    var(--charcoal);
}
.about-inner {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
  align-items: center; padding-top: 64px; padding-bottom: 64px;
}
.about-heading { margin: 4px 0 10px; }
.about-script {
  font-family: var(--script); font-weight: 400; font-size: 56px; line-height: 1;
  background: linear-gradient(100deg, var(--logo-hi) 10%, var(--gold-soft) 50%, var(--gold) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-soft);
}
.about-text { color: #c9c2b6; font-size: 15.5px; line-height: 1.75; max-width: 60ch; }
.about-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.about-chips li {
  border: 1px solid rgba(197,160,89,.22); border-radius: 6px;
  background: rgba(10,10,10,.45); padding: 14px 18px;
  font-size: 14px; color: var(--ivory); letter-spacing: .02em;
}
@media (max-width: 820px) { .about-inner { grid-template-columns: 1fr; gap: 28px; } }
.section-title { font-size: 30px; border-left: 3px solid var(--gold); padding-left: 14px; }
.page-title { font-size: 34px; margin-top: 0; }
.catalog-toolbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.sort-control { display: flex; align-items: center; gap: 10px; margin: 0; }
.sort-label {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
/* Dressed like the search field in the header, and — the point of it — the
   opened list too. A native option list takes the browser's own colours unless
   both the box AND the options are told, which is how the same control ended
   up dark-on-dark on the light shop. */
.sort-control select {
  width: auto; margin: 0; padding: 8px 12px; font-size: 13px;
  background: #14141a; border: 1px solid #2c2c36;
  color: #eee; border-radius: 20px; cursor: pointer;
}
.sort-control select:hover, .sort-control select:focus {
  border-color: #c5a059; outline: none; box-shadow: none;
}
.sort-control select option {
  /* Grey on black: the list is read as a list, and the one in force stands
     out by being brighter rather than by being a different colour. */
  background: #000; color: #b9b5ad;
}
.sort-control select option:checked { color: #fff; }
.pay-fallback { margin-top: 14px; }
.pay-fallback summary {
  cursor: pointer; font-size: 12.5px; color: var(--muted);
  padding: 6px 0; list-style: none;
}
.pay-fallback summary::-webkit-details-marker { display: none; }
.pay-fallback summary::before { content: '▸ '; color: var(--gold); }
.pay-fallback[open] summary::before { content: '▾ '; }
.pay-fallback summary:hover { color: var(--gold-soft); }
.pay-fallback p { margin: 4px 0 10px; }
.sort-th { color: inherit; white-space: nowrap; }
.sort-th:hover { color: var(--gold); }
.sort-th.active { color: var(--gold); }
.offer-panel {
  margin-top: 18px; padding: 18px 20px; border-radius: 6px;
  border: 1px solid rgba(197,160,89,.3);
  background: radial-gradient(ellipse 70% 60% at 20% 0%, rgba(197,160,89,.09), transparent), rgba(17,17,17,.75);
}
.offer-panel h3 { margin: 0 0 4px; font-size: 21px; color: var(--gold-soft); }
.offer-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.offer-panel label { font-size: 12px; }

/* Kam ísť po odoslaní ponuky. Oddelené linkou, aby to nevyzeralo ako ďalšie
   pole formulára, ktoré treba vyplniť. */
.offer-account { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(197,160,89,.25); }
.offer-account h4 { margin: 0 0 4px; font-size: 15px; color: var(--gold-soft); }
.offer-account-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.stat-good { color: var(--ok); }
.stat-bad  { color: var(--danger); }
.stat-charts {
  display: grid; gap: 22px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.stat-chart { margin: 0; text-align: center; }
.stat-chart figcaption {
  margin-top: 8px; font-size: 12px; letter-spacing: .06em; color: var(--gold);
  text-transform: uppercase;
}
.donut { width: 100%; max-width: 190px; height: auto; }
.donut path { transition: opacity .2s; }
.donut path:hover { opacity: .82; }
.donut-top {
  fill: var(--ivory); font-size: 17px; font-weight: 700;
  text-anchor: middle; font-family: var(--sans);
}
.donut-sub {
  fill: var(--muted); font-size: 9px; letter-spacing: .12em;
  text-anchor: middle; text-transform: uppercase; font-family: var(--sans);
}
.stat-legend { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; font-size: 12.5px; }
.stat-legend li { display: flex; align-items: center; gap: 7px; padding: 2px 0; color: var(--muted); }
.stat-legend strong { margin-left: auto; color: var(--ivory); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.stat-table { min-width: 860px; }
.stat-table tfoot td { border-top: 1px solid var(--line); padding-top: 10px; }
.stat-grid {
  display: grid; gap: 16px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.stat-card {
  border: 1px solid rgba(197,160,89,.18); border-radius: 6px;
  background: rgba(10,10,10,.45); padding: 14px 16px;
}
.stat-card h3 { margin: 0 0 10px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.stat-card dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 13px; }
.stat-card dt { color: var(--muted); }
.stat-card dd { margin: 0; text-align: right; color: var(--ivory); }
.stat-bar {
  height: 6px; background: rgba(197,160,89,.15); border-radius: 99px;
  overflow: hidden; margin-top: 6px;
}
.stat-bar span { display: block; height: 100%; background: var(--gold); }
.cmp-card {
  border: 1px solid rgba(197,160,89,.18); border-radius: 6px;
  background: rgba(10,10,10,.45); padding: 12px 14px; margin: 10px 0;
}
.cmp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cmp-head code { font-size: 12px; }
.cmp-pick { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ivory); }
.cmp-pick input { width: auto; margin: 0; }
.cmp-badge {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; border: 1px solid;
}
.cmp-badge.new     { color: var(--ok);     border-color: rgba(127,174,122,.5); }
.cmp-badge.changed { color: var(--gold);   border-color: rgba(197,160,89,.5); }
.cmp-badge.same    { color: var(--muted);  border-color: rgba(154,147,138,.35); }
.cmp-badge.worse   { color: var(--danger); border-color: rgba(196,106,90,.5); }
.cmp-warn { margin: 4px 0 8px; font-size: 12.5px; color: var(--danger); }
.cmp-warn-inline { color: var(--danger); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 5px 8px; vertical-align: top; }
.cmp-table thead th {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid rgba(197,160,89,.25);
}
.cmp-table tbody th { width: 130px; color: var(--muted); font-weight: 400; }
.cmp-table tbody tr + tr { border-top: 1px solid rgba(197,160,89,.08); }
.cmp-table tr.cmp-diff td:nth-child(2) { color: var(--gold-soft); font-weight: 600; }
.cmp-table tr.cmp-diff th { color: var(--gold); }
.import-log {
  max-height: 280px; overflow: auto; margin-top: 14px; padding: 12px 14px;
  background: rgba(10,10,10,.7); border: 1px solid rgba(197,160,89,.18);
  border-radius: 4px; font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; line-height: 1.55; color: var(--muted); white-space: pre-wrap;
}
.globe-widget {
  margin: 0 0 22px; padding: 14px 12px 10px;
  border: 1px solid rgba(197,160,89,.22); border-radius: 8px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(197,160,89,.07), transparent),
    rgba(17,17,17,.6);
  text-align: center;
}
.globe-title {
  margin: 0 0 8px; font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); font-family: var(--sans); font-weight: 600;
}
#origin-globe { display: block; margin: 0 auto; user-select: none; }
#origin-globe:active { cursor: grabbing !important; }
.globe-status {
  margin: 8px 0 2px; font-size: 12.5px; color: var(--muted);
  min-height: 18px; font-style: italic;
}
.globe-selected { margin: 6px 0 2px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.globe-chip {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  border: 1px solid rgba(197,160,89,.45); font-size: 12.5px; color: var(--ivory);
}
.globe-chip.active { background: rgba(197,160,89,.14); color: var(--gold-soft); }
.globe-clear { font-size: 12px; color: var(--muted); }
.globe-clear:hover { color: var(--danger); }
.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--pad, 16px);
}
.product-card:hover { border-color: var(--gold); box-shadow: var(--gold-glow); transform: translateY(-2px); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .card-media img { transform: scale(1.04); }
.card-media-empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: rgba(197,160,89,.35); font-size: 40px; aspect-ratio: var(--ratio, 3/4);
}
.card-body { padding: 14px 16px 18px; }
.card-meta { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card-price { margin: 8px 0 0; color: var(--gold-soft); font-weight: 600; letter-spacing: .04em; }
.card-sold { color: var(--danger); font-size: 11px; letter-spacing: .2em; margin: 6px 0 0; }
.price-locked { color: var(--muted); font-weight: 500; }
.price-locked a { color: var(--gold); }
.price-admin-note {
  display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: middle;
}
.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; }
.catalog-results { min-width: 0; }
.catalog-filters h2 { font-size: 20px; margin-top: 0; }
.filter-field { display: block; margin: 14px 0; font-size: 13px; color: var(--muted); }
.filter-field > span { display: block; margin-bottom: 4px; }
.range-pair { display: flex; gap: 8px; }
.range-pair label { flex: 1; margin: 0; }
.filter-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.product-page { position: relative; }
.product-ambient {
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--backdrop); background-size: cover; background-position: center;
  filter: blur(60px) brightness(.35) saturate(1.2);
  opacity: .55;
}
/* 28px between the photo strip and the details: enough to separate them,
   little enough that they still read as one piece. */
.product-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; }
.gallery-hero {
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  background: var(--charcoal);
  display: block; width: 100%; padding: 0; cursor: zoom-in; position: relative;
}
.gallery-hero img { width: 100%; display: block; }
.gallery-hero:hover { border-color: var(--gold); }
.gallery-expand, .gallery-counter {
  position: absolute; z-index: 1; border-radius: 999px; line-height: 0;
  background: rgba(var(--scrim-rgb), .62); color: var(--ivory);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .15s, color .15s;
}
.gallery-expand { top: 12px; right: 12px; padding: 8px; }
.gallery-counter {
  bottom: 12px; right: 12px; padding: 4px 11px;
  font-size: 11.5px; letter-spacing: .08em; line-height: 1.5;
}
.gallery-hero:hover .gallery-expand { background: var(--gold); color: #14100a; }
body.lb-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(var(--scrim-rgb), .96);
  display: grid; grid-template-rows: 1fr auto auto;
  animation: lbIn .18s ease;
}
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-stage {
  margin: 0; display: grid; place-items: center; overflow: hidden;
  padding: 46px 68px 8px; min-height: 0;
}
.lb-stage img {
  max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in;
  opacity: 0; transition: opacity .22s ease;
  /* transform is deliberately NOT transitioned: an animated zoom whose
     origin moves with every click would not settle reliably, and an
     instant zoom is what a viewer expects from a click anyway. */
  border-radius: 2px;
}
.lb-stage img.is-in { opacity: 1; }
.lb-stage.is-zoomed img { cursor: zoom-out; }
.lb-close, .lb-nav {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(var(--scrim-rgb), .5); border: 1px solid var(--line);
  color: var(--ivory); transition: background .15s, color .15s, border-color .15s;
}
.lb-close:hover, .lb-nav:hover { background: var(--gold); color: #14100a; border-color: var(--gold); }
.lb-close { top: 16px; right: 18px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-bar {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 6px 16px 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.lb-count { color: var(--gold-soft); letter-spacing: .1em; }
.lb-thumbs {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 18px;
  justify-content: center; min-width: 0;
}
.lb-thumb {
  width: 60px; height: 60px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid rgba(197,160,89,.25); border-radius: 2px; overflow: hidden;
  background: var(--charcoal); opacity: .55; transition: opacity .15s, border-color .15s;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: .85; }
.lb-thumb.active { opacity: 1; border-color: var(--gold); }
@media (max-width: 640px) {
  .lb-stage { padding: 44px 10px 8px; }
  .lb-nav { width: 38px; height: 38px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-hint { display: none; }
  .lb-thumb { width: 46px; height: 46px; }
}
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumb {
  width: 72px; height: 72px; padding: 0; border: 1px solid rgba(197,160,89,.2);
  border-radius: 2px; overflow: hidden; cursor: pointer; background: var(--charcoal);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.active { border-color: var(--gold); box-shadow: var(--gold-glow); }
.product-category { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.product-title { font-size: 38px; margin: 8px 0; }
.product-price { color: var(--gold-soft); font-size: 24px; font-weight: 600; margin: 0 0 18px; }
.product-story p { color: #cfc8bc; }
.product-actions { display: flex; flex-direction: column; gap: 12px; margin: 26px 0; }
.sold-note { color: var(--danger); letter-spacing: .06em; }
.product-specs h2, .product-faq h2 { font-size: 22px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.product-specs dl { margin: 0; }
.spec-row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 8px 0; border-bottom: 1px solid rgba(197,160,89,.08);
}
.spec-row dt { color: var(--muted); font-size: 13px; }
.spec-row dd { margin: 0; text-align: right; font-size: 14px; }
.faq-item { border-bottom: 1px solid rgba(197,160,89,.1); padding: 10px 0; }
.faq-item summary { cursor: pointer; color: var(--gold-soft); font-weight: 500; }
.faq-item p { color: var(--ivory); opacity: .82; margin: 10px 0 4px; }
.faq-list { columns: 2; column-gap: 40px; }
.faq-list .faq-item { break-inside: avoid; -webkit-column-break-inside: avoid; }
.faq-list .faq-item summary { font-size: 16px; font-family: var(--serif); }
.faq-list .faq-item p { max-width: 60ch; font-size: 14px; }
.product-aside { margin-top: 28px; }
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60;
}
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 61;
  background: var(--charcoal); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 22px;
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { margin: 0; font-size: 26px; }
.drawer-close {
  background: none; border: none; color: var(--muted); font-size: 28px; cursor: pointer; line-height: 1;
}
.drawer-close:hover { color: var(--gold); }
.drawer-items { flex: 1; overflow-y: auto; margin: 18px 0; }
.cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(197,160,89,.1); }
.cart-line img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; }
.cart-line-media-empty {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: var(--charcoal-2); color: rgba(197,160,89,.35); border-radius: 2px;
}
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-title { font-size: 14px; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-line-price { color: var(--gold-soft); font-size: 13px; margin: 0; }
.qty-stepper { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty-stepper button {
  width: 22px; height: 22px; border: 1px solid var(--line); background: none;
  color: var(--gold-soft); cursor: pointer; border-radius: 2px; font-size: 13px; line-height: 1;
}
.cart-line-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.cart-line-remove:hover { color: var(--danger); }
.drawer-summary .row { display: flex; justify-content: space-between; margin: 6px 0; font-size: 14px; }
.drawer-summary .row.total { font-size: 17px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.drawer-summary .btn { margin-top: 14px; }
.drawer-empty { color: var(--muted); text-align: center; margin-top: 40px; }
.checkout-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; align-items: start; }
.checkout-summary .row { display: flex; justify-content: space-between; margin: 6px 0; font-size: 14px; }
.checkout-summary .row.total { font-size: 17px; border-top: 1px solid var(--line); padding-top: 10px; }
.checkout-summary #paypal-button-container { margin-top: 18px; }
#checkout-items .cart-line-title { max-width: 240px; }
#simulate-pay { margin-top: 16px; }
.verify-form { display: flex; gap: 10px; margin: 22px 0; }
.verify-form input { flex: 1; margin: 0; }
.provenance-card { margin-top: 26px; }
.provenance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 18px 0; }
.provenance-grid .cell { border: 1px solid rgba(197,160,89,.14); padding: 10px 12px; border-radius: 2px; }
.provenance-grid .cell b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.timeline { border-left: 2px solid var(--gold); margin: 18px 0 0 6px; padding-left: 18px; }
.timeline-item { position: relative; margin-bottom: 14px; }
.timeline-item::before {
  content: ''; position: absolute; left: -24px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}
.timeline-item time { color: var(--gold-soft); font-size: 12px; letter-spacing: .06em; display: block; }
.account-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; align-items: start; }
.tab-row { display: flex; gap: 8px; margin-bottom: 16px; }
.tab {
  flex: 1; padding: 10px; background: none; border: 1px solid var(--line);
  color: var(--muted); cursor: pointer; font-family: var(--sans);
  letter-spacing: .08em; text-transform: uppercase; font-size: 12px;
}
.tab.active { border-color: var(--gold); color: var(--gold-soft); }
.order-card { border: 1px solid rgba(197,160,89,.14); border-radius: 3px; padding: 14px 16px; margin-bottom: 14px; }
.order-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.badge {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 2px 8px; border-radius: 10px; color: var(--muted);
}
.badge-paid { border-color: var(--ok); color: var(--ok); }
.badge-pending { border-color: var(--gold); color: var(--gold-soft); }
.order-items { margin: 10px 0; padding-left: 18px; font-size: 14px; }
.order-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  position: relative; width: min(460px, 100%);
  background: var(--charcoal); border: 1px solid var(--gold);
  border-radius: 3px; padding: 26px; box-shadow: var(--gold-glow);
  max-height: 90vh; overflow-y: auto;
}
.modal h2 { margin-top: 0; font-size: 24px; }
.modal-close { position: absolute; top: 10px; right: 14px; }
.site-footer { border-top: 1px solid var(--line); margin-top: 60px; background: var(--charcoal); }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 44px 24px 20px; }
.footer-tagline { color: var(--muted); font-size: 13px; max-width: 380px; }
.footer-newsletter h3 { margin-top: 0; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input { flex: 1; margin: 0; }
.footer-legal { padding: 14px 24px 26px; color: var(--muted); font-size: 12px; border-top: 1px solid rgba(197,160,89,.08); }
/* Vlastná poznámka v pätičke. Pod odkazmi a tlmenejšia než ony — je to dodatok
   k obchodu, nie ďalšia navigácia, a nesmie súťažiť s odkazmi na podmienky. */
.footer-note { padding: 0 24px 26px; color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.footer-note :first-child { margin-top: 0; }
.footer-note :last-child { margin-bottom: 0; }
.footer-note p { margin: 0 0 8px; }
.footer-note a { color: var(--gold); }
.footer-note h2, .footer-note h3 { color: var(--ivory); font-size: 14px; margin: 0 0 6px; }
.footer-note img { max-width: 100%; height: auto; }
.footer-note ul, .footer-note ol { margin: 0 0 8px; padding-left: 20px; }
.html-brick { margin: 18px auto; }
.edit-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 80;
  background: var(--charcoal); color: var(--gold-soft);
  border: 1px solid var(--gold); border-radius: 24px; padding: 12px 20px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: var(--gold-glow);
}
.edit-fab.active { background: var(--gold); color: #14100a; }
.facet-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: #c5a059; margin: 0 0 8px; }

/* ==========================================================================
   Znovu napísané po tej istej nehode (27. 7. 2026) — tieto pravidlá vznikli
   počas dnešnej práce a zmizli spolu s tým výrezom. Obsahovo sú rovnaké ako
   pôvodné; overené proti stránkam, ktoré ich používajú.
   ========================================================================== */

/* --- galéria produktu: hlavná fotka + zvislý stĺpec ---------------------- */
.gallery-mosaic {
  display: grid; gap: 6px; margin-top: 0;
  grid-template-columns: 4fr 1fr; grid-template-rows: repeat(12, 1fr);
  aspect-ratio: 5 / 4; max-width: min(100%, calc((100vh - 235px) * 1.25));
  /* Pushed to the inner edge of its column: the height cap leaves slack, and
     centring it put that slack between the photos and the text they belong to.
     Now the only space there is the column gap. */
  margin-inline: auto 0;
}
.gallery-mosaic .thumb {
  width: auto; height: auto; min-width: 0; min-height: 0;
  border-radius: var(--radius, 3px); position: relative;
  grid-column: 2; grid-row: span 3;
  transition: border-color .15s, transform .15s;
}
.gallery-mosaic .thumb-lead { grid-column: 1; grid-row: 1 / 13; }
.gallery-mosaic[data-count="1"] .thumb-lead { grid-column: 1 / 3; }
.gallery-mosaic[data-count="2"] .thumb:not(.thumb-lead) { grid-row: span 12; }
.gallery-mosaic[data-count="3"] .thumb:not(.thumb-lead) { grid-row: span 6; }
.gallery-mosaic[data-count="4"] .thumb:not(.thumb-lead) { grid-row: span 4; }
.gallery-more {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 15px; font-weight: 600;
  border-radius: var(--radius, 3px);
}
.gallery-more span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }

/* --- ambient pozadia stránky produktu ----------------------------------- */
.product-ambient {
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--backdrop); background-size: cover; background-position: center;
  filter: blur(60px) brightness(.35) saturate(1.2); opacity: .55;
}
.lay-prodbg-plain .product-ambient { display: none; }
.lay-prodbg-plain .product-page { background: var(--obsidian); }

/* --- späť + „ukáž ďalšie …" ---------------------------------------------- */
.product-nav {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; margin-bottom: 4px;
}
.product-back { padding: 7px 16px; }
.product-more { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; }
.product-more-icon { display: inline-flex; opacity: .85; }
.product-more-count {
  font-size: 12px; padding: 1px 7px; border-radius: 999px;
  background: rgba(197,160,89,.16); color: var(--gold-soft);
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; margin: 0 0 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-soft); }
.crumbs .sep { color: var(--muted); opacity: .55; }
.crumbs .here { color: var(--gold-soft); }
.ring-size-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* --- marža (len operátor) ------------------------------------------------ */
.admin-margin {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: -6px 0 14px; padding: 8px 12px;
  border: 1px dashed rgba(197,160,89,.45); border-radius: var(--radius, 3px);
  background: rgba(197,160,89,.06); font-size: 13px;
}
.admin-margin-tag {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.admin-margin strong { font-size: 15px; }
.admin-margin strong.is-plus { color: #6fbf73; }
.admin-margin strong.is-minus { color: #e06666; }
.admin-margin em { font-style: normal; opacity: .8; }
.admin-margin-two { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.admin-margin-two b { color: var(--ivory); font-weight: 600; }
.admin-margin-two span { cursor: help; border-bottom: 1px dotted var(--line); }
.card-margin {
  display: inline-block; margin: 2px 0 4px; padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px dashed rgba(197,160,89,.5); color: var(--gold-soft);
}
.card-margin.is-minus { color: #e06666; border-color: rgba(224,102,102,.5); }
.edit-inside { bottom: 70px; text-decoration: none; display: inline-flex; align-items: center; }
.edit-inside:hover { background: var(--gold); color: #14100a; }

/* --- mapa kategórií: rozmiestnenie počíta PHP ---------------------------- */
.nav-tree-orbit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: repeat(var(--orbit-rows, 3), auto);
  align-items: center; gap: 10px 26px;
}
.nav-tree-orbit .nav-tree-root { grid-column: 2; grid-row: 1 / -1; }
.nav-tree-orbit .nav-tree-root::after { display: none; }
.nav-tree-orbit .nav-tree-branches { display: contents; }
.nav-tree-orbit .nav-tree-branches::before { display: none; }
.nav-tree-orbit .nav-branch::before { display: none; }
.nav-tree-orbit .nav-branch { align-items: stretch; }
/* The base .nav-node stacks icon over label; in the orbit every branch is a
   row. Setting display:flex without the direction left the right-hand side
   stacked — the direction has to be said out loud. */
.nav-tree-orbit .nav-node-1 {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  text-align: left; padding: 4px 0;
}
/* One row per branch: the continent (or the kind of jewellery) at half again
   the size, and its categories running on beside it instead of underneath.
   Stacking them cost a whole row of height per branch and pulled the eye down
   when the point of the map is to read across. */
.nav-tree-orbit .nav-branch { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.nav-tree-orbit .nav-branch.is-left { flex-direction: row-reverse; }
.nav-tree-orbit .nav-node-1 { flex: 0 0 auto; }
.nav-tree-orbit .nav-node-1 .nav-node-icon { width: 78px; height: 78px; flex: none; }
.nav-tree-orbit .nav-kids {
  flex: 1 1 auto; width: auto; margin-top: 0; gap: 8px;
  justify-content: flex-start;
}
.nav-tree-orbit .nav-kids::before { display: none; }
.nav-tree-orbit .nav-branch.is-left .nav-kids { justify-content: flex-end; }
.nav-tree-orbit .nav-node-2 { flex-direction: column; }
.nav-tree-orbit .nav-node-2 .nav-node-icon { width: 42px; height: 42px; }
/* The shop's own logo in the middle of the map, sized to the space the globe
   would have taken rather than to the file's own pixels. */
.nav-tree-logo { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
@media (max-width: 900px) { .nav-tree-logo { max-width: 170px; } }
.nav-tree-orbit .nav-node-1 .nav-node-label { font-size: 16px; }
.nav-tree-orbit .nav-node-1 .nav-node-count { margin-left: -5px; }
.nav-tree-orbit .nav-kids { display: flex; flex-wrap: wrap; }
.nav-tree-orbit .nav-branch.is-left .nav-node-1 {
  flex-direction: row-reverse; text-align: right; justify-content: flex-start;
}
.nav-tree-orbit .nav-branch.is-left .nav-node-1 .nav-node-count { margin-left: 0; margin-right: -5px; }
.nav-tree-orbit .nav-branch.is-left .nav-kids { justify-content: flex-end; }
@media (max-width: 900px) {
  .nav-tree-orbit { grid-template-columns: 1fr; }
  .nav-tree-orbit .nav-tree-root { grid-column: 1; grid-row: auto; }
  .nav-tree-orbit .nav-branch { grid-column: 1 !important; grid-row: auto !important; }
  .nav-tree-orbit .nav-branch.is-left .nav-node-1 { flex-direction: row; text-align: left; }
  .nav-tree-orbit .nav-branch.is-left .nav-node-count { margin-left: auto; margin-right: 0; }
  .nav-tree-orbit .nav-branch.is-left .nav-kids { justify-content: flex-start; }
}
.gem-strip-home {
  justify-content: center; gap: 8px;
  margin: 26px auto 0; padding: 22px 2px 2px; max-width: 900px;
  border-top: 1px solid var(--line);
}

/* --- bočné reklamné panely ---------------------------------------------- */
.side-ads {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 40;
  display: none; flex-direction: column; gap: 12px;
  width: 160px; max-height: 88vh; overflow: auto; scrollbar-width: none;
}
.side-ads::-webkit-scrollbar { display: none; }
.side-ads-left { left: 12px; }
.side-ads-right { right: 12px; }
.side-ad { display: block; line-height: 0; border-radius: var(--radius, 3px); overflow: hidden; }
.side-ad img { width: 100%; height: auto; display: block; }
.side-ad:hover { outline: 1px solid var(--gold); }
@media (min-width: 1560px) { .side-ads { display: flex; } }
@media (min-width: 1800px) { .side-ads { width: 200px; } }

/* --- layout editor: skladanie blokov, zoznamy, tlačidlá ------------------ */
.led-block-head { cursor: pointer; }
.led-block-head .led-grip, .led-block-head .toggle-row { cursor: default; }
.led-block-body { display: none; }
.led-block.is-open .led-block-body { display: block; }
.led-fold {
  margin-left: auto; background: none; border: 0; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 4px 6px; cursor: pointer;
  transition: transform .15s, color .15s;
}
.led-block.is-open .led-fold { transform: rotate(180deg); color: var(--gold-soft); }
.led-block.is-open { border-color: rgba(197,160,89,.45); }
.led-btns { margin: 10px 0 4px; padding: 10px; border: 1px dashed rgba(197,160,89,.3); border-radius: 3px; }
.led-btns-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.led-btn-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.led-btn-row { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 6px; align-items: center; }
.led-btn-row .led-btn-custom { grid-column: 1 / -1; }
.led-btn-langs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.led-btn-row input, .led-btn-row select { margin: 0; font-size: 13px; padding: 5px 7px; }
.led-btn-del, .ad-del {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 3px; width: 26px; height: 26px; cursor: pointer; line-height: 1;
}
.led-btn-del:hover, .ad-del:hover { color: #e06666; border-color: #e06666; }
.led-btn-add:disabled, .led-list-add:disabled { opacity: .5; cursor: not-allowed; }
.led-list { margin: 10px 0 4px; padding: 10px; border: 1px dashed rgba(197,160,89,.3); border-radius: 3px; }
.led-list-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.led-list-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; }
.led-list-row.led-list-qa { grid-template-columns: 1fr 1.6fr auto; }
.led-list-row input, .led-list-row textarea { margin: 0; font-size: 13px; padding: 5px 7px; }
.led-list-row textarea { resize: vertical; min-height: 34px; }
.led-herotext { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.led-herotext > .muted { max-width: 62ch; }
.led-herohtml { border: 1px solid var(--line); border-radius: 3px; padding: 6px; }
.led-html-where { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; font-size: 12px; }
.led-html-where select { margin: 0; font-size: 13px; }
.led-html-where option:disabled { color: #6b655c; }
.led-switch { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.lay-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: -4px 0 8px; }
.lay-lang { display: flex; align-items: center; gap: 5px; }
.lay-lang i { font-style: normal; font-size: 10px; letter-spacing: .08em; color: var(--muted); min-width: 18px; }
.lay-lang input { margin: 0; font-size: 12px; padding: 5px 7px; }
.lay-lang.is-empty input { border-style: dashed; }
.ad-rows { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.ad-row {
  display: grid; grid-template-columns: 72px 1fr 1fr auto auto; gap: 8px; align-items: center;
  padding: 8px; border: 1px solid var(--line); border-radius: 3px;
}
.ad-thumb { width: 72px; height: 54px; object-fit: contain; background: rgba(255,255,255,.05); border-radius: 3px; }
.ad-thumb-none {
  width: 72px; height: 54px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); border-radius: 3px; font-size: 11px; color: var(--muted);
}
.ad-row input, .ad-row select { margin: 0; font-size: 13px; padding: 5px 7px; }
@media (max-width: 900px) {
  .led-btn-row, .led-list-row.led-list-qa { grid-template-columns: 1fr; }
  .ad-row { grid-template-columns: 72px 1fr; }
}

/* --- ručne písané texty hero a „o galérii" ------------------------------- */
.hero-rich > :first-child, .about-rich > :first-child { margin-top: 0; }
.hero-rich > :last-child, .about-rich > :last-child { margin-bottom: 0; }
.hero-rich h1, .hero-rich h2 {
  font-family: var(--script); font-weight: 400; line-height: 1.05;
  font-size: clamp(38px, 7vw, 86px); margin: 0 0 10px; color: var(--ivory);
}
.hero-rich p { margin: 0 0 10px; max-width: 62ch; color: var(--ivory); }
.hero-rich p:first-child, .about-rich p:first-child {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-soft);
}
.hero-align-center .hero-rich, .hero-align-center .hero-rich p { margin-inline: auto; }
.about-rich h2, .about-rich h3 {
  font-family: var(--script); font-weight: 400;
  font-size: clamp(28px, 4vw, 46px); margin: 0 0 12px; color: var(--gold-soft);
}
.about-rich p { margin: 0 0 12px; max-width: 62ch; }
.about-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* --- konfigurátor prsteňov ----------------------------------------------- */
.ring-lab {
  border: 1px solid var(--line); border-radius: var(--radius, 3px);
  padding: 14px 16px; margin: 0 0 16px; background: rgba(197,160,89,.05);
}
.ring-lab-size { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ring-lab-field { display: flex; flex-direction: column; gap: 4px; }
.ring-lab-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ring-lab-field input { width: 110px; margin: 0; }
.ring-lab-clear { font-size: 12px; color: var(--muted); align-self: center; }
.ring-lab-hint { flex: 1 1 100%; margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 74ch; }
.ring-lab-hint strong { color: var(--gold-soft); }
.ring-lab-styles { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ring-style {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border-radius: 999px; font-size: 13px; border: 1px solid var(--line);
  color: var(--ivory); text-decoration: none; transition: border-color .15s, background .15s;
}
.ring-style:hover { border-color: var(--gold); }
.ring-style.is-active { border-color: var(--gold); background: rgba(197,160,89,.14); }
.ring-style .cnt { font-size: 11px; color: var(--muted); }
.ring-help { max-width: 100%; }
.ring-help-lead { max-width: 68ch; color: var(--muted); margin: 0 0 20px; }
.ring-help-lab { margin-bottom: 26px; }
.ring-help-h { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin: 26px 0 10px; }
.ring-help-lab .ring-help-h { margin-top: 0; }
.ring-help-cols { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ring-help-steps, .ring-help-tips { margin: 0; padding-left: 20px; max-width: 60ch; }
.ring-help-steps li, .ring-help-tips li { margin-bottom: 8px; line-height: 1.6; }
.ring-secret { border: 1px solid var(--line); border-radius: var(--radius, 3px); padding: 4px 18px 18px; background: rgba(197,160,89,.05); }
.ring-secret-mark { color: var(--gold); }
.ring-secret > p { color: var(--muted); max-width: 60ch; }
.ring-secret-way { margin-top: 14px; }
.ring-secret-way h3 { margin: 0 0 4px; font-size: 14px; color: var(--gold-soft); }
.ring-secret-way p { margin: 0; line-height: 1.6; max-width: 60ch; }
.ring-table-wrap { overflow-x: auto; }
.ring-table { border-collapse: collapse; min-width: 380px; }
.ring-table th, .ring-table td { text-align: left; padding: 6px 18px 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ring-table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ring-table td a { color: var(--gold-soft); text-decoration: none; white-space: nowrap; }
.ring-help-ask { margin-top: 22px; color: var(--muted); }

/* --- konzola: karty, používatelia, GDPR ---------------------------------- */
.tab-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tab-chip { padding: 7px 15px; border-radius: 999px; font-size: 13px; text-decoration: none; border: 1px solid var(--line); color: #c9c2b5; }
.tab-chip:hover { border-color: var(--gold); }
.tab-chip.is-active { border-color: var(--gold); background: rgba(197,160,89,.14); color: var(--gold-soft); }
.usr-table select { margin: 0; font-size: 13px; padding: 5px 8px; }
.usr-you { font-size: 11px; margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: rgba(197,160,89,.16); color: var(--gold-soft); }
.usr-actions { white-space: nowrap; }
.usr-actions .btn { margin-left: 6px; }
.cust-table td span.muted { display: block; }
.cust-tag { font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); }
.cust-tag.is-on { color: #6fbf73; border-color: rgba(111,191,115,.5); }
.cust-tag.is-off { color: var(--muted); }
.cust-tag.is-none { color: var(--gold-soft); border-color: rgba(197,160,89,.5); }
.gd-verdict { padding: 10px 14px; border-radius: 3px; margin: 8px 0 14px; max-width: 78ch; font-size: 13px; border: 1px solid rgba(111,191,115,.45); background: rgba(111,191,115,.08); }
.gd-verdict.is-warn { border-color: rgba(224,166,102,.5); background: rgba(224,166,102,.08); }
.gd-json { max-height: 320px; overflow: auto; font-size: 12px; padding: 10px; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 3px; }
.legal-page h2 { margin-top: 26px; }
.legal-list { max-width: 74ch; line-height: 1.7; }
.task-login-shop { text-align: center; margin: -4px 0 14px; line-height: 1.4; }
.task-login-shop strong { display: block; font-size: 14px; color: #e8e2d8; }
.task-login-shop span { font-size: 11px; color: var(--muted); }

/* --- lišta o cookies ------------------------------------------------------ */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 20px; background: var(--charcoal); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.cookie-bar p { margin: 0; font-size: 13px; max-width: 78ch; color: var(--ivory); }
.cookie-bar a { color: var(--gold-soft); }
.cookie-bar-actions { display: flex; gap: 8px; }

/* --- kontrola dát --------------------------------------------------------- */
.hc-every { font-size: 12px; color: var(--muted); }
.hc-every select { margin: 0 0 0 6px; font-size: 13px; padding: 5px 8px; }
.hc-totals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 16px; }
.hc-pill { font-size: 12px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); }
.hc-pill.is-risk { color: #e06666; border-color: rgba(224,102,102,.5); }
.hc-pill.is-warn { color: #e0a666; border-color: rgba(224,166,102,.5); }
.hc-pill.is-todo { color: var(--gold-soft); border-color: rgba(197,160,89,.5); }
.hc-pill.is-ok { color: #6fbf73; border-color: rgba(111,191,115,.5); }
.hc-row { border: 1px solid var(--line); border-radius: 3px; margin-bottom: 6px; padding: 8px 12px; }
.hc-row > summary { display: flex; align-items: baseline; gap: 9px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.hc-row > summary::-webkit-details-marker { display: none; }
.hc-dot { width: 8px; height: 8px; border-radius: 50%; background: #6fbf73; flex: none; }
.hc-row.is-risk .hc-dot { background: #e06666; }
.hc-row.is-warn .hc-dot { background: #e0a666; }
.hc-row.is-todo .hc-dot { background: var(--gold); }
.hc-row.is-ok { opacity: .6; }
.hc-count { font-size: 12px; padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,.06); }
.hc-row.is-risk .hc-count { background: rgba(224,102,102,.18); color: #e06666; }
.hc-items { margin: 10px 0; padding-left: 20px; font-size: 13px; line-height: 1.7; max-height: 260px; overflow: auto; }

/* --- denník udalostí objednávky ------------------------------------------ */
.ord-log {
  list-style: none; margin: 0 0 12px; padding: 0;
  max-height: 300px; overflow-y: auto;
}
/*
 * Dve riadky na udalosť. Jednoriadkový zápis mal pevný stĺpec na čas, do
 * ktorého sa dátum s hodinou nezmestil, a text sa naň natlačil — v úzkom
 * paneli sa to nedalo prečítať. Veta má teraz celú šírku, čas a pôvodca sú
 * pod ňou drobným písmom.
 */
.ord-log-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-template-areas: "icon text text" "icon when who";
  gap: 1px 9px; align-items: start;
  padding: 8px 6px; border-radius: 3px;
}
.ord-log-item + .ord-log-item { border-top: 1px solid rgba(255,255,255,.06); }
.ord-log-item:hover { background: rgba(255,255,255,.03); }
.ord-log-icon { grid-area: icon; font-size: 13px; line-height: 1.4; text-align: center; }
.ord-log-text { grid-area: text; font-size: 12.5px; line-height: 1.45; color: #d8d2c6; overflow-wrap: anywhere; }
.ord-log-when {
  grid-area: when; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ord-log-who { grid-area: who; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ord-log-item.is-created .ord-log-text { color: var(--gold-soft); }
.ord-log-item.is-note .ord-log-text { font-style: italic; color: #c9c2b5; }
.ord-log-item.is-gdpr .ord-log-text { color: #e0a666; }
.ord-log-item.is-edited .ord-log-text { color: #cbb98f; }
.ord-note { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.ord-note input { margin: 0; font-size: 13px; padding: 6px 9px; }

/* Položky objednávky vedú na svoj produkt. */
.ord-item-row { display: flex; align-items: baseline; gap: 8px; margin: 0 0 5px; font-size: 12.5px; }
.ord-item-link { color: #d8d2c6; text-decoration: none; flex: 1; min-width: 0; }
.ord-item-link:hover { color: var(--gold-soft); text-decoration: underline; }
.ord-item-link .muted { font-size: 11px; }
.ord-item-sum { color: #e8e2d6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ord-item-out { color: var(--muted); text-decoration: none; font-size: 12px; }
.ord-item-out:hover { color: var(--gold); }

/* --- výber písma v layout editore ---------------------------------------- */
.fnt-rows { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.fnt-row { border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; }
.fnt-row-head { display: flex; align-items: center; gap: 10px; }
.fnt-row-head select { margin: 0; flex: 1 1 220px; font-size: 13px; padding: 6px 8px; }
.fnt-state { font-size: 11px; white-space: nowrap; }
.fnt-state.is-on { color: #6fbf73; }
.fnt-state.is-off { color: var(--muted); }
.fnt-del {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 3px; width: 26px; height: 26px; cursor: pointer; line-height: 1; flex: none;
}
.fnt-del:hover { color: #e06666; border-color: #e06666; }
.fnt-roles { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 4px; font-size: 12.5px; }
.fnt-roles label { display: inline-flex; align-items: center; gap: 6px; color: #c9c2b5; }
.fnt-roles input { margin: 0; }
.fnt-preview { margin: 6px 0 0; font-size: 20px; color: var(--gold-soft); line-height: 1.3; }
.uc-logo-prev { max-width: 260px; max-height: 120px; border: 1px solid var(--line); border-radius: 3px; padding: 8px; background: rgba(0,0,0,.3); }

/* --- ikony filtrov: pracovný zoznam, skupiny a vizuálny výber ------------- */
.ic-preview {
  background: none; border: 1px solid transparent; border-radius: 4px;
  padding: 3px; cursor: pointer; color: #c5a059; line-height: 0; flex: none;
}
.ic-preview:hover { border-color: #c5a059; background: rgba(197,160,89,.1); }
.ic-chosen { font-size: 10.5px; color: #8f887c; }
.ic-cell.is-manual .ic-chosen { color: #c5a059; }
.ic-todo { border-color: rgba(224,102,102,.4); }
.ic-todo h3 { color: #e0a666; }
.ic-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.ic-group-head h3 { margin: 0; }
.ic-where { margin: 0; flex: 1 1 320px; }
.ic-group-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.ic-hidden > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; }
.ic-hidden > summary strong { color: #c9c2b5; }
.ic-hidden[open] > summary { margin-bottom: 10px; }
.ic-hidden-h { margin: 16px 0 0; font-size: 13px; color: #a49c8f; font-weight: 600; }
.ic-hidden .ic-cell { opacity: .72; }

.ic-picker { position: fixed; inset: 0; z-index: 140; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.ic-picker-panel {
  width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: #101016; border: 1px solid #2c2c36; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.ic-picker-head { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border-bottom: 1px solid #26262e; }
.ic-picker-head strong { color: #e8e2d6; font-size: 15px; }
.ic-picker-panel > input[type="search"] { margin: 12px 16px 0; width: auto; padding: 7px 10px; font-size: 13px; }
.ic-picker-grid {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.ic-picker-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px; background: #16161c; border: 1px solid #26262e; border-radius: 4px;
  color: #c5a059; cursor: pointer;
}
.ic-picker-item:hover { border-color: #c5a059; background: rgba(197,160,89,.1); }
.ic-picker-item span { font-size: 10.5px; color: #9a938a; word-break: break-all; line-height: 1.25; }
.ic-picker-foot { padding: 11px 16px; border-top: 1px solid #26262e; display: flex; justify-content: flex-end; }

/* --- editor produktu: fotky ako box v pravom hornom rohu ------------------ */
.pe-photos {
  float: right; width: 33%; max-width: 340px; min-width: 240px;
  margin: 0 0 16px 22px;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 12px 12px; background: rgba(255,255,255,.02);
}
.pe-photos h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; color: var(--gold-soft); }
.pe-photos .muted { font-size: 11.5px; line-height: 1.45; }
.pe-photos .img-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 8px 0; }
.pe-photos .img-tile img { height: 68px; }
.pe-photos .img-tile .img-actions button { padding: 3px 0; font-size: 11px; }
.pe-actions { clear: both; }
@media (max-width: 900px) {
  .pe-photos { float: none; width: auto; max-width: none; margin: 0 0 16px; }
  .pe-photos .img-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .pe-photos .img-tile img { height: 90px; }
}

/* Hustejšie a tichšie: polia bližšie k sebe, nadpisy menšie, menej rámov. */
[data-editor="product-edit"] h3 {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-soft); margin: 18px 0 8px; font-weight: 600;
}
[data-editor="product-edit"] .admin-form-grid { gap: 10px 14px; }
[data-editor="product-edit"] label { font-size: 12px; color: #a49c8f; }
[data-editor="product-edit"] input[type="text"],
[data-editor="product-edit"] input[type="number"],
[data-editor="product-edit"] input[type="search"],
[data-editor="product-edit"] select,
[data-editor="product-edit"] textarea {
  margin-top: 3px; padding: 7px 9px; font-size: 13px;
}
[data-editor="product-edit"] p.muted { margin: 4px 0 8px; }
[data-editor="product-edit"] .pe-derived { padding: 10px 12px; }
[data-editor="product-edit"] .pe-derived-row { margin-bottom: 6px; }
[data-editor="product-edit"] .editor-actions { gap: 8px; }

/* --- editácia objednávky -------------------------------------------------- */
.ord-items-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.ord-edit-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ord-edit-row { display: grid; grid-template-columns: 1fr 56px 84px 26px; gap: 6px; align-items: center; }
.ord-edit-name { font-size: 12px; color: #d8d2c6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-edit-row input { margin: 0; font-size: 12px; padding: 5px 6px; }
.ord-edit-del {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 3px; width: 26px; height: 26px; cursor: pointer; line-height: 1;
}
.ord-edit-del:hover { color: #e06666; border-color: #e06666; }
.ord-add { position: relative; margin-bottom: 8px; }
.ord-add input { margin: 0; width: 100%; font-size: 12.5px; padding: 6px 8px; }
.ord-add-hits {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  max-height: 240px; overflow-y: auto; background: #101016;
  border: 1px solid #2c2c36; border-radius: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.ord-add-hit {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: #d8d2c6; font-size: 12px; padding: 7px 9px; cursor: pointer;
}
.ord-add-hit:hover { background: rgba(197,160,89,.14); color: var(--gold-soft); }
.ord-add-none { padding: 7px 9px; }
.ord-edit-disc { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #c9c2b5; }
.ord-edit-disc input { margin: 0; width: 100px; font-size: 12px; padding: 5px 6px; }
.ord-edit-sum { margin: 6px 0 0; }
.ord-edit-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #c9c2b5; }

/* --- ľudský audit --------------------------------------------------------- */
.aud-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; margin: 0 0 12px;
  border: 1px solid rgba(197,160,89,.45); border-radius: 4px; background: rgba(197,160,89,.07);
}
.aud-strip-title { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); }
.aud-track { flex: 1 1 200px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.aud-track span { display: block; height: 100%; background: var(--gold); transition: width .3s; }
.aud-num { font-size: 13px; color: #e8e2d6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aud-bar { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; }
.prod-tile-wrap { position: relative; }
.aud-ok {
  position: absolute; z-index: 3; top: 8px; right: 8px;
  background: rgba(10,10,10,.82); border: 1px solid var(--gold); color: var(--gold-soft);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.aud-ok:hover { background: var(--gold); color: #0d0d0d; }
tr .aud-ok, td .aud-ok { position: static; border-radius: 3px; }
.is-audited { opacity: 0; transform: scale(.96); transition: opacity .4s, transform .4s; }
.aud-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 12px 0 18px; }
.aud-kpi {
  border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; background: rgba(255,255,255,.02);
  display: flex; flex-direction: column; gap: 2px;
}
.aud-kpi strong { font-family: var(--serif); font-size: 26px; color: var(--gold-soft); line-height: 1.1; }
.aud-kpi span { font-size: 11.5px; color: var(--muted); }
.aud-tables { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.aud-tables h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.task-build {
  align-self: center; font-size: 10.5px; letter-spacing: .06em; white-space: nowrap;
  color: #6f6a61; font-variant-numeric: tabular-nums;
  padding: 3px 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px;
}

/* --- aktualizácie a licencia ---------------------------------------------- */
.upd-now { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 14px 0 18px; }
.upd-badge {
  border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px;
  background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 2px;
}
.upd-badge strong { font-family: var(--serif); font-size: 24px; color: var(--gold-soft); line-height: 1.1; }
.upd-badge.is-new { border-color: rgba(197,160,89,.6); background: rgba(197,160,89,.09); }
.upd-badge.is-lapsed strong { color: #e0a666; }
.ic-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.ic-onoff {
  background: none; border: 1px solid rgba(111,191,115,.45); color: #6fbf73;
  border-radius: 999px; padding: 2px 9px; font-size: 10.5px; cursor: pointer; line-height: 1.5;
}
.ic-onoff[data-active="0"] { border-color: var(--line); color: var(--muted); }
.ic-onoff:hover { border-color: var(--gold); color: var(--gold-soft); }
.ic-cell.is-off { opacity: .55; }
.ic-cell.is-off .ic-preview { color: var(--muted); }

/* --- produkty: jeden panel namiesto troch riadkov ------------------------- */
.prod-bar {
  padding: 10px 12px; margin: 14px 0 8px;
  border: 1px solid #26262e; border-radius: 8px; background: #14141a;
}
.prod-bar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prod-bar .prod-search-box { flex: 1 1 260px; min-width: 200px; }
.prod-bar .prod-search-box input { padding-right: 30px; }
.prod-bar select {
  margin: 0; padding: 7px 10px; font-size: 12.5px; width: auto;
  background: #14141a; border: 1px solid #2c2c36; color: #d8d2c6;
  border-radius: 20px; cursor: pointer; max-width: 210px;
}
.prod-bar select:hover, .prod-bar select:focus { border-color: #c5a059; outline: none; }
.prod-bar select option { background: #000; color: #b9b5ad; }
/* A filter that is doing something should look different from one that is not. */
.prod-bar select:not([value=""]) { border-color: #2c2c36; }
.prod-bar-clear {
  padding: 6px 12px; border-radius: 20px; font-size: 12.5px; text-decoration: none;
  border: 1px solid rgba(224,102,102,.5); color: #e06666; white-space: nowrap;
}
.prod-bar-clear:hover { background: rgba(224,102,102,.12); }
.prod-subbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 10px;
}
.prod-oos { margin: 0; font-size: 12.5px; color: #a49c8f; cursor: pointer; }
.prod-count { order: -1; }
@media (max-width: 900px) {
  .prod-bar select { max-width: none; flex: 1 1 140px; }
}

/* --- nápoveda k modulu ---------------------------------------------------- */
.help-toggle {
  align-self: center; width: 30px; height: 30px; flex: none;
  border-radius: 999px; border: 1px solid var(--line); background: none;
  color: var(--gold-soft); font-size: 15px; line-height: 1; cursor: pointer;
}
.help-toggle:hover, .help-toggle[aria-expanded="true"] {
  border-color: var(--gold); background: rgba(197,160,89,.14);
}
.help-rail {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 140;
  width: min(560px, 96vw); display: flex; flex-direction: column;
  background: #101016; border-left: 1px solid #26262e;
  box-shadow: -16px 0 50px rgba(0,0,0,.55);
}
.help-rail-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid #26262e;
}
.help-rail-head strong { font-family: var(--serif); font-size: 20px; color: var(--gold-soft); }
.help-rail-head p { margin: 3px 0 0; max-width: 46ch; }
.help-rail-body { flex: 1; overflow-y: auto; padding: 4px 18px 24px; }
.help-sec { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.help-sec:last-child { border-bottom: 0; }
.help-sec h4 {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 600;
}
.help-sec p { margin: 0 0 8px; font-size: 13px; line-height: 1.62; color: #c9c2b5; max-width: 62ch; }
.help-sec p:last-child { margin-bottom: 0; }
.help-sec b { color: #e8e2d6; }
.help-sec code {
  font-size: 12px; padding: 1px 5px; border-radius: 3px;
  background: rgba(255,255,255,.06); color: var(--gold-soft);
}
.help-tips ul { margin: 0; padding-left: 18px; }
.help-tips li { font-size: 12.5px; line-height: 1.6; color: #a49c8f; margin-bottom: 4px; }
.help-demo {
  margin: 8px 0; padding: 10px 12px; border: 1px dashed var(--line);
  border-radius: 4px; background: rgba(255,255,255,.02);
}
.help-steps { counter-reset: hs; list-style: none; margin: 6px 0 0; padding: 0; }
.help-steps li {
  counter-increment: hs; position: relative;
  padding: 0 0 12px 30px; margin: 0;
}
.help-steps li::before {
  content: counter(hs); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 999px;
  border: 1px solid rgba(197,160,89,.5); color: var(--gold-soft);
  font-size: 11px; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.help-steps li b { display: block; color: #e8e2d6; font-size: 13px; line-height: 1.45; font-weight: 600; }
.help-steps li span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.6; color: #a49c8f; }
.help-steps li span b { display: inline; font-size: inherit; color: #d8d2c6; }
.help-sec kbd {
  font-family: inherit; font-size: 11.5px; padding: 1px 6px; border-radius: 3px;
  border: 1px solid var(--line); background: rgba(255,255,255,.05); color: #d8d2c6;
}

/* --- zľavy a kampane ------------------------------------------------------ */
.dc-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.dc-rule { border: 1px solid var(--line); border-radius: 5px; padding: 12px 14px; background: rgba(255,255,255,.02); }
.dc-rule.is-off { opacity: .55; }
.dc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dc-head .dc-name { flex: 1; margin: 0; font-size: 14px; padding: 7px 10px; }
.dc-on { margin: 0; flex: none; }
.dc-del { background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 3px; width: 28px; height: 28px; cursor: pointer; flex: none; }
.dc-del:hover { color: #e06666; border-color: #e06666; }
.dc-what, .dc-conds { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.dc-conds {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.dc-conds-title { flex: 1 1 100%; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-soft); }
.dc-what label, .dc-conds label { display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; color: #a49c8f; margin: 0; }
.dc-what select, .dc-what input, .dc-conds input {
  margin: 0; font-size: 13px; padding: 6px 9px; min-width: 120px;
}
.dc-target-wrap { flex: 1 1 220px; }
.dc-target-wrap select, .dc-target-wrap input { width: 100%; }
.dc-target-none { padding: 8px 0; }
.dc-usage { margin-top: 10px; font-size: 12px; color: var(--muted); }
.dc-usage b { color: #d8d2c6; }

/* --- hromadný výber v produktoch ------------------------------------------ */
.prod-select-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; margin: 0 0 10px; min-height: 44px;
  border: 1px solid #26262e; border-radius: 8px; background: #14141a;
}
#sel-mode.is-active { border-color: var(--gold); color: var(--gold-soft); background: rgba(197,160,89,.12); }
.sel-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sel-all { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: #a49c8f; cursor: pointer; }
.sel-all input { margin: 0; }
.sel-count { font-size: 12.5px; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.sel-box {
  position: absolute; z-index: 4; top: 8px; left: 8px; margin: 0;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: rgba(10,10,10,.82); border: 1px solid var(--line); border-radius: 5px; cursor: pointer;
}
.sel-box:hover { border-color: var(--gold); }
/* The input fills the box, so the whole square is the target — the middle of a
   checkbox is exactly where people aim. */
.sel-box input { margin: 0; cursor: pointer; width: 16px; height: 16px; }
.sel-box-row { position: static; display: inline-grid; vertical-align: middle; margin-right: 6px; }
.prod-tile-wrap:has(.sel-pick:checked) .prod-tile { outline: 2px solid var(--gold); outline-offset: -2px; }

.sel-menu { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.sel-menu-panel {
  width: min(560px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: #101016; border: 1px solid #2c2c36; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.sel-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid #26262e; }
.sel-menu-head strong { color: #e8e2d6; font-size: 15px; }
.sel-menu-body { flex: 1; overflow-y: auto; padding: 6px 16px 16px; }
.sel-menu-body h4 { margin: 14px 0 6px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-soft); }
.sel-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 6px; }
.sel-act label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #a49c8f; margin: 0; }
.sel-act input, .sel-act select { margin: 0; padding: 6px 9px; font-size: 13px; min-width: 110px; }
.sel-menu-foot { margin: 16px 0 0; }
/* V režime výberu je celá karta terč — kurzor aj rám to hovoria dopredu. */
body.is-selecting .prod-tile, body.is-selecting .prod-tile-wrap { cursor: pointer; }
body.is-selecting .prod-tile-wrap:hover .prod-tile { outline: 1px solid rgba(197,160,89,.55); outline-offset: -1px; }
body.is-selecting .admin-table tbody tr { cursor: pointer; }
body.is-selecting .admin-table tbody tr:hover { background: rgba(197,160,89,.07); }
body.is-selecting .admin-table tbody tr:has(.sel-pick:checked) { background: rgba(197,160,89,.14); }
body.is-selecting .sel-box { border-color: rgba(197,160,89,.5); }

/* --- výber mesiaca -------------------------------------------------------- */
.prod-tag-feat { background: rgba(197,160,89,.9); color: #0d0d0d; }
.card-featured {
  position: absolute; z-index: 3; top: 8px; right: 8px;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 999px; background: rgba(197,160,89,.92); color: #0d0d0d; font-size: 13px;
}
.feat-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 10px; }
.feat-item {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.02);
}
.feat-item img { width: 46px; height: 46px; object-fit: cover; border-radius: 3px; flex: none; }
.feat-nophoto { width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border: 1px dashed var(--line); border-radius: 3px; color: var(--muted); }
.feat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.feat-body a { color: #e8e2d6; text-decoration: none; font-size: 12.5px; }
.feat-body a:hover { color: var(--gold-soft); }
.feat-del { background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 3px; width: 26px; height: 26px; cursor: pointer; flex: none; }
.feat-del:hover { color: #e06666; border-color: #e06666; }
/* Štítky na dlaždici: čo je na kuse práve teraz pravda. */
.prod-tile-photo { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }
.prod-tag-own  { background: rgba(197,160,89,.92); color: #0d0d0d; }
.prod-tag-camp { background: rgba(90,140,200,.92); color: #06121f; }
.prod-tag-excl { background: rgba(20,20,26,.9); color: #b9b5ad; border: 1px solid rgba(255,255,255,.25); }

/* ==========================================================================
   MOBILNÉ ZJEDNODUŠENIE
   ==========================================================================
   Zámerne až na konci súboru a v jedinom zlomovom bode. Stylesheet má osem
   rôznych hraníc porozhadzovaných po celej dĺžke; namiesto ich prepisovania
   (a rizika, že sa niečo tichým spôsobom rozpadne) tu stojí jedna vrstva,
   ktorá ich v poslednom slove prebije. Staré pravidlá ostávajú nedotknuté —
   keď sa toto raz osvedčí, dajú sa odstraňovať po jednom.

   Platí len pre layout s nastavením „Na mobile: zjednodušiť automaticky".
   ========================================================================== */
@media (max-width: 640px) {
  /* Blok, ktorý si operátor vypol pre telefóny. */
  .is-mobile-off { display: none !important; }

  body.lay-mobile-simple {
    /* Nič sa nesmie tlačiť do šírky. Toto je najčastejšia príčina „rozhádzaného“
       mobilu: jeden široký prvok posunie celú stránku a všetko ostatné vyzerá
       zle, hoci s ním nemá nič spoločné. */
    overflow-x: hidden;
  }

  /* --- DVA PRODUKTY VEDĽA SEBA, vždy. Toto je hlavná požiadavka: karta na
     celú šírku znamená scrollovanie cez celý katalóg po jednom kuse. */
  body.lay-mobile-simple .product-grid:not(.view-list),
  body.lay-mobile-simple .prod-grid,
  body.lay-mobile-simple [class*="grid-cols"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body.lay-mobile-simple .product-card h3,
  body.lay-mobile-simple .product-card .card-title { font-size: 13px; line-height: 1.3; }
  body.lay-mobile-simple .product-card .card-price { font-size: 14px; }
  body.lay-mobile-simple .card-meta,
  body.lay-mobile-simple .card-category { display: none; }

  /* --- Kolekcie: jeden stĺpec, bez popisných textov. */
  body.lay-mobile-simple .cat-tiles,
  body.lay-mobile-simple .collection-grid { grid-template-columns: 1fr !important; }
  body.lay-mobile-simple .cat-tile-text { display: none; }

  /* --- Strom kategórií: z orbitu vodorovný pás, ktorý sa dá prstom potiahnuť. */
  body.lay-mobile-simple .nav-tree-branches {
    display: flex !important; flex-wrap: nowrap; overflow-x: auto;
    gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }
  body.lay-mobile-simple .nav-branch {
    grid-column: auto !important; grid-row: auto !important;
    flex: 0 0 auto; flex-direction: column !important; align-items: center;
  }
  body.lay-mobile-simple .nav-kids { display: none; }
  body.lay-mobile-simple .nav-tree-orbit .nav-node-1 .nav-node-icon { width: 46px; height: 46px; }
  body.lay-mobile-simple .nav-tree-core { display: none; }

  /* --- Hero: nízky, text pod obrázkom namiesto cezeň. */
  body.lay-mobile-simple .hero { min-height: 42vh !important; }
  body.lay-mobile-simple .hero-rich h1,
  body.lay-mobile-simple .hero h1 { font-size: clamp(26px, 8vw, 38px) !important; }
  body.lay-mobile-simple .hero-actions { flex-wrap: wrap; gap: 8px; }
  body.lay-mobile-simple .hero-actions .btn { flex: 1 1 auto; text-align: center; }

  /* --- Bočné reklamy na 375 px nemajú kam. */
  body.lay-mobile-simple .side-ads { display: none !important; }

  /* --- Čokoľvek s pevnou šírkou sa musí zmestiť. */
  body.lay-mobile-simple img,
  body.lay-mobile-simple table,
  body.lay-mobile-simple pre { max-width: 100%; }
  body.lay-mobile-simple .ring-table-wrap,
  body.lay-mobile-simple .table-wrap { overflow-x: auto; }

  /* --- Prekrývajúce sa plávajúce prvky: košík nad lištou cookies. */
  body.lay-mobile-simple .cookie-bar { padding: 10px 12px; font-size: 12px; }
  body.lay-mobile-simple .cart-drawer { width: 100% !important; }
}
.led-mobile-off { display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
  padding-bottom: 8px; border-bottom: 1px dashed var(--line); font-size: 12.5px; color: #a49c8f; }

/* --- stav objednávky pre zákazníka ---------------------------------------- */
.ostat { max-width: 720px; }
.ostat-lead { max-width: 60ch; }
.ostat-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 18px 0; }
.ostat-form label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ostat-form input { margin: 0; }
.ostat-error { color: #e06666; margin: 4px 0 0; }
.ostat-ref { font-size: 15px; margin: 4px 0 20px; }
.ostat-steps { list-style: none; display: flex; gap: 0; margin: 0 0 26px; padding: 0; }
.ostat-steps li { flex: 1; text-align: center; position: relative; font-size: 12.5px; color: var(--muted); }
.ostat-steps li::before {
  content: ''; position: absolute; top: 9px; left: 0; right: 50%; height: 2px;
  background: var(--line);
}
.ostat-steps li:first-child::before { display: none; }
.ostat-steps li.is-done::before { background: var(--gold); }
.ostat-dot {
  display: block; width: 20px; height: 20px; margin: 0 auto 6px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--obsidian); position: relative; z-index: 1;
}
.ostat-steps li.is-done .ostat-dot { border-color: var(--gold); background: var(--gold); }
.ostat-steps li.is-now { color: var(--gold-soft); font-weight: 600; }
.ostat-steps li.is-now .ostat-dot { box-shadow: 0 0 0 4px rgba(197,160,89,.2); }
.ostat-cancel { color: #e06666; font-size: 16px; margin-bottom: 22px; }
.ostat-facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 26px; }
.ostat-facts > div { display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius, 3px); }
.ostat-h { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; }
.ostat-items { list-style: none; margin: 0 0 20px; padding: 0; }
.ostat-items li { display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; }
.ostat-help { margin-top: 18px; }
@media (max-width: 640px) {
  .ostat-steps { flex-direction: column; gap: 10px; text-align: left; }
  .ostat-steps li { display: flex; align-items: center; gap: 10px; }
  .ostat-steps li::before { display: none; }
  .ostat-dot { margin: 0; }
}

/* --- filtre katalógu na mobile: otvárajú sa až na požiadanie -------------- */
.cat-filter-toggle { display: none; }
.cat-filter-close { display: none; }
@media (max-width: 900px) {
  .cat-filter-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: calc(100% - 2 * var(--shell-pad, 20px)); margin: 12px auto 0;
    padding: 11px 14px; font-size: 14px; cursor: pointer;
    background: var(--charcoal); color: var(--ivory);
    border: 1px solid var(--line); border-radius: var(--btn-radius, 2px);
  }
  .cat-filter-count {
    min-width: 22px; padding: 1px 7px; border-radius: 999px;
    background: var(--gold); color: #0d0d0d; font-size: 12px; font-weight: 600;
  }
  /* Zavreté sú predvolene. Dvanásť polí nad tovarom je dôvod, prečo ľudia
     preskrolujú katalóg bez toho, aby ho vôbec videli. */
  .catalog-layout > .catalog-filters {
    display: none;
    position: fixed; z-index: 120; inset: 0 0 0 auto;
    width: min(340px, 90vw); overflow-y: auto;
    padding: 18px 18px 40px; margin: 0;
    background: var(--charcoal); border-left: 1px solid var(--line);
    box-shadow: -16px 0 50px rgba(0,0,0,.5);
  }
  .catalog-layout > .catalog-filters.is-open { display: block; }
  .catalog-filters h2 { display: flex; align-items: center; justify-content: space-between; }
  .cat-filter-close {
    display: block; background: none; border: 0; color: var(--muted);
    font-size: 18px; cursor: pointer; line-height: 1; padding: 4px 6px;
  }
  body.cat-filters-open { overflow: hidden; }
}

/* --- výber mesiaca: celá dlaždica, nie ďalšia ikona v rade ---------------- */
/* Hviezdička sa tlačila medzi štítky ako −25 % a prekrývala ich. Výber mesiaca
   je vlastnosť celého kusu, tak to hovorí celý rám. */
.prod-tile-wrap.is-featured .prod-tile {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 6px 24px rgba(197,160,89,.18);
  background: linear-gradient(180deg, rgba(197,160,89,.10), rgba(197,160,89,.02));
}
.prod-feat-ribbon {
  display: block; padding: 4px 10px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600;
  background: var(--gold); color: #0d0d0d;
}
.prod-tile-wrap.is-featured .prod-tile-body strong { color: var(--gold-soft); }

/* --- účet: prepnutie obchodu a odhlásenie v jednom paneli ----------------- */
.task-shop-list a { display: block; padding: 7px 9px; border-radius: 3px; text-decoration: none; }
.task-shop-list a:hover { background: rgba(197,160,89,.12); }
.task-shop-list a strong { display: block; color: #e8e2d6; font-size: 13px; line-height: 1.3; }
.task-shop-list a span { display: block; color: var(--muted); font-size: 11px; }
.task-shop-out {
  display: block; width: 100%; margin-top: 8px; padding: 8px 9px;
  text-align: left; cursor: pointer; font-size: 12.5px;
  background: none; color: #c9c2b5;
  border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 3px;
}
.task-shop-out:hover { border-color: #e06666; color: #e06666; }

/* --- výber mesiaca v obchode: rozoznateľný všade, nielen vo svojom bloku --- */
.product-card.is-featured {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 28px rgba(197,160,89,.18);
}
.card-feat-ribbon {
  display: block; padding: 5px 12px; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600;
  background: var(--gold); color: #0d0d0d; text-align: center;
}
.product-card.is-featured .card-body { background: linear-gradient(180deg, rgba(197,160,89,.10), transparent); }
.product-card.is-featured:hover { box-shadow: 0 0 0 1px var(--gold-soft), 0 12px 34px rgba(197,160,89,.28); }
@media (max-width: 640px) {
  body.lay-mobile-simple .card-feat-ribbon { padding: 3px 8px; font-size: 9px; letter-spacing: .06em; }
}

/* ==========================================================================
   MOBIL — OPRAVA PODĽA SKUTOČNÉHO TELEFÓNU (Xiaomi 15T Pro, 2 stĺpce)
   ==========================================================================
   Tri nezávislé príčiny, ktoré spolu vyrobili ten neporiadok:

   1. „Text cez fotku“ (.card-over) drží popis absolútne na spodku karty. Pri
      dvoch stĺpcoch na telefóne má názov tri riadky a vyteká mimo karty — preto
      sa nadpisy prekrývali s fotkami aj medzi sebou.
   2. Panel s maržou (.admin-margin) je vidieť len prihlásenému operátorovi a je
      stavaný na šírku stránky, nie na 170 px kartu. To boli tie elipsy s
      „€44,31 · 37 % / 59 %“ cez celý obrázok.
   3. Stránka bola posunutá doľava, lebo niečo prekračovalo šírku obrazovky.

   Nič z pôvodných pravidiel neprepisujem — toto je vrstva navrchu.
   ========================================================================== */
@media (max-width: 640px) {
  /* 3. Nič nesmie byť širšie ako obrazovka. Na <html> to musí byť tiež,
     inak prehliadač stránku aj tak posunie. */
  html, body { max-width: 100%; overflow-x: hidden; }
  .shell { padding-left: 14px; padding-right: 14px; }
  .section-pad { padding-left: 14px; padding-right: 14px; }
  img, svg, video, table { max-width: 100%; height: auto; }

  /* 1. Popis pod fotku, nech má koľko riadkov chce. */
  .product-card.card-over { display: flex; flex-direction: column; }
  .product-card.card-over .card-body {
    position: static !important; padding: 8px 10px 12px; background: none;
  }
  .product-card.card-over .card-scrim { display: none; }
  .product-card .card-body strong,
  .product-card .card-body h3 {
    font-size: 12.5px; line-height: 1.3; display: block;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .product-card .card-price, .product-card .card-body .price { font-size: 13.5px; }

  /* 2. Marža operátora sa na kartu nezmestí — jeden drobný riadok pod cenou.
     Na stránke produktu ostáva plná, tam je na ňu miesto. */
  .product-card .admin-margin {
    display: block; margin: 6px 0 0; padding: 4px 6px;
    font-size: 10px; line-height: 1.35; border-radius: 3px;
  }
  .product-card .admin-margin-tag,
  .product-card .admin-margin-two,
  .product-card .admin-margin em { display: none; }
  .product-card .admin-margin strong { font-size: 11px; }

  /* Zľavový štítok nech sedí v rohu fotky, nie cez názov. */
  .sale-badge { top: 6px; left: 6px; padding: 2px 7px; font-size: 11px; }

  /* Prepínač mriežka/zoznam a zoradenie majú vlastný riadok, nie prekryv. */
  .catalog-toolbar, .catalog-head { position: relative; z-index: 2; }
  .view-switch { flex: none; }
  .sort-control { flex-wrap: wrap; gap: 6px; }
  .sort-control select { width: 100%; }

  /* Hlavička: logo sa nesmie orezať. */
  .header-inner { padding-left: 0; padding-right: 0; }
  .brand-script { font-size: 30px; }
  .brand-sub { font-size: 9px; letter-spacing: .18em; }
}

/* ==========================================================================
   PORADIE V SÚBORE — skutočná príčina „rozhádzaného“ mobilu
   ==========================================================================
   Responzívne pravidlo pre .catalog-layout a .product-layout stojí na riadku
   784, ale ich základná definícia (240px 1fr) je až na riadku 1819. Media
   query nepridáva špecificitu, takže pri rovnakej sile vyhráva to, čo je
   v súbore NIŽŠIE — desktopová mriežka teda prebíjala mobilnú na každom
   telefóne. Preto bola stránka produktu na mobile dvojstĺpcová a produkty
   v katalógu sa tlačili do 240px stopy, zatiaľ čo napravo ostávalo prázdno.

   Správne riešenie je presunúť základné definície nad media query, čo je
   zásah do 1 800 riadkov cudzieho poradia. Namiesto toho to tu prebíjam
   naposledy — a je to označené, aby sa to raz dalo upratať naozaj.
   ========================================================================== */
@media (max-width: 900px) {
  .catalog-layout,
  .product-layout,
  .checkout-layout,
  .account-grid,
  .task-grid-2,
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Mriežka tovaru teraz dostane celú šírku, tak nech ju aj využije. */
  .product-grid { width: 100%; }
}

/* --- prihlásenie cez Google ------------------------------------------------ */
.sso-split { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: var(--muted); font-size: 12px; }
.sso-split::before, .sso-split::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sso-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.sso-google svg { flex: none; }
.sso-note { margin: 8px 0 0; max-width: 46ch; }
.sso-gis { display: flex; justify-content: center; margin: 4px 0 8px; min-height: 44px; }
.sso-panel .sso-gis { justify-content: flex-start; }

/* ==========================================================================
   ZOBRAZENIE V RIADKOCH — dokončenie
   ==========================================================================
   Server triedu `view-list` pridával správne po celý čas; rozbité bolo len to,
   čo sa s ňou dialo ďalej:

   • na mobile ju prebíjalo vynútené „dva kusy v rade“ z mobilnej vrstvy —
     preto prepínač nerobil nič (to je opravené výnimkou :not(.view-list));
   • na počítači sa pravidlá odvolávali na .card-title, ktorá v karte vôbec
     nie je (názov je obyčajný <strong>), takže riadok síce vznikol, ale text
     v ňom ostal nastavený pre dlaždicu.

   Tento blok stojí naspodku, aby mal posledné slovo, a mieri na značky, ktoré
   karta naozaj má.
   ========================================================================== */
.product-grid.view-list,
.product-grid.grid-auto.view-list {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.view-list .product-card {
  display: grid !important;
  grid-template-columns: minmax(110px, 190px) 1fr;
  align-items: stretch;
}
.view-list .card-media {
  height: 100%;
  border-radius: var(--card-radius, 3px) 0 0 var(--card-radius, 3px);
}
.view-list .card-media img { height: 100%; width: 100%; object-fit: cover; }
/* Caption-over and the scrim are grid ideas; a row has its own column. */
.view-list .card-scrim { display: none; }
.view-list .product-card.card-over .card-body {
  position: static !important; background: none;
}
.view-list .card-body {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 14px 18px; text-align: left;
}
.view-list .card-body strong {
  font-size: 17px; line-height: 1.3;
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.view-list .card-meta { display: block; }
.view-list .card-price { margin-top: 2px; font-size: 16px; }
.view-list .card-feat-ribbon { display: none; }
.view-list .product-card.is-featured { border-left: 3px solid var(--gold); }

@media (max-width: 640px) {
  /* Aj na telefóne je riadok riadkom — len užší. */
  .view-list .product-card { grid-template-columns: 96px 1fr; }
  .view-list .card-body { padding: 10px 12px; }
  .view-list .card-body strong { font-size: 14px; }
  .view-list .card-price { font-size: 14px; }
}

/* --- adresa po políčkach + tooltipy ---------------------------------------
   Jedno textové pole nahradila mriežka. Ulica je široká, číslo domu úzke,
   PSČ úzke a mesto široké — presne v tom pomere, v akom sa to píše rukou na
   obálku, takže oko nemusí hľadať, čo kam patrí.
   -------------------------------------------------------------------------- */
.addr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 14px;
}
.addr-grid > label { margin: 12px 0 0; min-width: 0; }
.addr-grid .addr-street { grid-column: span 3; }   /* ulica dostane priestor */
.addr-grid .addr-city { grid-column: span 3; }     /* PSČ vedľa nej, ako na obálke */
.addr-grid .addr-country { grid-column: 1 / -1; }

/* Otáznik pri popiske: prezradí, že sa dá na políčko ukázať myšou.
   Na dotyku tooltip nie je, preto nikdy nenesie informáciu navyše —
   iba zopakuje to, čo už hovorí placeholder. */
.hint {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; margin-left: 4px;
  border: 1px solid rgba(197,160,89,.45); border-radius: 50%;
  font-size: 9px; line-height: 1; color: var(--gold);
  cursor: help; vertical-align: middle;
}
label:hover > .hint { border-color: var(--gold); background: rgba(197,160,89,.12); }

/* Chyba sa ukáže až keď sa políčka niekto dotkol a odišiel z neho —
   červený formulár hneď po načítaní nikoho nepoučí, len odradí. */
.field-error { display: block; margin-top: 4px; font-size: 12px; color: #e2a0a0; }
.checkout-form input.invalid, .checkout-form select.invalid { border-color: #b46a6a; }

@media (max-width: 560px) {
  /* Na telefóne je ulica aj mesto cez celú šírku; vedľa seba by z nich
     ostali dva nepoužiteľné stĺpčeky. Číslo a PSČ sa vedľa seba zmestia. */
  .addr-grid { grid-template-columns: 1fr 1fr; }
  .addr-grid .addr-street { grid-column: 1 / -1; }
  .addr-grid .addr-city { grid-column: 1 / -1; }
}

/* Doručovacia a fakturačná adresa v profile — dva vizuálne oddelené celky,
   aby sa nedalo omylom prepísať to druhé. */
.addr-set { border: 1px solid var(--line); border-radius: 3px; padding: 4px 16px 16px; margin: 18px 0 0; }
.addr-set legend { padding: 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.addr-same { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.addr-same input { width: auto; margin: 0; }

/* Oko pri hesle. Bez neho sa na telefóne heslo netrafí. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 4px; top: 6px;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 15px; line-height: 1;
}
.pw-toggle:hover { color: var(--gold); }
.pw-toggle[data-shown="1"] { color: var(--gold); }

/* Sila hesla: štyri dieliky, nie percentá — presné číslo by predstieralo
   presnosť, ktorú odhad nemá. */
.pw-meter { display: block; height: 3px; margin-top: 6px; background: rgba(197,160,89,.14); }
.pw-meter > i { display: block; height: 100%; width: 0; background: #b46a6a; transition: width .18s, background .18s; }
.pw-meter[data-score="1"] > i { width: 25%; background: #b46a6a; }
.pw-meter[data-score="2"] > i { width: 50%; background: #c99a4e; }
.pw-meter[data-score="3"] > i { width: 75%; background: var(--gold); }
.pw-meter[data-score="4"] > i { width: 100%; background: #7fb069; }

/* Oprava údajov zákazníka v objednávke — zbalené, aby sa na ňu nedalo
   omylom kliknúť pri bežnej úprave položiek. */
.ord-cust-edit { margin: 8px 0 0; border: 1px solid rgba(197,160,89,.18); border-radius: 3px; padding: 6px 10px; }
.ord-cust-edit > summary { cursor: pointer; font-size: 12.5px; color: #c9c2b5; }
.ord-cust-edit > summary:hover { color: var(--gold); }
.ord-cust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 8px; margin-top: 8px; }
.ord-cust-grid label { margin: 0; font-size: 11px; }
.ord-cust-grid input, .ord-cust-grid select { margin-top: 3px; font-size: 12px; padding: 5px 6px; }
@media (max-width: 900px) { .ord-cust-grid { grid-template-columns: repeat(2, 1fr); } }
/* Podnadpis vnútri panela — oddeľuje kontakt od firemných údajov, ktoré idú
   na faktúru a menia sa z iného dôvodu. */
.ord-cust-sub { margin: 12px 0 0; text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; }
/* Zápis do karty zákazníka. Ohraničený, lebo siaha mimo objednávky. */
.ord-cust-sync { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(197,160,89,.18); }
.linklike { background: none; border: 0; padding: 0; color: var(--gold); font: inherit;
  font-size: inherit; cursor: pointer; border-bottom: 1px dotted currentColor; }
.linklike:disabled { color: var(--ok); cursor: default; border-bottom: 0; }

/* --- karta zákazníka ------------------------------------------------------ */
.cust-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.cust-kpis { display: flex; gap: 10px; }
.cust-kpi { border: 1px solid rgba(197,160,89,.18); border-radius: 3px; padding: 8px 14px; text-align: center; min-width: 92px; }
.cust-kpi b { display: block; font-size: 17px; color: var(--gold); }
.cust-kpi span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Údaje vľavo, všetko ostatné v užšom stĺpci vpravo — editácia je hlavná
   práca, zvyšok sú akcie, ktoré človek spraví raz. */
.cust-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.cust-side { display: flex; flex-direction: column; gap: 18px; }
.cust-side .panel { margin: 0; }

.cust-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cust-orders li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cust-orders li b { margin-left: auto; }
.cust-open { color: inherit; text-decoration: none; }
.cust-open:hover strong { color: var(--gold); text-decoration: underline; }

@media (max-width: 900px) {
  .cust-layout { grid-template-columns: 1fr; }
  .cust-kpis { width: 100%; }
  .cust-kpi { flex: 1; min-width: 0; }
}

/* Ikona košíka v hlavičke — SVG namiesto textového znaku. */
.cart-icon { display: inline-flex; align-items: center; justify-content: center; }
.cart-icon .cart-glyph { display: block; }

/* Doručujeme len do EÚ — hovorí to formulár, nielen tooltip. */
.ship-scope {
  margin: 14px 0 0; padding: 8px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(197,160,89,.06);
  font-size: 12.5px; color: var(--muted);
}

/* Výber ikony košíka v editore layoutu — obrázky, nie názvy. */
.led-icons { align-items: flex-start; }
.cart-icon-pick { display: flex; gap: 6px; margin-top: 4px; }
.cart-icon-pick .cip {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: none; border: 1px solid rgba(197,160,89,.2); border-radius: 3px;
  color: var(--muted);
}
.cart-icon-pick .cip:hover { color: var(--gold); border-color: rgba(197,160,89,.5); }
.cart-icon-pick .cip.is-on { color: var(--gold); border-color: var(--gold); background: rgba(197,160,89,.12); }

/* Riadok v košíku vedie na produkt — fotka aj názov. */
.cart-line-media { display: block; flex: none; }
.cart-line-media-empty { display: flex; }
.cart-line-title a { color: inherit; text-decoration: none; }
.cart-line-title a:hover { color: var(--gold); text-decoration: underline; }
.cart-line-media:hover img { opacity: .82; }

/* --- pätička: čím sa dá zaplatiť a že je to zabezpečené ------------------- */
.footer-trust {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 0 0; margin-top: 8px;
  border-top: 1px solid rgba(197,160,89,.12);
}
.footer-trust-label {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.footer-trust ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-trust li {
  /* Značky sú tlačené na bielom — na tmavom pozadí ich treba podložiť,
     inak z modrého textu na čiernom nie je nič. */
  display: block; width: 48px; height: 24px; border-radius: 3px;
  background: #fff; overflow: hidden; opacity: .82; transition: opacity .15s;
}
.footer-trust li:hover { opacity: 1; }
.footer-trust svg { display: block; width: 100%; height: 100%; }

/* --- nákup na firmu ------------------------------------------------------- */
.buy-as-company { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; }
.buy-as-company input { width: auto; margin: 0; }
.company-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.company-grid > label { margin: 10px 0 0; min-width: 0; }
.company-grid .co-name { grid-column: 1 / -1; }
.company-grid .co-vat { grid-column: span 1; }
@media (max-width: 560px) {
  .company-grid { grid-template-columns: 1fr 1fr; }
  .company-grid .co-name { grid-column: 1 / -1; }
}

/* --- číselný rad faktúr --------------------------------------------------- */
.inv-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 18px; }
.inv-skip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.inv-skip-row input { width: 160px; margin: 0; }
.inv-skips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.inv-skips li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 12px;
  border: 1px solid rgba(197,160,89,.22); border-radius: 3px; color: var(--muted);
}
.inv-skip-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; }
.inv-skip-del:hover { color: var(--danger); }
.inv-logo-preview {
  display: inline-block; margin-top: 8px; padding: 10px 14px;
  background: #0a0a0a; border: 1px solid rgba(197,160,89,.2); border-radius: 3px;
}
.inv-logo-preview img { max-width: 180px; max-height: 60px; display: block; }

/* --- odstúpenie od zmluvy ------------------------------------------------- */
.footer-withdraw { white-space: nowrap; }
.wd-btn { white-space: nowrap; }
.wd-flag { font-size: 12px; color: var(--muted); }
.wd-statement {
  white-space: pre-wrap; font-family: var(--sans); font-size: 12.5px; line-height: 1.7;
  padding: 14px 16px; margin: 0 0 14px;
  background: rgba(197,160,89,.05); border-left: 2px solid var(--gold);
  color: var(--ivory); overflow-x: auto;
}
.wd-confirm { margin: 0; }
.wd-done h2 { color: var(--gold); }

/* --- tikety --------------------------------------------------------------- */
.tkt { border: 1px solid rgba(197,160,89,.16); border-radius: 3px; margin: 8px 0; }
.tkt-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; font-size: 13px;
}
.tkt-subject { flex: 1; min-width: 120px; }
.tkt-head .btn { margin-left: auto; }
.tkt-body { padding: 0 12px 12px; }
.tkt-thread { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tkt-msg {
  padding: 10px 12px; border-radius: 3px; font-size: 13px; line-height: 1.6;
  background: rgba(255,255,255,.03); border-left: 2px solid rgba(197,160,89,.25);
}
/* Naša odpoveď je opticky na druhej strane rozhovoru — kto číta vlákno,
   nemá lúštiť, kto to napísal. */
.tkt-msg.is-shop { background: rgba(197,160,89,.07); border-left-color: var(--gold); }
.tkt-who { font-weight: 600; color: var(--gold-soft); margin-right: 8px; }
.tkt-when { color: var(--muted); font-size: 11px; }
.tkt-msg p { margin: 6px 0 0; }
.tkt-reply { margin: 0 0 8px; }
.tkt-new { margin: 14px 0 0; }
.tkt-new > summary { cursor: pointer; color: var(--gold-soft); font-size: 13px; }
.tkt-new > summary:hover { color: var(--gold); }
.tkt-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.tkt-status { width: auto; margin: 0; }

/* --- návod ---------------------------------------------------------------- */
.howto-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 30px; }
.howto-card {
  flex: 1 1 240px; display: block; padding: 16px 18px; text-decoration: none;
  border: 1px solid rgba(197,160,89,.2); border-radius: 3px; color: inherit;
}
.howto-card:hover { border-color: var(--gold); background: rgba(197,160,89,.05); }
.howto-card span { display: block; font-size: 22px; color: var(--gold); }
.howto-card b { display: block; margin: 4px 0 2px; }
.howto-card em { color: var(--muted); font-size: 12.5px; font-style: normal; }
.howto-steps { list-style: none; counter-reset: none; margin: 0; padding: 0; }
.howto-steps > li { padding: 0 0 4px 0; margin: 0 0 18px; border-left: 2px solid rgba(197,160,89,.2); padding-left: 18px; }
.howto-steps h3 { margin: 0 0 6px; font-size: 15px; color: var(--gold-soft); }
.howto-note { margin-top: 26px; }

/* --- objednávka v účte zákazníka ------------------------------------------ */
.order-open { color: inherit; text-decoration: none; }
.order-open:hover strong { color: var(--gold); text-decoration: underline; }

/* Nezaplatená objednávka: platba je to jediné, čo tu človek hľadá. */
.pay-panel { border-color: var(--gold); }
.pay-total { font-size: 16px; margin: 0 0 16px; }
.pay-total strong { color: var(--gold); font-size: 20px; }
.pay-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.pay-route h3 { margin: 0 0 4px; font-size: 15px; color: var(--gold-soft); }
.pay-qr {
  /* QR sa musí dať naskenovať — na tmavom pozadí ho čítačka nevidí. */
  display: inline-block; background: #fff; padding: 10px; border-radius: 3px; margin: 10px 0;
}
.pay-qr svg { display: block; width: 190px; height: 190px; }
.pay-details { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12.5px; }
.pay-details dt { color: var(--muted); }
.pay-details dd { margin: 0; }
.pay-details code { font-size: 12px; word-break: break-all; }

.acc-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.acc-items li { display: flex; align-items: center; gap: 12px; }
.acc-item-media { flex: none; display: block; width: 64px; height: 64px; }
.acc-item-media img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; }
.acc-item-empty {
  display: flex; width: 64px; height: 64px; align-items: center; justify-content: center;
  background: var(--charcoal-2); color: rgba(197,160,89,.35); border-radius: 2px;
}
.acc-item-body { flex: 1; min-width: 0; }
.acc-item-body a { color: inherit; text-decoration: none; display: block; }
.acc-item-body a:hover strong { color: var(--gold); text-decoration: underline; }
.acc-item-body .muted { display: block; }
.acc-item-qty { color: var(--muted); font-size: 13px; }
.acc-item-price { white-space: nowrap; }
.acc-total { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); text-align: right; }
.acc-total strong { color: var(--gold); font-size: 17px; margin-left: 8px; }

@media (max-width: 720px) {
  .pay-routes { grid-template-columns: 1fr; }
  .pay-qr svg { width: 160px; height: 160px; }
}

/* --- analytika ------------------------------------------------------------ */
.an-range { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.an-range label { margin: 0; }
.an-range input { margin: 4px 0 0; width: auto; }
.an-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.an-kpis .cust-kpi { flex: 1 1 110px; }

/* Stĺpcový graf návštev. Zlatá časť = objednávky, aby sa dalo naraz vidieť
   koľko ich prišlo a koľko z nich niečo kúpilo. */
.an-chart { display: flex; align-items: flex-end; gap: 2px; height: 140px; margin: 10px 0; }
.an-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.an-col i { display: block; width: 100%; background: rgba(197,160,89,.28); border-radius: 1px 1px 0 0; }
.an-col u { position: absolute; bottom: 0; left: 0; width: 100%; background: var(--gold); border-radius: 1px 1px 0 0; }
.an-col:hover i { background: rgba(197,160,89,.5); }

.an-bar { display: inline-block; width: 100%; max-width: 220px; height: 8px;
          background: rgba(197,160,89,.12); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.an-bar i { display: block; height: 100%; background: rgba(197,160,89,.45); }
.an-bar.is-gold i { background: var(--gold); }
.an-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin: 4px 0; }
.an-row span:first-child { min-width: 92px; }
.an-row b { min-width: 40px; text-align: right; }
.an-tech { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.an-tech h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted);
              letter-spacing: .08em; text-transform: uppercase; }

.an-funnel { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.an-step-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.an-drop { margin-left: auto; color: #c46a5a; font-size: 12px; }
.an-nores td { color: #d4a0a0; }

/* --- vzácnosť: povedané pokojne, nie ako výpredaj -------------------------
   Žiadne odpočty ani červená. Pri unikátoch je to popis, nie nátlak, a tak to
   má aj vyzerať — inak to celej galérii ubližuje viac, než pomôže. */
.card-only { margin: 6px 0 0; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #8a8578; }
.card-only.is-fresh { color: var(--gold); }
.product-scarcity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 14px 0 4px; padding: 10px 14px; border-left: 2px solid var(--gold);
  background: rgba(197,160,89,.06); font-size: 14px; }
.product-scarcity.is-sold { border-left-color: #6a6558; background: rgba(255,255,255,.03); }
.product-scarcity .scarcity-mark { color: var(--gold); }
.product-scarcity.is-sold .scarcity-mark { color: #6a6558; }
.product-scarcity .muted { color: var(--muted); }
.scarcity-since { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ship-promise { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.sold-onward { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* --- obľúbené a upozornenie na podobný prírastok -------------------------- */
.btn-heart { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  padding: 7px 14px; color: var(--muted); font: inherit; font-size: 13px;
  cursor: pointer; transition: border-color .15s, color .15s; }
.btn-heart:hover { border-color: var(--gold); color: var(--ivory); }
.btn-heart .heart { font-size: 15px; line-height: 1; }
.btn-heart.is-on { border-color: var(--gold); color: var(--gold); }
.interest-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; }
.interest-row { display: flex; gap: 8px; margin-top: 8px; }
.interest-row input { flex: 1; background: #14141a; border: 1px solid #2c2c36;
  color: var(--ivory); border-radius: 3px; padding: 8px 10px; font: inherit; font-size: 14px; }
.interest-row input:focus { border-color: var(--gold); outline: none; }

/* ==========================================================================
   Kartový panel kusu — popis · parametre · otázky · recenzie
   --------------------------------------------------------------------------
   Štyri odpovede na tú istú otázku („je to ten správny predmet pre mňa"),
   medzi ktorými sa preskakuje, nečíta sa to za sebou. Preto karty a nie štyri
   sekcie pod sebou — inak sú posledné dve pod ohybom a akoby neexistovali.

   Bez JavaScriptu ostane všetko viditeľné pod sebou: horšie rozloženie, ale
   nikdy nie rozbité. Triedu `is-tabbed` pridáva až skript.
   ========================================================================= */
.piece-panel { border-top: 1px solid var(--line); }

.pp-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 26px;
  border-bottom: 1px solid var(--line); }
.pp-tab { position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 13px 20px; margin-bottom: -1px;
  color: var(--muted); font: inherit; font-size: 14px; letter-spacing: .03em;
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .16s, border-color .16s; }
.pp-tab:hover { color: var(--ivory); }
.pp-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.pp-tab:focus-visible { outline: 1px solid var(--gold); outline-offset: -3px; }
/* Počet a hodnotenie v karte: číslo je dôvod, prečo na kartu kliknúť. */
.pp-count { display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: rgba(197,160,89,.16); color: var(--gold); font-size: 11.5px; }
.pp-rating { color: var(--gold); font-size: 12.5px; }

/* Bez skriptu: nadpis karty ostane, panely sú pod sebou. */
.piece-panel:not(.is-tabbed) .pp-tabs { display: none; }
.piece-panel.is-tabbed .pp-panel { display: none; }
.piece-panel.is-tabbed .pp-panel.is-active { display: block;
  animation: pp-fade .22s ease both; }
@keyframes pp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .piece-panel.is-tabbed .pp-panel.is-active { animation: none; }
}

/* Popis ide na celú šírku panela. Riadok textu je tak dlhší, než býva zvykom —
   je to vedomé rozhodnutie: popisy tu majú tabuľky, fotky a odseky, ktoré sa
   do úzkeho stĺpca nezmestili. */
.pp-prose { max-width: none; }
.pp-prose p { margin: 0 0 14px; line-height: 1.75; }
/* Bohatý text z editora: obrázky, nadpisy a odrážky sa musia správať slušne
   aj vtedy, keď ich tam vloží niekto iný než my. */
.pp-prose img { max-width: 100%; height: auto; border-radius: 3px; }
.pp-prose h2, .pp-prose h3 { color: var(--ivory); margin: 22px 0 10px; line-height: 1.3; }
.pp-prose ul, .pp-prose ol { margin: 0 0 14px; padding-left: 22px; line-height: 1.75; }
.pp-prose li { margin-bottom: 6px; }
.pp-prose a { color: var(--gold); }
.pp-prose table { border-collapse: collapse; margin: 0 0 16px; }
.pp-prose td, .pp-prose th { border: 1px solid var(--line); padding: 7px 12px; text-align: left; }
.pp-prose figure { margin: 22px 0 26px; }
.pp-shot { margin: 22px 0 26px; }
.pp-shot img { display: block; width: 100%; height: auto; border-radius: 3px;
  border: 1px solid var(--line); }

/* Časté otázky v karte Otázky a odpovede. */
.pp-faq { margin-bottom: 8px; }
.pp-faq .faq-item { border-bottom: 1px solid var(--line); }
.pp-faq summary { cursor: pointer; padding: 12px 0; color: var(--ivory); font-size: 14.5px; }
.pp-faq summary::marker { color: var(--gold); }
.pp-faq .faq-answer { padding: 0 0 14px; color: var(--muted); line-height: 1.65; max-width: 68ch; }
.pp-sub { margin: 26px 0 6px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.pp-onlybuyers { margin: 0 0 18px; padding: 10px 14px; border-left: 2px solid var(--line);
  color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 68ch; }

/* Parametre v dvoch stĺpcoch — hodnota vpravo, aby sa dali očami zrovnať. */
/* Parametre na celú šírku. Stĺpce sa dopĺňajú podľa toho, koľko je miesta —
   dva pevné stĺpce na širokej obrazovke roztiahnu názov a hodnotu na opačné
   konce riadka a oko medzi nimi stratí väzbu. */
.pp-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 40px; margin: 0; max-width: none; }
.pp-spec { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pp-spec dt { color: var(--muted); font-size: 13.5px; }
.pp-spec dd { margin: 0; text-align: right; color: var(--ivory); font-size: 14px; }

/* --- hlavička sekcie s tlačidlom vpravo ---------------------------------- */
.pp-qa-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
  justify-content: space-between; margin-bottom: 20px; }
.pp-qa-head h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; color: var(--ivory); }
.pp-qa-head p { margin: 0; max-width: 62ch; }
.pp-empty { color: var(--muted); font-size: 14px; line-height: 1.6;
  padding: 18px 20px; border: 1px dashed var(--line); border-radius: 3px; max-width: 64ch; }

/* --- otázka a odpoveď ---------------------------------------------------- */
.pp-qa-list, .pp-rev-list { list-style: none; margin: 22px 0 0; padding: 0; }
.pp-qa { padding: 18px 0; border-top: 1px solid var(--line); }
.pp-qa-q, .pp-qa-a { display: flex; gap: 12px; align-items: flex-start; }
.pp-qa-a { margin-top: 12px; padding-left: 30px; }
.pp-qa p { margin: 0 0 4px; line-height: 1.65; }
.pp-qa-q p { color: var(--ivory); }
.pp-qa-a p { color: #cfc9bb; }
.pp-badge { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 12px;
  background: rgba(255,255,255,.06); color: var(--muted); }
.pp-badge.is-shop { background: rgba(197,160,89,.16); color: var(--gold); }
.pp-meta { font-size: 12px; color: var(--muted); }

/* --- recenzie ------------------------------------------------------------ */
.pp-avg { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.pp-avg b { font-size: 17px; color: var(--ivory); }
.pp-stars { color: var(--gold); letter-spacing: 2px; }
.pp-stars-off { color: #3a3730; }
.pp-review { padding: 18px 0; border-top: 1px solid var(--line); }
.pp-review > p { margin: 0; line-height: 1.65; max-width: 68ch; }
.pp-review-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.pp-verified { font-size: 11.5px; color: #7bb87b; letter-spacing: .04em; }
.pp-review-reply { margin-top: 12px; padding: 12px 16px; border-left: 2px solid var(--gold);
  background: rgba(197,160,89,.05); border-radius: 0 3px 3px 0; }
.pp-review-reply p { margin: 4px 0 0; color: #cfc9bb; line-height: 1.6; }

/* --- formuláre: jedno pole, keď je človek prihlásený --------------------- */
.pp-ask { margin: 0 0 8px; padding: 18px 20px; border: 1px solid rgba(197,160,89,.28);
  border-radius: 3px; background: rgba(197,160,89,.04); max-width: 72ch; }
.pp-ask textarea, .pp-ask input, .pp-ask select {
  width: 100%; background: #14141a; border: 1px solid #2c2c36; color: var(--ivory);
  border-radius: 3px; padding: 10px 12px; font: inherit; font-size: 14.5px; line-height: 1.55; }
.pp-ask textarea { resize: vertical; min-height: 84px; }
.pp-ask textarea:focus, .pp-ask input:focus { border-color: var(--gold); outline: none; }
.pp-ask-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin-top: 12px; }
.pp-rev-who { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.pp-rev-who label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.pp-rev-rate { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: 13px; color: var(--muted); }
.pp-rev-rate select { width: auto; color: var(--gold); letter-spacing: 2px; }

/* Krátky úvod vedľa ceny, celý popis je v karte nižšie. */
.product-lead p { margin: 0 0 8px; line-height: 1.7; }
.product-lead-more { font-size: 13px; color: var(--gold); text-decoration: none;
  border-bottom: 1px dotted currentColor; }

@media (max-width: 760px) {
  /* Jeden posuvný pás, nie dva riadky: zalomené karty vyzerajú ako rozbitá
     navigácia a odtlačia obsah nižšie. `nowrap` je tu to podstatné — bez neho
     `overflow-x` nemá čo posúvať. */
  .pp-tabs { gap: 0; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* Náznak, že vpravo niečo je — inak sa na užšom telefóne o ďalších
       kartách nedozvie nikto. */
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .pp-tabs::-webkit-scrollbar { display: none; }
  .pp-tab { padding: 12px 14px; font-size: 13.5px; }
  .pp-specs { grid-template-columns: 1fr; gap: 0; }
  .pp-rev-who { grid-template-columns: 1fr; }
  .pp-qa-a { padding-left: 0; }
}

/* --- konzola: moderovanie ------------------------------------------------- */
.voice-row { border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px; margin-bottom: 12px; }
.voice-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.voice-q { margin: 0 0 8px; line-height: 1.6; }
.voice-a { margin: 0 0 8px; padding-left: 12px; border-left: 2px solid var(--gold);
  color: var(--muted); line-height: 1.6; }
.voice-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.voice-actions textarea { flex: 1 1 100%; background: #14141a; border: 1px solid #2c2c36;
  color: var(--ivory); border-radius: 3px; padding: 8px 10px; font: inherit; font-size: 14px; }
.voice-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

/* --- podobné kusy a naposledy prezerané ---------------------------------- */
.block-title { font-size: 18px; font-weight: 500; letter-spacing: .04em;
  margin: 0 0 18px; color: var(--ivory); }
.similar-block, .recent-block { border-top: 1px solid var(--line); }

/* --- kus s fotkou a názvom namiesto holého SKU ----------------------------
   Rovnaké značky vo všetkých tabuľkách analytiky. Prepínač 🖼 Fotky pridá na
   <body> triedu `an-nopix` a fotky zmiznú — riadok si nechá výšku textu, takže
   sa tabuľka neprelomí, len stenčí. */
.an-piece { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--ivory); vertical-align: middle; max-width: 42ch; }
a.an-piece:hover .an-piece-title { color: var(--gold); }
.an-thumb { width: 38px; height: 38px; flex: 0 0 auto; object-fit: cover; border-radius: 3px;
  background: #14141a; border: 1px solid var(--line); }
.an-thumb-none { display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 15px; }
.an-piece-body { display: flex; flex-direction: column; min-width: 0; }
.an-piece-title { font-size: 13px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.an-piece-sku { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }
.an-nopix .an-thumb { display: none; }
.an-pix-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  margin-left: auto; }
.an-pix-toggle input { margin: 0; }
/* V zozname udalostí je kus vnútri riadku textu — tam menšia mierka. */
.an-ev-what .an-piece { max-width: 30ch; gap: 6px; }
.an-ev-what .an-thumb { width: 22px; height: 22px; }
.an-ev-what .an-piece-title { -webkit-line-clamp: 1; }

.an-heat-pick { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 16px; align-items: center; }
.an-heat-pick .an-piece { max-width: 26ch; }
.an-heat-pick .an-thumb { width: 26px; height: 26px; }
/* Stránka pod mriežkou, aby bunky sedeli na tom, čo popisujú. */
.an-heat-wrap { position: relative; border: 1px solid var(--line); border-radius: 3px;
                overflow: hidden; height: 620px; }
.an-heat-frame { width: 100%; height: 100%; border: 0; background: #0a0a0a; }
.an-heat-layer { position: absolute; inset: 0; pointer-events: none; }
.an-heat-layer span {
  position: absolute; width: 2.5%; height: 20px; margin: -10px 0 0 -1.25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,0,.9) 0%, rgba(255,200,0,.5) 55%, transparent 72%);
  mix-blend-mode: screen;
}
.an-scroll { max-width: 420px; margin-top: 10px; }

.an-session { border: 1px solid rgba(197,160,89,.16); border-radius: 3px; margin: 10px 0; padding: 10px 12px; }
.an-session-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.an-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.an-path li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
              padding: 3px 0; border-left: 2px solid rgba(197,160,89,.2); padding-left: 10px; }
.an-ev-icon { width: 18px; }
.an-ev-when { color: var(--muted); font-size: 11px; min-width: 38px; }
.an-ev-what code { font-size: 11.5px; }

.an-rule { border: 1px solid rgba(197,160,89,.18); border-radius: 3px; padding: 12px 14px; margin: 12px 0; }
.an-rule > .addr-same { margin-top: 0; }

@media (max-width: 900px) {
  .an-tech { grid-template-columns: 1fr; }
  .an-heat-wrap { height: 420px; }
}

/* --- poplatky v editácii objednávky --------------------------------------- */
.ord-charges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 10px; margin: 10px 0 6px; }
.ord-charges label { margin: 0; font-size: 11.5px; }
.ord-charges input { margin-top: 3px; font-size: 12px; padding: 5px 6px; }
.ord-manual { color: var(--gold-soft); margin: 4px 0 0; }
/* Živý súčet — operátor vidí výsledok pred uložením, nie až po obnovení. */
.ord-sum { width: 100%; max-width: 320px; margin: 10px 0; font-size: 12.5px; border-collapse: collapse; }
.ord-sum td { padding: 3px 0; color: var(--muted); }
.ord-sum td.num { text-align: right; color: var(--ivory); }
.ord-sum-total td { border-top: 1px solid var(--line); padding-top: 6px; }
.ord-sum-total td.num { color: var(--gold); font-size: 15px; }
@media (max-width: 900px) { .ord-charges { grid-template-columns: 1fr 1fr; } }

/* Vysvetlivka pri module — čo sa stane, keď to prepnem. */
.module-note {
  display: block; margin-top: 3px; max-width: 62ch;
  font-size: 11.5px; font-style: normal; line-height: 1.5; color: var(--muted);
}

/* --- analytika: preklikávanie a segmenty ---------------------------------- */
.an-seg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.an-seg-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.an-seg-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--gold); border-radius: 3px; font-size: 12px;
  background: rgba(197,160,89,.1);
}
.an-seg-chip b { color: var(--gold); }
.an-seg-chip a { color: var(--muted); text-decoration: none; }
.an-seg-chip a:hover { color: var(--danger); }
/* Rozmer, na ktorý sa dá kliknúť. Podčiarknutie bodkami hovorí „toto niečo
   spraví" bez toho, aby tabuľka vyzerala ako zoznam odkazov. */
.an-drill { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(197,160,89,.5); }
.an-drill:hover { color: var(--gold); border-bottom-color: var(--gold); }
.an-jump { font-size: 11.5px; color: var(--gold-soft); text-decoration: none; white-space: nowrap; }
.an-jump:hover { text-decoration: underline; }
.an-jump + .an-jump { margin-left: 10px; }
.an-sug { color: #7fb069; }

.an-interest { border: 1px solid rgba(197,160,89,.18); border-radius: 3px; padding: 14px 16px; margin: 12px 0 18px; }
.an-interest h4 { margin: 12px 0 6px; font-size: 12px; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--muted); }
.an-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.an-chips li {
  padding: 4px 9px; font-size: 12px; border-radius: 3px;
  border: 1px solid rgba(197,160,89,.2); color: var(--ivory);
}
.an-chips li b { color: var(--gold); margin-left: 4px; }
.an-offer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

.an-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.an-group { border: 1px solid rgba(197,160,89,.16); border-radius: 3px; padding: 12px 14px; }
.an-group h4 { margin: 0 0 4px; color: var(--gold-soft); font-size: 14px; }
.an-group-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.an-group-list li { font-size: 12.5px; }
.an-group-list .muted { display: block; }
@media (max-width: 900px) { .an-groups { grid-template-columns: 1fr; } }

/* --- varianty, predobjednávka, doskladnenie ------------------------------- */
.variant-pick { margin: 14px 0 6px; }
.variant-label { display: block; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.variant-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-opt { background: none; border: 1px solid var(--line); border-radius: 3px;
  padding: 9px 14px; color: var(--ivory); font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .16s, color .16s, background .16s; }
.variant-opt:hover:not(:disabled) { border-color: var(--gold); }
.variant-opt.is-active { border-color: var(--gold); color: var(--gold);
  background: rgba(197,160,89,.09); }
/* Vypredaný variant ostáva viditeľný — zoznam, z ktorého veci miznú, vyzerá
   ako chyba a zákazník hľadá, čo tam bolo. */
.variant-opt.is-out { opacity: .55; }
.variant-opt:disabled { cursor: not-allowed; text-decoration: line-through; }
.variant-out { font-size: 11px; color: var(--muted); margin-left: 6px; }

.preorder-note { margin: 8px 0 0; font-size: 13px; color: var(--gold-soft); }

.restock-watch { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.restock-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.restock-row input { flex: 1 1 200px; }

/* Blok v konzole, ktorý sa dá zabaliť. */
.pe-block { border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; }
.pe-block > summary { cursor: pointer; color: var(--ivory); }
.pe-block .admin-table input[type="number"] { width: 100%; }

/* Odkaz na celý popis stojí v riadku za textom, nie pod ním. */
.product-lead-more { white-space: nowrap; font-size: 13px; color: var(--gold);
  text-decoration: none; border-bottom: 1px dotted currentColor; margin-left: 4px; }
.product-lead-more:hover { color: var(--gold-soft); }
/* „s DPH“ pri sume — patrí k číslu, nie na vlastný riadok. */
.price-vat-tag { font-size: 12px; letter-spacing: .04em; color: var(--muted);
  vertical-align: middle; margin-left: 6px; cursor: help;
  border-bottom: 1px dotted rgba(197,160,89,.4); }
.pp-vat-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* --- „ostatní si prikúpili aj" v košíku ----------------------------------- */
.cart-cross { padding: 14px 20px; border-top: 1px solid var(--line);
  background: rgba(197,160,89,.04); }
.cart-cross-head { margin: 0 0 10px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-soft); }
.cart-cross-list { display: flex; flex-direction: column; gap: 8px; }
.cart-cross-item { display: grid; grid-template-columns: 44px 1fr auto;
  gap: 10px; align-items: center; }
.cart-cross-media { display: block; width: 44px; height: 44px; overflow: hidden;
  border-radius: 3px; border: 1px solid var(--line); }
.cart-cross-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-cross-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cart-cross-title { color: var(--ivory); font-size: 13px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-cross-title:hover { color: var(--gold); }
.cart-cross-price { color: var(--gold-soft); font-size: 12.5px; }
/* Odkiaľ návrh pochádza. Tlmené, ale prítomné — „kúpili spolu" je iné tvrdenie
   než „podobný kus" a zákazník má právo vedieť, ktoré číta. */
.cart-cross-why { color: var(--muted); font-size: 10.5px; letter-spacing: .04em; }
.cart-cross-add { padding: 4px 10px; line-height: 1; }
.cart-cross-coupon { margin: 10px 0 0; font-size: 12px; color: var(--gold-soft); }
.cart-cross-coupon code { background: rgba(197,160,89,.14); padding: 1px 6px; border-radius: 2px; }

/* --- editovateľné menu obchodu -------------------------------------------- */
.main-nav .nav-drop { position: relative; }
.main-nav .nav-drop > button { background: none; border: 0; color: inherit; font: inherit;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.main-nav .nav-drop > button::after { content: '▾'; font-size: 9px; opacity: .7; }
.nav-drop-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 210px; padding: 8px; border-radius: 3px;
  background: var(--charcoal); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,.45); display: none; }
.nav-drop[open] .nav-drop-panel, .nav-drop.is-open .nav-drop-panel { display: block; }
.nav-drop-panel a { display: block; padding: 7px 10px; border-radius: 2px;
  color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.nav-drop-panel a:hover { color: var(--gold); background: rgba(197,160,89,.07); }
/* Zvýraznená položka — akcia, novinka, čokoľvek, čo má byť vidieť skôr. */
.main-nav .nav-accent { color: var(--gold); border-bottom: 1px solid currentColor; }
.main-nav .nav-btn { border: 1px solid var(--gold); border-radius: 3px;
  padding: 6px 14px; color: var(--gold); }
.main-nav .nav-btn:hover { background: var(--gold); color: var(--obsidian); }
/* Oddeľovač: zvislá bodka medzi skupinami, na úzkej obrazovke prekáža. */
.main-nav .nav-divider { color: var(--line); user-select: none; opacity: .8; }
@media (max-width: 720px) { .main-nav .nav-divider { display: none; } }

/* --- editor menu v konzole ------------------------------------------------ */
.mn-child > td:first-child { color: var(--muted); font-size: 11.5px; }
.mn-child { background: rgba(255,255,255,.015); }

/* --- nastavenie krížového predaja ----------------------------------------- */
.cs-grid { display: grid; gap: 16px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cs-grid > label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cs-grid > label input[type="number"] { max-width: 120px; }
.cs-grid > label em { text-transform: none; letter-spacing: 0; font-style: normal;
  line-height: 1.5; }
.cs-grid .cs-check { flex-direction: row; align-items: flex-start; gap: 10px;
  text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ivory); }
.cs-grid .cs-check input { margin-top: 3px; }
.cs-grid .cs-check em { display: block; margin-top: 3px; }

/* --- sprievodca inštaláciou pre zákazníka (/instalacia) ------------------- */
.ins-cards { display: grid; gap: 18px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ins-card { border: 1px solid var(--line); border-radius: 5px; padding: 20px;
  background: var(--charcoal); display: flex; flex-direction: column; gap: 8px; }
.ins-card h2 { margin: 0 0 4px; font-size: 17px; }
.ins-card .btn { margin-top: auto; align-self: flex-start; }
.ins-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .ins-row { grid-template-columns: 1fr; } }
.ins-log { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; }
.ins-log li { margin: 3px 0; }
#ins-form h3 { margin: 22px 0 4px; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-soft); }
label.check { display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 14px; color: var(--ivory); }
label.check input { width: auto; }

/* --- Kde býva popis karty (gridSettings.captionMode) ------------------------
   Tri režimy namiesto jedného prepínača. Spoločné pre všetky: **popis nikdy
   nepretečie cez fotku ani cez kartu** — karta reže, čo sa nezmestí. */
.product-card { overflow: hidden; }

/* Karty sa neťahajú na výšku najvyššej v riadku. Bez toho ostávali pod
   krátkym názvom veľké prázdne plochy, ktoré nemal čím vyplniť. */
.product-grid { align-items: start; }

/* POD — popis pod fotkou. Výška podľa obsahu, nie podľa suseda. */
.cap-pod .card-body { padding: 12px 14px 14px; }
.cap-pod .card-scrim { display: none; }

/* CEZ — popis na fotke. Sedí dole, je orezaný výškou karty a podložený
   prechodom, aby sa dal prečítať aj na svetlej fotke. */
.cap-cez .product-card { position: relative; }
.cap-cez .card-media { border-radius: var(--card-radius, 3px); }
.cap-cez .card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: none; padding: 12px 14px;
  max-height: 78%; overflow: hidden;
}
.cap-cez .card-scrim { display: block; }
/* Riadky, ktoré na fotke pýtajú miesto a nič nepridajú. Názov a cena stačia. */
.cap-cez .card-meta { display: none; }
.cap-cez .card-title { -webkit-line-clamp: 2; }

/* HOVER — karta je čistá fotka; popis vyjde zdola až pri prejdení myšou.
   Zaberá nula miesta a katalóg je tichý. */
.cap-hover .product-card { position: relative; }
.cap-hover .card-media { border-radius: var(--card-radius, 3px); }
.cap-hover .card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px 14px; max-height: 78%; overflow: hidden;
  transform: translateY(101%);
  transition: transform .28s ease;
  background: linear-gradient(to top, rgba(var(--scrim-rgb), .94), rgba(var(--scrim-rgb), .74));
}
.cap-hover .card-scrim { display: none; }
.cap-hover .product-card:hover .card-body,
.cap-hover .product-card:focus-within .card-body { transform: translateY(0); }
.cap-hover .card-meta { display: none; }
.cap-hover .card-title { -webkit-line-clamp: 2; }
/* Dotykové zariadenie kurzor nemá — tam by sa popis nezobrazil nikdy, takže
   sa ukáže natrvalo. Rovnako keď si návštevník vypne animácie. */
@media (hover: none) {
  .cap-hover .card-body { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-hover .card-body { transition: none; }
}

/* Vlnovka a zoznam sú riadky — popis má vedľa fotky vlastný stĺpec a žiadny
   z týchto troch režimov preň nedáva zmysel. */
.lay-vlnovka .card-body,
.view-list .card-body {
  position: static !important; transform: none !important;
  max-height: none !important; background: none !important;
}
.lay-vlnovka .card-meta,
.view-list .card-meta { display: block; }

/* Omrvinková navigácia (Domov › Katalóg › Kategória) */
.og-crumbs { padding-top: 14px; padding-bottom: 0; font-size: .82rem; }
.og-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.og-crumbs li + li::before { content: "›"; margin: 0 8px; opacity: .5; }
.og-crumbs a { color: inherit; opacity: .75; text-decoration: none; }
.og-crumbs a:hover { opacity: 1; text-decoration: underline; }
.og-crumbs [aria-current] { opacity: .9; }