/**
 * Cart and checkout.
 *
 * Loaded on both — see inc/assets.php. WooCommerce's block cart and checkout
 * bring their own layout; what is missing without this file is the theme's
 * button shape, which otherwise reverts to the block default and stops
 * matching every other button on the site.
 */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart .wc-block-components-button:not(.is-link),
.wc-block-checkout .wc-block-components-button:not(.is-link) {
	border-radius: 8px;
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--base);
}

/* The cart button is the storefront's solid button, so it takes the hover
   live gives that button: green to near-black, white label, #121212 rule.
   The selector mirrors the base rule above — WooCommerce paints this element
   through .wc-block-components-button, and a shorter hover selector loses.
   (The checkout page's own place-order button is Shopify's blue checkout
   button and keeps its blue hover, further down this file.) */
.wc-block-cart__submit-button:hover,
.wc-block-cart .wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	border-color: #121212;
}

/* The order summary panel reads as a card, like the offer panel on a product. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__totals-title {
	font-family: var(--wp--preset--font-family--body);
}

.wc-block-components-totals-item__value {
	font-weight: 600;
	color: var(--wp--preset--color--brand-green);
}

/* Prices inside the cart and checkout are printed by wc_price(), which wraps
   the amount in its own span; keep it from reasserting a size. */
.wc-block-cart .woocommerce-Price-amount,
.wc-block-checkout .woocommerce-Price-amount {
	font-size: inherit;
	color: inherit;
}

/* ---------- cart table ---------- */

/* The live cart labels its columns in spaced capitals. WooCommerce writes them
   in sentence case, so the capitals come from here rather than from a string
   override, which would fight the screen-reader text as well. */
.wc-block-cart__totals-title,
.wc-block-cart-items__header .wc-block-cart-items__header-product,
.wc-block-cart-items__header .wc-block-cart-items__header-total {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/* The live row puts the publisher above the book's name, and the name is not
   shouted; WooCommerce's block sets both at the same weight. */
.wc-block-components-product-name {
	font-weight: 600;
	color: var(--wp--preset--color--ink-heading);
	text-decoration: none;
}

.wc-block-cart-item__wrap .wc-block-components-product-metadata {
	color: rgba(0, 0, 0, 0.65);
}

/* The quantity stepper matches the one on the product page. */
.wc-block-cart .wc-block-components-quantity-selector {
	border-radius: 8px;
}

/* Totals: the figure is the thing being read, so it carries the weight and the
   brand colour, as it does on the live cart. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--lg);
}

/* ================= Shopify-style one-page checkout =================
 *
 * The live store checks out on Shopify's current one-page checkout: a bare
 * header, the form in a left column and the order summary in a grey column
 * that runs to the right edge of the window. WooCommerce's block checkout is
 * already one page with the same sections in the same order, so this is a
 * restyle of that block rather than a different checkout.
 *
 * Every number is measured off gyanpradip.com's checkout at a 1280 viewport:
 * the 91px header, the 683/583 column split, the 143px left gutter, the 499px
 * form column, 49px fields on a 12px radius, 47px option rows and the 50px
 * #005bd1 submit.
 */

.gp-checkout,
.gp-checkout-head {
	--gp-co-border: #dedede;
	--gp-co-blue: #005bd1;
	--gp-co-panel: #f5f5f5;
	--gp-co-selected: #f8f9ff;
	/* 143/1280 — the gutter tracks the window the way live's does. */
	--gp-co-gutter: clamp(16px, 11.18vw, 143px);
}

/* ---------- header ---------- */

.gp-checkout-head {
	background: #fff;
	border-block-end: 1px solid var(--gp-co-border);
}

.gp-checkout-head__inner {
	box-sizing: border-box;
	min-block-size: 91px;
	padding-inline: var(--gp-co-gutter) 41px;
}

.gp-checkout-head__logo {
	margin: 0;
	line-height: 0;
}

.gp-checkout-head__logo img {
	display: block;
}

.gp-checkout-head__logo a {
	display: block;
}

.gp-checkout-head__cart {
	margin: 0;
}

/* The label is there for screen readers; live shows the bag alone. */
.gp-checkout-head__cart a {
	display: block;
	inline-size: 24px;
	block-size: 24px;
	font-size: 0;
	background: var(--gp-co-blue);
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l1 13H5L6 7z'/><path d='M9 7V5a3 3 0 0 1 6 0v2'/></svg>") center / contain no-repeat;
}

/* ---------- two columns ---------- */

.gp-checkout {
	padding: 0;
	max-inline-size: none;
}

.gp-checkout .wc-block-checkout.wc-block-components-sidebar-layout {
	display: grid;
	/* 683 / 583 at 1280, which is where the grey edge falls on live. */
	grid-template-columns: minmax(0, 683fr) minmax(0, 583fr);
	align-items: stretch;
	gap: 0;
	margin: 0;
	max-inline-size: none;
}

.gp-checkout .wc-block-checkout__main {
	box-sizing: border-box;
	padding: 40px 41px 64px var(--gp-co-gutter);
	max-inline-size: none;
}

.gp-checkout .wc-block-checkout__sidebar {
	box-sizing: border-box;
	padding: 40px 60px 40px 39px;
	background: var(--gp-co-panel);
	max-inline-size: none;
}

/* The form column is a fixed 499 on live, not a share of the column. */
.gp-checkout .wc-block-checkout__form {
	max-inline-size: 499px;
}

@media (max-width: 900px) {
	.gp-checkout .wc-block-checkout.wc-block-components-sidebar-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Summary first on a phone, as live does. */
	.gp-checkout .wc-block-checkout__sidebar {
		order: -1;
		padding: 24px 16px;
	}

	.gp-checkout .wc-block-checkout__main {
		padding: 24px 16px 48px;
	}

	.gp-checkout .wc-block-checkout__form {
		max-inline-size: none;
	}
}

/* ---------- section headings ---------- */

.gp-checkout .wc-block-components-checkout-step {
	padding: 0;
	border: 0;
	margin-block-end: 32px;
}

.gp-checkout .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: #000;
}

/* Live numbers nothing and explains nothing under these headings. */
.gp-checkout .wc-block-components-checkout-step__heading::before,
.gp-checkout .wc-block-components-checkout-step__description {
	display: none;
}

