/* ==========================================================================
   ARFA KHUSHBOO — cart and checkout.

   Loaded only on the cart and checkout pages (see arfa_assets()). Builds the
   Shopify-style two-column checkout on top of the tokens in theme.css; adds
   no colours or spacing values of its own.

   Structural note: the checkout is one grid and every block in it is a named
   area, so the left column reads Contact → Delivery → Shipping method →
   Payment → Delivery address → button → footer regardless of DOM order. Four
   wrappers are therefore `display: contents` — `.ak-co__customer`,
   `#customer_details`, `#order_review` and `#payment` — which lets their
   children become grid items while the DOM keeps the structure WooCommerce
   expects. `.woocommerce-checkout-review-order-table` and
   `.woocommerce-checkout-payment` are replaced wholesale by checkout.js on
   every AJAX refresh, so nothing here may depend on a wrapper around either.

   Contents
     1.  Page chassis reset
     1b. Column geometry and the grey summary panel
     2.  Stripped checkout header
     3.  Woo notices and login form
     4.  Checkout grid
     4b. Step breadcrumb
     5.  Steps and form fields
     6.  Order summary
     6b. Discount code row
     7.  Mobile order-summary disclosure
     8.  Shipping method box
     8b. Payment methods
     8c. Delivery-address option group
     9.  Place order and footer strip
     10. Order received
     11. Cart
     12. Post-review layout repairs
   ========================================================================== */

/* ------------------------------------------------- 1. page chassis reset */

/* page.php wraps the shortcode in a 68ch prose column. Checkout needs the
   full page, and none of the prose typography. */
.woocommerce-cart .ak-wrap,
.woocommerce-checkout .ak-wrap {
	max-width: none;
	padding-inline: 0;
}

.woocommerce-cart .ak-section,
.woocommerce-checkout .ak-section {
	padding-block: 0;
}

.woocommerce-cart .ak-prose,
.woocommerce-checkout .ak-prose {
	max-width: none !important;
	margin-inline: 0 !important;
	color: var(--ak-ink);
	font-size: var(--ak-fs-base);
	line-height: 1.6;
}

.woocommerce-cart .ak-prose h2,
.woocommerce-cart .ak-prose h3,
.woocommerce-checkout .ak-prose h2,
.woocommerce-checkout .ak-prose h3 {
	color: inherit;
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	margin-top: 0;
}

.woocommerce-cart .ak-prose p,
.woocommerce-checkout .ak-prose p {
	margin: 0;
}

/* The generic page title ("Cart", "Checkout") duplicates the header; every
   template below supplies its own heading. */
.woocommerce-cart .ak-prose > h1,
.woocommerce-checkout .ak-prose > h1 {
	display: none;
}

/* ------------------------------------------------- 1b. column geometry ---
   Shopify's checkout is not a centred container: the page is split down the
   middle, the form column is right-aligned against that split and the grey
   summary panel bleeds from the split to the right edge of the viewport.
   These three values describe one column and are reused by the header, the
   notices and both grid columns so everything lines up on the same edge. */

.woocommerce-cart,
.woocommerce-checkout {
	--ak-co-col:  41.25rem;   /* 660px outer, ~564px of content */
	--ak-co-padl: 1.25rem;
	--ak-co-padr: 1.25rem;
}

@media (min-width: 960px) {
	.woocommerce-cart,
	.woocommerce-checkout {
		--ak-co-padl: 2rem;
		--ak-co-padr: 4rem;
	}
}

/* The grey summary panel. Painted on <main> rather than on the form so it
   runs the full height of the screen the way Shopify's does, with a single
   hairline down the middle separating it from the form column. Excluded on
   the order-received screen, which shares the checkout body class. */
@media (min-width: 960px) {
	.woocommerce-checkout:not(.woocommerce-order-received) .ak-main {
		min-height: calc(100vh - 76px);
		background-image:
			linear-gradient(var(--ak-line), var(--ak-line)),
			linear-gradient(to right, var(--ak-white) 50%, var(--ak-cream) 50%);
		background-size: 1px 100%, 100% 100%;
		background-position: 50% 0, 0 0;
		background-repeat: no-repeat;
	}
}

/* -------------------------------------------- 2. stripped checkout header */

.ak-checkout-header {
	position: relative;
	z-index: 1;
	background: var(--ak-white);
	border-bottom: 1px solid var(--ak-line);
}

.ak-checkout-header .ak-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 68px;
	max-width: none;
	padding-inline: var(--ak-co-padl) var(--ak-co-padr);
}

.ak-checkout-header .ak-wordmark {
	font-size: 1.15rem;
	letter-spacing: 0.1em;
}

/* Sit the wordmark on the same left edge as the form column. */
@media (min-width: 960px) {
	.ak-checkout-header .ak-wrap {
		width: min(50%, var(--ak-co-col));
		margin-inline-start: calc(50% - min(50%, var(--ak-co-col)));
		min-height: 76px;
	}
}

/* ------------------------------------ 3. Woo notices and the login form */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews {
	margin: 0 0 1.25rem;
	padding: .9rem 1rem;
	list-style: none;
	border: 1px solid var(--ak-line);
	border-inline-start: 3px solid var(--ak-gold);
	border-radius: var(--ak-radius);
	background: var(--ak-cream);
	font-size: var(--ak-fs-sm);
	line-height: 1.5;
}

.woocommerce-error {
	border-inline-start-color: var(--ak-sale);
	color: var(--ak-sale);
	background: var(--ak-cream);
}

.woocommerce-message { border-inline-start-color: var(--ak-success); }

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li { margin: 0; }

.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button { float: right; }

/* Everything WooCommerce prints above the form belongs to the form column,
   so it uses the same edge as the fields below it. */
.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-notices-wrapper,
.woocommerce-form-login-toggle,
form.woocommerce-form-login {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--ak-co-padl) var(--ak-co-padr);
}

@media (min-width: 960px) {
	.woocommerce-checkout:not(.woocommerce-order-received) .woocommerce-notices-wrapper,
	.woocommerce-form-login-toggle,
	form.woocommerce-form-login {
		width: min(50%, var(--ak-co-col));
		margin-inline-start: calc(50% - min(50%, var(--ak-co-col)));
	}
}

.woocommerce-form-login-toggle .woocommerce-info { margin-top: 1.5rem; }

form.woocommerce-form-login { margin-bottom: 1.5rem; }

form.woocommerce-form-login .form-row { margin: 0 0 .75rem; }

form.woocommerce-form-login .button,
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .7rem 1.4rem;
	border: 1px solid var(--ak-black);
	border-radius: var(--ak-radius);
	background: var(--ak-black);
	color: var(--ak-white);
	font-size: var(--ak-fs-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background .18s var(--ak-ease), border-color .18s var(--ak-ease);
}

