/* Hevy Weyt Storefront — every rule is scoped to a body class added by
   HWSF_Layout, so pages that weren't selected are untouched. */

/* ---- Product pages: hide SKU and Categories (tags, if ever added, stay) ---- */
.hwsf-hide-meta .product_meta .sku_wrapper,
.hwsf-hide-meta .product_meta .posted_in {
	display: none !important;
}
.hwsf-hide-meta .product_meta:not(:has(.tagged_as)) {
	display: none !important;
}

/* ---- Listing pages + selected pages: hide the visible page title ---- */
.hwsf-hide-title .hero-section .page-title,
.hwsf-hide-title .hero-section .entry-title,
.hwsf-hide-title .woocommerce-products-header__title {
	display: none !important;
}
/* If the title was the only thing in the title area, drop the area too so
   it doesn't leave an empty gap (breadcrumbs/descriptions keep it). */
.hwsf-hide-title .hero-section:not(:has(.ct-breadcrumbs, .page-description, .ct-author-name, .entry-meta)) {
	display: none !important;
}

/* ---- Less space between the header and the content ---- */
.hwsf-tight-top #main > [data-vertical-spacing*="top"] {
	padding-top: var(--hwsf-top-space, 24px) !important;
}
.hwsf-tight-top #main > [data-vertical-spacing*="top"] > article > .hero-section:first-child,
.hwsf-tight-top #main > [data-vertical-spacing*="top"] > .hero-section:first-child {
	margin-top: 0 !important;
}

/* ---- Home: full-bleed hero under a transparent, overlapping header ----
   (King Spider-style). Icons are white over the image and turn black once
   they pass the bottom of the image — home-header.js adds .hwsf-on-light. */

/* No black "Join Our Newsletter" bar on Home (other pages keep it). */
.hwsf-home-overlay #header [data-row="top"] {
	display: none !important;
}

.hwsf-home-overlay #header {
	position: relative;
	z-index: 50;
	--hwsf-ink: #ffffff;
}
.hwsf-home-overlay.hwsf-on-light #header {
	--hwsf-ink: #111111;
}

/* Transparent header and rows, including the theme's sticky (scrolled) state. */
.hwsf-home-overlay #header [data-row],
.hwsf-home-overlay #header [data-row] > div,
.hwsf-home-overlay #header [data-sticky],
.hwsf-home-overlay #header [data-sticky] > div,
.hwsf-home-overlay #header .ct-sticky-container {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.hwsf-home-overlay #header [data-row]::before,
.hwsf-home-overlay #header [data-row]::after {
	display: none !important;
}

/* Header items: white over the image, black past it. Only the items in
   the bar itself — dropdown menus keep their own colors. */
.hwsf-home-overlay #header .menu > li > .ct-menu-link,
.hwsf-home-overlay #header .ct-header-search,
.hwsf-home-overlay #header .ct-header-cart,
.hwsf-home-overlay #header .ct-header-cart .ct-cart-item,
.hwsf-home-overlay #header .ct-header-trigger,
.hwsf-home-overlay #header .ct-header-account .ct-account-item,
.hwsf-home-overlay #header .ct-header-text,
.hwsf-home-overlay #header .ct-header-socials a,
.hwsf-home-overlay #header .site-title a {
	color: var(--hwsf-ink) !important;
	--theme-link-initial-color: var(--hwsf-ink) !important;
	--theme-link-hover-color: var(--hwsf-ink) !important;
	--theme-icon-color: var(--hwsf-ink) !important;
	--theme-icon-hover-color: var(--hwsf-ink) !important;
	--theme-text-color: var(--hwsf-ink) !important;
	transition: color 0.25s ease;
}
.hwsf-home-overlay #header .menu > li > .ct-menu-link svg,
.hwsf-home-overlay #header .ct-header-search svg,
.hwsf-home-overlay #header .ct-header-cart svg,
.hwsf-home-overlay #header .ct-header-trigger svg,
.hwsf-home-overlay #header .ct-header-account .ct-account-item svg,
.hwsf-home-overlay #header .ct-header-socials svg {
	fill: var(--hwsf-ink) !important;
	color: var(--hwsf-ink) !important;
	transition: fill 0.25s ease, color 0.25s ease;
}
.hwsf-home-overlay #header .ct-header-trigger .ct-icon rect,
.hwsf-home-overlay #header .ct-header-trigger rect {
	fill: var(--hwsf-ink) !important;
}
/* The logo image is black artwork: shown white over the image. */
.hwsf-home-overlay #header .site-logo-container img {
	filter: brightness(0) invert(1);
	transition: filter 0.25s ease;
}
.hwsf-home-overlay.hwsf-on-light #header .site-logo-container img {
	filter: brightness(0);
}

