/* ==========================================================================
   Enhanced Product Page (PDP v2)
   Path: css/product-enhanced.css — loaded after css/product.css, only on
   products using templates/single-product-enhanced.php.
   Uses the existing design tokens from style.css (navy/maroon palette, Ubuntu /
   Inter, --doc-radius). Mobile-first; breakpoints 768px / 1024px.
   ========================================================================== */

/* ---------- Shared ---------- */
.doc-pdp2-section {
  padding: 2rem 0;
  border-top: 1px solid var(--doc-gray-4);
  background: #fff;
}

.doc-pdp2-section__title {
  margin: 0 0 1rem;
  color: var(--doc-blue-1);
}

.doc-pdp2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .doc-pdp2-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .doc-pdp2-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .doc-pdp2-section { padding: 2.5rem 0; }
  .doc-pdp2-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.doc-pdp2-card {
  background: #fff;
  border: 1px solid var(--doc-gray-4);
  border-radius: var(--doc-radius);
  overflow: hidden;
}

.doc-pdp2-card__media {
  aspect-ratio: 16 / 7;           /* reserves space → no CLS */
  background: var(--doc-blue-3);
  overflow: hidden;
}

.doc-pdp2-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.doc-pdp2-card__body {
  padding: 1rem 1.125rem 1.25rem;
}

.doc-pdp2-card__body .h3 {
  margin: 0 0 0.5rem;
  color: var(--doc-blue-1);
}

.doc-pdp2-card__body ul {
  margin: 0;
  padding-left: 1.25rem;
}

.doc-pdp2-card__body li + li { margin-top: 0.25rem; }
.doc-pdp2-card__body p { margin: 0; color: var(--doc-gray-2); }

/* ---------- Sections inside the TOC content column ---------- */
/* Narrower than full width, so cap grids at 2 columns (3 for steps on wide screens). */
@media (min-width: 768px) {
  .medical-info-wrapper .doc-pdp2-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .medical-info-wrapper .doc-pdp2-steps__list { grid-template-columns: repeat(3, 1fr); }
}

.medical-info-wrapper .doc-pdp2-iconrow {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
  .medical-info-wrapper .doc-pdp2-iconrow { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 4.2 Hero additions ---------- */
.doc-pdp2-summary {
  margin: 0.35rem 0 0;
  color: var(--doc-gray-2);
  font-size: var(--font-size-s);
}

.doc-pdp2-review-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc-pdp2-option-helper {
  width: 100%;
  margin: 0 0 0.5rem;
  color: var(--doc-gray-2);
  font-size: var(--font-size-xs);
}

.doc-pdp2-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--doc-green-1);
  font-weight: 600;
  font-size: var(--font-size-s);
  text-decoration: none;
}

.doc-pdp2-whatsapp-link:hover,
.doc-pdp2-whatsapp-link:focus-visible { text-decoration: underline; }

/* Unlimited badges: let the existing row wrap cleanly */
.doc-pdp2-usp-row { row-gap: 0.5rem; }

/* ---------- 4.3 Credibility (E-E-A-T) ---------- */
/* Same space above and below the box (the content area under it has no top padding). */
.doc-pdp2-credibility {
  padding: 1.5rem 0;
  background: #fff;
}

/* One spacing scale for every row (people + date): 0.75rem mobile, 1rem from tablet. */
.doc-pdp2-credibility__box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--doc-gray-5);
  border: 1px solid var(--doc-gray-4);
  border-radius: var(--doc-radius);
}

.doc-pdp2-credibility__person {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.doc-pdp2-credibility__person > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .doc-pdp2-credibility__box {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 1rem 1.25rem;
  }

  .doc-pdp2-credibility__person {
    flex: 1 1 16rem;
    max-width: 28rem;
  }
}

.doc-pdp2-credibility__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.doc-pdp2-credibility__avatar.is-empty {
  display: block;
  background: var(--doc-gray-4);
}

