/* Forge — electronics / specs-first (prefix fg-). Colors from layout ThemeStore vars. */

html[data-store-theme="forge"] {
  --fg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fg-dur: 180ms;
  --fg-radius: 12px;
  --fg-radius-sm: 8px;
  --fg-ink: var(--ink, #0f172a);
  --fg-muted: var(--ink-soft, #64748b);
  --fg-line: var(--line, #e2e8f0);
  --fg-line-strong: var(--line-strong, #cbd5e1);
  --fg-bg: var(--surface, #eef2f7);
  --fg-panel: var(--paper, #ffffff);
  --fg-brand: var(--brand, #2563eb);
  --fg-accent: var(--accent, #0ea5a4);
  --fg-strip: #0b1220;
  --fg-strip-ink: #e2e8f0;
  --fg-media: color-mix(in srgb, var(--fg-bg) 82%, var(--fg-muted));
  --fg-ok: #059669;
  --fg-warn: #d97706;
  --fg-dead: #dc2626;
  --font: "Alexandria", "Sora", "Segoe UI", Tahoma, sans-serif;
  --display: "Sora", "Alexandria", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radius: var(--fg-radius);
  --radius-sm: var(--fg-radius-sm);
  --header-h: 132px;
  --shell: 1180px;
}

html[data-store-theme="forge"] body {
  font-family: var(--font);
  background:
    radial-gradient(900px 280px at 100% 0%, color-mix(in srgb, var(--fg-brand) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--fg-bg) 70%, #fff) 0%, var(--fg-bg) 40%);
  color: var(--fg-ink);
  -webkit-font-smoothing: antialiased;
}

html[data-store-theme="forge"] body.fg-ready {
  animation: fg-in 280ms var(--fg-ease) both;
}

@keyframes fg-in {
  from { opacity: .01; }
  to { opacity: 1; }
}

/* Hide Nile chrome — Forge surfaces replace them; page cart (not drawer/bar) */
html[data-store-theme="forge"] .site-header,
html[data-store-theme="forge"] .header,
html[data-store-theme="forge"] .topbar,
html[data-store-theme="forge"] .footer,
html[data-store-theme="forge"] .hero,
html[data-store-theme="forge"] #store-cart-bar,
html[data-store-theme="forge"] .mobile-cart-bar {
  display: none !important;
}

html[data-store-theme="forge"] .shell {
  width: min(var(--shell), calc(100% - 2rem));
  margin-inline: auto;
}

@media (max-width: 780px) {
  html[data-store-theme="forge"] .shell {
    width: calc(100% - 1rem);
  }
}

html[data-store-theme="forge"] main.shell {
  padding: 16px 0 calc(48px + env(safe-area-inset-bottom, 0px));
}

html[data-store-theme="forge"] .store-surface {
  background: transparent;
}

html[data-store-theme="forge"] .page-title,
html[data-store-theme="forge"] .pd-title,
html[data-store-theme="forge"] .fg-h1,
html[data-store-theme="forge"] .fg-h2,
html[data-store-theme="forge"] .fg-h3,
html[data-store-theme="forge"] .fg-hero-title {
  font-family: var(--display);
  letter-spacing: -.02em;
  font-weight: 700;
}

html[data-store-theme="forge"] .btn,
html[data-store-theme="forge"] .btn-accent {
  border-radius: var(--fg-radius-sm);
  font-weight: 700;
  box-shadow: none !important;
  transition: background var(--fg-dur) var(--fg-ease), border-color var(--fg-dur) var(--fg-ease), transform var(--fg-dur) var(--fg-ease);
}

html[data-store-theme="forge"] .btn-accent {
  background: var(--fg-brand);
  border-color: var(--fg-brand);
  color: #fff;
}

html[data-store-theme="forge"] .btn-accent:hover {
  transform: translateY(-1px);
}

.fg-mono,
.fg-num,
.fg-idx {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.fg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fg-tag--live {
  color: var(--fg-accent);
}

.fg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.fg-h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.2;
}

.fg-h2 {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.25;
}

.fg-h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  html[data-store-theme="forge"] body.fg-ready,
  html[data-store-theme="forge"] .btn,
  html[data-store-theme="forge"] .btn-accent,
  html[data-store-theme="forge"] .fg-card,
  html[data-store-theme="forge"] .fg-zoom,
  html[data-store-theme="forge"] .fg-btn {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Chrome — rail / deck / nav
   ========================================================================== */

.fg-chrome {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--fg-panel);
  border-bottom: 1px solid var(--fg-line);
  transition: box-shadow var(--fg-dur) var(--fg-ease);
}

.fg-chrome.is-stuck {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fg-ink) 8%, transparent);
}

/* Utility rail */
.fg-rail {
  background: var(--fg-strip);
  color: var(--fg-strip-ink);
  font-size: .72rem;
}

.fg-rail-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}

.fg-rail-facts {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.fg-rail-facts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: .92;
  font-weight: 600;
  white-space: nowrap;
}

.fg-rail-facts svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--fg-accent);
}

.fg-rail-fact-alt {
  opacity: .78;
}

.fg-rail-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.fg-rail-links a {
  color: inherit;
  text-decoration: none;
  opacity: .85;
  font-weight: 600;
  transition: opacity var(--fg-dur) var(--fg-ease);
}

.fg-rail-links a:hover {
  opacity: 1;
}

/* Identity deck */
.fg-deck {
  background: var(--fg-panel);
}

.fg-deck-in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 0;
}

.fg-sq {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius-sm);
  background: var(--fg-panel);
  color: var(--fg-ink);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  transition: border-color var(--fg-dur) var(--fg-ease), background var(--fg-dur) var(--fg-ease), color var(--fg-dur) var(--fg-ease);
}

.fg-sq svg {
  width: 18px;
  height: 18px;
}

.fg-sq:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--fg-brand) 45%, var(--fg-line));
  color: var(--fg-brand);
}

