/* hitscan — shared styles (store + checkout) */

:root{
  --white:#ffffff;
  --gray:#8a8a8a;
  --gray-dim:#6b6b6b;
  --box:#5c5c5c;
  --border:#ffffff;
  --black:#000000;
  --err:#ff6b6b;
  --ok:#7CFFB2;
  --info:#ffcf7a;
}

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

/* fluid root size — everything's in rem so the whole frame zooms as one */
html{
  font-size: clamp(10px, 1.05vw + 5px, 16px);
}

html,body{
  background:var(--black);
  color:var(--white);
  font-family:'JetBrains Mono', monospace;
}

/* scrollbars: squared + monochrome */
*{ scrollbar-width:thin; scrollbar-color:var(--gray-dim) transparent; }
::-webkit-scrollbar{ width:0.6rem; height:0.6rem; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--gray-dim);
  border:0.15rem solid var(--black);
}
::-webkit-scrollbar-thumb:hover{ background:var(--gray); }
::-webkit-scrollbar-corner{ background:transparent; }

body{
  padding: 2.4rem 1.25rem;   /* even top/bottom for centring */
  display:flex;
  min-height:100vh;
}

/* margin:auto centres on both axes and stays scroll-safe (top never clips).
   brand row is out of flow so the frame centres, logo floating above it. */
.page{
  width:100%;
  max-width:1150px;
  margin:auto;
  position:relative;
}

/* ---------- brand row ---------- */
/* floats above the frame so it doesn't count toward vertical centring */
.brand-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  margin-bottom:0.9rem;
}

.logo{
  height:2.125rem;
  width:auto;
  display:block;
}

/* same width as the sidebar column so the logo centres over it */
.logo-wrap{
  width:10.3rem;
  display:flex;
  justify-content:center;
}

/* ---------- outer frame ---------- */
.frame{
  border:max(1px, 0.09rem) solid var(--border);
  display:grid;
  grid-template-columns: minmax(6.5rem, 10.3rem) 1fr;
  /* fixed height sitewide; overflow scrolls inside panels. auto on mobile */
  height:45.6rem;
}

/* ---------- sidebar ---------- */
.sidebar{
  min-width:0;
  border-right:max(1px, 0.09rem) solid var(--border);
  display:flex;
  flex-direction:column;
  /* top padding matches the toolbar so the clock lines up with currency */
  padding:0.75rem 0.875rem;
}

.clock{
  font-size:0.8125rem;
  font-weight:700;
  line-height:1.5;
}

.welcome{
  font-size:0.8125rem;
  font-weight:500;
  color:var(--gray);
  margin-top:0.75rem; /* matches sidebar top padding */
  margin-bottom:0.625rem;
}

.rule{
  border:none;
  border-top:1px solid var(--white);
  margin:0.5rem 0;
}

.nav-item{
  font-size:0.875rem;
  font-weight:700;
  line-height:1.9;
  display:block;
  text-decoration:none;
  color:var(--white);
}

.nav-item.dim{ color:var(--gray); }
.nav-item[hidden]{ display:none; }

/* "- " / "> " prefix from CSS (not baked into the text) so mobile can drop it */
.page-link::before{ content:"- "; }
.page-link:not(.dim)::before{ content:"> "; }

/* account button + admin link pinned to the bottom as a unit */
.sidebar-bottom-group{
  margin-top:auto;
  display:flex;
  flex-direction:column;
}

.sidebar-bottom{
  font-size:0.8125rem;
  font-weight:700;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.3rem;
  background:none;
  border:none;
  color:var(--white);
  font-family:'JetBrains Mono', monospace;
  cursor:pointer;
  padding:0;
}

.account-points{
  font-size:0.6875rem;
  font-weight:500;
  color:var(--gray);
}

.account-identity{
  display:flex;
  align-items:center;
  gap:0.375rem;
}

.ring{
  width:0.5625rem;
  height:0.5625rem;
  border:1.5px solid var(--white);
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}

.ring.ring-filled{ background:var(--white); }

/* admin-only shortcut, toggled by auth.js */
.admin-link{ margin-bottom:0.75rem; }

/* ---------- main column ---------- */
.main{
  position:relative; /* anchors the spinner */
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0; /* let panels scroll inside the fixed frame */
}

.toolbar{
  border-bottom:max(1px, 0.09rem) solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.75rem 1.375rem;
  font-size:0.875rem;
  font-weight:700;
  gap:0.75rem;
}

.toolbar a{ color:var(--white); text-decoration:none; }
.toolbar a:hover{ color:var(--gray); }

#items-count{ color:var(--gray); transition:color .15s; }
#items-count.active{ color:var(--white); font-weight:800; }

#checkout-link{ color:var(--gray); cursor:default; }
#checkout-link.active{ color:var(--white); cursor:pointer; }
#checkout-link.active:hover{ color:var(--gray); }

