/*
Theme Name: Startuds WooCommerce
Theme URI: https://startuds.com/theme/startuds-woocommerce
Author: Startuds
Author URI: https://startuds.com
Description: Startuds WooCommerce is a full-featured, fully responsive WooCommerce theme built for maximum third-party plugin compatibility. Every colour, font, button label, banner and product card style is controlled from the WordPress admin. Hook-first architecture keeps variation swatch plugins, payment gateways and page builders working without conflict.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: startuds
Tags: e-commerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, left-sidebar, right-sidebar, theme-options, threaded-comments, translation-ready, blog, grid-layout

Startuds WooCommerce WordPress Theme, (C) 2026 Startuds
Startuds WooCommerce is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  Design tokens (CSS custom properties)
   2.  Reset & normalise
   3.  Typography
   4.  Layout containers & grid
   5.  Buttons
   6.  Forms
   7.  Utilities & accessibility
   8.  Responsive helpers
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   Every value below is overwritten at runtime by inc/dynamic-css.php using
   the user's Customizer choices. Declared here so the theme still renders
   correctly if the inline block is ever stripped by an optimisation plugin.
   ========================================================================== */

:root {
	/* --- Brand ------------------------------------------------------- */
	--st-primary:            #c8a951;
	--st-primary-hover:      #b3963f;
	--st-secondary:          #2b3245;
	--st-dark:               #111418;

	/* --- Text -------------------------------------------------------- */
	--st-heading:            #1c1c1c;
	--st-body:               #6d6d6d;
	--st-muted:              #9a9a9a;
	--st-link:               #1c1c1c;
	--st-link-hover:         #c8a951;

	/* --- Surfaces ---------------------------------------------------- */
	--st-bg:                 #ffffff;
	--st-bg-alt:             #f6f6f6;
	--st-card-bg:            #ffffff;
	--st-card-bg-hover:      #ffffff;
	--st-image-bg:           #f6f6f6;

	/* --- Structure --------------------------------------------------- */
	--st-border:             #e8e8e8;
	--st-divider:            #efefef;

	/* --- Commerce ---------------------------------------------------- */
	--st-sale-bg:            #c8a951;
	--st-sale-text:          #ffffff;
	--st-star:               #f5c518;
	--st-instock:            #12855b;
	--st-outofstock:         #d0342c;

	/* --- Regions ----------------------------------------------------- */
	--st-topbar-bg:          #1c1c1c;
	--st-topbar-text:        #ffffff;
	--st-header-bg:          #ffffff;
	--st-footer-bg:          #1c1c1c;
	--st-footer-text:        #b4b4b4;
	--st-footer-heading:     #ffffff;

	/* --- Typography: families ---------------------------------------- */
	--st-font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--st-font-heading: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--st-font-menu:    'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--st-font-button:  'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--st-font-product: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* --- Typography: sizes ------------------------------------------- */
	--st-size-body:          15px;
	--st-size-h1:            48px;
	--st-size-h2:            36px;
	--st-size-h3:            26px;
	--st-size-h4:            20px;
	--st-size-h5:            17px;
	--st-size-h6:            15px;
	--st-size-h1-mobile:     30px;
	--st-size-h2-mobile:     25px;
	--st-size-h3-mobile:     20px;
	--st-size-menu:          15px;
	--st-size-button:        14px;
	--st-size-product-title: 17px;
	--st-size-product-price: 17px;
	--st-size-small:         13px;

	/* --- Typography: weight, spacing, transform ---------------------- */
	--st-weight-body:        400;
	--st-weight-heading:     700;
	--st-weight-menu:        600;
	--st-weight-button:      600;
	--st-weight-product:     500;
	--st-lh-body:            1.75;
	--st-lh-heading:         1.2;
	--st-ls-heading:         -0.01em;
	--st-ls-menu:            0.03em;
	--st-ls-button:          0.06em;
	--st-tt-heading:         none;
	--st-tt-section:         uppercase;
	--st-tt-menu:            uppercase;
	--st-tt-button:          uppercase;

	/* --- Layout ------------------------------------------------------ */
	--st-container:          1200px;
	--st-gutter:             15px;
	--st-section-pad:        80px;
	--st-section-pad-mobile: 50px;
	--st-sidebar-width:      300px;
	--st-sidebar-gap:        50px;

	/* --- Components -------------------------------------------------- */
	--st-radius:             0px;
	--st-radius-card:        0px;
	--st-radius-input:       0px;
	--st-card-border-width:  1px;
	--st-card-padding:       0px;
	--st-btn-pad-y:          15px;
	--st-btn-pad-x:          38px;
	--st-shadow:             0 4px 20px rgba(17, 20, 24, .07);
	--st-shadow-lg:          0 12px 34px rgba(17, 20, 24, .11);
	--st-transition:         .25s ease;
}

