/* Pre-release product page (waitlist). Reuses product.css for the hero and
   gallery; this file only adds the notify-me block, the coming-soon tag, the
   three-step explainer and the FAQ. Kept separate from product.css so the
   shipped product pages are untouched (their stylesheet is cache-versioned). */

.pdp-coming {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-green-mid);
  background: var(--color-green-light);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: var(--space-sm);
}

.waitlist {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-green-light);
  border-radius: 12px;
}
.waitlist-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-green-dark);
  margin: 0 0 4px;
}
.waitlist-sub {
  font-size: 0.9rem;
  color: var(--color-green-mid);
  margin: 0 0 var(--space-md);
  line-height: 1.5;
}
.waitlist .newsletter-form { max-width: 440px; }
.waitlist .newsletter-input-wrap {
  display: flex;
  align-items: stretch;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(26, 60, 26, 0.18);
  border-radius: 8px;
  overflow: hidden;
}
.waitlist .newsletter-input-wrap:focus-within { border-color: var(--color-green-mid); }
.waitlist .newsletter-input {
  flex: 1;
  border: 0;
  padding: 0 16px;
  height: 52px;
  font: inherit;
  font-size: 1rem;
  color: var(--color-green-dark);
  background: transparent;
  min-width: 0;
}
.waitlist .newsletter-input:focus { outline: none; }
.waitlist .newsletter-input::placeholder { color: rgba(26, 60, 26, 0.45); }
.waitlist .newsletter-submit {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  align-self: stretch;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-green-dark);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 22px;
  cursor: pointer;
  white-space: nowrap;
}
.waitlist .newsletter-submit:hover { background: var(--color-green-mid); }
.waitlist .newsletter-error .newsletter-input-wrap { border-color: #c8372b; }
.waitlist .newsletter-busy .newsletter-submit { opacity: 0.6; }
.waitlist .newsletter-success {
  font-size: 0.95rem;
  color: var(--color-green-dark);
  font-weight: 500;
  padding: 12px 0;
}
.waitlist-fine {
  font-size: 0.78rem;
  color: var(--color-green-mid);
  margin: var(--space-sm) 0 0;
}

/* GD-SSD page only: the white render sits on the site's light green instead of
   the cream page background (Chris, 2026-09-19). Thumbnails get the same tile. */
.pdp-hero--ssd .pdp-media-main {
  background: var(--color-green-light);
  border-radius: 12px;
  padding: var(--space-lg);
  box-sizing: border-box; /* the padding must not widen the tile past the column (it overflowed phones by 43px) */
}
.pdp-hero--ssd .pdp-thumb {
  background: var(--color-green-light);
  min-width: 0;
}
/* Six thumbnails: without these the thumb strip's min-content (six images) forced the hero grid
   column to 413px and the whole hero overflowed a 390px phone. */
.pdp-hero--ssd .pdp-media,
.pdp-hero--ssd .pdp-info,
.pdp-hero--ssd .pdp-media-thumbs--grid { min-width: 0; }
.pdp-hero--ssd .pdp-thumb img { width: 100%; height: 100%; min-width: 0; object-fit: cover; }

/* Three-step explainer and the "where it belongs" grid */
.steps {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.step-n {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-green-dark);
  color: #d3fa99;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.step h3 { margin: 4px 0 4px; font-size: 1.05rem; font-weight: 600; }
.step p { margin: 0; color: var(--color-charcoal, #373837); line-height: 1.6; }

.places {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.place {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: var(--space-md);
}
.place { display: flex; flex-direction: column; }
.place-who { display: block; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(26, 60, 26, 0.1); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-green-mid); line-height: 1.35; }
.place p { margin-bottom: 12px; }
.place h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; }
.place p { margin: 0; font-size: 0.95rem; line-height: 1.55; }

.faq { margin-top: var(--space-lg); }
.faq details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 14px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-green-dark);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--color-green-mid); }
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin: 10px 0 0; line-height: 1.6; }