/* currency switcher — toolbar's left slot */
.currency{ display:flex; align-items:center; gap:0.45rem; min-width:0; }
.cur-code{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:'JetBrains Mono', monospace;
  font-size:0.875rem;
  font-weight:700;
  color:var(--gray-dim);       /* non-current: greyed */
  transition:color .15s;
  white-space:nowrap;
}
.cur-code.active{ color:var(--white); }   /* current stays white */
.cur-code:hover{ color:var(--white); }
.cur-dot{ color:var(--gray-dim); font-weight:700; }

.title-row{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-bottom:max(1px, 0.09rem) solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;   /* by-line centred against the title */
  padding:1.25rem 1.375rem;
  flex-wrap:wrap;
  gap:0.625rem;
  /* keep header height consistent whether the title is text or an image */
  min-height:6.55rem;
}

/* optional admin header bg — blurred + darkened behind the text. bleeds past
   the row edges (title-row's overflow:hidden clips it) so the blur has no seam */
.title-row-bg{
  position:absolute;
  inset:-1.25rem;
  background-size:cover;
  background-position:center;
  filter:blur(1rem) brightness(0.45);
  z-index:-1;
}

/* image title: keep logo pinned left, by-line beside it (no wrap) */
.title-row:has(img){
  flex-wrap:nowrap;
}

.title-row h1{
  font-size:3rem;
  font-weight:800;
  letter-spacing:-0.02em;
}

.by-line{
  font-size:0.9rem;
  font-weight:700;
}

