:root {

  /* Tmavé okrové téma — spotlight styl */

  --cream: #1a1208;          /* hlavní pozadí */

  --cream-dark: #120d06;     /* tmavší — karty, sidebary */

  --cream-mid: #221608;      /* hover stavy */

  --brown-dark: #f0e2c8;     /* hlavní text */

  --brown-mid: #d4b896;      /* sekundární text */

  --brown-light: #a88060;    /* tlumený text */

  --stone: #8a7260;

  --stone-light: #50402e;

  --sage: #7a9660;

  --sage-dark: #96b878;

  --sage-light: #3a5228;

  --gold: #c8922a;

  --gold-dark: #e0b050;

  --white: #1a1208;

  --text: #f0e2c8;

  --text-mid: #c8a880;

  --text-light: #8a7260;

  --border: rgba(200,170,120,0.12);

  --border-strong: rgba(200,170,120,0.24);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);

  --shadow: 0 4px 20px rgba(0,0,0,0.5);

  --shadow-lg: 0 12px 48px rgba(0,0,0,0.6);

  --radius: 4px;

  --radius-md: 8px;

  --radius-lg: 12px;

}



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



body {

  font-family: 'Jost', sans-serif;

  background: #0e0a05;

  color: var(--text);

  min-height: 100vh;

  overflow-x: hidden;

  position: relative;

}



/* ── TYPOGRAPHY ──

h1, h2, h3, h4 {

  font-family: 'EB Garamond', serif;

  font-weight: 400;

  letter-spacing: 0.02em;

}



/* ── SCROLLBAR ── */

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: #1e1608; }

::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; opacity: 0.6; }



/* ── PAGES ── */

.page { display: none; }

.page.active { display: block; }



/* ══════════════════════════════════════════

   NAVBAR

══════════════════════════════════════════ */

nav {

  position: fixed; top:0; left:0; right:0; z-index:1000;

  background: rgba(44,34,22,0.97);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--border);

  height: 64px;

  display: flex; align-items: center;

  padding: 0 32px;

  gap: 0;

}



.nav-logo {

  display: flex; align-items: center;

  cursor: pointer;

  text-decoration: none;

  flex-shrink: 0;

}

.rimakon-logo-svg {

  height: 44px;

  width: auto;

  transition: opacity 0.2s;

}

.nav-logo:hover .rimakon-logo-svg { opacity: 0.85; }



.nav-center {

  flex: 1;

  display: flex; align-items: center; justify-content: center;

  gap: 32px;

}



.nav-link {

  font-size: 12px;

  font-weight: 400;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--text-mid);

  cursor: pointer;

  transition: color 0.2s;

  text-decoration: none;

  border: none; background: none;

  font-family: 'Jost', sans-serif;

}

.nav-link:hover { color: var(--brown-dark); }

.nav-link.active { color: var(--sage-dark); border-bottom: 1px solid var(--sage-dark); padding-bottom: 2px; }



/* ── Vyhledávání ── */

.nav-search { position: relative; display: flex; align-items: center; }

.nav-search-input {

  width: 0;

  opacity: 0;

  padding: 0;

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

  background: var(--cream-dark);

  color: var(--text);

  font-family: 'Jost', sans-serif;

  font-size: 13px;

  height: 34px;

  transition: width 0.28s ease, opacity 0.2s ease, padding 0.28s ease, margin 0.28s ease;

  pointer-events: none;

}

.nav-search.open .nav-search-input {

  width: 200px;

  opacity: 1;

  padding: 0 12px;

  margin-right: 6px;

  pointer-events: auto;

}

.nav-search-input::placeholder { color: var(--text-light); }

.nav-search-input:focus { outline: none; border-color: var(--gold); }

.search-dropdown {

  display: none;

  position: absolute;

  top: calc(100% + 8px);

  right: 0;

  width: 320px;

  max-width: 80vw;

  background: var(--cream-dark);

  border: 1px solid var(--border-strong);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-lg);

  overflow: hidden;

  z-index: 200;

}

.nav-search.open .search-dropdown.has-content { display: block; }

.search-result {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 14px;

  cursor: pointer;

  border-bottom: 1px solid var(--border);

  transition: background 0.15s;

}

.search-result:hover { background: var(--cream-mid); }

.search-result-img {

  width: 40px; height: 40px;

  border-radius: var(--radius);

  object-fit: cover;

  flex-shrink: 0;

  background: var(--cream-mid);

  display: flex; align-items: center; justify-content: center;

  font-size: 20px;

}

.search-result-name { font-size: 13px; color: var(--text); }

.search-result-meta { font-size: 11px; color: var(--text-light); margin-top: 2px; }

.search-result-price { margin-left: auto; font-size: 12px; color: var(--gold-dark); white-space: nowrap; }

.search-show-all {

  display: block; width: 100%;

  padding: 12px 14px;

  background: var(--cream-mid);

  border: none;

  color: var(--text);

  font-family: 'Jost', sans-serif;

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  cursor: pointer;

  transition: background 0.15s;

}

.search-show-all:hover { background: var(--stone-light); }

.search-empty { padding: 16px 14px; font-size: 13px; color: var(--text-light); text-align: center; }



.nav-actions {

  display: flex; align-items: center; gap: 16px;

  flex-shrink: 0;

}



.nav-lang {

  font-size: 11px;

  letter-spacing: 0.1em;

  color: var(--stone);

  cursor: pointer;

  padding: 4px 8px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: none;

  font-family: 'Jost', sans-serif;

  transition: all 0.2s;

}

.nav-lang:hover { border-color: var(--border-strong); color: var(--text); }



.nav-icon-btn {

  width: 36px; height: 36px;

  display: flex; align-items: center; justify-content: center;

  border: 1px solid transparent;

  border-radius: var(--radius);

  cursor: pointer;

  background: none;

  color: var(--text-mid);

  transition: all 0.2s;

  position: relative;

  font-size: 18px;

}

.nav-icon-btn:hover { background: var(--cream-dark); color: var(--brown-dark); }



.cart-badge {

  position: absolute;

  top: 2px; right: 2px;

  width: 16px; height: 16px;

  background: var(--sage-dark);

  color: white;

  border-radius: 50%;

  font-size: 10px;

  display: flex; align-items: center; justify-content: center;

  font-family: 'Jost', sans-serif;

  font-weight: 500;

}



/* ── MOBILE HAMBURGER & DRAWER ── */

.nav-hamburger {

  display: none;

  width: 36px; height: 36px;

  flex-direction: column; align-items: center; justify-content: center;

  gap: 5px;

  background: none; border: none; cursor: pointer;

  padding: 0;

}

.nav-hamburger span {

  display: block;

  width: 20px; height: 1.5px;

  background: var(--text-mid);

  border-radius: 2px;

  transition: all 0.25s;

}



.mobile-drawer {

  display: none;

  position: fixed;

  top: 0; right: 0;

  width: 260px; height: 100vh;

  background: rgba(38,29,18,0.98);

  backdrop-filter: blur(16px);

  border-left: 1px solid var(--border-strong);

  z-index: 1100;

  flex-direction: column;

  padding: 0;

  transform: translateX(100%);

  transition: transform 0.28s ease;

  box-shadow: var(--shadow-lg);

}

.mobile-drawer.open {

  transform: translateX(0);

}

.mobile-drawer-header {

  display: flex; align-items: center; justify-content: space-between;

  padding: 0 20px;

  height: 56px;

  border-bottom: 1px solid var(--border);

  flex-shrink: 0;

}

.mobile-drawer-title {

  font-size: 10px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--stone);

  font-family: 'Jost', sans-serif;

}

.mobile-drawer-close {

  width: 32px; height: 32px;

  display: flex; align-items: center; justify-content: center;

  background: none; border: none; cursor: pointer;

  color: var(--text-mid); font-size: 18px;

  border-radius: var(--radius);

  transition: background 0.15s;

}

.mobile-drawer-close:hover { background: var(--cream-mid); }



.mobile-drawer-nav {

  flex: 1;

  display: flex; flex-direction: column;

  padding: 12px 0;

  overflow-y: auto;

}

.mobile-drawer-link {

  display: block; width: 100%;

  padding: 14px 24px;

  background: none; border: none;

  text-align: left;

  font-family: 'Jost', sans-serif;

  font-size: 13px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--text-mid);

  cursor: pointer;

  transition: color 0.15s, background 0.15s;

  border-bottom: 1px solid var(--border);

}

.mobile-drawer-link:last-child { border-bottom: none; }

.mobile-drawer-link:hover { color: var(--brown-dark); background: var(--cream-mid); }

.mobile-drawer-link.active { color: var(--sage-dark); }



.mobile-drawer-footer {

  padding: 20px 24px;

  border-top: 1px solid var(--border);

  flex-shrink: 0;

}

.mobile-drawer-lang {

  display: flex; align-items: center; gap: 10px;

  font-size: 11px;

  color: var(--stone);

  letter-spacing: 0.08em;

  font-family: 'Jost', sans-serif;

  margin-bottom: 4px;

}

.mobile-drawer-lang-btn {

  font-size: 11px;

  letter-spacing: 0.1em;

  color: var(--stone);

  cursor: pointer;

  padding: 5px 10px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: none;

  font-family: 'Jost', sans-serif;

  transition: all 0.2s;

}

.mobile-drawer-lang-btn:hover { border-color: var(--border-strong); color: var(--text); }

.mobile-drawer-lang-btn.active { border-color: var(--gold); color: var(--gold-dark); }



.mobile-drawer-overlay {

  display: none;

  position: fixed; inset: 0;

  background: rgba(0,0,0,0.5);

  z-index: 1090;

}

.mobile-drawer-overlay.open { display: block; }



@media (max-width: 768px) {

  .nav-hamburger { display: flex; }

  .nav-lang { display: none; }

  .mobile-drawer { display: flex; }

}



/* ══════════════════════════════════════════

   HERO

══════════════════════════════════════════ */

.hero {

  margin-top: 64px;

  height: auto;

  min-height: 400px;

  padding: 64px 24px 68px;

  display: flex; align-items: center; justify-content: center;

  position: relative;

  overflow: hidden;

  /* Základ: čistě černá. Gradient vrstvy tvoří spotlight efekt. */

  background-color: #0e0a05;

  background-image:

    radial-gradient(ellipse 44% 75% at 50% 0%,   rgba(210,150,50,0.20) 0%, transparent 60%),

    radial-gradient(ellipse 65% 55% at 50% 28%,  rgba(190,130,40,0.09) 0%, transparent 65%),

    radial-gradient(ellipse 100% 42% at 50% 100%, rgba(0,0,0,0.90)     0%, transparent 55%),

    radial-gradient(ellipse 38% 38% at 8%  88%,  rgba(0,0,0,0.55)      0%, transparent 60%),

    radial-gradient(ellipse 38% 38% at 92% 88%,  rgba(0,0,0,0.55)      0%, transparent 60%);

}



/* hero-spotlight div — nepoužívá se, spotlight řeší ::after na .hero */

.hero-spotlight { display: none; }



/* Jemné diagonální linky — nad ::after */

.hero-pattern {

  position: absolute; inset: 0;

  pointer-events: none;

  z-index: 1;

  background-image:

    repeating-linear-gradient(-52deg, transparent 0px, transparent 48px, rgba(200,146,42,0.018) 48px, rgba(200,146,42,0.018) 49px),

    repeating-linear-gradient(38deg,  transparent 0px, transparent 72px, rgba(200,146,42,0.012) 72px, rgba(200,146,42,0.012) 73px);

  animation: heroDrift 24s linear infinite;

  /* Balík #87: pohyblivá mřížka na úvodu na přání Petra vypnutá. Pravidla

     nechávám, kdyby se měla vrátit, stačí smazat tenhle řádek. */

  display: none;

}

@keyframes heroDrift {

  from { background-position: 0 0, 0 0; }

  to   { background-position: 100px 100px, -140px 140px; }

}



.hero-content {

  text-align: center;

  z-index: 2;

  position: relative;

  padding: 0 24px;

}



.hero-content {

  text-align: center;

  z-index: 1;

  padding: 0 24px;

}



.hero-eyebrow {

  font-size: 11px;

  letter-spacing: 0.32em;

  text-transform: uppercase;

  color: var(--sage-dark);

  margin-bottom: 20px;

  font-weight: 400;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

}

.hero-eyebrow::before,

.hero-eyebrow::after {

  content: '';

  display: block;

  width: 24px;

  height: 1px;

  background: rgba(150,184,120,0.4);

  flex-shrink: 0;

}



.hero-logo-wrap {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom: 16px;

}



/* Logo — malé, diskrétní */

.hero-logo-svg {

  width: 44px;

  height: auto;

  margin-bottom: 14px;

  opacity: 0.92;

  display: block;

}



/* Dvouřádkový serif titulek */

.hero-title {

  display: flex;

  flex-direction: column;

  align-items: center;

  line-height: 1.05;

  margin: 0;

}

