/* ==============================================================
   Yanshur — My account area
   1. Tokens + shell
   2. Sidebar: identity card + navigation
   3. Orders: state tabs
   4. Orders: table (desktop) and cards (narrow)
   5. Orders: empty state + pagination
   6. Dashboard
   7. View order
   Loaded only on account pages (see functions.php section 19).

   Everything is scoped under .woocommerce-account so the rest of
   the site, and ReHub's own layout, are left alone. The markup is
   WooCommerce's own — no template is overridden — so the
   selectors below are core class names plus the yac-* classes the
   column callbacks output.
   ============================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

.woocommerce-account{
	--ysc-ink:#182430;
	--ysc-paper:#F8F5EE;
	--ysc-card:#FFFFFF;
	--ysc-red:#C33F31;
	--ysc-red-dark:#8f2e23;
	--ysc-red-soft:#FBEAE7;
	--ysc-green:#3D8361;
	--ysc-green-soft:#E4F1EA;
	--ysc-green-ink:#2c6349;
	--ysc-amber:#8C6A33;
	--ysc-amber-soft:#F7EEDC;
	--ysc-slate:#69707E;
	--ysc-line:rgba(24,36,48,0.10);
	--ysc-r-md:14px;
}

/* ---------- 1. Shell ---------- */
/* WooCommerce lays the account page out with floats — nav floated left,
   content floated right — so anything hooked in before the navigation becomes a
   full-width block above both columns instead of joining the sidebar. The two
   columns become flex items of the wrapper instead, and the identity card rides
   inside .yac-side with the nav (see functions.php section 19). */
.woocommerce-account .woocommerce{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:24px;
	margin-top:50px;
}
/* Notices are printed inside the same wrapper and must stay full width. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper{
	flex:0 0 100%;
	max-width:100%;
}
.woocommerce-account .yac-side{
	flex:0 0 264px;
	max-width:100%;
	min-width:0;
}
.woocommerce-account .yac-side .woocommerce-MyAccount-navigation{
	float:none;
	width:auto;
	margin:0;
}
.woocommerce-account .woocommerce-MyAccount-content{
	flex:1 1 0;
	min-width:0;
	float:none;
	width:auto;
	margin:0;
	padding: 25px;
	border:1px solid var(--ysc-line);
	border-radius: var(--ysc-r-md);
}
/* One column below the table breakpoint, so the sidebar never squeezes the
   orders cards into a strip. */
@media(max-width:860px){
	.woocommerce-account .yac-side{ flex-basis:100%; }
}

