/* com_wcads – ogłoszenia w stylu allegrolokalnie: jasne tło, białe karty z zaokrągleniem, fioletowe CTA, pomarańczowy akcent */
:root {
  --wc-bg: #f2f4f7;
  --wc-card: #ffffff;
  --wc-text: #1f2430;
  --wc-muted: #6b7280;
  --wc-line: #e5e8ee;
  --wc-primary: #5a3ab5;
  --wc-primary-dark: #4a2f95;
  --wc-accent: #ff6a1a;
  --wc-teal: #128a80;
  --wc-radius: 14px;
  --wc-shadow: 0 1px 2px rgba(20, 24, 40, .06), 0 6px 20px rgba(20, 24, 40, .06);
}

body.site { background: var(--wc-bg); }
.wc { color: var(--wc-text); font-size: 15px; line-height: 1.5; }
.wc a, .wc a:not(.btn) { color: var(--wc-teal); text-decoration: none; }
.wc a:hover { text-decoration: underline; }
.wc-card a, .wc-tile, .wc-catnav__link, .wc-btn, .wc-gallery__thumb { text-decoration: none !important; }
.wc h1, .wc h2, .wc h3 { font-weight: 700; letter-spacing: -.01em; margin: 0; }
.wc-muted { color: var(--wc-muted); font-size: 14px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* pasek wyszukiwania + kategorie */
.wc-top { margin: 0 0 18px; }
.wc-search { display: flex; align-items: stretch; background: var(--wc-card); border: 1px solid var(--wc-line); border-radius: 12px; box-shadow: var(--wc-shadow); overflow: hidden; }
.wc-search__input { flex: 1 1 auto; min-width: 0; border: 0; padding: 14px 16px; font-size: 16px; background: transparent; outline: none; }
.wc-search__cat { border: 0; border-left: 1px solid var(--wc-line); padding: 0 14px; font-size: 15px; background: #fafbfc; color: var(--wc-text); max-width: 220px; }
.wc-search__btn { border: 0; background: var(--wc-primary); color: #fff; width: 58px; display: grid; place-items: center; cursor: pointer; }
.wc-search__btn:hover { background: var(--wc-primary-dark); }
.wc-catnav { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 2px; scrollbar-width: none; }
.wc-catnav::-webkit-scrollbar { display: none; }
.wc-catnav__link { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; background: var(--wc-card); border: 1px solid var(--wc-line); color: var(--wc-text); font-size: 14px; white-space: nowrap; }
.wc-catnav__link:hover { border-color: var(--wc-primary); color: var(--wc-primary); text-decoration: none; }
.wc-catnav__link.is-active { background: var(--wc-primary); border-color: var(--wc-primary); color: #fff; }

/* hero */
.wc-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; background: linear-gradient(120deg, #5a3ab5 0%, #7b57d6 60%, #ff6a1a 140%); color: #fff; border-radius: var(--wc-radius); padding: 34px 36px; margin-bottom: 26px; box-shadow: var(--wc-shadow); }
.wc-hero h1 { font-size: 30px; line-height: 1.15; margin-bottom: 10px; color: #fff; }
.wc-hero p { font-size: 16px; opacity: .92; margin: 0 0 18px; }
.wc-hero__img img { width: 100%; height: auto; border-radius: 12px; display: block; }
.wc-btn { display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none !important; transition: background .15s, transform .15s; }
.wc-btn--light { background: #fff; color: var(--wc-primary) !important; }
.wc-btn--light:hover { background: #f1edff; }
.wc-btn--primary { background: var(--wc-primary); color: #fff !important; }
.wc-btn--primary:hover { background: var(--wc-primary-dark); }
.wc-btn--block { display: block; text-align: center; }

/* sekcje */
.wc-section { margin: 0 0 30px; }
.wc-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.wc-section__head h2 { font-size: 22px; }
.wc-more { font-weight: 600; }
.wc-about { background: var(--wc-card); border-radius: var(--wc-radius); padding: 22px 26px; box-shadow: var(--wc-shadow); }
.wc-about h2 { font-size: 18px; margin-bottom: 8px; }
.wc-about p { margin: 0; color: #3b4252; }

/* kafelki kategorii */
.wc-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.wc-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: var(--wc-card); border-radius: var(--wc-radius); padding: 18px 10px 14px; box-shadow: var(--wc-shadow); color: var(--wc-text); text-decoration: none !important; transition: transform .15s, box-shadow .15s; }
.wc-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(90, 58, 181, .16); }
.wc-tile__ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #f1edff; color: var(--wc-primary); }
.wc-tile:nth-child(3n) .wc-tile__ico { background: #fff0e6; color: var(--wc-accent); }
.wc-tile:nth-child(3n+2) .wc-tile__ico { background: #e6f5f3; color: var(--wc-teal); }
.wc-tile__name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.wc-tile__count { font-size: 12px; color: var(--wc-muted); }

/* karty ogłoszeń */
.wc-grid { display: grid; gap: 14px; }
.wc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wc-card { background: var(--wc-card); border-radius: var(--wc-radius); overflow: hidden; box-shadow: var(--wc-shadow); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.wc-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 24, 40, .12); }
.wc-card__img { display: block; aspect-ratio: 1 / 1; background: #f7f8fa; overflow: hidden; }
.wc-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.wc-card__title { font-size: 14px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.wc-card__title a { color: var(--wc-text); text-decoration: none; }
.wc-card:hover .wc-card__title a { color: var(--wc-primary); }
.wc-card__price { font-size: 18px; font-weight: 800; color: var(--wc-text); }
.wc-card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--wc-muted); }
.wc-card__cat { color: var(--wc-teal); }

/* nagłówki stron, okruszki */
.wc-crumbs { font-size: 13px; color: var(--wc-muted); margin: 4px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wc-crumbs a { color: var(--wc-muted); }
.wc-crumbs__sep { opacity: .6; }
.wc-pagehead { margin: 0 0 16px; }
.wc-pagehead h1 { font-size: 26px; }
.wc-pagehead h1 small { font-size: 14px; font-weight: 400; color: var(--wc-muted); margin-left: 8px; }
.wc-pagehead em { color: var(--wc-primary); font-style: normal; }

/* układ kategoria: sidebar + lista */
.wc-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.wc-box { background: var(--wc-card); border-radius: var(--wc-radius); padding: 18px 20px; box-shadow: var(--wc-shadow); margin-bottom: 14px; }
.wc-box__title { font-size: 17px; margin-bottom: 10px; }
.wc-box--text { font-size: 14px; color: #3b4252; }
.wc-sublist { list-style: none; margin: 0; padding: 0; }
.wc-sublist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--wc-line); font-size: 14px; }
.wc-sublist li:first-child { border-top: 0; }
.wc-sublist li a { color: var(--wc-text); }
.wc-sublist li.is-active a { color: var(--wc-primary); font-weight: 700; }
.wc-badge { font-size: 12px; color: var(--wc-muted); background: #f1f3f7; border-radius: 6px; padding: 2px 7px; }
.wc-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--wc-card); border-radius: var(--wc-radius); padding: 10px 16px; box-shadow: var(--wc-shadow); margin-bottom: 14px; font-size: 14px; }
.wc-toolbar__sort { display: flex; align-items: center; gap: 8px; }
.wc-toolbar__sort select { border: 1px solid var(--wc-line); border-radius: 8px; padding: 6px 10px; background: #fff; }
.wc-empty { background: var(--wc-card); border-radius: var(--wc-radius); padding: 30px; text-align: center; color: var(--wc-muted); }
.wc-pagination { margin: 18px 0; display: flex; justify-content: center; }
.wc-pagination .pagination { margin: 0; }
.wc-pagination .page-link { border-radius: 8px !important; margin: 0 3px; border-color: var(--wc-line); color: var(--wc-text); }
.wc-pagination .page-item.active .page-link { background: var(--wc-primary); border-color: var(--wc-primary); color: #fff; }

/* ogłoszenie */
.wc-item__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: 'gallery side' 'desc side'; gap: 18px; align-items: start; margin-bottom: 26px; }
.wc-item__gallery { grid-area: gallery; min-width: 0; }
.wc-item__side { grid-area: side; align-self: stretch; }
.wc-item__desc { grid-area: desc; min-width: 0; }
.wc-gallery { background: var(--wc-card); border-radius: var(--wc-radius); box-shadow: var(--wc-shadow); padding: 14px; margin-bottom: 14px; }
.wc-gallery__main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: #f7f8fa; border-radius: 10px; min-height: 320px; }
.wc-gallery__main img { max-width: 100%; max-height: 520px; width: auto; height: auto; display: block; border-radius: 10px; object-fit: contain; }
.wc-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wc-line); background: #fff; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--wc-shadow); color: var(--wc-text); }
.wc-gallery__nav--prev { left: 10px; }
.wc-gallery__nav--next { right: 10px; }
.wc-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.wc-gallery__thumb { flex: 0 0 auto; width: 84px; height: 66px; border: 2px solid transparent; border-radius: 8px; padding: 0; background: #f7f8fa; overflow: hidden; cursor: pointer; }
.wc-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-gallery__thumb.is-active { border-color: var(--wc-primary); }
.wc-item__title { font-size: 24px; margin-bottom: 12px; }
.wc-item__text { font-size: 15px; color: #2b3240; }
.wc-item__text p { margin: 0 0 10px; }
.wc-item__text .kc-link { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--wc-line); }
.wc-item__fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0 0; font-size: 14px; }
.wc-item__fields dt { color: var(--wc-muted); }
.wc-item__fields dd { margin: 0; }
.wc-buybox { position: sticky; top: 16px; }
.wc-buybox__price { font-size: 30px; font-weight: 800; margin-bottom: 4px; }
.wc-buybox .wc-btn { margin: 14px 0 8px; }
.wc-buybox__note { font-size: 13px; color: var(--wc-muted); margin: 0 0 12px; }
.wc-buybox__meta { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.wc-buybox__meta li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--wc-line); }
.wc-buybox__meta li span { color: var(--wc-muted); }
.wc-alert { background: #fff4e5; border: 1px solid #ffd9a8; color: #7a4a00; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

/* responsywność */
@media (min-width: 1200px) { .wc-grid--3 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .wc-tiles { grid-template-columns: repeat(4, 1fr); } .wc-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .wc-hero { grid-template-columns: 1fr; padding: 26px 22px; }
  .wc-hero__img { display: none; }
  .wc-layout, .wc-item__layout { grid-template-columns: minmax(0, 1fr); }
  .wc-item__layout { grid-template-areas: 'gallery' 'side' 'desc'; }
  .wc-buybox { position: static; }
  .wc-gallery__main { min-height: 200px; }
  .wc-grid--3, .wc-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .wc-tiles { grid-template-columns: repeat(3, 1fr); }
  .wc-search__cat { display: none; }
}
@media (max-width: 480px) {
  .wc { font-size: 14px; }
  .wc-tiles { grid-template-columns: repeat(2, 1fr); }
  .wc-grid--3, .wc-grid--4 { gap: 10px; }
  .wc-hero h1 { font-size: 22px; }
  .wc-pagehead h1 { font-size: 21px; }
  .wc-item__title { font-size: 20px; }
}

/* Cassiopeia: chowamy tytuł strony z szablonu (mamy własny H1), zawężamy nagłówek */
.site-grid .container-component > .page-header, .com_wcads .page-header { display: none; }
.com_wcads .container-header .navbar-brand .site-description { display: none; }
