/* Product pages — simple single-column layout (ProBois77 local style) */



.pp-page {

  padding-top: var(--nav-offset, 128px);

  padding-bottom: 3rem;

}



.pp-simple {

  max-width: 38rem;

  margin: 0 auto;

}



.pp-simple > .pp-head {

  text-align: center;

  margin-bottom: 1.5rem;

}



.pp-simple > .pp-head h1 {

  margin: 0 0 0.5rem;

  font-size: clamp(1.5rem, 4vw, 2rem);

  letter-spacing: -0.02em;

}



.pp-simple .pp-lead {

  margin: 0 auto;

  max-width: 42ch;

  color: var(--prob-text-muted);

  font-size: 1.05rem;

  line-height: 1.45;

}



.pp-hero {

  margin: 0 auto 1.5rem;

  max-width: 28rem;

  border-radius: 12px;

  border: 1px solid var(--prob-border);

  overflow: hidden;

  background: var(--prob-white);

}



.pp-hero img {

  width: 100%;

  height: auto;

  display: block;

  vertical-align: middle;

}



.pp-muted-line {

  margin: 0.5rem 0 0;

  font-size: 0.9rem;

  color: var(--prob-text-muted);

  text-align: center;

}



.pp-block {

  margin-bottom: 1.25rem;

}



.pp-block h2 {

  margin: 0 0 0.5rem;

  font-size: 1.15rem;

  font-weight: 700;

}



.pp-block p {

  margin: 0 0 0.65rem;

  color: var(--prob-text);

  line-height: 1.55;

}



.pp-benefits {

  margin: 0;

  padding-left: 1.2rem;

  color: var(--prob-text-muted);

  font-size: 0.95rem;

  line-height: 1.5;

}



.pp-sim-line {

  margin: 0 0 1.5rem;

  font-size: 0.95rem;

  color: var(--prob-text-muted);

  text-align: center;

}



.pp-sim-line a {

  color: var(--prob-accent);

  font-weight: 600;

  text-decoration: underline;

  text-underline-offset: 3px;

}



.pp-sim-line a:hover {

  text-decoration-thickness: 2px;

}



/* Commander */

.pp-order {

  padding: 1.25rem 1.35rem;

  border-radius: 12px;

  border: 1px solid var(--prob-border);

  background: var(--prob-white);

  box-shadow: var(--prob-shadow-sm);

}



.pp-order > h2.pp-order-title {

  margin: 0 0 1rem;

  font-size: 1.1rem;

  font-weight: 700;

  text-align: center;

}



.pp-price-block {

  margin-bottom: 1.15rem;

  padding-bottom: 1rem;

  border-bottom: 1px solid var(--prob-border);

  text-align: center;

}



.pp-unit-price {

  margin: 0;

  font-size: 1.5rem;

  font-weight: 700;

  letter-spacing: -0.02em;

}



.pp-quiet {

  margin: 0.35rem 0 0;

  font-size: 0.88rem;

  color: var(--prob-text-muted);

  line-height: 1.35;

}



.pp-quiet--accent {

  margin-top: 0.25rem;

  font-style: italic;

}



.pp-field {

  margin-bottom: 1rem;

}



.pp-field > label,

.pp-step-label {

  display: block;

  margin-bottom: 0.35rem;

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--prob-text);

}



.pp-stepper-ui {

  display: grid;

  grid-template-columns: 44px 1fr 44px;

  align-items: center;

  border: 1px solid var(--prob-border);

  border-radius: 8px;

  overflow: hidden;

  max-width: 14rem;

}



.pp-stepper-ui button {

  height: 40px;

  border: 0;

  background: rgba(110, 101, 195, 0.08);

  color: var(--prob-text);

  cursor: pointer;

  font-size: 1.1rem;

  font-weight: 700;

}



.pp-stepper-ui span {

  height: 40px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

}



.pp-postal-hint {

  margin: 0 0 0.5rem;

  font-size: 0.9rem;

  color: var(--prob-text-muted);

  line-height: 1.45;

}



.pp-inline-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  align-items: stretch;

}



.pp-inline-row input[type="text"] {

  flex: 1 1 8rem;

  min-width: 0;

  border: 1px solid var(--prob-border);

  border-radius: 8px;

  padding: 0.55rem 0.65rem;

  font-size: 1rem;

  background: transparent;

  color: var(--prob-text);

}



.pp-zone-line,

.pp-deliv-line {

  margin: 0.5rem 0 0;

  font-size: 0.88rem;

  line-height: 1.45;

  color: var(--prob-text-muted);

}



.pp-deliv-line {

  color: var(--prob-text);

}



.pp-allumage {

  margin-bottom: 1rem;

}