.doc-pdp2-credibility__label,
.doc-pdp2-credibility__creds {
  font-size: var(--font-size-xs);
  color: var(--doc-gray-2);
}

.doc-pdp2-credibility__name {
  font-weight: 600;
  color: var(--doc-blue-1);
}

/* Last row of the box, full width, divided from the people above it. */
.doc-pdp2-credibility__date {
  display: flex;
  align-items: center;
  flex-basis: 100%;
  gap: 0.35rem;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--doc-gray-4);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--doc-green-1);
}

@media (min-width: 768px) {
  .doc-pdp2-credibility__date { padding-top: 1rem; }
}

/* ---------- 4.6 Reviews: see css/doc-reviews.css ---------- */

/* ---------- 4.8 How to use ---------- */
.doc-pdp2-steps__list { counter-reset: none; }

.doc-pdp2-step {
  padding: 1rem;
}

.doc-pdp2-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--doc-blue-1);
  color: #fff;
  font-weight: 600;
  font-size: var(--font-size-xs);
}

.doc-pdp2-step__media {
  aspect-ratio: 3 / 1;
  margin: 0.75rem 0;
  border-radius: var(--doc-radius-s);
  background: var(--doc-gray-5);
  overflow: hidden;
}

.doc-pdp2-step__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.doc-pdp2-step p { margin: 0.75rem 0 0; font-size: var(--font-size-s); }

/* ---------- 4.9 Delivery & returns ---------- */
.doc-pdp2-iconrow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  text-align: center;
}

@media (min-width: 768px) {
  .doc-pdp2-iconrow { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

.doc-pdp2-iconrow li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--font-size-xs);
  color: var(--doc-blue-1);
}

.doc-pdp2-iconrow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--doc-blue-3);
  overflow: hidden;
}

.doc-pdp2-iconrow__icon img { width: 60%; height: 60%; object-fit: contain; }

.doc-pdp2-policy { padding: 1rem 1.125rem; }
.doc-pdp2-policy .h3 { margin: 0 0 0.5rem; color: var(--doc-blue-1); }

/* ---------- 4.10 Specification table ---------- */
.doc-pdp2-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-s);
}

.doc-pdp2-spec-table th,
.doc-pdp2-spec-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--doc-gray-4);
  text-align: left;
  vertical-align: top;
}

.doc-pdp2-spec-table th {
  width: 40%;
  background: var(--doc-gray-5);
  color: var(--doc-blue-1);
  font-weight: 600;
}

@media (min-width: 768px) {
  .doc-pdp2-spec-table th { width: 25%; }
}

/* ---------- 4.11 Benefits ---------- */
.doc-pdp2-benefits__intro { margin-bottom: 1rem; }

.doc-pdp2-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
}

.doc-pdp2-benefit__icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--doc-green-1);
}

.doc-pdp2-benefit p {
  margin: 0;
  font-size: var(--font-size-s);
}

/* ---------- 4.12 FAQ accordion ---------- */
.doc-pdp2-faq__group {
  margin: 1.25rem 0 0.5rem;
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--doc-gray-2);
}

.doc-pdp2-faq__list { display: flex; flex-direction: column; gap: 0.6rem; }

.doc-pdp2-faq__item {
  border: 1px solid var(--doc-gray-4);
  border-radius: var(--doc-radius);
  background: #fff;
}

.doc-pdp2-faq__heading { margin: 0; font-size: inherit; }

.doc-pdp2-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--doc-blue-1);
  cursor: pointer;
}

.doc-pdp2-faq__q:focus-visible,
.doc-pdp2-faq__sources-toggle:focus-visible {
  outline: 2px solid var(--doc-blue-2);
  outline-offset: 2px;
}

