/* =============================================================================
   Hijima — Cart layout system  (v1.0)
   Rebuilds the WooCommerce Cart block into the approved design:
   thumb · details · qty · line total · remove, inside a bordered card.

   Scoped to body .wp-block-woocommerce-cart so it cannot leak into other pages.
   ========================================================================== */

body .wp-block-woocommerce-cart {
	--hj-ink: #0a0a0a;
	--hj-ink-2: #2e2b27;
	--hj-muted: #6e6a64;
	--hj-muted-3: #a9a39b;
	--hj-line: #e7e4de;
	--hj-line-soft: #f0ede8;
	--hj-chip: #f5f3ef;
	--hj-thumb: #f5f2ed;
}

/* ---------------------------------------------------------------- layout -- */
body .wp-block-woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 44px;
	align-items: start;
}

/* the list card */
body .wp-block-woocommerce-cart .wc-block-cart__main {
	background: #fff;
	border: 1px solid var(--hj-line);
	border-radius: 18px;
	padding: 4px 28px 6px;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: none;
}

/* the summary card */
body .wp-block-woocommerce-cart .wc-block-cart__sidebar {
	background: #fff;
	border: 1px solid var(--hj-line);
	border-radius: 18px;
	padding: 22px 24px 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	position: sticky;
	top: 24px;
}

/* ------------------------------------------------------------ table -> grid */
body .wp-block-woocommerce-cart .wc-block-cart-items {
	display: block;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

body .wp-block-woocommerce-cart .wc-block-cart-items thead,
body .wp-block-woocommerce-cart .wc-block-cart-items tbody {
	display: block;
}

/* header row: PRODUCT | QTY | TOTAL */
body .wp-block-woocommerce-cart .wc-block-cart-items__header {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 132px 116px 36px;
	column-gap: 16px;
	align-items: end;
	padding: 16px 0 11px;
	border-bottom: 1px solid var(--hj-line);
}

body .wp-block-woocommerce-cart .wc-block-cart-items__header th {
	padding: 0;
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hj-muted-3);
	text-align: left;
}

body .wp-block-woocommerce-cart .wc-block-cart-items__header-image {
	grid-column: 1 / 3;
}

body .wp-block-woocommerce-cart .wc-block-cart-items__header-product {
	display: none;
}

body .wp-block-woocommerce-cart .wc-block-cart-items__header-total {
	grid-column: 4;
	text-align: right !important;
}

/* the QTY label has no column of its own in the block's markup */
body .wp-block-woocommerce-cart .wc-block-cart-items__header::after {
	content: "Qty";
	grid-column: 3;
	grid-row: 1;
	text-align: center;
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hj-muted-3);
}

/* item row: thumb | name/price | qty | total | remove */
body .wp-block-woocommerce-cart .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 132px 116px 36px;
	grid-template-areas:
		"thumb name qty total rm"
		"thumb price qty total rm"
		"thumb meta qty total rm";
	grid-template-rows: auto auto auto;
	column-gap: 16px;
	row-gap: 4px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--hj-line-soft);
}

body .wp-block-woocommerce-cart tbody tr.wc-block-cart-items__row:last-child {
	border-bottom: 0;
}

/* let the cells' children join the row grid */
body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product,
body .wp-block-woocommerce-cart .wc-block-cart-item__wrap,
body .wp-block-woocommerce-cart .wc-block-cart-item__quantity {
	display: contents !important;
}

body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-area: thumb;
	align-self: center;
	padding: 0;
	border: 0;
	background: none;
}

body .wp-block-woocommerce-cart .wc-block-cart-item__image a {
	display: block;
	line-height: 0;
}

body .wp-block-woocommerce-cart .wc-block-cart-item__image img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 12px;
	background: var(--hj-thumb);
	display: block;
	margin: 0;
}

/* product name */
body .wp-block-woocommerce-cart .wc-block-components-product-name {
	grid-area: name;
	align-self: end;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--hj-ink);
	text-decoration: none;
	display: block;
}

body .wp-block-woocommerce-cart .wc-block-components-product-name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* unit price */
body .wp-block-woocommerce-cart .wc-block-cart-item__prices {
	grid-area: price;
	align-self: start;
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--hj-ink-2);
	font-variant-numeric: tabular-nums;
}

body .wp-block-woocommerce-cart .wc-block-cart-item__prices .price {
	margin: 0;
}

body .wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value {
	font-weight: 500;
	opacity: 1;
}