.fg-sq:disabled {
  opacity: .35;
  cursor: default;
}

.fg-burger {
  display: none;
}

@media (max-width: 980px) {
  .fg-burger { display: inline-grid; }
}

.fg-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg-ink);
  flex-shrink: 0;
  min-width: 0;
}

.fg-brand-img {
  max-height: 36px;
  width: auto;
  display: block;
}

.fg-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--fg-brand);
  color: #fff;
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.fg-brand-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fg-brand-text strong {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.fg-brand-text em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fg-brand--foot .fg-brand-text strong {
  color: #fff;
}

/* Search */
.fg-find {
  display: none;
  flex: 1;
  min-width: 0;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
  background: var(--fg-bg);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius-sm);
  overflow: hidden;
  transition: border-color var(--fg-dur) var(--fg-ease);
}

.fg-find:focus-within {
  border-color: color-mix(in srgb, var(--fg-brand) 55%, var(--fg-line));
}

.fg-find-tag {
  display: grid;
  place-items: center;
  width: 40px;
  color: var(--fg-muted);
}

.fg-find-tag svg {
  width: 17px;
  height: 17px;
}

.fg-find input {
  border: 0;
  outline: 0;
  background: transparent;
  height: 42px;
  font: inherit;
  width: 100%;
  color: var(--fg-ink);
  min-width: 0;
}

.fg-find-go {
  border: 0;
  background: var(--fg-brand);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 0 16px;
  height: 42px;
  cursor: pointer;
  transition: background var(--fg-dur) var(--fg-ease);
}

.fg-find-go:hover {
  background: color-mix(in srgb, var(--fg-brand) 88%, #000);
}

@media (min-width: 981px) {
  .fg-find { display: grid; }
}

/* Actions + cart readout */
.fg-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  flex-shrink: 0;
}

.fg-act-quiet {
  background: transparent;
}

.fg-cartlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius-sm);
  background: var(--fg-bg);
  color: var(--fg-ink);
  text-decoration: none;
  transition: border-color var(--fg-dur) var(--fg-ease), background var(--fg-dur) var(--fg-ease);
}

.fg-cartlink:hover {
  border-color: color-mix(in srgb, var(--fg-brand) 40%, var(--fg-line));
  background: color-mix(in srgb, var(--fg-brand) 6%, var(--fg-panel));
}

.fg-cartlink-icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}

.fg-cartlink-icon svg {
  width: 20px;
  height: 20px;
}

.fg-cartlink-count {
  position: absolute;
  top: -2px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fg-accent);
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.fg-cartlink-count[hidden] {
  display: none !important;
}

.fg-cartlink-read {
  display: grid;
  gap: 1px;
  line-height: 1.15;
}

.fg-cartlink-read em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fg-cartlink-read b {
  font-family: var(--mono);
  font-size: .88rem;
  font-weight: 700;
  color: var(--fg-ink);
}

@media (max-width: 780px) {
  .fg-cartlink-read { display: none; }
  .fg-cartlink { padding: 4px; border: 0; background: transparent; }
  .fg-act-quiet { display: none; }
  .fg-brand-text em { display: none; }
}

/* Department nav */
.fg-nav {
  background: var(--fg-strip);
  color: var(--fg-strip-ink);
  border-top: 1px solid color-mix(in srgb, #fff 8%, transparent);
}

.fg-nav-in {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.fg-nav-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: var(--fg-radius-sm);
  background: color-mix(in srgb, #fff 6%, transparent);
  color: inherit;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--fg-dur) var(--fg-ease);
}

.fg-nav-all svg {
  width: 15px;
  height: 15px;
}

.fg-nav-all:hover {
  background: color-mix(in srgb, #fff 12%, transparent);
}

.fg-nav-scroll {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.fg-nav-scroll::-webkit-scrollbar {
  display: none;
}

.fg-nav-link {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: color-mix(in srgb, #fff 72%, transparent);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 6px;
  transition: color var(--fg-dur) var(--fg-ease), background var(--fg-dur) var(--fg-ease);
}

.fg-nav-link:hover,
.fg-nav-link.is-active {
  color: #fff;
  background: color-mix(in srgb, #fff 8%, transparent);
}

.fg-nav-flag {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg-accent) 22%, transparent);
  color: #fff;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}

.fg-nav-flag .fg-dot {
  background: var(--fg-accent);
}

@media (min-width: 981px) {
  .fg-nav-flag { display: inline-flex; }
}

@media (max-width: 980px) {
  html[data-store-theme="forge"] { --header-h: 104px; }
  .fg-rail { display: none; }
  .fg-nav-all span { display: none; }
}

@media (max-width: 780px) {
  html[data-store-theme="forge"] { --header-h: 96px; }
  .fg-nav { display: none; }
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

html[data-store-theme="forge"] .fg-drawer-panel {
  width: min(88vw, 340px);
  gap: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border-inline-end: 1px solid var(--fg-line);
  background: var(--fg-panel);
}

.fg-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--fg-line);
  background: var(--fg-bg);
}

.fg-drawer-body {
  padding: 14px;
  display: grid;
  gap: 18px;
  overflow-y: auto;
}

.fg-drawer-sec {
  display: grid;
  gap: 8px;
}

.fg-drawer-links {
  display: grid;
}

.fg-drawer-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--fg-line);
  color: var(--fg-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  transition: color var(--fg-dur) var(--fg-ease);
}

.fg-drawer-links a:hover {
  color: var(--fg-brand);
}

.fg-drawer-links .fg-idx {
  color: var(--fg-muted);
  font-size: .72rem;
  min-width: 1.6em;
}

.fg-drawer-links--plain a {
  font-size: .86rem;
}

.fg-drawer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius-sm);
  background: var(--fg-bg);
  font-size: .78rem;
  font-weight: 600;
  color: var(--fg-muted);
}