.doc-pdp2-faq__chev {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.doc-pdp2-faq__q[aria-expanded="true"] .doc-pdp2-faq__chev { transform: rotate(-135deg); }

.doc-pdp2-faq__a { padding: 0 1.1rem 1rem; }

.doc-pdp2-faq__sources-toggle {
  margin-top: 0.5rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--doc-blue-2);
  text-decoration: underline;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.doc-pdp2-faq__sources {
  margin: 0.4rem 0 0;
  padding-left: 1.25rem;
  font-size: var(--font-size-xs);
}

.doc-pdp2-faq__by {
  margin: 0.6rem 0 0;
  font-size: var(--font-size-xs);
  color: var(--doc-gray-2);
}

.doc-pdp2-faq__by a { font-weight: 600; color: var(--doc-blue-1); }

@media (prefers-reduced-motion: reduce) {
  .doc-pdp2-faq__chev { transition: none; }
}

/* ---------- 4.15 Related articles / blog ---------- */
.doc-pdp2-article a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--doc-blue-1);
  text-decoration: none;
}

/* Tint shows through when a post has no featured image (keeps the cards aligned). */
.doc-pdp2-article .doc-pdp2-card__media {
  background: linear-gradient(135deg, var(--doc-blue-3), #dce9f8);
}

.doc-pdp2-article .h4 {
  margin: 0;
  padding: 0.75rem 0.9rem 0.9rem;
  font-size: var(--font-size-s);
  font-weight: 700;
  line-height: 1.35;
}

.doc-pdp2-article a:hover .h4 { text-decoration: underline; }

.doc-pdp2-article a:focus-visible {
  outline: 2px solid var(--doc-blue-2);
  outline-offset: 2px;
}

/* ---------- 4.5 Sticky bar additions ---------- */
.doc-pdp2-sticky-meta {
  font-size: var(--font-size-xs);
  opacity: 0.9;
}

/* .bottom-cart-inner is nowrap in style.css; let the price sit on its own line below desktop */
@media (max-width: 1023px) {
  .doc-pdp2 .bottom-cart-inner { flex-wrap: wrap; row-gap: 0.35rem; padding-top: 0.6rem; }
}

.doc-pdp2-sticky-price--mobile {
  flex-basis: 100%;
  color: #fff;
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-align: center;
}

.doc-pdp2-sticky-price--mobile:empty { display: none; }

/* ==========================================================================
   Mobile + small tablets (≤ 900px) — enhanced product pages only
   (this file only loads on them, so these rules don't reach other pages).
   ========================================================================== */
@media (max-width: 900px) {
  /* Text 5% smaller: the theme sizes type in rem, so scale the root. */
  html { font-size: 95%; }

  /* No breadcrumbs (header.php .breadcrumbs-wrapper). */
  .breadcrumbs-wrapper { display: none; }

  /* Slightly smaller sticky header. The height is the theme's
     --side-header-container (4.375rem); sticky offsets that use it follow. */
  :root { --side-header-container: 4.125rem; }

  .site-branding { flex-basis: 70px; }

  .site-header .doc-logo {
    width: 70px;
    height: auto;
  }

  .site-header .main svg {
    width: 22px;
    height: 22px;
  }
}

/* Mobile: the hero's quantity / Add to cart / Buy Now duplicate the sticky
   bottom bar (.bottom-cart), so only the vouchers stay. The buttons are hidden,
   not removed: the sticky bar clicks them (inc/woo-single-product.php,
   initStickyCart), so add to cart / buy now / the qty sync keep working. */
@media (max-width: 767px) {
  .cart-section form.cart .number-button,
  .cart-section form.cart .single_add_to_cart_button,
  .cart-section form.cart .ts-buy-now-button,
  .cart-section form.cart #awx-express-checkout-button-separator {
    display: none !important;
  }
}

/* Product title ~5% smaller than the theme's h1 (1.8rem, adhistrap.css), all
   viewports. On ≤ 900px the 95% root size above applies on top of this. */
h1.product-title { font-size: 1.71rem; }