/*!
Theme Name: NTW Distributor Portal
Theme URI: https://newtechwood.com/
Author: NewTechWood
Author URI: https://newtechwood.com/
Description: Custom ACF-driven theme powering the NewTechWood distributor portal, built on the Underscores (_s) starter theme.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ntw-distributor
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: 700;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

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

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

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

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# NTW Distributor Portal - brand
--------------------------------------------------------------*/
:root {
	--ntw-green: #039044;
	--ntw-brown: #694230;
	--ntw-pink: #cc3366;
	--ntw-text: #333333;
	--ntw-footer-bg: #484848;
	--ntw-decor-1: #eeeeee;
	--ntw-decor-2: #e1e1e1;
	--ntw-bg-page: #f7f6f4;
	--ntw-border: #ececec;
}

body {
	background: var(--ntw-bg-page);
	font-family: houschka-pro, sans-serif;
	font-weight: 300;
	color: var(--ntw-text);
	overflow-x: hidden;
}

/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/
.site-header {
	position: relative;
	overflow: hidden;
	border-bottom: 5px solid var(--ntw-green);
	background: #fff;
}

.site-header__decor {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 5px;
	width: 45%;
	pointer-events: none;
	z-index: 0;
}

.site-header__decor-panel {
	position: absolute;
	inset: 0;
}

.site-header__decor-panel--1 {
	background: var(--ntw-decor-1);
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
}

.site-header__decor-panel--2 {
	background: var(--ntw-decor-2);
	clip-path: polygon(42% 0, 100% 0, 100% 100%, 22% 100%);
}

.site-header__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1440px;
	min-height: 120px;
	margin: 0 auto;
	padding: 12px 24px;
	box-sizing: border-box;
}

.site-branding {
	flex: 0 0 auto;
}

.site-logo-link {
	display: block;
}

.site-logo-img,
.site-branding img {
	display: block;
	height: 63px;
	width: auto;
}

.main-navigation {
	flex: 1 1 auto;
}

/* Drawer chrome only exists for the mobile breakpoint (below) — hidden by
   default so it has zero effect on the desktop horizontal nav. */
.nav-drawer__overlay {
	display: none;
}

.main-navigation .menu-toggle {
	display: none;
}

.menu-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--ntw-text);
	transition: transform 0.2s ease, background 0.2s ease;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--ntw-text);
	transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}

.menu-toggle__bars::before {
	top: -7px;
}

.menu-toggle__bars::after {
	top: 7px;
}

.main-navigation.toggled .menu-toggle__bars {
	background: transparent;
}

.main-navigation.toggled .menu-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.main-navigation.toggled .menu-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

.nav-menu--icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu--icons a,
.nav-menu--icons a:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ntw-brown);
	text-decoration: none;
	font-size: 24px;
	white-space: nowrap;
}

.nav-menu--icons a:hover,
.nav-menu--icons a:focus {
	color: var(--ntw-green);
}

.nav-menu--icons svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

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

.header-cart .cart-contents,
.header-cart .cart-contents:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ntw-text);
	text-decoration: none;
}

.header-cart svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.header-cart .count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #d9534f;
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
}

.header-account {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.header-account__icon,
.header-account__icon:visited,
.header-account__icon:hover,
.header-account__icon:focus {
	color: #888;
}

.header-account__icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.header-account__balance {
	font-size: 13px;
	line-height: 1.3;
	color: var(--ntw-text);
}

.dpp-mdf-loc {
	display: block;
}

/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/
.site-footer {
	background: var(--ntw-footer-bg);
	color: #fff;
	padding: 48px 32px 24px;
}

.site-footer a,
.site-footer a:visited {
	color: #fff;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--ntw-green);
}

.site-footer__columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
	max-width: 1280px;
	margin: 0 auto;
}

.site-footer__col h6 {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 300;
}

.site-footer__col p {
	margin: 0 0 12px;
}

.site-footer__contact,
.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__contact li,
.site-footer__links li {
	margin-bottom: 8px;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1280px;
	margin: 32px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
}

.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 960px) {
	.site-header__inner {
		flex-wrap: wrap;
	}

	.nav-menu--icons {
		gap: 16px;
	}

	.site-header__decor {
		display: none;
	}
}

/* The mobile drawer surfaces every Dashboard destination, not just the 3
   top-level links the desktop nav has room for — hide those extras above
   the mobile breakpoint so the desktop nav is unchanged. */
@media (min-width: 861px) {
	.nav-menu-item--dashboard-extra {
		display: none;
	}
}

/* Mobile hamburger navigation. The show/hide-on-click behavior (.toggled
   class + aria-expanded) is already wired up by js/navigation.js. Styled to
   match the header cart drawer: a dimmed full-screen overlay plus a white
   panel that slides in from the right, same transition timing, shadow, and
   close-button treatment as .cart-drawer. */
@media (max-width: 860px) {
	.site-header__inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.site-header {
		overflow: visible;
	}

	.site-header__actions {
		order: 2;
		margin-left: auto;
	}

	.main-navigation {
		order: 3;
		position: static;
		flex: 0 0 auto;
		width: auto;
	}

	.main-navigation .menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: none;
		background: transparent;
		cursor: pointer;
		font-size: 0;
		line-height: 0;
		position: relative;
		z-index: 260;
	}

	.nav-drawer__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 220;
		background: rgba(5, 20, 12, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
	}

	.main-navigation.toggled .nav-drawer__overlay {
		opacity: 1;
		visibility: visible;
	}

	.nav-drawer__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 320px;
		max-width: 86vw;
		background: #fff;
		box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
		padding: 32px 24px 24px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 230;
	}

	.main-navigation.toggled .nav-drawer__panel {
		transform: translateX(0);
	}

	.main-navigation ul#primary-menu {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.nav-menu--icons a {
		width: 100%;
		padding: 14px 12px;
		border-radius: 10px;
		font-size: 17px;
		box-sizing: border-box;
	}

	.nav-menu--icons a:hover,
	.nav-menu--icons a:focus {
		background: #f2f7f4;
	}

	.nav-menu--icons svg {
		width: 20px;
		height: 20px;
		flex: 0 0 auto;
	}
}

/*--------------------------------------------------------------
# Login Screen
--------------------------------------------------------------*/
.ntw-login-page {
	margin: 0;
	background: #fff;
}

.login-screen {
	display: flex;
	min-height: 100vh;
}

.login-screen__panel {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.login-screen__panel--brand {
	background-color: #14351f;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.login-screen__brand-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(3, 144, 68, 0.88) 0%, rgba(10, 40, 22, 0.92) 65%, rgba(5, 20, 12, 0.95) 100%);
}

.login-screen__brand-content {
	position: relative;
	z-index: 1;
	text-align: center;
	color: #fff;
	padding: 32px;
}

.login-screen__logo {
	height: 72px;
	width: auto;
	margin: 0 auto 20px;
	filter: brightness(0) invert(1);
	opacity: 0.95;
}

.login-screen__tagline {
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
	opacity: 0.9;
}

.login-screen__panel--form {
	background: #fff;
	padding: 48px;
}

.login-card {
	width: 100%;
	max-width: 380px;
}

.login-card__title {
	font-size: 32px;
	font-weight: 300;
	margin: 0 0 8px;
	color: var(--ntw-text);
}

.login-card__subtitle {
	margin: 0 0 32px;
	color: #767676;
	font-size: 15px;
	line-height: 1.5;
}

.login-card__error {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 6px;
	background: #fdecea;
	border: 1px solid #f3c2bc;
	color: #a52b1a;
	font-size: 14px;
}

.login-form__group {
	margin-bottom: 20px;
}

.login-form__group label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ntw-text);
}

.login-form__group input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	font-weight: 300;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-form__group input:focus {
	outline: none;
	border-color: var(--ntw-green);
	box-shadow: 0 0 0 3px rgba(3, 144, 68, 0.15);
}

.login-form__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
	font-size: 13px;
}

.login-form__checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #555;
	cursor: pointer;
}

.login-form__checkbox input {
	margin: 0;
}

.login-form__forgot,
.login-form__forgot:visited {
	color: var(--ntw-brown);
	text-decoration: none;
}

.login-form__forgot:hover,
.login-form__forgot:focus {
	color: var(--ntw-green);
}

