/* Photo slots (filled by js/photos.js). Each slot falls back to its icon / artwork when the photo is missing. */

/* ---- hero slider: photo on the right, blue fade on the left so the text stays readable ---- */
.slide.has-photo{background:linear-gradient(90deg,rgba(6,47,168,.97) 0%,rgba(8,55,185,.84) 42%,rgba(10,63,196,.12) 100%),var(--photo) center/cover no-repeat}
.slide.has-photo .slide-art{display:none}

/* ---- shop by category tiles ---- */
.cat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cat-tile{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;color:#fff;box-shadow:var(--shadow);background:linear-gradient(135deg,#0a3fc4,#0aa591);transition:.25s}
.cat-tile:nth-child(4n+2){background:linear-gradient(135deg,#0aa591,#0a3fc4)}
.cat-tile:nth-child(4n+3){background:linear-gradient(135deg,#062f9a,#3b82f6)}
.cat-tile:nth-child(4n){background:linear-gradient(135deg,#0f766e,#22c1a7)}
.cat-tile:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(15,27,61,.2)}
.cat-tile>i{font-size:2.6rem;opacity:.95}
.cat-tile>span{position:absolute;left:1rem;bottom:.8rem;right:1rem;font-weight:700;font-size:1rem;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.cat-tile.has-photo{background:linear-gradient(180deg,rgba(15,27,61,0) 35%,rgba(15,27,61,.78) 100%),var(--photo) center/cover no-repeat}
.cat-tile.has-photo>i{display:none}
.cat-tile.has-photo:hover{filter:brightness(1.06)}

/* ---- promo cards ---- */
.promo{background-size:cover}
.promo.has-photo .pic{display:none}
.promo.has-photo.p-app,.promo.has-photo.p-sell{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 50%,rgba(255,255,255,.05) 100%),var(--photo) center/cover no-repeat}
.promo.has-photo.p-deal{background:linear-gradient(90deg,#0631a8 0%,#0a3fc4 38%,rgba(10,63,196,.6) 56%,rgba(10,63,196,0) 78%),linear-gradient(rgba(10,63,196,.38),rgba(10,63,196,.38)),var(--photo) right center/auto 100% no-repeat,#0a3fc4}

/* ---- login / register side photo (desktop only) ---- */
.auth-photo{display:none}
@media(min-width:900px){
  .auth-main:has(.auth-photo.has-photo){grid-template-columns:minmax(0,1fr) 440px;gap:2rem;max-width:1000px;margin-inline:auto;align-items:stretch;place-items:stretch}
  .auth-photo.has-photo{display:flex;align-items:flex-end;border-radius:var(--r);overflow:hidden;min-height:480px;padding:2rem;color:#fff;background:linear-gradient(180deg,rgba(15,27,61,.05) 30%,rgba(15,27,61,.85) 100%),var(--photo) center/cover no-repeat;box-shadow:var(--shadow)}
  .auth-photo h2{font-size:1.5rem;line-height:1.25}
  .auth-photo p{opacity:.9;font-size:.92rem;margin-top:.3rem}
}

@media(max-width:1000px){.cat-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.cat-tiles{grid-template-columns:repeat(2,1fr)}.cat-tile>i{font-size:2rem}}

/* hero crop: the banner is wide and short, so tell each photo which part to keep in view */
.slide.has-photo[data-photo$="hero-3.jpg"]{background-position:0 0,center 23%}   /* portrait photo: keep her face */
.slide.has-photo[data-photo$="hero-1.jpg"]{background-position:0 0,center 55%}   /* market: keep the people */
.slide.has-photo[data-photo$="hero-2.jpg"]{background-position:0 0,center 75%}   /* bags + laptop sit low in the photo */

/* promo crops: keep the person / the action on the right, away from the card text */
.promo.has-photo.p-app{background:linear-gradient(90deg,#dff7f0 0%,#dff7f0 42%,rgba(223,247,240,.55) 54%,rgba(223,247,240,0) 68%),var(--photo) right center/auto 100% no-repeat,#dff7f0}
.promo.has-photo.p-sell{background-position:0 0,center 68%}
.auth-photo[data-photo$="auth.jpg"]{background-position:0 0,center 18%}

/* category tile crops */
.cat-tile.has-photo[data-photo$="cat-furniture.jpg"]{background-position:0 0,center 78%}   /* portrait photo: show the sofa */