<section class="br-prd" aria-label="Brutalist product cards demo">
  <div class="card">
    <div class="grid">

      <!-- CARD 1 -->
      <article class="card-1 br-card">
        <div class="img-zone" aria-hidden="true">
          <div class="cross"></div>
          <div class="tag">NEW DROP</div>
        </div>
        <div class="body">
          <div class="cat">// Object Series</div>
          <div class="name">VOID<br />CHAIR<br />MK.II</div>
          <div class="meta">
            <div class="price">$840</div>
            <button class="btn" type="button">ACQUIRE →</button>
          </div>
        </div>
      </article>

      <!-- CARD 2 -->
      <article class="card-2 br-card">
        <div class="stripe-top" aria-hidden="true"></div>
        <div class="num" aria-hidden="true">02</div>
        <div class="body">
          <div class="cat">// Raw Material</div>
          <div class="name">The<br />Slab<br />Table</div>
          <div class="desc">Cast in a single pour of recycled concrete aggregate. No finish. No apology.</div>
        </div>
        <div class="img-zone-2" aria-hidden="true">
          <div class="dot"></div>
          <span>SLAB</span>
        </div>
        <div class="body">
          <div class="bottom">
            <div class="price">
              $1,290
              <small>FREE FREIGHT</small>
            </div>
            <button class="btn" type="button">ADD →</button>
          </div>
        </div>
      </article>

      <!-- CARD 3 -->
      <article class="card-3 br-card">
        <div class="img-zone" aria-hidden="true">
          <div class="diamond"></div>
          <div class="stamp">IN<br />STOCK</div>
        </div>
        <div class="body">
          <div class="ref">REF // 0039-B</div>
          <div class="name">IRON<br />SHELF<br />UNIT</div>
          <div class="specs">
            <div class="spec">
              <div class="spec-label">Material</div>
              <div class="spec-val">Raw Iron</div>
            </div>
            <div class="spec">
              <div class="spec-label">Weight</div>
              <div class="spec-val">34 kg</div>
            </div>
            <div class="spec">
              <div class="spec-label">Width</div>
              <div class="spec-val">120 cm</div>
            </div>
            <div class="spec">
              <div class="spec-label">Shelves</div>
              <div class="spec-val">5 fixed</div>
            </div>
          </div>
          <div class="bottom">
            <div class="price">$620</div>
            <button class="btn" type="button">BUY →</button>
          </div>
        </div>
      </article>
    </div>

    <!-- ROW 2 -->
    <div class="row2">
      <article class="card-4 br-card">
        <div class="left">
          <div class="label">// Featured Collection</div>
          <div class="big-name">BRUT<br />FORCE<br />SS25</div>
        </div>
        <div class="divider" aria-hidden="true"></div>
        <div class="right">
          <div class="desc-text">Objects made without apology. Raw edges, cast imperfections, and load-bearing joints exposed. Furniture as statement — not decoration.</div>
          <div class="badge">SHOP 24 PIECES →</div>
        </div>
      </article>

      <article class="card-5 br-card">
        <div class="top-tag">// Quick Add</div>
        <div class="items">
          <div class="item">
            <span class="item-name">Bolt Stool</span>
            <span class="item-price">$280</span>
          </div>
          <div class="item">
            <span class="item-name">Grid Mirror</span>
            <span class="item-price">$460</span>
          </div>
          <div class="item">
            <span class="item-name">Tank Lamp</span>
            <span class="item-price">$195</span>
          </div>
          <div class="item">
            <span class="item-name">Beam Bench</span>
            <span class="item-price">$740</span>
          </div>
          <div class="item">
            <span class="item-name">Forge Vase</span>
            <span class="item-price">$89</span>
          </div>
        </div>
        <button class="view-all" type="button">VIEW ALL ITEMS</button>
      </article>
    </div>
  </div>
</section>

/* ─── 01 Brutalist Product Cards — raw e-commerce grid ──────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Serif+Display:ital@0;1&display=swap');

.br-prd {
  --br-prd-black: #0a0a0a;
  --br-prd-white: #f5f0e8;
  --br-prd-red: #e8001d;
  --br-prd-yellow: #f7e02b;
  --br-prd-cement: #c8c0b4;
  --br-prd-border: 3px solid #0a0a0a;
  --br-prd-border-thick: 6px solid #0a0a0a;

  position: relative;
  width: 100%;
  min-height: 980px;
  background: var(--br-prd-white);
  font-family: 'Space Mono', ui-monospace, monospace;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.br-prd *,
.br-prd *::before,
.br-prd *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Noise texture — moved off body::before; scoped to wrapper */
.br-prd::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 999;
}