.login-form__submit {
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: 8px;
	background: var(--ntw-green);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.login-form__submit:hover,
.login-form__submit:focus {
	background: #027a39;
}

.login-form__submit:active {
	transform: translateY(1px);
}

/* Staggered fade-in-up entrance animation */
@keyframes ntwFadeInUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.login-screen__brand-content > *,
.login-card__title,
.login-card__subtitle,
.login-card__error,
.login-form__group,
.login-form__row,
.login-form__submit {
	opacity: 0;
	animation: ntwFadeInUp 0.6s ease forwards;
}

.login-screen__brand-content > *:nth-child(1) { animation-delay: 0.1s; }
.login-screen__brand-content > *:nth-child(2) { animation-delay: 0.2s; }

.login-card__title { animation-delay: 0.15s; }
.login-card__subtitle { animation-delay: 0.25s; }
.login-card__error { animation-delay: 0.3s; }
.login-form__group:nth-of-type(1) { animation-delay: 0.35s; }
.login-form__group:nth-of-type(2) { animation-delay: 0.45s; }
.login-form__row { animation-delay: 0.55s; }
.login-form__submit { animation-delay: 0.65s; }

@media (prefers-reduced-motion: reduce) {
	.login-screen__brand-content > *,
	.login-card__title,
	.login-card__subtitle,
	.login-card__error,
	.login-form__group,
	.login-form__row,
	.login-form__submit {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 860px) {
	.login-screen {
		flex-direction: column;
	}

	.login-screen__panel--brand {
		flex: 0 0 auto;
		min-height: 220px;
	}

	.login-screen__panel--form {
		padding: 32px 24px;
	}
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
.dashboard {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 24px 80px;
}

.dashboard__intro {
	margin-bottom: 40px;
}

.dashboard__greeting {
	margin: 0 0 6px;
	font-size: 36px;
	font-weight: 300;
	color: var(--ntw-text);
}

.dashboard__date {
	margin: 0;
	color: #767676;
	font-size: 15px;
}

.dashboard__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 56px;
}

.dashboard-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 28px 24px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.2s ease;
	will-change: transform;
}

.dashboard-card:hover,
.dashboard-card:focus {
	border-color: rgba(3, 144, 68, 0.3);
}

/* Transform/shadow lift on hover is handled by GSAP (dashboard-motion.js)
   for smoother custom easing. This transition-based fallback only kicks in
   when .ntw-hover-init is absent from <html> (JS failed, or
   prefers-reduced-motion skipped GSAP hover setup). */
html:not(.ntw-hover-init) .dashboard-card:hover,
html:not(.ntw-hover-init) .dashboard-card:focus {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(3, 144, 68, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(3, 144, 68, 0.1);
	color: var(--ntw-green);
}

.dashboard-card__icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.dashboard-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--ntw-text);
}

.dashboard-card__desc {
	font-size: 14px;
	color: #767676;
	line-height: 1.5;
}

.dashboard__orders {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	overflow: hidden;
}

.dashboard__orders-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #ececec;
}

.dashboard__orders-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.dashboard__orders-link,
.dashboard__orders-link:visited {
	color: var(--ntw-green);
	text-decoration: none;
	font-size: 14px;
}

.dashboard__orders-link:hover,
.dashboard__orders-link:focus {
	text-decoration: underline;
}

.dashboard__orders-table {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

.dashboard__orders-row {
	display: table-row;
}

.dashboard__orders-row--head {
}

.dashboard__orders-row > span {
	display: table-cell;
	padding: 14px 24px;
	border-bottom: 1px solid #f2f2f2;
	font-size: 14px;
	vertical-align: middle;
}

.dashboard__orders-row--head > span {
	color: #9a9a9a;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.05em;
	border-bottom: 1px solid #ececec;
}

.dashboard__status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	background: #f0f0f0;
	color: #666;
}

.dashboard__status--completed,
.dashboard__status--processing {
	background: rgba(3, 144, 68, 0.12);
	color: #027a39;
}

.dashboard__status--on-hold,
.dashboard__status--pending {
	background: rgba(230, 162, 60, 0.15);
	color: #a5690f;
}

.dashboard__status--cancelled,
.dashboard__status--failed,
.dashboard__status--refunded {
	background: rgba(217, 83, 79, 0.12);
	color: #a52b1a;
}

.dashboard__view-link,
.dashboard__view-link:visited {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	color: var(--ntw-text);
	text-decoration: none;
	font-size: 13px;
}

.dashboard__view-link:hover,
.dashboard__view-link:focus {
	border-color: var(--ntw-green);
	color: var(--ntw-green);
}

/* Announcements feed — compact date + title rows, same panel chrome as orders */
.dashboard__announcements {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 32px;
}

.dashboard__announcements-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #ececec;
}

.dashboard__announcements-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.dashboard__announcements-link,
.dashboard__announcements-link:visited {
	color: var(--ntw-green);
	text-decoration: none;
	font-size: 14px;
}

.dashboard__announcements-link:hover,
.dashboard__announcements-link:focus {
	text-decoration: underline;
}

.dashboard__announcement {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 15px 24px;
	border-bottom: 1px solid #f2f2f2;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}

.dashboard__announcement:last-child {
	border-bottom: 0;
}

.dashboard__announcement:hover,
.dashboard__announcement:focus {
	background: #fafaf8;
}

.dashboard__announcement-date {
	flex: 0 0 auto;
	width: 96px;
	font-size: 13px;
	color: #9a9a9a;
	font-variant-numeric: tabular-nums;
}

.dashboard__announcement-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ntw-text);
}

.dashboard__announcement-chevron {
	display: inline-flex;
	flex: 0 0 auto;
	color: #c4c4c4;
	transition: color 0.15s ease, transform 0.15s ease;
}

.dashboard__announcement:hover .dashboard__announcement-chevron,
.dashboard__announcement:focus .dashboard__announcement-chevron {
	color: var(--ntw-green);
	transform: translateX(3px);
}

@media (max-width: 960px) {
	.dashboard__cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.dashboard__orders-table,
	.dashboard__orders-row,
	.dashboard__orders-row > span {
		display: block;
	}

	.dashboard__orders-row--head {
		display: none;
	}

	.dashboard__orders-row {
		padding: 16px 24px;
		border-bottom: 1px solid #f2f2f2;
	}

	.dashboard__orders-row > span {
		border-bottom: none;
		padding: 2px 0;
	}
}

@media (max-width: 640px) {
	.dashboard__cards {
		grid-template-columns: 1fr;
	}

	.dashboard__announcement {
		flex-wrap: wrap;
		gap: 2px 0;
	}

	.dashboard__announcement-date {
		width: 100%;
		order: -1;
	}

	.dashboard__announcement-chevron {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dashboard__intro,
	.dashboard-card,
	.dashboard__orders,
	.dashboard__orders-row,
	.dashboard__announcements,
	.dashboard__announcement {
		animation: none;
		opacity: 1;
	}
}

/*--------------------------------------------------------------
# Single Announcement
--------------------------------------------------------------*/
.announcement-single {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 24px 96px;
}

.announcement-single__back,
.announcement-single__back:visited {
	display: inline-block;
	margin-bottom: 24px;
	color: var(--ntw-green);
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
}

.announcement-single__back:hover,
.announcement-single__back:focus {
	text-decoration: underline;
}

.announcement-single__card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	padding: 48px 48px 40px;
}

.announcement-single__header {
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid #f2f2f2;
}

.announcement-single__date {
	margin: 0 0 10px;
	color: var(--ntw-green);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.announcement-single__title {
	margin: 0;
	font-size: 32px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--ntw-text);
}

.announcement-single__content {
	color: var(--ntw-text);
	font-size: 17px;
	line-height: 1.7;
}

.announcement-single__content > :first-child {
	margin-top: 0;
}

.announcement-single__content > :last-child {
	margin-bottom: 0;
}

.announcement-single__content p {
	margin: 0 0 1.2em;
}

.announcement-single__content a,
.announcement-single__content a:visited {
	color: var(--ntw-green);
	text-decoration: underline;
}

.announcement-single__content ul,
.announcement-single__content ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.announcement-single__content li {
	margin-bottom: 0.4em;
}

.announcement-single__content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.announcement-single__edit {
	margin: 28px 0 0;
	font-size: 13px;
}

.announcement-single__edit a,
.announcement-single__edit a:visited {
	color: #9a9a9a;
	text-decoration: none;
}

.announcement-single__edit a:hover,
.announcement-single__edit a:focus {
	color: var(--ntw-green);
}

/* Prev/next among announcements */
.announcement-single__pager {
	display: flex;
	gap: 16px;
	margin-top: 24px;
}