/* ==========================================================================
   2. RESET & NORMALISE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--st-bg);
	color: var(--st-body);
	font-family: var(--st-font-body);
	font-size: var(--st-size-body);
	font-weight: var(--st-weight-body);
	line-height: var(--st-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

svg {
	fill: currentColor;
}

iframe,
embed,
object {
	max-width: 100%;
}

ul,
ol {
	margin: 0 0 1.5em;
	padding-left: 1.3em;
}

li > ul,
li > ol {
	margin-bottom: 0;
}

blockquote {
	margin: 0 0 1.5em;
	padding: 0 0 0 24px;
	border-left: 3px solid var(--st-primary);
	font-size: 1.1em;
	font-style: italic;
}

hr {
	height: 1px;
	margin: 2.5em 0;
	border: 0;
	background: var(--st-border);
}

table {
	width: 100%;
	margin-bottom: 1.5em;
	border-collapse: collapse;
}

th,
td {
	padding: 12px 14px;
	border: 1px solid var(--st-border);
	text-align: left;
}

th {
	color: var(--st-heading);
	font-weight: 600;
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
}

pre {
	overflow-x: auto;
	padding: 18px;
	background: var(--st-bg-alt);
	border-radius: var(--st-radius);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
	margin: 0 0 .6em;
	color: var(--st-heading);
	font-family: var(--st-font-heading);
	font-weight: var(--st-weight-heading);
	line-height: var(--st-lh-heading);
	letter-spacing: var(--st-ls-heading);
	text-transform: var(--st-tt-heading);
}

h1 { font-size: var(--st-size-h1); }
h2 { font-size: var(--st-size-h2); }
h3 { font-size: var(--st-size-h3); }
h4 { font-size: var(--st-size-h4); }
h5 { font-size: var(--st-size-h5); }
h6 { font-size: var(--st-size-h6); }

p {
	margin: 0 0 1.5em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--st-link);
	text-decoration: none;
	transition: color var(--st-transition);
}

a:hover,
a:focus {
	color: var(--st-link-hover);
}

.st-entry-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

strong,
b {
	font-weight: 600;
}

small,
.st-small {
	font-size: var(--st-size-small);
}

.st-muted {
	color: var(--st-muted);
}

/* Section heading block used across the homepage and shop */
.st-section-head {
	margin-bottom: 46px;
	text-align: center;
}

.st-section-head__eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--st-primary);
	font-family: var(--st-font-heading);
	font-size: var(--st-size-small);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.st-section-head__title {
	margin: 0 0 8px;
	text-transform: var(--st-tt-section);
	letter-spacing: .02em;
}

.st-section-head__subtitle {
	margin: 0;
	color: var(--st-body);
	font-size: 16px;
}

.st-section-head--left {
	text-align: left;
}

/* ==========================================================================
   4. LAYOUT CONTAINERS & GRID
   ========================================================================== */

.st-container {
	width: 100%;
	max-width: var(--st-container);
	margin-inline: auto;
	padding-inline: var(--st-gutter);
}

.st-container--wide {
	max-width: calc(var(--st-container) + 240px);
}

.st-container--full {
	max-width: 100%;
	padding-inline: 0;
}

.st-section {
	padding-block: var(--st-section-pad);
}

.st-section--tight {
	padding-block: calc(var(--st-section-pad) * .55);
}

.st-section--flush-top {
	padding-top: 0;
}

.st-section--alt {
	background: var(--st-bg-alt);
}

.st-main {
	display: block;
	min-height: 40vh;
}

/* Content + sidebar layout. Mobile-first: single column, sidebar below. */
.st-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.st-layout--full {
	grid-template-columns: minmax(0, 1fr);
}

/* Generic auto-fit grid used by category tiles, blog grids, brand strips */
.st-grid {
	display: grid;
	gap: 30px;
}

.st-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.st-flex {
	display: flex;
	align-items: center;
	gap: 20px;
}

.st-flex--between {
	justify-content: space-between;
}

.st-flex--center {
	justify-content: center;
}

.st-flex--wrap {
	flex-wrap: wrap;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.st-btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	display: inline-block;
	padding: var(--st-btn-pad-y) var(--st-btn-pad-x);
	border: 1px solid var(--st-dark);
	border-radius: var(--st-radius);
	background: var(--st-dark);
	color: #fff;
	font-family: var(--st-font-button);
	font-size: var(--st-size-button);
	font-weight: var(--st-weight-button);
	line-height: 1.4;
	letter-spacing: var(--st-ls-button);
	text-transform: var(--st-tt-button);
	text-align: center;
	cursor: pointer;
	transition: background var(--st-transition), border-color var(--st-transition), color var(--st-transition);
}

.st-btn:hover,
.st-btn:focus,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	border-color: var(--st-primary);
	background: var(--st-primary);
	color: #fff;
}

.st-btn--primary {
	border-color: var(--st-primary);
	background: var(--st-primary);
}

.st-btn--primary:hover {
	border-color: var(--st-dark);
	background: var(--st-dark);
}

.st-btn--outline {
	background: transparent;
	color: var(--st-dark);
}

.st-btn--outline:hover {
	background: var(--st-dark);
	color: #fff;
}

.st-btn--light {
	border-color: #fff;
	background: #fff;
	color: var(--st-dark);
}

.st-btn--light:hover {
	border-color: var(--st-primary);
	background: var(--st-primary);
	color: #fff;
}

.st-btn--full {
	display: block;
	width: 100%;
}

.st-btn--sm {
	padding: 10px 22px;
	font-size: 13px;
}

.st-btn--lg {
	padding: 18px 46px;
	font-size: 15px;
}

.st-btn__icon {
	display: inline-flex;
	vertical-align: middle;
	margin-right: 8px;
}

.st-btn__icon--after {
	margin-right: 0;
	margin-left: 8px;
}

