/* ==========================================================================
   TERRA & WHEEL — DESIGN SYSTEM
   Tokens extracted from the original design, mapped to plain CSS so that
   every element you drop in Elementor (headings, buttons, cards, forms,
   WooCommerce widgets) automatically matches the brand.
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
	/* Brand palette */
	--c-primary:#111111;               /* ink black — main brand color */
	--c-on-primary:#ffffff;
	--c-primary-container:#262626;     /* header / footer panels */
	--c-on-primary-container:#c9c9c9;
	--c-primary-fixed:#e4e2e1;
	--c-primary-fixed-dim:#c8c6c5;
	--c-on-primary-fixed:#1b1c1c;
	--c-on-primary-fixed-variant:#474746;
	--c-inverse-primary:#c8c6c5;

	--c-secondary:#656100;             /* olive — supporting text accent */
	--c-secondary-container:#ebe553;
	--c-on-secondary:#ffffff;
	--c-on-secondary-container:#696500;
	--c-secondary-fixed:#eee755;       /* CHIME YELLOW — primary CTA accent */
	--c-secondary-fixed-dim:#d2cb3b;   /* CTA hover */
	--c-on-secondary-fixed:#1e1c00;
	--c-on-secondary-fixed-variant:#4c4900;

	--c-tertiary:#191000;
	--c-tertiary-container:#322400;
	--c-on-tertiary:#ffffff;
	--c-on-tertiary-container:#b18700;
	--c-tertiary-fixed:#ffdf9a;
	--c-tertiary-fixed-dim:#f7be1d;    /* gold — ratings / highlights */
	--c-on-tertiary-fixed:#251a00;
	--c-on-tertiary-fixed-variant:#5a4300;

	--c-error:#ba1a1a;
	--c-on-error:#ffffff;
	--c-error-container:#ffdad6;
	--c-on-error-container:#93000a;

	--c-background:#f8f9fb;
	--c-on-background:#191c1e;
	--c-surface:#f8f9fb;
	--c-on-surface:#191c1e;
	--c-surface-variant:#e1e2e4;
	--c-on-surface-variant:#444748;
	--c-surface-dim:#d9dadc;
	--c-surface-bright:#f8f9fb;
	--c-surface-container-lowest:#ffffff;   /* cards */
	--c-surface-container-low:#f3f4f6;
	--c-surface-container:#edeef0;
	--c-surface-container-high:#e7e8ea;
	--c-surface-container-highest:#e1e2e4;
	--c-inverse-surface:#2e3132;
	--c-inverse-on-surface:#f0f1f3;
	--c-outline:#747878;
	--c-outline-variant:#c4c7c7;
	--c-surface-tint:#5f5e5e;

	/* Radius */
	--r-sm:0.25rem;
	--r-md:0.5rem;
	--r-lg:0.75rem;
	--r-full:9999px;

	/* Spacing */
	--sp-xs:0.25rem;
	--sp-sm:0.5rem;
	--sp-md:1rem;
	--sp-lg:1.5rem;
	--sp-xl:2.5rem;
	--sp-gutter:1.5rem;
	--sp-gutter-mobile:1rem;
	--sp-margin:2.5rem;
	--sp-margin-mobile:1.25rem;

	/* Fonts */
	--f-heading:'Noto Serif', Georgia, 'Times New Roman', serif;
	--f-body:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--f-icons:'Material Symbols Outlined';

	/* Shadows */
	--shadow-sm:0 1px 3px rgba(17,17,17,0.08), 0 1px 2px rgba(17,17,17,0.06);
	--shadow-md:0 4px 10px rgba(17,17,17,0.10);
	--shadow-lg:0 10px 24px rgba(17,17,17,0.14);
	--shadow-xl:0 20px 40px rgba(17,17,17,0.18);

	--content-width:1280px;

	/* ---- Customizer-controlled component variables ----
	   These are the variables the Customizer overrides. They default to
	   the tokens above, so nothing changes until you edit a setting in
	   Appearance → Customize. */
	--body-bg:var(--c-surface-container-low);
	--body-text:var(--c-on-surface);
	--link-color:var(--c-secondary);
	--card-bg:var(--c-surface-container-lowest);

	--header-bg:var(--c-primary-container);
	--header-text:var(--c-on-primary);

	--footer-bg:var(--c-primary-container);
	--footer-text:var(--c-on-primary);

	--btn-bg:var(--c-secondary-fixed);
	--btn-bg-hover:var(--c-secondary-fixed-dim);
	--btn-text:var(--c-primary);
	--btn-radius:var(--r-md);

	/* Font size / letter-spacing — controlled from Appearance → Customize → Typography */
	--content-font-size:16px;
	--content-letter-spacing:0em;
	--header-menu-font-size:15px;
	--header-menu-letter-spacing:0em;
	--header-btn-font-size:15px;
	--header-btn-letter-spacing:0.01em;

	/* Text transform — controlled from Appearance → Customize */
	--heading-text-transform:none;
	--body-text-transform:none;
	--header-menu-text-transform:none;
	--header-btn-text-transform:none;
}

