/* ════════════════════════════════════════════════════════════════════════
   06-cards.css — Karty: produkt, kategorie, podkategorie, recenze, blog

   Zdroj pravdy: navrh-novy/index.html
   Aktuálně: .cat-grid + .cat-card (homepage 3 sloupce s WC kategoriemi)

   TODO: .product, .subcat-tile, .review-card, .blog-card v dalších fázích.
   ──────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════
   SECTION .categories — Divi Section override

   Pravidla DRŽÍME jen na úrovni .et_pb_section a .et_pb_row.
   Na úrovni .et_pb_column / .et_pb_module NEZASAHUJEME — vnořené
   komponenty (.section-head, .cat-grid Code modul) si řídí samy
   přes svoje vlastní selektory.
   ══════════════════════════════════════════════════════════════════════ */
.categories,
.categories.et_pb_section{
  background:transparent !important;
  padding:50px 0 !important;
  /* Sundat Divi default gap mezi Rows v sekci */
  gap:0 !important;
  column-gap:0 !important;
  row-gap:0 !important;
}

/* Row uvnitř — full šíře (container řídí .container width 92%) */
.categories > .et_pb_row,
.categories > .et_pb_row_inner{
  max-width:var(--container) !important;
  width:92% !important;
  padding:0 !important;
  margin:0 auto !important;
}

/* Explicit mezera mezi section-head Row a cat-grid Row */
.categories > .et_pb_row + .et_pb_row{
  margin-top:38px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   CAT GRID — 3 sloupce
   ══════════════════════════════════════════════════════════════════════ */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}


/* ════════════════════════════════════════════════════════════════════════
   CAT CARD — jednotlivá karta
   ══════════════════════════════════════════════════════════════════════ */
.cat-card{
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  color:inherit;
}
.cat-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}


/* ─── Obrázek karty (240px, tag overlay vlevo nahoře) ─────────────────── */
.cat-card-img{
  height:240px;
  position:relative;
  overflow:hidden;
}
.cat-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.cat-card:hover .cat-card-img img{
  transform:scale(1.05);
}

/* Tag (badge) v obrázku — bílý pill s pink textem */
.cat-card-img .tag{
  position:absolute;
  top:14px;
  left:14px;
  background:#fff;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  color:var(--pink);
  text-transform:uppercase;
  letter-spacing:.06em;
  z-index:2;
}

/* Fallback placeholder (když WC kategorie nemá obrázek) */
.cat-card-img-placeholder{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--bg-warm-light) 0%, var(--yellow-cta) 100%);
}


/* ─── Body karty (padding, nadpis, popis, podkategorie, more link) ────── */
.cat-card-body{
  padding:24px 24px 28px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.cat-card h3{
  font-size:var(--fs-h3);
  font-weight:800;
  margin:0 0 6px;
  letter-spacing:-.01em;
  color:var(--ink);
}
.cat-card .desc{
  font-size:var(--fs-small);
  color:var(--muted);
  margin:0 0 18px;
  line-height:1.5;
}


/* Seznam podkategorií — žlutá tlačítka */
.cat-card ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 20px;
  padding:0;
}
.cat-card ul li{
  list-style:none;
  margin:0;
}
.cat-card ul a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 14px;
  border-radius:10px;
  background:var(--bg-warm);
  font-size:clamp(13px, 1vw, 14px);
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  transition:background .2s ease, color .2s ease, padding-left .2s ease;
}
.cat-card ul a:hover{
  background:#e8c635;
  color:var(--ink);
  padding-left:18px;
}
.cat-card ul a .arrow{
  width:14px;
  height:14px;
  opacity:.4;
  transition:opacity .2s ease, transform .2s ease;
  flex-shrink:0;
}
.cat-card ul a:hover .arrow{
  opacity:1;
  transform:translateX(3px);
}


/* "Zobrazit všechny kategorie" link dole */
.cat-card .more{
  text-align:left;
  color:var(--pink);
  font-weight:700;
  font-size:var(--fs-small);
  padding-top:10px;
  border-top:1px dashed var(--line);
  text-decoration:none;
  transition:color .15s ease;
  margin-top:auto;  /* zatlačí dolů, ať jsou karty stejně vysoké */
  display:block;
}
.cat-card .more:hover{
  color:var(--pink-dark);
}


