/* ============================================================================
   dss-my-account.css  —  STANDALONE
   ----------------------------------------------------------------------------
   WooCommerce "My Account" page styles for DSS_AU.

   - Partner file: dss-my-account.js (same folder). No other dependencies.
   - Enqueued by page-my-account.php. Edit freely — no build step, no Vite.
   - Isolation: EVERY selector is prefixed `html body .dss-account-page` and
     EVERY declaration carries !important, so global/theme/plugin CSS cannot
     override these rules and these rules cannot leak outside the page.
   - All design tokens live as CSS variables on the wrapper (never :root) —
     change colors/radii/fonts at the top of this file.
   - Desktop styles are the default; everything mobile lives inside the
     single  @media (max-width: 768px)  block near the end.
   ========================================================================== */

/* ==========================================================================
   0. Design tokens (scoped to the wrapper — never :root)
   ========================================================================== */
html body .dss-account-page {
	--dss-acc-yellow: #ffd623 !important;
	--dss-acc-black: #141414 !important;
	--dss-acc-ink: #1c1b18 !important;
	--dss-acc-bg: #f2f0e9 !important;
	--dss-acc-card: #ffffff !important;
	--dss-acc-field: #f5f2ea !important;
	--dss-acc-line: #e6e2d6 !important;
	--dss-acc-muted: #79766e !important;
	--dss-acc-red: #e0312d !important;
	--dss-acc-radius: 18px !important;
	--dss-acc-radius-field: 14px !important;
	--dss-acc-font-display: Impact, 'Anton', 'Haettenschweiler', 'Arial Black', sans-serif !important;
	--dss-acc-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace !important;
	--dss-acc-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
	--dss-acc-spring: cubic-bezier(.34, 1.56, .64, 1) !important;
}

/* ==========================================================================
   1. Page shell
   ========================================================================== */
html body .dss-account-page {
	background: var(--dss-acc-bg) !important;
	font-family: var(--dss-acc-font-body) !important;
	color: var(--dss-acc-ink) !important;
	margin: 0 !important;
	padding: 0 0 72px 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	overflow-x: clip !important;
}
html body .dss-account-page *,
html body .dss-account-page *::before,
html body .dss-account-page *::after {
	box-sizing: border-box !important;
}
/* Hazard stripes ----------------------------------------------------------- */
html body .dss-account-page .dss-acc-hazard {
	height: 16px !important;
	width: 100% !important;
 
	display: block !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}


@media(max-width:768px){

	html body .dss-account-page .dss-acc-hazard {
	 
	background: repeating-linear-gradient(
		-45deg,
		var(--dss-acc-black) 0 17px,
		var(--dss-acc-yellow) 17px 34px
	) !important;
 
}

/* Hazard stripes ----------------------------------------------------------- */
html body .dss-account-page .dss-acc-hazard {
 
	/* display: none !important; */
	 
}

}




html body .dss-account-page .dss-acc-hazard--bottom {
	display: none !important; /* mobile only — revealed in the media query */
	margin-top: 56px !important;
}

/* ==========================================================================
   2. Desktop page header (eyebrow / display title / yellow rule)
   ========================================================================== */
