/* =========================================================================
   MY LOCKER — warehouse-themed account dashboard
   Horizontal bin-tag nav, single-column flow, FontAwesome icons
   ========================================================================= */

/* FontAwesome is enqueued sitewide now (see enqueue.php) rather than
   @import'd here — a real <link> loads in parallel; @import blocks and
   waits, and this file no longer needs its own copy either way now that
   the announce bar (sitewide) also uses a FontAwesome icon. */

/* ---- Locker Header (page wrapper) ---- */
.locker-header {
	padding: 24px 0 32px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 32px;
}
.locker-badge {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--red);
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-pill);
	padding: 3px 10px;
	display: inline-block;
	margin-bottom: 10px;
}
.locker-title {
	font-family: var(--font-display);
	font-size: clamp(26px, 3.6vw, 38px);
	letter-spacing: -0.01em;
	line-height: 1.05;
}
.locker-sub {
	font-size: 14.5px;
	color: var(--ink-soft);
	margin-top: 8px;
	max-width: 480px;
	line-height: 1.6;
}

/* ---- Join the Club (guest view) ---- */
.locker-join {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: stretch;
}
.locker-join-card {
	flex: 1 1 360px;
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
}
.locker-join-icon {
	font-size: 36px;
	color: var(--red);
	margin-bottom: 12px;
}
.locker-join-card h2 {
	font-family: var(--font-display);
	font-size: 24px;
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}
.locker-join-card p {
	font-size: 14px;
	color: var(--ink-soft);
	line-height: 1.7;
	flex: 1;
}
.locker-join-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}
.locker-join-actions .add-btn {
	flex: 0 1 auto;
	padding: 12px 24px;
	border-radius: var(--radius-pill);
}
.locker-join-actions .quick-view-btn {
	flex: 0 1 auto;
	padding: 12px 24px;
	font-size: 11px;
	border-radius: var(--radius-pill);
}
.locker-join-perks {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
}
.locker-join-perks .perk {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
.locker-join-perks .perk:last-child {
	border-bottom: none;
}
.locker-join-perks .perk-icon {
	font-size: 20px;
	color: var(--red);
	flex-shrink: 0;
	width: 32px;
	text-align: center;
}
.locker-join-perks .perk h4 {
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: -0.01em;
	margin-bottom: 2px;
}
.locker-join-perks .perk p {
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.5;
}

/* ---- Locker Dashboard (logged in) ---- */
.locker-dashboard {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ---- Horizontal bin-tag navigation ---- */
.locker-nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	padding: 0;
	margin: 0;
	overflow: hidden;
}
.locker-nav li {
	flex: 0 1 auto;
	border-right: 1px solid var(--line);
}
.locker-nav li:last-child {
	border-right: none;
	margin-left: auto;
}
.locker-nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink);
	text-transform: uppercase;
}
.locker-nav a i {
	font-size: 14px;
	color: var(--ink-soft);
}
.locker-nav li.is-active a {
	background: var(--ink);
	color: #fff;
}
.locker-nav li.is-active a i {
	color: #fff;
}
.locker-nav li:not(.is-active):not(.locker-nav-logout) a:hover {
	background: var(--accent);
	color: #fff;
}
.locker-nav li:not(.is-active):not(.locker-nav-logout) a:hover i {
	color: #fff;
}
.locker-nav-logout a {
	color: var(--ink-soft);
}
.locker-nav-logout a i {
	color: var(--ink-soft);
}
.locker-nav-logout a:hover {
	background: var(--red);
	color: #fff;
}
.locker-nav-logout a:hover i {
	color: #fff;
}

@media (max-width: 700px) {
	.locker-nav ul {
		flex-direction: column;
	}
	.locker-nav li {
		border-right: none;
		border-bottom: 1px solid var(--line);
	}
	.locker-nav li:last-child {
		margin-left: 0;
	}
	.locker-nav a {
		padding: 12px 18px;
	}
}

/* ---- Content: single-column flow ---- */
.locker-content {
	width: 100%;
}

.locker-zone-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.locker-zone-head h2 {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: -0.01em;
}
.locker-zone-badge {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	background: var(--bg);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-pill);
	padding: 4px 14px;
}
.locker-zone-badge i {
	margin-right: 4px;
}

