/* ============================================================
   BYC 2026 SINGLE PRODUCT CSS - hand-maintained source of truth.
   Originally generated from design-prototypes/product-v1.html by
   _build_product_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 - locked system (Inter + JBM, screenshot-first)
     ============================================================ */
  :root{
    --accent:        #f2202e;
    --accent-dim:    #ff525e;
    --accent-rgb:    242,32,46;   /* accent as an rgb triplet, so rgba() tints theme too */
    --accent-glow:   rgba(var(--accent-rgb),.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;
    --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;
  }
  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}
  .section-head{margin-bottom:48px}
  .section-head .h-display{font-size:clamp(28px,4vw,46px)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:var(--mono);font-size:13px;letter-spacing:.04em;height:46px;padding:0 24px;line-height:1;
    border-radius:6px;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(var(--accent-rgb),.35);border-radius:0;
    padding:5px 10px;display:inline-flex;align-items:center;gap:8px;background:rgba(var(--accent-rgb),.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)}

  .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)}

  /* trademark frame */
  .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)}
  .frame .shot{background:var(--inset);border:1px solid var(--line);border-radius:0;
    overflow:hidden;cursor:zoom-in}
  .frame .shot img{display:block;width:100%;height:auto}

  /* ---------- 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}}

  /* ---------- breadcrumb ---------- */
  .crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-faint);padding:28px 0 0;display:flex;gap:10px;align-items:center}
  .crumbs a:hover{color:var(--text-muted)}

  /* ============================================================
     BUY SECTION - two-row grid: gallery top-left, dock top-right
     (spans both rows + sticky), supporting content bottom-left.
     The dock therefore stays pinned beside the WHOLE page, so the
     buy link is always in view as the customer scrolls (matches the
     indicator-page "elevated dock" layout).
     ============================================================ */
  .buy-grid{display:grid;column-gap:48px;align-items:start;padding:28px 0 80px;
    grid-template-columns:minmax(0,1fr) 388px;
    grid-template-areas:"shot buy" "content buy"}
  .buy-gallery{grid-area:shot;min-width:0}
  .buy-content{grid-area:content;min-width:0;margin-top:44px}
  @media(max-width:1020px){
    .buy-grid{grid-template-columns:1fr;grid-template-areas:"shot" "buy" "content";column-gap:0}
    /* stacked: give the buy card real breathing room below the gallery */
    .buy-gallery{margin-bottom:28px}
    .buy-content{margin-top:36px}
    /* tighten the card on phones so it reads less bulky/boxy */
    .panel{padding:22px 20px 20px;gap:16px}
  }

  /* gallery */
  .thumbstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:18px}
  .thumb{border:1px solid var(--line);border-radius:0;overflow:hidden;cursor:pointer;
    background:var(--inset);opacity:.55;transition:.18s ease;padding:0}
  .thumb img{display:block;width:100%;height:auto}
  .thumb:hover{opacity:.85}
  .thumb.active{opacity:1;border-color:var(--bracket)}
  .gallery-cap{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text-faint);margin-top:14px;display:flex;justify-content:space-between}
  .gallery-cap .zoom{color:var(--text-faint)}

  /* BUY RAIL: sticky wrapper (grid-area buy) around the dock card - mirrors
     the indicator pages' .pdp-rail/.dock. A tiny JS controller (bottom-aware
     sticky) sets .buy-rail's `top` so that when the rail is taller than the
     viewport, the price/add-ons/BUY stay on screen instead of hanging off the
     bottom (CSS sticky can't do that alone). */
  .buy-rail{grid-area:buy;position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
  /* the dock card. Default = flat surface (no top glow, no top line).
     Flagship suites get a top glow + hairline accent on the dock; the COLOR is a
     per-flagship variable, so a suite can signature its dock to match its charts.
     Crimson Suite = red (default); the Orderflow Suite (is-flagship--blue) = the
     same blue as its footprint/heatmap screenshots. The CTA/pills stay brand-red
     either way (single-accent doctrine) - only the dock's top tint changes. */
  .panel{position:relative;overflow:hidden;background:var(--surface);
    border:1px solid var(--line-strong);border-radius:6px;
    padding:26px 26px 24px;display:flex;flex-direction:column;gap:18px}
  .is-flagship{--flag-glow:rgba(var(--accent-rgb),.10);--flag-line:var(--accent)}
  /* Go fully blue: this flagship re-points the WHOLE accent system to its chart
     blue, on <body>. CTA, instrument pills, the 01-03 numbers, bullet dots,
     "+ more" ring, the section-eyebrow pulse and every red tint follow - they
     all derive from these vars (--accent-rgb drives the rgba() tints, including
     the pulse keyframe's 50% step and the "+ more" circle). */
  body.is-flagship--blue{--accent:#2f80ff;--accent-dim:#5e9bff;--accent-rgb:47,128,255;
    --accent-glow:rgba(47,128,255,.22);--flag-glow:rgba(47,128,255,.16);--flag-line:#2f80ff}
  /* ...except the cart count badge: it is a global UI signal, so keep it brand-red
     even on the blue page (a blue cart count reads as a state, not "items waiting"). */
  body.is-flagship--blue .nav-cart-count{background:#f2202e}
  .is-flagship .panel{background:
    radial-gradient(120% 90% at 50% 0%,var(--flag-glow),transparent 58%),var(--surface)}
  .is-flagship .panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--flag-line),transparent);opacity:.8}
  .panel .pill{align-self:flex-start}
  .panel h1{font-size:clamp(24px,2.2vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
  .panel .sub{color:var(--text-muted);font-size:14.5px;line-height:1.55}
  @media(max-width:1020px){
    .buy-rail{position:static;top:auto}
  }

  .price-row{display:flex;align-items:baseline;gap:12px;padding:16px 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .price-row .now{font-family:var(--mono);font-size:32px;font-weight:700;letter-spacing:-.02em}
  .price-row .old{font-family:var(--mono);font-size:15px;color:var(--text-faint);
    text-decoration:line-through}
  .price-row .save{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
    color:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),.35);border-radius:0;
    padding:3px 8px;margin-left:auto}

  .opt-label{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--text-faint)}
  .instruments{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .ibtn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-muted);border:1px solid var(--line);border-radius:6px;background:none;
    padding:11px 0;cursor:pointer;transition:.16s ease;text-align:center}
  .ibtn:hover{color:var(--text);border-color:var(--line-strong)}
  .ibtn.active{color:var(--accent-dim);border-color:rgba(var(--accent-rgb),.45);
    background:rgba(var(--accent-rgb),.06)}

  /* addons */
  .addons{display:flex;flex-direction:column;gap:8px}
  .addon{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:6px;
    padding:11px 14px;cursor:pointer;transition:.16s ease;user-select:none}
  .addon:hover{border-color:var(--line-strong)}
  .addon input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
  .addon .nm{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text-muted)}
  .addon .pr{font-family:var(--mono);font-size:12px;color:var(--text-faint);margin-left:auto}
  .addon.checked{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.04)}
  .addon.checked .nm{color:var(--text)}

  .total-row{display:flex;justify-content:space-between;align-items:baseline;
    font-family:var(--mono);padding-top:6px}
  .total-row .lbl{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint)}
  .total-row .val{font-size:18px;font-weight:700}

  /* trust list: divider + checks at the foot of the dock card */
  .assure{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:18px}
  .assure div{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--text-muted);
    display:flex;align-items:center;gap:11px}
  /* CSS check mark (rotated L) in accent-dim - mirrors the dock checks list */
  .assure div::before{content:"";width:6px;height:10px;flex:none;margin:0 3px 2px 1px;
    border:solid var(--accent-dim);border-width:0 2px 2px 0;transform:rotate(45deg)}

  /* ============================================================
     SUPPORTING CONTENT COLUMN (sits beside the sticky dock) + the
     WHAT'S INCLUDED screenshot-first cards. Single-column now, so each
     chart stays large inside the narrower content column. Section heads
     use the indicator-page scale (.sec-h 25px) for a calmer column.
     ============================================================ */
  .buy-content .sec{padding:40px 0 0;border-top:1px solid var(--line);margin-top:44px}
  .buy-content .sec:first-child{border-top:0;margin-top:0;padding-top:0}
  .buy-content .sec .eyebrow{margin-bottom:16px}
  .buy-content .sec-h{font-size:25px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
  .buy-content .sec .lead{margin-top:10px;font-size:16px;line-height:1.7;max-width:none}
  @media(max-width:560px){.buy-content .sec{padding-top:32px;margin-top:32px}}

  .inc-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
  .inc{background:var(--surface);border:1px solid var(--line);border-radius:6px;
    padding:24px;display:flex;flex-direction:column;gap:16px;transition:.2s}
  .inc:hover{border-color:var(--line-strong)}
  /* included-card screenshots use soft 6px corners (owner override of the
     sharp-screenshot default; these in-content cards read as soft panels) */
  .inc .frame .shot{border-radius:6px}
  .inc .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-faint)}
  .inc .n b{color:var(--accent-dim)}
  .inc h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
  .inc p{color:var(--text-muted);font-size:16px;line-height:1.65}
  /* "+ more": discloses the full per-chart detail as red bullet points.
     The icon is a CSS-drawn plus (two centered bars) that animates to a minus
     when open - crisp and optically centered at any size, unlike a font glyph. */
  .inc-more{margin-top:-2px}
  .inc-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
    width:max-content;padding:6px 2px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--accent-dim);transition:color .16s ease;
    -webkit-tap-highlight-color:transparent}
  .inc-more>summary::-webkit-details-marker{display:none}
  .inc-more>summary:hover{color:var(--text)}
  .inc-more>summary:focus-visible{outline:none}
  .inc-more>summary:focus-visible .inc-more-ico{box-shadow:0 0 0 3px var(--accent-glow)}
  .inc-more-ico{position:relative;flex:none;width:16px;height:16px;border-radius:50%;
    border:1px solid rgba(var(--accent-rgb),.5);transition:border-color .18s ease,background .18s ease}
  .inc-more-ico::before,.inc-more-ico::after{content:"";position:absolute;top:50%;left:50%;
    background:var(--accent);border-radius:1px;transition:transform .2s ease}
  .inc-more-ico::before{width:7px;height:1.5px;transform:translate(-50%,-50%)}
  .inc-more-ico::after{width:1.5px;height:7px;transform:translate(-50%,-50%)}
  .inc-more>summary:hover .inc-more-ico{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.8)}
  .inc-more[open] .inc-more-ico::after{transform:translate(-50%,-50%) scaleY(0)}
  .inc-points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
  .inc-points li{position:relative;padding-left:18px;color:var(--text-muted);font-size:15px;line-height:1.6}
  .inc-points li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
    border-radius:50%;background:var(--accent)}

  /* ---------- FAQ ---------- */
  .faq{max-width:780px}
  .faq-item{border:1px solid var(--line);border-radius:6px;background:var(--surface);
    margin-bottom:12px;overflow:hidden}
  .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;
    justify-content:space-between;gap:16px;padding:20px 24px;font-weight:600;font-size:16px}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+";font-family:var(--mono);color:var(--text-faint);
    font-size:18px;transition:.2s}
  .faq-item[open] summary::after{transform:rotate(45deg);color:var(--accent-dim)}
  .faq-item .a{padding:0 24px 22px;color:var(--text-muted);font-size:16px;line-height:1.65}

  /* ---------- Bonus callout (Crimson only) ----------
     Compact horizontal card linking the free Highlight Resting Liquidity study.
     Small by design: a quick "you also get this, free" reminder, not a full
     section. Accent edge + tag mark it as a bonus; the whole card is the link. */
  .bonus{display:flex;gap:20px;align-items:center;text-align:left;position:relative;
    background:var(--surface);border:1px solid var(--line);border-radius:8px;
    padding:16px 18px;overflow:hidden;transition:border-color .2s ease}
  .bonus::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
  .bonus:hover{border-color:var(--line-strong)}
  .bonus-shot{flex:0 0 220px;max-width:40%;aspect-ratio:1913/886;border-radius:6px;
    overflow:hidden;border:1px solid var(--line);background:var(--inset)}
  .bonus-shot img{display:block;width:100%;height:100%;object-fit:cover}
  .bonus-body{display:block;min-width:0}
  .bonus-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dim);
    border:1px solid rgba(var(--accent-rgb),.35);border-radius:0;padding:3px 11px;margin-bottom:11px}
  .bonus-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
  .bonus-h{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin-bottom:7px}
  .bonus-p{display:block;color:var(--text-muted);font-size:14.5px;line-height:1.6;margin-bottom:12px}
  .bonus-cta{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--accent-dim);transition:color .16s ease}
  .bonus:hover .bonus-cta{color:var(--text)}
  @media(max-width:560px){
    .bonus{flex-direction:column;align-items:stretch;gap:14px}
    .bonus-shot{flex:none;max-width:none;width:100%}
  }

  /* ---------- lightbox ---------- */
  .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}

  section{padding:72px 0}
  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}