.hero-title-line1 {

  font-family: 'EB Garamond', serif;

  font-size: clamp(36px, 6vw, 58px);

  font-weight: 400;

  color: var(--gold-dark);

  letter-spacing: 0.08em;

  display: block;

}

.hero-title-line2 {

  font-family: 'EB Garamond', serif;

  font-size: clamp(36px, 6vw, 58px);

  font-weight: 400;

  color: var(--brown-dark);

  letter-spacing: 0.08em;

  display: block;

}



/* Zlatá linka pod titulem */

.hero-title-divider {

  width: 52px;

  height: 1px;

  background: linear-gradient(to right, transparent, rgba(200,146,42,0.85), transparent);

  margin: 16px auto 0;

}



.hero-subtitle {

  font-family: 'EB Garamond', serif;

  font-size: clamp(15px, 2.2vw, 20px);

  font-weight: 300;

  font-style: italic;

  color: var(--text-light);

  margin-top: 18px;

  margin-bottom: 36px;

  letter-spacing: 0.04em;

}



.hero-cta {

  display: inline-flex; align-items: center; gap: 10px;

  padding: 14px 36px;

  background: var(--gold);

  color: #1e1608;

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  border: none; cursor: pointer;

  border-radius: var(--radius);

  transition: all 0.3s;

  text-decoration: none;

  font-weight: 500;

}

.hero-cta:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 8px 32px rgba(201,169,110,0.3); }



.hero-scroll {

  position: absolute;

  bottom: 32px;

  left: 50%;

  transform: translateX(-50%);

  display: flex; flex-direction: column; align-items: center; gap: 8px;

  color: var(--stone);

  font-size: 10px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  animation: scrollBob 2s ease-in-out infinite;

}

@keyframes scrollBob {

  0%,100% { transform: translateX(-50%) translateY(0); }

  50% { transform: translateX(-50%) translateY(6px); }

}

.hero-scroll-line {

  width: 1px; height: 40px;

  background: linear-gradient(to bottom, var(--stone-light), transparent);

}



/* ══════════════════════════════════════════

   SECTIONS

══════════════════════════════════════════ */

.section { padding: 80px 32px; width: 100%; box-sizing: border-box; }

.section-narrow { max-width: 1400px; width: 100%; margin: 0 auto; }



/* Střídání pozadí sekcí — tmavé tóny s decentním spotlight gradientem

   Každá sekce si drží svou barvu, navíc dostane jemnou radiální záři,

   která rozbíjí plochost a navazuje vizuální jazyk hero sekce. */

.section-bg-a {

  background-color: #1a1208;

  background-image: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(200,146,42,0.055) 0%, transparent 65%);

}

.section-bg-b {

  background-color: #110d06;

  background-image: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(200,146,42,0.045) 0%, transparent 60%);

}

.section-bg-c {

  background-color: #1e1508;

  background-image: radial-gradient(ellipse 75% 70% at 50% 0%, rgba(150,184,120,0.045) 0%, transparent 65%);

}

.section-bg-social {

  background-color: #0e0a05;

  background-image:

    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(200,146,42,0.07) 0%, transparent 60%),

    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(0,0,0,0.45) 0%, transparent 60%);

}



.section-label {

  font-size: 10px;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: var(--sage-dark);

  margin-bottom: 12px;

}



.section-title {

  font-size: clamp(28px, 4vw, 44px);

  font-weight: 400;

  color: var(--brown-dark);

  margin-bottom: 8px;

}



.section-subtitle {

  font-size: 15px;

  color: var(--text-light);

  max-width: 480px;

}



/* ══════════════════════════════════════════

   CATEGORIES GRID

══════════════════════════════════════════ */

.categories-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  margin-top: 48px;

  justify-items: stretch;

}



.categories-grid .category-card {

  width: 100%;

}



.category-card {

  position: relative;

  border-radius: var(--radius-md);

  overflow: hidden;

  cursor: pointer;

}



.category-card-bg {

  position: absolute; inset: 0;

  transition: transform 0.5s ease;

}

.category-card:hover .category-card-bg { transform: scale(1.05); }



