/* ==========================================================
   Cart + Checkout page polish
   ========================================================== */

body.hk-cart-checkout-page,
.hk-cart-checkout-page .site,
.hk-cart-checkout-page #page,
.hk-cart-checkout-page .site-content,
.hk-cart-checkout-page #primary,
.hk-cart-checkout-page .content-area,
.hk-cart-checkout-page main {
	overflow-x: hidden !important;
}

.hk-cart-checkout-page #primary,
.hk-cart-checkout-page .content-area,
.hk-cart-checkout-page main {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
}

body.hk-bare-page.hk-cart-checkout-page #content {
	background: var(--bg);
	padding: 32px var(--hk-container-pad, 150px) 80px !important;
	overflow-x: hidden;
}

@media (max-width: 1024px) {
	body.hk-bare-page.hk-cart-checkout-page #content {
		padding: 24px 32px 64px !important;
	}
}

@media (max-width: 640px) {
	body.hk-bare-page.hk-cart-checkout-page #content {
		padding: 16px 16px 48px !important;
	}
}

/* Hide blog/widget sidebar artifacts */
.hk-cart-checkout-page .widget-area,
.hk-cart-checkout-page #secondary {
	display: none !important;
}

.hk-cart-checkout-page #primary,
.hk-cart-checkout-page .content-area {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* Storefront's body.right-sidebar wraps .content-area in a float:left/74% layout
   (sidebar reserved on right). We hide #secondary but the content-area itself
   stays floated — leaving a phantom ~26% empty column. Hard-cancel here.
   Higher-specificity targets so this beats any cascade ordering surprise. */
body.hk-cart-checkout-page.right-sidebar .content-area,
body.hk-cart-checkout-page .content-area,
body.right-sidebar.hk-cart-checkout-page #primary,
.hk-cart-checkout-page.right-sidebar .content-area,
.hk-cart-checkout-page.right-sidebar #primary {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: both !important;
}

body.hk-cart-checkout-page .col-full,
body.hk-cart-checkout-page #content > .col-full {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* Page title */
.hk-cart-checkout-page .page-title,
.hk-cart-checkout-page .entry-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 24px;
	letter-spacing: -.01em;
}

/* ==========================================================
   /CART/ page
   ========================================================== */

.hk-cart-checkout-page.woocommerce-cart .woocommerce {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 380px !important;
	gap: 24px !important;
	align-items: start !important;
}

/* Hide empty notices wrapper so it doesn't claim a grid cell */
.hk-cart-checkout-page .woocommerce-notices-wrapper:empty {
	display: none !important;
}

.hk-cart-checkout-page.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1 !important;
	grid-row: auto !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
}

.hk-cart-checkout-page.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
	grid-column: 1 !important;
	grid-row: 1 !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
	align-self: start;
}

.hk-cart-checkout-page.woocommerce-cart .woocommerce > .cart-collaterals {
	grid-column: 2 !important;
	grid-row: 1 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	min-width: 0;
	align-self: start;
}

/* Items table card */
.woocommerce-cart table.shop_table {
	background: #fff;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-card) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	padding: 0;
	margin: 0 !important;
}

.woocommerce-cart table.shop_table thead th {
	background: var(--bg);
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
}

.woocommerce-cart table.shop_table tbody td {
	padding: 18px !important;
	border-top: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce-cart table.shop_table tbody tr:first-child td {
	border-top: 0;
}

.woocommerce-cart .product-thumbnail img {
	width: 72px !important;
	height: 72px !important;
	border-radius: 12px;
	object-fit: cover;
}

.woocommerce-cart .product-name a {
	color: var(--ink) !important;
	font-weight: 600;
	text-decoration: none !important;
	font-size: 15px;
}

.woocommerce-cart .product-name a:hover {
	color: var(--accent-deep) !important;
}

.woocommerce-cart .product-name .variation {
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--ink-soft);
}

.woocommerce-cart .product-name .variation dt,
.woocommerce-cart .product-name .variation dd {
	display: inline;
	margin: 0;
	padding: 0;
}

.woocommerce-cart .product-name .variation dt { font-weight: 600; }
.woocommerce-cart .product-name .variation dd::after { content: ""; }
.woocommerce-cart .product-name .variation dd + dt::before { content: " · "; color: var(--ink-mute); }

.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal {
	font-weight: 600;
	color: var(--ink);
}

.woocommerce-cart .product-subtotal {
	font-weight: 700;
}

.woocommerce-cart .product-quantity .qty {
	width: 70px !important;
	padding: 8px 10px !important;
	border: 1px solid var(--line) !important;
	border-radius: 8px !important;
	text-align: center;
	font-weight: 600;
}

.woocommerce-cart .product-remove a.remove {
	color: var(--ink-mute) !important;
	background: transparent !important;
	width: 22px;
	height: 22px;
	line-height: 1;
	font-size: 0 !important;
	border-radius: 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	opacity: .55;
	transition: opacity .15s, color .15s, transform .15s;
}

.woocommerce-cart .product-remove a.remove::before {
	content: "";
	width: 14px;
	height: 14px;
	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.2' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></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.2' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/contain no-repeat;
}

.woocommerce-cart .product-remove a.remove:hover {
	color: var(--coral) !important;
	background: transparent !important;
	opacity: 1;
	transform: none;
}

/* Coupon row */
.woocommerce-cart .cart_item + tr .actions {
	padding: 16px 18px !important;
	background: var(--bg);
	border-top: 1px solid var(--line);
}

.woocommerce-cart .coupon {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.woocommerce-cart .coupon label { display: none; }

.woocommerce-cart input#coupon_code {
	padding: 10px 14px !important;
	border: 1px solid var(--line) !important;
	border-radius: 999px !important;
	background: #fff !important;
	min-width: 200px;
	font-size: 14px;
}

.woocommerce-cart .actions .button {
	padding: 10px 20px !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
}

.woocommerce-cart button[name="apply_coupon"] {
	background: #fff !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
}

.woocommerce-cart button[name="apply_coupon"]:hover {
	border-color: var(--accent) !important;
	color: var(--accent-deep) !important;
}

.woocommerce-cart button[name="update_cart"] {
	background: var(--accent) !important;
	color: #fff !important;
	border: 0 !important;
	float: right;
}

.woocommerce-cart button[name="update_cart"]:hover {
	background: var(--accent-deep) !important;
}

