/* Product listing + detail — extends main.css. */

/* ─── LISTING (category + index) ─────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

/* (Reusing .product-card from home.css — same component) */

.cat-intro {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.cat-intro__lede {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

.cat-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--ink-soft);
}

/* ─── COMPACT OD-GROUPED LAYOUT ─────────────────────────────── */

/* Tubes: rows grouped by OD */
.od-table {
  border-top: 0.5px solid var(--navy);
}
.od-group {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  border-bottom: 0.5px solid var(--rule);
  padding: 0.35rem 0;
  gap: 0.75rem;
}
.od-group__label {
  flex: 0 0 5.5rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
}
.od-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.od-group__cell {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 0.5px solid var(--navy);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.od-group__cell:hover {
  background: var(--navy);
  color: var(--paper);
}
.od-group__id {
  margin-left: 0.55rem;
  padding-left: 0.55rem;
  border-left: 0.5px solid currentColor;
  opacity: 0.65;
}
/* Quote-first SKUs (10″+ tubes): small tag so buyers aren't surprised on the PDP */
.od-group__tag {
  margin-left: 0.55rem;
  padding: 0.05rem 0.35rem;
  border: 0.5px solid var(--brass-deep);
  border-radius: 2px;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.od-group__cell:hover .od-group__tag {
  border-color: var(--paper);
  color: var(--paper);
}

/* Muted applications line under the PLP lede */
.page-head__apps {
  font-size: 0.85rem;
  color: var(--ink-soft);
  opacity: 0.7;
  margin: 0.5rem 0 0;
}

/* ── Category hero photograph (tubes/rods PLP) ──────────────────── */
/* Same archival register as the homepage Plate 01 panel: a bordered plate on
   deep paper, mono plate number in the corner. The panel spans the content
   column; the photograph inside it does NOT — the source frames are ~310px
   wide, so they are shown at (just under) native size and centred rather than
   stretched, which keeps them crisp on 2x screens and keeps the OD listing
   near the top of the fold. If the mill ever shoots wide plates for these,
   raise --plp-hero-w and add a srcset. */
.plp-hero {
  --plp-hero-w: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--paper-deep);
  border: 0.5px solid var(--navy);
  padding: 1.25rem;
  margin-bottom: 1.8rem;
}
.plp-hero picture { display: block; }
.plp-hero__photo {
  display: block;
  width: auto;
  max-width: min(var(--plp-hero-w), 100%);
  max-height: 300px;
  height: auto;
  object-fit: contain;
}
.plp-hero__label {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(30, 42, 61, 0.6);
}

/* Mobile: keep the plate present but short, so the customer reaches the actual
   size list without a long scroll. */
@media (max-width: 600px) {
  .plp-hero { --plp-hero-w: 190px; padding: 1rem; }
  .plp-hero__photo { max-height: 200px; }
}

/* ── "Fits shaft" ID filter (tubes PLP) ─────────────────────────── */
.id-filter {
  border: 0.5px solid var(--navy);
  background: var(--paper-warm);
  padding: 1rem 1.2rem;
  margin-bottom: 1.8rem;
}
.id-filter__title { margin-bottom: 0.6rem; }
.id-filter__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.id-filter__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
}
.id-filter__input {
  width: 7rem;
  padding: 0.45rem 0.6rem;
  border: 0.5px solid var(--navy);
  border-radius: 2px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.85rem;
  text-align: center;
}
.id-filter__unit { font-family: var(--mono); opacity: 0.7; }
.id-filter__submit { padding: 0.45rem 1rem; }
.id-filter__clear {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-deep);
  border-bottom: 0.5px solid var(--brass-deep);
}
.id-filter__help {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  color: rgba(15, 22, 32, 0.6);
}

/* Rods: flat pill grid */
.od-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.od-grid__cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  border: 0.5px solid var(--navy);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.od-grid__cell:hover {
  background: var(--navy);
  color: var(--paper);
}

/* Mobile: let OD label stack above pills on narrow screens */
@media (max-width: 480px) {
  .od-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 0;
  }
  .od-group__label {
    flex: none;
  }
}

/* ─── PRODUCT DETAIL ──────────────────────────────────────────── */
.pdp {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  align-items: start;
  margin-top: 1.5rem;
}
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
}

.pdp__art {
  padding-right: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 0.5px solid var(--navy);
}
@media (max-width: 860px) {
  .pdp__art { border-right: 0; padding-right: 0; padding-bottom: 1.5rem; border-bottom: 0.5px solid var(--navy); margin-bottom: 1.5rem; }
}