/* ---- Orders: single-column list ---- */
.locker-orders-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.locker-order-row {
	display: flex;
	gap: 18px;
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 16px 20px;
	align-items: center;
	flex-wrap: wrap;
}
.locker-order-thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	font-size: 24px;
	color: var(--ink-soft);
}
.locker-order-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.locker-order-info {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 13px;
	min-width: 200px;
}
.locker-order-number {
	font-weight: 600;
}
.locker-order-status {
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fff;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	text-transform: uppercase;
}
.locker-order-date {
	color: var(--ink-soft);
	font-size: 12px;
}
.locker-order-date i {
	margin-right: 4px;
}
.locker-order-total {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	margin-left: auto;
}
.locker-order-actions {
	display: flex;
	gap: 8px;
	width: 100%;
	margin-top: 4px;
}
.locker-order-actions .quick-view-btn,
.locker-order-actions .add-btn {
	font-size: 10px;
	padding: 5px 14px;
	flex: 0 1 auto;
	border-radius: var(--radius-pill);
}
.locker-order-actions .quick-view-btn i,
.locker-order-actions .add-btn i {
	margin-right: 4px;
}
.locker-orders-more {
	margin-top: 16px;
	font-family: var(--font-mono);
	font-size: 12px;
}
.locker-orders-more a:hover {
	color: var(--red);
}

@media (max-width: 600px) {
	.locker-order-row {
		flex-direction: column;
		align-items: stretch;
	}
	.locker-order-thumb {
		align-self: center;
	}
	.locker-order-total {
		margin-left: 0;
	}
}

/* ---- Addresses: stacked blocks ---- */
.locker-addresses {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.locker-address-block {
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 20px 24px;
}
.locker-address-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.locker-address-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
}
.locker-address-label i {
	margin-right: 6px;
}
.locker-address-block address {
	font-style: normal;
	font-size: 13px;
	line-height: 1.7;
	color: var(--ink);
}
.locker-address-empty {
	font-size: 13px;
	color: var(--ink-soft);
}
.locker-address-head .quick-view-btn {
	font-size: 10px;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
}
.locker-address-head .quick-view-btn i {
	margin-right: 4px;
}

/* ---- Preferences (single row) ---- */
.locker-preferences {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 18px;
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 18px 24px;
}
.locker-preferences-icon {
	font-size: 22px;
	color: var(--ink-soft);
	flex-shrink: 0;
}
.locker-preferences h4 {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	margin-bottom: 4px;
}
.locker-preferences p {
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.5;
	margin: 0;
}

/* ---- Your Card: stacked blocks ---- */
.locker-card-content {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.locker-club-block {
	background: var(--navy);
	color: #fff;
	border: var(--border-w) solid var(--navy);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 22px 26px;
}
.locker-club-status {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 8px;
}
.locker-club-icon {
	font-size: 32px;
	color: var(--accent-light);
}
.locker-club-status h4 {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--accent-light);
	margin: 0;
}
.locker-club-status p {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}
.locker-club-note {
	font-size: 13px;
	color: #C3C9E2;
	line-height: 1.6;
	margin: 0;
}
.locker-club-block-upsell .add-btn {
	/* Same full-width issue as .locker-student-block .add-btn above —
	   this block isn't a flex row either, so size the button to its
	   content instead of letting display:block stretch it. */
	display: inline-flex;
	align-items: center;
	width: auto;
}

.locker-details-block {
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 22px 26px;
}
.locker-details-block h4 {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	margin-bottom: 12px;
}
.locker-details-block h4 i {
	margin-right: 6px;
}
.locker-detail-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
}
.locker-detail-row:last-child {
	border-bottom: none;
}
.locker-detail-label {
	color: var(--ink-soft);
	min-width: 120px;
}
.locker-detail-value {
	font-weight: 500;
}
.locker-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.locker-detail-actions .quick-view-btn {
	font-size: 10px;
	padding: 5px 16px;
	border-radius: var(--radius-pill);
}
.locker-detail-actions .quick-view-btn i {
	margin-right: 4px;
}

.locker-student-block {
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 22px 26px;
}
.locker-student-block h4 {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	margin-bottom: 6px;
}
.locker-student-block h4 i {
	margin-right: 6px;
}
.locker-student-block p {
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.6;
	margin-bottom: 14px;
}
.locker-student-block .add-btn,
.locker-student-block .quick-view-btn {
	/* .add-btn is display:block by default (see assets/css/main.css) —
	   fine inside a flex row elsewhere on this page, but this block isn't
	   one, so left alone it stretches to the block's full width. Size to
	   content instead, same as the rest of the account page's buttons. */
	display: inline-flex;
	align-items: center;
	width: auto;
	font-size: 10px;
	padding: 6px 18px;
	border-radius: var(--radius-pill);
}
.locker-student-block .add-btn i,
.locker-student-block .quick-view-btn i {
	margin-right: 6px;
}