/* short description: hidden, it makes rows three lines taller */
body .wp-block-woocommerce-cart .wc-block-components-product-metadata {
	grid-area: meta;
	margin: 0;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--hj-muted-3);
}

body .wp-block-woocommerce-cart .wc-block-components-product-metadata__description {
	display: none;
}

body .wp-block-woocommerce-cart .wc-block-components-product-metadata:empty {
	display: none;
}

/* ------------------------------------------------------------------ qty --- */
body .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	grid-area: qty;
	justify-self: center;
	align-self: center;
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	height: 42px;
	width: 132px;
	border: 1px solid var(--hj-line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	box-sizing: border-box;
}

body .wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	order: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--hj-line-soft);
	border-right: 1px solid var(--hj-line-soft);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hj-ink);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

body .wp-block-woocommerce-cart .wc-block-components-quantity-selector input::-webkit-outer-spin-button,
body .wp-block-woocommerce-cart .wc-block-components-quantity-selector input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
	order: 1;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--hj-ink-2);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
}

body .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button--plus {
	order: 3;
}

body .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover {
	background: #f7f5f1;
	color: var(--hj-ink);
}

/* keep a keyboard focus ring, drop the square one a mouse click leaves behind */
body .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:focus {
	outline: none;
}

body .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:focus-visible {
	outline: 2px solid var(--hj-ink);
	outline-offset: -2px;
}

body .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:disabled {
	color: #cfc9c0;
	cursor: not-allowed;
	background: transparent;
}

/* --------------------------------------------------------------- remove --- */
body .wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
	grid-area: rm;
	justify-self: end;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--hj-muted-3);
	cursor: pointer;
	box-shadow: none;
}

body .wp-block-woocommerce-cart .wc-block-cart-item__remove-link svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	display: block;
}

body .wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
	background: #faf7f2;
	color: var(--hj-ink);
}

body .wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover svg {
	fill: currentColor;
}

/* ----------------------------------------------------------- line total --- */
body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-area: total;
	align-self: center;
	padding: 0;
	border: 0;
	background: none;
	text-align: right;
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -0.012em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--hj-ink);
}

body .wp-block-woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: block;
}

body .wp-block-woocommerce-cart .wc-block-cart-item__total .price {
	margin: 0;
	font-weight: 600;
	font-size: inherit;
}

/* WooCommerce core draws these rules in the theme's contrast colour (black) */
body .wp-block-woocommerce-cart .wc-block-components-totals-wrapper,
body .wp-block-woocommerce-cart-order-summary-totals-block,
body .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	border-top: 1px solid var(--hj-line) !important;
}

body .wp-block-woocommerce-cart-order-summary-block {
	border-bottom: 0 !important;
}

/* kill the doubled rules around the coupon panel */
body .wp-block-woocommerce-cart .wc-block-components-totals-coupon,
body .wp-block-woocommerce-cart .wc-block-components-totals-coupon.wc-block-components-panel {
	border: 0 !important;
}

/* tighter vertical rhythm in the totals */
body .wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
	padding: 0 !important;
}

body .wp-block-woocommerce-cart .wc-block-cart-items,
body .wp-block-woocommerce-cart .wc-block-cart-items tbody {
	border: 0 !important;
}

body .wp-block-woocommerce-cart .wc-block-cart-items tbody tr.wc-block-cart-items__row:last-child {
	border-bottom: 0 !important;
}

/* ------------------------------------------------------------ summary ----- */
body .wp-block-woocommerce-cart .wc-block-cart__totals-title {
	font-size: 10px !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hj-muted);
	margin: 0 0 16px !important;
	padding: 0;
	border: 0;
}

/* coupon accordion */
body .wp-block-woocommerce-cart .wc-block-components-totals-coupon {
	border: 0;
	border-top: 1px solid var(--hj-line-soft);
	border-bottom: 1px solid var(--hj-line-soft);
	margin: 0 0 4px;
	background: none;
}

body .wp-block-woocommerce-cart .wc-block-components-panel__button {
	padding: 13px 0;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--hj-ink-2);
	background: none;
	border: 0;
}

body .wp-block-woocommerce-cart .wc-block-components-panel__button:hover {
	color: var(--hj-ink);
}

/* coupon panel — the block animates its height inline, which let the form
   overlap the shipping row once the wrapper padding was removed */
body .wp-block-woocommerce-cart .wc-block-components-panel__content {
	position: static !important;
	height: auto !important;
	overflow: visible !important;
}