/* ---------- 2. Sidebar: identity card ---------- */
.yac-user{
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-md);
	padding:18px;
	margin:0 0 14px;
	font-family:'Inter',sans-serif;
}
.yac-user-top{
	display:flex;
	align-items:center;
	gap:12px;
}
.yac-avatar{
	width:44px;
	height:44px;
	flex-shrink:0;
	border-radius:12px;
	background:var(--ysc-ink);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:'Fraunces',serif;
	font-size:17px;
	font-weight:600;
	letter-spacing:.02em;
}
.yac-user-meta{ min-width:0; }
.yac-user-name{
	display:block;
	font-family:'Fraunces',serif;
	font-size:16px;
	font-weight:600;
	line-height:1.25;
	color:var(--ysc-ink);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.yac-user-mail{
	display:block;
	font-size:11.5px;
	color:var(--ysc-slate);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.yac-user-since{
	display:block;
	margin-top:14px;
	padding-top:12px;
	border-top:1px solid var(--ysc-line);
	font-family:'IBM Plex Mono',monospace;
	font-size:9.5px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ysc-slate);
}

/* ---------- 2. Sidebar: navigation ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-md);
	padding:8px;
	margin:0;
	list-style:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{
	margin:0;
	padding:0;
	border:0;
	list-style:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 11px;
	border-radius:9px;
	font-family:'Inter',sans-serif;
	font-size:13.5px;
	font-weight:500;
	color:var(--ysc-ink);
	text-decoration:none;
	transition:background .15s,color .15s;
}
/* Icons are masks, not background images: the mask is filled with currentColor
   so one copy of each glyph serves both the resting and the active state.
   content:'' also displaces ReHub's own rhicons glyph, which sets content on
   this same pseudo-element.

   The fallback glyph — used by any endpoint a plugin adds later — is the
   second argument of var(), not a --yac-icon declaration on this rule. A custom
   property set on the pseudo-element itself beats the one inherited from the
   link, so declaring it here would override every per-item icon below. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before{
	content:'';
	width:17px;
	height:17px;
	flex-shrink:0;
	background:currentColor;
	opacity:.55;
	transition:opacity .15s;
	-webkit-mask:var(--yac-icon,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E")) center/contain no-repeat;
	mask:var(--yac-icon,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E")) center/contain no-repeat;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background:var(--ysc-paper); }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover::before{ opacity:1; }

/* Active: a solid ink block. The default marked the current page with bold
   text, which is invisible beside five other bold links. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
	background:var(--ysc-ink);
	color:#fff;
	font-weight:600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before{ opacity:1; }

/* Order count, injected as a generated content rule from PHP: the core
   navigation template escapes the label, so the number cannot ride along in
   the menu item text itself. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders > a::after{
	margin-left:auto;
	font-family:'IBM Plex Mono',monospace;
	font-size:11px;
	font-weight:600;
	color:var(--ysc-slate);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders.is-active > a::after{
	color:rgba(255,255,255,.72);
}

/* Log out sits apart from the pages: it is the only destructive item. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout{
	margin-top:7px !important;
	padding-top:7px !important;
	border-top:1px solid var(--ysc-line) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--ysc-slate); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover{
	color:var(--ysc-red);
	background:var(--ysc-red-soft);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard > a{
	--yac-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders > a{
	--yac-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.4 12.1a2 2 0 01-2 1.9H7.4a2 2 0 01-2-1.9z'/%3E%3Cpath d='M9 7V5a3 3 0 016 0v2'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account > a{
	--yac-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0115 0'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a{
	--yac-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H6a2 2 0 01-2-2V5a2 2 0 012-2h3'/%3E%3Cpath d='M16 17l5-5-5-5M21 12H10'/%3E%3C/svg%3E");
}
/* WCFM registers the inquiries endpoint under more than one slug depending on
   its version, so both are mapped to the same glyph. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--inquiries > a,
.woocommerce-account .woocommerce-MyAccount-navigation-link--wcfm-inquiries > a,
.woocommerce-account .woocommerce-MyAccount-navigation-link--enquiries > a{
	--yac-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2H8l-4 4V5a2 2 0 012-2h13a2 2 0 012 2z'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads > a{
	--yac-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address > a{
	--yac-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 10-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* ---------- 3. Orders: state tabs ---------- */
.yac-orders-intro{
	margin:0 0 14px;
	font-family:'Inter',sans-serif;
	font-size:13.5px;
	color:var(--ysc-slate);
}
.yac-tabs{
	display:flex;
	gap:4px;
	margin:0 0 14px;
	padding:4px;
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:100px;
	width:max-content;
	max-width:100%;
	overflow-x:auto;
	/* No scrollbar gutter inside a 45px-tall pill on touch devices. */
	scrollbar-width:none;
}
.yac-tabs::-webkit-scrollbar{ display:none; }
.yac-tabs a{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:7px 14px;
	border-radius:100px;
	font-family:'Inter',sans-serif;
	font-size:12.5px;
	font-weight:600;
	color:var(--ysc-slate);
	text-decoration:none;
	white-space:nowrap;
	transition:background .15s,color .15s;
}
.yac-tabs a:hover{ background:var(--ysc-paper); color:var(--ysc-ink); }
.yac-tabs a.is-current{ background:var(--ysc-ink); color:#fff; }
.yac-tabs b{
	font-family:'IBM Plex Mono',monospace;
	font-size:11px;
	font-weight:600;
	opacity:.6;
}

/* ---------- 4. Orders table ---------- */
.woocommerce-account .woocommerce-orders-table{
	width:100%;
	border-collapse:collapse;
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-md);
	overflow:hidden;
	font-family:'Inter',sans-serif;
	margin:0 0 18px;
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td{
	border:0;
}
.woocommerce-account .woocommerce-orders-table thead th{
	text-align:left;
	padding:11px 16px;
	background:var(--ysc-paper);
	border-bottom:1px solid var(--ysc-line);
	font-family:'IBM Plex Mono',monospace;
	font-size:9.5px;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--ysc-slate);
	white-space:nowrap;
}
.woocommerce-account .woocommerce-orders-table tbody tr{
	border-bottom:1px solid var(--ysc-line);
	transition:background .12s;
}
.woocommerce-account .woocommerce-orders-table tbody tr:last-child{ border-bottom:0; }
.woocommerce-account .woocommerce-orders-table tbody tr:hover{ background:#FCFBF7; }
.woocommerce-account .woocommerce-orders-table td{
	padding:14px 16px;
	vertical-align:middle;
	font-size:13.5px;
	color:var(--ysc-ink);
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions{
	text-align:right;
	white-space:nowrap;
}

/* Order cell: the number leads, the date is secondary under it. */
.yac-num{
	display:block;
	font-family:'IBM Plex Mono',monospace;
	font-size:13px;
	font-weight:600;
	color:var(--ysc-ink);
	text-decoration:none;
}
.yac-num:hover{ color:var(--ysc-red); }
.yac-date{
	display:block;
	font-size:11.5px;
	color:var(--ysc-slate);
	margin-top:2px;
}

/* Placement cell: the publisher is what a customer recognises an order by. */
.yac-placement{
	display:block;
	font-weight:600;
	font-size:13.5px;
	line-height:1.35;
}
.yac-placement-more{ font-weight:400; color:var(--ysc-slate); }
.yac-live{
	display:inline-flex;
	align-items:center;
	gap:5px;
	margin-top:5px;
	font-size:11.5px;
	font-weight:600;
	color:var(--ysc-green-ink);
	text-decoration:none;
}
.yac-live svg{ width:12px; height:12px; flex-shrink:0; }
.yac-live:hover{ text-decoration:underline; }
.yac-empty-cell{ color:var(--ysc-slate); }

/* Status pill. One meaning per colour, everywhere in the account area:
   red = the customer has to act, amber = we are working on it, green = done,
   neutral = closed with nothing left to do. */
.yac-status{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:5px 11px 5px 9px;
	border-radius:100px;
	font-size:12px;
	font-weight:600;
	white-space:nowrap;
}
.yac-status i{
	width:6px;
	height:6px;
	border-radius:50%;
	background:currentColor;
	flex-shrink:0;
}
.yac-status.is-done{ background:var(--ysc-green-soft); color:var(--ysc-green-ink); }
.yac-status.is-wait{ background:var(--ysc-amber-soft); color:var(--ysc-amber); }
.yac-status.is-act{ background:var(--ysc-red); color:#fff; }
.yac-status.is-closed{
	background:var(--ysc-paper);
	color:var(--ysc-slate);
	border:1px solid var(--ysc-line);
}
/* The note only exists for statuses a customer cannot interpret alone. */
.yac-status-note{
	display:block;
	font-size:11px;
	color:var(--ysc-slate);
	margin-top:5px;
	max-width:210px;
	line-height:1.4;
}

.yac-total{ font-weight:600; white-space:nowrap; }
.yac-total .yac-total-count{ font-weight:400; color:var(--ysc-slate); font-size:12px; }

/* Actions: three deliberate levels. Solid red only when the customer has to
   act, outlined for the normal path, ghost for everything else — the default
   rendered all of them as identical buttons, which is why the column read as
   noise. */
.yac-actions{
	display:inline-flex;
	align-items:center;
	gap:4px;
	justify-content:flex-end;
	flex-wrap:wrap;
}
.woocommerce-account .yac-btn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:7px 13px;
	border:1px solid var(--ysc-line);
	border-radius:9px;
	background:var(--ysc-card);
	font-family:'Inter',sans-serif;
	font-size:12.5px;
	font-weight:600;
	line-height:1.2;
	color:var(--ysc-ink);
	text-decoration:none;
	text-transform:none;
	letter-spacing:0;
	transition:.15s;
}
.woocommerce-account .yac-btn svg{ width:13px; height:13px; flex-shrink:0; }
.woocommerce-account .yac-btn:hover{
	border-color:rgba(24,36,48,.28);
	background:var(--ysc-paper);
	color:var(--ysc-ink);
}
.woocommerce-account .yac-btn-pay{
	background:var(--ysc-red);
	border-color:var(--ysc-red);
	color:#fff;
}
.woocommerce-account .yac-btn-pay:hover{
	background:var(--ysc-red-dark);
	border-color:var(--ysc-red-dark);
	color:#fff;
}
.woocommerce-account .yac-btn-ghost{
	border-color:transparent;
	background:transparent;
	color:var(--ysc-slate);
	padding:7px 9px;
}
.woocommerce-account .yac-btn-ghost:hover{
	border-color:transparent;
	background:var(--ysc-paper);
	color:var(--ysc-ink);
}

/* ---------- 5. Empty state + pagination ---------- */
/* WooCommerce prints its "no order has been made yet" notice with the same
   markup it uses for cart errors. Restyled into a proper empty state rather
   than overriding the template for it. */
.woocommerce-orders .woocommerce-MyAccount-content .woocommerce-info{
	display:block;
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-top-color:var(--ysc-line);
	border-radius:var(--ysc-r-md);
	padding:44px 26px;
	text-align:center;
	font-family:'Inter',sans-serif;
	font-size:14px;
	color:var(--ysc-slate);
}
.woocommerce-orders .woocommerce-MyAccount-content .woocommerce-info::before{
	content:'';
	display:block;
	width:24px;
	height:24px;
	margin:0 auto 14px;
	background:var(--ysc-slate);
	position:static;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.4 12.1a2 2 0 01-2 1.9H7.4a2 2 0 01-2-1.9z'/%3E%3Cpath d='M9 7V5a3 3 0 016 0v2'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.4 12.1a2 2 0 01-2 1.9H7.4a2 2 0 01-2-1.9z'/%3E%3Cpath d='M9 7V5a3 3 0 016 0v2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.woocommerce-orders .woocommerce-MyAccount-content .woocommerce-info .button{
	display:inline-block;
	float:none;
	margin:16px 0 0;
	padding:10px 20px;
	background:var(--ysc-red);
	border:1px solid var(--ysc-red);
	border-radius:9px;
	font-size:13.5px;
	font-weight:600;
	color:#fff;
	text-transform:none;
	letter-spacing:0;
}
.woocommerce-orders .woocommerce-MyAccount-content .woocommerce-info .button:hover{
	background:var(--ysc-red-dark);
	border-color:var(--ysc-red-dark);
	color:#fff;
}

.woocommerce-account .woocommerce-pagination{ text-align:center; }
.woocommerce-account .woocommerce-pagination .button{
	display:inline-block;
	padding:9px 18px;
	margin:0 4px;
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:9px;
	font-family:'Inter',sans-serif;
	font-size:12.5px;
	font-weight:600;
	color:var(--ysc-ink);
	text-transform:none;
	letter-spacing:0;
}
.woocommerce-account .woocommerce-pagination .button:hover{
	background:var(--ysc-paper);
	border-color:rgba(24,36,48,.28);
	color:var(--ysc-ink);
}

/* ---------- Narrow screens: the table becomes cards ---------- */
/* 860px rather than a phone width: the account content column is already
   narrowed by the sidebar, so five columns run out of room well before the
   viewport does. */
@media(max-width:860px){
	.woocommerce-account .woocommerce-orders-table{
		background:transparent;
		border:0;
		border-radius:0;
		overflow:visible;
	}
	.woocommerce-account .woocommerce-orders-table thead{ display:none; }
	.woocommerce-account .woocommerce-orders-table,
	.woocommerce-account .woocommerce-orders-table tbody,
	.woocommerce-account .woocommerce-orders-table tr,
	.woocommerce-account .woocommerce-orders-table td{
		display:block;
		width:100%;
	}
	.woocommerce-account .woocommerce-orders-table tbody tr{
		background:var(--ysc-card);
		border:1px solid var(--ysc-line);
		border-radius:12px;
		padding:13px 14px;
		margin:0 0 10px;
	}
	.woocommerce-account .woocommerce-orders-table tbody tr:hover{ background:var(--ysc-card); }
	/* WooCommerce's own shop_table_responsive rules turn every cell into a
	   right-aligned row prefixed with its column name. That is the layout this
	   block replaces, so both are switched off. text-align carries !important
	   because WooCommerce sets it that way and nothing else can win. */
	.woocommerce-account .woocommerce-orders-table td::before{
		content:none;
		display:none;
	}
	.woocommerce-account .woocommerce-orders-table td{
		padding:0;
		text-align:left !important;
	}
	.woocommerce-account .woocommerce-orders-table td+td{ margin-top:9px; }
	/* Number and date share one line at this width; the column is no longer
	   holding them apart. */
	.woocommerce-account .woocommerce-orders-table__cell-order-number{
		display:flex;
		align-items:baseline;
		justify-content:space-between;
		gap:10px;
	}
	.woocommerce-account .woocommerce-orders-table__cell-order-number .yac-date{ margin-top:0; }
	.woocommerce-account .woocommerce-orders-table__cell-order-actions{
		text-align:left;
		margin-top:12px;
		padding-top:11px;
		border-top:1px solid var(--ysc-line);
		white-space:normal;
	}
	.yac-actions{ justify-content:flex-start; width:100%; }
	.yac-status-note{ max-width:none; }
}

@media(max-width:560px){
	.yac-user{ padding:14px; }
	.yac-avatar{ width:38px; height:38px; font-size:15px; }
	.woocommerce-account .woocommerce-orders-table td{ font-size:13px; }
}


/* ==============================================================
   6. Dashboard (functions.php section 20)
   ============================================================== */

/* The strip at the top. Red only when money is actually waiting — if it were
   always coloured it would stop meaning anything. */
.woocommerce-account .yac-alert{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	padding:15px 18px;
	margin:0 0 16px;
	border-radius:var(--ysc-r-md);
	font-family:'Inter',sans-serif;
	font-size:13.5px;
	line-height:1.5;
}
.woocommerce-account .yac-alert.is-act{
	background:var(--ysc-red-soft);
	border:1px solid rgba(195,63,49,0.22);
	color:#8f2e23;
}
.woocommerce-account .yac-alert.is-calm{
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	color:var(--ysc-slate);
}
.woocommerce-account .yac-alert-text{ min-width:0; }
.woocommerce-account .yac-alert-text strong{
	display:block;
	font-family:'Fraunces',serif;
	font-size:16px;
	font-weight:600;
	line-height:1.3;
	margin-bottom:2px;
}
.woocommerce-account .yac-alert .yac-btn{ flex-shrink:0; }

/* Four numbers. auto-fit rather than a fixed four columns so they reflow to
   2x2 in the narrowed content column instead of shrinking to unreadable. */
.woocommerce-account .yac-stats{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
	gap:12px;
	margin:0 0 16px;
	padding:0;
	list-style:none;
}
.woocommerce-account .yac-stats li{
	margin:0;
	padding:16px 18px;
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-md);
	list-style:none;
}
.woocommerce-account .yac-stat-value{
	display:block;
	font-family:'Fraunces',serif;
	font-size:24px;
	font-weight:600;
	line-height:1.15;
	color:var(--ysc-ink);
	letter-spacing:-.01em;
}
/* wc_price() wraps the amount in its own span, which must not pick up the
   theme's price colour here. */
.woocommerce-account .yac-stat-value .amount,
.woocommerce-account .yac-stat-value bdi{
	font:inherit;
	color:inherit;
}
.woocommerce-account .yac-stat-label{
	display:block;
	margin-top:6px;
	font-family:'IBM Plex Mono',monospace;
	font-size:9.5px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ysc-slate);
}

/* Panels: latest links, recent orders. */
.woocommerce-account .yac-panel{
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-md);
	margin:0 0 16px;
	overflow:hidden;
}
.woocommerce-account .yac-panel-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 18px;
	border-bottom:1px solid var(--ysc-line);
}
.woocommerce-account .yac-panel-head h2{
	margin:0;
	font-family:'Fraunces',serif;
	font-size:16px;
	font-weight:600;
	line-height:1.2;
	color:var(--ysc-ink);
}
.woocommerce-account .yac-panel-link{
	font-family:'Inter',sans-serif;
	font-size:12.5px;
	font-weight:600;
	color:var(--ysc-slate);
	text-decoration:none;
	white-space:nowrap;
}
.woocommerce-account .yac-panel-link:hover{ color:var(--ysc-red); }

