/* Buy Qty input font size (desktop + shared) */
.buy-qty-input {
  font-size: 14px !important;
}
/* ===== Fastener Tool (scoped) ===== */

:root { --icon-pill-size: 90px; }
:root { --thread-pill-size: 100px; }

/* === Empty-state helpers for initial load and cleared selections === */
/* Reserve space so the page doesn't look broken before selections */
.fastener-details-panel,
.fastener-order-panel {
  min-height: 600px;
}

/* Centered placeholder text used when panels are empty */
.panel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #777;
  font-size: 18px;
  font-weight: 600;
  height: 100%;
  padding: 24px;
}

/* Top-row facet containers */
.fastener-top-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}

.fastener-bottom-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fastener-details-panel { flex: 1 1 40%; min-width: 300px; }
.fastener-order-panel   { flex: 1 1 60%; min-width: 360px; }

.muted { color: #666; }

.fastener-facet-box {
  display: flex;
  flex-direction: column;
  min-height: 220px;               /* show ~4 rows of pills before scroll */
  height: 260px;               /* adjust later if needed */
  overflow: hidden;                /* hide header overflow */
}

.fastener-facet-box .facet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--color-border-boxes-default, #c6c6c6);
  justify-content: center;
}

.facet-header .facet-icon.placeholder {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #eee;                /* placeholder block (replace with icons later) */
  flex: 0 0 auto;
}

.facet-header .facet-title {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: var(--color-text-error-highlight);
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: bold;
}

/* Pill grid area */
.fastener-facet-box .facet-pills {
  padding: 10px 10px 12px;
  overflow: auto;                  /* scroll only the pills area */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 per row */
  gap: 8px;
}

/* Pills – mirror test.html look & feel */
.fastener-facet-box .pill,
.fastener-order-panel .pill {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}


/* Facet pills (Thread/Size & Material): active = blue, overrides hover */
.fastener-facet-box .pill.active,
.fastener-facet-box .pill.active:hover,
.fastener-facet-box .pill.active:focus {
  background: #004C93;
  color: #fff;
  border-color: #004C93;
}

/* Order panel pills keep existing green active */
.fastener-order-panel .pill.active {
  background: #0b5;
  color: #fff;
  border-color: #0b5;
}

.fastener-facet-box .pill:hover {
  background: #EDE7DE;
  border-color: #BFB8B0;
}

.fastener-facet-box .pill[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Bottom row panels */
.fastener-details-panel .panel-title,
.fastener-order-panel .panel-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 5px;
}

/* ===== Gallery: Simple 4×4 equal-tile grid (match T‑Nut) ===== */
.fastener-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