/* Cart totals card */
.woocommerce-cart .cart_totals {
	width: 100% !important;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 24px;
}

.woocommerce-cart .cart_totals h2 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.woocommerce-cart .cart_totals table.shop_table_responsive {
	border: 0 !important;
	background: transparent !important;
	margin: 0 !important;
}

.woocommerce-cart .cart_totals table tr {
	border: 0 !important;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	padding: 10px 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 14px;
}

.woocommerce-cart .cart_totals table th {
	color: var(--ink-soft);
	font-weight: 500;
	width: 40%;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-top: 1px dashed var(--line) !important;
	padding-top: 14px !important;
	margin-top: 4px;
	font-size: 17px !important;
	color: var(--ink) !important;
	font-weight: 700 !important;
}

.woocommerce-cart .cart_totals .order-total .amount {
	color: var(--accent-deep) !important;
}

/* Shipping methods radio rows */
.woocommerce-cart .woocommerce-shipping-methods {
	list-style: none;
	margin: 4px 0 8px;
	padding: 0;
}

.woocommerce-cart .woocommerce-shipping-methods li {
	padding: 4px 0;
	font-size: 13.5px;
	color: var(--ink-soft);
}

.woocommerce-cart .woocommerce-shipping-methods li label {
	font-weight: 500;
}

/* ============================================================
   [I] Checkout order review — shipping list full-width layout
   td gets colspan=2 via JS so it spans both table columns;
   th is hidden and replaced with a heading inside td
   ============================================================ */
tr.woocommerce-shipping-totals.shipping,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals.shipping {
	display: block !important;
	width: 100% !important;
}

tr.woocommerce-shipping-totals.shipping th,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals.shipping th {
	display: none !important;
}

tr.woocommerce-shipping-totals.shipping td,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals.shipping td {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	text-align: left !important;
	box-sizing: border-box;
}

tr.woocommerce-shipping-totals.shipping td::before,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals.shipping td::before {
	content: "Pengiriman" !important;
	display: block !important;
	float: none !important;
	width: 100% !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-mute);
	padding: 14px 0 8px;
}

/* Hint shown until a destination postcode yields courier rates (see checkout-tweaks.js [J]) */
tr.woocommerce-shipping-totals.shipping .hk-ship-hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 10px;
	padding: 11px 14px;
	background: var(--accent-soft);
	border: 1px solid #b8e3d8;
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink);
}

tr.woocommerce-shipping-totals.shipping .hk-ship-hint__icon {
	flex: none;
	font-size: 15px;
	line-height: 1.4;
}

tr.woocommerce-shipping-totals.shipping .hk-ship-hint strong {
	font-weight: 700;
	color: var(--ink);
}

tr.woocommerce-shipping-totals.shipping ul#shipping_method,
tr.woocommerce-shipping-totals.shipping .woocommerce-shipping-methods {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr; /* always full-width rows — one option per line */
	gap: 8px;
}

tr.woocommerce-shipping-totals.shipping ul#shipping_method li,
tr.woocommerce-shipping-totals.shipping .woocommerce-shipping-methods li {
	display: block;
	padding: 0;
	margin: 0;
}

tr.woocommerce-shipping-totals.shipping ul#shipping_method li input[type="radio"],
tr.woocommerce-shipping-totals.shipping .woocommerce-shipping-methods li input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

tr.woocommerce-shipping-totals.shipping ul#shipping_method li label,
tr.woocommerce-shipping-totals.shipping .woocommerce-shipping-methods li label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
	line-height: 1.35;
	position: relative;
}

tr.woocommerce-shipping-totals.shipping ul#shipping_method li label::before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--line);
	background: #fff;
	flex: none;
	transition: border-color .15s ease, background .15s ease;
	box-shadow: inset 0 0 0 0 var(--accent);
}

tr.woocommerce-shipping-totals.shipping ul#shipping_method li input[type="radio"]:checked + label {
	border-color: var(--accent);
	background: var(--accent-tint);
}

tr.woocommerce-shipping-totals.shipping ul#shipping_method li input[type="radio"]:checked + label::before {
	border-color: var(--accent);
	background: var(--accent);
	box-shadow: inset 0 0 0 3px #fff;
}

/* Price pinned to the right edge of the full-width row, accent color, bold */
tr.woocommerce-shipping-totals.shipping ul#shipping_method li label .woocommerce-Price-amount {
	margin-left: auto;
	padding-left: 10px;
	font-weight: 700;
	color: var(--accent-deep);
	font-size: 13px;
	white-space: nowrap;
}

/* "Dikirim ke ... Ubah alamat" hint text on cart page */
tr.woocommerce-shipping-totals.shipping .shipping-calculator-button,
tr.woocommerce-shipping-totals.shipping .woocommerce-shipping-destination {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--ink-soft);
}

tr.woocommerce-shipping-totals.shipping .shipping-calculator-button {
	color: var(--accent-deep) !important;
	font-weight: 600 !important;
	text-decoration: underline;
}

.woocommerce-cart .shipping-calculator-button {
	color: var(--accent-deep) !important;
	font-weight: 600;
	font-size: 13px;
}

/* ===== Cart shipping calculator ("Ubah alamat" form) — match branded inputs ===== */
.woocommerce-shipping-calculator {
	margin-top: 12px;
}

.woocommerce-shipping-calculator .form-row {
	margin: 0 0 12px !important;
	padding: 0 !important;
	float: none !important;
	width: 100% !important;
}

.woocommerce-shipping-calculator label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}

.woocommerce-shipping-calculator input[type="text"],
.woocommerce-shipping-calculator input[type="number"],
.woocommerce-shipping-calculator select:not(.select2-hidden-accessible),
.woocommerce-shipping-calculator .select2-selection,
.woocommerce-shipping-calculator .select2-selection--single {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1px solid var(--line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-size: 14px !important;
	color: var(--ink) !important;
	font-family: inherit !important;
	box-shadow: none !important;
	min-height: 44px !important;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}

.woocommerce-shipping-calculator input:focus,
.woocommerce-shipping-calculator select:focus,
.woocommerce-shipping-calculator .select2-container--focus .select2-selection {
	outline: none !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(0, 172, 138, .12) !important;
}

.woocommerce-shipping-calculator .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: 1.4 !important;
	color: var(--ink) !important;
}