/* Pull the page up under the header (height measured by home-header.js). */
.hwsf-home-overlay #main {
	margin-top: calc(-1 * var(--hwsf-header-h, 0px));
}
.hwsf-home-overlay #main > [data-vertical-spacing] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.hwsf-home-overlay #main .hero-section {
	display: none !important;
}
.hwsf-home-overlay #main article,
.hwsf-home-overlay #main .entry-content {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* The empty spacer block at the top of the Home page content. */
.hwsf-home-overlay .entry-content > .wp-block-group:first-child:has(> .wp-block-heading:empty) {
	display: none !important;
}

/* The hero image: full page width, from the very top of the viewport down
   to (at least) where it ended before — its old height plus the header and
   the removed 120px spacer — and straight into the footer. */
html:has(body.hwsf-home-overlay),
body.hwsf-home-overlay {
	overflow-x: clip;
}
.hwsf-home-overlay {
	--hwsf-hero-base: 90vh;
}
@media (max-width: 1024px) {
	.hwsf-home-overlay { --hwsf-hero-base: 70vh; }
}
@media (max-width: 767px) {
	.hwsf-home-overlay { --hwsf-hero-base: 98vh; }
}
.hwsf-home-overlay .entry-content > figure:has(.hw-hero-panel) {
	width: 100vw !important;
	max-width: 100vw !important;
	margin: 0 calc(50% - 50vw) !important;
}
.hwsf-home-overlay .entry-content > figure:has(.hw-hero-panel):last-child {
	margin-bottom: 0 !important;
}
.hwsf-home-overlay .hw-hero-panel {
	width: 100% !important;
	height: max(calc(var(--hwsf-hero-base) + var(--hwsf-header-h, 0px) + 120px), var(--hwsf-hero-min, 0px)) !important;
	object-fit: cover;
	display: block;
}

/* ---- Product info tabs: inherit the theme's tab text styles ---- */
.hwsf-tab-content > :first-child { margin-top: 0; }
.hwsf-tab-content img { max-width: 100%; height: auto; }
.hwsf-tab-content table { width: 100%; border-collapse: collapse; }
.hwsf-tab-content--additional + table { margin-top: 1em; }

/* ---- Home (1.2.0): hide account / "Howdy" / search / wishlist heart ---- */
.hwsf-home-clean #header [data-device="desktop"] [data-id="account"],
.hwsf-home-clean #header [data-device="desktop"] .ct-header-account,
.hwsf-home-clean #header [data-device="desktop"] [data-id="search"],
.hwsf-home-clean #header [data-device="desktop"] .ct-header-search,
.hwsf-home-clean #header [data-id="wishlist-counter"],
.hwsf-home-clean #header .blocksy-wlfmc-wishlist-counter-wrapper {
	display: none !important;
}
/* The desktop row that only holds the wishlist heart goes too, so no
   empty band is left behind. */
.hwsf-home-clean #header [data-device="desktop"] [data-row="bottom"]:has([data-id="wishlist-counter"]),
.hwsf-home-clean #header [data-device="desktop"] [data-row="bottom"]:has(.blocksy-wlfmc-wishlist-counter-wrapper) {
	display: none !important;
}
/* Admin toolbar (logged-in staff only): "Howdy, …"/profile and search. */
body.hwsf-home-clean #wpadminbar #wp-admin-bar-my-account,
body.hwsf-home-clean #wpadminbar #wp-admin-bar-search {
	display: none !important;
}

/* Home: no color animation on the very first paint. */
.hwsf-no-anim #header,
.hwsf-no-anim #header * {
	transition: none !important;
}

/* ---- Home (1.3.0): header items fade out past the hero image ----
   home-header.js sets --hwsf-icons-opacity from the scroll position (1 over
   the image, 0 before the footer text). Only the items (logo, menu, icons)
   fade; the header itself and its (transparent) background are untouched.
   At 0 they are also made unclickable and skipped by keyboard focus. */