form.woocommerce-form-login .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover,
.woocommerce-message .button:hover {
	background: var(--ak-gold);
	border-color: var(--ak-gold);
	color: var(--ak-white);
}

/* The relocated coupon form's owner element carries nothing but the nonce. */
.ak-coupon-form { display: none !important; }

/* ------------------------------------------------------ 4. checkout grid */

.ak-co { display: block; }

.ak-co__grid {
	display: grid;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding: 0 0 var(--ak-section);
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"sumhead"
		"sum"
		"crumbs"
		"custpre"
		"cust"
		"shipm"
		"paym"
		"ship2"
		"custpost"
		"place"
		"after"
		"foot";
	column-gap: 0;
	row-gap: 0;
	align-items: start;
}

/* The four transparent wrappers. Each keeps its element in the DOM where
   WooCommerce and its scripts expect it while letting its children take part
   in the grid directly. */
.ak-co__grid > #order_review,
.ak-co__grid .ak-co__customer,
.ak-co__grid #customer_details,
.ak-co__grid #payment { display: contents; }

/* blockUI measures the element it is blocking. `#payment` no longer has a box
   of its own, so its overlay would size itself against the whole grid; the
   review table still blocks and gives the same feedback. */
.ak-co__grid #payment > .blockUI { display: none !important; }

.ak-co__grid .ak-co__crumbs      { grid-area: crumbs; }
.ak-co__grid .ak-co__sumhead     { grid-area: sumhead; }
.ak-co__grid .ak-co__hook--pre   { grid-area: custpre; }
.ak-co__grid .ak-co__pane--billing { grid-area: cust; }
.ak-co__grid .ak-co__pane--shipmethod { grid-area: shipm; }
.ak-co__grid .ak-co__pane--payment { grid-area: paym; }
.ak-co__grid .ak-co__pane--shipping { grid-area: ship2; }
.ak-co__grid .ak-co__hook--post  { grid-area: custpost; }
.ak-co__grid .ak-co__pane--place { grid-area: place; }
.ak-co__grid .ak-co__afterreview { grid-area: after; }
.ak-co__grid .ak-co__footer      { grid-area: foot; }
.ak-co__grid .woocommerce-checkout-review-order-table { grid-area: sum; }

.ak-co__grid .ak-co__hook:empty,
.ak-co__grid .ak-co__afterreview:empty { display: none; }

/* Form-column items carry the column padding themselves so the summary
   panel and the mobile disclosure bar can bleed to the viewport edge. */
.ak-co__grid .ak-co__crumbs,
.ak-co__grid .ak-co__hook,
.ak-co__grid .ak-co__pane,
.ak-co__grid .ak-co__afterreview,
.ak-co__grid .ak-co__footer {
	width: 100%;
	max-width: none;
	float: none;
	padding-inline: var(--ak-co-padl) var(--ak-co-padr);
}

/* On mobile the column heading is redundant with the disclosure bar. */
.ak-co__sumtitle {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ak-co__pane--billing { padding-top: 1.75rem; }

@media (min-width: 960px) {
	/* Two equal halves so the split falls in the middle of the page: the
	   form is right-aligned against it, the summary panel starts at it.
	   The summary heading sits in its own row rather than being spanned
	   past — a grid item spanning an auto track distributes its height into
	   that track, which would push the summary down the page. */
	.ak-co__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"crumbs   sumhead"
			"custpre  sum"
			"cust     sum"
			"shipm    sum"
			"paym     sum"
			"ship2    sum"
			"custpost sum"
			"place    sum"
			"after    sum"
			"foot     sum";
		column-gap: 0;
		padding-block: 0 var(--ak-section);
	}

	.ak-co__grid .ak-co__crumbs,
	.ak-co__grid .ak-co__hook,
	.ak-co__grid .ak-co__pane,
	.ak-co__grid .ak-co__afterreview,
	.ak-co__grid .ak-co__footer {
		justify-self: end;
		max-width: var(--ak-co-col);
	}

	.ak-co__grid .ak-co__sumhead,
	.ak-co__grid .woocommerce-checkout-review-order-table {
		justify-self: start;
		width: 100%;
		max-width: var(--ak-co-col);
		padding-inline: var(--ak-co-padr) var(--ak-co-padl);
	}

	.ak-co__pane--billing { padding-top: 0; }

	.ak-co__sumtitle {
		position: static;
		width: auto; height: auto;
		margin: 0;
		clip: auto;
		font-size: var(--ak-fs-xs) !important;
		font-weight: 700;
		letter-spacing: 0.08em !important;
		text-transform: uppercase !important;
		color: var(--ak-muted) !important;
	}

	.ak-co__grid .ak-co__sumhead { padding-block: 2.5rem .5rem; }

	.ak-co__grid .woocommerce-checkout-review-order-table {
		position: sticky;
		top: 1.5rem;
		align-self: start;
		padding-block: 1.5rem 2rem;
	}
}

/* ------------------------------------------------- 4b. step breadcrumb ---
   One-page checkout, so this is a signpost rather than progress: only the
   cart step is a real link and only Information is marked current. */

.ak-co__crumbs { padding-block: 1.5rem .25rem; }

@media (min-width: 960px) {
	.ak-co__crumbs { padding-block: 2.5rem .5rem; }
}

.ak-co__crumblist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ak-fs-sm);
	color: var(--ak-muted);
}

.ak-co__crumb { display: inline-flex; align-items: center; gap: .45rem; }

.ak-co__crumb + .ak-co__crumb::before {
	content: "\203A";
	color: var(--ak-gold-soft);
	font-size: 1rem;
	line-height: 1;
}

.ak-co__crumb a { color: var(--ak-muted); border-bottom: 1px solid transparent; }
.ak-co__crumb a:hover { color: var(--ak-black); border-bottom-color: currentColor; }

.ak-co__crumb--current { color: var(--ak-black); font-weight: 600; }

/* ------------------------------------------------ 5. steps and form fields */

.ak-co__block { margin: 0; }

/* Sections are separated by a hairline with generous air above it, the way
   Shopify stacks Contact / Delivery / Shipping method / Payment. */
.ak-co__step {
	margin: 0;
	padding-block: 1.75rem 2rem;
	border-top: 1px solid var(--ak-line);
}

/* The first section on the page sits directly under the breadcrumb. */
.woocommerce-billing-fields > .ak-co__step:first-of-type {
	padding-top: .5rem;
	border-top: 0;
}

/* !important clears both theme.css's `.ak-prose h2` and the prose reset at
   the top of this file, which are more specific than a single class. */
