/* Soulthread — the small "backend" layer under WoodMart + Elementor.
 *
 * The homepage design (fonts, sizes, colours, spacing, animations) is set inside Elementor:
 *   - Site Settings > Global Colors / Global Fonts ("Soulthread ..." entries)
 *   - each widget's Style and Advanced tabs
 *
 * This file only does what Elementor (free) cannot:
 *   1. light / dark mode — it swaps the Soulthread global colours and WoodMart's colour variables
 *   2. the base font for store pages (shop, product, cart, checkout)
 *   3. a few optional effect classes you can add under Advanced > CSS Classes:
 *        st-nowrap           keep a big title on the lines you typed
 *        st-marquee-outline  every second marquee word as an outline
 *        st-zoom             images zoom gently on hover
 *        st-rows             a list with ruled rows and small labels (wrap the label in bold)
 *        st-dash-list        dashes instead of bullets
 *        st-tag              gentle swing (the "label" card)
 *        st-keep-light       this block keeps a light background in dark mode
 */

@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("../fonts/michroma-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- 1. Modes ---------- */
:root {
	--st-bg: #000;
	--st-bg-2: #0b0b0c;
	--st-ink: #f4f4f6;
	--st-muted: #b4b4bc;
	--st-line: #2a2a2e;
	--st-accent: #e0131f;
	--st-display: "Anton", "Arial Narrow", Impact, sans-serif;
	--st-tech: "Michroma", "Eurostile", Arial, sans-serif;
	--st-body: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
	color-scheme: dark;
}

html[data-st-theme="light"] {
	--st-bg: #f4f4f5;
	--st-bg-2: #e9e9ec;
	--st-ink: #09090a;
	--st-muted: #55555e;
	--st-line: #cfcfd4;
	--st-accent: #c90f1a;
	color-scheme: light;
}

/* Light mode values for the Elementor global colours. The dark values are the ones you see
   (and can edit) in Elementor > Site Settings > Global Colors. */
html[data-st-theme="light"] body.soulthread {
	--e-global-color-stink: #09090a;
	--e-global-color-stmuted: #55555e;
	--e-global-color-stbg: #f4f4f5;
	--e-global-color-stbgalt: #e9e9ec;
	--e-global-color-stline: #cfcfd4;
	--e-global-color-staccent: #c90f1a;
}

body.soulthread {
	--wd-main-bgcolor: var(--st-bg);
	--wd-primary-color: var(--st-accent);
	--wd-alternative-color: var(--st-ink);
	--wd-brd-radius: 0px;
	--btn-accented-bgcolor: var(--st-accent);
	--btn-accented-bgcolor-hover: #b30d17;
	--btn-accented-color: #fff;
	--btn-accented-color-hover: #fff;
	background-color: var(--st-bg);
}

.soulthread .wd-page-wrapper,
.soulthread .wd-page-content { background-color: var(--st-bg); }

/* Text colours follow the same switch as the background. WoodMart's colour variables are set
   from the mode itself, so they cannot disagree with it (no dark text on a dark page). */
html[data-st-theme="dark"] body.soulthread,
html:not([data-st-theme]) body.soulthread,
html[data-st-theme="dark"] body.soulthread [class*="color-scheme-light"],
body.soulthread .whb-header .whb-color-light,
body.soulthread .wd-page-title,
body.soulthread .wd-footer {
	--color-white: #000;
	--color-gray-100: rgba(255, 255, 255, .1);
	--color-gray-200: rgba(255, 255, 255, .2);
	--color-gray-300: rgba(255, 255, 255, .5);
	--color-gray-400: rgba(255, 255, 255, .6);
	--color-gray-500: rgba(255, 255, 255, .7);
	--color-gray-600: rgba(255, 255, 255, .8);
	--color-gray-700: rgba(255, 255, 255, .9);
	--color-gray-800: #fff;
	--color-gray-900: #fff;
	--color-white-rgb: 0, 0, 0;
	--color-black-rgb: 255, 255, 255;
	--bgcolor-black-rgb: 255, 255, 255;
	--bgcolor-white-rgb: 0, 0, 0;
	--bgcolor-white: #0c0c0d;
	--bgcolor-gray-100: #101012;
	--bgcolor-gray-200: #151517;
	--bgcolor-gray-300: #1a1a1d;
	--brdcolor-gray-200: rgba(255, 255, 255, .1);
	--brdcolor-gray-300: rgba(255, 255, 255, .15);
	--brdcolor-gray-400: rgba(255, 255, 255, .25);
	--brdcolor-gray-500: rgba(255, 255, 255, .3);
	--wd-text-color: rgba(255, 255, 255, .8);
	--wd-title-color: #fff;
	--wd-widget-title-color: #fff;
	--wd-entities-title-color: #fff;
	--wd-entities-title-color-hover: rgba(255, 255, 255, .8);
	--wd-link-color: rgba(255, 255, 255, .9);
	--wd-link-color-hover: #fff;
	--wd-form-color: #fff;
	--wd-form-bg: transparent;
	--wd-form-brd-color: rgba(255, 255, 255, .2);
	--wd-form-brd-color-focus: rgba(255, 255, 255, .35);
	--wd-form-placeholder-color: rgba(255, 255, 255, .6);
	--wd-navigation-color: 255, 255, 255;
	--btn-default-bgcolor: #1d1d20;
	--btn-default-bgcolor-hover: #2a2a2e;
	--btn-default-color: #fff;
	--btn-default-color-hover: #fff;
	color: var(--wd-text-color);
}

html[data-st-theme="light"] body.soulthread,
html[data-st-theme="dark"] body.soulthread .st-keep-light {
	--color-white: #fff;
	--color-gray-100: #f7f7f7;
	--color-gray-200: #f1f1f1;
	--color-gray-300: #9a9aa2;
	--color-gray-400: #77777f;
	--color-gray-500: #66666e;
	--color-gray-600: #5a5a62;
	--color-gray-700: #4a4a52;
	--color-gray-800: #2a2a2e;
	--color-gray-900: #111;
	--color-white-rgb: 255, 255, 255;
	--color-black-rgb: 0, 0, 0;
	--bgcolor-black-rgb: 0, 0, 0;
	--bgcolor-white-rgb: 255, 255, 255;
	--bgcolor-white: #fff;
	--bgcolor-gray-100: #f7f7f7;
	--bgcolor-gray-200: #f7f7f7;
	--bgcolor-gray-300: #f1f1f1;
	--brdcolor-gray-200: rgba(0, 0, 0, .075);
	--brdcolor-gray-300: rgba(0, 0, 0, .105);
	--brdcolor-gray-400: rgba(0, 0, 0, .12);
	--brdcolor-gray-500: rgba(0, 0, 0, .2);
	--wd-text-color: #55555e;
	--wd-title-color: #09090a;
	--wd-widget-title-color: #09090a;
	--wd-entities-title-color: #111;
	--wd-entities-title-color-hover: rgba(17, 17, 17, .65);
	--wd-link-color: #111;
	--wd-link-color-hover: #000;
	--wd-form-color: #111;
	--wd-form-bg: transparent;
	--wd-form-brd-color: rgba(0, 0, 0, .2);
	--wd-form-brd-color-focus: rgba(0, 0, 0, .4);
	--wd-form-placeholder-color: #6f6f77;
	--wd-navigation-color: 51, 51, 51;
	--btn-default-bgcolor: #e6e6e9;
	--btn-default-bgcolor-hover: #d8d8dc;
	--btn-default-color: #111;
	--btn-default-color-hover: #111;
	color: var(--wd-text-color);
}

/* A block that Theme Settings or an older layout marked "dark text" would be black on black in
   dark mode. Only blocks that really keep a light background (st-keep-light) stay dark-on-light.
   The header, page title band and footer are black in both modes, so they always get light text. */
html[data-st-theme="dark"] body.soulthread [class*="color-scheme-dark"]:not(.st-keep-light),
body.soulthread :is(.wd-page-title, .wd-footer)[class*="color-scheme-dark"],
body.soulthread :is(.wd-page-title, .wd-footer) [class*="color-scheme-dark"] {
	--color-gray-300: rgba(255, 255, 255, .5);
	--color-gray-400: rgba(255, 255, 255, .6);
	--color-gray-500: rgba(255, 255, 255, .7);
	--color-gray-600: rgba(255, 255, 255, .8);
	--color-gray-700: rgba(255, 255, 255, .9);
	--color-gray-800: #fff;
	--color-gray-900: #fff;
	--brdcolor-gray-200: rgba(255, 255, 255, .1);
	--brdcolor-gray-300: rgba(255, 255, 255, .15);
	--wd-text-color: rgba(255, 255, 255, .8);
	--wd-title-color: #fff;
	--wd-widget-title-color: #fff;
	--wd-entities-title-color: #fff;
	--wd-entities-title-color-hover: rgba(255, 255, 255, .8);
	--wd-link-color: rgba(255, 255, 255, .9);
	--wd-link-color-hover: #fff;
	--wd-navigation-color: 255, 255, 255;
	color: var(--wd-text-color);
}

/* Headings and product names take the colour of the surface they sit on, even when an Elementor
   kit or an old stylesheet gives them a fixed colour. A colour chosen on a widget in Elementor's
   Style tab is more specific and still wins. */
body.soulthread :is(h1, h2, h3, h4, h5, h6, .title, legend, th) { color: var(--wd-title-color); }
body.soulthread :is(.wd-entities-title, .wd-entities-title a, .product-title) { color: var(--wd-entities-title-color); }
body.soulthread :is(.wd-entities-title a:hover, a.product-title:hover) { color: var(--wd-entities-title-color-hover); }
body.soulthread label { color: var(--wd-title-color); }

/* Elementor's own widgets fall back to the kit's default colours (often a dark grey) when no
   colour is chosen. Without a choice they follow the mode instead. */
body.soulthread .elementor-widget-text-editor,
body.soulthread .elementor-widget-icon-box .elementor-icon-box-description,
body.soulthread .elementor-widget-image-box .elementor-image-box-description,
body.soulthread .elementor-widget-icon-list .elementor-icon-list-text,
body.soulthread .elementor-widget-testimonial .elementor-testimonial-content { color: var(--wd-text-color); }
body.soulthread .elementor-widget-icon-box .elementor-icon-box-title,
body.soulthread .elementor-widget-icon-box .elementor-icon-box-title a,
body.soulthread .elementor-widget-image-box .elementor-image-box-title,
body.soulthread .elementor-widget-accordion .elementor-accordion-title,
body.soulthread .elementor-widget-toggle .elementor-toggle-title,
body.soulthread .elementor-widget-counter .elementor-counter-number-wrapper,
body.soulthread .elementor-widget-counter .elementor-counter-title { color: var(--wd-title-color); }
body.soulthread .elementor-widget-icon-box.elementor-view-default .elementor-icon,
body.soulthread .elementor-widget-icon.elementor-view-default .elementor-icon,
body.soulthread .elementor-widget-icon-list .elementor-icon-list-icon i { color: var(--st-accent); }
body.soulthread .elementor-widget-icon-box.elementor-view-default .elementor-icon svg,
body.soulthread .elementor-widget-icon.elementor-view-default .elementor-icon svg,
body.soulthread .elementor-widget-icon-list .elementor-icon-list-icon svg { fill: var(--st-accent); }

/* The inverted panel on the homepage flips with the mode, so its text variables flip too. */
html[data-st-theme="dark"] body.soulthread .st-inverse,
html:not([data-st-theme]) body.soulthread .st-inverse {
	--wd-text-color: #2a2a2e;
	--wd-title-color: #09090a;
	--wd-link-color: #111;
}
html[data-st-theme="light"] body.soulthread .st-inverse {
	--wd-text-color: rgba(255, 255, 255, .85);
	--wd-title-color: #fff;
	--wd-link-color: #fff;
}

/* ---------- 2. Store-wide base type (shop, product, cart, checkout) ---------- */
body.soulthread {
	--wd-text-font: var(--st-body);
	--wd-text-font-size: 16px;
	--wd-text-font-weight: 400;
	--wd-title-font: var(--st-body);
	--wd-title-font-weight: 600;
	--wd-entities-title-font: var(--st-body);
	--wd-entities-title-font-weight: 500;
	--wd-alternative-font: var(--st-body);
	--wd-widget-title-font: var(--st-body);
	--wd-header-el-font: var(--st-tech);
	--wd-header-el-font-weight: 400;
	--wd-header-el-font-size: 11px;
}

.soulthread .wd-page-title { background-color: #050506 !important; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.soulthread .wd-page-title .entry-title,
.soulthread .wd-page-title .title,
.soulthread .product_title {
	font-family: var(--st-display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1;
}
.soulthread .wd-page-title .entry-title,
.soulthread .wd-page-title .title { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.soulthread .product_title { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.soulthread .wd-product .wd-product-thumb img,
.soulthread .wd-cat-image img { background: #fff; }
.soulthread .wd-product .price,
.soulthread .wd-product .price .amount { font-weight: 400; color: var(--wd-title-color); font-variant-numeric: tabular-nums; }

/* WoodMart buttons have no font control in Elementor; the button font is set here. */
.soulthread .st-btn .btn,
.soulthread .wd-load-more,
.soulthread .info-btn-wrapper .btn {
	font-family: var(--st-tech);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.soulthread .st-btn .btn.btn-size-large { min-height: 54px; padding-inline: 28px; }
.soulthread .st-btn .btn .wd-btn-icon { transition: transform .3s cubic-bezier(.2, .7, .1, 1); }
.soulthread .st-btn .btn:hover .wd-btn-icon { transform: translateX(5px); }

/* WoodMart leaves a stretched section's content left-aligned when "negative gap" is on. */
.soulthread .elementor-section.wd-section-stretch > .elementor-container { margin-inline: auto; }
.soulthread.home .wd-content-layout { padding-block: 0; }

/* ---------- Header (WoodMart Header Builder) and footer ---------- */
.soulthread .whb-header .wd-nav-main > li > a { letter-spacing: .16em; text-transform: uppercase; }
.soulthread .whb-header .wd-nav-main > li > a .nav-link-text { position: relative; }
.soulthread .whb-header .wd-nav-main > li > a .nav-link-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--st-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .35s cubic-bezier(.2, .7, .1, 1);
}
.soulthread .whb-header .wd-nav-main > li:hover > a .nav-link-text::after,
.soulthread .whb-header .wd-nav-main > li.current-menu-item > a .nav-link-text::after { transform: scaleX(1); transform-origin: left; }
.soulthread .st-topnote { font-size: 13px; letter-spacing: .02em; }
.soulthread .wd-footer { background-color: #000; border-top: 1px solid rgba(255, 255, 255, .09); }
.soulthread .wd-copyrights { font-size: 13px; border-top: 1px solid rgba(255, 255, 255, .09); }

/* The light / dark button: [soulthread_mode_toggle] */
.st-mode {
	appearance: none;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: currentColor;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .25s ease, color .25s ease;
}
.soulthread .st-mode:hover,
.soulthread .st-mode:focus-visible { background: #fff; color: #000; box-shadow: none; }
.st-mode:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 3px; }
.st-mode span { display: grid; animation: st-mode-in .5s cubic-bezier(.2, .7, .1, 1); }
.soulthread .st-mode svg { display: block; width: 20px; height: 20px; min-width: 20px; fill: none; stroke: currentColor; }
html[data-st-theme="dark"] .st-mode__moon,
html[data-st-theme="light"] .st-mode__sun,
html:not([data-st-theme]) .st-mode__moon { display: none; }
@keyframes st-mode-in { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }
.soulthread .st-mode-holder { color: #fff; margin-inline: 4px; }

/* ---------- 3. Optional effect classes ---------- */
.soulthread .st-nowrap .woodmart-title-container { white-space: nowrap; }
@media (max-width: 767px) { .soulthread .st-nowrap .woodmart-title-container { white-space: normal; } }

.soulthread .st-marquee-outline .wd-marquee-item { display: inline-flex; align-items: center; white-space: nowrap; }
.soulthread .st-marquee-outline .wd-marquee-item:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--e-global-color-stink, var(--st-ink)); }
.soulthread .st-marquee-outline .wd-marquee-item .wd-icon { -webkit-text-stroke: 0; }

.soulthread .st-zoom :is(.wd-product-thumb, .wd-cat-thumb, .wd-gallery-item, .wd-images-gallery .wd-gallery-item a) { overflow: hidden; }
.soulthread .st-zoom :is(.wd-product-thumb, .wd-cat-thumb, .wd-gallery-item) img { transition: transform .9s cubic-bezier(.2, .7, .1, 1); }
.soulthread .st-zoom :is(.wd-product, .wd-cat, .wd-gallery-item):hover :is(.wd-product-thumb, .wd-cat-thumb) img,
.soulthread .st-zoom .wd-gallery-item:hover img { transform: scale(1.06); }
.soulthread .st-zoom .wd-cat-image img,
.soulthread .st-zoom .wd-gallery-item img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.soulthread .st-rows .wd-list > li { display: block; padding: 13px 0; border-top: 1px dashed rgba(0, 0, 0, .4); }
.soulthread .st-rows .wd-list > li:last-child { border-bottom: 1px dashed rgba(0, 0, 0, .4); }
.soulthread .st-rows .wd-list-content:not(:has(> a)),
.soulthread .st-rows .wd-list-content > a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 14px; align-items: baseline; }
.soulthread .st-rows-light .wd-list-content:not(:has(> a)),
.soulthread .st-rows-light .wd-list-content > a { grid-template-columns: 128px minmax(0, 1fr); }
.soulthread .st-rows .wd-list strong {
	font-family: var(--st-tech);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.soulthread .st-rows-light .wd-list > li,
.soulthread .st-rows-light .wd-list > li:last-child { border-style: solid; border-color: rgba(255, 255, 255, .4); padding: 16px 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
	.soulthread .st-rows-light .wd-list-content:not(:has(> a)),
	.soulthread .st-rows-light .wd-list-content > a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.soulthread .st-dash-list .info-box-inner ul { list-style: none; margin: 0 0 18px; padding: 0; }
.soulthread .st-dash-list .info-box-inner li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.soulthread .st-dash-list .info-box-inner li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 1px; background: currentColor; }
.soulthread .st-dash-list .info-box-title { margin-bottom: 16px; }
.soulthread .st-dash-list .info-btn-wrapper .btn { color: var(--wd-title-color); border-color: var(--wd-title-color); }
.soulthread .st-dash-list .info-btn-wrapper .btn:hover { color: var(--st-accent); border-color: var(--st-accent); }

.soulthread .st-sec-label { overflow: hidden; }
.soulthread .st-tag > .elementor-widget-wrap { max-width: 470px; margin-inline: auto; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
	.soulthread .st-tag > .elementor-widget-wrap { animation: st-swing 5s ease-in-out infinite alternate; }
}
@keyframes st-swing { from { transform: rotate(-3.5deg); } to { transform: rotate(-1deg); } }
@media (max-width: 767px) { .soulthread .st-tag > .elementor-widget-wrap { animation: none; transform: none; } }

/* Hero slider: pagination text and a soft light behind the product. */
.soulthread .st-sec-hero .wd-slider-pagin.wd-style-text-1 li {
	font-family: var(--st-tech);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	padding-block: 12px;
	margin-inline-end: 22px;
}
.soulthread .st-sec-hero .wd-slider-pagin { padding-inline: max(15px, calc((100vw - var(--wd-container-w)) / 2 + 15px)); padding-bottom: 14px; }
.soulthread .st-sec-hero .wd-slide { background-image: radial-gradient(ellipse 46% 60% at 76% 48%, rgba(255, 255, 255, .13), transparent 70%); }
.soulthread .st-hero-front img,
.soulthread .st-hero-back img { aspect-ratio: 4 / 5; object-fit: cover; }
.soulthread .st-hero-back img { filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
	.soulthread .st-zoom img { transition: none; }
}

/* ---------- 4. Content never waits for a script ----------
   Elementor hides every widget that has an entrance animation (class "elementor-invisible") and
   WoodMart hides every element that has a WoodMart animation (class "wd-animation-...") until
   their JavaScript reveals it on scroll. When that script runs late or not at all on a phone
   (delayed-JS / cache plugins, data saver, in-app browsers such as Instagram), the page stays empty.

   Phones and tablets: the content is simply always visible; entrance animations are off there.
   Larger screens: the animations stay, but anything still hidden after 3 seconds shows anyway. */
@keyframes st-show { to { visibility: inherit; } }
.soulthread .elementor-invisible { animation: st-show 0s linear 3s forwards; }

@media (max-width: 1024px) {
	.soulthread .elementor-invisible { visibility: inherit !important; animation: none; }
	.soulthread .elementor-element.animated { animation: none !important; }
	.soulthread [class*="wd-animation"] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ---------- 5. Dark mode over an imported WoodMart prebuilt website ----------
   A prebuilt website (demo) brings its own Theme Settings: a light page background and white
   product cards. Dark mode makes the text white, so on those surfaces it disappeared.
   In dark mode the page and the product cards are forced dark. */
html[data-st-theme="dark"] body.soulthread,
html[data-st-theme="dark"] body.soulthread :is(.website-wrapper, .wd-page-wrapper, .wd-page-content) {
	background-color: var(--st-bg) !important;
	background-image: none !important;
}
html[data-st-theme="dark"] body.soulthread :is(.wd-products-with-bg, .wd-products-with-bg .wd-product, .wd-products-with-bg .wd-cat) {
	--wd-prod-bg: #0c0c0d !important;
	--wd-bordered-bg: #0c0c0d !important;
}