.cat-krystaly .category-card-bg { background: linear-gradient(135deg, #e8ddd0 0%, #c9b89a 40%, #a08060 100%); }

.cat-meteority .category-card-bg { background: linear-gradient(135deg, #d0d4d8 0%, #9aa4ae 40%, #6a7880 100%); }

.cat-fosilie .category-card-bg { background: linear-gradient(135deg, #ddd0c0 0%, #b89878 40%, #8a6848 100%); }

.cat-sperky .category-card-bg { background: linear-gradient(135deg, #d8d0c8 0%, #c0a880 40%, #906840 100%); }

.cat-brousene .category-card-bg { background: linear-gradient(135deg, #ccd8cc 0%, #90b088 40%, #507850 100%); }

.cat-sberatele .category-card-bg { background: linear-gradient(135deg, #d8d0d8 0%, #b090b0 40%, #806080 100%); }



/* ── Framed photo category cards (Naše kolekce) ── */

.cat-jantar-photo,

.cat-normal-photo,

.cat-photo-normal {

  display: flex;

  flex-direction: column;

  background: linear-gradient(160deg, var(--cream-mid) 0%, var(--cream-dark) 100%);

  border: 1px solid rgba(200,146,42,0.18);

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: 0 6px 18px rgba(0,0,0,0.28);

  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;

}

.cat-jantar-photo:hover,

.cat-normal-photo:hover,

.cat-photo-normal:hover {

  transform: translateY(-6px);

  box-shadow: 0 14px 30px rgba(0,0,0,0.42);

  border-color: var(--gold);

}



/* Image area – fixed-ratio window, photo centred & contained (never overflows) */

.cat-jantar-photo .category-card-bg,

.cat-normal-photo .category-card-bg,

.cat-photo-normal .category-card-bg {

  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  background-color: #15100a;

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  border-radius: 0;

  mix-blend-mode: normal;

  transition: transform 0.5s ease;

}

.cat-jantar-photo:hover .category-card-bg,

.cat-normal-photo:hover .category-card-bg,

.cat-photo-normal:hover .category-card-bg {

  transform: scale(1.06);

}



.cat-jantar-photo .category-card-overlay,

.cat-normal-photo .category-card-overlay,

.cat-photo-normal .category-card-overlay { display: none; }



/* Card footer with name + count */

.cat-jantar-photo .category-card-content,

.cat-normal-photo .category-card-content,

.cat-photo-normal .category-card-content {

  position: static;

  background: none;

  text-align: center;

  padding: 14px 12px 16px;

  border-top: 1px solid rgba(200,146,42,0.14);

}

.cat-jantar-photo .category-card-name,

.cat-normal-photo .category-card-name,

.cat-photo-normal .category-card-name {

  color: var(--brown-dark);

  margin-bottom: 4px;

  font-size: clamp(14px, 1.4vw, 18px);

}

.cat-jantar-photo .category-card-count,

.cat-normal-photo .category-card-count,

.cat-photo-normal .category-card-count {

  color: var(--text-light);

}



.category-card-overlay {

  position: absolute; inset: 0;

  background: linear-gradient(to top, rgba(30,18,8,0.7) 0%, rgba(30,18,8,0.1) 60%, transparent 100%);

}



.category-card-texture {

  position: absolute; inset: 0;

  opacity: 0.06;

  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}



.category-card-content {

  position: absolute;

  bottom: 0; left: 0; right: 0;

  padding: 24px 20px;

}

.category-card-icon {

  font-size: 28px;

  margin-bottom: 8px;

}

.category-card-name {

  font-family: 'EB Garamond', serif;

  font-size: 20px;

  color: var(--cream);

  font-weight: 400;

  margin-bottom: 2px;

}

.category-card-count {

  font-size: 11px;

  color: rgba(245,240,232,0.6);

  letter-spacing: 0.1em;

}



/* ══════════════════════════════════════════

   PRODUCT CARDS

══════════════════════════════════════════ */

.products-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 24px;

  margin-top: 48px;

}



.product-card {

  background: #2e2218;

  border-radius: var(--radius-md);

  overflow: hidden;

  border: 1px solid var(--border);

  transition: all 0.3s;

  cursor: pointer;

  position: relative;

}

.product-card:hover {

  box-shadow: var(--shadow);

  transform: translateY(-3px);

  border-color: var(--border-strong);

}



.product-card.sold {

  opacity: 0.7;

}



.product-img-wrap {

  position: relative;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: var(--cream-dark);

}



.product-img {

  width: 100%; height: 100%;

  object-fit: contain;

  transition: transform 0.4s;

}

.product-card:hover .product-img { transform: scale(1.04); }



.product-img-placeholder {

  width: 100%; height: 100%;

  display: flex; align-items: center; justify-content: center;

  font-size: 48px;

  background: linear-gradient(135deg, #2e2318, #3a2c1a);

}



.product-badge {

  position: absolute;

  top: 12px; left: 12px;

  padding: 4px 10px;

  border-radius: var(--radius);

  font-size: 10px;

  letter-spacing: 0.1em;

  font-weight: 500;

  text-transform: uppercase;

}



.badge-free-shipping {

  background: var(--sage-dark);

  color: white;

}

.badge-sold {

  background: var(--brown-dark);

  color: var(--cream);

  top: 12px; left: 12px;

}

.badge-new {

  background: var(--gold-dark);

  color: white;

}



.product-info {

  padding: 16px;

}



.product-category-tag {

  font-size: 10px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--sage-dark);

  margin-bottom: 6px;

}



.product-name {

  font-family: 'EB Garamond', serif;

  font-size: 18px;

  color: var(--brown-dark);

  margin-bottom: 6px;

  line-height: 1.2;

}



.product-desc-short {

  font-size: 12px;

  color: var(--text-light);

  margin-bottom: 14px;

  line-height: 1.5;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.product-footer {

  display: flex; align-items: center; justify-content: space-between;

}



.product-price {

  font-family: 'EB Garamond', serif;

  font-size: 22px;

  font-weight: 500;

  color: var(--brown-dark);

}



.product-price-original {

  font-size: 13px;

  text-decoration: line-through;

  color: var(--stone);

  margin-left: 6px;

}



.btn-add-cart {

  width: 36px; height: 36px;

  background: var(--gold);

  color: #1e1608;

  border: none; border-radius: var(--radius);

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  font-size: 18px;

  transition: all 0.2s;

  flex-shrink: 0;

  font-weight: 700;

}

.btn-add-cart:hover { background: var(--gold-dark); transform: scale(1.05); }

.btn-add-cart:disabled { background: var(--stone-light); cursor: not-allowed; transform: none; }



/* ══════════════════════════════════════════

   SHOP PAGE FILTERS

══════════════════════════════════════════ */

.shop-layout {

  margin-top: 64px;

  display: flex;

  min-height: calc(100vh - 64px);

}



.shop-sidebar {

  width: 240px;

  flex-shrink: 0;

  border-right: 1px solid var(--border);

  padding: 32px 24px;

  background: #261c10;

  position: sticky;

  top: 64px;

  height: calc(100vh - 64px);

  overflow-y: auto;

}



.sidebar-section { margin-bottom: 32px; }



.sidebar-title {

  font-size: 10px;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: var(--stone);

  margin-bottom: 16px;

}



.filter-option {

  display: flex; align-items: center; gap: 10px;

  padding: 8px 0;

  cursor: pointer;

  border: none; background: none;

  width: 100%; text-align: left;

  font-family: 'Jost', sans-serif;

  font-size: 13px;

  color: var(--text-mid);

  transition: color 0.2s;

  border-radius: var(--radius);

}

.filter-option:hover { color: var(--brown-dark); }

.filter-option.active { color: var(--sage-dark); font-weight: 500; }



.filter-dot {

  width: 8px; height: 8px;

  border-radius: 50%;

  border: 1.5px solid currentColor;

  flex-shrink: 0;

  transition: background 0.2s;

}

.filter-option.active .filter-dot { background: currentColor; }



.filter-count {

  margin-left: auto;

  font-size: 11px;

  color: var(--stone);

  background: var(--cream-dark);

  padding: 1px 6px;

  border-radius: 10px;

}



.price-range-wrap {

  display: flex; gap: 8px; margin-bottom: 12px;

}

.price-input {

  width: 100%;

  padding: 8px 10px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

  font-size: 13px;

  background: var(--cream);

  color: var(--text);

}

.price-input:focus { outline: none; border-color: var(--sage-dark); }



.shop-main {

  flex: 1;

  padding: 32px;

}



.shop-toolbar {

  display: flex; align-items: center; justify-content: space-between;

  margin-bottom: 32px;

  padding-bottom: 16px;

  border-bottom: 1px solid var(--border);

}



.shop-results-count {

  font-size: 13px;

  color: var(--text-light);

}



.sort-select {

  padding: 8px 32px 8px 12px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: var(--cream);

  font-family: 'Jost', sans-serif;

  font-size: 13px;

  color: var(--text);

  cursor: pointer;

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a7565' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 10px center;

}

.sort-select:focus { outline: none; border-color: var(--sage-dark); }



/* ══════════════════════════════════════════

   PRODUCT DETAIL PAGE

══════════════════════════════════════════ */

.product-detail {

  margin-top: 64px;

  padding: 48px 32px;

  max-width: 1400px;

  margin-left: auto; margin-right: auto;

}



.breadcrumb {

  font-size: 12px;

  color: var(--text-light);

  margin-bottom: 32px;

  display: flex; gap: 8px; align-items: center;

}

.breadcrumb span { cursor: pointer; transition: color 0.2s; }

.breadcrumb span:hover { color: var(--brown-dark); }

.breadcrumb-sep { color: var(--stone-light); }



.product-detail-grid {

  display: grid;

  grid-template-columns: 1fr 420px;

  gap: 64px;

}



.product-detail-imgs {

  display: flex; flex-direction: column; gap: 12px;

}



.product-detail-main-img {

  aspect-ratio: 1 / 1;

  border-radius: var(--radius-md);

  overflow: hidden;

  background: var(--cream-dark);

  position: relative;

}

.product-detail-main-img img {

  width: 100%; height: 100%;

  object-fit: contain;

}

.product-detail-main-img-placeholder {

  width: 100%; height: 100%;

  display: flex; align-items: center; justify-content: center;

  font-size: 96px;

  background: linear-gradient(135deg, #2e2318, #3a2c1a);

}



.detail-sidebar {

  display: flex; flex-direction: column; gap: 24px;

}



.detail-category {

  font-size: 10px;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: var(--sage-dark);

}



.detail-title {

  font-size: 36px;

  font-weight: 400;

  color: var(--brown-dark);

  line-height: 1.1;

}



.detail-title-row {

  display: flex; align-items: flex-start; justify-content: space-between;

  gap: 12px; flex-wrap: wrap;

}



.detail-price-row {

  display: flex; align-items: baseline; gap: 12px;

}



.detail-price {

  font-family: 'EB Garamond', serif;

  font-size: 40px;

  font-weight: 500;

  color: var(--brown-dark);

}



.detail-free-shipping {

  display: inline-flex; align-items: center; gap: 6px;

  padding: 6px 14px;

  background: var(--sage-dark);

  color: white;

  border-radius: 20px;

  font-size: 11px;

  letter-spacing: 0.08em;

  font-weight: 500;

  flex-shrink: 0;

  white-space: nowrap;

}



.detail-desc {

  font-size: 14px;

  line-height: 1.8;

  color: var(--text-mid);

}



.detail-specs {

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);

  padding: 16px 0;

  display: flex; flex-direction: column; gap: 8px;

}



.spec-row {

  display: flex; justify-content: space-between;

  font-size: 13px;

}

.spec-label { color: var(--text-light); }

.spec-value { color: var(--text); font-weight: 400; }



.shipping-box {

  background: #261c10;

  border-radius: var(--radius-md);

  padding: 16px;

  display: flex; flex-direction: column; gap: 10px;

  border: 1px solid var(--border);

}



.shipping-option {

  display: flex; align-items: center; gap: 10px;

  font-size: 13px;

}

.shipping-option-icon { font-size: 16px; width: 24px; }

.shipping-option-name { flex: 1; color: var(--text-mid); }

.shipping-option-price {

  font-weight: 500;

  color: var(--text);

}

.shipping-option-price.free { color: var(--sage-dark); }



.detail-buybar {

  display: flex; align-items: center; justify-content: space-between;

  gap: 16px;

}

.detail-buybar .btn-add-to-cart-lg { width: auto; flex-shrink: 0; padding: 14px 22px; }



.btn-add-to-cart-lg {

  width: 100%;

  padding: 16px;

  background: var(--gold);

  color: #1e1608;

  border: none; border-radius: var(--radius-md);

  font-family: 'Jost', sans-serif;

  font-size: 12px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  cursor: pointer;

  transition: all 0.3s;

  display: flex; align-items: center; justify-content: center; gap: 10px;

  font-weight: 500;

}

.btn-add-to-cart-lg:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 8px 32px rgba(201,169,110,0.25); }

.btn-add-to-cart-lg:disabled { background: var(--stone-light); cursor: not-allowed; transform: none; box-shadow: none; }



/* ══════════════════════════════════════════

   CART DRAWER

══════════════════════════════════════════ */

.cart-overlay {

  position: fixed; inset: 0;

  background: rgba(30,18,8,0.5);

  z-index: 2000;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s;

}

.cart-overlay.open { opacity: 1; pointer-events: all; }



.cart-drawer {

  position: fixed;

  top: 0; right: 0; bottom: 0;

  width: 420px;

  background: #261c10;

  z-index: 2001;

  transform: translateX(100%);

  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  display: flex; flex-direction: column;

  box-shadow: var(--shadow-lg);

}

.cart-drawer.open { transform: translateX(0); }



.cart-header {

  padding: 24px 24px 16px;

  border-bottom: 1px solid var(--border);

  display: flex; align-items: center; justify-content: space-between;

}



.cart-header-title {

  font-family: 'EB Garamond', serif;

  font-size: 22px;

  color: var(--brown-dark);

}



.cart-close {

  width: 36px; height: 36px;

  display: flex; align-items: center; justify-content: center;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  cursor: pointer;

  background: none;

  font-size: 18px;

  color: var(--text-mid);

  transition: all 0.2s;

}

.cart-close:hover { background: var(--cream-dark); }



.cart-items {

  flex: 1;

  overflow-y: auto;

  padding: 16px 24px;

  display: flex; flex-direction: column; gap: 12px;

}



.cart-empty {

  flex: 1;

  display: flex; flex-direction: column; align-items: center; justify-content: center;

  gap: 12px;

  padding: 48px;

  text-align: center;

}

.cart-empty-icon { font-size: 48px; opacity: 0.4; }

.cart-empty-text {

  font-family: 'EB Garamond', serif;

  font-size: 20px;

  color: var(--stone);

}



.cart-item {

  display: flex; gap: 12px;

  padding: 12px;

  background: var(--cream);

  border-radius: var(--radius-md);

  border: 1px solid var(--border);

}



.cart-item-img {

  width: 72px; height: 72px;

  border-radius: var(--radius);

  object-fit: cover;

  background: var(--cream-dark);

  flex-shrink: 0;

  display: flex; align-items: center; justify-content: center;

  font-size: 28px;

  overflow: hidden;

}

.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }



.cart-item-info { flex: 1; }



.cart-item-name {

  font-family: 'EB Garamond', serif;

  font-size: 16px;

  color: var(--brown-dark);

  margin-bottom: 4px;

}



.cart-item-price {

  font-size: 14px;

  font-weight: 500;

  color: var(--text-mid);

  margin-bottom: 8px;

}



.cart-item-remove {

  font-size: 11px;

  color: var(--stone);

  cursor: pointer;

  border: none; background: none;

  font-family: 'Jost', sans-serif;

  text-decoration: underline;

  padding: 0;

  transition: color 0.2s;

}

.cart-item-remove:hover { color: var(--ruby, #8b1c1c); }



.cart-footer {

  padding: 16px 24px 24px;

  border-top: 1px solid var(--border);

  display: flex; flex-direction: column; gap: 12px;

}



.cart-total-row {

  display: flex; align-items: center; justify-content: space-between;

  padding: 12px 0 0;

}



.cart-total-label {

  font-size: 12px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--stone);

}



.cart-total-price {

  font-family: 'EB Garamond', serif;

  font-size: 28px;

  color: var(--brown-dark);

}



.btn-checkout {

  width: 100%;

  padding: 16px;

  background: var(--gold);

  color: #1e1608;

  border: none; border-radius: var(--radius-md);

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  cursor: pointer;

  transition: all 0.3s;

  font-weight: 500;

}

.btn-checkout:hover { background: var(--gold-dark); }



/* ══════════════════════════════════════════

   MODAL (Login/Register/Checkout)

══════════════════════════════════════════ */

.modal-overlay {

  position: fixed; inset: 0;

  background: rgba(30,18,8,0.55);

  z-index: 3000;

  display: flex; align-items: center; justify-content: center;

  padding: 24px;

  opacity: 0; pointer-events: none;

  /* Session #36: zavřené okno je i mimo pořadí tabulátoru a čtečky obrazovky.

     Dřív bylo jen průhledné, klávesa Tab vedla do neviditelných polí. */

  visibility: hidden;

  transition: opacity 0.3s, visibility 0s linear 0.3s;

}

.modal-overlay.open { opacity: 1; pointer-events: all; visibility: visible; transition: opacity 0.3s; }



.modal {

  background: #2e2218;

  border-radius: var(--radius-lg);

  padding: 40px;

  width: 100%; max-width: 460px;

  max-height: 90vh;

  overflow-y: auto;

  transform: translateY(12px);

  transition: transform 0.3s;

  box-shadow: var(--shadow-lg);

  border: 1px solid var(--border);

}

.modal-overlay.open .modal { transform: translateY(0); }



.modal-title {

  font-family: 'EB Garamond', serif;

  font-size: 28px;

  color: var(--brown-dark);

  margin-bottom: 4px;

}

.modal-subtitle {

  font-size: 13px;

  color: var(--text-light);

  margin-bottom: 28px;

}



.form-group { margin-bottom: 16px; }



.form-label {

  display: block;

  font-size: 11px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--stone);

  margin-bottom: 8px;

}



.form-input {

  width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

  font-size: 14px;

  background: #261c10;

  color: var(--text);

  transition: border-color 0.2s;

}

.form-input:focus { outline: none; border-color: var(--gold); }



/* Remove number input spinners in product modal */

.prod-modal-inner input[type=number]::-webkit-inner-spin-button,

.prod-modal-inner input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.prod-modal-inner input[type=number] { -moz-appearance: textfield; }



.form-select {

  width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

  font-size: 14px;

  background: #261c10;

  color: var(--text);

  cursor: pointer;

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23786a5a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 12px center;

}

.form-select:focus { outline: none; border-color: var(--gold); }



.form-textarea {

  width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

  font-size: 14px;

  background: #261c10;

  color: var(--text);

  resize: vertical;

  min-height: 100px;

}

.form-textarea:focus { outline: none; border-color: var(--gold); }



.en-field-wrap {

  margin-top: 6px;

  padding: 10px 12px;

  background: rgba(150,184,120,0.07);

  border: 1px solid rgba(150,184,120,0.2);

  border-radius: var(--radius);

}

.en-field-label {

  display: flex; align-items: center; justify-content: space-between;

  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;

  color: var(--sage-dark); margin-bottom: 6px;

}

.btn-translate {

  display: inline-flex; align-items: center; gap: 4px;

  padding: 3px 10px;

  background: rgba(150,184,120,0.15);

  border: 1px solid rgba(150,184,120,0.3);

  border-radius: 20px;

  font-family: 'Jost', sans-serif;

  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;

  color: var(--sage-dark); cursor: pointer;

  transition: all 0.2s;

}

.btn-translate:hover { background: rgba(150,184,120,0.25); }

.btn-translate:disabled { opacity: 0.5; cursor: not-allowed; }

.en-field-wrap .form-input,

.en-field-wrap .form-textarea { background: rgba(0,0,0,0.15); border-color: rgba(150,184,120,0.15); font-size:13px; }



.translate-status {

  font-size: 10px;

  color: var(--stone);

  font-style: italic;

  transition: opacity 0.2s;

}

.translate-status.translating { color: var(--sage-dark); }

.translate-status.done { color: var(--sage-dark); }



.form-checkbox-row {

  display: flex; align-items: center; gap: 10px;

  margin-bottom: 16px;

}

.form-checkbox-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--sage-dark); }

.form-checkbox-row label { font-size: 13px; color: var(--text-mid); cursor: pointer; }



.btn-primary {

  width: 100%;

  padding: 14px;

  background: var(--gold);

  color: #1e1608;

  border: none; border-radius: var(--radius-md);

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  cursor: pointer;

  transition: all 0.3s;

  margin-top: 8px;

  font-weight: 500;

}

.btn-primary:hover { background: var(--gold-dark); }

.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary:disabled:hover { background: var(--gold); }



.btn-secondary {

  width: 100%;

  padding: 14px;

  background: transparent;

  color: var(--text-mid);

  border: 1px solid var(--border-strong);

  border-radius: var(--radius-md);

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  cursor: pointer;

  transition: all 0.3s;

  margin-top: 8px;

}

.btn-secondary:hover { background: var(--cream-dark); }



.modal-switch {

  text-align: center;

  font-size: 13px;

  color: var(--text-light);

  margin-top: 16px;

}

.modal-switch a {

  color: var(--sage-dark);

  text-decoration: underline;

  cursor: pointer;

}



.form-error {

  font-size: 12px;

  color: #8b1c1c;

  margin-top: 6px;

}



.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.modal-close-btn {

  position: absolute;

  top: 16px; right: 16px;

  width: 32px; height: 32px;

  display: flex; align-items: center; justify-content: center;

  border: none; background: none;

  cursor: pointer;

  font-size: 20px;

  color: var(--stone);

  border-radius: var(--radius);

  transition: background 0.2s;

}

.modal-close-btn:hover { background: var(--cream-dark); }

.modal { position: relative; }



/* ══════════════════════════════════════════

   ADMIN PANEL

══════════════════════════════════════════ */

.admin-layout {

  display: flex;

  min-height: calc(100vh - 72px);

}



.admin-sidebar {

  width: 220px;

  flex-shrink: 0;

  background: #1e1608;

  padding: 32px 0;

  position: sticky;

  top: 72px;

  height: calc(100vh - 72px);

}



.admin-sidebar-title {

  font-size: 10px;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: rgba(200,168,120,0.45);

  padding: 0 20px;

  margin-bottom: 8px;

  margin-top: 24px;

}

.admin-sidebar-title:first-child { margin-top: 0; }



.admin-nav-item {

  display: flex; align-items: center; gap: 10px;

  padding: 10px 20px;

  cursor: pointer;

  border: none; background: none; width: 100%; text-align: left;

  font-family: 'Jost', sans-serif;

  font-size: 13px;

  color: rgba(245,240,232,0.65);

  transition: all 0.2s;

  border-left: 2px solid transparent;

}

.admin-nav-item:hover { color: var(--brown-dark); background: rgba(245,240,232,0.06); }

/* Session #40: --cream je v tmavém tématu TMAVÁ barva pozadí (#1a1208) —

   aktivní položka i najetí myší proto měly tmavý text na tmavém podkladu

   a aktivní záložka vypadala jako vypnutá. Teď světlý text a zlatá ikona. */

.admin-nav-item.active {

  color: var(--brown-dark);

  font-weight: 500;

  background: rgba(200,146,42,0.12);

  border-left-color: var(--gold);

}

.admin-nav-item.active .admin-nav-item-icon { color: var(--gold-dark); }

.admin-nav-item:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: -2px; }

.admin-nav-item-icon { font-size: 16px; width: 20px; }

/* „MK ADMIN" nahoře v menu nemělo žádný styl (lepilo se k levému okraji) */

.admin-sidebar-logo {

  padding: 0 20px 14px;

  margin: 0 0 10px;

  border-bottom: 1px solid rgba(200,170,120,0.1);

  font-family: 'EB Garamond', serif;

  font-size: 19px;

  letter-spacing: 0.08em;

  color: var(--gold-dark);

}

/* Klávesnicí viditelný fokus u tlačítek a polí v adminu */

.admin-main :is(button, a[href], summary, select, input, textarea):focus-visible {

  outline: 2px solid var(--gold-dark);

  outline-offset: 2px;

}

/* Vyhledávací pole měla šipku rozbalovacího seznamu (třída sort-select) */

.admin-main input.admin-hledat { background-image: none; padding-right: 12px; }



.admin-main {

  flex: 1;

  padding: 32px;

  overflow-y: auto;

  background: #221808;

}



.admin-page-title {

  font-family: 'EB Garamond', serif;

  font-size: 30px;

  color: var(--brown-dark);

  margin-bottom: 4px;

}

.admin-page-sub {

  font-size: 13px;

  color: var(--text-light);

  margin-bottom: 32px;

}



.admin-stats {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  margin-bottom: 40px;

}



.stat-card {

  background: #2e2218;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 20px;

}

.stat-label {

  font-size: 10px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--stone);

  margin-bottom: 8px;

}

.stat-value {

  font-family: 'EB Garamond', serif;

  font-size: 32px;

  color: var(--brown-dark);

  line-height: 1;

  margin-bottom: 4px;

}

.stat-change {

  font-size: 11px;

  color: var(--sage-dark);

}



/* ── DASHBOARD v2 ── */

.dash-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;

  margin-bottom: 16px;

}

.dash-grid-wide {

  display: grid;

  grid-template-columns: 1fr 1fr 2fr;

  gap: 14px;

  margin-bottom: 16px;

}

.dash-grid-bottom {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-bottom: 32px;

}

.dcard {

  background: #2a1f14;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 20px 22px 18px;

  position: relative;

  overflow: hidden;

  transition: border-color 0.2s;

}

.dcard:hover { border-color: var(--border-strong); }

.dcard::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 3px;

  background: var(--dcard-accent, var(--gold));

  opacity: 0.7;

}

.dcard-icon {

  font-size: 22px;

  margin-bottom: 14px;

  display: block;

  opacity: 0.85;

}

.dcard-label {

  font-size: 9px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--stone);

  margin-bottom: 6px;

}

.dcard-value {

  font-family: 'EB Garamond', serif;

  font-size: 38px;

  color: var(--brown-dark);

  line-height: 1;

  margin-bottom: 4px;

}

.dcard-value.large { font-size: 44px; }

.dcard-value.medium { font-size: 30px; }

.dcard-sub {

  font-size: 11px;

  color: var(--text-light);

  margin-top: 6px;

}

.dcard-sub strong {

  color: var(--text-mid);

  font-weight: 400;

}

.dcard-hint {

  font-size: 10px;

  color: var(--stone);

  margin-top: 8px;

  padding-top: 8px;

  border-top: 1px solid var(--border);

}

/* storno červená */

.dcard.accent-red::before { background: #c05040; }

.dcard.accent-red .dcard-value { color: #d4705a; }

/* zelená tržby */

.dcard.accent-green::before { background: var(--sage-dark); }

.dcard.accent-green .dcard-value { color: var(--sage-dark); }

/* modrá/indigo návštěvy */

.dcard.accent-blue::before { background: #7090c0; }

/* kategorie karta */

.dcat-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 7px 0;

  border-bottom: 1px solid var(--border);

  font-size: 13px;

}

.dcat-row:last-child { border-bottom: none; }

.dcat-bar-wrap {

  flex: 1;

  margin: 0 12px;

  height: 3px;

  background: var(--border);

  border-radius: 2px;

  overflow: hidden;

}

.dcat-bar {

  height: 100%;

  background: var(--gold);

  border-radius: 2px;

  transition: width 0.4s ease;

}

.dcat-num {

  font-size: 11px;

  color: var(--stone);

  min-width: 20px;

  text-align: right;

}

.dcard-split {

  display: flex;

  gap: 20px;

  margin-top: 4px;

}

.dcard-split-item { flex: 1; }

.dcard-split-item .dcard-label { margin-bottom: 4px; }

.dcard-split-divider {

  width: 1px;

  background: var(--border);

  margin: 4px 0;

}

.dash-section-label {

  font-size: 9px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--stone);

  margin-bottom: 10px;

  margin-top: 4px;

}



@media (max-width: 900px) {

  .dash-grid { grid-template-columns: repeat(2, 1fr); }

  .dash-grid-wide { grid-template-columns: 1fr 1fr; }

  .dash-grid-bottom { grid-template-columns: 1fr; }

}



.admin-section {

  background: #2e2218;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  margin-bottom: 24px;

}



.admin-section-header {

  padding: 16px 20px;

  border-bottom: 1px solid var(--border);

  display: flex; align-items: center; justify-content: space-between;

}



.admin-section-title {

  font-size: 14px;

  font-weight: 500;

  color: var(--brown-dark);

}



.btn-add {

  display: flex; align-items: center; gap: 6px;

  padding: 8px 16px;

  background: var(--gold);

  color: #1e1608;

  border: none; border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  cursor: pointer;

  transition: background 0.2s;

  font-weight: 500;

}

.btn-add:hover { background: var(--gold-dark); }



.admin-table {

  width: 100%;

  border-collapse: collapse;

}



.admin-table th {

  text-align: left;

  padding: 12px 16px;

  font-size: 10px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--stone);

  border-bottom: 1px solid var(--border);

  font-weight: 400;

}



.admin-table td {

  padding: 12px 16px;

  font-size: 13px;

  color: var(--text-mid);

  border-bottom: 1px solid var(--border);

  vertical-align: middle;

}

.admin-table tr:last-child td { border-bottom: none; }

.admin-table tr:hover td { background: var(--cream); }



/* sold history table — horizontal scroll fallback */

.sold-table-wrap { overflow-x: auto; }



.table-product-img {

  width: 40px; height: 40px;

  border-radius: var(--radius);

  object-fit: cover;

  background: var(--cream-dark);

  display: flex; align-items: center; justify-content: center;

  font-size: 18px;

  overflow: hidden;

  flex-shrink: 0;

}

.table-product-img img { width: 100%; height: 100%; object-fit: cover; }



.table-actions {

  display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;

}



/* Prevent table from being cut off */

.sold-table-wrap { overflow-x: auto; }



/* Order detail expandable row */

.order-detail-row {

  background: var(--cream-dark);

  border-top: 1px solid var(--border);

  padding: 16px 20px;

  font-size: 13px;

  display: none;

}

.order-detail-row.open { display: block; }

.order-detail-grid {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 16px;

  margin-bottom: 12px;

}

.order-detail-label {

  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;

  color: var(--stone); margin-bottom: 4px;

}

.order-detail-value { color: var(--text-mid); font-size: 13px; }

.order-detail-images {

  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;

}

.order-detail-img {

  width: 60px; height: 60px; border-radius: var(--radius);

  object-fit: cover; background: var(--cream);

  border: 1px solid var(--border);

}



/* Complaint modal */

.complaint-modal-overlay {

  position: fixed; inset: 0;

  background: rgba(20,12,4,0.7);

  z-index: 4000;

  display: flex; align-items: center; justify-content: center;

  padding: 24px;

  opacity: 0; pointer-events: none;

  transition: opacity 0.25s;

}

.complaint-modal-overlay.open { opacity: 1; pointer-events: all; }

/* Session #36: zavřené okno mimo pořadí tabulátoru (viz .modal-overlay). */

.complaint-modal-overlay:not(.open) { visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }

.complaint-modal {

  background: #2a1f12;

  border: 1px solid var(--border-strong);

  border-radius: var(--radius-lg);

  padding: 28px;

  width: 100%; max-width: 500px;

  max-height: 90vh; overflow-y: auto;

  box-shadow: var(--shadow-lg);

}

.complaint-status-badge {

  display: inline-flex; align-items: center; gap: 4px;

  padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500;

}

.complaint-active { background: rgba(200,146,42,0.2); color: var(--gold-dark); }

.complaint-resolved-refund { background: rgba(80,80,180,0.2); color: #9090d8; }

.complaint-resolved-replacement { background: rgba(74,94,58,0.2); color: var(--sage-dark); }

.complaint-rejected { background: rgba(200,80,64,0.15); color: #c05040; }



.btn-table-edit {

  padding: 5px 10px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: none;

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  cursor: pointer;

  color: var(--text-mid);

  transition: all 0.2s;

}

.btn-table-edit:hover { background: var(--cream-dark); color: var(--brown-dark); }



.btn-table-delete {

  padding: 5px 10px;

  border: 1px solid rgba(180,60,40,0.25);

  border-radius: var(--radius);

  background: rgba(180,60,40,0.06);

  font-family: 'Jost', sans-serif;

  font-size: 13px;

  cursor: pointer;

  color: #c05040;

  transition: all 0.2s;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  vertical-align: middle;

  white-space: nowrap;

}

.btn-table-delete:hover { background: rgba(180,60,40,0.18); border-color: rgba(180,60,40,0.5); }



.btn-table-sold {

  padding: 5px 10px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: none;

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  cursor: pointer;

  color: var(--stone);

  transition: all 0.2s;

}

.btn-table-sold:hover { background: var(--cream-dark); }



.status-badge {

  display: inline-flex; align-items: center; gap: 4px;

  padding: 3px 8px;

  border-radius: 20px;

  font-size: 11px;

  font-weight: 500;

}

.status-active { background: rgba(74,94,58,0.12); color: var(--sage-dark); }

.status-sold { background: rgba(61,43,31,0.12); color: var(--brown-mid); }

.status-pending { background: rgba(201,169,110,0.2); color: var(--gold-dark); }

.status-completed { background: rgba(74,94,58,0.12); color: var(--sage-dark); }

.status-cancelled { background: rgba(200,80,64,0.12); color: #c05040; }

.status-created { background: rgba(100,120,160,0.18); color: #8aaad0; }

.status-waiting_payment { background: rgba(201,140,50,0.2); color: #d4903a; }

.status-processing { background: rgba(120,80,180,0.18); color: #a07ad0; }

.status-ready_pickup { background: rgba(200,146,42,0.18); color: #c8922a; }

.status-shipped { background: rgba(50,120,180,0.18); color: #5090c8; }



/* ── ORDER CARD ── */

.order-card {

  border-bottom: 1px solid var(--border);

  padding: 24px;

}

.order-card:last-child { border-bottom: none; }

/* Session #24 — krátké zvýraznění karty po otevření z e-mailového deep-linku (?order=ORD-...) */

.order-card.order-card-highlight {

  animation: order-card-pulse 1.3s ease-out 2;

  border-radius: var(--radius-md);

}

@keyframes order-card-pulse {

  0%   { box-shadow: 0 0 0 0 rgba(200,146,42,0.55); }

  70%  { box-shadow: 0 0 0 14px rgba(200,146,42,0); }

  100% { box-shadow: 0 0 0 0 rgba(200,146,42,0); }

}

.order-stepper {

  display: flex;

  align-items: center;

  gap: 0;

  margin: 16px 0;

  overflow-x: auto;

  padding-bottom: 4px;

}

.order-step {

  display: flex;

  flex-direction: column;

  align-items: center;

  flex: 1;

  min-width: 64px;

  position: relative;

}

.order-step::after {

  content: '';

  position: absolute;

  top: 14px;

  left: 50%;

  width: 100%;

  height: 2px;

  background: var(--border);

  z-index: 0;

}

.order-step:last-child::after { display: none; }

.order-step-dot {

  width: 28px; height: 28px;

  border-radius: 50%;

  border: 2px solid var(--border);

  background: var(--cream-dark);

  display: flex; align-items: center; justify-content: center;

  font-size: 12px;

  z-index: 1;

  position: relative;

  transition: all 0.2s;

}

.order-step.done .order-step-dot {

  background: var(--sage-light);

  border-color: var(--sage-dark);

  color: var(--sage-dark);

}

.order-step.active .order-step-dot {

  background: var(--gold);

  border-color: var(--gold-dark);

  color: #1e1008;

  box-shadow: 0 0 0 3px rgba(200,146,42,0.2);

}

.order-step.done::after { background: var(--sage-dark); opacity: 0.4; }

.order-step-label {

  font-size: 9px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--stone);

  margin-top: 5px;

  text-align: center;

  white-space: nowrap;

}

.order-step.active .order-step-label { color: var(--gold-dark); }

.order-step.done .order-step-label { color: var(--sage-dark); }



/* ── ORDER ACTIONS ── */

.order-actions {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: 14px;

  align-items: center;

}

.btn-order-action {

  padding: 8px 16px;

  border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

  font-size: 11px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  cursor: pointer;

  border: 1px solid var(--border-strong);

  background: var(--cream-dark);

  color: var(--text-mid);

  transition: all 0.2s;

}

.btn-order-action:hover { background: var(--cream-mid); color: var(--brown-dark); }

.btn-order-action.primary {

  background: var(--gold);

  border-color: var(--gold);

  color: #1e1008;

  font-weight: 500;

}

.btn-order-action.primary:hover { background: var(--gold-dark); }

.btn-order-action.danger {

  border-color: rgba(180,60,40,0.4);

  color: #c05040;

}

.btn-order-action.danger:hover { background: rgba(180,60,40,0.1); }

.order-tracking-row {

  display: flex;

  gap: 8px;

  align-items: center;

  margin-top: 10px;

  flex-wrap: wrap;

}

.order-tracking-row input {

  flex: 1;

  min-width: 160px;

  padding: 8px 12px;

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

  background: var(--cream-dark);

  color: var(--text);

  font-family: 'Jost', sans-serif;

  font-size: 13px;

}

.order-tracking-row input:focus { outline: none; border-color: var(--gold); }

.order-payment-confirm {

  background: rgba(200,146,42,0.08);

  border: 1px solid rgba(200,146,42,0.25);

  border-radius: var(--radius-md);

  padding: 12px 16px;

  margin-top: 10px;

  font-size: 13px;

  color: var(--gold-dark);

}



/* ── Image upload ── */

.img-upload-area {

  border: 2px dashed var(--border-strong);

  border-radius: var(--radius-md);

  padding: 32px;

  text-align: center;

  cursor: pointer;

  transition: all 0.2s;

  position: relative;

}

.img-upload-area:hover { border-color: var(--gold); background: var(--cream); }

.img-upload-area input[type=file] {

  position: absolute; inset: 0;

  opacity: 0; cursor: pointer;

  width: 100%; height: 100%;

}

.img-upload-icon { font-size: 32px; margin-bottom: 8px; }

.img-upload-text { font-size: 13px; color: var(--text-light); }

.img-preview {

  width: 100%; height: 160px;

  object-fit: cover;

  border-radius: var(--radius-md);

  margin-top: 12px;

}



/* ══════════════════════════════════════════

   CHECKOUT PAGE

══════════════════════════════════════════ */

.checkout-layout {

  padding: 16px 32px 48px;

  max-width: 1400px;

  margin-left: auto; margin-right: auto;

}



.checkout-grid {

  display: grid;

  grid-template-columns: 1fr 360px;

  gap: 48px;

}



.checkout-form-title {

  font-family: 'EB Garamond', serif;

  font-size: 20px;

  color: var(--brown-dark);

  margin-bottom: 20px;

}



.checkout-divider {

  height: 1px;

  background: var(--border);

  margin: 24px 0;

}



.payment-option {

  display: flex; align-items: flex-start; gap: 12px;

  padding: 14px;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  margin-bottom: 8px;

  cursor: pointer;

  transition: border-color 0.2s;

  background: var(--cream);

}

.payment-option.selected { border-color: var(--gold); background: rgba(201,169,110,0.07); }

.payment-option input[type=radio] { accent-color: var(--sage-dark); margin-top: 2px; flex-shrink: 0; }

.payment-option-info {}

.payment-option-name { font-size: 14px; color: var(--text); font-weight: 400; margin-bottom: 2px; }

.payment-option-desc { font-size: 12px; color: var(--text-light); }



.order-summary-box {

  background: #2e2218;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 24px;

  position: sticky;

  top: 88px;

}



.order-summary-title {

  font-family: 'EB Garamond', serif;

  font-size: 20px;

  color: var(--brown-dark);

  margin-bottom: 20px;

  padding-bottom: 16px;

  border-bottom: 1px solid var(--border);

}



.order-item-row {

  display: flex; align-items: center; gap: 12px;

  margin-bottom: 12px;

}

.order-item-img {

  width: 52px; height: 52px;

  border-radius: var(--radius);

  background: var(--cream-dark);

  display: flex; align-items: center; justify-content: center;

  font-size: 20px;

  flex-shrink: 0;

  overflow: hidden;

}

.order-item-img img { width: 100%; height: 100%; object-fit: cover; }

.order-item-name { flex: 1; font-size: 13px; color: var(--text-mid); }

.order-item-price { font-size: 14px; font-weight: 500; color: var(--text); }



.order-subtotal-row {

  display: flex; justify-content: space-between;

  font-size: 13px;

  color: var(--text-mid);

  padding: 8px 0;

  border-top: 1px solid var(--border);

  margin-top: 12px;

}

.order-total-row {

  display: flex; justify-content: space-between;

  font-size: 18px;

  color: var(--brown-dark);

  padding: 12px 0 0;

  border-top: 1px solid var(--border);

  margin-top: 4px;

}

.order-total-label { font-family: 'EB Garamond', serif; }

.order-total-price { font-family: 'EB Garamond', serif; font-weight: 500; }



/* ══════════════════════════════════════════

   FOOTER

══════════════════════════════════════════ */

footer {

  background: #1a1008;

  color: var(--text);

  padding: 28px 32px;

  margin-top: 0;

  border-top: 1px solid rgba(200,150,60,0.15);

}



.footer-grid {

  max-width: 1400px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 48px;

  margin-bottom: 48px;

  width: 100%;

}



.footer-brand-name {

  margin-bottom: 4px;

  line-height: 1;

}

.footer-brand-desc {

  font-size: 13px;

  color: rgba(245,240,232,0.55);

  line-height: 1.7;

  max-width: 280px;

  margin-bottom: 20px;

}



.footer-col-title {

  font-size: 10px;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: rgba(245,240,232,0.4);

  margin-bottom: 16px;

}



.footer-link {

  display: block;

  font-size: 13px;

  color: rgba(245,240,232,0.65);

  margin-bottom: 10px;

  cursor: pointer;

  transition: color 0.2s;

  text-decoration: none;

  border: none; background: none;

  font-family: 'Jost', sans-serif;

  text-align: left;

  padding: 0;

}

.footer-link:hover { color: var(--cream); }



.footer-bottom {

  max-width: 1400px;

  margin: 0 auto;

  width: 100%;

  display: flex; align-items: center; justify-content: space-between;

}



.footer-copy {

  font-size: 12px;

  color: rgba(245,240,232,0.35);

}



/* ══════════════════════════════════════════

   TOAST NOTIFICATION

══════════════════════════════════════════ */

.toast-container {

  position: fixed;

  top: 80px; right: 24px;

  z-index: 9999;

  display: flex; flex-direction: column; gap: 10px;

}



.toast {

  background: #2e2218;

  color: var(--text);

  padding: 14px 20px;

  border-radius: var(--radius-md);

  font-size: 13px;

  box-shadow: var(--shadow-lg);

  display: flex; align-items: center; gap: 10px;

  min-width: 280px;

  animation: toastIn 0.3s ease;

  border-left: 3px solid var(--gold);

  border: 1px solid var(--border);

  border-left: 3px solid var(--gold);

}

.toast.success { border-left-color: var(--sage-dark); }

.toast.error { border-left-color: #c05050; }

.toast.info { border-left-color: var(--gold); }



@keyframes toastIn {

  from { transform: translateX(40px); opacity: 0; }

  to { transform: translateX(0); opacity: 1; }

}



/* ══════════════════════════════════════════

   USER ACCOUNT PAGE

══════════════════════════════════════════ */

.account-layout {

  padding: 16px 32px 48px;

  max-width: 900px;

  margin-left: auto; margin-right: auto;

}



.account-header {

  display: flex; align-items: center; gap: 20px;

  margin-bottom: 40px;

  padding-bottom: 24px;

  border-bottom: 1px solid var(--border);

}



.account-avatar {

  width: 60px; height: 60px;

  border-radius: 50%;

  background: var(--sage-dark);

  display: flex; align-items: center; justify-content: center;

  font-size: 24px;

  color: #1e1608;

  font-family: 'EB Garamond', serif;

  font-weight: 500;

}



.account-name {

  font-family: 'EB Garamond', serif;

  font-size: 24px;

  color: var(--brown-dark);

}

.account-email { font-size: 13px; color: var(--text-light); }



/* ── VERIFICATION STEP (inside auth modal) ── */

#auth-verify-form .verify-code-inputs {

  display: flex;

  gap: 10px;

  justify-content: center;

  margin: 20px 0;

}

#auth-verify-form .verify-digit {

  width: 48px; height: 56px;

  text-align: center;

  font-size: 22px;

  font-family: 'EB Garamond', serif;

  background: var(--cream-dark);

  border: 1px solid var(--border-strong);

  border-radius: var(--radius-md);

  color: var(--brown-dark);

  caret-color: var(--gold);

  transition: border-color 0.2s;

}

#auth-verify-form .verify-digit:focus { outline: none; border-color: var(--gold); }

.verify-info-box {

  background: rgba(200,146,42,0.08);

  border: 1px solid rgba(200,146,42,0.22);

  border-radius: var(--radius-md);

  padding: 12px 16px;

  font-size: 12px;

  color: var(--gold-dark);

  margin-bottom: 16px;

  line-height: 1.5;

}



/* ── PROFILE SETTINGS ── */

.profile-settings-section {

  margin-top: 0;

  padding: 24px;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  background: var(--cream-dark);

  margin-bottom: 32px;

  display: none;

}

.profile-settings-section.open { display: block; }

.profile-settings-title {

  font-family: 'EB Garamond', serif;

  font-size: 22px;

  color: var(--brown-dark);

  margin-bottom: 6px;

}

.profile-settings-sub {

  font-size: 12px;

  color: var(--stone);

  margin-bottom: 24px;

  letter-spacing: 0.04em;

}

.profile-settings-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}

.profile-settings-grid .form-group { margin: 0; }

.profile-settings-full { grid-column: 1 / -1; }

.profile-save-row {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 20px;

}

.profile-saved-badge {

  display: none;

  font-size: 12px;

  color: var(--sage-dark);

  align-items: center;

  gap: 5px;

}

.profile-saved-badge.show { display: flex; }



/* ── PACKETA PICKUP POINT ── */

.packeta-pickup-wrap {

  display: none;

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid var(--border);

  gap: 10px;

  flex-direction: column;

}

.packeta-pickup-wrap.visible { display: flex; }

.packeta-pickup-btn {

  display: inline-flex; align-items: center; gap: 8px;

  padding: 9px 18px;

  background: var(--gold);

  color: #1e1008;

  border: none; border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;

  font-weight: 500; cursor: pointer;

  transition: all 0.2s;

  align-self: flex-start;

}

.packeta-pickup-btn:hover { background: var(--gold-dark); }

.packeta-point-card {

  display: none;

  align-items: center; gap: 14px;

  padding: 12px 14px;

  background: var(--cream-dark);

  border: 1px solid var(--border-strong);

  border-radius: var(--radius-md);

}

.packeta-point-card.visible { display: flex; }

.packeta-point-icon { font-size: 24px; flex-shrink: 0; }

.packeta-point-name { font-size: 14px; color: var(--brown-dark); font-weight: 400; margin-bottom: 2px; }

.packeta-point-addr { font-size: 12px; color: var(--stone); }

.packeta-point-change {

  margin-left: auto; flex-shrink: 0;

  padding: 6px 12px;

  background: none; border: 1px solid var(--border-strong);

  border-radius: var(--radius); color: var(--text-mid);

  font-family: 'Jost', sans-serif; font-size: 11px;

  letter-spacing: 0.1em; text-transform: uppercase;

  cursor: pointer; transition: all 0.2s;

}

.packeta-point-change:hover { background: var(--cream-mid); color: var(--brown-dark); }

.packeta-no-key-notice {

  font-size: 12px; color: var(--stone);

  padding: 8px 12px;

  background: rgba(200,146,42,0.07);

  border: 1px solid rgba(200,146,42,0.2);

  border-radius: var(--radius);

}



/* ── CHECKOUT PREFILL BANNER ── */

.checkout-prefill-banner {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 16px;

  background: rgba(122,150,96,0.1);

  border: 1px solid rgba(122,150,96,0.25);

  border-radius: var(--radius-md);

  margin-bottom: 20px;

  font-size: 12px;

  color: var(--sage-dark);

}



/* ── ORDER TABS ── */

.order-tabs {

  display: flex;

  gap: 0;

  border-bottom: 1px solid var(--border);

  margin-bottom: 24px;

}

.order-tab-btn {

  padding: 10px 24px;

  background: none;

  border: none;

  border-bottom: 2px solid transparent;

  margin-bottom: -1px;

  font-family: 'Jost', sans-serif;

  font-size: 12px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--text-light);

  cursor: pointer;

  transition: all 0.2s;

  display: flex;

  align-items: center;

  gap: 8px;

}

.order-tab-btn:hover { color: var(--text-mid); }

.order-tab-btn.active {

  color: var(--gold-dark);

  border-bottom-color: var(--gold);

}

.order-tab-count {

  background: var(--cream-mid);

  color: var(--text-mid);

  font-size: 10px;

  padding: 1px 6px;

  border-radius: 20px;

  font-weight: 500;

}

.order-tab-btn.active .order-tab-count {

  background: rgba(200,146,42,0.2);

  color: var(--gold-dark);

}



/* ── ORDER DETAIL MODAL ── */

.order-detail-modal-overlay {

  position: fixed; inset: 0;

  background: rgba(20,12,4,0.75);

  backdrop-filter: blur(6px);

  z-index: 3500;

  display: flex; align-items: center; justify-content: center;

  padding: 24px;

  opacity: 0; pointer-events: none;

  transition: opacity 0.25s;

}

.order-detail-modal-overlay.open { opacity: 1; pointer-events: all; }

/* Session #36: zavřené okno mimo pořadí tabulátoru (viz .modal-overlay). */

.order-detail-modal-overlay:not(.open) { visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }

.order-detail-modal {

  background: #2a1f12;

  border: 1px solid var(--border-strong);

  border-radius: var(--radius-lg);

  width: 100%; max-width: 640px;

  max-height: 88vh;

  overflow-y: auto;

  box-shadow: var(--shadow-lg);

}

.odm-header {

  display: flex; align-items: flex-start; justify-content: space-between;

  padding: 24px 28px 20px;

  border-bottom: 1px solid var(--border);

  gap: 16px;

}

.odm-id {

  font-family: 'EB Garamond', serif;

  font-size: 22px;

  color: var(--brown-dark);

  margin-bottom: 4px;

}

.odm-date { font-size: 12px; color: var(--stone); }

.odm-close {

  width: 32px; height: 32px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: none;

  color: var(--text-light);

  font-size: 18px;

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  flex-shrink: 0;

  transition: all 0.2s;

}

.odm-close:hover { background: var(--cream-mid); color: var(--brown-dark); }

.odm-body { padding: 24px 28px; }

.odm-section-label {

  font-size: 9px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--stone);

  margin-bottom: 12px;

  margin-top: 20px;

}

.odm-section-label:first-child { margin-top: 0; }

.odm-info-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-bottom: 4px;

}

.odm-info-cell {}

.odm-info-cell-label { font-size: 10px; color: var(--stone); margin-bottom: 3px; letter-spacing: 0.1em; text-transform: uppercase; }

.odm-info-cell-value { font-size: 13px; color: var(--text-mid); }

.odm-item-row {

  display: flex; align-items: center; gap: 14px;

  padding: 12px 0;

  border-bottom: 1px solid var(--border);

}

.odm-item-row:last-child { border-bottom: none; }

.odm-item-img {

  width: 56px; height: 56px;

  border-radius: var(--radius);

  object-fit: cover;

  background: var(--cream-dark);

  display: flex; align-items: center; justify-content: center;

  font-size: 22px;

  flex-shrink: 0;

  overflow: hidden;

}

.odm-item-img img { width: 100%; height: 100%; object-fit: cover; }

.odm-item-name { flex: 1; font-size: 14px; color: var(--text-mid); line-height: 1.3; }

.odm-item-cat { font-size: 11px; color: var(--stone); margin-top: 2px; }

.odm-item-price {

  font-family: 'EB Garamond', serif;

  font-size: 18px;

  color: var(--brown-dark);

  white-space: nowrap;

}

.odm-totals {

  background: var(--cream-dark);

  border-radius: var(--radius-md);

  padding: 16px;

  margin-top: 16px;

}

.odm-total-row {

  display: flex; justify-content: space-between;

  font-size: 13px; color: var(--text-mid);

  padding: 4px 0;

}

.odm-total-row.final {

  font-size: 16px; color: var(--brown-dark);

  border-top: 1px solid var(--border);

  margin-top: 8px; padding-top: 12px;

}

.odm-total-row.final span:last-child {

  font-family: 'EB Garamond', serif;

  font-size: 20px;

}



/* ══════════════════════════════════════════

   LANGUAGE TOGGLE

══════════════════════════════════════════ */

.lang-en { display: none; }

.lang-active-en .lang-cs { display: none; }

.lang-active-en .lang-en { display: block; }



/* ══════════════════════════════════════════

   UTILITIES

══════════════════════════════════════════ */

.flex { display: flex; }

.items-center { align-items: center; }

.gap-8 { gap: 8px; }

.gap-12 { gap: 12px; }

.mt-16 { margin-top: 16px; }

.mt-24 { margin-top: 24px; }

.text-center { text-align: center; }



.divider {

  height: 1px;

  background: var(--border);

  margin: 24px 0;

}



.page-header {

  margin-top: 64px;

  padding: 56px 32px 40px;

  /* Hero-style spotlight — sjednocuje vzhled napříč stránkami */

  background-color: #1a1208;

  background-image:

    radial-gradient(ellipse 55% 90% at 50% 0%, rgba(210,150,50,0.16) 0%, transparent 60%),

    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0,0,0,0.5) 0%, transparent 60%);

  border-bottom: 1px solid var(--border);

  text-align: center;

  position: relative;

  overflow: hidden;

}



.page-header-title {

  font-size: clamp(32px, 5vw, 52px);

  color: var(--brown-dark);

  margin-bottom: 8px;

}

.page-header-sub {

  font-size: 14px;

  color: var(--text-light);

}



.empty-state {

  text-align: center;

  padding: 80px 32px;

}

.empty-state-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.4; }

.empty-state-title {

  font-family: 'EB Garamond', serif;

  font-size: 24px;

  color: var(--stone);

  margin-bottom: 8px;

}

.empty-state-text { font-size: 14px; color: var(--text-light); }



.success-page {

  margin-top: 64px;

  min-height: calc(100vh - 64px);

  display: flex; align-items: center; justify-content: center;

  flex-direction: column;

  text-align: center;

  padding: 48px;

}

.success-icon { font-size: 72px; margin-bottom: 24px; }

.success-title {

  font-family: 'EB Garamond', serif;

  font-size: 40px;

  color: var(--brown-dark);

  margin-bottom: 12px;

}

.success-text { font-size: 15px; color: var(--text-light); max-width: 440px; line-height: 1.7; margin-bottom: 32px; }



/* ── Responsive ── */

@media (max-width: 900px) {

  .categories-grid { grid-template-columns: repeat(3, 1fr); }

  .product-detail-grid { grid-template-columns: 1fr; gap: 24px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  .checkout-grid { grid-template-columns: 1fr; }

  .admin-stats { grid-template-columns: repeat(2, 1fr); }

  .shop-layout { flex-direction: column; }

  .shop-sidebar { width: 100%; position: static; height: auto; }

}



@media (max-width: 600px) {

  nav { padding: 0 16px; }

  .nav-center { display: none; }

  .section { padding: 48px 16px; }

  .categories-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  .cart-drawer { width: 100%; }

}



/* ══════════════════════════════════════════

   STRATA BACKGROUND — Vrstvy hornin

   Apply class `rimakon-strata is-fixed` on <body>

   Fine-tune via CSS variables:

     --strata-opacity   (0.3 – 1)

     --strata-grain     (0 – 2)

     --strata-vignette  (0 – 1.5)

   ══════════════════════════════════════════ */

.rimakon-strata {

  position: relative;

  isolation: isolate;

  --strata-opacity: 1;

  --strata-grain: 1;

  --strata-vignette: 1;

}

.rimakon-strata::before,

.rimakon-strata::after {

  display: none;

}



/* Home strata wrap — strata pouze pod hero */

.home-strata-wrap {

  position: relative;

}



/* ── MULTI-PHOTO GALLERY UPLOAD ── */

.gallery-upload-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  margin-top: 8px;

}

.gallery-thumb {

  position: relative;

  aspect-ratio: 1/1;

  border-radius: var(--radius-md);

  overflow: hidden;

  background: var(--cream-dark);

  border: 1px solid var(--border);

}

.gallery-thumb img {

  width: 100%; height: 100%;

  object-fit: cover;

}

.gallery-thumb .thumb-remove {

  position: absolute;

  top: 4px; right: 4px;

  width: 22px; height: 22px;

  background: rgba(30,18,8,0.8);

  border: none; border-radius: 50%;

  color: var(--brown-dark);

  font-size: 13px;

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  line-height: 1;

  transition: background 0.2s;

}

.gallery-thumb .thumb-remove:hover { background: var(--gold); }

.gallery-thumb .thumb-main-badge {

  position: absolute;

  bottom: 4px; left: 4px;

  font-size: 9px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  background: var(--gold);

  color: #1e1608;

  padding: 2px 6px;

  border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

}

.gallery-thumb .thumb-set-main {

  position: absolute;

  bottom: 4px; left: 4px;

  font-size: 9px;

  letter-spacing: 0.08em;

  background: rgba(30,18,8,0.7);

  color: var(--text-light);

  padding: 2px 6px;

  border-radius: var(--radius);

  font-family: 'Jost', sans-serif;

  cursor: pointer;

  border: none;

  transition: all 0.2s;

  display: none;

}

.gallery-thumb:hover .thumb-set-main { display: block; }

.gallery-add-btn {

  aspect-ratio: 1/1;

  border-radius: var(--radius-md);

  border: 2px dashed var(--border-strong);

  background: none;

  color: var(--text-light);

  font-size: 28px;

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  transition: all 0.2s;

}

.gallery-add-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--cream); }

