.polaroid-products { position: relative; isolation: isolate; background: #f1eee8; border-radius: 16px; overflow: hidden; padding: 6px 0 14px; }
.polaroid-string { position: absolute; inset: 0 0 auto; width: 100%; height: 90px; pointer-events: none; }
.polaroid-string path { fill: none; stroke: #9a8b78; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.polaroid-rail { position: relative; display: flex; align-items: flex-start; gap: 30px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #b7aea1 transparent; padding: 60px 30px 30px; cursor: grab; }
.polaroid-rail:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.polaroid-card { position: relative; flex: 0 0 260px; min-width: 0; scroll-snap-align: start; transform: rotate(var(--tilt)); transform-origin: center top; transition: transform .35s ease; margin-top: 0; }
.polaroid-card:nth-child(even) { margin-top: 12px; }
.polaroid-card:hover, .polaroid-card:focus-within { transform: rotate(0deg) translateY(-3px); }
.polaroid-print { display: block; background: #fffdf9; color: var(--ink); padding: 10px 10px 16px; box-shadow: 0 2px 4px #30291e16, 0 14px 22px -14px #30291e66; text-decoration: none; }
.polaroid-print:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.polaroid-print img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--soft); user-select: none; }
.polaroid-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: var(--font-display); font-size: 18px; line-height: 1.3; min-height: 2.6em; margin: 12px 4px 6px; }
.polaroid-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 4px; font-size: 14px; }
.polaroid-prices del { color: var(--muted); font-size: 12px; }
.polaroid-peg { position: absolute; width: 10px; height: 28px; left: calc(50% - 5px); top: -13px; background: linear-gradient(90deg,#b8915f,#e3c9a1 48%,#c6a274); border-radius: 2px; box-shadow: 1px 2px 3px #30291e40; pointer-events: none; }
.polaroid-peg::after { content: ''; position: absolute; width: 2px; height: 8px; top: 9px; left: 4px; background: #72573880; }
.polaroid-wish { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fffdf9ed; color: var(--ink); cursor: pointer; }
.polaroid-wish:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.polaroid-controls { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 4px 24px; }
.polaroid-count { margin-right: auto; font-size: 12px; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.polaroid-controls button { width: 44px; height: 44px; border: 1px solid #c9c1b6; border-radius: 50%; background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; }
.polaroid-controls button:disabled { opacity: .35; cursor: default; }
.polaroid-controls button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.polaroid-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.polaroid-rail.is-dragging .polaroid-card { transform: rotate(calc(var(--tilt) * -2)); }
@media(max-width:719px) {
  .polaroid-rail { gap: 22px; padding: 48px 22px 26px; scroll-padding-inline: 22px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .polaroid-card, .polaroid-card:hover, .polaroid-card:focus-within, .polaroid-rail.is-dragging .polaroid-card { flex-basis: min(72vw, 270px); transform: none; }
  .polaroid-card:nth-child(even) { margin-top: 0; }
  .polaroid-name { font-size: 16px; line-height: 1.4; min-height: 2.8em; margin-bottom: 8px; }
  .polaroid-controls { padding: 0 18px; }
  .polaroid-count::after { content: " · Geser"; letter-spacing: 0; }
}
@media(prefers-reduced-motion:reduce) { .polaroid-card { transition: none; } }