/* ==========================================================
   D2S Theme — base.css
   Loads on EVERY page. Keep this file small — anything page-type
   specific belongs in shop.css / single-product.css / etc.
   ========================================================== */

:root {
	--d2s-color-primary: #08534C;   /* deep green */
	--d2s-color-accent: #0F766E;    /* teal */
	--d2s-color-gold: #F2BC10;      /* gold */
	--d2s-color-text: #1A1A1A;
	--d2s-color-text-muted: #6B6B6B;
	--d2s-color-bg: #FFFFFF;
	--d2s-color-border: #E5E5E5;

	--d2s-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--d2s-container-width: 1350px;
	--d2s-radius: 6px;
}

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

body {
	margin: 0;
	font-family: var(--d2s-font-base);
	color: var(--d2s-color-text);
	background: var(--d2s-color-bg);
	line-height: 1.5;
	font-size: 16px;
	/* Guards the fixed bottom nav's width on phones: if any element
	   anywhere on a page is ever wider than the viewport, the WHOLE
	   page gains horizontal scroll — and a position:fixed element
	   anchored with left:0/right:0 can then appear to sit at the
	   wrong width or drift depending on scroll position, on some
	   mobile browsers. This is a safety net, not a fix for the
	   overflowing element itself (which would still be worth finding
	   and fixing directly if one turns up). */
	overflow-x: hidden;
}

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

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

.d2s-container {
	max-width: var(--d2s-container-width);
	margin: 0 auto;
	padding: 0 20px;
}

.d2s-track-order-banner-wrap {
	margin-top: 28px;
}

@media (max-width: 767px) {
	.d2s-container {
		padding: 0 12px;
	}
}

/* My Account page on mobile: this container's own 20px side padding
   stacks on top of the D2S Dashboard plugin's own content padding
   (set in that plugin's assets/d2s.css), doubling the left/right
   gutter around the dashboard cards. page.php already tags the
   <main> with "d2s-account-page" when is_account_page() is true, so
   scope this down to just that page instead of touching the 20px
   gutter every other page on the site relies on. */
@media (max-width: 768px) {
	.d2s-account-page .d2s-container {
		padding: 0;
	}
}

/* ---------- Header: Tier 1 - Top utility bar ---------- */
.d2s-topbar {
	background: var(--d2s-color-primary);
	color: rgba(255,255,255,0.85);
	font-size: 12px;
}

.d2s-topbar-inner {
	max-width: var(--d2s-container-width);
	margin: 0 auto;
	padding: 7px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.d2s-topbar-menu {
	list-style: none;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.d2s-topbar-menu a {
	color: rgba(255,255,255,0.85);
}

.d2s-topbar-menu a:hover {
	color: #fff;
}

.d2s-ab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
}

.d2s-ab-item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

.d2s-ab-item svg {
	flex-shrink: 0;
	color: var(--d2s-color-gold);
}

.d2s-gold {
	color: var(--d2s-color-gold);
}

.d2s-ab-dot {
	width: 4px;
	height: 4px;
	background: rgba(245, 166, 35, 0.5);
	border-radius: 50%;
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.d2s-ab {
		display: none;
	}
}

.d2s-topbar-right {
	display: flex;
	align-items: center;
	gap: 16px;
	white-space: nowrap;
}

.d2s-topbar-right a {
	color: rgba(255,255,255,0.85);
}

.d2s-topbar-right a:hover {
	color: #fff;
}

.d2s-topbar-login {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
}

.d2s-topbar-account {
	position: relative;
}

.d2s-topbar-account-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	padding: 0;
}

.d2s-topbar-account-toggle:hover {
	color: #fff;
}

.d2s-topbar-account .d2s-account-dropdown-menu {
	top: calc(100% + 10px);
}

/* ---------- Account dropdown (Hello, Name) ---------- */
.d2s-account-dropdown {
	position: relative;
}

.d2s-account-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	padding: 0;
}

.d2s-account-dropdown-toggle:hover {
	color: #fff;
}