/* ---------- 2. BASE / TYPOGRAPHY ---------- */
body{
	background:var(--body-bg);
	color:var(--body-text);
	font-family:var(--f-body);
	font-size:var(--content-font-size);
	letter-spacing:var(--content-letter-spacing);
	text-transform:var(--body-text-transform);
	line-height:24px;
	font-weight:400;
	-webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
	font-family:var(--f-heading);
	color:var(--body-text);
	margin:0 0 var(--sp-md);
	letter-spacing:-0.01em;
	text-transform:var(--heading-text-transform);
	font-weight:600;
}
h1,.h1{ font-size:56px; line-height:64px; letter-spacing:-0.02em; font-weight:600; }
h2,.h2{ font-size:40px; line-height:48px; letter-spacing:-0.015em; font-weight:600; }
h3,.h3{ font-size:28px; line-height:36px; font-weight:500; }
h4,.h4{ font-size:20px; line-height:28px; font-weight:500; }
h5,.h5{ font-size:16px; line-height:24px; font-weight:600; }
h6,.h6{ font-size:14px; line-height:20px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }

@media (max-width:767px){
	h1,.h1{ font-size:36px; line-height:44px; letter-spacing:-0.01em; }
	h2,.h2{ font-size:28px; line-height:36px; font-weight:600; letter-spacing:0; }
	h3,.h3{ font-size:22px; line-height:30px; }
}

p{ margin:0 0 var(--sp-md); }
p:last-child{ margin-bottom:0; }

a{ color:var(--link-color); text-decoration:none; transition:color .2s ease; }
a:hover{ filter:brightness(0.8); }

.lead,.body-lg{ font-size:18px; line-height:28px; font-weight:400; }
small,.body-sm{ font-size:14px; line-height:20px; }
.label-sm{ font-size:11px; line-height:16px; letter-spacing:0.04em; font-weight:700; text-transform:uppercase; }
.label-md{ font-size:13px; line-height:18px; letter-spacing:0.02em; font-weight:600; }
.label-lg{ font-size:15px; line-height:20px; letter-spacing:0.01em; font-weight:600; }

blockquote{
	margin:var(--sp-lg) 0;
	padding:var(--sp-lg);
	border-left:3px solid var(--c-secondary-fixed);
	background:var(--c-surface-container-lowest);
	border-radius:var(--r-md);
	font-family:var(--f-heading);
	font-style:italic;
	font-size:20px;
	line-height:30px;
}

hr{ border:none; border-top:1px solid var(--c-outline-variant); margin:var(--sp-xl) 0; }

ul,ol{ padding-left:1.25em; }

table{ width:100%; border-collapse:collapse; margin-bottom:var(--sp-md); }
table th, table td{ padding:var(--sp-sm) var(--sp-md); border:1px solid var(--c-outline-variant); text-align:left; }
table th{ background:var(--c-surface-container); font-family:var(--f-body); font-weight:700; }

img{ border-radius:var(--r-md); }
.alignwide{ max-width:1440px; }
.alignfull{ max-width:100%; }

/* ---------- 3. LAYOUT HELPERS ---------- */
.site-container{ max-width:var(--content-width); margin:0 auto; padding:0 var(--sp-margin); }
@media (max-width:767px){ .site-container{ padding:0 var(--sp-margin-mobile); } }

.section{ padding:var(--sp-xl) 0; }
@media (min-width:1024px){ .section{ padding:96px 0; } }

/* ---------- 4. BUTTONS ----------
   Applies to native WP buttons, Gutenberg buttons, WooCommerce buttons and
   Elementor's Button widget / link buttons, so every button matches. */