.announcement-single__pager-link {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	text-decoration: none;
	color: var(--ntw-text);
	transition: border-color 0.2s ease;
}

.announcement-single__pager-link:hover,
.announcement-single__pager-link:focus {
	border-color: rgba(3, 144, 68, 0.3);
}

.announcement-single__pager-link--older {
	text-align: right;
}

.announcement-single__pager-dir {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ntw-green);
}

.announcement-single__pager-title {
	font-size: 14px;
	color: #767676;
	line-height: 1.4;
}

@media (max-width: 600px) {
	.announcement-single__card {
		padding: 32px 24px;
	}

	.announcement-single__title {
		font-size: 26px;
	}

	.announcement-single__pager {
		flex-direction: column;
	}

	.announcement-single__pager-link--older {
		text-align: left;
	}
}

/*--------------------------------------------------------------
# Page Hero
--------------------------------------------------------------*/
.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 280px;
	background-color: #14351f;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(5, 20, 12, 0.82) 0%, rgba(5, 20, 12, 0.55) 55%, rgba(5, 20, 12, 0.35) 100%);
}

.page-hero__content {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 24px;
	width: 100%;
	color: #fff;
	opacity: 0;
	animation: ntwFadeInUp 0.6s ease forwards;
}

.page-hero__title {
	margin: 0 0 10px;
	font-size: 42px;
	font-weight: 300;
}

.page-hero__subtitle {
	margin: 0;
	font-size: 17px;
	max-width: 640px;
	opacity: 0.92;
}

/*--------------------------------------------------------------
# Product Grid (Catalog + Merchandise)
--------------------------------------------------------------*/
.product-page__content {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

.product-search {
	position: relative;
	max-width: 420px;
	margin-bottom: 24px;
}

/* Merchandise has no filter tabs, so the search sits directly on the grid —
   give it the same breathing room the tabs provide on Catalog. */
.product-grid[data-context="merchandise"] .product-search {
	margin-bottom: 32px;
}

.product-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: #9a9a9a;
	pointer-events: none;
	transition: color 0.15s ease;
}

.product-search:has(.product-search__input:focus) .product-search__icon {
	color: var(--ntw-green);
}

/* Type selector included to outrank the scaffold's own input[type="search"]
   rule (padding: 3px / radius: 3px), same idiom as .wbs_search_box above.
   Values match the theme's other inputs (login form, Gravity Forms) —
   including font-weight: 300, since form controls don't inherit it and
   houschka's mid weights are the wrong cut. */
.product-search input[type="search"].product-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 40px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	background: #fff;
	color: var(--ntw-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 300;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-search input[type="search"].product-search__input:focus {
	outline: none;
	border-color: var(--ntw-green);
	box-shadow: 0 0 0 3px rgba(3, 144, 68, 0.15);
}

.product-search__input::placeholder {
	color: #9a9a9a;
	opacity: 1;
}

.product-search__input::-webkit-search-cancel-button {
	display: none;
}

.product-search__clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: #9a9a9a;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.product-search__clear:hover,
.product-search__clear:focus {
	background: #f5f4f2;
	color: var(--ntw-text);
}

.product-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.product-filters__tab,
.product-filters__tab:visited {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--ntw-border);
	background: #fff;
	color: #666;
	text-decoration: none;
	font-size: 14px;
	transition: all 0.15s ease;
}

.product-filters__tab:hover {
	border-color: var(--ntw-green);
	color: var(--ntw-green);
}

.product-filters__tab.is-active {
	background: var(--ntw-green);
	border-color: var(--ntw-green);
	color: #fff;
}

.product-grid__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.product-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 12px;
	overflow: hidden;
	text-align: center;
	opacity: 0;
	will-change: transform;
}

/* GSAP (catalog-motion.js) handles the reveal + hover lift when available;
   this is the fallback for JS-failed / prefers-reduced-motion visitors. */
html:not(.ntw-gsap-init) .product-card.is-visible {
	animation: ntwFadeInUp 0.5s ease forwards;
}

html:not(.ntw-hover-init) .product-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html:not(.ntw-hover-init) .product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
}

.product-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: #f5f4f2;
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-card__body {
	padding: 16px 16px 4px;
	flex: 1 1 auto;
}

.product-card__title,
.product-card__title:visited {
	display: block;
	color: var(--ntw-text);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 8px;
}

.product-card__title:hover {
	color: var(--ntw-green);
}

.product-card__price {
	font-size: 15px;
	font-weight: 700;
	color: var(--ntw-text);
}

.product-card__action {
	padding: 12px 16px 20px;
}

.product-card__add-to-cart {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: 8px;
	background: #f5f4f2;
	color: var(--ntw-text);
	text-decoration: none;
	font-size: 13px;
	border: 1px solid transparent;
	transition: all 0.15s ease;
	cursor: pointer;
}

.product-card__add-to-cart:hover {
	background: var(--ntw-green);
	color: #fff;
}

.product-card__add-to-cart.disabled,
.product-card__add-to-cart[disabled] {
	opacity: 0.5;
	pointer-events: none;
}

.product-card__add-to-cart.loading {
	opacity: 0.6;
}

.product-card__add-to-cart.added::after {
	content: '\2713';
	margin-left: 6px;
}

.product-grid__empty {
	text-align: center;
	color: #767676;
	padding: 40px 0;
}

.product-grid__footer {
	display: flex;
	justify-content: center;
}

.product-grid__load-more {
	padding: 12px 32px;
	border-radius: 999px;
	border: 1px solid var(--ntw-border);
	background: #fff;
	color: var(--ntw-text);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.product-grid__load-more:hover {
	border-color: var(--ntw-green);
	color: var(--ntw-green);
}

.product-grid__load-more.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

@media (max-width: 1200px) {
	.product-grid__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 960px) {
	.product-grid__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.page-hero__title {
		font-size: 32px;
	}
}

@media (max-width: 640px) {
	.product-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Loading feedback while a category filter / load-more request is in flight */
.product-grid {
	position: relative;
}

.product-grid__list {
	transition: opacity 0.15s ease;
}

.product-grid__list.is-loading {
	opacity: 0.35;
	pointer-events: none;
}

.product-grid__spinner {
	display: none;
	position: absolute;
	left: 50%;
	top: 160px;
	width: 36px;
	height: 36px;
	margin-left: -18px;
	border: 3px solid var(--ntw-border);
	border-top-color: var(--ntw-green);
	border-radius: 50%;
	animation: ntwSpin 0.7s linear infinite;
	z-index: 2;
}

.product-grid__spinner.is-active {
	display: block;
}

@keyframes ntwSpin {
	to {
		transform: rotate(360deg);
	}
}

.product-filters__tab.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.product-grid__spinner {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Bulk Order (woo-bulk-shop [bulkshop] shortcode) restyle
--------------------------------------------------------------*/
.quick-add-page__content {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

#wbs.wbs-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	position: sticky;
	top: 0;
	z-index: 20;
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 24px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.wbs-col-25,
.wbs-col-50,
.wbs-col-25-r {
	float: none;
	width: auto;
}

#product_cat {
	padding: 10px 14px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	color: var(--ntw-text);
	min-width: 200px;
}

.wbs-qty-box {
	display: flex;
	gap: 8px;
}

#qty-add {
	width: 110px;
	padding: 10px 14px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	font-size: 14px;
}

.wbs-btn-qty-add {
	padding: 10px 18px;
	border: none;
	border-radius: 8px;
	background: var(--ntw-green);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wbs-btn-qty-add:hover {
	background: #027a39;
}

.wbs_search_box {
	display: flex;
	align-items: stretch;
}

.wbs_search_box input[type='search'] {
	padding: 10px 14px;
	border: 1px solid var(--ntw-border);
	border-right: none;
	border-radius: 8px 0 0 8px;
	font-size: 14px;
	min-width: 200px;
}

.wbs_search_box button {
	padding: 10px 14px;
	border: 1px solid var(--ntw-border);
	border-left: none;
	border-radius: 0 8px 8px 0;
	background: #f5f4f2;
	cursor: pointer;
}

#wbs-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 12px;
	overflow: hidden;
}

#wbs-table thead th {
	background: #fafaf9;
	color: #9a9a9a;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ntw-border);
}

#wbs-table thead th a {
	color: inherit;
	text-decoration: none;
}

#wbs-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid #f2f2f2;
	font-size: 14px;
	vertical-align: middle;
}

#wbs-table tbody tr:hover {
	background: #fafaf9;
}

.wbs-thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--ntw-border);
}

