/* ============================================================
   NDE3D HexUI design system — v0.1
   Locked language: regular flat-top hexes (H = W x 0.866),
   uniform 5px border via inner-scale, brand green #5BC83D,
   staggered honeycomb, bottom-up glow, 120-degree rule for
   all elongated shapes (cap = height x 0.28868).
   ============================================================ */

:root {
  --nde-ground:      #0a1414;
  --nde-lift:        #0f1c1e;
  --nde-rule:        #1a2d31;
  --nde-t1:          #e0f0ec;
  --nde-t2:          #6d8886;
  --nde-accent:      #5BC83D;
  --nde-accent-dim:  rgba(91, 200, 61, 0.15);
  --nde-accent-glow: rgba(91, 200, 61, 0.50);
  --nde-frame-hi:    #4b6157;
  --nde-frame-mid:   #22322c;
  --nde-frame-lo:    #06100c;
  --nde-frame-hov-hi:  #a4e488;
  --nde-frame-hov-mid: #4ea832;
  --nde-frame-hov-lo:  #0f2807;
  --nde-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ============ Front-page shell ============ */
body.nde-hexui-front {
  background: var(--nde-ground);
  color: var(--nde-t1);
}
body.nde-hexui-front::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, var(--nde-accent-dim) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(120, 200, 220, 0.05) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}
.nde-front {
  position: relative;
  z-index: 1;
  /* width:100% matters: Astra's .ast-container is display:flex, and a flex
     child defaults to shrink-to-content — without this the whole page
     renders at its intrinsic width (the "narrow site" bug, 2026-08-09). */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px 100px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Belt-and-braces: strip any Astra container width/background on the front
   page, regardless of Customizer settings (the brand-pass content-bg box
   must not show here — the hex ground owns the page). */
body.nde-hexui-front .site-content,
body.nde-hexui-front #content,
body.nde-hexui-front .ast-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}
body.nde-hexui-front #primary,
body.nde-hexui-front .site-main,
body.nde-hexui-front .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  max-width: 100% !important;
}

/* ============ Top zone ============ */
.nde-topzone { position: relative; margin-bottom: 30px; }

.nde-util {
  --u-w: 110px;
  --u-h: calc(var(--u-w) * 0.8660254);
  position: absolute;
  width: var(--u-w);
  height: var(--u-h);
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--nde-t2);
  cursor: pointer;
  z-index: 4;
  text-decoration: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
  transition: filter 260ms, color 260ms, transform 200ms;
  display: block;
}
.nde-util:hover {
  color: var(--nde-t1);
  transform: translateY(-2px);
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.6))
          drop-shadow(0 0 16px var(--nde-accent-glow));
}
.nde-util .frame {
  position: absolute; inset: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: linear-gradient(135deg,
    var(--nde-frame-hi) 0%, var(--nde-frame-mid) 32%,
    var(--nde-frame-mid) 68%, var(--nde-frame-lo) 100%);
  transition: background 260ms;
}
.nde-util:hover .frame {
  background: linear-gradient(135deg,
    var(--nde-frame-hov-hi) 0%, var(--nde-frame-hov-mid) 32%,
    var(--nde-frame-hov-mid) 68%, var(--nde-frame-hov-lo) 100%);
}
.nde-util .surface {
  position: absolute;
  inset: 5px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--nde-lift);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nde-util svg { width: 30px; height: 30px; color: var(--nde-accent); }