/* ── VIDEO UPLOAD ── */

.video-url-wrap { display: flex; gap: 8px; align-items: center; }

.video-preview-wrap {

  margin-top: 10px;

  border-radius: var(--radius-md);

  overflow: hidden;

  background: #000;

  display: none;

}

.video-preview-wrap video, .video-preview-wrap iframe {

  width: 100%; display: block;

  max-height: 220px;

}

/* ── PRODUCT DETAIL GALLERY ── */

.detail-gallery-thumbs {

  display: flex;

  gap: 8px;

  margin-top: 10px;

  flex-wrap: wrap;

}

.detail-gallery-thumb {

  width: 64px; height: 64px;

  border-radius: var(--radius-md);

  overflow: hidden;

  cursor: pointer;

  border: 2px solid transparent;

  transition: border-color 0.2s;

  flex-shrink: 0;

}

.detail-gallery-thumb.active { border-color: var(--gold); }

.detail-gallery-thumb img, .detail-gallery-thumb video {

  width: 100%; height: 100%;

  object-fit: cover;

}

.detail-gallery-thumb.video-thumb {

  background: #111;

  display: flex; align-items: center; justify-content: center;

  font-size: 22px;

}

.product-detail-main-img video {

  width: 100%; max-height: 420px;

  border-radius: var(--radius-md);

  object-fit: contain;

  background: #000;

}