html body .dss-account-page .dss-acc-head {
	text-align: center !important;
	padding: 64px 24px 12px !important;
	margin: 0 !important;
}
html body .dss-account-page .dss-acc-eyebrow {
	font-family: var(--dss-acc-font-mono) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .42em !important;
	text-transform: uppercase !important;
	color: var(--dss-acc-muted) !important;
	margin: 0 0 18px 0 !important;
	padding: 0 !important;
}
html body .dss-account-page .dss-acc-title {
	font-family: var(--dss-acc-font-display) !important;
	font-stretch: condensed !important;
	/* font-weight: 900 !important; */
	font-size: clamp(32px, 6.5vw, 52px) !important;
	line-height: .95 !important;
	letter-spacing: .005em !important;
	text-transform: uppercase !important;
	color: var(--dss-acc-black) !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body .dss-account-page .dss-acc-rule {
	display: none !important;
	width: 96px !important;
	height: 5px !important;
	border-radius: 99px !important;
	background: var(--dss-acc-yellow) !important;
	margin: 0px auto 0 !important;
}

/* ==========================================================================
   3. WooCommerce notices
   ========================================================================== */
html body .dss-account-page .woocommerce-notices-wrapper:empty {
	display: none !important;
}
html body .dss-account-page .woocommerce-notices-wrapper {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 18px 24px 0 !important;
}
html body .dss-account-page .woocommerce-error,
html body .dss-account-page .woocommerce-message,
html body .dss-account-page .woocommerce-info {
	list-style: none !important;
	background: var(--dss-acc-card) !important;
	border: 1px solid var(--dss-acc-line) !important;
	border-left: 6px solid var(--dss-acc-yellow) !important;
	border-radius: var(--dss-acc-radius-field) !important;
	box-shadow: 0 10px 28px rgba(20, 20, 20, .07) !important;
	color: var(--dss-acc-ink) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	margin: 0 0 14px 0 !important;
	padding: 16px 20px !important;
}
html body .dss-account-page .woocommerce-error {
	border-left-color: var(--dss-acc-red) !important;
}
html body .dss-account-page .woocommerce-error li {
	list-style: none !important;
	margin: 4px 0 !important;
	padding: 0 !important;
}
html body .dss-account-page .woocommerce-error a,
html body .dss-account-page .woocommerce-message a,
html body .dss-account-page .woocommerce-info a {
	color: var(--dss-acc-black) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   4. Login / Register cards (#customer_login)
   ========================================================================== */
html body .dss-account-page .dss-acc-body {
	max-width: 1200px !important;
	margin: 36px auto 0 !important;
	padding: 0 24px !important;
}
html body .dss-account-page #customer_login {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 36px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
html body .dss-account-page #customer_login::before,
html body .dss-account-page #customer_login::after {
	content: none !important;
}
html body .dss-account-page #customer_login .u-column1,
html body .dss-account-page #customer_login .u-column2 {
	position: relative !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	background: var(--dss-acc-card) !important;
	border-radius: var(--dss-acc-radius) !important;
	box-shadow: 0 18px 44px rgba(20, 20, 20, .08) !important;
	padding: 44px 44px 48px !important;
	margin: 0 !important;
	overflow: hidden !important;
	animation: dssAccCardIn .45s var(--dss-acc-spring) both !important;
}
/* Yellow top bar on every card */
html body .dss-account-page #customer_login .u-column1::before,
html body .dss-account-page #customer_login .u-column2::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 7px !important;
	background: var(--dss-acc-yellow) !important;
	border-radius: var(--dss-acc-radius) var(--dss-acc-radius) 0 0 !important;
}
@keyframes dssAccCardIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Card headings (LOGIN / REGISTER) with icon chips -------------------------- */
html body .dss-account-page #customer_login h2 {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	/* font-family: var(--dss-acc-font-display) !important; */
	font-stretch: condensed !important;
	font-size: 34px !important;
	/* font-weight: 900 !important; */
	line-height: 1 !important;
	letter-spacing: .01em !important;
	text-transform: uppercase !important;
	color: var(--dss-acc-black) !important;
	margin: 0 0 26px 0 !important;
	padding: 0 0 26px 0 !important;
	border-bottom: 1px solid var(--dss-acc-line) !important;
}
html body .dss-account-page #customer_login h2::before {
	content: '' !important;
	flex: 0 0 auto !important;
	width: 52px !important;
	height: 52px !important;
	border-radius: 16px !important;
	background-color: var(--dss-acc-black) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 21c0-3.9 3.1-7 7-7s7 3.1 7 7'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 26px 26px !important;
}
html body .dss-account-page #customer_login .u-column2 h2::before {
	background-color: var(--dss-acc-yellow) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 21c0-3.9 3.1-7 7-7s7 3.1 7 7'/%3E%3Cpath d='M19 5v6'/%3E%3Cpath d='M16 8h6'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   5. Form rows, labels, inputs
   (scoped to .woocommerce so the lost-password endpoint inherits the look)
   ========================================================================== */
