/* DEX Collection theme styles.
 * Every color below is a CSS custom property referenced via var(...) -
 * the whole palette can be re-themed later by editing only the :root
 * block, no other rule in this file should ever contain a literal color.
 */

:root {
	--color-primary: #FB0000;
	--color-primary-light: #FF3333;
	--color-surface: #FFFFFF;
	--color-surface-alt: #F5F6F8;
	--color-accent: #E8A33D;
	--color-text: #1F2933;
	--color-muted: #6B7785;
	--color-border: #E2E5EA;
	--color-danger: #C0392B;
	--color-markup-summary: #2E9E4F;
	--color-disclaimer: #7B5FBE;
	--color-price-local: #6B7785;
	--color-tag-full-color: #8E6FD8;
	--color-tag-eco: #17B32B;

	--font-heading: 'Poppins', sans-serif;
	--font-body: 'Inter', sans-serif;

	--mobile-breakpoint: 782px;
	--tablet-breakpoint: 1024px;
	--hero-max-height: 35vh;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-surface);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	margin: 0 0 0.5em;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	display: block;
}

.site-header {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

/* ---- Block editor color palette (functions.php's editor-color-palette,
 * mirroring :root above) - text-color pairing for the dark background
 * swatches, so anything using .has-primary-background-color reads
 * correctly without the editor also having to separately pick a text
 * color every time. */
.has-primary-background-color {
	color: var(--color-surface, #fff);
}

/* Scoped to actually only pair with .has-primary-background-color
 * (per the comment above) - written unscoped before, which silently
 * forced *every* custom text color anywhere on the site to white
 * (!important beats a plain inline style) the moment a block also
 * carried the generic has-text-color marker class WP adds for any
 * custom text color, not just white - confirmed via the External
 * Pricing page's own red heading, which this bug was making
 * white-on-white/invisible before this fix. */
.has-primary-background-color.has-text-color,
.has-primary-background-color .has-text-color {
	color: var(--color-surface, #fff) !important;
}

/* External Pricing page's "Your Products, Our Printing!" heading - a
 * plain custom class (block.json's className support), not the
 * block's own native color picker (has-text-color/style="color:...")
 * - that path only works via a real inline style with an !important
 * fight against WP core's own global .has-text-color rule, and an
 * inline !important never matches what the heading block's own
 * save() actually produces, so the block editor flags it as invalid/
 * unrecoverable content on reopen. A plain class sidesteps the whole
 * has-text-color mechanism (and its !important) instead of fighting it. */
.external-pricing-heading {
	color: var(--color-danger, #C0392B);
}

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

.top-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
	padding: 0.5rem 1.5rem;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.top-bar .menu {
	display: flex;
	gap: 1.5rem;
	font-size: 0.8rem;
	color: var(--color-muted);
}

.country-select {
	font-family: var(--font-body);
	font-size: 0.8rem;
	color: var(--color-muted);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 0.2rem 0.4rem;
	outline: none;
}

.country-select:focus {
	border-color: var(--color-accent);
}

/* Current pricing-tier indicator next to the country selector
   (header.php) - lives inside .top-bar, which already collapses to
   display: none below 782px (see that rule further down), so this is
   desktop-only for free, no extra media query needed. The tooltip
   reuses .tier-card/.tier-card-row's existing styling as-is (My
   Profile's own tier comparison cards) - this wrapper only adds
   positioning/visibility on top of it. */
.header-user-level {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	position: relative;
	font-size: 0.8rem;
	color: var(--color-muted);
	cursor: default;
}

.header-user-level-tooltip {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.5rem;
	z-index: 20;
	display: none;
	width: max-content;
	max-width: 260px;
}

.header-user-level:hover .header-user-level-tooltip,
.header-user-level:focus-within .header-user-level-tooltip {
	display: block;
}

.top-bar .menu a:hover {
	color: var(--color-accent);
}

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

.top-bar .menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: none;
	flex-direction: column;
	min-width: 200px;
	padding: 0.5rem 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 8px 16px rgba(31, 41, 51, 0.12);
}

/* "Sourcing" (its own sub-categories, ~10 items - collections/sourcing/)
 * sits near the right end of the top bar (.top-bar's justify-content:
 * flex-end packs every item against the right edge), so the default
 * left:0 above opens its dropdown further right than the viewport,
 * forcing a horizontal scrollbar. It's the only TOP-LEVEL item in this
 * menu that's a real taxonomy-term link with children - "All Products"
 * (the other item with a dropdown) is a menu-item-type-custom "#" link -
 * so menu-item-type-taxonomy is enough to target it precisely, with no
 * extra markup/classes needed. Anchoring to the item's own right edge
 * instead of its left guarantees the dropdown can never extend past the
 * viewport (that edge is already on-screen, since the trigger itself is),
 * and lines it up with the page's own right edge - exactly flush with it
 * when Sourcing is the last item (ghost pages, where Sign In/Branding are
 * both already stripped - see account-menu.php), inset by the width of
 * whatever still follows it otherwise (Sign In, on the real site). */
.top-bar .menu > li.menu-item-type-taxonomy.menu-item-has-children > .sub-menu {
	left: auto;
	right: 0;
}

.top-bar .menu .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	white-space: nowrap;
}

.top-bar .menu li {
	position: relative;
}

.top-bar .menu li:hover > .sub-menu,
.top-bar .menu li:focus-within > .sub-menu {
	display: flex;
}

/* A 3rd-level item (e.g. "All Products" > "Bags" > "Backpacks") would
 * otherwise inherit .sub-menu's own top:100%/left:0 and drop straight
 * down on top of its own parent dropdown - fly out to the side
 * instead, standard nested-dropdown convention. The li:hover > .sub-menu
 * show/hide rule above already applies at any depth (it only cares
 * about the hovered li's own direct child), so no visibility rule
 * changes are needed here, just repositioning. */
.top-bar .menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	border-radius: 4px;
}

.top-bar .menu .sub-menu li.menu-item-has-children > a::after {
	transform: rotate(-45deg) translateX(-2px);
}

/* "All Products" (a custom "#" link, unlike the taxonomy-term "Sourcing"
 * handled above) sits toward the right end of the top bar, and with the
 * 4-level menu (All Products > Pens > China Made Pens > Plastic Pens) its
 * right-opening fly-outs ran past the viewport and forced a horizontal
 * scrollbar. Anchoring its first dropdown to the item's right edge instead
 * of its left pushes the whole cascade left by that dropdown's width, while
 * the nested fly-outs still open to the right. */
.top-bar .menu > li.menu-item-type-custom.menu-item-has-children > .sub-menu {
	left: auto;
	right: 0;
}

/* ---- "My Account" sidebar (desktop/laptop only) ----
 * header.php opens .site-body right after </header> (under the blue
 * .main-nav) and footer.php closes it right before <footer> - every
 * template's own output lands inside .site-body-main untouched, so
 * this is a real in-flow two-column layout, not an overlay: the
 * sidebar pushes .site-body-main over rather than floating on top of
 * it, and (align-items: stretch, the flex default) automatically
 * matches .site-body-main's own height - full height of the page's
 * actual content, stopping before the footer, with no JS/height math
 * needed.
 *
 * account-menu.php's dex_account_sidebar arg (only on this one
 * wp_nav_menu() call) returns just the 5 real links, flattened - the
 * desktop top bar's own "My Account" dropdown is dropped entirely
 * (dex_desktop_top_bar arg) since it would just duplicate this, and
 * the #mobile-menu-panel call (no special arg) is completely
 * unchanged - mobile never sees .account-sidebar at all (hidden
 * below). */
@media (min-width: 1025px) {
	.site-body {
		display: flex;
	}

	.site-body-main {
		flex: 1 1 auto;
		/* Without this, a flex child with wide content (e.g. a data
		 * table on the My Order page) can force the whole row wider
		 * than the viewport instead of scrolling within itself. */
		min-width: 0;
		min-height: 700px;
	}

	.account-sidebar {
		flex: 0 0 56px;
		/* This is what makes hovering reflow .site-body-main - a real
		 * flex-basis change, not an overlay into pre-reserved space. */
		transition: flex-basis 0.2s ease;
	}

	.account-sidebar:hover,
	.account-sidebar:focus-within {
		/* Wide enough for "Custom Website Application" (the longest label). */
		flex: 0 0 290px;
	}

	.account-sidebar-menu {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: var(--color-primary);
		/* Horizontal clip still hides collapsed labels; vertical scrolls
		 * so an opened "Services" submenu can't clip the last rows on a
		 * short viewport. */
		overflow-x: hidden;
		overflow-y: auto;
	}

	.account-sidebar-menu a {
		display: flex;
		align-items: center;
		gap: 0;
		padding: 0.9rem 1rem;
		color: var(--color-surface);
		transition: gap 0.2s ease;
	}

	.account-sidebar:hover .account-sidebar-menu a,
	.account-sidebar:focus-within .account-sidebar-menu a {
		gap: 0.85rem;
	}

	.account-sidebar-menu a:hover {
		background: var(--color-primary-light);
		color: var(--color-surface);
	}

	/* "Services" expandable group. Collapsed rail: children hidden, no
	 * caret. Expanded rail (:hover / :focus-within): caret shows; clicking
	 * the row toggles .is-open (initAccountSidebarSubmenu() in main.js),
	 * which reveals the children inline. */
	.account-sidebar-menu .menu-item-has-children > a::after {
		content: '';
		flex: 0 0 auto;
		margin-left: auto;
		width: 6px;
		height: 6px;
		border-right: 1px solid var(--color-surface);
		border-bottom: 1px solid var(--color-surface);
		transform: rotate(45deg);
		opacity: 0;
		transition: transform 0.15s ease, opacity 0.15s ease;
	}

	.account-sidebar:hover .menu-item-has-children > a::after,
	.account-sidebar:focus-within .menu-item-has-children > a::after {
		opacity: 1;
	}

	.account-sidebar-menu .menu-item-has-children.is-open > a::after {
		transform: rotate(225deg);
	}

	.account-sidebar-menu .sub-menu {
		display: none;
		flex-direction: column;
		background: rgba(0, 0, 0, 0.14);
	}

	.account-sidebar:hover .menu-item-has-children.is-open > .sub-menu,
	.account-sidebar:focus-within .menu-item-has-children.is-open > .sub-menu {
		display: flex;
	}

	.account-sidebar-menu .sub-menu a {
		padding: 0.6rem 1rem 0.6rem 2.6rem;
		font-size: 0.85rem;
	}

	.dex-account-menu-sublabel {
		white-space: nowrap;
		overflow: hidden;
	}

	.account-sidebar-menu i {
		flex: 0 0 1.25em;
		font-size: 1.1rem;
		text-align: center;
	}

	/* Collapsed to zero width itself (not just relying on the rail's
	 * own overflow:hidden to clip it) - at 56px collapsed, icon + gap +
	 * padding alone leave just enough room for a label's first few
	 * characters to peek out before the rail's edge would otherwise
	 * cut it off. */
	.dex-account-menu-label {
		max-width: 0;
		overflow: hidden;
		opacity: 0;
		white-space: nowrap;
		transition: max-width 0.2s ease, opacity 0.15s ease;
	}

	/* All 5 labels reveal together, matching the sidebar's own width
	 * expansion above - not just whichever single link the mouse
	 * happens to be over. */
	.account-sidebar:hover .dex-account-menu-label,
	.account-sidebar:focus-within .dex-account-menu-label {
		max-width: 220px;
		opacity: 1;
	}
}

/* Sidebar is desktop/laptop only - mobile keeps using
 * #mobile-menu-panel's own separate "My Account" entry instead (same
 * cutoff .top-bar itself already uses to hide below this width). */
@media (max-width: 1024px) {
	.account-sidebar {
		display: none;
	}
}

/* ---- Main header row: logo + main nav ---- */

.main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	max-width: 1400px;
	margin: 0 auto;
}

