/* ============================================================
   My Account — match brand styling
   ============================================================ */

.woocommerce-account .woocommerce {
	max-width: var(--hk-container-w, 100%) !important;
	margin: 0 auto !important;
	padding: 16px var(--hk-container-pad, 150px) 80px !important;
}

/* Page heading hidden via .hk-bare-page; we add our own context. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { margin-bottom: 16px; }

/* ============================================================
   Auth pages — Login / Register / Lost password (logged-out)
   ============================================================ */

.hk-auth {
	max-width: 1080px;
	margin: 0 auto;
	padding: 16px 0 40px;
}

/* ----- Hero intro ----- */
.hk-auth__hero {
	text-align: center;
	max-width: 580px;
	margin: 0 auto 48px;
}

.hk-auth__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-deep);
	background: var(--accent-soft, rgba(0, 172, 138, 0.1));
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 18px;
}

.hk-auth__title {
	font-family: var(--font-display);
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 12px;
	color: var(--ink);
}

.hk-auth__sub {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}

/* ----- Grid: two cards side-by-side (or single for solo/reset) ----- */
.hk-auth__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	align-items: stretch;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
}

.hk-auth--solo .hk-auth__grid {
	grid-template-columns: 1fr;
	max-width: 480px !important;
	margin: 0 auto;
}

.hk-auth__grid::before,
.hk-auth__grid::after {
	display: none !important;
	content: none !important;
}

/* Defensive: kill float on auth footer too (in case WC adds anything) */
.hk-auth__footer {
	clear: both;
	float: none !important;
}

/* Neutralize WC's u-columns float layout (we use grid).
   NOTE: don't strip padding here — the .col-1 / .col-2 article IS the card,
   and stripping its padding would beat .hk-auth__card { padding: ... } via !important. */
.hk-auth .u-column1,
.hk-auth .u-column2,
.hk-auth .col-1,
.hk-auth .col-2 {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

/* ----- Card ----- */
.hk-auth__card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card, 20px);
	padding: 44px 52px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	position: relative;
}

.hk-auth__card--register {
	background: linear-gradient(180deg, var(--accent-soft, rgba(0, 172, 138, 0.06)) 0%, #fff 180px);
}

.hk-auth__card-head {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
}

.hk-auth__card-title {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 8px !important;
	color: var(--ink);
}

.hk-auth__card-sub {
	font-size: 14px;
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.5;
}

/* ----- Register perks list ----- */
.hk-auth__perks {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hk-auth__perks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--ink);
	line-height: 1.4;
}

.hk-auth__perks-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--accent-soft, rgba(0, 172, 138, 0.12));
	color: var(--accent-deep);
	flex-shrink: 0;
}

/* ----- Register helper hint (when password is auto-generated) ----- */
.hk-auth__hint {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-soft);
	background: var(--cream, #faf6ec);
	border-radius: 12px;
	padding: 12px 16px;
	margin: 4px 0 18px !important;
}

.hk-auth__hint svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--accent-deep);
}

/* ----- Auth footer (fineprint below both cards) ----- */
.hk-auth__footer {
	margin: 28px auto 0;
	max-width: 560px;
	text-align: center;
}

.hk-auth__fineprint {
	margin: 0;
	font-size: 12px;
	color: var(--ink-mute);
	line-height: 1.55;
	text-align: center;
}

/* ----- Lost-password back link ----- */
.hk-auth__back {
	margin: 22px 0 0;
	text-align: center;
	font-size: 13.5px;
}

.hk-auth__back a {
	color: var(--accent-deep);
	font-weight: 500;
	text-decoration: none;
}

.hk-auth__back a:hover {
	text-decoration: underline;
}

/* Strip card styles from inner forms (cards are now the .hk-auth__card wrapper). */
.hk-auth .woocommerce-form-login,
.hk-auth .woocommerce-form-register,
.hk-auth .lost_reset_password {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 !important;
	box-shadow: none;
}

/* Auth context: full-width submit buttons + breathing margins between fields. */
.hk-auth .woocommerce form .form-row {
	margin: 0 0 18px !important;
}

.hk-auth form button[type="submit"],
.hk-auth form input[type="submit"],
.hk-auth .woocommerce-form-register__submit,
.hk-auth .lost_reset_password button[type="submit"] {
	width: 100% !important;
	justify-content: center;
	display: flex !important;
	padding: 14px 28px !important;
	font-size: 15px !important;
	margin-top: 8px;
}

.woocommerce-account h2,
.woocommerce-account h3 {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 18px;
}

/* Form fields — pill style */
.woocommerce form .form-row {
	margin: 0 0 14px !important;
	padding: 0 !important;
}

.woocommerce form .form-row label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 6px;
}