/* scroll container that keeps the stacked sections inside the fixed frame */
.store-sections{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.store-sections[hidden]{ display:none; }

.store-section{ flex:none; }

/* single section stretches to fill the frame; multiple keep the fixed row
   height and let .store-sections scroll */
@media (min-width: 621px){
  .store-section:only-child{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .store-section:only-child .products-row{
    flex:1;
    height:auto;
    min-height:0;
  }
}

/* divider between sections (2nd onward — the first already borders the toolbar) */
.store-section + .store-section .title-row{
  border-top:max(1px, 0.09rem) solid var(--border);
}

/* optional PNG title instead of an h1; capped so it can't crowd the by-line */
.section-title-image{
  max-height:3rem;
  max-width:18rem;
  width:auto;
  height:auto;
  display:block;
  flex:none;
}

/* ---------- product grid ---------- */

.products-row{
  display:grid;
  grid-template-columns: 1.65fr 1fr;
  /* fixed display height per section; .store-sections scrolls past it */
  height:34.8rem;
  flex:none;
}

.products-col{
  border-right:max(1px, 0.09rem) solid var(--border);
  display:flex;
  flex-direction:column;
  min-width:0;
}

.product-card{
  flex:1;
  display:grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(5rem, 1.15fr);
  align-items:stretch;
  padding:1.375rem;
  gap:1rem;
  min-height:0;
}

.product-card + .product-card{
  border-top:max(1px, 0.09rem) solid var(--border);
}

.product-info{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
}

.product-eyebrow{
  font-size:0.8125rem;
  font-weight:500;
  color:var(--gray);
  margin-bottom:0.375rem;
}

.product-name{
  font-size:1.4375rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.02em;
}

.product-sub{
  font-size:0.8125rem;
  font-weight:500;
  margin-top:0.375rem;
}

.product-sub-2{
  font-size:0.7rem;
  font-weight:500;
  color:var(--gray);
  margin-top:0.375rem;
}

.product-price-row{
  display:flex;
  align-items:center;   /* centre price + plus on the line */
  justify-content:space-between;
  width:100%;
  margin-top:1.25rem;
}

/* nudge the row down so the glyphs sit closer to the image, not just their box */
.products-col .product-card .product-price-row{ transform:translateY(0.5rem); }

.price{
  font-size:2.2rem;   /* matches the plus glyph's ink height */
  font-weight:800;
}

.plus{
  font-size:3.5rem;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  background:none;
  border:none;
  color:var(--white);
  font-family:'JetBrains Mono', monospace;
  padding:0.1rem 0.2rem;
  margin:-0.1rem -0.2rem;
}

/* unselected "+": pastel gradient sweeps across the glyph via background-position */
.plus:not(.selected){
  background-image:linear-gradient(90deg,#ffb3ba,#ffd8a8,#fff3ba,#b8f2c6,#bae1ff,#e0baff,#ffb3ba);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:plusFlow linear infinite;
}

@keyframes plusFlow{
  to{ background-position:-200% center; }
}

/* different speeds + offset phases (negative delays) so they don't sync up */
.products-col .product-card:nth-child(1) .plus:not(.selected){ animation-duration:7s;  animation-delay:0s;  }
.products-col .product-card:nth-child(2) .plus:not(.selected){ animation-duration:11s; animation-delay:-3s; }
.product-single .plus:not(.selected){ animation-duration:9s; animation-delay:-5s; }

@media (prefers-reduced-motion: reduce){
  .plus:not(.selected){ animation:none; background-position:0 center; }
}

/* ---------- loading spinner ---------- */
/* 3x3 grid, centre cell empty; one square chases clockwise. sits inline next
   to whatever "loading…" text the page shows. */
.loading-inline{ display:flex; align-items:center; gap:0.6rem; }
.loading-inline[hidden]{ display:none; }

/* IRL spinner sits below the title-row, above the events list */
.irl-loading-row{ padding:1.25rem 1.375rem 0; }

.loading-spinner{
  flex:none;
  display:grid;
  grid-template-columns:repeat(3, 0.375rem);
  grid-template-rows:repeat(3, 0.375rem);
  gap:0.1875rem;
}
.loading-spinner[hidden]{ display:none; }

.loading-spinner span{ background:var(--gray-dim); }
/* 8 cells clockwise from top-left; centre cell stays empty */
.loading-spinner span:nth-child(1){ grid-area:1/1; animation-delay:-0.7s; }
.loading-spinner span:nth-child(2){ grid-area:1/2; animation-delay:-0.6s; }
.loading-spinner span:nth-child(3){ grid-area:1/3; animation-delay:-0.5s; }
.loading-spinner span:nth-child(4){ grid-area:2/3; animation-delay:-0.4s; }
.loading-spinner span:nth-child(5){ grid-area:3/3; animation-delay:-0.3s; }
.loading-spinner span:nth-child(6){ grid-area:3/2; animation-delay:-0.2s; }
.loading-spinner span:nth-child(7){ grid-area:3/1; animation-delay:-0.1s; }
.loading-spinner span:nth-child(8){ grid-area:2/1; animation-delay:0s; }

.loading-spinner span{ animation:loadingChase 0.8s linear infinite; }

@keyframes loadingChase{
  0%, 12%{ background:var(--white); }
  12.5%, 100%{ background:var(--gray-dim); }
}

@media (prefers-reduced-motion: reduce){
  .loading-spinner span{ animation:none; }
  .loading-spinner span:nth-child(8){ background:var(--white); }
}

.plus.selected{
  color:var(--ok);
  font-weight:800;
  -webkit-text-fill-color:var(--ok); /* clear gradient fill */
  background:none;
  animation:none;
}

.plus.sold-out{
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--gray-dim);
  -webkit-text-fill-color:var(--gray-dim); /* clear gradient fill */
  border:max(1px, 0.09rem) solid var(--gray-dim);
  padding:0.25rem 0.5rem;
  background:none;
  animation:none;
  cursor:not-allowed;
}

.product-card.out-of-stock, .product-single.out-of-stock{ opacity:0.6; }

/* contents on desktop (swatch is the cell); a real cell on mobile */
.swatch-wrap{ display:contents; }

.swatch{
  position:relative;
  background:var(--box);
  background-size:cover;
  background-position:center;
  width:100%;
  height:100%;
  min-height:6rem;
  cursor:pointer;
}

/* click swaps the image for this box (same spot), crossfaded via opacity.
   pointer-events toggle so the hidden state isn't clickable/tabbable. */
.product-detail{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  background:var(--black);
  border:max(1px, 0.09rem) solid var(--white);
  padding:0.875rem 1rem;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s ease;
}

.swatch.showing-detail .product-detail{
  opacity:1;
  pointer-events:auto;
}

.product-detail-nav{
  display:flex;
  align-items:center;
  margin-bottom:0.75rem;
  flex:none;
}

.product-detail-pager{
  display:flex;
  align-items:center;
  gap:0.6rem;
}

.product-detail-prev, .product-detail-next, .product-detail-close{
  background:none;
  border:none;
  color:var(--white);
  font-family:'JetBrains Mono', monospace;
  cursor:pointer;
  padding:0;
  line-height:1;
}

.product-detail-prev, .product-detail-next{ font-size:1.1rem; }
.product-detail-close{ font-size:1.25rem; margin-left:auto; }

.product-detail-indicator{
  font-size:0.7rem;
  font-weight:700;
  color:var(--gray);
}

.product-detail-pages{ flex:1; min-height:0; }

.product-detail-title{
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:0.5rem;
}

.product-detail-body{
  font-size:0.8125rem;
  line-height:1.5;
  color:var(--gray);
}

/* hero card: text / image / price vertical stack, image fills the middle */
.product-single{
  flex:1;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "text"
    "image"
    "price";
  padding:1.375rem;
  min-width:0;
}
.product-single .product-info{ display:contents; }
.product-single .product-text{ grid-area:text; }
.product-single .product-price-row{ grid-area:price; margin-top:0; transform:translateY(0.5rem); }
.product-single .product-name{ font-size:1.375rem; }

.product-single .swatch{
  grid-area:image;
  width:100%;
  /* subtract the top margin so height+margin fits the grid row */
  height:calc(100% - 1.375rem);
  min-height:0;
  margin:1.375rem 0 0;
}


/* ---------- checkout ---------- */

.checkout-grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  flex:1;
  min-height:0; /* bound to frame so panels scroll */
}

.summary-panel{
  border-right:max(1px, 0.09rem) solid var(--border);
  padding:1.375rem;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow-y:auto;
}

.panel-heading{
  font-size:0.8125rem;
  font-weight:700;
  color:var(--gray);
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:1rem;
}

.cart-line{
  display:grid;
  grid-template-columns: 3.75rem 1fr auto;
  gap:0.875rem;
  align-items:center;
  padding:0.9rem 0;
  border-top:max(1px, 0.09rem) solid var(--border);
}

.cart-line:first-of-type{ border-top:none; }

#empty-cart-message{
  font-size:0.9375rem;
  padding:1rem 0;
}
#empty-cart-message a{ color:var(--white); }