.pp-allumage-main {

  display: flex;

  align-items: flex-start;

  gap: 0.5rem;

  font-size: 0.95rem;

  cursor: pointer;

}



.pp-allumage-main input {

  margin-top: 0.2rem;

}



.pp-allumage-qty-wrap {

  display: none;

  margin-top: 0.6rem;

  padding-left: 1.5rem;

}



.pp-allumage.pp-allumage-open .pp-allumage-qty-wrap {

  display: block;

}



.pp-allumage-qty-wrap label {

  display: block;

  margin-bottom: 0.25rem;

  font-size: 0.85rem;

  color: var(--prob-text-muted);

}



.pp-allumage-qty-wrap select {

  border: 1px solid var(--prob-border);

  border-radius: 8px;

  padding: 0.4rem 0.5rem;

  font-size: 0.9rem;

  background: transparent;

  color: var(--prob-text);

}



.pp-total-est {

  margin: 0 0 1rem;

  font-size: 0.98rem;

  text-align: center;

}



.pp-cta {

  width: 100%;

  min-height: 44px;

  font-weight: 700;

}

/* Legacy markup (bois-2m.html, anciennes URLs produit) — grille simple, sans style “marketplace” */

.container > .pp-shell {

  display: grid;

  gap: 1.15rem;

  align-items: start;

  max-width: 72rem;

  margin: 0 auto 2rem;

}

.container > .pp-shell:not([style*="grid-template-columns"]) {

  grid-template-columns: 1fr;

}

.pp-left .pp-media {

  margin: 0;

  border-radius: 12px;

  border: 1px solid var(--prob-border);

  overflow: hidden;

  background: var(--prob-white);

}

.pp-left .pp-media img {

  width: 100%;

  height: auto;

  display: block;

}

.pp-title {

  margin: 0 0 0.35rem;

  font-size: 1.15rem;

}

.pp-desc {

  margin: 0 0 0.65rem;

  color: var(--prob-text-muted);

  font-size: 0.95rem;

}

.pp-card .pp-benefits {

  list-style: none;

  padding: 0;

  margin: 0;

}

.pp-card .pp-benefits li {

  margin-bottom: 0.35rem;

}

.pp-buybox .pp-cta + .pp-cta {

  margin-top: 0.5rem;

}

/* Conversion — mettre en avant 5+ stères (sans bloquer 1–4 sur 77/91/94) */

:root {
  --pp-value: #15803d;
  --pp-value-soft: rgba(21, 128, 61, 0.12);
  --pp-warn: #b45309;
  --pp-warn-soft: rgba(180, 83, 9, 0.12);
}

.pp-order--best {
  padding: 1.35rem 1.45rem 1.45rem;
  border-width: 2px;
  border-color: var(--pp-value);
  box-shadow: 0 8px 28px var(--pp-value-soft);
}

.pp-best-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pp-value);
}

.pp-unit-price--hero {
  font-size: clamp(1.65rem, 4vw, 2rem);
  font-weight: 800;
}

.pp-price-small {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  color: var(--prob-text-muted);
  line-height: 1.35;
}

.pp-saving-line {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pp-value);
  line-height: 1.35;
}

.pp-quiet--muted {
  font-size: 0.82rem;
  color: var(--prob-text-muted);
}

.pp-volume-tip {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
  color: var(--prob-text-muted);
  line-height: 1.45;
}

.pp-volume-tip strong {
  color: var(--prob-text);
}

.pp-pack-rec {
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  text-align: left;
  border-radius: 12px;
  border: 1px dashed rgba(21, 128, 61, 0.45);
  background: var(--pp-value-soft);
  color: var(--prob-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  font: inherit;
}

.pp-pack-rec:hover {
  border-color: var(--pp-value);
  background: rgba(21, 128, 61, 0.18);
}

.pp-pack-rec:focus-visible {
  outline: 2px solid var(--pp-value);
  outline-offset: 2px;
}

.pp-pack-rec__rule {
  display: block;
  height: 1px;
  margin-bottom: 0.45rem;
  background: rgba(21, 128, 61, 0.35);
}

.pp-pack-rec__kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pp-value);
  margin-bottom: 0.35rem;
}

.pp-pack-rec__lead {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.pp-pack-rec__checks {
  display: block;
  font-size: 0.88rem;
  color: var(--prob-text-muted);
  line-height: 1.45;
}

.pp-qty-feedback {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

.pp-qty-feedback--warn {
  color: var(--pp-warn);
  background: var(--pp-warn-soft);
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
}

.pp-qty-feedback--ok {
  color: var(--pp-value);
  background: var(--pp-value-soft);
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
}

.pp-price-block--flat .pp-unit-price--hero {
  font-size: clamp(1.45rem, 3.5vw, 1.85rem);
}