/* ==========================================================================
   6. FORMS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-input);
	background: #fff;
	color: var(--st-heading);
	font-family: var(--st-font-body);
	font-size: var(--st-size-body);
	line-height: 1.5;
	transition: border-color var(--st-transition);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--st-primary);
	outline: 0;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

label {
	display: block;
	margin-bottom: 7px;
	color: var(--st-heading);
	font-size: var(--st-size-small);
	font-weight: 500;
}

::placeholder {
	color: var(--st-muted);
	opacity: 1;
}

fieldset {
	margin: 0 0 1.5em;
	padding: 0;
	border: 0;
}

/* ==========================================================================
   7. UTILITIES & ACCESSIBILITY
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

.st-skip-link {
	position: absolute;
	top: -100px;
	left: 6px;
	z-index: 100000;
	padding: 14px 24px;
	background: #fff;
	color: var(--st-dark);
	font-size: 14px;
	font-weight: 600;
	transition: top .2s ease;
}

.st-skip-link:focus {
	top: 8px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--st-primary);
	outline-offset: 2px;
}

.st-hidden      { display: none !important; }
.st-text-center { text-align: center; }
.st-text-left   { text-align: left; }
.st-text-right  { text-align: right; }
.st-mb-0        { margin-bottom: 0 !important; }
.st-mt-auto     { margin-top: auto; }

.st-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(17, 20, 24, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

.st-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* Aspect ratio boxes for banners and category tiles */
.st-ratio {
	position: relative;
	overflow: hidden;
	background: var(--st-image-bg);
}

.st-ratio > img,
.st-ratio > picture > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.st-ratio--1x1  { padding-top: 100%; }
.st-ratio--4x3  { padding-top: 75%; }
.st-ratio--3x4  { padding-top: 133.33%; }
.st-ratio--16x9 { padding-top: 56.25%; }

/* Styled placeholder shown before an admin uploads an image */
.st-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--st-image-bg);
	color: var(--st-muted);
}

.st-placeholder svg {
	width: 34%;
	max-width: 120px;
	height: auto;
	opacity: .45;
}

.st-placeholder__label {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	font-size: 12px;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}

/* WordPress core alignment and caption classes */
.alignleft {
	float: left;
	margin: .3em 1.6em 1em 0;
}

.alignright {
	float: right;
	margin: .3em 0 1em 1.6em;
}

.aligncenter {
	clear: both;
	margin-inline: auto;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption {
	margin-top: 8px;
	color: var(--st-muted);
	font-size: var(--st-size-small);
	text-align: center;
}

.sticky,
.bypostauthor {
	display: block;
}

.st-clearfix::after {
	content: '';
	display: table;
	clear: both;
}

/* ==========================================================================
   8. RESPONSIVE HELPERS
   Mobile-first: everything above is the small-screen baseline.
   ========================================================================== */

/* Mobile: shrink large display type so headings never overflow. */
@media (max-width: 782px) {
	:root {
		--st-section-pad: var(--st-section-pad-mobile);
	}

	h1 { font-size: var(--st-size-h1-mobile); }
	h2 { font-size: var(--st-size-h2-mobile); }
	h3 { font-size: var(--st-size-h3-mobile); }

	.st-btn,
	button,
	input[type="submit"] {
		padding: 13px 28px;
	}
}

@media (max-width: 600px) {
	.st-grid--3,
	.st-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 1.4em;
	}
}

/* Tablet up: restore multi-column grids. */
@media (min-width: 783px) {
	.st-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.st-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop up: sidebar layouts and full four-column grids. */
@media (min-width: 992px) {
	.st-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.st-layout {
		grid-template-columns: minmax(0, 1fr) var(--st-sidebar-width);
		gap: var(--st-sidebar-gap);
	}

	.st-layout--left-sidebar {
		grid-template-columns: var(--st-sidebar-width) minmax(0, 1fr);
	}

	.st-layout--left-sidebar .st-content {
		order: 2;
	}

	.st-layout--left-sidebar .st-sidebar {
		order: 1;
	}

	.st-layout--full {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Print: drop chrome, keep content. */
@media print {
	.st-header,
	.st-footer,
	.st-topbar,
	.st-scroll-top,
	.st-overlay,
	.st-mobile-panel,
	.st-cart-panel {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}
}

/* ==========================================================================
   HEADER AND FOOTER  -  appended by Fix v6
   These rules were missing, which is why the header stacked vertically and
   the icons rendered as black squares. The icons were picking up the global
   button styling because .st-action was never excluded from it.
   ========================================================================== */

/* --- Reset: icon links and icon buttons are NOT buttons ------------------ */

.st-action,
.st-action:hover,
.st-burger,
.st-burger:hover,
.st-search__submit,
.st-search__submit:hover,
.st-panel-close,
.st-panel-close:hover,
.st-topbar__close,
.st-topbar__close:hover,
.st-hero__arrow,
.st-hero__dot,
.st-qty__btn,
.st-submenu-toggle {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1;
}

/* --- Top bar -------------------------------------------------------------- */

.st-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	position: relative;
	min-height: 22px;
}

.st-topbar__menu ul {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-topbar__menu a {
	color: inherit;
	font-size: var(--st-size-small);
}

.st-topbar__text {
	flex: 1 1 auto;
	text-align: center;
}

.st-topbar__close {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: inherit;
	opacity: .7;
	cursor: pointer;
}

.st-topbar__close:hover { opacity: 1; }

@media (max-width: 782px) {
	.st-topbar__menu { display: none; }
	.st-topbar { font-size: 13px; }
}

/* --- Header shell --------------------------------------------------------- */

.st-header {
	position: relative;
	z-index: 500;
}

.st-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--st-header-height, 90px);
	padding-block: 10px;
}

.st-header__right {
	display: flex;
	align-items: center;
	gap: 24px;
}

.st-header__col {
	display: flex;
	align-items: center;
	flex: 1 1 0;
}

.st-header__col--center { justify-content: center; flex: 0 0 auto; }
.st-header__col--right  { justify-content: flex-end; }

/* --- Logo ----------------------------------------------------------------- */

.st-logo {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 220px;
}

.st-logo img,
.st-logo .custom-logo {
	width: auto;
	max-width: 100%;
	max-height: 52px;
	height: auto;
	object-fit: contain;
}

.st-logo__wrap { margin: 0; }

.st-logo__text {
	font-family: var(--st-font-heading);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--st-heading);
	line-height: 1.1;
	white-space: nowrap;
}