.woocommerce-shipping-calculator .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 8px;
}

.woocommerce-shipping-calculator button[name="calc_shipping"] {
	width: 100% !important;
	display: block;
	margin-top: 2px;
	padding: 13px 20px !important;
	background: var(--accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	transition: background .15s, transform .15s;
}

.woocommerce-shipping-calculator button[name="calc_shipping"]:hover {
	background: var(--accent-deep) !important;
	transform: translateY(-1px);
}

/* Checkout proceed button */
.woocommerce-cart .wc-proceed-to-checkout {
	padding: 16px 0 0 !important;
	margin: 0 !important;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--accent) !important;
	color: #fff !important;
	width: 100%;
	padding: 14px 20px !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-decoration: none !important;
	transition: background .15s, transform .15s;
	border: 0 !important;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--accent-deep) !important;
	transform: translateY(-1px);
}

/* Empty cart message */
.woocommerce-cart .cart-empty {
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-card);
	padding: 32px;
	margin: 0 !important;
	color: var(--ink-soft);
	font-size: 15px;
}

.woocommerce-cart .return-to-shop {
	margin: 16px 0 0;
}

.woocommerce-cart .return-to-shop a.wc-backward {
	display: inline-flex;
	align-items: center;
	background: var(--accent) !important;
	color: #fff !important;
	padding: 12px 24px !important;
	border-radius: 999px !important;
	font-weight: 700;
	text-decoration: none !important;
}

.woocommerce-cart .return-to-shop a.wc-backward:hover {
	background: var(--accent-deep) !important;
}

@media (max-width: 1024px) {
	.hk-cart-checkout-page.woocommerce-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.hk-cart-checkout-page.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}
	.hk-cart-checkout-page.woocommerce-cart .woocommerce > .cart-collaterals {
		grid-column: 1 !important;
		grid-row: 2 !important;
		position: static !important;
		max-width: 100% !important;
	}
}

@media (max-width: 640px) {
	/* ----- Cart items table ----- */
	.woocommerce-cart table.shop_table thead { display: none !important; }

	body.woocommerce-cart table.shop_table tbody tr.cart_item {
		display: grid !important;
		grid-template-columns: 72px 1fr !important;
		grid-template-areas:
			"thumb name"
			"thumb price"
			"thumb qty"
			"thumb subtotal" !important;
		gap: 4px 12px !important;
		padding: 14px 40px 14px 12px !important;
		position: relative;
		border-bottom: 1px solid var(--line);
	}

	body.woocommerce-cart table.shop_table tbody tr.cart_item td {
		padding: 2px 0 !important;
		border: 0 !important;
		text-align: left !important;
		min-width: 0;
		width: auto !important;
		max-width: 100%;
	}

	/* Kill WC shop_table_responsive's data-title prefixes */
	body.woocommerce-cart table.shop_table tbody td::before {
		display: none !important;
		content: none !important;
	}

	body.woocommerce-cart .product-thumbnail {
		grid-area: thumb !important;
		align-self: start;
	}
	body.woocommerce-cart .product-name      { grid-area: name !important; }
	body.woocommerce-cart .product-price     { grid-area: price !important; }
	body.woocommerce-cart .product-quantity  { grid-area: qty !important; }
	body.woocommerce-cart .product-subtotal  { grid-area: subtotal !important; }

	body.woocommerce-cart .product-thumbnail img {
		width: 64px !important;
		height: 64px !important;
	}

	body.woocommerce-cart .product-name a { font-size: 14px; line-height: 1.35; }
	body.woocommerce-cart .product-price,
	body.woocommerce-cart .product-subtotal { font-size: 13px; }
	body.woocommerce-cart .product-price::before {
		content: "Harga: ";
		color: var(--ink-mute);
		font-weight: 500;
		display: inline !important;
	}
	body.woocommerce-cart .product-subtotal::before {
		content: "Subtotal: ";
		color: var(--ink-mute);
		font-weight: 500;
		display: inline !important;
	}

	body.woocommerce-cart .product-quantity { margin-top: 6px; }

	/* Remove button → absolute top-right (NOT in grid flow) */
	body.woocommerce-cart .product-remove {
		position: absolute !important;
		top: 8px;
		right: 8px;
		padding: 0 !important;
		width: 24px;
		height: 24px;
		grid-area: unset !important;
	}
	body.woocommerce-cart .product-remove a.remove {
		width: 24px;
		height: 24px;
		line-height: 24px;
	}

	/* Hide the cart-actions (coupon + update) inside the items table on mobile.
	   They render inline awkwardly; we surface coupon in the totals card instead.
	   NOTE: `cart_item ~ tr` also matches OTHER cart_items (sibling-after),
	   so we must exclude `.cart_item` to keep their grid layout intact. */
	.woocommerce-cart table.shop_table tbody tr.cart_item ~ tr:not(.cart_item) {
		display: block !important;
		padding: 0 !important;
		background: transparent !important;
	}
	.woocommerce-cart td.actions {
		display: block !important;
		padding: 16px 12px !important;
		background: transparent !important;
		text-align: left !important;
	}
	.woocommerce-cart td.actions .coupon {
		display: flex !important;
		flex-direction: column;
		gap: 8px;
		margin: 0 0 12px;
	}
	.woocommerce-cart td.actions .coupon input,
	.woocommerce-cart td.actions input[name="coupon_code"] {
		width: 100% !important;
		min-width: 0 !important;
	}
	.woocommerce-cart td.actions .coupon button,
	.woocommerce-cart td.actions button[name="update_cart"] {
		width: 100% !important;
		min-width: 0 !important;
		padding: 12px 20px !important;
		font-size: 14px !important;
		writing-mode: horizontal-tb !important;
		white-space: nowrap !important;
	}

	/* ----- Cart totals card ----- */
	.woocommerce-cart .cart_totals { padding: 18px; }
	.woocommerce-cart .cart_totals h2 { font-size: 18px; }

	.woocommerce-cart .cart_totals table.shop_table_responsive,
	.woocommerce-cart .cart_totals table {
		display: block !important;
		width: 100% !important;
	}
	.woocommerce-cart .cart_totals table tbody {
		display: block !important;
		width: 100%;
	}
	.woocommerce-cart .cart_totals table tr {
		display: flex !important;
		justify-content: space-between !important;
		align-items: baseline !important;
		gap: 16px;
		padding: 8px 0 !important;
		width: 100% !important;
	}
	.woocommerce-cart .cart_totals table th,
	.woocommerce-cart .cart_totals table td {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		text-align: left !important;
		white-space: normal;
	}
	.woocommerce-cart .cart_totals table td {
		text-align: right !important;
		flex-shrink: 0;
	}
	.woocommerce-cart .cart_totals table td::before {
		display: none !important;
		content: none !important;
	}

	.woocommerce-cart .cart_totals .wc-proceed-to-checkout .button {
		width: 100%;
		font-size: 14px;
		padding: 14px 20px !important;
	}
}