html body .dss-account-page .woocommerce form .form-row,
html body .dss-account-page .woocommerce form .woocommerce-form-row {
	width: 100% !important;
	float: none !important;
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
	display: block !important;
}
html body .dss-account-page .woocommerce form label {
	display: block !important;
	font-family: var(--dss-acc-font-mono) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
	color: var(--dss-acc-ink) !important;
	margin: 0 0 12px 0 !important;
	line-height: 1.4 !important;
}
html body .dss-account-page .woocommerce form label .required {
	color: var(--dss-acc-red) !important;
	text-decoration: none !important;
	border: 0 !important;
}
html body .dss-account-page .woocommerce form .input-text {
	display: block !important;
	width: 100% !important;
	height: 58px !important;
	background: var(--dss-acc-field) !important;
	border: 1.5px solid var(--dss-acc-line) !important;
	border-radius: var(--dss-acc-radius-field) !important;
	padding: 0 20px !important;
	margin: 0 !important;
	font-family: var(--dss-acc-font-body) !important;
	font-size: 16px !important;
	color: var(--dss-acc-ink) !important;
	line-height: normal !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
html body .dss-account-page .woocommerce form .input-text:focus {
	border-color: var(--dss-acc-black) !important;
	background: #fffdf4 !important;
	box-shadow: 0 0 0 4px rgba(255, 214, 35, .38) !important;
}
html body .dss-account-page .woocommerce form .input-text:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--dss-acc-field) inset !important;
	-webkit-text-fill-color: var(--dss-acc-ink) !important;
}

/* Password field + show/hide eye ------------------------------------------- */
html body .dss-account-page .woocommerce form .password-input {
	position: relative !important;
	display: block !important;
	width: 100% !important;
}
html body .dss-account-page .woocommerce form .password-input .input-text {
	padding-right: 60px !important;
}
html body .dss-account-page .woocommerce form .show-password-input {
	position: absolute !important;
	top: 50% !important;
	right: 10px !important;
	transform: translateY(-50%) !important;
	width: 42px !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 12px !important;
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379766e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 24px 24px !important;
	cursor: pointer !important;
	outline-offset: 2px !important;
}
html body .dss-account-page .woocommerce form .show-password-input::before,
html body .dss-account-page .woocommerce form .show-password-input::after {
	content: none !important;
}
html body .dss-account-page .woocommerce form .show-password-input:hover {
	background-color: rgba(20, 20, 20, .06) !important;
}
html body .dss-account-page .woocommerce form .show-password-input.dss-acc-pw-on {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E") !important;
}

