/* Smart Product CTA - appearance system.
   THEME-FIRST PRINCIPLE (architecture correction): the active theme
   owns padding, typography, border radius, transitions, shadows,
   height, and general button appearance via its own ".button" class
   styling. This stylesheet supplies ONLY what MCP is actually
   responsible for: layout structure (alignment/width/wrapping) and
   OPT-IN color overrides, emitted only when an administrator has
   explicitly configured a color. Nothing here duplicates padding,
   font-sizing, border-radius, shadows, or transitions unless a
   specific, explicit admin-configured preset requires it. */

/* ==================== SHOP SURFACE ==================== */

.mcp-shop-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.mcp-shop-actions--align-left    { justify-content: flex-start; }
.mcp-shop-actions--align-center  { justify-content: center; }
.mcp-shop-actions--align-right   { justify-content: flex-end; }
.mcp-shop-actions--align-stretch { justify-content: stretch; }
.mcp-shop-actions--align-theme   { justify-content: flex-start; }

.mcp-shop-actions--layout-stacked {
	flex-direction: column;
	align-items: stretch;
}

.mcp-shop-actions--width-equal > .mcp-product-action,
.mcp-shop-actions--width-equal > .mcp-product-learn-more,
.mcp-shop-actions--width-full > .mcp-product-action,
.mcp-shop-actions--width-full > .mcp-product-learn-more,
.mcp-shop-actions--align-stretch > .mcp-product-action,
.mcp-shop-actions--align-stretch > .mcp-product-learn-more {
	flex: 1 1 0;
	text-align: center;
}
.mcp-shop-actions--width-full { width: 100%; }

.mcp-shop-actions--gap-none   { gap: 0; }
.mcp-shop-actions--gap-small  { gap: 6px; }
.mcp-shop-actions--gap-medium { gap: 12px; }
.mcp-shop-actions--gap-large  { gap: 20px; }

/* Button size presets - explicit, named, admin-configured only (never
   applied unless "size" is set to something other than "theme"). */
.mcp-shop-actions--size-small .mcp-product-action,
.mcp-shop-actions--size-small .mcp-product-learn-more { padding: 4px 10px; font-size: 12px; }
.mcp-shop-actions--size-medium .mcp-product-action,
.mcp-shop-actions--size-medium .mcp-product-learn-more { padding: 8px 16px; font-size: 14px; }
.mcp-shop-actions--size-large .mcp-product-action,
.mcp-shop-actions--size-large .mcp-product-learn-more { padding: 12px 22px; font-size: 16px; }

.mcp-shop-actions--radius-square  .mcp-product-action, .mcp-shop-actions--radius-square  .mcp-product-learn-more { border-radius: 0; }
.mcp-shop-actions--radius-slight  .mcp-product-action, .mcp-shop-actions--radius-slight  .mcp-product-learn-more { border-radius: 3px; }
.mcp-shop-actions--radius-rounded .mcp-product-action, .mcp-shop-actions--radius-rounded .mcp-product-learn-more { border-radius: 8px; }
.mcp-shop-actions--radius-pill    .mcp-product-action, .mcp-shop-actions--radius-pill    .mcp-product-learn-more { border-radius: 999px; }

/* Vertical card alignment - scoped strictly to product cards that
   actually contain an MCP action; :has() degrades gracefully. */
ul.products li.product:has(.mcp-shop-actions--valign-bottom) {
	display: flex;
	flex-direction: column;
}
.mcp-shop-actions--valign-bottom {
	margin-top: auto;
}

.mcp-product-action,
.mcp-product-learn-more {
	text-decoration: none;
}

/* Opt-in color overrides (Shop) - "revert" fallback (not "unset")
   correctly defers to the theme's own computed value when no color
   is configured, whether or not this rule would otherwise win
   specificity. The narrow !important ensures a genuinely configured
   color reliably overrides a theme's own, often more specific,
   WooCommerce loop-button selector. Scoped strictly to these
   selectors - never a global .button rule. */
