/* ============ Layout ============ */
.cart-shell { padding: 24px; }
.cart-grid { display: grid; gap: 24px; margin-top: 48px; }

@media (min-width: 1024px){
  .cart-grid{
    grid-template-columns: 1fr 400px; /* malo šira desna kolona */
    align-items: start;
  }
}

/* Woo poruke / heading */
.woocommerce-notices-wrapper{ margin-bottom: 12px; }
.cart-heading{ font-size: 34px; font-weight: 700; margin: 30px 0px 40px; }

/* ============ Lijevo: lista proizvoda ============ */
.product-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  width: 100%;
}

/* media | title | qty | price | remove */
.product-row{
  width: 100%;
  display: grid;
  grid-template-columns: 120px minmax(180px,1fr) 170px 160px 48px;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 12px 14px;
}

@media (max-width: 1100px){
  .product-row{
    grid-template-columns: 100px 1fr 30px;
    grid-template-areas:
      "media title  remove"
      "qty   price  remove";
    gap: 10px 12px;
  }
  .product-row .media  { grid-area: media; }
  .product-row .title  { grid-area: title; }
  .product-row .qty    { grid-area: qty; }
  .product-row .price  { grid-area: price; }
  .product-row .remove { grid-area: remove; justify-self: end; align-self: start; }
}

/* Slika – cijela vidljiva (bez rezanja) */
.cell.media .thumb{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.cell.media .thumb img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Naslovi */
.cell.title .brand{ font-size: 14px; font-weight: 800; letter-spacing: .02em; margin-bottom: 2px; }
.cell.title .name{ font-size: 18px; margin: 0; font-weight: 700; }
.cell.title .name a{ color: inherit; text-decoration: none; }
.cell.title .name a:hover{ text-decoration: underline; }
.cell.title .meta{ opacity: .75; font-size: 13px; margin-top: 4px; }

/* Količina */
.qty-wrap{
  display: inline-grid;
  grid-template-columns: 36px 60px 36px;
  gap: 6px;
  align-items: center;
}
.qty-btn{
  height: 36px; width: 36px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}
.qty-btn:active{ transform: scale(0.98); }
.cart-shell .qty-wrap input.qty{
  width: 60px !important;
  text-align: center;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

/* Cijena (VEĆA) */
.cell.price .single-price{
  font-weight: 800;
  font-size: 22px;
  white-space: nowrap;
  color: #1a1a1a;
}

/* Uklanjanje */
.cell.remove{ text-align: right; }
.remove-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f6f6f7;
  text-decoration: none;
}
.remove-link:hover{ background: #ededf0; }
.remove-link img{ width: 20px; height: 20px; display: block; }

/* Lijeve akcije – skrivene (auto update radi JS) */
.cart-actions{ display: none !important; }

/* ============ Desno: summary ============ */
.cart-summary{ position: sticky; top: 24px; }
.summary-card{
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px 18px 18px;
  background: #fff;
}

/* SAKRIJ “Cart totals” naslov i “Subtotal” red */
.cart-summary .cart_totals > h2{ display:none; }
.cart-summary .shop_table tr.cart-subtotal{ display:none; }

/* Kupon */
.summary-coupon{ margin: 12px 0 8px; }
.summary-coupon label{ display:block; font-size:14px; margin-bottom:6px; opacity:.8; }
.summary-coupon .coupon-row{ display:flex; gap:8px; align-items:center; }
.summary-coupon input{
  flex: 1 1 auto;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

/* Payments – veliki logotipi, centrirano, 90% širine */
.payments { text-align: center; margin-top: 14px; }
.payments-logos{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
}
.payments-logos img{
  height: 36px;       /* veće ikone */
  width: auto;
  object-fit: contain;
  display: block;
  filter: saturate(0) opacity(.9);
  transition: filter .2s ease, opacity .2s ease;
}
@media (min-width: 1280px){
  .payments-logos img{ height: 42px; }
}
.payments-logos img:hover{ filter: none; opacity: 1; }

/* (Opcionalno) sakrij header/footer na Basic templatu */
body.page-template-template-parts-page-basic #header,
body.page-template-template-parts-page-basic #footer{ display: none !important; }

/* sakrij site-title/entry-title na Basic templatu */
body.page-template-template-parts-page-basic .site-title,
body.page-template-template-parts-page-basic .site-branding,
body.page-template-template-parts-page-basic h1.entry-title{ display: none !important; }

/* Lens meta info ispod naziva */
.lens-meta {
  margin-top: 4px;
  padding-left: 1.2em;
  list-style-type: disc;
  font-size: 13px;
  line-height: 1.4em;
  color: #333;
  opacity: 0.9;
}
.lens-meta li strong {
  font-weight: 600;
  margin-right: 4px;
}

/* ==========================================
   CART TOTAL + CHECKOUT CTA (FINAL STYLE)
========================================== */

/* koristi Open Sans u desnom panelu */
.cart-summary,
.cart-summary * {
  font-family: "Open Sans", sans-serif;
}

/* 1) sakrij default Woo "Proceed to checkout" (dupli gumb) */
.wc-proceed-to-checkout{
  display: none !important;
}

/* 2) sakrij Woo label "Total" (th) */
.cart-summary .shop_table .order-total th{
  display: none !important;
}

/* 3) "Ukupno" + cijena u jednom redu */
.cart-summary .shop_table .order-total td{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

/* "Ukupno" – ISTA VELIČINA KAO CIJENA */
.cart-summary .shop_table .order-total td::before{
  content: "Ukupno";
  font-size: 30px;
  font-weight: 800;
  color: #111;
}

/* Cijena – ISTA VELIČINA */
.cart-summary .shop_table .order-total .amount{
  font-size: 30px;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

/* 4) VEĆE DUGME + tekst "Checkout" (tekst promijeni u HTML-u gumba) */
.checkout-btn{
  width: 100%;
  margin-top: 20px;
  padding: 18px 20px;              /* ⬅️ veća visina */
  font-size: 18px;                 /* ⬅️ veći font */
  font-weight: 700;
  border-radius: 14px;
  background: #2596be !important;
  color: #ffffff !important;
  text-align: center;
}

.checkout-btn:hover{
  background:#1e4257 !important;
}