.ak-co__steptitle {
	margin: 0 0 .9rem;
	font-family: var(--ak-sans);
	font-size: 1.125rem !important;
	font-weight: 600;
	letter-spacing: -.005em !important;
	text-transform: none !important;
	color: var(--ak-black) !important;
	line-height: 1.35;
}

.ak-co__steptitle + .ak-co__stephint { margin-top: -.65rem; }

.ak-co__stephint {
	margin: 0 0 1rem !important;
	font-size: var(--ak-fs-sm);
	color: var(--ak-muted);
	line-height: 1.5;
}

.ak-co__steps,
.ak-co__steps .col-1,
.ak-co__steps .col-2 { min-width: 0; }

.ak-co__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .85rem;
}

.ak-co .form-row,
.ak-co__fields .form-row {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
}

@media (min-width: 480px) {
	.ak-co__fields .form-row-first,
	.ak-co__fields .form-row-last { grid-column: span 1; }
}

/* Label treatment. Shopify's field labels read as a shrunk floating label:
   small, quiet, sitting tight above a tall field. A genuine CSS float is
   not viable against this markup — WooCommerce prints the <label> before
   the input, most fields carry no placeholder for `:placeholder-shown` to
   test, and country/state are swapped out by select2 — so a real,
   always-visible label is used and styled to match instead.

   Scoped to form rows so the payment-method, address-option and
   summary-toggle labels, which are laid out as flex rows further down, are
   not caught by it. */
.ak-co .form-row > label,
form.woocommerce-form-login .form-row > label {
	display: block;
	margin-bottom: .3rem;
	font-size: var(--ak-fs-sm);
	font-weight: 400;
	line-height: 1.3;
	color: var(--ak-muted);
}

.ak-co label .required,
.ak-co label abbr.required {
	color: var(--ak-sale);
	text-decoration: none;
	border: 0;
}

.ak-co label .optional {
	font-weight: 400;
	color: var(--ak-muted);
}

.ak-co .woocommerce-input-wrapper { display: block; }

.ak-co .input-text,
.ak-co input[type="text"],
.ak-co input[type="tel"],
.ak-co input[type="email"],
.ak-co input[type="password"],
.ak-co input[type="number"],
.ak-co select,
.ak-co textarea,
.ak-cart .input-text,
.ak-totals input[type="text"],
.ak-totals select,
form.woocommerce-form-login .input-text {
	width: 100%;
	min-height: 48px;
	padding: .75rem .85rem;
	border: 1px solid var(--ak-line);
	border-radius: 5px;
	background: var(--ak-white);
	color: var(--ak-ink);
	font-family: inherit;
	font-size: var(--ak-fs-base);
	line-height: 1.4;
	appearance: none;
	transition: border-color .15s var(--ak-ease), box-shadow .15s var(--ak-ease);
}

/* Native select needs its chevron back once appearance is stripped. A data
   URI cannot read a custom property; the stroke below is --ak-muted. */
.ak-co select,
.ak-totals select {
	padding-inline-end: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	background-size: 16px 16px;
}

.ak-co textarea {
	min-height: 96px;
	resize: vertical;
}

/* Shopify's focus state: the border darkens and doubles rather than a
   coloured ring appearing. Kept 2px thick so it is unmistakably visible. */
.ak-co .input-text:focus,
.ak-co select:focus,
.ak-co textarea:focus,
.ak-cart .input-text:focus {
	outline: none;
	border-color: var(--ak-black);
	box-shadow: 0 0 0 1px var(--ak-black);
}

.ak-co .input-text:focus-visible,
.ak-co select:focus-visible,
.ak-co textarea:focus-visible {
	outline: 2px solid var(--ak-black);
	outline-offset: 1px;
}

.ak-co .form-row.woocommerce-invalid .input-text,
.ak-co .form-row.woocommerce-invalid select,
.ak-co .form-row.woocommerce-invalid textarea {
	border-color: var(--ak-sale);
}

.ak-co .form-row.woocommerce-validated .input-text {
	border-color: var(--ak-success);
}

/* Checkbox rows: "create an account", terms.
   Specificity has to clear `.ak-co .form-row > label` above. */
.ak-co .ak-co__check,
.ak-co .form-row > label.ak-co__check,
.ak-co .form-row > label.woocommerce-form__label-for-checkbox,
.ak-co .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
	margin: 0;
	font-size: var(--ak-fs-base);
	font-weight: 500;
	cursor: pointer;
}

.ak-co .ak-co__check input[type="checkbox"],
.ak-co .woocommerce-form__input-checkbox {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ak-black);
}

/* Select2, used by Woo for the country and state fields. */
.select2-container--default .select2-selection--single {
	height: 48px;
	border: 1px solid var(--ak-line);
	border-radius: 5px;
	background: var(--ak-white);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-inline: .9rem;
	line-height: 46px;
	color: var(--ak-ink);
	font-size: var(--ak-fs-base);
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--ak-black);
	box-shadow: 0 0 0 1px var(--ak-black);
}

.select2-dropdown {
	border-color: var(--ak-black);
	border-radius: 5px;
	font-size: var(--ak-fs-base);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--ak-black);
	color: var(--ak-white);
}

/* ------------------------------------------------------ 6. order summary */

/* On desktop the table sits directly on the grey panel painted by <main>:
   no card, no border, no radius — Shopify's summary is a bare list on a
   tinted half of the page. On mobile it becomes a self-contained panel
   under the disclosure bar, so the tint is applied there instead. */

.ak-sum {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	background: var(--ak-cream);
	font-size: var(--ak-fs-sm);
	color: var(--ak-ink);
}

@media (min-width: 960px) {
	.ak-sum { background: transparent; }
}

.ak-sum thead th {
	height: 0;
	padding: 0;
	border: 0;
}

.ak-sum tbody td,
.ak-sum tfoot th,
.ak-sum tfoot td {
	padding: .5rem 1.25rem;
	text-align: start;
	vertical-align: top;
	font-weight: 400;
	background: transparent;
}

.ak-sum tbody tr:first-child td { padding-top: 1.5rem; }

@media (min-width: 960px) {
	.ak-sum tbody td,
	.ak-sum tfoot th,
	.ak-sum tfoot td { padding-inline: 0; }

	.ak-sum tbody tr:first-child td { padding-top: 0; }
}

/* Line-item rows centre against the 64px tile; the money column follows. */
.ak-sum tbody td { vertical-align: middle; }

.ak-sum tbody td.product-total {
	text-align: end;
	white-space: nowrap;
	font-weight: 600;
	color: var(--ak-black);
}

.ak-sum__item {
	display: flex;
	align-items: center;
	gap: .9rem;
}