/* ==========================================================
   /CHECKOUT/ page
   ========================================================== */

.hk-cart-checkout-page form.checkout,
.hk-cart-checkout-page form.woocommerce-checkout,
form.checkout.woocommerce-checkout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 400px !important;
	gap: 24px !important;
	align-items: start !important;
	max-width: 100% !important;
}

.hk-cart-checkout-page form.checkout > #customer_details,
.hk-cart-checkout-page form.woocommerce-checkout > #customer_details,
form.checkout.woocommerce-checkout > #customer_details {
	grid-column: 1 !important;
	grid-row: 1 !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
	align-self: start;
}

/* Hide standalone heading — render it inside #order_review via ::before */
.hk-cart-checkout-page form.checkout > #order_review_heading,
.hk-cart-checkout-page form.woocommerce-checkout > #order_review_heading,
form.checkout.woocommerce-checkout > #order_review_heading {
	display: none !important;
}

.hk-cart-checkout-page form.checkout > #order_review,
.hk-cart-checkout-page form.woocommerce-checkout > #order_review,
form.checkout.woocommerce-checkout > #order_review {
	grid-column: 2 !important;
	grid-row: 1 !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
	clear: none !important;
	align-self: start;
}

.hk-cart-checkout-page #order_review::before {
	content: "Your order";
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.woocommerce-checkout form.checkout > #order_review_heading {
	padding: 0 !important;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 12px !important;
}

/* Customer details inner: stack billing + shipping as single column */
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details > .col2-set.woocommerce-Address {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 24px;
	width: 100% !important;
	float: none !important;
	margin: 0 0 16px !important;
	max-width: none !important;
}

.woocommerce-checkout h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

/* Inputs */
.woocommerce-checkout .form-row {
	margin: 0 0 14px !important;
	padding: 0 !important;
}

.woocommerce-checkout .form-row label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}

.woocommerce-checkout .form-row .required {
	color: var(--coral);
	text-decoration: none;
}

.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select:not(.select2-hidden-accessible),
.woocommerce-checkout .select2-selection,
.woocommerce-checkout .select2-selection--single {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1px solid var(--line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-size: 14px !important;
	color: var(--ink) !important;
	font-family: inherit !important;
	transition: border-color .15s, box-shadow .15s;
	box-shadow: none !important;
	min-height: 44px !important;
	box-sizing: border-box;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection {
	outline: none !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(0, 172, 138, .12) !important;
}

.woocommerce-checkout .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: 1.4 !important;
	color: var(--ink) !important;
}

.woocommerce-checkout .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 8px;
}

.woocommerce-checkout textarea {
	min-height: 90px !important;
	resize: vertical;
}

/* Order review */
.woocommerce-checkout #order_review {
	position: sticky;
	top: calc(var(--hk-header-h, 68px) + 16px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 24px;
}

.woocommerce-checkout #order_review table.shop_table {
	border: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

.woocommerce-checkout #order_review table thead th {
	background: transparent !important;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 0 0 10px !important;
	border-bottom: 1px solid var(--line) !important;
}

.woocommerce-checkout #order_review table tbody td {
	padding: 12px 0 !important;
	border-bottom: 1px solid var(--line) !important;
	background: transparent !important;
	color: var(--ink);
}

.woocommerce-checkout #order_review table tbody td.product-name {
	font-weight: 600;
	font-size: 14px;
}

.woocommerce-checkout #order_review table tbody td.product-total {
	text-align: right;
	font-weight: 700;
	color: var(--ink);
}

.woocommerce-checkout #order_review tfoot th,
.woocommerce-checkout #order_review tfoot td {
	padding: 10px 0 !important;
	background: transparent !important;
	border-bottom: 0 !important;
	font-size: 14px;
	color: var(--ink-soft);
}

.woocommerce-checkout #order_review tfoot th { font-weight: 500; }
.woocommerce-checkout #order_review tfoot td { text-align: right; font-weight: 600; color: var(--ink); }

.woocommerce-checkout #order_review tfoot tr.order-total th,
.woocommerce-checkout #order_review tfoot tr.order-total td {
	padding-top: 14px !important;
	border-top: 1px dashed var(--line) !important;
	font-size: 18px !important;
	color: var(--ink) !important;
	font-weight: 700 !important;
}

.woocommerce-checkout #order_review tfoot tr.order-total .amount {
	color: var(--accent-deep) !important;
}

/* Payment methods */
.woocommerce-checkout #payment {
	background: transparent !important;
	border-radius: 0 !important;
	margin-top: 14px;
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 0 0 6px;
	transition: border-color .15s, background .15s;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
	border-color: var(--accent);
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	margin-right: 6px;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 600;
	color: var(--ink);
	font-size: 13.5px;
	line-height: 1.3;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box {
	background: #fff !important;
	border: 0 !important;
	border-radius: 8px;
	margin-top: 6px;
	padding: 10px 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-soft);
	overflow: visible !important;
	position: relative;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin-bottom: 4px;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box p {
	margin: 0 0 6px;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box::before {
	display: none !important;
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 16px 0 0;
	margin: 0;
}

/* Place order button */
.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	background: var(--accent) !important;
	color: #fff !important;
	padding: 14px 20px !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	border: 0 !important;
	margin: 0 !important;
	transition: background .15s, transform .15s;
}

.woocommerce-checkout #place_order:hover {
	background: var(--accent-deep) !important;
	transform: translateY(-1px);
}

/* Coupon + login info banners */
.woocommerce-checkout .woocommerce-info,
.woocommerce-cart .woocommerce-info {
	background: var(--accent-tint) !important;
	color: var(--accent-deep) !important;
	border-left: 3px solid var(--accent) !important;
	border-radius: 10px;
	padding: 12px 16px !important;
	font-size: 14px;
	margin: 0 0 16px;
}

