/* ============================================================
   SLUNEČNICE — prémiový design system
   Bez externích fontů a assetů => běží samostatně / offline.
   ============================================================ */
:root {
  /* Paleta — teplá slonová kost + zlatá + jemné slunce */
  --bg:        #f5efe6;   /* teplá ivory */
  --bg-2:      #efe6d8;
  --card:      #fffdf9;
  --ink:       #2a2521;   /* hluboká hněď-černá */
  --ink-soft:  #4c443c;
  --muted:     #8c8174;
  --gold:      #c08a3e;   /* zlatý akcent */
  --gold-2:    #e0a85a;
  --terra:     #d77a52;   /* teplá terakota (slunce) */
  --line:      #e6dcca;
  --glass:     rgba(255, 253, 248, 0.62);
  --shadow:    0 24px 60px -34px rgba(90, 60, 25, 0.5);

  --radius:    22px;
  --radius-lg: 30px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(224, 168, 90, 0.28), transparent 60%),
    radial-gradient(700px 500px at 100% 8%, rgba(215, 122, 82, 0.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ===================== GLASS HLAVIČKA ===================== */
.nav {
  position: sticky;
  top: 16px;
  z-index: 50;
  width: min(1080px, calc(100% - 32px));
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 34px -18px rgba(90, 60, 25, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; color: var(--gold); }
.brand-name { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: .3px; }
.brand-logo-link { flex-shrink: 0; line-height: 0; }
.brand-logo-img { display: block; width: auto; height: 52px; object-fit: contain; }
.admin-brand .brand-logo-img { height: 58px; max-width: 190px; }

.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { font-size: 15px; color: var(--ink-soft); transition: color .2s; }
.nav-links a:hover { color: var(--gold); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7);
  color: var(--ink-soft); cursor: pointer; transition: .2s;
}
.icon-btn:hover { color: var(--gold); background: #fff; }

.btn-primary {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap;
  color: #fff; border: none; cursor: pointer;
  background: linear-gradient(120deg, var(--gold-2), var(--terra));
  box-shadow: 0 12px 24px -12px rgba(215, 122, 82, 0.7);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.04);
  box-shadow: 0 16px 30px -12px rgba(215, 122, 82, 0.8); }

/* ===================== LAYOUT ===================== */
.wrap { width: min(880px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 40px; }
.eyebrow-pill {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.6); border: 1px solid var(--line);
  color: var(--gold); font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase;
}
.eyebrow-pill.small { font-size: 11px; padding: 6px 12px; }

/* ===================== HERO (dva sloupce) ===================== */
.hero-inner {
  width: min(1180px, calc(100% - 40px)); margin: 0 auto;
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: start;
  padding: 56px 0 40px;
}
.hero-left { max-width: 520px; }
.hero-spark { color: var(--gold); font-size: 26px; display: block; margin-bottom: 14px; }
.hero-left h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.1;
  letter-spacing: -.5px; color: var(--ink);
}
.hero-sub { color: var(--ink-soft); font-size: 18px; margin-top: 18px; max-width: 440px; }

.features { display: flex; gap: 26px; margin: 30px 0 0; }
.feature { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; width: 110px; }
.feature-ico { display: grid; place-items: center; width: 50px; height: 50px;
  color: var(--gold); }
.feature-ico svg { width: 40px; height: 40px; }
.feature span:last-child { font-size: 13.5px; color: var(--ink-soft); line-height: 1.35; }

.hero-photo { margin-top: 34px; }
.hero-photo svg { width: 100%; max-width: 460px; height: auto; display: block;
  filter: drop-shadow(0 24px 40px rgba(120,80,40,.18)); }

/* ===================== STUDIO (tvorba) ===================== */
.studio {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 26px 30px;
  box-shadow: var(--shadow);
}
.tabs { display: flex; gap: 6px; justify-content: center;
  background: var(--bg-2); padding: 6px; border-radius: 16px;
  margin: 0 0 24px; }
.tab { flex: 1; background: none; border: none; color: var(--muted);
  padding: 11px 14px; border-radius: 12px; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; transition: .2s; }
.tab.active { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(0,0,0,.3); }

/* Info box v kartě */
.info-box { display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-2); border-radius: 16px; padding: 16px 18px; margin: 24px 0 6px; }
.info-ico { color: var(--gold); font-size: 18px; line-height: 1.4; }
.info-box p { color: var(--ink-soft); font-size: 14.5px; }

/* Privacy note pod kartou */
.privacy-note { display: flex; gap: 10px; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; margin-top: 16px; padding: 0 10px; }
.privacy-note svg { color: var(--gold); flex-shrink: 0; }

.panel { display: none; }
.panel.active { display: block; }

/* Pohlaví */
.gender { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; }
.gender label { cursor: pointer; padding: 9px 22px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); font-size: 14.5px; transition: .2s; }
.gender input { display: none; }
.gender label:has(input:checked) { border-color: var(--gold);
  color: var(--ink); background: linear-gradient(120deg, rgba(224,168,90,.14), rgba(215,122,82,.1)); font-weight: 600; }

/* ===================== WHEEL PICKER ===================== */
.picker { position: relative; width: fit-content; margin: 0 auto;
  padding: 0 6px; border-radius: var(--radius); }
.picker-cols { display: flex; gap: 10px; position: relative; z-index: 2; }
.picker-col { display: flex; flex-direction: column; align-items: center; }
.picker-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }

.wheel {
  --item-h: 54px;
  width: 116px; height: calc(var(--item-h) * 3);
  overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.wheel::-webkit-scrollbar { display: none; }
.wheel-item {
  height: var(--item-h); scroll-snap-align: center;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 19px; color: var(--muted);
  transition: color .2s, transform .2s, opacity .2s; opacity: .55;
}
.wheel-item.active { color: var(--terra); font-size: 24px; font-weight: 600; opacity: 1; }
.wheel-spacer { height: var(--item-h); }

/* Zvýrazněný středový pás přes všechny tři kolečka */
.picker-band {
  position: absolute; left: 0; right: 0; top: calc(24px + 54px); /* label + 1 řádek */
  height: 54px; z-index: 1; pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(224,168,90,.16), rgba(215,122,82,.12));
  border-top: 1px solid rgba(192,138,62,.4);
  border-bottom: 1px solid rgba(192,138,62,.4);
}

.btn-big { display: block; margin: 30px auto 0; padding: 16px 46px; font-size: 17px; }
.microcopy { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 14px; }

/* Pár */
.couple { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.couple-side { text-align: center; }
.couple-side h4 { font-family: var(--serif); color: var(--gold); font-size: 19px; margin-bottom: 14px; }

/* ===================== VÝSLEDKOVÁ KARTA ===================== */
.card { background: linear-gradient(180deg, #fff, #fffaf2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; margin-top: 30px; box-shadow: var(--shadow); }
.eyebrow { color: var(--gold); font-size: 11.5px; letter-spacing: 2.5px;
  text-transform: uppercase; margin-bottom: 6px; }
.card .sign { font-family: var(--serif); font-size: 38px; font-weight: 600; margin-bottom: 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px; font-size: 13.5px; color: var(--ink-soft); }
.traits { color: var(--terra); margin-bottom: 14px; font-family: var(--serif); font-size: 17px; }
.reading { margin-bottom: 12px; color: var(--ink-soft); }
.muted { color: var(--muted); }
.card hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }
.card h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 4px; }
.todo { color: var(--terra); font-style: italic; }
.reveal { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Cena + kustomizace */
.price { font-family: var(--serif); font-size: 24px; color: var(--ink); margin: 8px 0 4px; }
.customize { margin-top: 18px; }
.customize-title { font-size: 14px; margin-bottom: 12px; }
.rec-note { color: var(--gold); }
.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.addon { display: flex; cursor: pointer; }
.addon input { display: none; }
.addon span { display: flex; flex-direction: column; width: 100%; text-align: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px;
  font-size: 13.5px; color: var(--ink-soft); transition: .15s; }
.addon span small { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.addon.rec span { border-color: var(--gold); }
.addon input:checked + span { border-color: var(--terra);
  background: linear-gradient(120deg, rgba(224,168,90,.16), rgba(215,122,82,.12)); color: var(--ink); }
.addon input:disabled + span { opacity: .4; }
.add-to-cart { width: 100%; }

/* Pár — dvě karty */
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pair-tag { font-family: var(--serif); color: var(--gold); font-size: 15px; margin-bottom: 6px; }
.pair-col .addon-grid { grid-template-columns: 1fr 1fr; }

/* ===================== KOŠÍK ===================== */
.cart-count { display: grid; place-items: center; position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--terra); color: #fff;
  font-size: 11px; font-family: var(--sans); }
.icon-btn { position: relative; }
.cart-backdrop { position: fixed; inset: 0; background: rgba(40,30,15,.4);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 60; }
.cart-backdrop.open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw);
  background: var(--bg); z-index: 70; transform: translateX(100%); transition: transform .3s ease;
  display: flex; flex-direction: column; box-shadow: -20px 0 60px -30px rgba(0,0,0,.5); padding: 22px; overflow-y: auto; }
