/* ============================================================
   BYC 2026 SHOP ARCHIVE CSS - hand-maintained source of truth.
   Originally generated from design-prototypes/shop-v1-mono-titles.html by
   _build_shop_css.py (now retired to design-prototypes/archive/). Edit THIS
   file directly; the prototype is design reference only and is out of date.
   Do NOT regenerate - it would revert live fixes.
   ============================================================ */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-variable-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:optional;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-variable-latin.woff2') format('woff2');
  font-weight:100 800;font-style:normal;font-display:optional;
}
@font-face{
  font-family:'Orbitron';
  src:url('../fonts/orbitron-v31-latin-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:optional;
}

/* guards against parent-theme/plugin styles (Astra prints some in the footer) */
body.byc-2026{margin:0;font-family:'Inter',system-ui,sans-serif}
body.byc-2026{
  background-color:#0a0a0b !important;
  background-image:
    linear-gradient(rgba(255,255,255,.019) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.019) 1px,transparent 1px) !important;
  background-size:52px 52px !important;
  background-position:center top !important;
  background-attachment:scroll !important;
}
body.byc-2026 h1,body.byc-2026 h2,body.byc-2026 h3,body.byc-2026 h4,
body.byc-2026 h5,body.byc-2026 h6{margin:0;color:inherit;
  font-family:'Inter',system-ui,sans-serif}