.br-prd .card {
  position: relative;
  width: 100%;
  max-width: 960px;
  z-index: 1;
}

.br-prd .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  width: 100%;
}

/* CARD BASE */
.br-prd .br-card {
  border: var(--br-prd-border-thick);
  border-color: var(--br-prd-black);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.08s;
}
.br-prd .br-card:hover { transform: translate(-3px, -3px); }
.br-prd .br-card:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--br-prd-border-thick);
  border-color: var(--br-prd-red);
  pointer-events: none;
  z-index: 10;
}

/* CARD 1 — BRUTALIST STATEMENT */
.br-prd .card-1 {
  background: var(--br-prd-black);
  aspect-ratio: 3 / 4;
}
.br-prd .card-1 .img-zone {
  width: 100%;
  height: 55%;
  background: #1c1c1c;
  border-bottom: var(--br-prd-border-thick);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.br-prd .card-1 .img-zone::before {
  content: 'OBJ';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: #333;
  letter-spacing: 12px;
  position: absolute;
}
.br-prd .card-1 .img-zone .cross {
  width: 120px;
  height: 120px;
  position: relative;
  z-index: 2;
}
.br-prd .card-1 .img-zone .cross::before,
.br-prd .card-1 .img-zone .cross::after {
  content: '';
  position: absolute;
  background: var(--br-prd-red);
}
.br-prd .card-1 .img-zone .cross::before { width: 4px; height: 100%; left: 50%; transform: translateX(-50%); }
.br-prd .card-1 .img-zone .cross::after { height: 4px; width: 100%; top: 50%; transform: translateY(-50%); }
.br-prd .card-1 .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--br-prd-red);
  color: var(--br-prd-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 4px 10px;
  text-transform: uppercase;
}
.br-prd .card-1 .body { padding: 18px 20px; }
.br-prd .card-1 .cat {
  color: #555;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.br-prd .card-1 .name {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--br-prd-white);
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.br-prd .card-1 .meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 2px solid #333;
  padding-top: 14px;
  margin-top: 10px;
}
.br-prd .card-1 .price {
  color: var(--br-prd-yellow);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
}
.br-prd .card-1 .btn {
  background: var(--br-prd-yellow);
  color: var(--br-prd-black);
  border: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
}

/* CARD 2 — YELLOW STRIKE */
.br-prd .card-2 {
  background: var(--br-prd-yellow);
  border-left: none;
  aspect-ratio: 3 / 4;
}
.br-prd .card-2 .stripe-top {
  background: repeating-linear-gradient(
    -45deg,
    var(--br-prd-black),
    var(--br-prd-black) 10px,
    var(--br-prd-yellow) 10px,
    var(--br-prd-yellow) 20px
  );
  height: 16px;
  border-bottom: var(--br-prd-border-thick);
}
.br-prd .card-2 .num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 120px;
  color: rgba(0, 0, 0, 0.08);
  position: absolute;
  right: -10px;
  top: 20px;
  line-height: 1;
  pointer-events: none;
}
.br-prd .card-2 .body { padding: 20px; position: relative; }
.br-prd .card-2 .cat {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #444;
  margin-bottom: 10px;
}
.br-prd .card-2 .name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 42px;
  line-height: 0.95;
  color: var(--br-prd-black);
  margin-bottom: 16px;
  font-style: italic;
}
.br-prd .card-2 .desc {
  font-size: 11px;
  line-height: 1.7;
  color: #333;
  border-left: 4px solid var(--br-prd-black);
  padding-left: 12px;
  margin-bottom: 20px;
}
.br-prd .card-2 .img-zone-2 {
  width: calc(100% + 40px);
  margin-left: -20px;
  height: 140px;
  background: var(--br-prd-black);
  border-top: var(--br-prd-border-thick);
  border-bottom: var(--br-prd-border-thick);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.br-prd .card-2 .img-zone-2 span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: #222;
  letter-spacing: 8px;
}
.br-prd .card-2 .img-zone-2 .dot {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid var(--br-prd-yellow);
  position: absolute;
}
.br-prd .card-2 .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.br-prd .card-2 .price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--br-prd-black);
  line-height: 1;
}
.br-prd .card-2 .price small {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  display: block;
  letter-spacing: 2px;
  color: #555;
}
.br-prd .card-2 .btn {
  background: var(--br-prd-black);
  color: var(--br-prd-yellow);
  border: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
}