.site-logo img,
.site-logo svg {
	height: 96px;
	width: auto;
	max-width: 100%;
	display: block;
}

.site-logo .site-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--color-primary);
}

/* ---- Search bar (UI only for now - not wired up to run a search yet) ---- */

.site-search {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	max-width: 480px;
	margin: 0 2rem;
}

.site-search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6rem 0.9rem;
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-right: none;
	border-radius: 4px 0 0 4px;
	outline: none;
}

.site-search-input:focus {
	border-color: var(--color-accent);
}

.site-search-button {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0 1.1rem;
	background: var(--color-primary);
	color: var(--color-surface);
	border: none;
	border-radius: 0 4px 4px 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease;
}

.site-search-button:hover {
	background: var(--color-primary-light);
}

.site-search-icon {
	position: relative;
	width: 11px;
	height: 11px;
	border: 2px solid currentColor;
	border-radius: 50%;
	display: inline-block;
}

.site-search-icon::after {
	content: '';
	position: absolute;
	bottom: -7px;
	right: -2px;
	width: 2px;
	height: 7px;
	background: currentColor;
	transform: rotate(-45deg);
}

.main-nav {
	background: var(--color-primary);
}

.main-nav .menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 1rem;
}

.main-nav .menu a {
	display: block;
	padding: 0.85rem 0.75rem;
	color: var(--color-surface);
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
}

.main-nav .menu a:hover {
	background: var(--color-primary-light);
}

.main-nav .menu li {
	position: relative;
}

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

.main-nav .menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: none;
	flex-direction: column;
	min-width: 220px;
	padding: 0.5rem 0;
	background: var(--color-surface);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 12px 20px rgba(31, 41, 51, 0.18);
}

.main-nav .menu .sub-menu a {
	padding: 0.6rem 1.1rem;
	color: var(--color-text);
	font-weight: 400;
	white-space: nowrap;
}

.main-nav .menu .sub-menu a:hover {
	background: var(--color-surface-alt);
	color: var(--color-primary);
}

.main-nav .menu li:hover > .sub-menu,
.main-nav .menu li:focus-within > .sub-menu {
	display: flex;
}

/* Same flyout-instead-of-drop-down fix as .top-bar above, for any 3rd
 * level under Main Navigation's own categories. */
.main-nav .menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.main-nav .menu .sub-menu li.menu-item-has-children > a::after {
	transform: rotate(-45deg) translateX(-2px);
}

/* ---- Hamburger toggle (hidden on desktop) ---- */

.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}

/* Base state for all screen sizes - only ever shown via the
 * .is-open toggle inside the mobile media query below. Without this,
 * it's an unstyled <div> with no display rule at all outside that
 * media query, which defaults to visible (display:block) and dumps
 * every menu item, including all sub-menus, onto the page on desktop. */
.mobile-menu-panel {
	display: none;
}

.menu-toggle .bar {
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	background: var(--color-primary);
	border-radius: 2px;
}

/* ---- Hero slider ----
 * Container is capped at --hero-max-height and always spans the full
 * width; the image uses object-fit: contain so the whole picture is
 * always visible - nothing is ever cropped. When the box is shorter
 * than the image the image scales down to fit the height and is
 * centred horizontally, leaving blank space at the left and right
 * (this is preferred over cover, which would fill the box edge to edge
 * but crop the top and bottom off the picture).
 */

.hero-slider {
	position: relative;
	width: 100%;
	/*height: var(--hero-max-height);*/
	overflow: hidden;
}

.hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	/* Faded-out slides are still stacked over the active one, so without
	 * this the topmost (last) slide's link swallows every click. */
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.hero-slide.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

/* .hero-slide is a <div> for a slide with no link and an <a> for one
 * that has a click-through URL (front-page.php) - anchors are inline
 * by default, which would otherwise ignore the position/inset/width/
 * height rules above. */
a.hero-slide {
	display: block;
}

.hero-slider:has(.hero-slide:only-child) .hero-slide {
	position: relative;
	opacity: 1;
}

.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ---- Hero slider controls: prev/next arrows + pagination bars ---- */

.hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 41, 51, 0.35);
	color: var(--color-surface);
	border: none;
	border-radius: 50%;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.hero-arrow:hover {
	background: rgba(31, 41, 51, 0.6);
}

/* --hero-side-gap is the blank space object-fit: contain leaves either
 * side of the picture, measured per slide by initHeroSlider() in
 * assets/js/main.js - offsetting by it keeps the arrows on the picture
 * instead of out in that gap on a wide screen. Falls back to 0px, so
 * without JS the arrows just sit at the slider's edges as before. */
