:root{
  /* Keep catalog cards readable on dark pages */
  --catalog-text-on-dark: rgba(255,255,255,.86);
  --catalog-muted-on-dark: rgba(255,255,255,.68);
  --catalog-panel: rgba(255,255,255,.06);
  --catalog-panel-border: rgba(255,255,255,.10);
}

/* Force dark page background (style.css sets a gradient on body) */
body{
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* Page shell */
main.page-content{
  padding-top: 44px;
  padding-bottom: 80px;
}

/* Smaller hero for inner pages (keeps main page untouched) */
.hero.hero--mini{
  height: auto;
  min-height: 280px;
  padding: 64px 0;
  background: linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)),
              url('./hero_gt.webp');
  background-size: cover;
  background-position: center;
}
.hero.hero--mini .hero-content h1{
  font-size: clamp(2.1rem, 3.2vw, 3.0rem);
  text-transform: none;
  letter-spacing: 0;
}
.hero.hero--mini .hero-content p{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Make "section-title" in catalog pages not gigantic */
main.page-content .section-title{
  font-size: 1.35rem;
  font-weight: 700;
  text-align: left;
  margin: 28px 0 12px;
}
main.page-content .section-title::after{
  margin: 10px 0 0;
}

/* Typography helpers (outside cards) */
main.page-content .h1{ 
  font-size: clamp(2.0rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 10px;
}
main.page-content .muted{ color: var(--catalog-muted-on-dark); }

/* Search field + link cards: match dark vibe, keep readability */
.search,
.link-card{
  background: var(--catalog-panel) !important;
  border: 1px solid var(--catalog-panel-border) !important;
  box-shadow: none !important;
  color: var(--catalog-text-on-dark) !important;
}
.search::placeholder{ color: rgba(255,255,255,.55) !important; }
.search:focus{
  border-color: rgba(0,229,255,.35) !important;
  box-shadow: 0 0 0 6px rgba(0,229,255,.10) !important;
}

/* Product cards: LIGHT surface on a dark page */
.card{
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
  color: #0f172a !important;
}
.card a{ color: inherit; }
.card .desc{ color: #475569 !important; }
.card .old{ color: #64748b !important; }
.card .thumb{ background: rgba(255,255,255,.98) !important; }

/* Badges stay readable on light cards */
.badge{
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.10) !important;
}

/* Lists on poradniki/ranking: make them look like cards */
main.page-content ul{
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
main.page-content li{ list-style: none; }
main.page-content li > a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--catalog-panel);
  border: 1px solid var(--catalog-panel-border);
  color: var(--catalog-text-on-dark);
}
main.page-content li > a:hover{
  transform: translateY(-2px);
  border-color: rgba(0,229,255,.35);
}

@media (max-width: 720px){
  .hero.hero--mini{ min-height: 240px; padding: 48px 0; }
  main.page-content{ padding-top: 28px; }
}

@media (max-width: 520px){
  .hero.hero--mini{ min-height: 220px; padding: 40px 0; }
  main.page-content ul{ grid-template-columns: 1fr; }
}


/* Site-wide search */
.search-row{max-width:720px;margin-top:14px}
.search-meta{margin-top:10px;color:rgba(255,255,255,.75)}
.search-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.search-card{display:block;background:#fff;border-radius:16px;padding:14px 14px 12px;color:#111;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.search-card:hover{transform:translateY(-1px)}
.search-card__title{font-weight:700;line-height:1.25}
.search-card__price{margin-top:8px;font-weight:800}
.search-card__cta{margin-top:10px;font-size:14px;color:#444}
.search-empty{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:14px;border-radius:14px;color:#fff}
.search-note{margin-top:10px;color:rgba(255,255,255,.75)}
@media (max-width: 900px){.search-results{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 560px){.search-results{grid-template-columns:1fr}}


/* === Wider global search input === */
.page-content .search{
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px 18px !important;
  font-size: 16px !important;
  border-radius: 16px !important;
  line-height: 1.2 !important;
}
@media (min-width: 900px){
  .page-content .search{
    padding: 18px 20px !important;
    font-size: 18px !important;
  }
}


/* Disclaimers */
.disclaimer-box{
  margin: 14px 0 22px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  color: var(--catalog-text-on-dark);
  font-size: .95rem;
  line-height: 1.45;
}
.disclaimer-box strong{ color: rgba(255,255,255,.95); }
.disclaimer-box a{ color: inherit; text-decoration: underline; }

/* Back button dark override */
.back-btn{
  color: rgba(255,255,255,.68) !important;
  border-color: rgba(255,255,255,.12) !important;
  background: transparent !important;
}
.back-btn:hover,.back-btn:focus-visible{
  color: rgba(0,229,255,.9) !important;
  border-color: rgba(0,229,255,.35) !important;
  background: rgba(0,229,255,.06) !important;
}