.fg-drawer-foot svg {
  width: 16px;
  height: 16px;
  color: var(--fg-ok);
  flex: 0 0 auto;
}

/* ==========================================================================
   Page scaffolding
   ========================================================================== */

.fg-page {
  display: grid;
  gap: 20px;
  padding: 4px 0 32px;
}

.fg-readout {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--fg-line);
}

.fg-readout-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.fg-readout-count {
  font-size: .78rem;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
}

.fg-readout-count b {
  color: var(--fg-ink);
}

.fg-block {
  display: grid;
  gap: 14px;
}

.fg-block-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.fg-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-brand);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
}

.fg-more:hover b {
  transform: translateX(2px);
}

[dir="rtl"] .fg-more:hover b {
  transform: translateX(-2px);
}

.fg-more b {
  display: inline-block;
  transition: transform var(--fg-dur) var(--fg-ease);
}

.fg-void {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 36px 20px;
  border: 1px dashed var(--fg-line-strong);
  border-radius: var(--fg-radius);
  background: var(--fg-panel);
}

.fg-void strong {
  font-family: var(--display);
  font-size: 1.15rem;
}

.fg-void span {
  color: var(--fg-muted);
  font-size: .9rem;
}

.fg-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--fg-muted);
}

.fg-crumb a {
  color: var(--fg-brand);
  text-decoration: none;
  font-weight: 600;
}

.fg-crumb .is-here {
  color: var(--fg-ink);
  font-weight: 700;
}

.fg-query {
  margin: 0;
  font-size: .82rem;
  color: var(--fg-muted);
}

.fg-query strong {
  color: var(--fg-ink);
}

.fg-deckfilter {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  background: var(--fg-panel);
}

.fg-results {
  min-width: 0;
}

.fg-alert {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--fg-dead) 35%, var(--fg-line));
  border-radius: var(--fg-radius-sm);
  background: color-mix(in srgb, var(--fg-dead) 8%, var(--fg-panel));
  color: var(--fg-dead);
  font-size: .86rem;
  font-weight: 600;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.fg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--fg-radius-sm);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--fg-dur) var(--fg-ease), border-color var(--fg-dur) var(--fg-ease), color var(--fg-dur) var(--fg-ease), transform var(--fg-dur) var(--fg-ease);
}

.fg-btn b {
  font-weight: 800;
  opacity: .75;
}

.fg-btn--solid {
  background: var(--fg-brand);
  border-color: var(--fg-brand);
  color: #fff;
}

.fg-btn--solid:hover {
  transform: translateY(-1px);
}

.fg-btn--line {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  color: inherit;
}

.fg-btn--line:hover {
  border-color: currentColor;
}

.fg-btn--go {
  width: 100%;
  background: var(--fg-brand);
  border-color: var(--fg-brand);
  color: #fff;
  min-height: 50px;
  font-weight: 800;
  letter-spacing: .01em;
}

.fg-btn--go:hover {
  transform: translateY(-1px);
}

.fg-btn--go:disabled,
.fg-place:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.fg-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ==========================================================================
   Hero — device bench
   ========================================================================== */

.fg-hero {
  display: grid;
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 3.5vw, 36px);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  background:
    linear-gradient(135deg, var(--fg-strip) 0%, color-mix(in srgb, var(--fg-brand) 40%, var(--fg-strip)) 100%);
  color: #f8fafc;
  overflow: hidden;
  position: relative;
}

@media (min-width: 781px) {
  .fg-hero {
    grid-template-columns: 1.1fr minmax(220px, .9fr);
  }
}

.fg-hero-copy {
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.fg-hero-title {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  color: #fff;
}

.fg-hero-sub {
  margin: 0;
  max-width: 42ch;
  color: color-mix(in srgb, #fff 78%, transparent);
  line-height: 1.55;
  font-size: .95rem;
}

.fg-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.fg-hero .fg-btn--line {
  color: #fff;
  border-color: color-mix(in srgb, #fff 35%, transparent);
}

.fg-hero .fg-btn--solid {
  background: var(--fg-accent);
  border-color: var(--fg-accent);
}

.fg-hero-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.fg-hero-specs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fg-hero-specs .fg-tag {
  color: color-mix(in srgb, #fff 45%, transparent);
}

.fg-hero-specs strong {
  font-size: .82rem;
  font-weight: 700;
}

.fg-hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 18px;
}

.fg-hero-bracket {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid color-mix(in srgb, var(--fg-accent) 70%, #fff);
  pointer-events: none;
}

.fg-hero-bracket--a {
  top: 8px;
  inset-inline-start: 8px;
  border-inline-end: 0;
  border-bottom: 0;
}

.fg-hero-bracket--b {
  bottom: 8px;
  inset-inline-end: 8px;
  border-inline-start: 0;
  border-top: 0;
}

.fg-hero-plate {
  width: min(100%, 320px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #fff 6%, transparent);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-radius: var(--fg-radius);
  padding: 16px;
}

.fg-hero-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .35));
}

.fg-hero-mock {
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 70%;
}

.fg-hero-mock-screen {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--fg-accent) 40%, transparent), transparent),
    color-mix(in srgb, #fff 10%, transparent);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
}