.hero-arrow-prev {
	left: calc(var(--hero-side-gap, 0px) + 1rem);
}

.hero-arrow-next {
	right: calc(var(--hero-side-gap, 0px) + 1rem);
}

.hero-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1rem;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.hero-pagination-bar {
	width: 2.25rem;
	height: 0.3rem;
	padding: 0;
	border: none;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background 0.2s ease;
}

.hero-pagination-bar:hover {
	background: rgba(255, 255, 255, 0.75);
}

.hero-pagination-bar.is-active {
	background: var(--color-surface);
}

/* ---- Product category archive: breadcrumb ---- */

.breadcrumb-nav {
	max-width: 1400px;
	margin: 0 auto;
	padding: 1rem 1.5rem 0;
	font-size: 0.85rem;
	color: var(--color-muted);
}

.breadcrumb-nav a:hover {
	color: var(--color-accent);
}

.breadcrumb-separator {
	margin: 0 0.5em;
}

.breadcrumb-current {
	color: var(--color-text);
}

.archive-title {
	max-width: 1400px;
	margin: 0.5rem auto 0;
	padding: 0 1.5rem;
	color: var(--color-primary);
}

/* ---- Product category archive: filter bar ---- */

.product-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	max-width: 1400px;
	margin: 1.5rem auto 0;
	padding: 1rem 1.5rem;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.filter-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 140px;
	min-width: 140px;
}

.filter-field label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.filter-field select,
.filter-field input {
	padding: 0.55rem 0.7rem;
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	outline: none;
}

.filter-field select:focus,
.filter-field input:focus {
	border-color: var(--color-accent);
}

/* ---- Product category archive: grid + tiles ---- */

.product-grid {
	max-width: 1400px;
	margin: 1.5rem auto 3rem;
	padding: 0 1.5rem;
}

.product-grid-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.5rem;
}

.product-tile {
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.product-tile:hover {
	box-shadow: 0 8px 16px rgba(31, 41, 51, 0.12);
}

.product-tile-link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.product-tile-image {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-tile-preview-button {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 41, 51, 0.6);
	color: var(--color-surface);
	border: none;
	border-radius: 50%;
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, background 0.2s ease;
}

.product-tile-preview-button:hover {
	background: rgba(31, 41, 51, 0.85);
}

.product-tile:hover .product-tile-preview-button,
.product-tile-preview-button:focus-visible {
	opacity: 1;
}

.product-tile-remove-favorite {
	margin: 0.5rem 0.75rem 0.75rem;
	padding: 0.45rem 0.75rem;
	background: transparent;
	border: 1px solid var(--color-danger);
	border-radius: 4px;
	color: var(--color-danger);
	font-family: var(--font-body);
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.product-tile-remove-favorite:hover {
	background: var(--color-danger);
	color: var(--color-surface);
}

.product-tile-remove-favorite:disabled {
	opacity: 0.6;
	cursor: default;
}

.product-tile-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1rem;
}

.product-tile-placeholder {
	width: 40%;
	height: 40%;
	background: var(--color-border);
	border-radius: 4px;
}

.product-tile-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0.75rem 1rem 1rem;
}

.product-tile-sku {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.product-tile-name {
	margin: 0;
	font-weight: 300;
	line-height: 1.3;
	/* Always reserve two lines so a short name doesn't shift what follows;
	   longer names are cut off with an ellipsis after the second. */
	min-height: calc(2 * 1.3em);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--color-primary);
}

.product-tile-link:hover .product-tile-name {
	color: var(--color-accent);
}

.product-tile-price {
	/* auto top margin pins the price to the bottom of the tile, so it lines
	   up across a grid row whether or not the tile has tags. */
	margin: auto 0 0;
	padding-top: 0.35rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-text);
}

.product-grid-empty {
	padding: 3rem 0;
	text-align: center;
	color: var(--color-muted);
}

.product-grid-sentinel {
	display: flex;
	justify-content: center;
	padding: 2rem 0;
	min-height: 1px;
}

.product-grid-sentinel:not(.is-loading) .product-grid-spinner {
	visibility: hidden;
}

.product-grid-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--color-border);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: dex-spin 0.8s linear infinite;
}

@keyframes dex-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---- Front page: New Products section ----
 * Column count per row is a fixed number per breakpoint (4/3/2), not
 * the category archive's fluid auto-fill - assets/js/main.js's
 * initNewProductsGrid() has to know the exact column count to compute
 * how many tiles make a full page (columns x 4 rows), so the two have
 * to agree on discrete tiers rather than an intrinsic/fluid grid.
 * Mirrors --tablet-breakpoint/--mobile-breakpoint below (custom
 * properties can't be read inside a @media condition, so those two
 * pixel values are duplicated into the @media rules further down and
 * into matching constants in initNewProductsGrid() - same
 * documentation-only role --mobile-breakpoint already has elsewhere in
 * this file).
 */

.new-products-section {
	max-width: 1400px;
	margin: 1.5rem auto 3rem;
	padding: 0 1.5rem;
}

.new-products-heading {
	text-align: center;
	margin-bottom: 1.5rem;
}

.new-products-items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.new-products-items .product-tile:not(.is-visible) {
	display: none;
}

/* Specificity has to beat .product-tile-image img above (it's also an
 * <img> inside .product-tile-image) - otherwise that rule's
 * width/height: 100% and padding: 1rem win instead and stretch the
 * ribbon across the whole tile.
 *
 * Offset by 1rem, not 0, to sit on the corner of the *photo* rather
 * than the corner of its container: .product-tile-image img above pads
 * the photo in by 1rem, and since both the container (aspect-ratio:
 * 1/1) and the product photos themselves are square, object-fit:
 * contain leaves no extra letterboxing - so the photo's visible corner
 * is exactly 1rem in from the container's. Anchored at 0 the ribbon
 * floats on the blank padding outside the picture. */
.product-tile-image img.product-tile-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 78px;
	height: 78px;
	padding: 0;
	pointer-events: none;
}

/* New/On Sale badges only, 25% smaller than the default 78px above
   (Discontinued keeps the original size). */
.product-tile-image img.product-tile-badge--new,
.product-tile-image img.product-tile-badge--on_sale {
	width: 58.5px;
	height: 58.5px;
}

/* Full Colour / Eco text tags under the product name (not corner
   ribbons like the badges above). */
.product-tile-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.product-tile-tag {
	/* 40% smaller than the original 0.25rem/0.6rem padding, 4px
	   radius, 0.85rem font-size (each x0.6), kept proportional rather
	   than shrinking just one dimension. */
	padding: 0.15rem 0.36rem;
	border-radius: 2.4px;
	color: #fff;
	font-size: 0.51rem;
	font-weight: 600;
	line-height: 1.3;
}

.product-tile-tag--full_color {
	background: var(--color-tag-full-color);
}

.product-tile-tag--eco {
	background: var(--color-tag-eco);
}

.new-products-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.new-products-arrow {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	color: var(--color-surface);
	border: none;
	border-radius: 50%;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.new-products-arrow:hover {
	background: var(--color-primary-light);
}

.new-products-arrow:disabled {
	background: var(--color-border);
	color: var(--color-muted);
	cursor: default;
}

.new-products-pages {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.new-products-page-number {
	min-width: 32px;
	height: 32px;
	padding: 0 0.4rem;
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.new-products-page-number:hover {
	border-color: var(--color-primary);
}

.new-products-page-number.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
	font-weight: 600;
}

.new-products-page-ellipsis {
	color: var(--color-muted);
	font-size: 0.85rem;
	padding: 0 0.15rem;
}

/* ---- Product detail page ---- */

.product-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	max-width: 1800px;
	margin: 1.5rem auto 3rem;
	padding: 0 1.5rem;
}

.product-detail-gallery {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.product-detail-main-image {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	overflow: hidden;
	cursor: zoom-in;
}

.product-detail-main-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1.5rem;
}

.product-detail-placeholder {
	width: 40%;
	height: 40%;
	background: var(--color-border);
	border-radius: 4px;
}

.product-detail-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* exactly 5 per row, 6th+ wraps */
	gap: 0.6rem;
}

.product-detail-thumb {
	aspect-ratio: 1 / 1;
	padding: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.product-detail-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.35rem;
}