.woocommerce form .form-row .required { color: var(--coral); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select:not(.select2-hidden-accessible),
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form input[type="number"],
.woocommerce-account form textarea,
.woocommerce-account form select:not(.select2-hidden-accessible) {
	/* The :not() exclusion keeps Select2's a11y helper <select> at its
	   built-in 1px size — without this, the helper expanded to the row
	   width and triggered a 470px phantom horizontal scroll. */
	width: 100% !important;
	background: var(--cream) !important;
	border: 1px solid transparent !important;
	border-radius: 14px !important;
	padding: 12px 16px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--ink) !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	transition: border-color .15s, background .15s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce-account form input:focus,
.woocommerce-account form textarea:focus,
.woocommerce-account form select:focus {
	border-color: var(--accent) !important;
	background: #fff !important;
	outline: 0 !important;
}

.woocommerce form .form-row input.input-text::placeholder { color: var(--ink-mute); }

.woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--ink-soft);
	margin: 6px 0 0 !important;
}

.woocommerce-form__label-for-checkbox input { margin: 0; }

.woocommerce-LostPassword {
	margin: 12px 0 0;
	font-size: 13.5px;
}

.woocommerce-LostPassword a { color: var(--accent-deep); font-weight: 500; }

/* Buttons */
.woocommerce form .button,
.woocommerce-account .button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
	background: var(--accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 28px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	font-family: inherit !important;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 172, 138, .25);
	transition: background .15s, transform .15s;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.woocommerce form .button:hover,
.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover {
	background: var(--accent-deep) !important;
	transform: translateY(-1px);
}

/* ----- Logged-in dashboard layout -----
   Scoped to NOT match logged-out auth-style endpoints (lost-password,
   reset-password) that a logged-in user might land on for security flows.
   On those, render as solo auth card, not the dashboard 2-col grid. */
.woocommerce-account.logged-in:not(.woocommerce-lost-password):not(.woocommerce-checkout) .woocommerce {
	display: grid !important;
	grid-template-columns: 260px 1fr;
	gap: 28px !important;
	align-items: start;
	padding-top: 5px !important;
	max-width: 100% !important;
	overflow-x: clip;
}

/* Override WC default width:76% + float:right which leaves wasted space to the right
   of the my-account content area. Grid already manages column widths. */
.woocommerce-account .woocommerce-MyAccount-content {
	width: 100% !important;
	float: none !important;
}

.woocommerce-account.logged-in .woocommerce > .hk-account-greeting,
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	min-width: 0;
}

/* Grid children must allow shrinking, otherwise content widths force horizontal overflow */
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
	min-width: 0;
	max-width: 100%;
}

/* Sidebar nav — override Storefront defaults (width:30%/float:left + ::before icons) */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100% !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 16px;
	position: sticky;
	top: calc(var(--hk-header-h, 68px) + 16px);
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 0 !important;
	box-shadow: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation::before,
.woocommerce-account .woocommerce-MyAccount-navigation::after,
.woocommerce-account .woocommerce-MyAccount-navigation ul::before,
.woocommerce-account .woocommerce-MyAccount-navigation ul::after {
	display: none !important;
	content: none !important;
	border: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
	display: block;
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 14px;
	padding: 12px 22px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none !important;
	transition: background .15s, color .15s;
}

/* Kill Storefront's default emoji/glyph icons rendered via ::before */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::after {
	display: none !important;
	content: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--accent-tint);
	color: var(--accent-deep);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--accent-soft);
	color: var(--accent-deep);
}

/* Main content */
.woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 32px;
}

.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

.woocommerce-MyAccount-content a:not(.button) {
	color: var(--accent-deep);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-MyAccount-content a:not(.button):hover { color: var(--accent); }

/* Tables (orders, downloads) */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table {
	width: 100% !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-card) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	box-shadow: none !important;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table thead th {
	background: var(--cream) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-mute) !important;
	padding: 14px 16px !important;
	border-bottom: 1px solid var(--line) !important;
	text-align: left;
}

.woocommerce-MyAccount-content table.shop_table td,
.woocommerce-MyAccount-content table tbody td {
	padding: 16px !important;
	border-top: 1px solid var(--line) !important;
	font-size: 14px !important;
	background: #fff !important;
}

.woocommerce-MyAccount-content table tbody tr:first-child td { border-top: 0 !important; }

/* Order status pills */
.woocommerce-orders-table__cell-order-status mark {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--accent-tint) !important;
	color: var(--accent-deep);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.woocommerce-orders-table__cell-order-actions .button {
	font-size: 12px !important;
	padding: 8px 16px !important;
}

.woocommerce-MyAccount-content .button.view {
	background: transparent !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	box-shadow: none !important;
}

.woocommerce-MyAccount-content .button.view:hover {
	border-color: var(--accent) !important;
	color: var(--accent-deep) !important;
}

/* Resume-payment action: amber-tinted pill to draw attention without screaming */
.woocommerce-MyAccount-content .button.hk_resume_payment {
	background: #b45309 !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 4px 12px rgba(180, 83, 9, .25);
}

.woocommerce-MyAccount-content .button.hk_resume_payment:hover {
	background: #92400e !important;
	box-shadow: 0 6px 14px rgba(180, 83, 9, .35);
}

/* View-order page top banner for pending payment */
.hk-resume-payment-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 24px;
	padding: 18px 22px;
	background: linear-gradient(180deg, #fff7e6 0%, #fff 100%);
	border: 1px solid #f5d99a;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(245, 158, 11, .08);
}

