/*
 * Product detail.
 */

/*
 * Two columns, but NOT two equal ones.
 *
 * repeat(auto-fit, minmax(min(100%,300px), 1fr)) gives the gallery half the
 * shell, which is a 694px square pack shot at 1440 and 860px at 1760 -- far
 * larger than the product photography is shot for, and it pushes the buy box
 * and its add-to-cart button down the page. The gallery is capped instead and
 * the buy box takes the remaining width.
 */
.m-pdp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

@container (min-width: 768px) {
  .m-pdp {
    grid-template-columns: minmax(260px, var(--pdp-gallery)) minmax(320px, 1fr);
    gap: 28px;
    /* Capped as a pair. Without this the buy box takes every remaining pixel
       and runs to 1260px at 1760 -- a measure no one reads comfortably, and
       the size chips and radios end up marooned at one end of the row. */
    max-width: 1000px;
  }
}

/* ---------------------------------------------------------------------------
 * Gallery
 * ------------------------------------------------------------------------ */

.m-gallery__main {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-200);
  border-radius: var(--r-block);
  aspect-ratio: 1 / 1;
  /* 34px in the handoff, scaled back with the well itself. */
  padding: 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.m-gallery__main img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.m-gallery__flag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--sale-600);
  color: #fff;
  border-radius: var(--r-badge);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.m-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.m-thumb {
  aspect-ratio: 1 / 1;
  background: var(--cream-200);
  border: 2px solid var(--border-200);
  border-radius: var(--r-control);
  padding: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.m-thumb:hover { border-color: var(--green-700); }
.m-thumb.is-active { border-color: var(--green-700); }
.m-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Slot with no photograph yet -- names the shot the catalog still needs. */
.m-thumb--empty {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  text-align: center;
  line-height: 1.25;
  padding: 4px;
}

/* ---------------------------------------------------------------------------
 * Buy box
 * ------------------------------------------------------------------------ */

.m-buybox { display: flex; flex-direction: column; gap: 14px; }

.m-buybox__brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-700);
}

.m-buybox__title {
  font-size: var(--h1-pdp);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.m-buybox__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-500);
}
.m-buybox__meta a { text-decoration: underline; }
.m-buybox__sep { color: var(--ink-300); }
.m-buybox__sku { color: var(--ink-500); }

.m-buybox__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.m-buybox__price-now {
  font-family: var(--font-display);
  font-size: var(--price-pdp);
  font-weight: 700;
  letter-spacing: -.03em;
}
.m-buybox__price .m-strike { font-size: 16px; }

.m-save {
  background: var(--sale-100);
  color: var(--sale-800);
  border-radius: var(--r-badge);
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 700;
}

.m-buybox__avail {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-700);
}

.m-buybox__group { display: flex; flex-direction: column; gap: 8px; }

.m-buybox__size {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}

/* --- size chips --- */

.m-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.m-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
  background: var(--surface);
  border: 2px solid var(--border-400);
  border-radius: var(--r-control);
  padding: 9px 14px;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.m-chip:hover { border-color: var(--green-700); }
.m-chip.is-selected { border-color: var(--green-700); background: var(--green-100); }
.m-chip__main { font-size: 14px; font-weight: 700; }
.m-chip__note { font-size: 12px; color: var(--ink-500); }
.m-chip.is-selected .m-chip__note { color: var(--green-700); }

/* --- purchase mode radios --- */

.m-radios { display: flex; flex-direction: column; gap: 8px; }

.m-radio {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--surface);
  border: 2px solid var(--border-400);
  border-radius: 10px;
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.m-radio:hover { border-color: var(--green-700); }
.m-radio.is-selected { border-color: var(--green-700); background: var(--green-100); }
.m-radio input { position: absolute; opacity: 0; pointer-events: none; }

.m-radio__pip {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 2px solid var(--border-500);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color var(--t-fast);
}
.m-radio.is-selected .m-radio__pip { border-color: var(--green-700); }
.m-radio.is-selected .m-radio__pip::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-700);
}

.m-radio__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-radio__title { font-size: 14px; font-weight: 600; }
.m-radio__note { font-size: 13px; color: var(--ink-500); line-height: 1.4; }
.m-radio__price {
  flex: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}
.m-radio.is-selected .m-radio__price { color: var(--green-700); }

/* --- quantity + add --- */

.m-buybox__buy { display: flex; gap: 10px; flex-wrap: wrap; }