body.byc-2026 a{text-decoration:none}
body.byc-2026 p{margin:0}
body.byc-2026 button{font:inherit}

  /* ============================================================
     DESIGN TOKENS - same system as landing-v3
     ============================================================ */
  :root{
    --accent:        #f2202e;
    --accent-dim:    #ff525e;
    --accent-glow:   rgba(242,32,46,.22);

    --bg:            #0a0a0b;
    --bg-soft:       #0d0d0f;
    --surface:       #101012;
    --surface-2:     #141417;
    --inset:         #0b0b0d;
    --line:          rgba(255,255,255,.07);
    --line-faint:    rgba(255,255,255,.019);
    --line-strong:   rgba(255,255,255,.15);

    --text:          #f4f4f5;
    --text-muted:    #8a8a90;
    --text-faint:    #5b5b61;

    --radius:0px;
    --maxw:          1120px;   /* wider canvas - gallery pages earn the room */
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

    --fgap:8px;--bracket:rgba(255,255,255,.5);--bsize:18px;--bweight:1px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.5;
    -webkit-font-smoothing:antialiased;
    background-image:
      linear-gradient(var(--line-faint) 1px,transparent 1px),
      linear-gradient(90deg,var(--line-faint) 1px,transparent 1px);
    background-size:52px 52px;background-position:center top;
  }
  /* grain overlay - covers everything except .frame elements */
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;
    opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative}
  a{color:inherit;text-decoration:none}

  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-muted);display:inline-flex;align-items:center;gap:10px}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 4px var(--accent-glow)}
  .h-display{font-weight:800;letter-spacing:-.03em;line-height:1.02;
    font-size:clamp(36px,5.5vw,64px)}
  .h-display .muted{color:var(--text-muted)}
  .lead{color:var(--text-muted);font-size:clamp(15px,1.3vw,18px);max-width:52ch}

  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;
    letter-spacing:.04em;height:46px;padding:0 22px;border-radius:6px;line-height:1;border:1px solid var(--line-strong);
    transition:.18s ease;cursor:pointer;background:none;color:var(--text)}
  .btn-primary{background:#fff;color:#000;border-color:#fff;font-weight:600}
  .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff;
    box-shadow:0 0 30px var(--accent-glow)}
  .btn-ghost:hover{border-color:var(--line-strong);background:var(--surface-2)}

  .pill{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-dim);border:1px solid rgba(242,32,46,.35);border-radius:0;
    padding:5px 10px;display:inline-flex;align-items:center;gap:8px;background:rgba(242,32,46,.05)}
  .pill .dot{width:6px;height:6px;box-shadow:none}
  .pill.grey{color:var(--text-muted);border-color:var(--line);background:transparent}
  .pill.grey .dot{background:var(--text-faint)}

  /* ---------- nav ---------- */
  header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
    background:rgba(10,10,11,.72);border-bottom:1px solid var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;
    max-width:var(--maxw);margin:0 auto;padding:0 24px}
  /* brand lockup: real SVG mark + wordmark in Orbitron (logo-only exception) */
  .brand{display:flex;align-items:center;gap:12px;font-family:'Orbitron',var(--sans);
    font-weight:700;letter-spacing:.04em;font-size:16px;color:#fff}
  .brand svg{width:28px;height:28px;display:block;flex:none;
    filter:drop-shadow(0 0 12px var(--accent-glow))}
  .nav-links{display:flex;gap:24px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--text-muted);line-height:1;align-items:center}
  .nav-links a:hover{color:var(--text)}
  .nav-links a.active{color:var(--text)}
  @media(max-width:860px){.nav-links{display:none}}

  /* ---------- page head ---------- */
  .page-head{padding:72px 0 40px}
  .page-head .h-display{margin:16px 0 18px}
  .page-head .meta{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-faint);margin-top:20px}
  .page-head .meta b{color:var(--text-muted);font-weight:500}

  /* ---------- filter bar ---------- */
  .filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:20px 0 8px;border-top:1px solid var(--line)}
  .filterbar .label{font-family:var(--mono);font-size:12px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--text-faint);margin-right:8px}
  .fbtn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-muted);border:1px solid var(--line);border-radius:6px;background:none;
    padding:8px 14px;cursor:pointer;transition:.16s ease;display:inline-flex;align-items:center;gap:8px}
  .fbtn .fdot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);transition:.16s}
  .fbtn:hover{color:var(--text);border-color:var(--line-strong)}
  .fbtn.active{color:var(--accent-dim);border-color:rgba(242,32,46,.4);background:rgba(242,32,46,.05)}
  .fbtn.active .fdot{background:var(--accent)}

  /* ============================================================
     PRODUCT GRID - image (framed) → badges → title
     ============================================================ */
  /* 2-up gallery on a wide canvas - ~620px per screenshot, click to zoom */
  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:48px 0 96px}
  @media(max-width:880px){.grid{grid-template-columns:1fr}}

  .product{background:var(--surface);position:relative;min-width:0;
    padding:0;display:flex;flex-direction:column;transition:.2s ease}
  /* C-card: corner brackets ARE the card border (no box border) */
  .product>.cb{position:absolute;width:18px;height:18px;z-index:46;pointer-events:none;
    transition:.2s ease}
  .product>.cb.tl{top:0;left:0;border-top:1px solid var(--bracket);border-left:1px solid var(--bracket)}
  .product>.cb.tr{top:0;right:0;border-top:1px solid var(--bracket);border-right:1px solid var(--bracket)}
  .product>.cb.bl{bottom:0;left:0;border-bottom:1px solid var(--bracket);border-left:1px solid var(--bracket)}
  .product>.cb.br{bottom:0;right:0;border-bottom:1px solid var(--bracket);border-right:1px solid var(--bracket)}
  .product:hover>.cb{width:26px;height:26px;border-color:rgba(255,255,255,.85)}
  /* card corners overlap the screenshot - they need more presence than the
     page-frame brackets (.28 white vanishes over chart imagery) */
  .product>.cb{filter:drop-shadow(0 0 1px rgba(0,0,0,.65))}

  .product.hidden{display:none}

  .trow{display:flex;justify-content:space-between;align-items:center;gap:18px;
    padding:15px 18px 16px;margin-top:auto;min-width:0}
  .trow h3{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--text);margin:0;line-height:1.5;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .price{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text-muted);
    white-space:nowrap}
  .price .old{color:var(--text-faint);text-decoration:line-through;font-size:12px;
    margin-right:9px;font-weight:400}

  /* badges on top */
  .badges{display:flex;gap:7px;flex-wrap:wrap}
  .badge{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-muted);border:1px solid var(--line);border-radius:0;padding:4px 9px;
    display:inline-flex;align-items:center;gap:7px}
  .badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-faint)}
  .product:hover .badge{border-color:var(--line-strong)}

  /* trademark frame (crisp above grain) */
  .frame{position:relative;z-index:45}  /* above grain (40), below sticky nav (50) */
  .frame .cb{position:absolute;width:var(--bsize);height:var(--bsize);z-index:3;pointer-events:none;filter:drop-shadow(0 0 1px rgba(0,0,0,.65))}
  .frame .cb.tl{top:calc(var(--fgap)*-1);left:calc(var(--fgap)*-1);
    border-top:var(--bweight) solid var(--bracket);border-left:var(--bweight) solid var(--bracket)}
  .frame .cb.tr{top:calc(var(--fgap)*-1);right:calc(var(--fgap)*-1);
    border-top:var(--bweight) solid var(--bracket);border-right:var(--bweight) solid var(--bracket)}
  .frame .cb.bl{bottom:calc(var(--fgap)*-1);left:calc(var(--fgap)*-1);
    border-bottom:var(--bweight) solid var(--bracket);border-left:var(--bweight) solid var(--bracket)}
  .frame .cb.br{bottom:calc(var(--fgap)*-1);right:calc(var(--fgap)*-1);
    border-bottom:var(--bweight) solid var(--bracket);border-right:var(--bweight) solid var(--bracket)}
  /* uniform ratio matching the native ~1910x890 exports; click for full size */
  .product .shot{background:var(--inset);border:0;border-bottom:1px solid var(--line);
    overflow:hidden;aspect-ratio:1910/890;cursor:zoom-in;position:relative;z-index:45}
  /* single-row badge strip: never wraps to a 2nd row, so every card keeps the
     same height (grid uniformity). PHP prints all badges in priority order;
     byc-chrome.js measures the strip and folds the overflow into a +N chip.
     No-JS / pre-JS fallback: the row stays one line (nowrap + overflow:hidden)
     with a soft right-edge fade so the cut never looks chopped. */
  .product .meta{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow:hidden;
    padding:12px 18px 11px;border-bottom:1px solid var(--line);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)}
  .product .meta .b{flex:0 0 auto;white-space:nowrap;font-family:var(--mono);font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--line);
    padding:4px 9px;display:inline-flex;align-items:center;gap:7px;transition:.16s}
  .product .meta .b::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-faint)}
  /* +N overflow counter for the folded badges; quieter, no dot. The whole card
     links to the product page, where the full badge list is always shown. */
  .product .meta .b.more{color:var(--text-muted);letter-spacing:.08em}
  .product .meta .b.more::before{display:none}
  .product:hover .meta .b{border-color:var(--line-strong)}

  .product .shot img{display:block;width:100%;height:100%;object-fit:cover}

  /* MONO VARIANT, dimmed: the screenshot is the hero - title + price are
     quiet mono captions, not headlines */
  .product h3{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text-muted);
    letter-spacing:.02em;line-height:1.5;transition:.18s}
  .product .trow{margin-top:auto}

  /* whole card is the link - hover lifts the caption back to full strength */
  .product{cursor:pointer}
  .product:hover h3{color:var(--text)}
  .product:hover .price{color:var(--text)}

  /* empty state */
  .empty{display:none;text-align:center;padding:80px 0;color:var(--text-faint);
    font-family:var(--mono);font-size:13px;letter-spacing:.1em}
  .empty.show{display:block}

  /* ---------- lightbox - inspect a template at native resolution ---------- */
  .lightbox{position:fixed;inset:0;z-index:20000;display:none;align-items:center;
    justify-content:center;padding:4vw;background:rgba(5,5,6,.92);backdrop-filter:blur(6px);
    cursor:zoom-out}
  .lightbox.open{display:flex}
  .lightbox img{max-width:100%;max-height:88vh;display:block;border:1px solid var(--line-strong);
    border-radius:0}
  .lightbox .cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--text-muted);white-space:nowrap}
  .lightbox .x{position:absolute;top:20px;right:26px;font-family:var(--mono);font-size:12px;
    letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase}

  footer{border-top:1px solid var(--line);padding:40px 0;color:var(--text-faint);
    font-family:var(--mono);font-size:12px;letter-spacing:.06em}
  .foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
  .note{font-family:var(--mono);font-size:12px;color:var(--text-faint);letter-spacing:.06em;
    text-align:center;padding:18px;border-top:1px dashed var(--line);line-height:1.8}