.hk-resume-payment-banner__copy {
	color: #78350f;
	font-size: 14px;
	line-height: 1.5;
	flex: 1 1 280px;
}

.hk-resume-payment-banner__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #b45309;
	color: #fff !important;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 999px;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(180, 83, 9, .25);
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.hk-resume-payment-banner__btn:hover {
	background: #92400e;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(180, 83, 9, .35);
}

@media (max-width: 640px) {
	.hk-resume-payment-banner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 14px;
		padding: 18px 20px;
	}
	.hk-resume-payment-banner__copy {
		flex: 0 0 auto;
	}
	.hk-resume-payment-banner__btn {
		justify-content: center;
	}
}

/* Address blocks */
.woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 20px !important;
}

.woocommerce-Address {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--cream);
	border-radius: var(--radius-card);
	padding: 24px !important;
}

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

.woocommerce-Address-title h3 { margin: 0; font-size: 18px; }

.woocommerce-Address address {
	font-style: normal;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.6;
}

/* Pagination */
.woocommerce-MyAccount-content .woocommerce-pagination ul li {
	border: 0 !important;
}

/* Notices already styled globally via toast */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
	display: block !important;
	background: var(--cream-deep);
	border-radius: 14px;
	padding: 14px 18px;
	color: var(--ink);
	border-left: 3px solid var(--accent);
	font-size: 14px;
	margin: 0 0 16px;
}

.woocommerce-account .woocommerce-error { border-left-color: var(--coral); }

/* ============================================================
   Dashboard layout
   ============================================================ */

.hk-account-dash {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Greeting banner */
.hk-account-greeting {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
	color: #fff;
	border-radius: var(--radius-card);
	padding: 36px 40px;
	position: relative;
	overflow: hidden;
}

.hk-account-greeting__eyebrow {
	font-size: 14px;
	opacity: .9;
	margin: 0 0 4px;
	font-weight: 500;
}

.hk-account-greeting__role {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 14px;
	position: relative;
	z-index: 1;
	backdrop-filter: blur(2px);
}

.hk-account-greeting__role svg { flex-shrink: 0; }

.hk-account-greeting__title {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 24px;
	line-height: 1.1;
	color: #fff;
}

.hk-account-greeting__stats {
	display: flex;
	gap: 56px;
	flex-wrap: wrap;
}

.hk-account-greeting__stats > div {
	min-width: 0;
}

.hk-account-greeting__stats .num {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	transition: opacity .2s ease;
}

/* Zero stats fade back so they don't shout "kosong" at the user. */
.hk-account-greeting__stats .num[data-zero="1"] {
	opacity: 0.45;
	font-weight: 600;
}

.hk-account-greeting__stats .label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 4px;
	opacity: .85;
}

.hk-account-greeting__blob {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	pointer-events: none;
}

.hk-account-greeting__blob--1 {
	width: 220px;
	height: 220px;
	top: -60px;
	right: -40px;
}

.hk-account-greeting__blob--2 {
	width: 140px;
	height: 140px;
	bottom: -50px;
	right: 200px;
	background: rgba(255,255,255,.07);
}

/* Pill links */
.hk-pill-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	color: var(--ink) !important;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 14px !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color .15s, background .15s, color .15s;
}

.hk-pill-link:hover {
	border-color: var(--accent);
	color: var(--accent-deep) !important;
}

.hk-pill-link--primary {
	background: var(--accent);
	color: #fff !important;
	border-color: var(--accent);
}

.hk-pill-link--primary:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #fff !important;
}

.hk-pill-link--resume {
	background: #b45309 !important;
	color: #fff !important;
	border-color: #b45309 !important;
	box-shadow: 0 2px 6px rgba(180, 83, 9, .25);
}

.hk-pill-link--resume:hover {
	background: #92400e !important;
	border-color: #92400e !important;
	color: #fff !important;
	box-shadow: 0 4px 10px rgba(180, 83, 9, .35);
}

/* Active order card */
.hk-account-active {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 28px;
	border-left: 4px solid var(--accent);
}

.hk-account-active__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.hk-account-active__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--accent-tint);
	color: var(--accent-deep);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	padding: 5px 12px;
	border-radius: 999px;
	margin-right: 8px;
}

.hk-account-active__pill.is-pending { background: rgba(255,138,101,.15); color: #b34f30; }
.hk-account-active__pill.is-done    { background: rgba(22,163,74,.15);  color: #16a34a; }
.hk-account-active__pill.is-cancel  { background: rgba(0,0,0,.08);      color: var(--ink-mute); }

.hk-account-active__num {
	font-size: 13px;
	color: var(--ink-mute);
	font-weight: 600;
}

.hk-account-active__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.hk-account-active__title {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 4px;
	line-height: 1.2;
}

.hk-account-active__sub {
	color: var(--ink-soft);
	margin: 0 0 24px;
	font-size: 14px;
}

.hk-account-active__sub strong { color: var(--ink); }

.hk-account-active__steps {
	list-style: none !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	position: relative;
}

.hk-account-active__steps::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 6%;
	right: 6%;
	height: 2px;
	background: var(--line);
	z-index: 0;
}

.hk-account-active__steps li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
	z-index: 1;
	padding: 0 !important;
	margin: 0 !important;
}