.m-stepper {
  flex: none;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border-400);
  border-radius: var(--r-control);
  height: 50px;
  overflow: hidden;
}
.m-stepper button {
  width: 40px;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--ink-700);
  transition: background var(--t-fast);
}
.m-stepper button:hover:not(:disabled) { background: var(--cream-200); }
.m-stepper button:disabled { color: var(--ink-300); cursor: not-allowed; }
.m-stepper span {
  min-width: 34px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.m-buybox__add { flex: 1; min-width: 180px; }

.m-buybox__oos {
  background: var(--cream-200);
  border-radius: var(--r-control);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-500);
}

/* --- promise box --- */

.m-promise {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  background: var(--cream-200);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.m-promise li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
}
.m-promise__tick {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--gold-200);
  display: grid;
  place-items: center;
  font-size: 12px;
}

/* ---------------------------------------------------------------------------
 * Detail cards
 * ------------------------------------------------------------------------ */

.m-detail-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin-top: var(--section-gap);
  align-items: start;
}

.m-detail { padding: 20px; }
.m-detail__title {
  font-size: 17px;
  margin-bottom: 8px;
}
.m-detail__title + .m-detail__body { margin-bottom: 16px; }
.m-detail__body { font-size: 14.5px; line-height: 1.6; color: var(--ink-700); }
.m-detail__body p + p { margin-top: 10px; }

/* --- supplement facts --- */

.m-facts__serving {
  font-size: 13.5px;
  color: var(--ink-500);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink-900);
}

.m-facts {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.m-facts td {
  border-bottom: 1px solid var(--border-100);
  padding: 7px 0;
  font-size: 14px;
  vertical-align: top;
}
.m-facts__name { font-weight: 600; }
.m-facts__amount { color: var(--ink-700); padding-left: 10px; }
.m-facts__dv {
  width: 58px;
  text-align: right;
  color: var(--ink-700);
}
.m-facts__note {
  font-size: 13.5px;
  color: var(--ink-500);
  line-height: 1.5;
  margin-bottom: 6px;
}

/* --- this exact bottle --- */

.m-lot {
  background: var(--ink-900);
  border-radius: var(--r-card);
  padding: 20px;
  color: var(--mint-200);
}
.m-lot__title { font-size: 17px; color: #fff; margin-bottom: 12px; }

.m-lot__list { margin: 0; }
.m-lot__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #2C3D34;
  font-size: 13.5px;
}
.m-lot__row dt { color: var(--mint-200); margin: 0; }
.m-lot__row dd { color: var(--gold-300); margin: 0; font-weight: 600; text-align: right; }

.m-lot__coa {
  display: inline-block;
  margin-top: 14px;
  border: 1.5px solid #46705C;
  border-radius: var(--r-control);
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mint-400);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.m-lot__coa:hover { border-color: var(--gold-500); color: #fff; }

/* ---------------------------------------------------------------------------
 * Reviews band
 * ------------------------------------------------------------------------ */

.m-review-band {
  background: var(--cream-300);
  border-radius: var(--r-card);
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 24px;
}

.m-review-band__number {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.m-review-band__score .m-stars { font-size: 16px; margin: 6px 0; }
.m-review-band__count { font-size: 13.5px; color: var(--ink-500); margin-bottom: 14px; }

.m-histogram { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.m-histogram li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.m-histogram__label { flex: none; width: 24px; color: var(--ink-500); }
.m-histogram__track {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: #DCD3C1;
  overflow: hidden;
}
.m-histogram__fill { display: block; height: 100%; background: var(--green-700); }
.m-histogram__pct { flex: none; width: 34px; text-align: right; color: var(--ink-500); }

.m-review-band__list { display: grid; gap: 18px; align-content: start; }
.m-review-band__quote { font-size: 14px; line-height: 1.55; margin: 6px 0; }
.m-review-band__who { font-size: 13px; font-weight: 600; color: var(--ink-500); }

/* ---------------------------------------------------------------------------
 * FDA disclaimer
 * ------------------------------------------------------------------------ */

.m-fda {
  margin-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 92ch;
}

/* ---------------------------------------------------------------------------
 * WooCommerce review form
 * ------------------------------------------------------------------------ */

#reviews .comment-form { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
  width: 100%;
  background: var(--cream-50);
  border: 1.5px solid var(--border-400);
  border-radius: 7px;
  padding: 11px 12px;
  font-size: 14px;
}
#reviews .comment-form label { font-size: 13.5px; font-weight: 600; display: block; margin-bottom: 4px; }
#reviews .comment-form .submit {
  align-self: flex-start;
  background: var(--green-700);
  color: #fff;
  border: 0;
  border-radius: var(--r-control);
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}
#reviews .comment-form .submit:hover { background: var(--green-800); }
#reviews .commentlist { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
#reviews .comment-reply-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; }