/* ==========================================================================
   Y Needs My Account (includes/account-page.php). Reference: orangefit.com account dashboard.
   Brand colours (--yn-*), the product-page pattern (--pdp-image). Motion: transform / opacity only.
   ========================================================================== */

.yns-acc {
	--acc-blue: var(--yn-primary, #0258A2);
	--acc-orange: var(--yn-orange, #FF7515);
	--acc-yellow: var(--yn-yellow, #FDDC00);
	--acc-ink: var(--yn-heading, #1E293B);
	--acc-text: var(--yn-text, #334155);
	--acc-muted: var(--yn-muted, #69727D);
	--acc-navy: color-mix(in srgb, var(--acc-blue) 35%, #0B1324);
	--acc-page: color-mix(in srgb, var(--acc-blue) 4%, #FFFFFC);
	--acc-line: color-mix(in srgb, var(--acc-ink) 12%, transparent);
	--acc-shadow: 0 1px 0 color-mix(in srgb, var(--acc-ink) 4%, transparent), 0 22px 50px -30px color-mix(in srgb, var(--acc-ink) 45%, transparent);
	--acc-ease: cubic-bezier(.33, 1, .68, 1);
	--acc-wide: 64rem;
	--acc-gutter: clamp(1rem, 4vw, 2rem);
	background: var(--acc-page);
	color: var(--acc-text);
	padding-bottom: clamp(3rem, 7vw, 5rem);
	overflow-x: clip;
}
html body.yns-acc-page #main-content.yns-acc { background: var(--acc-page) !important; }

/* ---------- Band ---------- */
.yns-acc__band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(7rem, 11vw, 8.5rem) var(--acc-gutter) clamp(2.25rem, 5vw, 3.25rem);
	background: var(--pdp-bg, var(--acc-blue));
	color: #FFFFFC;
}
.yns-acc__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, var(--pdp-accent, #046BD2) 0%, var(--pdp-accent, #046BD2) 60%, transparent 100%);
	-webkit-mask: var(--pdp-image) center top / cover no-repeat;
	mask: var(--pdp-image) center top / cover no-repeat;
	opacity: var(--pdp-opacity, 1);
	pointer-events: none;
}
.yns-acc__band-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	max-width: var(--acc-wide);
	margin: 0 auto;
}
html body .yns-acc .yns-acc__hello {
	margin: 0;
	padding: 0;
	color: #FFFFFC;
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	font-weight: 800;
	line-height: 1.3;
}
.yns-acc__hello span { color: var(--acc-yellow); }
.yns-acc__logout,
.yns-acc__back {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	border-radius: 100px;
	font-weight: 800;
	text-decoration: none !important;
	transition: background-color .2s, color .2s, transform .15s var(--acc-ease);
}
.yns-acc__logout {
	padding: .7rem 1.6rem;
	background: #FFFFFC;
	color: var(--acc-blue) !important;
	font-size: 1rem;
}
.yns-acc__logout svg,
.yns-acc__back svg { width: 1.1rem; height: 1.1rem; }
.yns-acc__logout:hover { background: var(--acc-yellow); color: var(--acc-ink) !important; }
.yns-acc__back {
	margin-bottom: .9rem;
	padding: .3rem .9rem .3rem .7rem;
	background: var(--acc-orange);
	color: #FFFFFC !important;
	font-size: .85rem;
}
.yns-acc__back:hover { background: #FFFFFC; color: var(--acc-orange) !important; }
.yns-acc__logout:focus-visible,
.yns-acc__back:focus-visible { outline: 3px solid var(--acc-yellow); outline-offset: 3px; }
.yns-acc__logout:active,
.yns-acc__back:active { transform: none; }

/* ---------- Body ---------- */
.yns-acc__body {
	max-width: var(--acc-wide);
	margin: clamp(1.25rem, 3vw, 2rem) auto 0;
	padding: 0 var(--acc-gutter);
	box-sizing: content-box;
}
.yns-acc__body--narrow { max-width: 30rem; }

/* ---------- Dashboard cards ---------- */
.yns-acc__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.yns-acc__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	grid-column: span 2;
	min-height: 13.5rem;
	padding: clamp(1.25rem, 2.6vw, 1.75rem);
	overflow: hidden;
	border-radius: 1.25rem;
	color: #FFFFFC;
	box-shadow: var(--acc-shadow);
	transition: transform .3s var(--acc-ease), box-shadow .3s;
}
.yns-acc__card--wide { grid-column: span 3; min-height: 15rem; }
@media (hover: hover) {
	.yns-acc__card:hover { transform: translateY(-4px); }
}
.yns-acc__card--orders { background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--yn-primary-hover, #046BD2) 85%, transparent), transparent 60%), var(--acc-blue); }
.yns-acc__card--address { background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, #FFB067 70%, transparent), transparent 60%), var(--acc-orange); }
.yns-acc__card--shop { background: radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--acc-blue) 55%, transparent), transparent 65%), var(--acc-navy); }
.yns-acc__card--cart { background: var(--acc-yellow); color: var(--acc-ink); }
.yns-acc__card--account { background: #FFFFFC; color: var(--acc-ink); border: 1px solid var(--acc-line); }

/* Big faint artwork on the wide cards (reference: the «R» / box art) */
.yns-acc__art {
	position: absolute;
	top: -1.5rem;
	left: -1.25rem;
	z-index: -1;
	width: 11rem;
	height: 11rem;
	color: #FFFFFC;
	opacity: .16;
	transform: rotate(-12deg);
	pointer-events: none;
}
.yns-acc__art svg { width: 100%; height: 100%; stroke-width: 1.4; }
/* Icon circle on the small cards */
.yns-acc__icon {
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: #FFFFFC;
	color: var(--acc-blue);
}
.yns-acc__icon svg { width: 1.4rem; height: 1.4rem; }
.yns-acc__card--cart .yns-acc__icon { color: var(--acc-ink); }
.yns-acc__card--account .yns-acc__icon { background: color-mix(in srgb, var(--acc-orange) 12%, #FFFFFC); color: var(--acc-orange); }

html body .yns-acc .yns-acc__title {
	margin: 0 0 .65rem;
	padding: 0;
	color: inherit;
	font-size: clamp(1.35rem, 2.4vw, 1.6rem);
	font-weight: 800;
	line-height: 1.3;
}
.yns-acc__text { margin: 0 0 1.25rem; padding: 0; color: inherit; font-size: .98rem; line-height: 1.7; opacity: .92; }
.yns-acc__lines { margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .98rem; line-height: 1.7; opacity: .95; }
.yns-acc__lines li { margin: 0; padding: 0; }
.yns-acc__lines li:first-child { font-weight: 800; }

/* Latest order */
.yns-acc__order {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem 1rem;
	margin: 0 0 1.25rem;
	padding: .9rem 1rem;
	border-radius: .9rem;
	background: color-mix(in srgb, #FFFFFC 14%, transparent);
}
.yns-acc__order span { display: block; font-size: .8rem; opacity: .8; }
.yns-acc__order strong { display: block; font-size: 1rem; font-weight: 800; }
.yns-acc__status { color: var(--acc-yellow); }

/* Buttons: white pill in the card's colour (reference) */
.yns-acc__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }
.yns-acc__btn {
	display: inline-flex;
	flex: 1 1 10rem;
	align-items: center;
	justify-content: center;
	min-height: 2.9rem;
	padding: .6rem 1.2rem;
	border: 2px solid #FFFFFC;
	border-radius: 100px;
	background: #FFFFFC;
	color: var(--acc-blue) !important;
	font-size: .98rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none !important;
	transition: background-color .2s, color .2s, border-color .2s, transform .15s var(--acc-ease);
}
.yns-acc__card--address .yns-acc__btn { color: var(--acc-orange) !important; }
.yns-acc__card--shop .yns-acc__btn { color: var(--acc-navy) !important; }
.yns-acc__card--cart .yns-acc__btn { border-color: var(--acc-ink); background: var(--acc-ink); color: #FFFFFC !important; }
.yns-acc__card--account .yns-acc__btn { border-color: var(--acc-orange); background: var(--acc-orange); color: #FFFFFC !important; }
.yns-acc__btn--ghost { background: transparent; color: #FFFFFC !important; }
.yns-acc__btn:hover { background: var(--acc-yellow); border-color: var(--acc-yellow); color: var(--acc-ink) !important; }
.yns-acc__card--cart .yns-acc__btn:hover { background: #FFFFFC; border-color: #FFFFFC; color: var(--acc-ink) !important; }
.yns-acc__btn:focus-visible { outline: 3px solid var(--acc-ink); outline-offset: 3px; }
.yns-acc__card--orders .yns-acc__btn:focus-visible,
.yns-acc__card--address .yns-acc__btn:focus-visible,
.yns-acc__card--shop .yns-acc__btn:focus-visible { outline-color: var(--acc-yellow); }
.yns-acc__btn:active { transform: none; }

/* ---------- Inner pages: section pills + white panel ---------- */
.yns-acc__body--inner .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; margin: 0 0 1.25rem !important; }
.yns-acc__body--inner .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.yns-acc__body--inner .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; }
.yns-acc__body--inner .woocommerce-MyAccount-navigation a {
	display: inline-flex;
	padding: .55rem 1.1rem;
	border: 1px solid var(--acc-line);
	border-radius: 100px;
	background: #FFFFFC;
	color: var(--acc-ink) !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.yns-acc__body--inner .woocommerce-MyAccount-navigation a:hover { border-color: var(--acc-blue); color: var(--acc-blue) !important; }
.yns-acc__body--inner .woocommerce-MyAccount-navigation a:focus-visible { outline: 3px solid var(--acc-yellow); outline-offset: 2px; }
.yns-acc__body--inner .woocommerce-MyAccount-navigation a:active { transform: none; }
.yns-acc__body--inner .woocommerce-MyAccount-navigation .is-active a { border-color: var(--acc-blue); background: var(--acc-blue); color: #FFFFFC !important; }
.yns-acc__body--inner .woocommerce-MyAccount-navigation-link--customer-logout { display: none !important; }

html body .yns-acc .yns-acc__panel,
html body .yns-acc .woocommerce-MyAccount-content.yns-acc__panel {
	float: none !important;
	width: auto !important;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: 1.25rem;
	background: #FFFFFC;
	box-shadow: var(--acc-shadow);
}
.yns-acc__panel h2,
.yns-acc__panel h3 { color: var(--acc-ink); font-weight: 800; }
.yns-acc__panel p { line-height: 1.7; }

/* Tables (orders, order details) */
html body .yns-acc .yns-acc__panel table.shop_table,
html body .yns-acc .yns-acc__panel table.woocommerce-table {
	width: 100%;
	margin: 0 0 1.25rem;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}
html body .yns-acc .yns-acc__panel table.shop_table th,
html body .yns-acc .yns-acc__panel table.shop_table td {
	padding: .85rem .6rem;
	border: 0;
	border-bottom: 1px solid var(--acc-line);
	background: none;
	color: var(--acc-text);
	text-align: start;
	vertical-align: middle;
}
html body .yns-acc .yns-acc__panel table.shop_table thead th { color: var(--acc-muted); font-size: .85rem; font-weight: 700; }
html body .yns-acc .yns-acc__panel table.shop_table td a { color: var(--acc-blue); font-weight: 700; }
html body .yns-acc .yns-acc__panel .woocommerce-orders-table__cell-order-actions .button,
html body .yns-acc .yns-acc__panel .woocommerce-button { margin: .15rem; }

/* Forms (address, account details, login) */
html body .yns-acc .yns-acc__panel form .form-row,
html body .yns-acc .yns-acc__panel fieldset .form-row { float: none; width: auto; margin: 0 0 .9rem; padding: 0; }
html body .yns-acc .yns-acc__panel label { display: block; margin: 0 0 .35rem; color: var(--acc-ink); font-size: .92rem; font-weight: 700; }
html body .yns-acc .yns-acc__panel label.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
html body .yns-acc .yns-acc__panel input.input-text,
html body .yns-acc .yns-acc__panel input[type="text"],
html body .yns-acc .yns-acc__panel input[type="email"],
html body .yns-acc .yns-acc__panel input[type="password"],
html body .yns-acc .yns-acc__panel input[type="tel"],
html body .yns-acc .yns-acc__panel select,
html body .yns-acc .yns-acc__panel textarea,
html body .yns-acc .yns-acc__panel .select2-container .select2-selection {
	width: 100%;
	min-height: 3.1rem;
	padding: .7rem .9rem;
	border: 1px solid color-mix(in srgb, var(--acc-ink) 16%, transparent);
	border-radius: .7rem;
	background: #FFFFFC;
	color: var(--acc-ink);
	font: inherit;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}
html body .yns-acc .yns-acc__panel input:focus,
html body .yns-acc .yns-acc__panel select:focus,
html body .yns-acc .yns-acc__panel textarea:focus {
	border-color: var(--acc-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-blue) 18%, transparent);
	outline: none;
}
html body .yns-acc .yns-acc__panel fieldset { margin: 1.5rem 0 0; padding: 1.25rem; border: 1px solid var(--acc-line); border-radius: 1rem; }
html body .yns-acc .yns-acc__panel legend { padding: 0 .5rem; color: var(--acc-ink); font-weight: 800; }
html body .yns-acc .yns-acc__panel .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
html body .yns-acc .yns-acc__panel .woocommerce-Addresses::before,
html body .yns-acc .yns-acc__panel .woocommerce-Addresses::after { display: none; }
html body .yns-acc .yns-acc__panel .woocommerce-Address { float: none; width: auto; padding: 1.1rem; border: 1px solid var(--acc-line); border-radius: 1rem; }
html body .yns-acc .yns-acc__panel .woocommerce-Address address { font-style: normal; line-height: 1.8; }
html body .yns-acc .yns-acc__panel .button,
html body .yns-acc .yns-acc__panel button[type="submit"] { min-height: 3rem; border-radius: 100px; font-weight: 800; }
html body .yns-acc .yns-acc__panel .woocommerce-form-login .woocommerce-form-login__submit { width: 100%; margin-top: .5rem; }
html body .yns-acc .yns-acc__panel .lost_password a { color: var(--acc-blue); font-weight: 700; }

/* Notices */
html body .yns-acc .woocommerce-message,
html body .yns-acc .woocommerce-info,
html body .yns-acc .woocommerce-error {
	margin: 0 0 1rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--acc-line);
	border-inline-start: 4px solid var(--acc-blue);
	border-radius: .8rem;
	background: #FFFFFC !important;
	color: var(--acc-ink) !important;
	list-style: none;
}
html body .yns-acc .woocommerce-error { border-inline-start-color: #C62828; color: #C62828 !important; }
html body .yns-acc .woocommerce-message::before,
html body .yns-acc .woocommerce-info::before,
html body .yns-acc .woocommerce-error::before { display: none; }

/* ---------- Load-in ---------- */
@media (prefers-reduced-motion: no-preference) {
	.yns-acc__card { animation: yns-acc-in .6s var(--acc-ease) both; }
	.yns-acc__card:nth-child(2) { animation-delay: .06s; }
	.yns-acc__card:nth-child(3) { animation-delay: .12s; }
	.yns-acc__card:nth-child(4) { animation-delay: .18s; }
	.yns-acc__card:nth-child(5) { animation-delay: .24s; }
}
@keyframes yns-acc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Tablet & phone ---------- */
@media (max-width: 900px) {
	.yns-acc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yns-acc__card,
	.yns-acc__card--wide { grid-column: span 1; }
	.yns-acc__card--wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.yns-acc__grid { grid-template-columns: minmax(0, 1fr); }
	.yns-acc__card { grid-column: 1 / -1; min-height: 0; }
	.yns-acc__band-inner { align-items: flex-start; }
	.yns-acc__logout { padding: .55rem 1.2rem; font-size: .92rem; }
}

/* Header (transparent "hero" mode on this page): no white strip over the blue band. */
html body.yns-acc-page .ofh--hero.is-top .ofh-band { background: transparent; box-shadow: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* WooCommerce floats the content at ~68% for a side menu; here the content is full width. */
html body .yns-acc .yns-acc__body > .woocommerce-MyAccount-content { float: none !important; width: auto !important; max-width: none !important; }
html body .yns-acc .yns-acc__panel h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.35; margin: 0 0 .75rem; padding: 0; }
html body .yns-acc .yns-acc__panel h3 { font-size: 1.15rem; line-height: 1.4; margin: 0 0 .6rem; padding: 0; }
html body .yns-acc .yns-acc__panel .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
html body .yns-acc .yns-acc__panel .woocommerce-Address-title a { color: var(--acc-orange); font-weight: 800; }