/* v2/modules/fasteners/fastener.css
   Layout scaffold for the V2 Fastener module.
   Handles both the facet-selection screen and the order screen.
   Detailed visuals and facet/table styling will be added later.
*/


/* =========================
   Facet-selection screen
   ========================= */

/* Wrapper for the filters/facets screen */
.v2-tool--fasteners .v2-fasteners__screen--filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Actions beneath facets (e.g. Show Order Table) */
.v2-tool--fasteners .v2-fasteners__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Filters-screen CTA sizing/alignment (scoped; avoid global .v2-btn overrides) */
.v2-tool--fasteners .v2-fasteners__actions .v2-btn {
  width: 100%;
  align-self: flex-start;
}

@media (min-width: 992px) {
  .v2-tool--fasteners .v2-fasteners__actions .v2-btn {
    width: auto;
  }
}

/* Back button (mobile): full-width like Extrusions */
.v2-tool--fasteners .v2-fasteners__back .v2-btn {
  width: 100%;
}

/* =========================
   Order screen
   ========================= */

/* Description: prevent rich HTML from breaking the card/layout
   NOTE: FastenerTool injects Ecwid HTML into .v2-fasteners__description-body */
.v2-tool--fasteners .v2-fasteners__description-body {
  overflow: hidden;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Common rich content elements should never overflow their container */
.v2-tool--fasteners .v2-fasteners__description-body img {
  max-width: 100%;
  height: auto;
}

.v2-tool--fasteners .v2-fasteners__description-body iframe {
  max-width: 100%;
}

.v2-tool--fasteners .v2-fasteners__description-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.v2-tool--fasteners .v2-fasteners__description-body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* =========================
   Desktop layout scaffolding
   ========================= */

@media (min-width: 992px) {

  /* Hide mobile-only elements on desktop */
  .v2-tool--fasteners .v2-fasteners__back {
    display: none;
  }

  /* Facet row at top (desktop) */
  .v2-tool--fasteners .v2-fasteners__facet-row--desktop {
    display: grid;
    grid-template-columns: 1fr 1fr 0.9fr 0.5fr; /* last one slightly smaller */
    gap: 16px;
    align-items: stretch;
  }

  /* Allow grid children to shrink; prevents pill tracks from forcing column expansion */
  .v2-tool--fasteners .v2-fasteners__facet-row--desktop .v2-facet {
    min-width: 0;
    min-height: 240px;
  }

  /* Desktop: wrap pills instead of horizontal scroll */
  .v2-tool--fasteners .v2-fasteners__facet-row--desktop .v2-facet__pills,
  .v2-tool--fasteners .v2-fasteners__facet-row--desktop .v2-fasteners__facet-pills {
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
  }

  /* Icon-pill facets: dense wrapping grid (matches fastener icon pill size) */
  .v2-tool--fasteners .v2-fasteners__facet-row--desktop [data-facet="category"],
  .v2-tool--fasteners .v2-fasteners__facet-row--desktop [data-facet="head-type"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, 90px);
    justify-content: start;
    gap: 8px;
    align-content: start;
  }

  /* Text-pill facets: wrap into rows */
  .v2-tool--fasteners .v2-fasteners__facet-row--desktop [data-facet="thread"],
  .v2-tool--fasteners .v2-fasteners__facet-row--desktop [data-facet="material"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
  }

  /* Remove default card spacing behaviour inside facet row */
  .v2-tool--fasteners .v2-fasteners__facet-row--desktop .v2-facet {
    margin: 0;
  }

  /* Bottom desktop layout: 40 / 60 split */
  .v2-tool--fasteners .v2-fasteners__desktop-layout--desktop {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 20px;
    align-items: start;
  }

  /* Left column stack (media + description) */
  .v2-tool--fasteners .v2-fasteners__desktop-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Right column stack */
  .v2-tool--fasteners .v2-fasteners__desktop-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

/* Wrapper for the order screen layout */
.v2-tool--fasteners .v2-fasteners__screen--order {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* Slightly adjust placeholder appearance within Fasteners module */
.v2-tool--fasteners .v2-tool__placeholder {
  font-size: 13px;
  color: #555;
}

/* Empty facet state: keep facets from looking broken when upstream selections are missing */
.v2-tool--fasteners .v2-fasteners__facet-pills .v2-tool__placeholder,
.v2-tool--fasteners .v2-facet__pills .v2-tool__placeholder {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 8px;
  text-align: center;
  font-style: italic;
  color: #777;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.02);
  box-sizing: border-box;

  /* If the pills container is a grid (icon facets), span all columns */
  grid-column: 1 / -1;
  justify-self: stretch;
}

/* =========================
   Fastener Summary (layout glue only)
   Uses global .v2-table/.v2-totals-table for visuals.
   ========================= */

.v2-tool--fasteners .v2-fasteners__summary-body {
  display: flex;
  flex-direction: column;
  gap: 12px; /* spacing between totals table and CTA */
}

/* Keep totals table flush with the card rhythm; visuals handled globally */
.v2-tool--fasteners .v2-fasteners__totals-table {
  margin-top: 12px;
  margin-bottom: 16px;
}

/* CTA spacing below the summary table */
.v2-tool--fasteners .v2-fasteners__summary-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mobile: prevent accidental horizontal overflow if headings are long */
@media (max-width: 768px) {
  .v2-tool--fasteners .v2-fasteners__summary-body {
    gap: 10px;
    overflow-x: auto;
  }

  /* Hide the Tier column in the order table on mobile */
  .v2-tool--fasteners .v2-fasteners__col-tier {
    display: none;
  }
  /* Hide the Cost column in the order table on mobile */
  .v2-tool--fasteners .v2-fasteners__col-cost {
    display: none;
  }

  /* ===== Mobile table sizing (A + B)
     A) Cap Buy Qty input so it can't steal the whole row
     B) Give the Qty column a sane width budget
  */

  /* Slightly tighter cells on mobile so all columns breathe */
  .v2-tool--fasteners .v2-fasteners__order-table th,
  .v2-tool--fasteners .v2-fasteners__order-table td {
    padding: 8px 8px;
  }

  /* B) Column width budget (4 columns on mobile: Size, Qty, Price Applied, Add) */
  .v2-tool--fasteners .v2-fasteners__col-size  { width: 28%; }
  .v2-tool--fasteners .v2-fasteners__col-qty   { width: 24%; }
  .v2-tool--fasteners .v2-fasteners__col-price { width: 24%; }
  .v2-tool--fasteners .v2-fasteners__col-add   { width: 24%; }

  /* A) Cap the Buy Qty input (prevents it from dominating width) */
  .v2-tool--fasteners .v2-fasteners__col-qty .buy-qty-input {
    width: 100%;
    max-width: 78px;
    min-width: 0;
    padding: 8px 10px;
    box-sizing: border-box;
  }

  /* Keep the Add button compact on mobile */
  .v2-tool--fasteners .v2-fasteners__col-add .v2-btn {
    width: 100%;
    max-width: 92px;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* =========================
   Order table row highlight (match T-Nut behaviour)
   ========================= */

/* Hover highlight */
.v2-tool--fasteners .v2-fasteners__order-table tbody tr:hover > * {
  background: rgba(0, 0, 0, 0.03);
}

/* Keep the row highlighted while the user is editing Qty (or interacting with any control in the row) */
.v2-tool--fasteners .v2-fasteners__order-table tbody tr:focus-within > * {
  background: rgba(0, 0, 0, 0.03);
}

/* =========================
   Fastener Order Table – column widths (desktop only)
   Layout control only; visuals handled by global table styles
   ========================= */

@media (min-width: 992px) {
  .v2-tool--fasteners .v2-fasteners__order-table {
    width: 100%;
    table-layout: fixed; /* prevent content-driven column resizing */
  }

  .v2-tool--fasteners .v2-fasteners__order-table th,
  .v2-tool--fasteners .v2-fasteners__order-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    text-align: center;
  }

  /* Column width control */
  .v2-tool--fasteners .v2-fasteners__col-size  { width: 14%; }
  .v2-tool--fasteners .v2-fasteners__col-tier  { width: 22%; } /* tier ranges */
  .v2-tool--fasteners .v2-fasteners__col-qty   { width: 14%; }
  .v2-tool--fasteners .v2-fasteners__col-price { width: 12%; } /* applied price */
  .v2-tool--fasteners .v2-fasteners__col-cost  { width: 14%; }
  .v2-tool--fasteners .v2-fasteners__col-add   { width: 18%; }

  /* Qty input should not stretch the column */
  .v2-tool--fasteners .v2-fasteners__col-qty .buy-qty-input {
    width: 100%;
    max-width: 90px;
  }

  /* Add-to-cart button sizing */
  .v2-tool--fasteners .v2-fasteners__col-add .v2-btn {
    width: 100%;
    max-width: 110px;
    white-space: nowrap;
  }

  /* Allow tier pricing text to wrap inside fixed cell */
  .v2-tool--fasteners .v2-fasteners__col-tier .tier-price {
    white-space: normal;
    line-height: 1.2;
  }
}
/* =========================
   Ghost / placeholder media (Fasteners)
   ========================= */

/* Ensure ghost media uses the same grid as real product media */
.v2-tool--fasteners .v2-media-grid.is-ghost {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Dim and disable ghost images */
.v2-tool--fasteners .v2-media-grid.is-ghost img {
  opacity: 0.45;
  filter: grayscale(100%);
  pointer-events: none;
}

/* Prevent clicks on ghost carousel/media */
.v2-tool--fasteners .v2-media-grid.is-ghost,
.v2-tool--fasteners .v2-carousel.is-ghost {
  pointer-events: none;
}

/* =========================
   Media visibility control
   Ensure ONLY one media layout is visible at a time
   ========================= */

/* Mobile: show carousel, hide desktop grid */
@media (max-width: 768px) {
  .v2-tool--fasteners .v2-fasteners__media .v2-media-grid {
    display: none !important;
  }
  .v2-tool--fasteners .v2-fasteners__media .v2-carousel {
    display: block !important;
  }
}

/* Desktop: show grid, hide carousel */
@media (min-width: 769px) {
  .v2-tool--fasteners .v2-fasteners__media .v2-media-grid {
    display: grid !important;
  }
  .v2-tool--fasteners .v2-fasteners__media .v2-carousel {
    display: none !important;
  }
}