.d2s-account-dropdown-toggle svg {
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.d2s-account-dropdown.is-open .d2s-account-dropdown-toggle svg {
	transform: rotate(180deg);
}

.d2s-site-header {
	position: relative;
	z-index: 999;
}

.d2s-account-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 10px;
	min-width: 190px;
	background: #fff;
	border-radius: var(--d2s-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	overflow: hidden;
	z-index: 9999;
}

.d2s-account-dropdown.is-open .d2s-account-dropdown-menu {
	display: block;
}

.d2s-account-dropdown-menu .d2s-account-dropdown-item {
	display: block;
	padding: 10px 16px;
	font-size: 13px;
	color: var(--d2s-color-text) !important;
	white-space: nowrap;
}

.d2s-account-dropdown-menu .d2s-account-dropdown-item:hover {
	background: #F5FAF9;
	color: var(--d2s-color-primary) !important;
}

.d2s-account-dropdown-divider {
	height: 1px;
	background: var(--d2s-color-border);
	margin: 4px 0;
}

.d2s-account-dropdown-logout {
	color: #C0392B !important;
}

.d2s-account-dropdown-logout:hover {
	background: #FDECEA;
	color: #C0392B !important;
}

/* ---------- Track Order link (topbar, small icon like Login/Register) ---------- */
.d2s-topbar-track {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
}

/* ---------- Header: Tier 2 - Main row ---------- */
.d2s-header-main {
	background: var(--d2s-color-primary);
	border-bottom: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 30;
}

.d2s-header-inner {
	max-width: var(--d2s-container-width);
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
	position: relative;
}

/* Hamburger (mobile only) */
.d2s-mobile-menu-toggle {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 34px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.d2s-mobile-menu-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
}

.d2s-site-title {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

/* Custom logo — constrained size (this was the broken/oversized bug) */
.d2s-header-logo {
	flex-shrink: 0;
}

.d2s-header-logo img,
.d2s-header-logo .custom-logo {
	max-height: 48px;
	width: auto;
	display: block;
}

/* Header badge — "Source Direct / Bigger Possibilities", sits
   between the logo and search bar inside .d2s-header-left-group.
   Own dedicated wrapper class (no shared reset). Sized to fit
   inside the row's existing height (logo caps the row at 48px),
   so it never grows the header. It's a real <button>, clickable
   (opens the same "Shop by Category" panel as the category bar
   toggle — see base.js), so browser button chrome is reset here. */
.d2s-header-badge {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 140px;
	height: 44px;
	margin-left: 18px;
	padding: 0 14px 0 10px;
	box-sizing: border-box;
	border-radius: 10px;
	border: 0;
	background: linear-gradient(150deg, #0F766E 0%, #0B5952 60%, #08534C 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 -2px 4px rgba(0, 0, 0, 0.3),
		0 4px 10px rgba(0, 0, 0, 0.35),
		0 0 16px rgba(15, 118, 110, 0.65);
	border: 1px solid rgba(242, 188, 16, 0.55);
	transform: rotate(-1deg);
	overflow: hidden;
	isolation: isolate;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font: inherit;
	text-align: left;
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.d2s-header-badge:hover,
.d2s-header-badge:focus-visible {
	filter: brightness(1.1);
	transform: rotate(-1deg) scale(1.035);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 -2px 4px rgba(0, 0, 0, 0.3),
		0 6px 16px rgba(0, 0, 0, 0.4),
		0 0 24px rgba(15, 118, 110, 0.85);
}

.d2s-header-badge:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.d2s-header-badge-sparkle {
	position: absolute;
	top: -3px;
	right: 6px;
	z-index: 3;
	color: #fff;
	opacity: 0.9;
	pointer-events: none;
	animation: d2sBadgeTwinkle 2.4s ease-in-out infinite;
}

@keyframes d2sBadgeTwinkle {
	0%, 100% { opacity: 0.35; transform: scale(0.75) rotate(0deg); }
	50% { opacity: 1; transform: scale(1) rotate(15deg); }
}

.d2s-header-badge-sheen {
	position: absolute;
	top: -60%;
	left: -60%;
	width: 55%;
	height: 220%;
	background: linear-gradient(
		75deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.7) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(8deg) translateX(0);
	pointer-events: none;
	z-index: 1;
	animation: d2sBadgeShine 3.4s ease-in-out infinite;
}

@keyframes d2sBadgeShine {
	0% { transform: rotate(8deg) translateX(0%); }
	45% { transform: rotate(8deg) translateX(340%); }
	100% { transform: rotate(8deg) translateX(340%); }
}

.d2s-header-badge-globe {
	position: absolute;
	right: -4px;
	top: 50%;
	transform: translateY(-50%);
	color: #F2BC10;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

.d2s-header-badge-text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

/* Primary line — readable bold sans (was cursive; hard to read at this
   size). Tagline below stays in the original script font, unchanged. */
.d2s-header-badge-line1 {
	font-family: 'Lucida Bright', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: #F2BC10;
}

.d2s-header-badge-line2 {
	font-family: 'Dancing Script', cursive;
	margin-top: 2px;
	font-size: 14.5px;
	font-weight: 600;
	color: #E8DFC0;
}

@media (max-width: 1024px) {
	.d2s-header-badge {
		display: none; /* header switches to the compact mobile layout below this width — no room for the badge */
	}
}

.d2s-header-search-wrap {
	flex: 1;
	min-width: 0;
}

.d2s-header-left-group {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.d2s-header-search-wrap--mobile {
	display: none; /* desktop uses the full search-wrap above instead — this is the compact mobile-only field */
}

.d2s-search-form {
	display: flex;
	align-items: stretch;
	border: none;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	position: relative;
}

/* ---------- Live search suggestions dropdown ---------- */
.d2s-search-suggestions {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border-radius: var(--d2s-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	z-index: 80;
	max-height: 400px;
	overflow-y: auto;
}

.d2s-search-suggestion-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	color: var(--d2s-color-text);
	border-bottom: 1px solid var(--d2s-color-border);
}

.d2s-search-suggestion-item:hover,
.d2s-search-suggestion-item.is-active {
	background: #F5FAF9;
}

.d2s-search-suggestion-item img,
.d2s-search-suggestion-noimg {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	object-fit: cover;
	background: #F0F0F0;
	flex-shrink: 0;
}

.d2s-search-suggestion-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.d2s-search-suggestion-name {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.d2s-search-suggestion-price {
	font-size: 12px;
	font-weight: 700;
	color: var(--d2s-color-primary);
}

.d2s-search-view-all {
	display: block;
	padding: 12px 14px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--d2s-color-primary);
	background: #FAFAFA;
}

.d2s-search-view-all:hover {
	background: #F0F0F0;
}

.d2s-search-empty {
	padding: 16px;
	text-align: center;
	font-size: 13px;
	color: var(--d2s-color-text-muted);
}

.d2s-search-recent-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--d2s-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.d2s-search-recent-clear {
	background: none;
	border: none;
	color: var(--d2s-color-primary);
	font-size: 11px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	padding: 0;
}

.d2s-search-recent-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 14px;
	background: none;
	border: none;
	text-align: left;
	font-size: 13px;
	color: var(--d2s-color-text);
	cursor: pointer;
}

.d2s-search-recent-item svg {
	flex-shrink: 0;
	color: var(--d2s-color-text-muted);
}

.d2s-search-recent-item:hover,
.d2s-search-recent-item.is-active {
	background: #FAFAFA;
	color: var(--d2s-color-primary);
}

.d2s-search-cat {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	border-right: 1px solid var(--d2s-color-border);
	background: #FAFAFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
	padding: 0 24px 0 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--d2s-color-text-muted);
	max-width: 140px;
}

.d2s-search-input {
	border: none;
	outline: none;
	padding: 13px 16px;
	font-size: 14px;
	flex: 1;
	min-width: 0;
}

.d2s-search-submit {
	background: var(--d2s-color-gold);
	color: #1A1A1A;
	border: none;
	padding: 0 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.d2s-search-submit:hover {
	filter: brightness(0.95);
}

.d2s-header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

/* Thin vertical separators between Wishlist / Recently Viewed / Cart
   give the action group a defined, premium "department store" feel
   instead of icons just floating loosely next to each other. */
.d2s-header-actions > a.d2s-header-icon-link:not(:last-child) {
	padding-right: 14px;
	border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.d2s-mobile-search-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	color: #fff;
}

.d2s-header-icon-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	transition: opacity 0.15s ease;
}

.d2s-header-icon-link:hover {
	color: var(--d2s-color-gold);
}

/* Soft circular badge behind each action icon — matches the same
   "icon in a soft-tinted circle" treatment used on the homepage
   trust-badges strip, just adapted for the dark header background
   (translucent white instead of solid teal-tint). This is what
   gives the header actions a finished, premium feel instead of
   bare icons floating on the green. */
.d2s-header-icon-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.d2s-header-icon-link:hover .d2s-header-icon-circle {
	background: rgba(255, 255, 255, 0.24);
	transform: scale(1.06);
}

/* Wishlist and Recent stay icon-only — the circle badge treatment
   already carries enough visual weight on its own; Cart keeps its
   text since the price/item-count is genuinely useful info, not
   just a label. */
.d2s-wishlist-icon,
.d2s-recently-viewed-icon {
	gap: 0;
}

.d2s-wishlist-icon .d2s-header-icon-label,
.d2s-recently-viewed-icon .d2s-header-icon-label {
	display: none;
}

.d2s-header-icon-label {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	white-space: nowrap;
}



.d2s-cart-items-count {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
}

.d2s-cart-icon-wrap,
.d2s-wishlist-icon-wrap {
	position: relative;
}

.d2s-cart-count,
.d2s-wishlist-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 8px;
	background: var(--d2s-color-gold);
	color: #1A1A1A;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.d2s-wishlist-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--d2s-color-text-muted);
}

.d2s-wishlist-empty svg {
	margin-bottom: 14px;
}

.d2s-wishlist-empty p {
	font-size: 15px;
	margin: 0 0 18px;
}

.d2s-wishlist-empty-cta {
	display: inline-block;
	background: var(--d2s-color-primary);
	color: #fff;
	padding: 12px 28px;
	border-radius: 24px;
	font-weight: 700;
	font-size: 14px;
}

.d2s-wishlist-empty-cta:hover {
	background: var(--d2s-color-accent);
}

.d2s-cart-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--d2s-color-gold);
}

/* ---------- Header: Tier 3 - Category bar ---------- */
.d2s-category-bar {
	background: var(--d2s-color-gold);
	height: 42px;
}

.d2s-category-bar-inner {
	max-width: var(--d2s-container-width);
	height: 42px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 24px;
	position: relative;
}

/* Wraps the horizontally-scrolling .d2s-menu list (see below) and
   the prev/next scroll buttons. flex:1/min-width:0 lets it shrink
   below its content's natural width instead of pushing
   .d2s-promo-widget off the end of the row — the actual bug this
   fixes, since before this the category list had no width limit or
   scroll mechanism at all and would simply overflow past the page's
   edge on any screen not wide enough for every category. */
.d2s-primary-nav {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
}

.d2s-menu-scroll-btn {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.55);
	color: #1A1A1A;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(19, 45, 42, 0.10);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.d2s-menu-scroll-btn:hover {
	background: #fff;
	color: var(--d2s-color-primary);
	box-shadow: 0 4px 12px rgba(19, 45, 42, 0.32);
	transform: translateY(-50%) scale(1.06);
}