.fg-hero-mock-base {
  width: 40%;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, #fff 16%, transparent);
}

.fg-hero-cap {
  position: absolute;
  bottom: 4px;
  inset-inline-start: 12px;
  font-size: .62rem;
  letter-spacing: .08em;
  color: color-mix(in srgb, #fff 45%, transparent);
}

/* ==========================================================================
   Discovery rail
   ========================================================================== */

.fg-disc {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.fg-disc-label {
  margin: 0;
}

.fg-disc-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.fg-disc-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--fg-ink);
  scroll-snap-align: start;
  transition: border-color var(--fg-dur) var(--fg-ease), background var(--fg-dur) var(--fg-ease), color var(--fg-dur) var(--fg-ease);
}

.fg-disc-item strong {
  font-size: .8rem;
  font-weight: 700;
}

.fg-disc-item .fg-idx {
  font-size: .68rem;
  color: var(--fg-muted);
}

.fg-disc--chip .fg-disc-item {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--fg-line);
  border-radius: 999px;
  background: var(--fg-panel);
  color: var(--fg-muted);
}

.fg-disc--chip .fg-disc-item:hover {
  border-color: var(--fg-ink);
  color: var(--fg-ink);
}

.fg-disc--chip .fg-disc-item.is-active {
  background: var(--fg-strip);
  border-color: var(--fg-strip);
  color: #fff;
}

.fg-disc--chip .fg-disc-item.is-active .fg-idx {
  color: color-mix(in srgb, #fff 55%, transparent);
}

.fg-disc-item--all {
  font-weight: 800;
}

.fg-disc--circle .fg-disc-item {
  width: 78px;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.fg-disc--circle .fg-disc-item strong {
  font-size: .7rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fg-disc-shot {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--fg-line);
  border-radius: 50%;
  background: var(--fg-media);
  transition: border-color var(--fg-dur) var(--fg-ease), box-shadow var(--fg-dur) var(--fg-ease);
}

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

.fg-disc-shot--all {
  background: color-mix(in srgb, var(--fg-brand) 10%, var(--fg-panel));
  color: var(--fg-brand);
}

.fg-disc-shot--all svg {
  width: 22px;
  height: 22px;
}

.fg-disc-initial {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--fg-muted);
}

.fg-disc--circle .fg-disc-item:hover .fg-disc-shot,
.fg-disc--circle .fg-disc-item.is-active .fg-disc-shot {
  border-color: var(--fg-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg-brand) 25%, transparent);
}

/* ==========================================================================
   Deals bay (horizontal rail)
   ========================================================================== */

.fg-bay {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  background: var(--fg-panel);
}

.fg-bay-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.fg-bay-head > div:first-child {
  display: grid;
  gap: 6px;
}

.fg-bay-nav {
  display: flex;
  gap: 6px;
}

.fg-bay-rail {
  overflow: hidden;
  min-width: 0;
}

.fg-bay-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

.fg-bay-track > .fg-card {
  flex: 0 0 min(240px, 78vw);
  scroll-snap-align: start;
}

/* ==========================================================================
   Product grid + card
   ========================================================================== */

html[data-store-theme="forge"] .product-grid,
.fg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px) {
  html[data-store-theme="forge"] .product-grid,
  .fg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 780px) {
  html[data-store-theme="forge"] .product-grid,
  .fg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.fg-card {
  display: flex;
  flex-direction: column;
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  overflow: hidden;
  transition: border-color var(--fg-dur) var(--fg-ease), transform var(--fg-dur) var(--fg-ease), box-shadow var(--fg-dur) var(--fg-ease);
}

.fg-card:hover {
  border-color: color-mix(in srgb, var(--fg-brand) 45%, var(--fg-line));
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--fg-ink) 6%, transparent);
}

.fg-card.is-oos {
  opacity: .72;
}

.fg-card-top {
  position: relative;
}

.fg-card-shot {
  display: block;
  aspect-ratio: 1;
  background: var(--fg-media);
  position: relative;
  overflow: hidden;
}

.fg-card-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 12px;
  transition: transform 280ms var(--fg-ease);
}

.fg-card:hover .fg-card-shot img {
  transform: scale(1.04);
}

.fg-card-plate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--fg-panel) 40%, transparent));
  opacity: .5;
}

.fg-card-noshot {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      color-mix(in srgb, var(--fg-line) 60%, transparent) 8px,
      color-mix(in srgb, var(--fg-line) 60%, transparent) 9px
    );
}

.fg-card-marks {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 48px);
}

.fg-mark {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--fg-panel);
  color: var(--fg-ink);
  border: 1px solid var(--fg-line);
}

.fg-mark--off {
  background: var(--fg-accent);
  border-color: var(--fg-accent);
  color: #fff;
}

.fg-mark--dead {
  background: var(--fg-dead);
  border-color: var(--fg-dead);
  color: #fff;
}

.fg-mark--low {
  background: var(--fg-warn);
  border-color: var(--fg-warn);
  color: #fff;
}

.fg-mark--ship {
  background: color-mix(in srgb, var(--fg-ok) 14%, var(--fg-panel));
  border-color: color-mix(in srgb, var(--fg-ok) 35%, var(--fg-line));
  color: var(--fg-ok);
}

.fg-card-save {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  margin: 0;
}

.fg-card-save button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fg-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg-panel) 92%, transparent);
  color: var(--fg-ink);
  cursor: pointer;
  transition: color var(--fg-dur) var(--fg-ease), border-color var(--fg-dur) var(--fg-ease);
}