.cart-swatch{ background:var(--box); width:3.75rem; height:3.75rem; flex-shrink:0; }

/* min-width:0 lets this grid item shrink below its text's natural width —
   without it a long product name forces the row wider than the panel and
   pushes the price off the right edge, especially on mobile. */
.cart-info{ min-width:0; }
.cart-info .name{ font-size:0.95rem; font-weight:800; line-height:1.2; }
.cart-info .meta{ font-size:0.75rem; color:var(--gray); margin-top:0.2rem; }

.cart-price{ font-size:1rem; font-weight:800; white-space:nowrap; }

.discount-row{
  display:flex;
  gap:0.5rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:max(1px, 0.09rem) solid var(--border);
}
.discount-row input{
  flex:1;
  min-width:0;
  background:transparent;
  border:max(1px, 0.09rem) solid var(--white);
  color:var(--white);
  font-family:'JetBrains Mono', monospace;
  font-size:0.875rem;
  font-weight:500;
  padding:0.4rem 0.6rem;
  outline:none;
  text-transform:uppercase;
}
.discount-row input::placeholder{ color:var(--gray-dim); text-transform:none; }
.discount-row button{
  background:none;
  border:max(1px, 0.09rem) solid var(--white);
  color:var(--white);
  font-family:'JetBrains Mono', monospace;
  font-size:0.8125rem;
  font-weight:700;
  padding:0 0.9rem;
  cursor:pointer;
}
.discount-row button:hover{ background:var(--white); color:var(--black); }

#discount-message{ font-size:0.8125rem; font-weight:700; min-height:1rem; margin-top:0.5rem; color:var(--err); }
#discount-message.ok{ color:var(--ok); }

.summary-totals{ margin-top:auto; padding-top:1rem; }

.total-row{
  display:flex;
  justify-content:space-between;
  font-size:0.875rem;
  font-weight:500;
  color:var(--gray);
  padding:0.4rem 0;
}
.total-row[hidden]{ display:none; }

.total-row.grand{
  border-top:max(1px, 0.09rem) solid var(--border);
  margin-top:0.5rem;
  padding-top:0.9rem;
  font-size:1.375rem;
  font-weight:800;
  color:var(--white);
}

.pay-panel{ padding:1.375rem; display:flex; flex-direction:column; min-width:0; min-height:0; overflow-y:auto; }

.field{ display:flex; flex-direction:column; margin-bottom:1.1rem; }
.field[hidden]{ display:none; }

.field label{
  font-size:0.75rem;
  font-weight:700;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:0.4rem;
}

.field input, .field select, .field textarea{
  background:transparent;
  border:none;
  border-bottom:max(1px, 0.09rem) solid var(--white);
  color:var(--white);
  font-family:'JetBrains Mono', monospace;
  font-size:0.95rem;
  font-weight:500;
  padding:0.5rem 0.1rem;
  outline:none;
}

.field select{ appearance:none; -webkit-appearance:none; }
.field select option{ background:#000; color:#fff; }
.field input::placeholder, .field textarea::placeholder{ color:var(--gray-dim); }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color:var(--white); box-shadow:0 1px 0 0 var(--white); }
.field textarea{ width:100%; resize:vertical; font-size:0.8125rem; line-height:1.5; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

#payment-element{
  border:max(1px, 0.09rem) solid var(--white);
  padding:1rem;
  margin:0.4rem 0 1.2rem;
  min-height:3rem;
}

#payment-message{
  font-size:0.8125rem;
  font-weight:700;
  color:var(--info);
  min-height:1.2rem;
  margin-bottom:0.75rem;
}

#payment-message.ok{ color:var(--ok); }
#payment-message.err{ color:var(--err); }

.pay-btn{
  width:100%;
  background:var(--white);
  color:var(--black);
  border:none;
  font-family:'JetBrains Mono', monospace;
  font-size:1.0625rem;
  font-weight:800;
  padding:0.95rem;
  cursor:pointer;
  letter-spacing:-0.01em;
}

.pay-btn:hover:not(:disabled){ background:var(--gray); }
.pay-btn:disabled{ background:var(--gray-dim); color:#222; cursor:not-allowed; }

.secure-note{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.75rem;
  color:var(--gray);
  margin-top:1rem;
}

.secure-note svg{ width:0.9rem; height:0.9rem; flex-shrink:0; }

/* ---------- order confirmed ---------- */

.confirm-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2.75rem 1.375rem;
  gap:1.5rem;
  min-height:0;
  overflow-y:auto;
}

.confirm-icon{ font-size:3rem; line-height:1; color:var(--gray); }
.confirm-icon.ok{ color:var(--ok); }
.confirm-icon.err{ color:var(--err); }

.confirm-heading{ font-size:1.5rem; font-weight:800; text-align:center; }

.confirm-sub{
  font-size:0.9375rem;
  color:var(--gray);
  text-align:center;
  max-width:30rem;
}