.woocommerce-account .yac-links,
.woocommerce-account .yac-recent{
	margin:0;
	padding:0;
	list-style:none;
}
.woocommerce-account .yac-links li,
.woocommerce-account .yac-recent li{
	display:flex;
	align-items:center;
	gap:12px;
	margin:0;
	padding:12px 18px;
	border-bottom:1px solid var(--ysc-line);
	list-style:none;
	font-family:'Inter',sans-serif;
}
.woocommerce-account .yac-links li:last-child,
.woocommerce-account .yac-recent li:last-child{ border-bottom:0; }

.woocommerce-account .yac-link-url{
	display:flex;
	align-items:baseline;
	gap:8px;
	flex:1 1 auto;
	min-width:0;
	text-decoration:none;
}
.woocommerce-account .yac-link-host{
	font-size:13.5px;
	font-weight:600;
	color:var(--ysc-ink);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.woocommerce-account .yac-link-url:hover .yac-link-host{ color:var(--ysc-red); }
.woocommerce-account .yac-link-order{
	font-family:'IBM Plex Mono',monospace;
	font-size:11px;
	color:var(--ysc-slate);
	flex-shrink:0;
}
.woocommerce-account .yac-copy{ flex-shrink:0; }
.woocommerce-account .yac-copy.is-done{
	background:var(--ysc-green-soft);
	border-color:rgba(61,131,97,0.22);
	color:var(--ysc-green-ink);
}

.woocommerce-account .yac-recent-main{
	flex:1 1 auto;
	min-width:0;
}
.woocommerce-account .yac-recent .yac-num{ display:inline-block; }
.woocommerce-account .yac-recent .yac-placement{ margin-top:2px; }
.woocommerce-account .yac-recent .yac-status,
.woocommerce-account .yac-recent .yac-total{ flex-shrink:0; }

@media(max-width:560px){
	.woocommerce-account .yac-alert{ padding:14px; }
	.woocommerce-account .yac-alert .yac-btn{ width:100%; justify-content:center; }
	.woocommerce-account .yac-stats li{ padding:14px; }
	.woocommerce-account .yac-stat-value{ font-size:21px; }
	/* The status pill drops below the order line rather than squeezing it. */
	.woocommerce-account .yac-recent li{
		flex-wrap:wrap;
		row-gap:8px;
	}
	.woocommerce-account .yac-recent-main{ flex:1 1 100%; }
}


/* ==============================================================
   7. View order (functions.php section 22)
   The order header, progress track and recap come from the blocks
   shared with the thank-you page; their styling — and the details
   table, customer block and published links — is in
   css/order-details.css. Only what belongs to this endpoint is
   below.
   ============================================================== */

/* WooCommerce opens view-order.php with a printf'd sentence ("Order #2740 was
   placed on … and is currently Under Review") and gives it no filter. The
   header prints the same three facts with the status as a chip and a plain
   explanation, so the sentence is hidden rather than repeated.

   :has() is what makes that possible without overriding the template. In a
   browser that lacks it the line simply stays visible — a duplicate, not a
   break. */
.woocommerce-view-order .woocommerce-MyAccount-content > p:has(> mark.order-number){
	display:none;
}

.woocommerce-view-order .woocommerce-MyAccount-content > .ysc-or{ margin-top:0; }

/* Customer-visible order notes, when there are any. */
.woocommerce-view-order ol.woocommerce-OrderUpdates{
	list-style:none;
	margin:0 0 26px;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.woocommerce-view-order ol.woocommerce-OrderUpdates li.woocommerce-OrderUpdate{
	list-style:none;
	margin:0;
	padding:16px 18px;
	background:var(--ysc-card);
	border:1px solid var(--ysc-line);
	border-radius:var(--ysc-r-md);
	font-family:'Inter',sans-serif;
}
.woocommerce-view-order .woocommerce-OrderUpdate-meta{
	display:block;
	font-family:'IBM Plex Mono',monospace;
	font-size:9.5px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--ysc-slate);
	margin-bottom:6px;
}
.woocommerce-view-order .woocommerce-OrderUpdate-description p{
	font-size:13px;
	line-height:1.65;
	color:var(--ysc-ink);
	margin:0;
}