.fg-card-save button.is-active,
.fg-card-save button:hover {
  color: var(--fg-brand);
  border-color: color-mix(in srgb, var(--fg-brand) 40%, var(--fg-line));
}

.fg-card-data {
  display: grid;
  gap: 6px;
  padding: 12px;
  flex: 1;
  align-content: start;
}

.fg-card-ref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}

.fg-card-ref .fg-mono {
  font-size: .68rem;
  color: var(--fg-muted);
}

.fg-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 700;
}

.fg-state.is-ok {
  color: var(--fg-ok);
}

.fg-state.is-low {
  color: var(--fg-warn);
}

.fg-card-title {
  color: var(--fg-ink);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fg-card-title:hover {
  color: var(--fg-brand);
}

.fg-card-spec {
  margin: 0;
  font-size: .74rem;
  line-height: 1.4;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fg-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fg-chip-sm {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--fg-bg);
  border: 1px solid var(--fg-line);
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  color: var(--fg-muted);
}

.fg-card-cost {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.fg-card-now {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--fg-brand);
}

.fg-card-was {
  font-size: .78rem;
  color: var(--fg-muted);
  text-decoration: line-through;
}

.fg-card-act {
  margin-top: auto;
  padding-top: 6px;
}

.fg-card-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--fg-radius-sm);
  background: var(--fg-brand);
  color: #fff;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  transition: transform var(--fg-dur) var(--fg-ease), background var(--fg-dur) var(--fg-ease);
}

.fg-card-go:hover {
  transform: translateY(-1px);
}

.fg-card-go--cfg {
  background: var(--fg-strip);
}

.fg-card-dead {
  display: block;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--fg-dead);
  padding: 8px 0;
}

.fg-card-qty {
  min-width: 0;
}

.fg-card-drop {
  margin: 4px 0 0;
}

.fg-card-drop button {
  border: 0;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.fg-card-drop button:hover {
  color: var(--fg-dead);
}

/* ==========================================================================
   Downsell deal
   ========================================================================== */

.fg-dealgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.fg-deal {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  background: var(--fg-panel);
  position: relative;
  overflow: hidden;
}

.fg-deal-stamp {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  padding: 4px 8px;
  background: var(--fg-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  border-radius: 0 0 0 8px;
  z-index: 1;
}

[dir="rtl"] .fg-deal-stamp {
  border-radius: 0 0 8px 0;
}

.fg-deal-shot {
  aspect-ratio: 1;
  background: var(--fg-media);
  border-radius: var(--fg-radius-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.fg-deal-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.fg-deal-data {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding-top: 18px;
}

.fg-deal-ref {
  font-size: .68rem;
  color: var(--fg-muted);
}

.fg-deal-name {
  font-size: .9rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fg-deal-note {
  margin: 0;
  font-size: .74rem;
  color: var(--fg-muted);
  line-height: 1.35;
}

.fg-deal-calc {
  display: grid;
  gap: 4px;
  margin: 0;
}

.fg-deal-calc > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.fg-deal-calc dd {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
}

.fg-deal-was {
  text-decoration: line-through;
  color: var(--fg-muted);
}

.fg-deal-now {
  color: var(--fg-brand);
}

.fg-deal-save {
  color: var(--fg-accent);
}

.fg-deal-cta {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: var(--fg-radius-sm);
  background: var(--fg-strip);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: background var(--fg-dur) var(--fg-ease);
}

.fg-deal-cta:hover {
  background: var(--fg-brand);
}

/* ==========================================================================
   Cart ledger + console
   ========================================================================== */

.fg-cartgrid,
.fg-checkgrid {
  display: grid;
  gap: 16px;
  align-items: start;
}

@media (min-width: 981px) {
  .fg-cartgrid,
  .fg-checkgrid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 20px;
  }
}

.fg-ledger {
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  overflow: hidden;
}

.fg-ledger-head {
  display: none;
  grid-template-columns: 72px minmax(0, 1.4fr) .7fr .8fr .8fr;
  gap: 12px;
  padding: 10px 14px;
  background: var(--fg-bg);
  border-bottom: 1px solid var(--fg-line);
}

@media (min-width: 781px) {
  .fg-ledger-head { display: grid; }
}

.fg-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--fg-line);
  align-items: start;
}

@media (min-width: 781px) {
  .fg-line {
    grid-template-columns: 72px minmax(0, 1.4fr) .7fr .8fr .8fr;
    align-items: center;
  }
}

.fg-line-shot {
  width: 72px;
  height: 72px;
  border-radius: var(--fg-radius-sm);
  background: var(--fg-media);
  border: 1px solid var(--fg-line);
  overflow: hidden;
}

.fg-line-shot a {
  display: block;
  width: 100%;
  height: 100%;
}

.fg-line-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.fg-line-id {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.fg-line-name {
  color: var(--fg-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.3;
}

.fg-line-name:hover {
  color: var(--fg-brand);
}

.fg-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .74rem;
  color: var(--fg-muted);
}

.fg-line-unit,
.fg-line-qty,
.fg-line-sum {
  display: grid;
  gap: 4px;
}

.fg-line-unit .fg-tag,
.fg-line-qty .fg-tag,
.fg-line-sum .fg-tag {
  display: none;
}

@media (max-width: 780px) {
  .fg-line-unit,
  .fg-line-qty,
  .fg-line-sum {
    grid-column: 2;
  }

  .fg-line-unit .fg-tag,
  .fg-line-qty .fg-tag,
  .fg-line-sum .fg-tag {
    display: inline-flex;
  }

  .fg-line-unit,
  .fg-line-qty,
  .fg-line-sum {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
  }
}

.fg-line-unit b,
.fg-line-sum b {
  font-size: .95rem;
  font-weight: 800;
}

.fg-stepbox {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius-sm);
  overflow: hidden;
  background: var(--fg-bg);
}

.fg-stepbox button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--fg-ink);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

.fg-stepbox button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fg-brand) 10%, transparent);
  color: var(--fg-brand);
}

