/* Dravik — Single Product
   Part of the Dravik design system. Loaded by functions.php (see enqueue order).
   Polish pass 2026-07-22: About-consistent rhythm, structured title hierarchy,
   documentation trust component, related row matching the Shop cards.
*/

/* ==========================================================================
   PAGE FRAME — product sits on the page background (Dravik visual system;
   overrides the global article-card panel on single product pages only)
   ========================================================================== */

.single-product .ast-article-single {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.single-product .site-content {
  padding-top: var(--dravik-space-8);
}

.single-product .woocommerce-breadcrumb {
  color: var(--dravik-text-dim);
  font-size: var(--dravik-text-sm);
  margin-bottom: var(--dravik-space-6);
}

.single-product .woocommerce-breadcrumb a {
  color: var(--dravik-text-dim);
}

.single-product .woocommerce-breadcrumb a:hover {
  color: var(--dravik-accent);
}

/* ==========================================================================
   GALLERY — framed, consistent presentation across all products
   ========================================================================== */

.woocommerce div.product .woocommerce-product-gallery {
  margin-bottom: var(--dravik-space-8);
}

.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: var(--dravik-radius-lg);
  border: 1px solid var(--dravik-border);
  width: 100%;
  height: auto;
}

/* ==========================================================================
   SUMMARY — image-to-content balance + block rhythm
   ========================================================================== */

.woocommerce div.product div.summary {
  padding-left: var(--dravik-space-8);
}

/* Structured H1: designation + quantity (Dravik_Shop::dravik_split_title) */
.woocommerce div.product .product_title {
  font-size: var(--dravik-text-4xl);
  line-height: var(--dravik-leading-tight);
  color: var(--dravik-heading);
}

.woocommerce div.product .product_title .dravik-product-designation {
  display: block;
  letter-spacing: 0.02em;
}

.woocommerce div.product .product_title .dravik-product-quantity {
  display: block;
  margin-top: var(--dravik-space-3);
  font-size: var(--dravik-text-sm);
  font-weight: 600;
  letter-spacing: var(--dravik-tracking-wide);
  text-transform: uppercase;
  color: var(--dravik-accent);
}

.woocommerce div.product p.price {
  color: var(--dravik-accent);
  font-size: var(--dravik-text-xl);
  font-weight: 600;
  margin-top: var(--dravik-space-6);
}