.confirm-order{
  width:100%;
  max-width:26rem;
  border:max(1px, 0.09rem) solid var(--border);
}

.confirm-order[hidden]{ display:none; }

/* failed / no-order states centre vertically instead of top-aligning */
body.confirm-minimal .confirm-wrap{ justify-content:center; padding-top:1.375rem; padding-bottom:1.375rem; }

.confirm-ref{ font-size:0.75rem; color:var(--gray-dim); margin-top:0.75rem; }

.confirm-back-btn{
  display:block;
  width:100%;
  max-width:26rem;
  text-align:center;
  text-decoration:none;
}

/* ---------- IRL / events ---------- */

.irl-list{ flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
.irl-list[hidden]{ display:none; }

.irl-event{
  display:grid;
  grid-template-columns: 5.5rem 1fr auto;
  grid-template-areas: "date info meta";
  gap:1.25rem;
  align-items:center;
  padding:1.25rem 1.375rem;
  border-top:max(1px, 0.09rem) solid var(--border);
}
.irl-event:first-child{ border-top:none; }
.irl-event.past{ opacity:0.5; }

.irl-date{ grid-area:date; text-align:center; line-height:1.1; }
.irl-date .day{ font-size:1.75rem; font-weight:800; }
.irl-date .mon{ font-size:0.8125rem; font-weight:700; text-transform:uppercase; color:var(--gray); }
.irl-date .yr{ font-size:0.6875rem; color:var(--gray-dim); }

.irl-info{ grid-area:info; min-width:0; }
.irl-title{ font-size:1.125rem; font-weight:800; letter-spacing:-0.01em; line-height:1.2; }
.irl-venue{ font-size:0.875rem; color:var(--gray); margin-top:0.3rem; }
.irl-desc{ font-size:0.8125rem; color:var(--gray-dim); margin-top:0.4rem; line-height:1.4; }

.irl-meta{
  grid-area:meta;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.5rem;
  text-align:right;
  white-space:nowrap;
}
.irl-time{ font-size:0.875rem; font-weight:700; }

.irl-ticket{
  display:inline-block;
  border:max(1px, 0.09rem) solid var(--white);
  color:var(--white);
  text-decoration:none;
  font-size:0.8125rem;
  font-weight:700;
  padding:0.4rem 0.7rem;
}
.irl-ticket:hover{ background:var(--white); color:var(--black); }

.irl-tag{
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--gray-dim);
  border:max(1px, 0.09rem) solid var(--gray-dim);
  padding:0.2rem 0.45rem;
}

.irl-section-label{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--gray-dim);
  padding:1.25rem 1.375rem 0.25rem;
}

.irl-section-empty{ padding:0.75rem 1.375rem 1.25rem; color:var(--gray-dim); font-size:0.875rem; }
/* grey divider above "past" only ("upcoming" already borders the title-row) */
.irl-section-label-past{ border-top:max(1px, 0.09rem) solid var(--gray-dim); }
/* label is the separator — no divider on the event right after it */
.irl-section-label + .irl-event{ border-top:none; }

.irl-empty{ padding:2rem 1.375rem; color:var(--gray); font-size:0.9375rem; }
.irl-empty a{ color:var(--white); }

/* store spinner: match the top indent to the left indent (override .irl-empty) */
#products-loading{ padding-top:1.375rem; }

/* ---------- about ---------- */

/* logo header instead of h1 text, with a smaller "fif" logo as the subtitle */
.about-header{ flex-direction:column; align-items:flex-start; gap:0.4rem; }
.about-logo{ max-height:2.5rem; max-width:100%; width:auto; height:auto; display:block; }
.about-subtitle-logo{ max-height:1.25rem; max-width:100%; width:auto; height:auto; display:block; }

.about-content{
  flex:1;
  min-height:0;                    /* stay in the frame */
  display:grid;
  grid-template-columns:1fr 1fr;   /* text | images */
  gap:2rem;
  padding:1.375rem;
  align-items:stretch;             /* image column fills height */
}

.about-text{ min-height:0; overflow-y:auto; }
.about-text p{
  font-size:0.95rem;
  line-height:1.6;
  margin-bottom:1rem;
}
.about-text p:last-child{ margin-bottom:0; }

.about-images{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-height:0;
}
/* two stacked images splitting the column height */
.about-image{
  flex:1;
  min-height:0;
  width:100%;
  background:var(--box);
}

@media (max-width: 620px){
  /* text on top, images stacked full-width below (same aspect ratio as desktop) */
  .about-content{ grid-template-columns:1fr; }
  .about-image{ flex:none; width:100%; aspect-ratio:454 / 272; min-height:0; }
}

/* ---------- admin: events (/admin) ---------- */

.admin-gate{ padding:2.5rem 1.375rem; color:var(--gray); font-size:0.9375rem; line-height:1.6; }
.admin-gate a{ color:var(--white); }

.admin-link-btn{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:'JetBrains Mono', monospace;
  font-size:inherit;
  font-weight:700;
  color:var(--gray);
  text-decoration:underline;
}
.admin-link-btn:hover{ color:var(--white); }
.admin-link-btn.danger:hover{ color:var(--err); }