/* Rounded-square grey tile with the quantity badge overlapping its corner. */
.ak-sum__media {
	position: relative;
	flex: none;
	display: block;
	width: 64px;
	height: 64px;
}

.ak-sum__media img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border: 1px solid var(--ak-line);
	border-radius: 8px;
	background: var(--ak-cream-deep);
}

.ak-sum__qty {
	position: absolute;
	inset-block-start: -8px;
	inset-inline-end: -8px;
	display: grid;
	place-items: center;
	min-width: 21px;
	height: 21px;
	padding: 0 6px;
	border: 1px solid var(--ak-cream);
	border-radius: 999px;
	background: var(--ak-black);
	color: var(--ak-white);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.ak-sum__meta { min-width: 0; }

.ak-sum__name {
	display: block;
	font-weight: 600;
	color: var(--ak-black);
	line-height: 1.35;
}

/* Shopify shows the quantity only in the badge on the thumbnail. The
   filtered markup is still printed so plugins that hook
   `woocommerce_checkout_cart_item_quantity` keep working; only Woo's own
   default `<strong class="product-quantity">` is hidden, and its text stays
   in the accessibility tree. */
.ak-sum__name > strong.product-quantity {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ak-sum__meta .variation,
.ak-sum__meta dl.variation {
	margin: .2rem 0 0;
	font-size: var(--ak-fs-xs);
	color: var(--ak-muted);
}

.ak-sum__meta dl.variation dt,
.ak-sum__meta dl.variation dd {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.ak-sum__meta dl.variation dd + dt::before { content: " · "; }
.ak-sum__meta dl.variation p { margin: 0; display: inline; }

.ak-sum tfoot th {
	color: var(--ak-ink);
	font-weight: 400;
}

.ak-sum tfoot td {
	text-align: end;
	white-space: nowrap;
	font-weight: 600;
	color: var(--ak-black);
}

/* Hairline between the discount field and the money. */
.ak-sum tfoot tr:first-child th,
.ak-sum tfoot tr:first-child td {
	padding-top: 1.25rem;
	border-top: 1px solid var(--ak-line);
}

.ak-sum__count {
	display: block;
	font-size: var(--ak-fs-xs);
	color: var(--ak-muted);
}

.ak-sum__pending {
	font-weight: 400;
	color: var(--ak-muted);
	white-space: normal;
}

/* The prepaid discount arrives as a negative cart fee. */
.ak-sum .fee.ak-sum__row--credit th,
.ak-sum .fee.ak-sum__row--credit td,
.ak-sum .cart-discount th,
.ak-sum .cart-discount td { color: var(--ak-success); }

.ak-sum .woocommerce-remove-coupon {
	margin-inline-start: .4em;
	font-size: var(--ak-fs-xs);
	font-weight: 400;
	color: var(--ak-muted);
	text-decoration: underline;
}

.ak-sum .woocommerce-remove-coupon:hover { color: var(--ak-black); }

/* Total: noticeably larger, with the currency code called out the way
   Shopify does ("PKR  Rs 2,400"). */
.ak-sum .order-total th,
.ak-sum .order-total td {
	padding-top: 1.1rem;
	padding-bottom: 1.5rem;
	border-top: 1px solid var(--ak-line);
	color: var(--ak-black);
	vertical-align: baseline;
}

.ak-sum .order-total th {
	font-size: var(--ak-fs-base);
	font-weight: 600;
}

.ak-sum .order-total td {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.ak-sum__cur {
	margin-inline-end: .4em;
	font-size: var(--ak-fs-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ak-muted);
}

.ak-sum .order-total .includes_tax {
	display: block;
	font-size: var(--ak-fs-xs);
	font-weight: 400;
	color: var(--ak-muted);
}

/* ------------------------------------------------- 6b. discount code row */

/* Shopify puts the discount field between the line items and the money, so
   it is rendered inside the review table's <tbody> and regenerated on every
   AJAX refresh with everything else. The controls belong to the hidden
   `#ak-coupon-form` outside `form.checkout`; see review-order.php. */

.ak-sum .ak-sum__couponcell {
	padding-top: 1.25rem;
	padding-bottom: 0;
	border-top: 1px solid var(--ak-line);
}

.ak-sum tbody tr.ak-sum__couponrow:first-child .ak-sum__couponcell { border-top: 0; }

.ak-coupon {
	display: flex;
	align-items: stretch;
	gap: .5rem;
}

.ak-sum .ak-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: .7rem .85rem;
	border: 1px solid var(--ak-line);
	border-radius: 5px;
	background: var(--ak-white);
	color: var(--ak-ink);
	font-family: inherit;
	font-size: var(--ak-fs-base);
	line-height: 1.4;
	appearance: none;
	transition: border-color .15s var(--ak-ease), box-shadow .15s var(--ak-ease);
}

.ak-sum .ak-coupon__input:focus {
	outline: none;
	border-color: var(--ak-black);
	box-shadow: 0 0 0 1px var(--ak-black);
}

.ak-sum .ak-coupon__input.has-error { border-color: var(--ak-sale); }

.ak-sum .ak-coupon__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .7rem 1.4rem;
	border: 1px solid var(--ak-line);
	border-radius: 5px;
	background: var(--ak-cream-deep);
	color: var(--ak-black);
	font-family: inherit;
	font-size: var(--ak-fs-base);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	float: none;
	transition: background .18s var(--ak-ease), color .18s var(--ak-ease), border-color .18s var(--ak-ease);
}

.ak-sum .ak-coupon__btn:hover {
	background: var(--ak-black);
	border-color: var(--ak-black);
	color: var(--ak-white);
}

.ak-sum .ak-coupon__btn:focus-visible {
	outline: 2px solid var(--ak-black);
	outline-offset: 2px;
}

.ak-sum .ak-coupon__btn:disabled { opacity: .5; cursor: progress; }

.ak-sum .coupon-error-notice {
	display: block;
	margin-top: .4rem;
	font-size: var(--ak-fs-xs);
	color: var(--ak-sale);
}

/* --------------------------------- 7. mobile order-summary disclosure */

/* The control lives outside #order_review so its state survives AJAX; the
   bar it toggles is the table's <caption>, so the amount on it is rendered
   server-side and stays correct after every refresh — including after the
   Easypaisa discount fee is added or removed. No JavaScript. */

.ak-sum__bar {
	caption-side: top;
	padding: 0;
	text-align: start;
}

.ak-sum__barinner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 60px;
	padding: .75rem 1.25rem;
	background: var(--ak-cream);
	border-bottom: 1px solid var(--ak-line);
}

.ak-sum .ak-sum__toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	margin: 0;
	font-size: var(--ak-fs-base);
	font-weight: 500;
	color: var(--ak-black);
	cursor: pointer;
	border-radius: var(--ak-radius);
}

