/* ============================================================
   PROIZVODI — editorial grid (3 portret + 2 široke kartice),
   detaljna stranica proizvoda, izbor dizajna, povezani proizvodi
   i strip sa primerom slobodne kombinacije dizajna.
   ============================================================ */

/* grid od 5 proizvoda: namerno editorial — 3 gore, 2 šire dole */
/* 7 proizvoda, editorial raspored: red od 3 (span-2) + dva reda od 2 (span-3) */
.products-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.8rem}
.product-card{grid-column:span 2;text-align:center;transition:var(--transition);display:block}
.product-card:nth-child(n+4){grid-column:span 3}
.product-card:hover{transform:translateY(-5px)}
.product-card .frame{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-sm);margin-bottom:1.1rem;position:relative;display:block}
.product-card:nth-child(n+4) .frame{aspect-ratio:16/9}
.product-card img{width:100%;height:100%;object-fit:cover;transition:transform 700ms ease}
.product-card:hover img{transform:scale(1.05)}
.product-card .frame::after{
  content:"Saznaj više";position:absolute;inset:auto 0 0 0;padding:.8rem;
  background:rgba(255,255,255,.92);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--color-rose-dark);opacity:0;transform:translateY(8px);transition:var(--transition);
}
.product-card:hover .frame::after,.product-card:focus-visible .frame::after{opacity:1;transform:none}
.product-card .p-title{font-family:var(--font-serif);font-size:1.35rem;margin-bottom:.15rem;display:block;line-height:1.2}
.product-card .p-sub{font-size:.78rem;color:var(--color-muted);font-weight:300;display:block}

/* detaljna stranica proizvoda */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.product-detail .frame{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);position:sticky;top:calc(var(--header-h) + 1.5rem)}
.product-detail .frame img{width:100%;height:100%;object-fit:cover;transition:opacity 300ms ease}
.product-detail .h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.product-detail .lead{margin-top:1rem;font-size:.95rem}
.detail-label{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;margin-top:2rem;display:block}

/* izbor dizajna */
.design-options{display:flex;flex-direction:column;gap:.6rem;margin:1.2rem 0 1.6rem}
.design-option{
  display:flex;align-items:center;gap:.8rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:.85rem 1.1rem;cursor:pointer;transition:var(--transition);font-size:.9rem;
}
.design-option:hover{border-color:var(--color-rose)}
.design-option input{accent-color:var(--color-rose);width:17px;height:17px;flex-shrink:0}
.design-option.is-selected{border-color:var(--color-rose);background:var(--color-rose-soft)}
.custom-note{
  display:none;background:var(--color-cream);border-radius:var(--radius-sm);padding:1rem 1.2rem;
  font-size:.84rem;color:var(--color-muted);margin-bottom:1.4rem;
}
.custom-note.is-visible{display:block}

/* galerija dizajna proizvoda (3 verzije) */
.design-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.design-gallery figure{text-align:center}
.design-gallery .frame{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-sm);margin-bottom:.8rem}
.design-gallery img{width:100%;height:100%;object-fit:cover;transition:transform 600ms ease}
.design-gallery figure:hover img{transform:scale(1.05)}
.design-gallery figcaption a{font-family:var(--font-serif);font-size:1.15rem;transition:color 300ms ease}
.design-gallery figcaption a:hover{color:var(--color-rose-dark)}

/* povezani proizvodi — "Pogledajte i" */
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem}
.related-card{text-align:center;transition:var(--transition);display:block}
.related-card:hover{transform:translateY(-3px)}
.related-card .frame{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-sm);margin-bottom:.7rem}
.related-card img{width:100%;height:100%;object-fit:cover;transition:transform 600ms ease}
.related-card:hover img{transform:scale(1.03)}
.related-card span{font-family:var(--font-serif);font-size:1.1rem}

/* strip sa primerom kombinacije dizajna */
.combo-strip{
  display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;
  max-width:960px;margin:2.4rem auto 0;
}
.combo-card{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:1.2rem 1.4rem;text-align:center;min-width:138px;transition:var(--transition);
}
.combo-card:hover{border-color:var(--color-rose);transform:translateY(-3px)}
.combo-name{font-family:var(--font-serif);font-size:1.15rem;display:block;margin-bottom:.25rem}
.combo-tag{
  display:inline-block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--color-rose-soft);color:var(--color-rose-dark);padding:.22rem .7rem;
  border-radius:999px;font-weight:500;
}
.combo-plus{font-family:var(--font-serif);font-size:1.15rem;color:var(--color-rose)}
.album-link{text-decoration: underline; color: rgb(15, 15, 135);}