/* ══════════════════════════════════════════

   JANTAR SUBCATEGORIES

══════════════════════════════════════════ */

.subcat-banner {

  margin-bottom: 28px;

  background: var(--cream-dark);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  overflow: hidden;

}

.subcat-banner-header {

  padding: 14px 20px;

  display: flex; align-items: center; justify-content: space-between;

  cursor: pointer;

  border-bottom: 1px solid var(--border);

}

.subcat-banner-title {

  font-family: 'EB Garamond', serif;

  font-size: 16px;

  color: var(--brown-dark);

  letter-spacing: 0.04em;

}

.subcat-banner-toggle {

  font-size: 11px;

  color: var(--stone);

  letter-spacing: 0.1em;

  text-transform: uppercase;

}

.subcat-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 0;

}

.subcat-card {

  position: relative;

  aspect-ratio: 1 / 1;

  cursor: pointer;

  overflow: hidden;

  transition: all 0.25s;

  border-right: 1px solid var(--border);

}

.subcat-card:last-child { border-right: none; }

.subcat-card:hover { opacity: 0.88; }

.subcat-card.active { box-shadow: inset 0 0 0 2px var(--gold); }

.subcat-card img {

  width: 100%; height: 100%;

  object-fit: contain;

  mix-blend-mode: screen;

  background: #000;

  transition: transform 0.35s;

}