.hwsf-home-fade #header [data-row] > div {
	opacity: var(--hwsf-icons-opacity, 1);
	transition: opacity 0.12s linear;
}
.hwsf-home-fade.hwsf-icons-out #header [data-row] > div {
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s linear, visibility 0s linear 0.12s;
}

/* ---- Visuals (1.3.0): whole header fixed at the top, fades out when
   scrolling down and back in when scrolling up (scroll-header.js).
   #header keeps its height in the page so nothing below moves. ---- */
.hwsf-scroll-header.hwsf-sh-ready #header {
	height: var(--hwsf-sh-h, auto);
	position: relative;
	z-index: 50;
}
.hwsf-scroll-header.hwsf-sh-ready #header > [data-device] {
	position: fixed;
	top: var(--hwsf-sh-top, 0px);
	left: 0;
	right: 0;
	z-index: 50;
	visibility: visible;
	/* 1.5.0: the whole header (background box, border, logo, icons, menu)
	   is ONE element that slides up out of view and back down, so every
	   part moves together; nothing inside it is animated separately. */
	transform: translate3d(0, 0, 0);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
	will-change: transform;
}
.hwsf-scroll-header.hwsf-sh-hidden #header > [data-device] {
	transform: translate3d(0, calc(-100% - var(--hwsf-sh-top, 0px) - 4px), 0);
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
}
@media (prefers-reduced-motion: reduce) {
	.hwsf-scroll-header.hwsf-sh-ready #header > [data-device],
	.hwsf-scroll-header.hwsf-sh-hidden #header > [data-device] {
		transition: none;
	}
}
.hwsf-scroll-header .ct-sticky-container {
	height: auto !important;
}

/* ---- Home (1.4.0): icons disappear instantly just before the image ends ---- */
.hwsf-home-hide.hwsf-icons-out #header [data-row] > div {
	visibility: hidden;
	pointer-events: none;
}

/* ---- 1.5.0 Header box: black background, white icons ----
   Only the main bar and the desktop heart row; the black newsletter bar on
   top already has its own colors. Dropdown menus keep theme colors. */
.hwsf-header-black #header [data-row*="middle"],
.hwsf-header-black #header [data-row*="bottom"],
.hwsf-header-black #header [data-sticky] [data-row*="middle"],
.hwsf-header-black #header [data-sticky] [data-row*="bottom"] {
	background-color: #000000 !important;
	background-image: none !important;
}
.hwsf-header-black #header [data-row*="middle"] .ct-header-search,
.hwsf-header-black #header [data-row*="middle"] .ct-header-cart,
.hwsf-header-black #header [data-row*="middle"] .ct-header-cart .ct-cart-item,
.hwsf-header-black #header [data-row*="middle"] .ct-header-trigger,
.hwsf-header-black #header [data-row*="middle"] .ct-header-account .ct-account-item,
.hwsf-header-black #header [data-row*="middle"] .ct-header-text,
.hwsf-header-black #header [data-row*="middle"] .ct-header-socials a,
.hwsf-header-black #header [data-row*="middle"] .site-title a,
.hwsf-header-black #header [data-id="wishlist-counter"],
.hwsf-header-black #header [data-id="wishlist-counter"] a,
.hwsf-header-black #header [data-id="wishlist-counter"] i {
	color: #ffffff !important;
	--theme-link-initial-color: #ffffff;
	--theme-icon-color: #ffffff;
	--theme-text-color: #ffffff;
}
.hwsf-header-black #header [data-row*="middle"] svg,
.hwsf-header-black #header [data-row*="bottom"] svg {
	fill: #ffffff !important;
	color: #ffffff !important;
}
.hwsf-header-black #header .ct-header-trigger rect {
	fill: #ffffff !important;
}
/* Menu links: white, keeping the theme's hover color. */
.hwsf-header-black #header [data-row*="middle"] .menu > li > .ct-menu-link,
.hwsf-header-black #header [data-row*="bottom"] .menu > li > .ct-menu-link {
	--theme-link-initial-color: #ffffff !important;
	color: var(--theme-link-initial-color);
}
.hwsf-header-black #header [data-row*="middle"] .menu > li > .ct-menu-link:hover,
.hwsf-header-black #header [data-row*="middle"] .menu > li.current-menu-item > .ct-menu-link {
	color: var(--theme-link-hover-color, #ffffff);
}
/* Logo artwork is black: shown white on the black box. */
.hwsf-header-black #header [data-row*="middle"] .site-logo-container img {
	filter: brightness(0) invert(1);
}
/* Cart count bubble stays readable on black. */
.hwsf-header-black #header .ct-dynamic-count-cart {
	background-color: #ffffff !important;
	color: #000000 !important;
}