.st-logo__tagline {
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--st-muted);
}

/* --- Navigation ----------------------------------------------------------- */

.st-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.st-nav--right { justify-content: flex-end; flex: 0 0 auto; }
.st-nav--split { justify-content: flex-start; }

.st-nav ul.st-menu,
.st-nav > ul {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-nav li { position: relative; margin: 0; }

.st-nav a {
	display: block;
	padding: 8px 0;
	font-family: var(--st-font-menu);
	font-size: var(--st-size-menu);
	font-weight: var(--st-weight-menu);
	letter-spacing: var(--st-ls-menu);
	text-transform: var(--st-tt-menu);
	color: var(--st-heading);
	white-space: nowrap;
}

.st-nav a:hover,
.st-nav .current-menu-item > a { color: var(--st-primary); }

.st-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

/* Dropdowns */

.st-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 210px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 8px 0;
	border: 1px solid var(--st-border);
	background: #fff;
	box-shadow: var(--st-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.st-nav li:hover > ul,
.st-nav li:focus-within > ul,
.st-nav li.is-tapped > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.st-nav ul ul a {
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.st-nav ul ul ul { top: 0; left: 100%; }

/* --- Header actions ------------------------------------------------------- */

.st-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

/* Search */

.st-search {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 240px;
}

.st-search__label { margin: 0; flex: 1 1 auto; }

.st-search__field {
	width: 100%;
	min-width: 0;
	padding: 7px 0;
	border: 0;
	border-bottom: 1px solid var(--st-border);
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	color: var(--st-body);
}

.st-search__field:focus {
	border-bottom-color: var(--st-primary);
	outline: 0;
}

.st-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--st-heading);
	cursor: pointer;
}

.st-search__submit:hover { color: var(--st-primary); }

/* Icon links */

.st-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--st-heading);
}

.st-action:hover { color: var(--st-primary); }

.st-action__count {
	position: absolute;
	top: -7px;
	right: -9px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 99px;
	background: var(--st-primary);
	color: #fff;
	font-family: var(--st-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Burger */

.st-burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--st-heading);
	cursor: pointer;
}

.st-burger:hover { color: var(--st-primary); }

/* --- Sticky and shrink ---------------------------------------------------- */

.st-header.is-sticky {
	position: sticky;
	top: 0;
}

.admin-bar .st-header.is-sticky { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .st-header.is-sticky { top: 46px; }
}

.st-header.is-sticky.is-scrolled {
	box-shadow: 0 2px 14px rgba(17, 20, 24, .08);
}

.st-header.can-shrink.is-shrunk .st-header__inner {
	min-height: 64px;
}

.st-header.can-shrink.is-shrunk .st-logo img { max-height: 40px; }

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 1024px) {

	.st-nav { display: none; }
	.st-burger { display: inline-flex; }

	.st-search { max-width: 150px; }
	.st-header__actions { gap: 14px; }
	.st-logo { max-width: 160px; }
	.st-logo img { max-height: 42px; }
}

@media (max-width: 600px) {

	.st-search { display: none; }
	.st-header__inner { min-height: 64px; gap: 12px; }
	.st-logo img { max-height: 36px; }
}

/* --- Off-canvas panels ---------------------------------------------------- */

.st-mobile-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	width: 330px;
	max-width: 88vw;
	display: flex;
	flex-direction: column;
	background: var(--st-bg);
	box-shadow: -8px 0 40px rgba(17, 20, 24, .15);
	transform: translateX(102%);
	transition: transform .3s ease;
}

.st-mobile-panel.is-open { transform: translateX(0); }
.st-mobile-panel[hidden] { display: flex; }

.st-mobile-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--st-border);
}

.st-mobile-panel__head .st-logo { max-width: 150px; }
.st-mobile-panel__head .st-logo img { max-height: 38px; }

.st-mobile-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 22px;
}

.st-mobile-panel__body .st-search {
	max-width: 100%;
	margin-bottom: 20px;
}

.st-mobile-menu {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.st-mobile-menu li { position: relative; }

.st-mobile-menu a {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--st-border);
	font-family: var(--st-font-menu);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--st-heading);
}

.st-mobile-menu ul {
	margin: 0;
	padding: 0 0 0 16px;
	list-style: none;
}

.st-mobile-menu ul a {
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
}

.st-submenu-toggle {
	position: absolute;
	top: 6px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.st-submenu-toggle__icon {
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--st-heading);
	border-bottom: 2px solid var(--st-heading);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.st-mobile-menu .is-open > .st-submenu-toggle .st-submenu-toggle__icon {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.st-mobile-panel__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--st-border);
}

.st-mobile-panel__links a {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--st-heading);
}

.st-panel-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--st-heading);
	cursor: pointer;
}

.st-panel-close:hover { color: var(--st-primary); }

body.st-panel-open { overflow: hidden; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.st-footer {
	margin-top: auto;
	background: var(--st-footer-bg);
	color: var(--st-footer-text);
}

.st-footer a { color: var(--st-footer-text); }
.st-footer a:hover { color: var(--st-primary); }

.st-footer__widgets { padding-block: 60px 40px; }

.st-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px;
}

