/* ==========================================================================
   J&P Bali — WooCommerce My Account restyle
   Scope: default WooCommerce My Account templates only (no custom logic).
   Design tokens: #050505 bg / #141414 card / #D4AF37 gold / #FFFFFF heading
   / #B3B3B3 body. Headings: Space Grotesk. Body: Inter.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
	--jnp-bg:#050505;
	--jnp-card:#141414;
	--jnp-card-alt:#1c1c1c;
	--jnp-gold:#D4AF37;
	--jnp-heading:#FFFFFF;
	--jnp-body:#B3B3B3;
	--jnp-border:rgba(212,175,55,0.18);
}

/* ---- Autofill fix (applies to EVERY input in the account area:
   login, register, edit-account, edit-address) ----
   Chrome/Safari/Edge force black text on a white/yellow background
   the moment a field is autofilled (saved username, saved password,
   saved address), completely ignoring the input's own "color" CSS.
   That's very likely the actual "text is still black" bug — typing
   fresh works fine because autofill hasn't kicked in yet, but a
   returning visitor with saved credentials hits this immediately.
   The box-shadow trick is the only reliable cross-browser override;
   a plain "color" or "background" rule does NOT beat autofill. */
.woocommerce-account input:-webkit-autofill,
.woocommerce-account input:-webkit-autofill:hover,
.woocommerce-account input:-webkit-autofill:focus,
.woocommerce-account input:-webkit-autofill:active{
	-webkit-text-fill-color:var(--jnp-heading) !important;
	-webkit-box-shadow:0 0 0px 1000px var(--jnp-bg) inset !important;
	box-shadow:0 0 0px 1000px var(--jnp-bg) inset !important;
	caret-color:var(--jnp-heading);
	transition:background-color 5000s ease-in-out 0s;
}

.woocommerce-account input,
.woocommerce-account textarea,
.woocommerce-account select{
	caret-color:var(--jnp-heading);
}

.woocommerce-account input::placeholder,
.woocommerce-account textarea::placeholder{
	color:var(--jnp-body);
	opacity:.6;
}

.woocommerce-account{
	background:var(--jnp-bg);
	padding-top:calc(var(--jnp-header-h, 88px) + 48px);
	padding-bottom:96px;
	overflow-x:hidden;
}

.woocommerce-account .entry-content,
.woocommerce-account .woocommerce{
	max-width:1100px;
	margin:0 auto;
	padding:0 24px;
	color:var(--jnp-body);
	font-family:'Inter',sans-serif;
}

/* ---- Layout: nav + content ---- */
.woocommerce-account .woocommerce{
	display:flex;
	flex-wrap:wrap;
	gap:32px;
	align-items:flex-start;
}

.woocommerce-MyAccount-navigation{
	flex:0 0 240px;
	background:var(--jnp-card);
	border:1px solid var(--jnp-border);
	border-radius:12px;
	padding:16px;
}

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

.woocommerce-MyAccount-navigation-link{
	margin:0 0 4px;
}

.woocommerce-MyAccount-navigation-link a{
	display:block;
	padding:12px 16px;
	border-radius:8px;
	color:var(--jnp-body);
	font-weight:500;
	font-size:14px;
	text-decoration:none;
	border-left:2px solid transparent;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}

.woocommerce-MyAccount-navigation-link a:hover{
	background:var(--jnp-card-alt);
	color:var(--jnp-heading);
}

.woocommerce-MyAccount-navigation-link--active a{
	background:var(--jnp-card-alt);
	color:var(--jnp-gold);
	border-left-color:var(--jnp-gold);
}

.woocommerce-MyAccount-content{
	flex:1 1 480px;
	background:var(--jnp-card);
	border:1px solid var(--jnp-border);
	border-radius:12px;
	padding:32px;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend{
	font-family:'Space Grotesk',sans-serif;
	font-weight:700;
	color:var(--jnp-heading);
	letter-spacing:.01em;
	margin-top:0;
}

.woocommerce-MyAccount-content p{
	color:var(--jnp-body);
	line-height:1.6;
}

.woocommerce-MyAccount-content a{
	color:var(--jnp-gold);
}

/* ---- Notices ---- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info{
	list-style:none;
	background:var(--jnp-card-alt);
	border:1px solid var(--jnp-border);
	border-left:3px solid var(--jnp-gold);
	color:var(--jnp-heading);
	padding:14px 18px;
	border-radius:8px;
	font-size:14px;
	margin:0 0 24px;
}

.woocommerce-error{ border-left-color:#c0392b; }

/* ---- Tables (Orders / Downloads) ----
   Two-column financial layout: label/product left, numeric value
   right — consistently, header and data alike, tbody and tfoot
   alike, so nothing drifts out of alignment with anything else. */
.woocommerce-account table.shop_table{
	width:100%;
	border-collapse:collapse;
	margin:0 0 8px;
	table-layout:fixed;
}

.woocommerce-account table.shop_table thead th{
	text-align:left;
	font-family:'Space Grotesk',sans-serif;
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--jnp-gold);
	border-bottom:1px solid var(--jnp-border);
	padding:12px 12px;
}