/* ---- 1.6.0 Size chart tab: readable on phones ----
   Wide tables scroll sideways inside the tab instead of squashing. */
.hwsf-tab-content--size-chart {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.hwsf-tab-content--size-chart table {
	width: 100%;
	min-width: max-content;
}
.hwsf-tab-content--size-chart th,
.hwsf-tab-content--size-chart td {
	padding: 8px 12px;
	text-align: center;
	white-space: nowrap;
}

/* ---- 1.6.0 Footer newsletter: "JOIN THE LIST" + text + email field +
   Subscribe as ONE section. The theme puts the heading in the footer's top
   row and the form in the middle row, with 100px + 50px of padding and a
   dashed line between them; this closes that gap and lines everything up
   on one centred column. Layout only — the form, its validation and its
   Brevo/Klaviyo/WPForms hookups are untouched. Coming Soon pages never
   load this stylesheet. */
#footer [data-row*="top"]:has(+ [data-row*="middle"] form) > div {
	padding-bottom: 18px !important;
}
#footer [data-row*="top"] + [data-row*="middle"]:has(form) > div {
	padding-top: 0 !important;
	border-top: 0 !important;
	--theme-border-top: none !important;
}
#footer [data-row*="top"]:has(+ [data-row*="middle"] form) .ct-widget {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
#footer [data-row*="top"] + [data-row*="middle"]:has(form) form {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}
#footer [data-row*="top"]:has(+ [data-row*="middle"] form) .ct-widget p {
	margin-bottom: 0;
}
/* Email field and Subscribe button side by side, same height. */
#footer [data-row*="middle"] .wpforms-form {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
}
#footer [data-row*="middle"] .wpforms-form .wpforms-field-container {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	width: auto !important;
}
#footer [data-row*="middle"] .wpforms-form .wpforms-field {
	padding: 0 !important;
	margin: 0 !important;
}
#footer [data-row*="middle"] .wpforms-form input[type="email"] {
	width: 100% !important;
	max-width: none !important;
	height: 48px;
	box-sizing: border-box;
}
#footer [data-row*="middle"] .wpforms-form .wpforms-submit-container {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}
#footer [data-row*="middle"] .wpforms-form .wpforms-submit {
	height: 48px;
	padding-left: 28px;
	padding-right: 28px;
	white-space: nowrap;
}
#footer [data-row*="middle"] .hwes-form .hwes-row {
	gap: 10px;
}
/* 1.6.1 Phones: same layout as tablet and desktop — email field and
   Subscribe side by side, and the bottom strip (copyright, links, socials)
   in the tablet's two-column grid instead of one tall column. */
@media (max-width: 689.98px) {
	#footer [data-row*="top"]:has(+ [data-row*="middle"] form) > div {
		padding-bottom: 14px !important;
	}
	#footer [data-row*="middle"] .wpforms-form .wpforms-submit {
		padding-left: 20px;
		padding-right: 20px;
	}
	[data-footer] #footer [data-row*="bottom"] > div {
		--grid-template-columns: repeat(2, 1fr) !important;
		--container-spacing: 25px !important;
		--columns-gap: 24px !important;
		--widgets-gap: 40px !important;
	}
	/* Same proportions as tablet: the theme's 20px footer text is scaled
	   down so it doesn't break into three lines in the narrower columns. */
	[data-footer] #footer [data-id="copyright"],
	[data-footer] #footer [data-id="menu"] ul {
		--theme-font-size: 15px !important;
		font-size: 15px !important;
	}
}


/* ---- 1.6.2 Footer links (CONTACT / LEGAL / PRIVACY): aligned like the
   desktop view on every screen — one row, left-aligned, top of the strip.
   The theme right-aligns them below desktop width. ---- */