.admin-event{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:0.75rem;
  padding:0.85rem 0;
  border-top:max(1px, 0.09rem) solid var(--border);
}
.admin-event:first-child{ border-top:none; }
.admin-event.past{ opacity:0.55; }

.admin-event-main{ min-width:0; }
.admin-event-main .t{ font-size:0.95rem; font-weight:800; line-height:1.2; }
.admin-event-main .m{ font-size:0.8125rem; color:var(--gray); margin-top:0.2rem; }

.admin-event-actions{ display:flex; gap:0.9rem; white-space:nowrap; }

#event-message{
  font-size:0.8125rem;
  font-weight:700;
  min-height:1.2rem;
  margin:0.2rem 0 0.75rem;
  color:var(--err);
}
#event-message.ok{ color:var(--ok); }

.form-actions{ display:flex; gap:0.75rem; align-items:center; }
.form-actions .pay-btn{ flex:1; }

/* panel fills the frame; the tab bar stays put and content scrolls below it */
#admin-panel{ flex:1; min-height:0; display:flex; flex-direction:column; }
#admin-panel[hidden]{ display:none; }
#admin-panel .checkout-grid{ min-height:0; }

.admin-nav{
  display:flex;
  gap:0.5rem;
  padding:0.9rem 1.375rem;
  border-bottom:max(1px, 0.09rem) solid var(--border);
  flex-shrink:0;
}
.admin-tab{
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gray);
  border:max(1px, 0.09rem) solid var(--border);
  padding:0.4rem 0.9rem;
}
.admin-tab:hover{ color:var(--white); }
.admin-tab.active{ background:var(--white); color:var(--black); }

/* ---- orders view ---- */
.admin-scroll{ flex:1; min-height:0; overflow-y:auto; padding:1.375rem; }

.order-card{
  border:max(1px, 0.09rem) solid var(--border);
  padding:1.1rem 1.25rem;
  margin-bottom:1rem;
}
.order-card:last-child{ margin-bottom:0; }

.order-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:0.75rem;
  margin-bottom:0.9rem;
}
.order-when{ font-size:0.8125rem; color:var(--gray); }
.order-status{
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--gray-dim);
  border:max(1px, 0.09rem) solid var(--gray-dim);
  padding:0.15rem 0.45rem;
  white-space:nowrap;
}
.order-status.ok{ color:var(--ok); border-color:var(--ok); }
.order-status.shipped{ color:var(--black); background:var(--ok); border-color:var(--ok); }

.orders-topbar{ display:flex; align-items:baseline; gap:0.75rem; flex-wrap:wrap; }
.orders-msg{ flex-basis:100%; font-size:0.8125rem; font-weight:700; margin-bottom:1rem; min-height:1rem; }
.orders-msg.ok{ color:var(--ok); }
.orders-msg.err{ color:var(--err); }

.order-buttons{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.order-sent{ font-size:0.8125rem; font-weight:700; color:var(--ok); }

.order-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
}
.order-label{
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--gray-dim);
  margin-bottom:0.4rem;
}
.order-address{ font-size:0.95rem; font-weight:500; line-height:1.55; }
.order-noaddr{ font-size:0.875rem; color:var(--gray-dim); }
.order-email{ font-size:0.8125rem; color:var(--gray); margin-top:0.5rem; word-break:break-all; }

.order-items{ list-style:none; font-size:0.9rem; line-height:1.5; }
.order-items li::before{ content:"— "; color:var(--gray); }
.order-total{ font-size:0.9rem; font-weight:800; margin-top:0.6rem; }
.order-ccy{ font-size:0.7rem; color:var(--gray); font-weight:700; }

.order-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.75rem 1.25rem;
  flex-wrap:wrap;
  margin-top:1rem;
  padding-top:0.9rem;
  border-top:max(1px, 0.09rem) solid var(--border);
}
.order-manage{ display:flex; align-items:center; gap:1.1rem; }
.order-ref{ font-size:0.7rem; color:var(--gray-dim); word-break:break-all; margin-top:0.75rem; }

/* hidden orders dimmed until "show hidden" is toggled */
.order-card.hidden-order{ opacity:0.4; }

.orders-topbar #toggle-hidden[hidden]{ display:none; }
.orders-topbar #toggle-hidden{ margin-left:auto; }

/* ---------- admin: products (/admin-products) ---------- */

.low-stock-banner{
  border:max(1px, 0.09rem) solid var(--err);
  color:var(--err);
  font-size:0.8125rem;
  line-height:1.5;
  padding:0.75rem 1rem;
  margin-bottom:1rem;
}
.low-stock-banner strong{ font-weight:800; }