.gp-checkout .wc-block-components-checkout-step__heading {
	margin-block-end: 16px;
}

/* The shipping and payment steps are secondary headings on live. */
.gp-checkout .wc-block-checkout__shipping-option .wc-block-components-checkout-step__title,
.gp-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__title {
	font-size: 16px;
}

/* ---------- fields ---------- */

.gp-checkout .wc-block-components-text-input,
.gp-checkout .wc-blocks-components-select__container {
	border: 1px solid var(--gp-co-border);
	border-radius: 12px;
	background: #fff;
}

.gp-checkout .wc-block-components-text-input input[type="text"],
.gp-checkout .wc-block-components-text-input input[type="tel"],
.gp-checkout .wc-block-components-text-input input[type="email"],
.gp-checkout .wc-blocks-components-select__select {
	box-sizing: border-box;
	block-size: 47px;
	padding: 14px 10px 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	font-size: 14px;
	color: #000;
}

.gp-checkout .wc-block-components-text-input label,
.gp-checkout .wc-blocks-components-select__label {
	font-size: 14px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.55);
}

.gp-checkout .wc-block-components-text-input:focus-within,
.gp-checkout .wc-blocks-components-select__container:focus-within {
	border-color: var(--gp-co-blue);
	box-shadow: 0 0 0 1px var(--gp-co-blue);
}

/* ---------- option groups ---------- */

/* Live draws one bordered box per group and rules between the rows, with the
   chosen row tinted and outlined in the same blue as the submit. */
.gp-checkout .wc-block-components-radio-control {
	border: 1px solid var(--gp-co-border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.gp-checkout .wc-block-components-radio-control__option {
	box-sizing: border-box;
	min-block-size: 47px;
	padding: 14px;
	margin: 0;
	border: 0;
	border-radius: 0;
	font-size: 14px;
}

.gp-checkout .wc-block-components-radio-control__option+.wc-block-components-radio-control__option {
	border-block-start: 1px solid var(--gp-co-border);
}

.gp-checkout .wc-block-components-radio-control__option-checked,
.gp-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
	background: var(--gp-co-selected);
	box-shadow: inset 0 0 0 2px var(--gp-co-blue);
}

.gp-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--gp-co-blue);
	color: var(--gp-co-blue);
}

/* ---------- submit ---------- */

/* Live's is blue, not the brand green the rest of the site uses; the rule at
   the top of this file styles the cart's button as well, so this one is scoped
   to the checkout page and wins on specificity. */
.gp-checkout .wc-block-components-checkout-place-order-button {
	block-size: 50px;
	border-radius: 12px;
	background: var(--gp-co-blue);
	font-size: 14px;
	font-weight: 600;
}

.gp-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: #00459e;
}

.gp-checkout__policy {
	margin: 24px 0 0;
	font-size: 14px;
}

.gp-checkout__policy a {
	color: var(--gp-co-blue);
}

/* ---------- order summary ---------- */

/* Live has no visible "Order summary" heading — the panel speaks for itself. */
.gp-checkout .wc-block-components-checkout-order-summary__title {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.gp-checkout .wc-block-components-order-summary-item__image img {
	border-radius: 8px;
}

.gp-checkout .wc-block-components-totals-wrapper {
	padding-block: 12px;
	border-block-start: 0;
}

.gp-checkout .wc-block-components-totals-item {
	font-size: 14px;
	color: #000;
}

/* The panel prints its figures in plain black; the green belongs to the site's
   own pages, not to Shopify's checkout. */
.gp-checkout .wc-block-components-totals-item__value {
	font-weight: 400;
	color: #000;
}

.gp-checkout .wc-block-components-totals-footer-item {
	border-block-start: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 16px;
	font-weight: 600;
}

.gp-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 20px;
	font-weight: 700;
	color: #000;
}

/* The coupon field sits open on live, styled like the fields above it. */
.gp-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	padding: 0;
	font-size: 14px;
	color: #000;
}

/* WooCommerce prints an empty div ahead of the two columns; left in the grid it
   takes the first track and pushes the summary out of the second. */
.gp-checkout .wc-block-checkout.wc-block-components-sidebar-layout>div:empty {
	display: none;
}

.gp-checkout .wc-block-checkout__main {
	grid-column: 1;
}

.gp-checkout .wc-block-checkout__sidebar {
	grid-column: 2;
}

/* Three classes, because the site-wide button rule at the top of this file is
   .wc-block-checkout .wc-block-components-button:not(.is-link) and :not()
   counts its argument. */
.gp-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button {
	block-size: 50px;
	border-radius: 12px;
	background: var(--gp-co-blue);
	font-size: 14px;
	font-weight: 600;
}

.gp-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: #00459e;
}

/* WooCommerce sizes these two as flex children of its own layout — an explicit
   width, which beats a grid item's default stretch and leaves both columns
   narrower than their tracks. */
.gp-checkout .wc-block-checkout__main,
.gp-checkout .wc-block-checkout__sidebar {
	inline-size: auto;
	min-inline-size: 0;
	align-self: stretch;
}

/* Live shows no radio circle in these groups at all: the chosen row is the one
   with the blue rule around it. The input stays in the page for the keyboard
   and for screen readers, just not on screen. */
.gp-checkout .wc-block-components-radio-control__input {
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

.gp-checkout .wc-block-components-radio-control__option-layout,
.gp-checkout .wc-block-components-radio-control__label-group {
	margin-inline-start: 0;
}

/* The summary is not a card on live — the grey panel is the frame. */
.gp-checkout .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* The policy link sits under the form column, on the same gutter. */
.gp-checkout .gp-checkout__policy {
	padding-inline: var(--gp-co-gutter) 41px;
	padding-block-end: 40px;
	margin-block-start: 0;
}

@media (max-width: 900px) {

	/* The desktop rules pin the summary to column 2; in a single-column grid
	   that is an implicit track off to the side rather than a row below. */
	.gp-checkout .wc-block-checkout__sidebar {
		grid-column: 1;
		grid-row: 1;
	}

	.gp-checkout .wc-block-checkout__main {
		grid-column: 1;
		grid-row: 2;
	}
}

/* ---------- contact: the sign-in link ---------- */

/* The link lives inside the heading, not beside it, so the heading is the row
   that has to spread. */
.gp-checkout .wc-block-components-checkout-step__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 0;
}