.woocommerce-checkout .woocommerce-info a,
.woocommerce-cart .woocommerce-info a {
	color: var(--accent-deep) !important;
	font-weight: 600;
}

/* Terms checkbox */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: 14px 0;
	font-size: 13.5px;
	color: var(--ink-soft);
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
}

@media (max-width: 1024px) {
	/* Collapse to single column. Base rule uses !important so the override must
	   too. Also reset grid-column/grid-row on children — base pins them to
	   columns 1 and 2 of a 2-col grid, which leaves col 2 orphaned + col 1
	   squeezed to ~0px (causes the 1-char-per-line text-wrap bug). */
	.hk-cart-checkout-page form.checkout,
	.hk-cart-checkout-page form.woocommerce-checkout,
	.woocommerce-checkout form.checkout,
	form.checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 1fr) !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
	.hk-cart-checkout-page form.checkout > #customer_details,
	.hk-cart-checkout-page form.woocommerce-checkout > #customer_details,
	form.checkout.woocommerce-checkout > #customer_details,
	.hk-cart-checkout-page form.checkout > #order_review,
	.hk-cart-checkout-page form.woocommerce-checkout > #order_review,
	form.checkout.woocommerce-checkout > #order_review {
		grid-column: 1 !important;
		grid-row: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		box-sizing: border-box !important;
	}
	/* [G] Mobile: show Your order BEFORE the address form. Order summary
	   first answers "what am I buying + how much?" before the user invests
	   time filling fields. CSS order, no DOM reshuffle needed. */
	.hk-cart-checkout-page form.checkout > #customer_details,
	form.checkout.woocommerce-checkout > #customer_details {
		order: 2;
	}
	.hk-cart-checkout-page form.checkout > #order_review,
	form.checkout.woocommerce-checkout > #order_review {
		order: 1;
		margin-bottom: 12px !important;
	}
	.woocommerce-checkout #order_review {
		position: static;
	}

	/* Force every wrapper between viewport and the form to full width. Storefront's
	   body.right-sidebar layout floats .content-area at 73.9% which leaves a
	   phantom ~26% reserved gap on the right even after we hide the sidebar widget.
	   Also kill float on the outer .woocommerce wrapper that wraps #primary. */
	body.hk-cart-checkout-page #content,
	body.hk-cart-checkout-page .site-content,
	body.hk-cart-checkout-page .col-full,
	body.hk-cart-checkout-page .col-full > .woocommerce,
	body.hk-cart-checkout-page #primary,
	body.hk-cart-checkout-page #primary > .woocommerce,
	body.hk-cart-checkout-page.right-sidebar .content-area {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	/* And ensure .col2-set (Storefront's float-based billing/shipping row wrapper)
	   doesn't stay 52.94% floated — should be a single full-width column on mobile. */
	body.hk-cart-checkout-page #customer_details .col2-set,
	body.hk-cart-checkout-page #customer_details .u-columns,
	body.hk-cart-checkout-page .col2-set {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0 !important;
	}

}

/* Hide WC default coupon toggle banner + force form visible */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none !important;
}

.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-coupon {
	display: block !important;
}

/* Coupon block relocated inside #order_review, below shop_table */
.hk-checkout-coupon-slot {
	margin: 16px 0;
	padding: 16px 0 0;
	border-top: 1px dashed var(--line);
}

.hk-checkout-coupon-slot .woocommerce-form-coupon-toggle {
	margin: 0 0 10px !important;
	padding: 10px 14px !important;
	border-radius: 10px !important;
	font-size: 13.5px;
}

.hk-checkout-coupon-slot form.checkout_coupon {
	margin: 0 !important;
	padding: 14px !important;
	background: var(--bg) !important;
	border: 1px solid var(--line) !important;
	border-radius: 10px !important;
}

.hk-checkout-coupon-slot form.checkout_coupon .form-row-first {
	width: 100% !important;
	float: none !important;
	margin: 0 0 10px !important;
}

.hk-checkout-coupon-slot form.checkout_coupon .form-row-last {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.hk-checkout-coupon-slot form.checkout_coupon input[type="text"] {
	width: 100% !important;
	padding: 10px 14px !important;
	border: 1px solid var(--line) !important;
	border-radius: 999px !important;
	background: #fff !important;
	font-size: 14px;
}

.hk-checkout-coupon-slot form.checkout_coupon button {
	width: 100%;
	background: var(--accent) !important;
	color: #fff !important;
	padding: 10px 20px !important;
	border-radius: 999px !important;
	border: 0 !important;
	font-weight: 700 !important;
	font-size: 14px !important;
}

.hk-checkout-coupon-slot form.checkout_coupon button:hover {
	background: var(--accent-deep) !important;
}

/* Coupon-only error/notice — compact text */
.hk-checkout-coupon-slot .woocommerce-error,
.hk-checkout-coupon-slot ul.woocommerce-error,
.hk-checkout-coupon-slot .woocommerce-message,
.hk-checkout-coupon-slot .woocommerce-NoticeGroup .woocommerce-error,
.hk-checkout-coupon-slot .woocommerce-NoticeGroup .woocommerce-message {
	font-size: 12.5px !important;
	line-height: 1.45 !important;
	padding: 8px 12px !important;
	margin: 8px 0 !important;
	border-radius: 8px !important;
	list-style: none !important;
}

.hk-checkout-coupon-slot .woocommerce-error li,
.hk-checkout-coupon-slot ul.woocommerce-error li {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
}

/* ============================================================
   Empty cart state — branded card replacing WC's default notice
   ============================================================ */

.hk-cart-empty {
	max-width: 520px;
	margin: 32px auto 64px;
	padding: 48px 32px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card, 20px);
	box-shadow: var(--shadow-sm);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Span both columns of the cart-page 2-col grid so margin:auto can center. */
	grid-column: 1 / -1;
}

.hk-cart-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--accent-soft, rgba(0, 172, 138, 0.1));
	color: var(--accent-deep);
	margin: 0 0 24px;
}

.hk-cart-empty__title {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 10px;
}

.hk-cart-empty__sub {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0 0 28px;
	max-width: 360px;
}

.hk-cart-empty__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
}

