/* ===== Autentični proizvodi — prateća foto-galerija uz tekst =====
   Samo ova sp-simple strana; markup u sp-simple.blade.php je scoped po slug-u.
   Tokeni/.rte/.shop-head žive u spojleri.css / pages.css, ne dupliraju se ovde. */

.simple-body:has(.sp-gallery){
  display:grid;grid-template-columns:1fr;gap:36px;margin-top:var(--page-top)
}
@media(min-width:900px){
  /* aside dolazi PRVO u markupu (mobilni: slika iznad teksta, ne posle svega) —
     na desktopu ga eksplicitno vraćamo u desnu kolonu preko grid-column. */
  .simple-body:has(.sp-gallery){grid-template-columns:1fr 360px;gap:56px;align-items:start}
  .simple-body .sp-gallery{grid-column:2;grid-row:1}
  .simple-body .rte{grid-column:1;grid-row:1}
}

.sp-gallery{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line)
}
@media(min-width:900px){
  .sp-gallery{aspect-ratio:3/4;position:sticky;top:calc(var(--head-h) + var(--search-h) + 30px)}
}
.sp-gallery figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.sp-gallery figure.is-on{opacity:1}
.sp-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.sp-gallery::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.6),transparent 45%)
}
.sp-gallery-tag{
  position:absolute;left:16px;bottom:16px;z-index:1;
  background:var(--panel);color:var(--panel-fg);
  transform:skewX(-14deg)
}
.sp-gallery-tag>span{
  display:block;transform:skewX(14deg);padding:9px 16px;
  font-family:var(--h);font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.02em;font-size:.85rem;white-space:nowrap
}