/* ============================================================
   WOOCOMMERCE FORM COMPAT - the REAL variations form + the
   existing addon system, restyled to the buy-panel design
   ============================================================ */
.panel form.cart{display:flex;flex-direction:column;gap:18px;margin:0}

/* variations table -> stacked rows; kill every inherited table border
   (Woo core + Astra both draw cell borders that leak through) */
.panel table.variations,
.panel table.variations tbody,
.panel table.variations tr,
.panel table.variations th,
.panel table.variations td{border:0 !important;box-shadow:none !important;
  background:none !important}
.panel table.variations{border-collapse:collapse;width:100%;margin:0}
.panel table.variations tr{display:flex;flex-direction:column;gap:9px}
.panel table.variations th,.panel table.variations td{padding:0}
.panel table.variations th.label label{font-family:var(--mono);font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint);font-weight:400}
.panel table.variations select{width:100%;appearance:none;-webkit-appearance:none;
  background:var(--inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a90' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--line);border-radius:6px;color:var(--text);
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;padding:12px 38px 12px 14px;
  cursor:pointer;transition:.16s ease}
.panel table.variations select:hover{border-color:var(--line-strong)}
.panel table.variations select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow)}
.panel .reset_variations{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--text-faint);text-transform:uppercase;margin-top:6px;display:inline-block}
.panel .reset_variations:hover{color:var(--accent-dim)}