.ak-sum__cart { width: 19px; height: 19px; flex: none; color: var(--ak-black); }
.ak-sum__chev { width: 16px; height: 16px; flex: none; transition: transform .2s var(--ak-ease); }

.ak-sum__toggletext--hide { display: none; }

.ak-sum__bartotal {
	font-size: var(--ak-fs-md);
	font-weight: 700;
	color: var(--ak-black);
	white-space: nowrap;
}

/* Collapsed by default below the two-column breakpoint. */
@media (max-width: 959.98px) {
	.ak-co__sumcb:not(:checked) ~ #order_review .ak-sum > thead,
	.ak-co__sumcb:not(:checked) ~ #order_review .ak-sum > tbody,
	.ak-co__sumcb:not(:checked) ~ #order_review .ak-sum > tfoot { display: none; }

	.ak-co__sumcb:not(:checked) ~ #order_review .ak-sum__barinner { border-bottom: 1px solid var(--ak-line); }

	/* Expanded, the summary reads as one tinted panel hanging off the bar. */
	.ak-co__sumcb:checked ~ #order_review .ak-sum { border-bottom: 1px solid var(--ak-line); }
}

.ak-co__sumcb:checked ~ #order_review .ak-sum__toggletext--show { display: none; }
.ak-co__sumcb:checked ~ #order_review .ak-sum__toggletext--hide { display: inline; }
.ak-co__sumcb:checked ~ #order_review .ak-sum__chev { transform: rotate(180deg); }

.ak-co__sumcb:focus-visible ~ #order_review .ak-sum__toggle {
	outline: 2px solid var(--ak-black);
	outline-offset: 2px;
}

@media (min-width: 960px) {
	.ak-sum__bar { display: none; }
}

/* -------------------------------------------------- 8. shipping method box */

/* `wc_cart_totals_shipping_html()` emits table rows, so payment.php wraps it
   in a table; here that table is flattened back into the bordered box
   Shopify shows, with the rate name on the left and its price right-aligned.
   With a single rate WooCommerce prints a hidden input rather than a radio,
   so the box renders as one plain row — exactly what is wanted. */

.ak-ship__table {
	width: 100%;
	border-collapse: collapse;
}

.ak-ship__table tbody,
.ak-ship__table tr { display: block; width: 100%; }

/* The package name duplicates the section heading. */
.ak-ship__table th { display: none; }

.ak-ship__table td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	font-size: var(--ak-fs-sm);
	color: var(--ak-muted);
	line-height: 1.6;
}

.ak-ship .woocommerce-shipping-methods,
.ak-ship #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ak-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--ak-white);
}

.ak-ship .woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0;
	padding-inline: 18px;
	min-height: 56px;
	border-top: 1px solid var(--ak-line);
}

.ak-ship .woocommerce-shipping-methods li:first-child { border-top: 0; }

.ak-ship .woocommerce-shipping-methods label {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding-block: .7rem;
	font-size: var(--ak-fs-md);
	font-weight: 500;
	color: var(--ak-black);
	cursor: pointer;
}

.ak-ship__name { min-width: 0; }

.ak-ship__cost {
	flex: none;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Only rendered when more than one rate is available. */
.ak-ship .woocommerce-shipping-methods input.shipping_method[type="radio"] {
	appearance: none;
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1.5px solid var(--ak-gold-soft);
	border-radius: 50%;
	background-color: var(--ak-white);
	background-repeat: no-repeat;
	cursor: pointer;
}

.ak-ship .woocommerce-shipping-methods input.shipping_method[type="radio"]:checked {
	border-color: var(--ak-black);
	background-image: radial-gradient(circle at 50% 50%, var(--ak-black) 0 5px, transparent 5.5px);
}

.ak-ship .woocommerce-shipping-methods input.shipping_method[type="radio"]:focus-visible {
	outline: 2px solid var(--ak-black);
	outline-offset: 2px;
}

/* Cart-only chrome that can surface here after a no-JS coupon POST. */
.ak-ship .woocommerce-shipping-destination,
.ak-ship .woocommerce-shipping-calculator { display: none; }

/* ---------------------------------------------------- 8b. payment methods */

.ak-pay__section { padding-bottom: 0; }

/* Shopify stacks the gateways as one bordered group with hairlines between
   them and no gap, so they read as a single control rather than as cards. */
.ak-pay__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ak-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--ak-white);
}

.ak-pay__method {
	margin: 0;
	background: var(--ak-white);
	border-top: 1px solid var(--ak-line);
}

.ak-pay__method:first-child { border-top: 0; }

/* The clickable row. The selected state is drawn here rather than on the
   list item so the ring closes above the expanded panel. */
.ak-pay__head {
	display: flex;
	align-items: center;
	gap: .85rem;
	min-height: 56px;
	padding-inline: 18px;
	transition: background .18s var(--ak-ease), box-shadow .18s var(--ak-ease);
}

.ak-pay__method:hover .ak-pay__head { background: var(--ak-cream); }

.ak-pay__method:has(.ak-pay__radio:checked) { background: var(--ak-cream); }

.ak-pay__method:has(.ak-pay__radio:checked) .ak-pay__head {
	background: var(--ak-cream);
	box-shadow: inset 0 0 0 2px var(--ak-black);
}

.ak-pay__method:has(.ak-pay__radio:focus-visible) .ak-pay__head {
	outline: 2px solid var(--ak-black);
	outline-offset: -3px;
}

.ak-pay__radio {
	appearance: none;
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1.5px solid var(--ak-gold-soft);
	border-radius: 50%;
	background-color: var(--ak-white);
	background-repeat: no-repeat;
	cursor: pointer;
}

.ak-pay__radio:checked {
	border-color: var(--ak-black);
	background-image: radial-gradient(circle at 50% 50%, var(--ak-black) 0 5px, transparent 5.5px);
}

.ak-pay .ak-pay__label {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 44px;
	margin: 0 !important;
	font-size: var(--ak-fs-md);
	font-weight: 600;
	color: var(--ak-black);
	cursor: pointer;
}

.ak-pay__logo { display: inline-flex; align-items: center; gap: .35rem; }
.ak-pay__logo img { max-height: 22px; width: auto; margin: 0; }
.ak-pay__logo:empty { display: none; }

.ak-pay__none { padding: 1rem 18px; }
.ak-pay__none .woocommerce-info { margin: 0; }

/* Panel. WooCommerce's checkout.js slides this open, so its display is left
   under jQuery's control — only the framing is styled here. It sits inside
   the group, directly beneath the selected row, on the same light grey. */
