/* =========================================================================
   BOKO — stranica /shop/ (WooCommerce arhiva proizvoda).
   Ucitava se POSLE boko-shell.css, koji vec daje heder, fioku i footer.

   Prefiks `body.boko-design.boko-shop` — dve klase, tezina (0,2,1), isto
   kao kod shell-a i product sloja. Klasu `boko-shop` dodaje PHP na is_shop().

   Struktura koju tema ispisuje:
     .products-grid > .row > div.product > .product-block
       figure.image > a.product-image > img + img.image-hover
       .group-add-to-cart > .add-cart > a.button   ("Select options")
       .caption > .rating, h3.name, span.price
   ========================================================================= */

/* --- Pozadina -----------------------------------------------------------
   Tema boji #main-wrapper u rgb(70,74,77) — tamnosivo. Fotografije su i same
   na sivoj podlozi pa se kartice stapaju sa stranicom. Vracamo belo. */
body.boko-design.boko-shop #main-wrapper { background: #fff; }

/* --- Zelena banera -------------------------------------------------------
   Velika slika sa pet kreveta i logom preko pola ekrana. Zauzima 472 px
   prvog ekrana a ne govori nista. Zamenjuje je tekstualni uvod iz PHP-a. */
body.boko-design.boko-shop #sidebar-top-archive { display: none; }

/* Hara tema skriva ceo WooCommerce `.tbay-filter` omotac na ovoj arhivi.
   U njemu se nalaze nas uvod i meta red, pa omotac mora ostati vidljiv.
   Stari rezultat/sort interfejs sklanjamo zasebno. */
body.boko-design.boko-shop .tbay-filter { display: block !important; }
body.boko-design.boko-shop .tbay-filter .main-filter { display: none !important; }

/* Ta traka nosi i svoju sivu pozadinu #f5f5f5 sa paddingom 20px 26px, pa je
   uvod izgledao kao da sedi u kutiji. Neutralisemo je — uvod treba da stoji
   na beloj strani, bez okvira. */
body.boko-design.boko-shop .tbay-filter {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Uvod (markup dolazi iz PHP-a) -------------------------------------- */
body.boko-design.boko-shop .boko-shop-intro {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0 0;
}
body.boko-design.boko-shop .boko-shop-intro .eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #737373;
}
body.boko-design.boko-shop .boko-shop-intro h1 {
  margin: 0;
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.045em;
  max-width: 16ch;
  color: #171717;
}
body.boko-design.boko-shop .boko-shop-intro p.lede {
  margin: 24px 0 0;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.65;
  color: #525252;
}
body.boko-design.boko-shop .boko-shop-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  max-width: 1280px;
  margin: 56px auto 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e5e5e5;
  font-size: 13px;
  color: #737373;
}

/* --- Mreza ---------------------------------------------------------------
   Tema koristi .row sa float/kolona klasama. Grid ih pregazi. */
body.boko-design.boko-shop .products-grid > .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 28px;
  margin: 0;
}
body.boko-design.boko-shop .products-grid > .row > .product {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
}
body.boko-design.boko-shop .products-grid .product-block { margin: 0; }

/* --- Slika ---------------------------------------------------------------
   Radijus 20px prati jezik polja u konfiguratoru (14px) i galerije (24px). */
body.boko-design.boko-shop .products-grid figure.image {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 20px;
  background: #ededeb;
  aspect-ratio: 1 / 1;
}
body.boko-design.boko-shop .products-grid figure.image a.product-image {
  display: block;
  width: 100%;
  height: 100%;
}
body.boko-design.boko-shop .products-grid figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .35s;
}
/* Druga slika (FRONT-...) se SKLANJA.
   Tema je drzi pomerenu za -204 px vodoravno i na hover je uvlaci sa strane.
   To klizanje je jedini nemiran pokret na strani i ne pristaje mirnoj mrezi.
   Slika ostaje u markupu — vraca se brisanjem ovog pravila. */
body.boko-design.boko-shop .products-grid figure.image img.image-hover { display: none; }

/* Tema na hover gasi GLAVNU sliku da bi pustila onu drugu. Posto je druga
   sklonjena, kartica bi ostala prazna. Zato glavna mora da ostane vidljiva. */
body.boko-design.boko-shop .products-grid .product-block:hover figure.image img:not(.image-hover) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Jedini pokret: blago uvecanje slike. Bez pomeranja u stranu. */
body.boko-design.boko-shop .products-grid .product-block:hover figure.image img:not(.image-hover) {
  transform: scale(1.035);
}

/* --- Sklonjeno -----------------------------------------------------------
   Cena je na svakoj kartici "0.00 CAD" jer WCPA drzi osnovnu cenu na nuli,
   a prava se racuna u konfiguratoru. Krevet od cetiri hiljade naveden kao
   nula je gore nego da cene nema. Umesto nje stoji "Made to order".
   Ocena i "Select options" se sklanjaju iz istog razloga kao na stranici
   proizvoda — mreza treba da bude slika, ime, podnaslov. */
body.boko-design.boko-shop .products-grid .caption .price,
body.boko-design.boko-shop .products-grid .caption .rating,
body.boko-design.boko-shop .products-grid .group-add-to-cart,
body.boko-design.boko-shop .products-grid .group-buttons { display: none; }

/* --- Tekst ispod slike --------------------------------------------------- */
body.boko-design.boko-shop .products-grid .caption {
  padding: 18px 2px 0;
  text-align: left;
}
body.boko-design.boko-shop .products-grid .caption h3.name {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}
body.boko-design.boko-shop .products-grid .caption h3.name a { color: #171717; }
body.boko-design.boko-shop .products-grid .caption h3.name::after {
  content: "Made to order";
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a3a3a3;
}

/* --- Traka na dnu (markup iz PHP-a) -------------------------------------- */
body.boko-design.boko-shop .boko-shop-band {
  max-width: 1280px;
  margin: 104px auto 0;
}
body.boko-design.boko-shop .boko-shop-band__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 64px 56px;
  border-radius: 28px;
  background: #111;
  color: #fff;
}
body.boko-design.boko-shop .boko-shop-band h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: #fff;
}
body.boko-design.boko-shop .boko-shop-band p {
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: 15px;
  color: #a3a3a3;
}
body.boko-design.boko-shop .boko-shop-band a {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 15px;
  font-weight: 500;
  transition: opacity .18s;
}
body.boko-design.boko-shop .boko-shop-band a:hover { opacity: .85; }

/* --- Paginacija ----------------------------------------------------------
   PHP dize broj po strani na 24, pa svih 17 stane na jednu stranu.
   Paginacija ostaje u markupu ali nema sta da prikaze. */
body.boko-design.boko-shop .woocommerce-pagination,
body.boko-design.boko-shop .woocommerce-result-count { display: none; }

/* --- Uze ekrane ---------------------------------------------------------- */
@media (max-width: 1100px) {
  body.boko-design.boko-shop .products-grid > .row {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }
}
@media (max-width: 767px) {
  body.boko-design.boko-shop .products-grid > .row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.boko-design.boko-shop .boko-shop-meta { margin: 40px auto 24px; }
  body.boko-design.boko-shop .boko-shop-band { margin-top: 72px; }
  body.boko-design.boko-shop .boko-shop-band__in { padding: 44px 28px; border-radius: 22px; }
}