/* ===========================================================
   QUBI LURES — inner pages (o nas / katalog / gdzie kupić / kontakt)
   =========================================================== */

.section { padding: 70px clamp(20px, 4vw, 48px); }
.section--tight { padding: 50px clamp(20px, 4vw, 48px); }
.section--alt { background: var(--cream-2); }
.section--dark { background: var(--water-900); color: var(--cream); }
.section__inner { max-width: var(--container); margin: 0 auto; }
.section__head { max-width: 56ch; margin-bottom: 40px; }
.section__head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); text-transform: uppercase; margin-top: 10px; }
.section__head p { margin-top: 14px; color: var(--ink-soft); }
.section--dark .section__head p { color: rgba(239,234,224,0.75); }

/* --- Two column text/media --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split p + p { margin-top: 14px; }
.split__media { position: relative; }
.split__media .fish { max-width: 340px; margin: 0 auto; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; max-width: 260px; margin: 0 auto 10px; }
}

/* --- Value / feature cards --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.4);
  padding: 26px;
}
.card__icon { width: 40px; height: 40px; color: var(--red); margin-bottom: 16px; }
.card h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.01em; }
.card p { margin-top: 8px; font-size: 0.92rem; color: var(--ink-soft); }

/* --- Stats row --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: 0.01em;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--red);
}
.stat span { font-size: 0.85rem; color: var(--ink-soft); }
.section--dark .stat span { color: rgba(239,234,224,0.7); }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr 1fr; } }

/* --- CTA banner (dark, with fish) --- */
.cta-banner {
  position: relative;
  overflow: hidden;
  background: var(--water-900);
  color: var(--cream);
  padding: 60px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-banner h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); text-transform: uppercase; max-width: 14ch; }
.cta-banner__fish { position: absolute; right: -20px; bottom: -30px; width: 340px; opacity: 0.9; pointer-events: none; }
.cta-banner__content { position: relative; z-index: 1; max-width: 560px; }
.cta-banner__actions { position: relative; z-index: 1; }

/* =================== KATALOG =================== */
.cat-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 34px;
}
.cat-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 9px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.cat-tab__icon { width: 26px; height: 14px; display: block; color: inherit; }
.cat-tab__icon svg { width: 100%; height: 100%; display: block; }
.cat-tab[data-species="wszystkie"] { padding-top: 10px; } /* no icon on "Wszystkie" — keep vertical rhythm close enough without one */
.cat-tab.is-active { border-color: var(--ink); color: var(--ink); background: rgba(255,255,255,0.5); }

.catalog-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  align-items: start;
}
.filters {
  border: 1px solid var(--line);
  padding: 22px;
  background: rgba(255,255,255,0.4);
  position: sticky;
  top: 100px;
}
.filters__head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; margin-bottom: 16px; font-size: 0.95rem;
}
.filters__clear { background: none; border: none; color: var(--red); font-size: 0.8rem; cursor: pointer; font-weight: 600; }
.filter-group { margin-bottom: 22px; }
.filter-group h4 {
  font-family: "Work Sans", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 10px;
}
.check {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 0.9rem; cursor: pointer;
}
.check input { accent-color: var(--red); width: 15px; height: 15px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.2);
  cursor: pointer; padding: 0;
}
.swatch.is-selected { outline: 2px solid var(--ink); outline-offset: 2px; }

.results-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.results-bar select { border: 1px solid var(--line); background: var(--cream); padding: 8px 10px; font-family: inherit; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.p-card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.45);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.p-card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(27,24,21,0.1); }
.p-card__badge {
  align-self: flex-start;
  background: var(--red); color: #fff; font-size: 0.7rem; font-weight: 700;
  padding: 3px 9px; margin-bottom: 8px; letter-spacing: 0.04em;
}
.p-card__fish { aspect-ratio: 5/2; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.p-card__fish img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(15,12,10,0.18)); }
.p-card h3 { font-size: 1.05rem; text-transform: uppercase; }
.p-card__type { font-size: 0.78rem; color: var(--red); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 10px; }
.p-card__sizes { display: flex; gap: 6px; margin-bottom: 10px; }
.p-card__sizes span { border: 1px solid var(--line); font-size: 0.75rem; padding: 3px 8px; }
.p-card__colors { display: flex; gap: 6px; margin-bottom: 16px; }
.p-card__colors i { width: 16px; height: 16px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,0.15); }
.p-card .btn { margin-top: auto; justify-content: center; font-size: 0.85rem; padding: 11px 18px; }
.no-results { padding: 60px 0; text-align: center; color: var(--ink-soft); display: none; }
.no-results.is-visible { display: block; }

@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
}