.hk-cart-empty__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 32px;
	border-radius: 999px;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(0, 172, 138, 0.25);
	transition: background .15s ease, transform .15s ease;
	min-width: 220px;
}

.hk-cart-empty__cta:hover {
	background: var(--accent-deep) !important;
	transform: translateY(-1px);
}

.hk-cart-empty__link {
	font-size: 13.5px;
	color: var(--ink-soft) !important;
	text-decoration: none !important;
	transition: color .15s ease;
}

.hk-cart-empty__link:hover {
	color: var(--accent-deep) !important;
}

@media (max-width: 640px) {
	.hk-cart-empty {
		margin: 16px 8px 48px;
		padding: 36px 22px;
		border-radius: 18px;
	}
	.hk-cart-empty__icon {
		width: 72px;
		height: 72px;
		margin-bottom: 20px;
	}
	.hk-cart-empty__icon svg { width: 44px; height: 44px; }
	.hk-cart-empty__title { font-size: 21px; }
	.hk-cart-empty__sub { font-size: 14px; margin-bottom: 22px; }
	.hk-cart-empty__cta { width: 100%; }
}

/* ============================================================
   [E] Mobile sticky bottom total bar (checkout)
   ============================================================ */

.hk-checkout-sticky {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	gap: 14px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: #ffffff;
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 24px rgba(15, 22, 22, 0.08);
	transform: translateY(110%);
	transition: transform .25s ease;
}

@media (max-width: 1024px) {
	.hk-checkout-sticky.is-ready {
		display: flex;
	}
}

.hk-checkout-sticky.is-ready:not(.is-hidden) {
	transform: translateY(0);
}

.hk-checkout-sticky.is-hidden {
	transform: translateY(110%);
}

.hk-checkout-sticky__total {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.hk-checkout-sticky__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.hk-checkout-sticky__value {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--accent-deep);
	line-height: 1.2;
}

.hk-checkout-sticky__cta {
	background: var(--accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 13px 24px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 172, 138, 0.25);
	white-space: nowrap;
}

.hk-checkout-sticky__cta:hover,
.hk-checkout-sticky__cta:active {
	background: var(--accent-deep) !important;
}

/* Add bottom padding to body on mobile checkout so sticky bar doesn't
   cover the last form field / footer */
@media (max-width: 1024px) {
	body.woocommerce-checkout {
		padding-bottom: 84px;
	}
}

/* ============================================================
   [F] Collapsed optional field toggle
   ============================================================ */

.hk-collapsed-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	clear: both;
	float: none;
	width: fit-content;
	background: transparent !important;
	border: 1px dashed var(--line) !important;
	color: var(--ink-soft) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 9px 16px !important;
	border-radius: 999px !important;
	cursor: pointer;
	margin: 0 0 14px !important;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
	box-shadow: none !important;
}

.hk-collapsed-toggle:hover {
	background: var(--cream, #faf6ec) !important;
	color: var(--accent-deep) !important;
	border-color: var(--accent) !important;
}

/* ============================================================
   [H] Checkout step indicator (visual breadcrumb)
   ============================================================ */

.hk-checkout-steps {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 14px 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow-sm);
	overflow-x: auto;
	scrollbar-width: none;
}

.hk-checkout-steps::-webkit-scrollbar {
	display: none;
}

.hk-checkout-step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ink-mute);
	white-space: nowrap;
	flex-shrink: 0;
}

.hk-checkout-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cream, #faf6ec);
	color: var(--ink-mute);
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

/* Completed step — dimmed text, green check */
.hk-checkout-step--done {
	color: var(--ink-soft);
}

.hk-checkout-step--done .hk-checkout-step__num {
	background: var(--accent);
	color: #fff;
	font-size: 0; /* hide the number */
}

.hk-checkout-step--done .hk-checkout-step__num::before {
	content: "";
	width: 12px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
}

/* Current step — highlight */
.hk-checkout-step--current {
	color: #00604c;
	font-weight: 700;
}

.hk-checkout-step--current .hk-checkout-step__num {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Legacy alias (kept for safety; not emitted by new JS) */
.hk-checkout-step--active {
	color: #00604c;
	font-weight: 600;
}

.hk-checkout-step--active .hk-checkout-step__num {
	background: var(--accent);
	color: #fff;
}

.hk-checkout-step__sep {
	display: inline-block;
	flex-shrink: 0;
	color: var(--ink-mute);
	opacity: 0.5;
}

@media (max-width: 640px) {
	.hk-checkout-steps {
		padding: 12px 16px;
		gap: 8px;
	}
	.hk-checkout-step { font-size: 12px; }
	.hk-checkout-step__num { width: 22px; height: 22px; font-size: 11px; }
}

/* ============================================================
   Custom checkbox styling for checkout (override browser default blue)
   ============================================================ */

/* Use brand accent color for all native checkboxes/radios in checkout */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
	accent-color: var(--accent);
}

/* "Kirim ke alamat yang berbeda?" — full custom styled checkbox + label */
#ship-to-different-address {
	margin: 0 0 16px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	font-family: inherit !important;
}

#ship-to-different-address .woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	cursor: pointer;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	font-family: var(--font-display) !important;
	letter-spacing: -0.01em;
	padding: 12px 16px !important;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	transition: border-color .15s ease, background .15s ease;
	width: 100%;
	box-sizing: border-box;
}

#ship-to-different-address .woocommerce-form__label-for-checkbox:hover {
	border-color: var(--accent);
	background: var(--accent-soft, rgba(0, 172, 138, 0.04));
}

#ship-to-different-address-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	border: 2px solid var(--line);
	background: #fff;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
	flex-shrink: 0;
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#ship-to-different-address-checkbox:checked {
	background: var(--accent);
	border-color: var(--accent);
}

#ship-to-different-address-checkbox:checked::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	background: #fff;
	-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='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></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='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

#ship-to-different-address-checkbox:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

#ship-to-different-address span {
	flex: 1;
	min-width: 0;
}

/* ============================================================
   /checkout/order-received/ — branded thank-you page
   ============================================================ */

.hk-thankyou {
	max-width: 1040px;
	margin: 0 auto;
	padding: 8px 0 48px;
}

/* ----- Hero ----- */
.hk-thankyou__hero {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 36px;
}