.subcat-card:hover img { transform: scale(1.06); }

.subcat-card-label {

  position: absolute;

  bottom: 0; left: 0; right: 0;

  padding: 10px 8px 8px;

  background: linear-gradient(to top, rgba(20,14,6,0.85) 0%, transparent 100%);

  font-family: 'EB Garamond', serif;

  font-size: 13px;

  color: var(--brown-dark);

  text-align: center;

  line-height: 1.2;

}

.subcat-card-count {

  font-size: 10px;

  color: var(--stone);

  display: block;

  margin-top: 2px;

  font-family: 'Jost', sans-serif;

}

-e 

/* ── PRODUCT MODAL ── */

.prod-modal-inner {

  max-width: 980px;

  width: 96vw;

  padding: 28px 32px 24px;

  max-height: 92vh;

  overflow-y: auto;

  overflow-x: hidden;

  display: flex;

  flex-direction: column;

  gap: 0;

}

.prod-modal-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 20px;

  gap: 16px;

}

.prod-modal-cols {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

  align-items: start;

}

@media (max-width: 700px) {

  .prod-modal-cols { grid-template-columns: 1fr; }

}



/* ══════════════════════════════════════════

   RESPONSIVE — Tablet, Mobile, Small Mobile

══════════════════════════════════════════ */