body .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	margin: 0 !important;
	padding: 2px 0 16px;
}

body .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	margin: 0 !important;
}

body .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	height: 42px !important;
	border: 1px solid var(--hj-line) !important;
	border-radius: 10px !important;
	font-size: 12.5px;
	padding: 0 12px !important;
	background: #fff;
}

body .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input input:focus {
	border-color: var(--hj-ink);
	box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
	outline: none;
}

body .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input label {
	font-size: 10.5px;
	color: var(--hj-muted-3);
}

body .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button {
	height: 42px !important;
	margin: 0;
	padding: 0 18px !important;
	border: 1px solid var(--hj-ink) !important;
	border-radius: 10px !important;
	background: var(--hj-ink);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button:disabled {
	background: transparent;
	border-color: var(--hj-line);
	color: var(--hj-muted-3);
}

/* totals rows */
body .wp-block-woocommerce-cart .wc-block-components-totals-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 9px 0;
	font-size: 12.5px;
	color: var(--hj-muted);
	border: 0;
}

body .wp-block-woocommerce-cart .wc-block-components-totals-item__label {
	color: #5f5b55;
	font-size: 12.5px;
	font-weight: 400;
}

body .wp-block-woocommerce-cart .wc-block-components-totals-item__value {
	font-weight: 500;
	color: var(--hj-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body .wp-block-woocommerce-cart .wc-block-components-totals-item__description {
	font-size: 10px;
	color: var(--hj-muted-3);
	margin-top: 2px;
}

/* one rule above the total, not two */
body .wp-block-woocommerce-cart-order-summary-totals-block {
	border-top: 0 !important;
}

body .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item {
	padding: 2px 0 0;
}

/* final total */
body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item {
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--hj-line);
}

body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hj-ink);
}

body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--hj-ink);
}

/* ---------------------------------------------------------------- CTA ----- */
body .wp-block-woocommerce-cart .wc-block-cart__submit {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

body .wp-block-woocommerce-cart .wc-block-cart__submit-container {
	margin-top: 18px;
}

body .wp-block-woocommerce-cart .wc-block-cart__submit-button,
body .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
body .wp-block-woocommerce-cart .wc-block-cart__submit-button:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--hj-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	transition: background 0.15s ease;
}

body .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
	background: #1f1d1a;
	color: #fff;
}

body .wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text {
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* express payments / payment options stay quiet */
body .wp-block-woocommerce-cart .wc-block-cart__payment-options {
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: none;
}

/* --------------------------------------------------------------- mobile --- */
@media (max-width: 1024px) {
	body .wp-block-woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	body .wp-block-woocommerce-cart .wc-block-cart__sidebar {
		position: static;
	}
}

@media (max-width: 781px) {
	body .wp-block-woocommerce-cart .wc-block-cart__main {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	body .wp-block-woocommerce-cart .wc-block-cart-items__header {
		display: none;
	}

	body .wp-block-woocommerce-cart .wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr) auto !important;
		grid-template-areas:
			"thumb name rm"
			"thumb price rm"
			"thumb meta rm"
			"qty qty total";
		grid-template-rows: auto auto auto auto !important;
		row-gap: 2px;
		column-gap: 12px;
		box-sizing: border-box;
		width: 100%;
		background: #fff;
		border: 1px solid var(--hj-line);
		border-radius: 14px;
		padding: 14px !important;
		margin-bottom: 10px;
	}

	body .wp-block-woocommerce-cart .wc-block-cart-item__image img {
		width: 64px;
		height: 64px;
		border-radius: 10px;
	}

	body .wp-block-woocommerce-cart .wc-block-cart-item__image {
		align-self: start;
	}

	body .wp-block-woocommerce-cart .wc-block-components-product-name {
		align-self: start;
		font-size: 14.5px;
	}

	body .wp-block-woocommerce-cart .wc-block-cart-item__prices {
		font-size: 12.5px;
	}

	body .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
		grid-area: qty;
		justify-self: start;
		width: 118px;
		height: 38px;
		grid-template-columns: 38px 1fr 38px;
		margin-top: 12px;
	}

	body .wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
		grid-area: rm;
		align-self: start;
		justify-self: end;
		width: 32px;
		height: 32px;
		margin-top: -4px;
	}

	body .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-area: total;
		align-self: end;
		font-size: 15px;
		justify-self: end;
	}

	body .wp-block-woocommerce-cart .wc-block-cart__sidebar {
		padding: 18px 16px 20px;
		border-radius: 14px;
	}
}