/* Product detail modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(7,10,10,0.55);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  background: #fff; max-width: 640px; width: 100%;
  border: 1px solid var(--line); padding: 32px; position: relative; max-height: 88vh; overflow-y: auto;
}
.modal__close {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  cursor: pointer; width: 30px; height: 30px; color: var(--ink);
}
.modal__fish { width: 90%; height: auto; display: block; margin: 0 auto 20px; }
.modal h3 { font-size: 1.6rem; text-transform: uppercase; }
.modal__type { color: var(--red); font-weight: 700; margin-top: 4px; }
.modal p { margin-top: 14px; color: var(--ink-soft); }
.modal__meta { display: flex; gap: 26px; margin-top: 20px; flex-wrap: wrap; }
.modal__meta div h4 { font-size: 0.75rem; text-transform: uppercase; color: var(--ink-soft); letter-spacing: 0.05em; margin-bottom: 6px; }
.modal__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.modal__chips span { border: 1px solid var(--line); font-size: 0.8rem; padding: 4px 10px; }
.modal__paintings { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.modal__paintings h4 { font-size: 0.75rem; text-transform: uppercase; color: var(--ink-soft); letter-spacing: 0.05em; margin-bottom: 12px; }
.modal__paintings-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.modal__paintings-thumbs button {
  width: 56px; height: 56px;
  padding: 0;
  border: 2px solid var(--line);
  background-size: cover;
  background-position: center;
  background-color: var(--cream-2);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.modal__paintings-thumbs button:hover { transform: translateY(-2px); }
.modal__paintings-thumbs button.is-active { border-color: var(--red); }
.modal__painting-name { margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--ink); }

/* =================== GDZIE KUPIĆ =================== */
.finder {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 30px;
  align-items: start;
}
.finder__search {
  display: flex; gap: 0; margin-bottom: 22px; border: 1px solid var(--ink); 
}
.finder__search input {
  flex: 1; border: none; background: transparent; padding: 13px 16px; font: inherit; color: var(--ink);
}
.finder__search button {
  border: none; background: var(--ink); color: var(--cream); width: 48px; cursor: pointer; display: grid; place-items: center;
}
.shop-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.shop-tabs button {
  background: none; border: none; padding: 10px 0; font-weight: 700; font-size: 0.85rem; color: var(--ink-soft);
  cursor: pointer; border-bottom: 2px solid transparent;
}
.shop-tabs button.is-active { color: var(--ink); border-color: var(--red); }
.shop-list { max-height: 560px; overflow-y: auto; }
.shop-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.shop-item:hover, .shop-item.is-active { background: rgba(193,48,42,0.06); }
.shop-item__pin { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; margin-top: 3px; }
.shop-item h4 { font-size: 0.95rem; }
.shop-item p { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
.shop-item__dist { margin-left: auto; font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.show-more { margin-top: 16px; width: 100%; justify-content: center; }

.map-wrap {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.4);
  padding: 18px;
  position: relative;
}
.map-svg { width: 100%; height: auto; }
.map-pin {
  cursor: pointer;
  pointer-events: all;
}
.map-pin path { fill: var(--red); stroke: var(--cream); stroke-width: 1; }
.map-pin.is-active path { fill: var(--ink); }

.map-tooltip {
  display: none;
  position: absolute;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 14px 26px rgba(27,24,21,0.14);
  padding: 16px 18px;
  min-width: 200px;
  max-width: 260px;
  z-index: 5;
  /* Critical: the tooltip must never itself be a hit-target for hover —
     otherwise the mouse moving onto the tooltip (which can overlap the
     pin above it) makes the pin think the cursor left it, hides the
     tooltip, the cursor is now "back over the pin", it reopens... an
     endless flicker loop. pointer-events:none removes the tooltip from
     hit-testing entirely; only the close button opts back in below. */
  pointer-events: none;
}
.map-tooltip.is-open { display: block; }
.map-tooltip__close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--ink-soft);
  pointer-events: auto;
}
.map-tooltip h4 { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; padding-right: 16px; margin-bottom: 10px; }
.map-tooltip__store { margin-top: 10px; }
.map-tooltip__store:first-of-type { margin-top: 0; }
.map-tooltip__store h5 { font-size: 0.85rem; font-weight: 700; margin: 0; }
.map-tooltip__store p { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }

.online-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.online-store-card { border: 1px solid var(--line); background: rgba(255,255,255,0.4); padding: 20px; }
.online-store-card h4 { font-size: 1rem; text-transform: uppercase; }
.online-store-card p { font-size: 0.88rem; color: var(--ink-soft); margin-top: 8px; }
.online-store-card .btn { margin-top: 14px; padding: 8px 16px; font-size: 0.82rem; }

/* =================== KONTAKT =================== */
.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: start;
}
.contact-list { display: flex; flex-direction: column; gap: 22px; margin-top: 26px; }
.contact-item { display: flex; gap: 14px; }
.contact-item__icon {
  width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--red);
}
.contact-item h4 { font-size: 0.95rem; text-transform: uppercase; }
.contact-item p { margin-top: 4px; color: var(--ink-soft); font-size: 0.92rem; }
.contact-item p a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.contact-item p a:hover { color: var(--red); text-decoration-color: var(--red); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.82rem; font-weight: 600; }
.field input, .field textarea, .field select {
  border: 1px solid var(--line); background: rgba(255,255,255,0.6);
  padding: 12px 14px; font: inherit; color: var(--ink); resize: vertical;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.form-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 6px; }
.form-success {
  display: none; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--red);
  background: rgba(193,48,42,0.06); color: var(--ink); font-size: 0.9rem;
}
.form-success.is-visible { display: block; }
.field.has-error input, .field.has-error textarea { border-color: var(--red); }
.field__error { color: var(--red); font-size: 0.78rem; display: none; }
.field.has-error .field__error { display: block; }
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form-error {
  color: var(--red);
  font-size: 0.85rem;
  margin-top: 14px;
}
#contactSubmitBtn:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 860px) {
  .finder, .contact-layout { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}