/* Large desktop: >1440px — more horizontal padding */

@media (min-width: 1440px) {

  .section { padding: 80px 64px; }

  footer { padding: 64px 64px 0; }

  .admin-main { padding: 40px 48px; }

}



/* Tablet: 768px–1024px */

@media (max-width: 1024px) {

  .section { padding: 64px 24px; }

  .products-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .admin-sidebar { width: 180px; }

  .admin-main { padding: 24px 20px; }

  .prod-modal-inner { width: 98vw; padding: 20px 18px 18px; }

  /* Hero tablet */

  .hero { min-height: 320px; padding: 48px 20px 52px; }

  .hero-title-line1,

  .hero-title-line2 { font-size: clamp(32px, 5.5vw, 50px); }

  /* Nav tablet — zmenšit mezery */

  nav { padding: 0 20px; }

  .nav-center { gap: 20px; }

  .nav-link { font-size: 11px; letter-spacing: 0.1em; }

  /* Categories tablet — 3 sloupce místo 4 */

  .categories-grid { grid-template-columns: repeat(3, 1fr); }

  /* Featured — 3 sloupce (sjednoceno s new arrivals) */

  .products-grid-featured { grid-template-columns: repeat(3, 1fr); }

  /* New arrivals — 3 sloupce */

  .products-grid-new { grid-template-columns: repeat(3, 1fr); }

}



/* Mobile: ≤768px */

@media (max-width: 768px) {

  /* Nav */

  nav { padding: 0 16px; height: 56px; }

  .nav-center { display: none; }

  .nav-logo { gap: 8px; }

  .rimakon-logo-svg { height: 34px; }



  /* Hero */

  .hero { min-height: 300px; padding: 40px 16px 48px; margin-top: 56px; }

  .hero-logo-svg { width: 52px; height: 52px; margin-bottom: 14px; }

  .hero-title-line1,

  .hero-title-line2 { font-size: clamp(28px, 8vw, 40px); letter-spacing: 0.05em; }

  .hero-eyebrow { font-size: 9px; margin-bottom: 16px; letter-spacing: 0.24em; }

  .hero-eyebrow::before, .hero-eyebrow::after { width: 16px; }



  /* Page header — sync margin-top s navbarem */

  .page-header { margin-top: 56px; padding: 44px 20px 32px; }



  /* Sections */

  .section { padding: 48px 16px; }

  .section-title { font-size: clamp(24px, 5vw, 36px); }



  /* Products */

  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }

  .shop-layout { flex-direction: column; }

  .shop-sidebar { width: 100%; position: static; height: auto; }



  /* Categories */

  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }



  /* Cart */

  .cart-drawer { width: 100%; }



  /* Footer */

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }



  /* Checkout */

  .checkout-grid { grid-template-columns: 1fr; }



  /* Product detail */

  .product-detail { padding: 24px 16px 100px; }

  .breadcrumb { margin-bottom: 20px; }

  .product-detail-grid { grid-template-columns: 1fr; gap: 24px; }

  .detail-sidebar { position: static; gap: 16px; }

  .detail-buybar {

    position: fixed; left: 0; right: 0; bottom: 0;

    background: var(--cream-dark);

    border-top: 1px solid var(--border-strong);

    padding: 12px 16px;

    box-shadow: var(--shadow-lg);

    z-index: 40;

  }

  .detail-buybar .detail-price { font-size: 26px; }



  /* Admin */

  .admin-layout { flex-direction: column; }

  .admin-sidebar {

    width: 100%; height: auto; position: static;

    display: flex; flex-wrap: wrap; gap: 4px;

    padding: 12px; flex-direction: row;

  }

  .admin-sidebar-title { display: none; }

  .admin-sidebar-logo { width: 100%; padding: 2px 4px 8px; margin: 0 0 4px; font-size: 16px; }

  .admin-nav-item { padding: 8px 12px; font-size: 12px; flex: 0 0 auto; border-left: none; border-bottom: 2px solid transparent; }

  .admin-nav-item.active { border-left-color: transparent; border-bottom-color: var(--gold); }

  .admin-main { padding: 16px; }

  .admin-page-title { font-size: 24px; }

  .dash-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .dash-grid-wide { grid-template-columns: 1fr 1fr; gap: 10px; }

  .dash-grid-bottom { grid-template-columns: 1fr; }



  /* Modals */

  .modal { padding: 24px 18px; }

  .prod-modal-inner { width: 100%; max-height: 100vh; border-radius: 0; padding: 16px; }

  .pm-bilingual { grid-template-columns: 1fr; }

  .pm-inline-4 { grid-template-columns: 1fr 1fr; }



  /* Order stepper */

  .order-stepper { gap: 0; }

  .order-step-label { font-size: 8px; }

}



/* Small mobile: ≤480px */

@media (max-width: 480px) {

  .products-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  .categories-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  .hero-title-line1,

  .hero-title-line2 { font-size: clamp(24px, 9vw, 34px); }

  .hero-logo-svg { width: 44px; height: 44px; }

  /* Navbar zmenšen na 52px — sync margin-top u hero/page-header */

  .hero { margin-top: 52px; padding: 32px 14px 40px; }

  .page-header { margin-top: 52px; padding: 36px 16px 28px; }

  .dash-grid { grid-template-columns: 1fr 1fr; }

  .dash-grid-wide { grid-template-columns: 1fr; }

  .dcard-value { font-size: 28px; }

  .order-detail-grid { grid-template-columns: 1fr; }

  nav { height: 52px; }

}



/* About teaser grid — handled via .info-grid-2 / .info-grid-2-tight */

.prod-section {

  background: var(--cream-dark);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.prod-section-title {

  font-size: 10px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--sage-dark);

  margin-bottom: 2px;

  font-family: 'Jost', sans-serif;

}

.prod-modal-footer {

  margin-top: 20px;

  display: flex;

  gap: 10px;

  align-items: center;

}

.pm-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.pm-inline-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.pm-inline-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }

.pm-unit { position: relative; }

.pm-unit input { padding-right: 32px; }

.pm-unit span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--stone); font-size: 12px; pointer-events: none; }

.pm-unit label { font-size: 11px; color: var(--stone); margin-bottom: 3px; display: block; }

.pm-checks { display: flex; flex-direction: column; gap: 8px; }



/* CZ + EN side by side */

.pm-bilingual {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  align-items: start;

}

.pm-bilingual-label {

  display: flex; align-items: center; gap: 6px;

  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;

  color: var(--stone); margin-bottom: 4px;

}

.pm-bilingual-label .flag { font-size: 11px; }

.pm-lang-divider {

  display: flex; align-items: center; justify-content: center;

  padding-top: 28px; color: var(--border-strong); font-size: 16px; user-select: none;

}



/* ═══════════════════════════════════════════════════════════════

   HOME PAGE REDESIGN — additions

   Section order: Hero → Categories → Featured → New → About → Social

═══════════════════════════════════════════════════════════════ */



/* ── Hero: dual CTA + scroll indicator ── */

.hero-cta-group {

  display: flex;

  gap: 12px;

  justify-content: center;

  flex-wrap: wrap;

  margin-top: 8px;

}



.hero-cta-secondary {

  background: transparent;

  color: var(--gold);

  border: 1px solid var(--gold);

}

.hero-cta-secondary:hover {

  background: rgba(200,146,42,0.08);

  color: var(--gold-dark);

  border-color: var(--gold-dark);

  box-shadow: none;

}



.hero-scroll-indicator {

  display: flex;

  justify-content: center;

  margin-top: 36px;

  color: var(--gold);

  opacity: 0.55;

  animation: scrollBob 2s ease-in-out infinite;

}



/* ── Scroll reveal animation ──

   Session #34: vyjíždí jen OBSAH sekce, pozadí je vidět hned. Dřív byla

   průhledná celá sekce, takže na mobilu pod úvodem zůstal tmavý pruh,

   dokud člověk nepopojel (a předěly mezi sekcemi by mizely s ní).

   svg.sekce-hrana (předěl) si animaci řídí sama v shop-redesign.css. */

.reveal-on-scroll > :not(.sekce-hrana) {

  opacity: 0;

  transform: translateY(24px);

  transition: opacity 0.7s ease, transform 0.7s ease;

}

.reveal-on-scroll.is-visible > :not(.sekce-hrana) {

  opacity: 1;

  transform: translateY(0);

}

@media (prefers-reduced-motion: reduce) {

  .reveal-on-scroll > :not(.sekce-hrana) { opacity: 1; transform: none; transition: none; }

}



/* ── Products grid modifiers ── */

.products-grid-featured {

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

}

.products-grid-new {

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

}



/* ── Section header row (title + side link) ── */

.section-header-row {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 24px;

  margin-bottom: 36px;

  flex-wrap: wrap;

}

.section-title-inline {

  margin-bottom: 0;

}

.section-link {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--gold);

  cursor: pointer;

  text-decoration: none;

  font-weight: 500;

  transition: color 0.2s, gap 0.2s;

  padding: 4px 0;

}

.section-link:hover {

  color: var(--gold-dark);

  gap: 12px;

}



/* ── Trust signals (About teaser) ── */

.trust-signals-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

  margin-top: 48px;

}

.trust-signal {

  text-align: center;

  padding: 32px 20px;

  background: var(--cream-dark);

  border-radius: var(--radius-md);

  border: 1px solid var(--border);

  transition: border-color 0.3s, transform 0.3s;

}

.trust-signal:hover {

  border-color: var(--border-strong);

  transform: translateY(-2px);

}

.trust-signal-icon {

  display: block;

  font-size: 36px;

  margin-bottom: 14px;

}

.trust-signal-title {

  font-family: 'EB Garamond', serif;

  font-size: 20px;

  color: var(--brown-dark);

  margin-bottom: 6px;

}

.trust-signal-text {

  font-size: 13px;

  color: var(--text-light);

  line-height: 1.6;

}



/* ── Social follow block ── */

.social-follow-block {

  text-align: center;

}

.social-follow-block .section-subtitle {

  margin: 8px auto 0;

}

.social-links-row {

  display: flex;

  justify-content: center;

  gap: 16px;

  margin-top: 36px;

  flex-wrap: wrap;

}

.social-link {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 14px 28px;

  background: var(--cream-dark);

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

  color: var(--brown-dark);

  text-decoration: none;

  font-size: 12px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  font-weight: 500;

  transition: all 0.3s;

}

.social-link:hover {

  border-color: var(--gold);

  color: var(--gold);

  transform: translateY(-2px);

  box-shadow: var(--shadow-sm);

}

.social-link svg {

  flex-shrink: 0;

}



/* ── Mobile responsive (≤768px) ── */

@media (max-width: 768px) {

  .products-grid-featured {

    grid-template-columns: repeat(2, 1fr);

  }

  .products-grid-new {

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

  }

  .trust-signals-grid {

    grid-template-columns: 1fr;

    gap: 14px;

  }

  .section-header-row {

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

  }

  .hero-cta-group {

    flex-direction: column;

    align-items: stretch;

  }

  .hero-cta {

    width: 100%;

    justify-content: center;

  }

}



