/* PAX HVMANVM shop: black panels on the amethyst, silver hairlines, moonlit type. */
[hidden] { display: none !important; }
:root {
  --night: #050307; --panel: #000; --moon: #dfe8ff; --text: #c9ccd4; --muted: #9a94ad;
  --line: rgba(223, 232, 255, 0.22); --silver: #cfd6e6; --amethyst: #a98ae0; --ok: #9fe0b5; --warn: #f0c27a;
  --display: "IM Fell English SC", "Times New Roman", serif; --body: "Brygada 1918", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body { background: transparent; }
body { margin: 0; color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.6; min-height: 100vh;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body { background: #000; }
.wrap { max-width: 980px; margin: 0 auto; padding-block: 28px 56px; }
header.top { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
header.top a.mark { line-height: 0; border-radius: 6px; }
header.top img.p { width: 78px; height: auto; filter: drop-shadow(0 0 8px rgba(190,210,255,.4)); }
header.top img.h { width: 76px; height: auto; margin-top: 5px; filter: drop-shadow(0 0 6px rgba(190,210,255,.35)); }
h1 { font-family: var(--display); font-weight: 400; color: var(--moon); font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.15; margin: 14px 0 4px; text-wrap: balance; text-shadow: 0 0 18px rgba(190,210,255,.25); }
.sub { margin: 0; color: var(--muted); font-style: italic; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 22px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 28px; }
.piece { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.piece .ph { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 4px; background: #08060c; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(223,232,255,.12); }
.piece .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.piece .ph .x { width: 34%; aspect-ratio: 1; border: 3px solid var(--silver); position: relative; opacity: .55; }
.piece .ph .x::before, .piece .ph .x::after { content: ""; position: absolute; left: 50%; top: -8%; width: 3px; height: 116%; background: var(--silver); transform: rotate(45deg); }
.piece .ph .x::after { transform: rotate(-45deg); }
.piece h2 { font-family: var(--display); font-weight: 400; color: var(--moon); font-size: 1.45rem; margin: 0; line-height: 1.2; }
.meta { color: var(--muted); font-size: 14px; margin: 0; }
.prices { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.prices .card { color: var(--moon); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.prices .zel { color: var(--amethyst); font-size: 15px; font-variant-numeric: tabular-nums; }
.left { font-size: 14px; color: var(--muted); }
.left.low { color: var(--warn); } .left.out { color: #e59a9a; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
label.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
select, input { font: inherit; color: var(--moon); background: #0b0910; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; min-height: 44px; }
input { width: 100%; }
select:focus-visible, input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
button { font: inherit; cursor: pointer; border-radius: 4px; min-height: 44px; padding: 10px 18px; }
.btn { background: transparent; color: var(--moon); border: 1px solid var(--silver); letter-spacing: .06em; }
.btn:hover { background: rgba(223,232,255,.08); }
.btn.solid { background: var(--moon); color: #050307; border-color: var(--moon); }
.btn.solid:hover { background: #fff; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; }
.qty button { background: none; border: 0; color: var(--moon); min-width: 44px; padding: 0; font-size: 20px; }
.qty span { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.bag { margin-top: 26px; display: grid; gap: 16px; }
.bag h2 { font-family: var(--display); font-weight: 400; color: var(--moon); font-size: 1.5rem; margin: 0; }
.lines { display: grid; gap: 8px; }
.line { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.line .x { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 0 4px; min-height: 0; font-size: 14px; }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.totals .opt { border: 1px solid var(--line); border-radius: 4px; padding: 16px; display: grid; gap: 6px; }
.totals .opt h3 { margin: 0; font-weight: 500; color: var(--moon); font-size: 1rem; letter-spacing: .04em; }
.totals dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.totals dt { color: var(--muted); } .totals dd { margin: 0; text-align: right; }
.totals .sum dt, .totals .sum dd { color: var(--moon); font-size: 1.15rem; padding-top: 4px; border-top: 1px solid var(--line); }
.fine { color: var(--muted); font-size: 14px; font-style: italic; margin: 0; }
.msg { padding: 12px 14px; border-radius: 4px; border: 1px solid var(--line); }
.msg.err { border-color: #b86f6f; color: #f1c3c3; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } .panel { padding: 16px; } }
.code { font-size: 2rem; letter-spacing: .14em; color: var(--moon); font-variant-numeric: tabular-nums; }
.copyrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copyrow code { font-family: inherit; color: var(--moon); background: #0b0910; border: 1px solid var(--line); padding: 8px 10px; border-radius: 4px; user-select: all; overflow-wrap: anywhere; }
.closed { text-align: center; display: grid; gap: 14px; justify-items: center; margin-top: 30px; }
footer.f { margin-top: 36px; text-align: center; font-size: 14px; color: var(--muted); }
footer.f a { color: var(--muted); }
a { color: var(--amethyst); }

h1.porta { margin: 26px 0 6px; line-height: 0; }
h1.porta img { width: min(189px, 44vw); height: auto; filter: drop-shadow(0 3px 10px rgba(5,1,10,.7)); }
.piece .ph { aspect-ratio: 1 / 1; }
footer.f .tm { font-size: 12px; opacity: .8; }

/* PAX HVMANVM touches: doorway shapes, hand lettering, the arches as dividers */
:root { --door: 4px; }
.hwt { margin: 0 0 18px; line-height: 0; text-align: center; }
.hwt img.hwh { height: 26px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(5,1,10,.7)); }
.hwn { margin: 4px 0 0; line-height: 0; }
.hwn img { height: 21px; width: auto; filter: drop-shadow(0 2px 3px rgba(5,1,10,.7)); }
img.arches { display: block; width: 110px; height: auto; margin: 44px auto 22px; opacity: .9; }
.piece { background: rgba(0,0,0,.78); border-radius: var(--door); padding: 0 0 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(223,232,255,.14), 0 10px 30px rgba(0,0,0,.45); }
.piece .ph { border-radius: var(--door); border: 0; }
.piece > :not(.ph) { margin-left: 20px; margin-right: 20px; }
.piece .meta, .left { font-style: italic; }
.btn { border-radius: 3px; border-color: rgba(223,232,255,.65); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; padding: 12px 22px; }
.btn.solid { background: linear-gradient(#f4f6fb, #c3c9d6); border-color: #e7ebf4; }
.bag, #zellePanel, #zDone { background: rgba(0,0,0,.78); border-radius: 4px; padding: 26px 22px; box-shadow: 0 0 0 1px rgba(223,232,255,.12); }
.totals .opt { border: 0; background: rgba(223,232,255,.04); border-radius: 4px; }
.totals .sum dt, .totals .sum dd { border-top: 0; }
.closed { margin-top: 10px; }
.closed .door { background: none; border-radius: 0; padding: 10px 16px 10px; max-width: 460px; box-sizing: border-box; width: 100%; margin: 0 auto; box-shadow: none; display: grid; gap: 12px; justify-items: center; }
.line { padding-left: 22px; position: relative; }
.line::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; background: url("/hw/shop/x.png") center / contain no-repeat; }

/* Black page; the amethyst lives only in the photos and the PORTA strip */
html, body { background: #000; }
.crest { position: relative; display: grid; place-items: center; margin: 8px auto 26px; }
.crest .rays { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; pointer-events: none; }
.crest .mark { position: relative; z-index: 1; text-align: center; }
.crest img.p { width: 96px; }
.crest img.h { width: 92px; }
header.top img.by { width: 150px; height: auto; margin-top: 10px; filter: drop-shadow(0 0 7px rgba(190,210,255,.45)); }
.strip { position: relative; margin: 10px calc(50% - 50vw) 0; padding: 30px 16px 26px; text-align: center;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,0) 70%), linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.72)), url("/a2.jpg") center / cover no-repeat;
  border-top: 1px solid rgba(223,232,255,.12); border-bottom: 1px solid rgba(223,232,255,.12); }
.strip h1.porta { margin: 0 0 8px; }
.strip .sub { color: #d9d4ea; }
.piece, .bag, #zellePanel, #zDone { background: #07060a; }
label.fit { display: grid; gap: 4px; flex: 1 1 100%; font-size: 14px; color: var(--muted); }
label.fit input { width: 100%; }
.fithint { font-size: 12px; font-style: italic; line-height: 1.5; }
/* Hand-cast silver edge along the top of the PORTA band */
.strip { border-top: 0; }
.strip::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 15px;
  background: url("/hw/shop/edge.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(200,215,255,.3)); }

.strip h1.porta img { width: min(189px, 44vw); }
.strip .bypax { margin: 4px 0 12px; line-height: 0; }
.strip .bypax img { height: 13px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.strip .hwsub { margin: 0; line-height: 0; }
.strip .hwsub img { height: 11px; width: auto; max-width: 90vw; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
html, body { overflow-x: clip; }

/* Buttons: forged-silver outline (same cast silver as the lettering), standard type inside */
.btn { border: 9px solid transparent; border-image: url("/hw/shop/btn-frame.png") 15 stretch; border-radius: 0; background: transparent; padding: 4px 16px; min-height: 54px; }
.btn:hover { background: rgba(223,232,255,.07); }
.btn.solid { background: rgba(223,232,255,.08); color: var(--moon); }
.btn.solid:hover { background: rgba(223,232,255,.16); }
.btn[disabled] { opacity: .35; }

.ph.gal { position: relative; display: block; }
.ph.gal .track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ph.gal .track::-webkit-scrollbar { display: none; }
.ph.gal .track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.ph.gal .dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 8px; }
.ph.gal .dots button { width: 9px; height: 9px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); background: rgba(0,0,0,.35); }
.ph.gal .dots button.on { background: #fff; }
.schedule { display: grid; grid-template-columns: auto auto; gap: 6px 16px; margin: 8px auto 0; font-size: 14px; color: var(--muted); text-align: left; }
.schedule dt { color: var(--moon); font-style: italic; } .schedule dd { margin: 0; font-variant-numeric: tabular-nums; }

/* waitlist */
.wait-h { font-family: inherit; font-weight: normal; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; margin: 0 0 6px; color: var(--moon); }
.wait-all { margin: 0 0 18px; line-height: 1.6; }
.wait select { width: 100%; }
.form .wcheck { display: flex; gap: 10px; align-items: flex-start; font-style: italic; }
.form .wcheck input { width: 18px; height: 18px; min-height: 0; padding: 0; margin-top: 3px; flex: none; accent-color: #c9ccd4; }
.left.out a { color: var(--moon); }

.piece .ph.more { margin-top: 10px; }
.wpieces { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.wpieces legend { font-size: 14px; color: var(--muted); padding: 0; margin-bottom: 8px; width: 100%; }
.wpieces .wcheck { display: flex; gap: 8px; align-items: center; color: var(--moon); font-style: normal; font-size: 15px; }
.wpieces .wcheck input { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; accent-color: #c9ccd4; }