/* variation price (appears after selecting an instrument) */
.panel .woocommerce-variation-price .price{font-family:var(--mono);font-size:22px;
  font-weight:700;color:var(--text)}
.panel .woocommerce-variation-price .price del{color:var(--text-faint);font-size:14px;
  font-weight:400;margin-right:10px}
.panel .woocommerce-variation-price .price ins{text-decoration:none}
.panel .woocommerce-variation-availability{display:none}
.panel .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* the existing addon system (functions.php), reskinned */
.panel .addon-options{margin:0 !important}
.panel .addon-options h4{font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-faint);font-weight:400;margin-bottom:4px}
.panel .addon-options>p{font-family:var(--mono);font-size:12px;color:var(--text-faint);
  letter-spacing:.04em;margin-bottom:10px}
/* MOBILE ONLY (stacked single-column layout): hide the "Optional Add-Ons" heading
   until an instrument is chosen and there are real add-ons to show. At rest the
   add-on checkboxes are display:none, so the label sat above the BUY button with no
   control beneath it - dead space on a phone. The JS in functions.php adds the
   .has-addons class once add-ons are revealed; desktop (>1020px, the 2-col rail)
   keeps the label visible exactly as before. */
@media(max-width:1020px){
  .panel .addon-options:not(.has-addons){display:none}
}
.panel .addon-box{border:1px solid var(--line);border-radius:6px;padding:11px 14px;
  margin-bottom:8px;transition:.16s ease}