.btn,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.elementor-button,
.elementor-widget-button .elementor-button,
a.elementor-button-link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce-page a.button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0.5rem;
	font-family:var(--f-body) !important;
	font-size:15px !important;
	line-height:20px !important;
	letter-spacing:0.01em;
	font-weight:700 !important;
	padding:0.625rem 1.5rem !important;
	border-radius:var(--btn-radius) !important;
	border:none;
	cursor:pointer;
	background-color:var(--btn-bg) !important;
	color:var(--btn-text) !important;
	fill:var(--btn-text);
	box-shadow:var(--shadow-sm);
	transition:background-color .2s ease, box-shadow .2s ease, transform .15s ease;
	text-decoration:none !important;
}
.btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover{
	background-color:var(--btn-bg-hover) !important;
	color:var(--btn-text) !important;
	box-shadow:var(--shadow-md);
}
.btn:active,.button:active,button:active,.elementor-button:active{ transform:scale(0.97); }
.btn:focus-visible,.button:focus-visible,button:focus-visible,.elementor-button:focus-visible{
	outline:2px solid var(--c-secondary-fixed-dim); outline-offset:2px;
}

/* Secondary / dark button variant — add class "btn-dark" in Elementor's CSS-classes field */
.btn-dark,.button-dark,.elementor-button.btn-dark{
	background-color:var(--c-primary) !important;
	color:var(--c-on-primary) !important;
}
.btn-dark:hover,.button-dark:hover{ background-color:var(--c-inverse-surface) !important; }

/* Outline button variant — class "btn-outline" */
.btn-outline,.elementor-button.btn-outline{
	background-color:transparent !important;
	color:var(--c-on-surface) !important;
	border:1.5px solid var(--c-outline) !important;
	box-shadow:none;
}
.btn-outline:hover{ background-color:var(--c-surface-container) !important; box-shadow:none; }

/* Ghost/text button — class "btn-text" */
.btn-text,.elementor-button.btn-text{
	background-color:transparent !important;
	color:var(--c-secondary) !important;
	box-shadow:none;
	padding-left:0.25rem !important;
	padding-right:0.25rem !important;
}
.btn-text:hover{ background-color:transparent !important; color:var(--c-on-secondary-fixed-variant) !important; }

/* ---------- 5. CARDS ----------
   Add class "card" to any Elementor Container/Section, or use directly. */
.card,
.wp-block-group.card{
	background:var(--card-bg);
	border-radius:var(--r-lg);
	box-shadow:var(--shadow-sm);
	padding:var(--sp-lg);
	transition:box-shadow .3s ease, transform .3s ease;
}
.card-hover:hover,
a.card:hover,
.card.is-hoverable:hover{
	box-shadow:var(--shadow-xl);
	transform:translateY(-4px);
}
.card-flat{ box-shadow:none; border:1px solid var(--c-outline-variant); }

.badge,.pill{
	display:inline-flex;
	align-items:center;
	gap:0.25rem;
	background:var(--c-secondary-fixed);
	color:var(--c-primary);
	font-size:11px;
	font-weight:700;
	letter-spacing:0.04em;
	text-transform:uppercase;
	padding:0.25rem 0.75rem;
	border-radius:var(--r-full);
}
.badge-dark{ background:var(--c-primary); color:var(--c-on-primary); }
.badge-outline{ background:transparent; border:1px solid var(--c-outline); color:var(--c-on-surface-variant); }

