/*
Theme Name:   SpotSox
Theme URI:    https://spotsox.com/
Description:  SpotSox brand theme — a child theme of Elementor Hello. Ships the brand fonts (Alphasox, Archivo Black, Inter, Libre Baskerville), the brand color tokens, and WooCommerce support. All page content is built with the SpotSox Core widgets and stays editable in Elementor.
Author:       SpotSox
Author URI:   https://spotsox.com/
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  spotsox
Tags:         elementor, e-commerce, custom-colors, custom-logo, custom-menu
*/

/* -------------------------------------------------------------------------
 * Brand tokens.
 * These are plain CSS variables so they can be overridden from
 * Elementor -> Site Settings -> Custom CSS without touching the theme.
 * ---------------------------------------------------------------------- */
:root {
	--sx-ink:        #000000; /* headlines, nav, footer bar          */
	--sx-ink-soft:   #1A1A1A;
	--sx-bone:       #F1EEE7; /* page / panel background             */
	--sx-bone-2:     #F7F5F0;
	--sx-purple:     #7A02FE; /* brand accent — buttons, rules       */
	--sx-purple-dk:  #6100E0;
	--sx-line:       #D8D3C8; /* hairline rules on bone              */
	--sx-muted:      #6B6B6B;
	--sx-white:      #FFFFFF;

	--sx-font-display: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
	--sx-font-script:  'Alphasox', 'Brush Script MT', cursive;
	--sx-font-serif:   'Libre Baskerville', Georgia, 'Times New Roman', serif;
	--sx-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	--sx-gutter: 48px;
}

/* Hello Elementor resets we want site-wide. */
body {
	font-family: var(--sx-font-body);
	color: var(--sx-ink);
	background-color: var(--sx-bone);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sx-font-display);
	color: var(--sx-ink);
	letter-spacing: -0.02em;
	line-height: 0.95;
	text-transform: uppercase;
}

a { color: var(--sx-ink); }
a:hover { color: var(--sx-purple); }

/* Keep Elementor Canvas pages truly edge to edge. */
.elementor-template-canvas body { margin: 0; }

/* -------------------------------------------------------------------------
 * WooCommerce — enough brand styling that shop pages don't look unrelated.
 * The SpotSox Core widgets carry the real design; this is the fallback skin.
 * ---------------------------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sx-font-display);
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.woocommerce span.onsale {
	background-color: var(--sx-purple);
	border-radius: 999px;
	font-family: var(--sx-font-body);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--sx-purple);
	border-radius: 999px;
	color: var(--sx-white);
	font-family: var(--sx-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: 14px 28px;
	text-transform: uppercase;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--sx-purple-dk);
	color: var(--sx-white);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--sx-ink);
	font-family: var(--sx-font-display);
}

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--sx-purple);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--sx-purple);
}