.fg-stepbox button:disabled {
  opacity: .35;
  cursor: default;
}

.fg-stepbox input {
  width: 44px;
  height: 34px;
  border: 0;
  border-inline: 1px solid var(--fg-line);
  background: var(--fg-panel);
  text-align: center;
  font: inherit;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .88rem;
  -moz-appearance: textfield;
}

.fg-stepbox input::-webkit-outer-spin-button,
.fg-stepbox input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fg-line-drop {
  border: 0;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: start;
  text-decoration: underline;
}

.fg-line-drop:hover {
  color: var(--fg-dead);
}

.fg-ledger-foot {
  padding: 12px 14px;
}

/* Console summary */
.fg-console {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  background: var(--fg-strip);
  color: var(--fg-strip-ink);
  position: sticky;
  top: calc(var(--header-h) + 12px);
}

.fg-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
}

.fg-console-head .fg-tag {
  color: color-mix(in srgb, #fff 55%, transparent);
}

.fg-console-badge {
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg-accent) 28%, transparent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}

.fg-console-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.fg-console-lines li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: start;
  font-size: .82rem;
}

.fg-console-x {
  color: color-mix(in srgb, #fff 50%, transparent);
  font-size: .72rem;
}

.fg-console-nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fg-console-rows {
  margin: 0;
  display: grid;
  gap: 8px;
}

.fg-console-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .86rem;
}

.fg-console-rows dt {
  color: color-mix(in srgb, #fff 62%, transparent);
}

.fg-console-rows dd {
  margin: 0;
  font-weight: 700;
}

.fg-console-rows .is-free,
.fg-console-rows .is-cut {
  color: var(--fg-accent);
}

.fg-console-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
}

.fg-console-total .fg-tag {
  color: color-mix(in srgb, #fff 50%, transparent);
}

.fg-console-total strong {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}

.fg-console-trust {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: .74rem;
  color: color-mix(in srgb, #fff 62%, transparent);
}

.fg-console-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fg-console-trust .fg-dot {
  background: var(--fg-accent);
}

@media (max-width: 980px) {
  .fg-console {
    position: static;
  }
}

/* ==========================================================================
   Checkout steps
   ========================================================================== */

.fg-steps {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.fg-step {
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  padding: 16px;
}

.fg-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fg-line);
}

.fg-step-no {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--fg-radius-sm);
  background: var(--fg-strip);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.fg-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fg-fields .field.full,
.fg-fields .fg-coupon {
  grid-column: 1 / -1;
}

@media (max-width: 780px) {
  .fg-fields {
    grid-template-columns: 1fr;
  }
}

html[data-store-theme="forge"] .fg-fields .field {
  display: grid;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--fg-muted);
}

html[data-store-theme="forge"] .fg-fields input,
html[data-store-theme="forge"] .fg-fields select,
html[data-store-theme="forge"] .fg-fields textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius-sm);
  background: var(--fg-bg);
  color: var(--fg-ink);
  font: inherit;
  font-weight: 500;
  transition: border-color var(--fg-dur) var(--fg-ease);
}

html[data-store-theme="forge"] .fg-fields textarea {
  min-height: 88px;
  resize: vertical;
}

html[data-store-theme="forge"] .fg-fields input:focus,
html[data-store-theme="forge"] .fg-fields select:focus,
html[data-store-theme="forge"] .fg-fields textarea:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--fg-brand) 55%, var(--fg-line));
  background: var(--fg-panel);
}

.fg-pays {
  display: grid;
  gap: 8px;
}

html[data-store-theme="forge"] .fg-pay,
html[data-store-theme="forge"] .payment-gateway.fg-pay {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius-sm);
  background: var(--fg-bg);
  cursor: pointer;
  transition: border-color var(--fg-dur) var(--fg-ease), box-shadow var(--fg-dur) var(--fg-ease);
}

html[data-store-theme="forge"] .fg-pay.is-selected,
html[data-store-theme="forge"] .payment-gateway.fg-pay.is-selected {
  border-color: var(--fg-brand);
  box-shadow: inset 0 0 0 1px var(--fg-brand);
  background: color-mix(in srgb, var(--fg-brand) 6%, var(--fg-panel));
}

.fg-pay-tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--fg-line-strong);
  position: relative;
}

.fg-pay.is-selected .fg-pay-tick {
  border-color: var(--fg-brand);
  background: var(--fg-brand);
  box-shadow: inset 0 0 0 3px var(--fg-panel);
}

.fg-coupon {
  margin-top: 12px;
}

/* ==========================================================================
   PDP — specs-first
   ========================================================================== */

.fg-pdp {
  display: grid;
  gap: 18px;
  padding-bottom: 28px;
}

.fg-pdp-crumb {
  font-size: .78rem;
  color: var(--fg-muted);
}

.fg-pdp-crumb .pd-breadcrumb {
  margin: 0;
}

.fg-pdp-crumb a {
  color: var(--fg-brand);
  text-decoration: none;
  font-weight: 600;
}

.fg-pdp-grid {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
}

@media (min-width: 981px) {
  .fg-pdp-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  }
}

.fg-pdp-view {
  display: grid;
  gap: 10px;
  min-width: 0;
}

@media (min-width: 981px) {
  .fg-pdp-view {
    position: sticky;
    top: calc(var(--header-h) + 12px);
  }
}