.panel .addon-box:hover{border-color:var(--line-strong)}
.panel .addon-box label{font-family:var(--mono) !important;font-size:12px !important;
  letter-spacing:.04em;color:var(--text-muted) !important;display:flex;align-items:center;
  gap:11px;cursor:pointer;margin:0}
.panel .addon-box input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;
  cursor:pointer;margin:0 !important;flex:none}
.panel .addon-box .woocommerce-Price-amount{color:var(--text-faint)}
/* checked addon = EXACTLY the active-pill language (one selected-state
   grammar across the panel: red border .45, red tint .06, accent text) */
.panel .addon-box:has(input:checked){border-color:rgba(var(--accent-rgb),.45);
  background:rgba(var(--accent-rgb),.06)}
.panel .addon-box:has(input:checked) label{color:var(--accent-dim) !important}
.panel .addon-box:has(input:checked) .addon-pr{color:var(--accent-dim)}

/* top price row: sale strikethrough must stay quiet */
.price-row .now del{color:var(--text-faint);font-size:15px;font-weight:400;margin-right:10px}
.price-row .now ins{text-decoration:none}
.price-row .now .woocommerce-Price-amount{font-family:var(--mono)}

/* addon label internals: name left, price right */
.panel .addon-box .addon-nm{flex:1;min-width:0}
.panel .addon-box .addon-pr{color:var(--text-faint);white-space:nowrap;font-size:12px}