.d2s-menu-scroll-btn.is-visible {
	display: flex;
}

.d2s-menu-scroll-prev {
	left: 0;
}

.d2s-menu-scroll-next {
	right: 0;
}

/* Reserves quiet breathing room at each end of the scrollable list
   so category text never sits flush against (or under) a scroll
   button — fixed padding regardless of whether a button is
   currently shown, so nothing shifts width when one appears. */
.d2s-menu {
	padding: 0 34px;
}

/* Soft fade where the list is cut off by its container, so text
   reads as "continues off-screen" instead of abruptly clipped —
   only shown on the side a scroll button is present. */
.d2s-primary-nav::before,
.d2s-primary-nav::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.d2s-primary-nav::before {
	left: 0;
	background: linear-gradient(90deg, var(--d2s-color-gold) 30%, rgba(242, 188, 16, 0));
}

.d2s-primary-nav::after {
	right: 0;
	background: linear-gradient(-90deg, var(--d2s-color-gold) 30%, rgba(242, 188, 16, 0));
}

.d2s-primary-nav:has(.d2s-menu-scroll-prev.is-visible)::before,
.d2s-primary-nav:has(.d2s-menu-scroll-next.is-visible)::after {
	opacity: 1;
}

/* Icon-only "Categories" trigger — flat mint-teal box, no label text
   (aria-label + title carry the accessible name instead). Kept small
   and square so it reads as a distinct compact control on the yellow
   category bar rather than a full-width text button. */
.d2s-category-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: auto;
	height: 32px;
	padding: 0 14px;
	background: #0F766E;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.d2s-category-toggle svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.d2s-category-toggle-label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.d2s-category-toggle-chevron {
	margin-left: 2px;
	transition: transform 0.2s ease;
}

.d2s-category-toggle[aria-expanded="true"] .d2s-category-toggle-chevron {
	transform: rotate(180deg);
}

.d2s-category-toggle:hover {
	background: #0D655E;
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

.d2s-category-toggle:active {
	transform: translateY(0);
}



.d2s-category-panel-list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.d2s-category-panel-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--d2s-color-text);
	transition: background 0.12s ease, padding-left 0.12s ease;
}

.d2s-category-panel-img {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
}

.d2s-category-panel-list a:hover {
	background: #F5FAF9;
	color: var(--d2s-color-primary);
	padding-left: 22px;
}

.d2s-category-panel-list ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 16px;
	background: #FAFAFA;
}

/* ---------- Primary mega-menu (Today's Deal, Trending Now, etc.) ----------
   Restored base list-reset + horizontal layout — this had been
   accidentally dropped during earlier edits, causing raw bullet
   points to show instead of a styled horizontal nav. */
.d2s-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	height: 42px;
	flex: 1;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.d2s-menu::-webkit-scrollbar {
	display: none;
}

.d2s-menu-item {
	position: relative;
	list-style: none;
	height: 100%;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.d2s-menu-link {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 100%;
	color: #08534C;
	font-size: 13.5px;
	font-weight: 600;
	position: relative;
	white-space: nowrap;
}

.d2s-menu-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 10px;
	height: 2px;
	background: #08534C;
	transition: right 0.2s ease;
}

.d2s-menu-link:hover::after {
	right: 0;
}

.d2s-menu-caret {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
	flex-shrink: 0;
}

.d2s-mega-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
	min-width: 480px;
	z-index: 50;
	margin-top: 8px;
	color: var(--d2s-color-text);
}

.d2s-has-mega:hover .d2s-mega-panel,
.d2s-has-mega:focus-within .d2s-mega-panel {
	display: block;
}

.d2s-mega-panel-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px;
	padding: 20px;
}

.d2s-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.d2s-submenu-link {
	display: block;
	font-size: 13px;
	padding: 6px 0;
	color: var(--d2s-color-text-muted);
}

.d2s-submenu-link:hover {
	color: var(--d2s-color-accent);
}

/* ---------- Promo widget (category bar, far right) ---------- */
.d2s-promo-widget {
	position: relative;
	display: inline-flex;
	margin-left: auto;
	flex-shrink: 0;
}

.d2s-promo-widget-btn {
	display: flex;
	align-items: center;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	height: 40px;
	font-family: inherit;
}

.d2s-pw-gift {
	background: #E53935;
	border-radius: 7px 0 0 7px;
	height: 40px;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.d2s-pw-gift-icon {
	display: flex;
	animation: d2sPwShake 3.5s ease-in-out infinite;
}

.d2s-pw-gift-icon svg {
	width: 22px;
	height: 22px;
}

@keyframes d2sPwShake {
	0%, 100% { transform: rotate(0deg) scale(1); }
	4% { transform: rotate(-15deg) scale(1.1); }
	8% { transform: rotate(12deg) scale(1.1); }
	12% { transform: rotate(-10deg) scale(1.05); }
	16% { transform: rotate(8deg) scale(1.05); }
	20% { transform: rotate(-4deg) scale(1); }
}

.d2s-pw-mid {
	background: #fff;
	height: 40px;
	padding: 0 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	position: relative;
	border-top: 1.5px solid #ddd;
	border-bottom: 1.5px solid #ddd;
}

.d2s-pw-label {
	font-size: 8px;
	color: #bbb;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
}

.d2s-pw-code {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--d2s-color-primary);
	line-height: 1;
	letter-spacing: 0.4px;
}

.d2s-pw-notch {
	position: absolute;
	right: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background: var(--d2s-color-gold);
	border-radius: 50%;
	z-index: 2;
}

.d2s-pw-save {
	background: linear-gradient(135deg, #08534C, #0A6B5E);
	border-radius: 0 7px 7px 0;
	height: 40px;
	padding: 0 13px 0 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	border: 1.5px solid #08534C;
	border-left: none;
}

.d2s-pw-save-label {
	font-size: 8px;
	color: rgba(255, 255, 255, 0.45);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
}

.d2s-pw-save-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--d2s-color-gold);
	line-height: 1;
}

