/* Freedom Warehouse Direct — angular shape language, v2 ("HUD").
   Loaded after styles.css and activated with <html data-shape="angular">.
   Square corners, hairline frames with bracketed corners, numbered technical labels,
   diagonal section breaks. No chopped buttons. */

html[data-shape="angular"] { --radius: 0px; --hud: var(--brass); --hud-dark: var(--brass-dark); }
html[data-shape="angular"] *,
html[data-shape="angular"] *::before,
html[data-shape="angular"] *::after { border-radius: 0 !important; }

/* ---- HUD corner brackets: top-left and bottom-right ticks on a hairline frame ---- */
html[data-shape="angular"] .hud { position: relative; }
html[data-shape="angular"] .hud::before,
html[data-shape="angular"] .hud::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 2px solid var(--hud);
}
html[data-shape="angular"] .hud::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
html[data-shape="angular"] .hud::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

/* ---- buttons: plain rectangles, thin outer frame that lights up on hover ---- */
html[data-shape="angular"] .btn { position: relative; letter-spacing: .12em; border-width: 1px; }
html[data-shape="angular"] .btn::after {
  content: ""; position: absolute; inset: 4px; border: 1px solid transparent; pointer-events: none; transition: border-color .15s;
}
html[data-shape="angular"] .btn-brass { background: var(--brass); color: var(--ink); }
html[data-shape="angular"] .btn-brass:hover::after { border-color: rgba(54,59,54,.45); }
html[data-shape="angular"] .btn-outline-light:hover::after,
html[data-shape="angular"] .btn-outline:hover::after { border-color: currentColor; }

/* ---- header ---- */
html[data-shape="angular"] .site-header { border-bottom: 1px solid var(--line); }
html[data-shape="angular"] .site-nav { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--hud-dark); }
html[data-shape="angular"] .site-nav a { position: relative; letter-spacing: .14em; font-size: .95rem; }
html[data-shape="angular"] .site-nav a[aria-current="page"] { border-bottom: 0; color: var(--brass); }
html[data-shape="angular"] .site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--brass);
}
html[data-shape="angular"] .header-search input { border: 1px solid var(--line); border-bottom-color: var(--hud-dark); background: rgba(0,0,0,.25); }
html[data-shape="angular"] .cart-link,
html[data-shape="angular"] .nav-toggle { border-width: 1px; }

/* ---- technical labels: "// 01" prefix on eyebrows, wide tracking ---- */
html[data-shape="angular"] body { counter-reset: fwd-section; }
html[data-shape="angular"] .eyebrow { letter-spacing: .22em; font-size: .82rem; }
html[data-shape="angular"] .eyebrow::before { content: "// "; opacity: .7; }
html[data-shape="angular"] main .section-head .eyebrow { counter-increment: fwd-section; }
html[data-shape="angular"] main .section-head .eyebrow::before { content: "// " counter(fwd-section, decimal-leading-zero) "  "; }

/* ---- hero: readout grid, diagonal bottom edge, bracketed panel ---- */
html[data-shape="angular"] .hero {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 0 100%);
  padding-bottom: 40px;
  background-size: 64px 64px;
  background-image:
    linear-gradient(rgba(201,164,107,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,164,107,.10) 1px, transparent 1px);
}
html[data-shape="angular"] .hero::after { background: linear-gradient(90deg, var(--ink) 20%, rgba(54,59,54,.35) 100%); }
html[data-shape="angular"] .hero h1 { letter-spacing: .02em; }
html[data-shape="angular"] .hero-panel {
  position: relative; border: 1px solid var(--line); background: rgba(21,24,21,.72); backdrop-filter: blur(2px);
}
html[data-shape="angular"] .hero-panel::before,
html[data-shape="angular"] .hero-panel::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--hud); pointer-events: none;
}
html[data-shape="angular"] .hero-panel::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
html[data-shape="angular"] .hero-panel::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
html[data-shape="angular"] .hero-panel .row { border-bottom: 1px dashed var(--line); }
html[data-shape="angular"] .hero-panel .ico { border: 1px solid var(--hud-dark); background: transparent; }
html[data-shape="angular"] .hero-panel h3 { letter-spacing: .1em; font-size: 1.05rem; }
html[data-shape="angular"] .hero-panel h3::before { content: "▸ "; color: var(--brass); font-size: .8em; }

