/* ============================================================
   The featured row: a side-scrolling strip of recent work.
   ============================================================ */
#featuredRow{padding:52px 0 8px}
#featuredRow .section-head{align-items:flex-end;margin-bottom:20px}
.fr-arrows{display:flex;gap:8px}
.fr-arrows .btn{width:42px;height:42px;font-size:20px;line-height:1;padding:0}
.fr-arrows .btn:disabled{opacity:.3;cursor:default}
@media(max-width:700px){.fr-arrows{display:none}}   /* thumbs beat arrows on a phone */

.fr-rail{
  display:block;overflow:hidden;cursor:grab;
  touch-action:pan-y;          /* sideways swipes are ours, up and down belong to the page */
  user-select:none;-webkit-user-select:none;
  /* Snapping fights a strip that moves by itself, so it is off here. */-webkit-overflow-scrolling:touch;
  padding:6px max(16px,calc((100vw - 1200px)/2)) 22px;
  scrollbar-width:none;scrollbar-color:rgba(212,175,55,.4) transparent;
}

/* The track holds two copies of the cards. Sliding it left by the width of
   one copy lands on an identical card, so the loop has no visible seam. */
/* The outer layer follows the hand, the inner one drifts on its own.
   Keeping them separate means a drag never has to fight the animation. */
.fr-drag{will-change:transform}
.fr-track{
  display:flex;gap:16px;width:max-content;
  padding-left:max(16px,calc((100vw - 1200px)/2));
}
.fr-track.is-drifting{
  animation:frDrift var(--fr-duration,60s) linear infinite;
}
@keyframes frDrift{
  from{transform:translateX(0)}
  to{transform:translateX(calc(var(--fr-distance,0px) * -1))}
}
/* Stop the moment anyone shows interest in it. */
.fr-track.is-held,
.fr-track.is-dragging,
.fr-track:has(.fr-card.is-playing){animation-play-state:paused}

/* Pausing on hover only applies to real pointers. On a touch screen the
   hover state sticks after a tap and never clears, which would leave the
   strip frozen for the rest of the visit. */
@media (hover:hover) and (pointer:fine){
  .fr-rail:hover .fr-track.is-drifting,
  .fr-rail:focus-within .fr-track.is-drifting{animation-play-state:paused}
}
.fr-track.is-held{transition:transform .4s ease}

.fr-card{
  display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;
  flex:0 0 clamp(220px,26vw,290px);cursor:pointer;
  border:1px solid rgba(192,192,192,.14);border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,rgba(17,18,24,.94),rgba(13,27,61,.34));
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.fr-card:hover,.fr-card:focus-visible{
  transform:translateY(-6px);border-color:rgba(212,175,55,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 26px rgba(109,44,255,.18);outline:none;
}
html[data-theme="light"] .fr-card{background:#fff;border-color:rgba(80,64,36,.13)}
html[data-theme="light"] .fr-card:hover{box-shadow:0 18px 44px rgba(80,64,36,.15)}

.fr-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(255,255,255,.04)}
.fr-media img,.fr-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .35s ease,transform .5s ease;
}
.fr-media video{opacity:0}
.fr-card.is-playing .fr-media video{opacity:1}
.fr-card.is-playing .fr-media img{opacity:0}
.fr-card:hover .fr-media img{transform:scale(1.05)}

.fr-play{
  position:absolute;right:12px;bottom:12px;width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;font-size:12px;
  background:rgba(13,13,13,.72);color:#d4af37;border:1px solid rgba(212,175,55,.5);
  backdrop-filter:blur(6px);transition:opacity .25s ease;
}
.fr-card.is-playing .fr-play{opacity:0}
.fr-badge{
  position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:20px;
  font:700 10px Orbitron,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(212,175,55,.92);color:#1a1400;
}
.fr-body{padding:15px 16px 17px}
.fr-body h3{
  margin:0 0 7px;font-size:15px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fr-body p{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fr-price{font:700 15px Orbitron,sans-serif;color:#d4af37}
html[data-theme="light"] .fr-price{color:#8a6d1f}
.fr-cat{font-size:11.5px;color:var(--muted,#a9adbb);text-align:right}

@media(max-width:700px){
  #featuredRow{padding:36px 0 4px}
  .fr-card{flex-basis:min(78vw,300px)}
  .fr-rail{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){
  .fr-card,.fr-media img{transition:none}
  .fr-card:hover{transform:none}
  .fr-track.is-drifting{animation:none}
}


/* ---------- dragging ---------- */
.fr-rail.is-grabbing{cursor:grabbing}
/* a drag must not open a product: featured-row.js swallows the click that follows one */
.fr-card img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.fr-rail:focus-visible{outline:2px solid #d4af37;outline-offset:4px;border-radius:16px}

/* A hint that it can be pushed around, on the first visit only. */
@media(hover:none){
  .fr-rail{scroll-behavior:auto}
}