.section-pad { padding: var(--space-3xl) 0; }
.section-cream-dark { background: var(--color-cream-dark); }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { flex-direction: column; }
  .places { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .places { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Where it goes: the approved lab drawings on light green tiles ---- */
.spots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--space-lg); }  /* two across on a phone: less scrolling (Chris); flex so an odd last row sits centred */
.spots > .spot { flex: 0 0 calc((100% - 10px) / 2); }
.spot { background: var(--color-green-light); border-radius: 12px; padding: 10px 10px 12px; }
.spot-img { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto 8px; }
.spot-title { margin: 0 0 3px; font-size: 0.9rem; font-weight: 600; }
.spot-sub { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--color-charcoal, #373837); }
@media (min-width: 600px) { .spots { gap: 16px; } .spots > .spot { flex-basis: calc((100% - 16px) / 2); } .spot { padding: 18px 18px 20px; } .spot-title { font-size: 1rem; } .spot-sub { font-size: 0.92rem; line-height: 1.5; } .spot-img { margin-bottom: 12px; } }
@media (min-width: 1024px) { .spots { gap: 20px; } .spots > .spot { flex-basis: calc((100% - 60px) / 4); } }  /* four across; shower tray (2026-09-28) and bath (2026-09-29) removed, seven cards */

/* ---- With a P-trap, or in place of one: before/after pairs, labels in HTML (R012) ---- */
.pairs { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: var(--space-lg); }
.pair { margin: 0; background: #fff; border: 1px solid rgba(26, 60, 26, 0.08); border-radius: 12px; padding: 18px 18px 16px; }
.pair-labels { display: flex; justify-content: space-around; gap: 16px; margin-bottom: 8px; }
.pair-labels span { flex: 1; text-align: center; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-green-mid); }
.pair-img { display: block; width: 100%; height: auto; }
.pair-two-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair-two-imgs img { display: block; width: 100%; height: auto; }
.pair figcaption { margin-top: 12px; font-size: 0.92rem; line-height: 1.5; color: var(--color-charcoal, #373837); }
@media (min-width: 1024px) { .pairs { grid-template-columns: 1fr; max-width: 760px; } }

/* ---- Feature rows: a drawing or render beside copy (RV block, the cartridge) ---- */
.feature { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.feature-art { background: var(--color-green-light); border-radius: 12px; padding: 24px; }
.feature-art img { display: block; width: 100%; height: auto; max-width: 360px; margin: 0 auto; }
.feature-art .pair-two-imgs img { max-width: none; }
.feature-art-photo { background: var(--color-green-light); padding: 12px; } /* white renders on white lost their edges; the hero tile is green for the same reason */
.feature-art-photo img { max-width: 440px; }
.feature-text .pdp-section-title { margin-top: 0; }
.feature-list { list-style: disc; margin: var(--space-md) 0 0; padding-left: 1.2em; line-height: 1.6; color: var(--color-charcoal, #373837); }
.feature-list li { margin-bottom: 6px; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 5fr 7fr; gap: 48px; }
  .feature-wide { grid-template-columns: 6fr 6fr; }
  .feature-flip { grid-template-columns: 7fr 5fr; }
  .feature-flip .feature-art { order: 2; }
}

/* ---- The applications list ---- */
/* A tidy checklist, not a pill cloud: ragged pills looked broken on phones (Chris, 2026-09-29) */
.uses { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.uses li { position: relative; padding-left: 22px; font-size: 0.92rem; line-height: 1.4; color: var(--color-green-dark); }
.uses li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 12px; height: 7px; border-left: 2px solid var(--color-green-mid, #2d5a2d); border-bottom: 2px solid var(--color-green-mid, #2d5a2d); transform: rotate(-45deg); }
@media (min-width: 900px) { .uses { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .places { grid-template-columns: repeat(5, 1fr); } .place p { font-size: 0.9rem; } }

/* ---- Ten ways a water seal goes missing: numbered, two columns (lab option A, Chris 2026-09-20) ---- */
.fa { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 40px; }
.fa li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(26, 60, 26, 0.1); }
.fa-n { flex: none; width: 22px; padding-top: 3px; font-size: 0.8rem; font-weight: 600; color: var(--color-green-mid); }
.fa b { color: var(--color-green-dark); }
.fa-body { color: var(--color-charcoal, #373837); line-height: 1.5; }
.fa-who { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--color-green-mid); }
@media (min-width: 900px) { .fa { grid-template-columns: 1fr 1fr; } }

/* ---- Space section: the two sizes side by side (Chris 2026-09-28: space is the lead point) ---- */
.size-rows { margin: var(--space-md) 0 0; display: grid; gap: 10px; }
.size-rows > div { background: #fff; border: 1px solid rgba(26, 60, 26, 0.08); border-radius: 10px; padding: 12px 14px; }
.size-rows > div:first-child { border-color: var(--color-green-mid, #2d5a2d); }
.size-rows dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-green-mid, #2d5a2d); margin: 0 0 2px; }
.size-rows dd { margin: 0; line-height: 1.5; color: var(--color-charcoal, #373837); }
.size-note { margin-top: var(--space-md); font-size: 0.8rem; line-height: 1.5; color: var(--color-charcoal, #373837); opacity: 0.8; }

/* ---- Codes section: one card per code (Chris 2026-09-28; no certification named) ---- */
.code-rows { margin: var(--space-lg) 0 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.code-rows > div { background: #fff; border: 1px solid rgba(26, 60, 26, 0.08); border-radius: 10px; padding: 14px 16px; }
.code-rows dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-green-mid, #2d5a2d); margin: 0 0 4px; }
.code-rows dd { margin: 0; line-height: 1.55; color: var(--color-charcoal, #373837); }
@media (min-width: 900px) { .code-rows { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* ---- Waitlist pre-qualifier: one optional select above the email (2026-09-29) ---- */
.waitlist-role { display: block; width: 100%; margin: 0 0 8px; padding: 11px 36px 11px 14px; font: inherit; font-size: 0.92rem; color: var(--color-charcoal, #373837); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232d5a2d' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid rgba(26, 60, 26, 0.18); border-radius: 8px; -webkit-appearance: none; appearance: none; }
.waitlist-role:focus { outline: none; border-color: var(--color-green-mid); }

/* ---- Partners: three short cards (2026-09-29) ---- */
.partner-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: var(--space-lg); }
.partner-card { background: var(--color-green-light); border-radius: 12px; padding: 16px 18px; }
.partner-card h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.partner-card p { margin: 0; line-height: 1.5; color: var(--color-charcoal, #373837); }
@media (min-width: 900px) { .partner-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* Odd card out on phones and tablets: the last card runs full width, drawing
   beside its text, instead of sitting alone in the middle (Chris, 2026-09-29) */
@media (max-width: 1023px) {
  .spots > .spot:last-child:nth-child(odd) { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-items: center; }
  .spots > .spot:last-child:nth-child(odd) .spot-img { grid-row: 1 / span 2; margin: 0; }
  .spots > .spot:last-child:nth-child(odd) .spot-title { align-self: end; }
  .spots > .spot:last-child:nth-child(odd) .spot-sub { align-self: start; }
}