/* Remember-me custom checkbox ----------------------------------------------- */
html body .dss-account-page .woocommerce form .woocommerce-form-login__rememberme {
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin: 1rem 0 0 1rem !important;
	cursor: pointer !important;
	user-select: none !important;
}
html body .dss-account-page .woocommerce form .woocommerce-form__input-checkbox {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 26px !important;
	height: 26px !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	background: var(--dss-acc-card) !important;
	border: 1.5px solid var(--dss-acc-line) !important;
	border-radius: 9px !important;
	cursor: pointer !important;
	position: relative !important;
	transition: background-color .15s ease, border-color .15s ease, transform .15s var(--dss-acc-spring) !important;
}
html body .dss-account-page .woocommerce form .woocommerce-form__input-checkbox:checked {
	background-color: var(--dss-acc-yellow) !important;
	border-color: var(--dss-acc-black) !important;
	transform: scale(1.05) !important;
}
html body .dss-account-page .woocommerce form .woocommerce-form__input-checkbox:checked::after {
	content: '' !important;
	position: absolute !important;
	left: 8px !important;
	top: 3.5px !important;
	width: 7px !important;
	height: 13px !important;
	border: solid var(--dss-acc-black) !important;
	border-width: 0 2.5px 2.5px 0 !important;
	transform: rotate(43deg) !important;
}
html body .dss-account-page .woocommerce form .woocommerce-form__input-checkbox:focus-visible {
	outline: 3px solid rgba(255, 214, 35, .8) !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   6. Buttons + lost-password link
   ========================================================================== */
html body .dss-account-page .woocommerce form button[type="submit"],
html body .dss-account-page .woocommerce form .woocommerce-button.button {
	display: inline-block !important;
	background: var(--dss-acc-yellow) !important;
	color: var(--dss-acc-black) !important;
	/* font-family: var(--dss-acc-font-display) !important; */
	 
	font-size: 1rem !important;
	font-weight: normal !important;
	letter-spacing: .06em !important;
	 
	line-height: 1 !important;
	/* border: 2px solid var(--dss-acc-black) !important; */
	border-radius: 999px !important;
	padding: 20px 48px !important;
	margin: 0 !important;
	cursor: pointer !important;
	box-shadow: 0 14px 34px rgba(255, 214, 35, .5) !important;
	transition: transform .18s var(--dss-acc-spring), box-shadow .18s ease, background-color .18s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	text-decoration: none !important;
}
html body .dss-account-page .woocommerce form button[type="submit"]:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 18px 40px rgba(255, 214, 35, .62) !important;
	background: #ffdf52 !important;
}
html body .dss-account-page .woocommerce form button[type="submit"]:active {
	transform: translateY(0) scale(.98) !important;
	box-shadow: 0 8px 20px rgba(255, 214, 35, .45) !important;
}
html body .dss-account-page .woocommerce form button[type="submit"]:focus-visible {
	outline: 3px solid var(--dss-acc-black) !important;
	outline-offset: 3px !important;
}

/* JS-built controls row (remember me / lost password / submit) -------------- */
html body .dss-account-page .dss-acc-controls {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	row-gap: 26px !important;
	margin: 6px 0 0 0 !important;
}
html body .dss-account-page .dss-acc-controls .woocommerce-form-login__rememberme {
	flex: 0 0 100% !important;
	order: 1 !important;
}
html body .dss-account-page .dss-acc-controls button[type="submit"] {
	order: 2 !important;
}
html body .dss-account-page .dss-acc-controls .dss-acc-lost {
	order: 3 !important;
	margin-left: 26px !important;
}
html body .dss-account-page .dss-acc-lost,
html body .dss-account-page .woocommerce form .lost_password a {
	font-family: var(--dss-acc-font-body) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--dss-acc-muted) !important;
	text-decoration: underline !important;
	text-underline-offset: 4px !important;
	transition: color .15s ease !important;
}
html body .dss-account-page .dss-acc-lost:hover,
html body .dss-account-page .woocommerce form .lost_password a:hover {
	color: var(--dss-acc-black) !important;
}
/* Leftover rows after the JS restructure (hidden inputs only) */
html body .dss-account-page .dss-acc-hiddenrow,
html body .dss-account-page .dss-acc-gone {
	display: none !important;
	margin: 0 !important;
}

/* Register card extras ------------------------------------------------------ */
html body .dss-account-page form.woocommerce-form-register > p:not(.form-row):not(.woocommerce-form-row) {
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: var(--dss-acc-muted) !important;
	margin: -6px 0 26px 0 !important;
	padding: 0 !important;
}
html body .dss-account-page .woocommerce-privacy-policy-text:empty,
html body .dss-account-page wc-order-attribution-inputs {
	display: none !important;
}
html body .dss-account-page .woocommerce-privacy-policy-text {
	font-size: 14px !important;
	color: var(--dss-acc-muted) !important;
	margin: 0 0 18px 0 !important;
}