.gp-checkout .wc-block-components-checkout-step__heading-content {
	display: block;
	flex: none;
}

.gp-checkout .wc-block-checkout__login-prompt {
	font-size: 14px;
	color: var(--gp-co-blue);
	text-decoration: underline;
}

/* Live does not explain that the customer is a guest; the sign-in link above
   says everything that line was there to say. */
.gp-checkout .wc-block-checkout__guest-checkout-notice {
	display: none;
}

.gp-checkout .wc-block-components-checkout-step__content {
	margin-block-start: 16px;
}

/* ---------- payment: the reassurance line ---------- */

/* Live prints this under the Payment heading. WooCommerce has no slot for it,
   and it is a fixed line rather than anything the store sets, so it is drawn
   from the stylesheet. */
.gp-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__heading::after {
	content: "All transactions are secure and encrypted.";
	display: block;
	flex-basis: 100%;
	margin-block-start: 4px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.6);
}

.gp-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__heading {
	flex-wrap: wrap;
}

/* ---------- order summary ---------- */

/* Live lists the line once: thumbnail, name, line total. The unit prices, the
   saving badge and the product's short description are all WooCommerce's. */
.gp-checkout .wc-block-components-order-summary-item__individual-prices,
.gp-checkout .wc-block-components-sale-badge,
.gp-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata {
	display: none;
}

.gp-checkout .wc-block-components-order-summary-item {
	padding-block: 0 24px;
	border: 0;
}

.gp-checkout .wc-block-components-product-name {
	font-size: 14px;
	font-weight: 400;
	color: #000;
}

/* ---------- discount field ---------- */

/* The script opens this panel on load, so its own toggle is redundant — live
   shows the field alone. */
.gp-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.gp-checkout .wc-block-components-totals-coupon {
	padding-block: 0 24px;
}

.gp-checkout .wc-block-components-totals-coupon__form {
	display: flex;
	gap: 0;
	align-items: stretch;
	border: 1px solid var(--gp-co-border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.gp-checkout .wc-block-components-totals-coupon__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	border: 0;
	border-radius: 0;
	margin: 0;
}

.gp-checkout .wc-block-components-totals-coupon__input input[type="text"] {
	block-size: 47px;
	padding: 14px 14px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 14px;
}

/* Live's Apply is a quiet grey button inside the same box, not a brand-green
   call to action. */
.gp-checkout .wc-block-components-totals-coupon__button {
	flex: none;
	block-size: 47px;
	padding-inline: 18px;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.04);
	font-size: 14px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.55);
}

.gp-checkout .wc-block-components-totals-coupon__button:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.08);
	color: #000;
}

/* The coupon input is also a text input, so the field rule above draws a second
   border inside the one on the form. */
.gp-checkout .wc-block-components-totals-coupon__input.wc-block-components-text-input {
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Three classes, to outrank the site-wide green button rule at the top of this
   file (.wc-block-checkout .wc-block-components-button:not(.is-link)). */
.gp-checkout .wc-block-checkout .wc-block-components-totals-coupon__button {
	flex: none;
	block-size: 47px;
	padding-inline: 18px;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.04);
	font-size: 14px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.55);
}

.gp-checkout .wc-block-checkout .wc-block-components-totals-coupon__button:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.08);
	color: #000;
}

/* The reassurance line is a block of its own under the heading, not a second
   column beside it. */
.gp-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__heading {
	display: block;
}

/* The input keeps a border of its own inside the coupon box; the box is the
   only frame live draws. */
.gp-checkout .wc-block-components-totals-coupon .wc-block-components-totals-coupon__input input[type="text"] {
	border: 0;
	outline: 0;
	box-shadow: none;
}

.gp-checkout .wc-block-components-totals-coupon .wc-block-components-totals-coupon__input:focus-within {
	box-shadow: none;
}

.gp-checkout .wc-block-components-totals-coupon__form:focus-within {
	border-color: var(--gp-co-blue);
	box-shadow: 0 0 0 1px var(--gp-co-blue);
}

/* ================= second pass against the live checkout =================
 *
 * Measured on gyanpradip.com's checkout at a 1265 viewport: the summary
 * column is 400px wide inside a 582.5px panel, the brand mark is a 50px
 * square, the totals rows sit 25px apart and the Apply button is a small
 * inset grey pill rather than a full-height slab.
 */

/* ---------- brand mark ---------- */

/* The mark comes from Settings > Site Logo, the same image the site header
   carries, so the checkout never needs its own upload. It is a wordmark
   (130x40), so it is sized by its height and left free to be as wide as its
   own ratio makes it. Two classes so core's `.wp-block-site-logo img` rule,
   which loads after the theme's, does not win the height back. */
.gp-checkout-head .wp-block-site-logo img {
	inline-size: auto;
	block-size: 40px;
	max-inline-size: none;
}

/* ---------- summary column ---------- */

/* The panel is 582.5 wide and live insets its contents to 400: 40 on the
   left, and on the right the same gutter the page carries on its left. */
.gp-checkout .wc-block-checkout__sidebar {
	padding: 40px var(--gp-co-gutter) 40px 40px;
}

/* WooCommerce prints a wrapper for discounts and one for fees whether or not
   the order has any; empty, each still costs its own 24px of padding, which
   is the gap that opened between Subtotal and Shipping. */
.gp-checkout .wc-block-components-totals-wrapper:empty {
	display: none;
}

.gp-checkout .wc-block-components-totals-wrapper {
	padding-block: 0;
	margin-block-start: 12px;
}

.gp-checkout .wc-block-components-totals-item {
	padding-block: 3px;
}

/* Live's thumbnail is 64px square with the quantity badge on its corner. */
.gp-checkout .wc-block-components-order-summary-item__image,
.gp-checkout .wc-block-components-order-summary-item__image img {
	inline-size: 64px;
	block-size: 64px;
}

/* The grand total is one size for both halves on live — 18px, the label at
   600 and the figure at 700. */
.gp-checkout .wc-block-components-totals-footer-item {
	margin-block-start: 16px;
	padding-block-start: 16px;
	font-size: 18px;
}