/* ════════════════════════════════════════════════════════════════════════
   PRODUCTS GRID — 4-sloupcová mřížka produktů (homepage, kategorie, related)

   Karta .product se generuje WC content-product.php override
   (viz woocommerce/content-product.php).
   ══════════════════════════════════════════════════════════════════════ */

.products-grid,
ul.products{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  list-style:none;
  margin:0;
  padding:0;
}
.products-grid li,
ul.products li{
  list-style:none;
  margin:0;
}

/* WC clearfix (.woocommerce ul.products::before/::after {display:table})
   se v gridu stává prázdnou PRVNÍ buňkou → prázdné místo na začátku
   výpisu [products] (Nejprodávanější, Doporučené). Zabít. (quirk #23) */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after{
  content:none !important;
  display:none !important;
}

/* [produkt_box] — produktové boxy vložené v obsahu článku / atlasu.
   Obsah je užší než archiv → sloupce podle dostupné šířky, ne fixní 4. */
.produkt-box{margin:28px 0;}
.produkt-box .products-grid{
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:18px;
}


/* ════════════════════════════════════════════════════════════════════════
   PRODUCT CARD — jednotlivá karta produktu
   ══════════════════════════════════════════════════════════════════════ */

article.product{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line-soft);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative;
  display:flex;
  flex-direction:column;
}
article.product:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:transparent;
}

/* ─── FIX: Divi Theme Builder na detailu produktu (single-product) dává
   wrapperům .et_builder_inner_content (header/body/footer) i WC class
   .product → karta-styly výše (border, radius, overflow:hidden, hover
   lift) se aplikovaly na celý web. Tady je pro tyto wrappery resetujeme.
   Pozn.: overflow:hidden + transform na wrapperu navíc rozbíjí sticky
   header. ─── */
.et_builder_inner_content.product,
.et_builder_inner_content.product:hover{
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  transform:none;
  transition:none;
  display:block;
}