.product-detail-thumb:hover {
	border-color: var(--color-accent);
}

.product-detail-thumb.is-active {
	border-color: var(--color-accent);
	border-width: 2px;
}

.product-detail-info {
	display: flex;
	flex-direction: column;
}

.product-detail-sku {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.product-detail-title {
	margin: 0 0 1rem;
	color: var(--color-primary);
}

.product-detail-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

.product-detail-link {
	/* This class is also used on .product-detail-favorite-button, a real
	 * <button> (not an <a> like its two siblings) - these resets are
	 * no-ops on the <a> elements and only matter for that button, so it
	 * renders identically to the links beside it instead of picking up
	 * the browser's default button chrome. */
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--color-primary);
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
}

.product-detail-link:hover {
	color: var(--color-accent);
}

.product-detail-favorite-button[data-is-favorited="1"] i {
	color: var(--color-danger);
}

.product-detail-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--color-border);
}

.product-detail-tab {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	text-align: center;
	line-height: 1.2;
	padding: 0.75rem 1rem;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--color-muted);
	cursor: pointer;
}

.product-detail-tab:hover {
	color: var(--color-primary);
}

.product-detail-tab.is-active {
	color: var(--color-primary);
	border-bottom-color: var(--color-accent);
}

.product-detail-panels {
	padding: 1.5rem 0;
}

.product-detail-price-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;
}

.product-detail-price-tab {
	padding: 0.4rem 0.8rem;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 4px 4px 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--color-text);
	cursor: pointer;
}

.product-detail-price-tab:hover {
	border-color: var(--color-primary);
}

.product-detail-price-tab.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}

/* Local pricing keeps the same tab/table-header styling but in grey;
   offshore pricing stays on --color-primary (red). */
.product-detail-price-tab[data-price-tab="local"]:hover {
	border-color: var(--color-price-local);
}

.product-detail-price-tab[data-price-tab="local"].is-active {
	background: var(--color-price-local);
	border-color: var(--color-price-local);
}

.product-detail-price-panel[hidden] {
	display: none;
}

.product-detail-stock-table th.product-detail-price-description-row {
	background: var(--color-primary);
	color: var(--color-surface);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.product-detail-price-panel[data-price-panel="local"] .product-detail-price-description-row:not(.product-detail-price-description-row--markup):not(.product-detail-price-description-row--disclaimer) {
	background: var(--color-price-local);
}

.product-detail-stock-table th.product-detail-price-description-row--markup {
	background: var(--color-markup-summary);
}

.product-detail-stock-table th.product-detail-price-description-row--disclaimer {
	background: var(--color-disclaimer);
}

.product-detail-markup-summary-heading {
	margin-top: 2rem;
}

.product-detail-disclaimer-cell {
	text-align: left;
}

.product-detail-service-notice {
	font-weight: 600;
	color: var(--color-accent);
	margin: 1rem 0 0.25rem;
}

.product-detail-service-tabs {
	display: flex;
	flex-wrap: wrap;
	margin: 1rem 0 0;
}

.product-detail-service-tab {
	padding: 0.4rem 0.8rem;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 4px 4px 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--color-text);
	cursor: pointer;
}

.product-detail-service-tab:hover {
	border-color: var(--color-primary);
}

.product-detail-service-tab.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}

/* Local pricing's service sub-tabs (Same Day/24 Hours/etc.) follow the
   same grey-instead-of-red convention as the Local/Offshore Pricing tabs
   above. */
.product-detail-price-panel[data-price-panel="local"] .product-detail-service-tab:hover {
	border-color: var(--color-price-local);
}

.product-detail-price-panel[data-price-panel="local"] .product-detail-service-tab.is-active {
	background: var(--color-price-local);
	border-color: var(--color-price-local);
}

/* Hover/focus tooltip for a service tab that needs an explanatory note
   (currently just "Same Day", restricted to Bronze/Silver/Gold members -
   see single-products.php/ghost-portal-product.php's data-tooltip attr).
   CSS-only (content: attr()), so it degrades gracefully with no JS and
   works identically on both templates without any script changes. */
.product-detail-service-tab[data-tooltip] {
	position: relative;
}

.product-detail-service-tab[data-tooltip]::after,
.product-detail-service-tab[data-tooltip]::before {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	pointer-events: none;
}

.product-detail-service-tab[data-tooltip]::after {
	content: attr(data-tooltip);
	background: var(--color-text);
	color: var(--color-surface);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	padding: 0.4rem 0.6rem;
	border-radius: 4px;
	z-index: 5;
}

.product-detail-service-tab[data-tooltip]::before {
	content: '';
	bottom: calc(100% + 3px);
	border: 5px solid transparent;
	border-top-color: var(--color-text);
	z-index: 5;
}

.product-detail-service-tab[data-tooltip]:hover::after,
.product-detail-service-tab[data-tooltip]:hover::before,
.product-detail-service-tab[data-tooltip]:focus-visible::after,
.product-detail-service-tab[data-tooltip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

.product-detail-service-panel[hidden] {
	display: none;
}

/* Additional Decoration Costs table: headers (Service / Per Unit / Qty /
   New Setup / Qty / Repeat Setup / Qty) stay on one line. The panel
   scrolls sideways on a viewport too narrow for that, rather than the
   page overflowing. */
.product-detail-service-panel {
	overflow-x: auto;
}

.product-detail-service-panel .product-detail-stock-table th {
	white-space: nowrap;
}

/* Blank-price sub-tabs (one per enabled blank-price table within a
   Local/Offshore panel) - same look as the service tabs. */
.product-detail-price-subtabs {
	display: flex;
	flex-wrap: nowrap;
	margin: 1rem 0 0;
}

.product-detail-price-subtab {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	text-align: center;
	line-height: 1.2;
	padding: 0.4rem 0.8rem;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 4px 4px 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--color-text);
	cursor: pointer;
}

.product-detail-price-subtab:hover {
	border-color: var(--color-primary);
}

.product-detail-price-subtab.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}

.product-detail-price-subpanel[hidden] {
	display: none;
}

.product-detail-service-qty-input,
.product-detail-markup-item-input,
.product-detail-markup-setup-input,
.product-detail-markup-freight-input,
.product-detail-markup-surcharge-input {
	width: 3.5rem;
	padding: 0.2rem;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 0.8rem;
}

.product-detail-service-range {
	font-size: 0.8rem;
	color: var(--color-muted);
	margin: 0.1rem 0;
}

.product-detail-service-divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 1.5rem 0;
}

.product-detail-service-options {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1rem 0;
}

.product-detail-markup-save {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin: 1rem 0;
}

.product-detail-markup-save-button {
	padding: 0.5rem 1rem;
	background: var(--color-primary);
	border: none;
	border-radius: 4px;
	color: var(--color-surface);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.85rem;
	cursor: pointer;
}

.product-detail-markup-save-button:hover {
	background: var(--color-primary-light);
}

/* "Markup Saved" - grey, but still a normal clickable button. */
.product-detail-markup-save-button.is-saved,
.product-detail-markup-save-button.is-saved:hover {
	background: #8a8f98;
}

.product-detail-markup-save-status {
	font-size: 0.8rem;
	font-weight: 600;
}

.product-detail-markup-save-status.is-success {
	color: var(--color-accent);
}

.product-detail-markup-save-status.is-error {
	color: var(--color-danger);
}

/* display: inline-flex below would otherwise override the [hidden] attribute
   (the Same Day surcharge checkbox starts hidden and is toggled by main.js). */
.quote-sent-dialog {
	margin: auto;
	padding: 1.5rem 2rem;
	border: none;
	border-radius: 8px;
	background: var(--color-surface);
	box-shadow: 0 8px 30px rgba(31, 41, 51, 0.25);
	text-align: center;
	min-width: 280px;
	max-width: 90vw;
}

.quote-sent-dialog::backdrop {
	background: rgba(31, 41, 51, 0.5);
}

.quote-sent-dialog p {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
	font-weight: 600;
	word-break: break-word;
}

.quote-sent-dialog button {
	padding: 0.5rem 1.75rem;
	border: none;
	border-radius: 4px;
	background: var(--color-accent);
	color: var(--color-surface);
	font-weight: 600;
	cursor: pointer;
}

