/* ==========================================================================
   Reset & Base
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  background: #0d0d0d;
  color: #f0ede8;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.overlay-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Hamburger toggle (checkbox trick from Fixed+ theme)
   ========================================================================== */

#ShowMenu {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
  width: 0;
  height: 0;
}

.menu-wrap {
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
}

.hamburger {
  position: fixed;
  z-index: 115;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 13, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 200ms;
}

.hamburger:hover {
  background: rgba(13, 13, 13, 0.9);
}

/* Three-bar icon */
.hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  background: #f0ede8;
  position: relative;
  transition: background 200ms;
}

.hamburger span::before,
.hamburger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: #f0ede8;
  transition: opacity 200ms, transform 200ms;
}

.hamburger span::before { top: -5px; }
.hamburger span::after  { top:  5px; }

/* When menu is open: hide top and bottom bars, middle bar stays as × */
#ShowMenu:checked ~ .menu-wrap .hamburger span::before,
#ShowMenu:checked ~ .menu-wrap .hamburger span::after {
  opacity: 0;
}

#ShowMenu:checked ~ .menu-wrap .hamburger span {
  background: rgba(240, 237, 232, 0.5);
}

/* ==========================================================================
   Filter Panel
   ========================================================================== */

#filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background: #111;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 230ms ease-in-out;
  z-index: 110;
  padding: 64px 0 48px;
  border-right: 1px solid rgba(240, 237, 232, 0.06);
}

#ShowMenu:checked ~ .menu-wrap #filter-panel {
  transform: translateX(0);
}

/* Scrollbar styling for the panel */
#filter-panel::-webkit-scrollbar { width: 4px; }
#filter-panel::-webkit-scrollbar-track { background: transparent; }
#filter-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 14px;
  border-bottom: 1px solid rgba(240, 237, 232, 0.07);
  margin-bottom: 4px;
}

.filter-panel-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  opacity: 0.35;
  font-weight: 400;
}

#clear-filters {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  background: none;
  border: none;
  color: #f0ede8;
  opacity: 0.3;
  padding: 2px 0;
  transition: opacity 150ms;
}

#clear-filters:hover { opacity: 0.9; }

.filter-group {
  padding: 14px 24px 16px;
  border-bottom: 1px solid rgba(240, 237, 232, 0.05);
}

.filter-group h4 {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.3;
  font-weight: 400;
  margin-bottom: 10px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
  color: rgba(240, 237, 232, 0.65);
  transition: color 150ms;
  user-select: none;
}

.filter-item:hover {
  color: #f0ede8;
}

.filter-item input[type=checkbox] {
  width: 13px;
  height: 13px;
  accent-color: #c8a96e;
  cursor: pointer;
  flex-shrink: 0;
}

/* ==========================================================================
   Scroll Feed
   ========================================================================== */

/*
  Each card is position:fixed so all cards occupy the same viewport space,
  stacked by z-index. JS translates each card on scroll: the active card
  moves upward (translateY negative), revealing the card beneath it.
  #scroll-space (injected by JS) provides the scrollable height.
*/

#feed {
  position: relative;
}

/*
  Cards are fully transparent: with background-size:contain the photo
  letterboxes when the viewport aspect differs from the image, and any
  card background would ride up over the card beneath during the peel.
  The letterbox is instead covered by two fixed bars (#frame-bar-top /
  #frame-bar-bottom) injected by JS at every viewport size.
*/
.card {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  cursor: pointer;
  background: transparent;
  will-change: transform;
}

.card-bg {
  position: absolute;
  inset: 0;
}

/*
  Rotation frames — stacked <img> layers toggled by visibility (see
  setCardFrame in app.js). Desktop: cover — the photo fills the whole
  window, no letterbox. Mobile (≤700px): contain, framed by the fixed
  grey bars.
*/
.card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  visibility: hidden;
  pointer-events: none;
}

/* Caption fades up from bottom on hover */
.card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 80px 40px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

.card:hover .card-caption {
  opacity: 1;
  transform: translateY(0);
}

.card-name {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-price {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #c8a96e;
}

/* Empty state when all pairs filtered out */
/* Sold card — slightly dimmed with a badge */
.card-sold .card-bg {
  filter: grayscale(40%) brightness(0.7);
}

.sold-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f0ede8;
  border: 1px solid rgba(240, 237, 232, 0.4);
  padding: 4px 10px;
  pointer-events: none;
}

.empty-state {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.25;
}

/* ==========================================================================
   Product Overlay
   ========================================================================== */

#overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.97);
  display: grid;
  grid-template-columns: 1fr 360px;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015);
  transition: opacity 280ms ease, transform 280ms ease;
}

#overlay.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

#overlay-close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 10;
  background: none;
  border: none;
  color: #f0ede8;
  font-size: 26px;
  line-height: 1;
  opacity: 0.35;
  padding: 6px 10px;
  transition: opacity 150ms;
}

#overlay-close:hover { opacity: 1; }

/* --- Carousel --- */

#overlay-carousel {
  position: relative;
  overflow: hidden;
  background: #0d0d0d;
}