/* CARD 3 — CEMENT INDUSTRIAL */
.br-prd .card-3 {
  background: var(--br-prd-cement);
  border-left: none;
  aspect-ratio: 3 / 4;
}
.br-prd .card-3 .img-zone {
  width: 100%;
  height: 50%;
  background: #b0a898;
  border-bottom: var(--br-prd-border-thick);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.br-prd .card-3 .img-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 28px,
    rgba(0, 0, 0, 0.04) 28px,
    rgba(0, 0, 0, 0.04) 30px
  );
}
.br-prd .card-3 .diamond {
  width: 100px;
  height: 100px;
  border: 6px solid var(--br-prd-black);
  transform: rotate(45deg);
  position: relative;
  z-index: 2;
}
.br-prd .card-3 .diamond::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 3px solid var(--br-prd-black);
}
.br-prd .card-3 .stamp {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 60px;
  height: 60px;
  border: 4px solid var(--br-prd-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--br-prd-red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-12deg);
  z-index: 3;
}
.br-prd .card-3 .body { padding: 20px; }
.br-prd .card-3 .ref {
  font-size: 9px;
  letter-spacing: 4px;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.br-prd .card-3 .name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  line-height: 0.9;
  color: var(--br-prd-black);
  margin-bottom: 14px;
  letter-spacing: 2px;
}
.br-prd .card-3 .specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: var(--br-prd-border);
  margin-bottom: 16px;
}
.br-prd .card-3 .spec {
  padding: 8px 10px;
  border-right: var(--br-prd-border);
  border-bottom: var(--br-prd-border);
}
.br-prd .card-3 .spec:nth-child(even) { border-right: none; }
.br-prd .card-3 .spec:nth-child(3),
.br-prd .card-3 .spec:nth-child(4) { border-bottom: none; }
.br-prd .card-3 .spec-label {
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 3px;
}
.br-prd .card-3 .spec-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--br-prd-black);
}
.br-prd .card-3 .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.br-prd .card-3 .price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 44px;
  color: var(--br-prd-black);
  line-height: 1;
}
.br-prd .card-3 .btn {
  background: var(--br-prd-red);
  color: var(--br-prd-white);
  border: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
}

/* BOTTOM ROW */
.br-prd .row2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  border-top: var(--br-prd-border-thick);
}

/* CARD 4 — WIDE FEATURE */
.br-prd .card-4 {
  background: var(--br-prd-red);
  border: none;
  border-right: var(--br-prd-border-thick);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.br-prd .card-4::before {
  content: '★';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 300px;
  color: rgba(255, 255, 255, 0.08);
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
.br-prd .card-4 .label {
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.br-prd .card-4 .big-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: var(--br-prd-white);
  line-height: 0.85;
  letter-spacing: 3px;
}
.br-prd .card-4 .divider {
  width: 3px;
  height: 100px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
.br-prd .card-4 .right { flex: 1; }
.br-prd .card-4 .desc-text {
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}
.br-prd .card-4 .badge {
  display: inline-block;
  background: var(--br-prd-yellow);
  color: var(--br-prd-black);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 16px;
  text-transform: uppercase;
}

/* CARD 5 — TALL ASIDE */
.br-prd .card-5 {
  background: var(--br-prd-black);
  border: none;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.br-prd .card-5 .top-tag {
  font-size: 9px;
  letter-spacing: 4px;
  color: #555;
  text-transform: uppercase;
  border-bottom: 1px solid #222;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.br-prd .card-5 .items { flex: 1; }
.br-prd .card-5 .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #222;
  cursor: pointer;
}
.br-prd .card-5 .item:hover .item-name { color: var(--br-prd-yellow); }
.br-prd .card-5 .item-name {
  font-size: 11px;
  color: var(--br-prd-white);
  letter-spacing: 1px;
  transition: color 0.15s;
}
.br-prd .card-5 .item-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--br-prd-yellow);
}
.br-prd .card-5 .view-all {
  margin-top: 16px;
  background: transparent;
  border: 2px solid #333;
  color: #555;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}
.br-prd .card-5 .view-all:hover { border-color: var(--br-prd-yellow); color: var(--br-prd-yellow); }

@media (max-width: 760px) {
  .br-prd .grid { grid-template-columns: 1fr; }
  .br-prd .row2 { grid-template-columns: 1fr; }
  .br-prd .card-2,
  .br-prd .card-3 { border-left: var(--br-prd-border-thick); border-top: none; }
  .br-prd .card-4 { border-right: none; border-bottom: var(--br-prd-border-thick); flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .br-prd .br-card,
  .br-prd .card-5 .item-name,
  .br-prd .card-5 .view-all { transition: none; }
}