/* Argo — warstwa laczaca makiete z OpenCartem.
 * argo.css to zrzut makiety 1:1 (nie edytowac recznie). Tutaj tylko to, czego
 * makieta nie mogla przewidziec: prawdziwe <img> zamiast symboli SVG, siatka
 * Bootstrapa na stronach bez wlasnego szablonu i drobne nadpisania.
 */

/* ---------- Zdjecia produktow ----------
   W makiecie kafel to tint + ikona SVG (38 % szerokosci). W sklepie kafel jest
   gotowym PNG-iem (tint wypalony w pliku), wiec obrazek ma wypelnic caly kafel. */
.pimg img,
.mma-fimg img,
.cat-tile .disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.pimg { overflow: hidden; }
.pimg img { transition: transform .3s ease; }
.pcard:hover .pimg img { transform: scale(1.04); }

.mma-fimg { overflow: hidden; }
.cat-tile .disc { overflow: hidden; }

/* ---------- Naglowek H1 strony glownej ----------
   OpenCart wymaga widocznego H1 (NH-20), makieta go nie pokazuje. */
.sr-only-argo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Menu: otwieranie klawiatura i dotykiem ----------
   Makieta polega na :hover; tu dokladamy stan sterowany z argo.js. */
.menu li.is-open > .mega,
.menu li.is-open > .drop,
.menu li.is-open > .mega2 { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

/* ---------- Boczna kolumna mega-menu ---------- */
.mside .mma-flabel { margin: 0 0 10px; }
.mside .mma-featcard { margin-bottom: 10px; }

/* ---------- Strony bez wlasnego szablonu ----------
   Konto, porownanie, informacje itd. spadaja na motyw `default` (Bootstrap 3).
   Damy im kontener i oddech makiety, zeby nie wygladaly jak obca wyspa. */
#content { padding-bottom: 40px; }

body > .container,
#common-home.container,
#product-category.container,
#product-product.container,
#checkout-cart.container,
#information-information.container,
#account-account.container {
  max-width: var(--page-width, 82.5rem);
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* Bootstrap dokleja swoje h1–h6 i .btn — nie chcemy, zeby wygrywaly z makieta */
.hero-copy h2,
.sec-head h2,
.pname { font-family: inherit; }

.btn.btn-primary,
.btn.btn-default {
  border-radius: var(--radius-sm, 4px);
}

/* ---------- Komunikaty OpenCarta (alerty dodania do koszyka) ---------- */
.alert { border-radius: var(--radius-md, 8px); }

/* ---------- Listing kategorii ---------- */
.toolbar select {
  height: 35px;
  border: 1px solid var(--border, #e4e4e4);
  border-radius: var(--radius-sm, 4px);
  padding: 0 10px;
  background: #fff;
  font: inherit;
  color: inherit;
}
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 40px;
}
.pager .pagination { margin: 0; }
.pager-results { color: var(--muted, #6b6b6b); font-size: var(--fs-sm, .82rem); }
.sbox .mini .thumb { overflow: hidden; }
.sbox .mini .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Karta produktu: warianty ---------- */
.argo-opt { position: relative; display: inline-flex; margin: 0 8px 8px 0; cursor: pointer; }
.argo-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.argo-opt > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border, #e4e4e4);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.argo-opt > span img { width: 22px; height: 22px; border-radius: 3px; display: block; }
.argo-opt input:checked + span {
  border-color: var(--accent, #d40924);
  box-shadow: inset 0 0 0 1px var(--accent, #d40924);
  font-weight: 600;
}
.argo-opt input:focus-visible + span { outline: 2px solid var(--accent, #d40924); outline-offset: 2px; }

/* ---------- Karta produktu: galeria ---------- */
.gallery .main { overflow: hidden; position: relative; }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs .thumb-btn { overflow: hidden; padding: 0; }
.thumbs .thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Gwiazdki oceny ---------- */
.stars .star { background: var(--border, #e4e4e4); }
.stars .star.on { background: var(--star, #f5b301); }