/* instrument pills (JS enhancement replaces the native select; kills the
   browser-blue option highlight which we cannot restyle) */
.byc-hidden-select{display:none !important}
.var-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.var-pills .ibtn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);border:1px solid var(--line);
  border-radius:6px;background:none;padding:11px 0;cursor:pointer;transition:.16s ease;
  text-align:center;white-space:nowrap}
.var-pills .ibtn:hover{color:var(--text);border-color:var(--line-strong)}
/* focus must not fight the active border (Astra styles button:focus):
   kill outlines, keep a soft glow for keyboard users only */
.var-pills .ibtn:focus{outline:none !important;box-shadow:none}
.var-pills .ibtn:focus-visible{box-shadow:0 0 0 3px var(--accent-glow)}
.var-pills .ibtn.active{color:var(--accent-dim) !important;
  border-color:rgba(var(--accent-rgb),.45) !important;
  background:rgba(var(--accent-rgb),.06) !important}
/* phones: 2-up pills with a bigger tap target, so labels like "Crude Oil"
   never crush/wrap. !important overrides the JS-set inline column count. */
@media(max-width:430px){
  .var-pills{grid-template-columns:repeat(2,1fr) !important}
  .var-pills .ibtn{padding:13px 0}
}
/* long-label variations (e.g. Sessions / chart-type options) stack one per row
   and wrap, so the full text stays readable instead of overflowing the dock.
   Two-class selector + !important wins over the mobile 2-col rule above. */
.var-pills.var-pills--stack{grid-template-columns:1fr !important}
.var-pills--stack .ibtn{white-space:normal;text-align:left;padding:12px 14px;
  letter-spacing:.04em;line-height:1.35}

/* add to cart button = primary CTA (!important: Astra paints buttons brand-red) */
.panel .single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;
  width:100%;height:52px;padding:0 24px;border-radius:6px;border:1px solid #fff !important;
  background:#fff !important;color:#000 !important;font-family:var(--mono);font-size:13.5px;
  letter-spacing:.04em;font-weight:600;cursor:pointer;transition:.18s ease;line-height:1}
.panel .single_add_to_cart_button:hover{background:var(--accent) !important;
  border-color:var(--accent) !important;color:#fff !important;box-shadow:0 0 30px var(--accent-glow)}
.panel .single_add_to_cart_button.disabled,
.panel .single_add_to_cart_button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.panel .quantity{display:none} /* products are sold individually */

/* Woo notices (added to cart, errors) on this page */
body.byc-2026 .woocommerce-notices-wrapper{max-width:var(--maxw);margin:0 auto;padding:0 24px}
body.byc-2026 .woocommerce-message,body.byc-2026 .woocommerce-error,
body.byc-2026 .woocommerce-info{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);color:var(--text-muted);font-size:14px;
  padding:14px 18px;margin:18px 0;list-style:none}