#wbs-table td[data-label='Name'] a {
	color: var(--ntw-text);
	text-decoration: none;
	font-weight: 700;
}

#wbs-table td[data-label='Name'] a:hover {
	color: var(--ntw-green);
}

.wbs-sku {
	color: #9a9a9a;
	font-size: 12px;
	margin-top: 4px;
}

.wbs-qty-td input {
	width: 56px;
	padding: 6px 8px;
	border: 1px solid var(--ntw-border);
	border-radius: 6px;
	text-align: center;
}

ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

ul.page-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--ntw-border);
	color: var(--ntw-text);
	text-decoration: none;
	font-size: 14px;
}

ul.page-numbers .page-numbers.current {
	background: var(--ntw-green);
	border-color: var(--ntw-green);
	color: #fff;
}

ul.page-numbers a.page-numbers:hover {
	border-color: var(--ntw-green);
	color: var(--ntw-green);
}

@media (max-width: 780px) {
	#wbs.wbs-head {
		position: static;
		flex-direction: column;
		align-items: stretch;
	}

	/* woo-bulk-shop's own base CSS sets .wbs-col-50 to flex-direction:
	   row-reverse, which pushes its oversized content (the quantity input +
	   "Add Bulk Quantity" button) off the left edge of the screen once it no
	   longer fits the column's width. Force everything to a single stacked
	   column instead so nothing depends on that leftover horizontal layout. */
	.wbs-col-25,
	.wbs-col-50,
	.wbs-col-25-r {
		width: 100%;
	}

	.wbs-col-50 {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch;
		text-align: left;
	}

	.wbs-qty-box {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch;
		gap: 8px;
		width: 100%;
	}

	#qty-add {
		width: 100% !important;
		box-sizing: border-box;
	}

	.wbs-btn-qty-add {
		width: 100%;
		box-sizing: border-box;
	}

	#product_cat {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.wbs_search_box {
		width: 100%;
	}

	.wbs_search_box input[type='search'] {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
}

/* Floating "Add to cart" button (woo-bulk-shop's #save), matching the live site */
#save.bs-button {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 50;
	width: auto !important;
	padding: 16px 32px;
	border: none;
	border-radius: 999px;
	background: var(--ntw-brown);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

#save.bs-button:hover {
	background: var(--ntw-green);
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	#save.bs-button {
		bottom: 16px;
		right: 16px;
		left: 16px;
		width: auto;
		text-align: center;
	}
}

/*--------------------------------------------------------------
# Form pages (OSR Visit, Marketing/Event Requests)
--------------------------------------------------------------*/
.form-page__content {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 80px;
}

.form-card {
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Gravity Forms brand restyle */
.gform_wrapper.gravity-theme {
	font-family: inherit;
}

/* Houschka-Pro angular enforcement for Gravity Forms.
   GF's theme framework drives every weight through custom-property tokens whose
   defaults (400/500/600) all render as the rounded Houschka cut. Redefining the
   tokens here — GF's supported theming path, so it survives plugin updates — maps
   them onto the only two angular cuts: 300 (body/inputs/help) and 700 (labels/
   buttons/emphasis). Covers labels, descriptions, (Required), and input text. */
.gform_wrapper,
.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme--framework,
.gform-theme--framework {
	--gf-font-weight-primary: 300;   /* input & control text */
	--gf-font-weight-secondary: 700; /* field labels */
	--gf-font-weight-tertiary: 300;  /* descriptions / help text */
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-file-btn-font-weight: 700;
	--gf-ctrl-file-zone-font-weight: 700;
	--gf-ctrl-readonly-font-weight: 300;
	--gf-ctrl-label-font-weight-secondary: 300; /* sub-labels: First/Last, Street... */
	--gf-ctrl-multiselect-selected-item-font-weight: 700;
	--gf-ctrl-date-picker-cell-font-weight: 300;
	--gf-ctrl-date-picker-head-cell-font-weight: 700;
	--gf-ctrl-date-picker-title-font-weight: 700;
}

.gform_wrapper .gform_heading {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ntw-border);
}

.gform_wrapper .gform_title {
	margin: 0;
	font-size: 24px;
	font-weight: 300;
	color: var(--ntw-text);
}

.gform_wrapper .gform_description {
	margin: 6px 0 0;
	color: #767676;
	font-size: 14px;
}

.gform_wrapper .gform_fields {
	display: block;
}

.gform_wrapper .gfield {
	margin-bottom: 20px;
	opacity: 0;
	animation: ntwFadeInUp 0.5s ease forwards;
}

.gform_wrapper .gfield:nth-of-type(1) { animation-delay: 0.05s; }
.gform_wrapper .gfield:nth-of-type(2) { animation-delay: 0.1s; }
.gform_wrapper .gfield:nth-of-type(3) { animation-delay: 0.15s; }
.gform_wrapper .gfield:nth-of-type(4) { animation-delay: 0.2s; }
.gform_wrapper .gfield:nth-of-type(5) { animation-delay: 0.25s; }
.gform_wrapper .gfield:nth-of-type(6) { animation-delay: 0.3s; }
.gform_wrapper .gfield:nth-of-type(n+7) { animation-delay: 0.35s; }

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ntw-text);
}

.gform_wrapper .gfield_required {
	color: var(--ntw-green);
	margin-left: 4px;
}

.gform_wrapper input[type='text'],
.gform_wrapper input[type='email'],
.gform_wrapper input[type='tel'],
.gform_wrapper input[type='number'],
.gform_wrapper input[type='url'],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--ntw-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gform_wrapper textarea {
	resize: vertical;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--ntw-green);
	box-shadow: 0 0 0 3px rgba(3, 144, 68, 0.15);
}

.gform_wrapper .gfield_description,
.gform_wrapper .instruction {
	margin-top: 6px;
	font-size: 12px;
	color: #9a9a9a;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	margin-top: 6px;
	font-size: 12px;
	color: #a52b1a;
}

.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
	margin-top: 8px;
	padding-top: 0;
	border-top: none;
}

.gform_wrapper input.gform_button.button {
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: 8px;
	background: var(--ntw-green) !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
}

.gform_wrapper input.gform_button.button:hover {
	background: #027a39 !important;
}

.gform_wrapper .gform_ajax_spinner {
	margin-left: 10px;
}

.gform_confirmation_wrapper,
.gform_wrapper .gform_confirmation_message {
	padding: 20px;
	border-radius: 8px;
	background: rgba(3, 144, 68, 0.08);
	color: #027a39;
	font-size: 15px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper .gfield {
		animation: none;
		opacity: 1;
	}
}

@media (max-width: 640px) {
	.form-card {
		padding: 28px 20px;
	}
}

/*--------------------------------------------------------------
# My Account
--------------------------------------------------------------*/
.myaccount-page__content {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

.myaccount-page__title {
	margin: 0 0 24px;
	font-size: 32px;
	font-weight: 300;
	color: var(--ntw-text);
}

/* The [woocommerce_my_account] shortcode wraps its output in a .woocommerce
   div, so that (not .myaccount-layout itself) is the real flex parent of the
   nav + content siblings. */
.myaccount-layout .woocommerce {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

/* Sidebar navigation */
.woocommerce-MyAccount-navigation {
	flex: 0 0 240px;
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 14px;
	padding: 12px;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	margin: 0 0 2px;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 16px;
	border-radius: 8px;
	color: var(--ntw-text);
	text-decoration: none;
	font-size: 14px;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--ntw-bg-page);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	background: var(--ntw-green);
	color: #fff;
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--ntw-border);
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #a52b1a;
}

/* Content area */
.woocommerce-MyAccount-content {
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 14px;
	padding: 32px;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	margin-top: 0;
	font-weight: 700;
	color: var(--ntw-text);
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-MyAccount-content a {
	color: var(--ntw-green);
}

/* Active-location switcher (distribution-partner-portal renders this with
   inline styles, so !important is needed to reskin it). */
.dpp-location-switcher,
.dpp-mdf-active {
	margin: 0 0 24px !important;
	padding: 16px 20px !important;
	background: var(--ntw-bg-page) !important;
	border: 1px solid var(--ntw-border) !important;
	border-radius: 12px !important;
}

.dpp-location-switcher label {
	color: var(--ntw-text) !important;
}

.dpp-location-switcher select {
	padding: 8px 12px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
}

.dpp-location-switcher .description {
	color: #767676 !important;
}

.dpp-mdf-active > div:nth-child(3) {
	color: var(--ntw-green) !important;
}

/* Tables: orders, submission logs, and the Marketing Funds location comparison */
.woocommerce-orders-table,
.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
}