.gp-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 18px;
}

/* ---------- discount field ---------- */

.gp-checkout .wc-block-components-totals-coupon {
	padding-block: 0;
	margin-block-start: 34px;
}

/* Apply is a 57x35 pill inset 7px inside the field, not a full-height slab. */
.gp-checkout .wc-block-components-totals-coupon__form {
	align-items: center;
	padding-inline-end: 7px;
}

.gp-checkout .wc-block-checkout .wc-block-components-totals-coupon__button {
	block-size: 35px;
	min-block-size: 35px;
	padding-inline: 10px;
	border-radius: 8px;
	background: var(--gp-co-panel);
	color: #000;
}

/* ---------- payment and shipping options ---------- */

/* An option with a description is wrapped in an accordion: the highlight
   belongs on that wrapper, or the ring closes around the label alone and the
   description hangs below it in a box of its own. */
.gp-checkout .wc-block-components-radio-control-accordion-option {
	border: 0;
}

.gp-checkout .wc-block-components-radio-control-accordion-option+.wc-block-components-radio-control-accordion-option {
	border-block-start: 1px solid var(--gp-co-border);
}

.gp-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	background: var(--gp-co-selected);
	box-shadow: inset 0 0 0 2px var(--gp-co-blue);
}

.gp-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked {
	background: none;
	box-shadow: none;
}

.gp-checkout .wc-block-components-radio-control-accordion-content {
	padding: 0 14px 14px;
	border: 0;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
}

/* ---------- order note ---------- */

/* Live does not offer one. */
.gp-checkout .wc-block-checkout__add-note {
	display: none;
}

/* WooCommerce rings the chosen row in near-black from
   .wc-block-components-radio-control--highlight-checked, which reads as a
   dark rule across the bottom of the box. Live's ring is the same blue as
   the submit, so these repeat the rule at that selector's weight. */
.gp-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked,
.gp-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
	background: var(--gp-co-selected);
	box-shadow: inset 0 0 0 2px var(--gp-co-blue);
}

/* Inside an accordion the ring belongs to the wrapper, which carries the
   description as well; the label keeps none of its own. */
.gp-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked {
	background: none;
	box-shadow: none;
}

/* Live's payment box says only which method it is; the gateway's own
   instructions are not printed at checkout. */
.gp-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
	display: none;
}

/* The summary's desktop gutter is stated after the narrow-viewport block
   above, so the phone padding is restated here rather than moved. */
@media (max-width: 900px) {
	.gp-checkout .wc-block-checkout__sidebar {
		padding: 24px 16px;
	}
}

/* ================= wide-screen geometry =================
 *
 * The gutter above was measured at a single width and read as a share of the
 * window, which is wrong: live does not spread its two columns apart as the
 * window grows. Both hug the middle, and everything outside them is margin.
 *
 * Measured at 1265 and again at 1920:
 *
 *                       1265            1920
 *   column split        682.5/582.5     1002.5/902.5   -> calc(50% +/- 50px)
 *   form left edge      142.5           462.5          -> calc(50% - 490px)
 *   summary left edge   722.5           1042.5         -> column start + 40
 *   summary width       400             400            -> fixed
 *
 * So: the left column leads the right by a constant 100px, the 499px form is
 * pinned to the inside edge of the left column and the 400px summary to the
 * inside edge of the right one, each inset 40px from the divider. The header
 * lines up with both, which makes its padding symmetric.
 */

.gp-checkout,
.gp-checkout-head {
	/* Where the form's left edge falls, and by symmetry where the summary's
	   right edge does. Floored so narrow windows keep a margin. */
	--gp-co-edge: max(16px, calc(50% - 490px));
}

.gp-checkout-head__inner {
	padding-inline: var(--gp-co-edge);
}

.gp-checkout .wc-block-checkout.wc-block-components-sidebar-layout {
	grid-template-columns: calc(50% + 50px) calc(50% - 50px);
}

/* The form is pinned to the divider rather than to the window's edge. The
   41 on the inside is live's: its form edge lands on 462.5 at 1920, a pixel
   short of a round 40. */
.gp-checkout .wc-block-checkout__main {
	display: flex;
	justify-content: flex-end;
	padding: 40px 41px 64px 40px;
}

.gp-checkout .wc-block-checkout__form {
	flex: none;
	inline-size: 499px;
	max-inline-size: 100%;
}

.gp-checkout .wc-block-checkout__sidebar {
	padding: 40px;
}

/* 400 on live at every width, left-aligned against the divider. */
.gp-checkout .wc-block-checkout__sidebar>* {
	max-inline-size: 400px;
}

/* The notices and the policy link sit outside the checkout block, so they
   take the form's edge from the same measurement rather than from the grid. */
.gp-checkout>.woocommerce-store-notices-container,
.gp-checkout .gp-checkout__policy {
	margin-inline: var(--gp-co-edge);
	max-inline-size: 499px;
	/* The gutter pass padded these instead of placing them; the edge above
	   does the placing now. */
	padding-inline: 0;
}

@media (max-width: 900px) {

	/* One column: the form fills the width and nothing is pinned. */
	.gp-checkout .wc-block-checkout.wc-block-components-sidebar-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.gp-checkout .wc-block-checkout__main {
		justify-content: flex-start;
		padding: 24px 16px 48px;
	}

	.gp-checkout .wc-block-checkout__form {
		inline-size: 100%;
	}

	.gp-checkout .wc-block-checkout__sidebar {
		padding: 24px 16px;
	}

	.gp-checkout .wc-block-checkout__sidebar>* {
		max-inline-size: none;
	}
}

/* ================= vertical rhythm =================
 *
 * Live's column, measured at 1265:
 *
 *   header ends            91
 *   Contact                131      40 below the header
 *   its field            169.9      14 below the heading
 *   Delivery             250.9      32 below the block above
 *   the address rows      +10       each
 *   Payment              836.6      20px/600, not 16
 *   "All transactions"   864.6      14px #707070, 4 under the heading
 *   Billing address      976.4      16px/600
 *   Complete order      1144.4
 *   page ends           1315
 *
 * Ours ran 88px below the header instead of 40 and 125px longer overall.
 */

/* ---------- the gap under the header ---------- */