.st-footer__col .st-widget:last-child { margin-bottom: 0; }

.st-footer .st-widget-title {
	position: relative;
	margin-bottom: 18px;
	padding-bottom: 0;
	border: 0;
	color: var(--st-footer-heading);
	font-size: 16px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.st-footer--titles-underline .st-widget-title {
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.st-footer--titles-dash .st-widget-title::after {
	content: '';
	display: inline-block;
	width: 30px;
	height: 1px;
	margin-left: 12px;
	background: var(--st-primary);
	vertical-align: middle;
}

.st-footer .st-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-footer .st-widget ul li {
	padding: 6px 0;
	border: 0;
	font-size: 14px;
}

.st-footer__hint {
	margin: 0;
	padding: 30px 0;
	color: rgba(255, 255, 255, .55);
	font-size: 14px;
	text-align: center;
}

/* --- Bottom bar ----------------------------------------------------------- */

.st-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 22px;
}

.st-footer__bottom-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	font-size: 14px;
}

.st-footer__menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-footer__menu a { font-size: 14px; }

.st-social {
	display: flex;
	gap: 14px;
	align-items: center;
}

.st-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	color: var(--st-footer-text);
	transition: border-color var(--st-transition), color var(--st-transition), background var(--st-transition);
}

.st-social__link:hover {
	border-color: var(--st-primary);
	background: var(--st-primary);
	color: #fff;
}

/* Payment labels: were running together with no spacing. */

.st-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.st-payments__item {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 3px;
	background: rgba(255, 255, 255, .06);
	color: var(--st-footer-text);
	font-family: var(--st-font-heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
}

/* --- Footer responsive ---------------------------------------------------- */

@media (min-width: 601px) {
	.st-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {

	.st-footer__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.st-footer__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.st-footer__bottom-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.st-footer__menu ul { justify-content: flex-start; }
	.st-payments { justify-content: flex-end; }
}

/* --- Scroll to top -------------------------------------------------------- */

.st-scroll-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--st-dark);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	transition: opacity .3s ease, visibility .3s ease, background var(--st-transition);
}

.st-scroll-top.is-visible { opacity: 1; visibility: visible; }
.st-scroll-top:hover { background: var(--st-primary); }

/* --- Page shell: keeps the footer at the bottom on short pages ------------ */

.st-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.st-main { flex: 1 0 auto; }

/* --- Hero: stop the arrows colliding with the text ------------------------ */

.st-hero__content { position: relative; z-index: 6; }

.st-hero--split .st-hero__arrow--prev { left: auto; right: 66px; }
.st-hero--split .st-hero__arrow--next { right: 12px; }

@media (max-width: 782px) {
	.st-hero__arrow { display: none !important; }
}

/* --- Product page: suppress the duplicate page header --------------------- */

.single-product .st-page-header { display: none; }

/* ==========================================================================
   FIX v7  -  hero, sticky header, menu, product page, cart, checkout
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STICKY HEADER OVERLAP
   The sticky header had no background of its own on scroll, so hero images
   and product photos showed through it. It also sat at the same stacking
   level as the hero, so tall images overlapped the menu.
   -------------------------------------------------------------------------- */

.st-header {
	position: relative;
	z-index: 900;
	background: var(--st-header-bg, #fff);
}

.st-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--st-header-bg, #fff);
}

/* Opaque on scroll, with a real shadow so it reads as a layer. */
.st-header.is-sticky.is-scrolled {
	background: var(--st-header-bg, #fff);
	box-shadow: 0 2px 18px rgba(17, 20, 24, .10);
}

/* The top bar must also sit above page content. */
.st-topbar {
	position: relative;
	z-index: 901;
}

/* Nothing in the page may paint over the header. */
.st-main,
.st-hero,
.st-hero__slide,
.st-hero__bg,
.st-hero__media,
.woocommerce div.product,
.st-single-product {
	z-index: 1;
}

.st-hero { position: relative; overflow: hidden; }

/* --------------------------------------------------------------------------
   2. HERO SECTION
   The split hero gave the image no height limit, so a tall product photo
   pushed the section to thousands of pixels. Text had no vertical padding.
   -------------------------------------------------------------------------- */

.st-hero--split .st-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	align-items: center;
	padding-block: 40px;
}

.st-hero--split .st-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: var(--st-hero-height, 620px);
	overflow: hidden;
	border-radius: var(--st-radius-card);
	background: var(--st-image-bg);
}

.st-hero--split .st-hero__media .st-ratio {
	width: 100%;
	padding-top: 0;
	height: auto;
	max-height: var(--st-hero-height, 620px);
}

.st-hero--split .st-hero__media img {
	position: static;
	width: 100%;
	height: auto;
	max-height: var(--st-hero-height, 620px);
	object-fit: contain;
}

.st-hero__content {
	position: relative;
	z-index: 6;
	max-width: 560px;
	padding-block: 10px;
}

.st-hero__eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: var(--st-font-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--st-primary);
}

.st-hero__heading {
	margin: 0 0 16px;
	font-size: clamp(28px, 5vw, var(--st-size-h1));
	line-height: 1.1;
}

.st-hero__subtext {
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.6;
	opacity: .88;
}

/* Arrows: circular, outside the text, hidden on small screens. */

.st-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 7;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--st-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--st-dark);
	cursor: pointer;
	transition: background var(--st-transition), color var(--st-transition);
}

.st-hero--slider .st-hero__arrow { display: flex; }

.st-hero__arrow:hover {
	border-color: var(--st-primary);
	background: var(--st-primary);
	color: #fff;
}