#overlay-photo {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#photo-prev,
#photo-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.38);
  border: none;
  color: #f0ede8;
  font-size: 32px;
  line-height: 1;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 150ms;
}

#photo-prev:hover,
#photo-next:hover {
  background: rgba(0, 0, 0, 0.8);
}

#photo-prev { left: 12px; }
#photo-next { right: 12px; }

#photo-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0.3;
  white-space: nowrap;
}

/* --- Specs panel --- */

#overlay-specs {
  padding: 52px 28px 40px;
  overflow-y: auto;
  border-left: 1px solid rgba(240, 237, 232, 0.07);
  display: flex;
  flex-direction: column;
}

#overlay-specs::-webkit-scrollbar { width: 4px; }
#overlay-specs::-webkit-scrollbar-track { background: transparent; }
#overlay-specs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }

.overlay-name {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.3;
}

.overlay-price {
  font-size: 22px;
  font-weight: 300;
  color: #c8a96e;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}

.spec-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(240, 237, 232, 0.06);
}

.spec-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.3;
  white-space: nowrap;
  flex-shrink: 0;
}

.spec-tag {
  background: none;
  border: 1px solid rgba(240, 237, 232, 0.14);
  color: #f0ede8;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  transition: border-color 150ms, color 150ms, background 150ms;
  text-align: right;
}

.spec-tag:hover {
  border-color: #c8a96e;
  color: #c8a96e;
  background: rgba(200, 169, 110, 0.07);
}

.spec-hint {
  margin-top: 24px;
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.2;
  text-transform: uppercase;
  text-align: center;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 700px) {

  /*
    Cards are transparent on mobile. Images use contain so they fit
    the full width. Two fixed grey bars (#mobile-bar-top/bottom) are
    injected by JS and sit above the cards — they never move, creating
    a static grey frame while images scroll beneath them.
  */
  body {
    background: #3a3a3a;
  }

  .card {
    background: transparent;
  }

  .card-frame {
    object-fit: contain;
  }

  /* Caption sits behind the bottom grey bar on mobile — hide it */
  .card-caption {
    display: none;
  }

  #overlay {
    grid-template-columns: 1fr;
    grid-template-rows: 52vh 1fr;
  }

  #overlay-specs {
    border-left: none;
    border-top: 1px solid rgba(240, 237, 232, 0.07);
    padding: 20px 20px 32px;
  }

  .overlay-price {
    margin-bottom: 18px;
  }

  #filter-panel {
    width: min(300px, 85vw);
  }

}

/* ==========================================================================
   No-script fallback
   ========================================================================== */

.noscript-msg {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.4;
  background: #0d0d0d;
}

/* ==========================================================================
   Product page (#/p/<id>)
   ========================================================================== */

#product-page { display: none; }

body.product-open #product-page {
  display: block;
  min-height: 100vh;
  background: #0d0d0d;
}

/* Hide the feed machinery while a product page is open */
body.product-open #feed,
body.product-open #scroll-space,
body.product-open #frame-bar-top,
body.product-open #frame-bar-bottom,
body.product-open .menu-wrap { display: none !important; }

.pp-back {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 60;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #f0ede8;
  background: rgba(13, 13, 13, 0.55);
  border: 1px solid rgba(240, 237, 232, 0.2);
  border-radius: 50%;
  transition: border-color 150ms, color 150ms;
}
.pp-back:hover { border-color: #c8a96e; color: #c8a96e; }

.pp-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  align-items: start;
  min-height: 100vh;
}

.pp-reel {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #1a1818;
  cursor: grab;
  touch-action: pan-y;       /* horizontal drags spin, vertical still scrolls */
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  align-self: center;
}
.pp-reel.dragging { cursor: grabbing; }

.pp-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.pp-reel-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.4);
  pointer-events: none;
}

.pp-info { padding-top: 40px; }

.pp-name {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pp-price {
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #c8a96e;
  min-height: 20px;
  margin-bottom: 18px;
}

.pp-collections { margin-bottom: 14px; }
.pp-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c8a96e;
  border: 1px solid rgba(200, 169, 110, 0.5);
  padding: 4px 10px;
  margin: 0 6px 6px 0;
}

.pp-chips { margin-bottom: 16px; }
.pp-chip {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #f0ede8;
  background: rgba(240, 237, 232, 0.08);
  border-radius: 3px;
  padding: 4px 10px;
  margin: 0 6px 6px 0;
}

.pp-specs { border-top: 1px solid rgba(240, 237, 232, 0.1); }
.pp-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(240, 237, 232, 0.07);
  font-size: 13px;
}
.pp-spec-label { opacity: 0.55; letter-spacing: 0.04em; }
.pp-spec-value { text-align: right; }

.pp-notes { margin-top: 20px; }
.pp-notes h4 {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.55);
  margin-bottom: 6px;
}
.pp-notes p { font-size: 13px; line-height: 1.6; opacity: 0.85; }

@media (max-width: 700px) {
  .pp-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 0 32px;
  }
  .pp-reel { aspect-ratio: 3 / 2; width: 100%; align-self: auto; margin-top: 60px; }
  .pp-info { padding: 0 18px; }
}