.cart-drawer.open { transform: none; }
.cart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cart-head h3 { font-family: var(--serif); font-size: 24px; }
.cart-list { flex: 0 0 auto; }
.cart-empty { color: var(--muted); padding: 20px 0; text-align: center; }
.cart-item { display: flex; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-name { font-size: 15px; }
.cart-type { color: var(--gold); font-size: 12.5px; margin-top: 2px; }
.cart-addons { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cart-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.cart-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; }
.cart-remove:hover { color: var(--terra); }
.cart-summary { padding: 16px 0; }
.cart-line { display: flex; justify-content: space-between; padding: 5px 0; color: var(--ink-soft); }
.cart-line.total { font-family: var(--serif); font-size: 20px; color: var(--ink);
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.cart-nudge { color: var(--gold); font-size: 13px; padding: 4px 0; }
.cart-nudge.done { color: #6d8b4d; }
.shipping-progress { background: rgba(255,255,255,.55); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px 14px; margin-bottom: 14px; }
.shipping-progress-head { display: flex; justify-content: space-between; align-items: center;
  color: var(--ink-soft); font-size: 13px; margin-bottom: 9px; }
.shipping-progress-head strong { color: var(--gold); font-family: var(--serif); font-size: 16px; }
.shipping-bar { height: 7px; border-radius: 999px; overflow: hidden; background: var(--line); }
.shipping-bar span { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-2), var(--terra)); transition: width .25s ease; }

.checkout { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.checkout-title { font-family: var(--serif); font-size: 18px; margin-bottom: 4px; }
.checkout input, .checkout textarea { font-family: var(--sans); font-size: 15px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; resize: vertical; }
.checkout-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px;
  color: var(--muted); line-height: 1.45; }
.checkout-check input { width: 16px; height: 16px; padding: 0; margin-top: 2px; flex-shrink: 0; }
.checkout-check a { color: var(--gold); border-bottom: 1px solid rgba(192,138,62,.35); }
.checkout .btn-big { margin: 6px 0 0; padding: 14px; }
.checkout-note { color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 560px) { .addon-grid, .pair-grid { grid-template-columns: 1fr 1fr; } }

/* ===================== ODHALENÍ (full-width) ===================== */
.reveal-section { display: none; }
.reveal-section.show {
  display: block; padding: 50px 0 30px; margin-top: 10px;
  background:
    radial-gradient(800px 360px at 50% 0%, rgba(224,168,90,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,253,249,.7), rgba(255,253,249,0));
  border-top: 1px solid var(--line);
}
.reveal-inner { width: min(1060px, calc(100% - 40px)); margin: 0 auto; }
.reveal-anim { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.center { text-align: center; }
.chips.center { justify-content: center; }
.reveal-sign { font-family: var(--serif); font-weight: 600; text-align: center;
  font-size: clamp(38px, 6vw, 60px); margin: 8px 0 4px; }

/* Kapitoly výkladu */
.chapter { max-width: 660px; margin: 0 auto; }
.chapter-head { text-align: center; margin-bottom: 22px; }
.chapter-head h2, .chapter > h2 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 6px; }
.chapter p { color: var(--ink-soft); font-size: 17px; line-height: 1.85; margin-bottom: 16px; }
.chapter .chips { margin: 16px 0 18px; }
.chapter .traits-row { justify-content: center; margin-top: 20px; }
.num-badge.big { width: 86px; height: 86px; font-size: 40px; margin: 0 auto 16px;
  box-shadow: 0 18px 34px -16px rgba(215,122,82,.7); }

/* Přechodové věty mezi kapitolami */
.bridge { text-align: center; color: var(--gold); font-family: var(--serif);
  font-style: italic; font-size: 19px; max-width: 540px; margin: 40px auto; position: relative; }
.bridge::before, .bridge::after { content: ""; display: block; width: 40px; height: 1px;
  background: var(--gold-soft); margin: 14px auto; }
.bridge::after { display: none; }

/* Články o kamenech */
.stone-articles { display: flex; flex-direction: column; gap: 24px; margin: 14px 0 22px; }
.stone-article { display: flex; gap: 16px; align-items: flex-start; text-align: left; }
.stone-article h3 { font-family: var(--serif); font-size: 21px; margin-bottom: 6px; }
.stone-article p { font-size: 16px; margin-bottom: 0; }
.bead.big { width: 26px; height: 26px; margin-top: 6px; }
.reason.center { max-width: 600px; margin: 8px auto 0; font-style: italic; color: var(--gold); }
.bracelet-close { max-width: 640px; margin: 12px auto 26px; font-size: 18px;
  color: var(--ink-soft); line-height: 1.8; }

.reveal-grid { display: grid; grid-template-columns: 260px 1fr; gap: 44px;
  align-items: center; margin-top: 34px; }
.reveal-visual { display: flex; justify-content: center; }
.reveal-visual svg { width: 100%; max-width: 240px; filter: drop-shadow(0 20px 36px rgba(120,80,40,.18)); }
.reveal-read .lead { font-size: 19px; color: var(--ink-soft); margin-bottom: 16px; }
.numerology { display: flex; gap: 14px; align-items: center;
  background: var(--bg-2); border-radius: 16px; padding: 14px 16px; margin: 8px 0 16px; }
.num-badge { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%; font-family: var(--serif); font-size: 22px; color: #fff;
  background: linear-gradient(120deg, var(--gold-2), var(--terra)); }
.numerology p { font-size: 14.5px; color: var(--ink-soft); }
.traits-row { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; }
.traits-row li { background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px; color: var(--terra); font-family: var(--serif); font-size: 15px; }

.product-wrap { margin-top: 54px; }
.harmony { max-width: 720px; margin: 16px auto 0; font-size: 19px; }
.product-offer { display: grid; gap: 16px; margin-top: 18px; }
.product { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: stretch; }
.product-visual { display: grid; place-items: center; min-height: 520px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 120% at 34% 22%, #fff, #efe2cf 68%, #e4d0bd); }
.product-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-visual svg { width: min(72%, 360px); max-width: 360px; filter: drop-shadow(0 26px 42px rgba(120,80,40,.18)); }
.product-gallery { width: 100%; display: grid; align-content: start; gap: 12px; align-self: stretch; }
.product-gallery-main { width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 0; border-radius: 22px; object-fit: cover; display: block; background: #f1e6d8; }
.product-gallery-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.product-gallery-thumb { width: 100%; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; padding: 0; background: #fffaf3; cursor: pointer; opacity: .86;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease; }
.product-gallery-thumb:hover, .product-gallery-thumb:focus-visible { opacity: 1; border-color: var(--gold); transform: translateY(-1px); outline: none; }
.product-gallery-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.product-info { display: flex; flex-direction: column; align-items: stretch; }
.product-info h3 { font-family: var(--serif); font-size: clamp(27px, 3vw, 38px); line-height: 1.12; margin-bottom: 8px; }
.reason { color: var(--ink-soft); margin-bottom: 18px; }
.stone-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.stone-row { display: flex; gap: 12px; align-items: flex-start; }
.bead { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
  background: radial-gradient(circle at 32% 30%, #f0d6b6, var(--gold)); }
.stone-row strong { display: block; font-weight: 600; }
.stone-row span { color: var(--muted); font-size: 14px; }
.price-note { font-size: 13px; font-weight: 400; }
.price-block { display: grid; gap: 8px; }
.purchase-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.purchase-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--ink-soft);
  padding: 7px 12px;
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
}
.purchase-badge::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 260px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 18px 34px -22px rgba(0,0,0,.45);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 20;
}
.purchase-badge::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
  opacity: 0;
  transition: opacity .16s ease;
  z-index: 21;
}
.purchase-badge:hover::after,
.purchase-badge:hover::before,
.purchase-badge:focus-visible::after,
.purchase-badge:focus-visible::before {
  opacity: 1;
}
.purchase-badge:hover::after,
.purchase-badge:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
.main-add-to-cart { width: 100%; margin-top: 14px; padding: 15px 22px; text-align: center; }
.included { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.included span { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.64);
  color: var(--ink-soft); font-size: 12.5px; padding: 6px 11px; }
.meaning-deep { margin: 20px 0 10px; }
.meaning-title { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.meaning-intro { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; }
.meaning-card { border-top: 1px solid var(--line); padding: 18px 0 2px; }
.meaning-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.meaning-head .bead.big { margin-top: 0; }
.meaning-card h4 { font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.meaning-card p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.78; margin-bottom: 11px; }
.meaning-card strong { color: var(--ink); font-weight: 600; }
.addon-bubble { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: 0 24px 60px -44px rgba(90,60,25,.45); }
.addon-bubble-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.addon-bubble-head h3 { font-family: var(--serif); font-size: 25px; line-height: 1.15; }
.addon-bubble-head > span { color: var(--gold); border: 1px solid var(--line); background: rgba(255,255,255,.65);
  border-radius: 999px; padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
.addon-reco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.addon-reco { display: flex; cursor: pointer; min-width: 0; }
.addon-reco input { display: none; }
.addon-card { position: relative; display: flex; flex-direction: column; gap: 9px; width: 100%; min-height: 265px;
  border: 1px solid var(--line); border-radius: 18px; padding: 17px; background: rgba(255,255,255,.55);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.addon-card-top { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.addon-photo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, #fff, #ead7c4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.addon-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.addon-photo span { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 7px 7px 12px rgba(255,255,255,.38),
  inset -8px -8px 13px rgba(64,38,24,.22), 0 7px 12px rgba(90,60,25,.18); }
.stone-kristal span { background: radial-gradient(circle at 30% 28%, #fff, #dce8ef 52%, #9fb0bb); }
.stone-ruzenin span { background: radial-gradient(circle at 30% 28%, #fff1f0, #e7aeb6 55%, #b86c7a); }
.stone-tygri span { background: radial-gradient(circle at 30% 28%, #f5d28a, #b9792d 56%, #49301f); }
.stone-avanturin span { background: radial-gradient(circle at 30% 28%, #d9f1cf, #6f9b66 58%, #31583f); }
.stone-larimar span { background: radial-gradient(circle at 30% 28%, #eafcff, #77c7d3 58%, #3d8292); }
.stone-hematit span { background: radial-gradient(circle at 30% 28%, #d9d5ce, #77736e 56%, #242323); }
.addon-card strong { font-family: var(--serif); font-size: 21px; color: var(--ink); }
.addon-card em { color: var(--gold); font-style: normal; font-size: 12.5px; }
.addon-card small { color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.addon-selected { display: none; margin-top: auto; border-radius: 999px; padding: 8px 11px;
  background: linear-gradient(120deg, var(--gold-2), var(--terra)); color: #fff;
  font-size: 12.5px; text-align: center; font-weight: 600; }
.addon-reco.rec .addon-card { border-color: rgba(192,138,62,.55); }
.addon-reco input:checked + .addon-card { border-color: var(--terra); border-width: 2px;
  box-shadow: 0 22px 42px -26px rgba(215,122,82,.9), inset 0 0 0 2px rgba(215,122,82,.12);
  transform: translateY(-3px);
  background: linear-gradient(180deg, #fff, #fff8ef); }
.addon-reco input:checked + .addon-card .addon-selected { display: block; }
.addon-reco input:checked + .addon-card::after { content: "✓"; position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff;
  background: var(--terra); font-weight: 700; }
.pair-products { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pair-products .product-offer { margin-top: 0; }
.pair-products .product { padding: 24px; }
.pair-products .product-grid { grid-template-columns: 1fr; gap: 18px; }
.pair-products .product-visual { min-height: 240px; }
.pair-products .product-visual svg { max-width: 190px; }
.pair-products .meaning-card p { font-size: 14.5px; }
.pair-products .addon-reco-grid { grid-template-columns: 1fr; }
.pair-products .addon-card { min-height: auto; }

.save-modal-open { overflow: hidden; }
.save-reading-modal { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center;
  padding: 22px; }
.save-reading-modal[hidden] { display: none; }
.save-reading-backdrop { position: absolute; inset: 0; background: rgba(44,38,34,.24);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.save-reading-dialog { position: relative; z-index: 1; width: min(760px, 100%); }
.save-reading-card { position: relative; margin: 34px auto 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .78fr); gap: 18px; align-items: end; }
.save-reading-modal .save-reading-card { margin: 0; box-shadow: 0 32px 90px -38px rgba(58,43,28,.62); }
.save-reading-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255,255,255,.72); color: var(--ink-soft); font-size: 22px; line-height: 1;
  cursor: pointer; z-index: 2; }
.save-reading-close:hover { color: var(--terra); border-color: rgba(215,122,82,.42); }
.save-reading-card h3 { font-family: var(--serif); font-size: clamp(23px, 2.6vw, 31px); line-height: 1.15; margin: 4px 0 10px; }
.save-reading-card p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.7; }
.save-reading-card label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.save-reading-card input { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  padding: 13px 14px; font: inherit; color: var(--ink); }
.save-reading-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.save-reading-message { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 13px; background: rgba(255,255,255,.55); color: var(--muted); font-size: 14px; }
.save-reading-message.success { color: #58723d; background: rgba(109,139,77,.12); }
.save-reading-message.error { color: #b65d35; background: rgba(215,122,82,.12); }
.save-reading-card.pending-result { align-items: center; }
.save-reading-card.pending-result .save-reading-actions { justify-content: flex-end; }
.inline-save-reading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(192, 138, 62, .22);
  border-radius: 999px;
  background: rgba(255, 253, 249, .72);
}
.inline-save-reading-button {
  border: 0;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.inline-save-reading-button:hover { color: var(--terra); }
.inline-save-reading-button:disabled { cursor: default; opacity: .72; }
.inline-save-reading-message {
  color: var(--muted);
  font-size: 13px;
}
.inline-save-reading-message.success { color: #58723d; }
.inline-save-reading-message.error { color: #b65d35; }

/* Loader / animace generování */
.loader { text-align: center; padding: 54px 20px 64px; }
.bracelet-svg { width: 150px; height: 150px; }
.bracelet-svg.spin { animation: spin 3.4s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-msg { font-family: var(--serif); font-size: 24px; color: var(--ink);
  margin-top: 14px; min-height: 32px; }
.loader-sub { color: var(--muted); margin-top: 8px; }
.pop { animation: pop .45s ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.loader-bar { width: 220px; height: 4px; border-radius: 999px; background: var(--line);
  margin: 26px auto 0; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 100%; transform: scaleX(0);
  transform-origin: left; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-2), var(--terra));
  animation: fill linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }

@media (max-width: 760px) {
  .reveal-grid, .product-grid, .pair-products { grid-template-columns: 1fr; gap: 24px; }
  .save-reading-card { grid-template-columns: 1fr; align-items: stretch; }
  .save-reading-modal { align-items: end; padding: 14px; }
  .save-reading-dialog { width: 100%; }
  .save-reading-card.pending-result .save-reading-actions { justify-content: flex-start; }
  .reveal-visual svg { max-width: 200px; }
  .product { padding: 22px; }
  .product-visual { min-height: 300px; }
  .product-visual svg { width: min(70%, 240px); }
  .addon-reco-grid { grid-template-columns: 1fr; }
  .addon-card { min-height: auto; }
  .addon-bubble-head { flex-direction: column; }
}

/* ===================== JAK TO FUNGUJE ===================== */
.steps { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 20px; }
.section-title { font-family: var(--serif); text-align: center;
  font-size: 34px; font-weight: 600; margin-bottom: 36px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; text-align: center; }
.step-num { display: grid; place-items: center; width: 44px; height: 44px;
  margin: 0 auto 16px; border-radius: 50%; font-family: var(--serif); font-size: 20px;
  color: #fff; background: linear-gradient(120deg, var(--gold-2), var(--terra)); }
.step h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; }

/* ===================== HODNOTA / O NÁS / INFO ===================== */
.premium-value { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 84px 0 20px; }
.value-head { max-width: 680px; margin: 0 auto 34px; text-align: center; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.value-card { background: rgba(255,253,249,.72); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; min-height: 220px; }
.value-num { color: var(--gold); font-family: var(--serif); font-size: 26px; display: block; margin-bottom: 22px; }
.value-card h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 10px; }
.value-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }

.about { width: min(1120px, calc(100% - 40px)); margin: 70px auto 0; }
.about-inner { display: grid; grid-template-columns: .72fr 1.18fr .78fr; gap: 34px; align-items: stretch;
  background:
    radial-gradient(700px 320px at 20% 10%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(135deg, #fffdf9, #f3e8d8);
  color: var(--ink); border: 1px solid rgba(230,220,202,.9);
  border-radius: var(--radius-lg); padding: 42px;
  box-shadow: 0 30px 70px -46px rgba(90, 60, 25, .42); }
.about-photo { min-height: 320px; border-radius: 24px; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 22px 46px -34px rgba(90, 60, 25, .48); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-copy h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15; margin: 8px 0 18px; }
.about-copy .eyebrow { color: var(--gold); }
.about-copy p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.8; margin-bottom: 14px; max-width: 640px; }
.about-panel { display: grid; gap: 12px; }
.about-panel div { background: rgba(255,255,255,.64); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px;
  box-shadow: 0 18px 34px -30px rgba(90, 60, 25, .34); }
.about-panel strong { display: block; color: var(--gold); font-family: var(--serif); font-size: 30px; line-height: 1; }
.about-panel span { color: var(--ink-soft); font-size: 14px; display: block; margin-top: 8px; }

.info-sections { width: min(1080px, calc(100% - 40px)); margin: 70px auto 0; }
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: 0 20px 44px -36px rgba(120,80,40,.45); }
.info-card h3 { font-family: var(--serif); font-size: 21px; margin: 4px 0 10px; }
.info-card p:last-child { color: var(--ink-soft); font-size: 14.5px; line-height: 1.75; }

.home-faq { width: min(940px, calc(100% - 40px)); }

.legal { width: min(940px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0 20px; }
.legal-list { display: flex; flex-direction: column; gap: 12px; }
.legal-item { background: rgba(255,253,249,.72); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0 22px; }
.legal-item summary { cursor: pointer; list-style: none; font-family: var(--serif);
  font-size: 20px; padding: 18px 0; color: var(--ink); }
.legal-item summary::-webkit-details-marker { display: none; }
.legal-item div { padding: 0 0 20px; }
.legal-item p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.8; margin-bottom: 12px; }

/* ===================== SAMOSTATNÁ PRÁVNÍ STRÁNKA ===================== */
.legal-page { background-attachment: fixed; }
.legal-main { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 56px 0 20px; }
.legal-hero { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.legal-hero h1 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.1; margin: 10px 0 18px; }
.legal-hero p { color: var(--ink-soft); font-size: 17px; line-height: 1.8; }
.legal-toc { position: sticky; top: 92px; z-index: 2; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px; margin: 0 auto 28px; padding: 12px;
  background: rgba(255,253,249,.76); border: 1px solid var(--line);
  border-radius: 999px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.legal-toc a { color: var(--ink-soft); font-size: 13.5px; padding: 7px 12px;
  border-radius: 999px; transition: .2s; }
.legal-toc a:hover { color: #fff; background: var(--gold); }
.legal-doc { scroll-margin-top: 126px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px; margin: 16px 0; box-shadow: 0 24px 60px -44px rgba(90,60,25,.45); }
.legal-doc h2 { font-family: var(--serif); font-size: 30px; line-height: 1.2; margin-bottom: 18px; }
.legal-doc h3 { font-family: var(--serif); font-size: 21px; margin: 26px 0 10px; }
.legal-doc p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.85; margin-bottom: 13px; }
.legal-warning { display: grid; gap: 6px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 18px; margin-bottom: 20px; color: var(--ink-soft); }
.legal-warning strong { color: var(--terra); }
.seller-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seller-list div { background: rgba(245,239,230,.62); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; }
.seller-list dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 5px; }
.seller-list dd { color: var(--ink); font-size: 15px; }

/* ===================== PÁS: POCTIVÁ VÝROBA ===================== */
.craft { width: min(1180px, calc(100% - 40px)); margin: 64px auto 0; }
.craft-inner { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; padding: 40px; align-items: center; }
.craft-text h2 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin-bottom: 28px; }
.craft-features { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.craft-feature { display: flex; flex-direction: column; gap: 8px; }
.craft-feature .feature-ico { width: 42px; height: 42px; color: var(--gold); }
.craft-feature .feature-ico svg { width: 34px; height: 34px; }
.craft-feature span:last-child { font-size: 13.5px; color: var(--ink-soft); line-height: 1.35; }
.craft-photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.craft-photo { aspect-ratio: 3 / 4; border-radius: var(--radius); position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f3e6d6, #e7d3c2 70%, #dcc3b0);
  display: grid; place-items: center; }
.craft-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===================== KATALOG (editoriál) ===================== */
.catalog { width: min(1060px, calc(100% - 40px)); margin: 0 auto; padding: 86px 0 20px; }
.catalog-head { text-align: center; margin-bottom: 46px; }
.catalog-sub { color: var(--muted); margin-top: 10px; font-size: 17px; }
.brows { display: flex; flex-direction: column; gap: 48px; }
#bracelets-all { display: none; margin-top: 48px; }
#bracelets-all.open { display: flex; }
.brow { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.brow.rev .brow-img { order: 2; }
.brow-img { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.brow-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brow-info .eyebrow { color: var(--gold); font-size: 11.5px; letter-spacing: 2.5px;
  text-transform: uppercase; margin-bottom: 8px; }
.brow-info h3 { font-family: var(--serif); font-size: 27px; margin-bottom: 12px; }
.brow-story { color: var(--ink-soft); font-size: 16px; line-height: 1.75; margin-bottom: 14px; }
.brow-stones { color: var(--gold); font-family: var(--serif); font-size: 15px; margin-bottom: 20px; }
.brow-foot { display: flex; align-items: center; gap: 22px; }
.brow-foot .price { font-family: var(--serif); font-size: 23px; }
.btn-ghost { color: var(--gold); font-weight: 600; font-size: 15px;
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 2px; }
.btn-ghost:hover { border-color: var(--gold); }
.catalog-more { text-align: center; margin-top: 50px; }
.btn-outline { background: none; border: 1px solid var(--gold); color: var(--gold);
  border-radius: 999px; padding: 13px 32px; font-family: var(--sans); font-size: 15px;
  font-weight: 600; cursor: pointer; transition: .2s; }
.btn-outline:hover { background: var(--gold); color: #fff; }

/* Placeholder místo fotky náramku */
.ph-img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 120% at 30% 22%, #fff, #efe2cf 68%, #e4d0bd);
  display: grid; place-items: center; }
.ph-img svg { width: 58%; max-width: 230px; }
.ph-tag { position: absolute; bottom: 12px; right: 12px; background: rgba(255,253,249,.75);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
  font-size: 12px; color: var(--muted); letter-spacing: .4px; }
.craft-photo .ph-tag { bottom: 10px; right: 10px; }

/* ===================== RECENZE ===================== */
.reviews { width: min(1060px, calc(100% - 40px)); margin: 0 auto; padding: 86px 0 30px; text-align: center; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; text-align: left; }
.review { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; }
.review-stars { color: var(--gold-2); letter-spacing: 3px; margin-bottom: 12px; font-size: 15px; }
.review-text { color: var(--ink-soft); font-style: italic; line-height: 1.7; margin-bottom: 20px; }
.review-author { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.review-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: #fff; font-family: var(--serif); background: linear-gradient(120deg, var(--gold-2), var(--terra)); }

/* ===================== DETAIL NÁRAMKU ===================== */
.detail-view { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0 70px; }
.back { color: var(--muted); font-size: 15px; display: inline-block; margin-bottom: 26px; }
.back:hover { color: var(--gold); }
.detail-offer { display: grid; gap: 18px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.detail-img { position: sticky; top: 112px; align-self: start; }
.detail-img .ph-img, .detail-img > img { width: 100%; min-height: 420px; object-fit: cover; }
.detail-img .product-gallery-main { min-height: 360px; }
.detail-info .eyebrow { color: var(--gold); font-size: 11.5px; letter-spacing: 2.5px;
  text-transform: uppercase; margin-bottom: 8px; }
.detail-info h2 { font-family: var(--serif); font-size: 34px; margin-bottom: 10px; }
.price.big { font-family: var(--serif); font-size: 26px; margin-bottom: 20px; display: block; }
.detail-story { color: var(--ink-soft); font-size: 17px; line-height: 1.8; margin-bottom: 22px; }
.product-editorial { color: var(--ink-soft); font-size: 15.5px; line-height: 1.72; margin: 4px 0 16px; }
.product-specification { margin: 0 0 22px; padding: 14px 16px; border-left: 2px solid var(--gold-2);
  background: rgba(245,236,223,.58); }
.product-specification span { display: block; margin-bottom: 5px; color: var(--gold); font-size: 10.5px;
  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.product-specification p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.product-specification strong { color: var(--ink); font-weight: 700; }
.detail-sub { font-family: var(--serif); font-size: 19px; margin: 22px 0 14px; }
.komu { margin: 20px 0; color: var(--ink-soft); font-size: 15px; }
.detail-offer .main-add-to-cart { max-width: 100%; }
.detail-offer > .addon-bubble { width: 100%; }
.detail-offer > .addon-bubble .addon-bubble-head { align-items: center; }
.detail-offer > .addon-bubble .addon-reco-grid { grid-template-columns: 1fr; }
.detail-offer > .addon-bubble .addon-card { min-height: auto; display: grid;
  grid-template-columns: minmax(210px, .42fr) 1fr auto; align-items: center; gap: 18px; }
.detail-offer > .addon-bubble .addon-card-top { grid-template-columns: 64px 1fr; }
.detail-offer > .addon-bubble .addon-card small { font-size: 14px; }
.detail-offer > .addon-bubble .addon-selected { margin-top: 0; min-width: 190px; align-self: center; }

/* CTA pás v detailu */
.cta-band { position: relative; overflow: hidden; text-align: center; margin: 72px auto 0;
  background: linear-gradient(120deg, #f3e6d3, #efe0cf);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 56px 30px; }
.cta-spark { color: var(--gold); font-size: 24px; display: block; margin-bottom: 10px; }
.cta-band h2 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.2; margin-bottom: 28px; }
.cta-band .btn-big { display: inline-block; margin: 0; }
.detail-about { width: 100%; margin-top: 72px; }
.detail-about .about-inner { grid-template-columns: .72fr 1.18fr .78fr; }

/* FAQ */
.faq { margin: 72px auto 0; text-align: center; }
.faq .section-title { margin-bottom: 28px; }
.faq-list { text-align: left; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2px 22px; transition: box-shadow .25s ease; }
.faq-item[open] { box-shadow: var(--shadow); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 14px; padding: 18px 0; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { color: var(--gold); font-size: 18px; transition: transform .25s ease; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; padding: 0 0 20px; }

@media (max-width: 820px) {
  .craft-inner { grid-template-columns: 1fr; gap: 30px; }
  .brow, .brow.rev .brow-img, .detail-grid { grid-template-columns: 1fr; }
  .detail-img { position: static; }
  .detail-img .ph-img, .detail-img img { min-height: auto; }
  .brow.rev .brow-img { order: 0; }
  .reviews-grid { grid-template-columns: 1fr; }
  .value-grid, .info-grid { grid-template-columns: 1fr 1fr; }
  .about-inner { grid-template-columns: 1fr; padding: 32px; }
  .detail-about .about-inner { grid-template-columns: 1fr; }
  .about-photo { min-height: auto; aspect-ratio: 4 / 3; }
  .seller-list { grid-template-columns: 1fr; }
  .legal-toc { position: static; border-radius: 22px; }
  .detail-offer > .addon-bubble .addon-card { grid-template-columns: minmax(190px, .48fr) 1fr; }
  .detail-offer > .addon-bubble .addon-selected { grid-column: 1 / -1; min-width: 0; }
}
@media (max-width: 480px) {
  .craft-features { grid-template-columns: 1fr 1fr; }
  .craft-photos { grid-template-columns: 1fr 1fr; }
  .value-grid, .info-grid { grid-template-columns: 1fr; }
  .value-card { min-height: auto; }
  .about-inner { padding: 26px; }
  .legal-main { width: min(100% - 28px, 980px); }
  .legal-doc { padding: 24px 20px; }
  .detail-offer > .addon-bubble .addon-card { grid-template-columns: 1fr; }
  .detail-offer > .addon-bubble .addon-card-top { grid-template-columns: 58px 1fr; }
}

/* ===================== POHYB: NÁJEZDY PŘI SCROLLU ===================== */
.js .reveal-up { opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal-up.in { opacity: 1; transform: none; }
.steps-grid .step:nth-child(2) { transition-delay: .12s; }
.steps-grid .step:nth-child(3) { transition-delay: .24s; }
.reviews-grid .review:nth-child(2) { transition-delay: .1s; }
.reviews-grid .review:nth-child(3) { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal-up { opacity: 1 !important; transform: none !important; transition: none; }
  .mandala, .bracelet-svg.spin, .hero-photo svg { animation: none !important; }
}

/* ===================== MANDALY ===================== */
.mandala { color: var(--gold); display: block; width: 100%; height: 100%; }
.mandala-spin { animation: spin 70s linear infinite; transform-origin: center; }
.mandala-spin-slow { animation: spin 140s linear infinite; transform-origin: center; }
.mandala-float { position: absolute; pointer-events: none; z-index: 0; }
.mandala-float .mandala { opacity: .14; }
.mf-1 { top: -50px; right: -70px; width: 300px; height: 300px; }
.mf-2 { top: 40px; left: -110px; width: 340px; height: 340px; }
.mf-3 { bottom: -70px; right: -60px; width: 280px; height: 280px; }

/* Aby dekorace byly ZA obsahem */
.hero-split, .catalog, .reviews { position: relative; overflow: hidden; }
.hero-inner, .catalog-head, .brows, .catalog-more,
.reviews > .eyebrow, .reviews > .section-title, .reviews-grid { position: relative; z-index: 1; }

/* ===================== JAK TO FUNGUJE (redesign) ===================== */
.steps { position: relative; overflow: hidden; }
.steps-bg { position: absolute; top: 50%; left: 50%; width: 660px; height: 660px;
  transform: translate(-50%, -50%); color: var(--gold); opacity: .07; pointer-events: none; z-index: 0; }
.steps .eyebrow, .steps .section-title, .steps-grid { position: relative; z-index: 1; }
.step { position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.step:hover { transform: translateY(-6px); box-shadow: 0 30px 54px -32px rgba(120,80,40,.45); }
.step-badge { position: relative; width: 86px; height: 86px; margin: 0 auto 18px; display: grid; place-items: center; }
.step-badge .mandala-badge { position: absolute; inset: 0; opacity: .5; }
.step-num { position: relative; z-index: 1; margin: 0; width: 46px; height: 46px;
  box-shadow: 0 10px 20px -8px rgba(215,122,82,.7); }

/* Jemné hover/pohyb dalších prvků */
.brow-img { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.brow-img:hover { transform: scale(1.015); }
.review { transition: transform .3s ease, box-shadow .3s ease; }
.review:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -30px rgba(120,80,40,.4); }
.hero-photo svg { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ===================== SLIDER NA PC ===================== */
.wheel { cursor: grab; -webkit-user-select: none; user-select: none; }
.wheel.grabbing { cursor: grabbing; scroll-snap-type: none; }
.wheel-item { cursor: pointer; }

/* ===================== STUDIO / PICKER — prémiové vylepšení ===================== */
.studio { position: relative; overflow: hidden; padding: 30px 28px 34px; }
.studio-mandala { position: absolute; top: -72px; right: -72px; width: 220px; height: 220px;
  color: var(--gold); opacity: .06; pointer-events: none; z-index: 0; }
.studio > .tabs, .studio .panel { position: relative; z-index: 1; }

/* Záložky — bez modrého focusu, plynulé */
.tabs { background: var(--bg-2); padding: 5px; border-radius: 999px; gap: 4px; }
.tab { border-radius: 999px; outline: none; letter-spacing: .2px;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease; }
.tab:focus { outline: none; }
.tab:focus-visible { box-shadow: 0 0 0 2px rgba(192,138,62,.55); }
.tab.active { box-shadow: 0 6px 16px -10px rgba(120,80,40,.45); }

/* Panel — jemný nájezd při přepnutí */
.panel.active { animation: panelIn .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Picker — prémiový rámec */
.picker { padding: 0 10px 8px; }
.picker-label { display: block; height: 14px; line-height: 14px; margin-bottom: 10px;
  font-size: 10.5px; letter-spacing: 2.5px; }
.wheel { width: clamp(84px, 23vw, 118px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.wheel-item.active { letter-spacing: .5px; }

/* Výběrový pás — sklo + zlaté vlasové linky */
.picker-band {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(224,168,90,.10));
  border-top: 1px solid rgba(192,138,62,.55);
  border-bottom: 1px solid rgba(192,138,62,.55);
  border-radius: 12px;
  box-shadow: 0 6px 18px -12px rgba(192,138,62,.5), inset 0 1px 0 rgba(255,255,255,.6);
}

/* Hint ▴ ▾ na PC (signalizuje, že se dá točit) */
.picker::before, .picker::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px;
  border-right: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold);
  opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.picker::before { top: 40px; transform: translateX(-50%) rotate(-135deg); }
.picker::after  { bottom: 16px; transform: translateX(-50%) rotate(45deg); }
.studio:hover .picker::before, .studio:hover .picker::after { opacity: .45; }

/* Pár — decentní tónované bubliny (ona = růžová, on = modrá) */
.couple { flex-direction: column; gap: 16px; align-items: stretch; flex-wrap: nowrap; }
.couple-side { text-align: center; width: 100%;
  padding: 18px 16px 16px; border-radius: var(--radius); border: 1px solid transparent; }
.couple-side h4 { font-size: 16px; letter-spacing: .3px; margin-bottom: 2px; }

.couple-side.her { background: linear-gradient(180deg, #fdf4f6, #fbedf1); border-color: #f1dce2; }
.couple-side.him { background: linear-gradient(180deg, #f1f5fb, #ecf1f9); border-color: #dde5f1; }
.couple-side.her h4 { color: #c27d90; }
.couple-side.him h4 { color: #7c90b6; }

/* jemné sladění výběrového pásu s barvou bubliny */
.couple-side.her .picker-band {
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(200,120,140,.10));
  border-top-color: rgba(190,115,135,.45); border-bottom-color: rgba(190,115,135,.45); }
.couple-side.him .picker-band {
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(120,150,200,.10));
  border-top-color: rgba(110,140,190,.45); border-bottom-color: rgba(110,140,190,.45); }
.couple-side.her .picker::before, .couple-side.her .picker::after { border-color: #c27d90; }
.couple-side.him .picker::before, .couple-side.him .picker::after { border-color: #7c90b6; }

/* ===================== PATIČKA ===================== */
.footer { margin-top: 80px; background: var(--ink); color: #e9e1d6; }
.footer-inner { width: min(1080px, calc(100% - 48px)); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 36px; }
.footer-brand .brand-name { color: #fff; font-size: 24px; }
.footer-brand p { color: #b7ac9d; margin: 14px 0 16px; font-size: 14.5px; max-width: 320px; }
.footer-brand .eyebrow-pill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--gold-2); }
.footer-col h5 { font-family: var(--serif); font-size: 16px; margin-bottom: 14px; color: #fff; }
.footer-col a { display: block; color: #b7ac9d; font-size: 14.5px; margin-bottom: 9px; transition: color .2s; }
.footer-col a:hover { color: var(--gold-2); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1);
  width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 20px 0;
  display: flex; justify-content: space-between; color: #8c8273; font-size: 13px; }

/* ===================== RESPONZIVITA ===================== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; }
  .hero-left { max-width: none; text-align: center; margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .features { justify-content: center; }
  .hero-photo { display: flex; justify-content: center; }
  .hero-photo svg { max-width: 380px; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .steps-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}
@media (max-width: 480px) {
  .tab { font-size: 12.5px; padding: 10px 8px; }
  .features { gap: 14px; }
  .feature { width: 96px; }
  .nav { padding: 10px 10px 10px 16px; }
  .nav .btn-primary { display: none; }
  .nav-actions { gap: 6px; }
  .brand-logo-img { height: 42px; }
  .brand-name { font-size: 19px; }
}
@media (max-width: 480px) {
  .wheel { width: 92px; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ===================== ZÁKAZNICKÝ ÚČET ===================== */
.portal-page, .admin-page { background:
  radial-gradient(900px 520px at 50% -8%, rgba(224, 168, 90, 0.2), transparent 60%),
  linear-gradient(180deg, var(--bg), var(--bg-2)); }
.portal-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 54px 0 40px; }
.portal-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center; margin-bottom: 34px; }
.portal-hero h1 { font-family: var(--serif); font-size: clamp(34px, 4vw, 52px); line-height: 1.1; margin: 8px 0 16px; }
.portal-hero p { color: var(--ink-soft); font-size: 17px; line-height: 1.8; max-width: 650px; }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 26px; display: grid; gap: 13px; }
.login-kicker { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.login-card label, .profile-form label, .settings-form label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.login-card input, .profile-form input, .profile-form textarea, .settings-form input, .settings-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 13px; background: #fff;
  padding: 12px 14px; font: inherit; color: var(--ink); resize: vertical; }
.account-message { border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.55; background: rgba(255,255,255,.55); border: 1px solid var(--line); }
.account-message.muted { color: var(--muted); }
.account-message.success { color: #58723d; background: rgba(109,139,77,.12); }
.account-message.error { color: #b65d35; background: rgba(215,122,82,.12); }
.google-login { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px;
  background: #fff; color: var(--ink); font-weight: 600; cursor: pointer; transition: .2s; }
.google-login:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.google-login span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-2); color: var(--terra); font-family: var(--serif); font-weight: 700; }
.google-login.wide, .login-divider.wide { grid-column: 1 / -1; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.login-links { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.login-links a { color: var(--gold); }
.account-grid { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.account-sidebar { position: sticky; top: 94px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 24px 60px -44px rgba(90,60,25,.45); }
.account-person, .admin-user { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line); }
.account-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #fff; font-family: var(--serif); font-size: 20px; background: linear-gradient(120deg, var(--gold-2), var(--terra)); }
.account-person strong, .admin-user strong { display: block; }
.account-person small, .admin-user small { color: var(--muted); }
.account-sidebar a { display: block; padding: 10px 12px; border-radius: 12px; color: var(--ink-soft); font-size: 14px; }
.account-sidebar a.active, .account-sidebar a:hover { background: var(--bg-2); color: var(--ink); }
.account-content { display: grid; gap: 18px; }
.dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-card, .account-panel, .admin-panel { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 24px 60px -44px rgba(90,60,25,.45); }
.dash-card span { color: var(--muted); font-size: 13px; }
.dash-card strong { display: block; font-family: var(--serif); font-size: 28px; margin: 6px 0; }
.dash-card p { color: var(--ink-soft); font-size: 14px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.panel-head h2 { font-family: var(--serif); font-size: 28px; line-height: 1.15; }
.owned-jewels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.owned-jewel-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px;
  background: rgba(255,255,255,.62); display: grid; box-shadow: 0 18px 42px -36px rgba(90,60,25,.45); }
.owned-jewel-visual { aspect-ratio: 4 / 3; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 58%, rgba(224,168,90,.18), transparent 44%),
    linear-gradient(145deg, #fffdf8, #f3e8d8); }
.owned-jewel-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.owned-jewel-visual svg { width: min(70%, 190px); height: auto; }
.owned-jewel-body { padding: 16px; display: grid; gap: 9px; align-content: start; }
.owned-jewel-body span { color: var(--muted); font-size: 12.5px; }
.owned-jewel-body h3 { font-family: var(--serif); font-size: 20px; line-height: 1.18; color: var(--ink); }
.owned-jewel-body p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.owned-jewel-body button, .owned-jewel-body a { justify-self: start; border: 1px solid var(--gold);
  border-radius: 999px; padding: 10px 14px; background: transparent; color: var(--gold);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: .2s; }
.owned-jewel-body button:hover, .owned-jewel-body a:hover { background: rgba(199,130,47,.1); transform: translateY(-1px); }
.owned-empty { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 20px;
  background: rgba(255,255,255,.5); padding: 34px 24px; text-align: center; display: grid;
  justify-items: center; gap: 12px; }
.owned-empty h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; color: var(--ink); }
.owned-empty p { max-width: 540px; color: var(--ink-soft); line-height: 1.7; }
.owned-empty .btn-primary { margin-top: 4px; }
.order-list { display: grid; gap: 10px; }
.order-card { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: 16px; padding: 15px; background: rgba(255,255,255,.55); }
.order-details { display: block; padding: 0; overflow: hidden; }
.order-summary { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center;
  padding: 15px; cursor: pointer; list-style: none; }
.order-summary::-webkit-details-marker { display: none; }
.order-toggle { color: var(--gold); font-size: 13px; font-weight: 600; white-space: nowrap; }
.order-details[open] .order-toggle::after { content: " ↑"; }
.order-details:not([open]) .order-toggle::after { content: " ↓"; }
.order-detail-body { border-top: 1px solid var(--line); padding: 18px; display: grid;
  grid-template-columns: 160px 1fr; gap: 20px; align-items: start; background: rgba(255,253,249,.65); }
.order-detail-body .qr-card { width: 100%; }
.payment-lines.wide { grid-column: 1 / -1; }
.order-card strong, .order-card span { display: block; }
.order-card span { color: var(--muted); font-size: 13px; margin-top: 2px; }
.order-status, .badge { border-radius: 999px; padding: 7px 11px; font-size: 12.5px; white-space: nowrap; }
.order-status.making, .badge.making { background: rgba(224,168,90,.18); color: #9c6b20; }
.order-status.waiting { background: rgba(215,122,82,.14); color: #b65d35; }
.order-status.sent { background: rgba(109,139,77,.16); color: #58723d; }
.badge.wait { background: rgba(215,122,82,.15); color: var(--terra); }
.badge.paid { background: rgba(109,139,77,.16); color: #58723d; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.btn-outline.compact { padding: 11px 18px; font-size: 14px; }
.order-price { font-family: var(--serif); font-size: 20px; }
.payment-grid { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; }
.qr-card { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 22px;
  background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 22px; position: relative; }
.qr-card span { border-radius: 7px; background: var(--ink); opacity: .88; }
.qr-card span:nth-child(2n) { background: var(--gold); opacity: .72; }
.qr-card span:nth-child(3n) { opacity: .18; }
.qr-card small { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line); color: var(--gold); font-family: var(--serif); font-size: 19px; }
.payment-lines { display: grid; gap: 10px; }
.payment-lines div:not(.panel-actions) { display: flex; justify-content: space-between; gap: 16px;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(255,255,255,.55); }
.payment-lines span { color: var(--muted); font-size: 13px; }
.payment-lines strong { color: var(--ink); }
.payment-lines p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.reading-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.reading-card { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: rgba(255,255,255,.55); }
.reading-card h3 { font-family: var(--serif); font-size: 21px; margin: 12px 0 8px; }
.reading-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; margin-bottom: 12px; }
.reading-card a { color: var(--gold); font-weight: 600; font-size: 14px; }
.reading-delete { position: absolute; top: 16px; right: 16px; border: none; background: none;
  color: var(--muted); cursor: pointer; font-size: 13px; }
.reading-delete:hover { color: var(--terra); }
.reading-name-row { display: grid; grid-template-columns: 1fr 42px; gap: 8px; align-items: end; margin: 10px 0 12px; }
.reading-name { display: grid; gap: 6px; color: var(--muted); font-size: 12.5px; margin: 10px 0 12px; }
.reading-name-row .reading-name { margin: 0; }
.reading-name input { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 10px 12px; font: inherit; color: var(--ink); }
.reading-save-icon { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--gold); cursor: pointer;
  font-size: 18px; font-weight: 700; }
.reading-save-icon:hover { border-color: var(--gold); background: var(--bg-2); }
.reading-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reading-actions button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.reading-actions .reading-open { color: var(--gold); font-weight: 700; font-size: 15px; padding: 0; }
.reading-actions .reading-open:hover { color: var(--terra); }
.profile-form, .settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-form .wide, .settings-form .wide { grid-column: 1 / -1; }
.check-row { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 10px !important;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.55); color: var(--ink-soft) !important; }
.check-row input { width: auto !important; }
.gift-box { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: rgba(255,255,255,.55); }
.gift-box p { color: var(--ink-soft); margin: 8px 0; line-height: 1.7; }
.gift-box span { color: var(--gold); font-size: 13px; }
.gift-box a { color: var(--gold); font-weight: 600; font-size: 14px; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.support-strip { margin-top: 22px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; display: flex; justify-content: space-between;
  align-items: center; gap: 22px; box-shadow: 0 24px 60px -44px rgba(90,60,25,.45); }
.support-strip h2 { font-family: var(--serif); font-size: 26px; margin: 4px 0 6px; }
.support-strip p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.7; max-width: 680px; }

/* ===================== ADMIN ===================== */
.admin-shell { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; background: var(--ink); color: #f4eadf;
  padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.admin-brand { color: #fff; }
.admin-sidebar nav { display: grid; gap: 6px; }
.admin-sidebar nav a { color: #cfc3b4; padding: 11px 12px; border-radius: 12px; font-size: 14.5px; }
.admin-sidebar nav a.active, .admin-sidebar nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.admin-user { margin: auto 0 0; border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 12px; background: rgba(255,255,255,.06); min-width: 0; }
.admin-user .account-avatar { width: 38px; height: 38px; flex: 0 0 38px; font-size: 16px; }
.admin-user div { min-width: 0; }
.admin-user strong, .admin-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user strong { color: #fff; }
.admin-user small { color: #cfc3b4; }
.admin-main { padding: 30px; display: grid; gap: 18px; align-content: start; }
.admin-view { display: none; }
.admin-view.is-active { display: grid; gap: 18px; align-content: start; }
.admin-view > .admin-panel, .admin-view > .admin-stats, .admin-view > .admin-split { align-self: start; }
.admin-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.admin-top h1 { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; margin-top: 6px; }
.admin-actions { display: flex; gap: 10px; align-items: center; }
.admin-message { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.admin-message.success { color: #58723d; }
.admin-message.error { color: #b65d35; }
.admin-login-panel { max-width: 720px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.admin-stats article { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.admin-stats span { color: var(--muted); font-size: 13px; }
.admin-stats strong { display: block; font-family: var(--serif); font-size: 30px; margin: 6px 0 4px; }
.admin-stats small { color: var(--ink-soft); }
.status-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.status-tabs button, .workflow button, .product-admin-grid button {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: #fff; color: var(--ink-soft); cursor: pointer; }
.status-tabs button.active, .status-tabs button:hover, .workflow button:hover { border-color: var(--gold); color: var(--gold); }
.admin-search input { width: min(360px, 100%); border: 1px solid var(--line); border-radius: 999px;
  background: #fff; padding: 12px 16px; font: inherit; color: var(--ink); }
.admin-orders-panel { display: grid; gap: 14px; }
.admin-crm-layout { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr); gap: 16px; align-items: start; }
.admin-order-list-wrap { display: grid; gap: 8px; }
.admin-table { display: grid; gap: 8px; }
.admin-table-body { display: grid; gap: 8px; }
.admin-table-body.compact { max-height: calc(100vh - 260px); overflow: auto; padding-right: 4px; }
.admin-empty { color: var(--muted); padding: 16px 14px; }
.admin-table .table-head, .admin-table article { display: grid; grid-template-columns: 1.35fr 1fr .8fr .8fr .6fr;
  gap: 12px; align-items: center; }
.admin-mini-head { display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 0 12px; }
.admin-table .table-head { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; padding: 0 14px; }
.admin-table article { background: rgba(255,255,255,.58); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.admin-table article { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.admin-table article:hover, .admin-table article.active { border-color: rgba(192,138,62,.75); box-shadow: 0 16px 34px -28px rgba(90,60,25,.55); }
.admin-order-row.compact { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  background: rgba(255,255,255,.58); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.admin-order-row.compact:hover, .admin-order-row.compact.active { border-color: rgba(192,138,62,.75);
  box-shadow: 0 14px 30px -26px rgba(90,60,25,.55); transform: translateY(-1px); }
.admin-table strong, .admin-table small { display: block; }
.admin-table small { color: var(--muted); margin-top: 3px; }
.admin-order-editor { position: sticky; top: 18px; background: rgba(255,253,249,.8); border: 1px solid var(--line);
  border-radius: 20px; padding: 18px; box-shadow: 0 22px 50px -42px rgba(90,60,25,.45); }
.compact-head { margin-bottom: 10px; }
.admin-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.detail-lines { display: grid; gap: 10px; margin: 18px 0; }
.detail-lines.compact { margin: 10px 0 14px; gap: 8px; }
.detail-lines div { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.55); }
.detail-lines span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.admin-meta-form { display: grid; gap: 10px; margin: 14px 0 16px; }
.admin-meta-form.rich { grid-template-columns: 1fr 1fr; }
.admin-meta-form .wide { grid-column: 1 / -1; }
.admin-meta-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.admin-meta-form input, .admin-meta-form textarea { width: 100%; border: 1px solid var(--line);
  border-radius: 13px; background: #fff; padding: 11px 12px; font: inherit; color: var(--ink); resize: vertical; }
.workflow { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-timeline { margin-top: 18px; }
.timeline-list { display: grid; gap: 8px; margin-top: 10px; }
.timeline-list article { border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  background: rgba(255,255,255,.55); }
.timeline-list strong, .timeline-list span { display: block; }
.timeline-list span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.timeline-list p { color: var(--ink-soft); font-size: 13px; line-height: 1.55; margin-top: 7px; }
.production-list { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.production-list.compact { margin-top: 0; }
.production-list li, .alert-list article { border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: rgba(255,255,255,.55); cursor: pointer; }
.production-card { min-height: 0; }
.production-list li span, .alert-list span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.mini-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mini-checks em { font-style: normal; border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; color: var(--muted); font-size: 11px; background: rgba(255,255,255,.58); }
.product-admin-grid, .stone-admin-grid, .customer-list { display: grid; gap: 10px; }
.product-admin-grid article, .customer-list article { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.55); }
.customer-list article { cursor: pointer; }
.customer-list article.active { border-color: rgba(192,138,62,.75); box-shadow: 0 16px 34px -30px rgba(90,60,25,.55); }
.product-admin-grid span, .customer-list span { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.admin-customer-layout { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr); gap: 16px; align-items: start; }
.customer-detail-card { border: 1px solid var(--line); border-radius: 20px; padding: 20px; background: rgba(255,253,249,.78); }
.customer-detail-card h3 { font-family: var(--serif); font-size: 28px; margin: 4px 0 12px; }
.customer-detail-card h4 { margin: 16px 0 8px; font-family: var(--serif); font-size: 18px; }
.customer-detail-card p { color: var(--ink-soft); line-height: 1.6; }
.customer-order-history { display: grid; gap: 8px; }
.customer-order-history button { text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 10px 12px; color: var(--ink-soft); cursor: pointer; }
.stone-admin-grid { grid-template-columns: repeat(3, 1fr); }
.stone-admin-grid article { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 16px;
  padding: 15px; background: rgba(255,255,255,.55); }
.stone-admin-grid p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; margin-top: 4px; }

@media (max-width: 980px) {
  .portal-hero, .account-grid, .admin-shell, .admin-split, .admin-crm-layout, .admin-customer-layout { grid-template-columns: 1fr; }
  .account-sidebar, .admin-sidebar, .admin-order-editor { position: static; height: auto; }
  .admin-sidebar { border-radius: 0 0 24px 24px; }
  .admin-stats, .dash-cards, .owned-jewels, .stone-admin-grid { grid-template-columns: 1fr 1fr; }
  .admin-table { overflow-x: auto; }
  .admin-table .table-head, .admin-table article { min-width: 760px; }
}
@media (max-width: 620px) {
  .portal-shell, .admin-main { width: min(100% - 28px, 1160px); padding-left: 0; padding-right: 0; }
  .dash-cards, .owned-jewels, .reading-grid, .payment-grid, .help-grid, .profile-form, .settings-form, .admin-stats, .stone-admin-grid { grid-template-columns: 1fr; }
  .order-card, .order-summary, .order-detail-body, .product-admin-grid article, .customer-list article, .admin-meta-form.rich, .admin-order-row.compact, .admin-mini-head { grid-template-columns: 1fr; }
  .panel-head, .admin-top { flex-direction: column; align-items: flex-start; }
  .admin-actions { width: 100%; flex-wrap: wrap; }
  .qr-card { width: min(190px, 100%); }
  .payment-lines div:not(.panel-actions) { display: grid; gap: 4px; }
  .support-strip { flex-direction: column; align-items: flex-start; }
}