/* ═══════════════════════════════════════════════════════════════════════════
   SHOP SHELL — base geometry for #shopbar, the menu/search/piece panels and
   the bag drawer, factored out of css/maison.css (29 Sep 2026).

   These elements are all built by js/shop.js at runtime, on ANY page that
   loads it — index.html included it via maison.css already; store.html and
   its siblings (room, piece, favourites, account, checkout) previously used
   a separate static header with no menu/search of their own and never loaded
   this. Adding js/shop.js there without this file left #shopbar and the
   panels with none of their positioning (position:fixed, inset, z-index) —
   present in the DOM but laid out as ordinary static content.

   css/eam-skin.css layers colour/type on top of what is defined here and
   must stay loaded after it, exactly as it already does after maison.css on
   index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 4b · THE SHOP — bar, panels, grid, piece ═══════════════════════════
   Added 24 Aug 2026. The client's complaint was exact: the film was the only
   way through the site, so someone who already knew they wanted the Loewe
   Puzzle had to walk the whole building to reach it. This layer is the answer.

   The bar sits ABOVE the film from the first frame and never leaves. It is a
   separate element from .topbar — that one belongs to the walkthrough and fades
   with it; this one is the shop's furniture and is always there. */

#shopbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
  padding: 14px clamp(14px, 3vw, 34px);
  color: var(--eam-bone);
}
/* Oxblood wash behind the bar, fading out down the frame. */
#shopbar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 170%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(74 22 32 / .92) 0%, rgb(74 22 32 / .55) 45%, rgb(74 22 32 / 0) 100%);
}
#shopbar .sb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  color: inherit; text-decoration: none;
  font-family: var(--eam-font-proof); font-size: 9.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .82; transition: opacity .3s ease;
}
#shopbar .sb-btn:hover, #shopbar .sb-btn:focus-visible { opacity: 1; }
#shopbar .sb-right { margin-left: 0; }
#shopbar .sb-right:first-of-type { margin-left: auto; }

.sb-burger { display: inline-flex; flex-direction: column; gap: 3px; width: 15px; }
.sb-burger i { display: block; height: 1px; background: currentColor; }
.sb-glass {
  width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%;
  position: relative;
}
.sb-glass::after {
  content: ''; position: absolute; right: -4px; bottom: -3px;
  width: 5px; height: 1px; background: currentColor; transform: rotate(45deg);
}
/* The centred brand: the mark, and a hairline "Store Now" beneath it. The
   mark still links home; the tag is its own link to the full store, so the
   two are siblings rather than a link inside a link.
   `margin: 0 auto` only centres a flex item when the flex items on either
   side of it are the same width — Menu+Search (left) and Account+Bag
   (right) are not, so the mark sat visibly off-centre, pulled toward
   whichever side was narrower. Fixed 23 Sep 2026 by taking it out of flex
   flow and centring it on #shopbar itself, which is unaffected by what
   either side weighs. */
.sb-brand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sb-mark { display: block; color: inherit; }
.sb-mark svg { height: 24px; width: auto; display: block; }
.sb-brand-cta {
  font-family: var(--eam-font-proof);
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: .6;
  padding: 3px 2px 0;
  border-top: 1px solid currentColor;
  transition: opacity .3s ease;
}
.sb-brand-cta:hover, .sb-brand-cta:focus-visible { opacity: 1; }

/* On a phone the labels go and the icons carry it — five words across a
   375px bar is a bar nobody can read. The mark stays centred. */
@media (max-width: 620px) {
  #shopbar .sb-label { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #shopbar #sb-bag .sb-label { position: static; width: auto; height: auto; clip: auto; }
  .sb-mark svg { height: 20px; }
}

/* ── panels ─────────────────────────────────────────────────────────────
   One mechanism for the menu, the search and the piece. They are siblings,
   never nested, so only one can ever be open and closing is a single sweep. */
.panel {
  position: fixed; inset: 0; z-index: 1200;
  background: var(--eam-oxblood); color: var(--eam-bone);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .34s ease, visibility .34s;
}
.panel[aria-hidden="false"] { opacity: 1; visibility: visible; }
html.panel-open, html.panel-open body { overflow: hidden; }

.panel-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(18px, 4vw, 46px);
  background: var(--eam-oxblood);
  border-bottom: 1px solid rgb(var(--eam-bone-rgb) / .14);
}
.panel-close {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 26px; line-height: 1; padding: 0 4px; opacity: .7;
}
.panel-close:hover { opacity: 1; }
.panel-body { padding: clamp(26px, 5vh, 54px) clamp(18px, 4vw, 46px) 90px; }