.product-detail-service-checkbox-label[hidden] {
	display: none;
}

.product-detail-service-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
}

.product-detail-service-checkbox {
	cursor: pointer;
}

.product-detail-panel {
	font-size: 0.9rem;
	line-height: 1.6;
}

.product-detail-panel[hidden] {
	display: none;
}

/* wp_kses_post()-rendered content (product description/additional info)
 * can contain real <ul>/<li>/<p> markup - restore normal list styling
 * here since the site-wide `ul` reset (used for nav menus etc.) would
 * otherwise flatten it into unstyled, unindented lines. */
.product-detail-panel ul {
	list-style: disc;
	margin: 0 0 1em 1.25em;
	padding: 0;
}

.product-detail-panel li {
	margin-bottom: 0;
}

.product-detail-panel p {
	margin: 0;
}

.product-detail-panel ul.product-detail-item-specs {
	list-style: none;
	margin-left: 0;
}

/* Gap between the product description (wpautop's <p> tags,
   single-products.php) and whichever .product-detail-item-specs list
   renders first after it - targeted via the adjacent-sibling selector
   rather than this class's own margin-top, since that class is reused
   for several back-to-back specs lists (item/colour/print/packaging)
   whose own mutual spacing shouldn't change. Overrides (via margin
   collapsing) the paragraph's own default bottom margin, so the gap is
   exactly 20px regardless of that default. */
.product-detail-panel p + ul.product-detail-item-specs {
	margin-top: 20px;
}

/* Spec images under the description: one per row, full width, 20px apart
   and 20px below the last specs list. */
.product-detail-spec-images {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

.product-detail-panel img.product-detail-spec-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.product-detail-panel ul.product-detail-item-specs:first-of-type {
	margin-bottom: 0;
}

.product-detail-panel p.product-detail-stock-updated,
.product-preview-body p.product-detail-stock-updated {
	margin: 1.25rem 0 0;
	font-size: 0.8rem;
	color: var(--color-muted);
}

.product-detail-stock-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-border);
}

.product-detail-stock-table th,
.product-detail-stock-table td {
	text-align: center;
	padding: 0.5em 0.75em;
	border: 1px solid var(--color-border);
}

.product-detail-stock-table th {
	color: var(--color-muted);
	font-weight: 600;
	background: var(--color-surface-alt);
}

.product-detail-stock-table tr.is-out-of-stock td {
	color: var(--color-danger);
}

/* Stock tab: no cell (header or data) wraps onto a second line. On a
 * narrow screen the panel scrolls sideways instead of the table squeezing
 * its cells. */
#product-detail-panel-stock {
	overflow-x: auto;
}

#product-detail-panel-stock .product-detail-stock-table th,
#product-detail-panel-stock .product-detail-stock-table td {
	white-space: nowrap;
}

/* Scoped to the Price tab specifically (not the Stock tab, which
 * shares .product-detail-stock-table's base styling). */
.product-detail-price-panel .product-detail-stock-table th,
.product-detail-price-panel .product-detail-stock-table td {
	font-size: 12px;
}

/* ---- Product detail page: image lightbox ---- */

/* The dialog itself is an invisible full-viewport stage - only the
 * ::backdrop is visible around the image - so the prev/next/close
 * buttons (anchored to the dialog's own edges below) sit out in the
 * backdrop margin rather than on top of the picture. The image is
 * capped well under 100vw/100vh precisely to guarantee that margin
 * exists on every screen size. */
.product-detail-lightbox {
	/* Stays display:none (its own default, same as the browser's) until
	 * [open] is present - authored rules always beat the UA stylesheet
	 * regardless of specificity, so `display: flex` here unconditionally
	 * would override the browser's own `dialog:not([open]) { display:
	 * none }` and leave the dialog visible even when closed. */
	display: none;
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

.product-detail-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-detail-lightbox::backdrop {
	background: rgba(31, 41, 51, 0.9);
}

.product-detail-lightbox img {
	display: block;
	max-width: 70vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 4px;
	background: var(--color-surface);
}

.product-detail-lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 41, 51, 0.6);
	color: var(--color-surface);
	border: none;
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.product-detail-lightbox-close:hover {
	background: rgba(31, 41, 51, 0.85);
}

.product-detail-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 41, 51, 0.6);
	color: var(--color-surface);
	border: none;
	border-radius: 50%;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.product-detail-lightbox-arrow:hover {
	background: rgba(31, 41, 51, 0.85);
}

.product-detail-lightbox-arrow[hidden] {
	display: none;
}

.product-detail-lightbox-prev {
	left: 1.5rem;
}

.product-detail-lightbox-next {
	right: 1.5rem;
}

/* ---- Product detail page: "Get the Quick Quote" ---- */

.product-detail-quick-quote {
	display: flex;
	justify-content: flex-end;
	margin: 1rem 0;
}

.product-detail-quick-quote-button {
	padding: 0.6rem 1.1rem;
	background: var(--color-text);
	border: none;
	border-radius: 4px;
	color: var(--color-surface);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.85rem;
	cursor: pointer;
}

.product-detail-quick-quote-button:hover {
	background: var(--color-primary);
}

.product-detail-order {
	display: flex;
	justify-content: flex-end;
	margin: 1rem 0;
}

.product-detail-order-button {
	padding: 0.6rem 1.1rem;
	background: var(--color-text);
	border: none;
	border-radius: 4px;
	color: var(--color-surface);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.85rem;
	cursor: pointer;
}

.product-detail-order-button:hover {
	background: var(--color-primary);
}

.product-detail-quote-dialog {
	display: none;
	width: min(1200px, 96vw);
	max-width: 96vw;
	max-height: 90vh;
	padding: 0;
	border: none;
	border-radius: 6px;
	overflow: hidden;
}

.product-detail-quote-dialog[open] {
	display: flex;
	flex-direction: column;
}

.product-detail-quote-dialog::backdrop {
	background: rgba(31, 41, 51, 0.7);
}

.product-detail-favorite-dialog {
	display: none;
	width: min(360px, 90vw);
	padding: 1.75rem;
	border: none;
	border-radius: 6px;
	text-align: center;
}

