/* ============================================================
   MTEL FSE — SHOP (WooCommerce Blocks / Product Collection) v4
   ============================================================ */

body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag,
body.post-type-archive-product,
body:has(.wc-block-product-template){
  background:var(--paper)!important;
  color:var(--navy-800)!important;
}

body.woocommerce-shop h1,
body:has(.wc-block-product-template) h1{
  font-family:"Pero",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:800;letter-spacing:-.03em;
  color:var(--navy-800);
  font-size:clamp(32px,6vw,52px);
  margin:4px 0 28px;
}

.wc-block-breadcrumbs{
  font-size:12px;color:var(--grey-500);font-weight:300;
  letter-spacing:.02em;margin:0 0 6px;
}
.wc-block-breadcrumbs a{color:var(--grey-500);text-decoration:none;border-bottom:1px solid var(--grey-300)}
.wc-block-breadcrumbs a:hover{color:var(--navy-800);border-color:var(--navy-800)}

.wc-block-product-results-count{
  font-size:13px;color:var(--grey-500);font-weight:300;margin:0;
}
.wc-block-catalog-sorting select{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;border-bottom:1.5px solid var(--grey-300);
  border-radius:0;padding:4px 22px 6px 2px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy-800);cursor:pointer;transition:border-color .2s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0l4.5 6 4.5-6z' fill='%230A1F3D'/></svg>");
  background-repeat:no-repeat;background-position:right 2px center;
}
.wc-block-catalog-sorting select:hover{border-color:var(--navy-800)}

/* ============================================================
   GRID — 2 / 3 / 4 kolone
   ============================================================ */
ul.wc-block-product-template{
  display:grid!important;
  grid-template-columns:repeat(2,1fr)!important;
  gap:28px 18px!important;
  list-style:none;padding:0;margin:12px 0 0!important;
}
@media(min-width:720px){
  ul.wc-block-product-template{grid-template-columns:repeat(3,1fr)!important;gap:32px 24px!important}
}
@media(min-width:1024px){
  ul.wc-block-product-template{grid-template-columns:repeat(4,1fr)!important;gap:40px 28px!important}
}

/* ============================================================
   KARTICA
   ============================================================ */
li.wc-block-product{
  position:relative;list-style:none;
  background:none;border:0;border-radius:0;
  display:flex;flex-direction:column;
  margin:0!important;padding:0!important;
}

li.wc-block-product .wc-block-components-product-image img{
  aspect-ratio:1/1;object-fit:contain!important;
  background:var(--white);
  border-radius:var(--r);
  padding:22px;width:100%;height:auto;
  transition:transform .5s var(--ease);
}
@media(hover:hover){
  li.wc-block-product:hover .wc-block-components-product-image img{transform:scale(1.045)}
}

li.wc-block-product .wp-block-post-title{
  font-family:"Pero",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(14px,1.6vw,16px);
  font-weight:700;letter-spacing:-.01em;line-height:1.3;
  color:var(--navy-800)!important;
  margin:16px 0 4px!important;
  text-align:left!important;
}
li.wc-block-product .wp-block-post-title a{color:inherit!important;text-decoration:none}

li.wc-block-product .wc-block-components-product-price{
  margin:0!important;text-align:left!important;
  font-size:14px;font-weight:700;color:var(--navy-800)!important;
}
li.wc-block-product .woocommerce-Price-amount{font-variant-numeric:tabular-nums;color:inherit!important}
li.wc-block-product del .woocommerce-Price-amount{color:var(--grey-400)!important;font-weight:400;opacity:.75}
li.wc-block-product ins{text-decoration:none;color:var(--red)!important}

li.wc-block-product .wc-block-components-product-sale-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--spectar);color:var(--white)!important;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}

/* dugme — plutajući kružić preko slike */
.wp-block-button.wc-block-components-product-button{
  order:2;
  position:static!important;
  margin:10px 0 0!important;display:block!important;
  width:auto!important;height:auto!important;
}
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button{
  box-sizing:border-box!important;
  width:42px!important;height:42px!important;
  min-width:0!important;min-height:0!important;
  border-radius:50%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:var(--navy-800)!important;border:0!important;
  padding:0!important;margin:0!important;line-height:1!important;
  box-shadow:0 8px 20px -8px rgba(10,31,61,.5);
  transition:transform .25s var(--ease),background .25s;
  position:relative;overflow:hidden;
}
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button span{
  display:none!important;
}
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button::after{
  content:"+";color:var(--white)!important;
  font-size:22px;font-weight:300;line-height:1;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
}
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:hover{
  background:var(--spectar)!important;transform:scale(1.08);
}


/* ============================================================
   PAGINACIJA
   ============================================================ */
.wc-block-product-collection-pagination,
.woocommerce nav.woocommerce-pagination{
  margin:56px 0 0;display:flex;justify-content:center;
}
.wc-block-product-collection-pagination ul,
.woocommerce nav.woocommerce-pagination ul{
  display:flex;gap:4px;list-style:none;padding:0;margin:0;
}
.wc-block-product-collection-pagination a,
.wc-block-product-collection-pagination span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;border-radius:8px;
  color:var(--grey-500);font-size:13px;font-weight:700;
  transition:color .2s,background .2s;
}
.wc-block-product-collection-pagination a:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover{color:var(--navy-800);background:var(--grey-200)}
.woocommerce nav.woocommerce-pagination ul li span.current{color:var(--white)!important;background:var(--navy-800)}
EOF
li.wc-block-product .wc-block-components-product-image{order:1}
li.wc-block-product .wp-block-post-title{order:3}
li.wc-block-product .wc-block-components-product-price{order:4}

/* ============================================================
   RASPORED KARTICE v5 — naslov+dugme u istom redu, cena ispod
   ============================================================ */
li.wc-block-product{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  grid-template-areas:
    "image  image"
    "title  button"
    "price  price"!important;
  column-gap:12px;
  row-gap:2px;
}
li.wc-block-product > .wc-block-components-product-image{grid-area:image}
li.wc-block-product > .wp-block-post-title{
  grid-area:title;align-self:center;margin:14px 0 0!important;
}
li.wc-block-product > div[data-block-name="woocommerce/product-price"]{
  grid-area:price;margin:6px 0 0!important;
}
li.wc-block-product > .wp-block-button.wc-block-components-product-button{
  grid-area:button!important;
  align-self:center!important;justify-self:end!important;
  margin:14px 0 0!important;
}

/* neutrališe WooCommerce-ovu columns-N width:calc(20% - Xem) na <li> */
li.wc-block-product{
  width:100%!important;
  min-width:0!important;
}

/* header uvek vidljiv (nema tamnog hero-a ispod na ovoj strani) */
body.woocommerce-shop .hdr,
body:has(.wc-block-product-template) .hdr{
  background:rgba(5,15,32,.95)!important;
  backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.09);
}

/* ispravka razmaka od headera — header je ovde neproziran pa treba veći padding-top */
body.woocommerce-shop main.wp-block-group,
body:has(.wc-block-product-template) main.wp-block-group{
  padding-top:136px!important;
}