.st-hero__arrow--prev { left: auto; right: 68px; }
.st-hero__arrow--next { right: 16px; }

.st-hero__dots {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	z-index: 7;
	display: flex;
	gap: 9px;
	justify-content: center;
}

.st-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 20, 24, .22);
	cursor: pointer;
	transition: background var(--st-transition), transform var(--st-transition);
}

.st-hero__dot.is-active {
	background: var(--st-primary);
	transform: scale(1.3);
}

@media (min-width: 783px) {

	.st-hero--split .st-hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		min-height: var(--st-hero-height, 620px);
		padding-block: 30px;
	}
}

@media (max-width: 782px) {

	.st-hero__arrow { display: none !important; }

	.st-hero--split .st-hero__media,
	.st-hero--split .st-hero__media img,
	.st-hero--split .st-hero__media .st-ratio {
		max-height: var(--st-hero-height-mobile, 420px);
	}

	.st-hero__content { max-width: 100%; text-align: center; }
	.st-hero--split .st-hero__grid { padding-block: 26px; }
}

/* --------------------------------------------------------------------------
   3. MENU
   HOME sat alone with no spacing and no hover state. Dropdowns had no
   visible boundary.
   -------------------------------------------------------------------------- */

.st-nav ul.st-menu > li > a {
	position: relative;
	padding: 10px 2px;
}

/* Underline that grows on hover. */
.st-nav ul.st-menu > li > a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: var(--st-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.st-nav ul.st-menu > li > a:hover::before,
.st-nav ul.st-menu > li.current-menu-item > a::before,
.st-nav ul.st-menu > li.current_page_item > a::before {
	transform: scaleX(1);
}

.st-nav ul.st-menu { gap: 32px; }

.st-nav ul ul {
	border-radius: var(--st-radius-card);
	box-shadow: 0 12px 34px rgba(17, 20, 24, .12);
	padding: 10px 0;
}

.st-nav ul ul li + li { border-top: 1px solid var(--st-divider); }

.st-nav ul ul a:hover {
	background: var(--st-bg-alt);
	color: var(--st-primary);
}

/* Search field: was a plain underline, now a bordered pill. */

.st-search {
	max-width: 260px;
	padding: 0 4px 0 12px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-input);
	background: var(--st-bg);
	transition: border-color var(--st-transition);
}

.st-search:focus-within { border-color: var(--st-primary); }

.st-search__field {
	padding: 9px 0;
	border: 0;
	background: transparent;
}

.st-search__field:focus { border: 0; outline: 0; }

.st-search__submit { order: 2; padding-inline: 6px; }

/* --------------------------------------------------------------------------
   4. SINGLE PRODUCT
   The title wrapped one word per line because the summary column had no
   minimum width and the H1 kept the 48px homepage size.
   -------------------------------------------------------------------------- */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce div.product .summary,
.woocommerce div.product .entry-summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
}

/* Full-width rows below the two columns. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-details__short-description {
	grid-column: 1 / -1;
}

.woocommerce div.product .product_title {
	margin: 0 0 14px;
	font-size: clamp(22px, 3vw, 34px);
	line-height: 1.22;
	text-transform: none;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.woocommerce div.product .woocommerce-breadcrumb {
	margin: 0 0 22px;
	font-size: var(--st-size-small);
	color: var(--st-muted);
}

.woocommerce div.product .woocommerce-breadcrumb a { color: var(--st-body); }
.woocommerce div.product .woocommerce-breadcrumb a:hover { color: var(--st-primary); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: block;
	margin: 0 0 20px;
	font-size: 24px;
}

/* Gallery: cap the image so a portrait photo does not run off screen. */

.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image {
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	max-height: 620px;
	object-fit: contain;
	background: var(--st-image-bg);
	border-radius: var(--st-radius-card);
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 12px;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li { margin: 0; }

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img {
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-card);
	opacity: .7;
	cursor: pointer;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--st-primary);
	opacity: 1;
}

/* Variations table. */

.woocommerce div.product form.cart .variations {
	margin-bottom: 18px;
	border: 0;
}

.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: 14px; }
.woocommerce div.product form.cart .variations td { display: block; padding: 0; border: 0; }

.woocommerce div.product form.cart .variations label {
	margin-bottom: 8px;
	font-family: var(--st-font-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--st-heading);
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--st-muted);
}

.woocommerce div.product .single_variation_wrap { width: 100%; }

.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

.woocommerce div.product form.cart.variations_form { display: block; }

.woocommerce div.product form.cart .st-cart-row,
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 52px;
}

@media (min-width: 783px) {

	.woocommerce div.product {
		grid-template-columns: minmax(0, 1.05fr) minmax(320px, 1fr);
		gap: 46px;
	}
}

@media (min-width: 1200px) {
	.woocommerce div.product { gap: 60px; }
}

/* --------------------------------------------------------------------------
   5. CART PAGE
   -------------------------------------------------------------------------- */

.st-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.woocommerce table.shop_table.cart { border-collapse: collapse; }

.woocommerce table.shop_table.cart th,
.woocommerce table.shop_table.cart td { vertical-align: middle; }

.woocommerce table.cart img { width: 74px; height: auto; border-radius: var(--st-radius-card); }

.woocommerce table.cart td.actions {
	padding: 20px 14px;
	background: var(--st-bg-alt);
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 10px;
	float: none;
	margin-bottom: 14px;
}

.woocommerce table.cart td.actions .coupon input.input-text {
	width: auto;
	min-width: 180px;
	flex: 0 1 220px;
}

.woocommerce table.cart td.actions .button { float: none; }