.product-detail-favorite-dialog[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.product-detail-favorite-dialog::backdrop {
	background: rgba(31, 41, 51, 0.7);
}

.product-detail-favorite-dialog-message {
	margin: 0;
	font-size: 0.95rem;
	color: var(--color-text);
}

.product-detail-favorite-dialog-close {
	padding: 0.5rem 1.5rem;
	border: none;
	border-radius: 4px;
	background: var(--color-primary);
	color: var(--color-surface, #fff);
	font-weight: 500;
	cursor: pointer;
}

/* ---- Product listing: Quick Preview slide-in panel ---- */

.product-preview-dialog {
	display: none;
	position: fixed;
	inset: 0 0 0 auto;
	width: min(420px, 100vw);
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: none;
	background: var(--color-surface);
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

.product-preview-dialog[open] {
	display: block;
}

.product-preview-dialog.is-open {
	transform: translateX(0);
}

.product-preview-dialog::backdrop {
	background: rgba(31, 41, 51, 0.5);
}

.product-preview-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 41, 51, 0.6);
	color: var(--color-surface);
	border: none;
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.product-preview-close:hover {
	background: rgba(31, 41, 51, 0.85);
}

.product-preview-body {
	height: 100%;
	overflow-y: auto;
	padding: 3.5rem 1.5rem 1.5rem;
}

.product-preview-image img {
	display: block;
	width: 100%;
	max-height: 260px;
	object-fit: contain;
	margin-bottom: 1rem;
}

.product-preview-title {
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
	color: var(--color-primary);
}

.product-preview-description {
	margin-bottom: 1.5rem;
	color: var(--color-text);
	font-size: 0.9rem;
	line-height: 1.5;
}

.product-preview-price-table,
.product-preview-stock-table {
	width: 100%;
}

.product-preview-stock-table {
	margin-top: 1.5rem;
}

.product-preview-template-link {
	display: inline-flex;
	margin-top: 20px;
}

.product-preview-template-link + .product-preview-description,
.product-preview-template-link + .product-detail-item-specs {
	margin-top: 20px;
}

.product-preview-description + .product-detail-item-specs,
.product-preview-title + .product-detail-item-specs {
	margin-top: 20px;
}

.product-preview-body .product-detail-item-specs + .product-detail-item-specs {
	margin-top: 20px;
}

.product-preview-body .product-detail-item-specs:nth-of-type(2) {
	margin-top: 0;
}

.product-detail-item-specs + .product-preview-price-table {
	margin-top: 20px;
}

.product-preview-status {
	color: var(--color-muted);
}

.product-detail-quote-header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 1rem;
	background: var(--color-primary);
	color: var(--color-surface);
}

.product-detail-quote-header h2 {
	margin: 0;
	font-size: 1.1rem;
	color: var(--color-surface);
}

.product-detail-quote-close {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	background: none;
	border: none;
	color: var(--color-surface);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.product-detail-quote-info-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background: var(--color-surface-alt);
	border-bottom: 1px solid var(--color-border);
}

.product-detail-quote-info-text p {
	margin: 0.15rem 0;
	font-size: 0.8rem;
	color: var(--color-text);
}

.product-detail-quote-actions {
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
}

.product-detail-quote-download-button,
.product-detail-quote-email-button {
	flex-shrink: 0;
	padding: 0.5rem 1rem;
	background: var(--color-text);
	border: none;
	border-radius: 4px;
	color: var(--color-surface);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.85rem;
	cursor: pointer;
}

.product-detail-quote-download-button:hover,
.product-detail-quote-email-button:hover {
	background: var(--color-primary);
}

.product-detail-quote-download-button:disabled,
.product-detail-quote-email-button:disabled {
	opacity: 0.6;
	cursor: default;
}

.product-detail-quote-email-status {
	margin: 0;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
	color: var(--color-muted);
}

.product-detail-quote-email-status.is-error {
	color: var(--color-danger);
}

.product-detail-quote-body {
	padding: 1rem;
	overflow-y: auto;
	overflow-x: hidden;
}

.product-detail-quote-content {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
}

.product-detail-quote-image {
	flex: 0 0 160px;
}

.product-detail-quote-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.product-detail-quote-details {
	flex: 1 1 320px;
	min-width: 0;
}

.product-detail-quote-title {
	margin: 0 0 0.5rem;
	font-size: 1.725rem;
}

.product-detail-quote-description {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	white-space: pre-line;
}

.product-detail-quote-description:empty {
	display: none;
}

.product-detail-quote-note {
	font-size: 0.85rem;
	color: var(--color-muted);
	margin: 0 0 0.75rem;
	white-space: pre-line;
}

.product-detail-quote-tables {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.product-detail-quote-tables .product-detail-stock-table {
	table-layout: fixed;
	width: 100%;
	font-size: 0.75rem;
}

.product-detail-quote-tables .product-detail-stock-table th,
.product-detail-quote-tables .product-detail-stock-table td {
	padding: 0.3em 0.35em;
	word-break: break-word;
}

.product-detail-quote-note-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.75rem;
}

.product-detail-quote-footer {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--color-surface-alt);
	border-top: 1px solid var(--color-border);
	font-size: 0.85rem;
}

.product-detail-quote-footer label {
	font-weight: 600;
	white-space: nowrap;
	padding-top: 0.4rem;
}

.product-detail-quote-note-input {
	flex: 1 1 auto;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	resize: vertical;
	min-height: 2.4em;
}

.product-detail-quote-update-button {
	flex-shrink: 0;
	padding: 0.5rem 1rem;
	background: var(--color-text);
	border: none;
	border-radius: 4px;
	color: var(--color-surface);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.85rem;
	cursor: pointer;
}

.product-detail-quote-update-button:hover {
	background: var(--color-primary);
}

/* ---- Generic page template (page.php) - applies to every WordPress
 * Page, not just About Us. Block-specific styling (service cards,
 * guarantee items, icon groups) lives in each block's own style.css
 * under mu-plugins/about-us-blocks/ instead of here. ---- */

.page-title-band {
	background: var(--color-muted);
	padding: 1.5rem;
}

.page-title-band h1 {
	max-width: 1400px;
	margin: 0 auto;
	color: var(--color-surface);
	font-size: 1.4rem;
}

.page-content-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 3rem;
}

.page-content > * + * {
	margin-top: 1.5rem;
}

/* margin-left: auto only reliably pushes an element to the end of its
 * container under the flexbox auto-margin algorithm - it needs an
 * actual flex parent to do that predictably, a plain block-flow
 * parent with an inline-flex child (what this was before) isn't
 * well-defined the same way. */
.dex-guarantee-column {
	display: flex;
}

/* Sizes to its widest child (the longest of the 3 guarantee-item
 * titles) rather than stretching to fill its column, then pushes
 * itself to the right edge of .dex-guarantee-column via the auto left
 * margin so it lines up with the Service Card row above it (both rows
 * share the same .page-content-wrap width). */
.dex-guarantee-items-align {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	margin-left: auto;
}

/* Meet The Team page - the core/group wrapping the dex/team-member
 * blocks. WordPress's block-supports "layout" system wraps a Group
 * block's actual children in a .wp-block-group__inner-container at
 * render time (server-side, not just in the editor) even though this
 * group's own stored markup has no "layout" attribute set - the grid
 * has to target that inner container, not .dex-team-grid itself,
 * since that's the element the dex/team-member blocks are direct
 * children of. grid-template-columns is a fixed 3, not auto-fill/
 * minmax, to match the reference's exact 3/3/3/3/1 row layout
 * regardless of viewport width. */
.dex-team-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 2rem;
}

/* When the member count leaves exactly one lone item starting the
 * final row (currently 13 members, 13 mod 3 = 1 - Jason), center that
 * one instead of leaving it stuck in column 1. :nth-child(3n+1) is
 * "starts a new row"; combined with :last-child it only matches when
 * that final row-starter is also the very last item, i.e. truly alone
 * in its row - if members are later added/removed and the leftover
 * count becomes 0 or 2 instead of 1, this selector simply stops
 * matching and every row falls back to its normal left-aligned grid
 * placement, rather than mis-centering a pair or breaking anything. */
.dex-team-grid > .wp-block-group__inner-container > .dex-team-member:nth-child(3n+1):last-child {
	grid-column: 1 / -1;
	justify-self: center;
}

/* ---- Site footer ---- */

.site-footer {
	margin-top: 0;
	border-top: 1px solid var(--color-border);
}

.site-footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2rem;
	max-width: 1400px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
}

.site-footer-vision h2 {
	margin: 0 0 0.75rem;
	color: var(--color-primary);
}