body.byc-2026 .woocommerce-message a,body.byc-2026 .woocommerce-error a{color:var(--accent-dim)}

/* long description (DB content) rendered as readable prose */
.prose{color:var(--text-muted);font-size:16px;line-height:1.7;max-width:760px}
.prose p{margin:0 0 16px}
.prose p:empty{display:none}  /* drop stray empty paragraphs the editor leaves behind */
.prose h2,.prose h3,.prose h4{color:var(--text);margin:28px 0 12px;letter-spacing:-.01em}
.prose h2{font-size:24px}.prose h3{font-size:19px}.prose h4{font-size:16px}
.prose ol{margin:0 0 18px;padding-left:22px}
.prose ol li{margin-bottom:10px;line-height:1.6}
/* bullet lists: red custom dots (match the .inc-points treatment used elsewhere)
   + a calmer rhythm. Only the 26 standard template descriptions render .prose -
   Crimson + the Heatmap suite use the curated .inc-grid, so they are untouched. */
.prose ul{list-style:none;margin:24px 0 18px;padding-left:0}  /* 24px top = same gap above the first bullet whether or not a summary paragraph precedes it */
.prose ul li{position:relative;padding-left:20px;margin-bottom:10px;line-height:1.6}
/* bullets stay UNIFORMLY non-bold (owner): any <strong>/<b> label in a bullet renders
   as plain text. The closing "part of the Crimson Suite" line is a <p>, so it keeps its bold. */
.prose ul li strong,.prose ul li b{font-weight:400;color:inherit}
.prose ul li::before{content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* defensive: a couple of descriptions wrap a <ul> inside a style-less <li> -
   give the wrapper no dot/indent, drop any truly-empty list items */
.prose ul li:empty{display:none}
.prose ul li:has(> ul)::before{content:none}
.prose ul li:has(> ul){padding-left:0}
.prose ul li > ul{margin:10px 0 0}
.prose a{color:var(--accent-dim)}
.prose img{max-width:100%;height:auto;border:1px solid var(--line)}
.prose strong{color:var(--text)}

/* ============================================================
   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(var(--accent-rgb),.07)}}
.dot{animation:bycPulse 3.2s ease-in-out infinite}
.pill .dot{animation:none}
@media (prefers-reduced-motion: reduce){.dot{animation:none}}

/* ============================================================
   RELATED / UPSELL internal-linking modules (full-width, below the buy grid).
   Namespaced .rel-* so nothing collides with byc-shop.css cards.
   ============================================================ */
.buy-related{padding:0 0 80px}
.buy-related .relsec{padding:44px 0 0;border-top:1px solid var(--line)}
.buy-related .relsec + .relsec{margin-top:44px}
.buy-related .eyebrow{margin-bottom:14px}
.buy-related .rel-h{font-size:25px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--text)}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin-top:24px}
.rel-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  text-decoration:none;transition:border-color .16s ease}
.rel-card:hover{border-color:var(--line-strong)}
.rel-shot{aspect-ratio:16/9;background:var(--inset);border-bottom:1px solid var(--line);overflow:hidden}
.rel-shot img{display:block;width:100%;height:100%;object-fit:cover}
.rel-body{display:flex;flex-direction:column;gap:7px;padding:14px 16px}
.rel-title{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--text-muted);
  letter-spacing:.02em;line-height:1.45}
.rel-card:hover .rel-title{color:var(--text)}
.rel-price{font-family:var(--mono);font-size:13px;color:var(--text-muted)}
.rel-card:hover .rel-price{color:var(--text)}
.rel-price del{color:var(--text-faint);text-decoration:line-through;font-size:12px;margin-right:7px}
.rel-price ins{text-decoration:none}
@media(max-width:560px){.rel-grid{grid-template-columns:repeat(2,1fr);gap:12px}}