.st-cart-layout__totals .cart_totals {
	position: relative;
	padding: 24px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-card);
	background: var(--st-bg-alt);
}

.woocommerce-cart .cart-collaterals .cart_totals > h2 {
	margin: 0 0 16px;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.woocommerce-cart .cart-collaterals .cart_totals table {
	margin: 0 0 18px;
	border: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--st-border);
	background: transparent;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
.woocommerce-cart .cart-collaterals .cart_totals .order-total td {
	border-bottom: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--st-heading);
}

.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	margin: 0;
	padding: 16px 24px;
	font-size: 15px;
	text-align: center;
}

.st-cart-continue a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: var(--st-size-small);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Empty cart. */

.woocommerce .cart-empty,
.wc-empty-cart-message .cart-empty {
	margin-bottom: 14px;
	font-size: 20px;
	font-weight: 600;
	color: var(--st-heading);
	text-align: center;
}

.st-empty-cart__action { text-align: center; }

@media (min-width: 992px) {

	.st-cart-two-column .st-cart-layout {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 40px;
	}

	.st-cart-two-column .st-cart-layout__totals {
		position: sticky;
		top: 110px;
	}
}

/* --------------------------------------------------------------------------
   6. CHECKOUT PAGE
   -------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

.woocommerce-checkout form.checkout { display: contents; }

.woocommerce-checkout #customer_details { min-width: 0; }

.woocommerce-checkout #customer_details .col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 26px;
}

.woocommerce-checkout h3 {
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--st-border);
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.woocommerce form .form-row label { font-size: var(--st-size-small); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 12px 14px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-input);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--st-outofstock);
}

.st-order-review {
	padding: 24px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-card);
	background: var(--st-bg-alt);
}

.woocommerce-checkout #order_review_heading {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-size: 19px;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	margin: 0 0 18px;
	border: 0;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--st-border);
	background: transparent;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--st-heading);
}

/* Step indicator. */

.st-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 30px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--st-border);
	list-style: none;
	grid-column: 1 / -1;
}

@media (min-width: 992px) {

	.woocommerce-checkout .woocommerce {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 44px;
	}

	.woocommerce-checkout #customer_details .col2-set {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}

	.st-order-review { position: sticky; top: 110px; }
}

/* --------------------------------------------------------------------------
   7. SHOP AND ARCHIVE PAGE HEADER
   -------------------------------------------------------------------------- */

.st-page-header {
	padding-block: 46px;
	background: var(--st-bg-alt);
	color: var(--st-heading);
	text-align: left;
}

.st-page-header__title {
	margin: 0 0 8px;
	color: var(--st-heading);
	font-size: clamp(24px, 4vw, 38px);
	text-transform: none;
}

.st-breadcrumb {
	font-size: var(--st-size-small);
	color: var(--st-muted);
}

.st-breadcrumb a { color: var(--st-body); }
.st-breadcrumb a:hover { color: var(--st-primary); }
.st-breadcrumb__sep { margin-inline: 8px; opacity: .5; }

/* 404 needs breathing room, its buttons were touching. */

.st-404 { max-width: 620px; margin-inline: auto; text-align: center; }
.st-404__icon { margin-bottom: 18px; color: var(--st-muted); }
.st-404__icon svg { margin-inline: auto; }
.st-404__title { margin-bottom: 12px; }
.st-404__search { max-width: 420px; margin: 24px auto; }

.st-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 0;
}

.st-searchform { display: flex; gap: 10px; }
.st-searchform__field { flex: 1 1 auto; }
.st-searchform__submit { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   8. MINI CART PANEL
   -------------------------------------------------------------------------- */

.st-cart-panel__body .woocommerce-mini-cart__empty-message {
	padding: 30px 0;
	text-align: center;
	color: var(--st-muted);
}

.st-cart-panel .woocommerce-mini-cart-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.st-cart-panel .woocommerce-mini-cart-item a:not(.remove) {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--st-heading);
}

.st-cart-panel .woocommerce-mini-cart-item img {
	order: 2;
	width: 58px !important;
	height: auto;
	margin: 0 !important;
	border-radius: var(--st-radius-card);
}

.st-cart-panel .woocommerce-mini-cart-item a.remove {
	order: 0;
	flex: 0 0 auto;
	margin-top: 2px;
}

.st-cart-panel .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	padding: 16px 0;
	border-top: 1px solid var(--st-border);
	font-size: 16px;
	font-weight: 700;
	color: var(--st-heading);
}

.st-cart-panel .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.st-cart-panel .woocommerce-mini-cart__buttons a { margin: 0; }

/* ==========================================================================
   FIX v8  -  hero height, product summary width, card title clamp
   ==========================================================================
   Why v7 did not work:

   HERO. I put max-height on the <img>. But startuds_image() wraps the image
   in .st-ratio, which gets its height from padding-top as a percentage of
   its own WIDTH. The img inside is absolutely positioned, so capping the img
   changes nothing. On a 900px column, padding-top 75% is 675px of height
   regardless of the image. The cap has to go on .st-ratio itself, and the
   padding trick has to be switched off inside the hero.

   PRODUCT SUMMARY. woocommerce.css sets
       .woocommerce div.product div.summary { float: right; width: 48% }
   and it loads after style.css. My selector .woocommerce div.product
   .summary had lower specificity for the width property, so 48% won and the
   column collapsed to about 300px. Hence one word per line. Fixed by
   matching WooCommerce's own selector shape and forcing the value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO  -  cap the ratio box, not the image
   -------------------------------------------------------------------------- */

