/* ════════════════════════════════════════════════════════════════════
   Single product page polish (mobile first).

   Loaded on product pages only (inc/enqueue.php), after global.css and
   Tailwind, so these rules win over the older PDP rules in global.css
   without !important where the specificity is equal. PHP side:
   inc/product-page.php. Trust panel markup: template-parts/product/trust.php.
   ════════════════════════════════════════════════════════════════════ */

/* ── Readable section labels ─────────────────────────────────────────
   "Key benefits", "Capsule count", "Choose your plan" were 11–12.5px grey
   uppercase. Larger, dark, sentence case reads far better for older
   customers. Scoped to the summary so the shop-grid popover keeps its own. */
.single-product .summary .fpx-pdp-benefits h2,
.single-product .summary .fpx-popover-eyebrow {
  font-family: "Glory", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: #1f2937;
}
.single-product .summary .fpx-pdp-benefits h2 {
  margin: 0 0 10px;
}
.single-product .summary .fpx-pdp-benefits li {
  font-size: 15px;
  line-height: 1.45;
}
@media (min-width: 640px) {
  .single-product .summary .fpx-pdp-benefits li {
    font-size: 16px;
  }
}

/* ── First screen: title, meta, price ────────────────────────────────
   Affiliate links land visitors straight here, so the top of the page is
   the first impression. Title sizes live on the <h1> (Tailwind, summary.php);
   the price is sized here because WooCommerce writes its markup. Smaller on
   phones so title + price + benefits share the first screen. */
.single-product .fpx-pdp-price .fpx-price-main .woocommerce-Price-amount,
.single-product .fpx-pdp-price > .woocommerce-Price-amount {
  font-size: 2rem;
  letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
  .single-product .fpx-pdp-price .fpx-price-main .woocommerce-Price-amount,
  .single-product .fpx-pdp-price > .woocommerce-Price-amount {
    font-size: 2.375rem;
  }
}
.single-product .fpx-pdp-meta {
  font-size: 13px;
}
@media (max-width: 639px) {
  .single-product .fpx-pdp-meta .text-success {
    padding: 2px 10px;
  }
}

/* ── Trust panel (under Add to Cart) ──────────────────────────────── */
.fpx-pdp-trust {
  margin-top: 20px;
  border: 1px solid #e5eef0;
  border-radius: 12px;
  background: #f7fbfc;
  overflow: hidden;
}
.fpx-pdp-trust ul.fpx-pdp-trust__list {
  list-style: none;
  margin: 0;
  padding: 4px 16px;
}
.fpx-pdp-trust__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  line-height: 1.4;
  color: #374151;
}
.fpx-pdp-trust__list li + li {
  border-top: 1px solid #e5eef0;
}
.fpx-pdp-trust__list strong {
  display: block;
  font-weight: 600;
  color: #111827;
}
.fpx-pdp-trust__sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: #6b7280;
}
.fpx-pdp-trust__sub a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fpx-pdp-trust__sub a:hover {
  color: #0f6f7d;
}
.fpx-pdp-trust__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d7e9ed;
  color: var(--brand-deep);
}
.fpx-pdp-trust__icon svg {
  display: block;
}
.fpx-pdp-trust__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #e5eef0;
}
.fpx-pdp-trust__pay-label {
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
}
.fpx-pdp-trust .fpx-pdp-trust__pay ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fpx-pdp-trust__pay img {
  display: block;
  width: 40px;
  height: 26px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
}

/* ── Quantity + Add to Cart row ──────────────────────────────────────
   On a phone the 128px stepper left too little room and the button text
   wrapped to two lines. A slimmer stepper gives the button the space. */
@media (max-width: 639px) {
  .single-product .fpx-pdp-atc-form .quantity {
    width: 112px;
  }
}