.woocommerce-orders-table th,
.shop_table th {
	text-align: left;
	padding: 12px 16px;
	background: var(--ntw-bg-page);
	color: #9a9a9a;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.05em;
	font-weight: 700;
	border-bottom: 1px solid var(--ntw-border);
}

.woocommerce-orders-table td,
.woocommerce-orders-table th[scope='row'],
.shop_table td {
	padding: 14px 16px;
	border-bottom: 1px solid #f2f2f2;
	font-size: 14px;
	vertical-align: middle;
}

.woocommerce-orders-table tr:last-child td,
.woocommerce-orders-table tr:last-child th[scope='row'],
.shop_table tr:last-child td {
	border-bottom: none;
}

.woocommerce-orders-table__cell-order-status mark,
mark.order-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	background: #f0f0f0;
	color: #666;
	font-style: normal;
}

.woocommerce-orders-table__cell-order-status mark.status-completed,
.woocommerce-orders-table__cell-order-status mark.status-processing,
mark.order-status.status-completed,
mark.order-status.status-processing {
	background: rgba(3, 144, 68, 0.12);
	color: #027a39;
}

.woocommerce-orders-table__cell-order-status mark.status-on-hold,
.woocommerce-orders-table__cell-order-status mark.status-pending,
mark.order-status.status-on-hold,
mark.order-status.status-pending {
	background: rgba(230, 162, 60, 0.15);
	color: #a5690f;
}

.woocommerce-orders-table__cell-order-status mark.status-cancelled,
.woocommerce-orders-table__cell-order-status mark.status-failed,
.woocommerce-orders-table__cell-order-status mark.status-refunded,
mark.order-status.status-cancelled,
mark.order-status.status-failed,
mark.order-status.status-refunded {
	background: rgba(217, 83, 79, 0.12);
	color: #a52b1a;
}

.woocommerce-orders-table .button,
.shop_table .button {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	background: #fff;
	color: var(--ntw-text);
	text-decoration: none;
	font-size: 13px;
}

.woocommerce-orders-table .button:hover,
.shop_table .button:hover {
	border-color: var(--ntw-green);
	color: var(--ntw-green);
}

.ntw-entry-detail th {
	width: 240px;
	background: var(--ntw-bg-page);
}

.ntw-submission-date {
	color: #767676;
	font-size: 14px;
}

/* Forms: addresses, account details, and the other WooCommerce auth forms
   (lost/reset password, login, registration) that share the same classes. */
.woocommerce-address-fields .form-row,
.woocommerce-EditAccountForm .form-row,
.woocommerce-ResetPassword .form-row,
.woocommerce-form-row {
	margin-bottom: 18px;
}

.woocommerce-address-fields label,
.woocommerce-EditAccountForm label,
.woocommerce-ResetPassword label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ntw-text);
}

.woocommerce-address-fields .input-text,
.woocommerce-address-fields select,
.woocommerce-EditAccountForm .input-text,
.woocommerce-EditAccountForm select,
.woocommerce-ResetPassword .input-text {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--ntw-text);
}

.woocommerce-address-fields .input-text:focus,
.woocommerce-EditAccountForm .input-text:focus,
.woocommerce-ResetPassword .input-text:focus {
	outline: none;
	border-color: var(--ntw-green);
	box-shadow: 0 0 0 3px rgba(3, 144, 68, 0.15);
}

.woocommerce-address-fields .form-row-first,
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-address-fields .form-row-last,
.woocommerce-EditAccountForm .form-row-last {
	display: inline-block;
	width: 48%;
	vertical-align: top;
}

.woocommerce-address-fields .form-row-last,
.woocommerce-EditAccountForm .form-row-last {
	float: right;
}

.woocommerce-address-fields .form-row-first,
.woocommerce-EditAccountForm .form-row-first {
	float: left;
}

.woocommerce-address-fields .form-row-wide,
.woocommerce-EditAccountForm .form-row-wide {
	clear: both;
	width: 100%;
}

.woocommerce-address-fields button,
.woocommerce-EditAccountForm button,
.woocommerce-EditAccountForm input[type='submit'],
.woocommerce-ResetPassword button {
	clear: both;
	padding: 12px 28px;
	border: none;
	border-radius: 8px;
	background: var(--ntw-green) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.woocommerce-address-fields button:hover,
.woocommerce-EditAccountForm button:hover,
.woocommerce-EditAccountForm input[type='submit']:hover,
.woocommerce-ResetPassword button:hover {
	background: #027a39 !important;
}

@media (max-width: 860px) {
	.myaccount-layout .woocommerce {
		flex-direction: column;
	}

	.woocommerce-MyAccount-navigation {
		flex: 1 1 auto;
		width: 100%;
	}

	.woocommerce-address-fields .form-row-first,
	.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-address-fields .form-row-last,
	.woocommerce-EditAccountForm .form-row-last {
		width: 100%;
		float: none;
	}
}

/*--------------------------------------------------------------
# Cart Drawer (slide-in mini cart)
--------------------------------------------------------------*/
.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	overflow: hidden;
}

.cart-drawer.is-open {
	visibility: visible;
}

.cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 20, 12, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.cart-drawer.is-open .cart-drawer__overlay {
	opacity: 1;
}

.cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 400px;
	max-width: 90vw;
	background: #fff;
	box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
	padding: 32px 24px 24px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.cart-drawer.is-open .cart-drawer__panel {
	transform: translateX(0);
}

.cart-drawer__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: #9a9a9a;
	cursor: pointer;
}

.cart-drawer__close:hover {
	color: var(--ntw-text);
}

.widget_shopping_cart_content .woocommerce-mini-cart {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

/* The image, product-name link, and quantity span are separate siblings (not
   nested) in WooCommerce's mini-cart markup, so a float-based layout (image
   floated left, text content flowing beside/below it) handles this more
   reliably than flex, which would otherwise lay the name and quantity out
   side-by-side instead of stacked. */
.widget_shopping_cart_content .woocommerce-mini-cart-item {
	position: relative;
	padding: 16px 28px 16px 0;
	border-bottom: 1px solid var(--ntw-border);
	overflow: hidden;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item:first-child {
	padding-top: 0;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item img {
	float: left;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--ntw-border);
	margin-right: 12px;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item a:not(.remove) {
	display: block;
	color: var(--ntw-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item a:not(.remove):hover {
	color: var(--ntw-green);
}

.widget_shopping_cart_content .quantity {
	display: block;
	margin-top: 4px;
	margin-left: 68px;
	font-size: 13px;
	color: #767676;
}

.widget_shopping_cart_content .remove.remove_from_cart_button {
	position: absolute;
	top: 16px;
	right: 0;
	width: 22px;
	height: 22px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	color: #9a9a9a;
	text-decoration: none;
	font-size: 16px;
}

.widget_shopping_cart_content .remove.remove_from_cart_button:hover {
	background: #fdecea;
	color: #a52b1a;
}

.woocommerce-mini-cart__total.total {
	display: flex;
	justify-content: space-between;
	margin: 0 0 20px;
	padding-top: 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ntw-text);
}

.woocommerce-mini-cart__buttons.buttons {
	display: flex;
	gap: 10px;
	margin: 0;
}

.woocommerce-mini-cart__buttons.buttons a {
	flex: 1 1 0;
	text-align: center;
	padding: 12px 16px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
}

.woocommerce-mini-cart__buttons.buttons a.wc-forward:not(.checkout) {
	background: var(--ntw-bg-page);
	color: var(--ntw-text);
}

.woocommerce-mini-cart__buttons.buttons a.wc-forward:not(.checkout):hover {
	background: #ececea;
}

.woocommerce-mini-cart__buttons.buttons a.checkout {
	background: var(--ntw-green);
	color: #fff;
}

.woocommerce-mini-cart__buttons.buttons a.checkout:hover {
	background: #027a39;
}

.widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
	color: #767676;
	font-size: 14px;
	text-align: center;
	margin-top: 40px;
}

@media (prefers-reduced-motion: reduce) {
	.cart-drawer__overlay,
	.cart-drawer__panel {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Cart page (WooCommerce Cart block)
--------------------------------------------------------------*/
.cart-page__content {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

.cart-page__title {
	margin: 0 0 24px;
	font-size: 32px;
	font-weight: 300;
	color: var(--ntw-text);
}

.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
	align-items: flex-start;
	gap: 32px;
}

.wc-block-cart__main,
.wc-block-cart__sidebar {
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 14px;
	padding: 24px;
}

.wc-block-cart-items {
	width: 100%;
	border-collapse: collapse;
}

.wc-block-cart-items__header th {
	text-align: left;
	padding: 0 0 16px;
	color: #9a9a9a;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.05em;
	font-weight: 700;
	border-bottom: 1px solid var(--ntw-border);
}

.wc-block-cart-items__row td {
	padding: 20px 12px 20px 0;
	border-bottom: 1px solid #f2f2f2;
	vertical-align: top;
}

.wc-block-cart-items__row:last-child td {
	border-bottom: none;
}

.wc-block-cart-item__image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--ntw-border);
}

.wc-block-components-product-name {
	color: var(--ntw-text);
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
}

.wc-block-components-product-name:hover {
	color: var(--ntw-green);
}

.wc-block-cart-item__prices {
	margin: 4px 0;
	font-size: 14px;
	color: #767676;
}

/* The block duplicates the product name as a "description" — redundant with
   the title link right above it, so hide it rather than show the name twice. */
.wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-cart-item__quantity {
	margin-top: 10px;
}

.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	overflow: hidden;
}

.wc-block-components-quantity-selector__input {
	width: 40px;
	border: none;
	text-align: center;
	font-size: 14px;
	padding: 8px 0;
}

.wc-block-components-quantity-selector__button {
	border: none;
	background: var(--ntw-bg-page);
	width: 32px;
	height: 36px;
	cursor: pointer;
	font-size: 14px;
}

.wc-block-components-quantity-selector__button:hover {
	background: #ececea;
}

.wc-block-cart-item__remove-link {
	margin-top: 10px;
	border: none;
	background: none;
	color: #9a9a9a;
	cursor: pointer;
	padding: 0;
}

.wc-block-cart-item__remove-link:hover {
	color: #a52b1a;
}

.wc-block-cart-items__header-total,
.wc-block-cart-item__total {
	text-align: right;
}

.wc-block-cart__totals-title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ntw-text);
}