.hk-account-active__steps .dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-mute);
}

.hk-account-active__steps .label {
	font-size: 12px;
	color: var(--ink-mute);
	text-align: center;
	font-weight: 500;
}

.hk-account-active__steps li.is-done .dot {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.hk-account-active__steps li.is-done .label {
	color: var(--ink);
	font-weight: 600;
}

.hk-account-active__steps li.is-current .dot {
	border-color: var(--accent);
	color: var(--accent-deep);
	box-shadow: 0 0 0 4px var(--accent-soft);
}

.hk-account-active__steps li.is-current .label {
	color: var(--accent-deep);
	font-weight: 700;
}

.hk-account-active__items {
	display: flex;
	gap: 16px;
	padding-top: 18px;
	border-top: 1px dashed var(--line);
	flex-wrap: wrap;
}

.hk-account-active__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hk-account-active__item img,
.hk-account-active__item-ph {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--accent-soft);
}

.hk-account-active__item-name {
	font-size: 14px;
	font-weight: 600;
}

.hk-account-active__item-price {
	font-size: 13px;
	color: var(--ink-mute);
}

/* History list */
.hk-account-history {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 28px;
}

.hk-account-history__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	gap: 12px;
	flex-wrap: wrap;
}

.hk-account-history__head h2 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.hk-account-history__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hk-account-history__item {
	background: var(--cream);
	border-radius: 14px;
	padding: 16px 18px;
	margin: 0 !important;
}

.hk-account-history__row {
	display: grid;
	grid-template-columns: 140px auto 1fr auto;
	gap: 16px;
	align-items: center;
}

.hk-account-history__num {
	font-weight: 800;
	font-size: 14px;
	white-space: nowrap;
}

.hk-account-history__date {
	font-size: 12.5px;
	color: var(--ink-mute);
	margin-top: 2px;
	white-space: nowrap;
}

.hk-account-history__thumbs {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hk-account-history__thumbs img,
.hk-account-history__thumbs .ph {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--accent-soft);
}

.hk-account-history__qty {
	font-size: 13px;
	color: var(--ink-soft);
	margin-left: 8px;
}

.hk-account-history__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex-shrink: 0;
	justify-content: flex-end;
}

/* ----- Orders page variant: richer per-order card with names + meta line ----- */
.hk-account-history--page .hk-account-history__head {
	margin-bottom: 22px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 16px;
}

.hk-account-history__count {
	font-size: 13px;
	color: var(--ink-mute);
	font-weight: 500;
}

.hk-account-history--page .hk-account-history__item {
	background: #fff;
	border: 1px solid var(--line);
	padding: 18px 20px;
}

.hk-account-history--page .hk-account-history__row {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	grid-template-areas:
		"info pill"
		"products products"
		"meta actions" !important;
	gap: 14px 16px !important;
	align-items: center;
}

.hk-account-history--page .hk-account-history__row > .hk-account-history__col {
	grid-area: info !important;
	min-width: 0;
}
.hk-account-history--page .hk-account-history__row > .hk-account-active__pill {
	grid-area: pill !important;
	justify-self: end;
	align-self: start;
}
.hk-account-history--page .hk-account-history__row > .hk-account-history__products {
	grid-area: products !important;
	min-width: 0;
}
.hk-account-history--page .hk-account-history__row > .hk-account-history__meta {
	grid-area: meta !important;
	min-width: 0;
}
.hk-account-history--page .hk-account-history__row > .hk-account-history__actions {
	grid-area: actions !important;
}

.hk-account-history__products {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 4px 0;
	border-top: 1px dashed var(--line);
	border-bottom: 1px dashed var(--line);
	padding: 12px 0;
}

.hk-account-history__products img,
.hk-account-history__products .ph {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--accent-soft);
	border: 1px solid rgba(0, 0, 0, .04);
}

.hk-account-history__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--bg);
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 700;
}