/* 90 plus the rule underneath is live's 91. */
.gp-checkout-head__inner {
	min-block-size: 90px;
}

/* Two 24s were stacking above the grid: the flow layout's margin between the
   template's children, and the checkout block's own block padding. Live has
   neither — the 40px inside the column is the whole gap. */
main.gp-checkout,
.gp-checkout>.entry-content {
	margin-block-start: 0;
}

.gp-checkout .wc-block-checkout {
	padding-block-start: 0;
}

/* ---------- the band under the columns ---------- */

/* Live's grey runs to the bottom of the page: the policy line sits in the
   white column with grey beside it. Ours is a sibling of the checkout block,
   below both columns, so the panel stopped short and left a white band. The
   page carries the split itself; the sidebar's own background then paints
   the same grey over its half. */
@media (min-width: 901px) {
	.gp-checkout {
		background: linear-gradient(to right,
				#fff 0,
				#fff calc(50% + 50px),
				var(--gp-co-panel) calc(50% + 50px),
				var(--gp-co-panel) 100%);
	}
}

/* ---------- headings ---------- */

.gp-checkout .wc-block-components-checkout-step__heading {
	margin-block-end: 14px;
}

.gp-checkout .wc-block-components-checkout-step__content {
	margin-block-start: 0;
}

/* Payment is a section heading on live, the size of Contact and Delivery;
   only Shipping Method and Billing address are the smaller 16. */
.gp-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__title {
	font-size: 20px;
}

.gp-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__heading::after {
	color: #707070;
}

/* ---------- field rows ---------- */

/* 10 both ways on live; WooCommerce ships 12. */
.gp-checkout .wc-block-components-address-form {
	gap: 0 10px;
}

.gp-checkout .wc-block-components-address-form>.wc-block-components-text-input,
.gp-checkout .wc-block-components-address-form>.wc-blocks-components-select,
.gp-checkout .wc-block-components-address-form>.wc-block-components-country-input,
.gp-checkout .wc-block-components-address-form>.wc-block-components-state-input {
	margin-block-start: 10px;
}

/* The label is black on live, not a grey placeholder. */
.gp-checkout .wc-block-components-text-input label,
.gp-checkout .wc-blocks-components-select__label {
	color: #000;
}

/* Live's address is one line; it offers no second one. */
.gp-checkout .wc-block-components-address-form__address_2-toggle {
	display: none;
}

/* The heading's own bottom margin sits inside its container, which then adds
   16 of its own; live's whole gap is 14, so it is stated once on the outer
   box. */
.gp-checkout .wc-block-components-checkout-step__heading {
	margin-block-end: 0;
}

.gp-checkout .wc-block-components-checkout-step__heading-container {
	margin-block-end: 14px;
}

/* The district field is a select inside a wrapper, and the wrapper's 10 was
   being added to the select's own 12 — it sat a row-gap below its partner. */
.gp-checkout .wc-block-components-address-form .wc-blocks-components-select {
	margin-block-start: 0;
}

/* ---------- summary alignment ---------- */

/* WooCommerce insets the summary list by 16; live runs it to the edges of
   the 400 column, so the thumbnail sits on the column's start and the price
   on its end. */
.gp-checkout .wc-block-components-order-summary {
	padding-inline: 0;
}

/* The first row starts level with the form's first heading — no leading
   margin above it, and none of the cart block's own top padding. */
.gp-checkout .wc-block-components-totals-wrapper:first-child {
	margin-block-start: 0;
}

.gp-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	padding-block-start: 0;
}

/* The coupon panel carries the same 16px inset the summary list did. */
.gp-checkout .wc-block-components-totals-coupon {
	padding-inline: 0;
}

/* Live's first thumbnail sits level with the top of the column. */
.gp-checkout .wc-block-components-order-summary-item__image {
	margin-block-start: 0;
}

/* The 7px that insets the Apply pill was being added to the field's width
   rather than taken out of it, so the box ran 9px past its column. */
.gp-checkout .wc-block-components-totals-coupon__form {
	box-sizing: border-box;
}

/* Live leaves 101 between the last cart line and the discount field, and 34
   between that field and Subtotal. */
.gp-checkout .wc-block-components-totals-coupon {
	margin-block-start: 69px;
	/* Collapses against the next row's own 12. */
	margin-block-end: 34px;
}

/* ================= the chosen row's ring =================
 *
 * Live paints it as an overlay that sits a pixel outside the row:
 *
 *   ::before { position: absolute; inset: -1px;
 *              border: 2px solid #005bd1; border-radius: 12px }

/* Inside an accordion the row is the wrapper, so the label underneath must
   not paint a tint of its own over the wrapper's. */
.gp-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked {
	background: none;
}

.gp-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked::before {
	content: none;
}

/* ================= one blue edge, drawn one way =================
 *
 * Live never recolours a control's own border. Every control keeps its 1px
 * #dedede at rest, and both blue states — a focused field and a chosen
 * option row — are the same 2px #005bd1 overlay sitting a pixel outside it.
 *
 * Fields here were doing it differently: the border itself turned blue at
 * 1px with another blue pixel shadowed outside, so a focused field did not
 * match the option rows beside it. Sampled on live at 1265: a focused field
 * paints 2px rgb(0,91,209), the same as a selected row.
 */
.gp-checkout .wc-block-components-text-input,
.gp-checkout .wc-blocks-components-select__container {
	position: relative;
}

.gp-checkout .wc-block-components-text-input:focus-within,
.gp-checkout .wc-blocks-components-select__container:focus-within {
	border-color: var(--gp-co-border);
	box-shadow: none;
}

.gp-checkout .wc-block-components-text-input:focus-within::before,
.gp-checkout .wc-blocks-components-select__container:focus-within::before {
	content: "";
	position: absolute;
	inset: -1px;
	border: 2px solid var(--gp-co-blue);
	border-radius: 12px;
	pointer-events: none;
}

/* Live's chosen-row tint is #f9f9ff; ours was a unit darker on red. */
.gp-checkout,
.gp-checkout-head {
	--gp-co-selected: #f9f9ff;
}

/* The browser's own focus outline was drawing a near-black 1px line just
   inside that ring, which read as a second, darker border on whichever field
   had the caret. The ring above is the focus indicator — it is 2px and high
   contrast — so the UA outline is redundant here. Live draws none either. */
