/* POPHIES page styles — single Product detail page (single-product.php).
   Source: 网站规划.md §7 (lines 328–436) with §7.3 for the specification table
   and §18 (lines 926–939) for the images. Shared classes live in style.css and
   are not redefined here: this file only spaces and shapes what this page adds —
   the hero tags, the two overview blocks, the model specification table, the
   image groups, the related modules and WordPress's own password form. Nothing
   here is wider than the container, so at 375px the only sideways scroll is the
   one inside .table-scroll, which §7.3 allows. */

/* ---------- Hero tags: power type and available finishes (§7.1) ---------- */
.product-tags { margin-bottom: 3rem; }

/* The page hero carries its own bottom space, so the first block opens tighter
   than a standalone section. */
.section--product-overview { padding-top: var(--section-sm); }

/* ---------- Overview: key features and long description (§7.1) ---------- */
.product-blocks { align-items: start; }

/* Page-local spacing: inside these blocks the heading belongs to the text right
   under it, not to a new section. */
.product-blocks .section-head { margin-bottom: 1.75rem; }

.product-block { min-width: 0; }
.product-block .checklist { max-width: var(--read); }

/* ---------- Model specification table (§7.3) ---------- */
/* The shared table opens at 60rem, which is wider than a product with three or
   four printed columns needs; a narrower table still scrolls inside
   .table-scroll once there are more columns than the screen can hold. */
.product-spec-table { min-width: 34rem; }

.product-spec-scroll { max-width: 100%; }

/* The dash that stands for a value that is not on record; the table caption
   explains it. */
.product-spec__empty { color: var(--graphite); }

.product-spec-note { margin: 0; }

/* ---------- Image groups (§7.2, §18) ---------- */
.product-media__group + .product-media__group { margin-top: 3.5rem; }

.product-media__group-title {
  margin-bottom: 1.25rem;
  font-size: var(--fs-h3);
}

.product-media-grid { align-items: start; }

/* ---------- Commercial terms, customization, certification ---------- */
.product-customization__list { max-width: var(--read); }
.product-customization__empty { max-width: var(--read); margin: 0; }
.product-customization__note { margin: 2rem 0 0; }
.product-certification__note { margin: 0; }

/* ---------- Related modules (§7.7, §13) ---------- */
.product-related__block + .product-related__block { margin-top: 4rem; }

/* These modules sit under a product page, not beside another section, so their
   headings step back from the display size used for the page sections. */
.product-related__title {
  margin-bottom: 1.5rem;
  font-size: var(--fs-h3);
}

.product-related__grid { align-items: start; }

.product-resources a {
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.product-resources a:hover {
  color: var(--brass);
  text-decoration: underline;
}

/* ---------- Password form (WordPress's own, §7 password rule) ---------- */
.product-locked { max-width: 34rem; }

.product-locked .post-password-form { margin: 0; }

.product-locked .post-password-form p {
  margin: 0 0 1.25rem;
  font-size: var(--fs-small);
  color: var(--graphite);
}

.product-locked .post-password-form label { display: block; margin-bottom: 0.5rem; }

.product-locked .post-password-form input[type="password"] {
  width: 100%;
  max-width: 22rem;
  padding: 0.8em 1em;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.product-locked .post-password-form input[type="submit"] {
  margin-top: 1rem;
  padding: 0.95em 1.6em;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.product-locked .post-password-form input[type="submit"]:hover {
  background: var(--brass);
  border-color: var(--brass);
}

/* ---------- Narrow screens: keep the page inside 375px ---------- */
@media (max-width: 660px) {
  .product-tags { margin-bottom: 2rem; }

  .product-media__group + .product-media__group { margin-top: 2.5rem; }

  .product-related__block + .product-related__block { margin-top: 3rem; }

  .product-locked .post-password-form input[type="password"] { max-width: 100%; }
}