/* ════════════════════════════════════════════════════════════════════════
   15-o-kamenech.css — ikona „O kamenech" v hlavičce + rozbalovací nabídka

   Ikona sedí v .actions jako první (O kamenech / Účet / Oblíbené / Košík),
   vzhled tlačítka dědí z .icon-btn v 03-header.css. Panel se otevírá
   kliknutím, na desktopu i najetím myší — viz assets/js/o-kamenech.js.

   Vizuál panelu drží stejné tokeny jako mega-menu v 04-nav.css:
   bílé pozadí, --line, --shadow, --radius.
   ──────────────────────────────────────────────────────────────────────── */

/* Wrapper = containing block pro absolutní panel */
.mk-about{position:relative;}

/* Tlačítko: jen shodí defaulty <button>, ostatní bere z .icon-btn */
.mk-about-btn{
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
}
.mk-about.is-open .mk-about-btn{
  background:var(--pink-50);
  color:var(--pink);
}

/* Panel — z-index nad suggest panelem vyhledávání (60 v 03-header.css);
   nad sticky nav (--z-nav 100) je automaticky, protože celá .site-header
   má --z-header 110. */
.mk-about-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  z-index:70;
  min-width:230px;
  padding:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:left;
}
.mk-about-panel[hidden]{display:none;}

/* Hover „bridge" přes 8px mezeru pod ikonou (stejný trik jako mega-menu),
   ať se panel nezavře při přejezdu myší. Zavřený panel je display:none,
   takže bridge nechytá myš na prázdném místě. */
.mk-about-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}

.mk-about-panel a{
  display:block;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
}
.mk-about-panel a:first-child{font-weight:700;}
.mk-about-panel a:hover,
.mk-about-panel a:focus-visible{
  background:var(--pink-50);
  color:var(--pink);
}

/* Mobil: wrapper je static, panel se zarovná k pravému okraji hlavičky
   (ikona je v .actions nejvíc vlevo, takže od ní by panel vylezl mimo
   obrazovku). Containing block je .site-header. */
@media (max-width:700px){
  .mk-about{position:static;}
  .mk-about-panel{
    left:auto;
    right:12px;
    transform:none;
    min-width:240px;
  }
  .mk-about-panel a{font-size:16px;padding:12px 14px;}
}