.gp-checkout .wc-block-components-text-input input:focus,
.gp-checkout .wc-blocks-components-select__select:focus,
.gp-checkout .wc-block-components-totals-coupon__input input:focus {
	outline: none;
}

/* ================= where the billing fields land =================
 *
 * WooCommerce renders them between Delivery and Shipping Method, which is
 * where its own checkbox sits. Live asks the question after Payment and
 * opens the fields directly beneath it — and since we moved the question,
 * choosing "Use a different billing address" appeared to do nothing: the
 * fields were opening some 650px further up the page, off screen.
 *
 * Ordered rather than moved: the block owns those nodes and re-renders them,
 * so taking them out of its tree would not survive.
 */
.gp-checkout .wc-block-checkout__form {
	display: flex;
	flex-direction: column;
}

.gp-checkout .wc-block-checkout__billing-fields {
	order: 1;
}

.gp-checkout .wc-block-checkout__order-notes,
.gp-checkout .wc-block-checkout__terms,
.gp-checkout .wc-block-checkout__actions {
	order: 2;
}

/* ================= the summary carries no rules =================
 */
.gp-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.gp-checkout .wc-block-components-totals-footer-item,
.gp-checkout .wc-block-components-order-summary-item {
	border: 0;
}

.gp-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content {
	display: block;
}

.gp-checkout .wc-block-components-totals-footer-item {
	padding-block-start: 0;
	margin-block-start: 16px;
}

.gp-checkout .wc-block-checkout__sidebar [class*="wp-block-woocommerce-checkout-order-summary"] {
	border: 0;
}

.gp-checkout .wc-block-components-totals-item {
	padding-block: 0;
}

.gp-checkout [class*="order-summary-subtotal-block"],
.gp-checkout [class*="order-summary-discount-block"],
.gp-checkout [class*="order-summary-fee-block"],
.gp-checkout [class*="order-summary-shipping-block"],
.gp-checkout [class*="order-summary-taxes-block"] {
	margin-block-start: 6px;
}

.gp-checkout .wc-block-components-totals-footer-item {
	margin-block-start: 0;
}

.gp-checkout .wc-block-checkout__billing-fields .wc-block-components-checkout-step__heading-container {
	display: none;
}

.gp-checkout .wc-block-checkout__billing-fields {
	margin-block-start: 16px;
}

.gp-checkout .wc-block-checkout__billing-fields {
	position: relative;
	margin-block-start: 0;
	padding: 0 15px 15px;
	background: var(--gp-co-selected);
	border-end-start-radius: 12px;
	border-end-end-radius: 12px;
}

.gp-checkout .wc-block-checkout__billing-fields::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--gp-co-blue);
	border-block-start: 0;
	border-radius: 0 0 12px 12px;
	pointer-events: none;
}

.gp-checkout .wc-block-checkout__billing-fields .wc-block-components-text-input,
.gp-checkout .wc-block-checkout__billing-fields .wc-blocks-components-select__container {
	background: var(--wp--preset--color--surface);
}

@media (max-width: 768px) {
	.gp-checkout .wc-block-components-totals-coupon {
		margin-block-start: 0px;
	}
}

/* ========================================================== Cart page -- */
.gp-cart__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block-end: var(--wp--preset--spacing--60);
	text-align: center;
}

.gp-cart__head>* {
	margin: 0;
}

.gp-cart__eyebrow {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--brand-gold);
}

.woocommerce-cart .gp-cart .gp-cart__title,
.woocommerce-cart .gp-cart .wp-block-post-title {
	max-inline-size: none;
}

.gp-cart .gp-cart__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.2;
}

.gp-cart-block .wp-block-woocommerce-filled-cart-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 28px;
	align-items: start;
}

.gp-cart-block .wc-block-cart__main,
.gp-cart-block .wc-block-cart__sidebar {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none;
	min-inline-size: 0;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
}

.gp-cart-block .wc-block-cart__sidebar {
	position: sticky;
	/* Clear of the sticky header, with a little air. */
	inset-block-start: 24px;
	background: var(--wp--preset--color--surface-alt);
}

.gp-cart-block .wc-block-cart-items {
	margin: 0;
}

.gp-cart-block .wc-block-cart-items__header {
	border-block-end: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5b5b5b;
}

.gp-cart-block .wc-block-cart-items__row {
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.gp-cart-block .wc-block-cart-items__row:last-child {
	border-block-end: 0;
}

/* A book is recognised by its cover, and the block's default thumbnail is too
   small to recognise one by. */
.gp-cart-block .wc-block-cart-item__image img {
	inline-size: 84px;
	block-size: auto;
	border-radius: 8px;
}

.gp-cart-block .wc-block-cart-item__wrap .wc-block-components-product-name {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--ink-heading);
	text-decoration: none;
}

.gp-cart-block .wc-block-components-totals-item__label {
	font-weight: 400;
}

/* No rule of its own above the grand total.
 *
 * WooCommerce already draws one on the wrapper the row sits in, 16px of
 * padding higher up, so stating a second one here put two lines above সর্বমোট
 * with a gap between them. The wrapper's is the one that lines up with the
 * rules between the other summary rows, so that is the one that stays. */
.gp-cart-block .wc-block-components-totals-footer-item {
	border-block-start: 0;
}

.gp-cart-block .wc-block-cart__totals-title {
	padding: 0 0 12px;
	border-block-end: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink-heading);
}

.gp-cart-block .wc-block-components-panel__button {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.gp-cart-block__back {
	margin-block-start: 14px;
	font-size: var(--wp--preset--font-size--sm);
}

.gp-cart-block__back a {
	text-decoration: none;
}

.gp-cart-block__back a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------- Empty cart -- */

.gp-cart-block .wp-block-woocommerce-empty-cart-block {
	max-inline-size: 640px;
	margin-inline: auto;
	padding: 48px 32px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--surface-alt);
	text-align: center;
}