.wc-block-components-totals-item {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	font-size: 14px;
	border-bottom: 1px solid #f2f2f2;
}

.wc-block-components-totals-footer-item {
	font-size: 16px;
	font-weight: 700;
	border-bottom: none;
}

.wc-block-components-panel__button {
	color: var(--ntw-green);
	font-size: 14px;
	cursor: pointer;
}

.wc-block-cart__submit .wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	margin-top: 16px;
	border-radius: 8px;
	background: var(--ntw-text) !important;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
}

.wc-block-cart__submit .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover {
	background: var(--ntw-green) !important;
}

/* Clear Cart (cart page) */
.ntw-clear-cart-wrap {
	margin-top: 20px;
}

.ntw-clear-cart {
	padding: 10px 20px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	background: #fff;
	color: #a52b1a;
	font-size: 14px;
	cursor: pointer;
}

.ntw-clear-cart:hover {
	border-color: #a52b1a;
	background: #fdecea;
}

.ntw-clear-cart:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Clear Cart (header cart drawer) */
.cart-drawer__clear-wrap {
	margin-top: 4px;
}

.cart-drawer__clear {
	width: 100%;
	padding: 10px 16px;
	margin-top: 12px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	background: #fff;
	color: #a52b1a;
	font-size: 13px;
	cursor: pointer;
}

.cart-drawer__clear:hover {
	border-color: #a52b1a;
	background: #fdecea;
}

.cart-drawer__clear:disabled {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 860px) {
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
		flex-direction: column;
	}

	.wc-block-cart__main,
	.wc-block-cart__sidebar {
		width: 100%;
	}
}

/*--------------------------------------------------------------
# Checkout page (classic [woocommerce_checkout])
--------------------------------------------------------------*/
.checkout-page__content {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

.checkout-page__title {
	margin: 0 0 24px;
	font-size: 32px;
	font-weight: 300;
	color: var(--ntw-text);
}

/* Notices */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-NoticeGroup {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 20px;
	border-radius: 10px;
	font-size: 14px;
}

.woocommerce-error {
	background: #fdecea;
	color: #a52b1a;
}

.woocommerce-message {
	background: rgba(3, 144, 68, 0.1);
	color: #027a39;
}

.woocommerce-info {
	background: #eef3fb;
	color: #2a5185;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	margin: 0;
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: inherit;
	text-decoration: underline;
}

/* Two-column layout: billing/shipping fields left, order notes + coupon area right */
#customer_details.col2-set {
	display: flex;
	gap: 32px;
	margin-bottom: 32px;
}

#customer_details .col-1,
#customer_details .col-2 {
	flex: 1 1 0;
	min-width: 0;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ntw-text);
}

.woocommerce-checkout .form-row {
	margin-bottom: 18px;
}

.woocommerce-checkout label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ntw-text);
}

.woocommerce-checkout .required {
	color: #a52b1a;
	text-decoration: none;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--ntw-text);
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--ntw-green);
	box-shadow: 0 0 0 3px rgba(3, 144, 68, 0.15);
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	display: inline-block;
	width: 48%;
	vertical-align: top;
}

.woocommerce-checkout .form-row-first {
	float: left;
}

.woocommerce-checkout .form-row-last {
	float: right;
}

.woocommerce-checkout .form-row-wide {
	clear: both;
	width: 100%;
}

/* Distributor location field (distribution-partner-portal) gets the same
   treatment as any other select, plus its helper text underneath. */
#dpp_order_location {
	margin-bottom: 4px;
}

#dpp_order_location-description {
	display: block;
	margin: 0 0 18px;
	font-size: 13px;
	color: #767676;
}

/* Order review table */
#order_review {
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 14px;
	padding: 24px;
}

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0;
}

.woocommerce-checkout-review-order-table thead th {
	text-align: left;
	padding: 0 0 14px;
	color: #9a9a9a;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.05em;
	font-weight: 700;
	border-bottom: 1px solid var(--ntw-border);
}

.woocommerce-checkout-review-order-table thead th.product-total {
	text-align: right;
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table tfoot th {
	padding: 14px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 14px;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td {
	border-bottom: none;
	font-size: 16px;
	font-weight: 700;
	color: var(--ntw-text);
}

.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

/* Payment methods */
.wc_payment_methods {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.wc_payment_method {
	border: 1px solid var(--ntw-border);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 10px;
}

.wc_payment_method label {
	display: inline;
	margin: 0 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ntw-text);
	cursor: pointer;
}

.wc_payment_method input.input-radio {
	accent-color: var(--ntw-green);
}

.wc_payment_method .payment_box {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ntw-border);
	font-size: 14px;
	color: #767676;
}

.wc_payment_method .payment_box p:last-child {
	margin-bottom: 0;
}

/* Terms + place order */
.woocommerce-privacy-policy-text {
	margin: 20px 0;
	font-size: 13px;
	color: #767676;
}

.woocommerce-privacy-policy-text a {
	color: var(--ntw-green);
}

#place_order,
button[name='woocommerce_checkout_update_totals'] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	border: none;
	border-radius: 8px;
	background: var(--ntw-green) !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

#place_order:hover {
	background: #027a39 !important;
}

@media (max-width: 860px) {
	#customer_details.col2-set {
		flex-direction: column;
		gap: 0;
	}

	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		width: 100%;
		float: none;
	}
}

/*--------------------------------------------------------------
# Pricing Guide
--------------------------------------------------------------*/
/* The ntw-pricing-guide plugin ([ntw_catalog]) ships its own complete,
   already-on-brand UI (toolbar, filters, product grid) — this only brings
   the page heading and outer margins in line with the rest of the site. */
.pricing-guide-page__content {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

.pricing-guide-page__title {
	margin: 0 0 24px;
	font-family: houschka-pro, sans-serif;
	font-size: 32px;
	font-weight: 300;
	color: var(--ntw-text);
}

/*--------------------------------------------------------------
# Privacy Policy (long-form prose)
--------------------------------------------------------------*/
.privacy-page__content {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 24px 80px;
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 14px;
	margin-top: 40px;
	margin-bottom: 40px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ntw-text);
}

.privacy-page__content h1 {
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 300;
	color: var(--ntw-text);
}

.privacy-page__content h2 {
	margin: 40px 0 16px;
	padding-top: 24px;
	border-top: 1px solid var(--ntw-border);
	font-size: 20px;
	font-weight: 700;
	color: var(--ntw-text);
}

.privacy-page__content h2:first-of-type {
	border-top: none;
	padding-top: 0;
}