.menu-lead {
  display: block; text-decoration: none; color: inherit;
  padding-bottom: 26px; margin-bottom: 30px;
  border-bottom: 1px solid var(--eam-aurum);
}
.menu-lead-name {
  display: block; font-family: var(--eam-font-display);
  font-size: clamp(34px, 6vw, 54px); font-weight: 300; line-height: 1.05;
}
.menu-lead-n {
  display: block; margin-top: 8px; opacity: .62;
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
}
.menu-block { margin-bottom: 34px; }
.menu-block h3 { opacity: .48; margin: 0 0 14px; font-weight: 400; }
.menu-block ul { list-style: none; margin: 0; padding: 0; }
.menu-block li + li { border-top: 1px solid rgb(var(--eam-bone-rgb) / .1); }
.menu-block a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; color: inherit; text-decoration: none;
  font-size: 16px; opacity: .9; transition: opacity .25s ease;
}
.menu-block a:hover { opacity: 1; }
.menu-strong { font-family: var(--eam-font-display); font-size: 24px !important; }
.menu-n {
  font-family: var(--eam-font-proof); font-size: 9.5px;
  letter-spacing: .1em; opacity: .5;
}
.menu-houses { columns: 2; column-gap: 34px; }
.menu-houses li { break-inside: avoid; }
.menu-quiet a { font-size: 14px; opacity: .68; }
@media (max-width: 560px) { .menu-houses { columns: 1; } }

/* ── search ─────────────────────────────────────────────────────────── */
.search-field { padding: clamp(20px, 4vh, 40px) clamp(18px, 4vw, 46px) 0; }
#search-input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid rgb(var(--eam-bone-rgb) / .28);
  color: var(--eam-bone); padding: 10px 0 14px;
  font-family: var(--eam-font-display); font-size: clamp(24px, 4.5vw, 40px);
  font-weight: 300;
}
#search-input:focus { outline: none; border-bottom-color: var(--eam-aurum); }
#search-input::placeholder { color: rgb(var(--eam-bone-rgb) / .38); }
.search-results { padding: 10px clamp(18px, 4vw, 46px) 90px; }
.search-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; color: inherit; text-decoration: none;
  border-bottom: 1px solid rgb(var(--eam-bone-rgb) / .1);
}
.sr-house {
  font-family: var(--eam-font-proof); font-size: 9.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .6; min-width: 12ch;
}
.sr-name { font-size: 16px; }
.sr-right {
  margin-left: auto; font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: .08em; opacity: .72; white-space: nowrap;
}
.search-empty { opacity: .8; }
.search-empty a { color: var(--eam-aurum); }   /* 5.46:1 on oxblood — passes */

/* ── the grid ───────────────────────────────────────────────────────── */
#shop {
  position: relative; z-index: 2;
  background: var(--eam-bone); color: var(--eam-espresso);
  padding: clamp(70px, 12vh, 140px) clamp(22px, 6vw, 90px);
}
.shop-head { max-width: 60ch; margin-bottom: clamp(30px, 5vh, 54px); }
.shop-head .proof { display: block; opacity: .5; margin-bottom: 12px; }
.shop-head h2 { font-size: clamp(30px, 5vw, 54px); }
.shop-count {
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .5; margin: 12px 0 0;
}
.shop-head .rule { margin-top: 26px; width: 120px; }
.shop-empty { max-width: 52ch; opacity: .82; }

.pgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.pcard { cursor: pointer; }
.pcard:focus-visible { outline: 2px solid var(--eam-oxblood); outline-offset: 6px; }
.pcard-plate {
  aspect-ratio: 3 / 4; background: var(--eam-alabaster);
  overflow: hidden; display: grid; place-items: center;
}
.pcard-plate img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16,.84,.32,1); }
.pcard:hover .pcard-plate img { transform: scale(1.03); }
/* No photograph yet. Rather than a broken frame or a stock picture we do not
   own, the plate carries the house's initial in the display face. It reads as
   a deliberate mark, not as a missing image. */
.pcard-plate.is-blank { background: var(--eam-alabaster); }
.pcard-initial {
  font-family: var(--eam-font-display); font-weight: 300;
  font-size: clamp(64px, 9vw, 104px); line-height: 1;
  color: var(--eam-oxblood); opacity: .16;
}
.pcard-body { padding-top: 14px; display: grid; gap: 5px; }
.pcard-house { opacity: .55; }
.pcard-name { font-family: var(--eam-font-display); font-weight: 400;
  font-size: 20px; margin: 0; line-height: 1.2; }
.pcard-mode, .pcard-price {
  font-family: var(--eam-font-proof); font-size: 10px;
  letter-spacing: .08em;
}
.pcard-mode { opacity: .5; text-transform: uppercase; }
.pcard-price { opacity: .9; }

