/* ============================================================
 * aaryans-subkategorie.css  v1.1  (2026-07-13)
 *
 * Kategorie redesign — část 1/2: podkategorie + perex.
 * Podle UX auditu (UX analýza claude.pdf str. 3+4) a mockupu
 * aaryans-mockups/kategorie-redesign-mockup.html.
 *
 * - Podkategorie jako dlaždice s fotkou (styl Alza):
 *     desktop >=768: 4 v řadě pod H1
 *     mobil <=767: 2 vedle sebe, defaultně SBALENÉ za pill tlačítko
 *     "Podkategorie" (tlačítko vkládá aaryans-subkategorie.js)
 * - Perex (.category-perex) vizuálně přesunutý POD výpis produktů
 *   (fyzický přesun uzlu dělá JS; tady jen order + vzhled boxu)
 *
 * PÁRUJE SE s: aaryans-subkategorie.js (stejná verze!)
 * NEEDITUJE žádný stávající soubor; overriduje agenturní pravidla
 * vyšší specificitou (viz komentáře u pravidel).
 *
 * Upload: /user/documents/upload/CSSkodyCLAUDE/aaryans-subkategorie.css
 *
 * Changelog:
 *   v1.1 — skryt Shoptet divider <li class="divider"> mezi podkategoriemi
 *          a odkazy-v-menu (v gridu dělal "šedou čáru", viděno na
 *          /prosteradla/); párové JS v1.1 doplňuje fotky přes IMG_MAP
 *   v1.0 — první produkční verze (z preview-ALL.js, otestováno živě
 *          na /povleceni/, /povleceni-140x200/, /osusky-a-rucniky/)
 * ============================================================ */

/* ---------- dlaždice podkategorií (oba breakpointy) ---------- */
.type-category .subcategories.with-image {
  display: grid !important;
  gap: 10px;
  padding: 0 !important;
  margin: 0 0 16px !important;
}
@media (min-width: 768px) {
  .type-category .subcategories.with-image { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .type-category .subcategories.with-image { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
.type-category .subcategories.with-image > li {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
/* Shoptet vkládá prázdný <li class="divider"> mezi podkategorie a odkazy
   z menu (parametrické kategorie) — v gridu dělá "šedou čáru" → pryč */
.type-category .subcategories.with-image > li.divider {
  display: none !important;
}
/* agentura styluje li a jako modrý pill (MASTER_STYLES ~1049-1069) — přebíjíme */
.type-category .subcategories.with-image li a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: #fff !important;
  border: 1px solid #D9E7EF !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  min-height: 64px;
  text-align: left !important;
  text-decoration: none !important;
}
.type-category .subcategories.with-image li a:hover {
  border-color: #0076A0 !important; /* --color-dark-blue */
  box-shadow: 0 4px 14px rgba(0, 118, 160, .12);
  background: #fff !important;
}
.type-category .subcategories.with-image li a::after,
.type-category .subcategories.with-image li a::before {
  display: none !important;
  content: none !important;
}
/* fotku agentura skrývá (display:none na .image) — odkrýváme */
.type-category .subcategories.with-image li a .image {
  display: block !important;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 10px;
}
/* POZOR: agentura má na těchto img max-height:30px — max-height přebíjí
   height i inline important, proto max-height:none je NUTNÉ */
.type-category .subcategories.with-image li a .image img {
  width: 44px !important;
  height: 44px !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}
/* translateY(-2px) = optická korekce: Bahnschrift kreslí glyfy nízko
   v řádkovém boxu — bez posunu text vypadá "na jih" od fotky */
.type-category .subcategories.with-image li a .text {
  font-size: 13.5px;
  line-height: 1.25;
  color: #0076A0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translateY(-2px);
}

/* ---------- mobil: menší dlaždice + sbalený stav ---------- */
@media (max-width: 767px) {
  .type-category .subcategories.with-image li a {
    min-height: 56px;
    padding: 8px 10px !important;
    gap: 9px;
  }
  .type-category .subcategories.with-image li a .image,
  .type-category .subcategories.with-image li a .image img {
    width: 38px !important;
    height: 38px !important;
  }
  .type-category .subcategories.with-image li a .text { font-size: 13px; }
  /* DEFAULT na mobilu = sbaleno; třídu přidává JS při initu */
  .type-category .subcategories.with-image.aar-subcat-collapsed { display: none !important; }
}

/* ---------- pill tlačítko "Podkategorie" (jen mobil) ---------- */
#aar-subcat-btn { display: none; }
@media (max-width: 767px) {
  #aar-subcat-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 16px;
    border: 1.5px solid #0076A0;
    border-radius: 28px;
    background: #fff;
    font-size: 15px;
    color: #0076A0;
    cursor: pointer;
    font-family: inherit;
  }
  #aar-subcat-btn .aar-sub-lbl { flex: 1; text-align: left; transform: translateY(-1px); }
  #aar-subcat-btn svg { flex: 0 0 auto; }
  #aar-subcat-btn .aar-sub-chev { transition: transform .2s; }
  #aar-subcat-btn[aria-expanded="true"] .aar-sub-chev { transform: rotate(180deg); }
}

/* ---------- perex pod výpisem ---------- */
/* #content je flex column a agenturní CSS dává perexu order:-1 — i po
   fyzickém přesunu v DOM by se vykreslil NAHOŘE. order:99 to přebíjí. */
.type-category #content > .category-perex {
  order: 99 !important;
  margin: 18px 0 26px !important;
  padding: 16px 20px;
  background: #F5FAFC;
  border-radius: 12px;
}