.privacy-page__content h3 {
	margin: 24px 0 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ntw-text);
}

.privacy-page__content p {
	margin: 0 0 16px;
}

.privacy-page__content ul {
	margin: 0 0 16px;
	padding-left: 22px;
}

.privacy-page__content li {
	margin-bottom: 8px;
}

.privacy-page__content a {
	color: var(--ntw-green);
}

.privacy-page__content strong {
	color: var(--ntw-text);
}

@media (max-width: 640px) {
	.privacy-page__content {
		padding: 32px 20px 60px;
		margin-top: 0;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
}

/*--------------------------------------------------------------
# Single Product
--------------------------------------------------------------*/
/* No template override needed — WooCommerce's own gallery, summary, tabs,
   and related-products markup are styled directly via their default classes.
   body.single-product is added automatically by WooCommerce. */
.single-product #primary {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 24px 80px;
}

.single-product .woocommerce-breadcrumb {
	margin: 0 0 24px;
	font-size: 13px;
	color: #9a9a9a;
}

.single-product .woocommerce-breadcrumb a {
	color: #767676;
	text-decoration: none;
}

.single-product .woocommerce-breadcrumb a:hover {
	color: var(--ntw-green);
}

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

/* Gallery */
.woocommerce-product-gallery {
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 14px;
	padding: 16px;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	object-fit: contain;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	width: 64px;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	border-radius: 6px;
	border: 1px solid var(--ntw-border);
	cursor: pointer;
}

/* Summary column */
.single-product .summary.entry-summary {
	padding-top: 4px;
}

.single-product .product_title.entry-title {
	margin: 0 0 12px;
	font-family: houschka-pro, sans-serif;
	font-size: 28px;
	font-weight: 300;
	color: var(--ntw-text);
}

.single-product .summary p.price {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 700;
	color: var(--ntw-text);
}

.single-product .summary p.price ins {
	text-decoration: none;
}

.single-product .summary p.price del {
	color: #9a9a9a;
	margin-right: 8px;
}

.single-product .woocommerce-product-details__short-description {
	margin: 0 0 24px;
	color: #555;
	font-size: 15px;
	line-height: 1.6;
}

.single-product .stock {
	display: inline-block;
	margin-bottom: 20px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	background: rgba(3, 144, 68, 0.1);
	color: #027a39;
}

.single-product .stock.out-of-stock {
	background: #fdecea;
	color: #a52b1a;
}

.single-product form.cart {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.single-product form.cart .quantity {
	display: inline-flex;
}

.single-product form.cart .qty {
	width: 70px;
	box-sizing: border-box;
	padding: 12px 10px;
	border: 1px solid var(--ntw-border);
	border-radius: 8px;
	font-size: 15px;
	text-align: center;
}

.single-product .single_add_to_cart_button {
	padding: 12px 32px;
	border: none;
	border-radius: 8px;
	background: var(--ntw-green) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.single-product .single_add_to_cart_button:hover {
	background: #027a39 !important;
}

.single-product .product_meta {
	padding-top: 16px;
	border-top: 1px solid var(--ntw-border);
	font-size: 13px;
	color: #767676;
}

.single-product .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

.single-product .product_meta a {
	color: var(--ntw-green);
}

/* Tabs + related products span both grid columns */
.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .upsells.products {
	grid-column: 1 / -1;
}

.single-product .woocommerce-tabs {
	margin-top: 24px;
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 0 -1px;
	padding: 0;
	border-bottom: 1px solid var(--ntw-border);
}

.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 20px;
	color: #767676;
	text-decoration: none;
	font-size: 14px;
	border-bottom: 2px solid transparent;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ntw-text);
	border-bottom-color: var(--ntw-green);
	font-weight: 700;
}

.single-product .woocommerce-tabs .panel {
	padding: 24px 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ntw-text);
}

.single-product .related.products,
.single-product .upsells.products {
	margin-top: 56px;
}

.single-product .related.products > h2,
.single-product .upsells.products > h2 {
	margin: 0 0 24px;
	font-family: houschka-pro, sans-serif;
	font-size: 22px;
	font-weight: 300;
	color: var(--ntw-text);
}

.single-product .related.products ul.products,
.single-product .upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product {
	/* Reset the theme's own leftover Underscores WooCommerce compat CSS
	   (woocommerce.css), which floats li.product with a percentage width for
	   its .columns-4 grid — that CSS never gets overridden by properties we
	   don't also declare, so it silently wins even though our grid rules are
	   more specific overall. */
	float: none;
	width: auto;
	margin: 0;
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 12px;
	padding: 16px;
	text-align: center;
}

/* The whole card (image + title + price) is wrapped in a single anchor that
   defaults to display:inline, which breaks the block-level title's width. */
.single-product .related.products ul.products li.product a.woocommerce-loop-product__link,
.single-product .upsells.products ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
}

.single-product .related.products ul.products li.product img,
.single-product .upsells.products ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 12px;
}

.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ntw-text);
}

.single-product .related.products ul.products li.product .price,
.single-product .upsells.products ul.products li.product .price {
	display: block;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ntw-text);
}

.single-product .related.products ul.products li.product .button,
.single-product .upsells.products ul.products li.product .button {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 8px;
	background: var(--ntw-bg-page);
	color: var(--ntw-text);
	text-decoration: none;
	font-size: 13px;
}

.single-product .related.products ul.products li.product .button:hover,
.single-product .upsells.products ul.products li.product .button:hover {
	background: var(--ntw-green);
	color: #fff;
}

@media (max-width: 860px) {
	.single-product div.product {
		grid-template-columns: 1fr;
	}

	.single-product .related.products ul.products,
	.single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.single-product .related.products ul.products,
	.single-product .upsells.products ul.products {
		grid-template-columns: 1fr;
	}
}

/* Houschka-Pro angular override: the woo-variation-swatches plugin ships its
   selected-variation label at weight 600, which renders as the rounded cut.
   Force it to 700 (angular) so it matches the rest of the portal. */
.woo-variation-swatches.wvs-show-label .variations th .woo-selected-variation-item-name,
.woo-variation-swatches.wvs-show-label .variations td .woo-selected-variation-item-name,
.woo-variation-swatches.wvs-show-label .variations th label,
.woo-variation-swatches.wvs-show-label .variations td label {
	font-weight: 700 !important;
}

/*--------------------------------------------------------------
# Motion (Lenis smooth scroll + GSAP reveals)
--------------------------------------------------------------*/
html.lenis,
html.lenis body {
	height: auto;
}

html.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

body.ntw-scroll-locked {
	overflow: hidden;
}

/* Elements animated by GSAP start hidden via a JS-applied class (not a CSS
   keyframe) so there's no flash of the animated state before JS runs, and
   nothing is ever stuck invisible if a script fails to load. */
.ntw-gsap-init [data-ntw-reveal] {
	opacity: 0;
}

/*--------------------------------------------------------------
# Mobile overflow + polish (2026-07)
Appended last on purpose: equal-specificity rules here win over
everything above. Fixes the page-wider-than-viewport problem on
phones plus small-screen type/spacing consistency.
--------------------------------------------------------------*/

/* --- Grid hardening -------------------------------------------------------
   Bare 1fr tracks floor at min-content, so one long SKU or product title can
   blow the grid past the viewport. minmax(0, 1fr) lets tracks shrink. */