.hk-account-history__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hk-account-history__names {
	font-size: 13.5px;
	color: var(--ink-soft);
	line-height: 1.4;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.hk-account-history__names-more {
	color: var(--ink-mute);
	font-weight: 500;
}

.hk-account-history__totals {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.hk-account-history__totals .hk-account-history__qty {
	font-size: 12px;
	color: var(--ink-mute);
	margin-left: 0;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
}

.hk-account-history__dot { color: var(--ink-mute); }

.hk-account-history__price {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
}

.hk-account-history__pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.hk-account-history__page {
	font-size: 13px;
	color: var(--ink-mute);
	font-weight: 600;
}

@media (max-width: 640px) {
	.hk-account-history--page .hk-account-history__item { padding: 16px; }
	.hk-account-history--page .hk-account-history__row {
		grid-template-columns: 1fr auto !important;
		grid-template-areas:
			"info pill"
			"products products"
			"meta meta"
			"actions actions" !important;
		gap: 12px !important;
	}
	.hk-account-history--page .hk-account-history__row > .hk-account-history__actions {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: 100%;
	}
	.hk-account-history--page .hk-account-history__row > .hk-account-history__actions .hk-pill-link {
		justify-content: center;
		text-align: center;
	}
	.hk-account-history__products img,
	.hk-account-history__products .ph,
	.hk-account-history__more {
		width: 40px;
		height: 40px;
	}
	.hk-account-history__price { font-size: 16px; }
}

.hk-account-empty {
	background: #fff;
	border: 1px dashed var(--line);
	border-radius: var(--radius-card);
	padding: 40px;
	text-align: center;
	color: var(--ink-soft);
}

.hk-account-empty a { color: var(--accent-deep); font-weight: 600; }

/* Sidebar nav with icons */
.woocommerce-MyAccount-navigation .hk-acc-nav__icon {
	width: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-mute);
	flex-shrink: 0;
	margin-left: 4px;
}

.woocommerce-MyAccount-navigation li.is-active .hk-acc-nav__icon,
.woocommerce-MyAccount-navigation li a:hover .hk-acc-nav__icon {
	color: var(--accent-deep);
}

.woocommerce-MyAccount-navigation .hk-acc-nav__label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.woocommerce-MyAccount-navigation .hk-acc-nav__count {
	background: var(--bg);
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	min-width: 22px;
	text-align: center;
	margin-left: auto;
	margin-right: 4px;
}

.woocommerce-MyAccount-navigation li.is-active .hk-acc-nav__count {
	background: rgba(255, 255, 255, 0.6);
	color: var(--accent-deep);
}

/* Logout: muted color, no divider (seamless nav) */
.woocommerce-account .woocommerce-MyAccount-navigation li.hk-acc-nav__logout-li {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.hk-acc-nav__logout-li a {
	color: var(--ink-mute);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.hk-acc-nav__logout-li a:hover {
	color: var(--ink);
	background: var(--bg);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.hk-acc-nav__logout-li .hk-acc-nav__icon {
	color: var(--ink-mute);
}

/* Page heading custom */
.hk-account__head {
	margin-bottom: 28px;
	max-width: 960px;
	margin: 0 auto 28px;
}

.hk-account__head h1 {
	font-size: clamp(40px, 5vw, 56px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
	margin: 0 0 8px;
}

.hk-account__head p {
	color: var(--ink-soft);
	font-size: 15px;
	margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 1fr !important;
	}
	/* Nav becomes a 2-col tile grid (no more horizontal scroll). Logout spans full width. */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
		padding: 10px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		flex-direction: initial !important;
		gap: 8px;
		overflow: visible;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: initial;
		min-width: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		padding: 14px 14px !important;
		border-radius: 14px !important;
		background: var(--bg);
		border: 1px solid var(--line);
		gap: 10px !important;
		min-height: 56px;
		box-sizing: border-box;
		white-space: normal;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
		background: var(--accent-tint);
		border-color: var(--accent-soft);
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		background: var(--accent-soft);
		border-color: var(--accent-soft);
	}
	.woocommerce-MyAccount-navigation .hk-acc-nav__icon {
		margin-left: 0 !important;
		width: 20px;
	}
	.woocommerce-MyAccount-navigation .hk-acc-nav__label {
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.woocommerce-MyAccount-navigation .hk-acc-nav__count {
		font-size: 11.5px;
		padding: 2px 8px;
		min-width: 20px;
		margin-right: 0;
	}
	/* Logout: full-width row, muted, no border (visual separator) */
	.woocommerce-account .woocommerce-MyAccount-navigation li.hk-acc-nav__logout-li {
		grid-column: 1 / -1;
		margin: 4px 0 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li.hk-acc-nav__logout-li a {
		justify-content: center;
		background: transparent !important;
		border: 1px dashed var(--line) !important;
		min-height: 48px;
		font-weight: 500;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li.hk-acc-nav__logout-li a:hover {
		background: var(--bg) !important;
		border-color: var(--ink-mute) !important;
	}
	.hk-auth__grid {
		grid-template-columns: 1fr !important;
		max-width: 480px;
		margin: 0 auto !important;
		gap: 20px !important;
	}
	.hk-auth__hero { margin-bottom: 24px; }
	.woocommerce-Addresses { grid-template-columns: 1fr !important; }
}

/* Order-history rows reflow earlier than greeting (content is denser).
   Picked @768 so tablets-portrait don't get the broken 4-col layout. */
@media (max-width: 768px) {
	.hk-account-history { padding: 20px 18px; }
	.hk-account-history__head { margin-bottom: 14px; }
	.hk-account-history__head h2 { font-size: 18px; }

	.hk-account-history__row {
		grid-template-columns: 1fr auto !important;
		grid-template-areas:
			"info status"
			"thumbs thumbs"
			"actions actions" !important;
		gap: 10px 12px !important;
		align-items: center;
	}
	.hk-account-history__row > .hk-account-history__col { grid-area: info !important; min-width: 0; }
	.hk-account-history__row > .hk-account-active__pill {
		grid-area: status !important;
		justify-self: end;
		align-self: start;
		font-size: 10px;
		padding: 4px 10px;
		white-space: nowrap;
	}
	.hk-account-history__row > .hk-account-history__thumbs {
		grid-area: thumbs !important;
		flex-wrap: wrap;
	}
	.hk-account-history__thumbs img,
	.hk-account-history__thumbs .ph { width: 32px; height: 32px; }
	.hk-account-history__qty { font-size: 12.5px; margin-left: 4px; }

	.hk-account-history__row > .hk-account-history__actions {
		grid-area: actions !important;
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: 100%;
		flex-wrap: nowrap;
	}
	/* When only one action button, span full width — avoids awkward empty column */
	.hk-account-history__row > .hk-account-history__actions:has(> :only-child) {
		grid-template-columns: 1fr;
	}
	.hk-account-history__row > .hk-account-history__actions .hk-pill-link {
		justify-content: center;
		text-align: center;
	}
	.hk-account-history__row > .hk-account-history__actions .hk-pill-link {
		justify-content: center;
		padding: 10px 14px !important;
		text-align: center;
		font-weight: 600;
		width: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 640px) {
	.woocommerce-account .woocommerce { padding: 20px 12px 40px !important; }
	.woocommerce-MyAccount-content { padding: 16px; }
	/* Wishlist page: give cards full breathing room (mirror shop archive padding) */
	.woocommerce-MyAccount-content .hk-wishlist-page { padding: 0; }

	/* Nav tiles: tighter on phone */
	.woocommerce-account .woocommerce-MyAccount-navigation { padding: 8px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { gap: 6px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		padding: 12px !important;
		min-height: 52px;
		gap: 8px !important;
	}
	.woocommerce-MyAccount-navigation .hk-acc-nav__label { font-size: 13.5px; }
	.woocommerce-MyAccount-content table th,
	.woocommerce-MyAccount-content table td { padding: 10px !important; font-size: 13px !important; }

	/* ---- Greeting banner ---- */
	.hk-account-greeting {
		padding: 22px 20px;
		border-radius: 18px;
	}
	.hk-account-greeting__title {
		font-size: 26px;
		margin-bottom: 18px;
	}
	.hk-account-greeting__role {
		font-size: 10.5px;
		padding: 4px 10px;
		margin-bottom: 12px;
	}
	.hk-account-greeting__stats {
		gap: 24px;
	}
	.hk-account-greeting__stats .num { font-size: 26px; }
	.hk-account-greeting__stats .label { font-size: 10px; letter-spacing: 0.1em; }
	.hk-account-greeting__blob--1 { width: 160px; height: 160px; top: -50px; right: -40px; }
	.hk-account-greeting__blob--2 { width: 100px; height: 100px; bottom: -40px; right: 140px; }

	/* Auth cards on mobile */
	.hk-auth { padding: 8px 0 16px; }
	.hk-auth__hero { margin-bottom: 28px; }
	.hk-auth__title { font-size: 28px; }
	.hk-auth__sub { font-size: 14px; }
	.hk-auth__card {
		padding: 30px 26px;
		border-radius: 18px;
	}
	.hk-auth__card-head {
		margin-bottom: 22px;
		padding-bottom: 18px;
	}
	.hk-auth__card-title { font-size: 20px; }
	.hk-auth__card-sub { font-size: 13.5px; }
	.hk-auth__perks { margin-bottom: 22px; gap: 10px; }
	.hk-auth__perks li { font-size: 13.5px; }
	.hk-auth .woocommerce form .form-row { margin: 0 0 16px !important; }
	.woocommerce-account h2 { font-size: 20px; margin: 0 0 14px; }
	.woocommerce form .form-row { margin: 0 0 12px !important; }
	.woocommerce form .form-row label { font-size: 11.5px; }
	.woocommerce-account form input.input-text,
	.woocommerce-account form input[type="text"],
	.woocommerce-account form input[type="email"],
	.woocommerce-account form input[type="password"],
	.woocommerce-account form input[type="tel"] {
		padding: 13px 14px !important;
		font-size: 15px !important;
	}
}

/* ----- Password show/hide toggle (login + register) ----- */
.woocommerce form .password-input {
	display: block !important;
	position: relative;
	width: 100%;
}
.woocommerce form .password-input input { padding-right: 46px !important; }
.woocommerce form .show-password-input {
	position: absolute !important;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	color: var(--ink-mute) !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	opacity: .6;
	font-size: 0 !important;
	text-indent: 0 !important;
	transition: opacity .15s, color .15s;
}
.woocommerce form .show-password-input::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
}
.woocommerce form .show-password-input.display-password::before {
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a19.7 19.7 0 0 1 4.06-5.06M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a19.6 19.6 0 0 1-3.17 4.19M1 1l22 22M9.88 9.88a3 3 0 0 0 4.24 4.24'/></svg>") center/contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a19.7 19.7 0 0 1 4.06-5.06M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a19.6 19.6 0 0 1-3.17 4.19M1 1l22 22M9.88 9.88a3 3 0 0 0 4.24 4.24'/></svg>") center/contain no-repeat;
}
.woocommerce form .show-password-input:hover { color: var(--accent-deep) !important; opacity: 1; }

/* ----- Remember-me checkbox ----- */
.woocommerce-account .woocommerce-form__label-for-checkbox {
	margin: 14px 0 18px !important;
	gap: 10px;
	cursor: pointer;
}
.woocommerce-account .woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
	cursor: pointer;
	flex-shrink: 0;
}
.woocommerce-account .woocommerce-form__label-for-checkbox span {
	font-size: 13.5px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
	color: var(--ink);
}

/* ----- Login form layout: flatten last form-row + lost_password into rows
   so that Remember-me (left) + Lost-password (right) share a row above button. ----- */
.woocommerce form.woocommerce-form-login {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0;
	align-items: flex-start;
}
.woocommerce form.woocommerce-form-login > p.form-row { width: 100%; }
.woocommerce form.woocommerce-form-login > p.form-row:last-of-type {
	display: contents !important;
}
.woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme {
	order: 10;
	margin: 6px 0 0 !important;
	width: 100%;
}
.woocommerce form.woocommerce-form-login p.woocommerce-LostPassword {
	order: 13;
	margin: 14px 0 0 !important;
	width: 100%;
	text-align: center;
	font-size: 13.5px;
}
.woocommerce form.woocommerce-form-login p.woocommerce-LostPassword a {
	color: var(--accent-deep);
	font-weight: 500;
	text-decoration: none;
}
.woocommerce form.woocommerce-form-login p.woocommerce-LostPassword a:hover { text-decoration: underline; }
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit {
	order: 12;
	width: 100% !important;
	justify-content: center;
	display: flex !important;
	margin-top: 16px;
}

/* Stack rememberme + lost on one row using nested flex container at form-level */
.woocommerce form.woocommerce-form-login::before {
	content: none; /* placeholder, layout handled via order/width */
}

/* ----- Wishlist inside my-account (compact context) ----- */
.woocommerce-MyAccount-content .hk-wishlist-page {
	max-width: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-content .hk-wishlist-page__head {
	margin-bottom: 20px;
}

.woocommerce-MyAccount-content .hk-wishlist-page__head h1 {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.woocommerce-MyAccount-content .hk-wishlist-page__count {
	color: var(--ink-soft);
	font-size: 22px;
	font-weight: 600;
}

.woocommerce-MyAccount-content .hk-wishlist-page__sub {
	color: var(--ink-soft);
	font-size: 14px;
	margin: 12px 0 0;
}

/* 3-col grid inside my-account content area (~652px wide). 4 cols was too
   tight (~134px cards) — variable price ranges "Rp195.000 – Rp205.000" wrapped
   into broken lines. 3 cols gives ~200px cards which fits B2B price block. */
.woocommerce-MyAccount-content ul#hk-wishlist-grid,
.woocommerce-MyAccount-content #hk-wishlist-grid.hk-grid,
.woocommerce-MyAccount-content ul.products#hk-wishlist-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
	width: auto !important;
}

/* Mobile & tablet (≤1024 — same breakpoint where my-account nav collapses to tiles):
   1-col centered. The B2B price block (variable price range + role badge) needs ~280px
   to render cleanly; 2- or 3-col layouts at these viewports clip prices. */
@media (max-width: 1024px) {
	.woocommerce-MyAccount-content ul#hk-wishlist-grid,
	.woocommerce-MyAccount-content #hk-wishlist-grid.hk-grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
		max-width: 460px;
		margin: 0 auto !important;
	}
}

/* Wishlist cards inside my-account — re-apply shop .hk-card visuals
   (storefront default ul.products li styles strip background in this context). */
.woocommerce-MyAccount-content #hk-wishlist-grid li.hk-card,
.woocommerce-MyAccount-content #hk-wishlist-grid li.product {
	background: #fff !important;
	border-radius: var(--radius-card) !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
	display: flex !important;
	flex-direction: column !important;
	text-align: center !important;
	transition: transform .15s ease, box-shadow .15s ease !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid li.hk-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__media {
	position: relative !important;
	display: block !important;
	aspect-ratio: 1 / 1 !important;
	background: var(--accent-tint) !important;
	overflow: hidden !important;
	border-radius: 0 !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__media img,
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__body {
	padding: 16px 18px 20px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	text-align: center !important;
	min-width: 0 !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__price {
	max-width: 100% !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__price .hk-price-b2b {
	justify-content: center !important;
	max-width: 100% !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__cat {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	color: var(--ink-mute) !important;
	margin: 0 !important;
	text-align: center !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__title {
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	text-align: center !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__title a,
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__title a:hover,
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__title a:focus {
	color: var(--ink) !important;
	text-decoration: none !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__price {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ink) !important;
	margin: 4px 0 0 !important;
	text-align: center !important;
}

/* Stock indicator — green dot + green text */
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__stock {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	margin: 4px auto 0 !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__stock .dot {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__stock.is-ok       { color: #16a34a !important; }
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__stock.is-ok .dot  { background: #16a34a !important; }
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__stock.is-low      { color: var(--coral) !important; }
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__stock.is-low .dot { background: var(--coral) !important; }
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__stock.is-out      { color: var(--ink-mute) !important; }
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__stock.is-out .dot { background: var(--ink-mute) !important; }

/* Heart pill — white circle, coral filled heart (active state) */
.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__wish {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	bottom: auto !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12) !important;
	color: var(--coral) !important;
	cursor: pointer;
	z-index: 3;
}

.woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__wish svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	fill: var(--coral) !important;
	stroke: var(--coral) !important;
}

/* Wishlist actions — design-system buttons (override storefront button defaults) */
.hk-wishlist-page__actions .hk-btn {
	text-decoration: none;
}

.woocommerce-MyAccount-content .hk-wishlist-page__actions .hk-btn,
.woocommerce-account .hk-wishlist-page__actions .hk-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 14px 22px !important;
	border-radius: var(--radius-btn) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	border: 2px solid transparent !important;
	cursor: pointer;
}

.woocommerce-MyAccount-content .hk-wishlist-page__actions .hk-btn--ink,
.woocommerce-account .hk-wishlist-page__actions .hk-btn--ink {
	background: var(--ink) !important;
	color: #fff !important;
	border-color: var(--ink) !important;
}

.woocommerce-MyAccount-content .hk-wishlist-page__actions .hk-btn--ink:hover,
.woocommerce-account .hk-wishlist-page__actions .hk-btn--ink:hover {
	background: #000 !important;
	color: #fff !important;
}

.hk-wishlist-page__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--accent-deep, #00865d);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	padding: 14px 8px;
	transition: gap .15s ease, color .15s ease;
}

.hk-wishlist-page__link:hover {
	color: var(--accent, #00ac8a);
	gap: 10px;
}

.woocommerce-MyAccount-content .hk-wishlist-page__link,
.woocommerce-MyAccount-content .hk-wishlist-page__link:hover {
	color: var(--accent-deep, #00865d) !important;
	text-decoration: none !important;
}

/* ===========================================
   Alamat tersimpan (My Addresses) page
   =========================================== */
.hk-address__head {
	margin-bottom: 20px;
}

.hk-address__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 4px;
}

.hk-address__sub {
	color: var(--ink-soft);
	font-size: 14px;
	margin: 0;
}

.hk-address__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.hk-address__card {
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	padding: 20px 22px;
	transition: border-color .15s ease;
}

.hk-address__card.is-default {
	border-color: var(--accent);
}

.hk-address__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.hk-address__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink-soft);
}

.hk-address__label svg {
	color: var(--ink-soft);
	flex-shrink: 0;
}

.hk-address__card.is-default .hk-address__label svg {
	color: var(--accent);
}

.hk-address__name {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}

.hk-address__pill {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	background: var(--accent-tint);
	color: var(--accent-deep);
	padding: 3px 8px;
	border-radius: 999px;
	margin-left: 4px;
}

.hk-address__edit {
	color: var(--accent-deep) !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
	flex-shrink: 0;
}

.hk-address__edit:hover {
	color: var(--accent) !important;
	text-decoration: underline !important;
}

.hk-address__recipient {
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 6px;
	font-size: 14.5px;
}

.hk-address__body {
	font-style: normal;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 6px;
}

.hk-address__body br + br { display: none; }

.hk-address__phone {
	color: var(--ink-soft);
	font-size: 14px;
	margin: 0;
}

.hk-address__empty {
	color: var(--ink-mute);
	font-size: 14px;
	margin: 0;
	font-style: italic;
}

@media (max-width: 720px) {
	.hk-address__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Wishlist mobile hard-override — must beat Storefront's float
   layout (ul.products li.product { width:29.4%; float:left }) and
   any cascade ambiguity. Specificity here is intentionally high
   (html body + body class + content class + ID + class).
   ============================================================ */
@media (max-width: 1024px) {
	html body.woocommerce-account .woocommerce-MyAccount-content ul.products#hk-wishlist-grid.hk-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
	}
	html body.woocommerce-account .woocommerce-MyAccount-content ul#hk-wishlist-grid > li.product,
	html body.woocommerce-account .woocommerce-MyAccount-content ul#hk-wishlist-grid > li.hk-card {
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		clear: none !important;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column !important;
	}
	/* Tighter body padding + smaller text so price block fits in narrow 2-col cells */
	html body.woocommerce-account .woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__body {
		padding: 12px 12px 14px !important;
		gap: 4px !important;
	}
	html body.woocommerce-account .woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__title {
		font-size: 14px !important;
	}
	html body.woocommerce-account .woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__price {
		font-size: 15px !important;
	}
	html body.woocommerce-account .woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__price .hk-price-b2b {
		flex-direction: column !important;
		align-items: center !important;
		gap: 2px !important;
	}
	html body.woocommerce-account .woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__price del,
	html body.woocommerce-account .woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__price .hk-price-b2b del {
		font-size: 12px !important;
	}
	html body.woocommerce-account .woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__price .hk-price-b2b__tag {
		font-size: 9.5px !important;
		padding: 1px 6px !important;
	}
	html body.woocommerce-account .woocommerce-MyAccount-content #hk-wishlist-grid .hk-card__stock {
		font-size: 11.5px !important;
	}
}