/* ── Tabs: one full-width segmented row on phones ────────────────── */
@media (max-width: 639px) {
  .single-product .fpx-tab-list {
    width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px !important;
    background: #f1f5f9;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
  }
  .single-product .fpx-tab-list li {
    flex: 1 1 0;
    min-width: 0;
  }
  .single-product .fpx-tab-list li a {
    width: 100%;
    padding: 0.7rem 0.25rem !important;
    border-radius: 9px !important;
    border-color: transparent !important;
    background: transparent !important;
    font-size: 15px !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .single-product .fpx-tab-list li.active > a {
    background: var(--brand-grad-pill) !important;
  }
}

/* ── Tab panel text ──────────────────────────────────────────────────
   Description content comes from the editor and can carry very large
   headings; cap them so a phone screen isn't one heading. */
.single-product .woocommerce-Tabs-panel h1,
.single-product .woocommerce-Tabs-panel h2 {
  font-size: clamp(22px, 5.5vw, 28px);
  line-height: 1.25;
}
.single-product .woocommerce-Tabs-panel h3 {
  font-size: clamp(19px, 4.8vw, 22px);
  line-height: 1.3;
}
@media (max-width: 639px) {
  .single-product .woocommerce-Tabs-panel {
    font-size: 16px;
    line-height: 1.65;
  }
}

/* ── Related products: swipeable row on phones ───────────────────── */
@media (max-width: 639px) {
  .single-product .fpx-related-grid {
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    /* Bleeds to the screen edge: matches the 10px phone margin below. */
    margin-inline: -10px;
    padding: 4px 10px 12px;
    scroll-padding-inline: 10px;
    scrollbar-width: none;
  }
  .single-product .fpx-related-grid::-webkit-scrollbar {
    display: none;
  }
  .single-product .fpx-related-grid > * {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: start;
  }
}

/* ── Floating cart bubble ────────────────────────────────────────────
   On a phone the product page already has the sticky Add to Cart bar and
   the header cart; the extra bubble covered content. Only the trigger is
   hidden: the panel still opens after an add, and closes as usual. */
@media (max-width: 767px) {
  body.single-product .fpx-fcart:not(.is-open) button.fpx-fcart-trigger {
    display: none;
  }
}

/* ── Phones: tighter frame so the product fills the screen ───────────
   Less space under the header and slimmer side margins. The empty
   WooCommerce notices box also carried a 20px gap on its own. */
@media (max-width: 639px) {
  .single-product .fpx-pdp-container {
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .single-product .fpx-pdp-container > .woocommerce-notices-wrapper:empty {
    display: none;
  }
  .single-product .fpx-pdp-info {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Ingredients tab: supplement facts (template-parts/product/facts.php) ──
   Only renders for products with facts entered in their FoliumPX tab.
   The table borrows the look of a printed Supplement Facts panel (heavy
   outer rule, bold caption, a thick line under the column heads), because
   that's the format customers already know how to read. 16px text minimum
   for older customers. The tab panel is Tailwind `prose`, whose rules use
   :where() and so lose to these single-class selectors. */
.fpx-facts {
  font-size: 16px;
  line-height: 1.6;
  color: #1f2937;
}
.fpx-facts .fpx-facts__table {
  width: 100%;
  max-width: 560px;
  margin: 0 0 24px;
  border: 2px solid #1f2937;
  border-collapse: collapse;
  font-size: 16px;
}
.fpx-facts .fpx-facts__table caption {
  caption-side: top;
  padding: 0 0 8px;
  text-align: left;
  font-family: "Glory", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}
.fpx-facts .fpx-facts__table th,
.fpx-facts .fpx-facts__table td {
  padding: 8px 12px;
  border-bottom: 1px solid #cbd5e1;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.fpx-facts .fpx-facts__table th[scope="row"] {
  font-weight: 600;
}
.fpx-facts .fpx-facts__table .fpx-facts__cols th {
  border-bottom: 3px solid #1f2937;
  font-size: 14px;
  font-weight: 700;
}
.fpx-facts .fpx-facts__table .fpx-facts__num {
  text-align: right;
}
/* Amounts stay on one line; the column heads may wrap, or "Amount per
   serving" + "% Daily Value" push the table past a 390px phone. */
.fpx-facts .fpx-facts__table td.fpx-facts__num {
  white-space: nowrap;
}
.fpx-facts .fpx-facts__list {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
}
.fpx-facts .fpx-facts__list > div {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 4px 20px;
}
.fpx-facts .fpx-facts__list dt {
  margin: 0;
  font-weight: 600;
  color: #1f2937;
}
.fpx-facts .fpx-facts__list dd {
  margin: 0;
  padding: 0;
}
.fpx-facts .fpx-facts__heading {
  margin: 28px 0 8px;
  font-family: "Glory", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}
.fpx-facts .fpx-facts__includes a {
  color: var(--color-primary-dark);
  font-weight: 600;
}
.fpx-facts .fpx-facts__faq-item {
  border-top: 1px solid #e2e8f0;
  padding: 12px 0;
}
.fpx-facts .fpx-facts__faq-item:last-child {
  border-bottom: 1px solid #e2e8f0;
}
.fpx-facts .fpx-facts__faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: #1f2937;
}
.fpx-facts .fpx-facts__faq-item summary:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 3px;
}
.fpx-facts .fpx-facts__faq-item p {
  margin: 8px 0 0;
}
@media (max-width: 479px) {
  .fpx-facts .fpx-facts__list > div {
    grid-template-columns: 1fr;
  }
  .fpx-facts .fpx-facts__table th,
  .fpx-facts .fpx-facts__table td {
    padding: 8px;
  }
}