/**
 * Commerce7 theme variables — the tenant's own palette, ported verbatim from the source site.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * Commerce7 v2 themes every control it renders — radios, checkboxes, fields, buttons, links, the
 * side cart, checkout, modals, pills, progress bars, error and success states — from a block of
 * `--c7-*` custom properties, and ships stock defaults for all of them. The source overrides those
 * defaults with the block below, declared on `:root` in its own stylesheet.
 *
 * Without it the rebuild renders Commerce7's factory theme. The visible symptom that led here was
 * the variant radios on /collection/merchandise: identical markup and identical Commerce7 CSS on
 * both sites, but ours drew them in `#3860d6`, Commerce7's stock blue, against the source's
 * `#740a14`. Nothing was wrong with the radio CSS — only with the one variable feeding it. Every
 * other C7 control was off in the same way and for the same reason.
 *
 * Ported verbatim, in the source's own order, including the values that merely restate a
 * Commerce7 default: this is the block the source serves, and a reader comparing the two should
 * see the same list rather than have to work out which lines were judged redundant. No rem
 * conversion applies — the source already writes `--c7-font-size` in px.
 *
 * Loaded before the page-specific C7 stylesheets, and at priority 20 so it prints after
 * commerce7.css, whose own `:root` defaults it must outrank. Equal specificity, so order decides.
 *
 * The file also carries the button guard at the foot — the other half of "Commerce7 renders in the
 * source's palette", since the palette is useless on a control the theme has repainted.
 *
 * Two interactions worth knowing about, both already correct:
 *   - `--c7-primary-button-bg: #000000` is the source's black for C7's generic primary button
 *     (side cart, checkout). The green `#dbe4c4` add-to-cart in c7-collection.css carries the
 *     source's own `!important` and continues to win where it applies — matching the source, where
 *     the two buttons genuinely differ.
 *   - `--c7-cart-count-bg` is set here, and c7-header.css then removes the count pill's background
 *     outright, exactly as the source does.
 */

:root {
	--c7-page-width: 1300px;
	--c7-page-width-checkout: 1500px;
	--c7-font-family: "Montserrat", sans-serif;
	--c7-body-text-color: #000000;
	--c7-alt-text-color: #000000;
	--c7-font-size: 16px;
	--c7-font-size-sub: 14px;
	--c7-heading-font-family: "Montserrat", sans-serif;
	--c7-heading-text-color: #000000;
	--c7-heading-font-weight: bold;
	--c7-primary-color: #740a14;
	--c7-primary-color-text: #740a14;
	--c7-primary-color-dark: #740a14;
	--c7-primary-color-focus: #740a14;
	--c7-link-color: var(--c7-primary-color-text);
	--c7-bg: #ffffff;
	--c7-bg-alt: #ffffff;
	--c7-border-color: #dedfe3;
	--c7-border-radius: 4px;
	--c7-loading-bg: rgba(255, 255, 255, 0.5);
	--c7-modal-border-radius: 8px;
	--c7-modal-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
	--c7-overlay-bg: rgba(0, 0, 0, 0.1);
	--c7-progress-bar: var(--c7-primary-color);
	--c7-pill-bg: #dedfe3;
	--c7-pill-text-color: var(--c7-primary-color-text);
	--c7-field-bg: #ffffff;
	--c7-field-border-radius: 4px;
	--c7-field-border-color: #b2b2b8;
	--c7-field-focus-color: rgba(0, 0, 0, 0.07);
	--c7-field-option-selected-color: var(--c7-primary-color);
	--c7-field-option-focus-color: var(--c7-primary-color-focus);
	--c7-field-placeholder: #b2b2b8;
	--c7-field-dropdown-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.08);
	--c7-primary-button-bg: #000000;
	--c7-primary-button-bg-hover: rgba(0, 0, 0, 0.9);
	--c7-primary-button-text-color: #ffffff;
	--c7-alt-button-bg: #dedfe3;
	--c7-alt-button-bg-hover: rgba(222, 223, 227, 0.1);
	--c7-alt-button-text-color: #000000;
	--c7-button-border-radius: 4px;
	--c7-info-bg: #ffffff;
	--c7-error: #ca0505;
	--c7-error-bg: #ffebeb;
	--c7-warning: #fba213;
	--c7-warning-bg: #fff6e5;
	--c7-success: #016047;
	--c7-success-bg: #e8fcf7;
	--c7-header-text-color: #000000;
	--c7-notification: #ca0505;
	--c7-cart-count-bg: #000000;
	--c7-cart-count-bg-focus: #000000;
	--c7-cart-count-text-color: #ffffff;
	--c7-side-cart-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
	--c7-dropdown-border-radius: 8px;
	--c7-dropdown-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.15);
	--c7-dropdown-hover: #dedfe3;
	--c7-block-bg: var(--c7-bg);
	--c7-block-border-color: var(--c7-border-color);
	--c7-block-border-radius: var(--c7-border-radius);
	--c7-block-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.3);
}