/* Lost-password endpoint form (same visual family, single centered card) ---- */
html body .dss-account-page .woocommerce > form.woocommerce-ResetPassword {
	max-width: 580px !important;
	margin: 0 auto !important;
	background: var(--dss-acc-card) !important;
	border-radius: var(--dss-acc-radius) !important;
	box-shadow: 0 18px 44px rgba(20, 20, 20, .08) !important;
	border-top: 7px solid var(--dss-acc-yellow) !important;
	padding: 40px 44px 44px !important;
}
html body .dss-account-page .woocommerce > form.woocommerce-ResetPassword p:first-child {
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: var(--dss-acc-muted) !important;
	margin: 0 0 24px 0 !important;
}

/* ==========================================================================
   7. Trust badges
   ========================================================================== */
html body .dss-account-page .dss-acc-trust {
	list-style: none !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	max-width: 1200px !important;
	margin: 36px auto 0 !important;
	padding: 0 24px !important;
}
html body .dss-account-page .dss-acc-trust-item {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	background: #faf8f2 !important;
	border: 1px solid var(--dss-acc-line) !important;
	border-radius: var(--dss-acc-radius-field) !important;
	padding: 20px 24px !important;
	margin: 0 !important;
}
html body .dss-account-page .dss-acc-trust-badge {
	flex: 0 0 auto !important;
	width: 44px !important;
	height: 44px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
html body .dss-account-page .dss-acc-trust-badge svg {
	width: 44px !important;
	height: 44px !important;
	display: block !important;
}
html body .dss-account-page .dss-acc-trust-label {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--dss-acc-ink) !important;
	letter-spacing: .01em !important;
}
html body .dss-account-page .dss-acc-trust-short {
	display: none !important;
}
/* Mobile-only "trusted by" divider (JS-injected) */
html body .dss-account-page .dss-m-trusted {
	display: none !important;
}

/* ==========================================================================
   8. Logged-in dashboard — baseline styling so the account area
      stays on-brand (navigation + content cards)
   ========================================================================== */
html body .dss-account-page .woocommerce-MyAccount-navigation {
	float: none !important;
	width: 100% !important;
	background: var(--dss-acc-card) !important;
	border-radius: var(--dss-acc-radius) !important;
	box-shadow: 0 14px 36px rgba(20, 20, 20, .07) !important;
	border-top: 7px solid var(--dss-acc-yellow) !important;
	padding: 18px !important;
	margin: 0 0 28px 0 !important;
	align-self: start !important;
}
html body .dss-account-page .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body .dss-account-page .woocommerce-MyAccount-navigation li {
	margin: 4px 0 !important;
	padding: 0 !important;
}
html body .dss-account-page .woocommerce-MyAccount-navigation li a {
	display: block !important;
	padding: 14px 18px !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .02em !important;
	text-transform: uppercase !important;
	color: var(--dss-acc-ink) !important;
	text-decoration: none !important;
	transition: background-color .15s ease !important;
}
html body .dss-account-page .woocommerce-MyAccount-navigation li a:hover {
	background: var(--dss-acc-field) !important;
}
html body .dss-account-page .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--dss-acc-yellow) !important;
	color: var(--dss-acc-black) !important;
}
html body .dss-account-page .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	background: var(--dss-acc-card) !important;
	border-radius: var(--dss-acc-radius) !important;
	box-shadow: 0 14px 36px rgba(20, 20, 20, .07) !important;
	padding: 36px !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
}
html body .dss-account-page .woocommerce-MyAccount-content a {
	color: var(--dss-acc-black) !important;
	font-weight: 700 !important;
}
@media (min-width: 901px) {
	html body .dss-account-page .dss-acc-dashboard .woocommerce {
		display: grid !important;
		grid-template-columns: 300px 1fr !important;
		gap: 32px !important;
		align-items: start !important;
	}
	html body .dss-account-page .dss-acc-dashboard .woocommerce-MyAccount-navigation {
		margin: 0 !important;
	}
}