/* ============================================================
   WP/WOO COMPAT + ARCHIVE-ONLY ADDITIONS (not in the prototype)
   ============================================================ */
/* WooCommerce price markup (del/ins) mapped onto the dimmed mono style */
.trow .price del{color:var(--text-faint);font-size:12px;margin-right:9px;font-weight:400}
.trow .price del .amount{text-decoration:line-through}
.trow .price ins{text-decoration:none}
.trow .price .amount{font-family:var(--mono)}
/* WP attachment images inside the shot box */
.frame .shot img{width:100%;height:100%;object-fit:cover;display:block}
/* filter chips are links here (server-side filtering), not buttons */
a.fbtn{display:inline-flex}
/* whole card navigates; no zoom cursor on the archive */
.frame .shot,.product .shot{cursor:pointer}
/* slimmer page head (H1 only after header rework) */
.page-head{padding:64px 0 28px}
/* Woo screen-reader price annotations must not render visibly */
.trow .price .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
/* pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 0 96px;font-family:var(--mono)}
.pager a,.pager span.cur{font-size:12px;letter-spacing:.1em;color:var(--text-muted);
  border:1px solid var(--line);border-radius:6px;padding:9px 14px;transition:.16s ease}
.pager a:hover{color:var(--text);border-color:var(--line-strong)}
.pager span.cur{color:var(--accent-dim);border-color:rgba(242,32,46,.4);
  background:rgba(242,32,46,.05)}
/* per-category marketing block under the grid */
.catmkt{display:flex;gap:26px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);padding:34px;margin:8px 0 96px}
.catmkt .cicon{width:52px;height:52px;border:1px solid var(--line);flex:none;
  background:var(--surface-2);display:grid;place-items:center;color:var(--text-muted)}
.catmkt .cicon svg{width:26px;height:26px}
.catmkt h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.catmkt p{color:var(--text-muted);font-size:14.5px;line-height:1.65;max-width:70ch}
@media(max-width:640px){.catmkt{flex-direction:column;padding:24px}}

/* ============================================================
   PULSING DOTS - design-system rule:
   ONLY the primary 7px accent dots (eyebrows / section markers /
   status bars) breathe. Small dots NEVER animate: pill dots,
   badge bullets, assure-list bullets, filter fdots.
   ============================================================ */
@keyframes bycPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-glow)}
  50%{box-shadow:0 0 0 8px rgba(242,32,46,.07)}}
.dot{animation:bycPulse 3.2s ease-in-out infinite}
.pill .dot{animation:none}
@media (prefers-reduced-motion: reduce){.dot{animation:none}}