/* ---- keeping Commerce7's buttons out of hello-elementor's reset ---- */

/**
 * hello-elementor's reset.css styles every button on the site:
 *
 *     [type=button], [type=submit], button { background-color: transparent;
 *                                            border: 1px solid #c36; color: #c36; ... }
 *
 * Commerce7 renders its buttons as `<button type="submit" class="c7-btn c7-btn--primary">`, so
 * `[type=submit]` matches at 0-1-0 — exactly tying C7's own `.c7-btn--primary` — and the reset
 * loads later, so it wins. Every C7 button outside a product card came out transparent with
 * #c36 text where the source has solid black: login, register, checkout, the side cart.
 *
 * Only the BASE state is affected. C7's hover rule is
 * `.c7-btn--primary:not([disabled]):hover` at 0-3-0 and already beats the reset's `button:hover`,
 * which is why hovering a broken button briefly showed the correct colour.
 *
 * Restated below at 0-1-1 — one `body` is enough to clear 0-1-0, and nothing here needs
 * `!important`. Values are Commerce7's own, read from commerce7.css, and are written as the same
 * `var(--c7-*)` references it uses so they keep tracking the palette above rather than freezing a
 * copy of it. The `--small` variants follow the base rule because they tie it at 0-1-1 and must
 * win on order.
 *
 * The product card's green add-to-cart is untouched: c7-collection.css reaches it through a
 * five-class selector that outranks everything here.
 */
body .c7-btn {
	border: 0;
	border-radius: var(--c7-button-border-radius);
	font-family: var(--c7-font-family);
	font-size: var(--c7-font-size);
	font-weight: normal;
	line-height: 1.5;
	min-height: 46px;
	padding: 11px 20px;
	text-align: center;
	text-decoration: none;
	transition: all 0.1s ease-out;
}

/**
 * Commerce7 renders some buttons as anchors — `<a class="c7-btn c7-btn--primary">Start Shopping`,
 * the `--alt` buttons, the cart and checkout actions. hello-elementor's theme stylesheet underlines
 * every link inside the content area:
 *
 *     .comments-area a, .page-content a { text-decoration: underline }
 *
 * At 0-1-1 that ties the `body .c7-btn` rule above and wins on load order, so the same button came
 * out clean in the side cart — which sits in the header, outside `.page-content` — and underlined
 * on the cart and checkout pages. The source underlines neither: its theme resets `a` globally and
 * C7's own `.c7-btn` sets `text-decoration: none`.
 *
 * `a.c7-btn` is 0-1-2, one element more than the theme's rule, so it wins on specificity rather
 * than on which stylesheet happens to load last.
 */
body a.c7-btn { text-decoration: none; }

/**
 * The same leak, on Commerce7's text links. C7 already wants underline-on-hover only:
 *
 *     .c7-link:not([disabled]):hover, :active, :focus { text-decoration: underline }
 *
 * with nothing at rest. `.page-content a` overrides that at 0-1-1, so every C7 link — "Forgot your
 * password?", "Create one", the cart and checkout links — sat permanently underlined, and the
 * hover state became invisible because it was already on.
 *
 * Only the rest state needs correcting. `a.c7-link` is 0-1-2, enough to clear the theme's 0-1-1,
 * while C7's own hover rule is 0-3-0 and still wins over this — so the underline comes back on
 * hover with nothing further declared here. Deliberately not scoped to one route: `.c7-link` is
 * Commerce7's link class everywhere it renders.
 *
 * BUTTONS TOO. Commerce7 uses `.c7-link` on `<button>` as well as `<a>` — the side cart's "Remove"
 * control is `<button type="button" class="c7-link">` — and its base rule
 *
 *     .c7-link { cursor: pointer; color: var(--c7-link-color); background: none; border: 0;
 *                padding: 0; font-size: var(--c7-font-size); text-decoration: none }
 *
 * is 0-1-0, an exact tie with hello-elementor's `[type="button"]`, which loads later and wins.
 * A control meant to read as a text link came out wearing the theme's whole button costume:
 * #c36 text inside a #c36 rounded border with padding. Restated below at 0-1-2, values taken from
 * C7's own rule, so the two elements look identical whichever tag C7 chooses for a given control.
 */
body a.c7-link,
body button.c7-link {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	width: auto;
	white-space: normal;
	color: var(--c7-link-color);
	font-family: var(--c7-font-family);
	font-size: var(--c7-font-size);
	text-decoration: none;
}

