/* Buyers portal — bound styles */
@import url("/colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin:0; background:#fff; color:#000; font-family: var(--font-sans); }

.site { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ===== NAV ===== */
.nav { display:flex; align-items:center; justify-content:space-between; padding: 22px 0; border-bottom: 1px solid var(--border-1);}
.nav__logo img { height: 28px; display:block; }
.nav__links { display:flex; gap: 32px; }
.nav__links a { font-size: 14px; font-weight: 500; color:#000; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:3px;}
.nav__links a.is-active { border-color: var(--ge4a-green); }
.nav__links a:hover { border-color: var(--ge4a-green); }
.nav__cta { font-weight:600; font-size:13px; background:#000; color:#fff; padding:10px 18px; border-radius:999px; text-decoration:none;}
.nav__cta:hover { background: var(--ge4a-green); color:#000; }

/* ===== HERO ===== */
.hero { padding: 72px 0 40px; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color: var(--ge4a-green-ink); margin-bottom: 22px; display:inline-flex; align-items:center; gap:12px;}
.eyebrow::before { content:""; width: 24px; height:2px; background: var(--ge4a-green);}
.hero h1 { font-size: clamp(44px, 6vw, 80px); font-weight:700; letter-spacing:-0.02em; line-height:1.03; max-width: 20ch; margin: 0 0 20px; text-wrap: balance;}
.hero h1 .accent { color: var(--ge4a-green-ink); }
.hero .sub { font-size: 19px; color: var(--fg-2); max-width: 56ch; line-height:1.55; margin: 0 0 32px;}

/* ===== CATEGORY CARDS ===== */
.categories { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 12px 0 64px;}
.cat {
  border: 1px solid #000; border-radius: 16px; padding: 32px;
  display:flex; flex-direction:column; gap: 14px; min-height: 220px;
  background: #fff; cursor: pointer; transition: all 180ms cubic-bezier(.2,.7,.2,1);
  text-decoration: none; color: inherit;
}
.cat:hover { background: #000; color:#fff; }
.cat:hover .cat__desc { color: rgba(255,255,255,0.72); }
.cat:hover .cat__badge { background: var(--ge4a-green); color: #000; border-color: var(--ge4a-green);}
.cat__badge {
  align-self: flex-start;
  font-size: 11px; font-weight:700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid #000; border-radius: 999px;
}
.cat h2 { font-size: 44px; font-weight:700; letter-spacing:-0.02em; line-height: 1.05; margin: 0;}
.cat__desc { font-size: 15px; color: var(--fg-2); line-height: 1.5; max-width: 36ch;}
.cat__meta { margin-top: auto; display:flex; justify-content: space-between; align-items: center; padding-top: 16px; font-size: 13px;}
.cat__count { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em;}
.cat__arrow { font-weight: 700; font-size: 16px;}

/* ===== LISTINGS ===== */
.listings-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 48px 0 24px;
}
.listings-header h3 { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; margin: 0;}
.filters { display: flex; gap: 8px; }
.chip {
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border-2); background: #fff; cursor: pointer;
  transition: all 140ms;
}
.chip.is-active { background: #000; color: #fff; border-color: #000;}
.chip:hover { border-color: #000; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 80px;}

.listing {
  border: 1px solid var(--border-1); border-radius: 14px;
  background: #fff; display: flex; flex-direction: column;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: all 180ms cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
}
.listing:hover { border-color: #000; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.06);}
.listing__img {
  aspect-ratio: 4/3; background: #fafafa; position: relative;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border-1);
}
/* SVG module rendering via CSS */
.module {
  width: 70%; height: 70%;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 3px; background: #0a0a0a; padding: 6px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px #000;
}
.module .cell {
  background: linear-gradient(135deg, #1a2332 0%, #0d1621 100%);
  border-radius: 2px;
  position: relative;
}
.module .cell::after {
  content:""; position: absolute; inset: 20% 20% 40% 20%;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent);
}
.module--used .cell:nth-child(3n+1) { background: linear-gradient(135deg, #2a3341 0%, #141e2a 100%); }
.module--used .cell:nth-child(5) { background: linear-gradient(135deg, #3a2a2a 0%, #1a0d0d 100%); }
.module--broken .cell:nth-child(4),
.module--broken .cell:nth-child(9),
.module--broken .cell:nth-child(14),
.module--broken .cell:nth-child(17) {
  background: linear-gradient(135deg, #4a2020 0%, #1a0505 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

/* Grade badges */
.grade { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; position: absolute; top: 12px; right: 12px; }
.grade--a { background: var(--ge4a-green); color: #000; }
.grade--b { background: #fff; color: #000; border: 1px solid #000; }
.grade--c { background: #000; color: #fff; border: 1px solid var(--ge4a-warning); }

.hero__meta { display: flex; gap: 48px; padding-top: 20px; border-top: 1px solid var(--border-1); margin-top: 32px; }
.hero__meta > div { display: flex; flex-direction: column; }
.hero__meta .k { font-size: 14px; font-weight: 700; color: #000;}
.hero__meta .v { font-size: 12px; color: var(--fg-3);}

.listing__incoterms { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-1);}
.listing__recycle { font-size: 13px; font-weight: 700; color: var(--ge4a-warning); text-transform: uppercase; letter-spacing: 0.08em;}
.listing__avail.recycle { color: var(--ge4a-warning);}
.listing__avail.recycle::before { background: var(--ge4a-warning);}

/* Grade legend */
.legend { padding: 40px 32px; background: var(--bg-2); border-radius: 16px; margin-bottom: 48px;}
.legend__title { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 24px; color: #000;}
.legend__grid { display: grid; gap: 20px;}
.legend__row { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: baseline;}
.legend__row .grade { position: static; display: inline-block; width: fit-content; align-self: start;}
.legend__desc { font-size: 14px; color: var(--fg-2); line-height: 1.55;}

.listings-section { margin-bottom: 16px;}
.listings-header__title { display: flex; flex-direction: column; gap: 8px;}

/* Detail extras */
.grade-tag-a .dot { background: var(--ge4a-green);}
.grade-tag-b .dot { background: #fff; box-shadow: inset 0 0 0 1px #000;}
.grade-tag-c .dot { background: var(--ge4a-warning);}

.ref-box { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--border-2); border-radius: 10px; display: flex; justify-content: space-between; align-items: center;}
.ref-box__k { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3);}
.ref-box__v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #000;}

.condition-box { padding: 20px 22px; background: var(--bg-2); border-left: 3px solid var(--ge4a-green); border-radius: 4px; margin: 24px 0;}
.condition-box__p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 8px 0 0;}

.disclaimer { font-size: 12px; line-height: 1.55; color: var(--fg-2); padding: 16px 18px; background: #fffbe6; border: 1px solid #f5dc7a; border-radius: 8px; margin: 24px 0;}
.disclaimer b { color: #000; }
.recycle-label { font-size: 20px; font-weight: 700; color: var(--ge4a-warning); text-transform: uppercase; letter-spacing: 0.06em;}

.listing__badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; background: #000; color:#fff;
}
.listing__badge.used { background: var(--ge4a-green); color:#000; }
.listing__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1;}
.listing__mfr { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3);}
.listing__name { font-size: 17px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.25; color:#000;}
.listing__specs { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--fg-2);}
.listing__specs span b { color: #000; font-weight: 700;}
.listing__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-1);}
.listing__price { font-size: 20px; font-weight: 700; letter-spacing: -0.01em;}
.listing__price small { font-size: 12px; color: var(--fg-3); font-weight: 500; margin-left: 4px;}
.listing__avail { font-size: 12px; color: var(--ge4a-green-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;}
.listing__avail::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--ge4a-green);}
.listing__avail.low { color: var(--ge4a-warning); }
.listing__avail.low::before { background: var(--ge4a-warning);}

/* ===== FOOTER ===== */
.footer { padding: 40px 0; border-top: 1px solid var(--border-1); font-size: 13px; color: var(--fg-3); display: flex; justify-content: space-between;}
.footer a { color: var(--fg-3); }

/* ===== DETAIL PAGE ===== */
.breadcrumb { padding: 24px 0; font-size: 13px; color: var(--fg-3);}
.breadcrumb a { color: var(--fg-3); text-decoration: none; }
.breadcrumb a:hover { color: #000; }
.breadcrumb .sep { margin: 0 8px; opacity: 0.4;}

.detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; padding: 16px 0 80px; align-items: flex-start;}
.detail__media { position: sticky; top: 24px;}
.detail__hero {
  aspect-ratio: 1/1; background: #fafafa; border: 1px solid var(--border-1); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.detail__hero .module { width: 75%; height: 75%;}
.detail__hero .twin-tag {
  position: absolute; bottom: 16px; right: 16px;
  background: #000; color:#fff; padding: 8px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  display:inline-flex; align-items:center; gap: 8px;
}
.twin-tag .dot { width: 6px; height: 6px; background: var(--ge4a-green); border-radius: 50%;}
.thumbs { display: flex; gap: 10px; margin-top: 14px;}
.thumbs .t {
  width: 72px; aspect-ratio: 1/1; border: 1px solid var(--border-1); border-radius: 10px;
  background: #fafafa; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.thumbs .t.is-active { border-color: #000; border-width: 2px;}
.thumbs .t .module { width: 70%; height: 70%; }

.detail__info > .mfr { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ge4a-green-ink);}
.detail__info > h1 { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 8px 0 16px;}
.detail__info > .tagline { font-size: 16px; color: var(--fg-2); line-height: 1.5; margin-bottom: 28px;}
.price-row { display: flex; align-items: baseline; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1);}
.price-row .price { font-size: 38px; font-weight: 700; letter-spacing: -0.02em;}
.price-row .price small { font-size: 15px; color: var(--fg-3); font-weight: 500; margin-left: 4px;}
.price-row .qty { margin-left: auto; font-size: 13px; color: var(--fg-3);}
.price-row .qty b { color: #000; }

.specs { padding: 24px 0; border-bottom: 1px solid var(--border-1);}
.specs h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 14px;}
.specs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;}
.spec { display:flex; justify-content:space-between; padding: 8px 0; border-bottom: 1px solid var(--border-1);}
.spec:last-child, .spec:nth-last-child(2) { border-bottom: 0;}
.spec .k { font-size: 13px; color: var(--fg-2);}
.spec .v { font-size: 13px; font-weight: 600; color: #000;}

.cta-row { display: flex; gap: 12px; padding: 24px 0;}
.btn { font-family:inherit; font-weight:600; font-size:15px; padding:14px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition: all 160ms;}
.btn--primary { background:#000; color:#fff;}
.btn--primary:hover { background: var(--ge4a-green); color:#000; }
.btn--ghost { background: transparent; color:#000; border-color:#000;}
.btn--ghost:hover { background:#000; color:#fff; }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px;}
.trust .t {
  border: 1px solid var(--border-1); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.trust .t .h { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge4a-green-ink);}
.trust .t .d { font-size: 13px; color: var(--fg-2); line-height: 1.4;}