.fg-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.fg-view-bar .fg-mono {
  font-size: .72rem;
  color: var(--fg-muted);
}

html[data-store-theme="forge"] .fg-pdp-view .pd-gallery,
html[data-store-theme="forge"] .fg-pdp-view .pd-stage {
  background: var(--fg-media);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  overflow: hidden;
}

html[data-store-theme="forge"] .fg-pdp-view .pd-stage {
  aspect-ratio: 1;
}

html[data-store-theme="forge"] .fg-pdp-view .pd-stage img,
html[data-store-theme="forge"] .fg-pdp-view #main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

html[data-store-theme="forge"] .fg-pdp-view #main-image.is-zoomable {
  cursor: zoom-in;
}

html[data-store-theme="forge"] .fg-pdp-view .pd-thumbs {
  gap: 8px;
}

html[data-store-theme="forge"] .fg-pdp-view .pd-thumb {
  border-radius: var(--fg-radius-sm);
  border: 1px solid var(--fg-line);
  background: var(--fg-panel);
}

html[data-store-theme="forge"] .fg-pdp-view .pd-thumb.is-active,
html[data-store-theme="forge"] .fg-pdp-view .pd-thumb:hover {
  border-color: var(--fg-brand);
}

/* Panel — identity then plate then price/cart via display:contents */
.fg-pdp-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  padding: 16px;
}

@media (min-width: 981px) {
  .fg-pdp-panel {
    position: sticky;
    top: calc(var(--header-h) + 12px);
  }
}

.fg-pdp-panel > .pd-buy {
  display: contents;
}

.fg-pdp-panel .pd-category { order: 1; }
.fg-pdp-panel .pd-title { order: 2; }
.fg-pdp-panel .pd-rating { order: 3; }
.fg-plate { order: 4; }
.fg-pdp-panel .pd-price-block { order: 5; }
.fg-pdp-panel .pd-jump-details { order: 6; }
.fg-pdp-panel .pd-cart-form { order: 7; }
.fg-pdp-panel .product-accordion,
.fg-pdp-panel .pd-block { order: 8; }

/* Specs live on the plate — hide duplicates from shared buy block */
.fg-pdp-panel .pd-sku,
.fg-pdp-panel .pd-badges,
.fg-pdp-panel .pd-short {
  display: none !important;
}

.fg-plate {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius-sm);
  background: var(--fg-bg);
}

.fg-plate-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fg-plate-rows {
  margin: 0;
  display: grid;
  gap: 8px;
}

.fg-plate-rows > div {
  display: grid;
  grid-template-columns: minmax(88px, 34%) 1fr;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--fg-line);
}

.fg-plate-rows > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.fg-plate-rows dt {
  margin: 0;
}

.fg-plate-rows dd {
  margin: 0;
  font-size: .84rem;
  font-weight: 700;
  text-align: end;
}

.fg-plate-rows dd.is-ok {
  color: var(--fg-ok);
}

.fg-plate-rows dd.is-dead {
  color: var(--fg-dead);
}

.fg-plate-notes {
  margin: 0;
  padding-inline-start: 18px;
  display: grid;
  gap: 4px;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--fg-ink);
}

.fg-plate-notes li::marker {
  color: var(--fg-accent);
}

html[data-store-theme="forge"] .fg-pdp .pd-category {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
}

html[data-store-theme="forge"] .fg-pdp .pd-category:hover {
  color: var(--fg-brand);
}

html[data-store-theme="forge"] .fg-pdp .pd-title {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.2;
}

html[data-store-theme="forge"] .fg-pdp .pd-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--fg-line);
  border-bottom: 1px solid var(--fg-line);
}

html[data-store-theme="forge"] .fg-pdp .pd-price {
  font-family: var(--mono);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--fg-brand);
}

html[data-store-theme="forge"] .fg-pdp .pd-was {
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--fg-muted);
  text-decoration: line-through;
}

html[data-store-theme="forge"] .fg-pdp .pd-jump-details {
  font-size: .8rem;
  font-weight: 700;
  color: var(--fg-brand);
}

html[data-store-theme="forge"] .fg-pdp .bundle-offer.is-selected,
html[data-store-theme="forge"] .fg-pdp .variant-chip.is-selected,
html[data-store-theme="forge"] .bundle-offer.is-selected {
  border-color: var(--fg-brand);
  box-shadow: inset 0 0 0 2px var(--fg-brand);
}

html[data-store-theme="forge"] .fg-pdp .pd-add-btn,
html[data-store-theme="forge"] .fg-pdp .btn-accent {
  background: var(--fg-brand);
  border: 2px solid var(--fg-brand);
  border-radius: var(--fg-radius-sm);
  font-weight: 800;
  min-height: 48px;
  transition: background var(--fg-dur) var(--fg-ease), transform var(--fg-dur) var(--fg-ease);
}

html[data-store-theme="forge"] .fg-pdp .pd-add-btn:hover {
  transform: translateY(-1px);
}

.fg-pdp-rest {
  display: grid;
  gap: 16px;
}

html[data-store-theme="forge"] .fg-pdp-rest .pd-about,
html[data-store-theme="forge"] .fg-pdp-rest .pd-reviews,
html[data-store-theme="forge"] .fg-pdp-rest .pd-related {
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  padding: 18px;
}

/* Zoom lightbox */
.fg-zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fg-dur) var(--fg-ease);
}

.fg-zoom[hidden] {
  display: none !important;
}

.fg-zoom.is-open {
  opacity: 1;
  pointer-events: auto;
  display: grid;
}

.fg-zoom-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--fg-strip) 88%, transparent);
  cursor: zoom-out;
}