.dashboard__cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-grid__list {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.single-product .related.products ul.products,
.single-product .upsells.products ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px) {
	.product-grid__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.dashboard__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.product-grid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.single-product .related.products ul.products,
	.single-product .upsells.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.product-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	/* Restore the theme's original 1-col collapse — the 2-col rule above
	   comes later in the file than the original ≤640 rule and would
	   otherwise override it. */
	.dashboard__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 500px) {
	.single-product .related.products ul.products,
	.single-product .upsells.products ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 400px) {
	.product-grid__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Header shrink --------------------------------------------------------
   At phone widths the 63px logo + 24px gaps + cart + MDF balance + hamburger
   exceed the viewport (measured 24px overflow at 375px). Tighten everything
   and cap the MDF location name — it's unbounded user data. */
@media (max-width: 860px) {
	.site-header__inner {
		min-height: 0;
		padding: 10px 16px;
		gap: 14px;
	}

	.site-logo-img,
	.site-branding img {
		height: 52px;
	}

	.site-header__actions {
		gap: 14px;
		min-width: 0;
	}

	.header-account {
		min-width: 0;
	}

	.header-account__balance {
		font-size: 12px;
	}

	.header-account__balance .dpp-mdf-amount {
		white-space: nowrap;
	}
}

/* The header shows only the MDF balance — truncated org names read badly, so
   the location name is hidden here at every width. (It still appears in full
   on the Marketing Funds tab and the checkout location picker.) */
.header-account__balance .dpp-mdf-loc {
	display: none;
}

@media (max-width: 480px) {
	.site-header__inner {
		padding: 8px 12px;
		gap: 10px;
	}

	.site-logo-img,
	.site-branding img {
		height: 44px;
	}
}

/* --- My Account tables ----------------------------------------------------
   woocommerce.css hides tbody th when shop_table_responsive tables stack on
   mobile, which deletes the entry-detail field labels (they're th cells), and
   its td::before prints a stray ": " because these tds carry no data-title.
   Selectors are 0,2,3 to beat its 0,1,3 — woocommerce.css loads after this
   file, so specificity (not order) has to win. */
@media (max-width: 47.9375em) {
	table.shop_table_responsive.ntw-entry-detail tbody th {
		display: block;
		width: auto;
		padding: 12px 16px 0;
		text-align: left;
		background: transparent;
		border-bottom: none;
	}

	table.shop_table_responsive.ntw-entry-detail tr td {
		text-align: left;
		padding-top: 4px;
	}

	table.shop_table_responsive.ntw-entry-detail tr td::before {
		display: none;
	}
}

table.shop_table_responsive.ntw-entry-detail td {
	overflow-wrap: anywhere;
}

/* Comparison-style tables that don't stack: scroll inside their own box
   instead of widening the page. display:block on a table is fine — the rows
   become an anonymous table box inside the scroll container. */
@media (max-width: 860px) {
	.woocommerce-MyAccount-content .shop_table:not(.shop_table_responsive) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce-MyAccount-content {
		padding: 24px 16px;
	}
}

/* --- Quick Add bulk table -------------------------------------------------
   Column alignment matters for bulk entry, so side-scroll rather than stack.
   !important on #qty-add: wbs.css pins it at 251px and plugin CSS order vs
   this file is load-order dependent. */
@media (max-width: 780px) {
	#wbs-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#qty-add {
		width: auto !important;
		max-width: 100%;
	}
}

/* --- Single product gallery -----------------------------------------------
   The slick prev-arrow sits 16px outside the gallery's left edge and pokes
   past the viewport on phones; keep the arrows inside the gallery box. */
@media (max-width: 640px) {
	.woocommerce-product-gallery {
		overflow: hidden;
	}
}

/* --- Root overflow guard --------------------------------------------------
   body already has overflow-x:hidden, but iOS Safari only honors that when
   the root clips too. clip (unlike hidden) creates no scroll container, so
   position:sticky/fixed elements and Lenis window-scrolling are untouched
   and nothing can programmatically scroll the page sideways. hidden first
   as the fallback for browsers without clip support. */
html {
	overflow-x: hidden;
	overflow-x: clip;
}

/* --- Small-screen type + spacing polish ----------------------------------- */
@media (max-width: 600px) {
	.dashboard__greeting {
		font-size: 28px;
	}

	.page-hero__title {
		font-size: 26px;
	}

	.page-hero__subtitle {
		font-size: 15px;
	}

	.site-footer {
		padding: 40px 24px 24px;
	}
}

@media (max-width: 480px) {
	.dashboard {
		padding: 32px 16px 64px;
	}

	.product-page__content {
		padding: 24px 16px 64px;
	}

	.form-page__content {
		padding: 32px 16px 64px;
	}

	.myaccount-page__content {
		padding: 24px 16px 64px;
	}

	.myaccount-page__title {
		font-size: 26px;
	}

	.dashboard__greeting {
		font-size: 24px;
	}

	.page-hero__title {
		font-size: 23px;
	}
}

/*--------------------------------------------------------------
# Starter Packs
--------------------------------------------------------------*/
.starter-packs__content {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

.starter-packs__intro {
	max-width: 720px;
	margin: 0 0 36px;
	font-size: 16px;
	line-height: 1.65;
	color: #5f5f5f;
}

.starter-packs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}

.starter-pack {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ntw-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.starter-pack__media {
	aspect-ratio: 16 / 9;
	background: #f5f4f2;
}

.starter-pack__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.starter-pack__body {
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	gap: 14px;
}

.starter-pack__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--ntw-text);
}

.starter-pack__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #767676;
}

.starter-pack__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ntw-border);
}

.starter-pack__count {
	font-size: 13px;
	color: #767676;
}

.starter-pack__total {
	font-size: 18px;
	font-weight: 700;
	color: var(--ntw-green);
}

/* The contents list is collapsed by default but must never feel hidden — the
   whole premise is that the user can see what they're about to add. */
.starter-pack__contents {
	margin: 0;
}

.starter-pack__contents summary {
	cursor: pointer;
	font-size: 14px;
	color: var(--ntw-green);
	list-style: none;
}

.starter-pack__contents summary::-webkit-details-marker {
	display: none;
}

.starter-pack__contents summary::after {
	content: ' \25be';
}

.starter-pack__contents[open] summary::after {
	content: ' \25b4';
}

.starter-pack__items {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	max-height: 320px;
	overflow-y: auto;
}

.starter-pack__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f4f4f4;
}

.starter-pack__item:last-child {
	border-bottom: 0;
}

.starter-pack__item-thumb img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	background: #f5f4f2;
}

.starter-pack__item-detail {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.starter-pack__item-name {
	font-size: 13px;
	line-height: 1.4;
	color: var(--ntw-text);
}

.starter-pack__item-sku {
	font-size: 11px;
	color: #9a9a9a;
}

.starter-pack__item-note {
	font-size: 12px;
	color: #767676;
	font-style: italic;
}

.starter-pack__item-qty {
	font-size: 13px;
	font-weight: 700;
	color: #767676;
	white-space: nowrap;
}

.starter-pack__actions {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-top: auto;
	padding-top: 4px;
}

.starter-pack__multiplier {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.starter-pack__multiplier-label {
	font-size: 12px;
	color: #767676;
}

/* Type selector included to outrank the _s scaffold's own input rule, and
   font-weight declared explicitly because form controls don't inherit it and
   houschka's mid weights are the wrong (rounded) cut. Same recipe as the
   catalog search field. */
.starter-pack input[type="number"].starter-pack__multiplier-input {
	width: 72px;
	padding: 10px 10px;
	font-size: 14px;
	font-weight: 300;
	color: var(--ntw-text);
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	line-height: 1.2;
}

.starter-pack input[type="number"].starter-pack__multiplier-input:focus {
	border-color: var(--ntw-green);
	outline: none;
}

.starter-pack__add {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--ntw-green);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.starter-pack__add:hover {
	opacity: 0.88;
}

.starter-pack__add[disabled] {
	opacity: 0.55;
	cursor: default;
}

.starter-pack__multiplier-hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #9a9a9a;
}

.starter-pack__result {
	display: none;
}

.starter-pack__result.is-visible {
	display: block;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.55;
}

.starter-pack__result.is-success {
	background: rgba(3, 144, 68, 0.08);
	border: 1px solid rgba(3, 144, 68, 0.25);
}

.starter-pack__result.is-error {
	background: rgba(204, 51, 102, 0.07);
	border: 1px solid rgba(204, 51, 102, 0.25);
}

.starter-pack__result-message {
	margin: 0;
	color: var(--ntw-text);
}

.starter-pack__result-heading {
	margin: 10px 0 2px;
	font-weight: 700;
	color: #767676;
	font-size: 12px;
}

.starter-pack__result-list {
	margin: 0;
	padding-left: 18px;
	color: #767676;
	font-size: 12px;
}

.starter-pack__result-link {
	display: inline-block;
	margin-top: 12px;
	font-weight: 700;
	color: var(--ntw-green);
	text-decoration: none;
}

.starter-pack__result-link:hover {
	text-decoration: underline;
}

.starter-packs__footnote {
	margin: 36px 0 0;
	font-size: 13px;
	color: #9a9a9a;
}

.starter-packs__empty {
	color: #767676;
}

@media (max-width: 480px) {
	.starter-packs__content {
		padding: 24px 16px 64px;
	}

	.starter-packs__grid {
		grid-template-columns: 1fr;
	}

	/* The qty box and the button won't both fit at 320px without the button
	   text wrapping; stack them and let the button run full width. */
	.starter-pack__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.starter-pack input[type="number"].starter-pack__multiplier-input {
		width: 100%;
	}
}