/* ---------- 6. FORMS ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea,
.elementor-field-textual{
	width:100%;
	font-family:var(--f-body) !important;
	font-size:15px !important;
	padding:0.75rem 1rem !important;
	background:var(--card-bg) !important;
	color:var(--body-text) !important;
	border:1px solid var(--c-outline-variant) !important;
	border-radius:var(--r-md) !important;
	transition:box-shadow .2s ease, border-color .2s ease;
}
textarea{ min-height:120px; }
input:focus,select:focus,textarea:focus,.elementor-field-textual:focus{
	outline:none !important;
	border-color:var(--c-secondary-fixed-dim) !important;
	box-shadow:0 0 0 3px rgba(238,231,85,0.45) !important;
}
label{ font-size:13px; font-weight:600; letter-spacing:0.02em; display:block; margin-bottom:0.375rem; color:var(--c-on-surface); }
::placeholder{ color:var(--c-on-surface-variant); opacity:0.7; }

/* ---------- 7. HEADER / NAV (theme template) ---------- */
.site-header{
	position:fixed; top:0; left:0; right:0; z-index:999;
	background:var(--header-bg);
	box-shadow:0 1px 8px rgba(0,0,0,.12);
	height:80px;
}
.site-header .site-container{ height:80px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.site-branding{ display:flex; align-items:center; gap:1rem; color:var(--header-text); min-width:0; }
.site-branding img{ height:32px; width:auto; border-radius:0; }
.site-branding .site-title{ font-family:var(--f-heading); font-size:20px; font-weight:500; color:var(--header-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logo-mobile{ display:none; align-items:center; }

.primary-nav ul{ list-style:none; display:flex; align-items:center; gap:1.5rem; height:80px; margin:0; padding:0; }
.primary-nav li{ height:100%; display:flex; align-items:center; }
.primary-nav a{
	display:flex; align-items:center; height:100%;
	color:var(--header-text); opacity:.72; font-size:var(--header-menu-font-size); font-weight:600;
	letter-spacing:var(--header-menu-letter-spacing);
	text-transform:var(--header-menu-text-transform);
	border-bottom:2px solid transparent;
	transition:opacity .2s ease, color .2s ease;
}
.primary-nav a:hover{ opacity:1; }
.primary-nav li.current-menu-item a,
.primary-nav a.current{ opacity:1; border-bottom-color:var(--btn-bg); }

.header-actions{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.header-cart-icon{ color:var(--header-text); opacity:.8; position:relative; display:inline-flex; align-items:center; }
.header-cart-icon:hover{ opacity:1; }
.header-cta{
	margin-left:0;
	font-size:var(--header-btn-font-size) !important;
	letter-spacing:var(--header-btn-letter-spacing) !important;
	text-transform:var(--header-btn-text-transform) !important;
	white-space:nowrap;
}
.menu-toggle{ display:none; background:transparent !important; box-shadow:none !important; color:var(--header-text) !important; padding:0.5rem !important; }

@media (max-width:900px){
	.logo-desktop{ display:none; }
	.logo-mobile{ display:inline-flex; }

	.primary-nav{
		display:none;
		position:absolute;
		top:80px; left:0; right:0;
		max-height:calc(100vh - 80px);
		overflow-y:auto;
		background:var(--header-bg);
		box-shadow:0 12px 24px rgba(0,0,0,.18);
		padding:0.5rem var(--sp-margin-mobile) 1rem;
	}
	.primary-nav.is-open{ display:block; }
	.primary-nav ul{
		flex-direction:column;
		align-items:stretch;
		height:auto;
		gap:0;
		width:100%;
	}
	.primary-nav li{ height:auto; width:100%; }
	.primary-nav a{
		height:auto; width:100%;
		padding:0.85rem 0;
		border-bottom:1px solid rgba(128,128,128,0.25);
	}
	.primary-nav li:last-child a{ border-bottom:none; }

	.header-actions{ gap:0.5rem; }
	.header-cta{ padding:0.5rem 0.9rem !important; font-size:13px !important; }
	.menu-toggle{ display:inline-flex; }
}

@media (max-width:400px){
	.header-cta{ padding:0.45rem 0.6rem !important; font-size:12px !important; }
}

main.site-main{ padding-top:80px; min-height:60vh; }

/* ---------- 8. FOOTER ---------- */
.site-footer{ background:var(--footer-bg); color:var(--footer-text); }
.site-footer .site-container{ padding-top:var(--sp-xl); padding-bottom:var(--sp-xl); }
.site-footer h4{ color:var(--footer-text); font-size:20px; }
.site-footer p, .site-footer li{ color:var(--footer-text); opacity:.78; }
.site-footer a{ color:var(--footer-text); opacity:.78; transition:opacity .2s ease; }
.site-footer a:hover{ opacity:1; }
.site-footer .footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-xl); }
@media (max-width:900px){ .site-footer .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .site-footer .footer-grid{ grid-template-columns:1fr; } }
.site-footer .footer-bottom{
	border-top:1px solid rgba(128,128,128,0.3);
	margin-top:var(--sp-lg); padding-top:var(--sp-lg);
	display:flex; flex-wrap:wrap; gap:var(--sp-md); align-items:center; justify-content:space-between;
	font-size:14px; color:var(--footer-text); opacity:.78;
}
.site-footer .footer-bottom a{ opacity:1; color:var(--footer-text); }
.site-footer input[type="email"]{
	background:rgba(128,128,128,0.15) !important;
	border:1px solid rgba(128,128,128,0.3) !important;
	color:var(--footer-text) !important;
	opacity:1 !important;
}
.site-footer ::placeholder{ color:var(--footer-text); opacity:0.6; }

/* ---------- 9. ELEMENTOR CONSISTENCY LAYER ---------- */
.elementor-heading-title{ font-family:var(--f-heading); color:var(--c-on-surface); }
.elementor-icon-box-title, .elementor-image-box-title{ font-family:var(--f-heading); }
.elementor-icon{ color:var(--c-secondary-fixed); }
.elementor-icon-box-wrapper .elementor-icon{
	background:var(--c-secondary-fixed); color:var(--c-primary); border-radius:var(--r-lg);
}
.elementor-tab-title.elementor-active, .elementor-tab-title:hover{ color:var(--c-on-secondary-fixed-variant); }
.elementor-toggle-title, .elementor-accordion-title{ font-family:var(--f-heading); }
.elementor-star-rating .elementor-star-full,
.elementor-star-rating i.eicon-star{ color:var(--c-tertiary-fixed-dim); }

/* ---------- 10. WOOCOMMERCE ---------- */
.woocommerce ul.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--sp-lg); list-style:none; padding:0; margin:0 0 var(--sp-xl); }
.woocommerce ul.products li.product{
	background:var(--card-bg);
	border-radius:var(--r-lg);
	box-shadow:var(--shadow-sm);
	padding:var(--sp-md);
	transition:box-shadow .3s ease, transform .3s ease;
	position:relative;
}
.woocommerce ul.products li.product:hover{ box-shadow:var(--shadow-xl); transform:translateY(-4px); }
.woocommerce ul.products li.product img{ border-radius:var(--r-md); margin-bottom:var(--sp-sm); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--f-heading); font-size:18px; font-weight:500; color:var(--c-on-surface); margin:0.5rem 0 0.25rem;
}
.woocommerce ul.products li.product .price{ color:var(--c-on-surface); font-weight:700; font-family:var(--f-body); }
.woocommerce ul.products li.product .price ins{ color:var(--c-on-surface); text-decoration:none; }
.woocommerce ul.products li.product .price del{ color:var(--c-on-surface-variant); opacity:0.7; }
.woocommerce span.onsale{
	background:var(--c-secondary-fixed) !important; color:var(--c-primary) !important;
	font-weight:700; font-size:12px; border-radius:var(--r-full); min-height:auto; min-width:auto;
	padding:0.25rem 0.75rem; position:absolute; top:0.75rem; left:0.75rem; left:auto; right:0.75rem; line-height:1.4;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{ font-family:var(--f-body); font-weight:600; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--c-on-surface); font-size:24px; font-family:var(--f-body); }