/* Each tile is a square; use aspect-ratio for consistency */
.fastener-gallery .tile,
.fastener-hero,                 /* treat hero like a regular tile */
.fastener-thumbs a {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;          /* perfect square cells */
  border: 1px solid var(--color-border-pills-boxes-tableborders, #eee);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  display: block;
}

/* Remove hero spanning: first image becomes first cell */
.fastener-hero { grid-column: auto; grid-row: auto; }

/* Use the same rules for all images/anchors inside the grid */
.fastener-gallery a,
.fastener-gallery img {
  display: block;
  width: 100%;
  height: 100%;
}
.fastener-gallery img { object-fit: contain; background: #fff; }

/* Thumbs wrapper contributes its children directly to the grid */
.fastener-thumbs { display: contents; }

/* Mobile: keep 3 columns like T‑Nut */
@media (max-width: 768px) {
  .fastener-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Order header hint */
.fastener-order-header .muted {
  color: #666;
  font-size: 13px;
  padding: 6px 0 8px;
}

/* Sticky summary placeholder */
.fastener-summary.sticky {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eee;
  margin-top: 12px;
  padding: 10px 12px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .fastener-top-row {
    display: block !important;   /* stack facet boxes on mobile for now */
  }
  .fastener-facet-box {
    max-height: none;
    margin-bottom: 10px;
  }
  .fastener-facet-box .facet-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 per row on mobile */
  }
}

/* ===== Icon Pills (Category & Head facets) ===== */
.fastener-facet-box .icon-pill {
  display: flex;
  flex-direction: column;              /* stack icon above label */
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;                       /* a bit larger than text-only pills */
  border: 1px solid #ddd;
  border-radius: 8px;                  /* soft rectangle */
  background: #fff;
  cursor: pointer;
  text-align: center;
  min-height: 80px;                    /* consistent card height */
  color: #333;                         /* make SVG inherit via currentColor */
}

.fastener-facet-box .icon-pill .icon {
  width: 24px;
  height: 24px;
  line-height: 0;                      /* remove inline gap */
}


.fastener-facet-box .icon-pill .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: none !important;
}

.fastener-facet-box .icon-pill .label {
  font-size: 12px;
  line-height: 1.1;
  white-space: normal;                 /* allow wrap for longer labels */
}

/* Active state mirrors green selection theme */
.fastener-facet-box .icon-pill.active,
.fastener-facet-box .icon-pill.active:hover,
.fastener-facet-box .icon-pill.active:focus {
  background: #004C93;
  color: #fff;
  border-color: #004C93;
}

/* Hover focus states for better affordance */
.fastener-facet-box .icon-pill:hover { background:#EDE7DE; border-color: #BFB8B0; }
.fastener-facet-box .icon-pill:focus { outline: 2px solid #004C93; outline-offset: 2px; }

/* Compact tweak on mobile: reduce min-height a bit */
@media (max-width: 768px) {
  .fastener-facet-box .icon-pill { min-height: 70px; }
}

/* ===== Asymmetric top-row layout & facet-specific grids ===== */
/* Material: narrow, single column */
.fastener-top-row .fastener-facet-box.is-material {
  flex: 0 0 220px;   /* desktop target width */
  min-width: 180px;
}
.fastener-top-row .fastener-facet-box.is-material .facet-pills {
  grid-template-columns: 1fr; /* one pill per row, stacked */
}

/* Category / Head / Thread: wider columns */
.fastener-top-row .fastener-facet-box.is-category,
.fastener-top-row .fastener-facet-box.is-head,
.fastener-top-row .fastener-facet-box.is-thread {
  flex: 1 1 0;
}
.fastener-top-row .fastener-facet-box.is-category .facet-pills,
.fastener-top-row .fastener-facet-box.is-head .facet-pills {
  grid-template-columns: repeat(auto-fill, var(--icon-pill-size));
  justify-content: start;
  gap: 6px;
}

.fastener-top-row .fastener-facet-box.is-thread {
  flex: 0 0 24%;
  min-width: 260px; /* ensures 3 smaller pills fit without wrap */
}
.fastener-top-row .fastener-facet-box.is-thread .facet-pills {
  grid-template-columns: repeat(3, var(--thread-pill-size));
  gap: 6px;
}

.fastener-top-row .fastener-facet-box.is-category .icon-pill,
.fastener-top-row .fastener-facet-box.is-head .icon-pill {
  width: var(--icon-pill-size);
  height: var(--icon-pill-size);
  padding: 8px;
  gap: 6px;
}

.fastener-top-row .fastener-facet-box.is-category .icon-pill .icon,
.fastener-top-row .fastener-facet-box.is-head .icon-pill .icon {
  width: 42px;
  height: 42px;
}

.fastener-top-row .fastener-facet-box.is-category .icon-pill .label,
.fastener-top-row .fastener-facet-box.is-head .icon-pill .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure icon pills are strictly box-sized squares (so 90px includes borders/padding) */
.fastener-facet-box .icon-pill { box-sizing: border-box; }

/* Tablet: relax to 3 across for Category and Head facets (squares) */
@media (max-width: 1024px) {
  /* auto-fit already adapts; no fixed column override needed */
}

/* Mobile already stacks facet boxes; keep Material single-column */
@media (max-width: 768px) {
  .fastener-top-row .fastener-facet-box.is-material { flex: 1 1 auto; min-width: 0; }
  .fastener-top-row .fastener-facet-box.is-material .facet-pills { grid-template-columns: 1fr; }
}



/* ===== Fastener Order Table – Scoped overrides to beat main.css ===== */
.fastener-order-panel .order-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 12px;
  font-size: 13px;
}

.fastener-order-panel .order-table th,
.fastener-order-panel .order-table td {
  font-size: 14px;           /* override main.css 16px */
  color: #222;               /* ensure consistent text color */
  border: 1px solid var(--color-border-pills-boxes-tableborders);
  padding: 8px 10px;
}

.fastener-order-panel .order-table thead th {
  background: #0c3a73;     /* match T‑Nut header */
  color: #fff;             /* white text like T‑Nut */
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid var(--color-border-pills-boxes-tableborders);
}

.fastener-order-panel .order-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.fastener-order-panel .order-table tbody tr:hover {
  background: #f3f7fc;
}

.fastener-order-panel .order-table .add-btn {
  padding: 4px 8px;
  background: #004C93;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.fastener-order-panel .order-table .add-btn:hover {
  background: #0363c4;
}

/* If main.css sets center alignment globally, restore intended alignment */
.fastener-order-panel .order-table th,
.fastener-order-panel .order-table td { text-align: left; }

/* Fastener table: 6-column layout
   1: Size | 2: Price / Pc | 3: Buy Qty | 4: Price Applied | 5: Cost | 6: Add */
.fastener-order-panel .order-table th:nth-child(1),
.fastener-order-panel .order-table td:nth-child(1) { width: 16%; text-align: center; }  /* Size */
.fastener-order-panel .order-table th:nth-child(2),
.fastener-order-panel .order-table td:nth-child(2) { width: 22%; text-align: center; }  /* Price / Pc */
.fastener-order-panel .order-table th:nth-child(3),
.fastener-order-panel .order-table td:nth-child(3) { width: 14%; text-align: center; }  /* Buy Qty */
.fastener-order-panel .order-table th:nth-child(4),
.fastener-order-panel .order-table td:nth-child(4) { width: 16%; text-align: center; }  /* Price Applied */
.fastener-order-panel .order-table th:nth-child(5),
.fastener-order-panel .order-table td:nth-child(5) { width: 16%; text-align: right; }   /* Cost */
.fastener-order-panel .order-table th:nth-child(6),
.fastener-order-panel .order-table td:nth-child(6) { width: 16%; text-align: left; }    /* Add */
/* ===== Facet Guidance: focus ring, pulse, and disabled gating (scoped) ===== */
.fastener .pill:focus,
.fastener .icon-pill:focus {
  outline: 2px solid #004C93;
  outline-offset: 2px;
}

/* Soft pulse to draw attention to the next facet */
.fastener .nudge { animation: fastener-nudge 1.2s ease; }
@keyframes fastener-nudge {
  0%   { box-shadow: 0 0 0 0 rgba(12,123,255,0.0); }
  20%  { box-shadow: 0 0 0 4px rgba(12,123,255,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(12,123,255,0.0); }
}

/* Dim and disable interaction on gated facets */
.fastener .fastener-facet-box.disabled { opacity: 0.45; }
.fastener .fastener-facet-box.disabled .facet-pills { pointer-events: none; }

/* Optional: reinforce non-interactive cursor inside disabled boxes */
.fastener .fastener-facet-box.disabled .pill,
.fastener .fastener-facet-box.disabled .icon-pill { cursor: not-allowed; }

/* === Fastener order section: stack table then summary (no sticky) === */
.fastener-order-section { display: flex; flex-direction: column; width: 100%; }
.fastener-order-table-wrap { flex: 0 0 auto; }
.fastener-summary-wrap { flex: 0 0 auto; margin-top: 16px; }

/* Optional: summary visual polish */
.fastener-summary { background:#fff; border:1px solid var(--color-border-pills-boxes-tableborders); border-radius:6px; padding:10px 12px; }

/* ===== All-pill + hint styling (e.g. Nut “All Sizes”) ===== */
.fastener-facet-box .all-pill {
  font-weight: 600;
  background: #fafafa;
  border: 1px dashed #ccc;
  color: #444;
}
.fastener-facet-box .all-pill.active {
  background: #004C93;
  color: #fff;
  border-color: #004C93;
}
.fastener-facet-box .facet-hint {
  grid-column: 1 / -1;           /* span full row */
  font-size: 12px;
  color: #777;
  font-style: italic;
  margin: 4px 0 6px;            /* better rhythm */
  text-align: left;
}

.fastener-facet-box .facet-pills { align-items: start; }


/* ===== Ordering Header (Full-Width Pill Banner Style) ===== */
.order-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 17px;
  font-weight: 600;
  color: #222;
  background: #fdfdfd;
  border: 2px solid var(--color-border-pills-boxes-tableborders);
  border-radius: 3px;
  padding: 10px 18px;
  margin: 12px 0 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.order-crumbs-label {
  color: #004C93;
  font-weight: 700;
  margin-right: 6px;
}

.order-crumbs-sep {
  color: #999;
  margin: 0 6px;
}

.order-crumb {
  color: #333;
  font-weight: 600;
}

/*
 * Note:
 * The scrollbar-gutter + overflow-y: scroll combo below already stabilizes layout
 * when GLightbox opens/closes. Modern browsers now respect this properly,
 * so no extra overflow hacks or JS fixes are required.
 * If scroll reflow ever reappears, confirm browser still honors scrollbar-gutter.
 */

@media (min-width: 769px) {
  html { overflow-y: scroll; } /* always reserve scrollbar space on desktop */
}

/* ===== Toast Notifications ===== */
.toast-root {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none; /* avoid blocking UI clicks */
}

.toast {
  background: #004C93;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(-10px);
  animation: toast-in 0.3s forwards, toast-out 0.3s 3s forwards; /* visible for ~3s */
}

.toast strong {
  font-weight: 700;
}

.toast a {
  color: #ffdc73;
  font-weight: 600;
  text-decoration: underline;
  margin-left: 6px;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
/* ===== Order crumbs – attention pulse (crumbs only, ~5s) ===== */
.fastener .order-crumbs.crumb-nudge {
  animation: crumbBlink 1s ease-in-out 5; /* ~5s total */
}

@keyframes crumbBlink {
  0%   { box-shadow: 0 0 0 0 rgba(12,123,255, 0.00); }
  20%  { box-shadow: 0 0 0 4px rgba(12,123,255, 0.30); }
  60%  { box-shadow: 0 0 0 0 rgba(12,123,255, 0.00); }
  100% { box-shadow: 0 0 0 0 rgba(12,123,255, 0.00); }
}

/* Respect reduced motion: single gentle highlight instead of 5 pulses */
@media (prefers-reduced-motion: reduce) {
  .fastener .order-crumbs.crumb-nudge {
    animation: crumbBlink 1s ease-in-out 1;
  }
}
/* ===== Fastener Order Table – Tier price cell ===== */
.tier-price {
  font-size: 12px;
}