:root{
  --bg:#0b1020;           /* page background */
  --hex:#0e1424;          /* hex tile background (black looking) */
  --hex-border:#1b2336;   /* tile border */
  --text:#e5e7eb;         /* light text */
  --muted:#9ca3af;        /* muted */
  --accent:#22d3ee;       /* cyan accent */
  --card-size: 320px;     /* desktop base */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif}
header{padding:18px 22px;border-bottom:1px solid #141a2a;background:linear-gradient(180deg,rgba(11,16,32,.95),rgba(11,16,32,.85));position:sticky;top:0;backdrop-filter: blur(6px);z-index:10}
h1{margin:0;font-size:18px}
.sub{font-size:12px;color:var(--muted)}
.wrapper{max-width:1200px;margin:0 auto;padding:24px}

/* Hive grid */
.hive{display:grid;grid-template-columns:repeat(5, var(--card-size));gap:16px;justify-content:center}
@media (max-width: 1180px){ .hive{grid-template-columns:repeat(4, var(--card-size));} }
@media (max-width: 980px){ .hive{grid-template-columns:repeat(3, var(--card-size)); --card-size: 300px;} }
@media (max-width: 760px){ .hive{grid-template-columns:repeat(2, var(--card-size)); --card-size: 260px;} }
@media (max-width: 520px){ .hive{grid-template-columns:repeat(2, var(--card-size)); --card-size: 230px;} }

/* Row offset for honeycomb using nth-child ranges */
.hex{width:var(--card-size); aspect-ratio: 1 / 1.1547; position:relative}
.hex:nth-child(10n + 6),
.hex:nth-child(10n + 7),
.hex:nth-child(10n + 8),
.hex:nth-child(10n + 9),
.hex:nth-child(10n + 10){ transform: translateY(calc(var(--card-size) * -0.1443)); }

/* Ice-Cube BLACK tile */
.spool-card{position:absolute;inset:0;clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);}
.spool-card-bg{position:absolute;inset:0;border-radius:12px;background:var(--hex);border:1px solid var(--hex-border);box-shadow: 0 2px 18px rgba(0,0,0,.45), 0 18px 36px rgba(0,0,0,.35);}
.spool-card-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.spool-canvas{width:86%;height:auto;display:block;filter: drop-shadow(0 2px 1px rgba(0,0,0,.6));}
.info{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 12px;border-radius:14px;background: rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);backdrop-filter: blur(6px); text-align:center}
.info .weight{font-weight:800;font-size:clamp(18px,3vw,26px);letter-spacing:.2px}
.info .material{font-size:13px;color:var(--muted)}

/* Hover / focus */
.spool-card:hover .spool-card-bg,
.spool-card:focus-within .spool-card-bg{ box-shadow: 0 6px 26px rgba(0,0,0,.55),0 24px 48px rgba(0,0,0,.45); border-color:#26314a }

/* Modal */
.dialog{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45)}
.dialog.open{display:flex}
.modal{width:min(520px,90vw);background:#0d1424;border:1px solid #1b2336;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.modal-header{padding:16px 18px;border-bottom:1px solid #1b2336}
.modal-title{margin:0;font-size:18px}
.modal-body{padding:14px 18px;color:var(--muted)}
.modal-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:12px 18px;border-top:1px solid #1b2336}
button{appearance:none;border:1px solid #334155;background:#0f172a;color:#e5e7eb;border-radius:10px;padding:8px 10px;cursor:pointer}
button.primary{background:#22d3ee;color:#09121e;border-color:#06b6d4}
.qty{min-width:80px;text-align:center;font-weight:700}

/* Details link style */
.details-link{color:#22d3ee;text-decoration:none}