/**
 * Sibling discount product-page styles.
 *
 * Colours are the live store's own tokens, not new ones:
 *   #2B5D9A  link / accent      (2026-storefront-child-theme .button, Elementor accent)
 *   #1e4a7a  darker blue        (child theme button hover)
 * Type is inherited from the theme (Lora / Georgia / serif) on purpose — the block
 * should read as part of the page, not as an injected widget.
 */

.cc-sd-owner-block {
	margin: 0 0 22px;
	padding: 15px 18px;
	background: #E9F0F8;
	border-radius: 5px;
}

/* The accent border is declared for every interaction state and marked
   !important because a theme/composite hover rule strips it on hover — without
   this the blue bar vanishes as soon as the cursor enters the block. */
.cc-sd-owner-block,
.cc-sd-owner-block:hover,
.cc-sd-owner-block:focus,
.cc-sd-owner-block:focus-within {
	border-left: 4px solid #2B5D9A !important;
}

.cc-sd-owner-block .cc-sd-owner-tag {
	display: inline-block;
	margin: 0 0 9px;
	padding: 3px 10px;
	border-radius: 3px;
	background: #2B5D9A;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cc-sd-owner-block p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
}

.cc-sd-owner-block p + p {
	margin-top: 8px;
}

/* Escape Elementor's price row.

   This block is rendered on woocommerce_after_add_to_cart_form, which fires INSIDE
   Elementor's add-to-cart widget. That widget sits in a `flex-direction: row;
   flex-wrap: nowrap` container alongside the product-price widget, so the block was
   confined to the add-to-cart column. Measured on the live Middle School Literature
   page: a 545px row split into a 160px price column and a 272px cart column, with
   this block rendering 405px wide — overflowing its own column, crowding the Add to
   Cart button, and squeezing the price enough to break "$90.00 per student" onto two
   lines.

   Letting the row wrap and giving the add-to-cart widget a full-width row puts the
   price back on one line and lets this block use the container's full width.

   :has() is load-bearing here: the flex parent is Elementor-authored markup that this
   plugin neither renders nor can add a class to, so there is nothing else to hook. It
   is also what scopes these rules to pages where the block is actually present —
   every product page without it is untouched. Browsers without :has() (Firefox < 121)
   keep the previous layout: degraded, not broken. */
.e-con:has(.cc-sd-owner-block) {
	flex-wrap: wrap !important;
}

.elementor-widget-woocommerce-product-add-to-cart:has(.cc-sd-owner-block) {
	flex: 1 1 100% !important;
}

/* The form holds the quantity input and the Add to Cart button, which stop being
   side by side once the widget is full width. */
.elementor-add-to-cart:has(.cc-sd-owner-block) form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cc-sd-owner-block {
	width: 100%;
	box-sizing: border-box;
	margin-top: 16px;
}

.cc-sd-owner-block a {
	color: #2B5D9A;
}

/* The quiet line for parents who have not bought this course yet. Sits inside the
   existing licensing paragraph via [cc_sibling_note], so it deliberately carries
   almost no styling of its own. */
.cc-sd-note {
	display: block;
	margin-top: 3px;
}

.cc-sd-note a {
	color: #2B5D9A;
}

/* Cart line label. Inline colour is also set in PHP so the label survives on
   templates that do not enqueue this stylesheet (FunnelKit renders its own). */
.cc-sd-item-discount {
	color: #2B5D9A;
}