.pdp__main-image {
  background: var(--paper-deep);
  border: 0.5px solid var(--navy);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pdp__plate {
  position: absolute;
  top: 0.85rem; left: 0.85rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.5;
}

/* ─── GALLERY + THUMBNAILS ───────────────────────────────────── */
.pdp__gallery {
  display: flex;
  flex-direction: column;
}
.pdp__main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.pdp__thumb {
  flex: 1;
  aspect-ratio: 4/3;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp__thumb--active {
  border-color: var(--navy);
  border-width: 2px;
}
.pdp__thumb-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
}
.pdp__thumb--active .pdp__thumb-label {
  opacity: 1;
}

/* Schematic views — only one visible at a time */
.pdp__schematic-view {
  display: none !important;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.pdp__schematic-view--active {
  display: flex !important;
}

/* Prev / Next arrows for schematic carousel */
.pdp__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(30,42,61,0.75);
  color: var(--paper);
  border: none;
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.pdp__nav:hover { background: var(--navy); }
.pdp__nav--prev { left: 8px; }
.pdp__nav--next { right: 8px; }

.pdp__buy {
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) {
  .pdp__buy { padding-left: 0; }
}

.pdp__eyebrow { margin-bottom: 0.6rem; }
.pdp__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
/* Material identity, directly under the title — the one line that says what
   the thing actually is before any spec or certification claim. */
.pdp__material {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1rem;
}

.pdp__description {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 42ch;
}

.pdp__availability { margin: -0.5rem 0 1.5rem; }

.pdp__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 0.5px dashed var(--navy);
}
.pdp__price-amount {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pdp__price-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  opacity: 0.7;
}
.pdp__price--quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--brass);
}

.pdp__spec {
  margin-bottom: 1.75rem;
}
.pdp__spec-label { margin-bottom: 0.5rem; }
.pdp__spec-table {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.78rem;
  border-collapse: collapse;
}
.pdp__spec-table td {
  padding: 0.4rem 0;
  border-bottom: 0.5px dotted var(--navy);
}
.pdp__spec-table td:first-child { opacity: 0.7; }
.pdp__spec-table td:last-child  { text-align: right; }
.pdp__spec-table tr:last-child td { border-bottom: 0; }

.pdp__addrow {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 0.75rem;
}
.pdp__qty {
  display: flex;
  align-items: center;
  border: 0.5px solid var(--navy);
  border-radius: 2px;
}
.pdp__qty button {
  background: transparent;
  border: 0;
  padding: 0.55rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--navy);
}
.pdp__qty input {
  width: 2.5rem;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.92rem;
  padding: 0;
  -moz-appearance: textfield;
}
.pdp__qty input::-webkit-outer-spin-button,
.pdp__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ─── LENGTH SELECTOR ────────────────────────────────────────── */
.pdp__lengths {
  margin-bottom: 1.5rem;
}
.pdp__lengths-label { margin-bottom: 0.5rem; }
.pdp__lengths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.4rem;
}
.pdp__length-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 0.5rem;
  border: 0.5px solid var(--navy);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.pdp__length-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pdp__length-opt:hover {
  background: var(--paper-warm);
}
.pdp__length-opt--active {
  background: var(--navy);
  color: var(--paper);
}
.pdp__length-opt--active:hover {
  background: var(--navy);
}
.pdp__length-val {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1;
}
.pdp__length-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 0.15rem;
}
.pdp__length-price {
  font-family: var(--mono);
  font-size: 0.75rem;
  margin-top: 0.3rem;
}
.pdp__length-price--quote {
  opacity: 0.5;
  font-style: italic;
}

.pdp__add { flex: 1; justify-content: center; }
/* Pre-cut cross-links: shown on an unpriced parent (in place of the length
   selector) and on a cut whose parent isn't sellable. */
.pdp__cutlinks { margin-bottom: 1.5rem; }
.pdp__cutlinks-list {
  list-style: none;
  margin: 0.5rem 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pdp__cutlinks-list a {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
  text-decoration: none;
}
.pdp__cutlinks-list a:hover { border-color: var(--brass); color: var(--brass-deep); }
.pdp__cutlinks-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--brass);
  margin-top: 0.5rem;
}

.pdp__ship-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--brass);
  margin-top: 0.4rem;
}

/* ─── VALUE PROP STRIP ──────────────────────────────────────── */
.pdp__valueprop {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 0.5px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pdp__valueprop-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.pdp__valueprop-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  flex: 0 0 auto;
}
.pdp__valueprop-detail {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.pdp__valueprop-detail a {
  color: var(--brass-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── RELATED ────────────────────────────────────────────────── */
.pdp-related {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 0.5px solid var(--rule);
}
.pdp-related__label { margin-bottom: 0.5rem; }
.pdp-related__title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
  margin: 0 0 1.25rem;
}
.pdp-related__strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
.pdp-related__tile {
  background: var(--paper);
  border: 0.5px solid var(--navy);
  padding: 0.75rem;
  text-align: center;
  transition: background 0.15s;
}
.pdp-related__tile--current {
  background: var(--navy);
  color: var(--paper);
}
.pdp-related__tile:not(.pdp-related__tile--current):hover {
  background: var(--paper-warm);
}
.pdp-related__length {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  margin: 0;
}
.pdp-related__price {
  font-family: var(--mono);
  font-size: 0.74rem;
  margin-top: 0.25rem;
  opacity: 0.85;
}