.nde-util .lbl {
  font-family: var(--nde-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}
.nde-util-account { top: 0; left: 0; }
.nde-util-cart    { top: 0; right: 0; }
.nde-util-contact { top: calc(110px * 0.8660254 + 60px); left: 0; }

.nde-cart-badge {
  position: absolute;
  top: -4px;
  right: 10px;
  min-width: 22px;
  height: 22px;
  background: var(--nde-accent);
  color: #04120b;
  font-family: var(--nde-mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  padding: 0 4px;
  z-index: 5;
}

.nde-deco-hex {
  position: absolute;
  top: calc(110px * 0.8660254 + 18px);
  left: 26px;
  width: 36px;
  height: calc(36px * 0.8660254);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: linear-gradient(135deg, var(--nde-frame-hi) 0%, var(--nde-frame-lo) 100%);
  opacity: 0.6;
  z-index: 3;
}

/* ============ Hero ============ */
.nde-hero {
  --hero-h: 420px;
  --hero-cap: calc(var(--hero-h) * 0.28868);
  --hero-s-cap: calc((var(--hero-h) - 10px) * 0.28868);
  position: relative;
  margin: 0 68px;
  height: var(--hero-h);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55));
}
.nde-hero .frame {
  position: absolute; inset: 0;
  clip-path: polygon(
    var(--hero-cap) 0, calc(100% - var(--hero-cap)) 0, 100% 50%,
    calc(100% - var(--hero-cap)) 100%, var(--hero-cap) 100%, 0 50%);
  background: linear-gradient(135deg,
    var(--nde-frame-hi) 0%, var(--nde-frame-mid) 32%,
    var(--nde-frame-mid) 68%, var(--nde-frame-lo) 100%);
}
.nde-hero .surface {
  position: absolute; inset: 5px;
  clip-path: polygon(
    var(--hero-s-cap) 0, calc(100% - var(--hero-s-cap)) 0, 100% 50%,
    calc(100% - var(--hero-s-cap)) 100%, var(--hero-s-cap) 100%, 0 50%);
  background: linear-gradient(160deg, var(--nde-lift) 0%, #0c1a1c 100%);
  overflow: hidden;
}
.nde-hero .surface img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Temporary pre-launch notice over the hero logo (Jazz 2026-08-16).
   Remove at cutover. */
.nde-hero .nde-construction {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 18%;
  font-family: var(--nde-mono, ui-monospace, monospace);
  font-weight: 800;
  font-size: clamp(16px, 3.2vw, 30px);
  line-height: 1.35;
  color: #ff2222;
  text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.85);
}
.nde-hero .nde-construction a {
  color: #ff2222;
  text-decoration: underline;
}

.nde-fb {
  position: absolute;
  right: 8px;
  bottom: -18px;
  z-index: 4;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1877F2; color: #fff;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  transition: transform 200ms, box-shadow 260ms;
}
.nde-fb:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 14px rgba(0,0,0,0.6), 0 0 18px rgba(24,119,242,0.5);
}
.nde-fb svg { width: 26px; height: 26px; }

/* ============ Menu band ============ */
.nde-menuband { margin-top: 60px; text-align: center; }
.nde-menuband .bandlabel {
  font-family: var(--nde-mono);
  font-size: 10px;
  letter-spacing: 0.45em;
  color: var(--nde-t2);
  text-transform: uppercase;
  margin-bottom: 26px;
}
.nde-menu {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 54px;
  flex-wrap: wrap;
}
.nde-menu-item {
  --m-w: 96px;
  --m-h: calc(var(--m-w) * 0.8660254);
  --m-open: 250px;
  position: relative;
  width: var(--m-w);
  height: var(--m-h);
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--nde-t2);
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: width 340ms cubic-bezier(0.4, 0, 0.2, 1), filter 340ms ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
.nde-menu-item + .nde-menu-item { margin-left: calc(var(--m-w) * -0.25); }
.nde-menu-item:nth-child(even) { margin-top: calc(var(--m-h) / 2); }
.nde-menu-item:hover {
  width: var(--m-open);
  z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6))
          drop-shadow(0 0 18px var(--nde-accent-glow));
}
.nde-menu-item .frame {
  position: absolute; inset: 0;
  clip-path: polygon(
    calc(var(--m-h) * 0.28868) 0,
    calc(100% - var(--m-h) * 0.28868) 0,
    100% 50%,
    calc(100% - var(--m-h) * 0.28868) 100%,
    calc(var(--m-h) * 0.28868) 100%,
    0 50%);
  background: linear-gradient(135deg,
    var(--nde-frame-hi) 0%, var(--nde-frame-mid) 32%,
    var(--nde-frame-mid) 68%, var(--nde-frame-lo) 100%);
  transition: background 340ms;
}
.nde-menu-item:hover .frame {
  background: linear-gradient(135deg,
    var(--nde-frame-hov-hi) 0%, var(--nde-frame-hov-mid) 32%,
    var(--nde-frame-hov-mid) 68%, var(--nde-frame-hov-lo) 100%);
}
.nde-menu-item .surface {
  position: absolute; inset: 5px;
  clip-path: polygon(
    calc((var(--m-h) - 10px) * 0.28868) 0,
    calc(100% - (var(--m-h) - 10px) * 0.28868) 0,
    100% 50%,
    calc(100% - (var(--m-h) - 10px) * 0.28868) 100%,
    calc((var(--m-h) - 10px) * 0.28868) 100%,
    0 50%);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.04) 0%, transparent 60%),
    var(--nde-lift);
  transition: background 340ms;
}
.nde-menu-item:hover .surface {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.06) 0%, transparent 55%),
    linear-gradient(0deg, rgba(91, 200, 61, 0.22) 0%, transparent 30%),
    var(--nde-lift);
}
.nde-menu-item .content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 30px;
  transition: color 340ms;
}
.nde-menu-item:hover .content { color: var(--nde-t1); }
.nde-menu-item .micon {
  width: 34px; height: 34px; flex-shrink: 0;
  color: var(--nde-accent);
  transition: filter 340ms;
  display: flex; align-items: center; justify-content: center;
}
.nde-menu-item .micon svg { width: 100%; height: 100%; }
.nde-menu-item:hover .micon { filter: drop-shadow(0 0 6px var(--nde-accent)); }
.nde-menu-item .mlabel {
  font-family: var(--nde-mono);
  font-size: 15px;
  letter-spacing: 0.22em;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 200ms 90ms, transform 220ms 90ms;
}
.nde-menu-item:hover .mlabel { opacity: 1; transform: translateX(0); }

