/*
 * Ecwid storefront overrides.
 *
 * PHILOSOPHY: keep this as small as we can get away with. Ecwid ships
 * frequent updates, and heavy CSS overrides are the #1 thing that breaks
 * after an Ecwid release. When Ecwid's own Design panel would have worked,
 * we'd prefer it — but this site's plan doesn't expose the full color picker,
 * so brand styling lives here instead.
 *
 * All selectors are scoped to `.ec-store` which is Ecwid's stable root
 * wrapper. If a selector ever stops matching after an Ecwid update, the
 * storefront will just fall back to Ecwid defaults — it won't break.
 *
 * LOADS ONLY WHEN NEEDED: inc/enqueue.php restricts this stylesheet to
 * pages that use the Store template OR contain an Ecwid block.
 */

/* ======================================================================
 * LAYOUT
 * ==================================================================== */

/* Give the Ecwid block room to breathe and match our container. */
.shop-page .wp-block-ecwid,
.shop-page .ecwid-integration,
.shop-page > div > .wp-block-group {
	max-width: var(--cf-container-max);
	margin-inline: auto;
	padding: var(--cf-space-12) var(--cf-container-pad);
}

/* ~20px side gutters on the storefront, category, search, and product
   pages so the catalog, filters, and product detail don't run flush to
   the page edge. Bumps to 32px on wider screens. */
.ec-store,
.ec-store__main,
.ec-store .ec-size,
.ec-store .ec-store__category-page,
.ec-store .ec-store__search-page,
.ec-store .ec-store__product-page {
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.ec-store,
	.ec-store__main,
	.ec-store .ec-size,
	.ec-store .ec-store__category-page,
	.ec-store .ec-store__search-page,
	.ec-store .ec-store__product-page {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}


/* ======================================================================
 * TYPOGRAPHY INHERITANCE
 * ==================================================================== */

.ec-store,
.ec-store * {
	font-family: var(--cf-font-body, sans-serif) !important;
}

.ec-store h1,
.ec-store h2,
.ec-store h3,
.ec-store .ec-header-h1,
.ec-store .ec-header-h2,
.ec-store .ec-header-h3,
.ec-store .grid-product__title,
.ec-store .details-product__title {
	font-family: var(--cf-font-subheading, serif) !important;
	color: var(--cf-deep-plum) !important;
}


/* ======================================================================
 * COLORS — BUTTONS
 * Primary "Add to bag", "Buy Now", "Checkout" buttons.
 * We target the widest stable button selectors Ecwid uses.
 * ==================================================================== */

.ec-store .form-control__button--primary,
.ec-store .button--primary,
.ec-store .btn-primary,
.ec-store .details-product-purchase__controls button,
.ec-store .ec-cart__button,
.ec-store .button--complete,
.ec-store .form-control__button--action {
	background-color: var(--cf-salmon) !important;
	border-color: var(--cf-salmon) !important;
	color: #ffffff !important;
	border-radius: var(--cf-radius) !important;
	font-weight: 500 !important;
	transition: background-color var(--cf-transition), border-color var(--cf-transition) !important;
}

.ec-store .form-control__button--primary:hover,
.ec-store .button--primary:hover,
.ec-store .btn-primary:hover,
.ec-store .details-product-purchase__controls button:hover,
.ec-store .ec-cart__button:hover,
.ec-store .button--complete:hover,
.ec-store .form-control__button--action:hover,
.ec-store .form-control__button--primary:focus,
.ec-store .button--primary:focus {
	background-color: var(--cf-peach) !important;
	border-color: var(--cf-peach) !important;
	color: #ffffff !important;
}

/* Secondary / tertiary buttons (ghost look on our site). */
.ec-store .form-control__button--secondary,
.ec-store .button--secondary {
	background-color: transparent !important;
	border: 2px solid var(--cf-deep-plum) !important;
	color: var(--cf-deep-plum) !important;
	border-radius: var(--cf-radius) !important;
}
.ec-store .form-control__button--secondary:hover,
.ec-store .button--secondary:hover {
	background-color: var(--cf-deep-plum) !important;
	color: #ffffff !important;
}


/* ======================================================================
 * COLORS — LINKS
 * ==================================================================== */

.ec-store a:not(.form-control__button):not(.button):not(.grid-product),
.ec-store .ec-link {
	color: var(--cf-berry) !important;
	text-decoration: none;
}
.ec-store a:not(.form-control__button):not(.button):not(.grid-product):hover,
.ec-store a:not(.form-control__button):not(.button):not(.grid-product):focus,
.ec-store .ec-link:hover {
	color: var(--cf-salmon) !important;
}


/* ======================================================================
 * COLORS — PRICES
 * ==================================================================== */

.ec-store .grid-product__price,
.ec-store .grid-product__price-amount,
.ec-store .details-product-price,
.ec-store .ec-price,
.ec-store .ec-price-item {
	color: var(--cf-deep-plum) !important;
	font-family: var(--cf-font-body) !important;
	font-weight: 500 !important;
}

/* Sale / original price markdown — keep Ecwid's strike-through but tint it. */
.ec-store .grid-product__price--old,
.ec-store .ec-price-item--old {
	color: rgba(72, 44, 77, 0.5) !important;
}

/* New "sale" badge tint. */
.ec-store .grid-product__sale-flag,
.ec-store .details-product-badge {
	background-color: var(--cf-salmon) !important;
	color: #ffffff !important;
}


/* ======================================================================
 * PRODUCT CARDS
 * ==================================================================== */

.ec-store .grid-product,
.ec-store .grid-product__wrap {
	border-radius: var(--cf-radius-lg) !important;
	overflow: hidden;
	transition: transform var(--cf-transition), box-shadow var(--cf-transition);
}
.ec-store .grid-product:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(72, 44, 77, 0.08);
}