.hk-thankyou__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--accent-soft, rgba(0, 172, 138, 0.12));
	color: var(--accent-deep);
	margin: 0 auto 18px;
	animation: hk-thankyou-pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}

.hk-thankyou__icon--fail {
	background: rgba(255, 126, 95, 0.12);
	color: var(--coral, #ff7e5f);
}

/* Pending-payment hero — warm-amber tint to signal "action needed but not error" */
.hk-thankyou--pending {
	margin-bottom: 24px;
}

.hk-thankyou__hero--pending {
	background: linear-gradient(180deg, #fff7e6 0%, #fff 100%);
	border: 1px solid #f5d99a;
	border-radius: var(--radius-card);
	padding: 32px 24px;
	box-shadow: 0 8px 24px rgba(245, 158, 11, .08);
}

.hk-thankyou__icon--pending {
	background: rgba(245, 158, 11, 0.14);
	color: #b45309;
}

.hk-thankyou--cancelled .hk-thankyou__hero,
.hk-thankyou__hero--cancelled {
	background: linear-gradient(180deg, #f5f5f4 0%, #fff 100%);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 28px 24px;
}

.hk-thankyou__icon--cancelled {
	background: rgba(115, 115, 115, 0.14);
	color: var(--ink-soft);
}

.hk-view-order__notes {
	margin-top: 24px;
}

.hk-view-order__notes .woocommerce-OrderUpdates {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.hk-view-order__notes .woocommerce-OrderUpdate {
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}
.hk-view-order__notes .woocommerce-OrderUpdate:last-child { border-bottom: 0; }

.hk-view-order__notes .woocommerce-OrderUpdate-meta {
	font-size: 12px;
	color: var(--ink-mute);
	margin: 0 0 6px;
}

.hk-view-order__notes .woocommerce-OrderUpdate-description {
	font-size: 14px;
	color: var(--ink);
}

.hk-thankyou__actions--center {
	justify-content: center;
	margin-top: 28px;
}

.hk-thankyou__hero--pending .hk-thankyou__sub {
	margin-bottom: 8px;
}

/* Midtrans plugin's Payment Info table — keep long Snap URLs from overflowing on mobile */
.midtrans_payment_info {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0 28px;
	font-size: 14px;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}

.midtrans_payment_info th,
.midtrans_payment_info td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--line, #ebe5d6);
	vertical-align: top;
}

.midtrans_payment_info tr:last-child th,
.midtrans_payment_info tr:last-child td { border-bottom: 0; }

.midtrans_payment_info th {
	width: 40%;
	color: var(--ink-soft, #4a5a58);
	font-weight: 600;
}

.midtrans_payment_info td {
	color: var(--ink, #1a2a2a);
	word-break: break-all;
	overflow-wrap: anywhere;
}

.midtrans_payment_info td a {
	color: var(--accent-deep, #007a62);
	word-break: break-all;
}

@media (max-width: 640px) {
	.midtrans_payment_info { font-size: 13px; }
	.midtrans_payment_info th,
	.midtrans_payment_info td { padding: 10px 12px; }
	.midtrans_payment_info th { width: 35%; }
}

@keyframes hk-thankyou-pop {
	from { transform: scale(0.5); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

.hk-thankyou__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 14px;
}

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

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

.hk-thankyou__sub strong {
	color: var(--ink);
	font-weight: 600;
}

/* ----- Grid: summary (2/3) + next-steps (1/3) ----- */
.hk-thankyou__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin: 0 0 28px;
}

/* ----- Card base ----- */
.hk-thankyou__card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card, 20px);
	padding: 28px 28px;
	box-shadow: var(--shadow-sm);
}

.hk-thankyou__card-title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

/* ----- Summary card ----- */
.hk-thankyou__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin: 0 0 22px;
}

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

.hk-thankyou__meta dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin: 0 0 4px;
}

.hk-thankyou__meta dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	word-break: break-word;
}

.hk-thankyou__total {
	color: var(--accent-deep) !important;
	font-size: 16px !important;
}

/* ----- Items list ----- */
.hk-thankyou__items {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hk-thankyou__item {
	display: flex;
	gap: 12px;
	padding: 12px;
	background: var(--cream, #faf6ec);
	border-radius: 14px;
	align-items: center;
}

.hk-thankyou__item-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	background: #fff;
}

.hk-thankyou__item-thumb--ph {
	display: inline-block;
	background: var(--accent-soft);
}

.hk-thankyou__item-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hk-thankyou__item-name {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.35;
}

.hk-thankyou__item-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	color: var(--ink-soft);
}

.hk-thankyou__item-qty {
	font-weight: 500;
}

.hk-thankyou__item-price {
	font-weight: 700;
	color: var(--ink);
}

/* ----- Totals table ----- */
.hk-thankyou__totals {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.hk-thankyou__totals th,
.hk-thankyou__totals td {
	padding: 8px 0;
	border: 0;
	font-weight: 500;
	color: var(--ink-soft);
	text-align: left;
}

.hk-thankyou__totals td {
	text-align: right;
	color: var(--ink);
	font-weight: 600;
}

.hk-thankyou__totals-row.is-grand {
	border-top: 1px solid var(--line);
}

.hk-thankyou__totals-row.is-grand th,
.hk-thankyou__totals-row.is-grand td {
	padding-top: 14px;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--accent-deep);
}

/* ----- Next-steps card ----- */
.hk-thankyou__step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
}

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

/* Payment-method-injected content (e.g. WC bacs bank instructions) */
.hk-thankyou__payment-instructions {
	background: var(--cream, #faf6ec);
	border-radius: 14px;
	padding: 18px;
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink);
}

.hk-thankyou__payment-instructions h2,
.hk-thankyou__payment-instructions h3 {
	font-family: var(--font-display);
	font-size: 15px !important;
	font-weight: 700 !important;
	margin: 0 0 10px !important;
	color: var(--ink) !important;
	border: 0 !important;
	padding: 0 !important;
}

.hk-thankyou__payment-instructions ul,
.hk-thankyou__payment-instructions ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hk-thankyou__payment-instructions li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(15, 22, 22, 0.06);
}

.hk-thankyou__payment-instructions li:last-child {
	border-bottom: 0;
}

.hk-thankyou__payment-instructions strong {
	color: var(--ink);
	font-weight: 700;
}

