/* ==========================================================================
   Dogpoint1 — mobil banner + filtr + category spacing
   2026-11-03 · append into Vzhled a obsah > Editor > HTML kód / záhlaví
   Pink from live --dp-accent: #e51f50
   Filter purple = theme .btn.btn-default → --color-tertiary #885793
   ========================================================================== */

/* 1) Homepage hero on small screens
   ROOT CAUSE (verified Playwright 390×844, mobile UA, 2026-11-03):
   On mobile, Shoptet places #carousel inside #content-wrapper. Live custom
   CSS zeroes that wrapper on the homepage:
     body.in-index #content-wrapper { height:0; overflow:hidden }
   (intended to hide the empty sr-only content slot). On desktop the carousel
   lives in a separate .homepage-box.before-carousel, so it is fine; on mobile
   the banner is clipped to 0 and .welcome-wrapper paints over the same Y.
   Theme Classic itself does NOT display:none the carousel at ≤767px.
   Fix: reopen #content-wrapper when it contains the carousel, keep the slide
   in normal flow, give the image a readable cover crop (left = claim/CTA). */
@media (max-width: 767px) {
  body.in-index #content-wrapper:has(#carousel),
  body.in-index #content-wrapper:has(.wide-carousel),
  body.type-index #content-wrapper:has(#carousel),
  body.type-index #content-wrapper:has(.wide-carousel) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.in-index #content-wrapper:has(#carousel) .content-wrapper-in,
  body.in-index #content-wrapper:has(.wide-carousel) .content-wrapper-in {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.in-index .banners-row,
  body.in-index .wide-carousel,
  body.in-index #carousel,
  body.in-index #carousel .carousel-inner,
  body.in-index #carousel .item,
  body.in-index #carousel .item.active {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.in-index .homepage-box.before-carousel {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.in-index #carousel .item.active > a,
  body.in-index #carousel .item.active > a.extended-empty,
  body.in-index .wide-carousel a {
    display: block !important;
    width: 100%;
    min-height: 44px;
  }

  body.in-index #carousel .item.active img,
  body.in-index #carousel img,
  body.in-index .wide-carousel img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 180px !important;
    max-height: 260px !important;
    object-fit: cover !important;
    object-position: left center !important;
  }

  body.in-index .homepage-box.welcome-wrapper,
  body.in-index .welcome-wrapper {
    position: relative !important;
    clear: both !important;
  }
}

/* 2) Category: Otevřít filtr — tertiary purple → site pink */
a.btn.btn-default.unveil-button,
#content a.btn.btn-default.unveil-button,
.filters-unveil-button-wrapper a.btn.btn-default.unveil-button {
  background-color: var(--dp-accent, #e51f50);
  border-color: var(--dp-accent, #e51f50);
  color: #fff;
  min-height: 44px;
}

a.btn.btn-default.unveil-button:hover,
a.btn.btn-default.unveil-button:focus,
#content a.btn.btn-default.unveil-button:hover,
#content a.btn.btn-default.unveil-button:focus {
  background-color: var(--dp-accent-hover, #b8153f);
  border-color: var(--dp-accent-hover, #b8153f);
  color: #fff;
}

/* 3) Category: less empty space above H1 on mobile */
@media (max-width: 767px) {
  body.type-category .content-wrapper-in {
    padding-top: 0.5rem;
  }

  body.type-category .breadcrumbs-wrapper {
    padding-top: 0.35rem;
    padding-bottom: 0.25rem;
  }

  body.type-category .category-top {
    margin-top: 0;
  }

  body.type-category h1.category-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}