/* ===== 1. HOMEPAGE – layout, kategorie, hero, recenze, zápatí ===== */
.home-hero-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  margin: 20px 0;
  align-items: start;
}
.home-categories-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-categories-col a {
  text-decoration: none;
  color: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}
.home-categories-col a:hover {
  background: #e0f0ff;
  transform: translateX(2px);
}
.home-categories-col img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.home-categories-col p {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}
.sidebar-cart {
  margin-top: 16px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
}
.sidebar-cart a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}
.sidebar-cart a:hover { color: #1a9e7e; }
.sidebar-cart .cart-icon { font-size: 20px; }
.home-hero-col {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.home-hero-col img.hero-img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%);
}
.hero-text {
  position: absolute;
  top: 25%;
  left: 7%;
  transform: translateY(-50%);
  max-width: 55%;
  color: #1a1a1a;
}
.hero-text h2 {
  margin: 0 0 10px 0;
  font-size: clamp(1.2rem, 2.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
}
.hero-text p {
  margin: 0 0 20px 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  opacity: 0.85;
  line-height: 1.5;
}
.hero-text a.hero-btn {
  display: inline-block;
  background: #1a9e7e;
  color: #fff;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(26,158,126,0.4);
}
.hero-text a.hero-btn:hover { background: #157a62; }
.hero-carousel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 768px) {
  .hero-carousel {
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
  }
  .hero-carousel .home-hero-col {
    min-width: 100%;
    flex-shrink: 0;
    display: block !important;
    transition: transform 0.4s ease;
  }
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }
  .carousel-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    display: block;
    transition: background 0.2s;
  }
  .carousel-dots span.active { background: #1a9e7e; }
}
@media (min-width: 769px) {
  .hero-carousel .home-hero-col {
    display: block !important;
    max-width: 100% !important;
  }
  .carousel-dots { display: none; }
}
.home-reviews {
  background: #f9f9f9;
  padding: 40px 20px;
  text-align: center;
  margin-top: 16px;
  border-radius: 8px;
}
.home-reviews h2 { font-size: 22px; margin-bottom: 6px; }
.reviews-sub { color: #888; font-size: 14px; margin-bottom: 30px; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
.review-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
  text-align: left;
}
.review-card p:first-child { font-size: 14px; margin-bottom: 12px; margin-top: 0; }
.review-card p:last-child { font-size: 12px; color: #888; margin: 0; }
@media (max-width: 768px) {
  .home-hero-layout { grid-template-columns: 1fr; }
  .home-hero-col { max-width: 100%; }
  .home-categories-col { flex-direction: row; flex-wrap: wrap; }
  .home-categories-col a { flex: 1 1 calc(33% - 8px); flex-direction: column; text-align: center; padding: 6px 4px; gap: 4px; min-height: 90px; justify-content: center; }
  .home-categories-col img { width: 36px; height: 36px; }
  .home-categories-col p { font-size: 11px; line-height: 1.2; }
  .home-categories-col a.tipy-side { display: none; }
  .tipy-banner { display: block; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-text { top: 12px; transform: none; max-width: 62%; }
  .hero-text h2 { font-size: clamp(0.95rem, 4.5vw, 1.3rem); margin-bottom: 6px; }
  .hero-text p { font-size: clamp(0.8rem, 3.2vw, 0.95rem); margin-bottom: 12px; line-height: 1.4; }
  .hero-text a.hero-btn { padding: 10px 18px; font-size: 0.88rem; }
}
.tipy-banner{display:none;background:#fff;border-radius:10px;padding:14px;margin:12px 0;text-align:center;box-shadow:0 0 5px rgba(0,0,0,0.05);text-decoration:none;color:#222;font-weight:600;font-size:15px}
.tipy-banner:hover{background:#f5fafa;color:#1a9e7e}
.footer, footer.footer, .footer-main, .site-footer { display: none !important; }
.ft-g{background:#f8f8f6;border-top:1px solid #e0e0d8;padding:28px 20px 12px;margin-top:32px;font-size:13px;color:#555;font-family:sans-serif}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:960px;margin:0 auto 20px}
.ft-h{color:#1a9e7e;font-size:11px;text-transform:uppercase}
.ft-bot{text-align:center;font-size:11px;color:#999;border-top:1px solid #eee;padding-top:12px;max-width:960px;margin:0 auto}
.ft-g a{color:#555}

/* ===== 2. BLOG ODKAZY ===== */
.blg{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:12px;text-decoration:none;color:inherit;max-width:580px;margin-bottom:8px}
.blg-i{flex-shrink:0;width:40px;height:40px;background:#e8f7f2;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px}
.blg-t{font-size:14px;font-weight:600;color:#222;line-height:1.3}
.blg-r{font-size:12px;color:#1a9e7e;margin-top:4px}
.blg-w{margin:28px 0 16px}
.blg-h{font-size:18px;font-weight:700;margin:0 0 12px;color:#222}

/* ===== 3. TLAČÍTKO DO KOŠÍKU + POČÍTADLO ===== */
.add-to-cart,
.btn-conversion,
button.add-to-cart {
  background-color: #1a9e7e !important;
  border-color: #1a9e7e !important;
  color: #fff !important;
}
.add-to-cart:hover,
.btn-conversion:hover {
  background-color: #157a62 !important;
  border-color: #157a62 !important;
}
.p-quantity button,
.p-quantity input,
.amount button,
.amount input,
.quantity button,
.quantity input,
.spinbox button,
.spinbox input {
  background-color: #fff !important;
  border-color: #d5d5d5 !important;
  color: #000 !important;
}