.gp-cart-block .gp-cart-block__empty-title {
	margin-block: 0 10px;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.gp-cart-block__empty-buttons {
	margin-block-start: 22px;
}

/* --------------------------------------------------------- Assurances -- */

.gp-cart__assurance {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-block-start: var(--wp--preset--spacing--70);
}

.gp-cart__assurance.gp-cart__assurance>* {
	margin-block: 0;
}

.gp-cart__assurance .gp-trust-badge {
	block-size: 100%;
	padding: 26px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
}

@media (max-width: 1024px) {
	.gp-cart-block .wp-block-woocommerce-filled-cart-block {
		grid-template-columns: minmax(0, 1fr);
	}

	.gp-cart-block .wc-block-cart__sidebar {
		position: static;
	}
}

@media (max-width: 782px) {
	.gp-cart__assurance {
		grid-template-columns: 1fr;
	}

	.gp-cart-block .wc-block-cart__main,
	.gp-cart-block .wc-block-cart__sidebar {
		padding: 18px;
	}
}

/* ================= the four-field checkout =================
 *
 * A cash-on-delivery bookshop delivering inside Bangladesh asks for a name, a
 * mobile number, a district and a street address. Everything else WooCommerce
 * renders is either answerable from those four or is not used here.
 *
 * The fields themselves are removed server-side, in the helper plugin's
 * checkout-fields.php, through the address locale — that is the supported way
 * and it keeps the Store API's validation in step with what is on screen.
 * Three things cannot be removed that way and are hidden here instead. Each is
 * hidden rather than deleted because WooCommerce still needs its value.
 * ------------------------------------------------------------------------- */

/* Contact.
 *
 * The email address lives in WooCommerce's `contact` field group, not in the
 * address locale, and only `address` fields are folded into the locale that
 * `hidden` is read from — so there is no server-side way to drop it. It is
 * filled from the mobile number instead (checkout.js, with checkout-fields.php
 * underneath it) and the whole step is taken off screen.
 *
 * `display: none`, not the clip-path pattern this used to use.
 *
 * Clipping hides a thing from eyes and from nobody else: a screen reader still
 * announced "ইমেইল ঠিকানা, required" and a keyboard still tabbed into a field
 * that was not on screen. Verified — the block reported `display: block`,
 * `visibility: visible`, focusable, required.
 *
 * `display: none` takes it out of the accessibility tree and out of the tab
 * order, which is what "hidden" was supposed to mean. The field still mounts
 * and still submits: its value lives in the checkout's React state, which
 * checkout.js writes through the native setter, and the block posts from that
 * state rather than from the rendered form.
 */
.gp-checkout .wp-block-woocommerce-checkout-contact-information-block {
	display: none;
}

/* Country.
 *
 * The store sells to Bangladesh only, so the select has exactly one option and
 * asking is noise. It is hidden here rather than in the locale because the
 * block checkout clears the value of any field it is told is hidden —
 * `fields.filter( f => f.hidden ).map( f => [ f.key, '' ] )` — and an empty
 * country matches no shipping zone, so no delivery rate would be offered.
 */
.gp-checkout .wc-block-components-country-input,
.gp-checkout .wc-block-components-address-form__country {
	display: none;
}

/* Billing address.
 *
 * Billing is the delivery address, always. WooCommerce renders the choice
 * whenever it is collecting a shipping address; there is nothing to choose
 * between here, and the default — same as delivery — is the right answer.
 */
.gp-checkout .wp-block-woocommerce-checkout-billing-address-block,
.gp-checkout .wc-block-checkout__billing-fields,
.gp-checkout .wc-block-checkout__use-address-for-billing {
	display: none;
}

/* The name and the mobile number share a row.
 *
 * WooCommerce lays this form out as a wrapping flexbox and gives first_name
 * `flex: 1 0 calc(50% - 12px)` so that it pairs with last_name. With last_name
 * gone the phone field took the empty half, which happens to read well for a
 * four-field form — so it is stated here deliberately rather than left to
 * inheritance, and recomputed against this theme's 10px gap instead of
 * WooCommerce's 12px, which otherwise leaves a 2px tail on the row.
 *
 * The parent class is named as an ancestor to outrank WooCommerce's own rule:
 * both are otherwise (0,2,0) and wc-blocks-checkout.css is a <link> that lands
 * after this sheet, which the theme inlines at wp_enqueue_scripts priority 5. */
.gp-checkout .wc-block-components-address-form .wc-block-components-address-form__first_name,
.gp-checkout .wc-block-components-address-form .wc-block-components-address-form__phone {
	flex: 1 0 calc(50% - 5px);
}

@media (max-width: 560px) {

	.gp-checkout .wc-block-components-address-form .wc-block-components-address-form__first_name,
	.gp-checkout .wc-block-components-address-form .wc-block-components-address-form__phone {
		flex-basis: 100%;
	}
}

/* The delivery step is the first thing on the page now that contact is gone,
 * so it carries the gap the contact step used to. */
.gp-checkout .wp-block-woocommerce-checkout-shipping-address-block {
	margin-block-start: 0;
}

/* ---------- validation messages ---------- */
.gp-checkout .wc-block-components-text-input,
.gp-checkout .wc-block-components-state-input,
.gp-checkout .wc-blocks-components-select__container {
	position: relative;
}

.gp-checkout .wc-block-components-validation-error {
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	margin: 0;
	padding-block-start: 5px;
	line-height: 1.4;
}

.gp-checkout .wc-block-components-validation-error>p {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
}

/* The field is the thing that is wrong, so the field carries the colour. */
.gp-checkout .wc-block-components-text-input.has-error,
.gp-checkout .wc-block-components-state-input.has-error,
.gp-checkout .wc-blocks-components-select__container.has-error {
	border-color: #cc1818;
}

.gp-checkout .wc-block-components-text-input.has-error:focus-within,
.gp-checkout .wc-block-components-state-input.has-error:focus-within,
.gp-checkout .wc-blocks-components-select__container.has-error:focus-within {
	border-color: #cc1818;
	box-shadow: 0 0 0 1px #cc1818;
}

/* One line of message is 18px plus the 5px it is pushed down; a wrapped
   message on a narrow screen gets two. */
.gp-checkout .wc-block-components-address-form>.has-error {
	margin-block-end: 24px;
}

@media (max-width: 560px) {
	.gp-checkout .wc-block-components-address-form>.has-error {
		margin-block-end: 26px;
	}
}

/* ---------- the chosen row's corners ---------- */

.gp-checkout .wc-block-components-radio-control>.wc-block-components-radio-control__option,
.gp-checkout .wc-block-components-radio-control>.wc-block-components-radio-control-accordion-option {
	border-radius: 0;
}

/* The top row curves with the top of the box... */
.gp-checkout .wc-block-components-radio-control>.wc-block-components-radio-control__option:first-child,
.gp-checkout .wc-block-components-radio-control>.wc-block-components-radio-control-accordion-option:first-child {
	border-start-start-radius: 11px;
	border-start-end-radius: 11px;
}

.gp-checkout .wc-block-components-radio-control>.wc-block-components-radio-control__option:last-child,
.gp-checkout .wc-block-components-radio-control>.wc-block-components-radio-control-accordion-option:last-child {
	border-end-start-radius: 11px;
	border-end-end-radius: 11px;
}

.gp-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border-radius: inherit;
}

