/**
 * Timbers "Starting from … / unit" catalogue price — one design, two card systems.
 *
 * The same price appears on two different cards:
 *   1. the lean card (.sr-pcard-price.is-from — sr_render_product_card), and
 *   2. the Elementor shop-loop card (a Heading widget whose dynamic price the
 *      sr-timbers-pricing filter decorates: .elementor-heading-title holding
 *      .sr-from-pre + .woocommerce-Price-amount + .sr-from-unit).
 *
 * Both render three parts — a quiet "Starting from" qualifier, a confident serif
 * figure with a gold currency mark, and a whispered unit. Styling both from ONE
 * grouped rule set here keeps them from drifting apart. Values are literal brand
 * colours (not the .sr-pcard-scoped --pc-* vars) so the shop card, which has no
 * .sr-pcard ancestor, renders identically. Loaded site-wide by the pricing module.
 */

/* Shared: figure size (single-sourced, see the Elementor override below) + alignment. */
.sr-pcard-price.is-from,
.elementor-heading-title:has(> .sr-from-pre) {
  --tprice-fig: 29px;
  text-align: left;
}

/* Lean card: flex column — qualifier row, then the figure+unit row (amount and unit
   are wrapped together in .sr-pcard-now, so they share a line). */
.sr-pcard-price.is-from {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  line-height: 1;
}

/* Shop card: Elementor renders this price Heading as a flex column, which stacks the
   three spans and blockifies them. Force normal block flow with a selector that
   outweighs Elementor's, so the qualifier takes its own line while the amount and unit,
   both inline, stay together on the line below. */
.e-loop-item .elementor-widget.elementor-widget-heading .elementor-heading-title:has(> .sr-from-pre) {
  display: block;
  line-height: 1;
}
.elementor-heading-title:has(> .sr-from-pre) .sr-from-pre {
  margin-bottom: 6px;
}

/* Qualifier — a micro-label, deliberately quieter than the category eyebrow. */
.sr-pcard-price.is-from .sr-pcard-pre,
.elementor-heading-title:has(> .sr-from-pre) .sr-from-pre {
  display: block;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9a8c70;
}

/* Figure — confident Cormorant, lining + tabular so it reads as a price. */
.sr-pcard-price.is-from .sr-pcard-now .amount,
.elementor-heading-title:has(> .sr-from-pre) .woocommerce-Price-amount {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: var(--tprice-fig);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.012em;
  color: #E9E2D5;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Elementor forces the shop amount to `font-size: inherit` at a higher specificity
   than the grouped rule above, so it would shrink to the heading's own size. Re-assert
   the figure size with a loop-item-scoped selector that outweighs Elementor's. */
.e-loop-item .elementor-widget-heading .elementor-heading-title:has(> .sr-from-pre) .woocommerce-Price-amount {
  font-size: var(--tprice-fig);
}
/* Keep the amount and unit inline so they share a line, not stacked by the forced flex. */
.e-loop-item .elementor-widget-heading .elementor-heading-title:has(> .sr-from-pre) .woocommerce-Price-amount,
.e-loop-item .elementor-widget-heading .elementor-heading-title:has(> .sr-from-pre) .sr-from-unit {
  display: inline;
}

/* Currency mark — brand gold, set smaller than the figure: a price-tag two-tone. */
.sr-pcard-price.is-from .woocommerce-Price-currencySymbol,
.elementor-heading-title:has(> .sr-from-pre) .woocommerce-Price-currencySymbol {
  font-size: .56em;
  font-weight: 600;
  color: #B69869;
  margin-right: .07em;
}

/* Unit — a quiet serif continuation, clearly secondary to the amount. */
.sr-pcard-price.is-from .sr-pcard-unit,
.elementor-heading-title:has(> .sr-from-pre) .sr-from-unit {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #9a8c70;
  margin-left: 5px;
  white-space: nowrap;
}

/* Lean card only: warm the figure a shade with the card's hover choreography. */
.sr-pcard:hover .sr-pcard-price.is-from .sr-pcard-now .amount {
  color: #F3EDE1;
  transition: color .5s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .sr-pcard:hover .sr-pcard-price.is-from .sr-pcard-now .amount { transition: none; }
}