.woocommerce .star-rating{ color:var(--c-tertiary-fixed-dim); }
.woocommerce .star-rating::before{ color:var(--c-outline-variant); }
.woocommerce .star-rating span::before{ color:var(--c-tertiary-fixed-dim); }
.woocommerce nav.woocommerce-pagination ul{ border:none; gap:0.5rem; display:flex; }
.woocommerce nav.woocommerce-pagination ul li{ border:none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
	border-radius:var(--r-md); border:1px solid var(--c-outline-variant); color:var(--c-on-surface);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current{
	background:var(--c-secondary-fixed); border-color:var(--c-secondary-fixed); color:var(--c-primary);
}
.woocommerce-message, .woocommerce-info{
	border-top-color:var(--c-secondary-fixed) !important; background:var(--c-surface-container-lowest);
}
.woocommerce-message::before, .woocommerce-info::before{ color:var(--c-secondary-fixed-dim); }
.woocommerce-error{ border-top-color:var(--c-error) !important; }
.woocommerce table.shop_table{ border-radius:var(--r-md); overflow:hidden; }
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce .single_add_to_cart_button{
	background-color:var(--c-secondary-fixed) !important; color:var(--c-primary) !important;
}
.woocommerce div.product form.cart .quantity input.qty{ width:4rem; text-align:center; }

/* Cart count bubble used in the header */
.cart-contents-count{
	background:var(--c-secondary-fixed); color:var(--c-primary);
	font-size:11px; font-weight:700; border-radius:var(--r-full);
	min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
	padding:0 4px; margin-left:2px;
}

/* ---------- 11. UTILITIES ---------- */
.text-accent{ color:var(--c-secondary-fixed-dim) !important; }
.bg-dark{ background:var(--c-primary) !important; color:var(--c-on-primary) !important; }
.bg-surface{ background:var(--c-surface-container-lowest) !important; }
.rounded-full{ border-radius:var(--r-full) !important; }
.shadow-none{ box-shadow:none !important; }