/* ==========================================================================
   9. Mobile-injected chrome (dark hero, tab switcher) — hidden on desktop
   ========================================================================== */
html body .dss-account-page .dss-m-hero,
html body .dss-account-page .dss-m-tabs {
	display: none !important;
}

/* ==========================================================================
   10. MOBILE ≤768px — desktop rules above stay completely untouched
   ========================================================================== */
@media (max-width: 768px) {
/* Bottom hazard stripe (mobile only, like the mockup) */
	html body .dss-account-page .dss-acc-hazard--bottom {
		display:none !important;
	}
	html body .dss-account-page {
		/* padding-bottom: 0 !important; */
	}

	/* Swap the desktop header for the injected dark hero */
	html body .dss-account-page .dss-acc-head {
		display: none !important;
	}
	html body .dss-account-page .dss-m-hero {
		display: block !important;
		background: #121212 !important;
		background-image: radial-gradient(520px 300px at 88% 22%, rgba(255, 214, 35, .16), transparent 70%) !important;
		color: #ffffff !important;
		padding: 30px 24px 52px !important;
	}
	html body .dss-account-page .dss-m-hero-brand {
		display: none !important;
		align-items: center !important;
		gap: 14px !important;
		margin: 0 0 44px 0 !important;
	}
	html body .dss-account-page .dss-m-hero-brand svg {
		width: 46px !important;
		height: 42px !important;
		display: block !important;
		flex: 0 0 auto !important;
	}
	html body .dss-account-page .dss-m-hero-wordmark {
		font-size: 21px !important;
		font-weight: 800 !important;
		line-height: 1.15 !important;
		letter-spacing: -.01em !important;
		color: #ffffff !important;
	}
	html body .dss-account-page .dss-m-hero-wordmark span {
		display: block !important;
		color: var(--dss-acc-yellow) !important;
	}
	html body .dss-account-page .dss-m-hero-title {
		font-family: var(--dss-acc-font-display) !important;
		font-stretch: condensed !important;
		font-size: clamp(56px, 16vw, 76px) !important;
		/* font-weight: 900 !important; */
		line-height: .92 !important;
		letter-spacing: .005em !important;
		text-transform: uppercase !important;
		color: #ffffff !important;
		margin: 0 0 18px 0 !important;
	}
	html body .dss-account-page .dss-m-hero-sub {
		font-size: 18px !important;
		line-height: 1.5 !important;
		color: rgba(255, 255, 255, .62) !important;
		margin: 0 !important;
	}

	/* Tab switcher pill */
	html body .dss-account-page .dss-m-tabs {
		display: flex !important;
		gap: 6px !important;
		background: var(--dss-acc-card) !important;
		border-radius: 22px !important;
		box-shadow: 0 12px 30px rgba(20, 20, 20, .08) !important;
		padding: 7px !important;
		margin: 24px 20px 0 !important;
	}
	html body .dss-account-page .dss-m-tab {
		flex: 1 1 0 !important;
		-webkit-appearance: none !important;
		appearance: none !important;
		border: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border-radius: 17px !important;
		padding: 17px 10px !important;
		/* font-family: var(--dss-acc-font-display) !important; */
		font-stretch: condensed !important;
		font-size: 19px !important;
		/* font-weight: 900 !important; */
		letter-spacing: .03em !important;
		color: var(--dss-acc-black) !important;
		cursor: pointer !important;
		transition: background-color .2s ease, color .2s ease, transform .2s var(--dss-acc-spring) !important;
	}
	html body .dss-account-page .dss-m-tab[aria-selected="true"] {
		background: var(--dss-acc-black) !important;
		color: var(--dss-acc-yellow) !important;
	}
	html body .dss-account-page .dss-m-tab:active {
		transform: scale(.97) !important;
	}
	html body .dss-account-page .dss-m-tab:focus-visible {
		outline: 3px solid var(--dss-acc-yellow) !important;
		outline-offset: 2px !important;
	}

	/* Body / cards become a single column */
	html body .dss-account-page .dss-acc-body {
		margin-top: 24px !important;
		padding: 0 20px !important;
	}
	html body .dss-account-page #customer_login {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	html body .dss-account-page #customer_login .u-column1,
	html body .dss-account-page #customer_login .u-column2 {
		padding: 34px 26px 38px !important;
	}
	/* Plain headings on mobile (no icon chip), like the mockup */
	html body .dss-account-page #customer_login h2 {
		font-size: 38px !important;
		border-bottom: 0 !important;
		padding-bottom: 0 !important;
		margin-bottom: 26px !important;
	}
	html body .dss-account-page #customer_login h2::before {
		content: none !important;
	}

	/* Tab-driven visibility (only when JS set a mode) */
	html body .dss-account-page[data-dss-mode="login"] #customer_login .u-column2 {
		display: none !important;
	}
	html body .dss-account-page[data-dss-mode="register"] #customer_login .u-column1 {
		display: none !important;
	}

	/* Controls row: remember-me left, lost-password right, full-width button */
	html body .dss-account-page .dss-acc-controls .woocommerce-form-login__rememberme {
		flex: 0 1 auto !important;
		order: 1 !important;
	}
	html body .dss-account-page .dss-acc-controls .dss-acc-lost {
		order: 2 !important;
		margin-left: auto !important;
	}
	html body .dss-account-page .dss-acc-controls button[type="submit"] {
		order: 3 !important;
		flex: 0 0 100% !important;
		width: 100% !important;
	}
	html body .dss-account-page .woocommerce form button[type="submit"] {
		display: block !important;
		width: 100% !important;
		padding: 22px 28px !important;
		font-size: 22px !important;
	}
	html body .dss-account-page .woocommerce form label {
		font-size: 12px !important;
		letter-spacing: .18em !important;
	}

	/* Trusted-by divider + compact 3-up badges */
	html body .dss-account-page .dss-m-trusted {
		display: flex !important;
		align-items: center !important;
		gap: 16px !important;
		margin: 44px 20px 0 !important;
		font-family: var(--dss-acc-font-mono) !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		letter-spacing: .28em !important;
		text-transform: uppercase !important;
		color: var(--dss-acc-muted) !important;
		white-space: nowrap !important;
	}
	html body .dss-account-page .dss-m-trusted::before,
	html body .dss-account-page .dss-m-trusted::after {
		content: '' !important;
		flex: 1 1 0 !important;
		height: 1px !important;
		background: var(--dss-acc-line) !important;
	}
	html body .dss-account-page .dss-acc-trust {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 14px !important;
		margin-top: 22px !important;
		padding: 0 20px !important;
	}
	html body .dss-account-page .dss-acc-trust-item {
		flex-direction: column !important;
		justify-content: center !important;
		text-align: center !important;
		gap: 12px !important;
		background: var(--dss-acc-card) !important;
		box-shadow: 0 10px 24px rgba(20, 20, 20, .06) !important;
		border: 0 !important;
		padding: 22px 10px !important;
	}
	html body .dss-account-page .dss-acc-trust-label {
		font-size: 15px !important;
	}
	html body .dss-account-page .dss-acc-trust-long {
		display: none !important;
	}
	html body .dss-account-page .dss-acc-trust-short {
		display: inline !important;
	}

	

	/* Lost-password card breathing room */
	html body .dss-account-page .woocommerce > form.woocommerce-ResetPassword {
		padding: 32px 24px 36px !important;
	}
	html body .dss-account-page .woocommerce-MyAccount-content {
		padding: 26px 22px !important;
	}
}

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html body .dss-account-page *,
	html body .dss-account-page *::before,
	html body .dss-account-page *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}