/*
 * Single Product "Other names" highlight block (Suntech Engine 0.19.429).
 * Purpose: render the description's "Other names for the same part
 * (good to know)" section as a separate, instantly recognisable
 * template-style block — NOT plain description text. The transform
 * itself lives in single-product-other-names.js; this stylesheet only
 * styles its .stm-other-names-block output.
 * Related files:
 * - modules/storefront/assets/js/single-product-other-names.js (finds
 *   the exact H2 section and wraps it in .stm-other-names-block with
 *   the "SAME PART · DIFFERENT NAMES" eyebrow)
 * - modules/storefront/features/woocommerce/single-product.php (assets()
 *   enqueues this file on is_product() only, after stm-single-product-style)
 * - modules/storefront/assets/css/commerce-primitives.min.css (defines the
 *   --stm-commerce-* variables reused below; no hardcoded colors here)
 * Rules honoured: flat design only (no box-shadow, no backdrop-filter
 * blur, no drop shadows); colors only from the Engine's existing CSS
 * variables / global wiring. With JavaScript disabled the block never
 * exists, so the original H2 + paragraph stay readable as plain text —
 * nothing is hidden by CSS alone.
 * Scope note: the selectors repeat the three possible description
 * containers (same resolution as the JS) so the block is styled
 * wherever the description tab renders, and nowhere else.
 */

/* The block itself: 1px global border, 8px brand-orange left accent
   (0.19.429: thickened from 5px), warm-tinted background — 8% brand
   primary mixed into the global surface, so the block reads as
   highlighted, clearly stronger than the old plain surface, but still
   light and readable. First declaration is the plain-surface fallback
   for browsers without color-mix. Mockup padding kept. */
#tab-description .stm-other-names-block,
.woocommerce-Tabs-panel--description .stm-other-names-block,
.stm-single-tabs .stm-other-names-block {
  margin: 10px 0 28px;
  padding: 16px 18px;
  border: 1px solid var(--stm-commerce-border);
  border-left: 8px solid var(--stm-commerce-primary);
  background: var(--stm-commerce-surface);
  background: color-mix(in srgb, var(--stm-commerce-primary) 8%, var(--stm-commerce-surface));
}

/* Small eyebrow label above the heading — this is what makes the block
   instantly recognisable as "same part, different names". */
#tab-description .stm-other-names-eyebrow,
.woocommerce-Tabs-panel--description .stm-other-names-eyebrow,
.stm-single-tabs .stm-other-names-eyebrow {
  margin-bottom: 4px;
  color: var(--stm-commerce-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

/* Heading and text sit tight inside the block (no extra block margins
   doubling the padding). The heading keeps the uniform description
   size; only its margins are scoped here. */
#tab-description .stm-other-names-block > h2,
.woocommerce-Tabs-panel--description .stm-other-names-block > h2,
.stm-single-tabs .stm-other-names-block > h2 {
  margin: 0 0 8px;
}

#tab-description .stm-other-names-block > p:last-child,
.woocommerce-Tabs-panel--description .stm-other-names-block > p:last-child,
.stm-single-tabs .stm-other-names-block > p:last-child {
  margin-bottom: 0;
}