/* Inside the hero, abandon the padding-top ratio trick entirely. */
.st-hero .st-hero__media .st-ratio,
.st-hero .st-hero__media .st-placeholder {
	position: relative;
	width: 100%;
	height: auto;
	max-height: var(--st-hero-height, 620px);
	padding-top: 0 !important;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-hero .st-hero__media .st-ratio > img,
.st-hero .st-hero__media .st-ratio > picture > img {
	position: static !important;
	inset: auto !important;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--st-hero-height, 620px);
	object-fit: contain;
}

.st-hero--split .st-hero__media {
	max-height: var(--st-hero-height, 620px);
	overflow: hidden;
}

/* Hard cap the whole hero so nothing can stretch it. */
.st-hero--split .st-hero__slide {
	max-height: calc(var(--st-hero-height, 620px) + 80px);
	overflow: hidden;
}

.st-hero--split .st-hero__grid {
	align-items: center;
	max-height: var(--st-hero-height, 620px);
}

/* Text column must never collapse. */
.st-hero--split .st-hero__content {
	min-width: 0;
	padding-block: 24px;
}

/* Admin-only nudge when the hero text is empty. */
.st-hero__content:empty::before {
	content: 'Add hero text in Customize, Startuds Theme Options, Homepage Hero';
	display: block;
	padding: 20px;
	border: 1px dashed var(--st-border);
	color: var(--st-muted);
	font-size: 14px;
}

@media (max-width: 782px) {

	.st-hero .st-hero__media .st-ratio,
	.st-hero .st-hero__media .st-ratio > img,
	.st-hero--split .st-hero__media,
	.st-hero--split .st-hero__grid {
		max-height: var(--st-hero-height-mobile, 420px);
	}

	.st-hero--split .st-hero__slide {
		max-height: none;
	}
}

/* --------------------------------------------------------------------------
   2. SINGLE PRODUCT  -  beat woocommerce.css at its own specificity
   -------------------------------------------------------------------------- */

/* Kill the float and the 48% width using WooCommerce's own selector shape. */

.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce div.product .summary.entry-summary {
	float: none !important;
	clear: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	min-width: 0;
}

.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Now the grid can actually do its job. */

.woocommerce div.product,
.woocommerce-page div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

.woocommerce div.product::before,
.woocommerce div.product::after { content: none; display: none; }

/* Full width rows under the two columns. */

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-gallery + .woocommerce-tabs {
	grid-column: 1 / -1;
	width: 100%;
}

/* Title: readable, wraps on words, three lines is plenty. */

.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title {
	margin: 0 0 14px;
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	text-wrap: pretty;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: block;
	margin: 0 0 22px;
	font-size: 24px;
	font-weight: 700;
}

.woocommerce div.product p.price del { font-size: 19px; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }

/* Gallery: contained, never taller than the viewport. */

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	display: block;
	margin: 0;
	transform: none !important;
}

.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image--placeholder {
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery__image a { display: block; }

.woocommerce div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
	border-radius: var(--st-radius-card);
	background: var(--st-image-bg);
}

.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
	overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	z-index: 4;
}

/* Variation labels and swatch rows. */

.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations label {
	display: block;
	margin: 0 0 9px;
	padding: 0;
	font-family: var(--st-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--st-heading);
}

.woocommerce div.product form.cart .variations td.value { padding: 0 0 18px; }

/* Add to cart row. */

.woocommerce div.product form.cart div.quantity { margin: 0; }

.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-top: 6px;
}

.woocommerce div.product .button.single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 54px;
	font-size: 15px;
}

.woocommerce div.product .product_meta {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--st-border);
	font-size: var(--st-size-small);
}

/* Two columns from tablet up. */

@media (min-width: 900px) {

	.woocommerce div.product,
	.woocommerce-page div.product {
		grid-template-columns: minmax(0, 52%) minmax(360px, 1fr);
		gap: 44px;
	}
}

@media (min-width: 1200px) {

	.woocommerce div.product,
	.woocommerce-page div.product {
		grid-template-columns: minmax(0, 50%) minmax(420px, 1fr);
		gap: 56px;
	}
}

/* --------------------------------------------------------------------------
   3. PRODUCT CARD TITLE  -  clamp to three lines, equal card heights
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 8px;
	min-height: calc(1.4em * 3);
	font-size: var(--st-size-product-title);
	line-height: 1.4;
	text-overflow: ellipsis;
}

/* Cards in a row all match height, price pinned to the bottom. */

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.st-product__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 100%;
}

.st-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
}

.woocommerce ul.products li.product .price { margin-top: auto; padding-top: 6px; }

.woocommerce ul.products { align-items: stretch; }

/* --------------------------------------------------------------------------
   4. HEADER  -  the menu now has five items, give it room
   -------------------------------------------------------------------------- */

.st-nav ul.st-menu { gap: 26px; }

.st-nav ul.st-menu > li > a { font-size: 14px; }

@media (min-width: 1025px) and (max-width: 1320px) {

	.st-nav ul.st-menu { gap: 18px; }
	.st-nav ul.st-menu > li > a { font-size: 13px; }
	.st-search { max-width: 200px; }
	.st-logo { max-width: 130px; }
}

/* Search: the magnifier was after the field, put it back on the left. */

.st-search__submit { order: 0; }
.st-search__label { order: 1; }

/* --------------------------------------------------------------------------
   5. SHOP ARCHIVE  -  breathing room, the grid was flush to the header
   -------------------------------------------------------------------------- */

.st-shop { padding-block: 40px 70px; }

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 18px;
	font-size: var(--st-size-small);
	color: var(--st-muted);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--st-body); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--st-primary); }