/* ── the piece ──────────────────────────────────────────────────────── */
.panel-wide .piece-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 70px);
  padding: clamp(24px, 4vh, 50px) clamp(18px, 4vw, 46px) 100px;
  max-width: 1180px; margin: 0 auto;
}
@media (max-width: 820px) { .panel-wide .piece-wrap { grid-template-columns: 1fr; } }
.piece-plate {
  aspect-ratio: 3 / 4; background: rgb(var(--eam-bone-rgb) / .07);
  display: grid; place-items: center; overflow: hidden;
}
.piece-plate img { width: 100%; height: 100%; object-fit: cover; }
.piece-plate .pcard-initial { color: var(--eam-bone); opacity: .14; }
.piece-detail h2 { font-size: clamp(30px, 4.6vw, 52px); margin: 0 0 10px; }
.piece-cat { display: block; opacity: .55; margin-bottom: 20px; }
.piece-note { opacity: .84; max-width: 46ch; }
.piece-figure {
  font-family: var(--eam-font-display); font-size: clamp(26px, 3.4vw, 38px);
  margin: 26px 0 6px;
}
.piece-lead { display: block; opacity: .55; margin-bottom: 28px; }

.piece-sizes { margin-bottom: 26px; }
.piece-sizes .proof { display: block; opacity: .55; margin-bottom: 10px; }
.size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.size {
  background: none; border: 1px solid rgb(var(--eam-bone-rgb) / .3);
  color: inherit; cursor: pointer; padding: 10px 15px;
  font-family: var(--eam-font-proof); font-size: 11px; letter-spacing: .08em;
  transition: border-color .25s ease, background .25s ease;
}
.size:hover { border-color: var(--eam-bone); }
.size.is-on { background: var(--eam-bone); color: var(--eam-oxblood); border-color: var(--eam-bone); }
.size.is-out { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.size-note { display: block; margin-top: 10px; opacity: .45; font-size: 12px; }
.size-warn { color: var(--eam-aurum); font-size: 13px; margin: 0 0 10px; }

.piece-cta .btn-buy { width: 100%; justify-content: center; text-align: center;
  display: inline-block; text-decoration: none; }
.piece-cta .btn-buy:hover { color: var(--eam-oxblood); }
.panel .btn { border-color: rgb(var(--eam-bone-rgb) / .5); }
.panel .btn::after { background: var(--eam-bone); }
.panel .btn:hover { color: var(--eam-oxblood); border-color: var(--eam-bone); }
.piece-terms { font-size: 13px; opacity: .66; margin: 14px 0 0; max-width: 44ch; }
.piece-facts { margin: 26px 0 0; display: grid; gap: 12px; }
.piece-facts div { display: grid; grid-template-columns: 10ch 1fr; gap: 14px; }
.piece-facts dt {
  font-family: var(--eam-font-proof); font-size: 9.5px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase; opacity: .45;
}
.piece-facts dd { margin: 0; font-size: 14px; opacity: .86; }


/* ═══ 7 · BAG DRAWER ═════════════════════════════════════════════════════ */

.scrim {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(46,36,31,.62);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 800;
  width: min(440px, 100vw);
  background: var(--eam-bone);
  color: var(--eam-espresso);
  transform: translateX(101%);
  transition: transform .75s cubic-bezier(.16,.84,.32,1);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: none; }

.drawer-head {
  padding: 26px clamp(22px, 4vw, 34px);
  border-bottom: 1px solid rgba(74,22,32,.14);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-head h2 { font-size: 24px; letter-spacing: .1em; }
.icon-btn {
  background: none; border: 0; cursor: pointer; padding: 6px;
  font-size: 19px; line-height: 1; opacity: .6;
  transition: opacity .35s ease;
}
.icon-btn:hover { opacity: 1; }

.drawer-body { flex: 1; overflow-y: auto; padding: 0 clamp(22px, 4vw, 34px); }
.drawer-empty { padding: 60px 0; text-align: center; opacity: .55; }

.line {
  display: grid; grid-template-columns: 74px 1fr auto;
  gap: 16px; align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid rgba(74,22,32,.1);
}
.line img { width: 74px; aspect-ratio: 3/4; object-fit: cover; }
.line h4 { margin: 0 0 4px; font-family: var(--eam-font-display); font-size: 18px; font-weight: 400; }
.line .proof { opacity: .55; display: block; margin-bottom: 8px; }
.qty { display: flex; align-items: center; gap: 12px; }
.qty button {
  width: 24px; height: 24px; border: 1px solid rgba(74,22,32,.3);
  background: none; cursor: pointer; line-height: 1;
  display: grid; place-items: center; font-size: 13px;
}
.qty span { font-family: var(--eam-font-proof); font-size: 12px; min-width: 14px; text-align: center; }
.line-price { font-family: var(--eam-font-display); font-size: 17px; white-space: nowrap; }
.line-remove {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--eam-font-proof); font-size: 9px;
  letter-spacing: var(--eam-track-proof); text-transform: uppercase;
  opacity: .45; margin-top: 8px; text-decoration: underline;
  text-underline-offset: 3px;
}
.line-remove:hover { opacity: .85; }

.drawer-foot {
  padding: 24px clamp(22px, 4vw, 34px) 30px;
  border-top: 1px solid rgba(74,22,32,.14);
}
.subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.subtotal b { font-family: var(--eam-font-display); font-size: 25px; font-weight: 400; }
.drawer-note { font-size: 12px; opacity: .55; margin: 0 0 20px; }
.drawer-foot .btn { width: 100%; text-align: center; }