.ak-pay .payment_box {
	margin: 0;
	padding: 22px 18px;
	border-top: 1px solid var(--ak-line);
	background: var(--ak-cream);
	font-size: var(--ak-fs-md);
	line-height: 1.55;
	color: var(--ak-ink);
}

.ak-pay .payment_box > p:first-child { margin-top: 0; }
.ak-pay .payment_box p { margin: 0 0 1em; }
.ak-pay .payment_box p:last-child { margin-bottom: 0; }

/* --- Easypaisa / bank transfer block rendered by the arfa-payments gateway.

   Shopify's own panel is plain running text on one left margin, not a table
   of label/value pairs pushed to opposite edges — it is easier to scan and
   far easier to copy an account number out of. The plugin's markup is
   `<div class="arfa-pay__row"><span>Label</span><strong>Value</strong></div>`,
   so the "Label: Value" line is built here in CSS rather than by editing the
   gateway. */

.arfa-pay__intro {
	margin: 0 0 1em;
	color: var(--ak-ink);
	font-size: var(--ak-fs-md);
	line-height: 1.55;
}
.arfa-pay__intro p { margin: 0 0 1em; }
.arfa-pay__intro p:last-child { margin-bottom: 0; }

/* The gateway wraps its already-autop'd description in a <p>, so the parser
   closes it and leaves an empty element behind. Do not let it take space. */
.arfa-pay__intro:empty { display: none; margin: 0; }

/* The account block: tight lines within, a full blank line either side. */
.arfa-pay__account {
	margin: 1em 0;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

.arfa-pay__row {
	display: block;
	gap: 0;
	padding: 0;
	border: 0;
	font-size: var(--ak-fs-md);
	line-height: 1.5;
	color: var(--ak-ink);
}

.arfa-pay__row + .arfa-pay__row { margin-top: .15em; }

.arfa-pay__row span {
	color: var(--ak-ink);
	font-weight: 400;
}

.arfa-pay__row span::after { content: ":\00a0"; }

.arfa-pay__row strong {
	font-weight: 700;
	color: var(--ak-black);
	text-align: start;
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
}

.arfa-pay__note {
	margin: 1em 0 0 !important;
	font-size: var(--ak-fs-md);
	color: var(--ak-ink);
	line-height: 1.55;
}

.arfa-pay__tid { margin-top: 1.25em !important; }

.arfa-pay__tid > label {
	color: var(--ak-ink) !important;
	font-size: var(--ak-fs-sm) !important;
}

/* -------------------------------------- 8c. delivery-address option group */

/* One checkbox presented as two mutually exclusive rows, in the same idiom
   as the payment group above. The row that is already selected is made inert
   so clicking it cannot toggle the state back; the other row is a plain
   `<label for>` and needs no JavaScript. */

.ak-addr .ak-optgroup { margin: 0; }

.ak-optgroup {
	display: block;
	position: relative;
	border: 1px solid var(--ak-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--ak-white);
	font-size: var(--ak-fs-md) !important;
	font-weight: 400;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--ak-ink) !important;
}

.ak-optgroup__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ak-co .ak-optgroup__opt,
.ak-optgroup__opt {
	display: flex;
	align-items: center;
	gap: .85rem;
	min-height: 56px;
	margin: 0;
	padding: .7rem 18px;
	border-top: 1px solid var(--ak-line);
	background: var(--ak-white);
	font-size: var(--ak-fs-md);
	font-weight: 600;
	color: var(--ak-black);
	cursor: pointer;
	transition: background .18s var(--ak-ease), box-shadow .18s var(--ak-ease);
}

.ak-optgroup__opt--same { border-top: 0; }

.ak-optgroup__dot {
	flex: none;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--ak-gold-soft);
	border-radius: 50%;
	background-color: var(--ak-white);
	background-repeat: no-repeat;
}

.ak-optgroup__opt:hover { background: var(--ak-cream); }

/* Selected: unchecked means "same as above", checked means "different". */
.ak-optgroup__input:not(:checked) ~ .ak-optgroup__opt--same,
.ak-optgroup__input:checked ~ .ak-optgroup__opt--diff {
	background: var(--ak-cream);
	box-shadow: inset 0 0 0 2px var(--ak-black);
	pointer-events: none;
}

.ak-optgroup__input:not(:checked) ~ .ak-optgroup__opt--same .ak-optgroup__dot,
.ak-optgroup__input:checked ~ .ak-optgroup__opt--diff .ak-optgroup__dot {
	border-color: var(--ak-black);
	background-image: radial-gradient(circle at 50% 50%, var(--ak-black) 0 5px, transparent 5.5px);
}

.ak-optgroup__input:focus-visible ~ .ak-optgroup__opt {
	outline: 2px solid var(--ak-black);
	outline-offset: -3px;
}

/* Hide the second address until it is asked for. checkout.js slide-toggles
   this with an inline style, which wins over the rule below, so this only
   governs the state before the script runs. */
.woocommerce-shipping-fields:has(#ship-to-different-address-checkbox:not(:checked)) .shipping_address {
	display: none;
}

.ak-addr .shipping_address { padding-top: 1.25rem; }

/* ------------------------------------------- 9. place order and footer */

.ak-pay__place {
	display: block;
	margin: 0;
	padding-top: 1.75rem;
}

.ak-pay__place .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1rem;
	font-size: var(--ak-fs-sm);
}

.ak-pay__place .woocommerce-privacy-policy-text p {
	margin: 0 0 .75rem;
	font-size: var(--ak-fs-xs);
	color: var(--ak-muted);
	line-height: 1.6;
}

/* Shopify's primary button: full width, black, ~52px, medium radius, and
   set in sentence case rather than the shop's uppercase button style. The
   wording follows the gateway — "Pay now" or "Complete order". */
.ak-pay__submit {
	width: 100%;
	min-height: 52px;
	border-radius: 8px;
	font-size: var(--ak-fs-md);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.ak-pay__submit:disabled,
.ak-pay__submit[disabled] { opacity: .5; cursor: not-allowed; }

/* Footer strip. Shopify closes the column with a hairline and quiet policy
   links; the store's reassurance line is demoted here so the button stays
   the last strong element on the page. */
.ak-co__footer {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ak-line);
}

.ak-co__trust {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem !important;
	font-size: var(--ak-fs-xs);
	color: var(--ak-muted);
	line-height: 1.6;
}

.ak-co__trust svg { width: 16px; height: 16px; flex: none; color: var(--ak-muted); }

.ak-co__links {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ak-fs-xs);
}

.ak-co__links a {
	color: var(--ak-muted);
	border-bottom: 1px solid transparent;
}