@media (max-width: 999.98px) {
	[data-footer] #footer [data-row*="bottom"] [data-column="menu"] {
		--horizontal-alignment: flex-start !important;
		--vertical-alignment: flex-start !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		text-align: left !important;
	}
	[data-footer] #footer [data-row*="bottom"] [data-id="menu"],
	[data-footer] #footer [data-row*="bottom"] [data-id="menu"] ul {
		justify-content: flex-start !important;
		margin-left: 0 !important;
	}
}
/* Phones: a half-width column can't hold the three links in one row, so
   copyright and links each get the full width (one line each, left-aligned
   on the same edge, as on desktop), with the socials below. */
@media (max-width: 689.98px) {
	[data-footer] #footer [data-row*="bottom"] [data-column="copyright"],
	[data-footer] #footer [data-row*="bottom"] [data-column="menu"] {
		grid-column: 1 / -1;
	}
	[data-footer] #footer [data-row*="bottom"] > div {
		row-gap: 14px !important;
	}
	[data-footer] #footer [data-row*="bottom"] [data-id="menu"] ul {
		flex-wrap: nowrap !important;
	}
}

/* ---- 1.7.1 Footer links (CONTACT / LEGAL / PRIVACY / SMS / FAQ): always
   one row, left-aligned, at every screen size. The links' column is as
   wide as the links need; on phones the text and spacing scale down just
   enough to fit the narrowest screens. ---- */
[data-footer] #footer [data-row*="bottom"] [data-id="menu"] ul {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	column-gap: var(--hwsf-fm-gap, 24px) !important;
	row-gap: 0 !important;
}
[data-footer] #footer [data-row*="bottom"] [data-id="menu"] li {
	flex: 0 0 auto;
	margin: 0 !important;
}
[data-footer] #footer [data-row*="bottom"] [data-id="menu"] a {
	white-space: nowrap;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
@media (min-width: 1000px) {
	[data-footer] #footer [data-row*="bottom"] > div {
		--grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
	}
}
@media (min-width: 690px) and (max-width: 999.98px) {
	[data-footer] #footer [data-row*="bottom"] > div {
		--grid-template-columns: minmax(0, 1fr) auto !important;
	}
	[data-footer] #footer [data-row*="bottom"] [data-id="menu"] ul {
		--theme-font-size: clamp(15px, 2.1vw, 20px) !important;
		font-size: clamp(15px, 2.1vw, 20px) !important;
		--hwsf-fm-gap: clamp(14px, 2vw, 24px);
	}
}
@media (max-width: 689.98px) {
	[data-footer] #footer [data-row*="bottom"] [data-id="menu"] ul {
		--theme-font-size: clamp(12px, 3.9vw, 15px) !important;
		font-size: clamp(12px, 3.9vw, 15px) !important;
		--hwsf-fm-gap: clamp(10px, 3.4vw, 18px);
	}
}

/* 1.7.1 — copyright, links and icons share one centre line wherever they
   sit side by side (desktop: all three; tablet: copyright + links). */
[data-footer] #footer [data-row*="bottom"] [data-column="copyright"] .ct-footer-copyright > *,
[data-footer] #footer [data-row*="bottom"] [data-column="copyright"] p {margin-top:0 !important;margin-bottom:0 !important;}
@media (min-width:690px){
	[data-footer] #footer [data-row*="bottom"] > div{align-items:center !important;}
	[data-footer] #footer [data-row*="bottom"] [data-column="copyright"],
	[data-footer] #footer [data-row*="bottom"] [data-column="menu"],
	[data-footer] #footer [data-row*="bottom"] [data-column="socials"]{--vertical-alignment:center !important;justify-content:center !important;}
	[data-footer] #footer [data-row*="bottom"] [data-id="menu"] ul{align-items:center !important;}
}

/* 1.7.3 — phone footer links: a little bigger and spread across the full
   width of the footer, so the row sits centred on the screen while its
   left edge still lines up with the copyright and social icons above and
   below it. Tablet and desktop are untouched. */
@media (max-width:689.98px){
	[data-footer] #footer [data-row*="bottom"] [data-column="menu"],
	[data-footer] #footer [data-row*="bottom"] [data-id="menu"]{
		width:100% !important;
		align-self:stretch !important;
	}
	[data-footer] #footer [data-row*="bottom"] [data-id="menu"] ul{
		width:100% !important;
		max-width:440px;
		justify-content:space-between !important;
		column-gap:10px !important;
		--theme-font-size:clamp(12.5px,4.2vw,18px) !important;
		font-size:clamp(12.5px,4.2vw,18px) !important;
	}
}