.woocommerce-account table.shop_table thead th:last-child{
	text-align:right;
}

.woocommerce-account table.shop_table tbody td{
	padding:14px 12px;
	border-bottom:1px solid rgba(255,255,255,0.06);
	color:var(--jnp-body);
	font-size:14px;
	text-align:left;
}

.woocommerce-account table.shop_table tbody td:last-child{
	text-align:right;
}

.woocommerce-account table.shop_table tbody tr:hover td{
	background:var(--jnp-card-alt);
}

/* Subtotal / Shipping / Payment method / Total rows on the single-
   order view live in <tfoot>, not <tbody> — the rule above never
   reached them, so they fell back to a much dimmer default color.
   th = label (left), td = value (right), matching tbody above so
   the right edge lines up across the whole table. */
.woocommerce-account table.shop_table tfoot th,
.woocommerce-account table.shop_table tfoot td{
	padding:14px 12px;
	border-bottom:1px solid rgba(255,255,255,0.06);
	color:var(--jnp-body);
	font-size:14px;
	font-weight:400;
}

.woocommerce-account table.shop_table tfoot th{
	text-align:left;
}

.woocommerce-account table.shop_table tfoot td{
	text-align:right;
}

/* WooCommerce wraps every price in .woocommerce-Price-amount, which
   carries its own color from the theme with enough specificity to
   beat a plain "td{color:...}" rule. Force it to inherit instead. */
.woocommerce-account table.shop_table .woocommerce-Price-amount,
.woocommerce-account table.shop_table .woocommerce-Price-amount bdi{
	color:inherit;
}

/* Target the actual Total row via WooCommerce's own class
   (order_total) instead of :last-child — Payment method can render
   after Total in this theme, so :last-child grabbed the wrong row. */
.woocommerce-account table.shop_table tfoot tr.order_total th,
.woocommerce-account table.shop_table tfoot tr.order_total td{
	border-bottom:none;
	color:var(--jnp-heading);
	font-weight:700;
	font-size:16px;
}

.woocommerce-account table.shop_table tfoot td strong{
	color:inherit;
	font-weight:inherit;
}

.woocommerce-account table.shop_table .woocommerce-shipping-contents{
	display:block;
	margin-top:4px;
	color:var(--jnp-body);
	opacity:.75;
	font-size:12px;
	text-align:right;
}

/* Order status pill */
.woocommerce-orders-table__cell-order-status mark,
.order-status{
	display:inline-block;
	padding:4px 12px;
	border-radius:999px;
	font-size:12px;
	font-weight:600;
	background:rgba(212,175,55,0.12);
	color:var(--jnp-gold);
	border:1px solid var(--jnp-border);
}

/* Order # and date on the single-order view ("Order #2603 was placed
   on... and is currently...") — WooCommerce wraps these in <mark>,
   left unstyled until now. Scoped to just these two so the
   .order-status pill above (also a <mark>) isn't touched. */
.woocommerce-account .c-account__col-content mark.order-number,
.woocommerce-account .c-account__col-content mark.order-date{
	background:none;
	color:var(--jnp-heading);
	font-weight:600;
	padding:0;
}

/* ---- Buttons (legacy selector kept as harmless fallback; the
   authoritative rule is the .woocommerce-account .button block
   further down, which wins on source order for real theme markup) ---- */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button,