.ak-co__links a:hover {
	color: var(--ak-black);
	border-bottom-color: currentColor;
}

.ak-co__afterreview { padding-top: 1.5rem; }

/* ------------------------------------------------------ 10. order received */

.ak-ty {
	max-width: 46rem;
	margin-inline: auto;
	padding-block: 1rem var(--ak-section);
}

.ak-ty__hero { text-align: center; }

.ak-ty__tick {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--ak-gold-pale);
	color: var(--ak-success);
}

.ak-ty__tick svg { width: 28px; height: 28px; }

.ak-ty__eyebrow {
	margin: 0 0 .5rem !important;
	font-size: var(--ak-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ak-muted);
}

.ak-ty .woocommerce-notice--success,
.ak-ty .woocommerce-thankyou-order-received {
	margin: 0 0 2rem !important;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--ak-sans);
	font-size: var(--ak-fs-xl);
	font-weight: 500;
	line-height: 1.15;
	color: var(--ak-black);
}

.ak-ty__details {
	display: grid;
	gap: 0;
	margin: 0 0 2rem;
	padding: .5rem 1.25rem;
	list-style: none;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
	background: var(--ak-cream);
}

.ak-ty__details li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--ak-line);
	font-size: var(--ak-fs-sm);
}

.ak-ty__details li:last-child { border-bottom: 0; }
.ak-ty__details li > span { color: var(--ak-muted); }
.ak-ty__details li > strong { font-weight: 700; text-align: end; color: var(--ak-black); }

.ak-ty__card--failed {
	padding: 1.5rem;
	border: 1px solid var(--ak-sale);
	border-radius: var(--ak-radius-lg);
}

.ak-ty__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem !important; }

.ak-ty__back { margin-top: 2rem !important; text-align: center; }

/* Payment instructions repeated by the gateway on this screen. */
.arfa-pay__instructions {
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
	background: var(--ak-cream);
}

.arfa-pay__instructions h2 {
	margin: 0 0 1rem;
	font-size: var(--ak-fs-md) !important;
	font-weight: 700;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: var(--ak-black);
}

.arfa-pay__steps {
	margin: 0;
	padding-inline-start: 1.2rem;
	display: grid;
	gap: .6rem;
	font-size: var(--ak-fs-sm);
	line-height: 1.6;
}

.arfa-pay__cta { margin: 1.25rem 0 0 !important; }

.arfa-pay__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .75rem 1.5rem;
	border-radius: var(--ak-radius);
	background: var(--ak-whatsapp);
	color: var(--ak-white);
	font-size: var(--ak-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.arfa-pay__wa:hover { background: var(--ak-black); color: var(--ak-white); }

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: 2.5rem;
	font-size: var(--ak-fs-sm);
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
	margin: 0 0 1rem;
	font-size: var(--ak-fs-md) !important;
	font-weight: 700;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
}

.woocommerce-order-details .shop_table { width: 100%; border-collapse: collapse; }

.woocommerce-order-details .shop_table th,
.woocommerce-order-details .shop_table td {
	padding: .7rem 0;
	border-bottom: 1px solid var(--ak-line);
	text-align: start;
}

.woocommerce-order-details .shop_table td:last-child,
.woocommerce-order-details .shop_table th:last-child { text-align: end; }

/* ----------------------------------------------------------------- 11. cart */

.ak-cart {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding: 2rem var(--ak-gutter) var(--ak-section);
}

.ak-cart__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--ak-line);
}

.ak-cart__title {
	margin: 0;
	font-family: var(--ak-sans);
	font-size: var(--ak-fs-xl);
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--ak-black);
}

.ak-cart__continue {
	flex: none;
	font-size: var(--ak-fs-sm);
	font-weight: 600;
	border-bottom: 1px solid currentColor;
}

.ak-cart__grid { display: grid; gap: 2.5rem; }

@media (min-width: 960px) {
	.ak-cart__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
		gap: 3rem;
		align-items: start;
	}
	.ak-cart__aside { position: sticky; top: 2rem; }
}

.ak-cart__table { width: 100%; border-collapse: collapse; }

.ak-cart__table thead {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ak-cart__table tbody,
.ak-cart__table tr,
.ak-cart__table td { display: block; width: 100%; }

.ak-cart__table tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name  remove"
		"thumb price remove"
		"thumb qty   subtotal";
	gap: .25rem .9rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--ak-line);
	align-items: start;
}

@media (min-width: 700px) {
	.ak-cart__table tr.woocommerce-cart-form__cart-item { grid-template-columns: 96px minmax(0, 1fr) auto; }
}

.woocommerce-cart-form__cart-item .product-thumbnail { grid-area: thumb; }
.woocommerce-cart-form__cart-item .product-name      { grid-area: name; }
.woocommerce-cart-form__cart-item .product-price     { grid-area: price; }
.woocommerce-cart-form__cart-item .product-quantity  { grid-area: qty; align-self: end; padding-top: .5rem; }
.woocommerce-cart-form__cart-item .product-subtotal  { grid-area: subtotal; align-self: end; text-align: end; }
.woocommerce-cart-form__cart-item .product-remove    { grid-area: remove; text-align: end; }

.ak-cart__table .product-thumbnail img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	background: var(--ak-cream);
}

.ak-cart__table .product-name {
	font-size: var(--ak-fs-base);
	font-weight: 600;
	line-height: 1.35;
	color: var(--ak-black);
}

.ak-cart__table .product-name .variation {
	margin: .25rem 0 0;
	font-size: var(--ak-fs-xs);
	font-weight: 400;
	color: var(--ak-muted);
}

.ak-cart__table .product-name .variation dt,
.ak-cart__table .product-name .variation dd { display: inline; margin: 0; }
.ak-cart__table .product-name .variation p { display: inline; margin: 0; }

.ak-cart__table .product-price {
	font-size: var(--ak-fs-sm);
	color: var(--ak-muted);
}

.ak-cart__table .product-subtotal {
	font-size: var(--ak-fs-base);
	font-weight: 700;
	color: var(--ak-black);
	white-space: nowrap;
}

.ak-cart__table .quantity { display: inline-flex; }

.ak-cart__table .quantity .qty {
	width: 5rem;
	min-height: 44px;
	padding: .5rem;
	text-align: center;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	font-size: var(--ak-fs-sm);
}

.ak-cart__table .quantity label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ak-cart__table a.remove {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--ak-line);
	color: var(--ak-muted);
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
}

.ak-cart__table a.remove:hover {
	border-color: var(--ak-sale);
	background: var(--ak-sale);
	color: var(--ak-white);
}

.ak-cart__table td.ak-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem !important;
	border-bottom: 0 !important;
}

.ak-cart__coupon { flex: 1 1 20rem; }

