/* Homepage product carousel (public/assets/home-carousel.js): a slim strip
   directly under the site header, above the sale banner.

   The row moves by transform (translate3d), which the browser hands to the
   compositor, so it stays smooth on phones and never re-lays out the page.
   --per-view is read by the script, so the CSS decides how many cards fit. */
.home-carousel{background:var(--cmt-surface,#fff);border-bottom:1px solid var(--cmt-line,#d3d8df)}
.home-carousel[hidden]{display:none}
.home-carousel-inner{display:flex;align-items:center;gap:14px;padding:8px 0}
.home-carousel-title{flex:none;margin:0;max-width:9ch;font-family:inherit;font-size:.68rem;font-weight:800;letter-spacing:.12em;line-height:1.25;text-transform:uppercase;color:var(--cmt-accent,#a81f33)}
.home-carousel-viewport{--per-view:4;--gap:10px;flex:1;min-width:0;overflow:hidden;padding:2px 0;touch-action:pan-y;-webkit-user-select:none;user-select:none;contain:layout paint}
.home-carousel-viewport:focus-visible{outline:2px solid var(--cmt-accent,#a81f33);outline-offset:2px}
.home-carousel-track{list-style:none;margin:0;padding:0 1px;display:flex;gap:var(--gap);transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden}
.home-carousel-track.is-static .is-clone{display:none}
.home-carousel-slide{flex:0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));min-width:0;display:flex}
.home-carousel-card{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border:1px solid var(--cmt-line,#d3d8df);border-radius:6px;background:var(--cmt-surface,#fff);color:var(--cmt-ink,#222);text-decoration:none;-webkit-user-drag:none}
.home-carousel-card:hover,.home-carousel-card:focus-visible{border-color:var(--cmt-accent,#a81f33)}
.home-carousel-viewport.is-dragging .home-carousel-card{cursor:grabbing}
.home-carousel-art{flex:none;width:56px;height:56px;border-radius:4px;background:var(--panel2,#f1f3f6);overflow:hidden}
.home-carousel-art img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.home-carousel-copy{min-width:0;display:grid;gap:2px}
.home-carousel-badge{justify-self:start;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cmt-accent,#a81f33)}
.home-carousel-name{font-size:.82rem;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-carousel-price{font-size:.8rem;font-weight:700}
.home-carousel-price s{font-weight:400;color:var(--muted,#49515b)}
.home-carousel-out{margin-left:6px;font-size:.66rem;font-weight:600;color:var(--muted,#49515b)}
.home-carousel-controls{flex:none;display:flex;gap:4px}
.home-carousel-controls[hidden]{display:none}
.home-carousel-button{width:28px;height:28px;border-radius:50%;border:1px solid var(--cmt-line,#d3d8df);background:var(--cmt-surface,#fff);color:var(--cmt-ink,#222);font-size:1.1rem;line-height:1;padding:0;cursor:pointer;display:grid;place-items:center;touch-action:manipulation}
.home-carousel-toggle{font-size:.55rem;letter-spacing:-.1em}
.home-carousel-button:hover,.home-carousel-button:focus-visible{border-color:var(--cmt-accent,#a81f33);color:var(--cmt-accent,#a81f33)}
@media(max-width:980px){.home-carousel-viewport{--per-view:3}}
@media(max-width:720px){.home-carousel-viewport{--per-view:2}}
@media(max-width:560px){
  .home-carousel-inner{flex-wrap:wrap;gap:6px 10px;padding:6px 0 8px}
  .home-carousel-title{max-width:none;flex:1}
  .home-carousel-controls{order:2}
  .home-carousel-viewport{--per-view:1.3;order:3;flex-basis:100%}
  .home-carousel-art{width:48px;height:48px}
  .home-carousel-button{width:32px;height:32px}
}