.ec-store .grid-product__title {
	color: var(--cf-deep-plum) !important;
}


/* ======================================================================
 * FORMS (qty spinner, search, filters, checkout fields)
 * ==================================================================== */

.ec-store input[type="text"],
.ec-store input[type="email"],
.ec-store input[type="tel"],
.ec-store input[type="number"],
.ec-store input[type="search"],
.ec-store textarea,
.ec-store select {
	border-radius: var(--cf-radius-sm) !important;
	border-color: var(--cf-border) !important;
}
.ec-store input[type="text"]:focus,
.ec-store input[type="email"]:focus,
.ec-store input[type="tel"]:focus,
.ec-store input[type="number"]:focus,
.ec-store input[type="search"]:focus,
.ec-store textarea:focus,
.ec-store select:focus {
	border-color: var(--cf-berry) !important;
	box-shadow: 0 0 0 3px rgba(119, 77, 125, 0.15) !important;
}


/* ======================================================================
 * ACCESSIBILITY
 * ==================================================================== */

/* Empty page-title H1 — Ecwid's storefront widget renders
 * <h1 class="page-title__name ec-header-h1"> even when it has no title
 * text (e.g. on the top-level storefront landing view). WAVE / axe flag
 * empty headings as errors. Hide when empty so it drops out of the
 * accessibility tree. Ecwid populates the H1 with a real title on
 * category and product detail pages, which will still render normally. */
.ec-store .page-title__name.ec-header-h1:empty,
.ec-store h1.ec-header-h1:empty,
.ec-store .page-title:empty,
.ec-store .page-title__name:empty {
	display: none !important;
}

/* Focus states — Ecwid's default focus outline is sometimes faint;
 * match our brand's Salmon focus ring. */
.ec-store a:focus-visible,
.ec-store button:focus-visible,
.ec-store input:focus-visible,
.ec-store select:focus-visible {
	outline: 2px solid var(--cf-accent) !important;
	outline-offset: 2px !important;
}


/* ======================================================================
 * CART / CHECKOUT BADGES + ACCENTS
 * ==================================================================== */

/* Small accent strip / divider colors. */
.ec-store hr,
.ec-store .ec-form__divider {
	border-color: var(--cf-border) !important;
}

/* Cart item count pill (different location from our header badge). */
.ec-store .ec-cart-widget__count,
.ec-store .ec-minicart__counter {
	background: var(--cf-salmon) !important;
	color: #ffffff !important;
}