/* ---------- Popup ---------- */
.d2s-pw-popup {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 360px;
	z-index: 99999;
}

.d2s-pw-popup.is-open {
	display: block;
	animation: d2sPwIn 0.22s cubic-bezier(0.32, 1.2, 0.6, 1);
}

@keyframes d2sPwIn {
	from { opacity: 0; transform: translateY(-6px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.d2s-pw-popup-card {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid #E8E8E8;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.d2s-pw-popup-header {
	background: linear-gradient(120deg, #063D38 0%, #08534C 60%, #0A6B5E 100%);
	padding: 22px 22px 18px;
	position: relative;
	overflow: hidden;
}

.d2s-pw-blob-1 {
	position: absolute;
	top: -40px;
	right: -40px;
	width: 130px;
	height: 130px;
	background: rgba(245, 166, 35, 0.07);
	border-radius: 50%;
}

.d2s-pw-blob-2 {
	position: absolute;
	bottom: -30px;
	left: -20px;
	width: 90px;
	height: 90px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 50%;
}

.d2s-pw-header-content {
	position: relative;
}

.d2s-pw-eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 2px;
}

.d2s-pw-eyebrow-icon {
	width: 22px;
	height: 22px;
	background: rgba(245, 166, 35, 0.2);
	border: 1px solid rgba(245, 166, 35, 0.4);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.d2s-pw-big-number {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 6px;
}

.d2s-pw-big-percent {
	font-size: 52px;
	font-weight: 800;
	color: var(--d2s-color-gold);
	line-height: 1;
}

.d2s-pw-big-off {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
}

.d2s-pw-header-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

.d2s-pw-ticket-divider {
	display: flex;
	align-items: center;
	background: #fff;
}

.d2s-pw-notch-left,
.d2s-pw-notch-right {
	width: 16px;
	height: 16px;
	background: #E8E8E8;
	border-radius: 50%;
	flex-shrink: 0;
}

.d2s-pw-notch-left {
	margin-left: -8px;
}

.d2s-pw-notch-right {
	margin-right: -8px;
}

.d2s-pw-dashed-line {
	flex: 1;
	border-top: 2px dashed #EBEBEB;
	margin: 0 2px;
}

.d2s-pw-body {
	padding: 14px 20px 20px;
}

.d2s-pw-coupon-row {
	background: #F8FFFE;
	border: 2px dashed var(--d2s-color-primary);
	border-radius: 10px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.d2s-pw-coupon-code {
	font-size: 17px;
	font-weight: 800;
	color: var(--d2s-color-primary);
	letter-spacing: 2px;
	line-height: 1;
	white-space: nowrap;
}

.d2s-pw-copy-btn {
	background: var(--d2s-color-primary);
	border: none;
	border-radius: 8px;
	padding: 6px 11px;
	cursor: pointer;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: background 0.15s ease;
}

.d2s-pw-copy-btn:hover {
	background: #063D38;
}

.d2s-pw-copy-btn.is-copied {
	background: #2E7D32;
}

.d2s-pw-note {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	margin-bottom: 16px;
	font-size: 10.5px;
	color: #BBB;
	line-height: 1.5;
}

.d2s-pw-note svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.d2s-pw-perks {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}

.d2s-pw-perk {
	background: #F8FFFE;
	border: 1px solid #C8E8E4;
	border-radius: 10px;
	padding: 7px 8px;
	text-align: center;
}

.d2s-pw-perk svg {
	display: block;
	margin: 0 auto 5px;
}

.d2s-pw-perk div {
	font-size: 10px;
	font-weight: 700;
	color: #222;
	line-height: 1.3;
}

.d2s-pw-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(90deg, var(--d2s-color-gold), #E8960F);
	border-radius: 10px;
	padding: 13px;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 800;
	color: #fff;
	box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
	letter-spacing: 0.2px;
}

.d2s-pw-confetti {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 999999;
	display: none;
}

@media (max-width: 900px) {
	.d2s-promo-widget {
		display: none;
	}
}

/* ---------- Footer ---------- */
.d2s-site-footer {
	position: relative;
	border-top: 0 !important;
	margin-top: 0;
	background: #08534C;
	color: #E5E5E5;
}
/* Footer top accent: explicit strip so it remains visible even when other footer border rules/cache overrides are present. */
.d2s-site-footer::before {
	content: "";
	display: block;
	width: 100%;
	height: 10px !important;
	background: #F2BC10 !important;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
.d2s-footer-inner { max-width: var(--d2s-container-width); margin: 0 auto; padding: 40px 20px 20px; }
.d2s-footer-columns--four-menus {
	display: grid;
	grid-template-columns: repeat(4, max-content) minmax(380px, 420px);
	gap: 40px;
	margin-bottom: 30px;
	align-items: start;
	justify-content: space-between;
}
.d2s-footer-menu-col { min-width: 0; }
/* Newsletter shortcode owns its own sizing/design; the theme only provides the free right-side grid slot. */
.d2s-footer-newsletter-plugin { min-width: 0; align-self: start; width: 100%; }
@media (min-width: 769px) { .d2s-footer-newsletter-plugin { justify-self: end; } }
.d2s-footer-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 16px;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: default;
	position: relative;
	padding-bottom: 10px;
}
.d2s-footer-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 26px;
	height: 2px;
	background: var(--d2s-color-gold);
	border-radius: 2px;
}
.d2s-footer-chevron { display: none; }
.d2s-footer-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.d2s-footer-nav-list a { font-size: 13px; color: #B8CFCB; text-decoration: none; }
.d2s-footer-nav-list a:hover { color: #fff; }
.d2s-footer-menu-panel { display: block; }
.d2s-footer-trust-strip { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; padding:20px 0; border-top:1px solid rgba(255,255,255,.12); font-size:12px; font-weight:600; color:#B8CFCB; }
.d2s-footer-bottom { text-align:center; font-size:12px; color:#8FA8A3; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
@media (max-width: 1100px) and (min-width: 769px) {
 .d2s-footer-columns--four-menus { grid-template-columns: repeat(4, minmax(0,1fr)); }
 .d2s-footer-newsletter-plugin { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
 .d2s-footer-inner { padding: 28px 16px 16px; }
 .d2s-footer-columns--four-menus { display:block; margin-bottom:20px; }
 .d2s-footer-menu-col { border-bottom:1px solid rgba(255,255,255,.12); }
 .d2s-footer-heading { cursor:pointer; padding:15px 0 12px; margin:0; font-size:15px; }
 .d2s-footer-heading::after { bottom: 12px; }
 .d2s-footer-chevron { display:block; font-size:19px; line-height:1; font-weight:300; color:#B8CFCB; transition:transform .2s ease; }
 .d2s-footer-menu-panel { display:none; padding:0 0 15px; }
 .d2s-footer-menu-col.is-open .d2s-footer-menu-panel { display:block; }
 .d2s-footer-menu-col.is-open .d2s-footer-chevron { transform:rotate(45deg); }
 .d2s-footer-nav-list { gap:4px; }
 .d2s-footer-nav-list a { font-size:13px; }
 .d2s-footer-newsletter-plugin { padding-top:24px; }
}

.d2s-front-page {
	padding: 30px 0 60px;
}

/* ---------- Quick View / Compare modal safety net ----------
   These modals are injected in the footer on EVERY page, but
   their fuller styling only loads on shop/product/homepage
   (shop.css). This rule guarantees they stay hidden everywhere
   else too — without it, a plain content page would show the
   raw "Loading…" placeholder text unstyled at the bottom. */
.d2s-quick-view-modal {
	display: none;
}

.d2s-quick-view-modal.is-open {
	display: block;
}

/* ---------- Generic plain pages (page.php) ---------- */
.d2s-generic-page {
	padding: 24px 0 60px;
}

.d2s-page-title {
	font-size: 24px;
	margin: 0 0 20px;
}

.d2s-page-content .shop_table {
	width: 100%;
	border-collapse: collapse;
}

.d2s-page-content .button,
.d2s-page-content input[type="submit"] {
	background: var(--d2s-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--d2s-radius);
	padding: 10px 18px;
	font-weight: 600;
	cursor: pointer;
}

.d2s-page-content .button:hover,
.d2s-page-content input[type="submit"]:hover {
	background: var(--d2s-color-accent);
}

/* My Account page — no title, with clear breathing room below the header. */
.d2s-account-page {
	background: #F8FAF9;
	padding: 24px 0 60px;
}

/* ---------- Generic content (index.php fallback) ---------- */
.d2s-generic-content {
	padding: 30px 0;
}

.d2s-post-title {
	font-size: 26px;
	margin: 0 0 16px;
}

/* ---------- Mobile-only promo bar (FREE SHIPPING / QUALITY ASSURED + benefits row) ---------- */
.d2s-mobile-promo-bar {
	display: none;
}

@media (max-width: 1024px) {
	.d2s-mobile-promo-bar {
		display: block;
		margin: 14px 16px;
		border-radius: 14px;
		overflow: hidden;
		box-shadow: 0 8px 20px -6px rgba(8, 83, 76, 0.35);
	}
	.d2s-mobile-promo-top {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		background: linear-gradient(135deg, #0A6357 0%, #08534C 55%, #063E38 100%);
		padding: 10px 14px;
		position: relative;
	}
	.d2s-mobile-promo-top::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
		background: rgba(255, 255, 255, 0.15);
	}
	.d2s-mobile-promo-item {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #fff;
		min-width: 0;
	}
	.d2s-mobile-promo-item svg {
		flex-shrink: 0;
		position: relative;
		z-index: 1;
	}
	.d2s-mobile-promo-item > svg {
		width: 30px;
		height: 30px;
		padding: 7px;
		background: rgba(255, 255, 255, 0.14);
		border-radius: 50%;
		box-sizing: border-box;
	}
	.d2s-mobile-promo-item div {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	/* clamp() keeps this on one line on every phone width we've tested
	   (320px–480px) instead of wrapping to 2 lines on narrower devices
	   only — that mismatch was making the card look different phone
	   to phone. nowrap is the safety net once the text is small enough. */
	.d2s-mobile-promo-item strong {
		font-size: clamp(9.5px, 3.1vw, 12px);
		font-weight: 800;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}
	.d2s-mobile-promo-item span {
		font-size: clamp(8.5px, 2.4vw, 10px);
		opacity: 0.8;
		margin-top: 2px;
		white-space: nowrap;
	}
	.d2s-mobile-promo-bottom {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		background: #FAFBF9;
		padding: 12px 0;
	}
	.d2s-mobile-promo-benefit {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		font-size: 11px;
		font-weight: 600;
		color: var(--d2s-color-text);
		border-right: 1px solid #E5E7E5;
	}
	.d2s-mobile-promo-benefit:last-child {
		border-right: none;
	}
	.d2s-mobile-promo-benefit svg {
		color: var(--d2s-color-primary);
		flex-shrink: 0;
	}
}
@media (max-width: 1024px) {
	.d2s-topbar {
		display: none; /* utility bar hidden on mobile — reduces clutter */
	}
	.d2s-mobile-menu-toggle {
		display: flex;
	}
	
	.d2s-header-search-wrap--desktop {
		display: none; /* replaced by the compact mobile search field in this same row */
	}
	.d2s-header-logo img,
	.d2s-header-logo .custom-logo {
		max-height: 30px;
	}
	.d2s-header-icon-label {
		display: none; /* icon-only on mobile to save space */
	}
	.d2s-mobile-search-toggle {
		display: none; /* search field is already always visible in the header row */
	}
	.d2s-search-input {
		width: 100%;
	}
	.d2s-category-bar {
		display: none; /* category browsing handled by the mobile hamburger menu instead */
	}
	/* Wishlist already has its own tab in the bottom nav — dropping it
	   here is what makes room for menu + logo + search + cart to sit
	   comfortably in one row without the "All Categories" dropdown. */
	.d2s-wishlist-icon {
		display: none;
	}
	/* Recently Viewed has no bottom-nav slot either — same reasoning
	   as Track Order: desktop-only for now, mobile stays reachable
	   via the account/wishlist pages instead of a 6th header icon. */
	.d2s-recently-viewed-icon {
		display: none;
	}
	/* Logo pinned left, search fills the middle, cart pinned right. */
	.d2s-header-actions {
		gap: 12px;
	}
	.d2s-header-icon-link svg {
		width: 22px;
		height: 22px;
	}
	.d2s-header-inner {
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 8px;
}

	.d2s-header-search-wrap--mobile {
		display: flex;
		flex: 1;
		min-width: 0;
	}
	.d2s-header-search-wrap--mobile .d2s-search-form {
		display: flex;
		width: 100%;
		position: static;
		margin: 0;
		background: #F5F7F6;
		border: 1px solid #E5E9E7;
		border-radius: 20px;
		overflow: hidden;
	}
	/* "All Categories" dropped from the mobile search field entirely —
	   that's what lets everything fit in a single header row instead
	   of needing its own row below the header. */
	.d2s-header-search-wrap--mobile .d2s-search-cat {
		display: none;
	}
	.d2s-header-search-wrap--mobile .d2s-search-input {
		width: 100%;
		background: transparent;
		border: none;
		padding: 7px 4px 7px 14px;
		font-size: 13.5px;
	}
	.d2s-header-search-wrap--mobile .d2s-search-submit {
		background: transparent;
		color: var(--d2s-color-primary);
		padding: 0 12px;
	}
	/* Single-product pages use the same compact mobile header search.
	   Keep the search field visible after the logo; only the desktop
	   search row is replaced by this mobile field at this breakpoint. */
}

/* Mobile landscape — noticeably more horizontal room than portrait,
   so the search field gets a bigger, more prominent treatment
   instead of just inheriting the cramped portrait sizing. */
@media (max-width: 1024px) and (orientation: landscape) {
	.d2s-header-search-wrap--mobile .d2s-search-form {
		border-radius: 24px;
	}
	.d2s-header-search-wrap--mobile .d2s-search-input {
		padding: 11px 4px 11px 20px;
		font-size: 15px;
	}
	.d2s-header-search-wrap--mobile .d2s-search-submit svg {
		width: 20px;
		height: 20px;
	}
}

/* ---------- Mobile bottom navigation bar ----------
   "Style 1: Modern Minimal" — white bar, icon + label, small
   underline indicator on the active tab. Desktop never sees this. */
.d2s-bottom-nav {
	display: none;
}

@media (max-width: 1024px) {
	.d2s-bottom-nav {
		display: flex;
		align-items: stretch;
		width: 100%;
		box-sizing: border-box;
		height: 58px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 950;
		background: #fff;
		border-top: 1px solid #EFF2F0;
		box-shadow: 0 -6px 20px -4px rgba(8, 83, 76, 0.12);
		padding-bottom: env(safe-area-inset-bottom, 0);
		/* Forces its own GPU-composited layer — some mobile browsers
		   (older WebViews, in-app browsers) render a plain
		   position:fixed bottom bar inconsistently — wrong width,
		   or appearing to scroll away instead of staying put — until
		   it's promoted to its own layer like this. */
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}
	/* Room at the bottom of every page so content never sits under
	   the fixed bar. The bar itself is ~58px tall + safe-area inset. */
	body {
		padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
	}
	/* The floating compare bar is also fixed to the bottom — lift it
	   above the nav instead of letting the two overlap. */
	.d2s-compare-bar {
		bottom: calc(58px + env(safe-area-inset-bottom, 0px));
		z-index: 960;
	}
}

.d2s-bottom-nav-item {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	margin: 0;
	padding: 0 4px;
	background: none;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: #9CA8A4;
	text-decoration: none;
	position: relative;
	cursor: pointer;
	vertical-align: top;
}

.d2s-bottom-nav-item svg {
	stroke: currentColor;
	display: block;
	flex-shrink: 0;
}

.d2s-bottom-nav-item.is-active {
	color: var(--d2s-color-primary);
}

/* Small pill/underline under the active tab's label, matching the
   "Modern Minimal" reference style. */
.d2s-bottom-nav-item.is-active::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 3px;
	border-radius: 2px;
	background: var(--d2s-color-gold);
}

.d2s-bottom-nav-item .d2s-cart-icon-wrap,
.d2s-bottom-nav-item .d2s-wishlist-icon-wrap {
	position: relative;
	display: flex;
}

/* ---------- Page titles hidden site-wide ----------
   Shop/category/search/wishlist/recently-viewed headings, generic
   WordPress Page titles, blog post-list titles, and the Track Order
   heading — all hidden per request. Product names on the single
   product page are untouched (those aren't decorative headers,
   they're the actual product being viewed). */
.d2s-post-title,
.d2s-page-title,
.d2s-track-order-title {
	display: none;
}


/* ---------- D2S Marketplace Mega Menu v1.30.234 — premium marketplace layout ----------
   Root-cause fix: the panel's open state class (.is-open, set by base.js) was
   still matching an old rule that set display:block, so this grid never
   actually activated — the tab list and content stacked as plain full-width
   blocks instead of side-by-side columns. The grid-only open state is now
   keyed to the real class, and the stray unused third grid column (a
   leftover from an earlier 3-column draft — the markup only ever renders two
   children) has been removed. Visual layer refreshed for a more premium,
   Premium marketplace-grade finish: softer elevation, an accent-bar active tab
   state, card-style subcategory links, and a subtle zoom on the feature
   image. */
.d2s-category-panel.is-open { display: grid; }
.d2s-category-panel {
  display: none;
  position: absolute;
  top: 100%;
  /* left+right (instead of a viewport-based width) guarantees this
     panel can never extend past its positioned ancestor's own right
     edge (.d2s-category-bar-inner, which is itself centered/capped
     to the page's max-width) — a viewport-based width can land the
     panel's right edge past the page's own content area. */
  left: 20px;
  right: 20px;
  max-width: 1230px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(19, 45, 42, 0.14), 0 2px 8px rgba(19, 45, 42, 0.06);
  z-index: 60;
  margin-top: 10px;
  overflow: hidden;
  min-height: 0;
  grid-template-columns: 260px minmax(0, 1fr);
  padding: 0;
  border: 1px solid #edf1f1;
  animation: d2sMegaPanelIn 0.16s ease-out;
}
@keyframes d2sMegaPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.d2s-mega-category-list { padding: 10px; background: #fafbfb; border-right: 1px solid #edf1f1; overflow: auto; max-height: 400px; }
.d2s-mega-category-tab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 9px 10px;
  text-align: left;
  color: var(--d2s-color-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.d2s-mega-category-tab img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: #f2f5f5; flex: 0 0 32px; }
.d2s-mega-category-tab.is-active,
.d2s-mega-category-tab:hover { background: #eef7f5; color: var(--d2s-color-primary); }
.d2s-mega-category-tab.is-active { border-left-color: var(--d2s-color-primary); }
.d2s-mega-tab-arrow { margin-left: auto; font-size: 16px; line-height: 1; opacity: 0.35; transition: opacity 0.14s ease, transform 0.14s ease; }
.d2s-mega-category-tab.is-active .d2s-mega-tab-arrow { opacity: 1; transform: translateX(1px); }
.d2s-mega-category-content { min-width: 0; padding: 20px 24px; }
.d2s-mega-category-pane { display: none; }
.d2s-mega-category-pane.is-active { display: block; animation: d2sMegaPaneIn 0.14s ease-out; }
@keyframes d2sMegaPaneIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.d2s-mega-pane-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #edf1f1; }
.d2s-mega-eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 9px; font-weight: 700; color: var(--d2s-color-accent); margin-bottom: 4px; }
.d2s-mega-pane-head h3 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700; color: #172321; letter-spacing: -0.2px; }
.d2s-mega-view-all {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--d2s-color-primary);
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef7f5;
  transition: background 0.14s ease, transform 0.14s ease;
}
.d2s-mega-view-all:hover { background: var(--d2s-color-primary); color: #fff; transform: translateX(1px); }
.d2s-mega-view-all span { margin-left: 5px; }
/* Card layout, matching a reference marketplace mega-menu: each subcategory
   is a bordered "product tile" style card (chosen from a set of style
   previews) — image + name inside a bordered box that lifts and picks up
   an accent border on hover, so it reads as a clickable tile rather than
   a plain link. A subcategory's own children are no longer listed inside
   the card; they show on that subcategory's own archive page instead
   (template-parts/shop/subcategory-row.php). A promo banner fills the
   right column so the panel reads balanced instead of lopsided. */
.d2s-mega-pane-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; padding-top: 16px; align-items: start; }
.d2s-mega-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.d2s-mega-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 8px 14px;
  border: 1px solid #e8ece9;
  border-radius: 12px;
  background: #fafbfa;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.d2s-mega-card:hover { box-shadow: 0 8px 20px rgba(19, 45, 42, 0.1); border-color: var(--d2s-color-accent); transform: translateY(-2px); }
.d2s-mega-card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  background: #f2f5f4;
  position: relative;
}
.d2s-mega-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.d2s-mega-card:hover .d2s-mega-card-img img { transform: scale(1.05); }
.d2s-mega-card-img-fallback { font-size: 22px; font-weight: 700; color: var(--d2s-color-accent); }
.d2s-mega-card-title { font-size: 12.5px; font-weight: 700; color: #172321; line-height: 1.3; }
.d2s-mega-card:hover .d2s-mega-card-title { color: var(--d2s-color-primary); }
.d2s-mega-all-link { display: flex; flex-direction: row; align-items: baseline; gap: 8px; text-align: left; width: auto; grid-column: 1 / -1; }

.d2s-mega-promo { border-radius: 12px; overflow: hidden; }
.d2s-mega-promo-img {
  height: 100%;
  min-height: 260px;
  background: #eaf5f2 center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  position: relative;
}
.d2s-mega-promo-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,83,76,0.05) 0%, rgba(8,83,76,0.75) 100%); }
.d2s-mega-promo-copy { position: relative; color: #fff; }
.d2s-mega-promo-eyebrow { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; margin-bottom: 6px; }
.d2s-mega-promo-copy h4 { margin: 0 0 6px; font-size: 19px; font-weight: 800; line-height: 1.2; }
.d2s-mega-promo-copy p { margin: 0 0 14px; font-size: 12.5px; opacity: 0.9; }
.d2s-mega-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  color: var(--d2s-color-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.14s ease, transform 0.14s ease;
}
.d2s-mega-promo-cta:hover { background: var(--d2s-color-gold); color: #172321; transform: translateX(1px); }

@media (max-width: 1120px) {
  .d2s-mega-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .d2s-mega-promo { display: none; }
  .d2s-mega-pane-body { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .d2s-category-panel { max-width: 720px; grid-template-columns: 215px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .d2s-category-panel { position: fixed; top: var(--d2s-mobile-header-height, 110px); left: 12px; right: 12px; width: auto; max-height: calc(100vh - 130px); min-height: 0; grid-template-columns: 1fr; overflow: auto; }
  .d2s-mega-category-list { display: flex; gap: 6px; border-right: 0; border-bottom: 1px solid #edf1f1; max-height: none; overflow-x: auto; padding: 8px; }
  .d2s-mega-category-tab { min-width: max-content; width: auto; padding: 7px 9px; border-left: 0; }
  .d2s-mega-category-tab img { width: 26px; height: 26px; flex-basis: 26px; }
  .d2s-mega-tab-arrow { display: none; }
  .d2s-mega-category-content { padding: 15px; }
  .d2s-mega-pane-head h3 { font-size: 17px; }
  .d2s-mega-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .d2s-mega-pane-body { padding-top: 10px; }
}


/* ---------- Footer Trust Bar ---------- */
.d2s-footer-trustbar{border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.04);color:#fff;}
.d2s-footer-trustbar-inner{max-width:1320px;margin:0 auto;padding:18px 16px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.55fr) minmax(170px,.65fr);gap:22px;align-items:start;}
.d2s-footer-trust-group h3{margin:0 0 12px;font-size:14px;font-weight:700;line-height:1.2;color:#fff;letter-spacing:.01em;text-transform:none;}
.d2s-footer-payments{min-width:0;}
.d2s-payment-list,.d2s-security-list,.d2s-social-list{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
/* Payment methods — premium marketplace presentation. Pure HTML/CSS, no image assets. */
.d2s-payment-list{gap:5px;flex-wrap:nowrap;min-width:0;}
.d2s-payment-list--image{display:block;width:100%;min-width:0;overflow:visible;}
.d2s-payment-list--image img{display:block;width:auto;height:auto;max-width:100%;max-height:36px;}
@media (max-width:768px){.d2s-payment-list--image img{max-height:30px;}}




.d2s-payment-visa .d2s-payment-mark{font-size:12px;font-style:italic;letter-spacing:-.4px;}

.d2s-payment-apple-pay .d2s-payment-mark{font-size:10px;font-weight:700;letter-spacing:-.45px;}


.d2s-payment-jcb .d2s-payment-mark{font-size:9px;font-weight:850;letter-spacing:.1px;padding:3px 4px;border-radius:2px;background:linear-gradient(90deg,rgba(32,91,189,.7),rgba(229,39,74,.7),rgba(35,151,95,.7));}
.d2s-payment-mc-mark{position:relative;width:22px;height:15px;display:block;}
.d2s-payment-mc-mark i,.d2s-payment-mc-mark b{position:absolute;top:1px;width:14px;height:14px;border-radius:50%;display:block;}
.d2s-payment-mc-mark i{left:1px;background:#ef3340;}
.d2s-payment-mc-mark b{right:1px;background:#f7a800;mix-blend-mode:screen;}
.d2s-payment-mc-mark:after{content:"mastercard";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);font-size:3.5px;font-weight:800;letter-spacing:.1px;color:rgba(255,255,255,.72);text-transform:lowercase;}
.d2s-security-list{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;min-width:0;}
.d2s-security-card{min-width:0;flex:0 1 142px;width:142px;min-height:38px;height:38px;padding:5px 6px;border:2px solid rgba(255,255,255,.18);border-radius:7px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));display:flex;align-items:center;gap:5px;color:#fff;position:relative;overflow:hidden;transition:transform .16s ease,border-color .16s ease,background .16s ease;}
.d2s-security-card:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:#F2BC10;opacity:.9;}
.d2s-security-card:hover{transform:translateY(-1px);border-color:rgba(242,188,16,.42);background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));}
.d2s-security-icon{width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:rgba(242,188,16,.13);border:1px solid rgba(242,188,16,.34);display:inline-flex;align-items:center;justify-content:center;color:#F2BC10;}
.d2s-security-icon svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.d2s-security-copy{display:flex;flex-direction:column;gap:1px;min-width:0;}
.d2s-security-copy strong{font-size:11px;font-weight:750;line-height:1.1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d2s-security-copy small{font-size:8px;font-weight:500;line-height:1.1;color:rgba(255,255,255,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (min-width:769px){.d2s-security-copy strong{font-size:12px;}.d2s-security-copy small{font-size:9px;}}
.d2s-social-list{gap:5px;flex-wrap:nowrap;}.d2s-social-link{font-size:15px;font-weight:800;transition:transform .15s ease,opacity .15s ease,background .15s ease,border-color .15s ease;}
.d2s-social-link:hover{transform:translateY(-2px);opacity:.95;color:#fff;background:rgba(255,255,255,.08);border-color:rgba(242,188,16,.35);}.d2s-social-link span{display:block;}.d2s-social-link.d2s-social-linkedin span{font-size:10px;}.d2s-social-link{position:relative;}.d2s-social-link img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;border:0;padding:0;margin:0;z-index:2;}.d2s-social-link span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}.d2s-social-link.d2s-social-has-image{overflow:hidden;}.d2s-social-link.d2s-social-has-image img{border-radius:3px;}
@media (max-width: 1100px){.d2s-footer-trustbar-inner{grid-template-columns:1fr 1fr;gap:22px;}.d2s-footer-social{grid-column:1/-1;}}
@media (max-width: 768px){.d2s-footer-social{grid-column:auto;}.d2s-security-icon{width:28px;height:28px;flex-basis:28px;}.d2s-security-copy strong{font-size:11px;}.d2s-security-copy small{font-size:8px;}.d2s-social-link{flex-basis:30px;}}


/* ---------- Footer Trust Bar — mobile viewport overflow fix (v1.30.97) ---------- */
@media (max-width: 768px){
  .d2s-footer-trustbar,
  .d2s-footer-trustbar-inner,
  .d2s-footer-trust-group,
  .d2s-footer-payments,
  .d2s-footer-security,
  .d2s-footer-social{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .d2s-footer-trustbar-inner{
  grid-template-columns:1fr;
  padding:18px 16px;
  gap:20px;
  overflow:visible;
}
  .d2s-payment-list{
  gap:5px;
  width:100%;
  max-width:100%;
  min-width:0;
  flex-wrap:wrap;
  overflow:visible;
}
  .d2s-payment-badge{
  width:48px;
  min-width:48px;
  height:30px;
  flex:0 0 48px;
  max-width:48px;
}
  .d2s-security-list{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:7px;
  width:100%;
  max-width:100%;
  min-width:0;
}
  .d2s-security-card{
  width:100%;
  flex:1 1 auto;
  min-height:54px;
  height:auto;
  padding:8px 9px;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
  .d2s-security-copy,
  .d2s-security-copy strong,
  .d2s-security-copy small{min-width:0;max-width:100%;}
  .d2s-social-list{
    width:100%;
    max-width:100%;
    min-width:0;
    flex-wrap:wrap;
    overflow:visible;
  }
}

/* ---------- Footer Payment Silver Card Finish (v1.30.120) + Security Restored ---------- */
.d2s-payment-badge{
  position:relative;
  width:50px;
  height:31px;
  min-width:50px;
  padding:0 4px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.20);
  border-radius:7px;
  background:linear-gradient(145deg,#f7f9fa 0%,#e5eaec 55%,#d7dfe1 100%);
  color:#123f3c;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  line-height:1;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 3px 10px rgba(0,0,0,.14);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
  border-color:rgba(255,255,255,.55);
}
.d2s-payment-badge:before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  bottom:5px;
  width:2px;
  border-radius:0 2px 2px 0;
  background:#0f766e;
  opacity:.8;
}
.d2s-payment-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:-.15px;
  color:#123f3c;
}
.d2s-payment-amex .d2s-payment-mark{
  font-size:8px;
  letter-spacing:.15px;
  padding:4px 3px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:2px;
  background:rgba(30,145,255,.08);
  border-color:#1261a0;
  color:#1261a0;
}
.d2s-payment-stripe .d2s-payment-mark{
  font-size:11px;
  font-weight:800;
  letter-spacing:-.45px;
  color:#5b45c7;
}
.d2s-payment-discover .d2s-payment-mark{
  font-size:7px;
  letter-spacing:-.15px;
  color:#171717;
}
.d2s-payment-badge:hover{
  transform:translateY(-2px);
  border-color:rgba(15,118,110,.45);
  background:linear-gradient(145deg,#ffffff 0%,#edf1f2 55%,#dce3e5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 6px 14px rgba(0,0,0,.17);
}
@media (max-width:768px){
  .d2s-payment-badge{background:linear-gradient(145deg,#f7f9fa 0%,#e5eaec 55%,#d7dfe1 100%);}
}

/* ---------- Back to top (site-wide floating button) ---------- */
.d2s-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 24px;
	z-index: 900;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--d2s-color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(8, 83, 76, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.d2s-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.d2s-back-to-top:hover {
	background: var(--d2s-color-accent);
}

@media (max-width: 1024px) {
	.d2s-back-to-top {
		bottom: 74px;
		right: 14px;
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================
   Mobile "Shop by Category" drawer (two-panel menu) — opened
   by the header hamburger / bottom-nav
   "Categories" tab. See base.js for the shared open/close toggle
   (body.d2s-mobile-menu-open) and template-parts/header/mobile-category-menu.php
   for the markup this styles.
   ========================================================== */
.d2s-mobile-catmenu-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 100000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.d2s-mobile-catmenu {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(86vw, 360px);
	background: #fff;
	z-index: 100001;
	box-shadow: 8px 0 30px rgba(0, 0, 0, 0.15);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	flex-direction: column;
}
body.d2s-mobile-menu-open {
	overflow: hidden;
}
body.d2s-mobile-menu-open .d2s-mobile-catmenu-backdrop {
	display: block;
	opacity: 1;
	pointer-events: auto;
}
body.d2s-mobile-menu-open .d2s-mobile-catmenu {
	display: flex;
	transform: translateX(0);
}
.d2s-mobile-catmenu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--d2s-color-border);
	font-size: 15px;
	font-weight: 700;
	color: var(--d2s-color-text);
	flex-shrink: 0;
}
.d2s-mobile-catmenu-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f2f5f4;
	color: var(--d2s-color-text);
	cursor: pointer;
}
.d2s-mobile-catmenu-body {
	display: flex;
	flex: 1;
	min-height: 0;
}
.d2s-mobile-catmenu-left {
	width: 96px;
	flex-shrink: 0;
	overflow-y: auto;
	background: #f7f9f8;
	border-right: 1px solid var(--d2s-color-border);
}
.d2s-mobile-catmenu-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 12px 6px;
	border: 0;
	border-left: 3px solid transparent;
	background: none;
	text-align: center;
	cursor: pointer;
	color: var(--d2s-color-text-muted);
}
.d2s-mobile-catmenu-tab.is-active {
	background: #fff;
	border-left-color: var(--d2s-color-primary);
	color: var(--d2s-color-primary);
}
.d2s-mobile-catmenu-tab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--d2s-color-border);
}
.d2s-mobile-catmenu-tab.is-active .d2s-mobile-catmenu-tab-icon {
	border-color: var(--d2s-color-primary);
}
.d2s-mobile-catmenu-tab-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.d2s-mobile-catmenu-tab-fallback {
	font-size: 14px;
	font-weight: 700;
	color: var(--d2s-color-accent);
}
.d2s-mobile-catmenu-tab-label {
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.25;
}
.d2s-mobile-catmenu-tab.is-active .d2s-mobile-catmenu-tab-label {
	font-weight: 700;
}
.d2s-mobile-catmenu-right {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	padding: 14px 16px 24px;
}
.d2s-mobile-catmenu-pane {
	display: none;
}
.d2s-mobile-catmenu-pane.is-active {
	display: block;
}
.d2s-mobile-catmenu-viewall {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--d2s-color-primary);
	margin-bottom: 14px;
}
.d2s-mobile-catmenu-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.d2s-mobile-catmenu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}
.d2s-mobile-catmenu-item-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 9px;
	overflow: hidden;
	background: #f2f5f4;
	border: 1px solid #e8ece9;
}
.d2s-mobile-catmenu-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.d2s-mobile-catmenu-item-fallback {
	font-size: 16px;
	font-weight: 700;
	color: var(--d2s-color-accent);
}
.d2s-mobile-catmenu-item-label {
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--d2s-color-text);
}
@media (min-width: 1025px) {
	.d2s-mobile-catmenu,
	.d2s-mobile-catmenu-backdrop {
		display: none !important;
	}
}