body .c7-btn--primary,
body .c7-btn--primary--small {
	background: var(--c7-primary-button-bg);
	color: var(--c7-primary-button-text-color);
}

body .c7-btn--alt,
body .c7-btn--alt--small {
	background: var(--c7-alt-button-bg);
	color: var(--c7-alt-button-text-color);
}

/* After the base rule on purpose: these tie it at 0-1-1, so order is what restores C7's own
   smaller metrics. */
body .c7-btn--primary--small,
body .c7-btn--alt--small {
	font-size: var(--c7-font-size-sub);
	min-height: 36px;
	padding: 8px 10px;
}

/* ---- keeping the Elementor header out of the side cart ---- */

/**
 * Commerce7 mounts the slide-out cart INSIDE its header mount:
 *
 *     .div-utility > #c7-cart > .c7-user-nav__cart > section#c7-side-cart
 *
 * so the Elementor header widget's link rule reaches every anchor in the panel —
 *
 *     .elementor-249 .elementor-element.elementor-element-fc4eeda .div-utility a {
 *         color: #fff; font-size: 10px; font-weight: 600; text-transform: uppercase;
 *         letter-spacing: 1.73px; line-height: 13px; white-space: nowrap }
 *
 * — which is the LOG IN link's styling (see c7-header.css, which fights the same 0-5-1 selector
 * for the hover colour). Applied to the cart it renders every product link white-on-white at 10px,
 * letter-spaced and uppercased. On an empty cart only "Start Shopping" is visible, which is why
 * this survived the first pass: it was uppercase and undersized, but still legible.
 *
 * `#c7-side-cart` is Commerce7's own id, so 1-0-1 clears the header's 0-5-1 without `!important`
 * — the same id-over-classes tactic as `#c7-account` in c7-header.css.
 *
 * The typographic properties are set to `inherit` rather than to fixed values on purpose. All of
 * them are inherited properties, so `inherit` reproduces exactly what would happen if the header
 * rule did not exist, and leaves Commerce7's own per-element sizing intact. Hardcoding
 * `var(--c7-font-size)` here would instead flatten C7's internal typography, because 1-0-1 also
 * outranks C7's own 0-1-0 rules.
 *
 * `color` is the exception: it cannot be inherited back, since without the header rule a bare
 * anchor would fall to the user-agent blue. It is set explicitly, with the buttons taking their
 * own C7 values at higher specificity.
 */
#c7-side-cart a,
#c7-side-cart button {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: inherit;
	white-space: inherit;
}

#c7-side-cart a:not(.c7-btn) { color: var(--c7-link-color); }

/* Restores what the blanket rule above would otherwise inherit away from C7's buttons. */
#c7-side-cart .c7-btn {
	font-size: var(--c7-font-size);
	line-height: 1.5;
}

#c7-side-cart .c7-btn--primary,
#c7-side-cart .c7-btn--primary--small { color: var(--c7-primary-button-text-color); }

#c7-side-cart .c7-btn--alt,
#c7-side-cart .c7-btn--alt--small { color: var(--c7-alt-button-text-color); }

/* Last, so it wins the 1-1-0 tie with the `.c7-btn` rule above. */
#c7-side-cart .c7-btn--primary--small,
#c7-side-cart .c7-btn--alt--small { font-size: var(--c7-font-size-sub); }

/* ---- hello-elementor's pink button hover, inside Commerce7 ---- */

/**
 * The same reset that repaints C7's buttons also has a hover state:
 *
 *     [type=button]:hover, [type=submit]:hover, button:hover { background-color: #c36; color: #fff }
 *
 * at 0-1-1. Commerce7's own `.c7-side-cart__header button` is also 0-1-1, so the reset wins on
 * load order and the side cart's close control flashed pink on hover. The same applies to every
 * unclassed C7 button — the quantity steppers and remove controls on the cart page among them.
 *
 * C7 wants these transparent: `.c7-side-cart__header button { background: none; border: 0 }`, with
 * the icon itself carrying the state (`svg { stroke: #b2b2b2 }` going to `#000` on hover). So the
 * fix is to restore "no background" rather than to invent a colour.
 *
 * `:not(.c7-btn)` matters. C7's real buttons have their own hover, `.c7-btn--primary:not([disabled
 * ]):hover` at 0-3-0, which already beats the reset; sweeping them in here would outrank that and
 * kill the intended `--c7-primary-button-bg-hover`.
 */
#c7-side-cart button:not(.c7-btn):hover,
#c7-side-cart button:not(.c7-btn):focus,
body .c7-content button:not(.c7-btn):hover,
body .c7-content button:not(.c7-btn):focus {
	background: none;
	color: inherit;
}