.woocommerce-button{
	display:inline-block;
	background:var(--jnp-gold);
	color:#050505;
	font-family:'Inter',sans-serif;
	font-weight:600;
	font-size:14px;
	padding:11px 22px;
	border-radius:8px;
	border:1px solid var(--jnp-gold);
	text-decoration:none;
	cursor:pointer;
	transition:opacity .15s ease;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button.button:hover,
.woocommerce-MyAccount-content input.button:hover{
	opacity:.85;
}

.woocommerce-MyAccount-content .button.cancel,
.woocommerce-MyAccount-content a.button[href*="cancel"]{
	background:transparent;
	color:var(--jnp-body);
	border-color:var(--jnp-border);
}

/* ---- Forms (edit account / address / password) ---- */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account p.form-row{
	margin:0 0 18px;
}

.woocommerce-MyAccount-content label{
	display:block;
	font-size:13px;
	color:var(--jnp-body);
	margin-bottom:6px;
}

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea{
	width:100%;
	background:var(--jnp-bg);
	border:1px solid var(--jnp-border);
	color:var(--jnp-heading);
	font-family:'Inter',sans-serif;
	font-size:14px;
	padding:11px 14px;
	border-radius:8px;
	transition:border-color .15s ease;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus{
	outline:none;
	border-color:var(--jnp-gold);
}

/* ---- Address boxes ----
   NOTE: previously scoped to .woocommerce-MyAccount-content, which
   is dead on this theme (see below) — fixed to the real wrapper. */
.woocommerce-account .woocommerce-Addresses{
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}

.woocommerce-account .woocommerce-Address{
	flex:1 1 260px;
	background:var(--jnp-card-alt);
	border:1px solid var(--jnp-border);
	border-radius:10px;
	padding:20px;
}

.woocommerce-account .woocommerce-Address-title{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:12px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
	font-size:16px;
	margin:0;
}

.woocommerce-account .woocommerce-Address address{
	font-style:normal;
	color:var(--jnp-body);
	line-height:1.6;
	margin-bottom:16px;
}

/* ---- Order Tracking placeholder tab ---- */
.jnp-order-tracking-placeholder{
	text-align:left;
}

.jnp-order-tracking-placeholder p{
	max-width:520px;
}

.jnp-tracking-meta{
	color:var(--jnp-body);
	font-size:14px;
	margin:0 0 28px;
}

.jnp-tracking-meta strong{
	color:var(--jnp-heading);
}

/* JNE-style horizontal step tracker. Connecting line drawn behind
   the markers with a pseudo-element; each step is dot + label +
   short description. Collapses to a vertical list on mobile. */
.jnp-tracker{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	position:relative;
	margin:0 0 28px;
}

.jnp-tracker::before{
	content:"";
	position:absolute;
	top:18px;
	left:36px;
	right:36px;
	height:2px;
	background:var(--jnp-border);
	z-index:0;
}

.jnp-tracker__step{
	position:relative;
	z-index:1;
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding:0 6px;
}

.jnp-tracker__marker{
	width:36px;
	height:36px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:'Inter',sans-serif;
	font-weight:700;
	font-size:14px;
	margin-bottom:10px;
	background:var(--jnp-card);
	border:2px solid var(--jnp-border);
	color:var(--jnp-body);
	flex-shrink:0;
}

.jnp-tracker__step--done .jnp-tracker__marker{
	background:var(--jnp-gold);
	border-color:var(--jnp-gold);
	color:#050505;
}

.jnp-tracker__step--active .jnp-tracker__marker{
	background:var(--jnp-card-alt);
	border-color:var(--jnp-gold);
	color:var(--jnp-gold);
	box-shadow:0 0 0 4px rgba(212,175,55,0.12);
}

.jnp-tracker__label{
	font-family:'Space Grotesk',sans-serif;
	font-weight:700;
	font-size:13px;
	color:var(--jnp-body);
	margin-bottom:4px;
}

.jnp-tracker__step--done .jnp-tracker__label,
.jnp-tracker__step--active .jnp-tracker__label{
	color:var(--jnp-heading);
}

.jnp-tracker__desc{
	font-size:11px;
	color:var(--jnp-body);
	opacity:.75;
	line-height:1.4;
	max-width:130px;
}

.jnp-tracking-note{
	font-size:12px;
	color:var(--jnp-body);
	opacity:.7;
	border-top:1px solid var(--jnp-border);
	padding-top:16px;
	margin:0 0 16px;
	max-width:none;
}

@media (max-width:600px){
	.jnp-tracker{
		flex-direction:column;
		gap:20px;
	}
	.jnp-tracker::before{
		display:none;
	}
	.jnp-tracker__step{
		flex-direction:row;
		align-items:flex-start;
		text-align:left;
		gap:12px;
		padding:0;
	}
	.jnp-tracker__marker{
		margin-bottom:0;
	}
	.jnp-tracker__desc{
		max-width:none;
	}
}

.jnp-wa-cta{
	display:inline-block;
	margin-top:12px;
	background:var(--jnp-gold);
	color:#050505;
	font-weight:600;
	font-size:14px;
	padding:11px 22px;
	border-radius:8px;
	text-decoration:none;
}

/* ---- Logged-out Login / Register screen (.c-login) ----
   Moderno theme renders this with its own markup (c-login, c-form,
   c-button...) instead of .woocommerce-MyAccount-content, which only
   exists after login. Needs its own rule set entirely. ---- */

.woocommerce-account .c-login{
	max-width:460px;
	margin:0 auto;
	background:var(--jnp-card);
	border:1px solid var(--jnp-border);
	border-radius:12px;
	padding:32px;
	position:relative;
	box-sizing:border-box;
}

.woocommerce-account .c-login__form{
	display:none;
}
.woocommerce-account .c-login__form.c-login__form--active{
	display:block;
}

.woocommerce-account .c-login__header{
	font-family:'Space Grotesk',sans-serif;
	font-weight:700;
	font-size:22px;
	color:var(--jnp-heading);
	margin:0 0 20px;
}

.woocommerce-account .c-form .c-form__row{
	margin:0 0 18px;
}

.woocommerce-account .c-form label{
	display:block;
	font-size:13px;
	color:var(--jnp-body);
	margin-bottom:6px;
}

.woocommerce-account .c-form__input,
.woocommerce-account .c-form input[type="text"],
.woocommerce-account .c-form input[type="email"],
.woocommerce-account .c-form input[type="password"]{
	width:100%;
	background:var(--jnp-bg);
	border:1px solid var(--jnp-border);
	color:var(--jnp-heading);
	font-family:'Inter',sans-serif;
	font-size:14px;
	padding:11px 14px;
	border-radius:8px;
	transition:border-color .15s ease;
}

.woocommerce-account .c-form__input:focus,
.woocommerce-account .c-form input:focus{
	outline:none;
	border-color:var(--jnp-gold);
}

.woocommerce-account .show-password-input{
	color:var(--jnp-body);
}

.woocommerce-account .c-login__remember{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px 16px;
	font-size:13px;
	color:var(--jnp-body);
}

.woocommerce-account .c-login__remember label{
	margin:0;
	display:inline;
}

.woocommerce-account .c-login__lost-password-link{
	display:inline-block;
	margin-top:14px;
	font-size:13px;
	color:var(--jnp-gold);
	text-decoration:none;
	max-width:100%;
	word-break:break-word;
}

.woocommerce-account .c-button{
	display:inline-block;
	width:100%;
	background:var(--jnp-gold);
	color:#050505;
	font-family:'Inter',sans-serif;
	font-weight:600;
	font-size:14px;
	padding:13px 22px;
	border-radius:8px;
	border:1px solid var(--jnp-gold);
	text-align:center;
	cursor:pointer;
	transition:opacity .15s ease;
	margin-top:6px;
}

.woocommerce-account .c-button:hover{
	opacity:.85;
}

.woocommerce-account .c-login__register{
	display:inline-block;
	margin-top:20px;
	font-size:13px;
	color:var(--jnp-body);
}

.woocommerce-account .c-login__register.js-login-form-toggle{
	color:var(--jnp-gold);
	text-decoration:none;
	cursor:pointer;
	font-weight:600;
}

.woocommerce-account .woocommerce-privacy-policy-link{
	color:var(--jnp-body);
	text-decoration:underline;
}

@media (max-width:600px){
	.woocommerce-account .c-login{
		padding:24px;
		width:calc(100% - 16px);
	}
	.woocommerce-account .c-login__remember{
		justify-content:flex-start;
	}
	.woocommerce-account .c-form__row--inline,
	.woocommerce-account .c-login__remember,
	.woocommerce-account .c-login__lost-password-link{
		width:100%;
	}
}

/* ---- Actual theme dashboard markup (.c-account) ----
   Moderno does NOT use .woocommerce-MyAccount-content /
   .woocommerce-MyAccount-navigation as real wrapper classes —
   only as extra classes tacked onto <li> nav items. The real
   layout classes are c-account / c-account__col-menu /
   c-account__col-content. This is the block that actually
   controls what renders on /my-account/ after login. ---- */

.woocommerce-account .c-account{
	display:flex;
	flex-wrap:wrap;
	gap:32px;
	align-items:flex-start;
}

.woocommerce-account .c-account__col-menu{
	flex:0 0 240px;
	background:var(--jnp-card);
	border:1px solid var(--jnp-border);
	border-radius:12px;
	padding:16px;
}

.woocommerce-account .c-account__col-content{
	flex:1 1 480px;
	background:var(--jnp-card);
	border:1px solid var(--jnp-border);
	border-radius:12px;
	padding:32px;
	color:var(--jnp-body);
}

.woocommerce-account .c-account__col-content p{
	color:var(--jnp-body);
	line-height:1.6;
}

.woocommerce-account .c-account__col-content a{
	color:var(--jnp-gold);
}

.woocommerce-account .c-account__col-content a.jnp-wa-cta{
	color:#050505;
}

.woocommerce-account .c-account__user{
	display:flex;
	align-items:center;
	gap:12px;
	padding:4px 4px 16px;
	margin-bottom:12px;
	border-bottom:1px solid var(--jnp-border);
}

.woocommerce-account .c-account__user-icon img{
	border-radius:50%;
	display:block;
}

.woocommerce-account .c-account__user-text{
	color:var(--jnp-body);
	font-size:13px;
	line-height:1.4;
}

.woocommerce-account .c-account__user-name{
	color:var(--jnp-heading);
	font-weight:600;
	font-family:'Space Grotesk',sans-serif;
}

.woocommerce-account .c-account__navigation{
	list-style:none;
	margin:0;
	padding:0;
}

.woocommerce-account .c-account__navigation-item{
	margin:0 0 4px;
}

.woocommerce-account .c-account__navigation-link{
	display:block;
	padding:12px 16px;
	border-radius:8px;
	color:var(--jnp-body);
	font-weight:500;
	font-size:14px;
	text-decoration:none;
	border-left:2px solid transparent;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}

.woocommerce-account .c-account__navigation-link:hover{
	background:var(--jnp-card-alt);
	color:var(--jnp-heading);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--active .c-account__navigation-link{
	background:var(--jnp-card-alt);
	color:var(--jnp-gold);
	border-left-color:var(--jnp-gold);
}

/* Order Tracking placeholder tab sits inside .c-account__col-content here */
.woocommerce-account .c-account__col-content .jnp-order-tracking-placeholder h3{
	color:var(--jnp-heading);
	font-family:'Space Grotesk',sans-serif;
}

/* ---- Catch-all: any WooCommerce account form, any sub-page ----
   Edit Account / Edit Address / Register etc. use plain standard
   WooCommerce markup (no theme BEM wrapper like c-form or c-login),
   so scope directly off element type + .woocommerce-account body
   class instead of guessing a wrapper class per page. ---- */

.woocommerce-account fieldset{
	border:none;
	padding:0;
	margin:24px 0 0;
}

.woocommerce-account legend,
.woocommerce-account h2,
.woocommerce-account h3{
	font-family:'Space Grotesk',sans-serif;
	font-weight:700;
	color:var(--jnp-heading);
	letter-spacing:.01em;
}

.woocommerce-account label{
	display:block;
	font-size:12px;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--jnp-body);
	margin-bottom:6px;
}

.woocommerce-account .form-row,
.woocommerce-account .woocommerce-form-row,
.woocommerce-account p.form-row{
	margin:0 0 18px;
}

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="number"],
.woocommerce-account select,
.woocommerce-account textarea{
	width:100%;
	background:var(--jnp-bg);
	border:1px solid var(--jnp-border);
	color:var(--jnp-heading);
	font-family:'Inter',sans-serif;
	font-size:14px;
	padding:11px 14px;
	border-radius:8px;
	transition:border-color .15s ease;
	accent-color:var(--jnp-gold);
}

.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus{
	outline:none;
	border-color:var(--jnp-gold);
}

.woocommerce-account .description,
.woocommerce-account small{
	display:block;
	margin-top:6px;
	font-size:12px;
	color:var(--jnp-body);
	opacity:.75;
}

.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"],
.woocommerce-account .woocommerce-Button{
	display:inline-block;
	background:var(--jnp-gold);
	color:#050505;
	font-family:'Inter',sans-serif;
	font-weight:600;
	font-size:14px;
	padding:12px 24px;
	border-radius:8px;
	border:1px solid var(--jnp-gold);
	cursor:pointer;
	transition:opacity .15s ease;
}

.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover{
	opacity:.85;
}

/* Any WooCommerce ".button"-classed link (Orders "View", Downloads,
   pay/cancel actions, pagination, etc.) — this keeps colliding with
   the generic "links are gold" rule above since these buttons also
   have a gold background. Settling it here for good with higher
   specificity so it doesn't need re-fixing per page. */
.woocommerce-account a.button,
.woocommerce-account .button{
	display:inline-block;
	background:var(--jnp-gold);
	color:#050505;
	font-family:'Inter',sans-serif;
	font-weight:600;
	font-size:13px;
	padding:9px 20px;
	border-radius:8px;
	border:1px solid var(--jnp-gold);
	text-decoration:none;
	cursor:pointer;
	transition:opacity .15s ease;
}

.woocommerce-account a.button:hover,
.woocommerce-account .button:hover{
	opacity:.85;
	color:#050505;
}

.woocommerce-account a.button.cancel,
.woocommerce-account .button.cancel{
	background:transparent;
	color:var(--jnp-body);
	border-color:var(--jnp-border);
}

/* ---- Responsive ---- */
@media (max-width:782px){
	.woocommerce-account .woocommerce{
		flex-direction:column;
	}
	.woocommerce-account .c-account{
		flex-direction:column;
	}
	.woocommerce-account .c-account__col-menu{
		flex:1 1 auto;
		width:100%;
	}
	.woocommerce-account .c-account__navigation{
		display:flex;
		flex-wrap:wrap;
		gap:6px;
	}
	.woocommerce-account .c-account__navigation-item{
		margin:0;
	}
	.woocommerce-account .c-account__col-content{
		width:100%;
		padding:24px;
	}
	.woocommerce-MyAccount-navigation{
		flex:1 1 auto;
		width:100%;
	}
	.woocommerce-MyAccount-navigation ul{
		display:flex;
		flex-wrap:wrap;
		gap:6px;
	}
	.woocommerce-MyAccount-navigation-link{
		margin:0;
	}
	.woocommerce-MyAccount-content{
		width:100%;
		padding:24px;
	}

	/* Table stacking, corrected scope. WooCommerce only puts thead +
	   data-title on tables it explicitly marks .shop_table_responsive
	   (the Orders list, and Downloads) — that's the genuinely cramped
	   multi-column case on a phone. The single-order view (line items +
	   Subtotal/Shipping/Total) is a plain .shop_table with NO data-title
	   attributes at all, so stacking it the same way would hide the
	   th labels with nothing to replace them. Left as a plain compact
	   2-column table instead, which fits fine at phone widths already. */
	.woocommerce-account table.shop_table_responsive thead{
		display:none;
	}
	.woocommerce-account table.shop_table_responsive tbody tr{
		display:block;
		border-bottom:1px solid var(--jnp-border);
		padding:12px 0;
	}
	.woocommerce-account table.shop_table_responsive tbody td{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		gap:12px;
		border-bottom:none;
		padding:6px 0;
		text-align:right;
	}
	.woocommerce-account table.shop_table_responsive tbody td::before{
		content:attr(data-title);
		color:var(--jnp-gold);
		font-size:12px;
		font-weight:600;
		text-align:left;
		flex-shrink:0;
	}

	/* Single-order view (no data-title available): keep it a real
	   table, just tighten padding and let long product names wrap
	   instead of forcing a fixed column split that could clip them. */
	.woocommerce-account table.shop_table:not(.shop_table_responsive){
		table-layout:auto;
	}
	.woocommerce-account table.shop_table:not(.shop_table_responsive) td,
	.woocommerce-account table.shop_table:not(.shop_table_responsive) th{
		padding:10px 6px;
		font-size:13px;
		word-break:break-word;
	}
}

/* ==========================================================================
   FIX PATCH — 2026-07-20
   Root causes confirmed live via browser dev-tools inspection, not guessed:

   1) BUTTON COLOR: wp-content/uploads/moderno/min.css (Moderno's compiled
      Customizer CSS) ships:
        .c-button--accent, .woocommerce-ResetPassword .button {
          background-color: var(--accent-color) !important; ... }
      --accent-color is #FC5F49 (demo default, never changed in Customizer).
      That !important beats every gold-button rule above, which has none.
      Real fix is changing the Customizer accent color site-wide (still
      blocked pending manual wp-admin access — see project notes). Until
      then, this scoped !important override neutralizes it on account pages
      only, without touching the Customizer setting itself.

   2) PRIVACY TEXT CONTRAST: the register/login screen's paragraph
      ("A link to set a new password...", "Your personal data...") lives
      inside .woocommerce-privacy-policy-text, which none of the rules
      above actually targeted — a genuine selector gap, not a specificity
      fight. It was falling through to body{color:var(--text-color)},
      i.e. #070707 (near-black) on a #050505 background.

   3) COOKIE RE-CONSENT BUBBLE: confirmed selector via DOM query is
      .cookieadmin_re_consent (button) / .cookieadmin_reconsent_img (img)
      — not a chat widget. Recolored to fit the brand and pinned clear of
      the WhatsApp CTA on small screens.
   ========================================================================== */

.woocommerce-account .c-button--accent,
.woocommerce-account .woocommerce-ResetPassword .button{
	background-color:var(--jnp-gold) !important;
	border-color:var(--jnp-gold) !important;
	color:#050505 !important;
}
.woocommerce-account .c-button--accent:hover{
	opacity:.85;
}

.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce-privacy-policy-text p{
	color:var(--jnp-body) !important;
	opacity:1 !important;
	font-size:13px;
	line-height:1.6;
}
.woocommerce-account .woocommerce-privacy-policy-text a{
	color:var(--jnp-gold) !important;
	text-decoration:underline;
}

.woocommerce-account .cookieadmin_re_consent{
	background:var(--jnp-card) !important;
	border:1px solid var(--jnp-border) !important;
	box-shadow:0 2px 10px rgba(0,0,0,.4);
}
@media (max-width:480px){
	.woocommerce-account .cookieadmin_re_consent{
		bottom:16px !important;
		right:16px !important;
		left:auto !important;
	}
}

/* ==========================================================================
   MOBILE POLISH — 2026-07-26
   The existing @media(max-width:782px) block already stacks .c-account and
   flex-wraps the nav, but on real phones the nav items float at uneven
   widths (flex-wrap) and the menu card's border reads as a stray full-width
   hairline. This tightens the phone layout into a clean 2-up grid of
   tappable cards and centres the user header. Scoped .woocommerce-account
   so it wins over the base rules; placed last for source-order priority.
   ========================================================================== */

@media (max-width:600px){

	/* User header: centre avatar + name for a tidier mobile card */
	.woocommerce-account .c-account__user{
		flex-direction:column;
		text-align:center;
		gap:10px;
		padding:8px 4px 20px;
	}
	.woocommerce-account .c-account__user-icon img{
		margin:0 auto;
	}

	/* Navigation: even 2-column grid of card-style links instead of
	   uneven flex-wrap items */
	.woocommerce-account .c-account__navigation{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:8px;
	}
	.woocommerce-account .c-account__navigation-item{
		margin:0;
	}

	/* Each link becomes a bordered, centred, min-44px tap target */
	.woocommerce-account .c-account__navigation-link{
		display:flex;
		align-items:center;
		justify-content:center;
		text-align:center;
		min-height:44px;
		padding:12px 10px;
		border:1px solid rgba(212,175,55,0.14);
		border-left:1px solid rgba(212,175,55,0.14);
		border-radius:8px;
		box-sizing:border-box;
	}

	/* Keep the active item's gold cue without the desktop left-bar look.
	   This theme flags the active item with .is-active on the <li>
	   (not the --active modifier), so target that. !important because
	   other rules in this file set the link border without it. */
	.woocommerce-account .c-account__navigation-item.is-active .c-account__navigation-link{
		border-color:var(--jnp-gold) !important;
		background:rgba(212,175,55,0.08) !important;
	}

	/* Log out spans the full row so it never sits alone awkwardly */
	.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout{
		grid-column:1 / -1;
	}

	/* Comfortable padding on the two cards at phone width */
	.woocommerce-account .c-account__col-menu{
		padding:20px;
	}
	.woocommerce-account .c-account__col-content{
		padding:24px 20px;
	}
}