/* ══════════════════════════════════════════

   HERO ANIMACE — fade-up při načtení stránky

══════════════════════════════════════════ */

@keyframes heroFadeUp {

  from { opacity: 0; transform: translateY(16px); }

  to   { opacity: 1; transform: translateY(0); }

}

@keyframes heroFadeIn {

  from { opacity: 0; }

  to   { opacity: 1; }

}



/* Animate pouze při aktivní home page */

#page-home.active .hero-eyebrow {

  opacity: 0;

  animation: heroFadeUp 0.85s ease 0.05s forwards;

}

#page-home.active .hero-logo-wrap {

  opacity: 0;

  animation: heroFadeUp 0.85s ease 0.22s forwards;

}

#page-home.active .hero-title {

  opacity: 0;

  animation: heroFadeUp 0.85s ease 0.38s forwards;

}

#page-home.active .hero-title-divider {

  opacity: 0;

  animation: heroFadeIn 0.85s ease 0.55s forwards;

}

#page-home.active .hero-subtitle {

  opacity: 0;

  animation: heroFadeUp 0.85s ease 0.65s forwards;

}

#page-home.active .hero-cta-group {

  opacity: 0;

  animation: heroFadeUp 0.85s ease 0.78s forwards;

}

#page-home.active .hero-scroll-indicator {

  opacity: 0;

  animation: heroFadeIn 0.6s ease 1.1s forwards;

}



/* Omezení animací při prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {

  #page-home.active .hero-eyebrow,

  #page-home.active .hero-logo-wrap,

  #page-home.active .hero-title,

  #page-home.active .hero-title-divider,

  #page-home.active .hero-subtitle,

  #page-home.active .hero-cta-group,

  #page-home.active .hero-scroll-indicator,

  .hero-pattern {

    opacity: 1 !important;

    animation: none !important;

    transform: none !important;

  }

}



/* ══════════════════════════════════════════

   HERO — nav výška 56px na mobilu

══════════════════════════════════════════ */

@media (max-width: 768px) {

  .hero { margin-top: 56px; }

}

@media (max-width: 480px) {

  .hero { margin-top: 52px; }

  .hero-eyebrow::before, .hero-eyebrow::after { display: none; }

}



/* ══════════════════════════════════════════

   PAGE CONTENT COMPONENTS

   Sdílené třídy pro contact / about / account

   (nahrazují opakované inline styly v PHP)

══════════════════════════════════════════ */



/* ── Page-narrow wrappery ── */

.page-narrow-contact { max-width: 700px; margin: 0 auto; }

.page-narrow-about   { max-width: 900px; margin: 0 auto; }



/* ── Karta (info-card) ── */

.info-card {

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 24px;

}

.info-card-lg     { padding: 32px; }

.info-card-tall   { padding: 24px 16px; text-align: center; }

.info-card-tight  { padding: 20px 24px; }



.info-card-icon       { font-size: 28px; margin-bottom: 12px; }

.info-card-icon-lg    { font-size: 32px; margin-bottom: 8px; display: block; }



/* ── Malý uppercase štítek ── */

.info-label {

  font-size: 11px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--stone);

  margin-bottom: 8px;

}

.info-label-tight { margin-bottom: 6px; }

.info-label-spaced { margin-top: 12px; }

.info-label.is-gold { color: var(--gold); }

.info-label.is-sage { color: var(--sage-dark); }



/* ── Tělo textu v kartě ── */

.info-body {

  font-size: 14px;

  color: var(--brown-dark);

  margin-bottom: 12px;

}

.info-body-lh { line-height: 1.6; margin-bottom: 0; }

.info-body strong.is-gold { color: var(--gold); }



/* ── Linky uvnitř karet ── */

.info-link-plain {

  color: var(--brown-dark);

  text-decoration: none;

}

.info-link-sage {

  color: var(--sage-dark);

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



/* ── Popiska pod linkem ── */

.info-caption {

  font-size: 11px;

  color: var(--stone);

  margin-top: 4px;

}



/* ── Gridy ── */

.info-grid-2 {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-bottom: 20px;

}

.info-grid-2-tight {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}

.info-grid-3 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  text-align: center;

  margin-bottom: 16px;

}



/* ── Otevírací doba (contact) ── */

.contact-hours-line { color: var(--text-mid); }

.contact-hours-val  { color: var(--gold); font-size: 13px; }

.contact-role-sub   { font-size: 12px; color: var(--stone); }



/* ── Form box (contact) ── */

.contact-form-box {

  background: var(--white);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 32px;

}

.contact-form-title {

  font-family: 'EB Garamond', serif;

  font-size: 22px;

  color: var(--brown-dark);

  margin-bottom: 20px;

}



/* ── About: citát + intro ── */

.about-intro { text-align: center; margin-bottom: 48px; }

.about-quote {

  font-family: 'EB Garamond', serif;

  font-size: 22px;

  color: var(--brown-dark);

  line-height: 1.7;

  margin-bottom: 32px;

}

.about-text {

  font-size: 15px;

  color: var(--text-mid);

  line-height: 1.9;

  margin-bottom: 12px;

}



/* ── About: galerie ── */

.about-gallery { margin-bottom: 48px; }

.about-gallery-hero {

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--border);

  box-shadow: var(--shadow-lg);

  margin-bottom: 16px;

}

.about-gallery-hero img {

  width: 100%;

  display: block;

  object-fit: cover;

  max-height: 480px;

}



/* ── About: 3 fakta ── */

.about-fact-title {

  font-family: 'EB Garamond', serif;

  font-size: 18px;

  color: var(--brown-dark);

  margin-bottom: 6px;

}

.about-fact-text { font-size: 12px; color: var(--stone); }



/* ── Success modal (sdílený - contact / account) ── */

.success-modal {

  display: none;

  position: fixed;

  inset: 0;

  z-index: 2000;

  background: rgba(0,0,0,0.6);

  backdrop-filter: blur(4px);

  align-items: center;

  justify-content: center;

}

.success-modal-inner {

  background: var(--cream-dark);

  border: 1px solid var(--border-strong);

  border-radius: var(--radius-lg);

  padding: 40px 48px;

  max-width: 400px;

  width: 90%;

  text-align: center;

  box-shadow: var(--shadow-lg);

}

.success-modal-icon { font-size: 48px; margin-bottom: 16px; }

.success-modal-title {

  font-family: 'EB Garamond', serif;

  font-size: 26px;

  color: var(--brown-dark);

  margin-bottom: 12px;

}

.success-modal-text {

  font-size: 14px;

  color: var(--text-mid);

  margin-bottom: 28px;

}



/* ── Responsive: gridy padají na 1 sloupec ── */

@media (max-width: 768px) {

  .info-grid-2,

  .info-grid-2-tight { grid-template-columns: 1fr; gap: 16px; }

  .info-grid-3       { grid-template-columns: 1fr; gap: 12px; }

  .contact-form-box  { padding: 24px 20px; }

  .success-modal-inner { padding: 32px 24px; }

}



/* ═══════════════════════════════════════════════════════════════

   STONE PROCESSING PAGE ("Zpracování Vašich kamenů") — session #29

   (TODO bod 4). Stránka měla HTML/JS (contact-form.js) hotové už dřív,

   ale CHYBĚLO úplně CSS — .stone-proc-* třídy nikde nebyly definované,

   takže se vykreslovaly jako neformátované bloky nalevo, ne přes

   celou šířku. Tohle celé je nové.

═══════════════════════════════════════════════════════════════ */

.stone-proc-wrap {

  max-width: 1400px;

  width: 100%;

  margin: 0 auto;

  padding: 48px 24px 64px;

}

.stone-proc-title {

  font-family: 'EB Garamond', serif;

  font-size: 36px;

  font-weight: 400;

  color: var(--brown-dark);

  text-align: center;

  margin: 0 0 24px;

}

.stone-proc-intro {

  max-width: 820px;

  margin: 0 auto 40px;

  text-align: center;

}

.stone-proc-intro p {

  font-size: 15px;

  line-height: 1.7;

  color: var(--text-mid);

  margin: 0;

}



.stone-proc-services {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  max-width: 1100px;

  margin: 0 auto 48px;

}

.stone-proc-service {

  background: var(--cream-dark);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 24px;

}

.stone-proc-service h4 {

  font-family: 'EB Garamond', serif;

  font-size: 20px;

  font-weight: 500;

  color: var(--gold-dark);

  margin: 0 0 10px;

}

.stone-proc-service p {

  font-size: 13px;

  line-height: 1.65;

  color: var(--text-mid);

  margin: 0;

}



.stone-proc-form-card {

  max-width: 720px;

  margin: 0 auto;

  background: var(--cream-dark);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  padding: 32px;

}

.stone-proc-form-card h3 {

  font-family: 'EB Garamond', serif;

  font-size: 24px;

  font-weight: 500;

  color: var(--brown-dark);

  margin: 0 0 20px;

  text-align: center;

}

.stone-proc-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}

.stone-proc-msg {

  border-radius: var(--radius-md);

  padding: 12px 16px;

  font-size: 13px;

  margin-bottom: 16px;

}

.stone-proc-msg.success { background: rgba(150,184,120,0.12); color: var(--sage-dark); border: 1px solid rgba(150,184,120,0.3); }

.stone-proc-msg.error   { background: rgba(192,80,64,0.1);   color: #d4705a;          border: 1px solid rgba(192,80,64,0.3); }



.stone-proc-photos {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  margin-top: 8px;

}

.stone-proc-photo-slot {

  position: relative;

  aspect-ratio: 1;

  border: 1px dashed var(--border-strong);

  border-radius: var(--radius-md);

  cursor: pointer;

  overflow: hidden;

  display: block;

}

.stone-proc-photo-slot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.stone-proc-photo-empty {

  position: absolute; inset: 0;

  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;

  color: var(--text-light); font-size: 11px; text-align: center; padding: 8px;

}

.stone-proc-photo-empty i { font-size: 20px; color: var(--text-light); }

.stone-proc-photo-slot.has-photo { border-style: solid; border-color: var(--border); }

.stone-proc-photo-preview { width: 100%; height: 100%; object-fit: cover; display: block; }

.stone-proc-photo-remove {

  position: absolute; top: 4px; right: 4px;

  width: 20px; height: 20px; border-radius: 50%;

  background: rgba(10,7,3,0.75); color: var(--brown-dark);

  border: none; cursor: pointer; font-size: 11px;

  display: flex; align-items: center; justify-content: center;

}



@media (max-width: 900px) {

  .stone-proc-services { grid-template-columns: 1fr; }

}

@media (max-width: 720px) {

  .stone-proc-title { font-size: 28px; }

  .stone-proc-row { grid-template-columns: 1fr; gap: 0; }

  .stone-proc-form-card { padding: 22px 18px; }

  .stone-proc-wrap { padding: 32px 16px 48px; }

}

/* ═══════════════════════════════════════════════════════════════

   Session #30 — .admin-table na mobilu jako karty



   Tabulky v adminu (Produkty, Doporučené, Historie…) mají 8–9 sloupců

   a na telefonu se nevešly — buňky se lámaly nebo tabulka přetékala

   mimo obrazovku a musela se posouvat do stran (viz hlášení Petra).



   Buňky UŽ MAJÍ atributy data-label (viz renderAdminProductsTable

   v index.php), jen k nim nikdy nevzniklo CSS pro obecnou tabulku —

   session #29 stejná pravidla napsala, ale zanořená pod #email-log-list,

   takže na ostatní tabulky nedosáhla. Tenhle blok je vytahuje o úroveň

   výš; verze v index.php u e-mailového logu tím zůstává nadbytečná

   (nechána, ať se nemíchá víc změn naráz).

═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .admin-table { border-collapse: separate; border-spacing: 0; }

  .admin-table thead { display: none; }

  .admin-table tbody tr {

    display: block;

    margin-bottom: 10px;

    padding: 12px 14px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--cream-dark);

  }

  .admin-table tbody tr:hover td { background: transparent; }

  .admin-table tbody td {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-start;

    gap: 4px 12px;

    padding: 5px 0 !important;

    border-bottom: none;

    text-align: left !important;

  }

  /* Popisek sloupce se bere z data-label; buňky bez něj (fotka, tlačítka)

     ho nemají a zobrazí se přes celou šířku. */

  .admin-table tbody td[data-label]:not([data-label=""])::before {

    content: attr(data-label);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--stone);

    flex: 0 0 auto;

    padding-top: 2px;

  }

  /* Akční tlačítka (Upravit / Prodáno / Smazat) na celou šířku pod sebou */

  .admin-table .table-actions {

    display: flex;

    gap: 8px;

    width: 100%;

    margin-top: 6px;

  }

  .admin-table .table-actions button { flex: 1; }

  .admin-table .table-product-img { width: 56px; height: 56px; }

}