.stock-badge{
  display:inline-block;
  font-size:0.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  border:max(1px, 0.09rem) solid var(--gray-dim);
  color:var(--gray-dim);
  padding:0.1rem 0.4rem;
  margin-left:0.4rem;
  vertical-align:middle;
}
.stock-badge.stock-ok{ border-color:var(--ok); color:var(--ok); }
.stock-badge.stock-low{ border-color:#ffb347; color:#ffb347; }
.stock-badge.stock-out{ border-color:var(--err); color:var(--err); }
.stock-badge.stock-hidden{ border-color:var(--gray-dim); color:var(--gray-dim); }
.stock-badge.ok{ border-color:var(--ok); color:var(--ok); }

.admin-product{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:0.75rem;
  padding:0.85rem 0;
  border-top:max(1px, 0.09rem) solid var(--border);
}
.admin-product:first-child{ border-top:none; }
.admin-product.inactive{ opacity:0.55; }

.admin-product-main{ min-width:0; }
.admin-product-main .t{ font-size:0.95rem; font-weight:800; line-height:1.2; }
.admin-product-main .m{ font-size:0.8125rem; color:var(--gray); margin-top:0.2rem; }

.admin-product-actions{ display:flex; gap:0.9rem; white-space:nowrap; flex-shrink:0; }

/* ---------- admin: sales (/admin-sales) ---------- */

.stat-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--border);
  border:max(1px, 0.09rem) solid var(--border);
}
.stat-card{ background:var(--black); padding:1.1rem 1.25rem; }
.stat-value{ font-size:1.75rem; font-weight:800; letter-spacing:-0.02em; }
.stat-label{ font-size:0.75rem; color:var(--gray); text-transform:uppercase; letter-spacing:0.05em; margin-top:0.3rem; }

.bar-chart{
  display:flex;
  align-items:flex-end;
  gap:0.5rem;
  height:8rem;
  padding:1rem 0 0.5rem;
}
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar{ width:100%; background:var(--white); min-height:2px; }
.bar-label{ font-size:0.625rem; color:var(--gray-dim); margin-top:0.4rem; }

.top-products{ display:flex; flex-direction:column; gap:0.6rem; padding-top:0.5rem; }
.top-product-row{ display:grid; grid-template-columns:9rem 1fr 2rem; align-items:center; gap:0.75rem; }
.top-product-name{ font-size:0.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-product-bar-wrap{ background:var(--box); height:0.6rem; }
.top-product-bar{ background:var(--ok); height:100%; }
.top-product-count{ font-size:0.8125rem; font-weight:700; text-align:right; }

@media (max-width: 560px){
  .stat-row{ grid-template-columns:repeat(2, 1fr); }
  .top-product-row{ grid-template-columns:6rem 1fr 2rem; }
}

/* ---------- responsive: phone-width restructure ---------- */

@media (max-width: 620px){
  /* single-column layout now, so stop following the vw clamp — fix a readable size */
  html{ font-size:16px; }

  /* top-align on mobile (desktop centres vertically) */
  body{ align-items:flex-start; }
  .page{ margin:0 auto; }

  .frame{ grid-template-columns:1fr; height:auto; min-height:0; }
  /* frame flows to content on mobile — drop per-panel scrolling, let the page scroll */
  .main, .checkout-grid, .pay-panel, .summary-panel, .irl-list, .confirm-wrap, .about-content, .about-text, .store-sections{
    min-height:auto;
    overflow:visible;
  }

  /* "<- back to store" is redundant with the sidebar's store link on mobile */
  .toolbar a[href="/"]{ display:none; }

  /* items-count on its own line up top; hide checkout while currency's expanded */
  .toolbar{ flex-wrap:wrap; }
  #items-count{ order:1; flex-basis:100%; text-align:center; }
  .currency{ order:2; }
  #checkout-link{ order:2; }
  .toolbar.currency-open #checkout-link{ display:none; }

  /* prices smaller on mobile (desktop size reads oversized here) */
  .price{ font-size:1.7rem; }

  /* by-line drops under the title/image on mobile */
  .title-row, .title-row:has(img){
    flex-direction:column;
    align-items:flex-start;
  }

  /* one layout for every product on mobile: text, price, plus, then image.
     display:contents flattens the wrappers into a single grid. */
  .products-row{ display:flex; flex-direction:column; height:auto; flex:none; }
  .products-col{ border-right:none; border-bottom:max(1px, 0.09rem) solid var(--border); }
  .product-card, .product-single{
    flex:none;           /* don't grow past content (desktop sets flex:1) */
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto; /* reset the hero's desktop rows */
    grid-template-areas:
      "text  price"
      "text  plus"
      "image image";
    align-content:start;
    /* matches the card's own padding, so the price tag sits the same
       distance from the wrapped text on its left as it does from the
       card's white border on its right */
    column-gap:1.375rem;
    row-gap:0;
    padding:1.375rem;    /* equal indents */
  }
  .product-info{ display:contents; }
  .product-price-row{ display:contents; }
  .product-text{ grid-area:text; }
  .price{ grid-area:price; justify-self:end; margin-top:0; }
  .plus{ grid-area:plus; justify-self:end; align-self:end; margin:0; }

  .swatch-wrap{ display:block; grid-area:image; width:100%; margin:1rem 0 0; }
  /* two-class selector to match (and beat) the desktop .product-single .swatch rule */
  .products-col .product-card .swatch, .product-single .swatch{
    width:100%;
    height:auto;
    min-height:0;
    flex:none;
    margin:0;
  }
  /* keep the desktop aspect ratios */
  .products-col .product-card .swatch{ aspect-ratio:295 / 251; }
  .product-single .swatch{ aspect-ratio:327 / 394; }

  /* logo back to the left with a small indent (no sidebar column above it now) */
  .logo-wrap{ width:auto; justify-content:flex-start; margin-left:0.5rem; }
  /* brand row back in normal flow on mobile */
  .brand-row{ position:static; }
  .sidebar{
    border-right:none;
    border-bottom:max(1px, 0.09rem) solid var(--border);
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    row-gap:0.5rem;
  }
  .sidebar .rule{ display:none; }
  .clock{ display:none; }
  .welcome{ display:none; }
  /* nav leads the top row now the clock is hidden */
  .nav-item{ line-height:1.4; margin-right:0.75rem; order:2; }
  .nav-item:last-of-type{ margin-right:0; }
  /* drop the prefixes on mobile — colour marks the current page ():not(.dim) for specificity) */
  .page-link::before, .page-link:not(.dim)::before{ content:""; }
  /* dot-separated instead, like the currency menu */
  .page-link{ margin-right:0; }
  .page-link:not(:last-of-type)::after{ content:"\00a0\00b7\00a0"; color:var(--gray-dim); font-weight:700; }

  /* account group on its own line below the nav row */
  .sidebar-bottom-group{
    order:3;
    flex-basis:100%;
    margin-top:0;
  }
  .admin-link{ margin-bottom:0.4rem; }
  .sidebar-bottom{
    flex-direction:row;
    align-items:center;
    gap:0;
    margin-bottom:0.25rem;
  }
  .account-identity{ order:1; }
  .account-points{ order:2; font-size:0.8125rem; color:var(--gray); }
  /* nbsp around the dot so it isn't trimmed (account-points is its own flex item) */
  .account-points:not([hidden])::before{ content:"\00a0\00b7\00a0"; color:var(--gray); }

  /* event rows: date column spans both rows, time/tickets drop under the info */
  .irl-event{
    grid-template-columns: 3.5rem 1fr;
    grid-template-areas:
      "date info"
      "date meta";
    gap:0.4rem 1rem;
  }
  .irl-meta{ flex-direction:row; align-items:center; justify-content:flex-start; }

  /* stack the multi-column panels once the frame is mobile */
  .checkout-grid{ grid-template-columns:1fr; }
  .summary-panel{ border-right:none; border-bottom:max(1px, 0.09rem) solid var(--border); }
  .field-row{ grid-template-columns:1fr; }
  .order-grid{ grid-template-columns:1fr; }

  /* 7 admin tabs wrap rather than force horizontal scroll on mobile */
  .admin-nav{ flex-wrap:wrap; gap:0.4rem; padding:0.75rem 1.375rem; }
  .admin-tab{ padding:0.35rem 0.6rem; font-size:0.75rem; }

  /* stack the points-prompt buttons on mobile */
  .points-prompt-actions{ flex-direction:column; gap:0.6rem; }
}

@media (max-width: 480px){
  .title-row h1{ font-size:2.3rem; }
}

/* ---------- accounts: login/signup modal + points prompt ---------- */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  z-index:100;
}

