/* =============================================================================
   Soft Days — product image carousel (index-based, transform slider)
   Lives INSIDE the square .prod-shot box. Full images (contain, no crop).
   Vertical touch -> page scrolls; horizontal touch -> carousel (handled in JS).
============================================================================= */
.prod-shot{
  position:relative;margin:0;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--card);
  box-shadow:0 24px 60px -34px rgba(60,50,30,.4);
}
.pcarousel{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}

.pcarousel-track{
  display:flex;width:100%;height:100%;
  transform:translateX(0);
  will-change:transform;
  direction:ltr;                 /* deterministic index math, RTL-safe */
  touch-action:pan-y;            /* let the PAGE scroll vertically; JS does horizontal */
}
.pcarousel-slide{
  flex:0 0 100%;height:100%;
  display:flex;align-items:center;justify-content:center;background:var(--card);
}
.pcarousel-slide img{
  width:100%;height:100%;object-fit:contain;display:block;border-radius:0;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none;
}

/* small arrows (desktop) */
.pcarousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);background:rgba(255,255,255,.9);color:#2f302b;
  display:grid;place-items:center;cursor:pointer;font-size:1.15rem;line-height:1;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.35);transition:background .2s ease}
.pcarousel-btn.prev{inset-inline-start:10px}
.pcarousel-btn.next{inset-inline-end:10px}
.pcarousel-btn:hover{background:#fff}
.pcarousel-btn:disabled{opacity:.35;cursor:default}

/* dots */
.pcarousel-dots{position:absolute;bottom:10px;inset-inline:0;z-index:3;display:flex;gap:6px;justify-content:center}
.pcarousel-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(60,50,30,.3);transition:width .2s ease,background .2s ease}
.pcarousel-dots button.active{background:var(--gold,#C2A25A);width:20px;border-radius:5px}

@media (hover:none){.pcarousel-btn{display:none}}

/* =============================================================================
   Soft Days — small "تجارب عميلاتنا" strip (separate section, NOT the image box)
   Cards; horizontal swipe on mobile; centered on desktop. Full image, no crop.
   Native scroller with default touch-action -> vertical page scroll keeps working.
============================================================================= */
.tst-section h2{margin-bottom:14px}
.tst-strip{
  display:flex;gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  justify-content:safe center;   /* center when it fits; no clipping when it overflows */
  padding:4px;
}
.tst-strip::-webkit-scrollbar{display:none}
.tst-card{
  flex:0 0 auto;
  scroll-snap-align:center;
  width:min(360px,84vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 14px 34px -20px rgba(60,50,30,.34);
  overflow:hidden;
}
.tst-card img{
  display:block;width:100%;height:auto;max-height:440px;
  object-fit:contain;background:var(--card);
}
@media (min-width:721px){
  .tst-card{width:min(340px,42%)}
}