.mcp-shop-actions .mcp-product-action {
	background-color: var(--mcp-primary-bg, revert) !important;
	color: var(--mcp-primary-text, revert) !important;
	border-color: var(--mcp-primary-border, revert) !important;
}
.mcp-shop-actions .mcp-product-action:hover,
.mcp-shop-actions .mcp-product-action:focus-visible {
	background-color: var(--mcp-primary-hover-bg, revert) !important;
	color: var(--mcp-primary-hover-text, revert) !important;
	border-color: var(--mcp-primary-hover-border, revert) !important;
}
.mcp-shop-actions .mcp-product-learn-more {
	background-color: var(--mcp-secondary-bg, revert) !important;
	color: var(--mcp-secondary-text, revert) !important;
	border-color: var(--mcp-secondary-border, revert) !important;
}
.mcp-shop-actions .mcp-product-learn-more:hover,
.mcp-shop-actions .mcp-product-learn-more:focus-visible {
	background-color: var(--mcp-secondary-hover-bg, revert) !important;
	color: var(--mcp-secondary-hover-text, revert) !important;
	border-color: var(--mcp-secondary-hover-border, revert) !important;
}

.mcp-product-action--blocked { filter: saturate(0.85); }
.mcp-product-action--unavailable { opacity: 0.6; pointer-events: none; }

@media (max-width: 480px) {
	.mcp-shop-actions--layout-inline {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ==================== CUSTOM PAGE SURFACE (shortcode) ==================== */
/* Deliberately minimal - the active theme's own .button class provides
   padding/typography/radius/shadows/transitions/hover-animation by
   default. This wrapper controls ONLY layout (width/alignment) and,
   when an admin explicitly configures a size other than fitting the
   theme, a small set of named size presets - never arbitrary values. */

.mcp-custom-cta-wrap {
	display: block;
}
.mcp-custom-cta-wrap--left    { text-align: left; }
.mcp-custom-cta-wrap--center  { text-align: center; }
.mcp-custom-cta-wrap--right   { text-align: right; }
.mcp-custom-cta-wrap--stretch { text-align: center; }

.mcp-custom-cta-wrap--auto .mcp-custom-cta-button {
	display: inline-block;
}
.mcp-custom-cta-wrap--full .mcp-custom-cta-button,
.mcp-custom-cta-wrap--stretch .mcp-custom-cta-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* Named size presets - "hero" is the default, chosen to visually
   approximate the existing static Elementor "Get Started" button this
   shortcode replaces (per the explicit backward-compatibility
   requirement) - a modest, sensible size only, no hardcoded color. */
.mcp-custom-cta-wrap--small .mcp-custom-cta-button  { padding: 8px 14px; font-size: 13px; }
.mcp-custom-cta-wrap--medium .mcp-custom-cta-button { padding: 12px 20px; font-size: 15px; }
.mcp-custom-cta-wrap--large .mcp-custom-cta-button  { padding: 16px 28px; font-size: 17px; }
.mcp-custom-cta-wrap--hero .mcp-custom-cta-button   { padding: 18px 32px; font-size: 18px; text-align: center; }

.mcp-custom-cta-button__label {
	display: inline-block;
}

.mcp-custom-cta-button--radius-square  { border-radius: 0; }
.mcp-custom-cta-button--radius-slight  { border-radius: 4px; }
.mcp-custom-cta-button--radius-rounded { border-radius: 10px; }
.mcp-custom-cta-button--radius-pill    { border-radius: 999px; }

.mcp-custom-cta-subtitle {
	margin-top: 6px;
	font-size: 13px;
	opacity: 0.8;
	text-align: inherit;
}

/* Opt-in color overrides (Custom Page / shortcode) - dedicated
   --mcp-shortcode-* variables, never the Shop --mcp-primary-*
   variables, scoped strictly to .mcp-custom-cta-wrap so a shortcode
   color change can never affect Shop buttons and vice versa. */
.mcp-custom-cta-wrap .mcp-custom-cta-button {
	background-color: var(--mcp-shortcode-bg, revert) !important;
	color: var(--mcp-shortcode-text, revert) !important;
	border-color: var(--mcp-shortcode-border, revert) !important;
}
.mcp-custom-cta-wrap .mcp-custom-cta-button:hover,
.mcp-custom-cta-wrap .mcp-custom-cta-button:focus-visible {
	background-color: var(--mcp-shortcode-hover-bg, revert) !important;
	color: var(--mcp-shortcode-hover-text, revert) !important;
	border-color: var(--mcp-shortcode-hover-border, revert) !important;
}