/* =========================================================================
   accordion.css — hover/expanding-panel layout (prototype, sits below the
   conveyor for comparison). Namespaced .acc- / #acc* so it can't collide with
   the conveyor (.lu-), the shell, styles.css, or logic.js. Uses page vars.
   ========================================================================= */
.acc, .acc *{box-sizing:border-box}

.acc{max-width:1080px; margin:0 auto; padding:48px 32px 64px; width:100%; text-align:center}
.acc-eyebrow{font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-weight:500; color:var(--gold)}
.acc h2{font-family:var(--serif); font-weight:400; line-height:1.1;
  font-size:clamp(1.9rem,4vw,2.7rem); margin:14px 0 0; color:var(--ink)}

/* the horizontal plane */
.acc-row{position:relative; display:flex; align-items:flex-end; justify-content:center;
  height:300px; margin:46px auto 0; gap:0}
.acc-row::after{content:""; position:absolute; left:6%; right:6%; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--hairline) 16%,var(--hairline) 84%,transparent)}

.acc-item{position:relative; flex:1 1 0%; min-width:0; height:100%; cursor:pointer;
  border:0; background:none; padding:0 6px;
  display:flex; align-items:flex-end; justify-content:center;
  transition:flex-grow .5s cubic-bezier(.22,.61,.36,1)}
.acc-item img{max-width:100%; max-height:92%; width:auto; height:auto; object-fit:contain;
  filter:saturate(.85) brightness(.99) opacity(.82) drop-shadow(0 10px 18px rgba(22,33,44,.28));
  transition:filter .45s ease, transform .5s ease;
  transform-origin:50% 100%; pointer-events:none;
  /* keep a stable, transparent GPU layer up front so the growing drop-shadow
     filter region doesn't paint a one-frame black backing on focus (Chrome) */
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  will-change:transform, filter}

/* focused panel */
.acc-item.is-focus{flex-grow:2.8}
.acc-item.is-focus img,
.acc-item:focus-visible img{
  filter:saturate(1) brightness(1) opacity(1) drop-shadow(0 24px 34px rgba(22,33,44,.46));
  transform:scale(1.04)}
.acc-item:focus-visible{outline:none}

/* caption (shared, updates to the focused item) */
.acc-caption{margin:22px auto 0; min-height:150px; max-width:30rem; transition:opacity .2s ease}
.acc-cap-kicker{font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--gold)}
.acc-caption h3{font-family:var(--serif); font-weight:400; font-size:1.7rem; margin:8px 0 0; color:var(--ink)}
.acc-caption p{margin:10px auto 0; max-width:26rem; color:var(--ink-soft); font-size:.98rem; line-height:1.55;
  min-height:3.1em}  /* reserve 2 lines so the caption never changes height between products */
.acc-price{margin-top:14px; font-size:.95rem; color:var(--ink)}
.acc-price b{font-family:var(--serif); font-weight:400; color:var(--darkgold)}
.acc-cta{margin-top:18px; display:inline-block; cursor:pointer;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:#fff; background:var(--ink); border:1px solid var(--ink); padding:13px 26px; border-radius:2px;
  transition:background .2s, border-color .2s}
.acc-cta:hover{background:var(--gold); border-color:var(--gold)}
.acc-cta:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(156,125,63,.35)}

/* toast + lightbox (own, acc- namespaced) */
.acc-toast{position:fixed; left:50%; bottom:34px; transform:translate(-50%,16px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:3px; font-size:.8rem;
  letter-spacing:.02em; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:1000}
.acc-toast.show{opacity:1; transform:translate(-50%,0)}
.acc-lightbox{position:fixed; inset:0; z-index:1100; display:none; align-items:center; justify-content:center;
  padding:30px; background:rgba(22,33,44,.84); cursor:zoom-out; opacity:0; transition:opacity .2s ease}
.acc-lightbox.show{display:flex; opacity:1}
.acc-lightbox img{max-width:92vw; max-height:88vh; background:#fcfcfc; padding:10px; border-radius:12px;
  box-shadow:0 30px 90px -24px rgba(0,0,0,.7); cursor:default}
.acc-lb-close{position:absolute; top:18px; right:22px; width:42px; height:42px; border-radius:50%; border:0;
  background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:background .2s}
.acc-lb-close:hover{background:rgba(255,255,255,.3)}

@media (prefers-reduced-motion: reduce){
  .acc-item{transition:none} .acc-item img{transition:none}
}
/* mobile: a discrete swipe carousel — one product centered and enlarged at a
   time; tap the centered product to blow it up. Focus follows scroll (JS). */
@media (max-width:640px){
  .acc{padding:40px 18px 56px}   /* match the page's 18px phone gutter */
  .acc-row{height:250px; overflow-x:auto; justify-content:flex-start; gap:0;
    padding:0 18%; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .acc-row::-webkit-scrollbar{display:none}
  .acc-row::after{display:none}                      /* plane line scrolls oddly here */
  .acc-item{flex:0 0 64%; scroll-snap-align:center; padding:0}
  .acc-item.is-focus{flex-grow:0}                    /* fixed slot width; enlarge via scale */
  .acc-item img{max-height:100%; transform:scale(.78); opacity:.5;
    filter:drop-shadow(0 12px 20px rgba(22,33,44,.3));
    transition:transform .35s ease, opacity .35s ease, filter .35s ease}
  .acc-item.is-focus img{transform:scale(1.6); opacity:1;
    filter:drop-shadow(0 20px 28px rgba(22,33,44,.42))}
}