/* Pre-launch status (rendered where the price would sit) */
.dravik-product-status-single {
  display: inline-block;
  margin: var(--dravik-space-6) 0 0;
  padding: var(--dravik-space-2) var(--dravik-space-4);
  border: 1px solid var(--dravik-border);
  border-radius: var(--dravik-radius-full);
  color: var(--dravik-text-dim);
  font-size: var(--dravik-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Product meta (SKU / category) kept quiet */
.woocommerce div.product .product_meta {
  color: var(--dravik-text-dim);
  font-size: var(--dravik-text-sm);
  margin-top: var(--dravik-space-8);
}

.woocommerce div.product .product_meta a {
  color: var(--dravik-text);
}

/* ==========================================================================
   RESEARCH-USE NOTICE (shared disclaimer part, compact mode)
   ========================================================================== */

.dravik-research-notice {
  margin-top: var(--dravik-space-8);
  padding: var(--dravik-space-6);
  border: 1px solid color-mix(in srgb, var(--dravik-accent) 25%, var(--dravik-border));
  border-radius: var(--dravik-radius);
  background: var(--dravik-surface-deep);
}

.dravik-research-notice-label {
  display: block;
  margin-bottom: var(--dravik-space-2);
  color: var(--dravik-accent);
  font-size: var(--dravik-text-xs);
  font-weight: 600;
  letter-spacing: var(--dravik-tracking-wide);
  text-transform: uppercase;
}

.dravik-research-notice .dravik-disclaimer-text {
  margin: 0;
  color: var(--dravik-text-dim);
  font-size: var(--dravik-text-sm);
  line-height: var(--dravik-leading-normal);
}

/* ==========================================================================
   DOCUMENTATION COMPONENT — trust element
   Rows (availability / batch / PDF / last updated) render only when real
   values exist; the pending state is the approved neutral wording.
   ========================================================================== */

.dravik-product-documentation {
  margin-top: var(--dravik-space-12);
  padding: var(--dravik-space-6);
  border: 1px solid var(--dravik-border);
  border-radius: var(--dravik-radius-lg);
  background: var(--dravik-surface-deep);
}

.dravik-product-documentation-title {
  margin: 0 0 var(--dravik-space-4);
  font-size: var(--dravik-text-lg);
  color: var(--dravik-heading);
}

.dravik-doc-rows {
  margin: 0 0 var(--dravik-space-4);
  border-top: 1px solid var(--dravik-border);
}

.dravik-doc-row {
  display: flex;
  gap: var(--dravik-space-4);
  padding: var(--dravik-space-3) 0;
  border-bottom: 1px solid var(--dravik-border);
}

.dravik-doc-row dt {
  flex: 0 0 8.5rem;
  margin: 0;
  color: var(--dravik-text-dim);
  font-size: var(--dravik-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.15em;
}

.dravik-doc-row dd {
  margin: 0;
  color: var(--dravik-text);
  font-size: var(--dravik-text-sm);
  line-height: var(--dravik-leading-normal);
}

.dravik-doc-row dd a {
  color: var(--dravik-accent);
}

.dravik-product-documentation p {
  margin: 0 0 var(--dravik-space-4);
  color: var(--dravik-text-dim);
  font-size: var(--dravik-text-sm);
  line-height: var(--dravik-leading-normal);
}

.dravik-product-documentation .dravik-cta-button {
  display: inline-block;
  padding: var(--dravik-space-2) var(--dravik-space-6);
  border-radius: var(--dravik-radius);
  border: 1px solid var(--dravik-border);
  background: transparent;
  color: var(--dravik-heading);
  font-size: var(--dravik-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dravik-duration-fast) var(--dravik-ease),
              color var(--dravik-duration-fast) var(--dravik-ease);
}

.dravik-product-documentation .dravik-cta-button:hover {
  border-color: var(--dravik-accent);
  color: var(--dravik-accent);
}

.dravik-product-documentation .dravik-cta-button:focus-visible {
  outline: none;
  box-shadow: var(--dravik-glow-accent);
}

/* ==========================================================================
   TABS + RELATED — About-consistent section rhythm
   ========================================================================== */

.woocommerce div.product .woocommerce-tabs {
  margin-top: var(--dravik-space-16);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--dravik-surface);
  border: 1px solid var(--dravik-border);
  border-radius: var(--dravik-radius) var(--dravik-radius) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--dravik-surface);
}

.woocommerce div.product .related.products {
  margin-top: var(--dravik-space-24);
}

.woocommerce div.product .related.products > h2 {
  color: var(--dravik-heading);
  font-size: var(--dravik-text-2xl);
  text-align: center;
  margin-bottom: var(--dravik-space-12);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 921px) {
  .woocommerce div.product div.summary {
    padding-left: 0;
    margin-top: var(--dravik-space-8);
  }
}

@media (max-width: 767px) {
  .woocommerce div.product .product_title {
    font-size: var(--dravik-text-3xl);
  }

  .single-product .site-content {
    padding-top: var(--dravik-space-4);
  }

  .dravik-product-documentation {
    margin-top: var(--dravik-space-8);
    padding: var(--dravik-space-4);
  }

  .dravik-doc-row {
    flex-direction: column;
    gap: var(--dravik-space-1);
  }

  .dravik-doc-row dt {
    flex: none;
  }

  .woocommerce div.product .related.products {
    margin-top: var(--dravik-space-16);
  }

  /* Related row: one readable column on phones (was three cramped columns) */
  .single-product .related.products ul.products {
    grid-template-columns: 1fr !important;
  }
}