.site-footer-vision p {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.site-footer-menu h3 {
	margin: 0 0 0.85rem;
	font-size: 0.95rem;
	color: var(--color-text);
}

.site-footer-menu .menu {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.site-footer-menu .menu a {
	color: var(--color-muted);
	font-size: 0.9rem;
	/* These links currently have no href (created with empty URLs) - an
	 * <a> with no href isn't a real hyperlink, so browsers default it to
	 * the plain text cursor instead of a hand. Setting cursor explicitly
	 * keeps it looking clickable regardless of whether an href is
	 * filled in later. */
	cursor: pointer;
}

.site-footer-menu .menu a:hover {
	color: var(--color-accent);
}

/* Ghost-site footer (footer-ghost.php) drops the Services column always,
 * and Company unless "Show Contact Us Form" is enabled - so with 2 or 3 of
 * the 4 grid columns above actually present, they'd otherwise land next to
 * Our Vision instead of at the far right like they do on the real footer
 * (where Company/Services occupy columns 2-3 even when empty). Pin Social
 * to the last column and Company (when shown) immediately to its left, so
 * they stay right-aligned and adjacent regardless of which is present. */
.site-footer-social-end {
	grid-column: 4;
}

.site-footer-company-end {
	grid-column: 3;
}

.site-footer-bottom {
	border-top: 1px solid var(--color-border);
	padding: 1.25rem 1.5rem;
}

.site-footer-bottom p {
	max-width: 1400px;
	margin: 0 auto;
	color: var(--color-muted);
	font-size: 0.85rem;
}

/* ---- Tablet ---- */

@media (max-width: 1024px) {
	.new-products-items {
		grid-template-columns: repeat(3, 1fr);
	}

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

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

@media (max-width: 782px) {
	.new-products-items {
		grid-template-columns: repeat(2, 1fr);
	}

	.tier-cards {
		grid-template-columns: 1fr;
	}

	.dex-team-grid > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Same lone-orphan centering as the desktop :nth-child(3n+1) rule,
	 * re-checked against 2-column math here since "starts a row" means
	 * something different at each column count (13 members: still
	 * exactly 1 leftover on a 2-col grid, 13 mod 2 = 1 - Jason again). */
	.dex-team-grid > .wp-block-group__inner-container > .dex-team-member:nth-child(2n+1):last-child {
		grid-column: 1 / -1;
		justify-self: center;
	}

	.site-footer-top {
		grid-template-columns: 1fr;
	}

	.site-footer-social-end,
	.site-footer-company-end {
		grid-column: auto;
	}

	.top-bar {
		display: none;
	}

	.main-header {
		flex-wrap: wrap;
	}

	.site-logo {
		order: 1;
	}

	.menu-toggle {
		display: block;
		order: 2;
	}

	.site-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		margin: 0.75rem 0 0;
	}

	.main-nav {
		display: none;
	}

	.mobile-menu-panel {
		display: none;
		background: var(--color-primary);
	}

	.mobile-menu-panel.is-open {
		display: block;
	}

	.mobile-menu-panel .menu {
		flex-direction: column;
		padding: 0.5rem 0;
	}

	.mobile-menu-panel .menu a {
		display: block;
		padding: 0.85rem 1.5rem;
		color: var(--color-surface);
		font-size: 0.95rem;
	}

	.mobile-menu-panel .menu a:hover {
		color: var(--color-accent);
	}

	.mobile-menu-panel .menu-divider {
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		margin: 0.5rem 1.5rem;
	}

	/* A parent item's row becomes link + toggle button side by side
	 * (link still navigates - many of these, like "Bags"/"Sourcing",
	 * are real destinations, not just folders) with its .sub-menu
	 * forced onto its own full-width line below via flex-basis, shown
	 * only once .is-open is added by initMobileSubmenuToggles()
	 * (assets/js/main.js) - collapsed by default, same depth-agnostic
	 * handling for every nesting level (top-menu, main-menu, and the
	 * new All Products level-2 items all work the same way). */
	.mobile-menu-panel li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.mobile-menu-panel li.menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.mobile-menu-panel .submenu-toggle {
		flex: 0 0 auto;
		width: 2.75rem;
		height: 2.75rem;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		position: relative;
	}

	.mobile-menu-panel .submenu-toggle::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 7px;
		height: 7px;
		margin: -5px 0 0 -4px;
		border-right: 1px solid var(--color-surface);
		border-bottom: 1px solid var(--color-surface);
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.mobile-menu-panel li.is-open > .submenu-toggle::after {
		transform: rotate(225deg);
		margin: -3px 0 0 -4px;
	}

	.mobile-menu-panel .sub-menu {
		display: none;
		flex-direction: column;
		flex-basis: 100%;
		padding: 0.25rem 0 0.5rem;
	}

	.mobile-menu-panel li.is-open > .sub-menu {
		display: flex;
	}

	.mobile-menu-panel .sub-menu a {
		padding: 0.6rem 1.5rem 0.6rem 2.5rem;
		font-size: 0.85rem;
		color: rgba(255, 255, 255, 0.75);
	}

	/* A 3rd-level item (All Products > Bags > Backpacks) needs its own
	 * deeper indent so it stays visually nested under its own level-2
	 * parent, not flush with it. */
	.mobile-menu-panel .sub-menu .sub-menu a {
		padding-left: 3.5rem;
	}

	/* 4th level (All Products > Pens > China Made Pens > Plastic Pens). */
	.mobile-menu-panel .sub-menu .sub-menu .sub-menu a {
		padding-left: 4.5rem;
	}

	.product-filter-bar {
		flex-direction: column;
	}

	.filter-field {
		flex: 1 1 auto;
		min-width: 0;
	}

	.product-grid-items {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 1rem;
	}

	.product-detail {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ---- My Profile page ---- */

.profile-page {
	max-width: 700px;
	margin: 1.5rem auto 3rem;
	padding: 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.profile-notice {
	padding: 0.75rem 1rem;
	border-radius: 4px;
	border: 1px solid var(--color-border);
}

.profile-notice p {
	margin: 0;
}

.profile-notice-success {
	border-color: var(--color-markup-summary);
	color: var(--color-markup-summary);
}

.profile-notice-error {
	border-color: var(--color-danger);
	color: var(--color-danger);
}

.profile-section {
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-border);
}

.profile-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.profile-section-heading {
	margin: 0 0 1.25rem;
	font-family: var(--font-heading);
	color: var(--color-primary);
}

.profile-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.profile-field[hidden] {
	display: none;
}

/* "User Level" progress bar: current level on the left, next level on the
   right, percentage through the band, "$ xxx to {next} level" underneath. */
.profile-level-progress {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"left right"
		"track track"
		"note note";
	max-width: 520px;
	margin: 0.75rem 0 1.25rem;
}

.profile-level-progress-left,
.profile-level-progress-right {
	margin-bottom: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text);
}

.profile-level-progress-left {
	grid-area: left;
}

.profile-level-progress-right {
	grid-area: right;
}

.profile-level-progress-track {
	grid-area: track;
	position: relative;
	height: 22px;
	border-radius: 11px;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	overflow: hidden;
}

.profile-level-progress-fill {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 8px;
	border-radius: 11px;
	background: var(--color-accent);
	color: var(--color-surface);
	font-size: 0.75rem;
	font-weight: 700;
	box-sizing: border-box;
}

.profile-level-progress-percent-out {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-text);
}

.profile-level-progress-note {
	grid-area: note;
	margin: 0.4rem 0 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-text);
}

/* Front page top bar (header.php): one compact row - current level, bar,
   next level, "$ xxx to {next} level" - pinned to the LEFT of the bar
   (margin-right: auto; the rest of .top-bar packs to the right). Desktop
   only: hidden at 1024px and below, so it never shows on tablets/phones. */
.profile-level-progress--header {
	grid-template-columns: auto 180px auto auto;
	grid-template-areas: "left track right note";
	align-items: center;
	column-gap: 0.6rem;
	max-width: none;
	margin: 0 auto 0 0;
}

.profile-level-progress--header .profile-level-progress-left,
.profile-level-progress--header .profile-level-progress-right {
	margin: 0;
	font-size: 0.8rem;
}

.profile-level-progress--header .profile-level-progress-track {
	height: 16px;
	border-radius: 8px;
}

.profile-level-progress--header .profile-level-progress-fill {
	border-radius: 8px;
	padding-right: 5px;
	font-size: 0.65rem;
}

.profile-level-progress--header .profile-level-progress-percent-out {
	font-size: 0.65rem;
}

.profile-level-progress--header .profile-level-progress-note {
	margin: 0;
	font-size: 0.8rem;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.profile-level-progress--header {
		display: none;
	}
}

.profile-user-level-value {
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-text);
}

.tier-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.tier-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	padding: 1.25rem;
}

.tier-card.is-current {
	border-color: var(--color-primary);
	border-width: 2px;
}

.tier-card-name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	color: var(--color-text);
}

.tier-card-icon {
	font-size: 1.2rem;
}

.tier-card-row {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.4;
}

.tier-card-row-label {
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
}

.tier-card-row-value {
	color: var(--color-muted);
	font-style: italic;
}

.profile-field label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--color-text);
}

.profile-field input {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 0.9rem;
}

.profile-field input[readonly],
.profile-field textarea[readonly] {
	background: var(--color-surface-alt);
	color: var(--color-muted);
}

.profile-field select {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	background: var(--color-surface);
	color: var(--color-text);
}

.profile-field textarea {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	min-height: 90px;
	resize: vertical;
}

.profile-submit-button {
	padding: 0.65rem 1.5rem;
	border: none;
	border-radius: 4px;
	background: var(--color-primary);
	color: var(--color-surface);
	font-weight: 500;
	cursor: pointer;
}

.profile-submit-button:hover {
	background: var(--color-primary-light);
}

.profile-submit-button:disabled {
	background: var(--color-border);
	color: var(--color-muted);
	cursor: not-allowed;
}

