/*
 * Single Product "Shoppers names" highlight block (Suntech Engine 0.19.436).
 * Purpose: render the description's "Other Names Shoppers Use" section
 * (the names shoppers search this part by) as a separate, instantly
 * recognisable template-style block — NOT plain description text, and
 * deliberately DIFFERENT from the "Other names for the same part"
 * orange block, because it is different info: light-grey surface
 * (global surface-soft), no orange left accent, dark eyebrow.
 * The transform itself lives in single-product-shoppers-names.js; this
 * stylesheet only styles its .stm-shoppers-names-block output.
 * Related files:
 * - modules/storefront/assets/js/single-product-shoppers-names.js (finds
 *   the shoppers-names H2 section and wraps it in
 *   .stm-shoppers-names-block with the "SHOPPERS ALSO CALL IT" eyebrow)
 * - modules/storefront/assets/css/single-product-other-names.css (the
 *   orange same-part block; this block must never look like it)
 * - 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, light-grey surface, no accent
   bar — the plain grey + dark eyebrow is what sets it apart from the
   warm-tinted orange-accent same-part block. */
#tab-description .stm-shoppers-names-block,
.woocommerce-Tabs-panel--description .stm-shoppers-names-block,
.stm-single-tabs .stm-shoppers-names-block {
  margin: 10px 0 28px;
  padding: 16px 18px;
  border: 1px solid var(--stm-commerce-border);
  background: var(--stm-commerce-surface-soft, var(--stm-commerce-surface));
}

/* Small eyebrow label above the heading — dark (heading color), not
   orange, so the block never reads as the same-part block. */
#tab-description .stm-shoppers-names-eyebrow,
.woocommerce-Tabs-panel--description .stm-shoppers-names-eyebrow,
.stm-single-tabs .stm-shoppers-names-eyebrow {
  margin-bottom: 4px;
  color: var(--stm-commerce-heading);
  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-shoppers-names-block > h2,
.woocommerce-Tabs-panel--description .stm-shoppers-names-block > h2,
.stm-single-tabs .stm-shoppers-names-block > h2 {
  margin: 0 0 8px;
}

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