/* ---- cards and tiles: hairline frames, brackets appear on hover ---- */
html[data-shape="angular"] .product-card,
html[data-shape="angular"] .cat-tile,
html[data-shape="angular"] .feature,
html[data-shape="angular"] .guide-card,
html[data-shape="angular"] .summary,
html[data-shape="angular"] .notice-box,
html[data-shape="angular"] .empty { position: relative; border: 1px solid var(--border); box-shadow: none; transition: border-color .15s, transform .15s; }
html[data-shape="angular"] .product-card::before,
html[data-shape="angular"] .product-card::after,
html[data-shape="angular"] .cat-tile::before,
html[data-shape="angular"] .cat-tile::after,
html[data-shape="angular"] .feature::before,
html[data-shape="angular"] .feature::after,
html[data-shape="angular"] .guide-card::before,
html[data-shape="angular"] .guide-card::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--hud-dark); pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
html[data-shape="angular"] .product-card::before,
html[data-shape="angular"] .cat-tile::before,
html[data-shape="angular"] .feature::before,
html[data-shape="angular"] .guide-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
html[data-shape="angular"] .product-card::after,
html[data-shape="angular"] .cat-tile::after,
html[data-shape="angular"] .feature::after,
html[data-shape="angular"] .guide-card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
html[data-shape="angular"] .feature::before, html[data-shape="angular"] .feature::after,
html[data-shape="angular"] .guide-card::before, html[data-shape="angular"] .guide-card::after { opacity: 1; }
html[data-shape="angular"] .product-card:hover,
html[data-shape="angular"] .cat-tile:hover { border-color: var(--hud-dark); transform: translateY(-2px); box-shadow: none; }
html[data-shape="angular"] .product-card:hover::before,
html[data-shape="angular"] .product-card:hover::after,
html[data-shape="angular"] .cat-tile:hover::before,
html[data-shape="angular"] .cat-tile:hover::after { opacity: 1; }
html[data-shape="angular"] .card-media { border-bottom: 1px solid var(--border); }
html[data-shape="angular"] .cat-tile .label,
html[data-shape="angular"] .product-card h3 { letter-spacing: .04em; }

/* badges, stock chips, banner tag: square, tracked caps, hairline */
html[data-shape="angular"] .badge,
html[data-shape="angular"] .stock,
html[data-shape="angular"] .sample-banner .tag,
html[data-shape="angular"] .cart-count { letter-spacing: .12em; }
html[data-shape="angular"] .stock { border: 1px solid currentColor; padding: 2px 8px; }

/* section headings: hairline rule with a bronze segment */
html[data-shape="angular"] .section-head { position: relative; padding-bottom: 14px; margin-bottom: 22px; }
html[data-shape="angular"] .section-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--hud-dark) 0 120px, var(--border) 120px);
}

/* dark band sections: diagonal top edge, same readout grid */
html[data-shape="angular"] .section-dark {
  clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%); padding-top: 104px;
  background-image:
    linear-gradient(rgba(201,164,107,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,164,107,.08) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* forms */
html[data-shape="angular"] input,
html[data-shape="angular"] select,
html[data-shape="angular"] textarea { border: 1px solid var(--border); border-bottom-color: var(--hud-dark); }
html[data-shape="angular"] .qty { border: 1px solid var(--ink); }

/* footer: hairline top with bracket ticks at both ends */
html[data-shape="angular"] .site-footer { position: relative; border-top: 1px solid var(--hud-dark); }
html[data-shape="angular"] .site-footer::before,
html[data-shape="angular"] .site-footer::after {
  content: ""; position: absolute; top: -1px; width: 48px; height: 4px; background: var(--brass);
}
html[data-shape="angular"] .site-footer::before { left: 0; }
html[data-shape="angular"] .site-footer::after { right: 0; }
html[data-shape="angular"] .footer-col h4 { letter-spacing: .16em; }
html[data-shape="angular"] .footer-col h4::before { content: "// "; color: var(--brass); }