/* ================= the cart list ================= */
.gp-cart-block .wc-block-cart-item__image {
	inline-size: 76px;
	padding-inline-end: 16px;
}

.gp-cart-block .wc-block-cart-item__image img {
	inline-size: 76px;
	block-size: 100px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface-muted);
}

.gp-cart-block .wc-block-components-product-metadata__description {
	display: none;
}

.gp-cart-block .wc-block-cart-item__wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 4px 16px;
}

.gp-cart-block .wc-block-cart-item__wrap .wc-block-components-product-name {
	grid-column: 1;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
}

.gp-cart-block .wc-block-cart-item__prices {
	grid-column: 1;
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(0, 0, 0, 0.6);
}

.gp-cart-block .wc-block-cart-item__prices .wc-block-components-product-price__value {
	color: inherit;
}

.gp-cart-block .wc-block-cart-item__prices del {
	opacity: 0.65;
	margin-inline-end: 4px;
}

/* Controls get their own row, with air above them. */
.gp-cart-block .wc-block-cart-item__quantity {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-start: 10px;
}

.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	margin: 0;
	flex: none;
}

.gp-cart-block .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	padding: 0;
	margin: 0;
	border-radius: 8px;
	color: rgba(0, 0, 0, 0.45);
	background: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.gp-cart-block .wc-block-cart-item__remove-link:hover,
.gp-cart-block .wc-block-cart-item__remove-link:focus-visible {
	color: #cc1818;
	border-color: rgba(204, 24, 24, 0.35);
	background: rgba(204, 24, 24, 0.06);
}

@media (prefers-reduced-motion: reduce) {
	.gp-cart-block .wc-block-cart-item__remove-link {
		transition: none;
	}
}

.gp-cart-block .wc-block-cart-item__total {
	vertical-align: top;
	text-align: end;
	white-space: nowrap;
}

.gp-cart-block .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.gp-cart-block .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--ink-heading);
}

.gp-cart-block .wc-block-components-sale-badge {
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(6, 78, 59, 0.08);
	color: var(--wp--preset--color--brand-green);
	font-size: var(--wp--preset--font-size--xs, 12px);
	font-weight: 600;
	white-space: nowrap;
}

.gp-cart-block .wc-block-cart-items__row>td {
	padding-block: 20px;
}

.gp-cart-block .wc-block-cart-items__row:first-child>td {
	padding-block-start: 16px;
}

.gp-cart-block .wc-block-cart-items__row:last-child>td {
	padding-block-end: 4px;
}

/* On a phone the table stops sizing itself. */
@media (max-width: 560px) {

	.gp-cart-block .wc-block-cart-items,
	.gp-cart-block .wc-block-cart-items tbody {
		display: block;
		inline-size: 100%;
		max-inline-size: 100%;
	}

	.gp-cart-block .wc-block-cart-items__row>td {
		padding-block: 16px;
	}

	/* A smaller cover, still portrait. */
	.gp-cart-block .wc-block-cart-item__image,
	.gp-cart-block .wc-block-cart-item__image img {
		inline-size: 64px;
	}

	.gp-cart-block .wc-block-cart-item__image img {
		block-size: 84px;
	}

	.gp-cart-block .wc-block-cart-item__image {
		padding-inline-end: 12px;
	}

	.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
		flex: none;
	}
}

/* ---------- rules that close nothing ---------- */
.gp-cart-block .wc-block-cart-items {
	border-block-end: 0;
}

.gp-cart-block .wc-block-cart__totals-title,
.gp-cart-block .wp-block-woocommerce-cart-order-summary-heading-block {
	border-block-end: 0;
}

.gp-cart-block .wc-block-cart__totals-title+.wc-block-components-totals-wrapper,
.gp-cart-block .wp-block-woocommerce-cart-order-summary-heading-block+.wc-block-components-totals-wrapper {
	border-block-start: 0;
}

.gp-cart-block .wp-block-woocommerce-cart-order-summary-block {
	border-block-end: 0;
}

/* ---------- the quantity stepper ---------- */
.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	inline-size: 96px;
	block-size: 30px;
	min-block-size: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	background: none;
	overflow: hidden;
}

.gp-cart-block .wc-block-components-quantity-selector__button,
.gp-cart-block .wc-block-components-quantity-selector__input {
	border: 0;
	background: none;
	box-shadow: none;
}

.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 28px;
	min-inline-size: 0;
	block-size: 28px;
	padding: 0;
	margin: 0;
	font-size: 0;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	opacity: 1;
}

.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: var(--wp--preset--color--brand-green);
	background: none;
}

.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:disabled {
	opacity: 0.35;
	cursor: default;
}

.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button::before {
	content: "";
	display: block;
	inline-size: 9px;
	block-size: 9px;
	background: currentColor;
}

.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button--minus::before {
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 2" fill="black"><path fill-rule="evenodd" clip-rule="evenodd" d="M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z"/></svg>') center / contain no-repeat;
}

.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button--plus::before {
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="black"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z"/></svg>') center / contain no-repeat;
}

.gp-cart-block .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input {
	box-sizing: border-box;
	flex: 1 1 auto;
	inline-size: auto;
	min-inline-size: 0;
	block-size: 28px;
	min-block-size: 0;
	padding: 0 6px;
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	color: var(--wp--preset--color--ink);
	appearance: textfield;
}

.gp-cart-block .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.gp-cart-block .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}