/* Blank placeholder menu hexes — decorative, no hover expansion */
.nde-menu-blank { pointer-events: none; opacity: 0.45; }
.nde-menu-blank:hover { width: var(--m-w); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)); }

html { scroll-behavior: smooth; }
.nde-section { scroll-margin-top: 30px; }

/* ============ Category drill-down menu (shop/category pages) ============ */
.nde-catmenu {
  position: relative;
  margin: 26px auto 40px;
  /* JS sets width/height and positions the hexes */
}
.nde-cm-hex {
  --w: 96px;
  --h: calc(var(--w) * 0.8660254);
  position: absolute;
  width: var(--w);
  height: var(--h);
  display: block;
  border: 0; background: transparent; padding: 0;
  color: var(--nde-t2);
  text-decoration: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
  transition: width 300ms cubic-bezier(0.4,0,0.2,1),
              left 300ms cubic-bezier(0.4,0,0.2,1),
              transform 300ms cubic-bezier(0.34,1.56,0.64,1),
              filter 300ms;
}
.nde-cm-hex .frame {
  position: absolute; inset: 0;
  clip-path: polygon(
    calc(var(--h) * 0.28868) 0, calc(100% - var(--h) * 0.28868) 0, 100% 50%,
    calc(100% - var(--h) * 0.28868) 100%, calc(var(--h) * 0.28868) 100%, 0 50%);
  background: linear-gradient(135deg,
    var(--nde-frame-hi) 0%, var(--nde-frame-mid) 32%,
    var(--nde-frame-mid) 68%, var(--nde-frame-lo) 100%);
  transition: background 300ms;
}
.nde-cm-hex .surface {
  position: absolute; inset: 5px;
  clip-path: polygon(
    calc((var(--h) - 10px) * 0.28868) 0, calc(100% - (var(--h) - 10px) * 0.28868) 0, 100% 50%,
    calc(100% - (var(--h) - 10px) * 0.28868) 100%, calc((var(--h) - 10px) * 0.28868) 100%, 0 50%);
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.04) 0%, transparent 60%), var(--nde-lift);
  transition: background 300ms;
}
.nde-cm-hex .content {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  padding: 0 16px;
  transition: color 300ms;
}
.nde-cm-hex svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--nde-accent); }
.nde-cm-hex .lb {
  font-family: var(--nde-mono); font-size: 8.5px; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; line-height: 1.25;
  max-width: 100%;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Expanded state (hover on desktop / .sel on touch-grow / .is-current always) */
.nde-cm-hex.is-open,
.nde-cm-hex.is-current {
  z-index: 5;
  color: var(--nde-t1);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6))
          drop-shadow(0 0 18px var(--nde-accent-glow));
}
.nde-cm-hex.is-open .frame,
.nde-cm-hex.is-current .frame,
.nde-cm-hex.sel .frame {
  background: linear-gradient(135deg,
    var(--nde-frame-hov-hi) 0%, var(--nde-frame-hov-mid) 32%,
    var(--nde-frame-hov-mid) 68%, var(--nde-frame-hov-lo) 100%);
}
.nde-cm-hex.is-open .surface,
.nde-cm-hex.is-current .surface,
.nde-cm-hex.sel .surface {
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.06) 0%, transparent 55%),
              linear-gradient(0deg, rgba(91, 200, 61, 0.22) 0%, transparent 30%), var(--nde-lift);
}
.nde-cm-hex.is-open .content { flex-direction: row; gap: 10px; padding: 0 26px; }
.nde-cm-hex.is-open .lb { font-size: 11px; letter-spacing: 0.14em; text-align: left; }