/* ─── Obrázek produktu (1:1, badge vlevo, wishlist srdce vpravo) ──────── */
.product-img{
  aspect-ratio:1;
  background:#fff;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
article.product:hover .product-img img{
  transform:scale(1.06);
}

/* Link wrapper kolem obrázku (kvůli klikatelnosti) */
.product-img a{
  display:block;
  width:100%;
  height:100%;
  position:relative;
}


/* ─── Badge (sleva / novinka / bestseller) ───────────────────────────── */
.product-badge{
  position:absolute;
  top:12px;
  left:12px;
  background:var(--pink);
  color:#fff;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  font-size:clamp(10px, .9vw, 11px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  z-index:2;
  pointer-events:none;
}
.product-badge.new{background:var(--ink);}
.product-badge.best{background:var(--success);}


/* ─── Wishlist srdce (vpravo nahoře) ──────────────────────────────────── */
.product-wishlist{
  position:absolute;
  top:12px;
  right:12px;
  background:#fff;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  box-shadow:var(--shadow-sm);
  transition:color .2s ease, transform .2s ease, background .2s ease;
  border:0;
  cursor:pointer;
  padding:0;
  z-index:3;
}
.product-wishlist:hover{
  color:var(--pink);
  transform:scale(1.1);
}
.product-wishlist svg{
  width:16px;
  height:16px;
  transition:fill .2s ease;
}
/* Aktivní stav (klient přidal do oblíbených) */
.product-wishlist.is-active{
  color:var(--pink);
  background:#fff;
}
.product-wishlist.is-active svg{
  fill:var(--pink);
}


/* ─── Body karty (kategorie, název, hvězdy, cena, košík tlačítko) ─────── */
.product-body{
  padding:18px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.product-cat{
  font-size:clamp(11px, .9vw, 11.5px);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  margin-bottom:6px;
  line-height:1.3;
}
article.product h4,
article.product .woocommerce-loop-product__title{
  font-size:clamp(14px, 1.1vw, 15.5px);
  font-weight:700;
  margin:0 0 8px;
  line-height:1.3;
  color:var(--ink);
}
article.product .stars{
  display:flex;
  gap:1px;
  color:var(--star);
  font-size:clamp(12px, 1vw, 13px);
  margin-bottom:10px;
}


/* ─── Cena (WC vykresluje jinak než mockup — sjednocujeme) ──────────── */
article.product .price{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0 0 4px;
  flex-wrap:wrap;
  font-size:clamp(16px, 1.4vw, 18px);
  font-weight:800;
  color:var(--ink);
  line-height:1.2;
}
/* Hlavní cena (i v ranged) — WC vykresluje přes .woocommerce-Price-amount */
article.product .price .woocommerce-Price-amount,
article.product .price ins .woocommerce-Price-amount,
article.product .price > .woocommerce-Price-amount{
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  text-decoration:none;
  background:transparent;
}
/* Range separator („–") */
article.product .price > span[aria-hidden="true"]:not(.woocommerce-Price-amount){
  font-size:inherit;
  color:var(--muted);
  font-weight:500;
}
/* Měnový symbol */
article.product .price .woocommerce-Price-currencySymbol{
  font-size:inherit;
  font-weight:inherit;
}
/* Sleva — přeškrtnutá původní cena */
article.product .price del,
article.product .price s{
  font-size:clamp(12px, 1.05vw, 13.5px);
  font-weight:500;
  color:var(--muted);
  text-decoration:line-through;
}
article.product .price del .woocommerce-Price-amount,
article.product .price s .woocommerce-Price-amount{
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
}
article.product .price ins{
  text-decoration:none;
  background:transparent;
}
/* Skrýt accessibility text „Původní cena byla…" */
article.product .price .screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}


/* ─── Tlačítko „Do košíku" — pink-soft varianta ───────────────────────
   WC vykresluje <a class="button product_type_*"> nebo <button>. Cílíme
   na všechny varianty WC produktu (simple, variable, external, grouped). */
.product-cart,
article.product a.button,
article.product .button.add_to_cart_button,
article.product .button.product_type_simple,
article.product .button.product_type_variable,
article.product .button.product_type_external,
article.product .button.product_type_grouped,
article.product .button.product_type_subscription{
  margin-top:14px !important;
  width:100% !important;
  padding:11px 14px !important;
  height:auto !important;
  min-height:0 !important;
  max-width:100% !important;
  background:var(--pink-50) !important;
  color:var(--pink) !important;
  border-radius:10px !important;
  font-weight:700 !important;
  font-size:clamp(12.5px, 1vw, 13.5px) !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  transition:background .2s ease, color .2s ease !important;
  border:0 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  font-family:inherit !important;
  line-height:1.2 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}
.product-cart:hover,
article.product a.button:hover,
article.product .button.add_to_cart_button:hover,
article.product .button.product_type_simple:hover,
article.product .button.product_type_variable:hover,
article.product .button.product_type_external:hover,
article.product .button.product_type_grouped:hover{
  background:var(--pink) !important;
  color:#fff !important;
  /* Zamknout padding — obecné .woocommerce a.button:hover v 08-woo.css
     má vyšší specificitu (0,3,1) a jinak na hoveru přepíše 11px 14px
     na 13px 26px → tlačítko poskočí o 4 px na výšku. */
  padding:11px 14px !important;
}

/* Vypnout Divi default ::after šipku u WC tlačítka */
article.product a.button::after,
article.product .button.add_to_cart_button::after,
article.product .button.product_type_simple::after,
article.product .button.product_type_variable::after,
article.product .button.product_type_external::after,
article.product .button.product_type_grouped::after{
  display:none !important;
  content:'' !important;
}

/* SVG ikona košíku v tlačítku — striktní 14×14 */
.product-cart svg,
article.product .button svg,
article.product a.button svg,
article.product .button .cart-icon,
article.product a.button .cart-icon{
  width:14px !important;
  height:14px !important;
  max-width:14px !important;
  max-height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  flex-shrink:0 !important;
  flex-grow:0 !important;
  display:inline-block !important;
  vertical-align:middle !important;
  align-self:center !important;
  transform:none !important;
  font-size:0 !important;
  line-height:0 !important;
}

/* ─── AJAX loading state — spinner místo košíku ───────────────────────
   WC přidá class .loading na tlačítko během AJAX requestu (od kliknutí
   do success/error). Schováme cart-icon a vykreslíme CSS spinner. */
article.product .button.loading,
article.product a.button.loading{
  pointer-events:none !important;
  cursor:wait !important;
}
article.product .button.loading .cart-icon,
article.product a.button.loading .cart-icon,
article.product .button.loading svg,
article.product a.button.loading svg{
  display:none !important;
}
article.product .button.loading::before,
article.product a.button.loading::before{
  content:'' !important;
  display:inline-block !important;
  width:14px !important;
  height:14px !important;
  border:2px solid currentColor !important;
  border-top-color:transparent !important;
  border-radius:50% !important;
  animation:mkSpin .65s linear infinite !important;
  flex-shrink:0 !important;
  align-self:center !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  vertical-align:middle !important;
  opacity:1 !important;
}

@keyframes mkSpin{
  to{transform:rotate(360deg);}
}


/* ─── AJAX added state — košík se po přidání zezelení ────────────────── */
article.product .button.added,
article.product a.button.added{
  background:var(--success) !important;
  color:#fff !important;
}
/* Checkmark místo košíku po success */
article.product .button.added .cart-icon,
article.product a.button.added .cart-icon{
  display:none !important;
}
article.product .button.added::before,
article.product a.button.added::before{
  content:'' !important;
  display:inline-block !important;
  width:14px !important;
  height:14px !important;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") no-repeat center / contain !important;
  flex-shrink:0 !important;
  align-self:center !important;
  margin:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  vertical-align:middle !important;
  opacity:1 !important;
  border:0 !important;
  animation:none !important;
}
article.product .added_to_cart{display:none !important;}  /* skryjeme „View cart" link */


/* ════════════════════════════════════════════════════════════════════════
   BLOG GRID — 3 sloupce karet článků (homepage, archive, kategorie)

   Render: template-parts/content-blog-card.php
   Použití: shortcode [mk_latest_posts] (homepage) + archive override.
   ══════════════════════════════════════════════════════════════════════ */

/* POZOR: jen .blog.et_pb_section — bare .blog matchuje i <body class="blog">
   na blog indexu a přidal by padding nad header. */
.blog.et_pb_section{
  background:#fff !important;
  padding:64px 0 !important;
  position:relative;
  z-index:1;
  gap:0 !important;
  column-gap:0 !important;
  row-gap:0 !important;
}
.blog > .et_pb_row,
.blog > .et_pb_row_inner{
  max-width:var(--container) !important;
  width:92% !important;
  padding:0 !important;
  margin:0 auto !important;
}
.blog > .et_pb_row + .et_pb_row{
  margin-top:38px !important;
}
/* Mezera mezi blog gridem a CTA tlačítkem dole (stejný vzor jako .featured-cta) */
.blog > .et_pb_row + .et_pb_row.blog-cta{
  margin-top:32px !important;
  text-align:center;
}


.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}


.blog-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line-soft);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
}
.blog-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}


.blog-card-img{
  height:200px;
  overflow:hidden;
  position:relative;
  background:var(--line-soft);
}
.blog-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.blog-card:hover .blog-card-img img{
  transform:scale(1.05);
}

/* Fallback placeholder gradient (článek bez thumbnail) */
.blog-card-img-placeholder{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--pink-50) 0%, var(--bg-warm-light) 100%);
}

/* ─── Tělo karty článku (dle mockupu navrh-novy/index.html) ───────────── */
.blog-card-body{padding:22px;flex:1;display:flex;flex-direction:column;align-items:flex-start;}
.blog-card .tag{
  display:inline-block;background:var(--pink-50);color:var(--pink);
  padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;
}
.blog-card h4{
  font-size:17px;font-weight:800;line-height:1.3;color:var(--ink);
  margin:0 0 10px;
}
.blog-card p{
  font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 14px;
}
.blog-card .meta{
  font-size:12px;color:var(--muted);font-weight:500;margin-top:auto;
}