.modal-overlay[hidden]{ display:none; }

.modal{
  width:100%;
  max-width:24rem;
  background:var(--black);
  border:max(1px, 0.09rem) solid var(--white);
  padding:1.5rem;
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.9375rem;
  font-weight:800;
  margin-bottom:1rem;
}

.modal-close{
  background:none;
  border:none;
  color:var(--white);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.modal-tabs{
  display:flex;
  border-bottom:max(1px, 0.09rem) solid var(--white);
  margin-bottom:1.25rem;
}

.modal-tabs .tab{
  flex:1;
  background:none;
  border:none;
  color:var(--gray);
  font-family:'JetBrains Mono', monospace;
  font-size:0.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:0.6rem 0;
  cursor:pointer;
}

.modal-tabs .tab.active{ color:var(--white); }

.auth-message{
  font-size:0.8125rem;
  font-weight:700;
  color:var(--info);
  min-height:1.2rem;
  margin-bottom:0.75rem;
}
.auth-message.err{ color:var(--err); }

.points-prompt{
  border:max(1px, 0.09rem) solid var(--white);
  padding:1rem;
  margin-bottom:1.25rem;
  font-size:0.8125rem;
  line-height:1.5;
}

.points-prompt-actions{
  display:flex;
  gap:1rem;
  margin-top:0.75rem;
}

.points-prompt-actions button{
  background:none;
  border:none;
  font-family:'JetBrains Mono', monospace;
  cursor:pointer;
  padding:0;
}

.points-status{
  border:max(1px, 0.09rem) solid var(--white);
  padding:1rem;
  margin-bottom:1.25rem;
  font-size:0.8125rem;
  line-height:1.5;
  color:var(--gray);
}

.points-status strong{ color:var(--white); }

.points-logout{
  background:none;
  border:none;
  color:var(--white);
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  font-weight:700;
  text-decoration:underline;
  cursor:pointer;
  margin-left:0.5rem;
  padding:0;
}