/* Touch grow */
.nde-cm-hex.sel {
  transform: scale(1.45);
  z-index: 6;
  color: var(--nde-t1);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6))
          drop-shadow(0 0 18px var(--nde-accent-glow));
}

/* Desktop (hover-capable): labels hidden until expanded — the signature look */
@media (hover: hover) and (pointer: fine) {
  .nde-cm-hex:not(.is-current):not(.is-open) .lb { display: none; }
  .nde-cm-hex:not(.is-current):not(.is-open) svg { width: 45px; height: 45px; }
}

/* ============ Product search bar ============ */
.nde-search {
  display: flex;
  justify-content: center;
  margin: 20px auto 8px;
  max-width: 560px;
  padding: 0 16px;
  position: relative;
  z-index: 2;
}
.nde-search input[type="search"] {
  flex: 1;
  min-width: 0;
  background: var(--nde-lift);
  border: 1px solid var(--nde-rule);
  border-right: none;
  color: var(--nde-t1);
  font-family: var(--nde-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  border-radius: 3px 0 0 3px;
  outline: none;
}
.nde-search input[type="search"]::placeholder { color: var(--nde-t2); }
.nde-search input[type="search"]:focus { border-color: var(--nde-accent); }
.nde-search button {
  background: var(--nde-accent);
  border: 1px solid var(--nde-accent);
  color: #04120b;
  width: 48px;
  cursor: pointer;
  border-radius: 0 3px 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nde-search button svg { width: 18px; height: 18px; }
.nde-search button:hover { filter: brightness(1.12); }

.nde-shop-heading {
  text-align: center;
  font-family: var(--nde-mono);
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--nde-accent);
  text-transform: uppercase;
  margin: 20px 0 4px;
}
.nde-shop-sub {
  text-align: center;
  font-family: var(--nde-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--nde-t2);
  margin-bottom: 8px;
}

/* ============ Divider ============ */
.nde-divider {
  display: flex;
  align-items: center;
  height: 90px;
  margin: 10px 0 40px;
}
.nde-divider .chev { flex: 0 0 auto; width: 30px; height: 90px; }
.nde-divider .chev polyline { fill: none; stroke: var(--nde-rule); stroke-width: 2; }
.nde-divider .mid { flex: 1 1 auto; position: relative; height: 2px; background: var(--nde-rule); }

/* Hex-outlined divider label: outer span = 2px rule-coloured hex, inner span
   = ground-coloured hex → thin-line hex around the label. 120° rule: caps =
   height × 0.28868 (~40px tall → ~11.5px). */
.nde-divider .divhex {
  --dl-h: 40px;
  --dl-cap: calc(var(--dl-h) * 0.28868);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  height: var(--dl-h);
  padding: 2px;
  clip-path: polygon(
    var(--dl-cap) 0, calc(100% - var(--dl-cap)) 0, 100% 50%,
    calc(100% - var(--dl-cap)) 100%, var(--dl-cap) 100%, 0 50%);
  background: var(--nde-rule);
}
.nde-divider .divlabel {
  --dl-cap2: calc((var(--dl-h) - 4px) * 0.28868);
  display: flex;
  align-items: center;
  clip-path: polygon(
    var(--dl-cap2) 0, calc(100% - var(--dl-cap2)) 0, 100% 50%,
    calc(100% - var(--dl-cap2)) 100%, var(--dl-cap2) 100%, 0 50%);
  background: var(--nde-ground);
  padding: 0 34px;
  font-family: var(--nde-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--nde-accent);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============ Product honeycomb ============ */
.nde-products { text-align: center; }
.nde-products .sub {
  font-family: var(--nde-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--nde-t2);
  margin-bottom: 46px;
  text-transform: uppercase;
}
.nde-honeycomb {
  position: relative;
  margin: 0 auto;
  text-align: left;
  /* width/height set by JS per column count */
}

/* ---- The locked product tile ---- */
.ndehex-tile {
  --tile-w: 230px;
  --tile-h: calc(var(--tile-w) * 0.8660254);
  --badge-bg: #22322c;
  --badge-text: #e0f0ec;
  position: absolute;
  width: var(--tile-w);
  height: var(--tile-h);
  display: block;
  text-decoration: none;
  color: inherit;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
  transition: filter 300ms ease;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}
.ndehex-tile:hover {
  z-index: 2;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6))
          drop-shadow(0 0 22px var(--nde-accent-glow));
}
.ndehex-wrap {
  position: absolute; inset: 0;
  display: block;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ndehex-tile:hover .ndehex-wrap { transform: scale(1.05); }
.ndehex-frame {
  position: absolute; inset: 0;
  display: block;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: linear-gradient(135deg,
    var(--nde-frame-hi) 0%, var(--nde-frame-mid) 32%,
    var(--nde-frame-mid) 68%, var(--nde-frame-lo) 100%);
  transition: background 300ms;
}
.ndehex-tile:hover .ndehex-frame {
  background: linear-gradient(135deg,
    var(--nde-frame-hov-hi) 0%, var(--nde-frame-hov-mid) 32%,
    var(--nde-frame-hov-mid) 68%, var(--nde-frame-hov-lo) 100%);
}
.ndehex-inner {
  /* Uniform 5px border via inner-scale (locked formula):
     scale = 1 - border / apothem, apothem = H/2 */
  --apothem: calc(var(--tile-h) / 2);
  --iscale: calc(1 - 5px / var(--apothem));
  position: absolute;
  display: block;
  left:   calc((var(--tile-w) - var(--tile-w) * var(--iscale)) / 2);
  top:    calc((var(--tile-h) - var(--tile-h) * var(--iscale)) / 2);
  width:  calc(var(--tile-w) * var(--iscale));
  height: calc(var(--tile-h) * var(--iscale));
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #ffffff;
  overflow: hidden;
}
.ndehex-photo {
  position: absolute;
  left: 8%; top: 11%;
  width: 84%; height: 82%;
  object-fit: contain;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ndehex-tile:hover .ndehex-photo { transform: scale(1.05); }
.ndehex-watermark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52%;
  opacity: 0.20;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.ndehex-title {
  position: absolute;
  top: 4.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  text-align: center;
  font-weight: 800;
  font-size: calc(var(--tile-w) * 0.062);
  line-height: 1.12;
  color: var(--nde-accent);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ndehex-chip {
  position: absolute;
  top: 8%;
  right: 15%;
  font-family: var(--nde-mono);
  font-size: calc(var(--tile-w) * 0.038);
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: calc(var(--tile-w) * 0.012) calc(var(--tile-w) * 0.032);
  border-radius: 2px;
  text-transform: uppercase;
  pointer-events: none;
}
.ndehex-chip.new   { background: rgba(91, 200, 61, 0.16);  color: #3da527; }
.ndehex-chip.promo { background: rgba(255, 170, 40, 0.18); color: #c77f10; }
.ndehex-chip.sale  { background: rgba(224, 62, 62, 0.15);  color: #c23434; }

.ndehex-band {
  --band-h: calc(var(--tile-w) * 0.093);
  --band-inward: 3px;
  position: absolute;
  left: calc(87.5% - var(--band-h) * 0.60 - var(--band-inward) * 0.866);
  top:  calc(75%   - var(--band-h) * 0.35 - var(--band-inward) * 0.5);
  width: 66%;
  height: var(--band-h);
  transform: translate(-50%, -50%) rotate(-60deg);
  background: var(--badge-bg);
  color: var(--badge-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: calc(var(--tile-w) * 0.055);
  line-height: 1;
  padding-top: calc(var(--tile-w) * 0.006);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============ Responsive ============ */
@media (max-width: 760px) {
  .nde-front { padding: 16px 12px 60px; }
  .nde-hero { --hero-h: 220px; margin: 0 40px; }
  .nde-util { --u-w: 76px; }
  .nde-util-contact { top: calc(76px * 0.8660254 + 40px); }
  .nde-deco-hex { display: none; }
  .nde-menu-item { --m-w: 72px; --m-open: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
}