/* ----- Action buttons ----- */
.hk-thankyou__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 18px;
}

.hk-thankyou__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background .15s ease, transform .15s ease, border-color .15s ease;
	box-sizing: border-box;
	width: 100%;
}

.hk-thankyou__btn--primary {
	background: var(--accent) !important;
	color: #fff !important;
	border: 0;
	box-shadow: 0 6px 16px rgba(0, 172, 138, 0.25);
}

.hk-thankyou__btn--primary:hover {
	background: var(--accent-deep) !important;
	transform: translateY(-1px);
}

.hk-thankyou__btn--ghost {
	background: transparent !important;
	color: var(--ink) !important;
	border: 1px solid var(--line);
}

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

/* ----- CS contact strip ----- */
.hk-thankyou__cs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	background: var(--cream, #faf6ec);
	border-radius: 12px;
	font-size: 13px;
}

.hk-thankyou__cs-label {
	color: var(--ink-soft);
	font-weight: 500;
}

.hk-thankyou__cs-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #25D366 !important;
	font-weight: 700;
	text-decoration: none !important;
}

.hk-thankyou__cs-link:hover {
	color: #1ebe5b !important;
}

/* ----- Addresses ----- */
.hk-thankyou__addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.hk-thankyou__addr-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.hk-thankyou__addr-title svg {
	color: var(--accent-deep);
}

.hk-thankyou__addr-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
	font-style: normal;
}

.hk-thankyou__addr-phone {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ink-soft);
}

/* ============================================================
   Mobile thank-you
   ============================================================ */
@media (max-width: 768px) {
	.hk-thankyou {
		padding: 4px 0 40px;
	}
	.hk-thankyou__hero {
		margin-bottom: 24px;
	}
	.hk-thankyou__icon {
		width: 72px;
		height: 72px;
		margin-bottom: 18px;
	}
	.hk-thankyou__icon svg {
		width: 40px;
		height: 40px;
	}
	.hk-thankyou__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.hk-thankyou__card {
		padding: 22px 20px;
		border-radius: 18px;
	}
	.hk-thankyou__card-title {
		font-size: 16px;
		margin-bottom: 16px;
		padding-bottom: 12px;
	}
	.hk-thankyou__meta {
		grid-template-columns: 1fr 1fr;
		gap: 12px 18px;
	}
	.hk-thankyou__addresses {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

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

/* ============================================================
   404 — branded Not Found page
   ============================================================ */

body.hk-404-page #content {
	background: var(--bg);
}

.hk-404 {
	max-width: 1080px;
	margin: 0 auto;
	padding: 24px var(--hk-container-pad, 150px) 80px;
}

.hk-404__hero {
	text-align: center;
	max-width: 580px;
	margin: 0 auto 56px;
	padding: 56px 32px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-card, 20px);
	box-shadow: var(--shadow-sm);
}

.hk-404__code {
	display: inline-block;
	font-family: var(--font-display);
	font-size: clamp(80px, 14vw, 140px);
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--accent-deep);
	line-height: 1;
	margin: 0 0 12px;
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 8px 24px rgba(0, 172, 138, 0.18);
}

.hk-404__title {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 12px;
}

.hk-404__sub {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0 0 28px;
}

.hk-404__actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 0 0 28px;
	flex-wrap: wrap;
}

.hk-404__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background .15s ease, transform .15s ease, border-color .15s ease;
}

.hk-404__btn--primary {
	background: var(--accent) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(0, 172, 138, 0.25);
}

.hk-404__btn--primary:hover {
	background: var(--accent-deep) !important;
	transform: translateY(-1px);
}

.hk-404__btn--ghost {
	background: transparent !important;
	color: var(--ink) !important;
	border: 1px solid var(--line);
}

.hk-404__btn--ghost:hover {
	border-color: var(--accent);
	color: var(--accent-deep) !important;
}

.hk-404__search {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--cream, #faf6ec);
	border-radius: 999px;
	padding: 4px;
	position: relative;
	max-width: 420px;
	margin: 0 auto;
}

.hk-404__search-icon {
	color: var(--ink-mute);
	margin-left: 14px;
	flex-shrink: 0;
}

.hk-404__search-input {
	flex: 1;
	border: 0 !important;
	background: transparent !important;
	padding: 10px 12px !important;
	font-size: 14px !important;
	color: var(--ink) !important;
	outline: 0 !important;
	box-shadow: none !important;
	min-width: 0;
}

.hk-404__search-submit {
	background: var(--accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 9px 20px !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background .15s ease;
}

.hk-404__search-submit:hover {
	background: var(--accent-deep) !important;
}

.hk-404__discover {
	margin-top: 24px;
}

.hk-404__discover-title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 20px;
	text-align: center;
}

.hk-404__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 1024px) {
	.hk-404 {
		padding: 16px 32px 64px;
	}
	.hk-404__hero {
		padding: 40px 24px;
		margin-bottom: 36px;
	}
	.hk-404__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 640px) {
	.hk-404 {
		padding: 12px 16px 48px;
	}
	.hk-404__hero {
		padding: 32px 20px;
		border-radius: 18px;
	}
	.hk-404__actions {
		flex-direction: column;
	}
	.hk-404__btn { width: 100%; }
}

/* ============================================================
   Fixes from audit pass 3
   ============================================================ */

/* [J] Cart page: kill the legacy bottom-position "added to cart" notice.
   WC + Storefront sometimes render the success message TWICE: once at
   page top (.woocommerce-notices-wrapper) and once via Storefront's own
   notice hook. Suppress the page-top duplicate; keep the styled one. */
.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-message:first-child:not(:only-child) {
	display: none !important;
}

/* [M] "Perbarui Keranjang" button — make it visibly active, not faded */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
	background: transparent !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 999px !important;
	padding: 12px 22px !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	box-shadow: none !important;
	cursor: pointer;
	opacity: 1 !important;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart input[name="update_cart"]:hover {
	border-color: var(--accent) !important;
	color: var(--accent-deep) !important;
	background: var(--accent-soft, rgba(0, 172, 138, 0.06)) !important;
}

.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart input[name="update_cart"]:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed;
}

/* [N] Global accent-color for cart radios/checkboxes (shipping, etc.) */
.woocommerce-cart input[type="radio"],
.woocommerce-cart input[type="checkbox"] {
	accent-color: var(--accent);
}