.fg-zoom-stage {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(92vw, 920px);
  max-height: 88vh;
  padding: 12px;
}

.fg-zoom-stage img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: var(--fg-panel);
  border-radius: var(--fg-radius-sm);
  border: 2px solid var(--fg-line);
}

.fg-zoom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  color: #fff;
}

.fg-zoom-bar .fg-sq {
  background: color-mix(in srgb, #fff 10%, transparent);
  border-color: color-mix(in srgb, #fff 22%, transparent);
  color: #fff;
}

.fg-zoom-x {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  background: var(--fg-panel);
  z-index: 2;
}

body.fg-zoomed {
  overflow: hidden;
}

/* ==========================================================================
   Sidebar rig
   ========================================================================== */

.fg-rig {
  display: grid;
  gap: 12px;
}

.fg-rig-mod {
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  padding: 14px;
}

.fg-bracket {
  position: relative;
}

.fg-bracket::before,
.fg-bracket::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--fg-accent) 55%, var(--fg-line));
  pointer-events: none;
}

.fg-bracket::before {
  top: 6px;
  inset-inline-start: 6px;
  border-inline-end: 0;
  border-bottom: 0;
}

.fg-bracket::after {
  bottom: 6px;
  inset-inline-end: 6px;
  border-inline-start: 0;
  border-top: 0;
}

.fg-rig-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}

.fg-rig-count {
  font-size: .72rem;
  color: var(--fg-muted);
}

.fg-rig-index {
  display: grid;
}

.fg-rig-index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--fg-line);
  color: var(--fg-ink);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 600;
  transition: color var(--fg-dur) var(--fg-ease);
}

.fg-rig-index a:last-child {
  border-bottom: 0;
}

.fg-rig-index a:hover,
.fg-rig-index a.is-active {
  color: var(--fg-brand);
}

.fg-rig-index .fg-idx {
  font-size: .68rem;
  color: var(--fg-muted);
}

.fg-rig-index b {
  opacity: .35;
  font-weight: 400;
}

.fg-rig-index--plain a {
  grid-template-columns: 1fr auto;
}

.fg-rig-all {
  display: inline-flex;
  margin-top: 10px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--fg-brand);
  text-decoration: none;
}

.fg-rig-text {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--fg-muted);
}

.fg-rig-trust {
  display: grid;
  gap: 8px;
  background: var(--fg-strip);
  color: var(--fg-strip-ink);
  border-color: var(--fg-strip);
}

.fg-rig-trust p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 600;
}

.fg-rig-trust .fg-dot {
  background: var(--fg-accent);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.fg-foot {
  margin-top: 40px;
  background: var(--fg-strip);
  color: var(--fg-strip-ink);
  border-top: 2px solid color-mix(in srgb, var(--fg-brand) 35%, var(--fg-strip));
}

.fg-assure {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
}

@media (min-width: 781px) {
  .fg-assure {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fg-assure li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  border-radius: var(--fg-radius-sm);
  background: color-mix(in srgb, #fff 4%, transparent);
}

.fg-assure-ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg-accent) 18%, transparent);
  color: var(--fg-accent);
  flex: 0 0 auto;
}

.fg-assure-ico svg {
  width: 18px;
  height: 18px;
}

.fg-assure-txt strong {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
}

.fg-foot-grid {
  display: grid;
  gap: 24px;
  padding: 28px 0;
}

@media (min-width: 800px) {
  .fg-foot-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.fg-foot-id {
  display: grid;
  gap: 10px;
  align-content: start;
}

.fg-foot-note {
  margin: 0;
  color: color-mix(in srgb, #fff 62%, transparent);
  line-height: 1.5;
  max-width: 36ch;
  font-size: .88rem;
}

.fg-foot-app {
  display: inline-flex;
  margin-top: 4px;
}

.fg-foot-app img {
  display: block;
  height: 40px;
  width: auto;
}

.fg-foot-col {
  display: grid;
  gap: 8px;
  align-content: start;
}

.fg-foot-col .fg-tag {
  color: color-mix(in srgb, #fff 45%, transparent);
  margin-bottom: 2px;
}

.fg-foot-col a {
  color: color-mix(in srgb, #fff 78%, transparent);
  text-decoration: none;
  font-size: .88rem;
  transition: color var(--fg-dur) var(--fg-ease);
}

.fg-foot-col a:hover {
  color: var(--fg-accent);
}

.fg-foot-social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.fg-foot-social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  color: #fff;
}

.fg-foot-social svg {
  width: 16px;
  height: 16px;
}

.fg-foot-base {
  border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
  padding: 12px 0;
  font-size: .78rem;
  color: color-mix(in srgb, #fff 55%, transparent);
}

.fg-foot-base-in {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  align-items: center;
}

.fg-foot-rights {
  opacity: .85;
}

/* ==========================================================================
   Responsive density
   ========================================================================== */

@media (max-width: 780px) {
  .fg-deck-in {
    min-height: 56px;
    gap: 8px;
  }

  .fg-bay {
    padding: 12px;
  }

  .fg-pdp-view,
  .fg-pdp-panel {
    position: static;
  }

  .fg-card-data {
    padding: 10px;
  }

  .fg-deal {
    grid-template-columns: 72px 1fr;
  }
}

/* Mobile nav root (panel rules live on .fg-drawer-panel) */
.fg-drawer { --fg-drawer: 1; }

@media (max-width: 430px) {
  html[data-store-theme="forge"] .shell {
    width: calc(100% - .75rem);
  }

  .fg-hero {
    padding: 18px 14px;
  }

  .fg-assure {
    grid-template-columns: 1fr;
  }
}