.profile-submit-button-secondary {
	background: none;
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.profile-submit-button-secondary:hover {
	background: var(--color-surface-alt);
}

.profile-form-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.profile-password-dialog {
	display: none;
	width: min(400px, 90vw);
	padding: 1.75rem;
	border: none;
	border-radius: 6px;
}

.profile-password-dialog[open] {
	display: block;
}

.profile-password-dialog::backdrop {
	background: rgba(31, 41, 51, 0.7);
}

.profile-password-dialog .profile-form-actions {
	justify-content: flex-end;
}

.profile-sales-loading,
.profile-sales-empty {
	color: var(--color-muted);
}

.profile-sales-error {
	color: var(--color-danger);
}

.profile-sales-totals {
	display: flex;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

.profile-sales-total {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.profile-sales-totals {
	flex-wrap: wrap;
	align-items: flex-start;
}

.profile-sales-total-label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-muted);
}

.profile-sales-total-value {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-primary);
}

.profile-sales-chart-wrap {
	max-width: 100%;
}

/* ---- Ghost-site contact page (mu-plugins/ghost-portal-contact.php) ----
 * Renders inside the real theme (header-ghost.php/footer-ghost.php), so
 * these are scoped under .ghost-contact-section rather than the bare
 * label/input/button selectors the standalone portal shell (dgp-* classes,
 * ghost-portal-routes.php) uses - the shell isn't loaded here, and bare
 * element selectors here would restyle every form on the real site.
 * Notices/submit button reuse .profile-notice (and its -success/-error
 * variants) and .profile-submit-button (page-my-profile.php) rather than
 * duplicating them. */

.ghost-contact-section {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 3rem;
}

.ghost-contact-section h1 {
	margin: 0 0 1.5rem;
}

.ghost-contact-columns {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2.5rem;
	align-items: start;
}

.ghost-contact-info h2,
.ghost-contact-form h2 {
	margin: 0 0 0.85rem;
	font-size: 1.1rem;
	color: var(--color-text);
}

.ghost-contact-info p {
	margin: 0.3rem 0;
	color: var(--color-text);
}

.ghost-contact-info a {
	color: var(--color-text);
}

.ghost-contact-info i {
	width: 1.1rem;
	color: var(--color-text);
}

.ghost-contact-about {
	margin-bottom: 1.75rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--color-border);
}

.ghost-contact-about p {
	margin: 0 0 0.75rem;
	color: var(--color-muted);
	line-height: 1.6;
}

.ghost-contact-about p:last-child {
	margin-bottom: 0;
}

.ghost-contact-about a {
	color: var(--color-primary);
}

.ghost-contact-form-message {
	margin: -0.5rem 0 1.25rem;
}

.ghost-contact-form-message p {
	margin: 0 0 0.5rem;
	color: var(--color-muted);
	font-size: 0.8rem;
	line-height: 1.5;
}

.ghost-contact-form-message p:last-child {
	margin-bottom: 0;
}

.ghost-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}

.ghost-contact-form label {
	display: block;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--color-text);
	margin: 0.9rem 0 0.3rem;
}

.ghost-contact-form input[type=text],
.ghost-contact-form input[type=email],
.ghost-contact-form select,
.ghost-contact-form textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-text);
	background: var(--color-surface);
}

.ghost-contact-form textarea {
	min-height: 120px;
	resize: vertical;
}

.ghost-required {
	color: var(--color-danger);
}

.ghost-field-hint {
	color: var(--color-muted);
	font-size: 0.8rem;
	margin: 0.2rem 0 0;
}

.ghost-actions {
	margin-top: 1.25rem;
}

@media (max-width: 782px) {
	.ghost-contact-columns,
	.ghost-form-row {
		grid-template-columns: 1fr;
	}
}

/* ---- My Order page ---- */

.orders-page {
	max-width: 1400px;
	margin: 1.5rem auto 3rem;
	padding: 0 1.5rem;
}

.orders-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 1rem 1.5rem;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.orders-filter-submit {
	flex: 0 0 auto;
	min-width: 0;
}

.orders-window-note {
	margin: 0.5rem 0 0;
	color: var(--color-muted);
	font-size: 0.85rem;
}

.orders-loading,
.orders-empty {
	color: var(--color-muted);
	padding: 1.5rem;
	text-align: center;
}

.orders-error {
	color: var(--color-danger);
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-danger);
	border-radius: 4px;
	margin-bottom: 1rem;
}

.orders-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.orders-table th,
.orders-table td {
	padding: 0.65rem 0.85rem;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid var(--color-border);
}

.orders-table td {
	white-space: normal;
	color: var(--color-text);
}

.orders-table thead th {
	background: var(--color-primary);
	color: var(--color-surface);
	font-weight: 600;
	white-space: nowrap;
}

.orders-table tbody tr:last-child td {
	border-bottom: none;
}

.orders-table tbody tr:hover {
	background: var(--color-surface-alt);
}

@media (max-width: 782px) {
	.orders-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-field {
		min-width: 0;
	}

	.orders-filter-submit .profile-submit-button {
		width: 100%;
	}
}

.orders-reorder-btn {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: none;
	color: var(--color-text);
	font-size: 0.8rem;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.orders-reorder-btn:hover {
	background: var(--color-surface-alt);
}

/* ---- My Order expandable rows ----
   Each invoice is now [summary <tr>, detail <tr>] instead of one flat
   row, so #orders-table-body's tbody:last-child is always the last
   invoice's (initially hidden) detail row - `tr:not([hidden]):last-child`
   would match nothing there. Scoped to #orders-table-body specifically
   so the shared .orders-table tbody tr:last-child rule above is simply
   never reached here - harmless, kept for any other page that might
   reuse .orders-table with true flat rows. */
#orders-table-body tr.orders-row-detail td {
	border-bottom: none;
}

#orders-table-body tr:nth-last-child(2) td {
	border-bottom: none;
}

.orders-row-summary {
	cursor: pointer;
}

.orders-row-summary td:first-child {
	position: relative;
	padding-left: 1.75rem;
}

.orders-row-summary td:first-child::before {
	content: '\25B8';
	position: absolute;
	left: 0.65rem;
	color: var(--color-muted);
	transition: transform 0.15s ease;
}

.orders-row-summary.is-open td:first-child::before {
	transform: rotate(90deg);
}

.orders-row-detail {
	background: var(--color-surface-alt);
}

.orders-row-detail td {
	white-space: normal;
	padding: 1.25rem 1.5rem;
}

.orders-detail-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
}

.orders-detail-box {
	flex: 1 1 280px;
	padding: 1rem 1.25rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.orders-detail-box-title {
	margin: 0 0 0.75rem;
	font-weight: 600;
	color: var(--color-text);
}

.orders-detail-address {
	margin: 0;
	color: var(--color-text);
	white-space: pre-line;
}

.orders-line-items-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	background: var(--color-surface);
}

.orders-line-items-table th,
.orders-line-items-table td {
	padding: 0.5rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.orders-line-items-table thead th {
	background: var(--color-surface-alt);
	color: var(--color-text);
	font-weight: 600;
	white-space: nowrap;
}

.orders-line-items-table tbody tr:last-child td {
	border-bottom: none;
}

.reorder-dialog-multi-items {
	margin-bottom: 1rem;
}

.reorder-dialog {
	display: none;
	width: min(480px, 90vw);
	padding: 1.75rem;
	border: none;
	border-radius: 6px;
	max-height: 90vh;
	overflow-y: auto;
}

.reorder-dialog[open] {
	display: block;
}

.reorder-dialog::backdrop {
	background: rgba(31, 41, 51, 0.7);
}

.reorder-dialog .profile-form-actions {
	justify-content: flex-end;
}

.reorder-dialog-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

.reorder-dialog-row .profile-field {
	margin-bottom: 1rem;
}

@media (max-width: 480px) {
	.reorder-dialog-row {
		grid-template-columns: 1fr;
	}
}

.reorder-dialog-item {
	margin: 0 0 1rem;
	font-weight: 600;
	color: var(--color-text);
}

.reorder-dialog-error {
	color: var(--color-danger);
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-danger);
	border-radius: 4px;
	margin-bottom: 1rem;
}

.reorder-dialog-success {
	color: var(--color-primary);
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-primary);
	border-radius: 4px;
	margin-bottom: 1rem;
}