.ak-cart__couponlabel {
	display: block;
	margin-bottom: .35rem;
	font-size: var(--ak-fs-sm);
	font-weight: 600;
}

.ak-cart__couponrow { display: flex; gap: .5rem; }
.ak-cart__couponrow .input-text { flex: 1 1 auto; min-width: 0; }
.ak-cart__couponrow .ak-btn { flex: none; }

.ak-cart__update { flex: none; }

/* Cart totals panel. */
.ak-totals {
	padding: 1.5rem;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
	background: var(--ak-cream);
}

.ak-totals__title {
	margin: 0 0 1rem;
	font-size: var(--ak-fs-xs) !important;
	font-weight: 700;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--ak-muted) !important;
}

.ak-totals__table { width: 100%; border-collapse: collapse; font-size: var(--ak-fs-sm); }

.ak-totals__table th,
.ak-totals__table td {
	padding: .5rem 0;
	text-align: start;
	vertical-align: top;
	font-weight: 500;
	color: var(--ak-muted);
}

.ak-totals__table td {
	text-align: end;
	font-weight: 600;
	color: var(--ak-ink);
}

.ak-totals__table .ak-totals__row--credit th,
.ak-totals__table .ak-totals__row--credit td,
.ak-totals__table .cart-discount th,
.ak-totals__table .cart-discount td { color: var(--ak-success); }

.ak-totals__table .order-total th,
.ak-totals__table .order-total td {
	padding-top: .9rem;
	border-top: 1px solid var(--ak-line);
	font-size: var(--ak-fs-md);
	font-weight: 700;
	color: var(--ak-black);
}

.ak-totals .woocommerce-shipping-methods,
.ak-totals #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: end;
}

.ak-totals .woocommerce-shipping-methods label { display: inline; font-size: var(--ak-fs-sm); font-weight: 600; }

.ak-totals .woocommerce-shipping-destination,
.ak-totals .shipping-calculator-button {
	display: block;
	margin-top: .35rem;
	font-size: var(--ak-fs-xs);
	font-weight: 400;
	color: var(--ak-muted);
}

.ak-totals__cta { margin-top: 1.25rem; }

.ak-totals__cta .checkout-button,
.wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: .75rem 1.5rem;
	border: 1px solid var(--ak-black);
	border-radius: var(--ak-radius);
	background: var(--ak-black);
	color: var(--ak-white);
	font-size: var(--ak-fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	transition: background .18s var(--ak-ease), border-color .18s var(--ak-ease);
}

.ak-totals__cta .checkout-button:hover,
.wc-proceed-to-checkout .checkout-button:hover {
	background: var(--ak-gold);
	border-color: var(--ak-gold);
	color: var(--ak-white);
}

.ak-totals__note {
	margin: 1rem 0 0 !important;
	font-size: var(--ak-fs-xs);
	color: var(--ak-muted);
	line-height: 1.6;
}

.ak-cart__aside .cross-sells { margin-top: 2rem; }
.ak-cart__aside .cross-sells h2 {
	font-size: var(--ak-fs-xs) !important;
	font-weight: 700;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

/* Empty cart. */
.ak-cart--empty {
	max-width: 34rem;
	text-align: center;
	padding-block: var(--ak-section);
}

.ak-cart__emptyicon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: var(--ak-cream);
	color: var(--ak-gold);
}

.ak-cart__emptyicon svg { width: 28px; height: 28px; }

.ak-cart--empty .cart-empty,
.ak-cart--empty .woocommerce-info {
	margin: 0 0 .5rem !important;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--ak-fs-base);
	color: var(--ak-muted);
}

.ak-cart__emptylead {
	margin: 0 0 1.75rem !important;
	color: var(--ak-muted);
	font-size: var(--ak-fs-sm);
}

.ak-cart--empty .return-to-shop { margin: 0 !important; }

/* -------------------------------------------------------------- blockUI */

.blockUI.blockOverlay { background: var(--ak-white) !important; }

/* ------------------------------------------- 12. post-review layout repairs */

/* `.form-row` is a flex row in WooCommerce's own stylesheet, so the submit
   row's contents were being shrunk to zero and rendered as columns of single
   words down the left margin. The row is a plain block. (The trust line that
   originally tripped this now lives in the footer strip; the guard stays
   because `.place-order` still carries `.form-row`.) */
.ak-pay__place {
	display: block;
}

.ak-pay__place > * {
	width: 100%;
	flex: 1 1 100%;
}

/* The customer form sits in a ~564px column. Splitting that again into two
   271px sub-columns made "First name" wrap onto two lines and left a wide
   empty gutter beside it. Shopify keeps this a single column and only pairs
   first/last name.

   Inside the checkout grid `#customer_details` is `display: contents`, so
   `.col-1` and `.col-2` are grid items: WooCommerce's `float: left` no longer
   applies to them, but its `width: 48%` still would — hence the explicit
   reset. Any other `col2-set` on these pages (the customer details block on
   the order-received screen) simply stacks. */
.woocommerce-checkout .col2-set,
.woocommerce-cart .col2-set {
	display: block;
}

.ak-co .col2-set,
.ak-co__steps.col2-set {
	display: contents;
}

/* woocommerce-layout.css clearfixes `.col2-set` with generated content. An
   element with `display: contents` still generates its pseudo-elements, and
   they would land in the grid as stray auto-placed items. */
form.ak-co .col2-set::before,
form.ak-co .col2-set::after {
	content: none;
	display: none;
}

.ak-co__steps .col-1,
.ak-co__steps .col-2,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}

/* The same stylesheet floats form rows and pins the paired ones to 47%. As
   grid items the floats are already inert; the widths are not, and they left
   "First name" at under half the width of its own column. */
form.ak-co .ak-co__fields .form-row,
form.ak-co .ak-co__fields .form-row-first,
form.ak-co .ak-co__fields .form-row-last {
	width: auto;
	float: none;
	overflow: visible;
}

/* WooCommerce floats the button inside its notices, so on a narrow column the
   button escapes the box it belongs to. Lay the notice out as a row instead,
   and let it wrap on a phone rather than overlap. */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
}

.woocommerce-checkout .woocommerce-message > .button,
.woocommerce-checkout .woocommerce-info > .button,
.woocommerce-checkout .woocommerce-error > .button {
	float: none;
	margin: 0;
	margin-inline-start: auto;
	flex: none;
}

@media (max-width: 599px) {
	.woocommerce-checkout .woocommerce-message > .button,
	.woocommerce-checkout .woocommerce-info > .button,
	.woocommerce-checkout .woocommerce-error > .button {
		margin-inline-start: 0;
		width: 100%;
	}
}