/* ---- Empty state ---- */
.empty-state {
	background: var(--surface);
	border: var(--border-w) dashed var(--ink-soft);
	border-radius: var(--radius);
	padding: 40px 28px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.6;
}

/* ---- Gift offer card (see inc/gift-offers.php + the top of the Your Gear
   tab in my-account.php) ---- */
.locker-gift-offer {
	display: flex;
	gap: 20px;
	background: var(--navy);
	color: #fff;
	border: var(--border-w) solid var(--navy);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 22px;
	margin-bottom: 20px;
}
.locker-gift-offer-media {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: var(--accent-light);
}
.locker-gift-offer-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.locker-gift-offer-body {
	flex: 1;
	min-width: 0;
}
.locker-gift-offer-badge {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--accent-light);
}
.locker-gift-offer-body h3 {
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: -0.01em;
	margin: 8px 0 6px;
}
.locker-gift-offer-body p {
	font-size: 13.5px;
	color: #C3C9E2;
	line-height: 1.6;
	margin-bottom: 6px;
}
.locker-gift-offer-expiry {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--accent-light);
}
.locker-gift-offer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.locker-gift-offer-actions button {
	flex: 0 1 auto;
}
.locker-gift-offer-actions .quick-view-btn {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}
.locker-gift-offer-actions .quick-view-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}
@media (max-width: 560px) {
	.locker-gift-offer { flex-direction: column; }
	.locker-gift-offer-media { width: 100%; height: 140px; }
}

/* ---- Birthday fieldset (WooCommerce's own edit-account form — see
   inc/membership-perks.php) ---- */
.dwc-birthday-fieldset {
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius);
	padding: 16px 18px 6px;
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}
.dwc-birthday-fieldset legend {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	padding: 0 6px;
}
.dwc-birthday-fieldset .form-row {
	flex: 1 1 140px;
}
.dwc-birthday-note {
	width: 100%;
	font-size: 12.5px;
	color: var(--ink-soft);
	margin: 4px 0 14px;
	line-height: 1.5;
}

/* ---- WooCommerce's own account forms (edit-account, edit-address) ----
   Not overridden as templates, so left using WooCommerce's default
   markup/classes. We dequeue WooCommerce's base CSS sitewide (see
   woocommerce-support.php) to avoid it fighting the theme's design, which
   left this specific form with no row layout, label, fieldset, or button
   styling — checkout has its own equivalent (.form-row etc. in
   cart-checkout.css) but that stylesheet isn't loaded on account pages.
   Float-based two-column layout below matches WooCommerce's own markup,
   which already includes the "clear" divs a float layout needs. */
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	max-width: 560px;
}
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row {
	margin-bottom: 18px;
}
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-address-fields .form-row-first {
	float: left;
	width: calc(50% - 8px);
}
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields .form-row-last {
	float: right;
	width: calc(50% - 8px);
}
.woocommerce-EditAccountForm .form-row-wide,
.woocommerce-address-fields .form-row-wide {
	width: 100%;
	clear: both;
}
.woocommerce-EditAccountForm .clear,
.woocommerce-address-fields .clear {
	clear: both;
	display: block;
}
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.03em;
	color: var(--ink-soft);
	margin-bottom: 6px;
}
.woocommerce-EditAccountForm label .required,
.woocommerce-address-fields label .required {
	color: var(--red);
	text-decoration: none;
}
.woocommerce-EditAccountForm fieldset {
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius);
	padding: 16px 18px 4px;
	margin: 4px 0 22px;
	clear: both;
}
.woocommerce-EditAccountForm fieldset legend {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	padding: 0 6px;
}
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"],
.woocommerce-Button.button {
	/* This rule also styles plain <a class="woocommerce-Button button">
	   links — WooCommerce's own core markup for things like the "Browse
	   products" link on the empty "No order has been made yet." orders
	   state. <button> defaults to inline-block so it was fine there, but
	   an <a> defaults to display:inline, and without this its vertical
	   padding painted outside the line box instead of reserving space —
	   visually overlapping whatever text sat above and below it. */
	display: inline-block;
	border: var(--border-w) solid var(--ink);
	border-radius: var(--radius-sm);
	background: var(--ink);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 12px 22px;
	cursor: pointer;
	text-decoration: none;
}
.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-Button.button:hover {
	background: var(--red);
	border-color: var(--red);
}
@media (max-width: 560px) {
	.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-EditAccountForm .form-row-last,
	.woocommerce-address-fields .form-row-first,
	.woocommerce-address-fields .form-row-last {
		float: none;
		width: 100%;
	}
}